/*
Theme Name: 	Harwig
Description: 	Kale template om mee te beginnen
Version: 		1.0
Author: 		Sander van der Weide, Tammo Haan
Author URI: 	http://www.vdscrossmedia.nl
*/

@import "https://www.harwig.nl/wp-content/plugins/complianz-gdpr/assets/css/cookieconsent.min.css";
@import "css/reset.css";
@font-face {
	font-family: 'Arial';
	src: url('fonts/Arial Italic.eot');
	src: local('☺'), url('fonts/Arial Italic.woff') format('woff'), url('fonts/Arial Italic.ttf') format('truetype'), url('fonts/Arial Italic.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Arial';
	src: url('fonts/Arial.eot');
	src: local('☺'), url('fonts/Arial.woff') format('woff'), url('fonts/Arial.ttf') format('truetype'), url('fonts/Arial.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Arial';
	src: url('fonts/Arial Bold.eot');
	src: local('☺'), url('fonts/Arial Bold.woff') format('woff'), url('fonts/Arial Bold.ttf') format('truetype'), url('fonts/Arial Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Arial';
	src: url('fonts/Arial Bold Italic.eot');
	src: local('☺'), url('fonts/Arial Bold Italic.woff') format('woff'), url('fonts/Arial Bold Italic.ttf') format('truetype'), url('fonts/Arial Bold Italic.svg') format('svg');
	font-weight: bold;
	font-style: italic;
}
div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#e1e1e1; color:#333; }
::selection 		{ background:#e1e1e1; color:#333; }

/*

14 / 16	= 		0.875em 		(gelijk aan 14px)
16 / 16	= 		1em 			(gelijk aan 16px)
18 / 16 = 		1.125em 		(gelijk aan 18px)
21 / 16 = 		1.3125em 		(gelijk aan 21px)
24 / 16 = 		1.5em 			(gelijk aan 24px)
30 / 16 = 		1.875em 		(gelijk aan 30px)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }

body { -webkit-font-smoothing: antialiased; }
body, html { width:100%; height:auto; padding:0px; margin:0px; font-family: 'arial'; font-weight:normal; font-size:16px; line-height:28px; /*color:#515152;*/ color:#6d6d6d; letter-spacing:0.5px; }
div { position:relative; }
ul, li { margin:0px; padding:0px; list-style:none; }

* { box-sizing: border-box }
img.alignleft {float: left; margin: 0 1em 1em 0;}
img.alignright {float: right; margin: 0 0 1em 1em;}
img.aligncenter { display: block;    margin-left: auto;    margin-right: auto; }    
.aligncenter, div.aligncenter {    display: block;    margin: 5px auto 5px auto;}
a { color:currentColor;}
a:hover { color:currentColor; text-decoration:none;}

img { max-width:100%; height:auto; }

.content { padding:80px 0px; }
.links { float:left; }
.rechts { float:right; }
.geen-margin { margin:0px; }
.geen-padding { padding:0px; }
section { padding:60px 0px!important; }


/*heading*/
h1, h2, h3,h4, h5, h6 {  line-height: 125%;  margin:0px 0px 20px 0px; font-weight: bold; letter-spacing:0px;}
h1 {  font-size: 36px;}
h2 {  font-size: 30px;}
h3 {  font-size: 22px;}
h4 {  font-size: 18px;}
h5 {  font-size: 16px;}
h6 {  font-size: 14px; }
p { margin:0px 0px 25px; }

/*knoppen*/
.btn { padding: .6rem 1.9rem; border-radius:5px; border:1px solid transparent; margin:5px 0px; color:#fff; font-weight:bold; text-transform: uppercase; }
.btn-primary, .btn-outline-primary:hover, .btn-outline-white:hover   { background:#218A90; color:#fff; border-color:transparent;}
.btn-primary:hover, .btn-outline-primary { background:transparent; border-color:#218A90; color:#218A90; }
.btn-secondary, .btn-outline-secondary:hover { background:#FF7600;  }
.btn-secondary:hover, .btn-outline-secondary { background:transparent; border-color:#999; color:#999; }
.btn-outline-primary:hover, .btn-outline-secondary:hover { border:1px solid transparent; }
.btn-outline-white, .btn-secondary:hover { border-color:#fff; color:#fff; }
.btn-white { background:#fff; color:#218A90;}
.btn-white:hover { background:transparent; border-color:#fff; }
.btn-no-radius { border-radius:0px;}
.btn-primary:hover { background:#FF7600; border-color:transparent; color:#fff; }

/*opsommingen*/
.main-content ul { margin-bottom:20px;  } 
main li:before { content: '\f111';font-family: "Font Awesome 5 Free";font-weight: 900;top: 0px;left: 0px;border-radius: 50%; position:absolute; font-size:45%;}
main li { position: relative; padding-left: 20px; }

/*form*/
input, select, textarea { display: inline-block;width: 100%;line-height: 40px;border: none;outline: none;background: #f6f6f6;padding: 0 20px; margin: 5px 0px; border-radius:5px; }
select { -webkit-appearance:none; position:relative; background:transparent; }
.dropdown { background: #f6f6f6; margin: 5px 0px; }
.dropdown select { margin:0px; }
.dropdown:before {  right:10px; top:6px; position:absolute; content: '\f0d7';font-family: "Font Awesome 5 Free";font-weight: 900; font-size:16px; z-index:5;}
input.btn { width:auto; } 

/*bg*/
.bg-primary { background:#218A90!important; color:#fff; }
.bg-secondary { background: #ECF0F4!important; }

/*colors*/
.kl-wit { color:#fff; }
.kl-primary { color:#218A90;  }
.kl-secondary { color:#FF7600; }
.kl-grijs { color:#AFABA9; }

/*font size*/
.font-size-19 { font-size:19px; line-height:30px;}

.overflow-hidden { overflow:hidden; }

p.orange {background: #ff7600; padding:5px 10px;}
/*----------------------------------------------
THEMA
----------------------------------------------*/
header { position:fixed; width:100%; top:0px; z-index:50; padding:25px 0px; background:rgba(255,255,255,0); transition:all 0.4s ease-in;  background-image: linear-gradient(black, transparent);}

.logo { max-width:250px; transition:max-width 0.4s ease; }
.logo img { width:100%; height:auto; }

header.scrolled { background:rgba(255,255,255,1); transition:all 0.4s ease-out;  padding:15px 0px; border:1px solid #e1e1e1;}
header.scrolled .logo { max-width:250px; transition:max-width 0.4s ease; }

header .logo-kleur { display:none; }
header.scrolled .logo-wit { display:none; }
header.scrolled .logo-kleur { display:block; }

.menu { /* margin-top:-35px; */ }
.menu li { float:left; text-transform:uppercase; font-weight:bold; padding:20px 5px; letter-spacing:2px;  transition:padding 0.4s ease; }
.menu li a { color:#AFABA9; display:inline-block; padding:10px 10px;}
.menu li a:hover { text-decoration:none;  }
.menu li.current-menu-item a { color:#FF7600; }
.menu li:hover a { color:#218A90; }
.menu li a:before { content:'\f0da'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right:5px; position:relative;}

.menu li.phone a:before { content:'\f2a0'; font-family: "Font Awesome 5 Free"; font-weight: 900;}
.menu li.phone a { border:2px solid #fff; padding:10px 25px; margin-left:20px; border-radius:50px; background:transparent;}
.menu li.phone:hover a { background-color:#218A90; color:#fff; border-color:#218A90; }

.menu .sub-menu li a:before { display:none; }

.menu .sub-menu { opacity:0; visibility:hidden; position:absolute; padding:15px 20px; background:rgba(255,255,255,0.9); top:70px; transition:all 0.4s ease; transform:translateY(50px);}
.menu .sub-menu li { float:none; font-weight:normal; text-transform: none; padding:0px; letter-spacing:0px; white-space: nowrap;}
.menu .sub-menu li a { color:#515152; padding:2px 0px; display:inline-block;}
.menu li:hover .sub-menu {  opacity:1; visibility:visible;  transition:all 0.4s ease; transform:translateY(0px) }
.menu .sub-menu li:hover a { color:#FF7600;  } 

header.scrolled .sub-menu { padding-top:30px; }
header.scrolled .menu li { padding:10px 5px; }
header.scrolled .menu .sub-menu li { padding:0px; }
header.scrolled .menu li.phone a { background-color:#218A90; color:#fff; border-color:#218A90; padding:6px 25px;}
header.scrolled .menu li.phone:hover a { background:transparent; color:#218A90; }

/*mobiel menu*/
.mobiel-menu { width:100%; max-width:500px; position:fixed; left:-500px; top:0px; height:100vh; display:none; overflow: scroll; font-size:16px; font-weight:600;  z-index:21; padding:120px 25px 25px; }
.mobiel-menu li {  position:relative; color:#fff; text-transform:uppercase; font-weight:bold; margin:0px -25px; letter-spacing:2px;  border-bottom:1px solid #AFABA9;}
.mobiel-menu li:first-child {  border-top:1px solid #AFABA9; }
.mobiel-menu li a { padding:10px 25px; display:inline-block; text-decoration:none; width:100%; }
.mobiel-menu .sub-menu { position:relative; display:block; top:inherit; max-height:0px; overflow:hidden; transition: max-height 0.15s ease-out;  width:100%; padding:0px 25px; background:rgba(255,255,255,0.05) }
.mobiel-menu li:hover .sub-menu, .mobiel-menu li:active .sub-menu { max-height: 500px; transition: max-height 0.25s ease-in; }
.mobiel-menu .sub-menu li .sub-menu {  max-height:0px; }
.mobiel-menu .sub-menu li:hover .sub-menu { max-height: 500px; }
.mobiel-menu .menu-item-has-children a:after, .mobiel-menu .sub-menu .menu-item-has-children:after{ content:'\f0d7'; position:absolute;  top:8px; right:30px; font-family: "Font Awesome 5 Free";font-weight: 900; text-decoration: none; }
.mobiel-menu .sub-menu a:after { display:none; }
.mobiel-menu .sub-menu .menu-item-has-children { width:120%!important; white-space: normal!important; }

.drilldown { width: 100%;      padding: 0px;      margin: 0px;      background-color: transparent;     -webkit-transform: translate3d(0,0,0);  transform: translate3d(0,0,0);   }
.drilldown-sub {display: none;}
.drilldown-back {font-weight: bold; }
.drilldown .menu-item-has-children a:after, .drilldown .sub-menu .menu-item-has-children:after { content:'\f0da'; }
.drilldown .current-menu-item { color:#FF7600;}

/*mobielmenuknop*/
.mobiel-menu-knop { z-index: 20;cursor: pointer;opacity: 0;visibility: hidden;display:none;-webkit-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s; }
.mobiel-menu-knop i::before, .mobiel-menu-knop i::after {content: '';width: 30px;height: 2px;background: #fff;position: absolute;left: 0;-webkit-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s;}
.mobiel-menu-knop i::after { width:30px; }
.mobiel-menu-knop i { position: relative;display: -moz-inline-stack;display: inline-block;zoom: 1;width: 30px;height: 2px;color: #fff;font: bold 14px/.4 Helvetica;text-transform: uppercase;text-indent: -55px;background: #fff;-webkit-transition: all .2s ease-out;-o-transition: all .2s ease-out;transition: all .2s ease-out;  }
.mobiel-menu-knop i::before {top: -7px;}
.mobiel-menu-knop:hover i::before {top: -10px;}
.mobiel-menu-knop i::after {bottom: -7px;}
.mobiel-menu-knop:hover i::after {bottom: -10px;}
.mobiel-menu-knop:before { content:'Menu'; text-transform:uppercase; font-weight:bold; color:#fff; padding:0px 10px; top:4px; position:relative; }

header.scrolled .mobiel-menu-knop:before, header.scrolled .mobiel-menu-knop i { color:#AFABA9 }
header.scrolled .mobiel-menu-knop i::before, header.scrolled .mobiel-menu-knop i::after { background: #AFABA9; }
header.scrolled .mobiel-menu-knop i { background: #AFABA9; }

/*slider*/
.slider { height:100vh;  background-size:cover!important; background-position: center center!important; }
.slider:before { content:''; width:100%; height:100%; top:0px; left:0px; position:absolute; opacity:0.3; background:#000; }
.sliderknoppen { max-width:400px; }
.slidercontent { max-width:600px; transition:opacity 0.4s ease-out; }
.slidercontent .btn { width:100%; }
.slidercontent h1 { font-size:70px; font-weight:bold; text-transform: uppercase; color:#fff; line-height:100%;}
.slidercontent h1 span { color:#218A90; }
.slidercontent.hide { opacity:0; transition:opacity 0.4s ease-in; }

.slider .categorien { position:absolute; bottom:0px; padding-bottom:30px;  width:100%; color:#fff; background-image: linear-gradient(transparent, black);}
.slider .categorien .container-fluid { max-width:1500px; }
.slider .categorien .row { justify-content: center }
.slider .categorien .cat-item { display:flex; }
.slider .categorien .caticon { margin-right:20px; }
.slider .categorien .caticon img { max-width:inherit; }
.slider .categorien .catcontent:after { content:''; height:1px; background:#fff; position:absolute; bottom:0px; left:0px; width:25%; transition:width 0.2s ease-in; }
.slider .categorien .cat-item:hover .catcontent:after { width:100%; transition:width 0.2s ease-out; }
.slider .categorien .cat-item h5 { font-size:16px; letter-spacing:0px;-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; -ms-hyphenate-limit-chars: 6 3 2; -webkit-hyphenate-limit-chars: 6 3 2; -moz-hyphenate-limit-chars: 6 3 2;  }
.slider .categorien .cat-item:hover h5 { color:#FF7600; }
.slider .categorien .helpen h4 { margin-top:0px; margin-bottom:10px; letter-spacing:1px;}
.slider .categorien .helpen p { font-size:14px; }

.headerarea { height:500px; }
.headerarea .headerimage { height:100%; width:100%; background-size:cover!important; background-position:center center!important; }
.headerarea .headertitel { position:absolute; width:100%; bottom:30px; }
.headerarea .headertitel h1, .headerarea .headertitel h2 { font-size:45px; text-align:center; text-transform:uppercase; color:#fff; text-shadow:0px 5px 10px rgba(0,0,0,0.3); }
.headerarea .kruimelspoor { color:#fff; position:absolute; right:10px; bottom:0px; transform-origin: top right; transform:rotate(90deg); text-transform:uppercase; font-weight:bold; font-size:12px; }

/*main*/
.blok { max-width:800px; margin:40px auto; }
.blok h2 { margin-top:0px; }

.blok p { margin-bottom:15px; letter-spacing:1px;  }
.blokknop { width:100%; margin:0px -15px; padding:30px 15px; border:0px; box-sizing:unset;  }
.blokknop:hover { background:rgba(0,0,0,0.3);  }

.blok-met-knop { padding-bottom:85px; }
.blok-met-knop .blokknop { position:absolute; bottom:0px; }

.usparea { /*max-width:550px;*/ }
.usparea .usp-home { padding:20px 10px; }
.usparea .usp-home p { max-width:300px; margin:0px auto; letter-spacing:1px; }
.usparea .usp-home .usp-icon { margin-bottom:15px; width:auto; height:60px; }

.five-col { width:20%; position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px;}

.section-titel { text-transform:uppercase; text-align: center; margin-bottom:40px; }
section p a {color:#FF7600;}

blockquote { margin-bottom:25px; }
blockquote p { font-size:30px; color:#FF7600; line-height:100%; margin-bottom:10px;}
blockquote cite { font-style:normal; color:#218A90; }

.afbeeldingen-row .thumbnail { background-size:cover!important; background-position:center center!important; height:100%; }
.afbeeldingen-row .thumbnail:after { content:''; padding-bottom:calc(0.6 * 100%); display:block; position:relative; }

/*klanten*/
.klantenlogo { width:75%; height:120px; margin:0px auto; display:flex; align-items: center; justify-content: center; background-size:contain!important; background-position:center center!important; background-repeat:no-repeat!important;}

/*projecten*/
.project-item { height:400px; overflow:hidden; }
.project-item .thumbnail {  width:100%; height:100%; position:absolute; background-size:cover!important; background-position: center center!important;  transition:all 0.4s ease; filter: blur(0px); -webkit-filter: blur(0px);  }
.project-item .cat span:after { content:', '; }
.project-item .cat span:last-child:after { content:''; display:none; }
.project-item:hover .thumbnail { filter: blur(10px); -webkit-filter: blur(10px);  transition:all 0.4s ease;}
.project-item .overlay { opacity:0; visibility: hidden; height:100%; background:rgba(81,81,82,0); color:#fff; padding:25px; transition:all 0.4s ease;}
.project-item:hover .overlay { opacity:1; visibility: visible; background:rgba(81,81,82,0.3); transition:all 0.4s ease;}
.project-item .overlay .projectentitel { color:#fff; position:absolute; bottom:0px; text-transform: uppercase;  transform:translatey(100px); transition:transform 0.4s ease; }
.project-item:hover .overlay .projectentitel { transform:translatey(0px); transition:transform 0.4s ease; }
.project-item .bekijk h2 { margin:0px; transform:translatex(-25px); transition: transform 0.4s ease; }
.project-item .bekijk { position:absolute; bottom:0px; max-width:350px; padding:25px; color:#fff; display:flex; align-items: center; overflow:hidden; }
.project-item .bekijk .pijl { font-size:60px; color:#fff; margin-right: 15px; transform:translatex(-100px); transition: transform 0.4s ease; transition-delay: 0.1s;}
a .overzicht-knop:hover { background:#AFABA9!important; }
a .overzicht-knop:hover .pijl, a .overzicht-knop:hover h2 { transform:translatex(0px); }
.projecten-widget .blokknop { margin:0px; position:absolute; bottom:0px;}
.projecten-widget .project-item:hover .thumbnail { filter: blur(0px); -webkit-filter: blur(0px);  transition:all 0.4s ease;}
.projecten-widget { height:100%; }
.projecten-widget .project-item { height:100%; padding-bottom:50px; min-height: 350px;}

.btn-load-more { width:100%; background:#EFEEEE; text-align:center; margin:0px; padding:2rem; font-size:22px; }
.btn-load-more:hover { background:#218A90; color:#fff; }

.single-project .post-thumbnail img { width:100%; display:none;}
.single-project .post-thumbnail { height:350px; margin:0px -17px;  background-size:cover!important; background-position:center center!important; }
.single-project .projectinfo { margin-top:25px; }
.single-project .projectinfo span { display:block; }
.single-project .projectinfo .project-installaties .installatie-item { display:inline-block; }
.single-project .projectinfo .project-installaties .installatie-item:after { content:', '; }
.single-project .projectinfo .project-installaties .installatie-item:last-child:after { content:''; }


.project-filters input { margin:0px; }
.project-filters .input-group-text { text-transform:uppercase; font-size:15px; }

.project-filters select { width:100%; }
.project-filters .ms-parent li:before, .ms-drop ul>li:before { display:none!important; }
.project-filters .ms-parent li { padding-left:0px; }
.project-filters .ms-parent input { width:auto!important; }
.project-filters .ms-parent {width:100%!important; }

.projectgalerij { padding:0px!important; }
.projectgalerij .galerij-item img { display:none; width:100%; height:auto; }
.projectgalerij .galerij-item { overflow:hidden; background-size:cover!important; background-position:center center!important; height:450px;}

.galerij-item .overlay, .post-thumbnail .overlay { width:100%; position:absolute; top:0px; left:0px; height:100%; display:flex; align-items: center; font-size:70px; color:#fff; justify-content: center; background:rgba(0,0,0,0.4); visibility:hidden; opacity:0; transition:all 0.4s ease;}
.galerij-item:hover .overlay, .post-thumbnail:hover .overlay { visibility:visible; opacity:1; transition:opacity 0.4s ease; }

/*certificaten*/
.certificering .blok { margin:40px 0px; }
.row.certificaten { padding:50px; width:100%; max-width:500px; margin-left:auto; justify-content: center;}
.certi-logo { height:160px; width:100%; text-align: center; background-size:contain!important; background-position: center center!important; background-repeat:no-repeat!important;  }
.certificering .blokknop {padding-left:65px; }
.certificering { overflow:hidden; }
.certificaten-overzicht section:nth-child(odd) { background: #ECF0F4; }

.twee-koloms { -moz-column-count:2; -webkit-column-count:2; column-count:2; }

/*vacatures*/
.vacature-item { padding:25px; height:100%; padding-bottom:50px; }
.vacature-item .thumbnail {  height:200px; background-size:cover!important; background-position: center center!important; margin:-25px -25px 25px;   }
.vacature-info { display:flex; justify-content: space-between; font-size:14px; position: absolute;bottom: 25px;}
.vacature-item a:hover { text-decoration:none; }
.vacature-ct-info div { display:inline-block; margin-right:10px; }
.single-vacature blockquote.is-style-large, .quote-sectie blockquote.is-style-large{ margin:30px 0px; max-width:600px; }
.single-vacature blockquote.is-style-large p, .quote-sectie blockquote.is-style-large p { font-size:40px; font-style:normal; line-height:125%;color:#fff;letter-spacing:0px; }
.single-vacature blockquote.is-style-large cite, .quote-sectie blockquote.is-style-large cite{ color:#fff; }
.single-vacature .quote-afbeelding {  background-size:cover!important; background-position: center center!important; background-repeat:no-repeat!important; }
.vacature-item .newribbon { position: absolute;top: 15px;right: 15px;padding: 5px 10px;background: #FF7600;font-weight: bold;line-height: normal;color: #fff;text-transform: uppercase;font-size: 11px;letter-spacing: 2px; box-shadow: 0px 5px 10px rgba(0,0,0,0.3);}

.quote-sectie .quote-afbeelding img { width:100%; height:100%; object-fit:cover;  min-height:600px; max-height: 600px;}
.quote-sectie .quote-content { padding:calc(100vw * 0.06); }
.quote-sectie .quote-content h2 { font-size:45px; }
.quote-sectie .quote-content h4 { letter-spacing:0px; }
.quote-sectie .quote-content:before { content:'\f10d'; font-family: "Font Awesome 5 Free";font-weight: 900; color:#FF7600; position: absolute;transform: translatey(-200%);font-size:60px;}

/*modal*/
.modal-dialog { width:95%!important; max-width:1200px!important; }
.modal-footer, .modal-header, .modal-body { padding:1rem 2rem; border:0px; }
.modal-backdrop { background:#fff; }
.solicitatieform .form-control { background:#ECF0F4; }

/*nieuws*/
.nieus-item { height:100%; }

/*footer*/
footer { padding-top:50px; padding-bottom:0px; font-size:13px; }
footer .container { max-width:1500px; }
footer .widget.adresgegevens h4 { font-weight:normal; text-transform:uppercase; margin:0px; margin-bottom:5px; font-size:15px; letter-spacing:0.5px; }
footer .widget.adresgegevens { margin-bottom:25px; }

.footerlogo { max-width:370px; }
.footerlogo img { width:100%; }
.widget h4 { margin-bottom:5px; font-size:16px; }
.widget p { margin-bottom:0px; }
.contactgegevens { border-bottom:1px solid #e1e1e1; }
.sm-icon { color:#218A90; padding:5px; font-size:28px; display:inline-block; }
.socialicons { width:100%; max-width:400px; text-align:right; bottom:0px; position:absolute; left:0px; padding-left:15px; padding-right:15px;  }

footer .copyright { margin-top:25px; padding:25px 0px; color:#fff; text-transform:uppercase;}
footer .copyright .cp p { margin:0px; line-height:18px; letter-spacing:2px;}
footer .copyright .cp p span { display:block; font-size:9px; color:#AFABA9; letter-spacing:1px;}
footer .copyright .copyright-content { display:flex; align-items: center; justify-content: space-between;}
footer .footermenu li { float:left; text-transform:uppercase; padding:0px 10px; letter-spacing:2px; }
.footermenu a:hover { color:rgba(0,0,0,0.6); text-decoration: none; }

.contactformulier label { letter-spacing:1px; }
.projecten-widget .blokknop:hover { background:#218A90; }
.contactformulier .form-control { border-color:transparent; }
.row.formulier .blok { padding:1em 3rem; }
.contactformulier textarea { max-height:135px; }

.projecten-link:after { content:', '; }
.projecten-link:last-child:after { content:''; }

/*UG blocks*/
.uagb-columns__wrap.container { padding:0px 15px!important; }
.uagb-columns__wrap.container .uagb-columns__inner-wrap { margin:0px -15px!important; }
.uagb-columns__wrap.container .uagb-column__inner-wrap { padding:0px 15px; position:relative; }

section.full { width: 100vw;position: relative;margin-left: 50%!important;left: -50vw;max-width: none!important;  }
.wp-block-uagb-section.container { max-width:1200px!important; }

/*page met ugb*/
.paginaintro {  }
.paginaintro h2 { font-size:35px; text-transform:uppercase; }
.paginaintro h2, .paginaintro p {max-width:1000px; margin-left:auto; margin-right:auto; }
.paginaintro p { margin-bottom:0px; letter-spacing:1px; }
.usp-item li:before { content:'\f00c'; color:#FF7600; font-size:20px; }
.usp-item li { padding-left:40px; font-weight:bold; }

/*page met bootstrap blocks*/
.wp-bootstrap-blocks-row { padding-left:0px; padding-right:0px; }

/*contact*/
.contact-top { overflow:hidden; }
.contact-top .left-block:before { content:''; width:100vw; position:absolute; right:0px; height:100%; background:#218A90; top:0px;}
.contact-top .right-block:before { content:'';  width:100vw; position:absolute; left:0px; height:100%; background:#ECF0F4; top:0px; z-index:-1;}
.contact-top .content-intro { padding-right:60px; }
.contact-top .storingsnummer h2 { font-size:40px; color:#FF7600; line-height:100%;  }
.contact-top .storingsnummer h2 span { color:#218A90; display:block; font-size:25px; }
.contact-top .storingsnummer { padding-left:60px; }
.contactform .form-control { background:#ECF0F4; }
.vestigingen h4 { margin-bottom:5px; text-transform:uppercase; }
.vestigingen p { margin-bottom:0px; }
.vestigingskaart { /*max-height:450px;*/ height:100%; min-height:500px; }
.vestigingen .btn { width:100%; max-width:300px; font-size:12px; position:absolute; bottom:0px; left:0px; margin:0px auto; }
.vestigings-col { padding-bottom:80px; height:100%; }
.vestigingsinfo span { display:block; }

/*team*/
.teamitem  { background:#fff; height:100%; border-radius:25px; padding:20px 20px 40px; text-align:center; box-shadow: 0px 10px 15px rgba(0,0,0,0.05)}
.teamitem .thumbnail { width:135px; height:135px; background-size:cover!important; background-position:center -20px!important; border-radius:100%; margin:-65.5px auto 20px;} 
.teamitem h3, .teamitem h4 { margin:5px auto; color:#218A90;}
.teamitem h4 { color:#AFABA9; font-size:15px; font-weight:normal; }
.teamitem-col.expanded { /*width: 100%; flex: 0 0 100%;*/ max-width: 100%; transition:all 0.5s ease; }
.teamitem-col { transition:all 0.5s ease; }
.teamitem .teamitem-content { width:100%; max-width:600px; margin:0px auto; max-height:0px; transition:all 0.2s ease; overflow:hidden; opacity:0; }
.teamitem .teamitem-content p { font-size:18px; padding:20px 0px; }
.teamitem-col.expanded .teamitem .teamitem-content { max-height:1000px; transition:all 1s ease; opacity:1; transition-delay: 0.5s;  }

/*Sponsoractie*/
.galerij-item { height:250px; width:100%; overflow:hidden; transition:all 0.4s ease; background-color:#fff;}
.galerij-item .thumbnail { width:100%; height:100%; background-size:cover!important; background-position:center center!important; transition:all 0.4s ease;}
.galerij-item:hover .thumbnail { filter: blur(10px); -webkit-filter: blur(10px); transition:all 0.4s ease; }
.galerij-item .overlay { opacity:0; visibility: hidden; height:100%; background:rgba(81,81,82,0); color:#fff; padding:25px; transition:all 0.4s ease;}
.galerij-item:hover .overlay { opacity:1; visibility: visible; background:rgba(81,81,82,0.3); transition:all 0.4s ease;}
.galerij-item .overlay .albumtitel { color:#fff; position:absolute; bottom:0px; text-transform: uppercase;  transform:translatey(100px); transition:transform 0.4s ease; }
.galerij-item:hover .overlay .albumtitel { transform:translatey(0px); transition:transform 0.4s ease; }

#albummodal .galerij-item { height:175px; }

.donatie { font-size: 50px; font-weight:bold; }

.berichtenaccordion .card { margin-bottom: 10px; }
.berichtenaccordion .card .card-header { border-bottom:0px; }
.berichtenaccordion .card .card-header:after { content:'\f078'; position:absolute; right:10px; top:0.5em; font-family: "Font Awesome 5 Free";font-weight: 900; }

.loading { position:absolute; height:100%; width:100%; top:0px; display:flex; align-items: center; justify-content: center; background:rgba(0,0,0,0.5); }
.loading img { width:25%; }

.sponsor-item { height:100%; border:1px solid #ECF0F4; background:#fff;}
.sponsor-item .sponsorlogo { height:125px;  }
.sponsor-item .sponsorlogo .thumbnail { width:85%; height:85%; top:7.5%; left:7.5%; position:absolute; background-repeat:no-repeat!important; background-size:contain!important; background-position:center center!important; }
.sponsor-item h5 { margin:0px; }

.sponsorpagina .intro { max-width: 800px;margin: 0px auto 60px;text-align: center; }
.sponsorpagina .intro h2 { color:#FF7600; }
.sponsorpagina .intro p { font-size:22px; }

.pricing-table .heading {  text-align: center;  padding-bottom: 10px;  border-bottom: 1px solid rgba(0, 0, 0, 0.1); letter-spacing:0px; }
.pricing-table .item {  height:100%; background-color: #ffffff;  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);  border-top: 5px solid #FF7600;  padding: 30px;  overflow: hidden;  position: relative; padding-bottom: 180px;}
.pricing-table .item button {  font-weight: 600; }
.pricing-table .ribbon {  width: 160px;  height: 32px;  font-size: 12px;  text-align: center;  color: #fff;  font-weight: bold;  box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);  background: #4dbe3b;  transform: rotate(45deg);  position: absolute;  right: -42px;  top: 20px;  padding-top: 7px; }
.pricing-table .item p {  text-align: center;  margin-top: 20px;  opacity: 0.7; }
.pricing-table .features { margin-top:20px; }
.pricing-table .features .feature {  font-weight: normal; }
.pricing-table .features h4 {  text-align: left;  font-size: 18px;  padding: 5px; letter-spacing:0px; }
.pricing-table .price { position: absolute;width: 100%;bottom: 90px;left: 0px; }
.pricing-table .price h4 {  margin: 15px 0;  font-size: 45px;  text-align: center;  color: #218A90; }
.pricing-table .btn-block { position:absolute; bottom:20px; left:5%; width:90%; }

.sponsorbericht-item { padding:30px; height:100%;  border-top: 5px solid #FF7600;}
.sponsorbericht-item { padding-bottom:80px; }
.sponsorbericht-item .btn {  position:absolute; bottom:30px; }
.sponsorbericht-item .datum, .montventoux-post .datum { color:#FF7600; }
.montventoux-post { max-width:800px; margin:0px auto; }
.post-after .bericht-delen { margin-bottom:30px; overflow:hidden;}
.post-after .bericht-delen span { clear:both; display:inline-block; width:100%; font-weight:bold; margin-bottom:10px;}
.post-after .bericht-delen .sm-link { display:flex; width:45px; height:45px; align-items:center; justify-content: center; border:2px solid #218A90; color:#218A90; border-radius:100%; font-size:20px; float:left; margin-right:10px;}
.post-after .bericht-delen .sm-link:hover {background:#218A90; color:#fff;  }

.sponsoricon { height:50px; width:auto;}
.sponsoricon img { height:100%; width:auto; }

/*donatieform*/
.donatieform p span { display:none; }
.donatieform label { display:none!important; }
.donatieform  br { display:none; }
.donatieform #dmm_amount { font-size:45px; font-weight:bold; background:transparent; color:#218A90; padding:0px; margin:0px;}
.donatieform .totaalprijs { position:relative; padding-left:0px; }
.donatieform .totaalprijs:before { content:'€'; position:absolute; font-size:45px; font-weight:bold; top:25%; left:50%; margin-left: -80px; color:#218A90;}
.donatieform .totaalprijs input { text-align:center; float:none!important; }
.donatieform .donatieknop { display:none; }
.donatieform .btn.nieuwe-doneer-knop input { padding: 0rem 1.9rem; margin:0px; background:transparent; display:inline-block; text-transform:uppercase; color:#fff;font-weight:bold;  }
.donatieform .btn.nieuwe-doneer-knop { padding:0px; }
.donatieform .btn.nieuwe-doneer-knop:hover, .donatieform .btn-nav:hover { background:#FF7600; border-color:#FF7600; color:#fff; } 
.donatieform .btn-nav { padding: .6rem 1.3rem; }
.donatieform p { opacity:1!important; }

.sponsorform li:before { display:none; }
.sponsorform li { padding-left:0px; }
.sponsorform li input[type="checkbox"], .sponsorform li input[type="radio"] { width:auto; }
.sponsorform p { margin:0px; }
.sponsorform #rfmp_open_amount_3644 input { background:#ECF0F4; display: inline-block;height: calc(2.25rem + 2px);padding: .375rem .75rem;font-size: 1rem;line-height: 1.5;color: #495057;background-clip: padding-box;
border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; width:auto;  }
.sponsorform .rfmp_currency_3644 { font-size:22px; font-weight:bold; color:#218A90; margin-right:5px;}
.sponsorform #form_3644_field_7 { font-size:22px; font-weight:bold; color:#218A90; margin-bottom:20px; }
.sponsorform #form_3644_field_7 td { padding-right:10px; }

input[type="checkbox"], input[type="radio"] { width:auto; }

#loading { display: block;;z-index: 10;background: rgba(255,255,255,0.8);top: 0px;left: 0px; padding:20px 0px; text-align:center;}


@media screen and (max-width:1400px) {
	.project-item {height: 300px;}
}

@media screen and (min-width:1400px) {
	.container { max-width:1200px; }
	.logo { max-width:500px; }
	.afbeeldingen-row .thumbnail { height:500px; }
}
@media screen and (max-width:1550px) {
	.menu li.phone { display:none; }
}
@media screen and (max-width:1300px) {
	.slider .categorien { display:none; }
}
/*mobiel-menu-responsive*/
@media screen and (max-width:1190px) {
	.menu {display:none; }
	.mobiel-menu { display:block;  }
	.mobiel-menu.open { transform:translateX(500px); transition: all 0.5s ease 0s;}
	.mobiel-menu  {transition: all 0.5s ease 0s;    }
	.mobiel-menu .mobiel-menu-knop:before { content:'Sluiten'; }
	.mobiel-menu-knop { display:block; visibility: visible; opacity: 1; }
}
/* einde mobiel-menu-responsive*/
@media screen and (max-width:990px) {
	.contactgegevens { text-align:center; }
	.footerlogo { margin:20px auto 40px; }
	.contactgegevens { border-bottom:0px solid #e1e1e1;  }
	.socialicons { max-width:inherit; left:0px; text-align:center; position:relative; padding:0px;}
	footer .copyright .copyright-content { justify-content:center; } 
	footer .copyright .cp p { text-align:center; }
	footer .copyright { margin-top:40px; }
	.slider .categorien { display:none; }
	.sm-icon { display:block; float:left; width:25%; padding:15px; border:1px solid #e1e1e1; border-collapse: collapse; }
	footer .copyright { margin-top:0px; }
	.mb-no-gutters { padding-left:0px; padding-right:0px; }
	.contact-top .left-block:before { width:140%; right:-20%;}
	.contact-top .right-block:before { width:140%; left:-20%;}
	.contact-top .storingsnummer { padding-left:0px; }
	.contact-top .content-intro { padding-right:0px; }
	.projectgalerij .galerij-item { height:300px; }
	.twee-koloms { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
	.quote-sectie .quote-afbeelding img {  min-height:inherit; }
	
}
@media screen and (max-width:1024px) {
	.five-col { width:33.33%; }
}
@media screen and (max-width:768px) {
	.project-item { height:250px; }
	footer .widget.adresgegevens p { display:none; }
	.vestigings-col { text-align:center; padding-bottom:0px; }
	.vestigingen .btn { position:relative; margin-top:25px; }
	.vestigingen { text-align:center; }
	.vestigingskaart { margin-top:40px; }sl
	.project-item .overlay { visibility:visible; opacity:1;background: rgba(81,81,82,0.1); }
	.project-item .overlay .projectentitel { transform:none; }
	.projectgalerij .galerij-item { height:250px; }
	.headerarea .kruimelspoor { display:none; }
	.five-col { width:50%; }	.blok h2 { margin-top:0px; font-size: 25px;}
	
}
@media screen and (max-width:576px) {
	.blok.p-5 { padding:1rem 0px!important; }
	.certificering .blokknop { padding-left:15px; }
	.slidercontent h1 { font-size:45px; }
	.slidercontent .btn { width:inherit; }
	.slidercontent { position:absolute; bottom:20%; }
	.project-item { height:300px; }
	.knop-projecten .project-item { height:auto; }
	.project-item .bekijk { padding:10px; }
	.project-item .bekijk h2 { font-size:25px;  } 
	.project-item .overlay .projectentitel h3 { font-size:25px; } 
	.project-item .bekijk { position:relative; max-width:inherit; }
	.project-item .bekijk .pijl { font-size:30px; }
	header.scrolled .logo { max-width: 175px; }
	.logo { max-width: 200px; }
	.footerlogo { max-width: 250px;}
	.headerarea .headertitel h1 { font-size:25px; }
	.paginaintro h2 {font-size: 28px;}
	.headerarea { height:250px; }
	.row.formulier .blok { padding:1rem; }
	.five-col { width:100%; }
	.galerij-item {	height: 180px;}
	.quote-sectie .quote-content { padding:calc(100vw * 0.06); padding-left:15px; padding-right:15px; }
}

.in-uitvoering {background: #ff7600;    padding: 5px 12px;    font-size: 12px;    width: fit-content;}

.certificering {
    overflow: hidden;
    padding-top: 35px!important;
    background: #ECF0F4!important;
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  width: 50px;
  height: 50px;
  
}

 .spinner .path {
    stroke: #000;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}