: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: #F50057;
    --primaryLight: #F50057;
    --secondary: #2F8AA1;
    --secondaryLight: #2F8AA1;
    --headerColor: #1a1a1a;
    --bodyTextColor: #232323;
    --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: Lato;
}

*, *: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);
}
      
/*Buttons*/
.cs-button {
  font-size: 1rem;
  line-height: 1.5em;
  color: var(--bodyTextColor);
  background-color: transparent;
  border: none;
  transition: color 0.3s;
}
.cs-button:hover {
  color: var(--primary);
  cursor: pointer;
}
.cs-button.cs-active {
  text-decoration: underline;
}
.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;
  color: #fff;
  background-color: var(--primary);
  border-radius: 0.25rem;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.cs-button-solid:before {
  content: "";
  width: 0%;
  height: 100%;
  background: #1a1a1a;
  opacity: 1;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 0.3s;
}
.cs-button-solid:hover:before {
  width: 100%;
}
.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;
  border-radius: 0.25rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.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;
  border-radius: 0.25rem;
}
.cs-button-transparent:hover:before {
  transform: scaleX(1);
}
.cs-button-transparent .cs-img {
  display: block;
  margin-right: 0.75rem;
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
      overflow: hidden;
    }
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem 1rem;
      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);
      opacity: 0;
      display: block;
      position: absolute;
      top: 100%;
      right: 0;
      z-index: -1100;
      transition: height 0.5s, opacity 0.5s;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    #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 {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-container {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    #cs-navigation .cs-logo {
      width: 40%;
      max-width: 9.125rem;
      height: 100%;
      margin: 0 auto 0 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
    #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-toggle {
      /* 44px - 48px */
      width: clamp(2.75rem, 6vw, 3rem);
      height: clamp(2.75rem, 6vw, 3rem);
      margin: 0 0 0 auto;
      background-color: transparent;
      border: none;
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
      transform-origin: center;
    }
    #cs-navigation .cs-active .cs-line3 {
      opacity: 0;
      bottom: 100%;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      /* 14px - 16px */
      height: clamp(0.875rem, 1.5vw, 1rem);
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      background-color: #1a1a1a;
      border-radius: 0.25rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transition: transform 0.5s, top 0.3s, left 0.3s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
      transform-origin: center;
    }
    #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-direction: normal;
      animation-fill-mode: forwards;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom 0.3s, opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      width: 100%;
      height: auto;
      padding-bottom: 2.4em;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.4s, opacity 0.3s;
      transform-origin: top;
    }
    #cs-navigation .cs-ul {
      width: 100%;
      height: auto;
      max-height: 65vh;
      margin: 0;
      padding: 3rem 0 0 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 1.25rem;
      overflow: auto;
    }
    #cs-navigation .cs-li {
      text-align: center;
      list-style: none;
      width: 100%;
      margin-right: 0;
      opacity: 0;
      /* transition from these values */
      transform: translateY(-4.375rem);
      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:before {
      /* active state underline */
      content: "";
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      display: none;
      position: absolute;
      bottom: -0.125rem;
      left: 0;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      display: block;
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     Navigation Dropdown    -->
  <--- -------------------------- -*/
  /* Mobile - 1023px */
  @media only screen and (max-width: 63.9375rem) {
    #cs-navigation .cs-li {
      text-align: center;
      width: 100%;
      display: block;
    }
    #cs-navigation .cs-dropdown {
      color: var(--bodyTextColorWhite);
      position: relative;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
      height: auto;
      margin: 0.75rem 0 0 0;
      padding: 0.75rem 0;
      opacity: 1;
      visibility: visible;
    }
    #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
      opacity: 1;
    }
    #cs-navigation .cs-dropdown .cs-li-link {
      position: relative;
      transition: opacity 0.3s;
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      position: absolute;
      top: 50%;
      right: -1.25rem;
      transform: translateY(-50%);
    }
    #cs-navigation .cs-drop-ul {
      width: 100%;
      height: 0;
      margin: 0;
      padding: 0;
      background-color: var(--primary);
      opacity: 0;
      display: flex;
      visibility: hidden;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 0.75rem;
      overflow: hidden;
      transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
    }
    #cs-navigation .cs-drop-li {
      list-style: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2vw, 1.25rem);
      color: #fff;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation .cs-dropdown {
      position: relative;
    }
    #cs-navigation .cs-dropdown:hover,
    #cs-navigation .cs-dropdown:focus-within {
      cursor: pointer;
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-ul,
    #cs-navigation .cs-dropdown:focus-within .cs-drop-ul {
      opacity: 1;
      visibility: visible;
      transform: scaleY(1);
    }
    #cs-navigation .cs-dropdown:hover .cs-drop-li,
    #cs-navigation .cs-dropdown:focus-within .cs-drop-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-drop-icon {
      width: 0.9375rem;
      height: auto;
      display: inline-block;
    }
    #cs-navigation .cs-drop-ul {
      min-width: 12.5rem;
      margin: 0;
      padding: 0;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
      opacity: 0;
      border-bottom: 5px solid var(--primary);
      visibility: hidden;
      /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns.
       Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
      position: absolute;
      top: 100%;
      z-index: -100;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
      transform-origin: top;
    }
    #cs-navigation .cs-drop-li {
      font-size: 1rem;
      text-decoration: none;
      list-style: none;
      width: 100%;
      height: auto;
      color: var(--bodyTextColor);
      opacity: 0;
      display: block;
      transform: translateY(-0.625rem);
      transition: opacity 0.6s, transform 0.6s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-drop-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li-link.cs-drop-link {
      font-size: 1rem;
      line-height: 1.5em;
      text-decoration: none;
      white-space: nowrap;
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem;
      color: var(--bodyTextColor);
      display: block;
      transition: color 0.3s, background-color 0.3s;
    }
    #cs-navigation .cs-li-link.cs-drop-link:hover,
    #cs-navigation .cs-li-link.cs-drop-link:focus {
      background-color: #f7f7f7;
      outline: none;
    }
    #cs-navigation .cs-li-link.cs-drop-link:before {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0 1rem;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 4.0625rem;
      /* 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;
      /* 20px - 36px */
      gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 2rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
      position: relative;
    }
    #cs-navigation .cs-li-link:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link:before {
      /* active state underline */
      content: "";
      width: 0%;
      height: 2px;
      background: var(--primary);
      opacity: 1;
      display: block;
      position: absolute;
      bottom: 0rem;
      left: 0;
      transition: width 0.3s;
    }
  }

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-229 {
    /* changes on tablet */
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-229 .cs-picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-229 .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-229 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero-229 .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 - 280px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9rem, 25.95vw, 17.5rem) 0;
    margin: auto;
    position: relative;
  }
  #hero-229 .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-229 .cs-flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
    margin: auto;
    width: 80vw;
    /* 464px - 562px */
    max-width: clamp(29rem, 60vw, 35.125rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    box-sizing: border-box;
  }
  #hero-229 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: 700;
    color: var(--primaryLight);
    margin-bottom: 1rem;
    display: block;
  }
  #hero-229 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-229 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    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-229 .cs-button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-229 .cs-button {
    min-width: 12.3125rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-229 {
    /* 32px - 40px */
    padding: 0 clamp(2rem, 5vw, 2.5rem);
  }
  #hero-229 .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-229 .cs-button-group {
    flex-direction: row;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-229 {
    background:url("https://www.gerbendoesgraphics.com/img/Header-Tunnel.png");
    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-229 .cs-picture img {
    display: none;
  }
}

/*-- -------------------------- -->
<---        Recent Work        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #work {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
      overflow: hidden;
  }
  #work .cs-container {
      width: 100%;
      /* changes to 1280px on desktop */
      max-width: 43.75rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #work .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;
  }

  #work .cs-title {
      max-width: 20ch;
  }
  #work .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
      transition: transform 0.7s, opacity 0.7s, visibility 0.5s, top 0.4s, left 0.4s;
      /* makes the transform scaling origin the top left corner, dictates the direction by which the scale transforms animate towards */
      transform-origin: top;
      transition-timing-function: ease-out;
  }
  #work .cs-card-group.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: 250px;
    left: 250px;
    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);
  }
  #work .cs-card-group.cs-hidden .cs-picture {
    /* 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;
  }
  #work .cs-picture: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;
  }
  #work .cs-picture:nth-of-type(2) {
    transition-delay: 0.3s;
  }
  #work .cs-picture:nth-of-type(3) {
    transition-delay: 0.45s;
  }
  #work .cs-picture:nth-of-type(4) {
    transition-delay: 0.6s;
  }
  #work .cs-picture:nth-of-type(5) {
    transition-delay: 0.75s;
  }
  #work .cs-picture:nth-of-type(6) {
    transition-delay: 0.9s;
  }
  #work .cs-item {
      list-style: none;
      display: flex;
      flex-direction: column;
      grid-column: span 12;
  }
  #work .cs-item:hover .cs-h3,
  #work .cs-item:hover .cs-date,
  #work .cs-item:hover .cs-category {
      color: #fff;
  }
  #work .cs-item:hover .cs-item-text {
      background-color: var(--primary);
  }
  #work .cs-item:hover .cs-icon-wrapper {
      border-color: #fff;
  }
  #work .cs-item:hover .cs-icon,
  #work .cs-item:hover .cs-date-icon {
      filter: brightness(1000%) grayscale(1);
  }
  #work .cs-item:hover .cs-icon {
      transform: rotate(45deg);
  }
  #work .cs-item:hover .cs-category::before {
      background-color: #fff;
      opacity: 0.2;
  }
  #work .cs-link {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      /* if one card has more content then the others, the card will stretch to fill the parent container */
      flex-grow: 1;
      gap: 1rem;
  }
  #work .cs-picture {
      width: 100%;
      height: 20rem;
      margin: 0;
      border-radius: 0.25rem;
      display: block;
      position: relative;
      z-index: 1;
      overflow: hidden;
  }
  #work .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;
      top: 0;
      left: 0;
  }
  #work .cs-item-text {
      padding: 1.25rem;
      background-color: #f7f7f7;
      border-radius: 0.25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* makes the item text the element that grows to fill the container */
      flex-grow: 1;
      transition: background-color 0.3s;
  }
  #work .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
      line-height: 1.2em;
      text-align: left;
      margin: 0;
      color: #1a1a1a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      transition: color 0.3s;
  }
  #work .cs-icon-wrapper {
      width: 3rem;
      height: 3rem;
      border: 1px solid #bababa;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents the parent flexbox from shrinking the icon */
      flex-shrink: 0;
      transition: border-color 0.3s;
  }
  #work .cs-icon {
      width: auto;
      height: 0.75rem;
      transition:
          filter 0.3s,
          transform 0.3s;
  }
  #work .cs-info {
      margin: 1rem 0 0;
      padding: 1rem 0 0;
      border-top: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  #work .cs-type {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-align: left;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.3s;
  }
  #work .cs-type-icon {
      width: auto;
      height: 1.5rem;
      transition: filter 0.3s;
  }
  #work .cs-category {
      font-size: 0.875rem;
      /* centers the text if the category bullet has to span multiple lines */
      text-align: center;
      padding: 0.25rem 1rem;
      color: #1a1a1a;
      border-radius: 5rem;
      position: relative;
      z-index: 0;
      overflow: hidden;
  }
  #work .cs-category::before {
      content: "";
      width: 100%;
      height: 100%;
      background: #e8e8e8;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

  
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #work .cs-container {
      max-width: 80rem;
  }
  #work .cs-item {
      grid-column: span 4;
  }

}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {

#work .cs-card-group.cs-hidden .cs-picture {
  /* 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;
}
#work .cs-picture: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;
}
#work .cs-picture:nth-of-type(2) {
  transition-delay: 0.3s;
}
#work .cs-picture:nth-of-type(3) {
  transition-delay: 0.45s;
}
#work .cs-picture:nth-of-type(4) {
  transition-delay: 0.6s;
}
#work .cs-picture:nth-of-type(5) {
  transition-delay: 0.75s;
}
#work .cs-picture:nth-of-type(6) {
  transition-delay: 0.9s;
}
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-269 {
      /* 60px - 100px top and bottom */
      padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
      background-color: #1a1a1a;
      /* Navigation Links */
      /* Contact Links */
  }
  #cs-footer-269 .cs-container {
      width: 100%;
      /* reset on tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      /* 68px - 100px */
      column-gap: clamp(4.25rem, calc(10%), 6.25rem);
  }
  #cs-footer-269 .cs-logo-group {
      /* takes up all the space, lets the other ul's wrap below it */
      width: 100%;
      position: relative;
  }
  #cs-footer-269 .cs-logo {
      /* 210px - 240px */
      width: clamp(13.125rem, 8vw, 15rem);
      height: auto;
      display: block;
      /* 28px - 44px */
      margin-bottom: clamp(1.75rem, 4.17vw, 2.75rem);
  }
  #cs-footer-269 .cs-logo-img {
      width: 100%;
      height: auto;
  }
  #cs-footer-269 .cs-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 2.5vw, 1rem);
      line-height: 1.5em;
      margin: 0;
      margin-bottom: 2rem;
      /* changes to 305px at desktop */
      max-width: 33.75rem;
      color: var(--bodyTextColorWhite);
  }
  #cs-footer-269 .cs-nav {
      padding: 0;
      margin: 0;
  }
  #cs-footer-269 .cs-nav-li {
      list-style: none;
      line-height: 1.5em;
      margin-bottom: 0.5rem;
  }
  #cs-footer-269 .cs-nav-li:last-of-type {
      margin-bottom: 0;
  }
  #cs-footer-269 .cs-header {
      font-size: 1rem;
      line-height: 1.5em;
      font-weight: 700;
      margin-bottom: 0.875rem;
      color: var(--bodyTextColorWhite);
      position: relative;
      display: block;
  }
  #cs-footer-269 .cs-nav-link {
      font-size: 1rem;
      text-decoration: none;
      line-height: 1.5em;
      color: var(--bodyTextColorWhite);
      position: relative;
  }
  #cs-footer-269 .cs-nav-link:before {
      /* underline */
      content: "";
      width: 0%;
      height: 0.125rem;
      /* current color of the parent */
      background: currentColor;
      opacity: 1;
      position: absolute;
      display: block;
      bottom: -0.125rem;
      left: 0;
      transition: width 0.3s;
  }
  #cs-footer-269 .cs-nav-link:hover:before {
      width: 100%;
  }
  #cs-footer-269 .cs-contact {
      margin: 0;
      padding: 0;
      width: auto;
      display: flex;
      flex-direction: column;
      align-self: stretch;
  }
  #cs-footer-269 .cs-contact-li {
      list-style: none;
      margin-bottom: 0rem;
  }
  #cs-footer-269 .cs-contact-li:last-of-type {
      margin-bottom: 0;
  }
  #cs-footer-269 .cs-contact-link {
      font-size: 1rem;
      text-decoration: none;
      line-height: 1.5em;
      text-align: left;
      color: var(--bodyTextColorWhite);
      display: inline-block;
  }
  #cs-footer-269 .cs-contact-link:hover {
      text-decoration: underline;
  }
  #cs-footer-269 .cs-address {
      font-size: 1rem;
      margin-bottom: 1.25rem;
  }
  #cs-footer-269 .cs-social-group {
      /* pushes away from the other flex items */
      margin-top: auto;
      margin-left: auto;
  }
  #cs-footer-269 .cs-social {
      display: inline-flex;
      justify-content: flex-start;
      gap: 0.75rem;
  }
  #cs-footer-269 .cs-social-link {
      width: 1.5rem;
      height: 1.5rem;
      background-color: #4e4b66;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      transition:
          transform 0.3s,
          background-color 0.3s;
  }
  #cs-footer-269 .cs-social-link:hover {
      background-color: var(--primary);
      transform: translateY(-0.1875rem);
  }
  #cs-footer-269 .cs-social-img {
      height: 0.8125rem;
      width: auto;
      display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-269 .cs-container {
      max-width: 80rem;
      row-gap: 0;
  }
  #cs-footer-269 .cs-logo-group {
      width: auto;
      /* pushes everything to the right of it as far as possible in a flexbox */
      margin-right: auto;
  }
  #cs-footer-269 .cs-text {
      width: 80%;
      max-width: 19.0625rem;
      margin: 0;
  }
  #cs-footer-269 .cs-nav,
  #cs-footer-269 .cs-contact {
      /* 8px - 12px */
      margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #page-header {
      /* 175px - 200px top */
      padding: clamp(10.9375rem, 10vw, 12.5rem) 1rem 6.25rem;
      position: relative;
      z-index: 1;
  }
  #page-header .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;
  }
  #page-header .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;
  }
  #page-header .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #page-header .cs-background:before {
      /* background color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #000;
      opacity: 0.75;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #page-header .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* Makes img tag act as a background image */
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #page-header .cs-background:before {
      opacity: 1;
      background: linear-gradient(
          90.01deg,
          rgba(0, 0, 0, 0.9) 16.86%,
          rgba(0, 0, 0, 0) 100%
      );
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs,
  #RPsbsr {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #RPsbs .cs-container,
  #RPsbsr .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);
    position: relative;
  }
  #RPsbs .cs-content,
  #RPsbsr .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;
  }
  #RPsbs .cs-text,
  #RPsbsr .cs-text {
    margin-bottom: 1rem;
  }
  #RPsbs .cs-text:last-of-type,
  #RPsbsr .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs .cs-card-group,
  #RPsbsr .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #RPsbs .cs-li,
  #RPsbsr .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #RPsbs .cs-li-picture,
  #RPsbsr .cs-li-picture {
    width: 5rem;
    height: 5rem;
    margin: 0;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #RPsbs .cs-li-picture:before,
  #RPsbsr .cs-li-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #RPsbs .cs-li-icon,
  #RPsbsr .cs-li-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #RPsbs .cs-h3,
  #RPsbsr .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);
  }
  #RPsbs .cs-li-text,
  #RPsbsr .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #RPsbs .cs-picture,
  #RPsbsr .cs-picture {
    width: 100%;
    max-width: 40.625rem;
    min-height: 22.625rem;
    border-radius: 0.25rem;
    /* clips img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #RPsbs .cs-picture img,
  #RPsbsr .cs-picture img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit:cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbs .cs-container,
  #RPsbsr .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
  }
  #RPsbs .cs-content,
  #RPsbsr .cs-content {
    width: 50%;
    padding: 2.5rem 0;
  }
  #RPsbs .cs-picture,
  #RPsbsr .cs-picture {
    height: auto;
    width: 55%;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr {
    background-color: #f7f7f7;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbsr .cs-picture {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}

/*-- -------------------------- -->
<---       Full Width           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #FullWidth {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #FullWidth .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 65.375rem;
    margin: auto;
    display: flex;
    flex-direction:row;
    align-items:stretch;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #FullWidth .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 60.375rem;
    display:flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items:flex-start;
  }
  #FullWidth .cs-text {
    margin-bottom: 1rem;
  }
  #FullWidth .cs-li{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #FullWidth .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);
  }
  #FullWidth .cs-li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor); 
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #FullWidth .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }
  #FullWidth .cs-content {
    width: 100%;
    padding: 2.5rem 0;
  }
  #FullWidth .cs-picture {
    height: auto;
    width: 75%;
  }
}
}