/* SM Effects 2.0.0 | site: Multi-Vastgoed Service
   Alleen voor deze site. De kern staat in sm-effects.css. */

/* Galerij-stagger op element-id, want deze containers dragen .sm-fx-stagger niet. */
@media (max-width:767px){
html.sm-js-fx .elementor-element-mvsgrid>.e-con-inner>.elementor-widget:nth-child(2n).sm-in,
html.sm-js-fx .elementor-element-svgrid>.e-con-inner>.elementor-widget:nth-child(2n).sm-in,
html.sm-js-fx .elementor-element-ovgrid>.e-con-inner>.elementor-widget:nth-child(2n).sm-in{transition-delay:.09s}
}
@media (min-width:768px){
html.sm-js-fx .elementor-element-mvsgrid>.e-con-inner>.elementor-widget:nth-child(3n+2).sm-in,
html.sm-js-fx .elementor-element-svgrid>.e-con-inner>.elementor-widget:nth-child(3n+2).sm-in,
html.sm-js-fx .elementor-element-ovgrid>.e-con-inner>.elementor-widget:nth-child(3n+2).sm-in{transition-delay:.09s}
html.sm-js-fx .elementor-element-mvsgrid>.e-con-inner>.elementor-widget:nth-child(3n+3).sm-in,
html.sm-js-fx .elementor-element-svgrid>.e-con-inner>.elementor-widget:nth-child(3n+3).sm-in,
html.sm-js-fx .elementor-element-ovgrid>.e-con-inner>.elementor-widget:nth-child(3n+3).sm-in{transition-delay:.18s}
}

/* Hero-overlay: gericht verloop, zwaar waar de tekst staat, weg waar het werk
   te zien is. Elementor 4 tekent overlays met --overlay-opacity plus een
   ::before op de container; er is geen aparte overlay-div. De id-class staat
   drie keer in de selector om Elementor's eigen regels te verslaan zonder
   !important. Nieuwe hero erbij? Voeg zijn id aan beide lijsten toe.
   ccc5742 home | 0b64727 services | 8e31f84 contact | 311ceb4 over ons */
.elementor-element.elementor-element-ccc5742.elementor-element-ccc5742.elementor-element-ccc5742,
.elementor-element.elementor-element-0b64727.elementor-element-0b64727.elementor-element-0b64727,
.elementor-element.elementor-element-8e31f84.elementor-element-8e31f84.elementor-element-8e31f84,
.elementor-element.elementor-element-311ceb4.elementor-element-311ceb4.elementor-element-311ceb4{
--overlay-opacity:1;
--mvs-hero-overlay:
radial-gradient(110% 85% at 90% 4%,rgba(33,150,243,.20) 0%,rgba(33,150,243,0) 50%),
linear-gradient(to right,rgba(4,20,37,.58) 0%,rgba(4,20,37,.22) 38%,rgba(4,20,37,0) 68%),
linear-gradient(to top,rgba(4,20,37,.88) 0%,rgba(4,20,37,.62) 22%,rgba(4,20,37,.28) 45%,rgba(4,20,37,.06) 68%,rgba(4,20,37,0) 85%);
}
.elementor-element.elementor-element-ccc5742.elementor-element-ccc5742.elementor-element-ccc5742::before,
.elementor-element.elementor-element-0b64727.elementor-element-0b64727.elementor-element-0b64727::before,
.elementor-element.elementor-element-8e31f84.elementor-element-8e31f84.elementor-element-8e31f84::before,
.elementor-element.elementor-element-311ceb4.elementor-element-311ceb4.elementor-element-311ceb4::before{
background-color:transparent;
background-image:var(--mvs-hero-overlay);
}
/* mobiel: tekst loopt over de volle breedte, dus alleen van onderaf en iets steviger */
@media (max-width:767px){
.elementor-element.elementor-element-ccc5742.elementor-element-ccc5742.elementor-element-ccc5742,
.elementor-element.elementor-element-0b64727.elementor-element-0b64727.elementor-element-0b64727,
.elementor-element.elementor-element-8e31f84.elementor-element-8e31f84.elementor-element-8e31f84,
.elementor-element.elementor-element-311ceb4.elementor-element-311ceb4.elementor-element-311ceb4{
--mvs-hero-overlay:
radial-gradient(120% 55% at 80% 2%,rgba(33,150,243,.16) 0%,rgba(33,150,243,0) 55%),
linear-gradient(to top,rgba(4,20,37,.92) 0%,rgba(4,20,37,.70) 24%,rgba(4,20,37,.34) 48%,rgba(4,20,37,.08) 70%,rgba(4,20,37,0) 88%);
}
}

/* Het highlighted-text widget stript het class-attribuut van een <br>, dus
   break-mobile werkt daar niet: de break zou op elk apparaat staan. Daarom hier
   andersom: de break staat altijd in de HTML en wij verbergen hem boven mobiel. */
@media (min-width:768px){
  .elementor-element-defb7cc br{display:none}
}

/* Mobiele maten bij de handmatige breaks. Een break zet de juiste woordgroep
   op een regel, maar die groep moet er ook OP passen. Gemeten op 411 px hadden
   deze drie maar 5 tot 8 procent speling; op een toestel dat de letters een
   fractie breder tekent klapt de regel dan alsnog om en staat het lelijker dan
   zonder break. Deze maten geven ~15 procent speling.

   De element-id-class staat twee keer in de selector. Het thema zet de
   kopmaten met twee classes en uicore-global.css laadt NA ons, dus met
   gelijke specificiteit wint het thema. Twee keer dezelfde class geeft ons
   drie classes en dus voorrang, zonder !important.

   Verander je de tekst van een van deze koppen, meet dan opnieuw. */
@media (max-width:767px){
  .elementor-element-ovm-heading.elementor-element-ovm-heading .elementor-heading-title{font-size:27px}
  .elementor-element-bff692c.elementor-element-bff692c .elementor-heading-title{font-size:26px}
  .elementor-element-defb7cc.elementor-element-defb7cc .ui-e--highlighted-text{font-size:21px}
}

/* Contentbreedte 1120 in plaats van 1176. Het thema zet dit als
   --content-width: min(100%, min(95%, 1176px)) op de containers, niet
   Elementor zelf, dus de kit-instelling haalt hier niets uit. De class staat
   twee keer omdat Elementor's frontend.min.css dezelfde .e-con gebruikt en NA
   ons laadt; met twee classes winnen wij zonder !important. Zelfde vorm
   aangehouden zodat de 95%-regel voor smallere schermen blijft werken. */
.e-con.e-con{--content-width:min(100%,min(95%,1120px))}


/* ==========================================================================
   Contactpagina: eigen sluier, geen verloop van onderaf.

   Deze sectie is geen gewone hero. De tekst EN het formulier zitten er samen
   in, waardoor hij ruim 2200 px hoog wordt. Het hero-verloop hierboven loopt
   van onderaf omhoog en is gemaakt voor 600 a 900 px. Uitgerekt over deze
   hoogte valt de dekking in het midden vrijwel weg, precies waar de kop, de
   tekst en de contactregels staan. Vandaar hier een vlakke sluier met een
   klein verloop erin, zodat het over de hele hoogte leesbaar blijft.

   Kleur is dezelfde merk-navy als de rest, alleen zwaarder ingezet.
   ========================================================================== */
.elementor-element.elementor-element-8e31f84.elementor-element-8e31f84.elementor-element-8e31f84{
    --mvs-hero-overlay:
        radial-gradient(90% 40% at 85% 4%,
            rgba(33, 150, 243, .16) 0%,
            rgba(33, 150, 243, 0) 60%),
        linear-gradient(to bottom,
            rgba(4, 20, 37, .82) 0%,
            rgba(4, 20, 37, .76) 35%,
            rgba(4, 20, 37, .74) 65%,
            rgba(4, 20, 37, .80) 100%);
}

/* Op mobiel staat de tekst over de volle breedte en is het scherm smaller,
   dus daar mag hij nog een tik steviger. */
@media (max-width: 767px){
    .elementor-element.elementor-element-8e31f84.elementor-element-8e31f84.elementor-element-8e31f84{
        --mvs-hero-overlay:
            linear-gradient(to bottom,
                rgba(4, 20, 37, .86) 0%,
                rgba(4, 20, 37, .80) 40%,
                rgba(4, 20, 37, .78) 70%,
                rgba(4, 20, 37, .84) 100%);
    }
}