*{box-sizing: border-box;}
#navlist
{margin: 0;
border: 3px solid #222;
padding: 0 0 15px 20px;
background-color: lightgreen;
font-family: verdana,sans-serif;
font-size: 14px;
font-weight: bold;
}

#navlist li
{
list-style: none;
padding: 0;
margin: 0;
}

#navlist #active
{
float: right;
margin-right: 10px;
}

#navlist li a
{
text-decoration: none;
border: 3px solid #000;
padding: 0 8px 2px 8px;
margin: 0 10px;
background-color: #FFF;
color: #000;
}

* html #navlist li a { padding: 0 8px; }

#navlist li a:hover
{
background-color: green;
color: #FFF;
}
header img{margin-top: 20%;
margin-left: 37%;
width: 25%;}
header{
background-image: url('../afbeeldingen/Colora-uden-web-2.jpg');
min-height: 80vh;
background-size: cover;
margin: none;
}
#hoofdmain{
background-color: lightblue;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 10% 40% 40%;
}

#hoofdmain {overflow: hidden;}

#hoofdmain :nth-child(1){text-align: center;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3}
#hoofdmain :nth-child(2){width: 100%;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;}
#hoofdmain :nth-child(3){text-align: center;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3}
#hoofdmain :nth-child(4){width: 100%;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4}
#hoofdmain :nth-child(5){
text-align: center;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 5}
#hoofdmain :nth-child(6){width: 100%;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4}
h2{font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;}

#Kleuradvies{
background-color:aquamarine;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}
#Kleuradvies :nth-child(1){text-align: center;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2}

#Kleuradvies :nth-child(2){text-align: center;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 12}

#Kleuradvies :nth-child(3){
border-radius: 50%;
background-color:dodgerblue;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3}

#Kleuradvies :nth-child(4){
border-radius: 50%;
background-color: cyan;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4}

#Kleuradvies :nth-child(5){
border-radius: 50%;
background-color: lime;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 4;
grid-row-end: 5}

#Kleuradvies :nth-child(6){
border-radius: 50%;
background-color:forestgreen;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 5;
grid-row-end: 6}

#Kleuradvies :nth-child(7){
border-radius: 50%;
background-color: red;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 6;
grid-row-end: 7}

#Kleuradvies :nth-child(8){
border-radius: 50%;
background-color: orange;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 7;
grid-row-end: 8}

#Kleuradvies :nth-child(9){
border-radius: 50%;
background-color: yellow;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 8;
grid-row-end: 9}

#Kleuradvies :nth-child(10){
border-radius: 50%;
background-color: pink;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 9;
grid-row-end: 10}

#Kleuradvies :nth-child(11){
border-radius: 50%;
background-color: black;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 10;
grid-row-end: 11}

#Kleuradvies :nth-child(12){
border-radius: 50%;
background-color: gray;
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 11;
grid-row-end: 12}

#Kleuradvies :nth-child(13){
text-align: center;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 11;
grid-row-end: 12}

#Kleuradvies :nth-child(14){
text-align: center;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 11;
grid-row-end: 12}

#Kleuradvies :nth-child(15){
text-align: center;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 12;
grid-row-end: 13}

#Kleuradvies :nth-child(16){
text-align: center;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 13;
grid-row-end: 14}

#Kleuradvies :nth-child(17){
text-align: center;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 13;
grid-row-end: 14}

#Kleuradvies :nth-child(18){
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 13;
grid-row-end: 14}

#Kleuradvies :nth-child(19){
text-align: center;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 14;
grid-row-end: 15}

#Kleuradvies :nth-child(20){
text-align: center;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 15;
grid-row-end: 16}

#Kleuradvies :nth-child(21){
text-align: center;
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 15;
grid-row-end: 16}

#Kleuradvies :nth-child(22){
text-align: center;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 15;
grid-row-end: 16}

#Kleuradvies :nth-child(23){
text-align: center;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 16;
grid-row-end: 17}

#Kleuradvies :nth-child(24){
text-align: center;
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 16;
grid-row-end: 17}