@import url("https://use.typekit.net/tej6kjc.css");

#header,
.footer-inner{display: none;}

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 80vh;
  height: 80dvh;
  min-height: 480px;
  --bar-h: 0px; /* wordt door Twig overschreven */
}

/* achtergrondfoto */
.hero__bg {
  position: absolute;
  inset: -12% 0 -12% 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 1;
}

/* multiply-overlay onder de bar, boven de foto */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  background-color: rgb(184, 190, 161);
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
}

/* kleurvariant */
.newcolor.hero::before {
  background-color: rgb(226, 131, 99);
}

/* balk zelf; transparant, tekst staat erboven */
.hero__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3; /* boven overlay */
  background: transparent;
}

.hero__container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% - var(--bar-h));
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

.hero__container,
.hero__bar-inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 576px)  { .hero__container, .hero__bar-inner { max-width: 540px; } }
@media (min-width: 768px)  { .hero__container, .hero__bar-inner { max-width: 720px; } }
@media (min-width: 992px)  { .hero__container, .hero__bar-inner { max-width: 960px; } }
@media (min-width: 1200px) { .hero__container, .hero__bar-inner { max-width: 1140px; } }
@media (min-width: 1400px) { .hero__container, .hero__bar-inner { max-width: 1320px; } }

.hero__logo-wrap {
  position: relative;
  left: 0;
  pointer-events: auto;
  display: grid;
  place-items: center;
}

.hero__logo {
  max-width: min(60vw, 480px);
  height: auto;
  display: block;
}

.hero__bar-inner {
  position: relative;
  z-index: 3; /* tekst boven overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  padding: 25px 0;
}

.hero__textblock {
  flex: 0 1 auto;
}

.hero__title,
.newcolor .hero__title {
  margin: 0;
  font-family: mendl-sans-dusk, sans-serif;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
}

.hero__text {
  margin-top: .4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: mendl-sans-dusk, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  line-height: 2;
}

#intro,
#forms {
  position: relative;
  overflow: hidden; /* voorkomt dat de afbeelding buiten de sectie valt */
}

.forms .bb-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0; /* uitlijning start bij de rechterrand */
  width: 860px;
  height: 380px;
  background-image: url('/sites/default/files/gbb-uploads/flower.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  transform: translateX(50%); /* midden van de afbeelding op de rechterrand */
  pointer-events: none;
  z-index: 0;
}

#intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: rgb(184, 190, 161);
  mix-blend-mode: multiply;
  opacity: 1;
  pointer-events: none;
}

.newcolor #intro::before {
  background-color: rgb(226, 131, 99);
}


h2{font-weight: 600;  font-size: 34px; line-height: 1;}
#intro .header-links{text-align: center; padding-right: 15px;}
#intro .header-rechts{text-align: center; padding-left: 15px;}
#intro .header-rechts h2{margin-bottom: 60px;}

#intro .flower {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;      /* pas aan indien nodig */
  z-index: 1;       /* onder content */
  pointer-events: none; /* zodat hij niet aanklikbaar is */
}

/* optioneel: laat hem iets overlappen of marge geven */
#intro .flower img,
#intro .flower .column-content-inner {
  display: block;
  max-width: 100%;
  height: auto;
}

.column-text {
  column-count: 2;
  column-gap: 3rem;   /* ruimte tussen kolommen */
  column-fill: balance; /* verdeelt tekst evenredig */
}

.column-text p {margin-bottom: 0;}

.formulier .bg-size-cover{background-color: rgba(255, 255, 255, 0.78); padding: 30px 30px 50px 30px; position: relative; z-index: 9;}

#vogelvlucht h2{color: #ffffff; font-size: 32px; line-height: 1; font-weight: 600;}
#vogelvlucht{min-height: 400px; background-size: 660px}
#vogelvlucht .bb-inner.padding-small {
    padding-top: 30px;
    padding-bottom: 50px;
}

.partners img{width: 250px; height: auto;}

#block-memorise-formulier .form-text,
#block-memorise-formulier .webform-submission-form .form-item input,
#block-memorise-formulier .webform-submission-form .form-item textarea,
#block-memorise-formulier .webform-submission-form .form-item select{color: #000000; font-family: arno-pro-display, serif; font-size: 18px; font-weight: 400; line-height: 40px}

#block-memorise-formulier .webform-submission-form .form-item select {
    margin-top: 0.25rem; height: 52px;
}

#block-memorise-formulier .webform-flex--container > .webform-has-field-suffix > input:not([type="checkbox"]){width: 100%;}

#edit-persoonsgegevens,
#edit-adresgegevens{margin: 0;}

#edit-persoonsgegevens2{margin:0;}

#block-memorise-formulier .webform-flex--container {
  margin: 0 10px; /* standaard marge tussen de containers */
}

#block-memorise-formulier .webform-flex:first-child .webform-flex--container {
  margin-left: 0; /* geen marge aan de linkerkant van de eerste */
}

#block-memorise-formulier .webform-flex:last-child .webform-flex--container {
  margin-right: 0; /* geen marge aan de rechterkant van de laatste */
}

#block-memorise-formulier #edit-telefoonnummer .webform-flex:first-child .webform-flex--container {
  margin-left: 0.5em; /* geen marge aan de linkerkant van de eerste */
}

#block-memorise-formulier #edit-telefoonnummer .webform-flex:last-child .webform-flex--container {
  margin-right: 0.5em; /* geen marge aan de rechterkant van de laatste */
}


#block-memorise-formulier .field-suffix{font-size: 15px; padding-left: 15px;}
#block-memorise-formulier .js-form-type-checkbox .field-suffix{font-size: 18px;}
#block-memorise-formulier .js-form-type-checkbox input{width: initial;}

.copyright-inner .content.block-content {
  display: flex;
  justify-content: space-between; /* eerste links, tweede rechts */
  align-items: center;            /* netjes verticaal uitlijnen */
}

.copyright-inner .content.block-content p {
  margin: 0; /* standaard marge weghalen */
}

iframe .alert-info{display: none !important}

.buton-link{margin-top: 50px;}
.anchor-link pre{margin: 0; line-height: 1px}

.gslide-image{background: #FFFFFF !important}
.gslide-desc{font-family: arno-pro-display, serif !important; font-size: 18px !important;}

.views-field-field-impressies-1{font-size: 18px; text-align: center; color: #e89f6e; font-weight: 700;}
.views-field-field-impressies-2{font-size: 18px; text-align: center; color: #e89f6e;}

.newcolor .views-field-field-impressies-1{color: #e28363;}
.newcolor .views-field-field-impressies-2{fcolor: #e28363;}

.impressies{padding: 60px 0 0 0;}

/* container voor stapelen */
.impressie__canvas {
  position: relative;
  width: 100%;
}

/* alleen de éérste hoofdimpressie-afbeelding binnen .impressie__canvas */
.impressie__canvas > a:first-of-type img,
.impressie__canvas > picture:first-of-type img {
  width: 85%;
  height: auto;
  display: block;
}

/* glightbox-bijschriften verbergen binnen dit component */
.impressie__canvas .glightbox-desc {
  display: none;
}

/* wit overlayvlak: rechts bovenop de hoofdimpressie */
.impressie__overlay {
  position: absolute;
  top: 57px;
  right: 30px;
  max-width: 60%;
  width: auto;
  height: calc(100% - 150px); /* vult hoogte minus marge */
  background-color: rgba(255, 255, 255, 0.78);
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 2;

  display: flex;             /* handig om inhoud te centreren */
  flex-direction: column;
  justify-content: center;   /* thumbnails verticaal centreren */
}

/* horizontale strip met extra impressies */
.impressie__strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  white-space: nowrap;
}

/* thumbnails in de strip */
.impressie__strip img {
  height: 325px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.impressie__canvas > a:first-of-type::after {
  content: attr(title);
  display: block;
  margin-top: .5rem;
  font-size: 24px;
  line-height: 1.35;
  color: #333;
  position: relative;
  bottom: 60px;
  left: 25px;
  z-index: 999
  
}

.impressie__strip a::after {
  content: attr(title);
  display: block;
  font-size: 16px;
  line-height: 1.2;
  color: #333;
  text-align: center;
}

@media (max-width: 992px) {
  /* hoofdimpressie volbreed */
  .impressie__canvas > a:first-of-type img,
  .impressie__canvas > picture:first-of-type img {
    width: 100%;
    padding: 0 2px;
  }

  /* overlay niet meer overlappend, maar onder de afbeelding */
  .impressie__overlay {
    position: static;          /* uit absolute flow */
    width: 100%;
    max-width: none;
    height: auto;              /* natuurlijke hoogte */
    margin-top: 1rem;          /* ruimte t.o.v. afbeelding */
    box-shadow: 0 4px 12px rgba(0,0,0,.10); /* iets subtieler kan */
    justify-content: flex-start; /* optioneel: inhoud bovenin */
  }
  
  .impressie__canvas > a:first-of-type::after {
      font-size: 18px;
      bottom: 40px;
      left: 25px;
      margin-bottom: -40px;
  }

  /* thumbnails iets compacter */
  .impressie__strip img {
    height: 140px;
  }
  
  .impressie__strip a::after {
    font-size: 11px;
  }
  .impressie__strip a{text-align: center}
}

/* extra verfijning voor kleinere schermen */
@media (max-width: 640px) {
  .impressie__strip img { height: 140px; }
  .impressie__strip {
    justify-content: center;  /* centreren van de rij */
  }
}




/* sm ≥ 576px */
@media (min-width: 576px) {
  .hero__title { font-size: 56px; line-height: 0.9;}
  .hero__text  { font-size: 18px; line-height: 2}
  .hero{height: 70vh; height: 70dvh;}
  h2{font-size: 42px;}
  #intro .header-links{text-align: center; padding-right: 15px;}
  #intro .header-rechts{text-align: center; padding-left: 15px;}
  
  #vogelvlucht{min-height: 320px; background-size: 460px}
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .hero__title { font-size: 68px; line-height: 0.9}
  .hero__text  { font-size: 26px; }
  .hero__bar-inner {padding: 60px 0;}
  .hero{height: 70vh; height: 70dvh;}
  #intro .header-links{text-align: right; padding-right: 5px;}
  #intro .header-rechts{text-align: left; padding-left: 5px;}
  h2{font-size: 38px; margin-bottom: 30px;}
  #vogelvlucht{min-height: 592px; background-size: 970px}
  #vogelvlucht .bb-inner.padding-small {
      padding-top: 50px;
      padding-bottom: 50px;
  }
}

/* lg ≥ 992px */
@media (min-width: 992px) {
  .hero__title,
  .newcolor .hero__title{ font-size: 60px; }
  .hero__text  { font-size: 25px; }
  .hero__bar-inner {padding: 60px 0;}
  .hero{height: 70vh; height: 70dvh;}
  h2{font-size: 48px;}
  #vogelvlucht{min-height: 765px; background-size: 1170px}
}

/* xl ≥ 1200px */
@media (min-width: 1200px) {
  .hero__title,
  .newcolor .hero__title{ font-size: 75px; }
  .hero__text  { font-size: 32px; }
  .hero__bar-inner {padding: 75px 0;}
  .hero{height: 70vh; height: 70dvh;}
  h2{font-size: 60px; margin-bottom: 30px;}
  #vogelvlucht{min-height: 925px; background-size: 1516px}
  #vogelvlucht h2{font-size: 64px;}
}

/* xxl ≥ 1400px */
@media (min-width: 1400px) {
  .hero__title,
  .newcolor .hero__title{ font-size: 80px; }
  .hero__text  { font-size: 30px; }
  .hero{height: 70vh; height: 70dvh;}
  .hero__bar-inner {padding: 80px 0 70px 0;}
  h2{font-size: 58px; margin-bottom: 60px;}
  #vogelvlucht h2{font-size: 64px;}
}

@media (max-width: 767px) {
  .hero__logo-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: flex;
    justify-content: center;
    margin: 100px auto 1rem;
  }
  .column-text p {margin-bottom: 1rem; font-size: 16px;}
  .geolocation-map-container{height: 400px !important;}
  #block-memorise-formulier .webform-flex--container,
  #block-memorise-formulier #edit-telefoonnummer .webform-flex:first-child .webform-flex--container,
  #block-memorise-formulier #edit-telefoonnummer .webform-flex:last-child .webform-flex--container{margin: 0;}
  .copyright-inner .content.block-content{display: block;}
  .partners img {width: 100%; height: auto;}
  .partners .col-md-4, .partners .col-sm-4{width: 33.333% !important; font-size: 9px;}
  .row-wrapper .col-sm-4:nth-of-child(1) {
    padding-left: 20px;
    padding-right: 10px;
  }
  
  .row-wrapper .col-sm-4:nth-of-child(2) {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .row-wrapper .col-sm-4:nth-of-child(3) {
    padding-left: 10px;
    padding-right: 20px;
  }
  body {font-size: 18px !important;}
  #intro .header-links{text-align: left; padding-right: 20px;}
  #intro .header-rechts{text-align: left; padding-left: 20px;}
  .buton-link{margin-top: 20px;}
  .button{padding: 10px 30px 6px 30px; font-size: 20px;}
  #block-memorise-formulier .js-form-type-checkbox .field-suffix{font-size: 15px;}
  .formulier .bg-size-cover {padding: 30px 20px 50px 20px;}
  .partner-first {
    padding-left: 15px;
    padding-right: 5px;
  }
  
  .partner-second {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .partner-third {
    padding-left: 5px;
    padding-right: 15px;
  }
  #footer .copyright {
  font-size: 15px;}
  
  #intro h2{text-align: center !important;}
}

@media (max-width: 991px) {
  .column-text {
    column-count: 1;
  }
}

.hero__bg--mobile { display: none; }

@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  .hero__bg--desktop { display: none; }
  .hero__bg--mobile  { display: block; }
}


@supports not (mix-blend-mode: multiply) {
  .hero__bar::before {
    mix-blend-mode: normal;
    background-color: rgba(232, 159, 110, 0.63);
  }
  .newcolor .hero__bar::before {
    mix-blend-mode: normal;
    background-color: rgba(226, 131, 99, 0.63);
  }
}