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

button,
summary {
	cursor: pointer;
}

/*********************/
/* CUSTOM PROPERTIES #EE6C4A */
/*********************/
:root {
	--accentBlauw: #97A185;
	--accentGroen: #4F6056;
	--accentTurquase: #569A8A;
	--accentTurquaseDonker: #254E44;
	--selectedKleur: #FF805B;
	--achtergrond: #DADFD8;
	--textKleur: black;
	--hoverKleur: #3F6A3C;
	--kaartenKleur: #B4BEC5;
	--accentLichtBlauw: #B5BFC8;	
	--selected2: #EA3B2F;
	--selected3: #DA635D;
	--selected4: #FF1F1F;
	--borderRiight: #A4CECE;
	--navlinkcolor: #4F6056;
	--linkcolor: #4F6056;
	--strongcolor: #254E44;
	--productencolor: #DADFD8;
	--footerLink: #97A185;
	--linkVideo: #4F6056;
	--linkVideoFocus: #FF805B;
}

body.halloween {
	--accentBlauw: #1D2526;
	--accentGroen: #1D2526;
	--accentTurquase: #DD9D61;
	--accentTurquaseDonker: #B16C2B;
	--selectedKleur: #A4CECE;
	--achtergrond: #FF7B00;
	--textKleur: white;
	--hoverKleur: black;
	--kaartenKleur: #FFBB7C;
	--accentLichtBlauw: white;	
	--selected2:  #4F6056;
	--selected3: #254E44;
	--selected4:  #569A8A;
	--borderRiight: #FF805B;
	--navlinkcolor: black;
	--linkcolor: white;
	--strongcolor: #fdbb2d;
	--footerLink: #FF7B00;
	--linkVideo: #DD9D61;
	--linkVideoFocus:  #A4CECE;
}

.productHTML.halloween {
	--accentBlauw: #1D2526;
	--accentGroen: #1D2526;
	--accentTurquase: #DD9D61;
	--accentTurquaseDonker: #B16C2B;
	--selectedKleur: #A4CECE;
	--achtergrond: #FF7B00;
	--textKleur: white;
	--hoverKleur: black;
	--kaartenKleur: #fdbb2d;
	--accentLichtBlauw: white;	
	--selected2:  #4F6056;
	--selected3: #254E44;
	--selected4:  #569A8A;
	--borderRiight: #FF805B;
	--navlinkcolor: black;
	--linkcolor: white;
	--strongcolor: #fdbb2d;
	--footerLink: #FF7B00;
	--linkVideo: #DD9D61;
	--linkVideoFocus:  #A4CECE;
}

body.halloween header > div {
	background-image: url("https://images.unsplash.com/photo-1663568714479-9cccbd410076?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80") ;
}

/****************/
/* ALGEMENE STYLING */
/****************/

h1,
h2,
h3,
h4 {
	font-family: 'Special Elite', cursive;
	letter-spacing: 5px;
	color: var(--textKleur);
}

p {
	font-family: 'Barlow', sans-serif;
	font-size: 1em;
	color: var(--textKleur);;
}

img {
	border-radius: .4em;
}

header li, button {
	font-family: 'Barlow', sans-serif;
}

body {
	margin: 0;
	background-color: var(--achtergrond);
}

main {
	position: relative;
}

@keyframes focusgiddy {
	0% {
		transform: rotate(0);
	}
	2% {
		transform: rotate(2deg);
	}
	4% {
		transform: rotate(5deg);
	}
	6% {
		transform: rotate(-4deg);
	}
	8% {
		transform: rotate(-1deg);
	}
	10% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(0);
	}
}

/****************/
/* HEADER STYLING */
/****************/

header > div {
	background-image: url('https://images.unsplash.com/photo-1477554193778-9562c28588c0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80') ;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	background-position: center;
	height: 40vh;
	flex-direction: column;
}

/****************/
/* HALLOWEEN STYLING */
/****************/

@keyframes pompoenGiddy{
	0% {
		transform: rotate(0)
	}
	40% {
		transform: rotate(6deg)
	}
	55% {
		transform: rotate(-5deg)
	}
	100% {
		transform: rotate(0)
	}
}

header div button {
	position: absolute;
	width: 10em;
	height: 11em;
	background-color: transparent;
	z-index: 1;
	top: .5em;
	left: .5em;
	border: none;
	animation-name: pompoenGiddy;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.2,.72,.89,1.36);
	outline: none;
}

header div button div:first-of-type {
	position: absolute;
	height: 6em;
	width: 3em;
	border-radius: 43% 38% 39% 42% / 51% 51% 49% 47% ;
	bottom: 1em;
	left: .5em;
	background-color: #FF7B00;
	border: 2px solid #C65F00;
}

header div button div:nth-of-type(2) {
	position: absolute;
	height: 7em;
	width: 3em;
	border-radius: 43% 38% 39% 42% / 51% 51% 49% 47%  ;
	bottom: .5em;
	left: 1.5em;
	background-color: #FF7B00;
	border: 2px solid #C65F00;
	z-index: 2;
}

header div button div:nth-of-type(3) {
	position: absolute;
	height: 8em;
	width: 4em;
	border-radius: 43% 38% 39% 42% / 51% 51% 49% 47% ;
	bottom: 0;
	left: 3em;
	background-color: #FF7B00;
	border: 2px solid #C65F00;
	z-index: 3;
}

header div button div:nth-of-type(4) {
	position: absolute;
	height: 7em;
	width: 3em;
	border-radius: 43% 38% 39% 42% / 51% 51% 49% 47%  ;
	bottom: .5em;
	right: 1.5em;
	background-color: #FF7B00;
	border: 2px solid #C65F00;
	z-index: 2;
}

header div button div:nth-of-type(5) {
	position: absolute;
	height: 6em;
	width: 3em;
	border-radius: 43% 38% 39% 42% / 51% 51% 49% 47% ;
	bottom: 1em;
	right: .5em;
	background-color: #FF7B00;
	border: 2px solid #C65F00;
}

header div button div:nth-of-type(6) {
	position: absolute;
	width: 1em;
	height: 7em;
	background-color: #3B3900;
	border: 2px solid #3B2C00;
	top: 1em;
	left: 4.5em;
	border-radius: 0% 100% 25% 55% / 50% 74% 0% 50% ;
}

@keyframes lightFlikkering{
	0% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 79%);
		opacity: .8;
	}
	5% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 58%);
		opacity: .6;
	}
	10% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 79%);
		opacity: 1;
	}
	25% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 58%);
		opacity: .8;
	}
	30% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 79%);
		opacity: .7;
	}
	50% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 58%);
		opacity: .5;
	}
	100% {
		background: rgb(255,209,80);
		background: linear-gradient(0deg, rgba(255,209,80,1) 0%, rgba(134,38,0,1) 79%);
		opacity: .8;
	}
}

header div button div:nth-of-type(7) {
	width: 1em;
	height: 1.5em;
	border-radius: 50%;
	background-color: #C65F00;
	position: absolute;
	left: 3.5em;
	top: 5em;
	z-index: 7;
	animation-name: lightFlikkering;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.15,.74,.76,.37);
}

header div button div:nth-of-type(8) {
	width: 1em;
	height: 1.5em;
	border-radius: 50%;
	background-color: #C65F00;
	position: absolute;
	right: 3.5em;
	top: 5em;
	z-index: 5;
	animation-name: lightFlikkering;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.15,.74,.76,.37);
}

header div button div:nth-of-type(9) {
	width: 3em;
	height: 1em;
	border-radius: 100% 100% 100% 100% / 0% 0% 100% 100% ;
	background-color: #C65F00;
	position: absolute;
	right: 3.5em;
	top: 7em;
	z-index: 5;
	animation-name: lightFlikkering;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.15,.74,.76,.37);
}

@keyframes textVerschijnen {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	52% {
		opacity: 0.5;
	}
	54% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

header div button div:nth-of-type(10) {
	width: 7em;
	height: 2em;
	border-radius: 58% 10% 53% 0% / 100% 10% 62% 0%;
	background-color: white;
	position: absolute;
	right: -4em;
	top: 5.5em;
	z-index: 5;
	animation-name: textVerschijnen;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

header div button div:nth-of-type(11){
	width: 9em;
	height: 3em;
	border-radius: 2em;
	background-color: white;
	position: absolute;
	right: -7em;
	top: 5em;
	z-index: 7;
	animation-name: textVerschijnen;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

header div button div:nth-of-type(11)::before {
	content: 'klik dan..';
	position: absolute;
	right: 1.5em;
	top: .5em;
	font-family: 'Creepster', cursive;
	font-size: 1.5em;
	animation-name: textVerschijnen;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}




header ul {
	list-style-type: none;
}

header nav a {
	text-decoration: none;
	margin: 15px 0 15px 0;
}

header div a {
	text-decoration: none;
	font-size: 5vw;
	color: var(--accentGroen);
	font-family: 'Special Elite', cursive;
}

header div a:focus {
	outline: none;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	padding: 1vw;
	margin: 1vw;
}

header div a h1 {
	letter-spacing: .1em;
	font-size: 5vw;
	margin: 15px 15px 0 15px;
	color: var(--textKleur);
}

header div p {
	font-family: 'Barlow', sans-serif;
	color: var(--textKleur);
	font-size: calc(12px + 1.4vw); /* stackoverflow question: How to set min-font-size in CSS */
	margin: 0 15px;
}

header div p:focus {
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	padding: 1vw;
	margin: 1vw;
}

/****************/
/* NAV STYLING */
/****************/

header nav {
	position: relative;
	left: 0;
	right: 0;
	top: 0;
}

header nav ul {
	position: relative;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
	padding: 1em;
	gap: .5em;
	display: none;
}

header nav li {
	padding: .3em;
	margin: .3em;
	color: var(--navlinkcolor);
}

/****************/
/* NAV LINK STYLING */
/****************/

header nav li:hover {	
	color: var(--hoverKleur);
	font-weight: bold;
	transform: scale(1.2);
	transition: .3s ease-in-out;
}

header nav li a {
	color: var(--navlinkcolor);
	text-transform: lowercase;
}

header nav li a:hover {
	color: var(--hoverKleur);
}

header nav li a:focus {
	color: var(--selectedKleur);
	outline: none;
	font-weight: bold;
	transform: scale(1.2);
	transition: .3s ease-in-out;
}

header nav li:focus {
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
	transform: scale(1.2);
	transition: .3s ease-in-out;
}

/****************/
/* NAV BUTTON STYLING */
/****************/

header nav button {
	position: absolute;
	z-index: 5;
	top: 95%;
	left: 50%;
	transform: translateX(-50%);
	border-radius: .4em;
	border: 3px solid var(--accentGroen);
	background-color: transparent;
	padding: .5em 2em;
	font-family: 'Barlow', sans-serif;
	color: var(--textKleur);
	font-size: 1.2em;
	color: var(--accentGroen);
	box-shadow: 4px 4px 11px -3px var(--accentBlauw);
}

header nav button:hover {
	border-color: 4px solid var(--hoverKleur);
	color: var(--hoverKleur);
	font-weight: bold;
	transition: .3s ease-in-out;
	cursor: pointer;
	box-shadow: 4px 4px 11px -3px var(--accentGroen);
}

header nav button:active {
	border-color: 4px solid var(--hoverKleur);
	color: var(--hoverKleur);
	font-weight: bold;
	transition: .3s ease-in-out;
	cursor: pointer;
	box-shadow: 2px 2px 11px -3px var(--accentGroen);
}

header nav button:focus {
	outline: none;
	border-color: var(--selectedKleur);
	color: var(--selectedKleur);
}

/****************/
/* NAV CLASSLIST STYLING */
/****************/

header nav ul.toonMenu {
	position: relative;
	background-color: white;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
	padding: 1em;
	gap: .5em;
	background-color: var(--achtergrond);
}

/****************/
/* MEDIAQUERY STYLING */
/****************/

@media (min-width:38em) {
	header nav ul.toonMenu {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width:57em) {
	header nav ul {
		display: flex;
		justify-content: space-around;
		background-color: var(--achtergrond);
		border-bottom: 1px solid var(--accentGroen);
		border-top: 1px solid var(--accentGroen);
	}
	header nav button {
		display: none;
	}
	header nav a {
		padding: 1em;
	}
	header nav ul.toonMenu {
		display: flex;
		justify-content: center;
	}
	header h1 {
		font-size: 3vw;
	}
	header div {
		padding: 1vh;
	}
}

/****************/
/* MAIN STYLING 1STE ARTICLE */
/* WORD PARTNER */
/****************/

main {
	margin-top: 5em;
	margin-left: 0;
}

main section:first-of-type article div {
	margin: 0 1em;
}

main section:first-of-type article { 
	margin: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0 -7em;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

main section:first-of-type article img {
	width: 100vw;
	margin: 0;
}

main section:first-of-type article div {
	padding: 0 2em;
	margin: 0;
}

main section:first-of-type article p {
	font-size: 1.1em;
	font-family: 'Barlow', sans-serif;
	line-height: 1.2em;
	margin-top: 0;
	color: var(--textKleur);
}

main section:first-of-type article h2 {
	margin-bottom: .3em;
	color: var(--textKleur);;
	font-size: 1.5em;
}

/****************/
/* 1STE SECTION LINK STYLING */
/****************/

main section:first-of-type article a{
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	/* BOX SHADOW CSS GENERATOR */
	background-color: transparent;
	padding: 1em .8em .8em .8em;
	font-family: 'Special Elite', cursive;
	font-size: 1em;
	color: var(--linkcolor);
	position: absolute;
	right: 2em;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

main section:first-of-type article a:hover{
	position: absolute;
	right: 2em;
	transition: .5s ease-out;
	letter-spacing: 1px;
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
}

main section:first-of-type article a:active {
	padding: .8em .5em .5em .5em;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
}

main section:first-of-type article a:focus {
	padding: .8em .5em .5em .5em; 
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
}

/****************/
/* 2DE SECTION */
/* STATESTIEKEN */
/****************/

main section:nth-of-type(2) {
	margin: 5em 0;
	padding: 8vh 3vw;
	border-radius: .4em;
	display: flex;
	flex-direction: column;
	color: var(--textKleur);
	align-items: center
}

main section:nth-of-type(2) h3 strong {
	color: var(--strongcolor);
}

main section:nth-of-type(2) p strong {
	color: var(--strongcolor);
}

main section:nth-of-type(2) h3 {
	margin: 0 1em 1.5em 1em;
	font-size: 2em;
	color: var(--textKleur);
	text-align: center;
}

main section:nth-of-type(2) article {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 2em;
	background-color: var(--accentLichtBlauw);
	padding: 3vh 4vw;
	border-radius: .4em;
	width: 80vw;
}

main section:nth-of-type(2) article img {
	width: 30vw;
}

main section:nth-of-type(2) article p:first-of-type {
	font-size: 3em;
	font-family: 'Barlow', sans-serif;
	margin: 0;
}

main section:nth-of-type(2) article p {
	margin: 0 1em;
	color: black;
	text-align: center;
}

/****************/
/* MAIN STYLING 3DE SECTION */
/* 	AANMELDEN */
/****************/

main section:nth-of-type(3) div{
	margin-bottom: 6em
}

main section:nth-of-type(3) h3{
	font-size: 1.5em;
	margin: .3em 0;
}

main section:nth-of-type(3) p{
	margin: 0;
}

main section:nth-of-type(3) div article {
	position: relative;
	margin: 3em 2em ;
}

/****************/
/* 3DE SECTION LINK STYLING */
/****************/

main section:nth-of-type(3) div article a{
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	/* BOX SHADOW CSS GENERATOR */
	background-color: transparent;
	padding: 1em .8em .8em .8em;
	font-family: 'Special Elite', cursive;
	font-size: 1em;
	color: var(--linkcolor);
	position: absolute;
	right: 2em;
	bottom: -5em;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

main section:nth-of-type(3) div article a:hover{
	position: absolute;
	right: 2em;
	transition: .5s ease-out;
	letter-spacing: 1px;
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
}

main section:nth-of-type(3) div article a:active {
	padding: .8em .5em .5em .5em;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
}

main section:nth-of-type(3) div article a:focus {
	padding: .8em .5em .5em .5em; 
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
}
/****************/
/* VIDEO LINK STYLING */
/****************/

.player .vp-video-wrapper {
	border-radius: 3em;
}

.vp-center {
	display: block;
}

main section:nth-of-type(3) div iframe  {
	width: 100vw;
	border-radius: .4em;
	margin: 0;
} 

main section:nth-of-type(3) div div p {
	margin: 0 2em;
}

main section:nth-of-type(3) div p a{
	text-decoration: none;
	color: var(--linkVideo);
	font-family: 'Barlow', sans-serif;
}

main section:nth-of-type(3) div p a:hover{
	text-decoration: none;
	color: var(--accentGroen);
	font-family: 'Barlow', sans-serif;
	transition: .5s ease-in-out;
	font-weight: bold;
	letter-spacing: 1px;
}

main section:nth-of-type(3) div p a:focus {
	color: var(--linkVideoFocus);
	outline: none;
}

/****************/
/* 3DE SECTION IMAGES STYLING */
/****************/

main section:nth-of-type(3) div img {
	width: 100vw;
	margin-top: 4em;
	/* bron unsplash : respectivelijk = Toa Heftiba - Davor Nisevic - Fabian Blank - Spencer Pugh */
}

/****************/
/* 4DE SECTION STYLING */
/****************/

main section:nth-of-type(4) {
	margin: 2em 2em;
	border-radius: .4em;
	padding: 10vw;
	background-color: var(--accentLichtBlauw);
}

main section:nth-of-type(4) h3 {
	font-size: 1.5em;
	margin: .3em 0;
	color: black;
}

main section:nth-of-type(4) p {
	color: black;
}

/****************/
/* 4DE SECTION FORM STYLING */
/****************/

main section:nth-of-type(4) form div:first-of-type label {
	color: black;
	font-family: 'Barlow', sans-serif;
}

main section:nth-of-type(4) form div:first-of-type input {
	border: none;
	color: black;
	font-family: 'Barlow', sans-serif;
	margin: .5em 0 .7em 0;
	padding: .5em;
	background-color: transparent;
	border-bottom: 3px solid var(--achtergrond);
	width: 16em;
}

main section:nth-of-type(4) form div:first-of-type input:hover {
	border: none;
	transition:  .3s ease-in-out;
	border-bottom: 3px solid var(--achtergrond);
	background-color: var(--achtergrond);
	border-top-left-radius: .4em;
	border-top-right-radius: .4em;
	transition: .3s ease-in-out;
}

main section:nth-of-type(4) form div:first-of-type input:focus {
	outline: none;
	border-bottom: 3px solid var(--selectedKleur);
	transition: .3s ease-in-out;
	background-color: var(--selectedKleur);
	border-top-left-radius: .4em;
	border-top-right-radius: .4em;
	color: white;
}

/****************/
/* 4DE SECTION SUBMIT STYLING */
/****************/

main section:nth-of-type(4) form div:nth-of-type(2) input{
	box-shadow: 8px 0px 0px 0px var(--achtergrond), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	/* BOX SHADOW CSS GENERATOR */
	background-color: transparent;
	padding: 1em 1.5em .8em 1.5em;
	font-family: 'Special Elite', cursive;
	font-size: 1em;
	text-decoration: none;
	margin-top: .8em;
	border: none;
}

main section:nth-of-type(4) form div:nth-of-type(2) input:hover{
	transition: .5s ease-out;
	cursor: pointer;
	letter-spacing: 1px;
	box-shadow: 8px 0px 0px 0px var(--achtergrond), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
}

main section:nth-of-type(4) form div:nth-of-type(2) input:active {
	padding: .8em 1.3em .5em 1.3em;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
}

main section:nth-of-type(4) form div:nth-of-type(2) input:focus {
	padding: .8em 1.3em .5em 1.3em; 
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
}

/****************/
/* FOOTER STYLING */
/****************/

footer {
	background-color: var(--accentGroen);
	padding: 1em 0;
}

footer nav {
	padding: 1em 2em;
}

footer nav h4 {
	color: var(--achtergrond);
	margin: 1.5em 0 .3em 0;
}

footer nav ul {
	list-style-type: none;
}

/****************/
/* FOOTER LINK STYLING */
/****************/

footer nav ul li a{
	color: var(--achtergrond);
	text-decoration: none;
	font-family: 'Barlow', sans-serif;
}

footer nav ul li a:hover{
	color: var(-footerLink);
	transition: .3s ease-in-out;
	font-weight: bold;
	letter-spacing: 1px;
}

footer nav ul li a:focus{
	color: var(--selectedKleur);
	transition: .3s ease-in-out;
	outline: none;
}

footer nav ul li a:active{
	color: var(--boxShadow);
}

/****************/
/* FOOTER SECTION STYLING */
/****************/

footer section {
	margin: 0 2em;
}

footer section div {
	display: flex;
	justify-content: space-around;
	gap: 1em;
	align-items: center;
	margin: 1em
}

footer section ul li {
	text-decoration: none;
	list-style-type: none;
}

footer section img{
	width: 2em;

}

footer section p {
	color: black;
	font-family: 'Barlow', sans-serif;
}

footer section ul {
	display: flex;
	gap: 1em;
	justify-content: center;
	margin: 0;
	padding: 0;
}

footer section div p {
	color: var(--achtergrond)
}

footer section ul{
	background-color: var(--achtergrond);
	padding: 1em;
	border-radius: .4em;
	position: relative;
	height: 10vh;
}

@keyframes socialMedia{
	0% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(360deg)
	}
}

footer section ul li:hover {
	animation-name: socialMedia;
	animation-duration: 1s;
	transition: cubic-bezier(.95,-0.01,.75,1.61);
}

footer section ul li a:focus {
	outline: none;
	border: 3px solid var(--selectedKleur);
	border-radius: 3em;
	padding: 1.5em .5em .4em .5em;
}




/****************/
/* PRODUCTEN PAGINA STYLING */
/****************/

main.productenHTML section:first-of-type {
	padding: 5vw 5vw 0 5vw; 
	position: relative;
	margin-bottom: 4vh;
}

main.productenHTML section:first-of-type img {
	rotate: 70deg; 
	position: absolute;
	right: 10vw;
	bottom: -12vh;
	width: 55vw;
}

main.productenHTML section:first-of-type p {
	padding-right: 15vw;
}

main.productenHTML section:nth-of-type(2) {
	margin-top: 1em;
}

main.productenHTML section:nth-of-type(2) button {
	margin: 5vw;
	cursor: pointer;
	border-radius: .4em;
	border: none;
	box-shadow: 5px 5px 0px 0px var(--achtergrond);
	position: relative;
	background-color: var(--kaartenKleur);
}

main.productenHTML section:nth-of-type(2) button:hover{
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	border-radius: 0;
	color: black;
	transition: .3s ease-in-out;
}

main.productenHTML section:nth-of-type(2) button:active {
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	border-radius: 0;
}

main.productenHTML section:nth-of-type(2) button:focus {
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
	border-radius: 0;
}



main.productenHTML section:nth-of-type(2) button div{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	padding: 2vw;
	height: 55vh;
}


main.productenHTML section:nth-of-type(2) button div p {
	font-size: 1em;
	text-align: left;
	margin: 0 1em;
}

main.productenHTML section:nth-of-type(2) button div h3 {
	margin: 0;
	font-size: 1.3em;
}

main.productenHTML section:nth-of-type(2) button div a {
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	text-decoration: none;
	font-size: 1em;
	padding: 1em .8em .8em .8em;
	font-family: 'Special Elite', cursive;
	position: none;
	color: black;
}

main.productenHTML section:nth-of-type(2) button div a:hover {
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	font-weight: bold;
	letter-spacing: 1px;
	transition: .3s ease-in-out;
	padding: 1em .8em .8em .8em;
}

main.productenHTML section:nth-of-type(2) button div a:active {
	padding: .8em .5em .5em .5em;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
}

main.productenHTML section:nth-of-type(2) button div a:focus {
	padding: .8em .5em .5em .5em; 
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
}


/****************/
/* Draaien kaarten */
/* W3SCHOOLS CARD FLIP VOOR DE HTML */
/****************/

main.productenHTML section:nth-of-type(2) button article{
	display: none;
}

main.productenHTML section:nth-of-type(2) button.toonKaart {
	animation: none;
}

main.productenHTML section:nth-of-type(2) button.toonKaart div {
	display: none;
}

main.productenHTML section:nth-of-type(2) button.toonKaart article {
	background-color: transparent;
	display: flex;
	justify-content: center;
}

main.productenHTML section:nth-of-type(2) button article ul {
	text-align: left;
}

main.productenHTML section:nth-of-type(2) button article ul{
	padding-inline-start: 0;
}

main.productenHTML section:nth-of-type(2) button article li{
	list-style-type: none;
	font-family:   'Barlow', sans-serif;
}

/****************/
/* NOG NIET BESCHIKBAAR PAGINA STYLING */
/****************/

.nognietbeschikbaar {
	display: flex;
	justify-content: center;
	background-color: var(--accentGroen);
	flex-direction: column;
}

.nognietbeschikbaar section:first-of-type{
	background-color: var(--achtergrond);
	border-radius: .4em;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5vw;
	margin: 5vw;
	position: relative;
}

.nognietbeschikbaar section:first-of-type h1 {
	margin-bottom: 3vh;
}

.nognietbeschikbaar section:first-of-type p {
	padding-bottom: 1vh;
	font-size: .8em;
}

.nognietbeschikbaar section:first-of-type div {
	display: flex;
	align-items: center;
	padding: 0;
	gap: 3vw
}

.nognietbeschikbaar section:first-of-type a {
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	text-decoration: none;
	font-size: 1em;
	padding: 1em 1.3em .8em 1.3em;
	font-family: 'Special Elite', cursive;
	position: none;
	color: black;
}

.nognietbeschikbaar section:first-of-type a:hover {
	box-shadow: 8px 0px 0px 0px var(--accentLichtBlauw), 0px 8px 0px 0px var(--borderRiight), -8px 0px 0px 0px var(--accentTurquaseDonker), 0px 0px 0px 8px var(--accentTurquase), 5px 5px 15px 5px rgba(0,0,0,0);
	font-weight: bold;
	letter-spacing: 1px;
	transition: .3s ease-in-out;
	padding: 1em 1.3em .8em 1.3em;
}

.nognietbeschikbaar section:first-of-type a:active {
	padding: .8em 1em .5em 1em;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
} 

.nognietbeschikbaar section:first-of-type a:focus {
	padding: .8em 1em .5em 1em;
	box-shadow: 8px 0px 0px 0px var(--selected4), 0px 8px 0px 0px var(--selected3), -8px 0px 0px 0px var(--selected2), 0px 0px 0px 8px var(--selectedKleur), 5px 5px 15px 5px rgba(0,0,0,0);
	outline: none;
	animation-name: focusgiddy;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.57,-0.28,.77,1.23);
}

/****************/
/* KOFFIE APPARAAT STYLING */
/* HUBSPOT CSS ANIMATION EXAMPLES NUMMER 8*/
/****************/


.nognietbeschikbaar section:nth-of-type(2) {
	width: 20em;
	height: 18em;
	position: absolute;
	top: calc(50% - -3em);
	left: calc(50% - 10em);
	margin-bottom: 5vh;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type {
	width: 100%;
	background-color: var(--achtergrond);
	height: 5em;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 1em;
}






.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:first-of-type, .nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(3) {
	width: 2em;
	height: 2em;
	position: absolute;
	top: 1em;
	background-color: #231F20;
	border-radius: 50%; 
	z-index: 1;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:first-of-type {
	left: 1em;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(2) {
	left: 1.7em;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(3) {
	left: 4em;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(4) {
	left: 4.7em;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(2), .nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(4){
	width: .6em;
	height: .7em;
	position: absolute;
	top: 3em;
	background-color: var(--accentLichtBlauw);
	z-index: 1;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(5) {
	width: 3em;
	height: 3em;
	position: absolute;
	top: 1em;
	left: 8.5em;
	background-color: var(--accentLichtBlauw);
	border-radius: 50%; 
	border: 5px solid var(--accentTurquase);
	z-index: 1;
}

.nognietbeschikbaar section:nth-of-type(2) div:first-of-type div:nth-of-type(6) {
	width: .5em;
	height: 1.5em;
	position: absolute;
	top: 1em;
	right: 1em;
	background-color: #645F5F;
	box-shadow: -1em 0 0 #645F5F, -2em 0 0 #645F5F;
	z-index: 1;
	border-radius: .1em;
}




.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:first-of-type {
	width: 80%;
	height: 10em;
	position: absolute;
	top: 5em;
	left: calc(50% - 40%);
	background-color: #BDC1BB;
	border-radius: 0;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:first-of-type:before {
	content: "";
	width: 90%;
	height: 5em;
	background-color: #645F5F;
	position: absolute;
	bottom: 0;
	left: calc(50% - 45%);
	border-radius: 1em 1em 0 0;
  }

  .nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(2) {
	width: 6em;
	height: 1.5em;
	position: absolute;
	top: 5em;
	left: calc(50% - 3em);
	background-color: #231f20;
	z-index: 1;
  }

  .nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(2)::before {
	content: "";
	width: 5em;
	height: 1.5em;
	border-radius: 0 0 50% 50%;
	position: absolute;
	bottom: -1.5em;
	left: calc(50% - 2.5em);
	background-color: #231f20;
  }

  .nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(2)::after {
  	content: "";
  	width: 1em;
  	height: 1em;
  	position: absolute;
  	bottom: -2.5em;
  	left: calc(50% - .5em);
  	background-color: #231f20;
	border-radius: 0 0 .1em .1em;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(3) {
	background-color: #231f20;
	width: 4em;
	height: 1em;
	position: absolute;
	border-radius: 0 .3em .3em 0;
	left: 14.5em;
	top: 6.5em;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(3)::after {
	content: '';
	width: 2em;
	height: .5em;
	background-color: #9B9B9B;
	position: absolute;
	left: -2em;
	bottom: .25em;
}

@keyframes stromen {
	0% {
		height: 0;
		opacity: 1;
	}
	24% {
		height: 0;
		opacity: 1;
	}
	25% {
		height: 3em;
		opacity: 1;
	}
	34% {
		height: 5.3em;
		opacity: 1;
	}
	75% {
		height: 5.3em;
		opacity: 1;
	}
	100% {
		height: 5.3em;
		opacity: 0;
	}
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(4) {
	width: 0.6em;
	position: absolute;
	top: 9em;
	left: 9.7em;
	background-color: #2C1313;
	animation-name: stromen;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function:  ease-out;
}

@keyframes stoom1 {
	0% {
		opacity: 0;
		bottom: 6em;
	}
	25% {
		opacity: .0;
		bottom: 6em;
	}
	40% {
		opacity: .4;
	}
	45% {
		opacity: .3;
	}
	50% {
		opacity: 0;
		bottom: 10em
	}
	55% {
		opacity: 0;
		bottom: 8em;
	}
	65% {
		opacity: .2
	}
	80% {
		opacity: .3;
	}
	100% {
		opacity: 0;
		bottom: 9em;
	}
}

@keyframes stoom2 {
	0% {
		opacity: 0;
		bottom: 4.5em;
	}
	25% {
		opacity: .0;
		bottom: 8em;
	}
	40% {
		opacity: .4;
	}
	45% {
		opacity: .3;
	}
	50% {
		opacity: .2;
	}
	60% {
		opacity: 0;
		bottom: 10em
	}
	70% {
		opacity: 0;
		bottom: 8.5em;
	}
	80% {
		opacity: .3;
	}
	100% {
		opacity: 0;
		bottom: 8em;
	}
}

@keyframes stoom3 {
	0% {
		opacity: 0;
		bottom: 3.5em;
	}
	25% {
		opacity: .0;
		bottom: 3.5em;
	}
	40% {
		opacity: .4;
	}
	45% {
		opacity: .3;
	}
	50% {
		opacity: .2;
	}
	55% {
		opacity: 0;
		bottom: 10em
	}
	60% {
		opacity: 0;
		bottom: 4em;
	}
	65% {
		opacity: .2
	}
	80% {
		opacity: .3;
	}
	100% {
		opacity: 0;
		bottom: 9em;
	}
}

@keyframes stoom4 {
	0% {
		opacity: 0;
		bottom: 4.5em;
	}
	25% {
		opacity: .0;
		bottom: 4.5em;
	}
	40% {
		opacity: .4;
	}
	45% {
		opacity: .3;
	}
	50% {
		opacity: .2;
	}
	55% {
		opacity: 0;
		bottom: 9.5em
	}
	60% {
		opacity: 0;
		bottom: 2.5em;
	}
	65% {
		opacity: .2
	}
	80% {
		opacity: .3;
	}
	100% {
		opacity: 0;
		bottom: 7.5em;
	}
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(5), .nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(6), .nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(7), .nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(8){
	position: absolute;
	width: .8em;
	background-color: #D8D8D8;
	border-radius: 50%;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(5) {
	left: 7.5em;
	height: 1.5em;
	animation-name: stoom1;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(6) {
	left: 11em;
	height: 1.5em;
	animation-name: stoom2;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(7) {
	left: 12em;
	height: 1.5em;
	animation-name: stoom3;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(8) {
	left: 8.2em;
	height: 1.5em;
	animation-name: stoom4;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(9) {
	background-color: RGBA(206,209,211,0.24);
	border: 6px solid #f6feff;
	width: 6em;
	height: 3.5em;
	z-index: 1;
	position: absolute;
	border-radius: 0% 2% 36% 38% / 0% 0% 97% 100% ;  /* 9elements.github.io border radius generator */
	top: 11.5em;
	left: 7em
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(9)::before {
	content: '';
	width: 2em;
	height: 2em;
	position: absolute;
	border-radius: 64% 36% 100% 0% / 100% 34% 66% 0%  ; /* 9elements.github.io border radius generator */
	border: 5px solid #f6feff;
	background-color: transparent;
	left: 4.9em;
	top: .2em;
}

@keyframes koffieVullen {
	0% {
		height: 0;
		opacity: 0;
		width: 2.5em;
		left: 1.4em;
	}
	35% {
		height: 0em;
		opacity: 1;
		width: 2.5em;
		left: 1.4em;
	}
	80% {
		height: 2.2em;
		opacity: 1;
		width: 4.5em;
		left: .4em;
	}
	100% {
		opacity: 0;
		width: 4.5em;
		left: .4em;
	}
}

.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(2) div:nth-of-type(9)::after {
	content: '';
	background-color: #2C1313;
	z-index: 3;
	position: absolute;
	border-radius: 0% 2% 36% 38% / 0% 0% 97% 100% ; /* 9elements.github.io border radius generator */
	bottom: .3em;
	animation-name: koffieVullen;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}





.nognietbeschikbaar section:nth-of-type(2) div:nth-of-type(3) {
	position: absolute;
	width: 94%;
	left: calc(50% - 47%);
	top: 15em;
	height: .5em;
	background-color: var(--accentTurquase);
	border-radius: .5em .5em 0 0;
	z-index: 1
}

.nognietbeschikbaar section:nth-of-type(2) > div:nth-of-type(4) {
	position: absolute;
	width: 100%;
	background-color: var(--achtergrond);
	height: 3em;
	top: 15.5em;
	border-radius: 1em;
	z-index: 1;
}





/****************/
/* MEDIAQUERY */
/****************/

@media (min-width:585px) {
	.vp-center {
		display: inline-block
	}
	header div {
		height: 50vh;
	}
	/* 1STE SECTION */
	main section:first-of-type {
		background-color: var(--accentBlauw);
		padding: 8vh 3vw;
		margin-top: 5vh;
		border-radius: .4em;
	}
	main section:first-of-type article { 
		flex-direction: row;
	}
	main section:first-of-type article img {
		width: 40vw;
	}
	/* 3DE SECTION */
	main section:nth-of-type(3) div {
		background-color: var(--accentBlauw);
		border-radius: .4em;
		padding: 5vw;
	}
	main section:nth-of-type(3) div img {
		width: 40vw;
		margin: 0 0 0 5vw
	}
	main section:nth-of-type(3) div:nth-of-type(2) iframe {
		width: 50vw;
		height: 30vh;
		border-radius: .4em;
	}
	main section:nth-of-type(3) div:nth-of-type(2) div {
		margin: 0;
		padding-top: 0;
	}


}

@media (min-width:375px) {
	main.productenHTML section:first-of-type img {
		width: 20vw;
	}
	main.productenHTML section:nth-of-type(2) {
		margin-top: 1em;
	}
	main.productenHTML section:nth-of-type(2) button div img {
		width: 55vw;
	}
}

@media (min-width:585px) 	/* PRODUCTENPAGINA */{
	main.productenHTML section:first-of-type {
		padding: 5vw; 
		position: relative;
	}
	main.productenHTML section:first-of-type img {
		width: 10vw;
		rotate: 70deg; 
		position: absolute;
		right: 3vw;
		bottom: -5vh;
	}
	main.productenHTML section:nth-of-type(2) {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 5vw;
		padding: 5vw;
	}
	main.productenHTML section:nth-of-type(2) button {
		margin: 0
	}
	main.productenHTML section:nth-of-type(2) button div {
		padding: 2vw;
		width: auto;
		height: 55vh;
		display: flex;
		flex-direction: column;
		align-items: space-around;
		justify-content: space-around;
		margin: 0;
	}
	main.productenHTML section:nth-of-type(2) button div h3{
		font-size: 1.3em;
		margin: 0;
	}
	main.productenHTML section:nth-of-type(2) button div p{
		font-size: 1em;
		text-align: left;
	}
	main.productenHTML section:nth-of-type(2) button div img {
		width: 15vw;
		height: 10vw;
	}
	section:nth-of-type(2) button.toonKaart {
		height: 55vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	section:nth-of-type(2) button.toonKaart article {
		padding: 0;
		margin: 0;
		width: 10vw;
	}
	main section:nth-of-type(3) div article a {
		bottom: -1em
	}
}


@media (min-width:1190px) {
	main {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	header div {
		height: 90vh;
	}
	header div p {
		padding: 0 2vw;
	}
	header div a {
		padding: 2vw 2vw 0 0;
	}
	header a {
		font-size: 1.5em;
		padding: 2vw;
	}
	header a:hover {
		font-weight: bold;
	}
	main a {
		font-size: 1.5em;
		padding: 2vw;
	}
	main a:hover {
		font-weight: bold;
	}
	footer li {
		padding: .3em;
	}
	footer a{
		font-size: 1em;
	}
	footer a:hover{
		font-weight: bold;
	}
	/* 1STE SECTION */
	main {
		margin: 0 8em;
	}
	main section:first-of-type {
		background-color: var(--accentBlauw);
		padding: 8vh 3vw;
		margin-top: 5vh;
		border-radius: .4em;
	}
	main section:first-of-type article { 
		flex-direction: row;
		gap: 5em;
	}
	main section:first-of-type article img {
		width: 30vw;
	}
	main section:first-of-type article a {
		position: absolute;
		right: 2em;
	}
	main section:first-of-type article a:hover {
		right: 2em;
	}
	/* 2DE SECTION */
	main section:nth-of-type(2) {
		margin: 5em 0;
		background-color: var(--accentBlauw);
		padding: 8vh 3vw;
		border-radius: .4em;
		display: flex;
		flex-direction: column;
		color: var(--textKleur);
		width: 100%;
	}
	main section:nth-of-type(2) article p {
		color: black;
	}
	main section:nth-of-type(2) div {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		width: 15vw;
		gap: 1vw;
	}
	main section:nth-of-type(2) article {
		width: 25vw;
		background-color: var(--achtergrond);
		padding: 4vw;
	}
	main section:nth-of-type(2) article img {
		width: 15vw;
	}
	/* 3DE SECTION */
	main section:nth-of-type(3) div {
		display: flex;
		gap: 5vw;
		align-items: flex-start;
		background-color: var(--accentBlauw);
		border-radius: .4em;
		padding: 4vw;
	}
	main section:nth-of-type(3) div article {
		margin: 2em 0;
		padding: 4vw;
	}
	main section:nth-of-type(3) div img {
		width: 36vw;
	}
	main section:nth-of-type(3) div:nth-of-type(2) {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;	
	}
	main section:nth-of-type(3) div:nth-of-type(2) article{
		padding-top: 6em;
		margin: 0;
	}
	main section:nth-of-type(3) div:nth-of-type(2) div {
		display: block;
		background-color: transparent;
		padding: 0;
	} 
	section:nth-of-type(3) div div p a {
		font-size: 1em;
		padding: 0;
	}
	section:nth-of-type(3) div div p a:hover {
		font-weight: bold;
		padding: 0;
	}
	main section:nth-of-type(3) div:nth-of-type(2) div iframe {
		padding: 0;
		width: 432px;
		height: 243px;
		border-radius: .4em
	} 
	main section:nth-of-type(3) div:nth-of-type(4) {
		flex-direction: row-reverse;
	}
	/* 4DE SECTION */
	main section:nth-of-type(4) {
		width: 60vw;
		padding: 4vw;
		margin-bottom: 15vh;
	}
	main section:nth-of-type(4) h3 {
		font-size: 1.8em;
		text-align: center;
	}
	main section:nth-of-type(4) p {
		text-align: center;
	}
	main section:nth-of-type(4) form div:nth-of-type(1) {
		display: flex;
		gap: 1em;
		justify-content: center;
		align-items: center;
		margin-top: 2em;
	}
	main section:nth-of-type(4) form div:nth-of-type(2) {
		display: flex;
		justify-content: center;
	}
	main section:nth-of-type(4) form div:nth-of-type(2) input {
		font-size: 1.3em;
		padding: 2vh 3vw;
	}
	/* FOOTER SECTION */
	footer nav {
		display: flex;
		justify-content: center;
		gap: 2vw;
	}
	footer nav div:first-of-type {
		width: 30vw;
	}
	footer nav div:nth-of-type(2) {
		width: 25vw;
	}
	footer section:first-of-type div:first-of-type {
		display: flex;
		justify-content: center;
	}
	footer section div img {
		width: 2vw;
	}
	footer section ul:hover li:last-of-type {
		animation: twitterVogel 4s ease-in-out;
		cursor: pointer;
	}
	footer section ul li {
		position: absolute;
	}
	@keyframes twitterVogel{
		0% {
			transform: translate(0, 0);
		}
		5% {
			transform: translate(1vw, -3vh);
		}
		10% {
			transform: translate(2vw, 0vh);
		}
		15% {
			transform: translate(3vw, -4vh);
		}
		20% {
			transform: translate(4vw, 0vh);
		}
		25% {
			transform: translate(5vw, -2vh);
		}
		30% {
			transform: translate(6vw, 0vh);
		}
		35% {
			transform: translate(7vw, -3vh);
		}
		40% {
			transform: translate(8vw, 0vh);
		}
		45% {
			transform: translate(9vw, -2vh);
		}
		50% {
			transform: scaleX(-1);
		}
		100% {
			transform: translate(0, 0);
			transform: scaleX(0);
		}
	}
	footer section ul li:first-of-type {
		left: 34vw;
	}
	footer section ul li:nth-of-type(2) {
		left: 40vw;
	}
	footer section ul li:nth-of-type(4) {
		right: 40vw;
	}
	footer section ul li:last-of-type {
		right: 34vw;
	}
	/* NOG NIET BESCHIKBAAR */
	.nognietbeschikbaar section:first-of-type p {
		padding-bottom: 0;
		font-size: 1.2em;
	}
	.nognietbeschikbaar section:nth-of-type(2) {
		margin-top: 5vh
	}
}