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

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');

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

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-weight: 300; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1.6; color: #5d5d5d; background: #6998ac; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: #6998ac; outline: none; text-decoration: none; transition: 0.3s ease-in-out; }
a:hover { color: #5d5d5d; }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 300; line-height: 1.1; margin: 0 0 10px; }
h1 { font-size: 35px; }
h2 { font-size: 32px; }
h3 { font-size: 29px; margin-bottom: 7px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 17px; line-height: 1.5; margin-bottom: 8px; }
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span { color: #6998ac; }
p { margin-bottom: 15px; }

/* form */
textarea,
input[type="tel"],
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"] { padding: 5px 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; box-shadow: none; font-size: 15px; height: 54px; width: 100%; border: 1px solid #d1d1d1; font-family: 'Lato', sans-serif; }
textarea { padding: 18px 15px; height: 261px; resize: none; }
textarea:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus { border-color: #6998ac; box-shadow: none; }
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder { color: rgba(0,0,0,0.4) }
textarea::-moz-placeholder,
input::-moz-placeholder { color: rgba(0,0,0,0.4) }
textarea::-ms-input-placeholder,
input::-ms-input-placeholder { color: rgba(0,0,0,0.4) }
textarea::placeholder,
input::placeholder { color: rgba(0,0,0,0.4) }
.is-error { border-color: #f00!important; }

.form-row { margin: 0 -10px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.form-col6 { padding: 0 10px; width: 50%; }

/* Button */
.button { padding: 7px 20px 5px; font-size: 17px; text-transform: uppercase; height: 45px; border: 0; outline: none; cursor: pointer; transition: 0.3s ease-in-out; border-radius: 0; color: #fff; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: #6998ac }
.button:hover { background: #40677a; }
.button--link { padding: 0; color: #6998ac; text-transform: uppercase; font-weight: 400; font-size: 11px; border: 0; height: auto; background: transparent; }
.button--link:hover { color: #5d5d5d; background: transparent; }

/* ### global classes ### */
.centered { padding-right: calc((100% - 1125px) / 2); padding-left: calc((100% - 1125px) / 2); }
.heading-line:after { content: ''; margin-top: 6px; height: 1px; width: 100px; display: block; background: #6998ac; }

/* ### mm-menu ### */
.mm-menu { background: #588194; }
.mm-listview > li > a,
.mm-listview > li > span { color: rgba(255,255,255, 0.8); }
.mm-listview > li:not(.mm-divider):after { border-color: rgba(255,255,255, 0.1); }
.mm-menu .mm-navbar a,
.mm-menu .mm-navbar > * { color: #fff; }
.mm-navbar { border-color: rgba(255,255,255, 0.5); }
.mm-menu .mm-listview > li.is-active > a:not(.mm-next),
.mm-menu .mm-listview > li.is-active > span,
.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next),
.mm-menu .mm-listview > li.mm-selected > span { background: #6998ac; }
.mm-menu .mm-listview > li.mm-selected:after { border-color: #6998ac; }

/* ### wrapper ### */
#wrapper { padding-top: 148px; position: relative; overflow: hidden; width: 100%; background: #fff; }
#wrapper.is-sticky { padding-top: 113px; }

	/* ### header container ### */
	#headerCntr { z-index: 9; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: fixed; top: 0; left: 0; width: 100%; background: #6998ac; }
	#headerCntr:before { z-index: -1; content: ''; display: block; position: absolute; left: 0; width: calc(50% - 298px); top: 0; height: 100%; background: #fff; }
	#headerCntr .logo { margin: 4px auto 4px 43px; max-width: 124px; display: block; width: 100%; }
	#headerCntr .logo img { width: 100%; display: none; }
	#headerCntr .logo img:first-of-type { display: block; }
	#headerCntr .toggle { display: none; width: 30px; height: 25px; position: relative; }
	#headerCntr .toggle span { display: block; height: 2px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; font-size: 0; color: transparent; background: #fff; }
	#headerCntr .toggle span:after,
	#headerCntr .toggle span:before { content: ''; display: block; width: 100%; height: 2px; position: absolute; left: 0; background: #fff; }
	#headerCntr .toggle span:before { top: -10px; }
	#headerCntr .toggle span:after { bottom: -10px; }
	#headerCntr.is-sticky { box-shadow: 0 2px 2px rgba(0,0,0,0.1); }
	#headerCntr.is-sticky .logo img:first-of-type { display: none; }
	#headerCntr.is-sticky .logo img:last-of-type { display: block; }
	.mm-opened #headerCntr .toggle span { background: transparent; }
	.mm-opened #headerCntr .toggle span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) }
	.mm-opened #headerCntr .toggle span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
		
		/* ### menu box ### */
		.menuBox nav > ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
		.menuBox nav > ul > li { margin-left: 53px; }
		.menuBox nav > ul > li > a { color: #fff; font-weight: 400; font-size: 16px; text-transform: uppercase; display: block; position: relative; }
		.menuBox nav > ul > li > a:after { content: ''; transition: 0.3s ease-in-out; display: block; height: 2px; width: 0; position: absolute; right: 0; top: 100%; background: #fff; }
		.menuBox nav > ul > li.is-active > a:after,
		.menuBox nav > ul > li:hover > a:after { left: 0; right: auto; width: 100%; }

	/* ### banner container ### */
	#bannerCntr { border-bottom: 8px solid #6998ac; min-height: 250px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
	#bannerCntr img { visibility: hidden; }

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

		/* ### about box ### */
		.aboutBox { padding-top: 34px; padding-bottom: 20px; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
		.aboutBox p { margin-bottom: 8px; }
		.aboutBox .content { width: 50% }
		.aboutBox .images { padding: 32px 0 0 0; width: 41%; }
		.aboutBox .images ul { margin: 0 -10px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
		.aboutBox .images ul li { padding: 0 10px; margin-bottom: 20px; width: 33.3%; }
		.aboutBox .images ul li img { width: 100%; }

		/* ### project box ### */
		.projectBox { padding-top: 5px; padding-bottom: 5px; }
		.projectBox h2 { margin-bottom: 15px; text-transform: uppercase; }
		.projectBox ul { margin: 0 -12px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
		.projectBox ul li { padding: 0 12px; margin-bottom: 24px; width: 25%; }
		.projectBox ul li img { width: 100%; }
		
		/* ### contact box ### */
		.contactBox { padding-top: 50px; padding-bottom: 15px; text-align: center; background: #f7f7f7; }
		.contactBox > p { font-size: 15px; }
		.contactBox h2 { margin-bottom: 5px; font-size: 40px; }
		.contactBox h2:after { margin: 7px auto 0; }
		.contactBox form { padding-top: 20px; text-align: left; }
		.contactBox button[type="submit"]{ min-width: 277px; }

		/* ### klanten box ### */

		.klantenBox .slider {
			margin-top: 30px;
		}
		
	/* ### footer container ### */
	#footerCntr { padding-top: 14px; padding-bottom: 14px; font-weight: 400; color: #fff; background: #6998ac; }
	#footerCntr a { color: #fff; }
	#footerCntr a:hover { color: #5d5d5d; }
	#footerCntr ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
	#footerCntr ul li+li:before { content: '|'; margin: 0 3px; display: inline-block; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1155px) {
	.centered { padding-left: 15px; padding-right: 15px; }
}

@media only screen and (max-width: 1199px) {
	#wrapper { padding-top: 122px; }
	#wrapper.is-sticky { padding-top: 75px; }

	#headerCntr:before { width: 130px; }
	#headerCntr .logo { margin: 5px 0; max-width: 100px; }

	.aboutBox .images { padding-right: 0; }
}

@media only screen and (max-width: 991px) {
	h2 { font-size: 28px; }

	#wrapper { padding-top: 110px; }
	#wrapper.is-sticky { padding-top: 72px; }

	#headerCntr:before { width: 110px; }
	#headerCntr .logo { margin: 10px 0; max-width: 80px; }
	.menuBox nav > ul > li { margin-left: 30px; }

	.aboutBox .images ul li { width: 50%; }

	.projectBox ul { margin: 0 -5px }
	.projectBox ul li { padding: 0 5px; margin-bottom: 10px; }

	.contactBox button[type="submit"] { min-width: 0; }
}

@media only screen and (max-width: 767px) {
	h2 { font-size: 25px; }
	h3 { font-size: 23px; }

	.form-col6 { width: 100%; }
	textarea { height: 150px; }

	#wrapper.is-sticky,
	#wrapper { padding-top: 49px; }

	#headerCntr:before { width: 90px; }
	#headerCntr .logo { margin: 5px 0; max-width: 60px; }
	#headerCntr .toggle { display: block; }
	#headerCntr .logo img:first-of-type { display: none; }
	#headerCntr .logo img:last-of-type { display: block; }
	.menuBox { display: none; }

	.aboutBox .images,
	.aboutBox .content { width: 100%; }
	.aboutBox .images ul { margin: 0 -5px; }
	.aboutBox .images ul li { padding: 0 5px; margin-bottom: 10px; width: 33.3%; }

	.projectBox ul li { width: 50%; }

	.contactBox { padding-top: 30px; }
	.contactBox h2 { font-size: 26px; }
}

@media only screen and (max-width: 575px) {
	.aboutBox .images ul li { width: 50%; }
}