header {
    background-color: var(--fc-white) !important;
    font-family: var(--ff-body) !important;
}

header > .container {
    position: relative !important;
    height: var(--height-header) !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#header_1 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999 !important;
    display: flex !important;
    align-items: center !important;
}

#header_1 .component.logo,
#header_1 .imgcontent,
#header_1 a {
    display: flex !important;
    align-items: center !important;
}

#header_1 img {
    height: 35px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
}

#header_2 {
    width: 100% !important;
}

#header_2 nav {
    width: 100% !important;
}

#header_2 nav > ul.level_1 {
    width: 100% !important;
    height: var(--height-header) !important;
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#header_2 nav > ul.level_1 > li.level_1 {
    flex: 1 1 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header_2 nav > ul.level_1 > li.level_1 > a {
    height: var(--height-header) !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: var(--fc-primary) !important;
    font-family: var(--ff-body) !important;
    font-size: var(--fs-400) !important;
    font-weight: var(--fw-regular) !important;
    white-space: nowrap !important;
}

#header_2 nav > ul.level_1 > li.level_1 > a:hover,
#header_2 nav > ul.level_1 > li.level_1 > a.active_tree {
    color: var(--fc-primary) !important;
}

#header_2 nav > ul.level_1 > li.logo-spacer {
    flex: 0 0 var(--logo-gap, 220px) !important;
    pointer-events: none !important;
}

ul.level_2 {
    z-index: var(--z-3) !important;
}

/* =========================================================
   MEGA MENU 
   ========================================================= */

header {
    position: relative !important;
    z-index: var(--z-max) !important;
    background: var(--fc-white) !important;
}

/* Hide old dropdowns */
header ul.level_2 {
    display: none !important;
}

li.level_1.levels:hover ul.level_2 {
    display: none !important;
}

/* Panel */
header .mega-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--fc-white) !important;
    border-radius: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;

    z-index: var(--z-max) !important;

    /* Shadow from TOP (effect that menu is above header) */
    box-shadow: 0 -12px 30px rgba(0,0,0,.18), 0 18px 30px rgba(0,0,0,.08) !important;
}

header.mega-open .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* When mega is open -> header menu items become grey */
header.mega-open #header_2 nav > ul.level_1 > li.level_1 > a {
    color: #b5b5b5 !important;
}

/* Inner */
header .mega-menu .mega-inner {
    width: min(1400px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
    padding: 42px 0 !important;
    box-sizing: border-box !important;
}

/* Grid */
header .mega-menu .mega-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    column-gap: 56px !important;
    row-gap: 22px !important;
    align-items: start !important;
}

/* Columns */
header .mega-menu .mega-col {
    position: relative !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}

/* header .mega-menu .mega-col:first-child::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    height: 350px;
    background: var(--clr-accent) !important;
    opacity: .9 !important;
} */

/* Head */
header .mega-menu .mega-head {
    display: inline-block !important;
    margin-bottom: 18px !important;
    font-family: var(--ff-body) !important;
    font-size: var(--fs-400) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--clr-accent) !important;
    text-decoration: none !important;
}

/* List */
header .mega-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

header .mega-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Items */
header .mega-menu .mega-item {
    display: block !important;
    padding: 10px 0 !important;
    font-family: var(--ff-body) !important;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    color: var(--clr-comments-text) !important;
    text-decoration: none !important;
}

header .mega-menu .mega-item p {
    margin: 0 !important;
}

header .mega-menu .mega-item .nav_description {
    display: none !important;
}

header .mega-menu .mega-item:hover {
    color: var(--clr-accent) !important;
}

/* View all */
header .mega-menu .mega-viewall {
    display: inline-block !important;
    margin-top: 14px !important;
    color: var(--clr-accent) !important;
    font-family: var(--ff-body) !important;
    font-size: var(--fs-14) !important;
    font-weight: var(--fw-regular) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
    cursor: pointer !important;
}

/* Keep logo above */
#header_1 {
    z-index: 10000 !important;
}

/* Responsive */
@media (max-width: 1200px) {
    header .mega-menu .mega-inner {
        width: calc(100% - 24px) !important;
        padding: 28px 0 !important;
    }
    header .mega-menu .mega-grid {
        column-gap: 34px !important;
    }
}

@media (max-width: 1250px) {
    header .mega-menu {
        display: none !important;
    }
}

@media (max-width: 1250px) {
    header .mega-menu {
        display: none !important;
    }

    header.mega-open .mega-menu {
        display: none !important;
    }

    header .hamburger-menu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: var(--fc-white) !important;
        box-shadow: 0 18px 30px rgba(0,0,0,.12) !important;
        z-index: 9999 !important;
    }

    header .hamburger-menu ul.level_1 {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 14px 18px !important;
        list-style: none !important;
        box-sizing: border-box !important;
    }

    header .hamburger-menu li.level_1 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,.08) !important;
    }

    header .hamburger-menu li.level_1:last-child {
        border-bottom: 0 !important;
    }

    header .hamburger-menu li.level_1 a {
        display: block !important;
        width: 100% !important;
        padding: 12px 2px !important;
        text-decoration: none !important;
        color: #2f2f2f !important;
        font-family: var(--ff-body) !important;
        font-size: var(--fs-16) !important;
        font-weight: var(--fw-regular) !important;
        box-sizing: border-box !important;
    }

    header .hamburger-menu li.level_1 a:hover {
        color: var(--clr-accent) !important;
    }
}

@media (max-width: 500px) {
    header > .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #header_1 {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding-left: 12px !important;
        z-index: 10000 !important;
    }

    #header_1 img {
        height: 28px !important;
        width: auto !important;
        max-width: 160px !important;
    }

    #toggle_navigation {
        position: static !important;
        margin-left: auto !important;
        padding-right: 12px !important;
        z-index: 10001 !important;
    }
}