:root {
        
        /*Цвета меню*/
        --BurgerColor: #2E2E2E; /*цвет полосок на иконке меню: transparent - прозрачное*/
        --BurgerActiveColor: #FF3DAF; /*цвет полосок на иконке меню при открытии: transparent - прозрачное*/
        --NavIconWrapColor: #f3f4f6; /*цвет фона иконки меню: transparent - прозрачное*/
        --NavIconActiveWrapColor: #f3f4f6; /*цвет фона иконки меню при открытии: transparent - прозрачное*/
        --BorderMenuColor: transparent; /*цвет обводки меню: transparent - прозрачное*/
        --BorderMenuActiveColor:transparent; /*цвет обводки меню при открытии: transparent - прозрачное*/
        --MenuBgHover: #f3f4f6; /*цвет меню при наведении: transparent - прозрачное*/
        --MenuLinesHover: #FF3DAF; /*цвет полосок при наведении: transparent - прозрачное*/
        --MenuBorderHover: transparent; /*цвет обводки при наведении: transparent - прозрачное*/
        
        /*Форма меню*/
        --BorderRadius: 100px; /*скругление углов у меню*/
        --BorderMenuSize: 1px solid; /*толщина обводки меню (Допустимые значения: solid - сплошная линия; dotted - линия в виде точек; dashed - прерывистая линия;*/
        
        /*Размер меню*/
        --MenuSize: scale(1); /*размер меню на пк, вступает в силу на разрешении выше 1367px (работает по принципу scale)*/
        --MenuSize1024: scale(0.8); /*размер меню на ноутбуках, вступает в силу на разрешении 769px-1366px (работает по принципу scale)*/
        --MenuSize768: scale(0.7); /*размер меню на планшете, вступает в силу на разрешении 481px-768px (работает по принципу scale)*/
        --MenuSize480: scale(0.75); /*размер меню на телефоне, вступает в силу на разрешении ниже 480px (работает по принципу scale)*/
        
        /*Позиционирование (фиксированная или статичная шапка при скролле)*/
        --HeaderPosition: fixed; /*позиционирование вашей шапки на разрешении выше 1367px. Допустимые значения: absolute - без фиксации, при скролле. fixed - с фиксацией*/
        --HeaderPosition1024: fixed; /*позиционирование вашей шапки на разрешении 769px-1366px. Допустимые значения: absolute - без фиксации, при скролле. fixed - с фиксацией*/
        --HeaderPosition768: fixed; /*позиционирование вашей шапки на разрешении 481px-768px. Допустимые значения: absolute - без фиксации, при скролле. fixed - с фиксацией*/
        --HeaderPosition480: fixed; /*позиционирование вашей шапки на разрешении ниже 480px. Допустимые значения: absolute - без фиксации, при скролле. fixed - с фиксацией*/
        
    }
    
    
    /*Указываем максимальное разрешение, на котором будет работать меню (max-width: 3000px)*/
@media screen and (max-width: 3000px) {
.NavIconWrap {
    display: flex !important;
}
}

/*Выезд меню (снимаем комментарии с тех параметров, которые нужны и ставим комментарии там, где парметры не нужны)*/
      
      .NavBlock.show {
          
     /*////////////////////////Выезд меню СВЕРХУ///////////////////////////*/
    /*Для выезда сверху снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    

    /*////////////////////////Выезд меню СНИЗУ///////////////////////////*/
    /*Для выезда снизу снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    /*transform: translateY(-100vh);*/
    /*transform: translateY(-100vh);*/
    
    /*////////////////////////Выезд меню СЛЕВА///////////////////////////*/
    /*Для выезда слева снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    /*-webkit-transform: translateX(100vw);*/
    /*transform: translateX(100vw);*/
    
    
    /*////////////////////////Выезд меню СПРАВА///////////////////////////*/
    /*Для выезда справа снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    /*-webkit-transform: translateX(-100vw);*/
    /*transform: translateX(-100vw);*/
    
}
.NavBlock {
     /*////////////////////////Выезд меню СВЕРХУ///////////////////////////*/
    /*Для выезда справа снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    top: -100vh;
    
    /*////////////////////////Выезд меню СНИЗУ///////////////////////////*/
    /*Для выезда снизу снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    /*bottom: -100vh;*/
    
    /*////////////////////////Выезд меню СЛЕВА///////////////////////////*/
    /*Для выезда слева снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    
    /*left: -100vw;*/
    /*top: 0;*/
    
    /*////////////////////////Выезд меню СПРАВА///////////////////////////*/
    /*Для выезда справа снять комментарии, чтобы стили вступили в силу (вернуть комментарии, чтобы они не применялись)*/
    /*right: -100vw;*/
    /*top: 0;*/
}


.icon-menu {
    z-index: 999 !important;
}

.NavBlock {
    position: fixed;
    width: 100%;
    height: 100vh;
    -webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
    transition:-webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
    transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
    transition:transform 900ms cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 9910;
    overflow-y: hidden;
    overflow-x: hidden;
}
.NavBlock .t396__artboard {
    min-height:100vh!important;
    height:100vh!important;
}

.NavBlock.show {
    transition-delay:opacity 900ms!important;
    -webkit-transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
    transition: -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
    transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
    transition: transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms, -webkit-transform 900ms cubic-bezier(0.77, 0, 0.175, 1) 120ms;
}
.NavBlock.show .t396__artboard {
    overflow-y: scroll;
}

.NavActive {
    height:100vh!important;
    overflow:hidden!important;
}

.Trigger {
    z-index: 3050!important;
}
.NavIconWrap {
    position:var(--MenuPosition);
    top: var(--NavTop);
    right: var(--NavRight);
    left: var(--NavLeft);
    bottom: var(--NavBottom);
    padding: 10px;
    border: var(--BorderMenuSize);
    border-radius: var(--BorderRadius);
    border-color: var(--BorderMenuColor);
    overflow: hidden;
    background: var(--NavIconWrapColor);
    height: 30px;
    width: 30px;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transform: scale(0.8);
}

.NavIconWrap.open {
    background: var(--NavIconActiveWrapColor);
    right: var(--NavIconActivePadding);
    border: var(--BorderMenuSize);
    border-radius: var(--BorderRadius);
    border-color: var(--BorderMenuActiveColor);
}
.NavIcon {
    top: -1px;
    left: 0px;
    width: 26px;
    height: 20px;
    overflow: hidden;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg) scale(0.8);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
.NavIcon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 50%;
    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;
}
.NavIcon.open span {
    background: var(--BurgerActiveColor);
}
.NavIcon span:nth-child(even) {
    left: 50%;
    border-radius: 0 20px 20px 0;
}

.NavIcon span:nth-child(odd) {
    left:0px;
    border-radius: 20px 0 0 20px;
}
.NavIcon span:nth-child(1), .NavIcon span:nth-child(2) {
    top: 4px;
}
.NavIcon span:nth-child(3), .NavIcon span:nth-child(4) {
    top: 10px;
}
.NavIcon span:nth-child(5), .NavIcon span:nth-child(6) {
    top: 16px;
}


.NavIcon.open span:nth-child(1),.NavIcon.open span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.NavIcon.open span:nth-child(2),.NavIcon.open span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.NavIcon.open span:nth-child(1) {
    left: 2px;
    top: 4px;
}
.NavIcon.open span:nth-child(2) {
    left: calc(50% - 2px);
    top: 4px;
}
.NavIcon.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}
.NavIcon.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}
.NavIcon.open span:nth-child(5) {
    left: 2px;
    top: 13px;
}
.NavIcon.open span:nth-child(6) {
    left: calc(50% - 2px);
    top: 13px;
}





.NavIconWrap {
    position:var(--MenuPosition480);
    top: var(--NavTop480);
    right: var(--NavRight480);
    left: var(--NavLeft480);
    bottom: var(--NavBottom480);
}


.menu-shape {
    z-index: 5000 !important;
    opacity: 0;
}
    .menu-text {
    z-index: 990 !important;
    overflow: hidden;
    display: flex;
    height: var(--MenuPadding);
    transform: translate(0px, 0px);
    }
    .menu-text-open {
    transition:-webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transform: translate(0px, -15px);
    }
    .menu-text .tn-atom {
        transition:-webkit-transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
    }
    

@media (max-width: 3000px) and (min-width: 1367px) { 
  .NavIconWrap {
    transform: var(--MenuSize);
  }

  .uc-menu-header .t396__artboard {
    position: var(--HeaderPosition);
  }
  
  .NavIconWrap {
      transition-duration: 0.3s;
  }
  .NavIconWrap:hover {
      border-color: var(--MenuBorderHover);
      transition-duration: 0.3s;
      background: var(--MenuBgHover);
  }
  .NavIconWrap:hover .NavIcon span {
      transition-duration: 0.3s;
  }
  .NavIconWrap:hover .NavIcon span {
      transition-duration: 0.3s;
      background: var(--MenuLinesHover);
  }
}

@media (max-width: 1366px) and (min-width: 769px) { 
  .NavIconWrap {
    transform: var(--MenuSize1024);
  }
  .uc-menu-header .t396__artboard {
    position: var(--HeaderPosition1024);
  }
  .NavIconWrap {
      transition-duration: 0.3s;
  }
  .NavIconWrap:hover {
      border-color: var(--MenuBorderHover);
      transition-duration: 0.3s;
      background: var(--MenuBgHover);
  }
  .NavIconWrap:hover .NavIcon span {
      transition-duration: 0.3s;
  }
  .NavIconWrap:hover .NavIcon span {
      transition-duration: 0.3s;
      background: var(--MenuLinesHover);
  }
}

@media (max-width: 768px) and (min-width: 481px) { 
    .NavIconWrap {
    transform: var(--MenuSize768);
  }
    .uc-menu-header .t396__artboard {
    position: var(--HeaderPosition768);
  }
}

@media (max-width: 480px) and (min-width: 300px) { 
  .NavIconWrap {
    transform: var(--MenuSize480);
  }
    .uc-menu-header .t396__artboard {
    position: var(--HeaderPosition480);
  }
}
   .uc-menu-header  {
        position: relative;
        z-index: 9999;
}
    .uc-menu-header .t396__artboard {
        z-index: 99;
    }
    .menu-shape {
        z-index: 999 !important;
        position: absolute;
        margin: 0;
        padding: 0;
        transform: scale(1);
    }
    .menu-shape .tn-atom {
        width: 100%;
        height: 100%;
    }