.menu span{
width: 50px;
height: 5px;
background-color: #fff;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu:hover{
cursor: pointer;
}
.menu.active span:nth-child(2){
opacity: 0;
}
.menu.active span:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}
.menu.active span:nth-child(3){
-webkit-transform: translateY(-13px) rotate(-45deg);
-ms-transform: translateY(-13px) rotate(-45deg);
-o-transform: translateY(-13px) rotate(-45deg);
transform: translateY(-13px) rotate(-45deg);
}
.menu.dark span{
background-color: #000;
}
.overlay, .upo {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
backdrop-filter: blur(10px);
background-color: rgba(0,0,0,0.5);
z-index: 6;
}
.overlay .mlinks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay .mlinks>ul li {
list-style-type: none;
margin: 0;
padding:0;
font-size: 30px;
text-align: center;
text-transform: uppercase;
transition: all 0.2s ease;
cursor: pointer;
}
.overlay .mlinks>ul li a{
font-size:55px;
text-decoration: none;
font-weight:bold;
letter-spacing: 1px;
transition:.8s;
}
.overlay .mlinks>ul li a.active, .overlay .mlinks>ul li a:hover{
color: var(--red);
}
.overlay img.ologo, .upo img.ologo{
position:absolute;
top:16px;
left:2.5%;
width:146px;
z-index:1;
}
.overlay img.close, .upo img.upoclose{
position:absolute;
display:block;
cursor:pointer;
top: 20px;
right: 45px;
width: 37px;
height: 37px;
z-index:1;
}
.social{
width:fit-content;
margin:auto;
}
.social ul{
position:relative;
list-style-type: none;
margin-top:30px;
}
.social ul li{
display: inline-block;
margin-right:8px;
}
.social ul li:last-child{
margin-right:0;
}
.social ul li a img{
height:36px;
}
.lmenu{
width:250px;
position:absolute;
top:50%;
transform: translateY(-50%);
left:50px;
width:200px;
opacity:0;
filter: blur(15px);
transition:1.8s;
}
.lmenu.h{
left:0;
}
.lmenu a{
text-decoration: none;
transition:0.8s;
font-size:15px;
text-transform: uppercase;
}
.lmenu a.active{
font-size:18px;
color:var(--yellow);
}
.lmenu ul{
list-style-type: none;
position:relative;
}
.lmenu ul li{
border-left:3px solid #848484;
padding-left:10px;
margin-bottom:6px;
font-weight:bold;
color:#848484;
transition:.8s;
}
.lmenu ul li.active{
border-left:3px solid #ffc10e;
}
.lmenu ul li:hover{
color:#fff;
border-left:3px solid #fff;
background-color:rgba(0,0,0,0.5);
}
.fixed{
position:fixed;
opacity:1;
filter: blur(0);
z-index:3;
}
.nfixed{
position:relative!important;
}
@media screen and (max-width:1000px) {
    .lmenu{
    left:-200px;
    }
    .lmenu li{
    backdrop-filter: blur(5px);
    }
}
@media screen and (max-width:450px) {
	.overlay img.close, .upo img.upoclose{
	right: 22px;
	}
}