.nav-container {background-color:#003a5c; border-bottom:0px solid #000; height:67px; position:relative}

nav#main  {width:99.8%; min-width:300px; padding-right:0px;padding-left:0px; }

/* ==============
    MOBILE: Menu
   ============== */
   
nav#main {
    background: transparent none repeat scroll 0% 0%;
    position: relative;
    z-index: 6000;
}

nav#main ul { display:none;}
nav#main h4 {
    display: block;
/**    width:99%; */
    width: 32px;
    padding: 18px 0px 0px 16px;
    float:left;
}

nav#main h4 a {
    background: transparent url(../images/surf/menu-icon.png) no-repeat scroll 0px top;
    display: block;
    font-weight: normal;
    color: #000;
    width: 32px;
    height:32px;
}

nav#main h4 a:hover, nav#main h4 a.toggle {
    background: url(../images/surf/menu-icon-hover.png) no-repeat scroll 0px top;
}

nav#main h4 a.toggle {
    height: 32px;
    background-color: #000;
    width: 36px;
    text-align: center;
    display: block;
}

    nav#main ul li {
        float:left;
        margin:0px;
        padding:0px;
        list-style:none;
    
    }

    

nav#main ul li a {
    font: 600 1.115em/22px 'Gotham SSm A', 'Gotham SSm B', sans-serif;
    color:#fff;
    display:block;
    padding:12px 18px;
    text-transform:uppercase;
    outline-style:none;
}

 /* ----- Dropdown ----- */
    nav#main ul li:hover ul {
        visibility:visible;
        z-index:10000;
    }
    
    nav#main ul li ul li {
            margin:0px;
            padding:0px;
            float:none;
            background:none;
        }   

nav#main ul li:hover a, nav#main ul li a:hover {color:#fff; background-color:#000}
nav#main ul li.active a {color:#fff; background-color:#000 }

nav#main ul li.active ul.active li a {} 

nav#main ul li ul li a, nav#main ul li:hover ul li a {
    padding: 10px 18px;
    margin: 0px;
    display: block;
    height: auto;
    text-align: left;
    color: #fff;
    background-color:#000;
    border-top: 2px solid #003a5c;
    font:bold 1em 'Source Sans Pro', sans-serif;
    text-transform:capitalize;


}   
nav#main ul li:hover ul li a {}

nav#main ul.show {
    display: block;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */
    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}






@media (max-width: 1299px) {

nav#main ul li {clear:both; width:100%;}    
nav#main ul {
    position: absolute;
     top: 67px;
    background: #000000 none repeat scroll 0% 0%;
    z-index: 2000;
    width: 100%;
    display: none;
        
}


nav#main ul li:first-child a {border-top:0px}

nav#main ul li a { border-top:2px solid #003a5c;padding:7px 18px; }

nav#main ul li a:hover {padding:7px 18px; }

nav#main ul li.open {background-color:#464646; border-bottom}
nav#main ul li.active a {background-color:#003a5c}
nav#main ul.show li a.active {background-color:#1b1d1f; color:#FFF;}

nav#main ul ul.show {
    display: none;
    position: relative;
    width: 100%;
    visibility: visible;
    top: 0px;
    margin-left: 0px;
    padding: 0px;
    background: #252525 none repeat scroll 0% 0%;
    border-width: 0px 0px 0px;
    border-style: none none solid;
    border-color: -moz-use-text-color -moz-use-text-color #c8382c;
}

nav#main ul ul.active {display: block;}
 
nav#main ul li:hover a, nav#main ul li a:hover,
nav#main ul.show li.toggle:hover a, 
nav#main ul.show li.toggle a:hover {
    color: #fff;
    background-color: #003a5c;
}

nav#main ul li.active ul.active li a {background-color:#252525}
    nav#main ul li.active ul.active li a:hover {}
    
    nav#main ul li ul li {width: 99.4%;}
    nav#main ul li:hover ul li a {
        color:#fff ;
        background-color: #c8382c;
    }

    nav#main ul li.active:hover a, nav#main ul li.active a:hover {color: #fff;}
  
     nav#main ul li ul li a, nav#main ul li:hover ul li a {
        padding: 10px 20px;
        display: block;
        height: auto;
        text-align: left;
        background: transparent none repeat scroll 0% 0%;
        border-top:2px solid #636363;
     }
 
    nav#main ul.show li ul li a, nav#main ul.show li:first-child ul li a, 
    nav#main ul.show li:hover ul li:first-child a {border-top:2px solid #636363 }
    
    nav#main ul li ul.active li:first-of-type() a {}
    nav#main ul li.open:first-child a, nav#main ul.show li.open:first-child ul li:first-child a  {} 
 
 
     nav#main ul li ul li a:hover, 
     nav#main ul li:hover ul li a:hover, 
     nav#main ul li ul li:hover {
        background-color: #003a5c; color:#fff; 
     }

    nav#main ul.show li.open ul.show {background-color:#252525; } 
    nav#main ul.show li.open ul.show li:first-child a {border-top:0px;} 
    nav#main ul.show li.open ul.show li:first-child a:hover {}  

 
 }

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

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

   nav#main ul {
			width: 100%;
			top: 67px;
		}
}





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

/* ====================
    WIDE: CSS3 Effects
   ==================== */
    nav#main {width:97.5%;}
       
}
 
@media screen and (min-width: 958px) {      


}

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


     
    
}


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

/* ===============
    Maximal Width
   =============== */

    /************** Nav *******************/
     nav#main ul ul {width: 19%;}

   nav#main h4, nav#main h5 { display:block; }
   nav#main ul {
        margin:0px;
        display:block;
    }
    

   
   nav#main ul {display: block;}
   nav#main h4 {display:none; }

    nav#main h4, nav#main h5 { display:none; }   
   
    nav#main ul li {padding: 0; }
    nav#main ul li a {padding:15px 16px;}
    /*nav#main ul li:first-child a {padding-left:15px;}*/       
        
        
    nav#main ul li.active a {}
    nav#main ul li:hover a, nav#main ul li a:hover {color:#fff; background-color:#000; }
    nav#main ul li.active ul.active li a { color: #000;  background-color: #fff;}   
    nav#main ul li:first-child {padding-left:0}

    nav#main ul ul {
        position: absolute;
        visibility: hidden;
        width: 21%;
        margin-left: 0px;
        padding: 0px;
        z-index: 10000;
        background-color:#000;
        padding-top:2px
    }

    nav#main ul li ul li a:hover {
        color:#fff!important;
        text-decoration:none;
        background:#003a5c!important;
        }           
    
}


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

/* ===============
    Maximal Width
   =============== */

    nav#main {
        background:transparent;
        position:relative;
        z-index:6000;
        max-width:1260px;
    }

    /* nav#main ul li a {padding: 26px 20px 18px;} */  

}