/**
 * intro.css
 * intro marking and animations
 */





/*=============
  Rocket
  =============*/



/*
    Layout
*/

#intro .rocket {
    width: 310px;
    height: 247px;
    z-index: 2;
}
#intro .rocket span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#intro .rocket .bg {
    top: 0;
    right: 0;
    width: 226px;
    height: 247px;
    z-index: 3;
}
#intro .rocket .fire {
    top: 144px;
    left: 0;
    width: 84px;
    height: 28px;
    z-index: 2;
}
#intro .rocket .shadow {
    top: 88px;
    left: -89px;
    width: 175px;
    height: 152px;
    z-index: 1;
}
#intro .rocket .leg {
    left: 176px;
    top: 101px;
    width: 61px;
    height: 62px;
    z-index: 4;
}
#intro .rocket .arm-right {
    top: 66px;
    left: 181px;
    width: 76px;
    height: 53px;
    z-index: 5;
}
#intro .rocket .arm-left {
    top: 61px;
    left: 194px;
    width: 72px;
    height: 37px;
    z-index: 2;
}
#intro .rocket .eyes {
    top: 34px;
    left: 211px;
    width: 19px;
    height: 11px;
    z-index: 4;
}



/*
    Animations
*/

#intro .rocket span {
    -webkit-animation: rocket-wrap 0.75s infinite ease-in-out;
       -moz-animation: rocket-wrap 0.75s infinite ease-in-out;
            animation: rocket-wrap 0.75s infinite ease-in-out;
}
#intro .rocket .fire {
    -webkit-animation: rocket-fire 0.1s infinite ease-in-out;
       -moz-animation: rocket-fire 0.1s infinite ease-in-out;
            animation: rocket-fire 0.1s infinite ease-in-out;
}
#intro .rocket .shadow {
    -webkit-transform-origin: 175px 0;
       -moz-transform-origin: 175px 0;
            transform-origin: 175px 0;
    -webkit-animation: rocket-shadow 0.05s infinite ease-in-out;
       -moz-animation: rocket-shadow 0.05s infinite ease-in-out;
            animation: rocket-shadow 0.05s infinite ease-in-out;
}
#intro .rocket .leg {
    -webkit-transform-origin: 14px 7px;
       -moz-transform-origin: 14px 7px;
            transform-origin: 14px 7px;
    -webkit-animation: rocket-leg 2s infinite ease-in-out;
       -moz-animation: rocket-leg 2s infinite ease-in-out;
            animation: rocket-leg 2s infinite ease-in-out;
}
#intro .rocket .arm-right {
    -webkit-transform-origin: 8px 8px;
       -moz-transform-origin: 8px 8px;
            transform-origin: 8px 8px;
    -webkit-animation: rocket-arm-right 1.5s infinite ease-in-out;
       -moz-animation: rocket-arm-right 1.5s infinite ease-in-out;
            animation: rocket-arm-right 1.5s infinite ease-in-out;
}
#intro .rocket .arm-left {
    -webkit-transform-origin: 7px 12px;
       -moz-transform-origin: 7px 12px;
            transform-origin: 7px 12px;
    -webkit-transform: rotateZ(30deg);
       -moz-transform: rotateZ(30deg);
            transform: rotateZ(30deg);
}
#intro .rocket .eyes {
    -webkit-animation: rocket-eyes 2s infinite ease-in-out;
       -moz-animation: rocket-eyes 2s infinite ease-in-out;
            animation: rocket-eyes 2s infinite ease-in-out;
}



/*
    Keyframes
*/

@-webkit-keyframes rocket-wrap {
    0%   {-webkit-transform: translateY(-5px);}
    50%  {-webkit-transform: translateY(5px);}
    100% {-webkit-transform: translateY(-5px);}
}
@-webkit-keyframes rocket-fire {
    0%   {-webkit-transform: translateX(0px);}
    50%  {-webkit-transform: translateX(10px);}
    100% {-webkit-transform: translateX(0px);}
}
@-webkit-keyframes rocket-shadow {
    0%   {opacity: 1.0; -webkit-transform: scaleX(1.0);}
    50%  {opacity: 0.8; -webkit-transform: scaleX(0.8);}
    100% {opacity: 1.0; -webkit-transform: scaleX(1.0);}
}
@-webkit-keyframes rocket-leg {
    0%   {-webkit-transform: rotateZ(0deg);}
    20%  {-webkit-transform: rotateZ(0deg);}
    50%  {-webkit-transform: rotateZ(10deg);}
    70%  {-webkit-transform: rotateZ(10deg);}
    100% {-webkit-transform: rotateZ(0deg);}
}
@-webkit-keyframes rocket-arm-right {
    0%   {-webkit-transform: rotateZ(0deg);}
    30%  {-webkit-transform: rotateZ(0deg);}
    50%  {-webkit-transform: rotateZ(-10deg);}
    80%  {-webkit-transform: rotateZ(-10deg);}
    100% {-webkit-transform: rotateZ(0deg);}
}
@-webkit-keyframes rocket-arm-left {
    0%   {-webkit-transform: rotateZ(30deg);}
    25%  {-webkit-transform: rotateZ(0deg);}
    75%  {-webkit-transform: rotateZ(0deg);}
    100% {-webkit-transform: rotateZ(30deg);}
}
@-webkit-keyframes rocket-eyes {
    0%   {-webkit-transform: scaleY(1);}
    90%  {-webkit-transform: scaleY(1);}
    95%  {-webkit-transform: scaleY(0);}
    100% {-webkit-transform: scaleY(1);}
}
@-moz-keyframes rocket-wrap {
    0%   {-moz-transform: translateY(-5px);}
    50%  {-moz-transform: translateY(5px);}
    100% {-moz-transform: translateY(-5px);}
}
@-moz-keyframes rocket-fire {
    0%   {-moz-transform: translateX(0px);}
    50%  {-moz-transform: translateX(10px);}
    100% {-moz-transform: translateX(0px);}
}
@-moz-keyframes rocket-shadow {
    0%   {opacity: 1.0; -moz-transform: scaleX(1.0);}
    50%  {opacity: 0.8; -moz-transform: scaleX(0.8);}
    100% {opacity: 1.0; -moz-transform: scaleX(1.0);}
}
@-moz-keyframes rocket-leg {
    0%   {-moz-transform: rotateZ(0deg);}
    20%  {-moz-transform: rotateZ(0deg);}
    50%  {-moz-transform: rotateZ(10deg);}
    70%  {-moz-transform: rotateZ(10deg);}
    100% {-moz-transform: rotateZ(0deg);}
}
@-moz-keyframes rocket-arm-right {
    0%   {-moz-transform: rotateZ(0deg);}
    30%  {-moz-transform: rotateZ(0deg);}
    50%  {-moz-transform: rotateZ(-10deg);}
    80%  {-moz-transform: rotateZ(-10deg);}
    100% {-moz-transform: rotateZ(0deg);}
}
@-moz-keyframes rocket-arm-left {
    0%   {-moz-transform: rotateZ(30deg);}
    25%  {-moz-transform: rotateZ(0deg);}
    75%  {-moz-transform: rotateZ(0deg);}
    100% {-moz-transform: rotateZ(30deg);}
}
@-moz-keyframes rocket-eyes {
    0%   {-moz-transform: scaleY(1);}
    90%  {-moz-transform: scaleY(1);}
    95%  {-moz-transform: scaleY(0);}
    100% {-moz-transform: scaleY(1);}
}
@keyframes rocket-wrap {
    0%   {transform: translateY(-5px);}
    50%  {transform: translateY(5px);}
    100% {transform: translateY(-5px);}
}
@keyframes rocket-fire {
    0%   {transform: translateX(0px);}
    50%  {transform: translateX(10px);}
    100% {transform: translateX(0px);}
}
@keyframes rocket-shadow {
    0%   {opacity: 1.0; transform: scaleX(1.0);}
    50%  {opacity: 0.8; transform: scaleX(0.8);}
    100% {opacity: 1.0; transform: scaleX(1.0);}
}
@keyframes rocket-leg {
    0%   {transform: rotateZ(0deg);}
    20%  {transform: rotateZ(0deg);}
    50%  {transform: rotateZ(10deg);}
    70%  {transform: rotateZ(10deg);}
    100% {transform: rotateZ(0deg);}
}
@keyframes rocket-arm-right {
    0%   {transform: rotateZ(0deg);}
    30%  {transform: rotateZ(0deg);}
    50%  {transform: rotateZ(-10deg);}
    80%  {transform: rotateZ(-10deg);}
    100% {transform: rotateZ(0deg);}
}
@keyframes rocket-arm-left {
    0%   {transform: rotateZ(30deg);}
    25%  {transform: rotateZ(0deg);}
    75%  {transform: rotateZ(0deg);}
    100% {transform: rotateZ(30deg);}
}
@keyframes rocket-eyes {
    0%   {transform: scaleY(1);}
    90%  {transform: scaleY(1);}
    95%  {transform: scaleY(0);}
    100% {transform: scaleY(1);}
}





/*=============
  Dron
  =============*/



/*
    Layout
*/

#intro .dron {
    width: 270px;
    height: 99px;
    -webkit-perspective: 700px;
       -moz-perspective: 700px;
            perspective: 700px;
}
#intro .dron span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#intro .dron .bg {
    left: 49px;
    width: 172px;
    height: 84px;
    z-index: 2;
}
#intro .dron .propeller {
    top: 14px;
    width: 129px;
    height: 9px;
    z-index: 1;
}
#intro .dron .propeller.left {
    left: 0;
}
#intro .dron .propeller.right {
    right: 0;
}
#intro .dron .leg-left {
    top: 78px;
    width: 12px;
    height: 23px;
}
#intro .dron .leg-left.left {
    left: 74px;
}
#intro .dron .leg-left.right {
    right: 90px;
}
#intro .dron .leg-right {
    top: 78px;
    width: 12px;
    height: 23px;
}
#intro .dron .leg-right.left {
    left: 91px;
}
#intro .dron .leg-right.right {
    right: 74px;
}



/*
    Animations
*/

#intro.play .dron span {
    -webkit-animation: dron-wrap 2s infinite linear;
       -moz-animation: dron-wrap 2s infinite linear;
            animation: dron-wrap 2s infinite linear;
}
#intro.play .dron .propeller.left {
    -webkit-animation: dron-propeller-left 0.5s infinite linear;
       -moz-animation: dron-propeller-left 0.5s infinite linear;
            animation: dron-propeller-left 0.5s infinite linear;
}
#intro.play .dron .propeller.right {
    -webkit-animation: dron-propeller-right 0.5s infinite linear;
       -moz-animation: dron-propeller-right 0.5s infinite linear;
            animation: dron-propeller-right 0.5s infinite linear;
}
#intro.play .dron .leg-left {
    -webkit-transform-origin: 15px -4px;
       -moz-transform-origin: 15px -4px;
            transform-origin: 15px -4px;
    -webkit-animation: dron-leg-left 2s infinite ease-in-out;
       -moz-animation: dron-leg-left 2s infinite ease-in-out;
            animation: dron-leg-left 2s infinite ease-in-out;
}
#intro.play .dron .leg-right {
    -webkit-transform-origin: -4px -4px;
       -moz-transform-origin: -4px -4px;
            transform-origin: -4px -4px;
    -webkit-animation: dron-leg-right 2s infinite ease-in-out;
       -moz-animation: dron-leg-right 2s infinite ease-in-out;
            animation: dron-leg-right 2s infinite ease-in-out;
}



/*
    Keyframes
*/

@-webkit-keyframes dron-wrap  {
    0%   {-webkit-transform: rotate(0deg) translateX(50px) rotate(0deg);}
    100% {-webkit-transform: rotate(360deg) translateX(50px) rotate(-360deg);}
}
@-webkit-keyframes dron-propeller-left {
    0%   {-webkit-transform: rotateY(360deg);}
    100% {-webkit-transform: rotateY(0deg);}
}
@-webkit-keyframes dron-propeller-right {
    0%   {-webkit-transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes dron-leg-left {
    0%   {-webkit-transform: rotateZ(0deg);}
    5%   {-webkit-transform: rotateZ(-12deg);}
    10%  {-webkit-transform: rotateZ(0deg);}
    15%  {-webkit-transform: rotateZ(-12deg);}
    20%  {-webkit-transform: rotateZ(0deg);}
    100% {-webkit-transform: rotateZ(0deg);}
}
@-webkit-keyframes dron-leg-right {
    0%   {-webkit-transform: rotateZ(0deg);}
    5%   {-webkit-transform: rotateZ(12deg);}
    10%  {-webkit-transform: rotateZ(0deg);}
    15%  {-webkit-transform: rotateZ(12deg);}
    20%  {-webkit-transform: rotateZ(0deg);}
    100% {-webkit-transform: rotateZ(0deg);}
}
@-moz-keyframes dron-wrap  {
    0%   {-moz-transform: rotate(0deg) translateX(50px) rotate(0deg);}
    100% {-moz-transform: rotate(360deg) translateX(50px) rotate(-360deg);}
}
@-moz-keyframes dron-propeller-left {
    0%   {-moz-transform: rotateY(360deg);}
    100% {-moz-transform: rotateY(0deg);}
}
@-moz-keyframes dron-propeller-right {
    0%   {-moz-transform: rotateY(0deg);}
    100% {-moz-transform: rotateY(360deg);}
}
@-moz-keyframes dron-leg-left {
    0%   {-moz-transform: rotateZ(0deg);}
    5%   {-moz-transform: rotateZ(-12deg);}
    10%  {-moz-transform: rotateZ(0deg);}
    15%  {-moz-transform: rotateZ(-12deg);}
    20%  {-moz-transform: rotateZ(0deg);}
    100% {-moz-transform: rotateZ(0deg);}
}
@-moz-keyframes dron-leg-right {
    0%   {-moz-transform: rotateZ(0deg);}
    5%   {-moz-transform: rotateZ(12deg);}
    10%  {-moz-transform: rotateZ(0deg);}
    15%  {-moz-transform: rotateZ(12deg);}
    20%  {-moz-transform: rotateZ(0deg);}
    100% {-moz-transform: rotateZ(0deg);}
}
@keyframes dron-wrap  {
    0%   {transform: rotate(0deg) translateX(50px) rotate(0deg);}
    100% {transform: rotate(360deg) translateX(50px) rotate(-360deg);}
}
@keyframes dron-propeller-left {
    0%   {transform: rotateY(360deg);}
    100% {transform: rotateY(0deg);}
}
@keyframes dron-propeller-right {
    0%   {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
}
@keyframes dron-leg-left {
    0%   {transform: rotateZ(0deg);}
    5%   {transform: rotateZ(-12deg);}
    10%  {transform: rotateZ(0deg);}
    15%  {transform: rotateZ(-12deg);}
    20%  {transform: rotateZ(0deg);}
    100% {transform: rotateZ(0deg);}
}
@keyframes dron-leg-right {
    0%   {transform: rotateZ(0deg);}
    5%   {transform: rotateZ(12deg);}
    10%  {transform: rotateZ(0deg);}
    15%  {transform: rotateZ(12deg);}
    20%  {transform: rotateZ(0deg);}
    100% {transform: rotateZ(0deg);}
}





/*=============
  Laser
  =============*/



/*
    Layout
*/

#intro .red {
    height: 10px;
    overflow: hidden;
    -webkit-transform-origin: 100% 50%;
       -moz-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}
#intro .red img {
    right: -194px;
    width: 194px;
    height: 10px;
}
#intro .blue {
    height: 14px;
    overflow: hidden;
    -webkit-transform-origin: 0% 50%;
       -moz-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
}
#intro .blue img {
    left: -132px;
    width: 132px;
    height: 14px;
}





/*=============
  Pole
  =============*/



/*
    Layout
*/

.pole {
    width: 352px;
    height: 352px;
    z-index: 3;
}
.pole img {
    width: 100%;
    height: 100%;
}





/*=============
  Hacker
  =============*/



/*
    Layout
*/

#intro .hacker {
    width: 162px;
    height: 125px;
}
#intro .hacker span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#intro .hacker b {
    top: -28px;
    width: 162px;
    height: 162px;
    z-index: 2;
    -webkit-transform: scaleY(0.3);
       -moz-transform: scaleY(0.3);
            transform: scaleY(0.3);
}
#intro .hacker b i {
    top: 50%;
    left: 50%;
    height: 8px;
    width: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 4px;
    background: #74A2CF;
}
#intro .hacker .bg {
    bottom: 0;
    left: 0;
    width: 162px;
    height: 103px;
    z-index: 1;
}
#intro .hacker .dome {
    top: 0;
    left: 28px;
    width: 107px;
    height: 65px;
    z-index: 3;
}



/*
    Animations
*/

#intro.play .hacker span {
    -webkit-animation: hacker-wrap 4s 2s linear infinite;
       -moz-animation: hacker-wrap 4s 2s linear infinite;
            animation: hacker-wrap 4s 2s linear infinite;
}
#intro.play .hacker b i {
    -webkit-animation: hacker-spin 2s linear infinite;
       -moz-animation: hacker-spin 2s linear infinite;
            animation: hacker-spin 2s linear infinite;
}
#intro.play .hacker b i:nth-child(1) {
    -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
            animation-delay: 0s;
}
#intro.play .hacker b i:nth-child(2) {
    -webkit-animation-delay: -0.25s;
       -moz-animation-delay: -0.25s;
            animation-delay: -0.25s;
}
#intro.play .hacker b i:nth-child(3) {
    -webkit-animation-delay: -0.50s;
       -moz-animation-delay: -0.50s;
            animation-delay: -0.50s;
}
#intro.play .hacker b i:nth-child(4) {
    -webkit-animation-delay: -0.75s;
       -moz-animation-delay: -0.75s;
            animation-delay: -0.75s;
}
#intro.play .hacker b i:nth-child(5) {
    -webkit-animation-delay: -1.00s;
       -moz-animation-delay: -1.00s;
            animation-delay: -1.00s;
}
#intro.play .hacker b i:nth-child(6) {
    -webkit-animation-delay: -1.25s;
       -moz-animation-delay: -1.25s;
            animation-delay: -1.25s;
}
#intro.play .hacker b i:nth-child(7) {
    -webkit-animation-delay: -1.50s;
       -moz-animation-delay: -1.50s;
            animation-delay: -1.50s;
}
#intro.play .hacker b i:nth-child(8) {
    -webkit-animation-delay: -1.75s;
       -moz-animation-delay: -1.75s;
            animation-delay: -1.75s;
}
#intro.play .hacker .label {
    -webkit-animation: hacker-label 4s 2s linear infinite;
       -moz-animation: hacker-label 4s 2s linear infinite;
            animation: hacker-label 4s 2s linear infinite;
}
#intro.play .hacker .label:before {
    -webkit-animation: hacker-line 4s 2s linear infinite;
       -moz-animation: hacker-line 4s 2s linear infinite;
            animation: hacker-line 4s 2s linear infinite;
}



/*
    Keyframes
*/

@-webkit-keyframes hacker-wrap {
    0%   {-webkit-transform: rotate(0deg) translateX(130px);}
    100% {-webkit-transform: rotate(-360deg) translateX(130px);}
}
@-webkit-keyframes hacker-spin {
    0%   {-webkit-transform: rotateZ(0deg) translateX(65px) rotateZ(-0deg) scaleY(3.33);}
    100% {-webkit-transform: rotateZ(360deg) translateX(65px) rotateZ(-360deg) scaleY(3.33);}
}
@-webkit-keyframes hacker-label {
    0%   {-webkit-transform: rotateZ(0deg);}
    100% {-webkit-transform: rotateZ(360deg);}
}
@-webkit-keyframes hacker-line {
    0%   {-webkit-transform: rotateZ(-35deg);}
    100% {-webkit-transform: rotateZ(-395deg);}
}
@-moz-keyframes hacker-wrap {
    0%   {-moz-transform: rotate(0deg) translateX(130px);}
    100% {-moz-transform: rotate(-360deg) translateX(130px);}
}
@-moz-keyframes hacker-spin {
    0%   {-moz-transform: rotateZ(0deg) translateX(65px) rotateZ(-0deg) scaleY(3.33);}
    100% {-moz-transform: rotateZ(360deg) translateX(65px) rotateZ(-360deg) scaleY(3.33);}
}
@-moz-keyframes hacker-label {
    0%   {-moz-transform: rotateZ(0deg);}
    100% {-moz-transform: rotateZ(360deg);}
}
@-moz-keyframes hacker-line {
    0%   {-moz-transform: rotateZ(-35deg);}
    100% {-moz-transform: rotateZ(-395deg);}
}
@keyframes hacker-wrap {
    0%   {transform: rotate(0deg) translateX(130px);}
    100% {transform: rotate(-360deg) translateX(130px);}
}
@keyframes hacker-spin {
    0%   {transform: rotateZ(0deg) translateX(65px) rotateZ(-0deg) scaleY(3.33);}
    100% {transform: rotateZ(360deg) translateX(65px) rotateZ(-360deg) scaleY(3.33);}
}
@keyframes hacker-label {
    0%   {transform: rotateZ(0deg);}
    100% {transform: rotateZ(360deg);}
}
@keyframes hacker-line {
    0%   {transform: rotateZ(-35deg);}
    100% {transform: rotateZ(-395deg);}
}




/*=============
  Boom
  =============*/



/*
    Layout
*/

#intro .boom {
    width: 151px;
    height: 151px;
}
#intro .boom span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#intro .boom img {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
}
#intro .boom .a {
    top: 56px;
    left: 56px;
    width: 40px;
    height: 40px;
    z-index: 2;
}
#intro .boom .b {
    top: 28px;
    left: 28px;
    width: 95px;
    height: 95px;
    z-index: 3;
}
#intro .boom .c {
    top: 19px;
    left: 19px;
    width: 114px;
    height: 114px;
    z-index: 4;
}
#intro .boom .d {
    top: 0;
    left: 0;
    width: 151px;
    height: 151px;
    z-index: 5;
}
#intro .boom .e {
    top: 23px;
    left: 23px;
    width: 106px;
    height: 106px;
    z-index: 1;
}



/*
    Animations
*/

#intro.play .boom .a {
    -webkit-animation: boom-a 2s ease-out forwards;
       -moz-animation: boom-a 2s ease-out forwards;
            animation: boom-a 2s ease-out forwards;
}
#intro.play .boom .b {
    -webkit-animation: boom-b 2s ease-out forwards;
       -moz-animation: boom-b 2s ease-out forwards;
            animation: boom-b 2s ease-out forwards;
}
#intro.play .boom .c {
    -webkit-animation: boom-c 2s ease-out forwards;
       -moz-animation: boom-c 2s ease-out forwards;
            animation: boom-c 2s ease-out forwards;
}
#intro.play .boom .a {
    -webkit-animation: boom-d 2s ease-out forwards;
       -moz-animation: boom-d 2s ease-out forwards;
            animation: boom-d 2s ease-out forwards;
}
#intro.play .boom .e {
    -webkit-animation: boom-e 4s ease-out forwards;
       -moz-animation: boom-e 4s ease-out forwards;
            animation: boom-e 4s ease-out forwards;
}



/*
    Keyframes
*/
@-webkit-keyframes boom-a {
    0%   {opacity: 0; -webkit-transform: scale(0);}
    25%  {opacity: 1; -webkit-transform: scale(1);}
    50%  {opacity: 0; -webkit-transform: scale(2);}
    100% {opacity: 0; -webkit-transform: scale(2);}
}
@-webkit-keyframes boom-b {
    0%   {opacity: 0; -webkit-transform: scale(0);}
    10%  {opacity: 0; -webkit-transform: scale(0);}
    35%  {opacity: 1; -webkit-transform: scale(1);}
    60%  {opacity: 0; -webkit-transform: scale(2);}
    100% {opacity: 0; -webkit-transform: scale(2);}
}
@-webkit-keyframes boom-c {
    0%   {opacity: 0; -webkit-transform: scale(0);}
    20%  {opacity: 0; -webkit-transform: scale(0);}
    45%  {opacity: 1; -webkit-transform: scale(1);}
    70%  {opacity: 0; -webkit-transform: scale(2);}
    100% {opacity: 0; -webkit-transform: scale(2);}
}
@-webkit-keyframes boom-d {
    0%   {opacity: 0; -webkit-transform: scale(0);}
    30%  {opacity: 0; -webkit-transform: scale(0);}
    55%  {opacity: 1; -webkit-transform: scale(1);}
    80%  {opacity: 0; -webkit-transform: scale(2);}
    100% {opacity: 0; -webkit-transform: scale(2);}
}
@-webkit-keyframes boom-e {
    0%   {-webkit-transform: scale(0);}
    100% {-webkit-transform: scale(1);}
}
@-moz-keyframes boom-a {
    0%   {opacity: 0; -moz-transform: scale(0);}
    25%  {opacity: 1; -moz-transform: scale(1);}
    50%  {opacity: 0; -moz-transform: scale(2);}
    100% {opacity: 0; -moz-transform: scale(2);}
}
@-moz-keyframes boom-b {
    0%   {opacity: 0; -moz-transform: scale(0);}
    10%  {opacity: 0; -moz-transform: scale(0);}
    35%  {opacity: 1; -moz-transform: scale(1);}
    60%  {opacity: 0; -moz-transform: scale(2);}
    100% {opacity: 0; -moz-transform: scale(2);}
}
@-moz-keyframes boom-c {
    0%   {opacity: 0; -moz-transform: scale(0);}
    20%  {opacity: 0; -moz-transform: scale(0);}
    45%  {opacity: 1; -moz-transform: scale(1);}
    70%  {opacity: 0; -moz-transform: scale(2);}
    100% {opacity: 0; -moz-transform: scale(2);}
}
@-moz-keyframes boom-d {
    0%   {opacity: 0; -moz-transform: scale(0);}
    30%  {opacity: 0; -moz-transform: scale(0);}
    55%  {opacity: 1; -moz-transform: scale(1);}
    80%  {opacity: 0; -moz-transform: scale(2);}
    100% {opacity: 0; -moz-transform: scale(2);}
}
@-moz-keyframes boom-e {
    0%   {-moz-transform: scale(0);}
    100% {-moz-transform: scale(1);}
}
@keyframes boom-a {
    0%   {opacity: 0; transform: scale(0);}
    25%  {opacity: 1; transform: scale(1);}
    50%  {opacity: 0; transform: scale(2);}
    100% {opacity: 0; transform: scale(2);}
}
@keyframes boom-b {
    0%   {opacity: 0; transform: scale(0);}
    10%  {opacity: 0; transform: scale(0);}
    35%  {opacity: 1; transform: scale(1);}
    60%  {opacity: 0; transform: scale(2);}
    100% {opacity: 0; transform: scale(2);}
}
@keyframes boom-c {
    0%   {opacity: 0; transform: scale(0);}
    20%  {opacity: 0; transform: scale(0);}
    45%  {opacity: 1; transform: scale(1);}
    70%  {opacity: 0; transform: scale(2);}
    100% {opacity: 0; transform: scale(2);}
}
@keyframes boom-d {
    0%   {opacity: 0; transform: scale(0);}
    30%  {opacity: 0; transform: scale(0);}
    55%  {opacity: 1; transform: scale(1);}
    80%  {opacity: 0; transform: scale(2);}
    100% {opacity: 0; transform: scale(2);}
}
@keyframes boom-e {
    0%   {transform: scale(0);}
    100% {transform: scale(1);}
}





/*=============
  Virus
  =============*/



/*
    Layout
*/

#intro .virus {
    width: 171px;
    height: 126px;
}
#intro .virus span {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#intro .virus b {
    top: -27px;
    width: 171px;
    height: 171px;
    z-index: 4;
    -webkit-transform: scaleY(0.35);
       -moz-transform: scaleY(0.35);
            transform: scaleY(0.35);
}
#intro .virus b i {
    top: 50%;
    left: 50%;
    height: 10px;
    width: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 5px;
    background: #FFF12D;
}
#intro .virus .bg {
    top: 27px;
    left: 0;
    width: 171px;
    height: 75px;
    z-index: 3;
}
#intro .virus .dome {
    top: 0;
    left: 29px;
    width: 113px;
    height: 73px;
    z-index: 5;
}
#intro .virus .sphere {
    top: 0;
    left: 29px;
    width: 113px;
    height: 113px;
    z-index: 2;
}
#intro .virus .legs {
    bottom: 0;
    left: 51px;
    width: 69px;
    height: 23px;
    z-index: 1;
}



/*
    Animations
*/

#intro.play .virus span {
    -webkit-animation: virus-wrap 1.2s ease-in-out infinite;
       -moz-animation: virus-wrap 1.2s ease-in-out infinite;
            animation: virus-wrap 1.2s ease-in-out infinite;
}
#intro.play .virus b i {
    -webkit-animation: virus-spin 4s linear infinite;
       -moz-animation: virus-spin 4s linear infinite;
            animation: virus-spin 4s linear infinite;
}
#intro.play .virus b i:nth-child(1) {
    -webkit-animation-delay: 0s;
       -moz-animation-delay: 0s;
            animation-delay: 0s;
}
#intro.play .virus b i:nth-child(2) {
    -webkit-animation-delay: -0.5s;
       -moz-animation-delay: -0.5s;
            animation-delay: -0.5s;
}
#intro.play .virus b i:nth-child(3) {
    -webkit-animation-delay: -1.0s;
       -moz-animation-delay: -1.0s;
            animation-delay: -1.0s;
}
#intro.play .virus b i:nth-child(4) {
    -webkit-animation-delay: -1.5s;
       -moz-animation-delay: -1.5s;
            animation-delay: -1.5s;
}
#intro.play .virus b i:nth-child(5) {
    -webkit-animation-delay: -2.0s;
       -moz-animation-delay: -2.0s;
            animation-delay: -2.0s;
}
#intro.play .virus b i:nth-child(6) {
    -webkit-animation-delay: -2.5s;
       -moz-animation-delay: -2.5s;
            animation-delay: -2.5s;
}
#intro.play .virus b i:nth-child(7) {
    -webkit-animation-delay: -3.0s;
       -moz-animation-delay: -3.0s;
            animation-delay: -3.0s;
}
#intro.play .virus b i:nth-child(8) {
    -webkit-animation-delay: -3.5s;
       -moz-animation-delay: -3.5s;
            animation-delay: -3.5s;
}
#intro.play .virus .label p {
    -webkit-animation: virus-label 1.2s ease-in-out infinite;
       -moz-animation: virus-label 1.2s ease-in-out infinite;
            animation: virus-label 1.2s ease-in-out infinite;
}



/*
    Keyframes
*/

@-webkit-keyframes virus-wrap {
    0%   {-webkit-transform: rotateZ(6deg);}
    50%  {-webkit-transform: rotateZ(-6deg);}
    100% {-webkit-transform: rotateZ(6deg);}
}
@-webkit-keyframes virus-spin {
    0%   {-webkit-transform: rotateZ(0deg) translateX(65px) rotateZ(-0deg) scaleY(2.86);}
    100% {-webkit-transform: rotateZ(360deg) translateX(65px) rotateZ(-360deg) scaleY(2.86);}
}
@-webkit-keyframes virus-label {
    0%   {-webkit-transform: rotateZ(-6deg);}
    50%  {-webkit-transform: rotateZ(6deg);}
    100% {-webkit-transform: rotateZ(-6deg);}
}
@-moz-keyframes virus-wrap {
    0%   {-moz-transform: rotateZ(6deg);}
    50%  {-moz-transform: rotateZ(-6deg);}
    100% {-moz-transform: rotateZ(6deg);}
}
@-moz-keyframes virus-spin {
    0%   {-moz-transform: rotateZ(0deg) translateX(65px) rotateZ(-0deg) scaleY(2.86);}
    100% {-moz-transform: rotateZ(360deg) translateX(65px) rotateZ(-360deg) scaleY(2.86);}
}
@-moz-keyframes virus-label {
    0%   {-moz-transform: rotateZ(-6deg);}
    50%  {-moz-transform: rotateZ(6deg);}
    100% {-moz-transform: rotateZ(-6deg);}
}
@keyframes virus-wrap {
    0%   {transform: rotateZ(6deg);}
    50%  {transform: rotateZ(-6deg);}
    100% {transform: rotateZ(6deg);}
}
@keyframes virus-spin {
    0%   {transform: rotateZ(0deg) translateX(65px) rotateZ(-0deg) scaleY(2.86);}
    100% {transform: rotateZ(360deg) translateX(65px) rotateZ(-360deg) scaleY(2.86);}
}
@keyframes virus-label {
    0%   {transform: rotateZ(-6deg);}
    50%  {transform: rotateZ(6deg);}
    100% {transform: rotateZ(-6deg);}
}





/*=============
  Labels
  =============*/



/*
    Layout
*/

#intro .label.english {
    display: block;
}
#intro .label.russian {
    display: none;
}
#intro.ru .label.english {
    display: none;
}
#intro.ru .label.russian {
    display: block;
}
#intro .label p {
    position: relative;
    margin: 0;
    white-space: nowrap;
    color: #FFFFFF;
    background: rgba(255,255,255,0.2);
    text-transform: uppercase;
    line-height: 20px;
    padding: 0 10px;
    border-radius: 10px;
    z-index: 2;
}
#intro .label:before {
    content: '';
    position: absolute;
    top: 10px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    z-index: 1;
}
#intro .label.left:before {
    right: 100%;
    -webkit-transform-origin: 100% 50%;
       -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
         -o-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}
#intro .label.right:before {
    left: 100%;
    -webkit-transform-origin: 0 50%;
       -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
         -o-transform-origin: 0 50%;
            transform-origin: 0 50%;
}
#intro .label.center:before {
    left: 50%;
    -webkit-transform-origin: 0 50%;
       -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
         -o-transform-origin: 0 50%;
            transform-origin: 0 50%;
}





/*=============
  Config
  =============*/



/*
    Main
*/

#intro {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #4B509C;
    background-image: -webkit-linear-gradient(top left, #214694, #775BA6);
    background-image:    -moz-linear-gradient(top left, #214694, #775BA6);
    background-image:     -ms-linear-gradient(top left, #214694, #775BA6);
    background-image:      -o-linear-gradient(top left, #214694, #775BA6);
    background-image:         linear-gradient(to bottom right, #214694, #775BA6);
}
#intro canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#intro article {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1400px;
    height: 700px;
    margin: -350px 0 0 -700px;
    z-index: 2;
    transform: translateZ(0);
}
#intro article * {
    display: block;
    position: absolute;
    transform: translateZ(0);
}
#intro .timer {
    visibility: hidden;
}



/*
    Layout
*/

#intro .rocket {
    top: 226px;
    left: 50px;
}
#intro .dron.first {
    right: 300px;
    top: 100px;
}
#intro .dron.first .label {
    left: 250px;
    top: -50px;
}
#intro .dron.first .label:before {
    width: 90px;
    -webkit-transform: rotateZ(-37deg);
       -moz-transform: rotateZ(-37deg);
            transform: rotateZ(-37deg);
}
#intro .dron.second {
    right: 150px;
    bottom: 60px;
}
#intro .dron.second .label {
    right: 290px;
    bottom: -20px;
}
#intro .dron.second .label:before {
    width: 90px;
    -webkit-transform: rotateZ(-40deg);
       -moz-transform: rotateZ(-40deg);
            transform: rotateZ(-40deg);
}
#intro .pole {
    top: 174px;
    left: 29px;
}
#intro .red.first {
    right: 485px;
    top: 140px;
    width: 3000px;
    -webkit-transform: rotateZ(-18deg);
       -moz-transform: rotateZ(-18deg);
            transform: rotateZ(-18deg);
}
#intro .red.second {
    right: 440px;
    top: 190px;
    width: 598px;
    -webkit-transform: rotateZ(-15deg);
       -moz-transform: rotateZ(-15deg);
            transform: rotateZ(-15deg);
}
#intro .red.third {
    right: 1020px;
    top: 345px;
    width: 3000px;
    -webkit-transform: rotateZ(-165deg);
       -moz-transform: rotateZ(-165deg);
            transform: rotateZ(-165deg);
}
#intro .red.fourth {
    right: 285px;
    top: 531px;
    width: 757px;
    -webkit-transform: rotateZ(14deg);
       -moz-transform: rotateZ(14deg);
            transform: rotateZ(14deg);
}
#intro .red.fifth {
    right: 1020px;
    top: 349px;
    width: 3000px;
    -webkit-transform: rotateZ(166deg);
       -moz-transform: rotateZ(166deg);
            transform: rotateZ(166deg);
}
#intro .hacker {
    top: 400px;
    right: 200px;
}
#intro.play .hacker .label {
    bottom: 0;
    left: -120px;
}
#intro.play .hacker .label p {
    background: #8177B4;
}
#intro.play .hacker .label:before {
    width: 105px;
    -webkit-transform: rotateZ(-35deg);
       -moz-transform: rotateZ(-35deg);
            transform: rotateZ(-35deg);
}
#intro .blue.first,
#intro .blue.second {
    top: 378px;
    left: 347px;
    width: 3000px;
}
#intro .blue.first {
    -webkit-transform: rotateZ(10deg);
       -moz-transform: rotateZ(10deg);
            transform: rotateZ(10deg);
}
#intro .blue.second {
    -webkit-transform: rotateZ(7deg);
       -moz-transform: rotateZ(7deg);
            transform: rotateZ(7deg);
}
#intro .blue.third,
#intro .blue.fourth {
    top: 558px;
    left: 347px;
    width: 3000px;
}
#intro .blue.third {
    -webkit-transform: rotateZ(-2deg);
       -moz-transform: rotateZ(-2deg);
            transform: rotateZ(-2deg);
}
#intro .blue.fourth {
    -webkit-transform: rotateZ(1deg);
       -moz-transform: rotateZ(1deg);
            transform: rotateZ(1deg);
}
#intro .blue.fifth,
#intro .blue.sixth {
    top: 178px;
    left: 347px;
    width: 3000px;
}
#intro .blue.fifth {
    -webkit-transform: rotateZ(-2deg);
       -moz-transform: rotateZ(-2deg);
            transform: rotateZ(-2deg);
}
#intro .blue.sixth {
    -webkit-transform: rotateZ(0deg);
       -moz-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
}
#intro .boom.first {
    top: 387px;
    right: 205px;
}
#intro .boom.second {
    top: 88px;
    right: 110px;
}
#intro .virus {
    top: 100px;
    right: 100px;
}
#intro .virus .label {
    top: 0;
    right: 230px;
}
#intro.play .virus .label p {
    -webkit-transform-origin: 100% 50%;
       -moz-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
}
#intro .virus .label:before {
    width: 80px;
    -webkit-transform: rotateZ(40deg);
       -moz-transform: rotateZ(40deg);
            transform: rotateZ(40deg);
}



/*
    Preparation
*/

#intro .rocket {
    transform: translateX(400px);
    -webkit-animation: show-left 3s ease-in-out forwards;
       -moz-animation: show-left 3s ease-in-out forwards;
            animation: show-left 3s ease-in-out forwards;
}
#intro .dron.first span {
    -webkit-animation-delay: 0.0s;
       -moz-animation-delay: 0.0s;
            animation-delay: 0.0s;
}
#intro .dron.second span {
    -webkit-animation-delay: 1.2s;
       -moz-animation-delay: 1.2s;
            animation-delay: 1.2s;
}
#intro .dron.second .leg-left,
#intro .dron.second .leg-right {
    -webkit-animation-delay: 1.5s;
       -moz-animation-delay: 1.5s;
            animation-delay: 1.5s;
}



/*
    Hidden
*/
#intro .rocket {

}
#intro .dron.first {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
}
#intro .dron.second {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
}
#intro .pole {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
}
#intro .hacker {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
}
#intro .virus {
    -webkit-transform: scale(0);
       -moz-transform: scale(0);
            transform: scale(0);
}



/*
    Animations
*/

#intro.play .timer {
    -webkit-animation: timer 22s linear;
       -moz-animation: timer 22s linear;
            animation: timer 22s linear;
}
#intro.play .rocket {
    -webkit-animation: move-right  1.0s  0.0s ease-in-out forwards,
                       jump-up-a   1.2s  3.1s ease-in-out forwards,
                       jump-down   1.2s  5.6s ease-in-out forwards,
                       jump-up-b   1.2s  7.8s ease-in-out forwards,
                       move-down   0.6s 11.0s ease-in-out forwards,
                       move-up     0.8s 13.4s ease-in-out forwards,
                       jump-center 1.3s 16.4s ease-in-out forwards,
                       move-left   1.0s 17.7s ease-in-out forwards;
       -moz-animation: move-right  1.0s  0.0s ease-in-out forwards,
                       jump-up-a   1.2s  3.1s ease-in-out forwards,
                       jump-down   1.2s  5.6s ease-in-out forwards,
                       jump-up-b   1.2s  7.8s ease-in-out forwards,
                       move-down   0.6s 11.0s ease-in-out forwards,
                       move-up     0.8s 13.4s ease-in-out forwards,
                       jump-center 1.3s 16.4s ease-in-out forwards,
                       move-left   1.0s 17.7s ease-in-out forwards;
            animation: move-right  1.0s  1.0s ease-in-out forwards,
                       jump-up-a   1.2s  3.1s ease-in-out forwards,
                       jump-down   1.2s  5.6s ease-in-out forwards,
                       jump-up-b   1.2s  7.8s ease-in-out forwards,
                       move-down   0.6s 11.0s ease-in-out forwards,
                       move-up     0.8s 13.4s ease-in-out forwards,
                       jump-center 1.3s 16.4s ease-in-out forwards,
                       move-left   1.0s 17.7s ease-in-out forwards;
}
#intro.play .rocket .arm-left {
    -webkit-animation: rocket-arm-left 1s  0.0s ease,
                       rocket-arm-left 1s  3.1s ease,
                       rocket-arm-left 1s  5.6s ease,
                       rocket-arm-left 1s  7.8s ease,
                       rocket-arm-left 1s 12.2s ease,
                       rocket-arm-left 1s 15.0s ease;
       -moz-animation: rocket-arm-left 1s  0.0s ease,
                       rocket-arm-left 1s  3.1s ease,
                       rocket-arm-left 1s  5.6s ease,
                       rocket-arm-left 1s  7.8s ease,
                       rocket-arm-left 1s 12.2s ease,
                       rocket-arm-left 1s 15.0s ease;
            animation: rocket-arm-left 1s  0.0s ease,
                       rocket-arm-left 1s  3.1s ease,
                       rocket-arm-left 1s  5.6s ease,
                       rocket-arm-left 1s  7.8s ease,
                       rocket-arm-left 1s 12.2s ease,
                       rocket-arm-left 1s 15.0s ease;
}

#intro.play .dron.first {
    -webkit-animation: show-right-up 2.0s 0.0s ease forwards,
                       hide-right    3.0s 5.6s ease forwards;
       -moz-animation: show-right-up 2.0s 0.0s ease forwards,
                       hide-right    3.0s 5.6s ease forwards;
            animation: show-right-up 2.0s 0.0s ease forwards,
                       hide-right    3.0s 5.6s ease forwards;
}
#intro.play .dron.second {
    -webkit-animation: show-right-down 2.0s 2.5s ease forwards,
                       hide-right      3.0s 7.8s ease forwards;
       -moz-animation: show-right-down 2.0s 2.5s ease forwards,
                       hide-right      3.0s 7.8s ease forwards;
            animation: show-right-down 2.0s 2.5s ease forwards,
                       hide-right      3.0s 7.8s ease forwards;
}
#intro.play .pole {
    -webkit-animation: show-zoom 0.7s 4.3s ease-in-out forwards,
                       jump-down 1.2s 5.6s ease-in-out forwards,
                       jump-up-a 1.2s 7.8s ease-in-out forwards,
                       hide-zoom 0.7s 9.0s ease-in-out forwards;
       -moz-animation: show-zoom 0.7s 4.3s ease-in-out forwards,
                       jump-down 1.2s 5.6s ease-in-out forwards,
                       jump-up-a 1.2s 7.8s ease-in-out forwards,
                       hide-zoom 0.7s 9.0s ease-in-out forwards;
            animation: show-zoom 0.7s 4.3s ease-in-out forwards,
                       jump-down 1.2s 5.6s ease-in-out forwards,
                       jump-up-a 1.2s 7.8s ease-in-out forwards,
                       hide-zoom 0.7s 9.0s ease-in-out forwards;
}
#intro.play .hacker {
    -webkit-animation: show-down  3.0s  8.0s ease forwards,
                       hide-alpha 0.5s 13.0s ease forwards;
       -moz-animation: show-down  3.0s  8.0s ease forwards,
                       hide-alpha 0.5s 13.0s ease forwards;
            animation: show-down  3.0s  8.0s ease forwards,
                       hide-alpha 0.5s 13.0s ease forwards;
}
#intro.play .virus {
    -webkit-animation: show-up    10.0s  6.0s ease forwards,
                       hide-alpha  0.5s 15.5s ease forwards;
       -moz-animation: show-up    10.0s  6.0s ease forwards,
                       hide-alpha  0.5s 15.5s ease forwards;
            animation: show-up    10.0s  6.0s ease forwards,
                       hide-alpha  0.5s 15.5s ease forwards;
}
#intro.play .red.first img {
    -webkit-animation: red-first 3s 2.95s linear;
       -moz-animation: red-first 3s 2.95s linear;
            animation: red-first 3s 2.95s linear;
}
#intro.play .red.second img {
    -webkit-animation: red-second 0.792s 4.45s linear;
       -moz-animation: red-second 0.792s 4.45s linear;
            animation: red-second 0.792s 4.45s linear;
}
#intro.play .red.third img {
    -webkit-animation: red-third 3s 5.048s linear;
       -moz-animation: red-third 3s 5.048s linear;
            animation: red-third 3s 5.048s linear;
}
#intro.play .red.fourth img {
    -webkit-animation: red-fourth 0.951s 6.65s linear;
       -moz-animation: red-fourth 0.951s 6.65s linear;
            animation: red-fourth 0.951s 6.65s linear;
}
#intro.play .red.fifth img {
    -webkit-animation: red-fifth 3s 7.407s linear;
       -moz-animation: red-fifth 3s 7.407s linear;
            animation: red-fifth 3s 7.407s linear;
}
#intro.play .blue.first img {
    -webkit-animation: blue 3s 10.0s linear;
       -moz-animation: blue 3s 10.0s linear;
            animation: blue 3s 10.0s linear;
}
#intro.play .blue.second img {
    -webkit-animation: blue 3s 10.2s linear;
       -moz-animation: blue 3s 10.2s linear;
            animation: blue 3s 10.2s linear;
}
#intro.play .blue.third img {
    -webkit-animation: blue 3s 11.6s linear;
       -moz-animation: blue 3s 11.6s linear;
            animation: blue 3s 11.6s linear;
}
#intro.play .blue.fourth img {
    -webkit-animation: blue 3s 11.9s linear;
       -moz-animation: blue 3s 11.9s linear;
            animation: blue 3s 11.9s linear;
}
#intro.play .boom.first {
    -webkit-animation: hide-right 3s 13.6s ease forwards;
       -moz-animation: hide-right 3s 13.6s ease forwards;
            animation: hide-right 3s 13.6s ease forwards;
}
#intro.play .boom.first span {
    -webkit-animation: hacker-wrap 4s 2s linear infinite;
       -moz-animation: hacker-wrap 4s 2s linear infinite;
            animation: hacker-wrap 4s 2s linear infinite;
}
#intro.play .boom.first img {
    -webkit-animation-delay: 12.2s;
       -moz-animation-delay: 12.2s;
            animation-delay: 12.2s;
}
#intro.play .blue.fifth img {
    -webkit-animation: blue 3s 14.3s linear;
       -moz-animation: blue 3s 14.3s linear;
            animation: blue 3s 14.3s linear;
}
#intro.play .blue.sixth img {
    -webkit-animation: blue 3s 14.6s linear;
       -moz-animation: blue 3s 14.6s linear;
            animation: blue 3s 14.6s linear;
}
#intro.play .boom.second {
    -webkit-animation: hide-right 3s 16.4s ease forwards;
       -moz-animation: hide-right 3s 16.4s ease forwards;
            animation: hide-right 3s 16.4s ease forwards;
}
#intro.play .boom.second img {
    -webkit-animation-delay: 15.0s;
       -moz-animation-delay: 15.0s;
            animation-delay: 15.0s;
}



/*
    Keyframes
*/

@-webkit-keyframes move-right {
    0%   {-webkit-transform: translateX(400px);}
    100% {-webkit-transform: translateX(0);}
}
@-webkit-keyframes move-left {
    0%   {-webkit-transform: translateX(0);}
    100% {-webkit-transform: translateX(400px);}
}
@-webkit-keyframes show-left {
    0%   {-webkit-transform: translateX(-2000px) scale(0);}
    10%  {-webkit-transform: translateX(-2000px) scale(1);}
    100% {-webkit-transform: translateX(400px) scale(1);}
}
@-webkit-keyframes show-right-up {
    0%   {-webkit-transform: translateX(2000px) translateY(-500px) scale(0);}
    10%  {-webkit-transform: translateX(2000px) translateY(-500px) scale(1);}
    100% {-webkit-transform: translateX(0px) translateY(0px) scale(1);}
}
@-webkit-keyframes show-right-down {
    0%   {-webkit-transform: translateX(2000px) translateY(500px) scale(0);}
    10%  {-webkit-transform: translateX(2000px) translateY(500px) scale(1);}
    100% {-webkit-transform: translateX(0px) translateY(0px) scale(1);}
}
@-webkit-keyframes show-down {
    0%   {-webkit-transform: translateY(2000px) scale(0);}
    10%  {-webkit-transform: translateY(2000px) scale(1);}
    100% {-webkit-transform: translateY(0px) scale(1);}
}
@-webkit-keyframes show-up {
    0%   {-webkit-transform: translateY(-2000px) scale(0);}
    10%  {-webkit-transform: translateY(-2000px) scale(1);}
    100% {-webkit-transform: translateY(0px) scale(1);}
}
@-webkit-keyframes show-zoom {
    0%   {opacity: 0; -webkit-transform: scale(0);}
    100% {opacity: 1; -webkit-transform: scale(1);}
}
@-webkit-keyframes hide-right {
    0%   {-webkit-transform: translateX(0px);}
    100% {-webkit-transform: translateX(-3000px);}
}
@-webkit-keyframes hide-alpha {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes hide-zoom {
    0%   {opacity: 1; -webkit-transform: scale(1);}
    100% {opacity: 0; -webkit-transform: scale(0);}
}
@-webkit-keyframes jump-up-a {
    0%   {-webkit-transform: translateY(0px);}
    50%  {-webkit-transform: translateY(-150px);}
    100% {-webkit-transform: translateX(0px);}
}
@-webkit-keyframes jump-up-b {
    0%   {-webkit-transform: translateY(0px);}
    50%  {-webkit-transform: translateY(-150px);}
    100% {-webkit-transform: translateX(0px);}
}
@-webkit-keyframes jump-down {
    0%   {-webkit-transform: translateY(0px);}
    50%  {-webkit-transform: translateY(150px);}
    100% {-webkit-transform: translateX(0px);}
}
@-webkit-keyframes jump-center {
    0%   {-webkit-transform: translateY(-200px);}
    60%  {-webkit-transform: translateY(100px);}
    100% {-webkit-transform: translateX(0px);}
}
@-webkit-keyframes move-up {
    0%   {-webkit-transform: translateY(180px);}
    100% {-webkit-transform: translateY(-200px);}
}
@-webkit-keyframes move-down {
    0%   {-webkit-transform: translateY(0px);}
    100% {-webkit-transform: translateY(180px);}
}
@-webkit-keyframes red-first {
    0%   {-webkit-transform: translateX(0) scaleY(1);}
    100% {-webkit-transform: translateX(-3000px) scaleY(0);}
}
@-webkit-keyframes red-second {
    0%   {-webkit-transform: translateX(0);}
    100% {-webkit-transform: translateX(-792px);}
}
@-webkit-keyframes red-third {
    0%   {-webkit-transform: translateX(0) scaleY(1);}
    100% {-webkit-transform: translateX(-3000px) scaleY(0);}
}
@-webkit-keyframes red-fourth {
    0%   {-webkit-transform: translateX(0);}
    100% {-webkit-transform: translateX(-951px);}
}
@-webkit-keyframes red-fifth {
    0%   {-webkit-transform: translateX(0) scaleY(1);}
    100% {-webkit-transform: translateX(-3000px) scaleY(0);}
}
@-webkit-keyframes hacker-hide {
    0%   {opacity: 1; -webkit-transform: rotateZ(-18deg);}
    100% {opacity: 0; -webkit-transform: rotateZ(162deg);}
}
@-webkit-keyframes blue {
    0%   {-webkit-transform: translateX(0) scaleY(1);}
    100% {-webkit-transform: translateX(3000px) scaleY(0);}
}
@-webkit-keyframes boom-hide {
    0%   {-webkit-transform: translateX(0px);}
    90%  {-webkit-transform: translateX(-3000px) scale(1);}
    100% {-webkit-transform: translateX(-3000px) scale(0);}
}
@-webkit-keyframes virus-show {
    0%   {-webkit-transform: translateY(-2000px) scale(0);}
    10%  {-webkit-transform: translateY(-2000px) scale(1);}
    100% {-webkit-transform: translateY(0px) scale(1);}
}
@-webkit-keyframes virus-hide {
    0%   {opacity: 1; -webkit-transform: rotateZ(0deg);}
    100% {opacity: 0; -webkit-transform: rotateZ(180deg);}
}
@-webkit-keyframes timer {
    0%   {-webkit-transform: translateX(0px);}
    100% {-webkit-transform: translateX(1px);}
}
@-moz-keyframes move-right {
    0%   {-moz-transform: translateX(400px);}
    100% {-moz-transform: translateX(0);}
}
@-moz-keyframes move-left {
    0%   {-moz-transform: translateX(0);}
    100% {-moz-transform: translateX(400px);}
}
@-moz-keyframes show-left {
    0%   {-moz-transform: translateX(-2000px) scale(0);}
    10%  {-moz-transform: translateX(-2000px) scale(1);}
    100% {-moz-transform: translateX(400px) scale(1);}
}
@-moz-keyframes show-right-up {
    0%   {-moz-transform: translateX(2000px) translateY(-500px) scale(0);}
    10%  {-moz-transform: translateX(2000px) translateY(-500px) scale(1);}
    100% {-moz-transform: translateX(0px) translateY(0px) scale(1);}
}
@-moz-keyframes show-right-down {
    0%   {-moz-transform: translateX(2000px) translateY(500px) scale(0);}
    10%  {-moz-transform: translateX(2000px) translateY(500px) scale(1);}
    100% {-moz-transform: translateX(0px) translateY(0px) scale(1);}
}
@-moz-keyframes show-down {
    0%   {-moz-transform: translateY(2000px) scale(0);}
    10%  {-moz-transform: translateY(2000px) scale(1);}
    100% {-moz-transform: translateY(0px) scale(1);}
}
@-moz-keyframes show-up {
    0%   {-moz-transform: translateY(-2000px) scale(0);}
    10%  {-moz-transform: translateY(-2000px) scale(1);}
    100% {-moz-transform: translateY(0px) scale(1);}
}
@-moz-keyframes show-zoom {
    0%   {opacity: 0; -moz-transform: scale(0);}
    100% {opacity: 1; -moz-transform: scale(1);}
}
@-moz-keyframes hide-right {
    0%   {-moz-transform: translateX(0px);}
    100% {-moz-transform: translateX(-3000px);}
}
@-moz-keyframes hide-alpha {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
@-moz-keyframes hide-zoom {
    0%   {opacity: 1; -moz-transform: scale(1);}
    100% {opacity: 0; -moz-transform: scale(0);}
}
@-moz-keyframes jump-up-a {
    0%   {-moz-transform: translateY(0px);}
    50%  {-moz-transform: translateY(-150px);}
    100% {-moz-transform: translateX(0px);}
}
@-moz-keyframes jump-up-b {
    0%   {-moz-transform: translateY(0px);}
    50%  {-moz-transform: translateY(-150px);}
    100% {-moz-transform: translateX(0px);}
}
@-moz-keyframes jump-down {
    0%   {-moz-transform: translateY(0px);}
    50%  {-moz-transform: translateY(150px);}
    100% {-moz-transform: translateX(0px);}
}
@-moz-keyframes jump-center {
    0%   {-moz-transform: translateY(-200px);}
    60%  {-moz-transform: translateY(100px);}
    100% {-moz-transform: translateX(0px);}
}
@-moz-keyframes move-up {
    0%   {-moz-transform: translateY(180px);}
    100% {-moz-transform: translateY(-200px);}
}
@-moz-keyframes move-down {
    0%   {-moz-transform: translateY(0px);}
    100% {-moz-transform: translateY(180px);}
}
@-moz-keyframes red-first {
    0%   {-moz-transform: translateX(0) scaleY(1);}
    100% {-moz-transform: translateX(-3000px) scaleY(0);}
}
@-moz-keyframes red-second {
    0%   {-moz-transform: translateX(0);}
    100% {-moz-transform: translateX(-792px);}
}
@-moz-keyframes red-third {
    0%   {-moz-transform: translateX(0) scaleY(1);}
    100% {-moz-transform: translateX(-3000px) scaleY(0);}
}
@-moz-keyframes red-fourth {
    0%   {-moz-transform: translateX(0);}
    100% {-moz-transform: translateX(-951px);}
}
@-moz-keyframes red-fifth {
    0%   {-moz-transform: translateX(0) scaleY(1);}
    100% {-moz-transform: translateX(-3000px) scaleY(0);}
}
@-moz-keyframes hacker-hide {
    0%   {opacity: 1; -moz-transform: rotateZ(-18deg);}
    100% {opacity: 0; -moz-transform: rotateZ(162deg);}
}
@-moz-keyframes blue {
    0%   {-moz-transform: translateX(0) scaleY(1);}
    100% {-moz-transform: translateX(3000px) scaleY(0);}
}
@-moz-keyframes boom-hide {
    0%   {-moz-transform: translateX(0px);}
    90%  {-moz-transform: translateX(-3000px) scale(1);}
    100% {-moz-transform: translateX(-3000px) scale(0);}
}
@-moz-keyframes virus-show {
    0%   {-moz-transform: translateY(-2000px) scale(0);}
    10%  {-moz-transform: translateY(-2000px) scale(1);}
    100% {-moz-transform: translateY(0px) scale(1);}
}
@-moz-keyframes virus-hide {
    0%   {opacity: 1; -moz-transform: rotateZ(0deg);}
    100% {opacity: 0; -moz-transform: rotateZ(180deg);}
}
@-moz-keyframes timer {
    0%   {-moz-transform: translateX(0px);}
    100% {-moz-transform: translateX(1px);}
}
@keyframes move-left {
    0%   {transform: translateX(0);}
    100% {transform: translateX(400px);}
}
@keyframes move-right {
    0%   {transform: translateX(400px);}
    100% {transform: translateX(0);}
}
@keyframes show-left {
    0%   {transform: translateX(-2000px) scale(0);}
    10%  {transform: translateX(-2000px) scale(1);}
    100% {transform: translateX(400px) scale(1);}
}
@keyframes show-right-up {
    0%   {transform: translateX(2000px) translateY(-500px) scale(0);}
    10%  {transform: translateX(2000px) translateY(-500px) scale(1);}
    100% {transform: translateX(0px) translateY(0px) scale(1);}
}
@keyframes show-right-down {
    0%   {transform: translateX(2000px) translateY(500px) scale(0);}
    10%  {transform: translateX(2000px) translateY(500px) scale(1);}
    100% {transform: translateX(0px) translateY(0px) scale(1);}
}
@keyframes show-down {
    0%   {transform: translateY(2000px) scale(0);}
    10%  {transform: translateY(2000px) scale(1);}
    100% {transform: translateY(0px) scale(1);}
}
@keyframes show-up {
    0%   {transform: translateY(-2000px) scale(0);}
    10%  {transform: translateY(-2000px) scale(1);}
    100% {transform: translateY(0px) scale(1);}
}
@keyframes show-zoom {
    0%   {opacity: 0; transform: scale(0);}
    100% {opacity: 1; transform: scale(1);}
}
@keyframes hide-right {
    0%   {transform: translateX(0px);}
    100% {transform: translateX(-3000px);}
}
@keyframes hide-alpha {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes hide-zoom {
    0%   {opacity: 1; transform: scale(1);}
    100% {opacity: 0; transform: scale(0);}
}
@keyframes jump-up-a {
    0%   {transform: translateY(0px);}
    50%  {transform: translateY(-150px);}
    100% {transform: translateX(0px);}
}
@keyframes jump-up-b {
    0%   {transform: translateY(0px);}
    50%  {transform: translateY(-150px);}
    100% {transform: translateX(0px);}
}
@keyframes jump-down {
    0%   {transform: translateY(0px);}
    50%  {transform: translateY(150px);}
    100% {transform: translateX(0px);}
}
@keyframes jump-center {
    0%   {transform: translateY(-200px);}
    60%  {transform: translateY(100px);}
    100% {transform: translateX(0px);}
}
@keyframes move-up {
    0%   {transform: translateY(180px);}
    100% {transform: translateY(-200px);}
}
@keyframes move-down {
    0%   {transform: translateY(0px);}
    100% {transform: translateY(180px);}
}
@keyframes red-first {
    0%   {transform: translateX(0) scaleY(1);}
    100% {transform: translateX(-3000px) scaleY(0);}
}
@keyframes red-second {
    0%   {transform: translateX(0);}
    100% {transform: translateX(-792px);}
}
@keyframes red-third {
    0%   {transform: translateX(0) scaleY(1);}
    100% {transform: translateX(-3000px) scaleY(0);}
}
@keyframes red-fourth {
    0%   {transform: translateX(0);}
    100% {transform: translateX(-951px);}
}
@keyframes red-fifth {
    0%   {transform: translateX(0) scaleY(1);}
    100% {transform: translateX(-3000px) scaleY(0);}
}
@keyframes hacker-hide {
    0%   {opacity: 1; transform: rotateZ(-18deg);}
    100% {opacity: 0; transform: rotateZ(162deg);}
}
@keyframes blue {
    0%   {transform: translateX(0) scaleY(1);}
    100% {transform: translateX(3000px) scaleY(0);}
}
@keyframes boom-hide {
    0%   {transform: translateX(0px);}
    90%  {transform: translateX(-3000px) scale(1);}
    100% {transform: translateX(-3000px) scale(0);}
}
@keyframes virus-show {
    0%   {transform: translateY(-2000px) scale(0);}
    10%  {transform: translateY(-2000px) scale(1);}
    100% {transform: translateY(0px) scale(1);}
}
@keyframes virus-hide {
    0%   {opacity: 1; transform: rotateZ(0deg);}
    100% {opacity: 0; transform: rotateZ(180deg);}
}
@keyframes timer {
    0%   {transform: translateX(0px);}
    100% {transform: translateX(1px);}
}





/*=============
  Static
  =============*/

#intro.static .rocket {
    -webkit-animation: none;
       -moz-animation: none;
            animation: none;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
            transform: translateX(0);
}
#intro.static .dron.first {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
            transform: scale(1);
}
#intro.static .label.left:before {
    -webkit-transform: rotate(-37deg);
       -moz-transform: rotate(-37deg);
        -ms-transform: rotate(-37deg);
         -o-transform: rotate(-37deg);
            transform: rotate(-37deg);
}
#intro.static .dron.second {
    display: none;
}
#intro.static .hacker {
    top: 500px;
    right: 400px;
    -webkit-transform: rotate(-18deg);
       -moz-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
         -o-transform: rotate(-18deg);
            transform: rotate(-18deg);
}
#intro.static .hacker .label {
    bottom: 0;
    left: -120px;
    -webkit-transform: rotate(18deg);
       -moz-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
         -o-transform: rotate(18deg);
            transform: rotate(18deg);
}
#intro.static .hacker .label:before {
    width: 110px;
    -webkit-transform: rotate(-50deg);
       -moz-transform: rotate(-50deg);
        -ms-transform: rotate(-50deg);
         -o-transform: rotate(-50deg);
            transform: rotate(-50deg);
}
#intro .hacker b i:nth-child(1) {
    -webkit-transform: rotate(0deg) translateX(65px) rotate(-0deg) scaleY(3.33);
       -moz-transform: rotate(0deg) translateX(65px) rotate(-0deg) scaleY(3.33);
        -ms-transform: rotate(0deg) translateX(65px) rotate(-0deg) scaleY(3.33);
         -o-transform: rotate(0deg) translateX(65px) rotate(-0deg) scaleY(3.33);
            transform: rotate(0deg) translateX(65px) rotate(-0deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(2) {
    -webkit-transform: rotate(45deg) translateX(65px) rotate(-45deg) scaleY(3.33);
       -moz-transform: rotate(45deg) translateX(65px) rotate(-45deg) scaleY(3.33);
        -ms-transform: rotate(45deg) translateX(65px) rotate(-45deg) scaleY(3.33);
         -o-transform: rotate(45deg) translateX(65px) rotate(-45deg) scaleY(3.33);
            transform: rotate(45deg) translateX(65px) rotate(-45deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(3) {
    -webkit-transform: rotate(90deg) translateX(65px) rotate(-90deg) scaleY(3.33);
       -moz-transform: rotate(90deg) translateX(65px) rotate(-90deg) scaleY(3.33);
        -ms-transform: rotate(90deg) translateX(65px) rotate(-90deg) scaleY(3.33);
         -o-transform: rotate(90deg) translateX(65px) rotate(-90deg) scaleY(3.33);
            transform: rotate(90deg) translateX(65px) rotate(-90deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(4) {
    -webkit-transform: rotate(135deg) translateX(65px) rotate(-135deg) scaleY(3.33);
       -moz-transform: rotate(135deg) translateX(65px) rotate(-135deg) scaleY(3.33);
        -ms-transform: rotate(135deg) translateX(65px) rotate(-135deg) scaleY(3.33);
         -o-transform: rotate(135deg) translateX(65px) rotate(-135deg) scaleY(3.33);
            transform: rotate(135deg) translateX(65px) rotate(-135deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(5) {
    -webkit-transform: rotate(180deg) translateX(65px) rotate(-180deg) scaleY(3.33);
       -moz-transform: rotate(180deg) translateX(65px) rotate(-180deg) scaleY(3.33);
        -ms-transform: rotate(180deg) translateX(65px) rotate(-180deg) scaleY(3.33);
         -o-transform: rotate(180deg) translateX(65px) rotate(-180deg) scaleY(3.33);
            transform: rotate(180deg) translateX(65px) rotate(-180deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(6) {
    -webkit-transform: rotate(225deg) translateX(65px) rotate(-225deg) scaleY(3.33);
       -moz-transform: rotate(225deg) translateX(65px) rotate(-225deg) scaleY(3.33);
        -ms-transform: rotate(225deg) translateX(65px) rotate(-225deg) scaleY(3.33);
         -o-transform: rotate(225deg) translateX(65px) rotate(-225deg) scaleY(3.33);
            transform: rotate(225deg) translateX(65px) rotate(-225deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(7) {
    -webkit-transform: rotate(270deg) translateX(65px) rotate(-270deg) scaleY(3.33);
       -moz-transform: rotate(270deg) translateX(65px) rotate(-270deg) scaleY(3.33);
        -ms-transform: rotate(270deg) translateX(65px) rotate(-270deg) scaleY(3.33);
         -o-transform: rotate(270deg) translateX(65px) rotate(-270deg) scaleY(3.33);
            transform: rotate(270deg) translateX(65px) rotate(-270deg) scaleY(3.33);
}
#intro .hacker b i:nth-child(8) {
    -webkit-transform: rotate(315deg) translateX(65px) rotate(-315deg) scaleY(3.33);
       -moz-transform: rotate(315deg) translateX(65px) rotate(-315deg) scaleY(3.33);
        -ms-transform: rotate(315deg) translateX(65px) rotate(-315deg) scaleY(3.33);
         -o-transform: rotate(315deg) translateX(65px) rotate(-315deg) scaleY(3.33);
            transform: rotate(315deg) translateX(65px) rotate(-315deg) scaleY(3.33);
}

#intro.static .virus {
    top: 320px;
    right: 50px;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
            transform: scale(1);
}
#intro.static .virus .label:before {
    -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
            transform: rotate(40deg);
}
#intro.static .pole {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
            transform: scale(1);
}
#intro.static .boom.second {
    right: 60px;
    top: 308px;
}
#intro.static .boom.second .a,
#intro.static .boom.second .b,
#intro.static .boom.second .c,
#intro.static .boom.second .d {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
            transform: scale(1);
}
#intro.static .red.second {
    -webkit-transform: rotate(-15deg);
       -moz-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
         -o-transform: rotate(-15deg);
            transform: rotate(-15deg);
}
#intro.static .red.second img {
    -webkit-transform: translateX(-650px);
       -moz-transform: translateX(-650px);
        -ms-transform: translateX(-650px);
         -o-transform: translateX(-650px);
            transform: translateX(-650px);
}
#intro.static .red.third {
    -webkit-transform: rotate(-165deg);
       -moz-transform: rotate(-165deg);
        -ms-transform: rotate(-165deg);
         -o-transform: rotate(-165deg);
            transform: rotate(-165deg);
}
#intro.static .red.third img {
    -webkit-transform: translateX(-60px);
       -moz-transform: translateX(-60px);
        -ms-transform: translateX(-60px);
         -o-transform: translateX(-60px);
            transform: translateX(-60px);
}
#intro.static .blue.first {
    -webkit-transform: rotate(14deg);
       -moz-transform: rotate(14deg);
        -ms-transform: rotate(14deg);
         -o-transform: rotate(14deg);
            transform: rotate(14deg);
}
#intro.static .blue.first img {
    -webkit-transform: translateX(500px);
       -moz-transform: translateX(500px);
        -ms-transform: translateX(500px);
         -o-transform: translateX(500px);
            transform: translateX(500px);
}
#intro.static .blue.second {
    -webkit-transform: rotate(17deg);
       -moz-transform: rotate(17deg);
        -ms-transform: rotate(17deg);
         -o-transform: rotate(17deg);
            transform: rotate(17deg);
}
#intro.static .blue.second img {
    -webkit-transform: translateX(300px);
       -moz-transform: translateX(300px);
        -ms-transform: translateX(300px);
         -o-transform: translateX(300px);
            transform: translateX(300px);
}