#page {
	position: relative; /* Set the position property so z-index will apply */
	z-index: 40; /* Make sure this is higher than #menu */
	padding: 0px;

	background: #fff;
	height: 100%;
	transform: translate3d( -0.01px, 0, 0 ); /* X, Y, Z */
    webkit-transform: translate3d( -0.01px, 0, 0 );
}

#toggle-menu {
	position: absolute;
	top: 5px;
	left: 25px;
}

#menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;

	height: 500px;
	padding: 15px 25px;
	margin: 0;
	list-style: none;
	background-color: #ffffff;
	z-index: 30; /* Make sure the z-index is lower than the #page */
	overflow-y: scroll;
}

#menu li{
	border-top: 0.5px solid #C0C0C0; 
}
#menu a {
	display: block;
	color: #333;
	padding: 10px 0;
	border-bottom: 1px solid rgb( 255, 255, 255);
}

#menu a:link, a:visited, a:active {
    text-decoration: none;
}
#menu a:hover {
  padding-left:10px;
  color: rgba(0,153,153,0.85);
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
  border-left:5px solid #0B0B61;
}
#menu li, h {
	text-align:left;
}

/* Show the menu when animating or visible */
.menu-visible #menu {
  display: block;
  width: 50%;
}

.menu-visible #maincrxframe {
  display: block;
  margin-left: 50%;
  width: 50%;
}
.menu-visible #home {
  display: block;
  margin-left: 50%;
  width: 50%;
} 
.menu-visible #AboutUs {

  display: block;

  margin-left: 50%;

  width: 50%;

} 

.menu-visible #thinkersplus {

  display: block;

  margin-left: 50%;

  width: 50%;

} 

.menu-visible #RITCP-trending {

  display: block;

  margin-left: 50%;

  width: 50%;

}

.menu-visible #RITCP-links {

  display: block;

  margin-left: 50%;

  width: 50%;

}



/***

 * If the animating class is present then apply

 * the CSS transition to #page over 300ms.

 */

.animating #page {

    transition: transform 300ms ease-in-out;

    -webkit-transition: -webkit-transform 300ms ease-in-out;

}

 

.animating.left #page {
    transform: translate3d( 0px, 0, 0 );
    -webkit-transform: translate3d( 0px, 0, 0 );
}
 
.animating.right #page {
    transform: translate3d( 0px, 0, 0 );
    -webkit-transform: translate3d( 0px, 0, 0 );
}
 
.menu-visible #page {
  left: 0px;
}
#page, #menu {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

/* Hide the #toggle-menu element on larger screens */
#toggle-menu {
  display: none;
}
 
@media only screen and (max-width: 1024px) {
  #toggle-menu {
    display: block;
  } 
  /* Place all the CSS for your mobile #menu here */
}

@media only screen and (max-height: 500px) {
  #menu a  {font-size: 8px;}
}