/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  :root {
    /* remove this whole :root and put in your global css file that's shared on all pages, then just remove this section from all other Stitches you add later, only need this once in your global stylesheet */
     
    /* 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;
  }
  #banner-849 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
     
    /* 175px - 260px top */
    padding: clamp(10.9375rem, 20vw, 16.25rem) 1rem clamp(6.25rem, 14vw, 12vw);
    /* clips svg wave from causing overflow issues */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #banner-849 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #banner-849 .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(--bodyTextColorWhite);
    position: relative;
  }
  #banner-849 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-849 .cs-background:before {
    /* background color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: .64;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-849 .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-849 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 48rem;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #banner-849 .cs-background:before {
    opacity: 1;
    background: linear-gradient(90.01deg, rgba(0, 0, 0, 0.9) 16.86%, rgba(0, 0, 0, 0) 100%);
  }
  #banner-849 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}

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

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