*{
	margin:0;
	padding:0;
}
.container{
	box-sizing: border-box;
	padding: 10px;
}
.outer{
	box-sizing: border-box;
	float: left;
	background-color: #eee;
	border: 1px solid #999;
	height: 50px;
	margin: 10px; 
	/*font-size: 12px;*/
	/*text-align: center;*/
	/*line-height: 50px;*/
}
@media (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 (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 );
	}
}