/*** Bootstrap ***/

*{
	margin: 0;
	padding: 0;
	border: none;
	text-decoration: none;
	list-style: none;
}

html, body{
	height: 100%;
}

.container{
	width: 100%;
	max-width: 1024px;
	margin: auto;
}

.imgResponsive{
	width: 100%;
}

.padding2{
	padding: 2px;
}

.padding5{
	padding: 5px;
}

.padding10{
	padding: 10px;
}

.padding15{
	padding: 15px;
}

.paddingTop2{
	padding-top: 2px;
}

.paddingTop5{
	padding-top: 5px;
}

.paddingTop10{
	padding-top: 10px;
}

.paddingTop15{
	padding-top: 15px;
}

.paddingBottom2{
	padding-bottom: 2px;
}

.paddingBottom5{
	padding-bottom: 5px;
}

.paddingBottom10{
	padding-bottom: 10px;
}

.paddingBottom15{
	padding-bottom: 15px;
}


.paddingRight2{
	padding-right: 2px;
}

.paddingRight5{
	padding-right: 5px;
}

.paddingRight10{
	padding-right: 10px;
}

.paddingRight15{
	padding-right: 15px;
}


.paddingLeft2{
	padding-left: 2px;
}

.paddingLeft5{
	padding-left: 5px;
}

.paddingLeft10{
	padding-left: 10px;
}

.paddingLeft15{
	padding-left: 15px;
}

.margin2{
	margin: 2px;
}

.margin5{
	margin: 5px;
}

.margin10{
	margin: 10px;
}

.margin15{
	margin: 15px;
}

.marginTop2{
	margin-top: 2px;
}

.marginTop5{
	margin-top: 5px;
}

.marginTop10{
	margin-top: 10px;
}

.marginTop15{
	margin-top: 15px;
}

.marginBottom2{
	margin-bottom: 2px;
}

.marginBottom5{
	margin-bottom: 5px;
}

.marginBottom10{
	margin-bottom: 10px;
}

.marginBottom15{
	margin-bottom: 15px;
}


.marginRight2{
	margin-right: 2px;
}

.marginRight5{
	margin-right: 5px;
}

.marginRight10{
	margin-right: 10px;
}

.marginRight15{
	margin-right: 15px;
}


.marginLeft2{
	margin-left: 2px;
}

.marginLeft5{
	margin-left: 5px;
}

.marginLeft10{
	margin-left: 10px;
}

.marginLeft15{
	margin-left: 15px;
}


.floatLeft{
	float: left;
}

.floatRight{
	float: right;
}

.clearFloat{
	clear: both;
}

/** instead of inserting division with clearfloat class u can use **/
.clearFix:after{
	visibility: hidden;
	content: '.';
	display: block;
	width: 0;
	height: 0;
	clear: both;
}

/*** Desktop ***/

/** formula: because we have 12 columns and total width 100%: (100/12)*columnnum **/

.col1{
	width: 8.33333333%; /** (100/12)*1  **/
}

.col2{
	width: 16.66666666%; /** (100/12)*2  **/
}

.col3{
	width: 25%; /** (100/12)*3  **/
}

.col4{
	width: 33.33333333%; /** (100/12)*4  **/
}

.col5{
	width: 41.66666666%; /** (100/12)*5  **/
}

.col6{
	width: 50%; /** (100/12)*6  **/
}

.col7{
	width: 58.33333333%; /** (100/12)*7  **/
}

.col8{
	width: 66.66666666%; /** (100/12)*8  **/
}

.col9{
	width: 75%; /** (100/12)*9  **/
}

.col10{
	width: 83.33333333%; /** (100/12)*10  **/
}

.col11{
	width: 91.666666%; /** (100/12)*11  **/
}

.col12{
	width: 100%; /** (100/12)*12  **/
}

.mobile{
	display: none;
}

.tablet{
	display: none;
}


.desktop{
	display: block;
}

/*** Tablets ***/
@media screen and (max-width:1024px){
.col1-tab{
	width: 8.33333333%; /** (100/12)*1  **/
}

.col2-tab{
	width: 16.66666666%; /** (100/12)*2  **/
}

.col3-tab{
	width: 25%; /** (100/12)*3  **/
}

.col4-tab{
	width: 33.33333333%; /** (100/12)*4  **/
}

.col5-tab{
	width: 41.66666666%; /** (100/12)*5  **/
}

.col6-tab{
	width: 50%; /** (100/12)*6  **/
}

.col7-tab{
	width: 58.33333333%; /** (100/12)*7  **/
}

.col8-tab{
	width: 66.66666666%; /** (100/12)*8  **/
}

.col9-tab{
	width: 75%; /** (100/12)*9  **/
}

.col10-tab{
	width: 83.33333333%; /** (100/12)*10  **/
}

.col11-tab{
	width: 91.666666%; /** (100/12)*11  **/
}

.col12-tab{
	width: 100%; /** (100/12)*12  **/
}

.mobile{
	display: none;
}

.desktop{
	display: none;
}

.tablet{
	display:  block;
}

}

/*** Mobiles ***/
@media screen and (max-width:640px){

.col1-mob{
	width: 8.33333333%; /** (100/12)*1  **/
}

.col2-mob{
	width: 16.66666666%; /** (100/12)*2  **/
}

.col3-mob{
	width: 25%; /** (100/12)*3  **/
}

.col4-mob{
	width: 33.33333333%; /** (100/12)*4  **/
}

.col5-mob{
	width: 41.66666666%; /** (100/12)*5  **/
}

.col6-mob{
	width: 50%; /** (100/12)*6  **/
}

.col7-mob{
	width: 58.33333333%; /** (100/12)*7  **/
}

.col8-mob{
	width: 66.66666666%; /** (100/12)*8  **/
}

.col9-mob{
	width: 75%; /** (100/12)*9  **/
}

.col10-mob{
	width: 83.33333333%; /** (100/12)*10  **/
}

.col11-mob{
	width: 91.666666%; /** (100/12)*11  **/
}

.col12-mob{
	width: 100%; /** (100/12)*12  **/
}


.desktop{
	display: none;
}

.tablet{
	display:  none;
}

.mobile{
	display: block;
}

}