:root { --gh-admin-bar-height: 0px; --gh-color-bg: rgba(255, 255, 255, 0.9); --gh-color-bg-sub-1: #fff; --gh-color-bg-sub-2: #fff; --gh-color-border: #fff; --gh-color-text: #65615f; --gh-color-text-muted: #65615f; --gh-color-toggle: #e30613; --gh-color-toggle-active: #e30613; --gh-color-chevron: #e30613; } .gh-nav-mobile__wrap {
display: none;
}
body.gh-mobile-nav--open {
overflow: hidden;
}
@media (max-width: 992px) {
.gh-nav-mobile__wrap {
display: block; 
}
} .gh-nav-mobile__wrap .gh-nav-mobile__toggle {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 8px;
width: 40px;
height: 40px;
cursor: pointer;
position: relative;
z-index: 10001;
color: var(--gh-color-toggle);
transition: color 0.3s ease;
margin-left: auto;
margin-right: 0;
}
.gh-nav-mobile__wrap .gh-nav-mobile__toggle:hover,
.gh-nav-mobile__wrap .gh-nav-mobile__toggle:focus {
background: transparent !important;
color: var(--gh-color-toggle);
}
.gh-nav-mobile__wrap .gh-nav-mobile__toggle-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.gh-nav-mobile__wrap .gh-nav-mobile__toggle-bar {
width: 28px;
height: 2px;
background: currentColor;
display: block;
position: relative;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.gh-nav-mobile__wrap .gh-nav-mobile__toggle-bar:nth-child(2) {
margin: 5px 0;
} body.gh-mobile-nav--open .gh-nav-mobile__wrap .gh-nav-mobile__toggle {
color: var(--gh-color-toggle-active);
}
body.gh-mobile-nav--open .gh-nav-mobile__wrap .gh-nav-mobile__toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.gh-mobile-nav--open .gh-nav-mobile__wrap .gh-nav-mobile__toggle-bar:nth-child(2) {
opacity: 0;
}
body.gh-mobile-nav--open .gh-nav-mobile__wrap .gh-nav-mobile__toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}  .gh-nav-mobile {
display: block;
position: fixed;
z-index: 10000;
top: var(--gh-admin-bar-height, 0px);
left: 0;
width: 100%;
height: 100vh;
background: var(--gh-color-bg);
overflow-y: auto;
padding: 130px 30px 50px;
visibility: hidden;
transform: translateY(-100%);
}
.gh-nav-mobile.is-ready {
transition: transform 0.3s ease;
}
.gh-nav-mobile.gh-nav-mobile--open {
visibility: visible;
transform: translateY(0);
} .fl-page {
opacity: 1;
transition: opacity 0.3s ease;
}
.fl-page.is-fading-out {
opacity: 0;
} .gh-nav-mobile__list {
list-style: none;
margin: 0;
padding: 0;
}
.gh-nav-mobile .gh-nav-mobile__list li {
position: relative;
border-bottom: 5px solid var(--gh-color-border);
}
.gh-nav-mobile a {
display: block;
padding: 5px 30px;
text-decoration: none !important;
color: var(--gh-color-text) !important;
font-weight: 400;
font-size: 25px;
transition: color 0.3s ease;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.gh-nav-mobile a:hover,
.gh-nav-mobile a:focus {
color: var(--gh-color-text) !important;
} .gh-nav-mobile .menu-item-has-children > a::after {
content: '';
position: absolute;
right: 5px;
top: 50%;
width: 8px;
height: 8px;
border-style: solid;
border-color: var(--gh-color-chevron);
border-width: 0 2px 2px 0;
transform: translateY(-50%) rotate(45deg);
transition: transform 0.3s ease-out;
}
.gh-nav-mobile li.submenu-is-open > a::after {
transform: translateY(-50%) rotate(135deg);
}
.gh-nav-mobile .sub-menu {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}
.gh-nav-mobile li.submenu-is-open > .sub-menu {
max-height: 3600px;
padding: 0;
}
.sub-menu li {
padding: 5px 0;
} .gh-nav-mobile > .gh-nav-mobile__list > li > .sub-menu {
padding-left: 0;
background: var(--gh-color-bg-sub-1);
}
.gh-nav-mobile .sub-menu .sub-menu {
padding-left: 1rem;
background: var(--gh-color-bg-sub-2);
}
.gh-nav-mobile .sub-menu a {
font-size: 16px;
line-height: 1;
font-weight: 400 !important;
padding: 10px 15px;
}
.gh-nav-mobile .sub-menu .menu-item-has-children > a::after {
right: 15px;
}
.gh-nav-mobile .sub-menu .sub-menu .gh-nav-mobile__link-text {
color: var(--gh-color-text-muted) !important;
font-size: 14px;
}
.gh-nav-mobile .sub-menu .sub-menu li {
border-bottom: 1px solid var(--gh-color-border);
}