/*
 * css only - responsive click/tap action droplist menu
 * (c) 2014 - CSSplay - Stu Nicholls
 *
 * http://www.cssplay.co.uk
 *
 */

/* menu */
.nav input, #togglemenu {position:absolute; left:-9999px; display:none;}
.nav label.togglemenu {display:none;}
.nav {width:100%; max-width:1200px; margin:0 auto 0 auto;}

.nav ul {position:relative; margin:0; padding:0; list-style:none; z-index:100;}

.nav > ul > li {float:left; max-width:180px; margin:0; --padding:19px 30px 15px 30px;}

/*
.nav > ul > li:before {display:none; position:relative; top:15px; left:10px; content: ""; height:4px; width:4px; border:2px solid #666; border-color:transparent #666 #666 transparent; float:left; margin:5px 0 0 0; z-index:100; 
transform:rotate(-45deg); 
-webkit-transform:rotate(-45deg); 
-ms-transform:rotate(-45deg);
}
*/
.nav > ul > li:before {display:none; position:relative; top:0px; left:0px; content: ""; height:0px; width:0px; border:0px solid #666; border-color:transparent #666 #666 transparent; float:left; margin:0px 0 0 0; z-index:100; 
transform:rotate(-45deg); 
-webkit-transform:rotate(-45deg); 
-ms-transform:rotate(-45deg);
}

/* this is the big box */
.nav ul > li > div {display:block; position:absolute; top:55px; left:0; max-height:0; width:100%; overflow:hidden; background-color:#081256; z-index:0; 
transition:0.25s; 
-webkit-transition:0.25s;
}
.nav ul > li > div ul {display:inline-block; width:15%; margin:0 2%; padding:25px 0 30px 0; vertical-align:top;}
.nav ul > li > div > ul > li {text-align:left;}
.nav ul > li > div > ul > li:hover {text-align:left;}

.nav ul > li > div ul:last-child {margin:0;}

.nav ul li label {display:block; font:normal 15px/15px Open Sans, sans-serif; color:#fff; padding:16px 30px; cursor:pointer; position:relative; height:20px;}
.nav ul li label.openmenu {background-color: #1d2892; 
transition:0.25s; 
-webkit-transition:0.25s;
}
.nav ul li label.opentop {background-color: #1d2892; 
transition:0.5s; 
-webkit-transition:0.5s;

}
.nav ul li label.opentop:hover {background-color:#020160;}
.nav ul li label a {font-weight:100;}
.nav ul li label span {display:block; font:normal 14px/16px Open Sans, sans-serif; color:#888; margin:10px 0 0 0; text-transform:uppercase;}
.nav ul li label.closetop {width:100%; padding:0; height:75px; margin-top:-75px; display:none;}
.nav #closemenu {display:none; position:fixed; top:0; left:0; height:100%; width:100%; z-index:80;}
.nav ul li label:hover {--background-color:#3d48b2;}

.nav ul ul li {padding:1px 0; --border-top:1px solid #aaa;}
.nav ul ul li:last-child {--border-bottom:1px solid #aaa;}

.nav ul ul li a {display:block; font:normal 14px/14px Open Sans, sans-serif; padding:10px 30px; color:#fff !important; text-decoration:none; padding:6px 20px;}
.nav ul ul li.noborder {border:0; padding:0;}
.nav ul ul li.noborder img {display:block; width:150px; --width:100%;}

.nav ul ul li a img {display:block; margin:0 auto; border:0;}
.nav ul ul li a:hover {color:#fff !important; background-color:#1d2892; text-align:left;}
.nav ul ul li.noborder a:hover {background:transparent;}
.nav ul ul li.noborder a {padding:0 0 5px 0;}

.nav #p1:checked ~ ul > li:nth-of-type(1) > div,
.nav #p2:checked ~ ul > li:nth-of-type(2) > div, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > div, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > div {max-height:1400px; z-index:1; box-shadow:0 10px 8px -8px rgba(0,0,0,0.3);
transition:0.25s 0.25s;
-webkit-transition:0.25s 0.25s;}

.nav #p1:checked ~ ul > li:nth-of-type(1) > label.opentop, 
.nav #p2:checked ~ ul > li:nth-of-type(2) > label.opentop, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > label.opentop, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > label.opentop, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > label.opentop {background-color: #1d2892;background-color:#020160;}

.nav #p1:checked ~ ul > li:nth-of-type(1) .closetop, 
.nav #p2:checked ~ ul > li:nth-of-type(2) .closetop, 
.nav #p3:checked ~ ul > li:nth-of-type(3) .closetop, 
.nav #p4:checked ~ ul > li:nth-of-type(4) .closetop,
.nav #p5:checked ~ ul > li:nth-of-type(5) .closetop,
.nav #p1:checked ~ #closemenu, 
.nav #p2:checked ~ #closemenu, 
.nav #p3:checked ~ #closemenu, 
.nav #p4:checked ~ #closemenu, 
.nav #p5:checked ~ #closemenu {display:block;}

.nav-block-title {
	color:#fff;
	font-family: 'Open Sans', 'Fira Sans', sans-serif;
	font-weight:bold;
	font-size:14px;
}

.navSearchBar {
	font-family:'Open Sans', 'Fira Sans', sans-serif;
	padding-top:15px;
    background-color:#1d2892;
}
.navSearchBox {
	width:200px;
	padding:5px; 
	margin:-5px 10px 12px 90px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-image: url('/stage/images/icons/magnifying-glass.jpg');
    background-repeat: no-repeat;
    background-position: right;
	font-family:'Open Sans', 'Fira Sans', sans-serif;
}

#mobile-search-li {
    display:none;
}

#mobile-search-box {
    display:none;
}

#mobile-search-box-field {
    display:none;
}

#mobile-sub-header {
    display:none;
}

#mobile-chat {
    display:none;
}

#mobile-phone-number {
    display:none;
}

#alumni-login {
	display: none;
}

#student-login {
	display: none;
}

@media only screen and (max-width: 768px) {

.nav label {display:block; cursor:pointer;}
.nav ul li label {height:auto; border-radius:0;}

.nav label.togglemenu {float:right; display:block; cursor:pointer; position:relative; z-index:100; font:normal 22px/22px Open Sans, sans-serif;  color:white; margin:20px 20px 10px 0;}
.nav > ul {max-height:0; overflow:hidden; width:100%; background:#; padding:0; clear:both; 
transition:0.5s; 
-webkit-transition:0.5s;
}
.nav ul li label.closetop {height:48px; margin-top:-48px;}

.nav > ul > li:before {border-color:transparent #fff #fff transparent; top:30px;}
.nav ul li label.opentop {color:#fff; border-top:1px solid #fff; text-align:left; width:100%;}
.nav ul li label span {color:#fff; display:inline; margin-left:10px;}
.nav > ul > li {width:100%; max-width:100%; text-align:left;}
.nav ul > li > div {position:static; padding:0;}
.nav ul > li > div ul {width:100%; max-width:100%; display:block; padding:0 0 0 10px; margin:0; background: #081256;}
.nav ul div ul:last-child {display:none;}

.nav #togglemenu:checked ~ ul {max-height:1700px;}

.nav #p1:checked ~ ul > li:nth-of-type(1) > label.opentop, 
.nav #p2:checked ~ ul > li:nth-of-type(2) > label.opentop, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > label.opentop, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > label.opentop, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > label.opentop {background: #333;}

.nav ul ul li {border:0; padding:0; text-align:left;}
.nav ul ul li:last-child {border:0;}
.nav ul ul li a {display:block; padding:10px 0px; color:#fff !important; background:#081256; border-top:1px solid #ccc;}

.nav ul ul li a:hover {background:#1d2892; text-align:left;} 
.nav ul ul li.noborder a {padding-top:5px;}

.nav ul > li:nth-of-type(1) > div, 
.nav ul > li:nth-of-type(2) > div, 
.nav ul > li:nth-of-type(3) > div, 
.nav ul > li:nth-of-type(4) > div {
transition:0.4s; 
-webkit-transition:0.4s;
}
.nav #p1:checked ~ ul > li:nth-of-type(1) > div, 
.nav #p2:checked ~ ul > li:nth-of-type(2) > div, 
.nav #p3:checked ~ ul > li:nth-of-type(3) > div, 
.nav #p4:checked ~ ul > li:nth-of-type(4) > div, 
.nav #p5:checked ~ ul > li:nth-of-type(5) > div {box-shadow:none;
transition:1.5s; 
-webkit-transition:1.5s;
}

.nav-block-title {
	color:#fff;
	font-family: 'Open Sans', 'Fira Sans', sans-serif;
	font-weight:bold;
	font-size:14px;
    background-color:#1d2892;
	padding:20px 15px 0 10px;
	border-top:1px solid #fff;
}

.navSearchBar {
	display:none;
	width:100%;
    background-color:#081256;
}

.navSearchBox {
	display:none;
	padding:5px;
	margin:12px auto 12px 10px;
	width:92%;
}

	#mobile-search-li {
		display:block;
	}

	#mobile-search-box {
		width:99%;
		display:block; 
		margin-top:-15px; 
		border-top:1px solid #fff;
		padding:5px 0 20px 0;
	}
	
	#mobile-search-box-field {
		width:88%; 
		display:block;
		padding:5px;
		margin:5px 5px 5px 15px; 
		background-color:#fff;
		border:1px solid #fff;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		color:%333;
	}

	#mobile-sub-header {
		clear:both;
		display:block;
		margin-top:20px;
	}

	#mobile-chat {
		display:block;
		float:left;
		margin-top:15px;
		margin-left:15px;
	}
	
	#mobile-phone-number {
		display:block;
		float:right;
		font: 24px 'Fira Sans', 'Open Sans', sans-serif;
		font-weight:bold;
		margin: 27px 20px 0 10px;
		text-align: right;
	}
	
	#mobile-phone-number a {
		color: #343694;
		text-decoration:none;
	}

	#alumni-login {
		display: block;
	}

	#student-login {
		display: block;
	}

}