.grid:after {
	content: "";
	display: block;
	clear: both;
}

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

[class^= 'col-'] { 
	/*any class that starts with "col" will have these attributes*/
	float: left;
	padding:0;
	text-align: center;

}
.col-1of12{
	width:8.333333%;
}



.col-2of12{
	width: 16.666667%;
	
}
.col-3of12{
	width:25%;
}

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

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

.col-4of12{
	width: 33.333333%;
}

.col-5of12{ 
	width: 41.6666667%
}

.col-6of12 {
width : 50%;
}
.col-8of12{
	width: 66.6666667%;
}

.col-9of12{
	width: 75%;
}

.col-12of12{
	width:100%
}

.col-2of8{
	width:25%;
}
.col-4of8{
	width:50%;
}
.col-1of3{
	width: 33.333333%;
}

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

.col-2of10{
	width:20%;
}

.col-1of10{
	width:10%;
}


.col-6of10{
	width:60%;
}

.col-12of12{

	width:100%;
}
/*//////////RESPONSIVE GRID CODE SECTION\\\\\\\\\\\\\\*/



@media (max-width: 1110px){

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


.col-1of10{
	width:0;
}

}

@media (max-width: 860px) {

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

}
@media (max-width: 770px) {

	.col-3of12{
		width:100%;
	}

	.col-5of12{   /* NAHEEL */
	width: 100%
	}

	.col-8of12{
		width:100%;
	}
	.col-2of12{
		width: 33.3333%;
	}

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

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

	.col-2of8{
		width:10%;
	}
	.col-4of8{
		width:80%;
	}
}

@media (max-width:650px) {
	
.col-6of12 {
width : 100%;
}


	.col-2of8{
		width:0;
	}
	.col-4of8{
		width:100%;
	}

}

@media (max-width: 480px) {

	.col-2of12{
		width: 100%;
	}


	nav ul ul{
	width:100%;
	}

	.log ul{
	width:100%;
	}

}