/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-683 {
    padding: var(--sectionPadding);
    /* clips the zigzag graphic so it doesn't cause overflow issues */
    overflow: hidden;
  }
  #sbs-683 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-683 .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;
  }
  #sbs-683 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-683 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-683 .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;
  }
  #sbs-683 .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 0.3s;
  }
  #sbs-683 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-683 .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, 0.75em);
    width: 39.5em;
    height: 51.25em;
    position: relative;
    z-index: 1;
  }
  #sbs-683 .cs-picture {
    width: 19.125em;
    height: 22.5em;
    overflow: hidden;
    display: block;
    position: absolute;
  }
  #sbs-683 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1s ease-out;
  }
  #sbs-683 .cs-picture img:hover {
    transform: scale(1.05);
  }
  #sbs-683 .cs-picture1 {
    top: 5em;
    left: 0;
  }
  #sbs-683 .cs-picture2 {
    top: 0;
    right: 0;
  }
  #sbs-683 .cs-picture3 {
    bottom: 0;
    left: 0;
  }
  #sbs-683 .cs-picture4 {
    bottom: 5em;
    right: 0;
  }
  #sbs-683 .cs-color {
    color: var(--primary);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-683 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #sbs-683 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
}
/*-- -------------------------- -->
<---           Events           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-1778 {
    padding: var(--sectionPadding);
    background-color: #f9f9f9;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #blog-1778 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 49rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    z-index: 1;
  }
  #blog-1778 .cs-topper {
    text-decoration: none;
    color: var(--primary);
  }
  #blog-1778 .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;
  }
  #blog-1778 .cs-title {
    /* max width of 18 characters, includes spaces between words */
    max-width: 23ch;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #blog-1778 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #blog-1778 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, border-color 0.3s;
  }
  #blog-1778 .cs-item:hover .cs-picture img {
    transform: scale(1.05);
  }
  #blog-1778 .cs-picture {
    width: 100%;
    height: 25.8125rem;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #blog-1778 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.6s, opacity 0.3s;
  }
  #blog-1778 .cs-picture::before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.07%, rgba(0, 0, 0, 0) 44.07%, #000 80.27%), rgba(0, 0, 0, 0) 50%/cover no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #blog-1778 .cs-info {
    height: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    color: var(--bodyTextColorWhite);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    bottom: 0;
    z-index: 2;
  }
  #blog-1778 .cs-date {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    margin: 0;
    padding: 0.75rem 1rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    position: absolute;
    top: 0;
    left: 1.5rem;
    z-index: 2;
  }
  #blog-1778 .cs-time {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #blog-1778 .cs-h3 {
    /* 25px - 31px */
    font-size: clamp(1.5rem, 1vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2em;
    /* 3. any additional text beyond the 3 lines will be truncated and replaced with "..." */
    text-overflow: ellipsis;
    margin: 0;
    overflow: hidden;
    color: var(--bodyTextColorWhite);
  }
  #blog-1778 .cs-link {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-decoration: none;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1.6px;
  }
  #blog-1778 .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }
  #blog-1778 .cs-arrow {
    width: 1.25rem;
    height: auto;
    filter: invert(1) brightness(100);
    transition: transform 0.3s;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #blog-1778 .cs-stat-group {
    padding: 0;
  }
  #blog-1778 .cs-stat {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog-1778 .cs-container {
    max-width: 80rem;
  }
  #blog-1778 .cs-item {
    grid-column: span 4;
  }
  #blog-1778 .cs-stat {
    grid-column: span 3;
  }
}

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