/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   @Work Makelaardij ENG
*   www.workengels.nl
*
***************************************/

/** MOBIEL
***********************************/

@media (max-width : 1366px)
{
  html body div#hoofd div#MENU_WVJKXIZULXG
  {
    height  : 108px;
    padding : 40px 0 !important;
  }

  ul.responsive
  {
    background-color : #FFFFFF;
  }
}

html body[data-responsive] .element.menu > label
{
  height : 30px;
}

html body div#hoofd div#TEXT_ALJTYAGECSQ,
html body div#hoofd div#TEXT_HCMDFACYQYR,
html body div#hoofd div#TEXT_OAUZMEGLJPJ,
html body div#hoofd div#TEXT_TEXPPZWRYDD,
html body div#hoofd div#TEXT_RFDCGVUCHMT,
html body div#hoofd div#TEXT_TMLHHHEBZHT,
html body div#hoofd div#TEXT_TTPQPVLGTHR,
html body div#hoofd div#TEXT_PMRZAKNVGNZ
{
  margin    : 0 auto;
  max-width : 1365px;
}

.header h1
{
  font-size : 2em;
}

html body div#hoofd div#MENU_WVJKXIZULXG
{
  background-color : #FFFFFF;
  position         : sticky !important;
  top              : 0 !important;
  z-index          : 999;
}

.element.menu ul.responsive
{
  margin-top : 30px;
}

a.orangebtn
{
  -webkit-appearance : none;
  color              : #FFFFFF;
  background         : #FF8000;
  border             : none;
}

a.orangebtn:hover
{
  background : #FFBD00 !important;
  color      : #FFFFFF !important;
}

@media (max-width : 450px)
{
  .orangebtn
  {
    -webkit-appearance : none;
    font-size          : 0.9em;
  }

  #hoofd
  {
    grid-template-columns : auto;
    /* @formatter:off */
    grid-template-areas   :
      "naw naw naw"
      "menu logo contacticons"
      "header header header"
      "intro intro intro"
      "huizen huizen huizen"
      "referenties1 referenties1 referenties1"
      "verkoopmakelaar verkoopmakelaar verkoopmakelaar"
      "referenties2 referenties2 referenties2"
      "aankoopmakelaar aankoopmakelaar aankoopmakelaar"
      "logos logos logos"
      "werkwijze werkwijze werkwijze"
      "beoordeling beoordeling beoordeling"
      "footer footer footer"
    ;
    /* @formatter:on */
  }
}

/** TABLET
***********************************/

@media (min-width : 450px)
{
  #hoofd
  {
    grid-template-columns : auto;
    /* @formatter:off */
    grid-template-areas   :
      "naw naw naw"
      "menu logo contacticons"
      "header header header"
      "intro intro intro"
      "huizen huizen huizen"
      "referenties1 referenties1 referenties1"
      "verkoopmakelaar verkoopmakelaar verkoopmakelaar"
      "referenties2 referenties2 referenties2"
      "aankoopmakelaar aankoopmakelaar aankoopmakelaar"
      "logos logos logos"
      "werkwijze werkwijze werkwijze"
      "beoordeling beoordeling beoordeling"
      "footer footer footer"
    ;
    /* @formatter:on */
  }
}


/** DESKTOP
***********************************/

@media (min-width : 1365px)
{

  .element.menu ul.responsive
  {
    margin-top : 0;
  }

  #hoofd
  {
    grid-template-columns : 32% auto 32%;
    /* @formatter:off */
    grid-template-areas   :
      "naw naw naw"
      "logo menu menu"
      "header header header"
      "intro intro intro"
      "huizen huizen huizen"
      "referenties1 referenties1 referenties1"
      "verkoopmakelaar verkoopmakelaar verkoopmakelaar"
      "referenties2 referenties2 referenties2"
      "aankoopmakelaar aankoopmakelaar aankoopmakelaar"
      "logos logos logos"
      "werkwijze werkwijze werkwijze"
      "beoordeling beoordeling beoordeling"
      "footer footer footer"
      "contacticons contacticons contacticons"
  ;
    /* @formatter:on */
  }
}

html body #hoofd > :nth-child(1)
{
  grid-area : naw;
}

html body #hoofd > :nth-child(2)
{
  grid-area : logo;
}

html body #hoofd > :nth-child(3)
{
  grid-area : menu;
}

html body #hoofd > :nth-child(4)
{
  grid-area : header;
}

html body #hoofd > :nth-child(5)
{
  grid-area : intro;
}

html body #hoofd > :nth-child(6)
{
  grid-area : huizen;
}

html body #hoofd > :nth-child(7)
{
  grid-area : referenties1;
}

html body #hoofd > :nth-child(8)
{
  grid-area : verkoopmakelaar;
}

html body #hoofd > :nth-child(9)
{
  grid-area : referenties2;
}

html body #hoofd > :nth-child(10)
{
  grid-area : aankoopmakelaar;
}

html body #hoofd > :nth-child(11)
{
  grid-area : logos;
}

html body #hoofd > :nth-child(12)
{
  grid-area : werkwijze;
}

html body #hoofd > :nth-child(13)
{
  grid-area : beoordeling;
}

html body #hoofd > :nth-child(14)
{
  background-color : #434343;
  grid-area        : footer;
}

html body #hoofd > :nth-child(15)
{
  grid-area : contacticons;

}

@media (max-width : 1365px)
{
  #TEXT_ISKXCUNXHIY
  {
    display : none;
  }
}

@media (min-width : 1365px)
{
  #TEXT_AQLBPKRTJRI
  {
    display : none;
  }
}

/** COLOR
********************************************************************/
html body #hoofd
{
  background-color : #FFFFFF;
}

html body #hoofd > :nth-child(1)
{
  background-color : #FF8000;
}

/** CUSTOM STYLING **/

html body div#hoofd div#MENU_WVJKXIZULXG
{
  top : 0 !important;
}

html body #hoofd > .element
{
  height : auto;
  width  : 100%;
}


.element.text
{
  width : 100% !important;
}

.wrapper
{
  max-width : 1365px;
  margin    : 0 auto;
  padding   : 0 15px;
}

.parallax
{
  background-position : center center;
  background-repeat   : no-repeat;
  padding             : 10vw 0;
}

@media (min-width : 992px)
{
  .parallax
  {
    background-attachment : fixed;
  }
}

.recensie
{
  max-width  : 500px;
  font-size  : 1.1em;
  padding    : 60px 3vw;
  background : rgba(237, 237, 237, 0.9);
}

@media (min-width : 768px)
{
  .flex-block
  {
    width : 45%;
  }
}

.header h1
{
  font-size : 1.5em !important;
}

@media (min-width : 992px)
{
  .header h1
  {
    font-size : 3em !important;
  }
}

@media (min-width : 1365px)
{
  .header h1
  {
    font-size : 3em !important;
  }
}

@media (min-width : 1366px) and (max-width : 1420px)
{
  html body .element.menu ul.responsive li
  {
    margin-left : -5px;
  }
}

html body:not(.tablet) #lightbox.images.opened
{
  width : 60vw;
}

html body div#hoofd div#TEXT_AQLBPKRTJRI
{
  position         : sticky !important;
  background-color : #FFFFFF !important;
  top              : 0 !important;
}

html body[data-responsive] .element.menu input:checked ~ ul.responsive,
html body[data-responsive] .element.menu ul.responsive input:checked ~ ul
{
  position : absolute !important;
  width    : 200px;
}

.atwork-logo
{
  max-width : 100px !important;
  padding   : 20px 0 0 20px;
  height    : auto !important;
}


@media (min-width : 768px)
{
  .atwork-logo
  {
    max-width : 184px !important;
    height    : auto !important;
    padding   : 0 0 0 20px;
  }
}

.cijferblok
{
  background : #FF8000;
  color      : #FFFFFF;
  font-size  : 0.8em;
  margin     : 0 4px 8px;
  width      : 150px;
}

@media (min-width : 992px)
{
  .cijferblok
  {
    font-size : 1.2em;
    width     : 225px;
  }
}

#navigator .previous,
#navigator .next
{
  display : none;
}

.module.producten.overview figure .image
{
  height : 11em;
}

.whatsapp-pin {
  display: none;
}

@media (max-width : 1366px){
  .whatsapp-pin {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 10px 5px 7px 12px;
    background-color: green;
    border-radius: 100px;
  }
  
    .whatsapp-pin .fa {
      font-size: 2em;
      color: #fff;
  }
}