/*
LIGHTBLUE 	#2399c1
DARKBLUE 	#283761
SILVER 		#91a3b5
LIGHTGREY 	#ecf1f5
*/

@font-face { font-family:'Rubik'; src:url('../fonts/Rubik-Regular.ttf') format('woff2'); font-display: swap; }
@font-face { font-family:'Rubik'; src:url('../fonts/Rubik-SemiBold.ttf') format('woff2'); font-display: swap; font-weight:bold; }



	/* MODAL */
	.modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0); z-index:99; padding: 16px; /**/ animation:modalShow 0.2s both; -moz-animation:modalShow 0.2s both; -ms-animation:modalShow 0.2s both; -o-animation:modalShow 0.2s both; -webkit-animation:modalShow 0.2s both; }
		@keyframes modalShow{ from{ background:rgba(40, 55, 97, 0); } to{ background:rgba(40, 55, 97, 0.7); } }
	.modal .box{ background:#fff; opacity:0; padding:32px; margin:auto; position:relative; /**/ animation:modalBoxShow 0.2s both; -moz-animation:modalBoxShow 0.2s both; -ms-animation:modalBoxShow 0.2s both; -o-animation:modalBoxShow 0.2s both; -webkit-animation:modalBoxShow 0.2s both; }
		@keyframes modalBoxShow{ from{ opacity:0; margin-top:40px; } to{ opacity:1; margin-top:0px;  } }
		
	.modal.hide{ /**/ animation:modalHide 0.2s both; -moz-animation:modalHide 0.2s both; -ms-animation:modalHide 0.2s both; -o-animation:modalHide 0.2s both; -webkit-animation:modalHide 0.2s both; }	
		@keyframes modalHide{ from{ background:rgba(40, 55, 97, 0.7); } to{ background:rgba(40, 55, 97, 0); } }
	.modal.hide .box{ /**/ animation:modalHideShow 0.2s both; -moz-animation:modalHideShow 0.2s both; -ms-animation:modalHideShow 0.2s both; -o-animation:modalHideShow 0.2s both; -webkit-animation:modalHideShow 0.2s both; }
		@keyframes modalHideShow{ from{ opacity:1; margin-top:0px; } to{ opacity:0; margin-top:40px; } }
	.modal .close { background:#283761; width:31px; height:31px; position:absolute; right:-8px; top:-8px; border-radius:100%; border:3px solid #fff; cursor:pointer; transform:rotate(45deg); } 
		.modal .close::after { content:""; background:#fff; width:3px; height:15px; position:absolute; top:5px; left:11px; } 
		.modal .close::before { content:""; background:#fff; width:15px; height:3px; position:absolute; top:11px; left:5px; }


			/* FIRST:CHOOSE SECTOR */
			.wizard .content .question#first li{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:8px; }
			.wizard .content .question#first li:nth-child(odd){ width:50%; float:left; }
			.wizard .content .question#first li:nth-child(even){ width:50%; float:right; }				
			/* 1:PRODUCTIE */
			.wizard .content .question[data-s="1"][data-q="1"] ul{ width:50%; float:left; }
			.wizard .content .question[data-s="1"][data-q="1"] li{ white-space:nowrap; }
			.wizard .content .question[data-s="1"][data-q="1"] .explanation{ display:inline-block; margin:-8px 0 0 4px; width:180px; vertical-align:top; }
			.wizard .content .question[data-s="1"][data-q="3"] .explanation{ display:inline-block; margin-left:4px; margin-top:-8px; vertical-align:top; }
			/* 5:LOGISTIEK */
			.wizard .content .question[data-s="5"][data-q="2"] span.bracket{ display:block; clear:both; font-size:13px; }	
			/* 8:BOUW */
			.wizard .content .question[data-s="8"][data-q="1"] li{ white-space:nowrap; padding-right:7px; text-overflow:ellipsis; overflow:hidden; }
			/* 10:INSTALLATIE */
			.wizard .content .question[data-s="10"][data-q="2"] li{ clear:both; }
			/* 12:OVERIG */
			.wizard .content .question[data-s="12"][data-q="1"] textarea{ width:100%; height:210px; padding:8px; }	
						
			/* LAST:LOADER */
			.wizard .content .question.last.loading{ text-align:center; min-height:300px; }
			.wizard .content .question.last.loading .t{ position:absolute; top:24px; left:0; }
				.loader{ border-radius:100%; width:80px; height:80px; margin:0 auto 16px auto; position:relative; overflow:hidden; }
				.loader .loaderCircle{ width:80px; height:80px; transform:rotate(0deg); /**/ transition:transform 2s; -moz-transition:transform 2s; -ms-transition:transform 2s; -o-transition:transform 2s; -webkit-transition:transform 2s; }
				.loader .loaderCircle.done{ /**/ animation:none !important; -moz-animation:none !important; -ms-animation:none !important; -o-animation:none !important; -webkit-animation:none !important; }
				.loader .inner{ color:#FFD15D; box-shadow:inset 0 0 0 8px; width:78px; height:78px; position:absolute; border-radius:100%; top:1px; left:1px; z-index:2;  }
				.loader .half{ position:absolute; height:80px; width:40px; top:0; overflow:hidden; }
				.loader .half div{ border:8px solid #ecf0f1; width:100%; height:100%; }
					.loader .half:nth-of-type(1){ z-index:4; left:0; transform-origin:40px 40px; transform:rotate(0deg); /**/ transition:transform 1.7s; -moz-transition:transform 1.7s; -ms-transition:transform 1.7s; -o-transition:transform 1.7s; -webkit-transition:transform 1.7s; }
					.loader .half:nth-of-type(1) div{ background:#fff; transform-origin:40px 40px; border-right:0; border-bottom-left-radius:80px; border-top-left-radius:80px; }
					.loader .half:nth-of-type(2){ z-index:3; right:0; transform-origin:0; transform:rotate(0deg); /**/ transition:transform 1.7s 0.3s; -moz-transition:transform 1.7s 0.3s; -ms-transition:transform 1.7s 0.3s; -o-transition:transform 1.7s 0.3s; -webkit-transition:transform 1.7s 0.3s; }
					.loader .half:nth-of-type(2) div{ background:#fff; transform-origin:0; border-left:0; border-bottom-right-radius:80px; border-top-right-radius:80px; }
						.loader .half.done{ animation:none !important; }
						.loader .half.done:nth-of-type(1) div{ animation:rotateHalf 0.5s linear both; -moz-animation:rotateHalf 0.5s linear both; -ms-animation:rotateHalf 0.5s linear both; -o-animation:rotateHalf 0.5s linear both; -webkit-animation:rotateHalf 0.5s linear both; }
						.loader .half.done:nth-of-type(2) div{ animation:rotateHalf 0.5s linear 0.5s both; -moz-animation:rotateHalf 0.5s linear 0.5s both; -ms-animation:rotateHalf 0.5s linear 0.5s both; -o-animation:rotateHalf 0.5s linear 0.5s both; -webkit-animation:rotateHalf 0.5s linear 0.5s both; }
							.loader .check{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); width:40px; height:40px; margin-left:6px; }
							.loader .check::after, .loader .check::before{ content:""; position:absolute; background:#FFD15D; }			
							.loader .check::before{ width:8px; height:0px; top:2px; left:0; }
							.loader .check::after{ width:0px; height:8px; top:16px; left:0; /**/ transition-delay:.2s; }
								.loader.done .check::after, .loader.done .check::before{ /**/ transition:all 0.2s ease; -moz-transition:all 0.2s ease; -ms-transition:all 0.2s ease; -o-transition:all 0.2s ease; -webkit-transition:all 0.2s ease; }
								.loader.done .check::before{ height:22px; }
								.loader.done .check::after{ width:36px; }
			
			@keyframes loader{ 0%{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
			@keyframes rotateHalf{ 0%{ transform:rotate(0deg); } to{ transform:rotate(180deg); } }
			
			/* LAST:FORM */	
			.wizard .content .question.last input[type="text"]{ width:100%; }
			.wizard .content .question.last .title{ margin-top:16px; }
			.wizard .content .question.last ul{ width:100%; }
			.wizard .content .question.last li{ width:calc(50% - 8px); float:left; }
			.wizard .content .question.last li:nth-child(even){ float:right; }	
			.wizard .content .question.last #firstname{ width:calc(50% - 8px); display:block; float:left; }
			.wizard .content .question.last #lastname{ width:calc(50% - 8px); display:block; float:right; margin-left:0; }	
			
			.wizard .content .question.last h2{ }
			.wizard .content .question.last .info{ text-align:center; height:calc(100% - 40px); padding:0 24px 8px 24px; background:#ddf3e7; color:#2c975e; position:absolute; right:40px; top:40px; margin-top:0; }
			.wizard .content .question.last .info strong{ font-size:16px; }	
			.wizard .content .question.last .info .finalCheck{ height:64px; width:64px; border:6px solid #2c975e; border-radius:100%; margin:auto; margin-bottom:8px; transform:rotate(-45deg); }
			.wizard .content .question.last .info .finalCheck div::before{ content:""; display:block; background:#2c975e; width:8px; height:19px; top:14px; left:13px; position:relative; }
			.wizard .content .question.last .info .finalCheck div::after{ content:""; display:block; background:#2c975e; height:8px; width:30px; position:relative; top:6px; left:13px; }				

		.modal.skip .box{ max-width:448px; }
		.modal.skip strong{ margin-bottom:8px; display:block; font-size:18px; }
		.modal.skip .box .but{ color:#91a3b5; display:inline-block; font-weight:bold; text-transform:uppercase; }
		.modal.skip .box .but.skip{ color:#2399c1; margin-left:20px; }
			.modal.skip .box .but.skip .fa{ position:relative; margin-left:6px; top:1px; font-size:18px;  }
				

		
/* BEDANKT */
.home.bedankt{  }
.home.bedankt .usp{ margin-top:0; }	
.home.bedankt header .t{ position:absolute; top:0; left:0; text-align:center; z-index:1; }	
.home.bedankt header h1, .home.bedankt header h2 { color:#fff; text-shadow:0 0 20px #283761; }
.home.bedankt header h1{ font-size:48px; line-height:1.2; margin-bottom:8px; }
.home.bedankt header h2{ font-size:24px; }		
		
/* COOKIE NOTIFICATION */
.cookie{ text-align:center; background:#2399c1; font-size:12px; line-height:18px; padding:6px 0 8px 0; position:relative; z-index:1; transition:margin 200ms, opacity 200ms; }
.cookie.hide{ opacity:0; }
.cookie, .cookie a{ color:#fff; }
.cookie a{ }
.cookie a span{ text-decoration:underline; }
.cookie .closeWrap{ height:100%; position:absolute; top:0; right:24px; width:26px; cursor:pointer; z-index:1; }
.cookie .close{ cursor:pointer; position:absolute; right:24px; top:45%; left:0; height:16px; width:16px; transform-origin:center center; transform:rotate(45deg) translateY(-50%); }
.cookie .close::after, .cookie .close::before{ content:""; background-color:#fff; position:absolute; }
.cookie .close::before{ height:2px; width:16px; top:7px; left:0; }
.cookie .close::after{ height:16px; width:2px; top:0; left:7px; }	

/* GDPR LABEL */
.gdprLabel{ position:absolute; right:24px; bottom:24px; background:#f2f6fa; height:52px; width:181px; border-radius:4px; overflow:hidden; z-index:2;  /* width:58px; transition:width 0.3s; -webkit-transition:width 0.3s; -moz-transition:width 0.3s; -ms-transition:width 0.3s; -o-transition:width 0.3s; */ }
.gdprLabel img{ width:58px; height:52px; position:absolute; top:0; left:0; }
.gdprLabel .gdprText{ position:absolute; right:0; top:0; white-space:nowrap; display:table; height:100%; font-weight:bold; line-height:18px; padding-top:1px; }
.gdprLabel .gdprText > div{ display:table-cell; vertical-align:middle; padding-right:10px; }
.gdprLabel .gdprTitle{ font-size:14px; }
.gdprLabel .gdprLink a{ font-size:12px; text-decoration:none; color:#11aceb; }
			


/* modal */
.modal_page{ display:none; position:fixed; padding:0 24px; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(20,28,47,.8); overflow:hidden; }
.modal_page.show{ display:block !important; animation:show_modal .4s both; }
.modal_page.hide{ display:block !important; animation:hide_modal .4s both; }
@keyframes show_modal { 0%{ opacity:0; padding-top:80px; } 100%{ opacity:1; padding-top:0; } }
@keyframes hide_modal { 0%{ opacity:1; padding-top:0; } 100%{ opacity:0; padding:80px; } }
.modal_page .close_modal{ font-family:'Font Awesome 6 Pro'; font-weight:bold; font-size:40px; position:absolute; top:40px; right:40px; line-height:1; cursor:pointer; color:#fff; }
.modal_page .close_modal::before{ content:'\f00d'; }
.modal_page .scroll{ max-width:762px; margin:auto; overflow-y:scroll; height:100vh; display: grid ; align-items: center; margin-top:24px; }
.modal_page .content{ background:#fff; color:#4A5162; padding:72px 80px; }
.modal_page ul{ margin-bottom:1em; padding-left:18px; }
.modal_page ul li{ list-style-type: disc; }
.modal_page h1{ font-size:40px; margin: 0 0 1rem 0; }
.modal_page h2{ font-size:24px; margin: 3rem 0 1rem 0; }
.modal_page h3{ font-size:15px; }
.modal_page * + h3{ margin-top:1em; }
.modal_page h4{ font-size:16px; }
.modal_page a{ color:#64A9A1; font-weight:bold; }
.modal_page .image{ height:326px; position:relative; margin:48px 0 48px -80px; width:calc(100% + 160px); }
.modal_page .image img{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%; object-fit:cover; }
.modal_page table td:first-child{ padding-right:24px; }


@media (max-width:1500px) {
}

@media (max-width:1241px) {
	/* TWEAKS */
	.wizard .content .question[data-s="1"][data-q="1"] ul{ width:40%; }
	.wizard .content .question[data-s="1"][data-q="1"] ul + ul{ width:60%; }
	.wizard .content .question[data-s="5"][data-q="2"] li span.bracket{ max-width:calc(100% - 96px); }
	.wizard .content .question[data-s="12"][data-q="3"] input[name='12_3_10']{ margin-bottom:0; }
}

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

@media (max-width:1100px) {
}

@media (max-width:1024px) {
	/* TWEAKS */
	.wizard .content .question#first li:nth-child(odd) { width:44%; }
	.wizard .content .question#first li:nth-child(even) { width:56%; }
	.wizard .content .question[data-s="1"][data-q="1"] .explanation{ margin:8px 0 0 0; }
	.wizard .content .question[data-s="1"][data-q="1"] li{ white-space:normal; }
}

@media (max-width:1000px) {
	.modal_page .content{ padding:56px 40px; }
	.modal_page .close_modal{ background:#64A9A1; padding:8px; border-radius:100%; width:56px; height:56px; top:0; right:0; text-align:center; transform:scale(0.6); }
}


@media (max-width:900px) {

}

@media (max-width:800px) {
	
	
	.wizard .content .question.last .info .finalCheck{ transform: rotate(-45deg) scale(0.7); margin-bottom:0; }
	.wizard .content .question.last .info { position: static; font-size: 14px; height: auto; margin-top: 16px; padding:16px 32px 16px 32px; }
	.wizard .content .question.last .info.show strong{ margin-bottom:0; }
	.wizard .content .question.last .info strong{ color:inherit; }
	.wizard .content .question.last .info strong::before{ display:none; }	
}


@media (max-width:720px) {

}

@media (max-width:600px) {

}

@media (max-width:500px) {
}



@media (max-width:485px) {
	
	
	
	/* TWEAKS */
	.wizard .content .question[data-s="1"][data-q="1"] ul{ width:100% }
	.wizard .content .question[data-s="1"][data-q="1"] ul + ul{ width:100% }
	.wizard .content .question[data-s="1"][data-q="3"] .explanation{ display:block; margin:8px 0 0 0; }
	.wizard .content .question[data-s="5"][data-q="2"] li span.bracket { max-width:100%; }

}