/* BagginCSS v0.1.0 */

/* EuropaType Font Software (Europa Collection) is owned by EuropaType. EuropaType */
/* Font Software is protected by copyright, use without permission is illegal. */
/* This CSS file using EuropaType Font Software has been generated and served by */
/* Gemeente Gouda and is authorised for use on www.exploregouda.nl only. */
/* © http://www.europatype.com */
@font-face {
  font-family: "Europa";
  src: url("/EuropaRegular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Europa";
  src: url("/EuropaRegularItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: fallback;
}

@font-face {
  font-family: "Europa";
  src: url("/EuropaBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Europa";
  src: url("/EuropaBoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: fallback;
}

:root {
  /* @link https://utopia.fyi/type/calculator?c=320,17,1.2,1240,19,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.7381rem, 0.7305rem + 0.038vw, 0.76rem);
  --step--1: clamp(0.8856rem, 0.8632rem + 0.112vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1.019rem + 0.2174vw, 1.1875rem);
  --step-1: clamp(1.275rem, 1.2022rem + 0.3641vw, 1.4844rem);
  --step-2: clamp(1.53rem, 1.4167rem + 0.5663vw, 1.8556rem);
  --step-3: clamp(1.8363rem, 1.6682rem + 0.8402vw, 2.3194rem);
  --step-4: clamp(2.2031rem, 1.961rem + 1.2109vw, 2.8994rem);
  --step-5: clamp(2.6438rem, 2.3029rem + 1.7043vw, 3.6238rem);
  --step-6: clamp(3.1725rem, 2.7003rem + 2.3609vw, 4.53rem);
  --step-7: clamp(3.8069rem, 3.1614rem + 3.2272vw, 5.6625rem);
  --step-8: clamp(4.5688rem, 3.6959rem + 4.3641vw, 7.0781rem);
  --step-9: clamp(5.4825rem, 4.3121rem + 5.8522vw, 8.8475rem);

  /* @link https://utopia.fyi/space/calculator?c=320,17,1.2,1240,19,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|11|14|18,&g=s,l,xl,12 */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.8125rem, 0.7908rem + 0.1087vw, 0.875rem);
  --space-s: clamp(1.0625rem, 1.019rem + 0.2174vw, 1.1875rem);
  --space-m: clamp(1.625rem, 1.5598rem + 0.3261vw, 1.8125rem);
  --space-l: clamp(2.125rem, 2.038rem + 0.4348vw, 2.375rem);
  --space-xl: clamp(3.1875rem, 3.0571rem + 0.6522vw, 3.5625rem);
  --space-2xl: clamp(4.25rem, 4.0761rem + 0.8696vw, 4.75rem);
  --space-3xl: clamp(6.375rem, 6.1141rem + 1.3043vw, 7.125rem);
  --space-4xl: clamp(8.5rem, 8.1522rem + 1.7391vw, 9.5rem);
  --space-5xl: clamp(11.6875rem, 11.2092rem + 2.3913vw, 13.0625rem);
  --space-6xl: clamp(14.875rem, 14.2663rem + 3.0435vw, 16.625rem);
  --space-7xl: clamp(19.125rem, 18.3424rem + 3.913vw, 21.375rem);
  --space-8xl: clamp(23.375rem, 22.4185rem + 4.7826vw, 26.125rem);

  --space-3xs-2xs: clamp(0.25rem, 0.1196rem + 0.6522vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4538rem + 0.5435vw, 0.875rem);
  --space-xs-s: clamp(0.8125rem, 0.6821rem + 0.6522vw, 1.1875rem);
  --space-s-m: clamp(1.0625rem, 0.8016rem + 1.3043vw, 1.8125rem);
  --space-m-l: clamp(1.625rem, 1.3641rem + 1.3043vw, 2.375rem);
  --space-l-xl: clamp(2.125rem, 1.625rem + 2.5vw, 3.5625rem);
  --space-xl-2xl: clamp(3.1875rem, 2.644rem + 2.7174vw, 4.75rem);
  --space-2xl-3xl: clamp(4.25rem, 3.25rem + 5vw, 7.125rem);
  --space-3xl-4xl: clamp(6.375rem, 5.288rem + 5.4348vw, 9.5rem);
  --space-4xl-5xl: clamp(8.5rem, 6.913rem + 7.9348vw, 13.0625rem);
  --space-5xl-6xl: clamp(11.6875rem, 9.9701rem + 8.587vw, 16.625rem);
  --space-6xl-7xl: clamp(14.875rem, 12.6141rem + 11.3043vw, 21.375rem);
  --space-7xl-8xl: clamp(19.125rem, 16.6902rem + 12.1739vw, 26.125rem);

  --red: #ea1017;
  --magenta: #6d247c;
  --lime-green: #7d9b22;
  --yellow: #f9b000;
  --pink: #d20080;
  --blue: #147da3;

  --grey-0: hsl(0, 0%, 13%);
  --grey-1: hsl(0, 0%, 23%);
  --grey-2: hsl(0, 0%, 32%);
  --grey-3: hsl(0, 0%, 38%);
  --grey-4: hsl(0, 0%, 49%);
  --grey-5: hsl(0, 0%, 62%);
  --grey-6: hsl(0, 0%, 69%);
  --grey-7: hsl(0, 0%, 78%);
  --grey-8: hsl(0, 0%, 85%);
  --grey-9: hsl(0, 0%, 93%);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-s: 0 3px 6px rgba(0, 0, 0, 0.1125), 0 2px 4px rgba(0, 0, 0, 0.09);
  --shadow-m: 0 10px 20px rgba(0, 0, 0, 0.1125), 0 3px 6px rgba(0, 0, 0, 0.075);
  --shadow-l:
    0 15px 25px rgba(0, 0, 0, 0.1125), 0 5px 10px rgba(0, 0, 0, 0.0375);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

  --geometric-humanist:
    "Europa", Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
    sans-serif;

  --measure: 42em;
  --viewport: 66rem;
}

.inner {
  box-sizing: content-box;
  max-inline-size: var(--viewport);
  padding: var(--space-s-m);
  margin-inline: auto;
}

.inner.narrow {
  max-inline-size: calc(var(--viewport) * 0.75);
}

.inner.wide {
  max-inline-size: calc(var(--viewport) * 1.25);
}

.inner.smaller {
  padding-block: var(--space-2xs);
}

.inner.small {
  padding-block: var(--space-s);
}

.inner.big {
  padding-block: var(--space-2xl);
}

.inner.bigger {
  padding-block: var(--space-4xl);
}

.inner.biggest {
  padding-block: var(--space-6xl);
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > *:first-child {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space-xs);
}

.stack.smallest > * + * {
  margin-block-start: 0;
}

.stack.smaller > * + * {
  margin-block-start: var(--space-3xs);
}

.stack.small > * + * {
  margin-block-start: var(--space-2xs);
}

.stack.two > * + * {
  margin-block-start: var(--space-m-l);
}

.stack.big > * + * {
  margin-block-start: var(--space-2xl);
}

.stack.big#preview > * + * {
  margin-block-start: var(--space-s-m);
}

.stack.large > * + * {
  margin-block-start: var(--space-m);
}

.stack.bigger > * + * {
  margin-block-start: var(--space-3xl);
}

.stack.biggest > * + * {
  margin-block-start: var(--space-4xl);
}

.box {
  padding: var(--space-m);
  outline: 1px transparent;
  color: var(--grey-0);
  background-color: white;
}

.box.small {
  padding: var(--space-xs);
}

.box * {
  color: inherit;
}

.box.invert {
  color: white;
  background-color: var(--grey-0);
}

.center {
  box-sizing: content-box;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.center.intrinsic {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 0;
}

.reel {
  display: flex;
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
}

.cluster.tight {
  gap: var(--space-2xs);
}

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

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

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

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

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.sidebar > :first-child {
  flex-basis: var(--space-8xl);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

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

.sidebar > :first-child {
  line-height: 1.5;
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  --threshold: 32rem;
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

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

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

.cover > * {
  margin-block: var(--space-m);
}

.cover > :first-child:not(h1) {
  margin-block-start: 0;
}

.cover > :last-child:not(h1) {
  margin-block-start: 0;
}

.cover > h1 {
  margin-block: auto;
}

.grid {
  display: grid;
  gap: var(--space-s);
  --minimum: 40ch;
  line-height: 1.5;
}

@supports (width: min(var(--minimum), 100%)) {
  .grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--minimum), 100%), 1fr)
    );
  }
}

.frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--grey-9);
}

.frame.classic {
  aspect-ratio: 16 / 9;
}

.frame.square {
  aspect-ratio: 1 / 1;
}

.frame.standard {
  aspect-ratio: 4 / 3;
}

.frame.film {
  aspect-ratio: 2.39 / 1;
}

.frame.preserve-aspect-ratio > img {
  block-size: 100%;
  object-fit: contain;
}

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

.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter.contain {
  --margin: 0px;
  overflow: auto;
  max-inline-size: calc(100% - var(--margin) * 2);
  max-block-size: calc(100% - var(--margin) * 2);
}

.icon {
  display: flex;
  height: 0.75em;
  height: 1cap;
  width: 0.75em;
  width: 1cap;
}

.icon.big {
  height: 1.5em;
  height: 2cap;
  width: 1.5em;
  width: 2cap;
}

.icon.small {
  height: 0.5em;
  height: 0.75cap;
  width: 0.5em;
  width: 0.75cap;
}

.with-icon {
  display: inline-flex;
  align-items: baseline;
}

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

.with-icon.bigger {
  font-size: var(--step-9);
}

.with-icon.big {
  font-size: var(--step-7);
}

.with-icon .icon {
  margin-inline-end: 0.5em;
}

.with-icon .icon {
  margin-inline-end: 0.5em;
}

.with-icon svg {
  transition: fill 100ms;
}
.with-icon.colored svg {
  fill: white;
}

#manual span:has(.leaflet-navigation-icon) {
  background-color: var(--grey-9);
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
  margin-inline-start: 0.5em;
}

/* #manual .leaflet-navigation-icon { */
/* width: 1em; */
/* height: 1em; */
/* width: 1cap; */
/* height: 1cap; */
/* } */

.arrow {
  display: inline-block;
  block-size: 0;
  inline-size: 0;
  border-block-start: 0.5cap solid transparent;
  border-inline-start: 0.5cap solid;
  border-block-end: 0.5cap solid transparent;
  border-inline-start-color: white;
}

.arrow.black {
  border-inline-start-color: var(--grey-0);
}

.arrow.red {
  border-inline-start-color: var(--red);
}

.arrow.magenta {
  border-inline-start-color: var(--magenta);
}

.arrow.lime-green {
  border-inline-start-color: var(--lime-green);
}

.arrow.yellow {
  border-inline-start-color: var(--yellow);
}

.arrow.pink {
  border-inline-start-color: var(--pink);
}

.arrow.blue {
  border-inline-start-color: var(--blue);
}

*.arrow:last-child {
  margin-inline-end: 0.25em;
}

*.arrow:first-child {
  margin-inline-end: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  text-size-adjust: none;
}

body {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  font-family: var(--geometric-humanist);
  color: var(--grey-0);
  font-weight: 500;
  line-height: 1.5;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

main {
  flex-grow: 1;
  margin-block-end: var(--space-xl-2xl);
}

h1,
h2,
h3,
h4 {
  color: var(--grey-0);
  font-weight: 700;
  text-wrap: balance;
}

h1,
h2,
h3,
h4,
input,
button,
label {
  line-height: 1.1;
}

h1 {
  font-size: var(--step-4);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--step-3);
  letter-spacing: -0.0125em;
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-0);
}

.copy h2 {
  margin-block-start: var(--space-xl);
}

.copy h3,
.copy h4 {
  margin-block-start: var(--space-l);
}

p,
li {
  font-size: var(--step-0);
}

p.big {
  font-size: var(--step-1);
  line-height: 1.5;
}

p strong {
  font-weight: 600;
}

p.dot {
  color: var(--grey-6);
}

input,
button,
textarea,
select {
  font: inherit;
}

ul,
ol {
  margin-inline-start: var(--space-m);
}

ul {
  list-style-type: disc;
}

img,
picture,
iframe {
  display: block;
  max-inline-size: 100%;
}

a {
  transition: color 200ms;
  color: inherit;
  text-decoration-thickness: 0.2ex;
  text-underline-offset: 0.1em;
}

nav {
  max-inline-size: var(--viewport);
}

nav a {
  font-size: var(--step-0);
  color: var(--grey-0);
  text-decoration: none;
}

a:hover {
  color: var(--red);
}

nav a:hover {
  color: var(--grey-0) !important;
}

code {
  font-family: var(--monospace-code);
  font-size: var(--type--1);
}

button {
  all: unset;
  cursor: pointer;
  font-size: var(--step-0);
}

section.start {
  z-index: 9999;
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

@keyframes glow {
  from {
    background-color: var(--magenta);
  }
  to {
    background-color: var(--grey-0);
  }
}

button.start {
  transition: background-color 200ms;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  color: white;
  font-size: var(--step--1);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  padding: var(--space-l) var(--space-s-m);
}

button.start.magenta {
  background-color: var(--magenta);
}

button.start.lime-green {
  background-color: var(--lime-green);
}

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

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

button.start.blue {
  background-color: var(--blue);
}

button.start:hover {
  background-color: var(--grey-0);
}

hr {
  border: none;
  border-block-end: 2px solid var(--grey-9);
}

header {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: white;
}

header.with-categories {
  margin-block-end: var(--space-s);
}

header.with-categories .inner {
  padding-block-end: var(--space-2xs);
}

header nav a {
  font-size: var(--step-0);
  color: var(--grey-4);
}

.header nav .languages a {
  color: var(--grey-5);
}

#categories {
  gap: var(--space-2xs);
}

#categories button {
  transition:
    background-color 200ms,
    color 200ms;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--grey-3);
  padding: var(--space-3xs) var(--space-2xs);
  background-color: var(--grey-9);
}

#categories button:hover {
  color: var(--grey-0);
  background-color: var(--grey-8);
}

#categories button.active.black {
  color: white !important;
  background-color: var(--grey-0) !important;
}

#categories button.active.yellow {
  color: white !important;
  background-color: var(--yellow) !important;
}

#categories button.active.orange {
  color: white !important;
  background-color: var(--orange) !important;
}

#categories button.active.burgundy {
  color: white !important;
  background-color: var(--burgundy) !important;
}

#categories button.active.magenta {
  color: white !important;
  background-color: var(--magenta) !important;
}

#categories button.active.indigo {
  color: white !important;
  background-color: var(--indigo) !important;
}

#categories button.active.pink {
  color: white !important;
  background-color: var(--pink) !important;
}

#categories button.active.light-blue {
  color: white !important;
  background-color: var(--light-blue) !important;
}

#categories button.active.blue {
  color: white !important;
  background-color: var(--blue) !important;
}

#categories button.active.lime-green {
  color: white !important;
  background-color: var(--lime-green) !important;
}

#categories button.active.turquoise {
  color: white !important;
  background-color: var(--turquoise) !important;
}

nav .languages a.active {
  color: var(--grey-0);
}

.frame.main {
  transition: aspect-ratio 200ms;
  aspect-ratio: 16 / 8;
}

#featured .grid {
  margin-block-start: var(--space-xs-s);
  gap: var(--space-m);
}

div.logo p {
  color: white;
  inline-size: fit-content;
  background-color: var(--red);
  padding: var(--space-3xs) var(--space-2xs);
  box-shadow: var(--space-3xs) var(--space-3xs) 0 0 var(--yellow);
}

picture.logo {
  inline-size: var(--space-4xl);
}

picture.red {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--red);
}

picture.magenta {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--magenta);
}

picture.lime-green {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--lime-green);
}

picture.yellow {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--yellow);
}

picture.blue {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--blue);
}

picture.pink {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--pink);
}

picture .category.red {
  color: white;
  background-color: var(--red);
}

picture .category.magenta {
  color: white;
  background-color: var(--magenta);
}

picture .category.lime-green {
  color: white;
  background-color: var(--lime-green);
}

picture .category.yellow {
  color: white;
  background-color: var(--yellow);
}

picture .category.pink {
  color: white;
  background-color: var(--pink);
}

picture .category.blue {
  color: white;
  background-color: var(--blue);
}

a.image {
  max-inline-size: none;
}

picture.route,
#routes picture {
  position: relative;
}

picture.route img,
#routes picture img {
  transition: filter 300ms;
}

picture.route .with-icon {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
}

picture.route .with-icon.bigger {
  top: var(--space-s);
  left: var(--space-s);
}

picture.route button.download {
  transition:
    background-color 200ms,
    color 100ms,
    opacity 200ms;
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  height: 1em;
  width: 1em;
  cursor: pointer;
  color: var(--grey-2) !important;
  padding: var(--space-2xs);
  background-color: var(--grey-9);
  border-radius: 50%;
  opacity: 0.9;
}

picture.route button.download:hover,
picture.route button.download:focus {
  color: var(--grey-2) !important;
  opacity: 1;
  background-color: white;
}

picture.route button.download.installed {
  color: white !important;
  background-color: var(--grey-0);
  opacity: 1;
}

picture.route .stack,
#routes picture .stack {
  position: absolute;
  bottom: var(--space-xs);
  left: var(--space-xs);
}

picture.route.big .stack,
#routes #featured picture .stack {
  position: absolute;
  bottom: var(--space-s);
  left: var(--space-s);
}

picture.route h3,
#routes picture h3 {
  text-wrap: pretty;
  inline-size: fit-content;
  padding: var(--space-xs);
  background-color: white;
  margin-inline-end: var(--space-xs);
}

picture.route .category,
#routes picture .category {
  inline-size: max-content;
  font-size: var(--step--1);
  padding: var(--space-3xs) var(--space-2xs);
}

picture.route.big h3 {
  font-size: var(--step-2);
}

picture.route h3 {
  font-size: var(--step-0);
}

.locations .route {
  cursor: pointer;
}

.locations button:focus img {
  filter: brightness(60%);
}

a.image:focus,
a.image:hover img {
  filter: brightness(60%);
}

#routes picture .category.lime-green {
  color: white;
  background-color: var(--lime-green);
}

#routes picture .category.yellow {
  color: white;
  background-color: var(--yellow);
}

#routes picture .category.magenta {
  color: white;
  background-color: var(--magenta);
}

.category.big {
  font-size: var(--step-0) !important;
}

#featured h2 {
  font-size: var(--step-4);
}

#featured h2 {
  color: var(--red);
  font-weight: 700;
}

#all h2 {
  width: 100%;
  color: var(--red);
  font-weight: 500;
  padding-block-start: var(--space-s);
  border-block-start: 2px solid var(--grey-9);
  margin-block-end: var(--space-xs);
}

main .inner {
  padding-block: 0;
}

main .categories {
  position: sticky;
  top: 0;
}

footer {
  padding-block: var(--space-s-m);
  background-color: var(--red);
}

footer * {
  font-size: var(--step--1);
  color: white;
}

footer a:hover {
  text-decoration: none;
  color: white;
}

section.map {
  filter: brightness(40%);
}

section.map.zooming .leaflet-interactive:not(.leaflet-marker-icon) {
  display: none !important;
}

.relative {
  position: relative;
}

section.slider .lip {
  position: absolute;
  top: 0;
  inline-size: 100%;
}

section.slider .lip .bar {
  block-size: var(--space-3xs);
  inline-size: var(--space-m);
  background-color: var(--grey-7);
  border-radius: var(--space-l);
}

.slider .locations {
  overflow: auto;
  block-size: 60vh;
  max-inline-size: 100%;
}

.slider .locations h2 {
  color: red;
  font-size: var(--step-2);
}

.locations .unseen img {
  filter: grayscale(40%) brightness(50%);
}

.locations .visited h2 {
  font-weight: 500;
}

.slider {
  position: fixed;
  bottom: 0;
  max-block-size: 80vh;
  inline-size: 100%;
  padding: var(--space-s-m);
  padding-block-start: var(--space-3xs);
  background-color: white;
  z-index: 30;
}

.slider .start {
  padding-block-start: var(--space-s-m);
}

.slider .info h2 {
  margin-block-end: var(--space-s-m);
}

.upper {
  position: fixed;
  top: var(--space-xs-s);
  left: var(--space-xs-s);
  right: var(--space-xs-s);
  z-index: 30;
}

.directions {
  padding: var(--space-2xs-xs);
  padding-inline: var(--space-s);
  background-color: white;
}

.cluster.icons button.with-icon,
.slider-button {
  transition: background-color 100ms;
  cursor: pointer;
  padding: var(--space-2xs);
  background-color: white;
  border-radius: 50%;
}

.cluster.icons button.with-icon:active {
  background-color: var(--grey-7);
}

.cluster.icons button.with-icon.colored {
  background-color: var(--color);
}

.cluster.icons p.with-icon svg {
  margin-inline-end: 0;
}

.directions .cluster {
  gap: var(--space-s);
}

.directions .icon {
  font-size: var(--step-4);
}

.directions h2 {
  font-size: var(--step-2);
}

.directions h2.ff {
  font-size: var(--step-5);
}

/* Added by boy */

.arrow.colored {
  border-inline-start-color: var(--color);
}

picture.red {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--color);
}

picture .category.colored {
  color: white;
  background-color: var(--color);
}

#categories button.active.colored {
  color: white !important;
  background-color: var(--color) !important;
}

a.start.colored {
  background-color: var(--color);
}

a.start:hover {
  background-color: var(--grey-0);
}

a.start {
  display: block;
  max-inline-size: none;
  width: 100%;
  text-decoration: none;
  transition: background-color 200ms;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  color: white;
  font-size: var(--step--1);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  padding: var(--space-l) var(--space-s-m);
}

.map.marker-transitions .map-marker {
  /* transition: transform 200ms; */
}

.fullscreen-map {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.hidden {
  display: none !important;
}

.leaflet-marker-icon.map-marker {
  width: auto !important;
  height: auto !important;
}
.leaflet-marker-icon.finished {
}
.leaflet-marker-icon.locked {
  color: var(--grey-3);
}

.map-marker {
  color: var(--red);
}

.lip,
.info {
  cursor: grab;
}

section.map {
  z-index: 10;

  transition: filter 200ms;
}
section.map.dark,
.dark {
  filter: brightness(40%);
}

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

.slider {
  transition: height 250ms;
  transition: max-height 250ms;
  transition: max-block-size 250ms;
}
.sliding {
  transition: height 0ms;
  transition: max-height 0ms;
  transition: max-block-size 0ms;
}
.info {
  user-select: none;
}
.leaflet-rotate-pane {
  /* transition: transform 200ms linear !important; */
}
.no-flex-wrap {
  flex-wrap: nowrap;
}
.break-all {
  word-break: break-all;
}
.text-center {
  text-align: center;
}

a.image img {
  transition: filter 300ms;
}

section.map {
  filter: none;
}

.frame.main {
  transition: aspect-ratio 0ms;
  aspect-ratio: 16 / 9;
}

#back-arrow {
  display: inline-flex;
  width: fit-content;
}
#back-arrow:hover {
  color: var(--red);
}
/* #back-arrow-wrapper { */
/*   display: flex; */
/* } */

/* #back-arrow-wrapper :first-child { */
/*   flex-basis: 0; */
/* } */

#slider-list {
  left: -100%; /* Initial position, offset by 100% from the right */
  animation: flyInLeft 250ms ease-in-out forwards;
}
#slider-list-hidden {
  left: 0; /* Initial position, offset by 100% from the right */
  animation: flyOutLeft 250ms ease-in-out forwards;
}
#slider-detail {
  right: -100%; /* Initial position, offset by 100% from the right */
  animation: flyIn 250ms ease-in-out forwards;
}

#slider-detail-hidden {
  right: 0%; /* Initial position, offset by 100% from the right */
  animation: flyOut 250ms ease-in-out forwards;
}
@keyframes flyOut {
  0% {
    right: 0; /* Start from the initial position */
  }
  100% {
    right: -100%; /* Move to the final position (0% offset from the right) */
  }
}
@keyframes flyIn {
  0% {
    right: -100%; /* Start from the initial position */
  }
  100% {
    right: 0; /* Move to the final position (0% offset from the right) */
  }
}
@keyframes flyOutLeft {
  0% {
    left: 0; /* Move to the final position (0% offset from the right) */
  }
  100% {
    left: -100%; /* Start from the initial position */
  }
}
@keyframes flyInLeft {
  0% {
    left: -100%; /* Start from the initial position */
  }
  100% {
    left: 0; /* Move to the final position (0% offset from the right) */
  }
}
picture.colored {
  box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--color);
}

svg.explore-logo {
  width: var(--space-4xl);
}

svg.explore-logo.small {
  width: var(--space-3xl);
}

.dialog-wrapper {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
}
.dialog.home {
  cursor: auto;
  display: flex;
  flex-direction: column;
  background-color: white;
  width: 100%;
  padding: var(--space-xs);
  margin: var(--space-xs-s);
  z-index: 10000;
  overflow: scroll;
  gap: var(--space-2xs);
}

.dialog.manual {
  cursor: auto;
  width: 100%;
  height: 60vh;
  padding: var(--space-xs);
  background-color: white;
  margin: var(--space-xs-s);
  z-index: 10000;
  overflow: auto;
}

/*TODO stan aanpassen */
.dialog.installer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  cursor: auto;
  width: 100%;
  padding: var(--space-xs-s);
  background-color: white;
  margin: var(--space-xs-s);
  z-index: 10000;
  overflow: auto;
  max-width: 44rem;
}

.dialog.installer button {
  transition: background-color 200ms;
  font-size: var(--step-0);
  font-weight: bold;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-s);
  background-color: var(--grey-0);
}

.dialog.installer button:active {
  background-color: var(--grey-1);
}

.dialog.manual .with-icon {
  justify-content: start !important;
}

.dialog.manual .stack.two {
  padding: var(--space-2xs-xs);
}

.dialog.home > button,
.dialog.home > a {
  transition: background-color 200ms;
  font-size: var(--step-0);
  font-weight: bold;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-s);
  background-color: var(--color);
}

.dialog.home a:hover {
  color: white;
}

.themed-button {
  transition: background-color 200ms;
  font-size: var(--step-0);
  font-weight: bold;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-s);
  background-color: var(--color);
}

.dialog.home > a {
  transition: background-color 200ms;
}

.dialog.home > a:hover {
  color: white;
}

.dialog.home > a:active,
.dialog.home > a:focus,
.dialog.home > *:focus {
  background-color: var(--grey-1);
  color: white;
}

.dialog.home > a:first-child,
.dialog.home > button:first-child {
  background-color: var(--grey-0);
}

.marker-number {
  font-family: Europa-Bold;
  color: white;
}
.slider-backdrop {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.recenter {
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--space-3xl);
  background-color: white;
  align-items: center;
}

button.recenter {
  transition: background-color 100ms;
}

button.recenter:active {
  background-color: var(--grey-7);
}

.recenter .icon {
  width: 1.5cap;
  height: 1.5cap;
}

.cluster.horizontal {
  gap: var(--space-2xs);
}

.no-pointer-events {
  pointer-events: none;
}
.pointer-events {
  pointer-events: auto;
}

body,
html {
  overscroll-behavior: none;
}

button#back-arrow {
  align-items: center;
}

svg.icon.back-arrow {
  width: 1.5cap;
  height: 1.5cap;
  margin-inline-end: 0.25em;
}

.warning-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: var(--step-0);
  line-height: 1.3;
  padding: var(--space-2xs) var(--space-s-m);
  padding-inline-start: var(--space-s);
  background-color: var(--red);
  margin-block-start: 0 !important;
}

.warning-bar a:hover {
  color: white;
}

.underline {
  text-decoration: underline;
  text-decoration-thickness: 0.2ex;
  text-underline-offset: 0.1em;
}

.install-bar {
  position: relative;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: var(--step-0);
  line-height: 1.3;
  padding: var(--space-xs) var(--space-s-m);
  background-color: var(--red);
  margin-block-start: 0 !important;
}

.modal-wrapper {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.modal {
  display: flex;
  flex-direction: column;
  background-color: white;
  width: 100%;
  padding: var(--space-xs);
  margin: var(--space-xs-s);
  z-index: 100000;
  gap: var(--space-2xs);
}

.leaflet-navigation-icon {
  width: 1.5em;
  height: 1.5em;
  width: 2cap;
  height: 2cap;
}

#share-icon {
  display: block;
  width: var(--space-xs);
  height: var(--space-xs);
}

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

.read-button {
  transition:
    background-color 200ms,
    color 200ms;
  color: var(--grey-3);
  padding: var(--space-2xs);
  background-color: var(--grey-9);
  width: fit-content;
}

.read-button:hover {
  color: var(--grey-0);
  background-color: var(--grey-8);
}

.read-button.active {
  color: white;
  background-color: var(--grey-0);
}

section.copy h2,
section.copy h3,
section.copy p {
  max-width: 42em;
}

section.copy li {
  max-width: calc(42em - var(--space-m));
}

section.copy h1 {
  padding-block-end: var(--space-xs);
  border-block-end: 2px solid var(--grey-9);
}

section.copy h2 {
  color: var(--red);
  font-size: var(--step-3);
}

.dialog .with-icon {
  justify-content: center;
  align-items: center;
}

.dialog hr {
  margin-block: var(--space-3xs);
  padding: 0;
}

#sliderContainer picture {
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--grey-9);
}

#sliderContainer picture img.preserve-aspect-ratio {
  block-size: 100%;
  object-fit: contain;
}
#sliderContainer picture img {
  block-size: auto;
  object-fit: cover;
}

.manual {
  picture {
    max-width: calc(var(--viewport) / 2);
  }
}

.loader {
  width: 100%;
  height: 20px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  background-color: var(--grey-8);
}
.loader::after {
  content: "";
  width: var(--progress-width);
  height: 20px;
  background-color: var(--lime-green);
  font-size: 15px;
  background-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.25) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.25) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1em 1em;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transition: width 1s ease-in-out;
  animation: barStripe 1s linear infinite;
}
.loader.failed::after {
  background-color: var(--red);
}

@keyframes barStripe {
  0% {
    background-position: 1em 0;
  }
  100% {
    background-position: 0 0;
  }
}