/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Template Mirthe
*   www.kuipersbazuin.nl
*
***************************************/

@import url('https://fonts.googleapis.com/css2?family=Poppins: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
{
  /**
   * desktop 1365 = 85em
   * tablet  768  = 48em
   * mobile  400  = 25em
   * width   1200 = 75em
   *************************/

  --font-size             : 16px;
  --font-text             : 'Poppins', sans-serif;
  --font-header           : 'Poppins', sans-serif;

  --luna-scrolled         : hsla(0, 0%, 15%, 0.9);
  --color-light           : hsl(0, 0%, 95%);
  --color-dark            : hsl(0, 0%, 15%);
  --color-usp             : hsl(17, 51%, 71%);
  --color-link            : #d600ab;

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

  --color-1               : #6A0055 ;
  --color-2               : #F000BF;
  --color-3               : #E7D6E4;
  --color-4               : #d600ab;

  --color-button          : #d600ab;
}

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

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

  scroll-behavior : smooth;
}

@media (max-width : calc(85em - 1px))
{
  body
  {
    font-size : 0.8em;
  }
}

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

  margin      : 0 0 0.25em;
}

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

  margin      : 0 0 0.25em;
}

pre
{
  color       : var(--color-2);
  font-size   : 1.3rem;
  font-family : inherit;

  margin      : 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 4em;

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

  transition      : 0.2s;
}

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

img
{
  display : block;
}

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

.element.text ol
{
  padding : 0;
}

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

  position      : relative;

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

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

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

  color            : var(--color-3);
  font-family      : 'Material Symbols Outlined', sans-serif;
  text-align       : center;

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

  width            : 1.3em;
  height           : 1.3em;

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

/** NAVIGATION
 ***************************/

.navigation .left,
.navigation .right
{
  text-align       : center;

  display          : inline-block;
  height           : 1.5em;
  width            : 1.5em;
  margin           : 0 0.15em;

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

.navigation .left:before,
.navigation .right:before
{
  color           : var(--color-3);
  font-size       : 0.8em;

  display         : flex;
  width           : inherit;
  height          : inherit;

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

.navigation .left:before
{
  content      : '\e5e0';
  padding-left : 0.15em;
}

.navigation .right:before
{
  content       : '\e5e1';
  padding-right : 0.15em;
}






/** symbols
 ***********************************************/
.points {
  z-index: 1;
}

.points ul {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  flex-flow: row;
  align-items: center;
  overflow: hidden;
  list-style-type: none;
}

.points ul li {
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  white-space: nowrap;
}

.points ul li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-1);
  gap: 0.4em;
}

.points ul li .icon {
  font-family: 'Material Symbols Outlined';
  color: #fff;
  background-color: var(--color-1);
  font-size: 1.5em;
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8em;
}

.points ul li a .label {
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.points ul li a:hover .label {
  text-decoration: underline;
}


@media (max-width: 900px) and (min-width: 601px) {
  .points ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* space between items */
    justify-items: start;
  }
  
  .points ul li {
    padding-left: 0;
    white-space: normal;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .points ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .points ul li {
    padding-left: 0;
    white-space: normal;
  }
}






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

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

.module.sitemap
{
  height : auto;
}

.module.sitemap > ul > li > a:hover {
  text-decoration: underline;
}

.module.sitemap > ul > li > a
{
  font-size     : 1em;
  padding       : 0;
  border-bottom : none;
}
.sitemap ul ul {
  display: none;
}
/** CASE
 ***************************/

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

@media (min-width : 85em)
{
  .module.case .visible .scroller .row
  {
    padding-right : 8em;
  }
}

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

.module.review .review_blocks
{
  --module-review-stars          : transparent;
  --module-review-top-row        : transparent;
  --module-review-top-row-active : var(--color-3);
}

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

.module.review .top_row
{
  display     : flex;
  align-items : center;
}

.module.review .title
{
  margin-right : 1.25em;
}

.module.review .review_block
{
  width  : 24em;
  height : 16em;
  border : 1em solid var(--color-3);
}

.module.review .review_block .top_row
{
  width : 100%;
}

.module.review .review_block .content
{
  padding : 0.5em 1em 0.5em;
}

.module.review .review_block .content .text
{
  height : 9.5em;
}

/** PERSONNEL
 ***************************/

.module.personeel .visible * {
     user-select: none; 
     padding: 0.1em; 
}

.module.personeel .visible *:hover {
  text-decoration: none;
}
.module.personeel .visible .content
{
  grid-template-columns : 15em;
}


/** DIENSTEN
 ***************************/

.module.diensten .content,
.module.diensten .content:hover
{
  padding    : 0;
  box-shadow : none;
}

#hoofd > .element.text.content_block_3 .module.diensten
{
  grid-template-columns : repeat(auto-fill, minmax(10em, 1fr));
  grid-gap              : 2em;
}

#hoofd > .element.text.content_line_2 .module.diensten
{
  grid-template-columns : repeat(auto-fill, minmax(20em, 1fr));
  grid-gap              : 4em;
}



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

.module.artikel ul
{
  margin  : 0;
  padding : 0;

}

.module.artikel li
{
  margin : 0;
}

.module.artikel .content
{
  color : var(--color-dark);
}

.module.artikel li:first-child
{
  border-top    : 0.1em solid var(--color-2);
  border-bottom : 0.1em solid var(--color-2);
}

.module.artikel li
{
  padding       : 1em 0.5em;
  border-bottom : 0.1em solid var(--color-2);
}

.module.artikel label
{
  color            : var(--color-dark);
  font-size        : 1.5em;
  position         : relative;
  height           : 1.5em;

  background-color : var(--color-6);
  border-bottom    : none;
}

.module.artikel label:after
{
  content   : "+";

  color     : var(--color-dark);
  font-size : 1.5em;

  height    : inherit;

  position  : absolute;
  right     : 0.25em;
  top       : -0.6em;
  bottom    : 0;
  margin    : auto;
}

.module.artikel input:checked + label:after
{
  content : "-";
}


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

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

/** USP
 ***************************/

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

  align-items      : center;

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

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

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

  z-index          : 500;
}

#hoofd > .element.text.usp > div
{
  font-size : 0.9em;
}

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

  padding         : 0 0.7em;

  z-index         : 2;
}

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

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

.unique-selling-points
{
  z-index : 1;
}

.unique-selling-points ul
{
  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          : "\e5ca";

  color            : var(--color-3);
  font-family      : 'Material Symbols Outlined', sans-serif;
  text-align       : center;

  position         : relative;
  left             : -0.3em;
  top              : 0;

  width            : 1.3em;
  height           : 1.3em;

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

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

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

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

@keyframes scroll-horizontal
{
  0%,
  30%
  {
    transform : translateX(0);
  }
  35%,
  65%
  {
    transform : translateX(-100%);
  }
  70%,
  100%
  {
    transform : translateX(-200%);
  }
}


/** USP REVIEW STARS
 ***************************/

/** USP STRUCTURE
 ***************************/

#hoofd > .element.text.usp
{
  display               : grid;
  grid-template-columns : 6fr 2fr;
  grid-template-areas   : "unique_selling_points phone";
}

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

#hoofd > .element.text.usp .unique-selling-points
{
  grid-area : unique_selling_points;
}



@media (max-width: 48em) {
  #hoofd > .element.text.usp {
    justify-content: center;
    display: flex

  }

  #hoofd > .element.text.usp .phone {
    display: none;
  }
}



/*/bedankt*/

.bedankt {
  text-align: center;
}

.bedankt-size{
  font-size: 1.5em;
}
/** MENU
 ***************************/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width : calc(85em - 1px))
{
  #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     : 5em;
    margin-top : 0.5em;
  }
}

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

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

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

/** HEADER
 ***************************/
body:not(#home) #hoofd .element.text.header{
    max-height : 50vh;
}

body:not(#home) #hoofd > .element.text.header img{
  object-position: center center;
}

#hoofd > .element.text.header
{
  max-height : 60vh;
  overflow   : hidden;
}

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

#hoofd > .element.text.header img
{
  filter : brightness(70%);
  width  : 100%;
  margin : auto;
}



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

@media (min-width : 85em)
{
  #hoofd > .element.text.header_block:not(.no_page_content)
  {
    color      : var(--color-light);
    height     : max-content !important;
    margin-top : -18em;

    z-index    : 400;
  }
}

@media (min-width : 85em)
{
body:not(#home) #hoofd > .element.text.header_block:not(.no_page_content)
 {
    margin-top : -15em;
  }
}


@media (max-width : calc(85em - 1px))
{
  #hoofd > .element.text.header_block
  {
    color            : var(--color-light);
    background-color : var(--color-1);
  }
}

/** CONTENT_LINE
 ***************************/
 

/** CONTENT_BLOCK
 ***************************/

/** CONTENT_BLOCK 1
 ***************************/

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

#home #hoofd > .element.text.content_block_1 img
{
  margin-left : auto;
}

/** CONTENT_BLOCK 2
 ***************************/

/** CONTENT_BLOCK 3|4|7|8
 ***************************/
 
#home #hoofd > .element.text.content_block_2
{
  display        : flex;
  flex-direction : column;
  align-self     : center;
}

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


#home #hoofd > .element.text.content_block_3,
#home #hoofd > .element.text.content_block_4
{
  min-height : 5em;
  background-color : var(--color-3);
}


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

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

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

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

  overflow         : hidden;
}

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

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

#hoofd > .element.text.footer .logo
{
  width  : 15em;
  margin : 0 0 1em;
}

#hoofd > .element.text.footer h2
{
  color     : var(--color-3);
  font-size : 1.3em;
}

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

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

  max-width : unset;
  height    : 100%;

  z-index   : -1;
}

#hoofd > .element.text.footer .socialmedia .fa
{
  font-size : 2em;
}

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

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

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

iframe {
  border-radius: 20px;
}
fieldset
{
  padding          : 2em 2em;
  border           : none;
  background-color : var(--color-3);
  border-radius: 20px;
}



form
{
  font-size : 1em;
}

form li
{
  margin-bottom : 1em;
}

form label
{
  font-weight : bold;
  margin      : 0 0.3rem;
}

form input
{
  height  : 3rem;
  padding : 0 0.5rem;
}

form input,
form textarea
{
  font-size        : 1em;
  border           : none;
  background-color : white;
}

form input[type=submit]
{
  width      : auto;
  padding    : 0 5rem;
  background : var(--color-4);
}

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

::placeholder
{
  color : var(--color-4);
}


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

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

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

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

#hoofd > .element.text.usp
{
  padding : 0.5em 2em;
}

#hoofd > .element.text.header_block,
#hoofd > .element.text.content_block_1,
#hoofd > .element.text.content_block_2,
#hoofd > .element.text.content_block_5,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.content_block_3,
#hoofd > .element.text.content_block_4,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.content_line_2,
#hoofd > .element.text.content_block_7,
#hoofd > .element.text.content_block_8,
#hoofd > .element.text.footer
{
  padding : 2em;
}



#hoofd > .element.text.header_block img,
#hoofd > .element.text.content_block_1 img,
#hoofd > .element.text.content_block_2 img,
#hoofd > .element.text.content_block_5 img,
#hoofd > .element.text.content_block_6 img,
#hoofd > .element.text.content_block_3 img,
#hoofd > .element.text.content_block_4 img,
#hoofd > .element.text.content_line_1 img,
#hoofd > .element.text.content_line_2 img,
#hoofd > .element.text.content_block_7 img,
#hoofd > .element.text.content_block_8 img,
#hoofd > .element.text.footer img {
  border-radius: 10px; /* You can change 10px to whatever radius you like */
}



@media (min-width : 85em)
{
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_6,
  /*#hoofd > .element.text.content_line_1,*/
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.content_block_8,
  #hoofd > .element.text.footer
  {
    padding : 4em;
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.usp,
  #hoofd > .element.text.header_block,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_7,
  #hoofd > .element.text.footer
  {
    padding-left : var(--element-padding);
  }

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

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

@media (min-width : 85em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 4em 4em 1fr;
    grid-template-areas   :
      "usp usp usp usp"
      "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_block_3 content_block_3 content_block_4 content_block_4"
      "content_block_5 content_block_5 content_block_5 content_block_6"
      
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "content_block_7 content_block_7 content_block_7 content_block_8"
      "footer footer footer footer";
  }
}

@media (max-width : calc(85em - 1px))
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "usp"
      "menu"
      "header"
      "header_block"

      "content_line_1"
      "content_block_1"
      "content_block_2"
      "content_block_3"
      "content_block_4"
      "content_block_6"
      "content_block_5"
      "content_line_2"
      "content_block_7"
      "content_block_8"
      "footer"
      "scrollbar";
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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