/**
 * The grid Bonkers actually uses.
 *
 * Replaces the bundled Bootstrap 3.3.7 stylesheet (164 KB) with the ~4 KB of it
 * this theme references: .container, .row and the column classes. The values are
 * taken from that bundled file rather than from stock Bootstrap, because it was a
 * customised build -- 20px gutters instead of 15, and breakpoints at 768 / 1270 /
 * 1510 instead of 768 / 992 / 1200. Using stock numbers would have moved every
 * layout on the site.
 *
 * Floats are replaced by flexbox, so columns in a row are equal height and the
 * clearfix hacks are unnecessary.
 */

/*
 * Bootstrap's stylesheet set this globally, and the theme's own CSS was written
 * assuming it. Dropping that file without this makes every padded element 40px
 * wider than it was -- which is exactly what happened the first time.
 */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
	margin-right: -20px;
}

/*
 * Widgets in a .row are wrapped by register_sidebar's before_widget, so the
 * element carrying the column class is the wrapper's CHILD, not the flex item.
 * Under the old float grid that still laid out correctly; as a flex container it
 * made every widget full width and stacked the three front-page services.
 *
 * display:contents removes the wrapper from layout so the column inside it
 * becomes the actual flex child, which is what the markup always meant.
 */
.row > .widget {
	display: contents;
}

/* A stray non-column child of .row should still take a full line. */
.row > *:not([class*="col-"]):not(.widget) {
	flex: 0 0 100%;
	max-width: 100%;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
	position: relative;
	min-height: 1px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}
/* col-xs-* applies at every width. */
.col-xs-1 {
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.col-xs-2 {
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.col-xs-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.col-xs-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.col-xs-5 {
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.col-xs-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.col-xs-7 {
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.col-xs-8 {
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.col-xs-9 {
	flex: 0 0 75%;
	max-width: 75%;
}

.col-xs-10 {
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.col-xs-11 {
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.col-xs-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.container {
		width: 760px;
	}

	.col-sm-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-sm-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-sm-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-sm-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-sm-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-sm-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-sm-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 1270px) {
	.container {
		width: 1230px;
	}

	.col-md-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-md-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-md-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-md-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-md-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-md-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-md-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-md-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-md-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-md-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (min-width: 1510px) {
	.container {
		width: 1490px;
	}

	.col-lg-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-lg-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-lg-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-lg-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-lg-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-lg-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-lg-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-lg-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-lg-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-lg-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}