p{
  font-family: Arial, Helvetica, sans-serif;
}

h1{
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
}





nav{
  display: grid;
  background-color: rgb(177, 175, 175);
  height: 100px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

a{
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 26%;
  margin-top: 20px;
  margin-bottom: 20px;
  list-style: none;
  color: white;
  text-align:center;
  text-decoration: none;
  font-size: large;
  font-weight: 600;
  border-style: solid;
  border-color: rgb(113, 112, 112);
  border-radius: 18px;
  width: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: rgb(177, 175, 175);
  transition: 0.4s;
}

a:hover{
  background-color:rgb(113, 112, 112);
}

body{
  margin-bottom: 70px;
}

#knop{
  border-color: rgb(113, 112, 112);
  background-color:rgb(113, 112, 112);
}
















.main-p1{
  display: grid;
  grid-template-columns: 30px 2fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px ;
 row-gap: 15px;
}

img{
  border-color: black;
  border-style: solid;
}

.p1-a1{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 10;
  margin-top: -15px;
  margin-bottom: -15px;
}

.img1-p1{
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 4;
}

.img2-p1{
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 4;
}

.img3-p1{
  grid-column-start: 10;
  grid-column-end: 11;
  grid-row-start: 2;
  grid-row-end: 4;
}

.img4-p1{
  grid-column-start: 12;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 4;
}

.img5-p1{
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 5;
  grid-row-end: 7;
}

.img6-p1{
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 8;
  grid-row-end: 10;
}

.p1-a2{
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 5;
  grid-row-end: 10;
  margin-top: -15px;
}

















.main-p2{
  display: grid;
  grid-template-columns: 30px 1fr 1fr  30px    1fr 1fr 30px    1fr 1fr 30px 1fr 30px;
  row-gap: 15px;
}


.p2-a1{
  grid-column-start: 4;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 6;
}

.p2-a2{
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 7;
  grid-row-end: 11;
  margin-top: -25px;
}




.img7-p2{
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 6;
  margin-top: 10px;
}

.img7-a-p2{
  width: 270px;
}

.img8-p2{
  grid-column-start: 11;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 4;
  margin-top: 12px;
}

.img9-p2{
  grid-column-start: 11;
  grid-column-end: 13;
  grid-row-start: 5;
  grid-row-end: 7;
}

.img11-p2{
  grid-column-start: 11;
  grid-column-end: 13;
  grid-row-start: 7;
  grid-row-end: 10;
}

.img10-p2{
  grid-column-start: 8;
  grid-column-end: 10;
  grid-row-start: 7;
  grid-row-end: 11;
  margin-top: -2px;
}

.img7-a2-p2{
  width: 270px;
}











.main-p3{
  display: grid;
  grid-template-columns: 30px 1fr 30px 1fr 30px 450px 30px 1fr 30px 1fr 30px;

 row-gap: 15px;
}







.img12-p3{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  margin-right: 60px;
}

.img13-p3{
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
}

.img14-p3{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 11;
}
.img14-a-p3{
  width: 430px;
}

.img15-p3{
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 8;
  grid-row-end: 11;
  padding-right:80px;
}

.img16-p3{
  grid-column-start: 10;
  grid-column-end: 11;
  grid-row-start: 8;
  grid-row-end: 11;
}



.af-libre{
  grid-column-start: 8;
  grid-column-end: 11;
  grid-row-start: 2;
  grid-row-end: 7;
  width: 430px;
}




.p3-a1{
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 11;
}






















.main-p4{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}


.img1-p4{
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 7;
}
.img1-p4-groote{
  width: 340px;
}

.img2-p4{
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 6;
  grid-row-end: 7;
}
.img2-p4-groote{
  width: 115px;
}

.img3-p4{
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 7;
}
.img3-p4-groote{
  width: 115px;
}

.img4-p4{
  grid-column-start: 7;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 3;
}
.img4-p4-groote{
  width: 115px;
}

.img5-p4{
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row-start: 3;
  grid-row-end: 4;
}
.img5-p4-groote{
  width: 115px;
}

.img6-p4{
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 5;
  grid-row-end: 7;

}
.img6-p4-groote{
  width: 250px;
}

.img7-p4{
  grid-column-start: 9;
  grid-column-end: 11;
  grid-row-start: 2;
  grid-row-end: 4;
}
.img7-p4-groote{
  width: 236px;
}

.img8-p4{
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 6;
}
.img8-p4-groote{
  width: 115px;
}

.img9-p4{
  grid-column-start: 10;
  grid-column-end: 11;
  grid-row-start: 6;
  grid-row-end: 7;
}
.img9-p4-groote{
  width: 115px;
}

.img10-p4{
  grid-column-start: 11;
  grid-column-end: 12;
  grid-row-start: 5;
  grid-row-end: 6;
}
.img10-p4-groote{
  width: 115px;
}

.img11-p4{
  grid-column-start: 12;
  grid-column-end: 13;
  grid-row-start: 4;
  grid-row-end: 5;
}
.img11-p4-groote{
  width: 115px;
}

.img12-p4{
  grid-column-start: 13;
  grid-column-end: 14;
  grid-row-start: 3;
  grid-row-end: 4;
}
.img12-p4-groote{
  width: 115px;
}

.img13-p4{
  grid-column-start: 12;
  grid-column-end: 13;
  grid-row-start: 2;
  grid-row-end: 3;
}
.img13-p4-groote{
  width: 115px;
}

.img14-p4{
  grid-column-start: 12;
  grid-column-end: 13;
  grid-row-start: 6;
  grid-row-end: 7;
}
.img14-p4-groote{
  width: 115px;
}

.img15-p4{
  grid-column-start: 13;
  grid-column-end: 14;
  grid-row-start: 5;
  grid-row-end: 6;
}
.img15-p4-groote{
  width: 115px;
}











.p1-a2-2{
  display: none;
}


.p1-a1-1{
  display: none;
}

.p2-a1-1{
  display: none;
}

.p2-a2-2{
  display: none;
}

.p3-a1-1{
  display: none;
}


#knop-hamburger{
  display: none;
}


  @media screen and (max-width: 480px) {
    
    nav {
      display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr;
      height: auto;
    }
    div {
      display: grid;
      grid-template-rows: 65px 1fr;
      grid-template-columns: 1fr;
      height: auto;
      border: none;
    }
  
    p{
      font-size: smaller;
    }

    h1{
      font-size: smaller;
    }
  

    #knop-hamburger{
      display: block;
      border: none;
      background-color: rgb(177, 175, 175);
    }

    #nav-1{
      display: none;
    }


    a{
      margin: 0;
      width: 100%;
      border-radius: 0;
      border: none;
    }

      body {
        width: 100vw;
        height: 100vw;
      }
    
      .main-p1 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
        gap: 20px;
        padding: 10px;
        height: 100%;
      }
    
      img {
        width: 100%;
        height: auto;
        border-color: black;
        border-style: solid;
      }
    
      .p1-a1-1 {
        display: block;
        grid-column: 2 / 6;
        grid-row: 2/5;
      }
      .p1-a1{
        
        display: none;
      }.p1-a2{
        
        display: none;
      }
      .p1-a2-2 {
        display: block;
        grid-column: 2/7;
        grid-row: 6;
      }

      .img1-p1, .img2-p1, .img3-p1, .img4-p1 {
        grid-column: 6 / 7;
        justify-self: center;
        padding-bottom: 40px;
      }

      .img1-p1{
        grid-row: 2/3;
      }

      .img2-p1{
        grid-row: 3/4;
      }

      .img3-p1{
        grid-row: 4/5;
      }


      .img5-p1{
        grid-column: 2/3;
      }

      .img6-p1{
        grid-column: 4/5;
      }
      

      .img6-p1, .img5-p1, .img4-p1 {
        grid-row: 5 / 6;
        justify-self: center;
      }























      .main-p2 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 20px;
        padding: 10px;
        height: 100%;
      }









      .p2-a1{
        display: none;
      }

      .p2-a1-1{
        display: block;
        grid-column-start: 2;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 4;
        margin: 0;
      }
      .p2-a2-2{
        display: block;
        grid-column-start: 2;
        grid-column-end: 7;
        grid-row-start: 6;
        grid-row-end: 8;
        margin: 0;
      }
      .p2-a2{
       display: none;
      }
      
      



      
      
      .img7-p2{
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 4;
        grid-row-end: 6;
        margin: 0;
      }
      
      .img7-a-p2{
        width: 100px;
      }
      
      .img10-p2{
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 4;
        grid-row-end: 6;
        margin: 0;
      }
      
      .img7-a2-p2{
        width: 100px;
      }








      .img8-p2{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
      }
      
      .img9-p2{
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
      }
      
      .img11-p2{
        grid-column-start: 6;
        grid-column-end: 7;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
        margin-bottom: 100px;
      }
      
      

















      .main-p3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 20px;
        padding: 10px;
        height: 100%;
      }









      .p3-a1-1{
        display: block;
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 9;
        margin: 0;
        padding: 0;
      }


      .p3-a1{
       display: none;
      }


      .af-libre{
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 4;
        width: 100px;
        margin: 0;
        padding: 0;
      }










      .img12-p3{
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 5;
        grid-row-end: 7;
        margin: 0;
        padding: 0;
      }
      .img12-a-p3{
        width: 100px;
      }
      
      

      .img14-p3{
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
        padding: 0;
      }
      .img14-a-p3{
        width: 100px;
      }
      




      

      .img13-p3{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 9;
        grid-row-end: 10;
        margin: 0;
        padding: 0;
      }
      .img13-a-p3{
        width: 50px;
      }

      .img15-p3{
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 9;
        grid-row-end: 10;
        margin: 0;
        padding: 0;
      }
      .img15-a-p3{
        width: 50px;
      }
      
      .img16-p3{
        grid-column-start: 6;
        grid-column-end: 7;
        grid-row-start: 9;
        grid-row-end: 10;
        margin: 0;
        padding: 0;
      }
      .img16-a-p3{
        width: 50px;
      }
      
      
      
      
      
     














      .main-p4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 50px 50px 50px 50px 50px 50px ;
        padding: 10px;
        height: 100%;
      }








      .img1-p4{
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
        margin: 0;
        padding: 0;
      }
      .img1-p4-groote{
        width: 60px;
      }
      
      .img2-p4{
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 5;
        grid-row-end: 7;
        margin: 0;
        margin-top: -50px;
        padding: 0;
      }
      .img2-p4-groote{
        width: 60px;
      }
      
      .img3-p4{
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 6;
        margin: 0;
        margin-left: -10px;
        padding: 0;
      }
      .img3-p4-groote{
        width: 164px;
      }
      








      .img4-p4{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
        padding: 0;
      }
      .img4-p4-groote{
        width: 45px;
      }
      
      .img5-p4{
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
        padding: 0;
      }
      .img5-p4-groote{
        width: 45px;
      }
      
      .img6-p4{
        grid-column-start: 6;
        grid-column-end: 7;
        grid-row-start: 8;
        grid-row-end: 9;
        margin: 0;
        padding: 0;
      
      }
      .img6-p4-groote{
        width: 45px;
      }
      





      .img7-p4{
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 9;
        grid-row-end: 10;
        margin: 0;
        padding: 0;
      }
      .img7-p4-groote{
        width: 45px;
      }
      
      .img8-p4{
        grid-column-start: 5;
        grid-column-end: 6;
        grid-row-start: 9;
        grid-row-end: 10;
        margin: 0;
        padding: 0;
      }
      .img8-p4-groote{
        width: 45px;
      }
      





      .img9-p4{
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 10;
        grid-row-end: 11;
        margin: 0;
        padding: 0;
      }
      .img9-p4-groote{
        width: 45px;
      }
      
      .img10-p4{
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 10;
        grid-row-end: 11;
        margin: 0;
        padding: 0;
      }
      .img10-p4-groote{
        width: 45px;
      }
      
      .img11-p4{
        grid-column-start: 6;
        grid-column-end: 7;
        grid-row-start: 10;
        grid-row-end: 11;
        margin: 0;
        padding: 0;
      }
      .img11-p4-groote{
        width: 45px;
      }
      













      
      
      .img12-p4{
        display: none;
      }
      .img13-p4{
        display: none;
      }
      .img14-p4{
        display: none;
      }
      .img15-p4{
        display: none;
      }
     






















    }
    

  
  



























#lettretype1{
  font-family: Garamond;
}

#lettretype2{
  font-family: Bodoni Moda;
}

#lettretype3{
  font-family: Libre Caslon Display;
}