﻿/* font size */
.font-11 { font-size:11px !important; font-size:1.1rem !important; }
.font-12 { font-size:12px !important; font-size:1.2rem !important; }
.font-13 { font-size:13px !important; font-size:1.3rem !important; }
.font-14 { font-size:14px !important; font-size:1.4rem !important; }
.font-16 { font-size:16px !important; font-size:1.6rem !important; }
.font-17 { font-size:17px !important; font-size:1.7rem !important; line-height: 20px; }
.font-18 { font-size:18px !important; font-size:1.8rem !important; line-height: 22px; }
.font-20 { font-size:20px !important; font-size:2rem !important; line-height: 24px; }
.font-22 { font-size:22px !important; font-size:2.2rem !important; line-height: 26px; }
.font-24 { font-size:24px !important; font-size:2.4rem !important; line-height: 28px; }

.font-2x { font-size:2em !important; }/*30px*/
.font-3x { font-size:3em !important; }/*45px*/
.font-4x { font-size:4em !important; }/*60px*/

.font-mini { font-size:30% !important; }
.font-tiny { font-size:50% !important; }
.font-small { font-size:80% !important; }
.font-medium { font-size:100% !important; }
.font-large { font-size:150% !important; }
.font-big { font-size:200% !important; }
.font-huge { font-size:250% !important; }
.font-massive { font-size:300% !important; }

.font-blod { font-weight: bold !important; }
.font-normal { font-weight: normal !important; }

/* border sie */
.border-2x { border-width: .2em !important; }
.border-3x { border-width: .3em !important; }
.border-4x { border-width: .4em !important; }

/* width for percent*/
.w-per-100 { min-width: auto !important; width:100%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-90 { min-width: auto !important; width:90%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-80 { min-width: auto !important; width:80%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-70 { min-width: auto !important; width:70%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-60 { min-width: auto !important; width:60%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-40 { min-width: auto !important; width:40%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-30 { min-width: auto !important; width:30%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-20 { min-width: auto !important; width:20%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }
.w-per-10 { min-width: auto !important; width:10%; margin-left:auto !important; margin-right:auto !important; -webkit-box-sizing:border-box; box-sizing:border-box; }

/* width for px*/
.w-130 { width:130px !important; }
.w-160 { width:160px !important; }

/* img width for percent */
.img-mini-per img, img.img-mini-per { width:20%; }
.img-tiny-per img, img.img-tiny-per { width:25%; }
.img-small-per img, img.img-small-per { width:30%; }
.img-medium-per img, img.img-medium-per { width:35%; }
.img-large-per img, img.img-large-per { width:40%; }
.img-big-per img, img.img-big-per { width:45%; }
.img-huge-per img, img.img-huge-per { width:50%; }
.img-massive-per img, img.img-massive-per { width:100%; }

.img-mini-per.floatL img, img.img-mini-per.floatL { float:left; margin-right:1%; }
.img-tiny-per.floatL img, img.img-tiny-per.floatL { float:left; margin-right:1%; }
.img-small-per.floatL img, img.img-small-per.floatL { float:left; margin-right:1%; }
.img-medium-per.floatL img, img.img-medium-per.floatL { float:left; margin-right:1%; }
.img-large-per.floatL img, img.img-large-per.floatL { float:left; margin-right:1%; }
.img-big-per.floatL img, img.img-big-per.floatL { float:left; margin-right:1%; }
.img-huge-per.floatL img, img.img-huge-per.floatL { float:left; margin-right:1%; }
.img-massive-per.floatL img, img.img-massive-per.floatL { float:left; margin-right:1%; }

.img-mini-per.floatR img, img.img-mini-per.floatR { float:right; margin-left:1%; }
.img-tiny-per.floatR img, img.img-tiny-per.floatR { float:right; margin-left:1%; }
.img-small-per.floatR img, img.img-small-per.floatR { float:right; margin-left:1%; }
.img-medium-per.floatR img, img.img-medium-per.floatR { float:right; margin-left:1%; }
.img-large-per.floatR img, img.img-large-per.floatR { float:right; margin-left:1%; }
.img-big-per.floatR img, img.img-big-per.floatR { float:right; margin-left:1%; }
.img-huge-per.floatR img, img.img-huge-per.floatR { float:right; margin-left:1%; }
.img-massive-per.floatR img, img.img-massive-per.floatR { float:right; margin-left:1%; }

/* img width for px */
.img-mini img, img.img-mini { width:20px; }
.img-tiny img, img.img-tiny { width:80px; }
.img-small img, img.img-small { width:150px; }
.img-medium img, img.img-medium { width:300px; }
.img-large img, img.img-large { width:450px; }
.img-big img, img.img-big { width:600px;}
.img-huge img, img.img-huge { width:800px; }
.img-massive img, img.img-massive { width:980px; }

/*responsive*/
@media screen and (max-width : 979px) {
	.img-massive img, img.img-massive { width:100%; }
}

@media screen and (max-width : 540px) {	
	/* width for percent*/
	.w-per-90 { width:100%; }
	.w-per-80 { width:100%; }
	.w-per-70 { width:100%; }
	.w-per-60 { width:100%; }
	.w-per-40 { width:100%; }
	.w-per-30 { width:100%; }
	.w-per-20 { width:100%; }
	.w-per-10 { width:100%; }	
	
	/* img width for px */	
	.img-mini img, img.img-mini { width:100%; }
	.img-tiny img, img.img-tiny { width:100%; }
	.img-small img, img.img-small { width:100%; }
	.img-medium img, img.img-medium { width:100%; }
	.img-large img, img.img-large { width:100%; }
	.img-big img, img.img-big { width:100%;}
	.img-huge img, img.img-huge { width:100%; }
	.img-massive img, img.img-massive { width:100%; }
}