.flex-row {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -1rem;
	margin-right: -1rem;
	margin-bottom: -2rem;
}
.flex-row > * { flex-basis: auto; flex-grow: 1; max-width: 100%; padding-left: 1rem; padding-right: 1rem; margin-bottom: 2rem; }

.flex-row > .row-separator { width: 100%; height: 2px; background: #333; margin: 0 1rem 2rem 1rem; padding: 0 !important; }

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-auto-width,.col-separator { flex-grow: 0; }

.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }
.col-auto-width { width: auto; flex-basis: 0; }
.col-grow { width: auto; flex-grow: 1; }

.col-separator { width: 2px; background: #333; margin-left: 1rem; margin-right: 1rem; padding: 0 !important; }

.flex-row-left {
	-webkit-box-pack: start !important;
	-webkit-justify-content: start !important;
	-ms-flex-pack: start !important;
	justify-content: start !important;
}

.flex-row-center {
	-webkit-box-pack: center !important;
	-webkit-justify-content: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

.flex-row.no-padding { margin: 0; }
.flex-row.no-padding > * { margin: 0; padding: 0; }

.flex-row.no-wrap { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }

.flex-row.padding-half { margin-left: -.5rem; margin-right: -.5rem; margin-bottom: -1rem; }
.flex-row.padding-half > * { padding-left: .5rem; padding-right: .5rem; margin-bottom: 1rem; }
.flex-row.padding-half > .row-separator { margin: 1rem .5rem; }
.flex-row.padding-half > .col-separator { margin-left: .5rem; margin-right: .5rem; }

.flex-row.padding-3 { margin-left: -3rem; margin-right: -3rem; margin-bottom: -6rem; }
.flex-row.padding-3 > * { padding-left: 3rem; padding-right: 3rem; margin-bottom: 6rem; }
.flex-row.padding-3 > .row-separator { margin: 1.5rem 3rem; }

.flex-row.padding-6 { margin-left: -6rem; margin-right: -6rem; margin-bottom: -12rem; }
.flex-row.padding-6 > * { padding-left: 6rem; padding-right: 6rem; margin-bottom: 12rem; }
.flex-row.padding-6 > .row-separator { margin: 3rem 6rem; }

.flex-row.auto-width { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.flex-row.auto-width > * { padding: 1rem; margin-bottom: 0; }
.flex-row.auto-width.no-padding > * { padding: 0; }
.flex-row.auto-width.padding-half > * { padding: .5rem; }
.flex-row.auto-width.padding-3 > * { padding: 3rem; }
.flex-row.auto-width.padding-6 > * { padding: 6rem; }

.flex-row.debug > * { background: #eee; border: 1px solid #ccc; }