/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-227 {
    /* Centers button */
    text-align: center;
    /* changes on tablet */
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-227 .cs-picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-227 .cs-picture:before {
    /* Black Color Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-227 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero-227 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 300px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9rem, 25.95vw, 18.75rem) 0 0;
    /* 60px - 200px */
    padding-bottom: clamp(3.75rem, 12.5vw, 25rem);
    margin: auto;
    position: relative;
  }
  #hero-227 .cs-container:before {
    /* Left Line */
    content: "";
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #hero-227 .cs-flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
    /* changes on tablet */
    margin-left: 1rem;
    width: 80vw;
    /* 464px - 562px */
    max-width: clamp(29rem, 60vw, 35.125rem);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  #hero-227 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.1rem;
    font-weight: 700;
    color: var(--primaryLight);
    margin-bottom: 1rem;
    display: block;
  }
  #hero-227 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: left;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-227 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
  }
  #hero-227 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    text-decoration: none;
    font-weight: 700;
    margin: 0 1.25rem 1rem 0;
    color: #fff;
    padding: 0;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-227 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-227 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-227 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-227 .cs-button-transparent:before {
    content: "";
    position: absolute;
    display: block;
    background: #000;
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #hero-227 .cs-button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero-227 .cs-button-transparent .cs-img {
    display: block;
    margin-right: 0.75rem;
  }
  #hero-227 .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  #hero-227 .cs-item {
    list-style: none;
    position: relative;
    box-sizing: border-box;
  }
  #hero-227 .cs-item:before {
    /* Top Line */
    content: "";
    width: 100vw;
    height: 1px;
    background: -moz-linear-gradient(left, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #hero-227 .cs-item:last-of-type:after {
    /* Bottom line on last card */
    content: "";
    width: 100vw;
    height: 1px;
    background: -moz-linear-gradient(left, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #hero-227 .cs-link {
    text-align: left;
    text-decoration: none;
    /* changes on tablet */
    padding: 1.75rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
  }
  #hero-227 .cs-link:hover:before {
    opacity: 0.4;
  }
  #hero-227 .cs-link:before {
    /* Hover Box */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #hero-227 .cs-number {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 900;
    /* 24px - 32px */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    color: var(--primaryLight);
    display: block;
  }
  #hero-227 .cs-h2 {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 900;
    line-height: 1.2em;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    position: relative;
    z-index: 10000;
  }
  #hero-227 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 3vw, 1rem);
    margin: 0;
    padding: 0;
    max-width: 31.25rem;
    color: var(--bodyTextColorWhite);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-227 {
    /* 32px - 40px */
    padding: 0 clamp(2rem, 5vw, 2.5rem);
  }
  #hero-227 .cs-container {
    padding-bottom: 4rem;
  }
  #hero-227 .cs-container:after {
    /* Right Line */
    content: "";
    width: 1px;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
  }
  #hero-227 .cs-flex-group {
    /* 44px - 88px */
    margin-left: clamp(2.75rem, 5.9vw, 5.5rem);
  }
  #hero-227 .cs-button-solid {
    margin-bottom: 0;
  }
  #hero-227 .cs-card-group {
    flex-direction: row;
    position: relative;
  }
  #hero-227 .cs-card-group:before {
    /* Top Line */
    content: "";
    /* make it extend past the left and right of the screen */
    width: 150vw;
    height: 1px;
    background: -moz-linear-gradient(left, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(250, 251, 252, 0.5) 0%, rgba(250, 251, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    /* these two properties center the line horizontally */
    left: 50%;
    transform: translateX(-50%);
  }
  #hero-227 .cs-item:before {
    width: 1px;
    height: 100vh;
    background: -moz-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 251, 252, 0) 0%, rgba(250, 251, 252, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    top: auto;
    left: auto;
    right: 0;
    bottom: -4rem;
  }
  #hero-227 .cs-item:nth-of-type(1) {
    /* makes the first line under the buttons shorter */
  }
  #hero-227 .cs-item:nth-of-type(1):before {
    height: 39.375rem;
  }
  #hero-227 .cs-item:last-of-type:before,
  #hero-227 .cs-item:last-of-type:after {
    display: none;
  }
  #hero-227 .cs-link {
    /* 44px - 64px top & bottom, 48px - 88px left & right */
    padding: clamp(2.75rem, 5.9vw, 5.5rem) clamp(3rem, 5.9vw, 5.5rem);
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-227 {
    background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/Background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
    /* remove img tag so we can make parallax work */
  }
  #hero-227 .cs-picture img {
    display: none;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1628 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #services-1628 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1628 .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: flex-start;
  }
  #services-1628 .cs-title {
    max-width: 20ch;
  }
  #services-1628 .cs-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }
  #services-1628 .cs-text:after {
    /* divider line */
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: relative;
  }
  #services-1628 .cs-chevron {
    --chevronColor: var(--primary);
    width: 3rem;
    height: auto;
  }
  #services-1628 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
    /* 28px - 40px */
    row-gap: clamp(1.75rem, 2.5vw, 2.5rem);
  }
  #services-1628 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1628 .cs-item:hover .cs-picture img {
    opacity: 0.5;
    transform: scale(1.2);
  }
  #services-1628 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #services-1628 .cs-picture {
    width: 100%;
    height: 15rem;
    margin-bottom: 1.5rem;
    background-color: #000;
    overflow: hidden;
    display: block;
    position: relative;
  }
  #services-1628 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
  #services-1628 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services-1628 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 1.5rem 0;
    color: var(--bodyTextColor);
  }
  #services-1628 .cs-fake-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    margin-top: auto;
    color: var(--primary);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #services-1628 .cs-fake-link:hover .cs-icon {
    transform: translateX(0.5rem);
  }
  #services-1628 .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1628 .cs-container {
    max-width: 80rem;
  }
  #services-1628 .cs-content {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #services-1628 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #services-1628 .cs-title {
    margin: 0;
  }
  #services-1628 .cs-text {
    padding: 0.75rem 0 0.75rem 1.5rem;
  }
  #services-1628 .cs-text:after {
    width: 1px;
    height: 100%;
    margin: 0 1.5rem 0 0;
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  #services-1628 .cs-item {
    grid-column: span 6;
  }
  #services-1628 .cs-picture {
    /* 240px - 420px */
    height: clamp(15rem, 33vw, 26.25rem);
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1628 .cs-item {
    grid-column: span 3;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-502 {
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
    /* prevents overflow from the slant shape */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #services-502:before {
    /* section background */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-502 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* 60px - 80px top and bottom */
    padding: clamp(3.75em, 6.82vw, 5em) 0;
    /* maintains proportional margin top as screen size grows */
    margin-top: 56vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* 40px - 70px */
    gap: clamp(2.5rem, 5.7vw, 4.375rem);
    position: relative;
    /* places it on top of the cs-background */
    z-index: 10;
  }
  #services-502 .cs-container:before {
    /* section slant on mobile */
    content: "";
    width: 62.5rem;
    height: 125rem;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    z-index: -1;
    display: block;
    top: -28.75rem;
    /* these last two center it horizontally and rotate -65deg */
    left: 50%;
    transform: translateX(-50%) rotate(-65deg);
  }
  #services-502 .cs-background {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #services-502 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #services-502 .cs-content {
    width: 100%;
  }
  #services-502 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  #services-502 .cs-title {
    /* changes to 45% at tablet */
    width: 95%;
    max-width: 32.125rem;
    color: var(--bodyTextColorWhite);
  }
  #services-502 .cs-card-group {
    width: 100%;
    max-width: 35.25rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 20px - 32px */
    gap: clamp(1.25rem, 3vw, 2rem);
  }
  #services-502 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* 32px - 64px */
    gap: clamp(2rem, 5vw, 4rem);
  }
  #services-502 .cs-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #services-502 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5625rem, 3vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColorWhite);
  }
  #services-502 .cs-item-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1rem, 1.25rem);
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-502 .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: #000;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #services-502 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #services-502 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-502:before {
    /* remove the pseudo for the section background */
    display: none;
  }
  #services-502 .cs-background {
    /* reset height to let top and bottom properties create the height */
    height: auto;
    aspect-ratio: initial;
    position: absolute;
    /* creates the gap between the image and the blue section */
    top: 3.75rem;
    bottom: 0;
  }
  #services-502 .cs-background img {
    width: 60%;
    left: auto;
    right: 0;
    object-position: 80% top;
  }
  #services-502 .cs-container {
    margin-top: 0;
  }
  #services-502 .cs-container:before {
    /* make really tall so it always covers top to bottom, even when you add more list items */
    height: 250rem;
    /* make really really wide so it covers the left side at large scree sizes */
    width: 250rem;
    /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
    margin-right: -68.75rem;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    top: 50%;
    left: auto;
    /* pushes the right edge of the element to the center line of the parent */
    right: 50%;
    transform: rotate(-35deg) translateY(-50%);
  }
  #services-502 .cs-title {
    width: 45%;
  }
  #services-502 .cs-card-group {
    width: 52%;
    /* 24px - 32px */
    padding-left: clamp(1.5rem, 3vw, 2rem);
    /* prevents padding from adding to width */
    box-sizing: border-box;
  }
  #services-502 .cs-item {
    flex-direction: row;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1308 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #sbs-1308 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(3rem, 4vw, 4rem);
  }
  #sbs-1308 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 10;
  }
  #sbs-1308 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1308 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1308 .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: #1a1a1a;
    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;
    transition: color 0.3s;
  }
  #sbs-1308 .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;
  }
  #sbs-1308 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-1308 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1308 .cs-ul {
    width: 100%;
    padding: 0;
    /* 32px - 48px */
    margin: clamp(2rem, 5vw, 3rem) 0 0 0;
    /* 32px - 48px */
    padding: clamp(2rem, 5vw, 3rem) 0 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.75rem;
  }
  #sbs-1308 .cs-item {
    list-style: none;
    width: 32%;
    /* making flex so we can align a heading with 1 line to the bottom */
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-content: space-between;
  }
  #sbs-1308 .cs-number {
    font-size: 1.5625rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    color: var(--primary);
    display: block;
    margin: 0 0 0.5rem 0;
  }
  #sbs-1308 .cs-h3 {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    text-align: left;
    /* auto margin top will push text to bottom if there's only one line */
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1308 .cs-image-group {
    width: 100%;
    max-width: 41.875rem;
    height: 100vw;
    max-height: 39.375rem;
    position: relative;
    display: block;
    z-index: 1;
  }
  #sbs-1308 .cs-picture {
    /* big background image */
    width: 93%;
    height: 93%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }
  #sbs-1308 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-1308 .cs-box {
    text-align: left;
    width: 70%;
    max-width: 19rem;
    /* 20px - 40px */
    padding: clamp(1.25rem, 4vw, 2.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #1a1a1a;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  #sbs-1308 .cs-desc {
    /* 16px - 31px */
    font-size: clamp(1rem, 2.5vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    width: 100%;
    color: var(--bodyTextColorWhite);
    position: relative;
    z-index: 10;
  }
  #sbs-1308 .cs-graphic {
    width: 150%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1308 .cs-container {
    max-width: 80rem;
    /* set to horizontal arrangement */
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1308 .cs-content {
    width: 48%;
    padding: 3rem 0;
    align-self: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbs-1308 .cs-image-group {
    width: 55%;
    max-width: 41.875rem;
    min-height: 41.875rem;
    max-height: 100%;
    height: auto;
    margin: 0;
  }
  #sbs-1308 .cs-picture {
    width: 93%;
    height: 94%;
  }
  #sbs-1308 .cs-box {
    bottom: 0rem;
  }
  #sbs-1308 .cs-graphic {
    max-width: 44.6875rem;
    left: auto;
    right: 8.125rem;
    transform: translateY(-50%);
  }
}