/*
	*********************************************************************************************************************
	Custom CSS GRID - Project: Ontier
	Tasks: Html / Css / jQuery
	Client: Wonton
	Version: 1.0
	********************************************************************************************************************
*/


/* *********************************************************************************************************************
 * COLUMN SETTINGS
 */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_12_100 {
	float: left;
	margin: 0;
}

.grid_1 { width: 8.25%; }
.grid_2 { width: 16.5%; }
.grid_3 { width: 24.75%; }
.grid_4 { width: 33%; }
.grid_5 { width: 41.25%; }
.grid_6 { width: 49.5%; }
.grid_7 { width: 57.75%; }
.grid_8 { width: 66%; }
.grid_9 { width: 74.25%; }
.grid_10 { width: 82.5%; }
.grid_11 { width: 90.75%; }
.grid_12 { width: 99%; }
.grid_12_100 { width: 100%; }



/* *********************************************************************************************************************
 * WRAPPER AND ROW
 */
.content-wrapper {
	/*width: 100%;*/
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 0 0 1%;
}

.row {
	clear: both;
	padding: 0 20px;
}

.divider-20 {height: 20px;}
.divider-50 {height: 50px;}
.divider-80 {height: 80px;}
.divider-100 {height: 100px;}
.divider-120 {height: 120px;}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}



/* *********************************************************************************************************************
 * RESPONSIVE - 1024
 */
@media all and (max-width: 1024px) {
	.content-wrapper {
		max-width: 1000px;
	}

	.row {
		padding: 0 10px;
	}
}




/* *********************************************************************************************************************
 * LANDSCAPE PHONES AND DOWN
 */
@media all and (max-width: 768px) {

	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		float: none;
		width: 99%;
	}

	.grid_12_100 {
		float: none;
	}

	/* REMOVE DIVIDERS */
	.divider-20 {height: 0px;}
	.divider-50 {height: 0px;}
	.divider-80 {height: 0px;}
	.divider-100 {height: 0px;}
	.divider-120 {height: 0px;}

}