.container{
	max-width: 90%;
	margin: auto;
}

.row{
	display: flex;
	margin-top: 10px;
	margin-bottom: 10px;
}

.col-1{
	width: 8.333333333333%;
}

.col-2{
	width: 16.666666666666%;
}
.col-3{
	width: 24.999999999999%;
}
.col-4{
	width: 33.333333333333%;
}
.col-5{
	width: 41.666666666666%;
}
.col-6{
	width: 49.999999999999%;
}
.col-7{
	width: 58.333333333333%;
}
.col-8{
	width: 66.666666666666%;
}
.col-9{
	width: 74.999999999999%;
}
.col-10{
	width: 83.333333333333%;
}
.col-11{
	width: 91.666666666666%;
}
.col-12{
	width: 100%;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
	padding: 10px;
	margin: auto;

}

@media(max-width: 600px){
	.row{
		display: inherit;
	}

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
		width: 100%;	
	}
}


/* container > row > colum*/