*, *::after, *::before {	
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}

[class^='col-']{
	float:left;
	text-align:left;
}
/* 4 column grid styles
*/

.col-1of4{
	width:25%;
}
.col-1of5{
	width:20%;
}
.col-3of4{
	width:80%;
}
.col-1of3{
	width:33.33%;
}
.col-2of3{
	width:66.66%;
} 
.col-4of4{
	width:75%;
}
.col-1of2{
	width:50%;
}
.col-1of1{
	width:100%;
}
.col-1of10{
	width:10%;
}

.grid:after{
	content:" ";
	display:block;
	clear:both;
}
@media(max-width:960px){
	.col-1of2, .col-3of4  , .col-1of3{
		width:100%;
		
	}
	
	.col-1of5{
		width:50%;
	}
	
	.col-1of4{
		width: 33.33%;
	}
	
	nav ul ul{
		display:none;
	
	}
}
@media(max-width:680px){
	.col-1of4{
		width:50%;
	}

}
@media(max-width: 30em){
	.col-1of5, .col-1of4{
		width:100%;
	}

}