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

[class^='grid-col-']{
	float:left;
	padding:0;
	/*text-align: center;*/
}

/**/
/*#######################*/
.grid-col-1of4{
	width:17%;
	height:5em;
	margin-bottom:1em;	
}
.grid-col-6of6{
	width:32%;
	height:5em;
	margin-bottom:1em;	
}
/*#######################*/

/**/
/*#######################*/
.grid-col-8of8{
	width:92%;
	/*margin:5%;*/
	height:10em;
	margin-bottom:1em;
}

.grid-col-1of1{
	width:4%;
	/*margin:5%;*/
	/*height:10em;*/
	margin-bottom:1em;	
}
/*#######################*/
/*this is for the contact page, checkout and product details, 2 colums*/
.grid-col-1of2{
	width:44%;

}

.grid-col-100of100{
	width:100%;
}

.grid-col-50p{
	width:50%;
}

/**/
/*#######################*/
.grid-col-1of3{
	width:28%;
	/*margin:5%;*/
	height:20em;
	margin-bottom:1em;
}

.grid-col-1of1p{
	width:4%;
	/*margin:5%;*/
	height:20em;
	margin-bottom:1em;	
}
/*#######################*/

/**/
/*#######################*/
.grid-col-1of4p{
	width:20%;
	/*margin:5%;*/
	height:30em;
	margin-bottom:1em;
}

.grid-col-1of5{
	width:4%;
	/*margin:5%;*/
	height:30em;
	margin-bottom:1em;	
}
/*#######################*/




/*.grid-col-2of10{
	width:20%;
	height:2em;
	margin-bottom:1em;

	
}*/





/*after this class apears, something happens*/
.grid-row:after{
	content: "";
	display: block;
	clear: both;

}