@import url("//fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Lexend+Deca&display=swap");
.events-container .item-inner {
  flex-direction: column;
  align-items: center;
  display: flex;
  gap: 1.25rem;
  text-align: center;
}
.events-container .event-date {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  flex: none;
  width: 7rem;
  height: 7rem;
  text-transform: uppercase;
}
.events-container .event-date .event-month {
  font-size: 1.125em;
}
.events-container .event-date .event-day {
  font-size: 2.25em;
}
@media screen and (min-width: 1024px) {
  .events-container.orientation-horizontal .items-list:not(.slick-initialized) {
    justify-content: space-around;
    display: flex;
  }
  .events-container.orientation-horizontal .items-list:not(.slick-initialized) .item {
    flex: 1;
  }
  .events-container.date-orientation-horizontal .item-inner {
    flex-direction: row;
    text-align: left;
  }
}

:root, :before, :after {
  --vp-small: 20rem;
  --vp-mid: 48rem;
  --vp-large: 64rem;
  --vp-xl: 85.375rem;
  --vp-xxl: 120rem;
  --school-logo-width: 9.5rem;
  --footer-logo-width: var(--school-logo-width);
  --gutter-size: calc(50% - var(--site-width)/2);
  --font-icons: "Material Icons";
  --site-width: var(--vp-large);
}

.content-container .read-more-link {
  display: block;
  margin-top: 2em;
  padding: 16px 30px;
  border-radius: 4px;
  background: var(--color-1);
  color: white;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.content-container .read-more-link:hover, .content-container .read-more-link:focus-visible {
  text-decoration: none;
}

.content-container .read-more-link:hover, .content-container .read-more-link:focus-visible {
  background-color: var(--color-2);
  color: var(--color-2-over);
  text-decoration: none;
}

#events_toggle {
  display: flex;
  padding: 0;
  width: 1em;
  border: none;
  background: transparent;
  color: white;
  font-size: 2.75rem;
  aspect-ratio: 1;
}
#events_toggle[aria-expanded=true]::after {
  margin: auto;
  content: "close";
  font-size: inherit;
  font-family: var(--font-icons);
}
#events_toggle[aria-expanded=true] svg {
  display: none;
}
#events_toggle svg {
  margin: auto;
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}
@media screen and (max-width: 1023px) {
  #events_toggle {
    margin: 6px;
  }
}
@media screen and (min-width: 1024px) {
  #events_toggle {
    position: absolute;
    top: 40px;
    right: var(--gutter-size);
    z-index: 99;
  }
}

#events_container {
  display: grid;
  padding: 0;
  color: white;
  transition: 0.5s;
  grid-template-columns: 100%;
}
#events_container.slick-container .slick-arrow:before {
  border-color: white;
}
#events_container[aria-hidden=true] {
  visibility: hidden;
  grid-template-rows: 0fr;
}
#events_container[aria-hidden=false] {
  visibility: visible;
  padding-top: 3rem;
  grid-template-rows: 1fr;
}
#events_container .item-inner {
  flex-direction: row;
  gap: 8px;
}
#events_container .item .event-date {
  padding: 0.5rem 1.5rem;
  width: auto;
  height: auto;
  border: 1px solid white;
  border-radius: 10px;
  text-transform: none;
}
#events_container .item .event-date .month {
  font-size: 1.5rem;
}
#events_container .item .event-date .day {
  font-size: 2.5rem;
}
#events_container .inner {
  overflow: hidden;
}
#events_container .section-title {
  box-sizing: border-box;
  max-width: 1024px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 1023px) {
  #events_container {
    padding-right: var(--padded-row-size);
    padding-left: var(--padded-row-size);
  }
}
@media screen and (min-width: 768px) {
  #events_container {
    --slick-slide-spacing: 16px;
  }
}
@media screen and (min-width: 1024px) {
  #events_container {
    --section-title-text-align: left;
    --slick-slide-spacing: 40px;
  }
  #events_container .toggle {
    inset: calc(100% + 50px) var(--gutter-size) auto auto;
  }
}

#header_main {
  display: grid;
  background-color: var(--color-1);
  grid-template-columns: calc(100% - 48px) 48px;
  grid-template-areas: "nav nav" "eventsToggle ." "events events" "name name";
}
#header_main .school-name {
  grid-area: name;
}
#header_main .events-container {
  grid-area: events;
}
#header_main #events_toggle {
  cursor: pointer;
  grid-area: eventsToggle;
}
#header_main #topbar_nav_feature {
  grid-area: nav;
}
#header_main .header-title {
  margin: 0;
  padding: 1.56em 0;
  max-width: 100%;
}
#header_main .header-title a {
  font-size: 2.25rem;
  color: var(--color-1-over);
  font-family: var(--font-2);
}
@media screen and (min-width: 768px) {
  #header_main .header-title a {
    font-size: 2.25rem;
  }
}
@media screen and (min-width: 1024px) {
  #header_main .header-title a {
    font-size: 3rem;
  }
}
#header_main #topbar_nav_feature {
  margin: 1rem 0;
}
#header_main #topbar_nav_feature .links-list {
  display: flex;
}
#header_main #topbar_nav_feature .link-item a {
  color: white !important;
}
#header_main .sitenav-main {
  color: rgb(255, 255, 255);
}
#header_main .sitenav-main .nav-menu {
  background: rgb(209, 41, 35);
}
#header_main .sitenav-main .nav-mobile-toggle {
  height: 44px;
  width: 44px;
}
#header_main .sitenav-main .nav-mobile-toggle .nav-mobile-toggle-inner, #header_main .sitenav-main .nav-mobile-toggle:before, #header_main .sitenav-main .nav-mobile-toggle:after {
  left: 8px;
  width: calc(100% - 16px);
  height: 5px;
  background-color: white;
}
#header_main .sitenav-main .nav-mobile-toggle .nav-mobile-toggle-inner {
  top: calc(50% - 2.5px);
}
#header_main .sitenav-main .nav-mobile-toggle:before {
  top: 8px;
}
#header_main .sitenav-main .nav-mobile-toggle:after {
  bottom: 8px;
}
#header_main .sitenav-main .nav-mobile-toggle.open .nav-mobile-toggle-inner, #header_main .sitenav-main .nav-mobile-toggle.open:before, #header_main .sitenav-main .nav-mobile-toggle.open:after {
  background-color: rgb(255, 255, 255);
}
#header_main .sitenav-main .nav-mobile-toggle.open.animated:before {
  top: calc(50% - 2.5px);
}
#header_main .sitenav-main .nav-mobile-toggle.open.animated:after {
  bottom: calc(50% - 2.5px);
}
#header_main .sitenav-main .nav-item > a {
  height: 42px;
  padding: 0 10px;
  font-size: 1.125em;
  font-weight: 700;
  color: rgb(255, 255, 255);
}
#header_main .sitenav-main .nav-item > a:focus, #header_main .sitenav-main .nav-item > a:hover, #header_main .sitenav-main .nav-item > a.open {
  color: rgb(0, 0, 0);
  background-color: rgb(189, 224, 226);
}
#header_main .sitenav-main .sub-nav a {
  color: rgb(255, 255, 255);
}
#header_main .sitenav-main .sub-nav a:focus, #header_main .sitenav-main .sub-nav a:hover, #header_main .sitenav-main .sub-nav a.open {
  color: rgb(0, 0, 0);
  background-color: rgb(189, 224, 226);
}
@media screen and (max-width: 1023px) {
  #header_main .sitenav-main .icon-only svg {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  #header_main .sitenav-main .nav-menu {
    background: transparent;
  }
  #header_main .sitenav-main.column .nav-menu, #header_main .sitenav-main.megamenu .nav-menu {
    justify-content: space-around;
    top: auto;
    max-height: none;
    overflow: visible;
  }
  #header_main .sitenav-main.column .nav-item.icon-only svg, #header_main .sitenav-main.megamenu .nav-item.icon-only svg {
    height: 1em;
    fill: rgb(209, 41, 35);
  }
  #header_main .sitenav-main.column .nav-item.icon-only .icon-only-text, #header_main .sitenav-main.megamenu .nav-item.icon-only .icon-only-text {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
  }
  #header_main .sitenav-main.column .nav-item.icon-only a:hover svg, #header_main .sitenav-main.column .nav-item.icon-only a:focus-visible svg, #header_main .sitenav-main.column .nav-item.icon-only a.open svg, #header_main .sitenav-main.megamenu .nav-item.icon-only a:hover svg, #header_main .sitenav-main.megamenu .nav-item.icon-only a:focus-visible svg, #header_main .sitenav-main.megamenu .nav-item.icon-only a.open svg {
    fill: rgb(255, 255, 255);
  }
  #header_main .sitenav-main.column .nav-item > a, #header_main .sitenav-main.megamenu .nav-item > a {
    text-align: center;
    color: rgb(209, 41, 35);
    background: transparent;
  }
  #header_main .sitenav-main.column .nav-item > a:hover, #header_main .sitenav-main.column .nav-item > a:focus-visible, #header_main .sitenav-main.column .nav-item > a.open, #header_main .sitenav-main.megamenu .nav-item > a:hover, #header_main .sitenav-main.megamenu .nav-item > a:focus-visible, #header_main .sitenav-main.megamenu .nav-item > a.open {
    background-color: rgb(209, 41, 35);
    color: rgb(255, 255, 255);
  }
  #header_main .sitenav-main.column .sub-nav, #header_main .sitenav-main.megamenu .sub-nav {
    background-color: rgb(209, 41, 35);
  }
  #header_main .sitenav-main.column .nav-item:nth-last-child(1) .sub-nav:focus, #header_main .sitenav-main.column .nav-item:nth-last-child(1) .sub-nav.open {
    left: auto;
    right: 0;
  }
  #header_main .sitenav-main.megamenu .sub-nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 1024px;
    padding: 20px;
  }
  #header_main .sitenav-main.megamenu .sub-nav .sub-nav-group {
    width: 65%;
  }
  #header_main .sitenav-main.megamenu .sub-nav .mm-extra-content {
    width: calc(100% - 65%);
  }
}
@media screen and (min-width: 1024px) {
  #header_main {
    grid-template-columns: var(--gutter-size) var(--school-logo-width) calc(1024px - var(--school-logo-width)) var(--gutter-size);
    grid-template-areas: "events events events events" ". name name ." "nav nav nav nav";
    grid-gap: 0;
  }
  #header_main .sitenav-main.nav-group .nav-menu {
    justify-content: center;
  }
  #header_main .sitenav-main.nav-group .nav-item > a {
    padding: 0 10px;
    height: 40px;
    color: white;
    font-weight: 300;
    font-size: 1rem;
  }
  #header_main .sitenav-main.nav-group .nav-item .sub-nav {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25);
  }
  #header_main .sitenav-main.nav-group .nav-item .sub-nav a {
    background-color: var(--color-1);
    color: white;
    transition: 0.3s ease;
  }
  #header_main .sitenav-main.nav-group .nav-item .sub-nav a:hover, #header_main .sitenav-main.nav-group .nav-item .sub-nav a:focus-visible {
    background-color: white;
    color: black;
  }
}

.homepage-row.homepage-split {
  box-sizing: border-box;
  max-width: 1024px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .homepage-row.homepage-split .homepage-row-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
  }
}

.content-container {
  box-sizing: border-box;
  max-width: 1024px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.content-container .section-title {
  font-size: 1.6875rem;
}
@media screen and (min-width: 768px) {
  .content-container .section-title {
    font-size: 1.6875rem;
  }
}
@media screen and (min-width: 1024px) {
  .content-container .section-title {
    font-size: 2.25rem;
  }
}
.content-container .section-subtitle {
  margin: 0 0 3em;
  color: var(--color-1);
  text-align: center;
}

#footer_main {
  background-color: var(--color-1);
}
#footer_main .footer-bottom .footer-bottom-inner {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 10px 0;
}
#footer_main .footer-bottom .footer-bottom-inner .back-button-footer {
  display: block;
  max-width: 200px;
  margin-bottom: 1em;
  padding: 16px 30px;
  letter-spacing: 0.125em;
  font-size: 1.13rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
  color: var(--color-1);
  background: white;
}
#footer_main .footer-bottom .footer-bottom-inner .back-button-footer:hover, #footer_main .footer-bottom .footer-bottom-inner .back-button-footer:focus-visible {
  background-color: rgb(239, 213, 193);
  color: var(--color-1);
}
#footer_main .footer-bottom .footer-bottom-inner .readme-btn {
  font-weight: 700;
}
#footer_main .powered-by-edlio-logo svg {
  fill: white;
}
@media screen and (max-width: 767px) {
  #footer_main {
    padding-bottom: 0;
  }
}