@import url('https://cmsv2-shared-assets.apptegy.net/Global/Components/CMSv2-page-style/subpage-custom-style-v2.css');

/* --------------------------------------- */
/* --------------------------------------- */
/* START DURHAM PUBLIC SCHOOLS STYLE GUIDE */
/* --------------------------------------- */
/* --------------------------------------- */

:root {
    --durham-green: #5CA863;
    --durham-light-blue: #37A7CD;
    --durham-red: #BF1E2E;
}

/* START Lists */
/* ------- START Bullet / Unordered ------- */
#page ul li::marker {
    color: var(--durham-green);
}

/* ------- END Bullet / Unordered ------- */


/* ------- START Ordered ------- */
#page ol li::marker {
    color: var(--primary-color);
}

/* ------- END Ordered ------- */

/* END Lists */

/* START Separator */
#page .card-block.separator .headline::after {
    background-color: var(--durham-green) !important;
    border: 2px solid var(--durham-green)
}

/* END Separator */

/* START Quotes */
#page .quote-block.design-1,
#page .quote-block.design-3 {
    border-left-color: var(--secondary-color) !important;
}

#page .quote-block.design-1 .content,
#page .quote-block.design-3 .content {
    font-style: normal;
}

#page .quote-block .design-2-quotes:before {
    content: close-quote;
    background-color: var(--durham-light-blue);
    mask-image: url("data:image/svg+xml,%3Csvg width='20' height='17' viewBox='0 0 20 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.344 16.962C13.042 16.962 11.988 15.908 11.988 14.606V11.506C11.988 10.08 12.36 9.15005 12.98 7.91005L15.77 1.83405C16.204 0.904049 16.576 0.284045 17.63 0.284045H18.56C19.18 0.284045 19.862 0.780046 19.304 1.83405L16.142 9.77005H16.948C18.25 9.77005 18.808 10.824 18.808 12.126V14.606C18.808 15.908 17.754 16.962 16.452 16.962H14.344ZM2.502 16.962C1.2 16.962 0.146 15.908 0.146 14.606V11.506C0.146 10.08 0.518 9.15005 1.138 7.91005L3.928 1.83405C4.362 0.904049 4.734 0.284045 5.788 0.284045H6.718C7.338 0.284045 8.02 0.780046 7.462 1.83405L4.3 9.77005H5.106C6.408 9.77005 6.966 10.824 6.966 12.126V14.606C6.966 15.908 5.912 16.962 4.61 16.962H2.502Z' fill='%2337A7CD'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat no-repeat;
    mask-position: left top;
    mask-size: contain;
    height: 24px;
}

/* END Quotes */

/* START Cards */
#page .card-block.shadow {
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: var(--secondary-color) !important;
}

/* END Cards */

/* START Buttons */
/* ------- START Light ------- */
#page .button-block .button.light:hover {
    background-color: var(--secondary-color);
}

#page .button-block .button.button.light:hover .title {
    color: var(--primary-color);
}

/* ------- END Light ------- */


/* ------- START Dark Pill ------- */
#page .button-block .button.dark.pill {
    border: 2px solid var(--primary-color);
}

/* ==== Hover ==== */
#page .button-block .button.dark.pill:hover {
    background: #fff;
    border-color: var(--durham-green);
}


#page .button-block .button.dark.pill:hover .title {
    color: var(--primary-color);
}

/* ------- END Dark Pill ------- */


/* ------- START Outline Pill ------- */
#page .button-block .button.outline.pill {
    border-color: var(--secondary-color);
}

/* ==== Hover ==== */
#page .button-block .button.outline.pill:hover {
    background-color: var(--secondary-color);
}

#page .button-block .button.outline.pill:hover .title {
    color: var(--primary-color);
}

/* ------- END Outline Pill ------- */

/* ------- START Light Square 1 ------- */
#page .button-block .button.square.light.style-undefined {
    background-color: var(--secondary-color);
}

#page .button-block .button.square.light.style-undefined .title {
    color: var(--primary-color);
}

#page .button-block .button.square.light.style-undefined .icon-wrapper {
    border: 2px solid var(--primary-color);
}

#page .button-block .button.square.light.style-undefined .icon-wrapper svg {
    fill: var(--primary-color);
}

/* ==== Hover ==== */
#page .button-block .button.square.light.style-undefined:hover {
    background-color: var(--primary-color);
}

#page .button-block .button.square.light.style-undefined:hover .title {
    color: var(--primary-color-contrast);
}

#page .button-block .button.square.light.style-undefined:hover .icon-wrapper {
    border: 2px solid var(--primary-color-contrast);
}

#page .button-block .button.square.light.style-undefined:hover .icon-wrapper svg {
    fill: var(--primary-color-contrast);
}

/* ------- END Light Square 1 ------- */

/* ------- START Dark Square 1 ------- */
#page .button-block .button.square.dark.style-undefined {
    border: 1px solid var(--primary-color);
}

/* ==== Hover ==== */
#page .button-block .button.square.dark.style-undefined:hover {
    background: #fff;
}

#page .button-block .button.square.dark.style-undefined:hover .title {
    color: var(--primary-color);
}

/* ------- END Dark Square 1 ------- */

/* ------- START Outline Square 1 ------- */
#page .button-block .button.square.outline.style-undefined {
    border: 1px solid var(--durham-green);
}

#page .button-block .button.square.outline.style-undefined .title {
    color: var(--primary-color);
}

#page .button-block .button.square.outline.style-undefined .icon-wrapper {
    border: 2px solid var(--primary-color);
}

#page .button-block .button.square.outline.style-undefined .icon-wrapper svg {
    fill: var(--primary-color);
}

/* ==== Hover ==== */
#page .button-block .button.square.outline.style-undefined:hover {
    background-color: var(--durham-green);
}

/* ------- END Outline Square 1 ------- */

/* ------- START Light Square 2 ------- */
#page .button-block .button.square.light.style-2 {
    background: #37A7CD43;
    border: 1px solid transparent;
}

#page .button-block .button.square.light.style-2 .bar {
    fill: var(--primary-color);
}

#page .button-block .button.square.light.style-2 .title {
    color: var(--primary-color);
}

#page .button-block .button.square.light.style-2 .arrow-button circle {
    fill: var(--primary-color);
    stroke: var(--primary-color);
}

#page .button-block .button.square.light.style-2 .arrow-button path {
    stroke: var(--secondary-color);
}

#page .button-block .button.square.light.style-2 .arrow-button rect {
    fill: var(--secondary-color);
}

/* ==== Hover ==== */
#page .button-block .button.square.light.style-2:hover {
    background: #fff;
    border: 1px solid var(--durham-light-blue);
}

/* ------- END Light Square 2 ------- */

/* ------- START Dark Square 2 ------- */
#page .button-block .button.square.dark.style-2 {
    background: var(--primary-color);
}

#page .button-block .button.square.dark.style-2 .bar {
    fill: var(--secondary-color);
}

#page .button-block .button.square.dark.style-2 .title {
    color: var(--primary-color-contrast);
}

#page .button-block .button.square.dark.style-2 .arrow-button circle {
    fill: var(--secondary-color);
    stroke: var(--secondary-color);
}

#page .button-block .button.square.dark.style-2 .arrow-button path {
    stroke: var(--primary-color);
}

#page .button-block .button.square.dark.style-2 .arrow-button rect {
    fill: var(--primary-color);
}

/* ==== Hover ==== */
#page .button-block .button.square.dark.style-2:hover {
    background: var(--durham-red);
}

/* ------- END Dark Square 2 ------- */


/* ------- START Outline Square 2 ------- */
#page .button-block .button.square.outline.style-2 {
    border: 1px solid var(--durham-green);
}

#page .button-block .button.square.outline.style-2 .bar {
    fill: var(--durham-green);
}

#page .button-block .button.square.outline.style-2 .title {
    color: var(--primary-color);
}

#page .button-block .button.square.outline.style-2 .arrow-button circle {
    fill: #fff;
    stroke: var(--durham-light-blue);
}

#page .button-block .button.square.outline.style-2 .arrow-button path {
    stroke: var(--primary-color);
}

#page .button-block .button.square.outline.style-2 .arrow-button rect {
    fill: var(--primary-color);
}

/* ==== Hover ==== */
#page .button-block .button.square.outline.style-2:hover {
    border: 1px solid var(--durham-red);
    background: none;
}

#page .button-block .button.square.outline.style-2:hover .bar {
    fill: var(--durham-light-blue);
}

#page .button-block .button.square.outline.style-2:hover .arrow-button circle {
    fill: var(--durham-red);
    stroke: var(--durham-red);
}

#page .button-block .button.square.outline.style-2:hover .arrow-button path {
    stroke: #fff;
}

#page .button-block .button.square.outline.style-2:hover .arrow-button rect {
    fill: #fff;
}

/* ------- END Outline Square 2 ------- */

/* ------- START With arrow ------- */
#page .button-block .button.link svg path {
    stroke: #37A7CD;
}

/* ------- END With arrow ------- */
/* END Buttons */

/* START Tables */
#page .table-v2-block.alternating-colors table tr th {
    border: 1px solid var(--secondary-color);
    /* Remove from table light */
}

#page .table-v2-block:not(.alternating-colors) table tr:first-child th {
    background-color: var(--secondary-color);
}

#page .table-v2-block:not(.alternating-colors) table tr th {
    color: var(--primary-color);
}

/* END Tables */

/* START Accordion */
#page .accordion-panel .collapsible-section.light {
    --section-header-light: var(--secondary-color) !important;
}

#page .accordion-panel .collapsible-section.default .section-header {
    border-bottom: 1px solid var(--durham-green);
}

#page .block .accordion-block .accordion-panel .collapsible-section.default h2+div {
    border: 1px solid var(--durham-green) !important;
}

#page .accordion-panel .collapsible-section.default .section-header::before {
    background-color: var(--secondary-color);
}

#page .accordion-panel .collapsible-section.default .section-header svg path {
    fill: var(--primary-color);
}

/* END Accordion */

/* START Slider */
#page .slider-block .slider-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#page .slider-block .slider-dots .slider-nav {
    display: flex;
    gap: 17px;
}

#page .slider-block .slider-dots .slider-nav li .circle {
    background: var(--primary-color);
    border: none;
    width: 16px;
    height: 16px;
}

#page .slider-block .slider-dots .slider-nav li.active .circle {
    background: var(--secondary-color);
}

/* Arrows */
#page .slider-block .slider-arrows .left-arrow,
#page .slider-block .slider-arrows .right-arrow {
    background: none;
    outline: none;
}

#page .slider-block .slider-arrows .left-arrow img,
#page .slider-block .slider-arrows .right-arrow img {
    background: none;
    display: none;
}

#page .slider-block .slider-arrows .left-arrow:before,
#page .slider-block .slider-arrows .right-arrow:after {
    content: close-quote;
    background-color: var(--primary-color);
    mask-image: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.875 7.375L20.2753 9.97469L30.5634 20.2812L8.125 20.2812L8.125 23.9688L30.5634 23.9687L20.2569 34.2569L22.875 36.875L37.625 22.125L22.875 7.375Z' fill='%23113858'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat no-repeat;
    mask-position: left top;
    mask-size: contain;
    height: 44px;
    width: 44px;
    position: absolute;
}

#page .slider-block .slider-arrows .left-arrow:before {
    transform: rotateY(180deg);
}

/* END Slider */

/* breadcrumb */
#page-wrapper .breadcrumb {
    background-color: #FFF;

    & ul {
        line-height: unset;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-block: 15px;
        padding-left: 50px;
        min-height: 50px;
        box-sizing: border-box;

        & li {
            text-transform: uppercase;

            &:not(:last-child) {
                color: var(--primary-color);
            }

            &+li:before {
                content: '';
                width: 16px;
                height: 16px;
                background-color: var(--primary-color);
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='17' viewBox='0 0 13 17' fill='none'%3E%3Cg clip-path='url(%23clip0_3319_9542)'%3E%3Cpath d='M0.961429 0.757466L0.969246 0.745392H6.46132L11.2396 8.12575L11.2369 8.13L11.2396 8.13427L6.46132 15.5146H0.969243L0.961426 15.5026L5.7319 8.13427L5.72914 8.13L5.7319 8.12575L0.961429 0.757466Z' fill='%232B2B2B' fill-opacity='0.24'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3319_9542'%3E%3Crect width='11.0769' height='16' fill='white' transform='translate(0.961426 0.130005)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
                mask-repeat: no-repeat no-repeat;
                mask-position: center center;
                mask-size: contain;
            }
        }
    }
}

/* end breadcrumb */

/* page h1 */
#page {
    width: 100%;
    overflow: hidden;
}

#page-wrapper {
    .customHeroSection {
        position: relative;
        isolation: isolate;
        min-height: min(465px, 52vh);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 35px;
        padding-bottom: 150px;
        color: var(--primary-color-contrast);
        overflow: hidden;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 100vw;
            top: 0;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='519' viewBox='0 0 1920 519' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M-0.00515747 477.257C224.5 336.5 753.603 534.64 1019 396C1421 186 1725.05 325.12 1934.5 259L1948.5 5.5H-20V515.861L-0.00515747 477.257Z' fill='url(%23paint0_linear_3319_9532)' stroke='%235CA863' stroke-width='11'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3319_9532' x1='-20' y1='260.681' x2='1948.5' y2='260.681' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23081D3F'/%3E%3Cstop offset='1' stop-color='%23113858'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
            mask-repeat: no-repeat no-repeat;
            mask-position: center bottom;
            mask-size: 100% 100%;
        }

        &:before {
            background-color: var(--primary-color);
            --primary-color-dark: color-mix(in srgb, var(--primary-color), #000 45%);
            background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%);
        }

        &::after {
            z-index: -2;
            top: 11px;
            background-color: var(--shape-border-color, var(--secondary-color));
        }

        .heading-block {
            position: relative;
            color: var(--primary-color-contrast);
            font-size: clamp(2.5rem, 0.415rem + 3.404vw, 4.5rem);
            margin: 0;
            padding-left: 40px;
            z-index: 1;
        }

        .heroImage {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            object-fit: cover;
            z-index: -3;
            opacity: 0.3;
        }
    }
}

@media only screen and (max-width: 760px) {
    #page-wrapper {
        .customHeroSection {
            min-height: 300px;
            padding-top: 30px;
            padding-bottom: 150px;

            &::before,
            &::after {
                width: 300vw;
                mask-position: left bottom;
            }
        }
    }
}

@media only screen and (min-width: 1000px) {
    #page-wrapper>#sidebarNav {
        margin-left: 20px;
        margin-right: 20px;
    }
}

@media only screen and (min-width: 1350px) {
    #page-wrapper>#sidebarNav {
        margin-left: 60px;
    }
}

/* end page h1 */

/* --------------------------------------- */
/* --------------------------------------- */
/* END   DURHAM PUBLIC SCHOOLS STYLE GUIDE */
/* --------------------------------------- */
/* --------------------------------------- */