@font-face {
   font-family: 'Acumin Pro';
   src: url("/assets/webfonts/Acumin-Pro-Medium.eot"); /* IE9*/
   src: url("/assets/webfonts/Acumin-Pro-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
   url("/assets/webfonts/Acumin-Pro-Medium.woff2") format("woff2"), /* chrome、firefox */
   url("/assets/webfonts/Acumin-Pro-Medium.woff") format("woff"), /* chrome、firefox */
   url("/assets/webfonts/Acumin-Pro-Medium.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
   url("/assets/webfonts/Acumin-Pro-Medium.svg#Acumin Pro") format("svg"); /* iOS 4.1- */
   }
@font-face {font-family: "Big Caslon";
	src: url("/assets/webfonts/Big-Caslon-Medium.eot"); /* IE9*/
	src: url("/assets/webfonts/Big-Caslon-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
	url("/assets/webfonts/Big-Caslon-Medium.woff2") format("woff2"), /* chrome、firefox */
	url("/assets/webfonts/Big-Caslon-Medium.woff") format("woff"), /* chrome、firefox */
	url("/assets/webfonts/Big-Caslon-Medium.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url("/assets/webfonts/Big-Caslon-Medium.svg#Big Caslon Medium") format("svg"); /* iOS 4.1- */
}
@font-face {
  font-family: 'Traprenovatie-Custom-Icons';
  src:
    url('/assets/webfonts/Traprenovatie-Custom-Icons.ttf?9dtbs4') format('truetype'),
    url('/assets/webfonts/Traprenovatie-Custom-Icons.woff?9dtbs4') format('woff'),
    url('/assets/webfonts/Traprenovatie-Custom-Icons.svg?9dtbs4#Traprenovatie-Custom-Icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body { background-color: #1a1a1a; color: #ffffff; font-family: 'Acumin Pro', 'Open Sans', sans-serif; font-size: 16px; }

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Traprenovatie-Custom-Icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tv-info-i:before { content: "\e900"; }
.tv-circle { border-radius: 50%; background-color:#ffffff; color:#009ee2; padding: 5px; height: 40px; }

.right .tv-circle { background-color: #000; color: #ffffff; font-size: 1.3rem; margin-right: 15px; }
.middle .tv-circle { background-color: #009ee2; color: #ffffff;  }
.middle .active .tv-circle { background-color: #ffffff; color: #009ee2; }
h3 {font-family: 'Big Caslon', 'Open Sans';}
/* select { -webkit-appearance:caret; } */
input, select { font-family: 'Acumin Pro'; background-color:#2b2b2b; color:#ffffff; border:2px solid #5f5f5f; width:176px; font-weight: normal; text-align: center; text-transform: uppercase; line-height: 40px; height: 40px; }
input[type=text] { text-transform: none; padding-left: 15px; }
input:focus, select:focus, 
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-results__option[aria-selected=true] { background-color:#009540; border-color: #17a8e3;   }
input:focus-visible, select:focus-visible { outline: none; }

input.ui-spinner-input { line-height: 31px; height: 31px; }

.select2-container--default .select2-selection--multiple { font-family: 'Acumin Pro'; background-color:#2b2b2b; color:#ffffff; border:2px solid #5f5f5f; font-weight: normal; text-align: center; text-transform: uppercase; line-height: 40px; height: 40px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { line-height: normal; background-color: transparent; border-color:#ffffff; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #ffffff; }
.select2-dropdown { background-color:#2b2b2b; border-radius: 0; border:2px solid #ffffff; }

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #8c8c8c; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #8c8c8c; }
::-ms-input-placeholder { /* Microsoft Edge */ color: #8c8c8c; }

input:focus::placeholder{ color: #ffffff; }
input:focus:-ms-input-placeholder { color: #ffffff; }
input:focus::-ms-input-placeholder { color: #ffffff; }
/* input[type=text]::after { position: relative; display: inline-block; content:" *"; font-size: 16px;  } */

.btn { text-transform: uppercase; min-width:25%; min-height:40px; text-align: center; padding:0.7rem .75rem; line-height: 1;}
input[type=submit].btn { max-width: 25%; }
.btn-success { color: #ffffff; background-color: #009540; border-color: #009540;}
.btn-success:hover { color: #ffffff; background-color: #009540; border-color: #009540; }

.inspiration, .call-back, .advisor {
	display: none;
}

header .row { min-height: 125px;}
/* 	display: flex; align-content: center; flex-direction: row; flex-wrap: wrap;  */
main { background-color: #171717;  }

.overlay {
	background-color:#1a1a1a;
	width: 100%;
    height:100vh;
	overflow: hidden;
	text-align: center;
	position: absolute;
	top: 0;
	left:0;
    transition:height 3s;
	/* display:none; */
	z-index:2;
}
.no-webp .overlay { background-image: url('/assets/img/background_pattern.png'); }
.webp .overlay { background-image: url('/assets/img/background_pattern.webp'); }
.overlay.closed {
    height:0!important;
}
.overlay img {
	position: relative;
	top:50%;
	transform: translateY(-50%);
}
/* .overlay.closed img {
    opacity:0;
} */
.btn-bar-wrapper { position:relative; }
.btn-bar { position: absolute; top: -18px; text-align: center; width: calc(100% - (var(--bs-gutter-x) * .5)); }
/* .btn-bar div.col { position: absolute; width: 100%; } */
/* .i-info { font-family: 'Marck Script', cursive; text-transform: lowercase; font-style: normal; } */
/* .i-info::after { content:"i"; font-size: 40px;} */
/* .step { min-height: 60vh; } */
.slick-slide img { max-width: 100%; }

/**
 * STEP ONE
 */

#step-one .left { order: 0; }
#step-one .right { order: 1; background-color:#009ee2; color:#ffffff; }
#step-one .btn-bar-wrapper { order: 2; }
#step-one .right h3 { margin-bottom:3rem; }
#step-one .info { display:none; }
#step-one-info { display:none; }
#step-one-slider img { max-width: 100%; }
#step-one-slider .slick-slider,
#step-one-slider .slick-list,
#step-one-slider .slick-track,
#step-one-slider .slick-track div { min-height:inherit; }
#step-one-slider .slick-track > div:nth-of-type(odd) img { padding-right:1px; background-color: #000; }
#step-one-slider .slick-track > div:nth-of-type(even) img { padding-left:1px; background-color: #000; }
/* #step-one-slider .slick-track div:nth-of-type(1n){ background-color:#67597A; }
#step-one-slider .slick-track div:nth-of-type(2n){ background-color:#6E8894; }
#step-one-slider .slick-track div:nth-of-type(3n){ background-color:#544E61; }
#step-one-slider .slick-track div:nth-of-type(4n){ background-color:#85BAA1; }
#step-one-slider .slick-track div:nth-of-type(5n){ background-color:#CEEDDB; }
#step-one-slider .slick-track div:nth-of-type(6n){ background-color:#256A42; } */
#step-one-slider .slick-prev,
#step-one-slider .slick-next { width: 40px; height: 100px; background-color:rgba(255,255,255,0.4); }
#step-one-slider .slick-prev:before,
#step-one-slider .slick-next:before { font-family: "Font Awesome 5 Free"; color:#000000; opacity: 0.5; }
#step-one-slider .slick-prev:hover:before,
#step-one-slider .slick-next:hover:before { opacity: 1; }
#step-one-slider .slick-prev { left: 0; z-index: 1; }
#step-one-slider .slick-prev:before { content: "\f053" }
#step-one-slider .slick-next { right: 0; z-index: 1; }
#step-one-slider .slick-next:before { content: "\f054" }

/**
 * STEP TWO
 */

#step-two { display:none; }
#step-two .left { order:0; }
#step-two .right { order:1; background-color:#323232; }
#step-two .btn-bar-wrapper { order: 2; }
#step-two .right::after { clear: both; }
#step-two .options { text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; }
/* HIDE RADIO */
#step-two [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
/* IMAGE STYLES */
#step-two [type=radio] + div.placeholder { cursor: pointer; background-color: #2b2b2b; width: 250px; aspect-ratio: 1; background-size:cover; opacity: 1;  border:2px solid #5f5f5f; }
/* CHECKED STYLES */
#step-two [type=radio]:checked + div.placeholder,
#step-two [type=radio] + div.placeholder:hover { background-color: #009540; border-color:#17a8e3; }
#step-two .placeholder.one {  
	background-image: url("/assets/img/type/jaren-30_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/type/jaren-30_vierkant.webp") 1x,
		url("/assets/img/type/jaren-30_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/type/jaren-30_vierkant.webp") 1x,
		url("/assets/img/type/jaren-30_vierkant.png") 1x
	);
}
#step-two .placeholder.two {  
	background-image: url("/assets/img/type/jaren-70_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/type/jaren-70_vierkant.webp") 1x,
		url("/assets/img/type/jaren-70_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/type/jaren-70_vierkant.webp") 1x,
		url("/assets/img/type/jaren-70_vierkant.png") 1x
	);
}
#step-two .placeholder.three {  
	background-image: url("/assets/img/type/landelijk-boerderij_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/type/landelijk-boerderij_vierkant.webp") 1x,
		url("/assets/img/type/landelijk-boerderij_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/type/landelijk-boerderij_vierkant.webp") 1x,
		url("/assets/img/type/landelijk-boerderij_vierkant.png") 1x
	);
}
#step-two .placeholder.four {  
	background-image: url("/assets/img/type/nieuwbouw-rijtjes_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/type/nieuwbouw-rijtjes_vierkant.webp") 1x,
		url("/assets/img/type/nieuwbouw-rijtjes_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/type/nieuwbouw-rijtjes_vierkant.webp") 1x,
		url("/assets/img/type/nieuwbouw-rijtjes_vierkant.png") 1x
	);
}

/**
 * STEP THREE
 */

#step-three { display:none; }
#step-three .left { order:0; }
#step-three .right { order:1; background-color:#323232; color:#ffffff; }
#step-three .btn-bar-wrapper { order: 2; }
#step-three .options { text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; }
/*#step-three .options.spacer label { margin-bottom: 51px; }
#step-three .options label { margin-bottom: 25px; }
#step-three .options.spacer label:first-of-type { margin-top:24px; }*/
/* HIDE RADIO */
#step-three [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
/* IMAGE STYLES */
#step-three [type=radio] + div.placeholder { cursor: pointer; background-color: #2b2b2b; width: 250px; aspect-ratio: 1; border:2px solid #5f5f5f; font-weight: normal; background-size:cover; opacity: 1; color:#ffffff; text-transform: uppercase; line-height: 40px; }
/* CHECKED STYLES */
#step-three [type=radio]:checked + div.placeholder,
#step-three [type=radio] + div.placeholder:hover { background-color: #009540; border-color: #17a8e3; }

#step-three .placeholder.one {  
	background-image: url("/assets/img/kleur/aardetinten_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/kleur/aardetinten_vierkant.webp") 1x,
		url("/assets/img/kleur/aardetinten_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/kleur/aardetinten_vierkant.webp") 1x,
		url("/assets/img/kleur/aardetinten_vierkant.png") 1x
	);
}
#step-three .placeholder.two {  
	background-image: url("/assets/img/kleur/lichte_tinten_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/kleur/lichte_tinten_vierkant.webp") 1x,
		url("/assets/img/kleur/lichte_tinten_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/kleur/lichte_tinten_vierkant.webp") 1x,
		url("/assets/img/kleur/lichte_tinten_vierkant.png") 1x
	);
}
#step-three .placeholder.three {  
	background-image: url("/assets/img/kleur/donkere_tinten_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/kleur/donkere_tinten_vierkant.webp") 1x,
		url("/assets/img/kleur/donkere_tinten_vierkant.png") 1x
	);
	background-image: image-set(
		url("/assets/img/kleur/donkere_tinten_vierkant.webp") 1x,
		url("/assets/img/kleur/donkere_tinten_vierkant.png") 1x
	);
}
#step-three .placeholder.four {  
	background-image: url("/assets/img/kleur/combinatie_vierkant.png");
	background-image: -webkit-image-set(
		url("/assets/img/kleur/combinatie_vierkant.webp") 1x,
		url("/assets/img/kleur/combinatie_vierkant.png") 1x
	);
	background-image: url("/assets/img/kleur/combinatie_vierkant.png");
	background-image: image-set(
		url("/assets/img/kleur/combinatie_vierkant.webp") 1x,
		url("/assets/img/kleur/combinatie_vierkant.png") 1x
	);
}

.ui-widget.ui-widget-content { border:2px solid #5f5f5f; }
/* .ui-widget.ui-widget-content:active,
.ui-widget.ui-widget-content:focus { background-color: #009540; border-color: #17a8e3; } */
.ui-widget.ui-widget-content input:focus { background-color: #2b2b2b; }

/**
 * STEP FOUR
 */

#step-four  { display:none; }
#step-four .left { order: 0; }
/* #step-four .middle { order: 1; background-color:#323232; color:#ffffff; text-align: center; } */
#step-four .right { order:1; background-color:#323232; color:#ffffff; }
#step-four .btn-bar-wrapper { order: 2; }
/* #step-four h3 { margin-bottom: 3rem; } */
/* #step-four label { padding-bottom:5%; } */
/* #step-four .info-i { margin-left: 25px; vertical-align: middle; text-decoration: none; } */
/* #step-four .info-i i { font-size:25px; } */
/* #step-four .spacer { margin-left: 40px; }
#step-four .text-spacer { padding-right: 40px;} */
/* #step-four #step-four-bekleding { display: none; } */
/* #step-four #step-four-verlichting { display: none; }
#step-four #step-four-leuning { display: none; } */

#step-four .options { text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; }
/* HIDE RADIO */
#step-four [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
/* IMAGE STYLES */
#step-four [type=radio] + div.placeholder { cursor: pointer; background-color: #2b2b2b; width: 250px; aspect-ratio: 1; border:2px solid #5f5f5f; font-weight: normal; background-size:cover; opacity: 1; color:#ffffff; text-transform: uppercase; line-height: 40px; }
/* CHECKED STYLES */
#step-four [type=radio]:checked + div.placeholder,
#step-four [type=radio] + div.placeholder:hover { background-color: #009540; border-color: #17a8e3; }

#step-four .placeholder.one {  
	background-image: url("/assets/img/stijl/natuurlijk_vierkant.jpg");
	background-image: -webkit-image-set(
		url("/assets/img/stijl/natuurlijk_vierkant.webp") 1x,
		url("/assets/img/stijl/natuurlijk_vierkant.jpg") 1x
	);
	background-image: image-set(
		url("/assets/img/stijl/natuurlijk_vierkant.webp") 1x,
		url("/assets/img/stijl/natuurlijk_vierkant.jpg") 1x
	);
}
#step-four .placeholder.two {  
	background-image: url("/assets/img/stijl/stoer_vierkant.jpg");
	background-image: -webkit-image-set(
		url("/assets/img/stijl/stoer_vierkant.webp") 1x,
		url("/assets/img/stijl/stoer_vierkant.jpg") 1x
	);
	background-image: image-set(
		url("/assets/img/stijl/stoer_vierkant.webp") 1x,
		url("/assets/img/stijl/stoer_vierkant.jpg") 1x
	);
}
#step-four .placeholder.three {  
	background-image: url("/assets/img/stijl/japandi_vierkant.jpg");
	background-image: -webkit-image-set(
		url("/assets/img/stijl/japandi_vierkant.webp") 1x,
		url("/assets/img/stijl/japandi_vierkant.jpg") 1x
	);
	background-image: image-set(
		url("/assets/img/stijl/japandi_vierkant.webp") 1x,
		url("/assets/img/stijl/japandi_vierkant.jpg") 1x
	);
}
#step-four .placeholder.four {  
	background-image: url("/assets/img/stijl/design_vierkant.jpg");
	background-image: -webkit-image-set(
		url("/assets/img/stijl/design_vierkant.webp") 1x,
		url("/assets/img/stijl/design_vierkant.jpg") 1x
	);
	background-image: image-set(
		url("/assets/img/stijl/design_vierkant.webp") 1x,
		url("/assets/img/stijl/design_vierkant.jpg") 1x
	);
}


/**
 * STEP FIVE
 */



#step-five  { display:none; }
#step-five .left { order: 0; }
/* #step-four .middle { order: 1; background-color:#323232; color:#ffffff; text-align: center; } */
#step-five .right { order:1; background-color:#323232; color:#ffffff; }
#step-five .btn-bar-wrapper { order: 2; }
#step-five .options { text-align: center; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; }
/* HIDE RADIO */
#step-five [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
/* IMAGE STYLES */
#step-five [type=radio] + div.placeholder { cursor: pointer; background-color: #2b2b2b; width: 100%; width: 250px; aspect-ratio: 1; border:2px solid #5f5f5f; font-weight: normal; background-size:cover; opacity: 1; color:#ffffff; text-transform: uppercase; line-height: 40px; }
/* CHECKED STYLES */
#step-five [type=radio]:checked + div.placeholder,
#step-five [type=radio] + div.placeholder:hover { background-color: #009540; border-color: #17a8e3; }

#step-five .placeholder.one {  
	background-image: url("/assets/img/icons/magazine_icon.png");
	background-image: -webkit-image-set(
		url("/assets/img/icons/magazine_icon.webp") 1x,
		url("/assets/img/icons/magazine_icon.png") 1x
	);
	background-image: image-set(
		url("/assets/img/icons/magazine_icon.webp") 1x,
		url("/assets/img/icons/magazine_icon.png") 1x
	);
}
#step-five .placeholder.two {  
	background-image: url("/assets/img/icons/terugbelafspraak_icon.png");
	background-image: -webkit-image-set(
		url("/assets/img/icons/terugbelafspraak_icon.webp") 1x,
		url("/assets/img/icons/terugbelafspraak_icon.png") 1x
	);
	background-image: image-set(
		url("/assets/img/icons/terugbelafspraak_icon.webp") 1x,
		url("/assets/img/icons/terugbelafspraak_icon.png") 1x
	);
}
#step-five .placeholder.three {  
	background-image: url("/assets/img/icons/adviesgesprek_icon.png");
	background-image: -webkit-image-set(
		url("/assets/img/icons/adviesgesprek_icon.webp") 1x,
		url("/assets/img/icons/adviesgesprek_icon.png") 1x
	);
	background-image: image-set(
		url("/assets/img/icons/adviesgesprek_icon.webp") 1x,
		url("/assets/img/icons/adviesgesprek_icon.png") 1x
	);
}

/**
 * STEP SIX
 */

#step-six  { display:none; }
#step-six .right { background-color:#323232; color:#ffffff; }
#step-six label { display:block; }
#step-six select { padding-left: 10px; }
#step-six input, #step-six select { width:33%; text-align: left; }
#step-six input[type=submit] { text-align: center; }


footer { text-align: center; padding-top:75px; font-size: 14px; }
footer a { color:#9d9d9d; text-decoration: none; }
footer a:hover { color:#17a8e3; text-decoration: underline; }
footer .copyright { color: #ffffff;  }
footer .copyright .row { min-height:50px; }



@media only screen and (max-width:1024px) {
	#step-one .btn-bar-wrapper { order: 0; }
	#step-two .btn-bar-wrapper { order: 1; }
	#step-three .btn-bar-wrapper { order: 1; }
	#step-four .btn-bar-wrapper { order: 1; }

	/* #step-three .options { display: block; text-align: left; }
	#step-three .options label { text-align: center; }
	#step-three .options label br, #step-three .options h6 br { display: none; }
	#step-three .options label .ui-spinner { display: block; }

	#step-four .middle { display: flex; flex-wrap: wrap; flex-direction: row; }
	#step-four label { width:50%; } */

}
@media only screen and (max-width:768px){
		header a img,
		.overlay img { max-width: 90%; height: auto; }
}
@media only screen and (max-width:600px){
	.btn { width:49%; }
	#step-one .btn { width:auto; }
	#step-one .btn-bar-wrapper .btn { width:49%; }


	/*#step-two [type=radio] + div.placeholder, 
	#step-three [type=radio] + div.placeholder,
	#step-four [type=radio] + div.placeholder,*/
	[type=radio] + div.placeholder { width: 100% !important; }
	
	#step-five .col-6:first-child { width: 100%; }
	#step-five .col-6:first-child label { width: 50%; margin:0 auto; }

	#step-six input,
	#step-six select { width: 100%; }
	#step-six .submit,
	input[type=submit].btn { max-width: 49%; width: 49%; }
}