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

html {
  font-family         : 'Open Sans', sans-serif;
  background          : #0D133A;
  height              : 100%;
  font-size           : 100%;
  text-size-adjust    : 100%;
  -ms-text-size-adjust: 100%;
  font-smoothing      : antialiased;
  overflow            : hidden;
  position            : relative;
}

body {
  height     : 100%;
  overflow   : hidden;
  margin     : 0;
  font-size  : 1em;
  line-height: 1.4;
  position   : relative;
}

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       : 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* 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;
  animation-delay: 1s;
}

@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.0;
  }

  15% {
    opacity: 1.0;
  }

  20% {
    opacity: 0.0;
  }

  90% {
    opacity: 0.0;
  }

  95% {
    opacity: 1.0;
  }

  100% {
    opacity: 1.0;
  }
}

#stag2 {
  animation-name: stag_two;
}

@keyframes stag_two {
  0% {
    opacity: 0.0;
  }

  17% {
    opacity: 0.0;
  }

  20% {
    opacity: 1.0;
  }

  40% {
    opacity: 1.0;
  }

  45% {
    opacity: 0.0;
  }

  65% {
    opacity: 0.0;
  }

  70% {
    opacity: 1.0;
  }

  90% {
    opacity: 1.0;
  }

  95% {
    opacity: 0.0;
  }

  100% {
    opacity: 0.0;
  }
}

#stag3 {
  animation-name: stag_three;
  width         : 144%;
  left          : -10%;
  bottom        : -3%;
}

@keyframes stag_three {
  0% {
    opacity: 0.0;
  }

  15% {
    opacity: 0.0;
  }

  20% {
    opacity: 0.0;
  }

  40% {
    opacity: 0.0;
  }

  45% {
    opacity: 1.0;
  }

  65% {
    opacity: 1.0;
  }

  70% {
    opacity: 0.0;
  }

  100% {
    opacity: 0.0;
  }
}

/* Sun
  ---------------------------------------------- */
.sunMask {
  position          : absolute;
  width             : 100%;
  height            : 100%;
  -webkit-mask-image: 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;
  animation-name    : sunFocus;
}

@keyframes sunFocus {
  0% {
    filter : blur(10px);
    opacity: 0;
  }

  16% {
    filter: blur(10px);
  }

  20% {
    filter: blur(10px);
  }

  25% {
    filter : blur(5px);
    opacity: 0;
  }

  30% {
    filter : blur(0px);
    opacity: 1;
  }

  80% {
    filter : blur(0px);
    opacity: 1;
  }

  88% {
    filter : blur(5px);
    opacity: 0;
  }

  100% {
    filter : blur(10px);
    opacity: 0;
  }
}

.sun {
  width         : 100%;
  padding-bottom: 100%;
  position      : absolute;
  right         : -51%;
  top           : -330%;
}

.sun div {
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/sun.svg);
  position  : absolute;
  top       : 0;
  bottom    : 0;
  left      : 0;
  right     : 0;
}

.suncrane {
  animation : suncrane 60s 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 60s linear infinite;
  position       : absolute;
  width          : 120%;
  height         : 120%;
  background     : url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/glare.svg) no-repeat scroll center;
  top            : -10%;
  left           : -10%;
  background-size: 100%;
}

@keyframes glare {
  from {
    transform: rotate(90deg);
    opacity  : 0.0;
  }

  30% {
    opacity: 0.0;
  }

  36% {
    opacity: 1.0;
  }

  68% {
    opacity: 1.0;
  }

  74% {
    opacity: 0.0;
  }

  to {
    transform: rotate(450deg);
    opacity  : 0.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       : 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name           : clouds;
}

@keyframes clouds {
  0% {
    transform: translate3d(110%, 0px, 0px);
    opacity  : 0.0;
  }

  19% {
    opacity: 0.0;
    filter : blur(5px);
  }

  25% {
    opacity: 0.3;
    filter : blur(2px);
  }

  50% {
    opacity: 0.6;
  }

  75% {
    opacity: 0.2;
  }

  90% {
    opacity: 0.0;
  }

  100% {
    transform: translate3d(150%, 0px, 0px);
    opacity  : 0.0
  }
}

/* Lens flare
  ---------------------------------------------- */
.lighting {
  width             : 100%;
  height            : 100%;
  position          : absolute;
  z-index           : 8;
  opacity           : 0.3;
  -webkit-mask-image: 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.0;
  }

  28% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity  : 0.0;
  }

  35% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity  : 1.0;
  }

  70% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity  : 1.0;
  }

  78% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity  : 0.0;
  }

  100% {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    opacity  : 0.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 60s linear infinite;
}

@keyframes twinkles {
  0% {
    transform: translate(450%, 0%);
    opacity  : 0.0;
  }

  32% {
    opacity: 0.0;
  }

  34% {
    opacity: 1.0;
  }

  36.5% {
    transform: translate(450%, 0%);
  }

  54% {
    transform: translate(0%, 0%);
  }

  72% {
    transform: translate(-450%, 0%);
    opacity  : 1.0;
  }

  78% {
    opacity: 0.0;
  }

  100% {
    transform: translate(-450%, 0%);
    opacity  : 0.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.0;
  }

  33.33% {
    opacity: 0.0;
  }

  66.66% {
    opacity: 0.0;
  }

  99.99% {
    opacity: 1.0;
  }

  100% {
    opacity: 1.0;
  }
}

#twinkle2 {
  animation: twinkle2 2s linear infinite;
}

@keyframes twinkle2 {
  0% {
    opacity: 0.0;
  }

  33.33% {
    opacity: 1.0;
  }

  66.66% {
    opacity: 0.0;
  }

  99.99% {
    opacity: 0.0;
  }

  100% {
    opacity: 0.0;
  }
}

#twinkle3 {
  animation: twinkle3 2s linear infinite;
}

@keyframes twinkle3 {
  0% {
    opacity: 0.0;
  }

  33.33% {
    opacity: 0.0;
  }

  66.66% {
    opacity: 1.0;
  }

  99.99% {
    opacity: 0.0;
  }

  100% {
    opacity: 0.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 120s 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 120s 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 60s linear infinite;
  pointer-events: none;
}

@keyframes sprites {
  0% {
    opacity: 0.8;
  }

  20% {
    opacity: 0.8;
  }

  25% {
    opacity: 0.0;
  }

  73% {
    opacity: 0.0;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.8;
  }
}

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

.noise {
  width         : 100%;
  height        : 100%;
  background    : transparent;
  opacity       : 0.03;
  z-index       : 9;
  position      : absolute;
  top           : 0;
  pointer-events: none;
}

.noise.active {
  background     : transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/static2.gif);
  opacity        : 0.015;
  background-size: 620px;
}

.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%;
  }
}

/* Landscape
  ---------------------------------------------- */
#landscape {
  width         : 100.02%;
  position      : absolute;
  bottom        : 11%;
  z-index       : 5;
  animation-name: focus;
}

@keyframes focus {
  0% {
    filter: blur(5px);
  }

  16% {
    filter: blur(2px);
  }

  20% {
    filter: blur(0px);
  }

  80% {
    filter: blur(0px);
  }

  88% {
    filter: blur(2px);
  }

  100% {
    filter: blur(5px);
  }
}

#bottom {
  animation-name : bottomFill;
  height         : 100%;
  position       : absolute;
  top            : 88%;
  width          : 100%;
  z-index        : 5;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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;
  animation-delay: 1s;
}

@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-delay: 1s;
}

@keyframes layer11 {
  0% {
    fill     : #0D141E;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  4% {
    fill     : #101522;
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }

  8% {
    fill     : #121726;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  12% {
    fill     : #141829;
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }

  16% {
    fill     : #1C1E3C;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  20% {
    fill     : #22214F;
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }

  24% {
    fill     : #262262;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  28% {
    fill     : #1D4065;
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }

  32% {
    fill     : #125768;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  36% {
    fill     : #1E4553;
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }

  40% {
    fill     : #1E404E;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  44% {
    fill     : #1E3B49;
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }

  48% {
    fill     : #1D3643;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  52% {
    fill     : #1C313E;
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }

  56% {
    fill     : #1C3344;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  60% {
    fill     : #1C3449;
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }

  64% {
    fill     : #1B344F;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  68% {
    fill     : #183454;
    transform: skew(1deg, 0deg) translate3d(-0.5%, 0px, 0px);
  }

  72% {
    fill     : #242B4A;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  76% {
    fill     : #2B2241;
    transform: skew(-1deg, 0deg) translate3d(0.5%, 0px, 0px);
  }

  80% {
    fill     : #24203C;
    transform: skew(0deg, 0deg) translate3d(0px, 0px, 0px);
  }

  84% {
    fill: #1D1D37;
  }

  88% {
    fill: #151A32;
  }

  92% {
    fill: #14192C;
  }

  96% {
    fill: #111725;
  }

  100% {
    fill: #0D141E;
  }
}

/* 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;
  }
}

.title {
  z-index     : 99;
  color       : white;
  font-size   : xx-large;
  font-weight : 600;
  font-display: auto;
  text-align  : center;
  align-items : center;
  opacity     : 0.55;
  font-family : 'Courier New', Courier, monospace;
  width       : 100%;
  height      : 100%;
  position    : absolute;
}


.m-btn {
  position          : relative;
  height            : 64px;
  line-height       : 64px;
  width             : 360px;
  text-align        : center;
  cursor            : pointer;
  font-family : 'Courier New', Courier, monospace;
  font-size         : 24px;
  -webkit-transition: .2s all;
  transition        : .2s all;
  box-sizing        : border-box;
  color             : #fff;
  margin            : auto;
}

.s-pesoduSlice {
  -webkit-animation: all .5s;
          animation: all .5s;
  color: #fff;
  -webkit-filter: contrast(10);
          filter: contrast(10);
  border: 0px solid #fff;
  background-color: #1f1f1f;
  overflow: hidden;
}
.s-pesoduSlice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(19deg, #fff 50%, transparent 50%, transparent 100%);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0.34, 0.87, 0.49);
  transition: -webkit-transform 0.5s cubic-bezier(0.86, 0.34, 0.87, 0.49);
  transition: transform 0.5s cubic-bezier(0.86, 0.34, 0.87, 0.49);
  transition: transform 0.5s cubic-bezier(0.86, 0.34, 0.87, 0.49), -webkit-transform 0.5s cubic-bezier(0.86, 0.34, 0.87, 0.49);
  mix-blend-mode: difference;
  -webkit-transform: translate(-100%, 0) scale3d(2, 2, 1);
          transform: translate(-100%, 0) scale3d(2, 2, 1);
}
.s-pesoduSlice:hover::before {
  -webkit-transform: translate(100%, 0) scale3d(2, 2, 1);
          transform: translate(100%, 0) scale3d(2, 2, 1);
}.footer {
    position: absolute;
    font-size: .5em;
    color: #b3b3b3;
    bottom: 0;
    left: 0;
    width: 100%;
}