/*
################
#ROCKET ANIMATION
################
*/

@keyframes ALIEN-ANIMATION {
    0% {top:0;}
    50% {
        top:-44px;
        transform: scale(1, 1);
        animation-timing-function: step-end;
    }
    95% {
        transform: scale(1, 1);
        animation-timing-function: step-end;
    }
    98% {
        transform: scale(-1, 1);
        animation-timing-function: step-end;
    }
}

@-webkit-keyframes ALIEN-ANIMATION {
    0% {top:0;}
    50% {
        top:-44px;
        -webkit-transform: scale(1, 1);
        -webkit-animation-timing-function: step-end;
    }
    95% {
        -webkit-transform: scale(1, 1);
        -webkit-animation-timing-function: step-end;
    }
    98% {
        -webkit-transform: scale(-1, 1);
        -webkit-animation-timing-function: step-end;
    }
}

@-moz-keyframes ALIEN-ANIMATION {
    0% {top:0;}
    50% {
        top:-44px;
        -moz-transform: scale(1, 1);
        -moz-animation-timing-function: step-end;
    }
    95% {
        -moz-transform: scale(1, 1);
        -moz-animation-timing-function: step-end;
    }
    98% {
        -moz-transform: scale(-1, 1);
        -moz-animation-timing-function: step-end;
    }
}

@-o-keyframes ALIEN-ANIMATION {
    0% {top:0;}
    50% {
        top:-44px;
        -o-transform: scale(1, 1);
        -o-animation-timing-function: step-end;
    }
    95% {
        -o-transform: scale(1, 1);
        -o-animation-timing-function: step-end;
    }
    98% {
        -o-transform: scale(-1, 1);
        -o-animation-timing-function: step-end;
    }
}

.alien {
    animation:
        ALIEN-ANIMATION 3s ease 1s infinite alternate;
    -webkit-animation:
        ALIEN-ANIMATION 3s ease 1s infinite alternate;
    -moz-animation:
        ALIEN-ANIMATION 3s ease 1s infinite alternate;
    -o-animation:
        ALIEN-ANIMATION 3s ease 1s infinite alternate;
}

/*
################
#ROCKET ANIMATION
################
*/

@keyframes STARFIELD-MOVE {
    to {
        transform: translateY(10000px);
    }
}

@-webkit-keyframes STARFIELD-MOVE {
    to {
        -webkit-transform: translateY(10000px);
    }
}

@-moz-keyframes STARFIELD-MOVE {
    to {
        -moz-transform: translateY(10000px);
    }
}

@-o-keyframes STARFIELD-MOVE {
    to {
        -o-transform: translateY(10000px);
    }
}

.starfield-background {
    animation: STARFIELD-MOVE 200s linear 0s;
    -webkit-animation: STARFIELD-MOVE 200s linear 0s;
    -moz-animation: STARFIELD-MOVE 200s linear 0s;
    -o-animation: STARFIELD-MOVE 200s linear 0s;
}

.starfield-midground {
    animation: STARFIELD-MOVE 150s linear 0s;
    -webkit-animation: STARFIELD-MOVE 150s linear 0s;
    -moz-animation: STARFIELD-MOVE 150s linear 0s;
    -o-animation: STARFIELD-MOVE 150s linear 0s;

}

.starfield-foreground {
    animation: STARFIELD-MOVE 100s linear 0s;
    -webkit-animation: STARFIELD-MOVE 100s linear 0s;
    -moz-animation: STARFIELD-MOVE 100s linear 0s;
    -o-animation: STARFIELD-MOVE 100s linear 0s;
}

/*
################
#ROCKET ANIMATION
################
*/

@keyframes ROCKET-MOVE {
    to {
        transform: translate(-5000px, -10000px);
    }
}


@-webkit-keyframes ROCKET-MOVE {
    to {
        -webkit-transform: translate(-5000px, -10000px);
    }
}

@-moz-keyframes ROCKET-MOVE {
    to {
        -moz-transform: translate(-5000px, -10000px);
    }
}

@-o-keyframes ROCKET-MOVE {
    to {
        -o-transform: translate(-5000px, -10000px);
    }
}

.rocket {
    animation:
        ROCKET-MOVE 100s ease-out 0s infinite;
    -webkit-animation:
        ROCKET-MOVE 100s ease-out 0s infinite;
    -moz-animation:
        ROCKET-MOVE 100s ease-out 0s infinite;
    -o-animation:
        ROCKET-MOVE 100s ease-out 0s infinite;
}

/*
################
#EARTH ANIMATION
################
*/

@keyframes EARTH-ORBIT {
    from {  transform: rotate(0deg) translatey(-400px) rotate(0deg); }
    to   {  transform: rotate(360deg) translatey(-400px) rotate(-360deg); }
}

@-webkit-keyframes EARTH-ORBIT {
    from {  -webkit-transform: rotate(0deg) translatey(-400px) rotate(0deg); }
    to   {  -webkit-transform: rotate(360deg) translatey(-400px) rotate(-360deg); }
}

@-moz-keyframes EARTH-ORBIT {
    from {  -moz-transform: rotate(0deg) translatey(-400px) rotate(0deg); }
    to   {  -moz-transform: rotate(360deg) translatey(-400px) rotate(-360deg); }
}

@-o-keyframes EARTH-ORBIT {
    from {  -o-transform: rotate(0deg) translatey(-400px) rotate(0deg); }
    to   {  -o-transform: rotate(360deg) translatey(-400px) rotate(-360deg); }
}

.earth {
    -webkit-animation: EARTH-ORBIT 50s linear 0s infinite;
    -moz-animation: EARTH-ORBIT 50s linear 0s infinite;
    -o-animation: EARTH-ORBIT 50s linear 0s infinite;
    animation: EARTH-ORBIT 50s linear 0s infinite;
}


/*
################
#GIFTCARD ANIMATION
################
*/

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@-moz-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -moz-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -moz-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@-o-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -o-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -o-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

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



.bounceOutRight {
    -webkit-animation: bounceOutRight 1s ease 3s;
      -moz-animation: bounceOutRight 1s ease 3s;
      -o-animation: bounceOutRight 1s ease 3s;
              animation: bounceOutRight 1s ease 3s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
  0% {
        opacity: 0;
        display: none;
    }
  100% {
        opacity: 1;
        display: block;
    }
}

@-moz-keyframes fadeIn {
  0% {
        opacity: 0;
        display: none;
    }
  100% {
        opacity: 1;
        display: block;
    }
}

@-o-keyframes fadeIn {
  0% {
        opacity: 0;
        display: none;
    }
  100% {
        opacity: 1;
        display: block;
    }
}

@keyframes fadeIn {
  0% {
        opacity: 0;
        display: none;
    }
  100% {
        opacity: 1;
        display: block;
    }
}

.fadeIn {
    -webkit-animation: fadeIn 1s ease 4s;
    -moz-animation: fadeIn 1s ease 4s;
    -o-animation: fadeIn 1s ease 4s;
    animation: fadeIn 1s ease 4s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*
################
#GHOST ANIMATION
################
*/

@-webkit-keyframes GHOST-MOVEMENT {
  100% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
  }
}

@-moz-keyframes GHOST-MOVEMENT {

  100% {
    -moz-transform: translateY(50px);
            transform: translateY(50px);
  }
}

@-o-keyframes GHOST-MOVEMENT {

  100% {
    -o-transform: translateY(50px);
            transform: translateY(50px);
  }
}

@keyframes GHOST-MOVEMENT {
  100% {
    transform: translateY(50px);
  }
}

div .ghost {
    -webkit-animation: GHOST-MOVEMENT 0.9s ease 0.5s infinite alternate;
    -moz-animation: GHOST-MOVEMENT 0.9s ease 0.5s infinite alternate;
    -o-animation: GHOST-MOVEMENT 0.9s ease 0.5s infinite alternate;
    animation: GHOST-MOVEMENT 0.9s ease 0.5s infinite alternate;
}

div .ghost:first-child {
    -webkit-animation: GHOST-MOVEMENT 0.9s ease 0s infinite alternate;
    -moz-animation: GHOST-MOVEMENT 0.9s ease 0s infinite alternate;
    -o-animation: GHOST-MOVEMENT 0.9s ease 0s infinite alternate;
    animation: GHOST-MOVEMENT 0.9s ease 0s infinite alternate;
}

div .ghost:last-child {
    -webkit-animation: GHOST-MOVEMENT 1.1s ease 0s infinite alternate-reverse;
    -moz-animation: GHOST-MOVEMENT 1.1s ease 0s infinite alternate-reverse;
    -o-animation: GHOST-MOVEMENT 1.1s ease 0s infinite alternate-reverse;
    animation: GHOST-MOVEMENT 1.1s ease 0s infinite alternate-reverse;
}