:root{
    --white:#fff;
    --input-border:#f5f5f5;
    --main-color:var(--main);
    --svg-gray:#777777;
    --input-background-hover: #f2f2f2;
    --border--dark: #ddd;
}

#menu-wrapper {overflow: hidden;max-width: 60px;cursor: pointer;display: none}
#menu-wrapper #hamburger-menu {position: relative;width: 25px;height: 20px;margin: 15px;}
#menu-wrapper #hamburger-menu span {opacity: 1;left: 0;display: block;width: 100%;height: 2px;border-radius: 10px;color: black;background-color: white;position: absolute;transform: rotate(0deg);transition: .4s ease-in-out;}
#menu-wrapper #hamburger-menu span:nth-child(1) {top: 0;}
#menu-wrapper #hamburger-menu span:nth-child(2) {top: 9px;}
#menu-wrapper #hamburger-menu span:nth-child(3) {top: 18px;}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {transform: translateY(9px) rotate(135deg);}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {opacity: 0;transform: translateX(-60px);}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {transform: translateY(-9px) rotate(-135deg);}

.menu--background {position: fixed;top: 0;right: 0;width: 10%;height: 100vh;background-color: rgba(0,0,0,0.5);display: block;transform: translateX(-1000px);visibility: hidden;z-index: 101;transition: .4s;}

#v--menu *{box-sizing: border-box;list-style-type: none;padding: 0;margin: 0;font-size: 14px;user-select: none}
#v--menu a:hover {color:#121212;}
#v--menu > a:hover {color:var(--white);}
#v--menu svg {-moz-transition: none;-webkit-transition: none;-o-transition: none;-ms-transition: none}
#v--menu{width: 100%;float: none;flex-basis: 100%;max-width: 100%;padding: 0;margin: 0}
#v--menu > a, .catalog--menu-mobile-box .menu--first-level.opened > a{padding: 15px 15px;background-color: var(--main-color);display: block;width: 100%;color: var(--white);text-align: center;font-size: 14px;}
#v--menu > a, .catalog--menu-mobile-box .menu--first-level.opened > a{padding-right: 40px !important;}
#v--menu > a > svg {float: left;transform: rotate(90deg);fill: var(--white);width: 12px;height: 12px;margin-right: 10px;margin-top: 2px;}
#v--menu ul {width: 100%;}
#v--menu li {width: 100%;flex-basis: 100%;max-width: 100%;padding: 0;margin: 0;position: relative}

#v--menu > li{border-bottom: 1px solid var(--input-border);}
#v--menu  li{border-bottom: 1px solid var(--input-border);}
.js--vertical-menu-close{position: absolute;top: 3px;right: 10px;stroke: var(--white);width: 40px;height: 40px;cursor: pointer;z-index: 170;display: flex;align-items: center;justify-content: center}
.js--vertical-menu-close svg{width: 35px;height: 35px;fill:var(--white)}
#v--menu ul {display: none;}
#v--menu .v--menu-content > ul {display: block;}

#v--menu a {width: 100%;text-decoration: none;padding: 15px 55px 15px 15px;display: flex;color:#000}
#v--menu > a {color:#fff}
#v--menu .svg--menu-arrow{width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;position: absolute;right: 10px;top:50%;transform: translateY(-50%);z-index: 1}
#v--menu .opened > .svg--menu-arrow{right: auto;top:0;transform: translateY(0)}
#v--menu .opened > .svg--menu-arrow svg{right: auto;top:10px;transform: translateY(0) rotate(90deg);fill:#fff}
#v--menu .svg--menu-arrow svg{transform: rotate(-90deg);width: 12px;height: 12px;}

#v--menu > a > .svg--menu-arrow,
#v--menu li.opened > .menu--box-contacts .svg--menu-arrow,
#v--menu li.opened > a > .svg--menu-arrow{float: left;transform: rotate(180deg);fill: var(--white);width: 30px;height: 30px;margin-right: 10px;margin-top: -5px;display: flex;align-items: center;justify-content: center}

#v--menu > a > .svg--menu-arrow svg,
#v--menu li.opened > .menu--box-contacts .svg--menu-arrow svg,
#v--menu li.opened > a > .svg--menu-arrow svg{width: 18px;height: 18px;}

#v--menu li.opened > .menu--box-contacts img,
#v--menu li.opened > .menu--box-contacts .menu--left {display:none}


#v--menu li.opened{position: absolute;top: 0;left: 0;width: 100%;z-index: 150;height: 100%;background-color: #fff}

#v--menu li.opened > .menu--box-contacts a,
#v--menu li.opened > a
{padding: 15px 50px 15px 45px;background-color: var(--main-color);display: flex;width: 100%;color: var(--white);text-align: center;box-sizing: border-box;font-size: 16px}

#v--menu li:not(.opened) > a > .svg--menu-arrow{margin-left: auto}
#v--menu li.opened > a .menu--section-icon {display: none}

#v--menu li.opened > a > .svg--menu-arrow {-webkit-box-ordinal-group: 2;-webkit-order: 1;-ms-flex-order: 1;order: 1;}
#v--menu li.opened > a > span {-webkit-box-ordinal-group: 3;-webkit-order:2;-ms-flex-order: 2;order: 2;}

#v--menu .menu--section-icon {width: 24px;height: 24px;margin-right: 7px}
.menu--section-icon svg {fill:var(--svg-gray)}
.hamburger--menu-box {width:var(--height);height:var(--height);user-select: none;display: flex;align-items: center;justify-content: center;border-radius: 12px;background-color: #e6f5f5}
.hamburger--menu-box i {display: flex}
.hamburger--menu-box svg{fill:var(--text-main)}
.hamburger--menu-box:not(.open) .close{display: none}
.hamburger--menu-box.open i{display: none}
.hamburger--menu-box.open i.close{display: block}

.clicked > li:not(.opened) {display: none}

#v--menu .menu--box{border-bottom: 1px solid var(--border-dark)}
#v--menu .menu--box:last-child{border-bottom: 1px solid transparent}
#v--menu .menu--box.gray{background-color: var(--input-background-hover)}

#v--menu li.opened > ul {display: block}

.root-item-selected {color:var(--main-color)}

.header--mobile-buttons{display: none;width: 50px;height: 100%}

.v--menu-top {background-color: var(--main-color)}
#v--menu .v--menu-top a{color: #fff;padding-left: 45px;font-size: 16px;}
#v--menu .v--menu-top .svg--menu-arrow{right: auto;top:0;transform: translateY(0)}
#v--menu .v--menu-top .svg--menu-arrow svg{transform: rotate(90deg);width: 12px;height: 12px;fill:#fff}

#v--menu .menu--picture{margin-right: 15px;width: 18px;height: auto}

#v--menu .menu--left {display: flex;padding: 15px 10px 10px 10px;align-items: flex-start;justify-content: center}
#v--menu .menu--left img{width: 100%}
#v--menu .menu--left svg{width: 20px;height: 20px;fill:var(--main-color)}

#v--menu .menu--box-contacts a{padding:15px 15px 15px 10px}
#v--menu .menu--box-contacts a:nth-child(n+2){padding-top:0;}

.menu--box-contacts {display: flex}
.menu--box-contacts .menu--left{width: 40px;}
.menu--box-contacts .menu--right{width: calc(100% - 40px);}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
    width: 28px;
    height: 3px;
}

.hamburger-menu {position: relative;transform: translateY(15px);background: #fff;transition: all 0ms 300ms;user-select: none}
.hamburger-menu.animate {background: rgba(255, 255, 255, 0);}
.hamburger-menu:before {content: "";position: absolute;left: 0;bottom: 9px;background: #fff;transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger-menu:after {content: "";position: absolute;left: 0;top: 9px;background: #fff;transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger-menu.animate:after {top: 0;transform: rotate(45deg);transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger-menu.animate:before {bottom: 0;transform: rotate(-45deg);transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);}

.header--fixed-menu {z-index: 103;display: block;position: fixed;top: 0;left: 0;transform: translateX(calc(-100% - 3px));opacity: 1;height: 100vh;padding-bottom: 70px;width: 90%;background-color: var(--white);overflow-y: auto;transition: .4s;}


@media screen and (max-width: 1000px) {
    .header--mobile-buttons{display: flex;align-items: center;justify-content: center}
    #menu-wrapper {display: block}

    .header--mobile-buttons.opened .header--fixed-menu {transform: translateX(0)  translate3d(0,0,0);}
    .header--mobile-buttons .menu--background {position: fixed;top:0;right:0;width: 10%;height: 100vh;background-color: rgba(0,0,0,0.5);display: block;transform: translateX(-1000px);visibility: hidden;z-index: 9;transition: .4s}
    .header--mobile-buttons.opened .menu--background {transform: translateX(0px);visibility: visible}
}