: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: #A3826C;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Ysabeau", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    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(--headerColor);
    position: relative;
}

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

body.dark-mode .cs-button-solid {
  background-color: var(--secondaryLight);
  color: #1a1a1a;
}
body.dark-mode .cs-button-solid:before {
  background-color: #fff;
}
.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;
}
.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;
}
.cs-button-solid:hover:before {
  width: 100%;
}
                            

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

body,
html {
    /* reset margin and padding so there's no gap between the nav and the screen edges */
    margin: 0;
       padding: 0;
}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
        overflow: hidden;
    }
    body.scroll #cs-navigation .cs-top-container {
        gap: 0;
    }
    body.scroll #cs-navigation .cs-top-social {
        height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
    }
    #cs-navigation {
        width: 100%;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: fixed;
        z-index: 10000;
    }
    #cs-navigation:before {
        content: "";
        width: 100%;
        height: 0vh;
        background: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        position: absolute;
        display: block;
        top: 100%;
        right: 0;
        z-index: -1100;
        opacity: 0;
        transition:
            height 0.5s,
            opacity 0.5s;
    }
    #cs-navigation.cs-active:before {
        height: 150vh;
        opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
        opacity: 1;
        transform: scaleY(1);
        transition-delay: 0.15s;
    }
    #cs-navigation.cs-active .cs-li {
        transform: translateY(0);
        opacity: 1;
    }
    #cs-navigation .cs-top-bar {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-navigation .cs-top-container {
        width: 100%;
        padding: 1rem 1rem 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    #cs-navigation .cs-top-contact {
        width: 100%;
        padding-bottom: 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        justify-content: center;
        align-items: center;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.5rem);
    }
    #cs-navigation .cs-top-link {
        font-size: 0.875rem;
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        position: relative;
    }
    #cs-navigation .cs-top-link:nth-of-type(1) {
        display: none;
    }
    #cs-navigation .cs-top-link:last-of-type:after {
        display: none;
    }
    #cs-navigation .cs-top-link:after {
        content: "";
        width: 1px;
        height: 1.5rem;
        /* 8px - 16px */
        margin-left: clamp(0.5rem, 1.5vw, 1rem);
        background: #bababa;
        opacity: 1;
        position: relative;
        display: block;
    }
    #cs-navigation .cs-link-icon {
        width: 1rem;
        height: auto;
        display: block;
    }
    #cs-navigation .cs-top-social {
        height: 2rem;
        visibility: visible;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        transition:
            opacity 0.3s,
            visibility 0.3s,
            height 0.3s;
    }
    #cs-navigation .cs-social-link {
        text-decoration: none;
        width: 2rem;
        height: 2rem;
        background-color: #f7f7f7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-navigation .cs-social-icon {
        width: 0.75rem;
        height: auto;
        opacity: 0.6;
        display: block;
    }
    #cs-navigation .cs-container {
        width: 100%;
        /* 16px - 20px */
        padding: clamp(1rem, 2.5vw, 1.25rem) 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }
    #cs-navigation .cs-logo {
        width: auto;
        /* 32px - 48px */
        height: clamp(6.5rem, 6.4vw, 3rem);
        margin: 0 auto 0 0;
        padding: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        order: 1;
        z-index: 10;
    }
    #cs-navigation .cs-logo img {
        width: auto;
        height: 100%;
        /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
        object-fit: contain;
    }
    #cs-navigation .cs-nav {
        order: 2;
    }
    #cs-navigation .cs-toggle {
        /* 48px - 56px */
        width: clamp(3rem, 7.2vw, 3.5rem);
        height: clamp(3rem, 7.2vw, 3.5rem);
        margin: 0 0 0 auto;
        background-color: var(--primary);
        border-radius: 0.25rem;
        border: none;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.6s;
    }
    #cs-navigation .cs-toggle.cs-active {
        transform: rotate(180deg);
    }
    #cs-navigation .cs-active .cs-line1 {
        top: 50%;
        transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
        top: 50%;
        transform-origin: center;
        transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    }
    #cs-navigation .cs-active .cs-line3 {
        bottom: 100%;
        opacity: 0;
    }
    #cs-navigation .cs-box {
        /* 24px - 28px */
        width: clamp(1.5rem, 2vw, 1.75rem);
        height: 1rem;
        position: relative;
    }
    #cs-navigation .cs-line {
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: #fafbfc;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
        top: 0;
        transform-origin: center;
        transition:
            transform 0.5s,
            top 0.3s,
            left 0.3s;
        animation-duration: 0.7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #cs-navigation .cs-line2 {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition:
            top 0.3s,
            left 0.3s,
            transform 0.5s;
        animation-duration: 0.7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #cs-navigation .cs-line3 {
        bottom: 0;
        transition:
            bottom 0.3s,
            opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
        width: 100%;
        height: auto;
        padding-bottom: 3rem;
        opacity: 0;
        background-color: #fff;
        box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        transform: scaleY(0);
        transform-origin: top;
        transition:
            transform 0.4s,
            opacity 0.3s;
    }
    #cs-navigation .cs-ul {
        margin: 0;
        padding: 3rem 0 0 0;
        width: 100%;
        height: auto;
        max-height: 65vh;
        overflow: scroll;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    #cs-navigation .cs-li {
        width: 100%;
        text-align: center;
        list-style: none;
        margin-right: 0;
        /* transition from these values */
        transform: translateY(-4.375rem);
        opacity: 0;
        transition:
            transform 0.6s,
            opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
        transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
        transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
        transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
        transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
        transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
        transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
        transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
        transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
        transition-delay: 0.45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
        transition-delay: 0.5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
        transition-delay: 0.55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
        transition-delay: 0.6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
        transition-delay: 0.65s;
    }
    #cs-navigation .cs-li-link {
        /* 16px - 24px */
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        line-height: 1.2em;
        text-decoration: none;
        margin: 0;
        color: var(--headerColor);
        display: inline-block;
        position: relative;
    }
    #cs-navigation .cs-li-link.cs-active {
        color: var(--primary);
    }
    #cs-navigation .cs-li-link:hover {
        color: var(--primary);
    }
    #cs-navigation .cs-button-solid {
        display: none;
    }
    #cs-navigation .cs-donate {
        text-decoration: none;
        margin-right: 2rem;
        display: none;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        order: 1;
    }
    #cs-navigation .cs-flex {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #cs-navigation .cs-donate-icon {
        width: 3.5rem;
        height: auto;
    }
    #cs-navigation .cs-desc {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #cs-navigation .cs-header {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #cs-navigation .cs-top-container {
        padding-bottom: 1rem;
        border-bottom: 1px solid #e8e8e8;
        flex-direction: row;
        justify-content: space-between;
    }
    #cs-navigation .cs-top-contact {
        width: auto;
        padding: 0;
        border: none;
    }
    #cs-navigation .cs-donate {
        display: flex;
    }
}

/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #cs-navigation {
        width: 100%;
        padding: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        position: fixed;
        z-index: 10000;
    }
    #cs-navigation .cs-top-bar {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #cs-navigation .cs-top-container {
        width: 100%;
        max-width: 107.5rem;
        padding: 1rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 3.125rem;
    }
    #cs-navigation .cs-top-contact {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5rem;
    }
    #cs-navigation .cs-top-link {
        font-size: 0.875rem;
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        position: relative;
    }
    #cs-navigation .cs-top-link:hover {
        text-decoration: underline;
    }
    #cs-navigation .cs-top-link:last-of-type:after {
        display: none;
    }
    #cs-navigation .cs-top-link:after {
        content: "";
        width: 1px;
        height: 1.5rem;
        /* 8px - 16px */
        margin-left: clamp(0.5rem, 1.5vw, 1rem);
        background: #bababa;
        opacity: 1;
        position: relative;
        display: block;
    }
    #cs-navigation .cs-link-icon {
        width: 1rem;
        height: auto;
        display: block;
    }
    #cs-navigation .cs-top-social {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #cs-navigation .cs-social-link {
        text-decoration: none;
        width: 2rem;
        height: 2rem;
        background-color: #f7f7f7;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #cs-navigation .cs-social-link:hover {
        background-color: var(--secondary);
    }
    #cs-navigation .cs-social-icon {
        width: 0.75rem;
        height: auto;
        opacity: 0.6;
        display: block;
    }
    #cs-navigation .cs-container {
        width: 100%;
        max-width: 107.5rem;
        margin: auto;
        padding: 0 1rem;
        /* prevents padding from affectin gheight */
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.5rem;
        position: relative;
    }
    #cs-navigation .cs-toggle {
        display: none;
    }
    #cs-navigation .cs-logo {
        width: 18.4%;
        max-width: 12.3125rem;
        height: 5.5rem;
        /* margin-right auto pushes everything away from it to the right */
        margin: 0 auto 0 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }
    #cs-navigation .cs-logo img {
        width: 100%;
        height: 100%;
        /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
        object-fit: contain;
    }
    #cs-navigation .cs-ul {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 2.5rem;
    }
    #cs-navigation .cs-li {
        list-style: none;
        padding: 2.25rem 0;
        /* prevent flexbox from squishing it */
        flex: none;
    }
    #cs-navigation .cs-li-link {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.3vw, 1rem);
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: var(--bodyTextColor);
        display: block;
        position: relative;
        transition: color 0.3s;
    }
    #cs-navigation .cs-li-link:hover {
        color: var(--primary);
    }
    #cs-navigation .cs-li-link.cs-active {
        font-weight: 700;
        color: var(--headerColor);
    }
    #cs-navigation .cs-donate {
        text-decoration: none;
        display: none;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }
    #cs-navigation .cs-donate:hover .cs-donate-icon {
        transform: scale(1.1);
    }
    #cs-navigation .cs-flex {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #cs-navigation .cs-donate-icon {
        width: 3.5rem;
        height: auto;
        transition: transform 0.3s;
    }
    #cs-navigation .cs-desc {
        font-size: 1rem;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #cs-navigation .cs-header {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
    }
    #cs-navigation .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875em, 5.5vw, 3.5em);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 2rem;
        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;
        transition: color 0.3s;
    }
    #cs-navigation .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        border-radius: 0.5rem;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
        width: 100%;
    }
    #cs-navigation .cs-nav-button {
        padding: 0 3rem;
        display: none;
    }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
    #cs-navigation .cs-container {
        justify-content: space-between;
    }
    #cs-navigation .cs-nav-button {
        margin-left: auto;
        display: block;
    }
}
/* Larger Desktop - 1600px */
@media only screen and (min-width: 100rem) {
    #cs-navigation .cs-donate {
        display: flex;
        margin-left: auto;
    }
    #cs-navigation .cs-nav-button {
        margin: 0;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-2149 {
      /* 300px - 400px on top - leaving extra space for the navigation */
      /* 60px - 100px on bottom */
      padding: clamp(18.75rem, 54vw, 25rem) 1rem clamp(3.75rem, 7.5vw, 6.25rem) 1rem;
      /* prevents the topper line from causing an overflow */
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #hero-2149 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #hero-2149 .cs-content {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #hero-2149 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 5vw, 3.8125rem);
      max-width: 30ch;
    }
    #hero-2149 .cs-title,
    #hero-2149 .cs-text {
      color: var(--bodyTextColorWhite);
    }
    #hero-2149 .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
      max-width: 55ch;
      margin-bottom: 2rem;
      opacity: 0.8;
    }
    #hero-2149 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-align: center;
      text-decoration: none;
      min-width: 12.5rem;
      margin: 0;
      margin-bottom: 2%;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      /* 32px - 48px */
      padding: 0 clamp(2rem, 4vw, 3rem);
      background-color: var(--primary);
      color: var(--bodyTextColorWhite);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    #hero-2149 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #ffffff;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #hero-2149 .cs-button-solid:hover {
      color: var(--headerColor);
    }
    #hero-2149 .cs-button-solid:hover:before {
      width: 100%;
    }
    #hero-2149 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
    }
    #hero-2149 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
      /* prevents the cursor from interacting with it */
      pointer-events: none;
      opacity: 1;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    #hero-2149 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-2201 {
      padding: var(--sectionPadding);
      background-color: #FBF5F1;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #sbs-2201 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 44rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-2201 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      max-width: 36.625rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
    }
    #sbs-2201 .cs-title {
      max-width: 30ch;
    }
    #sbs-2201 .cs-text {
      margin-bottom: 1.5rem;
    }
    #sbs-2201 .cs-weekdays,
    #sbs-2201 .cs-weekends {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2em;
      text-transform: uppercase;
      letter-spacing: 1.6px;
      color: var(--bodyTextColor);
    }
    #sbs-2201 .cs-weekdays {
      margin-bottom: 0.5rem;
    }
    #sbs-2201 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 2rem 0 0 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      background-color: var(--primary);
      color: #fff;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #sbs-2201 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      border-radius: 0.25rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #sbs-2201 .cs-button-solid:hover:before {
      width: 100%;
    }
    #sbs-2201 .cs-image-group {
      /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
      font-size: min(2.3vw, .75rem);
      /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
      width: 39.375em;
      height: 39.1875em;
      order: -1;
      position: relative;
      /* prevents flexbox from squishing it */
      flex: none;
    }
    #sbs-2201 .cs-picture {
      overflow: hidden;
      border: 8px solid #fff;
      display: block;
      position: absolute;
    }
    #sbs-2201 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
    }
    #sbs-2201 .cs-picture1 {
      width: 24em;
      height: 29.375em;
      top: 0;
      left: 0;
    }
    #sbs-2201 .cs-picture2 {
      width: 21.5625em;
      height: 31.875em;
      right: 0;
      bottom: 0;
    }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #sbs-2201 .cs-container {
      max-width: 80rem;
    }
    #sbs-2201 .cs-flower {
      right: 0;
      bottom: 0;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #sbs-2201 .cs-container {
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
    }
    #sbs-2201 .cs-content {
      text-align: left;
      padding: 3rem 0;
      align-self: center;
      align-items: flex-start;
    }
    #sbs-2201 .cs-image-group {
      font-size: min(1.3vw, 1rem);
      height: auto;
      min-height: 39.1875em;
    }
    #sbs-2201 .cs-picture1 {
      height: 74.960128%;
    }
    #sbs-2201 .cs-picture2 {
      height: 81.339719%;
    }
  }

/*-- -------------------------- -->
<---           Quote            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #quote-2141 {
      /* 80px - 160px */
      padding: clamp(5rem, 10vw, 10rem) 1rem;
      background-color: #FBF5F1;
      background-image: url("imgs/QuoteBackground.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
      z-index: 1;
    }
    #quote-2141 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
    }
    #quote-2141 .cs-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    #quote-2141 .cs-quote-icon {
      /* 120px - 220px */
      width: clamp(7.5rem, 12vw, 13.75rem);
      height: auto;
      display: block;
      position: absolute;
      /* -48px - -96px */
      top: calc(clamp(3rem, 8vw, 6rem)*-1);
      z-index: -1;
    }
    #quote-2141 .cs-quote {
      /* 25px - 49px */
      font-size: clamp(1.5625rem, 4.8vw, 3.0625rem);
      font-weight: 900;
      line-height: 1.2em;
      text-align: center;
      max-width: 45ch;
      /* 24px - 32px */
      margin: 0 0 clamp(1.5rem, 3vw, 2rem);
      color: var(--headerColor);
    }
    #quote-2141 .cs-name {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      font-weight: 700;
      line-height: 1.2em;
      margin: 0 0 0.5rem 0;
      color: var(--secondary);
      display: block;
    }
    #quote-2141 .cs-job {
      font-size: 1rem;
      line-height: 1.5em;
      color: var(--bodyTextColorWhite);
      font-weight: 900;
      display: block;
    }
    #quote-2141 .cs-flower {
      width: 50vw;
      max-width: 40rem;
      height: auto;
      display: block;
      position: absolute;
      z-index: -1;
    }
    #quote-2141 .cs-left {
      top: 0;
      left: 0;
    }
    #quote-2141 .cs-right {
      right: 0;
      bottom: 0;
    }
  }

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
  }
  #gallery .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #gallery .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 .cs-title {
    max-width: 20ch;
  }
  #gallery .cs-button-group {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 2rem;
  }
  #gallery .cs-button {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    transition: color 0.3s;
  }
  #gallery .cs-button:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #gallery .cs-button.cs-active {
    color: var(--primary);
  }
  #gallery .cs-gallery-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
  }
  #gallery .cs-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s;
    /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: left top;
  }
  #gallery .cs-gallery.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the gallery won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-container (left: 0). Same for the top:0 value, the gallery won't go past that position when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0) scaleX(0);
  }
  #gallery .cs-gallery.cs-hidden .cs-image {
    /* when gallery is hidden, add these styles to the cs-image to animate from when cs-hidden is removed from the .cs-gallery */
    transform: translateY(2.1875rem);
    opacity: 0;
  }
  #gallery .cs-image {
    border-radius: 1.25rem;
    width: 47%;
    aspect-ratio: 1;
    /* clips the image corners */
    overflow: hidden;
    display: block;
    position: relative;
    /* when .cs-hidden is removed from the .cs-gallery, reset these values and animate between their hidden styles */
    transform: translateY(0rem);
    opacity: 1;
    transition: opacity 0.6s, transform 0.6s;
  }
  #gallery .cs-image:nth-of-type(1) {
    /* changes transition delays at desktop */
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery .cs-image:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  #gallery .cs-image:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  #gallery .cs-image:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  #gallery .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    transition:transform 0.25s ease;
  }

  #gallery img:hover {
    -webkit-transform:scale(1.5); /* or some other value */
    transform:scale(1.5);
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery .cs-container {
    max-width: 80rem;
  }
  #gallery .cs-content {
    text-align: left;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  #gallery .cs-title {
    margin: 0;
  }
  #gallery .cs-image {
    width: 31.8%;
    aspect-ratio: 1;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #gallery .cs-flex {
    max-width: 34.375rem;
  }
  #gallery .cs-gallery {
    align-items: stretch;
    justify-content: center;
  }
  #gallery .cs-image {
    width: 39.375rem;
    max-width: 100%;
    height: 25rem;
  }
  #gallery .cs-image:nth-of-type(2),
  #gallery .cs-image:nth-of-type(3),
  #gallery .cs-image:nth-of-type(4),
  #gallery .cs-image:nth-of-type(5) {
    width: 19.0625rem;
  }
  #gallery .cs-image:nth-of-type(1) {
    /* these delays stagger the reveal of each image so they all go one after the other and not all at once */
    transition-delay: 0.15s;
  }
  #gallery .cs-image:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #gallery .cs-image:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #gallery .cs-image:nth-of-type(4) {
    transition-delay: 0.15s;
  }
  #gallery .cs-image:nth-of-type(5) {
    transition-delay: 0.3s;
  }
  #gallery .cs-image:nth-of-type(6) {
    transition-delay: 0.45s;
  }
}
                                

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }
  #cta-697 .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-697 .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-697 .cs-title {
    color: var(--bodyTextColorWhite);
    font-size: 1.5rem;
  }
  #cta-697 .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: var(--bodyTextColorWhite);
    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;
  }
  #cta-697 .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;
  }
  #cta-697 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-697 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
}
                                
                                

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact-1750 {
      padding: var(--sectionPadding);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #contact-1750 .cs-container {
      width: 100%;
      /* changes to 1024 on desktop */
      max-width: 44rem;
      margin: auto;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      /* 48px - 64px */
      gap: clamp(3rem, 5vw, 4rem);
    }
    #contact-1750 .cs-content {
      /* set text align to center if content needs to be centrally aligned */
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* aligns content to the left, set to center to centrally align */
      align-items: flex-start;
    }
    #contact-1750 .cs-form-group {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      /* resets to 0 at tablet */
      margin: auto;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
    }
    #contact-1750 .cs-title {
      margin: 0 0 1.5rem;
    }
    #contact-1750 .cs-form {
      width: 100%;
      /* prevents flexbox from affecting height and width */
      box-sizing: border-box;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
    }
    #contact-1750 .cs-label {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2em;
      color: var(--headerColor);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      grid-column: span 12;
      gap: 0.5rem;
    }
    #contact-1750 .cs-input {
      font-size: 1rem;
      width: 100%;
      /* 46px - 56px */
      height: clamp(2.875rem, 4.5vw, 3.5rem);
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      padding: 0;
      padding-left: 1.5rem;
      background-color: #f7f7f7;
      color: var(--headerColor);
      border: none;
    }
    #contact-1750 .cs-input::placeholder {
      color: var(--bodyTextColor);
    }
    #contact-1750 .cs-textarea {
      font-family: inherit;
      min-height: 7.5rem;
      padding-top: 1.5rem;
    }
    #contact-1750 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      text-align: center;
      text-decoration: none;
      min-width: 9.375rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      background-color: var(--primary);
      overflow: hidden;
      color: #1a1a1a;
      border: none;
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
    }
    #contact-1750 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #contact-1750 .cs-button-solid:hover {
      color: #fff;
    }
    #contact-1750 .cs-button-solid:hover:before {
      width: 100%;
    }
    #contact-1750 .cs-submit {
      margin: 1rem 0 0;
      color: var(--bodyTextColorWhite);
      grid-column: span 12;
      justify-self: flex-start;
    }
    #contact-1750 .cs-submit:hover {
      cursor: pointer;
    }
    #contact-1750 .cs-info-group {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    #contact-1750 .cs-detail {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      color: var(--bodyTextColor);
      display: block;
    }
    #contact-1750 .cs-picture-group {
      width: 110%;
      height: 100vw;
      /* removed at desktop */
      max-height: 31.375rem;
      margin-top: 3rem;
      overflow: hidden;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
    #contact-1750 .cs-iframe {
      width: 100%;
      height: 100%;
      display: block;
    }
    #contact-1750 .cs-graphic {
      width: 100%;
      min-width: 80rem;
      height: auto;
      object-fit: cover;
      position: absolute;
      left: 50%;
      z-index: 0;
      transform: translateX(-50%);
    }
    #contact-1750 .cs-top {
      top: 0;
    }
    #contact-1750 .cs-left {
      left: 4%;
      transform: rotate(270deg);
      transform-origin: left;
    }
    #contact-1750 .cs-bottom {
      bottom: 0;
      left: 0;
      transform: rotateX(180deg);
    }
    #contact-1750 .cs-dark {
      display: none;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #contact-1750 {
      /* using flex: 1 on both group elements to ensure they're both the same width */
    }
    #contact-1750 .cs-container {
      flex-direction: row;
      align-items: center;
    }
    #contact-1750 .cs-form-group {
      flex: 1;
    }
    #contact-1750 .cs-info-group {
      flex: 1;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #contact-1750 .cs-container {
      width: 65%;
      max-width: 64rem;
      margin: 0 auto 0 0;
      padding: 2.5rem 1.5rem;
    }
    #contact-1750 .cs-picture-group {
      width: 90%;
      height: 100%;
      max-height: 100%;
      margin: 0;
      position: absolute;
      top: 0;
      right: 0;
      left: auto;
      z-index: -1;
      transform: none;
    }
    #contact-1750 .cs-picture-group {
      margin-left: -12.75rem;
      left: 50%;
    }
  }
  /* Large Desktop - 1300px */
  @media only screen and (min-width: 81.25rem) {
    #contact-1750 .cs-label:nth-of-type(2),
    #contact-1750 .cs-label:nth-of-type(3) {
      grid-column: span 6;
    }
  }
  /* Largest Desktop - 1920px */
  @media only screen and (min-width: 120rem) {
    #contact-1750 {
      padding-top: 7vw;
      padding-bottom: 9vw;
    }
    #contact-1750 .cs-container {
      margin: 0 auto;
      transform: translateX(-22rem);
    }
  }

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cs-footer-1862 {
      padding: var(--sectionPadding);
      padding-bottom: 2.5rem;
      background-color: #F6EDDF;
    }
    #cs-footer-1862 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #cs-footer-1862 .cs-top {
      width: 100%;
      /* 48px - 64px */
      margin-bottom: clamp(3rem, 6vw, 4rem);
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      /* 64px - 100px */
      column-gap: clamp(4rem, 9vw, 6.25rem);
      row-gap: 2rem;
    }
    #cs-footer-1862 .cs-flex {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* 32px - 48px */
      gap: clamp(2rem, 4vw, 3rem);
    }
    #cs-footer-1862 .cs-logo {
      width: 100%;
      max-width: 19.8125rem;
      max-height: 10rem;
    }
    #cs-footer-1862 .cs-logo img {
      width: auto;
      height: 100%;
    }
    #cs-footer-1862 .cs-social {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
    }
    #cs-footer-1862 .cs-social-li {
      list-style: none;
    }
    #cs-footer-1862 .cs-social-link {
      width: 2.5rem;
      height: auto;
      padding: 0.75rem;
      background-color: #DED1BD;
      border-radius: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }
    #cs-footer-1862 .cs-social-link:hover {
      background-color: var(--primary);
    }
    #cs-footer-1862 .cs-social-link:hover .cs-social-icon {
      filter: grayscale(1) brightness(1000%);
    }
    #cs-footer-1862 .cs-social-icon {
      width: 1rem;
      height: 1rem;
      display: block;
    }
    #cs-footer-1862 .cs-ul {
      width: auto;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    #cs-footer-1862 .cs-contact-ul {
      width: 100%;
      max-width: 100%;
      gap: 0.5rem;
    }
    #cs-footer-1862 .cs-li {
      list-style: none;
      margin: 0;
      display: block;
    }
    #cs-footer-1862 .cs-header {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2em;
      /* 16px - 24px bottom */
      margin: 0 0 clamp(1rem, 3.5vw, 1.5rem) 0;
      color: var(--headerColor);
      display: block;
    }
    #cs-footer-1862 .cs-link,
    #cs-footer-1862 .cs-li {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
      position: relative;
      z-index: 1;
    }
    #cs-footer-1862 .cs-link:hover:before {
      width: 100%;
    }
    #cs-footer-1862 .cs-link:before {
      /* on hover underline */
      content: "";
      width: 0%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: width 0.3s;
    }
    #cs-footer-1862 .cs-bottom {
      width: 100%;
      margin: 0;
      /* 20px - 40px top */
      padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
      border-top: 1px solid #DED1BD;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-footer-1862 .cs-nav {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      /* 20px - 40px */
      column-gap: clamp(1.25rem, 5.3vw, 2.5rem);
    }
    #cs-footer-1862 .cs-nav-li {
      list-style: none;
    }
    #cs-footer-1862 .cs-nav-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      position: relative;
    }
    #cs-footer-1862 .cs-nav-link:hover {
      color: #8F5B34;
    }
    #cs-footer-1862 .cs-nav-link:hover:before {
      width: 100%;
    }
    #cs-footer-1862 .cs-nav-link:before {
      /* on hover underline */
      content: "";
      width: 0%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: width 0.3s;
    }
    #cs-footer-1862 .cs-copyright {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: center;
      margin: 0;
      color: var(--bodyTextColor);
    }
    #cs-footer-1862 .cs-copyright-link {
      font-size: inherit;
      line-height: inherit;
      text-decoration: none;
      margin: 0;
      color: inherit;
      display: inline-block;
    }
    #cs-footer-1862 .cs-copyright-link:hover {
      text-decoration: underline;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #cs-footer-1862 .cs-flex {
      width: auto;
      margin-right: auto;
    }
    #cs-footer-1862 .cs-contact-ul {
      /* 152px - 412px */
      width: clamp(9.5rem, 25vw, 25.75rem);
    }
  }
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-footer-1862 .cs-bottom {
      flex-direction: row;
    }
    #cs-footer-1862 .cs-copyright {
      text-align: right;
    }
  }



  /*-- -------------------------- -->
<---     ABOUT PAGE ----  Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #Aboutsbs-328 {
      padding: var(--sectionPadding);
      background-color: #f7f7f7;
  }
  #Aboutsbs-328 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      margin-top: 12rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #Aboutsbs-328 .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;
  }
  #Aboutsbs-328 .cs-text {
      margin-bottom: 1rem;
  }
  #Aboutsbs-328 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #Aboutsbs-328 .cs-circles {
      width: 100%;
      /* changes at desktop */
      max-width: 23.375rem;
      margin: auto;
      /* 40px - 48px */
      margin-top: clamp(2.5rem, 3vw, 3rem);
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
  }
  #Aboutsbs-328 .cs-circle {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      flex: 1;
      aspect-ratio: 1;
  }
  #Aboutsbs-328 .cs-ring-wrapper {
      position: relative;
      margin: 0 0 0.5rem 0;
  }
  #Aboutsbs-328 .cs-number {
      /* 20px - 39px */
      font-size: clamp(1.25rem, 3vw, 2.4375rem);
      font-weight: 900;
      /* prevents mouse from interacting with it */
      pointer-events: none;
      line-height: 1.2em;
      color: var(--headerColor);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  #Aboutsbs-328 .cs-desc {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.4vw, 1rem);
      line-height: 1.5em;
      text-align: center;
      width: 100%;
      color: var(--bodyTextColor);
  }
  #Aboutsbs-328 .cs-ring {
      --ring-width: 8px;
      width: calc(100% - var(--ring-width));
      aspect-ratio: 1;
      overflow: visible;
      pointer-events: none;
      rotate: -90deg;
      scale: 1 -1;
  }
  #Aboutsbs-328 .cs-ring circle {
      fill: none;
      stroke: #f7f7f7;
      stroke-width: var(--ring-width);
  }
  #Aboutsbs-328 .cs-ring circle:last-of-type {
      stroke: var(--secondaryLight);
      stroke-linecap: round;
      stroke-dasharray: calc(var(--ratio) * 314%) 314%;
      transition: stroke-dasharray 1s;
  }
  #Aboutsbs-328 .cs-circle:hover .cs-ring {
      --ratio: 0 !important;
  }
  #Aboutsbs-328 .cs-picture {
      /* set font size to scale with view width, stopping at 68% the value of em */
      font-size: min(2.16vw, 0.68em);
      width: 32.5em;
      height: 42.5em;
      /* margin top and bottom to match the exact amount the grey square overflows the parent for consistent spacing */
      margin: 3em 0;
      position: relative;
      display: block;
  }
  #Aboutsbs-328 .cs-picture:before {
      /* grey box */
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 0.75rem;
      background: #bababa;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      transform: rotate(15deg);
  }
  #Aboutsbs-328 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-radius: 0.625rem;
      object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #Aboutsbs-328 .cs-container {
      max-width: 80rem;
      /* set to horizontal arrangement */
      flex-direction: row;
      justify-content: center;
      /* 77px - 160px */
      gap: clamp(4.8125rem, 11vw, 10rem);
  }
  #Aboutsbs-328 .cs-content {
      text-align: left;
      align-items: flex-start;
  }
  #Aboutsbs-328 .cs-picture {
      font-size: min(1.1vw, 1em);
      margin: 3.5em 0 3.5em 5em;
      /* prevent flexbox from squishing it */
      flex: none;
  }
  #Aboutsbs-328 .cs-circles {
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
  }
  #Aboutsbs-328 .cs-ring-wrapper {
      /* breaks the children out of the container.  They can now be arrnaged as if thy are all children of the cs-circle */
      display: contents;
  }
  #Aboutsbs-328 .cs-ring {
      /* make the ring position absolute so it can sit on top of the other elements that are centered relatively in the cs-circle */
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
  }
  #Aboutsbs-328 .cs-number {
      /* make the number relative positioning so it and the cs-desc can position themselves around each other */
      position: relative;
      top: auto;
      left: auto;
      transform: none;
  }
  #Aboutsbs-328 .cs-desc {
      position: relative;
      bottom: auto;
      left: auto;
      transform: none;
  }
}

/*-- -------------------------- -->
<---        Meet the Team       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-2080 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #meet-team-2080 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    margin-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #meet-team-2080 .cs-content {
    /* set text align to center if content needs to be centered */
    text-align: left;
    width: 100%;
    margin-bottom: 3rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* left aligns content, set to center to align content horizontally */
    align-items: flex-start;
    grid-column: span 12;
  }
  #meet-team-2080 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    max-width: 9.25rem;
    min-width: 7.25rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #meet-team-2080 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #meet-team-2080 .cs-button-solid:hover:before {
    width: 100%;
  }
  #meet-team-2080 .cs-card-group {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
    position: relative;
  }
  #meet-team-2080 .cs-item {
    min-height: 22.5rem;
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    grid-column: span 12;
    position: relative;
  }
  #meet-team-2080 .cs-item:last-of-type::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-2080 .cs-picture {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
  #meet-team-2080 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    /* forces the top if the images to always be at the top of the container */
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-2080 .cs-info {
    width: 90%;
    margin: 1rem;
    padding: 1rem 1.5rem;
    background-color: #fff;
    overflow: hidden;
    border-radius: 0.5rem;
    position: relative;
  }
  #meet-team-2080 .cs-info:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-2080 .cs-h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
  }
  #meet-team-2080 .cs-cta {
    text-align: left;
    width: 100%;
    height: 100%;
    max-height: 25.375rem;
    min-height: 22.5rem;
    margin-bottom: auto;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--primary);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    grid-column: span 12;
    position: relative;
  }
  #meet-team-2080 .cs-cta:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
  }
  #meet-team-2080 .cs-h2 {
    font-size: 1.9375rem;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #meet-team-2080 .cs-job {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meet-team-2080 .cs-container {
    max-width: 80rem;
  }
  #meet-team-2080 .cs-content {
    min-height: 22.5rem;
    margin-bottom: auto;
    grid-column: span 6;
  }
  #meet-team-2080 .cs-item,
  #meet-team-2080 .cs-cta {
    grid-column: span 6;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #meet-team-2080 .cs-content,
  #meet-team-2080 .cs-item,
  #meet-team-2080 .cs-cta {
    min-height: 25.375rem;
    grid-column: span 4;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #meet-team-2080 .cs-content,
  #meet-team-2080 .cs-item,
  #meet-team-2080 .cs-cta {
    grid-column: span 3;
  }
}

/* Modal */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 25% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#myBtn, #myBtn2, #myBtn3, #myBtn4 {
  cursor: pointer;
}

/*-- -------------------------- -->
<---         SERMON --  Video   -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #video-571 {
      padding: var(--sectionPadding);
  }
  #video-571 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      margin-top: 12rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #video-571 .cs-content {
      text-align: left;
      width: 100%;
      max-width: 69rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* 20px - 44px */
      gap: clamp(1.25rem, 5vw, 2.75rem);
  }
  #video-571 .cs-video-title {
      /* 31px - 39px */
      font-size: clamp(1.9375rem, 6vw, 2.4375rem);
      font-weight: 900;
      line-height: 1.2em;
      text-align: inherit;
      margin: 0;
      color: var(--headerColor);
      position: relative;
  }

  .container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  }
  
  /* Then style the iframe to fit in the container div with full height and width */
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

  #video-571 .cs-big-link {
      width: 100%;
      /* 418px - 760px */
      height: clamp(26.125rem, 50vw, 47.5rem);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #video-571 .cs-big-link:hover .cs-background img {
      transform: scale(1.1);
  }
  #video-571 .cs-background {
      width: 100%;
      height: 100%;
      /* clips the img from overflowing the container on hover */
      overflow: hidden;
      display: block;
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #video-571 .cs-background:before {
      /* color overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.72;
      background-blend-mode: multiply;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 10;
  }
  #video-571 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: -1;
      transition: transform 0.7s;
  }
  #video-571 .cs-link-icon {
      /* 64px - 86px */
      width: clamp(4rem, 7vw, 5.375rem);
      height: auto;
      position: absolute;
      z-index: 10;
      transition:
          transform 0.3s,
          box-shadow 0.3s;
  }
  #video-571 .cs-link-icon:hover {
      transform: scale(1.1);
  }
}
}