/* PAGE-SPECIFIC STYLES FOR THE ABOUT PAGE */
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #banner-1534 {
        padding: var(--sectionPadding);
        /* 190px - 268px */
        padding-top: clamp(11.875rem, 25vw, 16.75rem);
        /* 100px - 150px */
        padding-bottom: clamp(6.25rem, 12vw, 9.375rem);
        /* clips the line from causing overflow issues for going off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    #banner-1534 .cs-container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        /* 8px - 12px */
        gap: clamp(0.5rem, 1vw, 0.75rem);
    }

    #banner-1534 .cs-int-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        margin: 0;
        color: var(--headercolor);
        position: relative;
        display: none;
    }

    #banner-1534 .cs-breadcrumbs {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #banner-1534 .cs-link {
        font-size: 1rem;
        line-height: 1.2em;
        text-decoration: none;
        color: var(--bodyTextColor);
        position: relative;
        display: none;
        justify-content: center;
        align-items: center;
    }

    #banner-1534 .cs-link:last-of-type {
        /* remove the chevron on the last list item */
    }

    #banner-1534 .cs-link:last-of-type::after {
        display: none;
    }

    #banner-1534 .cs-link:after {
        /* chevron */
        content: '';
        width: 0.4375rem;
        height: 0.75rem;
        margin: 0 1rem;
        background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-chevron.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: block;
    }

    #banner-1534 .cs-link.cs-active {
        color: var(--primary);
    }

    #banner-1534 .cs-background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #banner-1534 .cs-background:before {
        /* gradient overlay */
        content: '';
        width: 100%;
        height: 100%;
        background: rgba(58, 163, 46, 0.3);
        opacity: .8;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 1;
    }

    #banner-1534 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }

    #banner-1534 .cs-mask {
        --maskBG: #ffffff;
        width: 100%;
        height: auto;
        display: block;
        position: absolute;
        bottom: -1px;
        left: 0;
        z-index: 100;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #banner-1534 .cs-background:before {
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(58, 163, 46, 0.3) 23.05%, rgba(255, 243, 236, 0) 80.08%);
        opacity: 1;
    }

    #banner-1534 .cs-int-title {
        display: block;
    }

    #banner-1534 .cs-link {
        display: flex;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {

    #RPsbs-252,
    #RPsbsr-252 {
        /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */

        padding: 1rem 0 1rem 0;
        padding-left: 0;
        padding-right: 0;
        /* padding-bottom: 0; */
        position: relative;
        z-index: 1;
    }

    #RPsbs-252 .cs-container,
    #RPsbsr-252 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        margin: auto;
        background: linear-gradient(90deg,
                rgba(241, 241, 244, 0) 0%,
                #f1f1f4 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }

    #RPsbs-252 .cs-container:before,
    #RPsbsr-252 .cs-container:before {
        /* Bottom Line */
        content: "";
        width: 100%;
        height: 1px;
        background: #b4b2c7;
        background: linear-gradient(270deg,
                #b4b2c7 0%,
                rgba(250, 251, 252, 0.005) 0%,
                #b4b2c7 100%);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
        /* flips it horizontally */
        transform: scaleX(-1);
    }

    #RPsbs-252 .cs-container:after,
    #RPsbsr-252 .cs-container:after {
        /* Right Line */
        content: "";
        width: 1px;
        height: 100%;
        background: #b4b2c7;
        background: linear-gradient(180deg,
                #b4b2c7 0%,
                rgba(250, 251, 252, 0.005) 0%,
                #b4b2c7 100%);
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0;
        right: 0;
    }

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

    #RPsbs-252 .cs-text,
    #RPsbsr-252 .cs-text {
        margin-bottom: 1rem;
    }

    #RPsbs-252 .cs-text:last-of-type,
    #RPsbsr-252 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }

    #RPsbs-252 .cs-button-solid,
    #RPsbsr-252 .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;
    }

    #RPsbs-252 .cs-button-solid:before,
    #RPsbsr-252 .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;
    }

    #RPsbs-252 .cs-button-solid:hover:before,
    #RPsbsr-252 .cs-button-solid:hover:before {
        width: 100%;
    }

    #RPsbs-252 .cs-picture,
    #RPsbsr-252 .cs-picture {
        width: 100%;
        max-width: 32.625rem;
        margin: 0;
        border: 1px solid var(--primary);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }

    #RPsbs-252 .cs-picture img,
    #RPsbsr-252 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

    #RPsbs-252 .cs-container,
    #RPsbsr-252 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    #RPsbs-252 .cs-picture,
    #RPsbsr-252 .cs-picture {
        /* 415px - 522px */
        height: clamp(25.9375rem, 40.5vw, 32.625rem);
        width: 50%;
        flex: none;
    }

    #RPsbs-252 .cs-content,
    #RPsbsr-252 .cs-content {
        max-width: 33rem;
        margin: 0;
        width: 45%;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbsr-252 {
        padding: 1rem 0 1rem 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    #RPsbsr-252 .cs-container {
        background: linear-gradient(90deg,
                #f1f1f4 0%,
                rgba(241, 241, 244, 0) 100%);
    }

    #RPsbsr-252 .cs-container:before {
        background: #b4b2c7;
        background: linear-gradient(270deg,
                #b4b2c7 0%,
                rgba(250, 251, 252, 0.005) 0%,
                #b4b2c7 100%);
        transform: scaleX(1);
    }

    #RPsbsr-252 .cs-container:after {
        left: 0;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RPsbsr-252 .cs-picture {
        margin: 0;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}



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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-1450 {
        padding: 4rem 2rem 0 2rem;
    }

    #content-1450 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }

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

    #content-1450 .cs-title,
    #content-1450 .cs-text {
        max-width: 100%;
    }

    #content-1450 .cs-subtitle {
        /* text-align: left; */
        /* color: red; */
    }

    #content-1450 .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        margin: 0 0 2rem 0;
    }

    #content-1450 .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 3rem;
        background-color: var(--primary);
        border-radius: 0.5rem;
        overflow: hidden;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }

    #content-1450 .cs-button-solid:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width .3s;
    }

    #content-1450 .cs-button-solid:hover:before {
        width: 100%;
    }
}


/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-1450 .cs-content {
        padding: 1rem 2rem 1rem 2rem;
    }
}

@media only screen and (min-width: 64rem) {
    #content-1450 .cs-content {
        padding: 1rem 8rem 1rem 8rem;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-ending {
        padding: 2rem;
    }

    #content-ending .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }

    #content-ending .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;
    }

    #content-ending .cs-title,
    #content-ending .cs-text {
        max-width: 100%;
    }


    #content-ending .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        margin: 0 0 2rem 0;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-ending .cs-content {
        padding: 2rem 4rem 2rem 4rem;
    }
}




/*-- -------------------------- -->
  <---          Content    section        -->
  <--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #content-section {
        padding: 4rem 2rem 0 2rem;
    }

    #content-section .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }

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

    #content-section .cs-title,
    #content-section .cs-text {
        max-width: 100%;
    }

    #content-section .cs-subtitle {
        /* text-align: left; */
        /* color: red; */
    }

    #content-section .cs-text {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        margin: 0 0 2rem 0;
    }

    #content-section .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 3rem;
        background-color: var(--primary);
        border-radius: 0.5rem;
        overflow: hidden;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }

    #content-section .cs-button-solid:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width .3s;
    }

    #content-section .cs-button-solid:hover:before {
        width: 100%;
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #content-section .cs-content {
        padding: 1rem 2rem 1rem 2rem;
    }
}

@media only screen and (min-width: 64rem) {
    #content-section .cs-content {
        padding: 0rem 8rem 0rem 8rem;
    }
}