@charset "utf-8";
/* CSS Document */

body{margin-top:70px; font-family:'Work Sans', sans-serif; font-size:18px; line-height:1.6; color:#000; letter-spacing:1px;}

/*links & buttons
a:link,a:active,a:visited{color:#333; text-decoration:none; transition:color 0.3s linear;}
a:hover{color:#7f8080;}*/
a:link,a:active,a:visited{color:#236599; text-decoration:none; transition:color 0.3s linear;}
a:hover{color:#236599;}

/*anchors*/
#work{top:-75px; position:relative; display:block; visibility: hidden;}

a.btn-back{padding:0 5px 0 5px; float:right; font-weight:400; color:#7f8080; line-height:1.5; background-color:#e6e5e5; transition:all 0.3s linear;}
a.btn-back .fal{margin:0 5px 0 -5px; padding:6px 6px 5px 5px; float:left; color:#FFF; font-size:13px; line-height:1.1; background-color:#7f8080; transition:all 0.3s linear;}
a.btn-back:hover{color:#FFF;  background-color:#7f8080;}
a.btn-back:hover .fal{color:#FFF;  background-color:#e6e5e5;}

/*resets etc*/
.noselect{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.img-fluid{width:100%; height:auto;}

/*txt-colors*/
.text-light-grey{color:#808080;}
.txt-wl-blue, a.txt-wl-blue{color:#1e5c8d; transition:opacity .3s linear;}
a.txt-wl-blue:hover{opacity:.5;}

/*koppen*/
h1,h2,h3,h4{font-family:'Oswald', sans-serif; font-weight:300; line-height:1.6;}
h1,h2{font-size:28px; letter-spacing:3px;}

/*nav mobile*/
.navigatie-mobiel{width:100%; height:100%; position:fixed; top:0; z-index:1040; font-size:0; background:#e6e5e5; opacity:0; visibility:hidden; transition:all 0.3s linear;}
.navigatie-mobiel.active{opacity:1; visibility:visible;}
.navigatie-mobiel .container-fluid:first-child{padding-top:10px; padding-bottom:7px;}
.navigatie-mobiel .toggle-menu{margin-top:0; margin-right:calc(5px / 2); font-size:18px;}
.navigatie-mobiel .set-height{height:calc(100% - 122px);}
.navigatie-mobiel li{margin:5px 0;}
.navigatie-mobiel li a,.navigatie-mobiel li a:not([href]){padding:0 15px; display:inline-block; font-size:18px; font-weight:300; color:#4d4d4d; text-decoration:none;}
.navigatie-mobiel li:nth-child(3) > a:not([href]){display:none;}
.navigatie-mobiel .social li a{padding:3px 0 0 0; font-size:24px; }
.navigatie-mobiel li ul{padding:0;}
.navigatie-mobiel li ul li a{padding:0;}

/*header*/
.header{padding-top:10px; padding-bottom:10px; font-size:0; background:rgba(255,255,255,0.9); transition:all 0.35s linear;}
.header.active, .header.casePage{background-color:#000; -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);}

.logo img{height:50px;}
.header.active .logo img, .header.casePage .logo img{filter: brightness(0) invert(1);}

.toggle-menu{margin-top:4px; padding:10px; overflow:auto;}
.header .fal{font-size:18px;}
.header.active .fal, .header.casePage .fal{color:#FFF;}

.navigatie{height:100%; display:none; list-style-type:none; font-size:0;}
.navigatie li{padding:0 15px; display:table-cell; vertical-align:middle; position:relative;}
.navigatie li:last-child{padding-right:0;}

.navigatie li a{display:block; font-weight:300; font-size:14px; color:#000; text-decoration:none; transition:opacity 0.3s linear;}
.navigatie li a.active{opacity:0.7;}
.navigatie li ul{margin:0; padding:13px 0 0 0; position:absolute; left:0; display:none; text-align:left; background-color:#FFF; transition:all 0.35s linear;}
.navigatie li:hover ul{display:block;}
.navigatie li ul li, .navigatie li ul li:first-child, .navigatie li ul li:nth-child(2){padding:0 20px; max-width:150px; display:block; background-color:#e6e5e5;}
.navigatie li ul li:first-child a{padding-top:15px;}
.navigatie li ul li:last-child a{padding-bottom:15px;}

.header.active .navigatie li a, .header.casePage .navigatie li a{color:#FFF;}
.header.active .navigatie li ul, .header.casePage .navigatie li ul{margin:0; padding:28px 0 0 0; background-color:transparent;}

.social{height:100%; display:inline-table; list-style-type:none; font-size:0;}
.social li{padding:0 7px 0 7px; display:table-cell; vertical-align:middle;}
.social li:first-child{padding-left:0;}
.social li:last-child{padding-right:0;}
.social li a{display:block; color:#000; font-size:18px; line-height:2; border-radius:100%; transition:color .3s linear;}

.header.active .social li a, .header.casePage .social li a{color:#FFF;}

.choose_languageMobile img{margin-top:11px; width:auto; height:24px; filter:grayscale(100%);}
.choose_language{display:inline; list-style-type:none; font-size:0;}
.choose_language li img{margin-top:-3px; width:auto; height:18px; filter:grayscale(100%);}
.choose_language li img:hover{filter:none;}

/*footer*/
.footer{font-size:12px; background-color:#000;}
.footer img{width:auto; height:51px; filter: brightness(0) invert(1);}
.footer h3{padding-top:12px; font-size:24px;}
.footer p{margin-bottom:0; margin-top:-2px;}
.footer a{color:#FFF; text-decoration:none;}
.footer .logoText{margin-top:5px; font-size:12px;}
.footer .adresgegevens{width:100%;}

/*homepage*/
.homepageProjecten{font-size:0;}
.homepageProjecten li{padding:0 0 15px 0; width:100%; float:left;}
.homepageProjecten li div:first-child{overflow:hidden;}
.homepageProjecten li .d-table-cell{vertical-align:bottom;}
.homepageProjectenTekst{width:100%; height:100%; top:0; left:0; }
.homepageProjectenTekst h3{padding:0 10px 0 10px; display:inline-block; letter-spacing:3px; color:#000; background-color:rgba(255,255,255,.8);}
.homepageProjecten li:hover .homepageProjectenTekst{opacity:1;}
.videoWrapper{padding:0 5px; line-height:0;}
.videoWrapper.homevideo{padding:0;}
.toggleMute{cursor:pointer; top:15px; right:15px;}
.muteOff{display:none;}

.homepageTekst .d-table .d-table-row:last-child{height:1%;}

/*content algemeen*/
.content-columns.bordered{border-top:solid 1px #e6e5e5; border-bottom:solid 1px #e6e5e5;}
.content-columns.border-bottom{border-bottom:solid 1px #e6e5e5;}
.content-columns h2{font-size:24px; color:#333;}
.content-columns a{display:block; color:#7f8080; text-decoration:none; transition:color 0.3s linear;}
.content-columns a:hover{color:#333;}
.content-columns .fal{margin:0 0 -4px 10px; font-size:13px;}

.content-img-text img{osition:relative; z-index:0;}
.content-img-text span{padding:26px 65px 0 65px; width:100%; left:0; top:0; position:absolute; z-index:1; font-size:16px; color:#333;}

.content-extra h2{margin-top:30px; margin-bottom:25px;}
.content-extra h2:first{margin-top:0;}

/*visie*/
.visie{background-size:cover; background-repeat:no-repeat;}
.visie.first{background-color:rgba(55,96,124,.8);}
.visie h1, .visie h2{font-size:42px;}
.visie p{font-size:26px; color:#333;}

/*people*/
.people{padding-top:28px; padding-bottom:60px;}
.people ul{font-size:0; bottom:0;}
.people ul li{margin-left:15px; padding:0; width:40px; height:40px; float:none; display:inline-block; border-radius:50%; background-color:#000;}
.people ul li:first-child{margin-left:0;}
.people ul li a{color:#FFF;}
.people ul li i{margin-top:10px; font-size:16px; }
.people ul li:last-child i{margin-top:11px;}
.people p{margin-bottom:0;}

/*klanten*/
.klanten{font-size:0; line-height:0; overflow:auto;}
.klanten li{padding:10px; width:calc(100% / 3); float:left;}

/*portfolio*/
.portfolio a{display:block; text-decoration:none;}
.portfolio img{z-index:0;}
.portfolio h2{position:absolute; left:15px; bottom:15px; font-size:18px; color:#FFF; line-height:1; font-weight:400;}

.case-nav{margin-top:-32px; padding:0 15px 0 13px; position:fixed; top:50%; left:0; font-size:35px; color:#7f8080; background-color:#e6e5e5;}
.case-nav:hover{color:#e6e5e5; background-color:#7f8080;}
.case-nav.next{padding:0 13px 0 15px; left:auto; right:0;}

.caseImgLarge{padding:0 5px;}
.case2020{padding-top:10px; font-size:0;}
.case2020 li{padding:0 5px 10px 5px; width:calc(100% / 2); float:left;}
.case2020 li:nth-child(3){padding:0 5px 10px 5px; width:100%;}
.case2020 li .videoWrapper{padding:0;}

/*nieuws*/
.nieuwsarchiefItem .d-table{padding:0 5px 10px 5px}
.nieuwsarchiefItem .d-table .d-table-row:last-child{height:1%; }
.nieuwsarchiefItem .d-table .d-table-row:last-child .d-table{padding:5px 0 0 0 ;}
.nieuwsarchiefItem a{color:#000;}
.nieuwsarchiefItem h2{font-size:24px; letter-spacing: 1px;}
.nieuws{font-size:0;}
.nieuws li{padding:0 5px 10px 5px; width:calc(100% / 3); float:left;}
.nieuws .d-table{font-size:12px;}

.nieuwsitem h2{margin-top:24px; font-size:24px; line-height:1.3;}
.nieuwsitem a{padding:6px 10px 7px 10px; color:#4f4e4f; display:inline-block; background-color:#e6e5e5; transition:all 0.2s linear;}
.nieuwsitem a.foto{padding:0; background-color:#FFF; transition:none;}
.nieuwsitem hr{border-top:solid 1px #e6e5e5;}
.nieuwsitem .datum{padding:2px 0 3px 0; display:block; font-size:12px;}
.nieuwsitem p a{margin-left:10px; padding:0; display:inline-block; position:relative; color:#4f4e4f; background-color:transparent;}

audio{width:100%;}

/*contact*/
.contactMaps{font-size:0;}
.contactMaps li{margin-left:30px; display:inline-block; background:#CCC; width:calc(50% - 15px); float:left; font-size:18px;}
.contactMaps li:first-child{margin-left:0;}

.contact hr{margin-top:20px; margin-bottom:0;}
.contact hr.first{margin-top:10px; margin-bottom:40px;}
.contact .fab{margin-right:10px;}
#westerlingen-map{height:600px; cursor:default;}

/*cases*/
.video-container{position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute; top:0; left:0; width:100%; height:100%;}

@media(max-width:576px){
/*footer
.footer{padding-left:0; padding-right:0;}*/
}
@media(min-width: 768px) and (max-width: 992px){
.homepageProjectenTekst h3{font-size: 1.2rem;}
}
@media(min-width:768px){
body{font-size:16px;}
/*footer*/
.footer .adresgegevens{width:auto; float:right;}
.copyright{font-size:13px; text-align:right;}

/*people*/
.people{height:100%;}
.people h2{font-size:28px;}
.people li{padding:0 0 10px 0; width:calc(100% / 3); height:100%; float:left; font-size:16px;}
.peopleContent{padding:0 15%;}

/*klanten*/
.klanten li{padding:55px; width:20%;}

/*homepage*/
#westerlingen-carousel .carousel-item img{position:relative; z-index:0;}
#westerlingen-carousel .carousel-item .text{padding:0 30px 10px 30px; width:100%; left:0; bottom:0; position:absolute; z-index:1;}
#westerlingen-carousel h3{margin-bottom:10px; font-size:28px; font-weight:300; line-height:1.3;}
.carousel-indicators{margin:0 32px 23px 0; justify-content:flex-end;}
.carousel-indicators li{marign:0 5px; width:10px; height:10px; border-radius:5px;}
#westerlingen-carousel .next, #westerlingen-carousel .prev{margin-top:-15px; width:15px; height:30px; position:absolute; top:50%; z-index:10; left:45px; color:#FFF; font-size:30px;}
#westerlingen-carousel .next{position:absolute; top:50%; z-index:10; left:auto; right:45px;}

.homepage-content{font-size:18px; left:80px; bottom:60px; width:60%;}
.homepage-content h2{font-size:50px;}

.homepageProjecten li{padding:0 5px 10px 5px; width:calc(100% / 3);}
}

@media(max-width:992px){
.homepageTekstenWrapper .row:last-child .homepageTekst:last-child .d-table .d-table-row:last-child div{display:none;}
}
@media(min-width:992px){
body{margin-top:81px;}

/*header*/
.header{padding-top:15px; padding-bottom:15px;}

.logo img{height:51px;}

.navigatie{display:inline-table;}
.navigatie li{padding:0 15px;}

.social{margin-left:40px; position:relative; left:auto; float:right;}

/*homepage*/
.homepageTekstenWrapper .row:last-child .homepageTekst .d-table .d-table-row:last-child div{display:none;}
.homepageProjecten li .d-table-cell{vertical-align:middle; text-align:center;}
.homepageProjectenTekst{padding:12px 15px 11px 15px; opacity:0; background-color:rgba(255,255,255,.8); transition:.3s ease-out;}
.homepageProjectenTekst h3{padding:0; display:block; letter-spacing:3px; color:#000; background-color:transparent;}

/*people*/
.people{padding-top:0;}
.people .linkedin a{padding:20px; font-size:34px;}
.people h2{font-size:28px;}

/*nieuws*/
.nieuwsitem a{position:absolute; bottom:0;}
.nieuwsitem a.foto{position:relative;}
}

@media(min-width:1200px){
body{margin-top:91px;}

/*links & buttons*/
.btn-back{margin:-20px 0 0 0;}

/*anchors*/
#work{top:-91px; position:relative; display:block; visibility: hidden;}

/*header*/
.header{padding-top:20px; padding-bottom:20px;}

.navigatie li{padding:0 15px;}
.navigatie li a:hover{opacity:0.7;}
.navigatie li a:not([href]):hover{opacity:1; cursor:pointer;}

.social{margin-left:60px;}

/*homepage*/

}