@charset "utf-8";
/* CSS Document */
body, h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, ul, ol, pre, form, fieldset, legend, button, input, textarea, th, td, hr, caption, menu { margin: 0; padding: 0; }
body, button, input, optgroup, option, select, textarea { font-family: "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; line-height: 100%; }
button, input, select, textarea { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: 'Courier New', Courier, monospace; }
small { font-size: 12px; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
ul, ol, li, menu { list-style: none; }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
html { overflow-x: hidden; overflow-y: scroll; }
legend { color: #000 }
hr { border: 0; height: 1px }
abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help }
q:before, q:after { content: '' }
:focus { outline: 0 }
.clearfix:after, .clearfix:before { content: ""; display: table; height: 0; clear: both; visibility: hidden }
.clearfix { *zoom:1
}
/* CSS 内容开始 */
html {  min-width:1200px;!important max-width:1200px;!important width:1200px;!important}
body { padding-top:150px;}
.warp { }
.w1200 { width: 1200px; margin: 0 auto; }
/* ------------ top ----------------- */
.top { height: 50px; background: #202020; width: 100%; clear: both; position:fixed; top:0px; z-index:9999; }
.top-c { width: 1200px; margin: 0 auto; position: relative; }
.top-c .reg-login { position: absolute; left: 3px; top: 10px;height: 30px; line-height: 30px; color: #999; font-size:14px; }
.top-c .reg-login span { display: inline-block; height: 30px; line-height: 30px; color: #4d4d4d; padding-left: 30px; font-size: 14px; margin-right: 8px; }
.top-c .reg-login span.reg { background: url(../images/login_ico.png) no-repeat scroll 0px center; }
.top-c .reg-login span.tel { background: url(../images/phone_ico.png) no-repeat scroll 5px center; }
.top-c .reg-login span a { display: inline-block; color: #4d4d4d; letter-spacing: 1px; }
.top-c .reg-login span a:hover { color: #00b465; }
.top-c .search-bar { position: absolute; right: 3px; top: 10px; width: 220px; height: 28px; background: url(../images/search-bar_bg.png) no-repeat scroll left center; }
.top-c .search-bar form { margin: 0 14px; }
.top-c .search-bar input { height: 28px; line-height: 28px; border: none; width: 160px; overflow: hidden; background: none; }
.top-c .search-bar input.hover { color: #fff; }
.top-c .search-bar input.after { color: #ddd; }
.top-c .search-bar button { height: 28px; width: 28px; display: inline-block; text-indent: -9999px; border: none; cursor: pointer; background: url(../images/search_btn.png) no-repeat scroll center center; float: right; }
/* ------------ header ----------------- */
.header { width: 100%; clear: both; position:fixed; top:50px; z-index:9999; height:100px; padding-bottom:5px; background:#ffffff;transition: all 0.5s 0s ease-in-out;box-shadow: 0 4px 3px rgba(0, 0, 0, .2);  }
.header-c { width: 1200px; height: 100px; margin: 0 auto; position: relative; }
.header-c .logo { position: absolute; left: 3px; top: 20px; width: 170px; }
.header-c .logo a { display: block; text-indent: -9999px; height: 64px; background: url(../images/header_logo.png) no-repeat scroll left top; }
/*.header-c .nav { position: absolute; bottom: 16px; right: 30px; }
.header-c .nav li { display: inline; float: left; padding: 0 4px; position:relative;height:38px; line-height:38px; width:96px; }
.header-c .nav li a { display: block; font-size: 15px; font-weight: bold; letter-spacing: 2px; color: #555;font-weight:normal; text-align:center;  }
.header-c .nav li.on a { color: #fff; background:url(../images/nav_li_bg.png) no-repeat scroll center center;}
.header-c .nav li a:hover { color: #fff; background:url(../images/nav_li_bg.png) no-repeat scroll center center; text-decoration:none; }
.header-c .nav ul.sub-nav{ position: absolute; width:86px; background:#00b465; z-index:9999; left:9px; top:37px; padding-bottom:5px;  display:none;}
.header-c .nav .sub-nav li{ display:block; height:30px; line-height:30x; float:none;width:86px; padding:0;}
.header-c .nav .sub-nav li a{ color:#fff; font-weight:normal; letter-spacing:1px; font-size:13px;}
.header-c .nav .sub-nav li a:hover{ text-decoration:underline; background:none; text-decoration:underline;}*/
.header-c .nav { position: absolute; bottom: 16px; right: 30px; }
.header-c .nav li { display: inline; float: left; padding: 0 14px; position:relative;height:34px; line-height:34px; z-index:99999; }
.header-c .nav li a { display: block; font-size: 15px; font-weight: bold; letter-spacing: 2px; color: #555;font-weight:normal;  }
.header-c .nav li.on a { color: #00b465;font-weight: bold; }
.header-c .nav li a:hover { color: #00b465; text-decoration: none;font-weight: bold; }
.header-c .nav ul.sub-nav{ position: absolute; width:86px; background:#00b465; z-index:9999; left:5px; top:34px; padding-bottom:5px;  display:none;}
.header-c .nav .sub-nav li{ display:block; height:30px; line-height:30x; float:none;}
.header-c .nav .sub-nav li a{ color:#fff; font-weight:normal; letter-spacing:1px; font-size:13px;}
.header-c .nav .sub-nav li a:hover{ text-decoration:underline;}

/* ------------ banner ----------------- */
.banner { height: 634px; overflow: hidden; position: relative; clear: both;z-index:999; }
.banner-s { height: 390px; overflow: hidden; position: relative; clear: both; }
.banner-pa { position: absolute; width: 1920px; left: 50%; margin-left: -960px; }
.banner .bx-pager { position: absolute; z-index: 999; top: 600px; left: 940px; }
.bx-pager { text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #fff; }
.banner a.bx-prev { position: absolute; left: 1400px; top: 560px; z-index: 999; width: 64px; height: 64px; background: url(../images/arr_l.png) no-repeat scroll 0px 0px; text-indent: -9999px; }
.banner a.bx-prev:hover { background: url(../images/arr_l_hover.png) no-repeat scroll 0px 0px; }
.banner .bx-next { position: absolute; left: 1464px; top: 560px; z-index: 999; width: 64px; height: 64px; background: url(../images/arr_r.png) no-repeat scroll 0px 0px; text-indent: -9999px; }
.banner a.bx-next:hover { background: url(../images/arr_r_hover.png) no-repeat scroll 0px 0px; }
.bx-pager .bx-pager-item, .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1;
 *display: inline;
}
.bx-pager.bx-default-pager a { background: #fff; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.bx-pager.bx-default-pager a:hover, .bx-pager.bx-default-pager a.active { background: #00b465; }
/* ------------ index-about ----------------- */
.index-about { width: 100%; clear: both; }
.index-about-c { width: 1200px; margin: 0 auto; }
.index-about-c .index_about-con { padding: 125px 0; padding-left: 30px; width: 510px; float: left; display: inline; }
.index_about-con .title { border-bottom: 1px solid #00b465; }
.index_about-con h3 { padding-bottom: 14px; }
.index_about-con h4 { color: #00b465; font-size: 9px; padding-bottom: 18px; }
.index_about-con .cont { padding-top: 20px; line-height: 1.8; font-size: 13px; color: #282828; }
.index_about-con .cont p { padding-bottom: 10px; }
.index_about-con .cont .more { height: 28px; line-height: 28px; padding-top: 10px; }
.index_about-con .cont .more a { display: block; background: #00b465; color: #fff; font-size: 13px; letter-spacing: 1px; width: 120px; text-align: center; }
.index_about-con .cont .more a:hover { background: #ddd; color: #00b465; }
.index-about-c .index_about-pic { float: right; display: inline; padding-top: 125px; }
/* ------------ index-product ----------------- */
.index-product { width: 100%; clear: both; }
.index-product-c { width: 1200px; margin: 0 auto; padding-bottom: 120px; }
.index-product-c .title h3 { float: left; display: inline; }
.index-product-c .por-nav { float: right; display: inline; padding-top: 10px; }
.index-product-c .por-nav li { float: left; display: inline; padding: 0 15px; }
.por-nav li a { color: #c1c1c1; font-size: 13px; display: block; }
.por-nav li a:hover { color: #00b465; text-decoration: none; }
.por-nav li.on a { color: #00b465; }
.index-product-c .pro-cont { padding-top: 26px; }
.pro-cont .pro-left { float: left; display: inline; width: 465px; overflow: hidden; }
.pro-cont .pro-right { float: right; display: inline; width: 735px; overflow: hidden; }
.pro-right li { float: left; display: inline; margin-left: 15px; margin-bottom: 18px; background: #fafafa; padding-bottom: 20px; }
.pro-right li .plist-pic { width: 230px; height: 230px; overflow: hidden; }
.pro-right li .plist-title { color: #282828; font-size: 14px; text-align: center; padding: 15px 0; }
.pro-right li .more { width: 100px; height: 30px; background: url(../images/pro_detail_bt.png) no-repeat scroll 0 0; margin: 0 auto; }
.pro-right li .more a { font-size: 14px; color: #00b465; display: block; height: 30px; line-height: 30px; text-align: center; }
.por-con { width: 1200px; margin: 0 auto; overflow: hidden; }
/* ------------ index-shengchan ----------------- */
.index-shengchan { width: 100%; height: 610px; clear: both; overflow: hidden; background: url(../images/base_bg.jpg) no-repeat scroll center bottom; }
.index-shengchan-c { width: 1200px; margin: 0 auto; }
.index-shengchan-c .base-sc { padding-top: 75px; position: relative; }
.base-sc .title { position: absolute; top: 120px; color: #333; font-size: 25px; border-bottom: 1px solid #333; letter-spacing: 2px; font-weight: normal; padding-bottom: 15px; width: 232px; }
.base-sc .base-tit-list { position: absolute; width: 242px; top: 210px; left: 0; }
.base-tit-list li { height: 48px; line-height: 48px; margin-bottom: 14px; padding-right: 10px }
.base-tit-list li.on { background: url(../images/tit_list_arr.png) no-repeat scroll right 34px; }
.base-tit-list li a { display: block; font-size: 14px; background: #fff; color: #00b465; letter-spacing: 1px; text-align: center; }
.base-tit-list li a:hover { text-decoration: none; background: #00b465; color: #fff; }
.base-tit-list li.on a { background: #00b465; color: #fff; }
.base-sc .base-con-list { position: absolute; width: 860px; right: 40px; top: 75px; }
.base-con-list .base-con-b { background: #fff; padding: 36px; height: 380px; }
.base-con-b .base-pic { width: 435px; overflow: hidden; float: left; display: inline; }
.base-con-b .base-pic img { display: block; border: none; width: 435px; }
.base-con-b .base-co { float: right; display: inline; width: 320px; padding-top: 80px; }
.base-co h3 { color: #333; font-size: 24px; letter-spacing: 2px; font-weight: normal; padding-bottom: 5px; }
.base-co h4 { color: #444; font-size: 18px; text-transform: uppercase; font-weight: normal; padding-bottom: 15px; }
.base-co p { font-size: 13px; color: #282828; letter-spacing: 1px; line-height: 1.8; }
.base-co .more { padding-top: 38px; height: 32px; line-height: 32px; float: right; }
.base-co .more a { display: block; background: #00b465; color: #fff; font-size: 13px; letter-spacing: 1px; width: 120px; text-align: center; }
.base-co .more a:hover { background: #ddd; color: #00b465; }
/* ------------ index-brand ----------------- */
.index-brand { width: 1200px; margin: 0 auto; clear: both; }
.index-brand .index-hezuo { width: 120px; margin: 0 auto; text-align: center; padding-top: 165px; }
.index-brand .hd { position: relative; }
.index-brand .hd a { display: block; width: 20px; height: 38px; text-indent: -9999px; cursor: pointer; }
.index-brand .hd .next { background: url(../images/arr_sc_r.png) no-repeat scroll 0 0; position: absolute; top: 44px; left: 1160px; z-index: 9999; }
.index-brand .hd .prev { background: url(../images/arr_sc_l.png) no-repeat scroll 0 0; position: absolute; top: 44px; left: 20px; z-index: 9999; }
.index-brand .brand-list { padding-top: 30px; padding-bottom: 65px; width: 1100px; overflow: hidden; padding-left: 50px; padding-right: 50px; }
.index-brand .brand-list li { width: 1100px; overflow: hidden; }
.index-brand .brand-list li a { display: inline-block; }
/* ------------ index-news ----------------- */
.index-news { background: #f9f8f9; width: 100%; clear: both; }
.index-news-c { height: 345px; width: 1200px; overflow: hidden; margin: 0 auto; background: url(../images/index_news_bg.jpg) no-repeat scroll right bottom; }
.index-news-c .title { padding-top: 80px; }
.index-news-c .title h2 { float: left; display: inline; }
.index-news-c .title p { float: left; display: inline; padding-left: 15px; padding-top: 10px; }
.index-news-c .title p a { color: #282828; font-size: 13px; letter-spacing: 1px; display: inline-block; padding: 0 10px; }
.index-news-c .title p a.on { color: #00b465; text-decoration: none; }
.index-news-c .news-list { padding-top: 40px; width: 720px; }
.index-news-c .news-list li { font-size: 13px; width: 345px; height: 18px; line-height: 18px; padding-bottom: 16px; float: left; display: inline; padding-right: 15px; }
.index-news-c .news-list li a { color: #282828; }
.index-news-c .news-list li a:hover { color: #00b465; }
.index-news-c .news-list .more { padding-top: 10px; }
.index-news-c .news-list .more a { color: #00b465; font-size: 13px; }
/* ------------ about-area ----------------- */
.about-area { width: 100%; }
.about-js { background: url(../images/about_bg1.jpg) repeat scroll center center; padding-top: 100px; }
.about-js .about-nr { padding: 0 150px 80px; }
.about-nr .title { padding-bottom: 24px; border-bottom: 1px solid #282828; }
.about-nr .title h2 { color: #282828; font-size: 26px; font-weight: normal; letter-spacing: 2px; padding-bottom: 10px; }
.about-nr .title h3 { color: #282828; font-size: 12px; text-transform: uppercase; font-weight: normal; letter-spacing: 0.5px; }
.about-nr .about-sm { padding-top: 30px; }
.about-nr .about-sm .overhid{ height:300px; overflow:hidden;}
.about-nr .about-sm p { line-height: 1.8; padding-bottom: 15px; color: #555; }
.about-nr .about-sm div { text-align: center; margin-top: 15px; }
.about-gj { padding-top: 100px; }
.about-gj .about-pic { float: left; display: inline; }
.about-gj .about-wz { float: right; display: inline; width: 520px; padding-left: 30px; height:280px; overflow:hidden; }
.about-gj .about-wz h3 { color: #333; font-size: 26px; font-weight: normal; letter-spacing: 2px; padding-bottom: 10px; }
.about-gj .about-wz p { line-height: 2; padding-bottom: 15px; color: #555; text-align: justify; }
.about-fz { padding-top: 110px; padding-bottom: 80px; clear: both; }
.about-sbanner { height: 320px; overflow: hidden; position: relative; clear: both; }
.about-fz .about-fzimg1 { padding-top: 60px; text-align: center; position: relative; width: 1200px; margin: 0 auto; }
.about-fz .about-fzimg1 div { position: absolute; color: #282828; font-size: 13px; letter-spacing: 1px; width: 160px; text-align: justify; }
.about-fz .about-fzimg1 div.lc2009 { right: 3px; top: 460px; width: 125px; }
.about-fz .about-fzimg1 div.lc2010 { right: 55px; top: 170px; width: 156px; }
.about-fz .about-fzimg1 div.lc2011 { right: 200px; top: 460px; width: 150px; }
.about-fz .about-fzimg1 div.lc2012 { right: 290px; top: 90px; width: 180px; }
.about-fz .about-fzimg1 div.lc2013 { right: 440px; top: 460px; width: 120px; }
.about-fz .about-fzimg1 div.lc2014 { right: 540px; top: 130px; width: 158px; }
.about-fz .about-fzimg1 div.lc2016 { right: 670px; top: 460px; width: 130px; }
.about-fz .about-fzimg1 div.lc2017 { right: 770px; top: 110px; width: 166px; }
.about-fz .about-fzimg1 div.lc2018 { right: 910px; top: 460px; width: 124px; }
.about-fz .about-fzimg2 { padding-top: 30px; text-align: center; }
.about-fzll { width: 600px; margin: 0 auto; padding-top: 32px; padding-left: 30px; }
.about-fzll dl { clear: both; padding-bottom: 15px; }
.about-fzll dt { float: left; display: inline; width: 170px; height: 38px; line-height: 38px; background: url(../images/about_tit_bg.png) no-repeat scroll 0 0; text-align: center; color: #fff; font-size: 16px; }
.about-fzll dd { float: left; display: inline; height: 38px; line-height: 38px; text-align: left; font-size: 14px; padding-left: 22px; color: #00b465; letter-spacing: 1px; overflow:hidden; }
.about-bg2 { background: url(../images/about_bg.png) no-repeat scroll center 200px; }
/* ------------ rongy-area ----------------- */
.rongyu-area{  padding-bottom:100px;}
.rongyu-area .rongyu-bgs{ background:#fafafa;padding-top:80px;}
.rongyu-area .pt30{ padding-top:30px;}
.rongyu-area .rongyu-tit{ text-align:center;}
.rongyu-area .rongyu-js{ width:860px; margin:0 auto; font-size:13px; letter-spacing:1px; text-align:justify; color:#282828; line-height:1.8; padding-top:40px; padding-bottom:70px;}
.rongyu-area .rongyu-list1{ padding:0 80px;}
.rongyu-list1 li{ float:left; display:inline; width:242px; overflow:hidden; padding-right:9px; padding-left:9px; padding-bottom:50px; } 
.rongyu-list1 li p{ text-align:center; color:#282828; font-size:14px; padding:10px 0; overflow: hidden;}
.rongyu-area .rongyu-list2{padding:0 80px;}
.rongyu-list2 li{ float:left; display:inline; width:200px; overflow:hidden; padding-right:30px; padding-left:30px; padding-bottom:20px;} 
.rongyu-list2 li p{ text-align:center; color:#282828; font-size:14px; padding:10px 0;}

/* ------------ yanfa-area ----------------- */
.yanfa-area { padding-bottom: 100px; }
.yanfa-nav { background: #f7f7f7; }
.yanfa-nav li { height: 52px; line-height: 52px; float: left; display: inline; width: 300px; text-align: center; }
.yanfa-nav li a { display: block; border-right: 1px solid #bbbbbb; font-size: 16px; color: #333; letter-spacing: 2px; }
.yanfa-nav li a:hover, .yanfa-nav li.on a { background: #00b465; color: #fff; text-decoration: none; border-right: 1px solid #f7f7f7; }
.yanfa-con { padding-top: 80px; }
.yanfa-nr { padding-bottom: 30px; width: 1200px; overflow: hidden; }
.yanfa-nr .yanfa-pic { float: left; display: inline; }
.yanfa-nr .yanfa-xq { float: right; display: inline; width: 560px; padding-left: 10px; text-align: justify; padding-right: 10px; padding-top: 85px; }
.yanfa-nr .yanfa-xq h2 { color: #282828; font-size: 26px; font-weight: normal; letter-spacing: 2px; padding-bottom: 10px; }
.yanfa-nr .yanfa-xq h3 { color: #282828; font-size: 16px; text-transform: uppercase; font-weight: normal; letter-spacing: 0.5px; padding-bottom: 25px; }
.yanfa-nr .yanfa-xq p { line-height: 1.8; padding-bottom: 8px; color: #555; }
.yanfa-nr .yanfa-center{ text-align:center;}
.yanfa-nr .yanfa-center div{ padding-bottom:40px;}
/* ------------ product-area ----------------- */
.product-area { }
.product-area .pro-l { float: left; display: inline; }
.product-area .pro-r { float: right; display: inline; }
.product-area h2 { color: #282828; font-size: 26px; font-weight: normal; letter-spacing: 2px; padding-bottom: 10px; }
.product-area h3 { color: #282828; font-size: 16px; text-transform: uppercase; font-weight: normal; letter-spacing: 0.5px; padding-bottom: 25px; }
.product-area p { line-height: 1.8; padding-bottom: 8px; color: #555; text-align: justify; }
.pro-ae1 { padding-top: 100px; padding-bottom: 100px; }
.pro-ae1 .pro-l { padding-left: 30px; padding-top: 15px; }
.pro-ae1 .pro-r { width: 560px; padding-left: 10px; padding-right: 10px; }
.pro-ae1 .pro-line { padding-top: 25px; }
.pro-ae1 dl { clear: both; padding-bottom: 15px; }
.pro-ae1 dt { float: left; display: inline; width: 78px; height: 30px; line-height: 30px; background: url(../images/product_btn_bg.png) no-repeat scroll 0 0; text-align: center; color: #fff; font-size: 14px; }
.pro-ae1 dd { float: left; display: inline; height: 30px; line-height: 30px; text-align: left; font-size: 13px; padding-left: 12px; color: #00b465; letter-spacing: 1px; }
.pro-ae2 { clear: both; background: url(../images/product_bg.jpg) no-repeat scroll center center; height: 460px; }
.pro-ae2 .pro-l { width: 510px; padding-left: 50px; padding-bottom: 80px; padding-top: 80px; }
.pro-ae3 { clear: both; padding-top: 80px; padding-bottom: 100px; }
.pro-ae3 .pro-l { padding-left: 40px; }
.pro-ae3 .pro-r { width: 720px; padding-right: 10px; }
/* ------------ product-area ----------------- */

.product-area .product-position { padding-bottom: 20px; padding-top: 20px; color: #282828; }
.product-position a { display: inline-block; height: 16px; line-height: 16px; color: #282828; text-decoration: none; }
.product-position a:hover { color: #00b465; }
.product-position a.home { padding-left: 26px; background: url(../images/home_ico.png) no-repeat scroll left center; }
.product-area .product-nav { float: left; display: inline; width: 160px; padding-right: 20px; padding-left: 8px; overflow: hidden; }
.product-nav dt { font-size: 16px; color: #282828; padding-bottom: 5px; padding-top: 5px; border-bottom: 1px solid #d8d8d8; }
.product-nav dt a { color: #282828; height: 36px; line-height: 36px; background: url(../images/arr_pro.png) no-repeat scroll right center; display: block; width: 90%; padding-left: 5px; }
.product-nav dt a:hover { text-decoration: none; color: #00b465; background: url(../images/arr_pro_d.png) no-repeat scroll right center; }
.product-nav dt.on a { background: url(../images/arr_pro_d.png) no-repeat scroll right center; }
.product-nav dd { display:none;}
.product-nav dd.hover{ display:block;}
.product-nav dd li { padding-bottom: 6px; padding-top: 6px; }
.product-nav dd li a { font-size: 14px; color: #7b7b7b; display: block; width: 80%; padding-left: 15px; }
.product-nav dd li a:hover { color: #679472; }
.product-area .product-list { float: right; display: inline; width: 1005px; overflow: hidden; padding-bottom:80px; }
.product-list .pro-search{ float:left; display:inline; height:28px; line-height:28px; width:220px; background:url(../images/pro_search_btbg.png) no-repeat scroll left center; margin-left:40px;}
.pro-search input{ border:none; height:28px; line-height:28px; padding-left:3px; background:none;color:#a4a4a4; font-size:13px;}
.pro-search button{ width:28px; height:28px; cursor:pointer; background:url(../images/pro_search_bt.png) no-repeat scroll center center; float:left; display:inline; border:none; text-indent:-9999px; }
.product-list .total { float: right; display: inline; color: #9a9a9a; padding-right: 10px;  height:14px; line-height:14px; padding-top:14px; }
.product-list .list-all { padding-top:40px;}
.list-all li { width: 305px; padding-left: 30px; float: left; display: inline; padding-bottom: 40px; }
.list-all li .product-pic { }
.list-all li .product-pic a { width: 303px; height: 303px; overflow: hidden; display: block; border: 1px solid #efefef; }
.list-all li .product-pic a:hover { border: 1px solid #ccc; }
.list-all li .product-title { padding-top: 18px; padding-bottom: 15px; }
.list-all li .product-title a { color: #282828; font-size: 16px; }
.list-all li .product-title a:hover { color: #00b465; }
.list-all li .product-sm { color: #9a9a9a; width: 66%; line-height: 1.2; letter-spacing: 1px;     height: 22px;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;}
.list-all li .more { float: right; display: inline; position: relative; bottom: 30px; }
.list-all li .more a { width: 80px; height: 30px; line-height: 30px; color: #00b465; font-size: 14px; letter-spacing: 1px; border: 1px solid #00b465; display: block; text-align: center; }
.rongyu-area .rongyu-list3{ padding:0 0px;}
.rongyu-list3 li{ float:left; display:inline; width:250px; height:250px; overflow:hidden; padding-right:30px; padding-left:30px; padding-bottom:50px; } 
.rongyu-list3 li p{ text-align:center; color:#282828; font-size:14px; padding:10px 0; overflow: hidden; height:20px; overflow:hidden;}
.rongyu-list3 li div{ text-align:center;}
.rongyu-list3 li img{}
.page-list { float: right; display: inline; padding-right: 5px;  }
.page-list li { float: left; display: inline; padding-left: 12px; }
.page-list a { display: inline-block; padding: 5px 10px; background: #e4e4e4; color: #282828; }
.page-list a:hover { background: #00b465; color: #fff; text-decoration: none; }
/* ------------ product-detail ----------------- */
.bgcof4 { background: #f4f4f4; padding-bottom: 140px; }
.product-detail { margin-top: 14px; }
.product-dtl { float: left; display: inline; width: 750px; overflow: hidden; background: #fff; padding-top: 75px; padding-left: 55px; padding-right: 55px; }
.product-dtl .title { color: #282828; font-size: 18px; letter-spacing: 2px; font-weight: bold; padding-bottom: 18px; }
.product-dtl .t-sup { color: #7c7b7b; height: 16px; line-height: 16px; }
.t-sup .sup-admin { float: left; display: inline; padding-left: 20px; background: url(../images/fabu_ico.png) no-repeat scroll left center; }
.t-sup .sup-data { float: left; display: inline; padding-left: 20px; background: url(../images/time_ico.png) no-repeat scroll left center; margin-left: 40px; }
.product-dtl .detail-con { padding-top: 50px; }
.detail-con div { text-align: center; padding-bottom: 25px; }
.detail-con p { padding-bottom: 18px; font-size: 14px; letter-spacing: 1px; text-align: justify; color: #282828; line-height: 1.8; text-indent: 2em; }
.product-dtl .news-page { width: 200px; text-align: center; margin: 0 auto; padding-top: 50px; }
.news-page a { display: inline-block; padding: 8px 24px; background: #e4e4e4; color: #282828; }
.news-page a:hover { background: #00b465; color: #fff; }
.news-page a.prve { }
.news-page a.next { margin-left: 10px; }
.product-dtl .more-dtl { padding-top: 85px; padding-bottom: 70px; }
.product-dtl .more-dtl a { color: #282828; }
.more-dtl .next-pro { padding-bottom: 15px; color: #282828; }
.more-dtl .prve-pro { padding-bottom: 15px; }
.product-dtl .share { position: relative; right: -600px; bottom: 20px; }
.product-dtl .share li { float: left; display: inline; margin-left: 8px; }
.product-dtl .share a { display: block; text-indent: -9999px; width: 25px; height: 25px; }
.product-dtl .share a.weixin { background: url(../images/share_wx.png) no-repeat scroll center center; }
.product-dtl .share a.sina { background: url(../images/share_sina.png) no-repeat scroll center center; }
.product-dtl .share a.qzone { background: url(../images/share_zone.png) no-repeat scroll center center; }
.product-dtl .share a.weibo { background: url(../images/share_wb.png) no-repeat scroll center center; }
.product-dtl .share a.add { background: url(../images/share_add.png) no-repeat scroll center center; }
.product-dtr { float: right; display: inline; width: 310px; overflow: hidden; margin-right: 10px; background: #fff; }
.prodtl-nav { padding-top: 18px; padding-left: 15px; padding-right: 15px; overflow: hidden; padding-bottom: 30px; }
.prodtl-nav .h-title { height: 54px; line-height: 54px; color: #fff; background: #00b465; font-size: 16px; padding: 0; padding-left: 20px; }
.prodtl-nav .prodtl-list { }
.prodtl-list dl { }
.prodtl-list dt { padding: 20px; overflow: hidden; }
.prodtl-list dt img { width: 232px; }
.prodtl-list dd { margin: 0 10px; border-bottom: 1px dotted #222; padding-bottom: 20px; }
.prodtl-list dd div { }
.prodtl-list dd div a { color: #666666; }
.prodtl-list dd p { color: #282828; font-size: 14px; }
.prodtl-list dd p a { margin-top: 25px; color: #282828; display: block; }
.prodtl-nav .prodtl-more { padding-top: 40px; width: 110px; text-align: center; margin: 0 auto; }
.prodtl-nav .prodtl-more a { display: block; padding: 8px 16px; border: 1px solid #00b465; color: #00b465; font-size: 14px; }
.prodtl-nav .prodtl-more a:hover { text-decoration: none; border: 1px solid #444; color: #444; }
/* ------------ shengchan-area ----------------- */
.shengchan-nav { }
.shengchan-nav li { float: left; display: inline; height: 50px; line-height: 50px; text-align: center; width: 20% }
.shengchan-nav li a { display: block; border-right: 1px solid #bbbbbb; font-size: 15px; color: #333; letter-spacing: 2px; }
.shengchan-nav li a:hover, .shengchan-nav li.on a { background: #00b465; color: #fff; text-decoration: none; border-right: 1px solid #f7f7f7; }
.shengchan-nr { width: 1200px; overflow: hidden; }
.shengchan-base { height: 576px; overflow: hidden; background: url(../images/shengchan_bg.jpg) no-repeat scroll center center; }
.shengchan-base .sc-pic { float: left; display: inline; padding-top: 80px; padding-left: 20px; }
.shengchan-base .sc-xq { float: right; display: inline; width: 560px; padding-left: 10px; text-align: justify; padding-right: 10px; padding-top: 140px; }
.shengchan-base .sc-xq h2 { color: #282828; font-size: 26px; font-weight: normal; letter-spacing: 2px; padding-bottom: 10px; }
.shengchan-base .sc-xq h3 { color: #282828; font-size: 16px; text-transform: uppercase; font-weight: normal; letter-spacing: 0.5px; padding-bottom: 25px; }
.shengchan-base .sc-xq p { line-height: 1.8; padding-bottom: 8px; color: #555; }
.shengchan-pic { height: 180px; overflow: hidden; padding-top: 90px; padding-bottom: 140px; width:1200px; overflow: hidden; margin:0 auto; }
.shengchan-pic .pic-arr{position:relative; width:1200px; height:0; }
.shengchan-pic .pic-arrl { position:absolute; top: 60px; left:0px; z-index:9999; }
.shengchan-pic .pic-arrl a { display: block; width: 50px; height: 60px; text-indent: -9999px; background: url(../images/arr_sc_l.png) no-repeat scroll center center; }
.shengchan-pic .pic-arrr { position:absolute;top: 60px; right:0px;  z-index:9999;}
.shengchan-pic .pic-arrr a { display: block; width: 50px; height: 60px; text-indent: -9999px; background: url(../images/arr_sc_r.png) no-repeat scroll center center; }
.shengchan-pic .pic-list { width: 1096px; margin: 0 auto; overflow:hidden; height:180px; overflow:hidden; }
.shengchan-pic .pic-list li { float: left; display: inline; padding: 0 2px; width:270px;height:180px;overflow:hidden; }
.shengchan-pic .pic-list li img{ width:270px;}
/* ------------ service-area ----------------- */
.service-area { }
.service-area .ser-l { float: left; display: inline; }
.service-area .ser-r { float: right; display: inline; }
.service-area h2 { color: #282828; font-size: 26px; font-weight: normal; letter-spacing: 2px; padding-bottom: 10px; }
.service-area h3 { color: #282828; font-size: 16px; text-transform: uppercase; font-weight: normal; letter-spacing: 0.5px; padding-bottom: 25px; }
.service-area p { line-height: 1.8; padding-bottom: 8px; color: #555; text-align: justify; }
.ser-ae1 { padding-top: 100px; padding-bottom: 100px; }
.ser-ae1 .ser-l { padding-left: 100px; padding-top: 15px; }
.ser-ae1 .ser-r { width: 400px; padding-left: 10px; padding-right: 140px; padding-top: 80px; }
.ser-ae2 { clear: both; background: url(../images/service_pic_01.jpg) no-repeat scroll center center; height: 460px; }
.ser-ae2 .pro-l { width: 510px; padding-left: 50px; padding-bottom: 80px; padding-top: 80px; }
.ser-ae3 { clear: both; padding-top: 80px; padding-bottom: 100px; }
.ser-ae3 .ser-img { text-align: center; }
/* ------------ news-area ----------------- */
.news-area { background: #f4f4f4; padding-top: 30px;}
.news-c { width: 920px; margin: 0 auto; background: #fff; padding: 70px 90px;margin-bottom:90px;  }
.news-nav { padding-bottom: 18px; border-bottom: 1px solid #a4a4a4; }
.news-nav li { float: left; display: inline; margin-right: 10px; }
.news-nav li a { display: block; width: 76px; height: 30px; line-height: 30px; text-align: center; background: url(../images/news_bt2.png) no-repeat scroll center center; font-size: 13px; letter-spacing: 1px; color: #282828; text-decoration: none; }
.news-nav li a:hover, .news-nav li.on a { background: url(../images/news_bt1.png) no-repeat scroll center center; color: #fff; text-decoration: none; }
.news-list { padding-top: 50px; padding-bottom: 50px; }
.news-list dl { padding-bottom: 30px; padding-top: 30px; border-bottom: 1px solid #ededed; }
.news-list dt { float: left; display: inline; width: 262px; height: 178px; overflow: hidden; }
.news-list dt a { display: block; }
.news-list dt a:hover { border: 1px solid #ededed }
.news-list dd { float: right; display: inline; width: 620px; position: relative; min-height: 178px; }
.news-list dd h3 { line-height: 1.5; padding-top: 10px; padding-bottom: 10px; }
.news-list dd h3 a { color: #282828; font-size: 14px; letter-spacing: 1px; }
.news-list dd h3 a:hover { color: #00b465; }
.news-list dd p { line-height: 1.8; font-size: 12px; text-align: justify; padding-bottom: 10px; color: #5a5a5a }
.news-list dd .more a { color: #7c7b7b; font-size: 12px; }
.news-list dd .more a:hover { color: #00b465; }
.news-list dd .share { position: absolute; bottom: 3px; right: 5px; }
.news-list dd .share li { float: left; display: inline; margin-left: 8px; }
.news-list dd .share a { display: block; text-indent: -9999px; width: 25px; height: 25px; }
.news-list dd .share a.weixin { background: url(../images/share_wx.png) no-repeat scroll center center; }
.news-list dd .share a.sina { background: url(../images/share_sina.png) no-repeat scroll center center; }
.news-list dd .share a.qzone { background: url(../images/share_zone.png) no-repeat scroll center center; }
.news-list dd .share a.weibo { background: url(../images/share_wb.png) no-repeat scroll center center; }
.news-list dd .share a.add { background: url(../images/share_add.png) no-repeat scroll center center; }
/* ------------ contact-area ----------------- */
.contact-area { background: #f4f4f4; padding-top: 15px; }
.contact-c { width: 1200px; margin: 0 auto; padding-bottom: 60px; }
.contact-dizhi { margin-top: 40px; background: #fff; padding-top: 66px; padding-left: 80px; padding-right: 80px; padding-bottom: 90px; }
.contact-dizhi .h2-title { border-bottom: 1px solid #a4a4a4; padding-bottom: 20px; color: #282828; font-weight: bold; font-size: 22px; letter-spacing: 2px; padding-left: 50px; background: url(../images/pt_ico.png) no-repeat scroll 3px 0px; }
.contact-dizhi .h2-title span { color: #282828; font-weight: normal; font-size: 16px; letter-spacing: 1px; padding-left: 10px; }
.contact-dizhi .contact-detail { padding-top: 40px; }
.contact-dizhi .contact-list { width: 500px; float: left; display: inline; }
.contact-list li { float: left; display: inline; width: 250px; padding-bottom: 18px; }
.contact-list li h3 { font-size: 16px; color: #7c7b7b; padding-bottom: 18px; letter-spacing: 1px; font-weight: normal; }
.contact-list li p { font-size: 22px; color: #282828; }
.contact-dizhi .street { clear: both; }
.contact-dizhi .street h3 { font-size: 16px; color: #282828; padding-bottom: 18px; letter-spacing: 1px; font-weight: normal; }
.contact-dizhi .street p { font-size: 16px; color: #282828; padding-bottom: 18px; letter-spacing: 1px; font-weight: normal; }
.contact-dizhi .map { float: right; display: inline; width: 520px; }
.contact-message { margin-top: 40px; background: #fff; padding-top: 66px; padding-left: 80px; padding-right: 80px; padding-bottom: 120px; }
.contact-message .h2-title { border-bottom: 1px solid #a4a4a4; padding-bottom: 20px; color: #282828; font-weight: bold; font-size: 22px; letter-spacing: 2px; padding-left: 50px; }
.message-con { padding-top: 30px; padding-bottom: 30px; }
.message-con input { height: 58px; line-height: 58px; padding: 0 8px; display: inline-block; width: 320px; border: 1px solid #ccc; color: #b5b5b5; font-size: 16px; margin-right: 5px; }
.message-con textarea { margin-top: 10px; color: #b5b5b5; font-size: 16px; border: 1px solid #ccc; width: 99%; height: 200px; }
.message-con button { float: right; margin-top: 50px; width: 150px; height: 40px; line-height: 40px; color: #fff; font-size: 16px; background: #00b465; border: none; cursor: pointer; margin-right: 1%; }
.contact-c .contact-img { margin-bottom: 40px; }
/* ------------ map-area ----------------- */
.map-area { padding-top:25px; background:#f4f4f4;}
.map-area .map-c { padding:65px 30px;  }
.map-c ul{ padding-bottom:45px;}
.map-c ul li{ float:left; display:inline; padding-right:35px;}
.map-c ul li a{ color:#282828; font-size:14px; letter-spacing:1px;}
/* ------------ footer ----------------- */
.footer { background: #202020; clear: both; }
.footer .footer-c { width: 1200px; margin: 0 auto; position: relative; }
.footer .foot-bk1 { clear: both; height: 110px; overflow: hidden; border-bottom: 1px solid #12bea1; }
.footer .foot-bk1 .footer-c { position: relative; height: 100%; width: 1200px; margin: 0 auto; }
.footer .foot-bk1 .foot-logo { position: absolute; left: 20px; top: 30px; }
.footer .foot-bk1 p { position: absolute; right: 3px; bottom: 28px; color: #00b465; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.footer .foot-bk2 { padding-top: 24px; padding-bottom: 30px; }
.footer .foot-bk2 li { float: left; display: inline; padding: 0 8px; }
.footer .foot-bk2 li a { display: block; color: #fff; font-size: 13px; }
.footer .foot-bk3 { clear: both; padding-top: 15px; padding-bottom: 30px; }
.footer .foot-bk3 p { height: 18px; color: #a0a0a0; padding-bottom: 10px; }
.footer .foot-bk3 p a { color: #aaa; margin: 0 3px; }
.footer .foot-wx { position: absolute; right: 40px; bottom: 30px; }
.foot-wx .wximg { text-align: center; }
.foot-wx .share { padding-top: 20px; }
.foot-wx .share li { float: left; display: inline; line-height: 32px; padding: 0 10px; width: 32px; height: 32px; background: url(../images/foot_ico_btn.png) no-repeat scroll center center; }
.foot-wx .share li.on, .foot-wx .share li.hover { background: url(../images/foot_ico_btn_h.png) no-repeat scroll center center; }
.foot-wx .share li a { display: block; text-align: center; height: 20px; padding-top: 3px; }
.foot-wx .share li a img { text-align: center; }
/*****pagefixd******/
.pagefixd{ position:fixed; right:0;  bottom:236px; z-index:9999;}
.pagefixd .fixd-share{ width:49px; height:173px; overflow:hidden; background:url(../images/wx_bg.png) no-repeat scroll 0 0;}
.fixd-share li{ width:24px; margin:0 auto; border-bottom:1px solid #fff; height:30px; padding-top:12px}
.fixd-share a{ display:block; height:24px; width:24px; overflow:hidden; text-indent:-9999px;}
.fixd-share .fixd-wxico{ background:url(../images/xfico_wx.png) no-repeat scroll center center;}
.fixd-share .fixd-sinaico{background:url(../images/xfico_sina.png) no-repeat scroll center center;}
.fixd-share .fixd-zoneico{background:url(../images/xfico_zone.png) no-repeat scroll center center;}
.fixd-share .fixd-weiboico{background:url(../images/xfico_wb.png) no-repeat scroll center center;}
.pagefixd .fixd-top{ width:49px; height:89px; margin-top:5px; background:url(../images/wx_arr_bg.png) no-repeat scroll 0 0;}
.fixd-top .fixd-ewm{ position:relative;}
.fixd-top .fixd-ewm .ewm-s{ position:absolute; right:49px; top:-60px; display:none;}
.fixd-top .ewm-h{ padding-left:10px; width:30px; padding-top:12px;}
.fixd-top .back-top{ padding-left:12px; padding-top:10px;}
.fixd-top .back-top a{ background:url(../images/wx_arr.png) no-repeat scroll center center; width:24px; height:14px; display:block; text-indent:-9999px;}
/*****play-video******/
.video-ico{position:fixed; right:0;  bottom:190px; z-index:9999;}
.video-ico a{ display:block;}
.video{ position:fixed; right:0px; bottom:0px; z-index:9999; display:none;}
.video-con{ position:relative;}
.play-video { width:100%; height:100%; display: block; position: absolute; left:0; top:0;}
.play-video:hover {}
.video-mbox { position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.8); top: 0; left: 0; z-index: 100; text-align: center; display: none; z-index: 99999; }
@media \0screen\,screen\9 {
.video-mbox { position: fixed; width: 100%; height: 100%; background: #f7f7f7; top: 0; left: 0; z-index: 100; text-align: center; display: none; }
.video-mbox .video-c { margin: 100px auto; }
}
.video-mbox .video-close { cursor: pointer; display: inline-block; position: absolute; right: 50px; top: 50px; width: 67px; height: 69px; background: url(../images/close.png) no-repeat scroll 0 0; }
.video-mbox .video-close:hover { background: url(../images/close_on.png) no-repeat scroll 0 0; }
/*****wow******/
 @charset "UTF-8";
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s }
.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s }
@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
40%, 43% {
-webkit-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0)
}
40%, 43%, 70% {
-webkit-animation-timing-function:cubic-bezier(.755, .05, .855, .06);
animation-timing-function:cubic-bezier(.755, .05, .855, .06)
}
70% {
-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%, 20%, 53%, 80%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
40%, 43% {
-webkit-transform:translate3d(0, -30px, 0);
transform:translate3d(0, -30px, 0)
}
40%, 43%, 70% {
-webkit-animation-timing-function:cubic-bezier(.755, .05, .855, .06);
animation-timing-function:cubic-bezier(.755, .05, .855, .06)
}
70% {
-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%, 50%, to {
opacity:1
}
25%, 75% {
opacity:0
}
}
@keyframes flash {
0%, 50%, to {
opacity:1
}
25%, 75% {
opacity:0
}
}
.flash { -webkit-animation-name: flash; animation-name: flash }
@-webkit-keyframes pulse {
0% {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
@keyframes pulse {
0% {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
.pulse { -webkit-animation-name: pulse; animation-name: pulse }
@-webkit-keyframes rubberBand {
0% {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
30% {
-webkit-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1)
}
40% {
-webkit-transform:scale3d(.75, 1.25, 1);
transform:scale3d(.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)
}
to {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
@keyframes rubberBand {
0% {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
30% {
-webkit-transform:scale3d(1.25, .75, 1);
transform:scale3d(1.25, .75, 1)
}
40% {
-webkit-transform:scale3d(.75, 1.25, 1);
transform:scale3d(.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)
}
to {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand }
@-webkit-keyframes shake {
0%, to {
-webkit-transform:translateZ(0);
transform:translateZ(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%, to {
-webkit-transform:translateZ(0);
transform:translateZ(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 headShake {
0% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
6.5% {
-webkit-transform:translateX(-6px) rotateY(-9deg);
transform:translateX(-6px) rotateY(-9deg)
}
18.5% {
-webkit-transform:translateX(5px) rotateY(7deg);
transform:translateX(5px) rotateY(7deg)
}
31.5% {
-webkit-transform:translateX(-3px) rotateY(-5deg);
transform:translateX(-3px) rotateY(-5deg)
}
43.5% {
-webkit-transform:translateX(2px) rotateY(3deg);
transform:translateX(2px) rotateY(3deg)
}
50% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
@keyframes headShake {
0% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
6.5% {
-webkit-transform:translateX(-6px) rotateY(-9deg);
transform:translateX(-6px) rotateY(-9deg)
}
18.5% {
-webkit-transform:translateX(5px) rotateY(7deg);
transform:translateX(5px) rotateY(7deg)
}
31.5% {
-webkit-transform:translateX(-3px) rotateY(-5deg);
transform:translateX(-3px) rotateY(-5deg)
}
43.5% {
-webkit-transform:translateX(2px) rotateY(3deg);
transform:translateX(2px) rotateY(3deg)
}
50% {
-webkit-transform:translateX(0);
transform:translateX(0)
}
}
.headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake }
@-webkit-keyframes swing {
20% {
-webkit-transform:rotate(15deg);
transform:rotate(15deg)
}
40% {
-webkit-transform:rotate(-10deg);
transform:rotate(-10deg)
}
60% {
-webkit-transform:rotate(5deg);
transform:rotate(5deg)
}
80% {
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg)
}
to {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
}
@keyframes swing {
20% {
-webkit-transform:rotate(15deg);
transform:rotate(15deg)
}
40% {
-webkit-transform:rotate(-10deg);
transform:rotate(-10deg)
}
60% {
-webkit-transform:rotate(5deg);
transform:rotate(5deg)
}
80% {
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg)
}
to {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
}
.swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing }
@-webkit-keyframes tada {
0% {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
10%, 20% {
-webkit-transform:scale3d(.9, .9, .9) rotate(-3deg);
transform:scale3d(.9, .9, .9) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate(3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)
}
40%, 60%, 80% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)
}
to {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
@keyframes tada {
0% {
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
10%, 20% {
-webkit-transform:scale3d(.9, .9, .9) rotate(-3deg);
transform:scale3d(.9, .9, .9) rotate(-3deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate(3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)
}
40%, 60%, 80% {
-webkit-transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg);
transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)
}
to {
-webkit-transform:scaleX(1);
transform:scaleX(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) rotate(-5deg);
transform:translate3d(-25%, 0, 0) rotate(-5deg)
}
30% {
-webkit-transform:translate3d(20%, 0, 0) rotate(3deg);
transform:translate3d(20%, 0, 0) rotate(3deg)
}
45% {
-webkit-transform:translate3d(-15%, 0, 0) rotate(-3deg);
transform:translate3d(-15%, 0, 0) rotate(-3deg)
}
60% {
-webkit-transform:translate3d(10%, 0, 0) rotate(2deg);
transform:translate3d(10%, 0, 0) rotate(2deg)
}
75% {
-webkit-transform:translate3d(-5%, 0, 0) rotate(-1deg);
transform:translate3d(-5%, 0, 0) rotate(-1deg)
}
to {
-webkit-transform:none;
transform:none
}
}
@keyframes wobble {
0% {
-webkit-transform:none;
transform:none
}
15% {
-webkit-transform:translate3d(-25%, 0, 0) rotate(-5deg);
transform:translate3d(-25%, 0, 0) rotate(-5deg)
}
30% {
-webkit-transform:translate3d(20%, 0, 0) rotate(3deg);
transform:translate3d(20%, 0, 0) rotate(3deg)
}
45% {
-webkit-transform:translate3d(-15%, 0, 0) rotate(-3deg);
transform:translate3d(-15%, 0, 0) rotate(-3deg)
}
60% {
-webkit-transform:translate3d(10%, 0, 0) rotate(2deg);
transform:translate3d(10%, 0, 0) rotate(2deg)
}
75% {
-webkit-transform:translate3d(-5%, 0, 0) rotate(-1deg);
transform:translate3d(-5%, 0, 0) rotate(-1deg)
}
to {
-webkit-transform:none;
transform:none
}
}
.wobble { -webkit-animation-name: wobble; animation-name: wobble }
@-webkit-keyframes jello {
0%, 11.1%, to {
-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(.390625deg) skewY(.390625deg);
transform:skewX(.390625deg) skewY(.390625deg)
}
88.8% {
-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);
transform:skewX(-.1953125deg) skewY(-.1953125deg)
}
}
@keyframes jello {
0%, 11.1%, to {
-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(.390625deg) skewY(.390625deg);
transform:skewX(.390625deg) skewY(.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%, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
opacity:1;
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
opacity:1;
-webkit-transform:scaleX(1);
transform:scaleX(1)
}
}
.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn }
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:none;
transform:none
}
}
.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown }
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInLeft {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:none;
transform:none
}
}
.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft }
@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInRight {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:none;
transform:none
}
}
.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight }
@-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes bounceInUp {
0%, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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
}
to {
opacity:1
}
}
@keyframes fadeIn {
0% {
opacity:0
}
to {
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)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
to {
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)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDownBig {
0% {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig }
@-webkit-keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.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)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeftBig {
0% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig }
@-webkit-keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.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)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRightBig {
0% {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
to {
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)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
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)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUpBig {
0% {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig }
@-webkit-keyframes fadeOut {
0% {
opacity:1
}
to {
opacity:0
}
}
@keyframes fadeOut {
0% {
opacity:1
}
to {
opacity:0
}
}
.fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut }
@-webkit-keyframes fadeOutDown {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
}
@keyframes fadeOutDown {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(0, 2000px, 0);
transform:translate3d(0, 2000px, 0)
}
}
@keyframes fadeOutDownBig {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
@keyframes fadeOutLeft {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
}
@keyframes fadeOutLeftBig {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
}
@keyframes fadeOutRight {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(2000px, 0, 0);
transform:translate3d(2000px, 0, 0)
}
}
@keyframes fadeOutRightBig {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
}
@keyframes fadeOutUp {
0% {
opacity:1
}
to {
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
}
to {
opacity:0;
-webkit-transform:translate3d(0, -2000px, 0);
transform:translate3d(0, -2000px, 0)
}
}
@keyframes fadeOutUpBig {
0% {
opacity:1
}
to {
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) rotateY(-1turn);
transform:perspective(400px) rotateY(-1turn)
}
0%, 40% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);
transform:perspective(400px) translateZ(150px) rotateY(-190deg)
}
50% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);
transform:perspective(400px) translateZ(150px) rotateY(-170deg)
}
50%, 80% {
-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)
}
to {
-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) rotateY(-1turn);
transform:perspective(400px) rotateY(-1turn)
}
0%, 40% {
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);
transform:perspective(400px) translateZ(150px) rotateY(-190deg)
}
50% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);
transform:perspective(400px) translateZ(150px) rotateY(-170deg)
}
50%, 80% {
-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)
}
to {
-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) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);
opacity:0
}
0%, 40% {
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
40% {
-webkit-transform:perspective(400px) rotateX(-20deg);
transform:perspective(400px) rotateX(-20deg)
}
60% {
-webkit-transform:perspective(400px) rotateX(10deg);
transform:perspective(400px) rotateX(10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotateX(-5deg);
transform:perspective(400px) rotateX(-5deg)
}
to {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
@keyframes flipInX {
0% {
-webkit-transform:perspective(400px) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);
opacity:0
}
0%, 40% {
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
40% {
-webkit-transform:perspective(400px) rotateX(-20deg);
transform:perspective(400px) rotateX(-20deg)
}
60% {
-webkit-transform:perspective(400px) rotateX(10deg);
transform:perspective(400px) rotateX(10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotateX(-5deg);
transform:perspective(400px) rotateX(-5deg)
}
to {
-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) rotateY(90deg);
transform:perspective(400px) rotateY(90deg);
opacity:0
}
0%, 40% {
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
40% {
-webkit-transform:perspective(400px) rotateY(-20deg);
transform:perspective(400px) rotateY(-20deg)
}
60% {
-webkit-transform:perspective(400px) rotateY(10deg);
transform:perspective(400px) rotateY(10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotateY(-5deg);
transform:perspective(400px) rotateY(-5deg)
}
to {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
@keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotateY(90deg);
transform:perspective(400px) rotateY(90deg);
opacity:0
}
0%, 40% {
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
40% {
-webkit-transform:perspective(400px) rotateY(-20deg);
transform:perspective(400px) rotateY(-20deg)
}
60% {
-webkit-transform:perspective(400px) rotateY(10deg);
transform:perspective(400px) rotateY(10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotateY(-5deg);
transform:perspective(400px) rotateY(-5deg)
}
to {
-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) rotateX(-20deg);
transform:perspective(400px) rotateX(-20deg);
opacity:1
}
to {
-webkit-transform:perspective(400px) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);
opacity:0
}
}
@keyframes flipOutX {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotateX(-20deg);
transform:perspective(400px) rotateX(-20deg);
opacity:1
}
to {
-webkit-transform:perspective(400px) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);
opacity:0
}
}
.flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible!important; backface-visibility: visible!important }
@-webkit-keyframes flipOutY {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotateY(-15deg);
transform:perspective(400px) rotateY(-15deg);
opacity:1
}
to {
-webkit-transform:perspective(400px) rotateY(90deg);
transform:perspective(400px) rotateY(90deg);
opacity:0
}
}
@keyframes flipOutY {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotateY(-15deg);
transform:perspective(400px) rotateY(-15deg);
opacity:1
}
to {
-webkit-transform:perspective(400px) rotateY(90deg);
transform:perspective(400px) rotateY(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)
}
60%, 80% {
opacity:1
}
80% {
-webkit-transform:skewX(-5deg);
transform:skewX(-5deg)
}
to {
-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)
}
60%, 80% {
opacity:1
}
80% {
-webkit-transform:skewX(-5deg);
transform:skewX(-5deg)
}
to {
-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
}
to {
-webkit-transform:translate3d(100%, 0, 0) skewX(30deg);
transform:translate3d(100%, 0, 0) skewX(30deg);
opacity:0
}
}
@keyframes lightSpeedOut {
0% {
opacity:1
}
to {
-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% {
transform-origin:center;
-webkit-transform:rotate(-200deg);
transform:rotate(-200deg);
opacity:0
}
0%, to {
-webkit-transform-origin:center
}
to {
transform-origin:center;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateIn {
0% {
transform-origin:center;
-webkit-transform:rotate(-200deg);
transform:rotate(-200deg);
opacity:0
}
0%, to {
-webkit-transform-origin:center
}
to {
transform-origin:center;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn }
@-webkit-keyframes rotateInDownLeft {
0% {
transform-origin:left bottom;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
opacity:0
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin:left bottom;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
opacity:0
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft }
@-webkit-keyframes rotateInDownRight {
0% {
transform-origin:right bottom;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInDownRight {
0% {
transform-origin:right bottom;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight }
@-webkit-keyframes rotateInUpLeft {
0% {
transform-origin:left bottom;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin:left bottom;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft }
@-webkit-keyframes rotateInUpRight {
0% {
transform-origin:right bottom;
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
opacity:0
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInUpRight {
0% {
transform-origin:right bottom;
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
opacity:0
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight }
@-webkit-keyframes rotateOut {
0% {
transform-origin:center;
opacity:1
}
0%, to {
-webkit-transform-origin:center
}
to {
transform-origin:center;
-webkit-transform:rotate(200deg);
transform:rotate(200deg);
opacity:0
}
}
@keyframes rotateOut {
0% {
transform-origin:center;
opacity:1
}
0%, to {
-webkit-transform-origin:center
}
to {
transform-origin:center;
-webkit-transform:rotate(200deg);
transform:rotate(200deg);
opacity:0
}
}
.rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut }
@-webkit-keyframes rotateOutDownLeft {
0% {
transform-origin:left bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin:left bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity:0
}
}
.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft }
@-webkit-keyframes rotateOutDownRight {
0% {
transform-origin:right bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
opacity:0
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin:right bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
opacity:0
}
}
.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight }
@-webkit-keyframes rotateOutUpLeft {
0% {
transform-origin:left bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
opacity:0
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin:left bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:left bottom
}
to {
transform-origin:left bottom;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
opacity:0
}
}
.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft }
@-webkit-keyframes rotateOutUpRight {
0% {
transform-origin:right bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
opacity:0
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin:right bottom;
opacity:1
}
0%, to {
-webkit-transform-origin:right bottom
}
to {
transform-origin:right bottom;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
opacity:0
}
}
.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight }
@-webkit-keyframes hinge {
0% {
transform-origin:top left
}
0%, 20%, 60% {
-webkit-transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%, 60% {
-webkit-transform:rotate(80deg);
transform:rotate(80deg);
transform-origin:top left
}
40%, 80% {
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1
}
to {
-webkit-transform:translate3d(0, 700px, 0);
transform:translate3d(0, 700px, 0);
opacity:0
}
}
@keyframes hinge {
0% {
transform-origin:top left
}
0%, 20%, 60% {
-webkit-transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%, 60% {
-webkit-transform:rotate(80deg);
transform:rotate(80deg);
transform-origin:top left
}
40%, 80% {
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1
}
to {
-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) rotate(-120deg);
transform:translate3d(-100%, 0, 0) rotate(-120deg)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes rollIn {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0) rotate(-120deg);
transform:translate3d(-100%, 0, 0) rotate(-120deg)
}
to {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn }
@-webkit-keyframes rollOut {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0) rotate(120deg);
transform:translate3d(100%, 0, 0) rotate(120deg)
}
}
@keyframes rollOut {
0% {
opacity:1
}
to {
opacity:0;
-webkit-transform:translate3d(100%, 0, 0) rotate(120deg);
transform:translate3d(100%, 0, 0) rotate(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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.175, .885, .32, 1)
}
}
.zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp }
@-webkit-keyframes zoomOut {
0% {
opacity:1
}
50% {
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50%, to {
opacity:0
}
}
@keyframes zoomOut {
0% {
opacity:1
}
50% {
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50%, to {
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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
to {
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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
to {
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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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)
}
to {
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)
}
to {
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)
}
to {
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)
}
to {
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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
to {
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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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(.55, .055, .675, .19);
animation-timing-function:cubic-bezier(.55, .055, .675, .19)
}
to {
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(.175, .885, .32, 1);
animation-timing-function:cubic-bezier(.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
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes slideInDown {
0% {
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0);
visibility:visible
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(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
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes slideInLeft {
0% {
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0);
visibility:visible
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(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
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes slideInRight {
0% {
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0);
visibility:visible
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(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
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes slideInUp {
0% {
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
visibility:visible
}
to {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
.slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp }
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
to {
visibility:hidden;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
}
@keyframes slideOutDown {
0% {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
to {
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:translateZ(0);
transform:translateZ(0)
}
to {
visibility:hidden;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
to {
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:translateZ(0);
transform:translateZ(0)
}
to {
visibility:hidden;
-webkit-transform:translate3d(100%, 0, 0);
transform:translate3d(100%, 0, 0)
}
}
@keyframes slideOutRight {
0% {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
to {
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:translateZ(0);
transform:translateZ(0)
}
to {
visibility:hidden;
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
}
@keyframes slideOutUp {
0% {
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
to {
visibility:hidden;
-webkit-transform:translate3d(0, -100%, 0);
transform:translate3d(0, -100%, 0)
}
}
.slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp }