@charset "UTF-8";

/*!
 * 文件名称：Hui.css
 * 文件版本：Version 0.3.4    2016-05-18
 * 文件作者：新生帝
 * 编写日期：2016年04月15日
 * 版权所有：中山赢友网络科技有限公司
 * 企业官网：http://www.winu.net
 * 开源协议：MIT License
 * 文件描述：一切从简，只为了更懒！
 * 讨论群区：一起改变中国IT教育 18863883
 * 开源地址：https://git.oschina.net/winu.net/Hui.git
 */

/* 重置样式 */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 62.5%; -webkit-overflow-scrolling: touch; width: 100%; height: 100%; }
body { margin: 0; -webkit-overflow-scrolling: touch; font-size: 1.6rem; line-height: 1.5; background: #f8f8f8; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
a {text-decoration:none; color: black;} // lhh
progress { vertical-align: baseline; }
template, [hidden] { display: none; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; }
a:active, a:hover { outline-width: 0;  }
abbr[title] { border-bottom: 0; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: .67em 0; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
ul, li { list-style: none; padding: 0; margin: 0; outline: 0; }
svg:not(:root) { overflow: hidden; }
code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; -webkit-box-sizing: content-box; height: 0; overflow: visible; }
button, input, select, textarea { font: inherit; margin: 0; }
optgroup { font-weight: bold; }
button, input { overflow: visible; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; }
legend { box-sizing: border-box; -webkit-box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; border-radius: 0; -webkit-border-radius: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-input-placeholder { color: inherit; opacity: .54; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

/*字体图标*/
/*引入字体图标*/
@font-face { font-family: 'iconfont'; src: url('Hui.ttf') format('truetype'); }
.H-iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.H-icon-share-to:before { content: "\f102"; }
.H-icon-star:before { content: "\f031"; }
.H-icon-qrcode:before { content: "\f024"; }
.H-icon-rubbish:before { content: "\f048"; }
.H-icon-profile:before { content: "\f071"; }
.H-icon-search:before { content: "\f010"; }
.H-icon-answer:before { content: "\f056"; }
.H-icon-ui:before { content: "\f082"; }
.H-icon-setting:before { content: "\f022"; }
.H-icon-friends:before { content: "\f027"; }
.H-icon-music:before { content: "\f106"; }
.H-icon-android:before { content: "\f100"; }
.H-icon-SSID:before { content: "\f059"; }
.H-icon-qq:before { content: "\f025"; }
.H-icon-weibo:before { content: "\f026"; }
.H-icon-add-user:before { content: "\f058"; }
.H-icon-dot-more:before { content: "\f098"; }
.H-icon-pen:before { content: "\f057"; }
.H-icon-arrow-left:before { content: "\f003"; }
.H-icon-doc:before { content: "\f088"; }
.H-icon-error:before { content: "\f055"; }
.H-icon-near:before { content: "\f054"; }
.H-icon-update:before { content: "\f053"; }
.H-icon-donate:before { content: "\f076"; }
.H-icon-plus:before { content: "\f110"; }
.H-icon-shopping-cart:before { content: "\f105"; }
.H-icon-contacts:before { content: "\f205"; }
.H-icon-share:before { content: "\f090"; }
.H-icon-html5:before { content: "\f047"; }
.H-icon-warn:before { content: "\f009"; }
.H-icon-thumb:before { content: "\f060"; }
.H-icon-refresh:before { content: "\f050"; }
.H-icon-phone:before { content: "\f049"; }
.H-icon-arrow-right:before { content: "\f004"; }
.H-icon-github:before { content: "\f070"; }
.H-icon-tag:before { content: "\f073"; }
.H-icon-right:before { content: "\f005"; }
.H-icon-group-user:before { content: "\f069"; }
.H-icon-video:before { content: "\f107"; }
.H-icon-theme:before { content: "\f046"; }
.H-icon-minus:before { content: "\f111"; }
.H-icon-exit:before { content: "\f045"; }
.H-icon-star-half:before { content: "\f087"; }
.H-icon-star-null:before { content: "\f084"; }
.H-icon-star-fill:before { content: "\f083"; }
.H-icon-user-set:before { content: "\f044"; }
.H-icon-http:before { content: "\f043"; }
.H-icon-email:before { content: "\f042"; }
.H-icon-tearch:before { content: "\f085"; }
.H-icon-weixin:before { content: "\f028"; }
.H-icon-add:before { content: "\f006"; }
.H-icon-hi:before { content: "\f094"; }
.H-icon-moban:before { content: "\f089"; }
.H-icon-woman:before { content: "\f040"; }
.H-icon-man:before { content: "\f039"; }
.H-icon-earth:before { content: "\f007"; }
.H-icon-smiling:before { content: "\f008"; }
.H-icon-more-menu:before { content: "\f035"; }
.H-icon-msg:before { content: "\f033"; }
.H-icon-log:before { content: "\f052"; }
.H-icon-taobao:before { content: "\f091"; }
.H-icon-game:before { content: "\f079"; }
.H-icon-tel:before { content: "\f112"; }
.H-icon-com:before { content: "\f086"; }
.H-icon-lock:before { content: "\f036"; }
.H-icon-ipadiphone:before { content: "\f180"; }
.H-icon-mobile-net:before { content: "\f037"; }
.H-icon-arrow-scrolltop:before { content: "\f032"; }
.H-icon-wow:before { content: "\f284"; }
.H-icon-sad:before { content: "\f283"; }
.H-icon-smile2:before { content: "\f276"; }
.H-icon-edit:before { content: "\f252"; }
.H-icon-level:before { content: "\f251"; }
.H-icon-ding-null:before { content: "\f132"; }
.H-icon-ding-fill:before { content: "\f133"; }
.H-icon-cai-null:before { content: "\f134"; }
.H-icon-cai-fill:before { content: "\f135"; }
.H-icon-delegate:before { content: "\f075"; }
.H-icon-ios:before { content: "\f101"; }
.H-icon-pointmore:before { content: "\f277"; }
.H-icon-arrow-down:before { content: "\f023"; }
.H-icon-drop-sort:before { content: "\f210"; }
.H-icon-more:before { content: "\f038"; }
.H-icon-clear:before { content: "\f041"; }
.H-icon-tools:before { content: "\f136"; }
.H-icon-qiandao:before { content: "\f137"; }
.H-icon-loading:before { content: "\f011"; }
.H-icon-tip-msg:before { content: "\f067"; }
.H-icon-where:before { content: "\f066"; }
.H-icon-gobottom:before { content: "\f096"; }
.H-icon-bbs:before { content: "\f093"; }
.H-icon-finding:before { content: "\f095"; }
.H-icon-cloud-download-fill:before { content: "\281"; }
.H-icon-cloud-download:before { content: "\f280"; }
.H-icon-download-fill:before { content: "\f279"; }
.H-icon-download:before { content: "\f278"; }
.H-icon-list-down:before { content: "\f138"; }
.H-icon-list-up:before { content: "\f139"; }
.H-icon-about-me:before { content: "\f077"; }
.H-icon-quick:before { content: "\f065"; }
.H-icon-camera:before { content: "\f062"; }
.H-icon-position:before { content: "\f021"; }
.H-icon-gif:before { content: "\f131"; }
.H-icon-qzone:before { content: "\f029"; }
.H-icon-hot:before { content: "\f097"; }
.H-icon-scanning:before { content: "\f061"; }
.H-icon-review:before { content: "\f063"; }
.H-icon-target-back:before { content: "\f013"; }
.H-icon-care-user:before { content: "\f064"; }
.H-icon-voice-left:before { content: "\f014"; }
.H-icon-voice-right:before { content: "\f015"; }
.H-icon-union:before { content: "\f104"; }
.H-icon-kefu:before { content: "\f068"; }
.H-icon-fangzi:before { content: "\f275"; }
.H-icon-time:before { content: "\f030"; }
.H-icon-user:before { content: "\f016"; }
.H-icon-find:before { content: "\f017"; }
.H-icon-find-null:before { content: "\f018"; }
.H-icon-like:before { content: "\f019"; }
.H-icon-voice:before { content: "\f020"; }
.H-icon-like-null:before { content: "\f012"; }
.H-icon-close-eye:before { content: "\f001"; }
.H-icon-aliwangwang:before { content: "\f092"; }
.H-icon-kuandai:before { content: "\f274"; }
.H-icon-huoche:before { content: "\f273"; }
.H-icon-qiche:before { content: "\f272"; }
.H-icon-chuzuche:before { content: "\f271"; }
.H-icon-meishi2:before { content: "\f270"; }
.H-icon-meishi:before { content: "\f268"; }
.H-icon-official:before { content: "\f078"; }
.H-icon-radio-fill:before { content: "\f123"; }
.H-icon-radio-null:before { content: "\f122"; }
.H-icon-guanbi2-fill:before { content: "\f285"; }
.H-icon-guanbi2:before { content: "\f265"; }
.H-icon-jiahao2:before { content: "\f264"; }
.H-icon-jiahao2-fill:before { content: "\f263"; }
.H-icon-tishi-fill:before { content: "\f262"; }
.H-icon-tishi:before { content: "\f261"; }
.H-icon-wenhao-fill:before { content: "\f260"; }
.H-icon-wenhao:before { content: "\f259"; }
.H-icon-radio-check-fill:before { content: "\f258"; }
.H-icon-radio-check:before { content: "\f257"; }
.H-icon-chexiao:before { content: "\f255"; }
.H-icon-gouwudai:before { content: "\f254"; }
.H-icon-kefu2-fill:before { content: "\f266"; }
.H-icon-kefu2:before { content: "\f267"; }
.H-icon-review-fill:before { content: "\f124"; }
.H-icon-review-null:before { content: "\f121"; }
.H-icon-qingchu:before { content: "\f253"; }
.H-icon-saoma:before { content: "\f290"; }
.H-icon-search-list:before { content: "\f120"; }
.H-icon-search-list-null:before { content: "\f287"; }
.H-icon-tianmao:before { content: "\f286"; }
.H-icon-wuliu:before { content: "\f119"; }
.H-icon-vip:before { content: "\f072"; }
.H-icon-familyarea:before { content: "\f160"; }
.H-icon-aite:before { content: "\f034"; }
.H-icon-alipay:before { content: "\f108"; }
.H-icon-none:before { content: "\f130"; }
.H-icon-calc:before { content: "\f155"; }
.H-icon-licai:before { content: "\f171"; }
.H-icon-money2:before { content: "\f170"; }
.H-icon-femaleanchors:before { content: "\f159"; }
.H-icon-gamelive:before { content: "\f154"; }
.H-icon-recreationcenter:before { content: "\f145"; }
.H-icon-application:before { content: "\f144"; }
.H-icon-logo:before { content: "\f151"; }
.H-icon-game1:before { content: "\f141"; }
.H-icon-music1:before { content: "\f142"; }
.H-icon-money21:before { content: "\f143"; }
.H-icon-safe2:before { content: "\f146"; }
.H-icon-safe:before { content: "\f080"; }
.H-icon-supermarket:before { content: "\f147"; }
.H-icon-reward:before { content: "\f081"; }
.H-icon-zuji:before { content: "\f148"; }
.H-icon-zhongping:before { content: "\f150"; }
.H-icon-camera1:before { content: "\f140"; }
.H-icon-new:before { content: "\f152"; }
.H-icon-user2:before { content: "\f173"; }
.H-icon-adduser:before { content: "\f156"; }
.H-icon-passuser:before { content: "\f157"; }
.H-icon-send-msg:before { content: "\f158"; }
.H-icon-v1:before { content: "\f161"; }
.H-icon-v2:before { content: "\f162"; }
.H-icon-v3:before { content: "\f163"; }
.H-icon-wangge:before { content: "\f164"; }
.H-icon-zuanshi:before { content: "\f167"; }
.H-icon-dengpao:before { content: "\f168"; }
.H-icon-taideng:before { content: "\f169"; }
.H-icon-arrow-up:before { content: "\f099"; }
.H-icon-close:before { content: "\f117"; }
.H-icon-fee:before { content: "\f118"; }
.H-icon-mianji:before { content: "\f288"; }

/*改写滚动条为全部透明*/
::-webkit-scrollbar /*整体部分*/ { width: 0; height: 0; }
::-webkit-scrollbar-track /*滑动轨道*/ { background: rgba(0,0,0,0); }
::-webkit-scrollbar-thumb /*滑块*/ { background: rgba(0,0,0,0.0); }
::-webkit-scrollbar-thumb:hover /*滑块效果*/ { background: rgba(0,0,0,0); }

/* 常用字体大小 */
.H-font-size-0 { font-size: 0; }
.H-font-size-10 { font-size: 1rem; }
.H-font-size-11 { font-size: 1.1rem; }
.H-font-size-12 { font-size: 1.2rem; }
.H-font-size-13 { font-size: 1.3rem; }
.H-font-size-14 { font-size: 1.4rem; }
.H-font-size-15 { font-size: 1.5rem; }
.H-font-size-16 { font-size: 1.6rem; }
.H-font-size-18 { font-size: 1.8rem; }
.H-font-size-20 { font-size: 2rem; }
.H-font-size-22 { font-size: 2.2rem; }
.H-font-size-24 { font-size: 2.4rem; }
.H-font-size-26 { font-size: 2.6rem; }
.H-font-size-28 { font-size: 2.8rem; }
.H-font-size-30 { font-size: 3rem; }
.H-font-size-32 { font-size: 3.2rem; }
.H-font-size-34 { font-size: 3.4rem; }
.H-font-size-36 { font-size: 3.6rem; }
.H-font-size-38 { font-size: 3.8rem; }
.H-font-size-40 { font-size: 4.0rem; }
.H-font-size-42 { font-size: 4.2rem; }
.H-font-size-44 { font-size: 4.4rem; }
.H-font-size-46 { font-size: 4.6rem; }
.H-font-size-48 { font-size: 4.8rem; }
.H-font-size-50 { font-size: 5.0rem; }

/* 常用主题字体颜色 */
.H-theme-font-color-ccc { color: #ccc; }
.H-theme-font-color-eee { color: #eee; }
.H-theme-font-color-333 { color: #333; }
.H-theme-font-color-444 { color: #444; }
.H-theme-font-color-666 { color: #666; }
.H-theme-font-color-999 { color: #999; }
.H-theme-font-color-white { color: white; }
.H-theme-font-color-black { color: black; }
.H-theme-font-color-red { color: red; }
.H-theme-font-color-green { color: green; }
.H-theme-font-color-blue { color: blue; }
.H-theme-font-color-yellow { color: yellow; }
.H-theme-font-color-pink { color: pink; }
.H-theme-font-color-gray { color: gray; }
.H-theme-font-color-black-active { color: #333; }
.H-theme-font-color-black-click:active { color: #fff; }
/* 扁平化主题字体颜色 */
.H-theme-font-color1 { color: #52ace5; }
.H-theme-font-color2 { color: #ff7f8a; }
.H-theme-font-color3 { color: #3c4146; }
.H-theme-font-color4 { color: #ffa977; }
.H-theme-font-color5 { color: #4db7ad; }
.H-theme-font-color6 { color: #337ab7; }
.H-theme-font-color7 { color: #d9534f; }
.H-theme-font-color8 { color: #f0ad4e; }
.H-theme-font-color9 { color: #5cb85c; }
/* 扁平化主题字体高亮颜色 */
.H-theme-font-color1-active { color: #408CBB; }
.H-theme-font-color2-active { color: #e8747e; }
.H-theme-font-color3-active { color: #222427; }
.H-theme-font-color4-active { color: #FC8B4A; }
.H-theme-font-color5-active { color: #3F9189; }
.H-theme-font-color6-active { color: #266dab; }
.H-theme-font-color7-active { color: #D83632; }
.H-theme-font-color8-active { color: #C89041; }
.H-theme-font-color9-active { color: #28A028; }
.H-theme-font-color1-click:active, .H-theme-font-color2-click:active, .H-theme-font-color3-click:active, .H-theme-font-color4-click:active, .H-theme-font-color5-click:active, .H-theme-font-color6-click:active, .H-theme-font-color7-click:active, .H-theme-font-color8-click:active, .H-theme-font-color9-click:active { color: #fff; }

/* 常用主题背景颜色 */
.H-theme-background-color-transparent { background-color: rgba(0,0,0,0); }
.H-theme-background-color-ccc { background-color: #ccc; }
.H-theme-background-color-eee { background-color: #eee; }
.H-theme-background-color-333 { background-color: #333; }
.H-theme-background-color-444 { background-color: #444; }
.H-theme-background-color-666 { background-color: #666; }
.H-theme-background-color-999 { background-color: #999; }
.H-theme-background-color-white { background-color: white; }
.H-theme-background-color-black { background-color: black; }
.H-theme-background-color-red { background-color: red; }
.H-theme-background-color-green { background-color: green; }
.H-theme-background-color-blue { background-color: blue; }
.H-theme-background-color-yellow { background-color: yellow; }
.H-theme-background-color-pink { background-color: pink; }
.H-theme-background-color-gray { background-color: gray; }
.H-theme-background-color-black-active { background-color: #333; }
.H-theme-background-color-black-click:active { background-color: #333; }
.H-theme-background-color-f4f4f4 { background-color: #f4f4f4; }
/* 扁平化主题字背景颜色 */
.H-theme-background-color1 { background-color: #52ace5; }
.H-theme-background-color2 { background-color: #ff7f8a; }
.H-theme-background-color3 { background-color: #3c4146; }
.H-theme-background-color4 { background-color: #ffa977; }
.H-theme-background-color5 { background-color: #4db7ad; }
.H-theme-background-color6 { background-color: #337ab7; }
.H-theme-background-color7 { background-color: #d9534f; }
.H-theme-background-color8 { background-color: #f0ad4e; }
.H-theme-background-color9 { background-color: #5cb85c; }
/* 扁平化主题背景高亮颜色 */
.H-theme-background-color1-active { background-color: #408CBB; }
.H-theme-background-color2-active { background-color: #e8747e; }
.H-theme-background-color3-active { background-color: #222427; }
.H-theme-background-color4-active { background-color: #FC8B4A; }
.H-theme-background-color5-active { background-color: #3F9189; }
.H-theme-background-color6-active { background-color: #266dab; }
.H-theme-background-color7-active { background-color: #D83632; }
.H-theme-background-color8-active { background-color: #C89041; }
.H-theme-background-color9-active { background-color: #28A028; }
.H-theme-background-color1-click:active { background-color: #408CBB; }
.H-theme-background-color2-click:active { background-color: #e8747e; }
.H-theme-background-color3-click:active { background-color: #222427; }
.H-theme-background-color4-click:active { background-color: #FC8B4A; }
.H-theme-background-color5-click:active { background-color: #3F9189; }
.H-theme-background-color6-click:active { background-color: #266dab; }
.H-theme-background-color7-click:active { background-color: #D83632; }
.H-theme-background-color8-click:active { background-color: #C89041; }
.H-theme-background-color9-click:active { background-color: #28A028; }

/*常用边框颜色*/
/*四边线*/
.H-border-both { border: 1px solid #f7f5f5; }
.H-border-both-after:after { border: 1px solid #f7f5f5; }
.H-theme-border-color-ccc { border: 1px solid #ccc; }
.H-theme-border-color-eee { border: 1px solid #eee; }
.H-theme-border-color-333 { border: 1px solid #333; }
.H-theme-border-color-444 { border: 1px solid #444; }
.H-theme-border-color-666 { border: 1px solid #666; }
.H-theme-border-color-999 { border: 1px solid #999; }
.H-theme-border-color-transparent { border: 1px solid rgba(0,0,0,0); }
.H-theme-border-color-white { border: 1px solid white; }
.H-theme-border-color-black { border: 1px solid black; }
.H-theme-border-color-red { border: 1px solid red; }
.H-theme-border-color-green { border: 1px solid green; }
.H-theme-border-color-blue { border: 1px solid blue; }
.H-theme-border-color-yellow { border: 1px solid yellow; }
.H-theme-border-color-pink { border: 1px solid pink; }
.H-theme-border-color-gray { border: 1px solid gray; }
.H-theme-border-color-black-active { border: 1px solid #333; }
.H-theme-border-color-black-click:active { border: 1px solid #333; }
/* 扁平化边框颜色 */
.H-theme-border-color1 { border: 1px solid #52ace5; }
.H-theme-border-color2 { border: 1px solid #ff7f8a; }
.H-theme-border-color3 { border: 1px solid #3c4146; }
.H-theme-border-color4 { border: 1px solid #ffa977; }
.H-theme-border-color5 { border: 1px solid #4db7ad; }
.H-theme-border-color6 { border: 1px solid #337ab7; }
.H-theme-border-color7 { border: 1px solid #d9534f; }
.H-theme-border-color8 { border: 1px solid #f0ad4e; }
.H-theme-border-color9 { border: 1px solid #5cb85c; }
/* 扁平化边框高亮颜色 */
.H-theme-border-color1-active { border: 1px solid #408CBB; }
.H-theme-border-color2-active { border: 1px solid #e8747e; }
.H-theme-border-color3-active { border: 1px solid #222427; }
.H-theme-border-color4-active { border: 1px solid #FC8B4A; }
.H-theme-border-color5-active { border: 1px solid #3F9189; }
.H-theme-border-color6-active { border: 1px solid #266dab; }
.H-theme-border-color7-active { border: 1px solid #D83632; }
.H-theme-border-color8-active { border: 1px solid #C89041; }
.H-theme-border-color9-active { border: 1px solid #28A028; }
.H-theme-border-color1-click:active { border: 1px solid #408CBB; }
.H-theme-border-color2-click:active { border: 1px solid #e8747e; }
.H-theme-border-color3-click:active { border: 1px solid #222427; }
.H-theme-border-color4-click:active { border: 1px solid #FC8B4A; }
.H-theme-border-color5-click:active { border: 1px solid #3F9189; }
.H-theme-border-color6-click:active { border: 1px solid #266dab; }
.H-theme-border-color7-click:active { border: 1px solid #D83632; }
.H-theme-border-color8-click:active { border: 1px solid #C89041; }
.H-theme-border-color9-click:active { border: 1px solid #28A028; }

/*下划线*/
.H-text-decoration-underline { text-decoration: underline; }
.H-text-decoration-none { text-decoration: none; }

/*换行处理*/
.H-white-space-normal { white-space: normal; }
.H-white-space-nowrap { white-space: nowrap; }
.H-white-space-pre { white-space: pre; }
.H-white-space-pre-line { white-space: pre-line; }
.H-white-space-pre-wrap { white-space: pre-wrap; }
.H-word-break-break-all { word-break: break-all; }

/*常见透明背景*/
.H-background-color-transparent-1 { background: rgba(0,0,0,0.1); }
.H-background-color-transparent-2 { background: rgba(0,0,0,0.2); }
.H-background-color-transparent-3 { background: rgba(0,0,0,0.3); }
.H-background-color-transparent-4 { background: rgba(0,0,0,0.4); }
.H-background-color-transparent-5 { background: rgba(0,0,0,0.5); }
.H-background-color-transparent-6 { background: rgba(0,0,0,0.6); }
.H-background-color-transparent-7 { background: rgba(0,0,0,0.7); }
.H-background-color-transparent-8 { background: rgba(0,0,0,0.8); }
.H-background-color-transparent-9 { background: rgba(0,0,0,0.9); }

/*常用等宽*/
.H-width-avg-1 { width: 100%; }
.H-width-avg-2 { width: 50%; }
.H-width-avg-3 { width: 33.33333333333333%; }
.H-width-avg-4 { width: 25%; }
.H-width-avg-5 { width: 20%; }
.H-width-avg-6 { width: 16.66666666666667%; }

/*让图片自适应宽高（宽和高相等，基于列数控制）*/
.H-img-avg-1 { width: 100vw; height: 100vw; }
.H-img-avg-2 { width: 50vw; height: 50vw; }
.H-img-avg-3 { width: 33.33333333333333vw; height: 33.33333333333333vw; }
.H-img-avg-4 { width: 25vw; height: 25vw; }
.H-img-avg-5 { width: 20vw; height: 20vw; }
.H-img-avg-6 { width: 16.66666666666667vw; height: 16.66666666666667vw; }

/*去掉li默认点*/
.H-list-style-none { list-style: none; }

/* 常用浮动 */
.H-float-left { float: left; }
.H-float-right { float: right; }
.H-float-none { float: none; }
.H-clear-both { clear: both; }

/* 常用行块元素切换 */
.H-display-none { display: none; }
.H-display-none-important { display: none !important; }
.H-display-block { display: block; }
.H-display-block-important { display: block !important; }
.H-display-inline { display: inline; }
.H-display-inline-block { display: inline-block; }
.H-display-inline-block-important { display: inline-block !important; }
.H-display-table { display: table; }
.H-display-table-cell { display: table-cell; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }

/* 常用定位 */
.H-position-absolute { position: absolute; }
.H-position-relative { position: relative; }
.H-position-fixed { position: fixed; }
.H-position-static { position: static; }

/* 设置文字显示多少行 */
.H-text-show-row-1, .H-text-show-row-2, .H-text-show-row-3, .H-text-show-row-4, .H-text-show-row-5 { overflow: hidden; text-overflow: ellipsis; display: box; display: -webkit-box; word-wrap: break-word; white-space: normal !important; -webkit-box-orient: vertical; }
.H-text-show-row-1 { line-clamp: 1; -webkit-line-clamp: 1; }
.H-text-show-row-2 { line-clamp: 2; -webkit-line-clamp: 2; }
.H-text-show-row-3 { line-clamp: 3; -webkit-line-clamp: 3; }
.H-text-show-row-4 { line-clamp: 4; -webkit-line-clamp: 4; }
.H-text-show-row-5 { line-clamp: 5; -webkit-line-clamp: 5; }

/* 常用流布局 */
.H-box { display: box; display: -webkit-box; }
.H-flexbox-vertical { display: box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-flex-flow: column; flex-flow: column; height: 100%; -webkit-flex-direction: column; flex-direction: column; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-flexbox-horizontal { display: box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-flex-flow: row; flex-flow: row; width: 100%; -webkit-flex-direction: row; flex-direction: row; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-flex-item { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-flex-flow-row-wrap { flex-direction: row; flex-wrap: wrap; -webkit-flex-direction: row; -webkit-flex-wrap: wrap; }
.H-flex-flow-row-nowrap { flex-direction: row; flex-wrap: nowrap; -webkit-flex-direction: row; -webkit-flex-wrap: nowrap; }

/* 文本对齐 */
.H-text-align-center { text-align: center; }
.H-text-align-left { text-align: left; }
.H-text-align-right { text-align: right; }

/*设置字体*/
.H-font-family-Arial { font-family: Arial; }

/*块元素垂直对齐*/
.H-vertical-align-middle { vertical-align: middle; }
.H-vertical-align-top { vertical-align: top; }
.H-vertical-align-bottom { vertical-align: bottom; }

/* 行块元素水平对齐 */
.H-horizontal-center { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: box; box-orient: horizontal; box-pack: center; }
.H-horizontal-left { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: start; display: box; box-orient: horizontal; box-pack: start; }
.H-horizontal-right { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: end; display: box; box-orient: horizontal; box-pack: end; }
/*定位元素水平居中*/
.H-position-horizontal-center { left: 50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); }

/* 行块元素垂直对齐 */
.H-vertical-middle { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: center; display: box; box-orient: horizontal; box-align: center; }
.H-vertical-top { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: start; display: box; box-orient: horizontal; box-align: start; }
.H-vertical-bottom { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: end; display: box; box-orient: horizontal; box-align: end; }
/*定位元素垂直居中*/
.H-position-vertical-middle { top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }

/* 行块元素水平垂直对齐 */
.H-center-all { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
/*定位元素水平垂直居中*/
.H-position-center-all { top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/*让元素水平排布*/
.H-block-horizontal { display: box; display: -webkit-box; -webkit-box-orient: horizontal; box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; }
.H-block-item { -webkit-box-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; }

/*设置盒子模型*/
.H-box-sizing-border-box { box-sizing: border-box; -webkit-box-sizing: border-box; }
.H-box-sizing-content-box { box-sizing: content-box; -webkit-box-sizing: content-box; }

/*常用超出隐藏，滚动条处理*/
.H-overflow-hidden { overflow: hidden; }
.H-overflow-auto { overflow: auto; }
.H-overflow-visible { overflow: visible; }
.H-overflow-scroll { overflow: scroll; }
/*水平方向*/
.H-overflow-x-hidden { overflow-x: hidden; }
.H-overflow-x-auto { overflow-x: auto; }
.H-overflow-x-scroll { overflow-x: scroll; }
/*垂直方向*/
.H-overflow-y-hidden { overflow-y: hidden; }
.H-overflow-y-auto { overflow-y: auto; }
.H-overflow-y-scroll { overflow-y: scroll; }

/* 常用行高 */
.H-line-height-0 { line-height: 0; }
.H-line-height-normal { line-height: normal; }
.H-line-height-default { line-height: 1.5; }

/*宽高度100%*/
.H-width-100-percent { width: 100%; }
.H-height-100-percent { height: 100%; }

.H-width-40 { width: 40px; }
.H-height-40 { height: 40px; }
.H-width-45 { width: 45px; }
.H-height-45 { height: 45px; }
.H-width-50 { width: 50px; }
.H-height-50 { height: 50px; }
.H-width-75 { width: 75px; }
.H-height-75 { height: 75px; }
.H-width-90 { width: 90px; }
.H-height-90 { height: 90px; }
.H-width-100 { width: 100px; }
.H-height-100 { height: 100px; }
.H-width-120 { width: 120px; }
.H-height-120 { height: 120px; }
.H-width-150 { width: 150px; }
.H-height-150 { height: 150px; }
.H-width-180 { width: 180px; }
.H-height-180 { height: 180px; }
.H-width-200 { width: 200px; }
.H-height-200 { height: 200px; }
.H-width-220 { width: 220px; }
.H-height-220 { height: 220px; }
.H-width-240 { width: 240px; }
.H-height-240 { height: 240px; }

.H-auto-height { min-height: 0; height: auto; overflow: hidden; }
.H-max-width-100-percent { max-width: 100%; }
.H-max-height-100-percent { max-height: 100%; }

/*常用边距*/
.H-padding-0 { padding: 0; }
.H-padding-2 { padding: 2px; }
.H-padding-3 { padding: 3px; }
.H-padding-5 { padding: 5px; }
.H-padding-8 { padding: 8px; }
.H-padding-10 { padding: 10px; }
.H-padding-12 { padding: 12px; }
.H-padding-15 { padding: 15px; }
.H-padding-20 { padding: 20px; }
.H-padding-25 { padding: 25px; }
.H-margin-0 { margin: 0; }
.H-margin-horizontal-auto { margin-left: auto; margin-right: auto; }
.H-margin-2 { margin: 2px; }
.H-margin-3 { margin: 3px; }
.H-margin-5 { margin: 5px; }
.H-margin-8 { margin: 8px; }
.H-margin-10 { margin: 10px; }
.H-margin-12 { margin: 12px; }
.H-margin-15 { margin: 15px; }
.H-margin-20 { margin: 20px; }
.H-margin-25 { margin: 25px; }
/*垂直方向*/
.H-padding-vertical-both-0 { padding-top: 0; padding-bottom: 0; }
.H-padding-vertical-top-0 { padding-top: 0; }
.H-padding-vertical-bottom-0 { padding-bottom: 0; }
.H-padding-vertical-both-2 { padding-top: 2px; padding-bottom: 2px; }
.H-padding-vertical-top-2 { padding-top: 2px; }
.H-padding-vertical-bottom-2 { padding-bottom: 2px; }
.H-padding-vertical-both-3 { padding-top: 3px; padding-bottom: 3px; }
.H-padding-vertical-top-3 { padding-top: 3px; }
.H-padding-vertical-bottom-3 { padding-bottom: 3px; }
.H-padding-vertical-both-5 { padding-top: 5px; padding-bottom: 5px; }
.H-padding-vertical-top-5 { padding-top: 5px; }
.H-padding-vertical-bottom-5 { padding-bottom: 5px; }
.H-padding-vertical-both-8 { padding-top: 8px; padding-bottom: 8px; }
.H-padding-vertical-top-8 { padding-top: 8px; }
.H-padding-vertical-bottom-8 { padding-bottom: 8px; }
.H-padding-vertical-both-10 { padding-top: 10px; padding-bottom: 10px; }
.H-padding-vertical-top-10 { padding-top: 10px; }
.H-padding-vertical-bottom-10 { padding-bottom: 10px; }
.H-padding-vertical-both-12 { padding-top: 12px; padding-bottom: 12px; }
.H-padding-vertical-top-12 { padding-top: 12px; }
.H-padding-vertical-bottom-12 { padding-bottom: 12px; }
.H-padding-vertical-both-15 { padding-top: 15px; padding-bottom: 15px; }
.H-padding-vertical-top-15 { padding-top: 15px; }
.H-padding-vertical-bottom-15 { padding-bottom: 15px; }
.H-padding-vertical-both-20 { padding-top: 20px; padding-bottom: 20px; }
.H-padding-vertical-top-20 { padding-top: 20px; }
.H-padding-vertical-bottom-20 { padding-bottom: 20px; }
.H-padding-vertical-both-25 { padding-top: 25px; padding-bottom: 25px; }
.H-padding-vertical-top-25 { padding-top: 25px; }
.H-padding-vertical-bottom-25 { padding-bottom: 25px; }
.H-margin-vertical-both-0 { margin-top: 0; margin-bottom: 0; }
.H-margin-vertical-top-0 { margin-top: 0; }
.H-margin-vertical-bottom-0 { margin-bottom: 0; }
.H-margin-vertical-both-2 { margin-top: 2px; margin-bottom: 2px; }
.H-margin-vertical-top-2 { margin-top: 2px; }
.H-margin-vertical-bottom-2 { margin-bottom: 2px; }
.H-margin-vertical-both-3 { margin-top: 3px; margin-bottom: 3px; }
.H-margin-vertical-top-3 { margin-top: 3px; }
.H-margin-vertical-bottom-3 { margin-bottom: 3px; }
.H-margin-vertical-both-5 { margin-top: 5px; margin-bottom: 5px; }
.H-margin-vertical-top-5 { margin-top: 5px; }
.H-margin-vertical-bottom-5 { margin-bottom: 5px; }
.H-margin-vertical-both-8 { margin-top: 8px; margin-bottom: 8px; }
.H-margin-vertical-top-8 { margin-top: 8px; }
.H-margin-vertical-bottom-8 { margin-bottom: 8px; }
.H-margin-vertical-both-10 { margin-top: 10px; margin-bottom: 10px; }
.H-margin-vertical-top-10 { margin-top: 10px; }
.H-margin-vertical-bottom-10 { margin-bottom: 10px; }
.H-margin-vertical-both-12 { margin-top: 12px; margin-bottom: 12px; }
.H-margin-vertical-top-12 { margin-top: 12px; }
.H-margin-vertical-bottom-12 { margin-bottom: 12px; }
.H-margin-vertical-both-15 { margin-top: 15px; margin-bottom: 15px; }
.H-margin-vertical-top-15 { margin-top: 15px; }
.H-margin-vertical-bottom-15 { margin-bottom: 15px; }
.H-margin-vertical-both-20 { margin-top: 20px; margin-bottom: 20px; }
.H-margin-vertical-top-20 { margin-top: 20px; }
.H-margin-vertical-bottom-20 { margin-bottom: 20px; }
.H-margin-vertical-both-25 { margin-top: 25px; margin-bottom: 25px; }
.H-margin-vertical-top-25 { margin-top: 25px; }
.H-margin-vertical-bottom-25 { margin-bottom: 25px; }

.H-vertical-both-0 { top: 0; bottom: 0; }
.H-vertical-both-2 { top: 2px; bottom: 2px; }
.H-vertical-both-3 { top: 3px; bottom: 3px; }
.H-vertical-both-5 { top: 5px; bottom: 5px; }
.H-vertical-both-8 { top: 8px; bottom: 8px; }
.H-vertical-both-10 { top: 10px; bottom: 10px; }
.H-vertical-both-12 { top: 12px; bottom: 12px; }
.H-vertical-both-15 { top: 15px; bottom: 15px; }
.H-vertical-both-20 { top: 20px; bottom: 20px; }
.H-vertical-both-25 { top: 25px; bottom: 25px; }
.H-vertical-top-0 { top: 0; }
.H-vertical-top-2 { top: 2px; }
.H-vertical-top-3 { top: 3px; }
.H-vertical-top-5 { top: 5px; }
.H-vertical-top-8 { top: 8px; }
.H-vertical-top-10 { top: 10px; }
.H-vertical-top-12 { top: 12px; }
.H-vertical-top-15 { top: 15px; }
.H-vertical-top-20 { top: 20px; }
.H-vertical-top-25 { top: 25px; }
.H-vertical-bottom-0 { bottom: 0; }
.H-vertical-bottom-2 { bottom: 2px; }
.H-vertical-bottom-3 { bottom: 3px; }
.H-vertical-bottom-5 { bottom: 5px; }
.H-vertical-bottom-8 { bottom: 8px; }
.H-vertical-bottom-10 { bottom: 10px; }
.H-vertical-bottom-12 { bottom: 12px; }
.H-vertical-bottom-15 { bottom: 15px; }
.H-vertical-bottom-20 { bottom: 20px; }
.H-vertical-bottom-25 { bottom: 25px; }

/*水平方向*/
.H-padding-horizontal-both-0 { padding-left: 0; padding-right: 0; }
.H-padding-horizontal-left-0 { padding-left: 0; }
.H-padding-horizontal-right-0 { padding-right: 0; }
.H-padding-horizontal-both-2 { padding-left: 2px; padding-right: 2px; }
.H-padding-horizontal-left-2 { padding-left: 2px; }
.H-padding-horizontal-right-2 { padding-right: 2px; }
.H-padding-horizontal-both-3 { padding-left: 3px; padding-right: 3px; }
.H-padding-horizontal-left-3 { padding-left: 3px; }
.H-padding-horizontal-right-3 { padding-right: 3px; }
.H-padding-horizontal-both-5 { padding-left: 5px; padding-right: 5px; }
.H-padding-horizontal-left-5 { padding-left: 5px; }
.H-padding-horizontal-right-5 { padding-right: 5px; }
.H-padding-horizontal-both-8 { padding-left: 8px; padding-right: 8px; }
.H-padding-horizontal-left-8 { padding-left: 8px; }
.H-padding-horizontal-right-8 { padding-right: 8px; }
.H-padding-horizontal-both-10 { padding-left: 10px; padding-right: 10px; }
.H-padding-horizontal-left-10 { padding-left: 10px; }
.H-padding-horizontal-right-10 { padding-right: 10px; }
.H-padding-horizontal-both-12 { padding-left: 12px; padding-right: 12px; }
.H-padding-horizontal-left-12 { padding-left: 12px; }
.H-padding-horizontal-right-12 { padding-right: 12px; }
.H-padding-horizontal-both-15 { padding-left: 15px; padding-right: 15px; }
.H-padding-horizontal-left-15 { padding-left: 15px; }
.H-padding-horizontal-right-15 { padding-right: 15px; }
.H-padding-horizontal-both-20 { padding-left: 20px; padding-right: 20px; }
.H-padding-horizontal-left-20 { padding-left: 20px; }
.H-padding-horizontal-right-20 { padding-right: 20px; }
.H-padding-horizontal-both-25 { padding-left: 25px; padding-right: 25px; }
.H-padding-horizontal-left-25 { padding-left: 25px; }
.H-padding-horizontal-right-25 { padding-right: 25px; }
.H-margin-horizontal-both-0 { margin-left: 0; margin-right: 0; }
.H-margin-horizontal-left-0 { margin-left: 0; }
.H-margin-horizontal-right-0 { margin-right: 0; }
.H-margin-horizontal-both-3 { margin-left: 3px; margin-right: 3px; }
.H-margin-horizontal-left-3 { margin-left: 3px; }
.H-margin-horizontal-right-3 { margin-right: 3px; }
.H-margin-horizontal-both-2 { margin-left: 2px; margin-right: 2px; }
.H-margin-horizontal-left-2 { margin-left: 2px; }
.H-margin-horizontal-right-2 { margin-right: 2px; }
.H-margin-horizontal-both-5 { margin-left: 5px; margin-right: 5px; }
.H-margin-horizontal-left-5 { margin-left: 5px; }
.H-margin-horizontal-right-5 { margin-right: 5px; }
.H-margin-horizontal-both-8 { margin-left: 8px; margin-right: 8px; }
.H-margin-horizontal-left-8 { margin-left: 8px; }
.H-margin-horizontal-right-8 { margin-right: 8px; }
.H-margin-horizontal-both-10 { margin-left: 10px; margin-right: 10px; }
.H-margin-horizontal-left-10 { margin-left: 10px; }
.H-margin-horizontal-right-10 { margin-right: 10px; }
.H-margin-horizontal-both-12 { margin-left: 12px; margin-right: 12px; }
.H-margin-horizontal-left-12 { margin-left: 12px; }
.H-margin-horizontal-right-12 { margin-right: 12px; }
.H-margin-horizontal-both-15 { margin-left: 15px; margin-right: 15px; }
.H-margin-horizontal-left-15 { margin-left: 15px; }
.H-margin-horizontal-right-15 { margin-right: 15px; }
.H-margin-horizontal-both-20 { margin-left: 20px; margin-right: 20px; }
.H-margin-horizontal-left-20 { margin-left: 20px; }
.H-margin-horizontal-right-20 { margin-right: 20px; }
.H-margin-horizontal-both-25 { margin-left: 25px; margin-right: 25px; }
.H-margin-horizontal-left-25 { margin-left: 25px; }
.H-margin-horizontal-right-25 { margin-right: 25px; }

.H-horizontal-both-0 { left: 0; right: 0; }
.H-horizontal-both-2 { left: 2px; right: 2px; }
.H-horizontal-both-3 { left: 3px; right: 3px; }
.H-horizontal-both-5 { left: 5px; right: 5px; }
.H-horizontal-both-8 { left: 8px; right: 8px; }
.H-horizontal-both-10 { left: 10px; right: 10px; }
.H-horizontal-both-12 { left: 12px; right: 12px; }
.H-horizontal-both-15 { left: 15px; right: 15px; }
.H-horizontal-both-20 { left: 20px; right: 20px; }
.H-horizontal-both-25 { left: 25px; right: 25px; }
.H-horizontal-left-0 { left: 0; }
.H-horizontal-left-2 { left: 2px; }
.H-horizontal-left-3 { left: 3px; }
.H-horizontal-left-5 { left: 5px; }
.H-horizontal-left-8 { left: 8px; }
.H-horizontal-left-10 { left: 10px; }
.H-horizontal-left-12 { left: 12px; }
.H-horizontal-left-15 { left: 15px; }
.H-horizontal-left-20 { left: 20px; }
.H-horizontal-left-25 { left: 25px; }
.H-horizontal-right-0 { right: 0; }
.H-horizontal-right-2 { right: 2px; }
.H-horizontal-right-3 { right: 3px; }
.H-horizontal-right-5 { right: 5px; }
.H-horizontal-right-8 { right: 8px; }
.H-horizontal-right-10 { right: 10px; }
.H-horizontal-right-12 { right: 12px; }
.H-horizontal-right-15 { right: 15px; }
.H-horizontal-right-20 { right: 20px; }
.H-horizontal-right-25 { right: 25px; }

/*定位位置*/

/* 文本缩进两个空格 */
.H-text-indent { text-indent: 28px; }

/* 常用圆角 */
.H-border-radius-circle-left-both { border-radius: 50% 0 0 50%; -webkit-border-radius: 50% 0 0 50%; }
.H-border-radius-circle-left-top { border-radius: 50% 0 0 0; -webkit-border-radius: 50% 0 0 0; }
.H-border-radius-circle-left-bottom { border-radius: 0 0 0 50%; -webkit-border-radius: 0 0 0 50%; }
.H-border-radius-circle-right-both { border-radius: 0 50% 50% 0; -webkit-border-radius: 0 50% 50% 0; }
.H-border-radius-circle-right-top { border-radius: 0 50% 0 0; -webkit-border-radius: 0 50% 0 0; }
.H-border-radius-circle-right-bottom { border-radius: 0 0 50% 0; -webkit-border-radius: 0 0 50% 0; }
.H-border-radius-3-left-both { border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; }
.H-border-radius-3-left-top { border-radius: 3px 0 0 0; -webkit-border-radius: 3px 0 0 0; }
.H-border-radius-3-left-bottom { border-radius: 0 0 0 3px; -webkit-border-radius: 0 0 0 3px; }
.H-border-radius-3-right-both { border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; }
.H-border-radius-3-right-top { border-radius: 0 3px 0 0; -webkit-border-radius: 0 3px 0 0; }
.H-border-radius-3-right-bottom { border-radius: 0 0 3px 0; -webkit-border-radius: 0 0 3px 0; }
.H-border-radius-5-left-both { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; }
.H-border-radius-5-left-top { border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; }
.H-border-radius-5-left-bottom { border-radius: 0 0 0 5px; -webkit-border-radius: 0 0 0 5px; }
.H-border-radius-5-right-both { border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; }
.H-border-radius-5-right-top { border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; }
.H-border-radius-5-right-bottom { border-radius: 0 0 5px 0; -webkit-border-radius: 0 0 5px 0; }
.H-border-radius-9-left-both { border-radius: 9px 0 0 9px; -webkit-border-radius: 9px 0 0 9px; }
.H-border-radius-9-left-top { border-radius: 9px 0 0 0; -webkit-border-radius: 9px 0 0 0; }
.H-border-radius-9-left-bottom { border-radius: 0 0 0 9px; -webkit-border-radius: 0 0 0 9px; }
.H-border-radius-9-right-both { border-radius: 0 9px 9px 0; -webkit-border-radius: 0 9px 9px 0; }
.H-border-radius-9-right-top { border-radius: 0 9px 0 0; -webkit-border-radius: 0 9px 0 0; }
.H-border-radius-9-right-bottom { border-radius: 0 0 9px 0; -webkit-border-radius: 0 0 9px 0; }
.H-border-radius-12-left-both { border-radius: 12px 0 0 12px; -webkit-border-radius: 12px 0 0 12px; }
.H-border-radius-12-left-top { border-radius: 12px 0 0 0; -webkit-border-radius: 12px 0 0 0; }
.H-border-radius-12-left-bottom { border-radius: 0 0 0 12px; -webkit-border-radius: 0 0 0 12px; }
.H-border-radius-12-right-both { border-radius: 0 12px 12px 0; -webkit-border-radius: 0 12px 12px 0; }
.H-border-radius-12-right-top { border-radius: 0 12px 0 0; -webkit-border-radius: 0 12px 0 0; }
.H-border-radius-12-right-bottom { border-radius: 0 0 12px 0; -webkit-border-radius: 0 0 12px 0; }
.H-border-radius-15-left-both { border-radius: 15px 0 0 15px; -webkit-border-radius: 15px 0 0 15px; }
.H-border-radius-15-left-top { border-radius: 15px 0 0 0; -webkit-border-radius: 15px 0 0 0; }
.H-border-radius-15-left-bottom { border-radius: 0 0 0 15px; -webkit-border-radius: 0 0 0 15px; }
.H-border-radius-15-right-both { border-radius: 0 15px 15px 0; -webkit-border-radius: 0 15px 15px 0; }
.H-border-radius-15-right-top { border-radius: 0 15px 0 0; -webkit-border-radius: 0 15px 0 0; }
.H-border-radius-15-right-bottom { border-radius: 0 0 15px 0; -webkit-border-radius: 0 0 15px 0; }
/*四边圆角*/
.H-border-radius-circle { border-radius: 50%; -webkit-border-radius: 50%; }
.H-border-radius-circle-after:after { border-radius: 50%; -webkit-border-radius: 50%; }
.H-border-radius-3 { border-radius: 3px; -webkit-border-radius: 3px; }
.H-border-radius-3-after:after { border-radius: 3px; -webkit-border-radius: 3px; }
.H-border-radius-5 { border-radius: 5px; -webkit-border-radius: 5px; }
.H-border-radius-5-after:after { border-radius: 5px; -webkit-border-radius: 5px; }
.H-border-radius-9 { border-radius: 9px; -webkit-border-radius: 9px; }
.H-border-radius-9-after:after { border-radius: 9px; -webkit-border-radius: 9px; }
.H-border-radius-12 { border-radius: 12px; -webkit-border-radius: 12px; }
.H-border-radius-12-after:after { border-radius: 12px; -webkit-border-radius: 12px; }
.H-border-radius-15 { border-radius: 15px; -webkit-border-radius: 15px; }
.H-border-radius-15-after:after { border-radius: 15px; -webkit-border-radius: 15px; }

/* 加粗 */
.H-font-weight-bold { font-weight: bold; }
.H-font-weight-normal { font-weight: normal; }
.H-font-weight-500 { font-weight: 500; }
.H-font-weight-600 { font-weight: 600; }

/*层叠*/
.H-z-index-0 { z-index: 0; }
.H-z-index-10 { z-index: 10; }
.H-z-index-100 { z-index: 100; }
.H-z-index-1000 { z-index: 1000; }
.H-z-index-10000 { z-index: 10000; }
.H-z-index-100000 { z-index: 100000; }
.H-z-index-1000000 { z-index: 1000000; }

/*生成三角形*/
.H-bugle-left { border-width: 5px; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.H-bugle-right { border-width: 5px; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; }
.H-bugle-top { border-width: 5px; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; }
.H-bugle-bottom { border-width: 5px; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }

/*阴影*/
/*内阴影*/
.H-box-shadow-inset { -webkit-box-shadow: inset 0 0 10px #CCC; box-shadow: inset 0 0 10px #CCC; }

/*点击高亮*/
.H-touch-active { }
.H-touch-active:active { background: #f4f4f4; }

/*常用边线*/
.H-outline-none { outline-width: 0; }
.H-border-none { border-width: 0; outline-width: 0; }
.H-border-vertical-both-after, .H-border-vertical-top-after, .H-border-vertical-bottom-after, .H-border-horizontal-both-after, .H-border-horizontal-left-after, .H-border-horizontal-right-after, .H-border-vertical-both-margin-10-after, .H-border-vertical-top-margin-left-10-after:after, .H-border-vertical-top-margin-right-10-after, .H-border-vertical-bottom-margin-left-10-after, .H-border-vertical-bottom-margin-right-10-after, .H-border-horizontal-both-margin-10-after, .H-border-horizontal-left-margin-top-10-after, .H-border-horizontal-left-margin-bottom-10-after, .H-border-horizontal-right-margin-top-10-after, .H-border-horizontal-right-margin-bottom-10-after, .H-border-vertical-top-margin-both-10-after, .H-border-vertical-bottom-margin-both-10-after, .H-border-horizontal-left-margin-both-10-after, .H-border-horizontal-right-margin-both-10-after, .H-border-both-after { position: relative; overflow: hidden; }

.H-border-vertical-both-after:after, .H-border-vertical-top-after:after, .H-border-vertical-bottom-after:after, .H-border-horizontal-both-after:after, .H-border-horizontal-left-after:after, .H-border-horizontal-right-after:after, .H-border-vertical-both-margin-10-after:after, .H-border-vertical-top-margin-left-10-after:after, .H-border-vertical-top-margin-right-10-after:after, .H-border-vertical-bottom-margin-left-10-after:after, .H-border-vertical-bottom-margin-right-10-after:after, .H-border-horizontal-both-margin-10-after:after, .H-border-horizontal-left-margin-top-10-after:after, .H-border-horizontal-left-margin-bottom-10-after:after, .H-border-horizontal-right-margin-top-10-after:after, .H-border-horizontal-right-margin-bottom-10-after:after, .H-border-vertical-top-margin-both-10-after:after, .H-border-vertical-bottom-margin-both-10-after:after, .H-border-horizontal-left-margin-both-10-after:after, .H-border-horizontal-right-margin-both-10-after:after, .H-border-both-after:after { display: block; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: 0 0; transform: scale(1); -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer-events: none; }
/*垂直方向*/
.H-border-vertical-both-white { border-top: 1px solid white; border-bottom: 1px solid white; }
.H-border-vertical-both-after:after, .H-border-vertical-both-margin-10-after:after { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.H-border-vertical-top-white { border-top: 1px solid white; }
.H-border-vertical-top-after:after, .H-border-vertical-top-margin-left-10-after:after, .H-border-vertical-top-margin-right-10-after:after, .H-border-vertical-top-margin-both-10-after:after { border-top: 1px solid #e6e6e6; }
.H-border-vertical-bottom-white { border-bottom: 1px solid white; }
.H-border-vertical-bottom-after:after, .H-border-vertical-bottom-margin-left-10-after:after, .H-border-vertical-bottom-margin-right-10-after:after, .H-border-vertical-bottom-margin-both-10-after:after { border-bottom: 1px solid #e6e6e6; }
.H-border-vertical-both-margin-10-after:after { margin-left: 10px; margin-right: 10px; }
.H-border-vertical-top-margin-both-10-after:after { margin-left: 10px; margin-right: 10px; }
.H-border-vertical-top-margin-left-10-after:after { margin-left: 10px; }
.H-border-vertical-top-margin-right-10-after:after { margin-right: 10px; }
.H-border-vertical-bottom-margin-both-10-after:after { margin-left: 10px; margin-right: 10px; }
.H-border-vertical-bottom-margin-left-10-after:after { margin-left: 10px; }
.H-border-vertical-bottom-margin-right-10-after:after { margin-right: 10px; }
/*水平方向*/
.H-border-horizontal-both-white { border-left: 1px solid white; border-right: 1px solid white; }
.H-border-horizontal-both-after:after, .H-border-horizontal-both-margin-10-after:after { border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }
.H-border-horizontal-left-white { border-left: 1px solid white; }
.H-border-horizontal-left-after:after, .H-border-horizontal-left-margin-top-10-after:after, .H-border-horizontal-left-margin-bottom-10-after:after, .H-border-horizontal-left-margin-both-10-after:after { border-left: 1px solid #e6e6e6; }
.H-border-horizontal-right-white { border-right: 1px solid white; }
.H-border-horizontal-right-after:after, .H-border-horizontal-right-margin-top-10-after:after, .H-border-horizontal-right-margin-bottom-10-after:after, .H-border-horizontal-right-margin-both-10-after:after { border-right: 1px solid #e6e6e6; }
.H-border-horizontal-both-margin-10-after:after { margin-top: 10px; margin-bottom: 10px; }
.H-border-horizontal-left-margin-both-10-after:after { margin-top: 10px; margin-bottom: 10px; }
.H-border-horizontal-left-margin-top-10-after:after { margin-top: 10px; }
.H-border-horizontal-left-margin-bottom-10-after:after { margin-bottom: 10px; }
.H-border-horizontal-right-margin-both-10-after:after { margin-top: 10px; margin-bottom: 10px; }
.H-border-horizontal-right-margin-top-10-after:after { margin-top: 10px; }
.H-border-horizontal-right-margin-bottom-10-after:after { margin-bottom: 10px; }


@media screen and (-webkit-min-device-pixel-ratio:1.5) {
    .H-border-vertical-both-after:after, .H-border-vertical-top-after:after, .H-border-vertical-bottom-after:after, .H-border-horizontal-both-after:after, .H-border-horizontal-left-after:after, .H-border-horizontal-right-after:after, .H-border-vertical-both-margin-10-after:after, .H-border-vertical-top-margin-left-10-after:after, .H-border-vertical-top-margin-right-10-after:after, .H-border-vertical-top-margin-right-10-after:after, .H-border-vertical-bottom-margin-left-10-after:after, .H-border-vertical-bottom-margin-right-10-after:after, .H-border-horizontal-both-margin-10-after:after, .H-border-horizontal-left-margin-top-10-after:after, .H-border-horizontal-left-margin-bottom-10-after:after, .H-border-horizontal-right-margin-top-10-after:after, .H-border-horizontal-right-margin-bottom-10-after:after, .H-border-vertical-top-margin-both-10-after:after, .H-border-vertical-bottom-margin-both-10-after:after, .H-border-horizontal-left-margin-both-10-after:after, .H-border-horizontal-right-margin-both-10-after:after, .H-border-both-after:after { right: -100%; bottom: -100%; transform: scale(0.5); -webkit-transform: scale(0.5); }
    .H-border-vertical-top-margin-both-10-after:after { margin-left: 10px; margin-right: 30px; }
    .H-border-vertical-bottom-margin-both-10-after:after { margin-left: 10px; margin-right: 30px; }
    .H-border-horizontal-left-margin-both-10-after:after { margin-top: 10px; margin-bottom: 30px; }
    .H-border-horizontal-right-margin-both-10-after:after { margin-top: 10px; margin-bottom: 30px; }
}

/*边线样式*/
.H-border-style-solid { border-style: solid; }
.H-border-style-dotted { border-style: dotted; }
.H-border-style-double { border-style: double; }
.H-border-style-dashed { border-style: dashed; }
.H-border-style-hidden { border-style: hidden; }
.H-border-style-solid-after:after { border-style: solid; }
.H-border-style-dotted-after:after { border-style: dotted; }
.H-border-style-double-after:after { border-style: double; }
.H-border-style-dashed-after:after { border-style: dashed; }
.H-border-style-hidden-after:after { border-style: hidden; }
.H-border-top-style-solid { border-top-style: solid; }
.H-border-top-style-dotted { border-top-style: dotted; }
.H-border-top-style-double { border-top-style: double; }
.H-border-top-style-dashed { border-top-style: dashed; }
.H-border-top-style-hidden { border-top-style: hidden; }
.H-border-top-style-solid-after:after { border-top-style: solid; }
.H-border-top-style-dotted-after:after { border-top-style: dotted; }
.H-border-top-style-double-after:after { border-top-style: double; }
.H-border-top-style-dashed-after:after { border-top-style: dashed; }
.H-border-top-style-hidden-after:after { border-top-style: hidden; }
.H-border-bottom-style-solid { border-bottom-style: solid; }
.H-border-bottom-style-dotted { border-bottom-style: dotted; }
.H-border-bottom-style-double { border-bottom-style: double; }
.H-border-bottom-style-dashed { border-bottom-style: dashed; }
.H-border-bottom-style-hidden { border-bottom-style: hidden; }
.H-border-bottom-style-solid-after:after { border-bottom-style: solid; }
.H-border-bottom-style-dotted-after:after { border-bottom-style: dotted; }
.H-border-bottom-style-double-after:after { border-bottom-style: double; }
.H-border-bottom-style-dashed-after:after { border-bottom-style: dashed; }
.H-border-bottom-style-hidden-after:after { border-bottom-style: hidden; }
.H-border-left-style-solid { border-left-style: solid; }
.H-border-left-style-dotted { border-left-style: dotted; }
.H-border-left-style-double { border-left-style: double; }
.H-border-left-style-dashed { border-left-style: dashed; }
.H-border-left-style-hidden { border-left-style: hidden; }
.H-border-left-style-solid-after:after { border-left-style: solid; }
.H-border-left-style-dotted-after:after { border-left-style: dotted; }
.H-border-left-style-double-after:after { border-left-style: double; }
.H-border-left-style-dashed-after:after { border-left-style: dashed; }
.H-border-left-style-hidden-after:after { border-left-style: hidden; }
.H-border-right-style-solid { border-right-style: solid; }
.H-border-right-style-dotted { border-right-style: dotted; }
.H-border-right-style-double { border-right-style: double; }
.H-border-right-style-dashed { border-right-style: dashed; }
.H-border-right-style-hidden { border-right-style: hidden; }
.H-border-right-style-solid-after:after { border-right-style: solid; }
.H-border-right-style-dotted-after:after { border-right-style: dotted; }
.H-border-right-style-double-after:after { border-right-style: double; }
.H-border-right-style-dashed-after:after { border-right-style: dashed; }
.H-border-right-style-hidden-after:after { border-right-style: hidden; }

/*透明度*/
.H-opacity-0 { opacity: 0; }
.H-opacity-1-half { opacity: 0.5; }
.H-opacity-1 { opacity: 1; }

/*取消点击黑边*/
.H-tap-highlight-color-transparent { -webkit-tap-highlight-color: transparent; }

/*解决iframe在iphone手机不能上下滑动问题*/
.H-overflow-scrolling { -webkit-overflow-scrolling: touch; overflow: scroll; }

/*支持动画*/
.H-transition-all { transition: All 0.5s ease-in; -webkit-transition: All 0.5s ease-in; }

.H-animate-rotate { animation: 1s linear 0s normal none infinite H-rotate; -webkit-animation: 1s linear 0s normal none infinite H-rotate; }

/*自定义旋转动画*/
@keyframes H-rotate {
    0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
    50% { -webkit-transform: rotate(180deg) scale(1); transform: rotate(180deg) scale(1); }
    100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); }
}

@-webkit-keyframes H-rotate {
    0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); }
    50% { -webkit-transform: rotate(180deg) scale(1); transform: rotate(180deg) scale(1); }
    100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); }
}

.H-animate-scale-big { animation: scalebig 0.2s linear; -webkit-animation: scalebig 0.2s linear; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; }
.H-animate-scale-small { animation: scalesmall 0.2s linear; -webkit-animation: scalesmall 0.2s linear; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; }
/*变大*/
@keyframes scalebig {
    from { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
    to { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
}

@-webkit-keyframes scalebig {
    from { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
    to { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
}
/*变小*/
@keyframes scalesmall {
    from { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
    to { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
}

@-webkit-keyframes scalesmall {
    from { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
    to { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
}

/* ############# Hui 组件 #############*/

/*角标*/
.H-badge label { height: 18px; line-height: 18px; padding: 0 6px; border-radius: 9px; -webkit-border-radius: 9px; transform: translateY(0.5); -webkit-transform: translateY(0.5); }
.H-badge.H-badge-null { width: 8px; height: 8px; }

/* 顶部导航栏 */
.H-header { min-height: 44px; }
.H-header-title, .H-header .H-icon { height: 44px; }
.H-header-title { left: 0; }
.H-header input::-webkit-input-placeholder { line-height: 1.5em; }

/* 底部工具栏 */
.H-footer { height: 55px; }
.H-footer-half { border-top: 1px solid #e6e6e6; }
.H-footer-half-circle { left: 50%; margin-left: -25px; top: -10px; width: 50px; height: 25px; border-radius: 25px 25px 0 0; border: 1px solid #e6e6e6; border-bottom: 0; }
.H-footer-cover-half-line { left: 0; top: -2px; transform: scaleY(0.9); -webkit-transform: scaleY(0.9); }

iframe { -webkit-user-select: none; outline: none; -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; overflow: hidden; -webkit-appearance: none; }

/*常见按钮*/
.H-button { min-width: 120px; -webkit-touch-callout: none; -webkit-appearance: none; -webkit-user-select: none; }

/*切换滑块*/
.H-switch { -webkit-touch-callout: none; cursor: pointer; overflow: hidden; width: 46px; height: 26px; border: 1px solid #dddddd; box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 13px; background-clip: content-box; -webkit-appearance: none; -webkit-user-select: none; outline: none; transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; -webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; }
.H-switch:before { width: 24px; height: 24px; position: absolute; top: 0; left: 0; border-radius: 13px; -webkit-border-radius: 13px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); content: ''; transition: left 0.2s; -webkit-transition: left 0.2s; text-transform: uppercase; }
.H-switch:checked { transition: border ease 0.2s, box-shadow ease 0.2s, background-color ease 0.6s; -webkit-transition: border ease 0.2s, box-shadow ease 0.2s, background-color ease 0.6s; }
.H-switch:checked:before { left: 20px; transition: left 0.2s; -webkit-transition: left 0.2s; }
/*带On Off的滑块 */
.H-switch.H-switch-on-off-en { width: 66px; height: 28px; }
.H-switch.H-switch-on-off-en:before, .H-switch.H-switch-on-off-cn:before { content: "Off"; font-size: 1.6rem; color: #999; text-indent: 30px; width: 26px; height: 26px; border-radius: 14px; -webkit-border-radius: 14px; line-height: 28px; }
.H-switch.H-switch-on-off-en:checked:before, .H-switch.H-switch-on-off-cn:checked:before { left: 38px; content: "On"; text-indent: -27px; color: #fff; }
.H-switch.H-switch-on-off-cn { width: 60px; height: 28px; }
.H-switch.H-switch-on-off-cn:before { content: "关"; text-indent: 30px; }
.H-switch.H-switch-on-off-cn:checked:before { left: 32px; content: "开"; text-indent: -22px; }
.H-switch.H-theme-font-color-black:checked { border-color: black; box-shadow: black 0 0 0 26px inset; background-color: black; }
.H-switch.H-theme-font-color1:checked { border-color: #52ace5; box-shadow: #52ace5 0 0 0 26px inset; background-color: #52ace5; }
.H-switch.H-theme-font-color2:checked { border-color: #ff7f8a; box-shadow: #ff7f8a 0 0 0 26px inset; background-color: #ff7f8a; }
.H-switch.H-theme-font-color3:checked { border-color: #3c4146; box-shadow: #3c4146 0 0 0 26px inset; background-color: #3c4146; }
.H-switch.H-theme-font-color4:checked { border-color: #ffa977; box-shadow: #ffa977 0 0 0 26px inset; background-color: #ffa977; }
.H-switch.H-theme-font-color5:checked { border-color: #4db7ad; box-shadow: #4db7ad 0 0 0 26px inset; background-color: #4db7ad; }
.H-switch.H-theme-font-color6:checked { border-color: #337ab7; box-shadow: #337ab7 0 0 0 26px inset; background-color: #337ab7; }
.H-switch.H-theme-font-color7:checked { border-color: #d9534f; box-shadow: #d9534f 0 0 0 26px inset; background-color: #d9534f; }
.H-switch.H-theme-font-color8:checked { border-color: #f0ad4e; box-shadow: #f0ad4e 0 0 0 26px inset; background-color: #f0ad4e; }
.H-switch.H-theme-font-color9:checked { border-color: #5cb85c; box-shadow: #5cb85c 0 0 0 26px inset; background-color: #5cb85c; }

/*复选框，复选框*/
.H-checkbox, .H-radio { cursor: pointer; -webkit-touch-callout: none; width: 22px; height: 22px; text-align: center; line-height: 22px; border: 1px solid #dddddd; box-shadow: #dfdfdf 0 0 0 0 inset; background-clip: content-box; -webkit-appearance: none; -webkit-user-select: none; outline: none; transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; -webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.2s, box-shadow cubic-bezier(0, 0, 0, 1) 0.2s; background: transparent; }
.H-checkbox.H-theme-background-color-white, .H-radio.H-theme-background-color-white { background: white; }
.H-checkbox:checked, .H-radio:checked { transition: border ease 0.2s, box-shadow ease 0.2s, background-color ease 0.6s; -webkit-touch-callout: none; -webkit-transition: border ease 0.2s, box-shadow ease 0.2s, background-color ease 0.6s; }
.H-checkbox:checked:before, .H-radio:checked:before { width: 22px; height: 22px; line-height: 22px; content: '\2713'; -webkit-touch-callout: none; }
/*空背景样式*/
.H-checkbox.H-checkbox-null.H-theme-font-color-black:checked, .H-radio.H-radio-null.H-theme-font-color-black:checked { border-color: black; }
.H-checkbox.H-checkbox-null.H-theme-font-color1:checked, .H-radio.H-radio-null.H-theme-font-color1:checked { border-color: #52ace5; }
.H-checkbox.H-checkbox-null.H-theme-font-color2:checked, .H-radio.H-radio-null.H-theme-font-color2:checked { border-color: #ff7f8a; }
.H-checkbox.H-checkbox-null.H-theme-font-color3:checked, .H-radio.H-radio-null.H-theme-font-color3:checked { border-color: #3c4146; }
.H-checkbox.H-checkbox-null.H-theme-font-color4:checked, .H-radio.H-radio-null.H-theme-font-color4:checked { border-color: #ffa977; }
.H-checkbox.H-checkbox-null.H-theme-font-color5:checked, .H-radio.H-radio-null.H-theme-font-color5:checked { border-color: #4db7ad; }
.H-checkbox.H-checkbox-null.H-theme-font-color6:checked, .H-radio.H-radio-null.H-theme-font-color6:checked { border-color: #337ab7; }
.H-checkbox.H-checkbox-null.H-theme-font-color7:checked, .H-radio.H-radio-null.H-theme-font-color7:checked { border-color: #d9534f; }
.H-checkbox.H-checkbox-null.H-theme-font-color8:checked, .H-radio.H-radio-null.H-theme-font-color8:checked { border-color: #f0ad4e; }
.H-checkbox.H-checkbox-null.H-theme-font-color9:checked, .H-radio.H-radio-null.H-theme-font-color9:checked { border-color: #5cb85c; }
/*有背景样式*/
.H-checkbox.H-checkbox-fill.H-theme-font-color-black:checked, .H-radio.H-radio-fill.H-theme-font-color-black:checked { color: #fff; border-color: black; box-shadow: black 0 0 0 26px inset; background-color: black; }
.H-checkbox.H-checkbox-fill.H-theme-font-color1:checked, .H-radio.H-radio-fill.H-theme-font-color1:checked { color: #fff; border-color: #52ace5; box-shadow: #52ace5 0 0 0 26px inset; background-color: #52ace5; }
.H-checkbox.H-checkbox-fill.H-theme-font-color2:checked, .H-radio.H-radio-fill.H-theme-font-color2:checked { color: #fff; border-color: #ff7f8a; box-shadow: #ff7f8a 0 0 0 26px inset; background-color: #ff7f8a; }
.H-checkbox.H-checkbox-fill.H-theme-font-color3:checked, .H-radio.H-radio-fill.H-theme-font-color3:checked { color: #fff; border-color: #3c4146; box-shadow: #3c4146 0 0 0 26px inset; background-color: #3c4146; }
.H-checkbox.H-checkbox-fill.H-theme-font-color4:checked, .H-radio.H-radio-fill.H-theme-font-color4:checked { color: #fff; border-color: #ffa977; box-shadow: #ffa977 0 0 0 26px inset; background-color: #ffa977; }
.H-checkbox.H-checkbox-fill.H-theme-font-color5:checked, .H-radio.H-radio-fill.H-theme-font-color5:checked { color: #fff; border-color: #4db7ad; box-shadow: #4db7ad 0 0 0 26px inset; background-color: #4db7ad; }
.H-checkbox.H-checkbox-fill.H-theme-font-color6:checked, .H-radio.H-radio-fill.H-theme-font-color6:checked { color: #fff; border-color: #337ab7; box-shadow: #337ab7 0 0 0 26px inset; background-color: #337ab7; }
.H-checkbox.H-checkbox-fill.H-theme-font-color7:checked, .H-radio.H-radio-fill.H-theme-font-color7:checked { color: #fff; border-color: #d9534f; box-shadow: #d9534f 0 0 0 26px inset; background-color: #d9534f; }
.H-checkbox.H-checkbox-fill.H-theme-font-color8:checked, .H-radio.H-radio-fill.H-theme-font-color8:checked { color: #fff; border-color: #f0ad4e; box-shadow: #f0ad4e 0 0 0 26px inset; background-color: #f0ad4e; }
.H-checkbox.H-checkbox-fill.H-theme-font-color9:checked, .H-radio.H-radio-fill.H-theme-font-color9:checked { color: #fff; border-color: #5cb85c; box-shadow: #5cb85c 0 0 0 26px inset; background-color: #5cb85c; }

/*性别选择*/
.H-radio.H-radio-gender-man:before { content: '\2642'; color: #ddd; }
.H-radio.H-radio-gender-girl:before { content: '\2640'; color: #ddd; }
/*对错选择*/
.H-radio.H-radio-judge-yes:before { content: '\2713'; color: #ddd; }
.H-radio.H-radio-judge-no:before { content: '\2715'; color: #ddd; }
/*ABCDEFG选择*/
.H-radio.H-radio-select-A:before { content: '\0041'; color: #ddd; }
.H-radio.H-radio-select-B:before { content: '\0042'; color: #ddd; }
.H-radio.H-radio-select-C:before { content: '\0043'; color: #ddd; }
.H-radio.H-radio-select-D:before { content: '\0044'; color: #ddd; }
.H-radio.H-radio-select-E:before { content: '\0045'; color: #ddd; }
.H-radio.H-radio-select-F:before { content: '\0046'; color: #ddd; }
.H-radio.H-radio-select-G:before { content: '\0047'; color: #ddd; }
/*性别，对错，ABCDEFG空背景*/
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color-black:checked:before { color: black; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color1:checked:before { color: #52ace5; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color2:checked:before { color: #ff7f8a; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color3:checked:before { color: #3c4146; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color4:checked:before { color: #ffa977; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color5:checked:before { color: #4db7ad; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color6:checked:before { color: #337ab7; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color7:checked:before { color: #d9534f; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color8:checked:before { color: #f0ad4e; }
.H-radio.H-radio-gender-girl.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-gender-man.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-judge-no.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-judge-yes.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-A.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-B.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-C.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-D.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-E.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-F.H-radio-null.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-G.H-radio-null.H-theme-font-color9:checked:before { color: #5cb85c; }
/*性别，对错，ABCDEFG有背景*/
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-gender-girl.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-gender-man.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-A.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-B.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-C.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-D.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-E.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-F.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-select-G.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color-black:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color1:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color2:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color3:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color4:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color5:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color6:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color7:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color8:checked:before,
.H-radio.H-radio-judge-no.H-radio-fill.H-theme-font-color9:checked:before,
.H-radio.H-radio-judge-yes.H-radio-fill.H-theme-font-color9:checked:before { color: #fff; }

/*区域滑块*/
.H-range { cursor: pointer; -webkit-touch-callout: none; height: 4px; margin: 12px 0; background-color: #c8c7cc; appearance: none !important; -webkit-appearance: none !important; }
.H-range::-webkit-slider-thumb { width: 25px; height: 25px; border-radius: 50%; -webkit-border-radius: 50%; border-color: #1abc9c; background-color: #1abc9c; appearance: none !important; -webkit-appearance: none !important; }

.H-range.H-range-square { height: 10px; margin: 3px 0; }
.H-range.H-range-square::-webkit-slider-thumb { width: 32px; height: 16px; border-radius: 3px; -webkit-border-radius: 3px; }
.H-range.H-theme-font-color-black::-webkit-slider-thumb { border-color: black; background-color: black; }
.H-range.H-theme-font-color1::-webkit-slider-thumb { border-color: #52ace5; background-color: #52ace5; }
.H-range.H-theme-font-color2::-webkit-slider-thumb { border-color: #ff7f8a; background-color: #ff7f8a; }
.H-range.H-theme-font-color3::-webkit-slider-thumb { border-color: #3c4146; background-color: #3c4146; }
.H-range.H-theme-font-color4::-webkit-slider-thumb { border-color: #ffa977; background-color: #ffa977; }
.H-range.H-theme-font-color5::-webkit-slider-thumb { border-color: #4db7ad; background-color: #4db7ad; }
.H-range.H-theme-font-color6::-webkit-slider-thumb { border-color: #337ab7; background-color: #337ab7; }
.H-range.H-theme-font-color7::-webkit-slider-thumb { border-color: #d9534f; background-color: #d9534f; }
.H-range.H-theme-font-color8::-webkit-slider-thumb { border-color: #f0ad4e; background-color: #f0ad4e; }
.H-range.H-theme-font-color9::-webkit-slider-thumb { border-color: #5cb85c; background-color: #5cb85c; }

/*文本框*/
.H-textbox { appearance: none !important; -webkit-appearance: none !important; outline: 0; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; }
textarea.H-textbox { min-height: 150px; resize: none; }

/*会话组件*/
.H-chatbox-img, .H-chatbox-img img { width: 50px; height: 50px; }
.H-chatbox-bugle { border-width: 8px; top: 14px; }
.H-chatbox-receiver .H-chatbox-bugle { left: -16px; }
.H-chatbox-sender .H-chatbox-bugle { right: -16px; }
.H-chatbox-status-loading { animation: 1s linear 0s normal none infinite H-rotate; -webkit-animation: 1s linear 0s normal none infinite H-rotate; }
.H-chatbox-content-text, .H-chatbox-content-image, .H-chatbox-content-voice { word-break: break-all; }

/*时间轴*/
.H-timeline, .H-timeline-dot, html, body { background: #f4f5f9; }
.H-timeline-dotline { width: 12px; height: 50px; top: 10px; right: 14px; }
.H-timeline-dot { width: 6px; height: 6px; right: 3px; top: 0; border: 1px solid #9cf59c; }
.H-timeline-dotline .H-timeline-dot:last-child { top: 40px; }
.H-timeline-bigdot { border: 1px solid #9cf59c; height: 12px; width: 12px; right: 0; top: 17px; }
.H-timeline-bigdot-child { height: 8px; width: 8px; background: #5cb85c; }
.H-timeline:after { border-right: 4px solid #5cb85c; margin-right: 60px; }
.H-timeline-item { min-height: 80px; }
.H-timeline-item:after { border: 1px solid #d7d7d7; border-radius: 6px; overflow: hidden; }
.H-timeline-container { padding-right: 30px; }
.H-timeline-line { width: 2px; height: 48px; right: 6px; top: 0; background: #5cb85c; z-index: 9999; }
.H-timeline-footer { background: #f4f4f4; border-radius: 0 0 6px 6px; overflow: hidden; }
.H-timeline-header { border-radius: 6px 6px 0 0; overflow: hidden; }
.H-timeline-header:after { margin-right: 40px; border-bottom: 1px solid #d7d7d7; }

/*下拉加载*/
#H-drop-reflesh { top: -40px; left: 50%; margin-left: -20px; }

/*下拉选择*/
.H-select-area { z-index: 193343430; }
.H-select-area .H-select-list { height: 270px; z-index: 193343430; }
.H-select-area .H-select-options { height: 225px; }
.H-select-area .H-select-check { border: 1px solid #52ace5; border-width: 1px 0; z-index: 193343434; }
.H-select-area .H-select-button { line-height: 45px; }

/*表格*/
.H-table { border-collapse: collapse; border-spacing: 0; }
.H-table.H-table-fixed { table-layout: fixed; }
.H-table td, .H-table th { width: 1px; white-space: nowrap; word-break: keep-all; }

/********************丰富动画集合*********************/

/*!
 * 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
 */
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; }

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

@-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; }