/* defaults */

html,
body {
  background-color: #2b2b2b;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

a :hover {
  z-index: 10000000;
}

.hidden {
  display: none;
}

#panelContainer {
  position: fixed;
  left: 0;
  top: 0;
}

#set-height {
  display: block;
}

#video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infoContainer {
  background: #2b2b2b;
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  top: 100vh;
  position: fixed;
  left: 0;
  z-index: 5;
}

.infoOpened {
  transition: 0.5s ease;
  opacity: 1;
  top: 0vh;
}

.exmachina {
  background: url(../img/2014-ex-machina.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .exmachina {
    background: url(../img/2014-ex-machina-small.jpg) no-repeat center center
      fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.district {
  background: url(../img/2009-district.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .district {
    background: url(../img/2009-district-small.jpg) no-repeat center center
      fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.contact {
  background: url(../img/1997-contact.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .contact {
    background: url(../img/1997-contact-small.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.independence {
  background: url(../img/1996-independence.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .independence {
    background: url(../img/1996-independence-small.jpg) no-repeat center center
      fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.terminator {
  background: url(../img/1984-terminator.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .terminator {
    background: url(../img/1984-terminator-small.jpg) no-repeat center center
      fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.blade {
  background: url(../img/1982-blade-runner.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .blade {
    background: url(../img/1982-blade-runner-small.jpg) no-repeat center center
      fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.et {
  background: url(../img/1982-et.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .et {
    background: url(../img/1982-et-small.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.twothousand {
  background: url(../img/1978-2001-space-oddesey.jpg) no-repeat center center
    fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .twothousand {
    background: url(../img/1978-2001-space-oddesey-small.jpg) no-repeat center
      center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.starwars {
  background: url(../img/1977-star-wars.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .starwars {
    background: url(../img/1977-star-wars-small.jpg) no-repeat center center
      fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.close {
  background: url(../img/1977-close-encounters.jpg) no-repeat center center
    fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .close {
    background: url(../img/1977-close-encounters-small.jpg) no-repeat center
      center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.day {
  background: url(../img/1951-the-day-the-earth-stood-still.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 900px) {
  .day {
    background: url(../img/1951-the-day-the-earth-stood-still-small.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

.planetapes {
    background: url(../img/1968-planet-apes.jpeg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  @media screen and (max-width: 900px) {
    .planetapes {
      background: url(../img/1968-planet-apes-small.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
  }
.metropolis {
    background: url(../img/1927-metropolis.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 900px) {
    .metropolis {
        background: url(../img/1927-metropolis-small.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}