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

/* Global Styles
  ---------------------------------------------- */
html {
    font-family: 'Open Sans', sans-serif;
    background: #0D133A;
    height: 100%;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-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 {
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-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 {
    -webkit-animation-name: stags;
}

@-webkit-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 {
    -webkit-animation-name: stag_one;
    width: 108%;
    left: -20%;
}

@-webkit-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 {
    -webkit-animation-name: stag_two;
}

@-webkit-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 {
    -webkit-animation-name: stag_three;
    width: 144%;
    left: -10%;
    bottom: -3%;
}

@-webkit-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: -webkit-gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    z-index: 4;
    mix-blend-mode: screen;
    -webkit-animation-name: sunFocus;
}

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

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

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

    25% {
        -webkit-filter: blur(5px);
    }

    30% {
        -webkit-filter: blur(0px);
    }

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

    88% {
        -webkit-filter: blur(5px);
    }

    100% {
        -webkit-filter: blur(10px);
    }
}

.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%;
        -webkit-filter: blur(2px);
        opacity: 0.4;
        left: -60%;
        -webkit-animation-duration: 60s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: clouds;
    }

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

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

    25% {
        opacity: 0.3;
        -webkit-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: -webkit-gradient(linear, left 50%, left 60%, from(rgba(0,0,0,1)), to(rgba(0,0,0,1)));
    mix-blend-mode: screen;
    pointer-events: none;
    -webkit-filter: blur(3px);
}

    .lighting .suncrane {
        width: 100%;
    }

#lensFlare {
    transform: rotate(16deg) translate3d(9%, -47%, 0px) scale(1);
    -webkit-animation-name: flaring;
}

@-webkit-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;
}

@-webkit-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;
}

@-webkit-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;
}

@-webkit-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;
}

@-webkit-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%;
}

@-webkit-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%;
}

@-webkit-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;
}

@-webkit-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;
    -webkit-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 * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.25s ease;
        -moz-transition: all 0.25s ease;
        -o-transition: all 0.25s ease;
        transition: all 0.25s ease;
    }

        .controls:hover {
            -webkit-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;
        -webkit-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;
    }

@-webkit-keyframes timer {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

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

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

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

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

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

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

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

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

@-webkit-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;
    -webkit-animation-name: layer1;
}

@-webkit-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;
    -webkit-animation-name: layer2;
}

@-webkit-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;
    -webkit-animation-name: layer3;
}

@-webkit-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;
    -webkit-animation-name: layer4;
}

@-webkit-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;
    -webkit-animation-name: layer5;
}

@-webkit-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;
    -webkit-animation-name: layer6;
}

@-webkit-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;
    -webkit-animation-name: layer7;
}

@-webkit-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;
    -webkit-animation-name: layer8;
}

@-webkit-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;
    -webkit-animation-name: layer9;
}

@-webkit-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;
    -webkit-animation-name: layer10;
}

@-webkit-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;
    -webkit-animation-name: layer11;
}

@-webkit-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;
    }
}