:root {
  --font-serif: "Miller Text", georgia, serif;
  --font-sans: acumin-pro-semi-condensed, helvetica, arial, sans-serif;
  --ratio: 1.4;
  --main-max-width: calc(1300px + var(--s1) * 2);
  --larger-max-width: calc(var(--main-max-width) + 200px);
  --smaller-max-width: 1036px;
  --measure: 65ch;
  --measure-s: 54ch;
  --measure-l: 70ch;
  --line-height: 1.4;
  --line-height-solid: 1;
  --line-height-small: calc(0.9 * var(--line-height));
  --line-height-title: calc(0.75 * var(--line-height));
  --primary-color: #ed1c24;
  --primary-color-light: #fff0f0;
  --secondary-color: #067ed2;
  --secondary-color-light: #f0fbff;
  --gray: #777;
  --mid-gray: #444;
  --light-gray: #ebeaea;
  --moon-gray: #ccc;
  --near-white: #f7f6f3;
  --green: #2bfc7c;
  --light-green: #eafff2;
  --blue: #330db6;
  --dark-blue: #000048;
  --pink: #fecfcf;
  --red: #ed1c24;
  --light-yellow: #fff7be;
  --yellow: #ffecbd;
  --color-dark: #000;
  --color-light: #fff;
  --error-color: #be161d;
  --success-color: #00703c;
}

.groene-culture {
  --primary-color: var(--secondary-color);
  --primary-color-light: var(--secondary-color-light);
}

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;
  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --f--2-min: 15.01;
  --f--2-max: 16.59;
  --f-2: calc(
    ((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) *
      var(--fluid-bp)
  );
  --f--1-min: 16.89;
  --f--1-max: 18.67;
  --f-1: calc(
    ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
      var(--fluid-bp)
  );
  --f-0-min: 19;
  --f-0-max: 21;
  --f0: calc(
    ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );
  --f-1-min: 21.38;
  --f-1-max: 23.63;
  --f1: calc(
    ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );
  --f-2-min: 24.05;
  --f-2-max: 26.58;
  --f2: calc(
    ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );
  --f-3-min: 27.05;
  --f-3-max: 29.9;
  --f3: calc(
    ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
      var(--fluid-bp)
  );
  --f-4-min: 30.43;
  --f-4-max: 33.64;
  --f4: calc(
    ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) *
      var(--fluid-bp)
  );
  --f-5-min: 34.24;
  --f-5-max: 37.84;
  --f5: calc(
    ((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) *
      var(--fluid-bp)
  );
  --f-6-min: 38.52;
  --f-6-max: 42.57;
  --f6: calc(
    ((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) *
      var(--fluid-bp)
  );
  --f-7-min: 43.33;
  --f-7-max: 47.89;
  --f7: calc(
    ((var(--f-7-min) / 16) * 1rem) + (var(--f-7-max) - var(--f-7-min)) *
      var(--fluid-bp)
  );
  --f-8-min: 45;
  --f-8-max: 70;
  --f8: calc(
    ((var(--f-8-min) / 16) * 1rem) + (var(--f-8-max) - var(--f-8-min)) *
      var(--fluid-bp)
  );
}

:root {
  --fc-4xs-min: (var(--fc-s-min) * 0.15);
  --fc-4xs-max: (var(--fc-s-max) * 0.15);
  --fc-3xs-min: (var(--fc-s-min) * 0.25);
  --fc-3xs-max: (var(--fc-s-max) * 0.25);
  --fc-2xs-min: (var(--fc-s-min) * 0.5);
  --fc-2xs-max: (var(--fc-s-max) * 0.5);
  --fc-xs-min: (var(--fc-s-min) * 0.75);
  --fc-xs-max: (var(--fc-s-max) * 0.75);
  --fc-s-min: (var(--f-0-min, 19));
  --fc-s-max: (var(--f-0-max, 21));
  --fc-m-min: (var(--fc-s-min) * 1.5);
  --fc-m-max: (var(--fc-s-max) * 1.5);
  --fc-l-min: (var(--fc-s-min) * 2);
  --fc-l-max: (var(--fc-s-max) * 2);
  --fc-xl-min: (var(--fc-s-min) * 3);
  --fc-xl-max: (var(--fc-s-max) * 3);
  --fc-2xl-min: (var(--fc-s-min) * 4);
  --fc-2xl-max: (var(--fc-s-max) * 4);
  --fc-3xl-min: (var(--fc-s-min) * 6);
  --fc-3xl-max: (var(--fc-s-max) * 6);
  --s-4: calc(
    ((var(--fc-4xs-min) / 16) * 1rem) + (var(--fc-4xs-max) - var(--fc-4xs-min)) *
      var(--fluid-bp)
  );
  --s-3: calc(
    ((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) *
      var(--fluid-bp)
  );
  --s-2: calc(
    ((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) *
      var(--fluid-bp)
  );
  --s-1: calc(
    ((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) *
      var(--fluid-bp)
  );
  --s0: calc(
    ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) *
      var(--fluid-bp)
  );
  --s1: calc(
    ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) *
      var(--fluid-bp)
  );
  --s2: calc(
    ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) *
      var(--fluid-bp)
  );
  --s3: calc(
    ((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) *
      var(--fluid-bp)
  );
  --s4: calc(
    ((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) *
      var(--fluid-bp)
  );
  --s5: calc(
    ((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) *
      var(--fluid-bp)
  );
  /* One-up pairs */
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.serif {
  font-family: var(--font-serif);
}

.sans {
  font-family: var(--font-sans);
}

.serif--title {
  font-family: "Salvo Serif", georgia, serif;
  font-size: var(--f8);
  font-weight: 900;
  line-height: 0.95;
}

.sans--title {
  font-family: acumin-pro-condensed, helvetica, arial, sans-serif;
  font-weight: 800;
  line-height: 0.8;
  --f-9-min: 40;
  --f-9-max: 60;
  --f9: calc(
    ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min)) *
      var(--fluid-bp)
  );
  font-size: var(--f9);
}

.red {
  color: var(--primary-color);
}

.light-red {
  color: var(--primary-color-light);
}

.blue {
  color: var(--secondary-color);
}

.light-blue {
  color: var(--secondary-color-light);
}

.gray {
  color: var(--gray);
}

.mid-gray {
  color: var(--mid-gray);
}

.light-gray {
  color: var(--light-gray);
}

.moon-gray {
  color: var(--moon-gray);
}

.near-white {
  color: var(--near-white);
}

.green {
  color: var(--green);
}

.dark-blue {
  color: var(--dark-blue);
}

.pink {
  color: var(--pink);
}

.black {
  color: var(--color-dark);
}

.white {
  color: var(--color-light);
}

.danger {
  color: var(--error-color);
}

.success {
  color: var(--success-color);
}

.bg-red {
  background-color: var(--primary-color);
}

.bg-light-red {
  background-color: var(--primary-color-light);
}

.bg-blue {
  background-color: var(--secondary-color);
}

.bg-light-blue {
  background-color: var(--secondary-color-light);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-mid-gray {
  background-color: var(--mid-gray);
}

.bg-light-gray {
  background-color: var(--light-gray);
}

.bg-moon-gray {
  background-color: var(--moon-gray);
}

.bg-near-white {
  background-color: var(--near-white);
}

.bg-green {
  background-color: var(--green);
}

.bg-light-green {
  background-color: var(--light-green);
}

.bg-dark-blue {
  background-color: var(--dark-blue);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-black {
  background-color: var(--color-dark);
}

.bg-white {
  background-color: var(--color-light);
}

.bg-light-yellow {
  background-color: var(--light-yellow);
}

.bg-success {
  background-color: var(--success-color);
}

.hover-black:hover {
  color: var(--color-dark);
}

:root {
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-serif);
  line-height: var(--line-height);
}

*,
*::before,
*::after {
  border-color: var(--primary-color);
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  margin: 0;
  overflow-wrap: break-word;
  padding: 0;
}

main:focus {
  outline: none;
}

*,
.measure {
  max-width: var(--measure);
}

.measure-s {
  max-width: var(--measure-s);
}

.measure-l {
  max-width: var(--measure-l);
}

html,
body,
div,
header,
article,
section,
nav,
main,
footer,
form,
iframe,
figure,
img,
details,
summary,
li,
.box,
.cluster,
.cover,
.frame,
.grid,
.sidebar,
.stack,
.switcher,
.center *,
.not-measured,
.not-measured * {
  max-width: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--line-height-small);
}

h1 {
  font-size: var(--f4);
}

h2 {
  font-size: var(--f3);
}

h3 {
  font-size: var(--f2);
}

h4,
h5,
h6 {
  font-size: var(--f1);
}

hr {
  border: 0;
  border-top: 1px solid var(--primary-color);
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

.hide-flash .flash-container {
  display: none;
}

.flash-container {
  background-color: var(--primary-color-light);
  margin: var(--s0) 0;
  padding: var(--s0);
}

.no-underline-hover:hover {
  text-decoration: none;
}

.pointer {
  cursor: pointer;
}

.ampersand {
  color: var(--primary-color);
}

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

@media (min-width: 30em) {
  .mobile-only {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .full-bleed-mobile {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .not-on-mobile {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .mobile-to-tablet-only {
    display: none !important;
  }
}
.hidden {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

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

.fadeout {
  animation: fadeOut ease 0.5s;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.02, 1.02, 1.02);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

body.not-published .article-header:before {
  content: "😖 Nog niet gepubliceerd!";
  display: inline-block;
  margin: -20px 0 20px -90px;
  padding: var(--s-1);
  transform: rotate(-12deg);
  border: 2px solid var(--red);
  color: var(--red);
  background: white;
  font-family: var(--font-sans);
  font-size: var(--f1);
  line-height: 1;
  font-weight: 600;
}

@supports (display: flow-root) {
  .clearfix {
    display: flow-root;
  }
}
@supports not (display: flow-root) {
  .clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
  }

  .clearfix::after {
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }
}
details > summary {
  outline: none;
}

.no-marker > summary {
  list-style: none;
}
.no-marker > summary::-webkit-details-marker {
  display: none;
}

.inline-newsletter-signup-container {
  display: none;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: var(--s0);
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.simple-calendar .today h2 {
  color: var(--red);
}
.simple-calendar .past {
  color: #888;
}
.simple-calendar .wday-0 h2,
.simple-calendar .wday-6 h2 {
  background: var(--near-white);
}

.border {
  border-style: solid;
  border-width: 1px;
  border-color: var(--primary-color);
}

.border-top {
  border-top-style: solid;
  border-top-width: 1px;
  border-color: var(--primary-color);
}

.border-bottom {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--primary-color);
}

.border-left {
  border-left-style: solid;
  border-left-width: 1px;
  border-color: var(--primary-color);
}

.border-right {
  border-right-style: solid;
  border-right-width: 1px;
  border-color: var(--primary-color);
}

.border--moon-gray {
  border-color: var(--moon-gray);
}

.border--gray {
  border-color: var(--gray);
}

.border--black {
  border-color: var(--color-dark);
}

.border--white {
  border-color: var(--color-light);
}

.border-top--fat {
  border-top-width: 8px;
}

.border-bottom--fat {
  border-bottom-width: 8px;
}

.border-left--width-3 {
  border-left-width: 3px;
}

.border-top--width-3 {
  border-top-width: 3px;
}

.border-bottom--width-2 {
  border-bottom-width: 2px;
}

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

.flex {
  display: flex;
}

@media (min-width: 30.01em) {
  .flex-ns {
    display: flex;
  }
}
@media (min-width: 30.01em) and (max-width: 59.99em) {
  .flex-m {
    display: flex;
  }
}
@media (min-width: 60.01em) {
  .flex-l {
    display: flex;
  }
}
.inline-flex {
  display: inline-flex;
}

.flex-auto {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.flex-none {
  flex: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-last {
  order: 99999;
}

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

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

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

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

.display-inline {
  display: inline;
}

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

.display-inline-block {
  display: inline-block;
}

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

.display-table {
  display: table;
}

.display-table-cell {
  display: table-cell;
}

@media (min-width: 30.01em) {
  .display-block-ns {
    display: block !important;
  }

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

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

  .display-table-ns {
    display: table;
  }

  .display-table-cell-ns {
    display: table-cell;
  }
}
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
  top: var(--s0);
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

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

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

.hide {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

@media (min-width: 30.01em) {
  .left-ns {
    float: left;
  }

  .right-ns {
    float: right;
  }
}
.fit {
  max-width: 100%;
}

.position-top {
  top: 0;
}

.position-right {
  right: 0;
}

.position-bottom {
  bottom: 0;
}

.position-top-s {
  top: var(--s-1);
}

.position-right-s {
  right: var(--s-1);
}

.position-bottom-s {
  bottom: var(--s-1);
}

.z-max {
  z-index: 2147483647;
}

.list-style-none {
  list-style: none;
}

.list-reset {
  list-style: none;
  padding-left: 0;
}

.piped-list {
  list-style-type: none;
}
.piped-list li {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  padding-left: 15.655px;
  float: left;
}
.piped-list li:before {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 18px;
  margin: auto 0;
  border: solid;
  border-width: 0 1px 0 0;
  border-color: var(--gray);
}
.piped-list li:first-child {
  margin-left: 0;
  padding-left: 0;
}
.piped-list li:first-child:before {
  content: none;
  display: none;
}
.piped-list li:last-child {
  color: var(--gray);
}

.m-none {
  margin: 0;
}

.mt-none {
  margin-top: 0;
}

.mr-none {
  margin-right: 0;
}

.mb-none {
  margin-bottom: 0;
}

.ml-none {
  margin-left: 0;
}

.m-4xs {
  margin: var(--s-4);
}

.mt-4xs {
  margin-top: var(--s-4);
}

.mr-4xs {
  margin-right: var(--s-4);
}

.mb-4xs {
  margin-bottom: var(--s-4);
}

.ml-4xs {
  margin-left: var(--s-4);
}

.m-3xs {
  margin: var(--s-3);
}

.mt-3xs {
  margin-top: var(--s-3);
}

.mr-3xs {
  margin-right: var(--s-3);
}

.mb-3xs {
  margin-bottom: var(--s-3);
}

.ml-3xs {
  margin-left: var(--s-3);
}

.m-2xs {
  margin: var(--s-2);
}

.mt-2xs {
  margin-top: var(--s-2);
}

.mr-2xs {
  margin-right: var(--s-2);
}

.mb-2xs {
  margin-bottom: var(--s-2);
}

.ml-2xs {
  margin-left: var(--s-3);
}

.m-xs {
  margin: var(--s-1);
}

.mt-xs {
  margin-top: var(--s-1);
}

.mr-xs {
  margin-right: var(--s-1);
}

.mb-xs {
  margin-bottom: var(--s-1);
}

.ml-xs {
  margin-left: var(--s-1);
}

.m-s {
  margin: var(--s0);
}

.mt-s {
  margin-top: var(--s0);
}

.mr-s {
  margin-right: var(--s0);
}

.mb-s {
  margin-bottom: var(--s0);
}

.ml-s {
  margin-left: var(--s0);
}

.m-m {
  margin: var(--s1);
}

.mt-m {
  margin-top: var(--s1);
}

.mr-m {
  margin-right: var(--s1);
}

.mb-m {
  margin-bottom: var(--s1);
}

.ml-m {
  margin-left: var(--s1);
}

.m-l {
  margin: var(--s2);
}

.mt-l {
  margin-top: var(--s2);
}

.mr-l {
  margin-right: var(--s2);
}

.mb-l {
  margin-bottom: var(--s2);
}

.ml-l {
  margin-left: var(--s2);
}

.m-xl {
  margin: var(--s3);
}

.mt-xl {
  margin-top: var(--s3);
}

.mr-xl {
  margin-right: var(--s3);
}

.mb-xl {
  margin-bottom: var(--s3);
}

.ml-xl {
  margin-left: var(--s3);
}

.m-2xl {
  margin: var(--s4);
}

.mt-2xl {
  margin-top: var(--s4);
}

.mr-2xl {
  margin-right: var(--s4);
}

.mb-2xl {
  margin-bottom: var(--s4);
}

.ml-2xl {
  margin-left: var(--s4);
}

.m-3xl {
  margin: var(--s5);
}

.mt-3xl {
  margin-top: var(--s5);
}

.mr-3xl {
  margin-right: var(--s5);
}

.mb-3xl {
  margin-bottom: var(--s5);
}

.ml-3xl {
  margin-left: var(--s5);
}

.m-auto {
  margin: auto;
}

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

.mr-auto {
  margin-right: auto;
}

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

.ml-auto {
  margin-left: auto;
}

.p-none {
  padding: 0;
}

.pt-none {
  padding-top: 0;
}

.pr-none {
  padding-right: 0;
}

.pb-none {
  padding-bottom: 0;
}

.pl-none {
  padding-left: 0;
}

.p-4xs {
  padding: var(--s-4);
}

.pt-4xs {
  padding-top: var(--s-4);
}

.pr-4xs {
  padding-right: var(--s-4);
}

.pb-4xs {
  padding-bottom: var(--s-4);
}

.pl-4xs {
  padding-left: var(--s-4);
}

.p-3xs {
  padding: var(--s-3);
}

.pt-3xs {
  padding-top: var(--s-3);
}

.pr-3xs {
  padding-right: var(--s-3);
}

.pb-3xs {
  padding-bottom: var(--s-3);
}

.pl-3xs {
  padding-left: var(--s-3);
}

.p-2xs {
  padding: var(--s-2);
}

.pt-2xs {
  padding-top: var(--s-2);
}

.pr-2xs {
  padding-right: var(--s-2);
}

.pb-2xs {
  padding-bottom: var(--s-2);
}

.pl-2xs {
  padding-left: var(--s-2);
}

.p-xs {
  padding: var(--s-1);
}

.pt-xs {
  padding-top: var(--s-1);
}

.pr-xs {
  padding-right: var(--s-1);
}

.pb-xs {
  padding-bottom: var(--s-1);
}

.pl-xs {
  padding-left: var(--s-1);
}

.p-s {
  padding: var(--s0);
}

.pt-s {
  padding-top: var(--s0);
}

.pr-s {
  padding-right: var(--s0);
}

.pb-s {
  padding-bottom: var(--s0);
}

.pl-s {
  padding-left: var(--s0);
}

.p-m {
  padding: var(--s1);
}

.pt-m {
  padding-top: var(--s1);
}

.pr-m {
  padding-right: var(--s1);
}

.pb-m {
  padding-bottom: var(--s1);
}

.pl-m {
  padding-left: var(--s1);
}

.p-l {
  padding: var(--s2);
}

.pt-l {
  padding-top: var(--s2);
}

.pr-l {
  padding-right: var(--s2);
}

.pb-l {
  padding-bottom: var(--s2);
}

.pl-l {
  padding-left: var(--s2);
}

.p-xl {
  padding: var(--s3);
}

.pt-xl {
  padding-top: var(--s3);
}

.pr-xl {
  padding-right: var(--s3);
}

.pb-xl {
  padding-bottom: var(--s3);
}

.pl-xl {
  padding-left: var(--s3);
}

.p-2xl {
  padding: var(--s4);
}

.pt-2xl {
  padding-top: var(--s4);
}

.pr-2xl {
  padding-right: var(--s4);
}

.pb-2xl {
  padding-bottom: var(--s4);
}

.pl-2xl {
  padding-left: var(--s4);
}

.p-3xl {
  padding: var(--s4);
}

.pt-3xl {
  padding-top: var(--s4);
}

.pr-3xl {
  padding-right: var(--s4);
}

.pb-3xl {
  padding-bottom: var(--s4);
}

.pl-3xl {
  padding-left: var(--s4);
}

.nmt-xs {
  margin-top: calc(-1 * var(--s-3)) !important;
}

.nmt-4xs {
  margin-top: calc(-1 * var(--s-4)) !important;
}

.nml-xs {
  margin-left: calc(-1 * var(--s-1)) !important;
}

.nmr-xs {
  margin-right: calc(-1 * var(--s-1)) !important;
}

@media (min-width: 30em) {
  .m-none-ns {
    margin: 0;
  }

  .mt-none-ns {
    margin-top: 0;
  }

  .mr-none-ns {
    margin-right: 0;
  }

  .mb-none-ns {
    margin-bottom: 0;
  }

  .ml-none-ns {
    margin-left: 0;
  }

  .m-4xs-ns {
    margin: var(--s-4);
  }

  .mt-4xs-ns {
    margin-top: var(--s-4);
  }

  .mr-4xs-ns {
    margin-right: var(--s-4);
  }

  .mb-4xs-ns {
    margin-bottom: var(--s-4);
  }

  .ml-4xs-ns {
    margin-left: var(--s-4);
  }

  .m-3xs-ns {
    margin: var(--s-3);
  }

  .mt-3xs-ns {
    margin-top: var(--s-3);
  }

  .mr-3xs-ns {
    margin-right: var(--s-3);
  }

  .mb-3xs-ns {
    margin-bottom: var(--s-3);
  }

  .ml-3xs-ns {
    margin-left: var(--s-3);
  }

  .m-2xs-ns {
    margin: var(--s-2);
  }

  .mt-2xs-ns {
    margin-top: var(--s-2);
  }

  .mr-2xs-ns {
    margin-right: var(--s-2);
  }

  .mb-2xs-ns {
    margin-bottom: var(--s-2);
  }

  .ml-2xs-ns {
    margin-left: var(--s-3);
  }

  .m-xs-ns {
    margin: var(--s-1);
  }

  .mt-xs-ns {
    margin-top: var(--s-1);
  }

  .mr-xs-ns {
    margin-right: var(--s-1);
  }

  .mb-xs-ns {
    margin-bottom: var(--s-1);
  }

  .ml-xs-ns {
    margin-left: var(--s-1);
  }

  .m-s-ns {
    margin: var(--s0);
  }

  .mt-s-ns {
    margin-top: var(--s0);
  }

  .mr-s-ns {
    margin-right: var(--s0);
  }

  .mb-s-ns {
    margin-bottom: var(--s0);
  }

  .ml-s-ns {
    margin-left: var(--s0);
  }

  .m-m-ns {
    margin: var(--s1);
  }

  .mt-m-ns {
    margin-top: var(--s1);
  }

  .mr-m-ns {
    margin-right: var(--s1);
  }

  .mb-m-ns {
    margin-bottom: var(--s1);
  }

  .ml-m-ns {
    margin-left: var(--s1);
  }

  .m-l-ns {
    margin: var(--s2);
  }

  .mt-l-ns {
    margin-top: var(--s2);
  }

  .mr-l-ns {
    margin-right: var(--s2);
  }

  .mb-l-ns {
    margin-bottom: var(--s2);
  }

  .ml-l-ns {
    margin-left: var(--s2);
  }

  .m-xl-ns {
    margin: var(--s3);
  }

  .mt-xl-ns {
    margin-top: var(--s3);
  }

  .mr-xl-ns {
    margin-right: var(--s3);
  }

  .mb-xl-ns {
    margin-bottom: var(--s3);
  }

  .ml-xl-ns {
    margin-left: var(--s3);
  }

  .m-2xl-ns {
    margin: var(--s4);
  }

  .mt-2xl-ns {
    margin-top: var(--s4);
  }

  .mr-2xl-ns {
    margin-right: var(--s4);
  }

  .mb-2xl-ns {
    margin-bottom: var(--s4);
  }

  .ml-2xl-ns {
    margin-left: var(--s4);
  }

  .m-3xl-ns {
    margin: var(--s5);
  }

  .mt-3xl-ns {
    margin-top: var(--s5);
  }

  .mr-3xl-ns {
    margin-right: var(--s5);
  }

  .mb-3xl-ns {
    margin-bottom: var(--s5);
  }

  .ml-3xl-ns {
    margin-left: var(--s5);
  }

  .m-auto-ns {
    margin: auto;
  }

  .mt-auto-ns {
    margin-top: auto;
  }

  .mr-auto-ns {
    margin-right: auto;
  }

  .mb-auto-ns {
    margin-bottom: auto;
  }

  .ml-auto-ns {
    margin-left: auto;
  }

  .p-none-ns {
    padding: 0;
  }

  .pt-none-ns {
    padding-top: 0;
  }

  .pr-none-ns {
    padding-right: 0;
  }

  .pb-none-ns {
    padding-bottom: 0;
  }

  .pl-none-ns {
    padding-left: 0;
  }

  .p-4xs-ns {
    padding: var(--s-4);
  }

  .pt-4xs-ns {
    padding-top: var(--s-4);
  }

  .pr-4xs-ns {
    padding-right: var(--s-4);
  }

  .pb-4xs-ns {
    padding-bottom: var(--s-4);
  }

  .pl-4xs-ns {
    padding-left: var(--s-4);
  }

  .p-3xs-ns {
    padding: var(--s-3);
  }

  .pt-3xs-ns {
    padding-top: var(--s-3);
  }

  .pr-3xs-ns {
    padding-right: var(--s-3);
  }

  .pb-3xs-ns {
    padding-bottom: var(--s-3);
  }

  .pl-3xs-ns {
    padding-left: var(--s-3);
  }

  .p-2xs-ns {
    padding: var(--s-2);
  }

  .pt-2xs-ns {
    padding-top: var(--s-2);
  }

  .pr-2xs-ns {
    padding-right: var(--s-2);
  }

  .pb-2xs-ns {
    padding-bottom: var(--s-2);
  }

  .pl-2xs-ns {
    padding-left: var(--s-2);
  }

  .p-xs-ns {
    padding: var(--s-1);
  }

  .pt-xs-ns {
    padding-top: var(--s-1);
  }

  .pr-xs-ns {
    padding-right: var(--s-1);
  }

  .pb-xs-ns {
    padding-bottom: var(--s-1);
  }

  .pl-xs-ns {
    padding-left: var(--s-1);
  }

  .p-s-ns {
    padding: var(--s0);
  }

  .pt-s-ns {
    padding-top: var(--s0);
  }

  .pr-s-ns {
    padding-right: var(--s0);
  }

  .pb-s-ns {
    padding-bottom: var(--s0);
  }

  .pl-s-ns {
    padding-left: var(--s0);
  }

  .p-m-ns {
    padding: var(--s1);
  }

  .pt-m-ns {
    padding-top: var(--s1);
  }

  .pr-m-ns {
    padding-right: var(--s1);
  }

  .pb-m-ns {
    padding-bottom: var(--s1);
  }

  .pl-m-ns {
    padding-left: var(--s1);
  }

  .p-l-ns {
    padding: var(--s2);
  }

  .pt-l-ns {
    padding-top: var(--s2);
  }

  .pr-l-ns {
    padding-right: var(--s2);
  }

  .pb-l-ns {
    padding-bottom: var(--s2);
  }

  .pl-l-ns {
    padding-left: var(--s2);
  }

  .p-xl-ns {
    padding: var(--s3);
  }

  .pt-xl-ns {
    padding-top: var(--s3);
  }

  .pr-xl-ns {
    padding-right: var(--s3);
  }

  .pb-xl-ns {
    padding-bottom: var(--s3);
  }

  .pl-xl-ns {
    padding-left: var(--s3);
  }

  .p-2xl-ns {
    padding: var(--s4);
  }

  .pt-2xl-ns {
    padding-top: var(--s4);
  }

  .pr-2xl-ns {
    padding-right: var(--s4);
  }

  .pb-2xl-ns {
    padding-bottom: var(--s4);
  }

  .pl-2xl-ns {
    padding-left: var(--s4);
  }

  .p-3xl-ns {
    padding: var(--s4);
  }

  .pt-3xl-ns {
    padding-top: var(--s4);
  }

  .pr-3xl-ns {
    padding-right: var(--s4);
  }

  .pb-3xl-ns {
    padding-bottom: var(--s4);
  }

  .pl-3xl-ns {
    padding-left: var(--s4);
  }

  .nmt-xs-ns {
    margin-top: calc(-1 * var(--s-3)) !important;
  }

  .nmt-4xs-ns {
    margin-top: calc(-1 * var(--s-4)) !important;
  }

  .nml-xs-ns {
    margin-left: calc(-1 * var(--s-1)) !important;
  }

  .nmr-xs-ns {
    margin-right: calc(-1 * var(--s-1)) !important;
  }
}
.font-family-inherit {
  font-family: inherit;
}

.font-size-inherit {
  font-size: inherit;
}

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

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semi {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.sans strong,
.sans b {
  font-weight: 600;
}

.italic {
  font-style: italic;
}

.caps {
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase,
.small-caps {
  text-transform: uppercase;
}

.left-align {
  text-align: left;
}

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

.right-align {
  text-align: right;
}

.justify {
  text-align: justify;
}

@media (min-width: 768px) {
  .left-align-ns {
    text-align: left;
  }

  .text-center-ns {
    text-align: center;
  }

  .right-align-ns {
    text-align: right;
  }
}
.nowrap {
  white-space: nowrap;
}

.break-word {
  word-wrap: break-word;
}

.line-height-solid {
  line-height: var(--line-height-solid);
}

.line-height-title {
  line-height: var(--line-height-title);
}

.line-height-small {
  line-height: var(--line-height-small);
}

.line-height-none {
  line-height: 0;
}

.underline {
  text-decoration: underline;
}

.onum {
  font-feature-settings: "onum";
  font-variant-numeric: oldstyle-nums;
}

.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.f-2 {
  font-size: var(--f-2);
}

.f-1 {
  font-size: var(--f-1);
}

.f0 {
  font-size: var(--f0);
}

.f1 {
  font-size: var(--f1);
}

.f2 {
  font-size: var(--f2);
}

.f3 {
  font-size: var(--f3);
}

.f4 {
  font-size: var(--f4);
}

.f5 {
  font-size: var(--f5);
}

.f6 {
  font-size: var(--f6);
}

.f7 {
  font-size: var(--f7);
}

.f8 {
  font-size: var(--f8);
}

@media (min-width: 768px) {
  .f-2-ns {
    font-size: var(--f-2);
  }

  .f-1-ns {
    font-size: var(--f-1);
  }

  .f0-ns {
    font-size: var(--f0);
  }

  .f1-ns {
    font-size: var(--f1);
  }

  .f2-ns {
    font-size: var(--f2);
  }

  .f3-ns {
    font-size: var(--f3);
  }

  .f4-ns {
    font-size: var(--f4);
  }

  .f5-ns {
    font-size: var(--f5);
  }

  .f6-ns {
    font-size: var(--f6);
  }

  .f7-ns {
    font-size: var(--f7);
  }

  .f8-ns {
    font-size: var(--f8);
  }
}
.w1 {
  width: 1rem;
}

.w2 {
  width: 2rem;
}

.w3 {
  width: 4rem;
}

.w4 {
  width: 8rem;
}

.w5 {
  width: 12rem;
}

.w6 {
  width: 16rem;
}

.w7 {
  width: 20rem;
}

.w8 {
  width: 24rem;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-33 {
  width: 33%;
}

.w-34 {
  width: 34%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.w-third {
  width: 33.3333333333%;
}

.w-two-thirds {
  width: 66.6666666667%;
}

.w-auto {
  width: auto;
}

@media (min-width: 30.01em) {
  .w-10-ns {
    width: 10%;
  }

  .w-20-ns {
    width: 20%;
  }

  .w-25-ns {
    width: 25%;
  }

  .w-30-ns {
    width: 30%;
  }

  .w-40-ns {
    width: 40%;
  }

  .w-50-ns {
    width: 50%;
  }

  .w-60-ns {
    width: 60%;
  }

  .w-70-ns {
    width: 70%;
  }

  .w-75-ns {
    width: 75%;
  }

  .w-80-ns {
    width: 80%;
  }

  .w-90-ns {
    width: 90%;
  }

  .w-100-ns {
    width: 100%;
  }
}
.box {
  --space: 0;
  --border-color: var(--moon-gray);
  padding: var(--space);
  border: 0 solid;
  outline: 1px solid transparent;
  outline-offset: -1px;
}

.box-border {
  border: 1px solid var(--border-color);
}

.center {
  --width: var(--measure);
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--width);
}

.center-s {
  --width: var(--measure-s);
}

.center-l {
  --width: var(--measure-l);
}

.centerflex {
  --centerflex-gap: 1rem;
  --centerflex-threshold: 30rem;
  --multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: calc(-1 * var(--centerflex-gap, 1rem) / 2) 0;
}
.centerflex:before {
  content: "";
  flex-grow: 666;
  margin: 0;
  flex-basis: max(0px, var(--multiplier));
}
.centerflex > * {
  margin: calc(var(--centerflex-gap, 1rem) / 2) auto;
}
.centerflex > *:first-child {
  order: -1;
}

.cluster {
  --space: var(--s1);
  overflow: hidden;
}

.cluster > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: calc(-1 * var(--space) / 2);
}

.cluster > * > * {
  margin: calc(var(--space) / 2);
}

.cover {
  --space: var(--s1);
  --min: 100vh;
  display: flex;
  flex-direction: column;
  min-height: var(--min);
  padding: var(--space);
}

.cover-space-2 {
  --space: var(--s2);
}

.cover > * {
  margin-top: var(--space);
  margin-bottom: var(--space);
}

.cover > :first-child:not(.centered) {
  margin-top: 0;
}

.cover > :last-child:not(.centered) {
  margin-bottom: 0;
}

.cover > .centered {
  margin-top: auto;
  margin-bottom: auto;
}

.float {
  --breakpoint: 30rem;
  --min-size: 30%;
  --space: var(--s1);
  float: left;
  width: calc((var(--breakpoint) - 100%) * 9999);
  min-width: var(--min-size);
  max-width: 100%;
  margin-bottom: var(--space);
  margin-right: var(--space);
}

.float-right {
  float: right;
  margin-right: 0;
  margin-left: var(--space);
}

.frame {
  --n: 7;
  --d: 9;
  padding-bottom: calc(var(--n) / var(--d) * 100%);
  position: relative;
}

.frame-5x9 {
  --n: 5;
  --d: 9;
}

.frame-4x3 {
  --n: 3;
  --d: 4;
}

.frame > * {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid {
  --space: var(--s1);
  --min: 250px;
  align-content: start;
  display: grid;
  grid-gap: var(--space);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr));
}

.imposter {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.imposter.contain {
  --margin: 0;
  max-height: calc(100% - var(--margin) * 2);
  max-width: calc(100% - var(--margin) * 2);
  overflow: auto;
}

.imposter-fixed {
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sidebar {
  --space: var(--s1);
  --basis: 0;
}

.sidebar > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--space) / 2);
}

.sidebar > * > * {
  margin: calc(var(--space) / 2);
  flex-basis: var(--basis);
  flex-grow: 1;
}

.sidebar-left > * > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(50% - var(--space));
}

.sidebar-right > * > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(50% - var(--space));
}

.sidebar-s {
  --basis: 12rem;
}

.sidebar-m {
  --basis: 15rem;
}

.stack {
  --space: var(--s1);
}

.stack-space-2 {
  --space: var(--s2);
}

.stack-space--1 {
  --space: var(--s-1);
}

.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--space);
}

.stack-bottom > * {
  margin-bottom: var(--space);
}

.stack-bottom > * + * {
  margin-top: 0;
  margin-bottom: var(--space);
}
.stack-bottom > * + *:last-child {
  margin-bottom: 0;
}

.switcher {
  --space: var(--s1);
  --width: var(--measure);
}

.switcher-space-2 {
  --space: var(--s2);
}

.switcher-space--1 {
  --space: var(--s-1);
}

.switcher > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--space) / 2);
}

.switcher > * > * {
  flex-grow: 1;
  flex-basis: calc((var(--width) - (100% - var(--space))) * 999);
  margin: calc(var(--space) / 2);
}

.switcher > * > :nth-last-child(n+6),
.switcher > * > :nth-last-child(n+6) ~ * {
  flex-basis: 100%;
}

.library-grid {
  --min: 12rem;
  --space: var(--s1);
}
@media (min-width: 991px) {
  .library-grid {
    --min: 15rem;
    --space: var(--s2);
  }
}

.article-wrapper {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1051px) {
  .article-container {
    display: grid;
    grid-template-columns: 56ch 1fr;
    grid-gap: var(--s3);
    grid-template-areas: "a t" "a m" "a b";
  }

  .article-body {
    grid-area: a;
  }

  .article-aside-top {
    grid-area: t;
  }

  .article-aside-middle {
    grid-area: m;
  }

  .article-aside-magazine {
    grid-area: b;
  }
}
@media (max-width: 1049px) {
  .article-aside-top,
.article-aside-magazine {
    padding-top: var(--s1);
    margin-top: var(--s3);
    border-top: 1px solid var(--moon-gray);
  }

  .article-aside-top .compilation,
.article-aside-top .book {
    max-width: 250px;
    margin: 0 auto;
  }
  .article-aside-top .injectable {
    display: none;
  }

  .article-aside-middle {
    display: none;
  }

  .article-aside-magazine .issue-card {
    max-width: 280px;
    margin: 0 auto;
  }
}
@media (max-width: 749px) {
  .article-body .injectable-category .category-info {
    padding: var(--s-1);
    background: var(--light-gray);
  }
}
@media (min-width: 750px) and (max-width: 1049px) {
  .article-body .injectable {
    float: right;
    width: 16rem;
    margin: 0 0 var(--s0) var(--s0);
  }
}
@media (min-width: 1051px) {
  .article-body .injectable {
    display: none;
  }
}
.article-section-start {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95em;
}

.article-divider {
  padding: var(--s-2) 0;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--primary-color);
  text-align: center;
}
.article-divider:before {
  display: block;
  height: 3px;
  width: 2.3rem;
  margin: 0 auto;
  line-height: 1;
  content: "";
  background: var(--primary-color);
}
.article-divider span {
  display: none;
}

.book-cover {
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05), 3px 4px 6px rgba(0, 0, 0, 0.07), 5px 6px 12px rgba(0, 0, 0, 0.09), 7px 8px 32px rgba(0, 0, 0, 0.11);
}

.article-aside-top .compilation div {
  padding: 0 var(--s-3) var(--s-3);
  background-color: var(--primary-color-light);
}
.article-aside-top .compilation h2 {
  font-size: var(--f0);
}

.republication {
  background: var(--primary-color-light);
  padding: var(--s-4);
}

.homepage .grid-article time {
  display: none;
}

.article-auto-grid {
  --space: var(--s0);
  --min: 20rem;
}
@media (min-width: 1025px) {
  .article-auto-grid {
    --space: var(--s2);
  }
}
.article-auto-grid .grid-article {
  margin-bottom: var(--s0);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--gray);
}
@media (min-width: 768px) {
  .article-auto-grid .grid-article {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.article-grid .col-line {
  display: none;
}
.article-grid .grid-article {
  margin-bottom: var(--s0);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--gray);
}
@media (min-width: 768px) {
  .article-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-column-gap: var(--s0);
  }
  .article-grid .story-mobile {
    display: none;
  }
  .article-grid .grid-article {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .article-grid .col-line {
    display: flex;
    height: 98%;
  }
  .article-grid .col-line line {
    stroke: var(--moon-gray);
  }
}
@media (min-width: 1025px) {
  .article-grid {
    grid-column-gap: var(--s2);
  }
}

@media (max-width: 767px) {
  .layout-A .col-1 .story-2,
.layout-A .col-2 .story-1 {
    display: none;
  }
}
.layout-A .col-1 {
  grid-column: 1/span 9;
}
.layout-A .col-1 .story-1 h1 {
  font-size: var(--f3);
}
@media (min-width: 768px) {
  .layout-A .col-1 .story-1 h1 {
    font-size: var(--f4);
  }
}
@media (min-width: 1024px) {
  .layout-A .col-1 .story-1 h1 {
    font-size: var(--f5);
  }
}
@media (max-width: 767px) {
  .layout-A .col-1 .story-1 figure {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
@media (min-width: 768px) {
  .layout-A .col-1 .story-2 h1 {
    font-size: var(--f3);
  }
}
@media (min-width: 1024px) {
  .layout-A .col-1 .story-2 .grid-article {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(9, 1fr);
    grid-column-gap: var(--s2);
    grid-template-rows: 1fr;
  }
  .layout-A .col-1 .story-2 .article-thumb {
    grid-row: 1;
    grid-column-start: 7;
    grid-column-end: 10;
  }
  .layout-A .col-1 .story-2 .article-text {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 7;
  }
}
.layout-A .col-line {
  grid-column: 10/span 1;
  height: 98%;
}
.layout-A .col-2 {
  grid-column: 11/span 5;
}
@media (min-width: 768px) {
  .layout-A .col-2 .story-1 h1 {
    font-size: var(--f3);
  }
}
.layout-A .col-2 .story-2 figure {
  display: none;
}
@media (min-width: 768px) {
  .layout-A .col-2 .story-2 h1 {
    font-size: var(--f3);
  }
}
.layout-A .col-2 .story-3 figure {
  display: none;
}

.layout-A-3 .col-2 .story-2 figure,
.layout-A-5 .col-2 .story-2 figure,
.layout-A-7 .col-2 .story-2 figure,
.layout-A-8 .col-2 .story-2 figure,
.layout-A-9 .col-2 .story-2 figure {
  display: block;
}

@media (max-width: 767px) {
  .layout-B {
    padding-top: var(--s0);
    border-top: none;
  }
  .layout-B .col-1 figure {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
.layout-B .col-1 h1,
.layout-B .col-2 h1 {
  font-size: var(--f3);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-B {
    grid-template-columns: repeat(10, 1fr);
  }
  .layout-B .col-1 {
    grid-column: 1/span 5;
  }
  .layout-B .col-1 h1 {
    font-size: var(--f2);
  }
  .layout-B .col-2 {
    grid-column: 6/span 5;
  }
  .layout-B .col-2 h1 {
    font-size: var(--f2);
  }
  .layout-B .col-3 {
    grid-column: 1/span 10;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-column-gap: var(--s0);
  }
  .layout-B .col-3 .story-1 {
    grid-column: 1/span 10;
    margin-bottom: var(--s0);
  }
  .layout-B .col-3 .story-1 h1 {
    font-size: var(--f1);
  }
  .layout-B .col-3 .story-1 .grid-article {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(10, 1fr);
    grid-column-gap: var(--s0);
    grid-template-rows: 1fr;
  }
  .layout-B .col-3 .story-1 .article-thumb {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 5;
  }
  .layout-B .col-3 .story-1 .article-text {
    grid-row: 1;
    grid-column-start: 5;
    grid-column-end: 11;
  }
  .layout-B .col-3 .story-2 {
    grid-column: 11/span 5;
    margin-bottom: var(--s0);
  }
  .layout-B .col-3 .story-2 h1 {
    font-size: var(--f0);
  }
}
@media (min-width: 1024px) {
  .layout-B .col-1 {
    grid-column: 1/span 6;
  }
  .layout-B .col-2 {
    grid-column: 7/span 6;
  }
  .layout-B .col-3 {
    grid-column: 13/span 3;
  }
  .layout-B .col-3 .story-1 {
    margin-bottom: var(--s1);
  }
  .layout-B .col-3 .story-1 > h2 {
    display: block !important;
  }
  .layout-B .col-3 .story-1 header h2 {
    display: none;
  }
  .layout-B .col-3 .story-1 h1 {
    font-size: var(--f0);
    font-weight: 700;
  }
  .layout-B .col-3 .authors {
    font-size: var(--f-2);
  }
}
.layout-B .story-2 figure {
  display: none;
}
.layout-B .story-2 h1 {
  font-size: var(--f0);
}

@media (min-width: 768px) {
  .layout-C .col-1 {
    grid-column: 2/span 7;
  }
  .layout-C .col-2 {
    grid-column: 9/span 7;
  }
}
@media (min-width: 1024px) {
  .layout-C h1 {
    font-size: var(--f3);
  }
  .layout-C .col-1 {
    grid-column: 4/span 6;
  }
  .layout-C .col-2 {
    grid-column: 10/span 6;
  }
}

.layout-D h1 {
  font-size: var(--f3);
}
.layout-D .col-1 {
  grid-column: 1/span 6;
}
.layout-D .col-line {
  display: none;
}
@media (min-width: 1024px) {
  .layout-D .col-line {
    display: flex;
    grid-column: 7/span 1;
    height: 95%;
  }
}
.layout-D .col-2 .grid-article {
  margin-top: var(--s0);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-D .col-2 {
    grid-column: 7/span 9;
  }
  .layout-D .col-2 .grid-article {
    margin-top: 0;
    margin-bottom: var(--s0);
    display: grid;
    width: 100%;
    grid-template-columns: repeat(9, 1fr);
    grid-column-gap: var(--s0);
    grid-template-rows: 1fr;
  }
  .layout-D .col-2 .grid-article h1 {
    font-size: var(--f0);
  }
  .layout-D .col-2 .grid-article .article-thumb {
    grid-row: 1;
    grid-column-start: 7;
    grid-column-end: 10;
  }
  .layout-D .col-2 .grid-article .article-thumb .frame {
    --n: 1;
    --d: 1;
  }
  .layout-D .col-2 .grid-article .article-text {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 7;
  }
}
@media (min-width: 1024px) {
  .layout-D .col-2 {
    grid-column: 8/span 8;
  }
  .layout-D .col-2 .grid-article {
    margin-top: 0;
    margin-bottom: var(--s0);
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: var(--s2);
    grid-template-rows: 1fr;
  }
  .layout-D .col-2 .grid-article .article-thumb {
    grid-row: 1;
    grid-column-start: 6;
    grid-column-end: 9;
  }
  .layout-D .col-2 .grid-article .article-text {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 6;
  }
}

.col-2 .story-2 .book-thumb img,
.col-3 .story-1 .book-thumb img {
  max-height: 150px;
  width: auto;
}

@media (max-width: 767px) {
  .layout-film figure {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-film figure {
    grid-column: 1/span 9;
  }
  .layout-film figure .frame {
    --n: 5;
    --d: 6;
  }
  .layout-film article {
    grid-column: 10/span 6;
  }
}
@media (min-width: 1024px) {
  .layout-film figure {
    grid-column: 1/span 11;
  }
  .layout-film article {
    grid-column: 12/span 4;
  }
}

@media (max-width: 767px) {
  .layout-podcast > header {
    margin-bottom: var(--s1);
  }
  .layout-podcast .podcast-logo {
    display: none;
  }
  .layout-podcast .podcast-episode {
    border-bottom-color: var(--color-light);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-podcast > header {
    display: flex;
    grid-column: 1/span 15;
    margin-bottom: var(--s0);
  }
  .layout-podcast > header h2 {
    flex: 1 1 auto;
  }
  .layout-podcast > header p {
    margin-top: -1rem;
    font-size: var(--f6);
  }
  .layout-podcast > header img {
    max-width: 3rem;
  }
  .layout-podcast .podcast-episode:nth-of-type(1) {
    grid-column: 1/span 5;
  }
  .layout-podcast .podcast-episode:nth-of-type(2) {
    grid-column: 6/span 5;
  }
  .layout-podcast .podcast-episode:nth-of-type(3) {
    grid-column: 11/span 5;
  }
}
@media (min-width: 1024px) {
  .layout-podcast header {
    grid-column: 1/span 6;
  }
  .layout-podcast header img {
    max-width: 5rem;
    margin-top: var(--s-2);
  }
  .layout-podcast .podcast-episode:nth-of-type(1) {
    grid-column: 7/span 3;
  }
  .layout-podcast .podcast-episode:nth-of-type(2) {
    grid-column: 10/span 3;
  }
  .layout-podcast .podcast-episode:nth-of-type(3) {
    grid-column: 13/span 3;
  }
}
.layout-podcast article h1 {
  font-size: var(--f0);
}
.layout-podcast article p {
  display: none;
}
.layout-podcast article figure,
.layout-podcast article .icon {
  display: none;
}

.author-bio {
  display: none;
}

.show-author-bio .author-bio {
  display: block;
}

.rectangle img,
.leaderboard img {
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

button,
.btn {
  display: inline-block;
  padding: var(--btn-padding, var(--s-2));
  cursor: pointer;
  font-size: inherit;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-color, var(--color-light));
  background: var(--background-color, var(--primary-color));
  transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}
button:hover,
.btn:hover {
  --background-color: var(--color-dark);
  text-decoration: none;
}
button:focus,
.btn:focus {
  outline: none;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.25);
}

.btn-dark {
  --background-color: var(--color-dark);
}
.btn-dark:hover {
  --background-color: var(--primary-color);
}

.btn-plain {
  --background-color: var(--color-light);
  --text-color: var(--primary-color);
  --btn-padding: var(--s-4);
}
.btn-plain:hover {
  --background-color: var(--color-light);
  --text-color: var(--color-dark);
}

.home-btn {
  --background-color: var(--color-dark);
  --text-color: var(--color-light);
  --btn-padding: var(--s0);
}
.home-btn:hover {
  --background-color: var(--color-light);
  --text-color: var(--color-dark);
}

.btn-outline {
  --background-color: var(--color-light);
  --text-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.btn-outline:hover {
  --background-color: var(--color-dark);
  --text-color: var(--color-light);
  border-color: var(--color-dark);
}

.btn-as-link {
  background: none;
  padding: 0;
}

.btn-block {
  display: block;
}

.btn-wide {
  padding: var(--s-2) var(--s0);
}
@media (min-width: 768px) {
  .btn-wide {
    padding: var(--s-2) var(--s2);
  }
}

.btn-s {
  padding: var(--s-3) var(--s-2);
}

.btn-xs {
  padding: var(--s-4) var(--s-2);
}

.btn-rounded {
  border-radius: 5px;
}

.btn-podcast {
  --background-color: var(--green);
  --text-color: var(--dark-blue);
}
.btn-podcast:hover {
  --background-color: var(--dark-blue);
  --text-color: var(--color-light);
}

.breadcrumbs {
  list-style-type: none;
}
.breadcrumbs li {
  display: inline-block;
  position: relative;
  margin-bottom: 5px;
  margin-left: 10px;
  padding-left: 15.655px;
  float: left;
}
.breadcrumbs li:before {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  margin: auto 0;
  transform: rotate(45deg);
  border: solid;
  border-width: 1px 1px 0 0;
  border-color: var(--color-dark);
}
.breadcrumbs li:first-child {
  margin-left: 0;
  padding-left: 0;
}
.breadcrumbs li:first-child:before {
  content: none;
  display: none;
}
.breadcrumbs li:last-child {
  color: var(--gray);
}

.campaign-content blockquote {
  font-style: italic;
}
.campaign-content blockquote cite {
  font-family: var(--font-sans);
  font-size: var(--f0);
  font-style: normal;
  color: var(--gray);
}

body.onderzoek .category-header h1 {
  font-family: acumin-pro-condensed, helvetica, arial, sans-serif;
  font-weight: 800;
  line-height: 0.8;
  --f-9-min: 40;
  --f-9-max: 60;
  --f9: calc(
    ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min)) *
      var(--fluid-bp)
  );
  font-size: var(--f9);
}
body.onderzoek .category-header p {
  max-width: 80ch;
  margin-top: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--s-1);
}
@media (min-width: 768px) {
  body.onderzoek .category-header p {
    font-size: var(--s0);
  }
}

body.dichters-denkers .category-header h1,
body.kunst-cultuur .category-header h1 {
  font-family: "Salvo Serif", georgia, serif;
  font-weight: 900;
  line-height: 0.95;
  --f-9-min: 36;
  --f-9-max: 60;
  --f9: calc(
    ((var(--f-9-min) / 16) * 1rem) + (var(--f-9-max) - var(--f-9-min)) *
      var(--fluid-bp)
  );
  font-size: var(--f9);
}

body.luisterverhalen .header-container {
  background: var(--yellow);
}
body.luisterverhalen .category-header {
  background: var(--yellow);
}

.c-notice {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05), 0px 0px 12px rgba(0, 0, 0, 0.1);
}

.c-notice-content {
  max-width: 85ch;
  margin: 0 auto;
}
.c-notice-content h1,
.c-notice-content h2,
.c-notice-content h3 {
  margin-bottom: var(--s-3);
  font-size: var(--f2);
  font-family: var(--font-serif);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 768px) {
  .radios-in-columns {
    columns: 2;
  }
}

span.radio,
span.checkbox,
.input.boolean {
  display: flex;
  line-height: 1.3;
  margin-bottom: 5px;
}
span.radio label,
span.checkbox label,
.input.boolean label {
  max-width: 85%;
  vertical-align: top;
}

@supports (appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none) {
  [type=checkbox],
[type=radio] {
    --active: var(--primary-color);
    --active-inner: #fff;
    --focus: 2px rgba(237, 28, 36, 0.3);
    --border: var(--gray);
    --border-hover: var(--color-dark);
    --background: #fff;
    --disabled: var(--near-white);
    --disabled-inner: var(--near-white);
    appearance: none;
    background: var(--b, var(--background));
    border: 1px solid var(--bc, var(--border));
    cursor: pointer;
    display: block;
    height: 21px;
    margin: 0;
    outline: none;
    position: relative;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    width: 21px;
  }
  [type=checkbox]::after,
[type=radio]::after {
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  [type=checkbox]:checked,
[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }
  [type=checkbox]:disabled,
[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  [type=checkbox]:disabled:checked,
[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  [type=checkbox]:disabled + label,
[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  [type=checkbox]:hover:not(:checked):not(:disabled),
[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  [type=checkbox]:focus,
[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  [type=checkbox] + label,
[type=radio] + label {
    cursor: pointer;
    display: block;
    font-weight: normal;
    line-height: 20px;
    margin-left: 10px;
  }

  [type=checkbox]::after {
    border: 2px solid var(--active-inner);
    border-left: 0;
    border-top: 0;
    height: 9px;
    left: 7px;
    opacity: var(--o, 0);
    top: 4px;
    transform: rotate(var(--r, 20deg));
    width: 5px;
  }
  [type=checkbox]:checked {
    --o: 1;
    --r: 43deg;
  }

  [type=radio] {
    border-radius: 50%;
  }
  [type=radio]::after {
    background: var(--active-inner);
    border-radius: 50%;
    height: 19px;
    opacity: var(--o, 0);
    transform: scale(var(--s, 0.7));
    width: 19px;
  }
  [type=radio]:checked {
    --o: 1;
    --s: 0.5;
  }
}
section.clovers {
  columns: 1;
  column-gap: var(--s1);
}
@media (min-width: 768px) {
  section.clovers {
    columns: 2;
  }
}
@media (min-width: 1025px) {
  section.clovers {
    columns: 3;
  }
}
section.clovers .clover {
  display: inline-block;
  break-inside: avoid;
}

.cms-text h2,
.cms-text h3,
.cms-text h4,
.cms-text h5,
.cms-text h6 {
  font-size: var(--f0);
  margin-bottom: 0;
}
.cms-text h2 + *,
.cms-text h3 + *,
.cms-text h4 + *,
.cms-text h5 + *,
.cms-text h6 + * {
  margin-top: var(--s-4);
}
.cms-text ul,
.cms-text ol {
  margin-left: var(--s2);
}
.cms-text a:not([class]) {
  text-decoration: underline;
}
.cms-text a:not([class]):hover, .cms-text a:not([class]):active {
  color: var(--color-dark);
}

.cover-image {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09), 0 2px 2px rgba(0, 0, 0, 0.09), 0 4px 4px rgba(0, 0, 0, 0.09), 0 6px 8px rgba(0, 0, 0, 0.09), 0 8px 16px rgba(0, 0, 0, 0.09);
  transition: box-shadow 0.2s;
}
a:hover .cover-image, .cover-image:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}

.png-shadow {
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.2));
}

.no-cover-image {
  margin: 0 0 var(--s-2) 0;
  padding: 7rem 0;
  text-align: center;
  background-image: url(/~images/cover.png);
  background-size: contain;
  background-repeat: no-repeat;
  color: var(--primary-color);
}
@media (min-width: 351px) {
  .no-cover-image {
    background-size: cover;
  }
}

.first-cover {
  width: 150%;
  height: auto;
  z-index: 1;
}
.first-cover:hover {
  z-index: 3;
}

.latest-cover {
  width: 130%;
  height: auto;
  margin-top: 30%;
  margin-left: -25%;
  z-index: 2;
}

.box.details {
  --space: 0;
  max-width: var(--measure);
}
@media (min-width: 30em) {
  .box.details {
    --space: var(--s0);
    background-color: var(--near-white);
  }
}

.dialog-container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.dialog-container[aria-hidden=true] {
  display: none;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(237, 29, 37, 0.32);
  animation: fade-in 200ms both;
}

.dialog-content {
  background-color: var(--color-light);
  margin: auto;
  z-index: 2;
  position: relative;
  animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
  max-width: 90%;
  width: 430px;
  max-height: 90vh;
}
.dialog-content h1,
.dialog-content h2,
.dialog-content h3,
.dialog-content h4,
.dialog-content h5,
.dialog-content h6 {
  margin: 0;
  font-size: var(--f1) !important;
}
.dialog-content label {
  margin-bottom: var(--s-2);
}
.dialog-content .btn {
  width: 100%;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes slide-up {
  from {
    transform: translateY(10%);
  }
}
.donations-amounts span.radio {
  display: inline-block;
  padding: 0;
  position: relative;
}
.donations-amounts [type=radio] {
  appearance: none;
  background: none;
  border: 2px solid;
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0.00001;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}
.donations-amounts span.radio label,
.donations-amounts span.radio input[type=number] {
  background-color: var(--color-light);
  border: 1px solid var(--gray);
  color: var(--color-dark);
  font-weight: 600 !important;
  margin: 0;
  padding: var(--s-1);
  text-align: center !important;
  width: 100%;
}
.donations-amounts [type=radio]:hover ~ label,
.donations-amounts label:hover {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-light);
}
.donations-amounts [type=radio]:checked + label {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--color-light);
}
.donations-amounts input[type=number] {
  line-height: 1.25;
  padding: var(--s-2) var(--s-2) calc(var(--s-2) - 1px) var(--s-2) !important;
}

.article-figure figcaption {
  max-width: 90ch;
  padding-right: var(--s1);
  padding-top: var(--s-4);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--f-2);
  line-height: var(--line-height-small);
  color: var(--mid-gray);
}
.article-figure .figure-credits {
  max-width: 90ch;
  padding-top: var(--s-4);
  padding-right: var(--s1);
  display: block;
  font-size: 0.75rem;
  color: var(--gray);
}
.article-figure .figure-copy {
  font-size: 0.7rem;
}

.figure-links {
  --breakpoint: 30rem;
  --min-size: 30%;
  --space: var(--s0);
  float: left;
  width: calc((var(--breakpoint) - 100%) * 9999);
  min-width: var(--min-size);
  max-width: 100%;
  margin-bottom: var(--space);
  margin-right: var(--space);
}

.figure-rechts {
  --breakpoint: 30rem;
  --min-size: 30%;
  --space: var(--s0);
  float: right;
  width: calc((var(--breakpoint) - 100%) * 9999);
  min-width: var(--min-size);
  max-width: 100%;
  margin-bottom: var(--space);
  margin-left: var(--space);
}

body.filmclub {
  background: var(--color-dark);
}
body.filmclub #main-header a,
body.filmclub #main-header button {
  color: var(--color-light);
}
body.filmclub #main-header a:hover,
body.filmclub #main-header button:hover {
  color: var(--light-gray);
}
body.filmclub #main-header a:hover .navmenu-box-inner,
body.filmclub #main-header a:hover .navmenu-box-inner::before,
body.filmclub #main-header a:hover .navmenu-box-inner::after,
body.filmclub #main-header button:hover .navmenu-box-inner,
body.filmclub #main-header button:hover .navmenu-box-inner::before,
body.filmclub #main-header button:hover .navmenu-box-inner::after {
  background-color: var(--light-gray);
}
body.filmclub #main-header .navmenu-box-inner,
body.filmclub #main-header .navmenu-box-inner::before,
body.filmclub #main-header .navmenu-box-inner::after {
  background-color: var(--color-light);
}
body.filmclub #main-header ul {
  border-color: var(--color-light);
}
body.filmclub #main-header .logo svg path,
body.filmclub #main-header .logo svg rect {
  fill: var(--color-light);
}

#main-footer {
  background-color: var(--primary-color-light);
  margin-top: auto;
}

.footer-bg-white #main-footer {
  background-color: var(--color-light);
}

.hide-footer #main-footer {
  display: none;
}

.footer-no-margin #main-footer {
  margin-top: 0;
}

input,
select,
textarea {
  line-height: 1.25;
}

label {
  cursor: pointer;
  display: block;
  font-size: var(--f0);
  font-weight: 500;
  line-height: var(--line-height-small);
  margin-bottom: var(--s-3);
}
label abbr[title] {
  color: var(--gray);
  font-weight: 400;
  text-decoration: none;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  display: block;
  font-family: var(--sans-font);
  font-weight: normal;
}

[type=color],
[type=email],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
input:not([type]),
textarea {
  background-color: var(--color-light);
  border: 1px solid var(--gray);
  color: var(--color-dark);
  font-family: var(--sans-font);
  font-size: var(--f-1);
  font-weight: normal;
  max-width: 100%;
  padding: var(--s-2);
  transition: all 100ms linear;
  width: 100%;
}
[type=color]:placeholder,
[type=email]:placeholder,
[type=number]:placeholder,
[type=password]:placeholder,
[type=search]:placeholder,
[type=tel]:placeholder,
[type=text]:placeholder,
[type=url]:placeholder,
input:not([type]):placeholder,
textarea:placeholder {
  color: var(--gray);
}
[type=color]:focus,
[type=email]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=url]:focus,
input:not([type]):focus,
textarea:focus {
  border-color: var(--color-dark);
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.25);
  outline: none;
}
[type=color]:disabled, [type=color]:read-only,
[type=email]:disabled,
[type=email]:read-only,
[type=number]:disabled,
[type=number]:read-only,
[type=password]:disabled,
[type=password]:read-only,
[type=search]:disabled,
[type=search]:read-only,
[type=tel]:disabled,
[type=tel]:read-only,
[type=text]:disabled,
[type=text]:read-only,
[type=url]:disabled,
[type=url]:read-only,
input:not([type]):disabled,
input:not([type]):read-only,
textarea:disabled,
textarea:read-only {
  background-color: var(--near-white);
  cursor: not-allowed;
}
[type=color]:disabled:hover, [type=color]:disabled:focus, [type=color]:read-only:hover, [type=color]:read-only:focus,
[type=email]:disabled:hover,
[type=email]:disabled:focus,
[type=email]:read-only:hover,
[type=email]:read-only:focus,
[type=number]:disabled:hover,
[type=number]:disabled:focus,
[type=number]:read-only:hover,
[type=number]:read-only:focus,
[type=password]:disabled:hover,
[type=password]:disabled:focus,
[type=password]:read-only:hover,
[type=password]:read-only:focus,
[type=search]:disabled:hover,
[type=search]:disabled:focus,
[type=search]:read-only:hover,
[type=search]:read-only:focus,
[type=tel]:disabled:hover,
[type=tel]:disabled:focus,
[type=tel]:read-only:hover,
[type=tel]:read-only:focus,
[type=text]:disabled:hover,
[type=text]:disabled:focus,
[type=text]:read-only:hover,
[type=text]:read-only:focus,
[type=url]:disabled:hover,
[type=url]:disabled:focus,
[type=url]:read-only:hover,
[type=url]:read-only:focus,
input:not([type]):disabled:hover,
input:not([type]):disabled:focus,
input:not([type]):read-only:hover,
input:not([type]):read-only:focus,
textarea:disabled:hover,
textarea:disabled:focus,
textarea:read-only:hover,
textarea:read-only:focus {
  border-color: var(--primary-color-light);
  box-shadow: none;
}

.unstyled-input {
  border: none;
  display: inline-block;
  max-width: 73ch;
  padding: 0;
  width: 100%;
}
.unstyled-input:focus {
  box-shadow: none;
}

textarea {
  resize: vertical;
}

[type=search] {
  appearance: none;
}

.small-input {
  padding: var(--s-4);
}
.small-input:focus {
  box-shadow: none;
}

[type=file] {
  margin-bottom: var(--s-3);
  width: 100%;
}

select {
  max-width: 100%;
  width: auto;
}

.hint {
  color: var(--gray);
  display: block;
  font-size: var(--f-1);
  font-weight: normal;
  line-height: var(--line-height-small);
  margin: 0 0 var(--s-2) 0;
}

.inline-hint {
  display: inline-block;
  margin-top: 0;
}

p.error,
div.error {
  color: var(--error-color);
  margin-bottom: var(--s0);
}

span.error {
  display: block;
  font-size: var(--f-1);
  line-height: var(--line-height-small);
  margin-bottom: var(--s-2);
}

.field-with-errors input,
.field-with-errors textarea,
.field-with-errors select {
  border-color: var(--error-color);
  border-width: 2px;
}
.field-with-errors input:hover,
.field-with-errors textarea:hover,
.field-with-errors select:hover {
  border-color: var(--error-color);
}
.field-with-errors input:focus,
.field-with-errors textarea:focus {
  border-color: var(--error-color);
}
.field-with-errors span.error {
  color: var(--error-color);
  display: block;
  margin-top: 2px !important;
}

.or {
  font-size: var(--f-1);
  padding-left: var(--s-1);
}

a[data-action="password#toggle"] {
  border-radius: 2px;
  bottom: 0.7rem;
  position: absolute;
  right: 0.5rem;
}

#customer_date_of_birth {
  width: 15ch;
}

.order_address_kind span.radio {
  float: left;
}
.order_address_kind span.radio:first-of-type {
  margin-right: var(--s0);
}

.order_specify_shipping_address label {
  font-weight: 500;
}

@media (max-width: 767px) {
  .name-fields > *,
.street-fields > *,
.postcode-city-fields > *,
.postcode-number-fields > *,
.street-city-fields > *,
.city-country-fields > * {
    margin-top: 0;
    margin-bottom: 0;
  }
  .name-fields > * + *,
.street-fields > * + *,
.postcode-city-fields > * + *,
.postcode-number-fields > * + *,
.street-city-fields > * + *,
.city-country-fields > * + * {
    margin-top: var(--s1);
  }
}
@media (min-width: 768px) {
  .name-fields,
.street-fields,
.postcode-city-fields,
.postcode-number-fields,
.street-city-fields,
.city-country-fields {
    --gap: var(--s1);
    display: flex;
    margin-left: calc(-1 * var(--gap));
    width: calc(100% + var(--gap));
  }
  .name-fields > div,
.street-fields > div,
.postcode-city-fields > div,
.postcode-number-fields > div,
.street-city-fields > div,
.city-country-fields > div {
    flex: 1 1 auto;
    margin-left: var(--gap);
  }
}
#main-header {
  margin-bottom: var(--s1);
  margin-left: var(--s-1);
  margin-right: var(--s-1);
}
@media (min-width: 321px) {
  #main-header {
    margin-left: var(--s0);
    margin-right: var(--s0);
  }
}
@media (min-width: 768px) {
  #main-header {
    margin-bottom: var(--s1);
  }
}
@media (min-width: 1024px) {
  #main-header {
    margin-bottom: var(--s2);
  }
}
#main-header .menu {
  border-bottom-width: 6px;
  border-bottom-color: var(--red);
}
#main-header .menu:first-child {
  padding-right: var(--s-1);
}
#main-header .menu li {
  padding-right: var(--s-1);
}
#main-header .menu li:last-child {
  padding-right: 0;
}
@media (max-width: 768px) {
  #main-header .menu {
    justify-content: flex-end;
    padding-right: 0 !important;
  }
  #main-header .menu .navmenu-btn-container {
    padding-right: 0;
  }
}
@media (min-width: 769px) {
  #main-header .menu {
    border-bottom-width: 9px;
  }
}
#main-header a,
#main-header button {
  color: var(--red);
  text-decoration: none;
}
#main-header a:hover,
#main-header button:hover {
  color: var(--color-dark);
}
#main-header a:hover .navmenu-box-inner,
#main-header a:hover .navmenu-box-inner::before,
#main-header a:hover .navmenu-box-inner::after,
#main-header button:hover .navmenu-box-inner,
#main-header button:hover .navmenu-box-inner::before,
#main-header button:hover .navmenu-box-inner::after {
  background-color: var(--color-dark);
}
#main-header button:focus {
  box-shadow: none;
}

.navmenu-box {
  width: 22px;
  height: 17px;
  display: inline-block;
  position: relative;
}

.navmenu-box-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.navmenu-box-inner, .navmenu-box-inner::before, .navmenu-box-inner::after {
  width: 22px;
  height: 3px;
  border-radius: 3px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  background-color: var(--red);
}
.navmenu-box-inner::before, .navmenu-box-inner::after {
  content: "";
  display: block;
}
.navmenu-box-inner::before {
  top: -7px;
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.navmenu-box-inner::after {
  bottom: -7px;
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.nav-expanded .navmenu-box-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav-expanded .navmenu-box-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.nav-expanded .navmenu-box-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);
}

.header-container.nav-expanded {
  background-color: var(--near-white) !important;
}
.header-container.nav-expanded a,
.header-container.nav-expanded button {
  color: var(--red) !important;
}
.header-container.nav-expanded a:hover,
.header-container.nav-expanded button:hover {
  text-decoration: none !important;
  color: var(--color-dark) !important;
}
.header-container.nav-expanded a:hover .navmenu-box-inner,
.header-container.nav-expanded a:hover .navmenu-box-inner::before,
.header-container.nav-expanded a:hover .navmenu-box-inner::after,
.header-container.nav-expanded button:hover .navmenu-box-inner,
.header-container.nav-expanded button:hover .navmenu-box-inner::before,
.header-container.nav-expanded button:hover .navmenu-box-inner::after {
  background-color: var(--color-dark) !important;
}
.header-container.nav-expanded .navmenu-box-inner,
.header-container.nav-expanded .navmenu-box-inner::before,
.header-container.nav-expanded .navmenu-box-inner::after {
  background-color: var(--red) !important;
}
.header-container.nav-expanded ul {
  border-color: var(--red) !important;
}
.header-container.nav-expanded .logo svg path,
.header-container.nav-expanded .logo svg rect {
  fill: var(--red) !important;
}
.header-container.nav-expanded .expanded-nav a {
  color: var(--color-dark) !important;
  display: block !important;
}
.header-container.nav-expanded .expanded-nav a:hover {
  color: var(--red) !important;
}
.header-container.nav-expanded .expanded-nav a.nav-gift {
  color: var(--red) !important;
}
.header-container.nav-expanded .expanded-nav a.nav-gift:hover {
  text-decoration: underline !important;
}

.expanded-nav {
  position: absolute;
  z-index: 1;
  top: 75px;
  right: 50%;
  left: 50%;
  width: 100vw;
  margin: 0 -50vw;
  padding-bottom: var(--s1);
  background-color: var(--near-white);
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 4px 3px rgba(0, 0, 0, 0.2);
}
.expanded-nav .nav-sections {
  margin-bottom: var(--s-1);
}
.expanded-nav .nav-sections .nav-two-cols {
  display: flex;
}
.expanded-nav .nav-sections .nav-three-cols {
  display: none;
}
.expanded-nav .nav-sections li {
  padding-bottom: var(--s-2);
}
.expanded-nav .nav-feature {
  padding-top: var(--s1);
  border-top: 1px solid var(--moon-gray);
}
.expanded-nav .nav-edition {
  display: none;
}
.expanded-nav .nav-account li {
  padding-right: 0 !important;
}
.expanded-nav .nav-account li a {
  font-weight: 500 !important;
}
@media (min-width: 768px) {
  .expanded-nav .expanded-nav-container {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-column-gap: var(--s1);
    padding-top: var(--s-1);
  }
  .expanded-nav .nav-sections {
    grid-column: 1/span 15;
    margin-bottom: var(--s1);
    padding-bottom: var(--s0);
    border-bottom: 1px solid var(--moon-gray);
  }
  .expanded-nav .nav-sections .nav-two-cols {
    display: none;
  }
  .expanded-nav .nav-sections .nav-three-cols {
    display: flex;
  }
  .expanded-nav .nav-sections li {
    padding-bottom: var(--s-1);
  }
  .expanded-nav .nav-feature {
    padding-top: 0;
    grid-column: 1/span 7;
    border-right: 1px solid var(--moon-gray);
    border-top: 0;
  }
  .expanded-nav .nav-edition {
    display: block;
    grid-column: 8/span 8;
    column-count: 2;
    column-gap: var(--s-1);
  }
  .expanded-nav .nav-edition > * {
    break-inside: avoid;
  }
  .expanded-nav .nav-account {
    grid-column: 1/span 15;
  }
}
@media (min-width: 1151px) {
  .expanded-nav .expanded-nav-container {
    padding-top: var(--s2);
  }
  .expanded-nav .nav-sections {
    margin-bottom: 0;
    grid-column: 1/span 5;
    padding-bottom: 0;
    border-right: 1px solid var(--moon-gray);
    border-bottom: none;
  }
  .expanded-nav .nav-sections .nav-two-cols {
    display: flex;
  }
  .expanded-nav .nav-sections .nav-three-cols {
    display: none;
  }
  .expanded-nav .nav-feature {
    grid-column: 6/span 5;
    border-right: 1px solid var(--moon-gray);
  }
  .expanded-nav .nav-edition {
    grid-column: 11/span 5;
  }
}
@media (min-width: 1321px) {
  .expanded-nav .nav-sections {
    grid-column: 1/span 7;
  }
  .expanded-nav .nav-sections .nav-two-cols {
    display: none;
  }
  .expanded-nav .nav-sections .nav-three-cols {
    display: flex;
  }
  .expanded-nav .nav-feature {
    grid-column: 8/span 4;
  }
  .expanded-nav .nav-edition {
    grid-column: 12/span 4;
  }
}

body.home #main-header ul {
  border: none;
}

.logo {
  max-width: 100%;
}
.logo svg {
  width: 230px;
}
@media (max-width: 768px) {
  .logo svg {
    width: 150px;
  }
}

.hide-header #main-header {
  display: none;
}

@media (max-width: 1025px) {
  .store-count strong {
    font-size: var(--f0);
  }
}
.home-title {
  --f-min: 38;
  --f-max: 65;
  font-size: calc(var(--f-min) / 16 * 1rem + (var(--f-max) - var(--f-min)) * var(--fluid-bp));
}
@media (min-width: 768px) and (max-width: 1023px) {
  .home-title {
    margin-top: var(--s1);
  }
}

.home-navbar {
  top: 0;
  left: 0;
  box-shadow: 0 0 transparent, 0 0 transparent, 1px 3px 6px rgba(0, 0, 0, 0.08);
  z-index: 9999;
}

.first-section.first-section--intersecting .home-navbar {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 250ms, opacity 250ms linear;
}

.first-section:not(.first-section--intersecting) .home-navbar {
  visibility: visible;
  opacity: 1;
  transition: opacity 150ms linear;
}

.home-intro {
  --basis: 700px;
  --space: var(--s2);
}
@media (min-width: 1024px) {
  .home-intro {
    --basis: 60%;
    --space: 0;
  }
  .home-intro figure {
    margin-top: -280px;
  }
}

.home-offer {
  --basis: 700px;
  --space: 0;
}
@media (min-width: 1024px) {
  .home-offer {
    --basis: 50%;
  }
  .home-offer article {
    --min: 70vh;
    display: flex;
    flex-direction: column;
    min-height: var(--min);
  }
  .home-offer article > .centered {
    margin-top: auto;
    margin-bottom: auto;
    padding: var(--s5);
  }
  .home-offer figure {
    margin-top: -50px;
  }
  .home-offer figure img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 1023px) {
  .home-articles {
    --gutter: var(--s1);
    padding: var(--gutter) 0;
    display: grid;
    grid-gap: var(--gutter) 0;
    grid-template-columns: var(--gutter) 1fr var(--gutter);
    align-content: start;
  }
  .home-articles .articles-grid {
    grid-column: 1/-1;
    display: grid;
    grid-gap: calc(var(--gutter) / 2);
    grid-template-columns: 10px repeat(6, calc(80% - var(--gutter) * 2)) 10px;
    grid-template-rows: minmax(150px, 1fr);
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .home-articles .articles-grid::-webkit-scrollbar {
    display: none;
  }
  .home-articles .articles-grid:before, .home-articles .articles-grid:after {
    content: "";
    width: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .home-articles .articles-grid {
    grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
  }
}
@media (min-width: 1024px) {
  .home-articles {
    max-width: var(--main-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--1);
    padding-right: var(--1);
  }
  .home-articles .articles-grid {
    display: grid;
    align-content: start;
    grid-gap: var(--s3);
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  }
}

.home-offer-repeat {
  --basis: 800px;
  --space: var(--s1);
  padding: var(--s1) 0 var(--s2);
  text-align: center;
}
@media (min-width: 1024px) {
  .home-offer-repeat {
    --basis: 47%;
    --space: 0;
    padding: var(--s4) 0;
    text-align: left;
  }
  .home-offer-repeat article {
    margin-left: var(--s3);
  }
}

.home-newsletter-preview {
  height: 430px;
  max-width: 400px;
  padding: var(--s0) var(--s-2) 2px;
  background: var(--color-light);
  border: 5px solid var(--gray);
  border-bottom: 0;
  border-radius: 30px 30px 0px 0px;
}
.home-newsletter-preview iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .home-newsletter-form {
    margin-top: var(--s2);
    text-align: center;
  }

  .home-newsletter-preview {
    margin: 0 auto;
  }
}
.home footer {
  position: relative;
  z-index: 9999;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 18px rgba(0, 0, 0, 0.2);
}

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

.icon svg {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  line-height: 1;
  height: 1em;
  width: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

.icon-fw svg {
  text-align: center;
  width: 1.25em;
}

.icon-s-1 svg {
  width: 0.85em;
  height: 0.85em;
}

.icon-s-2 svg {
  width: 0.7em;
  height: 0.7em;
}

.icon-s2 {
  padding: 0 0.1em;
}
.icon-s2 svg {
  width: 1.25em;
  height: 1.25em;
}

.icon-s3 svg {
  width: 1.5em;
  height: 1.5em;
}

.icon-s4 svg {
  width: 2em;
  height: 2em;
}

.icon-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0;
}
.icon-ul > li {
  position: relative;
}

.icon-li svg {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
  font-size: 0.9em;
  margin-top: 2px;
}

.icon-spin svg {
  animation: icon-spin 2s infinite linear;
}

.icon-pulse svg {
  animation: icon-spin 1s infinite steps(8);
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cover-layout {
  margin-bottom: var(--s2);
}
.cover-layout .grid-article {
  display: none;
}
.cover-layout .cover-story {
  margin-top: var(--s0);
}
@media (min-width: 701px) {
  .cover-layout {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-column-gap: var(--s0);
    margin-bottom: var(--s3);
  }
  .cover-layout .grid-article {
    display: block;
  }
  .cover-layout .grid-article figure {
    display: none;
  }
  .cover-layout .grid-article h1 {
    font-size: var(--f5);
  }
  .cover-layout .cover-story {
    margin-top: var(--s3);
    grid-column: 1/span 7;
  }
  .cover-layout .issue-cover {
    grid-column: 8/span 8;
  }
}
@media (min-width: 961px) {
  .cover-layout {
    grid-column-gap: var(--s2);
  }
  .cover-layout .cover-story {
    margin-top: var(--s4);
    grid-column: 1/span 6;
  }
  .cover-layout .issue-cover {
    grid-column: 8/span 7;
  }
}

.issue-contents time {
  display: none;
}

.toc-section div.grid {
  --min: 18rem;
}
@media (min-width: 900px) {
  .toc-section {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-column-gap: var(--s2);
  }
  .toc-section h2 {
    grid-column: 1/span 15;
  }
  .toc-section div.grid {
    grid-column: 4/span 12;
  }
}
@media (min-width: 1024px) {
  .toc-section div.grid {
    --min: 20rem;
    grid-column: 4/span 11;
  }
}

.skip-link {
  display: inline-block;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.skip-link:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.1em;
  transition: color 0.15s ease-in;
}
a:hover, a:active {
  text-decoration: underline;
  text-decoration-thickness: max(2px, 0.09375rem, 0.08em);
}
h1 a, h2 a, h3 a, h4 a {
  color: var(--color-dark);
}

a:focus {
  outline: 1px dotted currentColor;
}

.underline {
  text-decoration: underline;
}

.hover-no-underline:hover,
.hover-no-underline:active {
  text-decoration: none;
}

.hover-primary:hover,
.hover-primary:active {
  color: var(--primary-color);
}

.primary-link {
  color: var(--primary-color);
}

.hover-h1-underline:hover h1,
.hover-h1-underline:active h1 {
  text-decoration: underline;
  text-decoration-thickness: max(2px, 0.09375rem, 0.08em);
}

.hover-h1-primary:hover h1,
.hover-h1-primary:active h1 {
  color: var(--primary-color);
}

.marketing-content h1,
.marketing-content h2,
.marketing-content h3,
.marketing-content h4,
.marketing-content h5,
.marketing-content h6 {
  font-family: var(--font-serif);
  font-size: var(--f4);
  font-weight: 600;
  line-height: var(--line-height-title);
}
.marketing-content p,
.marketing-content li {
  max-width: 85ch;
}

.movie-teaser {
  background-size: cover;
}

.overlay-shadow {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.movie iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.newsletters.show {
  overscroll-behavior: contain;
}

.newsletter-subscription > div {
  align-items: center;
}

.newsletter-preview {
  position: relative;
  width: 100%;
  height: calc(100vh - 170px);
  min-height: 500px;
  max-height: 750px;
  margin-top: calc(-1 * var(--s1));
  padding: var(--s-1) var(--s-2) var(--s0);
  background: var(--color-light);
  border: 20px solid #444;
  border-radius: 30px;
}
.newsletter-preview iframe {
  width: 100%;
  height: 100%;
}

.scroll-help {
  position: absolute;
  right: -140px;
  top: 50%;
  transform: rotate(90deg);
  color: var(--red);
}
.scroll-help .icon svg {
  margin-bottom: -2px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.newsletter-animation iframe {
  animation-duration: 600ms;
  animation-fill-mode: both;
  animation-name: fadeIn;
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-animation {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}
.pagination {
  font-family: var(--font-sans);
}
.pagination .page {
  padding-right: var(--s-2);
}
.pagination a,
.pagination a:visited {
  color: var(--primary-color);
}

.panel {
  --space: var(--s-1);
  padding: var(--s0) 0;
  font-size: var(--f-1);
  line-height: var(--line-height-small);
  color: var(--primary-color);
}
.panel > * {
  margin-top: 0;
  margin-bottom: 0;
}
.panel > * + * {
  margin-top: var(--space);
}
.panel a {
  text-decoration: underline;
}
.panel .article-in-article {
  padding-top: var(--s-3);
}
.panel .article-in-article a {
  text-decoration: none;
}
@media (min-width: 321px) {
  .panel {
    padding: var(--s0);
  }
}

.panel.grijs {
  margin-bottom: var(--s1);
  background: var(--near-white);
  color: var(--color-dark);
}

.panel.rood,
.panel.blauw {
  margin-bottom: var(--s1);
  background: var(--primary-color);
  color: var(--color-light);
}
.panel.rood a,
.panel.blauw a {
  color: var(--color-light);
}

.panel.donker {
  margin-bottom: var(--s1);
  background: var(--color-dark);
  color: var(--color-light);
}
.panel.donker a {
  color: var(--color-light);
}
.panel.donker .article-in-article time {
  color: var(--light-gray);
}

.panel.licht {
  margin-bottom: var(--s1);
  background: var(--primary-color-light);
  color: var(--color-dark);
}
.panel.licht a {
  color: var(--color-dark);
}

.panel.poezie {
  padding: var(--s0) var(--s1);
  color: var(--secondary-color);
  font-weight: 600;
  background: var(--color-light);
}

.podcast-logo img {
  max-width: 9rem;
}

.episodes.show .podcast-logo img {
  max-width: 7rem;
}

.popular-top-10 {
  --basis: 400px;
}
@media (max-width: 999px) {
  .popular-top-10 ul + ul {
    margin-top: calc(-1 * var(--s-1));
  }
}
@media (min-width: 1000px) {
  .popular-top-10 {
    --space: var(--s1);
    --basis: calc(50% - var(--s1));
  }
}

.turbo-progress-bar {
  height: 3px;
  background-color: var(--primary-color);
}

.registration-page {
  --basis: 700px;
  --space: var(--s2);
  margin-top: var(--s1);
}
.registration-page label {
  margin-bottom: var(--s-2);
}
.registration-page abbr {
  display: none;
}
.registration-page figure {
  display: none;
}
@media (min-width: 1024px) {
  .registration-page {
    --basis: 45%;
    --space: 0;
    margin-top: 0;
  }
  .registration-page .registration-content {
    --max-width: 750px;
    max-width: var(--max-width);
    padding-right: var(--s2);
  }
  .registration-page form {
    max-width: 600px;
  }
  .registration-page figure {
    display: block;
  }
}

.registration-container {
  background-color: rgba(237, 29, 37, 0.32);
}

.registration-block {
  max-width: 100%;
  width: 500px;
}
.registration-block h1,
.registration-block h2,
.registration-block h3,
.registration-block h4,
.registration-block h5,
.registration-block h6 {
  text-align: center;
}
.registration-block .btn {
  width: 100%;
  text-align: center;
}

a.registration-signin {
  color: var(--color-dark);
}
a.registration-signin strong {
  color: var(--primary-color);
}

.registrationbar a {
  color: var(--red);
  text-decoration: underline;
  font-weight: 600;
}
.registrationbar a:hover {
  color: var(--color-dark);
}

.ribbon-container {
  max-height: 95vh;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow-y: auto;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 18px rgba(0, 0, 0, 0.2);
  animation-delay: 0s;
  animation-duration: 150ms;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}

.ribbon-delayed {
  animation-delay: 1.5s;
}

.ribbon-lightpink,
.closed-block-lightpink,
.ribbon-pink,
.closed-block-pink {
  background-color: var(--primary-color-light);
}
.ribbon-lightpink .svg-ul ul li:before,
.closed-block-lightpink .svg-ul ul li:before,
.ribbon-pink .svg-ul ul li:before,
.closed-block-pink .svg-ul ul li:before {
  filter: brightness(0) saturate(100%);
}
.ribbon-lightpink .closed-block-signin-container,
.closed-block-lightpink .closed-block-signin-container,
.ribbon-pink .closed-block-signin-container,
.closed-block-pink .closed-block-signin-container {
  border-color: var(--color-dark);
}
.ribbon-lightpink a.ribbon-signin,
.ribbon-lightpink a.closed-block-signin,
.closed-block-lightpink a.ribbon-signin,
.closed-block-lightpink a.closed-block-signin,
.ribbon-pink a.ribbon-signin,
.ribbon-pink a.closed-block-signin,
.closed-block-pink a.ribbon-signin,
.closed-block-pink a.closed-block-signin {
  color: var(--color-dark);
}
.ribbon-lightpink a.ribbon-signin strong,
.ribbon-lightpink a.closed-block-signin strong,
.closed-block-lightpink a.ribbon-signin strong,
.closed-block-lightpink a.closed-block-signin strong,
.ribbon-pink a.ribbon-signin strong,
.ribbon-pink a.closed-block-signin strong,
.closed-block-pink a.ribbon-signin strong,
.closed-block-pink a.closed-block-signin strong {
  color: var(--primary-color);
}
.ribbon-lightpink a.primary-link:hover,
.closed-block-lightpink a.primary-link:hover,
.ribbon-pink a.primary-link:hover,
.closed-block-pink a.primary-link:hover {
  color: var(--color-dark);
}
.ribbon-lightpink .ribbon-collapse,
.closed-block-lightpink .ribbon-collapse,
.ribbon-pink .ribbon-collapse,
.closed-block-pink .ribbon-collapse {
  color: var(--mid-gray);
}
.ribbon-lightpink .ribbon-collapse:hover,
.closed-block-lightpink .ribbon-collapse:hover,
.ribbon-pink .ribbon-collapse:hover,
.closed-block-pink .ribbon-collapse:hover {
  color: var(--color-dark);
}

.ribbon-pink,
.closed-block-pink {
  background: var(--pink);
}

.ribbon-black .svg-ul ul li:before,
.closed-block-black .svg-ul ul li:before,
.ribbon-red .svg-ul ul li:before,
closed-block-red .svg-ul ul li:before {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(23%) hue-rotate(76deg) brightness(106%) contrast(106%);
}
.ribbon-black .closed-block-signin-container,
.closed-block-black .closed-block-signin-container,
.ribbon-red .closed-block-signin-container,
closed-block-red .closed-block-signin-container {
  border-color: var(--color-light);
}

.ribbon-black,
.closed-block-black {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.ribbon-black a.btn:hover,
.closed-block-black a.btn:hover {
  background-color: var(--color-light);
  color: var(--primary-color);
}
.ribbon-black a.ribbon-signin,
.ribbon-black a.closed-block-signin,
.closed-block-black a.ribbon-signin,
.closed-block-black a.closed-block-signin {
  color: var(--color-light);
}
.ribbon-black a.ribbon-signin strong,
.ribbon-black a.closed-block-signin strong,
.closed-block-black a.ribbon-signin strong,
.closed-block-black a.closed-block-signin strong {
  color: var(--color-light);
}
.ribbon-black a.primary-link,
.closed-block-black a.primary-link {
  color: var(--color-light);
}
.ribbon-black a.primary-link:hover,
.closed-block-black a.primary-link:hover {
  color: var(--primary-color);
}
.ribbon-black .ribbon-collapse,
.closed-block-black .ribbon-collapse {
  color: var(--moon-gray);
}
.ribbon-black .ribbon-collapse:hover,
.closed-block-black .ribbon-collapse:hover {
  color: var(--color-light);
}

.ribbon-red,
.closed-block-red {
  background-color: var(--primary-color);
  color: var(--color-light);
}
.ribbon-red a.btn,
.closed-block-red a.btn {
  background-color: var(--color-dark);
}
.ribbon-red a.btn:hover,
.closed-block-red a.btn:hover {
  background-color: var(--color-light);
  color: var(--primary-color);
}
.ribbon-red a.ribbon-signin,
.ribbon-red a.closed-block-signin,
.closed-block-red a.ribbon-signin,
.closed-block-red a.closed-block-signin {
  color: var(--color-light);
}
.ribbon-red a.ribbon-signin strong,
.ribbon-red a.closed-block-signin strong,
.closed-block-red a.ribbon-signin strong,
.closed-block-red a.closed-block-signin strong {
  color: var(--color-light);
}
.ribbon-red a.primary-link,
.closed-block-red a.primary-link {
  color: var(--color-light);
}
.ribbon-red a.primary-link:hover,
.closed-block-red a.primary-link:hover {
  color: var(--color-dark);
}
.ribbon-red .ribbon-collapse,
.closed-block-red .ribbon-collapse {
  color: var(--light-gray);
}
.ribbon-red .ribbon-collapse:hover,
.closed-block-red .ribbon-collapse:hover {
  color: var(--color-light);
}

.ribbon-collapsed a {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 600;
}
.ribbon-collapsed a:hover {
  color: var(--color-dark);
}
.ribbon-collapsed.ribbon-red a {
  color: var(--color-light);
}
.ribbon-collapsed.ribbon-red a:hover {
  color: var(--color-dark);
}
.ribbon-collapsed p {
  text-align: left;
  max-width: 90%;
}
@media (min-width: 851px) {
  .ribbon-collapsed p {
    text-align: center;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.river {
  list-style-type: none;
}
.river li {
  padding: var(--s0) 0;
  border-top: 1px solid var(--light-gray);
}
.river li:first-child {
  border-top: none;
}
.river article {
  --basis: 20rem;
}

.article-in-article {
  --basis: 15rem;
  --space: var(--s0);
}
.article-in-article h2 {
  font-size: var(--f-1);
}

.popular-river {
  list-style-type: none;
}
.popular-river li {
  padding: var(--s0) 0;
  border-top: 1px solid var(--light-gray);
}

/**
 * tom-select.css (v2.0.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}

.plugin-clear_button .ts-control {
  padding-right: calc(1em + (3 * 6px)) !important;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 8px;
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.single .clear-button {
  right: calc(8px - 6px + 2rem);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #777;
  background: #ebebeb;
  border-radius: 0px 0px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #000;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #777;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #777;
  border-width: 0 0 1px 0;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-left: 1px solid #d0d0d0;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color: white;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #000;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.15rem;
  font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-control {
  border: 1px solid #777;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 0px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc( 8px - 2px - 0) 8px calc( 8px - 2px - 3px - 0);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #000;
  border: 0 solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #000;
  border: 0 solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: #4d4d4d;
  background: white;
  border: 0 solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #ebeaea;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #777;
  background: #fff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 0px 0px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: #fecfcf;
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #000;
  background: #fff;
  cursor: default;
}
.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color: #fff0f0;
  color: #000;
}
.ts-dropdown .create:hover.create,
.ts-dropdown .option:hover.create,
.ts-dropdown .active.create {
  color: #000;
}
.ts-dropdown .create {
  color: rgba(0, 0, 0, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #777;
  border-color: #777 transparent #777 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 250px;
  overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.ts-wrapper.single .ts-control {
  padding-right: 2rem;
}
.ts-wrapper.single .ts-control:after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #777 transparent transparent transparent;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #777 transparent;
}
.ts-wrapper.single.input-active .ts-control, .ts-wrapper.single.input-active .ts-control input {
  cursor: text;
}

.round-btn {
  --size: 2.2rem;
}
.round-btn a {
  color: var(--color-dark);
}
.round-btn .icon {
  display: inline-block;
  margin: 0 5px;
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  font-size: calc(var(--size) / 2);
  line-height: var(--size);
  text-align: center;
  vertical-align: middle;
  transition-property: background;
  transition-duration: 0.15s;
  transition-timing-function: ease-in;
  background: var(--light-gray);
}
.round-btn .icon:first-child {
  margin-left: 0;
}
.round-btn:hover .icon {
  background: var(--color-dark);
}
.round-btn:hover a {
  color: var(--color-light);
}

.articlebar {
  top: 0;
  left: 0;
  box-shadow: 0 0 transparent, 0 0 transparent, 1px 3px 6px rgba(0, 0, 0, 0.08);
}

.article-header.article-header--intersecting .articlebar {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 250ms, opacity 250ms linear;
}

.article-header:not(.article-header--intersecting) .articlebar {
  visibility: visible;
  opacity: 1;
  transition: opacity 150ms linear;
}

body.closed-article .article-header:not(.article-header--intersecting) .articlebar {
  display: none;
}

@media (max-width: 879px) {
  .articlebar {
    display: none;
  }
}
.subscribe-intro {
  padding-bottom: 170px;
  margin-bottom: -140px;
}

.card {
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 16px rgba(17, 17, 26, 0.1), 0 8px 16px rgba(17, 17, 26, 0.05);
  transition: box-shadow 0.2s;
}

.card > div {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.card > div > :last-child {
  margin-top: auto;
  padding-top: var(--s0);
}

.card + .card {
  margin-top: var(--s1);
}

@supports (display: grid) {
  .cards > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    grid-column-gap: var(--s1);
    grid-row-gap: var(--s1);
  }
  @media (min-width: 371px) {
    .cards > ul {
      grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    }
  }

  .cards .card + .card {
    margin-top: 0;
  }
}
.best-value::before {
  position: absolute;
  top: -1.5rem;
  content: "meest gekozen";
  margin-left: calc(-1 * var(--s-1));
  padding: 2px var(--s-1);
  border-radius: 3px 3px 0 0;
  background: var(--red);
  color: var(--color-light);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

.expand-link {
  position: relative;
}

.expand-link a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.expand-link a:focus {
  outline: none;
  text-decoration: underline;
}

.expand-link:focus-within,
.expand-link:hover {
  box-shadow: 0px 8px 32px rgba(17, 17, 26, 0.1), 0px 8px 32px rgba(17, 17, 26, 0.1);
  outline: 2px solid transparent;
}

.expand-link:focus-within a:focus {
  text-decoration: none;
}

a.type-choice {
  display: block;
  text-decoration: none;
  color: var(--color-dark);
  box-shadow: 0px 4px 16px rgba(17, 17, 26, 0.1), 0px 8px 16px rgba(17, 17, 26, 0.05);
}
a.type-choice:hover, a.type-choice:active {
  background-color: var(--primary-color-light);
  box-shadow: 0px 8px 32px rgba(17, 17, 26, 0.1), 0px 8px 32px rgba(17, 17, 26, 0.1);
  outline: 2px solid transparent;
}

.svg-ul ul {
  margin-left: 1.6rem;
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 512 512' fill='%23ed1c24'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E");
}

.toggles [type=checkbox] {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.toggles [type=checkbox] + label {
  display: inline-block;
  position: relative;
  padding: 0.5em;
  padding-left: 4em;
}

.toggles [type=checkbox]:focus + label,
.toggles [type=checkbox]:hover + label {
  color: var(--primary-color);
}

.toggles [type=checkbox]:focus + label::before,
.toggles [type=checkbox]:hover + label::before {
  box-shadow: 0 0 0.25em var(--gray);
}

.toggles [type=checkbox]:focus + label::after,
.toggles [type=checkbox]:hover + label::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='rgba(0,0,0,.25)'/%3E%3C/svg%3E");
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center center;
}

.toggles [type=checkbox] + label::before,
.toggles [type=checkbox] + label::after {
  content: "";
  position: absolute;
  height: 1.5em;
  transition: all 0.25s ease;
}

.toggles [type=checkbox] + label::before {
  left: 0;
  top: 0.2em;
  width: 3em;
  border: 0.2em solid var(--moon-gray);
  background: var(--moon-gray);
  border-radius: 1.1em;
}

.toggles [type=checkbox] + label::after {
  left: 0;
  top: 0.2em;
  background-color: #fff;
  background-position: center center;
  border-radius: 50%;
  width: 1.5em;
  border: 0.15em solid var(--moon-gray);
}

.toggles [type=checkbox]:checked + label::after {
  left: 1.6em;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.toggles [type=checkbox]:checked + label::before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Windows High Contrast Mode Support */
@media screen and (-ms-high-contrast: active) {
  .toggles [type=checkbox]:focus + label::before,
.toggles [type=checkbox]:hover + label::before {
    outline: 1px dotted windowText;
    outline-offset: 0.25em;
  }

  .toggles [type=checkbox] + label::after {
    background-color: windowText;
  }

  .toggles [type=checkbox][disabled] + label::after {
    background-color: transparent;
  }
}
/* Reduced motion */
@media screen and (prefers-reduced-motion: reduce) {
  .toggles [type=checkbox] + label::before,
.toggles [type=checkbox] + label::after {
    transition: none;
  }
}
.river-article .category-thumb {
  text-align: center;
}
.river-article .category-thumb img {
  margin: auto;
  width: auto;
  height: 250px;
  max-height: 240px;
}

.book-thumb img {
  margin: auto;
  width: auto;
  height: auto;
  max-height: 180px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05), 3px 4px 6px rgba(0, 0, 0, 0.07), 5px 6px 12px rgba(0, 0, 0, 0.09), 7px 8px 32px rgba(0, 0, 0, 0.11);
}

.grid-article .frame {
  --n: 3;
  --d: 4;
}
.grid-article .category-thumb {
  --n: 3;
  --d: 4;
  padding-bottom: calc(var(--n) / var(--d) * 100%);
  position: relative;
}
.grid-article .category-thumb img {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.streamer {
  display: none;
  color: var(--primary-color);
  font-size: var(--f3);
  line-height: var(--line-height-small);
  margin: var(--s1) 0;
  padding: 0 var(--s2);
}
@media (min-width: 501px) {
  .streamer {
    display: block;
  }
}

main.column .streamer,
main.in-medias-res .streamer,
main.in-het-nieuws .streamer,
main.in-den-haag .streamer,
main.commentaar .streamer {
  display: none;
}

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

.wrapper {
  --max-width: var(--main-max-width);
  --padding: var(--s0);
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
}
@media (min-width: 321px) {
  .wrapper {
    --padding: var(--s1);
  }
}

.larger-wrapper {
  --max-width: var(--larger-max-width);
}

.smaller-wrapper {
  --max-width: var(--smaller-max-width);
}

.measured-wrapper {
  --max-width: var(--measure);
}

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }

  *,
*:before,
*:after,
p:first-letter,
div:first-letter,
blockquote:first-letter,
li:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: var(--f-2) !important;
  }

  @page {
    margin: 1.5cm;
  }
  a,
a:visited {
    text-decoration: none;
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
figure,
img {
    page-break-inside: avoid;
  }

  .article-figure {
    max-width: 70% !important;
    margin-left: auto;
    margin-right: auto;
  }

  p,
h1,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h1,
h2,
h3 {
    page-break-after: avoid;
  }

  *,
.measure,
.measure-s,
.measure-l {
    max-width: none !important;
  }

  #main-header {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--s0);
  }

  .logo {
    width: 4cm;
    height: auto !important;
  }
  .logo svg {
    max-width: 100%;
  }

  .article-header {
    margin-bottom: var(--s1) !important;
  }

  .article-header {
    font-size: 14px;
  }
  .article-header .f0 {
    font-size: 14px;
  }
  .article-header h1 {
    margin: 5px 0 !important;
    font-size: var(--f6);
  }

  figcaption {
    font-size: 13px !important;
  }

  .article-body {
    --space: var(--s-2);
    font-size: 15px;
    line-height: 22px;
  }

  .streamer {
    margin: var(--s0) 0;
    padding: 0 var(--s0);
    font-size: var(--f-1);
  }

  .menu,
.article-bar,
.article-header .sidebar .flex,
.article-aside-top,
.article-aside-middle,
.article-aside-magazine,
.article-header:not(.article-header--intersecting) .articlebar,
#popular,
#main-footer,
.position-fixed,
#ribbon {
    display: none !important;
  }

  .wrapper,
article,
.article-wrapper,
.article-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}