/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@font-face {
	font-family: 'Avenir LT Std';
	src: url('../fonts/avenir/AvenirLTStd-Roman.woff2') format('woff2'),
	url('../fonts/avenir/AvenirLTStd-Roman.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir LT 65';
	src: url('../fonts/avenir/AvenirLT-Black.woff2') format('woff2'),
	url('../fonts/avenir/AvenirLT-Black.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* #Site Styles
================================================== */

/* ### general ### */
html,
body { font-family: 'Avenir LT Std', sans-serif; font-weight: normal; font-size: 25px; color: #000; line-height: 1.5; }
body { background: #fff; }
img { display: block; border: 0; max-width: 100%; }
:focus { outline: none; }
ul,
li { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; display: inline-block; }

h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Avenir LT 65', sans-serif; line-height: 1.2; font-weight: bold; }

h1 { font-size: 55px; }
h2 { font-size: 55px; }
h3 { font-size: 40px; }
h4 { font-size: 28px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.container { max-width: 1630px; }
.form-control { padding: 10px 20px; font-family: 'Avenir LT Std', sans-serif; font-size: 25px; border: 0; background-color: #fff; border-radius: 0; width: 100%; color: #000; height: 62px; }
.form-control::placeholder,
textarea::placeholder { color: #000; }
.form-control:focus { box-shadow: inherit; outline: inherit; border: 0; }
.btn { padding: 15px 28px; font-family: 'Avenir LT 65', sans-serif; font-weight: bold; transition: all 0.3s; text-transform: uppercase; line-height: 1.1; }
.btn-primary { background-color: #007495; color: #fff; font-size: 25px; }
.btn-primary:hover { background-color: #016987; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { padding-top: 42px; padding-bottom: 30px; position: relative; z-index: 9; }
#headerCntr .phone { padding-bottom: 27px; }
#headerCntr .tel { display: flex; justify-content: flex-end; color: #1a0000; font-size: 30px; transition: all 0.3s; }
#headerCntr .tel:hover { color: #016987; }
#headerCntr .icon { margin-right: 20px; font-size: 34px; }

/* ### mobileMenu ### */
.mobileMenu { position: absolute; top: 11px; right: 7px; z-index: 15; display: none; float: left; width: 40px; height: 40px; transition: 0.2s; cursor: pointer; overflow: hidden; }
.mobileMenu span { position: absolute; top: 50%; right: 20%; left: 20%; display: block; height: 3px; text-indent: -9999px; background: #000; transition: 0.2s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 3px; background-color: #000; transition-duration: 0.2s, 0.2s; content: ''; }
.mobileMenu span:before { top: -8px; }
.mobileMenu span:after { bottom: -8px; }

/* ### mm-opened ### */
.mm-opened .mobileMenu span { background: none; }
.mm-opened .mobileMenu.is-active span:before,
.mm-opened .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
.mm-opened .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mm-opened .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* ### menu box ### */
.menuBox:not(.mm-menu) { display: none; }
.menuBox:not(.mm-menu) ul > li { margin-right: 20px; position: relative; display: inline-block; }
.menuBox:not(.mm-menu) ul > li:hover ul { opacity: 1; visibility: visible; }
.menuBox:not(.mm-menu) ul li:last-child { margin-right: 0; }
.menuBox:not(.mm-menu) ul li a { color: #007495; }
.menuBox:not(.mm-menu) ul > li > ul { padding: 30px; position: absolute; top: 100%; left: 0; background-color: #b9e6fd; width: 250px; opacity: 0; visibility: hidden; transition: all 0.3s; }
.menuBox:not(.mm-menu) ul > li > ul > li { display: block; }

/* ### content container ### */
#contentCntr { width: 100%; }

/* ### banner box ### */
.bannerBox { position: relative; /* height: 798px; */ height: 534px; }
.bannerBox .navigation { padding: 36px 0 45px 60px; max-width: 490px; position: relative; z-index: 1; }
.bannerBox ul > li { position: relative; padding: 10px 0 10px 20px; margin-bottom: 20px; border-radius: 20px; background-color: #007495; }
.bannerBox ul > li:hover { background: #000; }
.bannerBox ul > li img { float: left; margin-right: 10px; width: 30px; }
.bannerBox ul > li:hover ul { opacity: 1; visibility: visible; }
.bannerBox ul > li:last-child { margin-bottom: 0; }
.bannerBox ul > li > a { padding-right: 50px; color: #fff; font-family: 'Avenir LT 65', sans-serif; transition: all 0.3s; }
.bannerBox ul > li > a:hover { color: #b9e6fd; }
.bannerBox ul > li > ul { padding: 35px 20px 41px 56px; position: absolute; top: -34px; right: -490px; background-color: #b9e6fd; width: 490px; opacity: 0; visibility: hidden; transition: all 0.3s; }
.bannerBox ul > li > ul:before { width: 26px; height: 19px; background-color: #b9e6fd; position: absolute; top: 43px; left: -26px; content: ''; }
.bannerBox ul > li > ul > li > a { color: #007495; padding-right: 0; }
.bannerBox ul > li > ul > li > a:hover { color: #016987; }
.bannerBox .image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.bannerBox img { width: 100%; height: 100%; object-fit: cover; }

/* ### intro box ### */
.introBox { margin-bottom: 101px; padding-top: 105px; }
.introBox .text { max-width: 1380px; padding-left: 56px; }
.introBox .sub { margin-bottom: 12px; position: relative; font-size: 35px; }
.introBox .sub span { color: #007495; }
.introBox .icon { position: absolute; top: 3px; left: -56px; }
.introBox h1 { margin-bottom: 13px; }
.introBox p { margin-bottom: 0; line-height: 2; }

/* ### over box ### */
.overBox { margin-bottom: 86px; }
.overBox .bg { position: relative; margin-left: 56px; padding-top: 99px; padding-bottom: 250px; padding-left: 121px; width: calc(100% + 160px); background-color: #007495; }
.overBox .bg:after { position: absolute; bottom: 0; left: 0; background: url('../images/over-layer.png') no-repeat; height: 198px; width: 1701px; object-fit: cover; content: ''; }
.overBox .sub { max-width: 422px; margin-bottom: 12px; position: relative; font-size: 35px; color: #fff; }
.overBox .icon { position: absolute; top: 3px; right: -56px; }
.overBox h2 { margin-bottom: 13px; color: #b9e6fd; }
.overBox p { margin-bottom: 0; line-height: 2; color: #fff; }
.overBox .image img { object-fit: cover; min-height: 734px; width: 100%; }
.overBox p { margin: 25px 0; }
.overBox ul { margin: 25px 0; }
.overBox ul, .overBox ul li { list-style: disc; color: #fff; padding-left: 20px; }

/* ### contact box ### */
.contactBox { margin-bottom: 150px; position: relative; }
.contactBox .title { margin-bottom: 50px; max-width: 470px; }
.contactBox .title .icon { margin-bottom: 40px; display: block; }
.contactBox .title .icon img { margin: 0 auto; }
.contactBox ul { margin-left: 120px; }
.contactBox li { margin-bottom: 15px; }
.contactBox li:last-child { margin-bottom: 0; }
.contactBox li a { color: #000; font-size: 45px; display: flex; align-items: center; transition: all 0.3s; }
.contactBox li a:hover { color: #007495; }
.contactBox li .icon { margin-right: 19px; }
.contactBox .box { padding: 62px 73px 60px; max-width: 720px; background: #b9e6fd; margin-left: auto; }
.contactBox .form-group { margin-bottom: 35px; }
.contactBox .form-group:last-child { margin-bottom: 0; }
.contactBox textarea { height: 224px; }
.contactBox .btn { border: 0; border-radius: 0; }
.contactBox .image { position: absolute; top: -360px; left: 0; z-index: -1; }
.contactBox .cfield { display: none; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; }

/* ### footer box ### */
.footerBox { padding-top: 88px; padding-bottom: 90px; position: relative; background: #000; }
.footerBox .row { padding-left: 56px; position: relative; z-index: 1; }
.footerBox .title { font-size: 55px; font-family: 'Avenir LT 65', sans-serif; color: #b9e6fd; margin-bottom: 7px; }
.footerBox p { margin-bottom: 1px; color: #fff; line-height: 2; }
.footerBox address { font-style: normal; margin-bottom: 50px; color: #fff; line-height: 2; }
.footerBox ul { margin-bottom: 57px; }
.footerBox li { display: flex; color: #fff; line-height: 2; }
.footerBox li span { width: 140px; }
.footerBox li a { color: #fff; transition: all 0.3s; }
.footerBox li a:hover { color: #b9e6fd; }
.footerBox .kvk { display: flex; color: #fff; }
.footerBox .kvk span { width: 140px; }
.footerBox .navigation ul { margin-bottom: 0; text-align: right; }
.footerBox .navigation li { justify-content: flex-end; width: 100%; }
.footerBox .navigation li a { color: #b9e6fd; }
.footerBox .navigation li a:hover { text-decoration: underline; }
.footerBox .image { position: absolute; top: 0; left: 50%; margin-left: 70px;}

/* ### custom ### */
.overBox a { text-decoration: underline; color: #fff; }
.button { padding: 10px 20px 10px 20px; color: #fff; border-radius: 20px; background: #007495; }
.button:hover { color: #fff; background: #000; }
.button img { float: left; margin-top: 10px; margin-right: 10px; width: 30px; }
.overBox h3 { margin-top: 30px; margin-bottom: -20px; color: #fff; }
.float { position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; }
.my-float { margin-top:16px; }
.referenties { width: 100%; }
.referentie { float: left; margin-right: 20px; margin-bottom: 20px; text-align: center; padding: 20px; max-width: 40% !important; min-height: 1100px; border: 3px solid #317292; border-radius: 10px; background: #fff; }
.referentie img { display: inline-block; height: 100px; }
.clear { clear: both; }

/* #Media Queries
================================================== */

@media only screen and (max-width: 1500px) {
	.overBox .bg { padding-left: 60px; width: calc(100% + 15px); }
	.overBox h2 { font-size: 48px; }
	.overBox p { font-size: 22px; }
	.contactBox ul { margin-left: 0; }
}

@media only screen and (max-width: 1199px) {
	h1 { font-size: 40px; }
	h2 { font-size: 40px; }

	#headerCntr { padding-top: 15px; padding-bottom: 10px; }
	#headerCntr .logo { max-width: 400px; }
	#headerCntr .tel { font-size: 24px; }
	#headerCntr .icon { font-size: 30px; margin-right: 15px; }
	.bannerBox { height: 498px; }
	.bannerBox .navigation { padding: 35px 0 35px 35px; max-width: 388px; }
	.bannerBox ul > li { margin-bottom: 15px; }
	.bannerBox ul > li > ul { padding: 35px 20px 35px 35px; width: 250px; right: -250px; }
	.bannerBox ul > li > a { font-size: 20px; }
	.introBox { padding-top: 80px; margin-bottom: 80px; }
	.introBox p { font-size: 20px; line-height: 1.8; }
	.overBox h2 { font-size: 40px; }
	.overBox .sub { max-width: 365px; font-size: 30px; margin-bottom: 8px; }
	.overBox p { font-size: 20px; }
	.contactBox .box { padding: 40px 40px 40px; }
	.contactBox li a { font-size: 38px; }
	.contactBox .title { max-width: 350px; }
	.footerBox .row { padding-left: 0;}
}

@media only screen and (max-width: 991px) {
	.overBox { margin-bottom: 25px; }
	.overBox h2 { font-size: 30px; }
	.overBox p { font-size: 18px; }
	.overBox .bg { padding-left: 40px; }
	.contactBox li a { font-size: 28px; }
	.footerBox { padding-top: 50px; padding-bottom: 50px; }
	.footerBox .title { font-size: 40px; }
	.footerBox ul { margin-bottom: 30px; }
	.footerBox li { font-size: 20px; }
	.footerBox p { font-size: 20px; }
	.footerBox address { font-size: 20px; margin-bottom: 30px; }

}

@media only screen and (max-width: 767px) {
	h1 { font-size: 30px; }
	h2 { font-size: 30px; }

	body { font-size: 18px; }
	#headerCntr .mobileMenu { display: block; }
	#headerCntr .logo { max-width: 170px; }
	#headerCntr .phone { padding-bottom: 14px; padding-right: 40px; }

	#headerCntr .tel span { display: none; }
	#headerCntr .icon { font-size: 22px; margin-right: 0; }
	.bannerBox { height: 298px; }
	.bannerBox .navigation { display: none; }
	.mm-listview > li > a,
	.mm-listview > li > span { font-size: 14px; }
	.introBox { padding-top: 50px; margin-bottom: 50px; }

	.introBox .sub { padding-left: 56px; font-size: 25px; }
	.introBox .text { padding-left: 0;}
	.introBox .icon { top: -2px; left: 0; }
	.overBox .icon { display: none; }
	.overBox .sub { font-size: 24px; max-width: 100%; }
	.overBox h2 { font-size: 30px; }
	.overBox .bg { padding: 50px 20px; margin-left: 0; width: 100%;  }
	.overBox .bg:after { width: 100%; height: 70px; }
	.overBox .image { padding-top: 30px; }
	.overBox .image img { min-height: auto; }
	.contactBox { margin-bottom: 50px; }
	.contactBox .box { padding: 40px 20px; max-width: 100%; }
	.contactBox .title { max-width: 260px; margin-bottom: 30px; }
	.contactBox ul { margin-bottom: 40px; }
	.contactBox li a { font-size: 24px; }
	.contactBox .image { display: none; }
	.footerBox { padding-top: 150px; }
	.footerBox li span { width: 100px; }
	.footerBox .kvk span { width: 100px; }
	.footerBox .navigation { padding-top: 30px; }
	.footerBox .navigation li { justify-content: unset; }
	.footerBox .image { width: 100%; margin-left: 0; transform: translateX(-50%); }
	.footerBox .image img { max-width: 302px; margin: 0 auto; }
	
	.button { margin-bottom: 20px; width: 100%; }
}

@media only screen and (max-width: 480px) {	
}

.cv-item { margin-bottom: 20px; padding: 20px; border: 1px solid #007495; border-radius: 20px; }