/* grid system */
/* https://www.sitepoint.com/understanding-css-grid-systems/ */
.grid-row {
	width    : 100%;
	position : relative;
}
.grid-col,
.grid-row {
	box-sizing : border-box;
}
.grid-col {
	float    : left;
	position : relative;
}
.grid-row:before,
.grid-row:after {
	content : " ";
	display : table;
}
.grid-row:after {
	clear : both;
}
.grid-col + .grid-col {
	margin-left : 1.6%;
}
.grid-col-1 {
	width : 6.86666666667%;
}
.grid-col-2 {
	width : 15.3333333333%;
}
.grid-col-3 {
	width : 23.8%;
}
.grid-col-4 {
	width : 32.2666666667%;
}
.grid-col-5 {
	width : 40.7333333333%;
}
.grid-col-6 {
	width : 49.2%;
}
.grid-col-7 {
	width : 57.6666666667%;
}
.grid-col-8 {
	width : 66.1333333333%;
}
.grid-col-9 {
	width : 74.6%;
}
.grid-col-10 {
	width : 83.0666666667%;
}
.grid-col-11 {
	width : 91.5333333333%;
}
.grid-col-12 {
	width : 100%;
}
@media (max-width : 550px) {
	.grid-col-1,
	.grid-col-2,
	.grid-col-3,
	.grid-col-4,
	.grid-col-5,
	.grid-col-6,
	.grid-col-7,
	.grid-col-8,
	.grid-col-9,
	.grid-col-10,
	.grid-col-11,
	.grid-col-12 {
		width : auto;
		float : none
	}
	.grid-col + .grid-col {
		margin-left : 0;
	}
}