@charset "UTF-8";
/*!
Theme Name: Toverpen
Author: Glenn Windhouwer
Author URI: https://doserdesign.nl/
Description: Custom theme    
Version: 1.0.0   
Tested up to: 6.1        
Requires PHP: 7.3    
License: GNU General Public License v2 or later   
License URI: LICENSE
Text Domain: BDRC  
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Timeout  is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
# Custom imports
--------------------------------------------------------------*/
/* =Variables
-------------------------------------------------------------- */
/* =Shadow
-------------------------------------------------------------- */
/* =Media queries
-------------------------------------------------------------- */
/* =Image boxes
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

.skip-link {
  display: none;
}

.clearfix {
  clear: both;
}

html {
  font-size: 62.5%;
  overflow: visible;
}

html.mm-opened body {
  overflow: scroll !important;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* =Global custom styles  
-------------------------------------------------------------- */
.no-padding {
  margin-bottom: 0px !important;
  -webkit-margin-after: 0px !important;
          margin-block-end: 0px !important;
}

.no-overflow {
  overflow: hidden;
  padding: 0px !important;
}

.rounded {
  border-radius: 50%;
  overflow: hidden;
}

.invert {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.tegel-wrapper {
  height: 100%;
}
.tegel-wrapper .rounded {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.tegel-wrapper:hover .rounded, .tegel-wrapper:active .rounded {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 h1, .line-clamp-2 h2, .line-clamp-2 h3, .line-clamp-2 p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 h1, .line-clamp-3 h2, .line-clamp-3 h3, .line-clamp-3 p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-4 h1, .line-clamp-4 h2, .line-clamp-4 h3, .line-clamp-4 p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-5 h1, .line-clamp-5 h2, .line-clamp-5 h3, .line-clamp-5 p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blok-link {
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 2;
  cursor: pointer;
}

.card-link a {
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 2;
  cursor: pointer;
}

.offset-section {
  margin-top: -3.5rem;
}

.flip-horizontal {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.flip-vertical {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}

.blok-shadow {
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.hidden {
  display: none !important;
}

.mobile-only {
  display: block;
}
@media only screen and (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

.mobile-hide {
  display: none !important;
}
@media only screen and (min-width: 768px) {
  .mobile-hide {
    display: block !important;
  }
}

.fullheight {
  height: 100vh;
}

.layer-2 {
  z-index: 2;
}

.layer-3 {
  z-index: 3;
  position: relative;
}

.imageframe {
  width: 100%;
  height: 100%;
}
.imageframe figure {
  width: 100%;
  height: 100%;
}
.imageframe img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.imageframe .wp-block-cover {
  width: 100%;
  height: 100%;
}

.inline-lijst {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (min-width: 768px) {
  .inline-lijst {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: normal;
        -ms-flex-align: normal;
            align-items: normal;
  }
}
.inline-lijst.centered {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

ul li, ol li {
  margin-left: 20px;
  position: relative;
}

.breakout-section {
  aspect-ratio: 16/7;
}

.breakout {
  position: relative;
}
.breakout img {
  position: absolute;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  width: 100%;
}

.tekst-tegel {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .tekst-tegel {
    aspect-ratio: 1/1;
    overflow: hidden;
  }
}

.checklist li {
  list-style-type: none;
}
.checklist li:before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-image: url("assets/images/check-solid.svg");
  display: block;
  background-repeat: no-repeat;
  position: absolute;
  left: -20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(256deg) brightness(107%) contrast(101%);
          filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(256deg) brightness(107%) contrast(101%);
}

.offset-blok {
  margin-top: clamp(-130px, -10%, -8vw);
}

.truncate div span {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =Image ascpect ratios   
-------------------------------------------------------------- */
.fill img {
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}

.image-box-l {
  width: 100% !important;
  height: 0px;
  padding-bottom: 60%;
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.image-box-l img {
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100% !important;
  height: 100%;
}
.image-box-l.contain img {
  -o-object-fit: contain;
     object-fit: contain;
}

.image-box-l-large {
  width: 100% !important;
  height: 0px;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.image-box-l-large img {
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100% !important;
  height: 100%;
}
.image-box-l-large.contain img {
  -o-object-fit: contain;
     object-fit: contain;
}

.image-box-p {
  width: 100% !important;
  height: 0px;
  padding-bottom: 125%;
  position: relative;
  overflow: hidden;
}
.image-box-p img {
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100% !important;
  height: 100%;
}
.image-box-p.contain img {
  -o-object-fit: contain;
     object-fit: contain;
}

.image-box-s {
  width: 100%;
  height: 0px;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}
.image-box-s a {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  display: block;
}
.image-box-s img {
  position: absolute;
  top: 0px;
  left: 0px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100% !important;
  height: 100%;
}
.image-box-s.contain img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* =Background blend modes  
-------------------------------------------------------------- */
/* The background-blend-mode property defines how an element’s background-image should blend with its background-color */
.blend-multiply {
  background-blend-mode: multiply;
}

.blend-screen {
  background-blend-mode: screen;
}

.blend-overlay {
  background-blend-mode: overlay;
}

.blend-darken {
  background-blend-mode: darken;
}

.blend-lighten {
  background-blend-mode: lighten;
}

.blend-color-dodge {
  background-blend-mode: color-dodge;
}

.blend-saturation {
  background-blend-mode: saturation;
}

.blend-color {
  background-blend-mode: color;
}

.blend-luminosity {
  background-blend-mode: luminosity;
}

/* =mix blend modes  
-------------------------------------------------------------- */
/* The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background. */
.mix-multiply {
  mix-blend-mode: multiply;
}

.mix-screen {
  mix-blend-mode: screen;
}

.mix-overlay {
  mix-blend-mode: overlay;
}

.mix-darken {
  mix-blend-mode: darken;
}

.mix-lighten {
  mix-blend-mode: lighten;
}

.mix-color-dodge {
  mix-blend-mode: color-dodge;
}

.mix-color-burn {
  mix-blend-mode: color-burn;
}

.mix-hard-light {
  mix-blend-mode: hard-light;
}

.mix-soft-light {
  mix-blend-mode: soft-light;
}

.mix-difference {
  mix-blend-mode: difference;
}

.mix-exclusion {
  mix-blend-mode: exclusion;
}

.mix-hue {
  mix-blend-mode: hue;
}

.mix-saturation {
  mix-blend-mode: saturation;
}

.mix-color {
  mix-blend-mode: color;
}

.mix-luminosity {
  mix-blend-mode: luminosity;
}

/* =Typography -------------------------------------------------------------- */
:root,
html {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
@media only screen and (min-width: 1200px) {
  :root,
  html {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}

/*----------------------------------------------titles-start*/
body .has-xx-large-font-size,
body .has-x-large-font-size,
body .has-large-font-size,
body .has-medium-font-size,
body .has-small-font-size {
  line-height: 1;
}
body h1 + p,
body h2 + p,
body h3 + p,
body h4 + p,
body h5 + p,
body h6 + p {
  -webkit-margin-before: 0 !important;
          margin-block-start: 0 !important;
}

/*----------------------------------------------titles-end*/
/*----------------------------------------------blockquote*/
html strong {
  font-weight: bold;
}

/*----------------------------------------------------------desktop menu */
.current-menu-item a {
  color: var(--wp--preset--color--themecolor-2) !important;
  text-decoration: none;
  font-weight: bold;
}

.left-menu,
.right-menu {
  display: none;
}
@media only screen and (min-width: 801px) {
  .left-menu,
  .right-menu {
    display: block;
  }
}

.main-navigation-wrapper {
  display: none;
}
@media only screen and (min-width: 801px) {
  .main-navigation-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.main-navigation-wrapper nav {
  padding-right: 10px;
}
.main-navigation-wrapper nav li {
  margin-left: 0px;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container {
  padding: 10px 15px;
  border: none !important;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container li {
  margin-left: 0px;
}
.main-navigation-wrapper .wp-block-navigation a:link, .main-navigation-wrapper .wp-block-navigation a:visited {
  color: var(--wp--preset--color--black);
}
.main-navigation-wrapper .wp-block-navigation button:hover, .main-navigation-wrapper .wp-block-navigation button:active {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  opacity: 1;
  color: var(--wp--preset--color--black);
}
.main-navigation-wrapper .wp-block-navigation__submenu-container {
  border: none;
  left: -15px !important;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container a {
  font-size: 0.9em;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  width: 100%;
  border-bottom: solid 1px #333;
  padding: 5px 0;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__content:last-child {
  border-bottom: 0px;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container .wp-block-navigation-item__content > span {
  width: 100%;
  text-overflow: ellipsis;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  left: 100% !important;
  top: -11px !important;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-bottom: solid 1px #333;
}
.main-navigation-wrapper .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
  border-bottom: 0px;
}
.main-navigation-wrapper li:nth-last-child(1) .wp-block-navigation__submenu-container {
  left: auto !important;
}

button.slick-arrow {
  background-color: transparent !important;
}

/*----------------------------------------------------------mobile menu */
.mobile-button {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 35px;
  right: 20px;
}
@media only screen and (min-width: 801px) {
  .mobile-button {
    display: none;
  }
}

.mobile-close {
  position: absolute;
  top: 27px;
  right: 30px;
  width: 24px;
  -webkit-margin-before: 0px !important;
          margin-block-start: 0px !important;
}

.mobile-logo {
  z-index: 999;
  position: absolute;
  top: 20px;
  left: 30px;
}

.subnav-wrapper {
  width: 100%;
  overflow-y: scroll;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* So the width will be 100% + 17px */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  row-gap: 10px;
  padding-bottom: 100px;
}

.menu-panel {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 100lvh;
  min-height: 100lvh;
  width: 100%;
  z-index: 16;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.5s opacity ease-out;
  transition: 0.5s opacity ease-out;
  display: block;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1.8rem;
  margin-top: 0px !important;
  background-color: #fff !important;
}
@media only screen and (min-width: 801px) {
  .menu-panel {
    display: none;
  }
}
.menu-panel.slide-left {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.menu-panel.slide-left .menu-panel-inner {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.menu-panel.slide-right {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.menu-panel.slide-right .menu-panel-inner {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.menu-panel.slide-top {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.menu-panel.slide-top .menu-panel-inner {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  height: auto;
  width: 100%;
  max-width: none;
}
.menu-panel.slide-bottom {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.menu-panel.slide-bottom .menu-panel-inner {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  height: auto;
  width: 100%;
  max-width: none;
}
.menu-panel.show {
  pointer-events: all;
  opacity: 1;
}
.menu-panel.show .menu-panel-inner {
  -webkit-transform: translateX(0%) !important;
          transform: translateX(0%) !important;
}
.menu-panel .menu-panel-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
}
.menu-panel .menu-panel-inner {
  -webkit-transition: 0.2s all ease-out;
  transition: 0.2s all ease-out;
  max-width: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 106px 60px 60px 30px;
  box-shadow: 1px 1px 24px -5px rgba(0, 0, 0, 0.51);
  -webkit-box-shadow: 1px 1px 24px -5px rgba(0, 0, 0, 0.51);
  -moz-box-shadow: 1px 1px 24px -5px rgba(0, 0, 0, 0.51);
  z-index: 9;
  -webkit-margin-before: 0rem;
          margin-block-start: 0rem;
}
.menu-panel .menu-panel-inner ul, .menu-panel .menu-panel-inner li {
  margin-left: 0px;
}
.menu-panel .nav-container {
  width: 100%;
}
.menu-panel nav {
  width: 100%;
}
.menu-panel nav ul {
  width: 100%;
}
.menu-panel .mobile-menu {
  display: block;
}
.menu-panel a:link, .menu-panel a:visited {
  color: #000;
}
.menu-panel a:hover, .menu-panel a:active {
  color: #FF00FF;
}
.menu-panel .custom-logo-link {
  width: 200px;
  line-height: 0px;
}
.menu-panel .custom-logo-link img {
  width: 100%;
  height: auto;
  max-width: none;
}
.menu-panel .main-navigation {
  margin-top: 60px;
  font-size: 1.2em;
}
.menu-panel .main-navigation li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 10px 0;
}
.menu-panel .main-navigation li .submenu-button {
  display: none;
}
.menu-panel .main-navigation .menu-item-has-children > a .submenu-button {
  display: block;
}
.menu-panel .main-navigation .menu-item-has-children a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.menu-panel .main-navigation .opened > a .submenu-button {
  display: block;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.menu-panel .main-navigation .sub-menu {
  padding-top: 15px;
  padding-left: 0px;
}
.menu-panel .main-navigation .sub-menu.opened {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.menu-panel .menu-close {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  cursor: pointer;
  z-index: 9;
  -webkit-filter: invert(100%) sepia(3%) saturate(10%) hue-rotate(52deg) brightness(105%) contrast(103%);
          filter: invert(100%) sepia(3%) saturate(10%) hue-rotate(52deg) brightness(105%) contrast(103%);
}
.menu-panel .menu-close img {
  width: 24px;
  height: auto;
}
.menu-panel .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container {
  position: relative !important;
  top: auto;
  left: auto;
  border: none !important;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-left: 10px;
}
.menu-panel .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  font-size: 1.3rem;
  max-width: 260px;
  padding-right: 30px;
}
.menu-panel .wp-block-navigation .wp-block-navigation__submenu-icon {
  position: absolute;
  right: 0px;
  top: 10px;
  -webkit-transform: translate(110%, 0%);
          transform: translate(110%, 0%);
}
.menu-panel .wp-block-navigation .wp-block-navigation-item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.menu-panel .wp-block-navigation-submenu__toggle {
  background-color: transparent;
}

.shop-navigation {
  position: absolute;
  bottom: 30px;
}

.menu-panel.slide-menu .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container {
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 100vh;
  z-index: 9;
  padding-top: 140px;
  padding-left: 30px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  row-gap: 28px;
  visibility: visible !important;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
  background-color: #f2efd7 !important;
}
.menu-panel.slide-menu .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container .submenu-close {
  position: absolute;
  top: 30px;
  right: 15px;
  display: block;
  width: 24px;
  height: 24px;
}

.menu-panel.slide-menu .wp-block-navigation .wp-block-navigation-item.opened .wp-block-navigation__submenu-container {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

.open-on-click > span {
  display: none !important;
}

body .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
  padding-right: 0;
}

/*-------------------------------------------- general-start*/
body {
  -webkit-animation: fadeInAnimation ease 2s;
          animation: fadeInAnimation ease 2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
html#html {
  margin-top: 0px !important;
}

html.theme-wrap,
html.no-js {
  margin-top: 0px !important;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

body.page-template-homepage main {
  margin-top: 0px !important;
}

p:empty {
  display: none;
}

article:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.entry-content {
  margin-top: 0px;
}

article.post,
article.page {
  margin-bottom: 0px;
}

.tb-fields-and-text {
  width: 100%;
}

.site {
  position: relative;
}

.site-main {
  position: relative;
}
.site-main ul, .site-main ol {
  margin-left: 20px;
  margin-bottom: 30px;
}

article {
  position: relative;
  z-index: 2;
}

p {
  margin-bottom: 20px;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}

body .is-layout-constrained > p {
  margin-bottom: 20px;
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}

.logged-in .menu-close {
  position: absolute;
  top: 86wpx;
}

main {
  position: relative;
}
.entry-content img.alignnone {
  width: 100%;
  height: auto;
}
.entry-content figure {
  -webkit-margin-after: 20px;
          margin-block-end: 20px;
}

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

.entry-content p a {
  color: var(--wp--preset--color--themecolor-3);
}
.entry-content p a:link, .entry-content p a:visited {
  text-decoration: none;
}
.entry-content p a:hover, .entry-content p a:active {
  text-decoration: underline;
}
.entry-content p a:after {
  content: url(../derotterdamsezorg/assets/images/link-arrow.svg);
  display: inline-block;
  margin-left: 2px;
  margin-right: 5px;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
}

.four-column-section .wp-block-column {
  -ms-flex-preferred-size: 50% !important;
      flex-basis: 50% !important;
}
@media only screen and (min-width: 992px) {
  .four-column-section .wp-block-column {
    -ms-flex-preferred-size: 25% !important;
        flex-basis: 25% !important;
  }
}

.tile {
  aspect-ratio: 596/516;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 75%;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.tile:hover, .tile:active {
  opacity: 100%;
}
.tile > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.tile a {
  text-decoration: none;
}

.header-wrapper {
  z-index: 9;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.sticky-image {
  top: 105px;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .sticky-image {
    min-height: calc(100vh - 248px) !important;
    max-height: calc(100vh - 105px) !important;
  }
}
.sticky-image * {
  height: 100%;
  max-height: calc(100vh - 105px) !important;
}
.sticky-image img {
  width: 100% !important;
  height: calc(65vh - 105px) !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media only screen and (min-width: 768px) {
  .sticky-image img {
    height: 100% !important;
    max-height: calc(100vh - 105px) !important;
  }
}

/*
.quote-blok{
    padding-left: 30px !important;    
    padding-right: 30px !important;   
    padding-top: 60px !important;  
    padding-bottom: 60px !important;  
    @include respond-to(tablet){
        padding-top: 50vh  !important;  
        transform: translateY(-30%);   
        padding-bottom: 0px !important;     
    }
}  

*/
@media only screen and (min-width: 768px) {
  .sidebar {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: calc(100vh - 370px);
    max-height: calc(100vh - 370px);
  }
}
.sidebar .quote-blok {
  padding: 60px;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .sidebar .quote-blok {
    padding: 0px;
  }
}

.drz-button a,
.wp-block-search__button,
.mailchimp-button {
  background-color: var(--wp--preset--color--themecolor-1);
  border-radius: 0px;
  color: var(--wp--preset--color--wit) !important;
  font-size: clamp(14px, 0.875rem + (1vw - 3.2px) * 0.179, 16px);
  padding-top: 15px;
  padding-right: 25px;
  padding-bottom: 15px;
  padding-left: 25px;
  font-weight: 400 !important;
  text-decoration: none;
}
.drz-button a:hover, .drz-button a:active,
.wp-block-search__button:hover,
.wp-block-search__button:active,
.mailchimp-button:hover,
.mailchimp-button:active {
  background-color: var(--wp--preset--color--themecolor-4);
  color: var(--wp--preset--color--themecolor-1) !important;
}
.drz-button a:after,
.wp-block-search__button:after,
.mailchimp-button:after {
  display: inline-block;
  content: ">";
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  font-weight: 900;
  font-size: 1.3em;
  text-decoration: none;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  margin-left: 5px;
}

.wp-block-button__link:hover, .wp-block-button__link:active {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base) !important;
}

body.logged-in #wpadminbar {
  display: none !important;
}

body.logged-in {
  margin-top: 0px;
}
@media only screen and (min-width: 801px) {
  body.logged-in {
    margin-top: 0;
  }
  body.logged-in #wpadminbar {
    display: block !important;
  }
}
@media screen and (max-width: 782px) {
  html {
    margin-top: 0px !important;
  }
}
.frm_checkbox a {
  display: inline !important;
}

body .wp-block-image figcaption {
  font-size: 0.8rem;
}

.wp-block-social-links {
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
}

.header-margin {
  padding-top: 105px !important;
}

body main {
  margin-top: 105px !important;
  min-height: calc(100vh - 248px) !important;
}

.jet-engine-frontend-query-editor-buttons {
  display: none !important;
}

/* =structure 
-------------------------------------------------------------- */
.map-wrapper {
  position: relative;
  aspect-ratio: 16/9;
}
.map-wrapper iframe {
  width: 100%;
  height: 100%;
}

.cover-wrapper {
  position: relative;
}

.header-wrapper {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 999;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
}
.header-wrapper .wp-block-navigation__submenu-container {
  background-color: transparent !important;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
}
.header-wrapper .custom-logo img {
  -webkit-transition: all ease-out 0.2s;
  transition: all ease-out 0.2s;
}
.header-wrapper.show {
  position: fixed;
  top: 0px;
  margin-top: var(--wp-admin--admin-bar--height);
  background-color: #F2F1E7;
  bottom: unset;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
  border-bottom: solid 1px #D0D0D0;
}
.header-wrapper.show .wp-block-navigation__submenu-container {
  background-color: #F2F1E7 !important;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
}
.header-wrapper.show .custom-logo img {
  width: 60px !important;
  height: auto !important;
}

header {
  z-index: 3;
  width: 100%;
  -webkit-transition: background-color ease-out 0.5s;
  transition: background-color ease-out 0.5s;
  margin-top: 0px;
}
@media only screen and (min-width: 768px) {
  header .custom-logo-link {
    width: 100%;
  }
}
header .custom-logo-link img {
  width: 100%;
  height: auto;
}
header .wp-block-button {
  -webkit-transform: scale(0.91);
          transform: scale(0.91);
  -webkit-transform-origin: right;
          transform-origin: right;
}

.destination-navigation {
  top: calc(62px + var(--wp-admin--admin-bar--position-offset, 0px)) !important;
}

.navigation-wrapper .custom-logo-link img {
  width: 100%;
  height: auto;
}
.navigation-wrapper .navigationbar-container {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
}
.navigation-wrapper .hide-mobile {
  display: none;
}
.navigation-wrapper .navigationbar-bottom {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .navigation-wrapper .navigationbar-bottom {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.navigationbar-top {
  width: 100%;
}

header.show .custom-logo-link img {
  display: block;
}
header.show .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--themecolor-1) !important;
}
.wp-container-5 {
  z-index: 11 !important;
}

/*-----------------------------------------------wpml */
li[data-wpml=language-item]:first-of-type {
  margin-top: 0px !important;
}

.wpml-language-switcher-block ul.horizontal-list {
  gap: 10px !important;
  font-size: 0.8em;
}

.header-search {
  display: none;
}
.header-search input:focus-visible {
  outline: none;
}
@media only screen and (min-width: 768px) {
  .header-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.header-search .jet-ajax-search__form {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--black) !important;
}
.header-search .jet-ajax-search__field {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--themecolor-black) !important;
  border-top: solid 1px var(--wp--preset--color--white) !important;
  border-left: solid 1px var(--wp--preset--color--white) !important;
  border-right: solid 1px var(--wp--preset--color--white) !important;
  border-bottom: solid 1px var(--wp--preset--color--black) !important;
}
.header-search .jet-ajax-search__submit[type=submit],
.header-search .jet-ajax-search-block .jet-ajax-search__submit[type=submit] {
  color: var(--wp--preset--color--themecolor-black) !important;
  border: solid 1px var(--wp--preset--color--white) !important;
  background-color: var(--wp--preset--color--white) !important;
  width: 0% !important;
  margin: 0px 0 0 !important;
}
.header-search .jet-ajax-search__submit[type=submit]:hover,
.header-search .jet-ajax-search-block .jet-ajax-search__submit[type=submit]:hover {
  color: var(--wp--preset--color--themecolor-black) !important;
  border: solid 1px var(--wp--preset--color--white) !important;
  background-color: var(--wp--preset--color--white) !important;
}

.search-list-type {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

.jet-ajax-search__full-results {
  color: var(--wp--preset--color--1) !important;
}

.header-search {
  display: none;
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 200px;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  cursor: pointer;
}
.header-search.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.social-icons .wp-social-link {
  background: #FBEC0D;
  background: linear-gradient(45deg, rgb(251, 236, 13) 0%, rgb(255, 183, 0) 100%);
}

.footer-wrapper:before {
  content: "";
  background-image: url("assets/images/marion_werkt_beeld.webp");
  background-size: contain;
  background-position: center;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  aspect-ratio: 1354/2117;
  opacity: 0.5;
}
.footer-wrapper:after {
  content: "";
  background-image: url("assets/images/marion_werkt_beeld.webp");
  background-size: contain;
  background-position: center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  aspect-ratio: 1354/2117;
  opacity: 0.5;
}

[class*=colourscheme-] a:link, [class*=colourscheme-] a:visited {
  color: #fff;
}
[class*=colourscheme-] a:hover, [class*=colourscheme-] a:active {
  color: #fff;
}

.colourscheme-1 {
  background-color: #CDD7E9;
  color: #fff;
}

.colourscheme-2 {
  background-color: #F3B118;
  color: #fff;
}

.colourscheme-3 {
  background-color: #A22B28;
  color: #fff;
}

.colourscheme-4 {
  background-color: #6A4797;
  color: #fff;
}

.colourscheme-5 {
  background-color: #009CB3;
  color: #fff;
}

.agenda-listing .jet-listing-grid__item .jet-engine-listing-overlay-wrap > div {
  height: 100%;
}
.agenda-listing .jet-listing-grid__item:hover .jet-engine-listing-overlay-wrap > div,
.agenda-listing .jet-listing-grid__item:active .jet-engine-listing-overlay-wrap > div {
  background-color: var(--wp--preset--color--themecolor-3);
}

.partner-listing .jet-listing-grid__items > .jet-listing-grid__item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.medewerker-listing .jet-listing-grid__item:hover .jet-engine-listing-overlay-wrap > div,
.medewerker-listing .jet-listing-grid__item:active .jet-engine-listing-overlay-wrap > div {
  background-color: var(--wp--preset--color--themecolor-3);
}

.fill-height {
  position: relative;
  height: 40vw;
  padding: 0px;
}
.fill-height .wp-block-cover__inner-container {
  height: 100%;
  display: block;
}
.fill-height .wp-block-cover__inner-container > div {
  height: 100%;
}
.fill-height .wp-block-cover__inner-container > div > div {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.search-result-listing .jet-listing-grid__item:link, .search-result-listing .jet-listing-grid__item:visited {
  opacity: 0.8;
  color: var(--wp--preset--color--themecolor-3);
}
.search-result-listing .jet-listing-grid__item:hover, .search-result-listing .jet-listing-grid__item:active {
  opacity: 1;
  color: var(--wp--preset--color--themecolor-3);
}

/* =Flip cards
-------------------------------------------------------------- */
.flip-card-back {
  display: none;
}

.card-link {
  display: block;
}

.flip-card {
  background-color: transparent;
  -webkit-perspective: 1000px;
          perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  aspect-ratio: 1/1;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-back {
  display: block;
}

.card-link {
  display: none;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  overflow: hidden;
}
.flip-card-front .card-title {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  padding: 30px 15px 25% 15px;
  background: rgb(0, 0, 0);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(30%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  color: var(--wp--preset--color--white);
  font-weight: 600;
}

/* Style the back side */
.flip-card-back {
  color: white;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  text-align: left;
  overflow: hidden;
}
.flip-card-back > div {
  padding: 15px !important;
  font-size: 15px !important;
}

.accordeon-title {
  cursor: pointer;
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.accordeon-title .accordeon-icon {
  font-size: var(--wp--preset--font-size--large) !important;
}
.accordeon-title:hover, .accordeon-title:active {
  color: var(--wp--preset--color--themecolor-3);
}
.accordeon-title.opened {
  opacity: 1;
  color: var(--wp--preset--color--themecolor-3);
}
.accordeon-title.opened .accordeon-icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: rotate 1s ease-out;
  transition: rotate 1s ease-out;
}

.accordeon-content {
  display: none;
}
.accordeon-content .partner-projectlijst .jet-listing-grid__item {
  display: list-item;
  margin-left: 20px;
  padding: 0px;
}
.accordeon-content .partner-projectlijst .jet-listing-grid__item a:hover, .accordeon-content .partner-projectlijst .jet-listing-grid__item a:active {
  color: var(--wp--preset--color--themecolor-3);
}
.accordeon-content .partner-projectlijst p {
  margin-bottom: 0px;
  -webkit-margin-after: 0px;
  margin-block-end: 0px;
}

.slide-container-wrapper {
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.slide-container {
  height: 100%;
}

body .jet-listing .slick-track, body .jet-listing-dynamic-field__content .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.headerslider img {
  -o-object-fit: cover;
     object-fit: cover;
}

.cb-carousel-block {
  max-height: 65vh;
  overflow: hidden;
}
.cb-carousel-block .swiper, .cb-carousel-block .slide-container-wrapper, .cb-carousel-block .slide-container, .cb-carousel-block figure, .cb-carousel-block img {
  max-height: 65vh;
  max-width: none;
  width: 100%;
}
.cb-carousel-block .swiper-slide {
  height: 45vw;
}
.cb-carousel-block .slide-container-wrapper {
  max-width: 1280px;
  padding: 0 30px;
  margin: 0 auto;
}
@media only screen and (min-width: 1200px) {
  .cb-carousel-block .slide-container-wrapper {
    padding: 0px;
  }
}

.highlight-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  width: 100%;
  max-width: var(--wp--style--global--content-size);
  padding-left: 30px;
  pointer-events: none;
}
@media only screen and (min-width: 1200px) {
  .highlight-wrapper {
    padding: 0px;
  }
}
.highlight-wrapper .highlight {
  pointer-events: all;
}