/* ---------------------single CSS----------------------- */
/* display */
.dn{display:none}
.di{display:inline}
.db{display:block}
.dib{display:inline-block}
.dt{display: table}
.dc{display: table-cell}
.vh{visibility: hidden;}
.vv{visibility: visible;}
/* height */
.h14{height:14px}
.h16{height:16px}
.h18{height:18px}
.h20{height:20px}
.h22{height:22px}
.h24{height:24px}
/* width */
/* fixed width value */
.w20{width:20px}
.w50{width:50px}
.w70{width:70px}
.w78{width: 78px}
.w80{width:80px}
.w88{width: 88px}
.w90{width:90px}
.w100{width:100px}
.w120{width:120px}
.w130{width:130px}
.w140{width:140px}
.w150{width: 150px}
.w160{width:160px}
.w170{width:170px}
.w175{width:175px}
.w180{width:180px}
.w190{width:190px}
.w200{width:200px}
.w220{width:220px}
.w240{width:240px}
.w250{width:250px}
.w260{width:260px}
.w280{width:280px}
.w300{width:280px}
.w320{width:320px}
.w360{width:360px}
.w400{width:400px}
.w460{width:460px}
.w500{width:500px}
.w600{width:600px}
.w640{width:640px}
.w700{width:700px}
/* percent width value */
.pct10{width:10%}
.pct15{width:15%}
.pct20{width:20%}
.pct25{width:25%}
.pct30{width:30%}
.pct33{width:33.3%}
.pct40{width:40%}
.pct45{width:45%}
.pct50{width:50%}
.pct60{width:60%}
.pct66{width:66.6%}
.pct70{width:70%}
.pct75{width:75%}
.pct80{width:80%}
.pct90{width:90%}
.pct100{width:100%}
/* line-height */
.lh12{line-height:12px}
.lh13{line-height:13px}
.lh14{line-height:14px}
.lh16{line-height:16px}
.lh18{line-height:18px}
.lh20{line-height:20px}
.lh22{line-height:22px}
.lh24{line-height:24px}
.lh30{line-height:30px}
/* margin */
.m0{margin:0}
.mt0{margin-top:0px}
.mr0{margin-right:0px}
.mb0{margin-bottom:0px}
.ml0{margin-left:0px}
.mr2{margin-right: 2px}
.mr3{margin-right: 3px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml25{margin-left:25px}
.ml30{margin-left:30px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr40{margin-right: 40px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt12{margin-top: 12px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mb1{margin-bottom:1px}
.mb2{margin-bottom:2px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.ml70{margin-left:70px}

/* padding */
.p0{padding:0}
.pt0{padding-top:0px}
.pr0{padding-right:0px}
.pb0{padding-bottom:0px}
.pl0{padding-left:0px}
.p5{padding:5px}
.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pb5{padding-bottom:5px}
.p10{padding:10px}
.pl10{padding-left:10px}
.pt10{padding-top:10px}
.pr10{padding-right:10px}
.pb10{padding-bottom:10px}
.p15{padding:15px}
.pl15{padding-left:15px}
.pt15{padding-top:15px}
.pr15{padding-right:15px}
.pb15{padding-bottom:15px}
.p18{padding:18px}
.pl18{padding-left:18px}
.pt18{padding-top:18px}
.pr18{padding-right:18px}
.pb18{padding-bottom:18px}
.p20{padding:20px}
.pl20{padding-left:20px}
.pt20{padding-top:20px}
.pr20{padding-right:20px}
.pb20{padding-bottom:20px}
.pl25{padding-left:25px;}
.pt25{padding-top:25px}
.pr25{padding-right:25px}
.pb25{padding-bottom:25px}
.p30{padding:30px}
.pl30{padding-left:30px}
.pt30{padding-top:30px}
.pr30{padding-right:30px}
.pb30{padding-bottom:30px}
.p35{padding:35px}
.pl35{padding-left:35px}
.pt35{padding-top:35px}
.pr35{padding-right:35px}
.pb35{padding-bottom:35px}
.pt40{padding-top:40px}
.pl40{padding-left: 40px}
.pt50{padding-top:50px}
.pl50{padding-left: 50px}
.pt60{padding-top:60px}
.pl60{padding-left: 60px}
.pt65{padding-top:65px}
.pt70{padding-top:70px}
.pl70{padding-left: 70px}
.pr70{padding-right: 70px}
.pb70{padding-bottom:70px}
.pl90{padding-left: 90px}
.pl100{padding-left: 100px}
.pl150{padding-left: 150px}
.pl165{padding-left: 165px}
.pl170{padding-left: 170px}
.pl200{padding-left: 200px}
.pl220{padding-left: 220px}

/* font-size */
.f0{font-size:0;}
.f10{font-size: 76.9%}
.f11{font-size: 84.6%}
.f12{font-size:92.3%}
.f13{font-size:100%}
.f14{font-size:108%}
.f15{font-size:116%}
.f16{font-size:123.1%}
.f17{font-size:131%}
.f18{font-size:138.5%}
.f19{font-size: 146.5%}
.f20{font-size: 153.9%}
.f22{font-size: 169%}
.f24{font-size:182%}
.f24{font-size:192.3%}
.f26{font-size: 200%}
.f28{font-size: 215.3%}
.f30{font-size: 230.8%}
/* font-style */
.fw100{font-weight: 100}
.fw200{font-weight: 200}
.fw500{font-weight: 500}
.fw600{font-weight: 600}
.n{font-weight: normal;}
.b{font-weight:bold}
.i{font-style:italic}
/* text-align */
.tc{text-align:center}
.tr{text-align:right}
.tl{text-align:left}
.tj{text-align:justify}

/* white-space */
.nowrap{white-space:nowrap}
/* word-wrap */
.bk{word-wrap:break-word}
/* vertical-align */
.vm{vertical-align:middle}
.vtb{vertical-align:text-bottom}
.vb{vertical-align:bottom}
.vt{vertical-align:top}
.vs{vertical-align: super}
.vn{vertical-align:-2px}
/* float */
.l{float:left}
.r{float:right}
/* clear */
.cl{clear:both}
/* position */
.rel{position:relative}
.abs{position:absolute}
.sta{position: static}
/*box size*/
.bs{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
}
/* zoom */
.z{*zoom:1;}
.auto{margin-left:auto; margin-right:auto}

/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/
.bbf1{border-bottom: 1px solid #f1f1f1}
.btf1{border-top: 1px solid #f1f1f1}
.btf{border-top: 1px solid #fff;}
/* text-decoration */
.tdl{text-decoration:underline;}

@media only screen and (max-width: 720px) {
	/* font size*/
	.mf14{font-size: 106%}
	.mf13{font-size: 100%}
	.mf11{font-size: 84.6%}
	/* float */
	.ml{float:left}
	.mr{float:right}

	/* padding */
	.mpt0{padding-top: 0}
	.mpr0{padding-right: 0}
	.mpt0{padding-bottom: 0}
	.mpl0{padding-left: 0}
	.mpt10{padding-top: 10px}
	.mpt20{padding-top: 20px}
	.mpl10{padding-left: 10px}
	.mpl25{padding-left: 25px}
	.mpl30{padding-left: 30px}
	.mpl35{padding-left: 35px}
	.mpt60{padding-top: 60px}
	.mpb30{padding-bottom: 30px}
	/* margin */
	.mml0{margin-left:0}
	.mmb5{margin-bottom: 5px}
	.mmr15{margin-right: 15px}
	.mmt20{margin-top: 20px}
	.mrel{position:relative}
	.mabs{position:absolute}
	.msta{position: static}

	/*-- percentage width --*/
	.mpct100{width: 100%}
	/*-- text align --*/
	.mtc{text-align:center}

	/* display */
	.mdn{display:none}
	.mdi{display:inline}
	.mdb{display:block}
	.mdib{display:inline-block}

}