/*
 * CSS for Brooklin Grid --- a responsive grid system.
 * 
 * Inspired by Lemonade.
 */

.brooklin-grid:after {
	content:"";
	display:table;
	clear:both;
}


/* Columns */

/*All columns*/

[class*="brooklin-grid-col-"] {
	float:left;
	padding:0 1em;
}

[class*="brooklin-grid-col-"]:last-of-type {
	float:right;
	padding-right:1em;
}


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

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

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

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

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

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

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

.brooklin-grid-col-7-8 {width:87.5%;}



@media (min-width:800px) and (max-width: 1100px){
	.brooklin-grid-col-1-2, .brooklin-grid-col-3-4
	{
		width:100%;
	}
		.brooklin-grid-col-1-4, .brooklin-grid-col-1-8
	{
		width:50%;
	}
	
}

@media (max-width: 800px){
	
	.brooklin-grid-col-1-4, .brooklin-grid-col-1-8
	{
		width:50%;
	}

	.brooklin-grid-col-1-2, .brooklin-grid-col-1-3, .brooklin-grid-col-2-3 {
		width:100%;
	}

}

@media (max-width:500px)
{
	[class*="brooklin-grid-col-"] {
		width:100%;
	}
}