/* The grid, and the handful of other things the pages took from Bootstrap 3.
 *
 * bootstrap.min.css was 116 KB of the site's 188 KB of CSS and, with none of
 * Bootstrap's JavaScript loaded any more, the last thing keeping the
 * dependency. Of everything in it the templates use exactly this: .container,
 * .row, .col-{xs,sm,md,lg}-*, .hidden-{xs,sm,md}, .hide, .img-responsive and
 * .radio - no navbar, no buttons, no form-control, no tables, no glyphicons
 * (whose six font files bootstrap.min.css asked for were never in the
 * repository to begin with).
 *
 * So this file is that subset, written out: the same class names, the same
 * breakpoints (768 / 992 / 1200) and the same container widths, with the rows
 * laid out by flexbox instead of floats and clearfixes. Keeping the class
 * names is what makes it a drop-in - the 124 rows and ~380 columns across the
 * page templates are untouched, and rewriting them page by page into bespoke
 * CSS Grid layouts stays a separate, optional job.
 *
 * Two deliberate differences from Bootstrap's floats:
 *   - `align-items: flex-start` keeps a column as tall as its content, the way
 *     a float is, rather than stretching it to the row's height.
 *   - `min-width: 0` lets oversized content (an image wider than its column)
 *     overflow instead of pushing its neighbours onto the next line, which is
 *     again what a float does.
 * Flexbox also fixes the float model's one real annoyance for free: a row of
 * unequal-height columns no longer snags on the tallest one when it wraps.
 */

/* ---------------------------------------------------------------- base ----
 * Bootstrap shipped normalize.css and its own scaffolding on top. Modern
 * browsers need almost none of it; what the site does inherit from it is
 * below. Type sizes, colours, weights and families are not here because
 * style.css sets its own for every element that has them - only the vertical
 * rhythm Bootstrap supplied is kept, so headings keep their spacing.
 */

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

body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333;}

/* Without this a <textarea> falls back to the user agent's monospace. */
button,
input,
optgroup,
select,
textarea {margin: 0; font: inherit; color: inherit;}

img {vertical-align: middle; border: 0;}

label {display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;}

/* normalize.css shipped this, and the mobile navigation's <details> rely on
   it: a `list-item` <summary> draws the disclosure triangle this design does
   not want. */
summary {display: block;}

/* The link colour for the anchors style.css does not give one of its own. */
a {color: #337ab7; text-decoration: none;}
a:hover,
a:focus {color: #23527c; text-decoration: underline;}

h1, h2, h3 {margin-top: 20px; margin-bottom: 10px;}
h4, h5, h6 {margin-top: 10px; margin-bottom: 10px;}

p {margin: 0 0 10px;}
ul, ol {margin-top: 0; margin-bottom: 10px;}
b, strong {font-weight: 700;}

.hide {display: none !important;}

.img-responsive {display: block; max-width: 100%; height: auto;}

/* A stack of radio buttons: the control sits in the label's left padding. */
.radio {position: relative; display: block; margin-top: 10px; margin-bottom: 10px;}
.radio label {min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer;}
.radio input[type="radio"] {position: absolute; margin-left: -20px;}

/* ------------------------------------------------------------ container ---
 * Fluid below 768px, then the three fixed widths Bootstrap used.
 */

.container {width: auto; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px;}

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

@media (min-width: 992px) {
	.container {width: 970px;}
}

@media (min-width: 1200px) {
	.container {width: 1170px;}
}

/* ------------------------------------------------------------------ grid --
 * A column is full width until its breakpoint, then takes its share of
 * twelve. The negative margins on the row cancel the outermost column
 * padding, so a row sits flush inside its container.
 */

.row {display: flex; flex-wrap: wrap; align-items: flex-start; margin-right: -15px; margin-left: -15px;}

/* Every column: the gutter, and full width until its breakpoint says
   otherwise. `min-height` keeps an empty spacer column in the flow. */
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {position: relative; width: 100%; min-width: 0; min-height: 1px; padding-right: 15px; padding-left: 15px;}

/* xs applies at every width. */
.col-xs-1 {width: 8.33333333%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-3 {width: 25%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-6 {width: 50%;}
.col-xs-7 {width: 58.33333333%;}
.col-xs-8 {width: 66.66666667%;}
.col-xs-9 {width: 75%;}
.col-xs-10 {width: 83.33333333%;}
.col-xs-11 {width: 91.66666667%;}
.col-xs-12 {width: 100%;}

@media (min-width: 768px) {
	.col-sm-1 {width: 8.33333333%;}
	.col-sm-2 {width: 16.66666667%;}
	.col-sm-3 {width: 25%;}
	.col-sm-4 {width: 33.33333333%;}
	.col-sm-5 {width: 41.66666667%;}
	.col-sm-6 {width: 50%;}
	.col-sm-7 {width: 58.33333333%;}
	.col-sm-8 {width: 66.66666667%;}
	.col-sm-9 {width: 75%;}
	.col-sm-10 {width: 83.33333333%;}
	.col-sm-11 {width: 91.66666667%;}
	.col-sm-12 {width: 100%;}
}

@media (min-width: 992px) {
	.col-md-1 {width: 8.33333333%;}
	.col-md-2 {width: 16.66666667%;}
	.col-md-3 {width: 25%;}
	.col-md-4 {width: 33.33333333%;}
	.col-md-5 {width: 41.66666667%;}
	.col-md-6 {width: 50%;}
	.col-md-7 {width: 58.33333333%;}
	.col-md-8 {width: 66.66666667%;}
	.col-md-9 {width: 75%;}
	.col-md-10 {width: 83.33333333%;}
	.col-md-11 {width: 91.66666667%;}
	.col-md-12 {width: 100%;}
}

@media (min-width: 1200px) {
	.col-lg-1 {width: 8.33333333%;}
	.col-lg-2 {width: 16.66666667%;}
	.col-lg-3 {width: 25%;}
	.col-lg-4 {width: 33.33333333%;}
	.col-lg-5 {width: 41.66666667%;}
	.col-lg-6 {width: 50%;}
	.col-lg-7 {width: 58.33333333%;}
	.col-lg-8 {width: 66.66666667%;}
	.col-lg-9 {width: 75%;}
	.col-lg-10 {width: 83.33333333%;}
	.col-lg-11 {width: 91.66666667%;}
	.col-lg-12 {width: 100%;}
}

/* ------------------------------------------------------------- visibility -
 * Bootstrap's hidden-* helpers, for the three tiers the pages use.
 */

@media (max-width: 767px) {
	.hidden-xs {display: none !important;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.hidden-sm {display: none !important;}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.hidden-md {display: none !important;}
}