/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   Pomme en Partners
*   www.pommepartners.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
{
  --font-size   : 16px;
  --font-text   : 'Poppins', sans-serif;
  --font-header : 'Poppins', sans-serif;

  --color-dark  : hsl(165deg 45% 13%);
  --color-light : lch(100 0 0);

  --color-link  : #FA4A14;

  --color-1     : hsl(165deg 45% 13%);
  --color-2     : #71827E;
  --color-3     : #E7EAEA;
  --color-6     : #A0ACA9;
}

#copyright
{
  --color-copyright : var(--color-dark);
  left              : 2rem;
}

#copyright svg
{
  width : 9em;
}

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

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

  scroll-behavior : smooth;
}

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

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

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

  line-height : 1.5;

  margin      : 0 0 0.25em;
}

h2
{
  color       : var(--color-dark);
  font-size   : 1.5rem;
  font-weight : 700;
  font-family : var(--font-header);
  line-height : 1.5;

  margin      : 0 0 0.25em;
}

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

a:hover
{
  text-decoration : underline;
}

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

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

/** CONTENT_LEFT_SIDE
 *************************************/
@media (min-width : 1365px)
{
  #hoofd > .element.text.content_left_side
  {
    min-height : 100vh !important;
  }
}

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

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

#hoofd > .element.text.content_line_2 img
{
  height  : 20vh;
  display : block;
}

#hoofd > .element.text.content_line_2 figure
{
  display : inline-block;
  width   : auto;
}

#hoofd > .element.text.content_line_2 figcaption
{
  color          : var(--color-6);
  text-align     : center;
  text-transform : uppercase;

  position       : relative;
  margin-top     : 3em;
}

#hoofd > .element.text.content_line_2 figcaption:after
{
  content          : "";

  position         : absolute;
  top              : -1em;
  left             : 0;
  right            : 0;

  height           : 2px;
  width            : 70%;
  margin           : 0 auto;

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

#hoofd > .element.text.content_line_2 figcaption
{
  text-align     : center;
  text-transform : uppercase;

  position       : relative;
  margin-top     : 3em;
}

/** SCROLLBAR
 ***************************/
@media (max-width : 1365px)
{
  #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-2);
}

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

form
{
  font-size : 0.85em;
}

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

  margin      : 0.35em 0.75em 0 0;
}

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

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

  border           : 2px solid var(--color-2);
  border-radius    : 0.2em;
  background-color : transparent;
}

form input:focus,
form textarea:focus,
form input:focus-visible,
form textarea:focus-visible
{
  outline : 0.15em solid var(--color-3) !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-1);
  border          : 2px solid var(--color-1);
  border-radius   : 0.2em;

  transition      : 0.2s;
}

form input[type=submit]:hover
{
  color      : var(--color-1);
  background : transparent;
  border     : 2px solid var(--color-1);
}

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

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

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

#hoofd > .element.text.content_left_side,
#hoofd > .element.text.content_line_1,
#hoofd > .element.text.content_line_2,
#hoofd > .element.text.content_line_3
{
  padding : 2em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.content_left_side
  {
    padding-top : calc(5vh + 2em);
  }

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

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

@media (min-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-rows    : 5vh 40vh auto;
    grid-template-columns : 1fr 3fr;
    grid-template-areas   :
      'content_left_side content_line_1'
      'content_left_side content_line_2'
      'content_left_side content_line_3';
  }

  #hoofd > .element.text.scrollbar
  {
    visibility : hidden;
  }
}

@media (max-width : 1365px)
{
  #hoofd
  {
    grid-gap              : 0;
    grid-template-rows    : auto;
    grid-template-columns : auto;
    grid-template-areas   :
      'content_line_1'
      'content_line_2'
      'content_left_side'
      'content_line_3'
      'scrollbar';
  }
}

#hoofd > .element.text.content_left_side
{
  grid-area : content_left_side;
}

#hoofd > .element.text.content_line_1
{
  grid-area : content_line_1;
}

#hoofd > .element.text.content_line_2
{
  grid-area : content_line_2;
}

#hoofd > .element.text.content_line_3
{
  grid-area : content_line_3;
}

#hoofd > .element.text.scrollbar
{
  grid-area : scrollbar;
}