/******************************************************************/
/*** U T I L I T Y   S T Y L E S  ***/
/******************************************************************/

.visually-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); 
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden;
}

.columns-2 {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 2rem;
	-moz-column-gap: 2rem;
	column-gap: 2rem;
	-webkit-column-width: 250px;
	-moz-column-width: 250px;
	column-width: 200px;
	padding-left: 1rem;
}

.box {
	border-radius: 10px;
	border-width: 2px;
	border-style: solid;
	padding: 0.75rem;
}

@media all and (min-width: 851px) {
	.box {
		padding: 1.25rem;
	}
}

a.wrapper-link {
	text-decoration: none;
}

.alert-message {
	font-size: 1.75rem;
	border-left-width: 5px;
	border-left-style: solid;
	padding-left: 1.25rem;
	font-weight: bold;
}

.text-smaller { /* use, e.g., on a span inside a heading to create a section with smaller font */
	font-size: 0.8em;
}

.vertical-center { /* put this class on a parent element to vertically centre its children */
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}

.space-left {
	margin-left: 0.5rem;
}

.space-right {
	margin-right: 0.5rem;
}

.space-bottom {
	margin-bottom: 1rem;
}

/* Flexbox grid system - used for laying out horizontal grid paragraphs, but could be used for any content. */

.flex-grid {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.5rem;
}

.flex-grid > * {
	flex: 0 1 100%;
	margin: 0 0.5rem 0.75rem 0;
}

@media all and (min-width: 851px) {
	.flex-grid > * {
		margin: 0 1rem 1rem 0;
	}
	.flex-grid {
		margin-right: -1rem;
	}
}

/* Use these classes on the wrapper grid to get evenly sized columns. 
The column number is the number of columns which will display as screen size allows.
This is assuming the content is inside a full-width container */
@media all and (min-width: 768px) {
	.flex-grid.columns-2 > * {
		flex-basis: 555px;
	}

	.flex-grid.columns-3 > * {
		flex-basis: 370px;
	}

	.flex-grid.columns-4 > * {
		flex-basis: 270px;
	}
	/* Good old IE, of course, doesn't get it right */
	_:-ms-fullscreen, :root .flex-grid.columns-2 > * {
		flex-basis: 515px;
	}
	_:-ms-fullscreen, :root .flex-grid.columns-3 > * {
		flex-basis: 320px;
	}
	_:-ms-fullscreen, :root .flex-grid.columns-4 > * {
		flex-basis: 225px;
	}
}

/* Images */

.image-cover img { /* non-background images that cover their whole container. */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Menu-type horizontal links lists */

ul.links-list {
	padding-left: 0;
	list-style: none;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

ul.links-list.vertical {
	flex-direction: column;
	align-items: flex-start;
}

ul.links-list li {
	padding: 0;
}

ul.links-list li:not(:last-child) {
	margin-right: 0.5rem;
}

ul.links-list.vertical li:not(:last-child) {
	margin-right: 0;
	margin-bottom: 0.5rem;
}

ul.links-list li a {
	display: block;
}

ul.links-list.vertical li a {
	display: inline;
}

a.facets-soft-limit-link.open {
  display: none;
}

.hide {
	display: none;
}