:root {
--BurgerColor: #E3EEF9; /*цвет полосок на иконке меню*/
--BurgerColorActive: #E3EEF9; /* выезд меню, ставим положительное значение */
--MenuSize: -600px; /* выезд меню, ставим отрицательное значение */
--OverlayBackground: #01030D;  /*  цвет фона */
--MenuPosition: fixed; /* позиционирование меню: absolute - без фиксации, при скролле. fixed - с фиксацией */
/*выезд на телефоне*/
--MenuSizeTransform480: 250px; /* выезд меню, ставим положительное значение */


    /*Основные стили*/
    --MainText: #E3EEF9;
    --BgBtnColor: #E3EEF9;
    --BgBtnColorHover: #E3EEF9;
    --TextBtnColor: #E3EEF9;
    --TextBtnColorHover: #B2CFEB;
}

.NavWrap {
width: 100%;
height: 100%;
}

.Overlay {
width: 100%;
height: 100vh;
background: transparent;
cursor: pointer;
opacity: 0;
transition-duration: 500ms;
/*backdrop-filter: blur(10px);*/
}

.overlay-open {
background: black;
/*backdrop-filter: blur(5px);*/
opacity: 0;
transition-duration: 500ms;
}

.NavIcon {
display: flex;
justify-content: center;
overflow: hidden;
/*width: 60px;*/
height: 27px;
transform: translate(0px, -50%);
top: 50%;
position: relative;
cursor: pointer;
}

.NavIcon span {
display: block;
position: absolute;
height: 2px;
width: 60%;
background: var(--BurgerColor);
opacity: 1;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
overflow:hidden;
/*mix-blend-mode: difference;*/
}

.NavIcon.open span {
background: var(--BurgerColorActive);
}

.NavIcon span:nth-child(1) {
top: 15px;
}

.NavIcon span:nth-child(2) {
top: 8px;
}

.NavIcon.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 13px;
}

.NavIcon.open span:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 13px;
}

.NavIcon.open {
left: 0px;
}

.uc-menu-block {
position: var(--MenuPosition); 
top: 0px;
z-index: -1;
width: 100%;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, var(--MenuSize));
}

.menu-open {
transition-delay: 0s;
z-index: 99;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, 0px);
overflow-y: auto;
}

.menu-open .t396__artboard {
position: absolute;
}

.wrapper-menu {
position: relative;
top: 0;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
}

.body-open {
transition-delay: 0s;
width: 100%;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
/*top: var(--MenuSizeTransform);*/
transform: scale(0.95) !important;
overflow: hidden;
}

.t-body {
background: var(--OverlayBackground);
}

.overflow {
background: var(--OverlayBackground);
overflow: hidden !important;
}

.inside {
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
opacity:0;
transition-duration: 0.3s;
transition-delay: 0.3s;
}

.inside-show {
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
opacity:1;
transition-delay: 0.6s;
}

@media screen and (max-width: 480px) {
.uc-menu-block {
position: var(--MenuPosition); 
top: 0px;
z-index: -1;
width: 100%;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform: translate(0%, -120vh);
}

.menu-open {
transition-delay: 0s;
z-index: 99;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
transform:translate(0%, 0px);
}

.wrapper-menu {
position: relative;
top: 0;
transition-delay: 0.5s;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
}

.body-open {
top: 100vh;
transition-delay: 0s;
width: 100%;
transition-duration: 0.8s;
transition-timing-function: cubic-bezier(.69,.15,.12,.99);
overflow: hidden;
transform: scale(0.95) !important;
}

}

@media screen and (max-width: 640px) {
.uc-menu-block .t396__artboard {
transform: translateY(0) !important;
}

.menu-open {
transform: translate(0%, 0vh);
}

.body-open {
top: var(--MenuSizeTransform480) !important;
}

.overlay-open {
position: relative;
z-index: -1;
}

}

a {
text-decoration: none;
}