@font-face {
  src: url(../fonts/genera/Genera-AltLight.ttf);
  font-family: genera;
}

main{
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
  height: calc(100vh / 1.05);
  /*position: absolute;*/

  text-align: center;

  /*background: linear-gradient(95deg, rgba(0,0,0,1) 0%, rgba(50,50,50,0.7) 55%, rgba(0,212,255,0) 100%),
      url("../img/home/modelfoto1.jpg");*/
  background: linear-gradient(90deg, rgba(240,230,230,1) 15%, rgba(171,171,171,0) 100%),
      url("../img/home/modelfoto1.jpg");
  /*background: rgb(67,99,172);
  background: linear-gradient(95deg, rgba(67,99,172,1) 0%, rgba(67,99,172,0.95) 44%, rgba(67,99,172,0) 100%),
      url("../main5.png");*/
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
}

.logo{
  margin: 4vh 0 0 4vw; padding: 0;
  box-sizing: border-box;
  width: 17vw;
  float: left;
  display: inline-block;
  background-color: inherit;
}

.hidden{
  display: none;
}

/*heel container kan beter gescheven worden*/
.container{
  font-family: genera;
  margin: 0; padding: 0;
  width: 95vw;
  position: absolute;
  left: 2vw;
  bottom: 7vh;
}

.container img{
  margin: 5vw 0 0 0; padding: 0;
  display: inline-block;
  box-sizing: border-box;
  height: 15vw;
  bottom: 0;
}

.container .title{
  font-size: 2.5vw;
}

.container .text{
  font-size: 1vw;
}

nav{
  margin: 0; padding: 0;
  width: 80%;
  font-family: genera;
  font-size: calc(100vw / 80);
  font-style: italic;
  z-index: 10;
  position: absolute;
  top: 40%;
  left: 60%;
  transform: translate(-50%, -50%);
}

nav ul{
  margin: 0; padding: 0;
  list-style-type: none;
}

nav li{
  padding: 0 calc(100vw / 75);
  float: left;
  text-align: center;
}

nav li:not(:first-child){
  border-left: 1px solid black;
}

nav a{
  color: black;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-weight: bold;
}

nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -20%;
  left: 0;
  background-color: black;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

nav a:hover:before {
  visibility: visible;
  width: 100%;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}



footer{
  font-family: Genera;
  display: table;
  text-align: center;
  width: 100%;
  background-color: #4363ac;
}

.box{
  margin: 2vh 10vw 10vw 0;
  color: white;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}

footer .bold{
  font-size: 120%;
}

@media (max-width: 1024px) {
  main{
    background: linear-gradient(115deg, rgba(240,230,230,1) 10%, rgba(171,171,171,0) 70%),
        url("../img/home/modelfoto1.jpg");
    background-repeat: no-repeat;
    background-position: 80%;
    background-size: cover;
  }
  .logo{
    width: 55%;
  }
  .arrow{
    display: none;
  }
  .box{
    width: 60vw;
    margin: 2vh 20vw 0 20vw;
    font-size: 3vw;
  }
  .container{
    display: none;
  }
  .hidden{
    display: block;
  }
}