/* Homepage slider (ook gebruikt in de admin-voorvertoning) */
.bjs{--bj-red:#b80818;--bj-yellow:#ffb200;--bj-dark:#282932;--bj-cream:#f7f1e8}
/* ---------- slider ---------- */
.bjs{position:relative;width:100%;height:630px;overflow:hidden;background:var(--bj-cream);--bjs-scale:1}
.bjs-track{position:absolute;inset:0}
.bjs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s;background-size:cover!important;background-position:center!important}
.bjs-slide.is-active{opacity:1;visibility:visible;transition:opacity .8s ease}
.bjs-grid{position:absolute;left:50%;top:0;width:1024px;height:630px;margin-left:-512px;transform-origin:top center;font-family:Roboto,"Poppins",sans-serif}
.bjs .bjs-grid{scale:var(--bjs-scale)}
.bjs-l{box-sizing:border-box;white-space:nowrap}
.bjs-btn,.bjs-text{display:block}
a.bjs-link{text-decoration:none;cursor:pointer;transition:filter .2s,box-shadow .2s}
a.bjs-link:hover{filter:brightness(1.12);color:#fff}
a.bjs-link:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* lagen komen gestaffeld binnen bij elke slide (zoals in Slider Revolution) */
.bjs.is-ready .bjs-slide .bjs-l{opacity:0;translate:0 26px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.bjs.is-ready .bjs-slide.is-active .bjs-l{opacity:1;translate:0 0;transition-delay:var(--d,0ms)}
.bjs-arrow{position:absolute;top:50%;z-index:20;width:40px;height:40px;min-height:0;padding:0;line-height:1;margin-top:-20px;border:0;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:background .2s,color .2s}
.bjs-arrow:hover,.bjs-arrow:focus-visible{background:var(--bj-red);color:#fff}
.bjs-prev{left:40px}
.bjs-next{right:40px}
.bjs-dots{position:absolute;left:0;right:0;bottom:16px;z-index:20;display:flex;justify-content:center;gap:8px}
.bjs-dot{width:10px;height:10px;padding:0;border:2px solid #fff;border-radius:10px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.bjs-dot.is-active{width:28px;background:#fff}
@media (max-width:767px){
  .bjs{height:700px}
  .bjs-grid{width:480px;height:700px;margin-left:-240px}
  .bjs-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bjs-slide,.bjs .bjs-l{transition:none!important;translate:none!important}
}
.bjs--single .bjs-arrow,.bjs--single .bjs-dots{display:none}