/**************/
/* CSS REMEDY */
/**************/

*,
*::after,
*::before {
	box-sizing: border-box;
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root {
	/* startje */
	--color-text: #ffffff;
	--color-background: #334D3A;
	--color-background-2: #ffffff;
	--color-footer-p: #334D3A;
	--color-footer-h: #334c3a;
	--color-note: #94A494;
	--color-note-text: #555f55;
	--base-padding: 1.5em 1.5em 3em 1.5em;
	--bottom-padding: .6em;
}

* {
	margin: 0;
	padding: 0;
}

/****************/
/* JOUW STYLING */
/****************/

@font-face {
	font-family: 'open-sans';
	src: url('/fonts/open-sans-v13-latin-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;

}

/* ALGEMENE STYLING */
body {
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: 'open-sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}

body p {
	font-weight: 300;
}

body h1,
h2 {
	font-family: 'Didot', sans-serif;
}

body h1 {
	background-color: var(--color-background-2);
	color: var(--color-background);
	padding: .9em
}

body p {
	line-height: 1.6em;
}

main a:hover {
	background-color: #3145215f;

}

/* VIDEO */
video {
	width: 100%;
	height: auto;
	order: -1;
}

/* TITEL */
section:nth-of-type(1) {
	display: flex;
	flex-direction: column;
	padding: .9em;
	color:var(--color-background);
	font-size: .8em;
}

/* EERSTE KOP EN ALINEA */
section:nth-of-type(2) h2 {
	padding: 1em 0em .8em 0em;
}
section:nth-of-type(2) {
	padding: 0em 1.5em 8em .8em;
}

/* TWEEDE KOP */
section:nth-of-type(3) h2 {
	padding-bottom: .8em;
}

/* SLIDESHOW */
/* https://www.w3schools.com/howto/howto_js_slideshow.asp */
section:nth-of-type(3) {
	position: relative;
	padding: 1.5em .8em 8.5em .8em;
}

section:nth-of-type(3) li {
	display: none;
}

section:nth-of-type(3) li img {
	width: 100%;
	height: auto;
}

section:nth-of-type(3) li.active {
	display: block;
}

/* SLIDESHOW BUTTONS */
main button {
	position: absolute;
	top: 40%;
	width: auto;
	padding: .8em;
	cursor: pointer;
	border: none;
	color: var(--color-background);
	background-color: rgba(255, 255, 255, 0.55);
	font-weight: bold;
	font-size: 1em;	
}

main button:hover {
	background-color: #ffffff;
}

main button:active {
	color: #2529254f;
}

button:nth-of-type(2) {
	right: .8em;
}

/* LOSSE ALINEAS */
section:nth-of-type(4) {
	padding: 0em 1em 5em 1em;
}

section:nth-of-type(4) p {
	padding: .7em 0;
}

/* DERDE KOP */
section:nth-of-type(5) h2 {
	color: var(--color-background);
	padding: 3em 0em 0em 0em;
}

/* STYLING SECTION, IMAGES EN LINK */
section:nth-of-type(5) {
	display: grid;
	grid-row-gap: 2em;
	grid-template-columns: 1fr;
	padding: 0em 1em 2em 1em;
	background-color: var(--color-background-2);
}

section:nth-of-type(5) img {
	width: 100%;
	height: auto;
}

section:nth-of-type(5) a {
	color: var(--color-background);
	background-color: var(--color-note);
	color: #252925;
	text-decoration: none;
	padding: .6em 2em .6em 2em;
	font-weight: 600;
	font-size: .9em;
}

/* POSITIE ARTICLES */
section:nth-of-type(6) {
	display: grid;
	grid-row-gap: 1em;
	padding: 5em .8em 0em .8em;
}

section:nth-of-type(6) h2 {
	padding: 0em 0em .5em 0em;
}

/* ARTICLES */
article {
	display: flex;
	flex-direction: column;
	color: var(--color-background);
	background-color: var(--color-background-2);
	padding: 2.9em;
}

article h3 {
	font-size: 1.25em;
	font-family: 'Didot', sans-serif;
	padding-bottom: .5em;
}

article p {
	padding-bottom: 2em;
}

article p:nth-of-type(1) {
	font-size: .8em;
	font-weight: 600;
	padding-bottom: 1em;
	order: -1;
}

article a {
	text-decoration: none;
	padding: .6em 2em .6em 2em;
	background-color: var(--color-note);
	color: #252925;
	font-weight: 600;
	font-size: .9em;
}

/* SLOGAN */
section:nth-of-type(7) {
	text-align: center;
	padding: 17em 1em 0em 0em;
}

section:nth-of-type(7) p {
	padding: 3em;
}

/* RESPONSIVE */
@media (min-width:40em) {
	section:nth-of-type(1) {
		padding: 0em 3em;
	}
	
	button:nth-of-type(2) {
		right: 4em;
	}

	section:nth-of-type(2) p{
		padding: 0em 2em;
	}
	
	section:nth-of-type(2) h2 {
    	padding: 1em 1em .8em 1.3em;
	}

	section:nth-of-type(3) {
		padding: 0em 4em 8em 4em
	}

	section:nth-of-type(4) p {
		padding: .7em 3em;
	}
	section:nth-of-type(5) ul {
		display: flex;
		gap: 1em;
	}

	section:nth-of-type(5){
		padding: 0em 4em 4em 4em;
	}
	
	section:nth-of-type(6) {
		padding: 5em 3.5em 0em 3.5em;
	}
}

@media (min-width:65em) {
	section:nth-of-type(1) {
		padding: 0em 4em;
	}
	
	section:nth-of-type(2) p{
		padding: 0em 2.5em;
	}
	
	section:nth-of-type(2) h2 {
    	padding: 2em 1em .5em 1.7em;
	}

	section:nth-of-type(3) {
		padding: 0em 6em 8em 6em
	}
	
	button:nth-of-type(2) {
		right: 6em;
	}

	section:nth-of-type(4) {
		display: flex;
		padding: 5em;
	}
	
	section:nth-of-type(4) p {
		padding: 0em 1em;
	}
	
	section:nth-of-type(5) ul {
		display: flex;
		gap: 1em;
	}

	section:nth-of-type(5){
		padding: 0em 6em 4em 6em;
	}
	
	section:nth-of-type(6) {
		padding: 5em 5.5em 0em 5.5em;
	}
}