/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   VRI Tech Group
*   www.vritechgroup.nl
*
***************************************/

:root
{
  --font-size             : 15px;
  --font-text             : 'Lato', sans-serif;
  --font-header           : "Open Sans", sans-serif;

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

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

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

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

  line-height : 2;
}

a
{
  transition : 0.2s;
  color      : #F28D0D;
}

a.button:hover
{
  background-color : hsl(24deg 92% 38%);
}

h1
{
  font-family : var(--font-header);
  font-size   : 2em;
  margin      : 0;
  line-height : 1.1;
}

h2
{
  font-family : var(--font-header);
  font-size   : 1.5em;
  line-height : 1.1;
  font-weight : 800;
}

h3
{
  font-family : var(--font-header);
  font-size   : 1.5em;
  margin      : 1em 0 0.25em;
  line-height : 1.1;
  font-weight : 700;
}

.slider
{
  background-color : rgb(0 0 0 / 75%);
}

@media (min-width : 1365px)
{
  .hidden-lg
  {
    display : none;
  }
}

@media (max-width : 1365px)
{
  .hidden-sm
  {
    display : none !important;
  }
}

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

/** CONTACT
*********************************/

#hoofd > .element.text.contact
{
  text-align       : right;

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

  height           : 2.4rem !important;
  padding-top      : 0.1rem;

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

#hoofd > .element.text.contact img
{
  vertical-align : middle;
}

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

#hoofd > .element.text.logo,
#hoofd > .element.menu
{
  position         : sticky !important;
  top              : 2.4rem !important;
  background-color : var(--color-light);
  z-index          : 1000;
}

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

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

#hoofd > .element.menu ul.responsive li a
{
  color : #333333;
}

#hoofd > .element.menu ul.responsive li a:hover
{
  color : #0DA697;
}

@media (max-width : 1365px)
{
  #hoofd > .element.menu
  {
    height : 114px;
  }
}

/** CONTENT
*********************************/

#hoofd > .element.text.logo img
{
  max-height : 75px;
}

@media (max-width : 1365px)
{
  #hoofd > .element.text.logo
  {
    text-align : center;
  }
}

#hoofd > .element.text.head_image
{
  height        : 70vh !important;
  display       : grid;
  align-items   : center;
  justify-items : center;
  text-align    : center;
}

#hoofd > .element.text.head_image img
{
  width      : 100%;
  height     : 70vh;
  object-fit : cover;
  z-index    : 1;
  filter     : brightness(50%);
}

#hoofd > .element.text.content_line_2
{
  display               : grid;
  grid-template-columns : 1fr;
  grid-gap              : 50px;
}

@media (min-width : 992px)
{
  #hoofd > .element.text.content_line_2
  {
    grid-template-columns : 1fr 1fr;
  }
}

#hoofd > .element.text.content_line_3
{
  background-color : #282728;
}

/** HEADERBLOCK
*********************************/

.headertitle
{
  display     : block;
  font-weight : bold;
  font-size   : 3em;
}

.headersubtitle
{
  display       : block;
  font-size     : 2em;
  margin-bottom : 3em;
}

.headerblock
{
  position : absolute;
  z-index  : 100;
  color    : var(--color-light);
}

@media (max-width : 1365px)
{
  .headerblock
  {
    width   : 70%;
    padding : 50px;
  }
}

@media (max-width : 992px)
{
  .headerblock
  {
    width : 100%;
  }
}

/** INTROBOX
*********************************/

.introbox
{
  position         : relative;
  top              : -3em;
  background-color : var(--color-light);
  border-radius    : 5px;
  padding          : 3em;
  text-align       : center;
  box-shadow       : 0 0 1.5em rgba(0, 0, 0, 0.16);
  z-index          : 100;
}

.introbox a
{
  color : #F28D0D;
}

@media (max-width : 1365px)
{
  .introbox
  {
    border-radius : 0;
    padding       : 2em;
  }
}

/** BEDRIJF
*********************************/

.bedrijf
{
  background-color : var(--color-light);
  border-radius    : 0.3em;
  padding          : 3em;
  text-align       : center;
  box-shadow       : 0 0 1.5em rgba(0, 0, 0, 0.16);
  display          : grid;
  justify-items    : center;
}

.bedrijf img
{
  height : 100px;
}

.bedrijf a
{
  padding          : 1.5em;
  background-color : var(--color-light);
  color            : #333333;
  display          : block;
  border-radius    : 0.3em;
  width            : 100%;
  text-align       : center;
  margin           : 2em auto;
  align-self       : end;
  font-weight      : bold;
}

.bedrijf a:hover
{
  color : var(--color-light);
}

.integron h2
{
  color : #016DC6;
}

.integron a
{
  border : 1px solid #016DC6;
}

.integron a:hover
{
  background-color : #016DC6;
}

.wadcon h2
{
  color : #0DA697;
}

.wadcon a
{
  border : 1px solid #0DA697;
}

.wadcon a:hover
{
  background-color : #0DA697;
}

.habeload h2
{
  color : #00A9A1;
}

.habeload a
{
  border : 1px solid #00A9A1;
}

.habeload a:hover
{
  background-color : #00A9A1;
}

.dts h2
{
  color : #EF8C02;
}

.dts a
{
  border : 1px solid #EF8C02;
}

.dts a:hover
{
  background-color : #EF8C02;
}

.munter h2
{
  color : #318ACA;
}

.munter a
{
  border : 1px solid #318ACA;
}

.munter a:hover
{
  background-color : #318ACA;
}

/** FOOTER
*********************************/
.contactgegevens a
{
  color : #F28D0D;
}

.kaart iframe
{
  width : 100%;
}

@media (max-width : 992px)
{
  .contactgegevens
  {
    padding-left : 50px;
  }
}

#hoofd > .element.text.footer
{
  background-color : var(--color-light);
  box-shadow       : 0 0 1.5em rgba(0, 0, 0, 0.16);
  margin           : 3em auto 0;
}

#hoofd > .element.text.footer > div
{
  display               : grid;
  grid-template-columns : 1fr 2fr;
  grid-gap              : 3em;
  padding               : 3em 0;
}

@media (max-width : 992px)
{
  #hoofd > .element.text.footer > div
  {
    grid-template-columns : 1fr;
  }
}

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

#hoofd > .element.text.logo,
#hoofd > .element.text.head_image
{
  padding : 0;
}

#hoofd > .element.menu,
#hoofd > .element.text.footer
{
  padding : 2em;
}

@media (min-width : 1365px)
{
  #hoofd > .element.text.logo,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.usps,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_1,
  #hoofd > .element.text.footer,
  #hoofd > .element.text.content_line_3
  {
    padding-left : var(--element-padding);
  }

  #hoofd > .element.menu,
  #hoofd > .element.text.contact,
  #hoofd > .element.text.content_line_1,
  #hoofd > .element.text.usps,
  #hoofd > .element.text.content_line_2,
  #hoofd > .element.text.content_block_2,
  #hoofd > .element.text.footer,
  #hoofd > .element.text.content_line_3
  {
    padding-right : var(--element-padding);
  }
}

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

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

@media (min-width : 1365px)
{
  #hoofd
  {
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "contact contact"
      "logo menu"
      "head_image head_image"
      "content_line_1 content_line_1"
      "usps usps"
      "content_line_2 content_line_2"
      "footer footer"
      "content_line_3 content_line_3";
  }
}

@media (min-width : 992px) and (max-width : 1365px)
{
  #hoofd
  {
    grid-template-columns : 1fr 1fr;
    grid-template-areas   :
      "contact contact"
      "menu logo"
      "head_image head_image"
      "content_line_1 content_line_1"
      "usps usps"
      "content_line_2 content_line_2"
      "footer footer"
      "content_line_3 content_line_3";
  }
}

@media (max-width : 992px)
{
  #hoofd
  {
    grid-template-columns : 1fr 3fr;
    grid-template-areas   :
      "contact contact contact contact"
      "menu logo logo logo"
      "head_image head_image head_image head_image"
      "content_line_1 content_line_1 content_line_1 content_line_1"
      "usps usps usps usps"
      "content_line_2 content_line_2 content_line_2 content_line_2"
      "footer footer footer footer"
      "content_line_3 content_line_3 content_line_3 content_line_3";
  }
}

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

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

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

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

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

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

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