﻿body { font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 28px; margin: 0; color: #333; font-weight: 300; background: url(/images/achtergrond-1.jpg) no-repeat top center; background-size: cover;  }
	body.KMCMSeditor { padding: 20px; }

h1, h2, h4, h5, h6 { font-family: 'Cookie', serif; }
h1, h2 { font-weight: 400; margin-bottom: 30px; font-size: 48px; line-height: 1; padding-bottom: 30px; color: #333; }
h2 {padding-bottom:0;padding-top:20px;}
h3 { font-weight: 400; color: #000; font-size: 20px; }
	h3 span { font-weight: 700; color: #232323; }
h4 { font-weight: 400; color: #333; font-size: 38px; margin: 20px 0; }
h5 { font-weight: 400; color: #000000; font-size: 18px; }
h6 { font-weight: 400; color: #000000; font-size: 18px; }
p, ul, ol { color: #000; font-size: 20px; line-height: 1.8; font-weight:300; }

hr {width:100%;border-top:solid 4px #bf9c70;margin-bottom:35px;}

.doclist { margin-left: 25px; }
td.ico { padding: 0 8px; }
a { transition: ease-in-out .30s; color: #000; }
	a:hover, a:focus, a:active { outline: none; text-decoration: none; }
	a:hover { color: #000; }
	a.tel { color: #fff; }
.margintop20 { margin-top: 20px; }
.marginbottom20 { margin-bottom: 20px; }
.boxshadow { box-shadow: #444 0 0 10px; }
.nomarginleft { margin-left: 0 !important; }

.cc_banner-wrapper { z-index: 9999; }
.cc_more_info { color: #fff !important; text-decoration: underline !important; }
.cc_btn { color: #232323 !important; background-color: #eee !important; }
.cc_container { background-color: #232323 !important; }
.cc_container a { color: #fff !important; border-bottom:solid 1px #fff; }
.cc_message { color: #fff !important; }

.page-loader { background: #fff; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 9998; }
.loader { position: absolute; width: 70px; height: 70px; top: 50%; left: 50%; margin: -35px 0 0 -35px; }
	.loader .fas { font-size: 70px; line-height: 70px; color: #bf9c70; }

.hero { text-align: center; height: 400px; width:100%; position:relative; padding-top:160px; }
	.hero h1 { font-size: 82px; line-height:1.2; padding: 0; color: #fff; text-shadow: #000 0 0 0px; font-weight: 400; text-transform:uppercase;background-color:#bf9c70; }
		.hero h1 span { font-weight: 700; color:#fff;  }
	.hero a { }
	.hero img.meer { position: absolute; bottom: 17px; left: 50%; margin-left: -45px; }

.hero {  }
.hero {position:relative; }
/*	.hero::before { content: ""; position: absolute; inset: 0; background: url(../images/hero-3.jpg) center center no-repeat; background-size: cover; opacity: 0; transform: scale(1.1); animation: fadeInBackground 4s ease-in-out forwards; z-index: 0;  }*/
.hero > * {position:relative;z-index:1;}

.svg-separator { position: absolute; width: 100%; height: 60px; bottom: 48px; left: 0; display: flex; justify-content: center; flex-direction: column; z-index: 1;}
	.svg-separator svg { width: 100%; height: auto; display: block; }

@keyframes fadeInBackground {
	from { opacity: 0; transform: scale(1.1); }
	to { opacity: 1; transform: scale(1); /* back to normal size */ }
}

@keyframes mymove {
	100% { background-size: 110% 110%; }
}

@media (min-aspect-ratio: 16/9) {
	.hero iframe { /* height = 100 * (9 / 16) = 56.25 */ height: 56.25vw; }
}
@media (max-aspect-ratio: 16/9) {
	.hero iframe { /* width = 100 / (9 / 16) = 177.777777 */ width: 177.78vh; }
}

.dark-block, .light-block { padding: 100px 0; }
.dark-block { background-color: #f2f2f2; padding:60px 0; background-color:transparent; }
	.dark-block .textblock p { color: #666; }
	.dark-block .textblock p a { color: #666; border-bottom:solid 1px #666; }
.light-block { background-color: #fff7ec; background-color: transparent; }
	.light-block .textblock p a { color: #666; border-bottom: solid 1px #666; }
.textblock p b {font-weight:700;}

.light-block img {box-shadow:none;}

#partners img {box-shadow:#ccc 0 0 20px;margin-bottom:35px;max-width:100%;}

.praktisch .bg-praktisch { background-size: auto; background-size: cover; }
.grid-border [class^="col-"]::before, .grid-border [class^="col-"]::after { content: ''; position: absolute; }
.grid-border [class^="col-"]::before { height: 100%; top: 0; left: -1px; border-left: 1px solid rgba(0,0,0,0.05); }
.grid-border [class^="col-"]::after { width: 100%; height: 0; top: auto; left: 0; bottom: -1px; border-bottom: 1px solid rgba(0,0,0,0.05); }

.fbox { text-align: center; }
	.fbox .fbox-icon { color: #bf9c70; font-size: 55px; }
	.fbox .fbox-text { padding: 30px 20px; font-size: 18px; line-height: 18px; font-weight: 700; }

.divider-title { background-color: #666768; color: #bf9c70; font-size: 78px; line-height: 70px; font-weight: 300; padding: 0px 0; text-align: center; font-family: 'Yrsa', serif; }

.partners { background-color: #fff; padding: 60px 0; }

.button { display: inline-block; background-color: #bf9c70; padding: 16px 30px; color: #fff; font-size: 18px; line-height: 20px; border-radius: 26px; font-weight: 700; border: 0; transition: all ease-in-out 0.3s; }
	.button:hover { color: #000; }

.categorieoverview { background-color: #fcfcfc; padding: 60px 0; }
.catblok .card-col { margin-bottom: 30px; }
.catblok .card { border: 0; border-radius: 0; background-color: transparent; }
	.catblok .card .card-img-top { border-radius: 0; }
.catblok a .card .card-body { box-shadow: #aaa 0 0 30px; background-color: #fff; margin: -30px 15px 15px 15px; transition: ease-in-out all 0.4s; }
.catblok a:hover .card .card-body { margin: -45px 15px 30px 15px; }
.catblok .card h5.card-title { text-align: center; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 0; }
.catblok .card .card-body .card-text { text-align: center; font-size: 14px; }

.img-left, .img-right { margin-bottom: 25px; }
.img-below, .img-above { margin: 30px 0; }
.img-galery { margin-top: 15px; }

.galery-container { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(auto-fill, 1fr); gap: 10px; }
.galery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, 1fr); gap: 10px; }
/* grid-template-rows: repeat(auto-fill, minmax(400px, 1fr))*/
.galery-item img { }

.content a.lightbox { border-bottom: 0; }
.thumbs { width: 100%; float: left; overflow: hidden; position: relative; margin-bottom: 0px; text-align: center; text-transform: uppercase; font-size: 14px; font-weight: 700; background-color: #fff; }
	.thumbs span.title { color: #fff; }
	.thumbs a { background-color: rgba(0,0,0,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; }

.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%; }

.contact { padding: 120px 0 60px 0; }
	.contact label, .contact p { font-weight: normal; color: #000; }
		.contact label a { color: #000; border-bottom: solid 1px #000; }
	.contact h2 { color: #000; }
.form-control { border: solid 1px #333; border-radius: 4px; }
::placeholder, :-ms-input-placeholder { color: red; font-style: italic; }
.form-group input:focus, .form-group select:focus { box-shadow: none; border: solid 1px #bf9c70; }
.form-group textarea:focus { box-shadow: none; border: solid 1px #fff; }
.form-group.error input, .form-group.error select, .form-group.error textarea { border: solid 2px red; }
.form-group.error input[type="checkbox"] + label::before { color: red; }
.form-check { padding-left: 0; }
input[type=checkbox] { display: none; }
	input[type=checkbox] + label:before { font-family: "Font Awesome 5 Pro"; display: inline-block; font-size: 18px; color: #000; }
	input[type=checkbox] + label:before { content: "\f0c8"; letter-spacing: 10px; }
	input[type=checkbox]:checked + label:before { content: "\f14a"; font-weight: 700; }
input[type=radio] { display: none; }
	input[type=radio] + label:before { font-family: "Font Awesome 5 Pro"; display: inline-block; font-size: 18px; color: #000; }
	input[type=radio] + label:before { content: "\f111"; letter-spacing: 10px; }
	input[type=radio]:checked + label:before { content: "\f192"; }

.modal-content { border-radius: 0; }


footer { padding: 50px 0; background-color: #ca7e51; background-color: transparent; }
.footer-logo { margin-bottom: 60px; }
	.footer-logo img { max-width: 220px; }
footer .social a { margin-right: 10px; background-color: #262425; border-radius: 50%; color: #fff; width: 50px; text-align: center; display: inline-block; font-size:22px; padding:11px 0; }
	footer .social a:hover { background-color: #bf9c70; color: #fff; }
footer h3 { font-size: 22px; line-height: 1; color: #fff; margin: 0 0 25px 0; font-weight: 700; color: #333; }
footer p { font-size: 16px; line-height: 1.8; font-weight: 300; color: #333; }
	footer p span.day { width:100px;display:inline-block; }
	footer p.aankondiging { color: red; }
	footer p b {font-weight:700;}
footer a, footer a:focus, footer a.tel { color: #fff; text-decoration: none; color: #333; }
	footer a:hover { color: #eee; color: #ca7e51; }
footer p.small { font-size: 12px; color: #b2b2a2; margin-top: 40px; color: #333; }
.footer-menu a { }
.btn-white {border:solid 2px #000;color:#000;font-size:20px;}
.btn-white:hover {background-color:#000;color:#fff;}

.scrollup { padding: 5px 10px; background-color: #000; color: #fff; position: fixed; bottom: 20px; right: 20px; border: solid 0px gray; z-index: 9999; display: none; box-shadow: #ccc 0 0 20px; }
.scrollshow { display: inline-block; }
.scrollup:hover { background-color: #595556; color: #fff; }

.km { text-transform: lowercase; color: silver; }
.km a {color:silver;border-bottom:dotted 1px silver;}

a.toplink { cursor: pointer; position: fixed; right: 35px; bottom: 15px; display: none; }
.wow { visibility: hidden; }

@media(min-width:1400px) {
	.container { max-width: 1320px !important; }
}

@media(min-width:1300px) and (max-width:1399px) {
	.container { max-width: 1220px; }
}

@media(min-width:1200px) and (max-width:1299px) {
}

@media(min-width:1200px) {
	body { background: url(../images/body-bg-1.png) center top no-repeat; background-attachment: unset; background-image:url(../images/achtergrond-1.jpg); }
	.plogo { padding: 20px; }
}

@media(max-width:1199px) {
}

@media(min-width:992px) and (max-width:1199px) {
	.hero h1 { font-size: 62px; }
}

@media (min-width:992px) {
	.foto-left {border-radius:0 0 0 100px;}
	.foto-right { border-radius: 0 100px 0 0; }
}

@media (max-width:991px) {
	.hero {height:300px;padding-top:90px;}
	.hero .logo { max-width: 240px; }
	.hero h1 { font-size: 52px; }
	.winkel {}
	.contact {padding:40px 0;}
}

@media(max-width:767px) {
	body { background-position-x: -180px; }
	.dark-block, .light-block {padding:40px 0;}
	.hero { height: unset; }
		.hero .logo { max-width: 200px; }
	.winkel img { margin-bottom: 15px; }
}

@media(max-width:575px) {
	body {background-position-x:-120px;}
	.hero h1 { font-size: 30px;}
	p, ul, ol {font-size:16px;line-height:22px;}
	h2 {font-size:26px;}
	.contact { padding: 30px 0; }
	footer { padding: 20px 0; }
	footer .social {margin-bottom:30px;}
}
