@charset "UTF-8";
/* =========================================================================
/* FontAwesome
/* ======================================================================= */
/**
*
* To add a icon as a content element, preferably use it like this (example):
* content: "/f105";
*/
/* =========================================================================
/* Custom
/* ======================================================================= */
.z-1 {
  z-index: 1;
}
.z-5 {
  z-index: 5;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-888 {
  z-index: 888;
}
.z-999 {
  z-index: 999;
}
.z-9999 {
  z-index: 9999;
}
/* =========================================================================
/* Bootstrap - custom variables and override bootstrap variables
/* ======================================================================= */
/**
 * Het ankerpunt voor álle meeschalende tekst: de breedte waarop de layout zijn
 * designverhoudingen bereikt. Dat is xxl, want daar capt de container op 1440 en groeit
 * een kolom niet meer mee. Boven dit punt staat elke maat dus vast op zijn designwaarde,
 * eronder schaalt hij mee.
 *
 * Twee dingen hangen hieraan en horen daarom gelijk te blijven: `$rfs-breakpoint`
 * hieronder (Bootstrap's RFS, dus alle koppen en `.hN`-utilities) en de mixin
 * `fluid-type()` in abstracts/_mixins.scss (de `.display-*`-maten). Zo begint tekst op de
 * hele site op dezelfde breedte te krimpen.
 *
 * De enige uitzondering is de frontpage-hero: dat blok is full-bleed en loopt door tot
 * 1920, dus daar hoort de designwaarde bij 1920 en niet bij 1520. Die staat als eigen
 * clamp in css/templates/_hero.scss, met de reden erbij.
 */
/* =========================================================================
/* Hamburgers
/* ======================================================================= */
/*!
   * Bootstrap  v5.2.2 (https://getbootstrap.com/)
   * Copyright 2011-2022 The Bootstrap Authors
   * Copyright 2011-2022 Twitter, Inc.
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f3f4f5;
  --bs-gray-200: #e5e8ea;
  --bs-gray-300: #d9dce0;
  --bs-gray-400: #c8ced4;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #4A246D;
  --bs-secondary: #27133A;
  --bs-tertiary: #F5F2F0;
  --bs-quaternary: #E0D7D1;
  --bs-quinary: #FF5E4C;
  --bs-white: #fff;
  --bs-gray-100: #f3f4f5;
  --bs-gray-200: #e5e8ea;
  --bs-gray-300: #d9dce0;
  --bs-gray-400: #c8ced4;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-black: #000;
  --bs-success: #20c997;
  --bs-danger: #fa5424;
  --bs-primary-rgb: 74, 36, 109;
  --bs-secondary-rgb: 39, 19, 58;
  --bs-tertiary-rgb: 245, 242, 240;
  --bs-quaternary-rgb: 224, 215, 209;
  --bs-quinary-rgb: 255, 94, 76;
  --bs-white-rgb: 255, 255, 255;
  --bs-gray-100-rgb: 243, 244, 245;
  --bs-gray-200-rgb: 229, 232, 234;
  --bs-gray-300-rgb: 217, 220, 224;
  --bs-gray-400-rgb: 200, 206, 212;
  --bs-gray-500-rgb: 173, 181, 189;
  --bs-gray-600-rgb: 108, 117, 125;
  --bs-gray-700-rgb: 73, 80, 87;
  --bs-gray-800-rgb: 52, 58, 64;
  --bs-gray-900-rgb: 33, 37, 41;
  --bs-black-rgb: 0, 0, 0;
  --bs-success-rgb: 32, 201, 151;
  --bs-danger-rgb: 250, 84, 36;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 245, 242, 240;
  --bs-font-sans-serif: "Asap", sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: Asap, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-body-color: #212529;
  --bs-body-bg: #F5F2F0;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #d9dce0;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 15px;
  --bs-border-radius-xl: 25px;
  --bs-border-radius-2xl: 50px;
  --bs-border-radius-pill: 90px;
  --bs-link-color: #FF5E4C;
  --bs-link-hover-color: #cc4b3d;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}
*, *::before, *::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: #212529;
}
h1, .h1 {
  font-size: calc(1.375rem + 1.1842105263vw);
}
@media (min-width: 1520px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}
h2, .h2 {
  font-size: calc(1.35rem + 0.9473684211vw);
}
@media (min-width: 1520px) {
  h2, .h2 {
    font-size: 2.25rem;
  }
}
h3, .h3 {
  font-size: calc(1.325rem + 0.7105263158vw);
}
@media (min-width: 1520px) {
  h3, .h3 {
    font-size: 2rem;
  }
}
h4, .h4 {
  font-size: calc(1.275rem + 0.2368421053vw);
}
@media (min-width: 1520px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}
h5, .h5 {
  font-size: 1.25rem;
}
h6, .h6 {
  font-size: 1rem;
}
p {
  margin-top: 0;
  margin-bottom: 20px;
}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
ol, ul {
  padding-left: 2rem;
}
ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b, strong {
  font-weight: bolder;
}
small, .small {
  font-size: 0.875em;
}
mark, .mark {
  padding: 0.1875em;
  background-color: var(--bs-highlight-bg);
}
sub, sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--bs-link-hover-color);
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
pre, code, kbd, samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}
kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 5px;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}
figure {
  margin: 0 0 1rem;
}
img, svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead, tbody, tfoot, tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input, button, select, optgroup, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button, select {
  text-transform: none;
}
[role="button"] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
  display: none !important;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.2368421053vw);
  line-height: inherit;
}
@media (min-width: 1520px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}
::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field {
  padding: 0;
}
::-webkit-inner-spin-button {
  height: auto;
}
[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
  padding: 0;
}
::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
iframe {
  border: 0;
}
summary {
  display: list-item;
  cursor: pointer;
}
progress {
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}
.lead {
  font-size: 1.25rem;
  font-weight: 400;
}
.display-1 {
  font-size: calc(2rem + 7.1052631579vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1520px) {
  .display-1 {
    font-size: 8.75rem;
  }
}
.display-2 {
  font-size: calc(1.875rem + 5.9210526316vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1520px) {
  .display-2 {
    font-size: 7.5rem;
  }
}
.display-3 {
  font-size: calc(1.725rem + 4.5vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1520px) {
  .display-3 {
    font-size: 6rem;
  }
}
.display-4 {
  font-size: calc(1.675rem + 4.0263157895vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1520px) {
  .display-4 {
    font-size: 5.5rem;
  }
}
.display-5 {
  font-size: calc(1.575rem + 3.0789473684vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1520px) {
  .display-5 {
    font-size: 4.5rem;
  }
}
.display-6 {
  font-size: calc(1.475rem + 2.1315789474vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1520px) {
  .display-6 {
    font-size: 3.5rem;
  }
}
.list-unstyled, .contact-items, .hero-front .hero-front-cta-items, .contact-blokken-02 .contact-blokken-02-items, .footer-02 .footer-menu {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}
.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}
.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}
.img-fluid, #content_editor img, .content_editor img {
  max-width: 100%;
  height: auto;
}
.img-thumbnail {
  padding: 0.25rem;
  background-color: #F5F2F0;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}
.figure {
  display: inline-block;
}
.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}
.figure-caption {
  font-size: 0.875em;
  color: #6c757d;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}
@media (min-width: 1520px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1440px;
  }
}
.row {
  --bs-gutter-x: 1.875rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}
.col, .contact-blokken-01 .gform_wrapper.gravity-theme .gform_footer .row .col-voorwaarden {
  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.33333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.col-12, body .gform_wrapper.gravity-theme .gform_footer .row .col-voorwaarden, body .gform_wrapper.gravity-theme .gform_footer .row .col-button {
  flex: 0 0 auto;
  width: 100%;
}
.offset-1 {
  margin-left: 8.33333333%;
}
.offset-2 {
  margin-left: 16.66666667%;
}
.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.33333333%;
}
.offset-5 {
  margin-left: 41.66666667%;
}
.offset-6 {
  margin-left: 50%;
}
.offset-7 {
  margin-left: 58.33333333%;
}
.offset-8 {
  margin-left: 66.66666667%;
}
.offset-9 {
  margin-left: 75%;
}
.offset-10 {
  margin-left: 83.33333333%;
}
.offset-11 {
  margin-left: 91.66666667%;
}
.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;
}
.g-10, .gx-10 {
  --bs-gutter-x: 10px;
}
.g-10, .gy-10 {
  --bs-gutter-y: 10px;
}
.g-15, .gx-15 {
  --bs-gutter-x: 15px;
}
.g-15, .gy-15 {
  --bs-gutter-y: 15px;
}
.g-20, .gx-20 {
  --bs-gutter-x: 20px;
}
.g-20, .gy-20 {
  --bs-gutter-y: 20px;
}
.g-30, .gx-30 {
  --bs-gutter-x: 30px;
}
.g-30, .gy-30 {
  --bs-gutter-y: 30px;
}
.g-45, .gx-45 {
  --bs-gutter-x: 45px;
}
.g-45, .gy-45 {
  --bs-gutter-y: 45px;
}
.g-60, .gx-60 {
  --bs-gutter-x: 60px;
}
.g-60, .gy-60 {
  --bs-gutter-y: 60px;
}
.g-75, .gx-75 {
  --bs-gutter-x: 75px;
}
.g-75, .gy-75 {
  --bs-gutter-y: 75px;
}
.g-90, .gx-90 {
  --bs-gutter-x: 90px;
}
.g-90, .gy-90 {
  --bs-gutter-y: 90px;
}
.g-120, .gx-120 {
  --bs-gutter-x: 120px;
}
.g-120, .gy-120 {
  --bs-gutter-y: 120px;
}
.g-150, .gx-150 {
  --bs-gutter-x: 150px;
}
.g-150, .gy-150 {
  --bs-gutter-y: 150px;
}
.g-180, .gx-180 {
  --bs-gutter-x: 180px;
}
.g-180, .gy-180 {
  --bs-gutter-y: 180px;
}
.g-255, .gx-255 {
  --bs-gutter-x: 255px;
}
.g-255, .gy-255 {
  --bs-gutter-y: 255px;
}
@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.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .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;
  }
  .g-sm-10, .gx-sm-10 {
    --bs-gutter-x: 10px;
  }
  .g-sm-10, .gy-sm-10 {
    --bs-gutter-y: 10px;
  }
  .g-sm-15, .gx-sm-15 {
    --bs-gutter-x: 15px;
  }
  .g-sm-15, .gy-sm-15 {
    --bs-gutter-y: 15px;
  }
  .g-sm-20, .gx-sm-20 {
    --bs-gutter-x: 20px;
  }
  .g-sm-20, .gy-sm-20 {
    --bs-gutter-y: 20px;
  }
  .g-sm-30, .gx-sm-30 {
    --bs-gutter-x: 30px;
  }
  .g-sm-30, .gy-sm-30 {
    --bs-gutter-y: 30px;
  }
  .g-sm-45, .gx-sm-45 {
    --bs-gutter-x: 45px;
  }
  .g-sm-45, .gy-sm-45 {
    --bs-gutter-y: 45px;
  }
  .g-sm-60, .gx-sm-60 {
    --bs-gutter-x: 60px;
  }
  .g-sm-60, .gy-sm-60 {
    --bs-gutter-y: 60px;
  }
  .g-sm-75, .gx-sm-75 {
    --bs-gutter-x: 75px;
  }
  .g-sm-75, .gy-sm-75 {
    --bs-gutter-y: 75px;
  }
  .g-sm-90, .gx-sm-90 {
    --bs-gutter-x: 90px;
  }
  .g-sm-90, .gy-sm-90 {
    --bs-gutter-y: 90px;
  }
  .g-sm-120, .gx-sm-120 {
    --bs-gutter-x: 120px;
  }
  .g-sm-120, .gy-sm-120 {
    --bs-gutter-y: 120px;
  }
  .g-sm-150, .gx-sm-150 {
    --bs-gutter-x: 150px;
  }
  .g-sm-150, .gy-sm-150 {
    --bs-gutter-y: 150px;
  }
  .g-sm-180, .gx-sm-180 {
    --bs-gutter-x: 180px;
  }
  .g-sm-180, .gy-sm-180 {
    --bs-gutter-y: 180px;
  }
  .g-sm-255, .gx-sm-255 {
    --bs-gutter-x: 255px;
  }
  .g-sm-255, .gy-sm-255 {
    --bs-gutter-y: 255px;
  }
}
@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, .contact-blokken-01 .gform_wrapper.gravity-theme .gform_footer .row .col-button {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .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;
  }
  .g-md-10, .gx-md-10 {
    --bs-gutter-x: 10px;
  }
  .g-md-10, .gy-md-10 {
    --bs-gutter-y: 10px;
  }
  .g-md-15, .gx-md-15 {
    --bs-gutter-x: 15px;
  }
  .g-md-15, .gy-md-15 {
    --bs-gutter-y: 15px;
  }
  .g-md-20, .gx-md-20 {
    --bs-gutter-x: 20px;
  }
  .g-md-20, .gy-md-20 {
    --bs-gutter-y: 20px;
  }
  .g-md-30, .gx-md-30 {
    --bs-gutter-x: 30px;
  }
  .g-md-30, .gy-md-30 {
    --bs-gutter-y: 30px;
  }
  .g-md-45, .gx-md-45 {
    --bs-gutter-x: 45px;
  }
  .g-md-45, .gy-md-45 {
    --bs-gutter-y: 45px;
  }
  .g-md-60, .gx-md-60 {
    --bs-gutter-x: 60px;
  }
  .g-md-60, .gy-md-60 {
    --bs-gutter-y: 60px;
  }
  .g-md-75, .gx-md-75 {
    --bs-gutter-x: 75px;
  }
  .g-md-75, .gy-md-75 {
    --bs-gutter-y: 75px;
  }
  .g-md-90, .gx-md-90 {
    --bs-gutter-x: 90px;
  }
  .g-md-90, .gy-md-90 {
    --bs-gutter-y: 90px;
  }
  .g-md-120, .gx-md-120 {
    --bs-gutter-x: 120px;
  }
  .g-md-120, .gy-md-120 {
    --bs-gutter-y: 120px;
  }
  .g-md-150, .gx-md-150 {
    --bs-gutter-x: 150px;
  }
  .g-md-150, .gy-md-150 {
    --bs-gutter-y: 150px;
  }
  .g-md-180, .gx-md-180 {
    --bs-gutter-x: 180px;
  }
  .g-md-180, .gy-md-180 {
    --bs-gutter-y: 180px;
  }
  .g-md-255, .gx-md-255 {
    --bs-gutter-x: 255px;
  }
  .g-md-255, .gy-md-255 {
    --bs-gutter-y: 255px;
  }
}
@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.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .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;
  }
  .g-lg-10, .gx-lg-10 {
    --bs-gutter-x: 10px;
  }
  .g-lg-10, .gy-lg-10 {
    --bs-gutter-y: 10px;
  }
  .g-lg-15, .gx-lg-15 {
    --bs-gutter-x: 15px;
  }
  .g-lg-15, .gy-lg-15 {
    --bs-gutter-y: 15px;
  }
  .g-lg-20, .gx-lg-20 {
    --bs-gutter-x: 20px;
  }
  .g-lg-20, .gy-lg-20 {
    --bs-gutter-y: 20px;
  }
  .g-lg-30, .gx-lg-30 {
    --bs-gutter-x: 30px;
  }
  .g-lg-30, .gy-lg-30 {
    --bs-gutter-y: 30px;
  }
  .g-lg-45, .gx-lg-45 {
    --bs-gutter-x: 45px;
  }
  .g-lg-45, .gy-lg-45 {
    --bs-gutter-y: 45px;
  }
  .g-lg-60, .gx-lg-60 {
    --bs-gutter-x: 60px;
  }
  .g-lg-60, .gy-lg-60 {
    --bs-gutter-y: 60px;
  }
  .g-lg-75, .gx-lg-75 {
    --bs-gutter-x: 75px;
  }
  .g-lg-75, .gy-lg-75 {
    --bs-gutter-y: 75px;
  }
  .g-lg-90, .gx-lg-90 {
    --bs-gutter-x: 90px;
  }
  .g-lg-90, .gy-lg-90 {
    --bs-gutter-y: 90px;
  }
  .g-lg-120, .gx-lg-120 {
    --bs-gutter-x: 120px;
  }
  .g-lg-120, .gy-lg-120 {
    --bs-gutter-y: 120px;
  }
  .g-lg-150, .gx-lg-150 {
    --bs-gutter-x: 150px;
  }
  .g-lg-150, .gy-lg-150 {
    --bs-gutter-y: 150px;
  }
  .g-lg-180, .gx-lg-180 {
    --bs-gutter-x: 180px;
  }
  .g-lg-180, .gy-lg-180 {
    --bs-gutter-y: 180px;
  }
  .g-lg-255, .gx-lg-255 {
    --bs-gutter-x: 255px;
  }
  .g-lg-255, .gy-lg-255 {
    --bs-gutter-y: 255px;
  }
}
@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.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .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;
  }
  .g-xl-10, .gx-xl-10 {
    --bs-gutter-x: 10px;
  }
  .g-xl-10, .gy-xl-10 {
    --bs-gutter-y: 10px;
  }
  .g-xl-15, .gx-xl-15 {
    --bs-gutter-x: 15px;
  }
  .g-xl-15, .gy-xl-15 {
    --bs-gutter-y: 15px;
  }
  .g-xl-20, .gx-xl-20 {
    --bs-gutter-x: 20px;
  }
  .g-xl-20, .gy-xl-20 {
    --bs-gutter-y: 20px;
  }
  .g-xl-30, .gx-xl-30 {
    --bs-gutter-x: 30px;
  }
  .g-xl-30, .gy-xl-30 {
    --bs-gutter-y: 30px;
  }
  .g-xl-45, .gx-xl-45 {
    --bs-gutter-x: 45px;
  }
  .g-xl-45, .gy-xl-45 {
    --bs-gutter-y: 45px;
  }
  .g-xl-60, .gx-xl-60 {
    --bs-gutter-x: 60px;
  }
  .g-xl-60, .gy-xl-60 {
    --bs-gutter-y: 60px;
  }
  .g-xl-75, .gx-xl-75 {
    --bs-gutter-x: 75px;
  }
  .g-xl-75, .gy-xl-75 {
    --bs-gutter-y: 75px;
  }
  .g-xl-90, .gx-xl-90 {
    --bs-gutter-x: 90px;
  }
  .g-xl-90, .gy-xl-90 {
    --bs-gutter-y: 90px;
  }
  .g-xl-120, .gx-xl-120 {
    --bs-gutter-x: 120px;
  }
  .g-xl-120, .gy-xl-120 {
    --bs-gutter-y: 120px;
  }
  .g-xl-150, .gx-xl-150 {
    --bs-gutter-x: 150px;
  }
  .g-xl-150, .gy-xl-150 {
    --bs-gutter-y: 150px;
  }
  .g-xl-180, .gx-xl-180 {
    --bs-gutter-x: 180px;
  }
  .g-xl-180, .gy-xl-180 {
    --bs-gutter-y: 180px;
  }
  .g-xl-255, .gx-xl-255 {
    --bs-gutter-x: 255px;
  }
  .g-xl-255, .gy-xl-255 {
    --bs-gutter-y: 255px;
  }
}
@media (min-width: 1520px) {
  .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.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .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;
  }
  .g-xxl-10, .gx-xxl-10 {
    --bs-gutter-x: 10px;
  }
  .g-xxl-10, .gy-xxl-10 {
    --bs-gutter-y: 10px;
  }
  .g-xxl-15, .gx-xxl-15 {
    --bs-gutter-x: 15px;
  }
  .g-xxl-15, .gy-xxl-15 {
    --bs-gutter-y: 15px;
  }
  .g-xxl-20, .gx-xxl-20 {
    --bs-gutter-x: 20px;
  }
  .g-xxl-20, .gy-xxl-20 {
    --bs-gutter-y: 20px;
  }
  .g-xxl-30, .gx-xxl-30 {
    --bs-gutter-x: 30px;
  }
  .g-xxl-30, .gy-xxl-30 {
    --bs-gutter-y: 30px;
  }
  .g-xxl-45, .gx-xxl-45 {
    --bs-gutter-x: 45px;
  }
  .g-xxl-45, .gy-xxl-45 {
    --bs-gutter-y: 45px;
  }
  .g-xxl-60, .gx-xxl-60 {
    --bs-gutter-x: 60px;
  }
  .g-xxl-60, .gy-xxl-60 {
    --bs-gutter-y: 60px;
  }
  .g-xxl-75, .gx-xxl-75 {
    --bs-gutter-x: 75px;
  }
  .g-xxl-75, .gy-xxl-75 {
    --bs-gutter-y: 75px;
  }
  .g-xxl-90, .gx-xxl-90 {
    --bs-gutter-x: 90px;
  }
  .g-xxl-90, .gy-xxl-90 {
    --bs-gutter-y: 90px;
  }
  .g-xxl-120, .gx-xxl-120 {
    --bs-gutter-x: 120px;
  }
  .g-xxl-120, .gy-xxl-120 {
    --bs-gutter-y: 120px;
  }
  .g-xxl-150, .gx-xxl-150 {
    --bs-gutter-x: 150px;
  }
  .g-xxl-150, .gy-xxl-150 {
    --bs-gutter-y: 150px;
  }
  .g-xxl-180, .gx-xxl-180 {
    --bs-gutter-x: 180px;
  }
  .g-xxl-180, .gy-xxl-180 {
    --bs-gutter-y: 180px;
  }
  .g-xxl-255, .gx-xxl-255 {
    --bs-gutter-x: 255px;
  }
  .g-xxl-255, .gy-xxl-255 {
    --bs-gutter-y: 255px;
  }
}
.table, #content_editor table, .content_editor table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-table-color);
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > *, #content_editor table > :not(caption) > * > *, .content_editor table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table > tbody, #content_editor table > tbody, .content_editor table > tbody {
  vertical-align: inherit;
}
.table > thead, #content_editor table > thead, .content_editor table > thead {
  vertical-align: bottom;
}
.table-group-divider {
  border-top: 2px solid currentcolor;
}
.caption-top {
  caption-side: top;
}
.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}
.table-bordered > :not(caption) > * {
  border-width: 1px 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 1px;
}
.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) > *, #content_editor table > tbody > tr:nth-of-type(odd) > *, .content_editor table > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}
.table-active {
  --bs-table-accent-bg: var(--bs-table-active-bg);
  color: var(--bs-table-active-color);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}
.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #dbd3e2;
  --bs-table-border-color: #c5becb;
  --bs-table-striped-bg: #d0c8d7;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #c5becb;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #cbc3d1;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #d4d0d8;
  --bs-table-border-color: #bfbbc2;
  --bs-table-striped-bg: #c9c6cd;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bfbbc2;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c4c0c8;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-success {
  --bs-table-color: #000;
  --bs-table-bg: #d2f4ea;
  --bs-table-border-color: #bddcd3;
  --bs-table-striped-bg: #c8e8de;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bddcd3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c2e2d8;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-info {
  --bs-table-color: #000;
  --bs-table-bg: #cff4fc;
  --bs-table-border-color: #badce3;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #fff3cd;
  --bs-table-border-color: #e6dbb9;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: #feddd3;
  --bs-table-border-color: #e5c7be;
  --bs-table-striped-bg: #f1d2c8;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e5c7be;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ebccc3;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f3f4f5;
  --bs-table-border-color: #dbdcdd;
  --bs-table-striped-bg: #e7e8e9;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dbdcdd;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e1e2e3;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #373b3e;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1519.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}
.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.6;
}
.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
}
.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
}
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #6c757d;
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #212529;
  background-color: #F5F2F0;
  background-clip: padding-box;
  border: 1px solid #c8ced4;
  appearance: none;
  border-radius: 10px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type="file"] {
  overflow: hidden;
}
.form-control[type="file"]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: #212529;
  background-color: #F5F2F0;
  border-color: #a592b6;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(74, 36, 109, 0.25);
}
.form-control::-webkit-date-and-time-value {
  height: 1.6em;
}
.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}
.form-control:disabled {
  background-color: #e5e8ea;
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: #212529;
  background-color: #e5e8ea;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: 1px;
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dadcde;
}
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.6;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}
.form-control-plaintext:focus {
  outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
.form-control-sm {
  min-height: calc(1.6em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 5px;
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-lg {
  min-height: calc(1.6em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 15px;
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}
textarea.form-control {
  min-height: calc(1.6em + 0.75rem + 2px);
}
textarea.form-control-sm {
  min-height: calc(1.6em + 0.5rem + 2px);
}
textarea.form-control-lg {
  min-height: calc(1.6em + 1rem + 2px);
}
.form-control-color {
  width: 3rem;
  height: calc(1.6em + 0.75rem + 2px);
  padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: 10px;
}
.form-control-color::-webkit-color-swatch {
  border-radius: 10px;
}
.form-control-color.form-control-sm {
  height: calc(1.6em + 0.5rem + 2px);
}
.form-control-color.form-control-lg {
  height: calc(1.6em + 1rem + 2px);
}
.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #212529;
  background-color: #F5F2F0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #c8ced4;
  border-radius: 10px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: #a592b6;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(74, 36, 109, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.form-select:disabled {
  background-color: #e5e8ea;
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #212529;
}
.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: 5px;
}
.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: 15px;
}
.form-check {
  display: block;
  min-height: 1.6rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}
.form-check-reverse {
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}
.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}
.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.3em;
  vertical-align: top;
  background-color: #F5F2F0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  print-color-adjust: exact;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-check-input {
    transition: none;
  }
}
.form-check-input[type="checkbox"] {
  border-radius: 0.25em;
}
.form-check-input[type="radio"] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #a592b6;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(74, 36, 109, 0.25);
}
.form-check-input:checked {
  background-color: #4A246D;
  border-color: #4A246D;
}
.form-check-input:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #4A246D;
  border-color: #4A246D;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}
.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a592b6'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}
.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}
.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #F5F2F0, 0 0 0 0.25rem rgba(74, 36, 109, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #F5F2F0, 0 0 0 0.25rem rgba(74, 36, 109, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #4A246D;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: #c9bdd3;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #d9dce0;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #4A246D;
  border: 0;
  border-radius: 1rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  appearance: none;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #c9bdd3;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #d9dce0;
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}
.form-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}
.form-floating {
  position: relative;
}
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control, .form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}
.form-floating > .form-control::placeholder, .form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill, .form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: 1px 0;
}
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select, .input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus, .input-group > .form-select:focus, .input-group > .form-floating:focus-within {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e5e8ea;
  border: 1px solid #c8ced4;
  border-radius: 10px;
}
.input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text, .input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 15px;
}
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text, .input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 5px;
}
.input-group-lg > .form-select, .input-group-sm > .form-select {
  padding-right: 3rem;
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group.has-validation > .dropdown-toggle:nth-last-child(n + 4), .input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-control, .input-group.has-validation > .form-floating:nth-last-child(n + 3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-floating:not(:first-child) > .form-control, .input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #20c997;
}
.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #000;
  background-color: rgba(32, 201, 151, 0.9);
  border-radius: 10px;
}
.was-validated :valid ~ .valid-feedback, .was-validated :valid ~ .valid-tooltip, .is-valid ~ .valid-feedback, .is-valid ~ .valid-tooltip {
  display: block;
}
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: #20c997;
  padding-right: calc(1.6em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2320c997' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.4em + 0.1875rem) center;
  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: #20c997;
  box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.25);
}
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.6em + 0.75rem);
  background-position: top calc(0.4em + 0.1875rem) right calc(0.4em + 0.1875rem);
}
.was-validated .form-select:valid, .form-select.is-valid {
  border-color: #20c997;
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2320c997' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: #20c997;
  box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.25);
}
.was-validated .form-control-color:valid, .form-control-color.is-valid {
  width: calc(3rem + calc(1.6em + 0.75rem));
}
.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: #20c997;
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: #20c997;
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: #20c997;
}
.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid, .was-validated .input-group > .form-select:not(:focus):valid, .input-group > .form-select:not(:focus).is-valid, .was-validated .input-group > .form-floating:not(:focus-within):valid, .input-group > .form-floating:not(:focus-within).is-valid {
  z-index: 3;
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #fa5424;
}
.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #000;
  background-color: rgba(250, 84, 36, 0.9);
  border-radius: 10px;
}
.was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip {
  display: block;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: #fa5424;
  padding-right: calc(1.6em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fa5424'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fa5424' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.4em + 0.1875rem) center;
  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: #fa5424;
  box-shadow: 0 0 0 0.25rem rgba(250, 84, 36, 0.25);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.6em + 0.75rem);
  background-position: top calc(0.4em + 0.1875rem) right calc(0.4em + 0.1875rem);
}
.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: #fa5424;
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  padding-right: 4.125rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23fa5424'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23fa5424' stroke='none'/%3e%3c/svg%3e");
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: #fa5424;
  box-shadow: 0 0 0 0.25rem rgba(250, 84, 36, 0.25);
}
.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
  width: calc(3rem + calc(1.6em + 0.75rem));
}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: #fa5424;
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: #fa5424;
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(250, 84, 36, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: #fa5424;
}
.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid, .was-validated .input-group > .form-select:not(:focus):invalid, .input-group > .form-select:not(:focus).is-invalid, .was-validated .input-group > .form-floating:not(:focus-within):invalid, .input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}
.btn {
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: 12px;
  --bs-btn-font-family: Asap, sans-serif;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: #212529;
  --bs-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: 25px;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}
.btn-primary, .contact-blokken-01 .gform_wrapper.gravity-theme button {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4A246D;
  --bs-btn-border-color: #4A246D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3f1f5d;
  --bs-btn-hover-border-color: #3b1d57;
  --bs-btn-focus-shadow-rgb: 101, 69, 131;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3b1d57;
  --bs-btn-active-border-color: #381b52;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4A246D;
  --bs-btn-disabled-border-color: #4A246D;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #27133A;
  --bs-btn-border-color: #27133A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #211031;
  --bs-btn-hover-border-color: #1f0f2e;
  --bs-btn-focus-shadow-rgb: 71, 54, 88;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1f0f2e;
  --bs-btn-active-border-color: #1d0e2c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #27133A;
  --bs-btn-disabled-border-color: #27133A;
}
.btn-tertiary {
  --bs-btn-color: #000;
  --bs-btn-bg: #F5F2F0;
  --bs-btn-border-color: #F5F2F0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f7f4f2;
  --bs-btn-hover-border-color: #f6f3f2;
  --bs-btn-focus-shadow-rgb: 208, 206, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f7f5f3;
  --bs-btn-active-border-color: #f6f3f2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #F5F2F0;
  --bs-btn-disabled-border-color: #F5F2F0;
}
.btn-quaternary {
  --bs-btn-color: #000;
  --bs-btn-bg: #E0D7D1;
  --bs-btn-border-color: #E0D7D1;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e5ddd8;
  --bs-btn-hover-border-color: #e3dbd6;
  --bs-btn-focus-shadow-rgb: 190, 183, 178;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e6dfda;
  --bs-btn-active-border-color: #e3dbd6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #E0D7D1;
  --bs-btn-disabled-border-color: #E0D7D1;
}
.btn-quinary {
  --bs-btn-color: #000;
  --bs-btn-bg: #FF5E4C;
  --bs-btn-border-color: #FF5E4C;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ff7667;
  --bs-btn-hover-border-color: #ff6e5e;
  --bs-btn-focus-shadow-rgb: 217, 80, 65;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ff7e70;
  --bs-btn-active-border-color: #ff6e5e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FF5E4C;
  --bs-btn-disabled-border-color: #FF5E4C;
}
.btn-white {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: white;
  --bs-btn-hover-border-color: white;
  --bs-btn-focus-shadow-rgb: 217, 217, 217;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: white;
  --bs-btn-active-border-color: white;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fff;
  --bs-btn-disabled-border-color: #fff;
}
.btn-gray-100 {
  --bs-btn-color: #000;
  --bs-btn-bg: #f3f4f5;
  --bs-btn-border-color: #f3f4f5;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f5f6f7;
  --bs-btn-hover-border-color: #f4f5f6;
  --bs-btn-focus-shadow-rgb: 207, 207, 208;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f5f6f7;
  --bs-btn-active-border-color: #f4f5f6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f3f4f5;
  --bs-btn-disabled-border-color: #f3f4f5;
}
.btn-gray-200 {
  --bs-btn-color: #000;
  --bs-btn-bg: #e5e8ea;
  --bs-btn-border-color: #e5e8ea;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e9ebed;
  --bs-btn-hover-border-color: #e8eaec;
  --bs-btn-focus-shadow-rgb: 195, 197, 199;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #eaedee;
  --bs-btn-active-border-color: #e8eaec;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #e5e8ea;
  --bs-btn-disabled-border-color: #e5e8ea;
}
.btn-gray-300 {
  --bs-btn-color: #000;
  --bs-btn-bg: #d9dce0;
  --bs-btn-border-color: #d9dce0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dfe1e5;
  --bs-btn-hover-border-color: #dde0e3;
  --bs-btn-focus-shadow-rgb: 184, 187, 190;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e1e3e6;
  --bs-btn-active-border-color: #dde0e3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #d9dce0;
  --bs-btn-disabled-border-color: #d9dce0;
}
.btn-gray-400 {
  --bs-btn-color: #000;
  --bs-btn-bg: #c8ced4;
  --bs-btn-border-color: #c8ced4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d0d5da;
  --bs-btn-hover-border-color: #ced3d8;
  --bs-btn-focus-shadow-rgb: 170, 175, 180;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d3d8dd;
  --bs-btn-active-border-color: #ced3d8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #c8ced4;
  --bs-btn-disabled-border-color: #c8ced4;
}
.btn-gray-500 {
  --bs-btn-color: #000;
  --bs-btn-bg: #adb5bd;
  --bs-btn-border-color: #adb5bd;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #b9c0c7;
  --bs-btn-hover-border-color: #b5bcc4;
  --bs-btn-focus-shadow-rgb: 147, 154, 161;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #bdc4ca;
  --bs-btn-active-border-color: #b5bcc4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #adb5bd;
  --bs-btn-disabled-border-color: #adb5bd;
}
.btn-gray-600 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}
.btn-gray-700 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3e444a;
  --bs-btn-hover-border-color: #3a4046;
  --bs-btn-focus-shadow-rgb: 100, 106, 112;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3a4046;
  --bs-btn-active-border-color: #373c41;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #495057;
  --bs-btn-disabled-border-color: #495057;
}
.btn-gray-800 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #343a40;
  --bs-btn-border-color: #343a40;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2c3136;
  --bs-btn-hover-border-color: #2a2e33;
  --bs-btn-focus-shadow-rgb: 82, 88, 93;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2a2e33;
  --bs-btn-active-border-color: #272c30;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #343a40;
  --bs-btn-disabled-border-color: #343a40;
}
.btn-gray-900 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1c1f23;
  --bs-btn-hover-border-color: #1a1e21;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1a1e21;
  --bs-btn-active-border-color: #191c1f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}
.btn-black {
  --bs-btn-color: #fff;
  --bs-btn-bg: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: black;
  --bs-btn-hover-border-color: black;
  --bs-btn-focus-shadow-rgb: 38, 38, 38;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: black;
  --bs-btn-active-border-color: black;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #000;
  --bs-btn-disabled-border-color: #000;
}
.btn-success {
  --bs-btn-color: #000;
  --bs-btn-bg: #20c997;
  --bs-btn-border-color: #20c997;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #41d1a7;
  --bs-btn-hover-border-color: #36cea1;
  --bs-btn-focus-shadow-rgb: 27, 171, 128;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #4dd4ac;
  --bs-btn-active-border-color: #36cea1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #20c997;
  --bs-btn-disabled-border-color: #20c997;
}
.btn-danger {
  --bs-btn-color: #000;
  --bs-btn-bg: #fa5424;
  --bs-btn-border-color: #fa5424;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fb6e45;
  --bs-btn-hover-border-color: #fb653a;
  --bs-btn-focus-shadow-rgb: 213, 71, 31;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fb7650;
  --bs-btn-active-border-color: #fb653a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fa5424;
  --bs-btn-disabled-border-color: #fa5424;
}
.btn-outline-primary {
  --bs-btn-color: #4A246D;
  --bs-btn-border-color: #4A246D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4A246D;
  --bs-btn-hover-border-color: #4A246D;
  --bs-btn-focus-shadow-rgb: 74, 36, 109;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4A246D;
  --bs-btn-active-border-color: #4A246D;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #4A246D;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4A246D;
  --bs-gradient: none;
}
.btn-outline-secondary {
  --bs-btn-color: #27133A;
  --bs-btn-border-color: #27133A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #27133A;
  --bs-btn-hover-border-color: #27133A;
  --bs-btn-focus-shadow-rgb: 39, 19, 58;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #27133A;
  --bs-btn-active-border-color: #27133A;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #27133A;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #27133A;
  --bs-gradient: none;
}
.btn-outline-tertiary {
  --bs-btn-color: #F5F2F0;
  --bs-btn-border-color: #F5F2F0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #F5F2F0;
  --bs-btn-hover-border-color: #F5F2F0;
  --bs-btn-focus-shadow-rgb: 245, 242, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #F5F2F0;
  --bs-btn-active-border-color: #F5F2F0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #F5F2F0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #F5F2F0;
  --bs-gradient: none;
}
.btn-outline-quaternary {
  --bs-btn-color: #E0D7D1;
  --bs-btn-border-color: #E0D7D1;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #E0D7D1;
  --bs-btn-hover-border-color: #E0D7D1;
  --bs-btn-focus-shadow-rgb: 224, 215, 209;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #E0D7D1;
  --bs-btn-active-border-color: #E0D7D1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #E0D7D1;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #E0D7D1;
  --bs-gradient: none;
}
.btn-outline-quinary {
  --bs-btn-color: #FF5E4C;
  --bs-btn-border-color: #FF5E4C;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #FF5E4C;
  --bs-btn-hover-border-color: #FF5E4C;
  --bs-btn-focus-shadow-rgb: 255, 94, 76;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FF5E4C;
  --bs-btn-active-border-color: #FF5E4C;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FF5E4C;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FF5E4C;
  --bs-gradient: none;
}
.btn-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff;
  --bs-gradient: none;
}
.btn-outline-gray-100 {
  --bs-btn-color: #f3f4f5;
  --bs-btn-border-color: #f3f4f5;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f3f4f5;
  --bs-btn-hover-border-color: #f3f4f5;
  --bs-btn-focus-shadow-rgb: 243, 244, 245;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f3f4f5;
  --bs-btn-active-border-color: #f3f4f5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f3f4f5;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f3f4f5;
  --bs-gradient: none;
}
.btn-outline-gray-200 {
  --bs-btn-color: #e5e8ea;
  --bs-btn-border-color: #e5e8ea;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e5e8ea;
  --bs-btn-hover-border-color: #e5e8ea;
  --bs-btn-focus-shadow-rgb: 229, 232, 234;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e5e8ea;
  --bs-btn-active-border-color: #e5e8ea;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #e5e8ea;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #e5e8ea;
  --bs-gradient: none;
}
.btn-outline-gray-300 {
  --bs-btn-color: #d9dce0;
  --bs-btn-border-color: #d9dce0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d9dce0;
  --bs-btn-hover-border-color: #d9dce0;
  --bs-btn-focus-shadow-rgb: 217, 220, 224;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d9dce0;
  --bs-btn-active-border-color: #d9dce0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #d9dce0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #d9dce0;
  --bs-gradient: none;
}
.btn-outline-gray-400 {
  --bs-btn-color: #c8ced4;
  --bs-btn-border-color: #c8ced4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #c8ced4;
  --bs-btn-hover-border-color: #c8ced4;
  --bs-btn-focus-shadow-rgb: 200, 206, 212;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c8ced4;
  --bs-btn-active-border-color: #c8ced4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #c8ced4;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #c8ced4;
  --bs-gradient: none;
}
.btn-outline-gray-500 {
  --bs-btn-color: #adb5bd;
  --bs-btn-border-color: #adb5bd;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #adb5bd;
  --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-focus-shadow-rgb: 173, 181, 189;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #adb5bd;
  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #adb5bd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #adb5bd;
  --bs-gradient: none;
}
.btn-outline-gray-600 {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}
.btn-outline-gray-700 {
  --bs-btn-color: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #495057;
  --bs-btn-hover-border-color: #495057;
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #495057;
  --bs-btn-active-border-color: #495057;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #495057;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #495057;
  --bs-gradient: none;
}
.btn-outline-gray-800 {
  --bs-btn-color: #343a40;
  --bs-btn-border-color: #343a40;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #343a40;
  --bs-btn-hover-border-color: #343a40;
  --bs-btn-focus-shadow-rgb: 52, 58, 64;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #343a40;
  --bs-btn-active-border-color: #343a40;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #343a40;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #343a40;
  --bs-gradient: none;
}
.btn-outline-gray-900 {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}
.btn-outline-black {
  --bs-btn-color: #000;
  --bs-btn-border-color: #000;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #000;
  --bs-gradient: none;
}
.btn-outline-success {
  --bs-btn-color: #20c997;
  --bs-btn-border-color: #20c997;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #20c997;
  --bs-btn-hover-border-color: #20c997;
  --bs-btn-focus-shadow-rgb: 32, 201, 151;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #20c997;
  --bs-btn-active-border-color: #20c997;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #20c997;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #20c997;
  --bs-gradient: none;
}
.btn-outline-danger {
  --bs-btn-color: #fa5424;
  --bs-btn-border-color: #fa5424;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fa5424;
  --bs-btn-hover-border-color: #fa5424;
  --bs-btn-focus-shadow-rgb: 250, 84, 36;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fa5424;
  --bs-btn-active-border-color: #fa5424;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fa5424;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fa5424;
  --bs-gradient: none;
}
.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-shadow-rgb: 101, 69, 131;
  text-decoration: none;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 30px;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: 15px;
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 8px;
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 5px;
}
.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}
.dropup, .dropend, .dropdown, .dropstart, .dropup-center, .dropdown-center {
  position: relative;
}
.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: #212529;
  --bs-dropdown-bg: #fff;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: 10px;
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-inner-border-radius: 9px;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.05);
  --bs-dropdown-link-color: #212529;
  --bs-dropdown-link-hover-color: #1e2125;
  --bs-dropdown-link-hover-bg: #e5e8ea;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #4A246D;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}
.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}
.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}
@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1520px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}
.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}
.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}
.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}
.dropdown-menu-dark {
  --bs-dropdown-color: #d9dce0;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #d9dce0;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #4A246D;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}
.btn-group, .btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn, .btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn, .btn-group > .btn-check:focus + .btn, .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active, .btn-group-vertical > .btn-check:checked + .btn, .btn-group-vertical > .btn-check:focus + .btn, .btn-group-vertical > .btn:hover, .btn-group-vertical > .btn:focus, .btn-group-vertical > .btn:active, .btn-group-vertical > .btn.active {
  z-index: 1;
}
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}
.btn-group {
  border-radius: 25px;
}
.btn-group > :not(.btn-check:first-child) + .btn, .btn-group > .btn-group:not(:first-child) {
  margin-left: -1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n + 3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dropdown-toggle-split {
  padding-right: 18px;
  padding-left: 18px;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}
.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 22.5px;
  padding-left: 22.5px;
}
.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn, .btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: -1px;
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), .btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn, .btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}
.nav-link.disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}
.nav-tabs {
  --bs-nav-tabs-border-width: 1px;
  --bs-nav-tabs-border-color: #d9dce0;
  --bs-nav-tabs-border-radius: 10px;
  --bs-nav-tabs-link-hover-border-color: #e5e8ea #e5e8ea #d9dce0;
  --bs-nav-tabs-link-active-color: #495057;
  --bs-nav-tabs-link-active-bg: #F5F2F0;
  --bs-nav-tabs-link-active-border-color: #d9dce0 #d9dce0 #F5F2F0;
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  background: none;
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills {
  --bs-nav-pills-border-radius: 10px;
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #4A246D;
}
.nav-pills .nav-link {
  background: none;
  border: 0;
  border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  background-color: transparent;
  border-color: transparent;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}
.nav-fill > .nav-link, .nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}
.nav-justified > .nav-link, .nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
  width: 100%;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.navbar {
  --bs-navbar-padding-x: 15px;
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: rgba(0, 0, 0, 0.55);
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
  --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-brand-padding-y: 0.3rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
  --bs-navbar-toggler-border-radius: 25px;
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
}
.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .show > .nav-link, .navbar-nav .nav-link.active {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}
.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a, .navbar-text a:hover, .navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}
.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1520px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}
.navbar-dark {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.accordion {
  --bs-accordion-color: #212529;
  --bs-accordion-bg: #F5F2F0;
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 9px;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: #212529;
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23432062'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #a592b6;
  --bs-accordion-btn-focus-box-shadow: #6c757d;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: #432062;
  --bs-accordion-active-bg: #ede9f0;
}
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--bs-accordion-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
.accordion-header {
  margin-bottom: 0;
}
.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}
.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0;
}
.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: 1px solid var(--bs-alert-border-color);
  --bs-alert-border-radius: 10px;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}
.alert-heading {
  color: inherit;
}
.alert-link {
  font-weight: 700;
}
.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}
.alert-primary {
  --bs-alert-color: #2c1641;
  --bs-alert-bg: #dbd3e2;
  --bs-alert-border-color: #c9bdd3;
}
.alert-primary .alert-link {
  color: #231234;
}
.alert-secondary {
  --bs-alert-color: #170b23;
  --bs-alert-bg: #d4d0d8;
  --bs-alert-border-color: #beb8c4;
}
.alert-secondary .alert-link {
  color: #12091c;
}
.alert-tertiary {
  --bs-alert-color: #626160;
  --bs-alert-bg: #fdfcfc;
  --bs-alert-border-color: #fcfbfb;
}
.alert-tertiary .alert-link {
  color: #4e4e4d;
}
.alert-quaternary {
  --bs-alert-color: #5a5654;
  --bs-alert-bg: #f9f7f6;
  --bs-alert-border-color: #f6f3f1;
}
.alert-quaternary .alert-link {
  color: #484543;
}
.alert-quinary {
  --bs-alert-color: #99382e;
  --bs-alert-bg: #ffdfdb;
  --bs-alert-border-color: #ffcfc9;
}
.alert-quinary .alert-link {
  color: #7a2d25;
}
.alert-white {
  --bs-alert-color: #666;
  --bs-alert-bg: white;
  --bs-alert-border-color: white;
}
.alert-white .alert-link {
  color: #525252;
}
.alert-gray-100 {
  --bs-alert-color: #616262;
  --bs-alert-bg: #fdfdfd;
  --bs-alert-border-color: #fbfcfc;
}
.alert-gray-100 .alert-link {
  color: #4e4e4e;
}
.alert-gray-200 {
  --bs-alert-color: #5c5d5e;
  --bs-alert-bg: #fafafb;
  --bs-alert-border-color: #f7f8f9;
}
.alert-gray-200 .alert-link {
  color: #4a4a4b;
}
.alert-gray-300 {
  --bs-alert-color: #57585a;
  --bs-alert-bg: #f7f8f9;
  --bs-alert-border-color: #f4f5f6;
}
.alert-gray-300 .alert-link {
  color: #464648;
}
.alert-gray-400 {
  --bs-alert-color: #505255;
  --bs-alert-bg: #f4f5f6;
  --bs-alert-border-color: #eff0f2;
}
.alert-gray-400 .alert-link {
  color: #404244;
}
.alert-gray-500 {
  --bs-alert-color: #686d71;
  --bs-alert-bg: #eff0f2;
  --bs-alert-border-color: #e6e9eb;
}
.alert-gray-500 .alert-link {
  color: #53575a;
}
.alert-gray-600 {
  --bs-alert-color: #41464b;
  --bs-alert-bg: #e2e3e5;
  --bs-alert-border-color: #d3d6d8;
}
.alert-gray-600 .alert-link {
  color: #34383c;
}
.alert-gray-700 {
  --bs-alert-color: #2c3034;
  --bs-alert-bg: #dbdcdd;
  --bs-alert-border-color: #c8cbcd;
}
.alert-gray-700 .alert-link {
  color: #23262a;
}
.alert-gray-800 {
  --bs-alert-color: #1f2326;
  --bs-alert-bg: #d6d8d9;
  --bs-alert-border-color: #c2c4c6;
}
.alert-gray-800 .alert-link {
  color: #191c1e;
}
.alert-gray-900 {
  --bs-alert-color: #141619;
  --bs-alert-bg: #d3d3d4;
  --bs-alert-border-color: #bcbebf;
}
.alert-gray-900 .alert-link {
  color: #101214;
}
.alert-black {
  --bs-alert-color: black;
  --bs-alert-bg: #ccc;
  --bs-alert-border-color: #b3b3b3;
}
.alert-black .alert-link {
  color: black;
}
.alert-success {
  --bs-alert-color: #13795b;
  --bs-alert-bg: #d2f4ea;
  --bs-alert-border-color: #bcefe0;
}
.alert-success .alert-link {
  color: #0f6149;
}
.alert-danger {
  --bs-alert-color: #963216;
  --bs-alert-bg: #feddd3;
  --bs-alert-border-color: #feccbd;
}
.alert-danger .alert-link {
  color: #782812;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
.text-bg-primary {
  color: #fff !important;
  background-color: rgba(74, 36, 109, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-secondary {
  color: #fff !important;
  background-color: rgba(39, 19, 58, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-tertiary {
  color: #000 !important;
  background-color: rgba(245, 242, 240, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-quaternary {
  color: #000 !important;
  background-color: rgba(224, 215, 209, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-quinary {
  color: #000 !important;
  background-color: rgba(255, 94, 76, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-white {
  color: #000 !important;
  background-color: rgba(255, 255, 255, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-100 {
  color: #000 !important;
  background-color: rgba(243, 244, 245, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-200 {
  color: #000 !important;
  background-color: rgba(229, 232, 234, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-300 {
  color: #000 !important;
  background-color: rgba(217, 220, 224, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-400 {
  color: #000 !important;
  background-color: rgba(200, 206, 212, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-500 {
  color: #000 !important;
  background-color: rgba(173, 181, 189, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-600 {
  color: #fff !important;
  background-color: rgba(108, 117, 125, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-700 {
  color: #fff !important;
  background-color: rgba(73, 80, 87, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-800 {
  color: #fff !important;
  background-color: rgba(52, 58, 64, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-gray-900 {
  color: #fff !important;
  background-color: rgba(33, 37, 41, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-black {
  color: #fff !important;
  background-color: rgba(0, 0, 0, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-success {
  color: #000 !important;
  background-color: rgba(32, 201, 151, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-danger {
  color: #000 !important;
  background-color: rgba(250, 84, 36, var(--bs-bg-opacity, 1)) !important;
}
.link-primary {
  color: #4A246D !important;
}
.link-primary:hover, .link-primary:focus {
  color: #3b1d57 !important;
}
.link-secondary {
  color: #27133A !important;
}
.link-secondary:hover, .link-secondary:focus {
  color: #1f0f2e !important;
}
.link-tertiary {
  color: #F5F2F0 !important;
}
.link-tertiary:hover, .link-tertiary:focus {
  color: #f7f5f3 !important;
}
.link-quaternary {
  color: #E0D7D1 !important;
}
.link-quaternary:hover, .link-quaternary:focus {
  color: #e6dfda !important;
}
.link-quinary {
  color: #FF5E4C !important;
}
.link-quinary:hover, .link-quinary:focus {
  color: #ff7e70 !important;
}
.link-white {
  color: #fff !important;
}
.link-white:hover, .link-white:focus {
  color: white !important;
}
.link-gray-100 {
  color: #f3f4f5 !important;
}
.link-gray-100:hover, .link-gray-100:focus {
  color: #f5f6f7 !important;
}
.link-gray-200 {
  color: #e5e8ea !important;
}
.link-gray-200:hover, .link-gray-200:focus {
  color: #eaedee !important;
}
.link-gray-300 {
  color: #d9dce0 !important;
}
.link-gray-300:hover, .link-gray-300:focus {
  color: #e1e3e6 !important;
}
.link-gray-400 {
  color: #c8ced4 !important;
}
.link-gray-400:hover, .link-gray-400:focus {
  color: #d3d8dd !important;
}
.link-gray-500 {
  color: #adb5bd !important;
}
.link-gray-500:hover, .link-gray-500:focus {
  color: #bdc4ca !important;
}
.link-gray-600 {
  color: #6c757d !important;
}
.link-gray-600:hover, .link-gray-600:focus {
  color: #565e64 !important;
}
.link-gray-700 {
  color: #495057 !important;
}
.link-gray-700:hover, .link-gray-700:focus {
  color: #3a4046 !important;
}
.link-gray-800 {
  color: #343a40 !important;
}
.link-gray-800:hover, .link-gray-800:focus {
  color: #2a2e33 !important;
}
.link-gray-900 {
  color: #212529 !important;
}
.link-gray-900:hover, .link-gray-900:focus {
  color: #1a1e21 !important;
}
.link-black {
  color: #000 !important;
}
.link-black:hover, .link-black:focus {
  color: black !important;
}
.link-success {
  color: #20c997 !important;
}
.link-success:hover, .link-success:focus {
  color: #4dd4ac !important;
}
.link-danger {
  color: #fa5424 !important;
}
.link-danger:hover, .link-danger:focus {
  color: #fb7650 !important;
}
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}
.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%);
}
.ratio-3x4 {
  --bs-aspect-ratio: calc(4 / 3 * 100%);
}
.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}
.ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 21 * 100%);
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}
.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 1020;
}
@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-sm-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-md-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-lg-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1520px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xxl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}
.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}
.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;
}
.opacity-0 {
  opacity: 0 !important;
}
.opacity-25 {
  opacity: 0.25 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-75 {
  opacity: 0.75 !important;
}
.opacity-100 {
  opacity: 1 !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 1rem 3rem 0 rgba(0, 0, 0, 0.05) !important;
}
.shadow-sm {
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05) !important;
}
.shadow-lg {
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1) !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: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-0 {
  border: 0 !important;
}
.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-top-0 {
  border-top: 0 !important;
}
.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-end-0 {
  border-right: 0 !important;
}
.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-bottom-0 {
  border-bottom: 0 !important;
}
.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-start-0 {
  border-left: 0 !important;
}
.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}
.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}
.border-tertiary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-tertiary-rgb), var(--bs-border-opacity)) !important;
}
.border-quaternary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-quaternary-rgb), var(--bs-border-opacity)) !important;
}
.border-quinary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-quinary-rgb), var(--bs-border-opacity)) !important;
}
.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-100 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-100-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-200 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-200-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-300 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-300-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-400 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-400-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-500 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-500-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-600 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-600-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-700 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-700-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-800 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-800-rgb), var(--bs-border-opacity)) !important;
}
.border-gray-900 {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-gray-900-rgb), var(--bs-border-opacity)) !important;
}
.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
}
.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}
.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}
.border-1 {
  --bs-border-width: 1px;
}
.border-2 {
  --bs-border-width: 2px;
}
.border-3 {
  --bs-border-width: 3px;
}
.border-4 {
  --bs-border-width: 4px;
}
.border-5 {
  --bs-border-width: 5px;
}
.border-opacity-10 {
  --bs-border-opacity: 0.1;
}
.border-opacity-25 {
  --bs-border-opacity: 0.25;
}
.border-opacity-50 {
  --bs-border-opacity: 0.5;
}
.border-opacity-75 {
  --bs-border-opacity: 0.75;
}
.border-opacity-100 {
  --bs-border-opacity: 1;
}
.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;
}
.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-10 {
  margin: 10px !important;
}
.m-15 {
  margin: 15px !important;
}
.m-20 {
  margin: 20px !important;
}
.m-30 {
  margin: 30px !important;
}
.m-45 {
  margin: 45px !important;
}
.m-60 {
  margin: 60px !important;
}
.m-75 {
  margin: 75px !important;
}
.m-90 {
  margin: 90px !important;
}
.m-120 {
  margin: 120px !important;
}
.m-150 {
  margin: 150px !important;
}
.m-180 {
  margin: 180px !important;
}
.m-255 {
  margin: 255px !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-10 {
  margin-right: 10px !important;
  margin-left: 10px !important;
}
.mx-15 {
  margin-right: 15px !important;
  margin-left: 15px !important;
}
.mx-20 {
  margin-right: 20px !important;
  margin-left: 20px !important;
}
.mx-30 {
  margin-right: 30px !important;
  margin-left: 30px !important;
}
.mx-45 {
  margin-right: 45px !important;
  margin-left: 45px !important;
}
.mx-60 {
  margin-right: 60px !important;
  margin-left: 60px !important;
}
.mx-75 {
  margin-right: 75px !important;
  margin-left: 75px !important;
}
.mx-90 {
  margin-right: 90px !important;
  margin-left: 90px !important;
}
.mx-120 {
  margin-right: 120px !important;
  margin-left: 120px !important;
}
.mx-150 {
  margin-right: 150px !important;
  margin-left: 150px !important;
}
.mx-180 {
  margin-right: 180px !important;
  margin-left: 180px !important;
}
.mx-255 {
  margin-right: 255px !important;
  margin-left: 255px !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-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.my-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
.my-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.my-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
.my-45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}
.my-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}
.my-75 {
  margin-top: 75px !important;
  margin-bottom: 75px !important;
}
.my-90 {
  margin-top: 90px !important;
  margin-bottom: 90px !important;
}
.my-120 {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}
.my-150 {
  margin-top: 150px !important;
  margin-bottom: 150px !important;
}
.my-180 {
  margin-top: 180px !important;
  margin-bottom: 180px !important;
}
.my-255 {
  margin-top: 255px !important;
  margin-bottom: 255px !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-10 {
  margin-top: 10px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mt-30 {
  margin-top: 30px !important;
}
.mt-45 {
  margin-top: 45px !important;
}
.mt-60 {
  margin-top: 60px !important;
}
.mt-75 {
  margin-top: 75px !important;
}
.mt-90 {
  margin-top: 90px !important;
}
.mt-120 {
  margin-top: 120px !important;
}
.mt-150 {
  margin-top: 150px !important;
}
.mt-180 {
  margin-top: 180px !important;
}
.mt-255 {
  margin-top: 255px !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-10 {
  margin-right: 10px !important;
}
.me-15 {
  margin-right: 15px !important;
}
.me-20 {
  margin-right: 20px !important;
}
.me-30 {
  margin-right: 30px !important;
}
.me-45 {
  margin-right: 45px !important;
}
.me-60 {
  margin-right: 60px !important;
}
.me-75 {
  margin-right: 75px !important;
}
.me-90 {
  margin-right: 90px !important;
}
.me-120 {
  margin-right: 120px !important;
}
.me-150 {
  margin-right: 150px !important;
}
.me-180 {
  margin-right: 180px !important;
}
.me-255 {
  margin-right: 255px !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-10 {
  margin-bottom: 10px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.mb-45 {
  margin-bottom: 45px !important;
}
.mb-60 {
  margin-bottom: 60px !important;
}
.mb-75 {
  margin-bottom: 75px !important;
}
.mb-90 {
  margin-bottom: 90px !important;
}
.mb-120 {
  margin-bottom: 120px !important;
}
.mb-150 {
  margin-bottom: 150px !important;
}
.mb-180 {
  margin-bottom: 180px !important;
}
.mb-255 {
  margin-bottom: 255px !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-10 {
  margin-left: 10px !important;
}
.ms-15 {
  margin-left: 15px !important;
}
.ms-20 {
  margin-left: 20px !important;
}
.ms-30 {
  margin-left: 30px !important;
}
.ms-45 {
  margin-left: 45px !important;
}
.ms-60 {
  margin-left: 60px !important;
}
.ms-75 {
  margin-left: 75px !important;
}
.ms-90 {
  margin-left: 90px !important;
}
.ms-120 {
  margin-left: 120px !important;
}
.ms-150 {
  margin-left: 150px !important;
}
.ms-180 {
  margin-left: 180px !important;
}
.ms-255 {
  margin-left: 255px !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;
}
.p-10 {
  padding: 10px !important;
}
.p-15 {
  padding: 15px !important;
}
.p-20 {
  padding: 20px !important;
}
.p-30 {
  padding: 30px !important;
}
.p-45 {
  padding: 45px !important;
}
.p-60 {
  padding: 60px !important;
}
.p-75 {
  padding: 75px !important;
}
.p-90 {
  padding: 90px !important;
}
.p-120 {
  padding: 120px !important;
}
.p-150 {
  padding: 150px !important;
}
.p-180 {
  padding: 180px !important;
}
.p-255 {
  padding: 255px !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;
}
.px-10 {
  padding-right: 10px !important;
  padding-left: 10px !important;
}
.px-15 {
  padding-right: 15px !important;
  padding-left: 15px !important;
}
.px-20 {
  padding-right: 20px !important;
  padding-left: 20px !important;
}
.px-30 {
  padding-right: 30px !important;
  padding-left: 30px !important;
}
.px-45 {
  padding-right: 45px !important;
  padding-left: 45px !important;
}
.px-60 {
  padding-right: 60px !important;
  padding-left: 60px !important;
}
.px-75 {
  padding-right: 75px !important;
  padding-left: 75px !important;
}
.px-90 {
  padding-right: 90px !important;
  padding-left: 90px !important;
}
.px-120 {
  padding-right: 120px !important;
  padding-left: 120px !important;
}
.px-150 {
  padding-right: 150px !important;
  padding-left: 150px !important;
}
.px-180 {
  padding-right: 180px !important;
  padding-left: 180px !important;
}
.px-255 {
  padding-right: 255px !important;
  padding-left: 255px !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;
}
.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.py-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.py-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.py-45 {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}
.py-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.py-75 {
  padding-top: 75px !important;
  padding-bottom: 75px !important;
}
.py-90 {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}
.py-120 {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
.py-150 {
  padding-top: 150px !important;
  padding-bottom: 150px !important;
}
.py-180 {
  padding-top: 180px !important;
  padding-bottom: 180px !important;
}
.py-255 {
  padding-top: 255px !important;
  padding-bottom: 255px !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;
}
.pt-10 {
  padding-top: 10px !important;
}
.pt-15 {
  padding-top: 15px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pt-30 {
  padding-top: 30px !important;
}
.pt-45 {
  padding-top: 45px !important;
}
.pt-60 {
  padding-top: 60px !important;
}
.pt-75 {
  padding-top: 75px !important;
}
.pt-90 {
  padding-top: 90px !important;
}
.pt-120 {
  padding-top: 120px !important;
}
.pt-150 {
  padding-top: 150px !important;
}
.pt-180 {
  padding-top: 180px !important;
}
.pt-255 {
  padding-top: 255px !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;
}
.pe-10 {
  padding-right: 10px !important;
}
.pe-15 {
  padding-right: 15px !important;
}
.pe-20 {
  padding-right: 20px !important;
}
.pe-30 {
  padding-right: 30px !important;
}
.pe-45 {
  padding-right: 45px !important;
}
.pe-60 {
  padding-right: 60px !important;
}
.pe-75 {
  padding-right: 75px !important;
}
.pe-90 {
  padding-right: 90px !important;
}
.pe-120 {
  padding-right: 120px !important;
}
.pe-150 {
  padding-right: 150px !important;
}
.pe-180 {
  padding-right: 180px !important;
}
.pe-255 {
  padding-right: 255px !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;
}
.pb-10 {
  padding-bottom: 10px !important;
}
.pb-15 {
  padding-bottom: 15px !important;
}
.pb-20 {
  padding-bottom: 20px !important;
}
.pb-30 {
  padding-bottom: 30px !important;
}
.pb-45 {
  padding-bottom: 45px !important;
}
.pb-60 {
  padding-bottom: 60px !important;
}
.pb-75 {
  padding-bottom: 75px !important;
}
.pb-90 {
  padding-bottom: 90px !important;
}
.pb-120 {
  padding-bottom: 120px !important;
}
.pb-150 {
  padding-bottom: 150px !important;
}
.pb-180 {
  padding-bottom: 180px !important;
}
.pb-255 {
  padding-bottom: 255px !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;
}
.ps-10 {
  padding-left: 10px !important;
}
.ps-15 {
  padding-left: 15px !important;
}
.ps-20 {
  padding-left: 20px !important;
}
.ps-30 {
  padding-left: 30px !important;
}
.ps-45 {
  padding-left: 45px !important;
}
.ps-60 {
  padding-left: 60px !important;
}
.ps-75 {
  padding-left: 75px !important;
}
.ps-90 {
  padding-left: 90px !important;
}
.ps-120 {
  padding-left: 120px !important;
}
.ps-150 {
  padding-left: 150px !important;
}
.ps-180 {
  padding-left: 180px !important;
}
.ps-255 {
  padding-left: 255px !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;
}
.gap-10 {
  gap: 10px !important;
}
.gap-15 {
  gap: 15px !important;
}
.gap-20 {
  gap: 20px !important;
}
.gap-30 {
  gap: 30px !important;
}
.gap-45 {
  gap: 45px !important;
}
.gap-60 {
  gap: 60px !important;
}
.gap-75 {
  gap: 75px !important;
}
.gap-90 {
  gap: 90px !important;
}
.gap-120 {
  gap: 120px !important;
}
.gap-150 {
  gap: 150px !important;
}
.gap-180 {
  gap: 180px !important;
}
.gap-255 {
  gap: 255px !important;
}
.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}
.fs-1 {
  font-size: calc(1.375rem + 1.1842105263vw) !important;
}
.fs-2 {
  font-size: calc(1.35rem + 0.9473684211vw) !important;
}
.fs-3 {
  font-size: calc(1.325rem + 0.7105263158vw) !important;
}
.fs-4 {
  font-size: calc(1.275rem + 0.2368421053vw) !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-semibold {
  font-weight: 600 !important;
}
.fw-bolder {
  font-weight: bolder !important;
}
.lh-1 {
  line-height: 1 !important;
}
.lh-sm {
  line-height: 1.6 !important;
}
.lh-base {
  line-height: 1.6 !important;
}
.lh-lg {
  line-height: 1.6 !important;
}
.text-start {
  text-align: left !important;
}
.text-end {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
.text-decoration-none {
  text-decoration: none !important;
}
.text-decoration-underline {
  text-decoration: underline !important;
}
.text-decoration-line-through {
  text-decoration: line-through !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}
.text-wrap {
  white-space: normal !important;
}
.text-nowrap {
  white-space: nowrap !important;
}
/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
.text-tertiary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-tertiary-rgb), var(--bs-text-opacity)) !important;
}
.text-quaternary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-quaternary-rgb), var(--bs-text-opacity)) !important;
}
.text-quinary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-quinary-rgb), var(--bs-text-opacity)) !important;
}
.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-100 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-100-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-200 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-200-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-300 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-300-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-400 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-400-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-500 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-500-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-600 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-600-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-700 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-700-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-800 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-800-rgb), var(--bs-text-opacity)) !important;
}
.text-gray-900 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-gray-900-rgb), var(--bs-text-opacity)) !important;
}
.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}
.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}
.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}
.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}
.text-muted {
  --bs-text-opacity: 1;
  color: #6c757d !important;
}
.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}
.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}
.text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}
.text-opacity-25 {
  --bs-text-opacity: 0.25;
}
.text-opacity-50 {
  --bs-text-opacity: 0.5;
}
.text-opacity-75 {
  --bs-text-opacity: 0.75;
}
.text-opacity-100 {
  --bs-text-opacity: 1;
}
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-quaternary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-quaternary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-quinary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-quinary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-100 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-100-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-200 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-200-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-300 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-300-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-400 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-400-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-500 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-500-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-600 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-600-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-700 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-700-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-800 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-800-rgb), var(--bs-bg-opacity)) !important;
}
.bg-gray-900 {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-gray-900-rgb), var(--bs-bg-opacity)) !important;
}
.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}
.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}
.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}
.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}
.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}
.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}
.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}
.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}
.bg-opacity-100 {
  --bs-bg-opacity: 1;
}
.bg-gradient {
  background-image: var(--bs-gradient) !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: var(--bs-border-radius) !important;
}
.rounded-0 {
  border-radius: 0 !important;
}
.rounded-1 {
  border-radius: var(--bs-border-radius-sm) !important;
}
.rounded-2 {
  border-radius: var(--bs-border-radius) !important;
}
.rounded-3 {
  border-radius: var(--bs-border-radius-lg) !important;
}
.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}
.rounded-5 {
  border-radius: var(--bs-border-radius-2xl) !important;
}
.rounded-circle {
  border-radius: 50% !important;
}
.rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}
.rounded-top {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}
.rounded-end {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}
.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !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;
  }
  .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-10 {
    margin: 10px !important;
  }
  .m-sm-15 {
    margin: 15px !important;
  }
  .m-sm-20 {
    margin: 20px !important;
  }
  .m-sm-30 {
    margin: 30px !important;
  }
  .m-sm-45 {
    margin: 45px !important;
  }
  .m-sm-60 {
    margin: 60px !important;
  }
  .m-sm-75 {
    margin: 75px !important;
  }
  .m-sm-90 {
    margin: 90px !important;
  }
  .m-sm-120 {
    margin: 120px !important;
  }
  .m-sm-150 {
    margin: 150px !important;
  }
  .m-sm-180 {
    margin: 180px !important;
  }
  .m-sm-255 {
    margin: 255px !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-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
  .mx-sm-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .mx-sm-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }
  .mx-sm-30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
  .mx-sm-45 {
    margin-right: 45px !important;
    margin-left: 45px !important;
  }
  .mx-sm-60 {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }
  .mx-sm-75 {
    margin-right: 75px !important;
    margin-left: 75px !important;
  }
  .mx-sm-90 {
    margin-right: 90px !important;
    margin-left: 90px !important;
  }
  .mx-sm-120 {
    margin-right: 120px !important;
    margin-left: 120px !important;
  }
  .mx-sm-150 {
    margin-right: 150px !important;
    margin-left: 150px !important;
  }
  .mx-sm-180 {
    margin-right: 180px !important;
    margin-left: 180px !important;
  }
  .mx-sm-255 {
    margin-right: 255px !important;
    margin-left: 255px !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-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .my-sm-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .my-sm-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .my-sm-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .my-sm-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .my-sm-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .my-sm-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }
  .my-sm-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }
  .my-sm-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .my-sm-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }
  .my-sm-180 {
    margin-top: 180px !important;
    margin-bottom: 180px !important;
  }
  .my-sm-255 {
    margin-top: 255px !important;
    margin-bottom: 255px !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-10 {
    margin-top: 10px !important;
  }
  .mt-sm-15 {
    margin-top: 15px !important;
  }
  .mt-sm-20 {
    margin-top: 20px !important;
  }
  .mt-sm-30 {
    margin-top: 30px !important;
  }
  .mt-sm-45 {
    margin-top: 45px !important;
  }
  .mt-sm-60 {
    margin-top: 60px !important;
  }
  .mt-sm-75 {
    margin-top: 75px !important;
  }
  .mt-sm-90 {
    margin-top: 90px !important;
  }
  .mt-sm-120 {
    margin-top: 120px !important;
  }
  .mt-sm-150 {
    margin-top: 150px !important;
  }
  .mt-sm-180 {
    margin-top: 180px !important;
  }
  .mt-sm-255 {
    margin-top: 255px !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-10 {
    margin-right: 10px !important;
  }
  .me-sm-15 {
    margin-right: 15px !important;
  }
  .me-sm-20 {
    margin-right: 20px !important;
  }
  .me-sm-30 {
    margin-right: 30px !important;
  }
  .me-sm-45 {
    margin-right: 45px !important;
  }
  .me-sm-60 {
    margin-right: 60px !important;
  }
  .me-sm-75 {
    margin-right: 75px !important;
  }
  .me-sm-90 {
    margin-right: 90px !important;
  }
  .me-sm-120 {
    margin-right: 120px !important;
  }
  .me-sm-150 {
    margin-right: 150px !important;
  }
  .me-sm-180 {
    margin-right: 180px !important;
  }
  .me-sm-255 {
    margin-right: 255px !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-10 {
    margin-bottom: 10px !important;
  }
  .mb-sm-15 {
    margin-bottom: 15px !important;
  }
  .mb-sm-20 {
    margin-bottom: 20px !important;
  }
  .mb-sm-30 {
    margin-bottom: 30px !important;
  }
  .mb-sm-45 {
    margin-bottom: 45px !important;
  }
  .mb-sm-60 {
    margin-bottom: 60px !important;
  }
  .mb-sm-75 {
    margin-bottom: 75px !important;
  }
  .mb-sm-90 {
    margin-bottom: 90px !important;
  }
  .mb-sm-120 {
    margin-bottom: 120px !important;
  }
  .mb-sm-150 {
    margin-bottom: 150px !important;
  }
  .mb-sm-180 {
    margin-bottom: 180px !important;
  }
  .mb-sm-255 {
    margin-bottom: 255px !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-10 {
    margin-left: 10px !important;
  }
  .ms-sm-15 {
    margin-left: 15px !important;
  }
  .ms-sm-20 {
    margin-left: 20px !important;
  }
  .ms-sm-30 {
    margin-left: 30px !important;
  }
  .ms-sm-45 {
    margin-left: 45px !important;
  }
  .ms-sm-60 {
    margin-left: 60px !important;
  }
  .ms-sm-75 {
    margin-left: 75px !important;
  }
  .ms-sm-90 {
    margin-left: 90px !important;
  }
  .ms-sm-120 {
    margin-left: 120px !important;
  }
  .ms-sm-150 {
    margin-left: 150px !important;
  }
  .ms-sm-180 {
    margin-left: 180px !important;
  }
  .ms-sm-255 {
    margin-left: 255px !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;
  }
  .p-sm-10 {
    padding: 10px !important;
  }
  .p-sm-15 {
    padding: 15px !important;
  }
  .p-sm-20 {
    padding: 20px !important;
  }
  .p-sm-30 {
    padding: 30px !important;
  }
  .p-sm-45 {
    padding: 45px !important;
  }
  .p-sm-60 {
    padding: 60px !important;
  }
  .p-sm-75 {
    padding: 75px !important;
  }
  .p-sm-90 {
    padding: 90px !important;
  }
  .p-sm-120 {
    padding: 120px !important;
  }
  .p-sm-150 {
    padding: 150px !important;
  }
  .p-sm-180 {
    padding: 180px !important;
  }
  .p-sm-255 {
    padding: 255px !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;
  }
  .px-sm-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .px-sm-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .px-sm-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .px-sm-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
  .px-sm-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
  }
  .px-sm-60 {
    padding-right: 60px !important;
    padding-left: 60px !important;
  }
  .px-sm-75 {
    padding-right: 75px !important;
    padding-left: 75px !important;
  }
  .px-sm-90 {
    padding-right: 90px !important;
    padding-left: 90px !important;
  }
  .px-sm-120 {
    padding-right: 120px !important;
    padding-left: 120px !important;
  }
  .px-sm-150 {
    padding-right: 150px !important;
    padding-left: 150px !important;
  }
  .px-sm-180 {
    padding-right: 180px !important;
    padding-left: 180px !important;
  }
  .px-sm-255 {
    padding-right: 255px !important;
    padding-left: 255px !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;
  }
  .py-sm-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .py-sm-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .py-sm-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .py-sm-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .py-sm-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  .py-sm-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .py-sm-75 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }
  .py-sm-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
  .py-sm-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .py-sm-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
  .py-sm-180 {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }
  .py-sm-255 {
    padding-top: 255px !important;
    padding-bottom: 255px !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;
  }
  .pt-sm-10 {
    padding-top: 10px !important;
  }
  .pt-sm-15 {
    padding-top: 15px !important;
  }
  .pt-sm-20 {
    padding-top: 20px !important;
  }
  .pt-sm-30 {
    padding-top: 30px !important;
  }
  .pt-sm-45 {
    padding-top: 45px !important;
  }
  .pt-sm-60 {
    padding-top: 60px !important;
  }
  .pt-sm-75 {
    padding-top: 75px !important;
  }
  .pt-sm-90 {
    padding-top: 90px !important;
  }
  .pt-sm-120 {
    padding-top: 120px !important;
  }
  .pt-sm-150 {
    padding-top: 150px !important;
  }
  .pt-sm-180 {
    padding-top: 180px !important;
  }
  .pt-sm-255 {
    padding-top: 255px !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;
  }
  .pe-sm-10 {
    padding-right: 10px !important;
  }
  .pe-sm-15 {
    padding-right: 15px !important;
  }
  .pe-sm-20 {
    padding-right: 20px !important;
  }
  .pe-sm-30 {
    padding-right: 30px !important;
  }
  .pe-sm-45 {
    padding-right: 45px !important;
  }
  .pe-sm-60 {
    padding-right: 60px !important;
  }
  .pe-sm-75 {
    padding-right: 75px !important;
  }
  .pe-sm-90 {
    padding-right: 90px !important;
  }
  .pe-sm-120 {
    padding-right: 120px !important;
  }
  .pe-sm-150 {
    padding-right: 150px !important;
  }
  .pe-sm-180 {
    padding-right: 180px !important;
  }
  .pe-sm-255 {
    padding-right: 255px !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;
  }
  .pb-sm-10 {
    padding-bottom: 10px !important;
  }
  .pb-sm-15 {
    padding-bottom: 15px !important;
  }
  .pb-sm-20 {
    padding-bottom: 20px !important;
  }
  .pb-sm-30 {
    padding-bottom: 30px !important;
  }
  .pb-sm-45 {
    padding-bottom: 45px !important;
  }
  .pb-sm-60 {
    padding-bottom: 60px !important;
  }
  .pb-sm-75 {
    padding-bottom: 75px !important;
  }
  .pb-sm-90 {
    padding-bottom: 90px !important;
  }
  .pb-sm-120 {
    padding-bottom: 120px !important;
  }
  .pb-sm-150 {
    padding-bottom: 150px !important;
  }
  .pb-sm-180 {
    padding-bottom: 180px !important;
  }
  .pb-sm-255 {
    padding-bottom: 255px !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;
  }
  .ps-sm-10 {
    padding-left: 10px !important;
  }
  .ps-sm-15 {
    padding-left: 15px !important;
  }
  .ps-sm-20 {
    padding-left: 20px !important;
  }
  .ps-sm-30 {
    padding-left: 30px !important;
  }
  .ps-sm-45 {
    padding-left: 45px !important;
  }
  .ps-sm-60 {
    padding-left: 60px !important;
  }
  .ps-sm-75 {
    padding-left: 75px !important;
  }
  .ps-sm-90 {
    padding-left: 90px !important;
  }
  .ps-sm-120 {
    padding-left: 120px !important;
  }
  .ps-sm-150 {
    padding-left: 150px !important;
  }
  .ps-sm-180 {
    padding-left: 180px !important;
  }
  .ps-sm-255 {
    padding-left: 255px !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;
  }
  .gap-sm-10 {
    gap: 10px !important;
  }
  .gap-sm-15 {
    gap: 15px !important;
  }
  .gap-sm-20 {
    gap: 20px !important;
  }
  .gap-sm-30 {
    gap: 30px !important;
  }
  .gap-sm-45 {
    gap: 45px !important;
  }
  .gap-sm-60 {
    gap: 60px !important;
  }
  .gap-sm-75 {
    gap: 75px !important;
  }
  .gap-sm-90 {
    gap: 90px !important;
  }
  .gap-sm-120 {
    gap: 120px !important;
  }
  .gap-sm-150 {
    gap: 150px !important;
  }
  .gap-sm-180 {
    gap: 180px !important;
  }
  .gap-sm-255 {
    gap: 255px !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;
  }
  .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-10 {
    margin: 10px !important;
  }
  .m-md-15 {
    margin: 15px !important;
  }
  .m-md-20 {
    margin: 20px !important;
  }
  .m-md-30 {
    margin: 30px !important;
  }
  .m-md-45 {
    margin: 45px !important;
  }
  .m-md-60 {
    margin: 60px !important;
  }
  .m-md-75 {
    margin: 75px !important;
  }
  .m-md-90 {
    margin: 90px !important;
  }
  .m-md-120 {
    margin: 120px !important;
  }
  .m-md-150 {
    margin: 150px !important;
  }
  .m-md-180 {
    margin: 180px !important;
  }
  .m-md-255 {
    margin: 255px !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-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
  .mx-md-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .mx-md-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }
  .mx-md-30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
  .mx-md-45 {
    margin-right: 45px !important;
    margin-left: 45px !important;
  }
  .mx-md-60 {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }
  .mx-md-75 {
    margin-right: 75px !important;
    margin-left: 75px !important;
  }
  .mx-md-90 {
    margin-right: 90px !important;
    margin-left: 90px !important;
  }
  .mx-md-120 {
    margin-right: 120px !important;
    margin-left: 120px !important;
  }
  .mx-md-150 {
    margin-right: 150px !important;
    margin-left: 150px !important;
  }
  .mx-md-180 {
    margin-right: 180px !important;
    margin-left: 180px !important;
  }
  .mx-md-255 {
    margin-right: 255px !important;
    margin-left: 255px !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-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .my-md-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .my-md-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .my-md-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .my-md-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .my-md-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .my-md-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }
  .my-md-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }
  .my-md-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .my-md-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }
  .my-md-180 {
    margin-top: 180px !important;
    margin-bottom: 180px !important;
  }
  .my-md-255 {
    margin-top: 255px !important;
    margin-bottom: 255px !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-10 {
    margin-top: 10px !important;
  }
  .mt-md-15 {
    margin-top: 15px !important;
  }
  .mt-md-20 {
    margin-top: 20px !important;
  }
  .mt-md-30 {
    margin-top: 30px !important;
  }
  .mt-md-45 {
    margin-top: 45px !important;
  }
  .mt-md-60 {
    margin-top: 60px !important;
  }
  .mt-md-75 {
    margin-top: 75px !important;
  }
  .mt-md-90 {
    margin-top: 90px !important;
  }
  .mt-md-120 {
    margin-top: 120px !important;
  }
  .mt-md-150 {
    margin-top: 150px !important;
  }
  .mt-md-180 {
    margin-top: 180px !important;
  }
  .mt-md-255 {
    margin-top: 255px !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-10 {
    margin-right: 10px !important;
  }
  .me-md-15 {
    margin-right: 15px !important;
  }
  .me-md-20 {
    margin-right: 20px !important;
  }
  .me-md-30 {
    margin-right: 30px !important;
  }
  .me-md-45 {
    margin-right: 45px !important;
  }
  .me-md-60 {
    margin-right: 60px !important;
  }
  .me-md-75 {
    margin-right: 75px !important;
  }
  .me-md-90 {
    margin-right: 90px !important;
  }
  .me-md-120 {
    margin-right: 120px !important;
  }
  .me-md-150 {
    margin-right: 150px !important;
  }
  .me-md-180 {
    margin-right: 180px !important;
  }
  .me-md-255 {
    margin-right: 255px !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-10 {
    margin-bottom: 10px !important;
  }
  .mb-md-15 {
    margin-bottom: 15px !important;
  }
  .mb-md-20 {
    margin-bottom: 20px !important;
  }
  .mb-md-30 {
    margin-bottom: 30px !important;
  }
  .mb-md-45 {
    margin-bottom: 45px !important;
  }
  .mb-md-60 {
    margin-bottom: 60px !important;
  }
  .mb-md-75 {
    margin-bottom: 75px !important;
  }
  .mb-md-90 {
    margin-bottom: 90px !important;
  }
  .mb-md-120 {
    margin-bottom: 120px !important;
  }
  .mb-md-150 {
    margin-bottom: 150px !important;
  }
  .mb-md-180 {
    margin-bottom: 180px !important;
  }
  .mb-md-255 {
    margin-bottom: 255px !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-10 {
    margin-left: 10px !important;
  }
  .ms-md-15 {
    margin-left: 15px !important;
  }
  .ms-md-20 {
    margin-left: 20px !important;
  }
  .ms-md-30 {
    margin-left: 30px !important;
  }
  .ms-md-45 {
    margin-left: 45px !important;
  }
  .ms-md-60 {
    margin-left: 60px !important;
  }
  .ms-md-75 {
    margin-left: 75px !important;
  }
  .ms-md-90 {
    margin-left: 90px !important;
  }
  .ms-md-120 {
    margin-left: 120px !important;
  }
  .ms-md-150 {
    margin-left: 150px !important;
  }
  .ms-md-180 {
    margin-left: 180px !important;
  }
  .ms-md-255 {
    margin-left: 255px !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;
  }
  .p-md-10 {
    padding: 10px !important;
  }
  .p-md-15 {
    padding: 15px !important;
  }
  .p-md-20 {
    padding: 20px !important;
  }
  .p-md-30 {
    padding: 30px !important;
  }
  .p-md-45 {
    padding: 45px !important;
  }
  .p-md-60 {
    padding: 60px !important;
  }
  .p-md-75 {
    padding: 75px !important;
  }
  .p-md-90 {
    padding: 90px !important;
  }
  .p-md-120 {
    padding: 120px !important;
  }
  .p-md-150 {
    padding: 150px !important;
  }
  .p-md-180 {
    padding: 180px !important;
  }
  .p-md-255 {
    padding: 255px !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;
  }
  .px-md-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .px-md-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .px-md-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .px-md-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
  .px-md-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
  }
  .px-md-60 {
    padding-right: 60px !important;
    padding-left: 60px !important;
  }
  .px-md-75 {
    padding-right: 75px !important;
    padding-left: 75px !important;
  }
  .px-md-90 {
    padding-right: 90px !important;
    padding-left: 90px !important;
  }
  .px-md-120 {
    padding-right: 120px !important;
    padding-left: 120px !important;
  }
  .px-md-150 {
    padding-right: 150px !important;
    padding-left: 150px !important;
  }
  .px-md-180 {
    padding-right: 180px !important;
    padding-left: 180px !important;
  }
  .px-md-255 {
    padding-right: 255px !important;
    padding-left: 255px !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;
  }
  .py-md-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .py-md-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .py-md-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .py-md-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .py-md-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  .py-md-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .py-md-75 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }
  .py-md-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
  .py-md-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .py-md-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
  .py-md-180 {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }
  .py-md-255 {
    padding-top: 255px !important;
    padding-bottom: 255px !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;
  }
  .pt-md-10 {
    padding-top: 10px !important;
  }
  .pt-md-15 {
    padding-top: 15px !important;
  }
  .pt-md-20 {
    padding-top: 20px !important;
  }
  .pt-md-30 {
    padding-top: 30px !important;
  }
  .pt-md-45 {
    padding-top: 45px !important;
  }
  .pt-md-60 {
    padding-top: 60px !important;
  }
  .pt-md-75 {
    padding-top: 75px !important;
  }
  .pt-md-90 {
    padding-top: 90px !important;
  }
  .pt-md-120 {
    padding-top: 120px !important;
  }
  .pt-md-150 {
    padding-top: 150px !important;
  }
  .pt-md-180 {
    padding-top: 180px !important;
  }
  .pt-md-255 {
    padding-top: 255px !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;
  }
  .pe-md-10 {
    padding-right: 10px !important;
  }
  .pe-md-15 {
    padding-right: 15px !important;
  }
  .pe-md-20 {
    padding-right: 20px !important;
  }
  .pe-md-30 {
    padding-right: 30px !important;
  }
  .pe-md-45 {
    padding-right: 45px !important;
  }
  .pe-md-60 {
    padding-right: 60px !important;
  }
  .pe-md-75 {
    padding-right: 75px !important;
  }
  .pe-md-90 {
    padding-right: 90px !important;
  }
  .pe-md-120 {
    padding-right: 120px !important;
  }
  .pe-md-150 {
    padding-right: 150px !important;
  }
  .pe-md-180 {
    padding-right: 180px !important;
  }
  .pe-md-255 {
    padding-right: 255px !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;
  }
  .pb-md-10 {
    padding-bottom: 10px !important;
  }
  .pb-md-15 {
    padding-bottom: 15px !important;
  }
  .pb-md-20 {
    padding-bottom: 20px !important;
  }
  .pb-md-30 {
    padding-bottom: 30px !important;
  }
  .pb-md-45 {
    padding-bottom: 45px !important;
  }
  .pb-md-60 {
    padding-bottom: 60px !important;
  }
  .pb-md-75 {
    padding-bottom: 75px !important;
  }
  .pb-md-90 {
    padding-bottom: 90px !important;
  }
  .pb-md-120 {
    padding-bottom: 120px !important;
  }
  .pb-md-150 {
    padding-bottom: 150px !important;
  }
  .pb-md-180 {
    padding-bottom: 180px !important;
  }
  .pb-md-255 {
    padding-bottom: 255px !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;
  }
  .ps-md-10 {
    padding-left: 10px !important;
  }
  .ps-md-15 {
    padding-left: 15px !important;
  }
  .ps-md-20 {
    padding-left: 20px !important;
  }
  .ps-md-30 {
    padding-left: 30px !important;
  }
  .ps-md-45 {
    padding-left: 45px !important;
  }
  .ps-md-60 {
    padding-left: 60px !important;
  }
  .ps-md-75 {
    padding-left: 75px !important;
  }
  .ps-md-90 {
    padding-left: 90px !important;
  }
  .ps-md-120 {
    padding-left: 120px !important;
  }
  .ps-md-150 {
    padding-left: 150px !important;
  }
  .ps-md-180 {
    padding-left: 180px !important;
  }
  .ps-md-255 {
    padding-left: 255px !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;
  }
  .gap-md-10 {
    gap: 10px !important;
  }
  .gap-md-15 {
    gap: 15px !important;
  }
  .gap-md-20 {
    gap: 20px !important;
  }
  .gap-md-30 {
    gap: 30px !important;
  }
  .gap-md-45 {
    gap: 45px !important;
  }
  .gap-md-60 {
    gap: 60px !important;
  }
  .gap-md-75 {
    gap: 75px !important;
  }
  .gap-md-90 {
    gap: 90px !important;
  }
  .gap-md-120 {
    gap: 120px !important;
  }
  .gap-md-150 {
    gap: 150px !important;
  }
  .gap-md-180 {
    gap: 180px !important;
  }
  .gap-md-255 {
    gap: 255px !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;
  }
  .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-10 {
    margin: 10px !important;
  }
  .m-lg-15 {
    margin: 15px !important;
  }
  .m-lg-20 {
    margin: 20px !important;
  }
  .m-lg-30 {
    margin: 30px !important;
  }
  .m-lg-45 {
    margin: 45px !important;
  }
  .m-lg-60 {
    margin: 60px !important;
  }
  .m-lg-75 {
    margin: 75px !important;
  }
  .m-lg-90 {
    margin: 90px !important;
  }
  .m-lg-120 {
    margin: 120px !important;
  }
  .m-lg-150 {
    margin: 150px !important;
  }
  .m-lg-180 {
    margin: 180px !important;
  }
  .m-lg-255 {
    margin: 255px !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-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
  .mx-lg-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .mx-lg-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }
  .mx-lg-30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
  .mx-lg-45 {
    margin-right: 45px !important;
    margin-left: 45px !important;
  }
  .mx-lg-60 {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }
  .mx-lg-75 {
    margin-right: 75px !important;
    margin-left: 75px !important;
  }
  .mx-lg-90 {
    margin-right: 90px !important;
    margin-left: 90px !important;
  }
  .mx-lg-120 {
    margin-right: 120px !important;
    margin-left: 120px !important;
  }
  .mx-lg-150 {
    margin-right: 150px !important;
    margin-left: 150px !important;
  }
  .mx-lg-180 {
    margin-right: 180px !important;
    margin-left: 180px !important;
  }
  .mx-lg-255 {
    margin-right: 255px !important;
    margin-left: 255px !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-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .my-lg-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .my-lg-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .my-lg-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .my-lg-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .my-lg-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .my-lg-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }
  .my-lg-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }
  .my-lg-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .my-lg-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }
  .my-lg-180 {
    margin-top: 180px !important;
    margin-bottom: 180px !important;
  }
  .my-lg-255 {
    margin-top: 255px !important;
    margin-bottom: 255px !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-10 {
    margin-top: 10px !important;
  }
  .mt-lg-15 {
    margin-top: 15px !important;
  }
  .mt-lg-20 {
    margin-top: 20px !important;
  }
  .mt-lg-30 {
    margin-top: 30px !important;
  }
  .mt-lg-45 {
    margin-top: 45px !important;
  }
  .mt-lg-60 {
    margin-top: 60px !important;
  }
  .mt-lg-75 {
    margin-top: 75px !important;
  }
  .mt-lg-90 {
    margin-top: 90px !important;
  }
  .mt-lg-120 {
    margin-top: 120px !important;
  }
  .mt-lg-150 {
    margin-top: 150px !important;
  }
  .mt-lg-180 {
    margin-top: 180px !important;
  }
  .mt-lg-255 {
    margin-top: 255px !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-10 {
    margin-right: 10px !important;
  }
  .me-lg-15 {
    margin-right: 15px !important;
  }
  .me-lg-20 {
    margin-right: 20px !important;
  }
  .me-lg-30 {
    margin-right: 30px !important;
  }
  .me-lg-45 {
    margin-right: 45px !important;
  }
  .me-lg-60 {
    margin-right: 60px !important;
  }
  .me-lg-75 {
    margin-right: 75px !important;
  }
  .me-lg-90 {
    margin-right: 90px !important;
  }
  .me-lg-120 {
    margin-right: 120px !important;
  }
  .me-lg-150 {
    margin-right: 150px !important;
  }
  .me-lg-180 {
    margin-right: 180px !important;
  }
  .me-lg-255 {
    margin-right: 255px !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-10 {
    margin-bottom: 10px !important;
  }
  .mb-lg-15 {
    margin-bottom: 15px !important;
  }
  .mb-lg-20 {
    margin-bottom: 20px !important;
  }
  .mb-lg-30 {
    margin-bottom: 30px !important;
  }
  .mb-lg-45 {
    margin-bottom: 45px !important;
  }
  .mb-lg-60 {
    margin-bottom: 60px !important;
  }
  .mb-lg-75 {
    margin-bottom: 75px !important;
  }
  .mb-lg-90 {
    margin-bottom: 90px !important;
  }
  .mb-lg-120 {
    margin-bottom: 120px !important;
  }
  .mb-lg-150 {
    margin-bottom: 150px !important;
  }
  .mb-lg-180 {
    margin-bottom: 180px !important;
  }
  .mb-lg-255 {
    margin-bottom: 255px !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-10 {
    margin-left: 10px !important;
  }
  .ms-lg-15 {
    margin-left: 15px !important;
  }
  .ms-lg-20 {
    margin-left: 20px !important;
  }
  .ms-lg-30 {
    margin-left: 30px !important;
  }
  .ms-lg-45 {
    margin-left: 45px !important;
  }
  .ms-lg-60 {
    margin-left: 60px !important;
  }
  .ms-lg-75 {
    margin-left: 75px !important;
  }
  .ms-lg-90 {
    margin-left: 90px !important;
  }
  .ms-lg-120 {
    margin-left: 120px !important;
  }
  .ms-lg-150 {
    margin-left: 150px !important;
  }
  .ms-lg-180 {
    margin-left: 180px !important;
  }
  .ms-lg-255 {
    margin-left: 255px !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;
  }
  .p-lg-10 {
    padding: 10px !important;
  }
  .p-lg-15 {
    padding: 15px !important;
  }
  .p-lg-20 {
    padding: 20px !important;
  }
  .p-lg-30 {
    padding: 30px !important;
  }
  .p-lg-45 {
    padding: 45px !important;
  }
  .p-lg-60 {
    padding: 60px !important;
  }
  .p-lg-75 {
    padding: 75px !important;
  }
  .p-lg-90 {
    padding: 90px !important;
  }
  .p-lg-120 {
    padding: 120px !important;
  }
  .p-lg-150 {
    padding: 150px !important;
  }
  .p-lg-180 {
    padding: 180px !important;
  }
  .p-lg-255 {
    padding: 255px !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;
  }
  .px-lg-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .px-lg-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .px-lg-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .px-lg-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
  .px-lg-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
  }
  .px-lg-60 {
    padding-right: 60px !important;
    padding-left: 60px !important;
  }
  .px-lg-75 {
    padding-right: 75px !important;
    padding-left: 75px !important;
  }
  .px-lg-90 {
    padding-right: 90px !important;
    padding-left: 90px !important;
  }
  .px-lg-120 {
    padding-right: 120px !important;
    padding-left: 120px !important;
  }
  .px-lg-150 {
    padding-right: 150px !important;
    padding-left: 150px !important;
  }
  .px-lg-180 {
    padding-right: 180px !important;
    padding-left: 180px !important;
  }
  .px-lg-255 {
    padding-right: 255px !important;
    padding-left: 255px !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;
  }
  .py-lg-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .py-lg-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .py-lg-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .py-lg-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .py-lg-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  .py-lg-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .py-lg-75 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }
  .py-lg-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
  .py-lg-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .py-lg-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
  .py-lg-180 {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }
  .py-lg-255 {
    padding-top: 255px !important;
    padding-bottom: 255px !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;
  }
  .pt-lg-10 {
    padding-top: 10px !important;
  }
  .pt-lg-15 {
    padding-top: 15px !important;
  }
  .pt-lg-20 {
    padding-top: 20px !important;
  }
  .pt-lg-30 {
    padding-top: 30px !important;
  }
  .pt-lg-45 {
    padding-top: 45px !important;
  }
  .pt-lg-60 {
    padding-top: 60px !important;
  }
  .pt-lg-75 {
    padding-top: 75px !important;
  }
  .pt-lg-90 {
    padding-top: 90px !important;
  }
  .pt-lg-120 {
    padding-top: 120px !important;
  }
  .pt-lg-150 {
    padding-top: 150px !important;
  }
  .pt-lg-180 {
    padding-top: 180px !important;
  }
  .pt-lg-255 {
    padding-top: 255px !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;
  }
  .pe-lg-10 {
    padding-right: 10px !important;
  }
  .pe-lg-15 {
    padding-right: 15px !important;
  }
  .pe-lg-20 {
    padding-right: 20px !important;
  }
  .pe-lg-30 {
    padding-right: 30px !important;
  }
  .pe-lg-45 {
    padding-right: 45px !important;
  }
  .pe-lg-60 {
    padding-right: 60px !important;
  }
  .pe-lg-75 {
    padding-right: 75px !important;
  }
  .pe-lg-90 {
    padding-right: 90px !important;
  }
  .pe-lg-120 {
    padding-right: 120px !important;
  }
  .pe-lg-150 {
    padding-right: 150px !important;
  }
  .pe-lg-180 {
    padding-right: 180px !important;
  }
  .pe-lg-255 {
    padding-right: 255px !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;
  }
  .pb-lg-10 {
    padding-bottom: 10px !important;
  }
  .pb-lg-15 {
    padding-bottom: 15px !important;
  }
  .pb-lg-20 {
    padding-bottom: 20px !important;
  }
  .pb-lg-30 {
    padding-bottom: 30px !important;
  }
  .pb-lg-45 {
    padding-bottom: 45px !important;
  }
  .pb-lg-60 {
    padding-bottom: 60px !important;
  }
  .pb-lg-75 {
    padding-bottom: 75px !important;
  }
  .pb-lg-90 {
    padding-bottom: 90px !important;
  }
  .pb-lg-120 {
    padding-bottom: 120px !important;
  }
  .pb-lg-150 {
    padding-bottom: 150px !important;
  }
  .pb-lg-180 {
    padding-bottom: 180px !important;
  }
  .pb-lg-255 {
    padding-bottom: 255px !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;
  }
  .ps-lg-10 {
    padding-left: 10px !important;
  }
  .ps-lg-15 {
    padding-left: 15px !important;
  }
  .ps-lg-20 {
    padding-left: 20px !important;
  }
  .ps-lg-30 {
    padding-left: 30px !important;
  }
  .ps-lg-45 {
    padding-left: 45px !important;
  }
  .ps-lg-60 {
    padding-left: 60px !important;
  }
  .ps-lg-75 {
    padding-left: 75px !important;
  }
  .ps-lg-90 {
    padding-left: 90px !important;
  }
  .ps-lg-120 {
    padding-left: 120px !important;
  }
  .ps-lg-150 {
    padding-left: 150px !important;
  }
  .ps-lg-180 {
    padding-left: 180px !important;
  }
  .ps-lg-255 {
    padding-left: 255px !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;
  }
  .gap-lg-10 {
    gap: 10px !important;
  }
  .gap-lg-15 {
    gap: 15px !important;
  }
  .gap-lg-20 {
    gap: 20px !important;
  }
  .gap-lg-30 {
    gap: 30px !important;
  }
  .gap-lg-45 {
    gap: 45px !important;
  }
  .gap-lg-60 {
    gap: 60px !important;
  }
  .gap-lg-75 {
    gap: 75px !important;
  }
  .gap-lg-90 {
    gap: 90px !important;
  }
  .gap-lg-120 {
    gap: 120px !important;
  }
  .gap-lg-150 {
    gap: 150px !important;
  }
  .gap-lg-180 {
    gap: 180px !important;
  }
  .gap-lg-255 {
    gap: 255px !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;
  }
  .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-10 {
    margin: 10px !important;
  }
  .m-xl-15 {
    margin: 15px !important;
  }
  .m-xl-20 {
    margin: 20px !important;
  }
  .m-xl-30 {
    margin: 30px !important;
  }
  .m-xl-45 {
    margin: 45px !important;
  }
  .m-xl-60 {
    margin: 60px !important;
  }
  .m-xl-75 {
    margin: 75px !important;
  }
  .m-xl-90 {
    margin: 90px !important;
  }
  .m-xl-120 {
    margin: 120px !important;
  }
  .m-xl-150 {
    margin: 150px !important;
  }
  .m-xl-180 {
    margin: 180px !important;
  }
  .m-xl-255 {
    margin: 255px !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-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
  .mx-xl-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .mx-xl-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }
  .mx-xl-30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
  .mx-xl-45 {
    margin-right: 45px !important;
    margin-left: 45px !important;
  }
  .mx-xl-60 {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }
  .mx-xl-75 {
    margin-right: 75px !important;
    margin-left: 75px !important;
  }
  .mx-xl-90 {
    margin-right: 90px !important;
    margin-left: 90px !important;
  }
  .mx-xl-120 {
    margin-right: 120px !important;
    margin-left: 120px !important;
  }
  .mx-xl-150 {
    margin-right: 150px !important;
    margin-left: 150px !important;
  }
  .mx-xl-180 {
    margin-right: 180px !important;
    margin-left: 180px !important;
  }
  .mx-xl-255 {
    margin-right: 255px !important;
    margin-left: 255px !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-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .my-xl-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .my-xl-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .my-xl-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .my-xl-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .my-xl-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .my-xl-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }
  .my-xl-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }
  .my-xl-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .my-xl-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }
  .my-xl-180 {
    margin-top: 180px !important;
    margin-bottom: 180px !important;
  }
  .my-xl-255 {
    margin-top: 255px !important;
    margin-bottom: 255px !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-10 {
    margin-top: 10px !important;
  }
  .mt-xl-15 {
    margin-top: 15px !important;
  }
  .mt-xl-20 {
    margin-top: 20px !important;
  }
  .mt-xl-30 {
    margin-top: 30px !important;
  }
  .mt-xl-45 {
    margin-top: 45px !important;
  }
  .mt-xl-60 {
    margin-top: 60px !important;
  }
  .mt-xl-75 {
    margin-top: 75px !important;
  }
  .mt-xl-90 {
    margin-top: 90px !important;
  }
  .mt-xl-120 {
    margin-top: 120px !important;
  }
  .mt-xl-150 {
    margin-top: 150px !important;
  }
  .mt-xl-180 {
    margin-top: 180px !important;
  }
  .mt-xl-255 {
    margin-top: 255px !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-10 {
    margin-right: 10px !important;
  }
  .me-xl-15 {
    margin-right: 15px !important;
  }
  .me-xl-20 {
    margin-right: 20px !important;
  }
  .me-xl-30 {
    margin-right: 30px !important;
  }
  .me-xl-45 {
    margin-right: 45px !important;
  }
  .me-xl-60 {
    margin-right: 60px !important;
  }
  .me-xl-75 {
    margin-right: 75px !important;
  }
  .me-xl-90 {
    margin-right: 90px !important;
  }
  .me-xl-120 {
    margin-right: 120px !important;
  }
  .me-xl-150 {
    margin-right: 150px !important;
  }
  .me-xl-180 {
    margin-right: 180px !important;
  }
  .me-xl-255 {
    margin-right: 255px !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-10 {
    margin-bottom: 10px !important;
  }
  .mb-xl-15 {
    margin-bottom: 15px !important;
  }
  .mb-xl-20 {
    margin-bottom: 20px !important;
  }
  .mb-xl-30 {
    margin-bottom: 30px !important;
  }
  .mb-xl-45 {
    margin-bottom: 45px !important;
  }
  .mb-xl-60 {
    margin-bottom: 60px !important;
  }
  .mb-xl-75 {
    margin-bottom: 75px !important;
  }
  .mb-xl-90 {
    margin-bottom: 90px !important;
  }
  .mb-xl-120 {
    margin-bottom: 120px !important;
  }
  .mb-xl-150 {
    margin-bottom: 150px !important;
  }
  .mb-xl-180 {
    margin-bottom: 180px !important;
  }
  .mb-xl-255 {
    margin-bottom: 255px !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-10 {
    margin-left: 10px !important;
  }
  .ms-xl-15 {
    margin-left: 15px !important;
  }
  .ms-xl-20 {
    margin-left: 20px !important;
  }
  .ms-xl-30 {
    margin-left: 30px !important;
  }
  .ms-xl-45 {
    margin-left: 45px !important;
  }
  .ms-xl-60 {
    margin-left: 60px !important;
  }
  .ms-xl-75 {
    margin-left: 75px !important;
  }
  .ms-xl-90 {
    margin-left: 90px !important;
  }
  .ms-xl-120 {
    margin-left: 120px !important;
  }
  .ms-xl-150 {
    margin-left: 150px !important;
  }
  .ms-xl-180 {
    margin-left: 180px !important;
  }
  .ms-xl-255 {
    margin-left: 255px !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;
  }
  .p-xl-10 {
    padding: 10px !important;
  }
  .p-xl-15 {
    padding: 15px !important;
  }
  .p-xl-20 {
    padding: 20px !important;
  }
  .p-xl-30 {
    padding: 30px !important;
  }
  .p-xl-45 {
    padding: 45px !important;
  }
  .p-xl-60 {
    padding: 60px !important;
  }
  .p-xl-75 {
    padding: 75px !important;
  }
  .p-xl-90 {
    padding: 90px !important;
  }
  .p-xl-120 {
    padding: 120px !important;
  }
  .p-xl-150 {
    padding: 150px !important;
  }
  .p-xl-180 {
    padding: 180px !important;
  }
  .p-xl-255 {
    padding: 255px !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;
  }
  .px-xl-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .px-xl-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .px-xl-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .px-xl-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
  .px-xl-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
  }
  .px-xl-60 {
    padding-right: 60px !important;
    padding-left: 60px !important;
  }
  .px-xl-75 {
    padding-right: 75px !important;
    padding-left: 75px !important;
  }
  .px-xl-90 {
    padding-right: 90px !important;
    padding-left: 90px !important;
  }
  .px-xl-120 {
    padding-right: 120px !important;
    padding-left: 120px !important;
  }
  .px-xl-150 {
    padding-right: 150px !important;
    padding-left: 150px !important;
  }
  .px-xl-180 {
    padding-right: 180px !important;
    padding-left: 180px !important;
  }
  .px-xl-255 {
    padding-right: 255px !important;
    padding-left: 255px !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;
  }
  .py-xl-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .py-xl-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .py-xl-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .py-xl-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .py-xl-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  .py-xl-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .py-xl-75 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }
  .py-xl-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
  .py-xl-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .py-xl-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
  .py-xl-180 {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }
  .py-xl-255 {
    padding-top: 255px !important;
    padding-bottom: 255px !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;
  }
  .pt-xl-10 {
    padding-top: 10px !important;
  }
  .pt-xl-15 {
    padding-top: 15px !important;
  }
  .pt-xl-20 {
    padding-top: 20px !important;
  }
  .pt-xl-30 {
    padding-top: 30px !important;
  }
  .pt-xl-45 {
    padding-top: 45px !important;
  }
  .pt-xl-60 {
    padding-top: 60px !important;
  }
  .pt-xl-75 {
    padding-top: 75px !important;
  }
  .pt-xl-90 {
    padding-top: 90px !important;
  }
  .pt-xl-120 {
    padding-top: 120px !important;
  }
  .pt-xl-150 {
    padding-top: 150px !important;
  }
  .pt-xl-180 {
    padding-top: 180px !important;
  }
  .pt-xl-255 {
    padding-top: 255px !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;
  }
  .pe-xl-10 {
    padding-right: 10px !important;
  }
  .pe-xl-15 {
    padding-right: 15px !important;
  }
  .pe-xl-20 {
    padding-right: 20px !important;
  }
  .pe-xl-30 {
    padding-right: 30px !important;
  }
  .pe-xl-45 {
    padding-right: 45px !important;
  }
  .pe-xl-60 {
    padding-right: 60px !important;
  }
  .pe-xl-75 {
    padding-right: 75px !important;
  }
  .pe-xl-90 {
    padding-right: 90px !important;
  }
  .pe-xl-120 {
    padding-right: 120px !important;
  }
  .pe-xl-150 {
    padding-right: 150px !important;
  }
  .pe-xl-180 {
    padding-right: 180px !important;
  }
  .pe-xl-255 {
    padding-right: 255px !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;
  }
  .pb-xl-10 {
    padding-bottom: 10px !important;
  }
  .pb-xl-15 {
    padding-bottom: 15px !important;
  }
  .pb-xl-20 {
    padding-bottom: 20px !important;
  }
  .pb-xl-30 {
    padding-bottom: 30px !important;
  }
  .pb-xl-45 {
    padding-bottom: 45px !important;
  }
  .pb-xl-60 {
    padding-bottom: 60px !important;
  }
  .pb-xl-75 {
    padding-bottom: 75px !important;
  }
  .pb-xl-90 {
    padding-bottom: 90px !important;
  }
  .pb-xl-120 {
    padding-bottom: 120px !important;
  }
  .pb-xl-150 {
    padding-bottom: 150px !important;
  }
  .pb-xl-180 {
    padding-bottom: 180px !important;
  }
  .pb-xl-255 {
    padding-bottom: 255px !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;
  }
  .ps-xl-10 {
    padding-left: 10px !important;
  }
  .ps-xl-15 {
    padding-left: 15px !important;
  }
  .ps-xl-20 {
    padding-left: 20px !important;
  }
  .ps-xl-30 {
    padding-left: 30px !important;
  }
  .ps-xl-45 {
    padding-left: 45px !important;
  }
  .ps-xl-60 {
    padding-left: 60px !important;
  }
  .ps-xl-75 {
    padding-left: 75px !important;
  }
  .ps-xl-90 {
    padding-left: 90px !important;
  }
  .ps-xl-120 {
    padding-left: 120px !important;
  }
  .ps-xl-150 {
    padding-left: 150px !important;
  }
  .ps-xl-180 {
    padding-left: 180px !important;
  }
  .ps-xl-255 {
    padding-left: 255px !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;
  }
  .gap-xl-10 {
    gap: 10px !important;
  }
  .gap-xl-15 {
    gap: 15px !important;
  }
  .gap-xl-20 {
    gap: 20px !important;
  }
  .gap-xl-30 {
    gap: 30px !important;
  }
  .gap-xl-45 {
    gap: 45px !important;
  }
  .gap-xl-60 {
    gap: 60px !important;
  }
  .gap-xl-75 {
    gap: 75px !important;
  }
  .gap-xl-90 {
    gap: 90px !important;
  }
  .gap-xl-120 {
    gap: 120px !important;
  }
  .gap-xl-150 {
    gap: 150px !important;
  }
  .gap-xl-180 {
    gap: 180px !important;
  }
  .gap-xl-255 {
    gap: 255px !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: 1520px) {
  .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;
  }
  .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-10 {
    margin: 10px !important;
  }
  .m-xxl-15 {
    margin: 15px !important;
  }
  .m-xxl-20 {
    margin: 20px !important;
  }
  .m-xxl-30 {
    margin: 30px !important;
  }
  .m-xxl-45 {
    margin: 45px !important;
  }
  .m-xxl-60 {
    margin: 60px !important;
  }
  .m-xxl-75 {
    margin: 75px !important;
  }
  .m-xxl-90 {
    margin: 90px !important;
  }
  .m-xxl-120 {
    margin: 120px !important;
  }
  .m-xxl-150 {
    margin: 150px !important;
  }
  .m-xxl-180 {
    margin: 180px !important;
  }
  .m-xxl-255 {
    margin: 255px !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-10 {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
  .mx-xxl-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
  }
  .mx-xxl-20 {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }
  .mx-xxl-30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
  .mx-xxl-45 {
    margin-right: 45px !important;
    margin-left: 45px !important;
  }
  .mx-xxl-60 {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }
  .mx-xxl-75 {
    margin-right: 75px !important;
    margin-left: 75px !important;
  }
  .mx-xxl-90 {
    margin-right: 90px !important;
    margin-left: 90px !important;
  }
  .mx-xxl-120 {
    margin-right: 120px !important;
    margin-left: 120px !important;
  }
  .mx-xxl-150 {
    margin-right: 150px !important;
    margin-left: 150px !important;
  }
  .mx-xxl-180 {
    margin-right: 180px !important;
    margin-left: 180px !important;
  }
  .mx-xxl-255 {
    margin-right: 255px !important;
    margin-left: 255px !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-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .my-xxl-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
  .my-xxl-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .my-xxl-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .my-xxl-45 {
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .my-xxl-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
  }
  .my-xxl-75 {
    margin-top: 75px !important;
    margin-bottom: 75px !important;
  }
  .my-xxl-90 {
    margin-top: 90px !important;
    margin-bottom: 90px !important;
  }
  .my-xxl-120 {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
  }
  .my-xxl-150 {
    margin-top: 150px !important;
    margin-bottom: 150px !important;
  }
  .my-xxl-180 {
    margin-top: 180px !important;
    margin-bottom: 180px !important;
  }
  .my-xxl-255 {
    margin-top: 255px !important;
    margin-bottom: 255px !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-10 {
    margin-top: 10px !important;
  }
  .mt-xxl-15 {
    margin-top: 15px !important;
  }
  .mt-xxl-20 {
    margin-top: 20px !important;
  }
  .mt-xxl-30 {
    margin-top: 30px !important;
  }
  .mt-xxl-45 {
    margin-top: 45px !important;
  }
  .mt-xxl-60 {
    margin-top: 60px !important;
  }
  .mt-xxl-75 {
    margin-top: 75px !important;
  }
  .mt-xxl-90 {
    margin-top: 90px !important;
  }
  .mt-xxl-120 {
    margin-top: 120px !important;
  }
  .mt-xxl-150 {
    margin-top: 150px !important;
  }
  .mt-xxl-180 {
    margin-top: 180px !important;
  }
  .mt-xxl-255 {
    margin-top: 255px !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-10 {
    margin-right: 10px !important;
  }
  .me-xxl-15 {
    margin-right: 15px !important;
  }
  .me-xxl-20 {
    margin-right: 20px !important;
  }
  .me-xxl-30 {
    margin-right: 30px !important;
  }
  .me-xxl-45 {
    margin-right: 45px !important;
  }
  .me-xxl-60 {
    margin-right: 60px !important;
  }
  .me-xxl-75 {
    margin-right: 75px !important;
  }
  .me-xxl-90 {
    margin-right: 90px !important;
  }
  .me-xxl-120 {
    margin-right: 120px !important;
  }
  .me-xxl-150 {
    margin-right: 150px !important;
  }
  .me-xxl-180 {
    margin-right: 180px !important;
  }
  .me-xxl-255 {
    margin-right: 255px !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-10 {
    margin-bottom: 10px !important;
  }
  .mb-xxl-15 {
    margin-bottom: 15px !important;
  }
  .mb-xxl-20 {
    margin-bottom: 20px !important;
  }
  .mb-xxl-30 {
    margin-bottom: 30px !important;
  }
  .mb-xxl-45 {
    margin-bottom: 45px !important;
  }
  .mb-xxl-60 {
    margin-bottom: 60px !important;
  }
  .mb-xxl-75 {
    margin-bottom: 75px !important;
  }
  .mb-xxl-90 {
    margin-bottom: 90px !important;
  }
  .mb-xxl-120 {
    margin-bottom: 120px !important;
  }
  .mb-xxl-150 {
    margin-bottom: 150px !important;
  }
  .mb-xxl-180 {
    margin-bottom: 180px !important;
  }
  .mb-xxl-255 {
    margin-bottom: 255px !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-10 {
    margin-left: 10px !important;
  }
  .ms-xxl-15 {
    margin-left: 15px !important;
  }
  .ms-xxl-20 {
    margin-left: 20px !important;
  }
  .ms-xxl-30 {
    margin-left: 30px !important;
  }
  .ms-xxl-45 {
    margin-left: 45px !important;
  }
  .ms-xxl-60 {
    margin-left: 60px !important;
  }
  .ms-xxl-75 {
    margin-left: 75px !important;
  }
  .ms-xxl-90 {
    margin-left: 90px !important;
  }
  .ms-xxl-120 {
    margin-left: 120px !important;
  }
  .ms-xxl-150 {
    margin-left: 150px !important;
  }
  .ms-xxl-180 {
    margin-left: 180px !important;
  }
  .ms-xxl-255 {
    margin-left: 255px !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;
  }
  .p-xxl-10 {
    padding: 10px !important;
  }
  .p-xxl-15 {
    padding: 15px !important;
  }
  .p-xxl-20 {
    padding: 20px !important;
  }
  .p-xxl-30 {
    padding: 30px !important;
  }
  .p-xxl-45 {
    padding: 45px !important;
  }
  .p-xxl-60 {
    padding: 60px !important;
  }
  .p-xxl-75 {
    padding: 75px !important;
  }
  .p-xxl-90 {
    padding: 90px !important;
  }
  .p-xxl-120 {
    padding: 120px !important;
  }
  .p-xxl-150 {
    padding: 150px !important;
  }
  .p-xxl-180 {
    padding: 180px !important;
  }
  .p-xxl-255 {
    padding: 255px !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;
  }
  .px-xxl-10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .px-xxl-15 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .px-xxl-20 {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
  .px-xxl-30 {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
  .px-xxl-45 {
    padding-right: 45px !important;
    padding-left: 45px !important;
  }
  .px-xxl-60 {
    padding-right: 60px !important;
    padding-left: 60px !important;
  }
  .px-xxl-75 {
    padding-right: 75px !important;
    padding-left: 75px !important;
  }
  .px-xxl-90 {
    padding-right: 90px !important;
    padding-left: 90px !important;
  }
  .px-xxl-120 {
    padding-right: 120px !important;
    padding-left: 120px !important;
  }
  .px-xxl-150 {
    padding-right: 150px !important;
    padding-left: 150px !important;
  }
  .px-xxl-180 {
    padding-right: 180px !important;
    padding-left: 180px !important;
  }
  .px-xxl-255 {
    padding-right: 255px !important;
    padding-left: 255px !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;
  }
  .py-xxl-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .py-xxl-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  .py-xxl-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .py-xxl-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  .py-xxl-45 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
  .py-xxl-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .py-xxl-75 {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
  }
  .py-xxl-90 {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
  }
  .py-xxl-120 {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
  .py-xxl-150 {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
  }
  .py-xxl-180 {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
  }
  .py-xxl-255 {
    padding-top: 255px !important;
    padding-bottom: 255px !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;
  }
  .pt-xxl-10 {
    padding-top: 10px !important;
  }
  .pt-xxl-15 {
    padding-top: 15px !important;
  }
  .pt-xxl-20 {
    padding-top: 20px !important;
  }
  .pt-xxl-30 {
    padding-top: 30px !important;
  }
  .pt-xxl-45 {
    padding-top: 45px !important;
  }
  .pt-xxl-60 {
    padding-top: 60px !important;
  }
  .pt-xxl-75 {
    padding-top: 75px !important;
  }
  .pt-xxl-90 {
    padding-top: 90px !important;
  }
  .pt-xxl-120 {
    padding-top: 120px !important;
  }
  .pt-xxl-150 {
    padding-top: 150px !important;
  }
  .pt-xxl-180 {
    padding-top: 180px !important;
  }
  .pt-xxl-255 {
    padding-top: 255px !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;
  }
  .pe-xxl-10 {
    padding-right: 10px !important;
  }
  .pe-xxl-15 {
    padding-right: 15px !important;
  }
  .pe-xxl-20 {
    padding-right: 20px !important;
  }
  .pe-xxl-30 {
    padding-right: 30px !important;
  }
  .pe-xxl-45 {
    padding-right: 45px !important;
  }
  .pe-xxl-60 {
    padding-right: 60px !important;
  }
  .pe-xxl-75 {
    padding-right: 75px !important;
  }
  .pe-xxl-90 {
    padding-right: 90px !important;
  }
  .pe-xxl-120 {
    padding-right: 120px !important;
  }
  .pe-xxl-150 {
    padding-right: 150px !important;
  }
  .pe-xxl-180 {
    padding-right: 180px !important;
  }
  .pe-xxl-255 {
    padding-right: 255px !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;
  }
  .pb-xxl-10 {
    padding-bottom: 10px !important;
  }
  .pb-xxl-15 {
    padding-bottom: 15px !important;
  }
  .pb-xxl-20 {
    padding-bottom: 20px !important;
  }
  .pb-xxl-30 {
    padding-bottom: 30px !important;
  }
  .pb-xxl-45 {
    padding-bottom: 45px !important;
  }
  .pb-xxl-60 {
    padding-bottom: 60px !important;
  }
  .pb-xxl-75 {
    padding-bottom: 75px !important;
  }
  .pb-xxl-90 {
    padding-bottom: 90px !important;
  }
  .pb-xxl-120 {
    padding-bottom: 120px !important;
  }
  .pb-xxl-150 {
    padding-bottom: 150px !important;
  }
  .pb-xxl-180 {
    padding-bottom: 180px !important;
  }
  .pb-xxl-255 {
    padding-bottom: 255px !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;
  }
  .ps-xxl-10 {
    padding-left: 10px !important;
  }
  .ps-xxl-15 {
    padding-left: 15px !important;
  }
  .ps-xxl-20 {
    padding-left: 20px !important;
  }
  .ps-xxl-30 {
    padding-left: 30px !important;
  }
  .ps-xxl-45 {
    padding-left: 45px !important;
  }
  .ps-xxl-60 {
    padding-left: 60px !important;
  }
  .ps-xxl-75 {
    padding-left: 75px !important;
  }
  .ps-xxl-90 {
    padding-left: 90px !important;
  }
  .ps-xxl-120 {
    padding-left: 120px !important;
  }
  .ps-xxl-150 {
    padding-left: 150px !important;
  }
  .ps-xxl-180 {
    padding-left: 180px !important;
  }
  .ps-xxl-255 {
    padding-left: 255px !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;
  }
  .gap-xxl-10 {
    gap: 10px !important;
  }
  .gap-xxl-15 {
    gap: 15px !important;
  }
  .gap-xxl-20 {
    gap: 20px !important;
  }
  .gap-xxl-30 {
    gap: 30px !important;
  }
  .gap-xxl-45 {
    gap: 45px !important;
  }
  .gap-xxl-60 {
    gap: 60px !important;
  }
  .gap-xxl-75 {
    gap: 75px !important;
  }
  .gap-xxl-90 {
    gap: 90px !important;
  }
  .gap-xxl-120 {
    gap: 120px !important;
  }
  .gap-xxl-150 {
    gap: 150px !important;
  }
  .gap-xxl-180 {
    gap: 180px !important;
  }
  .gap-xxl-255 {
    gap: 255px !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: 1520px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2.25rem !important;
  }
  .fs-3 {
    font-size: 2rem !important;
  }
  .fs-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;
  }
}
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 0 0;
  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: #FF5E4C;
}
.hamburger-box {
  width: 24px;
  height: 19px;
  display: inline-block;
  position: relative;
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: 3px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 24px;
  height: 3px;
  background-color: #FF5E4C;
  border-radius: 2px;
  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: 48px;
}
.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: 48px;
}
.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: 48px;
}
.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: 48px;
}
.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: 48px;
}
.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: 48px;
}
.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(-4.8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-4.8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
/*
   * Arrow Right
   */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(4.8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(4.8px, 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(-4.8px, -6px, 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(-4.8px, 6px, 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(4.8px, -6px, 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(4.8px, 6px, 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);
}
/*
   * 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: 3px5px;
  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: -48px;
  top: -48px;
  transform: translate3d(48px, 48px, 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: -48px;
  top: -48px;
  transform: translate3d(-48px, 48px, 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: 3px5px;
  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: -48px;
  top: 48px;
  transform: translate3d(48px, -48px, 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: -48px;
  top: 48px;
  transform: translate3d(-48px, -48px, 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;
}
/*
   * 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 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);
}
/**
 * ====================================================
 * Mixins
 * ====================================================
 *
 * Geladen ná de Bootstrap-import (zie main.scss), zodat Bootstrap-mixins als
 * `media-breakpoint-up` en de maps `$container-max-widths` beschikbaar zijn.
 */
/**
 * fluid-type — een tekstmaat die op `$fluid-anchor` (xxl, 1520) exact zijn designwaarde is
 * en daaronder vloeiend krimpt tot `$min`. Boven het anker blijft hij vast, want daar capt
 * de container en groeit de kolom niet meer mee.
 *
 * Gebruik dit voor de `.display-*`-maten. Gewone koppen (h1 tot en met h6 en de
 * `.hN`-utilities) regelt Bootstrap's RFS al, en die staat op hetzelfde anker, dus alle
 * tekst op de site begint op dezelfde breedte te krimpen. Een display-maat krijgt bewust
 * een steilere curve dan RFS: RFS zet een `.display-6` op 1024 nog op 50 en dan loopt zo'n
 * kop in een kolom van 620 over vier regels.
 *
 * Anker niet per blok afwijken. Hier stonden vijf blokken met een eigen clamp op 56/1920,
 * waarvan drie met en twee zónder een xxl-override, dus de kop sprong in het ene blok bij
 * 1520 van 44 naar 56 en bereikte in het andere pas op 1920 zijn designmaat. Dat is precies
 * wat je niet wilt zien als je het venster versleept.
 */
/**
 * fluid-in-grid — een fluid blok dat ónder xxl uitlijnt met de .container-blokken op de
 * pagina (zelfde max-width per breakpoint uit `$container-max-widths`, 15px zijruimte,
 * gecentreerd, dus dezelfde content-x als een gewoon .container-blok) en vanaf xxl (≥1520)
 * full-bleed wordt met een eigen inzet `$xxl-padding` (designwaarde op 1920; 0 = framerand
 * tot framerand). Zet dit op de wrapper die de content-breedte bepaalt (`.row g-0` of een
 * inner-div), niet op de sectie zelf.
 */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Regular.woff2") format("woff2"), url("../fonts/GeneralSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
a, button {
  transition: all 0.2s ease-in-out;
}
a i, a span, button i, button span {
  transition: all 0.2s ease-in-out;
}
.icon-hover-right:hover i {
  transform: translateX(5px);
}
.icon-hover-left:hover i {
  transform: translateX(-5px);
}
.icon-hover-up:hover i {
  transform: translateY(-5px);
}
.icon-hover-down:hover i {
  transform: translateY(5px);
}
:focus {
  outline: none !important;
}
:focus-visible {
  outline-color: #FF5E4C !important;
}
.min-height-inherit {
  min-height: inherit;
}
h1, .h1 {
  line-height: 1.2;
}
h2, .h2 {
  line-height: 1.2;
}
h3, .h3 {
  line-height: 1.2;
}
h4, .h4 {
  line-height: 1.4;
}
h5, .h5 {
  line-height: 1.4;
}
h6, .h6 {
  line-height: 1.6;
}
/**
 * De display-maten schalen mee tot `$fluid-anchor` (1520) en staan daarboven op hun
 * designwaarde. Dat gebeurt hier één keer voor alle zes, en niet per blok: `.display-6`
 * staat in twaalf templates en de schaling stond maar in vijf blok-partials, dus dezelfde
 * kop gedroeg zich per blok anders. De ondergrens 32 is de kopmaat die dit thema op mobiel
 * voor een sectietitel gebruikt.
 *
 * Koppen (h1 tot en met h6) hangen aan Bootstrap's RFS op hetzelfde anker, zie
 * `$rfs-breakpoint` in abstracts/_variables.scss.
 */
.display-1 {
  font-size: clamp(2rem, 9.2105263158vw, 8.75rem);
}
.display-2 {
  font-size: clamp(2rem, 7.8947368421vw, 7.5rem);
}
.display-3 {
  font-size: clamp(2rem, 6.3157894737vw, 6rem);
}
.display-4 {
  font-size: clamp(2rem, 5.7894736842vw, 5.5rem);
}
.display-5 {
  font-size: clamp(2rem, 4.7368421053vw, 4.5rem);
}
.display-6 {
  font-size: clamp(2rem, 3.6842105263vw, 3.5rem);
}
html {
  background-color: #F5F2F0;
}
.mw-limiter {
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}
.brand-logo {
  display: block;
}
@media (max-width: 767.98px) {
  .brand-logo {
    width: 140px;
  }
}
.alignnone {
  margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}
.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
a img.alignnone {
  margin: 5px 20px 20px 0;
}
a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}
.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}
.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}
/**
 * ====================================================
 * Accordion
 * ====================================================
 *
 * De projectbrede accordion-look, gemeten aan het FAQ-blok in het design
 * (`accordions_01`, node 3843:3053). Die vorm komt op meerdere plekken terug: de
 * FAQ-sectie op de frontpage, de FAQ-pagina's en het menu in de footer. Daarom
 * staat hij hier als component en niet in de SCSS van één blok.
 *
 * Uit het design:
 *
 *   dicht        fill #FFFFFF, géén rand
 *   open         géén fill (de crème body-bg schijnt door), rand 1px #E0D7D1
 *   radius       10 ($border-radius)
 *   padding      20 30 (kop én body)
 *   tussen items 15
 *   divider      1px #E0D7D1 tussen kop en body, over de volle binnenbreedte
 *   chevron      angle-down / angle-up, Sharp Regular 16, #FF5E4C, rechts
 *
 * VASTE REGEL: een accordion-item heeft altijd een achtergrondkleur. Zonder
 * paneel is op mobiel niet te zien wat bij één klapper hoort: je ziet dan een
 * reeks losse koppen op de paginakleur en de groepering verdwijnt. Zie
 * .claude/rules/figma-uitlezen.md.
 *
 * Bootstrap-defaults die je moet overschrijven, anders lekken ze door: de
 * accordion-bg (#F5F2F0, precies de body-kleur, dus onzichtbaar), de border van
 * 1px, de radius van 10 op de knop, en de afgeleide active-kleuren (een paars
 * #432062 op een lila #ede9f0) plus een btn-focus-box-shadow die een kleur zonder
 * offset is en dus een ongeldige box-shadow oplevert.
 */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-x: 30px;
  --bs-accordion-btn-padding-y: 20px;
  --bs-accordion-body-padding-x: 30px;
  --bs-accordion-body-padding-y: 20px;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: #212529;
  /**
	 * De divider uit het design. Hij hoort bij de body en is dus alleen zichtbaar als
	 * het item open staat.
	 *
	 * De 20 boven en onder komt van `--bs-accordion-body-padding-y` hierboven. Die stond
	 * hier eerder nóg een keer expliciet, met een `padding-bottom` van 10 die de variabele
	 * overschreef: daardoor was de ruimte onder het antwoord 10 in plaats van 20, en met
	 * de knop-padding van de Meer lezen-link erbij kwam dat op 22 uit terwijl het design
	 * 30 vraagt. Nu regelt de variabele de 20 en zet de link zelf de 10 die erbij hoort.
	 */
  /**
	 * Het antwoord in de body. Komt uit een ACF-textarea door
	 * filter_the_content_tags(), dus wpautop maakt er een <p> van; die mag
	 * onderaan geen marge overhouden, want de 15 naar de Meer lezen-link en de
	 * padding van het item regelen die ruimte al.
	 */
  /**
	 * "Meer lezen" onder het antwoord: de brug naar de detailpagina van de vraag.
	 * Rendert alleen als de vraag een uitgebreid antwoord heeft, en dat is precies
	 * wat het design met "Meer lezen (optionele knop)" bedoelt.
	 *
	 * Een tekstlink en geen gevulde knop: in het design heeft hij geen fill, geen
	 * rand en geen padding. Het label staat in $gray-900, dus dezelfde kleur als de
	 * bodytekst; alleen de chevron is coral.
	 */
}
.accordion .accordion-item {
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}
.accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  background-color: transparent;
  border-color: #E0D7D1;
}
.accordion .accordion-button {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  /**
		 * De vraag is in het design bodytekst en geen koptekst: Asap SemiBold 16 op lh
		 * 1,6. De HTML-tag is wél een kop (h3 of h4, want de vraag hoort in de
		 * document-outline), en die brengt General Sans 400 op lh 1,2 mee. Bootstrap
		 * reset dat niet, dus zonder deze regel staat de vraag in de verkeerde familie
		 * en is een dicht item 61 hoog in plaats van de 66 uit het design: 16 x 1,6 is
		 * 25,6 plus 2 x 20 padding, en met lh 1,2 wordt dat 19,2.
		 */
  font-family: "Asap", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  /**
		 * Gebouwd is een dicht item 67,6 hoog en niet de 66 uit het design. Dat verschil
		 * is de rand: Figma tekent die aan de binnenkant en rekent hem dus niet mee,
		 * terwijl een CSS-border bij een hoogte die uit de inhoud volgt er bovenop komt.
		 * Plus Figma rondt de regelhoogte van 25,6 af naar 26. De padding hiervoor
		 * verlagen naar 19 zou het getal kloppend maken en de spacing kapot; dit is
		 * dezelfde afweging als bij de Mini CTA-kaart.
		 */
}
.accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}
.accordion .accordion-button::after {
  content: "";
  font-family: "Font Awesome 7 Sharp";
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #FF5E4C;
  background-image: none;
  width: auto;
  height: auto;
  margin-left: auto;
  transform-origin: center;
  transition: all 0.2s ease-in-out;
}
.accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}
.accordion .accordion-body {
  border-top: 1px solid #E0D7D1;
}
.accordion .accordion-antwoord > *:last-child {
  margin-bottom: 0;
}
.accordion .accordion-meer {
  gap: 10px;
  /**
		 * De knop-padding eraf. Dit is een `.btn`, dus Bootstrap zet er 12 boven en onder
		 * en 24 links en rechts op, en dan is de afstand tot het antwoord 27 in plaats van
		 * 15 en staat de link 24 naar binnen. Het design toont een kale tekstlink van
		 * 97 × 26, dus precies één regel van 16px met de chevron ernaast.
		 */
  padding: 0;
  border: 0;
  margin-top: 15px;
  /**
		 * Géén extra ruimte onder de link. Het design zet daar 10 bij de 20 van de body,
		 * dus 30, maar dat is een bewuste afwijking op verzoek van Monica: de binnenruimte
		 * van de body is uniform 20, met of zonder Meer lezen-link. Dit is dus de regel en
		 * niet een gemiste designwaarde; herstel die 10 niet bij een volgende meting.
		 */
  color: #212529;
  font-size: 1rem;
  font-weight: 600;
}
.accordion .accordion-meer i {
  color: #FF5E4C;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.accordion .accordion-meer:hover {
  color: #FF5E4C;
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-align: left;
  /**
	 * De ruimte tussen het label en het icoon. Dit is een designtoken en geen keuze per
	 * blok: het design zet elke knop op hoogte 50, padding 12/24, radius 25 en een
	 * icon-gap van 10 (zie .claude/rules/figma-uitlezen.md).
	 *
	 * Hij staat hier en niet in een blok-SCSS, want zolang elk blok zijn eigen gap zette
	 * had een nieuw blok er per definitie geen: `foto-content-blokken-01` had de 10 en
	 * `cta-blokken-02` daardoor 0, waardoor het pijltje tegen de tekst aan plakte.
	 *
	 * Zet dus géén marge-utility op een icoon binnen een `.btn` (`me-10`, `ms-10`): die
	 * komt bovenop deze gap. Wil een knop uitzonderlijk een andere afstand, overschrijf
	 * dan `gap` op die knop.
	 *
	 * Eén bewuste uitzondering: `.hero-front-button` in templates/_hero.scss staat op
	 * `justify-content: space-between` met `gap: 15px`. Daar is de gap een ondergrens en
	 * niet de zichtbare afstand, want die knop is breed en zet het label links en de pijl
	 * tegen de rechterrand. Zet die dus niet "gelijk" met deze 10.
	 */
  gap: 10px;
  /**
	 * Bootstrap zet bij een outline-knop de labelkleur gelijk aan de randkleur, en
	 * $quaternary is het warme beige: dat is op de crème achtergrond bijna niet te
	 * lezen. Het design gebruikt hier een label in $gray-900 met alleen de rand in
	 * beige, en bij hover vult het vlak zich met datzelfde beige.
	 */
  /**
	 * Op wit en op de crème tint kiest Bootstrap puur zwart; het design gebruikt
	 * overal $gray-900. $tertiary staat hier bij $white omdat het dezelfde lichte
	 * vulling is: color-contrast() komt bij beide op #000 uit.
	 */
}
.btn.btn-link {
  padding: 0;
  border: none;
  border-radius: 0;
}
.btn.btn-primary, .contact-blokken-01 .gform_wrapper.gravity-theme button.btn, .btn.btn-primary:active, .contact-blokken-01 .gform_wrapper.gravity-theme button.btn:active {
  color: #fff;
}
.btn.btn-secondary, .btn.btn-secondary:active {
  color: #fff;
}
.btn.btn-quinary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn.btn-outline-quaternary {
  --bs-btn-color: #212529;
  --bs-btn-hover-color: #212529;
  --bs-btn-active-color: #212529;
  --bs-btn-hover-bg: #E0D7D1;
  --bs-btn-active-bg: #E0D7D1;
}
.btn.btn-white, .btn.btn-tertiary {
  --bs-btn-color: #212529;
  --bs-btn-hover-color: #212529;
  --bs-btn-active-color: #212529;
}
.btn:hover.btn-outline-primary {
  color: #fff;
}
.btn:hover.btn-outline-secondary {
  color: #fff;
}
.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.object-top {
  object-position: top;
}
.object-top-25 {
  object-position: center 25%;
}
.object-center {
  object-position: center;
}
.object-top-75 {
  object-position: center 75%;
}
.object-bottom {
  object-position: bottom;
}
.contain-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.zoom-image {
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.zoom-image:hover img {
  transform: scale(1.1);
}
.zoom-image img {
  transition: all 0.25s ease-in-out;
}
#duotone {
  position: absolute;
  z-index: -9999;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.post-link a {
  display: inline-block;
  padding: 10px 15px;
  background-color: #e5e8ea;
  color: #212529;
  border-radius: 10px;
}
.post-link a:hover {
  background-color: #d9dce0;
  color: #4A246D;
}
/**
 * ====================================================
 * Paginering
 * ====================================================
 *
 * Gemeten op designframe 16: vakjes van 50 × 50 met 5 ertussen, radius 10, links
 * uitgelijnd, 30 onder de laatste kaartrij (dezelfde afstand als de row-gap van het
 * grid, zodat de paginering leest als een volgende rij).
 *
 * Wit vakje met donkere tekst, het actieve vakje coral met wit, en het pijl-vakje
 * wit met een coral chevron. Het design toont alleen een volgende-pijl; dat komt van
 * WordPress zelf, dat op pagina 1 geen vorige-link rendert.
 *
 * De selectors dekken zowel de WP-paginering (.nav-links) als die van FacetWP
 * (.facetwp-pager), want het thema kan met beide werken.
 */
.pagination .screen-reader-text {
  display: none;
}
.facetwp-facet-pagination {
  margin-bottom: 0 !important;
}
.nav-links, .facetwp-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 30px;
}
.nav-links .page-numbers, .nav-links .facetwp-page, .facetwp-pager .page-numbers, .facetwp-pager .facetwp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background-color: #fff;
  color: #212529;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  /**
		 * De puntjes zijn in het design een gewoon vakje en geen kale tekst, maar het
		 * is geen link: geen hover-achtergrond, anders belooft het een klik.
		 */
}
.nav-links .page-numbers i, .nav-links .facetwp-page i, .facetwp-pager .page-numbers i, .facetwp-pager .facetwp-page i {
  color: #FF5E4C;
  font-size: 1rem;
}
.nav-links .page-numbers:hover, .nav-links .facetwp-page:hover, .facetwp-pager .page-numbers:hover, .facetwp-pager .facetwp-page:hover {
  background-color: #E0D7D1;
  color: #212529;
}
.nav-links .page-numbers.current, .nav-links .page-numbers.active, .nav-links .facetwp-page.current, .nav-links .facetwp-page.active, .facetwp-pager .page-numbers.current, .facetwp-pager .page-numbers.active, .facetwp-pager .facetwp-page.current, .facetwp-pager .facetwp-page.active {
  background-color: #FF5E4C;
  color: #fff;
}
.nav-links .page-numbers.current i, .nav-links .page-numbers.active i, .nav-links .facetwp-page.current i, .nav-links .facetwp-page.active i, .facetwp-pager .page-numbers.current i, .facetwp-pager .page-numbers.active i, .facetwp-pager .facetwp-page.current i, .facetwp-pager .facetwp-page.active i {
  color: #fff;
}
.nav-links .page-numbers.dots, .nav-links .facetwp-page.dots, .facetwp-pager .page-numbers.dots, .facetwp-pager .facetwp-page.dots {
  pointer-events: none;
}
.nav-links .page-numbers.dots:hover, .nav-links .facetwp-page.dots:hover, .facetwp-pager .page-numbers.dots:hover, .facetwp-pager .facetwp-page.dots:hover {
  background-color: #fff;
}
#old-browser {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  text-transform: none !important;
  font-family: Arial, sans-serif;
}
#old-browser .ob-backdrop {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
}
#old-browser .ob-popup-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: table;
}
#old-browser .ob-popup-wrap .db-popup-inner-wrap {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 25%;
  width: 100%;
}
#old-browser .ob-popup-wrap .db-popup-inner-wrap .ob-popup {
  padding: 90px 30px;
  background-color: #fff;
  height: 500px;
  width: 60%;
  left: 20%;
  position: relative;
  top: -50%;
}
#old-browser .ob-popup-wrap .db-popup-inner-wrap .ob-popup .ob-popup-content {
  width: 50%;
  float: right;
}
#old-browser .ob-popup-wrap .db-popup-inner-wrap .ob-popup .ob-popup-image {
  overflow: hidden;
  position: absolute;
  width: 40%;
  left: 0;
  bottom: 0;
}
#old-browser .ob-popup-wrap .db-popup-inner-wrap .ob-popup .ob-popup-image img {
  width: 100%;
  max-width: 480px;
  height: auto;
}
#old-browser .ob-title {
  font-size: 36px !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  color: #181818 !important;
  margin-bottom: 30px !important;
}
#old-browser .ob-title span {
  color: #11B465;
}
#old-browser .ob-paragraph {
  color: #A6A6A6 !important;
  font-size: 24px !important;
  font-weight: normal !important;
  margin-bottom: 30px !important;
}
#old-browser .ob-update-button {
  font-size: 18px !important;
  border: 2px solid #106CB7 !important;
  color: #181818 !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  display: inline-block !important;
  border-radius: 25px;
}
#old-browser .ob-update-button:hover {
  background-color: #106CB7 !important;
  color: #fff !important;
}
#old-browser #ob-close-popup {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 50px;
  text-align: center;
  color: #cccccc;
  text-decoration: none !important;
}
.socials.socials-list-texts > .row > div:not(:first-of-type), .socials.socials-list-icons-texts > .row > div:not(:first-of-type) {
  margin-top: 5px;
}
.socials.socials-list-icons-texts i {
  color: #4A246D;
  text-align: left;
  min-width: 30px;
}
.socials.socials-list-icons-texts .social-item {
  color: #212529;
}
.socials.socials-list-icons-texts .social-item:hover {
  color: #4A246D;
}
.socials.socials-inline-icons a.social-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f3f4f5;
  color: #4A246D;
}
.socials.socials-inline-icons a.social-item:hover {
  color: #fff;
  background-color: #4A246D;
}
.swiper-button-lock {
  display: none !important;
}
/**
 * ====================================================
 * Collectie- en nieuwsslider (gedeeld gedrag)
 * ====================================================
 *
 * Beide zijn één altijd-actieve Swiper (zie js/custom.js). Drie dingen die ze delen:
 *
 * 1. overflow: visible zodat de peekende kaart net voorbij de containerrand bleedt
 *    (het "volle breedte"-gevoel van de referentie). De sectie eromheen
 *    (.frontpage-collectie, .cards-02) clipt met overflow-x: clip op de schermrand,
 *    dus de pagina krijgt geen horizontale scroll.
 * 2. height: auto op de slides. Swiper zet slides op height:100% van een auto-hoge
 *    wrapper, waardoor ze naar hun eigen inhoud krimpen en ongelijk hoog worden. Met
 *    height:auto trekt align-items:stretch ze gelijk tot de hoogste, zodat de kaarten
 *    (h-100) even lang zijn en de knop/onderlijn van de nieuwskaarten op één lijn staat.
 * 3. De peekende kaart half transparant, zoals de referentie. Welke kaart peekt hangt
 *    af van hoeveel er in beeld staat, niet van een breakpoint: de handler markPeek in
 *    js/custom.js zet de class `is-peek` op elke kaart die niet volledig zichtbaar is.
 *    Let op dat dat het zichtbare vlak is en niet de track: door punt 1 loopt een kaart
 *    tot de schermrand door, dus een kaart die buiten de track valt kan nog helemaal in
 *    beeld staan (die stond eerder onterecht op 0.5). In een vol grid dimt er niets.
 *    Daarom hier ongegate op class i.p.v. het oude sm + :not(active).
 */
.swiper.swiper-collectie, .swiper.swiper-nieuws, .swiper.swiper-galerij {
  overflow: visible;
}
.swiper.swiper-collectie .swiper-slide, .swiper.swiper-nieuws .swiper-slide, .swiper.swiper-galerij .swiper-slide {
  height: auto;
  transition: opacity 0.3s ease;
}
.swiper.swiper-collectie .swiper-slide.is-peek, .swiper.swiper-nieuws .swiper-slide.is-peek, .swiper.swiper-galerij .swiper-slide.is-peek {
  opacity: 0.5;
}
/**
 * ====================================================
 * Slider-footer (gedeeld: collectie- en nieuwsslider)
 * ====================================================
 *
 * Onder lg staan de collectie- en de nieuwskaarten in een Swiper (JS init/destroy op
 * matchMedia, zie js/custom.js). Daaronder een eigen rij met de puntjes, en bij de
 * nieuwsslider ook de "Meer artikelen"-knop ernaast. De puntjes staan ónder de slider
 * en niet eroverheen, en zijn coral zodat ze op zowel de witte collectieband als de
 * crème nieuwsband leesbaar zijn. Alleen zichtbaar < lg (d-lg-none in de markup).
 */
.slider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 30px;
}
.slider-footer:not(:has(.slider-footer-knop)) {
  justify-content: flex-start;
}
.slider-footer .swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0;
}
.slider-footer .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: #FF5E4C;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.slider-footer .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
.slider-footer .slider-footer-knop {
  flex-shrink: 0;
}
#content_editor .item:last-child, #content_editor *:last-child, #content_editor .content_editor *:last-child, .content_editor #content_editor *:last-child, .content_editor .item:last-child, .content_editor *:last-child {
  margin-bottom: 0;
}
#content_editor a:not(.btn), .content_editor a:not(.btn) {
  color: #FF5E4C;
  text-decoration: underline;
}
#content_editor a:not(.btn):hover, .content_editor a:not(.btn):hover {
  text-decoration-color: transparent;
}
#content_editor iframe, .content_editor iframe {
  width: 100%;
  overflow: hidden;
}
#content_editor img, .content_editor img {
  margin: 0;
  overflow: hidden;
}
/**
 * ====================================================
 * Subheading (eyebrow)
 * ====================================================
 *
 * Terugkerend merkmotief: een klein label in kapitalen met een coral bolletje
 * ervoor. Komt in vrijwel elk blok terug (contactblok, footer-kolomkoppen, FAQ).
 *
 * Geen eigen kleur op het label: die erft van de context, zodat hetzelfde
 * component op cremé (donkere tekst) en op het paarse contactblok (via
 * .text-white) werkt. Het bolletje blijft in beide gevallen coral.
 *
 * Dit is geen hN-token. De HTML-tag kies je op de document-outline, niet op
 * deze class (zie .claude/rules/koppen-hierarchie.md).
 */
.subheading {
  /**
	 * Blok-flex en niet `inline-flex`. Met inline-flex wordt de kop een inline-element,
	 * belandt hij in een regel van de omliggende tekst en wordt hij op de basislijn van
	 * die regel uitgelijnd. Die regel is 25,6 hoog (body 16 op 1,6) en de kop zelf 22,4,
	 * en dat verschil zette élke eyebrow 5,1 lager dan zijn eigen doos. Elke naad die op
	 * een eyebrow uitkomt mat daardoor 5,1 te veel, en de afstand tot de titel eronder ook.
	 *
	 * Geen `width: fit-content` erbij. In de footer staat deze class op een
	 * `.accordion-button`, en components/subheading wordt ná components/accordion
	 * geïmporteerd, dus hij wint daar: een eigen breedte zou de `width: 100%` van
	 * Bootstrap overrulen, de knop laten krimpen en de chevron naast de tekst zetten in
	 * plaats van rechts. Zonder die breedte verandert er niets, want de eyebrow heeft geen
	 * achtergrond of rand en staat overal links uitgelijnd op zijn eigen regel.
	 */
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Asap", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.subheading:before {
  content: "";
  font-family: "Font Awesome 7 Sharp";
  font-weight: 900;
  font-size: 6px;
  line-height: 1;
  color: #FF5E4C;
}
/**
 * ====================================================
 * Openingstijden
 * ====================================================
 *
 * De weeklijst uit templates/opening-hours.php. Wordt gebruikt in de footer en op
 * de contact-template, dus de maten hier zijn de neutrale basis; de footer zet
 * zijn eigen gaps uit het design (zie templates/_footer.scss).
 *
 * De speciale dagen (templates/opening-hours-special.php) dragen alleen
 * .opening-hours en blijven op Bootstrap-kolommen. Daarom hangt het grid aan
 * .opening-hours-week en niet aan .opening-hours: anders zouden de rijen van die
 * partial in de grid-cellen vallen en naast elkaar komen te staan.
 */
.opening-hours-week {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 30px;
  row-gap: 5px;
}
.opening-hours-week .time {
  text-align: left;
}
.opening-hours-week .vandaag .day, .opening-hours-week .vandaag .time {
  color: #FF5E4C;
}
.opening-hours-item {
  display: contents;
}
/* ==========================================================================
   Contact-items
   ========================================================================== */
/**
 * Een lijstje van contactregels: per regel een icoon (of een kort label als KvK) van
 * 30 breed en daarachter de waarde, met 5 tussen de regels.
 *
 * Dit is een component en geen pagina-opmaak: de vorm komt uit het basis-thema. Hij
 * stond eerst genest in `.contact-page-area` in `templates/_layout.scss`; die nesting is
 * er op 13 augustus 2026 afgehaald toen de auteurspagina hetzelfde lijstje kreeg. Dat
 * lijstje is daar op 14 augustus weer vervallen (het templatedesign heeft geen
 * contactsectie), dus nu staat hij alleen nog op de contactpagina. De nesting blijft er
 * bewust af: een component hoort niet aan één pagina vast te zitten.
 *
 * De kleur van het icoon staat er bewust niet in: die zet de pagina zelf met een
 * utility (`text-quinary`), zodat hetzelfde lijstje op een andere achtergrond een
 * andere accentkleur kan krijgen.
 */
.contact-items i {
  text-align: left;
  min-width: 30px;
}
.contact-items li {
  display: flex;
  align-items: center;
}
.contact-items li:not(:first-of-type) {
  margin-top: 5px;
}
.contact-items li .item-label {
  text-align: left;
  min-width: 55px;
}
.contact-items li a {
  color: #212529;
}
.contact-items li a:hover {
  color: #4A246D;
}
/**
 * ====================================================
 * Nieuws-kaart (.post-item)
 * ====================================================
 *
 * De kaart uit het blok `cards_02` (design frame 16, kaart 450 breed). Staat als
 * component en niet bij één template, want templates/post-page/content-post.php
 * wordt hergebruikt door index, archive, search en author.
 *
 * Gemeten op 1920: kaart 450 breed, beeldvlak 450x337,5 (4:3), informatievlak
 * wit met padding 30/30/20, titel 32 op lh 1,2, metaregel 60 hoog met een
 * scheidingslijn erboven, en een icoonknop van 40x40.
 *
 * De wrapper zelf heeft géén achtergrond, rand of schaduw (read-only
 * geverifieerd op élk niveau in Figma). De radius van 25 zit in het design op de
 * delen: 25 boven op het beeld en 25 onder op het informatievlak. Hier staat hij
 * op de kaart plus `overflow: hidden`, wat optisch hetzelfde oplevert en de twee
 * radii niet uit elkaar kan laten lopen.
 */
.post-item {
  overflow: hidden;
  border-radius: 25px;
  /**
	 * De metaregel schakelt op de breedte van de káárt en niet op de viewport, dus
	 * de kaart is zelf de container. Zie de omslag onderaan dit bestand.
	 */
  container-type: inline-size;
  container-name: postcard;
  /**
	 * De hover-zoom komt van `.zoom-image` op de kaart zelf, en het clippen hoort
	 * hier: het beeld staat in een `.ratio`-doos en die knipt niet. Zonder deze
	 * regel groeit het geschaalde beeld over de bovenrand van het witte
	 * informatievlak, want `.post-item-beeld` is positioned en dat vlak niet.
	 */
  /**
	 * De categoriebadge, absoluut linksboven op het beeld met 20 offset. Het
	 * design zet hem daar bewust bovenop het beeld, dus dit is de bedoelde
	 * overhang en niet iets om naar binnen te duwen.
	 *
	 * Hoogte 34 = 14px op lh 1,6 (22,4) plus 2x6 padding.
	 */
  /**
	 * De metaregel staat onderaan de kaart en de titel erboven groeit, dus deze
	 * rij wordt met margin-top:auto tegen de onderkant geduwd. Zo staan de
	 * metaregels van drie kaarten naast elkaar op één lijn, ook als één titel
	 * een regel langer is.
	 */
  /**
	 * Datum en auteur onder elkaar zodra de kaart te smal wordt om ze naast elkaar
	 * te zetten. Naast elkaar is de designstand, maar die past niet altijd:
	 *
	 * De rij heeft naast de twee meta-items ook de knop van 40 en een gap van 15,
	 * en de body heeft 2x30 padding. Voor de langste Nederlandse datum ("28
	 * september 2026", met icoon en gap ongeveer 146) plus 30 gap plus een
	 * auteursnaam van ongeveer 92 is dat 268 aan tekst, dus een kaart van
	 * 268 + 15 + 40 + 60 = 383 breed. Onder de 400 stapelen we dus, met marge
	 * omdat de auteursnaam klantcontent is en langer kan worden dan "Voornaam".
	 *
	 * Waarom niet gewoon laten wrappen: dan wrapt het per kaart afhankelijk van
	 * hoe lang díe datum is, en dan liggen de metaregels van drie kaarten in één
	 * rij niet meer op één lijn en zakt de knop naar het midden van twee regels.
	 * Gemeten was dat 9,8px hoogteverschil tussen buurkaarten op 1440.
	 *
	 * En waarom de kaartbreedte en niet de viewport: bij 1520 is de kaart 450 en
	 * bij 1519 nog 350, terwijl bij 767 dezelfde kaart juist weer breed genoeg is
	 * omdat het grid dan naar één kolom gaat. De viewport zegt hier dus niets.
	 * Kent een browser @container niet, dan blijft de naast-elkaar-stand staan.
	 */
  /**
	 * Liggende variant uit de scaffold. Wordt in geen enkele template gebruikt,
	 * maar blijft staan: het is een scaffold-haak voor een kaart naast elkaar.
	 */
}
.post-item .post-item-beeld {
  overflow: hidden;
}
.post-item .label {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  padding: 6px 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 700;
  color: #fff;
  background-color: #4A246D;
  border-radius: 10px;
}
.post-item .post-item-link {
  text-decoration: none;
  color: inherit;
}
.post-item .post-item-body {
  padding: 30px 30px 20px;
  background-color: #fff;
}
.post-item .post-item-titel {
  /**
		 * 32 is de designwaarde en die geldt vanaf md. Daaronder is de kaart
		 * volle breedte en dan loopt een titel van 55 tekens op 32px over vijf
		 * regels; het design heeft geen mobiel frame voor dit blok, dus dit is
		 * een interpolatie tussen 1920 en mobiel.
		 */
  margin: 0 0 30px;
  font-size: 24px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .post-item .post-item-titel {
    font-size: 32px;
  }
}
.post-item .post-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #F5F2F0;
}
.post-item .post-item-meta-items {
  display: flex;
  align-items: center;
  column-gap: 30px;
  row-gap: 5px;
}
.post-item .post-item-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #212529;
}
.post-item .post-item-meta-item i {
  font-size: 0.875rem;
  color: #FF5E4C;
}
.post-item .post-item-knop {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #FF5E4C;
  border-radius: 10px;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.post-item:hover .post-item-knop {
  background-color: #4A246D;
}
@container postcard (max-width: 400px) {
  .post-item .post-item-meta-items {
    flex-direction: column;
    align-items: flex-start;
  }
}
.post-item.horizontal {
  min-height: 500px;
}
@media (max-width: 1199.98px) {
  .post-item.horizontal {
    min-height: 400px;
  }
}
@media (max-width: 767.98px) {
  .post-item.horizontal {
    height: auto;
  }
}
@media (min-width: 768px) {
  .post-item.horizontal .ratio {
    height: 100%;
  }
}
/**
 * ====================================================
 * Mini CTA
 * ====================================================
 *
 * Witte kaart met een vraag en twee linkregels. Gemeten op designframe 17: 330
 * breed, wit, radius 25, padding 30 rondom (dus 270 inhoud), vraag 24 met 30
 * eronder, twee regels met 15 ertussen.
 *
 * Een regel is 55 hoog: 15 padding boven de hairline plus 40 voor het vierkantje.
 * De hairline staat als border-top op de regel en dus ook boven de eerste, precies
 * zoals in het design; Figma rekent zijn 317 kaarthoogte zonder die 1px lijnen,
 * dus gebouwd wordt de kaart 319. Dat verschil is de lijn zelf en geen afwijking.
 *
 * De kaart heeft geen eigen breedte: die komt van de kolom waar hij in staat (330
 * in de zijkolom van een nieuwsbericht). Zo werkt hij ook op mobiel, waar de
 * zijkolom de volle breedte pakt.
 */
.mini-cta {
  padding: 30px;
  border-radius: 25px;
  background-color: #fff;
  /**
	 * De kenmerkenlijst tussen de vraag en de linkregels (designframe 7, node
	 * 9801:11936): drie regels met 15 ertussen, elk een coral vinkje van 16 met 10
	 * ernaast. Het label staat hier op Regular en niet op de SemiBold van een
	 * linkregel: dit is een opsomming en geen link, en dat verschil in gewicht is
	 * precies wat die twee groepen uit elkaar houdt.
	 *
	 * 30 eronder, gelijk aan de ruimte onder de vraag, zodat de kaart in het design
	 * op 466 uitkomt. Zonder lijst verandert er niets aan de andere vijf kaarten.
	 */
  /**
	 * De hele regel is de link, niet alleen het label of het vierkantje: dat geeft
	 * een klikvlak van 270 breed in plaats van 115, en dat scheelt op een telefoon.
	 */
  /**
	 * De 450-variant uit de zijkolom van `content_pagina_01` (designframe 15, node
	 * 7881:9848). Drie verschillen met de 330-kaart: padding 45, een eyebrow bóven de
	 * vraag met 45 eronder, en de vraag op 36 in plaats van 24 (die maat komt uit de
	 * `.h2`-class in de PHP, niet hier).
	 *
	 * Onder md valt de padding terug naar de 30 van de smalle kaart: daar is de
	 * zijkolom volle breedte op een telefoon en eet 45 aan beide kanten te veel van de
	 * tekstbreedte. Zelfde stap-terug als in `cta-blokken-02` en de voetklachten-kaart.
	 */
}
.mini-cta .mini-cta-titel {
  margin-bottom: 30px;
}
.mini-cta .mini-cta-kenmerken {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
.mini-cta .mini-cta-kenmerken li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mini-cta .mini-cta-kenmerken i {
  font-size: 1rem;
  color: #FF5E4C;
  flex-shrink: 0;
}
.mini-cta .mini-cta-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.mini-cta .mini-cta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 15px;
  border-top: 1px solid #F5F2F0;
  color: #212529;
  text-decoration: none;
}
.mini-cta .mini-cta-item:hover {
  color: #FF5E4C;
}
.mini-cta .mini-cta-item:hover .mini-cta-item-knop {
  background-color: #4A246D;
}
.mini-cta .mini-cta-item-tekst {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.mini-cta .mini-cta-item-tekst i {
  font-size: 1rem;
  color: #FF5E4C;
  flex-shrink: 0;
}
.mini-cta .mini-cta-item-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #FF5E4C;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
@media (min-width: 768px) {
  .mini-cta.mini-cta-ruim {
    padding: 45px;
  }
}
.mini-cta.mini-cta-ruim .subheading {
  margin-bottom: 45px;
}
.facetwp-facet {
  margin-bottom: 0 !important;
}
.facetwp-facet.facetwp-type-fselect {
  width: 100%;
  max-width: 100%;
}
.facetwp-facet.facetwp-type-fselect .fs-wrap {
  width: 100%;
}
.facetwp-facet.facetwp-type-fselect .fs-wrap.fs-open .fs-label-wrap {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.facetwp-facet .fs-label-wrap {
  background: #fff;
  border: 1px solid #d9dce0;
  border-radius: 10px;
}
.facetwp-facet .fs-label-wrap .fs-label {
  padding: 17px 24px;
  color: #212529;
}
.facetwp-facet .fs-arrow {
  width: auto;
  height: auto;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  right: 20px;
  display: flex;
  align-items: center;
}
.facetwp-facet .fs-arrow:before {
  font-family: "Font Awesome 7 Sharp";
  font-weight: 400;
  content: "";
  color: #4A246D;
}
.facetwp-facet .fs-dropdown {
  margin-top: -1px;
  background: #fff;
  border: 1px solid #d9dce0;
  border-top-color: transparent;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 32px 48px 0 rgba(0, 0, 0, 0.05);
}
.facetwp-facet .fs-search {
  background: transparent;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: #d9dce0;
}
.facetwp-facet .fs-search input::placeholder {
  color: #4A246D;
}
.facetwp-facet .fs-option, .facetwp-facet .fs-search, .facetwp-facet .fs-optgroup-label {
  padding: 10px 20px;
}
.facetwp-facet .fs-option:not([data-idx="0"]), .facetwp-facet .fs-search:not([data-idx="0"]), .facetwp-facet .fs-optgroup-label:not([data-idx="0"]) {
  color: #4A246D;
  transition: all 0.2s ease-in-out;
}
.facetwp-facet .fs-option:not([data-idx="0"]):hover, .facetwp-facet .fs-search:not([data-idx="0"]):hover, .facetwp-facet .fs-optgroup-label:not([data-idx="0"]):hover {
  color: #4A246D;
}
.facetwp-facet .fs-option.selected, .facetwp-facet .fs-option:focus, .facetwp-facet .fs-search.selected, .facetwp-facet .fs-search:focus, .facetwp-facet .fs-optgroup-label.selected, .facetwp-facet .fs-optgroup-label:focus {
  background-color: transparent !important;
  color: #4A246D;
}
@media (min-width: 576px) {
  .facetwp-facet.facetwp-type-fselect {
    width: 330px;
  }
}
body {
  /**
	 * Het label staat in de tekstkleur en niet in het paars, op verzoek van Monica
	 * (13 augustus 2026): dezelfde kleur als de titel erboven. Het paarse contactblok
	 * zet er zijn eigen wit overheen, want daar staat het formulier op een paars paneel.
	 */
  /**
	 * Het formulier is zijn eigen container, zodat de footer eronder op de breedte
	 * van het formulier kan reageren in plaats van op de breedte van het scherm.
	 * Dat is hier de juiste maat: op de frontpage staat dit formulier in een paneel
	 * van 580 tot 880 breed en op de contactpagina in een kolom van 445 tot 570, dus
	 * op precies dezelfde viewport past er in het ene geval wel iets naast elkaar en
	 * in het andere niet. Een breakpoint op de viewport heeft daar geen antwoord op.
	 */
  /**
	 * De bevestiging na het verzenden ("Bedankt voor je bericht!").
	 *
	 * Gecentreerd, want het is één regel in een balk over de volle breedte van het
	 * formulier: links uitgelijnd hangt die tekst in een leeg vlak. De radius is
	 * `$border-radius` (10), dezelfde als de velden die er stonden.
	 *
	 * De rand volgt de scheidingslijn van het blok waar het formulier in staat, in
	 * plaats van het zwart dat de scaffold hier zette (keuze Monica, 21 augustus 2026).
	 * In het contactblok is dat het paars van de lijntjes in de kolom ernaast, dus
	 * `rgba($secondary, .25)`, precies zoals `templates/_contact-blok.scss` het zet.
	 * De tekst is daar wit en dat blijft zo: die erft van het paarse paneel.
	 */
  /**
	 * Op de contactpagina staat het formulier niet op een paars paneel maar op de
	 * paginakleur, en de lijnen in de linkerkolom zijn daar `border-quaternary`
	 * (het beige uit `template-contact.php`). De bevestiging volgt die lijn, zodat
	 * de rand op elke plek dezelfde lijn is als het blok eromheen.
	 */
}
body .gform_required_legend {
  display: none;
}
body .gform_wrapper.gravity-theme .gfield_label {
  margin-bottom: 5px;
  font-size: 0.875rem;
  color: #212529;
}
body .gform_wrapper.gravity-theme .gfield_required {
  color: #fa5424;
}
body .gform_wrapper.gravity-theme {
  container-type: inline-size;
  container-name: gform;
}
body .gform_wrapper.gravity-theme .gform_footer {
  margin-top: 20px;
  padding: 0;
}
body .gform_wrapper.gravity-theme .gform_footer .row {
  /**
			 * Standaard onder elkaar: de privacytekst op de volle formulierbreedte en
			 * links uitgelijnd, met de knop eronder op zijn eigen breedte. De negatieve
			 * marges van de .row en de padding van de kolommen heffen elkaar op, dus de
			 * tekst begint exact op de linkerrand van de velden erboven.
			 */
}
body .gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}
body .gform_wrapper.gravity-theme .gform_fields .ginput_container {
  display: flex;
}
body .gform_wrapper.gravity-theme input[type=color], body .gform_wrapper.gravity-theme input[type=date], body .gform_wrapper.gravity-theme input[type=datetime-local], body .gform_wrapper.gravity-theme input[type=datetime], body .gform_wrapper.gravity-theme input[type=email], body .gform_wrapper.gravity-theme input[type=month], body .gform_wrapper.gravity-theme input[type=number], body .gform_wrapper.gravity-theme input[type=password], body .gform_wrapper.gravity-theme input[type=search], body .gform_wrapper.gravity-theme input[type=tel], body .gform_wrapper.gravity-theme input[type=text], body .gform_wrapper.gravity-theme input[type=time], body .gform_wrapper.gravity-theme input[type=url], body .gform_wrapper.gravity-theme input[type=week], body .gform_wrapper.gravity-theme select, body .gform_wrapper.gravity-theme textarea {
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  padding: 19px 23px;
  /**
		 * Geen zichtbare rand om een veld, op verzoek van Monica (13 augustus 2026): het
		 * witte vlak op de crème achtergrond is genoeg om te zien waar je typt.
		 *
		 * De rand blijft wél staan, alleen doorzichtig. Hij telt namelijk mee in de
		 * hoogte (4 van de 66), dus met `border: none` zouden alle velden 4 lager worden,
		 * en de focus-stand hieronder wisselt alleen de kleur: zonder rand zou een veld
		 * bij het aanklikken 4 hoger worden en de rest van het formulier opschuiven.
		 *
		 * 2 dik en niet 1, op verzoek van Monica (21 augustus 2026): een coral lijn van
		 * 1px is op een wit veld een dun signaal. De padding erboven is daarom met 1
		 * verlaagd, zodat het veld nog steeds de 66 uit het design haalt.
		 */
  border: 2px solid transparent;
  /**
		 * Onder 641 zet Gravity Forms in zijn eigen `basic.min.css` een `line-height: 2`
		 * en een `min-height: 32` op élke input. Die stylesheet laadt ná `main.css` en de
		 * selector weegt zwaarder (vier `:not([type=…])` tellen elk als een attribuut),
		 * dus onze regelhoogte verloor daarvan en het veld werd op een telefoon 64 in
		 * plaats van 56. Dat is precies de band waar het formulier het meest in beeld is.
		 * Vandaar `!important`: met specificiteit alleen win je hier niet zonder een
		 * selector die niemand meer kan lezen.
		 */
  /**
		 * Het veld waarin je typt krijgt een coral rand, op verzoek van Monica
		 * (21 augustus 2026). Coral is in dit thema de actieve kleur (links, iconen in
		 * de contactgegevens, de pijl op een knop), dus een actief veld hoort daarbij.
		 *
		 * Coral op wit is 3,01:1 en dat is genoeg: WCAG vraagt voor een rand om een
		 * bedieningselement 3:1 en niet de 4,5 die voor tekst geldt.
		 */
}
@media only screen and (max-width: 641px) {
  body .gform_wrapper.gravity-theme input[type=color], body .gform_wrapper.gravity-theme input[type=date], body .gform_wrapper.gravity-theme input[type=datetime-local], body .gform_wrapper.gravity-theme input[type=datetime], body .gform_wrapper.gravity-theme input[type=email], body .gform_wrapper.gravity-theme input[type=month], body .gform_wrapper.gravity-theme input[type=number], body .gform_wrapper.gravity-theme input[type=password], body .gform_wrapper.gravity-theme input[type=search], body .gform_wrapper.gravity-theme input[type=tel], body .gform_wrapper.gravity-theme input[type=text], body .gform_wrapper.gravity-theme input[type=time], body .gform_wrapper.gravity-theme input[type=url], body .gform_wrapper.gravity-theme input[type=week], body .gform_wrapper.gravity-theme select, body .gform_wrapper.gravity-theme textarea {
    line-height: 1.5 !important;
    min-height: 0;
  }
}
body .gform_wrapper.gravity-theme input[type=color]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=date]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=datetime-local]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=datetime]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=email]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=month]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=number]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=password]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=search]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=tel]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=text]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=time]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=url]:-moz-placeholder, body .gform_wrapper.gravity-theme input[type=week]:-moz-placeholder, body .gform_wrapper.gravity-theme select:-moz-placeholder, body .gform_wrapper.gravity-theme textarea:-moz-placeholder {
  color: rgba(33, 37, 41, 0.5);
}
body .gform_wrapper.gravity-theme input[type=color]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=date]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=datetime-local]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=datetime]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=email]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=month]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=number]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=password]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=search]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=tel]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=text]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=time]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=url]::-moz-placeholder, body .gform_wrapper.gravity-theme input[type=week]::-moz-placeholder, body .gform_wrapper.gravity-theme select::-moz-placeholder, body .gform_wrapper.gravity-theme textarea::-moz-placeholder {
  color: rgba(33, 37, 41, 0.5);
}
body .gform_wrapper.gravity-theme input[type=color]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=date]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=datetime-local]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=datetime]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=email]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=month]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=number]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=password]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=search]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=tel]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=text]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=time]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=url]:-ms-input-placeholder, body .gform_wrapper.gravity-theme input[type=week]:-ms-input-placeholder, body .gform_wrapper.gravity-theme select:-ms-input-placeholder, body .gform_wrapper.gravity-theme textarea:-ms-input-placeholder {
  color: rgba(33, 37, 41, 0.5);
}
body .gform_wrapper.gravity-theme input[type=color]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=date]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=datetime-local]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=datetime]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=email]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=month]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=number]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=password]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=search]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=tel]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=text]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=time]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=url]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme input[type=week]::-webkit-input-placeholder, body .gform_wrapper.gravity-theme select::-webkit-input-placeholder, body .gform_wrapper.gravity-theme textarea::-webkit-input-placeholder {
  color: rgba(33, 37, 41, 0.5);
}
@media (max-width: 991.98px) {
  body .gform_wrapper.gravity-theme input[type=color], body .gform_wrapper.gravity-theme input[type=date], body .gform_wrapper.gravity-theme input[type=datetime-local], body .gform_wrapper.gravity-theme input[type=datetime], body .gform_wrapper.gravity-theme input[type=email], body .gform_wrapper.gravity-theme input[type=month], body .gform_wrapper.gravity-theme input[type=number], body .gform_wrapper.gravity-theme input[type=password], body .gform_wrapper.gravity-theme input[type=search], body .gform_wrapper.gravity-theme input[type=tel], body .gform_wrapper.gravity-theme input[type=text], body .gform_wrapper.gravity-theme input[type=time], body .gform_wrapper.gravity-theme input[type=url], body .gform_wrapper.gravity-theme input[type=week], body .gform_wrapper.gravity-theme select, body .gform_wrapper.gravity-theme textarea {
    padding: 14px 19px;
  }
}
body .gform_wrapper.gravity-theme input[type=color]:focus, body .gform_wrapper.gravity-theme input[type=color]:focus-visible, body .gform_wrapper.gravity-theme input[type=date]:focus, body .gform_wrapper.gravity-theme input[type=date]:focus-visible, body .gform_wrapper.gravity-theme input[type=datetime-local]:focus, body .gform_wrapper.gravity-theme input[type=datetime-local]:focus-visible, body .gform_wrapper.gravity-theme input[type=datetime]:focus, body .gform_wrapper.gravity-theme input[type=datetime]:focus-visible, body .gform_wrapper.gravity-theme input[type=email]:focus, body .gform_wrapper.gravity-theme input[type=email]:focus-visible, body .gform_wrapper.gravity-theme input[type=month]:focus, body .gform_wrapper.gravity-theme input[type=month]:focus-visible, body .gform_wrapper.gravity-theme input[type=number]:focus, body .gform_wrapper.gravity-theme input[type=number]:focus-visible, body .gform_wrapper.gravity-theme input[type=password]:focus, body .gform_wrapper.gravity-theme input[type=password]:focus-visible, body .gform_wrapper.gravity-theme input[type=search]:focus, body .gform_wrapper.gravity-theme input[type=search]:focus-visible, body .gform_wrapper.gravity-theme input[type=tel]:focus, body .gform_wrapper.gravity-theme input[type=tel]:focus-visible, body .gform_wrapper.gravity-theme input[type=text]:focus, body .gform_wrapper.gravity-theme input[type=text]:focus-visible, body .gform_wrapper.gravity-theme input[type=time]:focus, body .gform_wrapper.gravity-theme input[type=time]:focus-visible, body .gform_wrapper.gravity-theme input[type=url]:focus, body .gform_wrapper.gravity-theme input[type=url]:focus-visible, body .gform_wrapper.gravity-theme input[type=week]:focus, body .gform_wrapper.gravity-theme input[type=week]:focus-visible, body .gform_wrapper.gravity-theme select:focus, body .gform_wrapper.gravity-theme select:focus-visible, body .gform_wrapper.gravity-theme textarea:focus, body .gform_wrapper.gravity-theme textarea:focus-visible {
  border-color: #FF5E4C;
}
body .gform_wrapper.gravity-theme select {
  padding-right: 56px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../images/iconen/gravityforms/dropdown.svg") no-repeat right center;
  background-position: 96.6% center;
  background-size: 12px;
}
body .gform_wrapper.gravity-theme input[type=file] {
  border-radius: 10px;
  border: 1px dashed #c8ced4;
  padding: 15px;
}
body .gform_wrapper.gravity-theme input[type=file]::file-selector-button {
  margin-right: 15px;
  padding: 12px 24px;
  font-family: "Asap", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: #fff;
  background: #4A246D;
  border-width: 1px;
  border-style: solid;
  border-color: #4A246D;
  border-radius: 25px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
}
body .gform_wrapper.gravity-theme input[type=file]::file-selector-button:hover {
  background: #7137a7;
  border-color: #7137a7;
}
body .gform_wrapper.gravity-theme .gfield textarea.large {
  height: 200px;
  min-height: 200px;
}
body .gform_wrapper.gravity-theme .description, body .gform_wrapper.gravity-theme .gfield_description, body .gform_wrapper.gravity-theme .gsection_description, body .gform_wrapper.gravity-theme .instruction {
  padding-top: 2px;
  line-height: 1;
  font-size: 0.875em;
}
body .gform_wrapper .gfield_validation_message, body .gform_wrapper .validation_message {
  margin-top: 0;
  padding: 2px 20px;
  background: #fa5424;
  border-color: transparent;
  color: #fff;
}
body .gform_wrapper .gfield_error [aria-invalid=true] {
  border: 1px solid #c8ced4;
}
body .gform_wrapper.gravity-theme .terms-text p {
  margin-bottom: 0;
}
body .gform_wrapper.gravity-theme .terms-text p a {
  text-decoration: underline;
  text-decoration-color: #4A246D;
}
body .gform_wrapper.gravity-theme .terms-text p a:hover {
  text-decoration-color: transparent;
}
body .gform_wrapper.gravity-theme .gform_validation_errors {
  margin-block-start: 0;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: none;
}
body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
  display: flex;
  align-items: center;
  margin-block-start: 0;
  font-family: "Asap", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 500;
}
body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error .gform-icon {
  position: relative;
  inset-inline-start: 0;
  margin-right: 15px;
  font-size: 1rem;
  line-height: 1;
}
body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error .gform-icon:before {
  font-family: "Font Awesome 7 Sharp";
  content: "";
  font-weight: 900;
}
body .gform_wrapper.gravity-theme .gfield_validation_message, body .gform_wrapper.gravity-theme .validation_message {
  margin-top: 3px;
  padding: 2px 8px;
  font-family: "Asap", sans-serif;
  font-size: 0.625rem;
  line-height: 1.6;
  font-weight: 500;
  border-color: transparent;
  border-radius: 5px;
}
body .gform_confirmation_message {
  padding: 15px 30px;
  border-radius: 10px;
  border: 1px solid rgba(39, 19, 58, 0.25);
  text-align: center;
}
body .contact-page-area .gform_confirmation_message {
  border-color: #E0D7D1;
}
body .gform_wrapper.gravity-theme .gform_validation_errors {
  background: rgba(250, 84, 36, 0.1);
}
body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
  color: #fa5424;
}
body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error .gform-icon {
  color: #fa5424;
}
body .gform_wrapper.gravity-theme .gfield_validation_message, body .gform_wrapper.gravity-theme .validation_message {
  color: #fa5424;
  background: rgba(250, 84, 36, 0.1);
}
/**
 * ====================================================
 * Formulier-footer naast elkaar, als het formulier breed genoeg is
 * ====================================================
 *
 * Het design zet de privacytekst rechts uitgelijnd links van de verzendknop. Dat
 * werkt alleen als de tekst genoeg ruimte heeft om op twee regels te blijven:
 * gemeten valt hij bij 461 nog op twee regels en bij 415 al op drie. Met de knop
 * (155) plus de gutter erbij is 630 de ondergrens voor het hele blok. Dat was 620
 * toen de gutter nog 10 was; hij is meegegroeid met de verdubbeling naar 20, anders
 * houdt de tekst in de krapste stand 10 minder ruimte over en wipt hij daar naar
 * een derde regel.
 *
 * Een container-query en geen media-query, want de beslissende maat is de breedte
 * van het formulier en niet die van het scherm: op de frontpage staat dit
 * formulier in een paneel van 580 tot 880 en op de contactpagina in een kolom van
 * 445 tot 570. Op dezelfde viewport past het dus in het ene geval wel en in het
 * andere niet.
 *
 * Kent een browser @container niet, dan valt hij terug op de gestapelde variant.
 * Dat is de veilige kant: die klopt altijd, alleen wijkt hij op een breed
 * formulier af van het design.
 *
 * Let op de `body` vooraan. De gestapelde basis komt van `@extend .col-12` en die
 * @extend staat binnen het `body`-blok hierboven, dus de gegenereerde selector
 * krijgt er een `body` bij en weegt een element-selector zwaarder dan dezelfde
 * selector zonder. Zonder die `body` pakten hier alleen `max-width` en
 * `text-align`, en bleven `flex` en `width` op de kolom-12-waarden staan: de tekst
 * stond dan rechts uitgelijnd maar nog steeds boven de knop.
 */
@container gform (min-width: 630px) {
  body .gform_wrapper.gravity-theme .gform_footer .row {
    justify-content: flex-end;
    /**
		 * Niet de grid-gutter van 30. Een gutter verdeelt zich over de twee kolommen,
		 * dus dit is 10 padding links en 10 rechts en daarmee 20 zichtbare ruimte
		 * tussen de privacytekst en de verzendknop. Stond op 10 (dus 5 + 5) en is op
		 * verzoek van Monica verdubbeld, 13 augustus 2026.
		 */
    --bs-gutter-x: 20px;
  }
  body .gform_wrapper.gravity-theme .gform_footer .row .col-voorwaarden {
    flex: 1 1 0;
    width: auto;
    max-width: 513px;
    text-align: right;
  }
  body .gform_wrapper.gravity-theme .gform_footer .row .col-button {
    flex: 0 0 auto;
    width: auto;
  }
}
/* ========================================================================
	WBZ Attentie (plug-in `wbz-attentie`)
========================================================================

	De module levert drie onderdelen: de attentiebalk bovenaan, maximaal twee
	zwevende knoppen tegen de zijkant, en een popup. Zijn eigen CSS staat op
	Tailwind-standaardkleuren (emerald-300 voor de balk, blue-400 voor de knoppen)
	die met dit design niets te maken hebben, dus alle drie moeten om.

	VIER DINGEN DIE HIER BEWUST ZO STAAN

	1. Alles is genest onder `body`, zoals de README van de module voorschrijft. Dat
	   is geen stijlkeuze maar een noodzaak: de plug-in enqueue't zijn CSS op
	   `wp_enqueue_scripts` priority 25 en dit thema op de standaard 10, dus zijn
	   stylesheet staat ná `main.css` en wint bij gelijke specificiteit. `#wbz_topbar`
	   is bovendien een id (1,0,0), dus daar is `body` ook echt nodig.
	2. Alleen classes en id's die met `wbz_` beginnen. De module zet op elk element
	   ook een `wza_`-variant (de oude naam) en een eigen mini-grid (`wbz-col-12`,
	   `md:wbz-col`); die laat je met rust, anders breekt de layout van de module.
	3. De knoppen krijgen de maten van `.btn` uit het design (hoogte 50, padding
	   12/24, radius 25, Asap SemiBold) maar níet de class `.btn`, want die markup
	   staat in de plug-in. De waarden komen uit de variabelen, dus ze blijven
	   meelopen als het design wijzigt.
	4. `gap` staat hier expliciet. `.btn` heeft die sinds 10 augustus 2026 zelf
	   (`components/_buttons.scss`), maar dit zijn geen `.btn`'s, dus zonder deze
	   regel plakt het pijltje uit de icoon-hook tegen het label.

	De iconen komen uit `inc/plugins/wbz-attentie.php` via de `wbz_*_button_after`-
	hooks van de module, met `fa-sharp` omdat de kit van dit project alleen Sharp en
	Brands levert.

======================================================================== */
body {
  /* ---------- Attentiebalk ---------- */
  /* ---------- Zwevende knoppen ---------- */
  /* ---------- Popup ---------- */
}
body #wbz_topbar {
  background-color: #27133A;
  color: #fff;
}
body #wbz_topbar a:not(.wbz_topbar-button) {
  color: #fff;
  text-decoration: underline;
}
body #wbz_topbar p:last-child {
  margin-bottom: 0;
}
body .wbz_topbar-inner {
  padding-top: 15px;
  padding-bottom: 15px;
}
body .wbz_topbar-button, body .wbz_popup-content-button, body .wbz_floating-button {
  gap: 10px;
  padding: 12px 24px;
  border-radius: 25px;
  font-family: "Asap", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
body .wbz_topbar-button {
  background-color: #fff;
  color: #212529;
}
body .wbz_topbar-button i {
  color: #FF5E4C;
}
body .wbz_topbar-button:hover {
  background-color: #fff;
  color: #212529;
}
body .wbz_floating-button {
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
}
body .wbz_floating-button-0 {
  background-color: #4A246D;
  color: #fff;
}
body .wbz_floating-button-0:hover {
  background-color: #3f1f5d;
  color: #fff;
}
body .wbz_floating-button-1 {
  background-color: #27133A;
  color: #fff;
}
body .wbz_floating-button-1:hover {
  background-color: #211031;
  color: #fff;
}
body #wbz_popup {
  padding: 45px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.1);
}
@media (max-width: 767.98px) {
  body #wbz_popup {
    padding: 30px;
  }
}
body .wbz_popup-title {
  margin-bottom: 20px;
  color: #212529;
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  font-size: calc(1.325rem + 0.7105263158vw);
}
@media (min-width: 1520px) {
  body .wbz_popup-title {
    font-size: 2rem;
  }
}
body .wbz_popup-image img {
  border-radius: 10px;
}
body .wbz_popup-content-button {
  margin-top: 30px;
  background-color: #FF5E4C;
  color: #fff;
}
body .wbz_popup-content-button i {
  color: #4A246D;
}
body .wbz_popup-content-button:hover {
  background-color: #ff7667;
  color: #fff;
}
#breadcrumbs i {
  margin: 0 8px;
  width: auto;
}
/**
 * ====================================================
 * Topbar
 * ====================================================
 *
 * Volle-breedte balk in de body-kleur met de content op de 1410-container.
 * Links het Google-reviews-blok (loopt over de volle balkhoogte), rechts de
 * contactitems met bolletjes als scheidingsteken.
 */
.topbars-01 {
  background-color: #F5F2F0;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 21;
  /**
	 * Google-reviews (component uit de Webzaken-snippet, hier op paars)
	 */
  /**
	 * Contactitems rechts
	 */
  /**
	 * Telefoon en Contact staan in het design zwaarder dan de openingstijden, en zij
	 * zijn ook de enige twee met een hover.
	 *
	 * De openingstijden zijn geen link maar een mededeling, dus een hover-kleur daar
	 * belooft iets wat er niet is: de bezoeker gaat klikken en er gebeurt niets. De
	 * hover hoort dus op de selector van deze twee en niet op de gedeelde
	 * .topbar-item.
	 *
	 * De hoverkleur is coral en niet paars: coral is in dit design de interactiekleur
	 * (het is ook de linkkleur) en de iconen van deze items staan er al in, dus het
	 * hele item wordt bij hover één kleur in plaats van half paars en half coral.
	 */
}
.topbars-01 .row {
  min-height: 38px;
}
@media (min-width: 992px) {
  .topbars-01 .row {
    min-height: 42px;
  }
}
.topbars-01 .google-review-average {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 180px;
  padding-inline: 15px;
  /**
		 * De sterren staan links en het aantal rechts tegen de binnenrand, met de
		 * overgebleven ruimte ertussen. In het design zijn die twee randen even breed
		 * als de padding: mobiel loopt de tekst tot 165 in een blok van 180 (dus 15),
		 * op desktop tot 250 in een blok van 270 (dus 20). Het gat is daarmee
		 * restruimte en geen vaste maat, en dat is wat space-between doet.
		 *
		 * De gap is alléén een ondergrens en bewust lager dan de designwaarde (25
		 * mobiel, 32 desktop). Die designwaarden gaan namelijk uit van een sterrenrij
		 * van 74 en een label van 124, terwijl de webfont de sterrenrij op 75 zet.
		 * Met 32 als ondergrens telt de inhoud dan op tot 270,8 en werd het blok een
		 * pixel breder dan het logoblok in de header. Nu blijft het blok exact op de
		 * tokenbreedte en neemt het gat de rest op: gemeten 24,9 op mobiel en 31,2 op
		 * desktop, dus binnen een pixel van het design.
		 */
  justify-content: space-between;
  gap: 20px;
  background-color: #4A246D;
  color: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}
@media (min-width: 992px) {
  .topbars-01 .google-review-average {
    min-width: 270px;
    padding-inline: 20px;
    gap: 25px;
  }
}
.topbars-01 .google-review-average.google-review-average-leeg {
  justify-content: center;
}
.topbars-01 .google-review-average .stars-score {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #FF5E4C;
  line-height: 1;
}
.topbars-01 .google-review-average .aantal-reviews {
  color: #fff;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
}
.topbars-01 .google-review-average:hover .aantal-reviews {
  text-decoration-color: transparent;
}
.topbars-01 .topbar-contact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  padding-block: 8px;
  height: 100%;
}
.topbars-01 .topbar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #212529;
  text-decoration: none;
}
.topbars-01 .topbar-item i {
  font-size: 16px;
  color: #FF5E4C;
}
.topbars-01 .topbar-item-phone, .topbars-01 .topbar-item-contact {
  font-weight: 700;
}
.topbars-01 .topbar-item-phone:hover, .topbars-01 .topbar-item-contact:hover {
  color: #FF5E4C;
}
.topbars-01 .topbar-item-phone {
  gap: 8px;
}
.topbars-01 .topbar-divider {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #E0D7D1;
  flex-shrink: 0;
}
/**
 * ====================================================
 * Header
 * ====================================================
 *
 * De topbar staat in _topbar.scss, het off-canvas menu in _flyout-nav.scss en
 * de hero's in _hero.scss.
 */
.headers-01 {
  position: relative;
  z-index: 20;
  background-color: #F5F2F0;
  /**
	 * Onder lg valt het logoblok niet over de hero (zie .brand-logo) en komt de
	 * ruimte ernaartoe van deze padding. Die is even groot als de witruimte links
	 * en rechts van de hero, dus 15: dezelfde waarde als de px-15 op de
	 * hero-container. Zo staat het blok net zo ver van de hero als de hero van de
	 * schermrand.
	 *
	 * De padding staat op de header en niet als marge op het logoblok zelf: het
	 * blok is het hoogste item in de rij, dus een marge eronder rekt de rij op en
	 * dan zakt de hamburger een halve marge onder het midden van het logo. Met de
	 * padding op de header blijven de twee op elkaar gecentreerd.
	 *
	 * Vanaf lg hangt het blok weer over de hero en is deze ruimte dus niet nodig.
	 */
  padding-bottom: 15px;
  /**
	 * Zonder banner sluit de header af met een hairline (designframe 14, node
	 * 7850:10273: een `strokeBottomWeight: 1` in `#E0D7D1` met `strokeAlign: INSIDE`
	 * op de header-instance zelf, over de volle 1920 en dus niet gecapt op de
	 * container). Zonder die lijn loopt de crème header naadloos over in een crème
	 * contentblok en is er geen enkele scheiding tussen de chrome en de pagina.
	 *
	 * In het design staat de stroke op 5 van de 18 frames en niet op álle bannerloze
	 * frames (wél 4, 6, 10, 11 en 14; níet 3, 5, 7, 8, 9 en 15, die net zo goed geen
	 * banner hebben). Dat is een inconsistentie in het design; op verzoek van Monica
	 * staat de lijn hier op élke pagina zonder banner. Zet hem dus niet weg omdat een
	 * volgende designmeting hem op een specifiek frame mist.
	 *
	 * `border-bottom` en niet een pseudo-element, want dat is wat een stroke ís. De
	 * hoogte van de balk komt van de `min-height` op de `.row`, dus de header meet met
	 * lijn 90 in plaats van de 89 uit het design: dat verschil ís de lijn. Die 1px
	 * compenseren we niet, gelijk aan hoe de accordion-randen behandeld zijn (zie
	 * .claude/rules/figma-uitlezen.md).
	 *
	 * **De onderpadding van 15 blijft staan, en dat is bewust.** Vanaf lg is die 0 en
	 * ligt de lijn dus op de onderrand van de balk, met het logoblok er 36 overheen:
	 * de designstand. Onder lg hangt het blok niet meer over, en daar hoort de lijn 15
	 * ónder het logoblok te liggen in plaats van er strak tegenaan, precies dezelfde
	 * ruimte die op een pagina mét banner tussen het blok en de banner zit. Zo staat op
	 * élke pagina 15 tussen het logoblok en wat er onder de header begint, of dat nu
	 * een banner, een hairline of een full-bleed introblok is. Die padding hier op 0
	 * zetten haalde dat weg op Voetadvies en Onze praktijk, waar het introblok direct
	 * tegen het logoblok aan kwam te staan.
	 */
  /**
	 * De desktop-nav gaat pas op xl aan en niet op lg. Op 1024 past de navgroep
	 * (759 breed) niet naast het logoblok (270) in een container van 930: de
	 * groep werd naar een tweede regel geduwd, de header groeide van 89 naar
	 * 139 en de overhang van het logoblok verdween. Vanaf xl is de container
	 * 1140 en past het wel.
	 */
  /**
	 * De rijhoogte. 82 is de mobiele designwaarde en 89 de desktopwaarde, en die
	 * laatste hoort bij de state waarin het logoblok overhangt: dan is het blok 125
	 * en houdt de negatieve marge de rij op 89. Die state begint op lg, net als de
	 * blokmaat zelf.
	 */
  /**
	 * Logoblok. Vanaf lg een decoratief overhangend element: in het design is het
	 * blok 125 hoog in een header van 89, dus het steekt 36px naar onderen uit en
	 * legt zich over de bovenkant van de hero. Dat is bewust en wordt niet naar
	 * binnen geforceerd. De negatieve marge houdt de header op 89 in plaats van hem
	 * naar 125 op te rekken. Zonder die overhang zou de header in de reeks waar de
	 * hamburger het menu overneemt 155 hoog worden, en dat is voor een balk met
	 * alleen een logo en een hamburger te veel.
	 *
	 * Onder lg is het blok 83 hoog en hangt het niet over: daar sluit het binnen de
	 * header af en staat de ruimte naar de hero als padding op .headers-01
	 * hierboven.
	 *
	 * De omslag naar de desktopmaat zit op lg en niet op xl, ook al gaat de
	 * desktop-nav pas op xl aan. Reden: het blok moet altijd even breed zijn als
	 * het Google-reviews-blok in de topbar, en dat schakelt op lg omdat het label
	 * daar van "Reviews" naar "348 Google Reviews" gaat. Stond het logoblok nog op
	 * xl, dan was het tussen 992 en 1199 180 breed onder een reviews-blok van 270.
	 * Beide maten komen daarom uit hetzelfde token. De hoogte van 125 hoort bij die
	 * breedte: het logo is daar 180 breed en dus 65 hoog, plus 2×30 padding.
	 */
  /**
	 * Navigatie en knop rechts
	 */
}
@media (min-width: 992px) {
  .headers-01 {
    padding-bottom: 0;
  }
}
.headers-01.headers-01-lijn {
  border-bottom: 1px solid #E0D7D1;
}
.headers-01 .row {
  min-height: 82px;
}
@media (min-width: 992px) {
  .headers-01 .row {
    min-height: 89px;
  }
}
.headers-01 .brand-logo {
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 83px;
  padding-block: 20px;
  background-color: #4A246D;
  border-radius: 0 0 25px 25px;
}
.headers-01 .brand-logo img {
  width: 120px;
  height: auto;
}
@media (min-width: 992px) {
  .headers-01 .brand-logo {
    width: 270px;
    height: 125px;
    margin-bottom: -36px;
    padding-block: 30px;
  }
  .headers-01 .brand-logo img {
    width: 180px;
  }
}
.headers-01 .header-nav-group {
  display: flex;
  align-items: center;
  gap: 45px;
}
.headers-01 .header-cta {
  align-items: center;
  gap: 10px;
}
.headers-01 .header-cta i {
  color: #4A246D;
  font-size: 16px;
}
.headers-01 .navbar-toggler {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 0;
  padding: 0;
}
.headers-01 .navbar-toggler:focus {
  box-shadow: none;
}
.headers-01 .navbar-toggler .hamburger-label {
  font-family: "General Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  color: #212529;
}
.headers-01 .navbar ul.navbar-nav {
  display: flex;
  flex-direction: row;
  gap: 45px;
}
.headers-01 .navbar ul.navbar-nav li .nav-link:active, .headers-01 .navbar ul.navbar-nav li .nav-link:focus, .headers-01 .navbar ul.navbar-nav li .nav-link:focus-visible, .headers-01 .navbar ul.navbar-nav li .dropdown-item:active, .headers-01 .navbar ul.navbar-nav li .dropdown-item:focus, .headers-01 .navbar ul.navbar-nav li .dropdown-item:focus-visible {
  background: none;
}
.headers-01 .navbar ul.navbar-nav li .nav-link:active, .headers-01 .navbar ul.navbar-nav li .dropdown-item:active {
  outline: none;
}
.headers-01 .navbar ul.navbar-nav li .nav-link {
  padding: 0;
  color: #212529;
}
.headers-01 .navbar ul.navbar-nav li .nav-link.active, .headers-01 .navbar ul.navbar-nav li .nav-link:hover {
  color: #FF5E4C;
}
.headers-01 .navbar ul.navbar-nav li .dropdown-item {
  padding: 0;
  color: #212529;
}
.headers-01 .navbar ul.navbar-nav li .dropdown-item.active, .headers-01 .navbar ul.navbar-nav li .dropdown-item:hover {
  background: transparent;
  color: #FF5E4C;
}
.headers-01 .navbar ul.navbar-nav li.dropdown .dropdown-menu {
  margin-top: 0;
  padding: 20px;
  background-color: transparent;
  border: 0;
  border-top: 15px solid transparent;
  border-radius: 0;
}
.headers-01 .navbar ul.navbar-nav li.dropdown .dropdown-menu:before {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
.headers-01 .navbar ul.navbar-nav li.dropdown .dropdown-menu > li {
  position: relative;
  z-index: 1;
  padding-block: 15px;
}
.headers-01 .navbar ul.navbar-nav li.dropdown .dropdown-menu > li:first-child {
  padding-top: 0;
}
.headers-01 .navbar ul.navbar-nav li.dropdown .dropdown-menu > li:last-child {
  padding-bottom: 0;
}
.headers-01 .navbar ul.navbar-nav li.dropdown .dropdown-menu > li:not(:first-child):before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  border-top: 1px solid #F5F2F0;
}
.headers-01 .navbar ul.navbar-nav li.dropdown:hover .dropdown-toggle:after {
  transform: scaleY(-1);
}
.headers-01 .dropdown .dropdown-menu {
  display: block;
  left: -20px;
  min-width: 210px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
}
.headers-01 .dropdown:hover .dropdown-menu {
  opacity: 1;
  margin-top: 0;
  visibility: visible;
}
.dropdown-toggle:after {
  font-family: "Font Awesome 7 Sharp";
  font-weight: 400;
  font-size: 16px;
  content: "";
  margin-left: 8px;
  color: #FF5E4C;
  vertical-align: baseline;
  width: auto;
  height: auto;
  border: 0;
  transition: all 0.2s ease-in-out;
}
/**
 * ====================================================
 * Flyout menu
 * ====================================================
 *
 * Het off-canvas menu onder lg. Het openen/sluiten zit in js/custom.js: die
 * togglet .active op #flyout-menu en zet overflow: hidden op html en body.
 * De regel hieronder draait dat op desktop weer terug, zodat een flyout die
 * op mobiel open stond de pagina niet vastzet na een resize.
 *
 * De dropdown-caret (.dropdown-toggle:after) staat in _header.scss; het
 * flyout-menu leunt daar ook op.
 */
@media (min-width: 1200px) {
  html, body {
    overflow: auto !important;
  }
}
.flyout-menu-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  overflow: hidden;
  visibility: hidden;
}
.flyout-menu-wrap.active {
  visibility: visible;
}
.flyout-menu-wrap.active .flyout-bg {
  opacity: 1;
}
.flyout-menu-wrap.active .flyout-panel {
  right: 0;
}
@media (min-width: 1200px) {
  .flyout-menu-wrap {
    display: none !important;
  }
}
.flyout-menu-wrap .close-flyout {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #27133A;
  border: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF5E4C;
  transition: all 0.2s ease-in-out;
}
.flyout-menu-wrap .close-flyout:hover {
  background: #fff;
  color: #4A246D;
}
.flyout-menu-wrap .flyout-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.flyout-menu-wrap .flyout-panel {
  height: 100%;
  min-width: 270px;
  max-width: 300px;
  width: 100%;
  position: absolute;
  right: -300px;
  top: 0;
  overflow-y: auto;
  transition: all 0.2s ease-in-out;
  z-index: 1;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav > li:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li > .nav-link {
  font-size: 1.125rem;
  padding: 10px 30px 10px 0;
  color: #fff;
  display: block;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li > .nav-link.active, .flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li > .nav-link:hover {
  color: #FF5E4C;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li > .nav-link.dropdown-toggle:after {
  transition: all 0.2s ease-in-out;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li > .nav-link.dropdown-toggle.show:after {
  transform: scaleY(-1);
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li .dropdown-menu {
  margin-top: 0;
  padding-top: 0;
  text-align: left;
  background: transparent;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li .dropdown-item {
  padding: 10px 15px;
  color: rgba(255, 255, 255, 0.7);
  white-space: normal;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li .dropdown-item:first-of-type {
  padding-top: 0;
}
.flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li .dropdown-item.active, .flyout-menu-wrap .flyout-panel .navbar ul.navbar-nav li .dropdown-item:hover {
  background: transparent;
  color: #FF5E4C;
}
.flyout-menu-wrap .flyout-panel .flyout-menu {
  margin: 0;
  padding: 0;
}
.flyout-menu-wrap .flyout-panel .flyout-menu li {
  list-style: none;
}
.flyout-menu-wrap .flyout-panel .flyout-menu li a {
  color: #fff;
  display: block;
  padding: 10px 15px;
}
/**
 * ====================================================
 * Hero
 * ====================================================
 *
 * .hero       = de kale banner op contentpagina's en nieuws (templates/hero.php)
 * .hero-front = de frontpage-hero met video- of sliderachtergrond
 *               (templates/hero-front.php)
 */
.hero {
  height: 200px;
}
@media (min-width: 992px) {
  .hero {
    height: 300px;
  }
}
.hero-front {
  /**
	 * TWEE STATES
	 *
	 * Het design bestaat alleen op 1920 en op 360, dus daartussen interpoleren we.
	 *
	 * < lg    : het mobiele frame. Banner met alleen bovenhoeken rond, het CTA-blok
	 *           sluit er direct onder op aan over de volle breedte en neemt de
	 *           onderhoeken over, zodat de twee als één kolom lezen. Dit is één
	 *           doorlopende stand van 360 tot 991, dus zonder tussenvorm op md.
	 * lg+     : het designframe. Het CTA-blok hangt rechtsonder ín de banner met
	 *           alleen zijn linkerhoeken rond. Zijn breedte beweegt mee, van 320 op
	 *           een smalle banner naar de designwaarde 435 vanaf ongeveer 1145
	 *           bannerbreedte, en de slogan krijgt exact de rest min de 60 gutter.
	 *           Daardoor kan het blok per definitie niet over de hero-knoppen
	 *           vallen; dat risico hield deze stand eerder op xxl.
	 *
	 * Hier stonden drie states, met de omslag naar het designframe op xxl. Dat gaf
	 * één harde sprong op 1520 waar zes dingen tegelijk wisselden: het blok ging van
	 * 1459 naar 435 breed, de banner van 533 naar 760 hoog, de padding van 45/60
	 * naar 30, de titel van 20 naar 24, de knop van hugend naar vol, en de gradient
	 * kantelde. In de brede tussenvorm stonden de contactregels links en zweefde het
	 * keurmerk 800px verderop rechts. Nu wisselt er boven lg niets meer: de kaart,
	 * de bannerhoogte en de slogan schalen vloeiend door tot 1920, waar ze exact op
	 * de designwaarden uitkomen. Vergelijk pixel-perfect nog steeds op >= 1520 (zie
	 * figma-uitlezen.md).
	 *
	 * De banner staat 15px van de rand op mobiel en 30px vanaf lg, dus niet op de
	 * 1410-container maar fluid (px-15 px-lg-30 op de .container-fluid).
	 */
  /**
	 * Achtergrondlaag: fotoslider of video. Ligt onder de gradient (z-index 1)
	 * en de tekst (z-index 10).
	 */
  /**
	 * Gradient over het beeld, zodat de witte tekst leesbaar blijft. De richting
	 * verschilt per frame: op mobiel staat de tekst onderaan over de volle
	 * breedte, dus loopt de gradient van boven naar onder; op desktop staat hij
	 * links, dus loopt hij van links naar rechts.
	 */
  /**
	 * Slogan linksonder. De grote padding-top op mobiel is een minimum: de
	 * content staat onderaan, dus hij duwt de tekst alleen weg van de bovenrand
	 * als de banner krimpt.
	 *
	 * De witruimtes schalen mee met de kop, op dezelfde vw-basis: 60/1920 =
	 * 3,125vw, met 30 (de mobiele waarde) als ondergrens en 60 (het design) als
	 * bovengrens. Daardoor blijft de verhouding tussen tekst en ruimte op elke
	 * breedte gelijk, en sluit de reeks onder lg naadloos aan op het mobiele frame:
	 * bij 992 is de gap 31 tegen de 30 die eronder staat.
	 */
  /**
	 * Het logo schaalt mee met de kop, op dezelfde vw-basis: 330/1920 = 17,1875vw,
	 * met 150 (de mobiele waarde) als ondergrens en 330 (het design) als bovengrens.
	 * Omdat de kop op 88/1920 staat, is de verhouding logo tegen kop op élke breedte
	 * 3,75, net als in het design. Stond dit op een vaste 330, dan liep die
	 * verhouding op naar 5,0 bij 1440 en 7,26 bij 992 en werd het logo het
	 * zwaartepunt van de hero in plaats van de slogan.
	 */
  /**
	 * De hero-knoppen zijn een eigen, grotere variant: radius 50 in plaats van 25
	 * en een label van 20 in plaats van 16. Zonder rand, want 16 + 16 padding
	 * plus 28 regelhoogte is precies de 60 uit het design (mobiel 12 + 12 + 28
	 * = 52).
	 *
	 * Het label staat in General Sans Regular en niet in Asap: het design zet
	 * hier de kopstijl Headings/H5 op, terwijl de standaardknoppen elders Asap
	 * SemiBold 16 zijn. Zonder deze twee regels erft de knop $btn-font-family
	 * (Asap) en staat er de verkeerde letter.
	 *
	 * De padding schaalt mee met de kop (16/1920 = 0,833vw en 32/1920 = 1,667vw,
	 * ondergrenzen 12 en 24), dus de knophoogte loopt van 52 naar de 60 uit het
	 * design. Het lábel blijft 20 en schaalt niet mee: proportioneel zou het onder
	 * 1536 al onder de 16px zakken en dat is te klein om te lezen, en een vloer van
	 * 16 zou het label bij 992 kleiner maken dan bij 991, waar het mobiele frame de
	 * designwaarde 20 houdt. Dan krijg je een sprong naar beneden zodra het venster
	 * bréder wordt.
	 */
  /**
	 * Zie de twee states boven .hero-front-banner. Onder lg is dit een stapel van
	 * twee vlakken die strak op elkaar aansluiten (gap 0), vanaf lg is het de
	 * positioneringscontext voor het CTA-blok in de banner.
	 */
  /**
	 * Het titelvlak legt zijn schaduw op het body-vlak eronder. Beide vlakken
	 * zijn broers en zussen in dezelfde stapel, dus zonder z-index verft het
	 * body-vlak (later in de DOM) over de schaduw heen en is die onzichtbaar.
	 */
  /**
	 * Volle breedte, met het label links en het pijltje rechts. Zo staat hij in het
	 * design, in een kaart van 435 waarvan de body 375 inhoud heeft.
	 *
	 * Die 375 is ook de cap, en daarmee vervalt de hug die hier op md stond: in de
	 * gestapelde stand onder lg is het blok zo breed als de banner, en een knop van
	 * 900 breed met het label tegen de ene rand en het pijltje tegen de andere is
	 * geen knop meer. Met de cap ziet hij er daar precies zo uit als in de kaart,
	 * links uitgelijnd, zonder een eigen breakpoint.
	 */
}
.hero-front .hero-front-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: 25px 25px 0 0;
  min-height: 533px;
}
@media (min-width: 992px) {
  .hero-front .hero-front-banner {
    border-radius: 25px;
    /**
			 * Proportioneel in plaats van een sprong. 40,86% is de designverhouding
			 * (760 hoog op een banner van 1860), dus dit levert 533 tot ongeveer 1305
			 * viewport, dan vloeiend oplopend, en exact 760 vanaf 1920. Hier stond een
			 * vaste height van 760 op xxl, en dat maakte de banner op één pixel 227
			 * hoger.
			 *
			 * min-height en niet height: een lange slogan of een lange CTA-titel mag de
			 * banner oprekken. Met een vaste hoogte knipt de overflow: hidden hierboven
			 * die tekst weg, en bij een kaart van 320 breed loopt de titel al over zes
			 * regels.
			 */
    min-height: max(533px, min(40.86vw, 760px));
  }
}
.hero-front .hero-front-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-front .hero-front-bg .swiper-hero, .hero-front .hero-front-bg .swiper-wrapper, .hero-front .hero-front-bg .swiper-slide {
  width: 100%;
  height: 100%;
}
.hero-front .hero-front-bg .hero-front-video {
  position: absolute;
  inset: 0;
}
.hero-front .hero-front-bg .hero-front-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (max-width: 767.98px) {
  .hero-front .hero-front-bg .hero-front-video iframe {
    display: none;
  }
}
.hero-front .hero-front-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
@media (min-width: 992px) {
  .hero-front .hero-front-banner:before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 75%);
  }
}
.hero-front .hero-front-slogan {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(30px, 3.125vw, 60px);
  width: 100%;
  padding: 150px 30px 30px;
}
@media (min-width: 992px) {
  .hero-front .hero-front-slogan {
    padding: clamp(30px, 3.125vw, 60px);
    /**
			 * Vanaf lg hangt het CTA-blok rechtsonder in de banner, dus krijgt de
			 * slogan exact de rest: de bannerbreedte min de kaart min de 60 gutter uit
			 * het design. Zo kan de kaart nooit over de hero-knoppen vallen, ook niet
			 * als de kaart meebeweegt. De 915 uit het design (6 fluid-kolommen van
			 * 127,5 plus 5 gutters van 30) is de bovengrens en gaat gelden zodra de
			 * banner breed genoeg is, dus vanaf ongeveer 1470.
			 *
			 * De clamp is dezelfde als op .hero-front-cta: wijzigt die breedte, dan
			 * wijzigt deze mee.
			 */
    max-width: min(915px, calc(100% - clamp(320px, 38%, 435px) - 60px));
  }
}
.hero-front .hero-front-slogan h1, .hero-front .hero-front-slogan .h1 {
  margin-bottom: 0;
  /**
			 * Eén vloeiende maat in plaats van drie stappen (32, 56 op md, 88 op xxl).
			 * 88/1920 = 4,583vw, dus dit landt exact op de twee designpunten: 32px op
			 * 360 en 88px op 1920, en schaalt ertussen mee (ongeveer 45 op 992, 55 op
			 * 1200, 70 op 1520). De caps houden hem binnen die twee waarden, ook boven
			 * de 2560 waarop .mw-limiter de body stopt.
			 *
			 * Dit is fluid type en geen 100vw-truc voor layout: de kolombreedtes komen
			 * onverminderd uit het grid.
			 *
			 * En dit is de énige toegestane eigen clamp in een blok-partial. Alle andere
			 * meeschalende tekst hangt aan `$fluid-anchor` (xxl, 1520), via RFS voor de
			 * koppen en `fluid-type()` voor de `.display-*`-maten. Dat anker is de breedte
			 * waarop de container op 1440 capt, maar dit blok is full-bleed en loopt door
			 * tot 1920, dus hier hoort de designwaarde bij 1920 en niet bij 1520. Zie
			 * `.claude/rules/koppen-hierarchie.md`.
			 */
  font-size: clamp(2rem, 4.583vw, 88px);
}
.hero-front .hero-front-wordmark {
  width: clamp(150px, 17.1875vw, 330px);
  height: auto;
}
.hero-front .hero-front-buttons {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.78125vw, 15px);
}
@media (min-width: 768px) {
  .hero-front .hero-front-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.hero-front .hero-front-button {
  justify-content: space-between;
  gap: 15px;
  border-width: 0;
  border-radius: 50px;
  padding: clamp(12px, 0.833vw, 16px) clamp(24px, 1.667vw, 32px);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
}
.hero-front .hero-front-button i {
  color: #FF5E4C;
  font-size: 20px;
}
.hero-front .hero-front-button-glass {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  color: #fff;
}
.hero-front .hero-front-button-glass:hover, .hero-front .hero-front-button-glass:focus {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.hero-front .hero-front-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 992px) {
  .hero-front .hero-front-layout {
    display: block;
    position: relative;
  }
}
.hero-front .hero-front-cta {
  /**
		 * Onder lg valt het blok in de flow, en de ruimte naar het blok erna komt van
		 * de bovenpadding van dát blok, net als bij elk ander paar op de pagina. Hier
		 * stond een `margin-bottom: 60px`, en die telde op met de `pt-60` van de intro
		 * tot een dubbele witruimte van 120 waar 60 hoort te staan.
		 *
		 * Vanaf lg hangt het blok ín de banner (60 boven de onderrand) en speelt dit
		 * niet: daar draagt de intro zijn eigen 120 en zit er niets tussen.
		 */
}
@media (min-width: 992px) {
  .hero-front .hero-front-cta {
    position: absolute;
    right: 0;
    /**
			 * De onderkant lijnt altijd uit met de hero-knoppen links ervan. Die zitten op
			 * de padding-bottom van .hero-front-slogan (`clamp(30px, 3.125vw, 60px)`), en
			 * de slogan is even hoog als de banner, dus dezelfde clamp hier houdt de twee
			 * onderkanten gelijk: 60 op 1920, relatief kleiner naar mobiel. Pas ze samen aan.
			 */
    bottom: clamp(30px, 3.125vw, 60px);
    z-index: 10;
    /**
			 * 435 is de designwaarde en geldt zodra de banner er ruimte voor heeft,
			 * dus vanaf ongeveer 1145 breed. Daaronder beweegt de kaart mee op 38% van
			 * de banner, met 320 als ondergrens: onder die breedte wordt de CTA-titel
			 * zo smal dat hij over zes regels loopt.
			 *
			 * Dezelfde clamp staat in de max-width van .hero-front-slogan, zodat de
			 * slogan precies de rest krijgt. Pas ze samen aan.
			 */
    width: clamp(320px, 38%, 435px);
  }
}
.hero-front .hero-front-cta-titel {
  position: relative;
  z-index: 1;
  padding: 20px 30px;
  background-color: #4A246D;
  color: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
@media (min-width: 992px) {
  .hero-front .hero-front-cta-titel {
    border-radius: 25px 0 0 0;
  }
}
.hero-front .hero-front-cta-titel p {
  font-size: 24px;
}
.hero-front .hero-front-cta-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  background-color: #4A246D;
  border-radius: 0 0 25px 25px;
}
@media (min-width: 992px) {
  .hero-front .hero-front-cta-body {
    border-radius: 0 0 0 25px;
  }
}
.hero-front .hero-front-cta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.hero-front .hero-front-cta-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;
  color: #fff;
}
.hero-front .hero-front-cta-items li {
  display: flex;
  align-items: center;
  gap: 15px;
}
.hero-front .hero-front-cta-items i {
  flex: 0 0 16px;
  width: 16px;
  font-size: 16px;
  color: #FF5E4C;
}
.hero-front .hero-front-cta-items a {
  color: #fff;
}
.hero-front .hero-front-cta-items a:hover {
  color: #FF5E4C;
}
.hero-front .hero-front-cta-keurmerk {
  flex-shrink: 0;
  width: 110px;
  height: auto;
}
.hero-front .hero-front-cta-button {
  justify-content: space-between;
  align-self: flex-start;
  width: 100%;
  max-width: 375px;
}
.hero-front .hero-front-cta-button i {
  color: #FF5E4C;
  font-size: 16px;
}
/**
 * ====================================================
 * Frontpage intro (introzin + garanties)
 * ====================================================
 *
 * Sectie 4 van het frontpage-frame (node 11815:12132), gemeten op 1920: 120
 * sectiepadding, de introzin op 1170 (col-10) in 32px op lh 1,4, en 90 daaronder de
 * rij garanties.
 *
 * De rij zelf staat in css/templates/_opsommingen-01.scss: die is een eigen blok dat
 * ook op een andere pagina gebruikt wordt.
 *
 * De eerste zin is in het design paars en halfvet. Dat loopt via de bestaande
 * helper format_text(), die `*tekst*` naar een `<span class="fw-bold">` omzet, dus
 * de klant markeert die zin zelf in het tekstveld en heeft er geen tweede veld voor
 * nodig. De kleur en het gewicht zet deze SCSS erop: .fw-bold is 700 en het design
 * gebruikt 600.
 */
.frontpage-intro .frontpage-intro-tekst {
  /**
		 * 32 = $h3, de designwaarde bij de kolom van 1170 die deze zin vanaf xxl heeft.
		 * Daaronder krimpt de kolom mee (920 op 1440, 360 op 390) en moet de tekst mee:
		 * op een vaste 32 werd de alinea op 390 bijna 900 hoog.
		 *
		 * Dat schalen doet Bootstrap's RFS en niet een eigen clamp, zodat tekst overal
		 * in het thema op dezelfde manier meeschaalt. Het breekpunt is $rfs-breakpoint
		 * en dat staat op $fluid-anchor (xxl, 1520), hetzelfde anker als de rest van de
		 * site: 32 vanaf 1520 en daaronder vloeiend omlaag naar 23,8 op 360.
		 */
  margin-bottom: 45px;
  font-family: "General Sans", sans-serif;
  font-size: calc(1.325rem + 0.7105263158vw);
  line-height: 1.4;
}
@media (min-width: 1520px) {
  .frontpage-intro .frontpage-intro-tekst {
    font-size: 2rem;
  }
}
@media (min-width: 992px) {
  .frontpage-intro .frontpage-intro-tekst {
    margin-bottom: 90px;
  }
}
.frontpage-intro .frontpage-intro-tekst .fw-bold {
  color: #4A246D;
  font-weight: 600 !important;
}
.frontpage-intro .frontpage-intro-tekst > *:last-child {
  margin-bottom: 0;
}
/**
 * ====================================================
 * Opsommingen 01 (de garanties)
 * ====================================================
 *
 * Rij korte kenmerken met een icoon in een wit vakje erboven. Gemeten op
 * frontpage-frame sectie 4 (node 3838:7, versie oktober 2026) bij 1920: rij 1169 breed
 * (col-xl-10, de breedte van de introzin), 3 items van 370 met 30 gutter en per item
 * 90 vrije ruimte rechts van de tekst, een vakje van 45 met 20 eronder en een regel
 * van 24 op lh 1,4. Tot oktober 2026 waren het 5 items van 258 over de volle 1410.
 *
 * Dit is een grid en geen Bootstrap-kolomrij: 12 is niet door 5 deelbaar, dus een
 * `col-*` kan de designverdeling niet maken. Het aantal kolommen komt als custom
 * property uit de partial, zodat hetzelfde blok op een andere pagina met een ander
 * aantal kenmerken kan staan.
 *
 * De ladder loopt van het ingestelde aantal terug naar 3, 2 en 1. Bewust niet naar
 * 5 op een tablet: bij 768 is een kolom dan 132 breed en past "Voetanalyse door
 * ervaren specialisten" op 24px over zes regels.
 */
.opsommingen-01 {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
  /**
	 * Tussenstand: een item tussen 230 en 330 breed. Dat is xl (1200 tot 1519, items van
	 * 295) en lg (items van 300). Een inzet van 90 laat daar maar ruim 200 voor de tekst
	 * over en geeft drie, vier regels; 30 is de oude inzet en houdt het op twee.
	 */
  /**
	 * De compacte stand voor een smalle kolom. Een inzet van 30 is op een item van 258
	 * nog 12% van de breedte, maar op de 150 van een mobiele kolom 20%, en dan houdt
	 * de tekst er 120 van over en loopt "Voetanalyse door ervaren specialisten" over
	 * vijf regels. Onder 230 vervalt die inzet daarom en zakt de tekst van 24 naar 20.
	 *
	 * De drempel hangt aan de kolombreedte en niet aan de viewport, want het aantal
	 * kolommen verspringt op md en xl en daardoor loopt de itembreedte niet gelijk op
	 * met het scherm. Op de viewport gegate zou de smalste stand van de pagina dus de
	 * designmaat houden. Zelfde reden en zelfde oplossing als bij de metaregel van de
	 * nieuwskaart.
	 *
	 * Met drie USPs actief bij 220 (768 tot 991) en op mobiel (twee naast elkaar).
	 */
}
@media (min-width: 768px) {
  .opsommingen-01 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .opsommingen-01 {
    grid-template-columns: repeat(var(--opsommingen-kolommen, 5), 1fr);
  }
}
.opsommingen-01 .opsommingen-01-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  /**
		 * De tekst schakelt op de breedte van het item en niet op de viewport, dus is
		 * het item zelf de container. Zie de omslag onderaan dit bestand.
		 */
  container-type: inline-size;
  container-name: usp;
}
.opsommingen-01 .opsommingen-01-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #fff;
  color: #FF5E4C;
  font-size: 1.25rem;
}
.opsommingen-01 .opsommingen-01-tekst {
  /**
		 * In het design is een item 370 breed en de tekst erin 280: er staat 90
		 * restruimte rechts van de tekst, zodat de regels in twee korte, rustige
		 * regels breken en niet tegen het volgende item aan lopen. Die 90 is dus geen
		 * gutter maar een eigen inzet; op smallere items loopt hij terug (zie de
		 * container-queries onderaan).
		 *
		 * De inzet staat op de tekst en niet op het item. Dat is waar het design hem
		 * ook zet, het gedrag is identiek (het icoon is een vaste 45 en raakt hem
		 * nooit), en zo is hij bereikbaar vanuit de container-query hieronder: een
		 * @container-regel stijlt de kinderen van de container, niet de container zelf.
		 */
  padding-right: 90px;
  margin-bottom: 0;
}
@container usp (max-width: 329px) {
  .opsommingen-01 .opsommingen-01-tekst {
    padding-right: 30px;
  }
}
@container usp (max-width: 230px) {
  .opsommingen-01 .opsommingen-01-tekst {
    padding-right: 0;
    font-size: 1.25rem;
  }
}
/**
 * ====================================================
 * Doorverwijs blokken 01 (de voetklachten)
 * ====================================================
 *
 * Tekstkolom met een lijst doorverwijs-regels en een vierkante foto ernaast, op een
 * witte band over de volle breedte. Gemeten op frontpage-frame sectie 5 (node
 * 11833:16317) bij 1920:
 *
 *   band        wit, full-bleed over 1920, 120 padding boven en onder
 *   tekstkolom  690 op x=255 (col-6), gat 150, foto 570×570 (col-5) tot 1665
 *   ritme       eyebrow, 45, titel 56, 20, alinea, 20, lijst, 45, knoppen
 *   regel       55 hoog: 1px hairline, 15 padding, dan een rij van 40
 *   foto        radius 25 rondom, gradient naar beneden zwart 0 → 0,5
 *
 * De band is wit terwijl de pagina crème is, dus de sectie krijgt de kleur en de
 * container erin blijft de gewone bootstrap-container: het beeld mag niet buiten de
 * 1410 komen, alleen de kleur loopt door.
 */
.doorverwijs-blokken-01 {
  background-color: #fff;
  /**
	 * De lijst: een hairline bóven élke regel, ook boven de eerste, en géén lijn onder
	 * de laatste. Met een gap van 15 en 15 padding boven de lijn staat de tekst van
	 * twee regels dus 15 + lijn + 15 van elkaar, precies zoals in het design.
	 */
  /**
	 * Het logo staat linksonder ín de foto met 45 inzet. Absoluut geplaatst, dus
	 * bewust over het beeld heen; de gradient eronder maakt het leesbaar.
	 */
}
.doorverwijs-blokken-01 .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .doorverwijs-blokken-01 .subheading {
    margin-bottom: 45px;
  }
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-titel {
  margin-bottom: 20px;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-tekst {
  margin-bottom: 20px;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-tekst > *:last-child {
  margin-bottom: 0;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-lijst {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .doorverwijs-blokken-01 .doorverwijs-blokken-01-lijst {
    margin-bottom: 45px;
  }
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 15px;
  border-top: 1px solid #F5F2F0;
  color: #212529;
  font-weight: 600;
  text-decoration: none;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-link:hover {
  color: #4A246D;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-link:hover .doorverwijs-blokken-01-knop {
  background-color: #4A246D;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-knop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #FF5E4C;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-knoppen .btn {
  gap: 10px;
  /**
			 * Coral chevron op beide knoppen. Het design zet op de tweede knop #FA5424
			 * ($danger) terwijl de Figma-stijl "colors/quinary" heet; dat is dezelfde
			 * vergissing als in het introblok, dus overal $quinary.
			 */
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-knoppen .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-knoppen .btn-quinary i {
  color: #4A246D;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-foto {
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  /**
		 * De verdonkering onderop de foto, waar het logo op staat. Er is in het design
		 * geen apart gekleurd vlak onder dat logo: het is deze gradient.
		 */
}
@media (min-width: 992px) {
  .doorverwijs-blokken-01 .doorverwijs-blokken-01-foto {
    margin-top: 0;
  }
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-foto:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-logo {
  position: absolute;
  z-index: 1;
  bottom: 45px;
  left: 45px;
  right: 45px;
  /**
		 * In de band waar de foto naast de tekst staat én kleiner is dan de designmaat
		 * (992 tot 1519, foto 445 → 370) eet 45 rondom te veel weg en scaleert het
		 * keurmerk naar ~355/280 breed. Daar dus een kleinere inzet, zodat het logo
		 * groter blijft. Op de designfoto (≥xxl, 570 breed) en de grote gestapelde foto
		 * (<lg) blijft de 45 staan.
		 *
		 * between(lg, xxl) en niet (lg, xl): in Bootstrap 5 capt media-breakpoint-down
		 * op de eigen breakpointwaarde min 0,02, dus (lg, xl) zou op 1199 stoppen en de
		 * hele laptopband 1200 tot 1519 (foto 445) missen. (lg, xxl) dekt 992 tot 1519.
		 */
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .doorverwijs-blokken-01 .doorverwijs-blokken-01-logo {
    bottom: 25px;
    left: 25px;
    right: 25px;
  }
}
.doorverwijs-blokken-01 .doorverwijs-blokken-01-logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/**
 * ====================================================
 * Frontpage: de witte band met de collectie en de merken
 * ====================================================
 *
 * Sectie 7 van het frontpage-frame (node 3843:3078). Eén wit vlak over de volle
 * breedte met twee blokken erin: de vier collectie-kaarten en daaronder het
 * merkenspoor. Gemeten op 1920:
 *
 *   fill      #FFFFFF, full-bleed van 0 tot 1920
 *   padding   120 boven, 60 onder (staat als utility op de sectie in front-page.php)
 *   gap       60 tussen de kaartenrij en het logospoor (margin-top op .logo-blokken-01)
 *
 * Het is één vlak achter béide blokken en niet twee losse vlakken; dat is de fill van
 * de sectieframe zelf, er ligt geen aparte rechthoek in.
 *
 * Deze kleur is uit de node-`fills` gelezen en niet van een screenshot afgeleid. Wit
 * (#FFFFFF) en de crème van de body (#F5F2F0) zijn op een screenshot niet van elkaar
 * te onderscheiden, en dat is precies waarom dit vlak eerder ontbrak.
 *
 * Er hangt meer aan dan de kleur: de pijltjes van het merkenspoor hebben in het design
 * fill $tertiary, en dat is exact de crème van de body. Op de crème stond dus een
 * crème knop op een crème achtergrond en zag je alleen de coral chevron zweven. Met
 * deze band eronder leest de pijl weer als een knop.
 */
.frontpage-collectie {
  background-color: #fff;
  overflow-x: clip;
}
/**
 * ====================================================
 * Cards 01 (de collectie) + het merkenspoor
 * ====================================================
 *
 * Sectie 7 van het frontpage-frame (node 3843:3078), gemeten op 1920: witte band over
 * de volle breedte met 120 padding boven en 60 onder, inhoud 1410.
 *
 *   kopblok   tekstkolom 570 (col-5) links, gat 150, alinea 690 (col-6) rechts, op de
 *             onderlijn uitgelijnd; eyebrow → titel 30, titel 40
 *   kaarten   4 × 330 (col-3) met gutter 30, 30 onder het kopblok
 *   kaart     beeld 3:4 met radius 25, gradient van onder naar boven, en de tekst
 *             eroverheen op 30 padding: kop 32 wit, dan 10, dan "Meer weten"
 *   spoor     1560 breed op x=180: pijl 45, gap 30, 6 slots van 210 met gutter 30,
 *             gap 30, pijl 45. 60 onder de kaarten.
 */
.cards-01 {
  /**
	 * De collectiekaarten als één altijd-actieve Swiper: een peek-slider met brede
	 * kaarten (~330, zodat de losse-woord-titel past) tot 1520, en pas vanaf xxl vier
	 * per rij (spaceBetween 30 geeft daar exact de oude 4-koloms-gridbreedte). Geen
	 * destroy, dus geen sprong. Het grid-blok hieronder is alleen een terugval vóór de
	 * init (Swiper start op de frontpage laat, na window.load) of als JS faalt; zodra
	 * .swiper-initialized erop staat neemt Swiper de layout over. De terugval staat op
	 * xxl, waar de slider ook echt een 4-koloms grid wordt.
	 */
}
.cards-01 .cards-01-kop {
  margin-bottom: 30px;
  row-gap: 20px;
}
@media (min-width: 992px) {
  .cards-01 .cards-01-kop {
    row-gap: 0;
  }
}
.cards-01 .subheading {
  margin-bottom: 30px;
  /**
		 * Zonder titel eronder draagt `.cards-01-kop` de hele afstand tot de kaarten.
		 * Op het merkenoverzicht (designframe 6) is de titel van dit blok verborgen en
		 * staat er alleen een eyebrow, en dan telden deze 30 en die van het kopblok bij
		 * elkaar op tot 60 waar het ontwerp er 30 vraagt.
		 */
}
.cards-01 .subheading:last-child {
  margin-bottom: 0;
}
.cards-01 .cards-01-titel {
  margin-bottom: 0;
}
.cards-01 .cards-01-tekst > *:last-child {
  margin-bottom: 0;
}
@media (min-width: 1520px) {
  .cards-01 .swiper-collectie:not(.swiper-initialized) .swiper-wrapper {
    flex-wrap: wrap;
    margin: -15px;
  }
  .cards-01 .swiper-collectie:not(.swiper-initialized) .swiper-slide {
    width: 25%;
    height: auto;
    padding: 15px;
  }
}
/**
 * De kaart. Eén beeld met de tekst eroverheen, dus geen wit informatievlak zoals de
 * nieuwskaart: de leesbaarheid komt van de gradient.
 */
.collectie-item {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  aspect-ratio: 0.75;
  /**
	 * De gradient uit het design: van 75% zwart onderaan naar transparant op de helft.
	 * Als eigen laag boven het beeld en onder de tekst, zodat de tekst leesbaar blijft
	 * op elke foto.
	 */
}
.collectie-item .collectie-item-link {
  display: flex;
  align-items: flex-end;
  height: 100%;
  color: #fff;
  text-decoration: none;
}
.collectie-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collectie-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
}
.collectie-item .collectie-item-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 30px;
}
.collectie-item .collectie-item-titel {
  margin-bottom: 0;
  font-size: 1.875rem;
  color: #fff;
  /**
		 * De kaart heeft een vaste 3:4-verhouding met overflow:hidden en de tekst staat
		 * onderaan uitgelijnd, dus een titel die over te veel regels loopt groeit omhoog
		 * en wordt bovenaan weggeknipt. Een geseede korte klachtnaam past ruim, maar een
		 * lange titel (gemeten: 6 regels op de smalste gridkaart van 203) klipt. Drie
		 * regels afkappen houdt elke titel binnen zijn kaart, op elke breedte.
		 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  hyphens: auto;
}
.collectie-item .collectie-item-meer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.collectie-item .collectie-item-meer i {
  color: #FF5E4C;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.collectie-item:hover .collectie-item-meer i {
  transform: translateX(5px);
}
/**
 * Het merkenspoor. De pijlen staan náást het spoor in een flexrij, niet absoluut
 * erover: met 45 + 30 + spoor + 30 + 45 komt de rij op de 1560 uit het design en kan
 * een pijl per definitie geen logo bedekken, ook niet op een smal scherm.
 */
.logo-blokken-01 {
  margin-top: 60px;
  /**
	 * Een slot is in het design 210 hoog met 30 padding, dus het logo staat op 150
	 * breed en de hoogte volgt het logo. De vaste hoogte houdt de rij recht, ook als
	 * het ene logo een liggende balk is en het andere bijna vierkant.
	 */
}
.logo-blokken-01 .logo-blokken-01-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: 15px;
}
.logo-blokken-01 .swiper {
  flex: 1 1 auto;
  min-width: 0;
}
.logo-blokken-01 .logo-blokken-01-pijl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: #F5F2F0;
  color: #FF5E4C;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 1199.98px) {
  .logo-blokken-01 .logo-blokken-01-pijl {
    display: none;
  }
}
.logo-blokken-01 .logo-blokken-01-pijl:hover {
  background-color: #E0D7D1;
}
.logo-blokken-01 .logo-blokken-01-pijl.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.logo-blokken-01 .logo-blokken-01-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  padding: 30px;
}
.logo-blokken-01 .logo-blokken-01-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.logo-blokken-01 .logo-blokken-01-logo img {
  width: auto;
  max-width: 150px;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}
/**
 * ====================================================
 * Quotes 02 (uitgelichte ervaring)
 * ====================================================
 *
 * Sectie 10 van het frontpage-frame (node 7881:12804), gemeten op 1920:
 *
 *   beeld     1570 breed op x=175 (dus 175 inzet links en rechts), radius 25,
 *             met een gradient naar beneden van transparant naar zwart 0,5
 *   paneel    610 breed (38,9% van het beeld), tegen de linkerrand, 60 boven de
 *             onderrand van het beeld, radius 0 25 25 0, fill $primary
 *   naamregel eigen strip met padding 20/30 en een schaduw 0 16px 48px zwart 0,25
 *   citaat    24 op lh 1,4 in wit, padding 30 rondom, 30 naar de knoppen
 *   keurmerk  530 breed, rechtsonder met 60 inzet
 *
 * Dit blok is fluid met een eigen inzet: 1570 is breder dan de container van 1410 en
 * smaller dan de volle 1920, dus geen .container en ook geen full-bleed.
 *
 * De schaduw is nieuw: dezelfde geometrie als $box-shadow (0 16px 48px) maar met
 * alpha 0,25 in plaats van 0,05. Dat komt doordat hij hier over een foto valt en niet
 * over de crème achtergrond.
 *
 * Het design toont alleen stand A. Daaronder interpoleren we naar twee geplakte
 * standen, altijd tegen elkaar zonder gat of dubbele radius:
 *   A (≥ xl, 1200)   paneel absoluut linksonder ín het brede beeld, keurmerk zichtbaar.
 *   B (md–xl)        beeld en paneel 50/50 naast elkaar, tegen elkaar geplakt.
 *   C (< md, 768)    beeld boven, paneel eronder, tegen elkaar geplakt.
 * Het keurmerk staat op elke breedte ín het beeld: rechtsonder in A, gecentreerd
 * onderin de smalle foto in B/C.
 */
.quotes-02 {
  /**
	 * Het containing block van het paneel, en precies zo breed als het beeld: de
	 * inzet zit op de laag erboven, dus deze doos is de beeldbreedte. Het paneel is
	 * een percentage van het beeld, dus dat percentage moet hiertegen rekenen en niet
	 * tegen de volle sectiebreedte.
	 */
  /**
	 * Het keurmerk staat op elke breedte ín het beeld, over de gradient heen (z-index 1).
	 *   A (≥ xl)   rechtsonder met 60 inzet, precies zoals het design (ongewijzigd).
	 *   B/C (< xl) onderin de smalle foto, gecentreerd, met een inzet links/rechts/onder,
	 *              zodat de brede lockup de beeldbreedte netjes vult zonder te vervormen.
	 */
  /**
	 * Het paneel. Drie standen, altijd geplakt tegen het beeld (geen gat, geen sliver):
	 *   C (< md)  onder het beeld, volle breedte, onderhoeken rond.
	 *   B (md–xl) rechts naast het beeld, halve kolom, rechterhoeken rond.
	 *   A (≥ xl)  absoluut linksonder ín het beeld, zoals het design (node 7881:12804).
	 */
  /**
	 * De naamregel staat op een eigen strip met een schaduw. In stand C ligt hij geplakt
	 * onder het beeld (geen radius); in B en A hoort hij bij een paneel met een ronde
	 * rechterbovenhoek.
	 */
}
.quotes-02 .quotes-02-inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 15px;
}
@media (min-width: 576px) {
  .quotes-02 .quotes-02-inner {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .quotes-02 .quotes-02-inner {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .quotes-02 .quotes-02-inner {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .quotes-02 .quotes-02-inner {
    max-width: 1140px;
  }
}
@media (min-width: 1520px) {
  .quotes-02 .quotes-02-inner {
    max-width: none;
    padding-inline: 175px;
  }
}
.quotes-02 .quotes-02-frame {
  position: relative;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .quotes-02 .quotes-02-frame {
    display: flex;
  }
}
.quotes-02 .quotes-02-beeld {
  position: relative;
  overflow: hidden;
  /**
		 * Stand C (basis, < md): een hogere verhouding dan de brede design-2,1:1. Als
		 * dunne strook boven het paneel oogde de foto te smal op telefoon (171px op 390),
		 * dus hier 4:3 voor een steviger beeld. Stand B laat de aspect los (flex-stretch)
		 * en stand A (≥ xl) zet de designverhouding 1570/748 terug.
		 */
  aspect-ratio: 1.3333333333;
  border-radius: 25px 25px 0 0;
  /**
		 * De foto staat absoluut zodat de beeldhoogte alleen van het beeldvlak zelf komt
		 * (de aspect-ratio in A/C, de paneelhoogte via flex-stretch in B) en niet
		 * circulair van de eigen `height: 100%` afhangt. In stand B laten we de
		 * aspect-ratio los; zonder deze absolute foto zou het beeld daar zijn eigen
		 * natuurlijke hoogte pakken en hoger worden dan het paneel ernaast.
		 */
  /**
		 * De verdonkering naar beneden. Die maakt zowel het keurmerk als de bovenkant
		 * van het paneel leesbaar op elke foto.
		 */
}
.quotes-02 .quotes-02-beeld > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quotes-02 .quotes-02-beeld:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .quotes-02 .quotes-02-beeld {
    flex: 1 1 0;
    aspect-ratio: auto;
    border-radius: 25px 0 0 25px;
  }
}
@media (min-width: 1200px) {
  .quotes-02 .quotes-02-beeld {
    aspect-ratio: 2.0989304813;
    border-radius: 25px;
  }
}
.quotes-02 .quotes-02-logo {
  position: absolute;
  z-index: 1;
  left: 45px;
  right: 45px;
  bottom: 45px;
}
.quotes-02 .quotes-02-logo img {
  width: 100%;
  max-width: 530px;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}
@media (min-width: 1200px) {
  .quotes-02 .quotes-02-logo {
    left: auto;
    right: 60px;
    bottom: 60px;
  }
  .quotes-02 .quotes-02-logo img {
    width: auto;
    max-width: min(530px, 45vw);
    margin: 0;
  }
}
.quotes-02 .quotes-02-paneel {
  margin: 0;
  border-radius: 0 0 25px 25px;
  background-color: #4A246D;
  color: #fff;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .quotes-02 .quotes-02-paneel {
    flex: 1 1 0;
    border-radius: 0 25px 25px 0;
  }
}
@media (min-width: 1200px) {
  .quotes-02 .quotes-02-paneel {
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 38.9%;
    border-radius: 0 25px 25px 0;
  }
}
.quotes-02 .quotes-02-naam {
  padding: 20px 30px;
  border-radius: 0;
  background-color: #4A246D;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
@media (min-width: 768px) {
  .quotes-02 .quotes-02-naam {
    border-radius: 0 25px 0 0;
  }
}
.quotes-02 .quotes-02-naam-persoon {
  font-weight: 600;
}
.quotes-02 .quotes-02-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
}
.quotes-02 .quotes-02-citaat {
  margin-bottom: 0;
  font-family: "General Sans", sans-serif;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
.quotes-02 .quotes-02-citaat > *:last-child {
  margin-bottom: 0;
}
.quotes-02 .quotes-02-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.quotes-02 .quotes-02-knoppen .btn {
  gap: 10px;
}
.quotes-02 .quotes-02-knoppen .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
/**
 * ====================================================
 * Penninx Voetadvies
 * ====================================================
 *
 * Fluid tweeluik: foto met een decoratieve collage links, donkerpaars paneel met
 * drie stappen rechts. Gemeten op frontpage-frame sectie 6 (node 7806:2360), 1920:
 *
 *   foto     1120 breed (col-7), 730 hoog, geen radius
 *   paneel   800 breed (col-5), fill $secondary, padding 120 boven/onder en 90 links/rechts
 *   ritme    eyebrow, 45, titel 56, 30, stappen (gap 15), 45, knoppen (gap 15)
 *   stap     icoonvierkantje 45x45 in $primary met radius 15 en een witte glyph van
 *            20 in Light (300), dan 20 en de tekst
 *   collage  twee gekantelde kaarten van 330x440 (+5 en -5 graden) plus drie coral
 *            badges van 45x45 met radius 15
 *
 * De verdeling is hier 800/1120 en niet de 960/960 van foto-content-blokken-01, en
 * 800/1920 is precies 5/12: dus col-5 en col-7, geen eigen breedtes.
 */
.penninx-voetadvies {
  /**
	 * Géén overflow: hidden op deze sectie. De collage steekt met opzet boven en
	 * onder het blok uit, en dat wegknippen is precies wat de designregel verbiedt.
	 * Het beeld hoeft ook niet geknipt te worden: dat vult zijn kolom met
	 * object-fit: cover.
	 */
  position: relative;
  /**
	 * De collage. Alleen vanaf xxl twee gekantelde kaarten die bewust buiten het blok
	 * vallen: de bovenste aan de bovenrand verankerd (steekt ~48 uit) en de onderste aan de
	 * onderrand (~57 onder). Onder xxl is er geen gekantelde collage; dan zijn de twee
	 * foto's gewone grid-cellen in de fotokolom (zie `.penninx-voetadvies-foto`): op de
	 * laptop naast/onder de grote foto, gestapeld onder lg als 50/25/25 naast elkaar. Zo
	 * hangen de foto's op smallere schermen niet scheef en blijven ze staand.
	 */
  /**
	 * De badges. Op de foto staat er één los linksboven; de andere twee zitten in de
	 * linkerbovenhoek van een kaart en kantelen dus met hun kaart mee, want ze staan
	 * erin en niet ernaast.
	 *
	 * Inzet: de kaartjes staan overal op 15 (designwaarde). De grote-fotobadge staat
	 * in de grid-standen (<xxl) óók op 15, zodat de drie foto's in het fotogrid hun
	 * icoon even ver van de rand hebben; alleen op de gekantelde desktopstand (≥xxl)
	 * staat hij verder weg op 30, zoals het design toont.
	 *
	 * Op telefoon (<md) zijn de collagefoto's smal (25% in de 50/25/25-rij), dus een
	 * badge op 15 inzet dekt te veel af. Daar staan alle drie de badges strak in de
	 * linkerbovenhoek zonder gap, met alleen de rechteronderhoek nog rond.
	 */
}
.penninx-voetadvies .penninx-voetadvies-foto {
  position: relative;
  /**
		 * De hoofdfoto zit in een <picture>-wrapper (Imagify webp), of los als
		 * <img class="cover-image"> bij de terugval. De foto zelf is .cover-image met
		 * position:absolute en vult zijn eerst-gepositioneerde ouder. Onder lg geven we
		 * die ouder een eigen hoogte via de aspect-ratio, zodat de foto als gewoon beeld
		 * rendert (band of grote linkerfoto) en niet de hele kolom absoluut vult.
		 */
  /**
		 * MET collage, ONDER xxl: geen gekantelde overhang maar een net fotogrid in de
		 * kolom. De gekantelde zwevende collage is geijkt op de brede 1920-foto en gaat op
		 * smallere schermen scheef hangen; daaronder dus een rustig grid. De collage-wrapper
		 * valt weg (display: contents), zodat de twee kaarten directe grid-items zijn.
		 *
		 * Twee indelingen:
		 *  - <lg (gestapeld, paneel eronder): drie naast elkaar, grote foto 50% + twee
		 *    staande foto's elk 25%, in één rij. De grote foto bepaalt met zijn aspect de
		 *    rijhoogte; de twee foto's rekken daarnaartoe (stretch) en blijven dus staand.
		 *  - lg–xxl (laptop, paneel ernaast): grote foto links (beide rijen) + de twee
		 *    staande foto's gestapeld rechts. De kolomhoogte komt van het paneel via de row.
		 */
  /**
		 * Vanaf xxl de designlook: de foto vult de kolom absoluut (hoogte uit het paneel via
		 * de row) en de gekantelde collage ligt er absoluut overheen.
		 */
  /**
		 * De gradient laat de foto in het paneel overlopen; alleen in de desktopstand (xxl),
		 * waar één grote foto tegen het paneel ligt. In de grid-standen eindigt de kolom met
		 * de kleine foto's en zou de gradient die zinloos verduisteren.
		 */
}
.penninx-voetadvies .penninx-voetadvies-foto > picture, .penninx-voetadvies .penninx-voetadvies-foto > img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.5342465753;
  overflow: hidden;
}
@media (max-width: 1519.98px) {
  .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) {
    display: grid;
    gap: 0;
  }
  .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) > picture, .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) > img {
    grid-column: 1;
    border-radius: 0;
  }
}
@media (max-width: 991.98px) {
  .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) > picture, .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) > img {
    grid-row: 1;
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) > picture, .penninx-voetadvies .penninx-voetadvies-foto:has(.penninx-voetadvies-collage) > img {
    grid-row: 1 / 3;
    height: 100%;
    aspect-ratio: auto;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-foto {
    display: block;
  }
  .penninx-voetadvies .penninx-voetadvies-foto > picture {
    position: static;
    aspect-ratio: auto;
    overflow: visible;
  }
  .penninx-voetadvies .penninx-voetadvies-foto > img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    overflow: visible;
    object-fit: cover;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-foto:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(39, 19, 58, 0) 50%, rgba(39, 19, 58, 0.5) 75%, #27133A 100%);
    pointer-events: none;
  }
}
.penninx-voetadvies .penninx-voetadvies-paneel {
  display: flex;
  background-color: #27133A;
  color: #fff;
}
.penninx-voetadvies .penninx-voetadvies-paneel h1, .penninx-voetadvies .penninx-voetadvies-paneel .h1, .penninx-voetadvies .penninx-voetadvies-paneel h2, .penninx-voetadvies .penninx-voetadvies-paneel .h2, .penninx-voetadvies .penninx-voetadvies-paneel h3, .penninx-voetadvies .penninx-voetadvies-paneel .h3, .penninx-voetadvies .penninx-voetadvies-paneel h4, .penninx-voetadvies .penninx-voetadvies-paneel .h4, .penninx-voetadvies .penninx-voetadvies-paneel h5, .penninx-voetadvies .penninx-voetadvies-paneel .h5, .penninx-voetadvies .penninx-voetadvies-paneel h6, .penninx-voetadvies .penninx-voetadvies-paneel .h6 {
  color: #fff;
}
.penninx-voetadvies .penninx-voetadvies-inner {
  padding: 60px 30px;
  max-width: 800px;
  /**
		 * Vanaf xxl vloeiend i.p.v. een sprong naar 120/90. Dit blok is full-bleed, dus het
		 * paneel is col-5 van de viewport (633 op 1520, 800 op 1920): een vaste 120/90 hoort
		 * bij het paneel van 800 en propte de tekst op tot een sectie van 926 hoog op 1520.
		 * Nu schaalt de padding mee met de viewport en landt exact op 120/90 op 1920.
		 */
}
@media (max-width: 991.98px) {
  .penninx-voetadvies .penninx-voetadvies-inner {
    margin-inline: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .penninx-voetadvies .penninx-voetadvies-inner {
    max-width: 540px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .penninx-voetadvies .penninx-voetadvies-inner {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .penninx-voetadvies .penninx-voetadvies-inner {
    padding: 90px 60px;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-inner {
    padding: clamp(90px, 6.25vw, 120px) clamp(60px, 4.6875vw, 90px);
  }
}
.penninx-voetadvies .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .penninx-voetadvies .subheading {
    margin-bottom: 45px;
  }
}
.penninx-voetadvies .penninx-voetadvies-titel {
  margin-bottom: 30px;
}
.penninx-voetadvies .penninx-voetadvies-stappen {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .penninx-voetadvies .penninx-voetadvies-stappen {
    margin-bottom: 45px;
  }
}
.penninx-voetadvies .penninx-voetadvies-stap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.penninx-voetadvies .penninx-voetadvies-stap-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  border: 1px solid #4A246D;
  border-radius: 15px;
  background-color: #4A246D;
  color: #fff;
  font-size: 1.25rem;
}
.penninx-voetadvies .penninx-voetadvies-stap-tekst {
  /**
		 * De ondermarge eraf. Dit element ís sinds 19 augustus 2026 de `<p>` (de staptekst
		 * kwam eerst in een `<span>` waar wpautop een `<p>` in zette, en dat is ongeldige
		 * HTML), en een `<p>` houdt zijn `margin-bottom` van 20. De rij is
		 * `align-items: center`, dus dat centreert tegen een doos die 20 hoger is dan de
		 * zichtbare tekst en stond het icoonvierkantje precies 10 te laag. Gemeten: glyph
		 * exact in het midden van zijn vierkantje, vierkantje 10 onder het midden van de
		 * alinea. De regel voor een laatste kind blijft staan voor het geval de klant zelf
		 * een blok in het veld zet.
		 */
  margin-bottom: 0;
}
.penninx-voetadvies .penninx-voetadvies-stap-tekst > *:last-child {
  margin-bottom: 0;
}
.penninx-voetadvies .penninx-voetadvies-stap-tekst .fw-bold {
  font-weight: 700 !important;
}
.penninx-voetadvies .penninx-voetadvies-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.penninx-voetadvies .penninx-voetadvies-knoppen .btn {
  gap: 10px;
}
.penninx-voetadvies .penninx-voetadvies-knoppen .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
@media (max-width: 1519.98px) {
  .penninx-voetadvies .penninx-voetadvies-collage {
    display: contents;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-collage {
    display: block;
  }
}
.penninx-voetadvies .penninx-voetadvies-kaart {
  position: relative;
  overflow: hidden;
}
.penninx-voetadvies .penninx-voetadvies-kaart > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1519.98px) {
  .penninx-voetadvies .penninx-voetadvies-kaart {
    border-radius: 0;
    min-height: 0;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-kaart {
    position: absolute;
    aspect-ratio: 0.75;
    border-radius: 25px;
    /**
			 * Zonder deze z-index valt de gradient over de kaartjes heen. Die gradient is een
			 * `::after` op de fotokolom, dus een gepositioneerde broer die ná de kaartjes
			 * paint; met `z-index: auto` op de kaartjes wint hij. De kaartjes horen erboven,
			 * en hun badges liften mee omdat die kinderen van de kaart zijn.
			 *
			 * De z-index hoort op de kaart en niet op de collage-wrapper eromheen: die
			 * wrapper is een gewoon blok zonder eigen hoogte, en zou hij `position: relative`
			 * krijgen om een z-index te laten pakken, dan rekent de `top`/`bottom` van de kaartjes
			 * tegen die lege doos in plaats van tegen de foto. Dat is dezelfde valkuil die
			 * het paarse quote-paneel eerder te breed maakte.
			 *
			 * En het is 3 en niet 1, want de onderste kaart steekt onder het blok uit en
			 * hangt daarmee over het blok dat erop volgt. Op een testimonial is dat het
			 * contactblok, en het linkerpaneel daarvan staat op `z-index: 2` met een
			 * schaduw naar rechts; met een 1 wint dat paneel (het staat later in de DOM en
			 * de sectie hier maakt geen eigen stapelcontext) en tekende die naadschaduw
			 * een streep dwars over de kaart. Wat overhangt, hoort erboven te liggen.
			 */
    z-index: 3;
    /**
			 * De maat schaalt met de fotoHOOGTE i.p.v. de breedte: hoogte 60,44% van de
			 * fotokolom (440 op de 728-hoge foto op 1920 → breedte 330 via de aspect-ratio).
			 * Zo zijn de twee kaarten samen altijd hoger dan de foto en overlappen ze elkaar
			 * én de boven- en onderrand, ook als de foto in de band 1520–1900 hoger wordt;
			 * met een breedte-gebaseerde maat ontstond daar een gat tussen de kaarten. De
			 * breedte volgt uit de aspect-ratio hierboven.
			 */
    height: 60.44%;
  }
}
@media (max-width: 1519.98px) {
  .penninx-voetadvies .penninx-voetadvies-kaart-1 {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-kaart-1 {
    top: -35px;
    right: 9.54%;
    transform: rotate(5deg);
  }
}
.penninx-voetadvies .penninx-voetadvies-kaart-2 {
  /**
		 * Desktop (xxl): aan de ONDERrand verankerd (`bottom`) i.p.v. een `top`-percentage
		 * dat de 1920-fotohoogte aanneemt. Zo blijft de onderste kaart op elke breedte onder
		 * het blok uitsteken en drijven de kaarten niet uit elkaar zodra de foto (met het
		 * paneel mee) hoger wordt. Op 1920 reproduceert dit de bestaande stand (~57 onder).
		 */
}
@media (max-width: 991.98px) {
  .penninx-voetadvies .penninx-voetadvies-kaart-2 {
    grid-column: 3;
    grid-row: 1;
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .penninx-voetadvies .penninx-voetadvies-kaart-2 {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-kaart-2 {
    bottom: -43px;
    right: 4.54%;
    transform: rotate(-5deg);
  }
}
.penninx-voetadvies .penninx-voetadvies-badge {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 15px;
  background-color: #FF5E4C;
  color: #fff;
  font-size: 1.25rem;
}
@media (max-width: 767.98px) {
  .penninx-voetadvies .penninx-voetadvies-badge {
    top: 0;
    left: 0;
    border-radius: 0 0 15px 0;
  }
}
@media (min-width: 1520px) {
  .penninx-voetadvies .penninx-voetadvies-badge-foto {
    top: 30px;
    left: 30px;
  }
}
/**
 * ====================================================
 * Foto content blokken 01
 * ====================================================
 *
 * Tweeluik van een paars tekstpaneel en een foto, over de volle breedte. Gemeten
 * op designframe 12: 1920 breed, twee panelen van 960 zonder gutter, tekstpaneel
 * links met 120 padding rondom (dus 720 inhoud), foto rechts 960x574.
 *
 * De hoogte is contentgedreven en niet vast: 120 + eyebrow 22 + 45 + titel 56 +
 * 20 + alinea 96 + 45 + knop 50 + 120 telt op tot de 574 uit het design.
 */
.foto-content-blokken-01 {
  /**
	 * Bewust géén overflow: hidden. De twee panelen zijn al even hoog doordat het een
	 * row is, en de foto vult zijn kolom met object-fit: cover, dus knippen is niet
	 * nodig. En zodra dit blok de schuine fotokaartjes toont, moeten die net buiten het
	 * blok kunnen steken: dat is de bedoelde vorm uit het design.
	 */
  position: relative;
  /**
	 * De terug-link boven de kop (designframe 15): een paarse pill-knop met een coral
	 * `angle-left` vóór het label, en 45 tot de kop, dus dezelfde ruimte als een
	 * eyebrow. Op die pagina staat hij op de plek van het eyebrow.
	 *
	 * `display: flex` met `width: fit-content` en niet de `inline-flex` van `.btn`: een
	 * inline-level element lijnt op de basislijn van zijn regel uit en dan komt er
	 * onder de knop een paar pixels bij die niemand heeft gezet. Precies de valkuil van
	 * `.subheading` (zie components/_subheading.scss).
	 */
  /**
	 * Een blok zónder alinea. Normaal staat de 45 tot de knoprij op die alinea, maar op
	 * de detailpagina van een testimonial (frame 11) volgen de knoppen direct op de
	 * grote tekst, en dan zou alleen de 20 van de titel overblijven.
	 *
	 * **De hele 45 en niet de 25 die het verschil is.** Deze twee zijn aangrenzende
	 * blok-siblings in een gewone blokcontainer, dus hun marges **klappen samen** naar
	 * de grootste van de twee in plaats van op te tellen: met 25 hier bleef de gemeten
	 * naad 25. Nu wint deze 45 van de 20 op de titel en klopt hij precies. Het blok mét
	 * alinea verandert er niet van, want daar is de knoprij geen directe buur van de titel.
	 */
  /**
	 * De witte logokaart midden over de foto: het introblok van een merk-detailpagina
	 * (designframe 7, node 7846:8039). Rechts staat daar wél gewoon een foto met
	 * dezelfde gradient; deze kaart ligt er alleen bovenop.
	 *
	 * Gemeten op 1920: kaart 320 x 330 exact gecentreerd in het fotovlak van 960 x 574,
	 * wit, radius 25, een 1px $tertiary-lijn alléén onderaan, 45 padding rondom en het
	 * logo daarbinnen op 230 x 240 met object-fit: contain.
	 *
	 * De maten staan in procenten zodat de kaart met de foto meeschaalt: 320/960 is
	 * een derde van de kolom. De aspect-ratio bepaalt de hoogte, want de kolomhoogte
	 * komt van het tekstpaneel ernaast en is dus geen betrouwbare basis.
	 *
	 * **De binnenruimte zit op het logo en niet als padding op de kaart, en dat is
	 * geen stijlkeuze.** Een procentuele padding rekent altijd tegen de breedte van
	 * het blok waarín het element staat, niet tegen het element zelf, en deze kaart
	 * staat absoluut in het fotovlak: `padding: 14.0625%` werd daardoor 135 in plaats
	 * van 45, hield 50px over voor het logo en blies de kaart op tot 601 hoog. Een
	 * percentage op het logo rekent wél tegen de kaart, dus 230/320 en 240/330 geven
	 * op elke breedte exact de designverhouding.
	 *
	 * Twee floors, en die zijn niet inwisselbaar. Vanaf lg een ondergrens van 220,
	 * want een derde van een kolom van 496 laat na de padding te weinig over voor een
	 * logo. Daaronder juist een bovengrens van de halve bandbreedte: de foto is dan
	 * een band van 960/574, dus een kaart breder dan 58% van die band zou hoger worden
	 * dan de band zelf en eruit steken.
	 *
	 * De `z-index` staat op de kaart zelf en niet op een wrapper: de gradient is een
	 * ::after op de fotokolom en die paint ná de inhoud, dus zonder deze regel valt de
	 * gradient over de kaart heen. Zie .claude/rules/figma-uitlezen.md.
	 */
  /**
	 * De openingstijdenkaart: het introblok van Onze praktijk (designframe 8, node
	 * 7866:7902). De vórm van de kaart staat in templates/_contact-info-blokken-01.scss;
	 * hier staat waar hij hangt, en dat zijn **drie standen**.
	 *
	 * A. Vanaf lg, de designstand. Gemeten op 1920: 435 x 414 op x1485, dus strak tegen
	 *    de rechter schermrand en niet over de linkerrand van de foto. Dáárom zijn
	 *    alleen zijn linkerhoeken rond: hij loopt de pagina uit. Verticaal exact in het
	 *    midden van het blok (124 boven en onder).
	 *
	 *    De breedte is 435/1920 van de sectie met een ondergrens van 300. Die floor is
	 *    nodig omdat de fotokolom onder xxl 50% van het venster is in plaats van 7/12:
	 *    bij 992 zou de designverhouding op 225 uitkomen en dan past de rij "Donderdag
	 *    09:30 tot 18:00" (227 plus 60 padding) er niet meer in.
	 *
	 * B. sm tot lg: de kaart schuift met `order` tússen het tekstpaneel en de foto en
	 *    krijgt de paarse paneelkleur om zich heen. Omdat hij tegen het paneel erboven
	 *    plakt, leest dat als één doorlopend blok met de kaart erin, precies wat het
	 *    gestapelde ontwerp vraagt. Zijn linkerrand loopt mee met de tekst erboven
	 *    (dezelfde gecentreerde max-width plus 15), en hij houdt zijn vier ronde hoeken.
	 *
	 * C. Onder sm past een kaart van 435 niet meer naast de schermranden. Daar gaat hij
	 *    over de volle breedte ónder de foto staan, met vierkante hoeken, zodat hij
	 *    boven én onder naadloos aansluit in plaats van als los kaartje te zweven.
	 *
	 * De `z-index` staat op de kaart zelf, om dezelfde reden als bij het logo hierboven.
	 */
  /**
	 * De binnenmaat in stand B: dezelfde gecentreerde max-width plus 15px als
	 * .foto-content-blokken-01-tekst-inner, zodat de kaart exact onder de tekst begint.
	 *
	 * De kaart vult die breedte helemaal en blijft dus níét op zijn designmaat van 435
	 * staan: hij hoort in deze stand bij het paarse blok, en een kaart die smaller is
	 * dan de tekst erboven leest als een los kaartje dat toevallig in het paneel is
	 * beland. Zo loopt zijn rechterrand mee met de tekst.
	 */
  /**
	 * De 5/7-verdeling: het blok "Onze praktijk" op de frontpage (node 7806:2341) heeft
	 * een paneel van 800 en een foto van 1120 in plaats van twee keer 960. Daarmee
	 * verandert ook de padding (90 in plaats van 120), de verhouding van de foto onder
	 * lg en hoe ver de gradient loopt: 30 en 60 procent van 1120 is een andere afstand
	 * dan 25 en 50 procent van 960.
	 */
  /**
	 * De 8/4-verdeling: het introblok van een testimonial (frame 11, node 7853:8763)
	 * heeft een paneel van 1280 en een foto van 640. De padding is dezelfde 120 als de
	 * basis, dus alleen de cap op de tekstbreedte wijkt af: het design laat de tekst
	 * over de volle inhoudsbreedte van 1040 lopen (1280 min twee keer 120) en de basis
	 * capt op 960, de halve designbreedte van een 6/6-paneel.
	 *
	 * **De cap is de paneelbreedte en niet de tekstbreedte.** `box-sizing: border-box`
	 * staat site-breed aan en dit element draagt zelf de padding, dus een `max-width`
	 * van 1040 laat maar 800 tekst over. Gemeten op 1920 was de rechterinzet daardoor
	 * 360 in plaats van 120. Vandaar 1280: dat is de paneelbreedte op 1920, dus de cap
	 * bijt pas boven die breedte en houdt de tekst dan op de designwaarde 1040.
	 *
	 * De gradient over de foto hoeft niet mee: het design geeft daar dezelfde
	 * percentages (0 / 25 / 50) als de basis, en een percentage rekent tegen de
	 * fotobreedte, dus die klopt op 640 net zo goed als op 960.
	 */
  /**
	 * De schuine fotokaartjes over de naad tussen het paneel en de foto. Gemeten op
	 * node 7806:2341: twee kaarten van 450 x 337,5 (4:3) met radius 25, de bovenste
	 * gekanteld tegen de klok in en 16 boven het blok uit, de onderste met de klok mee
	 * en 15 eronder. Ze overlappen de paneelrand met 35 tot 65, en dat is de bedoelde
	 * vorm: niet naar binnen duwen.
	 *
	 * De maten staan in procenten van de fotokolom zodat ze meeschalen, met een floor
	 * op de breedte (zie de kaart-regel) zodat ze in de band lg–xxl niet raar klein
	 * worden. Onder lg is er geen gekantelde collage: dan staat de grote hoofdfoto vol
	 * breed bovenaan en staan deze twee liggende foto's daaronder naast elkaar (50/50),
	 * aan elkaar geplakt en met vierkante hoeken, zodat ook op mobiel alle drie de foto's
	 * zichtbaar blijven én de liggende foto's hun 4:3 houden.
	 */
  /**
	 * De schuine fotokaartjes over de naad, gemeten op node 7806:2341: twee kaarten van
	 * 450 × 337,5 (4:3) met radius 25, de bovenste tegen de klok in en boven het blok uit,
	 * de onderste met de klok mee en eronder. Ze overlappen elkaar via de kanteling (in het
	 * design staan de vlakken 8,5 uit elkaar, 2,5% van de kaarthoogte) en de paneelrand.
	 *
	 * Voetadvies-mechaniek (zie _penninx-voetadvies.scss), alleen ≥xxl:
	 *  - de kaart schaalt op de FOTOHOOGTE (`height` in %, breedte via `aspect-ratio: 4/3`),
	 *    niet op de breedte. Zo blijft het paar altijd ~even hoog als de foto, dus de
	 *    rotatie-overlap én de stick-out boven/onder blijven op elke ≥xxl-breedte behouden.
	 *    Een breedte-gebaseerde maat liet de stick-out op een hoog paneel verdwijnen.
	 *  - het paar hangt aan het midden (translateY) met het designgat van 2,5% ertussen.
	 *  - het links-anker houdt de linkerrand bij de naad; de breedte groeit naar rechts de
	 *    foto ín, wég van de tekst, dus de afstand tot de paneeltekst blijft constant.
	 * Alleen ≥xxl, want op laptop is dit een clean fotogrid: op een smalle laptopfoto zou
	 * een 4:3-kaart-op-fotohoogte veel te breed worden.
	 *
	 * De kanteling staat in een custom property zodat de gespiegelde `.foto-links`-variant
	 * alleen de draairichting hoeft te wisselen en niet de hele `transform` overschrijft.
	 */
  /**
	 * Staat de foto in het design links, dan wisselen de twee kolommen vanaf lg van
	 * plek en kantelt de gradient mee. In de DOM blijft de tekst eerst staan, zodat
	 * de kop op mobiel bovenaan komt en niet onder een foto. (Niet in gebruik op de
	 * frontpage; gespiegeld gehouden voor consistentie.)
	 */
}
.foto-content-blokken-01 .foto-content-blokken-01-tekst {
  display: flex;
  background-color: #27133A;
  color: #fff;
  /**
		 * Koppen apart, want die erven deze kleur níet: Bootstrap zet
		 * $headings-color als eigen declaratie op h1 tot h6, en een eigen
		 * declaratie wint van overerving. Zonder deze regel bleven de eyebrow en
		 * de sectietitel donkergrijs op het paarse paneel.
		 */
}
.foto-content-blokken-01 .foto-content-blokken-01-tekst h1, .foto-content-blokken-01 .foto-content-blokken-01-tekst .h1, .foto-content-blokken-01 .foto-content-blokken-01-tekst h2, .foto-content-blokken-01 .foto-content-blokken-01-tekst .h2, .foto-content-blokken-01 .foto-content-blokken-01-tekst h3, .foto-content-blokken-01 .foto-content-blokken-01-tekst .h3, .foto-content-blokken-01 .foto-content-blokken-01-tekst h4, .foto-content-blokken-01 .foto-content-blokken-01-tekst .h4, .foto-content-blokken-01 .foto-content-blokken-01-tekst h5, .foto-content-blokken-01 .foto-content-blokken-01-tekst .h5, .foto-content-blokken-01 .foto-content-blokken-01-tekst h6, .foto-content-blokken-01 .foto-content-blokken-01-tekst .h6 {
  color: #fff;
}
.foto-content-blokken-01 .foto-content-blokken-01-tekst-inner {
  padding: 60px 30px;
  max-width: 960px;
}
@media (max-width: 991.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-tekst-inner {
    margin-inline: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-tekst-inner {
    max-width: 540px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-tekst-inner {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .foto-content-blokken-01 .foto-content-blokken-01-tekst-inner {
    padding: 90px 60px;
  }
}
@media (min-width: 1520px) {
  .foto-content-blokken-01 .foto-content-blokken-01-tekst-inner {
    padding: 120px;
  }
}
.foto-content-blokken-01 .subheading {
  margin-bottom: 45px;
}
.foto-content-blokken-01 .foto-content-blokken-01-terug {
  display: flex;
  width: fit-content;
  margin-bottom: 45px;
}
.foto-content-blokken-01 .foto-content-blokken-01-terug i {
  color: #FF5E4C;
  font-size: 1rem;
}
.foto-content-blokken-01 .foto-content-blokken-01-titel {
  margin-bottom: 20px;
}
.foto-content-blokken-01 .foto-content-blokken-01-tekstregel {
  margin-bottom: 45px;
}
.foto-content-blokken-01 .foto-content-blokken-01-titel + .foto-content-blokken-01-knoppen {
  margin-top: 45px;
}
.foto-content-blokken-01 .foto-content-blokken-01-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.foto-content-blokken-01 .foto-content-blokken-01-knoppen .btn {
  /**
			 * De icon-gap van 10 staat sinds 10 augustus 2026 op `.btn` zelf in
			 * components/_buttons.scss: hij is een designtoken en gold hier als enige,
			 * waardoor een nieuw blok er per definitie geen had.
			 *
			 * Coral chevron op beide knoppen. Het design zet in dít blok #FA5424 (het
			 * $danger-token) en in het accordion-blok ernaast #FF5E4C ($quinary),
			 * terwijl de Figma-stijl in beide gevallen "colors/quinary" heet. Dat is
			 * een vergissing in het design, dus overal $quinary.
			 */
}
.foto-content-blokken-01 .foto-content-blokken-01-knoppen .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
.foto-content-blokken-01 .foto-content-blokken-01-foto {
  position: relative;
  /**
		 * Zie de toelichting in _penninx-voetadvies.scss: de hoofdfoto is .cover-image
		 * (position:absolute) in een <picture>-wrapper (Imagify) of los als bare img.
		 * Onder lg geven we die wrapper een eigen hoogte via de aspect-ratio zodat de foto
		 * als gewoon beeld rendert (band of grote linkerfoto) i.p.v. de kolom absoluut te vullen.
		 */
  /**
		 * Drie standen mét een collage, gemodelleerd op _penninx-voetadvies.scss:
		 *  - <lg (gestapeld, paneel eronder): grote foto vol breed boven, de twee LIGGENDE
		 *    foto's eronder naast elkaar (50/50), natuurlijke 4:3, aan elkaar geplakt,
		 *    vierkante hoeken. Naast elkaar i.p.v. gestapeld in een smalle kolom, anders
		 *    persten die de 4:3-foto's tot platte strips.
		 *  - lg–xxl (laptop, paneel ernaast): clean fotogrid dat de kolomhoogte (van het
		 *    paneel via de gelijke-hoogte-row) vult: grote foto boven + de twee foto's
		 *    eronder naast elkaar, `object-fit: cover`, geen kanteling, geen gradient.
		 *  - ≥xxl (desktop): de gekantelde collage ligt absoluut over de foto (zie onder).
		 * De grid grijpt alleen met een collage (`:has`); een blok zónder collage (het
		 * FAQ-intro) houdt de algemene ≥lg-stand hieronder (foto vult de kolom absoluut).
		 */
  /**
		 * Algemene ≥lg-stand (zonder collage, en ≥xxl mét collage): de foto vult zijn kolom
		 * absoluut naast het paneel. De hoogte komt van het paneel via de row.
		 */
  /**
		 * De gradient uit het design: van de paneelkleur naar transparant over de
		 * eerste helft van de foto. Daarmee valt de naad tussen het paneel en de foto weg.
		 *
		 * Vanaf lg (naast het paneel). Bij een collage staat op laptop een clean grid
		 * zonder naad, dus daar is de gradient hierboven uitgezet (content: none); ≥xxl
		 * ligt de foto weer tegen het paneel en komt de gradient terug.
		 */
}
.foto-content-blokken-01 .foto-content-blokken-01-foto > picture, .foto-content-blokken-01 .foto-content-blokken-01-foto > img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.6724738676;
  overflow: hidden;
}
@media (max-width: 1519.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage) > picture, .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage) > img {
    grid-row: 1;
    border-radius: 0;
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage) {
    grid-template-rows: 2fr 1fr;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage) > picture, .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage) > img {
    position: relative;
    inset: auto;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-foto:has(.foto-content-blokken-01-collage):after {
    content: none;
  }
}
@media (min-width: 992px) {
  .foto-content-blokken-01 .foto-content-blokken-01-foto {
    display: block;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-foto > picture {
    position: static;
    aspect-ratio: auto;
    overflow: visible;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-foto > img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    overflow: visible;
    object-fit: cover;
  }
}
@media (min-width: 992px) {
  .foto-content-blokken-01 .foto-content-blokken-01-foto:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #27133A 0%, rgba(39, 19, 58, 0.75) 25%, rgba(39, 19, 58, 0) 50%);
  }
}
.foto-content-blokken-01 .foto-content-blokken-01-logo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(220px, 50%);
  aspect-ratio: 0.9696969697;
  border-bottom: 1px solid #F5F2F0;
  border-radius: 25px;
  background-color: #fff;
}
@media (min-width: 992px) {
  .foto-content-blokken-01 .foto-content-blokken-01-logo {
    width: max(220px, 33.3333%);
  }
}
.foto-content-blokken-01 .foto-content-blokken-01-logo > picture, .foto-content-blokken-01 .foto-content-blokken-01-logo > img {
  width: 71.875%;
  height: 72.7273%;
}
.foto-content-blokken-01 .foto-content-blokken-01-logo > picture {
  display: block;
}
.foto-content-blokken-01 .foto-content-blokken-01-logo > picture > img, .foto-content-blokken-01 .foto-content-blokken-01-logo > img {
  object-fit: contain;
}
.foto-content-blokken-01 .foto-content-blokken-01-logo > picture > img {
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: max(300px, min(435px, 22.6563%));
  }
  .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom .contact-info-blokken-01-adres {
    border-radius: 25px 0 0 0;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom .contact-info-blokken-01-tijden {
    border-radius: 0 0 0 25px;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom {
    order: 2;
    padding-bottom: 60px;
    background-color: #27133A;
  }
}
@media (max-width: 575.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom {
    order: 3;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom .contact-info-blokken-01-adres, .foto-content-blokken-01 .foto-content-blokken-01-contact-kolom .contact-info-blokken-01-tijden {
    border-radius: 0;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-tekst {
    order: 1;
  }
  .foto-content-blokken-01 .foto-content-blokken-01-foto {
    order: 3;
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-contact-inner {
    margin-inline: auto;
    padding-inline: 15px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-contact-inner {
    max-width: 540px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-contact-inner {
    max-width: 720px;
  }
}
.foto-content-blokken-01.paneel-5 .foto-content-blokken-01-tekst-inner {
  padding: 60px 15px;
}
@media (min-width: 992px) {
  .foto-content-blokken-01.paneel-5 .foto-content-blokken-01-tekst-inner {
    padding: 90px 60px;
  }
}
@media (min-width: 1520px) {
  .foto-content-blokken-01.paneel-5 .foto-content-blokken-01-tekst-inner {
    padding: 120px 90px;
  }
}
.foto-content-blokken-01.paneel-5 .foto-content-blokken-01-foto > picture, .foto-content-blokken-01.paneel-5 .foto-content-blokken-01-foto > img {
  aspect-ratio: 1.6231884058;
}
@media (min-width: 992px) {
  .foto-content-blokken-01.paneel-5 .foto-content-blokken-01-foto > picture, .foto-content-blokken-01.paneel-5 .foto-content-blokken-01-foto > img {
    aspect-ratio: auto;
  }
}
@media (min-width: 992px) {
  .foto-content-blokken-01.paneel-5 .foto-content-blokken-01-foto:after {
    background: linear-gradient(90deg, #27133A 0%, rgba(39, 19, 58, 0.75) 30%, rgba(39, 19, 58, 0) 60%);
  }
}
@media (min-width: 1520px) {
  .foto-content-blokken-01.paneel-8 .foto-content-blokken-01-tekst-inner {
    max-width: 1280px;
  }
}
@media (max-width: 1519.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-collage {
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 0;
  }
}
@media (min-width: 1520px) {
  .foto-content-blokken-01 .foto-content-blokken-01-collage {
    display: block;
  }
}
.foto-content-blokken-01 .foto-content-blokken-01-kaart {
  --kaart-draai: 0deg;
  --kaart-schuif: 0%;
  position: relative;
  aspect-ratio: 1.3333333333;
  overflow: hidden;
  border-radius: 25px;
}
.foto-content-blokken-01 .foto-content-blokken-01-kaart > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1519.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-kaart {
    border-radius: 0;
    min-height: 0;
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .foto-content-blokken-01 .foto-content-blokken-01-kaart {
    height: 100%;
    aspect-ratio: auto;
  }
}
@media (min-width: 1520px) {
  .foto-content-blokken-01 .foto-content-blokken-01-kaart {
    position: absolute;
    z-index: 1;
    top: 50%;
    height: 48.9%;
    transform: translateY(var(--kaart-schuif)) rotate(var(--kaart-draai));
  }
}
.foto-content-blokken-01 .foto-content-blokken-01-kaart-1 {
  --kaart-draai: -5deg;
  --kaart-schuif: -101.25%;
}
@media (min-width: 1520px) {
  .foto-content-blokken-01 .foto-content-blokken-01-kaart-1 {
    left: 1.2%;
  }
}
.foto-content-blokken-01 .foto-content-blokken-01-kaart-2 {
  --kaart-draai: 5deg;
  --kaart-schuif: 1.25%;
}
@media (min-width: 1520px) {
  .foto-content-blokken-01 .foto-content-blokken-01-kaart-2 {
    left: -5.8%;
  }
}
.foto-content-blokken-01.foto-links {
  /**
		 * De gekantelde collage staat rechts, dus de naad zit rechts en de kaarten
		 * spiegelen: rechts verankerd (linkerrand groeit de foto in, wég van de tekst) en
		 * de draairichting gewisseld. Alleen ≥xxl, gelijk aan de foto-rechts-stand. De
		 * verschuiving naar het midden (translateY) blijft staan; alleen de draai en de
		 * horizontale kant wisselen.
		 */
}
@media (min-width: 992px) {
  .foto-content-blokken-01.foto-links .foto-content-blokken-01-tekst {
    order: 2;
    justify-content: flex-end;
  }
  .foto-content-blokken-01.foto-links .foto-content-blokken-01-foto {
    order: 1;
  }
  .foto-content-blokken-01.foto-links .foto-content-blokken-01-foto:after {
    background: linear-gradient(270deg, #27133A 0%, rgba(39, 19, 58, 0.75) 25%, rgba(39, 19, 58, 0) 50%);
  }
}
@media (min-width: 1520px) {
  .foto-content-blokken-01.foto-links .foto-content-blokken-01-kaart-1 {
    --kaart-draai: 5deg;
    left: auto;
    right: 1.2%;
  }
  .foto-content-blokken-01.foto-links .foto-content-blokken-01-kaart-2 {
    --kaart-draai: -5deg;
    left: auto;
    right: -5.8%;
  }
}
/**
 * ====================================================
 * Accordions 01
 * ====================================================
 *
 * Het FAQ-blok: een kolom met accordions plus een tekstkolom van 330 ernaast.
 * Gemeten op designframe 12 (overzicht) en 13 (detail).
 *
 * De vorm van een accordion-item zelf staat in components/_accordion.scss, want
 * die komt ook in de footer en straks op de frontpage terug. Hier staat alleen
 * wat bij dít blok hoort: de groepering per categorie en de tekstkolom.
 *
 * De kolommen (930 + 150 + 330) komen uit het grid via col-8 / offset-1 / col-3,
 * dus daar is geen CSS voor nodig.
 */
.accordions-01 {
  /**
	 * 60 tussen twee categoriegroepen. Op de laatste geen marge, anders telt hij op
	 * bij de sectiepadding.
	 */
  /**
	 * De tekstkolom. Geen kaart: in het design heeft dit blok geen fill, geen rand,
	 * geen schaduw en geen padding, dus de crème van de pagina schijnt door.
	 *
	 * De verticale ritmes zijn niet gelijk (30 / 10 / 30), dus dat gaat met marges
	 * per element en niet met één gap op de kolom.
	 */
  /**
	 * Onder lg staan de kolommen op elkaar. Staat de tekstkolom in de DOM ná de
	 * accordions (de rechts-stand van het overzicht), dan heeft hij daar ruimte
	 * boven nodig; staat hij ervóór (de links-stand van het detail, waar hij de
	 * sectiekop van de gerelateerde vragen is), dan hoort die ruimte eronder.
	 */
}
.accordions-01 .accordions-01-groep:not(:last-child) {
  margin-bottom: 60px;
}
.accordions-01 .accordions-01-categorie {
  margin-bottom: 30px;
}
.accordions-01 .accordions-01-info .subheading {
  margin-bottom: 30px;
}
.accordions-01 .accordions-01-info .accordions-01-info-titel {
  margin-bottom: 10px;
}
.accordions-01 .accordions-01-info .accordions-01-info-tekst {
  margin-bottom: 30px;
}
.accordions-01 .accordions-01-info .btn {
  gap: 10px;
}
.accordions-01 .accordions-01-info .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
@media (max-width: 991.98px) {
  .accordions-01 {
    /**
		 * Frontpage-stand (`mobiel_split`): de infokolom om de vragen heen. De kolom en
		 * `.accordions-01-info` worden `display: contents`, zodat de kop-wrapper en de
		 * knop-wrapper losse flex-items van de `.row` worden. Ze krijgen dan Bootstrap's
		 * `.row > *`-behandeling (100% breed + de gutter-padding), dus ze lijnen links uit
		 * met de vragenkolom. Met `order`: kop boven de vragen, knop eronder, 30px ertussen.
		 * Vervangt hier de `margin-top: 45px` van de info-rechts-basis (die op een box
		 * hangt die nu niet meer bestaat).
		 */
  }
  .accordions-01.info-rechts .accordions-01-info {
    margin-top: 45px;
  }
  .accordions-01.info-links .accordions-01-info {
    margin-bottom: 45px;
  }
  .accordions-01.accordions-01-mobiel-split {
    /**
			 * Via `display: contents` zijn de kop en knop geen directe DOM-kinderen van
			 * `.row`, dus Bootstrap's `.row > *` raakt ze niet en missen ze de kolom-padding.
			 * Zelf de halve gutter meegeven zodat ze op dezelfde contentlijn als de
			 * vragenkolom staan, plus volle breedte zodat ze elk hun eigen regel pakken.
			 */
  }
  .accordions-01.accordions-01-mobiel-split .accordions-01-info-col, .accordions-01.accordions-01-mobiel-split .accordions-01-info {
    display: contents;
  }
  .accordions-01.accordions-01-mobiel-split .accordions-01-info-header, .accordions-01.accordions-01-mobiel-split .accordions-01-info-knop {
    width: 100%;
    padding-inline: calc(var(--bs-gutter-x) * 0.5);
  }
  .accordions-01.accordions-01-mobiel-split .accordions-01-info-header {
    order: -1;
    margin-bottom: 30px;
  }
  .accordions-01.accordions-01-mobiel-split .accordions-01-info-header > *:last-child {
    margin-bottom: 0;
  }
  .accordions-01.accordions-01-mobiel-split .accordions-01-info-knop {
    order: 1;
    margin-top: 30px;
  }
}
/**
 * ====================================================
 * FAQ detail (blok `Vraag`)
 * ====================================================
 *
 * De detailpagina van één vraag, designframe 13. Gemeten op 1920.
 *
 * De root-class is bewust `.faq-detail` en niet `.single-faq`, ook al heet de
 * template zo: `body_class()` zet op een single van het CPT faq zelf al de class
 * `single-faq` op de `<body>`. Met die naam raakte deze SCSS dus óók de body, en
 * dan krijgt de hele pagina het paarse vlak, 120px padding en witte tekst; de
 * topbar begon 120px lager en de footertekst werd onleesbaar. Noem een root-class
 * dus nooit gelijk aan een `body_class()`-uitvoer (`single-<posttype>`, `page`,
 * `archive`, `tax-*`, `term-*`, `postid-N`).
 *
 * Dit blok staat op een full-bleed paars vlak met witte tekst; de rest van de
 * site is crème. De content staat daarin op col-10 offset-1, dus 1170 breed.
 *
 * Verticaal ritme uit het design: 120 sectiepadding, knop → titel 45, titel →
 * kort antwoord 20, kort antwoord → hairline 45, hairline → lang antwoord 45,
 * subkop → alinea 10, alinea → volgende subkop 20.
 */
.faq-detail {
  background-color: #27133A;
  color: #fff;
  padding-block: 60px;
  /**
	 * Alle koppen in dit blok zijn wit, ook die in de editor-content. $headings-color
	 * staat globaal op $gray-900, dus dat moet hier expliciet overschreven worden,
	 * anders vallen de subkoppen van het lange antwoord weg tegen het paars.
	 */
  /**
	 * De hairline uit het design: 1px in $primary over de volle contentbreedte van
	 * 1170. Hij staat als border-top op het lange antwoord en niet als eigen
	 * element, want hij hoort bij de overgang van het korte naar het lange
	 * antwoord en verdwijnt dus mee als er geen lang antwoord is.
	 *
	 * Let op dat dit $primary is en niet $quaternary: op paars is het warme beige
	 * van de accordion-randen een veel te hard contrast.
	 */
}
@media (min-width: 992px) {
  .faq-detail {
    padding-block: 120px;
  }
}
.faq-detail h1, .faq-detail .h1, .faq-detail h2, .faq-detail .h2, .faq-detail h3, .faq-detail .h3, .faq-detail h4, .faq-detail .h4, .faq-detail h5, .faq-detail .h5, .faq-detail h6, .faq-detail .h6 {
  color: #fff;
}
.faq-detail .faq-detail-terug {
  gap: 10px;
  margin-bottom: 45px;
}
.faq-detail .faq-detail-terug i {
  color: #FF5E4C;
  font-size: 1rem;
}
.faq-detail .faq-detail-titel {
  margin-bottom: 20px;
}
.faq-detail .faq-detail-kort {
  margin-bottom: 0;
}
.faq-detail .faq-detail-kort > *:last-child {
  margin-bottom: 0;
}
.faq-detail .faq-detail-lang {
  margin-top: 45px;
  padding-top: 45px;
  border-top: 1px solid #4A246D;
  /**
		 * Subkop → alinea 10, alinea → volgende subkop 20.
		 *
		 * De subkop is in het design 32 en dat is $h3-font-size. In de editor is de
		 * juiste tag hier een h2 (hij staat onder de h1 van de vraag, en niveaus
		 * overslaan mag niet), en die is globaal 36. Grootte dus via deze regel en
		 * niet via de tag: dat is precies wat koppen-hierarchie.md voorschrijft, en
		 * de klant kan in de editor toch geen class meegeven.
		 */
}
.faq-detail .faq-detail-lang h2, .faq-detail .faq-detail-lang .h2, .faq-detail .faq-detail-lang h3, .faq-detail .faq-detail-lang .h3, .faq-detail .faq-detail-lang h4, .faq-detail .faq-detail-lang .h4 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.faq-detail .faq-detail-lang h2:first-child, .faq-detail .faq-detail-lang .h2:first-child, .faq-detail .faq-detail-lang h3:first-child, .faq-detail .faq-detail-lang .h3:first-child, .faq-detail .faq-detail-lang h4:first-child, .faq-detail .faq-detail-lang .h4:first-child {
  margin-top: 0;
}
.faq-detail .faq-detail-lang h2, .faq-detail .faq-detail-lang .h2 {
  font-size: 32px;
}
.faq-detail .faq-detail-lang p {
  margin-bottom: 20px;
}
.faq-detail .faq-detail-lang p:last-child {
  margin-bottom: 0;
}
.faq-detail .faq-detail-lang a:not(.btn) {
  color: #fff;
  text-decoration-color: #FF5E4C;
}
.faq-detail .faq-detail-lang a:not(.btn):hover {
  color: #FF5E4C;
}
/**
 * ====================================================
 * Cards 02 (nieuwsblok)
 * ====================================================
 *
 * Kopblok met een categoriekiezer rechts, daaronder het kaartgrid en de paginering.
 * Gemeten op designframe 16 (1410 op x=255):
 *
 *   kopblok      tekst 810 links, kiezer 330 rechts, 270 vrije ruimte ertussen
 *   eyebrow      45 boven de titel
 *   kopblok      45 naar de eerste kaartrij
 *   grid         3 × 450 met 30 gutter, verticaal ook 30 (dus g-30)
 *   paginering   30 onder de laatste rij
 *
 * De kiezer staat op de onderlijn van het kopblok (align-items: end in de markup),
 * niet bovenaan: in het design lopen de onderkant van de kop en de onderkant van
 * het vak gelijk.
 *
 * De kaart zelf staat in css/components/_post-item.scss en de paginering in
 * css/components/_pagination.scss: dit bestand is alleen de sectie eromheen.
 */
.cards-02 {
  overflow-x: clip;
  /**
	 * Basisritme 30, de waarde van het blok op de frontpage (kop 40). Het
	 * nieuwsoverzicht heeft een kop van 56 en daar staat 45 in het design; die stand
	 * hangt aan .cards-02-kop-ruim, die de partial zet zodra de kop op .display-6
	 * staat.
	 *
	 * Onder lg staat de kiezer of de knop ónder de kop, en dan is de row-gap de
	 * afstand tussen die twee.
	 */
  /**
	 * De knop rechts in het kopblok (de frontpage-variant). Staat op de onderlijn van
	 * de kop, dus de kolom mag niet meegroeien met de hoogte van de tekstkolom.
	 */
  /**
	 * De categoriekiezer: een vak van 330 × 66 in de body-kleur met een beige rand.
	 * Een Bootstrap-dropdown en geen <select>, want een select is per
	 * besturingssysteem anders opgemaakt en het design vraagt een eigen chevron.
	 */
  /**
	 * Het cursieve label is de lege stand uit het design en werkt daar als
	 * placeholder. Zodra er een categorie gekozen is staat er een echte waarde, en die
	 * hoort niet cursief: dan leest hij als een suggestie in plaats van als de keuze
	 * die actief is.
	 */
  /**
	 * Het uitgelichte nieuws als één altijd-actieve Swiper: een peek-slider met brede
	 * kaarten tot 1200 (één kaart + peek < 992, twee + peek 992-1199), en pas vanaf xl
	 * drie per rij (spaceBetween 30 geeft daar exact de oude 3-koloms-gridbreedte). Geen
	 * destroy, dus geen sprong. Het grid-blok hieronder is alleen een terugval vóór de
	 * init of als JS faalt; zodra .swiper-initialized erop staat bepaalt Swiper de layout.
	 * De terugval staat op xl, waar de slider ook echt een 3-koloms grid wordt. Alleen
	 * actief op de frontpage (slider-arg); het overzicht houdt zijn eigen Bootstrap-grid.
	 */
}
.cards-02 .cards-02-kop {
  margin-bottom: 30px;
  row-gap: 30px;
}
@media (min-width: 992px) {
  .cards-02 .cards-02-kop {
    row-gap: 0;
  }
}
@media (min-width: 992px) {
  .cards-02 .cards-02-kop.cards-02-kop-ruim {
    margin-bottom: 45px;
  }
}
.cards-02 .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .cards-02 .cards-02-kop-ruim .subheading {
    margin-bottom: 45px;
  }
}
.cards-02 .cards-02-kop-knop {
  display: flex;
}
.cards-02 .cards-02-kop-knop .btn {
  gap: 10px;
}
.cards-02 .cards-02-kop-knop .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
.cards-02 .cards-02-titel {
  margin-bottom: 0;
}
.cards-02 .cards-02-filter-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 20px 24px;
  border: 1px solid #E0D7D1;
  border-radius: 10px;
  background-color: #F5F2F0;
  color: #212529;
  font-size: 1rem;
  /**
		 * 1,5 en niet de body-waarde 1,6: het vak is in het design 66 hoog en dat is
		 * 20 + 20 padding, 2×1 rand en één regel van 24. Met 1,6 wordt de regel 25,6
		 * en het vak 67,6.
		 */
  line-height: 1.5;
  text-align: left;
  transition: all 0.2s ease-in-out;
}
.cards-02 .cards-02-filter-knop:after {
  display: none;
}
.cards-02 .cards-02-filter-knop i {
  color: #FF5E4C;
  font-size: 1rem;
  flex-shrink: 0;
  transition: all 0.2s ease-in-out;
}
.cards-02 .cards-02-filter-knop:hover, .cards-02 .cards-02-filter-knop[aria-expanded="true"] {
  border-color: #FF5E4C;
}
.cards-02 .cards-02-filter-knop[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.cards-02 .cards-02-filter-leeg {
  font-style: italic;
}
.cards-02 .dropdown-menu {
  width: 100%;
  padding: 10px 0;
  border: 1px solid #E0D7D1;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.05);
}
.cards-02 .dropdown-menu .dropdown-item {
  padding: 8px 24px;
  color: #212529;
  font-size: 1rem;
}
.cards-02 .dropdown-menu .dropdown-item:hover, .cards-02 .dropdown-menu .dropdown-item:focus {
  background-color: #F5F2F0;
  color: #FF5E4C;
}
.cards-02 .dropdown-menu .dropdown-item.active {
  background-color: transparent;
  color: #FF5E4C;
  font-weight: 600;
}
.cards-02 .cards-02-knop {
  display: flex;
  margin-top: 45px;
}
.cards-02 .cards-02-knop .btn {
  gap: 10px;
}
.cards-02 .cards-02-knop .btn i {
  color: #FF5E4C;
  font-size: 1rem;
}
.cards-02 .cards-02-leeg {
  margin-top: 0;
}
@media (min-width: 1200px) {
  .cards-02 .swiper-nieuws:not(.swiper-initialized) .swiper-wrapper {
    flex-wrap: wrap;
    margin: -15px;
  }
  .cards-02 .swiper-nieuws:not(.swiper-initialized) .swiper-slide {
    width: 33.333%;
    height: auto;
    padding: 15px;
  }
}
/**
 * ====================================================
 * Nieuwsdetail
 * ====================================================
 *
 * Designframe 17, gemeten op 1920. Artikelkolom 930 (col-8) links, zijkolom 330
 * (col-3) rechts met 150 ertussen, dus een lege kolom plus twee gutters.
 *
 * Verticaal ritme in het artikel: metaregel, 30, titel, 30, intro, 45, beeld, 45,
 * content.
 *
 * De root-class is `.nieuws-detail` en niet `.single-post`: dat laatste is een
 * uitvoer van body_class() en zou deze opmaak op de hele pagina zetten. Zie
 * .claude/rules/php-bestandsnamen.md.
 */
.nieuws-detail {
  /**
	 * De metaregel: de categorie links, datum en auteur rechts. In het design zijn
	 * dat drie losse pillen op de crème achtergrond, dus space-between met een gap
	 * die het wrappen netjes houdt op een smalle kolom.
	 */
  /**
	 * De zijkolom staat in het design bovenaan uitgelijnd en scrollt mee; de twee
	 * kaarten hebben 30 ertussen. Onder lg staat hij ónder het artikel, met dezelfde
	 * 45 die het artikel intern gebruikt.
	 */
}
.nieuws-detail .nieuws-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 30px;
}
.nieuws-detail .nieuws-detail-meta-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.nieuws-detail .nieuws-detail-categorie, .nieuws-detail .nieuws-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.6;
}
.nieuws-detail .nieuws-detail-categorie {
  background-color: #4A246D;
  color: #fff;
  font-weight: 700;
}
.nieuws-detail .nieuws-detail-meta-item {
  background-color: #fff;
  color: #212529;
}
.nieuws-detail .nieuws-detail-meta-item i {
  font-size: 0.875rem;
  color: #FF5E4C;
}
.nieuws-detail .nieuws-detail-titel {
  margin-bottom: 30px;
}
.nieuws-detail .nieuws-detail-intro {
  margin-bottom: 45px;
}
.nieuws-detail .nieuws-detail-beeld {
  margin-bottom: 45px;
  overflow: hidden;
  border-radius: 25px;
}
.nieuws-detail .nieuws-detail-zijkolom {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 45px;
}
@media (min-width: 992px) {
  .nieuws-detail .nieuws-detail-zijkolom {
    margin-top: 0;
  }
}
/**
 * ====================================================
 * Gerelateerde artikelen (zijkolom nieuwsdetail)
 * ====================================================
 *
 * Zelfde kaartschil als de Mini CTA: wit, radius 25, padding 30. Gemeten op frame
 * 17 (node 7871:10626): kop 24 met 30 eronder, dan de lijst van 270 breed met een
 * 1px hairline bóven élke regel, inclusief de regel "Bekijk alle artikelen"
 * onderaan. Rondom elke hairline 15, dus per regel padding-top 15 plus een lijst-gap
 * van 15.
 *
 * Eén verschil met het design, bewust: de kop staat in Figma in een vak van 180 en
 * loopt daardoor over twee regels. Die 180 is geen ontwerpmaat maar de breedte die
 * het tekstvak nu heeft, dus hier krijgt de kop de volle 270 en staat hij op één
 * regel. De kaart wordt daarmee ongeveer 34 lager dan de 445 uit het design.
 */
.nieuws-gerelateerd {
  padding: 30px;
  border-radius: 25px;
  background-color: #fff;
  /**
	 * De titel is in het design body-tekst en geen kop-tekst: Asap Regular 16 op lh
	 * 1,6. De tag is wél een kop (h3, onder de h2 van deze kaart), dus font-family,
	 * grootte en gewicht moeten hier expliciet terug naar de body-waarden. Zonder
	 * font-family zou General Sans blijven staan, en zonder color de $headings-color.
	 */
}
.nieuws-gerelateerd .nieuws-gerelateerd-titel {
  margin-bottom: 30px;
}
.nieuws-gerelateerd .nieuws-gerelateerd-lijst {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 0;
}
.nieuws-gerelateerd .nieuws-gerelateerd-link, .nieuws-gerelateerd .nieuws-gerelateerd-alle {
  display: flex;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #F5F2F0;
  color: #212529;
  text-decoration: none;
}
.nieuws-gerelateerd .nieuws-gerelateerd-link i, .nieuws-gerelateerd .nieuws-gerelateerd-alle i {
  flex-shrink: 0;
  line-height: 1.6rem;
  font-size: 1rem;
  color: #FF5E4C;
}
.nieuws-gerelateerd .nieuws-gerelateerd-link:hover, .nieuws-gerelateerd .nieuws-gerelateerd-alle:hover {
  color: #FF5E4C;
}
.nieuws-gerelateerd .nieuws-gerelateerd-link {
  align-items: flex-start;
}
.nieuws-gerelateerd .nieuws-gerelateerd-kop {
  margin-bottom: 0;
  font-family: "Asap", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: inherit;
}
.nieuws-gerelateerd .nieuws-gerelateerd-alle {
  align-items: center;
  margin-top: 15px;
  font-weight: 600;
}
/**
 * De detailpagina van een medewerker (single-medewerkers.php), tegelijk de
 * auteurspagina, naar het template-design van de Webzaken Blog/Nieuws-module
 * (node 2067:896), vertaald naar de Penninx-huisstijl.
 *
 * De layout (kolommen, naden van 30, de sectiepadding en het gat van 150 via
 * offset-xxl-1) komt uit utilities in de markup; hier staat alleen de vorm van
 * de kaart en de terug-link. Het kaartenraster is de gewone nieuws-kaart
 * (_post-item.scss) en de paginering de gewone component (_pagination.scss).
 *
 * De class heet `.medewerker-detail` en niet `.single-medewerkers`: dat laatste is
 * precies wat `body_class()` op deze pagina uitschrijft, dus dan zou deze blok-CSS
 * op de hele pagina landen. Zelfde afweging als bij `.faq-detail`.
 */
/**
 * De designbreedte van de kaart. Staat als variabele omdat de terug-knop eronder er
 * exact even breed uit moet komen: die is een sibling van de kaart en niet een kind, dus
 * `width: 100%` zou hem de breedte van de kólom geven (290 tot 410 op lg) en dan lopen de
 * twee uit elkaar.
 */
.medewerker-detail {
  /**
	 * De kaart is dezelfde vorm als de kaart op het medewerkersoverzicht
	 * (`.medewerker-item`), op verzoek van Monica, 17 augustus 2026: het is dezelfde
	 * kaart van dezelfde persoon, dus radius en de manier waarop naam en functie
	 * getoond worden horen gelijk te zijn.
	 *
	 * De radius plus het clippen zitten daarom op de kaart en niet per hoek op de twee
	 * vlakken. Zo zijn de buitenhoeken rond en is de naad tussen de foto en het witte
	 * vlak per definitie vierkant, zonder twee keer twee hoekwaarden. De schaduw blijft
	 * wél staan (die heeft het overzicht niet): daar staat de kaart in een raster van
	 * gelijke kaarten, hier staat hij als los element naast een kolom tekst.
	 *
	 * De `max-width` is de designmaat als cap: de lg-kolom is 290 tot 410 breed, en
	 * zonder cap groeit de kaart in die band mee tot voorbij zijn 330.
	 *
	 * **Die cap geldt vanaf md en niet lager** (verzoek van Monica, 17 augustus 2026): onder
	 * md vult de kaart de volle kolombreedte. Het breekpunt is md en niet lg, en dat is
	 * geen smaak: de nieuwskaarten eronder staan op `col-12 col-md-6`, dus ze zijn precies
	 * ónder md volle kolombreedte. Alleen daar is deze kaart dus écht even breed als de
	 * artikelen eronder, wat de bedoeling was. Tussen md en lg staan die kaarten twee per
	 * rij op 345 tot 465, en dan is 330 er de passende maat naast.
	 */
  /**
	 * Naam en functie staan strak op elkaar, gelijk aan de kaart in het overzicht:
	 * beide zonder ondermarge, en de 30 onderaan de kaart komt uit de padding. De maat
	 * van de naam komt uit de `.h4`-utility in de markup en niet hier, want dat is
	 * hetzelfde token dat het overzicht gebruikt.
	 *
	 * De horizontale binnenruimte is 30 en niet de 45 van het overzicht: die kaart valt
	 * daar zelf ook op 30 terug zodra hij smaller wordt dan de design-450, en deze is
	 * altijd 330.
	 */
  /**
	 * De terug-knop, op verzoek van Monica (17 augustus 2026) een coral knop met een
	 * paars pijltje over de volle breedte van de kaart, met het pijltje en het label
	 * tegen de twee randen. Dit was een kale tekstlink op fit-content.
	 *
	 * Alle vorm komt uit `.btn.btn-quinary` in `components/_buttons.scss`: hoogte 50,
	 * padding 12/24, radius 25, Asap SemiBold en het witte label. Hier staat alleen wat
	 * deze knop ánders doet dan een gewone knop. Het paars van het pijltje is de
	 * utility `text-primary` in de markup, precies zoals op de 404 en onder het
	 * contactformulier.
	 *
	 * De breedte is een `max-width` en niet alleen `width: 100%`: de knop is een sibling
	 * van de kaart, dus 100% is de breedte van de kólom (290 tot 410 op lg) en dan komt
	 * hij breder uit dan de kaart erboven. Die cap staat om dezelfde reden vanaf md, want
	 * daaronder laat de kaart hem ook los en moeten de twee gelijk blijven.
	 *
	 * De `gap` van 10 uit `.btn` blijft staan en wordt hier een ondergrens in plaats van
	 * de zichtbare afstand, net als bij `.hero-front-button`. Zet er dus geen eigen
	 * waarde voor: `space-between` bepaalt wat je ziet.
	 */
}
.medewerker-detail-kaart {
  overflow: hidden;
  border-radius: 25px;
  box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
  .medewerker-detail-kaart {
    max-width: 330px;
  }
}
.medewerker-detail-kaart-info {
  padding: 30px;
  background-color: #fff;
}
.medewerker-detail-kaart-naam, .medewerker-detail-kaart-functie {
  margin-bottom: 0;
}
.medewerker-detail-terug {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .medewerker-detail-terug {
    max-width: 330px;
  }
}
/**
 * Blok `cta_blokken_02` (designframe 3, node 7857:9108): een paarse CTA-kaart van twee
 * tegen elkaar geplakte panelen. Zelfde geplakte-hoeken-patroon als het contactblok en
 * het hero-CTA-blok: buitenhoeken rond op 25, de naad ertussen vierkant.
 *
 * Beide panelen hebben in het design dezelfde fill ($primary), dus de naad is alleen
 * zichtbaar door de schaduw op het linkerpaneel. Die schaduw hoort bij twee panelen die
 * náást elkaar staan, dus hij staat achter een lg-gate: gestapeld is er geen naad om
 * over te vallen. Dat is dezelfde afweging als bij het contactblok.
 */
.cta-blokken-02 {
  /**
	 * De binnenruimte. Vanaf lg is het de designwaarde 60. Gestapeld loopt hij in stappen
	 * terug naar 30 op mobiel, want 60 rondom is op een telefoon te veel van de breedte:
	 * 60 van md tot lg, 45 op sm en 30 daaronder.
	 */
  /**
	 * Gestapeld staan de twee panelen op elkaar en is de naad ertussen de afstand tussen
	 * de kop en de alinea. Twee volle paddings maken daar 2 × de binnenruimte van, en dan
	 * staat de tekst veel losser dan in elk ander tekstblok op de site. Daarom draagt de
	 * kop geen ondermarge en zet de actiekolom er 20 boven: dezelfde afstand die een titel
	 * en een alinea overal elders hebben ($paragraph-margin-bottom).
	 *
	 * Naast elkaar bestaat die naad niet, want dan is de scheiding horizontaal en dragen
	 * beide panelen hun eigen volle padding.
	 */
  /**
	 * Links: de eyebrow met 45 eronder en dan de kop. De kop mag niet meegroeien, want
	 * dan zou hij bij een korte titel van de bovenkant wegzakken.
	 */
  /**
	 * Rechts: de alinea bovenaan en de knop tegen de onderrand, zodat de knop op de
	 * onderlijn van de kaart staat en niet direct onder een korte alinea zweeft.
	 */
  /**
	 * De hoeken. Gestapeld is het paar één verticale vorm (rond boven bij de kop, rond
	 * onder bij de actie, naad vierkant); vanaf lg kantelt dat naar links en rechts.
	 */
}
.cta-blokken-02 .cta-blokken-02-kaart {
  position: relative;
  /**
		 * Geen `overflow: hidden`: de hoeken zitten op de panelen zelf, en de schaduw van
		 * het linkerpaneel moet juist over het rechterpaneel heen kunnen vallen.
		 */
}
.cta-blokken-02 .cta-blokken-02-kop, .cta-blokken-02 .cta-blokken-02-actie {
  background-color: #4A246D;
}
.cta-blokken-02 .cta-blokken-02-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
}
@media (min-width: 576px) {
  .cta-blokken-02 .cta-blokken-02-inner {
    padding: 45px;
  }
}
@media (min-width: 768px) {
  .cta-blokken-02 .cta-blokken-02-inner {
    padding: 60px;
  }
}
@media (max-width: 991.98px) {
  .cta-blokken-02 .cta-blokken-02-kop .cta-blokken-02-inner {
    padding-bottom: 0;
  }
  .cta-blokken-02 .cta-blokken-02-actie .cta-blokken-02-inner {
    padding-top: 20px;
  }
}
.cta-blokken-02 .cta-blokken-02-kop {
  position: relative;
  z-index: 2;
}
.cta-blokken-02 .cta-blokken-02-kop .subheading {
  flex: 0 0 auto;
  margin-bottom: 45px;
}
.cta-blokken-02 .cta-blokken-02-kop .cta-blokken-02-titel {
  flex: 0 0 auto;
}
@media (min-width: 992px) {
  .cta-blokken-02 .cta-blokken-02-kop {
    box-shadow: 16px 0 24px rgba(0, 0, 0, 0.25);
    clip-path: inset(0 -40px 0 0);
  }
}
.cta-blokken-02 .cta-blokken-02-actie {
  position: relative;
  z-index: 1;
}
.cta-blokken-02 .cta-blokken-02-actie .cta-blokken-02-inner {
  justify-content: space-between;
}
.cta-blokken-02 .cta-blokken-02-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 30px;
}
.cta-blokken-02 .btn-quinary i {
  color: #4A246D;
}
.cta-blokken-02 .cta-blokken-02-kop {
  border-radius: 25px 25px 0 0;
}
.cta-blokken-02 .cta-blokken-02-actie {
  border-radius: 0 0 25px 25px;
}
@media (min-width: 992px) {
  .cta-blokken-02 .cta-blokken-02-kop {
    border-radius: 25px 0 0 25px;
  }
  .cta-blokken-02 .cta-blokken-02-actie {
    border-radius: 0 25px 25px 0;
  }
}
/**
 * De vier stappen op de Voetadvies-pagina (designframe 3, node 7825:3331).
 *
 * Elke stap is 1410 breed en 705 hoog: twee helften van 705 zonder gutter, de
 * buitenhoeken rond op 25 en de naad ertussen vierkant. De foto wisselt per stap van
 * kant, te beginnen met links. Tussen de stappen 30, en dezelfde 30 naar de Mini CTA.
 *
 * Verwant aan `foto-content-blokken-01`, maar geometrisch anders: dat blok is
 * full-bleed met panelen van 960 tegen de schermrand, dit staat binnen de container.
 * Daarom een eigen root-class en niet een arg op die partial.
 *
 * Drie standen, met de omslag op lg:
 *   ≥lg   de designstand: 50/50 naast elkaar, hoogte 705 vanaf xxl, daaronder
 *         vloeiend mee met de kolombreedte
 *   <lg   gestapeld: tekst boven, foto eronder in 4:3. De ronde hoeken verhuizen
 *         mee naar boven en onder, zodat het paar één vorm blijft.
 */
.voetadvies-stappen .voetadvies-stap + .voetadvies-stap {
  margin-top: 15px;
}
@media (min-width: 992px) {
  .voetadvies-stappen .voetadvies-stap + .voetadvies-stap {
    margin-top: 30px;
  }
}
/**
 * De CTA-kaart hangt in het design aan de stappen-flow: hij staat op dezelfde 30 onder
 * stap 4 als de stappen onder elkaar. Hij draagt die naad dus zelf, in plaats van de
 * gebruikelijke sectiepadding van 120.
 */
.voetadvies-cta {
  margin-top: 15px;
}
@media (min-width: 992px) {
  .voetadvies-cta {
    margin-top: 30px;
  }
}
.voetadvies-stap {
  /**
	 * Geen `overflow: hidden` op de stap: de hoeken zitten op de twee helften zelf, en
	 * knippen zou de foto onnodig door een tweede laag halen.
	 */
  /**
	 * De eyebrow is een flex-item in een kolom met space-between, dus hij mag niet
	 * meegroeien: zonder deze regel zou hij de helft van de vrije ruimte pakken en
	 * kwam het tekstblok niet meer tegen de onderrand.
	 */
  /**
	 * De alinea is in het design 525 breed terwijl de titel de volle 585 gebruikt, dus
	 * een extra inzet van 60 rechts. Onder xxl krimpt de kolom mee en zou die inzet de
	 * regel te smal maken, dus daar valt hij weg.
	 */
  /**
	 * De ronde hoeken. Gestapeld is het paar één verticale vorm: rond bovenaan bij de
	 * tekst en onderaan bij de foto, en de naad in het midden vierkant. Vanaf lg
	 * kantelt dat naar links en rechts, en zet `order` de foto op zijn designkant.
	 */
}
.voetadvies-stap .row {
  align-items: stretch;
}
.voetadvies-stap .voetadvies-stap-tekst {
  background-color: #fff;
}
.voetadvies-stap .voetadvies-stap-tekst-inner {
  display: flex;
  flex-direction: column;
  /**
		 * De eyebrow tegen de bovenrand en het tekstblok tegen de onderrand. Zo eindigen
		 * de teksten van vier stappen met verschillende lengtes allemaal op dezelfde
		 * onderlijn, precies zoals het design ze uitlijnt.
		 */
  justify-content: space-between;
  height: 100%;
  padding: 30px;
}
@media (min-width: 992px) {
  .voetadvies-stap .voetadvies-stap-tekst-inner {
    padding: 60px;
  }
}
.voetadvies-stap .subheading {
  flex: 0 0 auto;
  margin-bottom: 30px;
}
.voetadvies-stap .voetadvies-stap-tekstblok {
  flex: 0 0 auto;
}
.voetadvies-stap .voetadvies-stap-tekstregel {
  margin-top: 20px;
}
@media (min-width: 1520px) {
  .voetadvies-stap .voetadvies-stap-tekstregel {
    padding-right: 60px;
  }
}
.voetadvies-stap .voetadvies-stap-foto {
  position: relative;
  overflow: hidden;
  /**
		 * Gestapeld heeft de fotokolom geen hoogte van zichzelf, want de foto staat
		 * absoluut. 4:3 is dezelfde verhouding als de kaartafbeelding elders in het
		 * thema en houdt de foto op mobiel herkenbaar zonder hem plat te drukken.
		 */
}
.voetadvies-stap .voetadvies-stap-foto::before {
  content: "";
  display: block;
  padding-top: 75%;
}
.voetadvies-stap .voetadvies-stap-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 992px) {
  .voetadvies-stap {
    /**
		 * Naast elkaar is de foto vierkant, en daarmee bepaalt hij de hoogte van de stap:
		 * in het design is de stap 1410 breed en 705 hoog, dus precies een halve breedte.
		 * Zonder deze vierkant-verhouding zakt de stap in tot de hoogte van zijn tekst,
		 * en dat was op 1920 gemeten 343 in plaats van 705.
		 *
		 * De tekst kan nog steeds winnen: is een alinea lang genoeg om het paneel hoger
		 * te maken dan het vierkant, dan rekt de fotokolom met `align-items: stretch`
		 * mee en vult de absoluut geplaatste foto die hoogte.
		 */
  }
  .voetadvies-stap .voetadvies-stap-foto::before {
    padding-top: 100%;
  }
}
.voetadvies-stap .voetadvies-stap-tekst {
  border-radius: 25px 25px 0 0;
}
.voetadvies-stap .voetadvies-stap-foto {
  border-radius: 0 0 25px 25px;
}
@media (min-width: 992px) {
  .voetadvies-stap.foto-links .voetadvies-stap-foto {
    order: -1;
    border-radius: 25px 0 0 25px;
  }
  .voetadvies-stap.foto-links .voetadvies-stap-tekst {
    border-radius: 0 25px 25px 0;
  }
  .voetadvies-stap.foto-rechts .voetadvies-stap-tekst {
    border-radius: 25px 0 0 25px;
  }
  .voetadvies-stap.foto-rechts .voetadvies-stap-foto {
    border-radius: 0 25px 25px 0;
  }
}
/**
 * ====================================================
 * Sectie-intro
 * ====================================================
 *
 * Het introblok boven een overzicht: eyebrow, grote kop, één alinea. Gemeten op
 * designframe 14 (kolom 930): eyebrow 22 hoog met 45 eronder, kop 56 met 20 eronder,
 * alinea 20 op lh 1,6.
 *
 * Alleen de twee binnenmaten staan hier. De maat van de kop komt van `.display-6` en
 * schaalt site-breed op hetzelfde anker (`base/_base.scss`), en de afstand naar het
 * blok eronder komt als utility uit de pagina-template.
 *
 * Mobiel halveert de 45 naar 30: het design heeft geen mobiel frame voor dit blok, en
 * 45 tussen een label van 14px en een kop is op een telefoon een gat.
 */
.sectie-intro .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .sectie-intro .subheading {
    margin-bottom: 45px;
  }
}
.sectie-intro .sectie-intro-titel {
  margin-bottom: 20px;
}
/**
 * ====================================================
 * Content pagina 01
 * ====================================================
 *
 * Brede tekstkolom met `seo_blokken_03` plus een smalle zijkolom. Gemeten op
 * designframe 15 (node 7881:9837): tekstkolom 810 = col-7, gat 150 (één lege kolom,
 * dus `justify-content-between`), zijkolom 450 = col-4 en boven uitgelijnd.
 *
 * Alleen twee dingen staan hier. De hairline tussen de kop en de editor-inhoud
 * (1px $quaternary met 30 boven en onder) en de ruimte rond de kop; de binnenmaten
 * van de editor-inhoud zelf komen al uit `$headings-margin-bottom` (10) en
 * `$paragraph-margin-bottom` (20), en dat is exact wat het design toont.
 *
 * Het blok heeft geen eigen fill: het staat op de crème paginakleur.
 */
.content-pagina-01 {
  /**
	 * 45 onder de eyebrow, en dat is de gap van de auto-layout `Intro` op frame 2 (node
	 * 7809:5810). Hier stond 10, en die 10 kwam nergens uit dit blok vandaan: de vier
	 * detailframes (5, 7, 11 en 15) hebben helemaal géén eyebrow, dus de eyebrow rendert
	 * alléén op de standaard contentpagina en die staat op 45.
	 *
	 * Onder lg 30, net als bij `sectie-intro`: 45 tussen een label van 14 en een kop is
	 * op een telefoon een gat, en die twee blokken openen allebei een pagina, dus ze
	 * horen zich hetzelfde te gedragen.
	 */
  /**
	 * De vierkante foto in de zijkolom heeft in het design ronde hoeken van 25, net als
	 * elke andere grote beeldvorm in dit ontwerp (frame 8, node 7866:9016).
	 *
	 * De radius staat op de `.ratio`-wrapper met een `overflow: hidden` erbij en niet op
	 * de afbeelding zelf: die is een `.cover-image` en staat dus absoluut, dus alleen een
	 * positioned voorouder mét overflow knipt hem echt af. Zelfde valkuil als bij de
	 * galerijtegels (zie templates/_galerijen-01.scss).
	 */
  /**
	 * De gespiegelde stand: de zijkolom links en de tekst rechts. Het design toont die in
	 * de blokkenbouwer van de Custom editor template (frame 18, node 7881:10966) en het is
	 * een zuivere spiegeling: dezelfde 810 / 150 / 450, dezelfde ritmiek, alleen de kant
	 * verschilt.
	 *
	 * De tekstkolom staat in de markup altijd eerst, zodat de kop bij het stapelen bovenaan
	 * blijft en niet onder een foto verdwijnt. Pas vanaf lg, waar de twee naast elkaar
	 * staan, wisselt `order` ze om.
	 */
}
.content-pagina-01 .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .content-pagina-01 .subheading {
    margin-bottom: 45px;
  }
}
.content-pagina-01 .content-pagina-01-titel {
  margin-bottom: 0;
}
.content-pagina-01 .content-pagina-01-intro {
  margin-top: 20px;
  margin-bottom: 0;
}
.content-pagina-01 .content-pagina-01-content {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #E0D7D1;
  /**
		 * `wpautop` maakt van de tekst `<p>`'s en de laatste houdt zijn ondermarge van
		 * 20. Dat is hier een gat onder het blok, en in een rij met `align-items:
		 * center` zou het de buurkolom een halve marge omlaag trekken (zie de regel in
		 * .claude/rules/acf-conventies.md).
		 */
}
.content-pagina-01 .content-pagina-01-content > *:last-child {
  margin-bottom: 0;
}
.content-pagina-01 .content-pagina-01-zijkolom .ratio {
  overflow: hidden;
  border-radius: 25px;
}
@media (min-width: 992px) {
  .content-pagina-01.zijkolom-links .content-pagina-01-tekst {
    order: 2;
  }
  .content-pagina-01.zijkolom-links .content-pagina-01-zijkolom {
    order: 1;
  }
}
/* ==========================================================================
   Blok `seo_blokken_02`: groot SEO-contentblok
   ========================================================================== */
/**
 * Dit blok heeft geen eigen maatvoering nodig: alle binnenmaten komen uit de
 * themavariabelen en het Bootstrap-grid (zie de kop van
 * `templates/snippet/seo-blokken-02.php`). Het enige wat hier staat is de
 * volgorde van de optionele knop onder lg.
 *
 * Vanaf lg staat de knop onder de titel in de kop-kolom, zoals het design toont.
 * Gestapeld staan de twee kolommen onder elkaar en zou de knop tússen de titel en
 * de tekst komen, dus precies waar het leesspoor begint. Onder lg hoort hij daarom
 * onderaan het blok. Op verzoek van Monica, 13 augustus 2026.
 *
 * Dat kan hier zonder de knop twee keer in de HTML te zetten: `display: contents`
 * laat de kop-kolom zelf verdwijnen als doos, waardoor zijn drie kinderen flex-items
 * van de `.row` worden en de knop met een `order` langs de tekstkolom kan. De
 * kolom-eigenschappen die `.row > *` normaal aan de kop-kolom geeft (breedte, de
 * halve gutter, de rij-gap van `gy-10`) moeten dan wél op die kinderen komen, want
 * een selector op de kolom zelf heeft geen doos meer om op te werken.
 *
 * De regels hangen aan `.met-knop`, dus op de tien pagina's zónder knop verandert er
 * niets: die houden exact het grid dat er gemeten is.
 */
@media (max-width: 991.98px) {
  .seo-blokken-02.met-knop .seo-blokken-02-kop {
    display: contents;
    /**
				 * `.row` trekt zichzelf met de rij-gap omhoog en compenseert dat op elke
				 * kolom. De kop-kolom heeft die marge niet meer, dus het eerste kind
				 * neemt hem over; anders begint het blok een rij-gap te hoog.
				 */
  }
  .seo-blokken-02.met-knop .seo-blokken-02-kop > * {
    width: 100%;
    padding-inline: calc(var(--bs-gutter-x) * .5);
  }
  .seo-blokken-02.met-knop .seo-blokken-02-kop > *:first-child {
    margin-top: var(--bs-gutter-y);
  }
  .seo-blokken-02.met-knop .seo-blokken-02-knop {
    order: 1;
  }
}
/* ==========================================================================
   Eenvoudige template (`template-clean.php`)
   ========================================================================== */
/**
 * De kale contentpagina: alleen een kop en de tekst uit de editor. Er is geen
 * designframe voor deze template, dus de ritmiek bovenin is die van de standaard
 * contentpagina en de contactpagina: eyebrow, 45 eronder (30 onder lg, want tussen
 * een label van 14 en een kop is 45 op een telefoon een gat) en dan de titel op de
 * `.display-6`-maat.
 *
 * De 20 tussen de titel en de tekst staat als utility in de template zelf (dat was 30 en
 * is op 13 augustus 2026 op verzoek van Monica 20 geworden, dezelfde afstand als tussen
 * de titel en de alinea op de standaard contentpagina); alleen de eyebrow-naad heeft een
 * breakpoint nodig en hoort dus hier.
 *
 * De laatste alinea van de editor-inhoud houdt zijn ondermarge niet: die zou onder in
 * de sectie een gat van 20 bovenop de sectiepadding geven.
 */
.eenvoudige-pagina .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .eenvoudige-pagina .subheading {
    margin-bottom: 45px;
  }
}
.eenvoudige-pagina > .container > .row > * > *:last-child {
  margin-bottom: 0;
}
/* ==========================================================================
   404 (`404.php`)
   ========================================================================== */
/**
 * De hele kolom staat gecentreerd, dus de eyebrow ook. Dat vraagt hier wél een regel:
 * `.subheading` is een flexrij (het bolletje staat als flex-item vóór het label), en een
 * flexcontainer trekt zich niets aan van de `text-center` op de kolom eromheen. Zonder
 * `justify-content` blijft de eyebrow links staan onder een gecentreerde titel.
 *
 * De naad naar de titel is dezelfde als op de andere pagina's met een eyebrow: 45, en 30
 * onder lg.
 *
 * De root-class heet `niet-gevonden` en niet `error-404`: WordPress zet via `body_class()`
 * al `error404` op de body, en een bloknaam die daar tegenaan ligt is vragen om een
 * botsing (zie .claude/rules/php-bestandsnamen.md).
 */
.niet-gevonden .subheading {
  justify-content: center;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .niet-gevonden .subheading {
    margin-bottom: 45px;
  }
}
/**
 * ====================================================
 * Voetklachten overzicht (.voetklachten-overzicht) + de kaart (.voetklacht-item)
 * ====================================================
 *
 * Designframe 14. De sectie heeft géén eigen fill (read-only geverifieerd:
 * `fills: []`), dus hij staat op de crème $body-bg en de kaarten zijn het enige wit.
 * Geen witte band zoals bij de collectie op de frontpage.
 *
 * Sectiepadding 120 boven en onder, content 1410 in een `.container`. Het introblok
 * is 930 (col-8) met 60 tot de eerste kaartenrij; kaarten 690 (col-6), twee per rij,
 * gutter 30 horizontaal en verticaal; paginering 30 onder de laatste rij (die 30
 * komt uit `components/_pagination.scss`).
 *
 * De kaart staat hier en niet in `components/`, want hij hoort bij dit ene overzicht.
 * Wordt hij later ergens anders hergebruikt, dan verhuist hij naar een component.
 */
.voetklachten-overzicht .voetklachten-overzicht-leeg {
  margin-bottom: 0;
}
.voetklacht-item {
  overflow: hidden;
  border-radius: 25px;
  /**
	 * De hover-zoom komt van `.zoom-image` op de kaart zelf; het clippen hoort hier,
	 * want het beeld staat in een `.ratio`-doos en die knipt niet. Zonder deze regel
	 * groeit het geschaalde beeld over de bovenrand van het witte informatievlak.
	 */
  /**
	 * 45 rondom is de designwaarde. Onder md is de kaart volle breedte op een
	 * telefoon en dan eet 45 aan beide kanten te veel van de tekstbreedte, dus daar
	 * 30: dezelfde stap-terug als in `cta-blokken-02`.
	 */
  /**
	 * De knop staat tegen de onderrand en de tekst erboven groeit, zodat de knoppen
	 * van twee kaarten naast elkaar op één lijn staan ook als één titel een regel
	 * langer is. `align-self` houdt hem op zijn eigen breedte in plaats van over de
	 * hele kaart uit te rekken.
	 */
  /**
	 * De knop is geen echte link (de kaart is dat), dus hij krijgt zijn eigen
	 * hover-stand van de kaart mee. Coral vlak met een witte pijl, gelijk aan de
	 * icoonknop op de nieuwskaart.
	 */
}
.voetklacht-item .voetklacht-item-beeld {
  overflow: hidden;
}
.voetklacht-item .voetklacht-item-link {
  text-decoration: none;
  color: inherit;
}
.voetklacht-item .voetklacht-item-body {
  padding: 30px;
  background-color: #fff;
}
@media (min-width: 768px) {
  .voetklacht-item .voetklacht-item-body {
    padding: 45px;
  }
}
.voetklacht-item .subheading {
  margin-bottom: 30px;
}
.voetklacht-item .voetklacht-item-titel {
  font-size: calc(1.35rem + 0.9473684211vw);
  margin: 0 0 10px;
  line-height: 1.2;
}
@media (min-width: 1520px) {
  .voetklacht-item .voetklacht-item-titel {
    font-size: 2.25rem;
  }
}
.voetklacht-item .voetklacht-item-tekst {
  margin: 0 0 30px;
}
.voetklacht-item .voetklacht-item-knop {
  align-self: flex-start;
  margin-top: auto;
}
.voetklacht-item .voetklacht-item-knop i {
  color: #FF5E4C;
  font-size: 1rem;
}
.voetklacht-item:hover .voetklacht-item-knop {
  background-color: #FF5E4C;
  border-color: #FF5E4C;
  color: #fff;
}
.voetklacht-item:hover .voetklacht-item-knop i {
  color: #fff;
}
/**
 * ====================================================
 * Testimonials overzicht (.testimonials-overzicht) + de rij (.testimonial-item)
 * ====================================================
 *
 * Designframe 10. De sectie heeft géén eigen fill (read-only geverifieerd: `fills: []`),
 * dus hij staat op de crème $body-bg en de panelen zijn het enige wit. Anders dan op de
 * collectie- en merkenoverzichten is er hier dus geen enkele witte band.
 *
 * Sectiepadding 120 boven en onder, content 1410 in een `.container`. Het introblok is
 * 930 (col-8) met 60 tot de eerste rij; rijen 1410 x 465 met 30 ertussen; paginering 30
 * onder de laatste rij (die 30 komt uit `components/_pagination.scss`).
 *
 * De rij staat hier en niet in `components/`, want hij hoort bij dit ene overzicht.
 * Wordt hij later ergens anders hergebruikt, dan verhuist hij naar een component.
 */
.testimonials-overzicht .testimonials-overzicht-leeg {
  margin-bottom: 0;
}
.testimonial-item {
  /**
	 * De radius plus het clippen zitten op de rij zelf en niet per hoek op de twee
	 * panelen. Daarmee zijn de buitenhoeken rond en is de naad ertussen per definitie
	 * vierkant, ook in de gespiegelde stand en gestapeld, zonder dat er per breakpoint
	 * vier hoekwaarden omgezet hoeven te worden.
	 */
  overflow: hidden;
  border-radius: 25px;
  /**
	 * De foto. Het design geeft 465 x 465, dus exact vierkant, en dát zet de rijhoogte.
	 * Het vierkant staat als `::before`-ondergrens en niet als `.ratio`-doos: een ratio
	 * is een vaste hoogte, en zodra het paneel hoger is dan het vierkant (onder 1520
	 * krimpt de kolom sneller dan de quote) zou daar een gat onder het beeld vallen. Nu
	 * is het vierkant de minimumhoogte en rekt de foto mee met de flex-stretch van de row.
	 *
	 * Gestapeld is de foto een liggende band van 4 op 3 boven het paneel: een vierkant
	 * beeld over de volle telefoonbreedte duwt de tekst een halve schermhoogte naar
	 * beneden.
	 */
  /**
	 * Het paneel. `space-between` zet het eyebrow tegen de bovenrand en de quote-groep
	 * tegen de onderrand, precies zoals het design; de `row-gap` is de ondergrens voor
	 * het geval de tekst het paneel voller maakt dan het vierkant. Padding 60 is de
	 * designwaarde op 1920; daaronder in stappen terug, want een paneel van 480 breed
	 * houdt met 60 aan beide kanten te weinig tekstbreedte over.
	 */
  /**
	 * De auteursregel met de hairline erboven. De naam staat vet in een verder gewone
	 * regel, dus dat is een `<strong>` en geen eigen class.
	 */
  /**
	 * Het coral pijlvierkantje, gelijk aan dat op de merkkaart en de nieuwskaart. Geen
	 * echte link (de rij is dat), dus hij krijgt zijn hover-stand van de rij mee.
	 */
  /**
	 * De fotokant alterneert per rij (het design zet hem op rij 1, 3 en 5 links). Pas
	 * vanaf lg, want gestapeld staat het beeld altijd boven de tekst.
	 */
}
.testimonial-item .testimonial-item-link {
  text-decoration: none;
  color: inherit;
}
.testimonial-item .testimonial-item-beeld {
  position: relative;
  overflow: hidden;
}
.testimonial-item .testimonial-item-beeld:before {
  content: "";
  display: block;
  padding-top: 75%;
}
@media (min-width: 992px) {
  .testimonial-item .testimonial-item-beeld:before {
    padding-top: 100%;
  }
}
.testimonial-item .testimonial-item-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial-item .testimonial-item-paneel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 30px;
  padding: 30px;
  background-color: #fff;
}
@media (min-width: 768px) {
  .testimonial-item .testimonial-item-paneel {
    row-gap: 45px;
    padding: 45px;
  }
}
@media (min-width: 1520px) {
  .testimonial-item .testimonial-item-paneel {
    row-gap: 60px;
    padding: 60px;
  }
}
.testimonial-item .testimonial-item-label {
  margin-bottom: 0;
}
.testimonial-item .testimonial-item-groep {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 0;
}
.testimonial-item .testimonial-item-quote {
  margin: 0;
}
.testimonial-item .testimonial-item-auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid #F5F2F0;
}
.testimonial-item .testimonial-item-auteur-tekst {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-item .testimonial-item-auteur-tekst i {
  color: #FF5E4C;
  font-size: 1rem;
}
.testimonial-item .testimonial-item-auteur-tekst strong {
  font-weight: 700;
}
.testimonial-item .testimonial-item-knop {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #FF5E4C;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.testimonial-item:hover .testimonial-item-knop {
  background-color: #4A246D;
}
@media (min-width: 992px) {
  .testimonial-item.foto-rechts .testimonial-item-beeld {
    order: 2;
  }
}
/**
 * ====================================================
 * Merken (.merken) + de merkkaart (.merk-item) + de informatiekaart (.merken-info)
 * ====================================================
 *
 * Designframe 15, node 7878:9770. De sectie heeft een **witte** fill over de volle
 * breedte (read-only geverifieerd, `#FFFFFF`) met 120 padding boven en onder, en de
 * content op 1410 in een `.container`. Wit en de crème $body-bg zijn op een
 * screenshot niet te onderscheiden, dus die fill hoort in de meting en niet alleen in
 * dit commentaar (zie de witte band achter de collectie op de frontpage).
 *
 * De kaart is 330 × 410: een vierkant logovlak van 330 met 45 padding en een balk van
 * 80 eronder. De informatiekaart is even groot maar coral, zonder logovlak.
 */
.merken {
  background-color: #fff;
}
.merken .merken-kop {
  margin-bottom: 30px;
}
.merken .merken-titel {
  margin-top: 30px;
  margin-bottom: 20px;
}
.merken .merken-titel:last-child {
  margin-bottom: 0;
}
.merk-item {
  overflow: hidden;
  border: 1px solid #F5F2F0;
  border-radius: 25px;
  background-color: #fff;
  /**
	 * Het logovlak is vierkant en bepaalt de kaarthoogte. De scheidslijn eronder is
	 * dezelfde 1px $tertiary als de rand van de kaart, dus de balk leest als een
	 * eigen vlak.
	 */
  /**
	 * 45 padding rondom het logo, met `contain` zodat een liggend logo (de meeste)
	 * zijn verhouding houdt en niet uitgerekt of gecropt wordt. Het logovlak is 330
	 * in het design en het logo 240, dus de padding is een derde van de resterende
	 * ruimte; in procenten zodat hij meeschaalt met de kolom.
	 */
  /**
	 * De balk is 80 hoog in het design. `min-height` en geen vaste hoogte: een lange
	 * merknaam ("Twins & Trackstyle") loopt in een smalle kolom over twee regels en
	 * dan mag de balk meegroeien in plaats van de tekst af te kappen.
	 *
	 * De linkerpadding is 30 in het design en 20 onder xl, om dezelfde reden als bij
	 * de collectiekaart: daar is de kolom smaller en heeft de naam die ruimte nodig.
	 */
}
.merk-item .merk-item-link {
  text-decoration: none;
  color: inherit;
}
.merk-item .merk-item-logo {
  border-bottom: 1px solid #F5F2F0;
}
.merk-item .merk-item-logo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.merk-item .merk-item-logo-beeld {
  width: 100%;
  height: 100%;
  padding: 13.64%;
  object-fit: contain;
}
.merk-item .merk-item-balk {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 80px;
  margin-top: auto;
  padding: 20px;
}
@media (min-width: 1200px) {
  .merk-item .merk-item-balk {
    gap: 30px;
    padding-left: 30px;
  }
}
.merk-item .merk-item-naam {
  font-size: 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.4;
}
.merk-item .merk-item-knop {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #FF5E4C;
  color: #fff;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.merk-item:hover .merk-item-knop {
  background-color: #4A246D;
}
/**
 * De vierde kaart: coral vlak met alleen een kop en een wit pijlvierkantje
 * rechtsonder, dus de omgekeerde kleurstelling van een merkkaart. Padding 30 en niet
 * 45, want er zit geen logovlak in dat zijn eigen ruimte meebrengt.
 */
.merken-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 25px;
  background-color: #FF5E4C;
  color: #fff;
  text-decoration: none;
}
.merken-info .merken-info-titel {
  font-size: calc(1.35rem + 0.9473684211vw);
  font-family: "General Sans", sans-serif;
  font-weight: 400;
  line-height: 1.2;
}
@media (min-width: 1520px) {
  .merken-info .merken-info-titel {
    font-size: 2.25rem;
  }
}
.merken-info .merken-info-knop {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  margin-top: auto;
  border-radius: 10px;
  background-color: #fff;
  color: #FF5E4C;
  font-size: 1rem;
  transition: all 0.2s ease-in-out;
}
.merken-info:hover {
  color: #fff;
}
.merken-info:hover .merken-info-knop {
  background-color: #4A246D;
  color: #fff;
}
/**
 * ====================================================
 * Merken overzicht (.merken-overzicht)
 * ====================================================
 *
 * De twee secties van designframe 6 die dat overzicht zelf samenstelt. De kaarten,
 * het introblok en `seo_blokken_02` zijn bestaande blokken en staan hier niet.
 *
 * **De fills zijn hier omgekeerd ten opzichte van frame 4 (het collectie-overzicht).**
 * Daar staat de collectie op crème en is alléén de Merken-sectie wit; hier is het net
 * andersom: de Merken-sectie heeft `fills: []` en staat dus op de crème paginakleur,
 * en de Collectie-sectie eronder is de witte band (`#FFFFFF`, read-only geverifieerd
 * op node 7825:5191). Wit en de crème $body-bg zijn op een screenshot niet te
 * onderscheiden, dus dat verschil hoort in de meting en niet alleen in dit commentaar.
 *
 * De merkkaart houdt zijn rand van 1px $tertiary. Op frame 6 staat er in Figma geen
 * stroke op de kaart, maar dat is geen conflict: $tertiary is exact de crème van deze
 * sectie, dus de rand is hier per definitie onzichtbaar en op een witte band leest hij
 * als een subtiele contour. De kaart klopt dus op béide frames; niet weghalen.
 */
.merken-overzicht-collectie {
  background-color: #fff;
  /**
	 * De collectiekaarten staan hier als dezelfde peek-slider als op de frontpage. Die
	 * slider staat op `overflow: visible` zodat de peekende kaart voorbij de
	 * containerrand bleedt, dus de sectie eromheen moet op de schermrand clippen,
	 * anders krijgt de pagina een horizontale scrollbalk. `clip` en niet `hidden`:
	 * clip maakt geen scroll-container en raakt de verticale as niet. Zelfde regel als
	 * op `.frontpage-collectie`.
	 */
  overflow-x: clip;
}
/**
 * ====================================================
 * Medewerkers overzicht (.medewerkers-overzicht) + de kaart (.medewerker-item)
 * ====================================================
 *
 * Designframe 9. De sectie heeft géén eigen fill, dus hij staat op de crème $body-bg
 * en de infovlakken van de kaarten zijn het enige wit; er is op dit frame dus geen
 * witte band, net als op het testimonials-overzicht en anders dan op de collectie- en
 * merkenoverzichten.
 *
 * Sectiepadding 120 boven en onder, content 1410 in een `.container`. De kop "Ons team"
 * staat op de h2-maat met 30 tot het raster, en dat raster is 3 × 450 met een gutter
 * van 30. De naad naar `seo_blokken_02` draagt deze sectie zelf (zie de kop van
 * archive-medewerkers.php).
 *
 * De kaart staat hier en niet in `components/`, want hij hoort bij dit ene overzicht:
 * medewerkers worden nergens anders gelijst. Sinds 17 augustus 2026 is de hele kaart wel
 * een link naar de medewerkerspagina, die tegelijk de auteurspagina is.
 */
.medewerkers-overzicht .medewerkers-overzicht-titel {
  margin-bottom: 15px;
}
@media (min-width: 992px) {
  .medewerkers-overzicht .medewerkers-overzicht-titel {
    margin-bottom: 30px;
  }
}
.medewerkers-overzicht .medewerkers-overzicht-leeg {
  margin-bottom: 0;
}
.medewerker-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 25px;
  /**
	 * De radius plus het clippen zitten op de kaart en niet per hoek op de twee vlakken.
	 * Daarmee zijn de buitenhoeken rond en is de naad tussen de foto en het witte vlak
	 * per definitie vierkant, zonder twee keer twee hoekwaarden. Zelfde patroon als de
	 * rij op het testimonials-overzicht.
	 */
  /**
	 * Naam en functie staan in het design strak op elkaar: de functieregel begint exact
	 * waar de naamregel eindigt (y 30 en y 64 bij een naamhoogte van 34). Beide dus
	 * zonder ondermarge, en de 30 onderaan de kaart komt uit de padding.
	 */
}
.medewerker-item .medewerker-item-link {
  text-decoration: none;
  color: inherit;
}
.medewerker-item .medewerker-item-foto {
  position: relative;
  /**
		 * Het design geeft 450 × 600, dus het beeld is staand 3:4 en bepaalt de hoogte
		 * van de kaart. Een vaste hoogte kan hier niet: de kaart schaalt met zijn kolom.
		 */
  aspect-ratio: 0.75;
  flex: 0 0 auto;
  background-color: #F5F2F0;
}
.medewerker-item .medewerker-item-info {
  flex: 1 1 auto;
  padding: 30px 45px;
  background-color: #fff;
  /**
		 * Onder xxl is de kaart smaller dan de design-450 (op 992 nog 300), en dan eet
		 * 45 links en rechts te veel van een naam als "Annemiek". Vanaf xxl de
		 * designwaarde, daaronder 30, gelijk aan de horizontale ruimte die de andere
		 * kaarten in dit thema op die breedtes houden.
		 */
}
@media (max-width: 1519.98px) {
  .medewerker-item .medewerker-item-info {
    padding-inline: 30px;
  }
}
.medewerker-item .medewerker-item-naam, .medewerker-item .medewerker-item-functie {
  margin-bottom: 0;
}
/**
 * ====================================================
 * Galerijen 01 (.galerijen-01)
 * ====================================================
 *
 * Fotogalerij met tegels van 450 x 337,5, optioneel met een 16:9-hero erboven.
 * Designframe 7 (merk-detail, node 9801:11957) heeft de hero plus één rij van drie
 * tegels; frame 8 (Onze praktijk, node 9801:11364) heeft alleen twee rijen van drie.
 *
 * Gemeten op frame 7, 1410 binnen de container:
 *   hero    1410 x 793,125, dus exact 16:9, radius 25, met een waas van
 *           rgba(0,0,0,.15) over het hele beeld
 *   pill    294 x 50, exact in het midden van de hero: coral, radius 25, padding
 *           12/24, gap 10, een `play`-glyph in $primary vóór het witte label
 *   tegels  450 x 337,5, dus 4:3 en col-4, gutter 30 horizontaal én verticaal
 *   knop    147 x 50 wit, absoluut op 30 inzet in de rechteronderhoek van de laatste
 *           tegel, met een coral `images`-glyph vóór het label
 *
 * De gutter komt van `row g-30` en de kolommen van `col-xxl-4 col-md-6 col-12`, dus
 * hier staan alleen de vormen: de verhoudingen, de radius, de waas en de twee knoppen.
 */
/**
 * De sectie om de galerij heen. De slider bleedt bewust voorbij zijn container zodat de
 * peekende tegel tot de schermrand loopt; `clip` en niet `hidden`, want clip maakt geen
 * scroll-container. Zonder deze regel krijgt de pagina een horizontale scrollbalk.
 */
.galerijen-01-sectie {
  overflow-x: clip;
}
.galerijen-01 {
  /**
	 * De play-pill. Een <span> in een <a> en geen tweede link: de hele hero is de
	 * klikbare vlak, dus een link in een link zou ongeldige markup zijn.
	 *
	 * De z-index staat op de pill zelf omdat de waas hierboven een ::after is en die
	 * paint ná de inhoud; zonder deze regel ligt de verdonkering over de knop heen.
	 * Zelfde valkuil als de collage in foto-content-blokken-01.
	 */
  /**
	 * Vanaf xl is de galerij het designraster van drie per rij en géén slider: op Onze
	 * praktijk zijn dat twee rijen van drie, en een slider houdt alles op één rij. De JS
	 * zet daarom `enabled: false` op dat breakpoint (zie js/custom.js) en deze regels
	 * leggen de slides als grid neer.
	 *
	 * Dezelfde regels dekken de stand vóór de init af, dus er is geen los vangnet op
	 * `:not(.swiper-initialized)` nodig.
	 *
	 * `!important` is hier niet luiheid: Swiper zet de breedte en de `margin-right` van
	 * een slide als inline stijl, en die wint van een gewone class-regel.
	 *
	 * De maat komt uit een `gap` en niet uit negatieve marges met padding. Dat scheelt
	 * niet alleen regels: Swiper zet `width: 100%` op de wrapper, dus een negatieve marge
	 * maakt hem niet bréder maar schuift hem alleen op, en dan rekent een slide van
	 * 33,3333% tegen 1410 in plaats van 1440 en meet de tegel 440 in plaats van 450.
	 * `calc((100% - 60px) / 3)` geeft die 450 wél exact, en de row-gap doet meteen de 30
	 * tussen de twee rijen.
	 */
  /**
	 * De knop "Alle foto's" hangt in de laatste tegel, dus ook bij een half gevulde
	 * laatste rij staat hij in de hoek van een foto en niet in een leeg gat ernaast.
	 */
}
.galerijen-01 .galerijen-01-hero {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.7777777778;
  margin-bottom: 30px;
  border-radius: 25px;
  /**
		 * Onder md dezelfde 4:3 als de tegels. De 16:9 uit het ontwerp is er om te
		 * voorkomen dat dit beeld op een breed scherm de hele hoogte opeet, maar in
		 * een smalle kolom werkt hij juist averechts: bij 360 zou de hero 186 hoog
		 * worden en dus een dunne strook, en bij 767 zelfs lager (287) dan de tegels
		 * eronder (382), en dan leest de grote afbeelding als de kleinste.
		 *
		 * Het omslagpunt is md en niet lg, want dat is waar de tegels van twee per rij
		 * naar volle breedte gaan: vanaf daar staat alles onder elkaar in dezelfde
		 * kolom en hoort de verhouding gelijk te zijn.
		 */
  /**
		 * De waas over het beeld. Een ::after en geen filter op de foto: de pill ligt
		 * er met een eigen z-index bovenop en moet dus onverdonkerd blijven.
		 */
}
@media (max-width: 767.98px) {
  .galerijen-01 .galerijen-01-hero {
    aspect-ratio: 1.3333333333;
  }
}
.galerijen-01 .galerijen-01-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);
}
.galerijen-01 .galerijen-01-hero picture {
  display: block;
  width: 100%;
  height: 100%;
}
.galerijen-01 .galerijen-01-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /**
		 * `width: max-content` is hier geen verfraaiing maar noodzaak. Een absoluut
		 * geplaatst element met alléén een `left` krijgt als beschikbare ruimte het
		 * stuk tussen die `left` en de rechterrand, dus vanaf 50% is dat de hálve
		 * hero; het label brak daardoor al onder een hero van ongeveer 600 af terwijl
		 * er ruimte zat. Met max-content meet de pill zijn eigen label en clampt de
		 * max-width hem pas op de echte breedte van de hero.
		 */
  width: max-content;
  max-width: calc(100% - 30px);
}
.galerijen-01 .galerijen-01-play i {
  color: #4A246D;
}
@media (min-width: 1200px) {
  .galerijen-01 .swiper-galerij .swiper-wrapper {
    flex-wrap: wrap;
    gap: 30px;
    transform: none !important;
  }
  .galerijen-01 .swiper-galerij .swiper-slide {
    width: calc((100% - 60px) / 3) !important;
    margin: 0 !important;
  }
}
.galerijen-01 .galerijen-01-tegel {
  position: relative;
  /**
		 * Alléén de beeld-link krijgt de tegelvorm, en niet elke `> a`: de knop "Alle
		 * foto's" hangt in dezelfde tegel en werd door zo'n selector ook een blok van
		 * 4:3, waardoor hij zijn `inline-flex` verloor en icoon en label onder elkaar
		 * kwamen te staan.
		 */
}
.galerijen-01 .galerijen-01-tegel .galerijen-01-tegel-beeld {
  /**
			 * `position: relative` is hier geen opsmuk maar wat de ronde hoeken laat
			 * werken. De foto is een `.cover-image` en die staat op `position:
			 * absolute`; zonder een positioned voorouder ís deze link niet zijn
			 * containing block, en dan clipt `overflow: hidden` hem niet en stak de
			 * foto met vierkante hoeken buiten de afgeronde tegel.
			 */
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.3333333333;
  border-radius: 25px;
}
.galerijen-01 .galerijen-01-tegel picture {
  display: block;
  width: 100%;
  height: 100%;
}
.galerijen-01 .galerijen-01-knop {
  position: absolute;
  right: 30px;
  bottom: 30px;
  max-width: calc(100% - 60px);
}
.galerijen-01 .galerijen-01-knop i {
  color: #FF5E4C;
}
/**
 * ====================================================
 * Contact info blokken 01 (.contact-info-blokken-01)
 * ====================================================
 *
 * De openingstijdenkaart: twee geplakte paarse panelen, bovenin het adres en
 * daaronder de week met een notitie. Designframe 8 (Onze praktijk, node 7866:7902),
 * waar hij over de foto van het introblok hangt.
 *
 * Gemeten op frame 8, kaart 435 x 414:
 *   adresbalk    h68, padding 20/30, gap 15, icoon `location-dot` 20 in $quinary,
 *                tekst General Sans 20 / lh 1,4 in wit
 *   schaduw      `0 16px 48px rgba(0,0,0,.25)`, alléén op de adresbalk, dus zichtbaar
 *                over het paneel eronder
 *   tijdenpaneel h346, padding 30, binnenbreedte 375
 *                dagkolom 79 hug, gat 45, rijstap 28 (dus row-gap 2 bij lh 1,6)
 *                hairline 1px $secondary over de volle breedte, 20 boven en onder
 *                notitie Asap SemiBold 16 in wit
 *
 * **De vorm staat hier, de plaatsing niet.** Waar de kaart hangt en welke hoeken er
 * rond zijn hoort bij het blok waarin hij staat: op frame 8 loopt hij tot de
 * schermrand door, dus daar zijn alleen de linkerhoeken rond. Die stand staat in
 * templates/_foto-content-blokken-01.scss. Los is dit gewoon een kaart met vier
 * ronde hoeken, zodat hij ergens anders zonder overrides bruikbaar is.
 *
 * De weeklijst zelf is de component uit components/_opening-hours.scss; hier staan
 * alleen de twee gaten die het design in deze kaart anders zet dan in de footer en op
 * de contactpagina.
 */
.contact-info-blokken-01 {
  display: flex;
  flex-direction: column;
}
.contact-info-blokken-01-adres {
  /**
	 * De schaduw valt in het design zichtbaar over het tijdenpaneel heen. Twee broers
	 * zonder z-index painten in DOM-volgorde, dus zonder deze regel ligt het paneel
	 * eronder er juist overheen en zie je van die schaduw niets.
	 */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  /**
	 * De naad met het tijdenpaneel 1px laten overlappen. Beide panelen zijn
	 * `$primary`, dus dat is onzichtbaar, maar zonder deze regel schijnt de foto
	 * eronder erdoorheen: de grens tussen de twee valt op een fractionele pixel
	 * (gemeten 309,688 op 1920 en 306,734 op 1440) en dan antialiast de browser de
	 * onderrand van dit paneel los van de bovenrand van het volgende. Het gat is in
	 * het boxmodel 0, dus je vindt het niet met een marge- of paddingmeting.
	 * De wrapper een achtergrond geven werkt hier niet: die heeft geen radius, dus
	 * dan steken er paarse blokjes achter de ronde hoeken uit.
	 */
  margin-bottom: -1px;
  padding: 20px 30px;
  border-radius: 25px 25px 0 0;
  background-color: #4A246D;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: "General Sans", sans-serif;
  line-height: 1.4;
  font-size: 1.25rem;
}
.contact-info-blokken-01-adres i {
  flex-shrink: 0;
  color: #FF5E4C;
  font-size: 1.25rem;
}
.contact-info-blokken-01-tijden {
  padding: 30px;
  border-radius: 0 0 25px 25px;
  background-color: #4A246D;
  color: #fff;
}
.contact-info-blokken-01-tijden .opening-hours-week {
  column-gap: 45px;
  row-gap: 2px;
}
.contact-info-blokken-01-notitie {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid #27133A;
  font-weight: 600;
}
/**
 * ====================================================
 * Onze winkel (.winkel-usps, .winkel-cta)
 * ====================================================
 *
 * De twee blokken die designframe 8 alleen op deze pagina toont en die daarom inline
 * in template-onze-winkel.php staan. Ze delen één partial omdat ze allebei van deze
 * ene pagina zijn; wordt de CTA-kaart straks een layout van de Custom Editor (frame
 * 18 noemt hem als losse layout), dan verhuist dat deel naar een eigen bestand.
 */
/**
 * 1. De witte band achter de USPs (node 7866:9050).
 *
 * Dit is het enige blok op de pagina met een eigen fill; al het andere staat op de
 * crème $body-bg. Zo'n ontbrekende achtergrond is de enige designafwijking die je op
 * een screenshot per definitie niet ziet, dus hij hoort in de meting en niet alleen in
 * de spec-note. De band plakt in het design tegen de introfoto: de ruimte die je erin
 * ziet is zijn eigen sectiepadding van 120 en geen naad.
 */
.winkel-usps {
  background-color: #fff;
  /**
	 * Het vakje achter een USP-icoon is de tégenkleur van de band waarop het staat: op
	 * de frontpage ligt de rij op de crème en is het vakje wit, hier ligt hij op een
	 * witte band en is het vakje crème. Zonder deze regel staat er een wit vakje op een
	 * wit vlak en zie je alleen het losse coral icoontje zweven.
	 *
	 * `$tertiary` is exact dezelfde tint als `$body-bg`, dus het vakje leest hier
	 * hetzelfde als op de frontpage, alleen omgekeerd.
	 */
}
.winkel-usps .opsommingen-01-icoon {
  background-color: #F5F2F0;
}
/**
 * 2. De CTA-kaart "Kom langs" (node 15801:11360).
 *
 * Gemeten op 1920, 1410 binnen de container: witte kaart met radius 25 en 60 padding,
 * géén schaduw en géén rand. Binnenin een rij van 1290 met een gat van 90: links een
 * tekstkolom van 930 (eyebrow met 45 eronder, kop op de h3-maat van 32), rechts twee
 * gestapelde knoppen van 15 uit elkaar, rechts uitgelijnd. De twee kolommen eindigen
 * op dezelfde onderlijn.
 *
 * **Een flexrij en geen col-8/col-4.** De 930 uit het design is de breedte binnen de
 * padding van 60, dus een Bootstrap-kolom van 8 zou hier 850 meten. De knopkolom hugt
 * zijn inhoud (270 en 179 in het design) en de tekstkolom krijgt de rest.
 */
.winkel-cta-kaart {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border-radius: 25px;
  background-color: #fff;
}
@media (min-width: 992px) {
  .winkel-cta-kaart {
    flex-direction: row;
    align-items: flex-end;
    gap: 30px;
    padding: 45px;
  }
}
@media (min-width: 1200px) {
  .winkel-cta-kaart {
    gap: 60px;
    padding: 60px;
  }
}
@media (min-width: 1520px) {
  .winkel-cta-kaart {
    gap: 90px;
  }
}
.winkel-cta-tekst {
  flex: 1 1 auto;
  min-width: 0;
}
.winkel-cta-tekst .subheading {
  margin-bottom: 45px;
}
.winkel-cta-titel {
  margin-bottom: 0;
}
/**
 * Elke knop hugt zijn eigen label en lijnt rechts uit. Het design geeft 270 en 179; de
 * gebouwde knoppen meten 283,5 en 182,25, en dat is **geen fout in de layout**. Gemeten
 * op 1920: het label rendert 203,5 waar Figma op 196 uitkomt (een verschil in de
 * fontmetriek van Asap SemiBold, hetzelfde soort verschil als bij de sterrenrij in het
 * reviews-blok), en de glyphbox van een Font Awesome-icoon is 1,25em, dus 20 breed bij
 * een font-size van 16, terwijl het icoonframe in Figma 16 is.
 *
 * Die 13,5 gaan één op één van de tekstkolom af, die daardoor 916,5 meet in plaats van
 * 930. De som klopt wel (916,5 + 90 + 283,5 = 1290) en er wordt niets afgekapt. De 270
 * uit het design is een gevólg van het label en geen zelfstandige maat, en dat label is
 * een linkveld dat de klant mag wijzigen: een vaste breedte zou zijn tekst afknellen.
 * Een meting die hier 270 en 930 verwacht heeft dus een te strakke assertie.
 */
.winkel-cta-knoppen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 15px;
  /**
	 * Het pijltje is in dit blok paars op het coral vlak, en niet coral zoals overal
	 * elders. Dat is hier bewust: op een coral knop zou een coral icoon wegvallen.
	 */
}
@media (min-width: 992px) {
  .winkel-cta-knoppen {
    align-items: flex-end;
  }
}
.winkel-cta-knoppen .btn-quinary i {
  color: #4A246D;
}
.winkel-cta-knoppen .winkel-cta-telefoon i {
  color: #FF5E4C;
}
/**
 * ====================================================
 * Block editor (Custom editor template, designframe 18)
 * ====================================================
 *
 * De blokkenbouwer van de Custom editor template. De PHP komt uit de Webzaken-module
 * `team-webzaken/block-editor-addon` en staat in addons/block-editor/; de styling staat
 * hier, want inc/scssphp.php watcht alleen de map css/ en php-bestandsnamen.md schrijft
 * voor dat de SCSS bij de rest van het thema blijft.
 *
 * De renderloop van de addon zet op elke sectie de classes
 *
 *     block-template <layout-slug> mb-60 mb-lg-120
 *
 * dus de naad tussen twee blokken is 120 (mobiel 60) en komt altijd van het blok erbóven.
 * Dat is exact wat frame 18 toont: alle zestien naden zijn daar 120. Het laatste blok houdt
 * bewust zijn marge, want die draagt de naad naar het contactblok; in de repo staat de regel
 * die de laatste marge weghaalt daarom uitgecommentarieerd en dat laten we zo.
 *
 * Blokken die op een bestaande partial draaien krijgen vanuit hun block.php
 * `settings['classes'] => ''` mee, zodat de eigen sectiepadding van die partial de 120 van
 * de marge niet verdubbelt. Blokken met een eigen paneel (Penninx Voetadvies, Merken, het
 * Mini CTA-blok) houden hun binnenpadding wél: die staat zo in het design.
 *
 * Hieronder alleen wat blok-specifiek is en nergens anders in het thema staat. Blokken die
 * een bestaande partial renderen hebben hier niets nodig: die styling staat al in de
 * SCSS-partial van dat blok.
 *
 * De classnamen komen uit de repo en houden hun spelling, ook `seperator`: zo blijft een
 * volgende vergelijking met die repo kloppen.
 */
/**
 * Elke blok-sectie is een eigen blok-formatteringscontext.
 *
 * Zonder dit lekt de marge van een kind door de sectie heen. Een blok dat een partial met
 * `.row gy-30` rendert heeft binnenin een `margin-top: -30px` (dat is hoe Bootstrap een
 * rij-gap maakt), en omdat deze secties bewust geen padding hebben klapt die negatieve
 * marge samen met de bovenmarge van de sectie zelf. De sectie schuift dan 30 omhoog en de
 * naad wordt 30 in plaats van 60.
 *
 * Vanaf lg viel dat niet op, want daar staat `gy-lg-0` aan en is de rij-gap 0. Onder lg
 * gebeurde het bij drie van de veertien blokken, en het is geen fout in die blokken maar
 * in de aanname dat een sectie zonder padding zijn kinderen tegenhoudt. Gemeten op
 * 13 augustus 2026 over twaalf breedtes.
 *
 * `flow-root` en niet `overflow: hidden`: dat laatste zou de overhangende collage van
 * Penninx Voetadvies en de peek van een slider afknippen.
 */
.block-template {
  display: flow-root;
}
/**
 * Scheidingslijn (`block_separator`, frame 18 node 7881:10907).
 *
 * De lijn zelf is een Bootstrap-rand op het element (`border-bottom border-quaternary`),
 * dus hier staat alleen de stippelvariant. Bootstrap heeft geen utility voor border-style,
 * en de keuze staat in het ACF-veld `separator_style`.
 *
 * Het design toont alleen de doorgetrokken lijn, met 120 erboven en 120 eronder. Die 240
 * komt vanzelf goed: de lijn heeft zelf geen hoogte, het blok erboven draagt zijn 120 en
 * dit blok de zijne.
 */
.block-template.block_separator {
  /**
	 * `!important` is hier nodig en geen luiheid. De markup uit de repo zet de lijn met
	 * de utility `.border-bottom`, en dat is bij Bootstrap een **shorthand** met
	 * `!important` erop: `border-bottom: var(--bs-border-width) var(--bs-border-style)`,
	 * en die tweede waarde is `solid`. Een gewone `border-bottom-style: dashed` verliest
	 * daarvan, dus de keuze Stippellijn zag er precies hetzelfde uit als Standaard.
	 * Zonder foutmelding, want er is niets mis: de utility doet gewoon wat hij belooft.
	 */
}
.block-template.block_separator .seperator.dashed {
  border-bottom-style: dashed !important;
}
/**
 * Grote foto of video (`block_photo_video`, frame 18 node 7881:10961).
 *
 * Het beeld is 16:9 met radius 25 en dat regelen `ratio-16x9` en `rounded-4` al. Alleen
 * de overlay staat hier: het design legt een vlakke rgba(0,0,0,.15) over het beeld, en
 * daar staat de knop midden op. De repo gebruikte hier een zwarte gradient, en die
 * bestaat in dit thema niet.
 *
 * De overlay zit op de link zelf, dus zonder video-URL is er geen overlay en toont het
 * blok gewoon de foto. Dat is precies wat "grote foto óf video" betekent.
 */
.block-template.block_photo_video .block-photo-video-overlay {
  background-color: rgba(0, 0, 0, 0.15);
}
/**
 * CTA-blok (`block_cta`, frame 18 node 7881:10928).
 *
 * Twee helften van 705 zonder gutter: een foto en een wit paneel, samen 1410 met radius 25
 * op de buitenhoeken. De hoogte komt van de tekst en de foto vult wat er over is, net als
 * in foto-content-blokken-01. De naad tussen eyebrow, titel, alinea en knoppen staat als
 * utility in de markup (45 / 20 / 45 op de designbreedte).
 */
.block-template.block_cta {
  /**
	 * De foto is een .cover-image en staat dus absoluut; die vult vanaf lg de hele kolom.
	 * Gestapeld heeft de kolom geen eigen hoogte, dus krijgt de wrapper daar de
	 * designverhouding 705 x 518 en rendert de foto als gewoon beeld. Zelfde constructie
	 * (en zelfde reden) als in _foto-content-blokken-01.scss.
	 */
}
.block-template.block_cta .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .block-template.block_cta .subheading {
    margin-bottom: 45px;
  }
}
.block-template.block_cta .block-cta-foto {
  position: relative;
}
.block-template.block_cta .block-cta-foto > picture, .block-template.block_cta .block-cta-foto > img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.361003861;
  overflow: hidden;
}
@media (min-width: 992px) {
  .block-template.block_cta .block-cta-foto {
    display: block;
  }
  .block-template.block_cta .block-cta-foto > picture {
    position: static;
    aspect-ratio: auto;
    overflow: visible;
  }
  .block-template.block_cta .block-cta-foto > img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    overflow: visible;
    object-fit: cover;
  }
}
/**
 * Mini CTA-blok (`block_cta_mini`, frame 18 node 7881:10919).
 *
 * Wit paneel over 1410 met 60 binnenpadding, links een eyebrow plus een titel op 56 en
 * rechts twee knoppen onder elkaar. De knoppen lijnen met de onderlijn van de titel mee,
 * en dat doet `align-items-end` op de rij al.
 */
.block-template.block_cta_mini .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .block-template.block_cta_mini .subheading {
    margin-bottom: 45px;
  }
}
/**
 * ====================================================
 * Nieuws
 * ====================================================
 *
 * De nieuws-kaart zelf staat in components/_post-item.scss: die wordt door vijf
 * templates gedeeld en is dus een component, geen template-opmaak.
 *
 * `.post-info` blijft hier: dat is de metaregel van het artikel op single.php en
 * van de gerelateerde-lijst, met een pipe als scheidingsteken. De metaregel op de
 * kaart is een ander ding (iconen, gap 30) en heet daar .post-item-meta.
 */
.post-info span {
  display: inline-block;
  margin-right: 10px;
}
.post-info span:not(:first-of-type):before {
  margin-right: 10px;
  content: "|";
  color: #c8ced4;
}
.swiper-posts .swiper-slide {
  transition: all 0.2s ease-in-out;
  height: auto;
}
@media (min-width: 1200px) {
  .swiper-posts .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0.5;
  }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .swiper-posts .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-visible) {
    opacity: 0.5;
  }
}
@media (max-width: 575.98px) {
  .swiper-posts .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5;
  }
}
/**
 * ====================================================
 * Content pagina 01
 * ====================================================
 */
/**
 * Hier stond een eigen .subheading-opmaak uit de scaffold (12px, gewicht 700,
 * letter-spacing 3px). Die is weg: components/_subheading.scss legt de eyebrow
 * vast op Asap SemiBold 14 met 10% tracking en een coral bolletje, en dat is de
 * enige variant die dit design kent.
 *
 * Het was ook geen dode regel. Templates staan in main.scss ná components en
 * `.content-pagina-01 .subheading` is een punt specifieker, dus zodra de klant
 * het subtitel-veld van de standaard contentpagina vulde, kreeg die pagina een
 * derde, niet-bestaande eyebrow-variant: het oude formaat mét het nieuwe bolletje.
 *
 * Heeft dit blok later wél eigen opmaak nodig, dan komt die in een eigen
 * css/templates/_content-pagina-01.scss volgens de naamgevingsregel.
 */
/**
 * ====================================================
 * Contact block
 * ====================================================
 */
.contact-blokken-01 .gform_wrapper.gravity-theme .gfield_label {
  color: #4A246D;
}
.contact-blokken-01 .gform_wrapper.gravity-theme .terms-text {
  color: #212529;
}
.contact-blokken-01 .gform_wrapper.gravity-theme .terms-text a {
  color: #4A246D;
  text-decoration-color: #4A246D;
}
@media (min-width: 768px) {
  .contact-blokken-01 .gform_wrapper.gravity-theme .gform_footer .row .col-voorwaarden {
    text-align: right;
  }
}
/**
 * ====================================================
 * Contact page
 * ====================================================
 */
.contact-page-area {
  /**
	 * De kop werkt als die van de standaard contentpagina: eyebrow, 45 eronder (30 op een
	 * telefoon, want tussen een label van 14 en een kop is 45 daar een gat) en dan de
	 * titel op de `.display-6`-maat. Deze pagina heeft geen designframe, dus de ritmiek
	 * komt van het blok dat wél een frame heeft en dezelfde rol vervult.
	 */
  /**
	 * De iconen zijn hier coral en niet paars, op verzoek van Monica (13 augustus 2026).
	 * De social-media-iconen zitten in een gedeelde component, dus die kleur staat hier
	 * en niet in `components/_social-media.scss`: op een andere plek in de site mag die
	 * lijst gewoon paars blijven.
	 */
  /**
	 * En om diezelfde reden wordt een contactregel hier coral bij het aanwijzen en niet
	 * paars, op verzoek van Monica (19 augustus 2026): dezelfde kleur als het icoon dat
	 * ervoor staat. Beide hover-kleuren komen uit een gedeelde component
	 * (`components/_contact-items.scss` en `components/_social-media.scss`), dus de
	 * override staat hier op de pagina en niet in die componenten: op een andere plek in
	 * de site blijft het paars.
	 */
}
.contact-page-area .subheading {
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .contact-page-area .subheading {
    margin-bottom: 45px;
  }
}
.contact-page-area .socials-list-icons-texts i {
  color: #FF5E4C;
}
.contact-page-area .contact-items li a:hover, .contact-page-area .socials-list-icons-texts .social-item:hover {
  color: #FF5E4C;
}
.contact-page-area .opening-hours > div:not(:first-of-type), .contact-page-area .socials-list-icons-texts > div:not(:first-of-type) {
  margin-top: 5px;
}
/**
 * ====================================================
 * Google Maps
 * ====================================================
 */
.googlemaps iframe {
  width: 100%;
}
@media (max-width: 991.98px) {
  .googlemaps iframe {
    height: 300px;
  }
}
/**
 * ====================================================
 * Contactblok (contact_blokken_02)
 * ====================================================
 *
 * Twee panelen over de volle breedte, beide paars. Links de contactgegevens,
 * rechts het formulier. De structuur komt uit de Webzaken-snippet
 * contact_blokken_02; de opmaak volgt het Penninx-design.
 *
 * De panelen hebben dezelfde kleur, dus de naad ertussen is alleen zichtbaar
 * door de schaduw die het linkerpaneel over het rechter legt.
 */
.contact-blokken-02 {
  background-color: #4A246D;
  color: #fff;
  /**
	 * Contentbreedte per paneel uit het design: 560 links, 880 rechts. De panelen
	 * zelf zijn 800 en 1120 breed op een frame van 1920 (5 en 7 van 12).
	 *
	 * De boven- en onderpadding volgt de 60 die dit thema overal voor secties
	 * aanhoudt (py-60 py-lg-120). Onder lg staan de twee panelen gestapeld en zijn
	 * ze dezelfde kleur, dus daar leest het als één blok: het formulierpaneel laat
	 * zijn bovenpadding weg, anders staat er 120 tussen de tekst en het formulier.
	 *
	 * Gestapeld (<lg) lijnt de inhoud van beide kolommen links/rechts uit met de
	 * gewone .container-blokken: de kolom krijgt daar een gecentreerde max-width per
	 * breakpoint + 15px horizontaal, exact wat een .container doet. De paarse
	 * achtergrond zit op de sectie zelf, niet op de kolommen, dus die blijft
	 * full-bleed terwijl de content meeloopt met de blokken erboven.
	 */
  /**
	 * Het linkerpaneel legt zijn schaduw over het rechterpaneel heen. Alleen vanaf
	 * lg: dit is een horizontale schaduw die bij de naad tussen twee náást elkaar
	 * staande panelen hoort. Onder lg staan de panelen gestapeld en tekende hij een
	 * schaduw langs de rechterrand van het bovenste vlak, naar niets toe.
	 */
  /**
	 * Contactgegevens: twee per rij, met de openingstijden over de volle breedte.
	 *
	 * De scheidingslijn hoort per rij één doorlopende lijn te zijn over béide
	 * kolommen. Daarom staat de lijn als border-top op elk item en is de
	 * column-gap 0: met een gap zou de lijn per kolom onderbroken worden. De
	 * onderlinge afstand komt uit padding-top en row-gap, en de items houden
	 * zelf ruimte omdat de rechterkolom rechts uitlijnt.
	 *
	 * Een border-top op elk item geeft ook precies de drie lijnen uit het design:
	 * eentje boven de eerste rij en geen lijn onder de laatste.
	 */
  /**
	 * Formulier. De geometrie (veldhoogte, radius, rand) staat in
	 * plugins/_gforms.scss omdat die design-breed is; hier alleen wat afhangt
	 * van het paarse paneel.
	 */
}
.contact-blokken-02 .column-1, .contact-blokken-02 .column-2 {
  padding: 60px 15px;
}
@media (max-width: 991.98px) {
  .contact-blokken-02 .column-1, .contact-blokken-02 .column-2 {
    margin-inline: auto;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .contact-blokken-02 .column-1, .contact-blokken-02 .column-2 {
    max-width: 540px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .contact-blokken-02 .column-1, .contact-blokken-02 .column-2 {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .contact-blokken-02 .column-1, .contact-blokken-02 .column-2 {
    padding: 90px 60px;
  }
}
@media (min-width: 1520px) {
  .contact-blokken-02 .column-1, .contact-blokken-02 .column-2 {
    padding: 120px;
  }
}
.contact-blokken-02 .column-1 {
  width: 100%;
}
@media (min-width: 1520px) {
  .contact-blokken-02 .column-1 {
    max-width: 800px;
    margin-left: auto;
  }
}
.contact-blokken-02 .column-2 {
  width: 100%;
}
@media (max-width: 991.98px) {
  .contact-blokken-02 .column-2 {
    padding-top: 0;
  }
}
@media (min-width: 1520px) {
  .contact-blokken-02 .column-2 {
    max-width: 1120px;
    margin-right: auto;
  }
}
@media (min-width: 992px) {
  .contact-blokken-02 .col-lg-5 {
    position: relative;
    z-index: 2;
    box-shadow: 16px 0 24px rgba(0, 0, 0, 0.25);
    /**
			 * De schaduw hoort alleen naar rechts te vallen, maar een blur van 24
			 * loopt ook zo'n 12 omhoog en omlaag door: boven het paneel komt die
			 * over het blok erboven en onder het paneel over de footer. Op de
			 * meeste pagina's valt dat weg in de crème, maar op een pagina waar het
			 * vorige blok tegen het contactblok aan staat (een testimonial: Penninx
			 * Voetadvies draagt daar geen onderpadding, dus de naad is 0) tekent hij
			 * een donkere veeg over de foto.
			 *
			 * `clip-path` knipt de weergave van dit element af, schaduw en al. Op de
			 * eigen boven- en onderrand dus precies af, en rechts 40 ruimte laten,
			 * want daar moet de bedoelde schaduw (offset 16 plus 12 blur) juist wél
			 * overheen vallen.
			 */
    clip-path: inset(0 -40px 0 0);
  }
}
.contact-blokken-02 .subheading {
  margin-bottom: 20px;
}
@media (min-width: 992px) {
  .contact-blokken-02 .subheading {
    margin-bottom: 45px;
  }
}
.contact-blokken-02 h2, .contact-blokken-02 .h2 {
  margin-bottom: 20px;
}
.contact-blokken-02 .contact-blokken-02-tekst {
  margin-bottom: 0;
}
.contact-blokken-02 .contact-blokken-02-items {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 20px;
  margin-top: 45px;
  margin-bottom: 0;
  /**
		 * Van lg tot xxl staan de twee panelen naast elkaar terwijl het linkerpaneel
		 * nog geen eigen max-width heeft: het is dan 5/12 van de volle breedte, dus
		 * 376 tot 513 content na de padding van 60. Twee kolommen worden daar 188 tot
		 * 256 en het e-mailadres is met zijn icoon en gap al zo'n 191 breed: net te
		 * krap, met een wrappend adres als resultaat. Vanaf xxl capt het paneel op
		 * 800 en is er 560 content, dus dan passen er twee van 280 met ruimte over.
		 * Onder lg staan de panelen gestapeld en is er ook ruim plek voor twee.
		 */
  /**
		 * Het pijltje van het Kom langs item schuift bij hover mee, net als op elke
		 * knop met een pijl. `icon-hover-right` uit base/_base.scss kan hier niet:
		 * daar zit het icoon ín de knop, en hier is het een broer van de link, dus
		 * een hover op die link bereikt hem niet. Vandaar de hover op de rij.
		 *
		 * En alleen op de pijl: de andere regels hebben een telefoon-, envelop- of
		 * bord-icoon en die horen niet zijwaarts te schuiven. De transitie moet er
		 * apart bij, want die staat in base/_base.scss op een `i` binnen een `a` en
		 * dat is deze niet.
		 */
}
@media (min-width: 768px) {
  .contact-blokken-02 .contact-blokken-02-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .contact-blokken-02 .contact-blokken-02-items {
    grid-template-columns: 1fr;
  }
}
.contact-blokken-02 .contact-blokken-02-items li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid rgba(39, 19, 58, 0.25);
}
.contact-blokken-02 .contact-blokken-02-items .fa-angle-right {
  transition: all 0.2s ease-in-out;
}
.contact-blokken-02 .contact-blokken-02-items li:hover .fa-angle-right {
  transform: translateX(5px);
}
@media (min-width: 768px) {
  .contact-blokken-02 .contact-blokken-02-items li:nth-of-type(even) {
    justify-content: flex-end;
  }
}
@media (min-width: 992px) and (max-width: 1519.98px) {
  .contact-blokken-02 .contact-blokken-02-items li:nth-of-type(even) {
    justify-content: flex-start;
  }
}
@media (min-width: 768px) {
  .contact-blokken-02 .contact-blokken-02-items li.contact-blokken-02-item-wide {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}
.contact-blokken-02 .contact-blokken-02-items i {
  flex: 0 0 16px;
  width: 16px;
  font-size: 16px;
  color: #FF5E4C;
}
.contact-blokken-02 .contact-blokken-02-items a {
  color: #fff;
}
.contact-blokken-02 .contact-blokken-02-items a:hover {
  color: #FF5E4C;
}
.contact-blokken-02 .gform_wrapper.gravity-theme .gfield_label {
  color: #fff;
  font-weight: 700;
}
.contact-blokken-02 .gform_wrapper.gravity-theme .gform_button i {
  color: #FF5E4C;
}
.contact-blokken-02 .gform_wrapper.gravity-theme .gform_footer .terms-text {
  color: #fff;
}
.contact-blokken-02 .gform_wrapper.gravity-theme .gform_footer .terms-text a {
  color: #FF5E4C;
  text-decoration: underline;
}
.contact-blokken-02 .gform_wrapper.gravity-theme .gform_footer .terms-text a:hover {
  text-decoration-color: transparent;
}
.contact-blokken-02 .gform_wrapper.gravity-theme .gfield_validation_message, .contact-blokken-02 .gform_wrapper.gravity-theme .validation_message {
  color: #fff;
  background-color: rgba(250, 84, 36, 0.25);
  border-color: #fa5424;
}
/**
 * ====================================================
 * Footer
 * ====================================================
 *
 * Twee stroken op de body-kleur: een contactbalk met een scheidingslijn
 * eronder, en daaronder vier kolommen. De copyright-balk en de
 * back-to-top-button staan in _copyright-bar.scss.
 *
 * De kolommen zijn onder lg een echte Bootstrap-accordion en vanaf lg gewoon
 * kolommen; dat mechanisme komt uit het basis-thema en blijft ongewijzigd.
 */
.footer-02 {
  /**
	 * Gestapeld (<lg) lijnt de footer-inhoud (contactbalk + menu-accordion)
	 * links/rechts uit met de gewone .container-blokken, net als het contactblok
	 * erboven. De wrappers staan op container-xxl (die is <xxl full-width en al
	 * gecentreerd via margin:auto); hier krijgt hij in de sm/md-band een
	 * gecentreerde max-width zodat de content meeloopt met de blokken op de pagina.
	 * Onder sm valt hij vanzelf terug op 15 (= de container daar). Vanaf lg staan de
	 * kolommen naast elkaar en blijft de chrome-inzet (px-lg-30, xxl 255) staan.
	 * De scheidingslijn van de contactbalk zit op de strook, niet op de container,
	 * dus die loopt full-bleed door.
	 */
  /**
	 * Contactbalk. De scheidingslijn staat op de strook en niet op de
	 * container, zodat hij over de volle breedte loopt.
	 */
  /**
	 * Openingstijden. De opbouw en de vandaag-kleur staan in
	 * components/_opening-hours.scss; hier alleen de gaps uit dit design.
	 */
  /**
	 * De vrije ruimte in de kolom gaat tússen de dag en de tijd in plaats van
	 * rechts van de tijd, met een cap erop zodat de twee niet te ver uit elkaar
	 * komen te staan: vanaf 260 breed is de gap 78, en in een smallere kolom
	 * krimpt hij mee. Daarom géén vaste gap per breakpoint: tussen lg en xxl is
	 * deze kolom 210,5 breed terwijl de rij zelf al 182 nodig heeft ("Donderdag"
	 * 79 + "09:30 tot 18:00" 103), en een vaste 45 zou de tijd daar naar een
	 * tweede regel duwen. Nu blijft er 28,5 over en klopt het op elke breedte.
	 *
	 * De twee kolommen zijn auto en niet auto/1fr: met 1fr vult de tijdkolom de
	 * rest van de ruimte en heeft space-between niets te verdelen.
	 */
  /**
	 * Accordion. Onder lg een echte accordion, vanaf lg uitgeschakeld zodat de
	 * kolommen gewoon naast elkaar staan.
	 *
	 * De vórm (wit dicht, omlijnd open, radius 10, chevron rechts in coral) staat
	 * in css/components/_accordion.scss, want die komt ook terug in de FAQ-blokken
	 * uit het design. Hier staat alleen wat footer-specifiek is: de omslag naar
	 * statische kolommen.
	 */
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .footer-02 .container-xxl {
    max-width: 540px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .footer-02 .container-xxl {
    max-width: 720px;
  }
}
.footer-02 .footer-top {
  position: relative;
  padding-block: 30px;
}
@media (min-width: 992px) {
  .footer-02 .footer-top {
    padding-block: 20px;
  }
}
.footer-02 .footer-top:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #E0D7D1;
}
.footer-02 .footer-top a:not(.btn) {
  color: #212529;
}
.footer-02 .footer-top a:not(.btn):hover {
  color: #4A246D;
}
.footer-02 .footer-adres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 0;
}
@media (min-width: 992px) {
  .footer-02 .footer-adres {
    justify-content: flex-start;
    /**
			 * Ondergrens voor de kolom. De adreskolom is flexibel en kan zonder deze
			 * grens krimpen tot de breedte van het langste losse woord: dan werd de
			 * tekst vijf regels hoog naast de knoprij. Met 280 past de eerste zin op
			 * één regel met het adres eronder, en is er te weinig ruimte dan wrapt de
			 * hele balk liever naar twee rijen.
			 */
    min-width: 280px;
  }
}
.footer-02 .footer-adres .footer-adres-locatie {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-02 .footer-adres i {
  font-size: 16px;
  color: #FF5E4C;
}
.footer-02 .footer-top-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 30px;
  row-gap: 15px;
  /**
		 * De socials zijn zelf een Bootstrap-row en die staat op flex-start. Het blok
		 * als geheel werd dus wel gecentreerd, maar de tegels erbinnen niet: zodra ze
		 * wrappen staat de tweede rij links terwijl het adres en de knop eronder
		 * gecentreerd zijn, en dat is het enige dat dan uit de as loopt.
		 *
		 * Alleen onder lg. Vanaf lg staat de knoprij als geheel rechts en hoort de
		 * inhoud daarbinnen wél op flex-start.
		 */
}
@media (min-width: 992px) {
  .footer-02 .footer-top-acties {
    justify-content: flex-end;
  }
}
@media (max-width: 991.98px) {
  .footer-02 .footer-top-acties .socials .row {
    justify-content: center;
  }
}
.footer-02 .footer-top-button i {
  /**
			 * Géén `margin-left` hier: de afstand tot het label is sinds 10 augustus 2026
			 * de `gap: 10px` op `.btn` zelf (components/_buttons.scss). Stond die marge er
			 * nog bij, dan werd het 20 en werd de knop 10 breder, en dan wrapte de
			 * contactbalk bij 992 naar twee regels: precies de tussenstand die de omslag
			 * op lg moet voorkomen.
			 */
  font-size: 16px;
  color: #4A246D;
}
.footer-02 .socials .row {
  --bs-gutter-x: 5px;
  --bs-gutter-y: 5px;
}
.footer-02 .socials a.social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
  color: #FF5E4C;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
}
.footer-02 .socials a.social-item:hover {
  background-color: #4A246D;
  color: #fff;
}
.footer-02 .footer-kolommen {
  padding-block: 45px;
}
@media (min-width: 992px) {
  .footer-02 .footer-kolommen {
    padding-block: 60px;
  }
}
.footer-02 .footer-menu {
  margin-bottom: 0;
}
.footer-02 .footer-menu li:not(:first-of-type) {
  margin-top: 5px;
}
.footer-02 .footer-menu li.current-menu-item a {
  color: #FF5E4C;
}
.footer-02 .footer-menu li a {
  position: relative;
  color: #212529;
}
.footer-02 .footer-menu li a:hover {
  color: #FF5E4C;
}
.footer-02 .opening-hours-week {
  grid-template-columns: auto auto;
  justify-content: space-between;
  max-width: 260px;
  column-gap: 15px;
  row-gap: 2px;
}
.footer-02 .footer-openingstijden-notitie {
  margin-top: 15px;
  padding-top: 15px;
  margin-bottom: 0;
  border-top: 1px solid #E0D7D1;
}
@media (min-width: 992px) {
  .footer-02 .accordion#footer-menu-wrap-02 .accordion-item {
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
  .footer-02 .accordion#footer-menu-wrap-02 .accordion-item .accordion-button, .footer-02 .accordion#footer-menu-wrap-02 .accordion-item .accordion-button:not(.collapsed) {
    transition: none;
    pointer-events: none;
    padding: 0;
    margin-bottom: 15px;
    background-color: transparent;
    border-radius: 0;
    color: #212529;
  }
  .footer-02 .accordion#footer-menu-wrap-02 .accordion-item .accordion-button::after, .footer-02 .accordion#footer-menu-wrap-02 .accordion-item .accordion-button:not(.collapsed)::after {
    display: none;
  }
  .footer-02 .accordion#footer-menu-wrap-02 .accordion-item .accordion-collapse {
    display: block !important;
  }
  .footer-02 .accordion#footer-menu-wrap-02 .accordion-item .accordion-body {
    padding: 0;
    border-top: 0;
  }
}
/**
 * ====================================================
 * Copyright
 * ====================================================
 */
#copyright {
  padding-block: 20px;
  box-shadow: 0 -16px 24px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  /**
	 * De merknaam en de drie links staan in het design op een rij met gap 30. Dat
	 * past tot ongeveer 700px breed; daaronder wrappen vier losse items met gaten
	 * van 30 ertussen tot een rommelig blok. Onder md gaan ze daarom onder elkaar
	 * met een kleinere ruimte, gecentreerd.
	 */
}
#copyright a {
  color: #212529;
  font-weight: 700;
}
#copyright a:hover {
  color: #FF5E4C;
}
#copyright .copyright-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
@media (min-width: 768px) {
  #copyright .copyright-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
  }
}
#copyright .copyright-merk a {
  text-decoration: none;
}
#copyright .copyright-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
@media (min-width: 768px) {
  #copyright .copyright-menu {
    justify-content: flex-start;
    gap: 30px;
  }
}
#copyright svg, #copyright img {
  height: 30px;
  width: auto;
}
#copyright svg path {
  fill: #FF5E4C;
  transition: all 0.2s ease-in-out;
}
#copyright svg:hover path {
  fill: #4A246D;
}
/**
 * ====================================================
 * Back to top
 * ====================================================
 *
 * Hoort bij de #back-to-top-button in footer.php; het tonen/scrollen zit in
 * js/custom.js.
 */
#back-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #000;
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
#back-to-top:hover {
  background-color: #1a1a1a;
}
#back-to-top.show {
  opacity: 1;
}
/* ========================================================================
	Scroll-animaties
========================================================================

	De classes hieronder worden door `js/animaties.js` gezet; de kop van dat
	bestand legt uit waarom dit een eigen observer is en geen ScrollReveal.

	VIER DINGEN DIE HIER BEWUST ZO STAAN
	1. Er staat géén `@media (min-width: 992px)` om deze regels. De
	   breakpoint-poort zit in de JS, en zonder class doet deze CSS niets. Zet die
	   media-query er dus niet "voor de volledigheid" bij: dan staat de grens op
	   twee plekken en lopen ze uit de pas.
	2. De beweging gaat op de losse `translate`-property en niet op `transform`.
	   De onafhankelijke transform-properties worden toegepast vóór `transform` in
	   de keten, dus een element dat uit de stylesheet al een `rotate()` of een
	   `translateY()` als designpositie heeft (de collage-kaartjes, de gekantelde
	   beelden) houdt die en krijgt onze verschuiving erbij. Kent een browser
	   `translate` niet (Safari onder 14.1), dan blijft de fade over en is er
	   niets stuk.
	3. Longhands en geen `transition`-shorthand. `css/base/_base.scss` zet
	   `transition: $transition-base` op élke `a` en `button`, en een van onze
	   doelen is een link (`.merken-info`). Met longhands wint hier alleen de
	   property die we echt bedoelen, en de delay van een kaart kan niet door een
	   shorthand elders op 0 gezet worden.
	4. De volgorde blok -> kaart komt uit `--anim-kaart-start`. Een kaart zit ín
	   zijn blok, dus de twee opacities rekenen over elkaar heen; met die
	   vertraging is het blok grotendeels binnen voor de kaarten beginnen.

======================================================================== */
:root {
  --anim-duur: 700ms;
  --anim-curve:   cubic-bezier(.22, .61, .36, 1);
  --anim-afstand: 24px;
  --anim-stap:        calc(var(--anim-duur) * .12);
  --anim-kaart-start: calc(var(--anim-duur) * .45);
}
/**
 * De begintoestand, en die is bewust ZONDER transitie. Stond de transitie hier,
 * dan wordt het verbergen zelf ook geanimeerd: elk blok onder de vouw faadt dan
 * na het laden 700ms lang uit. Dat zie je niet, want het staat buiten beeld,
 * maar het is verkeerd en het maakt elke screenshot van een niet-gescrolde
 * pagina afhankelijk van het moment. De transitie hoort dus bij `.is-binnen`,
 * en die richting is de enige die we nodig hebben.
 */
.animeer {
  opacity: 0;
  translate: 0 var(--anim-afstand);
}
.animeer.is-binnen {
  opacity: 1;
  translate: 0;
  transition-property: opacity, translate;
  transition-duration: var(--anim-duur);
  transition-timing-function: var(--anim-curve);
}
/**
 * De stagger binnen één rij, plus de vraag of de kaart op zijn blok moet wachten.
 *
 * `--anim-n` en `--anim-basis` staan op de kaart-class en niet op de
 * `.is-binnen`-variant: `.komt-N` en `.volgt-blok` hebben dezelfde specificiteit
 * en staan later in de bron, en moeten dus kunnen winnen. Stond de nul op
 * `.animeer-kaart.is-binnen` (0,2,0), dan haalde `.komt-N` (0,1,0) het nooit en
 * staggerde er niets.
 */
.animeer-kaart {
  --anim-n: 0;
  --anim-basis: 0ms;
}
/**
 * Alleen een kaart wiens eigen blok óók nog moet inkomen wacht op dat blok. Staat
 * dat blok bij het laden al in beeld, dan animeert het niet en is die vertraging
 * dode tijd: op een archief geldt dat voor de meeste kaarten, en dan duurt het
 * daar merkbaar langer voor een rij binnen is dan op de homepage. De JS zet deze
 * class alleen als het blok echt meedoet.
 */
.volgt-blok {
  --anim-basis: var(--anim-kaart-start);
}
.komt-1 {
  --anim-n: 1;
}
.komt-2 {
  --anim-n: 2;
}
.komt-3 {
  --anim-n: 3;
}
.komt-4 {
  --anim-n: 4;
}
.komt-5 {
  --anim-n: 5;
}
.animeer-kaart.is-binnen {
  transition-delay: calc(var(--anim-basis) + var(--anim-n) * var(--anim-stap));
}
/**
 * Zonder dit vangnet print de bezoeker lege blokken naar PDF: wat op dat moment
 * nog niet in beeld geweest is, staat op opacity 0.
 */
@media print {
  .animeer, .animeer.is-binnen {
    opacity: 1 !important;
    translate: none !important;
  }
}