/* React-state equivalent of the original body.offcanvas selector. */
#fh5co-offcanvas.is-open {
  transform: translateX(0);
}

/* The source used an anchor. Reset native button chrome in the React control. */
button.fh5co-nav-toggle {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 0 0;
}

button.fh5co-nav-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

#page {
  max-width: 100%;
  overflow-x: clip;
}

/* The original embeds a fixed 300px map; keep it inside narrow cards. */
#fh5co-event iframe {
  max-width: 100%;
}

.flipTimebox {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.flipTimebox .flip-clock-wrapper {
  align-items: flex-start;
  display: flex;
  float: none;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 1em 0;
  max-width: none;
  width: max-content;
}

.flipTimebox .flip-clock-wrapper ul,
.flipTimebox .flip-clock-divider {
  float: none;
  flex: 0 0 auto;
}

.fh5co-cover .display-tc {
  box-sizing: border-box;
  max-width: 100%;
  padding-inline: 1rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.78);
}

#fh5co-header .display-tc h2.hero-quote {
  font-size: clamp(1.55rem, 2.2vw, 2.35rem) !important;
  line-height: 1.55;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

@media screen and (min-width: 769px) {
  #fh5co-event .event-wrap {
    min-height: 555px;
  }
}

@media screen and (max-width: 900px) {
  #fh5co-header .display-t,
  #fh5co-header .display-tc {
    align-items: center;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    text-align: center;
    width: 100% !important;
  }

  #fh5co-header .display-tc > * {
    flex: 0 0 auto;
    max-width: 100%;
  }

  #fh5co-header .display-tc h1 {
    font-size: clamp(2.1rem, 10vw, 3.25rem);
    line-height: 1.15;
    white-space: nowrap;
  }

  #fh5co-header .col-md-8,
  #fh5co-header .col-md-offset-2 {
    float: none;
    margin-left: 0;
    width: 100%;
  }

  #fh5co-header .fh5co-container,
  #fh5co-header .row,
  #fh5co-header [class*='col-'] {
    max-width: 100%;
    overflow-x: clip;
  }

  .flipTimebox .flip-clock-wrapper {
    transform: scale(0.72);
    transform-origin: top center;
  }
}

@media screen and (max-width: 568px) {
  #fh5co-header .display-t,
  #fh5co-header .display-tc {
    height: 900px !important;
    padding-top: 0;
  }

#fh5co-header .display-tc h2.hero-quote {
    font-size: 1.55rem !important;
    line-height: 1.65;
  }

  .flipTimebox .flip-clock-wrapper {
    transform: scale(1);
  }
}

@media screen and (max-width: 380px) {
  .flipTimebox .flip-clock-wrapper {
    transform: scale(0.95);
  }
}