/*  Responsive stylesheet
 *  Home
 *  Includes styles that are specific for the home page layout
 *	Breaks at:
 *	  > 680px for desktops
*/
@media screen and (min-width: 651px) {
	#nav-main-toggle {
		display: none;
	}
	
	.show-mega-nav {
		display:none;
   }
}

/*  Responsive stylesheet
 *  Main Navigation
 *  Styles to create a responsive navigation
 *	Breaks at:
 *    < 650px for phones
 */
@media screen and (max-width: 650px) {
	
	#nav-main-toggle {
		display: block;
		width:32px;
		height:32px;
		background-color:#fff;
		position: absolute;
		top:0;
		left:20px;
		text-indent: -10000px;
		background-image:url('../images/nav-main-icon.png');
	}
	
	.nav-main {
		float: none;
		width:100%;
		position:relative;
		padding-top: 20px;
		display: none;
		
		/* menu toggle styles */
		padding-top:0;
		position: absolute;
		top:48px;
		bottom: auto;
		background-color: #fff;
		-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,0.4);
		box-shadow: 0 3px 4px 0 rgba(0,0,0,0.4);
	}
	.nav-main>ul>li {
		display: block;
		float:none;
		width: 100%;
		border-top:solid 1px #eee;
	}
	.nav-main > ul > li > a {
		height: auto;
		padding:10px 20px;
	}
	
	.dropdown-tier1, .dropdown-tier2 {
		position: relative;
		float: none;
		width: 100%;
		padding:0;
	}
	.dropdown-tier1 > ul {
		width: 100%;
	}
	.dropdown-tier1 > ul > li {
		float: none;
		width: 100%;
	}
	.dropdown-tier1 > ul > li > a {
		height: auto;
		padding:10px 20px;
	}
	
	.nav-main li:hover .dropdown-tier1, .nav-main li.active .dropdown-tier1 {
		left:0;
	}
	.dropdown-tier1 > ul > li:hover .dropdown-tier2 {
		right:0;
		position: relative;
		float: none;
		padding: 0;
	}
	.dropdown-tier2 ul {
		width: 100%;
		padding: 0;
	}
	.dropdown-wrapper ul {
		width:100%;
		float: none;
	}
	li.about .dropdown-tier1 > .dropdown-wrapper > ul {
		padding: 0;
		padding: 0 0 0 20px;
	}
	li.about .dropdown-tier1 > .dropdown-wrapper > ul > li {
		float:none;
		width:100% !important;
		padding: 0;
	}
	
		
	.nav-main > ul > li > a {
		background-image: url("../images/arrows-icons.png") !important;
		background-repeat: no-repeat;
		background-position: right -712px !important;
	}	
	.dropdown-tier1 > ul > li > a, .dropdown-tier2 li a {
		background-position: right -712px !important;
	}
		
	/* EARLY CHILDHOOD */
	.nav-main > ul > li.early-childhood:hover > a, 
	.nav-main > ul > li.early-childhood a:hover, 
	li.early-childhood .dropdown-tier1 > ul > li:hover > a, 
	li.early-childhood .dropdown-tier1 > ul > li:focus > a, 
	li.early-childhood .dropdown-tier1 a.active {
		background-position: right -782px !important;
	}
	li.early-childhood .dropdown-tier2 li a:hover {
		background-position: right -1102px !important;
	}
	
	
	/* SCHOOL */
	.nav-main > ul > li.school:hover > a,
	.nav-main > ul > li.school a:hover,
	li.school .dropdown-tier1 > ul > li:hover > a, 
	li.school .dropdown-tier1 > ul > li:focus > a, 
	li.school .dropdown-tier1 a.active {
		background-position: right -860px !important;
	}
	li.school .dropdown-tier2 li a:hover {
		background-position: right -1182px !important;
	}
	
	/* FURTHER EDUCATION */
	.nav-main > ul > li.skills:hover > a,
	.nav-main > ul > li.skills a:hover,
	li.skills .dropdown-tier1 > ul > li:hover > a, 
	li.skills .dropdown-tier1 > ul > li:focus > a, 
	.nav-main > ul > li.skills a:hover,li.skills .dropdown-tier1 a.active {
		background-position: right -939px !important;
	}
	li.skills .dropdown-tier2 li a:hover {
		background-position: right -1261px !important;
	}
	
	/* ABOUT THE DEPARTMENT */
	.nav-main > ul > li.about:hover > a,
	.nav-main > ul > li.about > a:hover {
		background-position: right -1020px !important;
		/* -712px */
	}
	li.about .dropdown-tier1 li a {
		background-position: right -712px !important;
	}
	li.about .dropdown-tier1 li a:hover {
		background-position: right -1351px !important;
	}
	
	span.customLeftNavHeader{
		display:none;
    }
}