.app-header {
     padding: .5rem 0;
     position: fixed;
     transition: transform .25s ease;
     background-color: var(--color-brand);
     color: var(--color-bg);
     border-bottom: 1px solid var(--color-brand-light);
     width: 100%;
     top: 0;
     left: 0;
     z-index: 100;
 }
 
 .home-page .app-header {
     border-bottom: none;
 }
 
 .app-header .link {
     display: inline-block;
     text-decoration: none;
     font-weight: 700;
 }
 
 .app-header .link:hover {
     color: currentColor;
 }
 
 .app-header__btn {
     color: inherit;
 }
 
 .app-header hr {
     border-bottom: 1px solid var(--color-brand-light);
     margin: 0;
 }
 
 .app-header__main {
     display: grid;
     grid-template-columns: 1.75rem 1fr 1fr;
     gap: 1rem;
     align-items: center;
 }
 
 .app-header__top {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     margin-top: -.5rem;
     --size: .875rem;
     padding-top: .25rem;
     padding-bottom: .25rem;
 }
 
 .app-header-top__left {
     justify-self: start;
 }
 
 .app-header-top__right,
 .app-header__phone {
     justify-self: end;
     display: flex;
     align-items: center;
 }
 
 .app-header-top__center {
     justify-self: center;
     align-items: center;;
 }
 
 .app-header__main {
     padding-top: .5rem;
     padding-bottom: 0;
 }
 
 .app-header__logo {
     margin: 0;
     margin-top: -.5rem;
     margin-right: auto;
     margin-left: .5rem;
 }
 
 .nav-top__list {
     display: flex;
     margin: 0;
     padding: 0;
 }
 
 .nav-top__item {
     display: block;
     line-height: 1;
     padding: .75rem 1rem;
 }
 
 .nav-top__link {
     display: block;
     position: relative;
     transition: color .25s ease
 }
 
 .nav-top__link::after {
     content: '';
     display: block;
     width: 100%;
     height: 2px;
     background: var(--color-bg-accent);
     position: absolute;
     top: 100%;
     left: 0;
     margin-top: .875rem;
     opacity: 0;
     transform: translateY(-.125rem);
     transition: transform .25s ease, opacity .25s ease;
 }
 
 .nav-top__item.--accent a {
     display: inline-flex;
     align-items: center;
     color: #ffd483
 }
 
 .nav-top__item.--accent svg {
     margin-right: .25rem;
     margin-top: -3px;
     display: block;
 }
 
 .nav-top__link:hover::after {
     opacity: 1;
     transform: translateY(0);
 }
 
 .app-header__top,
 .city-link {
     font-size: var(--size);
 }
 
 .app-header__top .link {
     font-weight: 300;
     line-height: 1;
     white-space: nowrap;
 }
 
 .city-link {
     display: inline-flex;
     align-items: center;
     font-size: var(--size);
     text-transform: none;
     font-weight: 300;
 }
 
 .city-link:hover {
     color: var(--color-bg-accent)
 }
 
 .city-link .svg-icon {
     width: var(--size);
     height: var(--size);
     margin-right: .5rem;
 }
 
 .city-link__text {
     position: static;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .app-menu {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: var(--color-brand);
     align-items: center;
     justify-content: center;
     z-index: -1;
     display: none;
 }
 
 .app-menu__list {
     display: flex;
     list-style: none;
     margin: 0;
     font-size: 2rem;
     line-height: 1.2;
     padding: 8rem 0 1rem;
     flex-direction: column;
     background: var(--color-brand);
     text-align: center;
 }
 
 .app-menu__item {
     padding: .75rem 1rem;
     opacity: 0;
     transform: translateY(-1rem);
     transition: all .35s ease;
 }
 
 .app-menu__link {
     display: inline-block;
     position: relative;
     color: currentColor;
     text-decoration: none;
     font-weight: bold;
     text-transform: uppercase;
     position: relative;
     white-space: nowrap;
 }
 
 .app-menu__link::after {
     content: '';
     display: block;
     width: 100%;
     height: 2px;
     background: var(--color-bg-accent);
     position: absolute;
     top: 100%;
     left: 0;
     transform: translateY(-10px);
     opacity: 0;
     transition: all .2s ease;
 }
 
 .app-menu__link:hover::after {
     transform: translateY(0);
     opacity: 1;
 }
 
 .app-menu__item.is-active .app-menu__link {
     color: var(--color-bg-accent);
 }
 
 .app-menu__item.is-active .app-menu__link:after {
     display: none;
 }
 
 .app-menu.is-show .app-menu__item {
     opacity: 1;
     transform: translateY(0);
 }
 
 .app-menu:before,
 .app-menu:after {
     content: '';
     position: absolute;
     z-index: 3;
     pointer-events: none;
     width: 15rem;
     height: 15rem;
     background: url(../img/bg2.svg) no-repeat 50% 50%;
     background-size: contain;
     opacity: 0;
 }
 
 .app-menu:before {
     top: 3rem;
     left: -6rem;
 }
 
 .app-menu:after {
     bottom: -6rem;
     right: -4rem;
     transform: rotate(25deg)
 }
 
 .app-menu.is-show:before {
     opacity: .4;
     animation: loadWoodTop 3s ease;
 }
 
 .app-menu.is-show:after {
     opacity: .6;
     animation: loadWoodBottom 3s ease;
 }
 
 .app-header__callback {
     font-size: var(--size);
     line-height: 1;
     color: var(--color-bg);
 }
 
 .app-header__callback:hover {
     text-decoration: underline;
 }
 
 .app-header__phone {
     color: currentColor;
     --size: 1rem;
     order: 2;
     font-size: var(--size);
     white-space: nowrap;
 }
 
 .app-header__phone .svg-icon {
     width: var(--size);
     height: var(--size);
     opacity: .5;
 }
 
 .header-messengers {
     margin: 0;
     display: flex;
     margin-right: .5rem;
 }
 
 .header-messengers .col {
     padding: 0 .25rem;
 }
 
 .header-messengers .link {
     display: inline-flex;
     color: var(--color-bg);
     width: 1.5rem;
     height: 1.5rem;
 }
 
 .header-messengers .social-link--telegram svg {
     left: -1px;
     top: 1px;
 }
 
 .is-show-menu {
     transform: none!important;
 }
 
 @keyframes loadWoodTop {
     0% {
         opacity: 0;
         transform: rotate(95deg);
     }
     100% {
         opacity: .4;
         transform: rotate(0)
     }
 }
 
 @keyframes loadWoodBottom {
     0% {
         opacity: 0;
         transform: rotate(-95deg);
     }
     100% {
         opacity: .6;
         transform: rotate(25deg)
     }
 }
 
 .hamburger {
     color: inherit;
     display: inline-block;
     line-height: 1;
     vertical-align: middle;
     cursor: pointer;
     background: transparent;
     padding: 0;
     border: none;
     width: 1.5rem;
     height: 1.5rem;
     position: relative;
 }
 
 .hamburger:before,
 .hamburger:after {
     content: '';
     transition: all .25s ease;
 }
 
 .hamburger-line,
 .hamburger:before,
 .hamburger:after {
     display: block;
     border-radius: 1px;
     background: currentColor;
     height: 2px;
     width: 100%;
 }
 
 .hamburger-line {
     margin: 6px 0;
 }
 
 .hamburger.is-active .hamburger-line {
     height: 0;
     margin: 0;
 }
 
 .hamburger.is-active:before,
 .hamburger.active:after {
     position: absolute;
     margin: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }
 
 .hamburger.is-active:before {
     transform: rotate(45deg);
 }
 
 .hamburger.is-active:after {
     transform: rotate(-45deg);
 }
 
 .app-menu__item--more {
     padding: .5rem 0;
     font-weight: bold;
     height: 2rem;
     padding: 0;
     opacity: 0;
     transition: opacity .35s ease 0s;
 }
 
 .app-menu__item--more a {
     font-size: 1rem;
     display: inline-flex;
     align-items: center;
     text-transform: none;
     font-weight: normal;
 }
 
 .app-menu__item--more a:after {
     display: none;
 }
 
 .app-menu.is-show .app-menu__item--more {
     opacity: 1;
     transition: opacity .35s ease .5s;
 }
 
 .menu-folder__more {
     position: relative;
     margin-right: -1.5rem;
     padding: 0;
 }
 
 .menu-folder__btn,
 .app-menu .more {
     display: none;
 }
 
 .nav-top__item.active>.nav-top__link {
     opacity: .5;
     color: inherit;
 }
 
 .nav-top__item.active>.nav-top__link:after {
     display: none;
 }
 
 .menu-folder__list {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     height: auto;
     z-index: 80;
     font-weight: bold;
     font-size: 1.125rem;
     text-transform: uppercase;
 }
 
 .menu-folder__list.-level-1 {
     top: 6rem;
     height: 100%;
     border-top: 1px solid var(--color-brand-light);
     background: var(--color-brand);
     transform: translate(-100%);
     transition: transform .25s ease;
     margin-top:1px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: left;
     height: 100%;
 }
 
 .menu-folder__list a {
     font-size: 2rem;
     font-weight: bold;
 }
 
 .menu-folder__back {
     position: absolute;
     top: 2rem;
     left: 1rem;
     padding: 0;
 }
 
 .menu-folder__btn svg {
     width: 2rem;
     height: 1.5rem;
 }
 
 .menu-folder__list .menu-folder__btn {
     display: block;
 }
 
 .menu-folder__list.-level-1.is-show {
     transform: translate(0%);
 }
 /* .menu-folder__list a:hover{color:var(--color-brand)}
*/
 
 .menu-folder__list a:after {
     background: var(--color-bg-accent);
     margin-top: 0;
 }
 
 @media screen and (max-width:47em) {
     .app-header .app-logo img {
         width: 5rem
     }
     .app-menu__list {
         width: 100%;
     }
 }
 
 @media screen and (min-width:47em) {
     .app-header__main {
         padding-top: .5rem;
         padding-bottom: 0;
     }
     .app-header__top {
         padding-top: 0;
         padding-bottom: 0;
     }
     .app-header__phone {
         --size: 1.5rem;
     }
     .app-header__callback {
         background: var(--color-bg);
         color: var(--color-brand);
         text-decoration: none;
         margin: .25rem 0;
         display: block;
         padding: .5rem 1rem;
         border-radius: .125rem;
         transition: background .25s ease, color .25s ease;
     }
     .app-header__callback:hover {
         background: var(--color-bg-accent);
         color: var(--color-base)!important;
         text-decoration: none;
     }
     .header-messengers {
         margin-right: 1rem;
     }
     .header-messengers .col {
         padding: 0 .5rem;
     }
 }
 
 @media screen and (min-width:63em) {
     .app-header{padding-bottom:.25rem;}
     .app-header__logo {
         margin-right: 0;
         margin-left: 0;
     }
     .app-header__btn .svg-icon {
         transform: none;
     }
     .app-menu {
         display: block;
         width: auto;
         position: static;
     }
     .app-menu {
         padding: 0;
         z-index: 1;
     }
     .app-menu:before,
     .app-menu:after {
         display: none;
     }
     .app-menu .app-menu__item {
         opacity: 1;
         width: auto;
         transform: none;
         transition: none;
     }
     .app-menu__list {
         padding: 0;
         font-size: 1rem;
         flex-direction: row;
         height:100%;
         align-items: center;
         justify-content: center;
     }
     .app-header__top,
     .app-header__main {
         grid-template-columns: 1fr auto 1fr;
     }
     .menu-folder{position:relative;}
     .menu-folder>.nav-top__link {
         position: relative;
         white-space: nowrap;
         padding-right: .75rem;
     }
     .menu-folder>.nav-top__link:before {
         content: '';
         display: inline-block;
         width: .35rem;
         height: .35rem;
         opacity: .75;
         border-bottom: 1px solid currentColor;
         border-right: 1px solid currentColor;
         transform: rotate(-45deg);
         transition: transform .25s ease;
         position: absolute;
         right: 0;
         top: 50%;
         margin-top: -.155rem;
     }
     .menu-folder:hover>.nav-top__link:before {
         transform: rotate(45deg) translateY(-2px);
     }
     .menu-folder:hover>a {
         color: #ffd483;
     }
     .menu-folder .menu-folder__list.-level-1 {
         display: none;
         transition: opacity .3s ease, display .3s ease allow-discrete;
     }
     .menu-folder__list {
         opacity: 0;
     }
     .menu-folder__list.-level-1 {
         top: 100%;width:auto; padding:.5rem;
         height:auto;
         transform: none;
         box-shadow: 0 1rem 2rem -.5rem rgba(0, 0, 0, .3);
     }
     @starting-style {
         .menu-folder:hover .menu-folder__list {
             opacity: 0;
         }
     }
     .menu-folder:hover .menu-folder__list {
         display: flex;
         opacity: 1;
     }
     .app-menu__item--more,
     .menu-folder .menu-folder__back,
     .menu-folder .menu-folder__more {
         display: none;
     }
     .menu-folder__list a {
            display:inline-block;
         font-size: 1rem;
         font-weight: normal;
         text-transform: none;
     }

     .nav-top__item{padding-left:.75rem; padding-right:.75rem;}
 }
 
 @media screen and (min-width:74em) {
     .app-menu__item {
         padding: 1rem;
     }
     .app-menu__list {
         font-size: 1.125rem;
     }
     .app-header__row {
         flex-wrap: nowrap;
     }
 }
 
 @media screen and (min-width:100em) {
     .app-menu__item {
         padding: 1rem 2vw;
     }
     .nav-top__item{padding-left:1rem; padding-right:1rem;}
 }