/* *********************************************************************************************************************
	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;
	font-family: 'Open Sans', Tahoma, sans-serif;
	padding: 0 0 0 0%; /* THAT'S THE NAME ;) */
}

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

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

.onerow {
	clear: both;
	padding: 0 0px;
	margin:0px;
}


/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col3a, .col4, .col5, .col5a, .col6, .col7, .col7a, .col8, 
.col9, .col9a, .col10, .col11 {
	float: left;
	margin: 0 3% 0 0;
			margin-bottom: 5px;
			padding: 0 0 10px 0;
}


.col12 {
	float: left;
	margin: 0 0 0 0;
			text-align: left;
}

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


.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%;margin: 0 1.25% 0 1.25%;margin-bottom: 5px; }
.col3a { width: 23%;margin: 0 2% 0 0%; }
.col4 { width: 31%;margin: 0 1.15% 0 1.15%;margin-bottom: 5px; }
.col5a { width: 41%;margin: 0 2% 0 0%; }
.col5 { width: 41%;margin: 0 0% 0 1.5%; }
.col6 { width: 48%;margin: 0 1% 0 1%;margin-bottom: 10px; }
.col7 { width: 53.5%; margin: 0 0 0 3%;}
.col7a { width:57%;margin:0px; }
.col8 { width: 65%; }
.col9 { width: 72.5%;margin-right:1.5%; }
.col9a { width: 75%;margin:0; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 98.5%; margin: 0 0 0 1.5%;padding:0; }

.col1 img, .col2 img, .col3 img, .col3a img, .col4 img, .col5a img, .col5 img, .col6 img, .col7a img, .col7 img, .col8 img, .col9 img, .col9a img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}

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

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


/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 768px)
{
	.onepcssgrid-1000 {
		max-width: 980px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
	
	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
		float: left;
		margin: 0 1% 0 1%;
		margin-bottom: 10px;
		padding: 1px 0;
	}
	

.col1 { width: 5.5%; }
.col2 { width: 14%;   }
.col3 { width: 30.5%; margin: 0 1.25% 0 1.25%;margin-bottom: 4px;  }
.col4 { width: 48%;margin: 0 0.8% 0 0.8%;margin-bottom: 4px;  }
.col5 { width: 43.5%;margin: 0 0% 0 2%; }
.col6 { width: 48%; margin: 0 0.8% 0 0.8%;margin-bottom: 10px;  }
.col7 { width: 53%;margin: 0 0 0 1%; }
.col9 { width: 65%;margin: 0 1% 0 0%; }
.col12 { width: 100%; margin: 0;padding:0;  }	


}

/* *********************************************************************************************************************
 * Small devices
 */
@media (min-width: 1px) and (max-width: 480px) {
	.onerow {
	}


	.col1, .col2, .col4, .col3a, .col5, .col5a, .col6, .col7, .col7a, .col8, .col9, .col9a, .col10, .col11, .col12 {
		float: none;
		width: 97%;
		margin:0% 1.5% 0% 1.5%;
	}
	
	.col3 { width: 48%;margin: 0 0.75% 0 1.25%;margin-bottom: 3px;  }

	.col9 { margin: 0 1.5% 0 0%;margin-bottom: 3px;  }

}