#p1-img1{
  height: 200px;
}


nav{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;


  background-color: black;
  height: 100px;
  width: 100%;
}

nav a{
  text-decoration: none;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightskyblue;
  border: solid;
  border-width: 4px;
  border-color: rgb(49, 174, 251);
  text-align: center;
  padding-top: 40px;
  transition: 0.3s;
}

a:hover{
  background-color:rgb(49, 174, 251);
}

main{
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 800px;
  background-image:  url('../Afbeelding/p1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 2rem;
}


#p1-s1 { grid-area: 2 / 2 / 3 / 3; 

    height: 70px;
    margin-bottom: 150px;
}
h2 { grid-area: 3 / 2 / 4 / 3; 

     height: 40px;
     font-size: 42px;
     font-family: Arial, Helvetica, sans-serif;
}

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

 /* Sections
     ============================================================================================================================= */


#grid-p2 {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
height: 800px;
margin: 20px;
margin-bottom: 100px;
}

#p2-s1 { grid-area: 1 / 1 / 3 / 2; height: 800px;}
#p2-a1 { grid-area: 1 / 2 / 2 / 3;  height: 395px;}
#p2-s2 { grid-area: 2 / 2 / 3 / 3;  height: 395px; width: 730px;}
#p2-s3 { grid-area: 1 / 3 / 3 / 4;  height: 800px;}

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



#p2-img1{
 height: 100%;
}

#p2-img2{
  height: 100%;
  width: 100%;
}

#p2-img3{
  height: 100%;
  width: 100%;
}

 /* Sections
     ============================================================================================================================= */





#grid-p3{
  display: grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 800px;
  margin: 20px;
  margin-bottom: 100px;
}


#p3-a1 { grid-area: 1 / 1 / 2 / 2;}
#p3-s1 { grid-area: 2 / 1 / 5 / 2; }
#p3-a2 { grid-area: 1 / 2 / 3 / 3; }
#p3-s2 { grid-area: 3 / 2 / 5 / 3; }
#p3-a3 { grid-area: 1 / 3 / 2 / 4; }
#p3-s3 { grid-area: 2 / 3 / 5 / 4; }
#p3-s4 { grid-area: 1 / 4 / 5 / 5; }


#p3-img1{
  height: 100%;
  width: 100%;
}

#p3-img2{
  height: 100%;
  width: 100%;
}

#p3-img3{
  height: 100%;
  width: 100%;
}

#p3-img4{
  height: 100%;
  width: 100%;
}



 /* Sections
     ============================================================================================================================= */




#grid-p4{
  display: grid;
  grid-template-columns:1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 1000px;
  margin: 20px;
  margin-bottom: 100px;
}

#p4-a1 { grid-area: 1 / 1 / 1 / 1;  height: 500px;}
#p4-a2 { grid-area: 1 / 2 / 2 / 3; height: 500px; margin-left: 50px; }
#p4-a3 { grid-area: 2 / 1 / 3 / 2;  height: 500px;}
#p4-a4 { grid-area: 2 / 2 / 3 / 3; height: 500px;}
#p4-s1 { grid-area: 1 / 3 / 3 / 4; }



#p4-img1{
  height: 100%;
  width: 100%;
}

.p4-te{
  font-size: 15px;
  margin-top: 30px;
}

.p4-te2{
  margin-top: 70px;
}


 /* Sections
     ============================================================================================================================= */




#grid-p5{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 3fr;
 grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 800px;
  margin: 20px;
  margin-bottom: 180px;
}


#p5-s1 { grid-area: 1 / 1 / 1 / 1; }
#p5-s2 { grid-area: 1 / 2 / 2 / 3;  }
#p5-s3 { grid-area: 2 / 1 / 3 / 2; }
#p5-s4 { grid-area: 2 / 2 / 3 / 3; }





#p5-img1{
  width: 100%;
  height: 100%;
}

#p5-img2{
  width: 100%;
  height: 100%;
}

#p5-img3{
  width: 100%;
  height: 100%;
}

#p5-img4{
  width: 100%;
  height: 100%;
}



footer{
  height: 120px;
  background-color:rgb(49, 174, 251);
}













/*  ------------------------------------------------------------------------------------------------------------------/*/


#knop-hamburger{
  display: none;
}

#ham{
  position: fixed;
  height: 100px;
  width: 100%;
}


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

#knop-hamburger{
  display: block;
  height: 60px;
  width: 100%;
  border-color: rgb(49, 174, 251);
  border-width: 4px;
  background-color: lightskyblue;
}



  nav{
  background-color: black;
  height: 100px;
  display: grid;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr;
      height: auto;
      background-color: lightskyblue;
      width: 100%;
}

nav a{
  padding-top: 0px;
  padding: 20px;
}

main{
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 600px;
   background-image:  url('../Afbeelding/p1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 50vh;
  padding: 2rem;
}


h1 { grid-area: 2 / 2 / 3 / 3; 
    
    height: 10px;
}
h2 { grid-area: 3 / 2 / 4 / 3; 
     
    height: 40px;
    font-size: 17px;
}

#p1-img1{
  height: 80px;
}

p{
  font-size: 11px;
}

 /* Sections
     ============================================================================================================================= */


#grid-p2 {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
height: 800px;
margin: 20px;
margin-bottom: 50px;
}

#p2-a1 { grid-area: 1 / 1 / 3 / 2;  height: 800px; display: none;}
#p2-s1 { grid-row-start: 1;  grid-row-end: 3; grid-column-start:1; grid-column-end: 4;  height: 800px; }
#p2-s2 { grid-area: 2 / 2 / 3 / 3; height: 395px; display: none;}
#p2-s3 { grid-area: 1 / 3 / 3 / 4;  height: 800px; display: none;}


 /* Sections
     ============================================================================================================================= */





#grid-p3{
 display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 500px;
  margin: 20px;
  margin-bottom: 50px;
}


#p3-a1 { grid-area: 1 / 1 / 2 / 2; height: 200px;}
#p3-s1 { grid-area: 2 / 1 / 5 / 2; height: 300px;}
#p3-a2 { grid-area: 1 / 2 / 3 / 3; height: 300px;}
#p3-s2 { grid-area: 3 / 2 / 5 / 3; display: none;}
#p3-a3 { grid-area: 3 / 2 / 4 / 3; height: 200px; margin-top: -56px; }
#p3-s3 { grid-area: 2 / 3 / 5 / 4; display: none;}
#p3-s4 { grid-area: 1 / 4 / 5 / 5; display: none;}



 /* Sections
     ============================================================================================================================= */




#grid-p4{
  display: grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows: 3fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 400px;
  margin: 20px;
  margin-bottom: 50px;
}

#p4-a1 { grid-area: 1 / 1 / 1 / 1;  height: 400px;}
#p4-a2 { grid-area: 1 / 2 / 2 / 3;  height: 400px; margin-top: 30px;}
#p4-a3 { grid-area: 2 / 1 / 3 / 2; background-color: green; height: 500px;display: none;}
#p4-a4 { grid-area: 2 / 2 / 3 / 3; background-color: pink;height: 500px;display: none;}
#p4-s1 { grid-area: 1 / 3 / 3 / 4; ;display: none;}

#p4-t{
  padding-top: 50px;
  padding-left: 10px;
}


.p4-te{
  font-size: 7px;
  margin-top: 22px;
}




 /* Sections
     ============================================================================================================================= */




#grid-p5{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 3fr;
 grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 400px;
  margin: 20px;
  margin-bottom: 50px;
}


#p5-s1 { grid-area: 1 / 1 / 1 / 1; background-color: black;display: none;}
#p5-s2 { grid-area: 1 / 2 / 2 / 3; background-color: pink; display: none;}
#p5-s3 { grid-area: 1 / 1 / 3 / 3;  height: 400px; }
#p5-s4 { grid-area: 2 / 2 / 3 / 3; background-color: green;display: none;}


footer{
  height: 150px;
  background-color: rgb(49, 174, 251);
}





}