/* Modern Flexbox Grid System */
.row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	max-width: 71em;
}

/* Collapse Rows (removes padding between columns) */
.row.collapse > .column,
.row.collapse > .columns {
	padding-left: 0;
	padding-right: 0;
}

/* Nested Rows */
.row .row {
	width: auto;
	margin-left: -2.35rem;
	margin-right: -2.35rem;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
}

/* Columns */
.column,
.columns {
	padding-left: 2.35rem;
	padding-right: 2.35rem;
	width: 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

/* Force stacking on small screens */
@media only screen and (max-width: 40.062em) {
	.row {
		display: block; /* Stacks columns by default */
	}
	.column, .columns {
		width: 100%;
		max-width: 100%;
	}
}

/* Responsive Grid Sizes */
@media only screen and (min-width: 40.063em) {
	.medium-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
	.medium-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
	.medium-3 { flex: 0 0 25%; max-width: 25%; }
	.medium-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
	.medium-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
	.medium-6 { flex: 0 0 50%; max-width: 50%; }
	.medium-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
	.medium-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
	.medium-9 { flex: 0 0 75%; max-width: 75%; }
	.medium-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
	.medium-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
	.medium-12 { flex: 0 0 100%; max-width: 100%; }
}

@media only screen and (min-width: 64.063em) {
	.large-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
	.large-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
	.large-3 { flex: 0 0 25%; max-width: 25%; }
	.large-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
	.large-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
	.large-6 { flex: 0 0 50%; max-width: 50%; }
	.large-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
	.large-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
	.large-9 { flex: 0 0 75%; max-width: 75%; }
	.large-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
	.large-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
	.large-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Offsets (Restored for all breakpoints) */
.small-offset-0 { margin-left: 0%; }
.small-offset-1 { margin-left: 8.33333%; }
.small-offset-2 { margin-left: 16.66667%; }
.small-offset-3 { margin-left: 25%; }
.small-offset-4 { margin-left: 33.33333%; }
.small-offset-5 { margin-left: 41.66667%; }
.small-offset-6 { margin-left: 50%; }
.small-offset-7 { margin-left: 58.33333%; }
.small-offset-8 { margin-left: 66.66667%; }
.small-offset-9 { margin-left: 75%; }
.small-offset-10 { margin-left: 83.33333%; }
.small-offset-11 { margin-left: 91.66667%; }

@media only screen and (min-width: 40.063em) {
	.medium-offset-0 { margin-left: 0%; }
	.medium-offset-1 { margin-left: 8.33333%; }
	.medium-offset-2 { margin-left: 16.66667%; }
	.medium-offset-3 { margin-left: 25%; }
	.medium-offset-4 { margin-left: 33.33333%; }
	.medium-offset-5 { margin-left: 41.66667%; }
	.medium-offset-6 { margin-left: 50%; }
	.medium-offset-7 { margin-left: 58.33333%; }
	.medium-offset-8 { margin-left: 66.66667%; }
	.medium-offset-9 { margin-left: 75%; }
	.medium-offset-10 { margin-left: 83.33333%; }
	.medium-offset-11 { margin-left: 91.66667%; }
}

@media only screen and (min-width: 64.063em) {
	.large-offset-0 { margin-left: 0%; }
	.large-offset-1 { margin-left: 8.33333%; }
	.large-offset-2 { margin-left: 16.66667%; }
	.large-offset-3 { margin-left: 25%; }
	.large-offset-4 { margin-left: 33.33333%; }
	.large-offset-5 { margin-left: 41.66667%; }
	.large-offset-6 { margin-left: 50%; }
	.large-offset-7 { margin-left: 58.33333%; }
	.large-offset-8 { margin-left: 66.66667%; }
	.large-offset-9 { margin-left: 75%; }
	.large-offset-10 { margin-left: 83.33333%; }
	.large-offset-11 { margin-left: 91.66667%; }
}

/* Push/Pull System (Using Flexbox `order`) */
.push-1 { order: 1; }
.push-2 { order: 2; }
.push-3 { order: 3; }
.push-4 { order: 4; }
.push-5 { order: 5; }
.push-6 { order: 6; }
.push-7 { order: 7; }
.push-8 { order: 8; }
.push-9 { order: 9; }
.push-10 { order: 10; }
.push-11 { order: 11; }

.pull-1 { order: -1; }
.pull-2 { order: -2; }
.pull-3 { order: -3; }
.pull-4 { order: -4; }
.pull-5 { order: -5; }
.pull-6 { order: -6; }
.pull-7 { order: -7; }
.pull-8 { order: -8; }
.pull-9 { order: -9; }
.pull-10 { order: -10; }
.pull-11 { order: -11; }

/* Utility Classes */
.row.align-center { justify-content: center; }
.row.align-right { justify-content: flex-end; }
.row.align-justify { justify-content: space-between; }
.row.align-spaced { justify-content: space-around; }

.column.align-center { align-self: center; }
.column.align-right { align-self: flex-end; }
.column.align-top { align-self: flex-start; }
.column.align-bottom { align-self: flex-end; }