@import url('https://cmsv2-shared-assets.apptegy.net/Global/Components/custom-social-icons/social-round-icons.css');
#app {
  --primary-color-light: color-mix(in srgb, var(--primary-color), #fff 15%);
  --primary-color-transparent: rgba(0, 87, 173, 0.7);
  --secondary-color-light: color-mix(in srgb, var(--secondary-color), #fff 15%);
  --secondary-color-lighter: color-mix(
    in srgb,
    var(--secondary-color),
    #fff 75%
  );
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  --side-padding: clamp(2rem, -5.915rem + 12.165vw, 6.25rem);

  --border-radius: 8px;

  --family-primary: 'calibri', Helvetica, Arial, sans-serif;
  --family-secondary: 'rockwell-nova', sans-serif;

  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-light: 300;
  --font-italic: italic;

  --color-gray: #4d515a;
  --color-grey: #4d515a;
  --color-gray-lighter: #f3f4f6;
  --color-grey-lighter: #f3f4f6;
  --color-gray-lightest: #f6fcff;
  --color-grey-lightest: #f6fcff;
}

#app,
body,
html,
button {
  font-family: var(--family-primary) !important;
  --font-family: var(--family-primary) !important;
}

* {
  font-family: var(--family-primary);
  -webkit-font-smoothing: antialiased;
}

.custom-section *,
.custom-section *::before,
.custom-section *::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  list-style-type: none;
  padding-left: 0px;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* explore dropdown */
#explore-menu {
  min-width: 300px;
  max-height: 600px;
  padding: 15px 45px;
}

#explore-menu.dropdown ul li {
  margin-top: 25px;
}

/* Banner section */
#g2 > div > div.text {
  bottom: 20px;
  gap: var(--spacing-lg);

  .description {
    margin-top: 0px;
  }
}

@media only screen and (min-width: 960px) {
  .img-slider,
  .video-wrapper,
  .responsive-image img,
  .video {
    min-height: 500px;
  }

  #g2 > div > div.text {
    left: var(--side-padding);
    right: auto;
    transform: none;
    bottom: 120px;

    & .title,
    & .description {
      margin-inline: 15px;
    }
  }
}
@media only screen and (min-width: 960px) {
  #cms-gallery .pause,
  #cms-gallery .play {
    left: auto;
    right: var(--side-padding);
    bottom: 32%;
  }
}
@media only screen and (min-width: 1280px) {
  #cms-gallery .pause,
  #cms-gallery .play { 
    bottom: 120px;
  }
}

#galleryheading {
  color: var(--primary-color);
  font-size: clamp(1.875rem, 0.188rem + 2.813vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  word-wrap: break-word;
}

#g2 > div > div.text > div.description > div > p {
  max-width: 710px;
  color: var(--color-gray);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  word-wrap: break-word;
}

.text .quote-text {
  margin: 0px 14px;
  display: block;

  .text {
    background-color: var(--primary-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    color: var(--primary-color-contrast);
    font-weight: 700;
    font-size: 17px;
  }

  .text span {
    white-space: normal !important;
  }

  .author {
    color: var(--color-gray);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    font-style: normal;
    line-height: 21px;
    word-wrap: break-word;
    padding-top: var(--spacing-md);
  }
}

.quote-text:before {
  content: '';
  background-image: url('Images/Icons/quote.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 46px;
  height: 32px;
  display: block;
  margin-bottom: 16px;
}

/* Buttons section */
.custom-buttons.custom-section {
  padding-block: 40px;
}

.custom-buttons .wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  column-gap: var(--spacing-xl);
  /* Adjust the gap between items as needed */
  row-gap: var(--spacing-lg);

  & > *:first-child {
    margin-top: -12px;
  }

  & > * {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    gap: 10px;

    .button-text,
    .button-text a {
      color: var(--color-gray);
      font-size: 20px;
      font-weight: var(--font-weight-bold);
      line-height: 30px;
      word-wrap: break-word;
      text-align: center;
      text-decoration: none;
    }

    .button-icon {
      color: var(--primary-color);
        
        & svg {
             min-width: 72px;
             height: 72px;
            
            & path {
                 fill: #9CA3AF;
            }
        }
    }
  }

  & > *:hover .button-text {
    color: var(--primary-color);
    text-decoration: underline;
  }

  & > *:hover .button-icon svg path {
    fill: var(--secondary-color);
  }
}

/* parallax-section */
.parallax-section.custom-section {
  width: 100%;
  height: 480px;
  position: relative;

  .wrapper {
    .parallax-image {
      position: relative;
      display: block;
      background-image: url('https://public-apptegy-assets.s3.us-east-2.amazonaws.com/apptegy-cms-theme-preview-images/students.jpeg');
      background-size: cover;
      background-attachment: fixed;
      background-repeat: no-repeat;
      height: 480px;
      width: 100%;
    }

    .parallax-image::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
      z-index: 1;
    }

    .parallax-title {
      position: absolute;
      top: 0;
      left: var(--spacing-xl);
      z-index: 20;
      width: 100%;
      max-width: 40%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      padding: 80px var(--side-padding);
      color: var(--secondary-color);
      font-weight: var(--font-weight-bold);
      font-size: 48px;
      line-height: 48px;
      word-wrap: break-word;
    }
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    background-image: url(./Images/home/parallax-frame.svg);
    background-position: left;
    object-fit: contain;
    background-repeat: no-repeat;
  }
}

/* By the numbers section */
.by-the-numbers-section {
  background-color: var(--primary-color);
  width: 100vw;
  padding: 80px 0px;

  .see-all-container {
    #by-the-numbers-section-title {
      h2 {
        color: var(--primary-color-contrast) !important;
      }
    }
  }
}

.by-the-numbers-container {
  background-color: var(--primary-color);
  display: flex;
  padding: 0;

  & > div {
    flex: 1 1 0;
    padding-left: var(--spacing-xxl);
    padding-right: var(--spacing-xxl);
    border-right: 2px rgba(124, 196, 229, 0.32) solid;
    flex-direction: column;

    .by-the-numbers-item__icon {
      width: 80px;
      height: 80px;
      border: 2px var(--secondary-color-light) solid;
      justify-content: center;
      align-items: center;
      display: inline-flex;
    }

    .by-the-numbers-item__number {
      color: var(--primary-color-contrast);
      font-size: 48px;
      font-weight: var(--font-weight-bold);
      line-height: 48px;
      word-wrap: break-word;
      padding-top: var(--spacing-xl);
    }

    .by-the-numbers-item__text {
      color: var(--primary-color-contrast);
      font-size: 20px;
      font-weight: var(--font-weight-bold);
      line-height: 1.2;
      word-wrap: break-word;
    }
  }

  & > div:last-child {
    border-right: none;
  }
}

/* Events section */
.events-section.custom-section {
  --date-height: 104px;
  position: relative;
  padding-top: 380px;
  max-width: 100%;
  overflow: hidden;

  .upcoming-events-image {
    position: absolute;
    height: 480px;
    width: 100%;
    top: 0;

    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 20.25%,
        rgba(0, 0, 0, 0.64) 100%
      );
    }

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      object-position: center;
    }
  }

  .see-all-container {
    position: absolute;
    top: 250px;
    padding: 0px var(--side-padding);
    width: auto;
    display: flex;
    align-items: center;

    h2 {
      color: #fff;
      font-size: 40px;
      font-weight: var(--font-weight-bold);
      line-height: 48px;
      word-wrap: break-word;
      padding-bottom: var(--spacing-md);
      padding-right: var(--spacing-lg);
      margin-right: var(--spacing-lg);
      border-right-color: #fff !important;
    }

    .see-all-button {
      display: flex;
      margin: 0;
      padding: 16px 20px;
      border-radius: 6px;
      border: 1px transparent solid;
      background: var(--color-gray-lighter);
      justify-content: center;
      align-items: center;
      text-align: center;
      color: var(--color-gray);
      font-size: 24px;
      font-weight: var(--font-weight-bold);
      line-height: 24px;
      word-wrap: break-word;
      text-decoration: none;
      height: max-content;

      &:hover {
        border: 1px var(--secondary-color) solid;
        background-color: var(--secondary-color-light);
        text-decoration: none;
      }
    }
  }

  .events-section-container {
    /* width: 100%; */
    height: 100%;
    margin-inline: var(--side-padding);
    box-sizing: border-box;
    padding-bottom: 20px;

    #events-section {
      display: flex;
      /* gap: var(--spacing-xl); */
      /* overflow-x: auto; */ 
      padding-top: 10px;

      .event-item {
        position: relative;
        display: flex;
        /* flex: 1 1 0; */
        /* height: 100%; */
        /* min-width: 240px; */
        flex-direction: column;
        background-color: #ffffff;
        justify-content: flex-start;
        align-items: flex-start;        
        padding-top: var(--date-height);  
        border: 2px var(--color-gray-lighter) solid; 

        .event-item__date:first-child {
          position: absolute;
          top: -16px;
          left: -16px;
          width: 104px;
          height: 104px;
          background: var(--primary-color);
          display: flex;
          justify-content: center;
          align-items: center;

          .start-date {
            display: flex;
            flex-direction: column;

            .date-month {
              align-self: stretch;
              text-align: center;
              color: white;
              font-size: 16px;
              font-weight: var(--font-weight-bold);
              line-height: 24px;
              word-wrap: break-word;
              text-transform: uppercase;
            }

            .date-day {
              text-align: center;
              color: white;
              font-size: 40px;
              font-weight: var(--font-weight-bold);
              line-height: 100%;
              word-wrap: break-word;
            }
          }
        }

        .event-item_details {
          display: flex;
          flex-direction: column;
          margin: var(--spacing-lg);
          margin-bottom: 0px;
          padding-bottom: var(--spacing-lg);
          border-bottom: 2px var(--color-gray-lighter) solid;

          .event-item__title > a {
            color: var(--color-gray);
            text-decoration: none;
          }

          .event-item__title:hover > a {
            text-decoration: underline;
          }

          .event-item__date {
            color: var(--primary-color);
            font-size: 16px;
            font-weight: var(--font-weight-bold);
            line-height: 24px;
            word-wrap: break-word;
          }
        }

        .event-item_details:last-child {
          border-bottom: none;
        }
      }

      .event-item:hover {
        background-color: var(--color-gray-lightest);
        border-color: var(--secondary-color-light);
      }
    }
  }
  .swiper-pagination-custom-events {
    text-align: center;
    margin-top: 30px;

    & span {
      width: 10px;
      height: 10px;
    }
  }
  .custom-swiper-navigation {
      display: flex;
  }
  .custom-swiper-navigation:has(.custom-swiper-prev.swiper-button-disabled):has(.custom-swiper-next.swiper-button-disabled) {
    display: none;
  }
  .custom-swiper-prev.swiper-button-disabled,
  .custom-swiper-next.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
  }
  .custom-swiper-navigation .custom-swiper-prev, .custom-swiper-navigation .custom-swiper-next { 
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-left: 5px;
    margin-right: 5px;
}
  .custom-swiper-controls .custom-swiper-navigation>div {
    width: clamp(1.563rem, 0rem + 2.083vw, 2.5rem); /* 40>25, 1920>1200 */
    height: clamp(1.563rem, 0rem + 2.083vw, 2.5rem);
    font-size: clamp(0.375rem, -0.146rem + 0.694vw, 0.688rem);
    position: absolute;
    top: 500px;
    /* transform: translateY(-50%); */
    cursor: pointer;
  }
  .custom-swiper-navigation .custom-swiper-prev {
    left: 0;
  }
  .custom-swiper-navigation .custom-swiper-next {
    right: 0;
  }
  .custom-swiper-controls .custom-swiper-navigation>div {
    color: #333;

    &:hover {
      color: var(--primary-color);
    }
  }
  .custom-swiper-navigation .custom-swiper-prev:after, .custom-swiper-navigation .custom-swiper-next:after {
      content: "";
      width: 1em;
      height: 1em;
      border: solid currentColor;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 1em;
      z-index: 2;
  }
  .custom-swiper-navigation .custom-swiper-prev:after {
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
  }
  .custom-swiper-navigation .custom-swiper-next:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
}
@media only screen and (max-width: 780px) {
  .events-section.custom-section {
    padding-top: 420px;

    & .events-section-container {
      margin-inline: 32px;
    }
  }
}

.footer-social.custom-section {
  margin-top: 80px;
  width: 100%;

  .social-media-container {
    display: flex;
    width: 100%;
    gap: var(--spacing-sm);
    flex-direction: row;
    padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    align-items: stretch;

    .col {
      display: flex;
      flex-grow: 1;
      padding: var(--spacing-xl) var(--spacing-xxxl);
      align-items: center;
      width: 100%;
      flex-direction: row;
    }

    .col:first-child {
      background-color: var(--primary-color);

      .text {
        color: #ffffff;
        font-size: 28px;
        font-family: var(--family-secondary);
        font-weight: var(--font-weight-regular);
        line-height: 40px;
        word-wrap: break-word;
      }

      .text span {
        font-family: var(--family-secondary);
        font-weight: var(--font-weight-regular);
      }
    }

    .col:last-child {
      background-color: var(--secondary-color);
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .text {
        font-size: 28px;
        font-family: var(--family-secondary);
        font-weight: var(--font-weight-regular);
        line-height: 40px;
        word-wrap: break-word;
        color: var(--secondary-color-contrast);
      }
    }
  }

  .app-container {
    padding: 0px var(--spacing-sm);
    width: 100%;
    height: 100%;
    min-height: 362px;

    .container-background {
      background-color: var(--color-gray-lighter);
      display: flex;
      flex-direction: row;
      height: 100%;

      .text {
        display: flex;
        flex: 1 1 0;
        min-width: 65%;
        align-self: stretch;
        flex-direction: column;
        padding: 80px var(--side-padding);
        gap: var(--spacing-md);

        .app-title {
          color: var(--primary-color);
          font-size: 32px;
          font-family: var(--family-secondary);
          line-height: 48px;
          word-wrap: break-word;
        }

        .app-description {
          display: block;
          color: var(--color-gray);
          font-size: 18px;
          line-height: 22.32px;
          word-wrap: break-word;
          width: 65%;
        }

        .app-links > a:first-child {
          margin-right: var(--spacing-sm);
        }
      }

      .image {
        display: flex;
        width: 100%;
        align-items: flex-end;
        justify-content: flex-end;
        background-color: var(--color-gray-lighter);
        padding-right: var(--side-padding);
      }

      .image > img {
        width: 100%;
        max-height: calc(100% - 25px);
        object-fit: contain;
      }
    }
  }
}
#view-footer .footer-social.custom-section {
  margin-top: 0;
}
@media only screen and (max-width: 600px) {
  .footer-social.custom-section .social-media-container .col {
    padding: 10px 25px;
    text-align: center;
    flex-direction: column !important;

    &:first-child .text {
      font-size: 20px;
      line-height: 1.5;
    }
  }

  .footer-social.custom-section {
    & .app-container {
      & .container-background {
        .text {
          padding-top: 25px;
          text-align: center;

          .app-title {
            font-size: 20px;
            line-height: 1.4;
          }

          .app-description {
            width: 100%;
          }
        }
      }
    }
  }
}

/* Section headers */
#home .main {
  max-width: 100%;
  overflow: hidden;
}

#home .see-all-container.see-all-top {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  /* gap: var(--spacing-lg); */
  display: inline-flex;
  /* padding-left: 80px;
  padding-right: 80px;  */
  padding-bottom: 40px;
  margin-bottom: 0;
  box-sizing: border-box;
}

#home .see-all-container h2 {
  color: var(--primary-color);
  font-size: 40px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  word-wrap: break-word;
  border-right: 4px var(--secondary-color) solid;
  padding-right: var(--spacing-lg);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  margin-right: var(--spacing-lg);
  text-transform: uppercase;
}
.kent-school-district #home .see-all-container h2 {
  color: var(--color-gray);
}
#by-the-numbers-section-title h2 {
  text-transform: none !important;
}

#home .see-all-container .see-all-button:not(:has(a)),
#home .see-all-container .see-all-button a {
  display: flex;
  margin: 0;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md) 20px;
  border-radius: 6px;
  border: 1px transparent solid;
  background: var(--color-gray-lighter);
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-gray);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 24px;
  word-wrap: break-word;
  text-decoration: none;
}

#home .see-all-container .see-all-button:not(:has(a)):hover,
#home .see-all-container .see-all-button a:hover {
  border: 1px var(--secondary-color) solid;
  background-color: var(--secondary-color-lighter);
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
  #home .see-all-container h2 {
    border: 0;
    padding: 0;
    margin-right: 0;
  }

  #home .see-all-container.see-all-bottom {
    margin-top: 20px;

    a {
      margin-top: 0;
    }
  }
}

/* news-section */
.news-section.custom-section {
  padding: 80px 0px;
}

#news-articles-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  grid-template-rows: auto;
  gap: var(--spacing-lg);

  .news-article {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-md);
    display: inline-flex;
    text-decoration: none;

    .news-article__image {
      position: relative;
      border-top: 4px solid var(--secondary-color);
      width: 100%;

      .cover-image > img {
        object-fit: cover;
        width: 100%;
        object-position: top center;
        aspect-ratio: 2 / 1;
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-height: 0px;
        background-color: var(--primary-color-transparent);
        transition: max-height 0.3s ease;
        overflow: hidden;
        content: '';
        opacity: 0.6;
      }
    }

    .news-article__title {
      align-self: stretch;
      color: var(--primary-color);
      font-size: 20px;
      font-weight: var(--font-weight-bold);
      line-height: 28px;
      word-wrap: break-word;
    }

    .news-article__snippet {
      height: 96px;
      color: var(--color-gray);
      font-size: 18px;
      line-height: 24px;
      word-wrap: break-word;
      line-clamp: 4;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }
  }

  .news-article:hover .news-article__image::after {
    border-top: 4px var(--secondary-color) solid;
    max-height: 100%;
  }

  .news-article:hover .news-article__title {
    text-decoration: underline;
  }
}

@media screen and (max-width: 1300px) {
  .custom-buttons .wrapper {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media screen and (max-width: 1100px) {
  #news-articles-list {
    display: flex;
    flex-direction: column;
  }

  .footer-social.custom-section {
    .app-container {
      .container-background {
        .text {
          .app-description {
            max-width: 100%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 992px) {
  .by-the-numbers-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;

    & > div:nth-child(even) {
      border-right: none;
    }

    & > div:nth-child(1),
    & > div:nth-child(2) {
      border-bottom: 2px rgba(124, 196, 229, 0.32) solid;
    }

    & > div {
      padding: var(--spacing-lg);
    }
  }

  .events-section.custom-section {
    .events-section-container {
      #events-section {
        /* padding: 0px var(--spacing-lg);
        padding-right: var(--spacing-lg); */
      }
    }

    .see-all-container {
      top: 200px;
      flex-wrap: wrap;
      padding: 0 40px;

      h2 {
        border-right: none;
        border-right: 4px var(--secondary-color) solid;
        padding-top: var(--spacing-md);
      }
    }
  }

  .footer-social.custom-section {
    .social-media-container {
      flex-direction: column;
    }

    .app-container .container-background {
      flex-direction: column;

      .image {
        width: 100%;
        justify-content: center;
        padding: 0px var(--side-padding);
      }
    }
  }
}

@media only screen and (max-width: 600px) {
  .by-the-numbers-section {
    padding-top: 50px;
    padding-bottom: 10px;

    .see-all-button:not(:has(a)),
    .see-all-button a {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      max-width: 95%;
      text-align: center;
    }
  }
}

@media only screen and (max-width: 440px) {
  .by-the-numbers-container {
    & > div {
      .by-the-numbers-item__number {
        font-size: 30px;
      }

      .by-the-numbers-item__text {
        font-size: 16px;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  #g2 {
    .slide {
      background-color: transparent !important;

      .text {
        padding: var(--spacing-xl) var(--side-padding);
        box-sizing: border-box;

        .quote-text {
          margin: 0px 20px;

          .text {
            padding: var(--spacing-lg);
          }
        }
      }
    }
  }

  .section-header-container {
    flex-direction: column;
    align-items: flex-start;

    .section-header-btn-container {
      padding-left: 0px;
      border-left: none;
    }
  }
}

@media screen and (max-width: 768px) {
  .custom-buttons .wrapper {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: var(--spacing-xxl);
  }

  .events-section.custom-section {
    background-size: auto;
    background-position: top;
  }

  .footer-social.custom-section {
    margin-top: 0px;

    .social-media-container {
      padding: var(--spacing-sm);
    }
  }

  #by-the-numbers-section-root {
    margin-top: 80px;
  }
}

.custom-section .see-all-container.see-all-bottom {
  display: none !important;
}

@media only screen and (max-width: 600px) {
  .custom-section .see-all-container.see-all-top .see-all-button {
    display: none !important;
  }

  .custom-section .see-all-container.see-all-bottom {
    display: flex !important;
    text-align: center;
    justify-content: center;
    padding-top: 20px;
  }

  .news-section.custom-section {
    padding-block: 40px;
  }

  #news-articles-list {
    gap: 50px;
  }

  #home .see-all-container .see-all-button:not(:has(a)),
  #home .see-all-container .see-all-button a {
    font-size: 20px;
  }

  #home .events-section.custom-section .see-all-container.see-all-top {
    padding-inline: 20px;
  }

  #home .events-section.custom-section .see-all-container.see-all-bottom {
    position: relative;
    top: 0;
    padding-inline: 0;
    padding-bottom: 30px;
  }

  #home .see-all-container h2 {
    font-size: 32px;
    line-height: 1.1;
  }

  #home #live-feed-lf5 .live-feed--post-container .live-feed--card-description {
    height: auto;
    padding-bottom: 30px;
  }

  #home #live-feed-lf5 .live-feed--post-container .live-feed--card-description {
    order: -1;
  }
  .parallax-section.custom-section {
    height: auto;
    min-height: 350px;

    & .wrapper {
      .parallax-image {
        height: auto;
        min-height: 350px;
      }

      .parallax-title {
        font-size: 36px;
        max-width: 95%;
      }
    }
  }

  #news-articles-list {
    & .news-article {
      .news-article__title {
        font-size: 17px;
        line-height: 1.2;
      }
    }
  }

  .events-section.custom-section {
    padding-top: 265px;

    .upcoming-events-image {
      height: 365px;
      background-color: #000;

      & img {
        opacity: 0.65;
      }
    }

    & .see-all-container {
      top: 170px;
    }
    .custom-swiper-controls .custom-swiper-navigation>div {
      top: 400px;
    }
    .swiper-pagination-custom-events {
      margin-top: 10px;
    }
  }
}

@media screen and (max-width: 575px) {
  #g2 {
    .slide {
      .text {
        box-sizing: border-box;
        padding: var(--spacing-xl);
        text-align: center;

        & > * {
          margin-inline: 0 !important;
        }
      }
    }
  }
}

@media only screen and (max-width: 470px) {
  .custom-buttons .wrapper {
    grid-template-columns: repeat(2, minmax(120px, 1fr));

    & > * {
      .button-icon svg {
        max-height: 45px;
      }

      .button-text,
      .button-text a {
        font-size: 16px;
      }
    }
  }
}

/* Live Feed section */
#home #live-feed-lf5 {
  padding-bottom: 0;
}

#cms-live-feed {
  max-width: 100%;
  overflow: hidden;
}

#home #live-feed-lf5 {
  padding-inline: 0;
}

#home #live-feed-lf5 .live-feed--post-container {
  position: relative;
  isolation: isolate;
  /* padding-inline: 80px; */
  padding-top: 20px;
  padding-bottom: 45px;
}

#home .live-feed--post-container::after {
  position: absolute;
  width: 100vw;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  content: '';
  background-color: color-mix(in srgb, var(--secondary-color), #fff 85%);
  padding: 20px;
}

#home #live-feed-lf5 .live-feed--post-container .live-feed--card-description,
#home #live-feed-lf5 .live-feed--post-container .live-feed--card-image img,
#home #live-feed-lf5 .live-feed--post-container .live-feed--card {
  border-radius: 0;
}

#home #live-feed-lf5 .live-feed--post-container .live-feed--card {
  border-top: 4px solid var(--secondary-color);
}

#live-feed-lf5 .live-feed--post-container .live-feed--card-description--icon {
  border: 1px solid #e5e7eb;
}

#home
  #live-feed-lf5
  .live-feed--post-container
  .live-feed--card-description--header,
#home
  #live-feed-lf5
  .live-feed--post-container
  .live-feed--card-description--header
  .live-feed-time {
  font-weight: 700;
}
#home #live-feed-lf5 .live-feed--post-container .live-feed--card-description .live-feed-details {
  font-size: 18px;
}
/* end LF */

/* programs */
/* #home #programs-p1 .programs-wrapper {
  padding-inline: 80px;
} */
#home
  #programs-p1
  .programs-wrapper
  .program
  .image-wrapper
  .content-box
  .title.normal-content {
  font-size: 24px;
}

#programs-p1 .see-all-top h2 {
  padding-block: 0;
}

/* #home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .program-link a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 2;
  display: block;
} */
#home
  #programs-p1
  .programs-wrapper
  .program
  .image-wrapper
  .content-box.hover-enter {
  background-color: var(--box-bg-color-opacity);
}

#home
  #programs-p1
  .programs-wrapper
  .program
  .image-wrapper
  .content-box
  .hover-content {
  background: transparent;
}
#home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description {
  font-size: 18px;
}
/* end programs */
/* header */
#view-header .logo img {
  object-fit: contain;
}

@media only screen and (min-width: 1041px) {
  #view-header .logo {
    height: 60px;
  }
  .kent-school-district #view-header .logo {
    height: 58px;
  }

  #languagebutton .language-menu-text {
    display: flex;
    align-items: center;
  }

  #languagebutton .language-menu-text .menu-field {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  #languagebutton .language-menu-text .menu-field::before {
    width: 16px;
    height: 16px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.00004 1.33331c-3.676 0-6.66667 2.99067-6.66667 6.66667 0 3.67602 2.99067 6.66662 6.66667 6.66662 3.67596 0 6.66666-2.9906 6.66666-6.66662 0-3.676-2.9907-6.66667-6.66666-6.66667zm5.28736 6h-1.8427c-.0822-1.45917-.4905-2.88135-1.1947-4.162.8162.38137 1.5226.96293 2.0537 1.69061.531.72768.8694 1.57783.9837 2.47139zm-4.93403-4.64866c.69.90933 1.618 2.52 1.75133 4.64866h-4.08466c.09267-1.73066.66267-3.352 1.634-4.64933.11467-.00667.22933-.01733.346-.01733.11933 0 .236.01066.35333.018zm-2.56133.46666c-.656 1.26067-1.03467 2.69-1.10533 4.182h-1.974c.11518-.90144.45842-1.7586.99726-2.49039s1.25546-1.31401 2.08207-1.69161zm-3.07933 5.51534h1.98266c.09067 1.58595.44334 2.98535 1.03734 4.15335-.81187-.3827-1.51418-.9639-2.04203-1.6898-.52785-.726-.8642-1.57324-.97797-2.46355zm4.92066 4.64865c-.934-1.132-1.48533-2.718-1.606-4.64865h4.07533c-.13866 1.84865-.74466 3.46395-1.73533 4.64795-.12133.008-.24266.0187-.36733.0187-.124 0-.24467-.0107-.36667-.018zm2.67403-.5147c.6366-1.196 1.0253-2.6006 1.1273-4.13395h1.852c-.1125.88285-.444 1.72355-.9644 2.44555-.5203.722-1.213 1.3025-2.0149 1.6884z' fill='%239ca3af'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: contain;
  }

  #view-header #h1 .left {
    margin-left: 0;
  }

  #view-header .search.button-action {
    margin-right: 0;
  }

  #view-header #h1 .header-container {
    padding-inline: var(--side-padding);
    box-sizing: border-box;
  }

  #view-header .m4-menu .m4-menu--bar {
    justify-content: center;
  }
}

/* header */
#home
  .main
  .view-container
  > div
  > div
  > div:not(.parallax-section):not(:has(.events-section)):not(
    :has(.footer-social)
  ) {
  padding-inline: var(--side-padding);
  box-sizing: border-box;
}

@media only screen and (max-width: 1040px) {
  #view-header .mobile-header {
    height: auto;
    padding-top: 20px;
  }

  #view-header .logo {
    margin: 0;
  }
}

@media only screen and (max-width: 560px) {
  #app {
    --side-padding: 24px;
  }

  #view-header .mobile-header {
    justify-content: flex-end;
    padding-right: 20px;
    box-sizing: border-box;
  }

  #view-header .logo img {
    max-width: calc(100vw - 110px);
  }
}

/* footer */
#view-footer #footer-f1 {
  padding-inline: var(--side-padding);
}

#view-footer #footer-f1 h2 {
  letter-spacing: 0;
}
#view-footer #footer-f1 .footer-logo {
  min-width: 215px;
}

.footer-column-main a {
  color: var(--primary-color) !important;
  font-weight: 700;
}

#view-footer #footer-f1 .row .footer-columns {
  box-sizing: border-box;
  border-left: 1px solid var(--separator-color);
  padding-inline: max(4%, 20px);
  margin-bottom: 50px;
}

#view-footer #footer-f1 .footer-columns:nth-child(3) {
  padding-right: 0;

  & > h2:first-child {
    display: none;
  }

  li {
    border-bottom: 1px solid var(--separator-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 18px;
  }

  li a {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;

    &:hover {
      color: var(--primary-color) !important;
    }
  }
}

#view-footer #footer-f1 .apptegy-copyright {
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  text-align: left;

  & .footer-columns {
    display: flex;
    padding: 0;
    text-align: right;
    justify-content: flex-end;

    & h2 {
      display: none;
    }
  }

  ul {
    display: flex;
    gap: 10px 20px;
    flex-wrap: wrap;
    font-size: 14px;

    a {
      margin-bottom: 0;
    }
  }

  & a:hover {
    text-decoration: underline !important;
  }
}

.footer-column-main > p > span {
  position: relative;
  min-height: 18px;

  &:nth-child(1) {
    padding-left: 25px;

    &::after {
      position: absolute;
      content: '';
      left: 0;
      top: 5px;
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.0001 15.4665C7.86145 15.4665 7.72627 15.4232 7.61344 15.3426C7.41077 15.1993 2.64744 11.76 2.66677 7.4633C2.66677 4.52597 5.05943 2.1333 8.0001 2.1333C10.9408 2.1333 13.3334 4.52597 13.3334 7.46663C13.3528 11.76 8.58944 15.1993 8.38677 15.3426C8.27394 15.4232 8.13875 15.4665 8.0001 15.4665ZM9.33342 7.46663C9.33342 6.7313 8.73542 6.1333 8.00008 6.1333C7.26475 6.1333 6.66675 6.7313 6.66675 7.46663C6.66675 8.20197 7.26475 8.79997 8.00008 8.79997C8.73542 8.79997 9.33342 8.20197 9.33342 7.46663Z' fill='%234D515A'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }

  &:has(a[href^="tel:"]) {
    padding-left: 25px;

    &::after {
      position: absolute;
      content: '';
      left: 0;
      top: 5px;
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8049 8.99495C11.743 8.93298 11.6695 8.88382 11.5887 8.85028C11.5078 8.81674 11.4211 8.79948 11.3335 8.79948C11.246 8.79948 11.1593 8.81674 11.0784 8.85028C10.9975 8.88382 10.9241 8.93298 10.8622 8.99495L9.79953 10.0576C9.30686 9.91095 8.38753 9.57761 7.80486 8.99495C7.2222 8.41228 6.88886 7.49295 6.7422 7.00028L7.80486 5.93761C7.86683 5.87575 7.91599 5.80229 7.94953 5.72141C7.98307 5.64053 8.00033 5.55384 8.00033 5.46628C8.00033 5.37872 7.98307 5.29203 7.94953 5.21115C7.91599 5.13027 7.86683 5.05681 7.80486 4.99495L5.1382 2.32828C5.07634 2.26632 5.00287 2.21716 4.92199 2.18362C4.84112 2.15008 4.75442 2.13281 4.66686 2.13281C4.57931 2.13281 4.49261 2.15008 4.41173 2.18362C4.33086 2.21716 4.25739 2.26632 4.19553 2.32828L2.38753 4.13628C2.1342 4.38961 1.99153 4.73761 1.99686 5.09295C2.0122 6.04228 2.26353 9.33961 4.8622 11.9383C7.46086 14.5369 10.7582 14.7876 11.7082 14.8036H11.7269C12.0789 14.8036 12.4115 14.6649 12.6635 14.4129L14.4715 12.6049C14.5335 12.5431 14.5827 12.4696 14.6162 12.3887C14.6497 12.3079 14.667 12.2212 14.667 12.1336C14.667 12.0461 14.6497 11.9594 14.6162 11.8785C14.5827 11.7976 14.5335 11.7241 14.4715 11.6623L11.8049 8.99495Z' fill='%234D515A'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }
}

#footer-f1 .footer-logo {
  max-width: 100%;
}

#view-footer #footer-f1 .footer-column-main {
  min-width: 250px;
}

@media only screen and (max-width: 960px) {
  #view-footer #footer-f1 .row {
    flex-direction: column;
    align-items: center;
  }

  #view-footer #footer-f1 .footer-column-main,
  #view-footer #footer-f1 .row .footer-columns {
    width: 100%;
    padding-inline: 0 !important;
    border: 0 !important;
    margin-bottom: 25px;
    text-align: left;
  }

  #view-footer #footer-f1 .apptegy-copyright {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
    padding-top: 20px;

    border: 0;

    .footer-columns {
      text-align: center;
      justify-content: center;
    }

    & ul {
      justify-content: center;
    }
  }
}

#app .footer-social-links {
  --icon-color: var(--text-color, #4B5563);
  --icon-color-hover: var(--primary-color);
  --icon-size: 80%;
  --icon-size-mobile: 30px;
}
#app .footer-social-links li a {
  min-width: 40px;
  min-height: 40px;
}
.footer-column-main .social-container {
  padding-top: 15px;
}
/* .footer-column-main .social-heading {
  color: var(--text-color, #4B5563);
  font-weight: 900;
} */
#footer-f1 .mission-statement {
  font-family: var(--family-secondary);
  font-weight: var(--font-weight-regular);
  color: var(--primary-color);
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 20px;
}
/* .footer-column-main .social-container:not(:has(.footer-social-links li)) .social-heading  {
  display: none;
} */
#view-footer #footer-f1 p {
  font-size: 18px;
}
/* end footer */

/* gallery */
  #cms-gallery #g4 {
    & .image-and-nav {
      padding: 0;
    }
    .text .description p:last-child a {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 10px 15px;
      box-sizing: border-box;
      background-color: #F3F4F6;
      color: #4D515A;
      transition: all .35s ease-in-out;
      text-decoration: none;
      border-radius: 4px;
      font-weight: 700;
      position: relative;

      &::after {
        content: '';
        width: 12px;
        height: 12px;
        background-color: #4D515A;
        mask-image: url("data:image/svg+xml,%3Csvg width='9' height='10' viewBox='0 0 9 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.52867 8.52869L4.47133 9.47135L8.94267 5.00002L4.47133 0.528687L3.52867 1.47135L6.39067 4.33335H0V5.66669H6.39067L3.52867 8.52869Z' fill='%234D515A'/%3E%3C/svg%3E%0A");
        mask-repeat: no-repeat no-repeat;
        mask-position: center center;
        mask-size: contain;
      }

      &:hover {
        background-color: var(--primary-color);
        color: #FFF;

        &::after {
          background-color: #FFF;
        }
      }
    }
  } 
/* end gallery */

/* staff names in directory bold and proper casing */
#staff .contact-box .staff-info .name {
    text-transform: capitalize !important; 
    font-weight: bold; 
}


/* hide icons from menu on mobile */
.mobile-menu-wrapper #explore-header-collapsible .item-icon {
    display: none;
}

/* adjust Explore/Tools dropdown to two columns */
#explore-menu {
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 450px;
  padding-bottom: 40px;
  overflow: hidden;
}

#explore-menu ul {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  margin: 0;
  padding: 10px;
  list-style-type: none;
}

#explore-menu li {
  width: 50%;
  box-sizing: border-box;
  padding: 5px 10px;
  position: relative;
}
/* change icon to fax in footer */
.footer-column-main > p > span:has(a[href^="tel:"]) + span:has(a[href^="tel:"])::after  { 
  background-image: url("data:image/svg+xml,%3Csvg fill='%234d515a' height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 60 60' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M18,9h18c0.553,0,1-0.447,1-1s-0.447-1-1-1H18c-0.553,0-1,0.447-1,1S17.447,9,18,9z'/%3E%3Cpath d='M42,12H18c-0.553,0-1,0.447-1,1s0.447,1,1,1h24c0.553,0,1-0.447,1-1S42.553,12,42,12z'/%3E%3Cpath d='M42,43H18c-0.553,0-1,0.447-1,1s0.447,1,1,1h24c0.553,0,1-0.447,1-1S42.553,43,42,43z'/%3E%3Cpath d='M42,48H18c-0.553,0-1,0.447-1,1s0.447,1,1,1h24c0.553,0,1-0.447,1-1S42.553,48,42,48z'/%3E%3Cg%3E%3Cpath d='M51,17V0H9v17H0v34h6v3h3v6h42v-6h3v-3h6V17H51z M11,2h38v15H11V2z M23,28h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3 c0.553,0,1,0.447,1,1S23.553,28,23,28z M24,31c0,0.553-0.447,1-1,1h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3 C23.553,30,24,30.447,24,31z M23,24h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S23.553,24,23,24z M16,28h-3 c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S16.553,28,16,28z M17,31c0,0.553-0.447,1-1,1h-3c-0.553,0-1-0.447-1-1 s0.447-1,1-1h3C16.553,30,17,30.447,17,31z M16,24h-3c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S16.553,24,16,24z M9,32H6c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S9.553,32,9,32z M9,28H6c-0.553,0-1-0.447-1-1s0.447-1,1-1h3 c0.553,0,1,0.447,1,1S9.553,28,9,28z M9,24H6c-0.553,0-1-0.447-1-1s0.447-1,1-1h3c0.553,0,1,0.447,1,1S9.553,24,9,24z M49,54v4H11 v-4V37h38V54z M50,32c-2.757,0-5-2.243-5-5s2.243-5,5-5s5,2.243,5,5S52.757,32,50,32z'/%3E%3Ccircle cx='50' cy='27' r='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: contain;
}
/* end */
/* fix menu issue on 404 error page */
#app:has(.error-page-layout) #m4  {
    position: relative;
    margin-top: 0;
    
    & .m4--drawer-element .m4--drawer-children.show-children {
        display: block !important;
    }
}
.m4-menu--mobile.is-visible .m4-menu--mobile-wrapper {
    display: block !important;
}
.m4-menu .m4-menu--mobile.is-visible {
    z-index: 9;
}
/* end */
/* CMS Page Heading Colors*/
#page .heading-block h2 {
	color: var(--primary-color);
}
/* end */



/* ---- Custom Component Fix ---- */
/* styling for CMS */
.custom-section { display: block !important; } /* can be with display: none in edit template code to be hidden as default */
.custom-section:has(.link-actions) {
    padding: 20px;
}
label.only-in-cms {
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 0.03em;;
}
label.only-in-cms:nth-child(2) {
    margin-top: 0;
}
.custom-section:not(:has(.link-actions)) .only-in-cms {
    display: none !important;
}
.custom-section .homepage-image-wrapper img.image-container-image {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain; 
    min-height: 150px;
    min-width: 150px;
    max-height: 250px;
    border: 1px solid #eee;
}
.custom-section .homepage-image-wrapper {
    height: auto;
    margin-bottom: 10px;
    display: inline-block;
}
.custom-section .homepage-icon-wrapper.blank-icon {
    display: inline-block;
    width: auto;
    min-width: 75px;
    min-height: 75px;
}
.custom-section .homepage-icon-wrapper .raw-svg,
.custom-section .homepage-icon-wrapper {
    display: inline-block;
    width: auto;
}
.custom-section .homepage-icon-wrapper svg {
    height: 75px;
    width: 75px;
    object-fit: contain;
}
.custom-section .homepage-icon-wrapper .raw-svg {
    border: 1px solid #eee;
}
.custom-section .homepage-textarea-wrapper textarea,
.custom-section .homepage-input-wrapper input {
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 10px;
}
.custom-component:has(.link-button) {
    padding-left: 20px;
}
.custom-component .link-actions-container.link-actions-container-link {
    left: 0;
    visibility: visible;
}
.custom-component-loop-wrapper > div {
    padding: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    margin-bottom: 20px;
}
/* ---- Custom Component Fix ---- */