@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

/* Global Variables
   --------------------------------------------- */
:root {
  --cycle-duration: 86400s;
}

/* Global Styles
  ---------------------------------------------- */
html {
  font-family: "Open Sans", sans-serif;
  background: #0d133a;
  height: 100%;
  font-size: 100%;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-smooth: antialiased;
  overflow: hidden;
  position: relative;
}
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
  position: relative;
  opacity: 0;
  transition: all 8s ease;
}
body.loaded {
  opacity: 1;
}
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
svg:not(:root) {
  overflow: hidden;
}
a {
  color: white;
  text-decoration: none;
}

/* Animation globals
  ---------------------------------------------- */
#landscape,
.land,
#bottom,
.stags,
.stag,
.counter:before,
#lensFlare,
.sunMask {
  animation-duration: var(--cycle-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
}

/* Background gradients
  ---------------------------------------------- */
#sky {
  height: 60%;
  margin-bottom: -6px;
  position: absolute;
  top: 0px;
  z-index: 2;
}
#sky-rect {
  height: 100%;
}

#reflection,
#sunMask {
  height: 40%;
  position: absolute;
  top: 60%;
  z-index: 4;
}
#reflection-rect {
  height: 100%;
}
#sunMask {
  background: #0d133a;
  height: 40%;
  position: absolute;
  top: 60%;
  width: 100%;
}

/* Stag
  ---------------------------------------------- */
#stag {
  position: absolute;
  bottom: 15.3%;
  width: 6.3%;
  left: 38%;
  z-index: 5;
}
.stag {
  width: 100%;
  position: absolute;
  bottom: 0px;
}
.stags {
  animation-name: stags;
}
@keyframes stags {
  0% {
    fill: #0d141e;
  }
  4% {
    fill: #101522;
  }
  8% {
    fill: #121726;
  }
  12% {
    fill: #141829;
  }
  16% {
    fill: #1c1e3c;
  }
  20% {
    fill: #22214f;
  }
  24% {
    fill: #262262;
  }
  28% {
    fill: #1d4065;
  }
  32% {
    fill: #125768;
  }
  36% {
    fill: #1e4553;
  }
  40% {
    fill: #1e404e;
  }
  44% {
    fill: #1e3b49;
  }
  48% {
    fill: #1d3643;
  }
  52% {
    fill: #1c313e;
  }
  56% {
    fill: #1c3344;
  }
  60% {
    fill: #1c3449;
  }
  64% {
    fill: #1b344f;
  }
  68% {
    fill: #183454;
  }
  72% {
    fill: #242b4a;
  }
  76% {
    fill: #2b2241;
  }
  80% {
    fill: #24203c;
  }
  84% {
    fill: #1d1d37;
  }
  88% {
    fill: #151a32;
  }
  92% {
    fill: #14192c;
  }
  96% {
    fill: #111725;
  }
  100% {
    fill: #0d141e;
  }
}
#stag1 {
  animation-name: stag_one;
  width: 108%;
  left: -20%;
}
@keyframes stag_one {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
#stag2 {
  animation-name: stag_two;
}
@keyframes stag_two {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#stag3 {
  animation-name: stag_three;
  width: 144%;
  left: -10%;
  bottom: -3%;
}
@keyframes stag_three {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Sun
  ---------------------------------------------- */
.sunMask {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: -webkit-gradient(
    linear,
    left 50%,
    left 60%,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
  );
  z-index: 4;
  mix-blend-mode: screen;
}
.sun {
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  right: -51%;
  top: -330%;
}
.sun div {
  background: transparent url(../img/sun.svg);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
}
.suncrane {
  animation: suncrane var(--cycle-duration) linear infinite;
  position: absolute;
  width: 21%;
  height: 4%;
  background: transparent;
  margin: auto;
  top: 57%;
  left: 0;
  right: 0;
}
@keyframes suncrane {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(-270deg);
  }
}
.sun:before {
  display: block;
  content: " ";
  animation: glare var(--cycle-duration) linear infinite;
  position: absolute;
  width: 120%;
  height: 120%;
  background: url(../img/glare.svg) no-repeat scroll center;
  top: -10%;
  left: -10%;
  background-size: 100%;
}

@keyframes glare {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  36% {
    opacity: 0.3;
  }
  68% {
    opacity: 0.3;
  }
  74% {
    opacity: 0;
  }
  100% {
    transform: rotate(800deg);
    opacity: 0;
  }
}

.sun:after {
  display: block;
  content: " ";
  position: absolute;
  background: white;
  width: 10%;
  height: 10%;
  top: 45%;
  border-radius: 100%;
  margin: auto;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 80px 30px white;
}

/* Clouds
  ---------------------------------------------- */
.clouds {
  position: absolute;
  width: 100%;
  z-index: 4;
  mix-blend-mode: screen;
  height: 100%;
}
.clouds svg {
  width: 60%;
  position: absolute;
  top: 51%;
  filter: blur(2px);
  opacity: 0.4;
  left: -60%;
  animation-duration: var(--cycle-duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: clouds;
}
@keyframes clouds {
  0% {
    transform: translate3d(110%, 0px, 0px);
    opacity: 0;
  }
  19% {
    opacity: 0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.2;
  }
  75% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    transform: translate3d(150%, 0px, 0px);
    opacity: 0;
  }
}

/* Lens flare
  ---------------------------------------------- */
.lighting {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 8;
  opacity: 0.3;
  -webkit-mask-image: -webkit-gradient(
    linear,
    left 50%,
    left 60%,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 1))
  );
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(3px);
}
.lighting .suncrane {
  width: 100%;
}
#lensFlare {
  transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
  animation-name: flaring;
}

@keyframes flaring {
  0% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity: 0;
  }
  28% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity: 0;
  }
  35% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity: 1;
  }
  70% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity: 1;
  }
  78% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity: 0;
  }
  100% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity: 0;
  }
}

/* Sun on lake twinkles
  ---------------------------------------------- */
.twinkleWrap {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.55;
}

.twinkles {
  width: 2.3%;
  position: absolute;
  right: 49.2%;
  top: 72.5%;
  animation: twinkles var(--cycle-duration) linear infinite;
}
@keyframes twinkles {
  0% {
    transform: translate(450%, 0%);
    opacity: 0;
  }
  32% {
    opacity: 0;
  }
  34% {
    opacity: 1;
  }
  36.5% {
    transform: translate(450%, 0%);
  }
  54% {
    transform: translate(0%, 0%);
  }
  72% {
    transform: translate(-450%, 0%);
    opacity: 1;
  }
  78% {
    opacity: 0;
  }
  100% {
    transform: translate(-450%, 0%);
    opacity: 0;
  }
}
.twinkles:before {
  content: " ";
  display: none;
  position: absolute;
  height: 600px;
  width: 3px;
  background: red;
  top: -600px;
  left: 50%;
}
.twinkles svg {
  width: 100%;
  position: absolute;
  top: 0;
}
#twinkle1 {
  animation: twinkle1 2s linear infinite;
}
@keyframes twinkle1 {
  0% {
    opacity: 1;
  }
  33.33% {
    opacity: 0;
  }
  66.66% {
    opacity: 0;
  }
  99.99% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
#twinkle2 {
  animation: twinkle2 2s linear infinite;
}
@keyframes twinkle2 {
  0% {
    opacity: 0;
  }
  33.33% {
    opacity: 1;
  }
  66.66% {
    opacity: 0;
  }
  99.99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#twinkle3 {
  animation: twinkle3 2s linear infinite;
}
@keyframes twinkle3 {
  0% {
    opacity: 0;
  }
  33.33% {
    opacity: 0;
  }
  66.66% {
    opacity: 1;
  }
  99.99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Vignette
  ---------------------------------------------- */
.vignette {
  background: radial-gradient(transparent 60%, rgb(1, 14, 39) 130%);
  background-size: cover;
  height: 100%;
  z-index: 9;
  position: absolute;
  width: 100%;
  pointer-events: none;
}

/* Stars
  ---------------------------------------------- */
.stars {
  height: 100%;
  z-index: 2;
  position: absolute;
  width: 100%;

  overflow: hidden;
}
.starWrap {
  height: 60%;
  width: 100%;
  position: relative;
}
.starProject {
  overflow: hidden;
}
.starReflect {
  overflow: hidden;
  height: 40%;
  opacity: 0.9;
  top: 1%;
}
#stars {
  position: absolute;
  width: 120%;
  border-radius: 100%;
  margin: auto;
  left: -10%;
  right: 0;
  animation: stars 172800s linear infinite;
  transform: rotate(0deg);
  top: -35%;
}

@keyframes stars {
  100% {
    transform: rotate(-360deg);
  }
}

#starReflection {
  position: absolute;
  width: 120%;
  border-radius: 100%;
  margin: auto;
  left: -10%;
  right: 0;
  animation: starsReflect 172800s linear infinite;
  transform: rotate(0deg);
  top: initial;
  bottom: -102%;
}
@keyframes starsReflect {
  100% {
    transform: rotate(360deg);
  }
}

/* Sprites
  ----------------------------------------------- */
.spriteWrap {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 13;
  animation: sprites var(--cycle-duration) linear infinite;
  pointer-events: none;
}
@keyframes sprites {
  0% {
    opacity: 0.8;
  }
  20% {
    opacity: 0.8;
  }
  25% {
    opacity: 0;
  }
  73% {
    opacity: 0;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.8;
  }
}

#sprites {
  height: 100%;
  width: 100%;
}

/* Controls
  ---------------------------------------------- */
.hide {
  display: none;
}

.controls {
  position: absolute;
  top: 0px;
  width: 20%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.16);
  height: 100%;
  width: 380px;
  padding: 23px;
  /* transform: translate3d(-250px, 0px, 0px);
  -moz-transform: translate3d(-250px, 0px, 0px);
  -o-transform: translate3d(-250px, 0px, 0px);
  -ms-transform: translate3d(-250px, 0px, 0px);
  transform: translate3d(-250px, 0px, 0px); */
  opacity: 0;
}

.controls.left {
  left: 0px;
  transform: translate3d(-250px, 0px, 0px);
  -moz-transform: translate3d(-250px, 0px, 0px);
  -o-transform: translate3d(-250px, 0px, 0px);
  -ms-transform: translate3d(-250px, 0px, 0px);
  transform: translate3d(-250px, 0px, 0px);
}

.controls.right {
  right: 0px;
  transform: translate3d(250px, 0px, 0px);
  -moz-transform: translate3d(250px, 0px, 0px);
  -o-transform: translate3d(250px, 0px, 0px);
  -ms-transform: translate3d(250px, 0px, 0px);
  transform: translate3d(250px, 0px, 0px);
}

.controls,
.controls * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.controls:hover {
  transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.controls.hover {
  transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.controls ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.controls ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: white;
}
.controls ul li > * {
  padding: 5px;
}
.controls ul li span.title {
  display: inline-block;
  padding: 10px 0px;
}
.title {
  font-size: large;
  font-weight: bold;
}
.controls ul li a {
  display: block;
  padding: 10px 0px;
}
.controls ul li a:hover {
  /*padding-left: 10px;*/
  font-weight: bold;
}
.controls ul li a.active {
}
.controls.left ul li a.active:after {
  content: "on";
  float: right;
}
.controls.right ul li a.active:after {
  content: "on";
  float: left;
}

.noise {
  width: 100%;
  height: 100%;
  background: url(../img/noise.jpg);
  opacity: 0.06;
  z-index: 9;
  position: absolute;
  top: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.counter {
  color: rgba(255, 255, 255, 0.12);
  position: absolute;
  width: calc(100% - 46px);
  bottom: 21px;
  text-align: justify;
  font-size: 0px;
}
.counter:before {
  content: ":";
  display: inline-block;
  position: absolute;
  animation-name: timer;
  background: rgba(255, 255, 255, 0.03);
  text-align: right;
  left: 0px;
  bottom: 0px;
  color: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  line-height: 34px;
}
@keyframes timer {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.video-js.vjs-audio {
  height: 3em;
  width: 100%;
}
.video-js.vjs-audio .vjs-big-play-button {
  display: none;
}
.video-js.vjs-audio .vjs-control-bar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.video-js.vjs-audio .vjs-loading-spinner {
  display: none;
}
.video-js.vjs-audio.vjs-waiting .vjs-progress-holder:not(.vjs-seeking) {
  height: 0.5em;
  background-image: repeating-linear-gradient(
    -45deg,
    #73859f,
    #73859f 11px,
    #eee 10px,
    #eee 20px
  );
  border-radius: 3px;
  background-size: 28px 28px;
  transition: height 0.5s;
  animation: vjs-slider-indeterminate 0.5s linear infinite;
}
.video-js.vjs-audio.vjs-waiting
  .vjs-progress-holder:not(.vjs-seeking)
  .vjs-play-progress {
  display: none;
}
@keyframes vjs-slider-indeterminate {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28px 0;
  }
}

/* Landscape
  ---------------------------------------------- */
#landscape {
  width: 100.5%;
  position: absolute;
  bottom: 11%;
  z-index: 5;
}

#bottom {
  animation-name: bottomFill;
  height: 100%;
  position: absolute;
  top: 88%;
  width: 100%;
  z-index: 5;
}
@keyframes bottomFill {
  0% {
    background: #0d141e;
  }
  4% {
    background: #101522;
  }
  8% {
    background: #121726;
  }
  12% {
    background: #141829;
  }
  16% {
    background: #1c1e3c;
  }
  20% {
    background: #22214f;
  }
  24% {
    background: #262262;
  }
  28% {
    background: #1d4065;
  }
  32% {
    background: #125768;
  }
  36% {
    background: #1e4553;
  }
  40% {
    background: #1e404e;
  }
  44% {
    background: #1e3b49;
  }
  48% {
    background: #1d3643;
  }
  52% {
    background: #1c313e;
  }
  56% {
    background: #1c3344;
  }
  60% {
    background: #1c3449;
  }
  64% {
    background: #1b344f;
  }
  68% {
    background: #183454;
  }
  72% {
    background: #242b4a;
  }
  76% {
    background: #2b2241;
  }
  80% {
    background: #24203c;
  }
  84% {
    background: #1d1d37;
  }
  88% {
    background: #151a32;
  }
  92% {
    background: #14192c;
  }
  96% {
    background: #111725;
  }
  100% {
    background: #0d141e;
  }
}

/* Land - layer 1 animation */
#landscape .layer1 {
  fill: #f1f2f2;
  animation-name: layer1;
}
@keyframes layer1 {
  0% {
    fill: #244154;
  }
  4% {
    fill: #344358;
  }
  8% {
    fill: #42465d;
  }
  12% {
    fill: #4f4761;
  }
  16% {
    fill: #7e5773;
  }
  20% {
    fill: #a3517f;
  }
  24% {
    fill: #f3829f;
  }
  28% {
    fill: #d4b2af;
  }
  32% {
    fill: #aedabb;
  }
  36% {
    fill: #a1d6d6;
  }
  40% {
    fill: #9ed5dd;
  }
  44% {
    fill: #9ad4e4;
  }
  48% {
    fill: #97d3ea;
  }
  52% {
    fill: #92d3f4;
  }
  56% {
    fill: #95c8da;
  }
  60% {
    fill: #96bdc5;
  }
  64% {
    fill: #96b3b2;
  }
  68% {
    fill: #96aa9e;
  }
  72% {
    fill: #af866a;
  }
  76% {
    fill: #c0633b;
  }
  80% {
    fill: #9d5e51;
  }
  84% {
    fill: #7b5960;
  }
  88% {
    fill: #59546d;
  }
  92% {
    fill: #484e64;
  }
  96% {
    fill: #37475c;
  }
  100% {
    fill: #244154;
  }
}

/* Land - layer 2 animation */
#landscape .layer2 {
  fill: #e6e7e8;
  animation-name: layer2;
}
@keyframes layer2 {
  0% {
    fill: #0f2b46;
  }
  4% {
    fill: #1c2d4a;
  }
  8% {
    fill: #272e4e;
  }
  12% {
    fill: #302f52;
  }
  16% {
    fill: #663966;
  }
  20% {
    fill: #913776;
  }
  24% {
    fill: #d94a93;
  }
  28% {
    fill: #bb94ad;
  }
  32% {
    fill: #76ccce;
  }
  36% {
    fill: #6baec9;
  }
  40% {
    fill: #62a7ca;
  }
  44% {
    fill: #59a0cb;
  }
  48% {
    fill: #5099cc;
  }
  52% {
    fill: #4692cf;
  }
  56% {
    fill: #4d8fbd;
  }
  60% {
    fill: #518caf;
  }
  64% {
    fill: #548aa1;
  }
  68% {
    fill: #578793;
  }
  72% {
    fill: #7e6768;
  }
  76% {
    fill: #8f4244;
  }
  80% {
    fill: #74404d;
  }
  84% {
    fill: #593d55;
  }
  88% {
    fill: #393b5d;
  }
  92% {
    fill: #2c3655;
  }
  96% {
    fill: #1f304e;
  }
  100% {
    fill: #0f2b46;
  }
}

/* Land - layer 3 animation */
#landscape .layer3 {
  fill: #d1d3d4;
  animation-name: layer3;
}
@keyframes layer3 {
  0% {
    fill: #0f2944;
  }
  4% {
    fill: #1b2b47;
  }
  8% {
    fill: #252c4b;
  }
  12% {
    fill: #2e2d4e;
  }
  16% {
    fill: #5f3663;
  }
  20% {
    fill: #863572;
  }
  24% {
    fill: #c8458d;
  }
  28% {
    fill: #a48bab;
  }
  32% {
    fill: #68bfc7;
  }
  36% {
    fill: #54a4c8;
  }
  40% {
    fill: #4f9ec8;
  }
  44% {
    fill: #4b98c7;
  }
  48% {
    fill: #4691c7;
  }
  52% {
    fill: #408bc8;
  }
  56% {
    fill: #4688b7;
  }
  60% {
    fill: #4984a9;
  }
  64% {
    fill: #4c819c;
  }
  68% {
    fill: #4e7e8f;
  }
  72% {
    fill: #776167;
  }
  76% {
    fill: #893e45;
  }
  80% {
    fill: #6f3c4c;
  }
  84% {
    fill: #543a52;
  }
  88% {
    fill: #353758;
  }
  92% {
    fill: #2a3351;
  }
  96% {
    fill: #1e2e4a;
  }
  100% {
    fill: #0f2944;
  }
}

/* Land - layer 4 animation */
#landscape .layer4 {
  fill: #bcbec0;
  animation-name: layer4;
}
@keyframes layer4 {
  0% {
    fill: #0f2841;
  }
  4% {
    fill: #1a2945;
  }
  8% {
    fill: #232a48;
  }
  12% {
    fill: #2b2a4b;
  }
  16% {
    fill: #59335f;
  }
  20% {
    fill: #7c336d;
  }
  24% {
    fill: #b84089;
  }
  28% {
    fill: #9683a5;
  }
  32% {
    fill: #57b5c1;
  }
  36% {
    fill: #4798bd;
  }
  40% {
    fill: #4391bc;
  }
  44% {
    fill: #408bbb;
  }
  48% {
    fill: #3d85ba;
  }
  52% {
    fill: #397fba;
  }
  56% {
    fill: #3e7dac;
  }
  60% {
    fill: #407aa1;
  }
  64% {
    fill: #427896;
  }
  68% {
    fill: #44768b;
  }
  72% {
    fill: #705b66;
  }
  76% {
    fill: #823b46;
  }
  80% {
    fill: #69394b;
  }
  84% {
    fill: #503650;
  }
  88% {
    fill: #323454;
  }
  92% {
    fill: #27304d;
  }
  96% {
    fill: #1c2c47;
  }
  100% {
    fill: #0f2841;
  }
}

/* Land - layer 5 animation */
#landscape .layer5 {
  fill: #a7a9ac;
  animation-name: layer5;
}
@keyframes layer5 {
  0% {
    fill: #0e263f;
  }
  4% {
    fill: #192742;
  }
  8% {
    fill: #212745;
  }
  12% {
    fill: #292848;
  }
  16% {
    fill: #51305b;
  }
  20% {
    fill: #6e3068;
  }
  24% {
    fill: #a23b82;
  }
  28% {
    fill: #84799f;
  }
  32% {
    fill: #44aabc;
  }
  36% {
    fill: #3a8db3;
  }
  40% {
    fill: #3887b1;
  }
  44% {
    fill: #3680af;
  }
  48% {
    fill: #347aad;
  }
  52% {
    fill: #3273ab;
  }
  56% {
    fill: #3672a1;
  }
  60% {
    fill: #387198;
  }
  64% {
    fill: #396f90;
  }
  68% {
    fill: #3a6e87;
  }
  72% {
    fill: #695565;
  }
  76% {
    fill: #7c3747;
  }
  80% {
    fill: #64354a;
  }
  84% {
    fill: #4b334d;
  }
  88% {
    fill: #2e314f;
  }
  92% {
    fill: #252d4a;
  }
  96% {
    fill: #1b2a44;
  }
  100% {
    fill: #0e263f;
  }
}

/* Land - layer 6 animation */
#landscape .layer6 {
  fill: #939598;
  animation-name: layer6;
}
@keyframes layer6 {
  0% {
    fill: #0e243c;
  }
  4% {
    fill: #18253f;
  }
  8% {
    fill: #202542;
  }
  12% {
    fill: #262544;
  }
  16% {
    fill: #482c56;
  }
  20% {
    fill: #612d63;
  }
  24% {
    fill: #8d357c;
  }
  28% {
    fill: #6f719b;
  }
  32% {
    fill: #00a1bc;
  }
  36% {
    fill: #2583a8;
  }
  40% {
    fill: #287ca3;
  }
  44% {
    fill: #2a759f;
  }
  48% {
    fill: #2d6f9a;
  }
  52% {
    fill: #2e6895;
  }
  56% {
    fill: #2f6891;
  }
  60% {
    fill: #30678d;
  }
  64% {
    fill: #306788;
  }
  68% {
    fill: #306683;
  }
  72% {
    fill: #625064;
  }
  76% {
    fill: #753347;
  }
  80% {
    fill: #5e3249;
  }
  84% {
    fill: #47304a;
  }
  88% {
    fill: #2b2e4b;
  }
  92% {
    fill: #222a46;
  }
  96% {
    fill: #192741;
  }
  100% {
    fill: #0e243c;
  }
}

/* Land - layer 7 animation */
#landscape .layer7 {
  fill: #808285;
  animation-name: layer7;
}
@keyframes layer7 {
  0% {
    fill: #102237;
  }
  4% {
    fill: #18223a;
  }
  8% {
    fill: #1e233d;
  }
  12% {
    fill: #242340;
  }
  16% {
    fill: #402952;
  }
  20% {
    fill: #542a5e;
  }
  24% {
    fill: #793177;
  }
  28% {
    fill: #5f668f;
  }
  32% {
    fill: #0a8fa7;
  }
  36% {
    fill: #237595;
  }
  40% {
    fill: #256f90;
  }
  44% {
    fill: #27698c;
  }
  48% {
    fill: #286387;
  }
  52% {
    fill: #285d82;
  }
  56% {
    fill: #285e82;
  }
  60% {
    fill: #285f81;
  }
  64% {
    fill: #275f81;
  }
  68% {
    fill: #255f7f;
  }
  72% {
    fill: #574a63;
  }
  76% {
    fill: #683148;
  }
  80% {
    fill: #542f48;
  }
  84% {
    fill: #3f2d47;
  }
  88% {
    fill: #242742;
  }
  92% {
    fill: #202841;
  }
  96% {
    fill: #19253c;
  }
  100% {
    fill: #102237;
  }
}

/* Land - layer 8 animation */
#landscape .layer8 {
  fill: #6d6e71;
  animation-name: layer8;
}
@keyframes layer8 {
  0% {
    fill: #111f31;
  }
  4% {
    fill: #172034;
  }
  8% {
    fill: #1c2037;
  }
  12% {
    fill: #20213b;
  }
  16% {
    fill: #37274c;
  }
  20% {
    fill: #472759;
  }
  24% {
    fill: #662c71;
  }
  28% {
    fill: #4f5c83;
  }
  32% {
    fill: #118095;
  }
  36% {
    fill: #206983;
  }
  40% {
    fill: #21637e;
  }
  44% {
    fill: #225d7a;
  }
  48% {
    fill: #225775;
  }
  52% {
    fill: #225270;
  }
  56% {
    fill: #235372;
  }
  60% {
    fill: #235574;
  }
  64% {
    fill: #235675;
  }
  68% {
    fill: #235676;
  }
  72% {
    fill: #4c445f;
  }
  76% {
    fill: #5b2f49;
  }
  80% {
    fill: #4a2c47;
  }
  84% {
    fill: #382a44;
  }
  88% {
    fill: #242742;
  }
  92% {
    fill: #1e253d;
  }
  96% {
    fill: #182338;
  }
  100% {
    fill: #111f31;
  }
}

/* Land - layer 9 animation */
#landscape .layer9 {
  fill: #58595b;
  animation-name: layer9;
}
@keyframes layer9 {
  0% {
    fill: #111c2b;
  }
  4% {
    fill: #151d2e;
  }
  8% {
    fill: #191e32;
  }
  12% {
    fill: #1d1e35;
  }
  16% {
    fill: #2f2447;
  }
  20% {
    fill: #3a2454;
  }
  24% {
    fill: #52296c;
  }
  28% {
    fill: #405279;
  }
  32% {
    fill: #137185;
  }
  36% {
    fill: #1c5c72;
  }
  40% {
    fill: #1c576e;
  }
  44% {
    fill: #1c5269;
  }
  48% {
    fill: #1b4c64;
  }
  52% {
    fill: #1a475f;
  }
  56% {
    fill: #1c4a63;
  }
  60% {
    fill: #1e4b67;
  }
  64% {
    fill: #1f4d6a;
  }
  68% {
    fill: #204e6d;
  }
  72% {
    fill: #413e5a;
  }
  76% {
    fill: #4e2d49;
  }
  80% {
    fill: #402a45;
  }
  84% {
    fill: #312742;
  }
  88% {
    fill: #20243e;
  }
  92% {
    fill: #1b2238;
  }
  96% {
    fill: #171f32;
  }
  100% {
    fill: #111c2b;
  }
}

/* Land - layer 10 animation */
#landscape .layer10 {
  fill: #414042;
  animation-name: layer10;
}
@keyframes layer10 {
  0% {
    fill: #101825;
  }
  4% {
    fill: #131928;
  }
  8% {
    fill: #161a2c;
  }
  12% {
    fill: #181b2f;
  }
  16% {
    fill: #262141;
  }
  20% {
    fill: #2c214f;
  }
  24% {
    fill: #3d2567;
  }
  28% {
    fill: #30486f;
  }
  32% {
    fill: #136476;
  }
  36% {
    fill: #165163;
  }
  40% {
    fill: #154c5e;
  }
  44% {
    fill: #144759;
  }
  48% {
    fill: #134254;
  }
  52% {
    fill: #113d4f;
  }
  56% {
    fill: #154055;
  }
  60% {
    fill: #19425a;
  }
  64% {
    fill: #1b445f;
  }
  68% {
    fill: #1e4564;
  }
  72% {
    fill: #363856;
  }
  76% {
    fill: #412a49;
  }
  80% {
    fill: #352744;
  }
  84% {
    fill: #29243f;
  }
  88% {
    fill: #1c203a;
  }
  92% {
    fill: #191f33;
  }
  96% {
    fill: #151c2c;
  }
  100% {
    fill: #101825;
  }
}

/* Land - layer 11 animation */
#landscape .layer11 {
  fill: #232323;
  /*animation-name: layer11;
		animation-duration: var(--cycle-duration);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-delay: 2s;*/
  /*treesway 60s linear 2s infinite*/
  animation: treesway 60s linear 2s infinite,
    treecolor var(--cycle-duration) linear 2s infinite;
}

@keyframes treecolor {
  0% {
    fill: #0d141e;
  }
  4% {
    fill: #101522;
  }
  8% {
    fill: #121726;
  }
  12% {
    fill: #141829;
  }
  16% {
    fill: #1c1e3c;
  }
  20% {
    fill: #22214f;
  }
  24% {
    fill: #262262;
  }
  28% {
    fill: #1d4065;
  }
  32% {
    fill: #125768;
  }
  36% {
    fill: #1e4553;
  }
  40% {
    fill: #1e404e;
  }
  44% {
    fill: #1e3b49;
  }
  48% {
    fill: #1d3643;
  }
  52% {
    fill: #1c313e;
  }
  56% {
    fill: #1c3344;
  }
  60% {
    fill: #1c3449;
  }
  64% {
    fill: #1b344f;
  }
  68% {
    fill: #183454;
  }
  72% {
    fill: #242b4a;
  }
  76% {
    fill: #2b2241;
  }
  80% {
    fill: #24203c;
  }
  84% {
    fill: #1d1d37;
  }
  88% {
    fill: #151a32;
  }
  92% {
    fill: #14192c;
  }
  96% {
    fill: #111725;
  }
  100% {
    fill: #0d141e;
  }
}

@keyframes treesway {
  0% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  4% {
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }
  8% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  12% {
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }
  16% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  20% {
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }
  24% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  28% {
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }
  32% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  36% {
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }
  40% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  44% {
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }
  48% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  52% {
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }
  56% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  60% {
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }
  64% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  68% {
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }
  72% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
  76% {
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }
  80% {
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }
}

/* Aspect ratio media queries
  ---------------------------------------------- */

/* 3/2 and 6/1 -- out of range*/
@media screen and (min-aspect-ratio: 3/1) and (max-aspect-ratio: 6/1) {
  body {
    background: rgb(31, 60, 80);
  }
  body:before {
    content: "Aspect ratio out of range - too wide";
    color: white;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 50%;
  }
  #sky,
  #reflection,
  #sunMask,
  #landscape,
  #bottom,
  #stag,
  .controls,
  .stars,
  .sunMask,
  .clouds,
  .lighting,
  .vignette,
  .twinkleWrap,
  .spriteWrap {
    display: none;
  }
}

/* 14/5 and 3/1 */
@media screen and (min-aspect-ratio: 14/5) and (max-aspect-ratio: 7/2) {
  .twinkles {
  }
  #reflection,
  #sunMask {
    height: 42%;
  }
  #landscape {
    bottom: -3%;
  }
  #bottom {
    top: 101%;
  }
  #stag {
    bottom: 3%;
  }
  .sun {
    top: -570%;
  }
  .twinkles {
    top: 77%;
  }
}
/* 5/2 and 14/5 */
@media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5) {
  .twinkles {
    top: 75%;
  }
  #reflection,
  #sunMask {
  }
  #landscape {
    bottom: 1%;
  }
  #bottom {
    top: 98%;
  }
  #stag {
    bottom: 7%;
  }
  .sun {
    top: -532%;
  }
}
/* 9/4 and 5/2 */
@media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2) {
  .twinkles {
    top: 75%;
  }
  #reflection,
  #sunMask {
    height: 40%;
  }
  #landscape {
    bottom: 5%;
  }
  #bottom {
    top: 94%;
  }
  #stag {
    bottom: 10%;
  }
  .sun {
    top: -452%;
  }
}
/* 11/5 and 9/4 */
@media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4) {
  .twinkles {
  }
  #reflection,
  #sunMask {
  }
  #landscape {
    bottom: 6%;
  }
  #bottom {
    top: 93%;
  }
  #stag {
    bottom: 11%;
  }
  .sun {
    top: -410%;
  }
}
/* 13/6 and 11/5 */
@media screen and (min-aspect-ratio: 13/6) and (max-aspect-ratio: 11/5) {
  .twinkles {
  }
  #reflection,
  #sunMask {
    height: 37%;
  }
  #landscape {
    bottom: 6%;
  }
  #bottom {
    top: 93%;
  }
  #stag {
    bottom: 11%;
  }
  .sun {
  }
}

/* 15/7 and 13/6 */
@media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6) {
  .twinkles {
  }
  #reflection,
  #sunMask {
    height: 31%;
  }
  #landscape {
    bottom: 7%;
  }
  #bottom {
    top: 92%;
  }
  #stag {
    bottom: 12%;
  }
  .sun {
  }
}

/* 2/1 and 15/7 */
@media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7) {
  .twinkles {
  }
  #reflection,
  #sunMask {
    height: 31%;
  }
  #landscape {
    bottom: 8%;
  }
  #bottom {
    top: 91%;
  }
  #stag {
    bottom: 12%;
  }
  .sun {
    top: -370%;
  }
}

@media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1) {
  .twinkles {
  }
  #reflection,
  #sunMask {
    height: 30%;
  }
  #landscape {
  }
  #bottom {
  }
  #stag {
    bottom: 15%;
  }
  .sun {
  }
}

/* 7/4 and 15/8 */
@media screen and (min-aspect-ratio: 7/4) and (max-aspect-ratio: 15/8) {
  .twinkles {
    top: 71%;
  }
  #reflection,
  #sunMask {
    height: 28%;
  }
  #landscape {
    bottom: 13%;
  }
  #bottom {
    top: 86%;
  }
  #stag {
    bottom: 17%;
  }
  .sun {
    top: -300%;
  }
}
/* 11/7 and 7/4 */
@media screen and (min-aspect-ratio: 11/7) and (max-aspect-ratio: 7/4) {
  .twinkles {
    top: 69%;
  }
  #reflection,
  #sunMask {
    height: 24%;
  }
  #landscape {
    bottom: 16%;
  }
  #bottom {
    top: 83%;
  }
  #stag {
    bottom: 20%;
  }
  .sun {
    top: -270%;
  }
}
/* 13/9 and 11/7 */
@media screen and (min-aspect-ratio: 13/9) and (max-aspect-ratio: 11/7) {
  .twinkles {
    top: 68%;
  }
  #reflection,
  #sunMask {
    height: 22%;
  }
  #landscape {
    bottom: 18%;
  }
  #bottom {
    top: 81%;
  }
  #stag {
    bottom: 21.6%;
  }
  .sun {
    top: -240%;
  }
}
/* 4/3 and 13/9 */
@media screen and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 13/9) {
  .twinkles {
    top: 66%;
  }
  #reflection,
  #sunMask {
    height: 19%;
  }
  #landscape {
    bottom: 22%;
  }
  #bottom {
    top: 77%;
  }
  #stag {
    bottom: 25%;
  }
  .sun {
    top: -230%;
  }
}
/* 8/7 and 4/3 */
@media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 4/3) {
  .twinkles {
    top: 65%;
  }
  #reflection,
  #sunMask {
    height: 18%;
  }
  #landscape {
    bottom: 23%;
  }
  #bottom {
    top: 76%;
  }
  #stag {
    bottom: 25.3%;
  }
  .sun {
    top: -180%;
  }
}
/* 14/15 and 8/7 */
@media screen and (min-aspect-ratio: 14/15) and (max-aspect-ratio: 8/7) {
  .twinkles {
    top: 63%;
    width: 3%;
  }
  #reflection,
  #sunMask {
    height: 17%;
  }
  #landscape {
    bottom: 26%;
  }
  #bottom {
    top: 73.8%;
  }
  #stag {
    bottom: 28.3%;
  }
  .sun {
    top: -140%;
  }
}
/* 5/6 and 14/15 */
@media screen and (min-aspect-ratio: 5/6) and (max-aspect-ratio: 14/15) {
  .twinkles {
    top: 63%;
    width: 3%;
  }
  #reflection,
  #sunMask {
    height: 13%;
  }
  #landscape {
    bottom: 28%;
  }
  #bottom {
    top: 71.5%;
  }
  #stag {
    bottom: 30%;
  }
  .sun {
    top: -110%;
  }
}
/* 7/10 and 5/6 */
@media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 5/6) {
  .twinkles {
    top: 62%;
    width: 3%;
  }
  #reflection,
  #sunMask {
    height: 11%;
  }
  #landscape {
    bottom: 30%;
  }
  #bottom {
    top: 69.6%;
  }
  #stag {
    bottom: 31.8%;
  }
  .sun {
    top: -70%;
  }
}
/* 5/9 and 7/10 */
@media screen and (min-aspect-ratio: 5/9) and (max-aspect-ratio: 7/10) {
  .twinkles {
    top: 62%;
    width: 3%;
  }
  #reflection,
  #sunMask {
    height: 8%;
  }
  #landscape {
    bottom: 32%;
  }
  #bottom {
    top: 67.5%;
  }
  #stag {
    bottom: 33.5%;
  }
  .sun {
    top: -55%;
  }
}

/* 1/10 and 5/9 --- out of range*/
@media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 5/9) {
  body {
    background: rgb(31, 60, 80);
  }
  body:before {
    content: "Aspect ratio out of range - too narrow";
    color: white;
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 50%;
  }
  #sky,
  #reflection,
  #sunMask,
  #landscape,
  #bottom,
  #stag,
  .controls,
  .stars,
  .sunMask,
  .clouds,
  .lighting,
  .vignette,
  .twinkleWrap,
  .spriteWrap {
    display: none;
  }
}

.button {
  opacity: 1;
  width: 94px;
  height: 40px;
  /*padding: 8px 32px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  /*transition-duration: 0.2s;*/
  cursor: pointer;
  background-color: #1e242c;
  color: white;
  border: 3px solid transparent;
}
.button:hover {
  background-color: #dedede;
  opacity: 1;
}
.button:active {
  background-color: #949494;
}

.buttonl {
  border-radius: 1em 0em 0em 1em;
  margin: 0px -5px 0px 0px;
}

.buttonr {
  border-radius: 0em 1em 1em 0em;
  margin: 0px 0px 0px -5px;
}