/*-----------------------------------*\

	Flexible responsive content grid by SE

\*-----------------------------------*/


/*-----------------------------------*\
	GRID
\*-----------------------------------*/

.grid *, .grid *:after, .grid *:before { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

.grid{
	margin-left: -3%;
	max-width: 105%;
}
.col,
.grid{
	margin-bottom: 1em;
}

.col {
	background-color: #f9f9f9;
	border: 1px solid #efefef;
	line-height: 1.1em;
	padding: 1em;
}

.grid50 > .col,
.grid50-25 > .col,
.col {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin-left: 3%;
	margin-right: -.3em;
}

.gridsub50 > .col > .colrow > .col {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
}

.grid50-25 > .col,
.grid50 > .col,
.colrow .col{
	width: 47%;
}

.grid .col:last-child{
	margin-bottom: 0;
}

/* Grid with cols starting at 100% width, ending at 25% of width */
.grid25 .col{
	/*nothing*/
}

/* Grid with cols starting at 50% width, ending at 25% of width */
/*.grid50-25 .col{
	padding-left: 3%;
	vertical-align: top;
	float: left;
	margin-bottom: 0;
	width: 50%;
}

.grid50-25 .col:nth-child(odd),
.grid50-25 .nth-child-odd{
	clear:left;
	padding-left: 0;
}*/


@media screen and (min-width: 600px) {

	.grid .col1van2 { width: 47%; }

	.grid .col1van3 { width: 30.36%; }
	.grid .col2van3 { width: 63.6666666%; }

	.grid .col1van4 { width: 22.05%; }
	.grid .col2van4 { width: 46.9%; }
	.grid .col3van4 { width: 72%; }

	.grid .col1van5 { width: 17.07%; }
	.grid .col2van5 { width: 37%; }
	.grid .col3van5 { width: 57%; }
	.grid .col4van5 { width: 77%; }


	/* Fixed flexible */

	.grid50-25 > .col{
		width: 30.36%;
	}
	.grid25 > .col{
		width: 47%;
	}

	.gridsub50 > .col > .colrow > .col {
		width: 100%;
	}

/*	.grid25 .col{
		width: 50%;	
		padding-left: 3%;
		vertical-align: top;
		float: left;
		margin-bottom: 0;
	}
	
	.grid50-25 .col:nth-child(odd),
	.grid50-25 .nth-child-odd{
		clear: none;
		padding-left: 3%;
	}
	.grid25 .col:nth-child(odd),
	.grid25 .nth-child-odd,
	.grid50-25 .col:nth-child(3n+1),
	.grid50-25 .nth-child-3np1{
		clear: left;
		padding-left: 0;
	}*/

}


@media screen and (min-width: 800px) {


	/* Fixed flexible */
	.grid50-25 > .col{
		width: 22.05%;
	}

	.grid25 > .col{
		width: 22.05%;
	}

	.gridsub50 > .col > .colrow > .col{
		width: 47%;
	}

/*	.grid25 .col:nth-child(odd),
	.grid25 .nth-child-odd,
	.grid50-25 .col:nth-child(3n+1),
	.grid50-25 .nth-child-3np1{
		clear: none;
		padding-left: 3%;
	}
	.grid25 .col:nth-child(4n+1),
	.grid25 .nth-child-4np1,
	.grid50-25 .col:nth-child(4n+1),
	.grid50-25 .nth-child-4np1{
		clear: left;
		padding-left: 0;
	}*/


}

@media screen and (max-width: 599px) {
	.grid {
		margin-left: 0;
		max-width: none;
	}
	.grid50-25,
	.grid50{
		margin-left: -3%;
		max-width: 105%;
	}

	.col {
		width: auto;
		margin-left: 0;
		display: block;
	}

/*	.grid50 .col,
	.grid50-25 .col{
		width: 47%;
	}
*/
}