﻿
/* nav wrap */
#nav-wrap { max-width:940px; margin: 0px auto;   }

/* menu icon */
#menu-icon { display: none; /* hide menu icon initially */}
#submenu-icon { display: none; /* hide menu icon initially */}
#sectionmenu-icon { display: none; /* hide menu icon initially */}


.menu, .menu li { margin: 0; padding: 0; }
.menu li { list-style: none; float: left; line-height: 35px; padding:0px; margin:0px;  position:relative;}
.menu li {  font-size: 16px;  }
.menu 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 link */
.menu a { display: block; line-height: 35px; color:#fff;   text-decoration:none; text-transform:none; padding: 0 33px; margin:0 1px;  border-bottom:2px solid transparent;  }
.menu a:hover { color:#fff;   }
.menu li:hover>a { color:#000; background:#ecc731; }
.menu .active>a { color:#000; background:#ecc731;}

/* nav dropdown */
.menu ul { border-top:1px solid #DDD;  background:#fff; padding:0; position: absolute; display: none; /* hide dropdown */ width: 200px;  z-index:99; }
.menu li:hover > ul { display: block; /* show dropdown on hover */ }

.menu ul li { float: none; margin: 0px; padding: 0px; font-size: 14px; border-bottom:1px solid #eee;  }

.menu li li a { display: block; color: #333; text-decoration:none; text-transform: none; border-bottom:none; padding: 5px 19px; margin:0px; line-height:25px;}
.menu li ul li a{ color: #008a63; border-bottom:2px solid #F3F3F3; }
.menu li ul li.hs-sub a:after{content:'\f105'; font-family:'FontAwesome'; float:right; color:#DDD} 
.menu li ul li ul li a:after{display:none;}
.menu li ul li.hs-sub:hover a:after{ color: #008a63;}
.menu li ul li a:hover { color: #008a63; border-bottom:2px solid #008a63; }

.menu ul li ul{left:100%; top:0; background-color:#F3F3F3;  border-left:1px solid #DDD; border-top:1px solid #DDD;}


/************************************************************************************
*	MOBILE
************************************************************************************/

.menu ul.split, .menu ul ul.split{width:400px;}
.menu ul li, .menu ul ul li{ width:200px; float:left;}

@media only screen and ( min-width: 240px) and ( max-width: 768px) {

.menu li ul li a{ color: #FFF; border-bottom:1px solid #185CA0; }
.menu li ul li a:hover{color:#FFF; border-bottom:1px solid #185CA0;}


nav { background:#014e9b; width:100%; float:left; display:block;}
/* nav-wrap */
#nav-wrap  {width:100%; display:block; margin:0px auto; padding:0px 0px 0px 0px; background:none; float:left; position:relative;   background: #018989; }

/* menu icon */
#menu-icon { line-height: 31px; height: 31px;  width: auto; margin:0px 10px; -webkit-transition: all 300ms linear;  -moz-transition: all 300ms linear;   -o-transition: all 300ms linear;   -ms-transition: all 300ms linear;}
#menu-icon { font-size:bold; background: #018989 url(menu-down.png) no-repeat right center; padding: 0px; cursor: pointer; display: block; float: none; text-transform: uppercase; color: #fff; padding-top:4px; }
#menu-icon:hover { color: #ef6c00; background: #018989 url(menu-down.png) no-repeat right center;}
#menu-icon.active {color: #000; background: #018989 url(menu-up.png) no-repeat right center;}

.menu li:hover>a { color:#000; background:#ecc731; }
.menu .active>a { color:#000; background:#ecc731;}

ul.menu { list-style: none;  list-style-image: none; padding: 0px; margin: 0px; position: relative; display: none; float:left;width: 100%; background:#014e9b; z-index:99999; border-bottom:none;}
ul.menu li { padding:0px 0px; margin:0px; width:100%;  list-style:none; border-top: 1px solid #34a2a1; text-align:left; font-size:13px; background:#018989;}
ul.menu li a{  text-decoration:none; color:#fff;  display:block; float:none;   padding:0px 10px; line-height:30px; text-transform:uppercase; -webkit-transition: all 300ms linear;  -moz-transition: all 300ms linear;   -o-transition: all 300ms linear;   -ms-transition: all 300ms linear; }
ul.menu li a:hover{  text-decoration:none; color:#000; background:#ecc731; }
ul.menu li.active a{  text-decoration:none; color:#000;}
.menu li:hover>a { color:#fff;  }
.menu .active>a { color:#fff;}
.menu ul {    background:#1868B7; float:left; padding:0; position: relative; display: none; /* hide dropdown */ width: 100%;  left:0!important; }
.menu ul li ul{background:#1868B7;}
.menu li:hover > ul { display: block; /* show dropdown on hover */ position:relative; } 
.menu li li {  border-top: none;   border: none;  text-transform:none;   }
.menu li li a {  color: #fff;  text-transform:none; }
.menu li li a:hover {   color: #fff;  }

.menu ul.split, .menu ul ul.split{width:100%;}
}





/************************************************************************************
*	MOBILE
************************************************************************************/


/************************************************************************************
*	IPAP PORTRAIT
************************************************************************************/

@media only screen and ( min-width: 768px) and ( max-width: 1024px) {

/* nav link */
.menu li {  font-size:105%;  }
.menu a { padding: 0 12px 0 12px; }
}
/************************************************************************************
*	IPAP PORTRAIT
************************************************************************************/