/* 5811.com.cn */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } .clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } .l,.col-l,.col_l,.col-c,.col_c{float:left; } .r,.col-r,.col_r,dt span,.ul-txt li span,.ul_txt li span{float:right; } .c{clear:both; } .n,em{font-weight:normal; font-style:normal; } .b{font-weight:bold; } .i{font-style:italic; } .fa{font-family:Arial; } .fg{font-family:Georgia; } .ft{font-family:Tahoma; } .fl{font-family:Lucida Console; } .fs{font-family:'宋体'; } .fw{font-family:'微软雅黑'; } .tc{text-align:center; } .tr{text-align:right; } .tl{text-align:left; } .tdu{text-decoration:underline; } .tdn,.tdn:hover,a.tdl:hover{text-decoration:none; } .fc0{color:#000000; } .fc3{color:#333333; } .fc6{color:#666666; } .fc9{color:#999999; } .fcr{color:red; } .fcw{color:white; } .fcb{color:blue; } .fcg{color:green; } .f0{font-size:0; } .f10{font-size:10px; } .f12{font-size:12px; } .f13{font-size:13px; } .f14{font-size:14px; } .f16{font-size:16px; } .f20{font-size:20px; } .f24{font-size:24px; } .vm{vertical-align:middle; } .vtb{vertical-align:text-bottom; } .vt{vertical-align:top; } .vn{vertical-align:-2px; } .vimg{margin-bottom:-3px; } .m0{margin:0; } .ml0{margin-left:0; } .ml5{margin-left:5px; } .ml10{margin-left:10px; } .ml20{margin-left:20px; } .mr0{margin-right:0; } .mr5{margin-right:5px; } .mr10{margin-right:10px; } .mr20{margin-right:20px; } .mt5{margin-top:5px; } .mt10{margin-top:10px; } .mt20{margin-top:20px; } .mb5{margin-bottom:5px; } .mb10{margin-bottom:10px; } .mb20{margin-bottom:20px; } .ml-1{margin-left:-1px; } .mt-1{margin-top:-1px; } .p1{padding:1px; } .pl5{padding-left:5px; } .p5{padding:5px; } .pt5{padding-top:5px; } .pr5{padding-right:5px; } .pb5{padding-bottom:5px; } .p10{padding:10px; } .pl10{padding-left:10px; } .pt10{padding-top:10px; } .pr10{padding-right:10px; } .pb10{padding-bottom:10px; } .p20{padding:20px; } .pl20{padding-left:20px; } .pt20{padding-top:20px; } .pr20{padding-right:20px; } .pb20{padding-bottom:20px; } .rel,.pr{position:relative; } .abs,.pa{position:absolute; } .dn{display:none; } .db{display:block; } .dib{-moz-inline-stack:inline-block; display:inline-block; } .di{display:inline; } .ovh{overflow:hidden; } .ovs{overflow:scroll; } .vh{visibility:hidden; } .vv{visibility:visible; } .lh14{line-height:14px; } .lh16{line-height:16px; } .lh18{line-height:18px; } .lh20{line-height:20px; } .lh22{line-height:22px; } .lh24{line-height:24px;} .fix{*zoom:1; } .fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden; } .z{_zoom:1; } .h1{height:1px; } .h5{height:5px; } .h10,.h{height:10px; } .h15{height:15px; } .h20{height:20px; } .h1,.h5,.h10,.h15,.h20,.h{font-size:0px; line-height:0; overflow:hidden; clear:both; } /* 公共 ----------------------------------------------------- */ body{font-family:"微软雅黑","Microsoft Yahei",'arial';font-size: 12px; width:100%;} *{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: transparent; -webkit-tap-highlight-color: transparent; outline: none;} img{max-width: 100%;} a{color:#000; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s;} a:hover{color:#BD070A;text-decoration: none;cursor: pointer;} h1,h2,h3,h4,h5{font-weight: normal;} .ds-bk{display: block;} .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } .txt-ct{ text-align: center; } .pt-re{position: relative;} /* 通用模块 -------------------------------------------------- */ .bg-green{background:#e9f4f4;} .bg-white{background:#ffffff;} .bg-gray{background:#f2f2f2;} .h50{height:50px;} /* 布局 */ .wp{width:1200px; margin:0 auto;} /******************************* -------[=主体盒子]------- ********************************/ .main-body{position: relative;z-index: 10; background:#fff; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } .main-body.on{ -webkit-transform: translateX(80%); -o-transform: translateX(80%); -moz-transform: translateX(80%); transform: translateX(80%); } /******************************* -------[=头部]------- ********************************/ #hd{position: fixed;left:0;top:0;z-index: 99;padding:25px 0 0 0;width: 100%; background:#424242;/*overflow: hidden;*/ -o-transition:.2s; -ms-transition:.2s; -moz-transition:.2s; -webkit-transition:.2s; transition:.2s;} #hd.ok{padding:10px 0;} /* logo */ .logo{float: left;margin:0 0 0 183px;position: relative;z-index: 100;} /* 主导航 */ .nav{float: right;padding-right: 56px;position: relative;z-index: 999;} .nav ul{/*overflow: hidden;*/} .nav li{float: left;margin-right: 30px;} .nav li a{display: block;font-size: 14px;color:#fff;/*导航栏非当前分类的颜色*/ height: 43px;line-height: 43px;overflow: hidden;} .nav li a:hover, .nav li.on a{color:#db2226;}/*导航栏当前分类的颜色*/ .nav ul li .m-child{width:350px; position:absolute; z-index:999; top:35px; left:150px; display:none; background:#b40027;/*background:rgba(250,250,250,0.2)*/;} .nav ul li:hover .m-child { display: block; } .nav .m-child li{width:80px; margin:0; padding:0; background:none; display:inline-block;float:left; } .nav .m-child li a{ width:80px; display:inline-block;height:30px; line-height:30px; text-align:left; background:none; margin:0; padding:0 10px; color:#fff; } .nav .m-child li a:hover{ color:#fff;background:#DF2326; text-decoration:none;} #bd{/*padding-top: 96px;*/} /******************************* -------[=内页ban]------- ********************************/ .g-ban{margin-bottom: 50px;height: 300px;background:#39424f;} .g-ban .wp{position: relative;} .g-ban .right{position: absolute;right:0;top:0;} .g-ban .icn{position: relative;z-index: 2; padding-top: 98px;} .g-ban h3{margin-bottom: 16px;font-size: 24px;color:#27df81;} /******************************* -------[=浮动按钮]------- ********************************/ #fx-right{position: fixed;right:5px;bottom:50px;z-index: 10;} #fx-right li{position: relative;width: 40px;height: 40px; border-bottom: 1px solid #fff;} #fx-right li.gotop{border-bottom: 0;} #fx-right li a{display: block;} #fx-right li img{display: block;width: 40px;height: 39px;} #fx-right li .box{position: absolute;bottom:0;right:0; margin-right: -185px;width: 180px; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s;} #fx-right li.on .box{margin-right:0;} #fx-right li .ico{ -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; } #fx-right li.on .ico{ margin-left: 50px; } #fx-right li .box h3{padding-left: 20px; height: 48px;line-height: 48px;color:#fff;font-size: 14px; background:#e7090b;} #fx-right li .box .close{position: absolute;right:21px;top:19px; width: 14px;height: 12px; background: url(../images/close.png) no-repeat center;} #fx-right dd{border-bottom: 1px solid #343434;} #fx-right dd a{display: block;height: 46px;line-height: 46px;background:#262626; border-left: 3px solid #262626;text-align: center;color:#aaa;} #fx-right dd a:hover{border-color:#e7090b;} #fx-right dd a em{display: inline-block;margin-right: 12px;width: 17px;height: 46px; vertical-align: middle;background: url(../images/qq.png) no-repeat center;} #fx-right dd a:hover em{background-image: url(../images/qq-hover.png);} #fx-right dd a p{font-size: 14px;} /******************************* -------[=公用图文列表]------- ********************************/ .ul-imgtxt{overflow: hidden;margin:22px 0 53px -8px;} .ul-imgtxt li{float: left;width: 33.3%;} .ul-imgtxt li a{position: relative;display: block;margin:8px 0 0 8px;} .ul-imgtxt li .img{overflow: hidden;} .ul-imgtxt li .img em{display: block;padding-top: 64%; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s;} .ul-imgtxt li .txt{position: absolute;left:0;top:0; padding:0 5px;width: 100%;height: 100%;text-align: center; background:rgba(0,0,0,.8); -o-transition:.8s; -ms-transition:.8s; -moz-transition:.8s; -webkit-transition:.8s; transition:.8s; opacity: 0;} .ul-imgtxt li a:hover .txt{opacity: 1;} .ul-imgtxt li .table{display:table;width: 100%;height: 100%;} .ul-imgtxt li .table-cell{display: table-cell;vertical-align: middle;} .ul-imgtxt li .txt h3{margin-bottom: 5px;height: 31px;line-height: 31px;overflow: hidden; font-size: 26px;color:#faeb03; -webkit-animation-duration: .3s; animation-duration: .3s;} .ul-imgtxt li .txt p{color:#d7d7d7;height: 16px;line-height: 16px;overflow: hidden; -webkit-animation-duration: .6s; animation-duration: .6s; } .ul-imgtxt li a:hover .txt h3, .ul-imgtxt li a:hover .txt p{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .ul-imgtxt li:hover .img em{ -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); transform-origin: 50% 50%; } /******************************* -------[=公用标题链接]------- ********************************/ .g-tit{padding-top:20px;overflow: hidden;} .g-tit .more{display: block;float: right;margin-top: 8px;width: 89px;height: 25px; /*border-radius: 16px;border:1px solid #d2d2d2;*/} .g-tit .more em{display: block;height: 100%; background: url(../images/m-more.png) no-repeat center; -webkit-transform: translateX(6px); -o-transform: translateX(6px); -moz-transform: translateX(6px); transform: translateX(6px); -o-transition:.6s; -ms-transition:.6s; -moz-transition:.6s; -webkit-transition:.6s; transition:.6s;} .g-tit .more:hover{border-color:#ccc;background:#ccc;border-radius: 16px;border:1px solid #d2d2d2;} .g-tit .more:hover em{background-image: url(../images/more-hover.png);} .g-tit h3{font-size: 26px;color:#000;height: 35px;line-height: 35px;overflow: hidden;} .g-tit p{margin:5px 0 18px; height: 21px;line-height: 21px;overflow: hidden;color:#c1c1c1;} .g-tit .link a{display: inline-block;margin-right:3px;padding:0 16px; min-width: 66px;height: 30px;line-height: 30px;color:#000; border-radius: 16px;text-align: center;} .g-tit .link a:hover, .g-tit .link a.on{background:#BB090C;color:#fff;} /******************************* -------[=底部]------- ********************************/ #fd{background:#1c1a1b;font-size: 14px;color:#717171;overflow: hidden;} #fd .g-tit{text-align: center;} #fd .g-tit h3{color:#fff;} .fd-con{margin-top: 29px;color:#717171; margin-bottom:50px;} .fd-left{float: left;overflow: hidden;} .fd-left .con{float: left;width: 640px;padding-right: 10px;} .fd-left h4{margin-bottom: 6px;font-size: 16px;color:#fff;} .fd-left p{line-height: 25px;} .fd-left p a { color:#717171; text-decoration: none;} .fd-left img{/*width: 127px;height: 127px;display: block;margin:33px 0 0;*/} .fd-left .link{padding:40px 0;clear: both;} .fd-left .link, .fd-left .link a{color:#737373;} .fd-left .link a:hover{text-decoration: underline;} .fd-form{float: right;width: 360px;} .fd-form li{padding:0 17px; overflow: hidden;color:#a9a9a9;font-size: 16px;line-height: 50px; border-bottom: 1px solid #c9ced5;} /*.fd-form li em{float: left;width: 50px;}*/ .fd-form li .txt{padding-right:5px;width: 100%;height: 50px;line-height: 50px\9;border:0; font-family:"微软雅黑","Microsoft Yahei";color:#a9a9a9;} .fd-form li .txt::-webkit-input-placeholder { font-family:"微软雅黑","Microsoft Yahei"; color:#a9a9a9; } .fd-form li .txt::-moz-placeholder { font-family:"微软雅黑","Microsoft Yahei"; color:#a9a9a9; } .fd-form li .txt::-ms-input-placeholder { font-family:"微软雅黑","Microsoft Yahei"; color:#a9a9a9; } .fd-form li textarea{display: block;width: 100%;height: 195px;border:0;color:#717171; font-family:"微软雅黑","Microsoft Yahei"; padding:20px 0;color:#a9a9a9;resize: none; } .fd-form button{margin-top: 15px;padding:0;width: 100%; height: 38px;background:#03d522;color:#fff;border:0; font-family:"微软雅黑","Microsoft Yahei";cursor: pointer;} .copy{height: 44px;line-height: 44px;font-size: 14px;color:#7f7f7f; background:#000;text-align: center;} .copy a{color:#7f7f7f;} .copy a:hover{color:#ffffff;} /*浮动板块 hover微信二维码*/ .float_ewm{ display: block; width: 0px; height: 102px; position: absolute; /*left: -109px;*/ right: 39px; top: -31px; overflow: hidden; } .float_ewm>div{ position: relative; width: 112px; padding-right:10px ; } .float_ewm img{ display: block; width: 100% !important; height: 100% !important; border: 1px solid #666; } .float_ewm span{ position: absolute; left: 102px; top: 44px; display: block; width: 0; height: 0; border-width:12px 6px; border-color: transparent; border-left-color:black ; border-style: solid; } /******************************* -------[=移动端底部]------- ********************************/ .m-footer{position: fixed;left:0;bottom:0;z-index: 11;width: 100%; padding:5px 0;display: none; background:#040404;text-align: center;} .m-footer a, .m-footer img{vertical-align: bottom;height: 35px;} .m-footer .a1{position: absolute;left:10px;top:5px;} .m-footer .a3{position: absolute;right:10px;top:5px;} /******************************* -------[=移动端头部]------- ********************************/ .m-menu{position: fixed;left:0;top:0;padding:55px 0 45px; width: 81%;height: 100%;overflow: auto; background:#252a31;text-align: center;} .m-menu a{display: block;height: 55px;line-height: 55px;text-align: center; font-size: 14px;color:#b7b7b7;border-top: 1px solid #2f343b; border-left: 3px solid #252a31;} .m-menu .on a{background:#181c22;border-left-color:#13df81;} /* 移动端按钮 */ .m-more{display: none;margin:20px 0;} .m-more img{display: block;margin:0 auto;} /******************************* -------[=首页]------- ********************************/ /*-----------------[首页第头部]--------------*/ .index #hd{/*background:rgba(0,0,0,.7);*/background: transparent;/*position: relative;*/} .index #hd.ok{background:transparent;} .index #hd .bg{/*background:rgba(0,0,0,.7);*/background: #212121;z-index: 99;max-height: 72px;} @media only screen and (max-width: 767px) { /*.index #hd .bg{}*/ } @media only screen and (max-width: 567px) { /*.index #hd .bg{}*/ } .index #hd.ok .bg{background:#212121;opacity: 0.8; filter:alpha(opacity=80);} .index #bd{padding-top: 0;} /*-----------------[banner]--------------*/ #banner{position: relative;} #banner .box{display: block;padding-top: 40%;} #banner .zz{position: absolute;left: 0;right: 0;top: 0;bottom: 0; /*background-color: rgba(0,0,0,.1);*/z-index: 10; } #banner .item{position: relative; z-index: 9; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center; background-repeat: no-repeat; } /* banner指示点 */ #banner .slick-dots{position: absolute;z-index:10;left:0;bottom:17px;width: 100%; text-align: center;} #banner .slick-dots li{display: inline-block;margin:0 3px;} #banner .slick-dots li button{width: 14px;height: 14px; font-size: 0;cursor: pointer;border:0;border-radius: 50%; background:#fff;} #banner .slick-dots li.slick-active button{background:#535359;} /* banner视频 */ #banner video{position: absolute;left:0;top:0;width: 100%;min-height: 100%; z-index: 9;background-color: #212121; /*display: none;*/ } .banner_wp1{ min-height: 360px; background-repeat: no-repeat; background-position: center; background-size: auto; } .bg_img{display:block;} .bg_img_xsm{display: none;} @media only screen and (max-width:1199px){ .banner_wp1{ min-height: 350px; } } @media only screen and (max-width:767px){ .bg_img{display: none;} .bg_img_xsm{display: block;} .banner_wp1{ min-height: 300px; background-size: auto 100%; } } @media only screen and (max-width:640px){ .banner_wp1{ min-height: 260px; } } @media only screen and (max-width:480px){ .banner_wp1{ min-height: 220px; } } /*-----------------[首页第一模块]--------------*/ .index-m1 ul{overflow: hidden;} .index-m1 li{float: left;padding:72px 37px; width: 23.3%;text-align: center;} .index-m1 li .img{margin:0 auto;width: 134px;height: 134px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover !important; -o-background-size: cover !important; -moz-background-size: cover !important; background-size: cover !important;} .index-m1 li h3{margin:22px 0 8px; height: 24px;line-height: 24px;overflow: hidden; font-size: 18px;color:#443f3c;} .index-m1 li p{height: 44px;line-height: 22px;font-size: 14px; color:#8a8a8a;overflow: hidden;} /*-----------------[首页第二模块]--------------*/ .index-m2{width: 100%;overflow: hidden;padding-top: 33px;background:#1f1f23;} .index-m2 .g-tit h3{color:#fff;} .index-m2 .img{float: right;margin-right: 32px;} .index-m2 .img img{/*width: 422px;height: 444px;*/} .index-m2 .txt{padding-top: 7px;width: 550px;} .index-m2 .con p{margin:16px 0;font-size: 13px;line-height: 26px;color:#e7e7e7; height: 124px;overflow: hidden;} .index-m2 .con img{margin-right: 6px;/*width: 165px;*//*max-width: 100%;width: auto; height: 108px;*/} .index-m2 .gywm-wp .con img{max-width: 100%;width: auto;} /*-----------------[首页第三模块]--------------*/ .index-m3{overflow: hidden;} .ul-news{overflow: hidden;margin:19px 0 39px -3px;} .ul-news li{float: left;width: 50%;} .ul-news li a{display: block;overflow: hidden;margin:0 0 24px 3px; padding:7px;background:#fff;} .ul-news li .img{float: left;} .ul-news li .img img, .ul-news li .img{width: 200px;height: 150px;} .ul-news li .img img{display: block;} .ul-news li .txt{padding-left: 230px;} .ul-news li .bt{height: 44px;line-height: 44px;overflow: hidden; font-size: 20px;color:#8a8a8a;font-family: "arial";} .ul-news li .bt .year{display: inline-block;color:#bdbdbd;} .ul-news li .bt .year:before{content:'';display: inline-block;margin:0 14px 0 9px; width: 1px;height:44px;background:#c8c8c8;vertical-align: middle;} .ul-news li h3{margin-bottom: 5px;padding:19px 0 13px;border-bottom: 1px solid #efefef;} .ul-news li h3 em{display: block;height: 21px;line-height: 21px;overflow: hidden; font-size: 16px;color:#464646;} .ul-news li p{font-size: 14px;line-height: 22px;height: 44px;overflow: hidden; color:#777;} .ul-news li a:hover p, .ul-news li a:hover h3 em, .ul-news li a:hover .bt, .ul-news li a:hover .bt .year{color:#CF1619;} /*-----------------[首页底部切换]--------------*/ .index-fd{padding:20px 0;background:#fff;} .index-fd .slide{position: relative;margin:0 auto;width: 1080px;} .index-fd .slide .item{display: inline-block;margin:0 17px;} .index-fd .slick-arrow{position: absolute;top:50%;margin-top: -18px;padding:0; width: 36px;height: 36px;cursor: pointer;border:0;font-size: 0;border-radius: 50%; -webkit-background-size: cover !important; -o-background-size: cover !important; -moz-background-size: cover !important; background-size: cover !important;} .index-fd .slick-prev{left:-58px; background:#fff url(../images/prev.png) no-repeat center;} .index-fd .slick-prev:hover{background:#13df81 url(../images/prev-hover.png) no-repeat center;} .index-fd .slick-next{right:-58px; background:#fff url(../images/next.png) no-repeat center;} .index-fd .slick-next:hover{background:#13df81 url(../images/next-hover.png) no-repeat center;} /******************************* -------[=详情页]------- ********************************/ .inside-xq{padding:34px 0 100px;overflow: hidden;} .inside-xq .col-l{width: 67%;} .inside-xq .col-r{width: 28%;} .inside-xq .col-l img{display: block;margin:0 auto;} .inside-xq .col-r .link{margin-top: 30px;padding: 40px 0 17px;border-top: 1px dotted #c8c8c8;} .inside-xq .col-r .link a{display: inline-block;margin:0 0 5px 5px;padding:0 10px; height: 30px;line-height: 30px;background:#f3f3f3;color:#999;} .inside-xq .col-r .link a:hover{background:#BF0C0F;color:#fff;} /* 列表 */ .ul-pic{overflow: hidden;margin-left: -5px;} .ul-pic li{float: left;width: 50%;} .ul-pic li .box{margin-left: 5px;} .ul-pic li .img{ -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover;} .ul-pic li .img a{display: block;padding-top: 64%;} .ul-pic li:hover .img{opacity: .9;} .ul-pic li .txt{padding:10px 0;font-size: 12px;} .ul-pic li h3{margin-bottom: 3px;} .ul-pic li p{color:#999;} .ul-pic li h3, .ul-pic li p{height: 32px;line-height: 150%;; } /******************************* -------[关于灵创]------- ********************************/ .show-767{ display: none; } .gywm-wp{ padding: 40px 0 126px 0; } .single-img{ padding-top: 77px; background-color: #212121; } .single-img img{ display: block; border: none; } #banner .single-img img{width:100%;} .index-m2 .img-left{ width: 40%; float: left; margin: 0 0 0 50px; } .index-m2 .img-left img{ width: auto; height: auto; } .index-m2 .text-right{ width: 50%; float: right; margin-top: 20px; margin-right: 10px; } .gywm-wp .g-tit h3{ font-size: 16px; } .gywm-wp .con p{ height: auto; color: #808080; font-size: 13px; line-height: 26px; } @media only screen and (max-width: 1199px) { .index-m2 .img.img-left{ width: 40%; } .index-m2 .img.img-left img{ width: auto; } .gywm-wp{ padding: 20px 0 20px 0; } } @media only screen and (max-width: 959px) { .index-m2 .txt.text-right{ width: 50%; } .gywm-wp{ padding: 20px 0 0px 0; } } @media only screen and (max-width: 767px) { .show-767{ display: block; } .gywm-wp{ padding:0; width: 100% !important; } .single-img{ padding-top: 0px; } .index-m2 .img.img-left{ width: 100%; background-color: #202020; margin-top: 0; } .index-m2 .img-left img{ width: 280px !important; } .index-m2 .txt.text-right{ width: 100%; margin-right: 0; } .index-m2 .text-right .con{ padding: 0 5%; } } /******************************* -------[餐饮VI设计]------- ********************************/ .g-tit-2{ padding-top: 40px; } .cysj-c1{ background: #222; } .c1-title{ padding-top: 50px; text-align: center; } .c1-title h3{ font-size: 26px; color: #666666; } .c1-title p{ color: #ccc; } .cysj-c1 ul { padding: 52px 0; } .cysj-c1 li{ display: block; float: left; width: 33.3%; padding:0px 15px; text-align: center; overflow: hidden; } .cysj-c1 li:nth-child(2){border-left: 1px solid #4b4b4b;border-right: 1px solid #4b4b4b;} .cysj-c1 li img{ display: block; } .cysj-c1 .txt{ padding: 10px; } .cysj-c1 .img a{ display: block; } .cysj-c1 .img div{ display: none; background-repeat:no-repeat ; background-position: center; background-size:auto 100%; overflow: hidden; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;； } .cysj-c1 .txt h3{ /*margin: 12px 0 8px;*/ margin: 5px 0 15px; line-height:1.6; overflow: hidden; font-size: 18px; } .cysj-c1 .txt h3 a{ color: #fff; } .cysj-c1 .txt h3 a:hover{ color: #ccc; } .cysj-c1 .txt strong{ display: block; color: #666; font-weight: 400; margin-bottom: 10px; font-size: 0; } .cysj-c1 .txt strong span{ display: block; width: 10%; height: 1px;; background: #ccc; margin: 0 auto; } .cysj-c1 .txt p{ display: block; height: 66px; line-height: 22px; color: #8a8a8a; overflow: hidden; } /**/ .bg{ width: 100%; /*max-height: 72px;*/ height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .bg-cysj{ background: #333; } .bg-c222{ background: #222; } .c1-title-2{ /*background: #222;*/ padding-bottom: 30px; } .z-i1{ position: relative; z-index: 1; } @media only screen and (min-width: 769px) { .cysj-c1 .txt:hover{ /*background: #e7090b;*/ background: #333; color: #fff; } .cysj-c1 .txt:hover h3,.cysj-c1 .txt:hover p{ color: inherit; } } @media only screen and (max-width: 769px) { .cysj-c1 li:nth-child(2){border-left: none;border-right: none;} .cysj-c1 .wp{ /*padding-bottom: 30px;*/ } .c1-title { padding: 40px 0 20px; text-align: center; } .cysj-c1 .txt h3{ margin: 10px 0 0; } .cysj-c1 .txt strong{ font-size: 12px; margin: 5px 0; } .cysj-c1 ul { padding: 0px 0; } .cysj-c1 li{ width: 100%; padding:30px 10px; border-bottom: 1px dashed #666; } .cysj-c1 li:nth-child(1){ border-top: 1px dashed #666; } .cysj-c1 .img{ width: 30%; float: left; } .cysj-c1 .min-right .img{ float: right; } .cysj-c1 .img img{ /*border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;；*/ display: none; } .cysj-c1 .img div{ display: block; } .cysj-c1 .txt{ float: left; max-width: 70%; text-align: left; padding: 0 0 0 5%; } .cysj-c1 .min-right .txt{ padding: 0 3%; } .cysj-c1 .txt strong span{ display: none; } } @media only screen and (max-width: 479px) { .c1-title{ padding: 30px 0 20px; } .c1-title h3{ font-size: 16px; } .cysj-c1 .txt h3{ font-size: 16px; margin: 0; } .cysj-c1 .txt strong{ /*font-size: 12px;*/ margin: 5px 0; } .cysj-c1 .txt p{ height: 88px; } } @media only screen and (max-width: 379px) { .cysj-c1 .txt strong{ font-size: 12px; margin:0; } .cysj-c1 .txt p{ } .cysj-c1 .img img{ margin-top: 5%; } } /*Common For Max 960*/ @media only screen and (max-width: 1199px) { .wp {width:98%;} /******************************* -------[=头部]------- ********************************/ .logo{margin-left: 20px;} .nav{padding-right: 0;} .nav li{margin-right: 20px;} /******************************* -------[=首页]------- ********************************/ .index-m1 li{padding:30px 15px;} .index-m1 li p{font-size: 12px;} .index-m2{padding: 0 0 20px;} .index-m2 .img{margin: 40px 32px 0 0;} .index-m2 .img img, .index-m2 .img{width: 280px;height: auto;} .index-m2 .con p{margin:0 0 10px;} .ul-news li .img img, .ul-news li .img{width: 150px;height: 112px;} .ul-news li .txt{padding-left: 160px;} .ul-news li .bt{height: 22px;line-height: 22px;} .ul-news li .bt .year:before{height: 22px;} .ul-news li h3{padding:8px 0;} .ul-news li p{font-size: 12px;} .ul-news li a{margin-bottom: 3px;} .index-fd .slide{margin:0 50px;width: auto;} .index-fd .slick-prev{left:-50px;} .index-fd .slick-next{right:-50px;} .index-fd .slide .item img{margin:0 auto;} /******************************* -------[=底部]------- ********************************/ .fd-left{float: none;text-align: center;} .fd-left p a { color:#fff; text-decoration: underline;} .fd-left img{margin:20px auto 0;} .fd-form{float: none;clear: both;margin:0 auto 20px;} .fd-left .con{float: none;display: inline-block;} .fd-left .link{padding:20px 0;} .fd-form li textarea{height: 75px;} /******************************* -------[=详情页]------- ********************************/ } /*Common For Max 768*/ @media only screen and (max-width: 959px) { /******************************* -------[=首页]------- ********************************/ .ul-imgtxt li .txt h3{font-size: 16px;} .index-m2 .img{margin-right: 0;} .index-m2 .txt{padding-bottom: 20px;width: 450px;} .index-m2 .con p{font-size: 12px;} .index-m2 .con img{/*width: 130px;*/height: 85px;} .ul-news li h3 em{font-size: 12px;} .inside-xq .col-l{width: 60%;} .inside-xq .col-r{width: 37%;} } /*Common For Max 480*/ @media only screen and (max-width: 767px) { /******************************* -------[=头部]------- ********************************/ .nav{display: none;} #hd{position: static;padding:10px 0;text-align: center;} .index #hd {background: rgba(0,0,0,1);position:relative} .logo{float: none;display: inline-block;} .slick-slider{ border-top: none !important; } /******************************* -------[=首页]------- ********************************/ .index-m1{padding:10px 0 5px;} .index-m1 li{margin-bottom: 5px;padding:0;width: 100%;border:1px solid #dfdfdf;} .index-m1 li .img{float: left;width: 78px;height: 78px;border-radius: 0;} .index-m1 li .txt{padding-left:87px;text-align: left;} .index-m1 li h3{margin:10px 0 5px;} .index-m1 li p{line-height: 1.2;height: 30px;} .g-tit h3{font-size: 20px;} .g-tit .link a{margin:0 2px 2px 0;padding:0 5px;height: 25px;line-height: 25px;} .ul-imgtxt{margin: 5px 0 15px -4px;} .ul-imgtxt li{width: 50%;} .ul-imgtxt li a{margin:4px 0 0 4px;} .m-more{display: block;} .index-m2{background:none;} .index-m2 .img{float: none;margin-top: 10px;padding:15px 0; width: 100%;background:#3a424f;text-align: center;} .index-m2 .g-tit h3{color:#000;} .index-m2 .con{padding:0 10px;} .index-m2 .con p{color:#666;} .index-m2 .txt{text-align: center;width: 100%;} .index-m2 .con p{line-height: 20px;height: auto;} .g-tit{text-align: center;} .ul-news{margin-top: 0;} .ul-news li{width: 100%;} .g-tit .more {display: none;} .index-fd{padding:10px 0;} .fd-form, .fd-left img, .fd-left .link, .copy, #fx-right{display: none;} .fd-left .con{display: block;margin-bottom: 15px;text-align: left;} .fd-con{margin-top: 0;} .main-body{padding-bottom: 45px;} .m-footer{display: block;} #bd{padding-top: 0;} .g-ban{height: auto;margin-bottom: 0;} .g-ban {text-align: center; display:none;} .g-ban .right{position: static;} .g-ban .icn{position: absolute;left:0;top:5%;width: 100%;text-align: center;padding-top: 0;} .g-ban .icn img{display: none;} .inside-xq .col-l, .inside-xq .col-r{width: 100%;} .inside-xq .col-r .link{display: none;} .inside-xq .col-r .con{padding:20px 0;} .inside-xq{padding-top: 20px;} .g-ban .right{display: none;} .g-ban .icn{position: static;height:150px;line-height:150px;overflow: hidden;} .g-ban h3{margin-bottom: 0;} } /*Common For Max 320*/ @media only screen and (max-width: 479px) { /******************************* -------[=头部]------- ********************************/ .logo img{height: 30px;} #banner .slick-dots{bottom:5px;} #banner .slick-dots li button{width: 8px;height: 8px;} /******************************* -------[=首页]------- ********************************/ .index-m1 li h3{font-size: 16px;} .g-tit {text-align: center;} .g-tit h3{height: 25px;line-height: 25px;} .g-tit p{margin-bottom: 0;} /*.g-tit .link{display: none;}*/ .ul-news li .img img, .ul-news li .img{width: 117px;height: 87px;} .ul-news li .txt{padding-left: 125px;} .ul-news li h3{padding:0;} .ul-news li p{line-height: 18px;height: 38px;} .ul-news li .bt{font-size: 14px;} .index-m2 .con img{margin:0;/*width: 90px;*/height: auto;} .index-fd .slick-arrow{margin-top: -10px;width: 25px;height: 25px;} .fd-con{padding:20px 0;} .index-fd .slide{margin:0;} } @charset "UTF-8";/*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden */.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } .animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounce { 0%,100%,20%,53%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060); animation-timing-function: cubic-bezier(0.755,.050,.855,.060); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060); animation-timing-function: cubic-bezier(0.755,.050,.855,.060); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } @keyframes bounce { 0%,100%,20%,53%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060); animation-timing-function: cubic-bezier(0.755,.050,.855,.060); -webkit-transform: translate3d(0,-30px,0); transform: translate3d(0,-30px,0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755,.050,.855,.060); animation-timing-function: cubic-bezier(0.755,.050,.855,.060); -webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0) } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%,100%,50% { opacity: 1 } 25%,75% { opacity: 0 } } @keyframes flash { 0%,100%,50% { opacity: 1 } 25%,75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @keyframes pulse { 0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 50% { -webkit-transform: scale3d(1.05,1.05,1.05); transform: scale3d(1.05,1.05,1.05) } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(0.75,1.25,1); transform: scale3d(0.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) } 40% { -webkit-transform: scale3d(0.75,1.25,1); transform: scale3d(0.75,1.25,1) } 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) } 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) } 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%,100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } @keyframes shake { 0%,100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 20%,40%,60%,80% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg) } 40% { -webkit-transform: rotate3d(0,0,1,-10deg); transform: rotate3d(0,0,1,-10deg) } 60% { -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,5deg) } 80% { -webkit-transform: rotate3d(0,0,1,-5deg); transform: rotate3d(0,0,1,-5deg) } 100% { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg) } } @keyframes swing { 20% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg) } 40% { -webkit-transform: rotate3d(0,0,1,-10deg); transform: rotate3d(0,0,1,-10deg) } 60% { -webkit-transform: rotate3d(0,0,1,5deg); transform: rotate3d(0,0,1,5deg) } 80% { -webkit-transform: rotate3d(0,0,1,-5deg); transform: rotate3d(0,0,1,-5deg) } 100% { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg) } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @keyframes tada { 0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } 10%,20% { -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg); transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg) } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg) } 40%,60%,80% { -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg); transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg) } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg); transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg); transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg); transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg); transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg); transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg) } 100% { -webkit-transform: none; transform: none } } @keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg); transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg) } 30% { -webkit-transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg); transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg) } 45% { -webkit-transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg); transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg) } 60% { -webkit-transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg); transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg) } 75% { -webkit-transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg); transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg) } 100% { -webkit-transform: none; transform: none } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes jello { 0%,100%,11.1% { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } @keyframes jello { 0%,100%,11.1% { -webkit-transform: none; transform: none } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { -webkit-transform: skewX(-.78125deg) skewY(-.78125deg); transform: skewX(-.78125deg) skewY(-.78125deg) } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg) } 88.8% { -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg); transform: skewX(-.1953125deg) skewY(-.1953125deg) } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center } @-webkit-keyframes bounceIn { 0%,100%,20%,40%,60%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } 100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } @keyframes bounceIn { 0%,100%,20%,40%,60%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03) } 80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97) } 100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,-3000px,0); transform: translate3d(0,-3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,25px,0); transform: translate3d(0,25px,0) } 75% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 90% { -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0) } 100% { -webkit-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px,0,0); transform: translate3d(-3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(25px,0,0); transform: translate3d(25px,0,0) } 75% { -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0) } 90% { -webkit-transform: translate3d(5px,0,0); transform: translate3d(5px,0,0) } 100% { -webkit-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInRight { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px,0,0); transform: translate3d(3000px,0,0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px,0,0); transform: translate3d(-25px,0,0) } 75% { -webkit-transform: translate3d(10px,0,0); transform: translate3d(10px,0,0) } 90% { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0) } 100% { -webkit-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes bounceInUp { 0%,100%,60%,75%,90% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1) } 0% { opacity: 0; -webkit-transform: translate3d(0,3000px,0); transform: translate3d(0,3000px,0) } 60% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 75% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 90% { -webkit-transform: translate3d(0,-5px,0); transform: translate3d(0,-5px,0) } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 100% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9) } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1) } 100% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 100% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } 100% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } 100% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px,0,0); transform: translate3d(20px,0,0) } 100% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } 100% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0) } 100% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } 100% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0,-10px,0); transform: translate3d(0,-10px,0) } 40%,45% { opacity: 1; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0) } 100% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .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: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .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: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .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: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .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 } 100% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes fadeOutDown { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,2000px,0); transform: translate3d(0,2000px,0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-2000px,0,0); transform: translate3d(-2000px,0,0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes fadeOutRight { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(2000px,0,0); transform: translate3d(2000px,0,0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes fadeOutUp { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0,-2000px,0); transform: translate3d(0,-2000px,0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg); transform: perspective(400px) rotate3d(0,1,0,-360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-360deg); transform: perspective(400px) rotate3d(0,1,0,-360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); transform: perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95,.95,.95); transform: perspective(400px) scale3d(.95,.95,.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg); transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg); transform: perspective(400px) rotate3d(1,0,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1,0,0,10deg); transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-5deg); transform: perspective(400px) rotate3d(1,0,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-20deg); transform: perspective(400px) rotate3d(0,1,0,-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0,1,0,10deg); transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-5deg); transform: perspective(400px) rotate3d(0,1,0,-5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1,0,0,-20deg); transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(1,0,0,90deg); transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg); transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0,1,0,-15deg); transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(0,1,0,90deg); transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } 100% { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%,0,0) skewX(-30deg); transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } 100% { -webkit-transform: none; transform: none; 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% { opacity: 1 } 100% { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } 100% { -webkit-transform: translate3d(100%,0,0) skewX(30deg); transform: translate3d(100%,0,0) 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; transform-origin: center; -webkit-transform: rotate3d(0,0,1,-200deg); transform: rotate3d(0,0,1,-200deg); opacity: 0 } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,-200deg); transform: rotate3d(0,0,1,-200deg); opacity: 0 } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; 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: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; 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: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; 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: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; 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: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,200deg); transform: rotate3d(0,0,1,200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0,0,1,200deg); transform: rotate3d(0,0,1,200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,45deg); transform: rotate3d(0,0,1,45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,90deg); transform: rotate3d(0,0,1,90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1,90deg); transform: rotate3d(0,0,1,90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 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: rotate3d(0,0,1,80deg); transform: rotate3d(0,0,1,80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate3d(0,0,1,60deg); transform: rotate3d(0,0,1,60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } 100% { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } @keyframes hinge { 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: rotate3d(0,0,1,80deg); transform: rotate3d(0,0,1,80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%,80% { -webkit-transform: rotate3d(0,0,1,60deg); transform: rotate3d(0,0,1,60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } 100% { -webkit-transform: translate3d(0,700px,0); transform: translate3d(0,700px,0); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg) } 100% { opacity: 1; -webkit-transform: none; transform: none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg) } } @keyframes rollOut { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(10px,0,0); transform: scale3d(.475,.475,.475) translate3d(10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 60% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 100% { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3) } 100% { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 100% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 100% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(42px,0,0); transform: scale3d(.475,.475,.475) translate3d(42px,0,0) } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px,0,0); transform: scale(.1) translate3d(-2000px,0,0); -webkit-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); transform: scale3d(.475,.475,.475) translate3d(-42px,0,0) } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px,0,0); transform: scale(.1) translate3d(2000px,0,0); -webkit-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 100% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475,.475,.475) translate3d(0,60px,0); transform: scale3d(.475,.475,.475) translate3d(0,60px,0); -webkit-animation-timing-function: cubic-bezier(0.55,.055,.675,.19); animation-timing-function: cubic-bezier(0.55,.055,.675,.19) } 100% { opacity: 0; -webkit-transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175,.885,.32,1); animation-timing-function: cubic-bezier(0.175,.885,.32,1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); visibility: visible } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0) } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } 100% { visibility: hidden; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; }