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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Gotham", Tahoma, Arial, Helvetica, sans-serif;
  list-style: none;
}

:root{
  --lichtgroen: #80bd1d;
  --donkergroen: #227647;
  --backgroundgroen: #e5f1d6;
  --lichtgrijs: #ddd;
  --tekst: #333;
}

a{
  color: var(--tekst);
  text-decoration: none;
}


/* ---------- */
/* HEADER EN ALLES WAT ERIN STAAT */
/* ---------- */
header{
  position: relative;
}

nav{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

nav > ul{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav > ul > li:nth-of-type(3) > img{
  width: 5.6em;
}

nav > ul > li:nth-of-type(4) > img{
  width: 2.8em;
}

/* Menu uitklappen */
nav > ul > li > button{
  color: var(--tekst);
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  background-color: white;
}

nav > ul > li > form{
  transform:translateY(-100%);
  display: none;
  position: absolute;
  left:0;
	right:0;
	top:0;
}

nav > ul > li > form > fieldset{
  width: 100%;
  border: none;
}

nav > ul > li > form > fieldset > legend{
  width: 100%;
  background-color: var(--lichtgroen);
}

nav > ul > li > form > fieldset > legend > button{
  color: white;
  font-size: 1.2em;
  padding: 0.5em;
  background-color: var(--lichtgroen);
  border: none;
}

nav > ul > li > form > fieldset > a{
  color: var(--tekst);
  padding: 0.5em;
  border-bottom: 0.1em solid var(--donkergroen);
  display: flex;
}

nav > ul > li > form.toonMenu{
	transform:translateY(0%);
  z-index: 30;

  display: flex;
  background-color: white;

  height: auto;
  margin: 0;
  box-shadow: 0 0 0.6em var(--lichtgrijs);
}


/* ---------- */
/* 1e SECTION -> PRODUCTEN EN ZOEKBALK */
/* ---------- */
.pagina1 section:nth-of-type(1){
  position: sticky;
  top: 0;
  z-index: 20;
  
  height: 3.8em;
  width: 100%;
  margin-top: 1em;
  
  background-color: #F5F0EC;
}

.pagina1 section:nth-of-type(1) > ul{ 
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.pagina1 section:nth-of-type(1) > ul > li:first-of-type{ 
  margin-top: 1.4em;
  
  color: var(--tekst);
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
}

.pagina1 section:nth-of-type(1) > ul > li:last-of-type{ 
  margin-top: 0.1em;

  color: var(--lichtgrijs);
  font-size: 1em;
}

.pagina1 section:nth-of-type(1) fieldset{
  width: 50%;
  border: none;
  resize: none;
}

.pagina1 section:nth-of-type(1) input{
  display: block;
  margin: 0.4em;
  padding-left: 0.5em;
  height: 3em;
  
  
  font-size: 1em;
  border: 0.1em solid var(--lichtgrijs);

  background-image: url(../images/plus.nl/zoeken.png);
  background-repeat: no-repeat;
  background-size: 2.5em;
  background-position: 7.75em;
}

.pagina1 section:nth-of-type(1) input::placeholder{
  color: var(--tekst);
}

.pagina1 section:nth-of-type(1) input.text{
  resize: none;
}


/* ---------- */
/* 2e SECTION -> BLOKKEN MET INFO */
/* ---------- */
.pagina1 section:nth-of-type(2){
  width: 90%;
  height: auto;

  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12em;
}

.pagina1 section:nth-of-type(2) > ul > li{
  position: relative;
  margin-bottom: 1em;
  padding: 0.5em;
  height: 10em;
}

.pagina1 section:nth-of-type(2) > ul > li > h4{
  max-width: 40%;
  margin: 1em;
  color: var(--tekst);
}

.pagina1 section:nth-of-type(2) > ul > li > a{
  max-width: 50%;
  margin: 1em;
  color: var(--tekst);
}

.pagina1 section:nth-of-type(2) > ul > li > p{
  max-width: 50%;
  margin: 1em;
  color: var(--tekst);
}

.pagina1 section:nth-of-type(2) > ul > li:nth-of-type(1){
  background-image: url(../images/plus.nl/Boodschappenpakket.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.pagina1 section:nth-of-type(2) > ul > li:nth-of-type(2){
  background-image: url(../images/plus.nl/Laagblijvers.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.pagina1 section:nth-of-type(2) > ul > li:nth-of-type(3){
  background-image: url(../images/plus.nl/Wijnshop.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.pagina1 section:nth-of-type(2) > ul > li:nth-of-type(4){
  background-image: url(../images/plus.nl/Homepagebanner.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.pagina1 section:nth-of-type(2) > ul > li:nth-of-type(5){
  background-color: #F2C2C0;
}

.pagina1 section:nth-of-type(2) > ul > li > section{
  position: absolute;
  right: 10%;
  left: 10%;
  top: 6em;

  background-color: white;
  width: 80%;
  height: auto;
  padding: 1em;
  box-shadow: 0 0 0.6em var(--lichtgrijs);

  display: flex;
  z-index: 0;
}

.pagina1 section:nth-of-type(2) > ul > li > section > p{
  color: red;
  border: solid 0.1em red;
  text-transform: uppercase;
  padding: 0.5em;
  height: 100%;
}

.pagina1 section:nth-of-type(2) > ul > li > section > img{
  padding: 0.1em 0.1em;
  width: 50%;
}


/* ---------- */
/* 3e SECTION -> LIJST MET CATEGORIEEN */
/* ---------- */
.pagina1 section:nth-of-type(3) {
  position: relative;
  width: 90%;
  height: auto;

  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2em;
}

.pagina1 section:nth-of-type(3) > ul > li > a{
  color: var(--tekst);
  font-size: 1em;
  font-weight: bold;
  padding-left: 1em;
}

.pagina1 section:nth-of-type(3) > ul > li > img{
  width: 3.1em;
  display: flex;
}

.pagina1 section:nth-of-type(3) > ul > li{
  display: flex;
  align-items: center;

  background-color: white;
  box-shadow: 0 0 0.6em var(--lichtgrijs);
  border-radius: 0.2em;

  margin-top: 1em;
  padding: 0.3em;
  margin-bottom: 0.6em;
}

.pagina1 section:nth-of-type(3) > button{
  position: absolute;
  bottom: 0;
  right: 25%;
  left: 25%;

  width: 50%;
  height: 3.6em;
  padding: 0 0.6em;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: white;
  box-shadow: 0 0 0.6em var(--lichtgrijs);
  border: solid 0.2em var(--donkergroen);
  border-radius: 0.2em;
  cursor: pointer;
}

.pagina1 section:nth-of-type(3) > ul > li:nth-of-type(n+11){
  display: none;
}


/* Toevoegen extra categorie */
.pagina1 section:nth-of-type(3) > ul > li.toonRijen{
	transform:translateY(0%);

  display: flex;
  align-items: center;
  background-color: white;
  box-shadow: 0 0 0.6em var(--lichtgrijs);
  border-radius: 0.2em;
  margin-top: 1em;

  padding-top: 0.3em;
  margin-bottom: 0.6em;
}


/* ---------- */
/* 4e SECTION -> ZOEK RECEPT */
/* ---------- */
.pagina1 section:nth-of-type(4){
  position: relative;
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-bottom: 1em;
  background-color: var(--backgroundgroen);
}

.pagina1 section:nth-of-type(4) > h3{
  color: var(--tekst);
  font-size: 1.75em;
  line-height: 1.71;
  
  max-width: 60%;
  margin-left: 0.5em;
  padding-top: 1em;
}

.pagina1 section:nth-of-type(4) > ul{
  display: flex;
  flex-wrap: wrap;
}

.pagina1 section:nth-of-type(4) > ul > li{
  color: var(--tekst);
  font-size: 1.1em;
  line-height: 2.7em;
  z-index: 1;

  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2em 0 0.5em;

  width: 90%;
  height: 2.7em;
  max-width: 20em;
  min-width: 20em;

  background-color: white;
  border: 0.1em solid var(--lichtgroen);
  border-radius: 0.6em;

  position: relative;
  display: flex;
  justify-content: space-between;
}

.pagina1 section:nth-of-type(4) > section{
  position: absolute;
  right: -0.8em;
  top: 0.1em;
  z-index: 1;
  
  width: 9em;
  height: 9em;

  text-align: center;
  background-color: var(--lichtgroen);
  border-radius: 50%;
  margin: .5em;
}

.pagina1 section:nth-of-type(4) > section > p{
  color: white;
  line-height: 1.5;
  
  position: absolute;
  right: 10%;
  left: 10%;
  
  padding: 2.1em 0em;
  max-width: 80%;
}


/* ---------- */
/* 5e SECTION -> CONTACT */
/* ---------- */
.pagina1 section:nth-of-type(5){
  background-color: #F5F0EC;
  padding-top: 1em;
  padding-bottom: 1em;
}

.pagina1 section:nth-of-type(5) > h3{
  color: var(--tekst);
  font-size: 1.5em;
  margin-left: 0.6em;
}

.pagina1 section:nth-of-type(5) > p{
  color: var(--tekst);
  line-height: 1.5;
  
  width: 90%;
  margin-left: 1em;
}

.pagina1 section:nth-of-type(5) > ul{
  display: flex;
  justify-content: space-between;

  width: 60%;
  max-width: 20em;
  margin-left: 1em;
  margin-top: 2em;
}

.pagina1 section:nth-of-type(5) > form{
  display: flex;
  max-width: 30em;
  margin-left: 1em;
  margin-top: 2em;
  border: none;
}

.pagina1 section:nth-of-type(5) > form > fieldset{
  width: 50%;
  border: none;
  resize: none;
}

.pagina1 section:nth-of-type(5) > form > fieldset > label{
  display: block;
}

.pagina1 section:nth-of-type(5) > form > input{
  display: flex;
  align-content: flex-end;
  color: white;
  margin: 0.4em;
  padding: 0 1.2em 0 1.2em;
  
  background-color: var(--donkergroen);
  border: none;
}

.pagina1 section:nth-of-type(5) textarea{
  resize: none;
}


/* ---------- */
/* 6e SECTION -> INFO */
/* ---------- */
.pagina1 section:nth-of-type(6){
  background-color: #EAEAEA;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: 0;
}

.pagina1 section:nth-of-type(6) > ul > li{
  margin-bottom: 1em;
  margin-left: 1em;
  padding: 0.8em;

  color: var(--tekst);
  font-size: 0.8em;
  font-weight: bold;

  border-bottom: 0.1em solid white;
}

.pagina1 section:nth-of-type(6) > ul > li:last-of-type{
  background-color: #F5F5F5;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
}





/* ---------- */
/* VOOR RESPONSIVE DESIGN */
/* ---------- */



/* NAVIGATIE WORDT BREDER */
@media (min-width: 47em){
  nav {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}


/* BLOKKEN MET INFO WORDT BREDER */
@media (min-width: 47em){
  .pagina1 section:nth-of-type(2) > ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
  }

  .pagina1 section:nth-of-type(2) > ul > li:nth-of-type(1){
    grid-column-start: 1;
    grid-column-end: -1;
  }
}


/* LIJST MET CATEGORIEEN WORDT BREDER */
@media (min-width: 47em){
  .pagina1 section:nth-of-type(3) > ul{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 1em;
  }
}


/* ZOEK RECEPT WORDT BREDER */
@media (min-width: 37em){
  .pagina1 section:nth-of-type(4) > section{
    z-index: 10;
  }
}


/* INFO WORDT BREDER */
@media (min-width: 47em){
  .pagina1 section:nth-of-type(6) > ul{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 1em;
    height: 20em;
  }
}




/* =========================
CSS VOOR 2e PAGINA
========================= */



/* ---------- */
/* 1e SECTION -> PRODUCTEN EN ZOEKBALK */
/* ---------- */
.pagina2 section:nth-of-type(1){
  position: sticky;
  top: 0;
  z-index: 10;
  
  height: 3.8em;
  width: 100%;
  margin-top: 1em;
  
  background-color: #F5F0EC;
}

.pagina2 section:nth-of-type(1) > ul{ 
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.pagina2 section:nth-of-type(1) > ul > li:first-of-type{ 
  margin-top: 1.4em;
  
  color: var(--tekst);
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
}

.pagina2 section:nth-of-type(1) > ul > li:last-of-type{ 
  margin-top: 0.1em;

  color: var(--lichtgrijs);
  font-size: 1em;
}

.pagina2 section:nth-of-type(1) fieldset{
  width: 50%;
  border: none;
  resize: none;
}

.pagina2 section:nth-of-type(1) input {
  display: block;
  margin: 0.4em;
  padding-left: 0.5em;
  height: 3em;
  
  
  font-size: 1em;
  border: 0.1em solid var(--lichtgrijs);

  background-image: url(../images/plus.nl/zoeken.png);
  background-repeat: no-repeat;
  background-size: 2.5em;
  background-position: 7.75em;
}

.pagina2 section:nth-of-type(1) input::placeholder{
  color: var(--tekst);
}

.pagina2 section:nth-of-type(1) input{
  resize: none;
}


/* ---------- */
/* 2e SECTION -> BANNER MET AFBEELDING */
/* ---------- */
.pagina2 section:nth-of-type(2){
  background-image: url(../images/plus.nl/Banner2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  height: 8.2em;
  width: 100%;
  transform: none;
  margin-top: 2em;
}

.pagina2 section:nth-of-type(2) > a > p{
  color: var(--tekst);
  font-weight: bold;
  padding: 1em;
  cursor: pointer;
}


/* ---------- */
/* 3e SECTION -> LIJST MET PRODUCTEN */
/* ---------- */
.pagina2 section:nth-of-type(3) {
  position: relative;
  width: 90%;
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2em;
  
}

.pagina2 section:nth-of-type(3) > ul > li > a{
  display: flex;
  background-color: white;
  
  margin-top: 1em;
  margin-bottom: 0.6em;
  padding-top: 0.3em;

  border-bottom: 0.1em solid var(--lichtgrijs);
}

.pagina2 section:nth-of-type(3) > ul > li > a > div{
  margin-left: 1em;
}

.pagina2 section:nth-of-type(3) > h3{
  color: var(--tekst);
  font-size: 1.5em;
  font-weight: bold;
}

.pagina2 section:nth-of-type(3) > ul > li > a > div > p:nth-of-type(1){
  color: var(--donkergroen);
}
.pagina2 section:nth-of-type(3) > ul > li > a > div > p:nth-of-type(3){
  color: #666;
}
.pagina2 section:nth-of-type(3) > ul > li > a > div > p:nth-of-type(4){
  font-size: 1.5em;
  font-weight: bold;
  align-items: flex-end;
}


/* ---------- */
/* 4e SECTION -> CONTACT */
/* ---------- */
.pagina2 section:nth-of-type(4){
  background-color: #F5F0EC;
  padding-top: 1em;
  padding-bottom: 1em;
}

.pagina2 section:nth-of-type(4) > h3{
  color: var(--tekst);
  font-size: 1.5em;
  margin-left: 0.6em;
}

.pagina2 section:nth-of-type(4) > p{
  color: var(--tekst);
  line-height: 1.5;
  
  width: 90%;
  margin-left: 1em;
}

.pagina2 section:nth-of-type(4) > ul{
  display: flex;
  justify-content: space-between;

  width: 60%;
  max-width: 20em;
  margin-left: 1em;
  margin-top: 2em;
}

.pagina2 section:nth-of-type(4) > form{
  display: flex;
  max-width: 30em;
  margin-left: 1em;
  margin-top: 2em;
  border: none;
}

.pagina2 section:nth-of-type(4) > form > fieldset{
  width: 50%;
  border: none;
  resize: none;
}

.pagina2 section:nth-of-type(4) > form > fieldset > label{
  display: block;
}

.pagina2 section:nth-of-type(4) > form > input{
  display: flex;
  align-content: flex-end;
  color: white;
  margin: 0.4em;
  padding: 0 1.2em 0 1.2em;
  
  background-color: var(--donkergroen);
  border: none;
}

.pagina2 section:nth-of-type(4) textarea{
  resize: none;
}


/* ---------- */
/* 5e SECTION -> INFO */
/* ---------- */
.pagina2 section:nth-of-type(5){
  background-color: #EAEAEA;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-top: 0;
}

.pagina2 section:nth-of-type(5) > ul > li{
  margin-bottom: 1em;
  margin-left: 1em;
  padding: 0.8em;

  color: var(--tekst);
  font-size: 0.8em;
  font-weight: bold;

  border-bottom: 0.1em solid white;
}

.pagina2 section:nth-of-type(5) > ul > li:last-of-type{
  background-color: #F5F5F5;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
}



/* ---------- */
/* VOOR RESPONSIVE DESIGN */
/* ---------- */


/* LIJST MET PRODUCTEN WORDT BREDER */
@media (min-width: 47em){
  .pagina2 section:nth-of-type(3) > ul{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 4em;
  }
}

/* INFO WORDT BREDER */
@media (min-width: 47em){
  .pagina2 section:nth-of-type(5) > ul{
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(15em, 1fr));
    grid-gap: 1em;
    height: 20em;
  }
}