body {
   /* color: grey; */
   font-family: Arial, Helvetica, sans-serif;
   /* 12 px nodig voor menu-font */
   font-size: 12px;
}

figure {
   margin: 0;
}


main {
   /* background: #ffffff; */
   color: #111;
   font-size: 15px;
   line-height: 1.3;
}

td {
   padding: 0.3rem;
}

.mnk-menukaart-blz1 {
   background-image: url("../images/Achtergr1.jpg");
   background-position: center;
   background-size: cover;
   /* display: none; */
}

.mnk-menukaart-blz2 {
   background-image: url("../images/Achtergr2.jpg");
   background-position: center;
   background-size: cover;
   /* display: none; */
}

.mnk-menukaart-blz3 {
   /* background-image: url("../images/Achtergr3.jpg"); */
   background-image: url("../testing/images/dessert4.jpeg");
   background-position: center;
   background-size: cover;
   /* display: none; */
}

.mnk-menukaart-blz4 {
   /* background-image: url("../images/ArabischeKoffie4.jpeg"); */
   background-image: url("../images/Fruitsapfruit4.jpeg");
   background-position: center;
   background-size: cover;
   /* display: none; */
}

.mnk-menukaart-blz3>h2,
.mnk-menukaart-blz4>h2 {
   color: white;
}

/* Blad 1 */
.grip-container1,
.grip-container2,
.grip-container3 {
   display: grid;
   grid-template-columns: repeat(5, 200px);
   grid-template-rows: repeat(6, 180px);
   row-gap: 10px;
   column-gap: 10px;
   max-width: 1040px;
   /* Centreren */
   margin: 0 auto;
   /* border: 4px solid black; */
}

.grip-container2 {
   grid-template-rows: repeat(5, 180px);
}

.grip-container3 {
   grid-template-rows: repeat(3, 180px);
}

.box3-5 {
   grid-column: 1 / 5;
   grid-row: 2 / 4;
}

.mnk-tabel {
   width: 100%;
   /* background-color: #f4f4f4; */
   margin-right: 20px;
   font-size: 15px;
   opacity: 0.7;
}

/* .box-img {
   border: 3px solid red;
} */

.mnk-img-fig {
   display: block;
   width: 100%;
   height: 90%;
   /* height: auto; */
   /* height: 70%; */
}

.mnk-figbijschrift {
   background-color: black;
   color: white;
   font-style: italic;
   text-align: center;
   /* width: 100%; */
}

.blok-tbl {
   border-radius: 5px;
   /* padding: 10px; */
   /* background-color: rgb(228, 221, 180); */
   background-color: #f4f4f4;
   text-align: left;
   /* border: 3px solid orchid; */
}

.box5 {
   grid-column: 1 / 5;
   grid-row: 2 / 7;
}

.mnk-accent {
   display: block;
   height: 25px;
   width: 35px;
   float: right;
}

.mnk-categorie {
   font-size: 25px;
   color: orange;
}

.mnk-gerecht {
   font-size: 16px;
   color: rgba(17, 17, 205, 0.913);
   font-weight: 400;
}

.mnk-subdrank {
   font-size: 18px;
   color: orange;
}

.mnk-per-stuk {
   color: orange;
   text-align: right;
}

.mnk-prijs {
   vertical-align: top;
   text-align: right;
   width: 75px;
}


.mnk-alergenen {
   vertical-align: super;
   font-size: x-small;
}

.mnk-fontklein {
   font-size: 14px;
}

.mnk-alerg-overz {
   display: block;
   margin: 0 auto;
   width: 90%;
   max-width: 550px;
   height: auto;
}


.flex-container {
   display: flex;
   flex-direction: row;
   color: black;
   /*  border: 4px solid red; */
   max-width: 1040px;
   margin: 0 auto;
}

.mnk-tabel-drank1,
.mnk-tabel-drank2,
.mnk-tabel-dessert {
   width: 100%;
   /* border: 3px solid blue; */
   border-collapse: collapse;
   font-size: 15px;
   background-color: #f4f4f4;
   opacity: 0.9;
}

.mnk-tabel-drank1 {
   margin-right: 10px;
}

.mnk-tabel-drank2 {
   margin-left: 10px;
}


/* ----------- Blad 2 --------- */
@media only screen and (min-width: 775px) and (max-width: 1070px) {

   .grip-container1 {
      max-width: 770px;
      grid-template-columns: repeat(4, 185px);
      grid-template-rows: repeat(6, 175px);
   }

   .grip-container1>.box5 {
      grid-column: 1 / 4;
      grid-row: 2 / 7;
   }


   .grip-container2 {
      max-width: 770px;
      grid-template-columns: repeat(4, 185px);
      grid-template-rows: repeat(6, 175px);

   }

   .grip-container2>.box5 {
      grid-column: 1 / 4;
      grid-row: 2 / 7;
   }

   .box10 {
      grid-column: 4 / 5;
      grid-row: 6 / 7;
   }

   .grip-container3 {
      max-width: 770px;
      grid-template-columns: repeat(4, 185px);
      grid-template-rows: repeat(4, 175px);
   }

   .box3-5 {
      grid-column: 1 / 4;
      grid-row: 2 / 5;
   }

   .grip-container-bbq {
      max-width: 770px;
      grid-template-columns: repeat(4, 185px);
      grid-template-rows: repeat(4, 175px);
   }

   .grip-container-bbq>.box5 {
      grid-column: 1 / 4;
      grid-row: 2 / 8;
   }


   .flex-container {
      max-width: 770px;
      margin: 0 auto;
   }

}

@media only screen and (min-width: 580px) and (max-width: 775px) {

   .grip-container1 {
      max-width: 573px;
      grid-template-columns: repeat(3, 185px);
      grid-template-rows: repeat(7, 180px);
      gap: 9px;
   }

   .grip-container1>.box5 {
      grid-column: 1 / 3;
      grid-row: 2 / 8;
   }


   .grip-container2 {
      max-width: 573px;
      grid-template-columns: repeat(3, 185px);
      grid-template-rows: repeat(7, 180px);
      gap: 9px;
   }

   .grip-container2>.box5 {
      grid-column: 1 / 3;
      grid-row: 2 / 8;
   }

   .box6 {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
   }

   .box7 {
      grid-column: 3 / 4;
      grid-row: 4 / 5;
   }

   .box8 {
      grid-column: 3 / 4;
      grid-row: 5 / 6;
   }

   .box9 {
      grid-column: 3 / 4;
      grid-row: 6 / 7;
   }

   .grip-container3 {
      max-width: 573px;
      grid-template-columns: repeat(3, 185px);
      grid-template-rows: repeat(4, 180px);
      gap: 9px;
   }

   .box3-5 {
      grid-column: 1 / 3;
      grid-row: 2 / 3;
   }

   .grip-container-bbq {
      max-width: 580px;
      grid-template-columns: repeat(3, 185px);
      grid-template-rows: repeat(5, 175px);
      gap: 9px;
   }

   .grip-container-bbq>.box5 {
      grid-column: 1 / 3;
      grid-row: 2 / 9;
   }

   .flex-container {
      max-width: 580px;
      margin: 0 auto;
   }

   .mnk-tabel-drank1 {
      margin-right: 5px;
   }

   .mnk-tabel-drank2 {
      margin-left: 5px;
   }

   .mnk-alerg-overz {
      display: block;
      margin: 0 auto;
      width: 100%;
      max-width: 580px;
      height: auto;
   }

   .mnk-gerecht {
      font-size: 15px;
   }

   .mnk-accent {
      height: 20px;
      width: 30px
   }

   .mnk-categorie {
      font-size: 20px;
   }

   .mnk-prijs {
      padding-right: 5px;
      width: 60px;
   }
}

@media only screen and (max-width: 579px) {

   .grip-container1 {
      max-width: 337px;
      grid-template-columns: repeat(2, 165px);
      grid-template-rows: repeat(13, 160px);
      gap: 7px;
   }

   .grip-container1>.box5 {
      grid-column: 1 / 3;
      grid-row: 3 / 11;
   }

   .grip-container2 {
      max-width: 337px;
      grid-template-columns: repeat(2, 165px);
      grid-template-rows: repeat(13, 160px);
      gap: 7px;
   }

   .grip-container2>.box5 {
      grid-column: 1 / 3;
      grid-row: 3 / 11;
   }

   .grip-container3 {
      max-width: 337px;
      grid-template-columns: repeat(2, 165px);
      grid-template-rows: repeat(8, 160px);
      gap: 7px;
   }

   .box3-5 {
      grid-column: 1 / 3;
      grid-row: 3 / 7;
   }

   .grip-container-bbq {
      max-width: 340px;
      grid-template-columns: repeat(2, 165px);
      grid-template-rows: repeat(4, 160px);
      gap: 7px;
   }

   .grip-container-bbq>.box5 {
      grid-column: 1 / 3;
      grid-row: 3 / 11;
   }

   .flex-container {
      display: flex;
      flex-direction: column;
      max-width: 340px;
      margin: 0 auto;
   }

   .mnk-tabel-drank,
   .mnk-tabel-drank2 {
      margin: 0px;
   }

   .mnk-alerg-overz {
      display: block;
      margin: 0 auto;
      width: 100%;
      max-width: 340px;
      height: auto;
   }

   .mnk-gerecht {
      font-size: 15px;
   }

   .mnk-accent {
      height: 20px;
      width: 30px
   }

   .mnk-categorie {
      font-size: 20px;
   }

   .mnk-prijs {
      /* padding: 0px; */
      padding-right: 5px;
      width: 60px;
   }
}