landing{
	float:left;
	width:100%;
	margin-top:80px;
	position:relative;
}


landing left{
	width:50%;
	float:left;
	padding:5%;
	box-sizing:border-box;
	background-color:#f9f9f9;
	height:80vh;
}

landing left h1{
	font-size:40px;
	margin:0;
	padding:0;
	color:#777777;
	width:100%;
}

.cta{
	float:left;
	padding:2%;
	background-color:#36A9E1;
	color:white;
	margin-top:5%;
	cursor:pointer;
	border-radius:1vh;
	transition:0.2s ease-in-out;
}

.cta:hover{
	box-shadow: 0 3px 6px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.20);
	transition:0.2s ease-in-out;
	transform:translatey(-1%);
	background-color:#49c2fc;
}

landing left img{
	width:40%;
	height:auto;
	float:left;
	margin-right:70%;
	margin-bottom:2.5vh;
	border-bottom:4px solid #36A9E1;
	padding-bottom:2.5vh;
}




landing right{
	width:50%;
	float:left;
	background-image: url("../img/Foto_meisje.jpg");
  height: 80vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

landing .chevron{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	text-align:center;
	font-size:80px;
	color:#36A9E1;
	padding:2.5%;
	box-sizing:border-box;
	transition:0.35s ease-in-out;
	cursor:pointer;
}

landing .chevron:hover{
	font-size:90px;
	transition:0.35s ease-in-out;
}

landing #keurmerk{
	position:absolute;
	right:5%;
	bottom:15%;
	width:10%;
	height:auto;
	padding:1vh;
	background-color:#f1f1f1;
	border-radius:100000000px;
	transform:rotate(15deg)
}

@media only screen and (max-width: 1100px) {
	
	landing{
		margin-top:60px;
		background:url('../img/Foto_meisje.jpg');
		background-size:cover;
	}
	
	landing left h1{
		font-size:30px;
		margin-bottom:5vh;
		
	}
	landing left{
		width:100%;
		height:80vh;
		background-color: rgba(250, 250, 250, 0.8);
	}
	
.cta{
	margin-top:15%;
		font-size:20px;
		padding:4%;
	}
	
	landing .chevron{
		font-size:50px;
		margin-bottom:15%;
		padding:0;
		display:none;
	}
	
	landing .chevron:hover{
	display:none;
}
	
	landing right{
	display:none;
	}
	
	landing left img{
	width:30%;
	height:auto;
	float:left;
	margin-right:70%;
	margin-bottom:2.5vh;
	border-bottom:4px solid #36A9E1;
	padding-bottom:2.5vh;
}
	landing left #keurmerk{
		display:none;
	}
}
	
	




second{
	float:left;
	width:100%;
	padding-bottom:5%;
}
cursus{
	width:915px;
	margin:0 auto;
	display:block;
	padding-top:5%;
	box-sizing:border-box;
}

cursus h1{
	font-size:30px;
	font-weight:300;
	margin:0;
	padding:0;
	color:#555555;
	width:100%;
	margin-bottom:2.5%;
	float:left;
}

cursus line{
	float:left;
	width:100%;
	margin-top:1.5%;
	color:#999999;
}

cursus line i{
	color:#36A9E1;
	font-size:40px;
	float:left;
	width:45px;
	text-align:center;
}

cursus line a{
	color:#999999;
	font-size:20px;
	float:left;
	margin:6px;
	margin-left:2%;
}

#button{
	margin-right:50%;
}

#download_btn{
  width:auto;
}

@media only screen and (max-width: 1100px) {
	cursus{
	width:100%;
		padding:5%;
		padding-top:15%;
		box-sizing:border-box;
}
	
	cursus h1{
		width:100%;
		font-size:25px;
		margin-bottom:15%;
		float:left;
	}
	
	cursus line{
		float:left;
		margin-top:10%;
	}
	
	crusus line i{
		float:left;
		width:100%;
		text-align:center;
		padding-bottom:3vh;
	}
	
	cursus line a{
		float:left;
		width:100%;
		margin:0;
		margin-bottom:5%;
		margin-top:5%;
	}
	
	#button{
		width:auto;
		max-width:100%;
		margin-right:auto;
	}
	
	
}

first{
	width:100%;
	float:left;
	padding:5%;
	box-sizing:border-box;
}

.boxes{
	width:915px;
	margin:0 auto;
	display:block;
	padding-top:5%;
	box-sizing:border-box;
}

.box{
	float:left;
	width:47.5%;
	background-color:#36A9E1;
	padding:2.5%;
	box-sizing:border-box;
	border-radius:1vh;
	color:white;
	cursor:pointer;
	transition:0.3s ease-in-out;
}

.box:hover{
	box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 6px 6px rgba(0,0,0,0.18);
	transition:0.2s ease-in-out;
	transform:translatey(-1%);
	background-color:#49c2fc;
}

.box:first-of-type {
	margin-right:5%;
}

.box i{
	margin:0;
	padding:0;
	width:20%;
	float:left;
	margin-bottom:2.5%;
	font-size:35px;
}

.box h1{
	margin:0;
	padding:0;
	width:80%;
	float:left;
	margin-bottom:2.5%;
}

.box a{
	float:left;
	width:100%;
	padding:2.5%;
	background-color:white;
	box-sizing:border-box;
	color:#555555;
	line-height:1.2em;
	height:7em;
}

@media only screen and (max-width: 1100px) {
	.boxes{
		width:100%;
	}
	.box{
		width:100%;
		margin:0;
		margin-bottom:5%;
	}
	
	.box a{
		height:auto;
		font-size:15px;
		padding:7.5%;
	}
	
	.box h1{
		font-size:20px;
		vertical-align:middle;
		line-height:2em;
	}
	
	
}

section{
	background-color:#f9f9f9;
	width:100%;
	padding:20%;
	padding-top:5%;
	padding-bottom:5%;
	box-sizing:Border-box;
	float:left;
	position:relative;
}

section h1{
	font-size:30px;
	font-weight:300;
	margin:0;
	padding:0;
	color:#555555;
	width:100%;
	margin-bottom:2.5%;
	float:left;
}

section a{
	width:70%;
	float:left;
	color:#777777;
	margin-bottom:3vh;
}

section .listitem{
	float:left;
	width:35%;
	margin-top:2vh;
	height:2.2em;
	vertical-align:center;
}

section ul{
	float: left;
	width: 100%;
}

section .listitem i{
	width:70px;
	text-align:center;
	color:#36A9E1;
	font-size:2.2em;
	vertical-align:middle;
}

section img{
	width:25%;
	margin-left:5%;
	float:left;
	height:auto;
}

#ul_half{
	width:70%;
	float:left;
}

@media only screen and (max-width: 1100px) {
	section{
	padding:5%;
}
	
	section h1{
		font-size:25px;
		margin-bottom:5vh;
	}
	
	section img{
		display:none;
	}
	
	section a{
		width:100%;
	}
	
	section .listitem{
		width:100%;
	}
	
	#ul_half{
	width:100%;
}

	
}


.second{
	background-color:white;
}

.second a{
	width:100%;
}

.img_right{
	position:absolute;
	left:60%;
	top:20%;
	width:17.5%;
	height:auto
}

ul{
	color:#777777;
}

.width50{
	width:51%;
	float:left;
}

.img_ll{
	width:100%;
	margin-right:5%;
	height:auto;
	float:left;
}

.img_ll img{
	width:50%;
	height:auto;
}


#evomodel{
	display:none;
}

#tetrisbrein{
	width:25%;
	left:50%;
	top:26%;
}

#jbc{
	position:relative;
}

#jbc_logo{
	position:absolute;
	right:35%;
	bottom:5%;
	width:10%;
	height:auto;
}

@media only screen and (max-width: 1100px) {
	
	.width50{
		width:100%;
	}
	
	#show{
		width:100%;
		float:left;
		height:auto;
		display:block;
		margin:0;
		margin-bottom:5vh;
	}
	#portret{
		display:block;
		height:20vh;
		width:auto;
		left:40%;
		top:3vh;
	}
	#overmijtxt{
		margin-top:15.54vh;
	}
	
	#evomodel{
		display:block;
		width:60%;
		margin:20%;
		height:auto;
		margin-top:10%;
	}
	
	#tetrisbrein{
		display:block;
		width:100%;
		float:left;
		margin:0;
		margin-top:5%;
		position:relative;
		padding:0;
		left:0;
		top:0;
	}
}

#leer-kompas_cirkel{
	width:25%;
	float:left;
	margin:5%;
}