/* =========================================================
   COLÓN CUSTOM HEADER — 1.2.0
   Por Adrian Nieves [Plazmedia]
   ========================================================= */

#colon-custom-header {
    --colon-purple: #470a68;
    --colon-text: #625c66;
    --colon-border: rgba(71, 10, 104, .10);

    position: relative !important;
    z-index: 999999 !important;

    display: block !important;

    width: 100% !important;

    height:
        var(--colon-header-height, 88px) !important;

    min-height:
        var(--colon-header-height, 88px) !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        var(--colon-header-background, #fff) !important;

    border: 0 !important;

    border-bottom:
        1px solid var(--colon-border) !important;

    box-sizing: border-box !important;

    transition:
        height .22s ease,
        min-height .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


#colon-custom-header,
#colon-custom-header *,
#colon-custom-header *::before,
#colon-custom-header *::after {
    box-sizing: border-box !important;
}


/* =========================================================
   FLUIDA
   ========================================================= */

html body #masthead,
html body header#masthead,
html body #site-wrapper > #masthead {
    display: none !important;

    visibility: hidden !important;

    width: 0 !important;

    height: 0 !important;

    min-height: 0 !important;

    max-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   STICKY
   ========================================================= */

#colon-custom-header.colon-header--sticky {
    position: sticky !important;

    top: 0 !important;
}


#colon-custom-header.colon-header--sticky.is-scrolled {
    height:
        var(--colon-header-sticky-height, 72px) !important;

    min-height:
        var(--colon-header-sticky-height, 72px) !important;

    box-shadow:
        0 8px 28px
        rgba(25, 12, 35, .10) !important;
}


#colon-custom-header.is-scrolled
.colon-header__logo-image {
    max-height:
        calc(
            var(--colon-header-sticky-height, 72px)
            - 16px
        ) !important;
}


/* =========================================================
   INNER
   ========================================================= */

#colon-custom-header .colon-header__inner {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    max-width: 1440px !important;

    height: 100% !important;

    margin: 0 auto !important;

    padding:
        0
        var(--colon-header-padding, 32px) !important;

    gap: 28px !important;
}


/* =========================================================
   BRANDING / LOGO
   ========================================================= */

#colon-custom-header .colon-header__branding {
    display: flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;

    width: auto !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


#colon-custom-header .colon-header__logo {
    display: flex !important;

    align-items: center !important;

    width: auto !important;

    max-width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    line-height: 0 !important;

    text-decoration: none !important;
}


#colon-custom-header .colon-header__logo-image {
    display: block !important;

    width:
        var(--colon-header-logo-width, 270px) !important;

    max-width:
        var(--colon-header-logo-width, 270px) !important;

    height: auto !important;

    max-height:
        calc(
            var(--colon-header-height, 88px)
            - 16px
        ) !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: contain !important;
}


/* =========================================================
   NAV
   ========================================================= */

#colon-custom-header .colon-header__nav {
    display: flex !important;

    flex: 1 1 auto !important;

    align-items: center !important;

    justify-content: flex-end !important;

    width: auto !important;

    height: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;
}


#colon-custom-header ul.colon-header__menu {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    justify-content: flex-end !important;

    width: auto !important;

    max-width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;
}


#colon-custom-header ul.colon-header__menu li {
    list-style: none !important;
}


/* =========================================================
   TOP LEVEL ITEMS
   ========================================================= */

#colon-custom-header
ul.colon-header__menu
> li {
    position: relative !important;

    display: flex !important;

    align-items: stretch !important;

    width: auto !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


#colon-custom-header
ul.colon-header__menu
> li
> .colon-menu-link {
    position: relative !important;

    z-index: 2 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: auto !important;

    height: 100% !important;

    min-height: 44px !important;

    margin: 0 !important;

    padding:
        0 15px !important;

    color:
        var(--colon-header-menu-color, #4b4b4b) !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    font-family: inherit !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition:
        color .16s ease,
        background .16s ease !important;
}


#colon-custom-header
ul.colon-header__menu
> li:hover
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
> li:focus-within
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
> li.is-open
> .colon-menu-link {
    color:
        var(--colon-header-menu-hover, #fd6125) !important;

    background: transparent !important;
}


#colon-custom-header
ul.colon-header__menu
> li.current-menu-item
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
> li.current-menu-ancestor
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
> li.current-menu-parent
> .colon-menu-link {
    color:
        var(--colon-header-menu-active, #fd6125) !important;
}


/* =========================================================
   ARROW / CHEVRON
   ========================================================= */

#colon-custom-header
.colon-submenu-toggle {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 24px !important;

    width: 24px !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


#colon-custom-header
.colon-submenu-toggle::before,

#colon-custom-header
.colon-submenu-toggle::after {
    content: none !important;
    display: none !important;
}


#colon-custom-header ul.colon-header__menu > li > .colon-submenu-toggle {
    position: relative !important;
    z-index: 3 !important;

    flex: 0 0 24px !important;
    width: 24px !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: auto !important;
    cursor: pointer !important;

    color: inherit !important;
    background: transparent !important;
}


/* SVG si el walker lo genera */

#colon-custom-header
.colon-submenu-toggle
svg {
    display: block !important;

    width: 13px !important;

    height: 13px !important;

    fill: none !important;

    background: transparent !important;

    stroke: currentColor !important;

    stroke-width: 1.7 !important;

    stroke-linecap: round !important;

    stroke-linejoin: round !important;

    transition:
        transform .18s ease,
        color .18s ease !important;
}


#colon-custom-header
li:hover
> .colon-submenu-toggle,

#colon-custom-header
li:focus-within
> .colon-submenu-toggle,

#colon-custom-header
li.is-open
> .colon-submenu-toggle {
    color:
        var(--colon-header-menu-hover, #fd6125) !important;

    background: transparent !important;
}


/* =========================================================
   SUBMENUS
   SIN HUECO ENTRE PADRE E HIJO
   ========================================================= */

#colon-custom-header
ul.colon-header__menu
ul.sub-menu {
    position: absolute !important;

    top: 100% !important;

    left: 0 !important;

    z-index: 1000000 !important;

    display: block !important;

    width: 270px !important;

    min-width: 270px !important;

    height: auto !important;

    margin: 0 !important;

    padding: 8px !important;

    background:
        var(
            --colon-header-submenu-background,
            #fff
        ) !important;

    border:
        1px solid
        rgba(71, 10, 104, .08) !important;

    border-radius: 12px !important;

    box-shadow:
        0 18px 45px
        rgba(30, 15, 45, .14) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform:
        translateY(-5px) !important;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease !important;
}


#colon-custom-header
ul.colon-header__menu
> li:hover
> ul.sub-menu,

#colon-custom-header
ul.colon-header__menu
> li:focus-within
> ul.sub-menu,

#colon-custom-header
ul.colon-header__menu
> li.is-open
> ul.sub-menu {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform:
        translateY(0) !important;
}


/* =========================================================
   SUBMENUS MULTINIVEL
   ========================================================= */

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
ul.sub-menu {
    top: -9px !important;
    left: calc(100% - 1px) !important;

    margin-left: 0 !important;
}

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;
}


#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li
> .colon-menu-link {
    position: relative !important;

    z-index: 1 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: 100% !important;

    min-height: 42px !important;

    margin: 0 !important;

    padding:
        9px 36px 9px 12px !important;

    color:
        var(
            --colon-header-submenu-color,
            #5b5b5b
        ) !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 8px !important;

    font-size: 13px !important;

    line-height: 1.3 !important;

    text-decoration: none !important;

    white-space: normal !important;

    transition:
        color .16s ease,
        background .16s ease !important;
}


#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li:hover
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li:focus-within
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.is-open
> .colon-menu-link {
    color:
        var(
            --colon-header-submenu-hover,
            #fd6125
        ) !important;

    background:
        var(
            --colon-header-submenu-hover-bg,
            #f4f4f4
        ) !important;
}


#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.current-menu-item
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.current-menu-ancestor
> .colon-menu-link,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.current-menu-parent
> .colon-menu-link {
    color:
        var(
            --colon-header-submenu-active,
            #fd6125
        ) !important;

    background:
        var(
            --colon-header-submenu-active-bg,
            #f4f4f4
        ) !important;
}


/* =========================================================
   FLECHA DE SUBMENÚ
   ========================================================= */

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li
> .colon-submenu-toggle {
    position: absolute !important;

    top: 0 !important;

    right: 2px !important;

    width: 34px !important;

    height: 100% !important;

    z-index: 3 !important;

    margin: 0 !important;

    pointer-events: none !important;

    color:
        var(
            --colon-header-submenu-color,
            #5b5b5b
        ) !important;

    background: transparent !important;
}


#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li
> .colon-submenu-toggle
svg {
    transform:
        rotate(-90deg) !important;
}


#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li:hover
> .colon-submenu-toggle,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li:focus-within
> .colon-submenu-toggle,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.is-open
> .colon-submenu-toggle {
    color:
        var(
            --colon-header-submenu-hover,
            #fd6125
        ) !important;

    background: transparent !important;
}


#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.current-menu-item
> .colon-submenu-toggle,

#colon-custom-header
ul.colon-header__menu
ul.sub-menu
li.current-menu-ancestor
> .colon-submenu-toggle {
    color:
        var(
            --colon-header-submenu-active,
            #fd6125
        ) !important;

    background: transparent !important;
}


/* =========================================================
   BURGER
   ========================================================= */

#colon-custom-header
.colon-header__toggle {
    display: none !important;

    position: relative !important;

    flex: 0 0 44px !important;

    width: 44px !important;

    height: 44px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    border-radius: 0 !important;

    cursor: pointer !important;

    appearance: none !important;

    -webkit-appearance: none !important;
}


#colon-custom-header
.colon-header__toggle
span {
    position: absolute !important;

    left: 10px !important;

    width: 24px !important;

    height: 2px !important;

    background:
        var(
            --colon-header-burger,
            #5b1b83
        ) !important;

    border-radius: 10px !important;

    transition:
        top .18s ease,
        transform .18s ease,
        opacity .18s ease !important;
}


#colon-custom-header
.colon-header__toggle
span:nth-child(1) {
    top: 13px !important;
}


#colon-custom-header
.colon-header__toggle
span:nth-child(2) {
    top: 21px !important;
}


#colon-custom-header
.colon-header__toggle
span:nth-child(3) {
    top: 29px !important;
}


#colon-custom-header
.colon-header__toggle.is-active
span:nth-child(1) {
    top: 21px !important;

    transform:
        rotate(45deg) !important;
}


#colon-custom-header
.colon-header__toggle.is-active
span:nth-child(2) {
    opacity: 0 !important;
}


#colon-custom-header
.colon-header__toggle.is-active
span:nth-child(3) {
    top: 21px !important;

    transform:
        rotate(-45deg) !important;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    #colon-custom-header
    .colon-header__inner {
        padding:
            0
            var(
                --colon-header-padding,
                22px
            ) !important;

        gap: 16px !important;
    }


    #colon-custom-header
    .colon-header__toggle {
        display: block !important;
    }


    #colon-custom-header
    .colon-header__nav {
        position: fixed !important;

        top:
            var(
                --colon-header-height,
                88px
            ) !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        display: block !important;

        width: 100% !important;

        height:
            calc(
                100vh -
                var(
                    --colon-header-height,
                    88px
                )
            ) !important;

        margin: 0 !important;

        padding:
            16px
            var(
                --colon-header-padding,
                22px
            )
            30px !important;

        overflow-y: auto !important;

        background:
            var(
                --colon-header-background,
                #fff
            ) !important;

        border-top:
            1px solid
            rgba(71, 10, 104, .08) !important;

        box-shadow:
            0 18px 45px
            rgba(30, 15, 45, .14) !important;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform:
            translateY(-8px) !important;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease !important;
    }


    #colon-custom-header
    .colon-header__nav.is-open {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translateY(0) !important;
    }


    #colon-custom-header
    ul.colon-header__menu {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* =====================================================
       ITEM PRINCIPAL MOBILE
       ===================================================== */

    #colon-custom-header
    ul.colon-header__menu
    > li {
        display: block !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        border-bottom:
            1px solid
            rgba(71, 10, 104, .08) !important;
    }


    /*
     * El label ocupa TODO el ancho.
     *
     * El padding derecho deja espacio
     * para la flecha.
     */

    #colon-custom-header
    ul.colon-header__menu
    > li
    > .colon-menu-link {
        display: flex !important;

        width: 100% !important;

        min-height: 54px !important;

        height: auto !important;

        justify-content: flex-start !important;

        padding:
            14px 48px 14px 4px !important;

        color:
            var(
                --colon-header-menu-color,
                #4b4b4b
            ) !important;

        font-size: 15px !important;

        cursor: pointer !important;

        /*
         * Toda esta zona es táctil.
         */
        -webkit-tap-highlight-color:
            transparent;
    }


    #colon-custom-header
    ul.colon-header__menu
    > li:hover
    > .colon-menu-link,

    #colon-custom-header
    ul.colon-header__menu
    > li:focus-within
    > .colon-menu-link,

    #colon-custom-header
    ul.colon-header__menu
    > li.is-open
    > .colon-menu-link {
        color:
            var(
                --colon-header-menu-hover,
                #fd6125
            ) !important;

        background:
            transparent !important;
    }


    /* =====================================================
       FLECHA PRINCIPAL MOBILE
       ===================================================== */

    #colon-custom-header
    ul.colon-header__menu
    > li
    > .colon-submenu-toggle {
        position: absolute !important;

        top: 0 !important;

        right: 0 !important;

        z-index: 5 !important;

        width: 48px !important;

        height: 54px !important;

        margin: 0 !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        background:
            transparent !important;

        color:
            var(
                --colon-header-menu-color,
                #4b4b4b
            ) !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    > li.is-open
    > .colon-submenu-toggle {
        color:
            var(
                --colon-header-menu-active,
                #fd6125
            ) !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    > li.is-open
    > .colon-submenu-toggle
    svg {
        transform:
            rotate(180deg) !important;
    }


    /* =====================================================
       SUBMENÚ MOBILE
       ===================================================== */

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            0 0 8px 12px !important;

        background:
            transparent !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    li.is-open
    > ul.sub-menu {
        display: block !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    ul.sub-menu {
        position: static !important;

        top: auto !important;

        left: auto !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li {
        border: 0 !important;

        position: relative !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li
    > .colon-menu-link {
        display: flex !important;

        width: 100% !important;

        min-height: 44px !important;

        padding:
            11px 44px 11px 12px !important;

        color:
            var(
                --colon-header-submenu-color,
                #5b5b5b
            ) !important;

        background:
            transparent !important;

        font-size: 14px !important;

        cursor: pointer !important;

        -webkit-tap-highlight-color:
            transparent;
    }


    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li:hover
    > .colon-menu-link,

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li:focus-within
    > .colon-menu-link,

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li.is-open
    > .colon-menu-link {
        color:
            var(
                --colon-header-submenu-hover,
                #fd6125
            ) !important;

        background:
            var(
                --colon-header-submenu-hover-bg,
                #f4f4f4
            ) !important;
    }


    /* =====================================================
       FLECHA SUBMENÚ MOBILE
       ===================================================== */

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li
    > .colon-submenu-toggle {
        position: absolute !important;

        top: 0 !important;

        right: 0 !important;

        width: 42px !important;

        height: 44px !important;

        margin: 0 !important;

        pointer-events: auto !important;

        cursor: pointer !important;

        color:
            var(
                --colon-header-submenu-color,
                #5b5b5b
            ) !important;

        background:
            transparent !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li.is-open
    > .colon-submenu-toggle {
        color:
            var(
                --colon-header-submenu-active,
                #fd6125
            ) !important;
    }


    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    li.is-open
    > .colon-submenu-toggle
    svg {
        transform:
            rotate(180deg) !important;
    }


    body.colon-menu-open {
        overflow: hidden !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    #colon-custom-header
    .colon-header__inner {
        padding:
            0 16px !important;
    }


    #colon-custom-header
    .colon-header__logo-image {
        width:
            min(
                var(--colon-header-logo-width, 270px),
                210px
            ) !important;

        max-width:
            210px !important;

        max-height:
            calc(
                var(--colon-header-height, 88px)
                - 14px
            ) !important;
    }


    #colon-custom-header
    .colon-header__nav {
        padding-left:
            16px !important;

        padding-right:
            16px !important;
    }
}


/* =========================================================
   ADMIN BAR
   ========================================================= */

body.admin-bar
#colon-custom-header.colon-header--sticky {
    top: 32px !important;
}


@media screen and (max-width: 782px) {

    body.admin-bar
    #colon-custom-header.colon-header--sticky {
        top: 46px !important;
    }


    #colon-custom-header
    .colon-header__nav {
        height:
            calc(
                100vh
                -
                var(
                    --colon-header-height,
                    88px
                )
                -
                46px
            ) !important;
    }


    #colon-custom-header.is-scrolled
    .colon-header__nav {
        top:
            var(
                --colon-header-sticky-height,
                72px
            ) !important;

        height:
            calc(
                100vh
                -
                var(
                    --colon-header-sticky-height,
                    72px
                )
                -
                46px
            ) !important;
    }
}

/* =========================================================
   SUBMENÚS MULTINIVEL — DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* Submenú de primer nivel */
    #colon-custom-header
    ul.colon-header__menu
    > li:hover
    > ul.sub-menu,

    #colon-custom-header
    ul.colon-header__menu
    > li:focus-within
    > ul.sub-menu,

    #colon-custom-header
    ul.colon-header__menu
    > li.is-open
    > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }


    /* Submenú de segundo nivel */
    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    > li:hover
    > ul.sub-menu,

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    > li:focus-within
    > ul.sub-menu,

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    > li.is-open
    > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }


    /* Tercer nivel y superiores */
    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    ul.sub-menu
    > li:hover
    > ul.sub-menu,

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    ul.sub-menu
    > li:focus-within
    > ul.sub-menu,

    #colon-custom-header
    ul.colon-header__menu
    ul.sub-menu
    ul.sub-menu
    > li.is-open
    > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }
}