/*#############################################*/
/*############  alle css in 1 bestand #########*/
/*#############################################*/

                              /*#############################################*/
                              /*########### css voor layout #################*/
                              /*#############################################*/
* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
  }

:root {
        --ssb_yellow: #fcf579;
        --ssb_red: #e00808;
        --ssb_text:#003399;
        --sbb_shadow: #ffffcc;
        --ssb_orange: #e7470c;
        --ssb_background:#ffffb3;
        --ssb_background_trans:#ffffb3e6; /* laatste 2 digits bepalen opacity e6=90%*/
        --ssb_background_full_trans:#ffffb3ff; /* 100% transparant */
        --ssb_sky: #00b5e2;
        --white: #f9f9f9;
        --black: #36383F;
        --gray: #85888C;
      }
/* om kleur mee te geven aan socials icons */
  .blauw {color: var(--ssb_sky)}
  .rood {color:var(--ssb_red)}
  .zwart{color: var(--black)}
/* einde kleuren social icons */


/* Basic styling */

body{
   margin: 0;
   font-family: 'Poppins',arial,sans-serif;
   font-weight: 500;
   font-style: normal;
 }

 h2{font-family: 'Lemonada';
    font-size: 1.2rem;
    color: var(--ssb_red);
    text-align: center;
  }
  h3{font-family: 'Lemonada';
     font-size: 1rem;
     color: var(--ssb_red);
     text-align: center;
   }
   .center{
     margin-left: auto;
     margin-right: auto;
   }
/*   .center{
     margin: auto;
   }*/
   .ssb_center{
     text-align: center;
   }
   .sticky {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  padding: 5px;
  z-index: 100;
}
/* einde basic styling */
/*##############   layout #####################*/
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;
  }
  /* basisopbouw vd pagina met margin middengedeelte +3% tov top en bottom */
  ssb-rij1 {
  grid-area: ssb-rij1;
  display: grid;
  margin-left: 2%;
  margin-right: 2%;*
  overflow: visible;
  grid-template-areas:
  'ssb-header-top'
  'ssb-header-bottom';
}
ssb-rij2 {
  grid-area: ssb-rij2;
  display: grid;
  /*margin-left: 5%;
  margin-right:5%;*/
  grid-template-areas:
  'ssb-content-rij2';
}
ssb-rij3{
  grid-area: ssb-rij3;
  display: grid;
  margin-left: 2%;
  margin-right: 2%;
  grid-template-areas:
  'ssb-footer-top';
}
/* einde basisopbouw van de pagina */
.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);
  }
/*#########################################*/
/* componenten ssb-rij1 */
ssb-header-top{
  grid-area: ssb-header-top;
}
ssb-header-top img{
  max-width: 100%;
  margin-top: 10px;
}

/*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;
  /* hoogte en afronding gebaseerd op scherm 320px max */
  height:25px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius:  10px;
  /*padding: 2px;*/
  background: linear-gradient(to right, var(--ssb_orange),var(--ssb_background) 5% , var(--ssb_background) 95% ,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: 5%;
  margin-right: 5%;*/
  display: flex;
  justify-content: space-around;
  align-content: center;
  /*font-size: 1.25rem;*/
}
/*################################*/
/*    componenten rij2          */
/*################################*/
ssb-home{
  grid-area: ssb-home;
  display: grid;
  grid-template-areas:
  'ssb60';
}
ssb-basic{
  grid-area: ssb-basic;
  display: grid;
  grid-template-areas:
  'basic';
}
ssb-basic-2{
  grid-area: ssb-basic;
  display: grid;
  grid-template-areas:
  'basic'
  'basic1';
}
ssb-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: 1fr 1.5fr;
    grid-template-areas:
     'ssb-afb ssb-content1';

  }
.ssb-agenda-lo2{  /* layout2 agendapunt */
    display:grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas:
  'ssb-content1 ssb-afb';
  }
  .ssb-agenda-lo3{ /* layout3 agendapunt: boven elkaar */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    'ssb-afb'
    'ssb-content1';
  }
  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-afb{
    grid-area: ssb-afb;
  /*  max-height: 150px;*/
  }

  ssb-afb img{
  width: 100%;
    height: 100%;
  object-fit:contain;
  /*object-position: right;*/
  }
  .ssb_positionL{
    object-position: left;
    max-height: 150px;
  }
  .ssb_positionC{
    object-position: center;
    max-height: 250px;
  }
  .ssb_positionR{
    object-position: right;
    max-height: 150px;
  }

.vak{  /*grootte van het afbeeldingsvlak; waarden voor telefoonscherm
        aan te passen aan schermafmetingen */
  width: 210px;
  height:150px;
  background-color: #fffdd0;
  border: 2px solid black;
  border-radius: 10px;
  padding-top: 5px;
}

/* indeling contactpagina */
ssb-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;
}
/*   indeling galerij pagina  */
ssb-rij2-galerij{
  display: grid;
  grid-area: ssb-content-rij2;
  grid-template-columns: 1fr;
  grid-template-areas:
  'ssb-kop'
  'ssb-content1';
}

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-kop{
  gris-area: ssb-kop;
}
/*################################*/
/*    componenten rij3           */
/*################################*/
ssb-footer-top img{
  max-width: 100%;
}


                      /*#############################################*/
                      /*########## css voor slider ##################*/
                      /*#############################################*/
.container {
    margin: 0 auto;

    width: 100%; /* breedte tov parent */
    height: 420px;
    /*background-color: #fafaf4;*/
    background: transparent;
    position: relative;
    overflow: hidden;
}
.container, .slides, .slide-controls { z-index: 1; }
.vak{  /*grootte van het afbeeldingsvlak; waarden voor telefoonscherm
        aan te passen aan schermafmetingen */
  width: 190px;
  height:150px;
  background-color: #fffdd0;
/*background-color: #fafaf4;*/
  border: 2px solid black;
  border-radius: 10px;
}

.slides {
    display: flex;
      padding-bottom: 20px;

    height: 100%;
    transition: 0.7s;

}

.slide {
  min-width: 100%;

}
.slide h4{
  font-size: 0.75rem;
}
.slide img {
    width: 100%;
    /*height: 100%;*/
    max-height: 105px; /* in combinatie met afmetingen vak */
                      /* ook fototitel gebruikt hoogte! */
    object-fit: contain;


}

.slide-controls {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button{visibility: hidden;} /* verbergt knoppen; alleen automatisch scrollen */

#nextBtn, #prevBtn {
    cursor: pointer;
    background: transparent;
    font-size: 30px;
    border: none;
    padding: 10px;
    color: white;
    transition: opacity 0.3s;
}

#nextBtn:hover, #prevBtn:hover {
    opacity: 0.7;
}

#nextBtn:focus, #prevBtn:focus {
    outline: none;
}
/******************************/


/*#############################################*/
/*############ css voor menu ##################*/
/*#############################################*/
nav {
    display: flex;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;

}

a {
    font-weight: bold;
    /*color: var(--ssb_text);*/
    color: #efe558;
    text-decoration: none;
}
.ssb_button{ color: #efe558;
background-color: #cc0000;
padding: 10px;

text-align: center;
text-decoration: none;
margin: 4px ;
cursor: pointer;
border: 2px;
border-color:  #cc0000;
border-radius: 5px;
}
.ssb_button,
.ssb_button a {
  position: relative;
  z-index: 50;
}
.menu,
.submenu
 {
    list-style-type: none;
    background: var(--ssb_background_trans);
}


/*
.logo {
    font-size: 20px;
    padding: 7.5px 10px 7.5px 0;
}
*/
.item {
    padding: 0px  10px 10px 10px ;
}
.item.button {
    padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
    color: var(--ssb_text);
}
/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    justify-content: space-around;
    align-items: center;
    line-height:1.2em;
    z-index: 10;
}
.menu li a {
  font-family: 'Lemonada';
  color: var(--ssb_red);
  font-weight: bold;
  font-size: 0.6rem;
    display: block;
    padding-top: 5px;
}
.menu li.subitem a {
    padding: 10px;
}
.toggle {
    order: 1;
  /*font-size: 20px;*/
  font-size: 3em;

}


/*
.item.button {
    order: 2;
}
*/
.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}
.active .item {
    display: block;
}
 /* divider between buttons and menu links */
/*
.button.secondary {
    border-bottom: 1px #444 solid;
}
*/
/* Submenu up from mobile screens */
.submenu {
    display: none;
}
.submenu-active .submenu {
   display: block;
   z-index: 10;

}
.has-submenu i {
    /*font-size: 12px;*/
}
.has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    /*font-size: 1.2rem;*/
    line-height: 16px;
    font-weight: 900;
    content: "\f078";
    color: var(--ssb_text);
    padding-left: 5px;

}
.subitem a {
    padding: 10px 15px;
}
.submenu-active {
    /*background-color:var(--ssb_yellow);*/
  /*  border: solid ;
    border-width: 2px;
    border-color: var(--ssb_orange);
    border-radius: 20px;*/

}

/* Tablet menu */
@media all and (min-width: 320px) {
    .menu {
        justify-content: center;
    }
    /*
    .logo {
        flex: 1;
    }
    */
    /*
    .item.button {
        width: auto;
        order: 1;
        display: block;
    }
    */
    .toggle {
        flex: 1;
        text-align: center;
        order: 2;
    }
    /* Button up from tablet screen */
    /*
    .menu li.button a {
        padding: 10px 15px;
        margin: 5px 0;
    }
    .button a {
        background: #0080ff;
        border: 1px royalblue solid;
    }
    .button.secondary {
        border: 0;
    }
    .button.secondary a {
        background: transparent;
        border: 1px #0080ff solid;
    }
    .button a:hover {
        text-decoration: none;
    }
    .button:not(.secondary) a:hover {
        background: royalblue;
        border-color: darkblue;
    }
    */
}

/* Desktop menu */
@media all and (min-width: 769px) {
    .menu {
        align-items: flex-start;
        flex-wrap: nowrap;
        background: none;
    }
    /*
        .logo {
            order: 0;
        }
    */
    .item {
        order: 1;
        position: relative;
        display: block;
        width: auto;
    }
    /*
    .button {
        order: 2;
    }
    */
    .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 40px;
        background: var(--ssb_background);
        border: solid var(--ssb_red);
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .toggle {
        display: none;
    }
    .submenu-active {
        border-radius: 0;
        background: var(--ssb_background);
        border-left:solid var(--ssb_red) ;
        border-right: solid var(--ssb_red);
    }
}
                        /*#############################################*/
                        /*########### breakpoints #####################*/
                        /*#############################################*/

/*####################################################################*/
/* main layout  voor 481 px < scherm <576 px #########################*/
/*####################################################################*/
@media (min-width: 481px)
  {
     ssb-rij1{
       margin-left:5%;
       margin-right:5%;
     }
      ssb-rij2{
        margin-left:7%;
        margin-right:7%;
     }
     ssb-rij3{
       margin-left:5%;
       margin-right:5%;
     }
     h2{
       font-size: 1rem;
     }
     .vak{
       width:270px;
       height:180px;
     }
     .slide img {
         width: 100%;
         /*height: 100%;*/
         max-height: 150px; /* in combinatie met afmetingen vak */
                           /* ook fototitel gebruikt hoogte! */
     }

 }
/*####################################################################*/
/* main layout  voor 577 px < scherm <768 px #########################*/
/*####################################################################*/
@media (min-width: 577px)
  {
     ssb-rij1{
       margin-left:11%;
       margin-right:11%;
     }
      ssb-rij2{
        margin-left:13%;
        margin-right:13%;
     }
     ssb-rij3{
       margin-left:11%;
       margin-right:11%;
     }
     h2{
       font-size: 1.5rem;
     }
     menu li a{
       font-size: 0.8rem;
     }
     .vak{
       width:300px;
       height:200px;
     }
     .slide img {
         width: 100%;
         /*height: 100%;*/
         max-height: 170px; /* in combinatie met afmetingen vak */
                           /* ook fototitel gebruikt hoogte! */
     }

 }
/*####################################################################*/
/* main layout  voor 769 px < scherm <992 px #########################*/
/*####################################################################*/
@media (min-width: 769px)
  {
     ssb-rij1{
       margin-left:13%;
       margin-right:13%;
     }
      ssb-rij2{
        margin-left:15%;
        margin-right:15%;
     }
     ssb-rij3{
       margin-left:13%;
       margin-right:13%;
     }
     h2{
       font-size: 1.5rem;
     }
     ssb-header-bottom{
       height: 40px;
     }
     ssb-basic-2{
       grid-area: ssb-basic;
       display: grid;
       grid-template-columns: 3fr 1fr;
       grid-template-areas:
       'basic  basic1';
     }

     .vak{
       width:390px;
       height:260px;
     }
     .slide img {
         width: 100%;
         /*height: 100%;*/
         max-height:230px; /* in combinatie met afmetingen vak */
                           /* ook fototitel gebruikt hoogte! */
     }
    menu li a {
      font-size: 0.8rem;
    }

 }
/*####################################################################*/
/* main layout  voor 992 px < scherm <1200 px ########################*/
/*####################################################################*/
@media (min-width: 992px)
  {
     ssb-rij1{
       margin-left:15%;
       margin-right:15%;
     }
      ssb-rij2{
        margin-left:17%;
        margin-right:17%;
     }
     ssb-rij3{
       margin-left:15%;
       margin-right:15%;
     }
     h2{
       font-size: 1.5rem;
     }
     h3{
       font-size: 1.5rem;
     }
     ssb-header-bottom{
       height: 45px;
     }
     .vak{
       width:480px;
       height:320px;
     }
     .slide img {
         width: 100%;
         /*height: 100%;*/
         max-height: 290px; /* in combinatie met afmetingen vak */
                           /* ook fototitel gebruikt hoogte! */
     }
     /*#### aanpassingen ivm menu ###*/
     .menu li a {
         font-size:1rem;
     }

 }

/*####################################################################*/
/* main layout  voor 1201 px < scherm <1400 px #######################*/
/*####################################################################*/
@media (min-width: 1201px)
  {
     ssb-rij1{
       margin-left:17%;
       margin-right:17%;
     }
      ssb-rij2{
        margin-left:19%;
        margin-right:19%;
     }
     ssb-rij3{
       margin-left:17%;
       margin-right:17%;
     }
     h2{
       font-size: 2rem;
     }
     h3{
       font-size: 1.5rem;

     }
     ssb-header-bottom{
       height: 50px;
     }
     .vak{
       width:510px;
       height:340px;
     }
     .slide img {
         width: 100%;
         /*height: 100%;*/
         max-height: 310px; /* in combinatie met afmetingen vak */
                           /* ook fototitel gebruikt hoogte! */
     }
      menu li a {
        font-size: 1.5rem;
      }
 }

/*####################################################################*/
/* main layout  voor 1401 px < scherm ###### #########################*/
/*####################################################################*/
@media (min-width: 1401px)
  {
     ssb-rij1{
       margin-left:20%;
       margin-right:20%;
     }
      ssb-rij2{
        margin-left:22%;
        margin-right:22%;
     }
     ssb-rij3{
       margin-left:20%;
       margin-right:20%;
     }


     /*#### aanpassingen ivm slider ###*/
     .vak{
       width:600px;
       height:400px;
     }
    .slide img {
        width: 100%;
        /*height: 100%;*/
        max-height: 370px; /* in combinatie met afmetingen vak */
                          /* ook fototitel gebruikt hoogte! */
    }

 }