@charset "utf-8";
/*==========@@HTML默认 开始@@==========*/
/*基本*/
*{ font-size:16px;padding:0px; margin:0px }
body{color:#626262;background-color: #FFF;	padding:0px; margin:0px auto;overflow:scroll;
	overflow-x:hidden;overflow-y:auto;
	font-family: Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;
	font-size:16px; max-width:740px;
}
div{ margin:0; padding:0; border:0; color:#626262; }
img{ margin:0; padding:0; border:0; }
p{ margin: 0px 0px 1em 0;}
b,strong {font-weight: bold;}
table { border-collapse: collapse; border-spacing: 0;/* Remove most spacing between table cells.*/}
li{ list-style: none outside none;}

/*链接*/
a{ text-decoration:none; color:#626262; background: transparent;  outline:none}
a:visited {}
a:focus { outline:none; }
a:hover, a:active{ color:#0F66CD; outline:none;}

/*标题*/
h1 { font-size: 1.3em;margin:  0;}
h2 {font-size: 1.2em; margin: 0;}
h3 { font-size: 1.17em;margin: 0;}
h4 {font-size: 1em;margin:0;}
h5 {font-size: 0.83em;margin: 0;}
h6 { font-size: 0.67em;margin: 0;}

/*表单*/
form {margin: 0;}
button,input,select,textarea {
    font-size: 100%;  /* Correct font size not being inherited in all browsers. */
    margin: 0;  /* Address margins set differently in IE 6/7, Firefox 3+, Safari 5,and Chrome */
    vertical-align: baseline; /* Improve appearance and consistency in all browsers */
    *vertical-align: middle; /* Improve appearance and consistency in all browsers */
}
button,select {text-transform: none;}
input{  -webkit-border-radius:5px; -moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	background-color: #FFFFFF;	border: 1px solid #E8E8E8;	margin: 3px 0px;
	padding: 5px 3px;	width:99%;	line-height: normal;
}
textarea{	-webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px;border-radius:5px; 
-moz-box-sizing: border-box;  background-color: #FFFFFF;	border: 1px solid #E8E8E8;
margin: 3px 0px;padding: 5px 3px;	width:99%;
}

/*其它*/
blockquote {margin: 1em 40px;}
dfn {font-style: italic;}
hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
code, kbd, pre, samp {font-size: 1em;}
pre {margin: 1em 0; white-space: pre;white-space: pre-wrap;word-wrap: break-word; }
small {font-size: 80%;}
sub,sup {font-size: 75%;line-height: 0; position: relative;vertical-align: baseline; /* Prevent `sub` and `sup` affecting `line-height` in all browsers.*/}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
dl{margin: 1em 0;}
dd {margin: 0 0 0 40px;}
audio:not([controls]) {display: none; height: 0;}
/*==========@@HTML默认  结束@@==========*/


/*==========@@通用 开始@@==========*/
/*常用颜色*/
.blue {color: #00F !important;}
.green {color: #0F0 !important;}
.red {color: #F00 !important;}
.black {color: #000000 !important;}
.white {color: #FFFFFF !important;}
.gray { color:gray; !important; }
.purple { color:purple;  !important;}

/*清除浮动*/
.clear { display:block; clear:both;}
.float_left { float:left; }
.float_right { float:right; }

/*对齐方式*/
.left { text-align: left}
.right {text-align: right}
.center{ text-align: center}

/*其它*/
.hide { display:none; }  /*隐藏*/
.more{ float: right; padding-right:10px; } /*more链接*/
.more a{ color:#1863BF}
.code_image{ cursor: pointer; padding-bottom:6px;} /*验证码图片样式*/

/*必须输入，主要*/
.required{ color:red; font-weight:bold;}
.form_text_verifycode { width:80px; }
.form_radio{ width:auto; border:0;}
.form_checkbox{ width:auto; border:0}

/*按钮*/
.btn{	width:100%; padding:9px 0px;font-size:16px;text-decoration:none; margin:5px 0px; cursor:pointer;
	-webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
	background-color:#0088B4;border:1px solid #0369A1; color:#ffffff; display:block; text-align:center; 
	background-image:-o-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-moz-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-webkit-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-ms-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #0088B4),color-stop(1, #42CDE4));
	background-image:linear-gradient(bottom,  #0088B4 0%, #42CDE4 100%);
	-webkit-box-shadow:0 1px 0 #0D90BC inset, 0 1px 2px rgba(0, 0, 0, 0.5); 
	-moz-box-shadow:0 1px 0 #0D90BC inset, 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 0 #0D90BC inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	text-shadow:0 1px rgba(0, 0, 0, 0.2);
}

.btn_download{color:#ffffff; display:block; text-align:center; cursor:pointer;	
	width:80px; text-decoration:none; margin:0px; 
	background-color:#0088B4;border:1px solid #0369A1;
	background-image:-o-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-moz-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-webkit-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-ms-linear-gradient(bottom, #0088B4 0%, #42CDE4 100%);
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0, #0088B4),color-stop(1, #42CDE4));
	background-image:linear-gradient(bottom,  #0088B4 0%, #42CDE4 100%);
	-webkit-box-shadow:0 1px 0 #0D90BC inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0 1px 0 #0D90BC inset, 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 0 #0D90BC inset, 0 1px 2px rgba(0, 0, 0, 0.5);
	text-shadow:0 1px rgba(0, 0, 0, 0.2);
	-webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
	text-indent:0;
}

/*箭头*/
.arrow{ background:url(../images/system/arrow1.png) center center no-repeat; 	background-size:14px;
	width:30px; height:30px; display:block; float:right;vertical-align:middle;
}
/*==========@@通用 结束@@==========*/


/*==========@@布局  开始@@==========*/
body_index, .body_single, .body_article, .body_picture, .body_download, .body_video, .body_product,  .body_job, .body_guestbook, .body_feedback{ }
.index, .single, .article, .picture, .download, .video, .product, .job, .guestbook, .feedback{ width:99%; margin:0px auto }
#top, #logo, #navigation, #banner, #location, #announcement, #link, #copyright { width: 100%;  margin: 0px auto;}
.left_title{ height:30px; line-height:30px; border-top: 1px solid #ACD8FF; background: #EEF5FF; clear:both}
.left_title h2 {  color:#1863BF; height:30px; text-indent:10px; overflow:hidden;}
.left_title h2 a { color:#1863BF; }
.left_body{ padding:3px 5px;}
.left_bottom { clear:both; height:5px; }
/*==========@@布局  结束@@==========*/


/*==========@@公共模块 开始@@==========*/
/*Logo部分*/
#logo_mian{ position: relative; height: 50px; }
#logo{ position:relative; position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 99; background-color: #FFF; box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); }
#logo .WebLogo{ display: flex; align-items: center; }
#logo .WebLogo .WebLogo{ flex: 1; }
#logo .WebLogo .shownavbtn{ width: 1.6em; height: 12px; margin: 16px 15px 16px 0; border-top: 3px solid #666; border-bottom: 3px solid #666;
	display: flex; flex-direction: column; align-items: center; justify-content: center; }
#logo .WebLogo .shownavbtn:before{ content:""; display: block; width: 100%; height: 3px; background: #666; }
#logo .WebLogo img{ max-height: 40px; display:block;/*解决img底部空白的bug*/ margin-left: 5px;}

/*导航*/
#navigationshade { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0,0,0,.5); display: none; }
#navigationshade:after,#navigationshade:before{ content: ""; display: block; position: absolute; width: 20px; height: 2px; right: 315px; margin-left: -40px; top: 40px; background: #FFF; border-radius: 3px; }
#navigationshade:after{ transform: rotate(45deg); }
#navigationshade:before{ transform: rotate(-45deg); }

.navigationlist{ position: fixed; right: -300px; top: 0; background: #FFF; overflow-y: scroll; overflow-x: hidden; width: 300px; height: 100%; z-index: 10000; }
.seachwrap{ align-items: center; background: #f5f5f5; margin: 20px 20px 20px 30px; border-radius: 50px; overflow: hidden; }
.seachwrap form { display:flex; }
.seachwrap input{ margin: 0; border: 0; width:100%; line-height: 40px; outline: none; background: #f5f5f5; }
.seachwrap input.Keywords { flex:3; padding: 0 0 0 15px; }
.seachwrap input.btnSearch { flex:1; padding: 0 15px 0 0; background:url(../images/searchbtn.png) no-repeat center; }

.navigationlist li{ position: relative; } 
.navigationlist li i.HasChild{ position: absolute; width: 80px; height: 50px; right: 0; top: 0; }
.navigationlist li i.HasChild:after,.navigationlist li i.HasChild:before{ content:''; display: block; background: #666; margin: auto; border-radius: 2px;
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 10px; height: 2px; }
.navigationlist li i.HasChild:before{ width: 2px; height: 10px; }
.navigationlist a{ position: relative; line-height: 50px; font-size:14px; color:#444; overflow:hidden; display:block; margin-left: 50px; }
.navigationlist a.current{ color:#000; font-weight: bold; }

.sub_navigationlist{ display: none; }
.sub_navigationlist a{ margin-left: 80px; }

/*===FlexSlider幻灯片  开始===*/
#banner { margin-bottom:5px; }
/*幻灯片标题*/
 .flex-caption { width:100%; padding:3px 0px; position: absolute; bottom: 3px;color: #fff;text-align: right;font-size: 14px;line-height: 22px;height:22px;}
/* FlexSlider Necessary Styles*/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0px; background: #fff; border: 0px solid #fff; position: relative;  zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
/*.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}*/
.flex-control-nav{ width: 100%;position:absolute; bottom:10px;  margin:0px; text-align: center; border:0px dashed red}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
/*===FlexSlider幻灯片  结束===*/

/*当前位置*/
#location{ background:url(../images/location.jpg) no-repeat center; margin:5px 0; border-bottom: 0px solid #167312;color:#626262;  height:34px; line-height:34px; clear:both; text-indent:13px;}
#location a{color:#626262}

/*搜索 */
.search{width:98%;margin:0px auto}
.searchresult{ font-weight:bold; font-size:18px;}

/*评论*/
.comment{}
.CommentList h1{ border-bottom:1px #999999 dotted; padding:5px 0px;} /*评论列表标题*/
.LeaveComment h1{ border-bottom:1px #999999 dotted; padding:5px 0px; } /*我要评论标题*/
.CommentTime {}
.CommentContent { color:#999999 }
table.comment_table{ width:100%;  }
table.comment_table	.t1{ width:28%; text-align:left}
table.comment_table	.t2{ height:72%; text-align:left}

/*分页条*/
.page {padding:1px; height:auto; clear:both; line-height:0.5em; text-align:center; margin-top:5px;}
.page a, .page span {border:1px solid #D3D1D1; padding:2px 3px; margin: 3px 0px 3px 4px; line-height:22px; background-color:#FFFFFF}
.page a:link, .page_turner a:visited { text-decoration:none; }
.page a:hover { background:#CC0001; color:#ff9900; }
.page .current{ background:#CC0001; color:#FFF;}
.page #total{color:red}
.page .pageinfo{ display: none}
.page .pagefirst{ display: none}
.page .pageend{ display: none}

/*分享按钮*/
.tool{width:95%; margin:0px auto;  text-align:center;}
.tool a{color:#000; font-size:16px}
.tool table{ width:100%; margin:5px 0px }
.tool td{ padding: 3px 5px; width:50%; text-align:center}

/*分享到朋友圈弹出框提示*/
#guide{ position: fixed;	top:0;	left:0;	width:100%;	height:100%;background:rgba(0, 0, 0, 0.7);	display:none;z-index:20000;}
#guide img {position: fixed;right: 18px;top:5px;width: 260px;height: 180px; z-index:20001;}


/*版权信息*/
#copyright{ padding:3px 0px; text-align:center; font-size:14px; color:#666; border:0px solid red; margin-bottom:49px; }
#copyright a{color:#666; font-size:14px;}
#copyright .TechnicalSupport{ text-align:center; padding-bottom:5px;font-size:14px; color:#000; }
#copyright .TechnicalSupport a { font-size:14px; color:#000;}
#copyright .bottom_copyright{ padding:3px 0px; font-size:14px; color:#000;  }
#copyright .bottom_navigation{ text-align:center; height:35px; line-height:35px; background:#71C6A0; font-size:14px; display:none}
#copyright .bottom_navigation a{ font-weight:normal; color:#000 }
#copyright .Mobile{text-align:center; height:35px; line-height:35px; background:#D9F0FF;}
#copyright .Mobile a{ font-weight:normal; color:#000; font-weight:bold;}
#copyright .Language{padding:10px 0px 0px 0px;  color:#666; text-align:center;}

/*底部固定工具条*/
#tool { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
ul.toollist { position: fixed; z-index: 900; bottom: 0; left: 0; right: 0;margin: auto; display: block; height: 48px;}
.toollist li{ float:left;width: auto;  height: 100%;width:25%;position: static!important;  margin: 0;
border-radius: 0!important; -webkit-box-sizing: border-box;box-sizing: border-box; -webkit-box-flex: 1; box-flex: 1;
-webkit-box-sizing: border-box; box-shadow: none!important; background: none;
}
.toollist li a {font-size: 20px;line-height: 20px;text-align: center;display: block;text-decoration: none;padding-top: 2px;position:relative;}
.toollist li a img{width:24px;height:24px;}
.toollist li a p{margin: 1px 0 1px 0;font-size: 14px;display: block !important;line-height: 18px;text-align: center;}
/*绿色主题*/
.toollist {	border-top: 1px solid #2C8DB2; 
	background-image:-o-linear-gradient(top,  #5FB1DA,  #0A7598);
	background-image:-ms-linear-gradient(top,  #5FB1DA,  #0A7598);
	background-image:-moz-linear-gradient(top,  #5FB1DA,  #0A7598);
	background-image:-webkit-linear-gradient(top, #5FB1DA,  #0A7598);
	background-image:linear-gradient(top,  #5FB1DA,  #0A7598);
	-moz-box-shadow: 0 1px 0 #eee inset;-webkit-box-shadow: 0 1px 0 #eee inset;	
	-o-box-shadow: 0 1px 0 #eee inset;box-shadow: 0 1px 0 #eee inset;
}
.toollist li{ border-right: 1px solid rgba(255, 255, 255, 0.6);}
.toollist li a {color: #fff;}
/*==========@@公共模块 结束@@==========*/


/*==========@@频道页面 开始@@==========*/
/*===公共字段 开始===*/
.ChannelName{}
.ChannelContent{ clear:both; padding:3px; line-height:1.8em}
.ChannelSContent{}

.InfoTitle, .ChannelName{ font-size:15px; line-height: 1.5em; vertical-align:middle; font-weight:bold;}
.InfoTime{color:#999; text-align:left; font-size:12px; padding:2px 0px; height:25px}
.InfoContent{ font-size:17px; line-height:1.8em}
.InfoContent p{ font-size:17px}
.InfoPicture{ text-align: center;}
.InfoPicture img{width:100%;}
.f1{}
.f2{}
.f3{}
.f4{}
.f5{}
.ShowInfo{ height: 30px; line-height: 1.5em; font-size:18px; border-top: 1px solid #bdbec1; vertical-align:middle; padding-top:5px; color:#000000}
#ReadLevelTip{ font-weight:bold; color:red;}
.Tag{ text-align: left; font-weight:bold; }
.Tag b{}
.Tag a{ padding:0 3px; font-weight:normal; text-decoration:none;}
.InfoContent img, .ChannelContent img{max-width:100%; }
#dituContent img{ max-width:none;}
/*===公共字段 结束===*/

/*招聘*/
.job{ }
table.job_table { border:0px solid #16b7b7; margin:8px 0px; padding:0px; text-align:center; width:100%; border-collapse:collapse;}
table.job_table td{ padding:5px 2px;}
table.job_table th{color:#000;}
.JobName{ font-size:20px; border-bottom: 1px dotted #999; padding:3px 8px; font-weight:bold;}

/*留言*/
.guestbook{ }
.guestbook .ChannelName h1{ border-bottom:1px dotted #CCCCCC; padding:5px 0px;}
table.guestbook_table{ width:100%;}
table.guestbook_table .t1{ width:25%; text-align:left }
table.guestbook_table .t2{ width:75%; text-align:left;}

/*反馈*/
.feedback{ }
.feedback .ChannelName h1{ border-bottom:1px dotted #CCCCCC;  }
table.feedback_table{ width:100%;}
table.feedback_table .t1{ width:25%; text-align:left }
table.feedback_table .t2{ width:75%; text-align:left;}

/*订购*/
.order{width:98%;margin:0px auto}
.order .WantOrder h1{ border-bottom:1px dotted #999999; padding: 5px 0px;}
.order .f1{ float:right; color:red;}
.order table.order_table{ width:100%;  }
.order table.order_table .t1{ width:28%; text-align:left}
.order table.order_table	 .t2{ height:72%; text-align:left}

/*地图*/
.sitemaplist li{border-bottom:1px dashed #d0d1d4;padding: 0.5em 8px; background-color:#FFF}
.sitemaplist li .ChannelName{ font-weight:bold;}
.sitemaplist li .ChannelDepth1{ font-weight:bold;}
.sitemaplist li .ChannelDepth2{text-indent: 2em; }
.sitemaplist li .ChannelDepth3{text-indent: 4em; }
.sitemaplist li .ChannelDepth4{text-indent: 6em; }
.sitemaplist li .ChannelDepth5{text-indent: 8em; }
/*==========@@频道页面 结束@@==========*/


/*==========@@通用列表 开始@@==========*/
/*列表全局样式*/
.textlist li, .gridlist li, .wxlist li, .thumblist li{ font-size:16px; line-height:1.5em; vertical-align:middle; background-color:#FFF; overflow:hidden;}
.textlist li:hover, .thumblist li:hover, .gridlist li:hover{cursor:pointer;}

/*文本列表*/
.textlist li{background:url(../images/textlist.jpg) left center no-repeat; text-indent:14px;padding: 5px 0px; 
text-overflow:ellipsis; white-space:nowrap;border-bottom:1px dotted #246B9F;
}
.textlist li.first{ background:none; padding-left:3px;}
.textlist li .InfoTime{ display: none;}
.textlist li .InfoContent{ font-size:14px; color:#636363; white-space:normal; display:block; height:7.4em; }
.textlist li img{ float:left; width:85px; margin-right:5px; border:1px solid #127073; }

/*带缩略图文本列表*/
.thumblist{}
.thumblist li {line-height:1.8em;overflow:hidden;width:100%; margin-bottom:5px;}
.thumblist li img{ float:left; width:90px; margin-right:8px; border:1px solid #999999; }
.thumblist li a:hover img { border:1px solid #034b9f; }
.thumblist li .InfoTitle{color:#000000;}
.thumblist li p{height:3em; overflow:hidden; color:#999; line-height:1.5em; margin:0px;}

/*橱窗列表*/
.gridlist li{width:33%;overflow:hidden;float:left; line-height:0em;}
.gridlist li .InfoTitle{ white-space: nowrap; height: 30px; line-height:30px; overflow: hidden; font-size:14px; padding:0px 5px; text-align:center;}
.gridlist li .InfoPicture { padding:0px 5px; }
.gridlist li .InfoPicture img{ border:1px solid #3590C2; }

/*微信列表*/
.wxlist li{overflow:hidden;
	-moz-border-radius: 5px 5px 10px 10px; -webkit-border-radius: 5px 5px 10px 10px;-o-border-radius:5px 5px 10px 10px; border-radius: 5px 5px 10px 10px; 
	border:0px solid #d0d1d4;margin: 10px auto;	padding: 8px 8px;
	/*
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);  -moz-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.25);-o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
	background: url(../images/bottom.png) repeat-x scroll left bottom #FFFFFF;
	background-size:2px auto;*/
}
.wxlist li .InfoTime{}
.wxlist li .GoTop{ text-align:center; font-weight:bold; height:30px; line-height:30px; color:#000}
.wxlist li .InfoPicture, .wxlist li .ChannelPicture{ border: 0px solid red}
.wxlist li .InfoPicture img, .wxlist li .ChannelPicture img{ width:100%;}
.wxlist li .InfoSContent, .wxlist li .ChannelSContent{ line-height: 1.5em; border:0px solid #900; padding:5px 2px; color:#222222; font-size:14px;}
.wxlist li .ShowInfo{ }
/*侧边时间显示*/
.wxlist .InfoTimeSide {margin:10px 8px 0px 0px;width:auto;font-size:12px;float:left;
background-color:#0088B4;padding:5px;position:relative;
-webkit-border-radius:12px;-moz-border-radius:12px;-o-border-radius:12px;border-radius:12px;
-webkit-box-shadow:0 2px 1px 0 rgba(0,0,0,0.14);-moz-box-shadow:0 2px 1px 0 rgba(0,0,0,0.14);-o-box-shadow:0 2px 1px 0 rgba(0,0,0,0.14);box-shadow:0 2px 1px 0 rgba(0,0,0,0.14);
font-family:Georgia,"Times New Roman",Times,serif;
}
.wxlist  InfoTimeSide p{color:#FFF}
.wxlist  .InfoTimeSide p b {font-size:20px; }
.wxlist  .InfoTimeSide p i {font-size:11px; }
.wxlist  .InfoTimeSide span {position:absolute;top:10px;right:-4px;
-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
width:12px;height:12px;transform:rotate(45deg) ;background-color:#0088B4;
-webkit-transform:rotate(45deg) ;-moz-transform:rotate(45deg) ;-o-transform:rotate(45deg) ;-ms-transform:rotate(45deg) ;
}

/*频道列表*/
.subchannellist{ width:99%;border:0px solid red; margin:0px auto;}
.subchannellist li{float:left;text-align: center; border:0px dashed blue; width:25%; }
.subchannellist li a{display:block; margin:8px 3px;  padding:5px 0px;
	background-color:#E8F6FF;border:1px solid #95E2FF ;
	-webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; border-radius:3px;
	-webkit-box-shadow: 0px 1px 3px #5CAEDB; -moz-box-shadow: 0px 1px 3px #5CAEDB; 
	-o-box-shadow: 0px 1px 3px #5CAEDB; box-shadow: 0px 1px 3px #5CAEDB;
}
.subchannellist #current a { color:#FFF; background:#3d8a32;}
/*==========@@通用列表 结束@@==========*/


/*==========@@以下是动画 开始@@==========*/

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

/*初始化动画元素*/
.right_body li,.left_body li,.index li,.more{ opacity: 0; }

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animatedslow { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animatedRapid{ -webkit-animation-duration: .2s; animation-duration: .2s; animation-timing-function:ease; -webkit-animation-timing-function:ease;}
.animated0,.animated1,.animated2,.animated3,.animated4,.animated5,.animated6,.animated7,.animated8{ -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function:ease; -webkit-animation-timing-function:ease;}
.animated0 { -webkit-animation-duration: .2s; animation-duration: .2s;}
.animated1 { -webkit-animation-duration: .5s; animation-duration: .5s;}
.animated2 { -webkit-animation-duration: .6s; animation-duration: .6s;}
.animated3 { -webkit-animation-duration: .7s; animation-duration: .7s;}
.animated4 { -webkit-animation-duration: .8s; animation-duration: .8s;}
.animated5 { -webkit-animation-duration: .9s; animation-duration: .9s;}
.animated6 { -webkit-animation-duration: 1s; animation-duration: 1s;}
.animated7 { -webkit-animation-duration: 1.1s; animation-duration: 1.1s;}
.animated8 { -webkit-animation-duration: 1.2s; animation-duration: 1.2s;}

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

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

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s;}

@-webkit-keyframes skewingTop {   from {       -webkit-transform: translate3d(0,0,0);       transform: translate3d(0,0,0);   }   50% {       -webkit-transform: translate3d(0,-8px,0);       transform: translate3d(0,-8px,0);   }   to {       -webkit-transform: translate3d(0,-8px,0);       transform: translate3d(0,-8px,0);   }}
@keyframes skewingTop {   from {       -webkit-transform: translate3d(0,0,0);       transform: translate3d(0,0,0);   }   50% {       -webkit-transform: translate3d(0,-8px,0);       transform: translate3d(0,-8px,0);   }   to {       -webkit-transform: translate3d(0,-8px,0);       transform: translate3d(0,-8px,0);   }}
.skewingTop{   -webkit-animation-name: skewingTop;   animation-name: skewingTop;}

@-webkit-keyframes bounce { from, 20%, 53%, 80%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   -webkit-transform: translate3d(0,0,0);   transform: translate3d(0,0,0); }
 40%, 43% {   -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   -webkit-transform: translate3d(0, -30px, 0);   transform: translate3d(0, -30px, 0); }
 70% {   -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   -webkit-transform: translate3d(0, -15px, 0);   transform: translate3d(0, -15px, 0); }
 90% {   -webkit-transform: translate3d(0,-4px,0);   transform: translate3d(0,-4px,0); }}

@keyframes bounce { from, 20%, 53%, 80%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   -webkit-transform: translate3d(0,0,0);   transform: translate3d(0,0,0); }
 40%, 43% {   -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   -webkit-transform: translate3d(0, -30px, 0);   transform: translate3d(0, -30px, 0); }
 70% {   -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);   -webkit-transform: translate3d(0, -15px, 0);   transform: translate3d(0, -15px, 0); }
 90% {   -webkit-transform: translate3d(0,-4px,0);   transform: translate3d(0,-4px,0); }}

.bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom;}

@-webkit-keyframes flash { from, 50%, to {   opacity: 1; }
 25%, 75% {   opacity: 0; }}

@keyframes flash { from, 50%, to {   opacity: 1; }
 25%, 75% {   opacity: 0; }}

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

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

@-webkit-keyframes pulse { from {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }
 50% {   -webkit-transform: scale3d(1.05, 1.05, 1.05);   transform: scale3d(1.05, 1.05, 1.05); }
 to {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

@keyframes pulse { from {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }
 50% {   -webkit-transform: scale3d(1.05, 1.05, 1.05);   transform: scale3d(1.05, 1.05, 1.05); }
 to {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

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

@-webkit-keyframes rubberBand { from {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }
 30% {   -webkit-transform: scale3d(1.25, 0.75, 1);   transform: scale3d(1.25, 0.75, 1); }
 40% {   -webkit-transform: scale3d(0.75, 1.25, 1);   transform: scale3d(0.75, 1.25, 1); }
 50% {   -webkit-transform: scale3d(1.15, 0.85, 1);   transform: scale3d(1.15, 0.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: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

@keyframes rubberBand { from {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }
 30% {   -webkit-transform: scale3d(1.25, 0.75, 1);   transform: scale3d(1.25, 0.75, 1); }
 40% {   -webkit-transform: scale3d(0.75, 1.25, 1);   transform: scale3d(0.75, 1.25, 1); }
 50% {   -webkit-transform: scale3d(1.15, 0.85, 1);   transform: scale3d(1.15, 0.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: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

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

@-webkit-keyframes shake { from, to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 10%, 30%, 50%, 70%, 90% {   -webkit-transform: translate3d(-10px, 0, 0);   transform: translate3d(-10px, 0, 0); }
 20%, 40%, 60%, 80% {   -webkit-transform: translate3d(10px, 0, 0);   transform: translate3d(10px, 0, 0); }}

@keyframes shake { from, to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 10%, 30%, 50%, 70%, 90% {   -webkit-transform: translate3d(-10px, 0, 0);   transform: translate3d(-10px, 0, 0); }
 20%, 40%, 60%, 80% {   -webkit-transform: translate3d(10px, 0, 0);   transform: translate3d(10px, 0, 0); }}

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

@-webkit-keyframes 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: rotate3d(0, 0, 1, 15deg);   transform: rotate3d(0, 0, 1, 15deg); }
 40% {   -webkit-transform: rotate3d(0, 0, 1, -10deg);   transform: rotate3d(0, 0, 1, -10deg); }
 60% {   -webkit-transform: rotate3d(0, 0, 1, 5deg);   transform: rotate3d(0, 0, 1, 5deg); }
 80% {   -webkit-transform: rotate3d(0, 0, 1, -5deg);   transform: rotate3d(0, 0, 1, -5deg); }
 to {   -webkit-transform: rotate3d(0, 0, 1, 0deg);   transform: rotate3d(0, 0, 1, 0deg); }}

@keyframes swing { 20% {   -webkit-transform: rotate3d(0, 0, 1, 15deg);   transform: rotate3d(0, 0, 1, 15deg); }
 40% {   -webkit-transform: rotate3d(0, 0, 1, -10deg);   transform: rotate3d(0, 0, 1, -10deg); }
 60% {   -webkit-transform: rotate3d(0, 0, 1, 5deg);   transform: rotate3d(0, 0, 1, 5deg); }
 80% {   -webkit-transform: rotate3d(0, 0, 1, -5deg);   transform: rotate3d(0, 0, 1, -5deg); }
 to {   -webkit-transform: rotate3d(0, 0, 1, 0deg);   transform: rotate3d(0, 0, 1, 0deg); }}

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

@-webkit-keyframes tada { from {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }
 10%, 20% {   -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);   transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
 30%, 50%, 70%, 90% {   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);   transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
 40%, 60%, 80% {   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);   transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
 to {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

@keyframes tada { from {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }
 10%, 20% {   -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);   transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
 30%, 50%, 70%, 90% {   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);   transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
 40%, 60%, 80% {   -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);   transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
 to {   -webkit-transform: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

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

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

@-webkit-keyframes wobble { from {   -webkit-transform: none;   transform: none; }
 15% {   -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);   transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
 30% {   -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);   transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
 45% {   -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);   transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
 60% {   -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);   transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
 75% {   -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);   transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
 to {   -webkit-transform: none;   transform: none; }}

@keyframes wobble { from {   -webkit-transform: none;   transform: none; }
 15% {   -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);   transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
 30% {   -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);   transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
 45% {   -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);   transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
 60% {   -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);   transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
 75% {   -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);   transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
 to {   -webkit-transform: none;   transform: none; }}

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

@-webkit-keyframes jello { from, 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(-0.78125deg) skewY(-0.78125deg);   transform: skewX(-0.78125deg) skewY(-0.78125deg); }
 77.7% {   -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);   transform: skewX(0.390625deg) skewY(0.390625deg); }
 88.8% {   -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);   transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }}

@keyframes jello { from, 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(-0.78125deg) skewY(-0.78125deg);   transform: skewX(-0.78125deg) skewY(-0.78125deg); }
 77.7% {   -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);   transform: skewX(0.390625deg) skewY(0.390625deg); }
 88.8% {   -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);   transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }}

.jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center;}

@-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 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: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

@keyframes bounceIn { from, 20%, 40%, 60%, 80%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 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: scale3d(1, 1, 1);   transform: scale3d(1, 1, 1); }}

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

@-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 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 { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 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 { position: relative; -webkit-animation-name: bounceInDown; animation-name: bounceInDown;}

@-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 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 { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 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 { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 from {   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 { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 from {   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 { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 from {   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: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

@keyframes bounceInUp { from, 60%, 75%, 90%, to {   -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
 from {   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: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

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

@-webkit-keyframes bounceOut { 20% {   -webkit-transform: scale3d(.9, .9, .9);   transform: scale3d(.9, .9, .9); }
 50%, 55% {   opacity: 1;   -webkit-transform: scale3d(1.1, 1.1, 1.1);   transform: scale3d(1.1, 1.1, 1.1); }
 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 { from {   opacity: 0; }
 to {   opacity: 1; }}

@keyframes fadeIn { from {   opacity: 0; }
 to {   opacity: 1; }}

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

@-webkit-keyframes fadeInDown { from {   opacity: 0;   -webkit-transform: translate3d(0, -100%, 0);   transform: translate3d(0, -100%, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInDown { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(0, -2000px, 0);   transform: translate3d(0, -2000px, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInDownBig { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(-100%, 0, 0);   transform: translate3d(-100%, 0, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInLeft { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(-2000px, 0, 0);   transform: translate3d(-2000px, 0, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInLeftBig { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(100%, 0, 0);   transform: translate3d(100%, 0, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInRight { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(2000px, 0, 0);   transform: translate3d(2000px, 0, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInRightBig { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(0, 100%, 0);   transform: translate3d(0, 100%, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInUp { from {   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 { from {   opacity: 0;   -webkit-transform: translate3d(0, 2000px, 0);   transform: translate3d(0, 2000px, 0); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes fadeInUpBig { from {   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 { from {   opacity: 1; }
 to {   opacity: 0; }}

@keyframes fadeOut { from {   opacity: 1; }
 to {   opacity: 0; }}

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

@-webkit-keyframes fadeOutDown { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(0, 100%, 0);   transform: translate3d(0, 100%, 0); }}

@keyframes fadeOutDown { from {   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 { from {   opacity: 1; }




 to {   opacity: 0;   -webkit-transform: translate3d(0, 2000px, 0);   transform: translate3d(0, 2000px, 0); }}

@keyframes fadeOutDownBig { from {   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 { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(-100%, 0, 0);   transform: translate3d(-100%, 0, 0); }}

@keyframes fadeOutLeft { from {   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 { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(-2000px, 0, 0);   transform: translate3d(-2000px, 0, 0); }}

@keyframes fadeOutLeftBig { from {   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 { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(100%, 0, 0);   transform: translate3d(100%, 0, 0); }}

@keyframes fadeOutRight { from {   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 { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(2000px, 0, 0);   transform: translate3d(2000px, 0, 0); }}

@keyframes fadeOutRightBig { from {   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 { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(0, -100%, 0);   transform: translate3d(0, -100%, 0); }}

@keyframes fadeOutUp { from {   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 { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(0, -2000px, 0);   transform: translate3d(0, -2000px, 0); }}

@keyframes fadeOutUpBig { from {   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 { from {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);   transform: perspective(400px) rotate3d(0, 1, 0, -360deg);   -webkit-animation-timing-function: ease-out;   animation-timing-function: ease-out; }
 40% {   -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);   transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);   -webkit-animation-timing-function: ease-out;   animation-timing-function: ease-out; }
 50% {   -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);   transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 80% {   -webkit-transform: perspective(400px) scale3d(.95, .95, .95);   transform: perspective(400px) scale3d(.95, .95, .95);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 to {   -webkit-transform: perspective(400px);   transform: perspective(400px);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }}

@keyframes flip { from {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);   transform: perspective(400px) rotate3d(0, 1, 0, -360deg);   -webkit-animation-timing-function: ease-out;   animation-timing-function: ease-out; }
 40% {   -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);   transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);   -webkit-animation-timing-function: ease-out;   animation-timing-function: ease-out; }
 50% {   -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);   transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 80% {   -webkit-transform: perspective(400px) scale3d(.95, .95, .95);   transform: perspective(400px) scale3d(.95, .95, .95);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 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 { from {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in;   opacity: 0; }
 40% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 60% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);   transform: perspective(400px) rotate3d(1, 0, 0, 10deg);   opacity: 1; }
 80% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);   transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
 to {   -webkit-transform: perspective(400px);   transform: perspective(400px); }}

@keyframes flipInX { from {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in;   opacity: 0; }
 40% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 60% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);   transform: perspective(400px) rotate3d(1, 0, 0, 10deg);   opacity: 1; }
 80% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);   transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
 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 { from {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in;   opacity: 0; }
 40% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);   transform: perspective(400px) rotate3d(0, 1, 0, -20deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 60% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);   transform: perspective(400px) rotate3d(0, 1, 0, 10deg);   opacity: 1; }
 80% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);   transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
 to {   -webkit-transform: perspective(400px);   transform: perspective(400px); }}

@keyframes flipInY { from {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in;   opacity: 0; }
 40% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);   transform: perspective(400px) rotate3d(0, 1, 0, -20deg);   -webkit-animation-timing-function: ease-in;   animation-timing-function: ease-in; }
 60% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);   transform: perspective(400px) rotate3d(0, 1, 0, 10deg);   opacity: 1; }
 80% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);   transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
 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 { from {   -webkit-transform: perspective(400px);   transform: perspective(400px); }
 30% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   opacity: 1; }
 to {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   opacity: 0; }}

@keyframes flipOutX { from {   -webkit-transform: perspective(400px);   transform: perspective(400px); }
 30% {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   transform: perspective(400px) rotate3d(1, 0, 0, -20deg);   opacity: 1; }
 to {   -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   transform: perspective(400px) rotate3d(1, 0, 0, 90deg);   opacity: 0; }}

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

@-webkit-keyframes flipOutY { from {   -webkit-transform: perspective(400px);   transform: perspective(400px); }
 30% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);   transform: perspective(400px) rotate3d(0, 1, 0, -15deg);   opacity: 1; }
 to {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   opacity: 0; }}

@keyframes flipOutY { from {   -webkit-transform: perspective(400px);   transform: perspective(400px); }
 30% {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);   transform: perspective(400px) rotate3d(0, 1, 0, -15deg);   opacity: 1; }
 to {   -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   transform: perspective(400px) rotate3d(0, 1, 0, 90deg);   opacity: 0; }}

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

@-webkit-keyframes lightSpeedIn { from {   -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);   transform: translate3d(100%, 0, 0) skewX(-30deg);   opacity: 0; }
 60% {   -webkit-transform: skewX(20deg);   transform: skewX(20deg);   opacity: 1; }
 80% {   -webkit-transform: skewX(-5deg);   transform: skewX(-5deg);   opacity: 1; }
 to {   -webkit-transform: none;   transform: none;   opacity: 1; }}

@keyframes lightSpeedIn { from {   -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);   transform: translate3d(100%, 0, 0) skewX(-30deg);   opacity: 0; }
 60% {   -webkit-transform: skewX(20deg);   transform: skewX(20deg);   opacity: 1; }
 80% {   -webkit-transform: skewX(-5deg);   transform: skewX(-5deg);   opacity: 1; }
 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 { from {   opacity: 1; }
 to {   -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);   transform: translate3d(100%, 0, 0) skewX(30deg);   opacity: 0; }}

@keyframes lightSpeedOut { from {   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 { from {   -webkit-transform-origin: center;   transform-origin: center;   -webkit-transform: rotate3d(0, 0, 1, -200deg);   transform: rotate3d(0, 0, 1, -200deg);   opacity: 0; }
 to {   -webkit-transform-origin: center;   transform-origin: center;   -webkit-transform: none;   transform: none;   opacity: 1; }}

@keyframes rotateIn { from {   -webkit-transform-origin: center;   transform-origin: center;   -webkit-transform: rotate3d(0, 0, 1, -200deg);   transform: rotate3d(0, 0, 1, -200deg);   opacity: 0; }
 to {   -webkit-transform-origin: center;   transform-origin: center;   -webkit-transform: none;   transform: none;   opacity: 1; }}

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

@-webkit-keyframes rotateInDownLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, -45deg);   transform: rotate3d(0, 0, 1, -45deg);   opacity: 0; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

@keyframes rotateInDownLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, -45deg);   transform: rotate3d(0, 0, 1, -45deg);   opacity: 0; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

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

@-webkit-keyframes rotateInDownRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, 45deg);   transform: rotate3d(0, 0, 1, 45deg);   opacity: 0; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

@keyframes rotateInDownRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, 45deg);   transform: rotate3d(0, 0, 1, 45deg);   opacity: 0; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

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

@-webkit-keyframes rotateInUpLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, 45deg);   transform: rotate3d(0, 0, 1, 45deg);   opacity: 0; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

@keyframes rotateInUpLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, 45deg);   transform: rotate3d(0, 0, 1, 45deg);   opacity: 0; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

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

@-webkit-keyframes rotateInUpRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, -90deg);   transform: rotate3d(0, 0, 1, -90deg);   opacity: 0; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

@keyframes rotateInUpRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, -90deg);   transform: rotate3d(0, 0, 1, -90deg);   opacity: 0; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: none;   transform: none;   opacity: 1; }}

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

@-webkit-keyframes rotateOut { from {   -webkit-transform-origin: center;   transform-origin: center;   opacity: 1; }
 to {   -webkit-transform-origin: center;   transform-origin: center;   -webkit-transform: rotate3d(0, 0, 1, 200deg);   transform: rotate3d(0, 0, 1, 200deg);   opacity: 0; }}

@keyframes rotateOut { from {   -webkit-transform-origin: center;   transform-origin: center;   opacity: 1; }
 to {   -webkit-transform-origin: center;   transform-origin: center;   -webkit-transform: rotate3d(0, 0, 1, 200deg);   transform: rotate3d(0, 0, 1, 200deg);   opacity: 0; }}

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

@-webkit-keyframes rotateOutDownLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   opacity: 1; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, 45deg);   transform: rotate3d(0, 0, 1, 45deg);   opacity: 0; }}

@keyframes rotateOutDownLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   opacity: 1; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, 45deg);   transform: rotate3d(0, 0, 1, 45deg);   opacity: 0; }}

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

@-webkit-keyframes rotateOutDownRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   opacity: 1; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, -45deg);   transform: rotate3d(0, 0, 1, -45deg);   opacity: 0; }}

@keyframes rotateOutDownRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   opacity: 1; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, -45deg);   transform: rotate3d(0, 0, 1, -45deg);   opacity: 0; }}

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

@-webkit-keyframes rotateOutUpLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   opacity: 1; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, -45deg);   transform: rotate3d(0, 0, 1, -45deg);   opacity: 0; }}

@keyframes rotateOutUpLeft { from {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   opacity: 1; }
 to {   -webkit-transform-origin: left bottom;   transform-origin: left bottom;   -webkit-transform: rotate3d(0, 0, 1, -45deg);   transform: rotate3d(0, 0, 1, -45deg);   opacity: 0; }}

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

@-webkit-keyframes rotateOutUpRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   opacity: 1; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, 90deg);   transform: rotate3d(0, 0, 1, 90deg);   opacity: 0; }}

@keyframes rotateOutUpRight { from {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   opacity: 1; }
 to {   -webkit-transform-origin: right bottom;   transform-origin: right bottom;   -webkit-transform: rotate3d(0, 0, 1, 90deg);   transform: rotate3d(0, 0, 1, 90deg);   opacity: 0; }}

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

@-webkit-keyframes hinge { 0% {   -webkit-transform-origin: top left;   transform-origin: top left;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out; }
 20%, 60% {   -webkit-transform: rotate3d(0, 0, 1, 80deg);   transform: rotate3d(0, 0, 1, 80deg);   -webkit-transform-origin: top left;   transform-origin: top left;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out; }
 40%, 80% {   -webkit-transform: rotate3d(0, 0, 1, 60deg);   transform: rotate3d(0, 0, 1, 60deg);   -webkit-transform-origin: top left;   transform-origin: top left;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out;   opacity: 1; }
 to {   -webkit-transform: translate3d(0, 700px, 0);   transform: translate3d(0, 700px, 0);   opacity: 0; }}

@keyframes hinge { 0% {   -webkit-transform-origin: top left;   transform-origin: top left;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out; }
 20%, 60% {   -webkit-transform: rotate3d(0, 0, 1, 80deg);   transform: rotate3d(0, 0, 1, 80deg);   -webkit-transform-origin: top left;   transform-origin: top left;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out; }
 40%, 80% {   -webkit-transform: rotate3d(0, 0, 1, 60deg);   transform: rotate3d(0, 0, 1, 60deg);   -webkit-transform-origin: top left;   transform-origin: top left;   -webkit-animation-timing-function: ease-in-out;   animation-timing-function: ease-in-out;   opacity: 1; }
 to {   -webkit-transform: translate3d(0, 700px, 0);   transform: translate3d(0, 700px, 0);   opacity: 0; }}

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

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

@-webkit-keyframes rollIn { from {   opacity: 0;   -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);   transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

@keyframes rollIn { from {   opacity: 0;   -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);   transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
 to {   opacity: 1;   -webkit-transform: none;   transform: none; }}

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

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

@-webkit-keyframes rollOut { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);   transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }}

@keyframes rollOut { from {   opacity: 1; }
 to {   opacity: 0;   -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);   transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }}

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

@-webkit-keyframes zoomIn { from {   opacity: 0;   -webkit-transform: scale3d(.3, .3, .3);   transform: scale3d(.3, .3, .3); }
 50% {   opacity: 1; }}

@keyframes zoomIn { from {   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 { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);   transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);   transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

@keyframes zoomInDown { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);   transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);   transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

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

@-webkit-keyframes zoomInLeft { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);   transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);   transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

@keyframes zoomInLeft { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);   transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);   transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

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

@-webkit-keyframes zoomInRight { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);   transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);   transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

@keyframes zoomInRight { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);   transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);   transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

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

@-webkit-keyframes zoomInUp { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);   transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);   transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

@keyframes zoomInUp { from {   opacity: 0;   -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);   transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 60% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);   transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);   -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

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

@-webkit-keyframes zoomOut { from {   opacity: 1; }
 50% {   opacity: 0;   -webkit-transform: scale3d(.3, .3, .3);   transform: scale3d(.3, .3, .3); }
 to {   opacity: 0; }}

@keyframes zoomOut { from {   opacity: 1; }
 50% {   opacity: 0;   -webkit-transform: scale3d(.3, .3, .3);   transform: scale3d(.3, .3, .3); }
 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(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 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(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

@keyframes zoomOutDown { 40% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);   transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 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(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 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(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 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(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

@keyframes zoomOutUp { 40% {   opacity: 1;   -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);   transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);   -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);   animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
 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(0.175, 0.885, 0.320, 1);   animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); }}

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

@-webkit-keyframes slideInDown { from {   -webkit-transform: translate3d(0, -100%, 0);   transform: translate3d(0, -100%, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

@keyframes slideInDown { from {   -webkit-transform: translate3d(0, -100%, 0);   transform: translate3d(0, -100%, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

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

@-webkit-keyframes slideInLeft { from {   -webkit-transform: translate3d(-100%, 0, 0);   transform: translate3d(-100%, 0, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

@keyframes slideInLeft { from {   -webkit-transform: translate3d(-100%, 0, 0);   transform: translate3d(-100%, 0, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

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

@-webkit-keyframes slideInRight { from {   -webkit-transform: translate3d(100%, 0, 0);   transform: translate3d(100%, 0, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

@keyframes slideInRight { from {   -webkit-transform: translate3d(100%, 0, 0);   transform: translate3d(100%, 0, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

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

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

@-webkit-keyframes slideInRight_Half { from {   -webkit-transform: translateX(50%);   transform: translateX(50%);   opacity: 0; }
 to {   -webkit-transform: translateX(0);   transform: translateX(0);   opacity: 1; }}

@keyframes slideInRight_Half { from {   -webkit-transform: translateX(50%);   transform: translateX(50%);   opacity: 0; }
 to {   -webkit-transform: translateX(0);   transform: translateX(0);   opacity: 1; }}

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

@-webkit-keyframes slideInUp { from {   -webkit-transform: translate3d(0, 100%, 0);   transform: translate3d(0, 100%, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

@keyframes slideInUp { from {   -webkit-transform: translate3d(0, 100%, 0);   transform: translate3d(0, 100%, 0);   visibility: visible; }
 to {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }}

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

@-webkit-keyframes slideOutDown { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 to {   visibility: hidden;   -webkit-transform: translate3d(0, 100%, 0);   transform: translate3d(0, 100%, 0); }}

@keyframes slideOutDown { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 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 { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 to {   visibility: hidden;   -webkit-transform: translate3d(-100%, 0, 0);   transform: translate3d(-100%, 0, 0); }}

@keyframes slideOutLeft { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 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 { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 to {   visibility: hidden;   -webkit-transform: translate3d(100%, 0, 0);   transform: translate3d(100%, 0, 0); }}

@keyframes slideOutRight { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 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 { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 to {   visibility: hidden;   -webkit-transform: translate3d(0, -100%, 0);   transform: translate3d(0, -100%, 0); }}

@keyframes slideOutUp { from {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0); }
 to {   visibility: hidden;   -webkit-transform: translate3d(0, -100%, 0);   transform: translate3d(0, -100%, 0); }}

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


/*自定义点击动画*/
/*从右侧划出*/
@-webkit-keyframes click_slideInRight { from{   opacity: 0;   -webkit-transform: translateX(0);   transform: translateX(0); }
 to{   opacity: 1;   -webkit-transform: translateX(-100%);   transform: translateX(-100%); }}

@keyframes click_slideInRight { from{   opacity: 0;   -webkit-transform: translateX(0);   transform: translateX(0); }
 to{   opacity: 1;   -webkit-transform: translateX(-100%);   transform: translateX(-100%); }}

.click_slideInRight { -webkit-animation-name: click_slideInRight; animation-name: click_slideInRight; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

@-webkit-keyframes click_slideOutRight { from{   -webkit-transform: translateX(-100%);   transform: translateX(-100%); }
 to{   -webkit-transform: translateX(0);   transform: translateX(0); }}

@keyframes click_slideOutRight { from{   -webkit-transform: translateX(-100%);   transform: translateX(-100%); }
 to{   -webkit-transform: translateX(0);   transform: translateX(0); }}
.click_slideOutRight { -webkit-animation-name: click_slideOutRight; animation-name: click_slideOutRight; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
/*导航按钮动画*/
@-webkit-keyframes rotateS { from{   -webkit-transform: rotate(0deg) ;   transform: rotate(0deg); }
 to{    -webkit-transform: rotate(45deg) translateY(1px);   transform: rotate(45deg) translateY(1px); }}

@keyframes rotateS { from{   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
 to{   margin: 0;   -webkit-transform: rotate(45deg) translateY(1px);   transform: rotate(45deg) translateY(1px); }}

@-webkit-keyframes rotateReverse { from{   -webkit-transform: rotate(0deg) ;   transform: rotate(0deg); }
 to{   margin: 0;   -webkit-transform: rotate(-45deg) translateY(-1px);   transform: rotate(-45deg) translateY(-1px); }}

@keyframes rotateReverse { from{   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
 to{   margin: 0;   -webkit-transform: rotate(-45deg) translateY(-1px);   transform: rotate(-45deg) translateY(-1px); }}

@-webkit-keyframes rotateC { from{   margin: 0;   -webkit-transform: rotate(45deg) translateY(1px);   transform: rotate(45deg) translateY(1px); }
 to{    margin: 5px 0;   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }}

@keyframes rotateC { from{   margin: 0;   -webkit-transform: rotate(45deg) translateY(1px);   transform: rotate(45deg) translateY(1px); }
 to{   margin: 5px 0;   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }}

@-webkit-keyframes rotateClockwise { from{   margin: 0;   -webkit-transform: rotate(-45deg) translateY(-1px);   transform: rotate(-45deg) translateY(-1px); }
 to{   margin: 5px 0;   -webkit-transform: rotate(0deg) ;   transform: rotate(0deg); }}

@keyframes rotateClockwise { from{   margin: 0;   -webkit-transform: rotate(-45deg) translateY(-1px);   transform: rotate(-45deg) translateY(-1px); }
 to{   margin: 5px 0;   -webkit-transform: rotate(0deg) ;   transform: rotate(0deg); }}
.nav_show:before { -webkit-animation-name: rotateS; animation-name: rotateS; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.nav_show:after { -webkit-animation-name: rotateReverse; animation-name: rotateReverse; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

.nav_clear:before { -webkit-animation-name: rotateC; animation-name: rotateC; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.nav_clear:after { -webkit-animation-name: rotateClockwise; animation-name: rotateClockwise; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}

/*-旋转225-*/
@keyframes clockwiseRotate { from{   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
 to{   -webkit-transform: rotate(90deg);   transform: rotate(90deg); }}

@-webkit-keyframes clockwiseRotate { from{   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
 to{   -webkit-transform: rotate(90deg) ;   transform: rotate(90deg); }}

@keyframes anticlockwiseRotate { from{   -webkit-transform: rotate(90deg);   transform: rotate(90deg); }
 to{   -webkit-transform: rotate(0deg);   transform: rotate(0deg); }}

@-webkit-keyframes anticlockwiseRotate { from{   -webkit-transform: rotate(90deg);   transform: rotate(90deg); }
 to{   -webkit-transform: rotate(0deg) ;   transform: rotate(0deg); }}
.clockwiseRotate:before { -webkit-animation-name: clockwiseRotate; animation-name: clockwiseRotate; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.anticlockwiseRotate:before { -webkit-animation-name: anticlockwiseRotate; animation-name: anticlockwiseRotate; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}