/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

* { box-sizing: border-box }
img { max-width: 100%; height: auto; }

:root {
	--font-family: "Nunito", sans-serif;
	--brand-font-family: "Nunito", sans-serif;
	--site-max-width: 1140px;
	--content-side-padding: 15px;
	--border-radius: 10px;
	
	--color-primary: #000000;
	--color-secondary: #555555;
	--color-background: #edeffa;
	--color-secondary-background: #ffffff;
	--color-accent: rgb(186,39,117);
	--color-button-background: rgba(0,0,14, 0.065);
	
	--color-divider: rgba(0,0,0, 0.18);
	--color-input-border: #bbc;
	--color-link-hover-background: rgba(0,0,0, 0.08);
	--color-row-hilight-background: rgba(40,50,187, 0.08);
	
	--shadow-button-hover: 0 0 0 100vmax inset rgba(0,0,0, 0.14);
	
	--red: rgb(201, 42, 51);
	--green: #33a129;
	--blue: rgb(56, 117, 222);
	--gold: rgb(182, 158, 36);
	--yellow: rgb(222, 201, 98);
	--orange: rgb(200, 129, 0);
}

@media (min-width: 50em) {
	
}
@media (min-width: 72em) {
	
}

html {
	background-color: var(--background-color);
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: 1rem;
	font-optical-sizing: auto;
	color: var(--color-primary);
	background-color: var(--color-background);
}

/* Skip to content
-------------------------------------------------- */
.skip-to-content-link {
	position: absolute;
	z-index: 50;
	left: 50%;
	font-size: 16px;
	font-weight: 600;
	color: white;
	background: var(--color-accent);
	padding: 12px 20px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.2s;
}
.skip-to-content-link:focus {
	transform: translateY(0%);
}




/* Typography: Fonts
-------------------------------------------------- */
.brand-font {
	font-family: var(-brand-font);
	font-optical-sizing: auto;
	font-style: normal;
}
.weight-700 { font-weight: 700; }
.weight-900 { font-weight: 900; }




/* Typography: Headings
-------------------------------------------------- */
h1 {
	font-family: var(--brand-font-family);
	font-size: 2.0rem;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0;
}
h2 {
	font-family: var(--brand-font-family);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 2em;
	margin-bottom: 0.5em;
}
h3 {
	font-family: var(--brand-font-family);
	font-size: 1.25rem;
	font-weight: 700;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
h4 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 3px;
}
h5 {
	font-size: 0.813rem;
	font-weight: 600;
	margin-bottom: 1px;
}
@media (min-width: 50em) {
	h1 {
		font-size: 2.5rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.5rem;
	}
}

h1 small {
	display: block;
	font-size: 0.65em;
	font-weight: 400;
	margin: 4px 0 0 0;
}

.pre-heading {
	display: block;
	font-size: 1em;
	font-weight: 500;
	color: var(--color-secondary);
	margin: 0 0 5px 0;
}
.sub-heading {
	font-size: 1.125em;
	font-weight: 500;
	margin: 0 0 2em 0;
}



/* Typography: Paragraphs
-------------------------------------------------- */
p,
ul,
ol {
	font-size: 17px;
	line-height: 1.5;
	margin-block-start: 1.0em;
	margin-block-end: 1.0em;
}
li {
	margin-bottom: 1em;
}

.lead {
	font-size: 1.0em;
	font-weight: 450;
	line-height: 1.5;
	letter-spacing: .007em;
	margin-top: 8px;
	margin-bottom: 25px;
}

@media (min-width: 50em) {
	.lead {
		font-size: 1.313em;
	}
}

/* Typography: Links
-------------------------------------------------- */
a,
.link {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a.text-color {
	color: var(--color-primary);
}

a.chevron-link {
	position: relative;
}
a.chevron-link:after {
	display: inline-block;
	margin-left: 0.25ch;
	content: '›';
	font-size: 1.15em;
	color: inherit;
}

/* Images: Base
-------------------------------------------------- */
.image {
	width: 100%;
}

.charity-logo {
	width: auto;
	max-width: 100%;
	height: 44px;
	border-radius: 4px;
}

@media screen and (min-width: 50em) {
	
}

















/* Layout
-------------------------------------------------- */
.container {
	max-width: var(--site-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
}

.limit-container-width {
	max-width: 450px;
}

.limit-character-width {
	max-width: 70ch;
	margin-left: auto;
	margin-right: auto;
}

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

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

@media screen and (max-width: 767px) {
	.full-width-container {
		margin-left: calc(var(--content-side-padding) * -1);
		margin-right: calc(var(--content-side-padding) * -1);
	}
}

/* Layout: Account etc
-------------------------------------------------- */
.container.with-side-menu {
	display: grid;
}

.container.with-side-menu .section-menu {
	display: none;
}

@media screen and (min-width: 768px) {
	.container.with-side-menu {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 10%;
	}

	.container.with-side-menu .section-menu {
		display: block;
	}
}











/* Side nav: only on-screen by default on large screens, otherwise place it into view when required
-------------------------------------------------- */
.sidenav {
	position: fixed;
	z-index: 9;
	top: 60px;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	height: calc(100vh - 60px);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--color-secondary-background);
	padding-top: 35px;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	opacity: 1;
	transform: translateX(100%);
	transition: transform .34s;
	transition-timing-function: cubic-bezier(.32, .08, .24, 1);
}

.sidenav-is-open .sidenav {
	overflow: auto;
	opacity: 1;
	transform: translateX(0%);
	transition: transform 0.28s;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 50em) {
	
	.sidenav {
		display: none;
	}
	.sidenav-menu {
		font-size: 13px;
	}
	
}











/* Navbar
-------------------------------------------------- */
.navbar {
	position: fixed;
	position: sticky;
	z-index: 30;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(1,3,51, 0.85);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.navbar-container {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: var(--site-max-width);
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
}

.navbar .spacer {
	flex: 1;
}

.navbar-home-link {
	display: flex;
	flex-grow: 0;
	align-items: center;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary);
}

.navbar-logo {
	display: block;
	width: auto;
	height: 24px;
}
.navbar-icon {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0;
}

.navbar-search {
	display: none;
}

.navbar-menu {
	display: flex;
	align-items: center;
	margin-left: 30px;
}
.navbar-menu .navbar-link {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255,255,255, 0.75);
	text-decoration: none;
	padding: 12px 15px;
	border-radius: 6px;
}
.navbar-menu .navbar-link:hover {
	background-color: rgba(255,255,255, 0.14);
}

.navbar-buttons {
	display: flex;
	align-items: center;
	gap: 5px;
}

.navbar-button {
	display: flex;
	align-items: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-decoration: none;
	background: none;
	border: none;
	font-size: 13px;
	font-weight: 450;
	color: white;
	border-radius: 6px;
	width: auto;
	height: auto;
	padding: 5px 10px;
}
.navbar-button.prominent {
	background-color: var(--color-accent);
}
.navbar-button .symbol {
	font-size: 34px;
}
@media (hover: hover) {
	.navbar-button:hover {
		background-color: rgba(255,255,255, 0.14);
	}
	.navbar-button.prominent:hover {
		background-color: var(--color-accent);
		filter: brightness(1.4);
	}
}
.navbar-button:active {
	background-color: rgba(255,255,255, 0.14);
}

main {
	min-height: 75vh;
}

















/* Splash
-------------------------------------------------- */
.splash {
	display: flex;
	align-items: end;
	position: relative;
	height: 100vh;
	height: calc(100vh - 60px);
	height: calc(100svh - 60px);
	background-color: rgb(4, 2, 26);
	background-size: cover;
	background-position: center;
}
.empty-splash {
	height: 40px;
}
.empty-splash h1 {
	opacity: 0;
}
.splash.centered {
	align-items: center;
}
.splash .media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.splash .media.fade-in {
	opacity: 1;
}
.splash .content {
	width: 100%;
	padding-top: 100px;
	padding-bottom: 30px;
	color: white;
	background-image: linear-gradient(to top, rgba(0,0,0, 0.74), rgba(0,0,0, 0.74), rgba(0,0,0, 0));
	backdrop-filter: blur(16px);
	mask: linear-gradient(to top, black, black, black, transparent);
}
.splash .content .width {
	max-width: 780px;
}
.splash .title {
	font-size: 39px;
	line-height: 1.25;
	font-weight: 800;
	margin: 0 0 12px 0;
	text-shadow: 0 2px 10px rgba(0,0,0, .5);
}
.splash .lead {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 500;
	margin: 0 0 12px 0;
	text-shadow: 0 2px 10px rgba(0,0,0, .5);
}
.splash .button {
	margin: 15px 0 0 0;
	box-shadow: 0 4px 18px rgba(0,0,0, 0.5);
}
@media screen and (min-width: 768px) {
	.splash {
		min-height: 32vw;
	}
	.splash .content {
		padding-bottom: 60px;
	}
	.splash .content .width {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	.splash .title {
		font-size: 60px;
	}
}



/* Sections for text content
-------------------------------------------------- */
.section {
	padding: 30px 0;
}
.section.padding-md {
	padding: 80px 0;
}
.section.padding-lg {
	padding: 120px 0;
}
.white-background {
	background-color: white;
}

.padding-bottom {
	padding: 0 0 80px 0;
}






/* Text effects
-------------------------------------------------- */
.knockout {
	font-size: 52px;
	font-weight: 800;
	line-height: 1.15;
	margin: 20px 0;
	background-image: linear-gradient(to right, rgb(1,3,51), rgb(186,39,117));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.padding-xl {
	padding: 80px 0;
}

@media screen and (min-width: 50em) {
	.knockout {
		font-size: 82px;
	}
	.padding-xl {
		padding: 150px 0;
	}
}

































/* Components: Buttons
-------------------------------------------------- */
.button {
	appearance: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: 550;
	line-height: 1.1875;
	width: auto;
	height: 2.75em;
	text-align: center;
	white-space: nowrap;
	border: none;
	border-radius: 5px;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1.5em;
	padding-right: 1.5em;
	background-color: var(--color-button-background);
	color: var(--color-primary);
	text-decoration: none;
	text-align: center;
}

.button:hover {
	box-shadow: var(--shadow-button-hover);
}
.button:active {
	opacity: 0.7;
}

.button.lg {
	font-size: 18px;
	height: 3em;
}

@media screen and (max-width: 50em) {
	.button.stretch-on-sm { width: 100% }
}
.button.stretch { width: 100% }

.button.pill { border-radius: 100px; }

.button.plain {
	background-color: transparent;
}
.button.prominent {
	color: white;
	background-color: var(--color-accent);
}
.button[disabled],
.button.not-allowed {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Ooh, shiny!
-------------------------------------------------- */
.shiny {
	position: relative;
	overflow:hidden
}

.shiny::before {
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .39), transparent);
	animation: 3.5s ease-in-out infinite shine
}

@keyframes shine {
	0% {
		left: -100%;
		transition-property:left
	}

	100%, 24% {
		left: 100%;
		transition-property:left
	}
}



/* Components: Breadcrumbs
-------------------------------------------------- */
.breadcrumbs-container {
	background-color: #fff;
	margin: 0 0 35px 0;
}
.breadcrumbs {
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px 15px 10px 15px;
	
	max-width: var(--site-max-width);
	margin-left: auto;
	margin-right: auto;
}

.breadcrumbs ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
	color: var(--text-secondary-color);
}

.breadcrumbs li + li:before {
	content: "›";
	padding: 0 0.5em;
	color: var(--text-secondary-color);
}

.breadcrumbs a {
	color: var(--color-primary);
	font-weight: normal
}





























/* Side nav menu list
-------------------------------------------------- */
.sidenav-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 100px;
}
.sidenav-logo {
	display: block;
	width: auto;
	height: 19px;
	margin-bottom: 25px;
}
.sidenav-heading {
	display: block;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: var(--color-primary);
	margin: 0 0 8px 0;
	padding-left: 5px;
}
.sidenav-menu {
	margin-block-end: 35px;
	padding: 0;
	font-weight: 400;
}

.sidenav-menu .menu-item {
	display: flex;
	align-items: center;
	font-size: 17px;
	font-weight: 500;
	margin: 0 0;
	padding: 0.8em 0.5em;
	gap: 2.0ch;
	color: var(--color-primary);
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0, 0.10);
	border-radius: 3px;
}
.sidenav-menu .sub-menu-item {
	font-size: 0.813em;
	padding-left: 3.4em;
}

.sidenav-menu .menu-item:hover {
	background-color: rgb(211, 216, 246);
}
.sidenav-menu .menu-item.active {
	background-color: rgb(211, 216, 246);
}

.sidenav-menu .menu-icon {
	font-size: 24px;
	width: 24px;
	color: var(--color-accent);
}

.sidenav-menu .label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media screen and (min-width: 50em) {
	.sidenav-heading {
		font-size: 16px;
	}
	.sidenav-menu .menu-item {
		font-size: 15px;
		padding: 0.75em 0.5em;
	}
	.sidenav-menu .menu-icon {
		font-size: 20px;
		width: 20px;
	}
}
























/* Panels
-------------------------------------------------- */
.panel {
	text-align: left;
	background-color: var(--color-secondary-background);
	border-radius: 15px;
	padding: 20px;
}

@media screen and (min-width: 50em) {
	.panel {
		padding: 38px;
	}
}


















/* Item list
-------------------------------------------------- */
.list {
	margin: 0 0 35px 0;
	padding: 0;
}
.list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba(0,0,0, 0.12);
	text-decoration: none;
	color: inherit;
}
a.list-item:hover {
	background-color: rgb(223, 227, 249);
}
/* Main components
-------------------------------------------------- */
.list-item-image {
	display: block;
	width: 120px;
}
.list-item-body {
	flex: 1;
}
.list-item .symbol {
	font-size: 26px;
	color: var(--color-secondary);
}
/* Sub components
-------------------------------------------------- */
.list-item-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}
.list-item .label {
	display: block;
	font-size: 13px;
	color: var(--color-secondary);
	margin: 0 0 4px 0;
}
.list-item .title {
	display: block;
	font-size: 1.1em;
	font-weight: 600;
	margin: 0;
}

@media screen and (min-width: 768px) {
	.list-item-image {
		width: 150px;
	}
}

/* Lists: Split lists with Left --- Right layout
-------------------------------------------------- */
.split-list {
	margin: 14px 0 50px 0;
	padding: 0;
	list-style: none;
	max-width: 550px;
	font-size: 17px;
}
.split-list.sm {
	max-width: 400px;
}
.split-list.lg {
	max-width: none;
}
.split-list .item {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-top: 2px dashed #ccc;
}





/* Tags
-------------------------------------------------- */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 5px 0 0 0;
}
.tag {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
	background-color: rgb(185, 195, 239);
	padding: 4px 8px;
	border-radius: 6px;
}









/* Item grid/list
-------------------------------------------------- */
.grid-column {
	display: grid;
	gap: 15px;
}

.item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px 30px;
	margin-block-end: 50px;
}

.item-list {
	display: grid;
	gap: 10px;
	margin-top: 30px;
	margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
	.item-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* Item cards in grid
-------------------------------------------------- */
.item-grid .item {
	position: relative;
	height: 100%;
}

.item-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-decoration: none;
	color: var(--primary);
	background-color: var(--color-secondary-background);
	border: 1px solid rgba(0,0,0, 0.15);
	border-radius: 24px;
	height: 100%;
}

@media (hover: hover) {
	.item-card:hover .item-card-image {
		filter: brightness(80%)
	}
}

.item-card:active, .item-card.pressed {
	transform: scale(0.98);
}

@media (pointer: fine) {
	.item-card:active {
		transform: scale(0.98);
	}
}

.item-card-image {
	display: block;
	width: 100%;
	border-radius: 24px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: 0 8px 16px 6px rgba(0,0,0, 0.35);
}

.item-card-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 25px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

.item-card-label {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 4px 0;
	color: var(--color-secondary);
}
.item-card-title {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}
.item-card-lead {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	margin-top: 6px;
	margin-bottom: 0;
}

.item-card-actions {
	display: flex;
	gap: 10px;
	padding-top: 0;
	padding-bottom: 15px;
	padding-left: 16px;
	padding-right: 20px;
}

.item-card-actions .button {
	border-radius: 100px;
}

@media screen and (min-width: 768px) {
	.item-card-title {
		font-size: 23px;
	}
}






/* Entry cards in grid
-------------------------------------------------- */
.entry-card {
	display: block;
	width: 100%;
	text-decoration: none;
	color: rgb(93, 15, 108);
	background-color: rgb(250, 210, 255);
	padding: 4px;
	border: 1px solid rgba(0,0,0, 0.08);
	border-radius: 15px;
}
.entry-card.highlighted {
	color: rgb(233, 235, 253);
	background-color: rgb(128, 134, 240);
}
.entry-card:active {
	transform: scale(0.985);
}

/* Colours */
.entry-card.shade-blue {
	color: rgb(44, 25, 134);
	background-color: rgb(216, 214, 255);
}
.entry-card.shade-pink {
	color: rgb(134, 25, 110);
	background-color: rgb(255, 191, 242);
}
.entry-card.shade-green {
	color: rgb(25, 134, 73);
	background-color: rgb(196, 255, 212);
}

/* Layout */
.entry-card .content {
	position: relative;
	display: flex;
	color: black;
	background-color: rgba(255,255,255, 0.88);
	min-height: 50px;
	padding: 30px 20px 20px 20px;
	box-shadow: 0 4px 16px 5px rgba(0,0,0, 0.28);
	border-radius: 13px;
}
.entry-card .content .main {
	flex: 1;
	text-align: left;
}
@media screen and (min-width: 768px) {
	.entry-card .content {
		flex-direction: column;
	}
	.entry-card .content .main {
		text-align: center;
	}
}

/* Content */
.entry-card:hover .content {
	background-color: white;
	box-shadow: 0 2px 10px 5px rgba(0,0,0, 0.35);
}
.entry-card .entries {
	display: block;
	margin-bottom: 8px;
}
.entry-card .amount {
	display: block;
	font-size: 35px;
	font-weight: 700;
}
.entry-card .description {
	display: block;
	margin-top: 15px;
	color: var(--color-secondary);
}
.entry-card .footer {
	display: none;
	font-size: 11px;
	font-weight: 500;
	text-align: center;
	padding: 13px 0 6px 0;
	font-weight: 600;
}
@media screen and (min-width: 768px) {
	.entry-card .footer {
		display: block;
	}
}
.entry-card .tag {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: auto;
	white-space: nowrap;
	background-color: rgba(0,0,0, 0.075);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	padding: 4px 10px;
	border-top-left-radius: 11px;
	border-bottom-right-radius: 4px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}
.entry-card .actions {
	margin: 10px 0 10px 0;
}
.entry-card .button {
	font-size: 13px;
	height: 2.5em;
	padding: 0 20px;
	border-radius: 100px;
}













/* Hero
-------------------------------------------------- */
.hero {
	padding-bottom: 50px;
}
.hero-footer {
	display: block;
	text-align: center;
	font-size: 1 rem;
	font-weight: 600;
	margin-top: 30px;
	padding-top: 10px;
	border-top: 1px solid rgba(0,0,0, 0.08);
}
.hero-footer small {
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin: 0 0 4px 0;
}




/* Article
-------------------------------------------------- */
.article {
	padding: 50px 0;
}
.article *:first-child {
	margin-top: 0;
}



/* Link block
-------------------------------------------------- */
.link-block {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 10px 0;
	padding: 20px;
	border-radius: 10px;
	background-color: var(--color-background);
	color: inherit;
	text-decoration: none;
	border: 2px solid transparent;
}
.link-block:hover {
	border-color: var(--color-accent);
}
.link-block .image {
	width: 72px;
}
.link-block .icon {
	width: 72px;
	height: 72px;
	border-radius: 12px;
}
.link-block .body {
	flex: 1;
}
.link-block .image {
	display: block;
}
.link-block .title {
	display: block;
	font-size: 15px;
	font-weight: 700;
}
.link-block .url {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-secondary);
	margin-block-start: 4px;
}
.link-block .symbol {
	font-size: 26px;
	color: var(--color-secondary);
}












/* Quote blocks
-------------------------------------------------- */
.quote {
	display: block;
	font-size: 18px;
	font-weight: 450;
	line-height: 1.5;
	background-color: white;
	border-left: 4px solid var(--color-accent);
	border-radius: 15px;
	margin: 20px 0;
	padding: 24px;
	box-shadow: 0 5px 12px 6px rgba(0,0,0, 0.12)
}

/* Alerts
-------------------------------------------------- */
.alert {
	display: block;
	font-size: 18px;
	font-weight: 450;
	line-height: 1.5;
	background-color: white;
	border-left: 4px solid var(--color-accent);
	border-radius: 15px;
	margin: 20px 0;
	padding: 24px;
	box-shadow: 0 5px 8px 5px rgba(0,0,0, 0.18)
}
.alert.success {
	background-color: rgb(221, 255, 213);
}
.alert.warning {
	background-color: rgb(255, 213, 242);
}
.alert .title {
	display: block;
	font-size: 1.1em;
	font-weight: 700;
	margin: 0 0 5px 0;
}
.alert .notice {
	display: block;
}
















/* Media gallery
-------------------------------------------------- */
.gallery {
	overflow-x: auto;
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;
	-ms-overflow-style: none
}
.gallery::-webkit-scrollbar {
	display:none
}

.gallery .track {
	display: flex;
	width: max-content;
	min-width: 100%;
	justify-content: center;
	gap: 10px;
}

.gallery .item {
	flex: 0 0 auto;
}

.gallery .media {
	display: block;
	width: 260px;
	height: 180px;
	object-fit: cover;
	border-radius: 8px;
	pointer-events: none;
}

.gallery .item:hover {
	filter: brightness(0.8);
}


































/* Forms
-------------------------------------------------- */
.input-field {
	margin: 0 0 12px 0;
}

form {
	margin: 0;
}

label {
	display: block;
	font-size: 15px;
	font-weight: 550;
	line-height: 1.35;
	text-align: left;
	margin: 0 0 5px 0;
	color: #445;
}

.input {
	display: block;
	width: 100%;
	font-size: 16px;
	line-height: 1.2;
	text-align: left;
	color: var(--color-primary);
	padding: 8px 10px;
	border: 1px solid var(--color-input-border);
	border-radius: 8px;
}
select.input {
	height: 40px;
}









/* Alerts
-------------------------------------------------- */
.information-notice {
	text-align: left;
	margin: 1em 0;
	padding: 20px;
	background-color: var(--color-secondary-background);
	border-left: 4px solid rgba(0,0,0, 0.25);
	border-radius: 10px;
}

.information-notice.error {
	color: white;
	background-color: rgb(208, 20, 20);
}

.information-notice .title {
	display: block;
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 8px;
}

.information-notice a {
	color: inherit;
	text-decoration: underline;
}






























/* Natural accordions!
-------------------------------------------------- */
details {
	background-color: var(--color-secondary-background);
	border-radius: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
details.transparent {
	background-color: transparent;
}
details:hover {
	background-color: rgba(255,255,255, 0.62);
}

details p {
	padding: 0 1em 1em 1em;
}

details summary {
	display: flex;
	font-size: 1.063em;
	line-height: 1.3;
	font-weight: 600;
	padding: 0.75em var(--content-side-padding);
	border-radius: 5px;
	cursor: pointer;
}
















/* Terms
-------------------------------------------------- */
.small-print {
	font-size: 14px;
}
.small-print p,
.small-print ol,
.small-print li {
	font-size: 1em;
}





















/* Dialogs/Modals
-------------------------------------------------- */
.modal {
	width: 90%;
	max-width: 600px;
	padding: 20px;
	border: 2px solid rgba(0,0,0, 0.5);
	border-radius: 15px;
}
.modal::backdrop {
	background-color: rgba(0,0,0, 0.5);
	backdrop-filter: blur(8px);
}
.modal > h2 {
	margin-top: 30px;
}
.modal-actions {
	margin-top: 30px;
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

/* Media */
.media-modal {
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	height: 90%;
	padding: 0;
	border: none;
	border-radius: 15px;
	overflow: auto;
	background-color: transparent;
}
.media-modal[open] {
	display: flex;
}
.media-modal::backdrop {
	background-color: rgba(0,0,0, 0.45);
	backdrop-filter: blur(10px);
}
.media-modal .close-button {
	position: absolute;
	top: 5px;
}
.media-modal img,
.media-modal video {
	display: block;
	max-width: 95%;
	max-height: 90%;
	object-fit: contain;
	border: 2px solid white;
	border-radius: 15px;
	box-shadow: 0 6px 15px 8px rgba(0,0,0, 0.25);
}






























































/* Footer
-------------------------------------------------- */
#site-footer {
	font-size: 13px;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
	color: white;
	background-color: rgb(1,3,51);
	border-top: 2px solid rgba(255,255,255, 0.1);
}
#site-footer .site-logo {
	display: inline-block;
	width: 100px;
	height: 25px;
	margin-bottom: 20px;
}
#site-footer .copyright {
	display: block;
	margin-top: 15px;
}
.footer-links {
	display: inline-block;
	list-style: none;
	font-size: inherit;
	margin: 0;
	padding: 0;
}
.footer-links li {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.footer-links a {
	display: inline-block;
	color: rgba(255,255,255, 0.8);
	text-decoration: none;
	padding: 0;
	margin: 5px 6px;
}
.footer-links a:hover {
	color: rgba(255,255,255, 1);
	text-decoration: underline;
}
@media screen and (min-width: 768px) {
	
}










.admin-controls {
	position: fixed;
	z-index: 10;
	bottom: 30px;
	right: 15px;
	text-align: right;
}
.admin-controls .button {
	font-size: 13px;
	color: white;
	background-color: rgba(1,3,51, 0.85)
}
@media screen and (max-width: 767px) {
	.admin-controls {
		bottom: auto;
		top: 70px;
		right: 12px;
	}
}









/* Layout spacing
-------------------------------------------------- */
.margin-top-none { margin-top: 0 }
.margin-top-sm { margin-top: 10px }
.margin-top-md { margin-top: 20px }
.margin-top-lg { margin-top: 40px }
.margin-top-xl { margin-top: 80px }
.margin-bottom-xs { margin-bottom: 4px }
.margin-bottom-sm { margin-bottom: 10px }
.margin-bottom-md { margin-bottom: 20px }
.margin-bottom-lg { margin-bottom: 40px }
.margin-bottom-xl { margin-bottom: 80px }

@media screen and (min-width: 50em) {
	.padding-top-on-lg { padding-top: 30px; }
}





/* Colours
-------------------------------------------------- */
.accent { color: white; background-color: var(--color-accent); }
.red { color: white; background-color: var(--red) }
.green { color: white; background-color: var(--green) }
.blue { color: white; background-color: var(--blue) }
.yellow { color: black; background-color: var(--yellow) }
.orange { color: white; background-color: var(--orange) }
.grey { color: white; background-color: #777; }

.accent-text { color: var(--color-accent) }
.secondary-text { color: var(--color-secondary) }






/* Tweaks
-------------------------------------------------- */
time { white-space: nowrap; }
hr { margin: 60px 0; height: 3px; background-color: var(--color-accent); border: none; border-radius: 2px; }
hr.divider { margin: 40px 0; height: 1px; background-color: var(--color-divider); border-radius: 0; }
hr.divider.sm { margin: 20px 0; }




/* Helpers
-------------------------------------------------- */
.text-align-center, .centered { text-align: center; }
.text-align-right { text-align: right; }
.hidden { display: none !important; }
@media (max-width: 50em) {
	.hidden-on-sm { display: none !important; }
}
@media (min-width: 50em) {
	.visible-only-on-sm { display: none !important; }
	.centered-on-lg { text-align: center; }
}
@media (max-width: 72em) {
	.hidden-on-md { display: none !important; }
}