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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-523 {
      padding: var(--sectionPadding);
  }
  @keyframes floatAnimation {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-0.6em);
      }
      100% {
          transform: translateY(0);
      }
  }
  @keyframes floatAnimation2 {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-1em);
      }
      100% {
          transform: translateY(0);
      }
  }
  #sbs-523 .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-523 .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;
  }

  #sbs-523 .cs-color {
      color: var(--primary);
  }
  #sbs-523 .cs-text {
      margin-bottom: 1rem;
  }
  #sbs-523 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #sbs-523 .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;
  }
  #sbs-523 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #086b78;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #sbs-523 .cs-button-solid:hover:before {
      width: 100%;
  }
  #sbs-523 .cs-image-group {
      /* this is how we can scale entire groups using ems.  Font size is tied to the view width, so as the screen gets bigger, so does the font size, and this scales up and down the elements with em values.  Then it stops growing once the font size reaches the defined value of 1em (16px which is default on the html element). Font size changes at desktop */
      font-size: min(2.3vw, 0.875em);
      /* all values are done in ems, not rems, so we can scale the group with a font size min/max equation */
      width: 39.375em;
      height: 51.0625em;
      position: relative;
      /* pushes it to the top in the first position */
      order: -1;
  }
  #sbs-523 .cs-image-group:before {
      content: "";
      width: 11.625em;
      height: 10.0625em;
      background: var(--primary);
      opacity: 1;
      position: absolute;
      display: block;
      top: 0em;
      left: 0em;
      animation-name: floatAnimation;
      animation-duration: 6s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
  #sbs-523 .cs-image-group::after {
    content: "";
    width: 11.625em;
    height: 10.0625em;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0em;
    right: 0em;
    z-index: -1;
    animation-name: floatAnimation;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    }
  #sbs-523 .cs-picture {
      display: block;
      position: absolute;
  }
  #sbs-523 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
  }
  #sbs-523 .cs-picture-large {
      width: 29.75em;
      height: 42.3125em;
      top: 4.375em;
      left: 3.875em;
  }
  #sbs-523 .cs-picture-small {
      width: 16.25em;
      height: 14.0625em;
      border: 0.625em solid #ffffff;
      background-color: #fff;
      bottom: 0;
      right: 0;
      animation-name: floatAnimation2;
      animation-duration: 20s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-523 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
  }
  #sbs-523 .cs-content {
      width: 51%;
      max-width: 34.375rem;
  }
  #sbs-523 .cs-image-group {
      font-size: min(1.1vw, 1em);
  }
}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1129 {
      padding: var(--sectionPadding);
  }
  #services-1129 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1129 .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;
  }

  #services-1129 .cs-topper {
      color: var(--primary);
  }
  #services-1129 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #services-1129 .cs-item {
      width: 100%;
      text-align: center;
      list-style: none;
      margin: 0;
      /* 24px - 32px */
      padding: clamp(1.5rem, 3vw, 2rem);
      background-color: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 1rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      grid-column: span 12;
      grid-row: span 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      z-index: 1;
      transition:
          box-shadow 0.3s,
          border-color 0.3s;
  }
  #services-1129 .cs-item:hover {
      box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
      border-color: transparent;
  }
  #services-1129 .cs-item:hover .cs-h3 {
      color: var(--primary);
  }
  #services-1129 .cs-image-group {
      width: 6.25rem;
      height: auto;
      /* 20px - 24px */
      margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
      position: relative;
  }
  #services-1129 .cs-icon {
      width: 3rem;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  #services-1129 .cs-graphic {
      width: 100%;
      height: auto;
  }
  #services-1129 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: bold;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
      transition: color 0.3s;
  }
  #services-1129 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      max-width: 28.125rem;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1129 .cs-item {
      text-align: left;
      align-items: flex-start;
      grid-column: span 4;
  }
}

/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team-1284 {
      padding: var(--sectionPadding);
  }
  #meet-team-1284 .cs-container {
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      width: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #meet-team-1284 .cs-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
      /* set text align to left if content needs to be left aligned */
      text-align: left;
  }
  #meet-team-1284 .cs-flex-group {
      display: flex;
      flex-direction: column;
  }
  #meet-team-1284 .cs-topper {
      font-size: var(--topperFontSize);
      line-height: 1.2em;
      font-weight: 700;
      margin-bottom: 0.25rem;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-align: inherit;
  }
  #meet-team-1284 .cs-title {
      font-size: var(--headerFontSize);
      line-height: 1.2em;
      font-weight: 900;
      max-width: 43.75rem;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
      text-align: inherit;
  }
  #meet-team-1284 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      max-width: 40.625rem;
      width: 100%;
      margin: 0;
      color: var(--bodyTextColor);
      text-align: inherit;
  }
  #meet-team-1284 .cs-text {
      max-width: 32.625rem;
  }
  #meet-team-1284 .cs-picture {
      width: 5rem;
      height: 5rem;
      margin-bottom: 1rem;
      border-radius: 50%;
      display: block;
      position: relative;
      /* clips the corners off the image tag */
      overflow: hidden;
  }
  #meet-team-1284 .cs-picture img {
      width: 100%;
      height: 100%;
      /* Makes image behave like a background image */
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.7s;
  }
  #meet-team-1284 .cs-card-group {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.25rem;
  }
  #meet-team-1284 .cs-item {
      list-style: none;
      /* Changes on tablet */
      width: 100%;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      /* 16px - 20px */
      padding: clamp(1rem, 2vw, 1.25rem) 0;
      background: #f1f1f4;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  #meet-team-1284 .cs-item:hover .cs-picture img {
      transform: scale(1.1);
  }
  #meet-team-1284 .cs-name {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--headerColor);
      display: block;
  }
  #meet-team-1284 .cs-job-title {
      font-size: 1rem;
      margin-bottom: 0.75rem;
      color: var(--bodyTextColor);
      display: block;
  }
  #meet-team-1284 .cs-social {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.25rem;
  }
  #meet-team-1284 .cs-link {
      width: 2rem;
      height: 2rem;
      /* After making the a tag into a box, we center the image inside of it */
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      /* creates the 3D space for the 3D effect when spinning */
      transform-style: preserve-3d;
      perspective: 700px;
  }
  #meet-team-1284 .cs-link:hover .cs-icon {
      transform: translateY(-5/16rem) rotateY(360deg);
  }
  #meet-team-1284 .cs-icon {
      width: 0.875rem;
      height: auto;
      transition: transform 0.7s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #meet-team-1284 .cs-container {
      max-width: 80rem;
  }
  #meet-team-1284 .cs-topper {
      width: 100%;
  }
  #meet-team-1284 .cs-content {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      column-gap: 1.25rem;
  }
  #meet-team-1284 .cs-title {
      margin-bottom: 0;
  }
  #meet-team-1284 .cs-text {
      width: 50%;
  }
  #meet-team-1284 .cs-card-group {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: stretch;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #meet-team-1284 .cs-card-group {
      grid-template-columns: repeat(4, 1fr);
  }
}