.toggle-button {
        /*position: fixed; */
    position: absolute;
    top: 50px;
    right: 7%;
    padding: 8px 0px;
    margin: 8px 15px 8px 0;
    height: 57px;
    width: 58px;
    cursor: pointer;
    z-index: 12;
    display: none;     
}

.bar {
    background-color: #1e927a;
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    margin-left: 12px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}
.bar + .bar {
       margin-top: 6px;
}
.middle {
    top: 11px;
}
.bottom {
        top: 22px;

}
.toggle-button:hover {
    opacity: .7;
}
.toggle-active .bar {
    background-color: #fff;
}
.toggle-active .top {
       -webkit-transform: translateY(0px) translateX(0) rotate(45deg);
}
.toggle-active .middle {
   opacity: 0;
}
.toggle-active .bottom {
       -webkit-transform: translateY(-22px) translateX(0) rotate(-45deg);
    width: 100%;
}

.overlay {
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
}
.nav-active {
    opacity: 1;
    visibility: visible;
    height: 100vh;
        z-index: 10;
/*    max-height: 340px;*/
}
.overlay ul {
    display: block;
position: relative;
left: 10%;
font-size: 41px;
text-align: left;
list-style: none;
padding: 0;
top: 50%;
transform: translateY(-50%);
}
.overlay ul li {
    display: block;
   margin-bottom: 6px;

}
.overlay ul li a{

    position: relative;
}
.overlay ul li a {
    color: #fff;
    text-decoration: none;
    
    text-transform: uppercase;
}
.overlay ul .activem:before{
   content: " ";
width: 60px;
position: absolute;
margin-left: -100px;
top: 50%;
background-image: url(../images/line_2.svg);
height: 7px;

}
.overlay ul li a:hover:before{

     content: " ";
width: 60px;
position: absolute;
margin-left: -100px;
top: 50%;
background-image: url(../images/line_2.svg);
height: 7px;
transform-origin: 0% 100%;
    animation: mbline .5s;
}

@keyframes mbline {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
 .activem:after{
content: " ";
width: 141px;
position: absolute;
top: 50%;
background-image: url(../images/line_2.svg);
height: 7px;
margin-left: 50px;

}
.overlay ul li a:hover:after{
       content: " ";
width: 141px;
position: absolute;
top: 50%;
background-image: url(../images/line_2.svg);
height: 7px;
margin-left: 50px;
transform-origin: 100% 0%;
    animation: maline .5s;
}
@keyframes maline {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}


@media (max-width: 1024px) {
.toggle-button {
    width: 40px;
    right: 26px;
    top: 10px;
	display:block;
}
.overlay ul { 
    font-size: 26px;
}
.overlay ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
	font-style: initial;
    text-transform: none;
}
.overlay .habtbggren {
    padding: 50px 25px;
}
}
@media (max-width: 479px) {
.overlay ul { 
    font-size: 18px;
}
}


@media  (max-width: 736px) and (orientation: landscape) {
  .overlay ul {

    font-size: 18px;

    padding-left: 30px;

}
}


@media (max-width: 350px) {
.overlay ul {
    font-size: 16px;
}	
	
}