/* ------------------------------------------------------------------------ reset */
/*
	Name:			mod_reset
	Explain:		重定义浏览器默认样式
*/
    @-ms-viewport { width: device-width; }
	* { word-wrap: break-word; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing: border-box; }
    *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; }
	body, input, button, select, textarea { font-family: "Helvetica Neue",Helvetica,STHeiti,"Microsoft YaHei",Arial,Verdana,sans-serif; font-size: .875rem; color: #585858; }
    body { background-color: #fff; }
    textarea { resize: none; }
	html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu { margin: 0; padding: 0; }
	html, body, fieldset, iframe { border: 0; }
	table { empty-cells: show; border-collapse: collapse; }
		caption, th { text-align: left; font-weight: normal; }
	ul li { list-style: none; }
    h1, h2, h3, h4, h5, h6 { font-size: 1em; }
	i, cite, em, var, address, dfn { font-style: normal; }
	sup, sub { font-size: 83%; }
	pre, code, kbd, samp { font-family: inherit; }
	q:before, q:after { content: none; }
	del, ins, u, s, a, a:hover { text-decoration: none; }
    a, .color { color: #585858; }
	/* 解决A标签点击后的虚线框问题 */
	a, a:hover { blr: expression(this.onFocus=this.blur()); outline: none; }
	a:active { star: expression(this.onFocus=this.blur()); } 
    abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
    abbr[title], abbr[data-original-title] { cursor: help; }


/* ------------------------------------------------------------------------ function */
/*
	Name:			mod_float
	Sample:			class="fl/fr"
	Explain:		.fl/.fr 浮动 left/right
*/
	.fl, .float-left > * { float: left; } .fr, .float-right > * { float: right; }

/*
	Name:			mod_clearfix
	Sample:			class="cl"
	Explain:		Clearfix,避免因子元素浮动而导致的父元素高度缺失问题
*/
	.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { zoom: 1; }
	
/*
	元素获取焦点时隐藏外边框
*/
	.hidefocus { outline: none; }

/*
	Name:			mod_cursor
	Sample:			class="cp"
	Explain:		鼠标
*/
	.cp, .cursor-pointer > * { cursor: pointer; }
	
/*
	Name:			mod_margin
	Sample:			class="mtn/mtm/mtw/..."
	Explain:		外边距样式，作用于元素的上下外边距，上下各具有 air, pro, super 三个级别
*/
	/* Top */
	.mta { margin-top: 5px !important; }
	.mtp { margin-top: 10px !important; }
	.mts { margin-top: 15px !important; }
	.mtn { margin-top: 0 !important; }

	/* Right */
	.mra { margin-right: 5px !important; }
	.mrp { margin-right: 10px !important; }
	.mrs { margin-right: 15px !important; }
	.mrn { margin-right: 0 !important; }

	/* Bottom */
	.mba { margin-bottom: 5px !important; }
	.mbp { margin-bottom: 10px !important; }
	.mbs { margin-bottom: 15px !important; }
	.mbn { margin-bottom: 0 !important; }

	/* Left */
	.mla { margin-left: 5px !important; }
	.mlp { margin-left: 10px !important; }
	.mls { margin-left: 15px !important; }
	.mln { margin-left: 0 !important; }

    /* Top-Bottom */
    .mtba { margin-top: 5px !important; margin-bottom: 5px !important; }
    .mtbp { margin-top: 10px !important; margin-bottom: 10px !important; }
    .mtbs { margin-top: 15px !important; margin-bottom: 15px !important; }
    .mtbn { margin-top: 0 !important; margin-bottom: 0 !important; }

    /* Left-Right */
    .mlra { margin-left: 5px !important; margin-right: 5px !important; }
    .mlrp { margin-left: 10px !important; margin-right: 10px !important; }
    .mlrs { margin-left: 15px !important; margin-right: 15px !important; }
    .mlrn { margin-left: 0 !important; margin-right: 0 !important; }

    /* Around */
    .maa { margin: 5px !important; }
	.map { margin: 10px !important; }
	.mas { margin: 15px !important; }
	.man { margin: 0 !important; }

    /* Minus */
    .mma { margin-left: -5px !important; margin-right: -5px !important; }
    .mmp { margin-left: -10px !important; margin-right: -10px !important; }
    .mms { margin-left: -15px !important; margin-right: -15px !important; }
    .mmra { margin-right: -5px !important; }
    .mmrp { margin-right: -10px !important; }
    .mmrs { margin-right: -15px !important; }
	
/*
	Name:			mod_padding
	Sample:			class="pta/ptp/pts/..."
	Explain:		内边距样式，作用于元素的上下内边距，上下各具有 air, pro, super 三个级别
*/
	/* Top */
	.pta { padding-top: 5px !important; }
	.ptp { padding-top: 10px !important; }
	.pts { padding-top: 15px !important; }
	.ptn { padding-top: 0 !important; }
	/* Right */
	.pra { padding-right: 5px !important; }
	.prp { padding-right: 10px !important; }
	.prs { padding-right: 15px !important; }
	.prn { padding-right: 0 !important; }
	/* Bottom */
	.pba { padding-bottom: 5px !important; }
	.pbp { padding-bottom: 10px !important; }
	.pbs { padding-bottom: 15px !important; }
	.pbn { padding-bottom: 0 !important; }
	/* Left */
	.pla { padding-left: 5px !important; }
	.plp { padding-left: 10px !important; }
	.pls { padding-left: 15px !important; }
	.pln { padding-left: 0 !important; }
    /* Top-Bottom */
    .ptba { padding-top: 5px !important; padding-bottom: 5px !important; }
    .ptbp { padding-top: 10px !important; padding-bottom: 10px !important; }
    .ptbs { padding-top: 15px !important; padding-bottom: 15px !important; }
    .ptbn { padding-top: 0 !important; padding-bottom: 0 !important; }
    /* Left-Right */
    .plra { padding-left: 5px !important; padding-right: 5px !important; }
    .plrp { padding-left: 10px !important; padding-right: 10px !important; }
    .plrs { padding-left: 15px !important; padding-right: 15px !important; }
    .plrn { padding-left: 0 !important; padding-right: 0 !important; }
    /* Around */
    .paa { padding: 5px !important; }
	.pap { padding: 10px !important; }
	.pas { padding: 15px !important; }
	.pan { padding: 0 !important; }

/*
	Name:			mod_position
	Sample:			class="pr/prz/pa/..."
	Explain:		定义建立元素布局所用的定位机制，任何的版本的Internet Explorer(包括IE8)都不支持属性值“inherit”。
*/
	.pr { position: relative; }
	.prz { position: relative; zoom: 1; }
	.pa { position: absolute; }
    .pf { position: fixed; }

/*
	Name:			mod_top
	Sample:			class="tn/bn/ln/..."
	Explain:		定义定位元素的边距边界与其包含块边界之间的偏移。
*/
    .tn { top: 0; }
    .bn { bottom: 0; }
    .ln { left: 0; }
    .rn { right: 0; }
	
/*
	Name:			mod_text
	Sample:			class="tal/tac/tar/..."
	Explain:		文本排列 left/center/right
*/
	.tal { text-align: left; }
	.tac { text-align: center; }
	.tar { text-align: right; }
    .tai { text-align: inherit; } /* 从父元素继承 text-align 属性的值 */
    .ti { text-indent: 2em; }
    .tii { text-indent: inherit; }

    .ttc { text-transform: capitalize; } /* 英文拼音的首字母大写 */
    .ttu { text-transform: uppercase; } /* 英文拼音字母全大写 */
    .ttl { text-transform: lowercase; } /* 英文拼音字母全小写 */

    .tia, .tia > * { text-indent: 1em; }
    .tip, .tip > * { text-indent: 2em; }
	
/*
	Name:			mod_font
	Sample:			class="fwn/fwb/..."
	Explain:		定义字体粗细
*/
	.fwn { font-weight: normal; } /* 定义标准的字符 */
	.fwb { font-weight: bold; } /* 定义粗体字符 */
    .fwi { font-weight: inherit; } /* 从父元素继承字体的粗细 */

    .fst { font-size: .625rem; } /* 10px */
    .fsn { font-size: .75rem; } /* 12px */
    .fsm { font-size: 1rem; } /* 16px */
    .fsa { font-size: 1.125rem; } /* 18px */
    .fsp { font-size: 1.5rem; } /* 24px */
    .fss { font-size: 2rem; } /* 32px */
    .fsm > *, .fsa > *, .fsp > *, .fss > * { font-size: .875rem; }
	
/*
	Name:			mod_overflow
	Sample:			class="oh/..."
	Explain:		定义溢出元素内容区的内容
*/
    .ov { overflow: visible; } /* 内容不会被修剪，会呈现在元素框之外 */
	.oh { overflow: hidden; } /* 内容会被修剪，并且其余内容是不可见的 */
    .oa { overflow: auto; } /* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 */
    .os { overflow: scroll; } /* 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 */
    .oi { overflow: inherit; } /* 从父元素继承 overflow 属性的值 */
	
/*
	Name:			mod_display
	Sample:			class="dn/db/di/dib/..."
	Explain:		定义建立布局时元素生成的显示框类型
*/
	.dn { display: none; }
	.db { display: block; }
	.di { display: inline; }
	.dt { display: table; }
	.dib { display: inline-block; }
	.dit { display: inline-table; }
	
/*
	Name:			mod_width
	Sample:			class="wa/wp/ws/..."
	Explain:		定义宽度
*/
	.wa { width: auto; }
	.wp { width: 50%; }
	.ws { width: 100%; }
	
/*
	Name:			mod_hr
	Sample:			class="..."
	Explain:		定义水平线(水平分隔线)
*/
	hr { height: 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-top: 1px solid #eee; border-bottom: 1px solid #fff; }

/*
	Name:			mod_img
	Sample:			class="..."
	Explain:		定义图片
*/
    img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

/*
	Making HTML5 work in IE6, IE7 & IE8
*/
	header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details { display: block; }
    audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    audio:not([controls]) { display: none; }

/*
    Grid
    .container/.case
*/
    .container, .case, .layout { position: relative; margin-left: auto; margin-right: auto; overflow: hidden; }

    @media (min-width: 576px) {
        .container { width: 540px; max-width: 100%; }
    }

    @media (min-width: 768px) {
        .container { width: 720px; max-width: 100%; }
    }

    @media (min-width: 992px) {
        .container { width: 960px; max-width: 100%; }
    }

    @media (min-width: 1200px) {
        .container { width: 1190px; max-width: 100%; } /* 根据设计稿实际尺寸定宽 */
        .layout { clear: both; width: 1200px; } /* 1200PX 24列固定栅格 */
    }

    @media (max-width: 576px) {
        .dna { display: none !important; }
        .dba { display: block !important; }
    }

    @media (max-width: 768px) {
        .dnp { display: none !important; }
        .dbp { display: block !important; }
    }

    @media (max-width: 992px) {
        .dns { display: none !important; }
        .dbs { display: block !important; }
    }

    @media (max-width: 1200px) {
        .dni { display: none !important; }
        .dbi { display: block !important; }
    }

    .case.air { padding-left: 10px; padding-right: 10px; }
    .case.pro { padding-left: 15px; padding-right: 15px; }
    .case.super { padding-left: 20px; padding-right: 20px; }

    .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; *zoom: 1; }
    .row:before, .row:after, .case:before, .case:after { display: table; line-height: 0; content: ""; }
    .row:after, .case:after { clear: both; }

    .air .row { margin-left: -5px; margin-right: -5px; }
    .pro .row { margin-left: -7.5px; margin-right: -7.5px; }
    .super .row { margin-left: -10px; margin-right: -10px; }

    .mlrn > .col, .mlrn > [class*="col-"] { padding-right: 0; padding-left: 0; }
    .layout > [class*="shove-"], .layout > [class*="haul-"] { position: relative; }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18, .col-19, .col-20, .col-21, .col-22, .col-23, .col-24 { position: relative; width: 100%; min-height: 1px; }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18, .col-19, .col-20, .col-21, .col-22, .col-23, .col-24 { float: left; }
    .air .col-1, .air .col-2, .air .col-3, .air .col-4, .air .col-5, .air .col-6, .air .col-7, .air .col-8, .air .col-9, .air .col-10, .air .col-11, .air .col-12, .air .col-13, .air .col-14, .air .col-15, .air .col-16, .air .col-17, .air .col-18, .air .col-19, .air .col-20, .air .col-21, .air .col-22, .air .col-23, .air .col-24 { padding-left: 5px; padding-right: 5px; }
    .pro .col-1, .pro .col-2, .pro .col-3, .pro .col-4, .pro .col-5, .pro .col-6, .pro .col-7, .pro .col-8, .pro .col-9, .pro .col-10, .pro .col-11, .pro .col-12, .pro .col-13, .pro .col-14, .pro .col-15, .pro .col-16, .pro .col-17, .pro .col-18, .pro .col-19, .pro .col-20, .pro .col-21, .pro .col-22, .pro .col-23, .pro .col-24 { padding-left: 7.5px; padding-right: 7.5px; }
    .super .col-1, .super .col-2, .super .col-3, .super .col-4, .super .col-5, .super .col-6, .super .col-7, .super .col-8, .super .col-9, .super .col-10, .super .col-11, .super .col-12, .super .col-13, .super .col-14, .super .col-15, .super .col-16, .super .col-17, .super .col-18, .super .col-19, .super .col-20, .super .col-21, .super .col-22, .super .col-23, .super .col-24 { padding-left: 10px; padding-right: 10px; }
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17, .grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23, .grid-24 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }

    .grid-1 { width: 40px; }
    .grid-2 { width: 90px; }
    .grid-3 { width: 140px; }
    .grid-4 { width: 190px; }
    .grid-5 { width: 240px; }
    .grid-6 { width: 290px; }
    .grid-7 { width: 340px; }
    .grid-8 { width: 390px; }
    .grid-9 { width: 440px; }
    .grid-10 { width: 490px; }
    .grid-11 { width: 540px; }
    .grid-12 { width: 590px; }
    .grid-13 { width: 640px; }
    .grid-14 { width: 690px; }
    .grid-15 { width: 740px; }
    .grid-16 { width: 790px; }
    .grid-17 { width: 840px; }
    .grid-18 { width: 890px; }
    .grid-19 { width: 940px; }
    .grid-20 { width: 990px; }
    .grid-21 { width: 1040px; }
    .grid-22 { width: 1090px; }
    .grid-23 { width: 1140px; }
    .grid-24 { width: 1190px; }

    .shove-1 { left: 50px; }
    .shove-2 { left: 100px; }
    .shove-3 { left: 150px; }
    .shove-4 { left: 200px; }
    .shove-5 { left: 250px; }
    .shove-6 { left: 300px; }
    .shove-7 { left: 350px; }
    .shove-8 { left: 400px; }
    .shove-9 { left: 450px; }
    .shove-10 { left: 500px; }
    .shove-11 { left: 550px; }
    .shove-12 { left: 600px; }
    .shove-13 { left: 650px; }
    .shove-14 { left: 700px; }
    .shove-15 { left: 750px; }
    .shove-16 { left: 800px; }
    .shove-17 { left: 850px; }
    .shove-18 { left: 900px; }
    .shove-19 { left: 950px; }
    .shove-20 { left: 1000px; }
    .shove-21 { left: 1050px; }
    .shove-22 { left: 1100px; }
    .shove-23 { left: 1150px; }

    .haul-1 { left: -50px; }
    .haul-2 { left: -100px; }
    .haul-3 { left: -150px; }
    .haul-4 { left: -200px; }
    .haul-5 { left: -250px; }
    .haul-6 { left: -300px; }
    .haul-7 { left: -350px; }
    .haul-8 { left: -400px; }
    .haul-9 { left: -450px; }
    .haul-10 { left: -500px; }
    .haul-11 { left: -550px; }
    .haul-12 { left: -600px; }
    .haul-13 { left: -650px; }
    .haul-14 { left: -700px; }
    .haul-15 { left: -750px; }
    .haul-16 { left: -800px; }
    .haul-17 { left: -850px; }
    .haul-18 { left: -900px; }
    .haul-19 { left: -950px; }
    .haul-20 { left: -1000px; }
    .haul-21 { left: -1050px; }
    .haul-22 { left: -1100px; }
    .haul-23 { left: -1150px; }

    .prefixion-1 { margin-left: 50px; }
    .prefixion-2 { margin-left: 100px; }
    .prefixion-3 { margin-left: 150px; }
    .prefixion-4 { margin-left: 200px; }
    .prefixion-5 { margin-left: 250px; }
    .prefixion-6 { margin-left: 300px; }
    .prefixion-7 { margin-left: 350px; }
    .prefixion-8 { margin-left: 400px; }
    .prefixion-9 { margin-left: 450px; }
    .prefixion-10 { margin-left: 500px; }
    .prefixion-11 { margin-left: 550px; }
    .prefixion-12 { margin-left: 600px; }
    .prefixion-13 { margin-left: 650px; }
    .prefixion-14 { margin-left: 700px; }
    .prefixion-15 { margin-left: 750px; }
    .prefixion-16 { margin-left: 800px; }
    .prefixion-17 { margin-left: 850px; }
    .prefixion-18 { margin-left: 900px; }
    .prefixion-19 { margin-left: 950px; }
    .prefixion-20 { margin-left: 1000px; }
    .prefixion-21 { margin-left: 1050px; }
    .prefixion-22 { margin-left: 1100px; }
    .prefixion-23 { margin-left: 1150px; }

    .postfix-1 { margin-right: 50px; }
    .postfix-2 { margin-right: 100px; }
    .postfix-3 { margin-right: 150px; }
    .postfix-4 { margin-right: 200px; }
    .postfix-5 { margin-right: 250px; }
    .postfix-6 { margin-right: 300px; }
    .postfix-7 { margin-right: 350px; }
    .postfix-8 { margin-right: 400px; }
    .postfix-9 { margin-right: 450px; }
    .postfix-10 { margin-right: 500px; }
    .postfix-11 { margin-right: 550px; }
    .postfix-12 { margin-right: 600px; }
    .postfix-13 { margin-right: 650px; }
    .postfix-14 { margin-right: 700px; }
    .postfix-15 { margin-right: 750px; }
    .postfix-16 { margin-right: 800px; }
    .postfix-17 { margin-right: 850px; }
    .postfix-18 { margin-right: 900px; }
    .postfix-19 { margin-right: 950px; }
    .postfix-20 { margin-right: 1000px; }
    .postfix-21 { margin-right: 1050px; }
    .postfix-22 { margin-right: 1100px; }
    .postfix-23 { margin-right: 1150px; }

    @media (min-width: 768px) {
        .col { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
        .col-auto { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; }
        .col-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 4.166667%; -ms-flex: 0 0 4.166667%; flex: 0 0 4.166667%; width: 4.166667%; }
        .col-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.333333%; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; width: 8.333333%; }
        .col-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 12.5%; -ms-flex: 0 0 12.5%; flex: 0 0 12.5%; width: 12.5%; }
        .col-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.666667%; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; width: 16.666667%; }
        .col-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 20.833333%; -ms-flex: 0 0 20.833333%; flex: 0 0 20.833333%; width: 20.833333%; }
        .col-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; width: 25%; }
        .col-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 29.166667%; -ms-flex: 0 0 29.166667%; flex: 0 0 29.166667%; width: 29.166667%; }
        .col-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; width: 33.333333%; }
        .col-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 37.5%; -ms-flex: 0 0 37.5%; flex: 0 0 37.5%; width: 37.5%; }
        .col-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.666667%; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; width: 41.666667%; }
        .col-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 45.833333%; -ms-flex: 0 0 45.833333%; flex: 0 0 45.833333%; width: 45.833333%; }
        .col-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 40%; flex: 0 0 50%; width: 50%; }
        .col-13 { -webkit-box-flex: 0; -webkit-flex: 0 0 54.166667%; -ms-flex: 0 0 54.166667%; flex: 0 0 54.166667%; width: 54.166667%; }
        .col-14 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.333333%; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; width: 58.333333%; }
        .col-15 { -webkit-box-flex: 0; -webkit-flex: 0 0 62.5%; -ms-flex: 0 0 62.5%; flex: 0 0 62.5%; width: 62.5%; }
        .col-16 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; width: 66.666667%; }
        .col-17 { -webkit-box-flex: 0; -webkit-flex: 0 0 70.833333%; -ms-flex: 0 0 70.833333%; flex: 0 0 70.833333%; width: 70.833333%; }
        .col-18 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; width: 75%; }
        .col-19 { -webkit-box-flex: 0; -webkit-flex: 0 0 79.166667%; -ms-flex: 0 0 79.166667%; flex: 0 0 79.166667%; width: 79.166667%; }
        .col-20 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.333333%; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; width: 83.333333%; }
        .col-21 { -webkit-box-flex: 0; -webkit-flex: 0 0 87.5%; -ms-flex: 0 0 87.5%; flex: 0 0 87.5%; width: 87.5%; }
        .col-22 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.666667%; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; width: 91.666667%; }
        .col-23 { -webkit-box-flex: 0; -webkit-flex: 0 0 95.833333%; -ms-flex: 0 0 95.833333%; flex: 0 0 95.833333%; width: 95.833333%; }
        .col-24 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; }
        
        .pull-0 { right: auto; }
        .pull-1 { right: 4.166667%; }
        .pull-2 { right: 8.333333%; }
        .pull-3 { right: 12.5%; }
        .pull-4 { right: 16.666667%; }
        .pull-5 { right: 20.833333%; }
        .pull-6 { right: 25%; }
        .pull-7 { right: 29.166667%; }
        .pull-8 { right: 33.333333%; }
        .pull-9 { right: 37.5%; }
        .pull-10 { right: 41.666667%; }
        .pull-11 { right: 45.833333%; }
        .pull-12 { right: 50%; }
        .pull-13 { right: 54.166667%; }
        .pull-14 { right: 58.333333%; }
        .pull-15 { right: 62.5%; }
        .pull-16 { right: 66.666667%; }
        .pull-17 { right: 70.833333%; }
        .pull-18 { right: 75%; }
        .pull-19 { right: 79.166667%; }
        .pull-20 { right: 83.333333%; }
        .pull-21 { right: 87.5%; }
        .pull-22 { right: 91.666667%; }
        .pull-23 { right: 95.833333%; }
        
        .push-0 { left: auto; }
        .push-1 { left: 4.166667%; }
        .push-2 { left: 8.333333%; }
        .push-3 { left: 12.5%; }
        .push-4 { left: 16.666667%; }
        .push-5 { left: 20.833333%; }
        .push-6 { left: 25%; }
        .push-7 { left: 29.166667%; }
        .push-8 { left: 33.333333%; }
        .push-9 { left: 37.5%; }
        .push-10 { left: 41.666667%; }
        .push-11 { left: 45.833333%; }
        .push-12 { left: 50%; }
        .push-13 { left: 54.166667%; }
        .push-14 { left: 58.333333%; }
        .push-15 { left: 62.5%; }
        .push-16 { left: 66.666667%; }
        .push-17 { left: 70.833333%; }
        .push-18 { left: 75%; }
        .push-19 { left: 79.166667%; }
        .push-20 { left: 83.333333%; }
        .push-21 { left: 87.5%; }
        .push-22 { left: 91.666667%; }
        .push-23 { left: 95.833333%; }
        
        .offset-1 { margin-left: 4.166667%; }
        .offset-2 { margin-left: 8.333333%; }
        .offset-3 { margin-left: 12.5%; }
        .offset-4 { margin-left: 16.666667%; }
        .offset-5 { margin-left: 20.833333%; }
        .offset-6 { margin-left: 25%; }
        .offset-7 { margin-left: 29.166667%; }
        .offset-8 { margin-left: 33.333333%; }
        .offset-9 { margin-left: 37.5%; }
        .offset-10 { margin-left: 41.666667%; }
        .offset-11 { margin-left: 45.833333%; }
        .offset-12 { margin-left: 50%; }
        .offset-13 { margin-left: 54.166667%; }
        .offset-14 { margin-left: 58.333333%; }
        .offset-15 { margin-left: 62.5%; }
        .offset-16 { margin-left: 66.666667%; }
        .offset-17 { margin-left: 70.833333%; }
        .offset-18 { margin-left: 75%; }
        .offset-19 { margin-left: 79.166667%; }
        .offset-20 { margin-left: 83.333333%; }
        .offset-21 { margin-left: 87.5%; }
        .offset-22 { margin-left: 91.666667%; }
        .offset-23 { margin-left: 95.833333%; }
        
    }

    /* ------------------------------------------------------------------------ style */