html, body{color: #161615; font-family: 'Raleway', sans-serif; font-size: 1.1em; line-height: 1.9; scroll-behavior: smooth;}
a{color: #161615; text-decoration:none; transition: all 0.5s;}
*{padding:0; margin:0;}
.social {margin: 0!important;}
.social li{display:inline-block; margin: 0 25px 25px 0; width: 50px; height: 50px;}
.social li a{border-bottom: none!important;}
.social li a svg{fill: #003282; width: 100%; vertical-align: middle; transition: all 0.5s;}
.clear { clear: both;}
.center { margin: 0 auto; max-width: 1500px;}
.grecaptcha-badge{z-index:100;}
.btn{line-height: 1em; font-size: 1em; color:#fff; background:#003282; display:inline-block; padding:15px; font-weight: 700; text-align: center; border-radius: 10px; border: none; transition: all 0.5s;}
.error{ background:#fff; border:#C4060A 1px solid; color:#C4060A; padding:10px; margin:25px 0!important; border-radius: 15px;}
.error li{ margin-left:25px; }
.succes{ background:#fff; border:#03af07 1px solid; color:#03af07; padding:20px; margin:25px 0!important; border-radius: 15px;}

.mm-spn.mm-spn--light{background: #003282!important; color: #fff!important; }
.mm-spn a.active{color:#e5eaf2;}

.sl-wrapper .sl-image .sl-caption{background: rgba(255,255,255,.8)!important; color: #161615!important;  font-size: 1.1em!important; font-weight:500!important; width:85%!important; left:auto!important; bottom: 25px!important; border-radius: 10px 0 0 10px;}
.sl-wrapper .sl-image img{border-radius: 10px;}
.sl-overlay{background: #000!important;}

.popup{display:block; transition: 1s; max-width:0; max-height:0; overflow:hidden; overflow-y: scroll; box-shadow: 0 0 20px #000; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 75%; max-width: 500px; background:#e5eaf2; padding: 0; z-index:200;}
.popup p{text-align: left!important;}
.popup.show{max-width:90vw; max-height:90vh; padding: 25px;}
.popup a{color:#fff; text-decoration:none;}
.popup .alignRight{text-align: right!important;}
.popup .btn{cursor:pointer;}
.popup p{margin: 0px 0px 25px!important;}
.popup ul {display: list-item!important; list-style: initial!important; margin: 0 0 25px 25px!important; }

.content{}
.content h1{font-size: 2.5em; margin: 0 0 15px 0; line-height: 1;}
.content h2{font-size: 1.8em; margin: 0 0 50px 0; line-height: 1; color:#ff9300;}
.content h3, .content h6{font-size: 1.4em; margin: 0 0 15px 0; line-height: 1.2; color:#003282;}
.content p{margin: 0 0 25px 0;}
.content ul, .content ol{margin: 0 0 25px 25px;}
.content img, .content iframe {max-width:100%; border-radius: 15px;}
.content table, .content table tr{border:0;}
.content table tr td{width:50%!important; padding: 5px; vertical-align: top!important; border:0!important; height: auto!important;}
.content table tr td table tr td{padding: 5px!important;}
.content table tr td table{margin-bottom: 25px!important;}
.content table tr td:first-of-type{padding-left:0;}
.content table tr td:last-of-type{padding-right:0;}
.content table tr td img{max-width:100%!important; height: auto;}

header{position: absolute; width: 100%; z-index: 15; transition: all 0.5s;}
header .logoMenuHolder{padding: 50px 0; transition: all 0.5s;}
header.sticky .logoMenuHolder{padding: 5px 0;}
header .logoMenuHolder .center{display:flex; align-items: center;}
header .logo{width:calc(33% - 25px); margin:0 25px 0 0;}
header .logo picture * {width: 100%; max-width: 350px; transition: all 0.5s; display: block;}
header.sticky picture * {width: 70%; margin-top: 5px; }

header nav{width:67%; font-size:1.1em; font-weight: bold; line-height: 1;}
header nav ul{list-style:none; display: flex; float: right;}
header nav ul li{padding: 0 10px;}
header nav ul li a{display:block; padding:10px; color:#fff; border-bottom: 1px solid transparent;}
header nav ul li a:hover, header nav ul li:hover > a{border-bottom-color:#fff;}
header nav ul li a.active{color:#e5eaf2;}
header nav ul li.home{/*display:none;*/}
header .mobileMenuHolder{display:none;}


.hero{position:relative; top:0; right:0; bottom:0; left:0; background:#003282;}
.hero .holder{max-width:3000px; margin: 0 auto;}
.hero .heroImage{width:100vw; height:100vh; max-width:100%; max-height: 2000px; position:relative;}
.hero .heroImage:after{ content:''; background:rgba(0,50,130,.8); position: absolute; top: 0; width: 100%; height: 100%;}
.hero .heroImage picture{display:block; width: 100%; height:100%; }
.hero .heroImage picture *{width: 100%; height:100%; object-fit:cover;}
.hero .heroTxt{padding: 0 0 100px 0; z-index:10; position:absolute; top:0; right:0; bottom:0; left:0; align-content: end;}
.hero .heroTxt img{display:block; width: 50%; max-width: 400px; opacity: 0.5;}
.hero .heroTxt h1{font-size:3.0em; line-height:1.1; width: 80%; max-width:800px; color: #fff;}
.hero .heroTxt h1 span{color:#ff9300; }
.hero .heroTxt .btn{color:#003282; background: #fff no-repeat right center url("/images/arrow-blue-down.svg"); background-size: 20px; padding: 15px 55px 15px 15px; text-align: left; margin: 50px 0 0 0; background-position: right 15px center;}

main{}
main a:not(.btn){color:#003282; border-bottom:1px solid #003282;}
main section{padding: 100px 0 125px 0;}
main .slick-track {display: flex !important;}
main .slick-slide{ height: inherit !important;}
main .slick-arrow{width: 60px; height:60px; cursor:pointer; font-size:0; border:0; position: absolute; bottom: -80px; z-index: 100; background:none; background-repeat: no-repeat; background-size: 25px; background-position: center; background-color:#003282; transition: 0.5s; border-radius: 10px;}
main .slick-next{rotate: -90deg; left: calc(50% + 20px); background-image: url("/images/arrow-white-down.svg"); }
main .slick-prev{rotate: 90deg; left: calc(50% - 80px); background-image: url("/images/arrow-white-down.svg");}
main .slick-disabled{opacity: 0; cursor:default;}
main #over-mij .center{display:flex; }
main #specialisatie{background:#e5eaf2;}
main #specialisatie .center{display:flex; }
main #over-mij .btn{background: #003282 no-repeat right center url("/images/arrow-white-down.svg"); background-size: 20px; padding: 15px 55px 15px 15px; text-align: left; background-position: right 15px center;}
main #specialisatie .btn{color:#003282; background: #fff no-repeat right center url("/images/arrow-blue-down.svg"); background-size: 20px; padding: 15px 55px 15px 15px; text-align: left; background-position: right 15px center;}
main .txt{width: calc(50% - 40px); margin: 0 40px 0 0;}
main .image{width: 50%;}
main .txt2{width: calc(50% - 102px); border:1px solid #003282; border-radius: 15px; padding:50px; }
main .image .photos, main .image .photos *{height:100%; border-radius: 15px;}
main .image .photos .photo{position: relative;}
main .image .photos .photo picture{left: 0; top: 0; right: 0; bottom: 0; position: absolute; height:100%!important; width:100%!important; display:block!important;}
main .image .photos .photo picture *{height:100%!important; width:100%!important; display:inline!important; object-fit:cover;}
main .image .photos .photo p{aspect-ratio: auto; text-align:center; color: #fff; background:rgba(0,50,130,.8); padding: 10px; border-radius: 10px 0 0 10px; font-weight: 500; font-size: 1em; height: auto; width: 80%; bottom: 50px; right: 10%; position: absolute; z-index: 10; line-height: 1;}
main .image .photos .slick-arrow{width: 60px; height:60px; border-radius: 10px;}
main #resultaten .item {}
main #resultaten .item .holder {display:flex;  padding: 25px; }
main #resultaten .item .holder .photos{ display:flex; }
main #resultaten .item .holder .photos picture{position:relative; width: calc(50% - 5px); margin: 0 5px 0 0; display:block; aspect-ratio: 4/3;}
main #resultaten .item .holder .photos picture:nth-of-type(2){margin: 0 0 0 5px;}
main #resultaten .item .holder .photos picture *{width:100%; height:100%; object-fit: cover;}
main #resultaten .item .holder .photos picture span{position:absolute; left:0; bottom:0; display:block; width: 100px; height: 50px; line-height: 50px; background-color: rgba(255, 147, 0, 0.7); color:#fff; font-weight:bold; text-align:center; border-radius: 0 15px;}
main #resultaten .item .holder .description{height:100%; width: calc(33% + 25px); padding: 0 0 0 25px; }
main #resultaten .item .holder .description ul{list-style: none; margin: 0 0 25px 0;}
main #resultaten .item .holder .description ul li{background: transparent url("/images/check.svg") no-repeat left center;padding: 0 0 0 45px; color: #003282;}
main #resultaten .slick-slide{background:#e5eaf2; border-radius: 15px;}
main #resultaten .slick-slide div{height: calc(100% - 15px);}
main #reviews {background:#003282; padding: 50px 0; color:#fff; margin-bottom: 50px;}
main #reviews .center{margin: 0 0 0 auto; max-width: calc((100% - 1500px)/2 + 1500px);}
main #reviews .reviewsSliderHolder{padding: 0 0 30px 0;}
main #reviews .item {height: 100%!important;}
main #reviews .item .inner{height: 100%!important; padding: 35px; margin: 0 10px; border: 1px solid #4065a1; border-radius: 10px;}
main #reviews .item .reviewStars ul{list-style:none; margin:0; padding:0;}
main #reviews .item .reviewStars ul li{display:inline-block; margin: 0 10px 0 0; color:#fff; font-size: 30px;}
main #reviews .item .content{margin: 0 0 15px 0;}
main #reviews .item .title{font-weight:bold;}
main #reviews .slick-slide div{height: calc(100% - 72px);}
main #reviews .slick-slide div div{height:auto;}
main #reviews .more .btn{height: 28px; line-height: 28px; background: transparent url("/images/google.svg") no-repeat; background-position: 25px center; padding-left:75px; border: 1px solid #4065a1;}
main #reviews .slick-arrow{bottom: -89px; background-color:#ff9300;}
main #reviews .slick-next{left: calc(100% - 100px);}
main #reviews .slick-prev{left: calc(100% - 175px);}

footer{padding: 50px 0 0 0;}
footer .holder{display:flex; flex-wrap: wrap; padding: 0 0 60px 0;}
footer .block{flex: 35%; padding:0;}
footer .block:nth-of-type(2) {flex: 32%; padding:0 3%;}
footer .block:nth-of-type(3) {flex: 20%;}
footer .block .logo{width:80%; max-width:250px; padding:25px 0 0 0;}
footer .block .logo picture *{width:100%; border-radius: 0;}
footer .buttons {padding: 15px 0 25px 0;}
footer .buttons .btn{background: #7cb160 no-repeat 15px center url("/images/icon-wa-white.svg"); background-size: 25px; padding: 15px 15px 15px 55px; text-align: left;}
footer .buttons .btn:nth-of-type(1){margin: 0 15px 15px 0;}
footer .buttons .btn:nth-of-type(2){background: #003282 no-repeat 15px center url("/images/icon-phone.svg"); background-size: 20px;}

footer .bottom{background:#003282;padding: 25px 0; font-weight:600;}
footer .bottom .center{display:flex; align-items: center;}
footer .bottom a{color:#fff;}
footer .bottom ul{flex: calc(100% - 300px); display:flex; list-style:none; margin:0;}
footer .bottom ul li{margin: 0 20px 0 0;}
footer.content .bottom p{flex: 300px; margin:0; text-align:right;}
footer.content .bottom p a{color:#8099c1;}


@media only screen and (min-width: 1500px) {
	/* Hover effects only on big screens*/
	
	.social li a:hover{padding:0;}
	.social li a:hover svg{fill: #ff9300;}
	
	.btn:hover{color:#fff; background-color:#ff9300;}
	
	.hero .heroTxt .btn:hover{background-color:#e5eaf2;}

	main a:not(.btn):hover{border-bottom:1px solid #ff9300;}
	main .slick-arrow:hover{background-color:#ff9300;}
	main #reviews .slick-arrow:hover{background-color:#4065a1;}
	main #reviews .more .btn:hover{border-color:#ff9300;}

	footer .buttons .btn:hover{background-color: #ff9300;}
}


@media only screen and (max-width: 1550px) {
	.center {margin: 0 50px; }

	main #reviews .center{margin: 0 50px;}	
}

@media only screen and (max-width: 1250px) {
	header nav{font-size: 1em;}
	header nav ul li a{padding: 15px 5px 15px 5px;}

	main .slick-arrow{width: 40px; height:40px; /*bottom: -60px;*/ top:-80px; background-size: 15px;}
	main .image .photos .slick-arrow{width: 40px; height:40px;}
	main .slick-next{left: calc(100% - 40px);}
	main .slick-prev{left: calc(100% - 90px);}	
	main #over-mij .slick-arrow{bottom: -60px; top: unset;}
	main #over-mij .slick-next{left: calc(50% + 10px);}
	main #over-mij .slick-prev{left: calc(50% - 50px);}		
	main #resultaten .slick-slide div{height: auto;}
	main #resultaten .item .holder {flex-wrap: wrap;}
	main #resultaten .item .holder .photos{width: 100%;}
	main #resultaten .item .holder .description{width:100%; padding: 25px 0 0 0; }
	main #reviews .slick-arrow{bottom: -69px;}
	main #reviews .slick-next{left: calc(100% - 40px);}
	main #reviews .slick-prev{left: calc(100% - 90px);}
	main #reviews .more .btn{height: 8px; line-height: 8px; background-size: 25px; background-position: 15px center;}
		
	footer .block{flex: 30%;}
	footer .block:nth-of-type(3) {flex: 30%;}	
}

@media only screen and (max-width:1000px) {
	.center { margin: 0 25px; }	
	
	.content h1{font-size: 2.0em;}
	.content h2{font-size: 1.5em;}
	.content h3, .content h6{font-size: 1.2em;}

	header .logo{width:300px;}
	header.sticky picture * {width: 80%; margin-top: 5px; }
	header nav{display:none;}
	header .mobileMenuHolder{padding: 3px 0 0 0; width: calc(100% - 300px); display: block;}
	header .mobileMenu {background:#fff; border-radius:5px; padding: 3px 5px 15px 10px; width: 85px; height: 25px; float:right; line-height:50px; } 
	header .mobileMenu .mobileNav{display:block; height: 27px; width: 80px; }
	header .mobileMenu .mobileNav .hamburger{width:30px; height:30px; float:left;}
	header .mobileMenu .mobileNav .txt{color:#003282; font-weight:bold; font-size: 15px; line-height: 35px; width:50px; height:30px; float:left; text-align: right;}
	header .mobileMenu .mobileNav .bar1, header .mobileMenu .mobileNav .bar2, header .mobileMenu .mobileNav .bar3 {background: #003282; width: 100%; height: 2px; margin: 8px 0; transition: all 0.5s;}	
	header .mobileMenu .menuOpen .bar1 {transform: translate(0, 10px) rotate(-45deg);}
	header .mobileMenu .menuOpen .bar2 {opacity: 0;}
	header .mobileMenu .menuOpen .bar3 {transform: translate(0, -10px) rotate(45deg);}

	.hero .heroTxt h1{font-size: 2.0em;}
	
	main section{padding: 75px 0;}
	main #over-mij .center{display: block;}
	main #specialisatie .center{display: block;}
	main .txt{width:100%; margin: 0 0 75px 0;}
	main .image{width: 100%;}
	main .image .photos, main .image .photos *{aspect-ratio: 4/3; height:auto;}
	main .txt2{width: calc(100% - 102px);}
	main #reviews .center{margin: 0 25px;}

	footer .block{flex: 45%; padding:0 10% 0 0; order: 1;}
	footer .block:nth-of-type(2) {padding:40px 0 0 0; flex: 100%; order: 3;}
	footer .block:nth-of-type(3) {padding:0; flex: 45%; order: 2;}	
	footer .bottom{font-size: 0.8em;}
	footer .bottom ul{flex: calc(100% - 200px);}	
	footer.content .bottom p{flex: 200px;}
}


@media only screen and (max-width: 750px) {
	.content table tr td, .content table col{display:block; width:100%!important; padding: 25px 0 0 0; }
	
	main #resultaten .item .holder .photos{display:block; }
	main #resultaten .item .holder .photos picture{width: calc(100% - 5px); margin: 0 0 5px 0;}
	main #resultaten .item .holder .photos picture:nth-of-type(2){margin: 5px 0 0 0;}	
	main #reviews {margin-bottom: 25px;}
	main #reviews .item .inner{margin: 0;}
	main #reviews .more .btn span{display:none;}
	

	footer .bottom{line-height: normal;}
}

@media only screen and (max-width: 500px) {
	.content td{ display:block; width:100%!important; }

	header .logo{width:200px;}
	header .mobileMenuHolder{width: calc(100% - 200px);}
	
	.hero .heroTxt h1{font-size: 1.4em;}
	
	main .txt2{width: calc(100% - 52px); padding: 25px;}
	main #over-mij .btn, main #specialisatie .btn {width: calc(100% - 70px);}
	main #reviews h2{max-width: calc(100% - 80px);}
	
	footer{padding: 50px 0 0 0;}	
	footer .block{flex: 100%; padding:0 0 40px 0; order: 1;}
	footer .block:nth-of-type(2) {padding:0 0 40px 0; order: 2;}
	footer .block:nth-of-type(3) {padding:0; flex: 100%; order: 3;}
	footer .buttons{padding: 0 0 25px 0;}	
	footer .bottom .center{display:block;}
	footer .bottom ul{flex: none; display:block;}
	footer .bottom ul li{text-align:center; padding:5px 0;}
	footer.content .bottom p{flex: none; padding:20px 0 0 0; text-align:center;}			
}

@media only screen and (max-height: 500px) {
	.hero .heroImage{height:200vh; }
}
