@charset "utf-8";
/* CSS Document */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap { float:left; position:relative; }

/* menu icon */
#menu-icon {display: none; /* hide menu icon initially */}

#nav { position:relative; width:130%;}
#nav li {list-style: none; float:left;}
#nav a {
	color:#e7e7e7;
	display: block;
	float: left;
	margin: 0;
	border: none;
	padding: 1em;
	line-height:1.1em;
	text-decoration:none;
	text-transform:uppercase;
}

#nav a.first {/*border-left:1px solid  #424242;*/}
#nav a.dropdown { background:url(../images/dropdown.png) right center no-repeat; margin-right:0.5em;}

#nav a:hover, #nav li:hover, #nav li:hover a.dropdown{
	color:#00957f;
}


/* NAV dropdown*/
#nav li:hover ul, #nav li.over ul  > ul {
	display: block; /* show dropdown on hover */
}
#nav li > ul { left: auto;}

#nav ul {
	position: absolute;
	top: 42px;
	display: none; /*change to none once finished styling*/
	background-color: #262626;
	z-index: 600;
	padding: 0px;
}
#nav ul li {
	z-index:601;
	float:left;
	display:block;
	width:20%;
	text-align:center;
}
#nav ul li a span { font-size:1.3em; display:block; line-height:1.1em; font-weight:normal; }
#nav ul li a img{ width:90%; border:#414141 solid 3px; margin-bottom:10px; margin-top:10px; }
#nav ul li a{
	text-transform:none;
	float:none;
	line-height: 1em;
	padding: 1em;
	font-size: 0.9em;
	cursor:pointer;
 }
 
#nav ul li a:hover {
	background-color: #323232;
	color: #fff !important;
	-webkit-box-shadow: none;
	box-shadow: none;
	transition : background-color .3s;
	-webkit-transition : background-color .3s;

 }
#nav ul li:hover { }	

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End Dropdown */



/************************************************************************************
TABLETS 768 x 1024 - 768 x 1366
*************************************************************************************/
@media screen and (max-width: 1366px){
	#nav-wrap {width:100%; border-top:#666 1px solid;}
	#nav { width:90%;}

}


/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 800px) {
	
	/* nav-wrap */
	#nav-wrap {}

	/* menu icon */
	#menu-icon {
		color: #fff;
		padding: 1em;
		font-size:1.2em;
		letter-spacing:0.1em;
		line-height:1.2em;
		font-weight:400;
		background: url(../images/menui.png) right center no-repeat #00957f;
		cursor: pointer;
		border: none;
		display: block; /* show menu icon */
	}
	
	#menu-icon:hover { background-color: #535353;}
	#menu-icon.active { background-color: #535353;}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 50px;
		width: 100%;
		z-index: 10000;
		padding: 0px;
		margin:0;
		display: none; /* visibility will be toggled with jquery */
	}
	
	#nav li {
		clear: both;
		float: none;
		margin: 0px;
	}

	#nav a, #nav a.dropdown {
	background: #212121;
	display: block;
	float:left;
	text-align:left;
	height: 45px;
	width:90%;
	line-height: 45px;
	padding: 0 5%;
	border-right: none;
	font-size: 1.1em;
	text-transform: uppercase;
	border-top:#777 1px solid;
	color:#fff;
	}

	#nav a:hover, #nav ul a:hover, #nav a.dropdown:hover {
		color: #fff !important;
		background-color:#00957f;
	}
	
	/* dropdown */
	#nav ul, #nav ul li {
		display:none;
	}
	
	

}


@media screen and (min-width:1000px){

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}