/* PAGE-SPECIFIC STYLES FOR THE CONTACT PAGE */
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-1448 {
    padding: var(--sectionPadding);
    /* 200px - 350px */
    padding-top: clamp(12.5rem, 30vw, 21.875rem);
    /* changes to 100px at tablet */
    padding-bottom: 0;
    /* clips the line from causing overflow issues for going off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #banner-1448:before {
    /* textured pattern */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    /* changes to a desktop image at tablet */
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/splatter-bg-m.png");
    background-size: auto;
    background-position: center;
    background-repeat: repeat;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    /* prevents the mouse from interacting with itand also in dev tool mode */
    pointer-events: none;
  }
  #banner-1448 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
    position: relative;
    z-index: 1;
  }
  #banner-1448 .cs-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  #banner-1448 .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(--headerColor);
    position: relative;
  }
  #banner-1448 .cs-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-1448 .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    text-decoration: none;
    color: var(--bodyTextColor);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #banner-1448 .cs-link:last-of-type {
    /* remove the chevron on the last list item */
  }
  #banner-1448 .cs-link:last-of-type::after {
    display: none;
  }
  #banner-1448 .cs-link:after {
    /* chevron */
    content: "";
    width: 0.4375rem;
    height: 0.75rem;
    margin: 0 1rem;
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/grey-chev.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: block;
  }
  #banner-1448 .cs-link.cs-active {
    color: var(--primary);
  }
  #banner-1448 .cs-picture {
    /* we set everything inside of the cs-picture in ems, not rems, so we can use the font size minmax to scale it down.  We use the desktop width and height values and position the elements relative to those dimensions of it. We can then set a max height on the img tag that is the same height as the cs-picture, scale down the cs-picture group with the font size minmax to shrink for mobile, and let it grow until it reaches its final size at desktop.  By doing this it allows us to set the img tag to always try to fill the width of the cs-picture 100%, but can be no taller than 362px, and object fit contain makes sure the image is contained within the dimensions of the parent. Then we center the image with flexbox and its done.  You can swap in any PNG cut out you want and it will fit within the dimensions of the box we defined on the cs-picture. Now our code is TRUELY responsive because our code responds not only to the size of the screen, but also the size of the image you replace our default one with */
    font-size: min(2.2vw, 1em);
    width: 42em;
    height: 22.625em;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #banner-1448 .cs-picture:before {
    content: "";
    width: 42em;
    height: 42em;
    border-radius: 5%;
    background: #e8e8e8;
    opacity: 1;
    position: absolute;
    display: block;
    top: 1.25em;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #banner-1448 .cs-picture img {
    width: 100%;
    height: auto;
    max-height: 22.625em;
    border-radius: 50%;
    object-fit: contain;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner-1448 {
    padding-bottom: 6.25rem;
  }
  #banner-1448 .cs-container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: initial;
  }
  #banner-1448 .cs-content {
    text-align: left;
    width: 40%;
    align-items: flex-start;
  }
  #banner-1448 .cs-picture {
    font-size: min(1.3vw, 1em);
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #banner-1448 .cs-picture {
    margin-left: -1.875rem;
    left: 50%;
    right: auto;
  }
}
/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-strip-324 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #contact-strip-324 .cs-stat-group {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 37.5rem;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
  }
  #contact-strip-324 .cs-item {
    list-style: none;
    width: 18.125rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #contact-strip-324 .cs-item:hover .cs-picture {
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: scale(1.05);
  }
  #contact-strip-324 .cs-picture {
    width: 5rem;
    height: 5rem;
    /* 12px - 20px */
    margin-right: clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.6s;
  }
  #contact-strip-324 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #contact-strip-324 .cs-icon {
    width: 28/16rem;
    height: auto;
  }
  #contact-strip-324 .cs-header,
  #contact-strip-324 .cs-sub-header {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 0.75rem;
    display: block;
  }
  #contact-strip-324 .cs-sub-header {
    font-size: 0.9375rem;
    font-weight: 700;
  }
  #contact-strip-324 .cs-link,
  #contact-strip-324 .cs-hours {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColor);
    display: block;
  }
  #contact-strip-324 .cs-link:hover {
    text-decoration: underline;
  }
  #map-container {
    /* Parent element */
    text-align: center;
  }
  #map-iframe {
    /* The <iframe> */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #contact-strip-324 .cs-stat-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 2rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-strip-324 .cs-stat-group {
    max-width: 80rem;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
}

/*# sourceMappingURL=contact.css.map */