/*****************************
 *  @keyframes
 *****************************/

@keyframes fly {
    0% {
        left: 0;
        top: 40px;
    }
    20% {
        left: 20%;
        top: 60px;
    }
    40% {
        left: 40%;
        top: 40px;
    }
    60% {
        left: 60%;
        top: 60px;
    }
    80% {
        left: 80%;
        top: 40px;
    }
    100% {
        left: 100%;
        top: 50px;
    }
}

@-webkit-keyframes fly {
    0% {
        left: 0;
        top: 40px;
    }
    20% {
        left: 20%;
        top: 60px;
    }
    40% {
        left: 40%;
        top: 40px;
    }
    60% {
        left: 60%;
        top: 60px;
    }
    80% {
        left: 80%;
        top: 40px;
    }
    100% {
        left: 100%;
        top: 50px;
    }
}

@keyframes fly2 {
    0% {
        right: 0;
        top: 240px;
    }
    20% {
        right: 20%;
        top: 260px;
    }
    40% {
        right: 40%;
        top: 240px;
    }
    60% {
        right: 60%;
        top: 260px;
    }
    80% {
        right: 80%;
        top: 240px;
    }
    100% {
        right: 100%;
        top: 260px;
    }
}

@-webkit-keyframes fly2 {
    0% {
        right: 0;
        top: 240px;
    }
    20% {
        right: 20%;
        top: 260px;
    }
    40% {
        right: 40%;
        top: 240px;
    }
    60% {
        right: 60%;
        top: 260px;
    }
    80% {
        right: 80%;
        top: 240px;
    }
    100% {
        right: 100%;
        top: 260px;
    }
}

@keyframes fly3 {
    0% {
        right: 0;
        top: 65%;
    }
    20% {
        right: 20%;
        top: 60%;
    }
    40% {
        right: 40%;
        top: 65%;
    }
    60% {
        right: 60%;
        top: 60%;
    }
    80% {
        right: 80%;
        top: 65%;
    }
    100% {
        right: 100%;
        top: 60%;
    }
}

@-webkit-keyframes fly3 {
    0% {
        right: 0;
        top: 65%;
    }
    20% {
        right: 20%;
        top: 60%;
    }
    40% {
        right: 40%;
        top: 65%;
    }
    60% {
        right: 60%;
        top: 60%;
    }
    80% {
        right: 80%;
        top: 65%;
    }
    100% {
        right: 100%;
        top: 60%;
    }
}

@keyframes fly4 {
    0% {
        left: 0;
        top: 70%;
    }
    20% {
        left: 20%;
        top: 75%;
    }
    40% {
        left: 40%;
        top: 70%;
    }
    60% {
        left: 60%;
        top: 75%;
    }
    80% {
        left: 80%;
        top: 70%;
    }
    100% {
        left: 100%;
        top: 75%;
    }
}

@-webkit-keyframes fly4 {
    0% {
        left: 0;
        top: 70%;
    }
    20% {
        left: 20%;
        top: 75%;
    }
    40% {
        left: 40%;
        top: 70%;
    }
    60% {
        left: 60%;
        top: 75%;
    }
    80% {
        left: 80%;
        top: 70%;
    }
    100% {
        left: 100%;
        top: 75%;
    }
}

@keyframes dragTop {
    0% {
        opacity: 0;
        transform: translateY(-70px)
    }
    60% {
        opacity: 1;
        transform: translateY(20px)
    }
    90% {
        transform: translateY(-5px)
    }
    97% {
        transform: translateY(-1px)
    }
    100% {
        transform: translateY(0px)
    }
}

@-webkit-keyframes dragTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-70px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(20px)
    }
    90% {
        -webkit-transform: translateY(-5px)
    }
    97% {
        -webkit-transform: translateY(-1px)
    }
    100% {
        -webkit-transform: translateY(0px)
    }
}

@keyframes dragLeft {
    0% {
        opacity: 0;
        transform: translateX(-70px)
    }
    60% {
        opacity: 1;
        transform: translateX(20px)
    }
    90% {
        transform: translateX(-5px)
    }
    97% {
        transform: translateX(-1px)
    }
    100% {
        transform: translateX(0px)
    }
}

@-webkit-keyframes dragLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-70px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(20px)
    }
    90% {
        -webkit-transform: translateX(-5px)
    }
    97% {
        -webkit-transform: translateX(-1px)
    }
    100% {
        -webkit-transform: translateX(0px)
    }
}

@keyframes move {
    0% {
        left: -10%;
        top: 60%;
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
    20% {
        left: -5%;
        top: 61%;
        -webkit-transform: scale(.6);
        transform: scale(.6);
    }
    40% {
        left: 20%;
        top: 62%;
        -webkit-transform: scale(.7);
        transform: scale(.7);
    }
    60% {
        left: 30%;
        top: 63%;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    80% {
        left: 40%;
        top: 64%;
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        left: 55%;
        top: 65%;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes move {
    0% {
        left: -10%;
        top: 60%;
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
    20% {
        left: -5%;
        top: 61%;
        -webkit-transform: scale(.6);
        transform: scale(.6);
    }
    40% {
        left: 20%;
        top: 62%;
        -webkit-transform: scale(.7);
        transform: scale(.7);
    }
    60% {
        left: 30%;
        top: 63%;
        -webkit-transform: scale(.8);
        transform: scale(.8);
    }
    80% {
        left: 40%;
        top: 64%;
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        left: 55%;
        top: 65%;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    40% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    60% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    80% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    100% {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    40% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    60% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    80% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    100% {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }
}

@keyframes rotate2 {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate2 {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes move2 {
    0% {
        -webkit-transform: translateX(-80px);
        transform: translateX(-80px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(80px);
        transform: translateX(80px);
    }
}

@-webkit-keyframes move2 {
    0% {
        -webkit-transform: translateX(-80px);
        transform: translateX(-80px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(80px);
        transform: translateX(80px);
    }
}

@keyframes move3 {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
}

@-webkit-keyframes move3 {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
}

@keyframes move4 {
    0% {
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes move4 {
    0% {
        -webkit-transform: translateX(150px);
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes move5 {
    0% {
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes move5 {
    0% {
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes move6 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes move6 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes opacityd {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes opacityd {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes scale2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.4);
        transform: scale(1.4);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes hammer {
    0% {

    }
    50% {
        -webkit-transform: rotate(45deg) translateY(-5px);
        transform: rotate(45deg) translateY(-5px);
    }
    100% {
        -webkit-transform: rotate(-25deg) translateY(0);
        transform: rotate(-25deg) translateY(0);
    }
}

@-webkit-keyframes hammer {
    0% {

    }
    50% {
        -webkit-transform: rotate(45deg) translateY(-5px);
        transform: rotate(45deg) translateY(-5px);
    }
    100% {
        -webkit-transform: rotate(-25deg) translateY(0);
        transform: rotate(-25deg) translateY(0);
    }
}

@keyframes hammer2 {
    0% {

    }
    50% {
        -webkit-transform: rotate(45deg) translateY(-5px);
        transform: rotate(45deg) translateY(-5px);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateY(0);
        transform: rotate(0deg) translateY(0);
    }
}

@keyframes move7 {
    0% {
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes move7 {
    0% {
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes boost {
    0% {

    }
    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes boost {
    0% {

    }
    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}