/* 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}}


/* ==========================================================================
   Uitsnede van een foto kiezen (object-position)

   Bij een raster met een vaste verhouding wordt elke foto bijgesneden. De
   browser doet dat standaard vanuit het midden, en dan valt bij een staande
   foto de bovenkant of de onderkant weg. Met deze klassen kies je per foto
   welk deel in beeld blijft.

   Gebruik: selecteer de afbeelding in de builder, ga naar Geavanceerd en zet
   de klasse in het veld CSS-klassen. Bijvoorbeeld: sm-focus-boven

   De klasse staat twee keer in de selector. De rasteropmaak van een sectie
   wordt met een even zware selector geschreven en laadt na deze CSS; met een
   dubbele klasse winnen we zonder !important.
   ========================================================================== */
.sm-focus-midden.sm-focus-midden img{object-position:50% 50%}
.sm-focus-boven.sm-focus-boven img{object-position:50% 0}
.sm-focus-onder.sm-focus-onder img{object-position:50% 100%}
.sm-focus-links.sm-focus-links img{object-position:0 50%}
.sm-focus-rechts.sm-focus-rechts img{object-position:100% 50%}
.sm-focus-linksboven.sm-focus-linksboven img{object-position:0 0}
.sm-focus-rechtsboven.sm-focus-rechtsboven img{object-position:100% 0}
.sm-focus-linksonder.sm-focus-linksonder img{object-position:0 100%}
.sm-focus-rechtsonder.sm-focus-rechtsonder img{object-position:100% 100%}