/* GRIDS */

[class^="col-"],
[class*=" col-"]  {
	float: left;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.boxed {
	width: 1200px;
	margin: 0 auto;
	clear: both;
}

/* SIZE */

.col-1-6 {
	width: 16.66%;
}

.off-1-6 {
	margin-left: 16.66%;	
}

.col-2-6{
	width: 33.33%;
}

.off-2-6 {
	margin-left: 33.33%;
}

.col-3-6 {
	width: 50%;
}

.off-3-6 {
	margin-left: 50%;
}

.col-4-6 {
	width: 66.66%;
}

.off-4-6 {
	margin-left: 66.66%;
}

.col-5-6 {
	width: 83.33%;
}

.off-5-6 {
	margin-left: 83.33%;
}

.col-1-5 {
	width: 20%;
}

.off-1-5 {
	margin-left: 20%;
}

.col-2-5 {
	width: 40%;
}

.off-2-5 {
	margin-left: 40%;
}

.col-3-5 {
	width: 60%;
}

.off-3-5 {
	margin-left: 60%;
}

.col-4-5 {
	width: 80%;
}

.off-4-5 {
	margin-left: 80%;
}

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

.off-1-4 {
	margin-left: 25%;	
}

.col-2-4 {
	width: 50%;
}

.off-2-4 {
	margin-left: 50%;
}

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

.off-3-4 {
	margin-left: 75%;
}

.col-1-3 {
	width: 33.33%
}

.off-1-3 {
	margin-left: 33.33%
}

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

.off-2-3 {
	margin-left: 66.66%;
}

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

.off-1-2 {
	margin-left: 50%;	
}


@media screen and (max-width: 1300px) {	
	
	.boxed {
		width: 100%;
	}
	
}	

@media screen and (max-width: 1200px) {	
	
	.col-1-4,
	.col-2-4,
	.col-3-4 {
		width: 50%;
	}
	
	.col-1-5,
	.col-2-5,
	.col-3-5,
	.col-4-5 {
		width: 50%;
	}
	
	.col-1-6,
	.col-2-6,
	.col-3-6,
	.col-4-6,
	.col-5-6 {
		width: 50%;
	}

	
	[class^="off-"], [class*="off-"] {
		margin-left: 0;
	}
	
}

@media screen and (max-width: 900px) {	
	
	.col-1-3,
	.col-2-3 {
		width: 100%
	}
		
	[class^="col-"] [class^="col-"] {
		width: 100% !important;
	}	
	
}

/* RESP GRIDS */

@media screen and (max-width: 600px) {	
	
	[class^="col-"],
	[class*=" col-"] {
		width: 100%;
	}
	
}