@charset "UTF-8";

@font-face {
    font-family: 'Averta Light';
    src: url('../fonts/AvertaLight.woff2') format('woff2'),
         url('../fonts/AvertaLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cambria Regular';
    src: url('../fonts/CambriaRegular.woff2') format('woff2'),
         url('../fonts/CambriaRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nexa Bold';
    src: url('../fonts/NexaBold.woff2') format('woff2'),
         url('../fonts/NexaBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nexa Light';
    src: url('../fonts/NexaLight.woff2') format('woff2'),
         url('../fonts/NexaLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nexa Regular';
    src: url('../fonts/NexaRegular.woff2') format('woff2'),
         url('../fonts/NexaRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body{max-width:100%; height:100%; overflow-x:hidden; -webkit-text-size-adjust:none; touch-action:pan-y;}

body{font-family: 'Nexa light'; color:#333333;}


.noSelect{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.showCursor{cursor:pointer;}

.fw-bold{font-family: 'Nexa Bold'}

.bg-blue{background-color:#33ccff;}

.text-blue{color:#0088c1;}

a:link,a:hover,a:focus,a:active,a:visited{text-decoration:none;}

.startContent{margin-top:62px;}

h1{font-family: 'Nexa Light'; color:#333333; font-size:1.5rem; font-weight:normal; letter-spacing:2px;}
h1.home{font-size:calc(1.325rem + .9vw); letter-spacing:0;}

/*header*/
.header{background-color:rgba(255,255,255,0.9);}
.header h1{font-size:0;}
.header img{height:30px;}
.header ul{font-family: 'Nexa Light'; font-size:0; line-height:1;}
.header ul li{margin-right:30px; padding:5px 0; display:inline-block; font-size:1rem; border-bottom:solid 2px transparent; transition:border-color .2s linear;}
.header ul li:hover, .header ul li.active{border-color:#33ccff;}
.header ul li:last-child{margin-right:0;}
.header ul li a{color:#231f20;}

.menuIcon{margin-top:4px; width:24px; font-size:0; line-height:0; border-top:solid 2px #231f20;}
.menuIcon:first-child{margin-top:2px;}
.toggleMenu.sluit .menuIcon{margin:-2px 0 0 0; transform: rotate(45deg);}
.toggleMenu.sluit .menuIcon:first-child{margin:8px 0 0 0; transform: rotate(-45deg);}

.navTouch{height:calc(100% - 62px); top:62px; left:0; z-index:1029; visibility:hidden; opacity:0; transition:all .25s linear;}
.navTouch.active{visibility:visible; opacity:1;}
.navTouch ul{font-family: 'Nexa Light'; font-size:0; line-height:1;}
.navTouch ul li{margin-bottom:20px; display:block; font-size:1.2rem;}
.navTouch ul li:last-child{margin-bottom:0;}
.navTouch ul li a{color:#FFF;}

.footer{font-family: 'Nexa Light'; font-size:.8rem; color:#6d6e71; background-color:#e0e0db;}
.footer a{color:#6d6e71;}
.footer .copyright .d-table-cell:nth-child(2){width:1%;}
.footer .copyright .d-table-cell:last-child{width:1%;}

/*content*/
.projecten ul{padding:10px 0 10px 0; font-family: 'Cambria Regular'; font-size:0; border-radius:23px; border:solid calc(1px / 2) #231f20;}
.projecten ul li{margin-left:20px; display:inline-block; font-size:1rem;}
.projecten ul li:last-child{margin-right:20px;}
.projecten ul li a{transition:color .2s linear;}
.projecten ul li a:hover, .projecten ul li a.active{color:#0088c1;}

/*.projecten h1.noFilter{font-size:1.4rem; color:#333333;}*/
.projecten h2{font-size:1rem;}
.projecten a{color:#333333;}
.projecten a p{font-family: 'Nexa Light'; font-size:.9rem}

.projectenImg{background-repeat:no-repeat; background-size:100% 100%; background-position:center center; transition:background-size .5s ease-out;}

.projectStadType{font-size:1.4rem;}

.content a{color:#33ccff}
.content .d-table-cell ul{margin-bottom:0;}

.medewerkers h3{font-size:1.4rem;}

.contact{color:#6d6e71;}
.contact .position-absolute{left:0; top:0; background-color:rgba(51,204,255,0.2);}
.contact h1, .contact h2{font-family: 'Nexa Light'; font-size:1.5rem; color:#333333; font-weight:normal; letter-spacing:2px;}
.contact a{color:#6d6e71;}


/*fades*/
.fadecolumn{opacity:0; transition:opacity .5s linear;}
.fadecolumn.fade-in{opacity:1;}

/*homepage*/
.homepage{margin-top:62px;}

.vacatureTekst ul{padding-left:20px;}


/*carousels*/
.owl-carousel .owl-item .item{height:calc(100vh - 150px); background-size:cover; background-position:center center;}
.owl-carousel .owl-item .d-table{background-color:rgba(0,0,0,.3);}
.owl-carousel .owl-item  span{display:inline-block; font-size:1.5rem; visibility:hidden; opacity:0; filter:blur(20px); transition:all .6s ease-out;}
.owl-carousel .owl-item.active span{visibility:visible; opacity:1; filter:blur(0);}
.owl-carousel .owl-item  span:nth-child(2){transition-delay: .2s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(3){transition-delay: .3s;}
.owl-carousel .owl-item  span:nth-child(4){transition-delay: .4s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(5){transition-delay: .5s;}
.owl-carousel .owl-item  span:nth-child(6){transition-delay: .6s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(7){transition-delay: .7s;}
.owl-carousel .owl-item  span:nth-child(8){transition-delay: .8s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(9){transition-delay: .9s;}
.owl-carousel .owl-item  span:nth-child(10){transition-delay: 1s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(11){transition-delay: 1.1s;}
.owl-carousel .owl-item  span:nth-child(12){transition-delay: 1.2s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(13){transition-delay: 1.3s;}
.owl-carousel .owl-item  span:nth-child(14){transition-delay: 1.4s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(15){transition-delay: 1.5s;}
.owl-carousel .owl-item  span:nth-child(16){transition-delay: 1.6s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(17){transition-delay: 1.7s;}
.owl-carousel .owl-item  span:nth-child(18){transition-delay: 1.8s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(19){transition-delay: 1.9s;}
.owl-carousel .owl-item  span:nth-child(12){transition-delay: 2s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(21){transition-delay: 2.1s;}
.owl-carousel .owl-item  span:nth-child(22){transition-delay: 2.2s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(23){transition-delay: 2.3s;}
.owl-carousel .owl-item  span:nth-child(24){transition-delay: 2.4s; transition:all 0s ease-out;}
.owl-carousel .owl-item  span:nth-child(25){transition-delay: 2.5s;}

.owl-dots{padding:0 0 1.5rem 1.5rem; margin-top:0!important; display:inline-block; position:absolute; bottom:0; font-size:0;}
.owl-theme .owl-dots .owl-dot{margin:0 0 10px 0; display:block!important;}
.owl-theme .owl-dots .owl-dot:last-child{margin:0;}
.owl-theme .owl-dots .owl-dot span{margin:0; width:15px; height:15px; border-radius:50%; border:solid 1px #FFF; background-color:rgba(255,255,255,0); opacity:1; transition:background-color .3s linear;}
.owl-theme .owl-dots .owl-dot:hover span{background-color:rgba(255,255,255,0);}
.owl-theme .owl-dots .owl-dot.active span{border:solid 1px #FFF; background-color:rgba(255,255,255,1);}

.carouselWrapper .carouselNav{transition:background-color .2s linear;}
.carouselWrapper .carouselNav:hover{background-color:rgba(255,255,255,.5);}
.carouselWrapper .carouselNav:first-child{left:0; top:0; z-index:11;}
.carouselWrapper .carouselNav.last{right:0; top:0; z-index:11;}
.carouselNav i{font-size:1.5rem;}


/*formulieren*/
label{margin-bottom:.5rem; font-weight:600;}
.form-control{border-color:#333333; border-radius:0;}
.form-control:focus{border-color:#333333; box-shadow:none;}
.btnDevast{background-color:#33ccff; border-radius:0;}
.btnDevast:focus{box-shadow:none;}

.form-check{margin-bottom:0; margin-left:0; padding:.6rem .75rem;  min-height:auto; float:none; line-height:1.5; border-radius:6px; border:solid 1px #333333;}
.form-check.radio{min-width:84px;}
.form-check.checkbox{margin-bottom:0; margin-left:0; padding:0; min-height:auto; float:left; line-height:1; border-radius:none; border:none;}
.form-check.checkbox label{line-height:1.2rem;}
.form-check .form-check-input{margin-left:0; float:none;}
.form-check.checkbox .form-check-input{margin-top:0; float:left;}
.form-check.formError{border-color:#dc3545;}

.form-check-input{border-color:#333333;}
.form-check-input:checked{border-color:#33ccff; background-color:#33ccff;}
.form-check-input:focus{border-color:#333333; box-shadow:none;}
.form-check-input.formError{border-color:#dc3545;}

.form-select, .form-select:focus{border-color:#333333; box-shadow:none;}
.form-select.formError{border-color:#dc3545;}

.btnSendForm{padding:.6rem .75rem; letter-spacing:1px; border-radius:6px; border:solid 1px var(--green); background-color:var(--green); box-shadow:none;}



.grecaptcha-badge{margin-right:-10000px;}

@media(max-width:768px){
.footerContact{display:block!important;}
.footerContact .d-table-cell{display:block!important;}
.footerContact .ps-5{padding-left:0!important;}
}

@media(min-width:768px){
.header img{height:50px;}

.startContent{margin-top:152px;}

/*homepage*/
.homepage{margin-top:144px;}

.contact h1, .contact h2{font-size:1.75rem;}

/*carousels*/
.owl-carousel .owl-item .item{height:50vh;}
.owl-carousel .owl-item  span{font-size:2.5rem;}

.owl-dots{padding:0 0 3rem 3rem;}
}

@media(min-width:992px){
.projectenItem a:hover .projectenImg{background-size:110% 110%;}
.projectenItem a .projectenImg .position-absolute{transition:background-color .3s linear;}
.projectenItem a:hover .projectenImg .position-absolute{background-color:rgba(51,204,255,0.4);}

/*homepage*/
.homepage{margin-top:144px;}

/*carousels*/
.owl-carousel .owl-item .item{height:75vh;}
.owl-carousel .owl-item  span{font-size:2.5rem;}
.owl-carousel .owl-item .carouselTekst{width:75%;}
}
@media(min-width:1200px){
h1{font-size:2.3rem;}
h1.home{font-size:2rem;}

/*carousels*/
.owl-carousel .owl-item .carouselTekst{width:50%;}
}
@media(min-width:1400px){
h1{font-size:2.5rem;}
}