/* =Layout
--------------------------------------------------------------------------------------------------------*/
*{
	padding:0;
	margin:0;
	 }
html{border-top: 5.5px solid #6B6B7A;}
 body { background:#f9f9f9; font-family:'Open Sans',sans-serif; color: #FFF; font-size: 12px; line-height: 21px; background-color: #f5f5f5; 

background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed; }
a:link, a:visited, a:active {-moz-transition:all .3s linear;-webkit-transition:all .3s linear;-ms-transition:all .3s linear;transition:all .3s linear;display:block;margin:0;padding:10px 20px; color: #FFF; text-decoration: none;font-family:'Open Sans',sans-serif;color:#7A7A87;font-weight:0;}
a:hover {-moz-transition:all .3s linear;-webkit-transition:all .3s linear;-ms-transition:all .3s linear;transition:all .3s linear; text-decoration: none; }
#wrapper { width: 100%; position: relative; margin-top:20px; margin-left:10%; }
/* =Menu
--------------------------------------------------------------------------------------------------------*/

/* Reset */

.menu ul,
.menu li,
.menu a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* Menu */
.menu {	margin-left:65px;
	height: 40px;
	width: 100%;

}

.menu li {
	position: relative;
	list-style: none;
	float: left;
	display: block;
	height: 40px;
}

/* Links */

.menu li a {
	display: block;
	padding: 5px 14px;
	line-height: 28px;
	text-decoration: none;
	


font-family:'Open Sans',sans-serif;
	
	font-size: 20px;

	color: #444;
	
	transition: color .2s ease-in-out;
}


.menu li:hover > a { background: #F26524; color:#fff;border-radius:5px;}



/* Sub Menu */

.menu ul {z-index:100;
	position: absolute;
	top: 40px;
	left: 0;

	opacity: 0;
	
	background:url(../img/blue.fw.png);


	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;

	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	overflow: visible;
	padding: 0;
}
.menu ul>li>a{color:#fff;font-size:14px;width:200px;}
.menu ul>li>a:hover{background:#F26524;}

/*
Container
 
 */
 #container{ background-color: #f9f9f9; 

	 box-shadow:0 0 22px #666;
	 padding:0;
	 width:100%;
	position:absolute;
	left:0%;
	top:20px;
	margin-left:-0px;
	overflow:hidden;
	   }
 
 
/* =Footer
 --------------------------------------------------------------------------------------------------------------------------------------------*/
  #footer_home {background:#165AF7; position:relative; width:100%; height:200px; font-family:'Open Sans',sans-serif; color: #FFF; font-size: 15px; line-height: 21px;margin-top:-65px;}
 footer {background:#165AF7; position:relative; width:100%; height:200px; font-family:'Open Sans',sans-serif; color: #FFF; font-size: 15px; line-height: 21px;}
footer h1 { font-size:16px;  font-weight:normal; margin:0 50px 0 0; padding:25px 0; width:300px; float:right; }
footer a.orig, a.orig:visited { background:url(../img/logo.png) no-repeat right top; border:none; text-decoration:none; font-size:14px; height:70px;  line-height:50px; float:left; margin:3px 0 0 50px; width:220px; padding-top:8px; }
footer p{margin-left:80px;margin-top:20px;}


/*-subfooter--------------------------------------------------------------*/
#sub_footer{margin-top:-95px; background:#fff; position:relative; width:100%px;height:40px; font-family:'Open Sans',sans-serif; color: #000; font-size: 15px; line-height: 21px;}

/*subnav----------------------------------------------------------------------------------------------*/
#subNav{position:absolute;overflow:hidden;clear:left;top:48px;left:-130px;padding:13px 0 0;padding-left:80px;background:#CCC;}
#subNav{width:750px; max-height:22px;}
#subNav ul{list-style:none;margin-left:-20px;margin-top:-15px;padding:0;float:left;width:100%}
#subNav li{display:inline-block;*display:inline;*zoom:1;float:left}
#subNav a{font-size:17px;color:#707070;display:block;float:left;padding-left:3px}
#subNav a:before{content:"|";padding:0 8px 0 0}
#subNav li:first-child a{padding-left:0}
#subNav li:first-child a:before{content:"";padding:0}
#subNav a:hover{color:#444}
/*upper right buttons----------------------------------------------------*/
.btn {
	display: inline-block;
height:16px;width:87px;
	padding-bottom:20px;
	font-weight:0;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.4);
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
.btn a:hover{color:#fff;}

.btn_read a:hover{color:#fff;}
.btn_read {
	display: inline-block;
height:25px;width:107px;
	padding-bottom:12px;
	font-weight:0;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.4);
	-moz-border-radius: 5px;
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

.btn:hover {
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	cursor:pointer;
}

/* COLOR VARIATIONS */

.blue		{background-color: white; color: #141414;}
.blue:hover	{background-color: #165AF7; color: #ffffff;}
/*-----------------search box--------------------------------------*/



	
		#searchbox{
		position:absolute;
		margin-top:24px;
		margin-right:60px;
		
		top:25px;
		left:770px;
		
		}
        
        #search, #submit
        {
            float: left;
        }
        
        #search
        {
           padding: 5px 9px;
           height: 23px;
           width: 140px;
           border: 1px solid #a4c3ca;
           font: normal 13px 'trebuchet MS', arial, helvetica;
           background: #f1f1f1;
           -moz-border-radius: 5px;
           border-radius: 5px
           -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
           -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
        }
		
		/* ----------------------- */
		
		#submit
		{		
          
            background: #165AF7;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border-width: 1px;
            border-style: solid;
            border-color: #7eba7c #578e57 #447d43;
     		height: 35px;
			margin: 0 0 0 10px;
			padding: 0;
			width: 90px;
			cursor: pointer;
			font: bold 14px Arial, Helvetica;
			color: white;
			
			text-shadow: 0 1px 0 rgba(255,255,255,0.5);
		}
		
		#submit:hover
		{		
            background: #165AF7;
       
		}	

		#submit:active
		{		
            background: #165AF7;;
			outline: none;
           
             -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
		}

		#submit::-moz-focus-inner
		{
		  border: none;
		}		
		
		/* ----------------------- */
        
        #search::-webkit-input-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }
        
        #search:-moz-placeholder {
           color: #9c9c9c;
           font-style: italic;
        }    
        
        #search.placeholder {
           color: #9c9c9c !important;
           font-style: italic;
        }  
        
        #search:focus
        {
            border-color: #8badb4;
            background: #fff;
            outline: none;
        }	
		/*slider-------------------------------------------------------------------------------------*/
 #slide{
    
	 
	  }

#afterslider{
display:block;
clear:both;
	 }
.ei-slider{
	clear:both;
	position:relative;
	max-width: 100%;
	height: 400px;
	top:60px;
	margin-top: 10px;
	margin-bottom:100px;
}
.ei-slider-loading{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:999;
	background: rgba(0,0,0,0.9);
	color: #fff;
	text-align: center;
	line-height: 400px;
}
.ei-slider-large{
	height: 400px;
	width: 100%;
	position:relative;
	overflow: hidden;
}
.ei-slider-large li{
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.ei-slider-large li img{
	width: 100%;
}
.ei-title{
	position: absolute;
	right: 50%;
	margin-right: 13%;
	top: 30%;
}
.ei-slider-thumbs{
	height: 13px;
	margin-left:0px;
	position: relative;
	top:-15px;
	z-index:10;
}
.ei-slider-thumbs li{
	margin-top:-5px;
	position: relative;
	float: left;
	height: 100%;
	
}
.ei-slider-thumbs li.ei-slider-element{
	top: 0px;
	left: 0px;
	position: absolute;
	height: 20px;
	z-index: 10;
	opacity:0.8;
	text-indent: -9000px;
	background: #000;
	background: #165AF7;
}
.ei-slider-thumbs li a{
	display: block;
	text-indent: -9000px;
	background: #C5C7C7 ;
	opacity:0.7;
	width: 80;
	height:0.1px;
	cursor: pointer;
	-webkit-transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
	background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
	position: absolute;
	bottom: 50px;
	opacity: 0;
	z-index: 999;
	max-width: 100%;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
	-webkit-box-reflect: 
        below 0px -webkit-gradient(
            linear, 
            left top, 
            left bottom, 
            from(transparent), 
            color-stop(50%, transparent), 
            to(rgba(255,255,255,0.3))
            );
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
	opacity: 1;
	bottom: 13px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@media screen and (max-width: 830px) {
	.ei-title{
		position: absolute;
		right: 0px;
		margin-right: 0px;
		width: 100%;
		text-align: center;
		top: auto;
		bottom: 10px;
		background: #fff;
		background: rgba(255,255,255,0.9);
		padding: 5px 0;
	}

}
/*tables-------------------------------------------------------------------------------*/
	table a {color:#666;}
	
		#table_content_news { max-width:650px; margin:-110px 20px;}
		#table_content_events {max-width:650px;margin:-330px 550px;}
	/*
	Pretty Table Styling
	CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/
	*/
	
	table {	font:15px "Helvetica Neue",Arial, Helvetica, sans-serif;
		color: #555;
		overflow:hidden;
		border:1px solid #d3d3d3;
		background:#fefefe;
		width:400px;
		margin:5% auto 0;
		-moz-border-radius:5px; /* FF1+ */
		-webkit-border-radius:5px; /* Saf3-4 */
		border-radius:5px;
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	}
	
	th, td {padding:18px 28px 18px; text-align:center; }
	
	th {font-size:15px;padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
	
	td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
	
	tr.odd-row td {background:#f6f6f6;}
	
	td.first, th.first {text-align:left}
	
	td.last {border-right:none;}
	
	/*
	Background gradients are completely unnecessary but a neat effect.
	*/
	
	td {
		background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
		background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
	}
	
	tr.odd-row td {
		background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
		background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
	}
	
	th {
		background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
		background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
	}
	
	/*
	I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements.
	Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius
	
	And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
	*/
	
	tr:first-child th.first {
		-moz-border-radius-topleft:5px;
		-webkit-border-top-left-radius:5px; /* Saf3-4 */
	}
	
	tr:first-child th.last {
		-moz-border-radius-topright:5px;
		-webkit-border-top-right-radius:5px; /* Saf3-4 */
	}
	
	tr:last-child td.first {
		-moz-border-radius-bottomleft:5px;
		-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
	}
	
	tr:last-child td.last {
		-moz-border-radius-bottomright:5px;
		-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
	}
	
 #portal{
	 width:100%;

	 position:relative;
	 margin-top:50px;
	 margin-bottom:100px;
	 
	  }	
	#portal ul li{
		
		clear:left;
		padding:10px 0;
		
		}
	
/*sidebar--------------------------------------------*/
#colB{float:right;margin-top:-350px;margin-right:30px;}

.two-column #colB{width:26.56%;}

.two-column-inner #colB{width:71.35%}
#colB1{float:right;margin-top:-100px;margin-right:30px;}

.two-column #colB1{width:26.56%;}

.two-column-inner #colB1{width:71.35%}


#callouts{width:230px;}
#callouts ul{list-style:none;margin:0;float:left;width:100%;color:#444;padding:0}
#callouts li,#programFinder{background:#E1E1E4;-moz-border-radius:4px;-webkit-border-radius:4px;-ms-border-radius:4px;border-radius:4px;padding:10px 10px 10px 10px;margin:30px 0}
#callouts h5{margin-top:0;font-size:18px}
#callouts p{margin:0}
#callouts li.red{background:#165AF7;color:#FFF}
#callouts li.red h5{color:#FFF}
#callouts li.orange{background:#F26524;color:#FFF}
#callouts li.orange h5{color:#FFF}
#callouts li.facebook{font-size:18px;padding:20px 60px 20px 20px;background:url(../img/facebookCalloutIcon.png) no-repeat 180px top #E1E1E4}



/*scrollbar----------------------------------*/
	::-webkit-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */
	
	::-webkit-scrollbar-track {
		  background-color: #C5C7C7;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: #165AF7; 
	} /* this will style the thumb, ignoring the track */
	::-moz-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */
	
	::-moz-scrollbar-track {
		  background-color: #C5C7C7;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-moz-scrollbar-thumb {
		  background-color: #165AF7; 
	} /* this will style the thumb, ignoring the track */
	
	
	
	#message_desk {border-left: 1px solid #444;}
	#message_desk li{padding:5px 0 20px 20px;}
	#message_desk ul{margin-left:-20px;margin-top:-20px;}
	#message_desk li:hover{background:#165AF7;color:#fff;}

	/* light_box*/
a { text-decoration: none;}
a.ig:hover { background: #0090e2; color: #fff; padding: 3px 10px; border-radius: 20px; }





#information { z-index: 20; }
#information li div h3 {border-radius: 5px; background-color: #bbb;color: #fff; font-size: 20px; font-weight: bold; margin: -30px -30px 20px; padding: 15px 30px; text-shadow: rgba(0, 0, 0, 0.4492); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45); letter-spacing: -2px; }

/* -------------------------------------------------------------------------------------------------------------------------
Using :target we can style the specific ID of the list item when clicked/tapped on eg: www.url.com/#info1
---------------------------------------------------------------------------------------------------------------------------- */
li[id]:target { border-radius: 5px 5px 5px 5px;width: 100%; height: 100%; opacity: 1; z-index: 10; position: fixed; overflow-x: hidden; /* overflow-y: scroll; */ margin-bottom: 25px; }
li[id]:target::-webkit-scrollbar { width: 8px; background-color: rgba(0,0,0,0.6); position: relative; left: }
li[id]:target::-webkit-scrollbar-thumb { -webkit-border-radius: 1ex; background-color: #6CF; }
li[id]:target div { position: relative; margin: 0 auto; top: 15%; background: #fff; width: 600px; padding: 30px;
	-webkit-box-shadow: 0 1px 8px #000;
	-moz-box-shadow: 0 1px 8px #000;
	box-shadow: 0 1px 8px #000;
	-webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1);
	-moz-animation: lightbox 0.5s cubic-bezier(0,0,0,1);
	border-radius: 5px 5px 5px 5px;
}
/* 
Style list items with an ID */
li[id] { overflow: hidden; position: absolute; width: 0; height: 0; left: 0; top: 0; opacity: 0; background: rgba(0,0,0,.8);
	-webkit-transition: opacity 0.2s cubic-bezier(0,0,0,1);
	-moz-transition: opacity 0.2s cubic-bezier(0,0,0,1);
	transition: opacity 0.2s cubic-bezier(0,0,0,1);
}
/* 
Lightbox close button */
li[id] div a.close { background: #000; position: absolute; top: -10px; left: -10px; line-height: 0; color: #fff; text-align: center; font-weight: bold; border: 2px solid #fff; padding: 12px 9px 9px; border-radius: 30px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
	box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
	
}

/* 
Animation keyframes for the lightbox.
First line is at 0% so we're setting it to be 5x the actual size and rotate it around the Y axis by -270 degrees
100% resets it's actual size and resets the rotation back to flat. */
@-webkit-keyframes lightbox {border-radius: 5px 5px 5px 5px;
	0% { -webkit-transform: scale(5) rotateY(-270deg); }
	100% { -webkit-transform: scale(1) rotateY(0deg); }
}

@-moz-keyframes lightbox {border-radius: 5px 5px 5px 5px;
	0% { -moz-transform: scale(5) /* rotateY(-270deg) */; }
	100% { -moz-transform: scale(1) /* rotateY(0deg) */; }
}

/* end_light box*/

/*-------------area------------------------------------------*/
#area{margin-left:350px;margin-top:80px; width:600px; height:600px;overflow-y:scroll;color:#444;font-size:15px;}
#area h1{color:#444;padding:10px;}
#area hr{color:#444 ;width:500px;}
#left_widget a{color:#fff; background:#165AF7}

#fac_area a{color:blue;}
#fac_area img{border-radius:10px;margin:10px}
#fac_area{border-radius:10px;background:#E1E1E4;padding:25px;margin-left:320px;margin-top:80px; width:850px; min-height:770px;color:#444;font-size:15px;}
#fac_area h1{color:#444;padding:10px;}
#fac_area hr{color:#444 ;width:500px;}

/*____________________________________________________*/
#fac_area_admin img{border-radius:10px;margin:10px}
#fac_area_admin{border-radius:10px;background:#E1E1E4;padding:25px;margin-left:50px;margin-top:80px; width:860px; min-height:745px;color:#444;font-size:15px;}
#fac_area_admin h1{color:#444;padding:10px;}
#fac_area_admin hr{color:#444 ;width:500px;}


#portal li:hover{background:#E1E1E4;}
#portal span:hover{color:#165AF7;}
/*_____________________________________________________________________________*/

#left_widget>ul{

width:240px;margin-left:40px;margin-top:30px;color:#fff;font-size:20px;background:-moz-linear-gradient(left,  rgba(22,90,247,0.93) 57%, rgba(22,90,247,0.02) 99%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(57%,rgba(22,90,247,0.93)), color-stop(99%,rgba(22,90,247,0.02)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(22,90,247,0.93) 57%,rgba(22,90,247,0.02) 99%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(22,90,247,0.93) 57%,rgba(22,90,247,0.02) 99%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(22,90,247,0.93) 57%,rgba(22,90,247,0.02) 99%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(22,90,247,0.93) 57%,rgba(22,90,247,0.02) 99%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed165af7', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
/*webteam--------------------------------------------*/




a{
	color: #333;
	text-decoration: none;
}
.container{
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
}
.clr{
	clear: both;
}
.container > header{
	padding: 20px 30px 20px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
	position: relative;
	color: #498ea5;
	font-weight: 700;
	font-style: normal;
	font-size: 30px;
	padding: 0px 0px 5px 0px;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h1 span{

	font-size: 20px;
	line-height: 20px;
	display: block;
	font-weight: 400;
	font-style: italic;
	color: #719dab;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.container > header h2{
	font-size: 16px;
	font-style: italic;
	color: #2d6277;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
/* Header Style */
.codrops-top{
	line-height: 24px;
	font-size: 11px;
	background: rgba(0, 0, 0, 0.05);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
	display: block;
	float: left;
}
.codrops-top a:hover{
	background: #fff;
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: left;
	display: block;
}
.codrops-demos{
    text-align:center;
	display: block;
	line-height: 30px;
	padding: 20px 0px;
}
.codrops-demos a{
    display: inline-block;
	margin: 0px 4px;
	padding: 0px 4px;
	color: #fff;
	line-height: 20px;	
	font-style: italic;
	font-size: 13px;
	border-radius: 3px;
	background: rgba(41,77,95,0.1);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.codrops-demos a:hover{
	background: rgba(41,77,95,0.3);
}
.codrops-demos a.current,
.codrops-demos a.current:hover{
	background: rgba(41,77,95,0.3);
}

.mh-menu{
	height: 385px;
	width: 600px;
	margin: 20px auto;
	position: relative;
}
.mh-menu li{
	width: 300px;
}
.mh-menu li a{
	display: block;
	width: 280px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	height: 90px;
	border-right: 1px solid #ddd;

}
.mh-menu li:hover a{
	background: #DFF6F6;
}
.mh-menu li a span{
	display:block;
}
.mh-menu li a span:first-child{
	font-weight: 700;
	font-size: 16px;
	color: #444;
	padding-top: 10px;
	
}
.mh-menu li a span:nth-child(2){
	font-weight: 400;
	font-style: italic;
	font-size: 28px;

	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
	color: #165AF7;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
	color: #165AF7;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
	color: #165AF7;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
	color: #165AF7;
}
.mh-menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
	left: 300px;
	opacity: 1;
}