/*
Theme Name: HBC
Author: Tim Wakeling
Author URI: http://www.timwakeling.co.uk/
Description: The theme for the HBC website.
*/

/* HBC official colours: */
:root {
	--blue: rgb( 9, 124, 186 ); /* was rgb( 82, 172, 221 ); */
	--light-blue: rgb( 210, 233, 246 );
	--very-light-blue: rgb( 230, 241, 247 );
	--orange: rgb( 216, 133, 68 );
	--light-orange: rgb( 245, 225, 209 );
	--green: rgb( 52, 146, 14 );
	--light-green: rgb( 213, 249, 199 );
	--text-grey: rgb( 25, 25, 25 );	
}

/* Colours in content blocks */

.has-blue-color {
	color: var( --blue ) !important;
}
.has-blue-color a {
	border-color: rgba( 82, 172, 221, 0.3 ) !important;
}
.has-blue-color a:hover {
	border-color: var( --blue ) !important;
}
.has-blue-background-color {
	background-color: var( --blue ) !important;
}

.has-light-blue-color {
	color: var( --light-blue ) !important;
}
.has-light-blue-color a {
	border-color: rgba( 210, 233, 246, 0.3 ) !important;
}
.has-light-blue-color a:hover {
	border-color: var( --light-blue ) !important;
}
.has-light-blue-background-color {
	background-color: var( --light-blue ) !important;
}

.has-orange-color {
	color: var( --orange ) !important;
}
.has-orange-color a {
	border-color: rgba( 216, 133, 68, 0.3 ) !important;
}
.has-orange-color a:hover {
	border-color: var( --orange ) !important;
}
.has-orange-background-color {
	background-color: var( --orange ) !important;
}

.has-light-orange-color {
	color: var( --light-orange ) !important;
}
.has-light-orange-color a {
	border-color: rgba( 245, 225, 209, 0.3 ) !important;
}
.has-light-orange-color a:hover {
	border-color: var( --light-orange ) !important;
}
.has-light-orange-background-color {
	background-color: var( --light-orange ) !important;
}

.has-green-color {
	color: var( --green ) !important;
}
.has-green-color a {
	border-color: rgba( 52, 146, 14, 0.3 ) !important;
}
.has-green-color a:hover {
	border-color: var( --green ) !important;
}
.has-green-background-color {
	background-color: var( --green ) !important;
}

.has-light-green-color {
	color: var( --light-green ) !important;
}
.has-light-green-color a {
	border-color: rgba( 213, 249, 199, 0.3 ) !important;
}
.has-light-green-color a:hover {
	border-color: var( --light-green ) !important;
}
.has-light-green-background-color {
	background-color: var( --light-green ) !important;
}

.has-black-color {
	color: black !important;
}
.has-black-color a {
	border-color: rgba( 0, 0, 0, 0.3 ) !important;
}
.has-black-color a:hover {
	border-color: black !important;
}
.has-black-background-color {
	background-color: black !important;
}

.has-text-grey-color {
	color: var( --text-grey ) !important;
}
.has-text-grey-color a {
	border-color: rgba( 48, 44, 48, 0.3 ) !important;
}
.has-text-grey-color a:hover {
	border-color: var( --text-grey ) !important;
}
.has-text-grey-background-color {
	background-color: var( --text-grey ) !important;
}

.has-white-color {
	color: rgb( 255, 255, 255 ) !important;
}
.has-white-color a {
	border-color: rgba( 255, 255, 255, 0.3 ) !important;
}
.has-white-color a:hover {
	border-color: white !important;
}
.has-black-background-color {
	background-color: white !important;
}

/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
sub {
	font-size: 10px;
	position: relative;
	top: 3px;
}
sup {
	font-size: 10px;
	position: relative;
	top: -7px;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: 500;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
article img {
	max-width: 100%;
	height: auto;
}
strong {
	font-weight: 500;
}

/* Global */

body {
	background: white;
	color: #373737;
	font: 1.3em 'Museo Sans', Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.6;
}

/* Headings */
h1,h2,h3,h4 {
	font-family: 'Museo Sans', Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: var( --blue );
	line-height: 1.2;
	margin-bottom: 0.8em;
	clear: both;
}
h1 {
	font-size: 200%;
}
h2 {
	font-size: 160%;
}
h3 {
	font-size: 130%;
}
h4 {
	font-size: 110%;
}

/* Text elements */

p {
	margin-bottom: 1.625em;
}
ul, ol {
	margin: 0 0 1.625em 2.5em;
}
ul {
	list-style: square;
}
ul.no-bullets {
	list-style-type: none;
	margin-left: 0;
}
ol {
	list-style-type: decimal;
}
cite, em, i {
	font-style: italic;
}
blockquote {
	font-family: Georgia, serif;
	font-weight: 500;
	font-size: 18px;
	font-style: italic;
	color: #999;
	margin: 1em 0;
	padding: 1em 2em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
blockquote p:last-child {
	margin-bottom: 0;
}
.success,
.warning,
.error,
.tip {
	position: relative;
	padding: 0.4em 0.8em 0.4em 2.2em;
	border-radius: 4px;
}
.success::before,
.warning::before,
.error::before,
.tip::before {
	font-family: 'Font Awesome 6 Pro';
	position: absolute;
	top: 0.4em;
	left: 0.6em;
}
.success {
	background: #cfc;
	color: #090;
}
.success::before {
	content: '\f058';
}
.warning,
.error {
	background: #fdd;
	color: #c00;
}
.warning::before,
.error::before {
	content: '\f06a';
}
.tip {
	background: var( --light-blue );
	color: var( --blue );
}
.tip a {
	border-bottom-color: var( --blue );
}
.tip::before {
	content: '\f05a';
}
.small-text {
	display: block;
	font-size: 75%;
	color: #999;
	line-height: 1.4;
	margin: 5px 0 -15px;
}
.small-text a {
	color: #666;
	font-weight: 500;
}
hr {
	clear: both;
	border: none;
	border-top: 1px solid #ddd;
}

/* Forms */

.gform_wrapper {
	margin-top: 1em;
	margin-bottom: 1em;
}
.gfield {
	display: block;
	border: none;
	margin: 1.5rem 0;
	padding: 0;
}
.gfield.gsection {
	margin-top: 2.5em;
	margin-bottom: 2em;
}
.gsection_title {
	padding-bottom: 0.5em;
	border-bottom: 2px solid rgb( 9, 124, 186 );
}
.gfield_label {
	display: block;
	color: black;
	font-weight: 700;
	margin-bottom: 0.2em;
}
legend.gfield_label {
	position: relative;
	top: 0.4em;
}
.ginput_complex label {
	font-size: 80%;
	font-weight: 500;
	margin: 0.2em 0;
}
.gfield_description {
	font-size: 85%;
	margin: 0.4em 0 0.6em;
}
.gfield_consent_description {
	font-size: 85%;
	opacity: 1;
	background: rgb( 225, 225, 225 );
	padding: 0.8em 1em;
	border-radius: 5px;
	margin-top: 1rem;
}
.ginput_complex.has_first_name.no_prefix {
	display: grid;
	grid-template-columns: repeat( 2, calc( 50% - 0.3rem ) );
	grid-gap: 0.6rem;
}
.ginput_complex.has_first_name.has_prefix {
	display: grid;
	grid-template-columns: calc( 24% - 0.4rem ) calc( 38% - 0.4rem ) calc( 38% - 0.4rem );
	grid-gap: 0.6rem;
}
.gfield_date_day,
.gfield_date_month,
.gfield_date_year,
.gfield_time_hour,
.gfield_time_minute,
.gfield_time_ampm {
	display: inline-block;
	width: auto;
	margin-top: 0.3em;
	margin-right: 0.3em;
}
.hour_minute_colon {
	display: inline-block;
}
.gfield_radio,
.gfield_checkbox {
	margin-top: 0.4rem;
}
/* Visibly hide radio buttons from fields with only one choice, but not using display: none
   because that can be overridden by conditional logic */
.gfield_radio .gchoice:first-child:last-child:has( input:checked ) {
	padding: 0;
}
.gfield_radio .gchoice:first-child:last-child input:checked {
	position: absolute;
	left: -99999px;
}
.gfield_radio .gchoice:first-child:last-child input:checked + label {
	font-size: 90%;
	font-weight: 500;
	padding: 0;
}
.gfield_radio .gchoice:first-child:last-child input:checked + label:hover {
	cursor: default;
}
.gchoice {
	padding: 0.2rem 0;
}
.gform_validation_errors h2 {
	display: block;
	background: var( --warning );
	padding: 0.2em 0.4em;
	margin: 0.2em 0 1em;
	font-size: 120%;
	font-weight: 500;
	color: white;
	padding: 0.4em 0.8em;
	border-radius: 5px;
}
.gform_validation_errors h2.gform_stripe_requires_action {
	background: white;
	color: white;
}
.gform_validation_errors h2.gform_stripe_requires_action::before {
	content: 'Your payment is being authorised. Please wait a moment, and provide any extra confirmation if your bank asks for it.';
	display: block;
	background: red;
	color: white;
	border: 2px solid red;
	padding: 0.2em 0.4em;
	border-radius: 5px;
}
.gfield.gfield_error {
	border-left: 0.2em solid red;
	padding: 0 0.5em;
}
.gfield_error .validation_message,
.gfield_description.validation_message {
	display: inline-block;
	background: red;
	padding: 0.2em 0.4em;
	font-weight: 500;
	color: white;
	border-radius: 5px;
	position: relative;
	top: 0.5em;
}
input[type="text"].ginput_total {
	border: none;
	padding: 0;
	font-size: 160%;
	box-shadow: none;
}
input[type="text"].ginput_total:hover,
input[type="text"].ginput_total:focus,
input[type="text"].ginput_total:active {
	background: transparent;
}
.ginput_product_price_label {
	display: none;
}
.gfield_required,
.gform_required_legend {
	display: none;
}
.gfield_visibility_hidden {
	display: none;
}
.gfield.pound-sign .ginput_container {
	position: relative;
}
.gfield.pound-sign .ginput_container::before {
	content: '£';
	position: absolute;
	top: 0.42em;
	left: 0.6em;
}
.gfield.pound-sign input {
	padding-left: 1.4em;
}
.gfield.hide-instruction .gfield_description.instruction {
	display: none;
}
input[type="button"].gform_previous_button {
	background: white;
	border-color: var( --blue );
	color: var( --blue );
}
input[type="button"].gform_previous_button:hover {
	background: var( --very-light-blue );
	color: var( --blue );
}

/* Lists */

.gfield_list {
	display: table;
	width: 100%;
	margin: 1rem 0;
}
.gfield_list_header {
	display: table-header-group;
}
.gfield_header_item {
	display: table-cell;
	line-height: 1.2;
	padding-bottom: 0.5rem;
	font-size: 80%;
}
.gfield_list_groups {
	display: table-row-group;
}
.gfield_list_group {
	display: table-row;
}
.gfield_list_cell {
	display: table-cell;
	padding-right: 0.5rem;
	padding-bottom: 0.5rem;
}
.gfield_list_cell:nth-last-child(2) {
	padding-right: 0;
}
.gfield_list_cell input[type="text"] {
	margin-bottom: 0;
}
.gfield_list_icons {
	display: flex;
	align-items: stretch;
	width: 6em;
	height: 2.4em;
	position: relative;
	top: -0.1em;
	padding-left: 0.5rem;
}
.gfield_list_icons button {
	font-size: 70%;
	border-radius: 5px;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0;
	margin-bottom: 0;
}
.gfield--type-honeypot {
	display: none;
}

/* Inputs */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="file"],
textarea,
select {
	font-family: 'Museo Sans', Helvetica, Arial, sans-serif;
	font-size: 100%;
	color: black;
	padding: 0.4em 0.6em;
	line-height: 1.6;
	margin-bottom: 0.2em;
	border: none;
	background-color: white;
	border: 2px solid var( --blue );
	border-radius: 5px;
	outline: none;
	width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
textarea.small {
	height: 5em;
}
select {
	background-image: url(//hbc.org.uk/wp-content/themes/hbc/images/chevron.svg);
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	background-size: 1em;
	padding-right: 2em;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="file"]:hover,
textarea:hover,
select:hover {
	background-color: var( --very-light-blue );
}
select:hover {
	cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
	outline: none;
	box-shadow: 0 0 0 4px gold;
	border-color: var( --blue );
	background-color: var( --very-light-blue );
}
input[type="file"] {
	display: block;
}
input[type="checkbox"] {
	appearance: none;
	border: 2px solid var( --blue );
	background: white;
	width: 1em;
	height: 1em;
	display: inline-block;
	position: relative;
	top: -0.1em;
	vertical-align: middle;
	border-radius: 5px;
	margin: 0;
	margin-right: 0.3em;
}
input[type="checkbox"]:checked {
	border-color: var( --blue );
}
input[type="checkbox"]:checked::before {
	content: '';
	color: var( --blue );
	position: absolute;
	top: calc( 50% - 0.45em );
	left: calc( 50% - 0.2em );
	font-weight: 700;
	font-size: 80%;
	width: 0.25em;
	height: 0.6em;
	border-bottom: 0.15em solid var( --blue );
	border-right: 0.15em solid var( --blue );
	transform: rotate( 45deg ) skew( 10deg );
}
input[type="radio"] {
	appearance: none;
	border: 2px solid var( --blue );
	background: white;
	width: 1.5rem;
	height: 1.5rem;
	display: inline-block;
	position: relative;
	top: -0.1em;
	vertical-align: middle;
	border-radius: 50%;
	margin: 0;
	margin-right: 0.3em;
}
input[type="radio"]:checked {
	background: var( --blue );
	border-color: var( --blue );
	box-shadow: inset 0 0 0 0.3rem white, 0 0 5px var( --very-light-blue );
}
input[type="radio"]:hover,
input[type="checkbox"]:hover,
input[type="radio"] + label:hover,
input[type="checkbox"] + label:hover {
	cursor: pointer;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	padding: 0.4em 0.2em;
	font-weight: 500;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
	font-weight: 700;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	box-shadow: 0 0 0 4px gold;
}
input[type="radio"]:checked:focus {
	box-shadow: 0 0 0 4px gold, inset 0 0 0 0.3rem white;
}
input[value="gf_other_choice"]:not(:checked) + label + br + input {
	display: none;
}
.gchoice_other_control {
	margin-top: 0.5em;
}

/* Date pickers */

.screen-reader-text {
	display: none;
}
.ui-datepicker {
	background: white;
	border: 2px solid var( --blue );
	border-radius: 5px;
	text-align: center;
	box-shadow: 0 0 10px rgba( 0, 0, 0, 0.2 );
	max-width: 90%;
}
.ui-datepicker-calendar {
	margin-bottom: 0;
	border: 0;
}
.ui-datepicker table {
	width: 100%;
}
.ui-datepicker tr:last-child td:first-child {
	border-bottom-left-radius: 5px;
}
.ui-datepicker tr:last-child td:last-child {
	border-bottom-right-radius: 5px;
}
.ui-datepicker th {
	text-align: center;
	font-size: 80%;
}
.ui-datepicker th span {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ui-datepicker td {
	padding: 0;
	border: none;
}
.ui-datepicker td a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.3em 0.6em;
	text-decoration: none;
	text-align: center;
	border: 0;
	font-size: 97%;
	color: var( --blue );
	border-radius: 5px;
}
.ui-datepicker td span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.3em 0.6em;
}
.ui-datepicker td.ui-state-disabled {
	text-align: center;
	opacity: 0.2;
}
.ui-datepicker td a.ui-state-active {
	background: rgb( 9, 124, 186 );
	color: white;
}
.ui-datepicker td a:hover {
	background: rgba( 9, 124, 186, 0.4 );
}
.ui-datepicker td a:focus,
.ui-datepicker td a:active {
	box-shadow: inset 0 0 0 2px gold;
}
.ui-datepicker-prev {
	float: left;
	padding: 0.4em 0.6em;
	margin: 0.1em;
	border: 0;
	border-radius: 5px;
	color: rgb( 9, 124, 186 );
}
.ui-datepicker-prev:hover {
	cursor: pointer;
	background: rgba( 9, 124, 186, 0.4 );
	border: 0;
}
.ui-datepicker-prev::before {
	content: '\f060';
	font: var( --fa-font-regular );
}
.ui-datepicker-next {
	float: right;
	padding: 0.4em 0.6em;
	margin: 0.1em;
	border: 0;
	border-radius: 5px;
	color: rgb( 9, 124, 186 );
}
.ui-datepicker-next:hover {
	cursor: pointer;
	background: rgba( 9, 124, 186, 0.4 );
	border: 0;
}
.ui-datepicker-next::after {
	content: '\f061';
	font: var( --fa-font-regular );
}
.ui-datepicker-prev span,
.ui-datepicker-next span {
	display: none;
}
.ui-datepicker-title {
	padding: 0.1em;
	display: flex;
	justify-content: center;
}
.ui-datepicker select {
	width: auto;
	border: 0;
	padding-left: 0.5em;
	padding-right: 2em;
	margin-top: 0.2em;
	font-size: 90%;
	box-shadow: none;
}

/* Progress bar / steps */

.gf_progressbar_title {
	font-size: 80%;
	margin-bottom: 0.5em;
}
.gf_progressbar {
	background: var( --very-light-blue );
	border-radius: 5px;
	margin-bottom: 1.5em;
}
.gf_progressbar_percentage {
	background: var( --blue );
	border-radius: 5px;
	color: white;
	font-size: 80%;
	padding: 0.3em 0.5em;
}
.gf_page_steps {
	display: flex;
	justify-content: space-between;
	background: rgba( 9, 124, 186, 0.1 );
	border-radius: 5px;
}
.gf_step {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.2em 0.6em;
	text-align: center;
	width: 100%;
}
.gf_step.gf_step_active {
	background: rgb( 9, 124, 186 );
	color: white;
	font-weight: 700;
}
.gf_step.gf_step_active:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.gf_step_number {
	background: white;
	padding: 0 0.6em;
	margin-right: 0.5em;
	border-radius: 5px;
	font-size: 90%;
	font-weight: 700;
	color: rgb( 9, 124, 186 );
}
.gf_step_completed .gf_step_number::after {
	content: '\f00c';
	font: var( --fa-font-regular );
	margin-left: 0.3em;
}
.gf_step_label {
	display: none;
	font-size: 80%;
}
.gf_page_steps a {
	border-bottom: none;
}
.gf_page_steps a[href^="#"]:not([href$="#"])::after {
	content: '';
}

/* Links */

a,
a:active {
	font-weight: 500;
	color: var( --blue );
	text-decoration: none;
	border-bottom: 0.1em solid var( --light-blue );
}
a:focus,
a:hover {
	text-decoration: none;
	border-color: var( --blue );
}
h1 a,
h2 a,
h3 a {
	color: inherit;
	font-weight: 500;
}

h1 a:hover,
h2 a:hover,
h3 a:hover {
	text-decoration: none;
	font-weight: 500;
}
h1 a:active,
h2 a:active,
h3 a:active {
	font-weight: 500;
	text-decoration: none;
}

a.button,
input[type="submit"],
input[type="button"] {
	display: inline-block;
	background: var( --blue );
	color: white;
	font-family: 'Museo Sans', Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1.125em;
	padding: 0.6em 1em;
	margin: 0 10px 10px 0;
	border: 2px solid white;
	border-radius: 50px;
}
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	border-color: var( --blue );
	color: white;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}
a.button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
	box-shadow: 0 0 0 4px gold;
}
a.button:active,
input[type="submit"]:active,
input[type="button"]:active {
	position: relative;
	top: 1px;
	left: 1px;
	text-decoration: none;
}
a.light-button {
	background: #eef7fc;
	border: 2px solid var( --light-blue );
	color: var( --blue );
}
a.light-button:focus,
a.light-button:active {
	color: var( --blue );
}
a.go-to-section-button {
	margin: 1em 0 0.5em;
	display: none;
}

.wp-block-buttons .wp-block-button {
	margin-bottom: 1.5em;
	font-size: 100%;
}
.wp-block-button__link {
	padding: 0.4em 1.2em;
	color: white;
	background: var( --blue );
	border: 4px solid var( --light-blue );
}
.is-style-outline>.wp-block-button__link:not(.has-text-color),
.wp-block-button__link.is-style-outline:not(.has-text-color) {
	color: var( --blue );
}
.wp-block-buttons .wp-block-button__link:hover {
	border-color: var( --blue );
}
.wp-block-buttons .wp-block-button__link:focus,
.wp-block-buttons .wp-block-button__link:active {
	color: white;
	border: 4px solid var( --light-blue );
	box-shadow: 0 0 0 4px gold;
}
.wp-block-file:not(.wp-element-button) {
	font-size: 100%;
}
.wp-block-file .wp-block-file__button {
	color: white;
	background: var( --blue );
	padding: 0.4em 0.8em;
}

.wp-block-group.has-background {
	padding: 1.5rem;
	margin-bottom: 2.5rem;
	box-sizing: border-box;
	border-radius: 5px;
}
.wp-block-group.has-background :last-child {
	margin-bottom: 0;
}

/* Alignment */

.alignleft {
	clear: left;
	display: inline;
	float: left;
	margin: 6px 20px 20px 0;
}
.alignright {
	clear: right;
	display: inline;
	float: right;
	margin: 6px 0 20px 20px;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Clearing and spacing */

.clear {
	clear: both;
}

/* Icons */

.icon-before {
	margin: 0;
}
.phone-number:before {
	content: "\f525";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 26px/0.8 'dashicons';
	position: relative;
	top: 6px;
	color: var( --blue );
	margin-right: 9px;
}
.email-address:before {
	content: "\f466";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 26px/0.8 'dashicons';
	position: relative;
	top: 7px;
	color: var( --blue );
	margin-right: 10px;
}

/* Audio player */
 
/* change the color of the background */
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
    background: url() !important;
    background-color: var( --blue ) !important;
    border-radius: 4px;
}
/* change the color of the lettering */
.mejs-currenttime,
.mejs-duration {
    color: black !important;
}
/* eliminate the yellow border around the play button during playback */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}
/* change the color of the progress bar */
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: #AAC7E3 !important;
}
/* change the color of the current time bar */
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #00a !important;
} 
/* change the color of the file loading bar */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: white !important;
}

/* Header */

.site-header {
	background: var( --blue ) url(//hbc.org.uk/wp-content/themes/hbc/images/header-brighter.png) top center no-repeat;
	background-size: 1600px 183px;
	width: 94%;
	padding: 32px 3% 0;
	text-align: center;
}
.site-header-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
.site-header-logo {
	width: 130px;
	height: auto;
}
.site-header-logo-link,
.site-header-logo-link:hover {
	border: none;
}

/* Social icons */

.social-icons {
	position: absolute;
	bottom: 30px;
	left: 0;
}
.social-icons span {
	width: 42px;
}
.social-icons span::before {
	font-size: 36px;
	color: rgba( 255, 255, 255, 0.5 );
}
.social-icons span:hover::before {
	color: white;
}
.social-icons img {
	height: 32px;
	width: auto;
	margin-right: 5px;
	opacity: 0.5;
}
.social-icons img:hover {
	opacity: 1;
}
.social-icons a {
	border: none;
}
.social-icons a:hover {
	text-decoration: none;
	border: none;
}
.social-icons img.facebook-icon {
	margin-right: 10px;
}
.site-header .facebook-icon-blue,
.site-header .twitter-icon-blue,
.site-header .vimeo-icon-blue {
	display: none;
}
.facebook-button {
	color: #3c599b;
	border: none;
}
.facebook-button:hover {
	text-decoration: none;
	border: none;
}
.twitter-button {
	color: #55acee;
	border: none;
}
.twitter-button:hover {
	text-decoration: none;
	border: none;
}
.facebook-button:before {
	content: "\f304";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 28px/1 'dashicons';
	vertical-align: top;
	margin-right: 7px;
	margin-bottom: 5px;
	position: relative;
	top: 1px;
}
.twitter-button:before {
	content: "\f301";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 28px/1 'dashicons';
	vertical-align: top;
	margin-right: 7px;
	margin-bottom: 5px;
	position: relative;
	top: 1px;
}

/* Search box */

.search-box {
	position: absolute;
	bottom: 30px;
	right: 0;
}
.search-form {
	background: var( --blue );
	border: 2px solid white;
	border-radius: 5px;
}
#s {
	width: 98%;
	border: none;
	background: transparent;
	border-radius: 3px;
	color: white;
	font-size: 18px;
	margin: 0 -45px 0 0;
	padding: 10px 0 10px 10px;
	display: inline-block;
	vertical-align: top;
}
#s::-webkit-input-placeholder {
	color: var( --light-blue );
}
#s::-moz-input-placeholder {
	color: var( --light-blue );
}
#s:-ms-input-placeholder {  
	color: var( --light-blue );  
}
.searchsubmit {
	width: 20px;
	height: 20px;
	padding: 10px;
	background: none;
	display: inline-block;
	vertical-align: top;
}
.searchsubmit:hover {
	background: rgba( 255, 255, 255, 0.2 );
}
.blue-search-button {
	display: none !important;
}

iframe {
	max-width: 100%;
	margin-bottom: 1em;
	border-radius: 0.3em;
}

/* Menu */

.main-menu {
	display: block;
	width: 100%;
	margin: 10px auto;
	position: relative;
}
.menu-icon {
	display: none;
	float: left;
	opacity: 0.5;
	padding: 12px 0;
}
.menu-icon:hover {
	cursor: pointer;
	opacity: 1;
}
.menu-button {
	display: none;
}

/* Top level */
.main-menu ul {
	width: 100%;
	list-style: none;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
.main-menu li {
	display: inline-block;
}
.main-menu li a {
	font-weight: 500;
	font-size: 1.8vw;
	padding: 0.2em 0.8em;
	display: block;
	border: 2px solid transparent;
}
.main-menu li a:hover,
.main-menu li a:active {
	text-decoration: none;
	background: var( --light-blue );
}

/* Second level */
.main-menu ul ul {
	position: absolute;
	left: 0;
	height: 2.1em;
	overflow: hidden;
	max-width: 100%;
	display: none;
	border-top: 2px solid var( --light-blue );
}
.main-menu .current_page_item ul,
.main-menu .current-page-item ul,
.main-menu .current_page_ancestor ul,
.main-menu .current-page-ancestor ul {
	display: block;
}
.main-menu ul ul li a {	
	font-size: 1.2vw;
	display: inline-block;
}
.main-menu ul ul li a:hover,
.main-menu ul ul li a:active {	
	background: var( --light-blue );
	text-decoration: none;
}
.main-menu ul ul li.current_page_item a,
.main-menu ul ul li.current-page-item a,
.main-menu ul ul li.current_page_ancestor a,
.main-menu ul ul li.current-page-ancestor a {
	background: var( --light-blue );
}

/* No more levels */
.main-menu ul ul ul {
	display: none !important;
}
.main-menu .current-page-item > a,
.main-menu .current-page-ancestor > a,
.main-menu .current_page_item > a,
.main-menu .current_page_ancestor > a,
.main-menu .current-page-item > a:hover,
.main-menu .current-page-ancestor > a:hover,
.main-menu .current_page_item > a:hover,
.main-menu .current_page_ancestor > a:hover {
	background: #d2e9f6;
}

/* Breadcrumbs (small screens only) */

ul.breadcrumbs {
	display: none;
	list-style-type: none;
	margin: 5px 3% 10px;
}
ul.breadcrumbs li {
	display: inline-block;
}
ul.breadcrumbs li:before {
	content: '> ';
	color: #999;
}
ul.breadcrumbs li:first-child:before {
	content: '';
}
ul.breadcrumbs li a {
	padding: 4px 0;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
ul.breadcrumbs li:first-child a {
	padding-left: 0;
}
ul.breadcrumbs li a:hover {
	color: #666;
	text-decoration: underline;
}

/* Featured image / video */

.featured-image {
	height: 600px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var( --light-blue );
}
.featured-video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
}

/* Content */

.main {
	width: 100%;
	position: relative;
}
.container {
	position: relative;
	margin: 4em auto 2em;
	width: 94%;
	max-width: 1200px;
	overflow: hidden;
}
.home .container {
	max-width: 100%;
}
.content {
	padding: 0 4px;
	box-sizing: border-box;
}

/* Parent links */

.parent-link {
	display: inline-block;
	position: relative;
}
.parent-link::before {
	content: '\f060';
	font-family: 'Font Awesome 6 Pro';
	margin-right: 0.5em;
	display: inline-block;
}
.after-content-parent-link {
	margin-top: 2em;
}
.before-content-parent-link {
	position: absolute;
	top: calc( 600px + 4.2em );
	left: 50px;
}

/* Widget areas */

.widget-area {
	width: 96%;
	padding: 20px 2%;
}
.blue-widget-area {
	background: #d2e9f6;
	border-bottom: 1px solid white;	
}
.widget-area-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.widget-area-inner .widget:last-child {
	margin-right: 0;
}

/* Widgets */

.widget {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin: 0 30px 30px 0;
}
.widget.hbc-featured-pages-widget:first-child,
.green-widget-area .widget.hbc-featured-pages-widget {
	max-width: 100%;
	margin-right: 0;
}

/* Concertina */
.concertina-contents {
	display: none;
	transition: display 500ms;
}
.concertina-open .concertina-contents {
	display: block;
	transition: display 500ms;
}
.concertina-open .go-to-section-button {
	display: inline-block;
}
.concertina h1 {
	margin-bottom: 0;
}
.concertina-open h1 {
	margin-bottom: 0.5em;
}
.concertina h1 a:after {
	content: "\f347";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font-family: 'dashicons';
	font-size: 20px;
	position: relative;
	top: 2px;
	margin-left: 5px;
	opacity: 0.5;
}
.concertina-open h1 a:after {
	content: "\f343";
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font-family: 'dashicons';
	font-size: 20px;
	position: relative;
	top: 2px;
	margin-left: 5px;
	opacity: 0.5;
}

/* Right column widgets */

.secondary.widget-area h2,
.secondary.widget-area h2 a {
	color: var( --blue );
}
.secondary.widget-area ul {
	margin-left: 0;
	list-style-type: none;
	color: #999;
}
.subpage-menu a {
	font-weight: 500;
}
.subpage-menu li.current {
	font-weight: 500;
}
.subpage-menu ul {
	margin-bottom: 5px;
	padding-left: 20px;
}
.subpage-menu ul li {
	font-size: 15px;
}

/* Item boxes */
.item-box-container {
	display: grid;
	grid-template-columns: repeat( 2, calc( 50% - 0.8rem ) );
	grid-gap: 1.6rem;
}
.home .item-box-container {
	grid-template-columns: repeat( 3, calc( 33.333333% - 1.6rem ) );
	grid-gap: 2.4rem;
}
.item-box {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 16px;
	transition: all 500ms;
	text-align: center;
	padding-bottom: 0.5em;
}
.item-box:hover {
	background: var( --light-blue );
	transition: all 200ms;
}
.whole-clickable:hover {
	cursor: pointer;
}
.whole-clickable:focus,
.whole-clickable:active {
	box-shadow: 0 0 4px 4px gold;
}
.item-box-image {
	width: 100%;
	height: auto;
	display: block;
	background: var( --light-blue );
	border-radius: 14px;
}
.item-box-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}
.item-box .page-icon-container {
	width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --blue );
	border-radius: 16px;
}
.item-box .page-icon {
	font-size: 750%;
	color: var( --light-blue );
}
.item-box-image .no-image {
	border: 1px solid #ccc;
	width: 98px;
	height: 98px;
	max-width: 100%;
	max-height: 100%;
}
.item-box-content {
	margin-top: 0.5em;
}
.item-box p {
	margin: 0;
}
.item-box p.small {
	font-size: 14px;
}
.item-box h3 {
	font-size: 160%;
	clear: none;
	margin-bottom: 0;
}

/* Figures, including images and embeds */

figure {
	margin: 1em 0;
}
figure img {
	border-radius: 0.3em;
}

/* Post categories */

.post-cats a {
	display: inline-block;
	position: relative;
	top: -4px;
	background: #edfde6;
	padding: 2px 5px 1px;
	border-radius: 3px;
	color: #34920e;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #91f16a;
}
.post-cats a:hover {
	background: white;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}
.single .post-cats a {
	font-size: 17px;
	padding: 5px 8px;
	margin-bottom: 10px;
}

/* Meta */

.meta {
	color: #999;
	font-size: 14px;
}

/* Resource icons */

.resource-icon {
	float: left;
	width: 48px;
	height: auto;
	margin-right: 10px;
	position: relative;
	top: 2px;
}
.entry-title {
	overflow: visible;
}
.entry-title .resource-icon {
	position: relative;
	top: -3px;
}
.media-title {
	display: inline-block;
	padding-top: 10px;
}

/* Next and prev links */
.next-prev-links {
	padding: 20px 0;
}
header {
	position: relative;
}
header .next-prev-links {
	position: absolute;
	top: 0;
	right: 0;
}

/* Thumbnail images */

.attachment-thumbnail {
	border-radius: 10px;
}

/* Contact form */

.two-col {
	display: inline-block;
	width: 48%;
}

/* Footer */

.site-footer {
	width: 96%;
	padding: 20px 2%;
	margin-top: 60px;
	border-top: 4px solid var( --light-blue );
	font-size: 90%;
	text-align: center;
	clear: both;
}
.home .site-footer {
	margin-top: 0;
	border-top: none;
}
    
/* Responsive structure */

/* For all but mobile */

@media screen and (min-width: 576px) {

	/* Forms */

	.gfield--width-half,
	.gfield--width-third,
	.gfield--width-quarter {
		display: inline-block;
		vertical-align: top;
		margin-right: 0.6rem;
		margin-top: 0;
	}
	.gfield--width-half {
		width: calc( 50% - 0.6rem );
	}
	.gfield--width-half.gfield_error {
		width: calc( 48% - 1.2em );
	}
	.gfield--width-third {
		width: calc( 33.33333% - 0.4rem );
	}
	.gfield--width-quarter {
		width: calc( 25% - 0.45rem );
	}

	
}
    
/* For very large screens */
@media screen and (min-width: 1440px) {

	.home .item-box-container {
		grid-template-columns: repeat( 4, calc( 25% - 1.2rem ) );
		grid-gap: 1.6rem;
	}
	.main-menu li a {
		font-size: 100%;
	}
	.main-menu ul ul li a {
		font-size: 90%;
	}

}

@media screen and (max-width: 1023px) {
	/* As we enter portrait tablet domain, we go to a two-column view */
	.item-box-container {
		grid-template-columns: calc( 50% - 0.4rem ) calc( 50% - 0.4rem );
		grid-gap: 0.8rem;
	}
	.item-box {
		padding: 5px;
	}
	.item-box p {
		font-size: 75%;
	}
	/* We drop the menu size further again to fit */
	
	/* Also stop the item box container giving extra margin space */
	.item-box-container {
		margin: 0;
	}
	.home .item-box-container {
		grid-template-columns: repeat( 2, calc( 50% - 1rem ) );
		grid-gap: 2rem;
	}
	.item-box .page-icon {
		font-size: 600%;
	}

}
/* Below iPad we go to a smaller two-column view */
@media screen and (max-width: 767px) {

	body {
		font-size: 1.2em;
	}
	.container {
		margin: 1em auto;
	}
	.item-box-container {
		margin-right: 0;
	}
	.item-box,
	.widget {
		max-width: 100%;
		margin: 0 0 20px 0;
		transition: max-width 500ms;
		margin-right: 0;
	}
	.item-box p {
		font-size: 85%;
	}
	.item-box h3 {
		font-size: 125%;
	}
	iframe {
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		width: 50%;
	}
	ul.breadcrumbs {
		display: block;
	}
	.item-box:last-child,
	.widget:last-child {
		margin-bottom: 0;
	}
	.secondary.widget-area,
	.container .content {
		float: none;
		width: 100%;
		margin: 20px 0;
	}

	.menu-button {
		display: block;
		text-align: center;
		border: none;
		padding-top: 0.6em;
		padding-bottom: 0.6em;
	}
	.menu-button span {
		font-size: 80%;
		margin-left: 0.3em;
	}
	.far.close-menu {
		display: none;
	}
	.main-menu {
		display: none;
	}
	.main-menu li {
		display: block;
	}
	.main-menu li a {
		font-size: 100%;
	}
	.main-menu ul ul {
		position: relative;
		border-bottom: 2px solid var( --light-blue );
		height: auto;
	}
	.main-menu ul ul li a {
		display: block;
		font-size: 80%;
	}

}

@media screen and (max-width: 600px ) {
	
	.featured-image {
		height: 56.25vw;
		background-size: cover;
	}

	.item-box-container,
	.home .item-box-container {
		grid-template-columns: 100%;
		grid-gap: 0;
	}
	.item-box .page-icon {
		font-size: 400%;
	}
}

@media screen and (max-width: 480px) {

	.site-header {
		background-size: 800px 91px;
		background-color: white;
		padding-top: 15px;
	}
	.site-header-logo {
		width: 67px;
		height: auto;
		display: block;
		margin: 0 auto 20px;
	}
	.social-icons {
		display: none;
	}
	.facebook-icon-blue,
	.twitter-icon-blue,
	.vimeo-icon-blue {
		display: inline;
	}
	.facebook-icon-white,
	.twitter-icon-white,
	.vimeo-icon-white {
		display: none;
	}
	.search-box {
		position: relative;
		bottom: auto;
		right: auto;
		float: right;
		width: 100%;
		margin-bottom: 0.5em;
	}
	.search-form {
		border: 2px solid #a6ccde;
		background: white;
	}
	#s {
		color: var( --blue );
		background: none;
	}
	.white-search-button {
		display: none !important;
	}
	.blue-search-button {
		display: inline-block !important;
	}
	.home a.go-to-section-button {
		display: inline-block;
	}
	.widget-area {
		width: 92%;
		padding: 15px 4%;
	}
	iframe {
		float: none;
		width: 100%;
		margin-right: 0;
	}
	.alignright,
	.alignleft {
		max-width: 40%;
		height: auto;
	}
	.alignright img,
	.alignleft img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.home .content {
		margin: 0;
	}
	header .next-prev-links {
		float: none;
		margin-left: 0;
	}
	.item-box {
		border-radius: 16px;
	}

}

/* =Print
----------------------------------------------- */

@media print {
	body {
		background: none !important;
		font-size: 10pt;
	}
	.site-header-inner,
	.secondary,
	.parent-link,
	a.button,
	iframe {
		display: none;
	}
	.site-header-print {
		display: block;
	}
	.breadcrumbs a {
		padding: 0 30px 0 0;
		font-weight: 500;
		text-transform: uppercase;
		margin-bottom: 5px;
	}
}