/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

/* .scroll {
  position: relative;
  will-change: transform;
  transition: none; /* geen standaard animatie */
} */



.magazine-origin-content {
    overflow-x: clip;
}




 /* Container die alles bevat */
.elementor.elementor-282,
.elementor.elementor-260,
.elementor.elementor-285,
.elementor.elementor-287{
  position: relative;
  overflow-x: clip !important; /* behoud originele overflow-x */
}

/* Ieder .scroll-blok */
.elementor.elementor-282 .scroll,
.elementor.elementor-260 .scroll,
.elementor.elementor-285 .scroll,
.elementor.elementor-287 .scroll {
  position: sticky;
  top: 0;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;

  /* Startpositie buiten beeld */
  transform: translateX(100%);
  opacity: 0;

  /* Smooth animatie voor zowel load als scroll */
  transition: transform 0.7s ease, opacity 0.7s ease;

  z-index: 0;
}

/* Klasse om de animatie te triggeren */
.elementor.elementor-282 .scroll.animate,
.elementor.elementor-260 .scroll.animate,
.elementor.elementor-285 .scroll.animate,
.elementor.elementor-287 .scroll.animate {
  transform: translateX(0);
  opacity: 1;
}