@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

#app,
body,
html,
button {
  font-family: "Montserrat", sans-serif !important;
  --font-family: "Montserrat", sans-serif !important;
}

#home .see-all-container {
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3em;
}

#home .see-all-container .header-slot-container {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media only screen and (min-width: 1199px) {
  body:not(.clay-county-district-schools) {
    #cms-header #h1 .header-container .school-info {
      display: flex;
      justify-content: flex-end;
      margin-left: auto;
      text-align: right;
    }
  }
}

#home .see-all-container .header-slot-container:before,
#home .see-all-container .header-slot-container:after {
  display: none;
}

#home .see-all-container .monterrey-header-accent-left,
#home .see-all-container .light-header-accent,
#home .see-all-container .monterrey-header-accent {
  display: none;
}

#home .see-all-container .see-all-button {
  margin-left: auto;
  margin-right: auto;
  display: none;
}

#home .see-all-container h2 {
  font-size: 70px;
  font-weight: 800;
}

@media only screen and (max-width: 1500px) {
  #home .see-all-container h2 {
    font-size: 50px;
  }
}

@media only screen and (max-width: 1200px) {
  #home .see-all-container h2 {
    font-size: 40px;
  }
}

#home .see-all-container .header-top {
  font-size: 26px;
  font-weight: 300;
}

@media only screen and (max-width: 1500px) {
  #home .see-all-container .header-top {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1200px) {
  #home .see-all-container .header-top {
    font-size: 22px;
  }
}

#home .cloned-see-all-button {
  width: 100%;
  text-align: center;
  margin-top: 3em;
}

#home .cloned-see-all-button .see-all-button {
  display: inline-block;
  text-decoration: none;
  padding: 1em 2.5em;
  font-weight: 500;
  border: 1px solid var(--button-border-color);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-transform: uppercase;
  transition: all 0.25s linear;
}

#home .cloned-see-all-button .see-all-button:hover {
  background-color: var(--button-text-color);
  color: var(--button-bg-color);
}

.highlights-v3-area {
  display: block;
}

/* --------------- START Custom Gallery --------------- */
.circle-wrapper {
  --circle-size: 278px;
  --inner-circle-padding: 40px;
  width: var(--circle-size);
  height: var(--circle-size);
  position: fixed;
  z-index: 12;
  bottom: 5%;
  left: 6%;
  transition: all 0.25s linear;
}

@media only screen and (max-width: 1500px) {
  .circle-wrapper {
    --circle-size: 225px;
  }
}

@media only screen and (max-width: 1200px) {
  .circle-wrapper {
    --circle-size: 200px;
    --inner-circle-padding: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .circle-wrapper {
    --circle-size: 175px;
  }
}

@media only screen and (max-width: 600px) {
  .circle-wrapper {
    --circle-size: 150px;
    --inner-circle-padding: 25px;
  }
}

.circle-wrapper .outer-circle {
  width: 100%;
  height: 100%;
  animation: rotateText 30s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.25s linear;
}

.circle-wrapper .outer-circle svg {
  width: 100%;
  height: 100%;
}

.circle-wrapper .inner-circle {
  background-color: var(--primary-color);
  color: #fff;
  width: calc(100% - var(--inner-circle-padding) * 2);
  height: calc(100% - var(--inner-circle-padding) * 2);
  position: absolute;
  top: var(--inner-circle-padding);
  left: var(--inner-circle-padding);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  font-weight: 700;
  font-size: 2em;
  box-sizing: border-box;
  z-index: 3;
}

@media only screen and (max-width: 1200px) {
  .circle-wrapper .inner-circle {
    font-size: 1.25em;
  }
}

.circle-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: var(--primary-color);
  border-radius: 50%;
  opacity: 0.75;
  z-index: -1;
}

.circle-wrapper:hover .outer-circle {
  animation-play-state: paused;
}

a.circle-wrapper[href="javascript:void(0)"] {
  cursor: default;
  pointer-events: none;
}

@keyframes rotateText {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.is-scrolled-100px .circle-wrapper {
  --circle-size: 100px;
  bottom: 2%;
  left: 2%;
}

.is-scrolled-100px .circle-wrapper .outer-circle {
  animation-play-state: paused;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
}

.is-scrolled-100px .circle-wrapper .inner-circle {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 1.25em;
}

#app:has(.header-bar-wrapper.sticky) {
  padding-top: var(--header-height);
}

.circle-wrapper .outer-circle svg path {
  fill: #ffffffcc !important;
}

/* --------------- END Custom Gallery --------------- */
/* --------------- START By The Numbers --------------- */
#home .by-the-numbers-v2 {
  --icon-area-bg-color: #fff;
  --icon-color: var(--secondary-color);
  --section-bg-image: url(https://cmsv2-shared-assets.apptegy.net/Schools/Clay-County-District-Schools-5175/img/by-the-numbers-clay-county.jpg);
  padding-top: 3em;
}

#home .by-the-numbers-v2 .see-all-container {
  margin-bottom: 1em;
}

#home .by-the-numbers-v2:before {
  opacity: 0.5;
}

#home .by-the-numbers-v2:after {
  background-attachment: unset;
}

/* --------------- END By The Numbers --------------- */
/* --------------- START Custom Events --------------- */
#home .events-e6 .events-container .logo {
  display: none;
}

#home .events-e6 .events-container .events-wrapper {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#home .events-e6 .events-container .events-wrapper .event-card {
  align-items: center;
  text-align: center;
  padding: 10px;
  background: transparent;
  border: 0;
  position: relative;
}

#home .events-e6 .events-container .events-wrapper .event-card .start-date {
  border: 0;
  width: auto;
  height: auto;
  font-size: clamp(28px, 2.5vw, 35px);
  font-weight: 700;
  line-height: 1;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border: 0;
  border: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 15px;
  justify-content: center;
  position: relative;
}

#home .events-e6 .events-container .events-wrapper .event-card .start-date .month,
#home .events-e6 .events-container .events-wrapper .event-card .start-date .date-number {
  text-transform: unset;
  font-weight: 800;
}

#home .events-e6 .events-container .events-wrapper .event-card .details .event-dates br {
  display: none;
}

#home .events-e6 .events-container .events-wrapper .event-card .details .event-title {
  font-size: clamp(17px, 1.214vw, 20px);
  line-height: 1.2;
  font-weight: 500;
  margin-top: 0;
  letter-spacing: 0;
  margin-bottom: 15px;
}

#home .events-e6 .events-container .events-wrapper .event-card .details .event-title a {
  font-weight: 600;
}

#home .events-e6 .events-container .events-wrapper .event-card .details .event-dates {
  font-size: 14px;
  line-height: 1.3;
  margin-top: 4px;
}

#home .events-e6 .events-container .events-wrapper .event-card .details .event-location {
  font-size: 14px;
  line-height: 1.3;
}

#home .events-e6 .events-container .events-wrapper .event-card::before {
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 2px;
  content: no-close-quote;
  background: var(--event-date-border-color);
}

.events-e6 .e6-header h1::after {
  content: ".";
  display: inline-block;
  vertical-align: text-bottom;
}

@media only screen and (min-width: 600px) {
  #home .events-e6 .events-container .events-wrapper {
    -moz-column-gap: 3vw;
    column-gap: 3vw;
    grid-template-columns: repeat(2, 1fr);
  }

  #home .events-e6 .events-container .events-wrapper .event-card::after {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    content: no-close-quote;
    right: -1.5vw;
    background: var(--event-date-border-color);
  }
}

@media only screen and (min-width: 800px) {
  #home .events-e6 .events-container .events-wrapper {
    -moz-column-gap: 4vw;
    column-gap: 4vw;
    grid-template-columns: repeat(3, 1fr);
  }

  #home .events-e6 .events-container .events-wrapper .event-card::after {
    right: -2vw;
  }
}

@media only screen and (min-width: 1280px) {
  #home .events-e6 .events-container .events-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }

  #home .events-e6 .events-container .events-wrapper .event-card .details .event-dates {
    font-size: 16px;
  }

  #home .events-e6 .events-container .events-wrapper .event-card {
    display: none;
  }

  #home .events-e6 .events-container .events-wrapper .event-card:nth-of-type(-n + 4) {
    display: flex;
  }
}

@media only screen and (max-width: 799px) {
  #home .events-e6 .events-container .events-wrapper .event-card {
    display: none;
  }

  #home .events-e6 .events-container .events-wrapper .event-card:nth-of-type(-n + 4) {
    display: flex;
  }
}

/* --------------- END Custom Events --------------- */
/* --------------- START Live Feed --------------- */
#home .live-feed-lf8 .cards-slider .slider-button {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M390.627 54.627 189.255 256l201.372 201.373a32 32 0 1 1-45.254 45.254l-224-224a32 32 0 0 1 0-45.254l224-224a32 32 0 0 1 45.254 45.254z'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M390.627 54.627 189.255 256l201.372 201.373a32 32 0 1 1-45.254 45.254l-224-224a32 32 0 0 1 0-45.254l224-224a32 32 0 0 1 45.254 45.254z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-size: 50%;
  mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--button-text-color) !important;
}

#home .live-feed-lf8 .cards-slider .slider-button svg {
  display: none;
}

#home .live-feed-lf8 .cards-slider .slider-button.scroll-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M121.373 457.373 322.745 256 121.373 54.627a32 32 0 0 1 45.254-45.254l224 224a32 32 0 0 1 0 45.254l-224 224a32 32 0 0 1-45.254-45.254z'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M121.373 457.373 322.745 256 121.373 54.627a32 32 0 0 1 45.254-45.254l224 224a32 32 0 0 1 0 45.254l-224 224a32 32 0 0 1-45.254-45.254z'%3E%3C/path%3E%3C/svg%3E");
}

@media only screen and (min-width: 1199px) {
  #home .live-feed-lf8 .card {
    display: flex;
    align-items: center;
  }

  #home .live-feed-lf8 .card .card-content {
    width: 300px;
    min-height: 300px;
    padding: 25px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }

  #home .live-feed-lf8 .card .card-content .card-header {
    position: relative;
    flex-wrap: wrap;
    padding-left: 40px;
    text-align: left;
    justify-content: flex-start;
    text-align: left;
  }

  #home .live-feed-lf8 .card .card-content .card-header img {
    position: absolute;
    top: 0;
    left: 0;
  }

  #home .live-feed-lf8 .card .card-content .card-header .author {
    width: 100%;
  }

  #home .live-feed-lf8 .card .card-content .card-header .time-ago {
    width: 100%;
    margin-left: 0;
    margin-top: 5px;
  }

  #home .live-feed-lf8 .card .card-description {
    font-size: 14px;
  }

  #home .live-feed-lf8 .card .card-gallery {
    border-radius: 12px;
    overflow: hidden;
  }
}

/* --------------- END Live Feed --------------- */
#container {
  position: relative;
  z-index: 1;
}

#view-footer {
  position: relative;
  z-index: 22;
}

#app:has(#staff) #view-footer {
  z-index: auto;
}

#cms-footer {
  --footer-background-image: var(--custom-footer-bg, url(https://cmsv2-shared-assets.apptegy.net/Schools/Clay-County-District-Schools-5175/img/district-footer-bg.jpeg));
  --grayscale: unset;
}

body[class$="-elementary"] #app #cms-footer {
  --custom-footer-bg: url(https://cmsv2-shared-assets.apptegy.net/Schools/Clay-County-District-Schools-5175/img/elementary-footer-bg.jpeg);
}

body[class$="-junior-high"] #app #cms-footer {
  --custom-footer-bg: url(https://cmsv2-shared-assets.apptegy.net/Schools/Clay-County-District-Schools-5175/img/jr-high-footer-bg.jpeg);
}

body[class="clay-high"] #app #cms-footer,
body[class="fleming-island-high"] #app #cms-footer,
body[class="keystone-heights-junior-senior-high"] #app #cms-footer,
body[class="middleburg-high"] #app #cms-footer,
body[class="oakleaf-high"] #app #cms-footer,
body[class="orange-park-high"] #app #cms-footer,
body[class="ridgeview-high-school"] #app #cms-footer,
body[class="adult-and-community-education"] #app #cms-footer,
body[class="bannerman-learning-center"] #app #cms-footer,
body[class="clay-virtual-academy"] #app #cms-footer {
  --custom-footer-bg: url(https://cmsv2-shared-assets.apptegy.net/Schools/Clay-County-District-Schools-5175/img/grayscale-footer-bg.jpg);
}

/* --------------- START Programs --------------- */
#programs-p1 .program .image-wrapper {
  border-radius: 15px;
}

#home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description {
  overflow-y: auto;
}

@media only screen and (min-width: 1499px) {
  #home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description {
    height: 120px;
  }
}

#home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description::-webkit-scrollbar-track {
  background-color: transparent;
}

#home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description::-webkit-scrollbar-thumb {
  background-color: var(--text-color);
  border-radius: 8px;
}

#home #programs-p1 .programs-wrapper .program .image-wrapper .content-box .hover-content .middle .program-description::-webkit-scrollbar-thumb:hover {
  background-color: #8c8c8c;
}

/* --------------- END Programs --------------- */
/* ------------- NEWS START --------------- */
/* variables that can be added to change the news cards color */
/* #home #news-n6 .news-wrapper {
    --news-card-bg-color: #FFF;
    --news-card-text-color: #000;
    --news-card-date-color: #000;
    --news-card-title-color: var(--primary-color);
} */
#home .news-wrapper {
  width: calc(100% - 150px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  gap: unset;
}

@media only screen and (max-width: 1279px) {
  #home .news-wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 959px) {
  #home #news-n6 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#home #news-n6 .card-slider {
  position: relative;
}

#home #news-n6 .pager-right .pager-section {
  display: none;
}

#home #news-n6 .button-section .button {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M390.627 54.627 189.255 256l201.372 201.373a32 32 0 1 1-45.254 45.254l-224-224a32 32 0 0 1 0-45.254l224-224a32 32 0 0 1 45.254 45.254z'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M390.627 54.627 189.255 256l201.372 201.373a32 32 0 1 1-45.254 45.254l-224-224a32 32 0 0 1 0-45.254l224-224a32 32 0 0 1 45.254 45.254z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-size: 75%;
  mask-size: 75%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--button-text-color) !important;
  position: absolute;
  top: calc(50% - 20px);
}

#home #news-n6 .button-section .button svg {
  display: none;
}

#home #news-n6 .button-section .button.scroll-left {
  left: 0;
}

#home #news-n6 .button-section .button.scroll-right {
  left: unset;
  right: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M121.373 457.373 322.745 256 121.373 54.627a32 32 0 0 1 45.254-45.254l224 224a32 32 0 0 1 0 45.254l-224 224a32 32 0 0 1-45.254-45.254z'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M121.373 457.373 322.745 256 121.373 54.627a32 32 0 0 1 45.254-45.254l224 224a32 32 0 0 1 0 45.254l-224 224a32 32 0 0 1-45.254-45.254z'%3E%3C/path%3E%3C/svg%3E");
}

#home .news-wrapper .N6-story {
  background-color: var(--news-card-bg-color, #fff);
  border-radius: 15px 15px 20px 20px;
  overflow: hidden;
  box-shadow: 0px 2.856px 13.33px 0px rgba(0, 0, 0, 0.15);
  margin-left: 14px;
  margin-right: 14px;
}

#home #news-n6 .story a {
  display: block;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background-color: var(--news-card-bg-color, #fff);
}

#home #news-n6 .story .news-image .image-hidden-wrapper {
  border-top: 0;
  border-bottom: 8px solid var(--news-accent-border-color);
}

#home #news-n6 .news-date,
#home #news-n6 .news-title,
#home .N6-story .news-snippet.outer-snippet {
  padding-inline: 20px;
  box-sizing: border-box;
}

#home #news-n6 .news-title {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--news-card-title-color, var(--news-card-text-color, var(--article-title-color)));
}

#home #news-n6 .news-date {
  color: var(--news-card-date-color, var(--news-card-text-color, var(--article-date-color)));
}

#home .N6-story .news-snippet.outer-snippet {
  display: block;
  background-color: var(--news-card-bg-color, #fff);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  padding-block: 20px;
  color: var(--news-card-text-color, var(--snippet-color));
}

@media only screen and (min-width: 1280px) {
  #home #news-n6 .news-title {
    font-size: 18px;
  }
}

/* improve design on small screen resolution*/
@media only screen and (max-width: 1279px) {
  #home #news-n6 .news-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  #home #news-n6 .news-wrapper .N6-story {
    width: calc(33% - 20px);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media only screen and (max-width: 1040px) {
  #home #news-n6 .news-wrapper .N6-story {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 700px) {
  #home #news-n6 .news-wrapper .N6-story {
    width: 100%;
  }
}

/* ------------- NEWS END --------------- */
/* ------------- CUSTOM ABOUT START --------------- */
.view-container:has(#stats-s2) {
  background: transparent;
}

.homepage-component:has(#stats-s2) {
  background: transparent;
}

#stats-s2 {
  border-top: 5px solid var(--header-accent-color);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--bg-color) 76%);
}

#stats-s2 .stats-info .stats-header {
  display: none;
}

#stats-s2 .stats-info .cards-slider {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
}

#stats-s2 .stats-info .cards-slider .stats-card {
  border-radius: 6px;
  border: 3px solid var(--header-accent-color);
  overflow: hidden;
  box-sizing: border-box;
}

#stats-s2 .stats-info .cards-slider .stats-card .stat-headline {
  font-weight: 900;
}

#stats-s2 .stats-info .cards-slider .stats-card .stat-description {
  font-size: 20px;
  font-weight: 500;
  margin-top: 1em;
}

#stats-s2 .slider-dots {
  width: calc(100% - 150px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-content: center;
  margin-top: 45px;
}

#stats-s2 .slider-dots ul {
  justify-content: center;
  text-align: center;
}

#stats-s2 .slider-dots ul li {
  margin-left: 6px;
  margin-right: 6px;
}

#stats-s2 .slider-dots ul li .circle {
  width: 15px;
  height: 15px;
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

#stats-s2 .slider-dots ul li.activeStatIdx .circle {
  width: 20px;
  height: 20px;
  background-color: transparent;
}

#stats-s2 .navigation {
  position: static;
  height: unset;
  width: 100%;
  margin-top: -45px;
  margin-left: 0;
}

#stats-s2 .navigation .arrows {
  width: 100%;
  position: static;
  height: unset;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#stats-s2 .navigation .button-action {
  position: static;
}

#stats-s2 .navigation .button-action svg {
  border-radius: 4px;
}

@media only screen and (min-width: 1199px) {
  #stats-s2 {
    --stats-slider-header-width: calc(100% / 4 - 16px) !important;
  }

  #stats-s2 .stats-info .cards-slider .stats-card {
    visibility: visible;
    margin-right: 21px;
  }
}

/* ------------- CUSTOM ABOUT END --------------- */
/* ------------- CUSTOM MENU START --------------- */
#view-header #m1 .menu-container .content .static-links ul li,
#view-header #m2 .menu-container .content .static-links ul li {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
}

/* ------------- CUSTOM MENU END --------------- */
/*# sourceMappingURL=dev.css.map */

/* Fix card title break */
#page .card-text .headline {
  word-break: auto-phrase;
}

/* Remove department filters */
#staff #filter-container {
  display: none;
}

/* ------------- START Logo gets smaller on scroll and by default on inner pages --------------- */

@media only screen and (min-width: 1199px) {
  #cms-header #h1 .header-container .left .logo {
    transition: all 0.25s linear;
  }

  #cms-header #h1 .header-container .left .logo img {
    transition: all 0.25s linear;
  }

  #cms-header #h1 .top-menu {
    transition: all 0.25s linear;
  }

  #cms-header #h1 .top-menu .menu-button__icon {
    transition: all 0.25s linear;
  }

  #app.is-scrolled-100px #cms-header #h1 .header-container {
    height: 50px;
  }

  #app.is-scrolled-100px #cms-header #h1 .header-container .left .logo {
    top: -18px;
  }

  #app.is-scrolled-100px #cms-header #h1 .header-container .left .logo img {
    transform: scale(0.5);
  }

  #app.is-scrolled-100px #cms-header #h1 .top-menu {
    padding-top: 8px;
    padding-bottom: 4px;
  }

  #app.is-scrolled-100px #cms-header #h1 .top-menu .menu-button__icon {
    width: 36px;
    height: 36px;
  }

  #app:not(:has(#home)) .header-container {
    height: 50px;
  }

  #app:not(:has(#home)) .header-container .left .logo {
    top: -30px;
  }

  #app:not(:has(#home)) .header-container .left .logo img {
    transform: scale(0.6);
  }
}

/* ------------- END Logo gets smaller on scroll and by default on inner pages --------------- */

/* -------- START Mobile Header Fix -------- */
@media only screen and (max-width: 960px) {
    #cms-header #h1 .left {
        height: var(--header-height);
        padding: 0;
        margin: 0;
    }

    #cms-header #h1 .left .logo {
        margin-top: 5px;
        margin-right: auto;
    }

    #cms-header #h1 .left .school-info,
    #cms-header #h1 .right,
    #cms-header .mobile-header .left-icon .menu-field {
        display: none;
    }

    #cms-header #h1 .mobile-header.menu-open .menu-mobile {
        height: calc(100dvh + 48px);
        overflow-y: auto;
    }

    #cms-header #h1 .mobile-header.menu-open .left-icon {
        order: 0;
        margin-left: auto;
        margin-right: 16px;
    }

    #cms-header #h1 .mobile-header.menu-open {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    #cms-header #h1 .search-translate-buttons .menu-field {
        display: block;
        color: var(--mobile-menu-text-color) !important;
        font-weight: 400;
    }

    #cms-header #h1 #menubutton svg {
        fill: var(--bg-color) !important;
    }

    #cms-header #h1 #closebutton svg path,
    #cms-header #h1 #menubutton svg path {
        fill: var(--nav-color) !important;
    }

    #cms-header #h1 #languagebutton svg path,
    #cms-header #h1 #explore-header-collapsible svg path {
        fill: var(--mobile-menu-text-color) !important;
    }
}
/* -------- END Mobile Header Fix -------- */