/*anything that begins with or class that begins with 'col-', apply this*/
[class*='col-']{

	float:left;
	padding:0;
	text-align: center;

}

.col-3of9{

	width:33.33%;
	transition: width 0.5s;

}

.col-1of3{

	width:33.33%;
	transition: width 0.5s;

}


.col-2of10{

	width:20%;
	transition: width 0.5s;

}

.col-5of10, .col-1of2{

	width:50%;
	transition: width 0.5s;

}


.col-1of6 {
	width: 16.667%;
	transition: width 0.5s;
}

.col-1of1{

	width: 100%;
	transition: width 0.5s;

}

.grid:after{

	content: "";
	display:block;
	clear: both;

}

/* apply border box model to EVERYTHING!!*/
*, *:after, *:before{

	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}


@media(max-width: 1150px){

	.col-1of2{
		width:100%;
	}
}

@media (max-width: 500px) {

	.col-1of6 {
		width: 50%;
	}
	.col-1of3{
		width: 100%;

	}

}

@media (max-width: 350px) {

	.col-1of6 {
		width: 100%;
	}

}

@media (max-width: 1000px) {

	.col-1of6 {
		width: 33.333%;
	}
	.col-1of3{
		width: 50%;

	}

}

@media (max-width: 900px) {

	.col-5of10 {
		width: 100%;
	}

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

}

@media (max-width: 480px){

	.col-2of10{
		width: 100%;
		
	}
	.col-1of2{
		width: 100%;

	}
	.col-1of3{

		width:100%;

	}

}

@media(max-width:480px){

	.col-1of1{
		width:100%;
	}
}