/* ############################################################### */
/* ssb-rij1 : het gedeelte waar de header en het menu staat -*/
/* ############################################################### */

.vak1{
  grid-area: vak1;
  /* background als van body, moet voor scrollen blijven */
  background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_yellow) 20%, var(--ssb_yellow) 80%,var(--ssb_orange)  );
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas:
  'vak1a'
  'vak1b'
  'vak1c';
}
  .vak1a{
    grid-area: vak1a;
    display: inline-block;
    justify-self:center;
  }
  .vak1b{
    grid-area: vak1b;

    display: inline-block;
    }

  .vak1c{
    grid-area: vak1c;
    /* background paginatitel, overrulesbackground vak1 */
    background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_red) 25%, var(--ssb_red)75%,var(--ssb_orange)  );
    margin-bottom:20px;
  }

.vak3{
    grid-area: vak3;
    margin-top: 10px;
    display: grid;
    /*justify-content: center;
    align-items: center;*/
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'vak3a vak3a'
    'vak3b vak3b'
    'vak3c vak3c'
    'vak3d vak3d'
    'vak3e vak3e';
  }
.vak3a{
  grid-area: vak3a;
  text-align: center;
}

.vak3b{ /* vak met gekantede foto*/
  grid-area: vak3b;
  text-align: center;
  margin: 20px;
  }
.vak3c{
  grid-area: vak3c;
  text-align: center;
}
.vak3d{
  grid-area: vak3d;
  text-align: center;
}
.vak3e{
  grid-area: vak3e;
  text-align: center;
}
/*vak4:waar wanneer entree kaartjes*/
.vak4{
  grid-area: vak4;
  margin-top: 20px;
  text-align: center;
  padding-left: 5%;
  padding-right: 5%;
  display: grid;
  grid-template-columns: 1fr ;
  grid-gap: 10px;
  grid-template-areas:
  'vak4d'
  'vak4a'
  'vak4b'
  'vak4c'
  'vak4e';
}

  .vak4a{
    grid-area: vak4a;
  }
  .vak4b{
    grid-area: vak4b;
  }
  .vak4c{
    grid-area: vak4c;
  }
  .vak4d{
    grid-area: vak4d;
  }

  .vak4d a {
    width: 100%;
    display: block;
    font-size: 2rem;
    padding: 20px;
  }
  .vak4e{
    grid-area: vak4e;
  }
  .vak4e a {
    width: 100%;
    display: block;
    font-size: 2rem;
    padding: 20px;
  }
.vak5{
  grid-area: vak5;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap:10px;
  grid-template-areas:
  'vak5a vak5a'
  'vak5b4 vak5b4'
  'vak5b2 vak5b2'
  'vak5b6 vak5b6'
  'vak5c2 vak5c2';
}

  .vak5 img{
    max-width:150px;
  }
  .vak5a{
    grid-area: vak5a;
  }
  .vak5b1{
    grid-area: vak5b1;
  } /* niet in gebruik */
  .vak5b2{
    grid-area: vak5b2;
  }
  .vak5b3{
    grid-area: vak5b3;
  }/* niet in gebruik */
  .vak5b4{
    grid-area: vak5b4;
  }
  .vak5b5{
    grid-area: vak5b5;
  }/* niet in gebruik */
  .vak5b6{
    grid-area: vak5b6;

  }
  .vak5b7{
    grid-area: vak5b7;
  }/* niet in gebruik */
  .vak5c1{
    grid-area: vak5c1;
  }
  .vak5c2{
    grid-area: vak5c2;
    text-align: center;
  }
/* ########################################*/
/* pagina indeling voor homepagina  #######*/
/* telefoonscherm                          */
/* ########################################*/
.gridcontainer{
  display: grid;
  grid-template-columns:0.5fr 8fr 0.5fr;
  grid-gap: 10px;
  grid-template-areas:
  'vak1 vak1 vak1'
  '. vak3 .'
  '. vak4 .'
  '. vak5 .';
}
.fotovak{
  display: grid;
  grid-area: fotovak;
}
/* pagina indeling voor impressiepaginas */
.gridcontainer2{
  display: grid;
  grid-template-columns:1fr 4fr 1fr;
  grid-gap: 10px;
  grid-template-areas:
  'vak1 vak1 vak1'
  '. fotovak .'
  '. vak4 .'
  '. vak5 .';
}
/*  scherm vanaf 960 pixels*/
@media (min-width:960px){
  :root{
    font-size: 18px;
  }
  body{
     background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_yellow) 25%, var(--ssb_yellow) 75%,var(--ssb_orange)  );
  }
  .vak1{
    background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_yellow) 25%, var(--ssb_yellow) 75%,var(--ssb_orange)  );
  }
  .vak4{
    grid-area: vak4;
    margin-top: 20px;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas:
    'vak4d vak4d'
    'vak4a vak4b'
    'vak4c vak4b'
    'vak4e vak4e';
  }


  .vak5{
    grid-area: vak5;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:10px;
    grid-template-areas:
    'vak5a vak5a vak5a'
    'vak5b2 vak5b4 vak5b6'
    'vak5c2 vak5c2 vak5c2';
  }
  .gridcontainer{
    display: grid;
    grid-template-columns:1fr 2fr 1fr;

  }

}
@media (min-width: 1200px){
  :root{
    font-size: 20px;
  }
  body{
  	 background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_yellow) 40%, var(--ssb_yellow) 60%,var(--ssb_orange)  );
  }
  .vak1{
    background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_yellow) 40%, var(--ssb_yellow) 60%,var(--ssb_orange)  );
  }


  .gridcontainer{
    display: grid;
    grid-template-columns:1fr 3fr 1fr;

  }
  .vak3{
    grid-area: vak3;
    margin-top: 10px;
    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-areas:
    'vak3a vak3a'
    'vak3b vak3c'
    'vak3b vak3c'
    'vak3d vak3d'
    'vak3e vak3e';

  }
}