@font-face {
    font-family:fonty ;
    src: url(../font/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf);
 }





body
{
    font-family:fonty ;
    font-size: 22px;
}
.body_1
{
    font-family:fonty ;
    font-size: 22px;
    
}


.name
{
    margin-top: 36px;
    margin-left: 6px;

    
}



.link1
{
    font-size: 20px;
}

.link2
{
 margin-left: -40%;
}


    
#blok
{
  
    color: #ffffff;
    display: none;
  
  
  
}

li a 
{

    display: grid;
    text-decoration: none;
    text-align: center;
    padding: 3px 6px;
    color:#ffffff;
    font-style: bold;
    font-size: 16px;
    margin-right: 30px;
    margin-bottom: -40px;
}

nav 
{
  

    width: 100%;
    height: 40%;
    background-color: #BFBDAF;

    text-align: center;
 

}

nav ul
{

    
    width: 95%;
    height: 80px;
    display: grid;
    grid-template-columns: 0.2fr repeat(1,6fr) 0.8fr 0.7fr;
    text-align: left;
    margin: auto;
    text-decoration-line: none;
    color: white;

}


ul
{
    background-color: #BFBDAF;

}

  nav ul li
{
   list-style-type: none;
   margin: 0px;
   margin-top: 30px;
   text-align: left; 
   text-decoration-line: none;
}

li
{
    float: left;
   
}

img
{
    object-fit: cover;

    width: 100%;
}




 /*Home page*/


 .grid-container1
 {
  


  height: 140vh;
  width: 100%;
   display: grid;
   grid-template-columns: 1.5fr 4fr 1.5fr  ;
   grid-template-rows: 3fr 4fr   ;
   row-gap: 0px;
   grid-template-areas:
   'blk1 blk1 blk1'
   'blk3 blk4 blk5'
;
}


 
 /*Subjects page*/




 .grid-container2
 {

   

    height: 140vh;
    width: 100%;
     display: grid;
     grid-template-columns: 2.4fr 2fr 2fr 2.2fr  ;
     grid-template-rows: 1fr 0.7fr repeat( 5, 1.5fr)   ;
  
     grid-template-areas:
    'blk1 blk14 blk14 blk3'
    'blk1 blk2 blk2 blk3'
    'blk1 blk4 blk9 blk3'
    'blk1 blk5 blk10 blk3'
    'blk1 blk6 blk11 blk3'
    'blk1 blk7 blk12 blk3'
    'blk1 blk8 blk13 blk3'
;
 }




 
 /*Beeld Media Vorm en Web desing page*/

.body_1
{
    font-family:fonty ;
    background-color: #FAFAFA;
}


.grid-container3
{
   


   height: 600vh;
   width: 100%;
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr  ;
    grid-template-rows: 1.5fr 0.7fr repeat( 10, 3fr)  0.7fr repeat( 11, 3fr)   0.5fr ;
 row-gap: 66px;
 column-gap: 10px;
    grid-template-areas:
     'blk2 blk2 blk2'
     'blk1 blk4 blk3'
     
     'blk1 blk16 blk3'
     'blk1 blk5 blk3'

    
     'blk1 blk17 blk3'
     'blk1 blk6 blk3'


    
     'blk1 blk18 blk3'
     'blk1 blk7 blk3'


    
     'blk1 blk19 blk3'
     'blk1 blk8 blk3'


    
     'blk1 blk20 blk3'
     'blk1 blk9  blk3'


    
     'blk1 blk10 blk3'
     'blk1 blk10 blk3'


     'blk1 blk11 blk3'
     'blk1 blk21 blk3'

     
     'blk1 blk12 blk3'
     'blk1 blk22 blk3'

     
     'blk1 blk13 blk3'
     'blk1 blk23 blk3'


     'blk1 blk14 blk3'
     'blk1 blk24 blk3'

     
     'blk1 blk15 blk3'
     'blk1 blk25 blk3'


     'blk1 blk26 blk3'

;
}

 /*js en Html page*/


 .grid-container4
 {
    height: 650vh;
    width: 100%;
     display: grid;
     grid-template-columns: 1fr 2fr 1fr  ;
     grid-template-rows:
     1fr
       0.7fr
     2.5fr 0.8fr  2.5fr 0.8fr  2.5fr 0.8fr  2.5fr 0.8fr  2.5fr 0.8fr
       0.7fr 
     2.5fr 0.8fr  2.5fr 0.8fr  2.5fr 0.8fr  2.5fr 0.8fr  2.5fr 0.8fr
     0.2fr
     ;
  row-gap: 20px;

     grid-template-areas:
     'blk1 blk1 blk1'
     'blk2 blk4 blk3'

     'blk2 blk6 blk3'
     'blk2 blk5 blk3'
     
     'blk2 blk8 blk3'
     'blk2 blk7 blk3'
     
     'blk2 blk10 blk3'
     'blk2 blk9 blk3'
     
     'blk2 blk12 blk3'
     'blk2 blk11 blk3'
     
     'blk2 blk14 blk3'
     'blk2 blk13 blk3'
     
     'blk2 blk15 blk3'
     
     'blk2 blk17 blk3'
     'blk2 blk16 blk3'
    
     'blk2 blk19 blk3'
     'blk2 blk18 blk3'
     
     'blk2 blk21 blk3'
     'blk2 blk20 blk3'
    
     'blk2 blk23 blk3'
     'blk2 blk22 blk3'
     
     'blk2 blk25 blk3'
     'blk2 blk24 blk3'
     'blk2 blk26 blk3'
     

;
 }









  /*Animatie page*/




 
  .grid-container5
  {
     
 

 
     height: 450vh;
     width: 100%;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr  ;
      grid-template-rows: 0.1fr 0.6fr 0.2fr 0.6fr 0.2fr 0.6fr 0.2fr 0.6fr 0.2fr 0.6fr 0.2fr 1fr;
   row-gap: 40px;
 
      grid-template-areas:
      'blk1 blk1 blk1'
      'blk2 blk4 blk3'
      'blk2 blk9 blk3'

      'blk2 blk5 blk3'
      'blk2 blk10 blk3'

      'blk2 blk6 blk3'
      'blk2 blk11 blk3'

      'blk2 blk7 blk3'
      'blk2 blk12 blk3'

      'blk2 blk8 blk3'
      'blk2 blk13 blk3'

 
 ;
  }




































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

    #blok
{
  
    color: #ffffff;
    display: block;
  
  
  
}



    span
    {
        height: 10px;
        width: 100px;
        background-color: #fff;
    }
    
    
        nav > a:nth-child(2){
            display: block;
            font-size: 30px;
            margin: 20px 50px 20px 20px;
       
          
            
        }
        nav ul li{
            width: 120%;
            text-align: center;
        }
        nav ul.menudicht {
            display: none;
        }

        
    
    

    li a 
    {
    
        display: inline-block;
        text-decoration: none;
        text-align: center;
        padding: 3px 6px;
        color:#ffffff;
        font-style: bold;
        font-size: 16px;
        margin-right: 30px;
        margin-bottom: -40px;
    }
    
    nav 
    {
      
    
        width: 100%;
        height: 40%;
        background-color: #BFBDAF;
    
        text-align: center;
     
    
    }
    
    nav ul
    {
    
        
        width: 95%;
        height: 280px;
        display: inline-block;
        grid-template-columns: 0.2fr repeat(1,6fr) 0.8fr 0.7fr;
        text-align: left;
        margin: auto;
        text-decoration-line: none;
        color: white;
    
    }
    
    
    ul
    {
        background-color: #BFBDAF;
    
    }
    
      nav ul li
    {
       list-style-type: none;
       margin: 0px;
       margin-top: 30px;
       text-align: left; 
       text-decoration-line: none;
    }

        
    #blok
    {
      
        color: #ffffff;
        display: block;
      
      text-align: right;
      margin-right: 2%;
      
    }
 
body
{
    font-family:fonty ;
    font-size: 22px;
}

.name
{
    margin-top: 36px;
    margin-left: 6px;

}


.link1
{
    font-size: 20px;
}

.link2
{
 margin-left: 00px;
}

img
{
    object-fit: cover;

    width: 100%;
}




 /*Home page*/


 .grid-container1
 {
  


  height: 90vh;
  width: 100%;
   display: grid;
   grid-template-columns: 1fr 4fr 1fr  ;
   grid-template-rows: 2fr 3fr   ;
   row-gap: 0px;
   grid-template-areas:
   'blk1 blk1 blk1'
   'blk3 blk4 blk5'
;
}


 
 /*Subjects page*/




 .grid-container2
 {

   

    height: 140vh;
    width: 100%;
     display: grid;
     grid-template-columns: 1fr 2fr 1.5fr  ;
     grid-template-rows: 1fr 0.7fr  1.5fr 0.5fr  1.5fr 0.5fr  1.5fr 0.5fr  1.5fr 0.5fr  1.5fr 0.5fr  ;
  
     grid-template-areas:
    'blk1 blk14 blk3'
    'blk1 blk2 blk3'
    'blk1 blk4 blk3'
    'blk1 blk9 blk3'
    'blk1 blk5 blk3'
    'blk1  blk10 blk3'
    'blk1 blk6 blk3'
    'blk1  blk11 blk3'
    'blk1 blk7 blk3'
    'blk1 blk12 blk3'
    'blk1 blk8 blk3'
    'blk1  blk13 blk3'
;
 }




 
 /*Beeld Media Vorm en Web desing page*/

.body_1
{
    font-family:fonty ;
    background-color: #FAFAFA;
}

 .grid-container3
 {
    


    height: 600vh;
    width: 100%;
     display: grid;
     grid-template-columns: 0.5fr 2fr 0.5fr  ;
     grid-template-rows: 1.5fr 0.7fr repeat( 10, 3fr)  0.7fr repeat( 11, 3fr)   0.5fr ;
  row-gap: 66px;
  column-gap: 10px;
     grid-template-areas:
      'blk2 blk2 blk2'
      'blk1 blk4 blk3'
      
      'blk1 blk16 blk3'
      'blk1 blk5 blk3'

     
      'blk1 blk17 blk3'
      'blk1 blk6 blk3'


     
      'blk1 blk18 blk3'
      'blk1 blk7 blk3'


     
      'blk1 blk19 blk3'
      'blk1 blk8 blk3'


     
      'blk1 blk20 blk3'
      'blk1 blk9  blk3'


     
      'blk1 blk10 blk3'
      'blk1 blk10 blk3'


      'blk1 blk11 blk3'
      'blk1 blk21 blk3'

      
      'blk1 blk12 blk3'
      'blk1 blk22 blk3'

      
      'blk1 blk13 blk3'
      'blk1 blk23 blk3'


      'blk1 blk14 blk3'
      'blk1 blk24 blk3'

      
      'blk1 blk15 blk3'
      'blk1 blk25 blk3'


      'blk1 blk26 blk3'

;
 }
 
 /*js en Html page*/


 .grid-container4
 {
    
    height: 350vh;
    width: 100%;
     display: grid;
     grid-template-columns: 0.2fr 2fr 0.2fr  ;
     grid-template-rows:
     1fr
       0.7fr
     2.5fr 0.2fr  2.5fr 0.2fr  2.5fr 0.2fr  2.5fr 0.2fr  2.5fr 0.2fr
       0.7fr 
     2.5fr 0.2fr  2.5fr 0.2fr  2.5fr 0.2fr  2.5fr 0.2fr  2.5fr 0.2fr
     ;
  row-gap: 20px;

     grid-template-areas:
     'blk1 blk1 blk1'
     'blk2 blk4 blk3'
     'blk2 blk5 blk3'
     'blk2 blk6 blk3'
     'blk2 blk7 blk3'
     'blk2 blk8 blk3'
     'blk2 blk9 blk3'
     'blk2 blk10 blk3'
     'blk2 blk11 blk3'
     'blk2 blk12 blk3'
     'blk2 blk13 blk3'
     'blk2 blk14 blk3'
     'blk2 blk15 blk3'
     'blk2 blk16 blk3'
     'blk2 blk17 blk3'
     'blk2 blk18 blk3'
     'blk2 blk19 blk3'
     'blk2 blk20 blk3'
     'blk2 blk21 blk3'
     'blk2 blk22 blk3'
     'blk2 blk23 blk3'
     'blk2 blk24 blk3'
     'blk2 blk25 blk3'
     

;
 }



  /*Animatie page*/




  .grid-container5
  {
     
 

 
     height: 380vh;
     width: 100%;
      display: grid;
      grid-template-columns: 0.5fr 2fr 0.5fr  ;
      grid-template-rows: 0.5fr repeat(10, 2fr);
   row-gap: 40px;
 
      grid-template-areas:
      'blk1 blk1 blk1'
      'blk2 blk4 blk3'
      'blk2 blk9 blk3'

      'blk2 blk5 blk3'
      'blk2 blk10 blk3'

      'blk2 blk6 blk3'
      'blk2 blk11 blk3'

      'blk2 blk7 blk3'
      'blk2 blk12 blk3'

      'blk2 blk8 blk3'
      'blk2 blk13 blk3'

 
 ;
  }
 


}