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

body {
font-family: 'Architects Daughter', cursive;
color: #ffffff;
}

#ganzertext {
position: absolute;
z-index: 10000;
padding-left:30px;
padding-right:30px;
}

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

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