/* cadeau, laten staan a.u.b. */
.back{
	background-color: black;
  height: 100px;
  color: white;
  font-family: arial;
  font-size: 30px;
  padding-left: 50px;
  padding-top: 30px;
	width: 1900px;
}
.back a{
	text-decoration: none;
  color : white;
}
html {
	background: #403B4A;
	background: -webkit-linear-gradient(to right, #E7E9BB, #02022c);
	background: linear-gradient(to right, #E7E9BB, #02022c);}

body{
	font-family: helvetica;
	max-width: 800px;

}
header{
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	background: white;
	padding: 1rem;
}
.menu{
	border: 0.1rem solid black;
	padding-left: 22rem;
	padding-right: 22rem;
	color: black;
	text-decoration: none;
}
ul{
	margin-top: 2rem;
}
.geselecteerd{
	color :red;
}
li a{
	line-height: 2.5rem;
	text-decoration: none;
	color: black;
	font-size: 1.65rem;
}
section:nth-child(1){
	border-top: 0.1rem solid black;
	padding-top: 2rem;
	text-align: center;
	margin-bottom: 5rem;
}
section:nth-child(1) p{
	color:grey;
	margin-bottom: 5rem;
}
section:nth-child(1) a{
	background-color: #02022d;
	text-decoration: none;
	color: white;
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 5rem;
	padding-right: 5rem;

}

main{
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	padding: 1rem;
}
footer{
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	background-color: white;
	padding: 1rem;
	margin-bottom: 2rem;
}
footer a{
	color: red;
}
p{
	font-size: 1.65rem;
}
span{

}
h1{
	font-size: 3rem;
	margin-bottom: 2rem;
}

h2{
	font-size: 2.5rem;
	color: #02022d;
	margin-bottom: 2rem;

}

img{
	width:48rem;
	margin-top: 3rem;
}
section:nth-child(2) h3{
	font-size: 2rem;
	color: white;
	background-color: #02022d;
	width: 25rem;
	}
section:nth-child(2) article{
	height: 35rem;
	background-position: center;
	background-size :contain;
	background-repeat: no-repeat;
	background-color: #02022d;
	padding: 4rem;
	margin-bottom: 2rem;
	position: relative;
}
section:nth-child(2) article a{
	background-color: white;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-right: 4rem;
	padding-left: 4rem;
	position: absolute;
	top: 20rem;
	text-decoration: none;
	color: black;
	font-size: 2rem;
}
section:nth-child(2) article:nth-child(1) {
	background-image: url(img/bot1.png);

}
section:nth-child(2) article:nth-child(2) {
	background-image: url(img/bot2.png);

}
section:nth-child(2) article:nth-child(3) {
	background-image: url(img/bot3.png);

}
section:nth-child(2) article:nth-child(4) {
	background-image: url(img/bot4.png);

}
section:nth-child(2) article:nth-child(5) {
	background-image: url(img/bot5.png);
}
section:nth-child(2) article:nth-child(6) {
	background-image: url(img/bot6.png);
}
section:nth-child(2) article:nth-child(7) {
	background-image: url(img/bot7.png);
}
section:nth-child(2) article:nth-child(8) {
	background-image: url(img/bot8.png);
}
section:nth-child(2) article:nth-child(9) {
	background-image: url(img/bot9.png);
	margin-bottom: 5rem;
}

section:nth-child(3) h3{
	font-size: 2rem;
	color: #02022d;
}
section:nth-child(3) h4{
	font-size: 1.7rem;
	color: #02022d;
}
section:nth-child(3) p a{
	color: red;
}
section:nth-child(3) h4 a{
	text-decoration: none;
	color: black;
}
section:nth-child(3) {
line-height: 3rem;

}
section:nth-child(4){
	margin-top: 5rem;
}
section:nth-child(4) h2{
	color: #02022d;
 	margin-bottom: 5rem;
}
section:nth-child(4) p	{
	color: grey;
}
.nieuwsbrief{
	border: 0.1rem solid black;
	padding-top: 2rem;
	padding-bottom: 2rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
}
.nieuwsbrief button{
	float: right;
}
	@media screen and (min-width: 700px) {
		header{
			width: 740px;
			padding: 3rem;
		}
		main{
			margin-left: auto;
			margin-right: auto;
			width: 740px;
			padding: 3rem;
		}
		footer{
			width: 740px;
			padding: 3rem;
		}
		.menu{
			padding: 1rem;
			float: right;
			box-shadow: 10px 10px;
		}
		section:nth-child(2){
			width: 650px;
			display: grid;
			grid-template-areas: " a a "
													 " b c "
													 " d d "
													 " e f "
													 " g g "
													 " h i ";
			grid-gap: 2rem;
		}
		section:nth-child(2) article:nth-child(1){
			grid-area: a;
			height: 60rem;
		}
		section:nth-child(2) article:nth-child(2){
			grid-area: b;

		}
		section:nth-child(2) article:nth-child(3){
			grid-area: c;
		}
		section:nth-child(2) article:nth-child(4){
			grid-area: d;
			height: 60rem;
		}
		section:nth-child(2) article:nth-child(5){
			grid-area: e;
		}
		section:nth-child(2) article:nth-child(6){
			grid-area: f;
		}
		section:nth-child(2) article:nth-child(7){
			grid-area: g;
			height: 60rem;
		}
		section:nth-child(2) article:nth-child(8){
			grid-area: h;
		}
		section:nth-child(2) article:nth-child(9){
			grid-area: i;
		}
		section:nth-child(3){
			display: grid;
			grid-template-areas: "a a"
													 "b c"
													 "d e";
			grid-gap: 2rem;
		}
		section:nth-child(3) h2{
			position: absolute;
		}
		section:nth-child(3) img{
			margin-left: 0;
			width: 30rem;
	}
	@media screen and (min-width:1100px) {
		header{
			width: 1200px;
		}
		main{
			width: 1200px;
			margin-left: auto;
			margin-right: auto;
		}
		footer{
			width: 1200px;
		}
		section:nth-child(2){
			display: grid;
			position: relative;
			grid-template-areas: " a b"
													 " a c"
													 " e d"
													 " f d"
													 " g h"
													 " g i";
		}
		section:nth-child(2) article:nth-child(1){
			grid-area: a;
			height: 75rem;
			width: 75rem;
		}
		section:nth-child(2) article:nth-child(2){
			grid-area: b;
			width:  35rem;
		}section:nth-child(2) article:nth-child(3){
			grid-area: c;
			width:  35rem;
		}
		section:nth-child(2) article:nth-child(5){
			grid-area: e;
			width:  35rem;
			height: 35rem;
		}
		section:nth-child(2) article:nth-child(6){
			grid-area: f;
			width:  35rem;
		}
		section:nth-child(2) article:nth-child(4){
			grid-area: d;
			position: absolute;
			height: 75rem;
			width: 75rem;
			right: 0rem;
		}
		section:nth-child(2) article:nth-child(7){
			height: 75rem;
		}
		section:nth-child(3){
			margin-top: 5rem;
			display: grid;
			grid-template-areas: "a a a"
													 "b c d"
													 "e f g";

			grid-gap: 7rem;
			position: relative;
			margin-bottom: 0;
		}
		section:nth-child(3) h2{
			position: absolute;

		}
		section:nth-child(3) article:nth-child(1){
			grid-area: b;
		}
	}


}


/* voor de rest gebruikte kleuren: #02022d, #ff2825, #999999, rgba(2, 2, 43, .75), #04042c, #403B4A */

/* nog een tip: begin voor de achtergrondafbeeldingen in section 2 met volgende hoogte:

section:nth-child(2) article {height: 35rem;}
Je moet dit mogelijk aanpassen (voor sommigen) bij de media queries

Naar een invidueel article verwijs je als volgt:
section:nth-child(2) article:nth-child(1) {...}

De afbeeldingen die je nodig hebt zitten allen in de folder img. Verwijs naar hen op de juiste manier vanuit CSS */