﻿body { font-family: 'Poppins', sans-serif; font-size: 14px; line-height: 28px; margin: 0; color: #333; }
	body.KMCMSeditor { padding: 20px; }

h1, h3, h2, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: #4b4c4c; }
h1 { font-weight: 400; color: #023671; font-size: 34px; line-height: 1.2; margin-bottom: 30px; }
h2 { font-weight: 400; color: #023671; font-size: 30px; line-height: 1.5; margin-bottom: 30px; }
h3 { font-weight: 400; color: #023671; margin-bottom: 30px; font-size: 30px; line-height: 34px; }
h4 { font-weight: 700; color: #0c181c; font-size: 20px; }
h5 { font-weight: 700; color: #0c181c; font-size: 18px; }
h6 { font-weight: 400; color: #0c181c; font-size: 18px; }
p, ul, ol { color: #444; font-size: 18px; line-height: 1.8; }
	p b, ul b, ol b { font-weight: 700; }

.doclist { margin-left: 25px; font-size: 18px; line-height: 28px; margin-bottom: 30px; }
	.doclist td a { color: #000000; border-bottom: solid 1px #000000; }
		.doclist td a:hover { color: gray; border-bottom: solid 1px gray; }
	.doclist td.ico i { padding: 0 8px; color: #888; }
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; }

:root { --cookiebotcolor: #c7d41a; }
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { background-color: var(--cookiebotcolor) !important; border-color: var(--cookiebotcolor) !important; color: #ffffff; }
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive { border-bottom: 1px solid var(--cookiebotcolor) !important; border-bottom-width: 1px; color: var(--cookiebotcolor) !important; }
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { border-color: var(--cookiebotcolor) !important; color: #141414; }
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton { border: 2px solid var(--cookiebotcolor) !important; background-color: var(--cookiebotcolor) !important; }
#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--cookiebotcolor) !important; }
#CybotCookiebotDialog form input[type="checkbox"][disabled]:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: #D6D6D6 !important; }
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover { color: var(--cookiebotcolor) !important; }
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change { background-color: var(--cookiebotcolor) !important; border-color: var(--cookiebotcolor) !important; color: #FFFFFF; }
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw { background-color: #FFFFFF; border-color: var(--cookiebotcolor) !important; }
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg { fill: var(--cookiebotcolor) !important; }
#CookiebotWidget .CookiebotWidget-consent-details button { align-items: center; color: var(--cookiebotcolor) !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: #c7d41a; }

body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; }

.intro { background: #f7f8f9 url(../images/home-bg-1.jpg) 50% top no-repeat; }
	.intro .introhome { margin: 220px 0 100px 0; }
	.intro p, .intro ul { color: #023671; }

.bg-green { background-color: #c7d41a !important; }

.pagecontent { margin: 70px 0; }
.dienstcontent { background-color: #f8f9fa; }
.contactcontent { background-color: #f7f8f9; }

.bglight { background-color: #f6f6f6; }

.content { }
	.content ul { list-style: none; padding: 0; margin-left: 1em; }
		.content ul li { padding-left: 1.9em; }
			.content ul li:before { content: '\f00c'; font-family: 'Font Awesome 5 Pro'; display: inline-block; margin-left: -1.9em; width: 1.9em; color: #c7d41a; font-weight: bold; }
	.content .fa-li { color: silver; }
	.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: gray; }
	.content h1 { margin-top: 0; }
	.content p, .content ul { margin-bottom: 20px; }
		.content p b { color: #023671; }
		.content p.link .fa { color: #c7d41a; }
	.content a { color: #023671; border-bottom: solid 1px #023671; }
		.content a:hover { color: #c7d41a; border-bottom: solid 1px #c7d41a; }

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

.breadcrumbcontainer { background-color: #f7f8f9; }
.breadcrumb { font-size: 16px; line-height: 28px; border-bottom: 0; padding: 0; border-radius: 0; text-transform: lowercase; background-color: transparent; margin-top: 12px; font-weight: 300; }
	.breadcrumb a, .breadcrumb { color: #023671; border-bottom: solid 1px transparent; }
		.breadcrumb a:hover { color: #023671; border-bottom: solid 1px #023671; }
.breadcrumb-item + .breadcrumb-item::before { font-family: "Font Awesome 5 Pro"; content: "\f178"; font-weight: 300; color: #c7d41a; }
.mobile-breadcrumb a::before { font-family: "Font Awesome 5 Pro"; content: "\f177"; font-weight: 300; color: #c7d41a; }

.modal { z-index: 9999; }
.modal-content, .modal-body { border-radius: 15px; }
.modal-body { padding: 3px; background-color: #fff; border:solid 4px #c7d41a; }
	.modal-content h3 {margin-top:-15px;}
	.modal-body .popuptekst { padding: 5px 15px 15px 15px; }

.content .cta-content { margin-top:20px; }
.content .cta-content:last-child h3 { font-weight:700;margin-bottom:0; }
.content .cta-content:last-child h3:before { content: '\f178'; font-family: 'Font Awesome 5 Pro'; color: #c7d41a; font-size: 30px; font-weight: 300; margin-right:15px; }
	.content .cta-content p { margin-left:44px; }
	.content .cta-content .roundbutton {margin-left:44px;margin-top:0;}

.subpagina { margin: 30px 0; }

.card .card-img-top { border-radius: 0; }
.dienstblok { text-align: center; transition: ease-in-out all 0.3s; border-radius: 0; border: 0; background-color: #f7f8f9; }
a .dienstblok { }
	a .dienstblok h2 { transition: ease-in-out all 0.3s; text-align: center; color: #fff; margin: 0; }
	a .dienstblok h4 { transition: ease-in-out all 0.3s; text-align: center; color: #023671; margin: 0; }
a:hover .dienstblok .fa-thin { transform: scale(1.1); color: #273754; }
a:hover .dienstblok h2 { color: silver; }
.dienstblok .card-footer { background-color: transparent; border: 0; padding-bottom: 25px; }
	.dienstblok .card-footer span { display: inline-block; background-color: transparent; color: #023671; padding: 8px 16px; border: solid 2px #023671; transition: ease-in-out all 0.3s; }
a:hover .dienstblok .card-footer span { background-color: #023671; color: #fff; }

.card.logoblok { border:none;box-shadow:#ccc 0 0 30px;transition:ease-in-out all 0.3s; }
.card.logoblok:hover { box-shadow: #aaa 0 0 30px; }
.card.logoblok .card-img-top { border-radius: 4px; }
.content .card.logoblok a { border-bottom:none; }

.tweedehands { border-bottom:solid 4px #c7d41a;margin-bottom:30px;padding-bottom:30px;}
.tweedehands .tweedehands-tekst { margin-left:15px; }

.button { display: inline-block; padding: 8px 14px; font-size: 16px; font-weight: 700; text-transform: uppercase; border-radius:6px; }
	.button:after { content: '\f178'; font-family: 'Font Awesome 5 Pro'; margin-left: 3px; margin-right: 6px; transition: ease-in-out all 0.3s; }
	.button:hover:after { margin-left: 9px; margin-right: 0; }
.greenbutton { background-color: #c7d41a !important; color: #fff; border: solid 2px #c7d41a; }
	.greenbutton:hover { background-color: #fff !important; color: #c7d41a; }
.redbutton { background-color: #c7d41a !important; color: #fff; }
	.redbutton:hover { background-color: rgba(174,0,1,0.8) !important; color: #fff; }
.content .button { border: solid 2px #c7d41a; background-color:#c7d41a; color: #fff; }
	.content .button:hover { color: #c7d41a; background-color:#fff; border-bottom:solid 2px #c7d41a; }
.roundbutton, .content .roundbutton { border-radius: 50px; border: solid 2px #023671; display: inline-block; padding: 15px 15px; font-size: 20px; line-height: 1; font-weight: 400; margin-top: 30px; color: #023671; }
	.roundbutton:hover, .content .roundbutton:hover { background-color: #c7d41a; border: solid 2px #c7d41a; color:#023671; }

.galerijcontainer { background-color: rgba(255,255,255,0.8); padding: 80px 0 60px 0; }

.content a.lightbox { border-bottom: 0; }
.thumbs { width: 100%; float: left; overflow: hidden; position: relative; margin-bottom: 30px; 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%; }

form {  }
	form .alert-danger, form .alert-success { display: none; }
.form-label { font-weight: normal; font-size: 16px; color: #000; }
.form-control { border: solid 2px #ddd; border-radius: 0; font-size: 18px; }
.form-group input:focus, .form-group textarea:focus { box-shadow: 0 0 0 .25rem rgba(199,212,26,.25); border-color: #c7d41a; }
.form-group textarea { height: 115px; }
.form .form-group:first-child:not(.required) { display: none; }
.form-check-label a { color: #023671; border-bottom: solid 1px #023671; }
	.form-check-label a:hover { color: #c7d41a; border-color: #c7d41a; }
.form-group.required.error label:after, .form-check.required.error label:after { content: '*'; color: red; margin-left: 4px; }

footer { background-color: #003875; z-index: 20; position: relative; padding: 120px 0 90px 0; margin-top: 0px; }
	footer .aankondiging { margin-bottom: 20px; background-color: yellow; color: #000; padding: 10px; }
	footer p { color: #fff; font-size: 16px; line-height: 1.8; font-weight: 400; }
		footer p b { font-weight: 700; color: #c7d41a; }
		footer p a { border-bottom: dotted 1px #c7d41a; }
		footer p span.day { display: inline-block; width: 100px; color: #eef3fb; }
			footer p span.day:after { content: ": "; }
	footer a, footer a:focus, footer a.tel { color: #fff; text-decoration: none; }
		footer a:hover { color: #c7d41a; }
	footer .fa-light { display: inline-block; width: 25px; color: #c7d41a; }
	footer p.small { font-size: 12px; color: silver; margin-top: 40px; text-align: right; }
		footer p.small a { color: silver; }
.socials { margin: 25px 0; }
.socials a { background-color: #c7d41a; color: #fff !important; display: inline-block; line-height: 1; padding: 10px; font-size: 26px; border-radius: 50%; width: 47px; text-align: center; transition: 0.3s ease-in-out all; margin-right: 6px; }
.socials a:hover { background-color: #fff; color: #c7d41a !important; }
	footer .speciaal { color: yellow; font-weight: bold; display: block; }

.scrollup { padding: 5px 10px; background-color: #c7d41a; color: #fff; position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: none; }
.scrollshow { display: inline-block; }
.scrollup:hover { background-color: #023671; color: #fff; }

.wow { visibility: hidden; }

@media(min-width:1500px) {
	.container { max-width: 1300px; }
	.breadcrumbcontainer { padding: 170px 0 18px 0; }
}

@media(min-width:1400px) and (max-width:1499px) {
}

@media(min-width:1300px) and (max-width:1399px) {
}

@media(min-width:1200px) and (max-width:1499px) {
	.container { max-width: 1200px; }
	.breadcrumbcontainer { padding: 140px 0 18px 0; }
}

@media(min-width:1200px) {
	.dienstcontent { padding: 90px 0; }
	.slidecontainer { display: flex; gap: 20px; }
	.slide { flex: 1; transition: ease-in-out all 0.4s; position: relative; overflow: hidden; }
		.slide:hover { flex: 2; }
		.slide .slide-img { width: 100%; object-fit: cover; height: 400px; }
		.slide a { display: block; opacity: 0; visibility: hidden; left: -100%; top: 0; background-color: rgba(199,212,26,0.85); position: absolute; height: 400px; width: 100%; padding: 40px; transition: .3s; }
			.slide a h3 { color: #fff; font-weight: 700; }
		.slide:hover a, .slide.active a { opacity: 1; visibility: visible; left: 0; }
	footer { padding: 80px 0; }
}

@media(max-width:1199px) {
	.intro { background-image: none; }
		.intro .introhome { margin: 80px 0 80px 0; }
	.dienstcontent { padding: 60px 0; }
	.slidecontainer { display: grid; grid-gap:10px; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
	.slide { transition: ease-in-out all 0.4s; position: relative; overflow: hidden; }
		.slide .slide-img { width: 100%; object-fit: cover; height: 200px; }
		.slide a { display: block; left: 0; top: 0; background-color: rgba(199,212,26,0.85); position: absolute; height: 200px; width: 100%; padding: 0px; transition: .3s; }
			.slide a h3 { color: #fff; font-weight: 400;margin-bottom:0; font-size:20px; }
	.button, .roundbutton { font-size:18px !important; }
}

@media(min-width:992px) and (max-width:1199px) {
	.projectlist { margin-top: 50px; margin-bottom: 50px; }
	footer p { margin-top: 10px; }
}

@media (max-width:991px) {
	.dienstcontent { background-image: none !important; margin: 50px 0 30px 0; }
	footer { padding: 60px 0 30px 0; }
	.footer-logo { max-width: 260px; }
}

@media(min-width:768px) and (max-width:991px) {
	.card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
	.projectlist { margin-top: 30px; margin-bottom: 50px; }
}

@media(max-width:767px) {
	.intro .introhome { margin: 40px 0;}
	h1 { font-size: 34px; margin-bottom: 20px; }
	.tweedehands .tweedehands-tekst {margin-left:0;margin-top:20px;}
	.button, .roundbutton { font-size: 14px !important; }

	footer { padding: 60px 0 40px 0; }
}

@media(max-width:575px) {
	.pagecontent { margin: 40px 0; }
	.breadcrumbcontainer { padding: 0; }
	.slide .slide-img, .slide a { height: 100px; }

	footer { }
		footer ul, footer p { font-size: 16px; line-height: 28px; }
	h1 { font-size: 28px; }
	p, ul, ol { font-size: 16px; line-height: 28px; }
	label { font-size: 16px; line-height: 20px; }
}

@media(max-width:380px) {


	.footer-small span { display: block; color: #000; }
}
