.whats_on_page .whats_on_title {
  margin-top: 1rem;
  /*                                                     margins cancel
    50% of (100% - 6rem) of 100vh - 0.5em (selecta h1) + 1rem - 1rem
    = 50% of (100vh - 6rem) - 0.5em(selecta h1)
    = 50vh - 3rem - 0.5em(selecta h1)
    - 5rem of index margin
    = 50vh - 8rem - 0.5em
    To account for relative offsets of fonts in line:
      0.16em - 0.16h4em
      = 0.16em - 0.16 * 0.52 (0.77 on mobile) * 1em 
      = 0.0768em of deviation (0.0368 on mobile)
  */
  min-height: calc(50vh - 8rem - 0.5em + 0.0768em);
}

@media (max-width: 768px) {
  .whats_on_page .whats_on_title {
    min-height: calc(var(--1svh, 1vh)*50 - 8rem - 0.5em + 0.0368em);
  }
}

.whats_on_page .whats_on_title h1 {
  margin: 0;
}


/*
 * Breadcrumb
 */

.whats_on_page__breadcrumb_cont {
  margin-top: 0.5rem;
}

.whats_on_page__breadcrumb_link {
  text-decoration: none;
  display: inline-block;
}

.whats_on_page__breadcrumb_link:hover {
  opacity: 0.655;
}

.whats_on_page__breadcrumb_sep {
  display: inline-block;
  margin: 0 0.6em;
  user-select: none;
}


/*
 * Loader
 */

@keyframes whats_on_page_loader_spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.whats_on_page .whats_on_loader_cont {
  margin-top: 4rem;
  text-align: center;
}

@media (max-width: 768px) {
  .whats_on_page .whats_on_loader_cont {
    margin-top: 3rem;
  }
}

.whats_on_page .whats_on_loader_inner {
  width: 5rem;
  height: 5rem;
  margin: auto;
  background: url('./images/spinner.png') center/contain no-repeat;
  animation: whats_on_page_loader_spin 2000ms linear infinite;
}



/*
 * index
 */

.whats_on_index_cont {
  position: relative;
  margin-top: 4rem;
}

.whats_on_index {
  z-index: 0;
  margin-bottom: -4rem;
  background: #fff;
  padding: 1rem 1rem 1rem 0;
}

@media (max-width: 768px) {
  .whats_on_index {
    margin-bottom: -2rem;
  }
}

.whats_on_sticky_index {
  position: fixed;
  margin: 0;
  top: 0rem;
  left: 7rem;
  background: #fff;
  z-index: 1;
  transform: translateY(-14rem);
  width: calc(100% - 7rem);
  line-height: 1;
  box-sizing: border-box;
  padding: 1rem 1rem 1rem 0;
}

@media (max-width: 768px) {
  .whats_on_sticky_index {
    left: 2.667rem;
    width: calc(100% - 2.667rem);
  }
}

.active .whats_on_sticky_index {
  transform: translateY(0);
}

.controller.is_at_bottom .whats_on_sticky_index {
  display: none;
}


/*
 * sticky filter
 */

.whats_on_page .filters_cont {
  position: fixed;
  bottom: 0;
  left: 7rem;
  z-index: 3;
  width: calc(100% - 7rem);
  transition: opacity 200ms, height 750ms cubic-bezier(0.76, 0, 0.24, 1);
  height: calc(2.6rem + 1.15em);
}

@media (max-width: 1260px) {
  .whats_on_page .filters_cont {
    height: calc(2.4rem + 1.15em);
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .whats_on_page .filters_cont {
    left: 2.667rem;
    width: calc(100% - 2.667rem);
  }
}

.whats_on_page .filters_cont:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 1260px) {
  .whats_on_page .filters_cont.active {
    height: calc(100*var(--1dvh, 1dvh));
  }
}

.controller.is_at_bottom .whats_on_page .filters_cont {
  opacity: 0;
  pointer-events: none;
}

.controller.open .whats_on_page .filters_cont {
  display: none;
}

.whats_on_page .sticky_filter_cont {
  box-sizing: border-box;
  padding: 1.3rem 0 1.3rem 1.3rem;
  user-select: none;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (max-width: 1260px) {
  .whats_on_page .sticky_filter_cont {
    padding: 1rem 0.8rem;
    height: calc(100*var(--1dvh, 1dvh));
  }
}



/*
 * toggle
 */

.whats_on_page .filters_toggle {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  box-sizing: border-box;
  transition: transform 400ms, opacity 200ms;
  padding: 1.2rem 0.8rem;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 1260px) {
  .whats_on_page .filters_toggle {
    display: block;
  }
}

.controller.is_at_bottom .whats_on_page .filters_toggle {
  opacity: 0;
  pointer-events: none;
}

.whats_on_page .filters_toggle:after {
  content: " ";
  display: block;
  float: right;
  margin: 0.4rem 0 0;
  width: 0.6em;
  height: 0.5em;
  background: url('./images/navigate_down_black.svg') center/contain no-repeat;
  transform: rotate(-180deg);
}

.whats_on_page .filters_cont.active .filters_toggle:after {
  transform: rotate(0deg);
}

@media (max-width: 1260px) {
  .whats_on_page .filter_cont .navigate_down {
    transform: rotate(0deg);
  }
  .whats_on_page .filter_cont.active .navigate_down {
    transform: rotate(-180deg);
  }
}


@media (max-width: 1260px) {
  .whats_on_page .filter_cont .dropdown {
    bottom: auto;
    top: 100%;
    left: 0;
  }
}


/*
 * no results
 */

.whats_on_page .no_results {
  margin-top: 5rem;
  min-height: 80vh;
}