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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-1591 {
      padding: var(--sectionPadding);
    }
    #sbs-1591 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-1591 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 36.625rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
    }
    #sbs-1591 .cs-text {
      margin-bottom: 1rem;
    }
    #sbs-1591 .cs-text:last-of-type {
      margin-bottom: 2rem;
    }
    #sbs-1591 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 3rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
    }
    #sbs-1591 .cs-button-solid:before {
      content: '';
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width .3s;
    }
    #sbs-1591 .cs-button-solid:hover:before {
      width: 100%;
    }
    #sbs-1591 .cs-image-group {
      /* scales the whole group based on the view width size and stop when that vales equals .745em, resets at desktop */
      font-size: min(1.959vw, .745em);
      width: 39.375em;
      /* we set a minimum height so it never gets smaller than this value */
      min-height: 39.25em;
      display: block;
      position: relative;
      z-index: 1;
    }
    #sbs-1591 .cs-picture {
      position: absolute;
    }
    #sbs-1591 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    #sbs-1591 .cs-picture1 {
      /* the percentage heights allow them to be responsive to the height of the parent cs-image-group. On desktop, when the felxbox is set to aling-items: stretch, the cs-image group will stretch to fill the height of the parent container. So when you add more content to the cs-content group and make it taller, the cs-image group will get taller with it and every image will stretch with the parent, making this entire group responsive to the changing amounts of content next to it */
      width: 25.8125em;
      height: 79.617834%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    #sbs-1591 .cs-picture2 {
      width: 25.8125em;
      height: 44.585987%;
      bottom: 0;
      right: 0;
      z-index: 10;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #sbs-1591 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
    }
    #sbs-1591 .cs-content {
      /* this padding sets a minimum gap between the top and bottom of the content div and the top and bottom of the cs-image-group */
      padding: 3.75rem 0;
      /* while the cs-image-group will stretch to fill the height of the parent, this property will ensure that the cs-content group aligns itse;f in the center of the parent div instead of stretching */
      align-self: center;
    }
    #sbs-1591 .cs-image-group {
      font-size: min(1.2vw, 1em);
      flex: none;
    }
  }
  /* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1165 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
    #list-1165 {
        max-width: 39.375rem;
        margin: 0 0 2rem 0;
        padding: 0;
        /* clips the bullets to create the half circle */
        overflow: hidden;
    }
    #list-1165 .cs-li {
        list-style: none;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.75rem;
        position: relative;
    }
    #list-1165 .cs-li:before {
        /* bullet */
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-top: 0.5rem;
        background: var(--secondary);
        display: block;
        /* prevents flexbox from squishing it */
        flex: none;
    }
}
/*-- -------------------------- -->
<---         CS-Content         -->
<--- -------------------------- -*/

/* you can place this CSS group in your global stylesheet that is loaded on every page of the site so all you need to do is copy and paste the HTML into any section and it will all work. Or piece it inside the media queries in whatever section you want to add it to. You can also remove the cs-topper, cs-title, and cs-text and if they aren't already in your global stylesheet you can paste them outside these media queries so all cs-topper, cs-title, and cs-text on your site will pull from 1 place. */

/* Mobile */
@media only screen and (min-width: 0rem) {
  #cs-content-831 {
      /* 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;
  }
  #cs-content-831 .cs-topper {
      font-size: var(--topperFontSize);
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: inherit;
      letter-spacing: 0.1em;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 0.25rem;
      display: block;
  }
  #cs-content-831 .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-content-831 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 40.625rem;
      margin: 0;
      color: var(--bodyTextColor);
  }
}