html {
    font-family: Agency FB;
   
    background-color: #00bbf0;
    
}




.topNav {
  background-color: rgb(0, 218, 254);
  width: 120%;
  height: 40px;
  justify-content:space-around;
  position: relative;
  display: none;
  left:-50px;
}
.text2 {
left: 10vw;
display: none;
margin-right: -200px;
justify-self: left; 
position: relative;
left: 75px;
top: -40px;
}

.headertitle {
  width: 60%;
  
  z-index: 20;
  position: absolute;
  top: -0;
  left: 30vw;
  right: 0;
  bottom: 0;
}


  .menu {
    float: right;
    text-align: center;
    background-color:#00BBFF;
    height: 100%;
    border-left: 2px solid black;
    z-index: 20;
    padding-top: 50px;
    padding-left: 3px;
    padding-right: 3px;
    position: fixed;
    right: 0;
    top: 0;
    width: 15%;
    display: flex;
    flex-direction: column;
    
}




  ul {
    list-style-type: none;
  }

 a {
    display: inline-block;
    position: relative;
    bottom: -15vh;
    margin-top: 10vh;
 }

 a:hover {
    color: grey;
 }

img {
     display:block;
     margin-left: auto;
     margin-right: auto;
     height: 8vw;
        z-index: 1;
        

}

.banner-text {
    margin: auto;
    
    width: 210vh;
    display: inline-block;
    text-align: center;
    
    color: white;
    background-color: black;
    padding-bottom: 1vh;
    padding-top: 1vh;

    
}
.work {
  display: none;
}

.title {
  font-size: large;
  width: 50vh;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 80vh;
}
@media screen and (max-width: 600px) {
  .text2 {
    display: flex;
    justify-content: right;
    margin: 9vw;
  }

  .title {
    display: none;
  }
  .work {
    display: block;
  }

  html {
    width: 10vw;
  }
  body {
    width: 100vw;
  }

  .menu {
    display: none;
  }

 
  
  .banner-text {
      width: 50vh;
  }

  img {
      float: left;

  }
  
  .informatie h2 {
      display: inline-block;
      position: relative;
      font-size: small;
      right: 80vh;
      width: 40vh;
  }

  .informatie p {
      font-size: small;
      position: relative;
      display: inline-block;
      right: 80vh;
      width: 40vh;
  }

  .topNav {
    display: flex;
  }

 li{
  display: inline-block;
  margin: 50px;
  
  
 }

  a {
    
      position: absolute;
      top: 0px;
      margin-top: 10px;
      font-size: x-small;
      padding-left: 50px;
      width: 100px;
      display: block;
  }
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}