@charset "utf-8";


:root {
  --sppb-oranje: #fe5000 !important;
  --sppb-zwart: #000000!important;
  --sppb-licht-zand: #E8E6DE!important;
  --sppb-zand: #CDCAB9!important;
  --sppb-wit: #ffffff!important;
  --sppb-donker-grijs: #43484d!important;
}



body{
	font-family: helvetica-neue-lt-pro, sans-serif;
	font-weight: 300!important;
	font-style: normal;
	font-size: 16px;
}

span.sppb-icon-container {
    position: relative;
}


/* ===== MMX tiles (cijfers/icoon) ===== */
.mmx-anniversary-card{
  background:#fe5000;  /* oranje */
  color:#fff;          /* wit */
  text-align:center;
  padding:24px;
  border-radius:0;     /* geen ronde hoeken */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:180px;
  overflow:hidden;
}
.mmx-anniversary-card .mmx-icon{ margin-bottom:8px; }
.mmx-anniversary-card .mmx-icon i{
  font-size:48px;
  line-height:1;
  color:inherit;       /* icoon wit via parent */
  display:block;
}
.mmx-anniversary-card .mmx-label{
  font-size:14px;
  opacity:.95;
  margin-bottom:6px;   /* afstand tot het getal */
}
.mmx-anniversary-card .mmx-number{
  font-size:48px;
  font-weight:700;
  line-height:1;
  letter-spacing:.5px;
}

@media (max-width:480px){
  .mmx-anniversary-card{ 
    padding:20px; 
    margin-bottom:30px ;
  }
  .mmx-anniversary-card .mmx-icon i{ font-size:40px; }
  .mmx-anniversary-card .mmx-number{ font-size:44px; }
}

/* ===== Helix megamenu caret consistent + revert nowrap/flex ===== */

/* Revert: geen flex/nowrap op de UL – ALLEEN DESKTOP */
@media (min-width: 992px){
  #sp-header .sp-megamenu-parent{
    display:block;                 /* bewust zónder !important */
    flex-wrap:initial !important;
    white-space:normal !important; /* laat items normaal renderen */
  }
}

/* Zorg dat top-level anchors niet forceren tot nowrap */
#sp-header .sp-megamenu-parent > li > a{
  white-space:normal !important;
}

/* Unify caret (down arrow) op alle pagina's */
#sp-header .sp-megamenu-parent > li.sp-has-child > a:after{
  content:"\f107" !important;               /* fa-angle-down */
  font-family:"FontAwesome" !important;     /* forceer FA4 (Helix 3) */
  font-weight:normal !important;            /* geen bold/condensed */
  font-style:normal !important;
  font-variant:normal !important;
  font-stretch:normal !important;
  display:inline-block;
  margin-left:.4em;
  line-height:1 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:none !important;
}

/* Taal-switcher caret ook normaliseren (kan anders bold/condensed worden) */
#sp-header .sp-select .fa-angle-down{
  font-family:"FontAwesome" !important;
  font-weight:normal !important;
  font-style:normal !important;
  line-height:1 !important;
  transform:none !important;
}

/*layout vacatureoverzicht*/

/* Parent rij als flex-grid */
.sppb-addon-articles .sppb-row{
  display:flex;
  flex-wrap:wrap;
}

/* 4 kolommen */
.sppb-addon-articles .sppb-col-sm-3{
  flex:0 0 25%;   /* exact 4 per rij */
  display:flex;   /* zorgt dat de kaart uitrekt */
}

/* Kaart */
.sppb-addon-articles .sppb-addon-article{
  display:flex;
  flex-direction:column;
  padding: 30px 0 20px !important;
  width:100%;
  background:#fff;
  border:1px solid #eee; /* optioneel */
  position:relative;
}

/* Pseudo-lijn onderaan kaart UIT */
.sppb-addon-articles .sppb-addon-article:after{
  content:none !important;
}

/* BG-image UIT (element verbergen) */
.sppb-addon-articles .sppb-addon-article .sppb-addon-article-bgimage{
  display:none !important;
}

/* Inline <img> als vaste beeldstrook bovenin */
.sppb-addon-articles .sppb-addon-article .sppb-img-responsive{
  display:block !important;
  width:100% !important;
  height:180px;          /* pas aan naar wens (bijv. 200–240px) */
  object-fit:cover;      /* vult netjes zonder vervormen */
}

/* Content direct onder de foto — 30px padding */
.sppb-addon-articles .sppb-addon-article-info-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:30px;
}

/* Titelhoogte beperken zodat rijen netjes blijven */
.sppb-addon-articles h3{
  font-size:16px !important;
  margin:0;
  line-height:1.3;
  min-height:2.6em; /* ~2 regels */
}

/* Standaard titel (basis-stijl) */
.sppb-addon-articles h3 a,
.sppb-addon-articles h3 a:visited{
  text-decoration:none;
}

/* Kaart-hover mag de titel NIET aanpassen, behalve als de link zelf gehoverd is */
.sppb-addon-articles .sppb-addon-article:hover h3 a:not(:hover){
  color:inherit !important;
}

/* Alleen link-hover: oranje titel — deze wint altijd */
.sppb-addon-articles h3 a:hover,
.sppb-addon-articles h3 a:focus,
.sppb-addon-articles .sppb-addon-article .sppb-addon-article-info-wrap h3 a:hover,
.sppb-addon-articles .sppb-addon-article .sppb-addon-article-info-wrap h3 a:focus{
  color:#fe5000 !important;
  text-decoration:none;
  transition:color .15s ease;
}

/* Responsief gedrag */
@media (max-width: 991.98px){
  .sppb-addon-articles .sppb-col-sm-3{
    flex:0 0 50%; /* 2 kolommen */
  }
}
@media (max-width: 575.98px){
  .sppb-addon-articles .sppb-col-sm-3{
    flex:0 0 100%; /* 1 kolom */
  }
  .sppb-addon-articles .sppb-addon-article .sppb-img-responsive{
    height:160px;  /* iets lager op mobiel */
  }
}

/* Verberg het icoon in alle links met deze modal-selector */
a.sppb-modal-selector > i.fa {
  display: none !important;
}

/***********images equal height**************/

/* Alleen binnen de sectie met class mmx-img-4col */
.mmx-img-4col .sppb-addon-single-image-container img {
    height: 250px;
    object-fit: cover !important;
    object-position: center;
}

@media (max-width: 768px) {
    .mmx-img-4col .sppb-addon-single-image-container img {
        height: 250px;
    }
}

/* Alleen binnen de sectie met class mmx-img-3col-tall */
.mmx-img-3col-tall .sppb-addon-single-image-container img {
    height: 340px;   /* hoger i.v.m. 3 kolommen */
    object-fit: cover !important;
    object-position: center;
}

@media (max-width: 768px) {
    .mmx-img-3col-tall .sppb-addon-single-image-container img {
        height: 340px;
    }
}

/***********Kolomen equal height**************/
.sppb-section.equal-cols > .sppb-row-container > .sppb-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;                 /* kolommen even hoog */
}

/* kolom-wrappers rekken mee */
.sppb-section.equal-cols .sppb-row > .sppb-row-column {
  display: flex;
  align-self: stretch;
}

/* kolom vult de hoogte */
.sppb-section.equal-cols .sppb-row > .sppb-row-column > .sppb-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* addons-container vult de kolom */
.sppb-section.equal-cols .sppb-column > .sppb-column-addons {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* addon-wrapper vult de container */
.sppb-section.equal-cols .sppb-column > .sppb-column-addons > .sppb-addon-wrapper {
  display: flex;
  flex: 1 1 auto;
}

/* het DIV-je binnen de wrapper (bv. #sppb-addon-XXXX) vult ook */
.sppb-section.equal-cols .sppb-column > .sppb-column-addons > .sppb-addon-wrapper > div {
  display: flex;
  flex: 1 1 auto;
}

/* de eigenlijke addon (heeft jouw achtergrond/padding) rekt mee tot volledige hoogte */
.sppb-section.equal-cols .sppb-column > .sppb-column-addons .sppb-addon {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/***********logo carousel*************/
.sppb-carousel-extended-item img {
    width: 100%;
    object-fit: fill;
    height: auto !important;
}

/***********animaties************/
.scroll-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}

/* Scroll naar beneden */
.visible-down {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

/* Scroll naar boven */
.visible-up {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

p.p1 {
    font-weight: 300;
    font-size: 18px;
}

h1{
	font-family: news-gothic-std, sans-serif!important;
	font-weight: 700!important;
	font-style: normal;
	font-size: 40px;
	text-transform: uppercase!important;
}

.hslide{
  font-family: helvetica-neue-lt-pro, sans-serif!important;
  font-weight: 300!important;
  font-style: normal;
  font-size: 100px;
  line-height: 100px;
}

h2.sppb-title-heading {
	font-weight: 300!important;
	font-size: 60px!important;
	line-height: 80px!important;
}

h2.sppb-addon-title {
  font-weight: 300!important;
  font-size: 60px!important;
  line-height: 80px!important;
}

.sppb-section .sppb-title-heading {
  line-height: 80px!important;
}

h2{
	font-family: helvetica-neue-lt-pro, sans-serif!important;
	font-weight: 400;
	font-style: normal;
	font-size: 30px;
}

@media (max-width: 767px) {
  h2.sppb-addon-title {
    font-size: 32px !important;
    line-height: 42px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  h2.sppb-addon-title {
    font-size: 44px !important;
    line-height: 58px !important;
  }
}

h3.sppb-addon-title.sppb-feature-box-title {
	font-size: 20px!important;
}

h3{
	font-family: news-gothic-std, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	text-transform: uppercase!important;
}

/********* buttons *********/
a.sppb-btn.sppb-btn-link {
  color: #636360 !important;
  text-decoration: none;
  background-color: transparent !important;
  border: none !important;
  transition: color 0.3s ease;
}

a.sppb-btn.sppb-btn-link:hover,
a.sppb-btn.sppb-btn-link:focus {
  color: #fe5000 !important;
  text-decoration: none;
}

a.sppb-btn.sppb-btn-link.sppb-btn-sm {
  padding: 0 !important;
}

#sppb-addon-1641883226808 .sppb-btn.sppb-btn-primary {
  border-radius: 2px;
  border: 0;
  font-size: 14px !important;
  color: #fff;
  text-transform: uppercase;
  padding: 13px 27px;
  float: right;
}

/******* top bar **********/
body.header-default #sp-top-bar {
    position: relative;
    background: #cecbba!important;
    border-bottom: 0px solid rgba(0, 0, 0, 0.0)!important;
}

#sp-top-bar #sp-top2 {
    text-align: right;
    padding-left: 0;
	color:#50533c!important;
}

#sp-top-bar #sp-top2 a {
	color:#50533c!important;
}

body.header-default .sp-select .sp-select-result:before {
    color: #50533c!important;
}

body.header-default .sp-select .sp-select-result span, body.header-default .sp-select .sp-select-result i {
       color: #50533c!important;
}

/***Hoofdmenu****/
body.header-default .sp-megamenu-parent.menu-slide-down .sp-has-child:hover > .sp-dropdown {
    top: 70px !important; /* sluit direct aan onder het menu-item */
}

body.header-default .icon-top-wrapper i {
    color: black;
	font-size: 18px;
	font-weight: bold;
}

.floox-top-search .top-search-wrapper .icon-top-wrapper {
    line-height: 70px;
}

body.header-default #sp-header {
    position: relative;
    background: #e8e6de!important;
    top: 0;
	height: 70px;
}

body.header-default #sp-header .logo {
    height: 70px; 
}

div#sp-menu {
    margin-top: 0px;
}

body.header-default .sp-megamenu-parent > li > a, body.header-default .sp-megamenu-parent > li > span {
    color: #bfbfbf;
    margin-top: 0px!important;
    line-height: 70px!important;
}

body.header-default .sp-megamenu-parent > li {
    height: 40px;
}

body.header-default #sp-header.menu-fixed .sp-megamenu-parent > li {
    height: 40px; 
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    display: inline-block;
    padding: 0 5px;
    line-height: 33px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.35px;
    color: #fff;
    margin: 0;
    border-radius: 2px;
    margin-top: 10px;
    font-weight: 600 !important;
	color: black!important;
}

/********** language switcher********/
.mod-languages {
    margin-top: 16px;
}

.sp-select .sp-select-result {
    padding: 0 0px 0 0px !important;
    text-align: left;
    position: relative;
}

/********* header-slider***********/
.slider-bottom-align {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 30px; /* pas aan naar wens */
}

/********* content nieuws**********/
/* Basis voor desktop */
.pull-left.entry-image.full-image {
  float: left;
  width: 50%;
  max-width: 500px;
  margin: 0 30px 30px 0;
}

/* Responsief voor tablets en mobiel */
@media (max-width: 991.98px) {
  .pull-left.entry-image.full-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px 0;
  }
}

/**********afbeeldingen nieuwscarousel***************/
.sppb-articles-carousel-img img {
  height: 250px; /* of een andere vaste waarde */
  width: 100%;
  object-fit: cover;
  display: block;
}

/************nieuwscarousel************************/
.sppb-articles-carousel-introtext {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

a.sppb-articles-carousel-link {
    height: 50px;
	line-height: 24px;
    font-weight: 400!important;
}

/* 3. Positioneer de pijlen naast de hele carousel */
.sppb-articles-carousel-wrap {
  display: flex;
  align-items: stretch;
  position: relative;
}

/* Zorg dat slick-list de juiste breedte krijgt */
.slick-list {
  flex: 1;
}

/* Pijlen links en rechts */
.sppb-articles-carousel-wrap .slick-arrow {
  position: static !important;
  align-self: center;
  font-size: 2rem;
  cursor: pointer;
  padding: 0 10px;
}

/* Responsive fix voor mobiel – pijlen boven carousel bij smalle breedte */
@media (max-width: 768px) {
  .sppb-articles-carousel-wrap {
    flex-direction: column;
  }

  .sppb-articles-carousel-wrap .slick-arrow {
    align-self: flex-end;
    margin-top: 10px;
  }
}

/************ animated heading***************/
.animated-heading-after-part{
	margin-left: 0px!important;
}

img.sppb-img-responsive {
    border-radius: 0px !important;
}

.sp-contact-info li {
    display: inline-block;
    margin: 0 14px;
    font-size: 16px;
    color: #fff;
    font-weight: 400 !important;
}

ul.social-icons > li a {
    color: #fff;
    font-size: 16px;
    font-weight: 400 !important;
}

div#sp-logo img {
	width:90%;
}

.sppb-slider-fullwidth-wrapper .sppb-slider-item-wrapper .sppb-slideshow-fullwidth-item .sppb-slideshow-fullwidth-item-bg {
  height: 100vh!important;
  padding-top: 315px;
  padding-bottom: 0;
  position: relative;
}

.button-zijderlaan .sp-slider-btn-text {
    display: block;
    color: #fff;
    background: #fe5000!important;
    padding: 10px 20px;
    transition-duration: .4s;
    transition-property: color, background;
    font-size: 16px;
    border-radius: 2px;
}

.boxshadow{
  box-shadow: 0 6px 12px -3px rgba(49, 41, 41, .1);
}

/**********nieuwsartikelen*********************/
/* (uitgeschakeld blok – indien nodig later activeren)
.com-content-article .sp-page-builder .sppb-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 1;
}
.com-content-article #sp-page-builder {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
*/

/************* formulieren***************************/

/**** Formuliergroep dynamisch veld voor herkeenin plaatsing formulier*****/ 

#sppb-addon-1761572424655 {
    display: none !important;
}




/* ---------- Basis layout / typografie ---------- */
#userForm{
  font-family: helvetica-neue-lt-pro, sans-serif;
  color:#43484d;
  max-width: 1170px;
  margin-inline: auto;
}
#userForm h1,#userForm h2,#userForm h3,
#userForm .form-label.formControlLabel{
  font-family: news-gothic-std, sans-serif;
}

/* Blokafstand en kolommen van RSForm */
#userForm .row{ row-gap: 1.25rem; }
#userForm .rsform-block{ margin-bottom: 1rem; }

/* Freetext afbeeldingen netjes schalen */
#userForm .rsform-type-freetext img{ max-width:100%; height:auto; }

/* Labels & required */
#userForm label.formControlLabel{ display:block; font-weight:600; margin:0 0 .4rem; }
#userForm strong.formRequired{ color:#fe5000; margin-left:.25rem; }

/* ---------- Inputs, selects, textarea ---------- */
#userForm .form-control,
#userForm .form-select{
  border:1px solid #CDCAB9;
  border-radius:10px;
  background:#fff;
}
#userForm .form-control::placeholder{ color:#8a8f94; }
#userForm .form-control:focus,
#userForm .form-select:focus{
  border-color:#fe5000;
  box-shadow:0 0 0 3px rgba(254,80,0,.15);
  outline:0;
}

/* Telefoon plugin veld */
#userForm .iti__tel-input.form-control{
  padding-left: 3rem; /* ruimte voor vlag */
  border-radius:10px;
}

/* Radios & checkboxes (Bootstrap 5) */
#userForm .form-check-input:focus{
  box-shadow:0 0 0 3px rgba(254,80,0,.15);
  border-color:#fe5000;
}
#userForm .form-check-input:checked{
  background-color:#fe5000;
  border-color:#fe5000;
}
#userForm .form-check-label{ cursor:pointer; }

/* File upload */
/*#userForm input[type="file"].form-control{
  padding:.5rem .75rem;
  border-radius:10px;
}*/


input[type="file"] {
  height: 30px;
  line-height: 16px;
}


/* ---------- Validatie / foutmeldingen ---------- */
#userForm .is-invalid,
#userForm .form-control.is-invalid,
#userForm .form-select.is-invalid{
  border-color:#cf4d4d;
  box-shadow:0 0 0 3px rgba(207,77,77,.12);
}
#userForm .formValidation .formNoError{ display:none; }
#userForm .formValidation .formError,
#rsform_error_4 .formRed{
  color:#cf4d4d;
  font-weight:700;
}
#rsform_error_4{ margin-bottom:1rem; }

/* ---------- Progress bar + tekst ---------- */
#rsform_progress_4{ text-align:left; margin-bottom: .75rem; }
#rsform_progress_4 em{ font-style:normal; }
#rsfpPctText,
#rsform_progress_4 em{
  font-weight:600;
  font-size:14px;
  font-family: news-gothic-std, sans-serif;
  color:#43484d;
}
#rsform_progress_4 .rsformProgressContainer{
  width:100%;
  height:6px;
  border:1px solid #CDCAB9;
  background:#E8E6DE;
  border-radius:999px;
  overflow:hidden;
  margin:0 0 12px;
}
#rsform_progress_4 .rsformProgressBar{
  height:6px;
  background:#fe5000;
}

/* ---------- Navigatieknoppen (Prev/Next) ---------- */
/* RSForm gebruikt id’s met spaties → attribute selectors */
#userForm .formControls .rsform-button[id$="Next"],
#userForm .formControls .btn[id$="Next"]{
  background:#fe5000;
  color:#fff;
  border:0;
  border-radius:2px;
  padding:17px 30px;
  line-height:1;
}
#userForm .formControls .rsform-button[id$="Prev"],
#userForm .formControls .btn[id$="Prev"]{
  background:#d44700;
  color:#fff;
  border:0;
  border-radius:2px;
  padding:12px 22px;
}
#userForm .formControls .btn:hover,
#userForm .formControls .btn:focus{
  filter:brightness(.92);
  color:#fff;
}

/* Tekst in knoppen uppercase + bold */
#userForm .formControls .rsform-button[id$="Next"],
#userForm .formControls .btn[id$="Next"],
#userForm .formControls .rsform-button[id$="Prev"],
#userForm .formControls .btn[id$="Prev"],
#userForm #Vezenden{
  text-transform: uppercase;
  font-weight:700;
  letter-spacing:.02em;
  font-family: news-gothic-std, sans-serif;
}

/* ---------- Submit-knop (laatste stap) ---------- */
#userForm #Vezenden.btn.btn-primary{
  background:#fe5000;
  border:0;
  border-radius:2px;
  padding:17px 30px;
  line-height:1;
  color:#fff;
}
#userForm #Vezenden.btn.btn-primary:hover,
#userForm #Vezenden.btn.btn-primary:focus{
  filter:brightness(.92);
  color:#fff;
}

/* ---------- Tooltips (Bootstrap 5) ---------- */
.tooltip .tooltip-inner{ background:#43484d; }
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{ border-top-color:#43484d; }

/* ---------- Kleine UI verfijningen ---------- */
#userForm .btn-group{ gap:.5rem; }
#userForm .small, #userForm small{ color:#6b7075; }

/* ---------- Responsiveness ---------- */
@media (max-width: 576px){
  #userForm .formControls .rsform-button[id$="Next"],
  #userForm .formControls .btn[id$="Next"],
  #userForm #Vezenden.btn.btn-primary{
    padding:14px 20px;
    font-size:13px;
  }
  #userForm .formControls .rsform-button[id$="Prev"],
  #userForm .formControls .btn[id$="Prev"]{
    padding:10px 16px;
    font-size:13px;
  }
  #userForm{ padding-inline: 12px; }
}

/* Knoppen rechts uitlijnen in de kolom */
#userForm .col-md-6 .formControls.btn-group{
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
}

@media (max-width: 576px){
  #userForm .col-md-6 .formControls.btn-group{ justify-content: center; }
}

/**************mediaqueries**************************/
@media (min-width: 1400px) {
    .sppb-container {
        max-width: 1140px!important;
    }
}

/* ============================================================
   MOBILE HEADER LAYOUT: logo | [hamburger + language selector]
   ============================================================ */

@media (max-width: 991.98px){

  /* === Structuur van de rij === */
  #sp-header .row{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
  }

  /* Logo links */
  #sp-logo{
    flex:0 0 50%;
    max-width:50%;
  }

  /* Menu (hamburger) rechts naast logo */
  #sp-menu{
    flex:0 0 25%;
    max-width:25%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding-right:6px;
  }

  /* Taal selector uiterst rechts */
  #sp-position1{
    flex:0 0 25%;
    max-width:25%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding-left:6px;
  }

  /* === Hamburger knop === */
  #offcanvas-toggler{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    font-size:28px;              /* groter icoon */
    color:#43484d !important;    /* donkergrijs */
    width:48px;                  /* grotere klikzone */
    height:48px;
    border-radius:4px;           /* subtiele afronding */
  }

  /* Hover/active effect voor feedback */
  #offcanvas-toggler:hover,
  #offcanvas-toggler:focus{
    background-color:rgba(67,72,77,0.1);
    color:#43484d !important;
  }

  body.header-default #offcanvas-toggler > i {
    color:#43484d !important;
}

  /* === Taal selector styling === */
  #sp-position1 .mod-languages{
    margin-top:0;
  }

  /* Tekst + icoon naast elkaar met ruimte ertussen */
  #sp-position1 .sp-select .sp-select-result{
    display:inline-flex;
    align-items:center;
    gap:10px;                    /* ruimte tussen tekst en icoon */
    padding:0 12px;              /* extra lucht rondom */
    height:70px;                 /* gelijk aan headerhoogte */
    line-height:1;
  }

  /* Icoon iets kleiner zodat hij netjes uitlijnt */
  #sp-position1 .sp-select .sp-select-result i{
    font-size:14px;
  }

  /* Dropdown netjes onder de balk */
  #sp-position1 .sp-select-dropdown{
    top:70px !important;
  }

  /* Dropdown-items met extra padding */
  #sp-position1 .sp-select .sp-select-dropdown li{
    padding:8px 12px;
  }
}

/* Desktop: herstel standaard grid */
@media (min-width: 992px){
  #sp-header .row{
    flex-wrap:wrap;
  }
}

/* =========================================
   LOGO CAROUSEL – MOBILE SIZE ADJUSTED
   ========================================= */
@media (max-width: 575.98px){

  .sppb-image-carousel-layout4.sppb-carousel-extended,
  .sppb-image-carousel-layout4 .sppb-carousel-extended-list,
  .sppb-image-carousel-layout4 .sppb-carousel-extended-outer-stage{
    height:auto !important;
    min-height:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  /* Grotere itemhoogte voor meer ruimte */
  .sppb-image-carousel-layout4 .sppb-carousel-extended-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:160px !important;       /* eerder 120px */
  }

  /* Logo’s groter, maar zonder overloop */
  .sppb-image-carousel-layout4 .sppb-carousel-extended-item img{
    max-height:200px;              /* eerder 80px */
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
  }

  .sppb-image-carousel-layout4 .sppb-carousel-extended-content-wrap{
    display:none !important;
  }
}

/* Tablet iets compacter houden */
@media (min-width: 576px) and (max-width: 991.98px){
  .sppb-image-carousel-layout4 .sppb-carousel-extended-item{ height:180px !important; }
  .sppb-image-carousel-layout4 .sppb-carousel-extended-item img{ max-height:140px; }
}


/* Swap taalkeuze en hamburger op mobiel */
@media (max-width: 991.98px){

  /* Volgorde binnen .row */
  #sp-logo     { order: 1; }
  #sp-position1{ order: 2; }
  #sp-menu     { order: 3; }

  /* Breedtes gelijk houden */
  #sp-logo{
    flex:0 0 50%;
    max-width:50%;
  }
  #sp-position1{
    flex:0 0 25%;
    max-width:25%;
    display:flex;
    align-items:center;
    justify-content:flex-start;   /* taal direct naast logo */
    padding-left:0;
    padding-right:6px;
  }
  #sp-menu{
    flex:0 0 25%;
    max-width:25%;
    display:flex;
    align-items:center;
    justify-content:flex-end;     /* hamburger helemaal rechts */
    padding-left:6px;
    padding-right:0;
  }

  /* Optioneel: dropdown-positie taal */
  #sp-position1 .sp-select-dropdown{
    top:70px !important;
    left:0;                       /* uitlijnen onder taalkeuze */
    right:auto;
  }
}

@media (max-width: 991.98px){
  #sp-position1{
    justify-content:flex-end;  /* zet hem verder naar rechts */
    padding-right:12px;        /* extra ruimte rechts */
  }
  #sp-position1 .sp-select .sp-select-result{
    padding-right:0;           /* voorkomt dubbel effect */
  }
}

/*********** Dynamische content – gelijke hoogte afbeeldingen ***********/
.sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper {
  width: 100%;
  height: 240px; /* pas hoogte aan naar wens, bv. 220–300px */
  overflow: hidden;
}

.sppb-dynamic-content-collection__item .sppb-dynamic-content-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper {
    height: 200px; /* iets lager op mobiel */
  }
}




#section-id-OWndZ0x9XDJppCHu6N0ua { scroll-margin-top: 140px; }
#section-id-1761819164037        { scroll-margin-top: 140px; }

.article-navigation { margin-top:30px; }
.article-navigation__inner { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.article-navigation a { background:#fe5000; color:#fff; padding:10px 16px; border-radius:2px; text-decoration:none; }
.article-navigation a:hover { filter:brightness(.92); color:#fff; }
.article-navigation__title { margin:0 8px; font-weight:600; }



/* Overschrijft de inline addon-specifieke stijlen volledig */
#sppb-addon-WgY9aP3CvOizgfFZFcvVV.sppb-addon .sppb-gallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
}

/* Forceer SP Page Builder gallery-afmetingen op elk scherm */
:is(#sppb-addon-WgY9aP3CvOizgfFZFcvVV, .equal-gallery) .sppb-gallery img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* Desktop: tegels even hoog maken */
@media (min-width: 992px) {
  :is(#sppb-addon-WgY9aP3CvOizgfFZFcvVV, .equal-gallery) .sppb-gallery img {
    height: 100% !important;
  }
}


/* --- Eigen overlay en logo op hover in gallery --- */
.sppb-addon-gallery .sppb-gallery li a:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7); /* zachtere transparante laag */
  backdrop-filter: blur(2px);   /* subtiele onscherpte */
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Logo als overlay-icoon */
.sppb-addon-gallery .sppb-gallery li a:after {
  content: "";
  position: absolute;
  inset: 0;
  width: 80px;
  height: 80px;
  margin: auto;
  background: url("http://62.84.247.202/~zijderlaan/images/Algemeen/zijderlaan-logo-icoon.png") center center no-repeat;
  background-size: contain;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

/* Hover-effect: overlay zichtbaar + logo inzoomen */
.sppb-addon-gallery .sppb-gallery li a:hover:before {
  opacity: 0.6;
}

.sppb-addon-gallery .sppb-gallery li a:hover:after {
  opacity: 1;
  transform: scale(1);
}



/*****************************************************************************************/

.rsform-block.rsform-block-privacy-tekst.rsform-type-freetext {
  margin-top: -25px!important;
}


.dc-filter-btn {
  color: #fe5000 !important;
  font-weight: 600 !important;
  outline: none;
  border: none;
  cursor: pointer;
  background-color: transparent !important;
  padding: 0px !important;
  display: inline-block;
  text-align: center;
  transition: all 0.15s ease-in-out;
}


.sppb-panel {
    background-color: transparent!important;
    border: 0px solid transparent !important;
    border-top-width: 0;
}

.sppb-panel-body.sppb-addon-dynamic-content-filter-item-content {
    background-color: white !important;
}

button.sppb-reset-button-styles.sppb-w-full.sppb-panel-heading.sppb-addon-dynamic-content-filter-item-title{
      background: none;
    border-bottom: 0px solid transparent !important;
}

.sppb-panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px !important;
    font-weight: bolder;
}

.sppb-panel-heading {
    padding: 10px 30px 10px 0px !important;
}

/* ------------------------------------------------------
   ZIJDERLAAN • FILTERTITELS OP 1 HORIZONTALE LIJN
   ------------------------------------------------------ */

.sppb-addon-dynamic-content-filter-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 40px !important;
}

.sppb-addon-dynamic-content-filter-item {
    display: flex !important;
    align-items: center !important;
}

.sppb-panel-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* ------------------------------------------------------
   ZIJDERLAAN • LOCATIE / SPECIALISME / RESET OP 1 LIJN
   ------------------------------------------------------ */

/* 1. De lijst naast elkaar zetten */
.sppb-addon-dynamic-content-filter-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 40px !important;
}

/* 2. Elk item dwingen om GEEN blok/100% breed te zijn */
.sppb-addon-dynamic-content-filter-item {
    width: auto !important;
    display: inline-flex !important;
}

/* 3. De knoppen zelf op 1 lijn houden */
.sppb-panel-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
}


/* ------------------------------------------------------
   ZIJDERLAAN – FIX: accordion opent maar titels blijven
   netjes bovenaan uitgelijnd
-------------------------------------------------------*/

/* Titel en pijl altijd bovenaan in de container */
.sppb-addon-dynamic-content-filter-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Panel-heading blijft bovenaan, wordt niet meer gecentreerd */
.sppb-panel-heading {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Panel-body direct onder de titel, zonder verticale centrering */
.sppb-panel-body,
.sppb-addon-dynamic-content-filter-item-content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Zorgt dat het opengeklapte paneel niet probeert te centreren */
.sppb-panel {
    display: block !important;
}

/* FILTERS ALTIJD OP 1 LIJN — ook wanneer panels open zijn */
.sppb-addon-dynamic-content-filter-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 50px !important;
}

/* Elk filterblok mag niet breken naar een nieuwe regel */
.sppb-addon-dynamic-content-filter-item {
    flex: 0 0 auto !important;
}


button.sppb-addon-dynamic-content-filter-reset-btn-alt.dc-filter-btn.dc-filter-btn-custom.dc-filter-btn-square.dc-filter-btn-selected {
    margin-top: 9px;
}

/* MOBIEL: filters onder elkaar */
@media (max-width: 991px) {

    /* container wordt kolom */
    .sppb-addon-dynamic-content-filter-list {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1px !important;
    }

    /* elk item volle breedte */
    .sppb-addon-dynamic-content-filter-item {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* titel en arrow netjes links */
    .sppb-panel-heading {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}


.btn-primary a{
  color: white !important;

}

@media (max-width: 768px) {
    .sppb-dynamic-content-collection {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .sppb-dynamic-content-collection__item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-bottom: 30px !important;
    }
}


/* 1. Binnen een blok met class .customicon:
      overschrijf Font Awesome en dwing IcoMoon af */
.customicon i[class*="icon-"]:before,
.customicon .fa[class*=" icon-"]:before {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
        margin-left: -20px;
}

/* 2. Jouw specifieke icoon */
.customicon .icon-zijdelaan-vrachtwagen:before {
    content: "\e900" !important;
}