﻿body { font-family: 'Muli', sans-serif; font-size: 16px; line-height: 2; margin: 0; color: #000; }
	body.KMCMSeditor { padding: 20px; }

h1, h2, h3, h4, h5, h6 { font-family: 'Muli', sans-serif; }
h1 { font-weight: 400; color: #4b4b4d; margin-bottom: 30px; font-size: 36px; line-height: 1; }
h2 { font-weight: 400; color: #025a78; margin-bottom: 20px; font-size: 28px; margin-top: 30px; }
h3 { font-weight: 400; color: #4b4b4d; font-size: 24px; margin: 30px 0 20px 0; }
h4 { font-weight: 400; color: #025a78; font-size: 22px; }
h5 { font-weight: 400; color: #025a78; font-size: 20px; line-height: 1.8; }
h6 { font-weight: 400; color: #4b4b4d; font-size: 18px; }
p, ul, ol { color: #000; font-size: 18px; line-height: 1.8; font-weight: 300; }
.fa-li { color: #b2b2a2; }

.cc_more_info { color: #fff !important; text-decoration: underline !important; }
.cc_btn { color: #000 !important; }
.cc_container { background-color: #5f9a42 !important; }
.cc_message { color: #fff !important; }

.doclist { margin-left: 25px; font-size: 14px; line-height: 24px; }
td.ico { padding: 0 8px; }
a { transition: ease-in-out .30s; color: #000; text-decoration: none; }
	a:hover, a:focus, a:active { outline: none; text-decoration: none; }
	a:hover { color: #000; }

.page-loader { background: #fff; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 9998; }
.loader { position: absolute; width: 94px; height: 94px; top: 50%; left: 50%; margin: -47px 0 0 -47px; }

.home-intro {background-color:#025a78;padding:50px;margin-top:30px;}
.home-intro h1 {color:#fff;}
	.home-intro p { color: #fff; }
	.home-intro .btn { background-color: #aecad4; color:#fff; border-color:#aecad4;margin:12px 0; }
	.home-intro .btn:hover { color: #fff; border-color: #aecad4; }

.homeblok { padding-bottom: 70px; background: url(../images/sprite-1.png) 0 480px repeat-x; }
.slogan { font-size: 36px; font-weight: 700; text-align: center; line-height: 1.2; margin: 70px 0 0 0; }
	.slogan span { color: #025a78; font-weight: 900; }

.blok .col-xl-4, .blok .col-xl-3 { margin-bottom: 25px; }
.blok .card { border-radius: 0; border: 0; box-shadow: #ccc 0 0 30px; }
.blok .card-img-bottom, .blok .card-img-top { border-radius: 0; background-color: #fff; }
.blok .card .card-body { padding: 20px 30px 20px 30px; }
	.blok .card .card-body h2.card-title { font-size: 22px; line-height: 1.8; margin-top: 8px; font-weight: 700; color: #000; }
		.blok .card .card-body .card-title i { transition: ease-in-out all 0.3s; }
		.blok .card .card-body .card-title a:hover { border-bottom: solid 1px #000; }
			.blok .card .card-body .card-title a:hover i { margin-left: 8px; }
	.blok .card .card-body p { font-weight: 300; }
		.blok .card .card-body p.functie a, .blok .card .card-body p.functie .fa-light { color: #0c7a9f; }
.blok .card .card-footer { border-top: none; background-color: transparent; }
	.blok .card .card-footer .fa-light, .blok .card .card-footer a { color: #0c7a9f; }
.card-col .card .card-meer { font-size: 10px; text-transform: uppercase; }
	.card-col .card .card-meer:after { font-family: "Font Awesome 6 Pro"; content: "\f178"; color: #3e3e3e; margin-left: 6px; margin-right: 18px; transition: ease-in-out all 0.3s; }
	.card-col .card .card-meer:hover, .card-col .card .card-body .card-title a:hover { color: #000; }
		.card-col .card .card-meer:hover:after { margin-left: 18px; margin-right: 6px; }

.teamblok { padding: 40px 0 15px 0; }
	.teamblok .card { border: 0; border-radius: 0; }
		.teamblok .card .card-img-top { border-radius: 0; }
		.teamblok .card h5.card-title { text-align: center; font-weight: 700;color:#025a78; }
		.teamblok .card p { text-align: center; color: #000; }
		.teamblok .card p a {font-size:14px;}

/*		.teamblok .card::before { top: 100%; left: 0; right: 100%; bottom: 0; border-bottom: #025a78 solid 2px; }
		.teamblok .card::before { content: ""; opacity: 0; pointer-events: none; z-index: 3; position: absolute; box-sizing: border-box; transition: all 0.4s ease 0s; box-shadow: none; }
		.teamblok .card:hover::before { opacity: 1; bottom: 0; right: 0; }*/

.pagecontent { padding: 50px 0 40px 0; }

.image-box {overflow:hidden;position:relative;margin-bottom:25px;}
.image-box img { transform-origin: center; transition: transform 1.5s ease; transform: scale(1); }
.overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 24px; font-weight: bold; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; text-align:center; line-height:1.1; text-shadow:#000 0 0 15px; }
.image-box:hover .overlay-text { opacity: 1; }
.image-box:hover img { transform: scale(1.1); }
@keyframes zoomIn {
	from { transform: scale(1); }
	to { transform: scale(1.1); /* back to normal size */ }
}

.product-galery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, 1fr); gap: 40px; margin-bottom: 40px; }
.product-galery-item:nth-child(6n+1) { grid-area: 1 / 1 / 2 / 2; }
.product-galery-item:nth-child(6n+2) { grid-area: 1 / 2 / 2 / 3; }
.product-galery-item:nth-child(6n+3) { grid-area: 1 / 3 / 3 / 5; }
.product-galery-item:nth-child(6n+4) { grid-area: 2 / 1 / 4 / 3; }
.product-galery-item:nth-child(6n+5) { grid-area: 3 / 3 / 4 / 4; }
.product-galery-item:nth-child(6n+6) { grid-area: 3 / 4 / 4 / 5; }
.product-galery img {width:100%;}
.product-galery .thumbs {margin-bottom:0 !important;}

.productblok { padding: 40px 0 15px 0; }
.productblok .card { background-color: #fff; position: relative; }
	.productblok .card .img-banner { position: absolute; }
	.productblok .card h5 { font-size: 16px; }
	.productblok .card p { color: #000; font-size: 14px; }
	.productblok .card .prijs { color: #ed1c24; font-size: 22px; }
	.productblok .card .verkocht { color: #ddd; font-size: 22px; letter-spacing: 2px; }

.subblok { padding: 40px 0 15px 0; }
.subblok .card { background-color: #fff; }
	.subblok .card h5.card-title {  margin-bottom: 0; }
		.subblok .card h5.card-title a:hover { border-color: #5f9a42 !important; color: #5f9a42; }

.accordion { }
	.accordion .accordion-button { font-size: 30px; font-weight: 400; color: #4b4b4d; }
.accordion-button:focus { box-shadow: none; }
.accordion-button:not(.collapsed) { color: #000; background-color: #fff; font-weight: 700; }
h2.accordion-header { margin-top: 0; }

.breadcrumbcontainer { background-color: #025a78;padding-left:30px; }
.breadcrumb, .back-link { font-size: 14px; line-height: 1.8; border-bottom: 0; padding-left: 0; border-radius: 0; text-transform: lowercase; background-color: transparent; padding: 15px 0; margin: 0; letter-spacing: 1px; }
	.breadcrumb a, .back-link a { color: #fff; }
		.breadcrumb a:hover, .back-link a:hover { color: #aecad4; }
.breadcrumb-item + .breadcrumb-item::before { color: silver; content: ">"; }
.breadcrumbcontainer h1 {color:#fff;font-weight:700;padding-bottom:25px;}

.content { }
	.content p, .content ul { font-size: 18px; }
		.content p strong, .content p b { color: #000; }
	.content ul { list-style: none; padding: 0; margin-left: 1em; }
		.content ul li { padding-left: 1.9em; }
			.content ul li:before { content: '\e3d6'; font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: -1.9em; width: 1.9em; color: #025a78; font-weight: 700; }
	.content .fa-li { color: #025a78; }
	.content ul.fa-ul { margin-left: 25px; }
		.content ul.fa-ul li { padding-left: 0; margin-left: 25px; }
			.content ul.fa-ul li:before { content: none; }
			.content ul.fa-ul li .fa-li { color: #025a78; }
	.content h1 { margin-top: 0; }
	.content a { color: #025a78; border-bottom: solid 1px #025a78; }
		.content a:hover { color: #000; border-bottom: solid 1px #000; }
	.content .kenmerken {color:#025a78;font-weight:700;}

.cta { padding:30px; margin:26px 0; background-color:#aecad4;box-shadow:#ccc 10px 10px 30px; }
.cta div {font-size:24px;color:#fff;}
.cta .btn {text-transform:uppercase;}

/*
.productfilter { margin-bottom: 20px; }
	.productfilter button { border-radius: 0; border-color: silver; margin-bottom: 4px; }
		.productfilter button:focus { outline: none; box-shadow: none; }
		.productfilter button.active { background-color: #025a78; color: #fff; }
*/

.img-left, .img-right { margin-bottom: 25px; }
.img-below, .img-above { margin: 30px 0; }
.img-galery { background-color: #fff; padding: 60px 0; }
.content a.lightbox { border-bottom: 0; }
.thumbs { width: 100%; float: left; overflow: hidden; position: relative; margin-bottom: 25px; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: 700; background-color: #fff; border-radius: 0px; transition: transform .3s cubic-bezier(.34,2,.6,1),box-shadow .2s ease; transform: translateY(0px); }
	.thumbs span.title { color: #fff; }
	.thumbs a { background-color: rgba(255,255,255,0.40); bottom: -200px; color: #fff; left: 0; opacity: 0; position: absolute; right: 0; text-align: left; top: 0; z-index: 100; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; text-decoration: none; }
		.thumbs a .title { display: table; width: 100%; height: 100%; }
			.thumbs a .title .title-text { font-style: normal; font-weight: 300; font-size: 12px; line-height: 14px; color: #fff; vertical-align: bottom; padding: 8px; display: table-cell; }
				.thumbs a .title .title-text h5, .thumbs a .title .title-text p { color: #fff; font-weight: 700; font-size: 14px; }
				.thumbs a .title .title-text h5 { font-weight: 700; }
			.thumbs a .title .enlarge { font-style: normal; color: #fff; vertical-align: middle; padding: 20px; display: table-cell; text-align: center; }
		.thumbs a:hover { bottom: 0; opacity: 1; transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s; -webkit-transition: opacity 0.30s ease-in-out 0s, bottom 0.4s cubic-bezier(0.25, 0.500, 0, 1) 0s; }

.btn { display: inline-block; background-color: #444; color: #fff; font-size: 16px; font-weight: 700; padding: 7px 14px; border-radius: 4px; text-align: center; border: solid 2px #444; box-shadow: #000 0 0 10px; box-shadow:none; }
	.btn:hover { background-color: #025a78; color: #444; }
.btn-light { color: #b2b2a2; border-color: #b2b2a2; }
	.btn-light:hover { background-color: #b2b2a2; }
.btn-white { color: #fff; border-color: #fff; }
	.btn-white:hover { background-color: #fff; color: #262425; }
.btn-green { color: #fff; border-color: #025a78; background-color: #025a78; }
	.btn-green:hover, .btn-green.actief { background-color: #fff; color: #025a78; border:solid 2px #025a78; }

.btn-submenu { display: block; background-color: #5f9a42; color: #fff; font-size: 16px; font-weight: 700; padding: 7px 14px; border-radius: 4px; margin-bottom: 15px; }
	.btn-submenu:hover { display: block; background-color: rgba(95,154,66,0.8); color: #fff; }
.btn-primary { background-color: #5f9a42; border-color: #5f9a42; }
	.btn-primary:focus { background-color: rgba(95,154,66,0.8); border-color: #5f9a42; box-shadow: 0 0 0 .25rem rgba(95,154,66,.5); }
	.btn-primary:hover { background-color: rgba(95,154,66,0.8); border-color: #5f9a42; }
	.btn-primary:active { background-color: rgba(95,154,66,0.8); border-color: #5f9a42; }
.input-group-text { color: #f6b719; }
.list-group-item.active { background-color: rgba(95,154,66,0.8); border-color: #5f9a42; }

button:focus { outline: none; }

.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
	.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive-4by3 { padding-bottom: 75%; }

.contactadres { background-color: #f0f2f4; padding:8px 0; }
	.contactadres .fa-li { color: #025a78; }
	.contactadres ul { font-size: 16px; margin-bottom: 0; }
	.contactadres a { color: #000; }
	.contactadres a:hover { color: #025a78; }

label { font-weight: 400; font-size: 14px; }
	label.form-check-label { font-weight: 400; }
		label.form-check-label a { color: #000; border-bottom: solid 1px #000; }
			label.form-check-label a:hover { color: #025a78; border-bottom: solid 1px #025a78; }
.form-control, .form-select { /*font-size:18px;line-height:1;*/ }
	.form-control:focus, .form-check-input:focus, .form-select:focus { color: #939598; background-color: #fff; border-color: #231f20; outline: 0; box-shadow: none; }
textarea.form-control { min-height: 150px !important; }
.form-check { margin-bottom: 0; }
.form-check-input {margin-top:.6em;}
.form-check-input:checked { background-color: #939598; border-color: #000; }
.form-floating.required.error label:after, .form-check.required.error label:after { content: '*'; color: red; margin-left: 4px; }
.form-group .progress, .form-group .alert-success, .form-group .alert-danger { display: none; }

.floatingform .form-control { border: solid 1px #aecad4; background-color: #fff; line-height: 1;border-radius:0; }
.floatingform .form-select { border: none; background-color: #f0f0f0; color: #AAA; font-size: 14px; line-height: 2.8; padding-left: 15px; }
.floatingform .form-floating > label { left: 15px; }


footer { background-color: #f0f2f4; color: #fff; padding-top: 60px; padding-bottom: 60px; border-top: solid 0px #025a78; }
	footer a { color: #025a78; }
		footer a:hover { color: #000; }
		footer a.tel, footer a.tel:hover { color: #025a78; }
	footer p { color: #025a78; font-size: 14px; line-height: 22px; margin-top: 10px; padding-left: 30px; border-left: solid 1px #025a78; margin-left: 5px; }
	footer a img { margin-top: 12px; max-width:260px; }

.copycontainer { background-color: #025a78; padding-top: 15px; padding-bottom: 15px; color: #fff; font-size: 12px; }
	.copycontainer a { color: #ddd; }
a.toplink { cursor: pointer; position: fixed; right: 35px; bottom: 15px; display: none; color: #4f69c1; }
.wow { visibility: hidden; }

@media(min-width:1400px) and (max-width:1599px) {
	.homeblok {background-position-y:400px;}
}

@media(min-width:1200px) and (max-width:1399px) {
}

@media(min-width:1400px) {
	.container-fluid {width:90%;max-width:1700px;}
}

@media(min-width:1200px) {
	.hero .herocontent {min-height:550px;}

	p, ul, ol, .doclist { font-size: 18px; line-height: 1.8; }
}

@media (max-width:1199px) {
	.galerij { margin-top: 40px; }
	.kenmerken {margin-top:30px;}
}

@media(min-width:992px) and (max-width:1199px) {
	.homeblok { background-position-y: 240px; }
}

@media (max-width:991px) {
	.homeblok { background-position-y: 330px; }
}

@media(min-width:768px) and (max-width:991px) {
	.slogan {font-size:30px;}
	.footer-adres { text-align: center; }
		.footer-adres .text-right { text-align: center; margin-top: 25px; }
}


@media(max-width:767px) {
	.homeblok { background-position-y: 240px; }
	.slogan { font-size: 24px; }
	.home-intro {padding:20px;}
	.breadcrumbcontainer {padding-left:8px;}
	.blok .col-xl-4, .blok .col-xl-3 { margin-bottom: 12px; }
	.blok .card .card-body { padding: 10px 15px 10px 15px; }
		.blok .card .card-body .card-title { font-size: 20px; }
			.blok .card .card-body .card-title a { border-bottom: solid 1px #000; }
				.blok .card .card-body .card-title a:hover i { margin-left: 0; }

	.product-galery { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto-fill, 1fr); gap: 10px; margin-bottom: 10px; }
	.product-galery-item:nth-child(6n+1) { grid-area: 1 / 1 / 2 / 2; }
	.product-galery-item:nth-child(6n+2) { grid-area: 1 / 2 / 2 / 3; }
	.product-galery-item:nth-child(6n+3) { grid-area: 2 / 1 / 3 / 2; }
	.product-galery-item:nth-child(6n+4) { grid-area: 2 / 2 / 3 / 3; }
	.product-galery-item:nth-child(6n+5) { grid-area: 3 / 1 / 4 / 2; }
	.product-galery-item:nth-child(6n+6) { grid-area: 3 / 2 / 4 / 3; }

/*	.categorieblok {padding:15px 0;}
	.categorieblok .card-img-top {display:none;}
	.categorieblok .card h5.card-title { text-align:left; }
	.categorieblok .card p { text-align: left; }
	.categorieblok .card h5.card-title::after { content:'\f178'; font-family: 'Font Awesome 6 Pro'; color:#5f9a42;margin-left:6px; }
	.categorieblok .card::before { display:none; }
	.categorieblok .card:hover::before { display:none; }*/

	h1 { margin-bottom: 20px; font-size: 26px; }
	h2 { margin-bottom: 20px; font-size: 22px; margin-top: 10px; }
	h3 { font-size: 20px; margin: 20px 0 10px 0; }
	.content p, .content ul, .content ol { font-size: 16px; }
	.accordion .accordion-button {font-size:18px;}

	.homeblok { padding-bottom: 40px; }
	.pagecontent { padding: 40px 0; }
}

@media(max-width:576px) {
}
