/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-843 {
    /* 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-843 .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-843 .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-843 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-843 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.64;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-843 .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-843 .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: -1px;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner-843 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-685,
  #RPsbsr-685 {
    padding: var(--sectionPadding);
    /* clips the zigzag graphic from causing overflow issues */
    overflow: hidden;
  }
  #RPsbs-685 .cs-container,
  #RPsbsr-685 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #RPsbs-685 .cs-content,
  #RPsbsr-685 .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-685 .cs-text,
  #RPsbsr-685 .cs-text {
    margin-bottom: 1rem;
  }
  #RPsbs-685 .cs-text:last-of-type,
  #RPsbsr-685 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs-685 .cs-image-group,
  #RPsbsr-685 .cs-image-group {
    /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 75% of the value on em */
    font-size: min(2.3vw, .75em);
    width: 39.5em;
    height: 51.25em;
    position: relative;
    z-index: 1;
  }
  #RPsbs-685 .cs-picture,
  #RPsbsr-685 .cs-picture {
    width: 19.125em;
    height: 22.5em;
    overflow: hidden;
    display: block;
    position: absolute;
  }
  #RPsbs-685 .cs-picture img,
  #RPsbsr-685 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 40px;
  }
  #RPsbs-685 .cs-picture1,
  #RPsbsr-685 .cs-picture1 {
    top: 5em;
    left: 0;
  }
  #RPsbs-685 .cs-picture2,
  #RPsbsr-685 .cs-picture2 {
    top: 0;
    right: 0;
  }
  #RPsbs-685 .cs-picture3,
  #RPsbsr-685 .cs-picture3 {
    bottom: 0;
    left: 0;
  }
  #RPsbs-685 .cs-picture4,
  #RPsbsr-685 .cs-picture4 {
    bottom: 5em;
    right: 0;
  }
  #RPsbs-685 .cs-graphic,
  #RPsbsr-685 .cs-graphic {
    display: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbs-685 .cs-container,
  #RPsbsr-685 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #RPsbs-685 .cs-image-group,
  #RPsbsr-685 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #RPsbs-685 .cs-graphic,
  #RPsbsr-685 .cs-graphic {
    width: 61.4375em;
    height: auto;
    display: block;
    position: absolute;
    bottom: 10.3125em;
    right: -2em;
    z-index: -1;
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-685 {
    background-color: #f7f7f7;
  }
  #RPsbsr-685 .cs-picture1 {
    top: 0;
    left: 0;
  }
  #RPsbsr-685 .cs-picture2 {
    top: 5em;
    right: 0;
  }
  #RPsbsr-685 .cs-picture3 {
    bottom: 5em;
    left: 0;
  }
  #RPsbsr-685 .cs-picture4 {
    bottom: 0;
    right: 0;
  }
  #RPsbsr-685 .cs-graphic {
    /* flips it horizontally */
    transform: scaleX(-1);
    right: auto;
    left: -2rem;
    /* turns it white */
    filter: brightness(2000%);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbsr-685 .cs-image-group {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-45 {
    padding: var(--sectionPadding);
    position: relative;
    /* Prevents overflow from the image going off screen */
    overflow: hidden;
  }
  #gallery-45 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-45 .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-45 .cs-image-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #gallery-45 .cs-item {
    list-style: none;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    margin: 0;
    position: relative;
    display: block;
  }
  #gallery-45 .cs-item:hover .cs-hover-box {
    opacity: 1;
  }
  #gallery-45 .cs-item:hover .cs-icon {
    /* return to original position */
    transform: rotateY(0);
  }
  #gallery-45 .cs-item:hover .cs-h3 {
    opacity: 1;
    /* Return to original position */
    transform: translateY(0);
  }
  #gallery-45 .cs-item:hover .cs-hover-box-text {
    opacity: 1;
    /* Return to original position */
    transform: translateY(0);
  }
  #gallery-45 .cs-picture {
    margin: auto;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }
  #gallery-45 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 2rem;
  }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-45 .cs-image-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
  }
  #gallery-45 .cs-item {
    grid-column: span 6;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-45 .cs-item {
    grid-column: span 3;
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-322 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #contact-322 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.5em;
    width: 100%;
    max-width: 43.75rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  }
  #contact-322 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3.25rem;
  }
  #contact-322 .cs-content {
    text-align: left;
  }
  #contact-322 .cs-form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-322 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #contact-322 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    border-radius: 0.5rem;
    color: var(--headerColor);
    background-color: #f7f7f7;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-322 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-322 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-322 .cs-submit {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 8vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--accentBlue);
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s;
    border: none;
  }
  #contact-322 .cs-submit:hover {
    background-color: #000;
  }
  #contact-322 .cs-right {
    width: 100%;
    /* 16px - 24px */
    padding: clamp(1rem, 3.5vw, 1.5rem);
    border-radius: 1.5rem;
    background-color: var(--primary);
    display: flex;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* 24px - 32px */
    gap: clamp(1.5rem, 4vw, 2rem);
  }
  #contact-322 .cs-map {
    width: 100%;
    /* 300px - 425px */
    height: clamp(18.75rem, 63.4vw, 26.5625rem);
    border-radius: 1.5rem;
    /* clips the corners of the img tag */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #contact-322 .cs-map:before {
    content: "";
    position: absolute;
    display: block;
    /* 32px - 48px */
    width: clamp(2rem, 4vw, 3rem);
    height: clamp(2rem, 4vw, 3rem);
    background: url("/assets/svgs/pin-red.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    /* 148px - 220px */
    top: clamp(9.25rem, 30.7vw, 13.75rem);
    /* push to the center line of the div */
    left: 50%;
    /* push X amount of pixels from it's current position off the center line */
    margin-left: 0.625rem;
    z-index: 10;
  }
  #contact-322 .cs-map img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #contact-322 .cs-contact-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #contact-322 .cs-item {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #contact-322 .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    font-family: "Arvo", Arial, sans-serif;
  }
  #contact-322 .cs-link,
  #contact-322 .cs-hours {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #contact-322 .cs-link:hover {
    color: var(--secondaryLight);
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #contact-322 .cs-contact-group {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-322 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #contact-322 .cs-content {
    max-width: 32.625rem;
  }
  #contact-322 .cs-title,
  #contact-322 .cs-topper {
    text-align: left;
    margin-left: 0;
  }
  #contact-322 .cs-title {
    max-width: 32.625rem;
  }
  #contact-322 .cs-email,
  #contact-322 .cs-phone {
    width: 48%;
  }
  #contact-322 .cs-button-solid {
    margin-left: 0;
  }
  #contact-322 .cs-right {
    width: 51.6%;
    max-width: 41.125rem;
    /* prevent flexbox from squishing it */
    flex: none;
  }
}