:root {
  --morning1: #243358;
  --morning2: #7B6982;
  --morning3: #ae8186;
  --goldenHour1: #eedac2;
  --goldenHour2: #e3d5bf;
  --goldenHour3: #ebe6d5;
  --midday1: #D3DDDE;
  --midday2: #D9DEDC;
  --midday3: #DEDFDB;
}

#debug-info {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 200px;
  background: pink;
  z-index: 9999;
  display: block;
}

/* TRAILER static parts */
#my-sky {
  background-color: #FFF;
  background-image: linear-gradient(to bottom, var(--morning1), var(--morning2), var(--morning3));
  height: 100%;
  position: absolute;
  width: 100%;
}
#my-sky img {
  position: absolute;
}
#my-sky img#img-sun {
  width: 16.5vw;
  top: 16vw;
}
#my-sky img#img-cloud {
  width: 31vw;
  top: 20vw;
}

/* TRAILER part1 */
#ani-scene-1 .ani-container {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
}
#ani-scene-1 .ani-items {
  position: relative;
}
#ani-scene-1 .ani-items img {
  position: absolute;
}
#ani-scene-1 .ani-center .ani-items {
  width: 1600px;
  border: 1px dashed lightblue;
  box-sizing: border-box;
}
#ani-scene-1 img {
  max-width: none;
  position: absolute;
  bottom: 0;
}
#ani-scene-1 #img-sun {
  top: 5vw;
  left: 5vw;
  transform-origin: center;
  transform: translate3d(0, 0, 0) scale(0.3);
  width: 17vw;
}
#ani-scene-1 #img-cloud {
  top: 5vw;
  right: 5vw;
  width: 31vw;
  transform: translate3d(0, 0, 0) scale(0.3);
  transform-origin: bottom;
}
#ani-scene-1 #img-hut {
  bottom: 0;
  transform-origin: center bottom;
  width: 100vw;
}
#ani-scene-1 #img-trees {
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
  width: 68vw;
}
#ani-scene-1 #img-mountain5 {
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
  width: 86vw;
}
#ani-scene-1 #img-mountain4 {
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
  width: 111vw;
}
#ani-scene-1 #img-mountain3 {
  bottom: 0px;
  left: 0;
  transform-origin: center bottom;
  width: 84vw;
}
#ani-scene-1 #img-mountain2 {
  bottom: 0px;
  left: 0;
  transform-origin: center bottom;
  width: 98vw;
}
#ani-scene-1 #img-logo {
  bottom: 0;
  left: 50%;
  margin-left: -15vw;
  transform-origin: center bottom;
  width: 30vw;
}
#ani-scene-1 #img-mountain1 {
  bottom: 0;
  transform-origin: center bottom;
  width: 85vw;
}
#ani-scene-1 #img-ground1 {
  bottom: 0;
  left: 0;
  width: 10%;
  transform-origin: center bottom;
}

/* TRAILER part2 */
#ani-trailer {
  height: 100vh;
  padding: 0;
  margin: 0;
}
#ani-trailer .ani-items {
  width: 100%;
  height: 100%;
}
#ani-trailer #ani-scene-2, #ani-trailer #ani-scene-1 {
  opacity: 1;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#ani-trailer #ani-scene-2 img, #ani-trailer #ani-scene-1 img {
  position: absolute;
}
#ani-trailer #terrain {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  transform-origin: left bottom;
}
#ani-trailer #img-solarpanel {
  transform-origin: center bottom;
  max-width: 37vw;
  right: 0vw;
  bottom: 0vw;
}
#ani-trailer #img-sun {
  top: 100px;
  left: 100px;
  transform-origin: center;
  transform: translate3d(0, 0, 0) scale(0.3);
}
#ani-trailer #img-cloud {
  top: 100px;
  right: 100px;
  transform: translate3d(0, 0, 0) scale(0.3);
  transform-origin: bottom;
}
#ani-trailer #img-machine {
  transform-origin: center bottom;
  transform-origin: center bottom;
  left: 25vw;
  max-width: 31vw;
  bottom: 1vw;
}
#ani-trailer #windcraft-container {
  position: absolute;
  transform-origin: center bottom;
  width: 100%;
  top: 0;
  bottom: 0;
}
#ani-trailer #img-windcraft {
  bottom: 0;
  transform-origin: center bottom;
  transform-origin: center bottom;
  width: 28vw;
  bottom: 0vw;
  right: 12vw;
}
#ani-trailer #img-wheel {
  bottom: 0;
  transform-origin: center center;
  width: 28vw;
  bottom: 12.9vw;
  right: 8vw;
}

#trailer-mobile-bot {
  display: none;
}

@media only screen and (orientation: portrait) {
  #trailer-mobile-bot {
    display: block;
    color: white;
    width: 100%;
    margin-top: 2em;
    margin-left: 2em;
  }
  #ani-trailer {
    position: relative;
    height: 66vh;
  }
  #ani-trailer #my-sky {
    height: 100%;
  }
  #ani-trailer #img-sun {
    width: 30vw;
  }
  #ani-trailer #img-cloud {
    width: 55vw;
  }
}
/*# sourceMappingURL=trailer-5.css.map */