/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Groningen Danst
*   www.groningendanst.nl
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root
{
  /**
   * 2k      1920 = 120em
   * desktop 1365 = 85em
   * width   1300 = 81em
   * width   1200 = 75em
   * tablet  768  = 48em
   * mobile  400  = 25em
   *************************/

  /*--font-size                    : 16px;*/
  --font-size                    : clamp(16px, 0.85vw, 32px);
  --font-text_1                  : Dosis, sans-serif;
  --font-text_2                  : Raleway, sans-serif;

  --color-light                  : hsl(272, 32%, 95%);
  --color-dark                   : hsl(272, 32%, 25%);

  --color-link                   : hsl(327, 90%, 42%);

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

  --website-content-width-menu   : 85.3125rem;
  --element-padding-menu         : calc(calc(100vw - var(--website-content-width-menu)) / 2);

  --website-content-width-header : 120rem;
  --element-margin-header        : calc(max(0, calc(100vw - var(--website-content-width-header))) / 2);

  --color-1                      : hsl(272, 32%, 35%);
  --color-1-hover-1              : hsl(272, 32%, 35%, 0.4);
  --color-1-hover-2              : hsl(272, 32%, 35%, 0.2);

  --color-2                      : hsl(272, 32%, 44%);
  --color-3                      : hsl(272, 32%, 47%);

  --color-4                      : hsl(272, 32%, 51%);
  --color-4-hover-1              : hsl(272, 32%, 51%, 0.5);

  --shadow-s                     : inset 0 0.1em 0.2em hsl(272, 32%, 35%, 0.2), 0 0.1em 0.2em hsl(272, 32%, 35%, 0.2), 0 0.2em 0.4em hsl(272, 32%, 35%, 0.1);
  --shadow-m                     : inset 0 0.1em 0.2em hsl(272, 32%, 35%, 0.3), 0 0.1em 0.2em hsl(272, 32%, 35%, 0.2), 0 0.2em 0.4em hsl(272, 32%, 35%, 0.1);

  --header-base                  : 1.125rem;
  --header-20                    : calc(var(--header-base) * 2);
  --header-30                    : calc(var(--header-base) * 3);

  --menu-base                    : 1.125rem;
  --menu-150                     : calc(var(--menu-base) * 15);

  --text-base                    : 1.25rem;
}

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

html
{
  color               : var(--color-dark);
  font-family         : var(--font-text_1);
  font-size           : var(--font-size);
  font-weight         : 500;

  scroll-behavior     : smooth;
  background-image    : url(/websites/1863/images/paper-background.jpg);
  background-repeat   : repeat;
  background-position : center;
}

@media (min-width : 85rem)
{
  h1
  {
    font-size : var(--header-30);
  }

  h2
  {
    font-size : var(--header-20);
  }
}

.element.text.header_text h1
{
  color : var(--color-light);
}

h1
{
  font-family : var(--font-text_1);
  font-weight : 500;

  margin-top  : 0;
}

h2
{
  color       : var(--color-1);
  font-family : var(--font-text_1);
  font-weight : 600;

  margin-top  : 0;
}

h2
{
  border-left   : 0.2rem solid;
  padding-left  : 1rem;
  margin-bottom : 0;
}

.module h2
{
  border-left   : none;
  padding-left  : 0;
  margin-bottom : 0;
}

h2 + h3
{
  border-left  : 0.2rem solid transparent;
  padding-left : 1rem;
}

h3
{
  color       : var(--color-dark);
  font-family : var(--font-text_1);
  font-weight : 600;

  margin-top  : 0;
}

table
{
  width : auto;
}

td
{
  padding : 0.25rem 0.5rem 0.25rem 0;
}

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

a:hover
{
  text-decoration : underline;
}

a.button
{
  color            : hsl(0, 0%, 100%);
  font-family      : var(--font-text_2);
  font-weight      : 600;
  text-transform   : uppercase;

  min-height       : 3em;
  width            : auto;
  padding-top      : 0.7em;

  background-color : var(--color-link);
  border           : 2px solid var(--color-light);
  border-radius    : 0.4em;

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

  transition       : 0.7s;
}

@media (max-width : calc(85rem - 1px))
{
  a.button
  {
    width : calc(100% - 2em)
  }
}

a.button:hover
{
  color            : #FFFFFF;
  background-color : var(--color-1);
  text-decoration  : none;
}

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

/** ARTIKEL
 ***************************/

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

.module.artikel .content li
{
  list-style : disc !important;
}

.module.artikel td
{
  vertical-align : middle;
}

.module.artikel label
{
  color       : var(--color-light);
  font-size   : 1.25rem;
  font-family : var(--font-header);

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

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

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

.module.artikel .content
{
  padding : 0 1rem 0.25rem;
}

.module.artikel input ~ label,
.module.artikel input:checked ~ .content
{
  background-color : var(--color-2);
  border-bottom    : none;
  padding          : 0.75em 1em;
}

.module.artikel input:checked ~ .content
{
  padding-top      : 0;
  background-color : transparent;
}

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

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

  position       : absolute;
  right          : 0.5em;
  top            : 0;
  bottom         : 0;
  margin         : auto;

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

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

/** PRODUCT
 ***************************/

.module.producten .visible *
{
  user-select : none;
}

.module.producten.overview
{
  display : block;
}

.module.producten.overview .image
{
  position      : relative;
  height        : 15em;
  width         : 15em;

  padding       : 0.25em;
  border        : 0.2em solid var(--color-4);

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

.module.producten.overview .image:after
{
  content          : "";

  position         : absolute;
  top              : 0;
  left             : 0;
  bottom           : 0;
  right            : 0;
  width            : calc(100% - 0.5em);
  height           : calc(100% - 0.5em);

  margin           : auto;

  border-radius    : 0.2em;

  pointer-events   : none;
  background-color : rgba(0, 0, 0, 0.6);
  z-index          : 2;
}

.module.producten.overview .active .image:after
{
  background-color : rgba(0, 0, 0, 0.4);
}

.module.producten.overview .image img
{
  object-fit    : cover;
  height        : 100%;
  width         : 100%;

  border-radius : 0.2em;
}

.module.producten.overview a .information
{
  position : absolute;
  bottom   : 0;

  padding  : 1em 1em;

  z-index  : 3;
}

.module.producten.overview a .title
{
  font-size   : 0.9em;
  color       : hsl(0, 0%, 100%);
  font-weight : bold;
}

.module.producten.overview a .description
{
  font-size : 0.7em;
  color     : hsl(0, 0%, 90%);
}

/** PRODUCT NAVIGATION
 ***************************/

.module.producten.overview .navigation
{
  color       : var(--color-1);
  font-size   : unset;
  align-items : center;
}

.module.producten.overview .navigation h2
{
  justify-self : start;
}

.module.producten.overview .navigation .left,
.module.producten.overview .navigation .right
{
  font-size    : 2em;
  justify-self : end;
}

/** PRODUCT NAVIGATION STRUCTURE
 ***************************/

.module.producten.overview .navigation
{
  display               : grid;
  align-items           : center;
  grid-template-columns : auto 3em 3em;
  grid-template-areas   : "title navigate_left navigate_right";
}

.module.producten.overview .navigation h2
{
  grid-area : title;
}

.module.producten.overview .navigation .left
{
  grid-area : navigate_left;
}

.module.producten.overview .navigation .right
{
  grid-area : navigate_right;
}

/** SCROLL
 *************************************/

.module.producten.overview .visible
{
  height   : 15em;
  margin   : 0 auto;

  overflow : hidden;
  position : relative;

  z-index  : 1;
}

.module.producten.overview .visible .animate
{
  transition : 0.7s;
}

.module.producten.overview .visible .scroller
{
  height   : inherit;

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

.module.producten.overview .visible .scroller a
{
  width          : auto;
  height         : inherit;
  padding-right  : 0.5em;

  display        : table-cell;
  vertical-align : top;

  cursor         : pointer;
}

.module.producten.overview .visible .scroller a img
{
  max-width  : none;
  max-height : 100%;

  margin     : 0;
}

/** PAGE VIEW
 *************************************/

.module.producten.pageview .image_columns
{
  display       : flex;
  justify-self  : start;
  gap           : 0.5em;
  height        : 20em;

  border-radius : 0.4em;
}

.module.producten.pageview .image_columns img
{
  border-radius : 0.4em;
}

.module.producten.pageview .image_columns_left
{
  float        : left;
  margin-right : 1em;
}

.image_circle.employee
{
  position   : relative;
  padding    : 0;
  margin-top : 1em;
}

.image_circle.employee img
{
  position      : absolute;
  bottom        : 0;
  top           : 0;

  width         : 100%;
  margin        : auto;

  border-radius : 0;
}

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

.module.review
{
  margin        : 0 auto;
  padding       : 2em;

  border-radius : 1em;

  box-shadow    : 0.25em 0.25em 0.5em rgba(0, 0, 0, 0.3);
  background    : hsl(0, 0%, 100%, 0.2);
}

@media (max-width : calc(48rem - 1px))
{
  .module.review
  {
    font-size : 0.6em;
  }

  .module.review .title,
  .module.review .text
  {
    font-size : 1.2em;
  }

  .module.review .visible .scroller
  {
    height : 100%;
  }
}

.module.review .navigation
{
  text-align : right;
}

.module.review .top_row .number
{
  position : relative;
}

.module.review .review_block.active .top_row .number:after
{
  content          : '';
  position         : absolute;
  top              : 0;
  bottom           : 0;
  right            : -1.25em;

  margin           : auto;

  width            : 0.5em;
  height           : 0.5em;

  border-radius    : 50%;
  background-color : gold;
}

.module.review .review_blocks
{
  --module-review-top-row           : var(--color-1);
  --module-review-top-row-active    : var(--color-1);
  --module-review-stars-selected    : gold;
  --module-review-number-background : var(--color-link);
}

/** EVENTS
 ***************************/

.module.events .day:has(.event) .day__header
{
  color            : var(--color-light);
  background-color : var(--color-1);
}

/** ELEMENTS
 ***********************************************/

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

#hoofd > .element.text
{
  font-size : var(--text-base);
}

/** BORDERS
 ***************************/

table.borders
{
  width : 100%;
}

table.borders td
{
  text-align : center;
  border     : 0.2rem solid var(--color-2);
}

table.borders tr:nth-child(1) td,
table.borders tr:nth-child(2) td
{
  font-weight : bold;
}

/** USP-ICONS
 ***************************/

.usp-icons
{
  display               : grid;
  grid-gap              : 1em;
  grid-template-columns : repeat(4, minmax(clamp(7em, 0.85vw, 12.5em), 1fr));
  @media (max-width : calc(48rem - 1px))
  {
    grid-template-columns : repeat(2, minmax(clamp(7em, 0.85vw, 12.5em), 1fr));
  }
}

.usp-icon .image
{
  display         : flex;
  align-items     : center;
  justify-content : center;

  aspect-ratio    : 1;
  padding         : 0.5em;
  margin-bottom   : 1em;

  border          : 0.2em solid var(--color-4);
  border-radius   : 20%;
  overflow        : hidden;
}

.usp-icon .image img
{
  border-radius : inherit;
  max-height    : 100%;
}

.usp-icon .title
{
  text-align  : center;
  font-size   : 1.2em;
  font-weight : 600;
}

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

#hoofd > .element.menu.top
{
  font-size        : var(--menu-base);
  font-family      : var(--font-text_2);

  top              : 0 !important;

  box-shadow       : 0 0.4em 0.1em 0 var(--color-1-hover-2);
  background-color : hsl(0, 0%, 100%);
}

.header_has_image #hoofd > .element.menu.top:after
{
  content             : '';

  position            : absolute;
  left                : 0;
  bottom              : -3.25vw;

  display             : block;
  width               : calc(100% + 1px);
  aspect-ratio        : 1512 / 55;

  transform           : rotate(180deg);

  background-image    : url(/websites/1863/images/golf-white.svg);
  background-position : 50% 50%;
  background-repeat   : no-repeat;
  background-size     : cover;
  z-index             : -1;
}

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

#hoofd > .element.menu.top ul li a
{
  color   : var(--color-1);
  padding : 0.7em 0.85em;
}

@media (min-width : 85rem)
{
  #hoofd > .element.menu.top ul.responsive > li > a
  {
    padding : 2.5em 0.85em 3.5em;
  }

  body:not(.header_has_image) #hoofd > .element.menu.top ul.responsive > li > ul
  {
    margin-top : -2.6em;
  }

  .header_has_image #hoofd > .element.menu.top ul.responsive > li > a
  {
    padding : 2.5em 0.85em 0.9em;
  }
}

#hoofd > .element.menu.top ul li:hover > a
{
  color      : var(--color-link);
  transition : 0.2s;
}

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

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

@media (max-width : calc(85rem - 1px))
{
  #hoofd > .element.menu ul
  {
    background-color : var(--color-light);
    padding-bottom   : 1em;
  }

  #hoofd > .element.menu ul.responsive label
  {
    font-size : 0.5em;
  }

  #hoofd > .element.menu.top ul li a
  {
    width : 85%;
  }
}

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

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

@media (min-width : 85rem)
{
  .header_has_image #hoofd > .element.menu.top .website-menu-phone
  {
    padding-top : 1em;
  }
}

body:not(.header_has_image) #hoofd > .element.menu.top .website-menu-phone
{
  padding-bottom : 1em;
}

#hoofd > .element.menu.top .website-menu-phone a
{
  color     : var(--color-1);
  font-size : 1.3em;
}

#hoofd > .element.menu.top .website-menu-phone .material-symbols-outlined
{
  font-size      : 1.5em;
  vertical-align : middle;
  margin-right   : 0.2em;
}

#hoofd > .element.menu.top .website-menu-phone .socialmedia td
{
  padding : 0;
}

#hoofd > .element.menu.top .website-menu-phone .socialmedia a:has(.fa)
{
  padding : 0 0.25em;
}

#hoofd > .element.menu.top .website-menu-phone .socialmedia .fa
{
  font-size : 1em;
}

#hoofd > .element.menu.top .website-menu-phone .socialmedia .fa:hover
{
  color : hsl(0, 0%, 100%)
}

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

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

  #hoofd > .element.menu.top .website-menu-logo img
  {
    position : absolute;
    top      : 0.4em;

    height   : 6.5em;
  }
}

@media (max-width : calc(85rem - 1px))
{
  #hoofd > .element.menu.top
  {
    height        : auto;
    padding-right : 0.5em;
  }

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

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

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

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

#hoofd > .element.text.header
{
  font-size        : 1.1rem;

  max-height       : 37.5em;

  overflow         : hidden;
  background-color : var(--color-dark);
}

@media (max-width : calc(48rem - 1px))
{
  #hoofd > .element.text.header .slideshow
  {
    width       : calc(100% + 10em);
    margin-left : -5em;
  }
}

#hoofd > .element.text.header .slider .navigation
{
  grid-template-columns : repeat(auto-fit, 1.5em);
  min-width             : 0;
}

#hoofd > .element.text.header .slider
{
  max-height : inherit;
}

#hoofd > .element.text.header .slider img
{
  width : 100%;
}

#hoofd > .element.text.header .slider .navigation > *
{
  color     : var(--color-4);
  font-size : 0.75em;
}

/** HEADER TEXT
 ***************************/

#hoofd > .element.text.header_text
{
  font-size        : 1.1rem;
  font-family      : var(--font-text_1);
  text-align       : center;

  @media (min-width : 120rem)
  {
    margin-left : var(--element-margin-header);
  }

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

@media (min-width : 85rem)
{
  .header_has_image #hoofd > .element.text.header_text
  {
    text-align : left;
  }
}

#hoofd > .element.text.header_text a.button
{
  font-size  : 1.15em;

  margin-top : 0.5em;

  min-width  : 12em;
}

@media (min-width : 85rem)
{
  .header_has_image #hoofd > .element.text.header_text
  {
    width         : max-content;
    height        : max-content !important;
    margin-top    : 10em;
    margin-bottom : -100%;

    background    : transparent;
  }
}

/** IMAGE_CIRCLE
 ***************************/

.image_circle
{
  aspect-ratio  : 1;
  margin        : auto;
  padding       : 0.5em;

  border        : 0.2em solid var(--color-4);
  border-radius : 20%;
  overflow      : hidden;
}

.image_circle img
{
  display       : block;
  border-radius : inherit;
}

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

/** CONTENT LINE 2 | BLOCK 5|6
 ***************************/

#hoofd > .element.text.content_line_3,
#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6
{
  color            : var(--color-light);
  background-color : var(--color-1);
}

#hoofd > .element.text.content_line_3 *,
#hoofd > .element.text.content_block_5 *,
#hoofd > .element.text.content_block_6 *
{
  color : var(--color-light);
}

#hoofd > .element.text.content_line_3 a.button:hover,
#hoofd > .element.text.content_block_5 a.button:hover,
#hoofd > .element.text.content_block_6 a.button:hover
{
  background-color : var(--color-4-hover-1);
}

/** CONTENT BLOCK 5|6
 ***************************/

.center,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_block_3:not(:has(.image_circle)),
#hoofd > .element.text.content_block_6
{
  display         : flex;
  flex-flow       : column;
  justify-content : center;

  height          : 100%;
}

#hoofd > .element.text.content_block_2 p,
#hoofd > .element.text.content_block_3 p,
#hoofd > .element.text.content_block_6 p
{
  margin-bottom : 0;
}

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

#home #hoofd > .element.text.content_block_1,
#home #hoofd > .element.text.content_block_2
{
  color            : var(--color-light);
  background-color : var(--color-1);
}

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

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

#hoofd > .element.text.contact form
{
  max-width : 75em;
}

/** AGENDA
 ***************************/

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

#hoofd > .element.text.agenda
{
  position : fixed !important;
  bottom   : 1rem;
  right    : 1rem;
  left     : auto !important;
  top      : auto;

  overflow : hidden;

  width    : 20rem;
}

#hoofd > .element.text.agenda
{
  font-size        : 0.9em;

  border           : 0.2rem solid var(--color-4);
  border-radius    : 2em;

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

  background-color : var(--color-1);
  z-index          : 500;
}

#hoofd > .element.text.agenda hr
{
  margin : 2em 0;
}

#hoofd > .element.text.agenda .agenda_footer
{
  text-align       : right;
  padding          : 0.25rem 1rem 0;

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

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

#hoofd > .element.text.agenda .agenda_footer .agenda_open_close
{
  cursor : pointer;
}

#hoofd > .element.text.agenda .agenda_scroller
{
  padding          : 0 1rem;

  overflow-y       : scroll;
  overflow-x       : hidden;

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

  scrollbar-color  : hsla(0, 0%, 100%, 0.85) var(--color-1);
  scrollbar-width  : thin;
}

#hoofd > .element.text.agenda .agenda_scroller::-webkit-scrollbar
{
  width : 0.6rem;
}

#hoofd > .element.text.agenda .agenda_scroller::-webkit-scrollbar-thumb
{
  background-color : hsla(0, 0%, 0%, 0.3);
}

/** AGENDA OPEN | CLOSE
 ***************************/

#hoofd > .element.text.agenda .agenda_scroller
{
  height     : calc(100% - 1rem);
  bottom     : 4rem;
  transition : 0.5s;
}

#hoofd > .element.text.agenda
{
  height     : 4rem !important;
  padding    : 0 1rem;
  transition : 1s;
}

#hoofd > .element.text.agenda.open
{
  height     : 31rem !important;
  padding    : 1.5rem 1em 3.75rem;
  transition : 1s;
}

#hoofd > .element.text.agenda .agenda_footer
{
  position   : absolute;
  top        : auto;
  left       : 0;
  right      : 0;
  bottom     : 0;

  height     : 4rem;

  border-top : 0.2rem solid var(--color-4);
}

#hoofd > .element.text.agenda.open .agenda_footer
{
  border-top : 0.2rem solid var(--color-4);
  transition : 1s;
}

#hoofd > .element.text.agenda .agenda_footer
{
  border-top-color : transparent;
  transition       : 0.5s;
}

/** TARIEVEN
 ***************************/

@media (max-width : calc(48rem - 1px))
{
  .tarieven tr td:first-child
  {
    font-weight : bold;
  }

  .tarieven td
  {
    display   : inline-block;
    min-width : 285px;
  }

  .tarieven td:has(h3) + td
  {
    display : none;
  }
}

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

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

body:not(.header_has_image) #hoofd > .element.text.footer
{
  margin-top : 3.25vw;
}

body:not(.header_has_image) #hoofd > .element.text.footer:after
{
  content             : '';

  position            : absolute;
  left                : 0;
  top                 : -3.25vw;

  display             : block;
  width               : 100%;
  aspect-ratio        : 1512 / 55;

  background-image    : url(/websites/1863/images/golf-footer.svg);
  background-position : 50% 50%;
  background-repeat   : no-repeat;
  background-size     : cover;
  z-index             : -1;
}

#hoofd > .element.text.footer h2
{
  color       : var(--color-light);
  @media (min-width : 85rem)
  {
    font-size : 2.25em;
  }
  font-weight : 500;
  margin      : 0;
  padding     : 0;
  border      : none;
}

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

@media (min-width : 85rem)
{

  #hoofd > .element.text.footer .footer_block .footer_block_slogan hr
  {
    display : none;
  }
}

#hoofd > .element.text.footer .footer_block .footer_block_nvd img
{
  max-width : 10em;
}

#hoofd > .element.text.footer .footer_block .footer_block_nvd p
{
  margin-top : 0;
}

#hoofd > .element.text.footer .footer_block .footer_block_address
{
  font-size : 1.25em;
}

#hoofd > .element.text.footer .footer_block .footer_block_address p
{
  margin-top : 0.75em;
}

.socialmedia .fa
{
  color           : var(--color-link);
  font-size       : 1.5em;

  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 2em;
  height          : 2em;

  border          : 3px solid var(--color-link);
  border-radius   : 50%;
}

.socialmedia .fa:hover
{
  color            : var(--color-light);
  background-color : var(--color-link);
}

#hoofd > .element.text.footer .fa,
#hoofd > .element.text.content_line_3 .fa,
#hoofd > .element.text.content_block_5 .fa,
#hoofd > .element.text.content_block_6 .fa
{
  color : var(--color-light);
}

.socialmedia .hide
{
  display : none;
}

/** FOOTER STRUCTURE
 ***************************/
#hoofd > .element.text.footer .footer_block
{
  display : grid;
}

@media (min-width : 85rem)
{
  #hoofd > .element.text.footer .footer_block
  {
    grid-template-columns : 15em 17.5em 20em auto;
    grid-template-rows    : 4.5em auto;

    grid-template-areas   :
    'footer_block_address footer_block_slogan footer_block_slogan footer_block_slogan'
    'footer_block_address footer_block_social footer_block_nvd .';
  }
}

@media (min-width : 48rem) and (max-width : calc(85rem - 1px))
{
  #hoofd > .element.text.footer .footer_block
  {
    grid-template-columns : 15em auto;
    grid-template-areas   :
    'footer_block_slogan footer_block_slogan'
    'footer_block_address footer_block_nvd'
    'footer_block_social .';
  }
}

@media (max-width : calc(48rem - 1px))
{
  #hoofd > .element.text.footer .footer_block
  {
    grid-template-columns : auto;
    grid-template-areas   :
    'footer_block_slogan'
    'footer_block_social'
    'footer_block_address'
    'footer_block_nvd';
  }
}

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

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

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

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

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

#hoofd
{
  padding-bottom : 0.3em;
}

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

  position         : fixed !important;
  bottom           : 0;

  padding          : 0;
  padding-top      : 0.5em;

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

  z-index          : 1000;
}

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

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

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

#website_footer
{
  display : none;
}

#copyright
{
  font-size         : 0.8em;
  --color-copyright : var(--color-light);
}

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

form label
{
  color     : var(--color-1);
  font-size : 2em;
  height    : auto;
}

form input[type=radio] + label + label
{
  white-space : normal;
}

form input,
form textarea
{
  color       : var(--color-1);
  font-size   : 2em;
  font-family : var(--font-text_2);
}

form input[type="submit"]
{
  color      : var(--color-light);
  font-size  : 1.5em;

  background : var(--color-1);
  box-shadow : var(--shadow-s);
}

form input[type="submit"]:hover
{
  box-shadow : var(--shadow-m);
}

form a
{
  font-size      : 0.9em;
  margin         : 0;
  line-height    : 1.5;
  height         : auto;
  vertical-align : top;
}

/** FOLDING
 ***************************/

form [type=fold]
{
  border-radius    : 0.4em;
  background-color : var(--color-2);
}

form [type=fold] input[type=checkbox] + label + label
{
  color        : var(--color-light);

  position     : relative;
  display      : inline-block;
  height       : 100%;
  width        : 100%;
  padding-left : 0.5em;
}

form [type=fold] input[type=checkbox] + label + label:after
{
  content        : '\f1e3';
  font-family    : 'Material Symbols Outlined', sans-serif;

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

  position       : absolute;
  right          : 0.5em;
  top            : 0;
  bottom         : 0;
  margin         : auto;

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

form [type=fold] input[type=checkbox]:checked + label + label:after
{
  content : '\f1e0';
}

form [type=fold]:has(:not(input:checked)) label
{
  color : var(--color-light);
}

form [type=fold] ul.checkbox
{
  margin-bottom : 1em;
}

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

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

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

@media (min-width : 85rem)
{
  #hoofd > .element.text.header_text,
  #hoofd > .element.text.content_line_1,
  #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_line_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.review,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.footer
  {
    padding : 2rem;
  }

  #hoofd > .element.menu
  {
    padding-left  : var(--element-padding-menu);
    padding-right : var(--element-padding-menu);
  }

  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.review,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.footer
  {
    padding-left  : var(--element-padding);
    padding-right : var(--element-padding);
  }

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

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

@media (max-width : calc(85rem - 1px))
{
  #hoofd > .element.text.header_text,
  #hoofd > .element.text.content_line_1,
  #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_line_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.review,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.agenda,
  #hoofd > .element.text.footer
  {
    padding : 1rem;
  }
}

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

@media (min-width : 85rem)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "menu menu"
      "header_text header_text"
      "header header"

      "content_line_1 content_line_1"
      "content_block_1 content_block_2"

      "review review"
      "content_line_2 content_line_2"
      "content_block_3 content_block_4"

      "content_line_3 content_line_3"
      "content_block_5 content_block_6"

      "contact contact"
      "agenda agenda"

      "footer footer"
      "scrollbar scrollbar";
  }
}

@media (min-width : 48rem) and (max-width : calc(85rem - 1px))
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "menu menu"
      "header header"
      "header_text header_text"

      "content_line_1 content_line_1"
      "content_block_1 content_block_2"

      "review review"
      "content_line_2 content_line_2"
      "content_block_3 content_block_4"

      "content_line_3 content_line_3"
      "content_block_5 content_block_6"

      "contact contact"
      "agenda agenda"

      "footer footer"
      "scrollbar scrollbar";
  }
}

@media (max-width : calc(48rem - 1px))
{
  .contact #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "menu"
      "header"
      "header_text"
      "content_line_1"
      "content_block_1"
      "content_block_2"
      "review"
      "content_line_2"
      "content_block_3"
      "content_block_4"
      "content_line_3"
      "content_block_6"
      "content_block_5"
      "contact"
      "agenda"
      "footer"
      "scrollbar";
  }

  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "menu"
      "header"
      "header_text"
      "content_line_1"
      "content_block_2"
      "content_block_1"
      "review"
      "content_line_2"
      "content_block_3"
      "content_block_4"
      "content_line_3"
      "content_block_6"
      "content_block_5"
      "contact"
      "agenda"
      "footer"
      "scrollbar";
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width : calc(85rem - 1px))
{
  .element.menu.top
  {
    grid-template-columns : 1fr 2fr 2fr;
    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;
}