﻿@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?ojp5rl');
	src: url('../fonts/icomoon.eot?ojp5rl#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff?ojp5rl') format('woff'),
		url('../fonts/icomoon.ttf?ojp5rl') format('truetype'),
		url('../fonts/icomoon.svg?ojp5rl#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'icomoon';
		src: url('../fonts/icomoon.svg#icomoon') format('svg');
	};
}
#main-nav2{
	/*font-family: 'Yanone Kaffeesatz', 'sans-serif';*/
	/*font-family: 'Open Sans Condensed', sans-serif;*/
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
    text-transform: uppercase;
}

#main-nav2 li a {
	color:#ffffff !important;
	font-weight:300;
}


.icon-administrators, .icon-assessment, .icon-bell, .icon-book, .icon-books, .icon-budget, .icon-bullhorn, .icon-calendar, .icon-circle-right,
.icon-community, .icon-computer-user, .icon-early-childhood-icon, .icon-english_learners, .icon-facebook, .icon-facebook2, .icon-family, .icon-file-excel,
.icon-file-pdf, .icon-file-video, .icon-file-word, .icon-file-zip, .icon-grants, .icon-home, .icon-how, .icon-instruction, .icon-learning_standards,
.icon-library, .icon-list2, .icon-man, .icon-man-woman, .icon-news, .icon-nutrition, .icon-other_resources, .icon-padlock, .icon-parents, .icon-question,
.icon-school_improvement_2, .icon-special_education_icon, .icon-teachers, .icon-training, .icon-twitter, .icon-two-baby-with-father, .icon-user,
.icon-users, .icon-video-camera, .icon-volume-high, .icon-woman, .icon-down_arrow, .icon-right_arrow, .icon-message, .icon-pencil2, .icon-message2, .icon-important-topic {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.icon-important-topic:before {
  content: "\e936";
}
.icon-message2:before {
  content: "\e934";
}
.icon-pencil2:before {
  content: "\e932";
}
.icon-message:before {
  content: "\e931";
}
.icon-down_arrow:before {
  content: "\e92d";
}
.icon-right_arrow:before {
  content: "\e930";
}
.icon-assessment:before {
  content: "\e900";
}
.icon-budget:before {
  content: "\e904";
}
.icon-community:before {
	content: "\e907";
}
.icon-computer-user:before {
    content: "\e908";
}
.icon-early-childhood-icon:before {
  content: "\e90a";
}
.icon-english_learners:before {
  content: "\e90b";
}
.icon-family:before {
    content: "\e90e";
}
.icon-file-excel:before {
    content: "\e90f";
}
.icon-file-pdf:before {
    content: "\e910";
}
.icon-file-video:before {
    content: "\e911";
}
.icon-file-word:before {
    content: "\e912";
}
.icon-file-zip:before {
    content: "\e913";
}
.icon-parents:before {
	content: "\e914";
}
.icon-grants:before {
  content: "\e915";
}
.icon-instruction:before {
  content: "\e917";
}
.icon-learning_standards:before {
  content: "\e918";
}
.icon-nutrition:before {
  content: "\e91e";
}
.icon-other_resources:before {
  content: "\e91f";
}
.icon-padlock:before {
    content: "\e920";
}
.icon-how:before {
	content: "\e922";
}
.icon-school_improvement_2:before {
  content: "\e924";
}
.icon-special_education_icon:before {
  content: "\e925";
}
.icon-teachers:before {
	content: "\e926";
}
.icon-training:before {
    content: "\e927";
}
.icon-two-baby-with-father:before {
    content: "\e929";
}
.icon-volume-high:before {
    content: "\e92e";
}
.icon-woman:before {
  content: "\e92f";
}
.icon-home:before {
	content: "\e903";
}
.icon-news:before {
	content: "\e905";
}
.icon-video-camera:before {
    content: "\e902";
}
.icon-bullhorn:before {
    content: "\e906";
}
.icon-book:before {
    content: "\e90d";
}
.icon-books:before {
    content: "\e921";
}
.icon-library:before {
    content: "\e909";
}
.icon-bell:before {
    content: "\e90c";
}
.icon-calendar:before {
    content: "\e91b";
}
.icon-user:before {
    content: "\e919";
}
.icon-users:before {
    content: "\e91a";
}
.icon-administrators:before {
	content: "\e939";
}
.icon-list2:before {
    content: "\e92b";
}
.icon-man:before {
  content: "\e91d";
}
.icon-man-woman:before {
  content: "\e92c";
}
.icon-question:before {
  content: "\e91c";
}
.icon-circle-right:before {
  content: "\e901";
}
.icon-facebook:before {
    content: "\e923";
}
.icon-facebook2:before {
    content: "\e928";
}
.icon-twitter:before {
    content: "\e92a";
}

#main-nav2 a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* Global CSS that are applied for all screen sizes */

#main-nav2 .nav ul {
	/*max-width: 3000px;*/
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.4em;
	font-weight: 300;
}

#main-nav2 .nav li span {
	display: block;
}

#main-nav2 .nav a {
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s;
}

#main-nav2 .nav i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Hover effect for the whole navigation to make the hovered item stand out */

#main-nav2 .nav ul:hover a {
	color: rgba(249, 249, 249, .5);

}

#main-nav2 .nav ul:hover a:hover {
	color: rgba(249, 249, 249, 0.99);

}

/* Adding some background color to the different menu items */

#main-nav2 .nav li {
	background: rgb(0,62,90);/*rgba(19, 28, 78, .8);*//*rgb(0,62,90);*/
}




@media (min-width: 768px) and (max-width: 800px) {
	

}



/* For screen bigger than 800px */
@media (min-width: 768px) {

	/* Transforms the list into a horizontal navigation */
	#main-nav2 .nav li {
		float: left;
		width: 14.28%;
		text-align: center;		
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	#main-nav2 .nav a {
		display: block;
		width: auto;
	}

	/* hover, focused and active effects that add a little colored border to the different items */
	#main-nav2 .nav li a:hover,
	#main-nav2 .nav li a:active,
	#main-nav2 .nav li a:focus {
		border-bottom: 4px solid #B7DB57;
		color:#B7DB57!important;
	}
	
	/* Placing the icon */
	
	#main-nav2 .icon {
		padding-top: 0.5em;
	}

	#main-nav2 .icon + span {
		margin-top: 0.2em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}
	/*#main-nav2 .main{
		height:7.82em;
	}*/

	/* Animating the height of the element*/
	#main-nav2 .nav a {
		height: 5.2em;
	}

	#main-nav2 .nav a:hover ,
	#main-nav2 .nav a:active ,
	#main-nav2 .nav a:focus {
		height: 5.2em;
	}

	/* Making the text follow the height animation */
	#main-nav2 .nav a:hover .icon + span {
		margin-top: 1.2em;
		-webkit-transition: margin .5s;
		-moz-transition: margin .5s;
		-o-transition: margin .5s;
		-ms-transition: margin .5s;
		transition: margin .5s;
	}

	/* Positioning the icons and preparing for the animation*/
	#main-nav2 .nav i {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 0.4em;
		border-radius: 50%;
		font-size: 1em;
		box-shadow: 0 0 0 30px transparent;
		background: rgba(255,255,255,0.1);
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: box-shadow .6s ease-in-out;
		-moz-transition: box-shadow .6s ease-in-out;
		-o-transition: box-shadow .6s ease-in-out;
		-ms-transition: box-shadow .6s ease-in-out;
		transition: box-shadow .6s ease-in-out;
	}	
	
	/* Animate the box-shadow to create the effect */
	#main-nav2 .nav a:hover i,
	#main-nav2 .nav a:active i,
	#main-nav2 .nav a:focus i {		
		box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
		-webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out;
		-o-transition: box-shadow .4s ease-in-out;
		-ms-transition: box-shadow .4s ease-in-out;
		transition: box-shadow .4s ease-in-out;
	}
		
}

@media (min-width: 55em) and (max-width: 90em) {

	/* Size and font adjustments to make it fit into the screen*/
	#main-nav2 .nav ul {
		font-size: 1.2em;
	}

}

@media (min-width: 767px) and (max-width: 55em) {

	/* Size and font adjustments to make it fit into the screen*/
	#main-nav2 .nav ul {
		font-size: .9em;
	}

}

@media (max-width: 767px) {
.navbar-collapse{
	margin-top:50px;
	width:100%;
}
	/* Unhiding the styled menu link */
	#main-nav2 .nav .navtoogle{
		margin: 0;
		display: block;
	}
	
	/* Animating the height of the navigation when the button is clicked */
	
	/* When JavaScript is disabled, we hide the menu */
	#main-nav2 .no-js .nav ul {
		max-height: 30em;
		overflow: hidden;
	}
	
	/* When JavaScript is enabled, we hide the menu */
	#main-nav2 .js .nav ul {
		max-height: 0em;
		overflow: hidden;
	}
	
	/* Displaying the menu when the user has clicked on the button*/
	#main-nav2 .js .nav .active + ul {		
		max-height: 30em;
		overflow: hidden;
		-webkit-transition: max-height .4s;
		-moz-transition: max-height .4s;
		-o-transition: max-height .4s;
		-ms-transition: max-height .4s;
		transition: max-height .4s;
	}

	/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
	
	#main-nav2 .nav li span {
		display: inline-block;
		height: 100%;
	}

	#main-nav2 .nav a {
		padding: 0.5em;				
	}
	
	#main-nav2 .icon + span {
		margin-left: 1em;
		font-size: 0.8em;
	}
	
	/* Adding a left border of 8 px with a different color for each menu item*/
	#main-nav2 .nav li {
		border-left: 4px solid #B7DB57;		 
	}

	/* make the nav bigger on touch screens */
	#main-nav2 .touch .nav a {
		padding: 0.8em;
	}
}

