@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

*{
    box-sizing: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Standaardfont maken */
    scrollbar-color: rgb(81, 81, 234) #e1e3ea54;
}
body, html {
    height: 100%;
    overflow-x: hidden;
  }
/*Responsive maken*/
[class*="col-"] {
    width: 100%;
    float:left;
    padding:15px;
  }


.bron{
    font-family: "Roboto Slab", 'Segoe UI', serif;
}
body{
    margin: 0 0;
    background-color: #E1E3EA;
}

h1{
    text-align: center;
}

p{
    text-align: center;
}

/* Hamburger menu knop animatie start hier */
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #E1E3EA;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  /* Eerste bar draaien */
  .change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
  }
  
  /* Tweede bar uitfaden */
  .change .bar2 {opacity: 0;}
  
  /* Derde bar draaien */
  .change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
  }

  /* Einde animatie */

  #hamburger:hover{
    cursor:pointer;
  }

.banner {
background-image:url(IMGs/downloaden.jpg);
background-size:cover;
width:100%;
height:183px;
background-repeat:no-repeat;
background-position:center;
} 

.content-desktop {display: block;}
.content-mobile {display: none;}
.tekst-desktop {display: block;}
.tekst-mobile {display: none;}

@media only screen and (min-width: 600px) {  /*telefoon en table*/
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    #content-desktop {display: none;}
    #content-mobile {display: block;}
    .tekst-desktop {display: none;}
    .tekst-mobile {display: block}
    .banner{
        height: 300px;
    }
}

@media only screen and (min-width: 768px) { /* Voor tablet */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    .banner{
        height: 400px;
    }
}

.row::after { /*Na een rij eronder beginnen*/
    content: "";
    clear: both;
    display: table;
  }

.menu { /* Knoppen op de hoofdpagina */
    width: 100%;
}

.menu {
    margin: 0;
    padding: 0;
}
.menuKnop{ /* de knoppen zelf van hoofdpagina*/    
    background-color: #E1E5EE;
    padding: 10px 10px;
    height: 300px;
    border: 2px solid rgb(81,81,234);
    box-shadow: rgb(180,180,180) 2px 3px 2px 2px;
    border-radius: 6px;
    text-align: center;
} 

.menuKnop:hover .textbox{ /* leuk effect van de textboxen op homepagina */
    background-color: rgb(81, 81, 234);
    border-color: rgb(31,31,184);
}



.menu a{ /*tekst zwart houden, ook al kan je erop klikken*/
    color:black;
    text-decoration: none;
}

.topnav a{ /*tekst wit maken en geen streep voor topnav*/
    color:white;
    text-decoration: none;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.menu h1{
    font-size: 20px;
}

.topnav h1{
    font-size: 20px;
}

.main { /*Volledig middenstuk 100% width geven*/
    width: 100%;
    height:100%;
    float: left;
}

.footer{ /*Footer kleur en hoogte geven*/
    background-color: rgb(81,81,234);
    text-align: center;
    color: white;
    height: 105px;
    padding: 10px;
}
.footer ul{ /*Basis-instellingen van ul voor footerknoppen*/
    width: 245px;
    margin: auto auto;
    margin-top: 20px
}
.footer li{ /*Basis=instellingen van Footerknoppen*/
    float:left;
    margin-right:40px;
}
.footer a{ /*Zorgen dat Footerknoppen niet blauw zijn met streep eronder*/
    color:white;
    text-decoration: none;
}
.footer li:hover{ /*Footerknoppen een hover-effect geven*/
    text-decoration: underline dashed 1px white;
}
.sideInfo{ /*Rechterkant basis-instellingen*/
    background-color: #D0D4DD;
    text-align: center;
    vertical-align:middle;
    overflow:scroll;
    overflow-x:hidden;
}

.content{ /*Linkerkant basis-instellingen*/
    height: 100%;
    float:left;
}
.main img{ /* Afbeeldingen op linkerkant aanpassen*/
    border: 2px gray solid;
    border-radius: 5px;
    height:auto;
    float: right;
}

.textbox { /* Veranderen van transparency van de achtergrond van de tekst op hoofdpagina knoppen */
    vertical-align:center;
    background-color:rgba(0, 0, 0, 0.295);
    background-size:100%;
    color: white;
    border-radius: 10px;
}

.sideInfo img{ /*Afbeeldingen aan de rechterkant een bepaalde width en height geven en in het midden zetten*/
    width: 70%;
    height: auto;
    position:relative;
    right:15%;
}

.topnav { /*Basiskleuren en instellingen voor topnav*/
    background-color: rgb(73, 73, 224);
    width:100%;
    overflow:hidden;
    border-bottom: rgb(103, 103, 254) 2px solid;
    height: auto;
    padding: 5px 5px;
  }
  
.topnav a { /*Één a laten zien voor breakpoint van 721px*/
    margin: 5px;
    text-align: center;
    width:60%;
    height:60px;
    float: left;
    display: block;
    color: #f2f2f2;
    padding:13px;
    text-decoration: none;
    font-size: 18px;
    box-shadow: rgb(55, 55, 208) 3px 3px 4px;
    border-radius: 5px;
}
@media (min-width:721px) {
    .topnav a { /*Alle a's laten zien op breakpoint van 721px*/
        float:left;
        padding: 10px 10px;
        margin: 5px;
        text-align: center;
        width:18%;
        height:60px;
        box-shadow: rgb(55,55,208) 3px 3px 4px;
        border-radius: 5px;
        display: block;
        color: #f2f2f2;
        text-decoration: none;
        font-size: 17px;
    }
}
  /* Hover kleur aanpassen */
  .topnav a:hover {
    background-color: rgb(63, 63, 216);
    box-shadow: rgb(53,53,206) 3px 3px 4px;
  }
  
  /* Active een andere kleur geven */
  .topnav a.active {
    background-color: rgb(60,60,213);
    box-shadow: rgb(50,50,203) 3px 3px 4px;
    color: white;
  }
  
  /* Hamburger knopje standaard laten verdwijnen */
  .topnav .icon {
    display: none;
  }

  @media screen and (max-width: 720px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block; /* op kleine schermen weer laten verschijnen */
    }

    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  

  #hamburger{
    width:15px;
  }
  
/* hallo! */