/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Klimaatmeesters Noord
*   www.klimaatmeesters-noord.nl
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root
{
  /**
   * desktop 1920 = 120em
   * desktop 1365 = 85em
   * width   1300 = 81em
   * desktop 900  = 60em
   * tablet  768  = 48em
   * mobile  400  = 25em
   *************************/

  --font-size             : clamp(16px, 0.85vw, 32px);
  --font-text             : 'DM Sans', sans-serif;
  --font-header           : 'DM Sans', sans-serif;

  --luna-scrolled         : lch(15 0 0 / 0.85);
  --color-dark            : lch(15 0 0 / 0.85);
  --color-light           : lch(98 3 60);

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

  --color-red             : hsl(0deg 85% 55%);
  --color-blue            : hsl(213deg 62% 43%);

  --color-usp             : var(--color-red);
  --color-link            : var(--color-blue);
  --color-link-menu       : hsl(213deg 62% 73%);
  --color-button          : var(--color-blue);

  --color-1               : lch(15 0 0 / 0.3);
  --color-2               : lch(15 0 0 / 0.85);
  --color-3               : hsl(213deg 62% 33%);
  --color-4               : hsl(213deg 62% 63%);
  --color-5               : hsl(213deg 62% 80%);
  --color-6               : hsl(213deg 62% 85%);

  --color-transparent-1   : hsl(213deg 62% 33% / 0.15);
  --color-transparent-2   : hsl(213deg 62% 80% / 0.2);
}

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

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

  scroll-behavior  : smooth;

  background-image : linear-gradient(
    0deg,
    hsl(232deg 100% 98%) 50vh,
    hsl(213deg 1% 98%)
  );
}

h1
{
  color       : var(--color-2);
  font-size   : 3.5rem;
  font-weight : 1000;
  font-family : var(--font-header);

  line-height : 1;
  margin      : 0 0 0.25em;
}

h2
{
  color       : var(--color-2);
  font-size   : 2.25rem;
  font-weight : 1000;
  font-family : var(--font-header);

  line-height : 1.1;
  margin      : 0 0 0.5em;
}

h3,
body.contact h2
{
  color       : var(--color-2);
  font-size   : 1.5rem;
  font-weight : 600;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

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

  h2
  {
    font-size : 1.75rem;
  }

  h3,
  body.contact h2
  {
    font-size : 1.25rem;
  }
}

em
{
  font-style              : normal;
  -webkit-text-fill-color : transparent;
  background-clip         : text;
  background-image        : linear-gradient(90deg, var(--color-4), var(--color-3));
}

p
{
  margin-top : 0;
}

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

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

.element.text a:not(.fa):not(.button):not(#copyright a):not(.sitemap a):after
{
  content    : "";

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

  width      : 100%;
  height     : 0.1em;

  background : var(--color-link);
  transition : 0.1s;
}

.element.text a:not(.fa):not(.button):not(#copyright a):not(.sitemap a):hover:after
{
  bottom     : -0.1em;
  transition : 0.2s;
}

a.button
{
  color           : var(--color-light);
  text-align      : center;
  text-decoration : none;

  display         : inline-flex;
  align-items     : center;

  width           : max-content;
  padding         : 0.5em 2.5em;

  border          : 0.1em solid var(--color-button);
  background      : var(--color-button);
  border-radius   : 100vw;

  transition      : 0.2s;
}

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

a.button.inverse
{
  color      : var(--color-light);
  background : var(--color-dark);
  border     : 0.1em solid var(--color-dark);
}

a.button.inverse:hover
{
  color      : var(--color-light);
  background : var(--color-dark);
  border     : 0.1em solid var(--color-dark);
}

/** OL.CHECKMARKS
 ***************************/

ol
{
  padding : 0;
}

ol li
{
  font-size     : 1.2em;
  text-align    : left;

  position      : relative;

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

ol li p
{
  margin : 0;
}

ol li:before
{
  content     : "\f00c";
  font-family : FontAwesome, sans-serif;

  position    : absolute;
  left        : 0;
  top         : 0;
}

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

/** CASE
 ***************************/

.module.case.overview .navigation
{
  display : none;
}

.module.case.overview .visible
{
  height : 20em;
}

.module.case.overview a
{
  position    : relative;
  border      : 3px solid var(--color-3);
  border-left : 0 solid transparent;
}

.module.case.overview .content
{
  color    : var(--color-light);
  position : absolute;
  bottom   : 4em;
  left     : 0.5em;

  height   : 5em;
  padding  : 0 0.5em;

  @media (max-width : 48em)
  {
    top    : 2em;
    bottom : auto;
  }
}

.module.case.overview .content .title
{
  color     : var(--color-5);
  font-size : 2.25em;
  @media (max-width : 48em)
  {
    font-size : 1.5em;
  }
}

.module.case.overview .content .text
{
  font-size : 1.1em;
}

.module.case.overview .visible .scroller .row img
{
  height     : 100%;
  max-height : none;
  max-width  : 98vw;

  object-fit : cover;

  filter     : brightness(50%);
}

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

.module.review .visible
{
  height : 20em;
}

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

.module.review .review_blocks
{
  grid-gap : 0;
}

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

  box-shadow       : none;

  background-color : transparent;
  transition       : 0.5s;
}

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

.module.review .review_block:not(:first-child)
{
  border-left : 2px dashed var(--color-2);
}

.module.review .review_block.active + .review_block,
.module.review .review_block:not(:first-child).active
{
  border-left : 2px dashed transparent;
}

.module.review .review_block.active
{
  background-image : linear-gradient(180deg, hsl(from var(--module-review-stars-selected) h s l / 10%), transparent);
  border-radius    : 0.4em;
  transition       : 1s;
}

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

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

@media (min-width : 48em)
{
  .center
  {
    text-align : center;
  }
}

/** MOVABLE
 ***************************/

#hoofd > .element.text.content_block_3:has(.movable),
#hoofd > .element.text.content_block_4:has(.movable),
#hoofd > .element.text.content_block_5:has(.movable),
#hoofd > .element.text.content_block_6:has(.movable)
{
  padding  : 3em 0;
  overflow : hidden;
  @media (max-width : 48em)
  {
    padding : 0;
  }
}

.movable
{
  height   : 30em;

  border   : 0.3em solid var(--color-5);
  overflow : hidden;
}

@media (max-width : 60em)
{
  .movable
  {
    height : 15em;
  }
}

@media (max-width : 48em)
{
  .movable
  {
    height : 10em;
  }
}

.movable img
{
  display    : block;
  height     : inherit;
  width      : 100%;
  object-fit : cover;
}

.movable[data-aos=slide-left]
{
  margin-left   : 1em;
  box-shadow    : -0.6em 0.6em 0.6em var(--color-transparent-1), -0.5em -0.5em 0.5em var(--color-transparent-2);
  border-radius : 1000em 0 0 1000em;
}

.movable[data-aos=slide-right]
{
  margin-right  : 1em;
  box-shadow    : 0.6em 0.6em 0.6em var(--color-transparent-1), 0.5em -0.5em 0.5em var(--color-transparent-2);
  border-radius : 0 1000em 1000em 0;
}

@media (max-width : 60em)
{
  #hoofd > .element.text:has(.movable[data-aos=slide-left])
  {
    display : none;
  }
}

/** KLIMAATMEESTER-IMAGE
 ***************************/

.klimaatmeester-image
{
  position      : relative;
  max-width     : 30em;

  margin-top    : 4.5em;
  padding       : 0.5em 3em;

  border-radius : 0.4em;
}

.klimaatmeester-image h2
{
  font-size        : 1.5em;
  position         : absolute;
  left             : 0;
  bottom           : 2em;

  padding          : 0.5em 0.75em;

  background-color : var(--color-6);
  box-shadow       : 0 0.2em 0.2em var(--color-transparent-1);
  border-radius    : 0.4em;

  z-index          : 2;
}

.klimaatmeester-image p
{
  font-size        : 1.25em;
  position         : absolute;
  left             : 0;
  bottom           : 0;

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

  z-index          : 1;
}

@media (max-width : 48em)
{
  #hoofd > .element.text:has(.klimaatmeester-image)
  {
    display : none;
  }
}

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

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

#home #hoofd > .element.menu .base
{
  backdrop-filter : blur(1em);
}

@media (min-width : 85em)
{
  #home #hoofd > .element.menu:not(.luna-scrolled) .base
  {
    border-radius : 15em;
  }
}

#hoofd > .element.menu
{
  height           : 4.5rem;

  background-color : var(--luna-scrolled);

  transition       : 0.75s;
}

#hoofd > .element.menu .base
{
  padding : 0 3em;
}

@media (min-width : 85em)
{
  #hoofd > .element.menu:not(.luna-scrolled)
  {
    top           : 3.5rem !important;

    width         : var(--website-content-width) !important;
    margin        : 0 auto;

    border-radius : 15em;
    transition    : 1.2s;
  }

  #hoofd > .element.menu:not(.luna-scrolled) .base
  {
    width : 100%;
  }

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

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

#hoofd > .element.menu ul a
{
  color          : var(--color-light);
  font-family    : var(--font-text);
  letter-spacing : 0.05em;
  font-size      : 1.15em;
}

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

#hoofd > .element.menu .responsive > li > a
{
  padding : 1.2em 0.7em;
}

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

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

@media (max-width : calc(85em - 0.1em))
{
  #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-dark);
    border-radius    : 0 0 0.4em 0;
  }
}

/** MENU|LOGO|CONTACT
 ***************************/

#hoofd > .element.menu.top .base
{
  height : 100%;
}

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

#hoofd > .element.menu.top .website-menu-phone a
{
  color : var(--color-light);
}

#hoofd > .element.menu.top .website-menu-phone a .icon
{
  margin-right : 0.25em;
  transform    : rotate(15deg);
}

@media (min-width : 85em)
{
  #hoofd > .element.menu.top .base
  {
    place-items : center start;
  }

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

@media (max-width : calc(85em - 0.1em))
{
  #hoofd > .element.menu.top .base
  {
    padding : 0 0.5em;
  }

  #hoofd > .element.menu.top .website-menu-phone
  {
    display         : grid;
    align-items     : center;
    justify-content : center;
  }

  #hoofd > .element.menu.top .website-menu-logo a
  {
    display         : flex;
    align-items     : center;
    justify-content : center;

    height          : 100%;
    padding-right   : 0.5em;
  }

  #hoofd > .element.menu.top .website-menu-logo img
  {
    max-height : 2.25em;
  }
}

@media (max-width : 48em)
{
  #hoofd > .element.menu.top .website-menu-phone a.button
  {
    padding          : 0.2em 0;
    background-color : transparent;
    border           : none;
  }

  #hoofd > .element.menu.top .website-menu-phone a.button .material-symbols-outlined
  {
    font-size : 1.75em;
  }

  #hoofd > .element.menu.top .website-menu-phone a.button:hover
  {
    padding : 0;
    margin  : 0;
  }
}

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

@media (min-width : 85em)
{
  .element.menu.top .base
  {
    grid-template-columns : 20em auto 10em;
    grid-template-areas   : "top_logo top_menu top_phone";
  }
}

@media (max-width : calc(85em - 0.1em))
{
  .element.menu.top .base
  {
    grid-template-columns : 4em auto 15em;
    grid-template-areas   : "top_menu top_logo top_phone";
  }
}

@media (max-width : calc(48em - 0.1em))
{
  .element.menu.top .base
  {
    grid-template-columns : 3.75em auto 2.75em;
    grid-template-areas   : "top_menu top_logo top_phone";
  }
}

.element.menu .base
{
  display : grid;
}

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

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

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

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

body:not(#home):not(.contact)
{
  background-image : linear-gradient(180deg, var(--color-blue) 17.5vh, transparent 0);
}

body:not(#home):not(.contact) #hoofd > .element.text.header_block
{
  padding-bottom   : 4em;
  margin-bottom    : 4em;
  @media (max-width : 48em)
  {
    margin-bottom : 2em;
  }

  border-radius    : 0 0 2em 2em;
  background-color : var(--color-blue);
}

body:not(#home):not(.contact) #hoofd > .element.text.header_block h1
{
  color : var(--color-light);
}

body:not(#home):not(.contact) #hoofd > .element.text.header_block h1 em
{
  background-image : linear-gradient(90deg, var(--color-4), var(--color-5));
}

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

.element.text.header:not(.no_page_content)
{
  margin-top : -4.5rem;
}

@media (max-width : 48em)
{
  #home #hoofd > .element.text.header:not(.no_page_content)
  {
    padding-top      : 4.5rem;
    background-color : var(--color-3);
  }
}

@media (min-width : 85em)
{
  #home #hoofd > .element.text.header:has(img):not(.no_page_content)
  {
    height   : 80vh !important;
    overflow : hidden;
  }

  #home #hoofd > .element.text.header:not(.no_page_content) img
  {
    position : absolute;
    top      : 0;
    bottom   : 0;

    height   : 100%;
    margin   : auto;
  }
}

#hoofd > .element.text.header img
{
  display    : block;
  width      : 100%;
  object-fit : cover;

  filter     : brightness(85%);
}

/** HEADER_BLOCK
 ***************************/

#hoofd > .element.text.header_block
{
  text-align : center;
  margin-top : 2em;
}

#hoofd > .element.text.header_block a
{
  color : var(--color-link);
}

#hoofd > .element.text.header_block a.button
{
  color : var(--color-light);
}

/** HEADER_BLOCK HOME
 ***************************/

#home #hoofd > .element.text.header_block
{
  text-align : left;
}

#home #hoofd > .element.text.header_block .sub-header
{
  font-size : 1.25em;
}

#home #hoofd > .element.text.header_block a
{
  color : var(--color-link);
}

#home #hoofd > .element.text.header_block a.button
{
  color : var(--color-light);
}

#home #hoofd > .element.text.header_block *
{
  color : var(--color-light);
}

@media (min-width : 85em)
{
  #home #hoofd > .element.text.header_block h1
  {
    font-size : 3rem;
  }

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

    width         : calc(var(--website-content-width) - 10em);
    height        : max-content !important;

    padding       : 1.5em 3em;
    margin-top    : -20vw;
    margin-left   : calc(var(--element-padding) + 5em);

    border-radius : 0.2em;
  }
}

@media (max-width : 85em)
{
  #home #hoofd > .element.text.header_block
  {
    margin           : 0;
    background-color : var(--color-button);
  }

  #home #hoofd > .element.text.header_block em
  {
    background-image : linear-gradient(90deg, var(--color-4), var(--color-5));
  }

  #home #hoofd > .element.text.header_block a
  {
    color : var(--color-dark);
  }
}

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

#hoofd > .element.text.content_line_1:has(.unique-selling-points)
{
  height : 4em !important;
}

.unique-selling-points
{
  color            : var(--color-light);
  background-color : var(--color-2);

  width            : 100%;
  height           : 100%;
  padding          : 0.5em 2em;
  padding-left     : var(--element-padding);
  padding-right    : var(--element-padding);
}

.unique-selling-points ul
{
  font-size       : 1.25em;

  display         : flex;
  height          : 2.15em;
  margin          : 0;
  padding         : 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.5rem;

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

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

  color       : var(--color-usp);
  font-family : FontAwesome, sans-serif;
  font-size   : 1.2em;

  position    : relative;
  left        : -0.5rem;
}

@media (max-width : 85em)
{
  .unique-selling-points
  {
    position : absolute;
  }

  .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%
  {
    -webkit-transform : translateX(0);
    transform         : translateX(0);
  }

  25%,
  45%
  {
    -webkit-transform : translateX(-100%);
    transform         : translateX(-100%);
  }

  50%,
  70%
  {
    -webkit-transform : translateX(-200%);
    transform         : translateX(-200%);
  }

  75%,
  100%
  {
    -webkit-transform : translateX(-300%);
    transform         : translateX(-300%);
  }
}

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

.module.carrousel
{
  height : 7em;

  @media (max-width : 48em)
  {
    height : 5em;
  }
}

.module.carrousel .visible
{
  min-width : auto;
}

.module.carrousel .visible figure img
{
  padding       : 0.5em;
  margin-right  : 1em;

  border-radius : 0.3em;
  border        : 1px solid hsl(0deg 85% 55% / 30%)
}

.module.carrousel .visible figure img.active
{
  border : 1px solid var(--color-1);
}

.visible[data-navigation]:before
{
  color       : var(--color-dark);
  padding-top : 2em;
}

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

/** CONTENT BLOCK
 ***************************/

/** WAVE
 ***************************/

body.contact .element.text.wave
{
  display : none;
}

@media (min-width : 48em)
{
  #wave
  {
    position   : relative;
    height     : 3.9em;
    width      : 100vw;

    background : #ACC9EC;

    transform  : rotate(180deg);
  }

  #wave:before
  {
    content          : "";

    display          : block;
    position         : absolute;
    right            : -1em;
    top              : 2.5em;

    width            : 55vw;
    height           : 4em;

    border-radius    : 100% 50%;
    background-color : #F5F6FF;
  }

  #wave:after
  {
    content          : "";

    display          : block;
    position         : absolute;
    left             : -1em;
    top              : 1.5em;

    width            : 55vw;
    height           : 3.9em;

    border-radius    : 100% 50%;
    background-color : #ACC9EC;
  }
}

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

.element.text.footer
{
  text-align       : center;

  margin-top       : -0.1em;
  background-image : linear-gradient(360deg, var(--color-6), var(--color-5));
}

.element.text.footer .logo
{
  margin-bottom : 1em;
}

.element.text.footer .logo img
{
  max-height : 15em;
}

.element.text.footer .titel h2
{
  font-size      : 3em;
  letter-spacing : 0.15em;
  margin         : 0;
  line-height    : 1.25;
}

.element.text.footer .titel,
.element.text.footer .socialmedia
{
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.element.text.footer .telephone
{
  font-size : 1.5em;
}

@media (min-width : 768px)
{
  .element.text.footer .titel h2
  {
    font-size : 6em;
  }

  .element.text.footer .socialmedia .fa
  {
    font-size : 4em;
  }
}

.element.text.footer #copyright
{
  font-size : 0.8em;
}

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

#hoofd
{
  padding-bottom : 0.5em;
}

body[data-responsive] #hoofd > .element.text.scrollbar
{
  position : fixed !important;
  bottom   : 0;

  padding  : 0;

  z-index  : 1000;
}

.element.text.scrollbar .luna-scrollbar-track
{
  background-color : var(--color-2);
}

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

/** COPYRIGHT
 ***************************/

#website_footer
{
  display : block;
}

/** FORM
 *************************************/

fieldset
{
  margin           : 0;
  padding          : 1.5em 2em;
  border           : none;
  border-radius    : 1em 0.4em 0.4em 0.4em;
  background-color : var(--color-5);
}

form
{
  font-size : 0.8em;
}

form label
{
  color       : var(--color-2);
  font-weight : bold;

  margin      : 0.35em 0.75em 0 0;
}

form input,
form textarea
{
  color            : var(--color-2);

  padding          : 1.25em 0.75em;
  margin-bottom    : 0.75em;

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

form input:focus,
form textarea:focus,
form input:focus-visible,
form textarea:focus-visible
{
  outline : 0.15em dashed var(--color-link) !important;
}

form input[type=submit]
{
  color           : var(--color-light);
  font-weight     : bold;

  text-align      : left;
  text-decoration : none;

  display         : inline-block;
  width           : auto;
  padding         : 0 1.5em;
  margin          : 0.5em 0 0 0;

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

  box-shadow      : 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);

  transition      : 0.2s;
}

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

@media (max-width : calc(85em - 0.1em))
{
  form li[type=submit]
  {
    text-align : center;
  }
}

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

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

#hoofd > .element.menu.top,
#hoofd > .element.text.header,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.cases,
#hoofd > .element.text.scrollbar
{
  padding : 0;
}

#hoofd > .element.text.partners,
#hoofd > .element.text.header_block,
#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_line_2,
#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.form_content,
#hoofd > .element.text.form,
#hoofd > .element.text.footer
{
  padding : 2em;
}

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

#hoofd > .element.text.wave
{
  padding : 6em 0 0;
  @media (max-width : 48em)
  {
    padding : 2em 0 0;
  }
}

@media (min-width : 85em)
{
  #hoofd > .element.text.header_block,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_line_2,
  #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.form_content,
  #hoofd > .element.text.form,
  #hoofd > .element.text.scrollbar
  {
    padding : 6em;
  }

  #hoofd > .element.text.partners
  {
    padding : 3em var(--element-padding);
  }

  #hoofd > .element.text.header_block,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.form_content
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.text.header_block,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.form
  {
    padding-right : var(--element-padding);
  }
}

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

@media (min-width : 60em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 4em 4em 1fr;
    grid-template-areas   :
      "menu menu menu menu"
      "header header header header"
      "header_block header_block header_block header_block"
      "content_line_1 content_line_1 content_line_1 content_line_1"
      "content_block_1 content_block_1 content_block_2 content_block_2"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "content_block_3 content_block_3 content_block_4 content_block_4"
      "content_block_5 content_block_5 content_block_6 content_block_6"
      "content_line_3 content_line_3 content_line_3 content_line_3"
      "partners partners partners partners"
      "cases cases cases cases"
      "review review review review"
      "form_content form_content form form"
      "wave wave wave wave"
      "footer footer footer footer"
      "scrollbar scrollbar scrollbar scrollbar";
  }
}

@media (max-width : 60em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "menu"
      "header"
      "header_block"
      "content_line_1"
      "content_block_1"
      "content_block_2"
      "content_line_2"
      "content_block_4"
      "content_block_3"
      "content_block_5"
      "content_block_6"
      "content_line_3"
      "partners"
      "cases"
      "review"
      "form_content"
      "form"
      "wave"
      "footer"
      "scrollbar";
  }
}

.element.menu
{
  grid-area : menu;
}

.element.text.header
{
  grid-area : header;
}

.element.text.header_block
{
  grid-area : header_block;
}

.element.text.content_line_1
{
  grid-area : content_line_1;
}

.element.text.content_block_1
{
  grid-area : content_block_1;
}

.element.text.content_block_2
{
  grid-area : content_block_2;
}

.element.text.content_line_2
{
  grid-area : content_line_2;
}

.element.text.content_block_3
{
  grid-area : content_block_3;
}

.element.text.content_block_4
{
  grid-area : content_block_4;
}

.element.text.content_block_5
{
  grid-area : content_block_5;
}

.element.text.content_block_6
{
  grid-area : content_block_6;
}

.element.text.partners
{
  grid-area : partners;
}

.element.text.content_line_3
{
  grid-area : content_line_3;
}

.element.text.cases
{
  grid-area : cases;
}

.element.text.review
{
  grid-area : review;
}

.element.text.form_content
{
  grid-area : form_content;
}

.element.text.form
{
  grid-area : form;
}

.element.text.wave
{
  grid-area : wave;
}

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

.element.text.scrollbar
{
  grid-area : scrollbar;
}