body {
    background-color:rgba(209, 207, 207, 0.49);
    font-family: "Anton", Serif;
    text-shadow: 0 1px 1px gray;
}

/*h1 {
    margin-top:0;
    text-align: center;
    font-size: 4.8vw;
    color: #ffffff;
    font-family: "Anton", Serif;
    text-shadow: 0 1px 1px black;

}*/

html {
  margin-bottom: 2cm;

}




#banner{
    position: absolute ;
    z-index: -1;
    width:100%;
    max-width: 100%;
    height: 150px;

}

#title {
    text-align: center;
    position: static;
    font-size: 500%;
    color: #ffffff;
    margin-top:-1px;
}

#naam{
    text-align: center;
    position: relative;
    top: -50px;
    font-size: 200%;
    color: #ffffff;
    font-family: "Anton", Serif;
}


.pure-menu{
    position: relative;
    top: -67px;
    width: 100%;
    text-align:center;
    font-size: 150%;
    background-color: #c2c2d6;
}



.flex-container1 {
    position: relative;
    flex-direction: column;
    display: flex;
    flex-wrap: : wrap;
    align-items: center;
    max-width: 100%;
    height: 840px;
}

h2{
    text-align: center;
    position: relative;
    top: -30px;
    font-size: 300%;


}

.flex-item1 {
  background-image: url(Begin.jpg);
  width: 50%;
  max-width: 50%;
  height: 33.33%;
  background-size: 100% 100%;
  margin: 2px;
  text-align: center;
  font-size: 1500%;
}


.flex-item2 {
  background-image: url(Bergbeklimmen.jpg);
  width: 50%;
  max-width: 50%;
  max-height: 33.33%;
  background-size: 100% 100%;
  margin: 2px;
  text-align: center;
  font-size: 1500%;
}

.flex-item3 {
    background-image: url(Top.jpg);
    width: 50%;
    max-width: 50%;
    height: 33.33%;
    background-size: 100% 100%;
    margin: 2px;
    text-align: center;
    font-size: 1500%;
}

.cheat {
  opacity: 0;
  max-height: 33.33%;
  max-width: 100%;
}

.welkomstwoord{
    text-align:center;
    position: static;
    border-style: double;
    top: -80px;
    width: 60%;
    margin:0 auto;
    background-color: white;
    padding: 30px;
}

.flex-container2 {
    display: -webkit-flex;
    display: flex;
    position: relative;

}

.flex-stage1{
    background-image: url(vraagteken.jpg);
    width: 25%;
    height: 300px;
    margin: 2px;
    text-align: center;
    font-size: 1500%;
    color: #ffa03a;
}


.flex-container3 {
    display: -webkit-flex;
    display: flex;
    position: relative;

}

.flex-work{
    background-image: url(workinprogress.png);
    width: 25%;
    height: 300px;
    margin: 2px;
    text-align: center;
    font-size: 1500%;
    color: #ffa03a;
}



.link{
    color: #ffa03a;
}

#it{
    text-align:center;
    position: relative;
    top: -80px;
}

#itt{
    text-align: center;
    position: relative;
    top: -80px;
}

footer{
    text-align: center;
    position: relative;
    top: -60px;
}

progress {
  background-color: #f3f3f3;
  border: 0;
  height: 18px;
  border-radius: 9px;
  width: 400px;
}

.hoger{
    position: relative;
    top:-80px;
}

#stage{
    border-style: double;
    top: -100px;
    width: 50%;
    margin:0 auto;
    background-color: white;
    padding: 20px;
}

.pure-menu-children{
  opacity: 0.8;
  background-color: #c2c2d6;

}

.kenzo {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1cm;
    margin-left: 25%;
    padding: 5px;
    width: 50%;
}

.flex-container2 {
    top: -40px;
    display: flex;
    width: 100%;
    max-width:100%;
    height: 340px;

}
.flex-item{
    background-color: lightgrey;
    text-align: center;
    width: 60% ;
}

.flex-container4{
  display: flex;
  width: 100%;
  max-width:100%;
}

.flex-item6{
    background-color: lightgrey;
    text-align: center;
    width: 80% ;
}

#stage1{
    border-style: double;
    text-align: center;
    top: -100px;
    width: 80%;
    margin:0 auto;
    background-color: white;
    padding: 20px;
}

.flex-item7{
    text-align: center;
    width: 100% ;
    height: 10%;
}

.reportage {
  width: 100%;
}

.flex-item10{
    background-image: url(GNS32.JPG);
    border-style: solid;
    width: 33.33%;
    max-width: 33.33%;
    height: 100%;
}

.flex-item20{
    background-image: url(GNS33.JPG);
    border-style: solid;
    width: 33.33%;
    max-width:33.33%;
    height: 100%;
}
.flex-item30{
    background-image: url(GNS34.JPG);
    border-style: solid;
    width: 33.33%;
    max-width: 33.33%;
    height: 100%;

}

.flex-container10 {
    display: flex;
    width: 100%;
    max-width:100%;
    height: 340px;
}

.flex-item11{
    text-align: center;
    width: 33.33%;
    height: 100%;
}

.flex-container11 {
    display: flex;
    width: 100%;
    max-width:100%;
    height: 100%;
}

#stage2{
    border-style: double;
    text-align: center;
    top: -100px;
    width: 60%;
    margin:0 auto;
    margin-bottom: 1cm;
    background-color: white;
    padding: 20px;
}