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

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

#navig-info {
	position: absolute;
	top: 5px;
	right: 25px;
}


#info {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;

	height: 1024px;
	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;
}

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

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

/* Show the info when animating or visible */
.info-visible #info {
  display: block;
  width: 50%;
}
 
.info-visible #maincrxframe {
  display: block;
  margin-right: 50%;
  width: 50%;
} 
.info-visible #home {
  display: block;
  margin-right: 50%;
  width: 50%;
} 
.info-visible #AboutUs {

  display: block;

  margin-right: 50%;

  width: 50%;

} 

.info-visible #thinkersplus {

  display: block;

  margin-right: 50%;

  width: 50%;

}

.info-visible #RITCP-trending {

  display: block;

  margin-right: 50%;

  width: 50%;

}

.info-visible #RITCP-links {

  display: block;

  margin-right: 50%;

  width: 50%;

}





/***

 * If the animating class is present then apply

 * the CSS transition to #page over 300ms.

 */

.animating #list {

    transition: transform 300ms ease-in-out;

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

}

 

/***
 * If the left class is present then transform
 * the #page element 240px to the left.
 */	
.animating.left #list {
    transform: translate3d( 0px, 0, 0 );
    -webkit-transform: translate3d( 0px, 0, 0 );
}
 
/***
 * If the right class is present then transform
 * the #page element 240px to the right.
 */
.animating.right #list {
    transform: translate3d( 0px, 0, 0 );
    -webkit-transform: translate3d( 0px, 0, 0 );
}
 
/***
 * If the menu-visible class is present then
 * shift the #page 240px from the left edge
 * via position: absolute to keep it in the 
 * open position. When .animating, .left and
 * .right classes are not present the CSS
 * transform does not apply to #page.
 */
.info-visible #list {
  right: 0px;
}
#list, #info {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

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

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