*{
	padding: 0;
	margin: 0;
}

@font-face {
	font-family: Humanistic;
	src: url(fonts/Humanistic.ttf);
}

@font-face {
	font-family: OpenSans-Regular;
	src: url(fonts/OpenSans-Regular.ttf);
}

@font-face {
	font-family: OpenSans-Light;
	src: url(fonts/OpenSans-Light.ttf);
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(10, 1fr); /*maakt 10 kolommen van 1fr(fraction)*/
	grid-template-rows: auto; /*past aantal rows aan aan aantal aparte content*/
	grid-column-gap: 20px;
}

html, body {
	font-family: OpenSans-Regular;
	background-color: #eed79f;
	scroll-behavior: smooth;
}

/*===================header===================*/
header {
	grid-column: 1 / -1; /*maakt de header breedte van het hele grid*/
	line-height: 200px;
	border-left: 3px solid #dba41e;
	background: url(../images/header_achtergrond.jpg) center no-repeat;
	background-size: cover;
}

header a {
	text-decoration: none;
	color: #dba41e;
}

header h1 {
	font-family: Humanistic;
	padding-left: 0.5em;
	vertical-align: center;
	font-size: 360%;
}

/*===================navigatiebalk===================*/
nav {
	grid-column: 1 / -1;
	background-color: #2e3234;
	text-align: center;
	position: -webkit-sticky; /*↓ voor safari*/
	position: sticky; /*blijft op het scherm als je scrollt*/
	top: 0; /*blijft aan de bovenkant van het scherm*/
	line-height: 26px;
	z-index: 1;
}

nav ul li {
	display: inline-block; /*zet de list-items naast elkaar*/
	width: 100px;
	margin-left: -5px;
}

nav ul li a {
	text-decoration: none;
	position: relative;
	display: block;
	color: #fff;
	cursor: pointer;
}

/*hover animatie*/
nav ul li a:before {
    content: "";
	position: absolute;
	z-index: -1; /*komt achter tekst te staan*/
    width: 3px;
    height: 100%;
    left: 0;
    top: 0;
    background: #dba41e;
    transition: all 0.3s; /*alle properties veranderen in 0.3 s*/
}

nav ul li a:hover:before {
    width: 100%; /*width verandert van 2px naar 100%*/
}

/*het highlighten van de pagina waar je op zit in nav balk*/
body.home #navigatie li.home a, 
body.tijdlijn #navigatie li.tijdlijn a, 
body.personen #navigatie li.personen a, 
body.quiz #navigatie li.quiz a { /*hier koppel je eigenlijk alle body classes met li classes*/
	background-color: #eed79f;
	color: #575655;
	cursor: default;
}

/*===================inhoud===================*/
/*opbouw van de pagina's*/
/*homepagina*/
article.aanloop {
	grid-column: 2 / 7; /*breedte is van kolom-lijn 2 tot lijn 7*/
}

aside.links {
	grid-column: 7 / 10;
}

/*tijdlijn pagina*/
aside.sidebar {
	grid-column: 2 / 5;
}

aside.sidebar .content {
	position: -webkit-sticky;
	position: sticky;
	top: 46px;
}

article.gebeurtenissen {
	grid-column: 5 / 10;
}

/*personen pagina*/
article.kolom-links {
	grid-column: 2 / 6;
}

article.kolom-rechts {
	grid-column: 6 / 10;
	margin-top: 88px;
}

/*quiz pagina*/
article.quiz {
	grid-column: 3 / 9;
}

/*tooltips*/
.tooltip {
	position: relative;
	display: inline-block;
}
.tooltip .tooltiptext{
	font-family: OpenSans-Light;
	visibility: hidden; /*niet zichtbaar tot je er op hovert*/
	width: 250px;
	background-color: #2e3234;
	color: #fff;
	font-weight: normal;
	text-align: center;
	border-radius: 3px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%; /*wordt naar boven verplaatst met de hoogte van 125% van de tekst*/
	left: 50%;
	margin-left: -125px; /*helft van de width, zet hem dus in het midden*/
	opacity: 0;
	transition: opacity 0.3s ease; /*fade animatie*/
}

.tooltiptext:after {
    content: "";
	position: absolute;
	top: 100%; /*plaatst een pijltje onder de tooltip*/
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2e3234 transparent transparent transparent;
}	

.tooltip:hover .tooltiptext {
	visibility: visible; /*als over tekst hovert, wordt tooltip zichtbaar*/
	opacity: 1;
}

/*algemene properties*/
h2 {
	color: #575655;
	font-size: 150%;
	line-height: 28px;
	border-left: 3px solid #dba41e;
	margin: 45px 0 15px 0;
	padding-left: 17px;
}

h3 {
	border-left: 3px solid #dba41e;
	color: #575655;
	font-size: 120%;
	padding-left: 10px;
	line-height: 21px;
}

section.content {
	background-color: #ffefc9; /*achtergrond van de blokken tekst*/
	border-radius: 3px;
	padding: 30px;
	margin-bottom: 20px;
}

p {
	text-align: left;
	line-height: 20px;
	margin-top: 16px;
	color: #000;
}

ul.home-links li.witregel,
ul.footer-links li.witregel { /*om witregels tussen items in lijstjes van links te maken*/
	margin-top: 16px;
}

.destination { /*waar heen gescrolld wordt met de links*/
	position: absolute;
	margin-top: -76px;
}

video {
	height: auto;
}

img.tijdlijn, img.quiz {
	float: right;
	margin: 20px 0 10px 10px;
	border-left: 3px solid #dba41e;
	height: auto;
}

img.personen {
	float: right;
	margin: 5px 0 5px 10px;
	border-left: 3px solid #dba41e;
	width: auto;
}

/*links en woorden met tooltips*/
p a {
	text-decoration: none;
	color: #dba41e;
	cursor: pointer;
	transition: color 0.2s ease-in-out; /*veranderen van kleur duurt 0.2s*/
}

p a:hover {
	color: #000;
	font-weight: normal;
	text-decoration: underline #dba41e;
}

p b {
	color: #dba41e;
	cursor: help;
	position: relative;
	font-weight: normal;
	transition: color 0.2s ease-in-out;
}

p b:hover {
	color: #000;
	font-weight: normal;
	text-decoration: underline #dba41e;
}

/*links op de homepagina*/
ul.home-links li {
	margin: 5px 0 0 15px;
	transition: transform 0.2s linear;
}

ul.home-links li:hover {
	transform: translateX(10px);
}

ul.home-links li a {
	position: relative;
	text-decoration: none;
	color: #dba41e;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}

ul.home-links li a:hover {
	color: #000;
}

ul.home-links li a:before { /*pijltje dat naar rechts wijst*/
	content: "";
	position: absolute;
	right: 100%;
	margin-top: 4px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #2e3234;
}

/*tijdlijn*/
ul.tijdlijn {
	position: relative;
	margin: 0 auto;
}

ul.tijdlijn:after { /*verticale lijn*/
	content: "";
    position: absolute;
    width: 3px;
    background-color: #dba41e;
    top: 12px;
    bottom: 0;
    left: 60px; /*zet hem 60px van de breedte vanaf de linkerzijkant*/
	height: 95%;
}

ul {
	list-style: none;
}

span.jaartal {
	position: absolute;
	left: 0;
	margin-top: 20px;
}

span.jaartal:after { /*de cirkels die op de lijn staan*/
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	left: 56px;
	margin-top: 4.4px;
	border-radius: 50%;
	background-color: #eed79f;
	border: 3px solid #2e3234;
	z-index: 1;
}

div.lijn:after { /*de lijnen tussen cirkes en tekstboxen*/
	content: "";
	position: absolute;	
	width: 35px;
	height: 3px;
	margin-top: 27px;
	left: 60px;
	background-color: #dba41e;
	z-index: -1;
}

div.eerste:after { /*uitzondering voor het bovenste lijntje*/
	margin-top: 14px;
}

input.item {
	background-color: #eed79f;
	padding: 5px;
	border-radius: 0 3px 3px 0;
	border: 1px dotted #2e3234;
	border-left: 3px solid #dba41e;
	width: 70%;
	margin-left: 80px;
	margin-top: 12.5px;
	transition: transform 0.2s linear;
}

input.item:hover {
	transform: translateX(10px);
}

input.item[value] {
	background-color: #eed79f;
	padding: 5px;
	border-radius: 0 3px 3px 0;
	border: 1px dotted #2e3234;
	border-left: 3px solid #dba41e;
	width: 75%;
	margin-left: 80px;
	margin-top: 12.5px;
	transition: transform 0.2s linear, color 0.2s ease-in-out;
}

input.item:hover[value] {
	transform: translateX(10px);
	color: #000;
	cursor: pointer;
}

input.item[value] {
	font-family: OpenSans-Regular;
	font-size: 100%;
	color: #575655;
	text-align: left;
}

/*de opsommingen van functies van de personen*/
ul.opsomming {
	list-style-type: disc;
	padding-left: 20px;
	margin-top: 16px;
}

/*quiz*/
ul.vraag {
	margin-top: 32px;
}

label.keuze {
	display: block;
	margin-top: 16px;
	cursor: pointer;
}

section.submit-container {
	padding-bottom: 30px;
}

input.submit-button {
	width: 180px;
	color: #575655;
	background-color: #edbd48;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	margin: auto;
	display: block;
	padding: 5px;
	font-family: OpenSans-Light;
	font-size: 20px;
	transition: all 0.2s ease;
}

input.submit-button:hover {
	color: #2e3234;
	background-color: #dba41e;
}

p.score {

	text-align: center;
}

/*===================footer===================*/
footer {
	padding: 30px 0 5px 0;
	grid-column: 1 / -1;
	background-color: #2e3234;
	color: #fff;
	font-family: OpenSans-Light;
}

div.footer {
	width: 1072px;
	margin: auto;
}

h4 {
	color: #dba41e;
	font-family: OpenSans-Regular;
}

/*contact informatie*/
section.contact {
	display: inline-block;
	top: 0;
	vertical-align: top;
}

section.contact p {
	color: #fff;
}

ul.contact li {
	position: relative;
	margin-left: 15px;
}

ul.contact li:before{
	content: "";
	position: absolute;
	right: 100%;
	margin-top: 2px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #dba41e;
}

ul.contact li a {
	text-decoration: none;
	color: #dba41e;	
}

/*formulier voor contact*/
section.form {
	display: inline-block;
	vertical-align: top;
	margin-left: 80px;
}

section.form form {
	margin-top: 16px;
}

input.naam, input.email {
	height: 30px;
	margin-bottom: 5px;
	border: none;
	border-radius: 3px;
	display: inline;
	font-size: 14px;
}

input.naam {
	width: 220px;
}

input.email {
	width: 270px;
	box-sizing: border-box;
}

li input.border, li textarea.border {
	border: 1px solid red;
}

textarea.opmerking {
	width: 500px;
	height: 180px;
	border: none;
	border-radius: 3px;
	resize: none;
	font-size: 14px;
	box-sizing: border-box;
}

textarea[placeholder] {
	padding-top: 5px;
}

input[placeholder], textarea[placeholder] {
	padding-left: 5px;
	font-family: OpenSans-Regular;
}

input.send {
	width: 500px;
	height: 30px;
	border: none;
	border-radius: 3px;
	text-align: center;
	background-color: #edbd48;
	color: #575655;
	cursor: pointer;
	font-size: 16px;
	transition: all 0.2s ease;
}

input.send:hover {
	background-color: #dba41e;
	color: #2e3234;
}

/*de links in de footer*/
section.links {
	display: inline-block;
	margin-left: 80px;
}

ul.footer-links li {
	margin-left: 15px;
	transition: transform 0.2s linear;	
}

ul.footer-links li:hover {
	transform: translateX(10px);
}

ul.footer-links li a {
	position: relative;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}

ul.footer-links li:hover a {
	color: #dba41e;
}

ul.footer-links li a:before {
	content: "";
	position: absolute;
	right: 100%;
	margin-top: 2px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #dba41e;
}

section.copyright p {
	font-size: 70%;
	color: #fff;
	text-align: center;
}

/*===================overig===================*/
@media only screen and (max-width:800px) { /*hiermee maak ik de site enigzins responsive voor telefoon*/
	
	article.aanloop, aside.links, aside.sidebar, article.gebeurtenissen, article.kolom-links, article.kolom-rechts, article.quiz {
		grid-column: 2 / 10;
	}
	
	img {
		display: inline;
		float: none;
		margin-left: 0;
		width: 180px;
	}
}