#nav-wrap {
	margin-top: 0px;
}

/* menu icon */
#menu-icon {display: none; /* hide menu icon initially */}
#nav {position:relative; float:right; top:-40px; margin:0px; padding:0px;  }
#nav ul { float:right;}
#nav, 
#nav li {margin: 0; padding: 0;}
#nav li {list-style: none; float: left; padding:0px; margin:0px; line-height:20px; border-right:1px solid #05713a; }
#nav li:last-child{border-right:0px; }
#nav li.nav-last {border-right:0px; }

/* nav link */
#nav a  {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
#nav a  {display: block; color: #fff; text-decoration:none; text-transform:uppercase; padding: 12px 10px 12px 10px; background: url(../images/menu-div.png) no-repeat left;}

#nav a:hover    {color: #ffe483;}
#nav li:hover>a {color: #ffe483;}
#nav .active>a  {color: #ffe483;}


/* nav dropdown */
#nav ul {background: #fff; padding: 0px 0px; position: absolute; display: none; /* hide dropdown */ width: auto; z-index:99999; margin-top:0px; text-transform:none;}
#nav ul li {float: none; margin: 0px; padding: 0px; color:#000; font-size:13px; border-right:0px solid #05713a;}
#nav li:hover > ul {display: block; /* show dropdown on hover */}


#nav li li a        {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
#nav li li a        {display: block; font-size: 13px; color: #5c5d5e; text-decoration:none; text-transform: none; padding: 3px 15px; margin:0px; line-height:20px; }
#nav li li a:hover  {color: #057f41;}


#nav ul li ul { margin:-20px 0px 0px 80px;}

.navlast    {right:15px;}





/************************************************************************************
IPAD PORTRAIT
*************************************************************************************/
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
#nav-wrap {
	margin: 0px auto;
	float:none;
}
   
#nav, 
#nav li {
	margin: 0px auto;
	float:none;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	line-height: 50px;
}
#nav li:first-child a{
	background-image:none;
}
/* nav link */
#nav a {
    display: block;
    font-size: 12px;
    font-family:Trebuchet MS;   
    line-height: 40px;
    color: #fff;
    text-decoration:none;
    padding: 0 5px 0 5px;
    background: url(../images/menu-div.png) no-repeat left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-align:left;
}

.navlast { right:22px;}

}

/************************************************************************************
MOBILE
*************************************************************************************/

@media only screen and ( min-width: 240px) and ( max-width: 767px)
{     
	/* nav-wrap */
	#nav-wrap {
		position: relative;
		display:inline-block;
		padding:0px;
		margin:0px;
		float:left;
		margin-top:5px;
		width:95%;
	}

	/* menu icon */
	#menu-icon {
		color: #fff;
		height: 24px;
		background:url(images/menu-icon.png) no-repeat right center;
		padding: 14px 0px 0px 0px;
		width:95%;
		cursor: pointer;
		display: block; /* show menu icon */
		float:right;
		line-height:9px;		
		margin-right:12px;
		
	}
	#menu-icon:hover {
		background:url(images/menu-icon-active.png) no-repeat right center;
	}
	#menu-icon.active {
		background:url(images/menu-icon-active.png) no-repeat right center;
	}
	
	/* main nav */
	#nav 
	{
    	clear: both;
		position: absolute;
		top: 38px;
		width: 99%;
		z-index: 10000;
		background: #f8f8f8;
		box-shadow: 1px 1px 3px #999999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav ul { padding:0px; margin:0px;}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
		padding:0px;
		line-height:25px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0px 0px 0px 10px;
		margin:0px;
		line-height:25px;
		border-left: 2px solid #000;
		color: #333;
		font-size:13px;
		font-family:Trebuchet MS;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #057f41;
	}
	
	/* nav dropdown */
#nav ul {
	background: none;
	padding: 0px;
	margin:0px;
	position: absolute;
	display: none; /* hide dropdown */
	width: auto;
	
}
#nav ul li {
	margin: 0px;
	padding: 0px;
}

#nav li {
    border-right: 0px solid #05713a;
}
#nav a:hover    {color: #057f41;}
#nav li:hover>a {color: #057f41;}
#nav .active>a  {color: #057f41;}
 
 
#nav .active > a {color: #057f41;}
#nav .active > a:hover {color: #057f41;}

#nav li:hover > ul {
	display: block; /* show dropdown on hover */
    position: static;
}

#nav li li a:before {
   content: "- ";
}

#nav li li a 
{
    display: block;
    font-size: 13px;
    font-family: inherit;
    color: #999;
    text-decoration:none;
    text-transform: none;
    padding: 0px 10px;
    margin:0px;
    border:none;
    line-height:25px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: none;
}
#nav li li a:hover {
	background: none;
	color: #057f41;
}

.bg-div{width:2px; margin:0px; padding:0px; background:url(../images/bg-div.gif) no-repeat; height:42px; vertical-align:bottom; display:none; }

}

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

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

}