:root {
    --bju-promise-gray: #eceef3;
}

/* Keep max width rule */
.max-1200 {
    max-width: 1200px;
    margin: 0 auto;
}

/* HERO SECTION */
.hero-background {
    position: relative;
}

.hero-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/header-chevron-new.svg'),
        linear-gradient(to right,
            #00B5EF 0%,
            #00B5EF 45%,
            rgba(0, 181, 239, 0) 60%,
            rgba(0, 181, 239, 0) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left top;
    background-size: 50% auto, 100% 100%;
    z-index: 1;
}

.hero-image-container {
    position: relative;
}

.hero-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* Overlay text container */
.hero-image-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}


#main #hero-image .hero-image-text {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

#main #hero-image .header-container {
    width: 50%;
}

#main #hero-image .hero-image-text h2 {
    color: var(--bju-navy);
    font-weight: bold;
    font-size: 5em;
    line-height: 1;
}

#main #hero-image .header-container img {
    max-width: 2.8em;
    margin-left: 0.2em;
}

@media (max-width: 1300px) {
    #main #hero-image .hero-image-text h2 {
        font-size: 4em;
    }

    #main #hero-image .header-container img {
        max-width: 2.2em;
    }

    #main #hero-image .header-container {
        width: 60%;
    }

    #main #hero-image .hero-image-text {
        padding-left: 1em;
    }
}

@media (max-width: 1100px) {
    #main #hero-image .hero-image-text h2 {
        font-size: 3em;
    }

    #main #hero-image .header-container img {
        max-width: 1.7em;
    }
}

@media (max-width: 800px) {
    .hero-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,
                #00B5EF 0%,
                #00B5EF 45%,
                rgba(0, 181, 239, 0) 60%,
                rgba(0, 181, 239, 0) 100%);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 100% 100%;
        z-index: 1;
    }
}

@media (max-width: 550px) {
    #main #hero-image .hero-image-text h2 {
        font-size: 2em;
    }

    #main #hero-image .header-container img {
        display: none;
    }
}

@media (max-width: 400px) {
    #main #hero-image .hero-image-text h2 {
        font-size: 1.5em;
    }
}

/* PROMISE TEXT */
#main #promise-text div {
    padding-top: 3em;
    padding-bottom: 3em;
}

#main #promise-text h3 {
    text-align: center;
    font-weight: bold;
    font-size: 3em;
}

@media (max-width: 1100px) {
    #main #promise-text h3 {
        font-size: 2.5em;
    }

    #main #promise-text {
        padding-left: 1em;
        padding-right: 1em;
    }
}

@media (max-width: 850px) {
    #main #promise-text h3 {
        font-size: 2em;
    }
}

@media (max-width: 650px) {
    #main #promise-text h3 {
        font-size: 1.5em;
    }
}

/* HIGHER CALLING */
#higher-calling {
    position: relative;
    z-index: 5;
}

.hc-spacer {
    min-height: 60em;
}


.hc-background::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(0, 27, 65, 0.5) 0%,
            rgba(0, 27, 65, 0.5) 40%,
            rgba(0, 27, 65, 1) 65%,
            rgba(0, 27, 65, 1) 100%);
    z-index: 1;
}

#higher-calling p {
    color: var(--bju-white);
}

#main #higher-calling h2 {
    color: var(--bju-cyan);
    font-weight: bold;
    font-size: 3em;
    line-height: 1.2;
}

.hc-container {
    padding: 4em;
    margin-bottom: 5em;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hc-content {
    max-width: 45%;
}

.hc-background {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    background-image: url("images/20211029xc-invite-km42.jpg");
    background-repeat: no-repeat;
}

/* Remove fixed image for iPhones */
@supports (-webkit-touch-callout: none) {
    .hc-background {
        background-position: center center;
        background-attachment: scroll;
        background-size: cover;
    }
}

@media (max-width: 1000px) {
    .hc-background::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,
                rgba(0, 27, 65, 0.5) 0%,
                rgba(0, 27, 65, 0.5) 30%,
                rgba(0, 27, 65, 1) 60%,
                rgba(0, 27, 65, 1) 100%);
        z-index: 1;
    }
}

@media (max-width: 800px) {
    .hc-background::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,
                rgba(0, 27, 65, 0.5) 0%,
                rgba(0, 27, 65, 0.5) 20%,
                rgba(0, 27, 65, 1) 50%,
                rgba(0, 27, 65, 1) 100%);
        z-index: 1;
    }

    .hc-content {
        max-width: 55%;
    }
}

@media (max-width: 650px) {

    #main #higher-calling h2 {
        font-size: 2.5em;
    }

    .hc-background::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom,
                rgba(0, 27, 65, 0.5) 0%,
                rgba(0, 27, 65, 0.5) 30%,
                rgba(0, 27, 65, 1) 50%,
                rgba(0, 27, 65, 1) 100%);
        z-index: 1;
    }

    .hc-background {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        background-position: center top;
        background-attachment: fixed;
        background-size: cover;
        background-image: url("images/20211029xc-invite-km42-centered.jpg");
        background-repeat: no-repeat;
    }

    .hc-container {
        max-width: 100%;
        padding-left: 1em;
        padding-right: 1em;
    }

    .hc-content {
        max-width: 100%;
        padding-top: 15em;
        padding-bottom: 2em;
    }

    .hc-spacer {
        min-height: 45em;
    }

    @supports (-webkit-touch-callout: none) {
        #main .hc-content {
            padding-top: 5em;
            padding-bottom: 2em;
        }
    }
}

@media (max-width: 550px) {
    @supports (-webkit-touch-callout: none) {
        .hc-background {
            background-position: initial;
            background-attachment: initial;
            background-image: none;
            background-size: auto;
        }

        .hc-background::after {
            background-color: var(--bju-navy) !important;
        }
    }
}


/* PROMISE VIDEO */
#video {
    position: relative;
    background: linear-gradient(to bottom,
            var(--bju-promise-gray) 0%,
            var(--bju-promise-gray) 75%,
            transparent 75%,
            transparent 100%);
    padding-top: 10em;
    z-index: 1;
}

.video-background {
    position: relative;
    margin-bottom: -10em;
}

.video-content {
    z-index: 5;
    padding-left: 1em;
    padding-right: 1em;
}

.video-phc {
    text-align: center;
    padding-top: 1em;
}

.video-phc img {
    width: 80%;
}

.video-item {
    position: relative;
}

.video-thumbnail {
    border: 3px solid var(--bju-navy);
    z-index: 2 !important;
}

#play-container {
    position: absolute;
    bottom: calc(50% - 40px);
    left: calc(50% - 50px);
    z-index: 3;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100px;
    padding: 0.3em;
    background-color: rgba(0, 181, 239, 0.7);
    border-radius: 50%;
}

.play-image {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) hue-rotate(180deg);
}

@media (max-width: 1400px) {
    .video-item {
        margin-bottom: 5em;
    }
}

@media (max-width: 650px) {
    .video-background {
        margin-top: -3em;
    }

    .video-item {
        margin-bottom: 10em;
    }

    .video-phc img {
        width: 100%;
    }
}

/* ATTRIBUTES */

#main #promise-attributes .attributes-heading {
    padding-left: 1em;
    padding-right: 1em;
}

#main #promise-attributes h2 {
    text-align: center;
    color: #000;
    font-weight: bold;
    line-height: 1.2;
}

#promise-attributes .attribute-container {
    padding: 3em;
    padding-bottom: 1em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 0;
    column-gap: 15%;
    grid-auto-flow: column;
}

#promise-attributes .attribute-unit {
    display: grid;
    grid-template-columns: 3em auto;
    grid-template-rows: 20% auto;
}

#promise-attributes .navy-chevron {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

#promise-attributes .attribute-heading {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

#promise-attributes .attribute-text {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

#promise-attributes .navy-chevron {
    padding: 0.5em;
    padding-top: 0.6em;
}

#promise-attributes .navy-chevron img {
    width: 1.5em;
    height: 1.5em;
}

#promise-attributes .attribute-unit .attribute-heading h3 {
    color: var(--bju-cyan);
    font-weight: bold;
    font-size: 1.7em;
    padding-bottom: 2em;
}

#promise-attributes .attribute-unit .attribute-text {
    padding-top: 1em;
}

@media (max-width: 1100px) {
    #promise-attributes .attribute-container {
        column-gap: 5%;
    }
}

@media (max-width: 800px) {
    #main .attribute-container {
        display: flex;
        flex-direction: column;
    }

    #main #promise-attributes .max-1200 {
        padding-top: 2em;
    }
}

@media (max-width: 550px) {
    #promise-attributes .attribute-text {
        grid-column-start: 1;
    }
}


/* VERSE  */
#verse .verse-transition-top {
    margin-bottom: -1em;
}

.verse-background {
    background-color: var(--bju-cyan);
    position: relative;
    margin-top: 1em;
    padding-bottom: 3em;
}

#verse .verse-content {
    padding-bottom: 3em;
}

#verse .verse-content h3 {
    color: var(--bju-navy);
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

#verse .verse-content h4 {
    color: var(--bju-white);
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

#verse .transition-background {
    position: relative;
    min-height: 3em;
    background-color: var(--bju-white);
}

@media (max-width: 1100px) {
    #verse .verse-content h3 {
        font-size: 2.5em;
    }
}

@media (max-width: 1000) {
    #verse .verse-content {
        padding-top: 1em;
    }
}

@media (max-width: 800px) {
    #verse .verse-content h3 {
        font-size: 2em;
    }

    #verse .verse-background {
        padding-left: 1em;
        padding-right: 1em;
        margin-top: 1em;
        padding-top: 2em;
    }
}

@media (max-width: 600px) {
    #verse .verse-content {
        /* padding-top: 2em; */
    }
}


/* STORIES */
.stories-header {
    background-color: var(--bju-navy);
    text-align: center;
    padding: 2em;
}

#main .stories-header h2 {
    color: var(--bju-cyan) !important;
    font-weight: bold !important;
    font-size: 2.5em;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

#main .stories-inner-container {
    margin: 0 auto;
    padding-top: 7em;
    padding-bottom: 7em;
    padding-left: 1em;
    padding-right: 1em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    row-gap: 4em;
}

#main .story .story-header h4,
#main .story .story-header h5 {
    color: var(--bju-navy) !important;
}

#main .story__image-left {
    display: grid;
    grid-template-columns:
        minmax(0, 0.6fr) minmax(0, 2fr);
}

#main .story__image-right {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.6fr);
}


#main .story-image .story-lines img {
    width: 75px !important;
}

#main .story {
    grid-template-rows: 1fr;
}


/* Left images */
#main .story__image-left .story-content {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

#main .story__image-left .image-content {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

#main .story__image-left .image-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 2fr 1fr;
}

#main .story__image-left .story-lines {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

#main .story__image-left .story-image {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}


/* Right images */

#main .story__image-right .image-content {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

#main .story__image-right .story-content {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

#main .story__image-right .image-content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 4fr;
}

#main .story__image-right .story-lines {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

#main .story__image-right .story-image {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

/* Both ways */

.story-image {
    --top: 15%;
    /* how much to shave off at the top-left */
    --bottom: 15%;
    /* how much to shave off at the bottom-right */
    position: relative;
    aspect-ratio: 3 / 5;
    /* optional */
    overflow: clip;
    /* keep it tidy */
}

.story-image>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* don’t distort the image */
    display: block;
    margin-top: 0.8em;

}

.story__image-left .story-image>img {
    clip-path: polygon(0% var(--top),
            /* top-left inset */
            100% 0%,
            /* top-right corner */
            100% calc(100% - var(--bottom)),
            /* bottom-right inset */
            0% 100%
            /* bottom-left corner */
        );
}

.story__image-right .story-image>img {
    clip-path: polygon(0% 0%,
            /* top-left inset */
            100% var(--top),
            /* top-right corner */
            100% 100%,
            /* bottom-right inset */
            0% calc(100% - var(--bottom))
            /* bottom-left corner */
        );
}

#main #stories .story-content {
    margin: 2em;
    margin-top: 0;
}

#main #stories .story__image-right .story-content {
    text-align: right;
    margin-right: 6em;
}

#main #stories .story__image-left .story-content {
    margin-left: 6em;
}

#main #stories .story h4 {
    font-weight: bold;
    font-size: 2em;
}

#main #stories .story h5 {
    font-style: italic;
    margin-bottom: 1em;
}

.image-content>* {
    min-width: 0;
}

.story-image img {
    display: block;
    max-width: 100%;
    height: auto;
}


@media (max-width: 1300px) {
    #main .story__image-left {
        grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.5fr);
    }

    #main .story__image-right {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.6fr);
    }
}

@media (max-width: 1100px) {
    #main .story__image-left {
        grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.2fr);
    }

    #main .story__image-right {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.6fr);
    }

    #main #stories .story__image-right .story-content {
        margin-right: 3em;
    }

    #main #stories .story__image-left .story-content {
        margin-left: 3em;
    }
}

@media (max-width: 950px) {
    #main .story__image-left {
        grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.8fr);
    }

    #main .story__image-right {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.6fr);
    }

    #main #stories .story__image-right .story-content {
        margin-right: 2em;
    }

    #main #stories .story__image-left .story-content {
        margin-left: 2em;
    }
}

@media (max-width: 850px) {
    #main .story {
        grid-template-rows: 1fr auto;
    }

    #main .story .story__image-left {
        grid-template-columns: 1fr 1fr;
    }

    #main .story .story__image-right {
        grid-template-columns: 1fr 1fr;
    }

    #main .story .image-content {
        grid-row-start: 1;
        grid-row-end: 2;
    }

    #main .story .story-content {
        grid-row-start: 1;
        grid-row-end: 3;
    }

    .story-lines {
        display: none;
    }

    #main .story .image-content {
        display: flex;
    }
}

@media (max-width: 550px) {
    #main .story {
        display: flex;
        flex-direction: column;
    }

    .story-lines {
        display: block;
    }


    #main .story__image-right .image-content {
        margin-left: 4em;
        margin-right: 1em;
        display: grid;
        grid-template-columns: 5fr 1fr;
        grid-template-rows: 1fr 4fr;
    }

    #main .story__image-left .image-content {
        margin-left: 1em;
        margin-right: 4em;
        display: grid;
        grid-template-columns: 1fr 5fr;
        grid-template-rows: 2fr 1fr;
    }

    #main #stories .story-content {
        margin: 0 !important;
    }
}

/* BOTTOM IMAGE */
.bottom-image-container {
    position: relative;
    display: inline-block;
    background-color: var(--bju-cyan);
    padding-bottom: 3em;
    /* Why do we need this negative margin? */
    margin-bottom: -10px;
}

.white-overlay__top-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    /* adjust height */
    background: white;
    clip-path: polygon(49.5% -1%, 101% 101%, 101% -1%);
    z-index: 2;
    pointer-events: none;
    /* So it doesn't block clicks */
}

.white-overlay__top-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    /* adjust height */
    background: white;
    clip-path: polygon(-1% -1%, 50.5% -1%, -1% 101%);
    z-index: 2;
    pointer-events: none;
    /* So it doesn't block clicks */
}

.white-overlay__bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    /* adjust height */
    background: white;
    clip-path: polygon(-5% 101%, 50% 0%, 51% 101%);
    z-index: 2;
    pointer-events: none;
    /* So it doesn't block clicks */
}

.white-overlay__bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 20%;
    /* adjust height */
    background: white;
    clip-path: polygon(101% 101%, 50% 0%, 50.1% 101%);
    z-index: 2;
    pointer-events: none;
    /* So it doesn't block clicks */
}


.bottom-image-container img {
    display: block;
    width: 100%;
    height: auto;
}


/* keeps the triangle proportional as width changes */
.white-overlay__top-left,
.white-overlay__top-right,
.white-overlay__bottom-left,
.white-overlay__bottom-right {
    height: clamp(32px, 18vw, 200px);
    /* example: scale with width */
}

/* BOTTOM TRIANGLE SHAPE */

:root {
    --triangle-width: 100px;
    --triangle-height: 65px;
}

.bottom-triange {
    position: relative;
}

.bottom-triangle::after {
    content: "";
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: var(--triangle-width) solid transparent;
    border-right: var(--triangle-width) solid transparent;
    border-bottom: var(--triangle-height) solid white;
    z-index: 3;
}

.bottom-triangle__navy::after {
    border-bottom: var(--triangle-height) solid var(--bju-navy);
}

.bottom-triangle__right::after {
    left: 78%;
}

.bottom-triangle__center::after {
    left: 50%;
}

.bottom-triangle__left::after {
    left: 22%;
}

.bottom-triangle__full::after {
    --triangle-width: 50vw;
    --triangle-height: 200px;
}

@media (max-width: 800px) {
    :root {
        --triangle-width: 60px;
        --triangle-height: 40px;
    }
}

@media (max-width: 480px) {
    :root {
        --triangle-width: 45px;
        --triangle-height: 30px;
    }

}

@media (max-width: 800px) {
    #main .bottom-triangle__no-mobile::after {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
}