header {
  position: fixed;
  width: 100%;
  background: transparent;
  color: #fff;
  height:80px;
  padding:30px;
  transition: all 0.3s ease 0s;
  z-index:2000;
}
header .img1{display:inline; width:100px;}
header .img2{display:none;}
header .button_container {
	position: fixed;
  top: 4.5%;
  right: 3%;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease 0s;
}
header .my-soc{position:fixed; top:4.5%; right:2%; transition: all 0.3s ease 0s;}
header .my-soc a{font-size:18px; padding:0 15px 0 0; color:#fff;}

header.scroll {
  background: #fff;
  transition: all 0.3s ease 0s; 
  padding:12px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  height:50px;
}
header.scroll .img1{display:none;}
header.scroll .img2{display:inline; width:65px; transition: all 0.3s ease 0s;}
header.scroll .my-soc{top:2%; transition: all 0.3s ease 0s;}
header.scroll .my-soc a{color:#364156;}
header.scroll .button_container {
  top: 12px;
  right: 3%;
}
.button_container:hover {
  opacity: 0.7;
}
.button_container.active .top {
  transform: translateY(11px) translateX(0) rotate(45deg);
  background: #fff ;
}
.button_container.active .middle {
  opacity: 0;
  background: #fff ;
}
.button_container.active .bottom {
  transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #fff ;
}
.button_container span {
  background: #fff ;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.35s ease;
  cursor: pointer;
  z-index:3000;
}
header.scroll .button_container span{background:#364156;}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background: #364156;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, height 0.35s;
  overflow: hidden;
   z-index:1;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight 0.5s ease forwards;
          animation: fadeInRight 0.5s ease forwards;
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.overlay nav {
  position: relative;
  height: 90%;
  top: 50%;
  transform: translateY(0%);
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  height: 23%;
  padding: 13px;
  min-height: 25px;
  position: relative;
  opacity: 0;
  border-bottom:solid 1px #222;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
  padding:0;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  transform: translateX(-50%);
  height: 2px;
  background: #0b76e3 ;
  transition: .35s;
}




.list {
 
}

.list ul {
  padding: 0 0 0 5px;
  max-width: 100%;
  margin: 0 auto;
}
.list ul li {
  position: relative;
  color: #fff;
  padding: 3px 0 3px 15px;
  border-bottom:none;
}
.list ul li a{font-size: 16px !important;}
.list ul li:before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}




@media (max-width: 767px) { 
header {
  height:50px;
  padding:10px;
  position:fixed;
 
}
header .img1{display:inline; width:70px;}
header .button_container {

  top: 13px;
  right: 3.5%;
}
header.scroll {
  background: #fff;
  transition: all 0.3s ease 0s; 
  padding:10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  height:50px;
}
header.scroll .button_container {

  top: 13px;
}

.overlay nav {
  font-size: 16px;
}
.list ul li {
  font-size: 11px;
  color: #fff;
  padding: 3px 0 3px 15px;
  border-bottom:none;
}
.fix-h{height:50px;}
header .my-soc{position:fixed; top:2%; right:0;}
.env-ico{display:none;}
}


@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}