/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Triplepro Online Marketing
*   www.onlinemarketing.triplepro.nl
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/eqs4uan.css");

:root
{
  /*--font-size                      : 16px;*/
  --font-size                      : clamp(12px, 0.85vw, 32px);
  --font-text                      : Montserrat, sans-serif;
  --font-header                    : Dystopian, sans-serif;

  --color-dark                     : hsl(240 78% 18%);
  --color-light                    : lch(100 0 0);

  --color-usp                      : hsl(154 62% 60%);
  --color-button                   : hsl(154 62% 60%);
  --color-link                   : hsl(154 62% 60%);

  --website-content-width          : 85em;
  --element-padding                : calc(calc(100vw - var(--website-content-width)) / 2);

  --color-1                        : hsl(231 91% 96%);
  --color-2                        : hsl(230 92% 90%);
  --color-3                        : hsl(230 91% 56%);
  --color-4                        : hsl(240 78% 18%);
  --color-5                        : #FF7C66;

  --transparent-color-4            : hsl(240 78% 18% / 45%);

  --color-personeel-algemeen-dark  : hsl(230 91% 56%);
  --color-personeel-algemeen-light : hsl(230 91% 96%);

  --color-personeel-directie-dark  : hsl(230 91% 56%);
  --color-personeel-directie-light : hsl(230 91% 96%);

  --color-personeel-sea-dark       : hsl(28 100% 50%);
  --color-personeel-sea-light      : hsl(28 100% 90%);

  --color-personeel-seo-dark       : hsl(137 55% 55%);
  --color-personeel-seo-light      : hsl(137 29% 88%);

  --color-personeel-cro-dark       : hsl(0 79% 63%);
  --color-personeel-cro-light      : hsl(0 100% 90%);

  --color-personeel-sales-dark     : hsl(260 100% 75%);
  --color-personeel-sales-light    : hsl(260 100% 95%);

  --color-personeel-social-dark    : hsl(317 68% 62%);
  --color-personeel-social-light   : hsl(317 68% 89%);

  --color-personeel-tmt-dark       : hsl(213 100% 60%);
  --color-personeel-tmt-light      : hsl(213 100% 88%);
}

/** BASE
 ***********************************************/

html
{
  color           : var(--color-dark);
  font-size       : var(--font-size);
  font-family     : var(--font-text);
  font-weight     : 600;
  line-height     : 1.8;

  scroll-behavior : smooth;
}

@media (max-width : 1365px)
{
  html
  {
    font-size : 14px;
  }
}

@media (max-width : 768px)
{

  
    :root {
    --font-size: 16px !important;
  }
}

h1
{
  color       : var(--color-dark);
  font-size   : 3rem;
  font-weight : 900;
  font-family : var(--font-header);

  line-height : 1.1;

  margin      : 0 0 0.25em;
}

h2
{
  color       : var(--color-dark);
  font-size   : 3rem;
  font-weight : 900;
  font-family : var(--font-header);
  line-height : 1.1;

  margin      : 0 0 0.25em;
}

@media (max-width : 768px)
{
  h1
  {
    font-size : 2rem;
  }

  h2
  {
    font-size : 1.8rem;
  }
}

body:not(#home) h2
{
  color : var(--color-3);
}

body:not(#home) .partnerblokken h2
{
  color : var(--color-dark);
}

p:last-of-type
{
  margin : 0;
}

p, .element.text ol li
{
  font-weight : 400;
}

.textbold
{
  font-weight : 600;
}

h1, h2, h3, h4, h5, h6, .title
{
  text-transform : lowercase;
}

a
{
  color : var(--color-link);
}

a:hover
{
  text-decoration : underline;
}

a.button
{
  color            : var(--color-dark);
  font-weight      : 600;
  text-align       : center;
  text-decoration  : none;
  align-items      : center;

  position         : relative;
  display          : inline-flex;
  width            : max-content;
  padding          : 0.5em 1em 0.5em 2em;

  background-color : var(--color-button);
  border-radius    : 0.4em;
  transition       : 0.3s;
}

@media (max-width : 768px)
{
  a.button
  {
    font-size : 16px;
  }
  
  h1, h2, h3, h4, h5, h6, .title {
      word-break: break-word;
  }
}

a.button.align_right
{
  float : right;
}

a.button:before
{
  content     : "\f1e1";
  font-family : "Material Symbols Outlined";
  font-weight : bold;
  position    : absolute;
  left        : 0.7em;
}

a.button:hover
{
  padding          : 0.65em 1.25em 0.65em 2.25em;
  margin           : -0.15em -0.25em -0.15em -0.25em;
  background-color : var(--color-button);
}

a.button.light
{
  background-color : var(--color-light);
}

a.button.inverse
{
  border           : 2px solid var(--color-dark);
  background-color : transparent;
}

abbr[title]
{
  border-bottom   : none;
  text-decoration : none;
}

/** DOODLE
 ***************************/

h2 u
{
  position        : relative;
  text-decoration : none;
  z-index         : 1;
}

h2 u:after
{
  content           : "";

  position          : absolute;
  bottom            : 0;
  left              : -0.25em;
  right             : 0;

  margin            : 0 auto;
  height            : 0.7em;
  width             : calc(100% + 0.75em);

  background-image  : url("img/doodle_4.svg");
  background-repeat : no-repeat;
  background-size   : 100% 100%;

  z-index           : -1;
}

.doodle_dot
{
  color : var(--color-usp);
}

.doodle_1,
.doodle_2,
.doodle_3,
.doodle_4
{
  position : relative;
}

.doodle_1:after
{
  content           : '';

  position          : absolute;
  top               : -1rem;
  right             : -3rem;

  width             : 4.25rem;
  height            : 4.25rem;

  background-image  : url('img/doodle_1.svg');
  background-repeat : no-repeat;
  background-size   : 100% 100%;
}

@media (max-width : 1365px)
{
  .doodle_1:after
  {
    top : -2.5rem;
  }
}

.doodle_2:after
{
  content           : '';
  width             : 15em;
  height            : 15em;

  position          : absolute;
  top               : -7em;
  right             : -7em;

  background-image  : url('img/doodle_2.svg');
  background-repeat : no-repeat;
  background-size   : 100% 100%;

  z-index           : 2;
}

.doodle_3:after
{
  content           : '';

  width             : 2.5em;
  height            : 2.5em;

  position          : absolute;
  top               : -1.8em;
  right             : 0.3em;

  background-image  : url('img/doodle_3.svg');
  background-repeat : no-repeat;
  background-size   : 100% 100%;

  z-index           : 2;
}

@media (min-width : 1365px)
{
  .doodle_4:after
  {
    content           : '';

    position          : absolute;
    top               : -2rem;
    right             : -3rem;

    width             : 4.25rem;
    height            : 4.25rem;

    background-image  : url('img/doodle_1.svg');
    background-repeat : no-repeat;
    background-size   : 100% 100%;
  }
}

/** ALIGN
 ***************************/

.align
{
  position : relative;
  height   : 100%;
}

.align > .button
{
  position : absolute;
}

.align.right > .button
{
  right : 0;
}

.align.bottom > .button
{
  bottom : 1.25rem;
}

/** OL ( CHECKMARKS )
 ***************************/

.element.text ol
{
  padding : 0;
}

.element.text ol li
{
  font-size     : 1em;
  text-align    : left;

  position      : relative;

  display       : block;
  padding-left  : 1.75em;
  margin-bottom : 0.75em;
}

.element.text ol li p
{
  margin : 0;
}

.element.text ol li:before
{
  content          : "\e5ca";

  color            : var(--color-4);
  font-size        : 1.1em;
  font-weight      : bold;
  font-family      : 'Material Symbols Outlined', sans-serif;

  position         : absolute;
  left             : 0;
  top              : 0.1em;

  display          : flex;
  width            : 1.3em;
  height           : 1.3em;

  align-items      : center;
  justify-content  : center;

  border-radius    : 0.2em;
  background-color : var(--color-usp);
}

/** MODULE
 ***********************************************/

.navigation .left:before,
.navigation .right:before,
.navigation .arc_left:before,
.navigation .arc_right:before
{
  content          : '\e5c8';
  font-family      : 'Material Symbols Outlined', sans-serif;

  color            : white;
  mix-blend-mode   : multiply;

  font-size        : 1.1em;
  align-items      : center;
  justify-content  : center;

  display          : inline-flex;
  height           : 1.25em;
  width            : 1.25em;

  border-radius    : 0.3em;

  border           : 2px solid var(--color-4);
  background-color : var(--color-4);

  cursor           : pointer;
}

.navigation .left:hover:before,
.navigation .right:hover:before,
.navigation .arc_left:hover:before,
.navigation .arc_right:hover:before
{
  color            : var(--color-4);
  background-color : transparent;
}

.navigation .right:before,
.navigation .arc_right:before
{
  content     : '\e5c8';
  margin-left : 0.1em;
}

.navigation .left:before,
.navigation .arc_left:before
{
  content      : '\e5c4';
  margin-right : 0.1em;
}

/** PORTFOLIO
 ***************************/

#home .module.portfolio .row:nth-child(2n+1)
{
  transform : rotate(-5deg);
}

#home .module.portfolio .row:nth-child(2n+2)
{
  transform : rotate(5deg);
}

.module.portfolio .row
{
  --portfolio-radial-color : #21409A;
}

.module.portfolio .row
{
  background-image : radial-gradient(50% 50% at 50% 50%, hsl(from var(--portfolio-radial-color) h calc(s + 23) calc(l + 27)) 0%, var(--portfolio-radial-color));
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .module.portfolio .visible .scroller .row {
        background-color: color(srgb 0.0392 0.0392 0.3197);
    }
}


@media (max-width : 997px)
{

}

/** CARROUSEL
 ***************************/

.module.carrousel
{
  height : 5.3em;
}

.module.carrousel .visible
{
  background-color : #FFFFFF;
}

.module.carrousel .visible figure img
{
  height           : 5.3em;
  padding          : 1em 1em;
  margin           : 0 0.3em;
  background-color : var(--color-light);
}

.module.carrousel .visible figure.animate
{
  padding : 0 30px;
}

.module.carrousel .visible[data-navigation]:before,
.module.carrousel .visible[data-navigation]:after
{
  color       : var(--color-5);
  padding-top : 2em;
}


/** KRUIMELPAD
 ***************************/

.module.kruimelpad
{
  padding-top    : 0.5em;
  padding-bottom : 0.25em;
}


.case .module.kruimelpad a
{
  text-decoration : underline;
  font-weight     : 300;
}

.case .module.kruimelpad a:last-child
{
  text-decoration : none;
}

/*.case .module.kruimelpad a {*/
/*  color: var(--color-3);*/
/*}*/

@media (min-width : 997px)
{
  .module.kruimelpad a
  {
    color : #FFFFFF;
  }
}

/** BLOG
 ***************************/

/**
 * arc
 */
@media (min-width : 1365px)
{
  .module.blog .visible
  {
    overflow : visible;
  }

  .module.blog .scroller
  {
    width : 100%;
    left  : 0 !important;
  }

  .module.blog .navigation
  {
    position : relative;
    z-index  : 2;
  }

  .module.blog .rotator
  {
    position                   : absolute;
    left                       : 0;
    right                      : 0;
    top                        : 0;
    margin                     : 0 auto;

    display                    : inline-block;
    height                     : calc(155em + 3vw);

    transform                  : rotate(60deg);
    transform-origin           : center bottom;
    z-index                    : 0;

    transition                 : transform 1s;
    transition-timing-function : ease-in-out;
  }

  .module.blog .visible .scroller .rotator .row
  {
    position : absolute;
    left     : 0;
    right    : 0;
    margin   : 0 auto;

    display  : inline-block;
    width    : min-content;
    height   : min-content;
  }

  .module.blog .visible
  {
    pointer-events : none;
  }

  .module.blog .visible .row
  {
    pointer-events : auto;
  }

  .module.blog .visible[data-navigation=left]:before,
  .module.blog .visible[data-navigation=right]:before
  {
    content : unset;
  }

  .module.blog .navigation.scroller
  {
    pointer-events : none;
    display        : none;
  }
}

@media (max-width : calc(1365px - 1px))
{
  .module.blog .navigation.arc
  {
    pointer-events : none !important;
    display        : none !important;
  }

  .module.blog .rotator
  {
    transform : unset !important;
  }
}

/**
 * Normal scroller
 */

.module.blog a:hover
{
  text-decoration : none;
}

.module.blog .visible
{
  height : 25em;
}

.module.blog .visible .scroller .row
{
  margin-right : 1em;
}

.module.blog .visible .scroller .row img
{
  width  : 100%;
  height : 100%;

  border : none;

  filter : brightness(0.75);
  
  object-fit: cover;
}

.module.blog .content
{
  position      : relative;

  box-shadow    : 0 0.15em 0.25em hsla(0, 0%, 0%, 0.2);

  border        : 0.5em solid transparent;
  border-radius : 1em;

  overflow      : hidden;
}

.module.blog .content .title
{
  font-size   : 1em;
  font-weight : bold;
  line-height : 1.25;

  height      : 3.5em;
  padding     : 0.5em 0.3em 0;
}

.module.blog .image
{
  height        : 12.5em;

  border-radius : 0.4em;
  overflow      : hidden;
}

.module.blog .content .text
{
  font-size : 0.85em;
  padding   : 0 0.3em 0.5em;
}

.module.blog .content .collections
{
  font-weight   : 700;

  position      : absolute;
  top           : 1em;
  right         : 1em;

  max-width     : calc(100% - 2em);
  padding       : 0.1em 1em 0.05em;

  border-radius : 1em;
}

/** BLOG COLORS
 ***************************/

.module.blog .content
{
  background-color : var(--color-personeel-algemeen-light);
}

.module.blog .content[data-collection*=SEA]
{
  background-color : var(--color-personeel-sea-light);
}

.module.blog .content[data-collection*=email],
.module.blog .content[data-collection*=marketing],
.module.blog .content[data-collection*=SEO]
{
  background-color : var(--color-personeel-seo-light);
}

.module.blog .content[data-collection*=CRO]
{
  background-color : var(--color-personeel-cro-light);
}

.module.blog .content[data-collection*=marketing]
{
  background-color : var(--color-personeel-sales-light);
}

.module.blog .content[data-collection*=social]
{
  background-color : var(--color-personeel-social-light);
}

.module.blog .content[data-collection*=content],
.module.blog .content[data-collection*=website],
.module.blog .content[data-collection*=webshop],
.module.blog .content[data-collection*=websitetools]
{
  background-color : var(--color-personeel-tmt-light);
}

.module.blog .content .title,
.module.blog .content .text
{
  color : var(--color-personeel-algemeen-dark);
}

.module.blog .content[data-collection*=SEA] .title,
.module.blog .content[data-collection*=SEA] .text
{
  color : var(--color-personeel-sea-dark);
}

.module.blog .content[data-collection*=email] .title,
.module.blog .content[data-collection*=email] .text,
.module.blog .content[data-collection*=SEO] .title,
.module.blog .content[data-collection*=SEO] .text
{
  color : var(--color-personeel-seo-dark);
}

.module.blog .content[data-collection*=CRO] .title,
.module.blog .content[data-collection*=CRO] .text
{
  color : var(--color-personeel-cro-dark);
}

.module.blog .content[data-collection*=marketing] .title,
.module.blog .content[data-collection*=marketing] .text
{
  color : var(--color-personeel-sales-dark);
}

.module.blog .content[data-collection*=social] .title,
.module.blog .content[data-collection*=social] .text
{
  color : var(--color-personeel-social-dark);
}

.module.blog .content[data-collection*=content] .title,
.module.blog .content[data-collection*=content] .text,
.module.blog .content[data-collection*=website] .title,
.module.blog .content[data-collection*=website] .text,
.module.blog .content[data-collection*=webshop] .title,
.module.blog .content[data-collection*=webshop] .text,
.module.blog .content[data-collection*=websitetools] .title,
.module.blog .content[data-collection*=websitetools] .text
{
  color : var(--color-personeel-tmt-dark);
}

/** PERSONEEL
 ***************************/

.personnel_filter
{
  display    : flex;
  flex-flow  : row wrap;
  gap        : 1em;

  padding    : 0;

  list-style : none;
}

.personnel_filter li a
{
  color            : var(--color-3);
  font-weight      : bold;

  display          : inline-block;
  padding          : 0.3em 1em 0.2em;

  box-shadow       : 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.2);
  border-radius    : 1em;
  background-color : var(--color-2);
}

.personnel_filter li a:hover
{
  box-shadow : 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.5);
}

.module.personeel .hidden
{
  display : none;
}

.module.personeel .visible
{
  height : 22.5em;
}

.module.personeel .visible .scroller .row
{
  margin-right : 1em;
}

.module.personeel .visible .scroller .row img
{
  object-fit : cover;
  height     : 100%;
  width      : 100%;

  border     : none;

  filter     : brightness(0.75);
}

.module.personeel .content
{
  position      : relative;

  box-shadow    : 0 0.15em 0.25em hsla(0, 0%, 0%, 0.2);

  border        : 0.35em solid transparent;
  border-radius : 1em;

  overflow      : hidden;
}

.module.personeel .content .title
{
  font-size   : 1.5em;
  font-weight : 900;

  position    : absolute;
  left        : 1em;
  bottom      : 1em;

  max-width   : calc(100% - 1em);
}

.module.personeel .content .collections
{
  font-weight   : 700;

  position      : absolute;
  top           : 1em;
  right         : 1em;

  max-width     : calc(100% - 2em);
  padding       : 0.1em 1em 0.05em;

  border-radius : 1em;
}

@media (max-width : 997px)
{
  .module.personeel, .module.blog
  {
    margin-bottom : 25px;
  }
}


/** DEPARTMENT COLORS
 ***************************/

.module .content
{
  border-color : var(--color-personeel-algemeen-light);
}

.module .content .title
{
  color : var(--color-personeel-algemeen-light);
}

.module .content .collections
{
  color            : var(--color-personeel-algemeen-dark);
  background-color : var(--color-personeel-algemeen-light);
}

.module .content[data-collection*=SEA]
{
  border-color : var(--color-personeel-sea-light);
}

.module .content[data-collection*=SEA] .title
{
  color : var(--color-personeel-sea-light);
}

.module .content[data-collection*=SEA] .collections
{
  color            : var(--color-personeel-sea-dark);
  background-color : var(--color-personeel-sea-light);
}

.module .content[data-collection*=SEO],
.module .content[data-collection*=email]
{
  border-color     : var(--color-personeel-seo-light);
  background-color : var(--color-personeel-seo-light);
}

.module .content[data-collection*=SEO] .title,
.module .content[data-collection*=email] .title
{
  color : var(--color-personeel-seo-light);
}

.module .content[data-collection*=SEO] .collections,
.module .content[data-collection*=email] .collections
{
  color            : var(--color-personeel-seo-dark);
  background-color : var(--color-personeel-seo-light);
}

.module .content[data-collection*=CRO]
{
  border-color : var(--color-personeel-cro-light);
}

.module .content[data-collection*=CRO] .title
{
  color : var(--color-personeel-cro-light);
}

.module .content[data-collection*=CRO] .collections
{
  color            : var(--color-personeel-cro-dark);
  background-color : var(--color-personeel-cro-light);
}

.module .content[data-collection*=marketing]
{
  border-color : var(--color-personeel-sales-light);
}

.module .content[data-collection*=marketing] .title
{
  color : var(--color-personeel-sales-light);
}

.module .content[data-collection*=marketing] .collections
{
  color            : var(--color-personeel-sales-dark);
  background-color : var(--color-personeel-sales-light);
}

.module .content[data-collection*=social]
{
  border-color : var(--color-personeel-social-light);
}

.module .content[data-collection*=social] .title
{
  color : var(--color-personeel-social-light);
}

.module .content[data-collection*=social] .collections
{
  color            : var(--color-personeel-social-dark);
  background-color : var(--color-personeel-social-light);
}

.module .content[data-collection*=content],
.module .content[data-collection*=websitetools]
{
  border-color     : var(--color-personeel-tmt-light);
  background-color : hsl(215 100% 90% / 80%);
}

.module .content[data-collection*=content] .title,
.module .content[data-collection*=websitetools] .title
{
  color : var(--color-personeel-tmt-light);
}

.module .content[data-collection*=content] .collections,
.module .content[data-collection*=websitetools] .collections
{
  color            : var(--color-personeel-tmt-dark);
  background-color : var(--color-personeel-tmt-light);
}

.module .content[data-collection*="SEO kennisbank websitetools"] .image img
{
  object-position : 0 0;
}

.module.blog .content .title
{
  padding-top : 10px;
}

/** GALLERY
 ***************************/

.module.gallery a
{
  box-shadow : none;
}

.module.gallery figure div
{
  height : 16em;
}

/** ARTIKEL OVERVIEW
 ***************************/

.module.artikel.overview > ul > li
{
  padding       : 0;
  margin        : 0;
  border-radius : 1em 1em 0 0;
  overflow      : hidden;
}

.module.artikel.overview .content
{
  padding : 0 2rem;
}

/** SCROLLING SECTIONS
 ***************************/

.mwg_effect031
{
  padding  : 0 0 0;
  position : relative;
  overflow : hidden;
}

.mwg_effect031 .slide
{
  height : 125vh;
}

.mwg_effect031 .content-wrapper
{
  width       : 100%;
  height      : 100%;

  perspective : 250vw;
}

.mwg_effect031 .content
{
  position         : absolute;
  inset            : 0;
  transform-style  : preserve-3d;
  transform-origin : 50% 10%;

  display          : flex;
  flex-direction   : column;

  border-radius    : 3em 3em 0 0;
  overflow         : hidden;
}

.mwg_effect031 .slide:nth-child(2n+2) .content
{
  background-color : var(--color-light);
}

.mwg_effect031 .slide:nth-child(4n+1) .content
{
  background-color : var(--color-2);
}

.mwg_effect031 .slide:nth-child(4n+3) .content
{
  background-color : var(--color-1);
}

.mwg_effect031 .slide .content .header
{
  font-size   : 2em;
  font-weight : 800;
  max-width   : 85%;
  line-height : 1.5;
  margin      : 1em 0;
}

#hoofd .mwg_effect031 .slide:nth-child(2n+2) .content .header
{
  color : var(--color-dark);
}

#hoofd .mwg_effect031 .slide:nth-child(4n+1) .content .header
{
  color : var(--color-3);
}

#hoofd .mwg_effect031 .slide:nth-child(4n+3) .content .header
{
  color : var(--color-3);
}

.mwg_effect031 .module.artikel.overview .slide
{
  counter-increment : slide;
}

.mwg_effect031 .module.artikel.overview .slide .content::after
{
  content       : counter(slide, decimal-leading-zero);
  position      : absolute;
  top           : 20px;
  right         : 20px;
  padding       : 6px 12px;
  border-radius : 6px;
  font-size     : 18px;
  font-weight   : bold;
  z-index       : 9999;
}

.mwg_effect031 .module.artikel.overview .slide:nth-of-type(odd) .content::after
{
  color       : var(--color-3);
  font-size   : 2em;
  font-weight : 800;
  font-family : var(--font-header);
}

.mwg_effect031 .module.artikel.overview .slide:nth-of-type(even) .content::after
{
  color       : var(--color-dark);
  font-size   : 2em;
  font-weight : 800;
  font-family : var(--font-header);
}

.mwg_effect031 .module.artikel.overview .slide img
{
  border-radius : 1em;
  object-fit    : cover;
  width         : 100%;
}

@media (min-width : 768px)
{
  .mwg_effect031 .module.artikel.overview .slide img
  {
    height : 460px;
  }

  .mwg_effect031 .content
  {
    padding : 20px 100px !important;
  }

  .mwg_effect031 .module.artikel.overview .slide .content::after
  {
    top   : 40px;
    right : 90px;
  }
}

/** ARTIKEL PAGEVIEW
 ***************************/

.module.artikel.pageview > ul
{
  margin : 1em 0 0;
}

.module.artikel.pageview label
{
  font-size   : 1.5rem;
  font-weight : 900;
  font-family : var(--font-header);

  position    : relative;
  padding     : 0.7rem 2.5rem 0.3rem 1rem;
}

.module.artikel.pageview input ~ label
{
  border-radius : 0.4rem;
}

.module.artikel.pageview input:checked ~ label
{
  border-radius : 0.4rem 0.4rem 0 0;
}

.module.artikel.pageview .content
{
  padding       : 0 1rem 0.25rem;
  border-radius : 0 0 0.4rem 0.4rem;
}

.module.artikel.pageview input ~ label,
.module.artikel.pageview input:checked ~ .content
{
  background-color : var(--color-2);
  border-bottom    : none;
  padding          : 12px 18px;
  font-size        : 17px;
}

.module.artikel.pageview input:checked ~ .content
{
  font-size        : 14px;
  padding-top      : 0;
  background-color : transparent;
}

@media (max-width : 997px)
{
  .module.artikel.pageview input ~ label, .module.artikel.pageview input:checked ~ .content
  {
    padding   : 5px 10px;
    font-size : 1.3em;
  }
}


.module.artikel.pageview input + label::after
{
  content        : '\f1e3';
  font-family    : 'Material Symbols Outlined', sans-serif;

  color          : var(--color-dark);
  text-align     : center;
  vertical-align : middle;

  position       : absolute;
  right          : 10px;
  top            : 0;
  bottom         : 0;
  margin         : auto;

  padding-right  : 0.1em;
  width          : 2em;
  height         : 1.5em;
  line-height    : 1.7em;
}

.module.artikel.pageview input:checked + label::after
{
  content : '\f1e0';
}

#hoofd > .element.text.content_block_1 ol#artikel_navigation a
{
  color           : #000000 !important;
  font-weight     : 600;
  text-decoration : underline;
}

#hoofd > .element.text.content_block_1 ol#artikel_navigation li::marker
{
  font-weight : 600;
}

#hoofd > .element.text.content_block_1 ol#artikel_navigation li::before
{
  display : none;
}

#hoofd > .element.text.content_block_1 ol#artikel_navigation li
{
  display      : list-item;
  padding-left : 10px;
}

#hoofd > .element.text.content_block_1 ol#artikel_navigation
{
  padding-left : 20px;
}

/** REVIEW
 ***************************/

@media (min-width : 1365px)
{
  .module.review .visible .scroller
  {
    right : 0;
  }
}

@media (max-width : 1365px)
{
  .module.review .navigation
  {
    padding-right : 1em;
  }
}

@media (min-width : 997px)
{
  .onlymobile
  {
    display : none;
  }

  .onlydesktop
  {
    display : flex;
  }

  #hoofd > .element.text.content_block_7:has(.onlymobile)
  {
    padding : 0 !important;
  }

  #hoofd > .element.text.content_line_7:has(.mwg_effect007),
  #hoofd > .element.text.content_line_3:has(.module.blog.overview)
  {
    padding-top    : 0 !important;
    padding-bottom : 0 !important;
  }

  #hoofd > .element.text.content_line_10:has(.personnel_filter)
  {
    padding-top : 0 !important;
  }
}

@media (max-width : 997px)
{
  #home #hoofd > .element.text.review .klanten_vertellen iframe
  {
    margin-bottom : -65px !important;
    padding-left  : 15px !important;
    max-width     : 285px !important;
  }

  .onlymobile
  {
    display : flex;
  }

  .onlydesktop
  {
    display : none;
  }
  
  .element.menu ul.responsive {
    width: 100%;
    padding: 0 12px;
  }
  
    #hoofd > .element.text:has(.contactblokpagina)
  {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
  #hoofd > .element.text.content_line_3:has(.groeiscan_werkwijze_stappen)
  {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }


  #hoofd > .element.text.content_block_6:has(.bottom.align.right.onlydesktop),
  #hoofd > .element.text.content_block_10:has(.bottom.align.right.onlydesktop),
  #hoofd > .element.text.content_block_14:has(.bottom.align.right.onlydesktop)
  {
    padding : 0 !important;
  }

  body:not(#home) #hoofd > .element.text.content_line_7 .onlymobile .button
  {
    margin-top : 20px;
  }
}

.module.review .navigation
{
  text-align    : right;
  margin-bottom : 0.5em;
  padding-right : 20px;
}

.module.review .review_block
{
  width       : 25em;
  min-width   : 25em;
  padding     : 1em 2em;

  box-shadow  : none;

  border-left : 2px dashed var(--color-2);
}

.module.review .review_block > [data-rating]
{
  margin-left : -0.2em;
}

/** ELEMENTEN
 ***********************************************/

[data-responsive] #hoofd > .element.text:empty
{
  margin  : 0;
  padding : 0;
}

/** COLUMNS
 ***************************/

.columns
{
  display   : flex;
  flex-flow : row wrap;

  gap       : 2em;
}

.column
{
  flex      : 1 1 45%;
  min-width : 25em;
}

/** BACKGROUND COLORS
 ***************************/

/** ALL
 **********************/

#hoofd > .element.text.usp.luna-scrolled
{
  background-color : var(--color-1);
  transition       : background-color 1s;
}

#hoofd > .element.text.footer
{
  background-color : var(--color-4);
}


.cursor-gif
{
  position       : fixed; /* Altijd t.o.v. het scherm */
  pointer-events : none; /* Cursor blijft “klikbaar” eronder */
  display        : none; /* Verstopt tot je hovert */
  z-index        : 9999; /* Boven alle andere elementen */
  width          : 120px; /* Pas grootte aan naar wens */
  height         : auto;
}


/** HOME
 **********************/

#home #hoofd > .element.menu.top,
#home #hoofd > .element.text.header,
#home #hoofd > .element.text.header_line,
#home #hoofd > .element.text.header_block,
#home #hoofd > .element.text.header_block_form,
#home #hoofd > .element.text.content_block_1,
#home #hoofd > .element.text.content_block_2,
#home #hoofd > .element.text.content_line_1,
#home #hoofd > .element.text.content_line_2,
#home #hoofd > .element.text.content_block_5,
#home #hoofd > .element.text.content_block_6,
#home #hoofd > .element.text.content_line_3,
#home #hoofd > .element.text.review,
#home #hoofd > .element.text.header_footer,
#home #hoofd > .element.text.header_footer_block,
#home #hoofd > .element.text.scrollbar
{
  background-color : transparent;
}

#home #hoofd > .element.menu.top.luna-scrolled,
#home #hoofd > .element.text.usp
{
  background-color : var(--color-light);
}

#home #hoofd > .element.text.usp.luna-scrolled,
#home #hoofd > .element.text.content_block_3,
#home #hoofd > .element.text.content_block_4,
#home #hoofd > .element.text.content_block_13,
#home #hoofd > .element.text.content_block_14,
#home #hoofd > .element.text.content_line_10,
#home #hoofd > .element.text.content_line_14
{
  background-color : var(--color-1);
}

@media (max-width : 768px)
{
  #home #hoofd > .element.text.header_line
  {
    background-color : var(--color-2);
  }
}

/** NOT HOME
 **********************/

body:not(#home) #hoofd > .element.menu.top,
body:not(#home) #hoofd > .element.text.header_block,
body:not(#home) #hoofd > .element.text.header_block_form,
body:not(#home) #hoofd > .element.text.content_block_9,
body:not(#home) #hoofd > .element.text.content_block_10,
body:not(#home) #hoofd > .element.text.content_line_7,
body:not(#home) #hoofd > .element.text.content_line_8,
body:not(#home) #hoofd > .element.text.review,
body:not(#home) #hoofd > .element.text.header_footer,
body:not(#home) #hoofd > .element.text.header_footer_block
{
  background-color : transparent;
}

@media (max-width : calc(1365px - 1px))
{
  body:not(#home) #hoofd > .element.menu.top
  {
    background-color : var(--color-1);
  }
}

body:not(#home) #hoofd > .element.menu.top.luna-scrolled,
body:not(#home) #hoofd > .element.text.usp,
body:not(#home) #hoofd > .element.text.header,
body:not(#home) #hoofd > .element.text.content_block_1,
body:not(#home) #hoofd > .element.text.content_block_2,
body:not(#home) #hoofd > .element.text.content_line_1,
body:not(#home) #hoofd > .element.text.content_block_3,
body:not(#home) #hoofd > .element.text.content_block_4,
body:not(#home) #hoofd > .element.text.content_line_2,
body:not(#home) #hoofd > .element.text.content_block_5,
body:not(#home) #hoofd > .element.text.content_block_6,
body:not(#home) #hoofd > .element.text.content_line_3,
body:not(#home) #hoofd > .element.text.content_block_7,
body:not(#home) #hoofd > .element.text.content_block_8,
body:not(#home) #hoofd > .element.text.content_line_4,
body:not(#home) #hoofd > .element.text.content_line_9,
body:not(#home) #hoofd > .element.text.content_block_11,
body:not(#home) #hoofd > .element.text.content_block_12,
body:not(#home) #hoofd > .element.text.content_block_13,
body:not(#home) #hoofd > .element.text.content_block_14,
body:not(#home) #hoofd > .element.text.content_line_10,
body:not(#home) #hoofd > .element.text.content_line_13,
body:not(#home) #hoofd > .element.text.content_line_14,
body:not(#home) #hoofd > .element.text.scrollbar
{
  background-color : var(--color-1);
}

body:not(#home) #hoofd > .element.text.content_line_5,
body:not(#home) #hoofd > .element.text.content_line_6,
body:not(#home) #hoofd > .element.text.content_line_11,
body:not(#home) #hoofd > .element.text.content_block_15,
body:not(#home) #hoofd > .element.text.content_block_16,
body:not(#home) #hoofd > .element.text.content_line_12
{
  background-color : var(--color-2);
}

body:not(#home) #hoofd > .element.text.content_block_3,
body:not(#home) #hoofd > .element.text.content_block_4
{
  background-color : var(--color-light);
}

/** GROWSCAN HEADER
 ***************************/

.growscan_header
{
  display : inline-flex;
  margin  : 1em 0;
}

.growscan_header .emphasis_row,
.growscan_header .checkmark_row
{
  display : inline-flex;
  width   : 15em;
}

.growscan_header .emphasis,
.growscan_header .checkmark
{
  color       : var(--color-usp);
  font-weight : bold;
}

/** SCROLLING
 ***************************/

.scrolling
{
  position    : absolute;
  top         : 0;

  display     : flex;
  align-items : center;
  height      : 100%;
  width       : 100%;

  z-index     : 2;
}

.scrolling > .text
{
  color       : var(--color-light);
  font-family : var(--font-header);
  font-weight : 900;
  font-size   : 12em;

  white-space : nowrap;

  display     : flex;
  width       : max-content;
  padding     : 0 101vw;
}

.scrolling > .text.repeat_line
{
  color     : var(--color-3);
  top       : -56px;
  animation : scroll_right 40s linear infinite !important;
  font-size : 10em;
}

.case .scrolling > .text.repeat_line {
    top       : -40px;
}

.content_line_9 .scrolling > .text.repeat_line
{
  top : -56px;
}

@media (max-width : 997px)
{
  .scrolling > .text
  {
    font-size : 6em;
  }

  .scrolling > .text.repeat_line
  {
    top       : -40px;
    animation : scroll_right 40s linear infinite !important;
    font-size : 8em;
  }

  .content_line_9 .scrolling > .text.repeat_line
  {
    top : -30px;
  }
  
   body:not(#home) .container.scrolling, .groeiscan_werkwijze_stappen {
    overflow-x: hidden;
    overflow: hidden;
    position: relative;
  }
  
  body:not(#home) .container.scrolling {
    height: 120px;
    overflow: hidden;
  }
  
  .doodle_2:after {
    width: 9em;
    height: 12em;
    right: 0;
  }
  
  .doodle_3:after {
    top: -2.3em;
    right: -0.7em;
  }
  
  .overzichtspagina .doodle_3:after {
    top: -5.3em;
  }
}

.scrolling > .text
{
  animation : scroll_right 20s linear infinite;
  display   : inline-block;
}

@keyframes scroll_right
{
  from
  {
    transform : translateX(0%);
  }
  to
  {
    transform : translateX(-50%);
  }
}

/** IMAGE STACKER
 ***************************/

#hoofd .element.text.content_line_5:has(.stacker)
{
  z-index : 300;
}

.stacker
{
  height : 60vh;
}

.stacker img
{
  position : absolute;
  left     : 0;
  right    : 0;
  top      : 0;
  bottom   : 0;

  width    : 20em;
  margin   : auto;
}

.stacker img.active
{
  opacity : 1;
}

.stacker img
{
  opacity    : 0;
  box-shadow : 0.1em 0.1em 1em hsl(0 0% 0% / 20%);
}

/** REPEAT_LINE
 ***************************/

#hoofd > .element.text:has(.repeat_line)
{
  min-height : 10em;
}

.repeat_line
{
  color       : var(--color-3);
  font-family : var(--font-header);
  font-size   : 6em;
  font-weight : 900;

  white-space : nowrap;

  position    : absolute;
  right       : 0;
  left        : 0;
  top         : 0;

  width       : max-content;
  margin      : 0 auto;
}

.repeat_line .dot
{
  color : var(--color-usp);
}

/** MENU
 ***************************/

#hoofd > .element.menu
{
  top        : 2rem !important;
  transition : background-color 0.75s;
}

#hoofd > .element.menu .menu
{
  font-size : 1.2rem;
}

#hoofd > .element.menu .bar_label
{
  font-size : 1em;
}

#hoofd > .element.menu label
{
  color     : var(--color-dark);
  font-size : 0.5em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.menu ul a
  {
    padding : 1em 0.7em;
  }
}

#hoofd > .element.menu ul ul a
{
  padding : 0.7em;
}

#hoofd > .element.menu ul a
{
  color : var(--color-dark);
}

.header_has_image #hoofd > .element.menu ul a
{
  color : var(--color-light);
}

.header_has_image #hoofd > .element.menu ul ul a
{
  color : var(--color-dark);
}

#home #hoofd > .element.menu ul ul
{
  background-color : var(--color-light);
}

#hoofd > .element.menu ul ul
{
  background-color : var(--color-1);
}

#hoofd > .element.menu ul ul a,
#hoofd > .element.menu.luna-scrolled ul a
{
  color : var(--color-dark);
}

@media (min-width : 1365px)
{
  #home #hoofd > .element.menu.luna-scrolled
  {
    background-color : var(--color-light);
    transition       : background-color 1s;
  }

  body:not(#home) #hoofd > .element.menu.luna-scrolled
  {
    background-color : var(--color-1);
    transition       : background-color 1s;
  }

  body:not(#home) #hoofd > .element.menu.top .website-menu-logo
  {
    background-color : var(--color-1);
  }
}

@media (max-width : calc(1365px - 1px))
{
  #home #hoofd > .element.menu
  {
    background-color : var(--color-light);
  }

  body:not(#home) #hoofd > .element.menu,
  body:not(#home) #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-1);
  }

  #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-light);
  }

  #hoofd > .element.menu ul.responsive a
  {
    color : var(--color-dark);
    font-size: 16px;
  }
}

/** MENU|LOGO|BUTTON
 **********************/

#hoofd > .element.menu.top .website-menu-logo img
{
  object-fit : contain;
}

@media (min-width : 1365px)
{
  #hoofd > .element.menu.top
  {
    place-items : center end;
  }

  #hoofd > .element.menu.top .website-menu-logo
  {
    height           : 100%;

    display          : flex;
    align-items      : center;
    padding          : 0 1em;

    border-radius    : 0 0 1em 0;
    background-color : var(--color-light);
  }

  #hoofd > .element.menu.top .website-menu-logo img
  {
    display : block;
    height  : 2.5em;
  }
}

@media (max-width : 1364px)
{
  #hoofd > .element.menu.top
  {
    padding-right : 0.5em;
  }

  #hoofd > .element.menu.top .website-menu-logo img
  {
    height       : 2em;
    margin-top   : 1em;
    padding-left : 1em;
  }

  #hoofd > .element.menu.top .website-menu-menu
  {
    justify-self: end;
    padding       : 0 1em;
  }

  #hoofd > .element.menu.top .website-menu-phone
  {
    display     : flex;
    align-items : center;
    padding-left: 40px;
  }
}

/** MENU STRUCTURE
 **********************/

@media (min-width : 1365px)
{
  #home .element.menu.top
  {
    grid-template-columns : 15em auto;
    grid-template-areas   : "top_logo top_menu";
  }

  #home .element.menu.top .website-menu-phone
  {
    display : none;
  }

  .element.menu.top
  {
    grid-template-columns : 15em auto 10em;
    grid-template-areas   : "top_logo top_menu top_phone";
  }
}

@media (max-width : 1364px)
{
  .element.menu.top
  {
    grid-template-columns : 1fr 1fr 1fr;
    grid-template-areas   : "top_logo top_phone top_menu";
  }
}

.element.menu
{
  display : grid;
}

.element.menu.top .website-menu-logo
{
  grid-area : top_logo;
}

.element.menu.top .website-menu-menu
{
  grid-area : top_menu;
}

.element.menu.top .website-menu-phone
{
  grid-area : top_phone;
}

/** UNIQUE-SELLING-POINTS
 ***************************/

#hoofd > .element.text.usp
{
  color            : var(--color-dark);
  font-size        : 0.75em;

  position         : sticky !important;
  top              : 0 !important;
  padding-top      : 0.1rem;

  height           : 2rem !important;

  background-color : var(--color-light);

  z-index          : 500;
}

.unique-selling-points
{
  padding : 0;
}

.unique-selling-points ul
{
  display         : flex;
  height          : 2rem;
  width           : calc(100vw - 5.5em);
  margin          : 0;

  justify-content : space-between;
  flex-flow       : row;

  align-items     : center;

  overflow        : hidden;

  list-style-type : none;
}

.unique-selling-points ul li
{
  display         : flex;
  margin          : 0;
  padding         : 0;
  padding-left    : 0.5em;

  white-space     : nowrap;
  justify-content : center;
  align-items     : center;
}

.unique-selling-points ul li:before
{
  content          : "\e5ca";

  color            : var(--color-dark);
  font-family      : 'Material Symbols Outlined', sans-serif;
  font-weight      : bold;
  font-size        : 1.3em;

  text-align       : center;
  vertical-align   : middle;

  position         : relative;
  left             : -0.5rem;

  width            : 1.5em;
  height           : 1.5em;
  line-height      : 1.5em;

  background-color : var(--color-usp);
}

@media (max-width : 1365px)
{
  .unique-selling-points
  {
    position : absolute;
    padding  : 0;
  }

  .unique-selling-points ul
  {
    flex-flow       : column wrap;
    justify-content : center;
  }

  .unique-selling-points ul li
  {
    width           : 100%;
    justify-content : center;
    align-items     : center;
    animation       : scroll-horizontal 20s ease-out infinite alternate;
  }
}

@keyframes scroll-horizontal
{
  0%,
  20%
  {
    transform : translateX(0);
  }
  25%,
  45%
  {
    transform : translateX(-100%);
  }
  50%,
  70%
  {
    transform : translateX(-200%);
  }
  75%,
  100%
  {
    transform : translateX(-300%);
  }
}

/** MASK
 ***************************/

.mask,
.video
{
  position         : absolute;
  top              : 0;
  bottom           : 0;
  left             : 0;
  right            : 0;

  width            : 100%;
  height           : 100%;

  background-color : var(--transparent-color-4);

  z-index          : 2;
}

.video
{
  z-index : 1;
}

*:has(.mask),
*:has(.video)
{
  position : relative;
}

/** HEADER
 ***************************/

@media (min-width : 1365px)
{
  #hoofd > .element.text.header:has(img),
  #hoofd > .element.text.header:has(video)
  {
    margin-top : -3.5rem;
  }
}

#hoofd > .element.text.header video
{
  width   : calc(100vw - 2.5rem);
  display : block;
}

.website #hoofd > .element.text.header:not(.no_page_content),
.template #hoofd > .element.text.header:not(.no_page_content)
{
  margin-top : -5.5rem;
}

body:not(#home).website #hoofd > .element.text.header:not(.no_page_content),
body:not(#home).template #hoofd > .element.text.header:not(.no_page_content)
{
  margin-top : -7.5rem;
}

#hoofd > .element.text.header
{
  overflow : hidden;
}

.case #hoofd > .element.text.header,
#home #hoofd > .element.text.header
{
  height : calc(50vw - 2.5rem) !important;
}

body:not(#home):not(.case):not(.landingpages) #hoofd > .element.text.header
{
  max-height : 35em;
}

.landingpages #hoofd > .element.text.header
{
  max-height : 40em;
}

#hoofd > .element.text.header img
{
  display       : block;
  width         : calc(100vw - 2.5em);
  object-fit    : cover;
  border-radius : 0.4em;
}

#hoofd > .element.text.header .mask,
#hoofd > .element.text.header .video
{
  margin        : 0 0.75em;
  width         : calc(100vw - 2.5em);
  border-radius : 0.45em;
  overflow      : hidden;
}

#hoofd > .element.text.header .header_scroll_on
{
  color      : var(--color-light);
  text-align : center;

  position   : absolute;
  left       : 0;
  right      : 0;
  bottom     : 0;

  height     : 10em;
  width      : 20em;

  margin     : 0 auto;

  z-index    : 5;
}

#hoofd > .element.menu li > a:hover,
#hoofd > .element.menu li.active > a
{
  color : var(--color-link);
}

@media (min-width : 1550px)
{
  #hoofd > .element.text.header .header_scroll_on
  {
    height : 8em;
  }
}

#hoofd > .element.text.header .header_scroll_on .vertical_line
{
  position         : absolute;
  left             : 0;
  right            : 0;
  bottom           : 0;

  width            : 0.15em;

  margin           : 0 auto;

  background-color : var(--color-light);

  animation        : scroll_on 4s linear infinite;
}

@keyframes scroll_on
{
  0%
  {
    height : 0;
    bottom : 6em;
  }
  40%, 60%
  {
    height : 6em;
    bottom : 0;
  }
  100%
  {
    height : 0;
    bottom : 0;
  }
}

/** HEADER_LINE
 ***************************/

@media (min-width : 1365px)
{
  .case #hoofd > .element.text.header_block,
  #home #hoofd > .element.text.header_line
  {
    margin-top    : 10vw;
    margin-bottom : -100%;
    max-height    : max-content;
  }

  body:not(#home):not(.case) #hoofd > .element.text.header_block:has(h1)
  {
    margin-top    : 4em;
    margin-bottom : -100%;
    max-height    : max-content;
  }

  #hoofd > .element.text.header_line,
  #hoofd > .element.text.header_line h1,
  #hoofd > .element.text.header_block,
  #hoofd > .element.text.header_block h1
  {
    color : var(--color-light);
  }

  #hoofd > .element.text.header_line h1
  {
    font-size : 6rem;
  }

  #home #hoofd > .element.text.header_line
  {
    text-align : center;
  }
}

@media (max-width : 1365px)
{
  #hoofd > .element.text.header_line
  {
    padding : 2em;
  }
}

@media (max-width : 768px)
{
  #home #hoofd > .element.text.header
  {
    height : calc(27vh - 2.5rem) !important;
  }

  #home #hoofd > .element.text.header .header_scroll_on
  {
    display : none;
  }

  #hoofd > .element.text.header .mask, #hoofd > .element.text.header .video
  {
    margin : 0 0 0 17px !important;
  }
}

/** GRATIS GROEISCAN
 ***************************/

#hoofd > .element.text.groeiscan
{
  position         : fixed !important;
  bottom           : 0;
  right            : 0;
  left             : auto !important;
  top              : auto !important;

  width            : auto;
  padding          : 0.75em 0.75em;

  border-radius    : 0.5em 0 0 0;
  background-color : var(--color-light);

  z-index          : 1000;
}

/** CASE_READER
 ***************************/

.case_reader_text
{
  font-size : 1em;
  padding   : 0 1em;
}

.case .case_reader_image
{
  background-color : #E9EDFF;
  border-radius    : 0.4em;
  height           : 50px;
  width            : 50px;
}

.case_reader_image
{
  background-color : #FFFFFF4A;
  border-radius    : 0.4em;
}

.case .case_reader_image img
{
  display         : inline-block;
  margin          : auto;
  object-fit      : cover;
  height          : 100%;
  width           : 50px;
  object-position : top;
}


.case_reader_image img
{
  display : inline-block;
  margin  : auto;
}

@media (min-width : 997px)
{
  .case .case_reader_text
  {
    display     : flex;
    gap         : 16px;
    align-items : center;
    font-weight : 500;
  }
}

@media (max-width : 997px)
{
.module.portfolio .content .title {;
    max-width: 320px;
}
}

/** CASE_READER STRUCTURE
 ***************************/

.case_reader
{
  display               : grid;
  gap                   : 0.5em 1em;
  grid-template-columns : 4em auto;
  grid-template-areas   :
    "author_image author_text"
    "author_image time_text";
}

.dienst_reader
{
  grid-template-columns : 15em auto;
}

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

.dienst_reader .case_reader_image, .dienst_reader .case_reader_image img
{
  max-width : 370px !important;
}

.dienst_reader .case_reader_text
{
  padding : 60px 0 10px 0;
}

.case_reader_author_image
{
  grid-area : author_image;
}

.case_reader_author_text
{
  grid-area : author_text;
}

.case_reader_time_text
{
  grid-area : time_text;
}

/** CASE SYNOPSIS
 ***************************/

.case_synopsis td
{
  padding : 1em 1em 0 0;
}

.case_synopsis .title
{
  font-weight : 400;
  width       : 7.5em;
}

.case_synopsis .value
{
  color       : var(--color-3);
  font-weight : bold;
  font-size   : 16px;
}

@media (min-width : 997px)
{
  .case_synopsis tbody
  {
    display : flex;
    gap     : 30px;
  }
}

.case_synopsis tbody tr
{
  display : grid;
}

.case_synopsis .value
{
  padding-top : 0;
}

.case_synopsis a
{
  color           : var(--color-3);
  text-decoration : underline;
}

.case_synopsis a:hover
{
  color : var(--color-link);
}


/** RESULTATENTABEL
 ***************************/

.resultatentabel td
{
  padding : 0.3em;
}

.resultatentabel tr:first-child
{
  font-weight : 600;
}

@media (max-width : 768px)
{
  .resultatentabel td {
    word-break: break-word;
  }
}

/** HEADER_BLOCK_FORM
 ***************************/

@media (min-width : 1365px)
{
  #hoofd > .element.text.header_block_form:has(fieldset)
  {
    margin-top    : 5em;
    margin-bottom : -100%;
    z-index       : 300;
  }

  #hoofd > .element.text.header_block_form fieldset
  {
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 90%;
    padding          : 2em 4em;

    border           : none;
    border-radius    : 0.8em;
    background-color : var(--color-light);
  }
}

@media (min-width : 500px)
{
  #hoofd > .element.text.header_block_form fieldset img
  {
    float : right;
  }
}

#hoofd > .element.text.header_block_form fieldset, .contactblokpagina fieldset
{
  border           : none;
  border-radius    : 0.8em;
  background-color : var(--color-light);
  padding          : 2em 3em;
}

.vacaturepagina .contactblokpagina fieldset {
  background-color : lch(94 8.13 280.84);
}

/*.contactblokpagina fieldset*/
/*{*/
/*  background-color : var(--color-2);*/
/*}*/

.contactblokpagina fieldset img,
#hoofd > .element.text.header_block_form fieldset img
{
  max-width : 6.5em;
}

.contactblokpagina .fonk,
#hoofd > .element.text.header_block_form .fonk
{
  align-self : center;
}

/** HEADER_BLOCK_FORM STRUCTURE
 ***************************/

#hoofd > .element.text.header_block_form .klanten_vertellen_fonk, .contactblokpagina .klanten_vertellen_fonk
{
  display               : flex;
  grid-gap              : 1em;
  grid-template-columns : 2fr 1fr;
  grid-template-areas   :"klanten_vertellen fonk";
}

.klanten_vertellen iframe
{
  width  : 250px;
  height : 80px;
}


.fonk img
{
  width  : 80px;
  height : 80px;
}

.growscan_header .fonk
{
  background-color : #FFFFFF;
  height           : 70px;
}

.growscan_header .fonk img
{
  height : 100%;
}

@media (max-width : 500px)
{
  #hoofd > .element.text.header_block_form .klanten_vertellen_fonk, .contactblokpagina .klanten_vertellen_fonk
  {
    grid-template-columns : auto;
    grid-template-areas   :
    "klanten_vertellen"
    "fonk";
  }
}

#hoofd > .element.text.header_block_form .klanten_vertellen, .contactblokpagina .klanten_vertellen
{
  grid-area : klanten_vertellen;
}

#hoofd > .element.text.header_block_form .fonk, .contactblokpagina .fonk
{
  grid-area : fonk;
}

/** CREATE_MARKETING_FORMULA
 ***************************/

.create_marketing_formula
{
  display   : flex;
  flex-flow : row wrap;
  gap       : 2em;
}

.create_marketing_formula .cmf
{
  position      : relative;

  overflow      : hidden;

  border-radius : 1em;
}

.create_marketing_formula .cmf .title
{
  color       : var(--color-light);
  font-family : var(--font-header);
  font-size   : 2.25em;
  font-weight : 900;
  text-align  : center;

  position    : absolute;
  width       : 100%;
  padding     : 0 1em;

  z-index     : 2;
}

.create_marketing_formula .cmf .text
{
  padding : 0 1em;

  z-index : 2;
}

.create_marketing_formula .cmf a.button
{
  font-weight   : bold;
  margin-right  : 0.25em;
  margin-bottom : 0.5em;
  border        : 2px solid transparent;
}

.create_marketing_formula .cmf a.button:hover
{
  padding       : 0.5em 1em 0.5em 2em;
  margin        : 0;
  margin-right  : 0.25em;
  margin-bottom : 0.5em;
}

.create_marketing_formula .cmf a.link
{
  font-weight     : bold;
  text-decoration : underline;
}

.partnerblokken
{
  padding : 10px 0 20px 0;
}

@media (min-width : 1365px)
{
  .create_marketing_formula .cmf
  {
    height : 30em;
    cursor : pointer;
  }

  .create_marketing_formula .cmf .title
  {
    top : 10rem;
  }

  .create_marketing_formula .cmf:hover .title
  {
    top        : 2rem;
    transition : top 1s;
  }

  .create_marketing_formula .cmf .text
  {
    color      : var(--color-light);
    text-align : center;

    position   : absolute;
    top        : 100%;
  }

  .create_marketing_formula .cmf:hover .text
  {
    top        : 6rem;
    transition : top 1s;
  }

  .create_marketing_formula .cmf a.link
  {
    color : var(--color-light);
  }

  .create_marketing_formula .cmf a.button
  {
    margin-right     : 0.25em;
    margin-bottom    : 0.5em;
    background-color : var(--color-light);
  }

  .create_marketing_formula .cmf a.button:hover
  {
    color            : var(--color-light);

    padding          : 0.5em 1em 0.5em 2em;
    margin           : 0;
    margin-right     : 0.25em;
    margin-bottom    : 0.5em;

    background-color : var(--color-4);
  }
}

@media (max-width : 1364px)
{
  .create_marketing_formula .cmf .title
  {
    top : 3rem;
    line-height: 1;
  }

  .create_marketing_formula .cmf .image
  {
    height   : 10rem;
    overflow : hidden;
  }

  .partnerblokken .create_marketing_formula .cmf .image
  {
    height   : 30rem;
    border-radius: 10px;
  }
  
  .create_marketing_formula .cmf .image img
  {
    height     : inherit;
    width      : 100%;
    object-fit : cover;
  }

  .create_marketing_formula .cmf .buttons
  {
    display   : flex;
    flex-flow : row wrap;
  }

  .create_marketing_formula .cmf .button
  {
    flex        : 1 1;
    white-space : nowrap;
  }

  .create_marketing_formula .cmf a.button:hover
  {
    border           : 2px solid var(--color-button);
    background-color : var(--color-light);
  }

  /*abbr[title]*/
  /*{*/
  /*  border-bottom : 2px solid var(--color-dark);*/
  /*}*/
}

@media (min-width : 768px)
{
  .create_marketing_formula .cmf
  {
    flex      : 1 1 30%;
    min-width : 20em;
  }

  .dienst_reader .case_reader_text
  {
    padding : 60px 0 10px 0;
  }

  .buttons_header
  {
    display     : flex;
    align-items : center;
    gap         : 1em;
  }
}

@media (max-width : 768px)
{
  .create_marketing_formula .cmf
  {
    min-width : 0;
  }

  #hoofd > .element.text.header_block_form fieldset
  {
    padding : 0;
  }

  .dienst_reader
  {
    display : none;
  }

  .fonk img
  {
    width  : 50px;
    height : 50px;
  }

  .klanten_vertellen iframe
  {
    width  : 195px;
    height : 50px;
    max-width: 250px !important;
  }

  .review .klanten_vertellen iframe
  {
    padding-left : 0 !important;
  }
  
  .growscan_header {
    display: block;  
  }
  
  .growscan_header .emphasis_row, .growscan_header .checkmark_row {
    width: 100%;
  }
}

/** CONTENT BLOCKS
 ***************************/

#hoofd > .element.text.content_block_3:has(.center), #hoofd > .element.text.content_block_11:has(.center)
{
  text-align  : center;
  display     : flex;
  align-items : center;
}

@media (max-width : 997px)
{
  .center
  {
    width : 100%;
  }
}

/** CONTENT LINE
 ***************************/

#home #hoofd .element.text.content_line_2
{
  max-height : 105vh;
  overflow   : hidden;

  z-index    : 400;
}

#home #hoofd .element.text.content_line_2 .image
{
  height : inherit;
}

#home #hoofd .element.text.content_line_2 img
{
  display    : block;
  width      : 100%;
  height     : inherit;
  object-fit : cover;
}

/** GROEISCAN_WERKWIJZE_STAPPEN
 ***************************/

.groeiscan_werkwijze_stap
{
  display          : inline-block;
  height           : 30em;
  width            : 30em;
  padding          : 2em;

  min-width        : 25em;
  margin-bottom    : 1em;

  border           : 2px solid var(--color-2);
  border-radius    : 1em;
  background-color : var(--color-2);
}

.groeiscan_werkwijze_stap:nth-child(2)
{
  transform : rotate(7deg) translateY(-2em);
}

.groeiscan_werkwijze_stap:nth-child(3)
{
  transform : rotate(-5deg);
}

.groeiscan_werkwijze_stap .image.cover
{
  height        : 15em;
  margin-bottom : 10px;
}

.groeiscan_werkwijze_stap .image.icon
{
  height : 12.5em;
}

.groeiscan_werkwijze_stap .image.cover img
{
  border-radius : 0.6em;
  object-fit    : cover;
  width         : 100%;
  height        : 100%;
}

.groeiscan_werkwijze_stap .image.icon img
{
  max-width  : 10em;
  max-height : 10em;
}

.groeiscan_werkwijze_stap .title
{
  color       : var(--color-3);
  font-size   : 2em;
  font-family : var(--font-header);
  font-weight : 900;
  line-height : 1.5;
}

.losse_blokken_stappen .groeiscan_werkwijze_stap
{
  height : auto;
}

.losse_blokken_stappen .groeiscan_werkwijze_stap .title
{
  line-height : 1.3;
  padding-top : 0.5em;
}


/** GROEISCAN_WERKWIJZE_STAPPEN STRUCTURE
 ***************************/

@media (min-width : 768px)
{
  .groeiscan_werkwijze_stappen
  {
    display   : flex;
    flex-flow : row wrap;
    gap       : 1em;
  }

  .groeiscan_werkwijze_stap
  {
    flex : 1 1 30%;
  }

  .formulier_stappen
  {
    margin-top : 11.25em;
  }

  .formulier_blokken
  {
    margin-top : 22.25em;
  }

  .online_marketing_stappen
  {
    margin-top     : 15.25em;
    padding-bottom : 50px;
  }

  .tekst_onder_formulier
  {
    margin-top : 18.75em;
  }

}

.groeiscan_werkwijze_stap .image.icon
{
  height : 7.5em;
}

.groeiscan_werkwijze_stap 
{
  transform : rotate(0deg)  translateY(0em)   !important;
  width     : 100%;
}

.groeiscan_werkwijze_stap:nth-child(even)
{
  background-color : #FFFFFF;
  border-color     : #FFFFFF;
}

#hoofd > .element.text.content_line_7 .groeiscan_werkwijze_stap:nth-child(even)
{
  border-color : #CFD6FD;
}

.groeiscan_werkwijze_stap .image.icon img
{
  max-width  : 7em;
  max-height : 7em;
}

.groeiscan_werkwijze_stap
{
  opacity    : 0;
  transition : transform 0.8s ease-out, opacity 0.8s ease-out;
}

.werkwijze_from_right
{
  transform : translateX(100px);
}

.werkwijze_from_right.werkwijze_visible
{
  transform : translateX(0);
  opacity   : 1;
}

.werkwijze_from_left
{
  transform : translateX(-100px);
}

.werkwijze_from_left.werkwijze_visible
{
  transform : translateX(0);
  opacity   : 1;
}


@media (max-width : 768px)
{
  .groeiscan_werkwijze_stap
  {
    width     : 100%;
    max-width : 100%;
    min-width: 300px;
  }
}

/** CONTENT LINE 9
 ***************************/

#hoofd > .element.text:has(.repeat_line)
{
  min-height : 10em;
}

.repeat_line
{
  color       : var(--color-3);
  font-family : var(--font-header);
  font-size   : 6em;
  font-weight : 900;

  white-space : nowrap;

  position    : absolute;
  right       : 0;
  left        : 0;
  top         : 0;

  width       : max-content;
  margin      : 0 auto;
}

.repeat_line .dot
{
  color : var(--color-usp);
}

/** content_block_11
 ***************************/

#hoofd > .element.text.content_block_11 h2
{
  font-size : 2.25rem;
}

/** HEADER FOOTER
 ***************************/

#hoofd > .element.text.header_footer
{
  overflow         : hidden;
  height           : 40rem !important;
  background-color : var(--color-1);
}

#hoofd > .element.text.header_footer img
{
  display    : block;
  margin     : 0 auto;
  opacity    : 0.85;

  max-width  : none;

  object-fit : cover;
}

@media (min-width : 1920px)
{
  #hoofd > .element.text.header_footer img
  {
    width : 100%;
  }
}

@media (max-width : calc(1920px - 1px) )
{
  #hoofd > .element.text.header_footer img
  {
    height : 100%;
  }
}

@media (max-width : 1365px)
{
  #hoofd > .element.text.header_footer img
  {
    float : right;
  }
}

#hoofd > .element.text.header_footer
{
  display             : flex;
  align-items         : center;
  justify-content     : center;

  background-image    : url('/websites/1850/images/-920-triplepro-online-marketing-annelies-nora-michael.jpg');
  background-repeat   : no-repeat;
  background-position : center center;
}

/** HEADER FOOTER BLOCK
 ***************************/

#hoofd > .element.text.header_footer .header_footer_block
{
  color     : var(--color-light);
  font-size : 1.2em;

  position  : relative;

  z-index   : 3;
}

#hoofd > .element.text.header_footer .header_footer_block h2
{
  color         : var(--color-light);
  font-size     : 3em;
  margin-bottom : 1em;
}

#hoofd > .element.text.header_footer .header_footer_block.center
{
  width      : max-content;
  text-align : center;
}

#hoofd > .element.text.header_footer .header_footer_block .arrow_orange_anchor
{
  position : relative;
  width    : min-content;
  margin   : 0 auto;
}

#hoofd > .element.text.header_footer .header_footer_block .arrow_orange_anchor .arrow_orange
{
  position : absolute;
  top      : -2em;
  right    : -10em;

  width    : 10em;
}

/** FOOTER
 ***************************/

.element.text.footer
{
  color            : var(--color-light);
  font-size        : 0.95em;
  background-color : var(--color-4);
}

.element.text.footer h2
{
  font-size   : 1em;
  font-family : 'Montserrat', 'sans-serif';

  margin      : 1rem 0;
}

.element.text.footer hr
{
  border : 1px solid rgba(255, 255, 255, 0.5);
  width  : 100%;
}

.element.text.footer > .sitemap a
{
  color   : rgba(255, 255, 255, 0.5);
  display : block;
}

.element.text.footer > .sitemap a:hover
{
  color : rgba(255, 255, 255);
}

.element.text.footer .adres img
{
  margin-right : 1em;
}

.element.text.footer .adres table
{
  width : auto;
}

.element.text.footer .socialmedia
{
  display     : flex;
  align-items : center;
  gap         : 0.5em;
}

.element.text.footer .socialmedia img
{
  max-height : 1.5em;
}

.element.text.footer .module.sitemap
{
  height : auto;
}

.element.text.footer .module.sitemap > ul
{
  flex-direction : row;
  padding-left   : 0;
  gap            : 0.8em;
}

.element.text.footer .module.sitemap li
{
  min-width : 0;
}

.element.text.footer .module.sitemap a
{
  font-size : 1em;
  border    : none;
}

.partners
{
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(12.5em, 1fr));
  grid-gap              : 0.25em;

  width                 : 100%;
}

@media (max-width : 768px)
{
  .partners
  {
    grid-template-columns : repeat(auto-fill, minmax(10em, 1fr));
  }

  .buttons_header
  {
    padding : 0.5em 0;
  }

  form input[type=submit]
  {
    font-size : 15px;
  }

  #hoofd > .element.menu.top a.button, #hoofd > .element.text.groeiscan a.button
  {
    padding-left  : 30px;
    padding-right : 16px;
    font-size     : 14px;
  }

  #hoofd > .element.menu.top a.button:before, #hoofd > .element.text.groeiscan a.button:before
  {
    left : 0.7em;
  }

  .align.right > .button
  {
    left : 0;
  }

  #hoofd > .element.text.content_block_6 .align
  {
    margin-top : 10px;
  }
}

.partners a
{
  display     : inline-flex;
  align-items : center;
  text-align  : center;

  width       : 100%;
  height      : 5em;
  padding     : 4em 2em;
  border      : 1px solid rgb(255 255 255 / 25%);
}

.partners.merken a
{
  background-color : var(--color-2);
}

.partners.merken.donker a
{
  background-color : var(--color-4);
}

.partners a img
{
  filter     : grayscale(1);

  display    : inline-block;
  margin     : 0 auto;

  max-height : 6em;
}

#hoofd > .element.menu.top a.button,
#hoofd > .element.text.groeiscan a.button
{
  animation : pulsePause 3.2s ease-in-out infinite;
}

@keyframes pulsePause
{
  0%
  {
    transform : scale(1);
  }

  10%
  {
    transform  : scale(1.05);
    box-shadow : 0 0 15px rgba(0, 0, 0, 0.25);
  }

  40%
  {
    transform  : scale(1);
    box-shadow : none;
  }

  100%
  {
    transform  : scale(1);
    box-shadow : none;
  }
}


/** FOOTER STRUCTURE
 ***************************/

.element.text.footer > .sitemap
{
  display : grid;
}

@media (min-width : 1365px)
{
  .element.text.footer > .sitemap
  {
    grid-gap              : 1em;
    grid-template-columns : 1fr 1fr 1fr 1fr;
    grid-template-areas   :
      "module_sitemap module_sitemap module_sitemap socialmedia"
      "line line line line"
      "diensten kennisdeling triplepro adres"
      "partners_1 partners_1 partners_1 partners_1"
      "partners_2 partners_2 partners_2 partners_2";
  }
}

@media (max-width : 1365px)
{
  .element.text.footer > .sitemap
  {
    grid-gap              : 1em;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "module_sitemap module_sitemap"
      "line line"
      "socialmedia socialmedia"
      "diensten kennisdeling"
      "triplepro adres"
      "partners_1 partners_1"
      "partners_2 partners_2";
  }
}

@media (max-width : 768px)
{
  .element.text.footer > .sitemap
  {
    grid-gap              : 1em;
    grid-template-columns : 1fr;
    grid-template-areas   :
      "module_sitemap"
      "line"
      "socialmedia"
      "diensten"
      "kennisdeling"
      "triplepro"
      "adres"
      "partners_1"
      "partners_2";
  }
}

.element.text.footer .module.sitemap
{
  grid-area : module_sitemap;
}

.element.text.footer .socialmedia
{
  grid-area : socialmedia;
}

.element.text.footer hr
{
  grid-area : line;
}

.element.text.footer .diensten
{
  grid-area : diensten;
}

.element.text.footer .kennisdeling
{
  grid-area : kennisdeling;
}

.element.text.footer .triplepro
{
  grid-area : triplepro;
}

.element.text.footer .adres
{
  grid-area : adres;
}

.partners.top
{
  grid-area : partners_1;
}

.partners.bottom
{
  grid-area : partners_2;
}

/** SCROLLBAR
 ***************************/

#hoofd
{
  padding-bottom : 0.3rem;
}

body[data-responsive] #hoofd > .element.text.scrollbar
{
  text-align       : center;

  position         : fixed !important;
  bottom           : 0;

  padding          : 0;

  background-color : var(--color-2);

  z-index          : 1000;
}

.element.text.scrollbar .luna-scrollbar-track
{
  height           : 0.4rem;

  background-color : var(--color-light);
}

.element.text.scrollbar .luna-scrollbar-thumb
{
  background-color : var(--color-4);
}

/** FORMULIER
 ***********************************************/

form
{
  font-size : 0.8em;
}

form li
{
  padding-bottom : 1em;
}

form input,
form textarea
{
  padding          : 0.5em;
  margin-top       : 0.3em;

  border-radius    : 0.2em;
  background-color : var(--color-light);
}

form input
{
  height : 2em;
}

form input[type=submit]
{
  color       : var(--color-dark);
  background  : var(--color-usp);
  font-weight : 600;
}

form input[type=submit],
form input[type=submit]:hover
{
  padding-left        : 2.5em;
  border-radius       : 0.3em;

  background-image    : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230E1E4D' viewBox='0 0 512 512'><path d='M320 32v64h83.06L201.38 297.38l45.24 45.24L448 141.25V224h64V32H320z'/></svg>");
  background-repeat   : no-repeat;
  background-size     : 1.5em;
  background-position : 0.5em 1em;
}

form input[type="submit"]:hover
{
  background-color : var(--color-usp);
}

@media (max-width : 997px)
{
  #hoofd > .element.text.groeiscan
  {
    display : none;
  }
}

/** STRUCTURE
 ***********************************************/

/** PADDING
 *************************************/

#hoofd > .element.text.usp,
#hoofd > .element.text.header_block,
#hoofd > .element.text.content_line_2,
#hoofd > .element.text.header_footer,
#hoofd > .element.text.scrollbar
{
  padding : 0;
}

#hoofd > .element.text.usp
{
  padding-left  : 1.75em;
  padding-right : 0.75em;
}

#hoofd > .element.menu
{
  padding : 0 2em 0 0.75em;
}

#hoofd > .element.text.header
{
  padding : 0 0.75em;
}

#hoofd > .element.text.header_block,
#hoofd > .element.text.header_block_form,
#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.content_block_3,
#hoofd > .element.text.content_block_4,
#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.content_line_3,
#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8,
#hoofd > .element.text.content_line_4,
#hoofd > .element.text.content_line_5,
#hoofd > .element.text.content_line_6,
#hoofd > .element.text.content_block_9,
#hoofd > .element.text.content_block_10,
#hoofd > .element.text.content_line_7,
#hoofd > .element.text.content_line_9,
#hoofd > .element.text.content_block_11,
#hoofd > .element.text.content_block_12,
#hoofd > .element.text.content_block_13,
#hoofd > .element.text.content_block_14,
#hoofd > .element.text.content_line_10,
#hoofd > .element.text.content_line_11,
#hoofd > .element.text.content_block_15,
#hoofd > .element.text.content_block_16,
#hoofd > .element.text.content_line_12,
#hoofd > .element.text.content_line_13,
#hoofd > .element.text.footer,
#hoofd > .element.text.content_line_14
{
  padding : 3em 2em;
}


#hoofd > .element.text.content_line_8,
#hoofd > .element.text.review
{
  padding : 2em 0;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.header_block_form
  {
    padding : 0;
  }

  #hoofd > .element.text.header_block
  {
    padding : 0 4em;
  }

  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.content_line_4,
  #hoofd > .element.text.content_line_5,
  #hoofd > .element.text.content_line_6,
  #hoofd > .element.text.content_block_9,
  #hoofd > .element.text.content_block_10,
  #hoofd > .element.text.content_line_7,
  #hoofd > .element.text.content_line_9,
  #hoofd > .element.text.content_block_11,
  #hoofd > .element.text.content_block_12,
  #hoofd > .element.text.content_block_13,
  #hoofd > .element.text.content_block_14,
  #hoofd > .element.text.content_line_10,
  #hoofd > .element.text.content_line_11,
  #hoofd > .element.text.content_block_15,
  #hoofd > .element.text.content_block_16,
  #hoofd > .element.text.content_line_12,
  #hoofd > .element.text.content_line_13,
  #hoofd > .element.text.footer
  {
    padding : 4em;
  }

  #home #hoofd > .element.text.content_line_1
  {
    padding : 0 var(--element-padding) 2em;
  }

  #hoofd > .element.text.content_line_8
  {
    padding : 4em 0;
  }

  #hoofd > .element.text.content_block_4
  {
    padding       : 4em;
    padding-right : 0;
  }

  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.content_line_4,
  #hoofd > .element.text.content_line_5,
  #hoofd > .element.text.content_block_9,
  #hoofd > .element.text.content_block_11,
  #hoofd > .element.text.content_block_13,
  #hoofd > .element.text.content_line_10,
  #hoofd > .element.text.content_block_15,
  #hoofd > .element.text.content_line_12,
  #hoofd > .element.text.content_line_13,
  .case #hoofd > .element.text.content_line_7,
  .case #hoofd > .element.text.content_line_9,
  #hoofd > .element.text.footer
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.text.header_block
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.text.header_block_form,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_line_1,
  body:not(#home) #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.content_line_4,
  #hoofd > .element.text.content_line_5,
  #hoofd > .element.text.content_block_10,
  #hoofd > .element.text.content_block_12,
  #hoofd > .element.text.content_block_14,
  #hoofd > .element.text.content_line_10,
  #hoofd > .element.text.content_block_16,
  #hoofd > .element.text.content_line_12,
  #hoofd > .element.text.content_line_13,
  .case #hoofd > .element.text.content_line_7,
  .case #hoofd > .element.text.content_line_9,
  #hoofd > .element.text.footer
  {
    padding-right : var(--element-padding);
  }
}

@media (max-width : 997px)
{
  body:not(#home) #hoofd > .element.text.content_block_11,
  body:not(#home) #hoofd > .element.text.content_block_3,
  body:not(#home) #hoofd > .element.text.content_block_9,
  #home #hoofd > .element.text.content_block_1,
  #home #hoofd > .element.text.content_block_3,
  #home #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_13,
  #home #hoofd > .element.text.content_block_14
  {
    padding-bottom : 0;
  }

  body:not(#home) #hoofd > .element.text.content_block_12,
  body:not(#home) #hoofd > .element.text.content_block_4,
  #home #hoofd > .element.text.content_block_2,
  #home #hoofd > .element.text.content_block_4,
  #home #hoofd > .element.text.content_line_1,
  #home #hoofd > .element.text.content_block_14,
  #home #hoofd > .element.text.content_block_10,
  .case #hoofd > .element.text.content_block_5,
  .case #hoofd > .element.text.content_block_6,
  .overons #hoofd > .element.text.content_block_16
  {
    padding-top : 0;
  }

  #home #hoofd > .element.text.content_line_3
  {
    padding-top    : 0;
    padding-bottom : 0;
  }

  #hoofd > .element.text.header_footer .header_footer_block h2
  {
    font-size : 2.8em;
  }
}

@media (max-width : 768px)
{

  .home ol li{
     font-size : 16px !important;
  }
  
  img.cursor-gif {
    display: none ! important;
  }
  
}

@media (max-width : 375px) {

#hoofd > .element.text.header_block,
#hoofd > .element.text.header_block_form,
#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.content_block_3,
#hoofd > .element.text.content_block_4,
#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.content_line_3,
#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8,
#hoofd > .element.text.content_line_4,
#hoofd > .element.text.content_line_5,
#hoofd > .element.text.content_line_6,
#hoofd > .element.text.content_block_9,
#hoofd > .element.text.content_block_10,
#hoofd > .element.text.content_line_7,
#hoofd > .element.text.content_line_9,
#hoofd > .element.text.content_block_11,
#hoofd > .element.text.content_block_12,
#hoofd > .element.text.content_block_13,
#hoofd > .element.text.content_block_14,
#hoofd > .element.text.content_line_10,
#hoofd > .element.text.content_line_11,
#hoofd > .element.text.content_block_15,
#hoofd > .element.text.content_block_16,
#hoofd > .element.text.content_line_12,
#hoofd > .element.text.content_line_13,
#hoofd > .element.text.footer,
#hoofd > .element.text.content_line_14 {
  padding: 2.5em 0.8em;
}

#hoofd > .element.text:empty {
    margin: 0;
    padding: 0;
}
}

@media (max-width : 787px) {
  #hoofd > .element.text.header_footer {
      background-position: -960px center;
  }
  
  .stacker {
    overflow: hidden;
    position: relative;
  }
  
  #hoofd > .element.text.content_line_5:has(.stacker)
  {
    padding : 0 !important;
  }
  
  #hoofd > .element.text.usp {
    padding-left: 0px;
    padding-right: 0px;
  }
  
   #hoofd > .element.text.usp .unique-selling-points,  #hoofd > .element.text.usp .unique-selling-points ul {
    width: 100%;
  }
  
}


/** GRID
 ***************************/

@media (min-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 2fr 1fr 1fr 2fr;
    grid-template-areas   :
      'usp usp usp usp'
      'menu menu menu menu'
      'header_line header_line header_line header_line'
      'header_block header_block header_block_form header_block_form'
      'header header header header'
      'content_block_1 content_block_1 content_block_2 content_block_2'
      'content_line_1 content_line_1 content_line_1 content_line_1'
      'content_block_3 content_block_4 content_block_4 content_block_4'
      'content_line_2 content_line_2 content_line_2 content_line_2'
      'content_block_5 content_block_5 content_block_6 content_block_6'
      'content_line_3 content_line_3 content_line_3 content_line_3'
      'content_block_7 content_block_7 content_block_8 content_block_8'
      'content_line_4 content_line_4 content_line_4 content_line_4'
      'content_line_5 content_line_5 content_line_5 content_line_5'
      'content_line_6 content_line_6 content_line_6 content_line_6'
      'content_block_9 content_block_9 content_block_10 content_block_10'
      'content_line_7 content_line_7 content_line_7 content_line_7'
      'content_line_8 content_line_8 content_line_8 content_line_8'
      'content_line_9 content_line_9 content_line_9 content_line_9'
      'content_block_11 content_block_12 content_block_12 content_block_12'
      'content_block_13 content_block_13 content_block_14 content_block_14'
      'content_line_10 content_line_10 content_line_10 content_line_10'
      'content_line_11 content_line_11 content_line_11 content_line_11'
      'content_block_15 content_block_16 content_block_16 content_block_16'
      'content_line_12 content_line_12 content_line_12 content_line_12'
      'content_line_13 content_line_13 content_line_13 content_line_13'
      'review review review review'
      'content_line_14 content_line_14 content_line_14 content_line_14'
      'header_footer header_footer header_footer header_footer'
      'footer footer footer footer'
      'scrollbar scrollbar scrollbar scrollbar';
  }
}

@media (max-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      'usp'
      'menu'
      'header'
      'header_line'
      'header_block'
      'content_block_1'
      'header_block_form'
      'content_block_2'
      'content_line_1'
      'content_block_3'
      'content_block_4'
      'content_line_2'
      'content_block_5'
      'content_block_6'
      'content_line_3'
      'content_block_7'
      'content_block_8'
      'content_line_4'
      'content_line_5'
      'content_line_6'
      'content_block_9'
      'content_block_10'
      'content_line_7'
      'content_line_8'
      'content_line_9'
      'content_block_11'
      'content_block_12'
      'content_block_13'
      'content_block_14'
      'content_line_10'
      'content_line_11'
      'content_block_15'
      'content_block_16'
      'content_line_12'
      'content_line_13'
      'review'
      'content_line_14'
      'header_footer'
      'footer'
      'scrollbar';
  }
}

#hoofd > .element.text.usp
{
  grid-area : usp;
}

#hoofd > .element.menu.top
{
  grid-area : menu;
}

#hoofd > .element.text.header
{
  grid-area : header;
}

#hoofd > .element.text.header_line
{
  grid-area : header_line;
}

#hoofd > .element.text.header_block
{
  grid-area : header_block;
}

#hoofd > .element.text.header_block_form
{
  grid-area : header_block_form;
}

#hoofd > .element.text.content_block_1
{
  grid-area : content_block_1;
}

#hoofd > .element.text.content_block_2
{
  grid-area : content_block_2;
}

#hoofd > .element.text.content_line_1
{
  grid-area : content_line_1;
}

#hoofd > .element.text.content_block_3
{
  grid-area : content_block_3;
}

#hoofd > .element.text.content_block_4
{
  grid-area : content_block_4;
}

#hoofd > .element.text.content_line_2
{
  grid-area : content_line_2;
}

#hoofd > .element.text.content_block_5
{
  grid-area : content_block_5;
}

#hoofd > .element.text.content_block_6
{
  grid-area : content_block_6;
}

#hoofd > .element.text.content_line_3
{
  grid-area : content_line_3;
}

#hoofd > .element.text.content_block_7
{
  grid-area : content_block_7;
}

#hoofd > .element.text.content_block_8
{
  grid-area : content_block_8;
}

#hoofd > .element.text.content_line_4
{
  grid-area : content_line_4;
}

#hoofd > .element.text.content_line_5
{
  grid-area : content_line_5;
}

#hoofd > .element.text.content_line_6
{
  grid-area : content_line_6;
}

#hoofd > .element.text.content_block_9
{
  grid-area : content_block_9;
}

#hoofd > .element.text.content_block_10
{
  grid-area : content_block_10;
}

#hoofd > .element.text.content_line_7
{
  grid-area : content_line_7;
}

#hoofd > .element.text.content_line_8
{
  grid-area : content_line_8;
}

#hoofd > .element.text.content_line_9
{
  grid-area : content_line_9;
}

#hoofd > .element.text.content_block_11
{
  grid-area : content_block_11;
}

#hoofd > .element.text.content_block_12
{
  grid-area : content_block_12;
}

#hoofd > .element.text.content_block_13
{
  grid-area : content_block_13;
}

#hoofd > .element.text.content_block_14
{
  grid-area : content_block_14;
}

#hoofd > .element.text.content_line_10
{
  grid-area : content_line_10;
}

#hoofd > .element.text.content_line_11
{
  grid-area : content_line_11;
}

#hoofd > .element.text.content_block_15
{
  grid-area : content_block_15;
}

#hoofd > .element.text.content_block_16
{
  grid-area : content_block_16;
}

#hoofd > .element.text.content_line_12
{
  grid-area : content_line_12;
}

#hoofd > .element.text.content_line_13
{
  grid-area : content_line_13;
}

#hoofd > .element.text.review
{
  grid-area : review;
}

#hoofd > .element.text.content_line_14
{
  grid-area : content_line_14;
}

#hoofd > .element.text.header_footer
{
  grid-area : header_footer;
}

#hoofd > .element.text.footer
{
  grid-area : footer;
}

#hoofd > .element.text.scrollbar
{
  grid-area : scrollbar;
}