﻿@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-Regular.eot");
	src: url("/css/webfonts/Nunito-Regular.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-Regular.woff2") format("woff2"),
		url("/css/webfonts/Nunito-Regular.woff") format("woff"),
		url("/css/webfonts/Nunito-Regular.ttf") format("truetype"),
		url("/css/webfonts/Nunito-Regular.svg#Nunito-Regular") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-Italic.eot");
	src: url("/css/webfonts/Nunito-Italic.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-Italic.woff2") format("woff2"),
		url("/css/webfonts/Nunito-Italic.woff") format("woff"),
		url("/css/webfonts/Nunito-Italic.ttf") format("truetype"),
		url("/css/webfonts/Nunito-Italic.svg#Nunito-Italic") format("svg");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-Medium.eot");
	src: url("/css/webfonts/Nunito-Medium.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-Medium.woff2") format("woff2"),
		url("/css/webfonts/Nunito-Medium.woff") format("woff"),
		url("/css/webfonts/Nunito-Medium.ttf") format("truetype"),
		url("/css/webfonts/Nunito-Medium.svg#Nunito-Medium") format("svg");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-MediumItalic.eot");
	src: url("/css/webfonts/Nunito-MediumItalic.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-MediumItalic.woff2") format("woff2"),
		url("/css/webfonts/Nunito-MediumItalic.woff") format("woff"),
		url("/css/webfonts/Nunito-MediumItalic.ttf") format("truetype"),
		url("/css/webfonts/Nunito-MediumItalic.svg#Nunito-MediumItalic") format("svg");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-SemiBold.eot");
	src: url("/css/webfonts/Nunito-SemiBold.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-SemiBold.woff2") format("woff2"),
		url("/css/webfonts/Nunito-SemiBold.woff") format("woff"),
		url("/css/webfonts/Nunito-SemiBold.ttf") format("truetype"),
		url("/css/webfonts/Nunito-SemiBold.svg#Nunito-SemiBold") format("svg");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-SemiBoldItalic.eot");
	src: url("/css/webfonts/Nunito-SemiBoldItalic.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-SemiBoldItalic.woff2") format("woff2"),
		url("/css/webfonts/Nunito-SemiBoldItalic.woff") format("woff"),
		url("/css/webfonts/Nunito-SemiBoldItalic.ttf") format("truetype"),
		url("/css/webfonts/Nunito-SemiBoldItalic.svg#Nunito-SemiBoldItalic") format("svg");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-Bold.eot");
	src: url("/css/webfonts/Nunito-Bold.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-Bold.woff2") format("woff2"),
		url("/css/webfonts/Nunito-Bold.woff") format("woff"),
		url("/css/webfonts/Nunito-Bold.ttf") format("truetype"),
		url("/css/webfonts/Nunito-Bold.svg#Nunito-Bold") format("svg");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: "Nunito";
	src: url("/css/webfonts/Nunito-BoldItalic.eot");
	src: url("/css/webfonts/Nunito-BoldItalic.eot?#iefix") format("embedded-opentype"),
		url("/css/webfonts/Nunito-BoldItalic.woff2") format("woff2"),
		url("/css/webfonts/Nunito-BoldItalic.woff") format("woff"),
		url("/css/webfonts/Nunito-BoldItalic.ttf") format("truetype"),
		url("/css/webfonts/Nunito-BoldItalic.svg#Nunito-BoldItalic") format("svg");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root
{
	--light-blue: #1d9add;
	--light-blue-rgb: 29,154,221;
	--light-blue-hover: #4aaee4; /* 80% of light blue */
	--light-blue-target: #77c2eb; /* 60% of light blue */
	--very-light-blue: #d2ebf8; /* 20% of light blue */
	--very-light-blue-hover: #a5d7f1; /* 40% of light blue */

	--dark-blue: #1c355e;

	--green: #7bc709;
	--green-hover: #95d23a;

	--dark-red: #721c24;
	--dark-red-rgb: 114,28,36;

	--font-colour:#212529;
	--light-grey: #cdd1dd;
	--light-grey-hover: #e2e6ea;
	--light-grey-background: var(--light-grey-hover);
	--dark-grey: #6c757d;
	--dark-grey-hover: #899197;

	--dark-grey-background: var(--bs-gray-700);

	--panel-grey-background: #f7f7f7;
}

html { font-size: 18px; color: var(--font-colour); font-family: Nunito, sans-serif; }
body { width: 100%; min-width: 320px; font-size: 18px; color: var(--font-colour); font-family: Nunito, sans-serif; }

/* general styles */
h1 { margin-bottom: 30px; color: var(--dark-blue); font-weight: bold; font-size: 60px; }
h2 { margin-top: 60px; margin-bottom: 30px; color: var(--dark-blue); font-weight: bold; font-size: 42px; }
h2.first { margin-top: 0px; }
h3 { margin-top: 45px; margin-bottom: 15px; color: var(--dark-blue); font-weight: bold; font-size: 24px; }
h3.first { margin-top: 0px; }
h4 { margin-top: 45px; margin-bottom: 15px; color: var(--dark-blue); font-weight: bold; font-size: 20px; }

img { vertical-align: bottom; }
img.loading-image { height: 32px; }
canvas { vertical-align: top; }
a { color: var(--light-blue); outline-color: var(--light-blue); transition: color 200ms, background-color 200ms; }
a:focus, a:hover { text-decoration: none; }
a img { border: none; }
a.edit-link { opacity: 0.1; transition: opacity 200ms; }
iframe { vertical-align: top; }

label { padding: 0px; }

.alert { padding: 11px 10px; min-height: 48px; border-radius: 24px; padding-left: 30px; padding-right: 30px; }
span.alert { display: block; }
.alert.margin-bottom-10 { margin-bottom: 10px; }

input[type="checkbox"], input[type="radio"] { cursor: pointer; }
.form-check { margin-bottom: 0px; padding-left: 25px; }
.form-check .form-check-input { margin-top: 2px; margin-left: -20px; margin-right: 0px; margin-top: 14px; margin-bottom: 14px; padding-right: 0px; font-size: 20px; }
.form-check-inline { margin-right: 25px; }
.form-check-label { padding-left: 10px; padding-top: 12px; padding-bottom: 12px; }
.form-check-label[for] { cursor: pointer; }
.form-check .form-check-input:checked { background-color: var(--light-blue); border-color: var(--light-blue); }
.form-check input[type="text"].form-check-input { width: 100%; margin-left: 10px; margin-top: 0px; margin-bottom: 0px; padding-right: 0.75rem; font-size: 1rem; }
.form-check::after { display: block; clear: both; content: ""; }

.form-group { margin-bottom: 20px; }
.form-group label { font-weight: bold; margin-bottom: 0px; }
.form-group label.form-check-label { font-weight: normal; margin-bottom: 0px; }
.form-group .alert { margin-top: 8px; margin-bottom: 0px; }
.form-group .alert + .form-text { margin-top: 20px; }

.form-group.buttons { margin-top: 20px; }
.form-group + .form-group.buttons { margin-top: 40px; }
.form-group.buttons.first { margin-top: 0px; }
.form-group.buttons .btn { margin-right: 20px; margin-bottom: 20px; }
.form-group.buttons .btn:last-child { margin-right: 0px; }
.form-group.buttons .btn + .alert { margin-top: 0px; }

.form-control { border-color: var(--bs-border-color); }
.form-control:focus { border-color: var(--light-blue); box-shadow: 0 0 0 .25rem rgba(var(--light-blue-rgb), .25); }
input.form-control, select.form-select, .form-control.readonly, textarea.form-control { height: auto; min-height: 48px; padding-top: 11px; padding-bottom: 11px; border-radius: 24px; padding-left: 25px; padding-right: 25px; }
input.form-control-sm, select.form-select-sm { height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }

.form-control.readonly { display: block; background-color: var(--light-grey-background); border: solid 1px var(--dark-grey); }

.has-error label { color: var(--dark-red); }
.has-error .form-control { border-color: var(--dark-red); }
.has-error .form-control:focus { border-color: var(--dark-red); box-shadow: 0 0 0 .2rem rgba(var(--dark-red-rgb),.25); }
.has-error .form-group label { color: var(--font-colour); }
.has-error .form-group .form-control { border-color: var(--bs-border-color); }
.has-error .form-group .form-control:focus { border-color: var(--light-blue); box-shadow: 0 0 0 .25rem rgba(var(--light-blue-rgb), .25); }

.form-text { font-size: 14px; color: var(--dark-grey); }

/* button styles */
.btn { padding: 8px 60px; min-height: 48px; font-size: 20px; font-weight: 600; }
.btn-sm { padding: 4px 15px; min-height: 32px; font-size: 14px; font-weight: 500; }
.btn-primary
{
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-disabled-bg: var(--green-hover);
    --bs-btn-disabled-border-color: var(--green-hover);
    --bs-btn-hover-bg: var(--green-hover);
    --bs-btn-hover-border-color: var(--green-hover);
    --bs-btn-active-bg: var(--green-hover);
    --bs-btn-active-border-color: var(--green-hover);
	--bs-btn-border-radius: 24px;
	--bs-btn-disabled-opacity: 1;
}
.btn-secondary
{
	--bs-btn-color: var(--dark-blue);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--dark-blue);
	--bs-btn-disabled-color: var(--dark-blue);
    --bs-btn-disabled-bg: var(--very-light-blue);
    --bs-btn-disabled-border-color: var(--dark-blue);
	--bs-btn-hover-color: var(--dark-blue);
    --bs-btn-hover-bg: var(--very-light-blue);
    --bs-btn-hover-border-color: var(--dark-blue);
	--bs-btn-active-color: var(--dark-blue);
    --bs-btn-active-bg: var(--very-light-blue);
    --bs-btn-active-border-color: var(--dark-blue);
	--bs-btn-disabled-opacity: 1;
}
.btn-outline-secondary
{
	--bs-btn-color: var(--dark-blue);
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: var(--dark-blue);
	--bs-btn-disabled-color: var(--dark-blue);
    --bs-btn-disabled-bg: var(--very-light-blue);
    --bs-btn-disabled-border-color: var(--dark-blue);
	--bs-btn-hover-color: var(--dark-blue);
    --bs-btn-hover-bg: var(--very-light-blue);
    --bs-btn-hover-border-color: var(--dark-blue);
	--bs-btn-active-color: var(--dark-blue);
    --bs-btn-active-bg: var(--very-light-blue);
    --bs-btn-active-border-color: var(--dark-blue);
}

.btn.loading img { height: 32px; vertical-align: top; }

/* modal styles */
.modal {  --bs-modal-margin: 15px; }
body.modal-open { width: 100%; }
.modal-content .btn-close { position: absolute; top: -15px; right: -5px; background: none; opacity: 1; z-index: 1; }
.modal-body { padding: 0px; border-radius: var(--bs-border-radius); overflow: hidden; }
.modal-body img.loading-image { vertical-align: top; margin-top: 20px; margin-left: 20px; }
.modal-backdrop.show { background-color: black; opacity: 0.75; }
div.dialog-body { padding: 20px; }
iframe.dialog-iframe { width: 100%; height: 0px; }
@media (min-width: 576px)
{
	.modal { --bs-modal-width: 540px; }
}
@media (min-width: 768px)
{
	.modal { --bs-modal-width: 720px; }
}
@media (min-width: 992px)
{
	.modal { --bs-modal-width: 960px; }
}
@media (min-width: 1200px)
{
	.modal { --bs-modal-width: 1140px; }
}

/* page loading overlay styles */
div.page-loading-overlay-backdrop { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 99999998; background-color: #ffffff; opacity: 1; transition: opacity 200ms; }
div.page-loading-overlay { position: fixed; top: 40%; left: 50%; width: 200px; margin-left: -100px; margin-top: -30px; padding-top: 20px; padding-bottom: 20px; text-align: center; background-color: #ffffff; z-index: 99999999; border: 2px solid var(--light-blue); border-radius: 20px; opacity: 1; transition: opacity 200ms; }
div.page-loading-overlay-backdrop.fade-out { opacity: 0; }
div.page-loading-overlay.fade-out { opacity: 0; }

/* admin frontend header styles */
.admin-frontend-header { padding-top: 0px; padding-bottom: 0px; color: #ffffff; text-align: center; }
.admin-frontend-header .container a { color: #ffffff; display: inline-block; padding: 5px 20px; text-decoration: none; }
.admin-frontend-header .container a:focus, .admin-frontend-header .container a:hover { color: var(--light-blue); }
@media (min-width: 350px)
{
	.admin-frontend-header .container a { padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 768px)
{
	.admin-frontend-header { text-align: right; }
	.admin-frontend-header .container a { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 992px)
{
	.admin-frontend-header .container a { padding-left: 30px; padding-right: 30px; }
}
.admin-frontend-header .alert { margin: 0px; border-radius: 0px; text-align: center; }

/* header styles */
div.header { padding-top: 5px; padding-bottom: 5px; background-color: var(--dark-blue); }
div.header .navbar-brand img { max-height: 60px; }

/* navigation menu styles */
.navbar { padding: 0px; }
.navbar-nav { padding-bottom: 20px; }
.nav-link { text-align: center; font-size: 20px; font-weight: 500; }
.navbar-expand-md .navbar-nav .nav-link { padding-left: 20px; padding-right: 20px; color: #ffffff; padding-top: 30px; padding-bottom: 10px; }
.navbar-expand-md .navbar-nav .nav-link:focus, .navbar-expand-md .navbar-nav .nav-link:hover  { color: var(--green); }
@media (min-width: 992px)
{
	.navbar-nav { padding-bottom: 0px; }
	.navbar-expand-md .navbar-nav .nav-link { padding-left: 30px; padding-right: 30px; padding-top: 20px; padding-bottom: 20px; }
}

.navbar .dropdown-toggle::after { display: none; }

.navbar .dropdown-menu { padding-top: 0px; padding-bottom: 0px; overflow: hidden; background-color: transparent; border: none; }
.navbar .dropdown-menu .dropdown-item { text-align: center; padding-top: 2px; padding-bottom: 2px; color: #ffffff; font-size: 14px; }
.navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover { color: var(--green); background-color: transparent; }
@media (min-width: 768px)
{
	.navbar .dropdown-menu { background-color: var(--light-blue); border: 1px solid var(--dark-grey); filter: drop-shadow(0 0 2px var(--dark-blue)); border: none; }
	.navbar .dropdown-menu .dropdown-item { padding-top: 10px; padding-bottom: 10px; font-size: 18px; text-align: left; }
	.navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover { background-color: var(--light-blue-hover); color: #ffffff; }
}

/* container styles */
.container { padding-left: 20px; padding-right: 20px; }
div.content-container { margin-bottom: 90px; }
div.general-content-container { margin-top: 45px; }
div.content-html { margin-bottom: 45px; }
div.blue-section { background-color: var(--dark-blue); color: var(--light-grey); }
div.blue-section h1, div.blue-section h2, div.blue-section h3, div.blue-section h4 { color: #ffffff; }

/* datepicker styles */
div.ui-datepicker { z-index: 2; }

/* more information styles */
div.more-information { background-image: url("/images/more-information-background.png"); background-size: cover; padding-top: 90px; padding-bottom: 90px; text-align: center; color: #ffffff; }
div.more-information h2 { color: var(--light-blue-hover); }
div.more-information p { font-size: 20px; font-weight: bold; margin-bottom: 40px; }
div.more-information .form-group.buttons { margin: 0px; }
div.more-information .form-group.buttons .btn { width: 100%; }

/* acknowledgements styles */
div.acknowledgements { padding-top: 60px; padding-bottom: 60px; text-align: center; font-size: 16px; }
div.acknowledgements div.flags { padding-bottom: 15px; }
div.acknowledgements div.flags img { max-height: 45px; margin-left: 5px; margin-right: 5px; margin-bottom: 15px; }
@media (min-width: 400px)
{
	div.acknowledgements div.flags img { max-height: 50px; margin-left: 10px; margin-right: 10px; margin-bottom: 20px; }
}
@media (min-width: 500px)
{
	div.acknowledgements div.flags img { margin-left: 15px; margin-right: 15px; margin-bottom: 30px; }
}

/* footer styles */
div.footer { background-color: var(--dark-blue); padding-top: 30px; padding-bottom: 30px; color: var(--light-grey); }
div.footer div.column { padding-bottom: 30px; }
div.footer a.logo img { max-height: 60px; }
div.footer .copyright { font-size: 14px; padding-top: 30px; }
div.footer a.menu-item { display: block; text-decoration: none; color: var(--light-grey); }
div.footer a.menu-item:focus, div.footer a.menu-item:hover { color: #ffffff; }
div.footer a.sub-menu-item { font-size: 14px; }

/* banner styles */
div.banners { background-color: var(--dark-blue); }
div.banners div.banner { background-image: url("/images/banner-heading-background.jpg"); background-size: cover; background-position: center top; padding-top: 45px; padding-bottom: 15px; color: #ffffff; display: none; }
div.banners div.banner:first-child { display: block; }
div.banners.home div.banner { background-image: url("/images/banner-home-background-1.jpg"); padding-top: 90px; padding-bottom: 90px; }
@media (min-width: 576px)
{
	div.banners div.banner { padding-top: 75px; }
	div.banners.home div.banner { padding-top: 120px; padding-bottom: 120px; }
}
@media (min-width: 768px)
{
	div.banners div.banner { padding-top: 105px; }
	div.banners.home div.banner { padding-top: 150px; padding-bottom: 150px; }
}
@media (min-width: 992px)
{
	div.banners div.banner { padding-top: 135px; }
	div.banners.home div.banner { padding-top: 180px; padding-bottom: 180px; }
	div.banners.home div.banner h1 { font-size: 70px; }
}
@media (min-width: 1200px)
{
	div.banners div.banner { padding-top: 150px; }
	div.banners.home div.banner { padding-top: 210px; padding-bottom: 210px; }
	div.banners.home div.banner h1 { font-size: 80px; }
}
@media (min-width: 1400px)
{
	div.banners div.banner { padding-top: 165px; }
	div.banners.home div.banner { padding-top: 240px; padding-bottom: 240px; }
	div.banners.home div.banner h1 { font-size: 90px; }
}
div.banners div.banner h1 { color: #ffffff; filter: drop-shadow(0 0 2px var(--dark-blue)); }
div.banners .btn { filter: drop-shadow(0 0 2px var(--light-grey)); }

div.banners.multiple { position: relative; overflow: hidden; }
div.banners.multiple .banner { position: absolute; left: 0; right: 0; top: 0; }

div.latest-news.home h2, div.event-calendar.home h2 { text-align: center; }
@media (min-width: 992px)
{
	div.latest-news.home h2, div.event-calendar.home h2 { text-align: left; }
}
div.latest-news.home h2 a, div.event-calendar.home h2 a { color: var(--dark-blue); text-decoration: none; }
div.latest-news.home h2 a:focus, div.latest-news.home h2 a:hover, div.event-calendar.home h2 a:focus, div.event-calendar.home h2 a:hover { color: var(--light-blue); }

/* news articles styles */
div.news-articles { margin-bottom: 60px; }
div.news-article { margin-bottom: 30px; }
div.news-article a.thumbnail { display: block; width: 200px; background-color: var(--dark-blue); color: #ffffff; text-align: center; padding-bottom: 6px; border-radius: 20px; overflow: hidden; text-decoration: none; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
div.news-article a.thumbnail img { width: 100%; margin-bottom: 6px; }
div.news-article a.thumbnail:focus, div.news-article a.thumbnail:hover { color: var(--green); }
div.news-article a.thumbnail.no-image { height: 20px; line-height: 20px; vertical-align: middle; }
@media (min-width: 576px)
{
	div.news-article a.thumbnail.no-image { height: 120px; line-height: 120px; }
}
div.news-article a.thumbnail.has-image.default-image img { background-color: #ffffff; padding: 24px; }
div.news-article h3 { margin-top: 0px; margin-bottom: 0px; }
div.news-article h3 a { text-decoration: none; }
div.news-article h3 a:focus, div.news-article h3 a:hover { color: var(--dark-blue); }
div.news-article div.content { font-size: 16px; margin-top: 5px; }
div.news-articles div.content { max-height: 96px; overflow: hidden; }
div.news-article a.read-more { text-decoration: none; font-size: 16px; }
div.news-article a.read-more:focus, div.news-article a.read-more:hover { color: var(--dark-blue); }
div.news-article div.images::after { display: block; clear: both; content: ""; }
div.news-article div.images a.image { margin-right: 10px; margin-bottom: 10px; float: left; }
div.news-article div.images img { max-height: 120px; }
@media (min-width: 576px)
{
	div.news-article div.images img { max-height: 150px; }
}
@media (min-width: 768px)
{
	div.news-article div.images img { max-height: 180px; }
}
@media (min-width: 992px)
{
	div.news-article div.images img { max-height: 205px; }
}

div.news-article-details { margin-bottom: 60px; }
div.news-article-details div.content { margin-top: 45px; margin-bottom: 60px; }
div.news-article-details div.content h2 { margin-top: 45px; }

div.news-article:hover a.edit-link { opacity: 1; }
div.news-articles a.edit-link { float: right; }
div.news-article-details a.edit-link { float: right; clear: right; }

/* events styles */
div.events { margin-bottom: 60px; }
div.event { margin-bottom: 30px; }
div.event a.thumbnail { display: block; width: 200px; background-color: var(--dark-blue); color: #ffffff; text-align: center; padding-bottom: 6px; border-radius: 20px; overflow: hidden; text-decoration: none; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
div.event a.thumbnail img { width: 100%; margin-bottom: 6px; }
div.event a.thumbnail:focus, div.event a.thumbnail:hover { color: var(--green); }
div.event a.thumbnail span { display: inline-block; }
div.event a.thumbnail.no-image { padding-top: 2px; padding-bottom: 2px; }
@media (min-width: 576px)
{
	div.event a.thumbnail.no-image { padding-top: 48px; padding-bottom: 48px; }
}
div.event a.thumbnail.has-image.default-image img { background-color: #ffffff; padding: 24px; }
div.event h3 { margin-top: 0px; margin-bottom: 0px; }
div.event h3 a { text-decoration: none; }
div.event h3 a:focus, div.event h3 a:hover { color: var(--dark-blue); }
div.event div.content { font-size: 16px; margin-top: 5px; }
div.events div.content { max-height: 96px; overflow: hidden; }
div.event a.read-more { text-decoration: none; font-size: 16px; }
div.event a.read-more:focus, div.event a.read-more:hover { color: var(--dark-blue); }
div.event div.images::after { display: block; clear: both; content: ""; }
div.event div.images a.image { margin-right: 10px; margin-bottom: 10px; float: left; }
div.event div.images img { max-height: 120px; }
@media (min-width: 576px)
{
	div.event div.images img { max-height: 150px; }
}
@media (min-width: 768px)
{
	div.event div.images img { max-height: 180px; }
}
@media (min-width: 992px)
{
	div.event div.images img { max-height: 205px; }
}

div.event-details { margin-bottom: 60px; }
div.event-details div.content { margin-top: 45px; margin-bottom: 60px; }
div.event-details div.content h2 { margin-top: 45px; }
div.event-details div.content.contact { margin-top: 30px; margin-bottom: 60px; }

div.events a.edit-link { float: right; }
div.event:hover a.edit-link { opacity: 1; }
div.event-details a.edit-link { float: right; clear: right; }

/* tag styles */
div.event-details div.tags, div.news-article-details div.tags { margin-bottom: 30px; }
div.tags::after { display: block; clear: both; content: ""; }
div.tag { background-color: var(--light-blue); color: #ffffff; padding: 0px 15px; font-size: 12px; text-transform: uppercase; display: inline-block; margin-right: 10px; border-radius: 9px; font-weight: bold; }
div.tag.date { background-color: transparent; color: var(--font-colour); padding-left: 0px; }

/* events panel styles */
div.events-panel { background-color: var(--panel-grey-background); border-radius: 20px; padding: 5px 20px; }
div.events-panel div.events { margin-bottom: 0px; }
div.events-panel div.event { border-top: solid 1px var(--light-grey); padding-top: 20px; padding-bottom: 20px; margin-bottom: 0px; }
div.events-panel div.event:first-child { border-top: none; }
div.events-panel h3 a { color: var(--dark-blue); font-size: 16px; }
div.events-panel h3 a:focus, div.events-panel h3 a:hover { color: var(--light-blue); }
div.events-panel div.content { font-size: 14px; }
div.events-panel a.read-more { display: none; }
div.events-panel a.edit-link { display: none; }
div.events-panel div.tag.date { display: inline-block; float: none; padding-left: 0px; }
div.events-panel div.tag.date span { display: inline; margin-right: 15px; }

/* clubs styles */
div.club { margin-bottom: 60px; }
div.club h3 { margin-top: 0px; color: var(--light-blue); }
div.club h4 { margin-top: 15px; margin-bottom: 0px; font-size: 18px; }
div.club div.members { font-size: 16px; }

div.club a.edit-link { float: right; }
div.club:hover a.edit-link { opacity: 1; }

/* directors styles */
div.director { text-align: center; margin-bottom: 60px; position: relative; }
div.director .profile { border-radius: 50%; position: relative; width: 80%; margin-left: auto; margin-right: auto; background-size: cover; background-position: center top; margin-bottom: 10px; }
div.director .profile::before { content: ""; display: block; padding-top: 100%; }
div.director h3 { margin-top: 0px; margin-bottom: 0px; color: var(--light-blue); }
div.director div.position { text-transform: uppercase; font-size: 16px; }

div.director a.edit-link { position: absolute; top: 0; right: 0; }
div.director:hover a.edit-link { opacity: 1; }

/* sponsors styles */
div.sponsors { align-items: center; }
div.sponsor { margin-bottom: 60px; text-align: center; position: relative; max-width: 300px;  }
div.sponsor img { width: 100%; }
div.sponsor a.sponsor-link { text-decoration: none; font-size: 24px; font-weight: bold; }

div.home-sponsors-container { text-align: center; }
div.home-sponsors-container div.sponsors { justify-content: center; }

div.sponsor a.edit-link { position: absolute; top: 0; right: 0; }
div.sponsor:hover a.edit-link { opacity: 1; }

/* contact styles */
div.info-panel h1 { color: var(--light-blue); }
div.info-panel div.left-column { margin-bottom: 30px; }
div.info-panel div.left-column p { font-size: 24px; font-weight: bold; }
div.info-panel div.right-column { align-self: flex-end; text-align: center; }
div.info-panel div.right-column img { width: 70%; max-width: 400px; }

div.form-panel { border-radius: 20px; background-color: var(--panel-grey-background); overflow: hidden; }
div.form-panel div.left-column { background-color: var(--light-blue); color: #ffffff; padding: 30px; background-image: url("/images/contact-us-background.png"); background-size: cover; background-position: center bottom; min-height: 530px; }
div.form-panel div.left-column h2 { margin-top: 0px; color: #ffffff; filter: drop-shadow(0 0 2px var(--dark-blue)); }
div.form-panel div.left-column p { filter: drop-shadow(0 0 2px var(--dark-blue)); }
div.form-panel div.right-column { padding: 30px 20px; }
@media (min-width: 576px)
{
	div.form-panel div.right-column { padding: 40px 30px; }
}
@media (min-width: 768px)
{
	div.form-panel div.right-column { padding: 30px; 20px; }
}
@media (min-width: 992px)
{
	div.form-panel div.right-column { padding: 45px 40px; }
}
div.form-panel .btn { width: 100%; }

/* feature boxes styles */
div.feature-boxes-container { margin-top: 60px; margin-bottom: 60px; }
div.feature-boxes-container div.left-column { padding-top: 30px; padding-bottom: 45px; text-align: center; }
div.feature-boxes-container div.left-column .btn { margin-top: 15px; }
@media (min-width: 1400px)
{
	div.feature-boxes-container div.left-column { text-align: left; padding-right: 60px; font-size: 16px; }
}
div.feature-boxes { height: 100%; padding-left: 10px; padding-right: 10px; }
h3.feature-box { display: block; float: left; margin-top: 0px; height: 100%; min-height: 200px; text-align: center; position: relative; font-size: 12px; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); background-color: #ffffff; }
h3.feature-box a.feature-box-link { display: block; width: 100%; height: 100%; text-decoration: none; color: #ffffff; padding-top: 15px; text-transform: uppercase; padding-left: 12px; background-size: cover; background-position: center top; transition: opacity 200ms; }
h3.feature-box a.feature-box-link:focus, h3.feature-box a.feature-box-link:hover { opacity: 0.9; }

h3.feature-box.feature-box-1 a.feature-box-link { background-position: 38% top; }
h3.feature-box.feature-box-2 a.feature-box-link { background-position: 66% top; }
h3.feature-box.feature-box-3 a.feature-box-link { background-position: 40% top; color: var(--font-colour); }
h3.feature-box.feature-box-4 a.feature-box-link { background-position: 48% top; }
h3.feature-box.feature-box-5 a.feature-box-link { background-position: 95% top; padding-left: 30px; }

@media (min-width: 768px)
{
	h3.feature-box { min-height: 300px; font-size: 14px; }
	h3.feature-box a.feature-box-link {  }
	h3.feature-box.feature-box-5 a.feature-box-link { padding-left: 20px; }
}
@media (min-width: 992px)
{
	h3.feature-box { min-height: 400px; font-size: 16px; }
	h3.feature-box a.feature-box-link {  }
	h3.feature-box.feature-box-5 a.feature-box-link { padding-left: 30px; }
}
@media (min-width: 1200px)
{
	h3.feature-box { min-height: 500px; font-size: 18px; }
	h3.feature-box a.feature-box-link {  }
	h3.feature-box.feature-box-5 a.feature-box-link { padding-left: 40px; }
}
@media (min-width: 1400px)
{
	div.feature-boxes-container h2 { font-size: 34px; }
	h3.feature-box { min-height: 400px; font-size: 18px; }
	h3.feature-box a.feature-box-link { padding-left: 20px; }
	h3.feature-box.feature-box-5 a.feature-box-link { padding-left: 20px; }
}

h3.feature-box a.edit-link { position: absolute; bottom: 10px; left: 10px; font-size: 18px; filter: drop-shadow(0 0 2px var(--light-grey)); }
h3.feature-box:hover a.edit-link { opacity: 1; }

/* come and try styles */
div.come-and-try { text-align: center; color: #ffffff; font-size: 16px; }
div.come-and-try h3 { color: #ffffff; font-size: 30px; }
div.come-and-try .btn { margin-top: 20px; }
div.come-and-try div.left-column { padding: 20px;  border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: var(--dark-blue); }
div.come-and-try div.centre-column {  }
div.come-and-try div.centre-column img { width: 70%; max-width: 400px; }
div.come-and-try div.right-column { padding: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: var(--dark-blue); margin-top: -1px; padding-bottom: 30px; }
@media (min-width: 768px)
{
	div.come-and-try div.left-column { border-radius: 20px 0px 0px 20px; padding-bottom: 40px; }
	div.come-and-try div.right-column { border-radius: 0px 20px 20px 0px; margin-top: 0px; padding-bottom: 40px; }
	div.come-and-try .btn { margin-top: 10px; }
}
@media (min-width: 992px)
{
	div.come-and-try { margin-top: 150px; }
	div.come-and-try div.centre-column { position: relative; background-color: var(--dark-blue); }
	div.come-and-try div.centre-column img { width: 140%; max-width: auto; position: absolute; bottom: 0; left: -10%; }
	
	div.come-and-try div.left-column { padding-bottom: 30px; }
	div.come-and-try div.right-column { padding-bottom: 30px; }
}
@media (min-width: 1200px)
{
	div.come-and-try { margin-top: 170px; }
	div.come-and-try div.centre-column img { width: 150%; left: 0; }
}
@media (min-width: 1400px)
{
	div.come-and-try div.centre-column img { width: 160%; left: 5%; }
}
