.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    50% {
        transform: translateY(8%)
    }
    65% {
        transform: translateY(-4%)
    }
    80% {
        transform: translateY(4%)
    }
    95% {
        transform: translateY(-2%)
    }
    100% {
        transform: translateY(0%)
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-100%)
    }
    50% {
        -webkit-transform: translateY(8%)
    }
    65% {
        -webkit-transform: translateY(-4%)
    }
    80% {
        -webkit-transform: translateY(4%)
    }
    95% {
        -webkit-transform: translateY(-2%)
    }
    100% {
        -webkit-transform: translateY(0%)
    }
}

.slideUp {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important
}

@keyframes slideUp {
    0% {
        transform: translateY(100%)
    }
    50% {
        transform: translateY(-8%)
    }
    65% {
        transform: translateY(4%)
    }
    80% {
        transform: translateY(-4%)
    }
    95% {
        transform: translateY(2%)
    }
    100% {
        transform: translateY(0%)
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%)
    }
    50% {
        -webkit-transform: translateY(-8%)
    }
    65% {
        -webkit-transform: translateY(4%)
    }
    80% {
        -webkit-transform: translateY(-4%)
    }
    95% {
        -webkit-transform: translateY(2%)
    }
    100% {
        -webkit-transform: translateY(0%)
    }
}

.slideLeft {
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%)
    }
    50% {
        transform: translateX(-8%)
    }
    65% {
        transform: translateX(4%)
    }
    80% {
        transform: translateX(-4%)
    }
    95% {
        transform: translateX(2%)
    }
    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%)
    }
    50% {
        -webkit-transform: translateX(-8%)
    }
    65% {
        -webkit-transform: translateX(4%)
    }
    80% {
        -webkit-transform: translateX(-4%)
    }
    95% {
        -webkit-transform: translateX(2%)
    }
    100% {
        -webkit-transform: translateX(0%)
    }
}

.slideRight {
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible !important
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%)
    }
    50% {
        transform: translateX(8%)
    }
    65% {
        transform: translateX(-4%)
    }
    80% {
        transform: translateX(4%)
    }
    95% {
        transform: translateX(-2%)
    }
    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%)
    }
    50% {
        -webkit-transform: translateX(8%)
    }
    65% {
        -webkit-transform: translateX(-4%)
    }
    80% {
        -webkit-transform: translateX(4%)
    }
    95% {
        -webkit-transform: translateX(-2%)
    }
    100% {
        -webkit-transform: translateX(0%)
    }
}

.pulse {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes pulse {
    0% {
        transform: scale(0.9)
    }
    50% {
        transform: scale(1)
    }
    100% {
        transform: scale(0.9)
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0.9)
    }
    50% {
        -webkit-transform: scale(1)
    }
    100% {
        -webkit-transform: scale(0.9)
    }
}

.tossing {
    animation-name: tossing;
    -webkit-animation-name: tossing;
    animation-duration: 2.5s;
    -webkit-animation-duration: 2.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes tossing {
    0% {
        transform: rotate(-4deg)
    }
    50% {
        transform: rotate(4deg)
    }
    100% {
        transform: rotate(-4deg)
    }
}

@-webkit-keyframes tossing {
    0% {
        -webkit-transform: rotate(-4deg)
    }
    50% {
        -webkit-transform: rotate(4deg)
    }
    100% {
        -webkit-transform: rotate(-4deg)
    }
}

.paper_plane_displacement {
    animation: run-left-left 3s .4s 1 linear, run-left-top 3s .4s 1 cubic-bezier(.66, .1, 1, .41);
    animation-fill-mode: forwards;
    -webkit-animation: run-left-left 3s .4s 1 linear, run-left-top 3s .4s 1 cubic-bezier(.66, .1, 1, .41);
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes run-left-top {
    0% {
        margin-top: 30px
    }
    100% {
        margin-top: -400px
    }
}

@keyframes run-left-left {
    0% {
        margin-left: 580px
    }
    100% {
        margin-left: -275px
    }
}


@-webkit-keyframes heart1_displacement {
    0% {
        margin-top: -104px;
        opacity: 0
    }
    2% {
        margin-top: -112px;
        opacity: 1
    }
    95% {
        margin-top: -207px;
        opacity: .6
    }
    100% {
        margin-top: -217px;
        opacity: 0
    }
}

.heart2_displacement {
    animation-name: heart2_displacement;
    -webkit-animation-name: heart2_displacement;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    visibility: visible !important
}

@keyframes heart2_displacement {
    0% {
        margin-top: -84px;
        margin-left: 286px;
        opacity: 0
    }
    2% {
        margin-top: -102px;
        margin-left: 270px;
        opacity: 1
    }
    95% {
        margin-top: -207px;
        margin-left: 265px;
        opacity: .6
    }
    100% {
        margin-top: -217px;
        margin-left: 260px;
        opacity: 0
    }
}

@-webkit-keyframes heart2_displacement {
    0% {
        margin-top: -84px;
        margin-left: 286px;
        opacity: 0
    }
    2% {
        margin-top: -102px;
        margin-left: 270px;
        opacity: 1
    }
    95% {
        margin-top: -207px;
        margin-left: 265px;
        opacity: .6
    }
    100% {
        margin-top: -217px;
        margin-left: 260px;
        opacity: 0
    }
}

.heart3_displacement {
    animation-name: heart3_displacement;
    -webkit-animation-name: heart3_displacement;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .75s;
    -webkit-animation-delay: .75s;
    visibility: visible !important
}

@keyframes heart3_displacement {
    0% {
        margin-top: -73px;
        margin-left: 346px;
        opacity: 0
    }
    2% {
        margin-top: -91px;
        margin-left: 362px;
        opacity: 1
    }
    95% {
        margin-top: -196px;
        margin-left: 367px;
        opacity: .6
    }
    100% {
        margin-top: -206px;
        margin-left: 372px;
        opacity: 0
    }
}

@-webkit-keyframes heart3_displacement {
    0% {
        margin-top: -73px;
        margin-left: 346px;
        opacity: 0
    }
    2% {
        margin-top: -91px;
        margin-left: 362px;
        opacity: 1
    }
    95% {
        margin-top: -196px;
        margin-left: 367px;
        opacity: .6
    }
    100% {
        margin-top: -206px;
        margin-left: 372px;
        opacity: 0
    }
}

.heart4_displacement {
    animation-name: heart1_displacement;
    -webkit-animation-name: heart1_displacement;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .6s;
    -webkit-animation-delay: .6s;
    visibility: visible !important
}

.heart5_displacement {
    animation-name: heart2_displacement;
    -webkit-animation-name: heart2_displacement;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .8s;
    -webkit-animation-delay: .8s;
    visibility: visible !important
}

.heart6_displacement {
    animation-name: heart3_displacement;
    -webkit-animation-name: heart3_displacement;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    visibility: visible !important
}

.flicker {
    animation-name: flicker;
    -webkit-animation-name: flicker;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes flicker {
    0% {
        background: url(../img/lamp_bright.png) no-repeat
    }
    50% {
        background: url(../img/lamp_dim.png) no-repeat
    }
    100% {
        background: url(../img/lamp_bright.png) no-repeat
    }
}

@-webkit-keyframes flicker {
    0% {
        background: url(../img/lamp_bright.png) no-repeat
    }
    50% {
        background: url(../img/lamp_dim.png) no-repeat
    }
    100% {
        background: url(../img/lamp_bright.png) no-repeat
    }
}

.swing {
    animation-name: swing;
    -webkit-animation-name: swing;
    animation-duration: .3s;
    -webkit-animation-duration: .3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .5s;
    -webkit-animation-delay: .5s
}

@keyframes swing {
    0% {
        transform: rotate(-3deg);
        opacity: 1
    }
    50% {
        transform: rotate(3deg);
        opacity: 1
    }
    100% {
        transform: rotate(-3deg);
        opacity: 1
    }
}

@keyframes swing {
    0% {
        transform: rotate(-3deg);
        opacity: 1
    }
    50% {
        transform: rotate(3deg);
        opacity: 1
    }
    100% {
        transform: rotate(-3deg);
        opacity: 1
    }
}

.wordDownOne {
    -webkit-animation: luo 5s linear;
    animation: luo 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards
}

@keyframes luo {
    0% {
        top: 36%;
        left: 40%;
        transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -o-transform: rotate(60deg)
    }
    50% {
        top: 60%;
        left: 48%;
        transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
    100% {
        top: 75%;
        left: 32%;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg)
    }
}

@-webkit-keyframes luo {
    0% {
        top: 36%;
        left: 40%;
        transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -o-transform: rotate(60deg)
    }
    50% {
        top: 60%;
        left: 48%;
        transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg)
    }
    100% {
        top: 75%;
        left: 32%;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg)
    }
}

.wordDownTwo {
    -webkit-animation: luotwo 5s linear;
    animation: luotwo 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-delay: .3s
}

@keyframes luotwo {
    0% {
        top: 33%;
        left: 50%;
        transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -o-transform: rotate(20deg)
    }
    50% {
        top: 47%;
        left: 46%;
        transform: rotate(-90deg) scale(0.7, 0.7);
        -moz-transform: rotate(-90deg) scale(0.7, 0.7);
        -o-transform: rotate(-90deg) scale(0.7, 0.7)
    }
    80% {
        top: 60%;
        left: 46%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 71%;
        left: 48%;
        transform: rotate(-330deg);
        -moz-transform: rotate(-330deg);
        -o-transform: rotate(-330deg)
    }
}

@-webkit-keyframes luotwo {
    0% {
        top: 33%;
        left: 50%;
        transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -o-transform: rotate(20deg)
    }
    50% {
        top: 47%;
        left: 46%;
        transform: rotate(-90deg) scale(0.7, 0.7);
        -moz-transform: rotate(-90deg) scale(0.7, 0.7);
        -o-transform: rotate(-90deg) scale(0.7, 0.7)
    }
    80% {
        top: 60%;
        left: 46%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 71%;
        left: 48%;
        transform: rotate(-330deg);
        -moz-transform: rotate(-330deg);
        -o-transform: rotate(-330deg)
    }
}

.wordDownThree {
    -webkit-animation: luothree 5s linear;
    animation: luothree 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: .6s;
    -moz-animation-delay: .6s;
    -webkit-animation-delay: .6s
}

@keyframes luothree {
    0% {
        top: 29%;
        left: 64%;
        transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -o-transform: rotate(-60deg)
    }
    50% {
        top: 43%;
        left: 48%;
        transform: rotate(-100deg);
        -moz-transform: rotate(-100deg);
        -o-transform: rotate(-100deg)
    }
    70% {
        top: 55%;
        left: 50%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 71%;
        left: 60%;
        transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg)
    }
}

@-webkit-keyframes luothree {
    0% {
        top: 29%;
        left: 64%;
        transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -o-transform: rotate(-60deg)
    }
    50% {
        top: 43%;
        left: 48%;
        transform: rotate(-100deg);
        -moz-transform: rotate(-100deg);
        -o-transform: rotate(-100deg)
    }
    70% {
        top: 55%;
        left: 50%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 71%;
        left: 60%;
        transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg)
    }
}

.wordDownFour {
    -webkit-animation: luofour 5s linear;
    animation: luofour 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: .9s;
    -moz-animation-delay: .9s;
    -webkit-animation-delay: .9s
}

@keyframes luofour {
    0% {
        top: 25%;
        left: 65%;
        transform: rotate(65deg);
        -moz-transform: rotate(65deg);
        -o-transform: rotate(65deg)
    }
    50% {
        top: 43%;
        left: 50%;
        transform: rotate(100deg) scale(1.5, 1.5);
        -moz-transform: rotate(100deg) scale(1.5, 1.5);
        -o-transform: rotate(100deg) scale(1.5, 1.5)
    }
    70% {
        top: 55%;
        left: 56%;
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg)
    }
    100% {
        top: 70%;
        left: 68%;
        transform: rotate(380deg);
        -moz-transform: rotate(380deg);
        -o-transform: rotate(380deg)
    }
}

@-webkit-keyframes luofour {
    0% {
        top: 25%;
        left: 65%;
        transform: rotate(65deg);
        -moz-transform: rotate(65deg);
        -o-transform: rotate(65deg)
    }
    50% {
        top: 43%;
        left: 50%;
        transform: rotate(100deg) scale(1.5, 1.5);
        -moz-transform: rotate(100deg) scale(1.5, 1.5);
        -o-transform: rotate(100deg) scale(1.5, 1.5)
    }
    70% {
        top: 55%;
        left: 56%;
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg)
    }
    100% {
        top: 70%;
        left: 68%;
        transform: rotate(380deg);
        -moz-transform: rotate(380deg);
        -o-transform: rotate(380deg)
    }
}

.wordDownFive {
    -webkit-animation: luofive 5s linear;
    animation: luofive 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s
}

@keyframes luofive {
    0% {
        top: 27%;
        left: 54%;
        transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg)
    }
    50% {
        top: 47%;
        left: 46%;
        transform: rotate(-120deg) scale(1.2, 1.2);
        -moz-transform: rotate(-120deg) scale(1.2, 1.2);
        -o-transform: rotate(-120deg) scale(1.2, 1.2)
    }
    70% {
        top: 60%;
        left: 46%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 70%;
        left: 37%;
        transform: rotate(-390deg);
        -moz-transform: rotate(-390deg);
        -o-transform: rotate(-390deg)
    }
}

@-webkit-keyframes luofive {
    0% {
        top: 27%;
        left: 54%;
        transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg)
    }
    50% {
        top: 47%;
        left: 46%;
        transform: rotate(-120deg) scale(1.2, 1.2);
        -moz-transform: rotate(-120deg) scale(1.2, 1.2);
        -o-transform: rotate(-120deg) scale(1.2, 1.2)
    }
    70% {
        top: 60%;
        left: 46%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 70%;
        left: 37%;
        transform: rotate(-390deg);
        -moz-transform: rotate(-390deg);
        -o-transform: rotate(-390deg)
    }
}

.wordDownSix {
    -webkit-animation: luosix 5s linear;
    animation: luosix 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

@keyframes luosix {
    0% {
        top: 32%;
        left: 44%;
        transform: rotate(65deg);
        -moz-transform: rotate(65deg);
        -o-transform: rotate(65deg)
    }
    50% {
        top: 43%;
        left: 50%;
        transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -o-transform: rotate(100deg)
    }
    70% {
        top: 56%;
        left: 50%;
        transform: rotate(130deg);
        -moz-transform: rotate(130deg);
        -o-transform: rotate(130deg)
    }
    100% {
        top: 69%;
        left: 42%;
        transform: rotate(220deg);
        -moz-transform: rotate(220deg);
        -o-transform: rotate(220deg)
    }
}

@-webkit-keyframes luosix {
    0% {
        top: 32%;
        left: 44%;
        transform: rotate(65deg);
        -moz-transform: rotate(65deg);
        -o-transform: rotate(65deg)
    }
    50% {
        top: 43%;
        left: 50%;
        transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -o-transform: rotate(100deg)
    }
    70% {
        top: 56%;
        left: 50%;
        transform: rotate(130deg);
        -moz-transform: rotate(130deg);
        -o-transform: rotate(130deg)
    }
    100% {
        top: 69%;
        left: 42%;
        transform: rotate(220deg);
        -moz-transform: rotate(220deg);
        -o-transform: rotate(220deg)
    }
}

.wordDownSeven {
    -webkit-animation: luoseven 5s linear;
    animation: luoseven 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: .6s;
    -moz-animation-delay: .6s;
    -webkit-animation-delay: .6s
}

@keyframes luoseven {
    0% {
        top: 30%;
        left: 32%;
        transform: rotate(65deg);
        -moz-transform: rotate(65deg);
        -o-transform: rotate(65deg)
    }
    50% {
        top: 43%;
        left: 50%;
        transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -o-transform: rotate(100deg)
    }
    70% {
        top: 56%;
        left: 50%;
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg)
    }
    100% {
        top: 69%;
        left: 57%;
        transform: rotate(380deg);
        -moz-transform: rotate(380deg);
        -o-transform: rotate(380deg)
    }
}

@-webkit-keyframes luoseven {
    0% {
        top: 30%;
        left: 32%;
        transform: rotate(65deg);
        -moz-transform: rotate(65deg);
        -o-transform: rotate(65deg)
    }
    50% {
        top: 43%;
        left: 50%;
        transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -o-transform: rotate(100deg)
    }
    70% {
        top: 56%;
        left: 50%;
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg)
    }
    100% {
        top: 69%;
        left: 57%;
        transform: rotate(380deg);
        -moz-transform: rotate(380deg);
        -o-transform: rotate(380deg)
    }
}

.wordDownEight {
    -webkit-animation: luoeight 5s linear;
    animation: luoeight 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: .6s;
    -moz-animation-delay: .6s;
    -webkit-animation-delay: .6s
}

@keyframes luoeight {
    0% {
        top: 27%;
        left: 42%;
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }
    50% {
        top: 43%;
        left: 46%;
        transform: rotate(35deg);
        -moz-transform: rotate(35deg);
        -o-transform: rotate(35deg)
    }
    70% {
        top: 56%;
        left: 50%;
        transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        -o-transform: rotate(-20deg)
    }
    100% {
        top: 64%;
        left: 60%;
        transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -o-transform: rotate(-25deg)
    }
}

@-webkit-keyframes luoeight {
    0% {
        top: 27%;
        left: 42%;
        transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg)
    }
    50% {
        top: 43%;
        left: 46%;
        transform: rotate(35deg);
        -moz-transform: rotate(35deg);
        -o-transform: rotate(35deg)
    }
    70% {
        top: 56%;
        left: 50%;
        transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        -o-transform: rotate(-20deg)
    }
    100% {
        top: 64%;
        left: 60%;
        transform: rotate(-25deg);
        -moz-transform: rotate(-25deg);
        -o-transform: rotate(-25deg)
    }
}

.wordDownNine {
    -webkit-animation: luonine 5s linear;
    animation: luonine 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

@keyframes luonine {
    0% {
        top: 25%;
        left: 35%;
        transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -o-transform: rotate(60deg)
    }
    60% {
        top: 50%;
        left: 44%;
        transform: rotate(80deg) scale(0.6, 0.6);
        -moz-transform: rotate(80deg) scale(0.6, 0.6);
        -o-transform: rotate(80deg) scale(0.6, 0.6)
    }
    70% {
        top: 60%;
        left: 46%;
        transform: rotate(180deg) scale(0.8, 0.8);
        -moz-transform: rotate(180deg) scale(0.8, 0.8);
        -o-transform: rotate(180deg) scale(0.8, 0.8)
    }
    100% {
        top: 65%;
        left: 36%;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg)
    }
}

@-webkit-keyframes luonine {
    0% {
        top: 25%;
        left: 35%;
        transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -o-transform: rotate(60deg)
    }
    60% {
        top: 50%;
        left: 44%;
        transform: rotate(80deg) scale(0.6, 0.6);
        -moz-transform: rotate(80deg) scale(0.6, 0.6);
        -o-transform: rotate(80deg) scale(0.6, 0.6)
    }
    70% {
        top: 60%;
        left: 46%;
        transform: rotate(180deg) scale(0.8, 0.8);
        -moz-transform: rotate(180deg) scale(0.8, 0.8);
        -o-transform: rotate(180deg) scale(0.8, 0.8)
    }
    100% {
        top: 65%;
        left: 36%;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg)
    }
}

.wordDownTen {
    -webkit-animation: luoten 5s linear;
    animation: luoten 3s linear;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-delay: 1.8s;
    -moz-animation-delay: 1.8s;
    -webkit-animation-delay: 1.8s
}

@keyframes luoten {
    0% {
        top: 24%;
        left: 54%
    }
    50% {
        top: 47%;
        left: 46%;
        transform: rotate(-30deg) scale(0.7, 0.7);
        -moz-transform: rotate(-30deg) scale(0.7, 0.7);
        -o-transform: rotate(-30deg) scale(0.7, 0.7)
    }
    70% {
        top: 60%;
        left: 46%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 62%;
        left: 48%;
        transform: rotate(-350deg);
        -moz-transform: rotate(-350deg);
        -o-transform: rotate(-350deg)
    }
}

@-webkit-keyframes luoten {
    0% {
        top: 24%;
        left: 54%
    }
    50% {
        top: 47%;
        left: 46%;
        transform: rotate(-30deg) scale(0.7, 0.7);
        -moz-transform: rotate(-30deg) scale(0.7, 0.7);
        -o-transform: rotate(-30deg) scale(0.7, 0.7)
    }
    70% {
        top: 60%;
        left: 46%;
        transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg)
    }
    100% {
        top: 62%;
        left: 48%;
        transform: rotate(-350deg);
        -moz-transform: rotate(-350deg);
        -o-transform: rotate(-350deg)
    }
}

.floating {
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: .6s;
    -webkit-animation-duration: .6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes floating {
    0% {
        transform: translateY(0%)
    }
    50% {
        transform: translateY(8%)
    }
    100% {
        transform: translateY(0%)
    }
}

@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%)
    }
    50% {
        -webkit-transform: translateY(8%)
    }
    100% {
        -webkit-transform: translateY(0%)
    }
}

.reentry {
    animation-name: reentry;
    -webkit-animation-name: reentry;
    animation-duration: .6s;
    -webkit-animation-duration: .6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes reentry {
    0% {
        margin-left: 400px
    }
    50% {
        margin-left: 405px
    }
    100% {
        margin-left: 400px
    }
}

@-webkit-keyframes reentry {
    0% {
        margin-left: 400px
    }
    50% {
        margin-left: 405px
    }
    100% {
        margin-left: 400px
    }
}

.hand1 {
    animation-name: swinghand;
    -webkit-animation-name: swinghand;
    animation-duration: .6s;
    -webkit-animation-duration: .6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes swinghand {
    0% {
        transform: rotate(-30deg);
        transform-origin: bottom
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom
    }
    100% {
        transform: rotate(-30deg);
        transform-origin: bottom
    }
}

@-webkit-keyframes swinghand {
    0% {
        -webkit-transform: rotate(-30deg);
        -webkit-transform-origin: bottom
    }
    50% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: bottom
    }
    100% {
        -webkit-transform: rotate(-30deg);
        -webkit-transform-origin: bottom
    }
}

.hand2 {
    animation-name: swinghandright;
    -webkit-animation-name: swinghandright;
    animation-duration: .6s;
    -webkit-animation-duration: .6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes swinghandright {
    0% {
        transform: rotate(30deg);
        transform-origin: bottom
    }
    50% {
        transform: rotate(0deg);
        transform-origin: bottom
    }
    100% {
        transform: rotate(30deg);
        transform-origin: bottom
    }
}

@-webkit-keyframes swinghandright {
    0% {
        -webkit-transform: rotate(30deg);
        -webkit-transform-origin: bottom
    }
    50% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: bottom
    }
    100% {
        -webkit-transform: rotate(30deg);
        -webkit-transform-origin: bottom
    }
}

.littlemouth {
    animation-name: changemouth;
    -webkit-animation-name: changemouth;
    animation-duration: .6s;
    -webkit-animation-duration: .6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes changemouth {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes changemouth {
    0% {
        -webkit-transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.5)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

.hourglassTop {
    animation-name: changehourglassTop;
    -webkit-animation-name: changehourglassTop;
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s
}

@keyframes changehourglassTop {
    0% {
        clip: rect(11px 136px 200px 0)
    }
    90% {
        clip: rect(120px 136px 200px 0)
    }
    100% {
        clip: rect(120px 136px 200px 0)
    }
}

@-webkit-keyframes changehourglassTop {
    0% {
        clip: rect(11px 136px 200px 0)
    }
    90% {
        clip: rect(120px 136px 200px 0)
    }
    100% {
        clip: rect(120px 136px 200px 0)
    }
}

.hourglassBottom {
    animation-name: changehourglassBottom;
    -webkit-animation-name: changehourglassBottom;
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s
}

@keyframes changehourglassBottom {
    0% {
        clip: rect(99px 152px 200px 0)
    }
    90% {
        clip: rect(0px 152px 200px 0)
    }
    100% {
        clip: rect(0px 152px 200px 0)
    }
}

@-webkit-keyframes changehourglassBottom {
    0% {
        clip: rect(99px 152px 200px 0)
    }
    90% {
        clip: rect(0px 152px 200px 0)
    }
    100% {
        clip: rect(0px 152px 200px 0)
    }
}

.hourglassMiddle {
    animation-name: changehourglassMiddle;
    -webkit-animation-name: changehourglassMiddle;
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s
}

@keyframes changehourglassMiddle {
    0% {
        clip: rect(1px 152px 200px 0)
    }
    90% {
        clip: rect(32px 152px 200px 0)
    }
    100% {
        clip: rect(32px 152px 200px 0)
    }
}

@-webkit-keyframes changehourglassMiddle {
    0% {
        clip: rect(1px 152px 200px 0)
    }
    90% {
        clip: rect(32px 152px 200px 0)
    }
    100% {
        clip: rect(32px 152px 200px 0)
    }
}

.hourglassBoot {
    animation-name: routeHourglass;
    -webkit-animation-name: routeHourglass;
    animation-duration: 4s;
    -webkit-animation-duration: 4s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
    animation-delay: 2s;
    -moz-animation-delay: 2s;
    -webkit-animation-delay: 2s
}

@keyframes routeHourglass {
    90% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(180deg)
    }
}

@-webkit-keyframes routeHourglass {
    90% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(180deg)
    }
}

.hi_displacement {
    animation-name: hi_displacement;
    -webkit-animation-name: hi_displacement;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-delay: .55s;
    -webkit-animation-delay: .55s;
    visibility: visible !important
}
.yao_a {
    animation-name: yao_a;
    -webkit-animation-name: yao_a;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
    transform-Origin:right bottom;
}
@keyframes yao_a {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(15deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

@keyframes hi_displacement {
    0% {
        transform: scale(0);
        opacity: 0
    }
    100% {
        transform: scale(1);
        opacity: 1
    }
}
.fen_img {
    animation:fen_img 20s linear infinite;
    transform-Origin: 15% 78%;
}
@keyframes fen_img {

    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
    }
}
.shi_img {
    animation:shi_img 240s linear infinite;
    transform-Origin: 96% 52%;
}
@keyframes shi_img {

    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
    }
}
.zan_img {
    animation-name: zan_img;
    -webkit-animation-name: zan_img;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
    transform-Origin:right bottom;
}
@keyframes zan_img {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(15deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
.aixin_img {
    animation-name: aixin_img;
    -webkit-animation-name: aixin_img;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
    transform-Origin:right bottom;
}
@keyframes aixin_img {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(15deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
.hang_star_img {
    animation:hang_star_img 10s linear infinite;
}
@keyframes hang_star_img {

    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
    }
}
.hong_star_img {
    animation:hong_star_img 10s linear infinite;
}
@keyframes hong_star_img {

    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
    }
}

.fanchuan_img {
    animation: run-right-right 3s .4s 1 linear, run-right-top 3s .4s 1 cubic-bezier(.66, .1, 1, .41);
    animation-fill-mode: forwards;
    -webkit-animation: run-right-right 3s .4s 1 linear, run-right-top 3s .4s 1 cubic-bezier(.66, .1, 1, .41);
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes run-right-top {
    0% {
        top: 65%;
        opacity: 1;
    }
    100% {
        top: 49%;
        opacity: 0;
    }
}

@keyframes run-right-right {
    0% {
        left:-20%
    }
    100% {
        left: 38%
    }
}
.niao_img {
    animation: run-left-left-niao 3s .4s 1 linear, run-left-top-niao 3s .4s 1 cubic-bezier(.66, .1, 1, .41);
    animation-fill-mode: forwards;
    -webkit-animation: run-left-left-niao 3s .4s 1 linear, run-left-top-niao 3s .4s 1 cubic-bezier(.66, .1, 1, .41);
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}
.niao2_img {
  animation: run-right-right-niao2 4s .3s 1 linear;
    animation-fill-mode: forwards;
    -webkit-animation: run-right-right-niao2 4s .3s 1 linear;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
    }
.niao3_img {
    animation: run-right-right-niao2 4s .3s 1 linear,run-left-top-niao3 4s .4s 1 cubic-bezier(.66, .1, 1, .41);;
    animation-fill-mode: forwards;
    -webkit-animation: run-right-right-niao2 4s .3s 1 linear,run-left-top-niao3 4s .4s 1 cubic-bezier(.66, .1, 1, .41);;
    -webkit-animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite
}

@keyframes run-left-top-niao {
    0% {
        top: 52%;
        opacity: 1;
    }
    100% {
        top: 40%;
        opacity: 0;
    }
}
@keyframes run-left-top-niao3 {
    0% {
        top: 82%;
        opacity: 1;
    }
    100% {
        top: 70%;
        opacity: 0;
    }
}

@keyframes run-left-left-niao {
    0% {
        right:-20%
    }
    100% {
        right: 93%
    }
}

@keyframes run-left-top-niao2 {
    0% {
        top: 62%;
        opacity: 1;
    }
    100% {
        top: 50%;
        opacity: 0;
    }
}

@keyframes run-right-right-niao2 {
    0% {
        left:-20%;
    }
    100% {
        left: 80%;
    }
}
@keyframes run-left-left-niao2 {
    0% {
        right:-20%
    }
    100% {
        right: 93%
    }
}
.blue_img {
    animation-name: blue_img;
    -webkit-animation-name: blue_img;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
    transform-Origin:left bottom;
}
.zi_img {
    animation-name: blue_img;
    -webkit-animation-name: blue_img;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
    transform-Origin:left bottom;
}
.lan_zi_img {
    animation-name: blue_img;
    -webkit-animation-name: blue_img;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
    transform-Origin:left bottom;
}
@keyframes blue_img {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(10deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
@keyframes zi_img {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(15deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
@keyframes lan_zi_img {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(8deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
.yu_img {
    animation-name: yu_img;
    -webkit-animation-name: yu_img;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
 }
.yu_img2 {
    animation-name: yu_img2;
    -webkit-animation-name: yu_img2;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
}
.yu_img3 {
    animation-name: yu_img3;
    -webkit-animation-name: yu_img3;
    animation-duration: 15s;
    -webkit-animation-duration: 15s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
}
.yu_img4 {
    animation-name: yu_img4;
    -webkit-animation-name: yu_img4;
    animation-duration: 15s;
    -webkit-animation-duration: 15s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: .25s;
    -webkit-animation-delay: .25s;
    visibility: visible !important;
}
@keyframes yu_img2 {
    0% {
        transform: rotate(0deg);
        bottom: 38%;
    }
    50% {
        transform: rotate(8deg);
        bottom: 40%;
    }
    100% {
        transform: rotate(0deg);
        bottom: 38%;
    }
}
@keyframes yu_img4 {
    0% {
        transform: rotate(0deg);
        bottom: 22%;
    }
    50% {
        transform: rotate(8deg);
        bottom: 2%;
    }
    100% {
        transform: rotate(0deg);
        bottom: 22%;
    }
}
@keyframes yu_img3 {
    0% {
        transform: rotate(0deg);
        bottom: 2%;
    }
    50% {
        transform: rotate(8deg);
        bottom: 22%;
    }
    100% {
        transform: rotate(0deg);
        bottom: 2%;
    }
}
 @keyframes yu_img {
     0% {
         transform: rotate(0deg)
     }
     50% {
         transform: rotate(8deg)
     }
     100% {
         transform: rotate(0deg)
     }
 }
 .you_img {
     animation-name: you_img;
     -webkit-animation-name: you_img;
     animation-duration: 3s;
     -webkit-animation-duration: 3s;
     animation-iteration-count: infinite;
     -webkit-animation-iteration-count: infinite;
     animation-delay: .25s;
     -webkit-animation-delay: .25s;
     visibility: visible !important;
     transform-Origin:left bottom;
 }
  @keyframes you_img {
      0% {
          transform: rotate(0deg)
      }
      50% {
          transform: rotate(8deg)
      }
      100% {
          transform: rotate(0deg)
      }
  }
   .zuo_img {
       animation-name: you_img;
       -webkit-animation-name: you_img;
       animation-duration: 3s;
       -webkit-animation-duration: 3s;
       animation-iteration-count: infinite;
       -webkit-animation-iteration-count: infinite;
       animation-delay: .25s;
       -webkit-animation-delay: .25s;
       visibility: visible !important;
       transform-Origin:left bottom;
   }
 /*.beijing_img {*/
 /*    animation:beijing_img 2s linear 1;*/
 /*}*/
  @keyframes beijing_img {
      0% {
          bottom: -50%;
      }
      100% {
          bottom: 0;
      }
  }
  .tai_img {
    animation:beijing_img 2s linear 1;
  }
    @keyframes tai_img {
        0% {
            bottom: -50%;
        }
        100% {
            bottom: 22%;
        }
    }
    .scare_img {
        animation:scare_img 2s linear 1;
    }
      @keyframes scare_img {
        0% {
              transform: scale(0.6)
          }
          50% {
              transform: scale(1)
          }
          100% {
              transform: scale(0.6)
          }
      }

        @keyframes start {
          0%, 30% {
              opacity: 0;
              transform: translate(0,10px);
          }
          60% {
              opacity: 1;
              transform: translate(0,0);
          }
          100% {
              opacity: 0;
              transform: translate(0,-8px);
          }
        }