@charset "UTF-8";

/*!
 * 文件名称：Hui.css
 * 文件版本：Version 0.3.4    2016-05-18

/* 重置样式 */
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%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { margin: 0; -webkit-overflow-scrolling: touch; font-size: 1.6rem; line-height: 1.5; background: #f8f8f8; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
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; }
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; width: 100%;vertical-align: middle;}
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: 'pigfont'; src: url('Hui.ttf?100') format('truetype'); }
.H-iconfont { font-family: "pigfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }

.pig-252:before { content: "\e6f0"; }

.pig-86:before { content: "\e67d"; }

.pig-167:before { content: "\e6a8"; }

.pig-153:before { content: "\e698"; }

.pig-145:before { content: "\e692"; }

.pig-146:before { content: "\e695"; }

.pig-187:before { content: "\e6bb"; }

.pig-77:before { content: "\e68f"; }

.pig-150:before { content: "\e697"; }

.pig-159:before { content: "\e6a0"; }

.pig-191:before { content: "\e6be"; }

.pig-129:before { content: "\e600"; }

.pig-206:before { content: "\e6ca"; }

.pig-196:before { content: "\e6e1"; }

.pig-157:before { content: "\e69b"; }

.pig-130:before { content: "\e647"; }

.pig-189:before { content: "\e6b9"; }

.pig-185:before { content: "\e705"; }

.pig-184:before { content: "\e706"; }

.pig-173:before { content: "\e6af"; }

.pig-139:before { content: "\e68b"; }

.pig-143:before { content: "\e68c"; }

.pig-197:before { content: "\e6c1"; }

.pig-170:before { content: "\e6aa"; }

.pig-142:before { content: "\e64a"; }

.pig-210:before { content: "\e6ce"; }

.pig-264:before { content: "\e6fd"; }

.pig-152:before { content: "\e699"; }

.pig-202:before { content: "\e6c6"; }

.pig-158:before { content: "\e69e"; }

.pig-147:before { content: "\e693"; }

.pig-148:before { content: "\e694"; }

.pig-134:before { content: "\e661"; }

.pig-227:before { content: "\e6df"; }

.pig-136:before { content: "\e68a"; }

.pig-222:before { content: "\e6da"; }

.pig-193:before { content: "\e6bf"; }

.pig-209:before { content: "\e6cb"; }

.pig-254:before { content: "\e690"; }

.pig-194:before { content: "\e6e0"; }

.pig-234:before { content: "\e6ec"; }

.pig-190:before { content: "\e6ba"; }

.pig-195:before { content: "\e6c0"; }

.pig-122:before { content: "\e67f"; }

.pig-165:before { content: "\e69f"; }

.pig-85:before { content: "\e65b"; }

.pig-84:before { content: "\e65c"; }

.pig-98:before { content: "\e653"; }

.pig-235:before { content: "\e77e"; }

.pig-104:before { content: "\e657"; }

.pig-103:before { content: "\e666"; }

.pig-102:before { content: "\e667"; }

.pig-101:before { content: "\e668"; }

.pig-100:before { content: "\e66a"; }

.pig-105:before { content: "\e66b"; }

.pig-108:before { content: "\e66c"; }

.pig-99:before { content: "\e66d"; }

.pig-106:before { content: "\e66e"; }

.pig-107:before { content: "\e66f"; }

.pig-88:before { content: "\e656"; }

.pig-90:before { content: "\e660"; }

.pig-89:before { content: "\e664"; }

.pig-87:before { content: "\e65e"; }

.pig-109:before { content: "\e670"; }

.pig-131:before { content: "\e64b"; }

.pig-180:before { content: "\e696"; }

.pig-140:before { content: "\e68e"; }

.pig-200:before { content: "\e6c4"; }

.pig-96:before { content: "\e658"; }

.pig-121:before { content: "\e681"; }

.pig-2:before { content: "\e601"; }

.pig-3:before { content: "\e602"; }

.pig-4:before { content: "\e603"; }

.pig-5:before { content: "\e604"; }

.pig-6:before { content: "\e605"; }

.pig-7:before { content: "\e606"; }

.pig-8:before { content: "\e607"; }

.pig-9:before { content: "\e608"; }

.pig-10:before { content: "\e609"; }

.pig-11:before { content: "\e60a"; }

.pig-12:before { content: "\e60b"; }

.pig-13:before { content: "\e60c"; }

.pig-18:before { content: "\e60f"; }

.pig-19:before { content: "\e610"; }

.pig-20:before { content: "\e611"; }

.pig-21:before { content: "\e612"; }

.pig-22:before { content: "\e613"; }

.pig-23:before { content: "\e614"; }

.pig-24:before { content: "\e615"; }

.pig-25:before { content: "\e616"; }

.pig-26:before { content: "\e617"; }

.pig-27:before { content: "\e618"; }

.pig-28:before { content: "\e619"; }

.pig-29:before { content: "\e61a"; }

.pig-30:before { content: "\e61b"; }

.pig-31:before { content: "\e61c"; }

.pig-32:before { content: "\e61d"; }

.pig-33:before { content: "\e61e"; }

.pig-34:before { content: "\e61f"; }

.pig-35:before { content: "\e620"; }

.pig-36:before { content: "\e621"; }

.pig-37:before { content: "\e622"; }

.pig-38:before { content: "\e623"; }

.pig-39:before { content: "\e624"; }

.pig-40:before { content: "\e625"; }

.pig-41:before { content: "\e626"; }

.pig-42:before { content: "\e627"; }

.pig-43:before { content: "\e628"; }

.pig-44:before { content: "\e629"; }

.pig-45:before { content: "\e62a"; }

.pig-46:before { content: "\e62b"; }

.pig-47:before { content: "\e62c"; }

.pig-48:before { content: "\e62d"; }

.pig-49:before { content: "\e62e"; }

.pig-50:before { content: "\e62f"; }

.pig-51:before { content: "\e630"; }

.pig-52:before { content: "\e631"; }

.pig-53:before { content: "\e632"; }

.pig-54:before { content: "\e633"; }

.pig-55:before { content: "\e634"; }

.pig-56:before { content: "\e635"; }

.pig-57:before { content: "\e636"; }

.pig-58:before { content: "\e637"; }

.pig-59:before { content: "\e638"; }

.pig-60:before { content: "\e639"; }

.pig-61:before { content: "\e63a"; }

.pig-62:before { content: "\e63b"; }

.pig-63:before { content: "\e63c"; }

.pig-64:before { content: "\e63d"; }

.pig-65:before { content: "\e63e"; }

.pig-66:before { content: "\e63f"; }

.pig-67:before { content: "\e640"; }

.pig-68:before { content: "\e641"; }

.pig-70:before { content: "\e643"; }

.pig-71:before { content: "\e644"; }

.pig-75:before { content: "\e648"; }

.pig-76:before { content: "\e649"; }

.pig-80:before { content: "\e64d"; }

.pig-14:before { content: "\e64e"; }

.pig-15:before { content: "\e64f"; }

.pig-117:before { content: "\e675"; }

.pig-204:before { content: "\e6c8"; }

.pig-119:before { content: "\e676"; }

.pig-hot:before { content: "\e677"; }

.pig-223:before { content: "\e6dc"; }

.pig-133:before { content: "\e64c"; }

.pig-123:before { content: "\e684"; }

.pig-169:before { content: "\e6ab"; }

.pig-168:before { content: "\e6a9"; }

.pig-198:before { content: "\e6c2"; }

.pig-205:before { content: "\e6c9"; }

.pig-151:before { content: "\e69c"; }

.pig-120:before { content: "\e679"; }

.pig-118:before { content: "\e67b"; }

.pig-82:before { content: "\e655"; }

.pig-214:before { content: "\e6d3"; }

.pig-116:before { content: "\e646"; }

.pig-128:before { content: "\e65a"; }

.pig-216:before { content: "\e6d4"; }

.pig-69:before { content: "\e651"; }

.pig-124:before { content: "\e685"; }

.pig-83:before { content: "\e671"; }

.pig-95:before { content: "\e654"; }

.pig-81:before { content: "\e642"; }

.pig-110:before { content: "\e650"; }

.pig-113:before { content: "\e663"; }

.pig-114:before { content: "\e65f"; }

.pig-93:before { content: "\e672"; }

.pig-94:before { content: "\e673"; }

.pig-logo:before { content: "\e662"; }

.pig-111:before { content: "\e659"; }

.pig-112:before { content: "\e669"; }

.pig-72:before { content: "\e645"; }

.pig-1:before { content: "\e665"; }

.pig-115:before { content: "\e674"; }

.pig-219:before { content: "\e6d7"; }

.pig-183:before { content: "\e6b8"; }

.pig-161:before { content: "\e6a6"; }

.pig-238:before { content: "\e6eb"; }

.pig-126:before { content: "\e67c"; }

.pig-127:before { content: "\e678"; }

.pig-125:before { content: "\e67a"; }

.pig-224:before { content: "\e6db"; }

.pig-179:before { content: "\e6bd"; }

.pig-91:before { content: "\e67e"; }

.pig-92:before { content: "\e680"; }

.pig-79:before { content: "\e682"; }

.pig-78:before { content: "\e683"; }

.pig-73:before { content: "\e686"; }

.pig-74:before { content: "\e687"; }

.pig-217:before { content: "\e652"; }

.pig-132:before { content: "\e65d"; }

.pig-135:before { content: "\e688"; }

.pig-137:before { content: "\e689"; }

.pig-138:before { content: "\e68d"; }

.pig-144:before { content: "\e691"; }

.pig-155:before { content: "\e69d"; }

.pig-250:before { content: "\e6ee"; }

.pig-199:before { content: "\e6c3"; }

.pig-154:before { content: "\e69a"; }

.pig-160:before { content: "\e6a2"; }

.pig-162:before { content: "\e6a1"; }

.pig-230:before { content: "\e6e4"; }

.pig-181:before { content: "\e6b5"; }

.pig-156:before { content: "\e6a3"; }

.pig-255:before { content: "\e6f3"; }

.pig-164:before { content: "\e6a4"; }

.pig-163:before { content: "\e6a7"; }

.pig-166:before { content: "\e6a5"; }

.pig-220:before { content: "\e6d8"; }

.pig-192:before { content: "\e6bc"; }

.pig-172:before { content: "\e6ae"; }

.pig-188:before { content: "\e6fb"; }

.pig-243:before { content: "\e74f"; }

.pig-225:before { content: "\e6dd"; }

.pig-226:before { content: "\e6de"; }

.pig-207:before { content: "\e6cc"; }

.pig-203:before { content: "\e6c7"; }

.pig-171:before { content: "\e6ac"; }

.pig-258:before { content: "\e6f6"; }

.pig-228:before { content: "\e6e2"; }

.pig-232:before { content: "\e6e9"; }

.pig-174:before { content: "\e6ad"; }

.pig-175:before { content: "\e6b0"; }

.pig-242:before { content: "\e60e"; }

.pig-176:before { content: "\e6b1"; }

.pig-177:before { content: "\e6b2"; }

.pig-178:before { content: "\e6b3"; }

.pig-149:before { content: "\e6b4"; }

.pig-233:before { content: "\e6ea"; }

.pig-240:before { content: "\e60d"; }

.pig-247:before { content: "\e7c1"; }

.pig-248:before { content: "\e6fc"; }

.pig-186:before { content: "\e6b7"; }

.pig-208:before { content: "\e6cd"; }

.pig-182:before { content: "\e6b6"; }

.pig-201:before { content: "\e6c5"; }

.pig-257:before { content: "\e6f7"; }

.pig-244:before { content: "\e6f4"; }

.pig-245:before { content: "\e6f5"; }

.pig-212:before { content: "\e6cf"; }

.pig-211:before { content: "\e6d0"; }

.pig-213:before { content: "\e6d1"; }

.pig-215:before { content: "\e6d2"; }

.pig-97:before { content: "\e6d5"; }

.pig-218:before { content: "\e6d6"; }

.pig-221:before { content: "\e6d9"; }

.pig-265:before { content: "\e703"; }

.pig-229:before { content: "\e6e3"; }

.pig-263:before { content: "\e701"; }

.pig-267:before { content: "\e73e"; }

.pig-239:before { content: "\e6ed"; }

.pig-231:before { content: "\e6e5"; }

.pig-141:before { content: "\e6e8"; }

.pig-246:before { content: "\e6f8"; }

.pig-236:before { content: "\e6e6"; }

.pig-237:before { content: "\e6e7"; }

.pig-241:before { content: "\e6ef"; }

.pig-16:before { content: "\e6f2"; }

.pig-249:before { content: "\e77f"; }

.pig-251:before { content: "\e7c2"; }

.pig-253:before { content: "\e6f1"; }

.pig-256:before { content: "\e6f9"; }

.pig-259:before { content: "\e6fa"; }

.pig-268:before { content: "\e704"; }

.pig-260:before { content: "\e6fe"; }

.pig-261:before { content: "\e6ff"; }

.pig-262:before { content: "\e700"; }

.pig-269:before { content: "\e707"; }

.pig-270:before { content: "\e708"; }


/*改写滚动条为全部透明*/
::-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-aaa { color: #aaa; }
.H-theme-font-color-bbb { color: #bbb; }
.H-theme-font-color-ccc { color: #ccc; }
.H-theme-font-color-ddd { color: #ddd; }
.H-theme-font-color-eee { color: #eee; }
.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-333 { color: #333; }
.H-theme-font-color-black { color: black; }
.H-theme-font-color-red { color: #fe583e; }
.H-theme-font-color-green { color: green; }
.H-theme-font-color-blue { color: #566f98; }
.H-theme-font-color-yellow { color: yellow; }
.H-theme-font-color-pink { color: pink; }
.H-theme-font-color-gray { color: #393a3e; }
.H-theme-font-color-gold { color: #df983c; }
.H-theme-font-color-black-active { color: #333; }
.H-theme-font-color-black-click:active { color: #fff; }
/* 扁平化主题字体颜色 */
.H-theme-font-color1 { color: #fea200; }
.H-theme-font-color2 { color: #f16d5e; }
.H-theme-font-color3 { color: #e5507a; }
.H-theme-font-color4 { color: #52ace5; }
.H-theme-font-color5 { color: #10c788; }
.H-theme-font-color6 { color: #d7700b; }
.H-theme-font-color7 { color: #d9534f; }
.H-theme-font-color8 { color: #f0ad4e; }
.H-theme-font-color9 { color: #818f9c; }

/* 常用主题背景颜色 */
.H-theme-background-color-transparent { background-color: rgba(0,0,0,0); }
.H-theme-background-color-aaa { background-color: #aaa; }
.H-theme-background-color-bbb { background-color: #bbb; }
.H-theme-background-color-ccc { background-color: #ccc; }
.H-theme-background-color-eee { background-color: #eee; }
.H-theme-background-color-ddd { background-color: #ddd; }
.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: #fe583e; }
.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: #393a3e;color: #fff; /*background: -webkit-linear-gradient(-90deg, #ccc 0%,#fff 80%); */}
.H-theme-background-color-gold { background-color: #df983c; }
.H-theme-background-color-f5 { background: #f5f5f5; }
.H-theme-background-color-f9 { background: #f9f9f9; }
/* 扁平化主题字背景颜色 */
.H-theme-background-color1 { background-color: #fe583e; }
.H-theme-background-color2 { background-color: #fea200; }
.H-theme-background-color3 { background-color: #f16d5e; }
.H-theme-background-color4 { background-color: #e5507a; }
.H-theme-background-color5 { background-color: #169ada; }
.H-theme-background-color6 { background-color: #fafafa; }
.H-theme-background-color7 { background-color: #10c788; }
.H-theme-background-color8 { background-color: #00c528; }
.H-theme-background-color9 { background-color: #393a3e; }
.H-home-memu-bg-color1{ background-color: #f9568e;}
.H-home-memu-bg-color2{ background-color: #27d2b3;}
.H-home-memu-bg-color3{ background-color: #fc9811;}
.H-home-memu-bg-color4{ background-color: #f86e61;}
.H-home-memu-bg-color5{ background-color: #f55068;}
.H-home-memu-bg-color6{ background-color: #c069d7;}
.H-home-memu-bg-color7{ background-color: #3693ef;}
.H-home-memu-bg-color8{ background-color: #927eeb;}
.H-message-bg-color1{background-color: #6ccd86;}
.H-message-bg-color2{background-color: #70caca;}
.H-message-bg-color3{background-color: #6baffc;}
.H-message-bg-color4{background-color: #fcaa54;}
.H-message-bg-chat-white:before{background:#fff;}
.H-message-bg-chat-green:before{background:#76e658;}
.H-message-bg-chat-orange:before{background:#f1a13a;}


/* 扁平化主题背景高亮颜色 */
.H-theme-background-color1-active { background-color: #d63317; }
.H-theme-background-color2-active{background: #434448;}
.p-ui-user-top{background: -webkit-linear-gradient(-10deg, #fe2d58 -30%,#ff5132 100%); }
.p-ui-user-top-vip{background: -webkit-linear-gradient(-10deg, #d7bd8c -30%,#c59b4f 100%); }

/*常用边框颜色*/
/*四边线*/
.H-border-none{border: none;}
.H-border-both { border: 1px solid #f7f5f5; }
.H-border-both-after:after { border: 1px solid #e1e1e1;border-radius: 10px;}
.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 #fe583e; }
.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 #393a3e; }
.H-theme-border-color-f9 { border: 1px solid #f9f9f9; }
.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 #10c788; }
.H-theme-border-color6 { border: 1px solid #337ab7; }
.H-theme-border-color7 { border: 1px solid #10c788; }
.H-theme-border-color8 { border: 1px solid #f0ad4e; }
.H-theme-border-color9 { border: 1px solid #5cb85c; }
/* 扁平化边框高亮颜色 */
.H-theme-border-color-red-active { border: 1px solid #fe583e; }
.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-none{background: none;}
.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; }
.H-line-height-13 { line-height: 1.3; }

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

.H-width-10 { width: 10px; }
.H-height-10 { height: 10px; }
.H-width-15 { width: 15px; }
.H-height-15 { height: 15px; }
.H-width-20 { width: 20px; }
.H-height-20 { height: 20px; }
.H-width-22 { width: 22px; }
.H-height-22 { height: 22px; }
.H-width-25 { width: 25px; }
.H-height-25 { height: 25px; }
.H-width-30 { width: 30px; }
.H-height-30 { height: 30px; }
.H-width-40 { width: 40px; }
.H-height-40 { height: 40px; }
.H-width-42 { width: 42px; }
.H-height-42 { height: 42px; }
.H-width-45 { width: 45px; }
.H-height-45 { height: 45px; }
.H-width-48 { width: 48px; }
.H-height-48 { height: 48px; }
.H-width-50 { width: 50px; }
.H-height-50 { height: 50px; }
.H-width-60 { width: 60px; }
.H-height-60 { height: 60px; }
.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-min-height-24{min-height: 24px;}

/*常用边距*/
.H-p0{padding: 0 !important;}
.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-6 { padding-top: 6px; padding-bottom: 6px; }
.H-padding-vertical-top-6 { padding-top: 6px; }
.H-padding-vertical-bottom-6 { padding-bottom: 6px; }
.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-18 { padding-top: 18px; padding-bottom: 18px; }
.H-padding-vertical-top-18 { padding-top: 18px; }
.H-padding-vertical-bottom-18 { padding-bottom: 18px; }
.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-1 { margin-top: 1px; margin-bottom: 1px; }
.H-margin-vertical-top-1 { margin-top: 1px; }
.H-margin-vertical-bottom-1 { margin-bottom: 1px; }
.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-top-4 { margin-top: 4px; }
.H-margin-vertical-bottom-4 { margin-bottom: 4px; }
.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-7 { margin-top: 7px; margin-bottom: 7px; }
.H-margin-vertical-top-7 { margin-top: 7px; }
.H-margin-vertical-bottom-7 { margin-bottom: 7px; }
.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-1 { top: 1px; }
.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-top-30 { top: 30px; }
.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-vertical-bottom-40 { bottom: 40px; }
.H-vertical-bottom-60 { bottom: 60px; }
.H-vertical-bottom-80 { bottom: 80px; }

/*水平方向*/
.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-7 { margin-left: 7px; margin-right: 7px; }
.H-margin-horizontal-left-7 { margin-left: 7px; }
.H-margin-horizontal-right-7 { margin-right: 7px; }
.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-2 { border-radius: 2px; -webkit-border-radius: 2px; }
.H-border-radius-2-after:after { border-radius: 2px; -webkit-border-radius: 2px; }
.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-border-radius-50 { border-radius: 50px; -webkit-border-radius: 50px; }
.H-border-radius-50-after:after { border-radius: 50px; -webkit-border-radius: 50px; }

/* 加粗 */
.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-msg-bugle-left{width: 10px;height: 10px;top: 16px;left: -4px;background: url(../images/p-ui-bugle.png) no-repeat left top;background-size: 5px;}
.H-msg-bugle-left-green{width: 10px;height: 10px;top: 16px;left: -4px;background: url(../images/p-ui-bugle.png) no-repeat left -20px;background-size: 5px;}
.H-msg-bugle-top-green{width: 10px;height: 10px;top: -4px;left: 9px;background: url(../images/p-ui-bugle.png) no-repeat left -20px;background-size: 5px;z-index: 0;-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.H-msg-bugle-right{width: 10px;height: 10px;top: 16px;right: -9px;background: url(../images/p-ui-bugle.png) no-repeat left -40px;background-size: 5px;}
.H-msg-bugle-left-orange{width: 10px;height: 10px;top: 16px;left: -4px;background: url(../images/p-ui-bugle.png) no-repeat left -59px;background-size: 5px;}
.H-msg-bugle-right-orange{width: 10px;height: 10px;top: 16px;right: -4px;background: url(../images/p-ui-bugle.png) no-repeat left -80px;background-size: 5px;}
.H-msg-bugle-top{width: 10px;height: 10px;top: -4px;right: 9px;background: url(../images/p-ui-bugle.png) no-repeat left top;background-size: 5px;transform:rotate(90deg);}

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

/*外阴影*/
.H-box-shadow-outset { -webkit-box-shadow: 0 0 2px #e1e1e1; box-shadow: 0 0 2px #e1e1e1; }

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

/*常用边线*/
.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 #e1e1e1; border-bottom: 1px solid #e1e1e1; }
.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 #e1e1e1; }
.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 #e1e1e1; }
.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 #e1e1e1; border-right: 1px solid #e1e1e1; }
.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 #e1e1e1; }
.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 #e1e1e1; }
.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; }
.H-border-vertical-bottom-margin-left-10-after{overflow: hidden;}

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

/*头部淡入*/
#header.fadeIn {-webkit-animation: fadeIn .8s ease both;animation: fadeIn .8s ease both;}
@-webkit-keyframes fadeIn {
   0%{opacity: 0;}
   40%{opacity: 0.4;}
   80%{opacity: 0.8;}
   to{opacity: 1;}
}

/* 底部工具栏 */
.H-footer { height: 50px; }
.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); }
.p-ui-scale9{-webkit-transform:scale(0.9);}
.p-ui-scale8{-webkit-transform:scale(0.8);}
.p-ui-scale7{-webkit-transform:scale(0.7);}

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

/*正方图片*/
.p-ui-box{width:100%;padding-bottom: 100%;background-position: center !important;background-size: cover !important;height: 0;position: relative;}
/*线条*/
.p-ui-header:after{border-bottom: 1px solid #e1e1e1;content: "";position: absolute;bottom: 0px;left: 0px;right: 0px;-webkit-transform: scaleY(0.5);-webkit-transform-origin: 0 0;pointer-events: none;}
.p-ui-header-top:after{border-top: 1px solid #e1e1e1;content: "";position: absolute;top: 0px;left: 0px;right: 0px;-webkit-transform: scaleY(0.5);-webkit-transform-origin: 0 0;pointer-events: none;}
/*回到顶部*/
.gotop{}

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

/* 没数据 */
.pig_null{text-align: center;position: absolute;left: 50%;top: 38%;-webkit-transform: translate(-50%,-40%);transform: translate(-50%,-40%);}
.pig_null img{width: 140px;}
.pig_null p{color: #999;font-size: 16px;margin-top: 15px;overflow: hidden;}
.pig_null_btn{height: 42px;margin-top: 30px;}
.pig_null_btn:before{background: rgba(255,255,255,0.8);}
.pig_null_btn span{color: #999;font-size: 16px;margin-top: 10px;}

.head_tit_elps{white-space: nowrap; text-overflow: ellipsis; overflow: hidden;-webkit-box-orient: block-axis;left: 50px;right: 50px;height: 38px;margin-top: 2px;}

/*切换滑块*/
.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: #10c788; box-shadow: #10c788 0 0 0 26px inset; background-color: #10c788; }
.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: #fe583e; box-shadow: #fe583e 0 0 0 26px inset; background-color: #fe583e; }
.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: 20px; height: 20px; text-align: center; line-height: 20px; 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: 20px; height: 20px; line-height: 20px; 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: #10c788; }
.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: #fe583e; }
.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: #10c788; box-shadow: #10c788 0 0 0 26px inset; background-color: #10c788; }
.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: #fe583e; box-shadow: #fe583e 0 0 0 26px inset; background-color: #fe583e; }
.H-checkbox.H-checkbox-fill.H-theme-font-color8:checked, .H-radio.H-radio-fill.H-theme-font-color8:checked { color: #fff; border-color: #b38434; box-shadow: #b38434 0 0 0 26px inset; background-color: #b38434; }
.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: #10c788; }
.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: #10c788; background-color: #10c788; }
.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; }

.head_fixed{position:fixed; top:0px; left:0px; width:100%;}

/* 滚动区域 */
.scroller-wrapper {position: relative;z-index: 1;height: 45px;width: 100%;overflow: hidden;-ms-touch-action: none;}
#scroller {position: absolute;z-index: 1;height: 45px;}
#scroller ul {width: 100%;display: -webkit-box;-webkit-box-orient: horizontal;box-sizing: border-box;-webkit-box-sizing: border-box;position: relative;}
#scroller li {width: 80px;height: 45px;line-height: normal;font-size: 14px;overflow: hidden;text-align: center;color: #000;box-sizing: border-box;-webkit-box-sizing: border-box;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;}
#scroller li p {color: #333;font-size: 14px;margin: 0;}
#scroller li p span {display: inline-block;padding: 5px 10px 4px 10px;border-radius: 100px;white-space: nowrap;line-height: 17px; }
#scroller li p.active span{border-bottom: 3px solid #fe583e;color: #fe583e;background: none;padding: 14px 0 10px 0; border-radius: 0;font-weight: bold;}

.scroller_more{position: absolute;top: 0;right: 0;z-index: 999;color: #666;background: #fff;height: 44px;width: 40px;}
.scroller_more em{background: url(../images/p-ui-scroll-more.png) no-repeat left center;background-size: 90%;height: 44px;width: 6px;position: absolute;left: -6px;}

/* 滚动区域结束*/

/*筛选图标*/
.p-ui-screen-icon{background: url(../images/p-ui-screen-icon.png) no-repeat 98% 90%;background-size: 6px;}
/*选择*/
.screen_cur{color: #fe583e;width: 100%;display: block;}
.screen_cur:before{font-family: "pigfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; content: "\e621";float: right;}

/*下拉选择*/
.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; }