@charset "UTF-8";
/* http://css-tricks.com/dont-overthink-it-grids/ */

*, *:before, *:after { /*IE8 and up, need polyfill for IE7 and lower*/
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box; }

.grid {
	padding: 10px 0 10px 5px;
	margin-right: -15px; }

.grid:after,
[class*='grid-']:after {
	content: "";
	display: table;
	clear: both; }

.grid-pad {
	padding: 10px 0 10px 5px;
	margin-right: -15px; }

/*.grid [class*='col-']:last-of-type { padding-right: 5px; }*/

[class*='col-'] {
	float: left; }

.col-1-1 { width: 100%; }

.col-1-2 { width: 50%; }

.col-2-3 { width: 66.66%; }

.col-1-3 { width: 33.33%; }

.col-3-4 { width: 75%; }

.col-1-4 { width: 25%; }

.col-1-8 { width: 12.5%; }

[class*='col-'] { padding-right: 20px; }

[class*='col-']:last-of-type { padding-right: 0; }

@media only screen and (width) { /* test for CSS3 media query support */

	.grid {
		padding: 10px 0 10px 20px;
		margin: 0; }
	
	.grid [class*='col-']:last-of-type {
		padding-right: 20px; }

}


@media only screen and (max-width: 640px) {
		
	.grid {
		padding: 0 0 0 20px; }
	
	[class*='col-'] {
		width: 100%;
		float: none;
		/*padding-right: 20px;*/
		padding: 10px 20px 10px 0;
		/*padding: 10px 0;*/ }
		
	.mobile-hidden {
		display:none;
	}	

}