.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-hamburger {
height: 28px;
display: flex;
justify-content: center;
}
.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-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__area-2__logo {
height: 38px;
max-width: 100%;
object-fit: contain
}
.header {
font-family: Montserrat;
position: relative;
z-index: 2
}
.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;
height: auto
}
.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__logo-link {
display: flex;
height: max-content
}