@font-face{
  font-family:"DIN Next W01 Regular";
  src:url("Fonts/692282/da088ecc-a53c-4831-a95b-6fd81b5b338a.eot?#iefix");
  src:url("Fonts/692282/da088ecc-a53c-4831-a95b-6fd81b5b338a.eot?#iefix") format("eot"),url("Fonts/692282/44e7b0fa-6c8d-43c2-b19e-f1e3ce9ea57c.woff2") format("woff2"),url("Fonts/692282/c5a7f89e-15b6-49a9-8259-5ea665e72191.woff") format("woff"),url("Fonts/692282/868c94b5-ca49-46b7-b62b-297f8d861125.ttf") format("truetype");
}

/* Common styles of menus */
/* Left Navigation
    -----------------------------------------------*/
#panel {
    transform: translateX(0px) !important;
}
#panel {
    position: relative;
    z-index: 9;
}
.main-panel {
    float: left;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 999 !important;
}

.mainNav {
  background: #46CFB0;
  width: 25%;
  margin:150px auto;
  display:none;
}

/* First Level */


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

.mainNav ul li { border-top: 1px solid #1ABC9C;}

.mainNav ul li a {
  color: #000;
  display: block;
  font-size:16px;font-family:"DIN Next W01 Regular";font-weight:400;
  line-height: normal;
  padding: 12px 20px;
  text-decoration: none;
}

.mainNav ul li a:hover {
  text-decoration: none;
}

/* Second Level */
.mainNav ul li:last-child { border:none;}

.mainNav ul ul {border-bottom: none;}
/* .mainNav ul li:nth-child(5) ul { margin-left: 0!important } */
.mainNav ul ul li:last-child { border:none;}
.mainNav ul ul li {
  border-top: 1px solid #154786;
  background: #34BC9D;
}

.mainNav ul ul li a {
  color: #000 !important;
  display: block;
  font-size: 14px;
  line-height: normal;
  padding: 0.5em 0em 0.5em 0;
}

.mainNav ul ul li a:hover { background:none; }

/* Third Level */


.mainNav ul ul ul {border-top: 1px solid #c4c4c5;
    margin:0 !important;}

.mainNav ul ul ul li { border: none; }

.mainNav ul ul ul li a {
  padding-bottom: 5px;
    padding-left: 20px;
    padding-top: 5px;
}

/* Accordion Button */


ul li.has-subnav .accordion-btn {
 margin: 15px 0 0 -20px;
}
.btn-hamburger { display:none;}
.btn-hamburger {
    margin: -10px 0 0 0;
}
.btn-hamburger {float:right;background:#fff url(images/mobile-btn.png) no-repeat center 12px;width:45px;height:44px;border:none;cursor:pointer }
.fa.fa-angle-up {
    color: #f3b708;
}
.slideout-open .btn-hamburger { background:#fff url(images/close-icon.png) no-repeat center center;  }

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

.slideout-open .top-panel {transform: translateX(0);transition: transform 0.5s;}
#panel {transform: translateX(0) !important;}
.mainNav {transform: translateX(256px);transition: transform 0.5s;}
.slideout-open .mainNav {transform: translateX(0);transition: transform 0.5s;}
nav .btn-hamburger{display:none!important}
.slideout-open nav .btn-hamburger {display: none; left: 0; top: 450px; position: absolute; display: block; padding: 0; height: 70px; width: 70px; float:left; border:0}
.current-menu-item.page_item a{color: #81a14a!important;}
.current-menu-item.page_item li a{color: #000!important;}
.current-menu-item.page_item li.current-menu-item.page_item a{color: #81a14a!important;}



}
 @media screen and (max-width: 1366px) {
.mainNav { width: 40%;padding:20 }
}

@media screen and (max-width: 1366px) {
.btn-hamburger {margin: -6px 0 0;display:block; float:right;background:#fff url(images/mobile-btn.png) no-repeat center 12px;width:45px;height:44px;border:none;cursor:pointer }

.mainNav { margin:0;position:absolute;top:106px;right:0; z-index: 99999999999;background:#fff !important;padding:3% 0 0;width:256px;}
.mainNav ul li { border-top:none !important;background:none !important;border-bottom:1px solid #cacaca } 
}

@media screen and (min-width:768px)  and (max-width: 1366px) {
.btn-hamburger {margin:-10px 0 0 0;}
.mainNav{padding: 0!important;}
.slideout-open .mainNav {display:block;}
.mainNav ul li { border-top:none !important;background:none !important;border-bottom:1px solid #cacaca } 
}

/*@media screen and (min-width:782px)  and (max-width: 1023px) {
  .mainNav { top: 120px !important; }
}
@media screen and (min-width:768px)  and (max-width: 782px) {
  .mainNav { top: 135px !important; }
}*/
@media screen and (max-width:500px) {
.mainNav {width: 236px;}   
}
@media screen and (max-width:767px) {
.search-and-social{width: 175px;top: 34px;}
.mainNav{ display:none !important; }
.slideout-open .mainNav {display:block!important;}





}
@media screen and (max-width:450px) {
.btn-hamburger {margin: -6px 0 0;}
.search-and-social{top: 34px;}
.mainNav {top:94px;}

}

 @media screen and (max-width:320px) {
.btn-hamburger {height: 36px;  background-position-y: 8px;}
.slideout-open .btn-hamburger { background:#fff url(images/close-icon.png) no-repeat center center;  }
.mainNav {
    width: 74% !important;
}
 }
/*@media only screen and (max-width:480px) {
.mainNav { width:285px !important}
}*/


ul li.has-subnav .accordion-btn .fa {
    width: 0;
    height: 0;
    float: right;
    margin-top: 3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #81a14a; 
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

ul li.has-subnav .accordion-btn.accordion-expanded .fa {
    border: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #81a14a;
  -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

.fa-angle-up::before,.fa-angle-down::before { content:none;}

ul li.has-subnav li .accordion-btn .fa{margin-top: -4px;}
.menu-main-menu-container {background: #fff;padding-bottom:5px;}
.mainNav ul li { border-top:none !important;background:none !important;border-bottom:1px solid #cacaca } 
.mainNav { margin:0;position:absolute;top:107px;right:0; z-index: 99999999999;background:#fff !important;padding:3% 0 0;width:256px;/*height:100%*/;}
nav .btn-hamburger {
    display: none!important;
}

@media screen and (max-width:767px) {
.mainNav {top: 92px}

}
@media screen and (min-width:500px) and (max-width:767px){
.mainNav { top: 96px; } 
}