/*#9bc9dd;*/
@font-face {
	font-family: "reg";
	src: url("./fonts/DINWeb-Cond.eot");
	src: url("./fonts/DINWeb-Cond.eot?#iefix") format("embedded-opentype"),
	url("./fonts/DINWeb-Cond.woff") format("woff"),
	url("./fonts/DINWeb-Cond.ttf") format("truetype"),
	url("./fonts/DINWeb-Cond.svg#regular") format("svg");
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: "reg";
	src: url("./fonts/DINWeb-CondBold.eot");
	src: url("./fonts/DINWeb-CondBold.eot?#iefix") format("embedded-opentype"),
	url("./fonts/DINWeb-CondBold.woff") format("woff"),
	url("./fonts/DINWeb-CondBold.ttf") format("truetype"),
	url("./fonts/DINWeb-CondBold.svg#regular") format("svg");
	font-weight: bold;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*{
	font-family: "reg",sans-serif;
	color:#333;
}
html{overflow-x: hidden;}
body{background-color:#9bc9dd;
}
#header{
	background-image:url('img/header.jpg');
	background-size: cover;
	background-position: center center;
	background-origin: top center !important;

	height:80vh;
	max-height:700px;
	display:flex;
	justify-content: center;
}
b, strong{
	font-weight:700 !important;
}
#footer{
	display:flex;
	justify-content: center;
background-color:rgba(0,0,0,0.4);
position:relative;
}
.homefooter:before {
    content:"";
    display:block;
    position:absolute;
		background-image:url('img/achtergrond.jpg');
		height:100%;
		width:100%;
		z-index:-1;
		background-position: center;
		background-size: cover;
		background-attachment: fixed;
}

.boxed{
max-width:1200px;
width:100%;
position:relative;
display:flex;
flex-wrap: wrap;
justify-content: center;
}
#header .boxed,#footer .boxed{
	justify-content: flex-start;
}
#logoContainer{
	width:200px;
	margin:20px;
}

#logoContainer img{
	width:100%;
}
.testcontainer, .uitslagcontainer{
	width:800px;
	justify-content: center;
	background-color:#fff;
	margin:20px;
	padding:10px;
	border:10px solid #333;
	max-width:95%;
}
.gegevens{
margin:20px;}
.navigatieContainer{
	margin: 20px;
	    margin-left: -20px;
	    flex: 1;
	    justify-content: flex-end;
	    display: flex;

}
#footer .navigatieContainer{
	flex:none;
	display:block;
}
#copyright{
	flex:1;
	text-align:center;
	display:flex;
justify-content: flex-end;
	flex-direction: column;
	padding:20px;
	color:#fff;
	letter-spacing: 2px;
	font-size:20px;

}
.subheader{
	height:550px !important;
	  }
	  .subheader_klein{
	height:180px !important;
	  }
#headeruitleg{
	display:flex;
	width:680px;
	padding:0px 20px;
	background-color:rgba(255,255,255,0.8);
	margin:20px auto;
	justify-content: center;

    padding-bottom: 15px;
    flex-basis: 100%;
max-width:680px;

}
#uitlegtitel{
	flex:2;
	align-self: center;

}
#uitlegtitel h1{
	text-align:right !important;

}
#uitlegcarousel{
	flex:3;
width:100%;
align-self: center;
}
.overlay{
	display:none;
}
.okknop{
	display:none;
}
.prev, .next{
	padding:0px 5px;
	font-size:16px;
	cursor:pointer;

}
@media (max-width: 700px) {
	.subheader{
		height:140px !important;
	}
	.okknop{
		position: absolute;
right: 30px;
bottom: -20px;
display: block;
background-color: #9bc9dd;
color: #fff;
padding: 10px 40px;
font-size: 20px;
cursor: pointer;
z-index: 1000;
/* border-radius: 5px; */
border: 2px solid #fff;
	}
	.overlay{
		position:fixed;
		z-index:998;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.7);
		display:block;
		left:0px;
		top:0px;
	}
#headeruitleg{
	position: fixed;
flex-direction: column;
height: 400px;
width: 90vw;
margin: -225px -45vw;
left:50%;
top:50%;
z-index:999;
border-radius:5px;
background:none;




}
.prev, .next{
	font-size:24px;
	padding:5px 10px;
	margin-bottom:10px;
}
.prev span{
	padding-top:2px !important;
}
#uitlegtitel{
	flex:none;
	display:none;
}
#uitlegtitel h1{
	text-align: center !important;
font-size: 30px;
margin: 20px 0px;

}
#headeruitleg p{
	font-size:13px;
	line-height: 16px;
}

}
@media (max-width: 460px) {
	
	#uitlegtitel h1{
	font-size: 20px;
	}
	.activecard ol li .card h2{
		font-size:20px !important;
	}
}

.navigatieKnop{
	display:block;
	position:relative;
	font-weight:bold;
	font-size:18px;
	letter-spacing: 4px;
	margin-left:20px;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.8), 0px 0px 20px rgba(255,255,255,1);
	text-align:right;
	color:#333;
	text-decoration: none;
	cursor:pointer;
	height:20px;
}
.navigatieKnop:hover{
	color:#9bc9dd !important;
	text-decoration: none;
}

#footer .navigatieKnop{
	color:#fff;
	text-shadow: none;

}
#headerquote{
	font-weight:bold;
	text-transform: uppercase;
	font-size:30px;
	text-align: center;
	width:100%;
	max-width:320px;
	position: absolute;
	bottom:0px;
	padding:15px;
	margin:20px;
	margin-left:-15px;
	text-shadow: 2px 2px 0px rgba(255,255,255,0.8), 0px 0px 20px rgba(255,255,255,1);
	left:0px;

}
#sessies{
	display:flex;
	justify-content: center;
	background-image:url('img/achtergrond.jpg');
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
#waarom,#uitleg,#detest,#watis,#deuitslag{
	display:flex;
	justify-content: center;
	background-color:#fff;
}
#detest{
	background-color:#9bc9dd;
	background-image:url('img/achtergrond.jpg');
	background-size:cover;
	position:relative;
}
#detest::after{
	  box-shadow: 0px 14px 15px rgba(0,0,0,0.5) !important;
			margin-bottom:20px;
display:block;
position:absolute;
width:100vw;
height:20px;
top:-20px;
content:'';

}

#deuitslag{
	background-color:#9bc9dd;
	background-image:url('img/achtergrond.jpg');
	background-size:cover;
	position:relative;
}
#deuitslag::after{
	  box-shadow: 0px 14px 15px rgba(0,0,0,0.5) !important;
			margin-bottom:20px;
display:block;
position:absolute;
width:100vw;
height:20px;
top:-20px;
content:'';

}
.dnacontainer{
	position:relative;
	max-width:95vw;
	overflow:visible;
	text-align: center;

}
.dna{
	display:inline-block;
		background-image:url('img/grid.png');
	background-size:cover;
	height:60px;
	width:620px;
}


#watis{
	background-color:#333;
}
h1, h2{
	text-transform: uppercase;
	font-weight:bold;
	width:100%;
}
h1{
	margin:40px 0px;
	font-size:68px;
	letter-spacing: 2px;
	text-align: center;

}
h2{
	margin-bottom:20px;
}
#watis h1{
	color:#9bc9dd;
}
#waarom h1{
	color:#333;
}
.cardcontainer{
	width:100%;
	display: flex;
}
.card, .card p{
	color:#fff;
}
#waarom .card, #waarom .card p{
	color:#333;
	text-align: center;
}
.carouselbox {
  position: relative;
  overflow: hidden;
  opacity:0;
}
.content {
  margin: 0;
  padding: 0;
	position:relative;
}
.content li {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
	transition: 0.8s;

}
.activecard {
  height: 360px;

}
.activecard li {
  position: absolute;
  left: -600px;
	opacity: 0;
	height:360px;

}
.activecard li.current {
   left:0px;
	opacity: 1;
}
.buttons {
  padding: 5px 0;
  text-align: center;
  z-index: 10;
  position: relative;
	margin-top:-60px;
	width:100%;
}
.buttons div {
  border: none;
  display: none;
}
.buttons div {
  display: inline-block;
	background: none;
}
.offscreen {
  position: absolute;
  left: -2000px;
}

#headeruitleg .card{
	background-color:#fff;
	padding:0px 20px;
	border-radius:10px;
	margin:10px;
	box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
	height:340px;
}
#headeruitleg .card, #headeruitleg .card p{
	color:#333;
	text-align: center;
	padding-bottom:20px;
	padding-top:5px;
}

#sessies .card{
	background-color: #fff;
	flex:1;
	padding:20px;
	color:#333;

}
 #sessies .card p{
	 color:#333;
padding-bottom:20px;
}
.quotecontainer{
	flex:2;
	display:flex;
	flex-direction: column;
	margin-bottom:40px;
}
.quote:before {
   content: " ";
   border-left:6px solid #fff;
   border-top:6px solid #fff;
   border-bottom:6px solid #fff;
   margin-left:-30px;
  padding:10px 5px 70px 5px;
	position:absolute;
	top:-10px;

}
.quote:after
{
  content:" ";
  padding:10px 5px 70px 5px;
  border-right:6px solid #fff;
  border-top:6px solid #fff;
  border-bottom:6px solid #fff;
  margin-left:80px;
	position:absolute;
	top:-10px;

}


.quote{
	flex:1;
	font-style: italic;
	font-size:24px;
	text-align: center;
	margin:20px;
	margin-left:100px;
	color:#fff;
	position:relative;
	line-height:32px;
	padding-top:0px;
}
.quote:nth-child(odd){
	margin-right:100px;
	margin-left:20px;
}
.card img{
	width:128px;
	max-width:80%;
display: block;
margin:20px auto;
background-color:#9bc9dd;
border-radius: 50%;
padding:20px;
}
#headeruitleg .card img{
	width:80px;
	padding:5px;
}
.card{
	flex:1;
	margin:30px;
	margin-top:0px;
}
p,u{
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	line-height:24px;
	font-size:15px;
}
.ctacontainer{
	display:flex;
	justify-content: center;
	margin:40px;
	width:100%;
	text-align:center;
}
.ctacontainer div{
	color:#9bc9dd;
	letter-spacing: 3px;
font-size:18px;
font-weight: bold;
line-height:40px;
text-align: center;
}
.knop{
	text-decoration: none;
	display:flex;
	clear:both;
	padding:10px 40px;
	text-transform: uppercase;
	color:#fff;
	background-color:#333;
	font-size:30px;
	letter-spacing: 2px;
	font-weight: normal;
	line-height:42px;
	text-align: center;
	justify-content: center;
	cursor:pointer;
}
.knop:hover{
	color:#fff;
	text-decoration: none;
	opacity:0.8;
}
.ctacontainer .knop{
	background-color:#9bc9dd;
}

.btn, div{
	outline: none !important;
}
.vraag{
	display:flex;
	padding-bottom:15px;
	padding-top:5px;
	box-sizing: border-box;
	flex-wrap:wrap;
position:relative;

}
.vraag:nth-child(odd){
	background-color:rgba(0,0,0,0.0);
}
.vraaglinksinhoud{
	flex:1;
text-align:right;
padding-right: 10px;
font-family: 'Open Sans', sans-serif;


}
.btn{font-family: 'Open Sans', sans-serif;
}
.vraagrechtsinhoud{
	flex:1;
text-align:left;
font-family: 'Open Sans', sans-serif;

}
.vraaglinks{
	order: -1;
	flex:1;
align-items: center;
line-height: 14px;
display: flex;
}
.vraagrechts{
	order: 1;
	flex:1;
	align-items: center;
	line-height: 14px;
	display: flex;

}
.vraagantwoorden{
	text-align:center;
	padding-top:5px;
}

.gegevens{
	width:800px;
	max-width:800px;
	display:flex;
	align-items:flex-start;

}
.verstuuruitleg{
	flex:1;
	margin:20px;
	background-color:#fff;
	padding:30px;
	font-size:14px;
	font-family: 'Open Sans', sans-serif;
	color:#333;
}
.verstuuruitleg ol{
	padding:15px;
		


}
.verstuuruitleg ol li{
	font-family: 'Open Sans', sans-serif;
			color:#333;
}
.gegevensformulier{
	flex:1;
	margin:20px;
	margin-top:-12px;
	width:100%;
}

input[type=text],input[type=email],input[type=date],textarea{
	font-family: 'Open Sans', sans-serif !important;
	border-radius: 0px !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
	padding:10px !important;
	margin-bottom:10px !important;
	border:0px !important;
	
}
.donker input[type=text],.donker input[type=email],.donker input[type=date],textarea{
	color:#fff !important;
	background-color:#444 !important;
	}
textarea{
	min-height:100px !important;
}
.gegevensformulier label{
	font-size:20px;
	letter-spacing: 2px;
	color:#fff;
	text-transform: uppercase;
}
.donker label {
    color: #222;
}
.gegevensformulier .knop{
    font-size: 21px;
    line-height: 21px;
    padding: 15px 10px;
    margin-top: 20px;
    width: 100%;
    background-color: #9bc9dd;
    border: 2px solid #fff;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.7);
    margin-bottom:20px;
}
.donker .knop {
border:0px;
box-shadow: none;}
@media (max-width: 850px) {
	.testknop{margin-top: 5px;
    width: 120px;
    align-self: flex-end;}
	#header{
		height:400px;
		}
		.navigatieContainer{
			flex-direction: column;
			justify-content: flex-start;
		}

		#headerquote{
			font-size:20px;
			background-color:rgba(255,255,255,0.5);
			width:300px;
			margin-left:10px;
			text-shadow: none;
			right:10px;
			left:auto;
		}
		#waarom .cardcontainer{
			flex-direction: column;
		}
		.cardcontainer{
			flex-direction: column;
		}
		#footer{
			flex-direction: column;
		}


@media (max-width:700px) {
	.navigatieKnop:nth-child(6){
position:absolute;
bottom:0px;
left:0px;	
}
.navigatieKnop:nth-child(7){
position:absolute;
bottom:10px;
left:30px;	
}
	.dna{
transform:scale(0.75);
transform-origin: 0 0;
}
.dnacontainer{
	max-width:465px;
	margin:0px auto;
}
}
}
@media (max-width:480px){
	.dna{
transform:scale(0.5);
transform-origin: 0 0;
}
.dnacontainer{
	max-width:310px;
	margin:0px auto;
}

}
@media (max-width: 650px) {
	
	.vraag{border-bottom: 1px solid #eee;
}
	.gegevens{
		flex-direction:column;
	}
	.gegevensformulier{
		order:-1;
		margin:0px auto;
	}
	.flexcontainer .gegevensformulier{
		order:1;
	}
	.testcontainer, .uitslagcontainer{

		padding:2px;
		border:4px solid #333;
	}

	#copyright{
		order:2;
width:100%;
display:block;
flex:none;
	}
	.navigatieContainer{
/*position:absolute;*/
right:0px;	}
	#header{
		height:400px;
		}
		#logoContainer{
			width:150px;
		}
#headerquote{
	padding:10px;
	margin:10px;
	width:200px;
	font-size:18px;
}

.ctacontainer div{
	font-size: 14px;
}
.knop{
	font-size:24px;
	cursor:pointer;

}
.quote{
	font-size:20px;
	margin-left:40px;
}


	.vraagrechts{
		order: 0;
		text-align:right;
		padding-left:10px;

	}
	.vraaglinks{
		padding-right:10px;
		text-align:left;
		 margin-right:-1px;
	}
	.vraagantwoorden{
		flex:100%;
	}
}


#lijn{
	position:absolute;
	margin-left:-5px;
}
#lijn path {
	fill: none;
	/*stroke: #cddde2;*/
	stroke: #ff008d;
	stroke-width:10px;
	stroke-linecap:round;
}
#lijn1 path {
	fill: none;
	/*stroke: #cddde2;*/
	stroke: #ff008d;
	stroke-width:2px;
	stroke-linecap:round;
}
#lijn1 #path2 {
	fill: none;
	/*stroke: #cddde2;*/
	stroke: #bd008c;
	stroke-width:2px;
	stroke-linecap:round;
}

.antwoordknoppen {
    border-radius: 50% !important;
    margin: 0px 10px;
		opacity:0.8;
}
.btn{
	border:0px;
}
.btn-info.active{
	background-color:#2e5069;
}
.btn-info.active.focus{
	background-color:#2e5069;
}
.btn-info{
	background-color:rgba(49,176,213,0.2);
}

.flexcontainer{
	width:100%;
	display:flex !important;
	margin:10px;
}

.half{
	margin:10px;
	flex:1;
max-width:95%;	

}
@media (max-width: 650px) {
	.flexcontainer{
		flex-direction:column !important;
	}
}

.uitslagcontainer .cardcontainer{
}
.uitslagcontainer .cardcontainer *{
	color:#000 !important;
	    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    font-size:14px;
    
}
.uitslagcontainer .cardcontainer .card{
	margin: 5px;
    background-color: #9bc9dd;
    padding: 10px 10px;
    position:relative;
    box-sizing: border-box;
    }
.uitslagcontainer .cardcontainer .card h2{
	font-family: "reg";
	font-weight: bold;
	margin:0px;
	font-size:40px;
	color:#fff !important;
	background-color:#222;
	padding:10px;
	margin:-10px;
	margin-bottom:10px;
	text-align:center;
	box-sizing: content-box;
	
	}
	
	
	
	
	
	
	#feedback{
	background-color:#9bc9dd;
	width:160px;
	height:310px;
	position:fixed;
	bottom:0;
	left:60px;
	margin-bottom:-270px;
	z-index:10000;
}

#feedback .section{
	border-bottom:none;
	padding:5px 10px 10px;
}

#feedback .color{

}

#feedback h6{
	   
    margin: 0px;
    /* text-indent: -99999px; */
    cursor: pointer;
    font-size: 30px;
    text-transform: uppercase;
    font-family: 'reg';
    font-weight: bold;
    color: #fff;
    text-align:center;}

#feedback textarea{
	background-color:#fff;
	border:none;
	color:#444;
	font-family: 'Open Sans', sans-serif;
	height:100px;
	padding:10px;
	width:140px;
	resize:none;
	outline:none;
	overflow:auto;
	

}

#feedback a.submit{
	border:none;
	display:block;
font-size:18px;
font-weight:bold;
	text-decoration:none;
background-color:#222;
color:#fff;
text-align: center;
padding:10px;	
}

#feedback a.submit:hover{
}

#feedback a.submit.working{

}

#feedback .message{
	font-family: 'Open Sans', sans-serif;
	color:#fff;
	margin-bottom:20px;
	    font-size: 12px;
    line-height: 14px;
}

#feedback .arrow{
	
}

#feedback .response{
	font-size:21px;
	margin-top:70px;
	text-align:center;
	color:#FCFCFC;
	display:block;
}

@media (min-width:760px) {
	.navigatieKnop:nth-child(7){
display:none !important; 
}
	}
.testknop{
	    background-color: #9bc9dd;
    padding-bottom: 10px;
    height: 28px !important;
    padding: 0px 10px;
    border: 1px solid #fff;
    box-sizing: content-box;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
    text-shadow: none;
}

@media (max-width: 340px){
#logoContainer {
width: 114px;
}
.navigatieKnop{
word-break: break-all;
letter-spacing: 3px;
}
}