/* FONTS */
@media screen {
	@font-face {
	  font-family: futura;
	  src: url(fonts/FuturaStd-Condensed.otf);
	}
	@font-face {
	  font-family: futura;
	  src: url(fonts/FuturaStd-CondensedExtraBd.otf);
	  font-weight: bold;
	}
	@font-face {
	  font-family: bree;
	  src: url(fonts/BreeSerif-Regular.ttf);
	}
	@font-face {
	  font-family: crimson;
	  src: url(fonts/Crimson-Roman.otf);
	}
	@font-face {
	  font-family: crimson;
	  src: url(fonts/Crimson-Bold.otf);
	  font-weight: bold;
	}
	@font-face {
	  font-family: crimson;
	  src: url(fonts/Crimson-Italic.otf);
	  font-style: italic;
	}
	@font-face {
	  font-family: crimson;
	  src: url(fonts/Crimson-BoldItalic.otf);
	  font-weight: bold;
	  font-style: italic;
	}
	@font-face {
	  font-family: roboto;
	  src: url(fonts/RobotoSlab-Light.ttf);
	}
}

/* BODY, P, H,... */
@media screen {
	html {
		margin: 0;
		padding: 0;
	}
	body {
		background-image: url('afbeeldingen/background.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin: 0;
		width: 100vw;
		height: 100vh;
		max-width: 100%;
		font-family: "crimson";
	}
	#container {
		padding: 3rem;
	}
	p {
		display: block;
		position: relative;
		line-height: 150%;
		font-size: 1.3rem;
		font-family: 'crimson', 'Georgia', serif;
	}
	ol, ul {
		display: block;
		position: relative;
		line-height: 125%;
		margin: 0;
		padding: 0;
		font-size: 1.3rem;
		font-family: 'crimson', 'Georgia', serif;
	}
	h1 {
		font-size: 3.5rem;
		margin: 0;
	}
	h2 {
		font-size: 2.5rem;
		margin: 0;
	}
	h3 {
		font-size: 2rem;
		margin: 0;
	}
	h1, h2 {
		font-family: 'bree', sans-serif;
	}
	h3, h4 {
		font-family: 'futura', 'Impact', sans-serif;
		font-weight: normal;
		text-transform: uppercase;
	}
	a {
		color: #00c47c;
	}
}


/* tiles */
@media screen {
	#tiles {
		display: flex;
		float: left;
		width: 100%;
		font-family: 'futura';
		margin: 0;
	}
	#tiles div.tile {
		color: black;
		flex-wrap: wrap;
		text-decoration: none;
		background-color: #aaa;
		border: 1px solid white;
		margin: 2rem 2rem 0 0;
		padding: 2rem;
	}
	#tiles div.tile div.title {
		font-size: 2rem;
		font-weight: bold;
		text-transform: uppercase;
	}
	#tiles div.tile div.text {
		display: block;
		font-size: 1.5rem;
	}
	#tiles div.tile a {
		display: block;
		text-decoration: none;
		background-color: #ddd;
		border: 1px solid white;
		border-radius: 1rem;
		padding: 0.5rem;
		margin-top: 1rem;
		font-size: 1.5rem;
		color: black;
	}
	#tiles div.tile a:hover {
		background-color: #666;
		color: #fff;
		
	}
}

/* lang */
@media screen {
	#title {
		float: left;
	}
	#title h1 {
		background-color: #c2172a;
		color: white;
		margin-left: -3rem;
		padding: 1rem 1rem 1rem 3rem;
	}
	.blocktext {
		float: left;
		clear: left;
		padding: 0 2rem 2rem 3rem;
		max-width: 500px;
		background-color: #ddd;
	}
	#lang {
		display: flex;
		float: right;
		top: 2rem;
		right: 2rem;
		font-family: 'futura';
		border: 1px solid white;
		overflow: hidden;
		border-radius: 1rem;
	}
	#lang a {
		color: black;
		text-decoration: none;
		padding: 1rem;
		font-size: 1.5rem;
		background-color: #aaa;
	}
	#lang a:first-child {
		border-right: 1px solid white;
	}
	#lang a:hover, #lang a:active, #lang a.active {
		background-color: #666;
		color: #fff;
	}

}