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

h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }
h1 { font-weight: 700; color: #308943; margin-bottom: 30px; font-size: 36px; line-height: 1.2; }
h2 { font-weight: 700; color: #308943; margin-bottom: 20px; font-size: 28px; margin-top: 30px; }
h3 { font-weight: 400; color: #308943; font-size: 24px; margin: 30px 0 20px 0; }
h4 { font-weight: 400; color: #308943; font-size: 22px; }
h5 { font-weight: 400; color: #308943; font-size: 20px; line-height: 1.8; }
h6 { font-weight: 400; color: #308943; font-size: 18px; color:#94c990; }
p, ul, ol { color: #000; font-size: 18px; line-height: 1.8; font-weight: 400; }
.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; }

.carousel-section { background: url(../images/snelweg.jpg) center center no-repeat;position:relative; background-attachment:fixed;}
.carousel-indicators { bottom: 0px ; top: unset; }
.carousel-indicators [data-bs-target] { background-color: #308943; }
.carousel-section .tankprijs {position:absolute;z-index:1000;width:300px;top:25px;left:50%;}
.tankprijs {background-color:#000;text-align:center;border-radius:15px;padding:20px 0;}
.tankprijs p {color:#fff;font-size:14px;}
	.tankprijs p span { font-size: 12px; }
	.tankprijs .prijs { line-height:1; }
		.tankprijs .prijs span { color: #fff; font-size: 20px;line-height:1.2; }
		.tankprijs .prijs div { font-family: 'VT323', monospace; color: yellow; font-size: 42px; margin-bottom: 14px; }

.eerst {padding:40px 0;}
.eerst p {font-size:22px;text-align:center;}

.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 h5.card-title { font-size: 26px; 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: 400; }
		.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; }

.card p span {color:#308943;}

.homeblok { padding-bottom: 30px; }
	.homeblok.blok .card { border-radius:0px; text-align:center; }
.homeblok.blok .card .fa-regular {color:#308943;font-size:60px;}
	.homeblok.blok .card .card-body h5.card-title {color:#000;}
.pageblok { background: url(../images/snelweg.jpg) center 70px no-repeat;padding-bottom:70px; }

.disclaimer { border-top:solid 1px silver;padding-top:16px;margin-top:26px; }
.disclaimer ul {color:gray;font-size:14px;}

.breadcrumbcontainer { background-color: #94c990; padding-left: 30px; }
.breadcrumb, .back-link { font-size: 18px; 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: #94c990; }
.breadcrumb-item + .breadcrumb-item::before { color: #fff; content: ">"; }
.breadcrumbcontainer h2 { color: #fff; font-weight: 700; padding-bottom: 25px; margin: 0; text-align: center; font-size: 36px; }

.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: #308943; font-weight: 700; }
	.content .fa-li { color: #308943; }
	.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: #308943; }
	.content h1 { margin-top: 0; }
	.content a { color: #308943; border-bottom: solid 1px #308943; }
		.content a:hover { color: #000; border-bottom: solid 1px #000; }
	.content .kenmerken {color:#308943;font-weight:700;}


/*
.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: #308943; 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: #308943; 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: #308943; background-color: #308943; }
	.btn-green:hover, .btn-green.actief { background-color: #fff; color: #308943; border:solid 2px #308943; }

.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: #308943; }
	.contactadres ul { font-size: 16px; margin-bottom: 0; }
	.contactadres a { color: #000; }
	.contactadres a:hover { color: #308943; }

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: #308943; border-bottom: solid 1px #308943; }
.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 #94c990; 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: #262728; color: #fff; padding-top: 60px; padding-bottom: 60px; border-top: solid 0px #308943; }
	footer {text-align:center;}
	footer h3 {font-size:18px;text-transform:uppercase;font-weight:700;margin-bottom:15px;color:#fff;}
	footer a { color: #fff; }
		footer a:hover { color: silver; }
	footer p { color: #fff; margin-top: 10px; }
	footer a img { margin-top: 12px; max-width:260px; }
	footer a.km {color:silver;}

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

@media(min-width:1400px) {
	.carousel-section .tankprijs { margin-left: -620px; }
}

@media(min-width:1200px) and (max-width:1399px) {
	.carousel-section .tankprijs { margin-left: -530px; }
}


@media(min-width:1200px) {
	p, ul, ol, .doclist { font-size: 18px; line-height: 1.8; }
}

@media (max-width:1199px) {
	.product-galery { gap:15px; }
	.galerij { margin-top: 40px; }
	.kenmerken {margin-top:30px;}
}

@media(min-width:992px) and (max-width:1199px) {
	.carousel-section .tankprijs { margin-left: -440px; }
}

@media(max-width:991px) {
	.carousel-section .tankprijs { position:unset; width:90%;margin:15px auto;padding:10px 0; }
}

@media(min-width:768px) and (max-width:991px) {
	.eerst { padding: 20px 0; }
		.eerst p { font-size: 18px; }
}

@media(max-width:767px) {
	.eerst { padding: 20px 0; }
		.eerst p { font-size: 16px; }

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

	.cta div {font-size: 22px;}

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

	footer span {display:block;font-size:0;line-height:0;}
}

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