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

#app #home {
    --section-border-radius: 30px;

    .see-all-container {
        .light-header-accent {
            display: none;
        }
    }

    .header-slot-container {
        padding-bottom: 8px;
        border-bottom: 3px solid var(--header-accent-color);

        h2 {
            font-weight: 700;
            font-size: 30px;
            padding-right: unset;
        }

        &:after {
            display: none;
        }
    }

    .see-all-button {
        border: 2px solid var(--button-bg-color, var(--primary-color));
        color: var(--button-text-color, #111);
        background-color: transparent;
        display: inline-flex;
        align-items: center;
        column-gap: 1em;
        border-radius: 2em;
        line-height: 1em;
        font-size: 17px;
        padding: 1em 2em;
        font-weight: 600;
        text-transform: uppercase;
        transition: all .25s linear;

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

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

        &:after {
            content: '';
            display: inline-block;
            width: 1.15em;
            height: 1.15em;
            background-color: currentColor;
            mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>');
            mask-size: 100%;
        }
    }
}

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

@media (min-width: 1280px) {

    #cms-gallery {
        #G7 {
            --image-height: 55vw !important;
            --border-radius: 50px;

            .gallery-content {
                .title {
                    * {
                        font-family: inherit;
                    }

                    &>div {
                        display: inline-block;
                        padding-bottom: 0.5em;
                        border-bottom: 3px solid var(--button-bg-color);
                    }


                    h1,
                    h2,
                    h3,
                    h4 {
                        font-weight: 800;
                        line-height: 1.2;
                    }

                    h1 {
                        font-size: 72px;
                    }

                    h2 {
                        font-size: 60px;
                    }

                    h3 {
                        font-size: 50px;
                    }


                    em {
                        display: block;
                        font-weight: 400;
                        font-size: .6em;
                    }
                }

                .button-link {
                    button {
                        border-radius: 2em;
                    }
                }

                .description {
                    font-size: 20px;

                    p {
                        font-size: inherit;
                    }
                }

            }

            .gallery-controls {
                bottom: 100px;

                .play,
                .pause {
                    margin-right: unset;
                }
            }

            .image-wrapper {
                border-radius: 0 0 var(--border-radius) var(--border-radius);
            }
        }
    }
}

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



/* -------------------------------------- */
/* -------- START Buttons Edits --------- */
/* -------------------------------------- */
#home .main:has(#buttons-b3) {
    .view-container {
        background: transparent !important;
    }
}

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


/* -------------------------------------- */
/* ------ START News/Events Edits ------- */
/* -------------------------------------- */

#home .main:has(.custom-news-mexia) {

    .view-container {
        width: calc(100% - 80px);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
        background: transparent;

        .homepage-component {
            background-color: transparent;
        }

        @media (max-width: 1279px) {
            margin-top: 50px;
            width: calc(100% - 40px);
        }

        @media (max-width: 1199px) {
            margin-top: 40px;
        }

        @media (max-width: 959px) {
            margin-top: 30px;
        }

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

        .first.right-sidebar {}

        .last.right-sidebar {
            min-width: 600px;
            flex-shrink: 0;

            @media (max-width: 1499px) {
                min-width: 550px;
            }

            @media (max-width: 1199px) {
                min-width: 450px;
            }

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

        .custom-news-mexia {
            --bg-color: #F1F1F1;
            --header-accent-color: var(--primary-color);
            border-radius: var(--section-border-radius) 0 0 var(--section-border-radius);
            background-color: var(--bg-color);

            @media (max-width: 959px) {
                border-radius: var(--section-border-radius);
            }
        }

        .events-e7 {
            border-radius: 0 var(--section-border-radius) var(--section-border-radius) 0;

            @media (max-width: 959px) {
                border-radius: var(--section-border-radius);
                margin-top: 2em;
            }
        }

        .light-header-accent {
            display: none;
        }

        .events-e7 {
            height: 100%;

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

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

            .purple-header-accent {
                display: none;
            }

            .events-info {
                margin-top: 2em;
                background-color: #fff;
                border-radius: .75em;
                box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.03);
                border: 1px solid #E5E7EB;

                .events-card {
                    padding-top: 1em;
                    padding-bottom: 1em;
                    margin-bottom: 0;
                    border-bottom: 1px solid #E5E7EB;
                    align-items: center;
                    position: relative;

                    @media (max-width: 1499px) {
                        padding-top: .5em;
                        padding-bottom: .5em;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        top: calc(50% - 12px);
                        right: 1em;
                        width: 24px;
                        height: 24px;
                        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M439.1 297.4C451.6 309.9 451.6 330.2 439.1 342.7L279.1 502.7C266.6 515.2 246.3 515.2 233.8 502.7C221.3 490.2 221.3 469.9 233.8 457.4L371.2 320L233.9 182.6C221.4 170.1 221.4 149.8 233.9 137.3C246.4 124.8 266.7 124.8 279.2 137.3L439.2 297.3z"/></svg>');
                        mask-size: 100%;
                        mask-position: center;
                        background-color: var(--event-title-color);
                    }

                    &:has(a.events-title:hover) {
                        &:after {
                            animation: moveRight 1s linear infinite;
                        }
                    }

                    .events-title {
                        font-size: 1.25em;
                        line-height: 1.3;
                        font-weight: 600;
                        --lines: 2;

                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: var(--lines);
                        line-clamp: var(--lines);
                        overflow: hidden;

                        @media (max-width: 1499px) {
                            font-size: 1.1em;
                        }

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

                        &:after {
                            content: '';
                            position: absolute;
                            inset: 0;
                        }
                    }
                }

                .events-date {
                    border-right: 1px solid var(--header-accent-color);
                    max-width: 110px;

                    @media (max-width: 1199px) {
                        max-width: 80px;
                    }

                    .month {
                        font-size: 1.1em;
                        line-height: 1.2;
                        font-weight: 600;

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

                    .date-number {
                        font-size: 2em;
                        line-height: 1.2;
                        font-weight: 600;

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

        }

        .see-all-bottom {
            text-align: left;
            justify-content: flex-start;
            margin-top: 30px;
        }


    }
}

@keyframes moveRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

.media-custom-code:has(.custom-news-mexia) {
    .custom-html {
        &>div:has(.custom-news-mexia) {
            height: 100%;

            .custom-news-mexia {
                height: 100%;
            }
        }
    }
}

.custom-news-mexia {
    --image-aspect-ratio: 16/10;
    --article-title-color: #111827;
    --article-date-color: #111827;
    --article-snippet-color: #374151;
    --article-more-color: #374151;
    --article-border: #d7d7d8;

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

    .news-articles-list {
        .news-article {
            display: flex;
            align-items: center;
            column-gap: 1.5em;
            text-decoration: unset;

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

            &:not(:nth-child(1)) {
                margin-top: 1.5em;
            }

            &:not(:last-child) {
                padding-bottom: 1.5em;
            }

            &:not(:last-child) {
                border-bottom: 1px solid var(--article-border, #d7d7d8);
            }

            .news-article__image {
                width: 310px;
                flex-shrink: 0;

                @media (max-width: 1499px) {
                    width: 225px;
                }

                @media (max-width: 1199px) {
                    width: 180px;
                }

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

                .cover-image {
                    width: 100%;
                    overflow: hidden;

                    img {
                        border-radius: 1em;
                        aspect-ratio: var(--image-aspect-ratio, 16/10);
                        width: 100%;
                        object-fit: cover;
                        transition: transform .25s linear;

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

            .news-article__title {
                color: var(--article-title-color, #000);
                font-size: 1.5em;
                --lines: 2;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: var(--lines);
                line-clamp: var(--lines);
                overflow: hidden;

                @media (max-width: 1499px) {
                    font-size: 1.15em;
                }

                @media (max-width: 599px) {
                    margin-top: 1em;
                }
            }

            .news-article__date {
                color: var(--article-date-color, #000);

                .date {
                    display: flex;
                    column-gap: .25em;
                    margin-top: .57em;
                    font-weight: 700;
                    text-transform: uppercase;

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

            .news-article__snippet {
                color: var(--article-snippet-color, #000);
                margin-top: .75em;
                line-height: 1.4;
                --lines: 3;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: var(--lines);
                line-clamp: var(--lines);
                overflow: hidden;

                @media (max-width: 1499px) {
                    --lines: 2;

                }
            }

            .news-article__more {
                color: var(--article-more-color, #000);
                margin-top: .75em;
                font-weight: 700;
                text-decoration: underline;
            }


            &:hover {
                .news-article__more {
                    text-decoration: none;
                }

                .news-article__image {
                    .cover-image {
                        img {
                            transform: scale(1.05);
                        }
                    }
                }
            }
        }
    }

    .see-all-container.see-all-bottom {
        display: block;
    }

}

/* -------------------------------------- */
/* -------- END News/Events Edits ------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* -------- START Live Feed Edits ------- */
/* -------------------------------------- */
#home {
    .main:has(.live-feed-lf8) {
        .view-container {
            background: transparent;

            .homepage-component {
                background: transparent;
            }
        }

        .live-feed-lf8 {
            width: calc(100% - 80px);
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50px;

            @media (max-width: 1279px) {
                width: calc(100% - 40px);
            }

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

            .wrapper {
                position: relative;
                border-radius: var(--section-border-radius);
                isolation: isolate;
                overflow: hidden;

                &:after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background-image: url(https://cmsv2-shared-assets.apptegy.net/Schools/Mexia-ISD-892/img/live-feed-bg.png);
                    background-size: cover;
                    z-index: -1;
                    opacity: .65;
                }
            }
        }
    }
}


/* -------------------------------------- */
/* --------- END Live Feed Edits -------- */
/* -------------------------------------- */

/* -------------------------------------- */
/* -------- START Parallax Edits -------- */
/* -------------------------------------- */

#custom-parallax-v1 {
    --parallax-v1-area-height: 500px;
    --parallax-v1-mask-bg-color: #000;
    --parallax-v1-mask-opacity: 0.8;
    --parallax-v1-mask-text-color: #fff;

    h2 {
        font-size: 60px;

        @media (max-width: 1499px) {
            font-size: 50px;
        }

        @media (max-width: 1199px) {
            font-size: 42px;
        }

        @media (max-width: 959px) {
            font-size: 36px;
        }

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

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

    .prlx-v1-button {
        a {
            border-radius: 2em;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--primary-color-contrast);

            &:hover {
                background-color: transparent;
            }
        }
    }
}

/* -------------------------------------- */
/* --------- END Parallax Edits --------- */
/* -------------------------------------- */


/* -------------------------------------- */
/* --- START Custom Programs V5 Edits --- */
/* -------------------------------------- */
#home #custom-programs-v5 {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    margin-top: 30px;
    --box-shadow-color: #000;
    --item-button-bg-color: transparent;
    --item-button-text-color: var(--primary-color);
    --item-button-text-color: var(--text-color, #fff);


    @media (max-width: 1279px) {
        width: calc(100% - 40px);
    }

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

    .custom-programs-v5__list {
        column-gap: 1.5%;
        grid-template-columns: repeat(3, 1fr);

        &:has(> div:nth-child(4)) {
            grid-template-columns: repeat(4, 1fr);

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

        &:has(> div:nth-child(5)) {
            grid-template-columns: repeat(3, 1fr);
        }

        &:has(> div:nth-child(7)) {
            grid-template-columns: repeat(4, 1fr);

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

        @media (max-width: 959px) {
            grid-template-columns: repeat(1, 1fr) !important;
            --image-aspect-ratio: 2/1;
        }

        @media (max-width: 767px) {
            --image-aspect-ratio-on-mobile: 5/3;
        }

        @media (max-width: 599px) {
            --image-aspect-ratio-on-mobile: 5/4;
        }

        .custom-program-v5-item {
            position: relative;
            border-radius: var(--section-border-radius);
            overflow: hidden;
            margin-top: 1em;
            margin-bottom: 1em;

            @media (max-width: 599px) {
                margin-top: .5em;
                margin-bottom: .5em;
            }

            .custom-program-v5-item-content-container {
                padding-bottom: 10px;

                @media (max-width: 1199px) {
                    padding-bottom: 0;
                }
            }

            .custom-programs-v5-icon {
                position: absolute;
                z-index: 2;
                top: 1.5em;
                left: 1.5em;
                font-size: 16px;
                width: 3.5em;
                height: 3.5em;
                background-color: var(--primary-color);
                border-radius: 50%;
                color: var(--primary-color-contrast);
                display: flex;
                align-items: center;
                justify-content: center;

                @media (max-width: 1499px) {
                    font-size: 14px;
                }

                @media (max-width: 1199px) {
                    font-size: 12px;
                }

                @media (max-width: 959px) {
                    font-size: 10px;
                }

                span {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                svg {
                    fill: currentColor;
                    width: 2em;
                    height: 2em;
                }
            }

            .custom-programs-v5-button {
                display: block;
                margin-top: 1.5em;

                a {
                    border-radius: 2em;
                    border-color: var(--primary-color);
                    padding-left: 1.5em;
                    padding-right: 1.5em;
                    margin-top: 0;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    column-gap: .5em;

                    &:after {
                        content: '';
                        display: inline-block;
                        width: 1.15em;
                        height: 1.15em;
                        background-color: currentColor;
                        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/></svg>');
                        mask-size: 100%;
                    }

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

/* -------------------------------------- */
/* ---- END Custom Programs V5 Edits ---- */
/* -------------------------------------- */