/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-856 {
        /* centers button */
        text-align: center;
        /* 116px - 164px top */
        /* 60px - 100px  bottom */
        padding: clamp(10.25rem, 16.82vw, 18.25rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
        background-color: #f7f7f7;
        /* clips the svg wave from overflowing */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    #hero-856 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 3rem;
    }

    #hero-856 .cs-content {
        max-width: 39.375rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #hero-856 .cs-topper {
        font-size: 1rem;
        line-height: 1.2em;
        text-transform: uppercase;
        text-align: inherit;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.25rem;
        display: block;
    }

    #hero-856 .cs-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 5vw, 3.8125rem);
        font-weight: 700;
        line-height: 1.2em;
        text-align: center;
        /* 23 characters including spaces wide */
        max-width: 23ch;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }

    #hero-856 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        max-width: 33.1875rem;
        /* 28px - 40px */
        margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
        color: var(--bodyTextColor);
    }

    #hero-856 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }

    #hero-856 .cs-button-solid-secondary {
        background-color: var(--secondary);
    }

    #hero-856 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }

    #hero-856 .cs-button-solid:hover:before {
        width: 100%;
    }

    #hero-856 .cs-picture {
        width: 100%;
        max-width: 35.625rem;
        /* 400px - 712px */
        height: clamp(25rem, 95vw, 44.5rem);
        /* 100px - 200px */
        border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
        box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
        /* clips the img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
    }

    #hero-856 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes image act as a background image */
        object-fit: cover;
        /* ensures the top of the images is at the top of the container, no heads getting cut off */
        object-position: top;
    }

    #hero-856 .cs-wave {
        /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
        width: 320%;
        height: auto;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        z-index: -1;
    }
}

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #hero-856 {
        text-align: left;
    }

    #hero-856 .cs-container {
        flex-direction: row;
        justify-content: space-between;
    }

    #hero-856 .cs-content {
        width: 40vw;
        /* prevents flex-box from squishing it */
        flex: none;
        align-items: flex-start;
        /* sends it to the right in the 2nd position */
        order: 2;
    }

    #hero-856 .cs-title,
    #hero-856 .cs-text {
        text-align: left;
    }

    #hero-856 .cs-picture {
        /* 623px - 814px */
        height: clamp(38.9375rem, 60vw, 50.875rem);
    }

    #hero-856 .cs-wave {
        width: 100%;
        left: 0;
        /* flips it horizontally */
        transform: scaleX(-1);
    }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #gallery-1152 {
        padding: var(--sectionPadding);
    }

    #gallery-1152 .cs-container {
        width: 100%;
        /* changes to 1280px at large desktop */
        max-width: 59rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }

    #gallery-1152 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #gallery-1152 .cs-topper {
        color: #767676;
    }

    #gallery-1152 .cs-title {
        margin: 0;
    }

    #gallery-1152 .cs-gallery {
        width: 100%;
        /* changes to 100% at tablet */
        max-width: 31.25rem;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 1.5vw, 1.25rem);
    }

    #gallery-1152 .cs-image {
        /* 260px - 360px */
        min-height: clamp(16.25rem, 60vw, 20rem);
        border-radius: 1rem;
        /* clips the image corners */
        overflow: hidden;
        display: block;
        grid-column: span 12;
        grid-row: span 1;
        position: relative;
    }

    #gallery-1152 .cs-image img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}

/* Tablet - 700px */
@media only screen and (min-width: 43.75rem) {
    #gallery-1152 .cs-gallery {
        max-width: 100%;
        grid-template-rows: 1fr;
    }

    #gallery-1152 .cs-image {
        grid-column: span 4;
    }

    #gallery-1152 .cs-image:nth-of-type(4),
    #gallery-1152 .cs-image:nth-of-type(5) {
        grid-column: span 6;
    }
}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #gallery-1152 .cs-container {
        max-width: 80rem;
    }

    #gallery-1152 .cs-gallery {
        grid-template-columns: repeat(5, 1fr);
    }

    #gallery-1152 .cs-image {
        grid-column: span 1;
    }

    #gallery-1152 .cs-image:nth-of-type(4),
    #gallery-1152 .cs-image:nth-of-type(5) {
        grid-column: span 1;
    }
}



/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-333 {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
    }

    #sbsr-333 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }

    #sbsr-333 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-333 .cs-text {
        margin-bottom: 1rem;
    }

    #sbsr-333 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }

    #sbsr-333 .cs-ul {
        width: 100%;
        margin: 0 0 2rem 0;
        padding-left: 1.25rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    #sbsr-333 .cs-li {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        list-style: none;
        text-align: left;
        width: 100%;
        max-width: 25rem;
        margin: 0;
        color: var(--bodyTextColor);
        position: relative;
    }

    #sbsr-333 .cs-li:before {
        /* bullet */
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.9375rem;
    }

    #sbsr-333 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }

    #sbsr-333 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }

    #sbsr-333 .cs-button-solid:hover:before {
        width: 100%;
    }

    #sbsr-333 .cs-image-group {
        /* scaling entire section down. font-size starts at a min in vw, and stops when that value reaches 1em (16px). Since we want the picture elements to base their font size on the parent and not the root, we use ems for this entire section  */
        font-size: min(2.08vw, 0.791em);
        width: 42.875em;
        height: 41.125em;
        position: relative;
        /* flips it horizontally */
        transform: scaleX(-1);
    }

    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-3em);
        }

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

    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-2em);
        }

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

    #sbsr-333 .cs-image-group:before {
        /* blue circle */
        content: "";
        width: 7.5em;
        height: 7.5em;
        border-radius: 50%;
        background: var(--secondary);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 6.25em;
        left: 0em;
        z-index: 10;
        animation-name: floatAnimation;
        animation-duration: 6s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }

    #sbsr-333 .cs-image-group:after {
        /* white circle */
        content: "";
        width: 9.375em;
        height: 9.375em;
        border-radius: 50%;
        background: var(--primaryLight);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0em;
        right: 6.25em;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 4s;
        animation-delay: 0.2s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }

    #sbsr-333 .cs-picture {
        width: 39.375em;
        height: 39.375em;
        border-radius: 50%;
        border: clamp(6px, 1.2vw, 12px) solid #f7f7f7;
        /* clips the img tag corners */
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }

    #sbsr-333 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        /* flips image to original orientation, undoing the flip on the parent container */
        transform: scaleX(-1);
    }

    #sbsr-333 .cs-box {
        width: 15.8125em;
        height: 15.8125em;
        border-radius: 50%;
        border: clamp(6px, 1.2vw, 12px) solid #f7f7f7;
        background-color: var(--primaryLight);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.25rem;
        position: absolute;
        bottom: 0;
        right: 0;
        /* flips image to original orientation, undoing the flip on the parent container */
        transform: scaleX(-1);
    }

    #sbsr-333 .cs-number {
        /* 40px - 61px */
        font-size: clamp(2.5rem, 5vw, 3.8125rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: center;
        color: var(--bodyTextColorWhite);
    }

    #sbsr-333 .cs-desc {
        /* 14px - 25px */
        font-size: clamp(0.875rem, 2.2vw, 1.5625rem);
        line-height: 1.2em;
        text-align: center;
        max-width: 7.8125rem;
        color: var(--bodyTextColorWhite);
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-333 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #sbsr-333 .cs-content {
        width: 50%;
    }

    #sbsr-333 .cs-image-group {
        /* reset the scale */
        font-size: min(1.2vw, 1em);
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}