/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Template Laura
*   www.laura.template.triplepro.nl
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=Barlow: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
{
  /*--font-size             : 16px;*/
  --font-size             : clamp(14px, 0.85vw, 32px);
  --font-text             : 'Roboto', sans-serif;
  --font-header           : 'Barlow', sans-serif;

  --color-light           : hsl(0, 0%, 100%);
  --color-dark            : hsl(0, 0%, 0%);

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

  --color-1               : hsl(180deg 100% 25%);
  --color-2               : hsl(180deg 100% 25%);
  --color-2-dark          : hsl(180deg 100% 20%);

  --color-3               : hsl(192deg 20% 25%);

  --color-4               : hsl(180deg 70% 92.5%);
  --color-4-dark          : hsl(180deg 35% 82.5%);

  --color-button          : hsl(180deg 100% 25%);
  --color-link            : hsl(25deg 100% 55%);
}

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

html
{
  color           : var(--color-3);
  font-size       : var(--font-size);
  font-family     : var(--font-text);

  scroll-behavior : smooth;
}

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

  margin      : 0 0 0.25em;
}

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

  margin      : 0 0 0.25em;
}

h3, pre, .sub_header
{
  color       : var(--color-1);
  font-size   : 1.25rem;
  font-weight : 600;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

.sub_header
{
  color : var(--color-4-dark);
}

table
{
  width  : auto;
  margin : 0 0 0.5em;
}

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

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

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

a:hover
{
  text-decoration : underline;
}

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

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

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

  border          : 2px solid var(--color-button);
  background      : var(--color-button);
  border-radius   : 0.3em;

  transition      : 0.2s;
}

a.button:before
{
  content      : "\e941";
  font-family  : 'Material Symbols Outlined', sans-serif;
  font-size    : 1.6em;
  line-height  : 1;

  margin-left  : -0.25em;
  margin-right : 0.25em;
}

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

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

a.button.line
{
  color         : var(--color-button);

  padding       : 0.5em 0.5em;

  border        : none;
  border-bottom : 1px solid var(--color-button);
  border-radius : 0;

  background    : transparent;
}

a.button.line:hover
{
  padding : 0.25em 0.65em;
  margin  : 0.25em -0.15em;
}

.not_visible
{
  visibility : hidden;
}

/** GHOST CIRCLE
 ********************************/

.ghost-circle
{
  color         : transparent;

  width         : 5em;
  height        : 5em;

  border-radius : 50%;
}

/** INSET BLOCK
 ********************************/

#home .inset_block
{
  padding : 2em;
}

.inset_block
{
  position         : relative;
  left             : 1.25em;

  border-radius    : 1.25em;

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

  overflow         : hidden;

  background-color : var(--color-light);
  z-index          : 2;
}

.inset_block img
{
  display    : block;
  width      : 100%;
  object-fit : cover;
}

@media (min-width : 85em)
{
  .inset_block
  {
    top    : 1em;
    left   : 5em;
    bottom : 0;

    width  : 30em;
  }
}

@media (max-width : 85em)
{
  .inset_block
  {
    width : calc(100% - 1.5em)
  }
}

.background_block
{
  position         : absolute;
  top              : 0;
  bottom           : 0;
  left             : 1em;

  width            : calc(100% - 1em);
  margin           : auto 0;

  height           : 10em;

  border-radius    : 2em 0 0 2em;

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

#hoofd > .element.text.content_block_1 .background_block
{
  right         : 1em;
  left          : auto;
  border-radius : 0 2em 2em 0;
}

#hoofd > .element.text.content_block_1 .inset_block
{
  left : 1em;
}

@media (min-width : 85em)
{
  #hoofd > .element.text.content_block_1 .inset_block
  {
    right : 5em;
    left  : auto;
  }
}

/** SUMMARY
 ********************************/

.summary
{
  margin-top : 1em;
}

.summary a
{
  color : var(--color-1);
}

.summary .material-symbols-outlined
{
  color         : var(--color-1);
  font-size     : 2.5em;
  padding-right : 0.3em;
}

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

/** SITEMAP
 ********************************/

.module.sitemap
{
  height : auto;
}

.module.sitemap > ul > li > a
{
  font-size : 1.15em;
  padding   : 0;
}

#hoofd > .element.text.footer .module.sitemap > ul > li > a:hover
{
  color : var(--color-link);
}

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

.module.tarieven input + label + ul
{
  max-height : unset;
  padding    : 0;
}

.module.tarieven label
{
  color       : var(--color-1);
  font-weight : bold;
}

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

.module.case .visible
{
  height : 7.5em;
  @media (min-width : 48em)
  {
    max-width : 55em;
  }
}

.module.case .visible .scroller .row img
{
  max-height   : 6.25em;
  padding      : 1em;
  margin-right : 1em;
  border       : 2px solid var(--color-1);
}

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

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

/** PARTNERS
 ***************************/

#hoofd > .element.text.partners
{
  overflow         : hidden;

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

#hoofd > .element.text.partners .ghost-circle
{
  bottom           : -2.65em;
  right            : 2em;

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

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

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

#hoofd > .element.text.content_block_1 img,
#hoofd > .element.text.content_block_3 img
{
  border-radius : 1.25em;
}

/** CONTENT BLOCK 3 en 4
 ***************************/

#home #hoofd > .element.text.content_block_3,
#home #hoofd > .element.text.content_block_4
{
  background-color : transparent;
}

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

#hoofd > .element.text.content_block_3 .ghost-circle
{
  bottom           : -1em;
  left             : 1em;

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

#hoofd > .element.text.content_block_4 .ghost-circle
{
  bottom           : -1.5em;
  right            : 2em;

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

/** CONTENT BLOCK 5 en 6
 ***************************/

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

#hoofd > .element.text.content_block_5 em
{
  color      : var(--color-2);
  font-style : normal;
}

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

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

@media (min-width : 48em)
{
  #hoofd > .element.text.content_block_5
  {
    text-align : right;
  }
}

/** UL ( CHECKMARKS )
 ***************************/

ol
{
  padding : 0;
}

ol li
{
  position      : relative;

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

ol li p
{
  margin : 0;
}

ol li:before
{
  content     : "\e876";
  font-family : 'Material Symbols Outlined', sans-serif;
  font-weight : 700;

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

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

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

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

  height           : 2rem !important;
  padding          : 0 2em;

  z-index          : 500;
}

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

  padding          : 0 0.7em;

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

  z-index          : 2;
}

#hoofd > .element.text.usp .website-phone a
{
  color   : var(--color-light);
  display : flex;
}

.unique-selling-points,
.unique-selling-points ul,
.unique-selling-points li
{
  height : 100%;
}

.unique-selling-points li
{
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.unique-selling-points
{
  overflow : hidden;
}

.unique-selling-points ul,
.unique-selling-points li
{
  list-style-type : none;
}

.unique-selling-points ul
{
  position : relative;
  margin   : 0;
  padding  : 0;
}

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

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

  position    : relative;
  left        : -0.5rem;
}

@media (min-width : 85em)
{
  .unique-selling-points ul
  {
    display         : flex;
    flex-flow       : row;
    align-items     : center;
    justify-content : space-evenly;
  }
}

@media (max-width : 85em)
{
  .unique-selling-points li
  {
    position   : absolute;
    text-align : center;
    width      : 100%;
  }

  .unique-selling-points li:nth-child(1)
  {
    left : 0;
  }

  .unique-selling-points li:nth-child(2)
  {
    left : 100%;
  }

  .unique-selling-points li:nth-child(3)
  {
    left : 200%;
  }

  .unique-selling-points ul
  {
    animation : scroll-horizontal 20s ease-out infinite alternate;
  }

  @keyframes scroll-horizontal
  {
    0%,
    20%
    {
      left : 0;
    }
    25%,
    45%
    {
      left : -100%;
    }
    50%,
    70%
    {
      left : -200%;
    }
    75%,
    100%
    {
      left : -100%;
    }
  }
}

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

#hoofd > .element.text.usp
{
  display               : grid;
  grid-template-columns : auto 12.5em;
  grid-template-areas   : "usp phone";

  @media (max-width : 48em)
  {
    grid-template-columns : auto 5em;
  }
}

.unique-selling-points
{
  grid-area : usp;
}

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

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

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

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

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

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

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

#hoofd > .element.menu ul a
{
  color : inherit;
}

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

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

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

@media (max-width : 85em)
{
  #hoofd > .element.menu ul.responsive
  {
    background-color : var(--color-light);
  }
}

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

@media (max-width : 85em)
{
  #hoofd > .element.menu.top .website-menu-logo
  {
    display     : flex;
    align-items : center;
  }
}

#hoofd > .element.menu.top .website-menu-logo a
{
  color       : var(--color-1);
  font-size   : 2em;
  font-weight : 600;
  @media (max-width : 48em)
  {
    font-size : 1.5em;
  }
}

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

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

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

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

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

/** MENU|LOGO|CONTACT ( STRUCTURE )
 ***************************/

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

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

.element.menu
{
  display : grid;
}

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

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

/** HEADER ( TEXT )
 ***************************/

#hoofd > .element.text.header_text
{
  color            : var(--color-light);

  padding          : 2em;

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

@media (min-width : 85em)
{
  #home #hoofd > .element.text.header_text
  {
    padding-top    : 7em;
    padding-right  : 7em;
    padding-bottom : 4em;
  }
}

/** HEADER ( IMAGE )
 ***************************/

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

#hoofd > .element.text.header img
{
  display       : block;
  height        : 100%;
  width         : 100%;

  object-fit    : cover;
  border-radius : 1.25em 0 0 0;
}

/** CALL TO ACTION ( HOME )
 ***************************/

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

#home #hoofd > .element.text.call_to_action .material-symbols-outlined
{
  font-size : 2em;
  color     : var(--color-2);
}

#home #hoofd > .element.text.call_to_action table,
#home #hoofd > .element.text.call_to_action td:last-child
{
  width : auto;
}

#home #hoofd > .element.text.call_to_action td
{
  font-size      : 1.25em;

  width          : 3em;

  vertical-align : middle;
}

#home #hoofd > .element.text.call_to_action
{
  border-radius    : 1em;
  box-shadow       : 0.1em 0.2em 0.35em rgba(0, 0, 0, 0.2);

  width            : var(--website-content-width);
  margin           : 0 auto;
  padding          : 1em 2em;

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

  z-index          : 300;
}

@media (min-width : 85em)
{
  #home #hoofd > .element.text.call_to_action
  {
    margin-top : -2.75em;
  }
}

@media (max-width : 75em)
{
  #home #hoofd > .element.text.call_to_action
  {
    width  : 95vw;
    margin : 1em auto 0;
  }
}

@media (min-width : 48em)
{
  #home #hoofd > .element.text.call_to_action
  {
    display : flex;
  }

  #home #hoofd > .element.text.call_to_action table:nth-child(2)
  {
    margin : 0 auto;
  }

  #home #hoofd > .element.text.call_to_action table:nth-child(3)
  {
    float : right;
  }
}

/** CONTENT_LINE_2
 ********************************/

#hoofd > .element.text.content_line_2 img
{
  border-radius : 1.25em;
}

/** CONTENT_LINE_3
 ********************************/

#hoofd > .element.text.content_line_3
{
  color            : var(--color-light);

  overflow         : hidden;

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

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

#hoofd > .element.text.content_line_3 .ghost-circle
{
  bottom           : -1.25em;
  right            : 2em;

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

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

#hoofd > .element.text.footer .footer_block
{
  display               : grid;
  grid-template-columns : 3fr 3fr 2fr;
}

@media (max-width : 56em)
{
  #hoofd > .element.text.footer .footer_block
  {
    grid-template-columns : 1fr;
  }
}

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

#hoofd > .element.text.footer .logo h2
{
  font-size : 2.5em;
}

#hoofd > .element.text.footer h2
{
  font-size : 1.3em;
}

#hoofd > .element.text.footer a
{
  color : inherit;
}

#hoofd > .element.text.footer > img
{
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;

  max-width : unset;
  height    : 100%;

  z-index   : -1;
}

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

.element.text.scrollbar a
{
  color : var(--color-4);
}

#hoofd
{
  padding-bottom : 0.5em;
}

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-2);

  z-index          : 1000;
}

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

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

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

#copyright
{
  --color-copyright : var(--color-4);
}

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

form
{
  font-size : 0.85em;
}

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

  margin      : 0.35em 0.75em 0.25em 0.1em;
}

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

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

  border           : none;
  background-color : #FFFFFF;
  box-shadow       : 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);
}

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          : 1.5em 0 0 0;

  background      : var(--color-1);
  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-3);
}

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

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

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

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

#hoofd > .element.text.content_line_1,
#hoofd > .element.text.call_to_action,
#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_block_3,
#hoofd > .element.text.content_block_4,
#hoofd > .element.text.partners,
#hoofd > .element.text.content_line_2,
#hoofd > .element.text.content_line_3,
#hoofd > .element.text.footer,
#hoofd > .element.text.scrollbar
{
  padding : 2em;
  @media (min-width : 85em)
  {
    padding : 4em 2em;
  }
}

@media (min-width : 85em)
{
  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.header_text,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.partners,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.footer
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.partners,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_line_3,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.footer
  {
    padding-right : var(--element-padding);
  }
}

#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6
{
  padding : 2em;
}

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

  #hoofd > .element.text.content_block_6
  {
    padding : 1em 2em 2em 2em;
  }
}

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

@media (min-width : 85em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 6em 6em 1fr;
    grid-template-areas   :
      "usp usp usp usp"
      "menu_top menu_top menu_top menu_top"
      "header_text header_text header header"
      "call_to_action call_to_action call_to_action call_to_action"
      "content_line_1 content_line_1 content_line_1 content_line_1"
      "content_block_1 content_block_2 content_block_2 content_block_2"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "content_block_3 content_block_4 content_block_4 content_block_4"
      "partners partners partners partners"
      "content_line_3 content_line_3 content_line_3 content_line_3"
      "content_block_5 content_block_5 content_block_5 content_block_6"
      "footer footer footer footer"
      "scrollbar scrollbar scrollbar scrollbar";
  }
}

@media (max-width : 85em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "usp usp"
      "menu_top menu_top"
      "header header"
      "header_text header_text"
      "call_to_action call_to_action"
      "content_line_1 content_line_1"
      "content_block_1 content_block_2"
      "content_line_2 content_line_2"
      "content_block_3 content_block_3 "
      "content_block_4 content_block_4"
      "partners partners"
      "content_line_3 content_line_3 "
      "content_block_5 content_block_6"
      "footer footer"
      "scrollbar scrollbar ";
  }
}

@media (max-width : 48em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr;
    grid-template-areas   :
      "usp"
      "menu_top"
      "header"
      "header_text"
      "call_to_action"
      "content_line_1"
      "content_block_1"
      "content_block_2"
      "content_line_2"
      "content_block_3"
      "content_block_4"
      "partners"
      "content_line_3"
      "content_block_5"
      "content_block_6"
      "footer"
      "scrollbar";
  }
}

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

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

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

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

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

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

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

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

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

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

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