#nav-wrap {
position:relative;
margin: 0px auto; 
}

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

#nav{
white-space: nowrap;
   margin: 0px auto;
   width: 320px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:none; list-style: none; height: 50px;
overflow: hidden;
}

#nav li{ position:relative; float:left; padding:11px 3%; font: inherit; vertical-align: baseline; height: auto; }
#nav li a{color:#fff; font-size:108%; text-decoration: underline;}
#nav li a:hover{text-decoration:none;}
#nav li:hover{}
#nav li.active{ font-size: 100%; background-color: #359931;}

#nav li ul{padding-left:20px; display:none;}


/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 1024px) {
#nav{padding-left: 5px;}
}


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

	/* nav-wrap */
	#nav-wrap {
position:relative;
margin: 0px auto; 
	}
   
	/* menu icon */
	#menu-icon {
		color: #fff;
		width: 200px;
		height: 30px;
		padding: 17px 30px 6px 30px;
		cursor: pointer;
		display: block; /* show menu icon */
font-size:110%;
	}
	#menu-icon:hover {
			}
	#menu-icon.active {
			}
	
	/* main nav */
	#nav {
		clear: both;
		top: 0px;
		width: 100%;
		z-index: 10000;
		padding: 0px;
	background:#D2D4D5;
	background:rgba(65, 64, 64, 0.8);
		height: auto;
      position:relative; margin:0 auto;
      display: none; /* visibility will be toggled with jquery */
      z-index:100;
	}

#nav li {width: 90%; float: none; border-bottom:1px dotted #f2f2f2; padding:10px;}
#nav li ul{padding:10px 0 10px 20px; display:block;}
#nav li ul li {border-bottom:0; background:none;}
#nav li ul li ul{padding:10px 0 10px 20px;}
#nav li ul li ul li {border-bottom:0;background:none;}

#nav li:hover{background: none;}
#nav li.active{font-size: 100%; background: none;}
#nav li.active a{color:#2059A4;}
#nav li.passive a{color:#696666;}
#nav li.passive a:hover {color:#696666;}


#nav li a{padding-left: 20px; color:#fff; }
#nav li a:hover{text-decoration:underline;}

          
}

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

#menu-icon {
padding: 17px 30px 6px 10px;}
   
	/* ensure #nav is visible on desktop version 
	#nav {
		display: block !important;
	}
*/
}

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

#menu-icon {display:none;}