@charset "UTF-8";
/*!
 * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }
  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }
  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }
  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }
  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }
  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }
  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }
  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }
  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.3333333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.6666666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.3333333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.6666666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.3333333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.6666666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.3333333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.6666666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end {
  border-right: 1px solid #dee2e6 !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start {
  border-left: 1px solid #dee2e6 !important;
}

.border-start-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #0d6efd !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #198754 !important;
}

.border-info {
  border-color: #0dcaf0 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #212529 !important;
}

.border-white {
  border-color: #fff !important;
}

.border-0 {
  border-width: 0 !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-primary {
  color: #0d6efd !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #198754 !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-dark {
  color: #212529 !important;
}

.text-white {
  color: #fff !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset {
  color: inherit !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

.bg-primary {
  background-color: #0d6efd !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.bg-success {
  background-color: #198754 !important;
}

.bg-info {
  background-color: #0dcaf0 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-dark {
  background-color: #212529 !important;
}

.bg-body {
  background-color: #fff !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

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

.text-nowrap {
  white-space: nowrap !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}

.user-select-all {
  user-select: all !important;
}

.user-select-auto {
  user-select: auto !important;
}

.user-select-none {
  user-select: none !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: 0.2rem !important;
}

.rounded-2 {
  border-radius: 0.25rem !important;
}

.rounded-3 {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-end {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-start {
  border-bottom-left-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .text-md-start {
    text-align: left !important;
  }
  .text-md-end {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2rem !important;
  }
  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
  .fs-sm-1 {
    font-size: 2.5rem !important;
  }
  .fs-sm-2 {
    font-size: 2rem !important;
  }
  .fs-sm-3 {
    font-size: 1.75rem !important;
  }
  .fs-sm-4 {
    font-size: 1.5rem !important;
  }
  .fs-md-1 {
    font-size: 2.5rem !important;
  }
  .fs-md-2 {
    font-size: 2rem !important;
  }
  .fs-md-3 {
    font-size: 1.75rem !important;
  }
  .fs-md-4 {
    font-size: 1.5rem !important;
  }
  .fs-lg-1 {
    font-size: 2.5rem !important;
  }
  .fs-lg-2 {
    font-size: 2rem !important;
  }
  .fs-lg-3 {
    font-size: 1.75rem !important;
  }
  .fs-lg-4 {
    font-size: 1.5rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}
.overlay-blue {
  background-color: #0042DD !important;
}

.overlay-blue_light {
  background-color: #3D6FE5 !important;
}

.overlay-blue_dark {
  background-color: #0033AD !important;
}

.overlay-off_white {
  background-color: #F5F2F1 !important;
}

.overlay-white {
  background-color: white !important;
}

.overlay-black {
  background-color: #1D1E1F !important;
}

.overlay-grey {
  background-color: #d2d3d6 !important;
}

.background-blue {
  background-color: #0042DD !important;
}
.background-blue .card-default a, .background-blue .card-promotion a {
  background: #0042DD !important;
}

.background-blue_light {
  background-color: #3D6FE5 !important;
}
.background-blue_light .card-default a, .background-blue_light .card-promotion a {
  background: #3D6FE5 !important;
}

.background-blue_dark {
  background-color: #0033AD !important;
}
.background-blue_dark .card-default a, .background-blue_dark .card-promotion a {
  background: #0033AD !important;
}

.background-off_white {
  background-color: #F5F2F1 !important;
}
.background-off_white .card-default a, .background-off_white .card-promotion a {
  background: #F5F2F1 !important;
}

.background-white {
  background-color: white !important;
}
.background-white .card-default a, .background-white .card-promotion a {
  background: white !important;
}

.background-black {
  background-color: #1D1E1F !important;
}
.background-black .card-default a, .background-black .card-promotion a {
  background: #1D1E1F !important;
}

.background-grey {
  background-color: #d2d3d6 !important;
}
.background-grey .card-default a, .background-grey .card-promotion a {
  background: #d2d3d6 !important;
}

.text-blue {
  color: #0042DD !important;
}
.text-blue * {
  color: #0042DD !important;
}
.text-blue strong {
  -webkit-text-stroke-color: #0042DD !important;
  color: transparent !important;
}

.text-blue_light {
  color: #3D6FE5 !important;
}
.text-blue_light * {
  color: #3D6FE5 !important;
}
.text-blue_light strong {
  -webkit-text-stroke-color: #3D6FE5 !important;
  color: transparent !important;
}

.text-blue_dark {
  color: #0033AD !important;
}
.text-blue_dark * {
  color: #0033AD !important;
}
.text-blue_dark strong {
  -webkit-text-stroke-color: #0033AD !important;
  color: transparent !important;
}

.text-off_white {
  color: #F5F2F1 !important;
}
.text-off_white * {
  color: #F5F2F1 !important;
}
.text-off_white strong {
  -webkit-text-stroke-color: #F5F2F1 !important;
  color: transparent !important;
}

.text-white {
  color: white !important;
}
.text-white * {
  color: white !important;
}
.text-white strong {
  -webkit-text-stroke-color: white !important;
  color: transparent !important;
}

.text-black {
  color: #1D1E1F !important;
}
.text-black * {
  color: #1D1E1F !important;
}
.text-black strong {
  -webkit-text-stroke-color: #1D1E1F !important;
  color: transparent !important;
}

.text-grey {
  color: #d2d3d6 !important;
}
.text-grey * {
  color: #d2d3d6 !important;
}
.text-grey strong {
  -webkit-text-stroke-color: #d2d3d6 !important;
  color: transparent !important;
}

.border-color-blue {
  border-color: #0042DD !important;
}
.border-color-blue_light {
  border-color: #3D6FE5 !important;
}
.border-color-blue_dark {
  border-color: #0033AD !important;
}
.border-color-off_white {
  border-color: #F5F2F1 !important;
}
.border-color-white {
  border-color: white !important;
}
.border-color-black {
  border-color: #1D1E1F !important;
}
.border-color-grey {
  border-color: #d2d3d6 !important;
}
.card-height-tiny {
  height: 30vh;
}

.card-height-small {
  height: 20vh;
}

.card-height-medium {
  height: 30vh;
}

.card-height-large {
  height: 40vh;
}

.card-height-extra_large {
  height: 50vh;
}

.banner-height-tiny {
  min-height: 30vh !important;
}

.banner-height-small {
  min-height: 40vh !important;
}

.banner-height-medium {
  min-height: 60vh !important;
}

.banner-height-large {
  min-height: 78vh !important;
}

.banner-height-extra_large {
  min-height: 85vh !important;
}

.block-padding-none {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.block-padding-small {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.block-padding-medium {
  padding-top: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .block-padding-medium {
    padding-top: 5rem;
  }
}
.block-padding-medium {
  padding-bottom: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .block-padding-medium {
    padding-bottom: 5rem;
  }
}

.block-padding-large {
  padding-top: calc(1.8125rem + 6.75vw);
}
@media (min-width: 1200px) {
  .block-padding-large {
    padding-top: 6.875rem;
  }
}
.block-padding-large {
  padding-bottom: calc(1.8125rem + 6.75vw);
}
@media (min-width: 1200px) {
  .block-padding-large {
    padding-bottom: 6.875rem;
  }
}

.block-margin-none {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.block-margin-small {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.block-margin-medium {
  margin-top: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .block-margin-medium {
    margin-top: 5rem;
  }
}
.block-margin-medium {
  margin-bottom: calc(1.625rem + 4.5vw);
}
@media (min-width: 1200px) {
  .block-margin-medium {
    margin-bottom: 5rem;
  }
}

.block-margin-large {
  margin-top: calc(1.8125rem + 6.75vw);
}
@media (min-width: 1200px) {
  .block-margin-large {
    margin-top: 6.875rem;
  }
}
.block-margin-large {
  margin-bottom: calc(1.8125rem + 6.75vw);
}
@media (min-width: 1200px) {
  .block-margin-large {
    margin-bottom: 6.875rem;
  }
}

@font-face {
  font-family: "gilroy-bold";
  src: url("../fonts/gilroy-bold-webfont.woff2") format("woff2"), url("../fonts/gilroy-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "gilroy-regular";
  src: url("../fonts/gilroy-regular-webfont.woff2") format("woff2"), url("../fonts/gilroy-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Youth";
  src: url("../fonts/Youth-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Youth";
  src: url("../fonts/Youth-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Youth";
  src: url("../fonts/Youth-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Youth";
  src: url("../fonts/Youth-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
body {
  overflow-x: hidden;
}

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul, li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: "";
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a img {
  border: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.alignright {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
}

.alignleft {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
}

.aligncenter {
  display: block;
  margin: 0 auto 30px auto;
}

.clear-me:before,
.clear-me:after {
  content: "";
  display: table;
}

.clear-me:after {
  clear: both;
}

#nav-toggle, #mobile-nav, #mobile-detect, #ccccc, #nav-toggle {
  display: none;
}

img {
  max-width: 100%;
}

html {
  font: 16px "Youth", sans-serif;
  font-size: 1rem;
  line-height: 1;
}

h1,
.h1 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.56875rem + 3.825vw);
}
@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 4.4375rem;
  }
}
h1,
.h1 {
  padding-bottom: 0.625rem;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-weight: 700;
}
h1 strong,
.h1 strong {
  font-weight: 700;
}

h2,
.h2 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.5rem + 3vw);
}
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 3.75rem;
  }
}
h2,
.h2 {
  padding-bottom: 0.9375rem;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-weight: 700;
}
h2 strong,
.h2 strong {
  font-style: italic;
  font-weight: 700;
}

h3,
.h3 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.4375rem + 2.25vw);
}
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 3.125rem;
  }
}
h3,
.h3 {
  padding-bottom: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}
h3 strong,
.h3 strong {
  font-weight: 700;
}

h4,
.h4 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2875rem + 0.45vw);
}
@media (min-width: 1200px) {
  h4,
  .h4 {
    font-size: 1.625rem;
  }
}
h4,
.h4 {
  padding-bottom: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

h5,
.h5 {
  font-size: calc(1.26875rem + 0.225vw);
}
@media (min-width: 1200px) {
  h5,
  .h5 {
    font-size: 1.4375rem;
  }
}
h5,
.h5 {
  font-weight: 400;
  padding-bottom: 0.9375rem;
  text-transform: uppercase;
}

h6,
.h6 {
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
}

body {
  color: #1D1E1F;
  background: #F5F2F1;
}

p,
li,
td,
th {
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
  padding-bottom: 1.25rem;
  line-height: 1.8;
  font-weight: 300;
  letter-spacing: 0.25px;
}
p strong,
li strong,
td strong,
th strong {
  font-family: "gilroy-bold";
  font-weight: 400;
}

li {
  padding-bottom: 0;
}

table h2,
table h3,
table h4,
table h5,
table h6 {
  padding-bottom: 0;
  margin-bottom: 0;
}

a {
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}

table p a {
  color: black !important;
}
table p {
  line-height: 1.2 !important;
  padding: 0 !important;
  font-size: 16px !important;
}
table {
  border-collapse: collapse;
  margin: 25px 0;
  width: 100%;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}
table th {
  font-size: 1.2em;
}
table th,
table td {
  padding: 12px 15px;
}
table tbody tr {
  border-bottom: 1px solid #dddddd;
  background: white;
  color: black;
}
table tbody tr:first-child {
  background: #070538 !important;
  color: white;
}
table tbody tr:first-child th,
table tbody tr:first-child p {
  font-weight: bold !important;
  font: 16px "Barlow", sans-serif;
  text-transform: uppercase;
  font-size: 18px !important;
  text-align: center;
}
table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
  color: black !important;
}
table tbody tr:last-of-type {
  border-bottom: 2px solid #0033AD;
}
table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}
p {
  line-height: 1.6 !important;
}

.user-content h2,
.user-content h3,
.user-content h4,
.user-content h5 {
  text-transform: none;
}
.user-content h2 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3875rem + 1.65vw);
}
@media (min-width: 1200px) {
  .user-content h2 {
    font-size: 2.625rem;
  }
}
.user-content h2 {
  font-weight: 800;
}
.user-content h3 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .user-content h3 {
    font-size: 2rem;
  }
}
.user-content h3 {
  font-weight: 600;
}
.user-content .blockquote,
.user-content blockquote {
  line-height: 1.8;
  margin-bottom: 2em;
  border-left: 3px solid #333;
  padding-left: 2em;
  margin-left: 2em;
  font-style: italic;
  margin-bottom: 2em;
  margin-top: 2em;
  margin-bottom: 4em;
  margin-right: 2em;
}
.user-content .blockquote strong,
.user-content blockquote strong {
  display: block;
  text-align: right;
  font-size: 1.2em;
}
.user-content ul,
.user-content ol {
  list-style: initial;
  margin-left: 2em;
  margin-bottom: 1em;
}
.user-content ul li,
.user-content ol li {
  font-weight: 500 !important;
  list-style: initial;
}
.user-content ol,
.user-content ol li {
  list-style: numeric !important;
}
.style-guide-element header {
  border-bottom: 1px solid black;
  padding-bottom: 1em;
  margin-bottom: 2em;
}
.style-guide-element .type-row {
  margin-bottom: 1.5em;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1em;
}
.style-guide-element .type-row > div:first-child h3 {
  padding-bottom: 0;
}
.style-guide-element .type-row > div:first-child p {
  padding-bottom: 0;
}
.style-guide-element .colour-row .colour-block {
  height: 200px;
  margin-bottom: 15px;
}

.row__header {
  margin-bottom: calc(1.35rem + 1.2vw);
}
@media (min-width: 1200px) {
  .row__header {
    margin-bottom: 2.25rem;
  }
}

/* BugHerd #199 — a card block with no cards is just a text band: the header's
   2.25rem bottom margin would stack on the block's own padding and sit the copy
   high in the band. When the header's row is the last one, drop that margin. */
.card-block > .row:last-child > .col-md-12 > .row__header:last-child {
  margin-bottom: 0;
}


iframe {
  max-width: 100% !important;
}

.columns-1, .columns-2, .columns-3, .columns-4, .columns-5 {
  display: flex;
  flex-wrap: wrap;
}

.columns-1 > div, .columns-1 > li {
  width: 100%;
}

.columns-2 > div, .columns-2 > li {
  width: 50%;
}
@media (max-width: 767.98px) {
  .columns-2 > div, .columns-2 > li {
    width: 100%;
  }
}

.columns-3 > div, .columns-3 > li {
  width: 33.3333%;
}
@media (max-width: 767.98px) {
  .columns-3 > div, .columns-3 > li {
    width: 100%;
  }
}

.columns-4 > div, .columns-4 > li {
  width: 25%;
}
@media (max-width: 767.98px) {
  .columns-4 > div, .columns-4 > li {
    width: 50%;
  }
}

.columns-5 > div, .columns-5 > li {
  width: 20%;
}
@media (max-width: 767.98px) {
  .columns-5 > div, .columns-5 > li {
    width: 50%;
  }
}

.h1-splash {
  display: inline-block;
  position: relative;
}
.h1-splash * {
  position: relative;
  z-index: 5;
}
.h1-splash h1:after, .h1-splash h1:after {
  background-image: url("../img/heading-splash.png");
  position: absolute;
  top: -25%;
  left: -30%;
  height: -50%;
  width: 160%;
  height: 160%;
  background-position: center;
  background-size: 100% 100%;
  z-index: -1;
  content: "";
}
.h1-splash h1 h1, .h1-splash h1 h1 {
  position: relative;
}

.background-white, .background-transparent {
  color: #0042DD !important;
}
.background-white h2, .background-transparent h2 {
  color: #0042DD;
}
.background-black, .background-blue, .background-blue_light {
  color: white;
}
.background-black a, .background-blue a, .background-blue_light a {
  color: white;
}

.background-black .background-white * {
  color: black;
}
.background-blue_dark {
  color: white;
}
.background-blue_dark.button {
  color: #000 !important;
  background: white;
}

.background-blue {
  color: white;
}
.background-blue .title-colour {
  color: white;
}
.background-blue .button {
  background: white !important;
  color: #0042DD !important;
}

.shadow-bottom {
  position: relative;
  box-shadow: 0 40px 40px -40px rgba(0, 0, 0, 0.5);
}

.background-overhang-left, .background-overhang-right {
  position: relative;
}
.background-overhang-left:before, .background-overhang-right:before {
  width: 100%;
  right: 100%;
  content: "";
  background: inherit;
  display: inline-block;
  position: absolute;
  height: 100%;
  top: 0;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  object-fit: cover;
}

.content-block {
  position: relative;
}

.splide__arrow {
  margin: 0 10px;
}

.splide__arrow:focus svg, .splide__arrow:hover svg {
  fill: white;
}

body .splide__pagination__page {
  background: #1D1E1F;
}
.background-red .splide__pagination__page.is-active {
  background: white !important;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video .browser-box {
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
}

a {
  color: inherit;
}
a:visited {
  color: inherit;
}

.button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
    padding-left: 1.5625rem;
  }
}
.button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
  padding-right: calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
    padding-right: 1.5625rem;
  }
}
.button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
  letter-spacing: -0.25px;
  color: white;
  border: 0px solid black;
  line-height: 0.8;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
    font-size: 1.5rem;
  }
}
.button-box .button, .form-style button, .button-box .button:visited, form button, input[type=submit] {
  text-transform: uppercase;
  font-weight: 800;
  background: #0042DD;
  cursor: pointer;
  transition: all 0.2s ease-in;
  text-decoration: none;
  border: 0px solid white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  color: white;
}
.button-box .button a, .form-style button a, .button-box .button:visited a, form button a, input[type=submit] a {
  text-decoration: none;
  color: inherit;
}
.button-box .button i, .form-style button i, .button-box .button:visited i, form button i, input[type=submit] i {
  margin-left: 30px;
  font-size: 0.8em;
  color: white;
}
.button-box .button:hover, .form-style button:hover, .button-box .button:visited:hover, form button:hover, input[type=submit]:hover {
  text-decoration: none;
  background: black;
  color: #fff;
  border-color: #000;
  background: #0033AD;
}
.button-box .button.background-blue:hover, .form-style button.background-blue:hover, .button-box .button:visited.background-blue:hover, form button.background-blue:hover, input[type=submit].background-blue:hover {
  background: #3D6FE5 !important;
  color: #0033AD !important;
}
.button-box .button.transparent, .form-style button.transparent, .button-box .button:visited.transparent, form button.transparent, input[type=submit].transparent {
  text-decoration: underline;
  background: transparent;
  color: white;
  padding-left: 0;
}
.button-box .button.white-outline, .form-style button.white-outline, .button-box .button:visited.white-outline, form button.white-outline, input[type=submit].white-outline {
  border: 1px solid white;
  background: transparent;
  color: white;
}
.button-box .button.white-outline:hover, .form-style button.white-outline:hover, .button-box .button:visited.white-outline:hover, form button.white-outline:hover, input[type=submit].white-outline:hover {
  background: #3D6FE5;
}
.button-box .button.white-outline:hover i, .form-style button.white-outline:hover i, .button-box .button:visited.white-outline:hover i, form button.white-outline:hover i, input[type=submit].white-outline:hover i {
  color: #0042DD;
}
.button-box .button.button-small, .form-style button.button-small, .button-box .button:visited.button-small, form button.button-small, input[type=submit].button-small {
  font: 16px "Youth", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  min-width: initial;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}
.button-box .button.button-small i, .form-style button.button-small i, .button-box .button:visited.button-small i, form button.button-small i, input[type=submit].button-small i {
  margin-left: 0;
  margin-right: 10px;
  font-size: 1.2em;
}
.button-box .button.button-icon, .form-style button.button-icon, .button-box .button:visited.button-icon, form button.button-icon, input[type=submit].button-icon {
  border: 1px solid #3D6FE5;
  padding: 0;
  height: 26px;
  width: 26px;
  text-align: center;
  line-height: 18px;
  align-items: center;
  justify-content: center;
}
.button-box .button.button-icon i, .form-style button.button-icon i, .button-box .button:visited.button-icon i, form button.button-icon i, input[type=submit].button-icon i {
  margin: 0 !important;
  padding: 0;
  font-size: 0.8em;
}
.button-box .button.background-black, .form-style button.background-black, .button-box .button:visited.background-black, form button.background-black, input[type=submit].background-black {
  color: white !important;
}
.button-box .button.background-white, .form-style button.background-white, .button-box .button:visited.background-white, form button.background-white, input[type=submit].background-white {
  color: #0042DD !important;
}
.button-box .button.background-white i, .form-style button.background-white i, .button-box .button:visited.background-white i, form button.background-white i, input[type=submit].background-white i {
  color: #0042DD !important;
}
.button-box .button.background-white:hover, .form-style button.background-white:hover, .button-box .button:visited.background-white:hover, form button.background-white:hover, input[type=submit].background-white:hover {
  background: #F5F2F1 !important;
  color: #0042DD !important;
}
.button-box .button.background-white:hover i, .form-style button.background-white:hover i, .button-box .button:visited.background-white:hover i, form button.background-white:hover i, input[type=submit].background-white:hover i {
  color: #0042DD !important;
}
.button-box .button.styled-green, .button-box .button.styled-red, .form-style button.styled-green, .form-style button.styled-red, .button-box .button:visited.styled-green, .button-box .button:visited.styled-red, form button.styled-green, form button.styled-red, input[type=submit].styled-green, input[type=submit].styled-red {
  text-transform: uppercase;
  position: relative;
  padding: 1.25rem calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .button-box .button.styled-green, .button-box .button.styled-red, .form-style button.styled-green, .form-style button.styled-red, .button-box .button:visited.styled-green, .button-box .button:visited.styled-red, form button.styled-green, form button.styled-red, input[type=submit].styled-green, input[type=submit].styled-red {
    padding: 1.25rem 2.5rem;
  }
}
.button-box .button.styled-green, .button-box .button.styled-red, .form-style button.styled-green, .form-style button.styled-red, .button-box .button:visited.styled-green, .button-box .button:visited.styled-red, form button.styled-green, form button.styled-red, input[type=submit].styled-green, input[type=submit].styled-red {
  border: 4px solid black;
  color: black;
}
.button-box .button.styled-green:after, .button-box .button.styled-red:after, .form-style button.styled-green:after, .form-style button.styled-red:after, .button-box .button:visited.styled-green:after, .button-box .button:visited.styled-red:after, form button.styled-green:after, form button.styled-red:after, input[type=submit].styled-green:after, input[type=submit].styled-red:after {
  width: calc(100% + 8px);
  height: 12px;
  background: black;
  content: "";
  top: calc(100% + 3px);
  left: -4px;
  display: inline-block;
  position: absolute;
  clip-path: polygon(0 0, 4% 100%, 96% 100%, 100% 0);
}
.button-box .button.styled-red, .form-style button.styled-red, .button-box .button:visited.styled-red, form button.styled-red, input[type=submit].styled-red {
  color: white;
}

.button-box {
  display: flex;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(-0, -20px, 0);
  }
  to {
    opacity: 1;
    top: 0;
    transform: translate3d(-0, 0px, 0);
  }
}
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(-0, 20px, 0);
  }
  to {
    opacity: 1;
    top: 0;
    transform: translate3d(-0, 0px, 0);
  }
}
.two-block-container .photo-background-container {
  transition: all 0.5s ease-in-out;
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
.two-block-container .two-block-content-wrapper {
  opacity: 0;
  transform: translate3d(-0, -20px, 0);
  transition: all 0.2s ease-in;
}
.two-block-container.animated .two-block-content-wrapper {
  animation: fade-in-up 1.5s ease-in-out 0s 1 forwards;
}
.two-block-container.animated .photo-background-container {
  opacity: 1;
  transform: translate3d(0, 0px, 0);
}

.offer-banner {
  opacity: 0;
  transform: translate3d(-0, -20px, 0);
  transition: all 0.2s ease-in;
}
.offer-banner.animated {
  opacity: 1;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
}

.latest-offer-carousel .col-md-4, .latest-offer-carousel .owl-item {
  opacity: 0;
  transform: translate3d(-0, -20px, 0);
  transition: all 0.2s ease-in;
}
.latest-offer-carousel.animated .col-md-4:nth-child(1), .latest-offer-carousel.animated .owl-item:nth-child(1) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.1s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(2), .latest-offer-carousel.animated .owl-item:nth-child(2) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.2s ease-in;
  transition-delay: 0.6s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(3), .latest-offer-carousel.animated .owl-item:nth-child(3) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.3s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(4), .latest-offer-carousel.animated .owl-item:nth-child(4) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.4s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(5), .latest-offer-carousel.animated .owl-item:nth-child(5) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.3s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(6), .latest-offer-carousel.animated .owl-item:nth-child(6) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(7), .latest-offer-carousel.animated .owl-item:nth-child(7) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.3s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(8), .latest-offer-carousel.animated .owl-item:nth-child(8) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.2s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(9), .latest-offer-carousel.animated .owl-item:nth-child(9) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.5s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(7), .latest-offer-carousel.animated .owl-item:nth-child(7) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.4s;
}
.latest-offer-carousel.animated .col-md-4:nth-child(8), .latest-offer-carousel.animated .owl-item:nth-child(8) {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.4s;
}

.route-home .news-events-container .col-md-6 {
  opacity: 0;
  transform: translate3d(-0, -20px, 0);
  transition: all 0.2s ease-in;
}
.route-home .news-events-container.animated .col-md-6:first-child {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.2s;
}
.route-home .news-events-container.animated .col-md-6:last-child {
  opacity: 1;
  top: 0;
  transform: translate3d(-0, 0px, 0);
  transition: all 0.5s ease-in;
  transition-delay: 0.4s;
}
.route-home .animate-me {
  transition: all 0.5s ease-in;
}
.route-home .animated-element {
  transition: all 0.5s ease-in;
}
.route-home .animated-element:after {
  transition: all 0.5s ease-in;
}
.route-home .animated-element.media-text {
  position: relative;
}
.route-home .animated-element.media-text:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background: #0042DD;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.route-home .animated-element.media-text .media-text__image {
  opacity: 0;
  transition: all 0.6s ease-in;
  transition-delay: 0.25s;
  transform: scale(0.7);
}
.route-home .animated-element.media-text .media-text__content {
  opacity: 0;
  transition: all 0.4s ease-in;
  transition-delay: 0.45s;
  transform: translate(0px, 20px);
}
.route-home .animated-element.media-text.animate-me:after {
  opacity: 0;
  visibility: hidden;
  transform: translate(-100%, 0);
}
.route-home .animated-element.media-text.animate-me .media-text__image {
  opacity: 1;
  transform: scale(1);
}
.route-home .animated-element.media-text.animate-me .media-text__content {
  opacity: 1;
  transform: translate(0px, 0);
}
.route-home .activity-finder {
  opacity: 0;
  transition: all;
  animation: fade-in-up 1s ease-in-out 0s 1 forwards;
}
.route-home .banner__content {
  opacity: 0;
  transition: all;
  animation: fade-in-down 1s ease-in-out 0.5s 1 forwards;
}
.route-home .card-block.animated-element .row__header {
  transition: all 0.8s ease-in;
  opacity: 0;
  transform: translate(0px, -20px);
}
.route-home .card-block.animated-element .splide__slide {
  opacity: 0;
  transition: all 0.8s ease-in;
}
.route-home .card-block.animated-element.animate-me .feature_image_left {
  transform: translate(-0px, 0);
}
.route-home .card-block.animated-element.animate-me .row__header {
  opacity: 1;
  transform: translate(0px, 0px);
}
.route-home .card-block.animated-element.animate-me .splide__slide {
  opacity: 1;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(1) {
  transition-delay: 0.6s !important;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(2) {
  transition-delay: 0.8s !important;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(3) {
  transition-delay: 1s !important;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(4) {
  transition-delay: 1.2s !important;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(5) {
  transition-delay: 1.4s !important;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(6) {
  transition-delay: 1.6s !important;
}
.route-home .card-block.animated-element.animate-me .splide__slide:nth-child(7) {
  transition-delay: 1.8s !important;
}

body {
  padding-top: 110px;
}
@media (max-width: 991.98px) {
  body {
    padding-top: 170px;
  }
}

.banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 991.98px) {
  .notification-bar {
    display: none !important;
  }
}
.notification-bar .splide__list {
  align-items: center;
}
.notification-bar {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.notification-bar a {
  text-decoration: none;
}
.notification-bar li, .notification-bar p {
  font: 16px "Youth", sans-serif;
  font-size: 0.875rem;
  line-height: 0.9;
}
.notification-bar .notification-bar__slider {
  padding: 0;
}
.notification-bar .splide__arrow--prev {
  left: 0;
}
.notification-bar .splide__arrow--next {
  right: 0;
}
.notification-bar__slider {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (max-width: 991.98px) {
  .notification-bar__slider {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
}
.notification-bar__slider p {
  padding: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  transition: all 0.2s ease-in;
  background: white;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
}
.header .top-navigation .button-links li {
  margin-left: 10px;
}
.header .top-navigation {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.header .top-navigation .button-icon {
  background: transparent;
  font-size: 1.1rem;
  margin: 0;
  background: transparent;
}
.header .logo-container {
  position: relative;
  z-index: 99;
}
@media (max-width: 991.98px) {
  .header .logo-container img {
    max-width: 120px;
  }
}
.header .nav-container {
  position: relative;
  z-index: 999;
}
@media (max-width: 991.98px) {
  .header #header-navigation {
    padding: 0rem;
    padding-left: calc(1.28125rem + 0.375vw);
    padding-right: 0.625rem;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .header #header-navigation {
    padding-left: 1.5625rem;
  }
}
.header img {
  max-width: 165px;
  margin-bottom: 0.625rem;
  margin-top: 0.625rem;
}
.header nav.bottom {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: end;
  z-index: 20;
}
@media (max-width: 991.98px) {
  .header nav.bottom li:not(:last-child) {
    display: none;
  }
  .header nav.bottom .search-mobile-button {
    position: relative;
    top: 2px;
  }
}
.header nav.bottom .hamburger-container {
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
}
.header nav.bottom .hamburger-container a {
  align-items: center;
  justify-content: center;
  display: flex;
  padding-left: 20px;
}
@media (max-width: 991.98px) {
  .header nav.bottom .hamburger-container a {
    margin-right: -15px;
    padding-right: 0;
  }
}
.header nav.bottom .hamburger-container span {
  margin-right: 0.3125rem;
}
.header nav.bottom .hamburger--arrow {
  position: relative;
  padding-right: 0 !important;
  top: 1px;
}
.header nav.bottom .hamburger-container a {
  padding-top: 0;
  padding-bottom: 0;
}
.header nav.bottom > ul {
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.header nav.bottom > ul > li {
  transition: 0.2s 0.2s; /* delay of 1 seconds on hover off */
  position: static;
}
.header nav.bottom > ul > li a {
  text-decoration: none;
  width: 100%;
  font: 16px "Youth", sans-serif;
  font-size: 1rem;
  padding-left: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .header nav.bottom > ul > li a {
    padding-left: 2.5rem;
  }
}
.header nav.bottom > ul > li a {
  padding-top: calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .header nav.bottom > ul > li a {
    padding-top: 1.5625rem;
  }
}
.header nav.bottom > ul > li a {
  padding-bottom: calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .header nav.bottom > ul > li a {
    padding-bottom: 1.5625rem;
  }
}
.header nav.bottom > ul > li a {
  display: inline-block;
  letter-spacing: -0.1px;
  font-weight: 600;
  color: #0033AD;
}
@media (max-width: 991.98px) {
  .header nav.bottom > ul > li a {
    padding: 15px 0 15px 15px;
  }
}
.header nav.bottom > ul > li:hover > ul {
  visibility: visible;
  z-index: -1;
  opacity: 1;
}
.header nav.bottom > ul > li ul {
  width: 100%;
  position: absolute;
  left: 0;
  opacity: 0;
  visibility: hidden;
  top: calc(100% - 0px);
  z-index: 9999;
  background: white;
  flex-wrap: wrap;
  display: flex;
  box-shadow: inset 0px 30px 35px rgba(0, 0, 0, 0.05);
  z-index: -99;
  padding: 20px;
  transition: all 0.2s ease-in;
}
.header nav.bottom > ul > li ul li {
  width: 33%;
}
.header nav.bottom > ul > li ul li a {
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
  padding: 10px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
}
.header nav.bottom > ul > li ul li a:after {
  content: ">";
  color: #3D6FE5;
}
.header nav.bottom > ul > li > a {
  text-align: center;
}
.header nav.bottom > ul > li.search a {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .header nav.bottom > ul > li.search a {
    font-size: 1.5rem;
  }
}
.header nav.bottom > ul > li.search a {
  padding: 1.25rem;
}
.header nav.bottom > ul > li.hamburger a {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .header nav.bottom > ul > li.hamburger a {
    font-size: 1.5rem;
  }
}
.header nav.bottom > ul > li.hamburger a {
  padding-left: 0.9375rem;
  padding-right: 0;
}
.header .logo-container a:after {
  transition: all 0s ease-in;
  opacity: 0;
  background-image: url("../img/red-header.png");
  position: absolute;
  visibility: hidden;
  z-index: -10;
  top: 50%;
  left: 50%;
  width: 500%;
  transform: translate(-50%, -50%);
  background-position: center;
  height: 300%;
  background-repeat: no-repeat;
  content: "";
}
@media (max-width: 991.98px) {
  .header .logo-container a:after {
    width: 370%;
    height: 220%;
    background-position: 40px right center;
    background-size: cover;
  }
}
.header.fixed-top .logo-container a {
  position: relative;
  display: inline-block;
}
.header.fixed-top .logo-container a:after {
  transition: all 2s ease-in;
  visibility: visible;
  z-index: 5;
  opacity: 1;
}
.header.fixed-top .logo-container a img {
  z-index: 10;
  position: relative;
}

body.fixed-top {
  padding-top: 155px;
}
@media (max-width: 991.98px) {
  body.fixed-top {
    padding-top: 100px;
  }
}

.navigation-content .navigation-content {
  display: none;
}
.navigation-content .navigation-content.active {
  display: block;
}

.sidebar-navigation {
  width: 100%;
}
.sidebar-navigation ul {
  width: 100%;
}
.sidebar-navigation li {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  position: relative;
}
.sidebar-navigation li.active, .sidebar-navigation li:hover {
  background: rgba(255, 255, 255, 0.3);
}
.sidebar-navigation li.active:before, .sidebar-navigation li:hover:before {
  width: 45px;
  border-left: 5px solid;
  position: Absolute;
  left: -50px;
  content: "";
  height: 100%;
  top: 0;
  background: rgba(255, 255, 255, 0.3);
}
.sidebar-navigation li.active:after, .sidebar-navigation li:hover:after {
  width: 15px;
  position: Absolute;
  left: 100%;
  content: "";
  height: 100%;
  top: 0;
  background: rgba(255, 255, 255, 0.3);
}
.sidebar-navigation li a {
  color: white;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0;
  text-decoration: none;
  font-weight: 600;
}
.sidebar-navigation.slim ul {
  padding-left: calc(1.5rem + 3vw);
}
@media (min-width: 1200px) {
  .sidebar-navigation.slim ul {
    padding-left: 3.75rem;
  }
}
.sidebar-navigation.slim ul li {
  width: 99.5%;
}
.sidebar-navigation.slim ul li:active, .sidebar-navigation.slim ul li:hover {
  left: 0;
}

#main {
  min-height: 50vh;
}

.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

html {
  scroll-behavior: smooth;
}

.block-element {
  scroll-margin-top: 100px;
}

#modal-mega-menu-desktop {
  align-items: center;
  justify-content: center;
}
#modal-mega-menu-desktop .modal-box__close {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  padding: 20px;
}
#modal-mega-menu-desktop .modal-box__close i {
  font-size: 2em;
}
#modal-mega-menu-desktop .container, #modal-mega-menu-desktop .row {
  height: 100%;
}
#modal-mega-menu-desktop .modal-box__content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#modal-mega-menu-desktop .left-navigation, #modal-mega-menu-desktop .right-navigation {
  padding: 200px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#modal-mega-menu-desktop .left-navigation {
  height: 100%;
  position: relative;
}
#modal-mega-menu-desktop .left-navigation ul {
  width: 100%;
}
#modal-mega-menu-desktop .left-navigation ul:first-of-type li {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.5625rem + 3.75vw);
}
@media (min-width: 1200px) {
  #modal-mega-menu-desktop .left-navigation ul:first-of-type li {
    font-size: 4.375rem;
  }
}
#modal-mega-menu-desktop .left-navigation ul:first-of-type li {
  padding-bottom: 1.25rem;
  font-weight: bold;
  letter-spacing: -2px;
}
#modal-mega-menu-desktop .left-navigation ul:first-of-type li a {
  color: white;
  text-decoration: none;
}
#modal-mega-menu-desktop .right-navigation {
  height: 100%;
}
#modal-mega-menu-desktop .right-navigation ul {
  columns: 2;
  width: 100%;
}
#modal-mega-menu-desktop .right-navigation ul li {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.34375rem + 1.125vw);
}
@media (min-width: 1200px) {
  #modal-mega-menu-desktop .right-navigation ul li {
    font-size: 2.1875rem;
  }
}
#modal-mega-menu-desktop .right-navigation ul li {
  font-weight: bold;
  line-height: 1.2;
}
#modal-mega-menu-desktop .right-navigation ul li a {
  text-decoration: none;
  display: inline-block;
  color: white;
}

#mm-clone-mobile-menu, #mobile-menu {
  z-index: 9999999999;
}
#mm-clone-mobile-menu .mm-navbar, #mobile-menu .mm-navbar {
  display: none;
}
#mm-clone-mobile-menu .mm-panel, #mobile-menu .mm-panel {
  background: !important;
}
#mm-clone-mobile-menu .mm-panel *, #mobile-menu .mm-panel * {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
#mm-clone-mobile-menu .mm-btn--next:after, #mm-clone-mobile-menu .mm-btn--prev:before, #mobile-menu .mm-btn--next:after, #mobile-menu .mm-btn--prev:before {
  border-color: white;
}

.breadcrumbs {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  background: rgba(43, 65, 126, 0.7);
  z-index: 199;
}
.breadcrumbs ul {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: row-reverse;
}

.breadcrumbs li {
  padding: 0.3125rem 0.625rem 0.3125rem 0;
  text-transform: none;
  display: flex;
  align-items: center;
}
.breadcrumbs li:last-child {
  padding-left: 0;
}
.breadcrumbs li:after {
  content: "\f054";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  margin-left: 0.625rem;
  position: static; /* was nudged 2px down and sat off-centre — BugHerd #82 */
}
.breadcrumbs li:first-child:after {
  display: none;
}

.breadcrumbs a {
  font: 16px "Youth", sans-serif;
  font-size: 0.9375rem;
  letter-spacing: -0px;
  text-decoration: underline;
  color: white;
}

.callout-navigation {
  margin: 0 auto;
  position: relative;
  z-index: 50;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.callout-navigation.inner {
  width: 100%;
  max-width: 100%;
  margin-bottom: calc(-1.34375rem - 1.125vw);
}
@media (min-width: 1200px) {
  .callout-navigation.inner {
    margin-bottom: -2.1875rem;
  }
}
.callout-navigation.inner {
  margin-top: calc(-1.34375rem - 1.125vw);
}
@media (min-width: 1200px) {
  .callout-navigation.inner {
    margin-top: -2.1875rem;
  }
}
.callout-navigation.inner ul {
  justify-content: space-evenly;
}
.callout-navigation.inner ul li:after {
  position: static;
  height: 50px;
}
@media (max-width: 991.98px) {
  .callout-navigation {
    margin-top: calc(-1.3125rem - 0.75vw);
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .callout-navigation {
    margin-top: -1.875rem;
  }
}
.callout-navigation .callout-navigation-content {
  float: right;
  background: #f7f7f6;
  border-radius: 12px;
  overflow: hidden;
  min-width: 400px;
}
@media (max-width: 991.98px) {
  .callout-navigation .callout-navigation-content {
    display: none;
  }
}
.callout-navigation .callout-navigation-content .find-out-content {
  max-width: 400px;
  padding: 20px 25px 10px 25px;
}
.callout-navigation .callout-navigation-content .find-out-content p {
  color: black;
  font-size: 15px;
}
@media (max-width: 991.98px) {
  .callout-navigation .callout-navigation-content {
    display: none;
    float: none;
  }
}
.callout-navigation .callout-navigation-content-header {
  background: #0042DD;
  padding: 0.9375rem calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .callout-navigation .callout-navigation-content-header {
    padding: 0.9375rem 2rem;
  }
}
.callout-navigation .callout-navigation-content-header h3 {
  padding-bottom: 0;
  margin-bottom: 0;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .callout-navigation .callout-navigation-content-header h3 {
    font-size: 2rem;
  }
}
.callout-navigation .callout-navigation-content-header h3 {
  text-transform: uppercase;
  font-weight: 800;
}
.callout-navigation ul {
  align-items: start;
  justify-content: space-between;
  padding: 0.9375rem calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .callout-navigation ul {
    padding: 0.9375rem 1.5625rem;
  }
}
.callout-navigation ul li {
  flex: 1;
  text-align: start;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  font-weight: 700;
  position: relative;
  transition: all 0.2s ease-in;
}
.callout-navigation ul li:last-child a {
  border-bottom: 0;
}
.callout-navigation ul li a {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1;
  align-items: start;
  justify-content: start;
  color: black;
  color: #0033AD;
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
  font: 16px "Youth", sans-serif;
  font-size: 1rem;
}
.callout-navigation ul li:hover {
  background: #0042DD;
}
.callout-navigation ul li:hover a {
  color: white;
}
@media (max-width: 991.98px) {
  .callout-navigation ul li {
    font: 16px "Youth", sans-serif;
    font-size: 1rem;
  }
}
.callout-navigation ul li span {
  display: block;
  font-weight: 400;
}
.callout-navigation ul li a {
  width: 100%;
  text-decoration: none;
  letter-spacing: 0;
}

@media (max-width: 991.98px) {
  .callout-navigation.inner {
    margin-bottom: 1.25rem;
    z-index: 20;
    margin-top: -5px;
    position: sticky;
    top: 106px;
  }
  .callout-navigation.inner .col-md-12 {
    padding: 0;
  }
  .callout-navigation.inner nav {
    position: relative;
    z-index: 2;
  }
  .callout-navigation.inner nav ul {
    display: none;
  }
}

.mobile-inner-nav {
  display: none;
  text-align: center;
  max-width: 100%;
  position: sticky;
  top: 130px;
  margin: 0 auto;
  z-index: 1000;
  padding: 1em;
}
@media (max-width: 991.98px) {
  .mobile-inner-nav {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.mobile-inner-nav select {
  padding: 0.5em;
}
.mobile-inner-nav label {
  padding-bottom: 0px;
  margin-bottom: 0px;
  color: white;
  width: auto;
  margin-right: 10px;
}

.mm-panels .mm-panel {
  background-color: #0042DD;
}
.mm-panels a {
  background: transparent !important;
  color: white !important;
  font-weight: 700;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .mm-panels a {
    font-size: 1.375rem;
  }
}
.mm-panels .sub-menu {
  background-color: #0042DD;
}

.mobile-header {
  color: white;
}
.mobile-header span {
  font-size: 12px;
  line-height: 0.9 !important;
}
.mobile-header img {
  margin: 0;
  height: 25px;
  object-fit: contain;
  margin-bottom: 5px;
}
.mobile-header li {
  position: relative;
  flex: 1;
}
.mobile-header li:after {
  border-right: 1px solid #ccc;
  height: 20px;
  width: 1px;
  right: 0;
  background: White;
  content: "";
  top: 50%;
  transform: translate(0, -50%);
  position: absolute;
}
.mobile-header li:last-child:after {
  display: none;
}
.mobile-header li a {
  display: flex;
  padding: 10px 10px;
  text-align: center;
  align-items: center;
  justify-content: Center;
  flex-direction: column;
  text-decoration: none;
}

.callout-navigation-content ul {
  max-height: 350px;
  overflow-y: scroll;
}

.callout-navigation-content ul::-webkit-scrollbar-track {
  border: 1px solid black;
  background-color: #070538 !important;
}

.callout-navigation-content ul::-webkit-scrollbar {
  width: 7px;
  background-color: #070538 !important;
  outline: 1px solid #070538;
}

.callout-navigation-content ul::-webkit-scrollbar-thumb {
  background-color: #fff;
}

.blockelement__draggable-element .animated-element.media-text:after {
  display: none !important;
}
.blockelement__draggable-element .animated-element * {
  transform: none !important;
  animation: initial !important;
  opacity: 1 !important;
}
.blockelement__draggable-element .banner {
  min-height: 40vh;
}
.blockelement__draggable-element iframe {
  display: none;
}
.blockelement__draggable-element .activity-finder {
  margin-top: 20px;
}
.blockelement__draggable-element .card {
  display: none;
}
.blockelement__draggable-element .card:nth-child(1) {
  width: 40%;
  display: block;
}
.blockelement__draggable-element .card:nth-child(1):after {
  content: "other cards display online on the preview/live";
}

/* ============================================================
   Figma menu overlay (migrated from the /figma-* prototype)
   White header + dimmed promo image left + white nav panel right.
   ============================================================ */
.fh-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0042DD;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.fh-btn.is-white {
  background: #fff;
  color: #0042DD;
}
.fh-btn svg {
  width: 20px;
  height: 20px;
}
.fh-btn svg path {
  stroke: currentColor;
}

.fh-menu {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  background: #fff;
  color: #1D1E1F;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease;
}
.fh-menu.is-open {
  opacity: 1;
  visibility: visible;
}
.fh-menu__strap {
  background: #0042DD;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 40px;
  line-height: 1.3;
  flex: 0 0 auto;
}
.fh-menu__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}
.fh-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1D1E1F;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
.fh-menu__smiley {
  height: 24px;
}
.fh-menu__logo {
  justify-self: center;
}
.fh-menu__logo img {
  height: 30px;
  display: block;
}
.fh-menu__close {
  justify-self: end;
  cursor: pointer;
}
.fh-menu__close svg {
  width: 22px;
  height: 22px;
  stroke: #1D1E1F;
  stroke-width: 3;
  fill: none;
}
.fh-menu__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 0;
}
.fh-menu__promo {
  position: relative;
  background: #0042DD center/cover no-repeat;
  overflow: hidden;
}
.fh-menu__promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 10, 45, 0.5);
}
.fh-menu__promo-inner {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 56px;
  z-index: 1;
  color: #fff;
}
.fh-menu__promo-inner h3 {
  color: #fff;
  font-size: 40px;
  line-height: 1.08;
  max-width: 16ch;
  margin: 0 0 24px;
}
.fh-menu__nav {
  background: #fff;
  overflow-y: auto;
}
.fh-menu__nav a {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 0 50px;
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: background 0.15s;
}
.fh-menu__nav a:hover {
  background: #f2f2f2;
}
@media (max-width: 900px) {
  .fh-menu__body {
    grid-template-columns: 1fr;
  }
  .fh-menu__promo {
    display: none;
  }
  .fh-menu__nav a {
    font-size: 26px;
    min-height: 68px;
    padding: 0 32px;
  }
}

/* BugHerd #138 — the menu promo is the latest news story; a small kicker says so */
.fh-menu__promo-kicker {
  display: block;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 12px;
}

.fh-menu__promo-inner h3 {
  max-width: 18ch;
}

#footer {
  background: #00396f;
  padding: 3em 0 0em 0;
  background-image: url("../img/footer.png");
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: #fff;
  text-align: left;
}
@media (max-width: 991.98px) {
  #footer {
    background-position: center;
    background-size: cover;
  }
}
#footer p {
  font: 16px "Youth", sans-serif;
  font-size: 1rem;
  padding: 0;
  line-height: 1.4 !important;
  margin: 0;
  letter-spacing: 1.25px;
}
#footer .social-links {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#footer .social-links ul {
  display: flex;
}
#footer .social-links li {
  font-size: 2rem;
}
#footer .social-links li a {
  padding: 0 20px;
}
@media (max-width: 991.98px) {
  #footer .copyright, #footer .terms-links + p {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
  }
}
#footer .logos {
  padding-top: 3em;
  padding-bottom: 2em;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
#footer .logos p {
  margin-bottom: 20px;
}
#footer .logos .logo-box {
  width: 100%;
  justify-content: end;
  display: flex;
  align-items: center;
}
#footer .logos .logo-box img {
  max-height: 90px;
  margin-left: 20px;
}
@media (max-width: 991.98px) {
  #footer .logos .logo-box {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  #footer .logos .logo-box img {
    padding: 10px;
  }
}
#footer .footer-links {
  padding: 4em 0 3em 0;
}
#footer .footer-links ul {
  display: flex;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  #footer .footer-links ul {
    font-size: 1.5rem;
  }
}
#footer .footer-links ul li {
  padding: 10px 25px 10px 0;
  letter-spacing: 0px;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2875rem + 0.45vw);
}
@media (min-width: 1200px) {
  #footer .footer-links ul li {
    font-size: 1.625rem;
  }
}
#footer .footer-links ul li {
  font-weight: 400;
}
@media (max-width: 991.98px) {
  #footer .footer-links ul li {
    font-size: 18px;
    padding: 10px;
  }
}
@media (max-width: 991.98px) {
  #footer .footer-links {
    padding-top: 20px;
  }
  #footer .footer-links .justify-content-end {
    justify-content: center !important;
    margin-top: 20px;
  }
  #footer .footer-links ul {
    flex-wrap: wrap;
    align-items: Center;
    justify-content: Center;
  }
  #footer .footer-links ul li {
    padding: 10px 15px 10px 15px;
  }
}
#footer .footer-bottom {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-top: 2em;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
#footer h5 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3875rem + 1.65vw);
}
@media (min-width: 1200px) {
  #footer h5 {
    font-size: 2.625rem;
  }
}
#footer h5 {
  font-weight: 500;
  padding-bottom: 0.25em;
}
@media (max-width: 991.98px) {
  #footer .footer-logo {
    text-align: center;
    margin-bottom: 20px;
  }
}
#footer a {
  text-decoration: none;
  color: white;
}
#footer .venue-links {
  columns: 2;
}
#footer h4 {
  padding-bottom: 0.625rem;
}
#footer p {
  font: 16px "Youth", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
}
#footer .terms-links li:after {
  content: "|";
  margin: 0 5px;
  display: inline-block;
}
#footer .terms-links li:last-child:after {
  content: "";
  margin: 0;
  display: none;
}
#footer ul li {
  font: 16px "Youth", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  padding-bottom: 0.3125rem;
}
#footer nav {
  margin-left: -0.625rem;
}

.social-media {
  margin: 2em 0;
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc;
}

.follow-us {
  border: 1px solid white;
  padding: 2em 0;
  margin: 2em 0;
  border-left: 0;
  border-right: 0;
}
.follow-us h4 {
  padding: 0;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .follow-us h4 {
    font-size: 1.375rem;
  }
}
.follow-us h4 {
  font-weight: 400;
}

/* ============================================================
   Site chrome — header, menu overlay accordion, footer.
   Spec: Figma WLL-17-DESKTOP-CONTENT-BLOCKS (8V7zliVKiRBmMgs4VV1Kif, frame 11939:96)
         + WLL-17-MOBILE-CONTENT-BLOCKS (b2bFp7sOiZapCRPmJx6ehF, frame 21911:343).
   Reference renders: docs/figma-ref/content-blocks-desktop|mobile/.
   This file is the single owner of header/footer styling — no inline <style> in the partials.
   ============================================================ */
/* ---------- viewport scrolling ----------
   Legacy CSS put overflow-x:hidden on BOTH html and body, which turns <body> into the scroll
   container (window.scrollY stays 0, scroll-driven JS never fires). Clip on body instead. */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ---------- body offset for the fixed header ----------
   The header is fixed, so the page has to be pushed down by exactly its height. That height is not a
   constant: the notification strap can be switched off in the CMS, and when it is on it wraps to two
   or three lines on a phone. xcite.js measures the real header and publishes it as --wll-header-h;
   the literals here are only the value used before that script runs. They are the two-cell site bar
   (88px + its 1px rule) with the strap's 39px band added when the strap is rendered. */
body,
body.fixed-top {
  padding-top: var(--wll-header-h, 128px) !important;
}
@media (max-width: 991.98px) {
  body,
  body.fixed-top {
    padding-top: var(--wll-header-h, 64px) !important;
  }
}

/* Master.cshtml sets this when the strap is switched off, so the first paint is already right
   instead of opening a 39px gap under the header until the script runs. */
body.no-strap {
  padding-top: var(--wll-header-h, 89px) !important;
}
@media (max-width: 991.98px) {
  body.no-strap {
    padding-top: var(--wll-header-h, 65px) !important;
  }
}

/* ---------- header shell ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: none;
  /* legacy pieces that the brand header replaces */
}
.header .top-navigation, .header .mobile-header {
  display: none !important;
}

/* strapline / notification bar — blue band, white centred copy */
.header .notification-bar,
.site-strap {
  background: #0042DD !important;
  color: #fff;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Youth", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 60px !important;
}
@media (min-width: 1600px) {
  .header .notification-bar,
  .site-strap {
    font-size: 15px;
  }
}
.header .notification-bar,
.site-strap {
  /* shown on mobile too (BugHerd #8); xcite.js pushes the body down by the real header height */
}
@media (max-width: 991.98px) {
  .header .notification-bar,
  .site-strap {
    display: flex !important;
    font-size: 12px;
    padding: 6px 34px !important;
    min-height: 0;
  }
}
.header .notification-bar p, .header .notification-bar li, .header .notification-bar a, .header .notification-bar strong,
.site-strap p,
.site-strap li,
.site-strap a,
.site-strap strong {
  color: #fff !important;
  font-weight: 500 !important;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  font-size: inherit;
}
.header .notification-bar .container,
.site-strap .container {
  max-width: none;
  padding: 0;
}
.header .notification-bar .row,
.site-strap .row {
  margin: 0;
}
.header .notification-bar .col-12,
.site-strap .col-12 {
  padding: 0;
}
.header .notification-bar .notification-bar__slider, .header .notification-bar .splide,
.site-strap .notification-bar__slider,
.site-strap .splide {
  padding: 0;
}
.header .notification-bar .splide__arrow,
.site-strap .splide__arrow {
  background: transparent;
  width: 24px;
  height: 24px;
  opacity: 0.8;
}
.header .notification-bar .splide__arrow svg,
.site-strap .splide__arrow svg {
  fill: #fff;
  width: 14px;
  height: 14px;
}
.header .notification-bar .splide__arrow--prev,
.site-strap .splide__arrow--prev {
  left: -30px;
}
.header .notification-bar .splide__arrow--next,
.site-strap .splide__arrow--next {
  right: -30px;
}
@media (max-width: 991.98px) {
  .header .notification-bar .splide__arrow--prev,
  .site-strap .splide__arrow--prev {
    left: -28px;
  }
  .header .notification-bar .splide__arrow--next,
  .site-strap .splide__arrow--next {
    right: -28px;
  }
}

/* the three-cell bar: [Join Now] | [xcite] | [Menu] */
#header-navigation.site-bar {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#header-navigation.site-bar .site-bar__row {
  display: flex;
  align-items: stretch;
  height: 88px;
  position: relative;
}
#header-navigation.site-bar .site-bar__cell {
  display: flex;
  align-items: center;
}
#header-navigation.site-bar .site-bar__cell--left {
  padding: 0 44px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
#header-navigation.site-bar .site-bar__cell--center {
  flex: 1 1 auto;
  justify-content: center;
  padding: 0 24px;
}
#header-navigation.site-bar .site-bar__cell--right {
  padding: 0 44px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  justify-content: flex-end;
}
#header-navigation.site-bar {
  /* the side cells differ in width (Join Now vs Search + Menu), so on desktop the logo is pinned to the
     true centre of the bar rather than the centre of the leftover space */
}
@media (min-width: 992px) {
  #header-navigation.site-bar .site-bar__cell--center .site-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
#header-navigation.site-bar .site-logo {
  display: block;
  line-height: 0;
}
#header-navigation.site-bar .site-logo img {
  height: 34px;
  width: auto;
  display: block;
}
@media (min-width: 1600px) {
  #header-navigation.site-bar .site-logo img {
    height: 42px;
  }
}
#header-navigation.site-bar .join-now, #header-navigation.site-bar .menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  white-space: nowrap;
}
@media (min-width: 1600px) {
  #header-navigation.site-bar .join-now, #header-navigation.site-bar .menu-toggle {
    font-size: 22px;
  }
}
#header-navigation.site-bar .join-now:hover, #header-navigation.site-bar .menu-toggle:hover {
  color: #0042DD;
  text-decoration: none;
}
#header-navigation.site-bar .join-now .join-now-icon {
  height: 26px;
  width: auto;
  display: block;
}
#header-navigation.site-bar .menu-toggle .burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
#header-navigation.site-bar .menu-toggle .burger span {
  display: block;
  width: 28px;
  height: 3px;
  background: #0042DD;
  border-radius: 2px;
}
#header-navigation.site-bar {
  /* mobile: [xcite] | [smiley Join Now] | [burger] with dividers */
}
@media (max-width: 991.98px) {
  #header-navigation.site-bar .site-bar__row {
    height: 64px;
  }
  #header-navigation.site-bar .site-bar__cell--left {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 12px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 0;
  }
  #header-navigation.site-bar .site-bar__cell--center {
    order: 1;
    flex: 0 0 auto;
    padding: 0 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
  #header-navigation.site-bar .site-bar__cell--right {
    order: 3;
    padding: 0 20px;
    border-left: 0;
  }
  #header-navigation.site-bar .site-logo img {
    height: 24px;
  }
  #header-navigation.site-bar .join-now, #header-navigation.site-bar .menu-toggle {
    font-size: 16px;
    gap: 10px;
  }
  #header-navigation.site-bar .join-now .join-now-icon {
    height: 22px;
  }
  #header-navigation.site-bar .menu-toggle .menu-toggle__label {
    display: none;
  }
  #header-navigation.site-bar .search-toggle {
    margin-right: 18px;
    padding-right: 18px;
    gap: 0;
  }
  #header-navigation.site-bar .search-toggle svg {
    width: 22px;
    height: 22px;
  }
  #header-navigation.site-bar .search-toggle .search-toggle__label {
    display: none;
  }
}

/* ---------- menu overlay: second-tier accordion (extends .fh-menu in _toolbar.scss) ---------- */
.fh-menu__group {
  border-bottom: 0;
}
.fh-menu__item--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 88px;
  padding: 0 50px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  text-align: left;
  cursor: pointer;
  line-height: 1.1;
  transition: background 0.15s;
}
.fh-menu__item--toggle:hover {
  background: #f2f2f2;
}
.fh-menu__chev {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  stroke: #0042DD;
  fill: none;
  transition: transform 0.24s ease;
}
.fh-menu__group.is-open .fh-menu__chev {
  transform: rotate(180deg);
}
.fh-menu__group.is-open > .fh-menu__item--toggle {
  background: #f2f2f2;
}
.fh-menu .fh-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f6f8ff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.fh-menu .fh-submenu a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 50px 0 74px;
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: background 0.15s, color 0.15s;
}
.fh-menu .fh-submenu a:hover {
  background: #e9f0ff;
  color: #0042DD;
}
.fh-menu__group.is-open .fh-submenu {
  max-height: 900px;
}
@media (max-width: 900px) {
  .fh-menu__strap {
    font-size: 12px;
    padding: 8px 20px;
  }
  .fh-menu__bar {
    padding: 14px 20px;
  }
  .fh-menu__link {
    font-size: 15px;
    white-space: nowrap;
    gap: 8px;
  }
  .fh-menu__logo img {
    height: 26px;
  }
  .fh-menu__item--toggle {
    font-size: 26px;
    min-height: 68px;
    padding: 0 32px;
  }
  .fh-menu .fh-submenu a {
    padding: 0 32px 0 52px;
    min-height: 52px;
  }
}

/* ---------- footer ---------- */
.site-social {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.site-social svg {
  width: 30px !important;
  height: 30px !important;
}
.site-social { /* BugHerd #63 */
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.site-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 0;
  color: #0042DD;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: background 0.15s;
}
.site-social a:first-child {
  border-left: 0;
}
.site-social a:hover {
  background: #F5F2F1;
  color: #0042DD;
}
.site-social svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  display: block;
}
@media (max-width: 991.98px) {
  .site-social a {
    padding: 20px 0;
  }
  .site-social svg {
    width: 26px;
    height: 26px;
  }
}

#footer.site-footer {
  background: #0042DD;
  background-image: none;
  color: #fff;
  text-align: left;
  padding: 60px 60px 44px;
  margin: 0;
}
@media (max-width: 991.98px) {
  #footer.site-footer {
    padding: 32px 20px 28px;
  }
}
#footer.site-footer .site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}
#footer.site-footer .site-footer__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  font-size: inherit;
}
#footer.site-footer .site-footer__links li {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: inherit;
  letter-spacing: 0;
}
#footer.site-footer .site-footer__links li:first-child a {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
#footer.site-footer .site-footer__links { /* BugHerd #64 */ }
#footer.site-footer .site-footer__links a {
  display: block;
  color: #fff;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
}
@media (min-width: 1600px) {
  #footer.site-footer .site-footer__links a {
    font-size: 22px;
  }
}
#footer.site-footer .site-footer__links a:hover {
  text-decoration: underline;
  color: #fff;
}
@media (max-width: 991.98px) {
  #footer.site-footer .site-footer__links {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  #footer.site-footer .site-footer__links a {
    font-size: 26px;
    padding: 12px 0;
  }
}
#footer.site-footer {
  /* BugHerd #103 — the lock-up ran the full width of the footer and swamped everything under it */
}
#footer.site-footer .site-footer__lockup {
  padding: 64px 0 0;
  line-height: 0;
}
#footer.site-footer .site-footer__lockup img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  #footer.site-footer .site-footer__lockup {
    padding: 32px 0 0;
  }
  #footer.site-footer .site-footer__lockup img {
    max-width: none;
  }
}
#footer.site-footer .site-footer__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 44px;
  padding: 44px 0 0;
}
#footer.site-footer .site-footer__partners img {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (max-width: 991.98px) {
  #footer.site-footer .site-footer__partners {
    gap: 20px 28px;
    padding: 32px 0 0;
  }
  #footer.site-footer .site-footer__partners img {
    height: 34px;
    max-width: 140px;
  }
}
#footer.site-footer .site-footer__charity {
  color: #fff;
  font-family: "Youth", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  padding: 36px 0 0;
  letter-spacing: 0;
}
#footer.site-footer .site-footer__charity a {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 991.98px) {
  #footer.site-footer .site-footer__charity {
    text-align: left;
    padding: 22px 0 0;
    font-size: 14px;
  }
}

/* ---------- header search button + overlay ---------- */
/* styled like the Menu toggle: same type, blue magnifier, divider on its right spanning the bar */
.site-bar .search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  margin-right: 36px;
  padding: 0 36px 0 0;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
@media (min-width: 1600px) {
  .site-bar .search-toggle {
    font-size: 22px;
  }
}
.site-bar .search-toggle svg {
  width: 24px;
  height: 24px;
  stroke: #0042DD;
  fill: none;
  transition: transform 0.2s ease;
}
.site-bar .search-toggle:hover {
  color: #0042DD;
  text-decoration: none;
}
.site-bar .search-toggle:hover svg {
  transform: scale(1.1);
}
.site-bar .search-toggle:focus-visible {
  outline: 2px solid #0042DD;
  outline-offset: -4px;
}

.fh-search {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  background: rgba(245, 242, 241, 0.98);
  color: #1D1E1F;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.fh-search[hidden] {
  display: flex;
}
.fh-search.is-open {
  opacity: 1;
  visibility: visible;
}
.fh-search__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 44px;
  height: 88px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 991.98px) {
  .fh-search__bar {
    padding: 0 20px;
    height: 64px;
  }
}
.fh-search__logo img {
  height: 26px;
  width: auto;
  display: block;
}
.fh-search__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 18px;
  padding: 0;
}
.fh-search__close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}
.fh-search__close:hover {
  color: #0042DD;
}
.fh-search__form {
  width: min(860px, 100% - 40px);
  margin: 12vh auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
  transform: translateY(18px);
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.fh-search__form .fh-btn {
  align-self: stretch;
}
@media (max-width: 991.98px) {
  .fh-search__form {
    grid-template-columns: 1fr;
    margin-top: 8vh;
  }
}
.fh-search.is-open .fh-search__form {
  transform: none;
}
.fh-search__field {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 0 22px;
}
.fh-search__field svg {
  width: 26px;
  height: 26px;
  stroke: #0042DD;
  fill: none;
  flex: none;
}
.fh-search__field input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  padding: 20px 0;
  color: #1D1E1F;
  min-width: 0;
}
.fh-search__field input::placeholder {
  color: rgba(29, 30, 31, 0.35);
  font-weight: 500;
}
.fh-search__field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
@media (max-width: 991.98px) {
  .fh-search__field input {
    font-size: 20px;
    padding: 16px 0;
  }
}
.fh-search__field:focus-within {
  border-color: #0042DD;
  box-shadow: 0 0 0 4px rgba(0, 66, 221, 0.12);
}
.fh-search__hint {
  grid-column: 1/-1;
  margin: 6px 0 0;
  padding: 0;
  font-family: "Youth", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: rgba(29, 30, 31, 0.6);
}
.fh-search__quick {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.fh-search__quick a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fh-search__quick a:hover {
  background: #0042DD;
  border-color: #0042DD;
  color: #fff;
}

/* BugHerd #130 — the footer link columns, lock-up and partner row ran edge to edge; they now sit
   inside the same container width as the page content */
#footer.site-footer .site-footer__links, #footer.site-footer .site-footer__lockup, #footer.site-footer .site-footer__partners, #footer.site-footer .site-footer__charity {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
@media (max-width: 991.98px) {
  #footer.site-footer .site-footer__links, #footer.site-footer .site-footer__lockup, #footer.site-footer .site-footer__partners, #footer.site-footer .site-footer__charity {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- notification strap as a marquee (client, 11 Sep) ----------
   Two identical sets sit side by side on one track; the track slides left by half its width per
   cycle, which is exactly one set, so the loop never jumps. Hover pauses it. Reduced motion shows
   the first notice, static and centred. */
.notification-bar--marquee {
  display: block !important;
  padding: 0 !important;
  text-align: left;
  overflow: hidden;
}
.notification-bar--marquee:hover .notification-bar__track {
  animation-play-state: paused;
}
.notification-bar--marquee .container, .notification-bar--marquee .row, .notification-bar--marquee .col-12 {
  display: contents;
}

.notification-bar__viewport {
  overflow: hidden;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.notification-bar__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: strap-marquee var(--strap-duration, 30s) linear infinite;
  will-change: transform;
}

.notification-bar__set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.notification-bar__set li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 48px 6px 0;
  margin: 0;
  font-family: "Youth", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: #fff;
}
@media (min-width: 1600px) {
  .notification-bar__set li {
    font-size: 15px;
  }
}
@media (max-width: 991.98px) {
  .notification-bar__set li {
    font-size: 12px;
    padding-right: 32px;
  }
}
.notification-bar__set li p, .notification-bar__set li a, .notification-bar__set li strong {
  display: inline;
  color: #fff !important;
  margin: 0;
  padding: 0;
}
.notification-bar__set li::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  margin-left: 48px;
}
@media (max-width: 991.98px) {
  .notification-bar__set li::after {
    margin-left: 32px;
  }
}

@keyframes strap-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .notification-bar__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .notification-bar__set {
    width: 100%;
    justify-content: center;
  }
  .notification-bar__set[aria-hidden=true] {
    display: none;
  }
  .notification-bar__set li {
    white-space: normal;
    text-align: center;
    padding: 6px 20px;
  }
  .notification-bar__set li::after {
    display: none;
  }
  .notification-bar__set li:not(:first-child) {
    display: none;
  }
}
form {
  margin: 0px 0;
}
form .tandc-box {
  float: left;
  width: 100%;
  margin: 0 0 1.25rem 0;
  text-align: left;
}
form .tandc-box a {
  text-decoration: underline;
}
form .tandc-box label.tandc {
  float: left;
  width: auto;
  margin-left: 15px;
}
form .styled-checkbox {
  width: 28px;
  height: 28px;
  position: relative;
  float: left;
  background: #fcfff4;
  margin-bottom: 0.9375rem;
}
form .styled-checkbox .error {
  position: static;
  left: 0;
  width: 150px !important;
  top: 40px;
  height: auto !important;
  background: red;
  margin: 0.9375rem 0 0rem 0;
  line-height: 1.5em;
  text-indent: 10px;
  display: inline-block;
  font-size: 13px !important;
}
form .styled-checkbox label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
}
form .styled-checkbox label:after {
  content: "";
  width: 9px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 4px;
  opacity: 0;
  transform: rotate(-45deg);
  border-top: none;
  border-right: none;
  background: transparent;
}
form .styled-checkbox input[type=checkbox] {
  visibility: hidden;
}
form .styled-checkbox input[type=checkbox]:checked + label:after {
  opacity: 1;
}
form .email-validate {
  height: 0;
  opacity: 0;
  visibility: 0;
  width: 0;
  pointer-events: none;
  padding: 0;
  overflow: hidden;
}
form label {
  margin-bottom: 0.55em;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  line-height: 1.2em;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  form label {
    font-size: 1.375rem;
  }
}
form label {
  font-weight: 800;
  color: #0033AD;
}
form button {
  -webkit-appearance: none;
  appearance: none;
}
form button:hover, form input[type=submit]:hover {
  cursor: pointer;
}
form textarea, form input:not([type=checkbox]):not([type=radio]), form select {
  width: 100%;
  display: block;
  padding: 10px 20px !important;
  font-size: 1.2em;
  margin-bottom: 1.25rem;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: 0;
  color: black;
  background: transparent;
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
}
form .select-container {
  position: relative;
  margin-bottom: 2.2em;
  width: 100%;
  border-radius: 55px;
  background: #e8e8e8;
  border-radius: 55px;
}
form .select-container ::-webkit-input-placeholder {
  color: black;
}
form .select-container :-moz-placeholder {
  color: black;
}
form .select-container ::-moz-placeholder {
  color: black;
}
form .select-container :-ms-input-placeholder {
  color: black;
}
form .select-container.list-container {
  cursor: pointer;
}
form .select-container.list-container ul {
  position: absolute;
  color: #000;
  width: 100%;
  top: 122%;
  z-index: 100;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  background: white;
  overflow: hidden;
  max-height: 350px;
  overflow-y: scroll;
}
form .select-container.list-container ul li {
  padding: 0.75em 1.5em;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  opacity: 0;
}
form .select-container.list-container ul li i {
  position: static;
  display: inline-block;
  font-size: 1em;
  margin-left: 0;
  width: auto;
  margin-right: 0.625rem;
  transform: translate(0px, -50px);
}
form .select-container.list-container ul li span {
  transform: translate(20px, 0);
  display: inline-block;
}
form .select-container.list-container ul li:last-child {
  border-bottom: 0;
}
form .select-container.list-container ul li:hover {
  background: black;
  color: #fff;
  cursor: pointer;
  transition-delay: 0s !important;
}
form .select-container.list-container ul li:hover i, form .select-container.list-container ul li:hover span {
  color: #fff;
  transition-delay: 0s !important;
}
form .select-container.list-container.active ul {
  visibility: visible;
  opacity: 1;
  top: 102%;
}
form .select-container.list-container.active ul li {
  opacity: 1;
}
form .select-container.list-container.active ul li span {
  transform: translate(0px, 0);
}
form .select-container.list-container.active ul li i {
  transform: translate(0px, 0);
}
form .select-container.error i, form .select-container.success i {
  color: red;
}
form .select-container.error input {
  color: red !important;
  border: 3px solid red;
}
form .select-container.success input {
  color: green !important;
  border: 3px solid transparent;
}
form .select-container.success i {
  color: green;
}
form .select-container.success:after {
  color: green;
}
form .select-container label.error {
  position: absolute;
  float: right;
  width: 100%;
  padding: 0.3125rem;
  font-size: 0.8em;
  pointer-events: none;
  display: none;
}
form .select-container.error label.error {
  display: block;
}
form .select-container input, form .select-container select {
  text-indent: 60px;
  height: 3.7em;
  line-height: 3.7em;
  margin-bottom: 0;
  -webkit-appearance: none;
  appearance: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-radius: 15px;
  font-size: 1.1em;
  border: 3px solid transparent;
  background: transparent;
}
@media (max-width: 991.98px) {
  form .select-container input, form .select-container select {
    height: 3em;
    line-height: 3em;
  }
}
form .select-container input.no-event, form .select-container select.no-event {
  pointer-events: none;
}
form .select-container i {
  position: Absolute;
  left: 10px;
  content: "";
  width: 50px;
  top: 2%;
  height: 95%;
  display: flex;
  font-size: 2.25em;
  text-align: center;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #0042DD;
  pointer-events: none;
}
form .select-container > span {
  position: Absolute;
  right: 2px;
  text-align: center;
  content: "";
  width: 50px;
  top: 2px;
  display: flex;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #333;
  bottom: 2px;
  display: none;
  background: white;
  z-index: 10;
}
form .select-container.searched span {
  display: inline-block;
  cursor: pointer;
}
form .select-container.searched span i {
  color: red;
}
form .select-container:hover.searched span i {
  opacity: 0.5;
  cursor: pointer;
}
form .select-container:after {
  position: Absolute;
  pointer-events: none;
  right: 1%;
  content: "";
  width: 50px;
  top: 10%;
  height: 80%;
  content: "\f078";
  display: flex;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #333;
  font: normal normal normal 14px/1 FontAwesome;
}
form .select-container.selected i {
  color: green;
}
form .select-container.selected input[type=text] {
  color: green;
}
form .select-container input:disabled {
  cursor: pointer;
  color: #333;
}
form .input-container {
  position: relative;
  margin-bottom: 2.2em;
  width: 100%;
  border-radius: 55px;
  background: #e8e8e8;
  border-radius: 55px;
}
form .input-container ::-webkit-input-placeholder {
  color: black;
}
form .input-container :-moz-placeholder {
  color: black;
}
form .input-container ::-moz-placeholder {
  color: black;
}
form .input-container :-ms-input-placeholder {
  color: black;
}
form .input-container.list-container {
  cursor: pointer;
}
form .input-container.list-container ul {
  position: absolute;
  color: #000;
  width: 100%;
  top: 122%;
  z-index: 100;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  background: white;
  overflow: hidden;
  max-height: 350px;
  overflow-y: scroll;
}
form .input-container.list-container ul li {
  padding: 0.75em 1.5em;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  opacity: 0;
}
form .input-container.list-container ul li i {
  position: static;
  display: inline-block;
  font-size: 1em;
  margin-left: 0;
  width: auto;
  margin-right: 0.625rem;
  transform: translate(0px, -50px);
}
form .input-container.list-container ul li span {
  transform: translate(20px, 0);
  display: inline-block;
}
form .input-container.list-container ul li:last-child {
  border-bottom: 0;
}
form .input-container.list-container ul li:hover {
  background: black;
  color: #fff;
  cursor: pointer;
  transition-delay: 0s !important;
}
form .input-container.list-container ul li:hover i, form .input-container.list-container ul li:hover span {
  color: #fff;
  transition-delay: 0s !important;
}
form .input-container.list-container.active ul {
  visibility: visible;
  opacity: 1;
  top: 102%;
}
form .input-container.list-container.active ul li {
  opacity: 1;
}
form .input-container.list-container.active ul li span {
  transform: translate(0px, 0);
}
form .input-container.list-container.active ul li i {
  transform: translate(0px, 0);
}
form .input-container.error i, form .input-container.success i {
  color: red;
}
form .input-container.error input {
  color: red !important;
  border: 3px solid red;
}
form .input-container.success input {
  color: green !important;
  border: 3px solid transparent;
}
form .input-container.success i {
  color: green;
}
form .input-container.success:after {
  color: green;
}
form .input-container label.error {
  position: absolute;
  float: right;
  width: 100%;
  padding: 0.3125rem;
  font-size: 0.8em;
  pointer-events: none;
  display: none;
}
form .input-container.error label.error {
  display: block;
}
form .input-container input, form .input-container select {
  text-indent: 60px;
  height: 3.7em;
  line-height: 3.7em;
  margin-bottom: 0;
  -webkit-appearance: none;
  appearance: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-radius: 15px;
  font-size: 1.1em;
  border: 3px solid transparent;
  background: transparent;
}
@media (max-width: 991.98px) {
  form .input-container input, form .input-container select {
    height: 3em;
    line-height: 3em;
  }
}
form .input-container input.no-event, form .input-container select.no-event {
  pointer-events: none;
}
form .input-container i {
  position: Absolute;
  left: 10px;
  content: "";
  width: 50px;
  top: 2%;
  height: 95%;
  display: flex;
  font-size: 2.25em;
  text-align: center;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #0042DD;
  pointer-events: none;
}
form .input-container > span {
  position: Absolute;
  right: 2px;
  text-align: center;
  content: "";
  width: 50px;
  top: 2px;
  display: flex;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #333;
  bottom: 2px;
  display: none;
  background: white;
  z-index: 10;
}
form .input-container.searched span {
  display: inline-block;
  cursor: pointer;
}
form .input-container.searched span i {
  color: red;
}
form .input-container:hover.searched span i {
  opacity: 0.5;
  cursor: pointer;
}
form .textarea-container {
  position: relative;
  margin-bottom: 2.2em;
  width: 100%;
  border-radius: 55px;
  background: #e8e8e8;
  border-radius: 55px;
}
form .textarea-container ::-webkit-input-placeholder {
  color: black;
}
form .textarea-container :-moz-placeholder {
  color: black;
}
form .textarea-container ::-moz-placeholder {
  color: black;
}
form .textarea-container :-ms-input-placeholder {
  color: black;
}
form .textarea-container.list-container {
  cursor: pointer;
}
form .textarea-container.list-container ul {
  position: absolute;
  color: #000;
  width: 100%;
  top: 122%;
  z-index: 100;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  background: white;
  overflow: hidden;
  max-height: 350px;
  overflow-y: scroll;
}
form .textarea-container.list-container ul li {
  padding: 0.75em 1.5em;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  opacity: 0;
}
form .textarea-container.list-container ul li i {
  position: static;
  display: inline-block;
  font-size: 1em;
  margin-left: 0;
  width: auto;
  margin-right: 0.625rem;
  transform: translate(0px, -50px);
}
form .textarea-container.list-container ul li span {
  transform: translate(20px, 0);
  display: inline-block;
}
form .textarea-container.list-container ul li:last-child {
  border-bottom: 0;
}
form .textarea-container.list-container ul li:hover {
  background: black;
  color: #fff;
  cursor: pointer;
  transition-delay: 0s !important;
}
form .textarea-container.list-container ul li:hover i, form .textarea-container.list-container ul li:hover span {
  color: #fff;
  transition-delay: 0s !important;
}
form .textarea-container.list-container.active ul {
  visibility: visible;
  opacity: 1;
  top: 102%;
}
form .textarea-container.list-container.active ul li {
  opacity: 1;
}
form .textarea-container.list-container.active ul li span {
  transform: translate(0px, 0);
}
form .textarea-container.list-container.active ul li i {
  transform: translate(0px, 0);
}
form .textarea-container.error i, form .textarea-container.success i {
  color: red;
}
form .textarea-container.error input {
  color: red !important;
  border: 3px solid red;
}
form .textarea-container.success input {
  color: green !important;
  border: 3px solid transparent;
}
form .textarea-container.success i {
  color: green;
}
form .textarea-container.success:after {
  color: green;
}
form .textarea-container label.error {
  position: absolute;
  float: right;
  width: 100%;
  padding: 0.3125rem;
  font-size: 0.8em;
  pointer-events: none;
  display: none;
}
form .textarea-container.error label.error {
  display: block;
}
form .textarea-container input, form .textarea-container select {
  text-indent: 60px;
  height: 3.7em;
  line-height: 3.7em;
  margin-bottom: 0;
  -webkit-appearance: none;
  appearance: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  border-radius: 15px;
  font-size: 1.1em;
  border: 3px solid transparent;
  background: transparent;
}
@media (max-width: 991.98px) {
  form .textarea-container input, form .textarea-container select {
    height: 3em;
    line-height: 3em;
  }
}
form .textarea-container input.no-event, form .textarea-container select.no-event {
  pointer-events: none;
}
form .textarea-container i {
  position: Absolute;
  left: 10px;
  content: "";
  width: 50px;
  top: 2%;
  height: 95%;
  display: flex;
  font-size: 2.25em;
  text-align: center;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #0042DD;
  pointer-events: none;
}
form .textarea-container > span {
  position: Absolute;
  right: 2px;
  text-align: center;
  content: "";
  width: 50px;
  top: 2px;
  display: flex;
  align-content: center;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: #333;
  bottom: 2px;
  display: none;
  background: white;
  z-index: 10;
}
form .textarea-container.searched span {
  display: inline-block;
  cursor: pointer;
}
form .textarea-container.searched span i {
  color: red;
}
form .textarea-container:hover.searched span i {
  opacity: 0.5;
  cursor: pointer;
}
form .textarea-container i {
  height: auto;
  top: 15px;
}
form .textarea-container textarea {
  padding: 1.2em 2em 1.5em 1.5em;
  width: 100%;
}

.select-group label {
  margin-bottom: 0;
  color: white;
  font-size: 18px;
}

.umbraco-forms-page .col-md-6, .umbraco-forms-page .col-md-12 {
  padding: 0 10px;
}
.umbraco-forms-page .row-fluid {
  display: flex;
}
.umbraco-forms-page .umbraco-forms-caption {
  display: none;
}

html .umbraco-forms-form input.text, html body .umbraco-forms-form textarea {
  width: 100% !important;
  border: 1px solid #ccc;
  max-width: 100% !important;
}

.umbraco-forms-form fieldset {
  padding: 0 !important;
  margin: 0 !important;
}

form input[type=submit] {
  background: #0042DD;
  color: white;
  text-transform: none;
  font-weight: bold;
  font-family: "barlow";
  font-size: 1.4em;
  width: auto;
  padding: 2em;
  margin: 0 auto;
}

.umbraco-forms-tooltip {
  margin-top: -10px;
  display: block;
}

.checkboxlist {
  width: 100% !important;
  max-width: 100% !important;
}
.checkboxlist label {
  width: initial;
  float: none !important;
  clear: none !important;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}
.checkboxlist input {
  margin-right: 10px;
}

.modal-trigger {
  cursor: pointer;
  pointer: cursor;
}
.modal-trigger select {
  pointer-events: none;
}

.modal-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
}
.modal-box .close-button {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 1.6em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
  background: #0042DD;
  color: #fff;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  line-height: 1;
  transition: background 0.15s ease;
}
.modal-box .close-button:hover {
  background: #0033AD;
}
.modal-box .modal-content-box {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40%;
  width: 80%;
  max-width: 1200px;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: white;
  padding: 2em;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.9), 0px 0px 40px rgba(0, 0, 0, 0.9);
  padding: 3em 2em 2em 2em;
}
@media (max-width: 991.98px) {
  .modal-box .modal-content-box {
    padding: 1em;
    height: 100%;
    max-width: 100% !important;
    overflow-y: scroll;
    width: 100%;
    padding-top: 0;
  }
  .modal-box .modal-content-box .club-chooser {
    columns: 1;
    margin-bottom: 20px;
  }
  .modal-box .modal-content-box .club-chooser li {
    font-size: 0.9rem;
  }
  .modal-box .modal-content-box h3 {
    font-size: 1rem !important;
    width: 100%;
  }
  .modal-box .modal-content-box .results {
    padding: 0;
  }
}
.modal-box .modal-content-box.active {
  visibility: visible;
  opacity: 1;
  top: 50%;
}
.modal-box .modal-header {
  display: inline-block;
  padding: 10px 2em;
  color: #fff;
  background: #0042DD;
  margin: 0em 0 2em -2em;
}
.modal-box .modal-header h3 {
  display: inline-block;
  line-height: 1.8em;
  font-size: 1.9em;
}
.modal-box .modal-header i {
  margin-right: 0.5em;
  font-size: 1.3em;
  position: relative;
  top: 4px;
}
.modal-box .modal-select-club .input-container {
  border: 2px solid #333;
  margin-right: 5em;
}
.modal-box .modal-select-club li {
  cursor: pointer;
}
.modal-box .modal-select-club li:hover {
  opacity: 0.8;
}
.modal-box .modal-select-club li:active {
  top: 1px;
  opacity: 0.8;
  position: relative;
}
.modal-box .modal-select-club .input-container i {
  font-size: 1.4em;
}
.modal-box .modal-select-club .input-container input {
  height: 50px;
  line-height: 50px;
}
.modal-box .club-chooser {
  columns: 2;
}
.modal-box .club-chooser li {
  padding: 0;
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
}
.modal-box .club-chooser li:before {
  display: none;
}
.modal-box .club-chooser a {
  padding: 0.25em 0.2em;
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: inline-block;
}
.modal-box .club-chooser a:hover {
  text-decoration: none;
  opacity: 0.8;
}
.modal-box .club-chooser a:before {
  font-family: "FontAwesome";
  content: "\f054";
  margin-right: 0.5em;
}
.modal-box .club-chooser li a.selected:before {
  content: "\f00c";
}

.pac-container {
  z-index: 999999 !important;
}

.pac-logo:after {
  display: none !important;
}

.results {
  padding: 3em 0;
}
.results h1 {
  color: #fff;
}

.result-container {
  margin-bottom: 0em;
  padding: 0 5px;
}
.result-container:nth-child(3n+4) {
  clear: both;
}

.result header {
  text-align: center;
  color: #000;
  width: 100%;
  vertical-align: middle;
  display: inline-block;
  padding: 0 0 1em 0;
}
.result header h5 {
  font-size: 1.5em;
}
.result header i {
  vertical-align: middle;
  display: inline-block;
  font-size: 1.5em;
  margin-right: 0.25em;
}

#modal-mega-menu-desktop {
  position: relative;
  background: #0042DD;
  height: 100%;
  width: 100%;
  min-width: 100% !important;
  overflow: hidden;
}
#modal-mega-menu-desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/x-burst.png") center/cover no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
#modal-mega-menu-desktop > * {
  position: relative;
  z-index: 1;
}
#modal-mega-menu-desktop .modal-box__close {
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
#modal-mega-menu-desktop .modal-box__close:hover {
  opacity: 1;
}

.modal-box:has(#modal-mega-menu-desktop.active) .close-button {
  display: none !important;
}

.media-text-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.media-text {
  background-size: cover;
  background-position: center;
}
@media (max-width: 991.98px) {
  .media-text {
    padding-top: 0 !important;
  }
}
.media-text .embedVideo {
  position: relative;
  display: inline-block;
  width: 100%;
}
.media-text .embedVideo:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "\f04b";
  font-family: "FontAwesome";
  color: #0042DD;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  border: 3px solid #0042DD;
}
.media-text .button {
  margin-right: 15px;
}
.media-text.fixed .media-text__image {
  position: relative;
  height: 100%;
  margin-left: -25px;
}
@media (max-width: 991.98px) {
  .media-text.fixed .media-text__image {
    margin-left: 0;
    padding: 0;
  }
}
.media-text.fixed .media-text__image img {
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .media-text {
    padding: 2em 0 2em 0;
  }
}
.media-text__image-container {
  padding: 0;
}
.media-text__image-container img {
  width: 100%;
  padding: 2em 1em;
}
.media-text__image-container.order-2 {
  direction: rtl;
}
.media-text__image {
  position: relative;
}
.media-text__image video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}
.media-text__image img {
  width: 100%;
}
@media (min-width: 992px) {
  .media-text__image {
    max-width: initial;
  }
}
@media (max-width: 991.98px) {
  .media-text__image {
    order: -2 !important;
  }
}
.media-text__content {
  position: relative;
}
@media (max-width: 991.98px) {
  .media-text__content {
    padding: 20px;
  }
}
.media-text__content-container {
  align-items: center;
  display: flex;
  position: relative;
  z-index: 10;
}
@media (min-width: 992px) {
  .media-text__content-container {
    padding: calc(1.4375rem + 2.25vw);
  }
}
@media (min-width: 992px) and (min-width: 1200px) {
  .media-text__content-container {
    padding: 3.125rem;
  }
}
@media (max-width: 991.98px) {
  .media-text__content-container {
    padding-top: 3em;
    padding-bottom: 3em;
    color: #333;
    order: 4 !important;
    margin-top: 2em;
  }
}
.media-text .order-2 .about-image {
  direction: rtl;
}

.text-panel > img {
  max-height: 400px;
  width: 100%;
  object-fit: cover;
}

.text-panel .feature-image + .media-text .user-content > div {
  position: relative;
  z-index: 10;
  background: white;
}

.fancybox-active #header {
  opacity: 0;
}

.media-text.background-blue {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #0042DD !important;
  background-image: none !important;
}
.media-text.background-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/x-burst.png") center/cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}
.media-text.background-blue > .container,
.media-text.background-blue .container {
  position: relative;
  z-index: 1;
}
.media-text.background-blue h2, .media-text.background-blue .h2, .media-text.background-blue h2.title-colour, .media-text.background-blue .h4, .media-text.background-blue p, .media-text.background-blue li,
.media-text.background-blue .user-content, .media-text.background-blue .user-content * {
  color: #fff;
}
.media-text.background-blue .button, .media-text.background-blue .button.background-purple {
  background: #fff !important;
  color: #0042DD !important;
}
.media-text.background-blue .button i, .media-text.background-blue .button.background-purple i {
  color: #0042DD !important;
}
.media-text.background-blue .button:hover, .media-text.background-blue .button.background-purple:hover {
  background: #F5F2F1 !important;
  color: #0042DD !important;
}

.card {
  position: relative;
}
.card.suppress-True {
  pointer-events: none;
}
.card a {
  position: relative;
  height: 100%;
  color: black;
  text-align: left;
  display: inline-block;
  background: white;
  width: 100%;
  transition: all 0.1s ease-in;
}
.card a:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2), 0px 0px 35px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}
.card {
  text-decoration: none;
  margin-bottom: 1.25rem;
}
.card .detail {
  line-height: 1.4;
  font: 16px "Youth", sans-serif;
  font-size: 1.25rem;
}
.card__link {
  width: 100%;
  height: 100%;
  display: inline-block;
  color: #333;
  text-decoration: none;
}
.card__link:hover {
  text-decoration: none;
}
.card__image {
  margin: 0 auto;
  height: auto;
  object-fit: initial;
}
.card__content {
  padding: 1.25rem 0;
}
.card__content p {
  padding-bottom: 0;
}
.card.card-event a {
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
}
.card.card-event .card__image img {
  width: 100%;
}
.card.card-event .card__content {
  padding: 15px 25px;
}
.card.card-event .card__content h3 {
  text-transform: none;
  padding: 0px 0 15px 0;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .card.card-event .card__content h3 {
    font-size: 1.75rem;
  }
}
.card.card-event .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
}
.card.card-document a {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  position: relative;
}
.card.card-document .card__image img {
  height: 450px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .card.card-document .card__image img {
    height: 250px;
  }
}
.card.card-document .card__content {
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("../img/card-splash.png");
  width: 90%;
  min-height: 140px;
  padding: 0 20px 25px 20px;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  color: white;
  align-items: start;
  justify-content: end;
}
@media (max-width: 991.98px) {
  .card.card-document .card__content {
    min-height: 70px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .card.card-document .card__content h3 {
    font-size: 1.14rem !important;
    line-height: 0.97 !important;
  }
}
.card.card-document .card__content h3 {
  color: white;
  padding: 0;
  font-weight: 800;
  text-transform: none;
  padding-right: 50px;
  padding-top: 30px;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .card.card-document .card__content h3 {
    font-size: 1.5rem;
  }
}
.card.card-document .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.15px;
  line-height: 1 !important;
}
.card.card-health {
  display: flex;
  padding: 2em;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
  margin: 1.5em auto 2em auto;
  border-radius: 20px;
}
.card.card-health a {
  display: flex;
  width: 100%;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .card.card-health a {
    display: block;
  }
}
.card.card-health .card__image {
  flex: 1;
}
.card.card-health .card__image img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
}
.card.card-health .card__content {
  flex: 3;
  padding-left: 2.5em;
}
@media (max-width: 991.98px) {
  .card.card-health .card__content {
    padding-left: 0em;
  }
}
.card.card-health .card__content p {
  padding-bottom: 15px;
}
.card.card-health .card__content h3 {
  text-transform: none;
  font-weight: 800;
  font-size: 3rem;
}
.card.card-plain a {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  background: white;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding: 15px;
  color: black;
}
.card.card-plain .card__image {
  display: none;
}
.card.card-plain .card__image img {
  height: 519px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .card.card-plain .card__image img {
    height: 250px;
  }
}
@media (max-width: 991.98px) {
  .card.card-plain .card__content {
    min-height: 70px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .card.card-plain .card__content h3 {
    font-size: 1.14rem !important;
    line-height: 0.97 !important;
  }
}
.card.card-plain .card__content p {
  font-size: 15px;
}
.card.card-plain .card__content h3 {
  padding: 0;
  font-weight: 800;
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2875rem + 0.45vw);
}
@media (min-width: 1200px) {
  .card.card-plain .card__content h3 {
    font-size: 1.625rem;
  }
}
.card.card-plain .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.15px;
  padding-bottom: 10px;
}
.card.card-video a {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  position: relative;
}
.card.card-video a:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "\f04b";
  font-family: "FontAwesome";
  color: #0042DD;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  border: 3px solid #0042DD;
}
.card.card-video .card__image img {
  height: 389px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .card.card-video .card__image img {
    height: 250px;
  }
}
.card.card-video .card__content {
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("../img/card-splash.png");
  width: 90%;
  min-height: 100px;
  padding: 0 20px 25px 20px;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  color: white;
  align-items: start;
  justify-content: end;
}
@media (max-width: 991.98px) {
  .card.card-video .card__content {
    min-height: 70px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .card.card-video .card__content h3 {
    font-size: 1.14rem !important;
    line-height: 0.97 !important;
  }
}
.card.card-video .card__content h3 {
  color: white;
  padding: 0;
  font-weight: 800;
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .card.card-video .card__content h3 {
    font-size: 2rem;
  }
}
.card.card-video .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.15px;
}
.card.card-small-blue-overlay div {
  line-height: 1.2;
}
.card.card-small-blue-overlay a {
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  text-decoration: none;
  transition: transform 0.15s ease-in, box-shadow 0.15s ease-in;
}
.card.card-small-blue-overlay a:hover {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.16);
  transform: translateY(-3px);
}
.card.card-small-blue-overlay a h3 {
  text-decoration: none;
}
.card.card-small-blue-overlay .card__image img {
  height: 320px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .card.card-small-blue-overlay .card__image img {
    height: 250px;
  }
}
.card.card-small-blue-overlay .card__content {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 118px;
  padding: 22px 24px 46px 24px;
  background: white;
  color: #1D1E1F;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  transition: background 0.15s ease-in, color 0.15s ease-in;
}
.card.card-small-blue-overlay .card__content:after {
  content: "→";
  position: absolute;
  right: 22px;
  bottom: 16px;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: #0042DD;
  transition: color 0.15s ease-in;
}
@media (max-width: 991.98px) {
  .card.card-small-blue-overlay .card__content {
    min-height: 92px;
    padding: 18px 18px 42px 18px;
  }
  .card.card-small-blue-overlay .card__content h3 {
    font-size: 1.14rem !important;
    line-height: 0.97 !important;
  }
}
.card.card-small-blue-overlay .card__content h3 {
  color: inherit;
  padding: 0;
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .card.card-small-blue-overlay .card__content h3 {
    font-size: 1.75rem;
  }
}
.card.card-small-blue-overlay .card__content h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.card.card-small-blue-overlay a:hover .card__content {
  background: #0042DD;
  color: white;
}
.card.card-small-blue-overlay a:hover .card__content:after {
  color: white;
}
.card.card-feature div {
  line-height: 1.2;
}
.card.card-feature a {
  border-radius: 5px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: all 0.1s ease-in;
}
.card.card-feature a:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2), 0px 0px 35px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}
.card.card-feature .card__image img {
  height: 519px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .card.card-feature .card__image img {
    height: 250px;
  }
}
.card.card-feature .card__content {
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url("../img/card-splash.png");
  width: 90%;
  min-height: 140px;
  padding: 0 20px 25px 20px;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  color: white;
  align-items: start;
  justify-content: end;
}
@media (max-width: 991.98px) {
  .card.card-feature .card__content {
    min-height: 70px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .card.card-feature .card__content h3 {
    font-size: 1.14rem !important;
    line-height: 0.97 !important;
  }
}
.card.card-feature .card__content h3 {
  color: white;
  padding: 0;
  font-weight: 800;
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .card.card-feature .card__content h3 {
    font-size: 2rem;
  }
}
.card.card-feature .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.15px;
}
.card.card-main-venue {
  margin-bottom: 30px;
}
.card.card-main-venue a {
  text-decoration: none;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
}
.card.card-main-venue .card__image img {
  height: 250px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
.card.card-main-venue .card__content {
  left: 0;
  bottom: 0;
  padding: 20px 20px 25px 20px;
  background-size: 100% 100%;
  display: flex;
  background: #0042DD;
  color: white;
  border-radius: 10px;
  margin-top: -10px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.card.card-main-venue .card__content p {
  font-size: 15px;
  padding-bottom: 10px;
}
.card.card-main-venue .card__content .button i {
  color: #0033AD;
}
.card.card-main-venue .card__content h3 {
  font-weight: 800;
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  .card.card-main-venue .card__content h3 {
    font-size: 2rem;
  }
}
.card.card-main-venue .card__content h3 {
  font-weight: 500;
  letter-spacing: -0.15px;
}
.card.card-venue a {
  display: flex;
  text-decoration: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background: white;
}
@media (max-width: 991.98px) {
  .card.card-venue a {
    display: block;
  }
}
.card.card-venue p {
  font-size: 16px;
}
.card.card-venue .card__image {
  flex: 1;
}
.card.card-venue .card__image img {
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  width: 100%;
}
.card.card-venue .card__content {
  flex: 1;
  left: 0;
  bottom: 0;
  width: 90%;
  padding-left: 25px;
  background-size: 100% 100%;
}
@media (max-width: 991.98px) {
  .card.card-venue .card__content {
    padding-left: 0;
  }
}
.card.card-venue .card__content h3 {
  padding: 0;
  font-weight: 800;
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .card.card-venue .card__content h3 {
    font-size: 1.75rem;
  }
}
.card.card-venue .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  padding-bottom: 10px;
}
.card.card-news a {
  text-decoration: none;
  display: block;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform 0.15s ease-in, box-shadow 0.15s ease-in;
}
.card.card-news a:hover {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.16);
  transform: translateY(-3px);
}
.card.card-news a h3 {
  text-decoration: none;
}
.card.card-news .card__image img {
  height: 300px;
  object-fit: cover;
  width: 100%;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .card.card-news .card__image img {
    height: 200px !important;
  }
}
.card.card-news .card__content {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 118px;
  padding: 22px 24px 46px 24px;
  background: white;
  color: #1D1E1F;
}
.card.card-news .card__content:after {
  content: "→";
  position: absolute;
  right: 22px;
  bottom: 16px;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  color: #0042DD;
}
@media (max-width: 991.98px) {
  .card.card-news .card__content {
    padding: 18px 18px 42px 18px;
  }
  .card.card-news .card__content h3 {
    font-size: 1.15rem !important;
  }
}
.card.card-news .card__content h3 {
  padding: 0;
  text-transform: none;
  color: inherit;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  .card.card-news .card__content h3 {
    font-size: 1.5rem;
  }
}
.card.card-news .card__content h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.card.card-news .card__content p {
  font: 16px "Youth", sans-serif;
  font-size: 0.9375rem;
  padding-bottom: 0;
}
.card.style-testimonial {
  position: relative;
}
.card.style-testimonial .card__image {
  height: 600px;
  max-height: 60vh;
  position: static;
  object-fit: cover;
  position: relative;
  border-radius: 15px;
  width: 100%;
}
.card.style-testimonial .card__content {
  position: absolute;
  left: 0;
  bottom: 0;
}
.card.style-testimonial .card__content h3 {
  color: white;
  padding: 0;
}
.card.style-testimonial .card__content h5 {
  font: 16px "Youth", sans-serif;
  font-size: 0.9375rem;
  padding: 0 0 5px 0;
}
.card.style-testimonial .card__content .h4 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3875rem + 1.65vw);
}
@media (min-width: 1200px) {
  .card.style-testimonial .card__content .h4 {
    font-size: 2.625rem;
  }
}
.card.style-testimonial .card__content .h4 {
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 991.98px) {
  .card-block .row__header h2 .button {
    font-size: 0.8rem;
    padding: 5px 15px;
  }
  .card-block .splide__list {
    padding-left: 20px !important;
  }
}

.splide__pagination {
  bottom: -30px;
  gap: 8px;
}

html body .splide__pagination__page {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  margin: 0 4px;
  opacity: 1;
  transform: none;
  background: #d2d3d6;
  transition: background 0.2s ease;
}

html body .splide__pagination__page.is-active {
  background: #0042DD;
  transform: none;
}

.content-block .row__header h2,
.card-block .row__header h2 {
  color: #0042DD;
}

.background-blue .row__header h2,
.background-blue.content-block .row__header h2 {
  color: #fff;
}

/* ============================================================
   Figma card look for feature cards (Activities / Kids) — migrated
   from the /figma-* prototype: photo top, white footer with title
   + blue arrow, rounded, hover lift. Appended to override the old
   splash-overlay style.
   ============================================================ */
.card.card-feature a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  height: 100%;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.card-feature a:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
}
.card.card-feature .card__image img {
  height: auto;
  aspect-ratio: 16/11;
  width: 100%;
  object-fit: cover;
  display: block;
}
.card.card-feature .card__content {
  position: static;
  background: #fff;
  background-image: none;
  color: #1D1E1F;
  padding: 22px 24px;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.card.card-feature .card__content:after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230042DD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.card.card-feature .card__content h3 {
  color: #1D1E1F;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .card.card-feature .card__content h3 {
    font-size: 1.375rem;
  }
}
.card.card-feature .card__content h3 {
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.15px;
}
@media (max-width: 991.98px) {
  .card.card-feature .card__content h3 {
    font-size: 1.14rem !important;
  }
}

/* ============================================================
   Figma-brand VENUE LISTING (/venues grid).
   Scoped to body.template-venues so only the listing is touched.
   Converts the venue cards to the white photo-card look used by
   the homepage feature cards: photo on top, white body with the
   venue name in blue + description + View button, hover lift.
   ============================================================ */
.template-venues .card.card-main-venue {
  margin-bottom: 30px;
}
.template-venues .card.card-main-venue > a {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.template-venues .card.card-main-venue > a:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
}
.template-venues .card.card-main-venue .card__image img {
  height: auto;
  aspect-ratio: 16/10;
  width: 100%;
  object-fit: cover;
  display: block;
}
.template-venues .card.card-main-venue .card__content {
  position: static;
  margin-top: 0;
  background: #fff;
  background-image: none;
  color: #1D1E1F;
  border-radius: 0;
  padding: 24px 26px 26px;
  flex: 1 1 auto;
}
.template-venues .card.card-main-venue .card__content h3 {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .template-venues .card.card-main-venue .card__content h3 {
    font-size: 1.75rem;
  }
}
.template-venues .card.card-main-venue .card__content h3 {
  font-weight: 700;
  letter-spacing: -0.15px;
  margin-bottom: 8px;
}
.template-venues .card.card-main-venue .card__content div, .template-venues .card.card-main-venue .card__content p {
  color: #1D1E1F;
}
.template-venues .card.card-main-venue .card__content p {
  font-size: 15px;
  line-height: 1.5;
}
.template-venues .card.card-main-venue .card__content .button-box {
  margin-top: auto;
  padding-top: 14px;
}
.template-venues .card.card-main-venue .card__content .button {
  background: #0042DD;
  color: #fff;
}
.template-venues .card.card-main-venue .card__content .button i {
  color: #fff;
}
.template-venues .card.card-main-venue .card__content .button:hover {
  background: #0033AD;
}

.accordians__header-row {
  padding-bottom: calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .accordians__header-row {
    padding-bottom: 1.5625rem;
  }
}
.accordians__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(1.28125rem + 0.375vw);
}
@media (min-width: 1200px) {
  .accordians__header {
    padding-bottom: 1.5625rem;
  }
}
.accordians__header h2 {
  padding-bottom: 0;
}
.accordian h5 {
  padding-bottom: 0;
  margin-bottom: 0;
  font-weight: 800;
}
.accordian {
  text-decoration: none;
  border-bottom: 1px solid;
  padding: 30px 0;
}
.accordian__header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordian__header i {
  margin-right: 20px;
  font-size: 2em;
  transition: all 0.2s ease-in;
}
.accordian__header h4 {
  padding-bottom: 0;
  font-size: 36px;
}
.accordian__content {
  display: none;
  padding-left: 0rem;
  padding-right: 0rem;
  padding-bottom: 0;
  border-top: 1px solid;
  padding-top: calc(1.34375rem + 1.125vw);
}
@media (min-width: 1200px) {
  .accordian__content {
    padding-top: 2.1875rem;
  }
}
.accordian__content {
  margin-top: 40px;
}
.accordian__content {
  padding-bottom: 0;
}
.accordian.active .accordian__header i {
  transform: rotate(180deg);
}

.icon-grid img {
  max-height: 150px;
}
.icon-grid a {
  text-decoration: none;
  transition: all 0.1s ease-in;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.icon-grid a:hover {
  transform: scale(1.05);
}
.icon-grid a:hover img {
  background: #0033AD;
}
.icon-grid .icon-background-image {
  min-height: 70vh;
  background-size: cover;
  width: 100%;
}
.icon-grid > .container > .row {
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  background: white;
  margin-top: -10em;
  padding: 2em;
  border-radius: 15px;
}
.icon-grid > .container > .row .icon-grid__icons.columns-6 > div {
  width: 16.6666666667%;
  max-width: 16.6666666667%;
}
.icon-grid > .container > .row .icon-grid__icons .icon-grid__icon {
  padding: 0 1em;
}
.icon-grid > .container > .row .icon-grid__icons .icon-grid__icon p {
  font-size: 16px;
}
.icon-grid > .container > .row .icon-grid__icon-container {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.venue-icons {
  text-align: center;
  flex-wrap: wrap;
}
.venue-icons .col-lg-3 {
  width: 14.2857142857%;
  margin: 1em 0;
}
@media (max-width: 991.98px) {
  .venue-icons .col-lg-3 {
    width: 33.3333333333%;
    margin: 0;
  }
}
.venue-icons img {
  height: 110px;
  width: 110px;
  padding: 20px;
  border-radius: 50%;
  border: 4px solid white;
  object-fit: contain;
  padding: 1.5em;
}
@media (max-width: 991.98px) {
  .venue-icons img {
    height: 90px;
    width: 90px;
    padding: 10px;
  }
}
.venue-icons h4 {
  color: white;
  margin-top: 10px;
  font-size: 1.4rem;
}
@media (max-width: 991.98px) {
  .venue-icons h4 {
    font-size: 1rem;
  }
}

.banner {
  min-height: 78vh;
  position: relative;
  width: 100%;
  flex-direction: column;
  padding: 2em 0;
  display: flex;
}
.banner h4 {
  padding-bottom: 0;
}
@media (max-width: 991.98px) {
  .banner {
    min-height: 420px;
  }
}
.banner__image, .banner__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .banner__image, .banner__image img {
    position: relative;
  }
}
.banner__content {
  position: relative;
  color: white;
  width: 100%;
}
.banner__content .col-md-12.feature-image-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.banner__content .col-md-12.feature-image-content .main-content {
  width: 60%;
}
.banner__content .col-md-12.feature-image-content .feature-image-container {
  width: 40%;
}
@media (max-width: 991.98px) {
  .banner__content .col-md-12.feature-image-content .feature-image-container {
    display: none;
  }
}
.banner__content .col-md-12.feature-image-content .feature-image-container img {
  width: 100%;
}

.banner-block .splide__pagination {
  bottom: 10px;
}
@media (max-width: 991.98px) {
  .banner-block h4 {
    font: 16px "Youth", sans-serif;
    font-size: 1rem;
  }
  .banner-block .banner {
    padding-top: 0;
    padding-bottom: 0;
  }
  .banner-block .banner__content {
    background: #0042DD;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.inner-banner {
  background: #0042DD;
  min-height: 38vh;
  display: flex;
  align-items: center;
  justify-content: start;
  color: white;
  background-size: cover;
  background-position: center;
  position: relative;
  text-align: left;
}
.inner-banner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .inner-banner img {
    min-height: 200px;
  }
  .inner-banner {
    min-height: 0px !important;
  }
}
.inner-banner.overlay:after {
  background-image: url("/assets/img/overlay.png");
  position: absolute;
  background-size: cover;
  z-index: 10;
  top: 0;
  left: 0;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  content: "";
}
@media (max-width: 991.98px) {
  .inner-banner {
    flex-direction: column;
    min-height: 100px;
  }
}
.inner-banner h1 {
  padding-bottom: 10px;
  position: relative;
}
.inner-banner p {
  line-height: 1.6;
}
.inner-banner__content {
  position: relative;
  z-index: 30;
  max-width: 500px;
  text-align: left;
}
@media (max-width: 991.98px) {
  .inner-banner__content {
    padding: 10px 15px;
    text-align: center;
    width: 100%;
    max-width: 100%;
    flex: initial;
  }
}
.inner-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .inner-banner img {
    position: static;
  }
}
h1, h2, h3, h4 {
  position: relative;
  z-index: 5;
}
h1.styled-heading, h2.styled-heading, h3.styled-heading, h4.styled-heading {
  display: inline-block;
}
h1.styled-heading:after, h2.styled-heading:after, h3.styled-heading:after, h4.styled-heading:after {
  width: 150%;
  height: 150%;
  min-width: 580px;
  min-height: 250px;
  transform: translate(0%, -50%);
  top: 60%;
  z-index: -1;
  left: -140px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
  position: absolute;
  background-image: url("../img/heading-splash.png");
}
@media (max-width: 991.98px) {
  h1.styled-heading:after, h2.styled-heading:after, h3.styled-heading:after, h4.styled-heading:after {
    width: 120%;
    height: 120%;
    min-width: 400px;
    min-height: 160px;
  }
}

h2.styled-heading:after {
  min-height: 220px;
  min-width: 440px;
  left: -80px;
}

/* ============================================================
   Figma-brand interior banner (auto-banner on every page)
   Migrated from the /figma-* prototype hero: centred, large
   white Youth heading. Appended so it overrides the base rules.
   ============================================================ */
.inner-banner {
  justify-content: center;
  text-align: center;
  min-height: 46vh;
}
.inner-banner .inner-banner__content, .inner-banner__content {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.inner-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 8, 40, 0.22), rgba(0, 8, 40, 0.5));
  pointer-events: none;
}
.inner-banner .row {
  justify-content: center !important;
}
.inner-banner .breadcrumbs {
  position: absolute;
  top: 14px;
  left: 0;
  width: 100%;
  z-index: 20;
  background: transparent !important;
  text-align: left;
}
.inner-banner h1 {
  color: #fff;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
  .inner-banner h1 {
    font-size: 4rem;
  }
}
.inner-banner h1 {
  font-weight: 700;
  line-height: 1.03;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}
.inner-banner h1.styled-heading:after, .inner-banner h1.styled-heading:before {
  display: none !important;
}
.inner-banner p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 60ch;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .inner-banner {
    min-height: 300px;
  }
  .inner-banner h1 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3375rem + 1.05vw);
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .inner-banner h1 {
    font-size: 2.125rem;
  }
}

/* Clean full-bleed video banner (Figma): when a video is set, drop the text
   overlay — the copy lives in a separate panel below, as in the prototype. */
.banner--video .banner__content {
  display: none;
}
.banner--video .banner__video, .banner--video .banner__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma homepage hero: full-bleed autoplay video with a sound toggle, then the intro panel.
   Activated by setting the banner block's Video (seed: /api/seed/homepage/video). */
.banner.banner--video {
  display: block;
  min-height: 0;
  height: auto;
  padding: 0;
  background: #000;
}
.banner.banner--video .banner__video {
  position: relative;
  inset: auto;
  width: 100%;
  /* shared with the Intro Below band so the carousel does not jump height as it rotates */
  height: var(--banner-media-h, min(88vh, 900px));
  background: #000;
}
.banner.banner--video .banner__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner.banner--video .banner__sound {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.banner.banner--video .banner__sound svg {
  width: 24px;
  height: 24px;
}
.banner.banner--video .banner__sound:hover {
  background: rgba(0, 0, 0, 0.65);
}
.banner.banner--video .banner__intro {
  background: #fff;
  text-align: center;
  padding: 70px 0;
}
.banner.banner--video .banner__intro .banner__intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.banner.banner--video .banner__intro h2, .banner.banner--video .banner__intro p {
  color: #0042DD;
  text-transform: none;
}
.banner.banner--video .banner__intro h2 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.4rem + 1.8vw);
}
@media (min-width: 1200px) {
  .banner.banner--video .banner__intro h2 {
    font-size: 2.75rem;
  }
}
.banner.banner--video .banner__intro h2 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  padding: 0;
  margin: 0;
}
.banner.banner--video .banner__intro p {
  font-size: 18px;
  margin: 18px 0 0;
}
.banner.banner--video .banner__intro {
  /* BugHerd #100 — the design's "Find out more" under the hero copy */
}
.banner.banner--video .banner__intro .banner__intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
.banner.banner--video .banner__intro .banner__intro-actions .vn-arrow {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex: none;
}
@media (max-width: 991.98px) {
  .banner.banner--video {
    /* legacy mobile rule forces .banner__video static; the sound button must stay inside the video */
  }
  /* The band used to be a flat 400px, which on a ~400px-wide phone is very nearly square. The
     footage is landscape, so object-fit: cover filled that square from the height and threw away
     the sides — and the titling in the video sits exactly there, so it was cut off at both edges.
     Letting the video size itself means the band is whatever shape the video is: nothing cropped,
     no letterboxing, and no aspect ratio hard-coded here to go stale when the footage changes. */
  .banner.banner--video .banner__video {
    height: auto;
    position: relative !important;
  }
  .banner.banner--video .banner__video video {
    position: static !important;
    width: 100%;
    height: auto;
    object-fit: fill;
  }
  .banner.banner--video .banner__intro {
    padding: 40px 0;
  }
  .banner.banner--video .banner__intro h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.2875rem + 0.45vw);
    font-weight: 700;
    line-height: 1.15;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .banner.banner--video .banner__intro h2 {
    font-size: 1.625rem;
  }
}

/* a single-slide banner block needs no carousel chrome */
.banner-block .splide:has(.splide__slide:only-child) .splide__pagination, .banner-block .splide:has(.splide__slide:only-child) .splide__arrows {
  display: none;
}

.gallery .col-md-12 {
  display: flex;
  flex-wrap: wrap;
}
.gallery .col-md-12 a {
  width: 25%;
}
@media (max-width: 991.98px) {
  .gallery .col-md-12 a {
    width: 50%;
  }
}
.gallery .col-md-12 img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  vertical-align: top;
  padding: 5px;
}

.content-listings img {
  vertical-align: top;
}
.content-listings .slick-slide {
  margin-right: 10px;
}
.content-listings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  .content-listings__header {
    padding-bottom: 1.875rem;
  }
}
.content-listings__header h2 {
  padding-bottom: 0;
}
.content-listings.heading-style-image_left .feature_image_left {
  text-align: right;
  direction: rtl;
}
.content-listings.heading-style-image_left .feature_image_left img {
  max-width: initial;
  position: relative;
  z-index: 2;
  text-align: right;
  direction: rtl;
  width: 250%;
  margin-bottom: -5em;
}
.content-listings.heading-style-text_left .container {
  display: flex;
}
.content-listings.heading-style-text_left .container > .row:first-child {
  width: 30%;
}
.content-listings.heading-style-text_left .container > .row:last-child {
  width: 70%;
}
.content-listings header.heading-style-text_left {
  display: inline-block;
}

.activity-finder {
  border-radius: 15px;
  margin-top: -5em;
  position: relative;
  z-index: 2;
  padding: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  .activity-finder {
    padding: 1.875rem;
  }
}
.activity-finder {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.activity-finder .select-container, .activity-finder .input-container {
  margin: 0;
}
@media (max-width: 991.98px) {
  .activity-finder {
    margin: 10px;
    width: initial;
    margin-top: -25px;
    margin-top: 0;
  }
  .activity-finder .select-container {
    margin-bottom: 15px;
  }
  .activity-finder .col-md-4:last-child button {
    width: 100%;
  }
  .activity-finder .col-md-4:last-child label {
    display: none;
  }
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover {
  opacity: 1;
}
.hamburger.is-active:hover {
  opacity: 1;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000;
}

.hamburger-box {
  width: 32px;
  height: 19px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 32px;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -8px;
}
.hamburger-inner::after {
  bottom: -8px;
}

/*
 * 3DX
 */
.hamburger--3dx .hamburger-box {
  perspective: 64px;
}
.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(180deg);
}
.hamburger--3dx.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dx.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * 3DX Reverse
 */
.hamburger--3dx-r .hamburger-box {
  perspective: 64px;
}
.hamburger--3dx-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dx-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(-180deg);
}
.hamburger--3dx-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dx-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * 3DY
 */
.hamburger--3dy .hamburger-box {
  perspective: 64px;
}
.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(-180deg);
}
.hamburger--3dy.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dy.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * 3DY Reverse
 */
.hamburger--3dy-r .hamburger-box {
  perspective: 64px;
}
.hamburger--3dy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg);
}
.hamburger--3dy-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dy-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * 3DXY
 */
.hamburger--3dxy .hamburger-box {
  perspective: 64px;
}
.hamburger--3dxy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg);
}
.hamburger--3dxy.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dxy.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * 3DXY Reverse
 */
.hamburger--3dxy-r .hamburger-box {
  perspective: 64px;
}
.hamburger--3dxy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
  transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hamburger--3dxy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg);
}
.hamburger--3dxy-r.is-active .hamburger-inner::before {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--3dxy-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
}

/*
 * Arrow
 */
.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-6.4px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-6.4px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
 * Arrow Right
 */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(6.4px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(6.4px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
 * Arrow Alt
 */
.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-6.4px, -8px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-6.4px, 8px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
 * Arrow Alt Right
 */
.hamburger--arrowalt-r .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt-r .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(6.4px, -8px, 0) rotate(45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(6.4px, 8px, 0) rotate(-45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

/*
 * Arrow Turn
 */
.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg);
}
.hamburger--arrowturn.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger--arrowturn.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

/*
 * Arrow Turn Right
 */
.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg);
}
.hamburger--arrowturn-r.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrowturn-r.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

/*
 * Boring
 */
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  transition-property: none;
}
.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg);
}
.hamburger--boring.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}
.hamburger--boring.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

/*
 * Collapse
 */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse .hamburger-inner::after {
  top: -16px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Collapse Reverse
 */
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse-r .hamburger-inner::after {
  top: -16px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.hamburger--collapse-r .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -8px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--collapse-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.hamburger--collapse-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Elastic
 */
.hamburger--elastic .hamburger-inner {
  top: 1.5px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic .hamburger-inner::before {
  top: 8px;
  transition: opacity 0.125s 0.275s ease;
}
.hamburger--elastic .hamburger-inner::after {
  top: 16px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 8px, 0) rotate(135deg);
  transition-delay: 0.075s;
}
.hamburger--elastic.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}
.hamburger--elastic.is-active .hamburger-inner::after {
  transform: translate3d(0, -16px, 0) rotate(-270deg);
  transition-delay: 0.075s;
}

/*
 * Elastic Reverse
 */
.hamburger--elastic-r .hamburger-inner {
  top: 1.5px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic-r .hamburger-inner::before {
  top: 8px;
  transition: opacity 0.125s 0.275s ease;
}
.hamburger--elastic-r .hamburger-inner::after {
  top: 16px;
  transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.hamburger--elastic-r.is-active .hamburger-inner {
  transform: translate3d(0, 8px, 0) rotate(-135deg);
  transition-delay: 0.075s;
}
.hamburger--elastic-r.is-active .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0;
}
.hamburger--elastic-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -16px, 0) rotate(270deg);
  transition-delay: 0.075s;
}

/*
 * Emphatic
 */
.hamburger--emphatic {
  overflow: hidden;
}
.hamburger--emphatic .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::after {
  top: 8px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}
.hamburger--emphatic.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}
.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -64px;
  top: -64px;
  transform: translate3d(64px, 64px, 0) rotate(45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -64px;
  top: -64px;
  transform: translate3d(-64px, 64px, 0) rotate(-45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
 * Emphatic Reverse
 */
.hamburger--emphatic-r {
  overflow: hidden;
}
.hamburger--emphatic-r .hamburger-inner {
  transition: background-color 0.125s 0.175s ease-in;
}
.hamburger--emphatic-r .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}
.hamburger--emphatic-r .hamburger-inner::after {
  top: 8px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}
.hamburger--emphatic-r.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}
.hamburger--emphatic-r.is-active .hamburger-inner::before {
  left: -64px;
  top: 64px;
  transform: translate3d(64px, -64px, 0) rotate(-45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic-r.is-active .hamburger-inner::after {
  right: -64px;
  top: 64px;
  transform: translate3d(-64px, -64px, 0) rotate(45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/*
 * Minus
 */
.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear;
}
.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear;
}
.hamburger--minus.is-active .hamburger-inner::before {
  top: 0;
}
.hamburger--minus.is-active .hamburger-inner::after {
  bottom: 0;
}

/*
 * Slider
 */
.hamburger--slider .hamburger-inner {
  top: 1.5px;
}
.hamburger--slider .hamburger-inner::before {
  top: 8px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}
.hamburger--slider .hamburger-inner::after {
  top: 16px;
}
.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--slider.is-active .hamburger-inner::before {
  transform: rotate(-45deg) translate3d(-4.5714285714px, -5px, 0);
  opacity: 0;
}
.hamburger--slider.is-active .hamburger-inner::after {
  transform: translate3d(0, -16px, 0) rotate(-90deg);
}

/*
 * Slider Reverse
 */
.hamburger--slider-r .hamburger-inner {
  top: 1.5px;
}
.hamburger--slider-r .hamburger-inner::before {
  top: 8px;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}
.hamburger--slider-r .hamburger-inner::after {
  top: 16px;
}
.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 8px, 0) rotate(-45deg);
}
.hamburger--slider-r.is-active .hamburger-inner::before {
  transform: rotate(45deg) translate3d(4.5714285714px, -5px, 0);
  opacity: 0;
}
.hamburger--slider-r.is-active .hamburger-inner::after {
  transform: translate3d(0, -16px, 0) rotate(90deg);
}

/*
 * Spin
 */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Spin Reverse
 */
.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin-r .hamburger-inner::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.hamburger--spin-r .hamburger-inner::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spin-r.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger--spin-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Spring
 */
.hamburger--spring .hamburger-inner {
  top: 1.5px;
  transition: background-color 0s 0.13s linear;
}
.hamburger--spring .hamburger-inner::before {
  top: 8px;
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring .hamburger-inner::after {
  top: 16px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
  top: 0;
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 8px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
  top: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translate3d(0, 8px, 0) rotate(-45deg);
}

/*
 * Spring Reverse
 */
.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring-r .hamburger-inner::after {
  top: -16px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear;
}
.hamburger--spring-r .hamburger-inner::before {
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -8px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--spring-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear;
}
.hamburger--spring-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Stand
 */
.hamburger--stand .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}
.hamburger--stand .hamburger-inner::before {
  transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand .hamburger-inner::after {
  transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand.is-active .hamburger-inner {
  transform: rotate(90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}
.hamburger--stand.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-45deg);
  transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--stand.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Stand Reverse
 */
.hamburger--stand-r .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear;
}
.hamburger--stand-r .hamburger-inner::before {
  transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand-r .hamburger-inner::after {
  transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--stand-r.is-active .hamburger-inner {
  transform: rotate(-90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear;
}
.hamburger--stand-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-45deg);
  transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--stand-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(45deg);
  transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Squeeze
 */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Vortex
 */
.hamburger--vortex .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
  transition-duration: 0s;
  transition-delay: 0.1s;
  transition-timing-function: linear;
}
.hamburger--vortex .hamburger-inner::before {
  transition-property: top, opacity;
}
.hamburger--vortex .hamburger-inner::after {
  transition-property: bottom, transform;
}
.hamburger--vortex.is-active .hamburger-inner {
  transform: rotate(765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
  transition-delay: 0s;
}
.hamburger--vortex.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}
.hamburger--vortex.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
}

/*
 * Vortex Reverse
 */
.hamburger--vortex-r .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
  transition-duration: 0s;
  transition-delay: 0.1s;
  transition-timing-function: linear;
}
.hamburger--vortex-r .hamburger-inner::before {
  transition-property: top, opacity;
}
.hamburger--vortex-r .hamburger-inner::after {
  transition-property: bottom, transform;
}
.hamburger--vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
  transition-delay: 0s;
}
.hamburger--vortex-r.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
}
.hamburger--vortex-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

.mm-page {
  position: static;
}

.membership-panel__image img {
  width: 100%;
  object-fit: cover;
  max-height: 60vh;
  vertical-align: top;
}
.membership-panel .splide {
  margin-top: -10em;
}

.venue-box {
  padding: 30px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  background: white;
  border-radius: 10px;
}
.venue-box i {
  left: initial;
  right: 20px;
}
.venue-box input {
  text-indent: 30px;
}
.venue-box h5 {
  text-transform: none;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .venue-box h5 {
    font-size: 1.375rem;
  }
}
.venue-box h5 {
  font-weight: 700;
}
.venue-box p {
  color: #070538;
}
.venue-box h3 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3625rem + 1.35vw);
}
@media (min-width: 1200px) {
  .venue-box h3 {
    font-size: 2.375rem;
  }
}
.venue-box h3 {
  letter-spacing: -1px;
  font-weight: 800;
  text-transform: none;
  color: #070538;
}
.venue-box #map {
  height: 300px;
  margin-bottom: 20px;
}
.venue-box .input-container {
  margin-bottom: 25px;
}
.venue-box .button {
  min-width: 250px;
}

.featured-news {
  background-image: url("../img/news-background.png");
  background-size: cover;
  background-position: center;
}
.featured-news img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.main-venue-grid {
  margin: 3em auto;
}

.store-info-box-inner {
  text-align: center;
}
.store-info-box-inner .button-box {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.store-info-box-inner .button-box .button {
  text-align: center;
}

.article-container {
  padding: 2em 0;
}

.venue-finder {
  position: relative;
}
.venue-finder .background-image {
  z-index: 0;
}
.venue-finder .media-text__content {
  position: relative;
  z-index: 10;
}
@media (max-width: 991.98px) {
  .venue-finder .media-text__content {
    max-width: 100%;
    margin: 0 auto;
    width: calc(100% - 15px);
    padding: 10px;
  }
  .venue-finder .venue-box {
    padding: 15px;
  }
  .venue-finder .button {
    width: 100%;
  }
  .venue-finder .background-image {
    position: static;
    height: 350px;
    margin-bottom: -60%;
  }
}

.aboutus-container h3 {
  color: #0042DD;
  font-weight: 800;
}
.aboutus-container img {
  margin-bottom: 2em;
}

.standoutblock {
  padding: 5em 0;
  background-image: url("/assets/img/pattern.jpg");
  background-size: cover;
}
@media (max-width: 991.98px) {
  .standoutblock {
    background: #3D6FE5;
    background-image: none;
    padding: 15px 0 !important;
  }
}
.standoutblock h2 {
  text-transform: uppercase;
  text-align: center;
}
.standoutblock p {
  padding: 0;
  margin: 0;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .standoutblock p {
    font-size: 1.375rem;
  }
}

.content-switcher-container .content-switcher {
  padding: 2em;
  border-radius: 12px;
  background-image: url("/assets/img/app-background.png");
  z-index: 5;
  padding: 2em;
  position: relative;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.content-switcher-container .content-switcher h3 {
  margin-bottom: 0;
  font-weight: bold;
}
@media (max-width: 991.98px) {
  .content-switcher-container .content-switcher {
    padding: 15px;
  }
}
.content-switcher-container h4 {
  text-transform: uppercase;
}
.content-switcher-container select {
  padding: 15px;
  background: #eee;
  width: 100%;
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
  border-radius: 52px;
}

.contact-form {
  padding: 2em;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  margin-bottom: 2em;
  border-radius: 12px;
  overflow: hidden;
}
.contact-form h2, .contact-form p {
  text-align: Center;
}
.contact-form form {
  color: white;
}
.contact-form form label {
  color: white;
}
.contact-form form input, .contact-form form textarea {
  color: black;
  border: 1px solid white;
  background: white;
}
.contact-form form textarea {
  min-height: 200px;
}
.contact-form form .button-box {
  align-items: center;
  justify-content: center;
}

.membership-options h3 {
  text-transform: none !important;
}

.membership-tabs {
  margin: 2em 0 1em 0;
}
.membership-tabs ul {
  display: flex;
  width: 100%;
}
@media (max-width: 991.98px) {
  .membership-tabs ul {
    flex-wrap: wrap;
  }
}
.membership-tabs ul li {
  flex: 1;
  cursor: pointer;
  border-bottom: 5px solid #e7e6e6;
  text-align: center;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
  .membership-tabs ul li {
    font-size: 1.3125rem;
  }
}
@media (max-width: 991.98px) {
  .membership-tabs ul li {
    width: 33%;
    flex: initial;
    font-size: 16px;
  }
}
.membership-tabs ul li {
  padding: 10px;
}
.membership-tabs ul li:hover {
  opacity: 0.8;
}
.membership-tabs ul li.active {
  border-color: #070538;
}

.membership-columns {
  display: flex;
  align-items: start;
  justify-content: center;
}
.membership-columns .membership-column {
  margin: 1em;
  overflow: hidden;
  border-radius: 30px;
  border: 4px solid #0042DD;
  width: 33%;
  display: none;
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column .button {
    font-size: 1rem;
  }
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column {
    margin: 1px;
    width: 50%;
  }
}
.membership-columns .membership-column.active {
  display: block !important;
}
.membership-columns .membership-column p {
  padding-bottom: 5px;
}
.membership-columns .membership-column h4 {
  font-size: 2.5rem;
  padding-bottom: 5px;
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column h4 {
    font-size: 1.5rem;
  }
  .membership-columns .membership-column h4 + h4 {
    font-size: 1rem;
  }
}
.membership-columns .membership-column h4 small {
  font-size: 0.8em;
}
.membership-columns .membership-column h5 {
  font-size: 2rem;
  font-weight: 700;
  text-transform: none;
  padding-bottom: 5px;
}
.membership-columns .membership-column h5 small {
  font-size: 1.3rem;
  font-weight: 400;
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column h5 {
    font-size: 1.3rem;
  }
  .membership-columns .membership-column h5 + h4 {
    font-size: 1rem;
  }
}
.membership-columns .membership-column ins {
  text-decoration: line-through;
}
.membership-columns .membership-column .membership-content h5 {
  text-transform: none;
  padding: 10px 15px;
  font-size: 1.5rem;
  text-align: center;
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column .membership-content h5 {
    padding: 8px 5px;
  }
}
.membership-columns .membership-column .membership-content ul li {
  padding: 10px 15px;
  line-height: 1.3;
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column .membership-content ul li {
    padding: 8px 5px;
    font-size: 14px;
    line-height: 1.2;
  }
}
.membership-columns .membership-column .membership-content ul li:before {
  font-family: "FontAwesome";
  content: "\f00c";
  color: green;
  margin-right: 10px;
}
.membership-columns .membership-column .membership-content ul li:nth-child(odd) {
  background: #e5f8fb;
}
.membership-columns .membership-column .membership-header {
  padding: 1.5em;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
@media (max-width: 991.98px) {
  .membership-columns .membership-column .membership-header {
    padding: 15px;
  }
}

.tags {
  display: flex;
  font: 16px "Youth", sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 800;
  margin-top: 5px;
}
.tags .tag {
  padding: 5px 10px;
  border: 2px solid white;
  border-radius: 50px;
  margin-right: 5px;
}

.inner-banner p {
  z-index: 9999;
  position: relative;
}

.opening-times-container {
  background: #f5f5f5;
  margin-top: -20px;
  text-align: center;
  padding: 3em 2em 1.5em 2em;
  margin-bottom: 2em;
  color: #0042DD;
  display: none;
}
.opening-times-container.active {
  display: block;
}
@media (max-width: 991.98px) {
  .opening-times-container {
    padding: 35px 15px 0 15px;
  }
}
.opening-times-container h3 {
  text-transform: none;
  font-weight: 700;
  margin-bottom: 0.5em;
  font-size: 2rem;
}
.opening-times-container .opening-time {
  display: flex;
}
@media (max-width: 991.98px) {
  .opening-times-container .opening-time {
    flex-wrap: wrap;
  }
}
.opening-times-container .opening-time {
  color: #0042DD;
}
.opening-times-container .opening-time .day {
  flex: 1;
  border-right: 3px solid #0042DD;
}
@media (max-width: 991.98px) {
  .opening-times-container .opening-time .day {
    padding: 0 10px;
    margin-bottom: 20px;
  }
}
@media (max-width: 991.98px) {
  .opening-times-container .opening-time .day h4 {
    padding-bottom: 5px;
    font-size: 1.2rem;
  }
}
.opening-times-container .opening-time .day:last-child {
  border-right: 0;
}
.opening-times-container .opening-time .day p {
  padding-bottom: 0;
}

.card-news img {
  height: 200px !important;
}

.career-sidebar {
  padding: 2em;
  border-radius: 12px;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
  margin-top: 1.5em;
}
@media (min-width: 992px) {
  .career-sidebar {
    position: sticky;
    top: 180px;
    left: 0;
  }
}
.career-sidebar h4 {
  text-transform: uppercase;
}
.career-sidebar select {
  padding: 15px;
  background: #eee;
  width: 100%;
  font: 16px "Youth", sans-serif;
  font-size: 1.125rem;
  border-radius: 52px;
  margin-top: 10px;
}

.job-details {
  padding: 3em 0 1em 0;
}
.job-details .job-detail {
  display: flex;
}
.job-details .job-detail > p {
  flex: 1;
  font-weight: bold;
}
.job-details .job-detail > div {
  flex: 3;
}

.job-description h3 {
  text-transform: none;
  font-weight: 800;
  font-size: 3rem;
}

.venue-main-image {
  position: relative;
}
.venue-main-image i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #3D6FE5;
  height: 84px;
  width: 84px;
  border: 5px solid #3D6FE5;
  border-radius: 50%;
  line-height: 84px;
  text-align: center;
  font-size: 2em;
}

.calendar-item {
  margin-bottom: 5em;
}
.calendar-item header, .calendar-item div {
  display: flex;
}
.calendar-item header span, .calendar-item div span {
  flex: 1;
  font: 16px "Youth", sans-serif;
  font-size: 1rem;
}
.calendar-item div {
  border-bottom: 1px solid #0042DD;
  padding: 1em 0;
}
.calendar-item header {
  margin-bottom: 20px;
}
.calendar-item header span {
  font: 16px "Youth", sans-serif;
  font-size: 1.25rem;
  color: #0042DD;
}

.calendar {
  margin-bottom: 4em;
}
.calendar .calendar__slider {
  padding: 0 100px;
}
.calendar .splide__arrow {
  border: 2px solid #0042DD;
  background: transparent;
  width: 4em;
  height: 4em;
}
.calendar .splide__arrow svg {
  fill: #0042DD;
}
.calendar .splide__slide {
  border: 1px solid #0042DD;
  border-radius: 20px;
  padding: 10px;
}
.calendar .splide__slide.is-active {
  background: #0042DD;
  color: white;
}
.calendar .splide__slide.is-active * {
  color: white;
}
.calendar .splide__slide h2 {
  font-size: 2.9rem;
  font-weight: 800 !important;
  padding: 0;
  color: #0042DD;
}
.calendar .splide__slide h2 i {
  font-width: 700;
  font-size: 1.5rem;
}
.calendar .splide__slide h2 span {
  font-size: 1.2rem;
  display: block;
  line-height: 1;
}

.timetable-title {
  background-image: url("/assets/img/app-background.png");
  z-index: 5;
  padding: 2em;
  position: relative;
  margin-bottom: -1em;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.timetable-title h2 {
  color: white;
}

.timetable {
  width: 100%;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2875rem + 0.45vw);
}
@media (min-width: 1200px) {
  .timetable {
    font-size: 1.625rem;
  }
}
.timetable {
  color: #0042DD;
  font-weight: bold;
  background: #f5f5f5;
  padding: 1.5em;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  position: relative;
}
.timetable .timetable-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.timetable .timetable-header span {
  flex: 1;
}
.timetable .timetable-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #3D6FE5;
}
.timetable .timetable-content span {
  flex: 1;
  padding: 10px 0;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
  .timetable .timetable-content span {
    font-size: 1.3125rem;
  }
}

.media-text video {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  vertical-align: top;
}

.other-gallery {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2px;
  margin-right: -2px;
}
.other-gallery a {
  width: 25%;
  display: inline-block;
}
.other-gallery a img {
  vertical-align: top;
  height: 120px;
  object-fit: cover;
  padding: 2px;
}

.day-elements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.day-element {
  padding: 1em;
  margin: 20px;
  width: calc(25% - 60px);
  text-align: center;
  border: 2px solid #ccc;
  text-align: center;
  font: 16px "Barlow", sans-serif;
  font-weight: 800;
  font-size: 1.4em;
  cursor: pointer;
  text-transform: uppercase;
}
.day-element.active {
  background: #0042DD;
  color: white;
}

.banner.banner--split-text-left,
.banner.banner--split-text-right {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 72vh;
  background: #fff;
}
.banner.banner--split-text-left .banner__image,
.banner.banner--split-text-left .banner__video,
.banner.banner--split-text-right .banner__image,
.banner.banner--split-text-right .banner__video {
  position: relative !important;
  inset: auto;
  width: 50%;
  flex: 0 0 50%;
  height: auto;
}
.banner.banner--split-text-left .banner__image img, .banner.banner--split-text-left .banner__image video,
.banner.banner--split-text-left .banner__video img,
.banner.banner--split-text-left .banner__video video,
.banner.banner--split-text-right .banner__image img,
.banner.banner--split-text-right .banner__image video,
.banner.banner--split-text-right .banner__video img,
.banner.banner--split-text-right .banner__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.banner.banner--split-text-left .banner__content,
.banner.banner--split-text-right .banner__content {
  position: relative !important;
  inset: auto;
  width: 50%;
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 40px 0;
}
.banner.banner--split-text-left .banner__content .feature-image-content, .banner.banner--split-text-left .banner__content .main-content,
.banner.banner--split-text-right .banner__content .feature-image-content,
.banner.banner--split-text-right .banner__content .main-content {
  text-align: left;
  justify-content: flex-start;
}
.banner.banner--split-text-left .banner__content h1,
.banner.banner--split-text-right .banner__content h1 {
  color: #0042DD;
}
.banner.banner--split-text-left .banner__content h2, .banner.banner--split-text-left .banner__content .h4,
.banner.banner--split-text-right .banner__content h2,
.banner.banner--split-text-right .banner__content .h4 {
  color: #1D1E1F !important;
}
.banner.banner--split-text-left .banner__content .user-content, .banner.banner--split-text-left .banner__content p,
.banner.banner--split-text-right .banner__content .user-content,
.banner.banner--split-text-right .banner__content p {
  color: #1D1E1F;
}
.banner.banner--split-text-left .banner__content .button,
.banner.banner--split-text-right .banner__content .button {
  background: #0042DD !important;
  color: #fff !important;
  border: 0 !important;
}
.banner.banner--split-text-left .banner__content .button i,
.banner.banner--split-text-right .banner__content .button i {
  color: #fff !important;
}
.banner.banner--split-text-left .banner__content .button:hover,
.banner.banner--split-text-right .banner__content .button:hover {
  background: #0033AD !important;
}
@media (max-width: 767.98px) {
  .banner.banner--split-text-left,
  .banner.banner--split-text-right {
    flex-wrap: wrap;
  }
  .banner.banner--split-text-left .banner__image, .banner.banner--split-text-left .banner__video, .banner.banner--split-text-left .banner__content,
  .banner.banner--split-text-right .banner__image,
  .banner.banner--split-text-right .banner__video,
  .banner.banner--split-text-right .banner__content {
    width: 100%;
    flex: 0 0 100%;
  }
}

.banner.banner--split-text-left .banner__image, .banner.banner--split-text-left .banner__video {
  order: 2;
}
.banner.banner--split-text-left .banner__content {
  order: 1;
}

.banner.banner--split-text-right .banner__image, .banner.banner--split-text-right .banner__video {
  order: 1;
}
.banner.banner--split-text-right .banner__content {
  order: 2;
}

/* ============================================================
   Figma-brand VENUE single page.
   Applies to every venue at once — they all share the one
   Views/Venue.cshtml template, and Master adds body.template-venue.
   Restyles the CMS-driven sections (intro, opening times,
   activities) to the new Xcite look without touching markup, so
   the content stays fully editable.
   ============================================================ */
.template-venue .media-text-container .media-text__image img,
.template-venue .media-text-container .venue-main-image img,
.template-venue .media-text-container .other-gallery img {
  border-radius: 14px;
}
.template-venue .media-text-container .media-text__content h4 {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  text-transform: none;
  margin-bottom: 0.35em;
}
.template-venue .content-switcher-container .content-switcher,
.template-venue .content-switcher.background-blue {
  background-image: none !important;
  background: #0042DD !important;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 14px;
}
.template-venue .content-switcher-container .content-switcher::before,
.template-venue .content-switcher.background-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/x-burst.png") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}
.template-venue .content-switcher-container .content-switcher h3, .template-venue .content-switcher-container .content-switcher p, .template-venue .content-switcher-container .content-switcher label,
.template-venue .content-switcher.background-blue h3,
.template-venue .content-switcher.background-blue p,
.template-venue .content-switcher.background-blue label {
  color: #fff;
  position: relative;
  z-index: 1;
}
.template-venue .content-switcher-container .content-switcher select,
.template-venue .content-switcher.background-blue select {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 40px;
}
.template-venue .opening-times-container {
  background: #F5F2F1;
  border-radius: 14px;
}
.template-venue .opening-times-container .opening-time {
  flex-wrap: wrap;
  gap: 14px;
}
.template-venue .opening-times-container .opening-time .day {
  flex: 1 1 140px;
  border-right: 0;
  background: #fff;
  border: 1px solid #e7e3e1;
  border-radius: 12px;
  padding: 20px 14px;
}
.template-venue .opening-times-container .opening-time .day:last-child {
  border-right: 0;
}
.template-venue .opening-times-container .opening-time .day h4 {
  color: #0042DD;
  font-family: "Youth", sans-serif;
}
.template-venue .standoutblock {
  background-image: none !important;
  background: #0042DD !important;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.template-venue .standoutblock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/x-burst.png") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}
.template-venue .standoutblock > * {
  position: relative;
  z-index: 1;
}
.template-venue .standoutblock h2 {
  color: #fff;
}
.template-venue .standoutblock .icon-grid__icon .icon-grid__icon-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.template-venue .standoutblock .icon-grid__icon:hover .icon-grid__icon-container {
  background: rgba(255, 255, 255, 0.2);
}
.template-venue .standoutblock .icon-grid__icon h4 {
  color: #fff;
}

/* ============================================================
   Rebrand sweep — legacy accent sections brought onto the new
   Xcite palette. These are page-specific classes (News hero,
   Careers/jobs sidebar, Memberships pricing widget), so plain
   overrides are safe. Appended last to win the cascade.
   ============================================================ */
/* --- News: featured hero band -> electric blue + X-burst --- */
.featured-news {
  background-image: none !important;
  background: #0042DD;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 10px;
}
.featured-news::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/x-burst.png") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}
.featured-news img {
  position: relative;
  z-index: 1;
  border-radius: 12px;
}

/* --- Careers / jobs sidebar + selects (also TrainingCourse) --- */
.career-sidebar {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #e7e3e1;
}
.career-sidebar h4 {
  color: #0042DD;
}
.career-sidebar select {
  background: #fff;
  border: 1px solid #e7e3e1;
  border-radius: 10px;
  color: #1D1E1F;
}

/* --- Memberships pricing widget: legacy navy/cyan accents -> brand --- */
.membership-tabs ul li {
  border-bottom-color: #F5F2F1;
}
.membership-tabs ul li.active {
  border-color: #0042DD;
}

.membership-columns .membership-column {
  border-radius: 16px;
}

.membership-content ul li:nth-child(odd) {
  background: #F5F2F1;
}

/* --- Activities finder panel: soften legacy heavy shadow to brand card --- */
.activity-finder {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

/* --- Communities "health" cards: brand horizontal card (was unstyled) --- */
.health-card {
  display: flex;
  align-items: stretch;
  padding: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  margin: 1.5em auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.health-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}
.health-card .image {
  flex: 0 0 40%;
}
.health-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.health-card .content {
  flex: 1;
  padding: 28px 32px;
}
.health-card .content h3 {
  color: #0042DD;
  margin-bottom: 10px;
}
.health-card .content .button-box {
  margin-top: 16px;
}
@media (max-width: 991.98px) {
  .health-card {
    flex-direction: column;
  }
  .health-card .image {
    flex: initial;
  }
  .health-card .image img {
    height: 220px;
  }
}

.template-campaigns .banner {
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  padding: 2em 0;
}
.template-campaigns .banner .banner__content h1 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.6875rem + 5.25vw);
}
@media (min-width: 1200px) {
  .template-campaigns .banner .banner__content h1 {
    font-size: 5.625rem;
  }
}
.template-campaigns .banner .banner__content h1 {
  font-weight: 900;
  line-height: 0.8;
  margin-bottom: 20px;
}
.template-campaigns .banner .banner__content .feature-image-content .main-content {
  width: 40%;
}
.template-campaigns .banner .banner__content .col-md-12.feature-image-content .feature-image-container {
  width: 50%;
}

.multi-accordian .accordian-nav {
  margin-top: 20px;
  display: flex;
}
.multi-accordian .accordian-nav li {
  flex: 1;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  padding: 10px 40px;
  border-bottom: 5px solid #d2d3d6;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.26875rem + 0.225vw);
}
@media (min-width: 1200px) {
  .multi-accordian .accordian-nav li {
    font-size: 1.4375rem;
  }
}
.multi-accordian .accordian-nav li.active {
  border-bottom: 5px solid #0042DD;
}
.multi-accordian .accordians {
  display: none;
  margin: 0;
  padding: 1em;
}
.multi-accordian .accordians.active {
  display: block;
}

/* ============================================================
   Venue page (Views/Venue.cshtml) — Figma WLL-17-DESKTOP-VENUE / MOBILE-VENUE.
   Ported from the retired /venue/{slug} prototype so every venue node renders
   the design from CMS content. Uses the shared .fh-btn from layout/_toolbar.scss.
   ============================================================ */
.vn-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 991.98px) {
  .vn-wrap {
    padding: 0 20px;
  }
}

.vn-arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.vn-arrow path {
  stroke: currentColor;
}

.fh-btn.is-outline {
  background: transparent;
  color: #0042DD;
  box-shadow: inset 0 0 0 2px #0042DD;
}

/* the venue hero replaces the generic interior banner */
body.template-venue .inner-banner {
  display: none;
}

/* ---------- hero ---------- */
.vn-hero {
  position: relative;
  overflow: hidden;
  background: #0042DD;
  color: #fff;
  text-align: center;
  padding: 130px 40px;
}
.vn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/x-burst.png") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
.vn-hero > * {
  position: relative;
  z-index: 1;
}
.vn-hero small {
  display: block;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 14px;
}
.vn-hero {
  /* BugHerd #114: the same heading scale as the other Figma heroes (160px on a 1920 frame) */
}
.vn-hero h1 {
  color: #fff;
  font-family: "Youth", sans-serif;
  font-size: clamp(36px, 5.6vw, 104px);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-transform: none;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}
@media (max-width: 991.98px) {
  .vn-hero {
    padding: 70px 24px;
  }
  .vn-hero small {
    font-size: 16px;
  }
  .vn-hero h1 {
    font-size: clamp(28px, 9vw, 48px);
  }
}
.vn-hero {
  /* BugHerd #114: the moving X-Effect sits under the copy, the poster under the loop */
}
.vn-hero--video {
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0042DD url("../img/venue-hero-x-effect-poster.webp") center/cover no-repeat;
}
.vn-hero--video::before {
  display: none;
}
.vn-hero--video .vn-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 991.98px) {
  .vn-hero--video {
    min-height: 38vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vn-hero--video .vn-hero__video {
    display: none;
  }
}

/* ---------- intro ---------- */
/* jump bar under the hero (BugHerd #32) */
/* BugHerd #96 — the jump bar follows the page and anchors under the sticky header.
   --wll-header-h is measured in xcite.js because the notification strap changes the height. */
.vn-jumpbar {
  background: #fff;
  border-bottom: 1px solid rgba(29, 30, 31, 0.1);
  position: sticky;
  top: var(--wll-header-h, 106px);
  z-index: 30;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.vn-jumpbar .vn-wrap {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vn-jumpbar .vn-wrap::-webkit-scrollbar {
  display: none;
}
.vn-jumpbar {
  /* BugHerd #115 — the Figma tab styling: pills rather than underlined text links */
}
.vn-jumpbar .vn-wrap {
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 10px;
  align-items: center;
}
.vn-jumpbar a {
  flex: none;
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1D1E1F;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(29, 30, 31, 0.14);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.vn-jumpbar a:hover, .vn-jumpbar a.is-current {
  background: #0042DD;
  border-color: #0042DD;
  color: #fff;
  text-decoration: none;
}
.vn-jumpbar {
  /* BugHerd #134 — smaller pills on phones so more of the bar fits before it scrolls */
}
@media (max-width: 991.98px) {
  .vn-jumpbar .vn-wrap {
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .vn-jumpbar a {
    padding: 8px 13px;
    font-size: 13px;
  }
}

/* intro: text left, map right (BugHerd #31/#32) */
.vn-intro {
  text-align: left;
  padding: 70px 0;
  background: #fff;
}
.vn-intro__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 991.98px) {
  .vn-intro__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.vn-intro__map {
  border-radius: 12px;
  overflow: hidden;
  background: #F5F2F1;
  aspect-ratio: 4/3;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
}
.vn-intro__map iframe, .vn-intro__map img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .vn-intro__map {
    aspect-ratio: 16/11;
  }
}
.vn-intro__copy {
  max-width: none;
  margin: 0;
}
.vn-intro__copy p {
  font-size: 18px;
  line-height: 1.55;
  color: #1D1E1F;
  text-align: left !important;
}
.vn-intro__copy {
  /* pasted copy carries inline colours (one paragraph blue, the next black — BugHerd #36): one ink for body text */
}
.vn-intro__copy p, .vn-intro__copy li, .vn-intro__copy span, .vn-intro__copy strong, .vn-intro__copy em {
  color: #1D1E1F !important;
}
.vn-intro__copy a {
  color: #0042DD !important;
  text-decoration: underline;
}
.vn-intro__copy h2, .vn-intro__copy h3, .vn-intro__copy h4 {
  color: #0042DD !important;
  text-transform: none;
  text-align: left;
}
.vn-intro .vn-address {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  margin: 28px 0 6px;
}
.vn-intro .vn-address p {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
}
.vn-intro .vn-phone {
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 6px;
  padding: 0;
}
.vn-intro .vn-phone a {
  color: inherit;
  text-decoration: none;
}
.vn-intro .vn-phone a:hover {
  color: #0042DD;
}
.vn-intro__actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
@media (max-width: 991.98px) {
  .vn-intro {
    padding: 44px 0;
  }
  .vn-intro__copy p {
    font-size: 16px;
  }
}

/* ---------- latest news (BugHerd #65) ---------- */
.vn-news .vn-card__body {
  align-items: flex-start;
}
.vn-news .vn-card__body h3 {
  font-size: 20px;
  line-height: 1.15;
}

.vn-news__date {
  display: block;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(29, 30, 31, 0.6);
  margin-bottom: 6px;
}

.vn-sec__head .fh-btn {
  flex: none;
}

/* ---------- venue video (YouTube link on the node — BugHerd #42) ---------- */
.vn-video {
  background: #fff;
  padding: 0 0 70px;
}
.vn-video__frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #1D1E1F;
  aspect-ratio: 16/9;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
}
.vn-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 991.98px) {
  .vn-video {
    padding-bottom: 44px;
  }
}

/* ---------- generic section + heading row ---------- */
.vn-sec {
  padding: 80px 0;
  background: #fff;
}
.vn-sec--off {
  background: #F5F2F1;
}
.vn-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.vn-sec__head h2 {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.4125rem + 1.95vw);
}
@media (min-width: 1200px) {
  .vn-sec__head h2 {
    font-size: 2.875rem;
  }
}
.vn-sec__head h2 {
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-transform: none;
}
@media (max-width: 991.98px) {
  .vn-sec {
    padding: 48px 0;
  }
  .vn-sec__head {
    margin-bottom: 24px;
  }
  .vn-sec__head h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.325rem + 0.9vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .vn-sec__head h2 {
    font-size: 2rem;
  }
}

/* ---------- facilities gallery ---------- */
.vn-fac {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
}
.vn-fac--single {
  grid-template-columns: 1fr;
}
.vn-fac a {
  display: block;
  line-height: 0;
}
.vn-fac__large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  aspect-ratio: 4/3;
}
.vn-fac__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.vn-fac__grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
@media (max-width: 991.98px) {
  .vn-fac {
    grid-template-columns: 1fr;
  }
  .vn-fac__grid {
    gap: 10px;
  }
}

/* ---------- blue band (opening times) ---------- */
.vn-blue {
  background: #0042DD;
  color: #fff;
  padding: 80px 0;
}
.vn-blue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.vn-blue__head h2 {
  color: #fff;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.4125rem + 1.95vw);
}
@media (min-width: 1200px) {
  .vn-blue__head h2 {
    font-size: 2.875rem;
  }
}
.vn-blue__head h2 {
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-transform: none;
}
.vn-blue__head svg {
  width: 44px;
  height: 44px;
  stroke: #fff;
  fill: none;
}
.vn-blue__note {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  margin: 0 0 22px;
  padding: 0;
}
@media (max-width: 991.98px) {
  .vn-blue {
    padding: 48px 0;
  }
  .vn-blue__head h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.325rem + 0.9vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .vn-blue__head h2 {
    font-size: 2rem;
  }
}
@media (max-width: 991.98px) {
  .vn-blue__head svg {
    width: 32px;
    height: 32px;
  }
}

/* facility tabs on the blue band (BugHerd #33) */
.vn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.vn-tab {
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vn-tab:hover {
  border-color: #fff;
}
.vn-tab.is-active {
  background: #fff;
  color: #0042DD;
  border-color: #fff;
}
.vn-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.vn-select-wrap {
  position: relative;
  margin-bottom: 20px;
}
.vn-select-wrap .vn-chev {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: #0042DD;
  fill: none;
  pointer-events: none;
}

.vn-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 18px 46px 18px 22px;
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin: 0;
}

.vn-days {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: center;
}
.vn-days.active {
  display: grid;
}
.vn-days .vn-day {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-align: center;
  padding: 26px 18px;
  color: #fff;
}
.vn-days .vn-day b {
  display: block;
  font-family: "Youth", sans-serif;
  font-size: 18px;
  margin-bottom: 6px;
}
.vn-days .vn-day span {
  font-size: 15px;
  opacity: 0.9;
}
@media (max-width: 991.98px) {
  .vn-days {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .vn-days .vn-day {
    padding: 18px 12px;
  }
}

/* ---------- activity cards (Card Style 1) ---------- */
.vn-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 991.98px) {
  .vn-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* BugHerd #10 — a column of full-width activity tiles made the venue page a very long scroll on
   phones. Two up, with a shallower image and tighter type, keeps every activity and its picture
   while taking about a quarter of the height. Scoped to the venue page's activities grid, so the
   news, events and search listings that share .vn-cards keep their full-width, readable rows. */
@media (max-width: 991.98px) {
  body.template-venue #activities .vn-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  body.template-venue #activities .vn-cards .vn-card__img {
    aspect-ratio: 4/3;
  }
  body.template-venue #activities .vn-cards .vn-card__icon {
    width: 56px;
    height: 56px;
  }
  body.template-venue #activities .vn-cards .vn-card__body {
    padding: 12px 14px 14px;
    gap: 8px;
  }
  body.template-venue #activities .vn-cards .vn-card__body h3 {
    font-size: 16px;
    line-height: 1.15;
  }
  body.template-venue #activities .vn-cards .vn-card__body .vn-arrow {
    width: 18px;
    height: 18px;
    flex: none;
  }
}

.vn-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #1D1E1F;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vn-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
  text-decoration: none;
}
.vn-card__img {
  aspect-ratio: 16/11;
  background: #0042DD center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vn-card__icon {
  width: 96px;
  height: 96px;
  background: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}
.vn-card__body {
  padding: 22px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1;
}
.vn-card__body h3 {
  font-family: "Youth", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1D1E1F;
  margin: 0;
  padding: 0;
  text-transform: none;
}
.vn-card__body .vn-arrow path {
  stroke: #0042DD;
}

/* legacy .opening-times-container / .template-venue rules paint an off-white panel; the Figma tiles sit on the blue band */
body.template-venue .vn-days.opening-times-container {
  background: transparent !important;
  border-radius: 0;
  padding: 0 !important;
  margin: 0;
  box-shadow: none;
}
body.template-venue .vn-days.opening-times-container .vn-day {
  border: 0;
  flex: none;
}

/* ---------- live timetable (shared partial, on the off-white band) ---------- */
.vn-timetable {
  padding: 80px 0;
  background: #F5F2F1;
}
.vn-timetable #timetables {
  margin: 0;
}
@media (max-width: 991.98px) {
  .vn-timetable {
    padding: 40px 0;
  }
}

/* ---------- join ---------- */
.vn-join {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  /* the animated badge, rounded like the Figma frame; the poster stands in for reduced motion */
}
.vn-join__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 890/700;
  object-fit: cover;
  border-radius: 12px;
  background: #0042DD url("../img/join-badge-poster.webp") center/cover no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .vn-join__video {
    visibility: hidden;
  }
  .vn-join__media {
    background: url("../img/join-badge-poster.webp") center/cover no-repeat;
    border-radius: 12px;
  }
}
.vn-join {
  /* BugHerd #118: heading, copy and button centred in their column, as the Figma has them */
}
.vn-join__text {
  padding: 40px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vn-join__text h2 {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.475rem + 2.7vw);
}
@media (min-width: 1200px) {
  .vn-join__text h2 {
    font-size: 3.5rem;
  }
}
.vn-join__text h2 {
  font-weight: 700;
  line-height: 1;
  margin: 0 0 22px;
  padding: 0;
  text-transform: none;
}
.vn-join__text p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 44ch;
  margin: 0 0 30px;
  padding: 0;
  color: #1D1E1F;
}
.vn-join__media {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.vn-join__media img {
  width: 100%;
  display: block;
}
@media (max-width: 991.98px) {
  .vn-join {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vn-join__text {
    padding: 0;
  }
  .vn-join__text h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.35rem + 1.2vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .vn-join__text h2 {
    font-size: 2.25rem;
  }
}

/* ---------- venue status: fixed bottom bar with a radar pulse (BugHerd #83) ---------- */
/* .venue-status--fixed doubled up so these beat the legacy `.venue-status .venue-item .message{flex:10}` */
.venue-status--fixed.venue-status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
.venue-status--fixed.venue-status .container {
  max-width: none;
  padding: 0;
}
.venue-status--fixed.venue-status .venue-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 24px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-align: left;
  flex-wrap: nowrap;
}
.venue-status--fixed.venue-status .venue-item.Green {
  background: #1f8f4e;
}
.venue-status--fixed.venue-status .venue-item.Amber {
  background: #e0a100;
  color: #1D1E1F;
}
.venue-status--fixed.venue-status .venue-item.Red {
  background: #C8102E;
}
.venue-status--fixed.venue-status .venue-item .message {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}
@media (max-width: 991.98px) {
  .venue-status--fixed.venue-status .venue-item {
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.35;
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* the radar: a solid dot with two rings sweeping outwards */
.venue-status__radar {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  align-self: center;
}
.venue-status__radar::before, .venue-status__radar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: vn-radar 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.venue-status__radar::after {
  animation-delay: 1.2s;
}

@keyframes vn-radar {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  70% {
    transform: scale(3.4);
    opacity: 0;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .venue-status__radar::before, .venue-status__radar::after {
    animation: none;
  }
}
/* room for the header and the sticky jump bar when an in-page link jumps to a section */
body.template-venue [id=contact-details],
body.template-venue [id=opening-times],
body.template-venue [id=activities],
body.template-venue [id=timetables],
body.template-venue [id=venue-video],
body.template-venue [id=join],
body.template-venue [id=news] {
  scroll-margin-top: calc(var(--wll-header-h, 106px) + 60px);
}

/* BugHerd #97 — address, phone and Directions moved under the map on the right */
.vn-intro__contact {
  margin-top: 26px;
}
.vn-intro__contact .vn-address {
  margin: 0;
}
.vn-intro__contact .vn-phone {
  margin: 8px 0 0;
}
.vn-intro__contact .vn-intro__actions {
  margin-top: 20px;
}
@media (max-width: 991.98px) {
  .vn-intro__contact {
    margin-top: 20px;
  }
}

/* BugHerd #99 — the button bars need air between themselves and the copy around them */
.vn-intro__text .vn-intro__actions {
  margin-top: 30px;
}

/* ---------- Features (BugHerd #66) ----------
   The Figma venue design's "Features" band: two columns of white pills, each a blue line icon
   beside a bold label. Driven by the venue's existing Icons block, so editors add and reorder the
   features themselves; the icon artwork is masked to brand blue by the icon partial. */
.vn-features {
  /* Figma WLL-17-DESKTOP-VENUE "Features": a plain white band, an 80px blue heading on the left,
     and the features as a two-column list of low white tiles (1px hairline, 12px radius) with a
     40px blue line icon beside a 24px label. No wrapper card: the legacy icon-grid's shadowed
     panel and its pulled-up margin are switched off here. */
  background: #fff;
  padding: 92px 0 112px;
}
@media (max-width: 991.98px) {
  .vn-features {
    padding: 44px 0 52px;
  }
}
.vn-features .icon-grid, .vn-features .icon-grid.content-block {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-shadow: none;
}
.vn-features .icon-grid .container {
  max-width: none;
  padding: 0;
}
.vn-features .icon-grid > .container > .row {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.vn-features .icon-grid > .container > .row > .col-12 {
  padding: 0;
}
.vn-features .icon-grid > .container h4 {
  padding-bottom: 0;
}
.vn-features {
  /* the legacy grid gives the icon cell a 180px minimum and 20px margins; the Figma tile is 104px tall */
}
.vn-features .icon-grid > .container > .row .icon-grid__icon-container {
  min-height: 0;
  margin: 0;
}
.vn-features h2 {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.17vw, 80px);
  line-height: 1.2;
  text-transform: none;
  text-align: left;
  margin: 0 0 28px;
  padding: 0;
}
@media (max-width: 991.98px) {
  .vn-features h2 {
    margin-bottom: 20px;
  }
}
.vn-features .icon-grid__icons {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  width: 100%;
}
@media (max-width: 991.98px) {
  .vn-features .icon-grid__icons {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.vn-features .icon-grid__icon {
  display: flex;
  align-items: center;
  gap: 28px;
  width: auto;
  max-width: none;
  flex: none;
  padding: 20px 32px !important;
  min-height: 104px;
  background: #fff;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  text-align: left;
}
@media (max-width: 991.98px) {
  .vn-features .icon-grid__icon {
    min-height: 0;
    padding: 14px 18px !important;
    gap: 16px;
  }
}
.vn-features {
  /* nested to out-rank the legacy .icon-grid__icon-container .icon-mask (110px) rule */
}
.vn-features .icon-grid__icon-container {
  flex: none;
  margin: 0;
  padding: 0;
  width: auto;
  min-height: 0;
  height: auto;
}
.vn-features .icon-grid__icon-container .icon-mask {
  width: 40px;
  height: 40px;
  margin: 0;
  background-color: #0042DD;
}
@media (max-width: 991.98px) {
  .vn-features .icon-grid__icon-container .icon-mask {
    width: 32px;
    height: 32px;
  }
}
.vn-features .icon-grid__icon-title {
  text-align: left;
  margin: 0;
  padding: 0;
}
.vn-features .icon-grid__icon-title h4 {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #1D1E1F;
  margin: 0;
  padding: 0;
  text-transform: none;
}
@media (max-width: 991.98px) {
  .vn-features .icon-grid__icon-title h4 {
    font-size: 17px;
  }
}
.vn-features .icon-grid__icon-title p {
  margin: 6px 0 0;
  padding: 0;
  font-size: 16px;
  color: rgba(29, 30, 31, 0.65);
}
.vn-features .icon-grid__icon-title p:empty {
  display: none;
}

/* BugHerd #117 — the swimming-times note is a proper callout, not small print */
.vn-blue__callout {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 15px 26px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-family: "Youth", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.vn-blue__callout strong {
  font-weight: 700;
  text-decoration: underline;
}
.vn-blue__callout .vn-arrow {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex: none;
}
.vn-blue__callout:hover {
  background: #fff;
  color: #0042DD;
  border-color: #fff;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .vn-blue__callout {
    padding: 13px 20px;
    font-size: 15px;
    gap: 10px;
  }
}

/* BugHerd #128 — the jump bar pills sit centred under the hero */
.vn-jumpbar .vn-wrap {
  justify-content: center;
}

/* BugHerd #129 — the swimming callout follows the day tiles */
.vn-blue .vn-blue__callout {
  margin-top: 30px;
}

/* BugHerd #170 — a school venue's intro was typed as an <h4>; headings inside the intro copy read as
   a lead line in the body ink, not a blue display heading, so every venue's intro looks the same */
.vn-intro__copy h1, .vn-intro__copy h2, .vn-intro__copy h3, .vn-intro__copy h4, .vn-intro__copy h5 {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #1D1E1F;
  text-transform: none;
  margin: 0 0 14px;
  padding: 0;
}

/* ============================================================
   Legacy inline overrides moved verbatim out of Views/Partials/components/Header.cshtml
   (2026-09-06) so base.css is the single stylesheet. Tidy/retire rules here as components
   are migrated to the Figma content-blocks spec.
   ============================================================ */
.venue-status .venue-item {
  padding: 10px;
  display: flex;
  align-items: center;
}

.venue-status .venue-item.Amber, .venue-status.Amber {
  background: orange;
}

.venue-status .venue-item .status {
  flex: 1;
  text-align: center;
}

.venue-status .venue-item .message {
  flex: 10;
}

.venue-status .venue-item.Green {
  background: green;
  color: white;
}

@media (max-width: 991px) {
  .header .top-navigation .button-links li:nth-child(2) {
    margin-right: -8px;
  }
  .inner-banner img.desktop-image {
    display: none !important;
  }
}
html, body {
  overflow-x: hidden;
}

.header .logo-container a:after {
  background-image: none;
}

.timetable .timetable-content span {
  word-break: break-word;
}

html body form input[type=submit] {
  background: white;
}

.background-blue form input[type=submit] {
  color: #0042DD !important;
}

.opening-times-container form label, .opening-times-container form span {
  color: white;
}

.umbraco-forms-submitmessage {
  text-align: center;
  width: 100%;
  display: inline-block;
  margin-top: 1em;
  font-size: 1.6em;
}

.timetable-content {
  display: none !important;
}

.timetable-content.show {
  display: flex !important;
}

@media (min-width: 991px) {
  body {
    padding-top: 154px;
  }
}
.timetable-title {
  display: flex;
}

.timetable-title .action {
  display: flex;
  align-items: center;
  justify-content: end;
}

.timetable-title .action select {
  margin: 0 0 0 10px;
}

.umbraco-forms-page .umbraco-forms-caption {
  display: block !important;
}

.tags .tag {
  cursor: pointer;
}

.tags .tag:hover {
  opacity: 0.8;
}

.timetable-title {
  background: #0042DD !important;
}

.activity-finder {
  display: none;
}

.opening-times-container .umbraco-forms-page {
  background: #0042DD;
  padding: 20px;
  color: white;
}

.opening-times-container .umbraco-forms-page input, .opening-times-container .umbraco-forms-page select, .opening-times-container .umbraco-forms-page textarea {
  background: white !important;
  color: black !important;
}

.banner__content h1 {
  font-size: 3.8rem;
}

.banner__content .col-md-12.feature-image-content .main-content {
  width: 100%;
}

.card a {
  height: initial;
}

#timetables {
  margin-bottom: 20px;
  margin-top: 20px;
}

.content-switcher-container .content-switcher {
  background: none;
}

.content-switcher-container .content-switcher h3 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.select-group {
  margin-bottom: 20px;
}

.card-feature a {
  height: initial;
}

.splide__arrow:disabled {
  display: none;
}

.umbraco-forms-fieldset legend {
  margin-bottom: 10px;
}

.row-fluid {
  margin-left: -10px;
  margin-right: -10px;
}

.node-1153 .icon-grid__icon img {
  height: 100px;
}

.icon-grid > .container > .row .icon-grid__icon-container {
  min-height: initial;
  margin-bottom: 20px;
  margin-top: 20px;
}

.icon-grid > .container h4 {
  margin-bottom: 0;
  padding-bottom: 10px;
}

@media (max-width: 991px) {
  h1.styled-heading:after {
    display: none;
  }
  .inner-banner h1 {
    margin-bottom: 0;
    padding-bottom: 5px;
  }
  .timetable-title .action {
    flex-wrap: wrap;
  }
  .banner__content h1 {
    font-size: 1.4em;
  }
  .row-fluid {
    display: inline-block !important;
    width: 100%;
  }
  .umbraco-forms-container {
    width: 100%;
  }
  .accordians__header-content {
    padding: 0 15px !important;
  }
  .text-panel .user-content {
    padding: 0 15px;
  }
  .node-1057 .banner__content .main-content p {
    display: none;
  }
  .activity-finder {
    margin-top: 30px;
  }
  .inner-banner + .block-grid > .media-text-container:first-child img {
    display: none;
  }
  .inner-banner + .block-grid > .media-text-container .media-text__content {
    padding-top: 60px;
  }
  .node-2419 .card.card-small-blue-overlay .card__content {
    position: static;
  }
  .node-2419 .card-small-blue-overlay a {
    display: flex;
    background: #0042DD;
    text-decoration: none;
    flex-direction: column;
  }
  .node-2419 .card-small-blue-overlay p {
    font-size: 15px;
    margin-top: 5px;
  }
  .day-element {
    width: calc(50% - 10px);
    margin: 5px;
    padding: 10px;
    font-size: 20px;
  }
  .inner-banner + .block-element .media-text__image {
    display: none;
  }
  .inner-banner + .block-element .media-text__content {
    padding-top: 3em;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .inner-banner + .block-element > div {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
html body .umbraco-forms-navigation input {
  background: #0042DD !important;
  color: white !important;
  font: 16px "Barlow", sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
}

.background-blue input {
  background: white !important;
  color: #0042DD !important;
}

/* BugHerd #139: never stretch a checkbox / radio / button into a full-width bar */
html .umbraco-forms-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html body .umbraco-forms-form textarea {
  width: 100% !important;
  border: 1px solid #ccc;
  max-width: 100% !important;
}

.radiobuttonlist {
  margin-bottom: 20px;
  margin-top: 10px;
  border-top: 1px solid #ccc;
  padding: 10px 0;
}

.radiobuttonlist br {
  display: none;
}

.radiobuttonlist label {
  margin-left: 5px;
  font-size: 18px !important;
  margin-right: 25px;
}

.umbraco-forms-form legend {
  font-size: 1.375rem !important;
}

label.umbraco-forms-label {
  width: 100%;
}

.col-sm-10.umbraco-forms-field-wrapper {
  width: 100%;
}

.umbraco-forms-field {
  margin-bottom: 20px !important;
}

.umbraco-forms-navigation > div {
  width: 100%;
  padding: 0 10px;
}

html body .contact-form input {
  background: white !important;
}

.contact-form {
  margin: 3em auto;
}

.justify-content-center .main-content {
  text-align: center;
}

.justify-content-center .button-box {
  justify-content: center;
  text-align: center;
}

.justify-content-center .banner__content .col-md-12.feature-image-content {
  text-align: center;
  justify-content: center !important;
}

.icon-grid__icons {
  flex-wrap: wrap;
}

table {
  width: 100% !important;
}

form textarea, form input:not([type=checkbox]):not([type=radio]), form select {
  margin-bottom: 0;
}

.fancybox-active #header {
  display: none;
}

/* (legacy styled-heading glow removed 2026-09-06 — see grid/_content-blocks.scss) */
@media (max-width: 991px) {
  .main-content, .feature-image-content {
    width: 100% !important;
  }
  .icon-grid > .container > .row {
    margin-top: -2em;
  }
  .membership-columns {
    flex-wrap: wrap;
  }
  .membership-columns .membership-column {
    width: 100%;
    margin-bottom: 20px;
  }
  body {
    padding-top: 160px;
  }
  .accordian {
    padding: 10px 20px 10px 20px;
  }
  .media-text__image {
    padding: 0;
  }
  .gallery .col-md-12 img {
    height: 140px;
  }
  .banner {
    min-height: 300px;
  }
  .banner__video, .banner__video video {
    position: static !important;
  }
  table {
    min-width: 100% !important;
    width: 100% !important;
  }
  table td {
    width: auto !important;
  }
  .media-text .button {
    font-size: 15px;
  }
  .mobile-header img {
    max-height: 20px;
  }
  .mobile-header span {
    font-size: 11px;
  }
}
.media-text video {
  object-fit: contain !important;
}

.banner__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner__video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.postcode-search {
  display: none;
}

.timetable-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timetable-title select {
  padding: 15px 20px;
  border-radius: 50px;
  font-family: "gilroy-regular";
  font-weight: 400 !important;
  margin: 0 20px;
  font-size: 16px;
}

.node-2340 .timetable-title select {
  display: none;
}

.timetable {
  max-height: 800px;
  overflow: hidden;
}

.timetable.show {
  overflow: initial;
  max-height: initial;
}

.timetable-more {
  position: Absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: white;
  padding: 20px;
  text-align: center;
  background: #0042DD;
  cursor: pointer;
  background: linear-gradient(0deg, rgb(0, 66, 221) 0%, rgba(0, 66, 221, 0) 100%);
}

@media (max-width: 991px) {
  .timetable-title .action select {
    padding: 5px;
    margin: 5px 5px !important;
    font-size: 14px;
  }
  .timetable-title {
    padding: 1em;
  }
  .action select {
    width: calc(50% - 10px);
  }
  .action select:nth-child(3) {
    width: 100%;
    max-width: 100% !important;
  }
  .timetable-title {
    display: block !important;
  }
  .timetable-title .action {
    display: flex;
  }
  .timetable-title .action select {
    margin-left: -5px;
    max-width: 50%;
  }
  .timetable-content.show {
    display: inline-block !important;
  }
  .timetable {
    padding: 20px 15px;
  }
  .timetable-content span {
    display: block;
    padding: 5px 0 !important;
  }
  .timetable-header {
    display: none !important;
  }
  .timetable-content span:before {
    text-decoration: underline;
  }
  .timetable-content span:nth-child(1):before {
    content: "Day: ";
  }
  .timetable-content span:nth-child(2):before {
    content: "Date: ";
  }
  .timetable-content span:nth-child(3):before {
    content: "Venue: ";
  }
  .timetable-content span:nth-child(4):before {
    content: "Start: ";
  }
  .timetable-content span:nth-child(5):before {
    content: "End: ";
  }
  .timetable-content span:nth-child(6):before {
    content: "Activity: ";
  }
  .timetable-content span:nth-child(7):before {
    content: "Availability: ";
  }
  .timetable-content span:nth-child(8):before {
    content: "";
  }
}
.availability-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.availability-badge {
  font-weight: 700;
}

.availability-badge.available {
  background: #e3f4ea;
  color: #1f8f4e;
}

.availability-badge.low {
  background: #fdf0d3;
  color: #8a6400;
}

.availability-badge.full {
  background: #f0eeed;
  color: #8a8a8a;
}

.btn-book {
  display: inline-block;
  padding: 5px 16px;
  background: #0042DD;
  color: white !important;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}

.btn-book:hover {
  opacity: 0.85;
  text-decoration: none;
  color: white !important;
}

/* (blue timetable band removed 2026-09-06 — see components/_timetable.scss) */
/* ============================================================
   Live Gladstone timetable (Views/Partials/Shared/timetableGladstone.cshtml) — restyled to the
   Figma content-blocks TABLE: blue header row, off-white zebra rows, dark text, pill filters,
   blue arrow to book. Stacked cards on mobile. Imported after legacy-inline so it wins.
   Used on /timetables/, every venue page and activity pages (timetableBlock).
   ============================================================ */
#timetables {
  margin: 0;
}

/* ---- title row + filters ---- */
.timetable-title {
  background: transparent !important;
  background-image: none !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
  border-radius: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.timetable-title h2 {
  color: #0042DD !important;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .timetable-title h2 {
    font-size: 2.5rem;
  }
}
.timetable-title h2 {
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin: 0;
  text-transform: none;
}
.timetable-title .action {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.timetable-title .action select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230042DD' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 16px center/16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 14px 44px 14px 18px !important;
  margin: 0 !important;
  color: #0042DD;
  font-family: "Youth", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  min-width: 170px;
  max-width: none !important;
  width: auto !important;
}
@media (max-width: 991.98px) {
  .timetable-title {
    display: block !important;
    padding: 0 0 16px !important;
  }
  .timetable-title h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3125rem + 0.75vw);
    font-weight: 700;
    margin-bottom: 12px;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .timetable-title h2 {
    font-size: 1.875rem;
  }
}
@media (max-width: 991.98px) {
  .timetable-title .action {
    justify-content: flex-start;
  }
  .timetable-title .action select {
    flex: 1 1 45%;
    min-width: 0;
  }
}

/* ---- table ---- */
.timetable {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0;
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-size: 14px;
  font-weight: 500;
  max-height: 900px;
  overflow: hidden;
  position: relative;
}
.timetable.show {
  max-height: none;
  overflow: visible;
}
.timetable .timetable-header, .timetable .timetable-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  border: 0 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
.timetable .timetable-header > span, .timetable .timetable-content > span {
  flex: 1 1 0;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1 !important;
  display: block;
}
.timetable .timetable-header > span:nth-child(1), .timetable .timetable-content > span:nth-child(1) {
  flex: 0 0 132px;
}
.timetable .timetable-header, .timetable .timetable-content { /* day — wide enough for "Wednesday" (BugHerd #34) */ }
.timetable .timetable-header > span:nth-child(2), .timetable .timetable-content > span:nth-child(2) {
  flex: 0 0 92px;
}
.timetable .timetable-header, .timetable .timetable-content { /* date */ }
.timetable .timetable-header > span:nth-child(4), .timetable .timetable-header > span:nth-child(5), .timetable .timetable-content > span:nth-child(4), .timetable .timetable-content > span:nth-child(5) {
  flex: 0 0 84px;
}
.timetable .timetable-header, .timetable .timetable-content { /* start / end */ }
.timetable .timetable-header > span:nth-child(6), .timetable .timetable-content > span:nth-child(6) {
  flex: 1.6 1 0;
}
.timetable .timetable-header, .timetable .timetable-content { /* activity */ }
.timetable .timetable-header > span:nth-child(7), .timetable .timetable-content > span:nth-child(7) {
  flex: 0 0 120px;
}
.timetable .timetable-header, .timetable .timetable-content { /* availability */ }
.timetable .timetable-header > span:nth-child(8), .timetable .timetable-content > span:nth-child(8) {
  flex: 0 0 72px;
  text-align: right;
}
.timetable .timetable-header, .timetable .timetable-content { /* book */ }
.timetable .timetable-header {
  background: #0042DD !important;
  color: #fff;
  border-radius: 6px;
  display: flex !important;
}
.timetable .timetable-header > span {
  color: #fff !important;
  font-weight: 700 !important;
}
.timetable .timetable-content {
  background: #F5F2F1 !important;
  border-radius: 6px;
}
.timetable .timetable-content span {
  color: #1D1E1F !important;
  font-weight: 500 !important;
}
.timetable .timetable-content > span:nth-child(6) {
  font-weight: 700 !important;
}
.timetable .timetable-content:hover {
  background: #efebe9 !important;
}
.timetable .timetable-content:not(.show) {
  display: none !important;
}
.timetable {
  /* book: electric-blue square with a white arrow */
}
.timetable .btn-book__label {
  display: none;
}
.timetable .btn-book {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #0042DD !important;
  color: #fff !important;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
}
.timetable .btn-book svg {
  width: 18px;
  height: 18px;
}
.timetable .btn-book svg path {
  stroke: #fff;
}
.timetable .btn-book:hover {
  background: #0033AD !important;
}
.timetable {
  /* availability pill */
}
.timetable .availability-badge {
  display: inline-block;
  padding: 5px 12px !important;
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  line-height: 1.3;
}
.timetable .availability-badge.available {
  background: #e3f4ea;
  color: #1f8f4e !important;
}
.timetable .availability-badge.low {
  background: #fdf0d3;
  color: #8a6400 !important;
}
.timetable .availability-badge.full {
  background: #e9e5e3;
  color: #6f6f6f !important;
}
.timetable {
  /* load more: soft white gradient + blue text, sits over the clipped rows */
}
.timetable .timetable-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 0 14px;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(245, 242, 241, 0) 0%, #fff 55%) !important;
  color: #0042DD !important;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.timetable .timetable-more::after {
  content: " ↓";
}
.timetable {
  /* on a blue band (activity pages) the table is a white element with a deep-blue header */
}
.background-blue .timetable .timetable-content, .background-blue_dark .timetable .timetable-content {
  background: #fff !important;
}
.background-blue .timetable .timetable-header, .background-blue_dark .timetable .timetable-header {
  background: #0033AD !important;
}
.background-blue .timetable .timetable-more, .background-blue_dark .timetable .timetable-more {
  background: linear-gradient(180deg, rgba(0, 66, 221, 0) 0%, #0042DD 55%) !important;
  color: #fff !important;
}
.timetable {
  /* ---- mobile: each session becomes a card with labelled lines ---- */
}
@media (max-width: 991.98px) {
  .timetable .timetable-header {
    display: none !important;
  }
  .timetable .timetable-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    border-radius: 10px;
  }
  .timetable .timetable-content:not(.show) {
    display: none !important;
  }
  .timetable .timetable-content span {
    flex: none;
    padding: 2px 0 !important;
    overflow: visible;
    white-space: normal;
    font-size: 14px !important;
  }
  .timetable .timetable-content span::before {
    display: inline-block;
    min-width: 0;
    margin-right: 6px;
    font-weight: 500 !important;
    color: rgba(29, 30, 31, 0.6);
    text-decoration: none !important;
    text-transform: none;
  }
  .timetable .timetable-content > span:nth-child(6) {
    grid-column: 1/-1;
    order: -1;
    font-size: 17px !important;
  }
  .timetable .timetable-content > span:nth-child(6)::before {
    display: none;
  }
  .timetable .timetable-content span:nth-child(1)::before {
    content: "";
  }
  .timetable .timetable-content span:nth-child(2)::before {
    content: "";
  }
  .timetable .timetable-content span:nth-child(3) {
    grid-column: 1/-1;
  }
  .timetable .timetable-content span:nth-child(3)::before {
    content: "";
  }
  .timetable .timetable-content span:nth-child(4)::before {
    content: "Start ";
  }
  .timetable .timetable-content span:nth-child(5)::before {
    content: "End ";
  }
  .timetable .timetable-content > span:nth-child(7) {
    grid-column: 1;
    align-self: center;
  }
  .timetable .timetable-content > span:nth-child(7)::before {
    content: "";
  }
  .timetable .timetable-content > span:nth-child(8) {
    grid-column: 2;
    text-align: right;
  }
  .timetable .timetable-content > span:nth-child(8)::before {
    content: "";
  }
  .timetable .timetable-content {
    /* the column heading is gone on mobile, so the button says what it does (BugHerd #51) */
  }
  .timetable .timetable-content .btn-book {
    width: auto;
    padding: 0 14px 0 16px !important;
    gap: 8px;
  }
  .timetable .timetable-content .btn-book__label {
    display: inline;
    font-family: "Youth", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .timetable .timetable-content { /* BugHerd #174: the row's span colour was winning */
    /* an empty ::before still takes its margin → day/venue looked indented (BugHerd #13) */
  }
  .timetable .timetable-content span:nth-child(1)::before, .timetable .timetable-content span:nth-child(2)::before, .timetable .timetable-content span:nth-child(3)::before,
  .timetable .timetable-content > span:nth-child(7)::before, .timetable .timetable-content > span:nth-child(8)::before {
    display: none;
  }
}

/* venue page, mobile: filters first — the session list appears once a day/activity is chosen (BugHerd #12) */
.timetable-hint {
  display: none;
  font-family: "Youth", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: rgba(29, 30, 31, 0.7);
  margin: 8px 0 0;
  padding: 0;
  text-align: left;
}

@media (max-width: 991.98px) {
  .vn-timetable:not(.has-filter) .timetable {
    display: none;
  }
  .vn-timetable:not(.has-filter) .timetable-hint {
    display: block;
  }
}
/* ============================================================
   Timetable filter panel (BugHerd #94)
   One "Filter" button opens a panel that takes any number of days, venues and activities at
   once, with a keyword box for the long activity list. Chosen filters show as removable chips
   beside the button. Markup: Views/Partials/Shared/timetableGladstone.cshtml
   ============================================================ */
.timetable-title .action {
  align-items: center;
}

.tt-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 13px 20px;
  cursor: pointer;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0042DD;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-open svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex: none;
}
.tt-open:hover {
  border-color: #0042DD;
}
.tt-open.is-on {
  background: #0042DD;
  color: #fff;
  border-color: #0042DD;
}
.tt-open__count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0042DD;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
.tt-open.is-on .tt-open__count {
  background: #fff;
  color: #0042DD;
}

.tt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 66, 221, 0.08);
  border: 1px solid rgba(0, 66, 221, 0.2);
  border-radius: 999px;
  padding: 7px 12px 7px 14px;
  cursor: pointer;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0042DD;
}
.tt-chip svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  flex: none;
}
.tt-chip:hover {
  background: rgba(0, 66, 221, 0.16);
}
.tt-chip--clear {
  background: none;
  border-color: transparent;
  text-decoration: underline;
  padding: 7px 6px;
}

.tt-panel {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* an author display beats the browser's [hidden] rule, so the closed panel stayed on the page as
     a transparent full-screen overlay and swallowed every click underneath it */
}
.tt-panel[hidden] {
  display: none !important;
}
.tt-panel {
  padding: 24px;
  background: rgba(9, 20, 48, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tt-panel.is-open {
  opacity: 1;
}
.tt-panel__box {
  width: 100%;
  max-width: 620px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  transform: translateY(10px);
  transition: transform 0.2s ease;
}
.tt-panel.is-open .tt-panel__box {
  transform: none;
}
.tt-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tt-panel__head h3 {
  margin: 0;
  padding: 0;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #0042DD;
  text-transform: none;
}
.tt-panel__close {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  color: #1D1E1F;
  line-height: 0;
}
.tt-panel__close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}
.tt-panel__close:hover {
  color: #0042DD;
}
.tt-panel__body {
  padding: 22px 26px;
  overflow-y: auto;
}
.tt-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #F5F2F1;
}

.tt-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 22px;
}
.tt-search svg {
  width: 18px;
  height: 18px;
  stroke: rgba(29, 30, 31, 0.5);
  flex: none;
}
.tt-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 0;
  margin: 0;
  font-family: "Youth", sans-serif;
  font-size: 16px;
  color: #1D1E1F;
}
.tt-search input::placeholder {
  color: rgba(29, 30, 31, 0.45);
}
.tt-search:focus-within {
  border-color: #0042DD;
}

.tt-group {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.tt-group legend {
  padding: 0;
  margin: 0 0 10px;
  float: none;
  width: auto;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(29, 30, 31, 0.55);
}
.tt-group--scroll .tt-opts {
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}

.tt-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tt-opt {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  /* an author display beats the browser's [hidden] rule, so the keyword box could not hide these */
}
.tt-opt[hidden] {
  display: none !important;
}
.tt-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tt-opt span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1D1E1F;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-opt:hover span {
  border-color: #0042DD;
  color: #0042DD;
}
.tt-opt input:checked + span {
  background: #0042DD;
  border-color: #0042DD;
  color: #fff;
}
.tt-opt input:focus-visible + span {
  outline: 2px solid #0042DD;
  outline-offset: 2px;
}

.tt-none {
  margin: 10px 0 0;
  padding: 0;
  font-size: 14px;
  color: rgba(29, 30, 31, 0.6);
}

.tt-clear {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  text-decoration: underline;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1D1E1F;
}
.tt-clear:hover {
  color: #0042DD;
}

.tt-apply {
  background: #0042DD;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 13px 26px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.tt-apply:hover {
  background: #0033AD;
}

@media (max-width: 991.98px) {
  .timetable-title .action {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tt-open {
    justify-content: center;
    width: 100%;
  }
  .tt-panel {
    padding: 0;
    align-items: flex-end;
  }
  .tt-panel__box {
    max-width: none;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
  .tt-panel__body {
    padding: 18px 20px;
  }
  .tt-panel__head, .tt-panel__foot {
    padding: 16px 20px;
  }
}
/* ============================================================
   Memberships picker (Views/Memberships.cshtml) — Figma WLL-17-DESKTOP-MEMBERSHIPS:
   pill category tabs, borderless white pricing cards with a blue header, Monthly/Annual
   toggle, blue-tick benefit rows on off-white, blue Join button.
   ============================================================ */
.mb {
  padding: 70px 0;
  background: #F5F2F1;
}
@media (max-width: 991.98px) {
  .mb {
    padding: 40px 0;
  }
}

.mb__title {
  color: #0042DD;
  text-align: center;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.4rem + 1.8vw);
}
@media (min-width: 1200px) {
  .mb__title {
    font-size: 2.75rem;
  }
}
.mb__title {
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  padding: 0;
  margin: 0 0 32px;
}
@media (max-width: 991.98px) {
  .mb__title {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3125rem + 0.75vw);
    font-weight: 700;
    margin-bottom: 20px;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .mb__title {
    font-size: 1.875rem;
  }
}

/* ---- category pills ---- */
.mb-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.mb-tab {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  color: #1D1E1F;
  cursor: pointer;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 30px;
  padding: 12px 20px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mb-tab:hover {
  border-color: #0042DD;
  color: #0042DD;
}
.mb-tab.is-active {
  background: #0042DD;
  color: #fff;
  border-color: #0042DD;
}

/* ---- cards ---- */
.mb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 1199.98px) {
  .mb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 991.98px) {
  .mb-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.mb-card {
  display: none;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  color: #1D1E1F;
}
.mb-card.active {
  display: flex;
}

.mb-card__head {
  background: #0042DD;
  color: #fff;
  padding: 28px 26px 22px;
}
.mb-card__head h3 {
  color: #fff;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .mb-card__head h3 {
    font-size: 1.75rem;
  }
}
.mb-card__head h3 {
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  padding: 0;
  margin: 0 0 10px;
}
.mb-card__head p {
  color: #fff;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.mb-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px !important;
}
.mb-card__price .mb-amt {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
.mb-card__price small {
  font-size: 13px;
  opacity: 0.85;
  margin-right: 8px;
}

.mb-card__ages {
  font-weight: 500;
  opacity: 0.95;
}

.mb-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 30px;
  padding: 3px;
  margin: 14px 0 10px;
}
.mb-toggle .mb-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  border-radius: 30px;
  padding: 8px 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.mb-toggle .mb-toggle__btn.is-active {
  background: #fff;
  color: #0042DD;
}

.mb-card__fee {
  font-size: 13px !important;
  opacity: 0.9;
}

.mb-card__body {
  padding: 22px 26px 8px;
  flex: 1 1 auto;
}
.mb-card__body h4 {
  font: 16px "Youth", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1D1E1F;
  text-transform: none;
  padding: 0;
  margin: 14px 0 8px;
}
.mb-card__body h4:first-child {
  margin-top: 0;
}
.mb-card__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mb-card__body li {
  position: relative;
  padding: 10px 12px 10px 38px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 4px;
  background: #F5F2F1;
}
.mb-card__body li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  color: #0042DD;
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 14px;
}
.mb-card__body p {
  font-size: 14px;
  padding: 0 0 8px;
}
.mb-card__body {
  /* BugHerd #135 — a benefit/activity written as a paragraph sat high in its tile: the tile's own
     padding plus the paragraph's bottom padding left a band of space under the text */
}
.mb-card__body li p, .mb-card__body li p:last-child {
  padding: 0;
  margin: 0;
}
.mb-card__body ul:last-child li:last-child {
  margin-bottom: 0;
}

.mb-card__cta {
  margin: 14px 26px 26px;
  align-self: flex-start;
}

.mb-empty {
  text-align: center;
  color: rgba(29, 30, 31, 0.6);
  padding: 30px 0;
  font-weight: 700;
}

/* ---- offer slot (Additional Note) + T&C explainer — BugHerd #20 ---- */
.mb-card__offer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: #fff;
  color: #0042DD;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.mb-card__offer svg {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: #0042DD;
  fill: none;
}
.mb-card__offer svg circle {
  fill: #0042DD;
  stroke: none;
}
.mb-card__offer p {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.mb-card__offer strong {
  font-weight: 700;
}

.mb-card__tc {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(29, 30, 31, 0.65);
  padding: 12px 24px 20px;
}
.mb-card__tc p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ---- editor copy between the picker and the cards (page Description) — BugHerd #21 ---- */
.mb__intro {
  max-width: 70ch;
  margin: 0 auto 32px;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
}
.mb__intro p {
  font-size: inherit;
  line-height: inherit;
}
.mb__intro h3, .mb__intro h4 {
  color: #0042DD;
  text-transform: none;
}
@media (max-width: 991.98px) {
  .mb__intro {
    font-size: 16px;
    margin-bottom: 24px;
  }
}

/* ---- Figma card anatomy + square tabs that fill the row (BugHerd #67-#70) ---- */
.mb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.mb-tabs .mb-tab {
  flex: 1 1 0;
  min-width: 150px;
  border-radius: 8px;
  text-align: center;
  padding: 14px 18px;
}

.mb__finder-cta {
  margin-bottom: 20px;
}

/* BugHerd #110 — a name that wraps to two lines made its card's header taller than the ones beside
   it, so the Monthly/Annual tabs, prices and activity lists all sat at different heights across the
   row. The header reserves two lines of title, which lines the cards up whichever name is longest. */
.mb-card__head {
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* title at the top (client, 11 Sep) */
  min-height: 136px;
}
.mb-card__head h3 {
  margin: 0 0 6px;
}
.mb-card__head .mb-card__ages {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}
@media (max-width: 991.98px) {
  .mb-card__head {
    min-height: 0;
    display: block;
  }
}

.mb-card__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.mb-card__toggle .mb-toggle__btn {
  border-radius: 0;
  padding: 14px 10px;
  font-size: 14px;
  color: #0042DD;
  background: #fff;
  border-bottom: 3px solid transparent;
}
.mb-card__toggle .mb-toggle__btn.is-active {
  background: #fff;
  color: #0042DD;
  border-bottom-color: #0042DD;
}
.mb-card__toggle .mb-toggle__btn:not(.is-active) {
  color: rgba(29, 30, 31, 0.55);
}

.mb-card__price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.mb-card__price--single {
  grid-template-columns: 1fr;
}
.mb-card__price .mb-price-label {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #1D1E1F;
}
.mb-card__price .mb-price-amt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: #0042DD;
  margin: 6px 0;
}
.mb-card__price .mb-price-amt .mb-amt {
  font-size: inherit;
}
.mb-card__price .mb-price-amt .mb-per {
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  color: rgba(29, 30, 31, 0.6);
  white-space: nowrap;
}
.mb-card__price .mb-price-join {
  font-size: 12px;
  color: rgba(29, 30, 31, 0.65);
}
.mb-card__price .mb-card__offer {
  grid-column: 1/-1;
  margin: 4px 0 0;
  background: #F5F2F1;
  color: #1D1E1F;
}
.mb-card__price .mb-card__offer svg {
  stroke: #0042DD;
}
.mb-card__price .mb-card__offer svg circle {
  fill: #0042DD;
}

/* ---------- Membership options, Figma treatment (BugHerd #109) ----------
   Heading and picker sit left, and the category tabs take the Figma pill: 60px tall, 12px radius,
   off-white with a blue label, solid blue when selected. */
.mb .mb__title {
  text-align: left;
  margin-bottom: 26px;
}

.mb__picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 0 0 18px; /* BugHerd #143: was 36px, the cards sat too far below */
}
.mb__picker .mb-tabs {
  justify-content: flex-start;
  flex: 1 1 auto;
  margin: 0;
  gap: 10px;
}
.mb__picker .mb__finder-cta {
  flex: none;
  margin: 0;
}

.mb .mb-tabs .mb-tab {
  flex: 0 0 auto;
  min-width: 0;
  height: 60px;
  padding: 0 26px;
  border-radius: 12px;
  background: #F5F2F1;
  border: 1px solid transparent;
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
.mb .mb-tabs .mb-tab:hover {
  background: #EBE7E5;
}
.mb .mb-tabs .mb-tab.is-active {
  background: #0042DD;
  color: #fff;
  border-color: #0042DD;
}

@media (max-width: 991.98px) {
  .mb__picker {
    justify-content: flex-start;
    margin-bottom: 26px;
  }
  .mb .mb-tabs .mb-tab {
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }
}
/* the Figma band behind the picker is white, with the tabs as the off-white pills */
.mb.membership-options {
  background: #fff;
  padding-top: 36px;
} /* BugHerd #131 */
/* BugHerd #163/#164 — on phones "per month" / "per year" always sits on its own line under the
   amount, instead of beside one price and wrapped under the next */
@media (max-width: 991.98px) {
  .mb-price-amt {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
/* ============================================================
   Content blocks — site-wide component styling per Figma
   WLL-17-DESKTOP-CONTENT-BLOCKS (8V7zliVKiRBmMgs4VV1Kif, frame 11939:96)
   + WLL-17-MOBILE-CONTENT-BLOCKS (b2bFp7sOiZapCRPmJx6ehF, frame 21911:343).
   Reference renders: docs/figma-ref/content-blocks-desktop|mobile/.
   Imported LAST in base.scss so it wins over legacy component rules.
   GOTCHA: the project's font-size() mixin emits a `font:` shorthand — declare font-weight /
   line-height AFTER any @include font-size(...) or they reset to 400 / normal.
   Covers: buttons · Text & Image (media-text) · Accordions · Tables · Forms ·
           icon grid recolour · interior banner (mobile) · card polish.
   ============================================================ */
/* ---------- 1. Buttons (Figma: 700 uppercase, 8px radius, trailing arrow) ---------- */
.button-box .button,
.button-box .button:visited,
.form-style button,
form button,
input[type=submit],
.media-text .button,
.accordian__content .button {
  font-family: "Youth", sans-serif;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 16px 26px !important;
  border-radius: 8px;
  gap: 14px;
  min-width: 0;
}
@media (min-width: 1600px) {
  .button-box .button,
  .button-box .button:visited,
  .form-style button,
  form button,
  input[type=submit],
  .media-text .button,
  .accordian__content .button {
    font-size: 19px !important;
    padding: 18px 30px !important;
  }
}
.button-box .button i,
.button-box .button:visited i,
.form-style button i,
form button i,
input[type=submit] i,
.media-text .button i,
.accordian__content .button i {
  margin-left: 14px;
  font-size: 1em;
}

/* ---------- 2. Text & Image block (media-text) ----------
   Figma: image one side (rounded), centred column of blue heading + body + blue button. */
.media-text .media-text__image img, .media-text .media-text__image video {
  border-radius: 12px;
}
.media-text .media-text__image .embedVideo img {
  border-radius: 12px;
}
.media-text .media-text__content {
  /* Centred again (client, 11 Sep), reversing BugHerd #79. Lists stay a left-aligned block placed
     in the middle, so bullets never float away from their text (the #9/#19 problem). */
  text-align: center;
}
.media-text .media-text__content .h4 {
  text-transform: none;
  font-size: 18px;
  font-weight: 700;
  color: #0042DD;
  padding-bottom: 6px;
}
.media-text .media-text__content h2, .media-text .media-text__content .h2 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .media-text .media-text__content h2, .media-text .media-text__content .h2 {
    font-size: 2.5rem;
  }
}
.media-text .media-text__content h2, .media-text .media-text__content .h2 {
  text-transform: none;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  padding-bottom: 18px;
}
.media-text .media-text__content .user-content {
  max-width: 62ch;
  margin: 0 auto;
  /* RTE content often carries inline text-align from pasting; the Figma block is centred */
}
.media-text .media-text__content .user-content p, .media-text .media-text__content .user-content h3, .media-text .media-text__content .user-content h4, .media-text .media-text__content .user-content h5 {
  font-size: 17px;
  line-height: 1.5;
  text-align: center !important;
}
.media-text .media-text__content .user-content h3, .media-text .media-text__content .user-content h4, .media-text .media-text__content .user-content h5 {
  font-size: 20px;
}

/* BugHerd #205 — li was left out of the ramp above, so list items kept the global 18px/500
   while the paragraphs beside them are 17px/300: the list read as a different typeface.
   (.user-content ul li sets weight 500 with !important.) */
.media-text .media-text__content .user-content li,
.media-text .media-text__content .user-content li p {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 300 !important;
}
.media-text .media-text__content .user-content ul, .media-text .media-text__content .user-content ol {
  display: inline-block;
  text-align: left !important;
  margin: 0 auto 1em;
  padding-left: 24px;
}
.media-text .media-text__content .user-content {
  /* BugHerd #120 — bulleted lists in a centred block read as plain centred lines (agreed with the
     client: "let's try removing the bullets"); numbered steps keep their numbers */
}
.media-text .media-text__content .user-content ul {
  list-style: none;
  padding-left: 0;
  display: block;
  text-align: center !important;
}
.media-text .media-text__content .user-content ul li {
  text-align: center !important;
  padding: 0;
  margin: 0 0 4px;
}
.media-text .media-text__content .user-content ul li::before, .media-text .media-text__content .user-content ul li::marker {
  display: none;
  content: none;
}
.media-text .media-text__content .user-content {
  /* editors wrap list items in <p>, which the centred-paragraph rule above would pull to the middle
     (bullets/numbers hanging on the left, text floating centre — BugHerd #9/#19) */
}
.media-text .media-text__content .user-content li, .media-text .media-text__content .user-content li p {
  text-align: left !important;
}
.media-text .media-text__content .user-content li p {
  display: inline;
  margin: 0;
  padding: 0;
}
.media-text .media-text__content .user-content {
  /* on mobile the inline-block list hugged the block edge (BugHerd #40) */
}
@media (max-width: 991.98px) {
  .media-text .media-text__content .user-content ul, .media-text .media-text__content .user-content ol {
    display: inline-block;
    padding-left: 24px;
    margin: 0 auto 1em;
  }
}
.media-text .media-text__content {
  /* buttons stack, centred under the copy (client, 11 Sep) */
}
.media-text .media-text__content .button-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.media-text .media-text__content .button-box .button {
  margin: 0;
}
.media-text:not(.background-blue):not(.background-blue_dark):not(.background-blue_light) .media-text__content h2, .media-text:not(.background-blue):not(.background-blue_dark):not(.background-blue_light) .media-text__content .h2, .media-text:not(.background-blue):not(.background-blue_dark):not(.background-blue_light) .media-text__content h2.title-colour {
  color: #0042DD;
}
.media-text:not(.background-blue):not(.background-blue_dark):not(.background-blue_light) .media-text__content .user-content, .media-text:not(.background-blue):not(.background-blue_dark):not(.background-blue_light) .media-text__content .user-content p, .media-text:not(.background-blue):not(.background-blue_dark):not(.background-blue_light) .media-text__content .user-content li {
  color: #1D1E1F;
}
@media (max-width: 991.98px) {
  .media-text .media-text__image {
    order: -2 !important;
    padding: 24px 20px 0;
  }
  .media-text .media-text__image img {
    width: 100%;
  }
  .media-text { /* space above the image too (BugHerd #46) */ }
  .media-text .media-text__content {
    padding: 24px 20px 8px;
  }
  .media-text .media-text__content h2, .media-text .media-text__content .h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3125rem + 0.75vw);
    font-weight: 700;
    line-height: 1.05;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .media-text .media-text__content h2, .media-text .media-text__content .h2 {
    font-size: 1.875rem;
  }
}
@media (max-width: 991.98px) {
  .media-text .media-text__content .user-content p {
    font-size: 16px;
  }
}

/* ---------- 3. Accordions ----------
   Figma: hairline rows, near-black 16px/700 heading, electric-blue arrow (down → up when open). */
.accordian {
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0;
}
.accordian h5, .accordian h4 {
  font-family: "Youth", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #1D1E1F;
  padding: 0;
  margin: 0;
}
@media (min-width: 1600px) {
  .accordian h5, .accordian h4 {
    font-size: 18px;
  }
}
.accordian .accordian__header {
  gap: 16px;
}
.accordian .accordian__header i {
  margin: 0 4px 0 0;
  font-size: 18px;
  color: #0042DD;
  transition: transform 0.2s ease;
}
.accordian .accordian__header i::before {
  content: "\f063";
}
.accordian .accordian__header i { /* fa-arrow-down */ }
.accordian.active .accordian__header i {
  transform: rotate(180deg);
}
.accordian .accordian__content {
  border-top: 0;
  margin-top: 14px;
  padding-top: 0;
  font-size: 15px;
}
.accordian .accordian__content p {
  font-size: 15px;
}

/* on a blue band the row inverts to white */
.background-blue .accordian,
.background-blue_dark .accordian {
  border-color: rgba(255, 255, 255, 0.3);
}
.background-blue .accordian h5, .background-blue .accordian h4,
.background-blue_dark .accordian h5,
.background-blue_dark .accordian h4 {
  color: #fff;
}
.background-blue .accordian .accordian__header i,
.background-blue_dark .accordian .accordian__header i {
  color: #fff;
}

/* accordion group container: no extra top rule, Figma starts with a hairline */
.accordians {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* the bootstrap row pulls the accordions to the screen edge on mobile (BugHerd #41) */
}
@media (max-width: 991.98px) {
  .accordians .accordian__card-row {
    margin: 0;
  }
  .accordians .accordian {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.background-blue .accordians {
  border-top-color: rgba(255, 255, 255, 0.3);
}

/* ---------- 4. Tables ----------
   Figma: electric-blue header row (white 700 text), off-white zebra rows with 4px white gaps,
   no borders, no shadow. Replaces the legacy green/boxed table look site-wide. */
table {
  border-collapse: separate !important;
  border-spacing: 0 4px;
  box-shadow: none;
  margin: 20px 0;
  min-width: 0;
  font-family: "Youth", sans-serif;
  font-size: 14px;
  width: 100%;
}
table thead tr, table tr:first-child th {
  background: #0042DD;
}
table th {
  background: #0042DD;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  padding: 14px 16px;
  border: 0;
}
table th p {
  color: #fff !important;
  font-size: 14px !important;
}
table td {
  background: #F5F2F1;
  color: #1D1E1F;
  padding: 14px 16px;
  border: 0;
  font-size: 14px;
  vertical-align: top;
}
table td p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
table td ul, table td ol {
  margin: 0;
  padding-left: 18px;
}
table td li {
  font-size: 14px;
}
table tr:first-child th:first-child, table tr:first-child td:first-child {
  border-top-left-radius: 6px;
}
table tr:first-child th:last-child, table tr:first-child td:last-child {
  border-top-right-radius: 6px;
}
table tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

/* Pasted (Excel/RTE) tables have no <th>: treat the first row as the header. Legacy nth-child rules
   are beaten with !important so every cell is legible. */
table td {
  background: #F5F2F1 !important;
  color: #1D1E1F !important;
}

table tbody tr:first-child td, table tr:first-child td {
  font-weight: 700;
}

table th, table thead td {
  background: #0042DD !important;
  color: #fff !important;
}

/* on a blue band the table becomes a white element with a deep-blue header row */
.background-blue table td, .background-blue_dark table td {
  background: #fff !important;
  color: #1D1E1F !important;
}
.background-blue table td p, .background-blue table td li, .background-blue_dark table td p, .background-blue_dark table td li {
  color: #1D1E1F !important;
}
.background-blue table th, .background-blue table thead td, .background-blue table tbody tr:first-child td, .background-blue_dark table th, .background-blue_dark table thead td, .background-blue_dark table tbody tr:first-child td {
  background: #0033AD !important;
  color: #fff !important;
  font-weight: 700;
}
.background-blue table th p, .background-blue table th strong, .background-blue table th span, .background-blue table th a, .background-blue table thead td p, .background-blue table thead td strong, .background-blue table thead td span, .background-blue table thead td a, .background-blue table tbody tr:first-child td p, .background-blue table tbody tr:first-child td strong, .background-blue table tbody tr:first-child td span, .background-blue table tbody tr:first-child td a, .background-blue_dark table th p, .background-blue_dark table th strong, .background-blue_dark table th span, .background-blue_dark table th a, .background-blue_dark table thead td p, .background-blue_dark table thead td strong, .background-blue_dark table thead td span, .background-blue_dark table thead td a, .background-blue_dark table tbody tr:first-child td p, .background-blue_dark table tbody tr:first-child td strong, .background-blue_dark table tbody tr:first-child td span, .background-blue_dark table tbody tr:first-child td a {
  color: #fff !important;
}
.background-blue table, .background-blue_dark table { /* pasted tables wrap the header text in <p> — BugHerd #27 */ }

/* ---------- 5. Forms (Umbraco Forms + site forms) ----------
   Figma: each field is an off-white rounded box with the label inside (top-left, 13px/700),
   mandatory star in blue, square light checkboxes, blue submit button with arrow. */
.umbraco-forms-form .umbraco-forms-field, .umbraco-forms-form .form-group, .contact-form .umbraco-forms-field, .contact-form .form-group, .form-style .umbraco-forms-field, .form-style .form-group {
  position: relative;
  background: #F5F2F1;
  border-radius: 6px;
  padding: 12px 16px 8px;
  margin-bottom: 12px !important;
}
.umbraco-forms-form .umbraco-forms-field.checkbox, .umbraco-forms-form .umbraco-forms-field.checkboxlist, .umbraco-forms-form .umbraco-forms-field.radiobuttonlist, .umbraco-forms-form .umbraco-forms-field.recaptcha2, .umbraco-forms-form .umbraco-forms-field.recaptchav3, .umbraco-forms-form .umbraco-forms-field.titleanddescription, .umbraco-forms-form .form-group.checkbox, .umbraco-forms-form .form-group.checkboxlist, .umbraco-forms-form .form-group.radiobuttonlist, .umbraco-forms-form .form-group.recaptcha2, .umbraco-forms-form .form-group.recaptchav3, .umbraco-forms-form .form-group.titleanddescription, .contact-form .umbraco-forms-field.checkbox, .contact-form .umbraco-forms-field.checkboxlist, .contact-form .umbraco-forms-field.radiobuttonlist, .contact-form .umbraco-forms-field.recaptcha2, .contact-form .umbraco-forms-field.recaptchav3, .contact-form .umbraco-forms-field.titleanddescription, .contact-form .form-group.checkbox, .contact-form .form-group.checkboxlist, .contact-form .form-group.radiobuttonlist, .contact-form .form-group.recaptcha2, .contact-form .form-group.recaptchav3, .contact-form .form-group.titleanddescription, .form-style .umbraco-forms-field.checkbox, .form-style .umbraco-forms-field.checkboxlist, .form-style .umbraco-forms-field.radiobuttonlist, .form-style .umbraco-forms-field.recaptcha2, .form-style .umbraco-forms-field.recaptchav3, .form-style .umbraco-forms-field.titleanddescription, .form-style .form-group.checkbox, .form-style .form-group.checkboxlist, .form-style .form-group.radiobuttonlist, .form-style .form-group.recaptcha2, .form-style .form-group.recaptchav3, .form-style .form-group.titleanddescription {
  background: transparent;
  padding: 8px 0;
}
.umbraco-forms-form label, .umbraco-forms-form .umbraco-forms-label, .contact-form label, .contact-form .umbraco-forms-label, .form-style label, .form-style .umbraco-forms-label {
  display: block;
  font-family: "Youth", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1D1E1F;
  margin: 0 0 2px;
  width: auto;
}
.umbraco-forms-form .umbraco-forms-indicator, .contact-form .umbraco-forms-indicator, .form-style .umbraco-forms-indicator {
  color: #0042DD;
  font-weight: 700;
}
.umbraco-forms-form, .contact-form, .form-style {
  /* BugHerd #140 — the help text is its own line under the label (a legacy rule pulled it up over it) */
}
.umbraco-forms-form .umbraco-forms-tooltip, .umbraco-forms-form .field-description, .contact-form .umbraco-forms-tooltip, .contact-form .field-description, .form-style .umbraco-forms-tooltip, .form-style .field-description {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(29, 30, 31, 0.7);
  margin: 0 0 4px;
}
.umbraco-forms-form .umbraco-forms-field-wrapper, .contact-form .umbraco-forms-field-wrapper, .form-style .umbraco-forms-field-wrapper {
  padding: 0;
  width: 100%;
}
.umbraco-forms-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.umbraco-forms-form textarea, .umbraco-forms-form select, .contact-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.contact-form textarea, .contact-form select, .form-style input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.form-style textarea, .form-style select {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 0 4px !important;
  margin: 0;
  font-family: "Youth", sans-serif;
  font-size: 15px;
  color: #1D1E1F;
  outline: none;
}
.umbraco-forms-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
.umbraco-forms-form textarea:focus, .umbraco-forms-form select:focus, .contact-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
.contact-form textarea:focus, .contact-form select:focus, .form-style input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
.form-style textarea:focus, .form-style select:focus {
  outline: none;
}
.umbraco-forms-form textarea, .contact-form textarea, .form-style textarea {
  min-height: 120px;
  resize: vertical;
}
.umbraco-forms-form select, .contact-form select, .form-style select {
  appearance: none;
  -webkit-appearance: none;
}
.umbraco-forms-form, .contact-form, .form-style {
  /* checkbox / radio lists */
}
.umbraco-forms-form .checkboxlist, .umbraco-forms-form .radiobuttonlist, .contact-form .checkboxlist, .contact-form .radiobuttonlist, .form-style .checkboxlist, .form-style .radiobuttonlist {
  border: 0;
  padding: 0;
  margin: 0;
}
.umbraco-forms-form .checkboxlist label, .umbraco-forms-form .radiobuttonlist label, .contact-form .checkboxlist label, .contact-form .radiobuttonlist label, .form-style .checkboxlist label, .form-style .radiobuttonlist label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 12px;
  cursor: pointer;
}
.umbraco-forms-form .checkboxlist, .umbraco-forms-form .radiobuttonlist, .contact-form .checkboxlist, .contact-form .radiobuttonlist, .form-style .checkboxlist, .form-style .radiobuttonlist {
  /* BugHerd #139 — Umbraco Forms puts the box and its label side by side in a div; lay them out
     on one line (a two-column list on wider screens so a long venue list stays short) */
}
.umbraco-forms-form .checkboxlist > div, .umbraco-forms-form .radiobuttonlist > div, .contact-form .checkboxlist > div, .contact-form .radiobuttonlist > div, .form-style .checkboxlist > div, .form-style .radiobuttonlist > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.umbraco-forms-form .checkboxlist > div label, .umbraco-forms-form .radiobuttonlist > div label, .contact-form .checkboxlist > div label, .contact-form .radiobuttonlist > div label, .form-style .checkboxlist > div label, .form-style .radiobuttonlist > div label {
  margin: 0;
}
.umbraco-forms-form .checkboxlist br, .umbraco-forms-form .radiobuttonlist br, .contact-form .checkboxlist br, .contact-form .radiobuttonlist br, .form-style .checkboxlist br, .form-style .radiobuttonlist br {
  display: none;
}
.umbraco-forms-form .checkboxlist-vertical, .contact-form .checkboxlist-vertical, .form-style .checkboxlist-vertical {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 24px;
}
.umbraco-forms-form input[type=checkbox], .umbraco-forms-form input[type=radio], .contact-form input[type=checkbox], .contact-form input[type=radio], .form-style input[type=checkbox], .form-style input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  background: #F5F2F1;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.umbraco-forms-form input[type=checkbox]::before, .umbraco-forms-form input[type=radio]::before, .contact-form input[type=checkbox]::before, .contact-form input[type=radio]::before, .form-style input[type=checkbox]::before, .form-style input[type=radio]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #0042DD;
  transform: scale(0);
  transition: transform 0.12s;
}
.umbraco-forms-form input[type=checkbox]:checked::before, .umbraco-forms-form input[type=radio]:checked::before, .contact-form input[type=checkbox]:checked::before, .contact-form input[type=radio]:checked::before, .form-style input[type=checkbox]:checked::before, .form-style input[type=radio]:checked::before {
  transform: scale(1);
}
.umbraco-forms-form input[type=radio], .contact-form input[type=radio], .form-style input[type=radio] {
  border-radius: 50%;
}
.umbraco-forms-form input[type=radio]::before, .contact-form input[type=radio]::before, .form-style input[type=radio]::before {
  border-radius: 50%;
}
.umbraco-forms-form fieldset, .contact-form fieldset, .form-style fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.umbraco-forms-form legend, .contact-form legend, .form-style legend {
  font-family: "Youth", sans-serif;
  font-size: 14px !important;
  font-weight: 700;
  color: #1D1E1F;
  margin-bottom: 8px;
}
.umbraco-forms-form .umbraco-forms-navigation, .contact-form .umbraco-forms-navigation, .form-style .umbraco-forms-navigation {
  padding: 8px 0 0;
}
.umbraco-forms-form .umbraco-forms-navigation > div, .contact-form .umbraco-forms-navigation > div, .form-style .umbraco-forms-navigation > div {
  padding: 0;
}
.umbraco-forms-form input[type=submit], .umbraco-forms-form button[type=submit], .contact-form input[type=submit], .contact-form button[type=submit], .form-style input[type=submit], .form-style button[type=submit] {
  width: auto;
  display: inline-flex;
  background: #0042DD !important;
  color: #fff !important;
  font-family: "Youth", sans-serif !important;
  text-transform: uppercase;
}
.umbraco-forms-form .field-validation-error, .umbraco-forms-form .umbraco-forms-error, .umbraco-forms-form label.error, .contact-form .field-validation-error, .contact-form .umbraco-forms-error, .contact-form label.error, .form-style .field-validation-error, .form-style .umbraco-forms-error, .form-style label.error {
  color: #C8102E;
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
  display: block;
}
.umbraco-forms-form .umbraco-forms-submitmessage, .contact-form .umbraco-forms-submitmessage, .form-style .umbraco-forms-submitmessage {
  font-family: "Youth", sans-serif;
  color: #0042DD;
  font-weight: 700;
  font-size: 20px;
}

/* sections that place a form on a blue band keep white fields */
.background-blue .umbraco-forms-form .umbraco-forms-field {
  background: #fff;
}

/* ---------- 6. Icon grid ----------
   Legacy icon PNGs are cyan; paint them electric blue by using the image as a mask. */
.icon-grid__icon-container .icon-mask {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto;
  background-color: #0042DD;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}

/* an artwork with no alpha masks to a solid block, so xcite.js swaps in the image itself */
.icon-grid__icon-container img.icon-mask--flat,
.vn-features .icon-grid__icon-container img.icon-mask--flat {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  object-fit: contain;
}

.icon-grid__icon-title h4 {
  text-transform: none;
  color: #1D1E1F;
}

.icon-grid > .container > .row {
  background: #fff;
  border-radius: 12px;
}

/* ---------- 7. Interior banner: mobile layout fix + no legacy glow ---------- */
.inner-banner h1, .inner-banner h1.styled-heading {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45) !important;
}
@media (max-width: 991.98px) {
  .inner-banner {
    min-height: 240px !important;
    padding: 56px 20px 32px;
    align-items: flex-end;
  }
  .inner-banner img.desktop-image {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    z-index: 1;
  }
  .inner-banner .breadcrumbs {
    top: 10px;
    left: 0;
    padding: 0 20px;
  }
  .inner-banner .breadcrumbs ul {
    flex-wrap: wrap;
  }
  .inner-banner .container, .inner-banner .row {
    padding: 0;
    margin: 0;
  }
  .inner-banner .inner-banner__content {
    text-align: center;
  }
  .inner-banner { /* centred on mobile like desktop (BugHerd #6/#17) */ }
  .inner-banner h1 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.325rem + 0.9vw);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 auto;
    padding: 0;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .inner-banner h1 {
    font-size: 2rem;
  }
}
@media (max-width: 991.98px) {
  .inner-banner .callout-navigation {
    display: none;
  }
}

/* ---------- 8. Cards: polish to the content-blocks spec ---------- */
.card.card-small-blue-overlay a,
.card.card-news a,
.card.card-feature a {
  border-radius: 10px;
}

.card.card-news .card__content h5 {
  font-size: 12px;
  font-weight: 700;
  color: rgba(29, 30, 31, 0.6);
  text-transform: none;
  padding: 0 0 6px;
}
.card.card-news .card__content h3 {
  font: 16px "Youth", sans-serif;
  font-size: calc(1.2625rem + 0.15vw);
}
@media (min-width: 1200px) {
  .card.card-news .card__content h3 {
    font-size: 1.375rem;
  }
}
.card.card-news .card__content h3 {
  font-weight: 700;
  line-height: 1.1;
  min-height: 2.2em;
}
.card.card-news .card__content { /* two title lines: cards stay one height (BugHerd #43) */ }
.card.card-news .card__content p {
  font-size: 14px;
  line-height: 1.45;
}

/* carousel "next" control per Card Style 2: round electric-blue button with white arrow */
.card-block .splide__arrow {
  background: #0042DD;
  opacity: 1;
  width: 44px;
  height: 44px;
}
.card-block .splide__arrow svg {
  fill: #fff;
  width: 18px;
  height: 18px;
}
.card-block .splide__arrow:disabled {
  display: none;
}

/* ---------- 9. Live timetable availability pills (legacy forces white text on every cell) ---------- */
.timetable-content span.availability-badge.available {
  background: #e3f4ea;
  color: #1f8f4e !important;
}
.timetable-content span.availability-badge.low {
  background: #fdf0d3;
  color: #8a6400 !important;
}
.timetable-content span.availability-badge.full {
  background: #f0eeed;
  color: #6f6f6f !important;
}

/* ---------- 10. Content switcher (dropdown → panel) — same pattern as the venue opening-times band ---------- */
.content-switcher-container {
  margin: 0 !important;
  padding: 40px 0 0;
}
.content-switcher-container .cs-switcher {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.content-switcher-container .cs-switcher::before {
  display: none;
}
.content-switcher-container .cs-switcher .cs-switcher__title {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  .content-switcher-container .cs-switcher .cs-switcher__title {
    font-size: 1.875rem;
  }
}
.content-switcher-container .cs-switcher .cs-switcher__title {
  font-weight: 700;
  text-transform: none;
  padding: 0;
  margin: 0 0 14px;
}
.content-switcher-container .cs-switcher .cs-switcher__select {
  margin: 0;
}
.content-switcher-container .cs-switcher .vn-select {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* BugHerd #142 — the categories run down a sidebar on the left with the chosen panel on the
   right; on phones the sidebar gives way to the dropdown */
.cs-layout .cs-layout__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.cs-layout .cs-layout__side {
  position: sticky;
  top: calc(var(--wll-header-h, 106px) + 20px);
}
.cs-layout .cs-side {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-layout .cs-side__btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: #F5F2F1;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #1D1E1F;
  transition: background 0.15s, color 0.15s;
}
.cs-layout .cs-side__btn:hover {
  background: rgba(0, 66, 221, 0.08);
}
.cs-layout .cs-side__btn.is-active {
  background: #0042DD;
  color: #fff;
}
.cs-layout .cs-side__btn:focus-visible {
  outline: 2px solid #0042DD;
  outline-offset: 2px;
}
.cs-layout .cs-switcher__select {
  display: none;
}
.cs-layout .cs-layout__main .opening-times-container:not(.vn-days) {
  margin: 0 0 24px !important;
}
@media (max-width: 991.98px) {
  .cs-layout .cs-layout__grid {
    display: block;
  }
  .cs-layout .cs-layout__side {
    position: static;
    margin-bottom: 16px;
  }
  .cs-layout .cs-side {
    display: none;
  }
  .cs-layout .cs-switcher__select {
    display: block;
  }
}

/* the switcher's panels (not the venue day tiles) */
.opening-times-container:not(.vn-days) {
  background: #F5F2F1;
  border-radius: 12px;
  padding: 28px 30px !important;
  margin: 16px 0 40px !important;
  text-align: left;
  color: #1D1E1F;
}
.opening-times-container:not(.vn-days) h2, .opening-times-container:not(.vn-days) h3, .opening-times-container:not(.vn-days) h4 {
  color: #0042DD;
  text-transform: none;
}
.opening-times-container:not(.vn-days) p, .opening-times-container:not(.vn-days) li {
  color: #1D1E1F;
}
@media (max-width: 991.98px) {
  .opening-times-container:not(.vn-days) {
    padding: 20px !important;
  }
}

/* ---------- 11. Filter modals (Choose Day / Activity / Location) ---------- */
.modal-box {
  background: rgba(0, 8, 40, 0.55);
}
.modal-box .modal-content-box {
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  padding: 2.5em 2em 2em !important;
}
.modal-box .modal-header {
  background: transparent;
  color: #0042DD;
  margin: 0 0 1em;
  padding: 0;
}
.modal-box .modal-header h3, .modal-box .modal-header .h1 {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 28px;
  text-transform: none;
  line-height: 1.1;
}
.modal-box .modal-header i {
  color: #0042DD;
}
.modal-box .day-elements {
  gap: 10px;
}
.modal-box .day-element {
  width: auto;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  background: #fff;
  color: #1D1E1F;
  font: 700 15px/1 "Youth", sans-serif;
  text-transform: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal-box .day-element:hover {
  border-color: #0042DD;
  color: #0042DD;
}
.modal-box .day-element.active {
  background: #0042DD;
  color: #fff;
  border-color: #0042DD;
}
.modal-box .club-chooser {
  columns: 2;
  column-gap: 24px;
}
.modal-box .club-chooser li {
  break-inside: avoid;
}
.modal-box .club-chooser a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #1D1E1F;
  font: 700 15px/1.3 "Youth", sans-serif;
}
.modal-box .club-chooser a::before {
  content: "\f061";
  font-family: "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  color: #0042DD;
  font-size: 13px;
}
.modal-box .club-chooser a:hover {
  background: #F5F2F1;
  opacity: 1;
  color: #0042DD;
}
.modal-box h4 {
  color: #0042DD;
  text-transform: none;
  font-size: 18px;
}
.modal-box .input-container {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px;
  background: #F5F2F1;
  margin-right: 0 !important;
}
.modal-box .input-container input {
  background: transparent;
  font-family: "Youth", sans-serif;
}
@media (max-width: 991.98px) {
  .modal-box .club-chooser {
    columns: 1;
  }
  .modal-box .modal-content-box {
    border-radius: 0;
  }
}

/* ---------- 12. Gallery block: large tile + square grid (venue facilities layout) ---------- */
.gallery .title-colour {
  color: #0042DD;
  text-transform: none;
}
.gallery .col-md-12:has(a[data-fancybox]) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
  flex-wrap: initial;
}
.gallery .col-md-12:has(a[data-fancybox]) a {
  width: auto;
  display: block;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
}
.gallery .col-md-12:has(a[data-fancybox]) a:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery .col-md-12:has(a[data-fancybox]) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0;
  border-radius: 10px;
}
@media (max-width: 991.98px) {
  .gallery .col-md-12:has(a[data-fancybox]) {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 8px;
  }
  .gallery .col-md-12:has(a[data-fancybox]) a:first-child {
    grid-column: span 2;
  }
}

/* venue pages get the facilities gallery from the template; hide a duplicate gallery block */
body.template-venue .block-element.gallery {
  display: none;
}

/* ---------- 13. Venue status strap (traffic light) ---------- */
.venue-status .container {
  max-width: none;
  padding: 0;
}
.venue-status .venue-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.venue-status .venue-item.Green {
  background: #1f8f4e;
}
.venue-status .venue-item.Amber {
  background: #e0a100;
  color: #1D1E1F;
}
.venue-status .venue-item.Red {
  background: #C8102E;
}
.venue-status .venue-item {
  flex-wrap: wrap;
  text-align: center;
}
.venue-status .venue-item .status {
  flex: none;
}
.venue-status .venue-item .message {
  flex: 1 1 auto;
  white-space: normal !important;
  min-width: 0;
}
.venue-status .venue-item { /* wraps on mobile (BugHerd #16) */ }
@media (max-width: 991.98px) {
  .venue-status .venue-item {
    font-size: 13px;
    line-height: 1.35;
    padding: 8px 16px;
  }
}

/* ---------- 19. Figma buttons: explicit hover/focus so legacy a:hover rules can't wash the label out ---------- */
.fh-btn {
  color: #fff !important;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fh-btn:hover, .fh-btn:focus-visible {
  background: #0033AD;
  color: #fff !important;
  text-decoration: none;
}
.fh-btn.is-white {
  color: #0042DD !important;
}
.fh-btn.is-white:hover, .fh-btn.is-white:focus-visible {
  background: #F5F2F1;
  color: #0042DD !important;
}
.fh-btn.is-outline {
  color: #0042DD !important;
  background: transparent;
  box-shadow: inset 0 0 0 2px #0042DD;
}
.fh-btn.is-outline:hover, .fh-btn.is-outline:focus-visible {
  background: #0042DD;
  color: #fff !important;
}

/* ---------- 14. Team member profile (Views/Person.cshtml) ---------- */
.profile {
  padding: 60px 0;
  background: #F5F2F1;
}
.profile__card {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 40px;
  align-items: start;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.profile__photo {
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.profile__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.profile__name {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .profile__name {
    font-size: 2.5rem;
  }
}
.profile__name {
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  padding: 0;
  margin: 0 0 6px;
}
.profile__role {
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 18px;
}
.profile__role p {
  padding: 0;
  margin: 0;
}
.profile__bio p {
  font-size: 16px;
  line-height: 1.55;
}
.profile__back {
  margin-top: 10px;
}
@media (max-width: 991.98px) {
  .profile {
    padding: 32px 0;
  }
  .profile__card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
}

/* ---------- 15. Search results (Views/SearchResults.cshtml) ---------- */
.search-page {
  padding: 50px 0 80px;
  background: #F5F2F1;
}
.search-page__form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 18px;
}
.search-page__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 0 18px;
}
.search-page__field svg {
  width: 22px;
  height: 22px;
  stroke: #0042DD;
  fill: none;
  flex: 0 0 auto;
}
.search-page__field input {
  flex: 1 1 auto;
  border: 0 !important;
  background: transparent !important;
  padding: 16px 0 !important;
  margin: 0;
  font-family: "Youth", sans-serif;
  font-size: 16px;
  color: #1D1E1F;
  outline: none;
  box-shadow: none;
  width: 100%;
  max-width: none !important;
}
.search-page__count {
  color: rgba(29, 30, 31, 0.65);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 24px;
}
.search-page__empty {
  font-size: 17px;
  color: #1D1E1F;
}
.search-page__empty a {
  color: #0042DD;
}
@media (max-width: 991.98px) {
  .search-page {
    padding: 28px 0 48px;
  }
  .search-page__form {
    flex-direction: column;
  }
}

/* ---------- 16. Event cards (Views/Events.cshtml) ---------- */
.vn-card--event .vn-card__text {
  padding: 22px 24px 0;
}
.vn-card--event .vn-card__text h3 {
  font-family: "Youth", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1D1E1F;
  text-transform: none;
  padding: 0;
  margin: 0 0 8px;
}
.vn-card--event .vn-card__text p {
  font-size: 14px;
  line-height: 1.45;
  padding: 0;
  margin: 0 0 8px;
}
.vn-card--event .vn-card__meta {
  color: #0042DD !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.vn-card--event .vn-card__body {
  padding-top: 8px;
  justify-content: flex-end;
}

/* ---------- 17. Membership detail (Views/Membership.cshtml) ---------- */
.mb--single .mb-grid--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.mb-card__title {
  color: #fff;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3375rem + 1.05vw);
}
@media (min-width: 1200px) {
  .mb-card__title {
    font-size: 2.125rem;
  }
}
.mb-card__title {
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  padding: 0;
  margin: 0 0 12px;
}

.mb-card__price--annual .mb-amt {
  font-size: 22px;
}

.mb-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 26px 26px;
}

.mb-card__note {
  font-size: 13px !important;
  color: rgba(29, 30, 31, 0.7);
}

/* ---------- 18. Card carousels: keep the reveal but make it quick (legacy stagger took ~2s) ---------- */
.card-block.animated-element .row__header {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card-block.animated-element .splide__slide {
  transition: opacity 0.3s ease !important;
}
.card-block.animated-element.animate-me .splide__slide:nth-child(1) {
  transition-delay: 0.05s !important;
}
.card-block.animated-element.animate-me .splide__slide:nth-child(2) {
  transition-delay: 0.12s !important;
}
.card-block.animated-element.animate-me .splide__slide:nth-child(3) {
  transition-delay: 0.19s !important;
}
.card-block.animated-element.animate-me .splide__slide:nth-child(n+4) {
  transition-delay: 0.25s !important;
}

/* ---------- 20. Text panel: white by default (no colour picked) — BugHerd #23 ---------- */
.block-element.text-panel--plain {
  background: #fff;
}

.block-element.text-panel--plain > .media-text {
  background: #fff;
}

.text-panel .media-text h2 {
  text-transform: none;
  margin: 0 0 18px;
  padding: 6px 0 0;
}

@media (max-width: 991.98px) {
  .text-panel .media-text {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* BugHerd #29 */
/* ---------- 22. Page ground is white; off-white only where a block asks for it (BugHerd #30) ---------- */
body, .content-block.background- {
  background: #fff;
}

/* ---------- 21. Search page: result kind, blurb, pager ---------- */
.search-page__kind {
  display: inline-block;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0042DD;
  margin-bottom: 6px;
}
.search-page__blurb {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(29, 30, 31, 0.7);
  margin: 6px 0 0;
  padding: 0;
}
.search-page__note {
  font-weight: 500;
  color: rgba(29, 30, 31, 0.6);
}
.search-page__results .vn-card__body {
  align-items: flex-start;
}
.search-page__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
}

/* ---------- 23. Inner banner "Find out more" callout retired at every size (BugHerd #49) ---------- */
.inner-banner .callout-navigation {
  display: none !important;
}

.inner-banner .row.justify-content-start {
  justify-content: center !important;
}

/* ---------- 24. Standalone timetables page: space under the banner, no duplicate heading (BugHerd #52/#53) ---------- */
body.template-timetables #timetables {
  padding-top: 44px;
}
body.template-timetables .timetable-title h2 {
  display: none;
}
body.template-timetables .timetable-title .action {
  margin-left: auto;
}
@media (max-width: 991.98px) {
  body.template-timetables #timetables {
    padding-top: 24px;
  }
}

/* ---------- 25. Homepage polish per Figma (BugHerd #58 #59 #61 #62 #63 #64) ---------- */
/* carousel dots sit under the cards, not over them */
.card-block .splide__pagination {
  position: static !important;
  transform: none !important;
  margin: 28px 0 0 !important;
  padding: 0;
}

/* row header link ("View All") without underline, and the arrow on header buttons */
.row__header h2 > a, .row__header a {
  text-decoration: none !important;
}

.row__header .button svg {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  vertical-align: -3px;
}
.row__header .button svg path {
  stroke: currentColor;
}

/* the deep-blue app band carries the burst pattern from the Figma */
.media-text.background-blue.dark {
  position: relative;
}
.media-text.background-blue.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/x-burst.png") center/cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  pointer-events: none;
}
.media-text.background-blue.dark > .container, .media-text.background-blue.dark > .row {
  position: relative;
}

/* news tiles: same height whatever the title length */
.card.card-news {
  height: auto;
}
.card.card-news a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card.card-news .card__content {
  flex: 1 1 auto;
}

/* ---------- 26. Client feedback #71 #72 #76 #77 #78 #80 #81 ---------- */
/* #72 — Text & Image blocks breathe more top and bottom */
.block-element.media-text-container > .media-text {
  padding-top: 104px;
  padding-bottom: 104px;
}
@media (max-width: 991.98px) {
  .block-element.media-text-container > .media-text {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* #71 — text panels: blue heading and matching vertical space */
.block-element.text-panel > .media-text {
  padding-top: 72px;
  padding-bottom: 72px;
}
@media (max-width: 991.98px) {
  .block-element.text-panel > .media-text {
    padding-top: 44px;
    padding-bottom: 44px;
  }
}

.block-element.text-panel .media-text h2,
.block-element.text-panel .media-text .h2 {
  color: #0042DD !important;
}

/* #80 — a white text panel is a full-width white band, not a floating white box */
.block-element.text-panel:has(> .background-white),
.block-element.text-panel--plain {
  background: #fff;
}

.block-element.text-panel > .media-text.background-white {
  background: transparent !important;
}

/* #77 — no stray gap between the page banner and the first block under it */
.inner-banner + .block-element > *:first-child,
.inner-banner + .content-block > *:first-child {
  margin-top: 0 !important;
}

/* #78 — accordion headings in brand blue */
.accordian .accordian__header h5,
.accordian .accordian__header h4 {
  color: #0042DD;
}

.background-blue .accordian .accordian__header h5,
.background-blue_dark .accordian .accordian__header h5 {
  color: #fff;
}

/* #76 — editorial copy is never shouted in caps */
.user-content h1, .user-content h2, .user-content h3, .user-content h4, .user-content h5, .user-content h6,
.media-text h2, .media-text .h2, .accordian__header h5, .accordian__header h4,
.opening-times-container h3, .row__header h2 {
  text-transform: none !important;
}

/* #81 — the notification strap stays on one line */
.header .notification-bar .splide__slide, .header .notification-bar p, .header .notification-bar li, .site-strap .splide__slide, .site-strap p, .site-strap li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 991.98px) {
  .header .notification-bar, .site-strap {
    font-size: 11px;
  }
}

/* ---------- 27. Client feedback #88 #89 #90 ---------- */
/* #88 — news card images fill the card */
.card.card-news .card__image {
  width: 100%;
  overflow: hidden;
}

.card.card-news .card__image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* #89 — the hover lift belongs to the whole card, not the anchor inside it */
.card {
  transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card a:hover {
  transform: none !important;
}

/* #90 — left-aligned copy starts where the heading starts (the 62ch column was centred) */
.media-text .media-text__content .user-content {
  max-width: 68ch;
  margin: 0 auto;
}

/* ---------- 28. Careers listing — client feedback #91 #92 #93 ---------- */
/* #91 — "Search Jobs" was brand blue printed on the brand blue sidebar */
.career-sidebar.background-blue h4 {
  color: #fff !important;
  text-transform: none;
}
.career-sidebar.background-blue label {
  color: #fff;
}
.career-sidebar.background-blue .button-box .button {
  background: #fff !important;
  color: #0042DD !important;
  border-color: #fff !important;
}
.career-sidebar.background-blue .button-box .button:hover {
  background: #1D1E1F !important;
  color: #fff !important;
  border-color: #1D1E1F !important;
}

/* #92 — vacancy cards read in sentence case, not shouted */
.card.card-health h4, .card.card-health h5, .card.card-health strong, .card.card-health p, .card.card-health .button {
  text-transform: none !important;
}
.card.card-health h5 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.card.card-health h5 strong {
  font-weight: 700;
}

/* #93 — the vacancy button carries the brand arrow like every other button */
.card.card-health .button-box .button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.card.card-health .button-box .button .vn-arrow {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex: none;
}

/* ---------- 29. Download Our App buttons (BugHerd #105) ----------
   The Figma stacks the two store buttons and gives each a long arrow at its right edge. Matched by
   the store links themselves rather than a page or block class, so the treatment follows the block
   wherever an editor puts it. The arrow is a mask filled with currentColor, so it takes the
   button's own text colour instead of forcing brand blue. */
.button-box:has(a[href*="play.google.com"]),
.button-box:has(a[href*="apps.apple.com"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.button-box:has(a[href*="play.google.com"]) .button,
.button-box:has(a[href*="apps.apple.com"]) .button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 332px;
  max-width: 100%;
  margin: 0 !important;
  padding: 20px 28px;
  border-radius: 999px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.button-box:has(a[href*="play.google.com"]) .button::after,
.button-box:has(a[href*="apps.apple.com"]) .button::after {
  content: "";
  flex: none;
  width: 34px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10h30M24 3l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10h30M24 3l7 7-7 7'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.18s ease;
}
.button-box:has(a[href*="play.google.com"]) .button:hover::after,
.button-box:has(a[href*="apps.apple.com"]) .button:hover::after {
  transform: translateX(4px);
}
@media (max-width: 991.98px) {
  .button-box:has(a[href*="play.google.com"]) .button,
  .button-box:has(a[href*="apps.apple.com"]) .button {
    min-width: 0;
    width: 100%;
    padding: 16px 22px;
    gap: 16px;
  }
}

/* BugHerd #126 — only the blue band inverts them to white pills. Forcing white everywhere turned
   the Refer a Friend buttons on the white memberships page into white-on-white. */
.background-blue .button-box:has(a[href*="play.google.com"]) .button,
.background-blue .button-box:has(a[href*="apps.apple.com"]) .button, .background-blue_dark .button-box:has(a[href*="play.google.com"]) .button,
.background-blue_dark .button-box:has(a[href*="apps.apple.com"]) .button, .banner--video .button-box:has(a[href*="play.google.com"]) .button,
.banner--video .button-box:has(a[href*="apps.apple.com"]) .button {
  background: #fff !important;
  color: #0042DD !important;
  border-color: #fff !important;
}
.background-blue .button-box:has(a[href*="play.google.com"]) .button:hover,
.background-blue .button-box:has(a[href*="apps.apple.com"]) .button:hover, .background-blue_dark .button-box:has(a[href*="play.google.com"]) .button:hover,
.background-blue_dark .button-box:has(a[href*="apps.apple.com"]) .button:hover, .banner--video .button-box:has(a[href*="play.google.com"]) .button:hover,
.banner--video .button-box:has(a[href*="apps.apple.com"]) .button:hover {
  background: #fff !important;
  color: #0042DD !important;
}

/* ---------- 30. Media & text headings run full width (client, 11 Sep) ----------
   The two-line cap that stacked "Download / Our App" for BugHerd #106 narrowed the heading and read
   as squashed, so it is gone: headings take the full width of the content column. If the two-line
   break is still wanted, a line break in the block's title in the CMS gives it without the squeeze. */
.media-text .media-text__content h2,
.media-text .media-text__content .h2 {
  width: 100%;
  max-width: none;
}

/* BugHerd #132 — a media & text image fills its column rather than sitting squashed inside it */
.media-text .media-text__image img {
  width: 100%;
  height: auto;
}

/* ---------- 31. Page hero, Figma treatment (BugHerd #108, #122) ----------
   The Figma heroes are a full-bleed photograph with the page name centred over it in white, large:
   160px at a 1920 frame, which is 8.33vw. No dark scrim over the picture. */
.inner-banner {
  min-height: 56vh;
  justify-content: center !important;
  text-align: center;
  /* the dark overlay png and the colour wash both go: the photography carries the band */
}
.inner-banner.overlay::after {
  display: none !important;
}
.inner-banner > .overlay {
  display: none !important;
}
.inner-banner .row {
  justify-content: center !important;
}
.inner-banner .inner-banner__content {
  text-align: center;
}
.inner-banner .main-content {
  text-align: center;
  margin: 0 auto;
}
.inner-banner h1 {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 104px); /* was 8.33vw / 160px: too big on screen (client, 11 Sep) */
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  margin: 0;
  padding: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}
.inner-banner p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 991.98px) {
  .inner-banner {
    min-height: 38vh;
  }
  .inner-banner h1 {
    font-size: clamp(28px, 9vw, 48px);
  }
}
.inner-banner {
  /* the breadcrumb is the band's first child; taken out of flow so the heading centres vertically
     on the photograph rather than being pushed down by it */
}
.inner-banner > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

/* ---------- 32. Text panels centred (BugHerd #133) ----------
   The text panel (Terms & conditions on memberships, and its siblings) sat left-aligned while the
   media & text blocks around it now centre. Heading, copy and buttons centre on a measured column;
   lists stay a left-aligned block placed in the middle so bullets keep their text. */
.block-element.text-panel .media-text .user-content {
  text-align: center;
}
.block-element.text-panel .media-text .user-content > .col-lg-12 {
  max-width: 68ch;
  margin: 0 auto;
}
.block-element.text-panel .media-text .user-content h2, .block-element.text-panel .media-text .user-content .h2, .block-element.text-panel .media-text .user-content h3, .block-element.text-panel .media-text .user-content h4, .block-element.text-panel .media-text .user-content p {
  text-align: center !important;
}
.block-element.text-panel .media-text .user-content ul, .block-element.text-panel .media-text .user-content ol {
  display: inline-block;
  text-align: left !important;
  margin: 0 auto 1em;
  padding-left: 24px;
}
.block-element.text-panel .media-text .user-content li, .block-element.text-panel .media-text .user-content li p {
  text-align: left !important;
}
.block-element.text-panel .media-text .user-content .button-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ---------- 33. Memberships: the "Refer a friend" band is off-white in the Figma (BugHerd #111) ----------
   The first Text & Image block on the page, whatever colour the editor left it on. */
.route-xcite-memberships .media-text-container:not(.media-text-container ~ .media-text-container) .media-text.background- {
  background: #F5F2F1;
}
.route-xcite-memberships .media-text-container:not(.media-text-container ~ .media-text-container) .media-text.background- .media-text__content h2, .route-xcite-memberships .media-text-container:not(.media-text-container ~ .media-text-container) .media-text.background- .media-text__content .h2 {
  color: #0042DD;
}

/* ---------- 34. Homepage: the What's On band keeps its faint grey ground (BugHerd #125) ---------- */
.template-home .content-block.background-:has(> .card-block) {
  background: #F5F2F1;
}

/* ---------- 35. BugHerd #143-#188 round ---------- */
/* #144 — a plain text panel (T&Cs, school hire copy) can run wider than a Text & Image column */
.block-element.text-panel .media-text > .row.user-content {
  max-width: 96ch;
  margin-left: auto;
  margin-right: auto;
}

/* #146 — solid buttons keep white text once the link has been visited (a:visited inherits otherwise) */
.fh-btn:not(.is-outline):not(.is-white):visited, .btn-book:visited, .mb-card__cta:visited {
  color: #fff;
}

/* #151 — people photos are framed on the face, not the centre of the frame */
.card.card--person .card__image img {
  object-position: center 18%;
}

/* #152 — on a trainer page the "Contact …" heading panel sits directly on the form */
.template-person .block-element.text-panel > .media-text {
  padding-bottom: 8px !important;
}

.template-person .block-element.text-panel + .block-element.form-block > .block-padding-medium {
  padding-top: 0 !important;
}

/* #166 — pasted copy wraps list items in paragraphs; they take no extra space */
.user-content li > p {
  margin: 0;
  padding: 0;
}

.user-content li > p + p {
  margin-top: 4px;
}

/* #167 — a text panel followed by a card block: one gap, not both blocks' padding stacked */
.block-element.text-panel + .content-block > .card-block.block-padding-medium {
  padding-top: 12px !important;
}

/* #168 — cards in a row share a height */
.card-block ul.row.columns-2 > li.card, .card-block ul.row.columns-3 > li.card, .card-block ul.row.columns-4 > li.card {
  display: flex;
}
.card-block ul.row.columns-2 > li.card > a, .card-block ul.row.columns-3 > li.card > a, .card-block ul.row.columns-4 > li.card > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.card-block ul.row.columns-2 > li.card .card__content, .card-block ul.row.columns-3 > li.card .card__content, .card-block ul.row.columns-4 > li.card .card__content {
  flex: 1 1 auto;
}

/* #181/#184 — a Text & Image block with nothing in its image column: the column goes and the copy
   takes the row (an empty column was leaving a blank half / a blank band on phones) */
.media-text .row > .media-text__image:not(:has(*)) {
  display: none !important;
}

.media-text .row:has(> .media-text__image:not(:has(*))) > .media-text__content {
  flex: 0 0 100%;
  max-width: 100%;
}

/* #183 — vacancy "Find out more" buttons are the same width on every card */
.card.card-health .button-box {
  display: block;
}

.card.card-health .button-box .button {
  display: inline-flex !important;
  width: auto !important;
}

/* #185 — the "click here to apply" link in a job description is a proper blue button */
.job-description .user-content h4 > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0042DD;
  color: #fff !important;
  text-decoration: none !important;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: 8px;
  transition: background 0.15s;
}
.job-description .user-content h4 > a:only-child:hover {
  background: #0033AD;
  color: #fff !important;
}
.job-description .user-content h4 > a:only-child::after {
  content: "";
  width: 18px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
}

/* #186/#188 — job details: one text size throughout; label and value sit on one line when the
   value is short (job reference, salary) and the value drops below only when it is long */
.job-details .job-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 14px;
}
.job-details .job-detail > p {
  flex: 0 0 auto;
  min-width: 150px;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.job-details .job-detail > div {
  flex: 1 1 260px;
}
.job-details .job-detail .content, .job-details .job-detail .content p, .job-details .job-detail .content li, .job-details .job-detail .content span, .job-details .job-detail .content div {
  font-size: 16px !important;
  line-height: 1.5;
}
.job-details .job-detail .content strong {
  font-weight: 700;
}
.job-details .job-detail .content ul, .job-details .job-detail .content ol {
  margin: 4px 0 0;
}
@media (max-width: 991.98px) {
  .job-details .job-detail > p {
    min-width: 0;
  }
}

/* #187 — tables in editor copy follow the Figma "Tables" style: electric-blue header row, white
   text, off-white body rows on hairlines, no outer border. Inline widths from Word are ignored. */
.user-content table, .job-detail .content table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}
.user-content table th, .user-content table td, .job-detail .content table th, .job-detail .content table td {
  border: 0;
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 15px !important;
  line-height: 1.4;
}
.user-content table th, .user-content table tr:first-child:not(:has(th)) td, .job-detail .content table th, .job-detail .content table tr:first-child:not(:has(th)) td {
  background: #0042DD;
  color: #fff !important;
  font-family: "Youth", sans-serif;
  font-weight: 500;
  font-size: 15px !important;
  text-transform: none;
}
.user-content table th strong, .user-content table th p, .user-content table tr:first-child:not(:has(th)) td strong, .user-content table tr:first-child:not(:has(th)) td p, .job-detail .content table th strong, .job-detail .content table th p, .job-detail .content table tr:first-child:not(:has(th)) td strong, .job-detail .content table tr:first-child:not(:has(th)) td p {
  color: #fff !important;
  font-weight: 500;
}
.user-content table tbody tr:not(:first-child) td, .user-content table tbody tr:first-child:has(th) ~ tr td, .job-detail .content table tbody tr:not(:first-child) td, .job-detail .content table tbody tr:first-child:has(th) ~ tr td {
  background: #F5F2F1;
  border-bottom: 1px solid #fff;
}
.user-content table tbody tr:not(:first-child) td, .job-detail .content table tbody tr:not(:first-child) td {
  background: #F5F2F1;
  border-bottom: 1px solid #fff;
}
.user-content table thead + tbody tr:first-child td, .job-detail .content table thead + tbody tr:first-child td {
  background: #F5F2F1;
  border-bottom: 1px solid #fff;
}
.user-content table td p, .user-content table th p, .job-detail .content table td p, .job-detail .content table th p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.user-content table td strong, .job-detail .content table td strong {
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .user-content table, .job-detail .content table {
    display: block;
    overflow-x: auto;
  }
  .user-content table th, .user-content table td, .job-detail .content table th, .job-detail .content table td {
    padding: 10px 12px;
    font-size: 14px !important;
    white-space: nowrap;
  }
}

/* ============================================================
   Site motion: brand loader, scroll reveals, micro-interactions,
   page transition. Everything collapses under prefers-reduced-motion.
   JS: wwwroot/assets/js/xcite.js (reveal observer, loader, transitions)
   ============================================================ */
/* ---------- brand loader (first page of a session only) ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  background: #0042DD;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.page-loader svg {
  width: 72px;
  height: 72px;
  fill: #fff;
  animation: mo-mark 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) infinite;
  transform-origin: 50% 50%;
}
html.no-loader .page-loader {
  display: none;
}
html.is-loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes mo-mark {
  0% {
    transform: rotate(0deg) scale(0.9);
    opacity: 0.85;
  }
  50% {
    transform: rotate(90deg) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: rotate(180deg) scale(0.9);
    opacity: 0.85;
  }
}
/* ---------- page transition: fade the page in, fade out on internal navigation ---------- */
html.is-leaving body {
  opacity: 0;
  transition: opacity 0.18s ease;
}

html.is-entering body {
  animation: mo-page-in 0.45s ease both;
}

@keyframes mo-page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ---------- scroll reveal for content blocks ----------
   xcite.js adds .animate-me when a block enters the viewport. Blocks with their own choreography
   (media-text, card carousels) keep it; everything else fades up gently. */
.block-element.animated-element:not(.media-text):not(.card-block):not(.our-venues):not(.banner-block) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.block-element.animated-element:not(.media-text):not(.card-block):not(.our-venues):not(.banner-block).animate-me {
  opacity: 1;
  transform: none;
}

/* stagger children of grids that reveal as a group */
.animate-me .vn-cards > *, .animate-me .mb-card, .animate-me .card-people .card, .animate-me .vn-fac > * {
  animation: mo-rise 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.animate-me .vn-cards > *:nth-child(1), .animate-me .mb-card:nth-child(1), .animate-me .card-people .card:nth-child(1), .animate-me .vn-fac > *:nth-child(1) {
  animation-delay: 0.06s;
}
.animate-me .vn-cards > *:nth-child(2), .animate-me .mb-card:nth-child(2), .animate-me .card-people .card:nth-child(2), .animate-me .vn-fac > *:nth-child(2) {
  animation-delay: 0.12s;
}
.animate-me .vn-cards > *:nth-child(3), .animate-me .mb-card:nth-child(3), .animate-me .card-people .card:nth-child(3), .animate-me .vn-fac > *:nth-child(3) {
  animation-delay: 0.18s;
}
.animate-me .vn-cards > *:nth-child(4), .animate-me .mb-card:nth-child(4), .animate-me .card-people .card:nth-child(4), .animate-me .vn-fac > *:nth-child(4) {
  animation-delay: 0.24s;
}
.animate-me .vn-cards > *:nth-child(5), .animate-me .mb-card:nth-child(5), .animate-me .card-people .card:nth-child(5), .animate-me .vn-fac > *:nth-child(5) {
  animation-delay: 0.3s;
}
.animate-me .vn-cards > *:nth-child(6), .animate-me .mb-card:nth-child(6), .animate-me .card-people .card:nth-child(6), .animate-me .vn-fac > *:nth-child(6) {
  animation-delay: 0.36s;
}
.animate-me .vn-cards > *:nth-child(7), .animate-me .mb-card:nth-child(7), .animate-me .card-people .card:nth-child(7), .animate-me .vn-fac > *:nth-child(7) {
  animation-delay: 0.42s;
}
.animate-me .vn-cards > *:nth-child(8), .animate-me .mb-card:nth-child(8), .animate-me .card-people .card:nth-child(8), .animate-me .vn-fac > *:nth-child(8) {
  animation-delay: 0.48s;
}

@keyframes mo-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* hero copy settles in after the video/image */
.banner__intro {
  animation: mo-rise 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.15s both;
}

/* ---------- micro-interactions ---------- */
.fh-btn, .button, .btn-book {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.18s ease;
}
.fh-btn svg, .fh-btn .fa, .button svg, .button .fa, .btn-book svg, .btn-book .fa {
  transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.fh-btn:hover, .button:hover, .btn-book:hover {
  transform: translateY(-1px);
}
.fh-btn:hover svg, .fh-btn:hover .fa, .button:hover svg, .button:hover .fa, .btn-book:hover svg, .btn-book:hover .fa {
  transform: translateX(4px);
}
.fh-btn:active, .button:active, .btn-book:active {
  transform: translateY(0) scale(0.98);
}

.vn-card, .mb-card, .card {
  transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.25s ease;
}

.vn-card:hover, .card:hover {
  transform: translateY(-4px);
} /* BugHerd #89 — never the inner anchor */
.site-footer__links a, .fh-menu a {
  position: relative;
}

.site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transition: right 0.25s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.site-footer__links a:hover::after {
  right: 0;
}

.site-social a svg {
  transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.site-social a:hover svg {
  transform: scale(1.18);
}

.accordian__header {
  transition: color 0.18s ease;
}

/* ---------- reduced motion: no loader wait, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-loader {
    display: none !important;
  }
  html.is-leaving body, html.is-entering body {
    animation: none;
    opacity: 1;
    transition: none;
  }
  .block-element.animated-element:not(.media-text):not(.card-block):not(.our-venues):not(.banner-block) {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-me .vn-cards > *, .animate-me .mb-card, .animate-me .card-people .card, .animate-me .vn-fac > *, .banner__intro {
    animation: none;
  }
  .fh-btn, .button, .btn-book, .vn-card, .mb-card, .card a {
    transition: none;
  }
  .fh-btn:hover, .button:hover, .btn-book:hover, .vn-card:hover, .mb-card:hover, .card a:hover {
    transform: none;
  }
}
/* ============================================================
   CONCEPT — Find your membership (/membership-finder/)
   Views/MembershipFinder.cshtml · reuses .mb-card from _memberships.scss
   ============================================================ */
.mf {
  background: #F5F2F1;
  padding: 56px 0 90px;
}
@media (max-width: 991.98px) {
  .mf {
    padding: 32px 0 60px;
  }
}
.mf__head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 32px;
}
.mf__head h1 {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.425rem + 2.1vw);
}
@media (min-width: 1200px) {
  .mf__head h1 {
    font-size: 3rem;
  }
}
.mf__head h1 {
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 12px;
  padding: 0;
  text-transform: none;
}
.mf__head p {
  font-size: 17px;
  line-height: 1.5;
  color: #1D1E1F;
  margin: 0;
}
.mf__head p a {
  color: #0042DD;
  font-weight: 700;
}
@media (max-width: 991.98px) {
  .mf__head h1 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3375rem + 1.05vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .mf__head h1 {
    font-size: 2.125rem;
  }
}
@media (max-width: 991.98px) {
  .mf__head p {
    font-size: 16px;
  }
}
.mf__kicker {
  display: inline-block;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0042DD;
  background: rgba(0, 66, 221, 0.1);
  border-radius: 30px;
  padding: 6px 12px;
  margin-bottom: 14px;
}
.mf__progress {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 36px;
  padding: 0;
  flex-wrap: wrap;
}
.mf__progress li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(29, 30, 31, 0.5);
  padding: 8px 14px 8px 8px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(29, 30, 31, 0.12);
  transition: all 0.2s ease;
}
.mf__progress li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F5F2F1;
  color: inherit;
  font-size: 12px;
}
.mf__progress li.is-current {
  color: #fff;
  background: #0042DD;
  border-color: #0042DD;
}
.mf__progress li.is-current span {
  background: #fff;
  color: #0042DD;
}
.mf__progress li.is-done {
  color: #0042DD;
  border-color: #0042DD;
}
.mf__progress li.is-done span {
  background: #0042DD;
  color: #fff;
}
.mf__steps {
  position: relative;
}
.mf__step {
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.mf__step.is-active {
  display: block;
  animation: mf-in 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.mf__step legend {
  display: block;
  width: 100%;
  text-align: center;
  color: #1D1E1F;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  .mf__step legend {
    font-size: 1.75rem;
  }
}
.mf__step legend {
  font-weight: 700;
  margin: 0 0 24px;
  padding: 0;
  float: none;
}
@media (max-width: 991.98px) {
  .mf__step legend {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.2625rem + 0.15vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .mf__step legend {
    font-size: 1.375rem;
  }
}
@keyframes mf-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mf__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}
.mf__opt {
  text-align: left;
  background: #fff;
  border: 2px solid rgba(29, 30, 31, 0.12);
  border-radius: 12px;
  padding: 20px 22px;
  cursor: pointer;
  color: #1D1E1F;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease, transform 0.2s cubic-bezier(0.22, 0.8, 0.3, 1), box-shadow 0.2s ease;
}
.mf__opt strong {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
}
.mf__opt span {
  font-size: 14px;
  color: rgba(29, 30, 31, 0.65);
  line-height: 1.4;
}
.mf__opt:hover {
  border-color: #0042DD;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.mf__opt:focus-visible {
  outline: 3px solid rgba(0, 66, 221, 0.35);
  outline-offset: 2px;
}
.mf__opt.is-selected {
  border-color: #0042DD;
  background: #0042DD;
  color: #fff;
}
.mf__opt.is-selected span {
  color: rgba(255, 255, 255, 0.8);
}
.mf__back[hidden] {
  display: none;
}
.mf__back {
  display: inline-flex;
  margin: 26px auto 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.mf__back:hover {
  text-decoration: underline;
}
.mf__summary {
  text-align: center;
  font-size: 17px;
  margin: 0 0 22px;
}
.mf__summary p {
  margin: 0;
  padding: 0;
  color: #1D1E1F;
}
.mf__summary strong {
  color: #0042DD;
}
.mf__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 991.98px) {
  .mf__results {
    grid-template-columns: 1fr;
  }
}
.mf {
  /* cards may overflow so the "Best match" badge can sit across the top edge; the blue head keeps its own radius */
}
.mf .mb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  animation: mf-in 0.45s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
.mf .mb-card .mb-card__head {
  border-radius: 12px 12px 0 0;
}
.mf .mb-card:nth-child(1) {
  animation-delay: 0.08s;
}
.mf .mb-card:nth-child(2) {
  animation-delay: 0.16s;
}
.mf .mb-card:nth-child(3) {
  animation-delay: 0.24s;
}
.mf .mb-card:nth-child(4) {
  animation-delay: 0.32s;
}
.mf__best {
  box-shadow: 0 0 0 3px #1f8f4e, 0 18px 40px rgba(0, 66, 221, 0.18);
}
.mf__badge {
  position: absolute;
  top: -13px;
  right: 18px;
  z-index: 2;
  background: #1f8f4e;
  color: #fff;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}
.mf__card-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 26px 26px;
  flex-wrap: wrap;
}
.mf__card-actions .mb-card__cta {
  margin: 0;
}
.mf__join-link {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0042DD;
  text-decoration: underline;
}
.mf {
  /* ---- step 5: data capture ---- */
}
.mf__capture {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}
@media (max-width: 991.98px) {
  .mf__capture {
    padding: 24px 20px;
  }
}
.mf__capture-intro {
  margin-bottom: 22px;
}
.mf__capture-intro h2 {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  .mf__capture-intro h2 {
    font-size: 1.875rem;
  }
}
.mf__capture-intro h2 {
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0;
  text-transform: none;
}
.mf__capture-intro p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #1D1E1F;
}
.mf__capture-intro p strong {
  color: #0042DD;
}
.mf__capture-intro p a {
  color: #0042DD;
  font-weight: 700;
}
.mf__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 991.98px) {
  .mf__row {
    grid-template-columns: 1fr;
  }
}
.mf__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.mf__field > span {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1D1E1F;
}
.mf__field > span small {
  font-weight: 500;
  color: rgba(29, 30, 31, 0.55);
}
.mf__field input, .mf__field select, .mf__field textarea {
  width: 100%;
  border: 2px solid rgba(29, 30, 31, 0.12);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 16px;
  font-family: inherit;
  color: #1D1E1F;
  background: #fff;
}
.mf__field input:focus, .mf__field select:focus, .mf__field textarea:focus {
  outline: 0;
  border-color: #0042DD;
  box-shadow: 0 0 0 4px rgba(0, 66, 221, 0.12);
}
.mf__field textarea {
  resize: vertical;
  min-height: 84px;
}
.mf__field em {
  display: none;
  font-style: normal;
  font-size: 13px;
  color: #C8102E;
  font-weight: 700;
}
.mf__field.is-invalid input, .mf__field.is-invalid select, .mf__field.is-invalid textarea {
  border-color: #C8102E;
}
.mf__field.is-invalid em {
  display: block;
}
.mf__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #1D1E1F;
  margin: 4px 0 0;
  position: relative;
  flex-wrap: wrap;
}
.mf__consent input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #0042DD;
  flex: none;
}
.mf__consent span {
  flex: 1;
}
.mf__consent span a {
  color: #0042DD;
  font-weight: 700;
}
.mf__consent em {
  display: none;
  width: 100%;
  font-style: normal;
  font-size: 13px;
  color: #C8102E;
  font-weight: 700;
  padding-left: 32px;
}
.mf__consent.is-invalid em {
  display: block;
}
.mf__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.mf__form-error {
  color: #C8102E;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
.mf__actions--left {
  justify-content: flex-start;
  margin-top: 8px;
}
.mf .fh-btn.is-busy {
  opacity: 0.6;
  pointer-events: none;
}
.mf__thanks h2 {
  color: #0042DD;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.3125rem + 0.75vw);
}
@media (min-width: 1200px) {
  .mf__thanks h2 {
    font-size: 1.875rem;
  }
}
.mf__thanks h2 {
  font-weight: 700;
  margin: 0 0 10px;
  padding: 0;
  text-transform: none;
}
.mf__thanks p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.mf__thanks p strong {
  color: #0042DD;
}
.mf__none {
  text-align: center;
  font-size: 16px;
  margin: 0 0 20px;
}
.mf__none a {
  color: #0042DD;
  font-weight: 700;
}
.mf__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* entry point on the memberships page */
.mb__finder-cta {
  display: flex;
  justify-content: center;
  margin: -8px 0 28px;
}
.mb__finder-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0042DD;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid rgba(29, 30, 31, 0.12);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mb__finder-cta a svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}
.mb__finder-cta a:hover {
  background: #0042DD;
  border-color: #0042DD;
  color: #fff;
}

/* ============================================================
   About Us — Figma WLL-17-DESKTOP-ABOUT (Views/Partials/pages/AboutFigma.cshtml)
   ============================================================ */
.ab-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 991.98px) {
  .ab-wrap {
    padding: 0 20px;
  }
}

/* BugHerd #122 — the same hero treatment as every other page: full-bleed photograph, no scrim,
   the page name centred over it in white at the Figma scale (160px on a 1920 frame). */
.ab-hero {
  position: relative;
  min-height: 56vh;
  background: #0042DD center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-hero h1 {
  position: relative;
  color: #fff;
  font-family: "Youth", sans-serif;
  font-size: clamp(36px, 5.6vw, 104px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0 24px;
  margin: 0;
  text-transform: none;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}
@media (max-width: 991.98px) {
  .ab-hero {
    min-height: 38vh;
  }
  .ab-hero h1 {
    font-size: clamp(28px, 9vw, 48px);
  }
}

.ab-band {
  padding: 76px 0;
  text-align: center;
  background: #fff;
  /* BugHerd #123 — the grey band treatment is dropped; the page runs white throughout and the
     blue stat tiles and imagery carry the rhythm instead */
}
.ab-band--off {
  background: #fff;
}
.ab-band--tight {
  padding-bottom: 40px;
}
.ab-band h2 {
  color: #1D1E1F;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.4rem + 1.8vw);
}
@media (min-width: 1200px) {
  .ab-band h2 {
    font-size: 2.75rem;
  }
}
.ab-band h2 {
  font-weight: 700;
  line-height: 1.12;
  margin: 0 auto;
  padding: 0;
  max-width: 30ch;
  text-transform: none;
}
.ab-band { /* BugHerd #136: 22ch -> 30ch */ }
.ab-band p {
  max-width: 68ch;
  margin: 0 auto 16px;
  padding: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #1D1E1F;
}
.ab-band h2 + p {
  margin-top: 28px;
}
.ab-band .ab-emph {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-top: 26px;
  color: #0042DD;
}
@media (max-width: 991.98px) {
  .ab-band {
    padding: 48px 0;
  }
  .ab-band h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3125rem + 0.75vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .ab-band h2 {
    font-size: 1.875rem;
  }
}
@media (max-width: 991.98px) {
  .ab-band p {
    font-size: 16px;
  }
}

.ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1180px;
  margin: 44px auto 0;
}
@media (max-width: 991.98px) {
  .ab-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }
}

.ab-stat {
  background: #0042DD;
  color: #fff;
  border-radius: 12px;
  padding: 56px 40px 40px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ab-stat__num {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 108px;
  line-height: 0.9;
}
.ab-stat__num--sm {
  font-size: 84px;
}
.ab-stat__label {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-top: 26px;
}
@media (max-width: 991.98px) {
  .ab-stat {
    min-height: 0;
    padding: 36px 24px;
  }
  .ab-stat__num {
    font-size: 72px;
  }
  .ab-stat__num--sm {
    font-size: 60px;
  }
}

.ab-gallery img {
  width: 100%;
  display: block;
  border-radius: 12px;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.ab-wide {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 40px 0;
}
.ab-wide img {
  width: 100%;
  display: block;
  border-radius: 12px;
}
@media (max-width: 991.98px) {
  .ab-wide {
    padding: 8px 20px 0;
  }
}

.ab-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 44px auto 0;
  text-align: left;
}
@media (max-width: 991.98px) {
  .ab-values {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
  }
}

.ab-value {
  background: #fff;
  border: 1px solid rgba(29, 30, 31, 0.12);
  border-radius: 12px;
  padding: 34px 30px;
}
.ab-value h3 {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 12px;
  padding: 0;
  text-transform: none;
}
.ab-value p {
  font-size: 16px;
  line-height: 1.5;
  color: #1D1E1F;
  margin: 0;
  max-width: none;
}

.ab-btnbar, .ab-btnbar:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0042DD;
  color: #fff;
  border-radius: 10px;
  padding: 26px 32px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ab-btnbar .vn-arrow, .ab-btnbar:visited .vn-arrow {
  width: 26px;
  height: 26px;
  flex: none;
  transition: transform 0.2s ease;
}
.ab-btnbar .vn-arrow path, .ab-btnbar:visited .vn-arrow path {
  stroke: #fff;
}
.ab-btnbar:hover, .ab-btnbar:visited:hover {
  background: #0033AD;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.ab-btnbar:hover .vn-arrow, .ab-btnbar:visited:hover .vn-arrow {
  transform: translateX(4px);
}
@media (max-width: 991.98px) {
  .ab-btnbar, .ab-btnbar:visited {
    padding: 20px 22px;
    font-size: 18px;
  }
}

.ab-fineprint {
  max-width: 68ch;
  margin: 30px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(29, 30, 31, 0.6);
}

/* the shared reveal fades the whole band in */
.ab-band.animated-element {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ab-band.animated-element.animate-me {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ab-band.animated-element {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* BugHerd #99 — the "How we're run" button bar was tight against the copy above and the
   small print below; give it room on both sides. */
.ab-band .ab-grid.ab-run {
  margin-top: 60px;
}

/* BugHerd #99 again: this was written when the small print followed the button bar directly, so
   the adjacent-sibling selector matched. The accreditation badges (#107) were later dropped in
   between the two, the selector stopped matching, and the small print quietly fell back to its
   default 30px. A general sibling selector keeps the intended spacing whatever sits in between. */
.ab-band .ab-grid.ab-run ~ .ab-fineprint {
  margin-top: 52px;
}

.ab-band .ab-emph + .ab-grid {
  margin-top: 52px;
}

/* BugHerd #107 — accreditations moved here from the footer */
.ab-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  margin: 48px auto 0;
}
.ab-partners img {
  height: 62px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
}
@media (max-width: 991.98px) {
  .ab-partners {
    gap: 18px 26px;
    margin-top: 34px;
  }
  .ab-partners img {
    height: 48px;
  }
}

/* the Figma video frame under the vision band (placeholder until a clip is supplied) */
.ab-video {
  max-width: 1000px;
  margin: 40px auto 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #111 center/cover no-repeat;
}
.ab-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
}
.ab-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.ab-video__play svg {
  width: 30px;
  height: 30px;
  fill: #0042DD;
  margin-left: 5px;
}
@media (max-width: 991.98px) {
  .ab-video {
    margin-top: 26px;
    border-radius: 10px;
  }
  .ab-video__play {
    width: 64px;
    height: 64px;
  }
  .ab-video__play svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================================
   CONCEPT — alternative homepage heroes
   Figma WLL-17-DESKTOP-HOMEPAGE: WLL-17-DESKTOP-HOME-BANNER-2 ("Thrills & Skills")
   and WLL-17-DESKTOP-HOME-BANNER-3 ("Ready When You Are").
   Markup: Views/Partials/pages/HomeBannerAlt.cshtml, Views/HomepageOption.cshtml
   ============================================================ */
.hoa-banner {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* ---------- shared copy + button ---------- */
.hoa-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}
.hoa-copy h1 {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.6rem + 4.2vw);
}
@media (min-width: 1200px) {
  .hoa-copy h1 {
    font-size: 4.75rem;
  }
}
.hoa-copy h1 {
  line-height: 1.02;
  margin: 0;
  padding: 0;
  text-transform: none;
}
.hoa-copy p {
  font-size: 24px;
  line-height: 1.35;
  margin: 26px 0 0;
  padding: 0;
}
.hoa-copy .hoa-btn {
  margin-top: 36px;
}
.hoa-copy--centred {
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .hoa-copy {
    max-width: none;
    text-align: center;
  }
  .hoa-copy h1 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .hoa-copy h1 {
    font-size: 2.5rem;
  }
}
@media (max-width: 991.98px) {
  .hoa-copy p {
    font-size: 17px;
    margin-top: 16px;
  }
  .hoa-copy .hoa-btn {
    margin-top: 24px;
  }
}

.hoa-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.hoa-btn .hoa-arrow {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex: none;
}
.hoa-btn:hover {
  transform: translateX(4px);
  text-decoration: none;
}
.hoa-btn--white {
  background: #fff;
  color: #0042DD;
}
.hoa-btn--white:hover {
  background: #fff;
  color: #0033AD;
}
.hoa-btn--blue {
  background: #0042DD;
  color: #fff;
}
.hoa-btn--blue:hover {
  background: #0033AD;
  color: #fff;
}

/* ---------- option 2: the X-Effect burst field ---------- */
.hoa-banner--burst {
  background: #0042DD;
  min-height: 78vh;
  display: flex;
  align-items: center;
  /* the brand burst is supplied as a white/grey artwork; multiplied over brand blue it becomes the
     darker chevrons of the Figma frame without needing a second, blue-tinted copy of the asset */
}
.hoa-banner--burst .hoa-burst {
  position: absolute;
  inset: -6%;
  background: url("/assets/img/x-burst.png") center/cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
}
.hoa-banner--burst::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 46% 42%, rgba(61, 111, 229, 0.4) 0%, rgba(0, 51, 173, 0.12) 62%, rgba(0, 38, 132, 0.42) 100%);
  pointer-events: none;
}
.hoa-banner--burst .hoa-banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 70px 40px 0;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 42%);
  align-items: center;
  gap: 20px;
}
.hoa-banner--burst {
  /* the athlete stands on the band's bottom edge, as in the Figma frame */
}
.hoa-banner--burst .hoa-figure {
  align-self: end;
}
.hoa-banner--burst .hoa-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 66vh;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  .hoa-banner--burst {
    min-height: 0;
  }
  .hoa-banner--burst .hoa-banner__inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 0;
    gap: 8px;
  }
  .hoa-banner--burst .hoa-figure img {
    max-height: 320px;
  }
}

/* ---------- option 3: split white / blue ---------- */
.hoa-banner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  min-height: 78vh;
}
.hoa-banner--split .hoa-split__copy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 80px 70px 80px 40px;
}
.hoa-banner--split .hoa-copy {
  color: #1D1E1F;
  max-width: 560px;
}
.hoa-banner--split .hoa-copy h1 {
  color: #0042DD;
}
.hoa-banner--split .hoa-copy p {
  font-size: 26px;
  color: #1D1E1F;
}
.hoa-banner--split .hoa-split__figure {
  position: relative;
  background: #0042DD;
  overflow: hidden;
}
.hoa-banner--split .hoa-split__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 35%, rgba(61, 111, 229, 0.75) 0%, rgba(0, 66, 221, 0) 70%);
}
.hoa-banner--split .hoa-split__figure {
  /* taken out of flow: a 100%-height image inside an auto-height grid item would otherwise
     fall back to its intrinsic height and drive the whole hero taller than the copy needs */
}
.hoa-banner--split .hoa-split__figure img {
  position: absolute;
  inset: 9% 0 0;
  width: 100%;
  height: 91%;
  object-fit: contain;
  object-position: bottom center;
}
@media (max-width: 991.98px) {
  .hoa-banner--split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hoa-banner--split .hoa-split__copy {
    padding: 36px 20px;
    justify-content: center;
  }
  .hoa-banner--split .hoa-split__figure {
    min-height: 340px;
  }
}

/* ---------- concept switcher ---------- */
.hoa-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #F5F2F1;
  border-bottom: 1px solid rgba(29, 30, 31, 0.1);
}
.hoa-switch__label {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(29, 30, 31, 0.55);
  margin-right: 6px;
}
.hoa-switch__opt {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #0042DD;
  background: #fff;
  border: 1px solid rgba(0, 66, 221, 0.25);
  border-radius: 999px;
  padding: 8px 18px;
  text-decoration: none;
}
.hoa-switch__opt:hover {
  background: #0042DD;
  color: #fff;
  text-decoration: none;
}
.hoa-switch__opt.is-current {
  background: #0042DD;
  color: #fff;
  border-color: #0042DD;
}
@media (max-width: 991.98px) {
  .hoa-switch {
    gap: 8px;
  }
  .hoa-switch__label {
    width: 100%;
    text-align: center;
    margin: 0 0 4px;
  }
  .hoa-switch__opt {
    font-size: 13px;
    padding: 7px 14px;
  }
}

/* ============================================================
   "<Activity> near you" — the venues offering this activity, closest first (BugHerd #104)
   Markup: Views/Partials/pages/ActivityVenues.cshtml
   ============================================================ */
.av-where {
  background: #F5F2F1;
  padding: 70px 0;
}
@media (max-width: 991.98px) {
  .av-where {
    padding: 44px 0;
  }
}

.av-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 991.98px) {
  .av-wrap {
    padding: 0 20px;
  }
}

.av-head {
  margin-bottom: 26px;
}
.av-head h2 {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font: 16px "Youth", sans-serif;
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  .av-head h2 {
    font-size: 2.5rem;
  }
}
.av-head h2 {
  line-height: 1.1;
  margin: 0;
  padding: 0;
  text-transform: none;
}
@media (max-width: 991.98px) {
  .av-head h2 {
    font: 16px "Youth", sans-serif;
    font-size: calc(1.3rem + 0.6vw);
    font-weight: 700;
  }
}
@media (max-width: 991.98px) and (min-width: 1200px) {
  .av-head h2 {
    font-size: 1.75rem;
  }
}
.av-head p {
  margin: 12px 0 0;
  padding: 0;
  font-size: 17px;
  color: rgba(29, 30, 31, 0.75);
  max-width: 62ch;
}

.av-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.av-search .fh-btn {
  flex: none;
}

.av-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 300px;
  max-width: 380px;
  background: #fff;
  border: 1px solid rgba(29, 30, 31, 0.12);
  border-radius: 10px;
  padding: 13px 18px;
}
.av-field svg {
  width: 20px;
  height: 20px;
  stroke: #0042DD;
  flex: none;
}
.av-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 0;
  margin: 0;
  font-family: "Youth", sans-serif;
  font-size: 16px;
  color: #1D1E1F;
}
.av-field input::placeholder {
  color: rgba(29, 30, 31, 0.45);
}
.av-field:focus-within {
  border-color: #0042DD;
}

.av-reset {
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  text-decoration: underline;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #1D1E1F;
}
.av-reset:hover {
  color: #0042DD;
}

.av-msg {
  min-height: 22px;
  margin: 0 0 18px;
  padding: 0;
  font-size: 15px;
  color: rgba(29, 30, 31, 0.7);
}
.av-msg.is-error {
  color: #C8102E;
}
.av-msg:empty {
  margin-bottom: 8px;
}

.av-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 991.98px) {
  .av-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.av-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(29, 30, 31, 0.12);
  border-radius: 12px;
  padding: 22px 24px;
  text-decoration: none;
  color: #1D1E1F;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.av-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 66, 221, 0.3);
  text-decoration: none;
  color: #1D1E1F;
}
.av-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.av-card__name {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0042DD;
}
.av-card__addr {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(29, 30, 31, 0.65);
}
.av-card__addr br {
  content: "";
  display: inline;
}
.av-card__dist {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #1D1E1F;
  margin-top: 4px;
}
.av-card__dist[hidden] {
  display: none !important;
}
.av-card .vn-arrow {
  width: 22px;
  height: 22px;
  stroke: #0042DD;
  flex: none;
}
.av-card.is-nearest {
  border-color: #0042DD;
  box-shadow: 0 0 0 1px #0042DD inset;
}

/* BugHerd #189 — Google star rating in the venue contact column. The whole badge links to the
   venue on Google Maps, which is what the Places policy asks for (attribution + access to the
   source). Stars are one grey row with a gold row clipped over it, so half marks read correctly. */
.vn-rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #1D1E1F;
  text-decoration: none;
}
.vn-rating:hover, .vn-rating:focus-visible {
  border-color: #0042DD;
}
.vn-rating__score {
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
.vn-rating__stars {
  position: relative;
  display: inline-block;
  flex: none;
  width: 86px;
  height: 16px;
  background: currentColor;
  color: rgba(0, 0, 0, 0.18);
  -webkit-mask: var(--vn-stars) left center/86px 16px repeat-x;
  mask: var(--vn-stars) left center/86px 16px repeat-x;
}
.vn-rating__stars i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: #F5A623;
  -webkit-mask: var(--vn-stars) left center/86px 16px repeat-x;
  mask: var(--vn-stars) left center/86px 16px repeat-x;
}
.vn-rating__meta {
  font-size: 13px;
  line-height: 1.2;
  color: rgba(29, 30, 31, 0.72);
}
.vn-rating__meta strong {
  font-weight: 700;
  color: #1D1E1F;
}

.vn-rating__stars, .vn-rating__stars i {
  --vn-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='16' viewBox='0 0 86 16'%3E%3Cpath fill='%23000' d='M8 0l2.47 5.01 5.53.8-4 3.9.94 5.5L8 12.62 3.06 15.2l.94-5.5-4-3.9 5.53-.8zM25.2 0l2.47 5.01 5.53.8-4 3.9.94 5.5-4.94-2.59-4.94 2.6.94-5.5-4-3.9 5.53-.81zM42.4 0l2.47 5.01 5.53.8-4 3.9.94 5.5-4.94-2.59-4.94 2.6.94-5.5-4-3.9 5.53-.81zM59.6 0l2.47 5.01 5.53.8-4 3.9.94 5.5-4.94-2.59-4.94 2.6.94-5.5-4-3.9 5.53-.81zM76.8 0l2.47 5.01 5.53.8-4 3.9.94 5.5-4.94-2.59-4.94 2.6.94-5.5-4-3.9 5.53-.81z'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
  .vn-rating {
    width: 100%;
    justify-content: flex-start;
  }
}

/* The About video frame is a button now (it loads the YouTube player on click), so it needs the
   button chrome removed; once playing, the poster overlay and play badge give way to the iframe. */
.ab-video {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ab-video.is-playing::after { display: none; }
.ab-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Banner layout: "Intro Below" ----------
   Artwork on top, copy in a panel underneath — the same shape as the video hero, so a carousel
   holding a video slide and an image slide rotates as one thing rather than the text jumping from
   over the image to under the film. The artwork is shown whole rather than cropped to a hero band,
   so a 2:1 banner keeps its composition on a wide screen. */
.banner.banner--intro-below {
  display: block;
  min-height: 0;
  height: auto;
  padding: 0;
  background: #fff;
}
.banner.banner--intro-below .banner__content { display: none; }
.banner.banner--intro-below .banner__image {
  position: relative;
  inset: auto;
  width: 100%;
  line-height: 0;
  /* Full width, but the artwork is 2:1 — at 1920 wide that is a 960px hero, taller than most
     viewports. The band is letterboxed to roughly 2.7:1 and the picture cropped into it. The crop
     is pulled towards the top (object-position) because the figures' raised fists sit at 9% of the
     height: a centred crop would take their hands off. What goes instead is the empty ground below
     their knees, which the composition does not need. */
  /* the same height as the video band, so the two slides are interchangeable */
  height: var(--banner-media-h, min(88vh, 900px));
  overflow: hidden;
}
.banner.banner--intro-below .banner__image img {
  /* the full-bleed hero pins its image with position:absolute; here the artwork is in flow so the
     slide takes its height from the picture instead of collapsing to nothing */
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}
.banner.banner--intro-below .banner__intro {
  background: #fff;
  text-align: center;
  padding: 48px 0;
}
.banner.banner--intro-below .banner__intro .banner__intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.banner.banner--intro-below .banner__intro h2,
.banner.banner--intro-below .banner__intro p {
  color: #0042DD;
  text-transform: none;
}
.banner.banner--intro-below .banner__intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}
.banner.banner--intro-below .banner__intro-actions .vn-arrow {
  width: 18px;
  height: 18px;
}
@media (max-width: 991.98px) {
  .banner.banner--intro-below .banner__intro { padding: 32px 0; }
  /* on a phone the band is squarer so the two figures are not reduced to a sliver */
  .banner { --banner-media-h: 62vh; }
}

/* ---------- Banner carousel: fade mode ----------
   Splide's fade mode stacks the slides and cross-fades them, which relies on its own
   position/opacity rules for .splide__slide. The .banner rules out-rank those, so every slide
   painted at once and in flow. That was invisible while the hero held a single slide; a second one
   made both render on top of each other. Restated here at a specificity that wins. */
.splide--fade > .splide__track > .splide__list > .banner.splide__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.splide--fade > .splide__track > .splide__list > .banner.splide__slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* ---------- Hero media height ----------
   One value for both hero slides: the video band and the Intro Below artwork band. They have to
   match or the carousel jumps height as it rotates. Lower than the video's original min(88vh,900px)
   because a 900px hero pushed everything else below the fold — change it here and both follow. */
.banner { --banner-media-h: min(68vh, 620px); }

/* ---------- Umbraco Forms checkboxes / radios ----------
   The Forms package ships its own theme (App_Plugins/UmbracoForms/.../themes/default/style.min.css)
   which loads after base.css and carries
       .umbraco-forms-form .checkboxlist input { width: auto !important; height: auto !important; ... }
   Same specificity as our styled box, later in the cascade, and !important — so it won, while our
   `appearance: none` still applied. The result was a box with no native rendering and auto height:
   14 checkboxes on /contact-us that computed to 22x0 and were simply not there.
   Restated at a specificity the theme cannot reach, so the square blue-tick box comes back. */
html body .umbraco-forms-form .checkboxlist input[type=checkbox],
html body .umbraco-forms-form .radiobuttonlist input[type=radio],
html body .umbraco-forms-form input[type=checkbox],
html body .umbraco-forms-form input[type=radio],
html body .contact-form input[type=checkbox],
html body .contact-form input[type=radio],
html body .form-style input[type=checkbox],
html body .form-style input[type=radio] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  background: #F5F2F1 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-content: center;
  cursor: pointer;
}
html body .umbraco-forms-form input[type=radio],
html body .contact-form input[type=radio],
html body .form-style input[type=radio] { border-radius: 50% !important; }

/* ---------- BugHerd #209, #214, #215: card images sized themselves ----------
   Reported three times on two pages as "odd image size" and "these images need to stretch full
   width". Every image in these cards was rendering at 320px tall by its OWN aspect ratio, not the
   card's width: an 800x800 photo came out 320x320 with white gutters either side, an 800x533 came
   out 480x320, and only the very wide sources overflowed far enough to look full-bleed. That is
   why it looked arbitrary — it tracked the photo, not the page.

   The frame had no width of its own, so `width: 100%` on the image had nothing to resolve against
   and fell back to the intrinsic size. Giving the frame a definite box fixes all three, and
   reserves the space before the photo loads instead of letting the row reflow around it. */
html body .card.card-small-blue-overlay .card__image {
  width: 100%;
  height: 320px;
  overflow: hidden;
}
html body .card.card-small-blue-overlay .card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  html body .card.card-small-blue-overlay .card__image {
    height: 250px;
  }
}

/* ---------- BugHerd #216: venue contact details with no intro ----------
   The address, phone and Directions used to live inside .vn-intro, which the school venues switch
   off in favour of their own media-text block -- so those pages showed no phone number at all even
   though one is set on every one of them. This is the same information on its own, matching the
   intro's treatment so it does not read as a different component. */
.vn-contact {
  padding: 26px 0 0;
}
.vn-contact__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
}
.vn-contact .vn-address {
  color: #0042DD;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}
.vn-contact .vn-address p {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
}
.vn-contact .vn-phone {
  color: #1D1E1F;
  font-family: "Youth", sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.vn-contact .vn-phone a {
  color: inherit;
  text-decoration: none;
}
.vn-contact .vn-phone a:hover {
  color: #0042DD;
}
@media (max-width: 991.98px) {
  .vn-contact__grid {
    gap: 6px 18px;
  }
  .vn-contact .vn-address {
    font-size: 16px;
  }
}