body.mm-index-testnav {
  --mm-index-testnav-bar: 74px;
}

body.mm-index-testnav #header {
  z-index: 10030;
}

body.mm-index-testnav #header .mm-header:hover,
body.mm-index-testnav #header .mm-header:active,
body.mm-index-testnav #header .mm-header:focus,
body.mm-index-testnav #header .mm-header:focus-visible {
  padding: 0.66em 0.8em !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.mm-index-testnav #header .mm-header svg,
body.mm-index-testnav #header .mm-header:hover svg,
body.mm-index-testnav #header .mm-header:active svg,
body.mm-index-testnav #header .mm-header:focus svg,
body.mm-index-testnav #header .mm-header:focus-visible svg {
  transform: none !important;
  transition: none !important;
}

body.mm-index-testnav #header .liquidGlass-wrapper {
  position: relative;
  overflow: hidden;
  height: var(--mm-index-testnav-bar);
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  transition: height 0.48s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

body.mm-index-testnav #header .liquidGlass-wrapper:has(nav.show) {
  height: var(--mm-index-testnav-bar);
}

body.mm-index-testnav #header .liquidGlass-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mm-index-testnav-bar) - 1px);
  height: 1px;
  background: rgba(38, 39, 41, 0.22);
  opacity: 0;
  pointer-events: none;
}

body.mm-index-testnav #header .liquidGlass-wrapper:has(nav.show)::after {
  opacity: 1;
}

body.mm-index-testnav #header .liquidGlass-effect,
body.mm-index-testnav #header .liquidGlass-tint,
body.mm-index-testnav #header .liquidGlass-shine {
  pointer-events: none;
}

body.mm-index-testnav #header .liquidGlass-text {
  position: relative;
  z-index: 3;
  height: var(--mm-index-testnav-bar);
  min-height: var(--mm-index-testnav-bar);
  max-height: var(--mm-index-testnav-bar);
}

body.mm-index-testnav #header .liquidGlass-text h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -36%);
  z-index: 6;
  line-height: 0;
}

body.mm-index-testnav #header .mm-header-search {
  top: 1px !important;
  left: -11px !important;
  width: 63px !important;
  height: 63px !important;
  padding: 10px !important;
  display: block !important;
  transform: none !important;
}

body.mm-index-testnav #header .mm-header-search:hover,
body.mm-index-testnav #header .mm-header-search:active,
body.mm-index-testnav #header .mm-header-search:focus,
body.mm-index-testnav #header .mm-header-search:focus-visible {
  transform: none !important;
}

body.mm-index-testnav #header .burger,
body.mm-index-testnav #header .burger:hover,
body.mm-index-testnav #header .burger:active,
body.mm-index-testnav #header .burger:focus,
body.mm-index-testnav #header .burger:focus-visible {
  transform: none !important;
}

body.mm-index-testnav #header .burger:not(.clicked):hover span::after,
body.mm-index-testnav #header .burger:not(.clicked):active span::after,
body.mm-index-testnav #header .burger:not(.clicked):focus span::after,
body.mm-index-testnav #header .burger:not(.clicked):focus-visible span::after {
  width: 16px;
}

body.mm-index-testnav #header .burger-topmenu:not(.clicked):hover span::after,
body.mm-index-testnav #header .burger-topmenu:not(.clicked):active span::after,
body.mm-index-testnav #header .burger-topmenu:not(.clicked):focus span::after,
body.mm-index-testnav #header .burger-topmenu:not(.clicked):focus-visible span::after {
  width: 16px;
}

body.mm-index-testnav #header .mm-header-search__icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -78%) !important;
}

body.mm-index-testnav #header nav {
  position: absolute;
  top: var(--mm-index-testnav-bar);
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  height: calc(100% - var(--mm-index-testnav-bar));
  max-height: calc(100% - var(--mm-index-testnav-bar));
  padding: 34px 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.28s ease,
    opacity 0.22s ease,
    visibility 0s linear 0.28s;
  z-index: 4;
}

body.mm-index-testnav #header nav.show {
  position: absolute;
  top: var(--mm-index-testnav-bar);
  left: 0;
  right: 0;
  height: auto;
  max-height: none;
  overflow: visible;
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.mm-index-testnav #header nav > .burger {
  display: none !important;
}

body.mm-index-testnav #header nav ul.main,
body.mm-index-testnav #header nav .language-switcher-menu.about {
  width: min(920px, 100%);
  margin-left: auto;
  margin-right: auto;
}

body.mm-index-testnav #header nav ul.main {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: 28px;
  row-gap: 0;
  align-items: start;
}

body.mm-index-testnav #header nav ul.main li {
  transform: scale(1.08) translateY(-22px);
  transform-origin: center top;
  opacity: 0;
  margin: 0;
  border-bottom: 0;
  will-change: transform, opacity;
  transition:
    transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99),
    opacity 0.55s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}

body.mm-index-testnav #header nav.show ul.main li {
  transform: scale(1) translateY(0);
  opacity: 1;
}

body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(1)  { transition-delay: 0.22s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(2)  { transition-delay: 0.29s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(3)  { transition-delay: 0.36s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(4)  { transition-delay: 0.43s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(5)  { transition-delay: 0.50s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(6)  { transition-delay: 0.57s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(7)  { transition-delay: 0.64s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(8)  { transition-delay: 0.71s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(9)  { transition-delay: 0.78s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(10) { transition-delay: 0.85s; }
body.mm-index-testnav #header nav.show ul.main > li:nth-of-type(11) { transition-delay: 0.92s; }

body.mm-index-testnav #header nav ul.main li a {
  display: block;
  width: 100%;
  padding: 13px 0;
  color: var(--color-text) !important;
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  text-decoration: none;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    color 0.22s ease,
    letter-spacing 0.22s ease;
}

body.mm-index-testnav #header nav ul.main li a:hover {
  color: var(--color-text) !important;
  opacity: 1;
  transform: translateY(-1px);
  letter-spacing: 0.005em;
}

body.mm-index-testnav #header nav ul.main li a:focus-visible {
  color: var(--color-text) !important;
  opacity: 1;
  letter-spacing: 0.005em;
}

body.mm-index-testnav #header nav ul.main li a i,
body.mm-index-testnav #header nav ul.main li a::after,
body.mm-index-testnav #header nav ul.main li a span.menu_aantallen {
  display: none !important;
}

body.mm-index-testnav #header nav .hr-menu {
  display: none;
}

body.mm-index-testnav #header nav ul.main > li:nth-of-type(1) { grid-column: 1; grid-row: 1; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(2) { grid-column: 1; grid-row: 2; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(3) { grid-column: 1; grid-row: 3; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(4) { grid-column: 1; grid-row: 4; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(5) { grid-column: 2; grid-row: 1; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(6) { grid-column: 2; grid-row: 2; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(7) { grid-column: 2; grid-row: 3; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(8) { grid-column: 3; grid-row: 1; }
body.mm-index-testnav #header nav ul.main > li:nth-of-type(9) { grid-column: 3; grid-row: 2; }

body.mm-index-testnav #header nav .about,
body.mm-index-testnav #header nav .social,
body.mm-index-testnav #header nav ul.sub,
body.mm-index-testnav #header nav .language-switcher-menu.about {
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.28s ease;
}

body.mm-index-testnav #header nav.show .about,
body.mm-index-testnav #header nav.show .social,
body.mm-index-testnav #header nav.show ul.sub,
body.mm-index-testnav #header nav.show .language-switcher-menu.about {
  transform: translateY(0);
  opacity: 1;
}

body.mm-index-testnav #header nav .language-switcher-menu.about {
  display: grid;
  grid-template-columns: minmax(118px, 138px) minmax(176px, 228px);
  gap: 8px;
  margin-top: 18px;
  justify-content: center;
  align-items: center;
}

body.mm-index-testnav #header nav .lang-switch-form,
body.mm-index-testnav #header nav .theme-switch-form {
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

body.mm-index-testnav #header nav .lang-switch-form::before,
body.mm-index-testnav #header nav .theme-switch-form::before {
  margin-bottom: 8px;
}

body.mm-index-testnav #header nav .lang-switch-form {
  width: 132px;
}

body.mm-index-testnav #header nav .theme-switch-form.theme-slider-form {
  width: min(100%, 214px);
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 6px;
  align-items: center;
  justify-self: start;
}

body.mm-index-testnav #header nav #langSelectAbout.lang-select-full.glass {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.mm-index-testnav #header nav .theme-slider {
  min-width: 0;
  width: 100%;
  max-width: 154px;
}

body.mm-index-testnav #header nav .theme-auto-btn {
  width: auto;
  min-width: 78px;
  padding: 0 12px;
}

body.mm-index-testnav #header nav .theme-auto-btn span {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

body.mm-index-testnav #header nav #langSelectAbout.lang-select-full.glass,
body.mm-index-testnav #header nav .theme-slider__btn,
body.mm-index-testnav #header nav .theme-auto-btn {
  box-shadow: none !important;
}

body.mm-index-testnav .overlay.show {
  background: rgba(24, 22, 18, 0.18);
  z-index: 10040;
}

@media screen and (max-width: 980px) {
  body.mm-index-testnav {
    --mm-index-testnav-bar: 68px;
  }

  body.mm-index-testnav #header .liquidGlass-wrapper:has(nav.show) {
    height: var(--mm-index-testnav-bar);
  }
}

@media screen and (max-width: 736px) {
  body.mm-index-testnav {
    --mm-index-testnav-bar: 62px;
  }

  body.mm-index-testnav #header.small .mm-header,
  body.mm-index-testnav #header.small .mm-header:hover,
  body.mm-index-testnav #header.small .mm-header:active,
  body.mm-index-testnav #header.small .mm-header:focus,
  body.mm-index-testnav #header.small .mm-header:focus-visible {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
    padding-left: 0.8em !important;
    padding-right: 0.8em !important;
  }

  body.mm-index-testnav #header .liquidGlass-wrapper:has(nav.show) {
    height: var(--mm-index-testnav-bar);
  }

  body.mm-index-testnav #header nav {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 26px;
    padding-right: 26px;
  }

  body.mm-index-testnav #header .mm-header-search,
  body.mm-index-testnav #header .mm-header-search:hover,
  body.mm-index-testnav #header .mm-header-search:active,
  body.mm-index-testnav #header .mm-header-search:focus,
  body.mm-index-testnav #header .mm-header-search:focus-visible,
  body.mm-index-testnav #header .burger,
  body.mm-index-testnav #header .burger:hover,
  body.mm-index-testnav #header .burger:active,
  body.mm-index-testnav #header .burger:focus,
  body.mm-index-testnav #header .burger:focus-visible {
    transition: none !important;
  }

  body.mm-index-testnav #header nav ul.main {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 0;
  }

  body.mm-index-testnav #header nav ul.main > li:nth-of-type(1),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(2),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(3),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(4),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(5),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(6),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(7),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(8),
  body.mm-index-testnav #header nav ul.main > li:nth-of-type(9) {
    grid-column: auto;
    grid-row: auto;
  }

  body.mm-index-testnav #header nav ul.main li a {
    font-size: 1.1rem;
    padding: 13px 0;
  }

  body.mm-index-testnav #header nav ul.main li {
    border-bottom: 1px solid color-mix(in srgb, var(--pal-dark-3) 14%, transparent);
  }

  body.mm-index-testnav #header nav .language-switcher-menu.about {
    --mm-switch-h: 50px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
    align-items: stretch;
    justify-items: stretch;
    justify-content: stretch;
  }

  body.mm-index-testnav #header nav .lang-switch-form,
  body.mm-index-testnav #header nav .theme-switch-form {
    width: 100%;
    min-width: 0;
  }

  body.mm-index-testnav #header nav .lang-switch-form {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
  }

  body.mm-index-testnav #header nav .theme-switch-form.theme-slider-form {
    width: 100%;
    grid-column: 2 / 4;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  body.mm-index-testnav #header nav .theme-slider {
    min-width: 0;
    width: 100%;
    max-width: none;
    grid-column: 1;
    grid-row: 1;
    height: var(--mm-switch-h) !important;
    min-height: var(--mm-switch-h) !important;
    max-height: var(--mm-switch-h) !important;
  }

  body.mm-index-testnav #header nav #langSelectAbout.lang-select-full.glass,
  body.mm-index-testnav #header nav .theme-slider,
  body.mm-index-testnav #header nav .theme-slider__btn,
  body.mm-index-testnav #header nav .theme-auto-btn {
    min-height: var(--mm-switch-h) !important;
    height: var(--mm-switch-h) !important;
    max-height: var(--mm-switch-h) !important;
    box-sizing: border-box !important;
  }

  body.mm-index-testnav #header nav #langSelectAbout.lang-select-full.glass {
    padding-left: 14px !important;
    padding-right: 24px !important;
    font-size: 0.98rem;
  }

  body.mm-index-testnav #header nav .theme-auto-btn {
    width: auto;
    min-width: 0;
    width: 100%;
    padding: 0 12px;
    justify-self: stretch;
    font-size: 0.95rem;
    grid-column: 2;
    grid-row: 1;
  }

  body.mm-index-testnav #header nav .theme-auto-btn span {
    transform: none;
  }

  body.mm-index-testnav #header nav .theme-select-fallback-slider {
    grid-column: 1 / -1;
  }
}
