:root { --m-black: #181715; --m-green: #4b4f47; --m-grey: #d8d8d4; --m-brown: #595149; --m-red: #a61819; --m-sand: #b0a28d; --m-sand-rgb: 176, 162, 141; --white: #fff; --m-rgb-black: 24,23,21; --ftr-txt: #878b84; --ftr-lnkbg: #444840;}
* { font-family: "Gidole", sans-serif; font-weight: 400; font-style: normal; color: var(--m-black); font-size:14px;}
a { color: var(--m-green); transition: color 0.5s ease-in; }
i { font-style: italic; }
h1 { font-size: 2.5rem; margin-bottom: 25px; background: url(../imgsite/stroke.png) left bottom no-repeat; padding: 0 0 25px 50px; margin-left: -50px; }
.pdS{padding:50px 0;}
.container, .container-fluid { max-width: 1700px; }
.mtb-1 { margin-top: 2.5em; margin-bottom: 2.5em; }
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 6.5rem; }
.logolink { width: 100%; text-align: center; display: block; }
.logo { margin: 10px auto; float: none; display: inline-block; }
header{margin-bottom:50px;}
#headnav { display: none; }
nav ul { list-style: none; padding: 0; margin: 0; width: 100%; text-align: right; }
    nav ul li { display: inline-block; float: left; width: 100%; }
        nav ul li a { width: 100%; padding: 10px 20px; border-bottom: 1px solid var(--m-grey); text-decoration: none; float: left; text-align: left; }
            nav ul li a:hover, nav ul li.active a { color: var(--m-sand); }
#btn_MobileNav { background: var(--m-sand); border: none; width: 100%; padding: 5px 0; font-size: 1.5em; color: var(--white); }
    #btn_MobileNav i { color: var(--white); }
.cBox { width: 100vw; overflow: hidden; background: rgba(var(--m-sand-rgb),0.8); position: fixed; bottom: 0; padding: 25px 0; }
.cBox button{float:right;}
    .cBox .lnkbtn { background: none; border: none; text-decoration: underline; margin: 29px 20px 0 0; }
/* HOME --------------------*/
#popup img{margin-bottom:25px;}
.IntroHomeTeaserBox { position: relative; }
.btn-cta { background: var(--m-green); color: var(--m-sand); text-decoration: none; padding: 10px 10px 10px 20px; border-radius: 25px; display: inline-block; margin-top: 15px; border:none;}
    .btn-cta i { color: var(--m-sand); }
.imgBlockIntroHome { background: var(--m-grey); width: 100%;}
.txtBlockIntroHome { background: rgba(var(--m-sand-rgb),0.8); padding:2.2em 2em; color: var(--white); }
    .txtBlockIntroHome h1 { font-size: 2rem; background: none; margin: 0; padding: 0; }
    .txtBlockIntroHome h2 { font-size: 1.5rem; }
footer { margin-top: 100px; float: left; display: inline-block; width: 100%; background: var(--m-green); padding: 50px 0; }
    .tc span:first-child { float: left; }
.footerItem { margin-bottom: 25px; }
footer p, footer i, footer a { color: var(--m-sand); }
footer h2 { color: var(--m-sand); margin-bottom: 25px; font-size: 1.6em;}
footer p { margin-left: 24px; }
    footer p[class^='icon-']:before, footer p[class*='icon-']:before, footer p i { margin-left: -24px; /*color: var(--ftr-txt);*/ }
footer li { list-style: none; /*background: var(--ftr-lnkbg);*/ padding: 3px 0; margin-bottom: 4px; border-radius: 4px; width: 80%; }
footer li a{text-decoration:none; /*color:var(--ftr-txt);*/}
footer ul { padding: 0; }
footer li:after { content: '\e80a'; font-family: "fontello"; margin-left: 5px; color: var(--m-sand); }
footer span, footer span a{color:var(--ftr-txt);}
.divSpotlightProject h3 { color: var(--m-sand); font-weight: bold; font-size: 1.2rem; background: url(../imgsite/stroke.png) left bottom repeat-x; width:max-content; padding: 12px 0; }
.divSpotlightProject h2 { font-size: 2.1rem; margin-bottom: 0; padding-bottom:0.3em; background: none; }
.btn-secundary { border: 1px solid var(--m-sand); border-radius: 25px; padding: 8px 25px; text-decoration: none; margin-top: 20px; float: left; transition: background 1s ease-in, color 0.5s ease-in; }

section { float: left; width: 100%; display: inline-block; padding-bottom: 70px; margin-bottom: 50px; }
    section p { font-weight: normal; }
    section h2 { font-size: 1.8rem; margin-bottom: 25px; background: url(../imgsite/stroke.png) left bottom no-repeat; padding: 0 0 25px 50px; margin-left: -50px; }
    section.scC1 { background: var(--m-grey); }
.navSlides .embla { position: relative; margin: 150px 0 75px 0 }
.navSlides .embla__viewport { overflow: hidden; }
.navSlides .embla__container { display: flex; touch-action: pan-y pinch-zoom; }
.navSlides .embla__slide { flex: 0 0 100%; min-width: 0; }
.slideSpotlightOverlay {background:rgba(var(--m-sand-rgb),0.8); padding: 50px 50px; width: 100%; position: relative; left: 0; }
    .slideSpotlightOverlay h3{color:var(--white);}
    .slideSpotlightOverlay p { color: var(--white); font-size:1em;}
.navSlides .embla__prev, .navSlides .embla__next { background: none; border: none; font-size: 3rem; position: absolute; top: 160px; transition: ease-in 0.8s; padding: 0; }
    .navSlides .embla__prev i, .navSlides .embla__next i { color: var(--white); }
        .navSlides .embla__prev i:before, .navSlides .embla__next i:before { margin: 0; padding: 0; }
.navSlides .embla__prev { left: 10px; }
.navSlides .embla__next { right: 10px; }

.divTestimonial .emblaSpotlight { position: relative; margin: 0 0 75px 0 }
.divTestimonial .embla_viewport { overflow: hidden; }
.divTestimonial .embla_container { display: flex; touch-action: pan-y pinch-zoom; }
.divTestimonial .embla_slide { flex: 0 0 100%; min-width: 0; }
    /*.divTestimonial h2 { margin: 0 0 15px 0; background: url(../imgsite/stroke.png) no-repeat calc(100% + 50px) bottom; padding: 0 0 20px 53px; position: relative; z-index: 10; font-size:2.1em;}*/
    .divTestimonial h3 { color: var(--m-sand); font-weight: bold; font-size: 1.2rem; background: url(../imgsite/stroke.png) left bottom repeat-x; width: max-content; padding: 12px 100px 12px 70px;
    margin-left: -70px;}
    .divTestimonial h2 { font-size: 2.1rem; margin-bottom: 0; padding-bottom:0.3em; background: none; padding: 0 0 0 50px;}
    .divTestimonial p { margin-top: 40px; }
    .divTestimonial .imgBlockSpotlight { position: relative; z-index: 0; }
.imgBlockSpotlight { margin-top: 50px; }
.divTestimonial i { font-weight: bold; }
.embla-controls .embla_prev, .embla-controls .embla_next{min-width:44px; min-height:44px; border:none; background:none; font-size:2em;text-align:center; padding:8px;}
.embla-controls button i{color:var(--m-green); transition:color 0.3s linear;}
.embla_dots{float:right;}
button.embla__dot { width: 44px; margin: 0 4px; min-height: 8px; background: var(--m-grey); border: none; }
button.embla__dot--selected{background:var(--m-sand);}

/*Projecten --------*/
.ctaCntctPrice { /*background-size: cover;*/ background:var(--m-grey); padding: 100px 0; }
.prjOverlay { background: rgba(var(--m-rgb-black), 0.6); display: table; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    text-align: center; text-transform: uppercase; opacity:0; transition: opacity 0.8s;}
.prjOverlay .caption{display:table-cell; vertical-align: middle;}
.prjOverlay strong{color: var(--white);display:inline-block; width:100%;letter-spacing: 2px; font-size:1.1em;}
.prjOverlay span{color: var(--white); letter-spacing: 5px; font-weight:lighter; font-size:0.8em; margin-top: 15px; display: block;}
.Projecten{padding:40px 0 0!important;}

/*masonry - left to right*/


.refContent { overflow: hidden; padding-right:30px; margin-bottom:75px;} 
.ref:nth-child(even) .refContent{padding-left:30px; padding-right:0;}
.masonry-footer { font-size: .75em; opacity: .25; text-align: center; padding-top: 3em; padding-bottom: 3em; margin-bottom: -1.5em; 
                  transition: opacity 1s ease-in-out; }
    .masonry-footer a { color: currentColor; }
    .masonry-footer:hover, .masonry-footer:active, .masonry-footer:focus { opacity: .75; }
/* masonry - left to right -- EOF*/
.refContent a { text-decoration: none; }
.refContent .mobNewsDetail { float: right; font-size: 1em; color:var(--m-sand);}
.refContent img { display: block; width: 100%; position: relative; z-index: 0; }
.refContent h3 { font-size: 1.8rem; margin: 25px 0 0 0; }
.refContent p { font-size: 1.3rem; margin: 0 0 25px; padding: 0; }
.newshvrmr { position: relative; overflow: hidden; display: block; text-decoration: none; }
.capMoreInfo { background: rgba(var(--m-rgb-black), 0.8); position: absolute; bottom: -70px; width: 100%; padding: 15px; text-align: right; color: var(--m-grey); transition: bottom 0.5s ease-in-out; }
    .capMoreInfo i { color: var(--m-sand); }




.fase2Parts h3 {     background: url(../imgsite/stroke.png) -50px bottom repeat-x;   padding: 0 0 12px 206px;   margin: 0 0px 45px -210px;    width: max-content; }
/*Projectdetail --- */
::part(drag):before { border: none; height: 30px; width: 120px; background-image: url(../imgsite/before-after-drag.svg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.mfp-arrow:before, .mfp-arrow-right:before, .mfp-arrow:after { border: none; }
.mfp-arrow:before { content: '\e80b'; font-family: 'fontello'; font-size: 4em; color: #fff; }
.mfp-arrow-right:before { content: '\e80a'; font-family: 'fontello'; }
    /*textpage*/
    blockquote { background: var(--m-red); padding: 3rem 3rem; font-size: 1.8em; line-height: 1.2em; }
blockquote p{color:var(--white);margin:0; padding:0;}
    blockquote p:before { content: '\e820'; font-family:'fontello'; width:40px; height:40px; font-size:1.2em; 
                          color:rgba(var(--m-rgb-black), 0.2); position:relative; left:-18px; top:-10px; margin-right:-50px;}
blockquote p cite {font-size:0.5em; color:var(--m-grey); font-style:italic; width:100%; display:inline-block;}
.team .col-lg-3 .top{margin-bottom:20px;}

/*contact*/
.form-control { margin-bottom: 20px; padding:15px 10px; }
.form-check{margin:0 0 25px 0; padding:0;}
.form-check label{margin-top:15px;}
.CheckkGDPR { width: 44px; height: 44px;  margin-right:20px; margin-bottom:15px;}
.btnContactForm {margin-bottom:20px;}
.sForm h2{margin-bottom:50px;}
.sForm h4{margin:50px 0 30px; font-size:1.1em; font-weight:bold;}
.sForm i{color:var(--m-sand);}
.sForm h4, .sForm p{margin-left:25px;}
.pict1 img{float:right;}
.cpict img{max-width:100%;}

/* faq */
.accordion-button { background: var(--m-grey); color: var(--m-black); font-size:0.65em;}
    .accordion-button:not(.collapsed) { background: var(--m-grey); color:var(--m-black);}
    .accordion-button:focus{box-shadow:rgba(var(--m-sand-rgb, 1)), 10px 10px inset;}
.accordion { margin-bottom: 25px; }
.FAQ .umb-block-grid [class*="col-"] div {margin-bottom:10px;}

/*news*/
.news .refContent h3{margin-bottom:10px; min-height:80px;}
.newsHeader{background-size:cover; padding:50px 0; margin-bottom:50px;}
.a-backLink{text-decoration:none; padding-bottom:5px; float:left; display:inline-block;}
.ReadableOverlay{background:rgba(255,255,255,0.6); padding:25px 50px 25px 25px; float:left;}

.umb-block-grid h3{margin-bottom:30px; font-weight:bold;}
.textpage .umb-block-grid .row{margin-bottom:6rem;}
em{font-style:italic;}

/*MD*/
@media screen and (min-width:768px) {
    .txtBlockIntroHome { width: 50%; padding: 70px 45px; background: rgba(var(--m-sand-rgb),0.8); color: var(--white); position: absolute; bottom: -14%; right: 8%; }
        .txtBlockIntroHome h1 { font-size: 2rem; }
        .txtBlockIntroHome h2 { font-size: 1.4rem; }
    .divSpotlightProject h3 { margin-left: -197px; padding-left: 195px; }
    .txtBlockIntroHome h1 { font-size: 2.3rem; }
    .slideSpotlightOverlay { margin: -200px 0 0 0; width: 50%; left: 70px; }
    .news .refContent h3 { font-size: 1.7rem; }
    .news .refContent p { font-size: 1.1rem; }
}
    /*LG*/
    @media screen and (min-width:992px) {
        a:hover { text-decoration: none; color: var(--m-grey); }
        .logolink { text-align: left; }
        #headnav { display: inline-block; width: 100%; }
        #btn_MobileNav { display: none; }
        nav ul { float: left; }
        nav ul li { float: none; width: auto; }
        nav ul li a { width: auto; border-bottom: none; float: left; display: inline-block; padding: 15px 0 15px 1.2em; }
        footer span { float: right; }
        .btn-secundary:hover { background: var(--m-sand); color: var(--white); }

        .navSlides .embla__slide { flex: 0 0 100%; min-width: 0; padding: 0 100px; }
        .slideSpotlightOverlay { margin: -200px 0 0 50px; padding: 50px 50px 100px 50px; width: 48%; }
        .navSlides .embla__prev, .navSlides .embla__next { font-size: 5rem; top: 50%; margin-top: -110px; }
        .navSlides .embla__prev i:before, .navSlides .embla__next i:before { margin: 0; padding: 0; }
        .navSlides .embla__prev { left: 10px; }
        .navSlides .embla__next { right: 10px; }
        .navSlides .embla__prev:hover { left: 0; }
        .navSlides .embla__next:hover { right: 0; }
        .refContent a img { transition: opacity 0.7s ease-in-out; }
        .refContent a:hover img { opacity: 0.8; }
        .refContent a:hover .capMoreInfo { bottom: 0; }
        .refContent a:hover .prjOverlay{opacity:1;}
        .refContent i.sd { display: none; }
        .embla-controls button:hover i { color: var(--m-sand); }
        .form-check label { margin-top: 0; }
        .CheckkGDPR { width: 25px; height: 25px; }
        .newsHeader { padding-top: 150px; }
        .IntroHomeTeaserBox { margin-bottom: 10rem; }
        .divTestimonial .emblaSpotlight { margin: 150px 0 75px 0; }
        .divTestimonial { padding: 80px 0; }
        /*.divTestimonial h2 { padding: 50px 0 20px 0; width: 115%; }*/
        .umb-block-grid [class*="col-"] div { margin-bottom: 40px; }
    }
    @media screen and (min-width:1024px){
        section h2 {font-size: 1.6rem;}
        section p {font-weight: normal;font-size: 0.9em; line-height: 1.4em;}
        section{padding-bottom:0;}
        .mb-4 { margin-bottom: 2rem !important;}
    }
    /*XL*/
    @media screen and (min-width:1200px) {
        nav ul li a { padding: 15px 0 15px 1.9em; font-size: 0.85em !important; }
        * { font-size: 1.02em; }
        section p {font-weight: normal; font-size: 1.1em; line-height: 1.5em;}
        .mb-4 {margin-bottom: 1.5rem !important;}
    }
    /*XL*/
    @media screen and (min-width:1400px) {
        .txtBlockIntroHome { width: 40%; padding: 80px 55px; }
        .txtBlockIntroHome h1 { font-size: 2.2rem; }
        .txtBlockIntroHome h2 { font-size: 1.4rem; }
        section h2 { font-size: 2.2rem;}
    }