@import url("https://use.typekit.net/yxv7oju.css");

:root {
    --primary-dark: #111111;
}

body {
    --primary-font: avenir-next-lt-pro, sans-serif;
    --secondary-font: avenir-next-lt-pro-condensed, sans-serif;
    --font-family: var(--primary-font) !important;
    container-type: inline-size;
    color: var(--primary-dark);
}

#app {
    /* Matching uh.edu 1536px container width is extremely important */
    --side-padding: calc((100cqw - 1520px) / 2);
    /* --menu-side-padding: 5vw; */
    --menu-side-padding: var(--side-padding);
    --section-title-font-size: 83px;
    --section-subtitle-font-size: 26px;
    --section-title-font-size-md: 50px;
    --homepage-font-size: 18px;
    --homepage-button-font-size: 19px;
    --homepage-section-description-font-size: 20px;
    --homepage-button-line-height: 1.1;
    --homepage-button-min-width: 300px;
    --homepage-button-font-weight: 500;
    --homepage-title-line-height: 1;
    --homepage-text-line-height: 1.5;
    --section-padding-top: 100px;
    --section-padding-bottom: 100px;
    --title-decoration-width: 149px;
    --title-decoration-height: 6px;
    --transition-time: .15s;
    --dark-text-color: #111111;
    --border-radius: 8px;


    @media screen and (max-width: 1599px) {
        --side-padding: 32px;
        --section-padding-top: 85px;
        --section-padding-bottom: 85px;
        --section-title-font-size-md: 45px;
    }

    @media (max-width: 1499px) {
        --section-title-font-size: 72px;
        --homepage-button-font-size: 18px;
        --section-padding-top: 75px;
        --section-padding-bottom: 75px;
        --section-title-font-size-md: 40px;
    }


    @media screen and (max-width: 1199px) {
        --section-title-font-size: 64px;
        --section-subtitle-font-size: 22px;
        --section-padding-top: 60px;
        --section-padding-bottom: 60px;
        --homepage-button-font-size: 16px;
        --homepage-button-min-width: 250px;
        --section-title-font-size-md: 36px;
        --homepage-section-description-font-size: 18px;
    }

    @media screen and (max-width: 991px) {
        --section-subtitle-font-size: 20px;
        --section-title-font-size: 52px;
        --homepage-button-min-width: 200px;
        --section-title-font-size-md: 32px;

    }

    @media screen and (max-width: 767px) {
        --section-subtitle-font-size: 18px;
        --section-title-font-size: 40px;
        --homepage-section-description-font-size: 16px;
        /* --section-title-font-size-md: 28px; */
    }

    @media screen and (max-width: 599px) {
        --side-padding: 20px;
    }

    .style-monterrey,
    .see-all-container {
        flex-wrap: wrap;
        justify-content: center;

        .monterrey-header-accent-left {
            display: none;
        }

        .header-slot-container {
            width: 100%;
            text-align: center;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: unset;

            &:before {
                display: none;
            }

            h2 {
                font-size: var(--section-title-font-size);
                line-height: var(--homepage-title-line-height);
                margin-bottom: 0;
                font-weight: 800;

                .header-top {
                    font-size: var(--section-subtitle-font-size);
                    font-family: var(--primary-font);
                    margin-top: 0;
                    margin-bottom: 0.5em;
                    text-transform: capitalize;
                    font-weight: 500;

                    &:empty {
                        display: none;
                    }
                }
            }
        }

        .monterrey-header-accent {
            display: block;
            margin-top: 1em;
            height: 6px;
            border-radius: 6px;

            @media screen and (max-width: 959px) {
                height: 3px;
                max-width: 100px;
            }
        }
    }

    .see-all-container.see-all-top {
        margin-bottom: 40px;
    }

    .style-monterrey {
        .header-slot-container {

            h1,
            h2 {
                width: 100%;
            }

            &:after {
                width: var(--title-decoration-width);
                height: var(--title-decoration-height);
                margin-top: .3em;
                border-radius: 6px;
                display: block;
                transform: unset;
                background-color: var(--secondary-color);
            }
        }
    }

    .see-all-button-custom {
        display: block;
    }

    .see-all-button,
    .see-all-button-custom a {
        font-size: var(--homepage-button-font-size);
        line-height: var(--homepage-button-line-height);
        display: inline-block;
        padding: 15px;
        min-width: var(--homepage-button-min-width);
        text-decoration: none;
        border-radius: 2em;
        text-shadow: none;
        border: 1px solid var(--primary-color);
        background-color: var(--primary-color);
        color: var(--primary-color-contrast);
        transition: color var(--transition-time) linear, background-color var(--transition-time) linear, border-color var(--transition-time) linear;
        font-weight: var(--homepage-button-font-weight);
        position: relative;
        isolation: isolate;

        &:hover {
            border-color: color-mix(in srgb, var(--primary-color), #000 20%);
            background-color: color-mix(in srgb, var(--primary-color), #000 20%);
        }
    }

    /* a:hover {
        text-underline-offset: 3px;
    } */

    #page-wrapper {
        a {
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

}

/* General font */
#app,
body,
html,
#cms-header .m4--menu-item,
.m4--menu-item-focusable .m4--menu-item-link,
.m4--menu-item-text,
.m4--menu-item-focusable,
#app #cms-header .school-info h1 {
    font-family: var(--primary-font) !important;
}

#app h1,
#app .see-all-container h2 {
    font-family: var(--secondary-font) !important;
}

/* -------------------------------------- */
/* -------- START CMS Header ------------ */
/* -------------------------------------- */

@media screen and (min-width: 1201px) {
    #cms-header {
        --right-menu-area: 95px;
        --menu-height: 75px;
        --translate-button-height: 24px;
        --header-icon-size: var(--homepage-font-size);
        --submenu-header-font-weight: 700;
        --menu-font-size: var(--homepage-font-size);
        --menu-font-size: 17px;
        --menu-font-size-smaller: 15px;
        --menu-font-weight: 500;
        --max-logo-height: 42px;
        --menu-item-min-height: 35px;
        --menu-item-min-height-smaller: 28px;
        --top-bar-vertical-padding: 12px;
        /* --max-logo-height: 42px; to match the uh.edu overall top bar height of 62px*/

        @media screen and (max-width: 1499px) {
            /* --menu-font-size: 16px; */
            --menu-height: 60px;
            --max-logo-height: 48px;
        }

        @media screen and (max-width: 1280px) {
            --max-logo-height: 42px;
        }

        .header-bar-wrapper {
            background-color: var(--bg-color);
        }

        #h3 {
            .logo {
                max-height: var(--max-logo-height);

                img {
                    max-height: var(--max-logo-height);
                }
            }

            .school-info {
                .name {
                    .org-name {
                        font-size: 25px;
                        font-weight: 700;
                    }
                }
            }

            .utility-menu {
                padding-top: var(--top-bar-vertical-padding);
                padding-bottom: var(--top-bar-vertical-padding);
                width: calc(100% - var(--side-padding) * 2);
                padding-left: 0;
                padding-right: 0;
                margin-left: auto;
                margin-right: auto;
                position: relative;
            }

            .utilities-bar {
                .utilities {
                    font-size: 15px;
                    line-height: 1.1;
                    font-weight: var(--menu-font-weight);
                    letter-spacing: unset;
                    font-family: var(--primary-font) !important;
                }
            }

            .translate-button {
                position: absolute;
                right: 0;
                height: var(--translate-button-height);
                top: calc(100% + (var(--menu-height) - var(--translate-button-height))/2);
                color: var(--explore-menu-text-color);
                align-items: center;
                column-gap: 8px;

                &:before {
                    content: '';
                    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12m2.557 16h-5.115c.546 2.46 1.441 4.114 2.558 5.744 1.194-1.741 2.041-3.41 2.557-5.744m-7.157 0h-4.567c1.236 2.825 3.704 4.972 6.755 5.716-1.048-1.733-1.783-3.658-2.188-5.716m13.767 0h-4.567c-.391 1.988-1.095 3.887-2.175 5.694 3.012-.763 5.517-2.895 6.742-5.694m-14.005-6h-4.962c-.267 1.313-.267 2.685 0 4h4.915c-.119-1.329-.101-2.672.047-4m7.661 0h-5.647c-.165 1.326-.185 2.672-.053 4h5.753c.133-1.328.111-2.673-.053-4m6.977 0h-4.963c.148 1.328.166 2.671.048 4h4.915c.26-1.285.273-2.648 0-4m-12.156-7.729c-3.077.732-5.567 2.886-6.811 5.729h4.653c.435-2.042 1.178-3.985 2.158-5.729m2.355-.048c-1.089 1.77-1.91 3.453-2.463 5.777h4.927c-.534-2.246-1.337-3.948-2.464-5.777m2.368.069c1.013 1.812 1.733 3.76 2.146 5.708h4.654c-1.232-2.816-3.762-4.958-6.8-5.708'/%3E%3C/svg%3E");
                    background-color: currentColor;
                    width: var(--header-icon-size);
                    height: var(--header-icon-size);
                    mask-size: 100%;
                    order: 0;
                }


                &:after {
                    /* content: attr(data-current-language); */
                    content: '';
                    border: solid var(--dark-text-color);
                    border-width: 0 1px 1px 0;
                    display: inline-block;
                    padding: 4px;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                    position: relative;
                    top: -2px;
                }

                .translate-text {
                    color: inherit !important;
                    display: none;
                }

                svg {
                    display: none;
                    order: 2;
                    fill: currentColor !important;
                    width: 18px;
                }
            }

            #languagesmenu {
                top: calc(100% + var(--menu-height));
                right: 0;
            }

        }

        #m5 {
            padding-left: var(--side-padding);
            padding-right: var(--side-padding);
            margin-left: 0;
            margin-right: 0;

            #explore-button {
                display: none;
            }

            .bar-nav-menu-bar {
                padding-left: 0;
                padding-right: 0;
                height: var(--menu-height);
                padding-left: var(--right-menu-area);

                .bar-nav-menu--align-right {
                    width: calc(100% - var(--right-menu-area));
                    flex-shrink: 1;
                    justify-content: center;

                    .bar-nav-item-wrapper {
                        flex-grow: 0;
                    }
                }

                .bar-end-options {
                    width: var(--right-menu-area);
                }
            }

            .options-wrapper:hover {
                .bar-nav-menu--drawer:has(.bar-nav--drawer-element) {
                    display: flex !important;
                }
            }

            .bar-menu-item {
                padding: 0 16px;
                height: var(--menu-height);
                position: relative;
                background: transparent !important;

                &:before,
                &:after {
                    content: '';
                    position: absolute;
                    display: block;
                    width: 100%;
                    height: 4px;
                    bottom: 0;
                    left: 0;
                    background-color: var(--icon-color);
                    opacity: 0;
                    /* transition: opacity var(--transition-time) linear; */
                    transition: unset;
                }

                &:hover {
                    &:after {
                        opacity: 1;
                    }
                }

                &.menu-item-is-active {
                    &:before {
                        opacity: 1;
                    }
                }

                .bar-nav-element {
                    font-size: var(--menu-font-size);
                    text-transform: unset;
                    font-weight: 600;

                    a {
                        outline: none;
                    }
                }

                .menu-item-icon {
                    display: none;
                }

                .menu-item-text {
                    align-items: center;
                }
            }

            .options-wrapper:has(.is-active-page) {
                &>.bar-menu-item {
                    &:before {
                        opacity: 1;
                    }
                }

                /* Prevent multiple active items */
                &~.options-wrapper .bar-menu-item {
                    &:before {
                        opacity: 0;
                    }
                }
            }

            /* Prevent multiple active items */
            .options-wrapper:has(.bar-menu-item.menu-item-is-active) {
                &~.options-wrapper .bar-menu-item {
                    &:before {
                        opacity: 0;
                    }
                }
            }

            .bar-nav-menu--drawer {
                top: calc(100% + 10px);
            }

            #searchbutton {
                margin-right: 0;

                .button-action-content {
                    display: block;
                    width: var(--header-icon-size);
                    height: var(--header-icon-size);
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M23.809 21.646l-6.205-6.205c1.167-1.605 1.857-3.579 1.857-5.711 0-5.365-4.365-9.73-9.731-9.73-5.365 0-9.73 4.365-9.73 9.73 0 5.366 4.365 9.73 9.73 9.73 2.034 0 3.923-.627 5.487-1.698l6.238 6.238 2.354-2.354zm-20.955-11.916c0-3.792 3.085-6.877 6.877-6.877s6.877 3.085 6.877 6.877-3.085 6.877-6.877 6.877c-3.793 0-6.877-3.085-6.877-6.877z'/%3E%3C/svg%3E");
                    mask-size: contain;
                    background-color: currentColor;
                }

                svg {
                    display: none;
                }
            }

            .bar-dropdown-more-wrapper {
                opacity: 0;

                #more-menu-dropdown {
                    .bar-menu-item {
                        height: auto;
                        padding-left: 0;
                        padding-right: 0;

                        .menu-item-text {
                            border-bottom: none;

                            a {
                                padding: 10px 0;
                            }
                        }
                    }
                }
            }
        }
    }
}

body:has(#home) {
    #cms-header {
        #m5 {
            .bar-menu-item {
                &:before {
                    opacity: 0;
                }
            }
        }
    }
}

@media screen and (min-width: 1201px) {
    #cms-header #m5 .bar-dropdown-more-wrapper {
        opacity: 0;
    }

    #app.app-is-loaded #cms-header #m5 .bar-dropdown-more-wrapper {
        opacity: 1;
    }
}

@media screen and (max-width: 1200px) {
    #cms-header {
        #h3 {
            .logo {
                max-height: 40px;
            }

            .utilities {
                font-size: 14px;
            }

            .school-info {
                padding-bottom: 0;
            }
        }

        #m5 {
            .bar-nav-menu--drawer {
                top: 100%;
            }
        }

        .options-wrapper:has(#menu-button-explore-button) {
            display: none;
        }
    }
}


/* START Drodpown Edits */

@starting-style {
    #cms-header #m5 .bar-nav-menu--drawer {
        opacity: 0;
    }
}

@media screen and (min-width: 1201px) {
    #cms-header {
        #m5 {
            position: relative;
            border-bottom: 1px solid #cacaca;

            .menu-item-active-line {
                display: none !important;
            }

            .bar-nav-menu--drawer {
                position: absolute;
                top: calc(100% + 1px);
                left: 0;
                width: 100%;
                padding-left: var(--menu-side-padding);
                padding-right: var(--menu-side-padding);
                opacity: 1;
                transition: opacity .05s ease;
                transform: none !important;
                /* display: none; */
                max-height: calc(100vh - 1rem - var(--top-bar-vertical-padding) * 2 - var(--max-logo-height) - var(--menu-height));
                overflow: hidden;
                min-height: 10vh;

                .bar-nav-menu--drawer-content-wrapper {
                    /* padding-left: 0; */
                    /* padding-right: 0; */

                    /* Unequal, but the client wants it so it looks like the columns are centered with text-align: left; */
                    padding-left: 150px;
                    padding-right: 85px;

                    @media (max-width: 1499px) {
                        padding-left: 60px;
                        padding-right: 15px;
                    }

                    @media (max-width: 1399px) {
                        padding-left: 30x;
                        padding-right: 0;
                    }
                }

                .bar-nav-menu--drawer-content-wrapper>div {
                    margin-left: auto;
                    margin-right: auto;

                    display: block;
                    column-count: 4;
                    column-gap: 25px;
                }

                .bar-nav--drawer-element {
                    break-inside: avoid;
                    font-size: var(--menu-font-size);
                    margin: 0;

                    &:not(:has(a)) {
                        cursor: unset;
                    }

                    &:has(> .bar-nav--drawer-element-title):not(:has(> .bar-nav--drawer-element-title a)) {
                        pointer-events: none;

                        .bar-nav--drawer-element-title:has(a) {
                            pointer-events: all;
                        }

                        .bar-nav--drawer-element-title-text:has(a) {
                            pointer-events: all;
                        }
                    }

                    .bar-nav--drawer-element-title {
                        min-height: var(--menu-item-min-height);
                        line-height: 1.15;

                        &:not(:has(a)) {
                            cursor: default;
                        }

                        .bar-nav--drawer-element-title-text {
                            font-size: 16px;
                            white-space: normal;

                            &:not(:has(a)) {
                                cursor: default;
                            }

                            .item-type-header {
                                font-weight: var(--menu-font-weight);
                            }
                        }
                    }

                    a {
                        text-decoration: none;
                        outline: none;
                        font-weight: var(--menu-font-weight);

                        &:hover {
                            text-decoration: underline;
                        }
                    }

                    .bar-nav--drawer-element-title-icon {
                        display: none;
                    }

                    .bar-nav--drawer-children {
                        display: block !important;

                        .bar-nav--drawer-element.child-element {
                            margin-left: 0;
                            margin-right: 0;

                            .bar-nav-element {
                                a {
                                    font-weight: var(--menu-font-weight);
                                }
                            }
                        }
                    }
                }
            }
        }

        #schools-menu-sm1 {
            width: 100%;
            max-width: 100%;
            padding: 0;
            transform: unset;
            border-top: 1px solid #cacaca;
            padding-left: var(--side-padding);
            padding-right: var(--side-padding);

            .wrapper {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                padding: 32px 0;

                .column {
                    padding-left: 0;
                    padding-right: 0;
                    width: 100%;

                    ul {
                        margin-top: 0;

                        .child-item {
                            margin-top: 0;
                            margin-bottom: 0;
                            font-weight: 400;

                            a {
                                display: block;
                                min-height: var(--menu-item-min-height);
                                align-content: center;
                                font-weight: 400;
                                font-family: var(--primary-font);
                                font-size: var(--menu-font-size);

                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                }
            }

            .schools-menu-header {
                display: block;
                min-height: var(--menu-item-min-height);
                font-size: var(--menu-font-size);
                font-weight: var(--submenu-header-font-weight);
            }
        }

        #languagesmenu {
            box-shadow: none;
            margin-top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }

    .academics #cms-header,
    .spring-branch-isd #cms-header {
        & #m5 {
            & .bar-nav-menu--drawer {
                .bar-nav-menu--drawer-content-wrapper>div>.bar-nav--drawer-element {
                    &>.bar-nav--drawer-element-title {
                        /* min-height: var(--menu-item-min-height-smaller); */
                        min-height: unset;
                        margin-top: 10px;
                        margin-bottom: 5px;

                        &>.bar-nav--drawer-element-title-text {
                            * {
                                font-weight: 800;
                            }
                        }
                    }

                    margin-bottom: .5em;
                }

                .child-element {
                    .bar-nav--drawer-element-title {
                        .bar-nav--drawer-element-title-text {
                            font-size: var(--menu-font-size-smaller);
                        }

                        /* min-height: var(--menu-item-min-height-smaller); */
                        min-height: unset;
                        margin-top: 5px;
                        margin-bottom: 5px;
                    }
                }
            }
        }

        &:has(#schoolsbutton:hover) #customSchoolsDropdown {
            display: block !important;
        }
    }
}


/* END Drodpown Edits */


#cms-header {
    position: relative;

    #h3 {
        .mobile-header {
            padding-top: 0;

            .main-content {
                padding-top: 16px;
                padding-bottom: 16px;
            }

            .logo {
                margin-bottom: 0;

                @media screen and (max-width: 599px) {
                    img {
                        max-width: 240px;
                    }
                }
            }
        }
    }
}

/* Extended Schools Dropdown START */

#customSchoolsDropdown {
    --school-dd-bg-color: #fff;
    --school-dd-text-color: var(--dark-text-color);
    --school-tablist-text-color: var(--dark-text-color);
    overflow: auto;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-thumb {
        background: #888;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

}


/* Schools button order for suborgs */
body:not(.spring-branch-isd) {
    #app {
        #cms-header {
            #m5 {
                .options-wrapper:has(#schoolsbutton) {
                    order: 7;
                }
            }
        }
    }
}

/* District ? What's the order here? 2nd item ?*/
body.spring-branch-isd {
    #app {
        #cms-header {
            #m5 {
                .options-wrapper:has(#schoolsbutton) {
                    &+.options-wrapper {
                        order: -1;
                    }
                }
            }
        }
    }
}

@media (min-width: 1200px) {

    #customSchoolsDropdown {
        box-shadow: none;
        /* border-top: 1px solid #cacaca; */
        padding-left: var(--menu-side-padding);
        padding-right: var(--menu-side-padding);

        max-height: var(--schoolsDropdown-max-height);

        .filter-area {
            display: none;
        }

        .tablist {
            display: none;
            background-color: unset;

            button {
                border: none;
            }
        }

        .tabpanes {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            column-gap: 15px;
            margin-top: unset;
            padding: 0;
            height: auto;

            &:has(.tabcontent:nth-child(2)) {
                grid-template-columns: repeat(2, 1fr);
            }

            &:has(.tabcontent:nth-child(3)) {
                grid-template-columns: repeat(3, 1fr);
            }

            &:has(.tabcontent:nth-child(4)) {
                grid-template-columns: repeat(4, 1fr);
            }

            &:has(.tabcontent:nth-child(5)) {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        .tabcontent {
            display: block;
            padding-top: unset;

            .tabcontent__title {
                display: block;
                min-height: var(--menu-item-min-height);
                align-content: center;
                font-size: 16px;
                line-height: 1.1;
                font-weight: 800;
            }

            .custom-schools-list {
                display: block;
                margin-top: unset;

                .custom-school-button {
                    padding: 0;
                    min-height: var(--menu-item-min-height-smaller);
                    align-items: center;
                    font-size: 16px;
                    font-size: var(--menu-font-size-smaller);
                    line-height: 1.1;
                    font-weight: 500;

                }

                &+.tabcontent__title {
                    margin-top: .75em;
                }
            }
        }

    }
}

body.spring-branch-isd {
    @media (min-width: 1200px) {

        #customSchoolsDropdown {
            --schoolsDropdown-max-height: calc(100vh - 1rem - var(--top-bar-vertical-padding) * 2 - var(--max-logo-height) - var(--menu-height));
        }
    }
}

#app {
    #h3 {
        #mainmenu {
            .bar-nav--drawer-element.mobile-element.new-mobile-header:has(#schools-header) {
                display: block;
            }

            .bar-nav--drawer-element.mobile-element.new-mobile-header:has(#explore-header) {
                display: none;
            }
        }

        .mobile-header {
            #schoolsbutton {
                display: none;
            }
        }
    }
}

.spring-branch-isd #app {
    #h3 {
        #mainmenu {
            .mobile-menu-wrapper {
                display: flex;
                flex-direction: column;

                .search-translate-buttons,
                .utilities-wrapper {
                    order: -2;
                }
            }

            .bar-nav--drawer-element.mobile-element.new-mobile-header:has(#explore-header) {

                &+.bar-nav--drawer-element.mobile-element.new-mobile-header {
                    order: -1;
                }
            }
        }
    }
}

/* extended menu schools for Schools */
body:not(.spring-branch-isd) {

    .bar-nav-item-wrapper .options-wrapper:has(#schoolsbutton),
    #h3 #mainmenu .bar-nav--drawer-element.mobile-element.new-mobile-header:has(#schools-header) {
        display: none !important;
    }

    #cms-header.has-schools-menu-locked #customSchoolsDropdown {
        display: block !important;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        .tabpanes {
            height: calc(100vh - 110px);
            min-height: unset;
            margin-top: 5px !important;
        }

        .filter-area input {
            padding-block: .4em;
            margin-top: 11px;
        }

        .close-school-menu {
            display: inline-flex !important;
            /* Reset button defaults */
            appearance: none;
            border: 0;
            background: transparent;
            padding: 0;
            cursor: pointer;

            /* Size & shape */
            width: 2rem;
            height: 2rem;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: 10px;
            top: 5px;

            /* Hide the "Close" text but keep it for screen readers */
            font-size: 0;
            color: var(--school-dd-text-color);
            transition: color 0.2s ease;
        }

        .close-school-menu::before,
        .close-school-menu::after {
            content: "";
            position: absolute;
            width: 1.25rem;
            height: 2px;
            background-color: currentColor;
            border-radius: 1px;
            transition: background-color 0.2s ease;
        }

        .close-school-menu::before {
            transform: rotate(45deg);
        }

        .close-school-menu::after {
            transform: rotate(-45deg);
        }

        .close-school-menu:hover,
        .close-school-menu:focus-visible {
            color: var(--primary-color);
        }
    }
}

:root:has(#cms-header.has-schools-menu-locked) {
    overflow: hidden;
}

#h3 .active-accordion .tabcontent__title {
    background-color: transparent;
}

@media (min-width: 1200px) {
    body:not(.spring-branch-isd) {

        #cms-header.has-schools-menu-locked #customSchoolsDropdown {

            .tabpanes {
                height: auto !important;
                min-height: unset;
                margin-top: 0 !important;
            }

            .tabcontent {
                display: flex;
                flex-direction: column;
            }

            .custom-schools-list {
                border-left: 1px solid #9999;
                padding-left: 6px;
                max-height: unset !important;
                flex: 1;
            }
        }
    }
}

/* END extended menu schools for Schools */
/* Extended Schools Dropdown END */



/* -------------------------------------- */
/* -------- END CMS Header ------------ */
/* -------------------------------------- */


/* -------------------------------------- */
/* ----------- START Gallery ------------ */
/* -------------------------------------- */

@media screen and (min-width: 1201px) {
    #home #cms-gallery {
        #g2 {

            --image-height: 800px !important;
            --playButtonSize: 70px;
            --bottom-offset-for-buttons: 30px;
            position: relative;

            .img-slider {
                z-index: 0;
            }

            .slide:has(.text):after,
            .slide:has(.gallery-text-wrapper):after {
                content: "";
                width: 100%;
                height: 100%;
                display: block;
                background: rgb(0, 0, 0, 0.5);
                background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 75%);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                opacity: 1;
            }

            .text {
                width: 800px;
                z-index: 2;
                background-color: transparent !important;
                left: var(--side-padding);
                top: 50%;
                transform: translate(0, -50%);
                bottom: unset;
                overflow: hidden;
            }

            .text .title {
                margin-left: 0;
                line-height: 1;
                text-shadow: 2px 2px 20px #00000050;
                margin-right: 0;
                margin-bottom: 1.125rem;
            }

            .text .title:after,
            .gallery-text-wrapper .title:after {
                content: '';
                display: block;
                width: var(--title-decoration-width);
                height: var(--title-decoration-height);
                border-radius: 9px;
                background-color: var(--secondary-color);
                margin-top: 20px;
            }

            .text .title h3 {
                font-weight: 600 !important;
                font-size: 42px;
                margin-top: 0.5em;
                margin-bottom: 0.5em;

                @media screen and (max-width: 1499px) {
                    font-size: 32px;
                }
            }

            .text .title h2 {
                font-family: var(--secondary-font);
                font-size: 55px;
                text-transform: uppercase;
                font-weight: 600 !important;
                line-height: var(--homepage-title-line-height);

                @media screen and (max-width: 1499px) {
                    font-size: 48px;
                }
            }

            .gallery-text-wrapper .title,
            .text .title h1 {
                font-family: var(--secondary-font);
                font-size: 110px;
                text-transform: uppercase;
                font-weight: 600 !important;
                line-height: var(--homepage-title-line-height);
                letter-spacing: -0.025em;
                font-size-adjust: none;


                @media screen and (max-width: 1499px) {
                    /* font-size: 64px; */
                }
            }

            .gallery-button {
                display: inline-block;
            }

            .left-arrow.button-action,
            .right-arrow.button-action {
                z-index: 2;
                display: none;
            }

            .gallery-arrows-buttons,
            .position {
                bottom: calc(var(--bottom-offset-for-buttons) + var(--playButtonSize)/2 - 8px);
                right: calc(var(--side-padding) + var(--playButtonSize) + 20px);
                left: unset;
                z-index: 2;

                .swiper-pagination-bullet,
                .button-action {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    opacity: .5;
                    text-shadow: 2px 2px 20px #00000030;

                    &.swiper-pagination-bullet-active,
                    &.active {
                        opacity: 1;
                        background-color: #fff;
                    }
                }
            }

            .play.button-action,
            .pause.button-action {
                right: var(--side-padding);
                left: unset;
                bottom: var(--bottom-offset-for-buttons);
                width: var(--playButtonSize);
                height: var(--playButtonSize);
                border: 1px solid var(--button-color);
                border-radius: 50%;
                overflow: hidden;
                text-shadow: 2px 2px 20px #00000030;
                z-index: 3;

                .button-action-content {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    svg {
                        width: var(--playButtonSize);
                        height: var(--playButtonSize);

                        rect {
                            fill: transparent;
                        }
                    }
                }
            }


        }
    }
}


@media screen and (min-width: 1201px) {
    #home #cms-gallery #g2 {
        @media (max-width: 767px) {

            @media (min-width: 500px) {
                --image-height: 400px !important;
            }

            .video-wrapper,
            .video-wrapper video {
                min-height: unset;
            }

            .gallery-text-wrapper {

                .title {
                    text-shadow: none;
                    font-family: var(--secondary-font);
                    text-transform: uppercase;
                    font-weight: 600;
                    line-height: var(--homepage-title-line-height);
                    letter-spacing: -0.025em;
                    font-size-adjust: none;
                }
            }
        }

        .gallery-arrows-buttons {
            @media (max-width: 1199px) {
                right: var(--side-padding);
                left: unset;
            }

            @media (max-width: 500px) {
                position: static;
                width: 100%;
                margin-top: 20px;
            }
        }

        .gallery-text-arrows {
            @media (max-width: 500px) {
                flex-wrap: wrap;
            }
        }

        .play.button-action,
        .pause.button-action {
            opacity: 1;
            z-index: 3;

            @media (max-width: 767px) {
                @media (min-width: 500px) {
                    bottom: 40px;
                }
            }
        }

        .gallery-text-wrapper .description,
        .text .description {
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            font-weight: 500;
            line-height: var(--homepage-text-line-height);
            text-shadow: 2px 2px 20px #00000050;

            p {
                line-height: inherit;
                font-size: inherit;
                font-weight: inherit;
                text-shadow: inherit;

                &+p {
                    margin-top: 1.125rem;
                }
            }

            @media screen and (max-width: 1499px) {
                font-size: 20px;
            }

            @media (max-width: 767px) {
                font-size: 18px;
            }

        }



        .gallery-text-arrows {
            height: 100%;
            padding: 20px var(--side-padding);
            z-index: 2;
            display: flex !important;
            align-items: center;
            background: none !important;

            @media (max-width: 767px) {
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .gallery-swiper-button-prev,
            .gallery-swiper-button-next {
                display: none;
            }
        }
    }
}

#home #cms-gallery #g2 {

    .text .description a,
    .gallery-button a {
        font-size: var(--homepage-button-font-size);
        line-height: var(--homepage-button-line-height);
        display: inline-block;
        text-align: center;
        padding: 15px;
        min-width: var(--homepage-button-min-width);
        text-decoration: none;
        border-radius: 2em;
        text-shadow: none;
        border: 1px solid var(--primary-color);
        background-color: var(--primary-color);
        border-color: currentColor;
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--gallery-button-color, currentColor);
        transition: color var(--transition-time) linear, background-color var(--transition-time) linear, border-color var(--transition-time) linear;
        font-weight: var(--homepage-button-font-weight);
        margin-top: 25px;
        margin-bottom: 2px;

        @media (max-width: 500px) {
            margin-top: 10px;
        }

        @media screen and (max-width: 1499px) {
            font-size: 18px;
        }

        &:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
    }

    .gallery-text-arrows {
        color: #fff;

        .gallery-text-wrapper {
            transition-property: transform;
            align-items: center;

            .swiper-slide {
                min-height: 450px;

                .title,
                .description,
                .gallery-button-row {
                    opacity: 0;
                    transition: opacity var(--transition-time) linear;
                }
            }

            .swiper-slide-active {

                .title,
                .description,
                .gallery-button-row {
                    opacity: 1;
                }
            }
        }
    }
}

/* -------------------------------------- */
/* ------------ END Gallery ------------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* ------------ START Buttons ----------- */
/* -------------------------------------- */

#home #buttons-b3 {
    --button-font-size: var(--homepage-font-size);
    --button-icon-size: 36px;
    --button-height: 140px;

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

        --button-font-size: 16px;
        --button-icon-size: 22px;
        --button-height: 60px;
    }

    .button {
        height: var(--button-height);
        container-type: inline-size;

        &:first-child {
            border-left: var(--button-border);
        }

        &:last-child {
            border-right: var(--button-border);
        }

        .button-link {
            display: block;
            width: 100%;
            padding-top: calc((var(--button-height) - var(--button-icon-size) - var(--button-font-size) - var(--button-icon-size)/2.5)/2);
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 5px;
            letter-spacing: unset;

            .button-title {
                display: block;
                font-weight: 400;
                text-transform: capitalize;
                font-size: var(--button-font-size);
                line-height: 1;
            }

            .icon-wrapper {
                height: var(--button-icon-size);
                margin-bottom: calc(var(--button-icon-size)/2.5);

                .raw-svg {
                    span {
                        width: var(--button-icon-size);
                        height: var(--button-icon-size);

                        svg {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

        }

        @media screen and (max-width: 599px) {
            .button-link {
                display: flex;
                align-items: center;
                padding-left: var(--side-padding);
                padding-right: var(--side-padding);

                .icon-wrapper {
                    margin-bottom: unset;
                }
            }
        }

        @container (width < 220px) {

            .button-link {
                /* display: none; */
                --button-font-size: 16px;
            }
        }
    }
}

#home .main #buttons-b3 {
    @media (min-width: 600px) {
        background-color: var(--button-bg-color);

        .wrapper {
            max-width: calc((100cqw - var(--side-padding) * 2));
            margin-left: auto;
            margin-right: auto;
        }
    }
}

/* -------------------------------------- */
/* ------------ END Buttons ------------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* ------------ START Videos ------------ */
/* -------------------------------------- */

/* DISTRICT */
body.spring-branch-isd {
    #app #video-component {
        .wrapper {
            .sidebar {
                .sidebar-item {
                    &:nth-child(4) {
                        display: none;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1200px) {
        #app #video-component {
            padding-left: var(--side-padding);
            padding-right: var(--side-padding);
            padding-top: var(--section-padding-top);
            /* --border-radius: 3px; */

            .wrapper {
                display: flex;
                justify-content: space-between;

                .sidebar {
                    width: 32%;
                    max-width: unset;
                    flex: unset;
                    justify-content: space-between;

                    #sidebar-item-3 {
                        display: none;
                    }

                    .sidebar-item {
                        padding: 15px;
                        /* border-radius: 6px 0 0 6px; */
                        transition: background-color var(--transition-time) linear;

                        @media screen and (max-width: 1499px) {
                            padding: 10px;
                        }

                        &:nth-child(3) {
                            margin-bottom: 0;
                        }

                        &:nth-child(4) {
                            display: none;
                        }

                        &:hover {
                            background-color: #f9f8f8;
                        }

                        &.active {
                            background-color: #fff;
                        }

                        .video {
                            aspect-ratio: unset;
                        }

                        .video-mask {
                            display: flex;
                            align-items: center;
                            grid-area: unset;

                            .button {
                                display: none;
                            }

                            .secondary-title {
                                position: static;
                                order: 2;
                                color: var(--dark-text-color);
                                width: 200px;
                                flex-shrink: 0;
                                text-align: center;
                                padding-left: 10px;
                                padding-right: 10px;
                                font-weight: 400;
                                font-size: var(--homepage-font-size);
                                line-height: var(--homepage-text-line-height);
                                letter-spacing: unset;
                                font-weight: 700;
                            }

                            .thumbnail {
                                position: static;
                                aspect-ratio: 16/9;
                                font-size: 0;

                                img {
                                    position: static;
                                    border-radius: var(--border-radius);
                                }
                            }
                        }

                    }
                }

                .main-video {
                    order: 2;
                    margin-right: unset;
                    width: 68%;
                    flex: unset;

                    .video-info {
                        display: none;
                    }
                }
            }
        }
    }

    #home .videos-section-custom-button {
        padding-top: 25px;
        padding-bottom: 80px;
        padding-left: var(--side-padding, 32px);
        padding-right: var(--side-padding, 32px);
        padding-bottom: var(--section-padding-bottom);

        @media (max-width: 1199px) {
            padding-top: unset;
        }

        .see-all-bottom {
            display: block;
            margin-top: unset;
        }
    }
}

/* SCHOOLS */

body:not(.spring-branch-isd) {
    #view-video {
        #video-component {
            --desc-area-width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 0 4px var(--side-padding);

            @media (max-width: 1499px) {
                --desc-area-width: 350px;
            }

            @media (max-width: 1024px) {
                flex-wrap: wrap;
                padding: 20px var(--side-padding);
            }


            .wrapper {
                aspect-ratio: 16/9;
                width: calc(100% - var(--desc-area-width) - 100px);

                @media (max-width: 1499px) {
                    width: calc(100% - var(--desc-area-width) - 50px);
                }

                @media (max-width: 1024px) {
                    width: 100%;
                }

                .main-video {
                    width: 100%;
                    margin-right: unset;
                    flex: unset;
                    max-width: unset;
                }

                .video-info {
                    display: none;
                }
            }
        }

        .video-details-section {
            .video-details-buttons {
                a {
                    text-align: center;
                    border-color: var(--heading-color);
                    color: var(--heading-color);

                    &:before {
                        display: none;
                    }

                    &:hover {
                        background-color: var(--heading-color);
                        color: var(--bg-color);
                    }
                }
            }
        }
    }

    .video-details-section {
        width: var(--desc-area-width);
        padding-top: 1em;
        padding-bottom: 1em;

        @media (max-width: 1024px) {
            width: 100%;
        }

        .video-details-title {
            color: var(--heading-color);
            font-family: var(--secondary-font);
            font-size: var(--section-title-font-size-md);
            font-weight: 800;
            line-height: var(--homepage-title-line-height);

            @media (max-width: 1024px) {
                text-align: center;
            }
        }

        .video-details-desc {
            margin-top: .5em;
            color: var(--heading-color);
            font-size: var(--homepage-section-description-font-size);
            line-height: 1.4;

            @media (max-width: 1024px) {
                text-align: center;
            }
        }

        .video-details-buttons {

            @media (max-width: 1024px) {
                .video-buttons-list {
                    display: flex;
                    flex-wrap: wrap;
                    column-gap: 1em;
                }
            }

            .video-buttons-item {
                margin-top: 1em;

                a {
                    text-align: center;
                    border-color: var(--heading-color);
                    color: var(--heading-color);

                    &:before {
                        display: none;
                    }

                    &:hover {
                        background-color: var(--heading-color);
                        color: var(--bg-color);
                    }
                }
            }
        }
    }


    #home:not(:has(#video-component)) {
        .video-details-section {
            padding-left: var(--side-padding);
            padding-right: var(--side-padding);
            text-align: center;

            .video-details-desc {
                margin-top: 1.5em;
                margin-bottom: 1em;
            }

            .video-details-buttons {
                .video-buttons-list {
                    display: flex;
                    column-gap: 20px;
                }
            }
        }
    }
}

/* -------------------------------------- */
/* ------------ END Videos -------------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* ------------- START News ------------- */
/* -------------------------------------- */
@media (min-width: 1325px) {
    .spring-branch-isd #custom-news-v10 {
        --side-padding: calc((100cqw - 1260px) / 2);
    }
}

#custom-news-v10 {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    /* --border-radius: 3px; */
    --column-gap: 30px;

    @media screen and (max-width: 1499px) {
        --column-gap: 20px;
    }

    @media screen and (max-width: 599px) {
        --column-gap: 10px;
    }

    .news-article-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--column-gap);

        @media screen and (max-width: 1199px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media screen and (max-width: 767px) {
            grid-template-columns: repeat(2, 1fr);
        }

        .news-article {

            display: block;
            margin-top: 30px;
            text-decoration: none;
            color: var(--dark-text-color);

            .news-article__image {
                width: 100%;
                aspect-ratio: 10/6.5;
                font-size: 0;
                opacity: 1;
                transition: opacity var(--transition-time) linear;

                .cover-image {
                    aspect-ratio: 10/6.5;
                    font-size: 0;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .news-article__content {
                width: 100%;
                margin-top: 15px;

                .news-article__title {

                    h3 {
                        font-size: var(--homepage-font-size);
                        --line-height: 1.4;
                    }

                    a {
                        color: inherit;
                        text-decoration: none;
                    }

                    @media screen and (max-width: 1499px) {
                        h3 {
                            font-weight: 600;
                            --lines-to-show: 2;

                            display: block;
                            display: -webkit-box;
                            font-size: var(--font-size);
                            line-height: var(--line-height);
                            height: calc(var(--line-height) * var(--lines-to-show));
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: var(--lines-to-show);
                        }
                    }
                }
            }

            &:hover {
                .news-article__title {
                    color: var(--primary-color);
                }
            }

            .news-article__snippet,
            .news-article__readmore {
                display: none;
            }

            img {
                max-width: 100%;
                border-radius: var(--border-radius);
            }
        }
    }

    .see-all-bottom {
        display: block;
        margin-top: 3em;
    }
}

body.spring-branch-isd {
    #custom-news-v10 {
        .news-article-list {
            .news-article {
                &:nth-child(1) {
                    display: flex;
                    justify-content: space-between;
                    grid-column: 1 / -1;
                    /* align-items: center; */

                    @media screen and (max-width: 767px) {
                        flex-wrap: wrap;
                    }

                    .news-article__image {
                        width: calc(50% - var(--column-gap)/2);

                        .cover-image {
                            font-size: 0;
                        }

                        @media screen and (max-width: 767px) {
                            width: 100%;
                        }
                    }

                    .news-article__content {
                        width: calc(50% - var(--column-gap)/2);

                        @media screen and (max-width: 1199px) {
                            width: calc(50% - var(--column-gap)/2);
                        }

                        @media screen and (max-width: 767px) {
                            width: 100%;
                            margin-top: 1em;
                        }

                        .news-article__title {
                            font-size: 28px;
                            line-height: 1.2;
                            margin-top: 3em;

                            h3 {
                                font-size: 1em;
                            }

                            a {
                                color: inherit;
                                text-decoration: none;
                            }

                            @media screen and (max-width: 1499px) {
                                font-size: 24px;
                                margin-top: 2em;
                            }

                            @media screen and (max-width: 1199px) {
                                font-size: 22px;
                                line-height: 1.2;
                                margin-top: 1em;
                            }

                            @media screen and (max-width: 959px) {
                                font-size: 20px;
                                margin-top: 0.5em;
                            }

                            @media screen and (max-width: 767px) {
                                margin-top: unset;
                            }

                        }

                        .news-article__snippet {
                            margin-top: .75em;
                            font-size: var(--homepage-section-description-font-size);
                            line-height: var(--homepage-text-line-height);
                        }

                        .news-article__readmore {
                            margin-top: 1em;
                            padding: 15px;
                            font-size: var(--homepage-button-font-size);
                            line-height: var(--homepage-button-line-height);
                            min-width: var(--homepage-button-min-width);
                            font-weight: var(--homepage-button-font-weight);
                            display: inline-block;
                            text-align: center;
                            text-decoration: none;
                            border-radius: 2em;
                            text-shadow: none;
                            border: 1px solid var(--primary-color);
                            background-color: var(--primary-color-contrast);
                            color: var(--primary-color);
                            transition: color var(--transition-time) linear, background-color var(--transition-time) linear;

                            &:hover {
                                background-color: var(--primary-color);
                                color: var(--primary-color-contrast);
                            }
                        }
                    }

                    .news-article__snippet,
                    .news-article__readmore {
                        display: block;
                    }
                }

                &:nth-child(5) {
                    @media screen and (max-width: 1199px) {
                        display: none;
                    }

                    @media screen and (max-width: 767px) {
                        display: block;
                    }
                }
            }
        }
    }
}

body:not(.spring-branch-isd) {
    #custom-news-v10 {
        .news-article-list {
            .news-article {
                &:nth-child(5) {
                    display: none;
                }

                @media (max-width: 1199px) {
                    &:nth-child(4) {
                        display: none;
                    }
                }

                @media (max-width: 767px) {
                    &:nth-child(4) {
                        display: block;
                    }
                }
            }
        }
    }
}

/* -------------------------------------- */
/* -------------- END News -------------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* -------------- START CTA ------------- */
/* -------------------------------------- */

#app #custom-parallax-v4-cta {
    --custom-cta-overlay-color: var(--dark-text-color);
    --custom-cta-overlay-opacity: 0.65;
    --custom-cta-btn-bg-color: var(--primary-color);
    --custom-cta-btn-border-color: var(--primary-color-contrast);
    --custom-cta-btn-text-color: var(--primary-color-contrast);

    .cust-hero-content {
        padding-top: var(--section-padding-top);
        padding-bottom: var(--section-padding-bottom);
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }

    .cust-hero-desc {
        font-size: var(--homepage-section-description-font-size);
        line-height: var(--homepage-text-line-height);
        max-width: 900px;
    }

    .cust-hero-box {
        border: none;
        margin: 0;
        padding: 0;
    }

    .cust-hero-subtitle {
        text-transform: unset;

        span:not(.only-in-cms) {
            font-size: 40px;
        }
    }

    .see-all-container h2 {
        font-weight: 800;
    }

    .cust-hero-actions {
        max-width: 800px;

        &>div {
            &>div {
                width: 48%;

                @media screen and (max-width: 767px) {
                    width: 100%;
                }

                .see-all-button-custom {
                    width: 100%;

                    a {
                        border: 1px solid var(--custom-cta-btn-border-color);
                        width: 100%;
                        background-color: color-mix(in srgb, var(--custom-cta-btn-bg-color) 75%, transparent);

                        &:before {
                            display: none;
                        }

                        &:hover {
                            background-color: var(--custom-cta-btn-text-color);
                            border-color: var(--custom-cta-btn-text-color);
                            color: var(--custom-cta-btn-bg-color);
                        }
                    }
                }
            }
        }
    }
}


/* -------------------------------------- */
/* --------------- END CTA -------------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* ---------- START EVENTS V21 ---------- */
/* -------------------------------------- */

#custom-events-v21 {
    background-color: var(--custom-events-v21-bg, #f1f1f1);
    color: var(--custom-events-v21-section-title-color, var(--dark-text-color));
    /* padding left and right should be at least the size of the arrow buttons */

    --font-size: 16px;
    --decoration-unit-size: 16px;
    --button-size: calc(var(--decoration-unit-size) * 4);

    padding-left: calc(var(--side-padding) + var(--button-size));
    padding-right: calc(var(--side-padding) + var(--button-size));

    @media screen and (max-width: 1699px) {
        --decoration-unit-size: 12px;
    }

    @media screen and (max-width: 1499px) {
        --font-size: 15px;
    }

    @media screen and (max-width: 1199px) {
        --font-size: 14px;
        padding-left: var(--side-padding);
        padding-right: var(--side-padding);
    }

    @media screen and (max-width: 959px) {
        --font-size: 13px;
    }

    @media screen and (max-width: 767px) {
        --font-size: 12px;
    }

    @media screen and (max-width: 599px) {
        --button-size: calc(var(--decoration-unit-size) * 2.5);
    }

    .see-all-button {
        background-color: var(--custom-events-v21-section-button-bg-color, var(--primary-color));
        color: var(--custom-events-v21-section-button-text-color, #fff);
    }

    .custom-swiper-container {
        position: relative;
    }

    .custom-swiper-navigation {
        justify-content: center;
        margin-top: 40px;
    }

    .event-item {
        display: block;
        text-decoration: none;
        min-height: 175px;
        padding-left: 20px;
        padding-right: 20px;

        @media screen and (max-width: 1199px) {
            min-height: unset;
            padding-left: 0;
        }

        .event-item-link:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            width: calc(var(--decoration-unit-size) * 3);
            height: calc(var(--decoration-unit-size) * 3);
            bottom: calc(var(--decoration-unit-size) * -1.5);
            background-color: var(--custom-events-v21-bg, #f1f1f1);
            z-index: 1;
            border: 1px solid var(--decoration-color, var(--primary-color));
            border-radius: 50%;
            box-sizing: border-box;
            transition: background-color var(--transition-time) linear;

            @media screen and (max-width: 1199px) {
                display: none;
            }
        }

        &:hover {
            &:after {
                /* background-color: var(--decoration-color, var(--primary-color)); */
            }
        }
    }

    .event-item__title {
        /* font-size: var(--homepage-section-description-font-size); */
        font-size: var(--homepage-font-size);
        margin-top: .5em;
        color: var(--custom-events-v21-title-text-color, var(--primary-color));
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        font-weight: 800;
        line-height: 1.25;
        transition: color var(--transition-time) linear;

        @media screen and (max-width: 1199px) {
            text-align: center;
        }
    }

    .event-item__date {
        width: 100%;
        margin: 0;
        justify-content: flex-start;

        .date {
            display: flex;
            align-items: center;
            grid-gap: .35em;

            @media screen and (max-width: 1199px) {
                justify-content: center;
            }

            .start-month,
            .start-date,
            .date-separator,
            .end-date,
            .end-month {
                color: var(--custom-events-v21-item-title-color, var(--dark-text-color));
                display: block;
                /* font-size: var(--section-subtitle-font-size); */
                font-size: 28px;
                font-weight: 800;
                text-transform: none;
                line-height: 1;
            }
        }

        .start-weekday,
        .end-weekday {
            display: none;
        }
    }

    .event-item__time {
        margin-top: .75em;
        color: var(--custom-events-v21-time-text-color, var(--dark-text-color));
        transition: color var(--transition-time) linear;

        .time {
            display: flex;
            column-gap: 5px;

            @media screen and (max-width: 1199px) {
                text-align: center;
                justify-content: center;
            }

        }
    }

    .see-all-bottom {
        display: block;
        margin-top: 3em;

        @media screen and (max-width: 1199px) {
            display: none;
        }
    }

    .custom-events-v21-slider {
        padding-bottom: calc(var(--decoration-unit-size) * 1.5);
        padding-left: calc(var(--decoration-unit-size) * 2);

        @media screen and (max-width: 1199px) {
            padding-left: unset;
        }

        &:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: var(--decoration-color, var(--primary-color));

            @media screen and (max-width: 1199px) {
                display: none;
            }
        }
    }

    .custom-swiper-navigation:has(.custom-swiper-prev.swiper-button-disabled):has(.custom-swiper-next.swiper-button-disabled) {
        display: flex !important;
    }

    .custom-swiper-navigation {
        margin-top: 0;
        width: calc(100% + var(--decoration-unit-size) * 8);
        height: calc(var(--decoration-unit-size) * 4);
        margin-top: calc(var(--decoration-unit-size) * -3.5);
        margin-left: calc(var(--decoration-unit-size) * -4);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color var(--transition-time) linear;

        .see-all-bottom {
            display: none;
        }

        @media screen and (max-width: 1199px) {
            width: 100%;
            margin-left: unset;
            margin-top: 15px;

            .see-all-bottom {
                display: block;
                margin-top: 0;
            }
        }

        .custom-swiper-prev-wrap {
            width: var(--button-size);
            height: var(--button-size);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--decoration-color, var(--primary-color));
            border-radius: 50%;
            box-sizing: border-box;
            color: var(--decoration-color, var(--primary-color));

            .custom-swiper-next,
            .custom-swiper-prev {
                width: 100%;
                height: 100%;
                margin-left: 0;
                margin-right: 0;
                transition: all var(--transition-time) linear;

                &.custom-swiper-prev-2,
                &.custom-swiper-next-2 {
                    mask-size: 60%;
                }
            }

            &:has(.custom-swiper-prev:hover),
            &:has(.custom-swiper-next:hover) {
                background-color: var(--decoration-color, var(--primary-color));
                color: #fff;


                border-color: color-mix(in srgb, var(--primary-color), #000 20%);
                background-color: color-mix(in srgb, var(--primary-color), #000 20%);
            }
        }
    }
}

/* -------------------------------------- */
/* ----------- END EVENTS V21 ----------- */
/* -------------------------------------- */



#app .custom-events-v21 {
    --custom-events-v21-item-title-color: var(--primary-color);
    --custom-events-v21-title-text-color: var(--dark-text-color);

    --decoration-color: var(--dark-text-color);
    padding-top: 100px;
    padding-bottom: 100px;

    .event-item {
        &:hover {

            .event-item__title,
            .event-item__time {
                color: var(--dark-text-color);
            }
        }
    }

    @media screen and (max-width: 1499px) {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    @media screen and (max-width: 1199px) {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


body:not(.spring-branch-isd) {
    #app .custom-events-v21 {
        --custom-events-v21-bg: #fff;
    }
}

/* -------------------------------------- */
/* ------- START LIVE FEED EDITS -------- */
/* -------------------------------------- */
@media only screen and (min-width: 1200px) {
    #home #cms-live-feed {
        --control-button-width: 60px;
        --section-inner-padding: calc(var(--control-button-width) + 20px);

        @media screen and (max-width: 1699px) {
            --control-button-width: 40px;
        }

        .wrapper {
            padding-top: var(--section-padding-top);
            padding-left: var(--side-padding);
            padding-right: var(--side-padding);
            --radius: var(--border-radius);

            .cards-slider {
                padding-left: var(--section-inner-padding);
                padding-right: var(--section-inner-padding);
                position: relative;

                .card {

                    .card-gallery,
                    .card-content {
                        top: calc(100% - 82px);
                        /* width: calc((100cqw - var(--side-padding) * 2) / 4 - 15px); */
                        /* height: calc((100cqw - var(--side-padding) * 2) / 4 - 15px); */
                        width: calc((100cqw - var(--side-padding) * 2 - var(--section-inner-padding) * 2) / 4 - 15px);
                        height: calc((100cqw - var(--side-padding) * 2 - var(--section-inner-padding) * 2) / 4 - 15px);

                        @media screen and (max-width: 1400px) {
                            width: calc((100cqw - var(--side-padding) * 2) / 4 - 7.5px);
                            height: calc((100cqw - var(--side-padding) * 2) / 4 - 7.5px);
                            min-height: 300px;
                        }

                        .card-header {
                            display: flex;

                            .time-ago {
                                display: none;
                            }

                            img {
                                flex-shrink: 0;
                            }

                            .author {
                                width: 100%;
                            }
                        }
                    }

                    .card-description {
                        font-size: 15px;
                        line-height: 1.2;
                        text-align: left !important;

                        @media screen and (max-width: 1699px) {
                            padding: 15px;
                        }

                        @media screen and (max-width: 1499px) {
                            font-size: 14px;
                            line-height: 1.2;
                        }
                    }
                }
            }

            .slider-button {
                width: var(--control-button-width);
                height: var(--control-button-width);
                padding-right: 0;
                background-color: transparent;
                transition: background-color var(--transition-time) linear;

                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: var(--arrow-border-color);
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 22v-20l-18 10 18 10z'/%3E%3C/svg%3E");
                    mask-position: center;
                    mask-repeat: no-repeat;
                    mask-size: 50%;
                    mask-position: top 50% left 40%;
                    border: none;
                    transform: none;
                    transition: background-color var(--transition-time) linear;
                }


                &:hover {
                    /* background-color: var(--arrow-border-color); */
                    border-color: color-mix(in srgb, var(--primary-color), #000 20%);
                    background-color: color-mix(in srgb, var(--primary-color), #000 20%);

                    &:after {
                        background-color: var(--button-text-color);
                    }
                }

                svg {
                    display: none;
                }
            }

            .slider-button.left {
                /* left: calc(var(--side-padding) - var(--control-button-width) - 20px); */
                left: 0;
                padding-left: unset;
            }

            .slider-button.right {
                /* right: calc(var(--side-padding) - var(--control-button-width) - 20px); */
                right: 0;

                &:after {
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 22v-20l18 10-18 10z'/%3E%3C/svg%3E");
                    mask-position: top 50% left 60%;
                }
            }

        }
    }
}

@media screen and (min-width: 600px) {
    #home #cms-live-feed {
        .wrapper {
            position: relative;
            padding-bottom: calc(var(--section-padding-bottom) + 101px);

            .see-all-top {
                position: static;

                .see-all-button {
                    position: absolute;
                    bottom: var(--section-padding-bottom);
                }
            }
        }
    }
}

#home #cms-live-feed {
    .wrapper {
        .cards-wrapper {
            .card {
                .card-content {
                    max-width: 100%;

                    .card-description {
                        font-size: var(--homepage-button-font-size);
                    }
                }
            }
        }
    }
}

@media (max-width: 599px) {
    #home #cms-live-feed {
        .wrapper {
            .cards-wrapper {
                .card {
                    .card-content {
                        max-width: 100%;

                        .card-description {
                            font-size: var(--homepage-button-font-size);
                        }
                    }
                }
            }
        }
    }
}



/* -------------------------------------- */
/* -------- END LIVE FEED EDITS --------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* --------- START HIGHLIGHTS V6 -------- */
/* -------------------------------------- */

.highlights-v6 {
    --side-padding: calc((100cqw - 1260px) / 2);
    --layer1-section-bg-color: #f1f1f1;
    --top-offset: 90px;
    --left-side: 478px;
    --gap: 40px;
    background-color: var(--layer1-section-bg-color, #fff);
    padding-top: calc(var(--top-offset)/2);
    column-gap: var(--gap);

    @media screen and (max-width: 1499px) {
        --top-offset: 80px;
    }

    @media (max-width: 1324px) {
        --side-padding: 32px;
    }

    @media (max-width: 1199px) {
        --left-side: 40%;
    }

    @media screen and (max-width: 599px) {
        --side-padding: 20px;
    }

    .highlights-v6-wrap {
        display: flex;
        justify-content: space-between;
        background-color: var(--section-bg-color, var(--primary-color));
        color: var(--section-text-color, var(--primary-color-contrast));
        padding-left: var(--side-padding, 32px);
        padding-right: var(--side-padding, 32px);
        padding-top: calc(var(--top-offset)/2);
        padding-bottom: 55px;

        @media screen and (max-width: 991px) {
            flex-wrap: wrap;
        }
    }

    .highlights-v6__left {
        width: var(--left-side);
        text-align: left;


        @media screen and (max-width: 991px) {
            width: 100%;
            padding-right: unset;
            max-width: 610px;
            margin-left: auto;
            margin-right: auto;
        }

        .header-slot-container {
            text-align: left;

            @media screen and (max-width: 1499px) {
                margin-bottom: 20px;
            }
        }

        .highlights-v6-desc {
            font-size: var(--homepage-section-description-font-size);
            line-height: var(--homepage-text-line-height);

            @media screen and (max-width: 1499px) {
                font-size: 16px;
            }
        }

        .highlights-v6-button {
            margin-top: 1.5em;

            .see-all-button-custom a {

                &:after {
                    content: '';
                    display: inline-block;
                    width: 1em;
                    height: 1em;
                    background-color: currentColor;
                    mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z' fill-rule='nonzero'/%3E%3C/svg%3E");
                    transform: translate(0);
                    transition: transform var(--transition-time) linear;
                    display: none;
                }

                &:hover {
                    color: var(--section-bg-color, var(--primary-color));
                    background-color: var(--section-text-color, var(--primary-color-contrast));

                    &:after {
                        /* animation: arrow-bounce 0.6s ease-in-out infinite alternate; */
                    }
                }
            }
        }
    }

    .highlights-v6__right {
        width: calc(100% - var(--left-side) - var(--gap));
        padding-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        @media screen and (max-width: 991px) {
            width: 100%;
            padding-left: unset;
            max-width: 740px;
            margin-left: auto;
            margin-right: auto;
        }

        .highlights-v6-list {
            display: flex;
            column-gap: var(--gap);
            margin-top: calc(var(--top-offset) * -1);

            @media screen and (max-width: 991px) {
                margin-top: 30px;
            }

            @media screen and (max-width: 599px) {
                flex-wrap: wrap;
            }

            &>div {
                width: 50%;
                border-radius: var(--border-radius);
                overflow: hidden;

                @media screen and (max-width: 599px) {
                    width: 100%;
                    margin-top: 20px;
                }
            }
        }

        .highlights-v6-item {
            .highlights-v6-item__image {
                span {
                    display: block;
                    font-size: 0;
                    aspect-ratio: 1/1;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: all var(--transition-time) linear;
                    }
                }

                a {
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        inset: 0;
                        background-color: #000;
                        opacity: .15;
                        transition: all var(--transition-time) linear;
                    }

                    &:hover {
                        &:after {
                            opacity: 0;
                        }

                        img {
                            transform: scale(1.05);
                        }
                    }
                }
            }

            .highlights-v6-item__title {
                display: block;
                position: relative;
                z-index: 2;

                .highlight-item-title {
                    display: block;

                    a {
                        padding-top: 0.75em;
                        padding-bottom: 0.75em;
                        background-color: var(--section-text-color, var(--primary-color-contrast));
                        color: var(--dark-text-color, var(--primary-color));
                        text-align: center;
                        text-decoration: none;
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 18px;
                        font-weight: 500;
                        column-gap: 5px;

                        @media screen and (max-width: 1499px) {
                            font-size: 16px;
                        }

                        &:after {
                            content: '';
                            display: inline-block;
                            width: 1em;
                            height: 1em;
                            background-color: currentColor;
                            mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z' fill-rule='nonzero'/%3E%3C/svg%3E");
                            transform: translate(0);
                            transition: transform var(--transition-time) linear;
                        }

                        &:hover {
                            &:after {
                                /* animation: arrow-bounce 0.6s ease-in-out infinite alternate; */
                            }
                        }
                    }
                }
            }

            &:has(.highlights-v6-item__image a:hover) {
                .highlights-v6-item__title {
                    a:after {
                        /* animation: arrow-bounce 0.6s ease-in-out infinite alternate; */
                    }
                }
            }
        }
    }
}

#app #home .highlights-v6 {
    .see-all-container {
        margin-bottom: 25px;
    }
}

@keyframes arrow-bounce {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(10px);
    }
}


#home {
    #highlights-v6 {
        .highlights-v6__left {
            .header-slot-container {
                text-align: left;
                justify-content: flex-start;

                &:after {
                    display: none;

                    @media screen and (min-width: 960px) {
                        margin-left: 10%;
                    }
                }
            }

            .highlights-v6-button {
                .see-all-button-custom a {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid var(--section-text-color, var(--primary-color-contrast));
                    background-color: var(--section-bg-color, var(--primary-color));
                    color: var(--section-text-color, var(--primary-color-contrast));
                    column-gap: 8px;

                    &:before {
                        display: none;
                    }

                    &:hover {
                        color: var(--section-bg-color, var(--primary-color));
                        background-color: var(--section-text-color, var(--primary-color-contrast));
                    }
                }
            }
        }
    }
}

/* -------------------------------------- */
/* ---------- END HIGHLIGHTS V6 --------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* --------- START SPONSORS EDITS ---------- */
/* -------------------------------------- */
#scroller-area {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    /* padding-left: var(--side-padding); */
    /* padding-right: var(--side-padding); */

    & .image-container {
        img {
            filter: grayscale(1);
            transition: filter var(--transition-time) linear;
        }

        &:hover {
            img {
                filter: grayscale(0);
            }
        }
    }
}

/* -------------------------------------- */
/* ----------- END SPONSORS EDITS ---------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* --------- START CONTACT AREA ---------- */
/* -------------------------------------- */

#home .contact-section {
    background-color: #f5f5f5;
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5%;

    @media (max-width: 767px) {
        display: block;
        padding-bottom: 40px;
    }

    .contact-section__title {
        font-family: var(--secondary-font);
        font-size: var(--section-title-font-size-md);
        font-weight: 800;
        line-height: var(--homepage-title-line-height);
    }

    .contact-section__column {
        .contact-section__column__top {
            min-height: var(--section-title-font-size-md);
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;

            @media (max-width: 767px) {
                min-height: unset;
            }

            .contact-section__title {
                padding-bottom: 10px;
            }

            .social-media-buttons {
                width: 100%;
                display: flex;
                justify-content: flex-end;
                column-gap: 10px;
                padding-bottom: 10px;

                @media (max-width: 767px) {
                    justify-content: flex-start;
                    margin-top: 1.5em;
                }

                .social-media-button {
                    display: block;
                    width: 30px;
                    height: 30px;
                    background-color: #fff;
                    padding: 5px;
                    border-radius: 50%;

                    span {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }

                    svg,
                    path {
                        fill: #54585a;
                    }
                }
            }
        }

        .contact-column {
            line-height: 1.5;
        }

        .contact-section__bottom {
            border-top: 2px solid #a6a6a6;
            padding-top: 1.5em;
        }
    }
}

/* -------------------------------------- */
/* ----------- END CONTACT EDITS ---------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* --------- START BY THE NUMBERS AREA ---------- */
/* -------------------------------------- */

#app .by-the-numbers-v2 {
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    --section-bg-color: #fff;
    --section-text-color: var(--dark-text-color);

    &.has-no-content {
        display: none;
    }

    &:before,
    &:after {
        display: none;
    }

    .see-all-top {
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-value {
        font-size: var(--section-title-font-size);
        color: var(--primary-color);
        font-weight: 800;
        margin-top: unset;
    }

    .btn-title {
        font-size: 1.5em;

        @media (max-width: 599px) {
            font-size: 1em;
        }
    }

    .bottom-row {
        margin-top: 2em;
        font-size: 1.5em;
        text-align: center;

        @media (max-width: 599px) {
            font-size: 1em;
        }
    }

    .by-the-numbers-wrapper {
        @media (max-width: 599px) {
            display: block;
        }

        &>div {
            margin-top: unset;
        }
    }
}

/* -------------------------------------- */
/* ----------- END BY THE NUMBERS EDITS ---------- */
/* -------------------------------------- */



/* -------------------------------------- */
/* ---------- START FOOTER EDITS ----------- */
/* -------------------------------------- */

#cms-footer #footer-f1 {
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 15px;

    .row {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 2.5em;
    }

    .footer-column-main {
        flex: unset;

        .logo-wrapper {
            text-align: left;

            @media (max-width: 599px) {
                text-align: center;
            }

            .footer-logo {
                width: auto;
                max-width: 250px;
                max-height: 50px;
                padding-bottom: unset;
                margin-bottom: 10px;
            }
        }

        @media (max-width: 1199px) {
            order: 0;
            flex: unset;
            width: 50%;
            margin-bottom: 2em;
        }

        @media screen and (max-width: 599px) {
            padding-top: 30px;
            margin-bottom: 1em;
        }

        p {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.4;

            a {
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .footer-columns {
        max-width: max-content;

        h2 {
            font-size: 16px;
            text-transform: unset;
            font-weight: 800;
        }

        .normal-window {
            li {
                font-size: 15px;
                font-weight: 500;

                a {
                    margin-bottom: 10px;

                    &:hover {
                        text-decoration: underline !important;
                    }
                }
            }
        }

        @media (max-width: 1199px) {
            text-align: center;
        }
    }

    .footer-column-last {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        @media (max-width: 1199px) {
            @media (min-width: 600px) {
                order: 1;
                width: 50%;
                margin-bottom: 2em;
            }
        }

        @media (max-width: 599px) {
            align-items: center;
            justify-content: center;
        }


        .footer-social-links {
            order: -1;
            margin-top: unset;
            /* display: grid; */
            /* grid-template-columns: repeat(5, 1fr); */
            column-gap: 1px;
            margin-bottom: 1em;
            display: flex;

            &:has(li:nth-child(5)) {
                max-width: calc(var(--icon-size) * 3);
            }

            &:has(li:nth-child(7)) {
                max-width: calc(var(--icon-size) * 4);
            }

            &:has(li:nth-child(9)) {
                max-width: calc(var(--icon-size) * 5);
            }


            @media (min-width: 600px) {
                justify-content: flex-end;
            }

            li {
                --icon-size: 45px;
                width: var(--icon-size);
                height: var(--icon-size);

                a {
                    width: 100%;
                    height: 100%;
                    margin-bottom: 10px;
                }

                &[data-social-media="facebook"] {
                    a {
                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 97.75 97.75' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath d='M48.875 0C21.882 0 0 21.882 0 48.875S21.882 97.75 48.875 97.75 97.75 75.868 97.75 48.875 75.868 0 48.875 0zm18.646 24.89-6.76.003c-5.301 0-6.326 2.519-6.326 6.215v8.15h12.641l-.006 12.765H54.436v32.758H41.251V52.023H30.229V39.258h11.022v-9.414c0-10.925 6.675-16.875 16.42-16.875l9.851.015V24.89z' fill='%23000000' opacity='1' data-original='%23000000' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
                    }
                }

            }

        }

        h2 {
            display: none;
        }

        a[data-mobile-app] {
            margin-bottom: 5px;

            .app-link {
                width: 105px;
                height: auto;
            }
        }
    }

    .additional-text-bottom {
        width: max-content;
        padding: 10px 0;

        @media (max-width: 767px) {
            width: 100%;
        }

        p {
            padding-bottom: 0;
            text-align: left !important;

            @media (max-width: 767px) {
                text-align: center !important;
            }
        }

        a {
            text-decoration: none;
            padding-left: 15px;
            padding-right: 15px;
            font-size: 14px;
            font-weight: 500;

            &:nth-child(1) {
                padding-left: 0;
            }

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .apptegy-copyright {
        width: max-content;
        border-top: none;
        text-align: right;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 0;
        margin-left: auto;

        @media (max-width: 767px) {
            width: 100%;
            text-align: center;
        }

        span {
            &:nth-child(2) {
                display: none;
            }
        }
    }
}

/* -------------------------------------- */
/* ------------ END FOOTER EDITS ----------- */
/* -------------------------------------- */




/* ------------------------------------------ */
/* -------- CUSTOM Mobile App START --------- */
/* ------------------------------------------ */

#view-footer:has(#download-app-v3) {
    position: relative;
    isolation: isolate;

    .footer-column-last {
        a[data-mobile-app] {
            display: none;
        }
    }
}

#app #download-app-v3 {
    --smartphone-logo-url: url(https://cmsv2-assets.apptegy.net/uploads/31824/watermark/34909/spring-branch-watermark.png);
    --district-primary-color: #064D80;
    --smartphone-width: 350px;
    --download-app-v3-bg-color: linear-gradient(90deg, var(--district-primary-color) 0%,
            color-mix(in srgb, var(--district-primary-color), #000000 40%) 50%,
            color-mix(in srgb, var(--district-primary-color), #000000 70%) 100%);
    --download-app-v3-text-color: var(--text-color);
    --smartphone-screen-color: var(--district-primary-color);
    --button-width: 138px;
    display: flex;
    position: relative;
    background: var(--download-app-v3-bg-color);
    isolation: isolate;

    .download-app-v3__title {
        display: block;
        text-align: left;

        h3 {
            .download-app-v3-title {
                display: block;
                width: 100%;
                font-weight: 400;
            }

            .download-app-v3-subtitle {
                font-size: 1.4em;
            }
        }
    }
}

body:not(.spring-branch-isd) {
    #app #download-app-v3 {
        &.style-monterrey {
            .header-slot-container {
                &:after {
                    background-color: currentColor;
                }
            }
        }
    }
}

/* ------------------------------------------ */
/* --------- CUSTOM Mobile App - END -------- */
/* ------------------------------------------ */


/* ------------------------------------------ */
/* --------- Disclaimer Area - START -------- */
/* ------------------------------------------ */

#home #content-area {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);

    .see-all-container.see-all-top {
        margin-bottom: 2em;
    }

    .header-slot-container {
        text-align: center;

        h2 {
            font-size: 36px;
        }

        .header-top {
            font-size: 1em;
            font-family: var(--secondary-font);
            font-weight: 800;
            display: block;
            margin-bottom: 0;
        }

        .header-bottom {
            font-size: .65em;
            font-weight: 400;
        }
    }

    .content-text {
        font-size: 13px;
        text-align: center;

        p {
            margin-bottom: 1em;
        }

        a {
            text-decoration: unset;
            color: var(--links-color);

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

/* ------------------------------------------ */
/* ---------- Disclaimer Area - END --------- */
/* ------------------------------------------ */

/* -------------------------------------- */
/* -------------- CMS PAGES ------------- */
/* -------------------------------------- */
#page .pb-main h1 {
    font-family: var(--primary-font) !important;
}

.breadcrumb ul {
    display: none !important;
}

.breadcrumb {
    min-height: 4px !important;
}

#app .breadcrumb {
    background-color: transparent;
}

#app .cms-pagination ul {
    flex-wrap: wrap;
}


#app {

    .pb-heading,
    .title {

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: var(--secondary-font) !important;
            font-weight: 800 !important;

            a {
                font-weight: inherit;
            }
        }
    }

    .staff-info .name {
        font-family: var(--secondary-font) !important;
        font-weight: 800 !important;
    }

    .pb-button {
        --dark-button-hover: color-mix(in srgb, var(--dark-button) 80%, #000) !important;

        .button-theme-dark:hover {
            background-color: var(--dark-button-hover);
        }

        .button {
            outline: none;
            text-decoration: unset !important;
            padding: .65em 1em;
            font-weight: 500;
            transition: color var(--transition-time) linear, background-color var(--transition-time) linear, border-color var(--transition-time) linear;

            &:focus,
            &:visited {
                text-decoration: unset;
            }
        }
    }


    .pb-text {
        padding-top: 15px;
    }

    iframe {
        border: none;
    }
}

/* -------------------------------------- */
/* -------------- CMS PAGES ------------- */
/* -------------------------------------- */


/* Fix Staff Dropdown checkbox */
#app {

    #staff {
        .page-container-item {
            margin-left: 0;
            margin-right: 0;
        }

        #filter-container .filter-options {

            .filter-option {
                margin-top: unset;

                .container {
                    margin-top: 10px;
                    margin-bottom: 10px;

                    .checkmark {

                        &:after {
                            content: "";
                            display: block !important;
                            border: solid #fff;
                            border-width: 0 2px 2px 0;
                            display: none;
                            height: 10px;
                            left: 5px;
                            position: absolute;
                            top: 1px;
                            transform: rotate(45deg);
                            width: 5px;
                        }
                    }
                }
            }
        }
    }

    #news-list {
        .filter {
            select {
                outline: none;
                border: none;
                text-transform: unset;
            }
        }
    }

    #staff,
    #news-list {
        .page-container {
            width: calc(85% - 20px);
        }
    }
}

/* Existing Code */
/* .breadcrumb li:first-child {
    display: none !important;
}

.breadcrumb li:nth-child(2)::before {
    content: none !important;
    padding: 0 !important;
    margin: 0 !important;
} */