:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #0C2340;
    --primaryLight: #556573;
    --secondary: #A5212B;
    --secondaryLight: #f2f7f7;
    --headerColor: #1a1a1a;
    --dark: #0f0f0f;
    --darklight: #171717;
    --bodyTextColor: #0C2340;
    --body: #fafafa;
    --bodyTextColorWhite: #fafafa;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1.2rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

html {
    font-size: 100%;
    overflow-x: hidden;
    background-color: var(--body);

}
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}


*, *::before, *::after {
    box-sizing: border-box;
}

.row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media only screen and (min-width: 48rem) {
.row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
}
.cs-button {
  color: var(--bodyTextColorWhite);
  text-decoration: none;
  padding: 1rem;
}

@font-face {
  font-family: 'Bungee';
  src: url('Bungee-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
h1, h2 {
    font-family: 'Oswald', sans-serif;
  font-weight: 400; /* Bungee is bold by default */
  letter-spacing: 0.5px;
  text-transform: uppercase; /* optional depending on design */
}

@font-face {
  font-family: 'Roboto';
  src: url('roboto-v29-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}




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

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 50.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
.light-topper {

    color: var(--bodyTextColorWhite);
}
                            

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-page-851 {
        padding: var(--sectionPadding);
        background-color: var(--body);
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        padding-top: 10rem;
        z-index: 1;
    }
    #content-page-851 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
    }
    #content-page-851 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #content-page-851 .cs-title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
        position: relative;
    }
    #content-page-851 h2,
    #content-page-851 h3,
    #content-page-851 h4,
    #content-page-851 h5,
    #content-page-851 h6 {
        font-weight: 700;
        text-align: inherit;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content-page-851 h2 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    #content-page-851 h3 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    #content-page-851 h4,
    #content-page-851 h5,
    #content-page-851 h6 {
        font-size: 1.25rem;
    }
    #content-page-851 .cs-button-solid {
        margin-bottom: 2rem;
    }
    #content-page-851 .cs-no-margin {
        margin: 0;
    }
    #content-page-851 .cs-color {
        color: var(--secondary);
    }
    #content-page-851 p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content-page-851 p:last-of-type {
        margin-bottom: 2rem;
    }
    #content-page-851 p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--secondary);
    }
    #content-page-851 ol,
    #content-page-851 ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #content-page-851 ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #content-page-851 ul li:before {
        /* custom list bullet */
        content: "";
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #content-page-851 img {
        width: 100%;
        height: auto;
        display: block;
    }
    #content-page-851 .cs-image-group {
        width: 50%;
        max-width: 27.0625rem;
        display: none;
        flex-direction: column;
        gap: 1.25rem;
        position: relative;
    }
    #content-page-851 .cs-image-group:after {
        /* colored box */
        content: "";
        width: 100%;
        /* 177px - 258px */
        height: clamp(11.0625rem, 19vw, 16.125rem);
        background: var(--primary);
        border-radius: 0 6.25rem 0 6.25rem;
        opacity: 0.15;
        display: block;
    }
    #content-page-851 .cs-picture {
        width: 100%;
        /* 300px - 520px */
        height: clamp(18.75rem, 40vw, 32.5rem);
        box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
        /* 125px - 200px */
        border-radius: clamp(7.8125rem, 15vw, 12.5rem) 0
            clamp(7.8125rem, 15vw, 12.5rem) 0;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        /* clips img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #content-page-851 .cs-picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-page-851 .cs-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #content-page-851 .cs-content {
        flex: none;
        width: 60%;
    }
    #content-page-851 .cs-image-group {
        display: flex;
    }
}



/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-1072 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
    min-height: 40rem;
    padding-top: 10rem;
    }
    #cta-1072 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-1072 .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;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-1072 .cs-flex {
        max-width: 39.375rem;
    }

    #cta-1072 .cs-title {
        margin: 0;

        color: var(--bodyTextColorWhite);
    }
    #cta-1072 .cs-button-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    #cta-1072 .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);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #cta-1072 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #cta-1072 .cs-button-solid:hover:before {
        width: 100%;
    }
    #cta-1072 .cs-button-transparent {
        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: transparent;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #cta-1072 .cs-button-transparent:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #fff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #cta-1072 .cs-button-transparent:after {
        /* border */
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: transparent;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        border: 1px solid #fff;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
        pointer-events: none;
    }
    #cta-1072 .cs-button-transparent:hover {
        color: var(--primary);
    }
    #cta-1072 .cs-button-transparent:hover:before {
        width: 100%;
    }
    #cta-1072 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #cta-1072 .cs-background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #1a1a1a;
        opacity: 0.88;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #cta-1072 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
}