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

/* Global Styles
  ---------------------------------------------- */

:root {
  color-scheme: only light;
}

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-y: hidden;
  position: relative;
}

body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  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,
.counter:before,
.sunMask {
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

#sky-rect {
  height: 100%;
}

#reflection,
#sunMask {
  height: 40%;
  position: absolute;
  top: 57%;
  z-index: 4;
}

#reflection-rect {
  height: 100%;
}

#sunMask {
  background: #0D133A;
  height: 40%;
  position: absolute;
  top: 60%;
  width: 100%;
}

/* Clouds
  ---------------------------------------------- */
.clouds {
  position: absolute;
  width: 100%;
  z-index: 4;
  mix-blend-mode: screen;
  height: 20%;
}

.clouds svg {
  width: 60%;
  position: absolute;
  top: 51%;
  filter: blur(2px);
  opacity: 0.4;
  left: -60%;
  animation-duration: 45s;
  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;
  }
}


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

/* Controls
  ---------------------------------------------- */
.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,
.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.0;
}

.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 span.title {
  display: inline-block;
  padding: 10px 0px;
}

.controls ul li a {
  display: block;
  padding: 10px 0px;
}

.controls ul li a:hover {
  padding-left: 10px;
}

.controls ul li a.active {}

.controls ul li a.active:after {
  content: 'on';
  float: right;
}

.controls audio {
  width: 100%;
  opacity: 0.2;
  position: relative;
  width: 80%;
  display: inline-block;
  top: 8px;
  float: right;
}

.controls audio:hover {
  opacity: 1.0;
}

.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: 0%;
  z-index: 5;
  animation-name: focus;
}

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

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

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

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

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

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

#bottom {
  overflow: hidden;
  animation-name: bottomFill;
  height: 33%;
  position: absolute;
  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;
  }
}

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

/* 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) {

  #reflection,
  #sunMask {
    height: 42%;
  }

  #landscape {
    bottom: -10%;
  }

  #bottom {
    top: 101%;
  }

  .sun {
    top: -570%;
  }

  .twinkles {
    top: 30%;
  }

  #sky {
    height: 10%;
  }
}

/* 5/2 and 14/5 */
@media screen and (min-aspect-ratio: 5/2) and (max-aspect-ratio: 14/5) {
  .twinkles {
    top: 40%;
  }

  #landscape {
    bottom: 1%;
  }

  #bottom {
    top: 98%;
  }

  #stag {
    bottom: 7%;
  }

  .sun {
    top: -532%;
  }

  #sky {
    height: 10%;
  }
}

/* 9/4 and 5/2 */
@media screen and (min-aspect-ratio: 9/4) and (max-aspect-ratio: 5/2) {
  .twinkles {
    top: 30%;
  }

  #reflection,
  #sunMask {
    height: 34%;
  }

  #landscape {
    bottom: -24%;
  }

  #bottom {
    top: 123%;
  }

  .sun {
    top: -452%;
  }

  #sky {
    height: 59%;
  }
}

/* 11/5 and 9/4 */
@media screen and (min-aspect-ratio: 11/5) and (max-aspect-ratio: 9/4) {

  #landscape {
    bottom: 6%;
  }

  #bottom {
    top: 93%;
  }

  #stag {
    bottom: 11%;
  }

  .sun {
    top: -410%;
  }

  #sky {
    height: 10%;
  }
}

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

  #sky {
    height: 10%;
  }
}

/* 15/7 and 13/6 */
@media screen and (min-aspect-ratio: 15/7) and (max-aspect-ratio: 13/6) {
  .twinkles {}

  #reflection,
  #sunMask {
    height: 31%;
  }

  #reflection {
    top: 29%;
  }

  #landscape {
    bottom: 7%;
  }

  #sky {
    height: 33%;
  }

  #bottom {
    top: 92%;
  }
}

/* 2/1 and 15/7 */
@media screen and (min-aspect-ratio: 2/1) and (max-aspect-ratio: 15/7) {
  .twinkles {}

  #reflection,
  #sunMask {
    height: 30%;
  }

  #reflection {
    top: 32%;
  }

  #landscape {
    bottom: 8%;
  }

  #bottom {
    top: 91%;
  }

  .sun {
    top: -370%;
  }

  #sky {
    height: 35%;
  }
}

@media screen and (min-aspect-ratio: 15/8) and (max-aspect-ratio: 2/1) {
  .twinkles {}

  #reflection,
  #sunMask {
    height: 33%;
  }

  #sky {
    height: 29%;
  }

  #reflection {
    top: 30%;
  }


  #bottom {
    top: 80%;
  }

  #sky {
    height: 33%;
  }

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

  #landscape {
    bottom: 13%;
  }

  #bottom {
    top: 86%;
  }

  #reflection {
    top: 35%;
  }

  .sun {
    top: -300%;
  }

  #sky {
    height: 35%;
  }
}

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

  #reflection {
    top: 36%;
  }

  #landscape {
    bottom: 16%;
  }

  #bottom {
    top: 83%;
  }

  .sun {
    top: -270%;
  }

  #sky {
    height: 36%;
  }
}

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

  #landscape {
    bottom: 18%;
  }

  #reflection {
    top: 37%;
  }

  #bottom {
    top: 81%;
  }

  .sun {
    top: -240%;
  }

  #sky {
    height: 37%;
  }
}

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

  #landscape {
    bottom: 22%;
  }

  #reflection {
    top: 36%;
  }

  #bottom {
    top: 77%;
  }

  .sun {
    top: -230%;
  }

  #sky {
    height: 39%;
  }
}

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

  #reflection {
    top: 42%;
  }

  .sun {
    top: -180%;
  }

  #sky {
    height: 45%;
  }
}

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

  #reflection {
    top: 46%;
  }

  #sky {
    height: 49%;
  }
}

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

  #reflection {
    top: 46%;
  }

  #landscape {
    bottom: 28%;
  }

  #bottom {
    top: 71.5%;
  }

  .sun {
    top: -110%;
  }

  #sky {
    height: 49%;
  }
}

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

  #landscape {
    bottom: 30%;
  }

  #reflection {
    top: 46%;
  }

  #bottom {
    top: 69.6%;
  }

  #stag {
    bottom: 31.8%;
  }

  .sun {
    top: -70%;
  }

  #sky {
    height: 48%;
  }
}

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

  #reflection {
    top: 49%;
  }

  #landscape {
    bottom: 32%;
  }

  #bottom {
    top: 67.5%;
  }

  .sun {
    top: -55%;
  }

  #sky {
    height: 49%;
  }
}

/* 1/10 and 5/9 --- out of range*/
@media screen and (min-aspect-ratio: 1/10) and (max-aspect-ratio: 5/9) {
  .twinkles {
    top: 62%;
    width: 3%;
  }

  #reflection,
  #sunMask {
    height: 11%;
  }

  #reflection {
    top: 55%;
  }

  #landscape {
    bottom: 32%;
  }

  #bottom {
    top: 67.5%;
  }

  .sun {
    top: -55%;
  }

  #sky {
    height: 55%;
  }
}

@media screen and (min-width: 1024px) and (max-height: 1310px) {

  /* Laptop */
  #landscape {
    bottom: -10%;
  }

  #reflection {
    top: 45%;
    height: 40%;
  }

  #sky {
    height: 45%;
  }

  #bottom {
    top: 100%;
    /* border-top: 1px solid white;
    border-radius: 1rem; */
  }

  #panorama {
    font-size: 7rem;
  }

}