.elementor-kit-7{--e-global-color-primary:#25B1E3;--e-global-color-secondary:#DAEFF7;--e-global-color-text:#022F40;--e-global-color-accent:#25B1E3;--e-global-typography-primary-font-family:"Sora";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Barlow Condensed";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Sora";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Barlow Condensed";--e-global-typography-accent-font-weight:500;background-color:#EFF4F6;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --darkblue:#022F40; --light:#F6FAFB; --blue:#25B1E3; }
/* Start custom CSS */.pll-parent-menu-item svg, .pll-parent-menu-item .sub-arrow {display:none !important;}

.pll-parent-menu-item a {background:#022F40 !important; color: #F7F7F7 !important;}

.menu-item-70 a {background: url(https://viabuild.watsondev.be/wp-content/uploads/2026/08/bluegradient.jpg) !important;}

.menu-item {background: white;}

.menu-item-70 a {color:#F7F7F7 !important; padding:0 2vw 0 2vw  !important; }

.menu-item-69 a {padding-right:2vw !important}

.darkmenu {width:10vw !important; height:4vw !important; background:#022F40 !important; margin-left:-7.5vw !important; z-index:4}

.menu-item-93 {
    position: relative;
}

.menu-item-93 > .sub-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    left: 0 !important;
    right: auto !important;
    top: 100% !important;

    margin-top: 0 !important;
    box-sizing: border-box;
}

.menu-item-93 > .sub-menu > li,
.menu-item-93 > .sub-menu > li > a {
    width: 100%;
    box-sizing: border-box;
}

 .menu-item-70:hover a
{border-radius:.8vw !important;}

.menu-item-70 {background:white !important;}

.menu-item-70 a {background:#25B1E3}

.menu-item-70:hover {padding:.6vw !important; margin-left:-.6vw; padding-left:0 !important}



.menu-item-93 a:hover {color:#25B1E3 !important}


.lang-item a {font-family: 'Sora' !important; font-size:0.93vw !important; font-weight: 400 !important; text-align:center !important; margin:0 !important;letter-spacing:-2% !important;}

.lang-item, .lang-item a {height:3.6vw !important;}

.menu-item-93 > .sub-menu > .lang-item > a {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    padding-left: 0 !important;
    padding-right: .5vw !important;

    box-sizing: border-box !important;
}

/* =========================================
   LANGUAGE SWITCHER
   Active language visible
   Other languages slide out to the right
   ========================================= */

/* =========================================
   LANGUAGE SWITCHER
   Active language visible
   Other languages slide out to the right
   ========================================= */

@media (min-width: 768px) {

    /* Alle language items */
    .elementor-nav-menu--main .lang-item {background:#022F40; 
        flex: 0 0 auto !important;height:4vw !important;

        display: flex !important;
        align-items: stretch !important;

        overflow: hidden;
        margin: 0 !important;

        transition:
            max-width .9s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease,
            transform .3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    .elementor-nav-menu--main .lang-item a {color:#F6FAFB !important}
.elementor-nav-menu--main .lang-item:hover a {color:#25B1E3 !important}

    /* =========================================
       ACTIEVE TAAL
       ========================================= */

    .elementor-nav-menu--main .lang-item.current-lang {
        max-width: 100px;

        opacity: 1;
        transform: translateX(0);

        overflow: visible;

        order: 1;
    }


    /* =========================================
       NIET-ACTIEVE TALEN
       ========================================= */

    .elementor-nav-menu--main .lang-item:not(.current-lang) {
        max-width: 0;

        opacity: 0;
        transform: translateX(-10px);

        pointer-events: none;

        order: 2;
    }


    /* =========================================
       OPEN OP HOVER
       ========================================= */

    .elementor-nav-menu--main
    .elementor-nav-menu:has(> .lang-item:hover)
    > .lang-item:not(.current-lang),

    .elementor-nav-menu--main
    .elementor-nav-menu:has(> .lang-item:focus-within)
    > .lang-item:not(.current-lang) {

        max-width: 100px;

        opacity: 1;
        transform: translateX(0);

        pointer-events: auto;
    }


    /* =========================================
       LANGUAGE LINKS
       Verticaal + horizontaal centreren
       ========================================= */

    .elementor-nav-menu--main .lang-item > a {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        align-self: stretch !important;

        height: 100% !important;
        min-height: 100% !important;

        white-space: nowrap !important;
        text-align: center !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }
}

.btn a, .btn a svg, .navv a , .smallcta, .smallcta a, .smallcta a svg, .ftr, .menu-item-70, .largecta a svg, .elementor-form .elementor-field-type-submit .elementor-button svg, .elementor-button-text {transition:200ms !important}

.btn a svg, .elementor-form .elementor-field-type-submit .elementor-button svg {width:0!important}

.elementor-form .elementor-field-type-submit {margin-top:1vw}


.elementor-form .elementor-field-type-submit:hover .elementor-button-text {color:#F6FAFB; margin-left:.5vw;}

.elementor-form textarea {padding-top:1vw}

.elementor-form input {padding-top:1vw; padding-bottom:1vw;}

.btn a, .elementor-form .elementor-field-type-submit .elementor-button {padding-left:.5vw !important} 
.btn a:hover, .elementor-form .elementor-field-type-submit .elementor-button:hover {border-radius:8px !important; padding-left:1.2vw !important}

.btn a:hover svg, .elementor-form .elementor-field-type-submit .elementor-button:hover svg{width:1vw!important}


.smallcta a svg {opacity:1; width:1.2vw; margin-top:-.15vw; margin-left:.5vw}

.largecta a svg {opacity:1; width:3.8vw; margin-left:1.5vw}

footer .smallcta a svg, .contact1 .smallcta a svg {opacity:.5;}

footer .smallcta a svg {margin-left:.2vw}

.smallcta a:hover svg {transform: rotate(45deg); margin-left:.8vw;margin-top:0;}


.largecta a:hover svg {transform: rotate(45deg); margin-left:2.6vw;margin-top:.3vw; margin-bottom:-.3vw;}

footer .smallcta a:hover svg { margin-left:.6vw}

.smallcta a:hover {padding-left:.5vw !important}


@media(max-width:767px) {
    
    .smallcta a svg {width:3.1vw; margin-top:-.1vw; margin-left:1vw}
    
   footer .smallcta a svg {opacity:.5}
    
    .smallcta a:hover svg {margin-left:2vw;}
    
    .largecta a {text-align: left !important;}

.largecta a svg {width:8vw;
}

.largecta a:hover svg {transform: none !important;margin-top:none; margin-bottom:.2vh !important;margin-left:1.5vw;}

    .elementor-form .elementor-field-type-submit {margin-top:4vw}


.elementor-form textarea {padding-top:3vw; padding-left:3vw}

.elementor-form input {padding-top:1vw; padding-bottom:1vw;padding-left:3vw}

.btn a, .elementor-form .elementor-field-type-submit .elementor-button {padding-left:2vw !important; padding-right:4vw !important} 

.btn a:hover svg, .elementor-form .elementor-field-type-submit .elementor-button:hover svg {width:3vw!important; margin-left:2vw}
    
}

.footernavv a, .footernavv {font-family:'Sora', sans-serif; color:#F6FAFB !important; line-height:160% !important; font-size:.8vw; font-weight:300; }

.footernavvextra, .footernavvextra a, .footernavvextra2 {font-family:'Sora', sans-serif; color:#F6FAFB !important; line-height:160% !important; font-size:.65vw; font-weight:300; text-transform: uppercase !important; letter-spacing:-1%}


@media(min-width:1025px) {
    
.ftr:hover {margin-left:1vw;width:98vw; margin-right:1vw}

.ftr:hover div {border-radius: 0.8vw .8vw 0 0 !important}
    
    
}

@media(max-width:767px) {
    
   .footernavv a, .footernavv {line-height:160% !important; font-size:2.5vw;}

.footernavvextra, .footernavvextra a, .footernavvextra2 {font-size:2vw; font-weight:300; text-transform: uppercase !important; letter-spacing:-.5%;} 
    
}




/* ==========================================================
   ONE-TIME MASKED IMAGE ENTRANCE
   ========================================================== */


/* Alleen verbergen wanneer onze JS effectief actief is */
html.has-reveal-js .reveal-top-down,
html.has-reveal-js .reveal-bottom-up {
    will-change: clip-path;
}


/* ----------------------------------------------------------
   TOP → BOTTOM
   ---------------------------------------------------------- */

html.has-reveal-js .reveal-top-down {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);

    transition:
        clip-path 7.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
        -webkit-clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}



/* ----------------------------------------------------------
   BOTTOM → TOP
   ---------------------------------------------------------- */

html.has-reveal-js .reveal-bottom-up {
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);

    transition:
        clip-path 5.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
        -webkit-clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}


/* ----------------------------------------------------------
   REVEALED
   ---------------------------------------------------------- */

html.has-reveal-js .reveal-top-down.is-revealed,
html.has-reveal-js .reveal-bottom-up.is-revealed {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html.has-reveal-js .reveal-top-down,
    html.has-reveal-js .reveal-bottom-up {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transition: none !important;
    }
}



/* ==========================================================
   ATF INTRO REVEAL
   ========================================================== */

.atf {
    position: relative;
    z-index: 2;
}


/* Exact masker rond de echte SVG */
html.atf-intro-ready .atf {
    clip-path: inset(
        var(--atf-mask-top, 50%)
        var(--atf-mask-right, 50%)
        var(--atf-mask-bottom, 50%)
        var(--atf-mask-left, 50%)
    );

    -webkit-clip-path: inset(
        var(--atf-mask-top, 50%)
        var(--atf-mask-right, 50%)
        var(--atf-mask-bottom, 50%)
        var(--atf-mask-left, 50%)
    );

    will-change: clip-path;

    transition:
        clip-path 1.8s cubic-bezier(0.76, 0, 0.24, 1),
        -webkit-clip-path 1.8s cubic-bezier(0.76, 0, 0.24, 1);
}


/* Volledig openen */
html.atf-intro-ready .atf.atf-is-revealed {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}


/* ==========================================================
   BLUE SVG
   ========================================================== */

.atf-square {
    position: absolute !important;

    width: 10vw !important;
    height: 10vw !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%)
        translate3d(0, var(--square-stick-y, 0px), 0) !important;

    z-index: 100 !important;

    pointer-events: none;

    /* BELANGRIJK */
    transition: none !important;

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.atf-square {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}



.atf-square svg,
.atf-square img {
    display: block;
    width: 100% !important;
    height: 100% !important;
}


/* MOBILE */
@media (max-width: 767px) {

    .atf-square {
        width: 18vw !important;
        height: 18vw !important;
    }
}


/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {

    html.atf-intro-ready .atf {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transition: none !important;
    }
}




/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    /*
     * 10vw wordt op mobiel erg klein.
     * Daarom bijvoorbeeld 18vw.
     */

    html.atf-intro-ready .atf {
        clip-path: inset(
            calc(50% - 9vw)
            calc(50% - 9vw)
            calc(50% - 9vw)
            calc(50% - 9vw)
        );

        -webkit-clip-path: inset(
            calc(50% - 9vw)
            calc(50% - 9vw)
            calc(50% - 9vw)
            calc(50% - 9vw)
        );
    }

    html.atf-intro-ready .atf.atf-is-revealed {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }

    .atf-square {
        width: 18vw !important;
        height: 18vw !important;
    }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html.atf-intro-ready .atf {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transition: none !important;
    }

    .atf-square {
        display: none !important;
    }
}


/* =========================================
   ATF TITLES — ENTRANCE
   ========================================= */

.atf .atf-title-1,
.atf .atf-title-2 {
    opacity: 0;

    will-change: opacity, transform;

    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================
   TITLE 1 — FADE DOWN
   komt van boven
   ========================================= */

.atf .atf-title-1 {
    transform: translate3d(0, -35px, 0);
}


/* =========================================
   TITLE 2 — FADE UP
   komt van onder
   ========================================= */

.atf .atf-title-2 {
    transform: translate3d(0, 35px, 0);
}


/* =========================================
   REVEAL
   ========================================= */

.atf.atf-is-revealed .atf-title-1,
.atf.atf-is-revealed .atf-title-2 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* Titel 1 */
.atf.atf-is-revealed .atf-title-1 {
    transition-delay: .75s;
}


/* Titel 2 iets later */
.atf.atf-is-revealed .atf-title-2 {
    transition-delay: 1.5s;
}


.actnum {font-size:1.4vw !important}
.actnaam {font-size:1.2vw !important; margin-top:1.2vw !important}


@media (max-width: 767px){
.atf .atf-title-1 {position:relative !important; left:-5vw !important;}
.atf .atf-title-2 {position:relative !important; right:-5vw !important;}

.actnum {font-size:3.4vw !important}
.actnaam {font-size:3.2vw !important; margin-top:1.5vw !important}

}



@media (min-width: 768px){
.activiteitimg,
.activiteitimg img {
    transition: opacity 100ms ease-in-out !important;
    will-change: opacity;
}

.activiteitlijn, .activiteitlijn h6, .activiteitlijn img {transition:200ms }

.activiteitlijn:hover .actnum {background:#25B1E3; color:#F6FAFB}

.actnaam {margin-left: .5vw !important}
.activiteitlijn:hover .actnaam {margin-left:1.3vw !important}

.activiteitlijn:hover img {transform: rotate(45deg) !important}

}


/* =========================================
   ACTIVITEIT VISUAL
   ========================================= */

.activiteitvisual {
    position: relative;
    overflow: hidden;
}


/* Afbeelding */
.activiteitimg {
    width: 100%;
}

.activiteitimg img {
    display: block;
    width: 100%;

    transition: opacity 100ms ease-in-out !important;
    will-change: opacity;
}


/* =========================================
   CONTENT OVERLAY
   ========================================= */

.activiteitcontent {
    position: absolute !important;
    width:89%; margin:5.5%; margin-bottom:8%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 2vw;
background:white;
    pointer-events: none;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 200ms ease,
        transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* Content zichtbaar */
.activiteitcontent.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   TEXT SWITCH
   ========================================= */

.activiteittitel,
.activiteittekst {
    transition: opacity 200ms ease;
}

.activiteittitel {margin:0 !important; margin-bottom:1vw !important}

.activiteitcontent.is-changing .activiteittitel,
.activiteitcontent.is-changing .activiteittekst {
    opacity: 0;
}



/* ==========================================================
   CASE SLIDER — VERTICAL IMAGE REVEAL
   Nieuwe afbeelding schuift van boven naar beneden
   over de oude afbeelding
   ========================================================== */


/* ----------------------------------------------------------
   Echte image-frame
   Wordt door JS automatisch toegevoegd
   ---------------------------------------------------------- */

.caseslider .caseslider-image-frame {
    position: relative !important;
    overflow: hidden !important;
}


/* ----------------------------------------------------------
   Swiper zelf technisch bijna instant laten wisselen
   1ms i.p.v. 0ms zodat autoplay correct blijft werken
   ---------------------------------------------------------- */

.caseslider .swiper-wrapper {
    transition-duration: 1ms !important;
}


/* ==========================================================
   TIJDELIJKE TRANSITION LAYER
   ========================================================== */

.caseslider-transition {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 50;

    overflow: hidden !important;

    pointer-events: none !important;
}


/* ----------------------------------------------------------
   Tijdelijke afbeeldingen
   Afmetingen worden via JS pixel-perfect ingesteld
   ---------------------------------------------------------- */

.caseslider-transition img {
    position: absolute !important;

    display: block !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none !important;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ==========================================================
   OUDE AFBEELDING
   Blijft gewoon staan
   ========================================================== */

.caseslider-transition-old {
    transform: translate3d(0, 0, 0);
}


/* ==========================================================
   NIEUWE AFBEELDING
   Start volledig boven het masker
   ========================================================== */

.caseslider-transition-new {
    transform: translate3d(0, -101%, 0);

    will-change: transform;

    transition:
        transform 650ms cubic-bezier(0.76, 0, 0.24, 1);
}


/* ----------------------------------------------------------
   Reveal
   ---------------------------------------------------------- */

.caseslider-transition.is-running
.caseslider-transition-new {
    transform: translate3d(0, 0, 0);
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .caseslider-transition-new {
        transition: none !important;
        transform: translate3d(0, 0, 0) !important;
    }
}


.e-n-accordion-item[open]
> .e-n-accordion-item-title
.e-n-accordion-item-title-text {color:#25B1E3 !important; font-size: 1.8em;transform:translate(5%, 0);}

.e-n-accordion-item[open] {background:white;}

.e-n-accordion-item-title-text, .e-n-accordion-item,.e-n-accordion-item svg {transition:200ms !important;}

.e-n-accordion-item svg {transform:rotate(135deg)}

.e-n-accordion-item[open]  svg {transform:rotate(-45deg)}

.e-n-accordion-item .elementor-icon-list-items svg {transform:rotate(0deg)}

@media(max-width:767px) {
    
    .e-n-accordion-item[open]
> .e-n-accordion-item-title
.e-n-accordion-item-title-text {color:#25B1E3 !important; font-size: 1.3em;transform:translate(0, 0);}
    
}


/* =========================================
   FLIP BOX — 200MS
   ========================================= */

/* NIEUWE Elementor Flip Box */
.fast-flips .e-flip-box__layer,
.fast-flips .e-flip-box__layer--front,
.fast-flips .e-flip-box__layer--back {
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}


/* OUDE Elementor Flip Box — fallback */
.fast-flips .elementor-flip-box__layer,
.fast-flips .elementor-flip-box__front,
.fast-flips .elementor-flip-box__back {
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.sixrules {font-size:.6em; line-height: 1.7em; margin-top:4% !important} 


@media(max-width:767px) {.bottomquote2, .bottomquote {display:none !important}}/* End custom CSS */