@charset "UTF-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
ul,ol{list-style:none;}
a{text-decoration:none;}
img{border:0;vertical-align:middle;}
input,button{vertical-align:middle;outline:none;border:none;}
textarea{outline:none;border:none;resize:none;}
.lf{float:left;}
.rt{float:right;}
/*清除浮动*/
.clearfix{*zoom:1;} /* 针对IE7 hack，触发IE7的haslayout，以清除浮动 */
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
table tr td,table{border-collapse:collapse;}
body{font-family:"Microsoft YaHei","微软雅黑","Arial";}
/*解决 a标签点击出现色块*/
a:active{
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:rgba(0, 0, 0, 0);
    -o-tap-highlight-color:rgba(0, 0, 0, 0);
    tap-highlight-color:rgba(0, 0, 0, 0);
}
.flex-align-center.active{display: flex;display: -webkit-flex;display: -ms-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;flex-flow: row;}
html,body{width: 100%;overflow-x: hidden;}

@media (min-width: 0px){
    html{
        font-size: 28px;
    }
    .title_main-con{
        text-align: center;
        margin-bottom: 20px;
    }
    .model-side{
        margin-top: 40px;
    }
    .header .logo-box>img {
        width: 3.5rem;
    }
    .content_list .item_img img{
        width: 5.55rem;
        height: 5.55rem;
    }
    .wrapper>a{
        padding-top: 0.55rem;
    }
    .description {
        padding: 0 0.75rem 0.0rem 6.4rem;
    }
    .layer{
        text-align: center;
        height: 100%;
    }
    .bianhui .img-responsive{width: 95%;}
    body{font-size: 14px;}
    h4{font-size: 16px;}
    .title p {font-size: 14px;}
    .title_main h4{font-size: 18px;}
    .title_main p{font-size: 16px;}
    .mauo h3,.com-tit{font-size: 18px;}
    .header .nav-item{ padding: 0 0.2rem 0.25rem;}
    .r-banner{height: 18.35rem;}
    .img-wrap img{width: 100%;}
    .r-text h4{font-size: 0.6rem;}
    .r-text h3{font-size: 1rem;}
    .r-text{top: 6rem;}
    .r-text h3{margin:0.8rem 0px;}
    .title.tc {
        padding: 3.0rem 0.25rem 0.625rem;
    }
    .jiaohu-container{margin-bottom: 3rem;}
    .slide_one4{margin-bottom: 2.5rem;}
    .pc-box .logo-box{width: 108px;height: 40px; }
    .pc-box .logo-box:hover{width: 120px;height: 40px;}
}

.pagination03 span{margin:0 5px;}

@media (min-width: 768px){
    body{font-size: 0.35rem;}
    h4{font-size: 0.45rem;}
     html{font-size: 30px;}
    .title_main-con{text-align: left;margin-bottom: 0px;}
    .model-side{
        margin-top: 0px;
    }
    .header .logo-box>img {
        width: 3.333333rem;height: 0.5625rem;
    }
    .content_list .item_img img{
        width: 8.55rem;
        height: 8.55rem;
    }
    .wrapper>a{
        padding-top: 0.75rem;
    }
    .slide_one4  .tab_content li .item_info {
        padding: 0.0006rem 0.0rem 0.75rem 8.875rem;
    }
    .description {
        padding: 0 0.75rem 0.0rem 10.5rem;
    }
    .layer{
        text-align: right;
    }
    .bianhui .img-responsive{width: 45%;}
    .title p {
        font-size: 0.4rem;
    }
    .title_main h4{font-size: 0.5rem;}
    .title_main p{font-size: 0.4rem;}
    .mauo h3,.com-tit{font-size: 0.75rem;}
    .header .nav-item{ padding: 0 0.5rem 0.25rem;}
    .img-wrap img{width: 100%;}
    .r-text{top: 25%;}
    .r-text h4{font-size: 22px;}
    .r-text h3{font-size: 28px;}
    .r-text h3{margin:10px 0px;}
    .pc-box .logo-box{width: 160px;height: 47px; }
    .pc-box .logo-box:hover{width: 260px;height: 47px;}
}
@media (min-width: 992px){
    html{
        font-size: 33px;
    }
    .bianhui>div:nth-of-type(4),.bianhui>div:nth-of-type(5),.bianhui>div:nth-of-type(6){
        margin-top:1.25rem;
    }
}
@media (min-width: 1200px){
    html{
        font-size: 40px;
    }
    .bianhui{
        background: url('../img/fw-13.png') center 3rem no-repeat;
        background-size: 100% 58%;
    }
    .r-banner{height: 90vh;}
}

@media (min-width: 1600px){
    .r-text h3{margin:0.8rem 0px;}
    .r-text h4{font-size: 32px;}
    .r-text h3{font-size: 48px;}
    .r-banner{height: 95vh;}
    .title.tc {padding: 5rem 0.25rem 0.625rem;}
    .jiaohu-container{margin-bottom: 5rem;}
    .slide_one4{margin-bottom: 4.5rem;}
}

.swiper-wrapper{
    height: auto!important;
}
.lc-text h4{
    margin-bottom: 0.2rem;
}

/*合作商*/
.ad-main{margin-top: 0.5rem;}
.ad-tit-wrap{padding:2.125rem 0px 0.625rem;}
.ad-left-btn{float: left;width: 5%;cursor: pointer;}
.ad-right-btn{float: left;width: 5%;cursor: pointer;}
.ad-left-btn img,.ad-right-btn img{width: 1.25rem;height: 1.25rem;}
.ad-con-wrap{float: left;position: relative;width: 90%;overflow: hidden;min-height: 1.75rem;}
.ad-item-wrap{position: absolute;top: 0px;left: 0px;font-size: 0px;}
.ad-item-wrap>a{display: inline-block;position: relative;padding:0 0.35rem; box-sizing: border-box;}
.ad-item-wrap>a img{width: 3.5rem;height: 1.75rem;}
.ad-hover{position: absolute;left: 0.35rem;top: 0px;width: 3.5rem;height:1.75rem;transition: all 200ms ease-in-out;transform: translateY(100%);-webkit-transition: all 200ms ease-in-out;-webkit-transform: translateY(100%);-ms-transition: all 200ms ease-in-out;-ms-transform: translateY(100%);-moz-transition: all 200ms ease-in-out;-moz-transform: translateY(100%);}
.ad-item-wrap>a:hover .ad-hover{transform: translateY(0%);-webkit-transform: translateY(0%);-ms-transform: translateY(0%);-moz-transform: translateY(0%);}


.slide_one4{position: relative;}
.slide_one4 .tit{text-align: center;color: #000;font-size: 0.75rem;padding: 1.25rem 0px 10px;}
.slide_one4 .tit_pro{text-align: center;color: #333;font-size: 0.4rem;}
.slide_one4 .mlist.imagelink .content_wrapper {position: relative;margin-right: -2px}

.slide_one4 .mlist.imagelink .content_wrapper .bx-viewport {
    padding-top: 1px;
    padding-left: 1px
}

.slide_one4 #indexPage .module.imagelink .container_header {
    display: block
}

.slide_one4 .content_list li {
    float: left;
    position: relative;
    padding: 2.15rem 0.0rem 0.75rem;
    width: 100%;
}
.slide_one4 .content_list1 li {
    float: left;width: 25%;
}

.slide_one4 .mlist.imagelink .content_list li.item_block .item_img {
    float: none;
    display: inline-block;
    margin-top: 44px;
    width: 10pc;
    height: 5pc
}

.slide_one4 .mlist.imagelink .content_list li.item_block img {
    float: none;
    width: 100%;
    height: auto;
    opacity: .8;
    transition: all ease-out .3s .1s
}

.slide_one4 .mlist.imagelink .content_list li.item_block:hover {
    border-color: #fff;
    box-shadow: 0 14px 40px #dbdbdb
}

.slide_one4 .mlist.imagelink .content_list li.item_block .item_img:hover img {
    opacity: 1
}

.slide_one4 .mlist.imagelink .container_category {
    display: none
}

.slide_one4 .mlist.imagelink .module_container {
    padding: 20px 5px 80px;
    max-width: 80%
}

.slide_one4 #indexPage .module.imagelink .container_content .bx-wrapper .bx-pager.bx-default-pager {
    display: none
}

.slide_one4 #indexPage .module.imagelink .container_content .bx-wrapper .bx-controls-direction a {
    display: block;
    background-color: transparent
}

.slide_one4 .imagelink .bx-wrapper .bx-controls-direction a.bx-prev {
    left: -40px
}

.slide_one4 .imagelink .bx-wrapper .bx-controls-direction a.bx-next {
    right: -40px
}

.slide_one4 .imagelink .bx-wrapper .bx-controls-direction a i {
    margin-top: 36px;
    color: #b9bdc1;
    font-size: 22px
}

.slide_one4 .imagelink .bx-wrapper .bx-controls-direction a:hover i {
    color: #e40807
}

/*.slide_one4  .tab_content li .item_img {
    position: relative;
    z-index: 3;
    float: left;
    margin: 0 1.25rem 0.75rem 0.75rem;
    width: 30%;
}*/
.wrapper>a{
    position: relative;
}
.slide_one4  .tab_content li .item_img {
    position: absolute;
    z-index: 3;
    left: 0.75rem;
    bottom: 0.75rem;
    width: 30%;
}
.slide_one4 .slide_person{margin-top: 0.5rem;}
.slide_one4 .tab_content li .item_img a:after {
    position: absolute;
    top: 0;
    margin: 0.25rem;
    width: calc(100% - 0.5rem);
    height: calc(100% - 0.5rem);
    border: 1px solid transparent;
    content: ''
}

.slide_one4 .tab_content li .title {
    display: inline-block;
    height: 0.7rem;
    color: #333;
    font-size: 0.6rem;
    line-height: 0.7rem;
}

.slide_one4  .tab_content li .subtitle {
    display: inline-block;
    margin-left: 0.25rem;
    color: #999
}

.description {
    margin-top: 2.15rem;
    color: #777;
    line-height: 0.65rem;
}

.slide_one4  .tab_content li .cScrollbar {
    height: 3.25rem;
}

.slide_one4  .tab_content li .description>div {
    overflow: hidden;
    height: 4.875rem;
    overflow-y: auto;
    padding: 0.125rem 0.375rem;
}
.slide_one4 .description .spe_span{color: #333;}
.slide_one4  .tab_button {
    position: relative;
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    overflow: hidden;
    height: 5.5rem;
}
.slide_one4  .tab_button .content_list1{position: relative;left: 0px;width: 1000em;height: 220px;transition: all 0.4s;}
.slide_one4  .tab_button .content_list1 li{width: auto;padding: 0px 0.475rem;}
.slide_one4  .tab_button li .item_img {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 0.5rem;
    width: 70pt;
    height: 70pt
}

.slide_one4  .tab_button li .item_img img {
   display: none;
    border: 3px solid #eee;
}
.slide_one4  .tab_button li .item_img img:first-child{display: block;border: 3px solid #ddd;}
.slide_one4  .tab_button li.on .item_img img:last-child {
    border-color: #bbb;
    display: block;
}
.slide_one4  .tab_button li.on .item_img img:first-child{display: none;}

.slide_one4  .tab_button li .item_wrapper {
    margin: 0
}

.slide_one4  .tab_button li .item_info {
    padding: 0 1.0rem;
    text-align: center
}

.slide_one4  .tab_button .item_info p.title {
    display: block;
    margin-top: 0.35rem;
    height: 0.45rem;
    color: #444;
    font-size: 0.35rem;
    line-height: 0.45rem;
}

.slide_one4  .tab_button .item_info p.subtitle {
    color: #999
}

.slide_one4  .tab_content li.item_block:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 6.25rem;
    background-color: #f6f6f6;
    content: ''
}

.slide_one4  .tab_content li .item_info {
    position: relative;
}

.slide_one4  .tab_button .icon {
    position: absolute;
    top: 0;
    left: auto;
    margin-left: -0.5rem;
    width: 1.0rem;
    height: 0.5rem
}

.slide_one4  .tab_button .icon:after {
    display: block;
    width: 0;
    height: 0;
    border-top: 0.5rem solid #f6f6f6;
    border-right: 0.5rem solid transparent;
    border-left: 0.5rem solid transparent;
    content: ''
}

.slide_one4 #indexPage .mlist.team_tabs .container_content .bx-wrapper .bx-controls-direction a,
.slide_one4  .container_category {
    display: none
}

.slide_one4 .team_tabs li.wow {
    cursor: pointer
}

.slide_one4 .team .content_list {
    position: relative;
    width: 100%;
    margin-left: 0.6rem;
    margin-top: 1.0rem;
}

.slide_one4 .team .content_wrapper {
    margin-right: -2%
}

.slide_one4 .team .date_wrap,
.slide_one4 .team .details,
.slide_one4 .team .item_tags {
    display: none
}

.slide_one4 .team .item_block {
    position: relative;
    float: left;
    margin-right: 2%;
    margin-bottom: 0.5rem;
    width: 31.333%;
    height: auto
}

.slide_one4 .team .title {
    margin-top: 0.6rem;
    color: #3c3c3c;
    font-size: 20px;
    transition: all ease-out .3s
}

.slide_one4 .team .title,
.slide_one4 .team .subtitle,
.slide_one4 .team .item_des {
    text-align: center;
}

.slide_one4 .post .team .title,
.slide_one4 .post .team .subtitle,
.slide_one4 .post .team .item_des {
    text-align: left;
}

.slide_one4 .team .item_box:hover .title {
    color: #e40807
}

.slide_one4 .team .subtitle {
    margin-bottom: 1.0rem;
    color: #999;
    font-size: 9pt
}

.slide_one4 .team .item_info {
    padding: 0 0.75rem;
}


.tc {
    text-align: center;
}
.title h2 {
    padding: 0rem 0 0.25rem;
    font-size: 0.75rem;
}

.mt30 {
    margin-top: 0.75rem;
}
.slide_one4 .team .item_des {
    padding: 0 0.25rem;
    font-size: 0.325rem;
    line-height: 0.65rem;
    height: 1.9rem;
    overflow: hidden;
}

.slide_one4 .team .bx-wrapper .bx-pager {
    display: none
}

.slide_one4 .team .item_block a:hover {
    color: #898989
}

.slide_one4 .team .item_block {
    width: 28%;
    height: 12.0rem;
    margin-right: 5%;
}

.slide_one4 .team .item_block:nth-child(3n) {
    margin-right: 0;
}

.slide_one4 .team .item_block .item_img img {
    width: 80%;
    border-radius: 50%;
    margin-left: 10%;
    transition: all .3s ease-out 0s;
}

.tab_button .item_img img {
    max-width: 100%;
    display: block;
}

.slide_one4 .slide_person{position: relative;}
.slide_one4 .slide_person .prev {
    background: url(../img/arrows1.png) no-repeat left top;
    background-size:0.75rem auto ;
    position: absolute;
    left: 0.25rem;
    bottom: 20%;
    width: 0.75rem;
    height: 1.125rem;
    z-index: 3;
    opacity: 0.7;
    transition: all 0.4s;
}
.slide_one4 .slide_person .prev:hover{background: url(../img/arrows1_hover.png) no-repeat left top;background-size:0.75rem auto ; }
.slide_one4 .slide_person .next {
    background: url(../img/arrows1.png) no-repeat left bottom;
    position: absolute;
    right: 0.25rem;
    bottom: 20%;
    width: 0.75rem;
    height: 1.125rem;
    z-index: 3;
    opacity: 0.7;
    transition: all 0.4s;
}
.slide_one4 .slide_person .next:hover{background: url(../img/arrows1_hover.png) no-repeat left bottom;}

.liucheng h4{margin-bottom: 8px;}

.slide_one6{
    border-top: 1px dotted #d3d3d3;background: #fff;}
.slide_one6 .title{ padding: 0 10px 20px; }
.slide_one6 .title h2{ padding: 20px 0 10px; font-size: 30px;text-align: center;}
.slide_one6 .title p{ font-size: 16px;text-align: center;}
.slide_one6 .swiperS{ margin-top: 30px; }

/* icon */
.slide_one6 .icon{ display: inline-block; background: url(../images/icon.png) no-repeat; transition: all 0.3s; }
.slide_one6 .icon-fbh{ width: 107px; height: 98px; background-position: 0 0; }
.slide_one6 .icon-rz{ width: 113px; height: 99px; background-position: 0 -220px; }
.slide_one6 .icon-xc{width: 114px; height: 100px; background-position: 0 -440px; }
.slide_one6 .icon-dz{width: 99px; height: 100px; background-position: 0 -660px; }

.slide_one6 .cont{margin:50px 0;}
.slide_one6 .cont li{width:25%; float:left; text-align:center;}
.slide_one6 .cont li .title{font-size:18px;}
.slide_one6 .cont li .con{color:#999;}

.slide_one6 .link-box{ margin: 40px 0 60px -2%;  }
.slide_one6 .link-box .item{ float: left; width: 23%; margin-left: 2%; margin-bottom: 15px; text-align: center;}
.slide_one6 .link-box .item a{ display: block; padding-bottom: 10px; border: solid 1px #ddd; transition: all 0.3s;}
.slide_one6 .link-box .item i{ margin-top: 50px; }
.slide_one6 .link-box .item .text{ margin-top: 15px; font-size: 14px; transition: all 0.3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.slide_one6 .link-box .item .button{ opacity: 0; display: inline-block; margin: 20px 0 15px;  padding: 0 10px; background-color: #eee; color: #fff;transition: all 0.3s; }
.slide_one6 .link-box .item:hover a{ border-color: #00b0f0; }
.slide_one6 .link-box .item:hover .text{ color: #00b0f0; }
.slide_one6 .link-box .item:hover .button{ opacity: 1; background-color: #00b0f0; }
.slide_one6 .link-box .item:hover .icon-fbh{ background-position: 0 -110px; }
.slide_one6 .link-box .item:hover .icon-rz{ background-position: 0 -330px; }
.slide_one6 .link-box .item:hover .icon-xc{ background-position: 0 -550px; }
.slide_one6 .link-box .item:hover .icon-dz{ background-position: 0 -770px; }
.slide_one6 .link-box .item .info{ margin: 10px 20px; text-align: center; font-size: 12px; color: #999; }
.slide_one6 .link-box.sp .item a{ min-height: 220px; }

.slide_one6 .demo-list .item{ float: left; width: 33.3333%; margin-bottom: 15px; }

.slide_one6 .footer{ padding: 10px; background-color: #1d2024; }
.slide_one6 .footer p{ margin-top: 10px; text-align: center; color: #fff;}
.slide_one6 .footer .share-box{ text-align: center; }
.slide_one6 .footer .share-box a{ display: inline-block; margin: 0 5px; }
.slide_one6 .footer .share-box a i{ display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 100%; text-align: center; background-color: #2e2f2f; color: #efefef; font-size: 24px; }
.slide_one6 .footer .share-box a:hover i{ background-color: #484a4a; }
.slide_one6 .brand-list{ margin-top: 30px;text-align: center;margin-bottom: 50px;}
.slide_one6 .brand-list>a{ box-sizing: border-box; float: left; display: block; width: 20%; padding: 10px 2%; border-right: solid 1px #eee; border-bottom: solid 1px #eee; }
.slide_one6 .brand-list>a:nth-child(5n+5){ border-right:0; }
.slide_one6 .brand-list>a:nth-child(n+11){ border-bottom:solid 1px #fff; }
.slide_one6 .brand-list>a img{ display: inline-block;width: 70%;}
.slide_one6 .swiper.brand-list-box .pagination{ bottom: 0; }


.slide_one6 .mfor{background:#282b32}
.slide_one6 .mfor .mf-auto{padding:2.0rem 0; color:#e0e0e0; text-align:center; height:auto; line-height:normal;
}
.slide_one6 .mfor .tit{font-size:0.75rem;}
.slide_one6 .mfor .tit p{ margin-top: 0.25rem; font-size: 0.4rem;color:#e0e0e0;}
.slide_one6 .mfor .con{margin:1.25rem 0 0; font-size:0.5rem; font-family:Arial, Helvetica, sans-serif;}
.slide_one6 .mfor .con span{margin:0 0.625rem; display:inline-block; height:0.75rem; line-height:0.75rem;color:#e0e0e0;}
.slide_one6 .mfor .con .iconfont{ display: inline-block; margin-right: 0.125rem; vertical-align: 1px; font-size: 0.6rem;  }
.slide_one6 .mfor .con i{ font-style: normal;}
.slide_one6 .mfor .con a{ color: #e0e0e0; }





body{
    color: #000;
    font-family: "microsoft yahei";
    overflow-x: hidden;
  }
  .r-banner{
    position: relative;
    background: #0079FF;
  }
  .r-text{
    color: #fff;
    position: absolute;
    width: 100%;  }
  .r-back-wrap{position: absolute;bottom: -1vh;width: 100%;}
  .bc-1{width: 110%;left:-5%!important;}
  .bc-2{width: 110%;left:-5%!important;}
  .bc-1 img,.bc-2 img{width: 100%;}
  .title_r{
    margin-top: 10%;
  }

  .title_main{
    position: relative;
    /*margin-top: 5%;*/
  }
  .rows>div{
    min-height:4.875rem;
  }
  .model1-text .color-hui{
    color: #555555;
    margin-top:0.5rem;
  }
  .model1-text>h4{font-weight: bold;}
@media (min-width: 1200px){
   .model1-text .color-hui{
    margin-top:10px;
  }
}
  .color-82,.bianhui p{
    color: #808080;
  }
  .mauo{
    margin: 2.375rem 0 30px;
  }
  /*.jh-wrap .mauo{ margin: 100px 0 50px;}*/
.mauo h3,.com-tit{text-align: center;color: #000;padding: 20px 0px 10px;}
.mauo h5,.com-tit-p{text-align: center;color: #333;font-size: 0.4rem;}
.mab{margin-bottom: 12%;}
.lc-text{display: inline;}
.bianhui{
    text-align: center;
}

  .jh-product{position: relative;margin:auto auto 12px;width: 5.1rem;height: 3.8rem;box-sizing: border-box;overflow: hidden;}
  .jh-product img{width: 80%;transition: all 300ms ease-in-out;-webkit-transition: all 300ms ease-in-out;}
  .jg-item:hover .jh-product img{transform: translateY(-50%);-webkit-transform: translateY(-50%);}
  .jg-item:hover h4, .jg-item:hover p {color:rgb(14, 140, 253); }
  @media (min-width: 992px){
   .jg-item.col-lg-3,.jg-item.col-md-3{
        width: 20%;
    }
}

  .roadio{
    position: relative;
  }
  .ba{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: -5%;
  }
  .imgm>div{
    margin-bottom: 20px;
  }
  p{
    margin-bottom: 0;
  }
  .anima{
    transition: 1000ms;
  }

/*头部*/
.fl {
    float: left;
}
.header{ position: fixed; left: 0; top: 0; width: 100%; padding: 10px 0 0px; line-height: 40px; background-color: transparent; z-index: 99999; transition: all ease 0.3s; }
.header.add_bg{background: #fff;box-shadow: 1px 1px 3px #eee;}
.pc-box{ justify-content: space-between; }
/*.header .logo-box>img{width: 4.0rem; }*/
.header .nav{ float: right; text-align: right;}
.header .nav li{ float: left; }
.header .nav-item{ display: inline-block;font-size: 0.5rem; color: #999999; transition: all ease 0.4s; }
.header .nav-item:hover{ color: #0e8cfd;background: none;}
.header .header-sp{ position: relative; padding-top: 10px; background-color: #fff; color: #0e8cfd; border-bottom: solid 1px #ddd;}
.header .header-sp .nav-item{ color: #999;}
.header .header-sp .nav-item:hover,.header .header-sp .nav-item.active{ color: #0e8cfd; }
.header .header.active{position: fixed; padding-top: 5px; padding-bottom: 3px; background-color: #fff; border-bottom: solid 1px #eee; box-shadow: 0px 2px 3px rgba(0,0,0,0.1);}
.header .header.active .nav-item{ color: #999; }
.header .header.active .nav-item:hover,.header.active .nav-item.active{ color: #0e8cfd; }


.header1{ position: fixed; left: 0; top: 0; width: 100%; padding: 10px 0 0px; line-height: 40px; background-color: transparent; z-index: 99999; transition: all ease 0.3s; }
.header1 .logo-box{ margin-right: 50px; }
.header1 .logo-box>img{ display: block; width: 160px; }
.header1 .nav{ float: right; text-align: right;}
.header1 .nav li{ float: left; }
.header1 .nav-item{ display: inline-block; padding: 0 20px 10px; font-size: 18px; color: #fff; transition: all ease 0.4s; }
.header1 .nav-item:hover{ color: #0e8cfd;background: none;}
.header1 .header-sp{ position: relative; padding-top: 10px; background-color: #fff; color: #0e8cfd; border-bottom: solid 1px #ddd;}
.header1 .header-sp .nav-item{ color: #fff;}
.header1 .header-sp .nav-item:hover,.header1 .header-sp .nav-item.active{ color: #0e8cfd; }
.header1 .header.active{position: fixed; padding-top: 5px; padding-bottom: 3px; background-color: #fff; border-bottom: solid 1px #eee; box-shadow: 0px 2px 3px rgba(0,0,0,0.1);}
.header1 .header.active .nav-item{ color: #999; }
.header1 .header.active .nav-item:hover,.header1.active .nav-item.active{ color: #0e8cfd; }
.header1.add_bg{background: #fff;box-shadow: 1px 1px 3px #eee;}
.header1.add_bg .nav-item{ color: #999; }
.header .nav.active li a{color: #fff!important;}
.mobile-nav-box{ display: none; transition: all 0.3s; }
.mobile-nav-box.open{  -webkit-transform:translate3D(75%,0,0);transform:translate3D(75%,0,0); }
.pc-box{ overflow: hidden;}

.pc-box .logo-box{display: inline-block;background: url('../img/logo-white.png') left center no-repeat;background-size:contain; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;}
.pc-box .logo-box:hover{display: inline-block;background: url('../img/biaoyu.png') left center no-repeat;background-size:cover;}
.header.add_bg .logo-box{background: url('../img/logo.png') left center no-repeat;background-size:contain;}
.header.add_bg .logo-box:hover{background: url('../images/logo-black.png') left center no-repeat;background-size:cover;}

.model-side>div{opacity:0;filter:alpha(opacity=0);transform: translateY(50px);-webkit-transform: translateY(50px);-moz-transform: translateY(50px);-ms-transform: translateY(50px); }
.model-side.active>div{animation:fadeIN 500ms ease-in-out forwards; -webkit-animation:fadeIN 500ms ease-in-out forwards;-moz-animation:fadeIN 500ms ease-in-out forwards; -ms-animation:fadeIN 500ms ease-in-out forwards;}
.model-side.active>div:nth-child(2){animation-delay:200ms;-webkit-animation-delay:200ms;-moz-animation-delay:200ms;-ms-animation-delay:200ms;}
.model-side.active>div:nth-child(3){animation-delay:400ms;-webkit-animation-delay:400ms;-moz-animation-delay:400ms;-ms-animation-delay:400ms;}
.model-side.active>div:nth-child(4){animation-delay:800ms;-webkit-animation-delay:800ms;-moz-animation-delay:800ms;-ms-animation-delay:800ms;}
@keyframes fadeIN{from{opacity:0;filter:alpha(opacity=0);transform: translateY(50px); }to{opacity:1;filter:alpha(opacity=100);transform: translateY(0px);}}
@-webkit-keyframes fadeIN{from{opacity:0;filter:alpha(opacity=0); -webkit-transform: translateY(50px);}to{opacity:1;filter:alpha(opacity=100);-webkit-transform: translateY(0px);}}
@-moz-keyframes fadeIN{from{opacity:0;filter:alpha(opacity=0); -moz-transform: translateY(50px);}to{opacity:1;filter:alpha(opacity=100);-moz-transform: translateY(0px);}}
@-ms-keyframes fadeIN{from{opacity:0;filter:alpha(opacity=0); -ms-transform: translateY(50px);}to{opacity:1;filter:alpha(opacity=100);-ms-transform: translateY(0px);}}

.title_main{overflow: hidden;}
    .center-vertical{position:absolute;
    top:50%;
    transform:translateY(-50%);}
.title_main h4{margin-bottom:0.25rem;}
.title_main-con{transform: translateY(100%);opacity:0;filter:alpha(opacity=0);}
.title_main-con.active{animation:titleMain 500ms ease-in-out forwards; -webkit-animation:titleMain 500ms ease-in-out forwards;-moz-animation:titleMain 500ms ease-in-out forwards; -ms-animation:fadeIN 500ms ease-in-out forwards;}
@keyframes titleMain{from{opacity:0;filter:alpha(opacity=0);transform: translateY(100%); }to{opacity:1;filter:alpha(opacity=100);transform: translateY(0%);}}
@-webkit-keyframes titleMain{from{opacity:0;filter:alpha(opacity=0); -webkit-transform: translateY(100%);}to{opacity:1;filter:alpha(opacity=100);-webkit-transform: translateY(0px);}}
@-moz-keyframes titleMain{from{opacity:0;filter:alpha(opacity=0); -moz-transform: translateY(100%);}to{opacity:1;filter:alpha(opacity=100);-moz-transform: translateY(0px);}}
@-ms-keyframes titleMain{from{opacity:0;filter:alpha(opacity=0); -ms-transform: translateY(100%);}to{opacity:1;filter:alpha(opacity=100);-ms-transform: translateY(0px);}}


.bianhui1 .jg-item>div{opacity:0;filter:alpha(opacity=0);transform: translateY(100%);-webkit-transform: translateY(100%);-moz-transform: translateY(-100%);-ms-transform: translateY(100%);}
.bianhui1.active .jg-item>div{animation:bianhuiDiv 600ms ease-in-out forwards; -webkit-animation:bianhuiDiv 600ms ease-in-out forwards;-moz-animation:bianhuiDiv 600ms ease-in-out forwards; -ms-animation:bianhuiDiv 600ms ease-in-out forwards;}
.bianhui1.active .jg-item:nth-child(2)>div{animation-delay:120ms;-webkit-animation-delay:120ms;-moz-animation-delay:120ms;-ms-animation-delay:120ms;}
.bianhui1.active .jg-item:nth-child(3)>div{animation-delay:240ms;-webkit-animation-delay:240ms;-moz-animation-delay:240ms;-ms-animation-delay:240ms;}
.bianhui1.active .jg-item:nth-child(4)>div{animation-delay:360ms;-webkit-animation-delay:360ms;-moz-animation-delay:360ms;-ms-animation-delay:360ms;}
.bianhui1.active .jg-item:nth-child(5)>div{animation-delay:480ms;-webkit-animation-delay:480ms;-moz-animation-delay:480ms;-ms-animation-delay:480ms;}
@keyframes bianhuiDiv{0%{opacity:0;filter:alpha(opacity=0);transform: translateY(100%);}90%{transform: translateY(-30px);}100%{opacity:1;filter:alpha(opacity=100);transform: translateY(0px);}}
@-webkit-keyframes bianhuiDiv{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform: translateY(100%);}90%{-webkit-transform: translateY(-30px);}100%{opacity:1;filter:alpha(opacity=100);-webkit-transform: translateY(0px);}}
@-moz-keyframes bianhuiDiv{0%{opacity:0;filter:alpha(opacity=0);-moz-transform: translateY(100%);}90%{-moz-transform: translateY(-30px);}100%{opacity:1;filter:alpha(opacity=100);-moz-transform: translateY(0px);}}
@-ms-keyframes bianhuiDiv{0%{opacity:0;filter:alpha(opacity=0);-ms-transform: translateY(100%);}90%{-ms-transform: translateY(-30px);}100%{opacity:1;filter:alpha(opacity=100);-ms-transform: translateY(0px);}}

.bianhui2 .img-responsive{margin-top: 35px;}
.ani{padding:5vh 0vh 0vh;}
.anima-wrap{overflow: hidden;position: relative;}
.leftIn{opacity:0;filter:alpha(opacity=0);transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%);}
.leftIn.active{animation:leftIn 500ms ease-in-out forwards; -webkit-animation:leftIn 500ms ease-in-out forwards;-moz-animation:leftIn 500ms ease-in-out forwards; -ms-animation:leftIn 500ms ease-in-out forwards;}
@keyframes leftIn{from{opacity:0;filter:alpha(opacity=0);transform: translateX(100%); }to{opacity:1;filter:alpha(opacity=100);transform: translateX(0%);}}
@-webkit-keyframes leftIn{from{opacity:0;filter:alpha(opacity=0); -webkit-transform: translateX(100%);}to{opacity:1;filter:alpha(opacity=100);-webkit-transform: translateX(0px);}}
@-moz-keyframes leftIn{from{opacity:0;filter:alpha(opacity=0); -moz-transform: translateX(100%);}to{opacity:1;filter:alpha(opacity=100);-moz-transform: translateX(0px);}}
@-ms-keyframes leftIn{from{opacity:0;filter:alpha(opacity=0); -ms-transform: translateX(100%);}to{opacity:1;filter:alpha(opacity=100);-ms-transform: translateX(0px);}}

.jg-item{float: left;}
.jg-item>div{width: 100%;}
.img-wrap{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center; height: 100%;text-align: center;}
.r-text h3{font-weight: 900;}

@media (min-width: 1200px){
   .title_r{
    margin-top: 10%;
  }
  .title_main h4{font-size: 24px;}
.title_main p{font-size: 20px;}
  /*.color-hui{margin-top: 2%;}*/
}

/*@media (max-width: 1600px){
   .r-text h4{font-size: 22px;}
   .r-text h3{margin:10px 0px;font-size: 28px;}
}*/

/* 字体图标 */
@font-face {font-family: "iconfont";
  src: url('../img/iconfont.eot'); /* IE9*/
  src: url('../img/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../img/iconfont.woff') format('woff'), /* chrome, firefox */
  url('../img/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../img/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-menu:before { content: "\e607"; }
.icon-close:before { content: "\e608"; }
.icon-qq:before { content: "\e600"; }
.icon-top:before { content: "\e601"; }
.icon-weibo:before { content: "\e603"; }
.icon-wechat:before { content: "\e604"; }
.icon-right:before { content: "\e605"; }
.icon-left:before { content: "\e606"; }
.icon-play:before { content: "\e602"; }


/* swiper */
.swiper{ position: relative; }
.swiper-container {
  position:relative;
  overflow-x:hidden;
  /* Fix of Webkit flickering */
  z-index:1;
}
.swiper-wrapper {
  position:relative;
  width:100%;
  -webkit-transition-property:-webkit-transform, left, top;
  -webkit-transition-duration:0s;
  -webkit-transform:translate3d(0px,0,0);
  -webkit-transition-timing-function:ease;

  -moz-transition-property:-moz-transform, left, top;
  -moz-transition-duration:0s;
  -moz-transform:translate3d(0px,0,0);
  -moz-transition-timing-function:ease;

  -o-transition-property:-o-transform, left, top;
  -o-transition-duration:0s;
  -o-transform:translate3d(0px,0,0);
  -o-transition-timing-function:ease;
  -o-transform:translate(0px,0px);

  -ms-transition-property:-ms-transform, left, top;
  -ms-transition-duration:0s;
  -ms-transform:translate3d(0px,0,0);
  -ms-transition-timing-function:ease;

  transition-property:left, top, -webkit-transform;

  transition-property:transform, left, top;

  transition-property:transform, left, top, -webkit-transform;
  transition-duration:0s;
  -webkit-transform:translate3d(0px,0,0);
          transform:translate3d(0px,0,0);
  transition-timing-function:ease;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  position: relative;
  float: left;
  width: 100%;
  cursor:default;
  height: auto!important;
}

.swiper-container{ width: 100%;box-shadow: 0px 0px 20px 0px #e9e9ea;}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
  -ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
  -ms-touch-action: pan-x;
}
.swiper-slide>img{ display: block; width: 100%;
  border-bottom:1px solid #dbdbdb;}
.swiper-index .swiper-slide .text{ position: absolute; top: 30%; left:0; width: 100%; color: #fff;text-align: center; z-index: 999;}
.swiper-index .swiper-slide .text .label{ display: inline-block; width: 100px; height: 100px; margin: 30px 0; border-radius: 100%; line-height: 100px; text-align: center; border: solid 1px #ddd; font-size: 60px; }
.swiper-index .swiper-slide .text h2{ padding: 0 30px; margin-bottom: 15px; font-size: 36px; }
.swiper-index .swiper-slide .icon-play{ vertical-align: middle; display: inline-block; margin-right: 5px; font-size: 20px; color: #fff; cursor: pointer; transition: all 0.3s; }
.swiper-index .swiper-slide #playBtn{ display: inline-block; cursor: pointer; }
.swiper-index .swiper-slide #playBtn:hover{ color: #327fc2; }
.swiper-index .swiper-slide #playBtn:hover .icon-play{ color: #327fc2; }
.swiper .arrow-left,.swiper .arrow-right {
 display: none; position: absolute; top: 42%; margin-top: -25px; width: 50px; height: 50px; margin-top: -25px;text-align: center;  line-height: 50px; background-image: none; z-index: 99;
}
.swiper .arrow-left{ left: 30px; }
.swiper .arrow-right {
  right: 30px;
}
.swiper .arrow-left:hover,.swiper .arrow-right:hover{ text-decoration: none; }
.swiper .arrow-left i,.swiper .arrow-right i{ font-size: 50px; color: #ebebeb;}
.swiperS .arrow-left{ left: 0; }
.swiperS .arrow-right {
  right: 0;
}
.swiperS .arrow-left,.swiperS .arrow-right { display: none; width: 0.625rem; height: 1.5rem; line-height: 1.5rem; border-radius: 0.075rem; text-align: center; background-color: #ddd; }
.swiperS .arrow-left:hover,.swiperS .arrow-right:hover{ background-color: #0cb3f0; }
.swiperS .arrow-left i,.swiperS .arrow-right i{ font-size: 20px; color: #fff; }
.swiper .pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:2.45rem;
  width: 100%;
  text-align: center;
  z-index: 99;
  margin:0px!important;
  padding-bottom: 0.375rem;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  margin: 0 0.125rem;
  border-radius: 100%;
  background-color: #ddd;
  cursor: pointer;
}
.swiper-active-switch {
  background: #0e8cfd;
}

.swiper-service .swiper-slide .text{ position: relative;padding: 0.25rem 0.5rem; color: #000;height: 2.45rem;font-size: 0.45rem;}
.swiper-service .swiper-slide .text{*zoom:1;} /* 针对IE7 hack，触发IE7的haslayout，以清除浮动 */
.swiper-service .swiper-slide .text:before,.swiper-service .swiper-slide .text:after{display:table;content:"";line-height:0;}
.swiper-service .swiper-slide .text:after{clear:both;}
.swiper-service .swiper-slide .text .lf{width: 60%;}
.swiper-service .swiper-slide .text>a{position: absolute;top: 0.75rem;right: 0.5rem;display: block;width: 4.0rem;height: 1.2rem;line-height: 1.2rem;text-align: center;font-size: 0.4rem;border-radius: 4px;border:1px solid #909090;color: #000;}
.swiper-service .swiper-slide .text>a:hover{background: #0e8cfd;color: #fff;text-decoration: none;border: 1px solid #0e8cfd;}
@media screen and (max-width: 1000px){
  .swiper-index .swiper-slide .text{ top: 20%; }
  .swiper-index .swiper-slide .text .label{ width: 2.0rem; height: 2.0rem; margin: 0.5rem 0; line-height: 2.0rem; font-size: 0.75rem; }
  .swiper-index .swiper-slide .text h2{ font-size: 0.75rem; }
  .process .item .label{ width: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 0.5rem; }
  .page-container p {
    text-align: center;
    line-height: 0.7rem;
    margin-bottom: 1.125rem;
    font-size: 0.45rem;
    color: #666;
}
}
@media screen and (max-width: 768px){
  #panel{ overflow: hidden; }
  .slide_one4_container,.wrapper{ width: auto;}
  .slide_one4_container{ padding: 0.25rem 0.25rem 0.75rem; }
  .swiper-index .swiper-slide .text{ top: 20%; }
  .swiper-index .swiper-slide .text .label{ width: 1.25rem; height: 1.25rem; margin-bottom: 0.25rem; line-height: 1.25rem; font-size: 0.75rem; }
  .swiper-index .swiper-slide .text h2{ font-size: 0.6rem; }
  .swiperS .arrow-left, .swiperS .arrow-right{ width: 0.5rem; height: 0.875rem; line-height: 0.875rem; }
  .swiper .arrow-left{ left: -0.25rem; }
  .swiper .arrow-right {
    right: -0.25rem;
  }
  .swiper .arrow-left i,.swiper .arrow-right i{ font-size: 0.375rem;}
  .swiper-index .swiper-slide .icon-play{ margin-top: -0.5rem; font-size: 0.9rem; }






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

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

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

  40% {
    -webkit-transform: translateY(-0.75rem);
    transform: translateY(-0.75rem);
  }

  60% {
    -webkit-transform: translateY(-0.375rem);
    transform: translateY(-0.375rem);
  }
}

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

  40% {
    -webkit-transform: translateY(-0.75rem);
    -ms-transform: translateY(-0.75rem);
    transform: translateY(-0.75rem);
  }

  60% {
    -webkit-transform: translateY(-0.375rem);
    -ms-transform: translateY(-0.375rem);
    transform: translateY(-0.375rem);
  }
}

.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 shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

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

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

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

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

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

.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% {
    -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% {
    -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(-100px);
    transform: translateY(-100px);
  }

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

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

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

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

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

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

  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(200px);
    transform: translateY(200px);
  }

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

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

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

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

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

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

  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(-20px);
    transform: translateX(-20px);
  }

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

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

  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(20px);
    transform: translateX(20px);
  }

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

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

  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(20px);
    transform: translateY(20px);
  }

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

@keyframes fadeInUp {
  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);
  }
}

.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(20px);
    transform: translateY(20px);
  }
}

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

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

.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(-20px);
    transform: translateX(-20px);
  }
}

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

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

.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(20px);
    transform: translateX(20px);
  }
}

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

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

.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(-20px);
    transform: translateY(-20px);
  }
}

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

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

.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(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

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

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

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

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

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

  40% {
    -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-out;
    animation-timing-function: ease-out;
  }

  50% {
    -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-in;
    animation-timing-function: ease-in;
  }

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

  100% {
    -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-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 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);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  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);
    opacity: 1;
    -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;
  }

  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;
}
/*www.jq22.com*/