/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*		SOS Dolfijn
*		www.sosdolfijn.nl
*
***************************************/

html
{
  --button-color1 : #FEC600;
  --button-color2 : #002D62;
  --menu-bg-color : rgb(0, 118, 191);
  --padding-LR    : 0 5vw;
  --padding-L     : 0 5vw 0 5vw;
  --padding-R     : 0 5vw 0 5vw;
}

html body[data-responsive] #hoofd > .text
{
  padding : 0;
}

.hidden-sm
{
  display : none;
}

@media (min-width : 992px)
{
  html
  {
    --padding-LR : 0 10vw;
    --padding-L  : 0 0 0 10vw;
    --padding-R  : 0 10vw 0 0;
  }
}

@media (min-width : 1365px)
{

  html
  {
    --padding-LR : 0 17vw;
    --padding-L  : 0 0 0 17vw;
    --padding-R  : 0 17vw 0 0;
  }

  .hidden-sm
  {
    display : block;
  }

  .hidden-lg
  {
    display : none;
  }
}

body
{
  font-size   : 15px;
  font-family : 'Arial', sans-serif;
  line-height : 1.67;
}


h1
{
  margin      : 0 0 1em;
  color       : #0076BF;
  line-height : 1.3;
}

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

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

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

html body #hoofd > .element:nth-child(4)
{
  grid-area : headimg;
  top       : -150px !important;
}

html body #hoofd > .element:nth-child(5)
{
  grid-area : usps;
  padding   : var(--padding-LR);
  top       : -100px !important;
}

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

html body #hoofd > .element:nth-child(7)
{
  grid-area        : cont2;
  background-color : #002D62;
}

html body #hoofd > .element:nth-child(8)
{
  grid-area : cont3;
  padding   : var(--padding-LR);
}

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

html body #hoofd > .element:nth-child(10)
{
  grid-area : cont5;
  padding   : var(--padding-LR);
}

html body #hoofd > .element:nth-child(11)
{
  grid-area        : cont6;
  padding          : var(--padding-LR);
  text-align       : center;
  background-color : #EFEFEF;
}

html body #hoofd > .element:nth-child(12)
{
  grid-area  : cont7;
  padding    : var(--padding-LR);
  text-align : center;
}

html body #hoofd > .element:nth-child(13)
{
  grid-area : cont8;
  padding   : var(--padding-LR);
}

html body #hoofd > .element:nth-child(14)
{
  grid-area : cont9;
  padding   : var(--padding-LR);
}

html body #hoofd > .element:nth-child(15)
{
  grid-area : cont10;
}

html body #hoofd > .element:nth-child(16)
{
  grid-area : cont11;
}

html body #hoofd > .element:nth-child(17)
{
  grid-area        : footer;
  padding          : var(--padding-LR);
  background-color : #002D62;
}

html body #hoofd > .element:nth-child(18)
{
  grid-area        : gegevens;
  padding          : var(--padding-LR);
  background-color : #002D62;
  display          : flex;
  align-items      : center;
}

/* ======================== Reset column padding ======================*/

@media (min-width : 992px)
{
  html body #hoofd > .element:nth-child(13)
  {
    padding       : var(--padding-L);
    padding-right : 20px;
  }

  html body #hoofd > .element:nth-child(14)
  {
    padding      : var(--padding-R);
    padding-left : 20px;
  }
}

html body #hoofd
{
  display               : grid;
  grid-template-columns : repeat(12, 1fr);
  /* @formatter:off */
  grid-template-areas:
    "gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens"
    "menu menu menu logo logo logo logo logo logo banner banner banner"
    "headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg"
    "usps usps usps usps usps usps usps usps usps usps usps usps"
    "cont1 cont1 cont1 cont1 cont1 cont1 cont1 cont1 cont1 cont1 cont1 cont1"
    "cont2 cont2 cont2 cont2 cont2 cont2 cont2 cont2 cont2 cont2 cont2 cont2"
    "cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3"
    "cont8 cont8 cont8 cont8 cont8 cont8 cont8 cont8 cont8 cont8 cont8 cont8"
    "cont9 cont9 cont9 cont9 cont9 cont9 cont9 cont9 cont9 cont9 cont9 cont9"
    "cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5"
    "cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10"
    "cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6"
    "cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4"
    "cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7"
    "cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11"
    "footer footer footer footer footer footer footer footer footer footer footer footer"
  ;
    /* @formatter:on */
}

@media (min-width : 992px)
{
  html body #hoofd
  {
    display               : grid;
    grid-template-columns : repeat(12, 1fr);
    /* @formatter:off */
    grid-template-areas:
      "gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens"
      "menu menu menu logo logo logo logo logo logo banner banner banner"
      "headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg"
      "usps usps usps usps usps usps usps usps usps usps usps usps"
      "cont1 cont1 cont1 cont1 cont1 cont2 cont2 cont2 cont2 cont2 cont2 cont2"
      "cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3"
       "cont8 cont8 cont8 cont8 cont8 cont8 cont9 cont9 cont9 cont9 cont9 cont9"
      "cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5"
      "cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10"
      "cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6"
      "cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4"
      "cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7"
      "cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11"
      "footer footer footer footer footer footer footer footer footer footer footer footer"
    ;
    /* @formatter:on */
  }
}

@media (min-width : 1365px)
{
  html body #hoofd
  {
    display               : grid;
    grid-template-columns : repeat(12, 1fr);
    /* @formatter:off */
    grid-template-areas   : 
      "gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens gegevens" 
      "banner banner banner banner banner banner banner banner banner banner banner banner"
      "logo logo logo logo menu menu menu menu menu menu menu menu"
      "headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg headimg"
      "usps usps usps usps usps usps usps usps usps usps usps usps"
      "cont1 cont1 cont1 cont1 cont1 cont2 cont2 cont2 cont2 cont2 cont2 cont2"
      "cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3 cont3"
      "cont8 cont8 cont8 cont8 cont8 cont8 cont9 cont9 cont9 cont9 cont9 cont9"
      "cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5 cont5"
      "cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10 cont10"
      "cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6 cont6"
      "cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4 cont4"
      "cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7 cont7"
      "cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11 cont11"
      "footer footer footer footer footer footer footer footer footer footer footer footer"
    ;
    /* @formatter:on */
  }
}

html body #hoofd > .element:nth-child(1),
html body #hoofd > .element:nth-child(2), /* logo */
html body #hoofd > .element:nth-child(3) /* menu */
{
  display          : flex;
  position         : sticky !important;
  position         : -webkit-sticky !important;
  top              : 0 !important;
  background-color : var(--menu-bg-color);
  z-index          : 201;
  justify-content  : center;
  align-items      : center;
}

html body #hoofd > .element:nth-child(3) /* menu */
{
  justify-content : flex-start;
  padding         : var(--padding-L);
}

html body[data-responsive] .element.menu input:checked ~ ul.responsive,
html body[data-responsive] .element.menu ul.responsive input:checked ~ ul
{
  width : 350px;
}

@media (min-width : 1365px)
{
  html body #hoofd > .element:nth-child(1) /* banner */
  {
    display : none;
  }

  html body #hoofd > .element:nth-child(2) /* logo */
  {
    justify-content : flex-start;
    padding         : var(--padding-L);
  }

  html body #hoofd > .element:nth-child(3) /* menu */
  {
    justify-content : flex-end;
    padding         : 0 20px 0 0;
  }
}

@media (min-width : 1800px)
{
  html body #hoofd > .element:nth-child(3) /* menu */
  {
    justify-content : flex-end;
    padding         : var(--padding-R);
  }
}

/* Onderstaand gedeelte uitcommentariëren voor menu in statische kleur */
/*=====================================================================*/

html body #hoofd > .element:nth-child(1),
html body #hoofd > .element:nth-child(2),
html body #hoofd > .element:nth-child(3)
{
  background-color : rgb(0, 118, 191);
  transition       : background-color .5s ease;
  height           : 110px;
}

.chmenu
{
  background-color : var(--menu-bg-color) !important;
}

.chmenu a
{
  color : #FFFFFF !important;
}

/*=====================================================================*/
.widget-with-form
{
  width : 100% !important;
}

.donation-form
{
  width : 94% !important;
}


.bgimage
{
  background-position : center !important;
  background-size     : auto;
  font-weight         : bold;
  font-size           : 3em;
  color               : #FFFFFF;
  height              : 20vw;
  display             : flex;
  flex-wrap           : wrap;
}

.hoogtekleur
{
  min-height : 350px !important;
}

.pageheader
{
  flex-direction  : column;
  height          : 40vw;
  min-height      : 450px;
  margin-top      : -75px;
  justify-content : center;
}

.banner
{
  align-items : center;
}

.doneer-banner
{
  width    : 300px;
  right    : 10%;
  position : absolute;
  top      : 30%;
  color    : #FFFFFF;
}

.golf
{
  position         : absolute;
  width            : 100%;
  background-color : transparent;
  bottom           : 10px;
}

.golfBottom
{
  bottom : 0;
}


.footergolf
{
  background-color : transparent;
}

.overlay
{
  width      : 100%;
  background : rgba(0, 0, 0, 0.3);
  position   : absolute;
  padding    : 0;
  margin     : 0;
  top        : 0;
  bottom     : 0;
}

.overlay2
{
  width      : 100%;
  background : rgba(0, 0, 0, 0.3);
  position   : absolute;
  padding    : 0;
  margin     : 0;
  top        : 0;
  bottom     : 0;
  height: 100%;
}

.headercontent
{
  position  : absolute;
  left      : 50%;
  transform : translate(-50%, -50%);
  width     : 100%;
  color     : #FFFFFF;
  padding   : var(--padding-LR);
}

.headertitle
{
  font-size     : 1.5em;
  margin-bottom : 40px;
}

.stranding
{
  position         : relative;
  background-color : #002D62;
  color            : #FFFFFF;
  top              : 0;
  height           : 60px;
  padding-top      : 10px;
}

.vlag
{
  position          : relative;
  background-repeat : no-repeat;
  background-size   : 100%;
  display           : inline-block;
}

.engelse-vlag
{
  background-image : url("/websites/1711/images/engels.jpg");
}


.duitse-vlag
{
  background-image : url("/websites/1711/images/duits.jpg");
}

.arrow
{
  background-image : url("/websites/1711/images/arrow-sosdolfijn.png");
  transform        : rotate(350deg);
}


@media (min-width : 992px)
{
  .bgimage
  {
    font-size : 4em;
  }
}

.parallax
{
  background-size : cover !important;
}

.dolfijn
{
  background-position : -333px;
}

.stranding-image
{
  margin : -24px 0 0 0;
}

a
{
  color : #0076BF;
}

a:hover
{
  color : #002D62 !important;
}

a:visited
{
  color : #0076BF;
}

a.button
{
  font-size        : 18px;
  background-color : var(--button-color1);
  border           : 1px solid var(--button-color1);
  color            : var(--button-color2);
  border-radius    : 0;
  padding          : 10px;
  font-weight      : 200;
}

a.button:hover
{
  background-color : rgba(0, 0, 0, 0);
  color            : var(--button-color1) !important;
}

.button-invert
{
  background-color : rgba(0, 0, 0, 0) !important;
  border           : 1px solid var(--button-color1) !important;
  color            : var(--button-color1) !important;
}

.button-invert:hover
{
  background-color : var(--button-color1) !important;
  border           : 1px solid var(--button-color1) !important;
  color            : var(--button-color2) !important;
}

/* ========================= Menu styling =============================*/

html body .element.menu label
{
  color : #FFFFFF;
}

.header-icon span.fa
{
  padding-left : 10px;
  font-size    : 1.5em;
  color        : #FFFFFF !important;
}

html body .element.menu input:checked ~ ul.responsive,
html body .element.menu ul.responsive input:checked ~ ul
{
  display          : block;
  position         : absolute;
  background-color : var(--menu-bg-color);
  top              : 100%;
  min-width        : 50vw;
  left             : 0;
  padding          : var(--padding-L);
}

html body #hoofd > .element.menu ul.responsive ul
{
  position : relative;
}

@media (min-width : 1365px)
{
  html body #hoofd > .element.menu ul.responsive ul
  {
    position         : absolute;
    background-color : var(--menu-bg-color);
    border-radius    : 0;
    width            : 350px;
  }
}

/* ========================= Footer styling ===========================*/

#footer
{
  color     : #FFFFFF;
  display   : flex;
  flex-flow : row wrap;
  margin    : 3em auto 4em;
}

#footer > div:first-child
{
  flex-basis : 15%;
  min-width  : 285px;
}

#footer > div:last-child
{
  padding-right : 0;
}

#footer > div a
{
  color           : #1E9CEA;
  text-decoration : none;
}

#footer > div a:hover
{
  color           : #FFFFFF !important;
  text-decoration : none;
}

#footer span.fa
{
  display   : inline-block;
  color     : #1E9CEA;
  font-size : 1.5em;
}

#footer span.fa:hover
{
  color : #FFFFFF;
}

/* ========================= USPS styling ===========================*/

ul.usps
{
  height          : 50px;
  margin          : 0;
  padding         : 0;
  overflow        : hidden;
  display         : flex;
  justify-content : center;
  align-items     : center;
  list-style-type : none;
  flex-flow       : column wrap;
}

ul.usps li
{
  width           : 100%;
  text-align      : center;
  margin          : 0;
  padding         : 10px 0;
  white-space     : nowrap;
  display         : flex;
  justify-content : center;
  align-items     : center;
  animation       : scroll-horizontal 20s ease-out infinite alternate;
}

@media (min-width : 1365px)
{
  ul.usps
  {
    justify-content : space-between;
    flex-flow       : row;
  }

  ul.usps li
  {
    width     : auto;
    animation : none;
  }
}

@keyframes scroll-horizontal
{
  0%,
  20%
  {
    -webkit-transform : translateX(0);
    transform         : translateX(0);
  }
  25%,
  45%
  {
    -webkit-transform : translateX(-100%);
    transform         : translateX(-100%);
  }
  50%,
  70%
  {
    -webkit-transform : translateX(-200%);
    transform         : translateX(-200%);
  }
  75%,
  100%
  {
    -webkit-transform : translateX(-300%);
    transform         : translateX(-300%);
  }
}

/* slider code */

.reviewslider
{
  display          : flex;
  align-items      : center;
  justify-content  : center;
  position         : relative;
  max-width        : 1200px;
  margin           : auto;
  min-height       : 300px;
  height           : 100%;
  background-color : #EEEEEE;
}

.reviewslider *::selection
{
  background : transparent;
}

.reviewslider .slide
{
  max-width          : 80%;
  display            : none;
  text-align         : center;
  animation-name     : fade;
  animation-duration : 1s;
}

.reviewslider .slide:nth-child(1)
{
  display : block;
}

.reviewslider .prev
{
  position  : absolute;
  padding   : 20px;
  cursor    : pointer;
  top       : 50%;
  left      : 0;
  transform : translate(0%, -50%);
}

.reviewslider .next
{
  position  : absolute;
  padding   : 20px;
  cursor    : pointer;
  top       : 50%;
  right     : 0;
  transform : translate(0%, -50%);
}

.dots
{
  text-align : center;
  position   : absolute;
  bottom     : 0;
}

.dots .dot
{
  cursor           : pointer;
  height           : 13px;
  width            : 13px;
  margin           : 0 10px;
  background-color : #BBBBBB;
  border-radius    : 50%;
  display          : inline-block;
  transition       : background-color 0.6s ease;
}

.dots .active, .dots .dot:hover
{
  background-color : #717171;
}

/* Fading animation */
.dots .fade
{
  animation-name     : fade;
  animation-duration : 1s;
}

@keyframes fade
{
  from
  {
    opacity : .4
  }
}

/* ========================= Producten ===========================*/
.module.producten
{
  font-size : 15px;
}

.module .images .main img
{
  max-height : 20em;
  margin     : 0;
}

.module .content img
{
  margin : 0;
  height : 220px;
}

.module.producten.overview figure figcaption
{
  font-size        : 15px;
  background-color : #002D62;
  padding          : 10px 20px;
  color            : #FFFFFF;
  font-weight      : 600;
  height           : 70px;
}

.module.producten.overview figure .image
{
  background-color : #C4C4C4;
}

.module.producten.overview a .information
{
  background-color : #0076BF;
}

.module.producten.overview > a
{
  box-shadow : none;
  padding    : 0;
  border     : 1px solid transparent;
}

.module.producten.overview > a:hover
{
  border : 1px solid var(--button-color1);
}

.module.producten.overview > a:last-child
{
  margin-right : 0;
}

.module.producten.page nav
{
  grid-template-columns : 7.5em auto 5.5em repeat(8, 3em);
}

.module.producten.overview a .price.euro::before
{
  left : 1.25em;
}

.module.producten.overview a .price.euro
{
  padding-left : 35px;
  text-align   : left;
}

.module.producten.page .line .price
{
  color  : #0076BF;
  border : none;
}

/** NIEUWS
 *************/
 
.module.nieuws.overview 
{
  grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
  margin-bottom : 90px;
}

.module.nieuws.page figure
{
  max-width: 25em;
}

.module.nieuws.page figure img
{
  border  : none;
  padding : 0;
}

/* ========================= Uitlijning ===========================*/
.lichtblauw
{
  background-color : #0076BF;
}

.donkerblauw
{
  background-color : #002D62;
}

.white
{
  color : #FFFFFF;
}

/* ========================= Uitlijning ===========================*/
.left
{
  text-align : left;
}

.center
{
  text-align : center;
}

.center2
{
  text-align : center;
}

.right
{
  text-align : right;
}

.margin0
{
  margin : 0;
}

.padding15
{
  padding : 0 15px;
}

.content-right
{
  justify-content : flex-end;
  display         : flex;
}

/* ========================= Veelgestelde vragen ===========================*/
.refblokken
{
  display         : flex;
  flex-flow       : row wrap;
  justify-content : center;
}

.refblokken > div
{
  display   : flex;
  flex-flow : column nowrap;
  width     : 30%;
  margin    : 15px;
  min-width : 290px;
}

.refblokken .ref-text
{
  background-color : #002D62;
  color            : #FFFFFF;
}

.readmore + .toggle
{
  color    : #FEC600;
  right    : 5%;
  position : relative;
}

.readmore + .toggle:hover
{
  color : #FFFFFF !important;
}

.readmore
{
  padding : 0 20px !important;
  height  : 4em;
}

.refblokken .ref-text > div p:nth-child(1)
{
  font-weight : 800;
  height      : 70px;
}

/* ========================= Stranding Blokken ===========================*/
.strandingrow
{
  margin          : 0;
  justify-content : space-between;
  align-items     : center;
}

.strandingrow > div
{
  flex-grow  : 1;
  flex-basis : 50%;
  position   : relative;
  min-height : 1px;
  color      : #FFFFFF;
  text-align : center;
  height     : 290px;
}

.strandingrow a
{
  color : #002D62;
}

.strandingrow a:hover
{
  color : #FFFFFF;
}

.strandingrow > div p:first-of-type
{
  font-size : 31px;
  margin    : 0;
}

.stranding-tekst
{
  position : inherit;
}

/* ========================= Blokken ===========================*/
.blockrow
{
  margin-left     : -10px;
  margin-right    : -10px;
  justify-content : space-between;
  align-items     : center;
}

.blockrow > div
{
  flex-grow        : 1;
  flex-basis       : 33.333333%;
  position         : relative;
  min-height       : 1px;
  margin           : 10px;
  color            : #FFFFFF;
  text-align       : center;
  background-color : #002D62;
}

.blockrow2 > div
{
  background-color : #002D62;
  color            : #FFFFFF;
}

.blockrow > div p:first-of-type
{
  font-size   : 20px;
  font-weight : 600;
}

.blockrow2 > div p:first-of-type
{
  font-size : 18px;
}

.blockrow-image
{
  background-position : center !important;
  background-size     : cover;
  font-weight         : bold;
  font-size           : 3em;
  color               : #FFFFFF;
  height              : 0;
  min-height          : 200px;
  display             : flex;
  flex-wrap           : wrap;
  background-repeat   : no-repeat;
}

.block-tekst
{
  padding : 0 10px;
}

.blockrow2 .block-tekst
{
  padding-left : 20px;
}

/* ========================= Vrienden (carrousel) ===========================*/
.vrienden
{
  margin-left     : -10px;
  margin-right    : -10px;
  justify-content : space-between;
  align-items     : center;
}

.vrienden > div
{
  flex-grow        : 1;
  flex-basis       : 33.333333%;
  position         : relative;
  min-height       : 1px;
  margin           : 10px;
  background-color : #FFFFFF;
  box-shadow       : 5px 5px #88888817;
}

.vrienden > div:hover
{
  box-shadow : 5px 5px #0076BF36;
}

.hoogte
{
  background-size : 100% !important;
}

/* ========================= MOBIEL ===========================*/
@media (min-width : 300px)
{
  h2, h3
  {
    margin      : 0;
    line-height : 1.3;
  }

  #TEXT_DVIZPNBM .engelse-vlag, #TEXT_DVIZPNBM .duitse-vlag
  {
    display : none;
  }

  .vlag
  {
    width  : 28px;
    height : 30px;
    margin : 11px 8px 0 0;
  }

  .arrow
  {
    width  : 47px;
    height : 40px;
  }

  html body #hoofd > .element:nth-child(18)
  {
    justify-content : flex-end;
  }

  #TEXT_DVIZPNBM .duitse-vlag
  {
    margin-right : 0;
  }

  .headerbutton
  {
    right    : 0;
    position : relative;
  }

  .headercontent
  {
    text-align : center;
  }

  .module.producten.overview > a
  {
    margin : 0 0 20px 0;
  }

  .module.producten.overview
  {
    display : grid;
  }

  .logo
  {
    width      : 140px;
    margin-top : 8px;
  }

  .logo-plek
  {
    margin : 0;
  }

  .bgimage
  {
    min-height : 580px;
  }

  .hoogte
  {
    min-height : 350px;
  }

  .headercontent
  {
    top : 61%;
  }

  .blockrow
  {
    display : block;
  }

  .block-tekst
  {
    height : 80px;
  }

  .golven_blauw
  {
    margin-top : -28px;
  }

  .blockrow a.button
  {
    margin-bottom : 20px;
  }

  html body #hoofd > .element:nth-child(10)
  {
    text-align : center;
  }

  .parallax
  {
    background-repeat : no-repeat;
  }

  .stranding-tekst
  {
    top : 17%;
  }

  .strandingpage
  {
    font-size : 13px;
  }

  .stranding1
  {
    top : 7%;
  }

  .stranding2
  {
    top : 16%;
  }

  .stranding3
  {
    top : -5%;
  }

  .headercontent p
  {
    padding-left : 0;
  }

  .blockrow2 .block-tekst
  {
    height : 150px;
  }

  .vrienden
  {
    display : block;
  }

  .strandingrow
  {
    display : block;
  }

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

  .donation-form
  {
    height : 650px !important;
  }

  html body #hoofd > .element:nth-child(1), html body #hoofd > .element:nth-child(2), html body #hoofd > .element:nth-child(3)
  {
    height : 90px;
  }

  .overlay
  {
    height : 350px;
  }

  .overlayH
  {
    height : 580px;
  }

  .vriendenimage
  {
    background-size : 50%;
  }

  .hoogte-image
  {
    min-height : 160px;
  }

  .blockHoogte
  {
    height : 250px !important;
  }

  .strandingrow1 > div:nth-child(1), .strandingrow2 > div:nth-child(1)
  {
    background-color : #0076BF;
  }

  .strandingrow1 > div:nth-child(2), .strandingrow2 > div:nth-child(2)
  {
    background-color : #002D62;
  }

  .strandingrow a
  {
    color : #0076BF;
  }

  .parallax
  {
    height : 530px;
  }

  .stranding-image
  {
    height              : 580px;
    background-position : -240px 0;
  }
}

@media (min-width : 370px)
{
  .golven_blauw
  {
    margin-top : -32px;
  }
}

@media (min-width : 500px)
{
  .golven_blauw
  {
    margin-top : -42px;
  }
}

@media (min-width : 600px)
{
  .vrienden
  {
    display : flex;
  }

  .golven_blauw
  {
    margin-top : -52px;
  }
}

@media (min-width : 700px)
{
  .golven_blauw
  {
    margin-top : -62px;
  }

  .stranding-image
  {
    background-position : 0 0;
  }
}

@media (min-width : 800px)
{
  .golven_blauw
  {
    margin-top : -70px;
  }
}

/* ========================= TABLET ===========================*/
@media (min-width : 992px)
{
  h2, h3
  {
    margin : 1em 0 1em;
  }

  html body #hoofd > .element:nth-child(18)
  {
    justify-content : flex-end;
  }

  .vlag
  {
    width  : 32px;
    height : 30px;
    margin : 11px 20px 0 0;
  }

  .arrow
  {
    width  : 47px;
    height : 40px;
  }

  .headerbutton
  {
    right    : 16%;
    position : absolute;
  }

  .headercontent
  {
    text-align : right;
  }

  .golven_blauw
  {
    margin-top : -73px;
  }

  #footer > div
  {
    flex-basis    : 35%;
    min-width     : 355px;
    padding-right : 30px;
  }

  .module.producten.overview > a
  {
    margin : 0 20px 20px 0;
  }

  .bgimage
  {
    min-height : 850px;
  }

  .hoogte
  {
    min-height      : 850px;
    background-size : 100% !important;
  }

  .headercontent
  {
    top : 45%;
  }

  html body #hoofd > .element:nth-child(10)
  {
    text-align : left;
  }

  .parallax
  {
    background-position : center center !important;
  }

  .stranding-tekst
  {
    top : 22%;
  }

  .strandingpage
  {
    font-size : 14px;
  }

  .stranding1
  {
    top : 3%;
  }

  .stranding2
  {
    top : 18%;
  }

  .stranding3
  {
    top : 5%;
  }

  .headercontent p
  {
    margin-bottom : 70px;
    max-width     : 350px;
  }

  .headerbutton
  {
    right    : 10%;
    position : absolute;
  }

  .module.producten.overview
  {
    grid-template-columns : repeat(auto-fill, minmax(15em, 1fr));
  }

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

  .strandingrow
  {
    display : flex;
  }

  .logo
  {
    width : 180px;
  }

  html body #hoofd > .element:nth-child(1), html body #hoofd > .element:nth-child(2), html body #hoofd > .element:nth-child(3)
  {
    height : 100px;
  }

  .overlay
  {
    height : 800px;
  }

  .overlayH
  {
    height : 820px;
  }

  .vriendenimage
  {
    background-size : 80%;
  }

  .hoogte-image
  {
    min-height : 250px;
  }

  .strandingrow1 > div:nth-child(1), .strandingrow2 > div:nth-child(2)
  {
    background-color : #0076BF;
  }

  .strandingrow1 > div:nth-child(2), .strandingrow2 > div:nth-child(1)
  {
    background-color : #002D62;
  }

  .strandingrow a
  {
    color : #002D62;
  }

  .parallax
  {
    height : 580px;
  }
}

@media (min-width : 1100px)
{
  .blockrow
  {
    display : flex;
  }

  .golven_blauw
  {
    margin-top : -23px;
  }

  .block-tekst
  {
    height : 130px;
  }

  .blockHoogte
  {
    height : 270px !important;
  }
}

@media (max-width : 1365px)
{
  html body[data-responsive] #hoofd > .element.menu ul.responsive ul
  {
    padding : 0;
  }
}

/* ========================= DESKTOP ===========================*/
@media (min-width : 1365px)
{
  #TEXT_DVIZPNBM .engelse-vlag, #TEXT_DVIZPNBM .duitse-vlag
  {
    display : block;
  }

  #TEXT_DVIZPNBM .duitse-vlag
  {
    margin-right : 50px;
  }

  .headerbutton
  {
    right : 17%;
  }

  #footer > div
  {
    min-width     : 575px;
    padding-right : 20px;
  }


  #footer > div:last-child
  {
    min-width  : 140px;
    flex-basis : 30%;
  }

  .module.producten.overview
  {
    grid-template-columns : repeat(auto-fill, minmax(20em, 1fr));
  }

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

  .blockrow2 .block-tekst
  {
    height : 120px;
  }

  .blockHoogte
  {
    height : 280px !important;
  }

  .strandingpage
  {
    font-size : 15px;
  }

  .stranding1
  {
    top : 8%;
  }

  .stranding3
  {
    top : 14%;
  }

  .overlayH
  {
    height : 800px;
  }

  html body .element.menu ul.responsive ul a
  {
    width : 180px;
  }
}

@media (min-width : 1800px)
{
  .golven_blauw
  {
    margin-top : -28px;
  }

  .overlay
  {
    height : 850px;
  }

  .overlayH
  {
    height : 779px;
  }
}

iframe table {
    width: 100% !important;
}