@charset "UTF-8";

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}

.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s;}

/*添加S*/

.stairs-wrapper { position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; z-index: -1;}

@-moz-keyframes stairs {
    0% { opacity: 0; -moz-transform: scale(0); transform: scale(0);}
    20% { opacity: 1;}
    80% { opacity: 1;}
    100% { opacity: 0; -moz-transform: scale(3); transform: scale(3);}
}

@-webkit-keyframes stairs {
    0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
    20% { opacity: 1;}
    80% { opacity: 1;}
    100% { opacity: 0; -webkit-transform: scale(3); transform: scale(3);}
}

@keyframes stairs {
    0% { opacity: 0; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0);}
    20% { opacity: 1;}
    80% { opacity: 1;}
    100% { opacity: 0; -moz-transform: scale(3); -ms-transform: scale(3); -webkit-transform: scale(3); transform: scale(3);}
}

.moveclouds { -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; -ms-animation: moveclouds 20s linear infinite; animation: 20s linear 0s normal none infinite running moveclouds;}

@-webkit-keyframes moveclouds {
    0% { left: -490px;}
    100% { left: -2379px;}
}

@-moz-keyframes moveclouds {
    0% { left: -490px;}
    100% { left: -2379px;}
}

@-ms-keyframes moveclouds {
    0% { left: -490px;}
    100% { left: -2379px;}
}

@keyframes moveclouds {
    0% { left: -490px;}
    100% { left: -2379px;}
}

@-webkit-keyframes yun_move1 {
    from { background-position: 0% 0%;}
    to { background-position: 600% 0%;}
}

@keyframes yun_move1 {
    from { background-position: 0% 0%;}
    to { background-position: 600% 0%;}
}

.yun_move1 { -webkit-animation: yun_move1 120s linear infinite; -moz-animation: yun_move1 120s linear infinite; -ms-animation: yun_move1 120s linear infinite; animation: yun_move1 120s linear infinite;}

@-webkit-keyframes yun_move2 {
    0% { left: 0;}
    50% { left: -400px;}
    100% { left: 0;}
}

@-moz-keyframes yun_move2 {
    0% { left: 0;}
    50% { left: -400px;}
    100% { left: 0;}
}

@-ms-keyframes yun_move2 {
    0% { left: 0;}
    50% { left: -400px;}
    100% { left: 0;}
}

@keyframes yun_move2 {
    0% { left: 0;}
    50% { left: -400px;}
    100% { left: 0;}
}

.yun_move2 { -webkit-animation: yun_move2 20s linear infinite; -moz-animation: yun_move2 20s linear infinite; -ms-animation: yun_move2 20s linear infinite; animation: yun_move2 20s linear infinite;}

@-webkit-keyframes yun_move3 {
    0% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -moz-transform: translate(0, 16px); -ms-transform: translate(0, 16px); -webkit-transform: translate(0, 16px); transform: translate(0, 16px);}
    100% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@keyframes yun_move3 {
    0% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -moz-transform: translate(0, 16px); -ms-transform: translate(0, 16px); -webkit-transform: translate(0, 16px); transform: translate(0, 16px);}
    100% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

.yun_move3 { -webkit-animation: yun_move3 30s linear infinite; -moz-animation: yun_move3 30s linear infinite; -ms-animation: yun_move3 30s linear infinite; animation: yun_move3 30s linear infinite;}

@-webkit-keyframes yunduo1 {
    0% { left: 350px;}
    50% { left: 250px;}
    100% { left: 350px;}
}

@keyframes yunduo1 {
    0% { left: 350px;}
    50% { left: 250px;}
    100% { left: 350px;}
}

.yunduo1 { -webkit-animation: yunduo1 7s linear infinite; -moz-animation: yunduo1 7s linear infinite; -ms-animation: yunduo1 7s linear infinite; animation: yunduo1 7s linear infinite;}

@-webkit-keyframes yunduo2 {
    0% { left: 100px;}
    40% { left: 250px;}
    70% { left: 0;}
    100% { left: 100px;}
}

@keyframes yunduo2 {
    0% { left: 100px;}
    40% { left: 250px;}
    70% { left: 0;}
    100% { left: 100px;}
}

.yunduo2 { -webkit-animation: yunduo2 18s linear infinite; -moz-animation: yunduo2 18s linear infinite; -ms-animation: yunduo2 18s linear infinite; animation: yunduo2 18s linear infinite;}

@-webkit-keyframes yunduo3 {
    0% { right: 170px;}
    35% { right: 300px;}
    70% { right: 80px;}
    100% { right: 170px;}
}

@keyframes yunduo3 {
    0% { right: 170px;}
    35% { right: 300px;}
    70% { right: 60px;}
    100% { right: 170px;}
}

.yunduo3 { -webkit-animation: yunduo3 22s linear infinite; -moz-animation: yunduo3 22s linear infinite; -ms-animation: yunduo3 22s linear infinite; animation: yunduo3 22s linear infinite;}

@-webkit-keyframes cloud1 {
    0% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -moz-transform: translate(0, 16px); -ms-transform: translate(0, 16px); -webkit-transform: translate(0, 16px); transform: translate(0, 16px);}
    100% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@-moz-keyframes cloud1 {
    0% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -moz-transform: translate(0, 16px); -ms-transform: translate(0, 16px); -webkit-transform: translate(0, 16px); transform: translate(0, 16px);}
    100% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@-ms-keyframes cloud1 {
    0% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -moz-transform: translate(0, 16px); -ms-transform: translate(0, 16px); -webkit-transform: translate(0, 16px); transform: translate(0, 16px);}
    100% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@keyframes cloud1 {
    0% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
    50% { -moz-transform: translate(0, 16px); -ms-transform: translate(0, 16px); -webkit-transform: translate(0, 16px); transform: translate(0, 16px);}
    100% { -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@-webkit-keyframes cloud2 {
    0% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
    50% { -moz-transform: translate(4px, 0); -ms-transform: translate(4px, 0); -webkit-transform: translate(4px, 0); transform: translate(4px, 0);}
    100% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
}

@-moz-keyframes cloud2 {
    0% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
    50% { -moz-transform: translate(4px, 0); -ms-transform: translate(4px, 0); -webkit-transform: translate(4px, 0); transform: translate(4px, 0);}
    100% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
}

@-ms-keyframes cloud2 {
    0% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
    50% { -moz-transform: translate(4px, 0); -ms-transform: translate(4px, 0); -webkit-transform: translate(4px, 0); transform: translate(4px, 0);}
    100% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
}

@keyframes cloud2 {
    0% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
    50% { -moz-transform: translate(4px, 0); -ms-transform: translate(4px, 0); -webkit-transform: translate(4px, 0); transform: translate(4px, 0);}
    100% { -moz-transform: translate(-4px, 8px); -ms-transform: translate(-4px, 8px); -webkit-transform: translate(-4px, 8px); transform: translate(-4px, 8px);}
}

@-webkit-keyframes light {
    from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@-moz-keyframes light {
    from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@-ms-keyframes light {
    from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@keyframes light {
    from { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

.light { -webkit-animation: light 100s linear 0s infinite; -moz-animation: light 100s linear 0s infinite; -ms-animation: light 100s linear 0s infinite; animation: light 100s linear 0s infinite;}

@-webkit-keyframes translate1 {
    from { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
    to { -moz-transform: translate(90px, -160px); -ms-transform: translate(90px, -160px); -webkit-transform: translate(90px, -160px); transform: translate(90px, -160px);}
}

@-moz-keyframes translate1 {
    from { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
    to { -moz-transform: translate(90px, -160px); -ms-transform: translate(90px, -160px); -webkit-transform: translate(90px, -160px); transform: translate(90px, -160px);}
}

@-ms-keyframes translate1 {
    from { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
    to { -moz-transform: translate(90px, -160px); -ms-transform: translate(90px, -160px); -webkit-transform: translate(90px, -160px); transform: translate(90px, -160px);}
}

@keyframes translate1 {
    from { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
    to { -moz-transform: translate(90px, -160px); -ms-transform: translate(90px, -160px); -webkit-transform: translate(90px, -160px); transform: translate(90px, -160px);}
}

.translate1 { -webkit-animation: translate1 0.6s ease-in forwards; -moz-animation: translate1 0.6s ease-in forwards; -ms-animation: translate1 0.6s ease-in forwards; animation: translate1 0.6s ease-in forwards;}

@-webkit-keyframes move_left1 {
    from { -moz-transform: translateX(395px); -ms-transform: translateX(395px); -webkit-transform: translateX(395px); transform: translateX(395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-moz-keyframes move_left1 {
    from { -moz-transform: translateX(395px); -ms-transform: translateX(395px); -webkit-transform: translateX(395px); transform: translateX(395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-ms-keyframes move_left1 {
    from { -moz-transform: translateX(395px); -ms-transform: translateX(395px); -webkit-transform: translateX(395px); transform: translateX(395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@keyframes move_left1 {
    from { -moz-transform: translateX(395px); -ms-transform: translateX(395px); -webkit-transform: translateX(395px); transform: translateX(395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

.move_left1 { -webkit-animation: move_left1 0.6s ease-in forwards; -moz-animation: move_left1 0.6s ease-in forwards; -ms-animation: move_left1 0.6s ease-in forwards; animation: move_left1 0.6s ease-in forwards;
}

@-webkit-keyframes move_left2 {
    from { -moz-transform: translateX(197px); -ms-transform: translateX(197px); -webkit-transform: translateX(197px); transform: translateX(197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-moz-keyframes move_left2 {
    from { -moz-transform: translateX(197px); -ms-transform: translateX(197px); -webkit-transform: translateX(197px); transform: translateX(197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-ms-keyframes move_left2 {
    from { -moz-transform: translateX(197px); -ms-transform: translateX(197px); -webkit-transform: translateX(197px); transform: translateX(197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@keyframes move_left2 {
    from { -moz-transform: translateX(197px); -ms-transform: translateX(197px); -webkit-transform: translateX(197px); transform: translateX(197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

.move_left2 { -webkit-animation: move_left2 0.3s ease-in forwards; -moz-animation: move_left2 0.3s ease-in forwards; -ms-animation: move_left2 0.3s ease-in forwards; animation: move_left2 0.3s ease-in forwards;}

@-webkit-keyframes move_right1 {
    from { -moz-transform: translateX(-395px); -ms-transform: translateX(-395px); -webkit-transform: translateX(-395px); transform: translateX(-395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-moz-keyframes move_right1 {
    from { -moz-transform: translateX(-395px); -ms-transform: translateX(-395px); -webkit-transform: translateX(-395px); transform: translateX(-395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-ms-keyframes move_right1 {
    from { -moz-transform: translateX(-395px); -ms-transform: translateX(-395px); -webkit-transform: translateX(-395px); transform: translateX(-395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@keyframes move_right1 {
    from { -moz-transform: translateX(-395px); -ms-transform: translateX(-395px); -webkit-transform: translateX(-395px); transform: translateX(-395px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

.move_right1 { -webkit-animation: move_right1 0.6s ease-in forwards; -moz-animation: move_right1 0.6s ease-in forwards; -ms-animation: move_right1 0.6s ease-in forwards; animation: move_right1 0.6s ease-in forwards;}

@-webkit-keyframes move_right2 {
    from { -moz-transform: translateX(-197px); -ms-transform: translateX(-197px); -webkit-transform: translateX(-197px); transform: translateX(-197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@-moz-keyframes move_right2 {
    from { -moz-transform: translateX(-197px); -ms-transform: translateX(-197px); -webkit-transform: translateX(-197px); transform: translateX(-197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px); }
}

@-ms-keyframes move_right2 {
    from { -moz-transform: translateX(-197px); -ms-transform: translateX(-197px); -webkit-transform: translateX(-197px); transform: translateX(-197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

@keyframes move_right2 {
    from { -moz-transform: translateX(-197px); -ms-transform: translateX(-197px); -webkit-transform: translateX(-197px); transform: translateX(-197px);}
    to { -moz-transform: translate(0px); -ms-transform: translate(0px); -webkit-transform: translate(0px); transform: translate(0px);}
}

.move_right2 { -webkit-animation: move_right2 0.3s ease-in forwards; -moz-animation: move_right2 0.3s ease-in forwards; -ms-animation: move_right2 0.3s ease-in forwards; animation: move_right2 0.3s ease-in forwards;
}

@-webkit-keyframes updown {
    0% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
    50% { -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}
    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

@keyframes updown {
    0% { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
    50% { -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}
    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.updown { -webkit-animation: updown 3s linear infinite; -moz-animation: updown 3s linear infinite; -ms-animation: updown 3s linear infinite; animation: updown 3s linear infinite;}

/*添加E*/

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0);}

    40% { -webkit-transform: translateY(-30px); transform: translateY(-30px);}

    60% { -webkit-transform: translateY(-15px); transform: translateY(-15px);}
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px);}

    60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px);}
}

.bounce { -webkit-animation-name: bounce; animation-name: bounce;}

@-webkit-keyframes flash {
    0%, 50%, 100% { opacity: 1;}

    25%, 75% { opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1;}

    25%, 75% { opacity: 0;}
}

.flash { -webkit-animation-name: flash; animation-name: flash;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

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

    50% { -webkit-transform: scale(1.1); transform: scale(1.1);}

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

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

    50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

    100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
}

.pulse { -webkit-animation-name: pulse; animation-name: pulse;}

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

    30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75);}

    40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25);}

    60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85);}

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

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

    30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75);}

    40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25);}

    60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85);}

    100% { -webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);}
}

.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand;}

@-webkit-keyframes shake {
    0%, 100% { -webkit-transform: translateX(0); transform: translateX(0);}

    10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px);}

    20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px);}
}

@keyframes shake {
    0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px);}

    20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px);}
}

.shake { -webkit-animation-name: shake; animation-name: shake;}

@-webkit-keyframes swing {
    20% { -webkit-transform: rotate(15deg); transform: rotate(15deg);}

    40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);}

    60% { -webkit-transform: rotate(5deg); transform: rotate(5deg);}

    80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg);}

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

@keyframes swing {
    20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg);}

    40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg);}

    60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg);}

    80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}

    100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
}

.swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing;}

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

    10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg);}

    30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg);}

    40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg);}

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

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

    10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg);}

    30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg);}

    40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg);}

    100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0);}
}

.tada { -webkit-animation-name: tada; animation-name: tada;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    0% { -webkit-transform: translateX(0%); transform: translateX(0%);}

    15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg);}

    30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg);}

    45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg);}

    60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg);}

    75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg);}

    100% { -webkit-transform: translateX(0%); transform: translateX(0%);}
}

@keyframes wobble {
    0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%);}

    15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg);}

    30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg);}

    45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg);}

    60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg);}

    75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg);}

    100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%);}
}

.wobble { -webkit-animation-name: wobble; animation-name: wobble;}

@-webkit-keyframes bounceIn {
    0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3);}

    50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05);}

    70% { -webkit-transform: scale(.9); transform: scale(.9);}

    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
}

@keyframes bounceIn {
    0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3);}

    50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}

    70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9);}

    100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
}

.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn;}

@-webkit-keyframes bounceInDown {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}

    60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px);}

    80% { -webkit-transform: translateY(-10px); transform: translateY(-10px);}

    100% { -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes bounceInDown {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}

    60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}

    80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px);}

    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown;}

@-webkit-keyframes bounceInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}

    60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px);}

    80% { -webkit-transform: translateX(-10px); transform: translateX(-10px);}

    100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes bounceInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); }

    60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);}

    80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px);}

    100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft;}

@-webkit-keyframes bounceInRight {
    0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px);}

    60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px);}

    80% { -webkit-transform: translateX(10px); transform: translateX(10px);}

    100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes bounceInRight {
    0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}

    60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px);}

    80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px);}

    100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight;}

@-webkit-keyframes bounceInUp {
    0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px);}

    60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px);}

    80% { -webkit-transform: translateY(10px); transform: translateY(10px);}

    100% { -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes bounceInUp {
    0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px);}

    60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px);}

    80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px);}

    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp;}

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

    25% { -webkit-transform: scale(.95); transform: scale(.95);}

    50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1);}

    100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3);}
}

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

    25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95);}

    50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

    100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3);}
}

.bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut;}

@-webkit-keyframes bounceOutDown {
    0% { -webkit-transform: translateY(0); transform: translateY(0);}

    20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px);}

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

@keyframes bounceOutDown {
    0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px);}

    100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px);}
}

.bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown;}

@-webkit-keyframes bounceOutLeft {
    0% { -webkit-transform: translateX(0); transform: translateX(0);}

    20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px);}

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

@keyframes bounceOutLeft {
    0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px);}

    100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}
}

.bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft;}

@-webkit-keyframes bounceOutRight {
    0% { -webkit-transform: translateX(0); transform: translateX(0);}

    20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px);}

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

@keyframes bounceOutRight {
    0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px);}

    100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}
}

.bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight;}

@-webkit-keyframes bounceOutUp {
    0% { -webkit-transform: translateY(0); transform: translateY(0);}

    20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px);}

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

@keyframes bounceOutUp {
    0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px);}

    100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}
}

.bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp;}

@-webkit-keyframes fadeIn {
    0% { opacity: 0;}

    100% { opacity: 1;}
}

@keyframes fadeIn {
    0% { opacity: 0;}

    100% { opacity: 1;}
}

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn;}

@-webkit-keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px);}

    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px);}

    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;}

@-webkit-keyframes fadeInDownBig {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}

    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes fadeInDownBig {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}

    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig;}

@-webkit-keyframes fadeInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px);}

    100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes fadeInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px);}

    100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}

@-webkit-keyframes fadeInLeftBig {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}

    100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes fadeInLeftBig {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}

    100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig;}

@-webkit-keyframes fadeInRight {
    0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px);}

    100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes fadeInRight {
    0% { opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);}

    100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight;}

@-webkit-keyframes fadeInRightBig {
    0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px);}

    100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes fadeInRightBig {
    0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}

    100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig;}

@-webkit-keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px);}

    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes fadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}

    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}

@-webkit-keyframes fadeInUpBig {
    0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px);}

    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes fadeInUpBig {
    0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px);}

    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig;}

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

    100% { opacity: 0;}
}

@keyframes fadeOut {
    0% { opacity: 1;}

    100% { opacity: 0;}
}

.fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut;}

@-webkit-keyframes fadeOutDown {
    0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px);}
}

@keyframes fadeOutDown {
    0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px);}
}

.fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown;}

@-webkit-keyframes fadeOutDownBig {
    0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}

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

@keyframes fadeOutDownBig {
    0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px);}
}

.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig;}

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

    100% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px);}
}

@keyframes fadeOutLeft {
    0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    100% { opacity: 0; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px);}
}

.fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft;}

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

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

@keyframes fadeOutLeftBig {
    0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}
}

.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig;}

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

    100% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px);}
}

@keyframes fadeOutRight {
    0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    100% { opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px);}
}

.fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight;}

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

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

@keyframes fadeOutRightBig {
    0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}
}

.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig;}

@-webkit-keyframes fadeOutUp {
    0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px);}
}

@keyframes fadeOutUp {
    0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px);}
}

.fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp;}

@-webkit-keyframes fadeOutUpBig {
    0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}

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

@keyframes fadeOutUpBig {
    0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}
}

.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig;}

@-webkit-keyframes flip {
    0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}

    40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}

    50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}

    80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}

    100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
}

@keyframes flip {
    0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}

    40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}

    50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}

    80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}

    100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
}

.animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip;}

@-webkit-keyframes flipInX {
    0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0;}

    40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg);}

    70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg);}

    100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1;}
}

@keyframes flipInX {
    0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0;}

    40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg);}

    70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg);}

    100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1;}
}

.flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX;}

@-webkit-keyframes flipInY {
    0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0;}

    40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg);}

    70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg);}

    100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1;}
}

@keyframes flipInY {
    0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0;}

    40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg);}

    70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg);}

    100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1;}
}

.flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY;}

@-webkit-keyframes flipOutX {
    0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1;}

    100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0;}
}

@keyframes flipOutX {
    0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1;}

    100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0;}
}

.flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important;}

@-webkit-keyframes flipOutY {
    0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1;}

    100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0;}
}

@keyframes flipOutY {
    0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1;}

    100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0;}
}

.flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY;}

@-webkit-keyframes lightSpeedIn {
    0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0;}

    60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1;}

    80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1;}

    100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1;}
}

@keyframes lightSpeedIn {
    0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0;}

    60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1;}

    80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1;}

    100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1;}
}

.lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}

@-webkit-keyframes lightSpeedOut {
    0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1;}

    100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0;}
}

@keyframes lightSpeedOut {
    0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1;}

    100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0;}
}

.lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}

@-webkit-keyframes rotateIn {
    0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0;}

    100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

@keyframes rotateIn {
    0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0;}

    100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

.rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn;}

@-webkit-keyframes rotateInDownLeft {
    0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}

    100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

@keyframes rotateInDownLeft {
    0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}

    100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft;}

@-webkit-keyframes rotateInDownRight {
    0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}

    100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

@keyframes rotateInDownRight {
    0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}

    100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

.rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight;}

@-webkit-keyframes rotateInUpLeft {
    0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}

    100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

@keyframes rotateInUpLeft {
    0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}

    100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft;}

@-webkit-keyframes rotateInUpRight {
    0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}

    100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

@keyframes rotateInUpRight {
    0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}

    100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}
}

.rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight;}

@-webkit-keyframes rotateOut {
    0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0;}
}

@keyframes rotateOut {
    0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0;}
}

.rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut;}

@-webkit-keyframes rotateOutDownLeft {
    0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}
}

@keyframes rotateOutDownLeft {
    0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}
}

.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft;}

@-webkit-keyframes rotateOutDownRight {
    0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}
}

@keyframes rotateOutDownRight {
    0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}
}

.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight;}

@-webkit-keyframes rotateOutUpLeft {
    0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}
}

@keyframes rotateOutUpLeft {
    0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;}
}

.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft;}

@-webkit-keyframes rotateOutUpRight {
    0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}
}

@keyframes rotateOutUpRight {
    0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1;}

    100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0;}
}

.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight;}

@-webkit-keyframes slideInDown {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}

    100% { -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes slideInDown {
    0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}

    100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown;}

@-webkit-keyframes slideInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}

    100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes slideInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}

    100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft;}

@-webkit-keyframes slideInRight {
    0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px);}

    100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

@keyframes slideInRight {
    0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}

    100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
}

.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight;}

@-webkit-keyframes slideOutLeft {
    0% { -webkit-transform: translateX(0); transform: translateX(0);}

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

@keyframes slideOutLeft {
    0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px);}
}

.slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft;}

@-webkit-keyframes slideOutRight {
    0% { -webkit-transform: translateX(0); transform: translateX(0);}

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

@keyframes slideOutRight {
    0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}

    100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px);}
}

.slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight;}

@-webkit-keyframes slideOutUp {
    0% { -webkit-transform: translateY(0); transform: translateY(0);}

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

@keyframes slideOutUp {
    0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px);}
}

.slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp;}

@-webkit-keyframes slideInUp {
    0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px);}

    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes slideInUp {
    0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px);}

    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
}

.slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp;}

@-webkit-keyframes slideOutDown {
    0% { -webkit-transform: translateY(0); transform: translateY(0);}

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

@keyframes slideOutDown {
    0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}

    100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px);}
}

.slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown;}

@-webkit-keyframes hinge {
    0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1;}

    100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0;}
}

@keyframes hinge {
    0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1;}

    100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0;}
}

.hinge { -webkit-animation-name: hinge; animation-name: hinge;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg);}

    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);}
}

@keyframes rollIn {
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg);}

    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);}
}

.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);}

    100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg);}
}

@keyframes rollOut {
    0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);}

    100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg);}
}

.rollOut { -webkit-animation-name: rollOut; animation-name: rollOut;}

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3);}

    50% { opacity: 1;}
}

@keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3);}

    50% { opacity: 1;}
}

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn;}

@-webkit-keyframes zoomInDown {
    0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}

@keyframes zoomInDown {
    0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}

.zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown;}

@-webkit-keyframes zoomInLeft {
    0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}

@keyframes zoomInLeft {
    0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); -ms-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}

.zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft;}

@-webkit-keyframes zoomInRight {
    0% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateX(-48px); transform: scale(.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}

@keyframes zoomInRight {
    0% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); -ms-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateX(-48px); -ms-transform: scale(.475) translateX(-48px); transform: scale(.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}
.zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight;}

@-webkit-keyframes zoomInUp {
    0% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}

@keyframes zoomInUp {
    0% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); -ms-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}

    60% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); -ms-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
}
.zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp;}

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

    50% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3);}

    100% { opacity: 0;}
}

@keyframes zoomOut {
    0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

    50% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3);}

    100% { opacity: 0;}
}

.zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut;}

@-webkit-keyframes zoomOutDown {
    40% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-transform-origin: center bottom; transform-origin: center bottom;}
}

@keyframes zoomOutDown {
    40% { opacity: 1; -webkit-transform: scale(.475) translateY(-60px); -ms-transform: scale(.475) translateY(-60px); transform: scale(.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateY(2000px); -ms-transform: scale(.1) translateY(2000px); transform: scale(.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom;}
}

.zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown;}

@-webkit-keyframes zoomOutLeft {
    40% { opacity: 1; -webkit-transform: scale(.475) translateX(42px); transform: scale(.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-transform-origin: left center; transform-origin: left center;}
}

@keyframes zoomOutLeft {
    40% { opacity: 1; -webkit-transform: scale(.475) translateX(42px); -ms-transform: scale(.475) translateX(42px); transform: scale(.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center;}
}

.zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft;}

@-webkit-keyframes zoomOutRight {
    40% { opacity: 1; -webkit-transform: scale(.475) translateX(-42px); transform: scale(.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-transform-origin: right center; transform-origin: right center;}
}

@keyframes zoomOutRight {
    40% { opacity: 1; -webkit-transform: scale(.475) translateX(-42px); -ms-transform: scale(.475) translateX(-42px); transform: scale(.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateX(2000px); -ms-transform: scale(.1) translateX(2000px); transform: scale(.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center;}
}

.zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight;}

@-webkit-keyframes zoomOutUp {
    40% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}

    100% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-transform-origin: center top; transform-origin: center top;}
}

@keyframes zoomOutUp {
    40% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear;}
    100% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top;}
}

.zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp;}

/*指针运动

@-webkit-keyframes needle {
    0% { -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg);}
    80% { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
    100% { -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -webkit-transform: rotate(-140deg); transform: rotate(-140deg);}
}

@-moz-keyframes needle {
    0% { -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg);}
    80% { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
    100% { -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -webkit-transform: rotate(-140deg); transform: rotate(-140deg);}
}

@-ms-keyframes needle {
    0% { -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg);}
    80% { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
    100% { -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -webkit-transform: rotate(-140deg); transform: rotate(-140deg);}
}

@keyframes needle {
    0% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
    80% { -moz-transform: rotate(-50deg); -ms-transform: rotate(-50deg); -webkit-transform: rotate(-50deg); transform: rotate(-50deg);}
    100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}*/

/*.needle { -webkit-animation: needle 10s linear 0s; -moz-animation: needle 10s 0s; -ms-animation: needle 10s 0s; animation: needle 10s 0s;}*/
@-webkit-keyframes needle {
    0%{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}

    20% { -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg);}

    40% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}

    60% { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg);}

    75% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
    85% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}
    100% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
}

@-moz-keyframes needle {
    0%{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}

    20% { -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg);}

    40% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}

    60% { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg);}

    75% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
    85% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}
    100% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
}

@-ms-keyframes needle {
    0%{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}

    20% { -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg);}

    40% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}

    60% { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg);}

    75% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
    85% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}
    100% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
}

@keyframes needle {
    0%{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}
    20% { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg);}
    40% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg);}
    60% { -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg);}
    75% { -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg);}
    85% { -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg);}
    100% { -webkit-transform: rotate(-0deg); -ms-transform: rotate(-0deg); transform: rotate(-0deg);}
}

.needle { -webkit-animation: needle 3s 0s; -moz-animation: needle 3s 0s; -ms-animation: needle 3s 0s; animation: needle 3s 0s;}