/*  reset browser setting */
* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  }
  h2{
    font-family: 'Lemonada';
    font-size: 2rem;
    color: var(--ssb_red);
    /*margin-bottom: 10px;*/
    text-align: center;
  }
  /*
  p{
    color: green;
  }
  */

  img{
    max-width: 100%;
    padding: 5px;
    border-radius: 20px;
  }
  .picture_left{
    max-height: 150px;
    float: inline-start;
    margin-inline-end: 10px;
  }
  .picture_right{
    max-height: 150px;
    float: inline-end;
  }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    top:0;
    padding: 5px;
    z-index: 100;
  }
/* main layout telephone*/
ssb-main-lo {
    display:grid;
    background: linear-gradient(0deg, var(--ssb_red) 10%,  var(--sbb_shadow));
    grid-template-rows: auto 1fr auto ;
    grid-template-areas:
      'ssb-rij1'
      'ssb-rij2'
      'ssb-rij3';
    /* fallback height */
    min-height:100vh;
    /* new small viewport height for modern browsers */
    min-height:100svh;
  }
/* ############################################################### */
/* ssb-rij1 : het gedeelte waar de header en het menu staat -*/
/* ############################################################### */
ssb-rij1 {
  grid-area: ssb-rij1;
  display: grid;
  margin-left: 5%;
  margin-right: 5%;
  overflow: visible;
  grid-template-areas:
  'ssb-header-top'
  'ssb-header-bottom';
}


ssb-header-top{
  grid-area: ssb-header-top;
}
/*ssb-header-bottom is container voor de achtergrond vd navbar
   hier wordt vorm en kleur gedefinieerd */
ssb-header-bottom{
  grid-area: ssb-header-bottom;
  display: grid;
  height:60px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius:  20px;
  /*padding: 2px;*/
  background: linear-gradient(to right, var(--ssb_orange),var(--ssb_background) 10% , var(--ssb_background) 90% ,var(--ssb_orange) );
  grid-template-areas:
  'menu';
}
/* ssb-menu-area is het gebied waar de navbar in wordt gezet*/
menu-area{
  grid-area: menu;

  margin-left: 10%;
  margin-right: 10%;

  display: flex;
  justify-content: space-around;
  align-content: center;
  /*font-size: 1.25rem;*/
}
/* ###################################### */
/* einde componenten ssb-rij1 */
/* ###################################### */



/* ############################################################### */
/* ssb-rij2 : het gedeelte waar pagina inhoud staat -*/
/* ############################################################### */
ssb-rij2 {
  display: grid;
  margin-left: 10%;
  margin-right:10%;
  grid-template-columns: 1fr;
  grid-template-areas:
  'ssb-content-rij2';
}

/* #################################################################*/
/* PAGINA SPECIFIEKE INDELINGEN */
/* #################################################################*/

/* inhouds gedeelte home - agenda*/

ssb-rij2-agenda{
  display: grid;
  grid-template-columns: 0.5fr 5fr 0.5fr;
  grid-template-areas:
  'ssb-kop ssb-kop ssb-kop'  /* agenda kop */
  'ssb-punt1 ssb-punt1 ssb-punt1'
  'ssb-punt2 ssb-punt2 ssb-punt2'
  'ssb-punt3 ssb-punt3 ssb-punt3'
  'ssb-punt4 ssb-punt4 ssb-punt4'
  'ssb-punt5 ssb-punt5 ssb-punt5'
  'ssb-punt6 ssb-punt6 ssb-punt6'
  'ssb-punt7 ssb-punt7 ssb-punt7'
  'ssb-punt8 ssb-punt8 ssb-punt8'
  'ssb-punt9 ssb-punt9 ssb-punt9';
}
  ssb-kop{                    /* gebied voor kop agenda*/
    grid-area:ssb-kop;
    display: block;
    max-height:4em;
  }
  ssb-punt1{                    /* gebied 1e agendapunt*/
    grid-area:ssb-punt1;
  }
  ssb-punt2{                    /* gebied 2e agendapunt*/
    grid-area:ssb-punt2;
  }
  ssb-punt3{                    /* gebied3e agendapunt*/
    grid-area:ssb-punt3;
  }
  ssb-punt4{                    /* gebied 4e agendapunt*/
    grid-area:ssb-punt4;
  }
  ssb-punt5{                    /* gebied 5e agendapunt*/
    grid-area:ssb-punt5;
  }
  ssb-punt6{                    /* gebied 6e agendapunt*/
    grid-area:ssb-punt6;
  }
  ssb-punt7{                    /* gebied 7e agendapunt*/
    grid-area:ssb-punt7;
  }
  ssb-punt8{                    /* gebied 8e agendapunt*/
    grid-area:ssb-punt8;
  }
  ssb-punt9{                    /* gebied 9e agendapunt*/
    grid-area:ssb-punt9;
  }
  .ssb-agenda-lo1{   /* layout1 agendapunt */
    display:grid;
    /*grid-template-columns: 1.5fr 1fr;*/
    grid-template-areas:
     'ssb-afb'
    'ssb-content1';

  }
  .ssb-agenda-lo2{  /* layout2 agendapunt */
    display:grid;
    /*grid-template-columns: 1fr 1.5fr;*/
    grid-template-areas:
  'ssb-afb'
  'ssb-content1';
  }
  .ssb-agenda-lo3{ /* layout3 agendapunt: boven elkaar */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    'ssb-afb'
    'ssb-content1';
  }

  ssb-afb{
    grid-area: ssb-afb;
    display: block;
  }

/* einde indeling home -agenda */
/* ######################################################*/
/* indeling contactpagina */
ssb-rij2-contact{
  font-size: 12px;
  display: grid;
  grid-area: ssb-content-rij2;
  grid-template-columns: 1fr;
  grid-template-areas:
  'ssb-contact1'
  'ssb-contact2'
  'ssb-contact3';
}
ssb-contact1{
  grid-area: ssb-contact1;
  display: grid;
  text-align: center;
}
ssb-contact2{
  grid-area: ssb-contact2;
  display: grid;
  justify-content: center;
}
ssb-contact3{
  grid-area: ssb-contact3;
  display: grid;
  text-align: center;
  align-content: flex-end;
}
.ssb-icons{
  display: flex;
  justify-content: space-around;
  align-content: flex-end;
}
.ssb-tel{
  display: flex;
  justify-content: center;
}
/* einde indeling contactpagina */
/
/* lo inhouds gedeelte galerij*/
.ssb-rij2-galerij{
  margin-left: 5%;
  margin-right: 5%;
  display: grid;
  grid-template-columns: 0.25fr 5fr 0.25fr;
  grid-template-areas:
  'ssb-left ssb-content1 ssb-right';
}

ssb-content{
  grid-area: ssb-content;
  display: block;
  text-align: left;
}
ssb-content1{    /* img hor en ver geecentreerd */
  grid-area: ssb-content1;
  display: block;
  text-align: center;
  align-content: center;
}
.ssb-content-looks{ /* opmaak voor content blokken */
  margin:  5px 20px;
  padding-left:10%;
  padding-right:10%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 20px;
  background: linear-gradient(to right, #e7470c , #ffffb3 10% , #ffffb3 90% , #e7470c);
}

/* footer gedeelte */
ssb-rij3{
  grid-area: ssb-rij3;
  display: grid;
  margin-left: 5%;
  margin-right: 5%;
  grid-template-columns: 0.25fr 5fr 0.25fr;
  grid-template-areas:
  'ssb-footer-top ssb-footer-top ssb-footer-top'
  'ssb-footer-bottom ssb-footer-bottom ssb-footer-bottom';
}
ssb-footer-top{
  grid-area: ssb-footer-top;

}
/*
ssb-footer-bottom{
  grid-area: ssb-footer-bottom;
  background: var(--ssb_yellow);
  font-size: 0.8rem;
  text-align: center;
  display: grid;
  grid-template-columns:1fr;
  grid-template-areas:
  'bottom3 '
  'bottom4 '
  'bottom2';
}

ssb-bottom1{
  grid-area: bottom1;
  padding: 5px;
}
ssb-bottom2{
  grid-area: bottom2;
  padding: 5px;
}
ssb-bottom3{
  grid-area: bottom3;
  padding: 5px;
}
ssb-bottom4{
  grid-area: bottom4;
  padding: 5px;
}
ssb-bottom5{
  grid-area: bottom5;
  padding: 5px;
}
*/
/* tablet */

@media (min-width:640px){
 /*h2{color: green;}*/

 .ssb-agenda-lo1{   /* layout1 agendapunt */
   display:grid;
   grid-template-columns: 1.5fr 1fr;
   grid-template-areas:
   'ssb-content1 ssb-afb';
 }
 .ssb-agenda-lo2{  /* layout2 agendapunt */
   display:grid;
   grid-template-columns: 1fr 1.5fr;
   grid-template-areas:
   "ssb-afb ssb-content1";
 }
 ssb-rij2-contact{
   font-size: 16px;
 }
 .menu li a {
   font-size: 12px;
  /* color: green;*/
 }
}


/* WIDE SCREEN */

@media (min-width:720px){
/*h2{color: magenta;}*/
ssb-rij1{
  margin-left:15%;
  margin-right:15%;
}
 ssb-rij2{
 margin-left:17%;
   margin-right:17%;
}
ssb-rij3{
margin-left:15%;
  margin-right:15%;
}

    menu-area{
      max-height: 50px;
    }
    .ssb-content-looks{ /* opmaak voor content blokken */
      padding-left:10%;
      padding-right: 10%;
    }

/*
    .menu li a {
      font-size: 12px;
      color: magenta;
    }*/
  }
  /* einde min width 720 */

 @media (min-width:1080px){
  /*  h2{color: purple;}*/


   ssb-rij1{
   margin-left:15%;
     margin-right:15%;
   }
    ssb-rij2{
    margin-left:18%;
      margin-right:18%;
   }
   ssb-rij3{
   margin-left:15%;
     margin-right:15%;
   }
   .ssb-agenda-lo3{ /* layout3 agendapunt: naast elkaar */
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
     'ssb-content1 ssb-afb';
   }
   .menu li a{
    /* color: purple;*/
     font-size: 14px;
    }
 }

  @media (min-width: 1440px) {
  /*  h2{color: black;}*/
    ssb-rij1{

    margin-left:20%;
      margin-right:20%;
    }
     ssb-rij2{

     margin-left:22%;
       margin-right:22%;
    }
    ssb-rij3{

    margin-left:20%;
      margin-right:20%;
    }
    .menu li a{
    /*  color: black;*/
      font-size: 16px;
     }
 }

  /*
@media (min-width:1024px) {
  ssb-rij1{
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-areas:
    'ssb-left ssb-header-top ssb-right'
    'ssb-left ssb-header-bottom ssb-right';
  }
  ssb-rij2-1{
        grid-template-columns: 1fr 5fr 1fr;
        grid-template-areas:
        'ssb-left ssb-content2 ssb-right';
      }
  ssb-rij2-2{
    grid-template-columns: 1fr 2.5fr 2.5fr 1fr;
    grid-template-areas:
    'ssb-left ssb-content1 ssb-content2 ssb-right';
  }
  ssb-item2{
    grid-area:ssb-item2;
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas:
    "ssb-content1 ssb-afb";
  }
  ssb-item3{
    grid-area:ssb-item3;
    display:grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas:
    "ssb-afb ssb-content1";
  }
  ssb-item4{
    grid-area:ssb-item4;
    display:grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
    "ssb-content1 ssb-afb";
  .ssb-rij2-galerij {
    grid-template-columns: 1fr 5fr  1fr;
    grid-template-areas:
    'ssb-left ssb-content3  ssb-right';
  }
  ssb-rij3{
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-areas:
    'ssb-left ssb-footer-top ssb-right'
    'ssb-footer-bottom  ssb-footer-bottom ssb-footer-bottom';
  }
  ssb-footer-bottom{
    display: grid;
    grid-template-columns: 0.5fr 2fr 2fr 2fr 0.5fr;
    grid-template-areas:
    'bottom1 bottom2 bottom3 bottom4 bottom5';
  }

}