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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
 
  #sbsr-417 {
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    border-bottom: 1px solid #B4B2C7;
    /* clips svg as the screen grows so it doesn't overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbsr-417 .cs-container {
    width: 100%;
    /* changes to 1280 at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-417 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 34.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-417 .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;
  }
  #sbsr-417 .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;
  }
  #sbsr-417 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbsr-417 .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-417 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-417 .cs-ul {
    width: 100%;
    padding: 0;
    margin: 0 0 2rem 0;
    padding-top: 2rem;
    border-top: 2px dashed #B4B2C7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2.25rem;
  }
  #sbsr-417 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 16.5rem;
  }
  #sbsr-417 .cs-h3 {
    /* 16px - 20px */
    font-size: clamp(1rem, 2.3vw, 1.25rem);
    line-height: 1.5em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--primary);
  }
  #sbsr-417 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbsr-417 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbsr-417 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #sbsr-417 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-417 .cs-image-group {
    /* we use ems for this group so the font size scales them all down proportionally */
    font-size: min(2.3vw, 1em);
    width: 39.125em;
    height: 40.4375em;
    /* sends it to the top of the flexbox */
    order: -1;
    position: relative;
  }
  #sbsr-417 .cs-picture {
    border-radius: 1.25em;
    /* clips the img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbsr-417 .cs-picture:before {
    /* Hover Box */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .7;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 10;
    transition: opacity .3s;
  }
  #sbsr-417 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s;
  }
  #sbsr-417 .cs-picture1 {
    width: 13.8125em;
    height: 21.25em;
    top: 3.75em;
    left: 0;
    object-fit: fill !important;
  }
  #sbsr-417 .cs-picture2 {
    width: 23.5em;
    height: 21.25em;
    top: 3.75em;
    right: 0;
  }
  #sbsr-417 .cs-picture3 {
    width: 39.125em;
    height: 13.6875em;
    bottom: 0;
    left: 0;
  }
  #sbsr-417 .cs-person {
    width: auto;
    height: auto;
    overflow: visible;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  #sbsr-417 .cs-person:before {
    display: none;
  }
  #sbsr-417 .cs-person img {
    width: auto;
    height: 40.4375em;
    object-fit: contain;
    position: relative;
  }
  #sbsr-417 .cs-info-box {
    /* 12px - 24px top & bottom */
    padding: clamp(0.75rem, 2vw, 1.5rem) 2.25rem;
    border-radius: 0.75rem 0.75rem 0 0;
    background-color: #fff;
    border-bottom: 4px solid #2BBC2A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }
  #sbsr-417 .cs-job {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: .1em;
    margin-bottom: 0.25rem;
    color: var(--headerColor);
  }
  #sbsr-417 .cs-name {
    /* 20px - 31px */
    font-size: clamp(1.25rem, 1.5vw, 1.9375rem);
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
  }
  #sbsr-417 .cs-graphic {
    width: 100%;
    position: absolute;
    top: 11.375rem;
    bottom: 0;
    left: 0;
    /* flips the svg horizontally */
    transform: scaleX(-1);
    z-index: -1;
  }
  #sbsr-417 .cs-graphic:before {
    /* White Box */
    content: '';
    width: 100%;
    background: #FAFBFC;
    opacity: 1;
    position: absolute;
    display: block;
    /* 110px - 140px */
    top: clamp(6.875rem, 20vw, 8.75rem);
    bottom: 0;
    left: 0;
  }
  #sbsr-417 .cs-graphic-img {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    position: absolute;
    left: 0;
    top: 0;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-417 .cs-container {
    /* added section padding here only for the padding top in case you place it under a section that has a background color other than white.  It would look bad hvaing the grey svg shape touching the edge of the next section. So we add this to create space and account for that.  If the section above this stitch has a white background, you can remove this */
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  #sbsr-417 .cs-content {
    width: 53%;
  }
  #sbsr-417 .cs-image-group {
    font-size: min(1.1vw, 1em);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-417 .cs-graphic {
    background-color: transparent;
    top: 0rem;
  }
  #sbsr-417 .cs-graphic:before {
    /* 230px - 350px*/
    top: clamp(16rem, 26vw, 21.875rem);
  }
  #sbsr-417 .cs-graphic-img {
    /* 60px - 100px */
    top: clamp(3.75rem, 6vw, 6.25rem);
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #sbsr-417 .cs-container {
    align-items: center;
  }
  #sbsr-417 .cs-image-group {
    font-size: 1em;
  }
  #sbsr-417 .cs-graphic::before {
    display: none;
  }
}
/*-- -------------------------- -->
<---           Blog             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-1580 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #blog-1580 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #blog-1580 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #blog-1580 .cs-title {
    max-width: 20ch;
  }
  #blog-1580 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 12.5rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
  }
  #blog-1580 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #blog-1580 .cs-button-solid:hover {
    color: #fff;
  }
  #blog-1580 .cs-button-solid:hover:before {
    width: 100%;
  }
  #blog-1580 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.75rem;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #blog-1580 .cs-item {
    text-align: left;
    list-style: none;
    overflow: hidden;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #blog-1580 .cs-item:hover .cs-picture img {
    opacity: .3;
    transform: scale(1.1);
  }
  #blog-1580 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #blog-1580 .cs-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #blog-1580 .cs-picture {
    width: 100%;
    min-height: 13.75rem;
    /* changes at tablet */
    max-height: 18.75rem;
    height: 100vw;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 3vw, 1.5rem) 0;
    background-color: #1a1a1a;
    overflow: hidden;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  #blog-1580 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #blog-1580 .cs-flex {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
  }
  #blog-1580 .cs-date {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 2rem 0;
    padding: 0.5rem 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #D1D3D4;
    color: #1a1a1a;
    display: inline-block;
    position: absolute;
    left: 1rem;
    bottom: 100%;
    z-index: 2;
  }
  #blog-1580 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    /* 12px - 16px */
    margin: 0 0 clamp(0.75rem, 2vw, 1rem) 0;
    transition: color .3s;
  }
  #blog-1580 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog-1580 .cs-container {
    max-width: 80rem;
  }
  #blog-1580 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #blog-1580 .cs-title {
    margin: 0;
  }
  #blog-1580 .cs-item {
    grid-column: span 4;
  }
  #blog-1580 .cs-picture {
    min-height: 11.25rem;
    /* 180px - 284px */
    height: clamp(11.25rem, 23vw, 17.75rem);
    max-height: 100%;
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    font-weight: 900;
    font-size: min(9vw, 3rem);
    line-height: 1.20833333;
    color: #fff;
    position: relative;
    margin-bottom: 2.25rem;
    text-align: center;
  }
  #cta p {
    color: #fff;
    text-align: center;
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    width: 96%;
    max-width: 37.375rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25rem;
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    content: '';
    position: absolute;
    display: block;
    height: 69.25rem;
    width: 125rem;
    background: url("/assets/svgs/cta-squares.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -3;
  }
  #cta .container {
    width: 90.0625%;
    margin: auto;
  }
  #cta picture {
    width: 90.0625%;
    left: 50%;
    transform: translateX(-50%);
  }
  #cta picture:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .7;
    top: 0;
    left: 0;
    z-index: 1;
  }
}