.g-grid {
	display: block;
	margin-left: -0.625rem;
	margin-right: -0.625rem;
}

.g-grid-col {
	padding-left: 0.625rem;
	padding-right: 0.625rem;
    margin-bottom: 1.25rem;
	float: left;
}

.g-grid-col.x1 {
	width: 8.33333%;
}

.g-grid-col.x2 {
	width: 16.66667%;
}

.g-grid-col.x3 {
	width: 25%;
}

.g-grid-col.x4 {
	width: 33.33333%;
}

.g-grid-col.x5 {
	width: 41.66667%;
}

.g-grid-col.x6 {
	width: 50%;
}

.g-grid-col.x7 {
	width: 58.33333%;
}

.g-grid-col.x8 {
	width: 66.66667%;
}

.g-grid-col.x9 {
	width: 75%;
}

.g-grid-col.x10 {
	width: 83.33333%;
}

.g-grid-col.x11 {
	width: 91.66667%;
}

.g-grid-col.quarter {
	width: 25%;
}

.g-grid-col.third {
	width: 33.33333%;
}

.g-grid-col.half {
	width: 50%;
}

.g-grid-col.full {
	width: 100%;
}

.g-grid-col.remain {
}

.g-grid.justify {
}

.g-grid.no-wrap {
	white-space: nowrap;
}

.g-grid.has-space .g-grid-col {
	margin-bottom: 1.25rem;
}

@media screen and (max-width: 55.625rem) and (min-width: 43.125rem) {
	.g-grid-col[class] {
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].x1, .g-grid-col[class].x2 {
		width: 33%;
	}

	.g-grid-col[class].x3, .g-grid-col[class].x4, .g-grid-col[class].x5, .g-grid-col[class].x7, .g-grid-col[class].x8, .g-grid-col[class].quarter, .g-grid-col[class].third, .g-grid-col[class].half {
		width: 50%;
	}

	.g-grid-col[class].x8, .g-grid-col[class].x9, .g-grid-col[class].x10, .g-grid-col[class].x11 {
		width: 100%;
	}

	.g-grid-col[class].xt1 {
		width: 16.66667%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].ot1 {
	}

	.g-grid-col[class].xt2 {
		width: 33.33333%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].ot2 {
	}

	.g-grid-col[class].xt3 {
		width: 50%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].ot3 {
	}

	.g-grid-col[class].xt4 {
		width: 66.66667%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].ot4 {
	}

	.g-grid-col[class].xt5 {
		width: 83.33333%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].ot5 {
	}

	.g-grid-col[class].xt6 {
		width: 100%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].ot6 {
	}

	.g-grid-col[class].xtf {
		width: 100%;
	}
}

@media screen and (max-width: 43.125rem) and (min-width: 30rem) {
	.g-grid-col[class] {
		width: 50%;
		margin-bottom: 1.25rem;
	}

	.g-grid-col[class].x8, .g-grid-col[class].x9, .g-grid-col[class].x10, .g-grid-col[class].x11 {
		width: 100%;
	}

	.g-grid-col[class].xi1 {
		width: 50%;
	}

	.g-grid-col[class].xi2, .g-grid-col[class].xif {
		width: 100%;
	}

	.g-grid-col[class].oi1 {
	}

	.g-grid-col[class].oi2 {
	}

	.g-grid-col[class].oi3 {
	}

	.g-grid-col[class].oi4 {
	}

	.g-grid-col[class].oi5 {
	}

	.g-grid-col[class].oi6 {
	}
}

@media screen and (max-width: 30rem) {
	.g-grid-col[class] {
		width: 100%;
		margin-bottom: 0.625rem !important;
	}

	.g-grid-col[class].om1 {
	}

	.g-grid-col[class].om2 {
	}

	.g-grid-col[class].om3 {
	}

	.g-grid-col[class].om4 {
	}

	.g-grid-col[class].om5 {
	}

	.g-grid-col[class].om6 {
	}
}