header{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  background:#fff;
  z-index: 999;
}
header .header-inner {
  width:1200px;
  margin:0px auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top:18px;
  padding-bottom:10px;
   -webkit-transition:all ease 0.3s;
  -o-transition:all ease 0.3s;
  transition:all ease 0.3s;
}
body.scrolled header .header-inner{
  padding-top:5px;
  padding-bottom:5px;
}
header .logo-wrapper{
  width: 300px;
  -webkit-transition:all ease 0.3s;
  -o-transition:all ease 0.3s;
  transition:all ease 0.3s;
}
body.scrolled header .logo-wrapper {
  width:200px;
}
header .logo-wrapper img{
  width:100%;
}
header .top-menu-container{
  display:block !Important;
  width:calc(50% - 200px);
}
.top-menu-container.left{
  text-align:right;
}
.top-menu-container.right{
  text-align:left;
}
.top-menu-container ul{
  list-style:none;
  padding-left:0px;
}
.top-menu-container ul li{
  display:inline-block;
  padding-left:5px;
  padding-right:5px;
  margin-left:15px;
  margin-right:15px;
}
.top-menu-container ul li:first-child{
  margin-left:0px;
}
.top-menu-container ul li:last-child{
  margin-right:0px;
}
.top-menu-container li a{
  color:var(--main_green);
  font-family:'Gill Sans';
  font-size:20px;
  font-weight: 400;
}



/*-- SUB MENU --*/
header .top-menu-container {
  display: block !Important;
  width: calc(50% - 200px);
}
body.scrolled header .logo-wrapper {
  width: 200px;
  padding-top: 14px;
}
header .header-inner{
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.top-menu-container ul.menu{
  margin:0px;
  padding-top:22px;
  padding-bottom:22px;
}
.top-menu-container ul.menu>li{
  vertical-align:top;
  width:100px;
  text-align:Center;
  margin-left:1px;
  margin-right:1px;
  position:relative;
}
.top-menu-container ul li a{
  white-space:nowrap;
}
.top-menu-container ul li a:hover{
  color:#FF8400;
}
ul.sub-menu{
  max-height:0px;
  overflow:hidden;
  width:120px;
  -webkit-transition:all ease 0.5s;
  -o-transition:all ease 0.5s;
  transition:all ease 0.5s;
  position:relative;
  left:50%;
  -webkit-transform:TranslateX(-50%);
      -ms-transform:TranslateX(-50%);
          transform:TranslateX(-50%);
}
.top-menu-container ul.menu>li:hover ul.sub-menu{
  max-height:1000px;  
  overflow:visible;
}
.top-menu-container ul.menu>li.aktif>ul.sub-menu{
  opacity:0;
  visibility:visible;
}

ul.sub-menu li{
  display:block;
  white-space:nowrap;
  text-align:Center;
  margin-left:auto;
  margin-right:auto;
  line-height:1.2;
}
ul.sub-menu li a{
  font-size:14px;
  color:var(--main_green);
}




/*========================================================================================================================*/
/*========================================================================================================================*/
/*========================================================================================================================*/
/*========================================================================================================================*/
/*========================================================================================================================*/


@media(max-width:1200px){
  #masthead .top-menu-container{
    display:none !Important
  }
  header .header-inner{
    width: 100% !Important;
  }
  a.logo-link .logo1{
    display:none !important;
  }
  a.logo-link .logo2{
    display:block !important;
    height:50px;
        -webkit-filter: drop-shadow(2px 2px 2px #fff);
    filter: drop-shadow(2px 2px 2px #fff);
  }
  #masthead{
    background:transparent;
  }
  header .header-inner{
    padding:0px !Important;
    height:0px !important
  }
  body header .logo-wrapper{
    padding-top:10px! important;
  }
  header .logo-wrapper{
    width:60px !Important;
    margin-left:50%;
    -webkit-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
            transform:translateX(-50%);
  }
  body{
    padding-top:0px;
  }
  .menu-toggle{
    display:block !important;
  }
  .hamburger {
    position: absolute;
    display: block;
    top: 30px;
    right: 40px;
    cursor: pointer;
    width: 25px;
    height: 28px;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .hamburger .line {
    width: 100%;
    height: 3px;
    -webkit-box-shadow: 2px 2px 2px rgb(255 255 255 / 80%);
    box-shadow: 2px 2px 2px rgb(255 255 255 / 80%);
    background-color: #396246;
    display: block;
    margin: 7px auto;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
  }
  .hamburger.is-active .line:nth-child(1) {
    position: absolute;
    right: -5px;
    top: 3px;
    margin: 0 !important;
    -webkit-transform: translateY(15px) rotate(45deg);
    -ms-transform: translateY(15px) rotate(45deg);
    transform: translateY(15px) rotate(45deg);
    
  }
  .hamburger.is-active .line:nth-child(2) {
    position: absolute;
    left: -11px;
    top: 15px;
    margin: 0 !important;
    -webkit-transform: translateY(-15px) rotate(-45deg);
    -ms-transform: translateY(-15px) rotate(-45deg);
    transform: translateY(-15px) rotate(-45deg);
    -webkit-box-shadow:none !Important;
            box-shadow:none !Important;
  }
  .hamburger.is-active .line:nth-child(1), 
  .hamburger.is-active .line:nth-child(2) {
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
  }
  #mob_menu_wr{
    display:block !important;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:0px;
    -webkit-transition:all ease 0.5s;
    -o-transition:all ease 0.5s;
    transition:all ease 0.5s;
    z-index:99;
    background:#fff;
    overflow:hidden;
  }
  body.mob_menu_on #mob_menu_wr{
    height:100%;
  }
  .mob_menu_wr_inn{
    padding:70px 0px 30px 40px;
    height:100%;
  }
  .mob_menu_wr_nav{
    height:100%;
    overflow:auto;
  }
  .mob_menu_wr_inn ul{
    list-style:none; 
    padding:0px;
    margin:0px;
    
  }
  .mob_menu_wr_inn ul li{
    line-height:1.15;
    font-size: 18px;
  }
  .mob_menu_wr_inn ul.menu>li{
    padding-bottom:5px;
    padding-top:5px;
  }
  .mob_menu_wr_inn ul li a{
    color: #396246 !important;
    font-size: 18px;
    font-weight: normal;  
  }
  .mob_menu_wr_inn ul.sub-menu{
    max-height:none;
    -webkit-transform:none;
        -ms-transform:none;
            transform:none;
    left:0px;
    padding-top:5px;
    padding-left:15px;
    padding-bottom:0px ;
    width:auto;
  }
  .mob_menu_wr_inn ul.sub-menu li{
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
  }
  
  
}