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

h1, h2, h4, h5, h6 {font-family:Oxygen, sans-serif;}
h1 {font-weight:700;margin-bottom:30px;font-size:28px;line-height:30px;position:relative;color:#0c181c;}
h2 {font-weight:700;color:#0c181c;margin-bottom:20px;font-size:24px;}
h3 {font-weight:400;color:#0c181c;font-size:20px;}
h3 span {font-weight:700;color:#0c181c;}
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:#777;font-size: 16px;line-height: 28px;letter-spacing:1px;}

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

:root { --cookiebotcolor: #0c181c; }
#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; }
#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 .fal {font-size:70px;line-height:70px;color:#0c181c;}

body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: var(--bgimage); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 0; animation: fadeInBackground 3s ease-in-out forwards; transform: scale(1.1); transform-origin: center }

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

.homevideo { height: 100vh; width: 100%; overflow: hidden;  }
	.homevideo video { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
	.homevideo .homelogo {  }

.hero {padding-top:70vh;font-size:56px;line-height:56px;margin:0;color:#0c181c;font-weight:400;color:#fff;}
.hero span {font-size:36px;line-height:36px;letter-spacing:1.3px;}
.hero .fal { animation: mymove 5s infinite; color: #fff; transition: ease-in-out all 0.3s; font-size: 40px; }

@keyframes mymove {
	0% { margin-top: 2px; margin-bottom: 28px; }
	50% { margin-top: 28px; margin-bottom: 2px; }
	100% { margin-top: 2px; margin-bottom: 28px; }
}

.pagecontent {background-color:#fff;}

.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:silver;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:silver;}
.content h1 {margin-top:0;}
.content p, .content ul {margin-bottom:20px;}
.content a {color:#000000;border-bottom:solid 1px #000000;}
.content a:hover {color:gray;border-bottom:solid 1px gray;}

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

.breadcrumbcontainer {background-color:#f4f4f4;padding:20px 0 10px 0;}
.breadcrumb {font-size:16px;line-height:28px;letter-spacing:1px;border-bottom:0;padding-left:0;border-radius:0;background-color:#f4f4f4;text-transform:lowercase;background-color:transparent;}
.breadcrumb a {color:gray;border-bottom:solid 1px gray;}
.breadcrumb a:hover {color:#0c181c;}

.homeblock {}
.homeblock .card-col {margin-bottom:30px;}
.homeblock .card {border:0;box-shadow:#ccc 0 0 30px;border-radius:0;margin-bottom:30px;}
.homeblock .card h5.card-title {text-align:center;font-weight:400;padding:40px 0;}
.homeblock .card h5.card-title a {color:#0c181c;border-bottom:0;}
.homeblock .card .card-footer {text-align:center;padding:20px 0;border-top:solid 1px #ccc;background-color:#fff;}
.homeblock .card .card-footer a {display:inline-block;padding:4px 12px;text-transform:uppercase;background-color:#0c181c;color:#fff;transition:ease-in-out 0.3s all;border:solid 1px #0c181c;}
.homeblock .card .card-footer a:hover {color:#0c181c;background-color:#fff;}

.teamblock {}
.teamblock .card-col {margin-bottom:30px;}
.teamblock .card {border:0;}
.teamblock .card .card-body {background-color:#e0e0e0;padding:10px 0;}
.teamblock .card h5.card-title {text-align:center;font-size:20px;line-height:22px;color:#0c181c;font-weight:400;position:relative;}
.teamblock .card h5.card-title span {font-size:16px;line-height:20px;color:gray;}
.teamblock .card h5.card-title:after {content:'';position:absolute;opacity:0;}

.newscontent {background-color:#f4f4f4;padding:15px 0;}
.nopadding {padding:0 !important;}
.nieuws {border:0;border-radius:0;margin-bottom:20px !important;}
.nieuws .card-title {background-color:#0c181c;padding:8px;display:block;transition:ease-in-out 0.3s all;}
.nieuws .card-title:hover {background-color:gray;}
.nieuws .card-title h3 {color:#fff;}
.nieuws .card-footer {text-align:right;padding:20px 0;border-top:solid 1px #ccc;background-color:#fff;}
.nieuws .card-footer a {display:inline-block;padding:4px 12px;text-transform:uppercase;color:#0c181c;}
.nieuws .card .card-footer a:hover {color:gray;}

.categorieoverview {padding:90px 0 60px 0;background:url(../images/grey.jpg) 0 0 repeat;}
.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;}

.cta {background-color:#ac182d;padding:30px 0;background-color:#cd6865;}
.cta span {font-family:'Oxygen'; color:#fff;font-size:22px;line-height:26px;font-weight:700;}
.cta a {display:inline-block;padding:4px 12px;font-size:18px;background-color:#fff;border-radius:3px;}

button:focus {outline: none;}

.team {background-color:#f0f0f0;border-radius:8px;margin-bottom:30px;}
.team img {border-radius:8px;}
.team .teamtext {padding:16px 0;}
.team .teamtext h3 {text-align:center;font-size:20px;font-family:'Roboto';color:#003768;font-weight:700;text-transform:uppercase;}
.team .teamtext p {text-align:center;}

.accordion-item .card { border:none; border-bottom:solid 1px #ccc; border-radius:0; }
.accordion-item .card-header { background-color: #fff; border-bottom:none; }
.accordion-item h2 .btn-link { font-size:22px; color:#0c181c; }
	.accordion-item h2 .btn-link:hover { text-decoration: none; color: gray; }
	.accordion-item h2 .btn-link:focus { text-decoration: none; box-shadow:none; }
.accordion-item h2 .btn-link i { font-size: 16px; color:gray; margin-right:8px; }
.accordion-item .card-body { margin-left:40px; padding-left:30px; border-left:dotted 2px #000; padding-top:0; padding-bottom:0; }

.masonry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(363px, 1fr)); gap: 10px; grid-auto-flow: dense; /* Adds space between items */ }
.masonry-item { grid-row: span 2; } /* Controls the height span */
.masonry-item:nth-child(2n) { grid-row: span 3; } /* Example of different heights */ 
	.masonry-item a img { filter: grayscale(100%); transition: ease-in-out all 0.3s; max-width: 100%; }
	.masonry-item a:hover img { filter: grayscale(0%); }
.hoverimg { position: relative; text-align: center; color: #fff; padding: 4px; margin-bottom: 30px; background-color: #ddd; max-width: 300px; }
	.hoverimg img { }
	.hoverimg a { background-color: rgba(82,119,102,0.45); bottom: -200px; color: #ccc; left: 0; opacity: 0; position: absolute; right: 0; text-align: center; text-transform: uppercase; top: 0; z-index: 100; transition: all 0.35s ease-in-out; -webkit-transition: all 0.35s ease-in-out; }
		.hoverimg 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; }


.solliciteren {background-color:gray;padding:20px 16px 4px 16px;margin-top:15px;}
.solliciteren p {color:#fff;text-align:center;}
.solliciteren p a {color:#fff;border-color:#fff;}
.solliciteren p a:hover {color:#fff;border-color:#fff;}


.contactheader {background-color:#0090cc;color:#fff;text-align:center;font-size:18px;padding:16px 0;border-radius:10px;}
.contactheader a {margin-left:30px;}
.contactheader a.mail {color:#fff;}

.teaserbutton {display:inline-block;background-color:#00bebe;padding:8px 16px;font-size:18px;line-height:24px;text-align:center;color:#fff;text-transform:uppercase;transition:ease-in-out .30s;}
.teaserbutton:hover {background-color:#007f7f;color:#fff;}


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

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

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

a .graefjobs { background: linear-gradient(to right, #f4a9a9, #b5a2dc, #f4a9a9); background-size: 600% 600%; text-align: center; border-radius: 80px 0; padding: 40px 0; margin-bottom: 40px; transition: ease-in-out all 0.3s; animation: gradientMove 10s ease infinite; }
	/*a:hover .graefjobs { background: linear-gradient(to right, #b5a2dc, #f4a9a9, #b5a2dc); }*/
.graefjobs h3 {color:#fff;font-weight:700;}
	.graefjobs p { color: #fff;margin-bottom:0; }
	.graefjobs p span { color: #fff; border-bottom:solid 1px #fff; }
@keyframes gradientMove {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.contacttext {background-color:rgba(0,0,0,0.8);padding:25px 25px 0 25px;}
.contacttext h1, .contacttext p, .contacttext ul {color:#fff;}
.formcontent {background-color:rgba(255,255,255,0.9);padding:5px 30px 20px 30px;}
.formcontact { background-color: rgba(255,255,255,0.9); padding: 15px 15px 20px 5px; }
label {font-weight:normal;}
.formcontent .form-row .form-group:first-child { display: none; }
.form-control {border:solid 1px #ccc;border-radius:4px;}
.form-group input:focus {border-color:#232323;box-shadow:none;}
.form-group textarea:focus {border-color:#232323;box-shadow:none;}
.form-group.error label {color:red;}
.form-check a {color:#232323;border-bottom:solid 1px #232323;}
.form-check a:hover {color:#232323;}
.form-group.error .form-check a { color: red; border-bottom: solid 1px red; }
.btn-dark { display: inline-block; padding: 4px 12px; border: solid 2px #0c181c; letter-spacing: 0px; background-color: #0c181c; font-weight: 700; color: #fff; transition: ease-in-out 0.2s all; }
.btn-dark:hover {background-color:transparent;color:#0c181c;border:solid 2px #0c181c;}
.form h3 {font-weight:700;color:#232323;padding-bottom:15px;border-bottom:solid 1px #232323;margin-bottom:25px;}
/*
.contactcontainer {background:url(../images/contactcontainer-bg.png) 0 63px repeat-x;margin-top:35px;}
.contactcontainer .blok {background-image: linear-gradient(to right, #0097d5, #60b3d5);padding:20px;position:relative;color:#fff;}
.contactcontainer .blok .fas {position:absolute;font-size:36px;line-height:36px;left:35px;top:30px;}
.contactcontainer .blok p {margin:0 0 0 78px;color:#fff;font-size:16px;line-height:28px;}
.contactcontainer .blok p a {color:#fff;text-decoration:underline;}
*/

footer {background-color:#fff;}
footer ul, footer p {color:#0c181c;font-size:16px;line-height:30px;}
footer span {font-size:14px;}
footer a, footer a:focus {color:#0c181c;border-bottom:solid 1px #0c181c;} 
footer a:hover {color:gray;border-bottom:solid 1px gray;}
footer a.tel {border-bottom:0;color:#0c181c;}
footer a.tel:hover {color:#0c181c;border-bottom:0;}
footer a.itaa img {max-width:200px;margin-top:10px;}

.scrollup {padding:5px 10px;background-color:#0c181c;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:gray;color:#fff;}

.wow {visibility:hidden;}

@media(min-width:1200px) {
	.content {padding:70px 0;}
	.pagecontent {background:transparent url(../images/bg-xxl.png?v=1) center bottom no-repeat;}
	footer {padding:100px 0;margin-top:100px;}
}

@media(min-width:992px) and (max-width:1199px) {
	.content {padding:60px 0;}
	footer {padding:70px 0;margin-top:100px;}
}

@media (max-width:991px) {
	.categorieoverview {padding:60px 0 30px 0;}
	.breadcrumbcontainer {padding:10px 0 2px 0;}
	footer {padding:40px 0;margin-top:80px;}
}

@media(min-width:768px) and (max-width:991px) {
	.hero { padding-top: 70vh; font-size: 36px; line-height: 36px; }
	.hero span {font-size:26px;line-height:26px;}
	.content {padding:30px 0;}
	.card-columns {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}

	.contactcontainer .blok .fas {display:none;}
	.contactcontainer .blok p {margin:0;}
}

@media(max-width:767px) {
	.hero { padding-top: 70vh; font-size: 36px; line-height: 36px; }
	.hero span {font-size:26px;line-height:26px;}
	.content {padding:30px 0;}
	.card-columns {-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}

	.contactcontainer {background-position-y:bottom;margin-top:35px;}
	.contactcontainer .blok {margin-top:1px;}
	.formcontent {padding:5px 10px 20px 10px;margin-bottom:20px;}

	.accordion-item .card-header { padding-left:0; padding-right:0; }
	.accordion-item h2 .btn-link { font-size: 18px; color: #0c181c; }
		.accordion-item h2 .btn-link i { font-size: 14px; color: gray; margin-right: 4px; }
	.accordion-item .card-body { margin-left: 18px; padding-left: 20px; }

	.product-galery { display: grid; grid-template-columns: 1fr 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 / 3; }
	.product-galery-item:nth-child(6n+4) { grid-area: 3 / 1 / 4 / 2; }
	.product-galery-item:nth-child(6n+5) { grid-area: 3 / 2 / 4 / 3; }
	.product-galery-item:nth-child(6n+6) { grid-area: 4 / 1 / 5 / 3; }
}
@media(max-width:575px) {
	.hero { padding-top: 70vh; font-size: 26px; line-height: 26px; }
	.hero span {font-size:20px;line-height:20px;}
	footer {padding:20px 0;}
	footer ul, footer p {font-size:14px;line-height:28px;}
	footer .pleft {margin-left:35px;}
}