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

h1, h2, h4, h5, h6 { font-family: 'Heebo', sans-serif; }
h1 { font-weight: 700; margin-bottom: 30px; font-size: 28px; line-height: 30px; position: relative; padding-bottom: 30px; color: #266eaf; }
h2 { font-weight: 700; color: #ac182d; margin-bottom: 20px; font-size: 24px; }
h3 { font-weight: 400; color: #000; font-size: 20px; }
	h3 span { font-weight: 700; color: #232323; }
h4 { font-weight: 700; color: #3a639e; font-size: 20px; }
h5 { font-weight: 700; color: #000000; font-size: 18px; }
h6 { font-weight: 400; color: #000000; font-size: 18px; }
p, ul, ol { color: #777; font-size: 16px; line-height: 28px; }

:root { --cookiebotcolor: #266eaf; }
#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; }

.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_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: #266eaf; }

body:before { content: ""; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; background: url(../images/body-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }


.hero { background: url(../images/bg-cog-1.jpg) right top no-repeat; height: 450px; }
	.hero h1 { font-size: 42px; line-height: 50px; margin-top: 140px; padding: 0; text-shadow: #95a8d2 0 1px 1px; max-width: 600px; }
		.hero h1 span { font-weight: 300; font-size: 36px; }

.intro { padding: 100px 0; }
	.intro .textblock { padding: 25px; background-color: #95a8d2; margin-bottom: 100px; }
		.intro .textblock h2, .intro .textblock p { color: #fff; }
	.intro .container { background: url(../images/scherm-1.png) right bottom no-repeat; }

.oplossing { background-color: #fff; }
	.oplossing .bg-program { background: url(../images/programmeur-1.jpg) center center no-repeat; 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: #95a8d2; font-size: 55px; }
	.fbox .fbox-text { padding: 30px 20px; font-size: 18px; line-height: 18px; font-weight: 700; }

.divider-title { background-color: #595556; color: #fff; font-size: 38px; line-height: 38px; font-weight: 300; padding: 30px 0; text-align: center; }

.klanten { background-color: #fff; padding: 60px 0; }
	.klanten .card { background: url(../images/klant-bg.jpg) right top no-repeat; }
	.klanten .card-title { color: #266eaf; }

.btn-effect { position: relative; transition: 0.3s ease all; -webkit-transition: 0.3s all ease; z-index: 2; }
	.btn-effect:before { transition: 0.5s ease all; -webkit-transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 1; content: ''; z-index: -2; }
	.btn-effect:hover:before { transition: 0.5s ease all; -webkit-transition: 0.5s all ease; left: 0; right: 0; opacity: 1; }

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

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

.contact { padding: 120px 0 60px 0; }
	.contact label { font-weight: normal; color: #fff; }
		.contact label a { color: #fff; border-bottom: solid 1px #fff; }
	.contact h2 { color: #fff; }
.form-control { border: solid 1px #fff; border-radius: 0px; }
.form-group input:focus { box-shadow: none; border: solid 1px #fff; }
.form-group textarea:focus { box-shadow: none; border: solid 1px #fff; }
.btn-send { }
.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: #fff; }
	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: #fff; }
	input[type=radio] + label:before { content: "\f111"; letter-spacing: 10px; }
	input[type=radio]:checked + label:before { content: "\f192"; }

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



.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: #2e4e7c; padding: 100px 0; }
	footer h3 { font-weight: 700; color: #fff; margin-bottom: 30px; font-size: 24px; line-height: 30px; position: relative; padding-bottom: 30px; }
		footer h3::before { content: ""; width: 100%; height: 3px; display: inline-block; background: #95a8d2; position: absolute; bottom: 0px; left: 0; }
		footer h3::after { content: ""; width: 80px; height: 3px; display: inline-block; background: #fff; position: absolute; bottom: 0px; left: 0; }
	footer ul, footer p { color: #fff; font-size: 16px; line-height: 34px; }
	footer a, footer a:focus { color: #fff; }
		footer a.route { border-bottom: solid 1px #fff; }
		footer a:hover { color: silver; }
		footer a.tel:hover { color: #fff; }
	footer .social { font-size: 36px; margin-top: 46px; margin-left: 22px; }

.scrollup { padding: 5px 10px; background-color: #3a639e; 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; }

.privacy { background-color: #595556; padding: 20px 0; }
	.privacy p, .privacy a { color: #fff; font-size: 12px; }
		.privacy a.km { text-transform: lowercase; color: silver; }

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

@media(min-width:1300px) and (max-width:1399px) {
	.hero { background-position-x : -460px; }
}

@media(min-width:1200px) and (max-width:1299px) {
	.hero { background-position-x: -560px; }
}
@media(min-width:1200px) {
}

@media(max-width:1199px) {
	.hero { background: linear-gradient(to right, rgba(246,247,249,1) 40%, rgba(246,247,249, .7)), url(../images/bg-cog-1.jpg) no-repeat right top; }
}

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

@media (max-width:991px) {
	.intro { padding: 100px 0; }
		.intro .textblock { padding: 25px; background-color: #95a8d2; margin-bottom: 300px; }
}

@media(min-width:768px) and (max-width:991px) {
}

@media(max-width:767px) {
	.hero { height: 300px; }
		.hero h1 { font-size: 34px; line-height: 44px; margin-top: 100px; padding: 0; text-shadow: #95a8d2 0 1px 1px; max-width: 600px; }
			.hero h1 span { font-weight: 300; font-size: 28px; }
	.privacy { display: none; }
	.klanten .card { background-image:none; }
	.klanten .card img {display:none;}
}

@media(max-width:575px) {
	.hero { height: 300px; }
		.hero h1 { font-size: 30px; line-height: 36px; margin-top: 60px; padding: 0; text-shadow: #95a8d2 0 1px 1px; max-width: 600px; }
			.hero h1 span { font-weight: 300; font-size: 26px; }
	.intro { padding: 15px 0; }
	.contact { padding: 60px 0 30px 0; }
		.contact h2 { font-size: 18px; }

	footer { padding: 20px 0; }
		footer h3 { margin-bottom: 20px; font-size: 20px; line-height: 20px; padding-bottom: 20px; }
		footer ul, footer p { font-size: 14px; line-height: 28px; }
		footer .lb { display: block; }
}