@charset "UTF-8";

/*!
 * Flyaway.css (http://takentech.com/flyaway)
 * Version: 0.0.2
 * Author: 進擊的燊 
 * Author URL: http://takentech.com/
 * Github: https://github.com/lushen/flyaway
 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
.flyaway {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes pushOut {
    0% {
        -webkit-transform: translate(0, 0) rotate(0) scale(1);
        transform: translate(0, 0) rotate(0) scale(1)
    }

    5% {
        -webkit-transform: translate(15px, -2px) rotate(10deg) scale(1.2);
        transform: translate(15px, -2px) rotate(10deg) scale(1.2)
    }

    20% {
        -webkit-transform: translate(130px, -2px) rotate(-20deg) scale(1.5);
        transform: translate(130px, -2px) rotate(-20deg) scale(1.5)
    }

    40% {
        -webkit-transform: translate(280px, -40px) rotate(10deg) scale(.8);
        transform: translate(280px, -40px) rotate(10deg) scale(.8);
        opacity: .8
    }

    100% {
        -webkit-transform: translate(1000px, -200px) rotate(60deg) scale(0);
        transform: translate(1000px, -200px) rotate(60deg) scale(0);
        opacity: 0
    }
}

@keyframes pushOut {
    0% {
        -webkit-transform: translate(0, 0) rotate(0) scale(1);
        transform: translate(0, 0) rotate(0) scale(1)
    }

    5% {
        -webkit-transform: translate(15px, -2px) rotate(10deg) scale(1.2);
        transform: translate(15px, -2px) rotate(10deg) scale(1.2)
    }

    20% {
        -webkit-transform: translate(130px, -2px) rotate(-20deg) scale(1.5);
        transform: translate(130px, -2px) rotate(-20deg) scale(1.5)
    }

    40% {
        -webkit-transform: translate(280px, -40px) rotate(10deg) scale(.8);
        transform: translate(280px, -40px) rotate(10deg) scale(.8);
        opacity: .8
    }

    100% {
        -webkit-transform: translate(1000px, -200px) rotate(60deg) scale(0);
        transform: translate(1000px, -200px) rotate(60deg) scale(0);
        opacity: 0
    }
}

@-webkit-keyframes popUp {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1)
    }

    10% {
        -webkit-transform: translate(-10px, 10px) scale(1);
        transform: translate(-10px, 10px) scale(1)
    }

    50% {
        -webkit-transform: translate(-15px, 15px) scale(1);
        transform: translate(-15px, 15px) scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: translate(500px, -500px) scale(0);
        transform: translate(500px, -500px) scale(0);
        opacity: 0
    }
}

@keyframes popUp {
    0% {
        -webkit-transform: translate(0, 0) scale(1);
        transform: translate(0, 0) scale(1)
    }

    10% {
        -webkit-transform: translate(-10px, 10px) scale(1);
        transform: translate(-10px, 10px) scale(1)
    }

    50% {
        -webkit-transform: translate(-15px, 15px) scale(1);
        transform: translate(-15px, 15px) scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: translate(500px, -500px) scale(0);
        transform: translate(500px, -500px) scale(0);
        opacity: 0
    }
}

.flyaway.pushOut {
    -webkit-animation-name: pushOut;
    animation-name: pushOut;
    -webkit-animation-timing-function: linear;
    animation-timing-function: lienar
}

.flyaway.popUp {
    -webkit-animation-name: popUp;
    animation-name: popUp;
    animation-duration: 1.5s;
}

.flyaway.rotateShake {
    -webkit-animation-name: rotateShake;
    animation-name: rotateShake
}

.flyaway.linearShake {
    -webkit-animation-name: linearShake;
    animation-name: linearShake
}

@-webkit-keyframes linearShake {

    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    from,
    to {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px)
    }

    15%,
    25%,
    35%,
    45%,
    5%,
    55%,
    65%,
    75%,
    85%,
    95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }
}

@keyframes linearShake {

    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    from,
    to {
        -webkit-transform: translateX(-4px);
        transform: translateX(-4px)
    }

    15%,
    25%,
    35%,
    45%,
    5%,
    55%,
    65%,
    75%,
    85%,
    95% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }
}

@-webkit-keyframes rotateShake {

    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    from,
    to {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    15%,
    25%,
    35%,
    45%,
    5%,
    55%,
    65%,
    75%,
    85%,
    95% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@keyframes rotateShake {

    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    from,
    to {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    15%,
    25%,
    35%,
    45%,
    5%,
    55%,
    65%,
    75%,
    85%,
    95% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}