/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Oscar Maarsman
*   www.oscarmaarsman.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');

@font-face
{
  font-family : 'appo paint';
  src         : url("media/appo_paint/appopaint-Regular.otf") format("opentype");
}

@font-face
{
  font-family : 'appo paint';
  font-weight : bold;
  src         : url("media/appo_paint/appopaint-Regular.otf") format("opentype");
}

:root
{
  /*--font-size             : 16px;*/
  --font-size             : clamp(12px, 0.85vw, 32px);
  --font-text             : 'DM Sans', sans-serif;
  --font-header           : 'appo paint', sans-serif;

  --luna-scrolled         : hsla(0, 0%, 15%, 0.9);
  --color-light           : hsl(0, 0%, 100%);
  --color-dark            : hsl(0 0% 12%);

  --color-link            : hsl(6.5 100% 63.5%);
  --color-contrast        : hsl(6.5 100% 63.5%);
  --color-button          : hsl(6.5 100% 63.5%);

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

  --color-1               : hsl(0 17% 97.5%);
  --color-2               : hsl(28 45% 92%);

  --color-3               : hsl(0 31% 25%);
  --color-4               : hsl(0 0% 45%);

  --color-5               : hsl(6.5 60% 36%);
  --color-6               : hsl(168 27% 25%);

  --color-7               : hsl(52 17% 90%);
  --color-8               : hsl(230 2.5% 47%)
}

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

html
{
  color           : var(--color-dark);
  font-size       : var(--font-size);
  font-family     : var(--font-text);
  font-weight     : 400;

  scroll-behavior : smooth;
}

h1
{
  color       : var(--color-light);
  font-size   : 2.5rem;
  font-weight : 700;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

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

h1 em
{
  font-style  : normal;
  text-shadow : -2px 2px 2px var(--color-contrast);
}

h2
{
  color       : var(--color-dark);
  font-size   : 1.8em;
  font-weight : 700;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

h3
{
  color       : var(--color-dark);
  font-size   : 1.25em;
  font-weight : 400;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

pre
{
  font-family : var(--font-text);
  font-weight : 500;
  margin-top  : 0;
}

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

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

a:hover
{
  text-decoration : underline;
}

a.button
{
  color           : var(--color-light);
  font-family     : var(--font-header);
  text-align      : center;
  text-decoration : none;
  text-transform  : uppercase;

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

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

  border          : 1px solid var(--color-button);
  background      : var(--color-button);
  border-radius   : 5em;

  transition      : 0.2s;
}

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

a.button.green,
a.button.green:hover
{
  border     : 1px solid var(--color-6);
  background : var(--color-6);
}

a.button.inverse,
a.button.inverse:hover
{
  color      : var(--color-button);
  border     : 1px solid;
  background : transparent;
}

a.button.green.inverse,
a.button.green.inverse:hover
{
  color      : var(--color-6);
  border     : 1px solid;
  background : transparent;
}

/** BACKGROUND-COLOR
 ***********************************************/

.element.menu
{
  color            : var(--color-5);
  background-color : var(--color-1);
}

.element.text.contact
{
  color            : var(--color-light);
  background-color : var(--color-5);
}

.element.text.contact a
{
  color : var(--color-light);
}

.element.text.header_block_1,
.element.text.header_block_2
{
  color : var(--color-light);
}

.element.text.header
{
  color            : var(--color-light);
  background-color : var(--color-6);
}

.element.text.header pre
{
  color : var(--color-contrast);
}

.element.text.header h2
{
  color : var(--color-light);
}

.element.text.toegekend,
.element.text.content_block_1,
.element.text.content_block_2
{
  color : var(--color-dark);
}

.element.text.content_block_1 h2
{
  color : var(--color-6);
}

.element.text.content_line_1
{
  color            : var(--color-dark);
  background-color : var(--color-1);
}

.element.text.content_line_1 h2
{
  color : var(--color-contrast);
}

.element.text.content_block_3,
.element.text.content_block_4
{
  color            : var(--color-dark);
  background-color : var(--color-light);
}

.element.text.content_block_4 h2
{
  color : var(--color-6);
}

.element.text.content_block_5,
.element.text.content_block_6
{
  color            : var(--color-dark);
  background-color : var(--color-1);
}

.element.text.content_line_2
{
  color            : var(--color-light);
  background-color : var(--color-6);
}

.element.text.content_line_2 h2
{
  color : var(--color-contrast);
}

.element.text.gallerij,
.element.text.content_block_7,
.element.text.content_block_8,
.element.text.content_line_3
{
  color            : var(--color-dark);
  background-color : var(--color-1);
}

.element.text.gallerij pre
{
  color : var(--color-contrast);
}

.element.text.gallerij h2
{
  color : var(--color-6);
}

body:not(#home) .element.text.content_block_7 h2
{
  color : var(--color-6);
}

.element.text.content_line_3 h2
{
  color : var(--color-6);
}

.element.text.footer
{
  color            : var(--color-light);
  background-color : var(--color-6);
}

.element.text.footer h2
{
  color : var(--color-light);
}

.element.text.footer a
{
  color : var(--color-light);
}

.element.text.copyright
{
  color            : var(--color-dark);
  background-color : var(--color-2);
}

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

/** MODULES
 ***********************************************/

/** MOSAIC
 ***************************/

.module.mozaiek.overview .components
{
  background-color : var(--background-light-dark);
}

.module.mozaiek.overview .components .component
{
  background-color : var(--color-6);
}

.module.mozaiek.overview .components .component img.landscape
{
  width : 100%;
}

/** REVOLVER
 ***************************/

.module.revolver.overview
{
  position    : relative;
  z-index     : 1;
  user-select : none;
}

.module.revolver.overview figure
{
  box-sizing       : content-box;
  border           : 0.65em solid var(--color-light);
  box-shadow       : 0 0 1em 0.25em rgba(0, 0, 0, 0.2);

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

.module.revolver.overview figure img
{
  max-width : none;
}

[data-responsive] .module.revolver.overview img.height
{
  height : 100%;
}

@media (min-width : 1200px)
{
  .module.revolver.overview
  {
    font-size : 1.5em;
  }
}

@media (min-width : 1365px)
{
  .module.revolver.overview .revolver-mask-left,
  .module.revolver.overview .revolver-mask-right
  {
    position       : absolute;

    top            : 0;

    display        : block;
    width          : 20em;
    height         : 100%;

    margin         : 0 auto;

    pointer-events : none;
    z-index        : 10;
  }

  .module.revolver.overview .revolver-mask-left
  {
    right            : 0;
    left             : -52.5em;

    background-image : linear-gradient(
      90deg,
      var(--color-1),
      var(--color-1) 70%,
      hsl(from var(--color-1) h s l / 90%) 75%,
      hsl(from var(--color-1) h s l / 0%)
    );
  }

  .module.revolver.overview .revolver-mask-right
  {
    right            : -52.5em;
    left             : 0;

    background-image : linear-gradient(
      270deg,
      var(--color-1),
      var(--color-1) 70%,
      hsl(from var(--color-1) h s l / 90%) 75%,
      hsl(from var(--color-1) h s l / 0%)
    );
  }
}

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

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

/** UL.CHECKMARKS
 ***************************/

ol
{
  padding : 0;
}

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

  position      : relative;

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

ol li p
{
  margin : 0;
}

ol li:before
{
  content     : url('/websites/1852/images/oscar-maarsman-verf-klodder-oranje-lijst.png');
  font-family : FontAwesome, sans-serif;

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

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

@media (min-width : 1365px)
{
  .columns
  {
    columns    : 2;
    column-gap : 2em;
  }

  .columns p
  {
    break-inside : avoid;
    margin       : 0 0 1em;
  }
}

/** NAW
 ***************************/

.naw
{
  width      : auto;
  margin-top : 1em;
}

.naw td
{
  padding-right : 1em;
}

/** TOELAGEN TOEGEKEND
 ***************************/

.toelagen_toegekend td
{
  padding : 0.2em 1em 0.2em 0;
}


/** IMAGE BORDER SHADOW
 ***************************/

.image_border_shadow
{
  border     : 3px solid #FFFFFF;
  box-shadow : 0 0 5px rgba(0, 0, 0, 0.25);
}

/** CONTACT
 ***************************/

#hoofd > .element.text.contact
{
  color           : var(--color-7);

  position        : sticky !important;
  top             : 0 !important;

  display         : flex;
  align-items     : center;
  justify-content : end;

  height          : 2rem !important;

  z-index         : 1000;
}

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

#hoofd > .element.menu
{
  height : auto;
  top    : 2rem !important;
}

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

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

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

#hoofd > .element.menu ul a
{
  color         : var(--color-5);
  font-weight   : 500;
  padding-left  : 1.5em;
  padding-right : 1.5em;
}

#hoofd > .element.menu ul.responsive > li > a
{
  height         : 3.5em;
  padding-top    : 1.1em;
  padding-bottom : 1.1em;
}

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

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

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

@media (max-width : 1364px)
{
  #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-2);
  }
}

/** MENU|LOGO|PHONE
 ***************************/

#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 .icon
{
  font-size    : 1.5em;
  margin-right : 0.25em;
}

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

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

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

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

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

  #hoofd > .element.menu.top .website-menu-phone a
  {
    padding : 0.5em 0.5em;
  }
}

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

@media (min-width : 1365px)
{
  .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 : 5em 4fr 1fr;
    grid-template-areas   : "top_menu top_logo top_phone";
  }
}

.element.menu
{
  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
 *************************************/

#home #hoofd > .element.text.header
{
  text-align : center;
  max-height : 75vh;
  overflow   : hidden;
}

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

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

body:not(#home) #hoofd > .element.text.header_block_1,
body:not(#home) #hoofd > .element.text.header_block_2
{
  display : none;
}

@media (min-width : 768px)
{
  #home #hoofd > .element.text.header:has(img) ~ .element.text.header_block_1,
  #home #hoofd > .element.text.header:has(img) ~ .element.text.header_block_2
  {
    margin-top    : 7.5vw;
    margin-bottom : -100%;
    max-height    : max-content;
  }

  #home #hoofd > .element.text.header:has(img) ~ .element.text.header_block_1
  {
    margin-top : 1.75vw;
  }

  #home #hoofd > .element.text.header:has(img) ~ .element.text.header_block_2
  {
    margin-top : 5vw;
  }
}

@media (max-width : calc(768px - 1px))
{
  #home #hoofd > .element.text.header
  {
    display : none;
  }

  #home #hoofd > .element.text.header_block_1
  {
    background-image : url('/websites/1852/images/oscar-maarsman-header.jpg');
  }

  #home #hoofd > .element.text.header_block_2
  {
    padding : 7.5em 0 !important;
  }
}

#home #hoofd > .element.text.header:has(img) ~ .element.text.header_block_2 img
{
  width      : 75%;
  border     : 0.75em solid var(--color-light);
  box-shadow : 0 0 1em 0.25em rgba(0, 0, 0, 0.2);
  transform  : rotate(5deg);
}

/** TOEGEKEND
 *************************************/

.element.text.toegekend
{
  color : var(--color-8);
}

.element.text.toegekend strong
{
  color          : var(--color-dark);
  text-transform : uppercase;
  margin-right   : 1em;
}

.element.text.toegekend .reeds_toegekend .title
{
  color       : var(--color-contrast);
  font-weight : 700;
  white-space : nowrap;

  width       : 11em;
}

.element.text.toegekend .reeds_toegekend .items
{
  position : relative;
  overflow : hidden;
}

@media (max-width : calc(768px - 1px))
{
  .element.text.toegekend .reeds_toegekend td
  {
    display : block;
    height  : 2em;
  }
}

.element.text.toegekend ul
{
  display     : flex;
  gap         : 4em;

  position    : absolute;

  padding     : 0;
  margin      : 0;

  white-space : nowrap;

  animation   : scroll_right_to_left 40s linear infinite;
}

.element.text.toegekend ul li
{
  position         : relative;
  list-style       : none;
  list-style-image : url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.element.text.toegekend ul li:after
{
  content          : "";

  position         : absolute;
  top              : 0.4em;
  left             : -1.1em;
  width            : 0.6em;
  height           : 0.6em;

  border-radius    : 50%;
  background-color : var(--color-contrast);
}

@keyframes scroll_right_to_left
{
  0%
  {
    transform : translateX(0);
  }
  100%
  {
    transform : translateX(calc(-100% + calc(100vw - var(--element-padding) - 11em - 20em)));
  }
}

/** PAINT
 ***************************/

.paint
{
  text-align : center;
  position   : relative;
  width      : max-content;
  height     : max-content;
}

.paint img
{
  width      : 75%;
  border     : 0.75em solid var(--color-light);
  box-shadow : 0 0 1em rgba(0, 0, 0, 0.1);
}

.paint:before
{
  content             : "";

  position            : absolute;
  width               : 100%;
  height              : 100%;
  top                 : 0;
  left                : 0;

  background-position : center bottom;
  background-repeat   : no-repeat;
  background-size     : 100% 100%;

  z-index             : -1;
}

.paint.green:before
{
  background-image : url('/websites/1852/images/oscar-maarsman-verf-klodder-groen.png');
}

.paint.orange:before
{
  background-image : url('/websites/1852/images/oscar-maarsman-verf-klodder-oranje.png');
}

.paint.green.small img
{
  width      : 75%;
  border     : 0.75em solid var(--color-light);
  box-shadow : 0 0 1em 0.25em rgba(0, 0, 0, 0.2);
}

.element.text.header_block_2 .paint.green.small
{
  width  : 35em;
  height : auto;
}

.element.text.header_block_2 .paint.green.small:before
{
  background-image : url('/websites/1852/images/oscar-maarsman-verf-klodder-groen-klein.png');
}

.element.text:not(.header_block_2) .paint.green.small:before
{
  width            : 130%;
  height           : 70%;
  top              : 3em;
  left             : -3em;

  background-image : url('/websites/1852/images/oscar-maarsman-verf-klodder-groen-klein.png');
  transform        : rotate(345deg);
}

@media (min-width : 768px)
{
  .element.text.content_block_3 .paint,
  .element.text.content_block_5 .paint
  {
    margin-right : 5em;
  }

  .element.text.content_block_3 .paint,
  .element.text.content_block_5 .paint,
  .element.text.content_block_7 .paint
  {
    float : right;
  }
}

@media (max-width : calc(768px - 1px))
{
  .element.text.content_block_2 .paint,
  .element.text.content_block_3 .paint,
  .element.text.content_block_5 .paint,
  .element.text.content_block_7 .paint,
  .element.text.content_block_8 .paint
  {
    margin : 0 auto;
  }
}

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

#hoofd > .element.text.content_block_2:has(img) .paint.orange:before
{
  background-size : 80% 80%;

  transform       : rotate(40deg);
}

#hoofd > .element.text.content_block_2 .paint.orange.kernwaarde:before
{
  top  : 0;
  left : 0;
}

#hoofd > .element.text.content_block_2 .paint.orange.kernwaarde
{
  color       : var(--color-light);
  font-family : var(--font-header);
  font-size   : 1.5em;
}

@media (min-width : 768px)
{
  #hoofd > .element.text.content_block_2 .paint.orange.kernwaarde
  {
    width     : 17.5em;
    height    : 17.5em;
    padding   : 3em;

    transform : rotate(-10deg);
  }
}

@media (max-width : calc(768px - 1px))
{
  #hoofd > .element.text.content_block_2 .paint.orange.kernwaarde
  {
    width   : 15em;
    height  : 15em;
    padding : 1.5em;
  }
}

/** HEADER BLOCK 2
 *************************************/

#hoofd > .element.text.header_block_2 .paint.green:before
{
  transform : rotate(-33deg);
}

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

@media ( min-width : 768px)
{
  #hoofd > .element.text.content_line_1
  {
    text-align : center;
  }
}

#hoofd > .element.text.content_line_1
{
  background-image    : url('/websites/1852/images/oscar-maarsman-silhouet-van-een-boom.png');
  background-position : right bottom;
  background-repeat   : no-repeat;
}

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

@media ( min-width : 768px)
{
  .element.text.content_line_2
  {
    text-align : center;
  }
}

.element.text.content_line_2 img
{
  position : absolute;
  right    : 1em;
  bottom   : 1em;

  width    : 12.5em;
}

/** GALLERIJ
 *************************************/

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

/** CONTENT BLOCK 7/8
 *************************************/

#hoofd > .element.text.content_block_7 .paint.orange,
#hoofd > .element.text.content_block_8 .paint.green
{
  text-align : left;

  padding    : 1em 2em;
}

#hoofd > .element.text.content_block_2 .paint,
#hoofd > .element.text.content_block_3 .paint,
#hoofd > .element.text.content_block_5 .paint,
#hoofd > .element.text.content_block_7 .paint,
#hoofd > .element.text.content_block_8 .paint
{
  width : 35em;
}

#hoofd > .element.text.content_block_7 .paint.orange,
#hoofd > .element.text.content_block_8 .paint.green
{
  padding : 4em 5em 4em 7em;
}

@media (max-width : calc(768px - 1px))
{
  #hoofd > .element.text.content_block_1 .paint,
  #hoofd > .element.text.content_block_2 .paint,
  #hoofd > .element.text.content_block_3 .paint,
  #hoofd > .element.text.content_block_6 .paint,
  #hoofd > .element.text.content_block_7 .paint,
  #hoofd > .element.text.content_block_8 .paint
  {
    width : 30em;
  }

  #hoofd > .element.text.content_block_5 .paint
  {
    width : 27.5em;
  }

  #hoofd > .element.text.content_block_7 .paint.orange,
  #hoofd > .element.text.content_block_8 .paint.green
  {
    padding : 5em 5em 4em 5em;
  }
}

@media (max-width : calc(768px - 1px))
{
  .paint
  {
    font-size : 0.8em;
  }
}

#hoofd > .element.text.content_block_8 .paint.green,
#hoofd > .element.text.content_block_7 .paint.orange,
#hoofd > .element.text.content_block_8 .paint.green h2,
#hoofd > .element.text.content_block_7 .paint.orange h2
{
  color : var(--color-light);
}

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

#hoofd > .element.text.content_block_7 .paint.orange pre
{
  color : var(--color-6);
}

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

#hoofd > .element.text.content_block_8 .paint.green pre
{
  color : var(--color-contrast);
}

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

#hoofd > .element.text.footer h2
{
  font-size      : 1em;
  letter-spacing : 1px;
  margin-bottom  : 1em;
}

#hoofd > .element.text.footer p
{
  margin : 0.5em 0;
}

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

@media (min-width : 1365px)
{
  #hoofd > .element.text.footer .footer_column:first-child
  {
    padding-left : 0;
  }

  #hoofd > .element.text.footer .footer_column:last-child
  {
    padding-right : 0;
  }

  #hoofd > .element.text.footer .footer_column:not(:last-child)
  {
    border-right : 1px solid var(--color-contrast);
  }
}

@media (max-width : 1364px) and (min-width : 768px)
{
  #hoofd > .element.text.footer .footer_column
  {
    padding : 2em 3em;
  }

  #hoofd > .element.text.footer .footer_column.logo
  {
    border-bottom : 1px solid var(--color-contrast);
    border-right  : 1px solid var(--color-contrast);
  }

  #hoofd > .element.text.footer .footer_column.navigeer
  {
    border-top  : 1px solid var(--color-contrast);
    border-left : 1px solid var(--color-contrast);
  }
}

@media (max-width : 768px)
{
  #hoofd > .element.text.footer .footer_column.menu,
  #hoofd > .element.text.footer .footer_column.contact,
  #hoofd > .element.text.footer .footer_column.navigeer
  {
    border-top  : 1px solid var(--color-contrast);
    padding-top : 2em;
  }
}

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

#hoofd > .element.text.footer .footer_columns
{
  display : grid;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.footer .footer_columns
  {
    grid-template-columns : 1fr 1fr 1fr 1fr;
  }
}

@media (max-width : 1364px) and (min-width : 768px)
{
  #hoofd > .element.text.footer .footer_columns
  {
    grid-template-columns : 1fr 1fr;

    grid-gap              : 0 2em;
  }
}

@media (max-width : 768px)
{
  #hoofd > .element.text.footer .footer_columns
  {
    grid-template-columns : auto;

    grid-gap              : 2em 0;
  }
}

/** 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-6);
}

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

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

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

  --color-copyright : var(--color-6);
}

#website_footer
{
  display : none;
}

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

form
{
  font-size : 0.8em;
}

form > ul > li > label
{
  font-size : 1.5em;
}

form > ul > li
{
  margin-top    : 1em;
  margin-bottom : 1em;
}

form input[type=submit]
{
  color      : var(--color-light);
  background : var(--color-6);
  transition : all 0.2s ease-in-out;
}

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

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

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

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

#hoofd > .element.text.copyright
{
  padding : 0.5em 0 0.25em;
}

body:not(#home) #hoofd > .element.text.header,
#hoofd > .element.text.header_block_1,
#hoofd > .element.text.header_block_2,
#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_2,
#hoofd > .element.text.gallerij,
#hoofd > .element.text.content_line_3,
#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8,
#hoofd > .element.text.footer
{
  padding : 2em;
}

#hoofd > .element.text.contact
{
  padding : 0 2em;
}

#hoofd > .element.text.content_block_1,
#hoofd > .element.text.toegekend
{
  padding : 1em 2em;
}

#hoofd > .element.text.content_block_7:has(.paint),
#hoofd > .element.text.content_block_8:has(.paint)
{
  padding : 1em;
}

@media (min-width : 1365px)
{
  body:not(#home) #hoofd > .element.text.header,
  #hoofd > .element.text.header_block_1,
  #hoofd > .element.text.header_block_2,
  #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_2,
  #hoofd > .element.text.gallerij,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.footer
  {
    padding : 4em;
  }

  #hoofd > .element.text.content_block_7:has(.paint),
  #hoofd > .element.text.content_block_8:has(.paint)
  {
    padding : 0 4em 4em;
  }

  #hoofd > .element.menu,
  body:not(#home) #hoofd > .element.text.header,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.header_block_1,
  #hoofd > .element.text.toegekend,
  #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_2,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.footer
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.text.toegekend
  {
    padding-right : 0;
  }

  #hoofd > .element.menu,
  body:not(#home) #hoofd > .element.text.header,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.header_block_2,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.footer
  {
    padding-right : var(--element-padding);
  }
}

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

@media (min-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 4em 4em 1fr;
    grid-template-areas   :
      "contact contact contact contact"
      "menu menu menu menu"
      "header_block_1 header_block_1 header_block_2 header_block_2"
      "header header header header"
      "toegekend toegekend toegekend toegekend"
      "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_3 content_block_4 content_block_4"
      "content_block_5 content_block_5 content_block_6 content_block_6"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "gallerij gallerij gallerij gallerij"
      "content_line_3 content_line_3 content_line_3 content_line_3"
      "content_block_7 content_block_7 content_block_8 content_block_8"
      "footer footer footer footer"
      "copyright copyright copyright copyright"
      "scrollbar scrollbar scrollbar scrollbar"
  }
}

@media (min-width : 768px) and (max-width : calc(1365px - 1px))
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 4em 4em 1fr;
    grid-template-areas   :
      "contact contact contact contact"
      "menu menu menu menu"
      "header_block_1 header_block_1 header_block_2 header_block_2"
      "header header header header"
      "toegekend toegekend toegekend toegekend"
      "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_3 content_block_4 content_block_4"
      "content_block_5 content_block_5 content_block_6 content_block_6"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "gallerij gallerij gallerij gallerij"
      "content_line_3 content_line_3 content_line_3 content_line_3"
      "content_block_7 content_block_7 content_block_8 content_block_8"
      "footer footer footer footer"
      "copyright copyright copyright copyright"
      "scrollbar scrollbar scrollbar scrollbar"
  }
}

@media (max-width : calc(768px - 1px))
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "contact"
      "menu"
      "header"
      "header_block_1"
      "toegekend"
      "content_block_1"
      "content_block_2"
      "content_line_1"
      "content_block_3"
      "content_block_4"
      "content_block_5"
      "content_block_6"
      "content_line_2"
      "gallerij"
      "content_line_3"
      "content_block_7"
      "content_block_8"
      "footer"
      "copyright"
      "scrollbar"
  }

  .header_block_2
  {
    display : none;
  }
}

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

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

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

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

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

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

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

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

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

.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.content_line_2
{
  grid-area : content_line_2;
}

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

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

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

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

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

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

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