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

#nav {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    float: left;
    text-align: center;
    width: 100%;
}

#nav a {
    display: block;
}

#nav > li {
    display: inline-block;
}

#nav > li > a {
    padding: 8px 15px;
    position: relative;
    font-family: bitter;
    font-style: normal;
    font-size: 20px;
    color: #666;
}

#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;
}

.nav-tabs {
    border-bottom: 0;
}

/*****************************************************************
 * 	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 (min-width: 768px) {
    header i.fa.fa-navicon {
        display: none;
    }

}

@media only screen and (max-width: 768px) {
    #page header nav {
        clear:both;
        background-color:#FFF;
        padding: 0;
        margin-top: 10px;
        width: 100%;
    }
    #nav > li {
        width: 100%;
        text-align:left;
    }

    header#header nav ul a {
        padding-left: 14px;
    }
    .mobile-nav.enable {
        display: block;
        text-align: right;
    }

    #nav {
        display: none;
        width: 100%;
    }

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

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

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