:root {
    --scoe-bg-color: #267BD9;
    --scoe-bg-color-darkest: #0A2541;
    --scoe-bg-color-dark: #133E6D;
    --scoe-bg-color-light: #F2F2F2;
    --scoe-link-color: #016CB8;
    /* Single pixel based on 1920px viewport width equivalent.
       This value is calculated dynamically by javascript. This is
       just a default should the javascript fail to run.
    */
    --px: 0.0521vw;
    /* Custom named sizes.*/
    --full-width-px: calc(var(--px) * 1920);
    --featured-content-item-size-large: calc(((var(--full-width-px) * 0.315973) - (var(--px) * (25 / 3))) * var(--scale-factor));
    --featured-content-item-size-medium: calc(((var(--featured-content-item-size-large) / 5) * 3) - (var(--px) * 12.5));
    --featured-content-item-size-small: calc(((var(--featured-content-item-size-large) / 5) * (3 /2 )) - (var(--px) * 12.5));
    --full-width-item-width: calc((3 * var(--featured-content-item-size-large)) + (2 * (var(--px) * 25 * var(--scale-factor))));
    --full-width-item-margin: calc((var(--full-width-px) - var(--full-width-item-width)) / 2);
    --two-thirds-width-item-width: calc(var(--full-width-item-width) * (2/3));
    --one-sixth-width-item-width: calc(var(--full-width-item-width) * (1/6));
    --image-gallery-item-gap-size: calc(var(--px) * 25 * var(--scale-factor));
    --image-gallery-item-width: calc(var(--one-sixth-width-item-width) - var(--image-gallery-item-gap-size));
    --video-height: calc(var(--px) * 480);
    /* Drop shadow values.*/
    --drop-shadow-values: calc(var(--px) * 5 * var(--scale-factor)) calc(var(--px) * 10 * var(--scale-factor)) calc(var(--px) * 5 * var(--scale-factor)) 0 rgba(0, 0, 0, 0.25);
    /* High Resolution Settings */
    --scale-factor: 1.0;
    --body-padding: 0vw;
    /* Font weight values. */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

@font-face {
    font-family: 'IcoMoon Free';
    src: url("/css/IcoMoon-Free.ttf");
}

body {
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--px) * 25 * var(--scale-factor));
}

/* ----- CONTAINERS ----- */

.page-container {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: var(--full-width-px);
    grid-template-rows: calc(var(--px) * 210 * var(--scale-factor)) 1fr auto;
    height: 100vh;
}

    .page-container.scroll {
        grid-template-rows: 1fr auto;
    }

.header-row-container {
    display: grid;
    grid-gap: 0px;
    grid-template-rows: calc(var(--px) * 130 * var(--scale-factor)) calc(var(--px) * 80 * var(--scale-factor));
    height: 100%;
}

header.header-row-container.scroll {
    position: fixed;
    top: 0;
    width: 100%;
    height: unset;
    z-index: 2;
    grid-template-rows: calc(var(--px) * 80 * var(--scale-factor)) calc(var(--px) * 80 * var(--scale-factor));
}

    header.header-row-container.scroll .top-site-logo img {
        width: calc(var(--px) * 290 * 0.69 * var(--scale-factor));
    }

    header.header-row-container.scroll nav.sub-nav.dynamic {
        top: calc(var(--px) * 160 * var(--scale-factor));
    }

    .footer-row-container {
        display: grid;
        grid-gap: 0px;
        grid-template-rows: auto auto auto;
        color: white;
        background-color: var(--scoe-bg-color-darkest);
        text-align: center;
    }

.home-hero-container {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: var(--full-width-px);
}

/* ----- SITE HEADER ----- */

/* -- SITE HEADER CONTAINERS -- */

header div.top-row-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    color: white;
    background-color: var(--scoe-bg-color);
    background-image: url(header-background.png);
    background-size: 100% 150%;
    padding-left: var(--body-padding);
    padding-right: var(--body-padding);
}

header div.bottom-row-container {
    box-shadow: var(--drop-shadow-values);
    z-index: 1;
    color: white;
    background-color: var(--scoe-bg-color-darkest);
    padding-left: var(--body-padding);
    padding-right: var(--body-padding);
}

/* -- END SITE HEADER CONTAINERS -- */

header figure.top-site-logo img {
    flex: 1 1 50%;
    margin-left: calc(var(--px) * 25 * var(--scale-factor));
    width: calc(var(--px) * 290 * var(--scale-factor));
}

header nav.header-top-nav {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
    font-weight: var(--font-weight-regular);
    text-align: right;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    text-shadow: calc(var(--px) * 2 * var(--scale-factor)) calc(var(--px) * 2 * var(--scale-factor)) calc(var(--px) * 1 * var(--scale-factor)) rgba(0, 0, 0, 0.75);
}

    header nav.header-top-nav a {
        margin-right: 1em;
        color: white;
        text-decoration: none;
    }

        header nav.header-top-nav a:hover {
            text-decoration: underline;
        }

        header nav.header-top-nav a:last-of-type {
            margin-right: calc(var(--px) * 25 * var(--scale-factor));
        }

    header nav.header-top-nav span.separator {
        margin-right: 1em;
    }

.search-icon {
    font-family: 'IcoMoon Free', sans-serif;
    display: inline-block;
    margin-right: 1em;
}

div.search-icon:hover {
    text-decoration: none;
}

.icon-search:before {
    content: "\e986";
}

header nav.main-nav {
    font-size: calc(var(--px) * 38.4 * var(--scale-factor));
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    text-align: center;
}

    header nav.main-nav * {
        margin-top: calc(var(--px) * 10 * var(--scale-factor));
    }

    header nav.main-nav a {
        flex: 1 1;
        color: white;
        text-decoration: none;
        padding-left: calc(var(--px) * 19.2 * var(--scale-factor));
        padding-right: calc(var(--px) * 19.2 * var(--scale-factor));
    }

        header nav.main-nav a:first-child {
            margin-left: calc(var(--px) * 25 * var(--scale-factor));
        }

        header nav.main-nav a:last-child {
            margin-right: calc(var(--px) * 25 * var(--scale-factor));
        }

        header nav.main-nav a:hover {
            text-decoration: underline;
        }

nav.sub-nav {
    font-size: calc(var(--px) * 25 * var(--scale-factor)) !important;
    margin-top: 0 !important;
    padding-bottom: calc(var(--px) * 10 * var(--scale-factor));
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background-color: var(--scoe-bg-color-dark);
    box-shadow: var(--drop-shadow-values);
    z-index: 1;
    color: white;
}

    nav.sub-nav.dynamic {
        position: absolute;
        left: 0;
        top: calc(var(--px) * 210 * var(--scale-factor));
        flex-flow: row wrap;
        width: calc((var(--px) * 1920) * var(--scale-factor));
        padding-left: calc(((var(--px) * 1920) - ((var(--px) * 1920) * var(--scale-factor))) / 2);
        padding-right: calc(((var(--px) * 1920) - ((var(--px) * 1920) * var(--scale-factor))) / 2);
    }

    nav.sub-nav a {
        white-space: nowrap;
    }

.nav-item-selected {
    background-color: var(--scoe-bg-color-dark);
    padding-bottom: calc(var(--px) * 25 * var(--scale-factor));
}


/* ----- SITE FOOTER ----- */

footer nav.main-nav {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
    font-weight: var(--font-weight-semi-bold);
}

    footer nav.main-nav a {
        color: white;
        text-decoration: none;
        padding-left: calc(var(--px) * 19.2 * var(--scale-factor));
        padding-right: calc(var(--px) * 19.2 * var(--scale-factor));
    }

        footer nav.main-nav a:first-child {
            margin-left: calc(var(--px) * 25 * var(--scale-factor));
        }

        footer nav.main-nav a:last-child {
            margin-right: calc(var(--px) * 25 * var(--scale-factor));
        }

    footer nav.main-nav a:hover {
        text-decoration: underline;
    }

footer nav.secondary-nav {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
    padding-top: calc(var(--px) * 19.2 * var(--scale-factor));
}

    footer nav.secondary-nav a {
        color: white;
        text-decoration: none;
        padding-left: calc(var(--px) * 19.2 * var(--scale-factor));
        padding-right: calc(var(--px) * 19.2 * var(--scale-factor));
    }

        footer nav.secondary-nav a:first-child {
            margin-left: calc(var(--px) * 25 * var(--scale-factor));
        }

        footer nav.secondary-nav a:last-child {
            margin-right: calc(var(--px) * 25 * var(--scale-factor));
        }

        footer nav.secondary-nav a:hover {
            text-decoration: underline;
        }

footer h2 {
    font-size: calc(var(--px) * 38.4 * var(--scale-factor));
    font-weight: var(--font-weight-bold);
}

footer div.finePrint {
    margin-top: calc(var(--px) * 38.4 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 19.2 * var(--scale-factor));
}

    footer div.finePrint small {
        font-size: calc(var(--px) * 19.2 * var(--scale-factor));
        margin-top: calc(var(--px) * 9.6 * var(--scale-factor));
        display: block;
    }

        footer div.finePrint small.finePrint p {
            margin: 0;
        }

    footer div.finePrint :first-child {
        margin-top: 0;
    }

            

/* ----- BODY ----- */

h1 {
    text-align: center;
    font-weight: var(--font-weight-black);
    font-size: calc(var(--px) * 71.6 * var(--scale-factor));
}

h2 {
    font-size: calc(var(--px) * 71.6 * var(--scale-factor));
    font-weight: var(--font-weight-semi-bold);
    text-align: center;
}

h3 {
    text-align: center;
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--px) * 35.8 * var(--scale-factor));
}

a {
    color: var(--scoe-link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ----- FEATURED CONTENT SECTIONS ----- */

section.featured-content {

}

    section.featured-content h2 {
        font-size: calc(var(--px) * 71.6 * var(--scale-factor));
        font-weight: var(--font-weight-semi-bold);
        text-align: center;
        margin-top: calc(var(--px) * 40 * var(--scale-factor));
        margin-bottom: calc(var(--px) * 40 * var(--scale-factor));
    }

    section.featured-content h3 {
        font-size: calc(var(--px) * 35.8 * var(--scale-factor));
        text-align: center;
        margin-top: calc(var(--px) * 20 * var(--scale-factor));
        margin-bottom: calc(var(--px) * 20 * var(--scale-factor));
    }

    section.featured-content a.moreContent {
        font-size: calc(var(--px) * 30 * var(--scale-factor));
        font-weight: var(--font-weight-light);
        text-align: right;
        margin-top: calc(var(--px) * 25 * var(--scale-factor));
        margin-right: var(--full-width-item-margin);
        color: black;
        text-decoration: none;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-color: currentcolor;
        display: block;
    }

section.featured-content a.moreContent:hover {
    text-decoration: underline;
}

    section.featured-content div.container section {
        box-shadow: var(--drop-shadow-values);
        z-index: 1;
        color: black;
    }

    section.featured-content div.container.link-list {
        box-shadow: var(--drop-shadow-values);
        z-index: 1;
        color: black;
    }

    section.featured-content div.container.double {
        box-shadow: var(--drop-shadow-values);
        z-index: 1;
        color: black;
    }

    section.featured-content div.container.single {
        box-shadow: var(--drop-shadow-values);
        z-index: 1;
        color: black;
    }

section.featured-content section.large h2 {
    font-size: calc(var(--px) * 40 * var(--scale-factor));
    font-weight: var(--font-weight-semi-bold);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(var(--px) * 10 * var(--scale-factor));
    margin-right: calc(var(--px) * 10 * var(--scale-factor));
}

section.featured-content section.large p {
    font-size: calc(var(--px) * 35 * var(--scale-factor));
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
    margin-left: calc(var(--px) * 25 * var(--scale-factor));
    margin-right: calc(var(--px) * 25 * var(--scale-factor));
    text-align: center;
}

section.featured-content section.medium h2 {
    font-size: calc(var(--px) * 35 * var(--scale-factor));
    font-weight: var(--font-weight-semi-bold);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(var(--px) * 10 * var(--scale-factor));
    margin-right: calc(var(--px) * 10 * var(--scale-factor));
}

section.featured-content section.medium p {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
    margin-top: calc(var(--px) * 15 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 15 * var(--scale-factor));
    margin-left: calc(var(--px) * 15 * var(--scale-factor));
    margin-right: calc(var(--px) * 15 * var(--scale-factor));
    text-align: center;
}

/* ----- FEATURED HEADER SECTIONS ----- */

/* ----- FEATURED ARTICLES SECTIONS ----- */


    section.featured-content.articles div.articles-container {
        display: grid;
        grid-column-gap: calc(var(--px) * 25 * var(--scale-factor));
        grid-template-columns: var(--featured-content-item-size-large) var(--featured-content-item-size-large) var(--featured-content-item-size-large);
        margin-left: var(--full-width-item-margin);
    }

section.featured-content.articles div.articles-container .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    section.featured-content.articles div.articles-container div.small.container {
        height: var(--featured-content-item-size-medium);
    }

section.featured-content.articles div div a {
    color: white;
    text-decoration: none;
}

    section.featured-content.articles div div a:hover {
        text-decoration: underline;
    }
    
/* --- LARGE articles ITEM --- */
section.featured-content.articles div div a section.large img {
    height: var(--featured-content-item-size-large);
    width: var(--featured-content-item-size-large);
    background-color: black;
    display: block;
}

section.featured-content.articles div div a section.large div {
    height: calc(var(--featured-content-item-size-large) / 5);
    background-color: #3C3D3D;
    color: white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

    section.featured-content.articles div div a section.large div.full {
        height: calc((var(--featured-content-item-size-large) / 5) * 6);
    }

/* --- MEDIUM articles ITEM --- */
section.featured-content.articles div div a section.medium {
    display: flex;
    flex-direction: row;
}
    
section.featured-content.articles div div a section.medium img {
    height: var(--featured-content-item-size-medium);
    width: var(--featured-content-item-size-medium);
    background-color: black;
    display: block;
    flex: 1 0 auto;
}

section.featured-content.articles div div a section.medium div {
    height: var(--featured-content-item-size-medium);
    background-color: #3C3D3D;
    color: white;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

/* --- SMALL articles ITEM --- */
section.featured-content.articles div div a section.small {
    display: flex;
    flex-direction: row;
}

    section.featured-content.articles div div a section.small img {
        height: var(--featured-content-item-size-small);
        width: var(--featured-content-item-size-small);
        background-color: black;
        display: block;
        flex: 1 0 auto;
    }

    section.featured-content.articles div div a section.small div {
        height: var(--featured-content-item-size-small);
        background-color: #3C3D3D;
        color: white;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

    section.featured-content.articles section.small h2 {
        font-size: calc(var(--px) * 30 * var(--scale-factor));
        font-weight: var(--font-weight-semi-bold);
        margin-top: 0;
        margin-bottom: 0;
        margin-left: calc(var(--px) * 10 * var(--scale-factor));
        margin-right: calc(var(--px) * 10 * var(--scale-factor));
    }

    section.featured-content.articles section.small p {
        margin-top: 0;
        margin-bottom: 0;
    }

/* ----- FEATURED PROFESSIONAL LEARNING SECTION ----- */

    section.featured-content.proflearn div.proflearn-container {
        display: grid;
        grid-column-gap: calc(var(--px) * 25 * var(--scale-factor));
        grid-template-columns: var(--featured-content-item-size-large) var(--featured-content-item-size-large) var(--featured-content-item-size-large);
        margin-left: var(--full-width-item-margin);
        min-height: var(--featured-content-item-size-medium);
    }

        section.featured-content.proflearn div.proflearn-container .container {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        section.featured-content.proflearn div.proflearn-container div.small.container {
            height: var(--featured-content-item-size-medium);
        }

    section.featured-content.proflearn div div a {
        color: white;
        text-decoration: none;
    }

        section.featured-content.proflearn div div a:hover {
            text-decoration: underline;
        }

    section.featured-content.proflearn div.proflearn-container div.left.container.double {
        box-shadow: none;
    }

    section.featured-content.proflearn div.proflearn-container div.right.container.double {
        grid-area: 1 / 2 / 1 / 4;
        flex-direction: row;
        justify-content: flex-start;
        color: white;
        font-size: calc(var(--px) * 35 * var(--scale-factor));
        max-height: var(--featured-content-item-size-medium);
        overflow-y: auto;
    }

        section.featured-content.proflearn div.proflearn-container div.right.container.double a {
            color: white !important;
        }

    section.featured-content.proflearn div.proflearn-container div.left.container.double section.medium {
        min-width: var(--featured-content-item-size-large);
        box-shadow: var(--drop-shadow-values) !important;
    }

        section.featured-content.proflearn div.proflearn-container div.left.container.double div.summary {
            width: var(--full-width-px);
        }

    div.proflearn-container div.right.container.link-list.double {
        background-color: #3C3D3D;
    }

    section.proflearn div.course-date {
        font-weight: bold;
        font-size: calc(var(--px) * 22 * var(--scale-factor));
        min-height: calc(var(--featured-content-item-size-small) * 1/3);
        align-items: center;
    }

    section.proflearn div.proflearn-container h2 {
        font-size: calc(var(--px) * 30 * var(--scale-factor)) !important;
        font-weight: var(--font-weight-semi-bold);
        min-height: calc(var(--featured-content-item-size-small) * 2/3);
        display: flex;
        justify-content: center;
        margin-bottom: 0;
        margin-top: 0;
    }

    section.proflearn strong {
        font-weight: var(--font-weight-semi-bold);
    }

    ul.prof-learn-section {
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
        display: table;
        margin: calc(var(--px) * 20);
    }

    section.proflearn div.proflearn-container li.prof-learn-course {
        list-style: none;
        margin-bottom: calc(var(--px) * 10);
    }

    /* --- MEDIUM PROFESSIONAL LEARNING COURSE --- */
    section.featured-content.proflearn div div a section.medium {
        display: flex;
        flex-direction: row;
    }

        section.featured-content.proflearn div div a section.medium img {
            height: var(--featured-content-item-size-medium);
            width: var(--featured-content-item-size-medium);
            background-color: black;
            display: block;
            flex: 1 0 auto;
        }

        section.featured-content.proflearn div div a section.medium div {
            background-color: #3C3D3D;
            color: white;
        }

    /* --- SMALL PROFESSIONAL LEARNING COURSE --- */
    section.featured-content.proflearn div div a section.small {
        display: flex;
        flex-direction: row;
    }

        section.featured-content.proflearn div div a section.small img {
            height: var(--featured-content-item-size-small);
            width: var(--featured-content-item-size-small);
            background-color: black;
            display: block;
            flex: 1 0 auto;
        }

        section.featured-content.proflearn div div a section.small div {
            height: var(--featured-content-item-size-small);
            background-color: #3C3D3D;
            color: white;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
        }

section.featured-content.articles section.small h2 {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(var(--px) * 10 * var(--scale-factor));
    margin-right: calc(var(--px) * 10 * var(--scale-factor));
}

section.featured-content.articles section.small p {
    margin-top: 0;
    margin-bottom: 0;
}

/* ----- HOME PAGE EVENTS SECTION ----- */

section.featured-content.home-page-events div.home-page-event-lists-container {
    display: grid;
    grid-column-gap: calc(var(--px) * 25 * var(--scale-factor));
    grid-template-columns: var(--featured-content-item-size-large) var(--featured-content-item-size-large) var(--featured-content-item-size-large);
    margin-left: var(--full-width-item-margin);
    min-height: var(--featured-content-item-size-medium);
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
}

section.featured-content.home-page-events div.prof-learn-container {
    background-color: #3C3D3D;
    box-shadow: var(--drop-shadow-values);
}

section.featured-content.home-page-events h3 {
    color: white;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: calc(var(--px) * 10 * var(--scale-factor));
    padding-bottom: calc(var(--px) * 10 * var(--scale-factor));
    padding-left: calc(var(--px) * 20 * var(--scale-factor));
    padding-right: calc(var(--px) * 20 * var(--scale-factor));
    text-align: left;
}

    section.featured-content.home-page-events div.home-page-event-lists-container div.left.container.double {
        box-shadow: none;
        grid-area: 1 / 1 / 3 / 3;
        min-width: var(--featured-content-item-size-large);
        
    }

section.featured-content.home-page-events div.home-page-event-lists-container ul.prof-learn-section {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    display: block;
    width: 100%;
    margin: 0;
    color: white;
    font-size: calc(var(--px) * 35 * var(--scale-factor));
    min-height: var(--featured-content-item-size-medium);
    max-height: var(--featured-content-item-size-medium);
    overflow-y: auto;
}

    section.featured-content.home-page-events div.home-page-event-lists-container ul.prof-learn-section {
        padding-bottom: calc(var(--px) * 10);
    }
    
    section.featured-content.home-page-events div.home-page-event-lists-container li.prof-learn-course {
        list-style: none;
        margin-bottom: calc(var(--px) * 10);
        margin-left: calc(var(--px) * 20);
    }

    section.featured-content.home-page-events div.home-page-event-lists-container li.prof-learn-course:first-child {
        margin-top: calc(var(--px) * 20);
    }
    
    section .featured-content.home-page-events div.home-page-event-lists-container li.prof-learn-course a {
        color: white !important;
    }

section.featured-content.home-page-events div.events-container {
    background-color: #3C3D3D;
    box-shadow: var(--drop-shadow-values);
}

section.featured-content.home-page-events div.home-page-event-lists-container div.right.container {
    box-shadow: none;
}

section.featured-content.home-page-events div.home-page-event-lists-container ul.events-section {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    display: block;
    width: 100%;
    margin: 0;
    color: white;
    font-size: calc(var(--px) * 35 * var(--scale-factor));
    min-height: var(--featured-content-item-size-medium);
    max-height: var(--featured-content-item-size-medium);
    overflow-y: auto;
}

section.featured-content.home-page-events div.home-page-event-lists-container ul.events-section {
    padding-bottom: calc(var(--px) * 10);
}

section.featured-content.home-page-events div.home-page-event-lists-container li.event {
    list-style: none;
    margin-bottom: calc(var(--px) * 10);
    margin-left: calc(var(--px) * 20);
}

    section.featured-content.home-page-events div.home-page-event-lists-container li.event:first-child {
        margin-top: calc(var(--px) * 20);
    }

    section .featured-content.home-page-events div.home-page-event-lists-container li.event a {
        color: white !important;
    }

div.event-date {
    font-weight: bold;
    font-size: calc(var(--px) * 22 * var(--scale-factor));
    max-height: calc(var(--featured-content-item-size-small) * 1/3);
    align-items: center;
}

div.course-date {
    font-weight: bold;
    font-size: calc(var(--px) * 22 * var(--scale-factor));
    max-height: calc(var(--featured-content-item-size-small) * 1/3);
    align-items: center;
}

section.event-links div.container h2 {
    font-size: calc(var(--px) * 30 * var(--scale-factor)) !important;
    font-weight: var(--font-weight-semi-bold);
    min-height: calc(var(--featured-content-item-size-small) * 2/3);
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 0;
}

div.full div.course-date {
    width: var(--featured-content-item-size-large) !important;
}

div.full div.event-date {
    width: var(--featured-content-item-size-large) !important;
}

div.home-page-event-lists-container a.moreContent {
    margin-right: 0;
}

/* ----- FEATURED EVENTS SECTION ----- */

section.featured-content.events div.events-container {
    display: grid;
    grid-column-gap: calc(var(--px) * 25 * var(--scale-factor));
    grid-template-columns: var(--featured-content-item-size-large) var(--featured-content-item-size-large) var(--featured-content-item-size-large);
    margin-left: var(--full-width-item-margin);
    min-height: var(--featured-content-item-size-medium);
}

    section.featured-content.events div.events-container .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    section.featured-content.events div.events-container div.small.container {
        height: var(--featured-content-item-size-medium);
    }

section.featured-content.events div div a {
    color: white;
    text-decoration: none;
}

    section.featured-content.events div div a:hover {
        text-decoration: underline;
    }

section.featured-content.events div.events-container div.left.container.double {
    box-shadow: none;
}

section.featured-content.events div.events-container div.right.container.double {
    grid-area: 1 / 2 / 1 / 4;
    flex-direction: row;
    justify-content: flex-start;
    color: white;
    font-size: calc(var(--px) * 35 * var(--scale-factor));
    max-height: var(--featured-content-item-size-medium);
    overflow-y: auto;
}

    section.featured-content.events div.events-container div.right.container.double a {
        color: white !important;
    }

section.featured-content.events div.events-container div.left.container.double section.medium {
    min-width: var(--featured-content-item-size-large);
    box-shadow: var(--drop-shadow-values) !important;
}

section.featured-content.events div.events-container div.left.container.double div.summary {
    width: var(--full-width-px);
}

section.featured-content.events strong {
    font-weight: var(--font-weight-semi-bold);
}

div.events-container div.right.container.link-list.double {
    background-color: #3C3D3D;
}

section.events div.event-date {
    font-weight: bold;
    font-size: calc(var(--px) * 22 * var(--scale-factor));
    min-height: calc(var(--featured-content-item-size-small) * 1/3);
    align-items: center;
}

section.events div.events-container h2 {
    font-size: calc(var(--px) * 30 * var(--scale-factor)) !important;
    font-weight: var(--font-weight-semi-bold);
    min-height: calc(var(--featured-content-item-size-small) * 2/3);
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: calc(var(--px) * 10 * var(--scale-factor));
    margin-right: calc(var(--px) * 10 * var(--scale-factor));
}

ul.events-section {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    display: table;
    margin: calc(var(--px) * 20);
    list-style: none;
}

ul.events-section li {
   margin-bottom: calc(var(--px) * 10);
}

section.featured-content.events div div a section.small div.full {
    width: var(--featured-content-item-size-large);
}

/* --- MEDIUM FEATURED EVENT --- */
section.featured-content.events div div a section.medium {
    display: flex;
    flex-direction: row;
}

    section.featured-content.events div div a section.medium img {
        height: var(--featured-content-item-size-medium);
        width: var(--featured-content-item-size-medium);
        background-color: black;
        display: block;
        flex: 1 0 auto;
    }

    section.featured-content.events div div a section.medium div {
        background-color: #3C3D3D;
        color: white;
    }

/* --- SMALL FEATURED EVENT --- */
section.featured-content.events div div a section.small {
    display: flex;
    flex-direction: row;
}

    section.featured-content.events div div a section.small img {
        height: var(--featured-content-item-size-small);
        width: var(--featured-content-item-size-small);
        background-color: black;
        display: block;
        flex: 1 0 auto;
    }

    section.featured-content.events div div a section.small div {
        height: var(--featured-content-item-size-small);
        background-color: #3C3D3D;
        color: white;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

/* ----- FEATURED LINKS SECTIONS ----- */


    section.featured-content.links div.links-container {
        display: grid;
        grid-column-gap: calc(var(--px) * 25 * var(--scale-factor));
        grid-template-columns: var(--featured-content-item-size-large) var(--featured-content-item-size-large) var(--featured-content-item-size-large);
        margin-left: var(--full-width-item-margin);
    }

        section.featured-content.links div.links-container.small.one {
            margin-left: calc((100vw - var(--featured-content-item-size-large)) / 2);
        }

        section.featured-content.links div.links-container.small.two {
            margin-left: calc(((100vw - (var(--featured-content-item-size-large) * 2)) / 2) - (var(--px) * 25 * var(--scale-factor)));
        }

    section.featured-content.links div.links-container .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    section.featured-content.links div.links-container.small .container {
        justify-content: unset;
    }

        section.featured-content.links div.links-container div.right.container.single {
            grid-area: 1 / 2 / 2 / 4;
        }

        section.featured-content.links div.links-container div.right.container.double a {
            color: white;
        }

        section.featured-content.links div.links-container div.left.container.double {
            grid-area: 1 / 1 / 2 / 3;
            flex-direction: row;
            justify-content: flex-start;
        }

            section.featured-content.links div.links-container div.left.container.double section.medium {
                min-width: calc(var(--featured-content-item-size-large) + (var(--px) * 12.5 * var(--scale-factor)));
            }

                section.featured-content.links div.links-container div.left.container.double section.medium div.full {
                    min-width: calc(var(--featured-content-item-size-large) + (var(--px) * 12.5 * var(--scale-factor)));
                }

        section.featured-content.links div.links-container div.left.container.double div.summary {
            width: var(--full-width-px);
        }

        section.featured-content.links div.links-container div.summary {
            background-color: var(--scoe-bg-color-light);
            padding: calc(var(--px) * 25 * var(--scale-factor));
        }

        section.featured-content.links div.links-container div.link-list {
            background-color: var(--scoe-bg-color-light);
            padding: calc(var(--px) * 25 * var(--scale-factor));
        }

        section.featured-content.links div.links-container div.right.container a {
            text-align: center;
        }

section.featured-content.links div div a {
    color: white;
    text-decoration: none;
}

    section.featured-content.links div div a:hover {
        text-decoration: underline;
    }

/* --- MEDIUM LINK --- */
section.featured-content.links div div a section.medium {
    display: flex;
    flex-direction: row;
}

    section.featured-content.links div div a section.medium img {
        height: var(--featured-content-item-size-medium);
        width: var(--featured-content-item-size-medium);
        background-color: black;
        display: block;
        flex: 1 0 auto;
    }

    section.featured-content.links div div a section.medium div {
        height: var(--featured-content-item-size-medium);
        background-color: #3C3D3D;
        color: white;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        min-width: calc(var(--featured-content-item-size-large) - var(--featured-content-item-size-medium));
    }

    section.featured-content.links div div a section.medium div.full {
        width: var(--featured-content-item-size-large);
    }

/* --- SMALL LINK --- */
    section.featured-content.links div div a section.small {
        display: flex;
        flex-direction: row;
    }

        section.featured-content.links div.links-container.small div a section.small {
            margin-bottom: calc(var(--px) * 25);
        }

    section.featured-content.links div div a section.small img {
        height: var(--featured-content-item-size-small);
        width: var(--featured-content-item-size-small);
        background-color: black;
        display: block;
        flex: 1 0 auto;
    }

    section.featured-content.links div div a section.small div {
        height: var(--featured-content-item-size-small);
        width: calc(var(--featured-content-item-size-large) - var(--featured-content-item-size-small));
        background-color: #3C3D3D;
        color: white;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

    section.featured-content.links div div a section.small div.full {
        width: var(--featured-content-item-size-large);
    }

    section.featured-content.links section.small h2 {
        font-size: calc(var(--px) * 30 * var(--scale-factor));
        font-weight: var(--font-weight-semi-bold);
        margin-top: 0;
        margin-bottom: 0;
        margin-left: calc(var(--px) * 10 * var(--scale-factor));
        margin-right: calc(var(--px) * 10 * var(--scale-factor));
    }

    section.featured-content.links section.small h3 {
        font-size: calc(var(--px) * 25 * var(--scale-factor));
        font-weight: var(--font-weight-regular);
        margin-top: calc(var(--px) * 10 * var(--scale-factor));
        margin-bottom: 0;
        margin-left: calc(var(--px) * 10 * var(--scale-factor));
        margin-right: calc(var(--px) * 10 * var(--scale-factor));
    }

    section.featured-content.links section.small p {
        margin-top: 0;
        margin-bottom: 0;
    }

/* ----- FEATURED STAFF SECTIONS ----- */

section.featured-content.staff section.medium h2 {
    font-size: calc(var(--px) * 40 * var(--scale-factor));
    margin-top: calc(var(--px) * 10 * var(--scale-factor));
}

section.featured-content.staff section.medium h3 {
    margin-top: calc(var(--px) * 10 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 10 * var(--scale-factor));
}

section.featured-content.staff section.small h3 {
    margin-top: calc(var(--px) * 10 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 10 * var(--scale-factor));
    font-size: calc(var(--px) * 28 * var(--scale-factor));
}

section.featured-content.staff div.staff-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
}

section.featured-content.staff div div a {
    color: white;
    text-decoration: none;
}

    section.featured-content.staff div div a:hover {
        text-decoration: underline;
    }

section.featured-content.staff div section {
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
    margin-left: calc(var(--px) * 25 * var(--scale-factor));
    text-align: center;
}

section.featured-content.staff div section:first-child {
    margin-left: 0;
}

/* --- MEDIUM STAFF ITEM --- */

    section.featured-content.staff div section.medium img {
        height: var(--featured-content-item-size-medium);
        width: var(--featured-content-item-size-medium);
        background-color: black;
        display: block;
        flex: 1 0 auto;
    }

    section.featured-content.staff div section.medium div {
        height: calc(var(--featured-content-item-size-medium) * 2/3);
        width: var(--featured-content-item-size-medium);
        background-color: #3C3D3D;
        color: white;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }

        section.featured-content.staff div section.medium div.full {
            width: var(--featured-content-item-size-medium);
            height: var(--featured-content-item-size-large);
        }

    section.featured-content.staff div section.medium:nth-child(6n) {
        margin-left: 0;
    }

/* --- SMALL STAFF ITEM --- */
    section.featured-content.staff div section.small {
        display: flex;
        flex-direction: row;
        min-width: var(--featured-content-item-size-large);
    }

    section.featured-content.staff div section.small img {
        height: var(--featured-content-item-size-small);
        width: var(--featured-content-item-size-small);
        background-color: black;
        display: block;
        flex: 0 0 auto;
    }

    section.featured-content.staff div section.small div {
        height: var(--featured-content-item-size-small);
        background-color: #3C3D3D;
        color: white;
        display: flex;
        flex-flow: column nowrap;
        flex: auto;
        justify-content: center;
    }

    section.featured-content.staff div section.small:nth-child(4n) {
        margin-left: 0;
    }

section.featured-content.staff section.small h2 {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
    font-weight: var(--font-weight-semi-bold);
    margin-top: 0;
    margin-bottom: 0;
    margin-left: calc(var(--px) * 10 * var(--scale-factor));
    margin-right: calc(var(--px) * 10 * var(--scale-factor));
}

section.featured-content.staff div section.small div.full {
    width: var(--featured-content-item-size-large);
}

/* ----- FEATURED TEXT BLOCK SECTIONS ----- */

section.featured-content.text {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
}


/* ----- FEATURED IMAGE SECTIONS ----- */

section.featured-content.image {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
}

    section.featured-content.image figure {
        text-align: center;
        max-width: var(--full-width-item-width);
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    section.featured-content.image img {
        max-width: var(--full-width-item-width);
    }

/* ----- FEATURED YOUTUBE VIDEO SECTIONS ----- */

section.featured-content.youtube iframe {
    width: var(--full-width-item-width);
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 10 * var(--scale-factor));
    height: calc(var(--px) * 960 * var(--scale-factor));
}

section.featured-content.youtube a {
    width: var(--full-width-item-margin);
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
}

/* ----- FEATURED CONTENT LIST SECTIONS ----- */

section.featured-content.list {
    width: var(--full-width-item-width);
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-width);
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
}

    section.featured-content.list div.list-container div.content-item {
        display: grid;
        grid-template-columns: var(--featured-content-item-size-medium) calc(var(--full-width-item-width) - var(--featured-content-item-size-medium));
        grid-gap: calc(var(--px) * 25 * var(--scale-factor));
        margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
    }

        section.featured-content.list div.list-container div.content-item img.featured {
            width: var(--featured-content-item-size-medium);
        }

        section.featured-content.list div.list-container div.content-item h3  {
            font-weight: var(--font-weight-semi-bold);
        }

        section.featured-content.list div.list-container div.content-item h3.Left {
            text-align: left;
        }



/* ----- SOCIAL MEDIA BAR ----- */

section.socialMediaBar {
    background-color: var(--scoe-bg-color-light);
    height: calc(var(--px) * 100 * var(--scale-factor));
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

    section.socialMediaBar .socialMediaLink {
        color: var(--scoe-bg-color-dark);
        text-decoration: none;
        font-size: calc(var(--px) * 50 * var(--scale-factor));
        margin-left: calc(var(--px) * 25 * var(--scale-factor));
    }

    section.socialMediaBar a:last-of-type {
        margin-right: calc(var(--px) * 25 * var(--scale-factor));
    }

/* ----- HOME INFOGRAPHIC ----- */
figure.home-infographic {
    width: var(--full-width-px);
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-right: calc(var(--px) * 25 * var(--scale-factor));
    margin-left: 0;
    margin-right: 0;
}

    figure.home-infographic img {
        width: var(--full-width-item-width);
        margin-left: var(--full-width-item-margin);
        margin-right: var(--full-width-item-margin);
        box-shadow: var(--drop-shadow-values);
    }

/* ----- SPACER ----- */

div.spacer {
    margin-top: calc(var(--px) * 50 * var(--scale-factor));
}

/* ----- FOOTER HERO IMAGE ----- */

.footerHeroImage {
    width: var(--full-width-px);
    margin: 0;
}

.footerHeroImage img {
    width: 100%;
}

/* ----- GENERAL ----- */

.hidden {
    display: none !important;
}

.icoMoon {
    font-family: 'IcoMoon Free';
}

a.link-list {
    color: black !important;
}

figcaption {
    font-size: calc(var(--px) * 20 * var(--scale-factor));
}

figcaption p:first-of-type {
    margin-block-start: 0;
}

figcaption p:last-of-type {
    margin-block-end: 0;
}

/* ----- VIDEOS ----- */

.vid-container {
    clear: both;
    position: relative;
    box-sizing: border-box;
    z-index: 0;
    min-width: var(--full-width-px);
}

.vid-container video {
    width: var(--full-width-px);
    object-fit: cover;
}

div.home-hero-container .vid-container {
    min-width: initial;
}

.v-btn {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    padding: 20px;
    border: none;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: all .2s ease-out;
    opacity: 0;
    color: transparent;
    background: transparent;
}

.v-cc {
    right: 0;
    opacity: .75;
    font-size: larger;
    font-weight: 800;
    color: #fff;
    margin-bottom: 7px;
}

.v-btn.v-pause:before {
    margin-right: 2px;
}

.v-btn.v-pause:after {
    margin-left: 2px;
}

.v-btn.v-pause:after, .v-btn.v-pause:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 20px;
    background-color: #fff;
}

.v-btn.v-play:before {
    content: "";
    display: block;
    border-top: 10px solid transparent;
    border-left: 16px solid #fff;
    border-bottom: 10px solid transparent;
}

.v-btn, .v-btn:focus, v-btn:hover {
    background-color: transparent;
}

    .v-btn[aria-hidden='true'],
    .v-btn[aria-hidden='true']:hover,
    .v-btn[aria-hidden='true']:focus {
        opacity: 0;
        visibility: hidden;
    }

    .v-btn[aria-hidden='false'] {
        z-index: 1;
        opacity: 0.75;
        visibility: visible;
    }

        .v-btn[aria-hidden='false']:hover,
        .v-btn[aria-hidden='false']:focus {
            opacity: 1;
        }

/* ----- INFOGRAPHICS ----- */

.infographics-container {
    box-sizing: border-box;
    z-index: 0;
    text-align: center;
}

img.infographic {
    height: 100%;
    max-height: var(--video-height);
}

/* ----- CALENDAR EVENT LIST ----- */

section.calendar-event-list {
    margin-top: calc(var(--px) * 25 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
}

section.calendar-event-list section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: var(--two-thirds-width-item-width);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--scoe-bg-color-light);
    box-shadow: var(--drop-shadow-values);
}

    section.calendar-event-list h3 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: calc(var(--px) * 25 * var(--scale-factor));
        font-weight: var(--font-weight-semi-bold);
    }

    section.calendar-event-list section div {
        margin: calc(var(--px) * 50 * var(--scale-factor)) calc(var(--px) * 50 * var(--scale-factor)) 0 calc(var(--px) * 50 * var(--scale-factor));
    }

        section.calendar-event-list section div a.details {
            font-size: calc(var(--px) * 35 * var(--scale-factor));
            color: black;
            font-weight: var(--font-weight-semi-bold);
            text-decoration: none;
        }

        section.calendar-event-list section div a:hover {
            text-decoration: underline;
        }

        section.calendar-event-list section div p {
            margin: 0;
        }

        section.calendar-event-list section div:last-child {
            margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
        }

    section.calendar-event-list div div.description {
        margin: 0;
    }

    section.calendar-event-list a.highlight {
        font-weight: var(--font-weight-semi-bold);
    }

    section.calendar-event-list ul.docs-links {
        list-style: none;
        margin-block-start: calc(var(--px) * 15 * var(--scale-factor));
        margin-block-end: 0;
        padding-inline-start: 0;
    }

    section.calendar-event-list div.docs-links {
        display: grid;
        grid-template-columns: 50% 50%;
        margin-top: calc(var(--px) * 15 * var(--scale-factor));
        margin-left: 0;
        margin-right: 0;
    }

    section.calendar-event-list div.docs {
        margin: 0;
    }

    section.calendar-event-list div.links {
        margin: 0;
    }

.calendar-event-list.description {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
}

.calendar-event-list.thumbnail {
    width: calc(var(--px) * 125);
    height: calc(var(--px) * 125);
    margin-right: calc(var(--px) * 20);
    vertical-align: middle;
    margin-top: calc(var(--px) * 10);
    float: left;
}

/* ----- DOCUMENT LIST ----- */
section.document-list ul {
    display: grid;
    grid-template-columns: calc(50% - (var(--px) * 10 * var(--scale-factor))) calc(50% - (var(--px) * 10 * var(--scale-factor)));
    grid-gap: calc(var(--px) * 20 * var(--scale-factor));
    width: var(--two-thirds-width-item-width);
    padding-inline-start: 0;
    padding-top: calc(var(--px) * 20 * var(--scale-factor));
    padding-bottom: calc(var(--px) * 20 * var(--scale-factor));
    margin-left: auto;
    margin-right: auto;
    background-color: var(--scoe-bg-color-light);
    box-shadow: var(--drop-shadow-values);
    font-size: calc(var(--px) * 30 * var(--scale-factor));
}

section.document-list li {
    list-style-type: none;
    text-align: center;
}

section.document-list li a {
    color: var(--scoe-link-color);
    font-weight: var(--font-weight-semi-bold);
    text-decoration: none;
}

    section.document-list li a:hover {
        text-decoration: underline;
    }

/* ----- ARTICLE LIST ----- */

section.article-list section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: var(--two-thirds-width-item-width);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--scoe-bg-color-light);
    box-shadow: var(--drop-shadow-values);
}

    section.article-list section article {
        margin: calc(var(--px) * 50 * var(--scale-factor)) calc(var(--px) * 50 * var(--scale-factor)) 0 calc(var(--px) * 50 * var(--scale-factor));
    }

        section.article-list section article a {
            font-size: calc(var(--px) * 35 * var(--scale-factor));
            color: black;
            font-weight: var(--font-weight-semi-bold);
            text-decoration: none;
        }

        section.article-list section article a:hover {
            text-decoration: underline;
        }

        section.article-list section article p {
            margin: 0;
        }

        section.article-list section article:last-child {
            margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
        }

.article-list.subheader {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
}

.article-list.thumbnail {
    width: calc(var(--px) * 100);
    height: calc(var(--px) * 100);
    margin-right: calc(var(--px) * 20);
    vertical-align: middle;
    margin-top: calc(var(--px) * 10);
    float: left;
}
/* ----- ARTICLE ----- */

h2.article-heading {
    margin-left: calc(var(--px) * 25 * var(--scale-factor));
    margin-right: calc(var(--px) * 25 * var(--scale-factor));
}

figure.article-featured {
    margin: 0 calc(var(--px) * 50 * var(--scale-factor)) calc(var(--px) * 50 * var(--scale-factor)) var(--full-width-item-margin);
}

    figure.article-featured.Right {
        float: right;
    }

    figure.article-featured.Left {
        float: left;
    }

figure.article-featured img {
    max-width: calc(var(--full-width-px) / 3);
}

    figure.article-featured figcaption {
        max-width: calc(var(--full-width-px) / 3);
    }

figure.article-additional {
    margin: calc(var(--px) * 25 * var(--scale-factor)) calc(var(--px) * 25 * var(--scale-factor)) calc(var(--px) * 25 * var(--scale-factor)) 0;
    display: inline-block;
    vertical-align: top;
    max-width: calc(var(--px) * 400 * var(--scale-factor));
}

    figure.article-additional.two-column {
        max-height: calc(var(--px) * 400 * var(--scale-factor));
        margin: calc(var(--px) * 25 * var(--scale-factor)) 0 0 0;
    }

    figure.article-additional img {
        max-height: calc(var(--px) * 400 * var(--scale-factor));
    }

    figure.article-additional figcaption {
        text-align: left;
    }

section.article-additional-images {
    overflow-x: auto;
    margin: calc(var(--px) * 25 * var(--scale-factor));
    text-align: center;
}

    section.article-additional-images.vertical {
        overflow-x: hidden;
        overflow-y: auto;
    }

    section.article-additional-images :last-child {
        margin-right: 0;
    }

    section.article-additional-images.vertical :last-child {
        margin-right: initial;
    }

    section.article-additional-images.vertical :first-child {
        margin-top: 0;
    }

section.article-body {
    margin: 0 var(--full-width-item-margin) calc(var(--px) * 50 * var(--scale-factor)) var(--full-width-item-margin);
}

    section.article-body h1 {
        font-size: calc(var(--px) * 35 * var(--scale-factor));
    }

    section.article-body h2 {
        font-size: calc(var(--px) * 30 * var(--scale-factor));
        margin-top: unset;
        margin-bottom: unset;
    }

    section.article-body h3 {
    }

section.article-date {
}

div.article-two-column-container {
    display: grid;
    grid-gap: calc(var(--px) * 25 * var(--scale-factor));
}

    div.article-two-column-container.small-left {
        grid-template-columns: calc(25% - (var(--px) * 12.5) * var(--scale-factor)) calc(75% - (var(--px) * 12.5) * var(--scale-factor));
    }

    div.article-two-column-container.small-right {
        grid-template-columns: calc(75% - (var(--px) * 12.5) * var(--scale-factor)) calc(25% - (var(--px) * 12.5) * var(--scale-factor));
    }

article nav.breadcrumbs {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
}

/* ----- EVENT LIST ----- */

section.event-list section.container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: var(--two-thirds-width-item-width);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--scoe-bg-color-light);
    box-shadow: var(--drop-shadow-values);
}

    section.event-list section.container section.event {
        margin: calc(var(--px) * 50 * var(--scale-factor)) calc(var(--px) * 50 * var(--scale-factor)) 0 calc(var(--px) * 50 * var(--scale-factor));
    }

        section.event-list section.container section.event a {
            font-size: calc(var(--px) * 35 * var(--scale-factor));
            color: black;
            font-weight: var(--font-weight-semi-bold);
            text-decoration: none;
        }

            section.event-list section.container section.event a:hover {
                text-decoration: underline;
            }

        section.event-list section.container section.event p {
            margin: 0;
        }

        section.event-list section.container section.event:last-child {
            margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
        }

.event-list.subheader {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
}

.event-list.thumbnail {
    width: calc(var(--px) * 100);
    height: calc(var(--px) * 100);
    margin-right: calc(var(--px) * 20);
    vertical-align: middle;
    margin-top: calc(var(--px) * 10);
    float: left;
}

/* ----- IMAGE GALLERY PAGES ----- */
h2 .image-gallery-heading {
    margin-left: calc(var(--px) * 25 * var(--scale-factor));
    margin-right: calc(var(--px) * 25 * var(--scale-factor));
}

section.image-gallery-date {
    margin: 0 var(--full-width-item-margin) calc(var(--px) * 25 * var(--scale-factor)) var(--full-width-item-margin);
}

section.image-gallery nav.breadcrumbs {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
}

section.image-gallery-notes {
    margin: 0 var(--full-width-item-margin) calc(var(--px) * 25 * var(--scale-factor)) var(--full-width-item-margin);
}

section.image-gallery-associatedDocumentLink {
    margin: 0 var(--full-width-item-margin) calc(var(--px) * 25 * var(--scale-factor)) var(--full-width-item-margin);
}

section.image-gallery ul {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    display: grid;
    list-style: none;
    padding-inline-start: 0;
    grid-template-columns: var(--image-gallery-item-width) var(--image-gallery-item-width) var(--image-gallery-item-width) var(--image-gallery-item-width) var(--image-gallery-item-width) var(--image-gallery-item-width);
    grid-gap: var(--image-gallery-item-gap-size);
}

    section.image-gallery ul li {
    }

        section.image-gallery ul li figure {
            margin: 0;
            display: grid;
            grid-template-columns: calc(100% - (var(--px) * 50 * var(--scale-factor))) calc(var(--px) * 50 * var(--scale-factor));
            grid-template-rows: calc(100% - (var(--px) * 50 * var(--scale-factor))) calc(var(--px) * 50 * var(--scale-factor));
        }

            section.image-gallery ul li figure img {
                width: 100%;
                box-shadow: var(--drop-shadow-values);
                grid-area: 1 / 1 / 3 / 3;
                object-fit: cover;
            }

            section.image-gallery ul li figure img.highlight {
                border: calc(var(--px) * 5 * var(--scale-factor)) solid var(--scoe-link-color);
            }

        section.image-gallery ul li a {
            color: white;
            grid-area: 1 / 1 / 3 / 3;
        }

            section.image-gallery ul li a.hires {
                font-family: 'IcoMoon Free';
                grid-area: 2 / 2 /3 /3;
                text-decoration: none;
            }

            section.image-gallery ul li a.hires span.hires-bg {
                background-color: rgba(0, 0, 0, 0.75);
                padding: calc(var(--px) * 10 * var(--scale-factor));
            }

                section.image-gallery ul li a.hires span.hires-bg.highlight {
                    border: calc(var(--px) * 1 * var(--scale-factor)) solid white;
                }

/* ----- ORGANIZATIONAL UNIT PAGES ----- */

section.ou-body {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
    font-size: calc(var(--px) * 35 * var(--scale-factor));
}

    section.ou-body::after {
        content: "";
        display: block;
        clear: both;
    }

.ou-infographic {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

    .ou-infographic img {
        margin-left: calc(var(--px) * 25 * var(--scale-factor));
        margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
        width: calc(50% - (var(--px) * 12.5 * var(--scale-factor)));
        float: right;
        box-shadow: var(--drop-shadow-values);
    }

.ou-hero-container {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 66.67% 33.33%;
}

.ou-hero-container.full {
    grid-template-columns: 100%;
}

.ou-hero-photo {
    width: 100%;
}

/* ----- CALENDAR EVENT PAGES ----- */

section.calendarEvent {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
}

dl.calendarEvent {
    text-align: left;
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--px) * 35.8 * var(--scale-factor));
}

    dl.calendarEvent dt {
        font-weight: var(--font-weight-semi-bold);
    }

    dl.calendarEvent dd {
        margin-bottom: calc(var(--px) * 25 * var(--scale-factor));
    }

    dl.calendarEvent dd.description p:first-of-type {
        margin-top: 0;
    }

    dl.calendarEvent dd.documents ul {
        list-style: none;
        padding-inline-start: 0;
        margin-block-start: 0;
        margin-block-end: 0;
    }

    dl.calendarEvent dd.documents ul li a.highlight {
        font-weight: var(--font-weight-semi-bold);
    }

    dl.calendarEvent dd.links ul {
        list-style: none;
        padding-inline-start: 0;
        margin-block-start: 0;
        margin-block-end: 0;
    }

    dl.calendarEvent dd.links ul li a.highlight {
        font-weight: var(--font-weight-semi-bold);
    }

section.calendarEvent img {
    height: calc(var(--px) * 300 * var(--scale-factor));
    width: calc(var(--px) * 300 * var(--scale-factor));
    margin-top: 1em;
}

section.calendarEvent footer {
    font-size: calc(var(--px) * 30 * var(--scale-factor));
}

/* ----- STAFF DIRECTORY / SCHOOL DIRECTORY PAGES ----- */

#root {
    width: var(--full-width-item-width);
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
}

    #root input {
        width: 67%;
        margin-left: 16.5%;
        margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
        font: var(--font-weight-regular) calc(var(--px) * 35 * var(--scale-factor)) 'Source Sans Pro',sans-serif;
    }

    #root table.table {
        width: 90%;
        margin-left: 5%;
        margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
    }

        #root table.table thead {
            font-weight: var(--font-weight-regular);
            font-size: calc(var(--px) * 35.8 * var(--scale-factor));
        }

        #root table.table th {
            padding-left: calc(var(--px) * 15 * var(--scale-factor));
            padding-bottom: calc(var(--px) * 15 * var(--scale-factor));
        }

        #root table.table td {
            padding-left: calc(var(--px) * 15 * var(--scale-factor));
            padding-bottom: calc(var(--px) * 15 * var(--scale-factor));
        }

        #root table.table tbody th {
            font-weight: var(--font-weight-bold);
            text-align: unset;
        }

nav.directory {
    width: var(--full-width-item-width);
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
}

/* ----- GOOGLE SEARCH ----- */

section.google-search {
    width: var(--full-width-item-width);
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
    margin-top: calc(var(--px) * 50 * var(--scale-factor));
    margin-bottom: calc(var(--px) * 50 * var(--scale-factor));
}

/* ----- BREADCRUMBS ----- */

nav.breadcrumbs {
    font-weight: var(--font-weight-semi-bold);
}

nav.breadcrumbs.fullWidth {
    margin-left: var(--full-width-item-margin);
    margin-right: var(--full-width-item-margin);
}   

/* ----- UMBRACO TINYMCE EDITOR ----- */


/**umb_name:H2*/
h2 {
}

/**umb_name:H3*/
h3 {
}

/**umb_name:Body Text*/
p {
}


/* ----- MEDIA QUERIES ----- */

/* ----- Less than HD ----- */
@media (max-width: 1919px) {

    div.links-container {
        margin-left: 0;
    }
}

/* ----- HD 1920 x 1080 ----- */
@media (min-width: 1920px) {

    :root {
        --body-padding: calc(var(--full-width-px) * 0.12);
        --scale-factor: 0.76;
    }
}

/* ----- 4K 3840 x 2160 ----- */
@media (min-width: 3840px) {

}