/* 
	12 COLUMN - RESPONSIVE GRID SYSTEM
	RE-DEVELOPED BY DAVID ROONEY TO ALLOW FOR MULTI-LEVEL GRID ROWS AND ADDED 
	MEDIA QUERY SUPPORT FOR IE8, WHICH IS REQUIRED FOR A MOBILE FIRST APPROACH.
	( WITH THANKS TO DENIS LEBLANC FOR THE ORIGINAL - http://responsive.gs )
	URL - http://zavadesign.com
	VERSION - 1.0
	LICENSED UNDER GPL & MIT
*/


/* 	SET ALL ELEMENTS BOX-SIZING TO BORDER-BOX
	If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

/* MAIN CONTAINER */
.container {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-width: 1280px;
	margin: 0px auto;
}

/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, .col:after, .clr:after, .group:after { 
	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
										  
/* DEFAULT ROW STYLES */
.row { 
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

/* DEFAULT COLUMN STYLES */
.col {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

#post {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

.span_4 img, .span_6 img, .span_8 img {
	-webkit-filter: drop-shadow(2px 2px 0px rgba(0,0,0,.5));
	filter: drop-shadow(2px 2px 0px rgba(0,0,0,.5));
}

.span_4 {
	position: relative;
	display: block;
	float: left;
	width: 50%;
}

span_4 a {
	cursor: zoom-in;
}

.span_4 img { padding: 10px; }

.span_6 {
	position: relative;
	display: block;
	float: left;
	width: 33.33%;
}

span_6 a {
	cursor: zoom-in;
}

.span_6 img { padding: 10px; }

.span_8 {
	position: relative;
	display: block;
	float: left;
	width: 25%;
}

span_8 a {
	cursor: zoom-in;
}

.span_8 img { padding: 10px; }
		
/* MEDIA QUERIES FOR DISPLAYS +720px */
@media ( min-width : 720px ) {
	.container {}
	.row {}
	.col {}
	
	.span_4 {
		position: relative;
		display: block;
		float: left;
		width: 25%;
	}
	
	.span_4 img { padding: 20px; }

	.span_6 {
		position: relative;
		display: block;
		float: left;
		width: 16.66%;
	}
	
	.span_6 img { padding: 20px; }
		
	.span_8 {
		position: relative;
		display: block;
		float: left;
		width: 12.5%;
	}
	
	.span_8 img { padding: 20px; }
}