div#overlay { display: none; }
a#toggle { position: fixed; top: 0; left: 25px; width: 55px; height: 42px; background: url(../images/nav.png) no-repeat 10px 9px; 
  text-align: center; color: white; display: none; transition: all ease-out 0.3s; z-index: 99999; }
html.open-menu a#toggle{background: url(../images/nav-close.png) no-repeat 10px 9px; left: 0;}
a:hover{ text-decoration: none; }
a#toggle i { position: relative; top: 46%; transform: translateY(-50%); font-size: 0; }
main#content { padding: 10px; } 
html.open-menu .top-bar .container ul{ opacity: 0;  }
.mob-logo{ display: none; }
html.open-menu .mob-logo{ display: block; text-align: center; margin: 0 0 0 0; padding: 5px 0; }
html.open-menu .mob-logo img{ width: 80px;  }
#menu { transition: all ease-out 0.3s; }
#menu a { color: white; }
#menu ul { margin: 0; padding: 0; background-color: #017a69; position: relative;  }
.nav-container{background-color: #017a69;}
.nav-container .container{ padding: 0 0; }
#menu ul li { display: table-cell;  }
#menu ul li > a { display: inline-block; padding: 17px 25px; font-size: 14px; border-right: 1px solid #04a58e; }
#menu ul li > a > i { margin-left: 15px; transition: all ease-out 0.3s; -webkit-transition: all ease-out 0.1s; }
#menu ul li ul { display: none; background: #039681; position: absolute; top:54px; left: 0; z-index: 91; width:100%; text-align: center; }
#menu ul li ul li { display: inline-table; min-width:20%; text-align: center; margin: 0 0 0 0;}
#menu ul li ul li a { display: block; padding: 12px 0; text-align: left; border-bottom: 1px solid #04a58e; border-right: none;}
#menu ul li:hover > a { background: #00473d; }
#menu ul li:hover > a > i { transform: rotateZ(90deg); }
#menu ul li:hover ul { display: block; }
#menu ul ul li:hover > a { background: none; color: #7aeef1;  }
#menu ul li ul ul { position: relative; display:grid; top: 0; }
#menu ul li ul ul li{ width: 100%; }
#menu ul li ul ul li a{  font-size: 13px;  }
#menu .layar3{ margin: 0 20px; padding: 0 0 30px 0; }
#menu .layar3 a{  font-size: 13px; text-align: left; border: none; padding: 5px 0; }
#menu .layar3 { margin: 10px 30px 0 0; }
#menu .layar3 a:hover{  color: #7aeef1; }
.single-dropdown{ position: relative; }
#menu ul li.single-dropdown ul{ width: 290px;  }
#menu ul li.single-dropdown ul a{ padding:  10px 30px;  }
.single-dropdown ul li{ width: 100%;  }
@media (min-width: 1900px){
 
#menu ul li > a { padding: 17px 45px; white-space: nowrap; }

}
@media (min-width: 1899px){

 

}
@media screen and (max-width: 1300px) {
#menu ul li > a { padding: 17px 9px; white-space: nowrap; }
}
@media screen and (max-width: 768px) { 
#menu .layar3 a { font-size: 8px; padding: 5px 0; white-space: nowrap; }

}

@media screen and (max-width: 900px) {
#menu ul li:hover > a { background:none;  }
a#toggle { display: block; }
main#content { margin-top: 65px; transition: all ease-out 0.3s; }
#menu { position: fixed; width: 270px; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 99;
  overflow-y: auto; background-color: #017a69; transform: translateX(-270px); }
#menu ul { text-align: left; background-color: transparent; padding: 0 20px; }
#menu ul li { display: block; border-bottom: 1px solid #f38f1d; float: none; }
#menu ul li a { display: block; font-size: 13px; padding: 5px 20px 5px 20px; }
#menu ul li a > i { float: right; margin-top: 4px;}
#menu ul li ul { display: none; width: 100%; background-color: rgba(22,160,133, 0.2); }
#menu ul li ul li{ float: none; }
#menu ul li:hover > ul { display: none; }
#menu ul li:hover > a > i { transform: rotateZ(0); }
#menu ul li.open > a {  }
#menu ul li.open > a > i { transform: rotateZ(90deg); }
#menu ul li.open > ul { display: block; background: #0e947a; padding: 0 0; width: 100%; }
div#overlay { display: block; visibility: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8); transition: all ease-out 0.3s; z-index: 1; opacity: 0; }
html.open-menu { overflow: hidden; }
html.open-menu div#overlay { visibility: visible; opacity: 0.5; width: 100%; left: 270px; }
html.open-menu a#toggle, html.open-menu main#content { transform: translateX(270px); }
html.open-menu nav#menu { z-index:9999; transform: translateX(0); padding:0; }
#menu .layar3 { margin: 0 10px 0 10px; }
#menu ul li ul li a{ font-size: 14px!important;
    white-space: normal!important; padding: 10px 10px; }
#menu .layar3 a{ font-size: 12px!important; }
}



@media (max-width: 1200px) {
 #menu ul li > a { padding: 12px 7px; }
 #menu ul li ul{ top: 38px; }
 #menu .layar3 a { font-size: 11px;}
 .banner-bottom { margin: -45px 0 0 0; }
}
@media (max-width: 1024px) {
 #menu ul li > a { padding: 12px 16px; font-size: 12px;}
}
@media (max-width: 990px){
#menu ul li > a { padding: 12px 5px; font-size: 10px; }
}
@media (max-width: 768px) {
  #menu ul li > a { padding: 12px 8px; font-size: 10px; border-right: none; font-weight: 300; white-space: nowrap; }
  #menu ul li:hover{ background: none;  }
  #menu ul li:hover > a{ color:#00ffcd;   }
  #menu .layar3 a {
    font-size: 8px;
}
}
@media (max-width: 900px) {
  #menu ul li > a { padding: 17px 14px; font-size: 16px; border-right: none; font-weight: 300; }
  .top-bar{ position: fixed; z-index: 999; height: 41px; top: 0; }
  .header{ padding-top: 46px; padding-bottom:6px; }
  #menu ul li ul li { width: unset; text-align: initial; min-width: 100%; }
}
@media (max-width: 340px) {

 a#toggle{ left: 10px;  }
}