@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');
@import url("https://use.typekit.net/fdi4qtq.css");

html,body{width:100%; height:100%;}

body{font-family:proxima-nova, sans-serif; font-weight:400; line-height:1.7;;}
body.grey{background-color:#f5f5f5;}
body.noscroll{overflow:hidden}

.pageFade{top:0; right:0; bottom:0; left:0; opacity:0; z-index:1; transition:opacity 1s linear;}
.pageFade.active{opacity:1;}

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

/*colors*/
:root{--blue:#003087;}
:root{--green:#00BF6F;}

.text-green{color:var(--green);}

/*backgrounds*/
.bg-blue{background-color:var(--blue);}


h1{font-family:'Julius Sans One', sans-serif; font-weight:normal; text-transform:uppercase;}
h2{font-family:'Julius Sans One', sans-serif; font-weight:normal; font-size:2.25rem; text-transform:uppercase;}

/*header & footer*/
.header{transition:background-color .3s linear;}
.header.active{background-color:#FFF; box-shadow:0px 3px 3px 0px rgb(0 0 0 / 15%);}
.header img{height:40px;}

.footer .position-absolute{bottom:10px; z-index:10;}
.footer a{color:#FFF; text-decoration:none; transition:opacity .3s linear;}
.footer a:hover{opacity:.75;}


/*content*/
.btnContent,.btnContent:hover{padding:15px 20px; display:inline-block; z-index:2;  position:relative; font-weight:600; line-height:1; text-decoration:none; border:2px solid var(--green); background-color:var(--green); color:#FFF; transition:all .3s linear;}
.startPage{margin-top:65px;}

.homepageStart{height:85vh; background-image:url(../img/linesHeader.svg); background-size:cover; background-repeat:no-repeat;}
.homepageStart .bgBottom{background-image:url(../img/bottomHeaderLines.svg); background-size:200% auto; background-repeat:no-repeat; background-position:bottom left;}
.homepageVisual{background-size:60% auto; background-repeat:no-repeat; background-position:bottom right;}
.homepageStart h1{font-size:3rem;}
.homepageStart p{font-weight:700;}
.homepageStart img{width:90%; z-index:0;}

.homepageAbout{line-height:0; background-image:url(../img/bottomHomeAbout.svg); background-size:100% auto; background-repeat:no-repeat; background-position:bottom center;}
.homepageAbout .container{line-height:1.7;}

/*aanbod*/
.aanbodOverview a{color:var(--bs-body-color); text-decoration:none;}
.aanbodOverview a img{transition:opacity .3s linear;}
.aanbodOverview a:hover img{opacity:.75;}
.aanbodOverviewDetails{margin:-50px auto 0 auto; width:calc(100% - 30px); z-index:1;}
.aanbodOverviewDetails h2{font-family:proxima-nova, sans-serif; font-size:1.45rem; font-weight:300; text-transform:none;}
.aanbodOverviewDetails p{font-weight:400;}

.objectDetails .d-table-row:nth-child(odd){background-color:#f5f5f5;}
.objectDetails .d-table-row .d-table-cell:first-child{width:1%;}

/*forms*/
.inschrijfformulierWrapper{height:calc(100% - 55px); bottom:0; z-index:1029;visibility:hidden; opacity:0; background-color:rgba(0,0,0,0.5); transition:background-color .75s linear;}
.inschrijfformulierWrapper.active{visibility:visible; opacity:1;}
.inschrijfformulier{width:320px; margin-right:-320px; transition:margin-right .75s linear;}
.inschrijfformulier.active{margin-right:0;}
.inschrijfformulier img{height:15px; margin-top:-4px;}

.form-control,.form-control:focus{border:1px solid #212529; border-radius:0; box-shadow:none;}
.form-control.formError{border-color:Tomato;}

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


@media(min-width:768px){
/*header & footer*/
.header img{height:60px;}

/*content*/
.startPage{margin-top:92px;}

.homepageStart .bgBottom{background-size:100% auto; background-position:bottom center;}
.homepageStart{height:100vh;}
.homepageStart h1{font-size:4rem;}
.homepageStart img{width:85%;}

/*forms*/
.inschrijfformulierWrapper{height:calc(100% - 92px);}
}

@media(min-width:992px){
/*content*/
.btnContent:hover{color:var(--green); background-color:#FFF;}

.homepageStart img{width:55%;}
}