.page-header .top-header .top-content .nav-wrapper-right .mobile.init-in-progress,
.top-header .top-content .nav-wrapper-right .mobile.init-in-progress {
display: none;
}
@media (max-width: 1366px) {
.page-header .top-header .top-content .nav-wrapper-right .mobile.init-in-progress,
.top-header .top-content .nav-wrapper-right .mobile.init-in-progress {
display: block;
}
}
.mobile-main-navigation-component {
display: none;
}
@media (max-width: 1366px) {
.mobile-main-navigation-component {
display: flex;
align-items: center;
position: absolute;
right: 0;
top: 0;
z-index: 30;
padding: 1.1em 1.25em 1em;
}
}
.mobile-main-navigation-component .trigger {
display: inline-block;
cursor: pointer;
position: relative;
z-index: 40;
padding-right: 7px;
transition: all 0.3s ease;
}
.mobile-main-navigation-component .trigger .mobile-menu-trigger {
display: block;
}
.mobile-main-navigation-component .trigger .bar1,
.mobile-main-navigation-component .trigger .bar2,
.mobile-main-navigation-component .trigger .bar3 {
width: 25px;
height: 3px;
background-color: var(--baseFontColor, #333);
margin: 4px 0;
transition: 0.4s;
border-radius: 5px;
}
body.home .mobile-main-navigation-component .trigger:not(.active) .bar1,
body.home .mobile-main-navigation-component .trigger:not(.active) .bar2,
body.home .mobile-main-navigation-component .trigger:not(.active) .bar3 {
background-color: #fff;
}
.mobile-main-navigation-component .trigger.active {
position: fixed;
right: 12px;
top: 12px;
padding: 0;
}
.mobile-main-navigation-component .trigger.active .bar1,
.mobile-main-navigation-component .trigger.active .bar2,
.mobile-main-navigation-component .trigger.active .bar3 {
background-color: #fff;
}
.mobile-main-navigation-component .trigger.active .bar1 {
transform: rotate(-45deg) translate(-2px, 2px);
}
.mobile-main-navigation-component .trigger.active .bar2 {
opacity: 0;
}
.mobile-main-navigation-component .trigger.active .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
} .mobile-main-navigation-component .overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 35;
width: min(100%, 420px);
min-width: 250px;
height: 100vh;
margin: 0;
padding: 3em 0 2em;
overflow-x: hidden;
overflow-y: auto;
list-style: none;
background-color: var(--baseFontColor, #292929);
border-right: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
transform: translateX(100%);
transition: transform 0.45s ease;
pointer-events: none;
visibility: hidden;
}
.mobile-main-navigation-component .overlay.active {
transform: translateX(0);
pointer-events: auto;
visibility: visible;
}
.mobile-main-navigation-component .overlay .logo-mobile {
padding: 0 2em 1.5em;
}
.mobile-main-navigation-component .overlay .logo-mobile img,
.mobile-main-navigation-component .overlay .logo-mobile picture {
max-width: 180px;
height: auto;
}
.mobile-main-navigation-component .overlay .nav {
border-top: 1px solid rgba(255, 255, 255, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
padding: 1em 0;
width: 100%;
}
.mobile-main-navigation-component .overlay .nav .menu,
.mobile-main-navigation-component .overlay .nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-main-navigation-component .overlay .nav .menu-item {
margin: 0;
}
.mobile-main-navigation-component .overlay .nav a {
display: block;
padding: 0.55em 2em;
color: #fff;
text-decoration: none;
}
.mobile-main-navigation-component .overlay .nav .text,
.mobile-main-navigation-component .overlay .nav .indicator {
color: #fff;
}
.mobile-main-navigation-component .overlay .nav .sub-menu {
list-style: none;
margin: 0;
padding: 0 0 0 1em;
overflow: hidden;
max-height: 0;
transition: max-height 0.45s ease;
}
.mobile-main-navigation-component .overlay .nav .menu-item-has-children.open > .sub-menu,
.mobile-main-navigation-component .overlay .nav .sub-menu.active {
max-height: 100vh;
}
.mobile-main-navigation-component .overlay .nav .sub-menu a {
background-color: #fff;
color: var(--baseFontColor, #292929);
}
.mobile-main-navigation-component .overlay .nav .sub-menu a .text {
color: var(--baseFontColor, #292929);
}
.mobile-main-navigation-component .overlay .nav .dropdown-indicator {
display: none;
}
.mobile-main-navigation-component .overlay .mobile-hero-navbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em;
padding: 1.5em 1em 0;
}
.mobile-main-navigation-component .overlay .mobile-hero-navbar .nav-item {
color: #fff;
}
.admin-bar .mobile-main-navigation-component .overlay {
padding-top: 5em;
}
.admin-bar .mobile-main-navigation-component .trigger.active {
top: calc(12px + 32px);
}
@media (max-width: 782px) {
.admin-bar .mobile-main-navigation-component .trigger.active {
top: calc(12px + 46px);
}
}