/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/





/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1220px;
}

.onepcssgrid-1000 {
	max-width: 1020px;
}

.onerow {
	clear: both;
	padding: 0 1%;
}



/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .mobilecol2, .mobilecol4, .mobilecol6, .mobilecol10 {
	float: left;
	margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12, .mobilecol2.last, .mobilecol4.last, .mobilecol6.last, .mobilecol10.last {
	margin: 0;
}



.col1 { width: 4.5%;}
.col2 { width: 14%;}
.col3 { width: 22.5%;}
.col4 { width: 31%;}
.col5 { width: 39.5%;}
.col6 { width: 48%;}
.col7 { width: 56.5%;}
.col8 { width: 65%;}
.col9 { width: 73.5%;}
.col10 { width: 82%;}
.col11 { width: 90.5%;}
.col12 { width: 99%; margin: 0;}

.mobilecol2 { width: 14%;}
.mobilecol4 { width: 31%;}
.mobilecol6 { width: 48%;}
.mobilecol10 { width: 82%;}

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img, .mobilecol2 img, .mobilecol4 img, .mobilecol6 img, .mobilecol10 img {
  	max-width: 100%;  
	height: auto;
	display: block;
	margin-left: auto;
    margin-right: auto;
}





/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
}

@media screen and (max-width: 584px) {
.col1 { width: 5.5%;}   /* regular col1 */
.col2 { width: 14%;}    /* regular col2 */
.col3 { width: 39.5%;}	/* regular col5 */
.col4 { width: 99%; margin: 0;}
.col5 { width: 99%; margin: 0;}
.col6 { width: 99%; margin: 0;}
.col7 { width: 99%; margin: 0;}
.col8 { width: 99%; margin: 0;;}
.col9 { width: 99%; margin: 0;}
.col10 { width: 99%; margin: 0;;}
.col11 { width: 99%; margin: 0;}
.col12 { width: 99%; margin: 0;}	
	
	
}