:root {
    --blue-1: #011f3b;
    --blue-2: #011e3a;
    --blue-3: rgba(1, 30, 58, 0.63);
    --blue-4: #0f284a;
    --red-1: #98012e;
    --red-2: #c3043d;
    --red-3: #9c0d37;
    --red-5: rgb(152, 1, 46);
    --white-1: #fff;
    --white-2: #f5f5f5;
    --black-1: #0c0b07;
    --beige-1: #e7e0d6;
    --grey-1: #abaeb0;
    --grey-2: #cccccc;
    --grey-3: #ebecee;
    --grey-4: #e4e1e1;
}

#navigation {
    position: relative;
    z-index: 5;
    width: 100%;
    display: block;
    background-color: var(--white-2);
    border-bottom: solid 2px var(--grey-2);

    .container-nav.logoMenuBox {
        display: flex;
        row-gap: 2vw;
        align-items: center;
        width: 100%;
        max-width: inherit;
        margin-inline: auto;
        height: 120.8px;

        nav.moduletable {
            width: 100%;
            margin-top: 0;
        }

        .mod_jux_megamenu {
            #js-mainnav {
                display: flex;

                #megaMenuToggle {
                    display: none;
                }

                #mobileMenuToggle {
                    display: none;
                }

                .jux_tabs_db.jux_tabs_item {
                    background: var(--grey-4);
                    padding: 1rem;

                    ul {
                        li {
                            padding-block: 5px;

                            a {
                                color: var(--blue-2);
                                font-family: 'bodoni_modaregular', serif;
                                font-size: var(--size-0);
                                padding: 5px 0;
                                letter-spacing: 2.5px;
                                font-weight: 600;
                                text-transform: none;
                                width: fit-content;
                                border-bottom: solid 2px transparent;

                                &:hover, &:active {
                                    color: var(--red-2);
                                }
                            }

                            &.active {
                                a {
                                    border-bottom: solid 2px var(--blue-2);
                                }
                            }

                            &.active {
                                a:hover {
                                    border-bottom: solid 2px var(--red-2);
                                }
                            }
                        }
                    }
                }

                .megamenu.level0 {
                    align-content: center;
                    align-items: center;
                    margin-left: auto;
                    gap: 2vw;

                    #DesignYourOwn {
                        a.designOwn {
                            background: var(--red-1) !important;
                            border-radius: 4px;

                            &:hover {
                                background: var(--red-5) !important;
                            }
                        }
                    }

                    li:has(.menu-min-height-525) {
                        .childcontent.adddropdown, .jux_tabs_db.jux_tabs_item {
                            min-height: var(--menu-min-height-525);
                        }
                    }

                    li {
                        border-left: none !important;
                        border-right: none !important;

                        &:hover, &.submenu-open {
                            z-index: 10;
                        }

                        a {
                            height: auto;
                            line-height: 1.5;
                            padding: 7px 14px;
                            letter-spacing: 2px;
                        }

                        &:hover, &:active {
                            background: transparent !important;
                        }

                        .image-title {
                            font-size: var(--size-1rem);
                            text-transform: uppercase;
                            color: var(--blue-2);
                        }

                        .menu-desc {
                            font-size: var(--size-1rem);
                            text-transform: uppercase;
                            color: var(--blue-2);
                        }
                    }

                    & > li:not(#DesignYourOwnMenuItem) {
                        a .image-title {
                            border-bottom: solid 2px rgba(1, 39, 58, 0);
                            transition: border 0.2s;

                            &:hover {
                                border-bottom: solid 2px rgba(1, 39, 58, 1);
                            }
                        }

                        a.active .image-title {
                            border-bottom: solid 2px rgba(1, 39, 58, 1);
                        }
                    }
                }

                .megamenu.level1 {
                    .submenu-align-auto {
                        .group-content {
                            display: flex;
                            gap: 2rem;
                            font-size: var(--size-0);
                            justify-content: space-between;

                            .megamenu.level1 {
                                width: 100%;

                                .categoryIntroBox {
                                    .categoryIntroHeader {
                                        h1, h2, h3 {
                                            color: var(--white-1) !important;
                                        }
                                    }
                                }
                            }

                            ul {
                                li {
                                    a {
                                        padding-inline: 0;
                                        text-transform: none;
                                    }
                                }
                            }

                            .group-title {
                                a {
                                    padding-left: 0;
                                    color: var(--blue-2);
                                    display: inherit;
                                }

                                .menu-inner {
                                    width: 100%;
                                    /*border-bottom: solid 2px var(--blue-2);
                                    margin-bottom: 20px;
                                    padding-bottom: 10px;*/

                                    .image-title {
                                        margin-bottom: 0;
                                        padding: 0;
                                        color: var(--blue-2);
                                        font-weight: 600;
                                    }

                                    .menu-desc {
                                        color: var(--blue-2);
                                        font-weight: 600;
                                    }
                                }
                            }

                            .mod-menu {
                                flex-direction: column;

                                li {
                                    margin-left: 0;
                                    margin-bottom: 5px;

                                    a {
                                        font-size: var(--size-0);
                                        letter-spacing: 2px;
                                        font-weight: 500;
                                        padding-bottom: 3px;

                                        &:hover, &:active {
                                            color: var(--red-1);
                                        }
                                    }

                                    &.current {
                                        a {
                                            border-bottom: solid 2px var(--blue-2);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .mainNav {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;
                    padding-inline: 4rem;
                    gap: 2rem;
                }

                .jux-dropdown-menu {
                    .mainNav {
                        padding-inline: 0;
                    }

                    #logoBox {
                        display: none;
                    }
                }

                .childcontent.adddropdown {
                    z-index: 5;
                    margin-top: 41px;

                    .childcontent-inner {
                        display: flex;

                        .megacol {
                            width: 100% !important;
                            padding: 2rem;

                            .mod-menu.mod-list.nav {
                                display: block;

                                li {
                                    display: block;
                                    width: fit-content;
                                    text-wrap: nowrap;
                                }
                            }
                        }
                    }

                    .jux_modules_content {
                        padding: 0;
                        width: 100%;

                        .subMenuGrid.basicFlex {
                            justify-content: space-around;
                            flex-flow: row wrap;
                            gap: 3rem;
                        }

                        .hk-row-fluid {
                            display: flex;
                            gap: 2rem;
                        }

                        .hkc-md-6 {
                            width: calc(50% - 1rem);
                        }

                        & > .moduletable {
                            margin-inline: auto;
                        }
                    }

                    .contentAuto {
                        .jux_modules_content {
                            width: auto;
                        }
                    }

                    border-top: none;
                    border-right: none;
                    border-left: none;
                    border-bottom: solid 2px var(--grey-4);

                    &::before {
                        position: absolute;
                        inset: 0;
                        content: '';
                        margin-top: -45px !important;
                    }
                }
            }

            .hideTitle {
                .menu-inner {
                    .image-title {
                        display: none;
                    }
                }
            }
        }

        .sashLogo {
            max-width: 320px;
        }
    }
}

.theme-white.mod_jux_megamenu .megamenu-wrapper {
    border: none !important;
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/*
background: linear-gradient(90deg,rgba(228, 225, 225, 1) 0%, rgba(228, 225, 225, 1) 300px, rgba(255, 255, 255, 1) 300px, rgba(255, 255, 255, 1) 100%);
*/
#navigation {
    .mod_jux_megamenu.horizontal ul.level0 a.haschild .image-title, .mod_jux_megamenu.horizontal ul.level0 span.haschild .image-title {
        background: none !important;
        background-position: 100% 8px;
        padding-right: 14px;
        position: relative;

        &::after {
            position: absolute;
            right: -5px;
            bottom: 0;
            content: '';
            height: 20px;
            width: 20px;
            background-image: url(/images/elements/down-blue.svg);
            background-position: left center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        &:hover::after {
            background-image: url(/images/elements/down-blue.svg) !important;
        }
    }

    &:hover {
        .mod_jux_megamenu.horizontal ul.level0 a.haschild .image-title, .mod_jux_megamenu.horizontal ul.level0 span.haschild .image-title {
            &::after {
                background-image: url(/images/elements/down-blue.svg) !important;
            }
        }
    }
}

body.transparent-menu {
    #navigation {
        & .container-nav.logoMenuBox {
            & .mod_jux_megamenu {
                & #js-mainnav {
                    & .megamenu.level0 {
                        & > li:not(#DesignYourOwnMenuItem) {
                            a.active .image-title {
                                border-bottom: solid 2px var(--white-1);
                            }
                        }
                    }
                }
            }
        }

        &:hover {
            .container-nav.logoMenuBox {
                & .mod_jux_megamenu {
                    & #js-mainnav {
                        & .megamenu.level0 {
                            & > li:not(#DesignYourOwnMenuItem) {
                                a.active .image-title {
                                    border-bottom: solid 2px var(--blue-2);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.subMenuGrid {
    &.basicFlex {
        margin-bottom: 0;
    }

    .subMenuBox {
        .subMenuImage {
            img {
                max-height: 350px;
                object-fit: contain;
            }
        }

        .subMenuButton {
            width: 100%;

            a {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: var(--size-1rem);
            }
        }

        .subMenuText {
            p a {
                color: var(--blue-2);

                &:hover {
                    color: var(--red-1) !important;
                }
            }
        }
    }

    .subMenuButtonFull {
        grid-column: 1 / -1;

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--size-1rem) !important;
            width: 100%;
            padding: 1rem 2rem;
        }
    }

    .subMenuButton {
        grid-column: 1 / -1;

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--size-1rem);
            width: 270px !important;
            margin: auto;
        }
    }
}

.subMenuGrid.crowns-and-pins {
    flex-flow: nowrap;

    .subMenuButton {
        a.designOwn {
            width: 100%;
            margin-top: 37px;
        }
    }
}

.columns-1 {
    .subMenuGrid.basicFlex {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.columns-2 {
    .subMenuGrid.basicFlex {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.columns-3 {
    .subMenuGrid.basicFlex {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.columns-4 {
    .subMenuGrid.basicFlex {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.columns-5 {
    .subMenuGrid.basicFlex {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

.columns-1, .columns-2, .columns-3, .columns-4, .columns-5 {
    .jux_modules_content {
        .moduletable {
            width: 100%;
        }
    }

    &.btn-center {
        .subMenuButton {
            width: 270px;
            margin: auto;

            a {
                display: flex;
                align-items: center;
                justify-content: center;
                height: auto;
                line-height: 1.5;
                padding: 7px 14px;
                letter-spacing: 2px;
                font-size: var(--size-1rem);
            }
        }
    }
}

.pageantSubLogos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 600px;

    img {
        filter: invert(80%) sepia(10%) saturate(7500%) hue-rotate(178deg) brightness(97%) contrast(103%);
    }

    img.noFilter {
        filter: none;
    }

    a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--var-1rem);
    }
}

#ListofPageants {
    .jux_modules_content:nth-child(1) {
        order: 1;
    }

    .jux_modules_content:nth-child(2) {
        order: 3;
    }

    .jux_modules_content:nth-child(3) {
        order: 2;
    }
}

.pageants-column-2-grid {
    max-width: 600px;

    .mod-imagehover {
        padding: 0;
    }

    img {
        filter: invert(80%) sepia(10%) saturate(7500%) hue-rotate(178deg) brightness(97%) contrast(103%);

        &:hover, &:focus, &:active {
            filter: unset !important;
        }
    }

    img.no-filter {
        filter: unset;
    }

    a:hover img {
        filter: unset !important;
    }
}

.no-content {
    .container-component {
        display: none;
    }
}

@keyframes backgroundFadeIn {
    from {
        background: linear-gradient(180deg, rgba(133, 125, 120, 0.8) 0%, rgba(133, 125, 120, 0.5) 37%, rgba(133, 125, 120, 0.25) 71%, rgba(133, 125, 120, 0) 100%), transparent;
        /* border-bottom:solid 2px transparent; */
        box-shadow: inset 0 -2px 10px -2px rgba(0, 0, 0, 0.0);
    }
    to {
        background: linear-gradient(180deg, rgba(133, 125, 120, 0.0) 0%, rgba(133, 125, 120, 0.0) 37%, rgba(133, 125, 120, 0.0) 71%, rgba(133, 125, 120, 0) 100%), var(--white-2);
        /* border-bottom:solid 2px var(--grey-2); */
        box-shadow: inset 0 0 0 2px var(--grey-2);
    }
}

body.transparent-menu {
    #navigation {
        background: linear-gradient(180deg, rgba(133, 125, 120, 0.9) 0%, rgba(133, 125, 120, 0.7) 37%, rgba(133, 125, 120, 0.4) 71%, rgba(133, 125, 120, 0) 100%), transparent;
        position: relative;
        border-bottom: none;

        &::before {
            position: absolute;
            inset: 0;
            opacity: 0;
            content: '';
        }

        &:hover {
            animation: backgroundFadeIn 0.2s ease-in forwards;
        }

        & .container-nav.logoMenuBox {
            & .mod_jux_megamenu {
                & #js-mainnav {
                    & .megamenu.level0 {
                        justify-content: center;

                        & li {
                            .image-title {
                                color: var(--white-1);
                                transition: color 0.5s ease-in forwards;

                                &::after {
                                    background-image: url(/images/elements/down.svg);
                                }
                            }

                            .group-title {
                                a {
                                    width: 100%;
                                    border-bottom: solid 2px var(--blue-2);
                                    margin-bottom: 20px;
                                    padding: 0 0 10px 0;
                                    color: var(--blue-2);
                                    font-weight: 600;


                                }
                            }

                            &:last-of-type {
                                .image-title {
                                    padding-right: 0;
                                }
                            }
                        }
                    }
                }
            }
        }

        &:hover {
            & .container-nav.logoMenuBox {
                & .mod_jux_megamenu {
                    & #js-mainnav {
                        & .megamenu.level0 {
                            & li {
                                .image-title {
                                    color: var(--blue-2);
                                }
                            }

                            .designOwn {
                                a .image-title {
                                    color: var(--white-1) !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    hero {
        margin-top: -120.8px;
        /*.heroTitleImage {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          img {
            grid-area: 1 / 1 / 2 / 2;
            width: 100%;
            height: 66vh;
            object-fit: cover;
            object-position: center;
            position: relative;
            z-index: 1;
          }

        }*/
    }

    .container-header {
        #navigation {
            background-image: linear-gradient(180deg, rgba(148, 143, 139, 0.95) 0%, rgba(148, 143, 139, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
            background-color: transparent;

            .dj-megamenu > li > a {
                color: var(--white-1) !important;

                .arrow::before {
                    color: var(--white-1) !important;
                    border-color: var(--white-1) !important;
                }
            }
        }
    }
}

.sash-bags-dropdown-images {
    .subMenuGrid {
        display: flex;
        gap: 2rem;
        justify-content: space-between;
    }

    .subMenuBox {
        width: 50%;
    }
}

body:has(.hikashop_product_top_part, .errorContainer, .categoryWrapper, .noHero) {
    .container-header {
        #navigation {
            background-color: var(--white-2);
            background-image: none !important;

            .container-nav.logoMenuBox {
                .mod_jux_megamenu {
                    #js-mainnav {
                        .megamenu.level0 {
                            & > li {
                                .image-title {
                                    color: var(--blue-1);

                                    &::after {
                                        background-image: url(/images/elements/down-blue.svg);
                                    }
                                }
                            }

                            & > li#DesignYourOwn > a.designOwn {
                                background: var(--blue-2) !important;
                                border-radius: 100vh;

                                &:hover {
                                    background: var(--red-5) !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

body.transparent-menu:has(.hikashop_product_top_part, .errorContainer, .categoryWrapper, .noHero) {
    .container-header {
        #navigation {
            background-image: linear-gradient(180deg, rgba(148, 143, 139, 0.95) 0%, rgba(148, 143, 139, 0.7) 50%, rgba(255, 255, 255, 0) 100%) !important;
            background-color: transparent;

            .container-nav.logoMenuBox {
                .mod_jux_megamenu {
                    #js-mainnav {
                        .megamenu.level0 {
                            & > li {
                                .image-title {
                                    color: var(--white-1);
                                    transition: color 0.5s ease-in forwards;

                                    &::after {
                                        background-image: url(/images/elements/down.svg);
                                    }
                                }
                            }

                            & > li#DesignYourOwn > a.designOwn {
                                background: var(--red-1) !important;
                                border-radius: 4px;

                                &:hover {
                                    background: var(--red-5) !important;
                                }
                            }
                        }
                    }
                }
            }

            &:hover {
                animation: backgroundFadeIn 0.2s ease-in forwards;
                background-image: none !important;
                background-color: var(--white-1) !important;

                .megamenu.level0 {
                    & > li {
                        .image-title {
                            color: var(--blue-2) !important;
                            transition: color 0.5s ease-in forwards;

                            &::after {
                                background-image: url(/images/elements/down-blue.svg);
                            }
                        }
                    }

                    & > li#DesignYourOwn > a.designOwn {
                        background: var(--red-1) !important;
                        border-radius: 4px;

                        &:hover {
                            background: var(--red-5) !important;
                        }
                    }
                }
            }
        }
    }
}

.error-page {
    #navigation {
        #js-mainnav {
            & .megamenu.level0 {
                a {
                    .image-title {
                        color: var(--blue-2) !important;
                    }

                    &:hover {
                        background: none !important;
                    }
                }

                a.designOwn {
                    .menu-inner {
                        span.image-title {
                            color: var(--white-1) !important;
                        }
                    }

                    &:hover {
                        background: var(--red-5) !important;
                    }
                }
            }

            li {
                background: none !important;

                &:hover {
                    background: none !important;
                }

                &.active a {
                    background: none !important;
                    border-left: none !important;
                }
            }

            li.designOwn {
                padding: 0;
            }
        }
    }
}
@keyframes menuFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

/* New mobile menu*/
@-webkit-keyframes jello {
    0% {
        transform: inherit;
        clip-path: circle(0% at 0 0);
    }

    100% {

        clip-path: circle(142% at 0 0);
    }
}

@keyframes jello {
    0% {
        transform: inherit;
        clip-path: circle(0% at 0 0);
    }

    100% {

        clip-path: circle(142% at 0 0);
    }
}

@-webkit-keyframes slideOutDown {
    0% {
        opacity: 1;
        filter: blur(0px);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    50% {
        filter: blur(5px);
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);

    }
    100% {
        opacity: 1;
        filter: blur(10px);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);

    }
}

@keyframes slideOutDown {
    0% {
        filter: blur(0px);
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    50% {
        filter: blur(5px);
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);

    }

    100% {
        filter: blur(10px);
        opacity: 1;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);

    }
}

#mobileMenuToggle {
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    gap: 5px;

    .mobileMenuText {
        padding-bottom: 1px;
    }
}

.megamenu.level0.is-tall {

    .childcontent.adddropdown {
        position: fixed;
        top: 191px;
        margin-top: 0 !important;

        &::before {
            margin-top: unset !important;
        }
    }


}

@media screen and (width < 1100px) {
    .pageantSubLogos {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media ( width > 1599px ) {
    #mobileLogo, #mobileMenu, .mobileMenu {
        display: none
    }
}

@media ( width < 1600px ) {
    .header.container-header {
        display: flex;
        flex-direction: column;

        hero {
            order: 3
        }

        #navigation {
            order: 1;
            background-image: none;

            .menuWrap {
                display: none
            }
        }

        #topBar {
            order: 2
        }

        breadcrumbs {
            order: 3
        }
    }

    .mainMenu {
        display: none
    }

    hero {
        margin-top: 0px !important;
        width: 100%
    }

    .container-topbar {
        & .mod-custom {
            width: calc(100% - 2rem);
            justify-content: center;
            position: relative
        }
    }

    .heroGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 0 0;
        grid-auto-flow: row;
        height: 33vh !important;
        position: relative;
        z-index: 1;

        .heroTitleImage {
            grid-area: 1 / 1 / 2 / 3;
            height: 33vh;

            img {
                width: 100% !important;
                height: 33vh !important;
                object-fit: cover !important
            }

            video {
                width: 100% !important;
                height: 33vh !important;
                object-fit: cover !important
            }

            position: relative;
            z-index: 1
        }

        .grid-top-right {
            grid-area: grid-top-right
        }

        .grid-bottom-left {
            grid-area: grid-bottom-left
        }

        #heroTitleTitle {
            grid-area: 1 / 2 / 3 / 3;
            position: relative;
            z-index: 3;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            padding-right: 2vw;
            padding-bottom: 2vw;
            font-size: clamp(2rem, 4vw, 4rem);
            color: var(--white-1);
            font-family: "bodoni_modaregular", sans-serif;
            text-transform: uppercase
        }
    }
}

@media screen and (width < 1600px) {
    #navigation {
        background: var(--white-2) !important;

        #js-mainnav {
            padding-inline: 4rem;

            #mobileMenuToggle {
                display: flex !important;
                z-index: 999;
                color: var(--blue-1);
            }
        }

        .mainNav.js-megamenu {
            padding-inline: 0 !important;

            .megamenu {
                display: none;
            }
        }

        .container-nav.logoMenuBox {
            .sashLogo {
                max-width: 320px;
            }
        }

        .theMobileMenu {
            #dialog2 {
                padding: 0;
                background-size: contain;
            }

            .eb-content {
                z-index: 3;
            }

            #mobileLogo {
                margin-bottom: 40px;
                max-height: 150px;
                padding: 1rem;
                position: fixed;
                background: var(--white-1);
                width: 100%;
                z-index: 4;
                position: relative;

                img {
                    object-fit: contain;
                    max-width: 290px;
                }

                box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.1);
                -moz-box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.1);
            }

            .eb-close {
                position: fixed !important;
                color: var(--blue-1);
            }

            .mobileMenuList {

                padding: 20px;

                & > ul.mod-menu {

                    text-align: left;
                    display: inherit;

                    & > li {
                        display: block;
                        max-width: 480px;
                        position: relative;
                        font-size: 1.3rem;
                        font-family: "Montserrat", sans-serif;
                        text-transform: uppercase;
                        padding: 3px 0;
                        line-height: 1.5;

                        &.deeper.parent {
                            position: relative;

                            &::after {
                                position: absolute;
                                content: '';
                                background-image: url(/images/menu/mobile-menu-down.svg);
                                background-position: center right;
                                background-repeat: no-repeat;
                                width: 20px;
                                height: 20px;
                                right: 0;
                                top: 6px;
                                z-index: 9;
                                transition: transform 0.5s ease;
                            }

                            &:has(ul.mod-menu__sub.show-menu) {
                                &::after {
                                    transform: rotate(180deg);
                                    position: absolute;
                                    content: '';
                                    background-image: url(/images/menu/mobile-menu-down.svg);
                                    background-position: center right;
                                    background-repeat: no-repeat;
                                    width: 20px;
                                    height: 20px;
                                    right: 5px;
                                    top: 6px;
                                }
                            }
                        }

                        a {
                            color: var(--blue-1);
                            text-underline-offset: 3px;

                        }

                        &.closed {
                            &::after {
                                position: absolute;
                                content: '';
                                background-image: url(/images/menu/mobile-menu-down.svg);
                                background-position: center right;
                                background-repeat: no-repeat;
                                width: 20px;
                                height: 20px;
                                right: 0;
                                top: 6px;
                            }
                        }

                        &.open {
                            &::after {
                                transform: rotate(180deg);
                                position: absolute;
                                content: '';
                                background-image: url(/images/menu/mobile-menu-down.svg);
                                background-position: center right;
                                background-repeat: no-repeat;
                                width: 20px;
                                height: 20px;
                                right: 0;
                                top: 6px;
                            }
                        }

                        .mod-menu__heading {
                            color: var(--blue-1);
                            font-size: 1.3rem;
                            text-transform: uppercase;
                        }
                    }

                    .mod-menu__sub {
                        padding-left: 10px;

                        li {
                            padding: 3px 0;
                            padding: 3px 0;
                            font-family: 'bodoni_modaregular';
                            text-transform: none;

                            a {
                                color: var(--blue-2);
                                font-size: 1.2rem;
                            }
                        }
                    }
                }
            }
        }

        #mobileMenu {
            border: solid 1px var(--blue-2);
            padding: 5px 10px;
            display: flex;
            align-items: center;
            line-height: 1;
            cursor: pointer;

            svg {
                height: 24px;
                width: 24px;
                margin-right: 3px;
            }

            span {
                font-size: 24px;
                line-height: 1;
                margin-top: -2px;
            }
        }
    }
    #mobileMenuModal {
        .icon-chevron-down {
            position:relative;

            &::before {
                content:'';
            background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
                width:16px;
                height:16px;
                background-repeat:no-repeat;
                display:block;
            }
        }
    }
    .modalHeader,.mobileMenuList {
        padding:1rem;
    }
    #mobileLogo {
        border-bottom: solid 2px var(--grey-2);
        padding-bottom:1rem;
    }

}



body:has(.modal-backdrop.mobileMenuModalBackdrop) {
    .modal-backdrop.mobileMenuModalBackdrop,
    .modal-backdrop.show.mobileMenuModalBackdrop {
        background-color: transparent !important;
        opacity: 0 !important;
        transition: none !important;
        --backdrop-bg: transparent !important;
        display: none !important;

    }
}

#mobileMenuModal {
    &.fade {
        opacity: 1 !important;
        -webkit-animation: jello 1s forwards;
        animation: jello 1s forwards;

    }

    .modal-dialog {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        margin: 0;

        .modal-content {
            border-radius: 0;
            height: 100vh;
            overflow-y: scroll;
            position: relative;
            .btn-close {
                position:absolute;
                top:1rem;
                right:1rem;
            }
        }
    }

    &.slideOutDown {
        -webkit-animation: slideOutDown 2s forwards;
        animation: slideOutDown 2s forwards;
    }

    .theMobileMenu {
        position: relative;

        button {

        }
    }
}

#searchModal {
    .theSearchModal {
        position: relative;
        padding: 2rem 4rem;
        background: var(--white-2);
        border: none;

        button {
            position: absolute;
            right: 1rem;
            top: 1rem;
            z-index: 3;
        }

        .mod-finder {
            input {
                border-radius: 0;
                border: none;
                border-bottom: solid 2px var(--grey-2);
                font-size: var(--size-2);
                color: var(--blue-1);
                background: var(--white-2);
            }
        }
    }
}

.modules-only {
    .container-component {
        display: none;
    }
}

@-webkit-keyframes sashOut {
    0% {

        clip-path: circle(142% at 100% 100%) !important;
    }
    to {
        clip-path: circle(0% at 100% 100%) !important;
    }
}

@keyframes sashOut {
    0% {

        clip-path: circle(142% at 100% 100%) !important;
    }
    to {
        clip-path: circle(0% at 100% 100%) !important;
    }
}

.engagebox__sashout {
    -webkit-animation-name: sashOut;
    animation-name: sashOut;
}

#mod-custom188 {
    .subMenuGrid.basicFlex {
        gap: 40px !important;
    }

    .subMenuImage a {
        padding: 0 !important;
    }
}

@media (width < 591px) {
    #navigation {
        & .container-nav.logoMenuBox {
            display: flex;
            gap: 4vw;
            align-items: center;
            max-width: inherit;
            margin-inline: auto;
            height: 120.8px;
        }

        #js-mainnav {
            padding-inline: 0;
        }
    }
}

@media (width < 476px) {
    #navigation {
        .container-nav.logoMenuBox {
            height: auto;
            padding-block: 1rem;
        }

        .sashLogo {
            & img {
                max-width: 175px;
            }
        }
    }
}


/* Hover bridge for multi-row megamenu - extends li hover zone downward */
#navigation .mod_jux_megamenu .megamenu.level0 > li.haschild.megacss:hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 60px;
}

/* JS-managed hover for fullwidth megamenu dropdowns */
#navigation .mod_jux_megamenu .megamenu.level0 > li.haschild.megacss.submenu-open > div.childcontent.adddropdown {
    opacity: 1;
    visibility: visible;
    display: block !important;
}