/* DEEL TITEL */

#deel_titel {
	height: 650rem;
}

#titel {
	left: 50%;
	top: 325rem;
	width: 800rem;
	aspect-ratio: 5 / 2;
}

#titel_deco1 {
	left: -10rem;
	top: 200rem;
	width: 300rem;
	transform: translate(0, -50%) rotate(40deg);
}

#titel_deco2 {
	left: 75%;
	top: 800rem;
	width: 500rem;
	opacity: 0.5;
}

#titel_img {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

#titel_tekst {
	top: 50%;
	left: 50%;
	color: #000;
	font: 90rem/1 "Titel", sans-serif;
}

#titel_blad1 {
	top: -40rem;
	left: 80%;
	height: 250rem;
	transform: translate(-50%, 0) rotate(-160deg);
	filter: brightness(115%);
}

#titel_blad2 {
	bottom: 150rem;
	left: 0;
	height: 350rem;
	transform: translate(0, 50%) rotate(90deg);
	filter: brightness(125%);
}


/* DEEL DATUMS */

#deel_datums {
	height: 800rem;
}

#geef_op_workshop {
	left: 50%;
	top: 50rem;
	font: bold 50rem/1 "Kop", sans-serif;
	color: #efc;
}

#datums_1 {
	left: calc(65% + 16px);
	top: 250rem;
	font: 50rem/1 "Normaal", sans-serif;
}

#datums_2 {
	left: calc(65% + 16px);
	top: 500rem;
	font: 50rem/1 "Normaal", sans-serif;
}

@media only screen and (max-width: 900px) {
	#datums_1, #datums_2 {
		font-size: 45rem;
	}
}



#datums_foto {
	top: 50%;
	left: 20%;
	height: 600rem;
	max-width: 40%;
	object-fit: contain;
}

#datums_bekijk_workshops {
	top: 720rem;
	left: 60%;
	font: 40rem/1 "Normaal", sans-serif;
}


/* DEEL INFO */

#deel_info {
	height: 900rem;
}

#info_deco1 {
	left: calc(70% + 300rem);
	top: 400rem;
	height: 400rem;
}

#info_deco2 {
	left: calc(35% - 100rem);
	top: 0;
	height: 800rem;
	opacity: 0.2;
	transform: translate(-50%, -50%) rotate(30deg);
	z-index: -1;
}

#info_wat {
	left: 50%;
	top: 300rem;
	aspect-ratio: 4 / 3;
	height: 600rem;
}

#wat_achtergrond {
	left: 50%;
	top: 50%;
	aspect-ratio: 4 / 3;
	height: 100%;
}

#wat_titel {
	top: 100rem;
	left: 40%;
	font: 50rem/1 "Kop", sans-serif;
	color: #840;
	transform: translate(-50%, -50%) rotate(-2deg);
	background-color: #efd;
	padding: 8rem;
	border-radius: 8rem;
}

#wat_tekst {
	top: 300rem;
	left: 270rem;
	width: 400rem;
	color: #000;
	font: 30rem/1 "Normaal", sans-serif;
	text-align: left;
}

#wat_kosten {
	top: 450rem;
	left: 200rem;
	font: 35rem/1 "Normaal", sans-serif;
	color: #000;
}

#wat_bloem {
	top: 400rem;
	left: 580rem;
	width: 300rem;
}

#info_foto1 {
	position: absolute;
	top: 600rem;
	right: calc(50% + 4rem);
	width: calc(50% - 16rem);
	height: 300rem;
	object-fit: cover;
	max-width: 800rem;
	border-top-left-radius: 64rem;
	border-bottom-left-radius: 64rem;
}

#info_foto2 {
	position: absolute;
	top: 600rem;
	left: calc(50% + 4rem);
	width: calc(50% - 16rem);
	height: 300rem;
	object-fit: cover;
	max-width: 800rem;
	border-top-right-radius: 64rem;
	border-bottom-right-radius: 64rem;
}


/* DEEL TEKEN */

#deel_teken {
	height: 700rem;
}

#teken_titel {
	top: 50rem;
	left: 50%;
	font: 45rem/1 "Kop", sans-serif;
}

#teken_plattegrond1 {
	top: 250rem;
	left: 50%;
	width: 400rem;
	box-shadow: 0 0 16rem #000;
	transform: translate(-50%, -50%) rotate(2deg);
	z-index: 2;
}

#teken_plattegrond2 {
	top: 500rem;
	left: 25%;
	width: 500rem;
	box-shadow: 0 0 16rem #000;
	transform: translate(-50%, -50%) rotate(10deg);
	z-index: 1;
}

#teken_plattegrond3 {
	top: 450rem;
	left: 75%;
	width: 400rem;
	box-shadow: 0 0 16rem #000;
	transform: translate(-50%, -50%) rotate(-20deg);
}

#teken_perspectief_tekst {
	top: 720rem;
	left: 50%;
	font: 45rem/1 "Kop", sans-serif;
}

#teken_perspectief {
	top: 950rem;
	left: 50%;
	width: 600rem;
	border: 2rem solid #000;
	border-radius: 64rem;
}

/* DEEL RESULTAAT */


#deel_resultaat {
	height: 1000rem;
}

#resultaat_deco1 {
	left: calc(70% + 200rem);
	top: 1100rem;
	height: 400rem;
}

#resultaat_gras {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 200rem;
	background-image: url("img/gras.svg");
	background-repeat: repeat-x;
	background-size: 500rem;
	border-bottom: 4rem solid #840;
}

#resultaat_tekst {
	top: 100rem;
	left: 50%;
	font: italic 40rem/1 "Normaal", sans-serif;
	color: #ef8;
}

#resultaat_foto1 {
	top: 400rem;
	left: 50%;
	height: 380rem;
}

#resultaat_foto2 {
	top: 800rem;
	left: 50%;
	height: 380rem;
}

@media only screen and (min-width: 1200rem) {
	#deel_resultaat {
		height: 600rem;
	}
	
	#resultaat_foto1 {
		top: 400rem;
		left: calc(40% - 130rem);
	}
	
	#resultaat_foto2 {
		top: 400rem;
		left: calc(60% + 230rem);
	}
}


/* DEEL DAGEN */

#deel_dagen {
	height: 1000rem;
}

#dagen_maand1 {
	top: 300rem;
	left: calc(40% - 110rem);
	width: 400rem;
}

#dagen_maand2 {
	top: 700rem;
	left: calc(60% + 110rem);
	width: 400rem;
}

#dagen_maand1, #dagen_maand2 {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 2rem;
	
	& .header, & .dag {
		padding: 8rem 12rem;
		box-shadow: 0 0 0 2rem #000;
	}
	& .header {
		background-color: #628;
		color: #fff;
		font: bold 25rem/1 "Normaal", sans-serif;
	}
	& .dag {
		background-color: #caf;
		color: #000;
		font: 25rem/1 "Normaal", sans-serif;
	}
	& .beschikbaar {
		background-color: #8c8;
		font-weight: bold;
		text-decoration: none;
	}
	& .vol {
		background-color: #c88;
		font-weight: bold;
		text-decoration: none;
	}
	& .geweest {
		background-color: #ccc;
	}
	& .vandaag {
		color: #00f;
	}
}

#dagen_tekst1 {
	top: 300rem;
	left: calc(50% + 50rem);
	transform: translate(0, -50%);
	font: 60rem/1 "Kop", sans-serif;
}


#dagen_tekst2 {
	top: 700rem;
	right: calc(50% + 50rem);
	transform: translate(0, -50%);
	font: 60rem/1 "Kop", sans-serif;
}

#dagen_vlinders {
	top: 500rem;
	left: 50%;
	width: 100%;
	max-width: 1600rem;
}

#dagen_alle_workshops {
	top: 900rem;
	left: 50%;
	font: 45rem/1 "Normaal", sans-serif;
}