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

button, summary {
	cursor: pointer;
}



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



/* fonts */
@font-face {
	font-family: 'circular';
	src: url('../fonts/circular.woff2') format('woff2');
}

@font-face {
	font-family: 'circular-bold';
	src: url('../fonts/circular-bold.woff2') format('woff2');
}

@font-face {
	font-family: 'nib-semibold';
	src: url('../fonts/nib-semibold-pro.woff2') format('woff2');
}

@font-face {
	font-family: 'nib-semibold-italic';
	src: url('../fonts/nib-semibold-italic-pro.woff2') format('woff2');
}

@font-face {
	font-family: 'nib-bold';
	src: url('../fonts/nib-bold-pro.woff2') format('woff2');
}

@font-face {
	font-family: 'raisonne-demibold';
	src: url('../fonts/raisonne-demibold.woff2') format('woff2');
}



/* kleur */
:root {
	/* kleur achtergrond */
	--color-background-primary:#fcf9f3;
	--color-background-secondary:#f8f3e7;
	--color-background-tertiary:#224229;
	--color-background-quaternary:#63180E;
	
	/* kleur text */
	--color-text:#224229;
	--color-text-secondary:#f8f3e7;

	--color-titel:#224229;
	--color-titel-secondary:#f8f3e7;

	--color-subtitel:#224229;
	--color-subtitel-secondary:#f8f3e7;

	/* kleur button */
	--color-button:#224229;
	--color-button-secondary:#f4ebdb;
	--color-button-tertiary:#f6cfb2;

	--color-button-hover-primary:#ffc0cb;
	--color-button-hover-secondary:#b13043;

	/* kleur radio buttons */
	--color-radio-stone:#e6e8ea;
	--color-radio-clay:#c78356;
	--color-radio-charcoal:#3b4037;
	--color-radio-slate:#b7c7cd;
	--color-radio-indigo:#3b5d7d;

	/* kleur aanbieding */
	--color-aanbieding-new:#018342;
	--color-aanbieding-korting:#23356d;

	/* kleur (a) link */
	--color-link-primary:#224229;
	--color-link-secondary:#f4ebdb;
	--color-link-tertiary:#f6cfb2;

	/* kleur hover & focus (a | links) */
	--color-hover-primary:#ffc0cb;
	--color-hover-secondary:#b13043;
	--color-focus: #b13043;
}







/*------------------------------------------------------------------*/
/*----------------------------Header--------------------------------*/
/*------------------------------------------------------------------*/


/* navigatie, menu en aanbiedingsbalk */
header {
	background-color: var(--color-background-primary);
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	align-items: center;

	padding-bottom: .6em;

	/* maakt het mogelijk om aanbiedingsbalk te verdwijnen bij het scrollen */
	position: sticky;
	top: -2.1em;
}





/* Groene balk | Top van de pagina*/
header p {
	background-color: var(--color-text);

	width: 100%;
	order: -100;

	font-family: 'circular';
	font-size: 13pt;
	line-height: 2em;
	text-align: center;

	padding: 0 .5em;
}


/* aanbiedingslink */
header p a{
	color: var(--color-background-secondary);
}

/* aanbiedingslink hover */
header p a:hover{
	color: var(--color-hover-primary);
}

/* aanbiedingslink focus */
header p a:focus{
	color: var(--color-focus);
}



/* logo bloomscape */
header img {
	width: 10.5em;
	padding-top: .8em;
}



/* icoontje | winkelwagen */
header nav img{
	width: 1.5em;
	justify-content: end;
}


header nav:nth-of-type(2) ul{
	padding-left: 0;
	margin-left: .1em;
	margin-right: 1em;
}


header nav:nth-of-type(2) li{
	list-style: none;
	align-self: center;
}



/* menubutton */
header button {
	order: -50;

	border-radius: 1.2em;
	background-color: var(--color-button);
	color: var(--color-button-secondary);

	padding-left: 1em;
	padding-right: 1em;
	padding-top: .5em;
	padding-bottom: .5em;

	margin-top: .7em;
	margin-left: 1em;

}



/* menu verborgen | mobiele weergave */
header nav:nth-of-type(1) {
	display: flex;
	justify-content: space-between;
	
	position: fixed;

	left: 0;
	top: 0;
	bottom: 0;

	width: 100%;
	max-width: 18.7em;

	background-color: var(--color-background-tertiary);
	transform: translateX(-100%);

	/* de sluit button (X) komt boven in te staan */
	align-items: flex-start;
}



/* opmaak menu */
header nav:nth-of-type(1) ul {
	padding: 0;
	margin-top: 3em;
}

header nav:nth-of-type(1) a {
	font-family: 'raisonne-demibold';
	font-size: 10pt;
	text-decoration: none;
	text-transform: uppercase;
}

header nav:nth-of-type(1) a:hover {
	border: solid 1px var(--color-button-hover-primary);

	border-top: none;
	border-left: none;
	border-right: none;
}

header nav:nth-of-type(1) li{
	list-style: none;
	text-align: left;

	padding: 1em;
}



/* als er op de button gedrukt wordt verplaatst het verborgen gedeelte op het scherm (van links naar rechts) (mobiele weergave) */
header nav:nth-of-type(1).actief{
	transform: translateX(0%);
}

header nav:nth-of-type(1) a{
	color: var(--color-link-secondary);
}



/* sluitbutton menu */
header nav:nth-of-type(1) button{
	order: 1;
	position: static;
	margin-top: .5em;

	font-family: 'circular-bold';
	text-transform: uppercase;
	font-size: 20pt;
	color: var(--color-background-primary);
}



/* navigatie op desktop weergave */
@media (min-width:60em) {


	/* verwijdering van de padding zodat boven als onder evenveel witruimte heeft */
	header {
		padding-bottom: 0;
	}


	/* menubutton wordt verwijderd/onzichtbaar */
	header button {
		display: none;
	}


	/* logo bloomscape */
	header img {
		width: 10.5em;
		padding-top: .8em;
		margin-left: 2em;
		}


	/* Opmaak mobiele menu wordt op navigatie desktop weergave geplaatst (opmaak veranderd dus) */
	header nav:nth-of-type(1) {
		position: static;
		background: none;
		transform: none;
		justify-content: center;

	
		width: 60%;
		max-width: 50em;

		/* grid (menu onderdelen) verticaal centreren op de pagina */
		justify-content: center;
	}
	

	/* opmaak koppelingen dat uit het menu op de navigatie balk geplaatst wordt (lijst wordt verticaal naast elkaar geplaatst)*/
	header nav:nth-of-type(1) ul {
		display: flex;
		justify-content: center;

		padding-left: 0;
		margin-top: 0;
	}


	/* kleur verandering dat zichtbaar is op lichte achtergrond */
	header nav:nth-of-type(1) a{
		color: var(--color-background-tertiary);
	}


	/* hover en focus states */
	header nav:nth-of-type(1) a:hover {
		color: var(--color-button-hover-secondary);
		border-color: var(--color-background-tertiary);
	}


	header nav:nth-of-type(1) a:focus {
		color: var(--color-focus);
	}


	/* verwijderen van linkjes die niet in de navigatie balk staan. */
	header nav:nth-of-type(1) li:nth-of-type(6), li:nth-of-type(7), li:nth-of-type(8){
		display: none;
	}

	
	/* sluitbutton niet nodig op desktopversie */
	header nav:nth-of-type(1) button{
		display: none;
	}
}

/*------------------------------------------------------------------*/
/*-------------------------Einde-Header-----------------------------*/
/*------------------------------------------------------------------*/








/*------------------------------------------------------------------*/
/*------------------------------Main--------------------------------*/
/*------------------------------------------------------------------*/

main {
	background-color: var(--color-background-primary);
}

/* titel verborgen | screenreader */
h1 {
	display: none;
}



/*------------------------------------------------------------------*/
/*----------------------------Section 1----------------------------*/
/*------------------------------------------------------------------*/


/* secttion 1 | intro pagina | Mobiel weergave */
main section:nth-of-type(1) {
	background-image: url("../images/afb_overig/Achtergrondsafbeelding_Bloomscape.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	padding-top: 5em;
	padding-bottom: 6em;

	padding-left: 3em;
	padding-right: 3em;

	/* geeft een donkere laag over de achtergrondsafbeelding */
	background-color: #777;
	background-blend-mode: multiply;

}


/* secttion 1 | intro pagina | Computer weergave */
@media screen and (min-width: 551px) {
	main section:nth-of-type(1) {
		background-position: right;

		padding-top: 11.5em;
		padding-bottom: 11.5em;
	}
}




/* subtitel/titel | Start your plant journey this new year */
main section:nth-of-type(1) h2 {
	font-family: 'nib-semibold';
	font-size: 28pt;
	line-height: 1.5em;

	color: var(--color-titel-secondary);

	margin-bottom: 0.5em;

	/* stuk tekst wordt bij specifieke plek afgebroken */
	max-width: 100%;
	width: 14em;
}


/* subtekst */
main section:nth-of-type(1) p {
	font-family: 'circular';
	font-size: 15pt;
	line-height: 1.5em;

	color: var(--color-text-secondary);

	margin-bottom: 2.5em;

	max-width: 100%;
	width: 24em;
}



/* linkbuttons naar andere pagina | shop beginner plants & shop all plants */
main section:nth-of-type(1) ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: .5em;

	padding-left: 0;
}


main section:nth-of-type(1) li {
	list-style: none;
}


@media screen and (max-width: 550px) {
	main section:nth-of-type(1) li:nth-of-type(1) {
		margin-bottom: 3.2em;
	}
}


/* opmaak linkbuttons */
main section:nth-of-type(1) a {
	color: var(--color-text);
	background-color: var(--color-button-secondary);


	font-family: 'raisonne-demibold';
	font-size: 11pt;
	text-decoration: none;
	text-transform: uppercase;


	padding-left: 2.5em;
	padding-right: 2.5em;

	padding-top: 1.1em;
	padding-bottom: 1.1em;

	border-radius: 2em;
}


/* 2de linkbutton heeft ander kleur */
main section:nth-of-type(1) li:nth-of-type(2) a {
	background-color: var(--color-button-tertiary);
}



/* hover,active,focus linkbuttons | section 1 */
main section:nth-of-type(1) li:nth-of-type(1) a:hover {
	background-color: pink;
}

main section:nth-of-type(1) li:nth-of-type(1) a:active {
	background-color: pink;
}

main section:nth-of-type(1) li:nth-of-type(1) a:focus {
	background-color: rgb(177, 48, 67);
	color: white;
}



main section:nth-of-type(1) li:nth-of-type(2) a:hover {
	background-color: pink;
}

main section:nth-of-type(1) li:nth-of-type(2) a:active {
	background-color: pink;
}

main section:nth-of-type(1) li:nth-of-type(2) a:focus {
	background-color: rgb(177, 48, 67);
	color: white;
}


/*------------------------------------------------------------------*/
/*-----------------------Einde-Section-1----------------------------*/
/*------------------------------------------------------------------*/












/*------------------------------------------------------------------*/
/*----------------------------Section 2-----------------------------*/
/*------------------------------------------------------------------*/


/* secttion 2 | as seen in */
section:nth-of-type(2) {
	background-color: var(--color-background-secondary);

	padding-top: 2em;
	padding-bottom: 2em;

	padding-left: 1.5em;
	padding-right: 1.5em;
}


/* subtitel | as seen in */
section:nth-of-type(2) h2 {
	color: var(--color-text);

	text-align: center;
	font-family: 'raisonne-demibold';
	text-transform: uppercase;
	font-size: 11pt;

	margin-bottom: 1.5em;
}


/* onderdeel logo's */
main section:nth-of-type(2) ul {
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.5em;

	padding-left: 0;
}


main section:nth-of-type(2) li {
	/* mobiele weergave 2 logo's per rij te zien */
	flex-basis: 50%;

	list-style: none;
	display: flex;
	justify-content: center;
}

@media screen and (min-width: 750px) {
	main section:nth-of-type(2) li {
		/* computer weergave 4 logo's per rij te zien */
		flex-basis: 25%;
	}
}


/* logo afbeeldingen */
section:nth-of-type(2) img {
	width: 8em;
} 


/* hover over een logo laat onderlijn zien */
section:nth-of-type(2) a:hover {
	border: solid 2px var(--color-background-tertiary);
	border-top: none;
	border-left: none;
	border-right: none;
}



/*------------------------------------------------------------------*/
/*-----------------------Einde-Section-2----------------------------*/
/*------------------------------------------------------------------*/









/*------------------------------------------------------------------*/
/*----------------------------Section 3-----------------------------*/
/*------------------------------------------------------------------*/


/* section 3 | Bestsellers */
section:nth-of-type(3) {
	background-color: var(--color-background-primary);

	padding-left: 1.5em;
	padding-right: 1.5em;

	padding-top: 3.5em;
	padding-bottom: 3em;
	
}


/* formaat section 3 veranderd in computer weergave */
@media screen and (min-width: 750px) {
	section:nth-of-type(3) {
		padding-left: 4em;
		padding-right: 4em;

		/* inhoud staat gecentreerd en heeft een maximale breedte, voorbij de breedte wordt opgevuld met witruimte */
		max-width: 100%;
		margin: auto;
		width: 1450px;
	}
}




/* section 3 subtitel */
section:nth-of-type(3) h2 {
	color: var(--color-background-tertiary);

	font-family: 'nib-semibold';
	font-size: 24pt;
}


/* 'shop now' link */
section:nth-of-type(3) > p {
	
	margin-bottom: 1.5em;
	text-align: right;

	font-family: 'nib-semibold';
	font-size: 16pt;

}


section:nth-of-type(3) > p a {
	color: var(--color-text);
}

section:nth-of-type(3) > p a:hover {
	color: var(--color-aanbieding-new);
}




/* Aanbod producten*/
section:nth-of-type(3) > ul{
	display: flex;
	overflow: auto;
	max-width: 100%;
	padding: 0;
}


section:nth-of-type(3) > ul > li{
	margin-right: 1em;
	list-style: none;
}

@media screen and (min-width: 750px) {
	section:nth-of-type(3) > ul > li{
		margin-right: 2em;
		list-style: none;
	}
}




/* Afbeelding producten */
section:nth-of-type(3) > ul > li img {
	width: 100%;
	height: 236px;
}


@media screen and (min-width: 750px) {
	section:nth-of-type(3) > ul > li img{
		width: 324px;
		height: 389px;
	}
}




/* Gegevens prodcuten */
/* moet nog een link (a) eraan toevoegen | NIET VERGETEN */
section:nth-of-type(3) div {
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;

	margin-bottom: 2em;
}

section:nth-of-type(3) p:nth-of-type(2), p:nth-of-type(4) {
	text-align: right;
}

section:nth-of-type(3) div fieldset {
	display: flex;
	margin: 0;
	padding-left: 0;
}





/* styling radio buttons*/
input[type=radio] {
	appearance: none;
	background-color: #fff;
	margin: 0;

	width: 1.2em;
	height: 1.2em;

	margin-left: .4em;
	margin-right: .4em;

	border-radius: 60%;

	display: grid;
	place-content: center;
}


/* radio button omlijning (geslecteerd) */
input[type=radio]::before {
	content: "";
	width: 1.8em;
	height: 1.8em;

	border-radius: 60%;
	transform: scale(0);

	border: 0.15em solid var(--color-background-tertiary);
}

input[type=radio]:checked:before {
	transform: scale(1);
}


/* radio buttons kleur en formaat */
input[type=radio]:nth-of-type(1) {
	box-shadow: inset 1em 1em var(--color-radio-stone);
}

input[type=radio]:nth-of-type(2) {
	box-shadow: inset 1em 1em var(--color-radio-clay);
}

input[type=radio]:nth-of-type(3) {
	box-shadow: inset 1em 1em var(--color-radio-charcoal);
}

input[type=radio]:nth-of-type(4) {
	box-shadow: inset 1em 1em var(--color-radio-slate);
}

input[type=radio]:nth-of-type(5) {
	box-shadow: inset 1em 1em var(--color-radio-indigo);
}


section:nth-of-type(3) div > a {
	border-radius: 1.2em;
	background-color: var(--color-button);
	color: var(--color-button-secondary);

	padding-left: 1em;
	padding-right: 1em;
	padding-top: .5em;
	padding-bottom: .5em;

	text-align: center;
	text-decoration: none;
}

section:nth-of-type(3) div > a:hover {
	background-color: var(--color-button-hover-primary);
	color: var(--color-text);
}

section:nth-of-type(3) div > a:focus {
	background-color: var(--color-focus);
}


/*------------------------------------------------------------------*/
/*-----------------------Einde-Section-3----------------------------*/
/*------------------------------------------------------------------*/









/*------------------------------------------------------------------*/
/*----------------------------Section 4-----------------------------*/
/*------------------------------------------------------------------*/


/* section 4 | video */
section:nth-of-type(4) {
	background-color: var(--color-background-primary);

	padding-left: 1.5em;
	padding-right: 1.5em;

	margin-top: 2em;
	margin-bottom: 2em;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;

}

/* desktopweergave */
@media screen and (min-width: 750px) {
	section:nth-of-type(4) {
		padding-left: 4em;
		padding-right: 4em;

		padding-top: 4em;
		padding-bottom: 4em;

		max-width: 100%;
		margin: auto;
		width: 1450px;

		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}


/* volorde van video en tekst omwisselen */
section:nth-of-type(4) > div:nth-of-type(1) {
	order: 2;
	margin-top: 1em;
}


/* desktopweergave */
@media screen and (min-width: 750px) {
	section:nth-of-type(4) > div:nth-of-type(1) {
		margin-left: 2em;
		margin-right: 2em;
		margin-top: 0;
	}
}


/* Video responsive maken */
section:nth-of-type(4) div:nth-of-type(2) {
	position: relative;
  	width: 100%;
  	overflow: hidden;
  	padding-top: 56.25%;
}


/* h2 en h3 grid gemaakt om de volorde van de 2 elementen om te wisselen */
section:nth-of-type(4) div div {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}



section:nth-of-type(4) h2 {
	color: var(--color-subtitel);
	
	font-family: 'nib-semibold';
	font-size: 24pt;
	line-height: 1.2em;

	order: 2;
}


section:nth-of-type(4) h3 {
	color: var(--color-subtitel);
	
	font-family: 'raisonne-demibold';
	font-size: 11pt;
	text-transform: uppercase;

	margin-bottom: 1.5em;

	order: 1;
}



section:nth-of-type(4) p {
	margin-bottom: 2em;

	font-family: 'circular';
	font-size: 11pt;

	line-height: 2em;

	margin-bottom: 3em;
	margin-top: 1em;

	color: var(--color-text);
}



section:nth-of-type(4) a {
	color: var(--color-button-secondary);
	background-color: var(--color-button);

	font-family: 'raisonne-demibold';
	font-size: 11pt;
	text-decoration: none;
	text-transform: uppercase;

	padding-left: 2.5em;
	padding-right: 2.5em;
	padding-top: 1.1em;
	padding-bottom: 1.1em;

	border-radius: 2em;
}


section:nth-of-type(4) a:hover {
	background-color: pink;
	color: var(--color-button);
}

section:nth-of-type(4) a:focus {
	background-color: rgb(177, 48, 67);
	color:white;
}


/* code die helpt om video responsive te maken */
iframe {
	position: absolute;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	width: 100%;
  	height: 100%;
  	border: none;
}

/*------------------------------------------------------------------*/
/*-----------------------Einde-Section-4----------------------------*/
/*------------------------------------------------------------------*/









/*------------------------------------------------------------------*/
/*----------------------------Section 5-----------------------------*/
/*------------------------------------------------------------------*/



/* section 5 | More ways to find the perfect plant */
/* opbouw mobiele weergave */
section:nth-of-type(5) {
	margin-top: 4em;
	margin-bottom: 4em;

	padding-left: 2em;
	padding-right: 2em;
}


/* opbouw desktop weergave */
@media screen and (min-width: 750px) {
	section:nth-of-type(5) {
		padding-left: 4em;
		padding-right: 4em;

		max-width: 100%;
		margin: auto;
		width: 1450px;
	}
}


/* subtitel more ways to find the perfect plant */
section:nth-of-type(5) h2 {
	background-color: var(--color-background-primary);

	font-family: 'nib-semibold';
	color: var(--color-subtitel);
	font-size: 20pt;
	margin-bottom: 1em;
}


section:nth-of-type(5) ul{
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
}


/* volorde afbeeldingen (2 naast elkaar) */
section:nth-of-type(5) li {

	list-style: none;
	flex-basis: 50%;
}


/* volorde afbeeldingen (4 naast elkaar) */
@media screen and (min-width: 750px) {
	section:nth-of-type(5) li {

		list-style: none;
		flex-basis: 25%;
	}
}


/* opbouw afbeelding */
section:nth-of-type(5) img{
	width: 100%;
	padding-left: 1em;
	padding-right: 1em;
}

section:nth-of-type(5) img:nth-of-type(1){
	padding-left: 0;
	padding-right: 1em;
}

section:nth-of-type(5) img:nth-of-type(4){
	width: 100%;
	padding-left: 1em;
	padding-right: 0em;
}


/* ondertitel afbeelding */
section:nth-of-type(5) figcaption {

	text-align: center;
	font-family: 'nib-semibold';

	font-size: 12pt;
	margin-right: 1em;
}

/*------------------------------------------------------------------*/
/*-----------------------Einde-Section-5----------------------------*/
/*------------------------------------------------------------------*/








/*------------------------------------------------------------------*/
/*----------------------------Section 6-----------------------------*/
/*------------------------------------------------------------------*/

section:nth-of-type(6) {
	background-color: var(--color-background-primary);

	padding-left: 1.5em;
	padding-right: 1.5em;

	margin-top: 2em;
	margin-bottom: 2em;
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;

	row-gap: 2.2em;

}

@media screen and (min-width: 750px) {
	section:nth-of-type(6) {
		padding-left: 4em;
		padding-right: 4em;

		padding-top: 4em;
		padding-bottom: 4em;

		max-width: 100%;
		margin: auto;
		width: 1450px;

		display: grid;
		grid-template-columns: 1fr 1fr;

		column-gap: 1em;
	}
}



section:nth-of-type(6) h2 {
	color: var(--color-subtitel);
	
	font-family: 'nib-semibold';
	font-size: 24pt;
	line-height: 1.2em;

	order: 2;
}


section:nth-of-type(6) h3 {
	color: var(--color-subtitel);
	
	font-family: 'raisonne-demibold';
	font-size: 11pt;
	text-transform: uppercase;

	margin-bottom: 1.5em;

	order: 1;
}



section:nth-of-type(6) p {
	margin-bottom: 2em;

	font-family: 'circular';
	font-size: 11pt;

	line-height: 2em;

	margin-bottom: 3em;
	margin-top: 1em;

	color: var(--color-text);
}



section:nth-of-type(6) a {
	color: var(--color-button-secondary);
	background-color: var(--color-button);

	font-family: 'raisonne-demibold';
	font-size: 11pt;
	text-decoration: none;
	text-transform: uppercase;

	padding-left: 2.5em;
	padding-right: 2.5em;
	padding-top: 1.1em;
	padding-bottom: 1.1em;

	border-radius: 2em;
}

section:nth-of-type(6) a:hover {
	background-color: pink;
	color: var(--color-button);
}

section:nth-of-type(6) a:focus {
	background-color: rgb(177, 48, 67);
	color:white;
}


section:nth-of-type(6) img {
  	width: 100%;
	margin: auto;

}


/*------------------------------------------------------------------*/
/*-----------------------Einde-Section-6----------------------------*/
/*------------------------------------------------------------------*/








/*------------------------------------------------------------------*/
/*---------------------------footer---------------------------------*/
/*------------------------------------------------------------------*/



/* achtergrondskleur footer */
footer {
	background-color: var(--color-background-tertiary);
}



/* section wordt door 4 stukjes gedeeld onderelkaar */
footer section:nth-of-type(1) {
	background-color: var(--color-background-tertiary);
	color: var(--color-background-secondary);

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr .25fr;

	row-gap: 5.5em;
	column-gap: 3em;

	padding-top: 3em;
	padding-left: 1.5em;

}

/* section word door 2 stukjes verdeeld */
/* max moet nog naar min */
@media screen and (max-width: 600px) {
	footer section:nth-of-type(1) {
		background-color: var(--color-background-tertiary);
		color: var(--color-background-secondary);

		display: grid;
		grid-template-rows: .25fr 1fr .25fr .25fr;
		grid-template-columns: 0fr;

		row-gap: 2em;

		padding-top: 3em;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}

/* section staan alle stukjes naast elkaar */
@media screen and (min-width: 1000px) {
	footer section:nth-of-type(1) {
		background-color: var(--color-background-tertiary);
		color: var(--color-background-secondary);

		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 0fr;

		padding-top: 3em;
		padding-left: 1.5em;
		padding-right: 1.5em;

		max-width: 100%;
		margin: auto;
		width: 1450px;
	}
}


/* opmaak kopjes */
footer section:nth-of-type(1) h3 {
	font-family: 'raisonne-demibold';
	font-size: 9pt;
	text-decoration: none;
	text-transform: uppercase;
	opacity: 70%;
	margin-bottom: 1.5em;
}

/* opmaak tekst/links */
footer section:nth-of-type(1) p {
	text-decoration: none;
	color: var(--color-button-secondary);
	font-family: 'circular';

	margin-bottom: 1em;
}


footer section:nth-of-type(1) label {
	font-family: 'circular';
}

footer section:nth-of-type(1) input {
	background-color: var(--color-background-tertiary);
	
	
	border-color: rgb(251, 249, 244);
    border-style: solid;
    border-width: 1px;
    border-radius: 0px;

	height: 2em;
}


footer section:nth-of-type(1) a {
	text-decoration: none;
	color: var(--color-button-secondary);
	font-family: 'circular';
}

/* hover en focus */
footer section:nth-of-type(1) a:hover {
	color: var(--color-button-secondary);
	font-family: 'circular';
	border: solid 1px var(--color-background-primary);

	border-top: none;
	border-left: none;
	border-right: none;
}

footer section:nth-of-type(1) a:focus {
	color: var(--color-focus);
}




/* opmaak lijst */
footer section:nth-of-type(1) ul {
	padding-left: 0;
}


footer section:nth-of-type(1) li {
	list-style: none;
	margin-bottom: 1em;
}




/* 2de sectie van footer */
footer section:nth-of-type(2) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	justify-content: space-between;

	background-color: var(--color-background-tertiary);
	color: var(--color-background-secondary);
}


/* grid zo aangepast om term & policy naar sociaalmedia icoontjes op dezelfde regel te plaatsen */
@media screen and (max-width: 600px) {
	footer section:nth-of-type(2) {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
}


@media screen and (min-width: 1000px) {
	footer section:nth-of-type(2) {
		max-width: 100%;
		margin: auto;
		width: 1450px;

		padding-left: 2em;
		padding-right: 4em;
	}
}


/* opmaak lijst en afbeelding */
footer section:nth-of-type(2) ul {
	display: flex;
	padding-left: 0;
}

footer section:nth-of-type(2) ul:nth-of-type(2) {
	align-items: center;
	margin-top: 1em;
	justify-content: end;

}

footer section:nth-of-type(2) li {
	margin-left: 1em;
	list-style: none;
}


footer section:nth-of-type(2) a {
	color: var(--color-background-primary);
}


footer section:nth-of-type(2) img {
	width: 1.2em;
	height: auto;
	margin-left: 1em;
}