/* SM Effects 2.0.0 KERN | Schrevemarketing
   Werkt op elke Elementor-site met main.entry-content.
   Site-eigen aanvullingen: assets/sites/<sleutel>.css */
html.sm-js-fx:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:not(:first-child) .elementor-widget{opacity:.2;transform:translateY(1.25rem)}
html.sm-js-fx:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:not(:first-child) .elementor-widget.sm-in{opacity:1;transform:translateY(0);transition-property:opacity,transform;transition-duration:.45s;transition-timing-function:cubic-bezier(.165,.84,.44,1)}
html.sm-js-fx:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:not(:first-child) .elementor-widget-text-editor.sm-in{transition-delay:.08s}
html.sm-js-fx:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:not(:first-child) .elementor-widget-button.sm-in{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
html.sm-js-fx main.entry-content .elementor .elementor-widget{opacity:1!important;transform:none!important;transition:none!important}
}
@media (prefers-reduced-motion:no-preference){
@keyframes sm-hero-op{from{opacity:.2;transform:translateY(1.25rem)}to{opacity:1;transform:translateY(0)}}
html:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:first-child .elementor-widget{animation:sm-hero-op .6s cubic-bezier(.165,.84,.44,1) both;animation-delay:.1s}
html:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:first-child .elementor-widget-text-editor{animation-delay:.28s}
html:not(.sm-fx-uit) main.entry-content .elementor>.elementor-element:first-child .elementor-widget-button{animation-delay:.46s}
}


/* Regelafbreking. De browser verdeelt de woorden zelf zo dat de regels
   ongeveer even lang worden, in plaats van een laatste regel met een los
   woord. Werkt op elke schermbreedte, dus zonder handmatige breaks per
   apparaat. Browsers passen balance toe tot een handvol regels en vallen
   daarboven terug op normaal; dat is precies het bereik van een kop.
   pretty doet hetzelfde lichter voor lopende tekst: geen los woord op de
   laatste regel. Wordt genegeerd door browsers die het niet kennen. */
main.entry-content h1,
main.entry-content h2,
main.entry-content h3,
main.entry-content .elementor-heading-title{text-wrap:balance}
main.entry-content p,
main.entry-content li{text-wrap:pretty}


/* Responsive breaks. Deze klassen stonden alleen in de admin-CSS, dus op de
   site zelf deden ze niets: een <br class="break-mobile"> brak op ELK apparaat.
   Zet in de tekst altijd een spatie VOOR de <br>, anders plakken de zinnen aan
   elkaar zodra de break verborgen is. */
.break-desktop,.break-tablet,.break-mobile,.break-tablet-mobile,.break-desktop-tablet{display:none}
@media (min-width:1025px){.break-desktop,.break-desktop-tablet{display:block}}
@media (min-width:768px) and (max-width:1024px){.break-tablet,.break-tablet-mobile,.break-desktop-tablet{display:block}}
@media (max-width:767px){.break-mobile,.break-tablet-mobile{display:block}}

/* Een handmatige break is een bewuste keuze, dus daar moet balance zich niet
   mee bemoeien. Maar ALLEEN op de breedte waar die break ook echt zichtbaar is.
   Is hij verborgen, dan mag balance gewoon zijn werk doen. De eerste versie
   hiervan zette balance overal uit zodra er ergens een break in stond, en dat
   maakte desktop juist slechter. */
main.entry-content :is(h1,h2,h3,.elementor-heading-title):has(br:not([class*="break-"])){text-wrap:wrap}
@media (max-width:767px){
  main.entry-content :is(h1,h2,h3,.elementor-heading-title):has(br.break-mobile,br.break-tablet-mobile){text-wrap:wrap}
}
@media (min-width:768px) and (max-width:1024px){
  main.entry-content :is(h1,h2,h3,.elementor-heading-title):has(br.break-tablet,br.break-tablet-mobile,br.break-desktop-tablet){text-wrap:wrap}
}
@media (min-width:1025px){
  main.entry-content :is(h1,h2,h3,.elementor-heading-title):has(br.break-desktop,br.break-desktop-tablet){text-wrap:wrap}
}


/* Foto-raster van links naar rechts laten binnenkomen: zet .sm-fx-stagger
   op de gridcontainer. */
@media (max-width:767px){html.sm-js-fx .sm-fx-stagger>.e-con-inner>.elementor-widget:nth-child(2n).sm-in{transition-delay:.09s}}
@media (min-width:768px){html.sm-js-fx .sm-fx-stagger>.e-con-inner>.elementor-widget:nth-child(3n+2).sm-in{transition-delay:.09s}
html.sm-js-fx .sm-fx-stagger>.e-con-inner>.elementor-widget:nth-child(3n+3).sm-in{transition-delay:.18s}}