/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Template Andrea
*   www.andrea.template.triplepro.nl
*
***************************************/

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

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

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

  --color-base             : 55;

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

  --color-usp              : lch(55 90 var(--color-base));
  --color-link             : lch(55 90 var(--color-base));
  --color-button           : lch(45 90 var(--color-base));

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

  --color-1                : lch(15 0 0 / 0.3);
  --color-2                : lch(15 0 0 / 0.85);

  --color-3                : lch(42 77 var(--color-base));
  --color-4                : lch(66 55 var(--color-base));
  --color-5                : lch(92 17 var(--color-base));

  --color-6                : lch(79 38 var(--color-base));
  --color-background-1     : lch(96 7 var(--color-base));
  --color-background-2     : lch(99 0 0);

  --color-transparent-1    : lch(38 54 var(--color-base) / 0.15);
  --color-transparent-2    : lch(92 14 var(--color-base) / 0.2);
}

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

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

  scroll-behavior  : smooth;

  background-image : linear-gradient(
    180deg,
    var(--color-background-1) 50vh,
    var(--color-background-2)
  );
}

@media (max-width : 48em)
{
  html
  {
    font-size : 14px;
  }
}

@media (max-width : 25em)
{
  html
  {
    font-size : 12px;
  }
}

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

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

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

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

h3
{
  color       : var(--color-2);
  font-size   : 1.75rem;
  font-weight : 600;
  font-family : var(--font-header);

  margin      : 0 0 0.25em;
}

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

p
{
  font-size  : 1.15em;
  margin-top : 0;
}

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

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

a:hover
{
  text-decoration : underline;
}

@property --angle
{
  syntax        : "<angle>";
  initial-value : 0deg;
  inherits      : true;
}

@keyframes rotate
{
  to
  {
    --angle : 1turn;
  }
}

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

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

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

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

  transition           : 0.2s;

  border               : 0.5em solid transparent;
  background           :
    linear-gradient(var(--color-button)) padding-box,
  conic-gradient(from var(--angle), var(--color-3), var(--color-4), var(--color-3)) border-box;
  animation            : rotate 3s linear infinite;
  animation-play-state : paused;
}

a.button:hover,
a.button:focus-visible
{
  animation-play-state : running;
}

/*
a.button:hover
{
  padding    : 0.65em 2.75em;
  margin     : -0.15em -0.25em;
  background : var(--color-button);
}
/**/
a.button.inverse
{
  color      : var(--color-light);
  background : var(--color-dark);
  border     : 0.1em solid var(--color-dark);
}

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

/** SVG
 ***************************/

svg .text
{
  fill           : var(--color-dark);
  font-family    : Domine, serif;
  font-size      : 27px;
  letter-spacing : 0.01em;
}

svg .logo-light
{
  fill : lch(64 90 var(--color-base));
}

svg .logo-dark
{
  fill : lch(45 90 var(--color-base));
}

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

ol
{
  padding : 0;
}

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

  position      : relative;

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

ol li p
{
  margin : 0;
}

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

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


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

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

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

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

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

  display         : flex;
  height          : 2.15em;
  margin          : 0;
  padding         : 0;

  justify-content : space-between;
  flex-flow       : row;

  align-items     : center;

  overflow        : hidden;

  list-style-type : none;
}

.unique-selling-points ul li
{
  display         : flex;
  margin          : 0;
  padding         : 0;
  padding-left    : 0.5rem;

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

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

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

  position    : relative;
  left        : -0.5rem;
}

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

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

  .unique-selling-points ul li
  {
    width           : 100vw;
    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%);
  }
}

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

#hoofd > .element.text.content_block_3 img,
#hoofd > .element.text.content_block_4 img,
#hoofd > .element.text.content_block_5 img,
#hoofd > .element.text.content_block_6 img
{
  display    : block;
  width      : 100%;
  object-fit : cover;
  max-height : 30em;
}

#hoofd > .element.text.content_block_3:has([data-aos]),
#hoofd > .element.text.content_block_5:has([data-aos]),
#hoofd > .element.text.content_block_4:has([data-aos]),
#hoofd > .element.text.content_block_6:has([data-aos])
{
  padding : 3em 0;
}

.movable
{
  height   : 30em;

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

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

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

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

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

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

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

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

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

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

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

.module.case.overview a
{
  position : relative;
}

.module.case.overview .content
{
  color    : var(--color-light);
  position : absolute;
  bottom   : 0;
  left     : 0.5em;
  height   : 5em;
  padding  : 0 0.5em;
}

.module.case .visible .scroller .row img
{
  max-height : none;
}

@media (min-width : 120em)
{
  .module.case.overview .visible
  {
    max-width : 120em;
  }
}

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

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

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

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

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

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

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

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

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

  transition       : 0.75s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#hoofd > .element.menu.top .website-menu-logo svg .text
{
  fill : var(--color-light);
}

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

#hoofd > .element.menu.top .website-menu-app
{
  color       : var(--color-light);
  display     : flex;
  align-items : center;
}

#hoofd > .element.menu.top .website-menu-app .icon
{
  font-size : 2.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  filter     : brightness(65%) grayscale(35%);
}

@media (max-width : calc(85em - 0.1em))
{
  #hoofd > .element.text.header img
  {
    height : 30vh;
  }

  #home #hoofd > .element.text.header img
  {
    height : 35vh;
  }
}

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

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

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

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

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

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

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

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

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

@media (min-width : 85em)
{
  #home #hoofd > .element.text.header_block
  {
    color         : var(--color-light);
    text-align    : center;

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

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

    border-radius : 0.2em;
  }
}

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

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

/** MARQUEE
 ***************************/

.marquee
{
  flex-direction  : column;
  justify-content : center;
  align-items     : center;

  position        : relative;
  display         : flex;
  width           : calc(100vw - 1em);
  height          : 17em;

  overflow        : hidden;
  transform       : rotate(0)
}

.marquee .marquee_track
{
  justify-content : center;
  align-items     : flex-start;

  display         : flex;

  transform-style : preserve-3d;
  will-change     : transform;
}

.marquee .marquee_track .list
{
  grid-column-gap : 2em;
  align-items     : center;

  display         : flex;
}

.marquee .marquee_track .listitem
{
  width : 16em;
}

.marquee .marquee_track.left
{
  grid-gap    : 1em;
  margin-left : auto;
}

.marquee .marquee_track.right
{
  grid-gap         : 1em;
  margin-right     : auto;

  transform-origin : 100%;
  justify-content  : flex-end;
}

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

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

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

body.contact #hoofd > .element.text.footer
{
  padding : 0;
}

.element.text.footer .logo svg,
.element.text.footer .logo img
{
  max-height : 4em;
}

.element.text.footer h2
{
  font-size      : 1.2rem;
  font-weight    : 600;

  text-transform : uppercase;

  margin         : 0.5em 0;
}

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

.element.text.footer .fa:hover
{
  text-decoration : none;
}

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

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

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

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

#hoofd
{
  padding-bottom : 0.5em;
}

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

  padding  : 0;

  z-index  : 1000;
}

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

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

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

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

form
{
  font-size : 0.85em;
}

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

  margin      : 0.35em 0.75em 0 0;
}

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

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

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

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

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

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

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

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

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

  transition      : 0.2s;
}

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

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

/** FORM CONTACT
****************************/

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

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

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

#hoofd > .element.text.header_block,
#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.content_block_5,
#hoofd > .element.text.content_block_6,
#hoofd > .element.text.bloging,
#hoofd > .element.text.form_content,
#hoofd > .element.text.form,
#hoofd > .element.text.footer
{
  padding : 2em;
}

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

@media (min-width : 85em)
{
  #hoofd > .element.text.header_block,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.content_block_3,
  #hoofd > .element.text.content_block_4,
  #hoofd > .element.text.content_block_5,
  #hoofd > .element.text.content_block_6,
  #hoofd > .element.text.bloging,
  #hoofd > .element.text.form_content,
  #hoofd > .element.text.form,
  #hoofd > .element.text.footer,
  #hoofd > .element.text.scrollbar
  {
    padding : 6em;
  }

  #hoofd > .element.text.customers
  {
    padding : 3em 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

.element.text.content_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.customers
{
  grid-area : customers;
}

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

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

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

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

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

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