.header-hamburger__item {
display: flex;
width: 100%;
height: 2px;
background-color: #252525;
position: relative
}
.header-hamburger {
display: flex;
width: 27px;
flex-direction: column;
outline: 0;
background-color: #fff;
border: none;
padding: 0;
flex-shrink: 0
}
.header__area-2 {
padding: 12px 20px;
display: flex;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
gap: 11px;
align-items: center
}
.header-hamburger__item:before {
display: flex;
width: 100%;
height: 2px;
background-color: #252525;
content: '';
position: absolute;
top: -12px
}
.header-hamburger__item:after {
display: flex;
width: 100%;
height: 2px;
background-color: #252525;
content: '';
display: flex;
position: absolute;
bottom: -12px
}
.header__area-2__logo {
height: 30px;
max-width: 100%;
object-fit: contain
}
.header {
font-family: Montserrat;
position: relative;
z-index: 3
}
.header__area-1_mobile_hidden {
display: none
}
.header-side-section {
width: 100%;
background: 0 0;
position: fixed;
height: 100%;
z-index: 3;
will-change: left;
transition: left 1s cubic-bezier(.23, 1, .32, 1);
font-family: Montserrat
}
.header-side-section[data-state=hidden] {
left: -100%
}
.header-side-section[data-state=visible][data-state-next=hidden] {
left: -100% !important
}
.header-side-section[data-state=visible] {
left: 0
}
.header-side-section[data-state=hidden][data-state-next=visible] {
left: 0 !important
}
.header-side-section__content {
max-width: 260px;
background-color: #fff;
height: 100%;
position: relative;
z-index: 2;
box-shadow: rgba(0, 0, 0, .1) 2px 0 5px 0;
display: flex;
flex-direction: column;
align-items: center
}
.header-side-section__panel {
background: #fff;
position: fixed;
right: 0;
height: 54px;
width: calc(100% - 260px);
display: flex;
align-items: center;
padding-left: 20px;
box-shadow: rgba(0, 0, 0, .2) 0 0 10px 0
}
.header-side-section__panel[data-state=hidden] {
display: none
}
.header-hamburger_close > .header-hamburger__item {
background: 0 0
}
.header-hamburger_close > .header-hamburger__item:before {
top: 0;
transform: rotate(-45deg);
transform-origin: center center
}
.header-hamburger_close > .header-hamburger__item:after {
top: 0;
transform: rotate(45deg);
transform-origin: center center
}
.header-side-section__logo {
padding: 14px 28px
}
.header-side-section__widgets {
width: 100%
}
.header-mobile-menu__nav {
display: flex;
align-items: center;
width: 100%;
position: relative;
justify-content: space-between
}
.header-mobile-menu__item_has-children {
display: flex;
flex-direction: column
}
.header-mobile-menu__button {
display: flex;
width: 10px;
height: 16px;
background: 0 0;
padding: 0;
border: none;
position: absolute;
z-index: 3;
right: .5em;
font-size: 13px;
transform-origin: center center;
will-change: transform;
transition: transform .3s ease-in-out
}
.header-mobile-menu__button[data-state=expanded] {
transform: rotate(180deg)
}
.header-mobile-menu__button:disabled {
opacity: 1
}
.header-mobile-menu__link {
flex-grow: 1
}
.header-mobile-menu__item {
width: 100%
}
.header-mobile-menu {
width: 100%
}
.header-side-section__menu {
width: 100%
}
.header-mobile-menu__link {
font-size: 13px;
color: #252525;
font-weight: 400;
text-transform: uppercase;
padding: 1em 2em;
position: relative;
width: 100%;
z-index: 2;
display: flex;
text-align: center;
justify-content: center
}
.header-mobile-menu__icon {
width: 100%;
height: 100%
}
.header-mobile-menu__icon {
fill: #252525
}
.header-mobile-menu__icon {
fill: #252525
}
.header-mobile-menu__items {
overflow: hidden
}
.header-mobile-menu__items {
will-change: height
}
.header-mobile-menu__items[data-state=collapsed] {
height: 0
}
.header-mobile-menu__items[data-state=expanded] {
height: initial
}
.header-mobile-menu__items[data-state-has-transition] {
transition: height .2s ease-out
}
.header__area-2__menu_mobile_hidden {
display: none
}
.header-hamburger_open:hover .header-hamburger__item:before {
top: -15px;
}
.header-hamburger_open:hover .header-hamburger__item:after {
bottom: -15px;
}
.header-hamburger_open .header-hamburger__item:before {
transition: top 300ms ease;
}
.header-hamburger_open .header-hamburger__item:after {
transition: bottom 300ms ease;
}
.header-hamburger {
height: 28px;
display: flex;
justify-content: center;
}
@media (min-width: 1200px) {
.desktop-menu__items {
position: absolute
}
.desktop-menu__items[data-state=collapsed] {
opacity: 0;
z-index: -1;
tab-index: -1;
top: calc(100% + 20px);
pointer-events: none
}
.header__area-1 {
display: flex
}
.desktop-menu__item {
position: relative;
color: #252525;
font-weight: 500;
text-transform: uppercase;
font-size: 13px
}
.header__hamburger_desktop_hidden {
display: none
}
.header__area-2 {
display: flex;
justify-content: space-between;
padding-left: 50px;
padding-right: 50px;
grid-template-columns:max-content 1fr;
align-items: stretch
}
.header__area-2__menu {
display: flex;
height: auto;
justify-content: stretch;
flex-direction: column
}
.desktop-menu {
gap: 50px;
display: flex;
flex: 1;
align-items: flex-end
}
.desktop-menu__link:any-link {
color: inherit
}
.header__area-2 {
padding-top: 0;
padding-bottom: 0
}
.header__area-2__logo {
height: 78px;
padding-top: 20px;
padding-bottom: 20px
}
.desktop-menu-items {
display: flex;
flex-direction: column;
will-change: bottom, opacity
}
.desktop-menu__items-content {
background: #fff;
box-shadow: rgb(0 0 0 / 20%) 0 0 10px 0, #51acfb 0 5px 0 0 inset;
width: 220px
}
.desktop-menu__item {
padding: 1em 1.5em
}
.desktop-menu__item_level_1 {
padding: 0
}
.desktop-menu__items_level_1 {
top: 100%
}
.desktop-menu__items_level_1 {
top: 0;
left: 0;
}
.desktop-menu__item:last-child > .desktop-menu__items_level_1 {
left: initial;
right: 0;
}
.desktop-menu__items:not(.desktop-menu__items_level_1) {
top: 0;
left: 100%
}
.desktop-menu__item:not(.desktop-menu__item_level_1):hover:after {
display: flex;
content: '';
width: 5px;
background-color: rgb(81 172 251);
height: 100%;
position: absolute;
left: 0;
top: 0
}
.desktop-menu__items[data-state=collapsed] {
opacity: 0;
top: calc(-5px + 20px);
z-index: -1
}
.desktop-menu__items[data-level="1"][data-state=collapsed] {
opacity: 0;
top: calc(100% + 20px);
z-index: -1
}
.desktop-menu__items[data-state=expanded] {
opacity: 1;
top: -5px;
transform: initial;
z-index: 9
}
.desktop-menu__items[data-level="1"][data-state=expanded] {
opacity: 1;
top: 100%;
transform: initial
}
.desktop-menu__items[data-state-has-transition] {
z-index: 1;
pointer-events: initial;
tab-index: initial;
transition: opacity .3s ease, top .3s ease
}
.desktop-menu__item {
display: flex;
flex-direction: column;
font-size: 13px;
line-height: 1
}
.desktop-menu__item.desktop-menu__item_level_1 {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: calc(50% + .5em);
line-height: 1
}
.desktop-menu__link {
line-height: 1
}
.desktop-menu__items-content {
padding-top: 5px
}
.desktop-menu__link:hover {
color: #51acfb
}
.desktop-menu__link:not(.desktop-menu__link_level_1) {
padding: 1em 1.5em
}
.desktop-menu__link:not(.desktop-menu__link_level_1):after {
content: ' ';
display: block;
position: absolute;
bottom: 0;
height: 1px;
background-color: rgba(0, 0, 0, .1);
width: calc(100% - 3em);
top: calc(100%);
font-size: 13px;
line-height: 1;
opacity: .4;
left: 1.5em
}
.desktop-menu__item:not(.desktop-menu__link_level_1) {
padding: 0
}
.desktop-menu__link {
position: relative;
display: flex
}
.desktop-menu__item_level_1 {
display: flex;
position: relative
}
.desktop-menu__item_level_1:not(:last-child):after {
content: '/';
position: absolute;
right: -28px;
opacity: .5
}
.header__area-2 {
height: 90px;
}
.header__logo-link {
height: 90px;
align-items: center;
}
.desktop-menu__link:not(.desktop-menu__link_level_1) {
line-height: 1.6;
}
}
.header__logo-link {
display: flex;
height: max-content
}
.desktop-menu__item_level_1.desktop-menu__item_active {
border-bottom: 4px solid #51acfb
}
.desktop-menu__link-span {
font-weight: 500
}
.desktop-menu__item.active {
position: relative
}
.desktop-menu__item.active:before {
width: 100%;
content: '';
height: 4px;
opacity: 1;
background-color: #51acfb;
bottom: 0;
left: 0;
position: absolute
}