/*

	ALVEOS GRID SYTEM
	
	- Based on 8 columns. 
	- Default .content gutters 20px.
	- Background? Use the .bg class on a section to creates 20px gutters outside .content
	- Column inception? Use the .col-container class on the parent column

	Wraps
	- Smartphones 										 320px Extra Small (xs) 
	- Tablets (portrait) & Smartphones (landscape) 		 640px Small (sm)
	- Laptops & Tablets (landscape) 					 960px Medium (md) 
	- Desktops 											1280px Large (lg)  
	
	Versions
	- v1.0 2014-00-00 Started with gridism by @cobyism https://github.com/cobyism/gridism
	- v1.1 2014-00-00 Customized by Alveos
	- v2.0 2015-02-00 Revised by Alveos
	- v2.1 2015-03-03 Revised with Bootstraps's media-query-specific classes: col-xs-8, col-sm-8, ..	
	- v2.2 2015-04-07 Removed .bg 

*/

/* Preserve some sanity */
.row, .col { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Set up some rules to govern the grid */
.row { display: block; clear: both; margin: 0 auto; }
.row .col { float: left; }

/* Clearfix after every .row */
.row { *zoom: 1; }
.row:before, .row:after { display: table; content: ""; line-height: 0; }
.row:after { clear: both; }

/* Default gutter */
.row .col .content { padding: 20px; overflow: hidden; }

/* Additional gutters outside .content when using .bg */
.section.bg .row,
header.bg .row,
footer.bg .row { padding-top: 20px; padding-bottom: 20px; }
.section.bg .row .col,
header.bg .row .col,
footer.bg .row .col { padding: 20px; }

/* Remove additional gutters on a .col-container */
.section.bg .row .col.col-container,
header.bg .row .col.col-container,
footer.bg .row .col.col-container { padding: 0px; }




/* xs Smartphones */
@media screen and (max-width: 639px) {

	/* Wrap */
	.row { max-width: 320px; }

	/* Columns */
	.row .col-xs-8			{ width: 100%; }
	.row .col-xs-7			{ width: 77.5%; }
	.row .col-xs-6			{ width: 75%; } 
	.row .col-xs-5			{ width: 62.5%; } 
	.row .col-xs-4			{ width: 50%; }
	.row .col-xs-3			{ width: 37.5%; } 
	.row .col-xs-2			{ width: 25%; }
	.row .col-xs-1			{ width: 12.5%; }
	
	.row .col-xs-33p 		{ width: 33.3332%; }
	.row .col-xs-sixth 		{ width: 16.6666%; }
	
	/* Hide */
	.hideon-xs { display: none; }
	
}

/* sm Tablets (portrait) & Smartphones (landscape) */
@media screen and (min-width: 640px) and (max-width: 959px) { 

	/* Wrap */
	.row { max-width: 640px; }

	/* Columns */
	.row .col-sm-8			{ width: 100%; }
	.row .col-sm-7			{ width: 77.5%; }
	.row .col-sm-6			{ width: 75%; } 
	.row .col-sm-5			{ width: 62.5%; } 
	.row .col-sm-4			{ width: 50%; }
	.row .col-sm-3			{ width: 37.5%; } 
	.row .col-sm-2			{ width: 25%; }
	.row .col-sm-1			{ width: 12.5%; }
	
	.row .col-sm-33p 		{ width: 33.3332%; }
	.row .col-sm-sixth 		{ width: 16.6666%; }

	/* Hide */
	.hideon-sm { display: none; }

}

/* md Laptops & Tablets (landscape) */
@media screen and (min-width: 960px) and (max-width: 1279px) { 

	/* Wrap */
	.row { max-width: 960px; }

	/* Columns */
	.row .col-md-8			{ width: 100%; }
	.row .col-md-7			{ width: 77.5%; }
	.row .col-md-6			{ width: 75%; } 
	.row .col-md-5			{ width: 62.5%; } 
	.row .col-md-4			{ width: 50%; }
	.row .col-md-3			{ width: 37.5%; } 
	.row .col-md-2			{ width: 25%; }
	.row .col-md-1			{ width: 12.5%; }
	
	.row .col-md-33p 		{ width: 33.3332%; }
	.row .col-md-sixth 		{ width: 16.6666%; }

	/* Hide */
	.hideon-md { display: none; }

}


/* lg Desktops */
@media screen and (min-width: 1280px) {

	/* Wrap */
	/* .row { max-width: 1280px; } */
	.row { max-width: 960px; }
	
	/* Columns */
	.row .col-lg-8			{ width: 100%; }
	.row .col-lg-7			{ width: 77.5%; }
	.row .col-lg-6			{ width: 75%; } 
	.row .col-lg-5			{ width: 62.5%; } 
	.row .col-lg-4			{ width: 50%; }
	.row .col-lg-3			{ width: 37.5%; } 
	.row .col-lg-2			{ width: 25%; }
	.row .col-lg-1			{ width: 12.5%; }
	
	.row .col-lg-33p 		{ width: 33.3332%; }
	.row .col-lg-sixth 		{ width: 16.6666%; }

	/* Hide */
	.hideon-lg { display: none; }
	
	.section { max-width: 1920px; margin: 0px auto; }

}