body,h1,h2,h3,h4,h5,h6,span,p,ul,li{
	margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    font-size: 12px;
    line-height: 1.5em;
    font-family: "Titillium Web", "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
}
ul,li{
    list-style: none;
}
a{
	text-decoration: none;
}
body.index {
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Philosopher", "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
#section-1, #section-2, #section-3, #section-8, #section-9 {
    background-color: #231d2d;
}

#section-1{
	 background-image: url(../image/index_section_bg_1.jpg);
}
#section-2{
	 background-image: url(../image/index_section_bg_2.jpg);
    z-index: 5;
}
/* #section-3{
	 background-image: url(../image/index_section_bg_1.jpg);
} */
#section-4{
	 background-image: url(../image/index_section_bg_3.jpg);
}

#section-5{
	 background-image: url(../image/index_section_bg_1.jpg);
}
#section-6{
	background-image: url(../image/index_section_bg_8.png);

}
#section-7{
	 background-image: url(../image/index_section_bg_1.jpg);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Philosopher", "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
}
.hidden-text, .ht {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
.section-intro-wp, .product-list-wp, .core-list-wp {
    position: absolute;
    width: 100%;
}
#section-1 .section-intro-wp a, .index-nav ul li.active, .product-list-wp h3, .product-list-wp ul, #section-5 h3, #section-5 .section-intro, #section-6 h3, #section-6 .btn span, #section-7 h3, #section-7 .btn span, #section-8 table p.ht, #section-8 table th span, .qrcode-kibey, .qrcode-echo, #section-8 table ul, #section-9 .section-intro-wp b, .section-nav li.first a, .section-nav li.last a, .section-nav li.first a:hover, .section-nav li.last a:hover, .section-nav li.active a {
    /* background-image: url(http://kibey-static.b0.upaiyun.com/images/_index/index_sprites.png); */
    background-image: url(../image/index_sprites_2.png);
}
h2.ht, #section-6 .section-intro, #section-7 .section-intro p {
    background-image: url(../image/index_title_sprites.png);
}
/* section-1 */
 .section {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
} 
#section-1 h1 {
    position: absolute;
    top: 5%;
    left: 2.5%;
    width: 181px;
    height: 44px;
    background-image: url(../image/logo_kibey.png);
}
#section-1 .section-intro-wp {
    top: 50%;
    right: 50%;
    margin: -110px 142px 0 0;
    width: 430px;
    height: 220px;
}
.section-intro {
    margin: 0 auto;
}
#section-1 .section-intro-wp h2 {
    width: 430px;
    height: 194px;
}
#section-1 .section-intro-wp a {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 192px;
    height: 26px;
    background-position: 0 -80px;
}
.motion-item {
    background-image: url(../image/index_motion_sprites.png);
}
.motion-item {
    position: absolute;
    z-index: 10;
}
.motion-item {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
#motion-1-1 {
    top: 50%;
    left: 50%;
    margin: -207px 0 0 -104px;
    width: 1050px;
    height: 414px;
}
/* section-1 */

/* section-2 */
#section-2 {
    background-image: url(../image/index_section_bg_2.jpg);
    z-index: 5;
}
.index-nav {
    position: absolute;
    top: 0;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid rgba(255,255,255,.3);
}
.index-nav ul {
    text-align: center;
}
.index-nav ul li.active {
    background-position: 50% top;
}
a, a:hover {
    text-decoration: none;
}
.nav a {
    color: #fff;
    font-size: 1.33em;
}
.index-nav ul li {
    display: inline-block;
    margin: 0 24px;
    padding-bottom: 8px;
    height: 52px;
    text-align: center;
}
.index-nav ul li a {
    display: inline-block;
    padding: 0 12px;
    font-weight: bold;
    line-height: 52px;
}
.nav ul li a:hover, .nav ul li.active a {
    color: #62c0e7;
    text-shadow: 1px 1px 2px rgba(24,25,51,.5);
}
#section-2 .section-intro-wp {
    top: 22%;
}
.section-intro {
    margin: 0 auto;
}
.clearfix, .row, .cf {
}
#section-2 .section-intro {
    width: 514px;
}
.clearfix:before, .cf:before, .clearfix:after, .cf:after {
    display: table;
    content: " ";
    line-height: 0;
}
#section-2 .section-intro h2 {
    width: 136px;
    height: 123px;
    background-position: 0 -300px;
}
.float-left, .fl {
    float: left !important;
}
.float-right, .fr {
    float: right !important;
}
#section-2 .section-intro .intro {
    margin-top: 20px;
    width: 346px;
}
p{
	color: #fff;
	line-height: 1.88em;
}
#section-2 .section-intro .intro p {
    margin-bottom: 8px;
    font-size: 1em;
}
.clearfix:before, .cf:before, .clearfix:after, .cf:after {
    display: table;
    content: " ";
    line-height: 0;
}
.clearfix:after, .cf:after {
    clear: both;
}
.product-list-wp {
    bottom: 22%;
}
.product-list-wp h3 {
    margin: 0 auto;
    padding-top: 7px;
    width: 111px;
    height: 55px;
    color: rgba(255,255,255,.6);
    text-align: center;
    background-position: 0 -120px;
}
.product-list-wp ul {
    margin: 24px auto 0;
    width: 224px;
    height: 52px;
    background-position: 0 -200px;
}
.product-list-wp ul li {
    margin-right: 49px;
}
.product-list-wp ul li.echo {
    width: 92px;
}
.product-list-wp ul li a {
    display: block;
    height: 52px;
}
.active .fade-in-up {
    transition: all 1s ease;
}
.active .fade-in-down {
    -webkit-animation-name: fade-in-down;
    animation-name: fade-in-down;
}
@keyframes fade-in-up{
    0%,100%{
      transform: translateY(200px);
    }
    50%{
      transform: translateY(-200px);
    }
} 
@keyframes fade-in-up1{
    0%,100%{
      transform: translateY(0px);
    }
    50%{
      transform: translateY(-200px);
    }
}
#motion-2-1 {
    position: absolute;
    right: 50%;
    bottom: -42%;
    margin: -134px 360px 0 0;
    width: 268px;
    height: 267px;
    background-position: 0 -500px;
}
 #motion-2-2 {
     left: 50%;
    top: -10%; 
    margin-left: 508px;
    width: 59px;
    height: 59px;
    background-position: 0 -820px;
}

/* section-2 */

/* section-3 */
#section-5 {
    z-index: 0;
}
#section-5 {
    overflow: hidden;
}
#section-5-bg {
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(../image/index_section_bg_5.jpg);
    z-index: 1;
}
#section-5 h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -218px;
    margin-left: -427px;
    width: 564px;
    height: 316px;
    background-position: 0 -550px;
    z-index: 10;
}

#section-5 .section-intro-wp {
    top: 50%;
    margin-top: -213px;
    z-index: 10;
}
#section-5 .section-intro {
    position: relative;
    right: 50%;
    margin-right: -413px;
    width: 230px;
    height: 269px;
    background-position: -564px -550px;
}
input, textarea, .btn {
    font-family: "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, sans-serif;
}
#section-5 .section-intro .btn {
    display: block;
    width: 230px;
    height: 67px;
}
#section-5 .section-intro .googleplay {
    margin-top: 16px;
}
#section-5 .section-intro .go-btn {
    margin-top: 70px;
    width: 230px;
    height: 49px;
}
.active .big-to-small {
    -webkit-animation-name: big-to-small;
    animation-name: big-to-small;
}
#motion-5-1 {
    bottom: 0;
    left: 0;
    width: 458px;
    height: 331px;
    background-position: 0 -2660px;
    z-index: 9;
    transform:scale(1.5);
}
#motion-5-2 {
    bottom: 0;
    right: 0;
    width: 422px;
    height: 331px;
    background-position: right -2660px;
    z-index: 9;
    transform:scale(1.5);
}
/* section-3 */

/* section-4 */
#section-6 {
    z-index: 5;
}
#section-6 {
    overflow: hidden;
}
.clearfix, .row, .cf {
}
#section-6 ul {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.clearfix:before, .cf:before, .clearfix:after, .cf:after {
    display: table;
    content: " ";
    line-height: 0;
}
.clearfix:before, .cf:before, .clearfix:after, .cf:after {
    display: table;
    content: " ";
    line-height: 0;
}
.clearfix:after, .cf:after {
    clear: both;
}
#section-6-1 {
    background-image: url(../image/index_section_bg_6_1.jpg);
}
#section-6 ul li {
    position: relative;
    width: 20%;
    height: 100%;
    background-size: 100% 100%;
    overflow: hidden;
}
#motion-6-1 {
    top: 100%;
    left: 10.4166%;
    padding-bottom: 118.4027%;
    width: 79.8611%;
    background-image: url(../image/motion_6_1.png);
}
#section-6 .motion-item {
    background-size: 100%;
}
#section-6-2 {
    background-image: url(../image/index_section_bg_6_2.jpg);
}
#motion-6-2-2 {
    bottom:-30%;
    left: 0;
    padding-bottom: 82.9821%;
    width: 97.9166%;
    background-image: url(../image/motion_6_2_2.png);
    z-index: 9;
}
#motion-6-2-1 {
    top: -5%;
    left: 45.13888%;
    padding-bottom: 36.4583%;
    width: 36.1111%;
    background-image: url(../image/motion_6_2_1.png);
}
#section-6 .motion-item {
    background-size: 100%;
}
#section-6-3 {
    background-color: #2c2c2c;
}
#section-6 .section-intro-wp {
    top: 16.8%;
    z-index: 10;
}
#section-6 .section-intro-wp h3 {
    margin: 0 auto;
    width: 105px;
    height: 51px;
    background-position: 0 -960px;
}
#section-6 .section-intro {
    margin-top: 90px;
    width: 204px;
    height: 114px;
    background-position: 0 -580px;
}
#section-6 .btn {
    position: absolute;
    bottom: 10%;
    left: 50%;
    z-index: 10;
    margin-left: -70px;
    padding: 43px;
    background: rgba(0,0,0,.6);
    border-radius: 50%;
}
#section-6 .btn span {
    display: block;
    width: 54px;
    height: 54px;
    background-position: 0 -1020px;
}
.active .move-up {
    -webkit-animation-name: move-up;
    animation-name: move-up;
}
#motion-6-3 {
    top: -200px;
    left: 0;
    padding-bottom: 347.2222%;
    width: 100%;
    background-image: url(../image/motion_6_3.png);
    z-index: 9;
}
.active .fade-in-right {
    -webkit-animation-name: fade-in-right;
    animation-name: fade-in-right;
}
#section-6-4 {
    overflow: hidden;
    background-image: url(../image/index_section_bg_6_4.jpg);
}
#motion-6-4 {
    bottom: 0;
    left:50%;
    padding-bottom: 142.3611%;
    width: 100%;
    background-image: url(../image/motion_6_4.png);
}
#section-6-5 {
    overflow: hidden;
    background-color: #dc5353;
}
.active .big-to-small {
    -webkit-animation-name: big-to-small;
    animation-name: big-to-small;
}
#motion-6-5 {
    bottom: 0;
    left: -33%;
    padding-bottom: 269.4444%;
    width: 213.5416%;
    background-image: url(../image/motion_6_5.png);
    transform: scale(1.5);
}

/* section-4 */



#section-3 {
    background-image: url(../image/index_section_bg_3.jpg);
}
#section-3 .section-intro-wp {
    top: 6.5155%;
    z-index: 10;
}
.section-intro {
    margin: 0 auto;
}
#section-3 .section-intro {
    width: 452px;
}
#section-3 .section-intro h2 {
    margin: 0 auto;
    width: 193px;
    height: 54px;
    background-position: 0 -440px;
}
#section-3 .section-intro .intro {
    margin-top: 20px;
    width: 100%;
}
#section-3 .section-intro p {
    text-align: center;
}
.core-list-wp {
    bottom: 12%;
    color: #fff;
    text-align: center;
}
.core-list-wp ul {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 960px;
    max-width: 1280px;
    z-index: 15;
}
.core-list-wp ul li {
    /* margin-right: 42px;
    width: 226px; */
    width: 18%;
    margin-left: 1%;
    margin-right: 1%;
}
.core-list-wp h3 {
    margin: 20px 0 8px;
    font-size: 1.66em;
    font-weight: normal;
}
.core-list-wp span {
    font-size: 1.16em;
}
.core-list-wp p {
    margin-top: 20px;
    text-align: left;
}
#motion-3-1 {
    right: 50%;
    bottom: 160%;

    margin-right: 660px;
    width: 93px;
    height: 92px;
    background-position: 0 -920px;
}
.active .move-down {
    -webkit-animation-name: move-down;
    animation-name: move-down;
}
#motion-3-2 {
    top: -80%;
    right: 50%;
    z-index: 9;
    margin-right: 239px;
    width: 65px;
    height: 64px;
    background-position: 0 -1040px;
}
#motion-3-3 {
    top: -80%;
    left: 50%;
    margin-left: 459px;
    width: 70px;
    height: 62px;
    background-position: 0 -1120px;
}





#section-8 {
    background-image: url(../image/index_section_bg_8.png);
}
#section-8 h2 {
    position: absolute;
    top: 8.5%;
    left: 5%;
    width: 136px;
    height: 123px;
    background-position: 0 -860px;
}
#section-8 table {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -220px;
    margin-left: -360px;
    width: 638px;
    color: #fff;
    font-size: 1.16em;
    vertical-align: middle;
}
#section-8 table th, #section-8 table td {
    padding-bottom: 50px;
}
#section-8 table th {
    width: 190px;
    text-align: left;
    vertical-align: middle;
}
#section-8 table th span {
    display: inline-block;
    padding: 6px 20px;
    width: 130px;
    height: 18px;
    background-position: 0 -1280px;
}
#section-8 .wechat th span {
    height: 19px;
    background-position: 0 -1230px;
}
#section-8 table th, #section-8 table td {
    padding-bottom: 50px;
}
.qrcode-wp {
    margin-right: 52px;
    text-align: center;
}
.qrcode-kibey, .qrcode-echo {
    margin-bottom: 12px;
    width: 167px;
    height: 166px;
}
.qrcode-kibey {
    background-position: 0 -1330px;
}
.qrcode-echo {
    background-position: -400px -1330px;
}
#section-8 table th, #section-8 table td {
    padding-bottom: 50px;
}
#section-8 table th {
    width: 190px;
    text-align: left;
    vertical-align: middle;
}
#section-8 table th span {
    display: inline-block;
    padding: 6px 20px;
    width: 130px;
    height: 18px;
    background-position: 0 -1280px;
}
#section-8 table p.ht {
    /* width: 288px; */
    width: 345px;
    /* height: 103px; */
    height: 110px;
    background-position: 0 -1720px;
}
#section-8 table ul {
    width: 412px;
    background-position: 0 -1520px;
}
#section-8 table ul li {
    height: 26px;
}
#section-8 table ul .weibo {
    margin-right: 28px;
    width: 66px;
}
#section-8 table ul li a {
    display: block;
    width: 100%;
    height: 26px;
}
#section-8 table ul .douban {
    margin-right: 16px;
    width: 102px;
}
.fp-scrollable {
    overflow: scroll;
}
.section-intro-wp, .product-list-wp, .core-list-wp {
    position: absolute;
    width: 100%;
}




#section-9 .section-intro-wp {
    position: relative;
    margin-top: 32px;
    height: 200px;
    background: -moz-linear-gradient(left, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#00000000', GradientType=1);
    background: linear-gradient(left, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);
}
#section-9 h2 {
    position: absolute;
    top: 36px;
    left: 7%;
    width: 136px;
    height: 65px;
    background-position: 0 -1000px;
}
.section-intro {
    margin: 0 auto;
}

#section-9 .section-intro {
    position: absolute;
    top: 46px;
    left: 20%;
    width: 50%;
}
#section-9 .section-intro p {
    margin-bottom: 12px;
    width: 480px;
    line-height: 1.8em;
}
#section-9 .section-intro-wp b {
    display: block;
    position: absolute;
    top: 88px;
    right: 12.5%;
    width: 321px;
    height: 24px;
    background-position: 0 -1580px;
}
.section-jobs {
    position: relative;
    padding: 50px 5% 160px 7%;
}
.section-nav {
    position: relative;
    width: 20%;
}
.section-nav .vline {
    position: absolute;
    top: 19px;
    left: 5px;
    width: 1px;
    height: 253px;
    background: rgba(255,255,255,.3);
}
.nav ul li a:hover, .nav ul li.active a {
    color: #62c0e7;
    text-shadow: 1px 1px 2px rgba(24,25,51,.5);
}
.last {
    margin-right: 0 !important;
}
.section-nav li.first a, .section-nav li.last a {
    background-position: -400px -1642px;
}
.nav a {
    color: #fff;
    font-size: 1.33em;
}
.section-nav li a {
    display: block;
    margin-bottom: 60px;
    padding: 5px 5px 5px 20px;
    width: 135px;
    line-height: 18px;
}
.job-content.active {
    display: block;
}
.job-content {
    display: none;
    width: 43%;
}
.section-jobs h3 {
    margin-bottom: 30px;
    color: #fff;
    font-size: 1.5em;
    font-weight: normal;
}
.section-jobs h4 {
    color: #fff;
    font-size: 1.16em;
    font-weight: normal;
}
.section-jobs p {
    margin-bottom: 30px;
    line-height: 1.8em;
}
.section-jobs h3 {
    margin-bottom: 30px;
    color: #fff;
    font-size: 1.5em;
    font-weight: normal;
}
.section-jobs .intro {
    padding-left: 2%;
    width: 35%;
}
.section-jobs .intro table {
    color: #fff;
}
.section-jobs .intro table th {
    width: 100px;
    color: #62c0e7;
    font-size: 1.16em;
    text-align: left;
}
.section-jobs .intro table td {
    line-height: 2em;
}
#bottom_nav {
    position: relative;
    height: 80px;
    color: #fff;
    background-color: #231d2d;
}
#part_one {
    position: absolute;
    top: 10px;
    left: 5%;
}
#bottom_nav a {
    color: #fff;
}
#part_two {
    position: absolute;
    top: 0;
    right: 5%;
    vertical-align: middle;
}
#bottom_nav a {
    color: #fff;
}
#part_two a {
    display: inline-block;
    margin-right: 10px;
}
.foot_logo {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}



















@media (max-width: 1024px){
	#section-1 .section-intro-wp {
    margin-right: 0;
    }
    #motion-2-1 {
		margin-right: 260px;
	}
	#motion-2-2 {
		margin-left: 360px;
	}
	#section-6 .section-intro {
    margin-top: 40px;
    }
}


/* animation */
/* .motion-item {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.motion-item.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

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


@-webkit-keyframes move-up {
    0% {
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes move-up {
    0% {
        -webkit-transform: translate3d(0, 200px, 0);
        -ms-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .move-up {
    -webkit-animation-name: move-up;
    animation-name: move-up;
}

@-webkit-keyframes move-down {
    0% {
        -webkit-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes move-down {
    0% {
        -webkit-transform: translate3d(0, -500px, 0);
        -ms-transform: translate3d(0, -500px, 0);
        transform: translate3d(0, -500px, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .move-down {
    -webkit-animation-name: move-down;
    animation-name: move-down;
}

@-webkit-keyframes move-left {
    0% {
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes move-left {
    0% {
        -webkit-transform: translate3d(30%, 0, 0);
        -ms-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .move-left {
    -webkit-animation-name: move-left;
    animation-name: move-left;
}

@-webkit-keyframes fly-up-1 {
    0% {
        -webkit-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fly-up-1 {
    0% {
        -webkit-transform: translate3d(-50%, 50%, 0);
        -ms-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fly-up-1 {
    -webkit-animation-name: fly-up-1;
    animation-name: fly-up-1;
}

@-webkit-keyframes fly-up-2 {
    0% {
        -webkit-transform: translate3d(-20%, 50%, 0);
        transform: translate3d(-20%, 50%, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fly-up-2 {
    0% {
        -webkit-transform: translate3d(-20%, 50%, 0);
        -ms-transform: translate3d(-20%, 50%, 0);
        transform: translate3d(-20%, 50%, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fly-up-2 {
    -webkit-animation-name: fly-up-2;
    animation-name: fly-up-2;
}

@-webkit-keyframes fly-up-3 {
    0% {
        -webkit-transform: translate3d(-200%, 200%, 0);
        transform: translate3d(-200%, 200%, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fly-up-3 {
    0% {
        -webkit-transform: translate3d(-200%, 200%, 0);
        -ms-transform: translate3d(-200%, 200%, 0);
        transform: translate3d(-200%, 200%, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fly-up-3 {
    -webkit-animation-name: fly-up-3;
    animation-name: fly-up-3;
}

@-webkit-keyframes fly-down-1 {
    0% {
        -webkit-transform: translate3d(-20%, -50%, 0);
        transform: translate3d(-20%, -50%, 0);
    }

    100% {  
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fly-down-1 {
    0% {
        -webkit-transform: translate3d(-20%, -50%, 0);
        -ms-transform: translate3d(-20%, -50%, 0);
        transform: translate3d(-20%, -50%, 0);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fly-down-1 {
    -webkit-animation-name: fly-down-1;
    animation-name: fly-down-1;
}

@-webkit-keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        -ms-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fade-in-up {
    -webkit-animation-name: fade-in-up;
    animation-name: fade-in-up;
}

@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        -ms-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fade-in-down {
    -webkit-animation-name: fade-in-down;
    animation-name: fade-in-down;
}

@-webkit-keyframes fade-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fade-in-right {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .fade-in-right {
    -webkit-animation-name: fade-in-right;
    animation-name: fade-in-right;
}

@-webkit-keyframes big-to-small {
    0% {
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes big-to-small {
    0% {
        -webkit-transform: scale(2);
        -ms-transform: scale(2);
        transform: scale(2);
    }

    100% {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

.active .big-to-small {
    -webkit-animation-name: big-to-small;
    animation-name: big-to-small;
}
 */