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

h1, h2, h4, h5, h6 { font-family: 'Open Sans', 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; }
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: #616263; font-size: 20px; line-height: 32px; }
	p b, ul b, ol b { color: #444; }

.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; }
	a:hover, a:focus, a:active { outline: none; text-decoration: none; }
	a:hover { color: #000; }

.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: #fe0000; }

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

.herocontainer { background: url('/images/laswerken-a-en-f-1.jpg') center center no-repeat; background-size: cover; }
	.herocontainer .hero { padding: 180px 0; }
		.herocontainer .hero h1 { font-size: 48px; line-height: 52px; color: #fff !important; font-weight: 700; max-width: 600px; border-left: solid 8px #fe0000; padding-left: 20px; }
		.herocontainer .hero a { display: inline-block; margin-top: 15px; padding: 12px 20px; background-color: #fe0000; color: #fff; font-family: 'Ubuntu', sans-serif; font-size: 18px; font-weight: 700; }
			.herocontainer .hero a:hover { background-color: rgba(254,0,0,0.7); }

.button { display: inline-block; padding: 12px 20px;  font-family: 'ubuntu', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
	.button:after { content: '\f35a'; font-family: 'Font Awesome 5 Pro'; margin-left: 6px; }
.blackbutton { background-color: #000000 !important; color: #fff; }
	.blackbutton:hover { background-color: rgba(0,0,0,0.8) !important; color: #fff; }
.redbutton { background-color: #fc0000 !important; color: #fff; }
	.redbutton:hover { background-color: rgba(250,0,0,0.8) !important; color: #fff; }

.homecontent { padding: 100px 0 80px 0; }
	.homecontent .buttons a { display: block; padding: 12px 20px; background-color: #fe0000; color: #fff; font-family: 'ubuntu', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
		.homecontent .buttons a:before { content: '\f35a'; font-family: 'Font Awesome 5 Pro'; margin-right: 6px; }
		.homecontent .buttons a:hover { background-color: rgba(254,0,0,0.2) !important; color: #000 !important; }

.pagecontent { background-color: #fff; padding: 80px 0 50px 0; }
.introcontent {padding:80px 0 30px 0;}
.dienstfoto {height:377px;}
.pageright { background-color: #f6f6f6; padding: 35px 35px 25px 35px; min-height:377px; background-color:#000; }
	.pageright h3 { margin-top: 0; font-weight: 700; border-bottom: solid 2px #fe0000; padding-bottom: 15px; margin-bottom: 25px; color:#fff; }
	.pageright .fa-ul { margin-left: 2em;color:#fff; }
	.pageright .fa-li { color: #fe0000; }
/*.pagecontent img {margin-bottom:30px;}
.pagecontent p, .pagecontent ul {margin-bottom:20px;font-size: 16px;line-height: 28px;}
.pagecontent li {margin-bottom:20px;}
.pagecontent b {color:#222;}
.pagecontent a {border-bottom:dotted 1px #777;}*/

.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: 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 p.intro {color:#000000;}
	.content p.link .fa {color:#fe0000;}
	.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: url('../images/zwart-staal-1.jpg') center center repeat; padding: 20px 0 20px 0; }
.breadcrumb { font-size: 14px; line-height: 28px; border-bottom: 0; padding: 0; border-radius: 0; text-transform: lowercase; background-color: transparent; margin-top: 12px; }
	.breadcrumb a, .breadcrumb { color: #fff; }
		.breadcrumb a:hover { color: silver; }

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

.projectoverview { background-color: #f6f6f6; padding: 80px 0 60px 0; }
.projectblok .card-col { margin-bottom: 30px; }
.projectblok .card { border: 0; border-radius: 0; background-color: transparent; position:relative; }
	.projectblok .card::before { top: 100%; left: 0; right: 100%; bottom: 0; border-bottom: #fe0000 solid 10px; }
	.projectblok .card::before, .projectblok .card::after { content: ""; opacity: 0; pointer-events: none; z-index: 3; position: absolute; box-sizing: border-box; transition: all 1s ease 0s; box-shadow: none; }
	.projectblok .card:hover::before { opacity: 1; bottom: 0; right: 0; }

	.projectblok .card .card-img-top { border-radius: 0; border-top: solid 8px #ccc; transition: ease-in-out all 0.4s; padding-top: 4px; /*filter: grayscale();*/ }
	.projectblok .card .card-img-overlay {border-radius:0;}
.projectblok .card-body { padding: 0 !important; }
.projectblok .card-img-overlay {padding: 0 !important;}
.projectblok a .card .card-body { background-color: transparent; margin: 0; }
.projectblok .card h5.card-title { font-weight: 400; text-transform: uppercase; padding: 0px 0 0px; transition: ease-in-out all 0.4s; position: relative; overflow: hidden; font-size: 18px; line-height: 18px; }
	.projectblok .card h5.card-title span { padding: 8px 8px 8px 16px; background-color: #fe0000; color: #fff; display: inline-block; position: relative; }
		.projectblok .card h5.card-title span::after { content: ''; width: 0; height: 0; border-color: transparent; border-top-color: #fe0000; border-style: solid; border-width: 34px 17px 0 0; position: absolute; top: 0; right: -17px; }
.projectblok .card .card-body .card-text { }
.projectblok .card-footer { background-color: #fff; border: 0; padding: 0 0 20px 0; margin-top: 25px; border-bottom: solid 8px #ccc; transition: ease-in-out all 0.4s; border-radius: 0; }
	.projectblok .card-footer span { background-color: #fff; color: #e62e28; display: inline-block; padding: 4px 12px; transition: ease-in-out all 0.4s; font-size: 18px; border: solid 2px #e62e28; }
.projectblok a:hover .card .card-footer { border-bottom: solid 8px #e62e28; }
	.projectblok a:hover .card .card-footer span { background-color: #263686; color: #fff; border: solid 2px #263686; }
.projectblok a:hover .card .card-img-top { border-top: solid 8px #222; filter: none; }

.catblok .card-col { margin-bottom: 30px; }
.catblok .card { border: 0; border-radius: 0; background-color: #fff; }
	.catblok .card .card-img-top { border-radius: 0; transition: ease-in-out all 0.4s; }
.catblok .card-body { padding: 8px 0; }
.catblok a .card .card-body { background-color: transparent; margin: 0; border-top: solid 0px #ccc; transition: ease-in-out all 0.4s; }
.catblok .card h5.card-title { padding: 0; margin: 0; transition: ease-in-out all 0.4s; position: relative; overflow: hidden; font-size: 20px; line-height: 28px; font-weight: 700; }
	.catblok .card h5.card-title .fas {color:#fe0000;font-size:16px;}
	.catblok a:hover .card .card-img-top { filter: none; }
.catblok a:hover .card .card-body { border-top: solid 0px #000; background-color: #000; }
	.catblok a:hover .card .card-body h5.card-title { color: #fff; }

.card-img { display: inline-block; max-width: 100%; overflow: hidden; position: relative;border-radius:0; }
.card-img::before { top: 0; left: 0; right: 100%; bottom: 100%; border-top: #fe0000 solid 10px; border-left: #fe0000 solid 10px; }
.card-img::after { top: 100%; left: 100%; right: 0; bottom: 0; border-bottom: #fe0000 solid 10px; border-right: #fe0000 solid 10px; }
.card-img::before, .card-img::after { content: ""; opacity: 0; pointer-events: none; z-index: 3; position: absolute; box-sizing: border-box; transition: all 1s ease 0s; box-shadow: none; }
.card-img:hover::before { opacity: 1; bottom: 0; right: 0; }
.card-img:hover::after { opacity: 1; top: 0; left: 0; }

.card.nieuws {border-radius:0;border:0;border-bottom:solid 1px silver;}
.card.nieuws .card-img-top {border-radius:0;}
.card.nieuws .card-body {padding-left:0;padding-right:0;}
.card.nieuws .card-title {font-weight:700;}
.card.nieuws .card-footer {background-color:#fff;border-top:0;padding-left:0;}
.card.nieuws .card-footer a {display:inline-block;padding:6px 12px;color:#fe0000;background-color:#fff;font-weight:700;border:solid 2px #fe0000;}
	.card.nieuws .card-footer a:hover { background-color: #fe0000; color: #fff; }

.divider { height: 1px; border-top: solid 1px #ccc; margin-top: 10px; margin-bottom: 50px; }


button:focus { outline: none; }

.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 { background-color: #f5f5f5; padding: 18px 20px 8px 10px; margin-bottom: 30px; }
	.contact p a { border-bottom: solid 1px #000; }
.contactimg { margin-bottom: 35px; }

.contact-bg {background:url(../images/contact-bg.jpg) center center no-repeat;background-size:cover;}
.formcontent { background-color: rgba(255,255,255,0.9); padding: 5px 30px 20px 30px; }
label { font-weight: normal; font-family: 'Ubuntu', sans-serif; font-size: 20px; line-height: 28px;color:#616263; }
label a {border-bottom:solid 1px #000;}
.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-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; }
	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; }
	input[type=radio] + label:before { content: "\f111"; letter-spacing: 10px; }
	input[type=radio]:checked + label:before { content: "\f192"; }

footer { background: url('/images/corten-staal-1.jpg') top center repeat; }
	footer h3 { font-size: 56px; color: #fff; font-weight: 700; position: relative; padding-bottom: 30px; text-transform: uppercase; }
		footer h3 span { font-weight: 700; font-size: 22px; line-height: 26px !important; }
		footer h3 strong { font-size: 42px; margin: 0 4px; color: #fe0000; }
	footer ul, footer p, footer p b, footer ul b { color: #fff; line-height: 40px; }
	footer a, footer a:focus { color: #fff; border-bottom: solid 1px #fff; }
		footer a:hover { color: silver; border-bottom: solid 1px silver; }
		footer a.tel { border-bottom: 0; color: #fff; }
			footer a.tel:hover { color: #fff; border-bottom: 0; }
	footer .km { font-size: 14px; line-height: 18px; }
		footer .km a { border-bottom: none; color: gray; }

.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:1500px) {
	.container { max-width: 1300px; }
}

@media(min-width:1400px) and (max-width:1499px) {
	.container { max-width: 1200px; }
}

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

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

@media(min-width:1200px) {
	footer { padding: 100px 0; margin-top: 0px; }
		footer h3::before { content: ""; width: 90px; height: 4px; display: inline-block; background: #fe0000; position: absolute; bottom: 0; z-index: 2; }
		footer h3 span { display: block; }
	.pagecontent h1 {padding-left:15px;border-left:solid 4px #fe0000;}
}

@media(max-width:1200px) {
	footer { padding: 70px 0; }
		footer h3 { text-align: center; margin-bottom:25px; }
			footer h3 span { display: block; }
	.projectoverview { padding: 50px 0 20px 0; }
}

@media(min-width:992px) and (max-width:1199px) {
	.herocontainer .hero {padding:100px 0;}
	.herocontainer .hero h1 { font-size: 42px; line-height: 46px; max-width:480px; }
}

@media (max-width:991px) {
	footer { padding: 40px 0; }
}

@media(min-width:768px) and (max-width:991px) {
	.herocontainer .hero { padding: 40px 0 160px 0; }
		.herocontainer .hero h1 { font-size: 34px; line-height: 40px; max-width: 480px; }

	.card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}

@media(max-width:767px) {
	.herocontainer .hero { padding: 40px 0 120px 0; }
		.herocontainer .hero h1 { font-size: 34px; line-height: 40px; max-width: 480px; }

	.pagecontent > .projectoverview { display: none; }
	.catblok .card .card-img-top { display: none; }
	.catblok .card h5.card-title::after { content: '\f178'; font-family: 'Font Awesome 5 Pro'; margin-left: 4px; }

	.divider { display: none; }
	.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; }

	footer h3 { text-align: left; }
}

@media(max-width:575px) {
	.herocontainer .hero { padding: 40px 0 120px 0; }
		.herocontainer .hero h1 { font-size: 34px; line-height: 40px; padding-left:0;border-left:0; }

	.pagecontent, .homecontent { padding: 50px 0 30px 0; }
	.breadcrumbcontainer { padding:0; }

	footer { padding: 20px 0; }
		footer h3 { font-size: 34px; }
		footer h3 strong {font-size:28px;}
		footer h3 span {font-size:20px;}
		footer ul, footer p { font-size: 16px; line-height: 28px; }
	p, ul, ol { font-size: 16px; line-height: 28px; }
	label { font-size: 16px; line-height: 20px; }
}

@media(max-width:380px) {
	.herocontainer .hero h1 { font-size: 28px; line-height: 30px; }
	.herocontainer .hero a {font-size:14px;}
}