/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Cruiming en Partners
*   www.cruimingenpartners.nl
*
***************************************/

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

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

  --color-usp             : #BFE9BA;
  --color-link            : #BFE9BA;
  --color-button          : #FA7921;

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

  --color-1               : rgba(187, 232, 249, 0.21);
  --color-2               : #133336;
}

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

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

  scroll-behavior       : smooth;

  background-image      : url('/websites/1855/images/-648-cp-background-scaled.jpg');
  background-repeat     : no-repeat;
  background-attachment : fixed;
}

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;
}

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 2.75em;
  margin     : -0.15em -0.25em;
  background : var(--color-button);
}

a.button.inverse
{
  color      : var(--color-light);
  background : transparent;
  border     : 0.2em solid var(--color-button);
}

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

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

#hoofd > .element.text.usp
{
  height : 3em !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
{
  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%);
  }
}

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

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

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

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

@media (min-width : 85em)
{
  #hoofd > .element.menu
  {
    border-radius : 50px;
  }
}

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

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

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

  transition : 0.75s;
}

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

@media (min-width : 85em)
{
  #hoofd > .element.menu:not(.luna-scrolled)
  {
    top           : 6.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-logo
  {
    text-align: center;
  }
}

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

@media (min-width : 85em)
{
  .element.menu.top .base
  {
    grid-template-columns : 15em auto 5em 12.5em;
    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 : auto;
    grid-template-areas   : "top_logo";
  }

  .element.menu.top .website-menu-phone,
  .element.menu.top .website-menu-app,
  .element.menu.top .website-menu-menu
  {
    display : none !important;
  }
}

.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
 *************************************/
@media (min-width : 85em)
{
  #hoofd > .element.text.header
  {
    margin-top : -4.5em;

    height     : calc(100vh - 5em) !important;
  }
}

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

@media (min-width : 85em)
{
  #hoofd > .element.text.header_block
  {
    margin-top    : 10em;
    margin-bottom : -100%;

    width         : 50em;
    height        : min-content !important;
  }
}

#copyright
{
  --color-copyright : #BFE9BA;
}

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

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

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

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

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

@media (min-width : 85em)
{
  #hoofd > .element.text.header_block
  {
    margin-left  : var(--element-padding);
    margin-right : var(--element-padding);
  }
}

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

@media (min-width : 60em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : 1fr 4em 4em 1fr;
    grid-template-areas   :
      "usp usp usp usp"
      "menu menu menu menu"
      "header_block header_block header_block header_block"
      "header header header header"
      "scrollbar scrollbar scrollbar scrollbar";
  }
}

@media (max-width : 60em)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   :
      "menu"
      "usp"
      "header_block"
      "header"
      "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.scrollbar
{
  grid-area : scrollbar;
}