@font-face {
    font-family: Monarch;
    src: url(monarch.woff);
}

body {
  font-family: Work Sans;
  font-size: 25px;
  background-color: #d6ff00;
   background-image: url(loading.svg);
  background-size: 100px;
}

.blur {
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));
  pointer-events: none;
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  
}

a {
  text-decoration: underline;
  color: #000000;
  
}

h1 {
  font-size: 9vh;
  font-family: monarch;
  color: #000000;
  margin-bottom: 15px;
  text-align: left;
  line-height: 0.9;
  
}

h1:hover {
  color: #c4abff;
  text-shadow: 0px 0px 15px #c4abff;
}

h2 {
  font-size: 9vh;
  font-family: monarch;
  color: #c4abff;
  margin-bottom: 25px;
  text-align: right;
  font-weight: 400;
}

h3 {
  font-size: 9vh;
 font-family: monarch;
  color: #000000;
  margin-bottom: 25px;
  text-align: left;
  font-weight: 400;
}

h4 {
  font-size: 27px;
  font-family: Work Sans;
  font-weight: 400;
  color: #000000;
  margin-bottom: 10px;
  text-align: left;
  line-height: 1.2;
  
}

a.white {
  text-decoration: underline;
  color: #d6ff00;
}

.slideshow {
  position: relative;

  width: 100vw;
  height: 100vh;
  display: block;
  
  
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: left 0.6s;
}

.holder div {
  float: left;
  width: 33.333vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.green {
  background-color: #d6ff00;
}

.red {
  background-color: #ff6600;
}

.band {
  background-color: #c4abff;
  width: auto;
  height: 40px;
  color: #d6ff00;
  font-size: 27px;
  text-align: center;
  padding: 6px 0 0 0;
}

.about {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

.down {
  position: relative;
  bottom: 0;
}

div.title {
  
  height: 100vh;
  position: relative;
  background-size: cover;
  background-position: center;
  
  }

.engine {
  background-image: url(engine-animation-loop.gif);
}




hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #c4abff;
  margin: 10px 0 50px 0;
  padding: 0;
}



.contents {
}

.inner {
  padding: 20px;
  margin: 0px;
}

.innercover {
  padding: 20px 20px 20px 20px;
  margin: 0px;
}

.fader {
  background: linear-gradient(
    to right,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #ffffff
  
  );
}



.fadel {
  background: linear-gradient(
    to left,
     #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #d6ff00,
    #ffffff
    
  );
}

.preview {
  height: 100vh;
}

.default {
  background-image: url(default.png)
}

.aboutright {
  background-image: url(petra.png);
}

.aboutleft {
  background-image: url(denise.png);
}



.noel {
  background-image: url(noel.gif);
}


.bern {
  background-image: url(bern.png);
}


.leon {
  background-image: url(leon.jpg);
}

.stef {
  background-image: url(stef.gif);
}

.grace {
  background-image: url(grace.png);
}


.lando {
  background-image: url(lando.png);
}

.jon {
  background-image: url(jon.png);
}

.yannick {
  background-image: url(yannick.jpg);
}


.brie {
  background-image: url(brie.png);
}

.joe {
  background-image: url(joe.png);
}


.an {
  background-image: url(an.png);
}


.jeffrey {
  background-image: url(jeffrey.jpg);
}

.antoine {
  background-image: url(antoine.png);
}


.hardeep {
  background-image: url(hardeep.png);
}


.patrick {
  background-image: url(patrick.png);
}


.jonathan {
  background-image: url(jonathan.gif);
}

.jaakko {
  background-image: url(jaakko.png);
}


.ceccaldi {
  background-image: url(ceccaldi.png);
}

.ulla {
  background-image: url(ulla.png);
}

.petra {
  background-image: url(petra.png);
}

.denise {
  background-image: url(denise.png);
}

.lala {
  background-image: url(lala.png);
}

.ben {
  background-image: url(ben.png);
}

.viktor {
  background-image: url(viktor.png);
}









.scroll {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  
}

.logos {
  width: 50%;
  display: block;
  margin-left: auto;
margin-right: auto;

  
}

@media (max-width: 1300px) {
  
   body {
    font-family: Work Sans;
    font-size: 20px;
    
  }

  h1 {
    font-size: 65px;
    margin-bottom: 5px;
    
  }

  h2 {
    font-size: 65px;
    margin-bottom: 15px;
    
  
  }
  
   h3 {
    font-size: 65px;
    margin-bottom: 10px;
    
  }
  
   .logos {
  width: 100%;
 
  
}
  }


@media (max-width: 1026px) {
  .holder div {
    float: left;
    width: 50vw;
  }
  
  a {
    text-decoration: underline;
  
  }
  
    .preview {display: none;
}
  
 

  
}

@media (max-width: 768px) {
  
  .title {
    
  }
  
  .scroll {
    height: auto;
  }

  .holder div {
    float: none;
    width: 100vw;
  }

  body {
    font-family: Work Sans;
    font-size: 20px;
    
  }

  h1 {
    font-size: 8vh;
    margin-bottom: 5px;
    
  }

  h2 {
    font-size: 8vh;
    margin-bottom: 10px;
    
  
  }
  
   h3 {
    font-size: 8vh;
    margin-bottom: 10px;
    
  }

  h4 {
    font-size: 20px;
  }

  div.title {
    height: 100vh;
  }

  .about {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #000000;
  }

  .inner {
    padding: 15px 25px 15px 15px;
    margin: 0px;
    
  }
  
  .band {
 
  font-size: 22px;

}
  
  .blur {
    top: 0px;
  left: 0px;
  height: auto;}
  
  .logos {
  width: 50%;
  
  
}

 
}

@media (max-width: 500px) {
  .logos {
  width: 100%;}
}

@media (max-height: 667px) {
  .engine {
  background-image: url(engine-animation-loop-b.gif);
}
}