/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */


/* clearfix */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
#contents * { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc); 
	/*	If you need support for IE7 and lower make 
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
}


/*	MAIN CONTAINER 
	Set the width to whatever you want the width of your site to be. */
.container { 
	max-width: 800px;
	margin: 0 auto; 
}



/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

/* 	DEFAULT ROW STYLES 
	Set bottom padding according to preference */
.row { padding-bottom: 0em;
}
			
								  
/* DEFAULT COLUMN STYLES */
.colm-1,
.colm-2,
.colm-3,
.colm-4,
.colm-5,
.colm-6,
.colm-7,
.colm-8,
.colm-9,
.colm-10,
.colm-11,
.colm-12 {
	display: block;
	float: left;
	margin-left: 2%;
	/*width: 100%;*/
}
.colm-1:first-child,
.colm-2:first-child,
.colm-3:first-child,
.colm-4:first-child,
.colm-5:first-child,
.colm-6:first-child,
.colm-7:first-child,
.colm-8:first-child,
.colm-9:first-child,
.colm-10:first-child,
.colm-11:first-child,
.colm-12:first-child{
	margin-left: 0;
}

@media screen and (max-width: 46.25em){

	.colm-1,
	.colm-2,
	.colm-3,
	.colm-4,
	.colm-5,
	.colm-6,
	.colm-7,
	.colm-8,
	.colm-9,
	.colm-10,
	.colm-11,
	.colm-12{
		float: none;
		margin-left: 0;
	}

}




/*	COLUMN WIDTH ON DISPLAYS +768px 
	You might need to play with media queries here to suite your design. */
@media ( min-width : 768px ) {
	.colm-1 { width: 8.33333333333%; }
	.colm-2 { width: 16.6666666667%; }
	.colm-3 { width: 25%; }
	.colm-4 { width: 33.3333333333%; }
	.colm-5 { width: 41.6666666667%; }
	.colm-6 { width: 50%; }
	.colm-7 { width: 58.3333333333%; }
	.colm-8 { width: 66.6666666667%; }
	.colm-9 { width: 75%; }
	.colm-10 { width: 83.3333333333%; }
	.colm-11 { width: 91.6666666667%; }
	.colm-12 { width: 100%; }
	
	.paragraph .colm-1 { width: 6.5%; }
	.paragraph .colm-2 { width: 15.0%; }
	.paragraph .colm-3 { width: 23.5%; }
	.paragraph .colm-4 { width: 32.0%; }
	.paragraph .colm-5 { width: 40.5%; }
	.paragraph .colm-6 { width: 49.0%; }
	.paragraph .colm-7 { width: 57.5%; }
	.paragraph .colm-8 { width: 66.0%; }
	.paragraph .colm-9 { width: 74.5%; }
	.paragraph .colm-10 { width: 83.0%; }
	.paragraph .colm-11 { width: 91.5%; }
	.paragraph .colm-12 { width: 100%; }
}