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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-81 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    /* Centers button */
    text-align: center;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: clamp(9rem, 25.95vw, 18.75rem) 1rem 0;
    /* 130px - 450px */
    padding-bottom: clamp(12.125rem, 30.95vw, 28.125rem);
    position: relative;
    z-index: 1;
    /* Prevents white rectangle pseudos from overlapping the sections below */
    overflow: hidden;
	height: 62vh;
  }
  #hero-81:before {
    /* Left side of the triangle */
    content: '';
    width: 31.25rem;
    /* make really long so it covers the whole screen all the way to desktop */
    height: 250rem;
    background: #fff;
    opacity: 1;
    transform: rotate(-67deg);
    transform-origin: center;
    position: absolute;
    display: block;
    bottom: -139.6875rem;
    /* this makes the right edge sit at the 50% line at all times */
    right: 50%;
    z-index: 0;
  }
  #hero-81:after {
    /* Right side of the triangle */
    content: '';
    width: 31.25rem;
    height: 250rem;
    background: #fff;
    opacity: 1;
    transform: rotate(67deg);
    transform-origin: center;
    position: absolute;
    display: block;
    bottom: -139.6875rem;
    /* this makes the left edge sit at the 50% line at all times */
    left: 50%;
    z-index: 0;
  }
  #hero-81 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-81 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-81 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
	#hero-81 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
  }
  #hero-81 .cs-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
	
	#hero-81 .cs-topper {
    /* 16px - 31px */
    font-size: clamp(1rem, 4.3vw, 1.9375rem);
	text-transform: none;
	font-weight: normal;
	letter-spacing: normal;
    white-space: nowrap;
    line-height: 1.2em;
    width: 100%;
    /* 12px - 24px */
    margin: 0 0 clamp(0.75rem, 3vw, 1.5rem);
    color: var(--bodyTextColorWhite);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 1rem;
  }
  #hero-81 .cs-topper:before {
    /* left line */
    content: '';
    width: 100%;
    max-width: 6.25rem;
    height: 2px;
    background: var(--gold1);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-81 .cs-topper:after {
    /* right line */
    content: '';
    width: 100%;
    max-width: 6.25rem;
    height: 2px;
    background: var(--flippedGold1);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-81 .cs-logo {
    width: 100%;
    max-width: 38.375rem;
    margin: 0 0 1.5rem 0;
    display: block;
  }
  #hero-81 .cs-logo img {
    width: 100%;
    height: auto;
  }
  #hero-81 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    /* 16px - 24px */
    margin: 0 auto clamp(1rem, 4vw, 1.5rem);
    color: #fff;
    position: relative;
  }
  #hero-81 .cs-title:after {
    /* Divider Line */
    content: '';
    /* 60px - 100px */
    width: clamp(3.75rem, 9.5vw, 6.25rem);
    /* 4px - 8px */
    height: clamp(0.25rem, 0.8vw, 0.5rem);
    /* 16px - 24px */
    margin: clamp(1rem, 4vw, 1.5rem) auto clamp(1rem, 4vw, 1.5rem);
    background: var(--primary);
    opacity: 1;
    position: relative;
    display: block;
  }
  #hero-81 .cs-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 1.95vw, 1.5625rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 800px */
    max-width: clamp(29rem, 60vw, 50rem);
    margin: 0 auto;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: #fff;
	font-weight: normal;
  }
	#hero-81 .cs-text {
		font-weight: normal;
	}
	
  #hero-81 .cs-button-solid {
    color: white;
    background: var(--gold1);
	box-shadow: 0px 0px 150px darkgoldenrod;
	}
	
	

	

	
}
/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 81.25rem) {
  #hero-81 {
/*    background: url("https://csimg.nyc3.digitaloceanspaces.com/Hero/kitchen.jpg");*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* makes the parallax effect */
    background-attachment: fixed;
	height: auto;
  }
  #hero-81 .cs-background img {
/*    display: none;*/
  }
	#hero-81 .cs-text{
		max-width: clamp(29rem, 60vw, 30rem);
	}
}

/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #h-services-81 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    /* 40px - 100px */
    padding: 0 1rem clamp(2.5rem, 7.9vw, 6.25rem) 1rem;
    position: relative;
    /* give a higher z index than the hero so it can sit on top */
    z-index: 10;
  }
  #h-services-81 .cs-card-group {
    width: 100%;
    max-width: 29.0625rem;
    margin: 0 auto 0;
    /* negative margin pulls it up on top of the hero section */
    /* -46px to -76px - we're calculating whatever clamp is and multiplying by -1
            to make the value negative since clamp doesn't work with negative values */
    margin-top: calc(clamp(5rem, 13vw, 4.75rem)*-1);
    /* 40px - 60px top and bottom, 16px - 60px left & right */
    padding: clamp(2.5rem, 4.7vw, 3.75rem) clamp(1rem, 4vw, 3.75rem);
    box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0.3125rem;
    border-top: 8px solid var(--primary);
    background-color: #fff;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
  }
  #h-services-81 .cs-item {
    list-style: none;
    margin: 0 auto 2.5rem;
    width: 100%;
    max-width: 22.5rem;
  }
  #h-services-81 .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #h-services-81 .cs-icon {
    /* 68px - 88px */
    width: clamp(4.25rem, 8.8vw, 5.5rem);
    /* 68px - 88px */
    height: clamp(4.25rem, 8.8vw, 5.5rem);
    margin: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 5vw, 1.5rem);
    background: var(--gold2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
	box-shadow: 0px 0px 5px gold;
  }
  #h-services-81 .cs-icon img {
    /* 44px - 52px */
    width: clamp(2.75rem, 5.8vw, 3.25rem);
    height: auto;
	filter: invert(100%);
  }
  #h-services-81 .cs-title {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto 0.5rem;
    color: var(--headerColor);
	font-weight: 700;
  }
  #h-services-81 .cs-text {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    max-width: 22.5rem;
    margin: 0 auto;
    color: var(--bodyTextColor);
  }

  #h-services-81 .cs-price {
    font-size: 1rem;
    text-align: center;
    line-height: 1.5em;
    max-width: 22.5rem;
    margin: 0 auto;
    color: black;
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5em;
	font-weight: 700;
	text-transform: uppercase;
  }
	
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #h-services-81 .cs-card-group {
    max-width: 80rem;
    /* -76px to -320px - we're calculating whatever clamp is and multiplying by -1
               to make the value negative since clamp doesn't work with negative values */
    margin-top: calc(clamp(4.75rem, 20vw, 20rem)*-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 2.5rem;
  }
  #h-services-81 .cs-item {
    /* Reset margin so it doesn't interfere with flexbox */
    margin: 0;
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-483 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
  }
  #gallery-483 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 8px - 20px */
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #gallery-483 .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #gallery-483 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
  }
  #gallery-483 .cs-cta {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    text-decoration: none;
    /* 16px - 20px */
    text-align: center;
    /* 141px - 224px */
    width: clamp(8.8125rem, 17vw, 14rem);
    height: clamp(8.8125rem, 17vw, 14rem);
    margin: 0 auto 0 0;
    /* 141px - 224px */
    /* copied the same height clamp and multiplied it by -.5 so the value is negtaive and half the vlaue of height so we cna make it overlap by 50% its height */
    margin-bottom: calc(clamp(8.8125rem, 17vw, 14rem)*-.5);
    background: var(--hflippedGold2);
    color: black;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    border: clamp(12px, 3vw, 20px) solid #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: flex-end;
    position: relative;
    z-index: 10;
    transition: background-color 0.3s;
  }
  #gallery-483 .cs-cta:hover {
    background-color: #14142B;
  }
  #gallery-483 .cs-cta:hover .cs-arrow {
    transform: translateX(3.75rem);
    opacity: 0;
  }
  #gallery-483 .cs-cta:hover .cs-cta-text {
    transform: translateY(-0.9375rem);
  }
  #gallery-483 .cs-arrow {
    width: 2.5rem;
    height: auto;
    transition: transform .3s, opacity .3s;
	filter: invert(100%);
  }
  #gallery-483 .cs-cta-text {
    transition: transform .3s;
  }
  #gallery-483 .cs-content-picture {
    width: 100%;
    height: 19.375rem;
    border-radius: 0.75rem;
    /* clips the img corners */
    overflow: hidden;
    display: block;
    position: relative;
	box-shadow: 0px 0px 5px;
  }
  #gallery-483 .cs-content-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it behave like a background image */
    object-fit: cover;
  }
  #gallery-483 .cs-grid {
    display: grid;
    /* 12 so we can have rows of 3 and rows with 2 50/50 images */
    grid-template-columns: repeat(12, 1fr);
    /* 8px - 20px */
    grid-gap: clamp(0.5rem, 2vw, 1.25rem);
    grid-template-rows: repeat(20, 1fr);
  }
  #gallery-483 .cs-picture {
    border-radius: 0.5rem;
    /* clips corners of img tags */
    overflow: hidden;
    position: relative;
    display: block;
	box-shadow: 0px 0px 5px;
  }
  #gallery-483 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image behave like a background image */
    object-fit: cover;
  }
  #gallery-483 .cs-picture1 {
    grid-column: 1 / 7;
    grid-row: 1 / 12;
  }
  #gallery-483 .cs-picture2 {
    grid-column: 7 / 13;
    grid-row: 1 / 14;
  }
  #gallery-483 .cs-picture3 {
    grid-column: 1 / 7;
    grid-row: 12 / 21;
  }
  #gallery-483 .cs-picture4 {
    grid-column: 7 / 13;
    grid-row: 14 / 21;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-483 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  #gallery-483 .cs-content {
    max-width: 39.375rem;
    justify-content: flex-end;
  }
  #gallery-483 .cs-text {
    width: 85%;
  }
  #gallery-483 .cs-grid {
    width: 50%;
    max-width: 39.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #gallery-483 .cs-content-picture {
    /* 229px - 532px */
    height: clamp(14.3125rem, 38vw, 33.25rem);
    aspect-ratio: 1.18;
  }
  #gallery-483 .cs-picture1 {
    grid-column: 1 / 7;
    grid-row: 1 / 13;
  }
  #gallery-483 .cs-picture2 {
    grid-column: 7 / 13;
    grid-row: 1 / 9;
  }
  #gallery-483 .cs-picture3 {
    grid-column: 1 / 7;
    grid-row: 13 / 21;
  }
  #gallery-483 .cs-picture4 {
    grid-column: 7 / 13;
    grid-row: 9 / 21;
  }
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
	
	
  #reviews-510 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    /* centers the button */
    text-align: center;
    padding: var(--sectionPadding);
    /* clips the orbs from causing overflow issues */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #reviews-510 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-510 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 77.25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }

  #reviews-510 .cs-text {
    /* cs-text override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This second cs-text is a section specific override that stays inside this stitch */
    opacity: .8;
  }
  #reviews-510 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-510 .cs-item {
    list-style: none;
    text-align: left;
    max-width: 44.375rem;
    /* 16px - 40px top & bottom */
    /* 16px - 60px left & right */
    padding: clamp(1rem, 3.15vw, 2.5rem) clamp(1rem, 5vw, 3.75rem);
    /* 24px - 48px */
    padding-bottom: clamp(1.5rem, 6vw, 3rem);
    background-color: #F7F7F7;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    /* clips the pseudo box from overflowing */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-510 .cs-item:before {
    content: '';
    width: 100%;
    height: 0.75rem;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
  }

	#reviews-510 .cs-item.primary:before{
		background: var(--gold2);
		box-shadow: 0px 0px 50px gold;
	}
	
	#reviews-510 .cs-item.secondary:before{
		background: var(--hflippedGold2);
		box-shadow: 0px 0px 50px gold;
	}
	
  #reviews-510 .cs-quote {
    width: 2.5rem;
    height: auto;
    /* 16px - 32px */
    margin-bottom: clamp(1rem, 2vw, 2rem);
    display: block;
  }
  #reviews-510 .cs-item-text {
    /* 14px - 25px */
    font-size: clamp(0.875rem, 1.6vw, 1.5625rem);
    line-height: 1.5em;
    margin: 0;
    /* 24px - 44px */
    margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
    color: var(--bodyTextColor);
  }
  #reviews-510 .cs-flex-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 12px - 24px */
    gap: clamp(0.75rem, 3vw, 1.5rem);
  }
  #reviews-510 .cs-profile {
    /* 36px - 72px */
    width: clamp(2.25rem, 7vw, 4.5rem);
    height: clamp(2.25rem, 7vw, 4.5rem);
    margin: 0;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews-510 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-510 .cs-name {
    /* 16px - 31px */
    font-size: clamp(1rem, 2.5vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews-510 .cs-job {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: #746F95;
    display: block;
  }
  #reviews-510 .cs-button-solid {
    background: var(--gold2);
  }
	
  #reviews-510 .cs-stars {
    /* 169px - 189px */
    width: clamp(10.5625rem, 20vw, 11.8125rem);
    height: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-510 .cs-container {
    max-width: 90rem;
  }
  #reviews-510 .cs-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #reviews-510 .cs-title {
    margin: 0;
  }
  #reviews-510 .cs-text {
    width: 50%;
    margin: 0;
  }
  #reviews-510 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-954 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
  }
  #sbsr-954 .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);
  }
  #sbsr-954 .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;
  }

  #sbsr-954 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbsr-954 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-954 .cs-button-solid {
    background: var(--hflippedGold2);
  }

  #sbsr-954 .cs-image-group {
    width: 100%;
    max-width: 40.625rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #sbsr-954 .cs-picture {
    width: 100%;
    grid-column: span 12;
    position: relative;
  }
  #sbsr-954 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-954 .cs-picture1 {
    height: 26.25rem;
  }
  #sbsr-954 .cs-picture2 {
    height: 21.75rem;
  }
  #sbsr-954 .cs-flex {
    width: 100%;
    /* breaks up the container so the browser treats its children as if they are not inside this container. They are considered children of the .cs-image-group and makes it easier to space everything this way on mobile */
    display: contents;
  }
  #sbsr-954 .cs-contact-group {
    width: 100%;
    margin: 0;
    /* 24px - 40px */
    padding: clamp(1.5rem, 3vw, 2.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #1A1A1A;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    grid-column: span 12;
  }
  #sbsr-954 .cs-link {
    text-decoration: none;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #484848;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }
  #sbsr-954 .cs-link:hover .cs-wrapper {
    transform: scale(1.2);
  }
  #sbsr-954 .cs-link:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  #sbsr-954 .cs-wrapper {
    /* 44px - 56px */
    width: clamp(2.75rem, 4.3vw, 3.5rem);
    height: clamp(2.75rem, 4.3vw, 3.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    transition: transform .3s;
  }
  #sbsr-954 .cs-wrapper:before {
    /* light grey circle that animates on hover */
    content: '';
    width: 100%;
    height: 100%;
    background: #484848;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s, height .3s;
  }
  #sbsr-954 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
    transition: transform .3s;
  }
  #sbsr-954 .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #sbsr-954 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #sbsr-954 .cs-link-content {
    font-size: 0.875rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: .8;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-954 .cs-image-group {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-954 .cs-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #sbsr-954 .cs-contact-group {
    /* 32px - 64px */
    margin-bottom: clamp(2rem, 6vw, 4rem);
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbsr-954 .cs-picture1 {
    width: 100%;
    height: auto;
    /* 32px - 64px */
    margin-top: clamp(2rem, 6vw, 4rem);
  }
  #sbsr-954 .cs-flex {
    /* 267px - 325px */
    width: clamp(16.6875rem, 25vw, 20.3125rem);
    /* prevents flexbox from squishing it */
    flex: none;
    /* sends it to the far left */
    order: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-954 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sbsr-954 .cs-image-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Large Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #sbsr-954 .cs-floater {
    width: 27.8125rem;
    height: auto;
    display: block;
    position: absolute;
    left: -3.125rem;
    top: 1.25rem;
    transform: scaleX(-1);
  }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #ContactFAQ-721 {
    position: relative;
    overflow: hidden;
  }
  #ContactFAQ-721 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #ContactFAQ-721 .cs-content {
    text-align: left;
    max-width: 33.8125rem;
    /* move section padding to the cs-content so we can make the cs-picture full width */
    padding: var(--sectionPadding);
    padding-top: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
  }
  #ContactFAQ-721 .cs-title {
    /* cs-title override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This second cs-text is a section specific override that stays inside this stitch */
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 0 1.5rem 0;
  }
  #ContactFAQ-721 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #ContactFAQ-721 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
    transition: border-bottom 0.3s;
  }
  #ContactFAQ-721 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #ContactFAQ-721 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 1;
  }
  #ContactFAQ-721 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px */
    padding: clamp(1rem, 2.3vw, 1.5rem) 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #ContactFAQ-721 .cs-button:hover {
    cursor: pointer;
  }
  #ContactFAQ-721 .cs-button:before {
    /* left line */
    content: '';
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform .5s;
  }
  #ContactFAQ-721 .cs-button:after {
    /* right line */
    content: '';
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform .5s;
  }
  #ContactFAQ-721 .cs-button-text {
    width: 90%;
    display: block;
  }
  #ContactFAQ-721 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #ContactFAQ-721 .cs-graphic {
    width: 22.5625rem;
    height: auto;
    opacity: .5;
    display: none;
    position: absolute;
    left: -11.25rem;
    bottom: 1.875rem;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
  #ContactFAQ-721 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    z-index: 1;
  }
  #ContactFAQ-721 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #ContactFAQ-721 {
    /* moved seciton padding back to the section */
    padding: var(--sectionPadding);
  }
  #ContactFAQ-721 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #ContactFAQ-721 .cs-picture {
    width: 50%;
    max-width: 40.625rem;
    /* 500px - 750px */
    height: clamp(31.25rem, 68vw, 46.875rem);
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #ContactFAQ-721 .cs-content {
    width: 55%;
    padding: 0;
  }
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
  #ContactFAQ-721 .cs-graphic {
    display: block;
  }
}