html,body{
	margin: 0;
	padding: 0;
}

.container{
	box-sizing: border-box;
	border: 1px solid #999999;
	padding: 10px;
}

.row:after, .row:before{
	content: "";
	display: table;
	clear: both;
}

.col{
	box-sizing: border-box;
	border: 1px solid #999999;
	background-color: #EEEEEE;
	height: 50px;
	margin: 10px;
	float: left;

}
@media only screen and (min-width: 769px) {
	.col-md-1{
		width: calc(8.333% - 20px);
	}
	
	.col-md-2{
		width: calc(16.666% - 20px);
	}
	
	.col-md-3{
		width: calc(25% - 20px);
	}
	
	.col-md-4{
		width: calc(33.333% - 20px);
	}
	
	.col-md-6{
		width: calc(50% - 20px);
	}
}

@media only screen and (max-width: 768px) {
	.col-sm-2{
		width: calc( 16.666% - 20px);
	}
	.col-sm-3{
		width: calc( 25% - 20px);
	}
	.col-sm-6{
		width: calc( 50% - 20px);
	}
	.col-sm-8{
		width: calc( 66.666% - 20px);
	}
	.col-sm-12{
		width: calc( 100% - 20px);
	}
}