/* OPMAAK CSARDA MET TABELLEN (DIV) DIE SMALLER WORDEN */

* {

box-sizing: border-box;

}

.row::after {

content: "";

clear: both;

display: block;

}

[class*="col-"] {

float: left;

padding: 15px;

}

html {

 font-family: "Lucida Sans", sans-serif;

        color: #330099; font-size: 10pt;

        background-color: rgb(196, 196, 255);



/* font-family: "Times New Roman", serif;

*/

}


h1 {

font-size: 22pt; bold;

}

h2 {

font-size: 18pt; bold;

}

h3 {

font-size: 16pt; bold;

}

h4 {

font-size: 14pt; bold;

}

h5 {

font-size: 12pt; bold;

}

.header {

padding: 0px 6px 0px 6px;

}

.menu ul {

list-style-type: none;

margin: -10px;

padding: 0;

float: top;

font-size: 12pt;

}



.menu li {

padding: 8px;

margin-bottom: 7px;

background-color: #33b5e5;

color: #ffffff;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

cursor: pointer;


}



.menu li:hover {

background-color: #0099cc;

}



.aside {



text-align: center;

font-size: 14px;



}



.footer {

background-color: #0099cc;

color: #ffffff;

text-align: center;

font-size: 12px;

padding: 15px;

}



/* For desktop: */

.header {width: 70%;}

.col-1 {width: 8.33%;}

.col-2 {width: 180px;}

.col-3 {width: 180px;padding: 180px 0px 180px 20px;}



/* Lavendel */

.col-4 {width: 33.33%; padding: 0px 0px 0px 0px;

}

/* HOOFDTEKST */

.col-5 {width: 41.66%; padding: 0px 0px 0px 30px; margin:-10px;}



/* Diversen */
.col-7 {width: 40%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%; padding: 0px 0px 0px 20px; margin:-10px;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}



#mySidenav {display: none;

visibility: collapse; 

}

#lijst1 {display: block;

visibility: visible;

}

#lijst2 {display: block;

visibility: visible;

}

#lijst3 {display: block;

visibility: visible;

}

#lijst4 {display: block;

visibility: visible;

}

/* A Louer: */

.col-6 {width: 50%; padding: 0px 0px 0px 30px; margin:-1px;

float: left;
border-style: solid; 
border-color: #F0BCDC;
border-width: 4px;
background: #DDDEFF;

}

  /* SCHERMBREEDTES zelf gemeten:
   Vertikaal:
   Small (smaller than 361px)
    Medium (361px to 689px)
    Large (700px and larger)
   
   Horizontaal:
   Small (smaller than 600px)
    Medium (601px to 1103px)
    Large (1104px and larger)*/

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

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}


.col-3 {display: none;

visibility: collapse;

} 

#lavendel {display: none;

visibility: collapse;

}

#lavendel2 {display: none;

visibility: collapse;

}



#lijst1 {display: none;

visibility: collapse;

}

#lijst2 {display: none;

visibility: collapse;

}

#lijst3 {display: none;

visibility: collapse;

}

#lijst4 {display: none;

visibility: collapse;

}

#mySidenav {display: block;

visibility: visible;

} 

}

a {

text-decoration: none;

color: white;

}