/********************************************
 * 	Styles for #nav
 *
 * structure :
 * <ul #nav>
 * 		<li *.current-page>
 * 			<a>
 * 			<ul .subnav deep-n>
 * 			[...]
 *******************************************/

nav#listing-nav {
    width: 100%;
    clear: both;
}

nav#listing-nav ul {
    width: 100%;
    clear: both;
    padding: 0px;
    margin: 0px;
}

nav#listing-nav ul li {
    float: left;
    list-style: none;
    width: 24.5%;
	margin: 0;
    padding: 0;
    vertical-align: middle;
}

nav#listing-nav ul li a{
	display: block;
	width: 100%;
	text-align: center;
	/*background-color: #143451;*/
	background-color: #0053a0;
	color: #fff;
	padding-top: 15px;
	height: 51px;
	font-size: 18px;
	font-family: 'Teko', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 700;
}

nav#listing-nav ul li a:hover {
	background-color: #0069CC;
	text-decoration: none;
}

nav#listing-nav ul li:nth-child(2),
nav#listing-nav ul li:nth-child(3){
    margin-left: 0.3%;
    margin-right: 0.3%;
}

nav#listing-nav ul li:first-child{
    margin-right: 0.3%;
}

nav#listing-nav ul li:last-child{
    margin-left: 0.3%;
}

#nav {
	list-style: none;
	padding: 0;
	margin: 20px 20px 0 0;
	overflow: auto;
}

#nav a {
	display: block;
}

#nav > li {
	float: left;
	clear: both;
	width: 100%;
	oveflow: hidden;
}

#nav > li > a {
	padding: 0 15px;
	position: relative;
	color: #fff;
	text-decoration: none;
	width: 100%;
	display: block;
	float: right;
	text-align: right;
}

#nav > li > a:hover {
	text-decoration: underline;
}

#nav > li.current-item > a {
	font-size: 18px;
	font-weight: 700;
	padding: 10px 15px;
}

#nav > li.current-item > a::before {
    content: "";
    width: 70%;
    float: left;
    margin-top: 0.6em;
    margin-left: -40%;
    border-top: 5px solid #538c19;
	clear: none;
}

#nav .has-sub {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAV0lEQVQ4je3PwQ1AQBQG4e9EV6IMepHowlEL1EMje8JJ4iC7SxxN8o4z+R8/n7NiT9wSC9QIETmgSq1osd3IG5rcV/qbQJcrn4wXeXgqQ4kZE4o3gZ9MDv6mIlTm3jmnAAAAAElFTkSuQmCC) no-repeat right center;
	padding-right: 13px;
}

.lt-ie8 #nav .has-sub {
	background: url(../images/IENAVARROWFIX.png) no-repeat right center;
}

#nav .subnav {
	/*display:none;*/
	position: absolute;
	z-index: 255;
	background-color: #000000;
	color: #FFFFFF;
	list-style: none;
	padding: 0;
	margin: 20px 0 0 0;
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#nav .subnav a {
	background-color: inherit;
	color: #FFFFFF;
	padding: 8px 15px;
}

#nav .subnav.long {
	/*overflow:auto;
	 width: 80%;
	 right: 100px;*/
}

#nav .subnav.long li {
	/*float: left;
	 width: 50%;*/
}

/**
 * 	animation for subnavs
 */

#nav .subnav.slide-up {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	visibility: visible;
	margin: 0;
}

a.link-box {
	display: inline-block;
	width: 180px;
	clear: both;
	background-color: #e7ecf3;
	padding: 10px 18px;
	color: #3d3d3d;
	text-align: left;
	font-family: Teko;
	font-size: 1.0em;
	font-weight: 700;
	letter-spacing: 0.02px;
	text-transform: uppercase;
	margin-bottom: 10px;
	margin-left: 30px;
	text-decoration: none;
}

a.link-box:hover,
a.link-box.active {
	background-color: #538c19;
	color: #fff;
}

a.link-box i {
	margin-right: 12px;
}

/*****************************************************************
 * 	Styles for mobile nav menu button. Structure :
 * 		<section .mobile-nav.enable>
 * 			<ul .control>
 * 				<li>
 * 					<a>
 * 						<span .menu-icon>
 *
 *****************************************************************/
.mobile-nav {
	display: none;
}

/**
 * 	Set by nav.js and is applied to the body tag
 */
.mobile-nav-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
	width: 100%;
}

.mobile-nav .control .menu-icon {

	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 5em;
}

.mobile-nav .control .menu-icon:before {
	content: "\f0ca";
}

/*****************************************************************
 * 	Styles for mobile modal - this dom gets moved
 * 	to the body with javascript
 * 	Structure :
 * 		<div .mobile-modal>
 * 			<header .header>
 * 				<div .title>
 * 			<div .body>
 * 				<section .mobile-search>
 * 					<form>
 * 						<input [type="text"] />
 * 						<button>
 * 				<nav .nav-panel>
 * 					<ul>
 * 						<!-- No sub menu -->
 * 						<li>
 * 							<a>
 * 						<!-- Has sub menu -->
 * 						<li>
 * 							<details>
 * 								<summary>
 * 									[text]
 * 									<a .link-icon>
 * 								<ul .depth-[n] .subnav>
 * 									<li>
 * 										<a>
 * 						<li> ...
 * 				<nav .nav-panel> ...
 * 				<button .close>
 *****************************************************************/

.mobile-modal {
	position: absolute;
	z-index: 255;
	top: 0;
	/*height:100%;*/
	background-color: #2A60A8;
	color: #FFFFFF;
	max-width: 85%;
	min-width: 25%;
	padding: 0.8em;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all .2s ease-in-out .1s;
	-moz-transition: all .2s ease-in-out .1s;
	-ms-transition: all .2s ease-in-out .1s;
	-o-transition: all .2s ease-in-out .1s;
	transition: all .2s ease-in-out .1s;
}

.mobile-modal .close {
	position: absolute;
	top: 5px;
	right: 8px;
	font-size: 3em;
}

.mobile-modal .title {
	font-size: 1.8em;
	padding: 5px 0;
}

.mobile-search {
	color: #333;
}

.mobile-search form input[type=text] {
	width: 80%;
}

.mobile-modal .body {
	font-size: 16px;
}

.mobile-modal .body nav {

}

.mobile-modal .body a {
	color: #FFFFFF;
}

.mobile-modal .link-icon {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #FFFFFF;
	font-size: 1.3em;
	float: right;
}

.mobile-modal .link-icon:before {
	content: "\f0c1";
}

.mobile-modal ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-modal li {
	padding: 10px 0 2px;
}

.mobile-modal details ul {
	padding-left: 1.2em;
}

.mobile-modal.mobile-in {
	right: 0 !important;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.mobile-modal nav.panel {
	float: none;
}


@media only screen and (max-width: 768px) {
	.mobile-nav.enable {
		display: block;
		text-align: right;
	}

	.mobile-modal {
		/*right:-800px;*/
		min-width: 50%;
	}
}

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 320px) {}