/* Begin critical CSS */
/*
 Copyright Watman & Worth Web Ltd 2018-2023
 Use without modification granted to all our customers.
 Do Not Redistribute
*/
/* 
    Created on : 30 Nov 2023, 10:11:16
    Author     : William Worth <william@watmanworth.co.uk>
*/


 /** Begin CSS Section: defaults */

 /* Begin CSS Part: Base */

/* ==========================================
   WATMAN WEB FRAMEWORK
   BASE
========================================== */

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

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

img,
picture,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

[hidden],
.hidden {
	display: none !important;
}



.overrides.empty {display:none !important;}


/* ==========================================
   HIDE EMPTY IMAGE / CONTENT COMPONENTS
========================================== */

.page-image.empty {
	display: none !important;
}

 /* Begin CSS Part: Layout */
/* ==========================================
   WATMAN WEB FRAMEWORK
   LAYOUT
========================================== */

:root {
	--ww-container-max: 1400px;
	--ww-container-wide: 1600px;
	--ww-container-narrow: 900px;

	--ww-header-info-height: 32px;
	--ww-header-height-desktop: 90px;

	--ww-header-total-height:
		calc(
			var(--ww-header-info-height)
			+ var(--ww-header-height-desktop)
		);

  
	--ww-header-height-mobile: 80px;

	--ww-page-gutter: 2rem;

	--ww-space-xs: 0.5rem;
	--ww-space-s: 1rem;
	--ww-space-m: 2rem;
	--ww-space-l: 4rem;
	--ww-space-xl: 6rem;
	--ww-space-xxl: 8rem;

	--ww-radius-s: 0.5rem;
	--ww-radius-m: 1rem;
	--ww-radius-l: 2rem;

	--ww-shadow-s: 0 2px 10px rgba(0,0,0,.05);
	--ww-shadow-m: 0 8px 25px rgba(0,0,0,.08);
	--ww-shadow-l: 0 15px 40px rgba(0,0,0,.12);

	--ww-transition-fast: 0.2s ease;
	--ww-transition-medium: 0.3s ease;


  --font-body: 'FSME', Verdana, Arial, sans-serif;
  --font-heading: 'FSME', Verdana, Arial, sans-serif;


  
}

/* EOS safety */

.layout,
.layout-cell,
.layout-component {
	min-width: 0;
}

/* Core site shell */

.master-layout {
	background: var(--ww-color-body-bg);
	color: var(--ww-color-text);
}

.header-wrapper,
.page-content-wrapper,
.footer-wrapper {
	width: 100%;
}


/* Containers */

.header-container > .i,
.page-section > .i,
.main-footer > .i,
.base-footer > .i {
	width: min(100% - var(--ww-page-gutter), var(--ww-container-max));
	margin-left: auto;
	margin-right: auto;
}

/* Header height */

.header-container {
	min-height: var(--ww-header-height-desktop);
}

/* Page sections */

.page-section {
	width: 100%;
	padding-block: var(--ww-space-xl);
}


.page-section.clip-top {padding-top:0px !important;}

.page-section-content,
.page-section-cards,
.page-section-form {
	width: 100%;
	min-width: 0;
}

/* Generic helpers */

.ww-container {
	width: min(100% - var(--ww-page-gutter), var(--ww-container-max));
	margin-left: auto;
	margin-right: auto;
}

.ww-container--narrow {
	max-width: var(--ww-container-narrow);
}

.ww-container--wide {
	max-width: var(--ww-container-wide);
}

.ww-grid {
	display: grid;
	gap: var(--ww-space-l);
	align-items: start;
}

.ww-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ww-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ww-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ww-flex {
	display: flex;
	gap: var(--ww-space-m);
}

.ww-flex--wrap {
	flex-wrap: wrap;
}

.ww-stack > * + * {
	margin-top: var(--ww-space-m);
}

/* EOS page section grid pass-through */

.page-section.ww-grid {
	display: block;
}

.page-section.ww-grid > .i {
	display: grid;
	gap: var(--ww-space-l);
	align-items: start;
}

.page-section.ww-grid--2 > .i {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-section.ww-grid--3 > .i {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-section.ww-grid--4 > .i {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-section.ww-grid > .i > * {
	min-width: 0;
}




@media (max-width: 1024px) {

	.page-section.ww-grid--2 > .i {
		grid-template-columns: 1fr;
	}

}
 /* Begin CSS Part: Desktop Defaults */
/* ==========================================
   WATMAN WEB FRAMEWORK
   DESKTOP DEFAULTS
========================================== */

@media (min-width: 1025px) {
	.header-wrapper {
		display: block;
	}

	.responsive-menu-wrapper {
		display: none;
	}

body {
	padding-top: var(--ww-header-total-height);
}



}
 /* Begin CSS Part: Tablet Defaults */
/* ==========================================
   WATMAN WEB FRAMEWORK
   TABLET DEFAULTS
========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.header-wrapper {
		display: none;
	}

	.responsive-menu-wrapper {
		display: block;
	}

	body {
		padding-top: var(--ww-header-height-mobile);
	}

	.ww-grid--4,
	.page-section.ww-grid--4 > .i {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
 /* Begin CSS Part: Mobile Defaults */
/* ==========================================
   WATMAN WEB FRAMEWORK
   MOBILE DEFAULTS
========================================== */

@media (max-width: 767px) {
	:root {
		--ww-page-gutter: 1.25rem;
		--ww-space-xl: 4rem;
	}

	.header-wrapper {
		display: none;
	}

	.responsive-menu-wrapper {
		display: block;
	}

	body {
		padding-top: var(--ww-header-height-mobile);
	}

	.page-section {
		padding-block: var(--ww-space-l);
	}

	.ww-grid--2,
	.ww-grid--3,
	.ww-grid--4,
	.page-section.ww-grid--2 > .i,
	.page-section.ww-grid--3 > .i,
	.page-section.ww-grid--4 > .i {
		grid-template-columns: 1fr;
	}

	.ww-flex {
		flex-direction: column;
	}
}
 /** Begin CSS Section: core */

 /* Begin CSS Part: DISABILITY */

 /* Begin CSS Part: Fonts */
/* YMCA Fonts */
@font-face {
  font-family: 'FSME';
  src: url('/userfiles/fonts/fsme-light_0.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FSME';
  src: url('/userfiles/fonts/fsmepro-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FSME';
  src: url('/userfiles/fonts/fsmepro-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FSME';
  src: url('/userfiles/fonts/fsmepro-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FSME';
  src: url('/userfiles/fonts/fsmepro-heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
 /* Begin CSS Part: Buttons */
/* ==========================================
   GLOBAL DONATE BUTTON
   HTML:
   <div class="donate-button">
      <a class="button large" href="/donate">Donate</a>
   </div>
========================================== */

.donate-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;
}

/* Button base */

.donate-button .button,
.donate-button .button:visited,
.donate-button .button.large,
.donate-button .button.large:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;

	width: auto;
	min-width: 0;
	min-height: 48px;

	padding: 0.72rem 1.35rem 0.72rem 0.82rem !important;

	white-space: nowrap;

	background: #AF126D;
	border: 2px solid #fff;
	border-radius: 999px;

	color: #fff !important;
	text-decoration: none;

	font-size: 1rem;
	font-weight: 900;
	line-height: 1;

	box-shadow: 0 12px 28px rgba(175, 18, 109, 0.22);

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

/* Heart icon */

.donate-button .button::before,
.donate-button .button.large::before {
	content: "♥";

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 1.65rem;
	height: 1.65rem;

	flex: 0 0 1.65rem;

	background: #fff;
	border-radius: 999px;

	color: #AF126D;

	font-size: 0.92rem;
	font-weight: 900;
	line-height: 1;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

/* Hover */

.donate-button .button:hover,
.donate-button .button:focus,
.donate-button .button.large:hover,
.donate-button .button.large:focus {
	background: #4D4F53;
	border-color: #fff;
	color: #fff !important;

	transform: translateY(-2px);

	box-shadow: 0 14px 34px rgba(77, 79, 83, 0.24);
}

.donate-button .button:hover::before,
.donate-button .button:focus::before,
.donate-button .button.large:hover::before,
.donate-button .button.large:focus::before {
	background: #fff;
	color: #4D4F53;

	transform: scale(1.08);
}

/* ==========================================
   HEADER CONTEXT
   Slightly tighter so it does not dominate nav
========================================== */

.header-wrapper .donate-button .button,
.header-wrapper .donate-button .button.large,
.responsive-menu-wrapper .donate-button .button,
.responsive-menu-wrapper .donate-button .button.large {
	min-height: 46px;

	padding: 0.68rem 1.25rem 0.68rem 0.78rem !important;

	font-size: 0.98rem;
}

.header-wrapper .donate-button .button::before,
.header-wrapper .donate-button .button.large::before,
.responsive-menu-wrapper .donate-button .button::before,
.responsive-menu-wrapper .donate-button .button.large::before {
	width: 1.55rem;
	height: 1.55rem;

	flex-basis: 1.55rem;

	font-size: 0.86rem;
}

/* ==========================================
   CONTENT / ALERT BOX CONTEXT
   Gives the button breathing room when used below text
========================================== */

.alert-box .donate-button,
.content .donate-button,
.page-section .donate-button {
	margin-top: 1.25rem;
}

/* Keep centred when dropped into content cards */

.alert-box .donate-button,
.page-section .donate-button {
	display: flex;
}

/* ==========================================
   SMALL SCREEN REFINEMENT
========================================== */

@media (max-width: 480px) {
	.donate-button .button,
	.donate-button .button.large {
		min-height: 46px;

		padding: 0.68rem 1.18rem 0.68rem 0.76rem !important;

		font-size: 0.96rem;
	}

	.donate-button .button::before,
	.donate-button .button.large::before {
		width: 1.5rem;
		height: 1.5rem;

		flex-basis: 1.5rem;

		font-size: 0.84rem;
	}
}
 /* Begin CSS Part: Colours */
/* ==========================================
   WATMAN WEB FRAMEWORK
   COLOURS
========================================== */

:root {
	--ww-color-body-bg: #ffffff;

	--ww-color-primary: #AF126D;
	--ww-color-primary-text: #ffffff;

	--ww-color-secondary: #4D4F53;
	--ww-color-secondary-text: #FFFFFF;

	--ww-color-header-bg: #ffffff;
	--ww-color-header-text: #4D4F53;

	--ww-color-footer-bg: #4D4F53;
	--ww-color-footer-text: #ffffff;

	--ww-color-heading-main: #4D4F53;
	--ww-color-heading-secondary: #AF126D;
	--ww-color-heading-tertiary: #AF126D;
	--ww-color-text: #4D4F53;

	--ww-color-link: #AF126D;
	--ww-color-link-hover: #22323b;
	--ww-color-link-visited: #3F536E;

	--ww-color-button-bg: #AF126D;
	--ww-color-button-text: #ffffff;
	--ww-color-button-border: #AF126D;
	--ww-color-button-bg-hover: #4D4F53;
	--ww-color-button-text-hover: #ffffff;
	--ww-color-button-border-hover: #4D4F53;

	--ww-color-border: #969696;
	--ww-color-border-hover: #4a4a4a;
}
 /* Begin CSS Part: Menus */
/* ==========================================
   WATMAN WEB FRAMEWORK
   MENUS
========================================== */

/* Global menu reset */

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

a,
a:visited {
	color: inherit;
	text-decoration: none;
}

/* ==========================================
   HEADER MENU
========================================== */

.header-menu-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
}

.header-menu > .menubar,
.header-menu .menubar.horizontal:first-child {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 2rem;
}

.header-menu .menubar.horizontal > li {
	position: relative;
}

.header-menu .menubar.horizontal > li > a,
.header-menu .menubar.horizontal > li > a:visited {
	position: relative;
	display: block;
	padding: 0.5rem 0;

	color: #4D4F53;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	transition:
		color var(--ww-transition-fast),
		opacity var(--ww-transition-fast);
}

.header-menu .menubar.horizontal > li > a:hover,
.header-menu .menubar.horizontal > li > a:focus {
	color: #AF126D;
	opacity: 0.75;
}

.header-menu .menubar.horizontal > li.active > a {
	color: #AF126D;
}

/* Top-level underline only */

.header-menu .menubar.horizontal > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;

	width: 100%;
	height: 2px;

	background: currentColor;

	transform: scaleX(0);
	transform-origin: center;

	transition: transform 0.25s ease;
}

.header-menu .menubar.horizontal > li > a:hover::after,
.header-menu .menubar.horizontal > li > a:focus::after,
.header-menu .menubar.horizontal > li.active > a::after {
	transform: scaleX(1);
}

/* Parent arrow */

.header-menu .menubar.horizontal > li.has_child > a .link-text::after {
	content: "▾";
	display: inline-block;
	margin-left: 8px;
	font-size: 0.75em;
	transform: translateY(-1px);
}

/* ==========================================
   HEADER SUBMENU
========================================== */

.header-menu .menubar.horizontal > li > ul {
	position: absolute;
	top: 100%;
	left: 0;

	display: block;
	min-width: 280px;
	padding: 8px;
	margin: 0;

	list-style: none;
	background: #fff;
	border-radius: 0 0 18px 18px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);

	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);

	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s ease;

	z-index: 50;
}

.header-menu .menubar.horizontal > li:hover > ul,
.header-menu .menubar.horizontal > li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header-menu .menubar.horizontal > li > ul > li {
	display: block;
	width: 100%;
}

.header-menu .menubar.horizontal > li > ul a,
.header-menu .menubar.horizontal > li > ul a:visited {
	display: block;
	padding: 9px 14px;

	border-radius: 10px;

	color: #4D4F53;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;

	transition:
		background-color var(--ww-transition-fast),
		color var(--ww-transition-fast);
}

/* Remove underline effect from submenu */

.header-menu .menubar.horizontal > li > ul a::after {
	display: none;
}

.header-menu .menubar.horizontal > li > ul a:hover,
.header-menu .menubar.horizontal > li > ul a:focus {
	background: #AF126D;
	color: #fff;
	opacity: 1;
}
 /* Begin CSS Part: Responsive Menu */
/* ==========================================
   WATMAN WEB FRAMEWORK
   RESPONSIVE MENU
   YMCA WELLINGTON
========================================== */

.responsive-menu-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}

/* ==========================================
   FIXED RESPONSIVE HEADER
========================================== */

.responsive-menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	width: 100%;

	background: #fff;
	color: #4D4F53;

	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   TOP INFO BAR
========================================== */

.responsive-menu-header-container {
	width: 100%;
	min-height: 0;

	padding: 0.35rem 0;

	background: #e5e6e8;
	color: #4D4F53;
}

.responsive-menu-header-container > .i {
	width: min(100% - var(--ww-page-gutter), var(--ww-container-max));
	margin-inline: auto;
}

.responsive-menu-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.responsive-menu-header h3 {
	margin: 0;

	color: #4D4F53;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* ==========================================
   MAIN MOBILE HEADER ROW
========================================== */

.responsive-menu-container {
	width: min(100% - var(--ww-page-gutter), var(--ww-container-max));
	min-height: var(--ww-header-height-mobile);
	margin-inline: auto;

	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;

	padding: 0.65rem 0;

	background: #fff;
}

.responsive-logo-container,
.responsive-actions-container {
	position: relative;
	z-index: 1002;
}

.responsive-logo {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
}

.responsive-logo p {
	margin: 0 !important;
}

.responsive-logo img {
	display: block;

	width: clamp(220px, 54vw, 360px);
	max-width: 100%;
	height: auto;
}

.responsive-logo .inflate {
	position: absolute;
	inset: 0;
	z-index: 2;

	display: block;

	width: 100%;
	height: 100%;
}

.responsive-actions-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.responsive-menu-trigger {
	position: relative;
	z-index: 1002;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	border-radius: 999px;

	background: #AF126D;
	box-shadow: 0 10px 24px rgba(175, 18, 109, 0.18);

	cursor: pointer;

	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.responsive-menu-trigger:hover,
.responsive-menu-trigger:focus {
	background: #4D4F53;
	transform: translateY(-2px);

	box-shadow: 0 14px 32px rgba(77, 79, 83, 0.22);
}

.responsive-menu-trigger img {
	display: block;

	width: 24px;
	height: 24px;

	object-fit: contain;
}

/* ==========================================
   SLIDE-OUT PANEL
========================================== */

.responsive-slave {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;

	width: min(90vw, 440px);
	height: 100vh;

	display: flex;
	flex-direction: column;

	overflow-y: auto;
	overflow-x: hidden;

	background:
		linear-gradient(
			135deg,
			rgba(77, 79, 83, 0.40) 0%,
			rgba(77, 79, 83, 0.38) 46%,
			rgba(175, 18, 109, 0.22) 100%
		),
		url("/userfiles/css/images/menubgtall.jpg");

	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	color: #fff;

	box-shadow:
		0 0 0 0 rgba(0, 0, 0, 0),
		-10px 0 30px rgba(0, 0, 0, 0.25);

	transform: translateX(100%);

	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

.responsive-slave::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 0;

	background:
		radial-gradient(circle at 22% 15%, rgba(237, 140, 1, 0.22), transparent 34%),
		radial-gradient(circle at 86% 78%, rgba(155, 211, 242, 0.18), transparent 35%),
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.18),
			rgba(0, 0, 0, 0.38)
		);

	pointer-events: none;
}

.responsive-slave::after {
	content: "";

	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	width: 100%;
	height: 8px;

	background: linear-gradient(
		90deg,
		#ED8C01,
		#B5CB52,
		#9BD3F2,
		#81C3AF,
		#F7BF1F
	);

	pointer-events: none;
}

/* Open state applied by EOS */

.responsive-slave.open {
	transform: translateX(0);

	box-shadow:
		0 0 0 100vmax rgba(0, 0, 0, 0.58),
		-10px 0 30px rgba(0, 0, 0, 0.25);
}

/* Keep panel children above overlays */

.responsive-slave > * {
	position: relative;
	z-index: 2;
}

/* ==========================================
   CLOSE BUTTON
========================================== */

.slave-close,
.slave-close:visited {
	position: absolute;
	top: 1.15rem;
	right: 1.25rem;
	z-index: 1003;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	overflow: hidden;

	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;

	color: transparent;
	text-decoration: none;
	text-indent: -9999px;

	backdrop-filter: blur(5px);

	cursor: pointer;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.slave-close::before,
.slave-close::after {
	content: "";

	position: absolute;

	width: 18px;
	height: 3px;

	background: #fff;
	border-radius: 999px;
}

.slave-close::before {
	transform: rotate(45deg);
}

.slave-close::after {
	transform: rotate(-45deg);
}

.slave-close:hover,
.slave-close:focus {
	background: #AF126D;
	border-color: #AF126D;

	transform: translateY(-2px);
}

/* ==========================================
   SLAVE LOGO
========================================== */

.slave-logo {
	padding: 3.25rem 1.5rem 1.5rem;
	text-align: left;
}

.slave-logo img {
	display: block;

	width: min(220px, 62vw);
	height: auto;
}

/* ==========================================
   SLAVE MENU
========================================== */

.slave-menu {
	padding: 0 1rem 1.25rem;
	text-align: left;
}

.responsive-slave .menubar {
	display: flex;
	flex-direction: column;
	gap: 0;

	list-style: none;
	margin: 0;
	padding: 0;

	text-align: left;
}

.responsive-slave .menubar li {
	position: relative;
	margin: 0;
	padding: 0;

	text-align: left;
}

/* ==========================================
   MAIN MENU LINKS
========================================== */

.responsive-slave .menubar.vertical > li > a,
.responsive-slave .menubar.vertical > li > a:visited {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	margin: 0 0 0.65rem;
	padding: 1rem 1.1rem;

	background: rgba(255, 255, 255, 0.11);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 16px;

	color: #fff;
	text-align: left;
	text-decoration: none;

	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.15;

	backdrop-filter: blur(5px);

	opacity: 0;
	transform: translateX(20px);

	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}

.responsive-slave .menubar.vertical > li > a .link-text,
.responsive-slave .menubar.vertical > li > a span {
	min-width: 0;
	text-align: left;
}

.responsive-slave.open .menubar.vertical > li > a {
	opacity: 1;
	transform: translateX(0);
}

.responsive-slave .menubar.vertical > li > a:hover,
.responsive-slave .menubar.vertical > li > a:focus,
.responsive-slave .menubar.vertical > li.active > a {
	background: #AF126D;
	border-color: rgba(255, 255, 255, 0.30);
	color: #fff;
}

/* ==========================================
   PARENT MENU TOGGLE VISUAL
========================================== */

.responsive-slave .menubar.vertical > li.has_child > a::after {
	content: "+";

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	flex: 0 0 30px;

	background: rgba(255, 255, 255, 0.16);
	border-radius: 999px;

	color: #fff;

	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.responsive-slave .menubar.vertical > li.has_child.is-open > a::after {
	content: "−";
	background: #fff;
	color: #AF126D;
	transform: rotate(180deg);
}

/* ==========================================
   CHILD MENU / SUBLINKS
========================================== */

.responsive-slave .menubar.vertical > li > ul {
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;

	width: 100%;
	margin: -0.25rem 0 0.85rem;
	padding: 0.6rem;

	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;

	text-align: left;

	backdrop-filter: blur(5px);
}

.responsive-slave .menubar.vertical > li.is-open > ul {
	display: flex;
}

.responsive-slave .menubar.vertical > li > ul > li {
	width: 100%;
	margin: 0;
	padding: 0;

	text-align: left;
}

.responsive-slave .menubar.vertical > li > ul > li > a,
.responsive-slave .menubar.vertical > li > ul > li > a:visited {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;

	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0.82rem 0.95rem;

	background: rgba(255, 255, 255, 0.075);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;

	color: rgba(255, 255, 255, 0.94);
	text-align: left;
	text-decoration: none;

	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.25;

	opacity: 1;
	transform: none;

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

/* Keep submenu text left aligned even if EOS injects spans */

.responsive-slave .menubar.vertical > li > ul > li > a .link-text,
.responsive-slave .menubar.vertical > li > ul > li > a span {
	display: block;

	min-width: 0;

	text-align: left;
	margin-right: auto;
}

.responsive-slave .menubar.vertical > li > ul > li > a::before {
	content: "";

	display: block;

	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.65rem;

	border-radius: 50%;
	background: #9BD3F2;

	flex: 0 0 0.45rem;
}

.responsive-slave .menubar.vertical > li > ul > li > a:hover,
.responsive-slave .menubar.vertical > li > ul > li > a:focus,
.responsive-slave .menubar.vertical > li > ul > li.active > a {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.18);
	color: #fff;

	transform: translateX(3px);
}

/* ==========================================
   DONATE BUTTON IN SLAVE
========================================== */

.slave-button,
.slave-button.donate-button {
	padding: 0 1rem 1.5rem;
	margin-top: auto;
}

.slave-button .button,
.slave-button .button:visited,
.slave-button.donate-button .button,
.slave-button.donate-button .button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;

	width: 100%;
	min-height: 52px;

	padding: 0.95rem 1.35rem;

	background: #fff;
	border: 2px solid #fff;
	border-radius: 999px;

	color: #AF126D !important;

	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-decoration: none;

	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);

	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.slave-button .button::before,
.slave-button.donate-button .button::before {
	content: "♥";

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 1.65rem;
	height: 1.65rem;

	border-radius: 999px;

	background: #AF126D;
	color: #fff;

	font-size: 0.95rem;
	font-weight: 900;
	line-height: 1;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.slave-button .button:hover,
.slave-button .button:focus,
.slave-button.donate-button .button:hover,
.slave-button.donate-button .button:focus {
	background: #AF126D;
	border-color: #AF126D;
	color: #fff !important;

	transform: translateY(-3px);

	box-shadow: 0 18px 42px rgba(175, 18, 109, 0.30);
}

.slave-button .button:hover::before,
.slave-button .button:focus::before,
.slave-button.donate-button .button:hover::before,
.slave-button.donate-button .button:focus::before {
	background: #fff;
	color: #AF126D;

	transform: scale(1.08);
}

/* ==========================================
   BODY OFFSET
   Only needed if desktop header is hidden on mobile
========================================== */

@media (max-width: 1000px) {
	body {
		padding-top: calc(var(--ww-header-height-mobile) + 20px) !important;
	}
}

/* ==========================================
   MOBILE REFINEMENTS
========================================== */

@media (max-width: 480px) {
	.responsive-slave {
		width: min(92vw, 390px);
	}

	.responsive-menu-container {
		min-height: 74px;
		padding-block: 0.6rem;
	}

	.responsive-logo img {
		width: clamp(210px, 62vw, 300px);
	}

	.responsive-menu-trigger {
		width: 46px;
		height: 46px;
	}

	.responsive-menu-trigger img {
		width: 23px;
		height: 23px;
	}

	.slave-logo {
		padding-top: 3rem;
	}

	.responsive-slave .menubar.vertical > li > a {
		padding: 0.95rem 1rem;
		font-size: 1rem;
	}

	.responsive-slave .menubar.vertical > li > ul {
		gap: 0.4rem;
		padding: 0.55rem;
	}

	.responsive-slave .menubar.vertical > li > ul > li > a {
		padding: 0.78rem 0.85rem;
		font-size: 0.9rem;
	}
}
 /* Begin CSS Part: Editor Overrides */

 /* Begin CSS Part: Specials */

 /* Begin CSS Part: Effects */

 /* Begin CSS Part: Site Design */
/* ==========================================
   HEADER
========================================== */

.header-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	background: var(--ww-color-header-bg);
	color: var(--ww-color-header-text);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Reset shared header rows */

.header-container {
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* Keep row content contained */

.header-container > .i {
	width: min(100% - var(--ww-page-gutter), var(--ww-container-max));
	margin-inline: auto;
}

/* ==========================================
   HEADER INFO BAR
========================================== */

.header-container-info {
	width: 100%;
	min-height: 0;
	padding: 0.6rem 0;

	background: #e5e6e8;
	color: #4D4F53;
}

.header-container-info > .i {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.header-container-info .textblock {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.header-container-info h3 {
	margin: 0;
	color: #4D4F53;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* ==========================================
   HEADER MAIN
========================================== */

.header-container-main {
	background: transparent;
}

.header-container-main > .i {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;

	min-height: var(--ww-header-height-desktop);
	padding: 0.75rem 0;
}

/* ==========================================
   LOGO
========================================== */

.header-logo-container {
	flex: 0 0 auto;
	flex-shrink: 0;
}

.logo-main-link {
	display: block;
	text-decoration: none;
}

.logo-main,
.header-logo .logo-main {
	display: block;
	width: auto;
	max-width: 280px;
	height: auto;
}

/* ==========================================
   MENU CONTAINER
========================================== */

.header-menu-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	flex: 1;
}

.header-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
}

.header-menu .menubar {
	gap: 1.4rem;
}


 /* Begin CSS Part: User Design */

 /* Begin CSS Part: Site Components */

 /* Begin CSS Part: Results */

 /* Begin CSS Part: Pages */

 /** Begin CSS Section: modules */

 /* Begin CSS Part: 404 */

 /* Begin CSS Part: Admin */

 /* Begin CSS Part: Analytics Data */

 /* Begin CSS Part: Auth */

 /* Begin CSS Part: Auto Pdf */

 /* Begin CSS Part: Basket */

 /* Begin CSS Part: Calendar */

 /* Begin CSS Part: Categories */

 /* Begin CSS Part: Checkout */

 /* Begin CSS Part: Collation */

 /* Begin CSS Part: Collation Admin */

 /* Begin CSS Part: Cookies */

#cookie-compliance {
    z-index: 1000000000;
    position: fixed;
    bottom: 0px;
    background-color: #333 !important;
    border-top: 2px solid #fff !important;
    width: 100%;
    left: 0px;
    text-align: left !important;
}

.layout-component.cookie-selection * {
    text-align: left !important;
}

#cookie-compliance .mod_cookies {
    padding: 24px !important;
}

#cookie-compliance * {
    color:#fff !important;
}

#cookie-compliance {
    overflow:hidden;
}

.layout-component.cookie-selection .checkbox input {
    display:inline-block;
    width:auto;
}
.layout-component.cookie-selection .checkbox span {
    display: inline-block;
    width: auto;
    font-weight: bold;
    vertical-align: top;
    line-height: 16px;
    font-size: 16px;
}

.cookie-selection .description {
    font-size:14px;
}

.layout-component.cookie-selection p, .layout-component.cookie-selection p a {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-bottom: 12px !important;
}

.layout-component.cookie-selection p {
    display: inline-block;
}

#cookie-compliance div.compliance-ok{
    display: inline-block;
    background-color: green;
    color: #fff;
    padding: 2px 12px;
    font-size: 12px;
    border-radius: 2px;
    cursor:pointer;
}


.cookie-selection > .cookie-selection {
    border-top: 1px solid #fff;
    padding: 12px;
}

.layout-component.cookie-selection .button {
    border: 1px solid #fff !important;
    background-color: transparent !important;
    font-size: 14px;
    padding: 8px 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

#cookie-compliance div.saved-mask {
    position: absolute;
    height: 100%;
    width:100%;
    background-color: #333 !important;
    border-top: 2px solid #fff !important;
    text-align: center;
    font-size:20px;
    padding:24px;
    color:#fff;
}
/* ==========================================
   COOKIE POPUP / BANNER
   Use with:
   #cookie-compliance
   .cookie-pop-up-container
========================================== */

/* ==========================================
   COOKIE BAR SHELL
========================================== */

body #cookie-compliance {
	position: fixed !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: min(78vh, 560px) !important;

	z-index: var(--ww-z-cookie, 9999) !important;

	overflow-y: auto !important;
	overflow-x: hidden !important;

	background: #4D4F53 !important;
	color: #fff !important;

	border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
	box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.28);

	text-align: left !important;
}

/* ==========================================
   RESET EOS COOKIE SPACING
========================================== */

body #cookie-compliance,
body #cookie-compliance * {
	box-sizing: border-box !important;
}

body #cookie-compliance .layout,
body #cookie-compliance .layout-cell,
body #cookie-compliance .layout-component {
	min-width: 0 !important;
}

body #cookie-compliance .layout-cell,
body #cookie-compliance .layout-component {
	margin: 0 !important;
}

body #cookie-compliance p,
body #cookie-compliance h2,
body #cookie-compliance label {
	color: #fff !important;
}

/* ==========================================
   COOKIE POPUP OUTER LAYOUT
========================================== */

body #cookie-compliance .cookie-pop-up-container {
	width: min(100% - var(--ww-page-gutter), var(--ww-container-max));

	margin: 0 auto !important;
	padding: 1rem 0 !important;
}

body #cookie-compliance .cookie-pop-up-container > .layout-cell {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 700px) !important;
	align-items: center !important;
	gap: 1.25rem 2rem !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   POPUP TEXT
========================================== */

body #cookie-compliance .cookie-pop-up-container .textblock {
	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .cookie-pop-up-container .textblock h2 {
	margin: 0 0 0.4rem !important;
	padding: 0 !important;

	color: #fff !important;

	font-size: clamp(1.35rem, 2vw, 1.8rem) !important;
	font-weight: 900 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
}

body #cookie-compliance .cookie-pop-up-container .textblock p {
	max-width: 980px !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #fff !important;

	font-size: 0.9rem !important;
	line-height: 1.45 !important;
}

body #cookie-compliance .cookie-pop-up-container a,
body #cookie-compliance .cookie-pop-up-container a:visited {
	color: #fff !important;
	text-decoration-color: rgba(255, 255, 255, 0.7) !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.18em !important;
}

body #cookie-compliance .cookie-pop-up-container a:hover,
body #cookie-compliance .cookie-pop-up-container a:focus {
	color: #fff !important;
	text-decoration-color: #fff !important;
}

/* ==========================================
   POPUP PREFERENCES WRAPPER
========================================== */

body #cookie-compliance .cookie-pop-up-container .preferences,
body #cookie-compliance .cookie-pop-up-container .mod_cookies_component_preferences {
	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .cookie-pop-up-container .mod_cookies_component_preferences {
	display: block !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Main preferences cell */

body #cookie-compliance .cookie-pop-up-container .mod_cookies_component_preferences > .layout-cell.cookie-selection {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	grid-template-areas:
		"label buttons"
		"choices buttons" !important;

	align-items: center !important;
	gap: 0.55rem 1.25rem !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   POPUP PREFERENCES TITLE
========================================== */

body #cookie-compliance .cookie-pop-up-container .layout-cell.cookie-selection > label {
	grid-area: label !important;

	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #fff !important;

	font-size: 0.78rem !important;
	font-weight: 900 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

/* ==========================================
   POPUP COOKIE CHOICES
========================================== */

body #cookie-compliance .cookie-pop-up-container .layout-cell.cookie-selection > .layout-component.cookie-selection {
	grid-area: choices !important;

	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.75rem 1.25rem !important;

	width: 100% !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection > .cookie-selection {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;

	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection .checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection .checkbox input {
	display: inline-block !important;

	width: 16px !important;
	height: 16px !important;

	margin: 0 !important;
	padding: 0 !important;

	accent-color: #AF126D !important;
}

body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection .checkbox input:disabled {
	opacity: 0.6 !important;
}

body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection .cookie-name {
	display: inline-block !important;

	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #fff !important;

	font-size: 0.9rem !important;
	font-weight: 850 !important;
	line-height: 1.2 !important;
}

/* Hide option descriptions to keep the banner compact */

body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection .description {
	display: none !important;
}

/* ==========================================
   POPUP BUTTON ROW
========================================== */

body #cookie-compliance .cookie-pop-up-container .layout-cell.cookie-selection > .layout-cell {
	grid-area: buttons !important;

	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 0.7rem !important;

	width: auto !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #cookie-compliance .cookie-pop-up-container .layout-component.accept-all,
body #cookie-compliance .cookie-pop-up-container .layout-component.save-choices,
body #cookie-compliance .cookie-pop-up-container .layout-component.refuse-all {
	display: inline-flex !important;

	width: auto !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   POPUP COOKIE BUTTONS
========================================== */

body #cookie-compliance .cookie-pop-up-container .button,
body #cookie-compliance .cookie-pop-up-container button,
body #cookie-compliance .cookie-pop-up-container div.compliance-ok {
	position: relative !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: auto !important;
	min-width: 0 !important;
	min-height: 36px !important;

	margin: 0 !important;
	padding: 0.5rem 0.78rem !important;

	background: transparent !important;
	color: #fff !important;

	border: 2px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 999px !important;

	box-shadow: none !important;

	font: inherit !important;
	font-size: 0.78rem !important;
	font-weight: 850 !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;

	cursor: pointer !important;

	transform: translateY(0) !important;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease !important;
}

/* Popup primary button */

body #cookie-compliance .cookie-pop-up-container .accept-all button.button,
body #cookie-compliance .cookie-pop-up-container button.accept-all {
	background: #AF126D !important;
	border-color: #AF126D !important;
	color: #fff !important;
}

/* Popup save button */

body #cookie-compliance .cookie-pop-up-container .save-choices button.button,
body #cookie-compliance .cookie-pop-up-container button.save {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.9) !important;
	color: #fff !important;
}

/* Popup essential only */

body #cookie-compliance .cookie-pop-up-container .refuse-all button.button,
body #cookie-compliance .cookie-pop-up-container button.refuse-all {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	color: #fff !important;
}

body #cookie-compliance .cookie-pop-up-container .button:hover,
body #cookie-compliance .cookie-pop-up-container .button:focus,
body #cookie-compliance .cookie-pop-up-container button:hover,
body #cookie-compliance .cookie-pop-up-container button:focus,
body #cookie-compliance .cookie-pop-up-container div.compliance-ok:hover,
body #cookie-compliance .cookie-pop-up-container div.compliance-ok:focus {
	background: #fff !important;
	color: #4D4F53 !important;
	border-color: #fff !important;

	box-shadow: none !important;
	transform: translateY(-1px) !important;
}

/* Remove global button decoration inside cookie banner */

body #cookie-compliance .cookie-pop-up-container .button::before,
body #cookie-compliance .cookie-pop-up-container .button::after,
body #cookie-compliance .cookie-pop-up-container button::before,
body #cookie-compliance .cookie-pop-up-container button::after {
	display: none !important;
}

/* ==========================================
   SAVED CONFIRMATION TOAST
========================================== */

body #cookie-compliance .saved-mask {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: 1rem !important;
	inset: auto auto 1rem 50% !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: min(calc(100% - 2rem), 420px) !important;
	height: auto !important;
	min-height: 0 !important;

	padding: 1rem 1.25rem !important;

	background: #4D4F53 !important;
	color: #fff !important;

	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 999px !important;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);

	text-align: center !important;
	font-size: 1rem !important;
	font-weight: 850 !important;
	line-height: 1.25 !important;

	transform: translateX(-50%) !important;

	pointer-events: none !important;

	animation: ymca-cookie-saved-toast 2.8s ease forwards;
}

body #cookie-compliance .saved-mask.hidden {
	display: none !important;
}

@keyframes ymca-cookie-saved-toast {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}

	12%,
	78% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	100% {
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(10px);
	}
}

/* ==========================================
   MOBILE COOKIE BANNER
========================================== */

@media (max-width: 767px) {
	body #cookie-compliance {
		max-height: 72vh !important;

		border-radius: var(--ww-radius-m, 20px) var(--ww-radius-m, 20px) 0 0 !important;
	}

	body #cookie-compliance .cookie-pop-up-container {
		width: calc(100% - 2rem) !important;
		padding: 1rem 0 !important;
	}

	body #cookie-compliance .cookie-pop-up-container > .layout-cell {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}

	body #cookie-compliance .cookie-pop-up-container .textblock h2 {
		font-size: 1.5rem !important;
	}

	body #cookie-compliance .cookie-pop-up-container .textblock p {
		font-size: 0.85rem !important;
		line-height: 1.45 !important;
	}

	body #cookie-compliance .cookie-pop-up-container .preferences {
		width: 100% !important;
	}

	body #cookie-compliance .cookie-pop-up-container .mod_cookies_component_preferences > .layout-cell.cookie-selection {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"label"
			"choices"
			"buttons" !important;

		gap: 0.75rem !important;
	}

	body #cookie-compliance .cookie-pop-up-container .layout-component.cookie-selection {
		gap: 0.7rem 1rem !important;
	}

	body #cookie-compliance .cookie-pop-up-container .layout-cell.cookie-selection > .layout-cell {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 0.65rem !important;

		width: 100% !important;
		justify-content: stretch !important;
	}

	body #cookie-compliance .cookie-pop-up-container .layout-component.accept-all,
	body #cookie-compliance .cookie-pop-up-container .layout-component.save-choices,
	body #cookie-compliance .cookie-pop-up-container .layout-component.refuse-all {
		width: 100% !important;
	}

	body #cookie-compliance .cookie-pop-up-container .button,
	body #cookie-compliance .cookie-pop-up-container button,
	body #cookie-compliance .cookie-pop-up-container div.compliance-ok {
		width: 100% !important;
		min-height: 40px !important;

		padding: 0.65rem 0.8rem !important;

		white-space: normal !important;
	}
}
 /* Begin CSS Part: Crm */

 /* Begin CSS Part: Currency Converter */

 /* Begin CSS Part: Discount */

 /* Begin CSS Part: Email Template */

 /* Begin CSS Part: Faq */

 /* Begin CSS Part: Form */

 /* Begin CSS Part: Google Analytics */

 /* Begin CSS Part: Home */

 /* Begin CSS Part: Image Library */

 /* Begin CSS Part: Memorial */

 /* Begin CSS Part: Multi User */

 /* Begin CSS Part: News Letter */

 /* Begin CSS Part: Order Manager */

 /* Begin CSS Part: Orders */

 /* Begin CSS Part: Payment Gateway */

 /* Begin CSS Part: Paypal Express */

 /* Begin CSS Part: Qanda */

 /* Begin CSS Part: Redirect */

 /* Begin CSS Part: Review */

 /* Begin CSS Part: Schema */

 /* Begin CSS Part: Scroller */
/* ==========================================
   WATMAN WEB FRAMEWORK
   SCROLLER / BANNERS
   Optimised for 3000px x 1000px banner images
========================================== */

:root {
	--ww-banner-height: clamp(360px, 33.333vw, 820px);
	--ww-banner-height-large: clamp(420px, 33.333vw, 880px);
	--ww-banner-height-mobile: 520px;
	--ww-banner-height-mobile-large: 580px;

	/* Small optical lift so titles feel vertically centred */
	--ww-banner-content-lift: clamp(-1.5rem, -1.6vw, -0.6rem);
	--ww-banner-content-lift-mobile: -0.5rem;
}

/* ==========================================
   SHARED BANNER CONTENT
========================================== */

.scroller-banner-header .nested-banner-content,
.static-banner-header .nested-banner-content,
.video-banner-header .nested-banner-content,
.inline-image-banner .nested-banner-content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

width: min(100% - var(--ww-page-gutter), var(--ww-container-max));
	margin-inline: auto;
	padding-block: clamp(2rem, 4vw, var(--ww-space-xl));

	color: #fff;

	transform: translateY(var(--ww-banner-content-lift));
}

/* Match each banner type's content height */

.scroller-banner-header .nested-banner-content,
.video-banner-header .nested-banner-content {
	min-height: var(--ww-banner-height-large);
}

.static-banner-header .nested-banner-content,
.inline-image-banner .nested-banner-content {
	min-height: var(--ww-banner-height);
}

/* Content width */

.scroller-banner-header .nested-banner-content .content,
.static-banner-header .nested-banner-content .content,
.static-banner-header .nested-banner-content .title,
.video-banner-header .nested-banner-content .content,
.video-banner-header .nested-banner-content .title,
.inline-image-banner .nested-banner-content .content,
.inline-image-banner .nested-banner-content .title {
	max-width: 760px;
}

/* Banner headings */

.scroller-banner-header .nested-banner-content h1,
.scroller-banner-header .nested-banner-content h2,
.static-banner-header .nested-banner-content h1,
.static-banner-header .nested-banner-content h2,
.video-banner-header .nested-banner-content h1,
.video-banner-header .nested-banner-content h2,
.inline-image-banner .nested-banner-content h1,
.inline-image-banner .nested-banner-content h2 {
	color: inherit;
	margin: 0 0 1rem;

	font-size: clamp(2.4rem, 5vw, 5.75rem);
	line-height: 0.95;
	font-weight: 800;

	text-wrap: balance;
}

/* Banner paragraphs */

.scroller-banner-header .nested-banner-content p,
.static-banner-header .nested-banner-content p,
.video-banner-header .nested-banner-content p,
.inline-image-banner .nested-banner-content p {
	color: inherit;
	margin: 0 0 2rem;

	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.45;
}

/* Remove bottom margin from final text element */

.scroller-banner-header .nested-banner-content p:last-child,
.static-banner-header .nested-banner-content p:last-child,
.video-banner-header .nested-banner-content p:last-child,
.inline-image-banner .nested-banner-content p:last-child {
	margin-bottom: 0;
}

/* ==========================================
   SCROLLER HERO BANNER
========================================== */

.hero-banner.scroller-banner-header,
.banner-scroller,
.banner-scroller .slide-container,
.banner-scroller .slide,
.banner-scroller .slide > .layout-cell {
	position: relative;
	width: 100%;
	min-height: var(--ww-banner-height-large);
}

.banner-scroller {
	overflow: hidden;
}

.banner-scroller .slide-container,
.banner-scroller .slide {
	min-height: var(--ww-banner-height-large) !important;
}

.banner-scroller .slide > .layout-cell {
	display: grid;
	align-items: stretch;
}

.scroller-banner-header .slide .background-image,
.scroller-banner-header .slide .banner-background-image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
}

.banner-background-image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Scroller readability overlay */

.scroller-banner-header .slide > .layout-cell::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(77, 79, 83, 0.82) 0%,
			rgba(77, 79, 83, 0.62) 38%,
			rgba(77, 79, 83, 0.15) 72%,
			rgba(77, 79, 83, 0) 100%
		);
}

/* Remove legacy overlay */

.banner-background-image::after {
	content: none;
}

/* ==========================================
   INLINE IMAGE BANNER
========================================== */

.hero-banner.inline-image-banner {
	position: relative;

	display: grid;
	align-items: stretch;

	width: 100%;
	min-height: var(--ww-banner-height);

	overflow: hidden;
	background: #4D4F53;
}

/* Current category wrappers */

.inline-image-banner > .current-category,
.inline-image-banner > .current-category > .layout,
.inline-image-banner > .current-category > .layout > .layout-cell {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
}

/* Image component */

.inline-image-banner .banner-image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
}

.inline-image-banner .banner-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;
}

/* Inline image readability overlay */

.inline-image-banner::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(77, 79, 83, 0.82) 0%,
			rgba(77, 79, 83, 0.62) 38%,
			rgba(77, 79, 83, 0.15) 72%,
			rgba(77, 79, 83, 0) 100%
		);
}

/* ==========================================
   STATIC PAGE BANNER
========================================== */

.static-banner-header {
	position: relative;

	width: 100%;
	min-height: var(--ww-banner-height);

	overflow: hidden;
}

.static-banner-header > .background-image {
	position: relative;

	display: grid;
	align-items: stretch;

	width: 100%;
	min-height: var(--ww-banner-height);

	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.static-banner-header > .background-image::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(77, 79, 83, 0.82) 0%,
			rgba(77, 79, 83, 0.62) 38%,
			rgba(77, 79, 83, 0.15) 72%,
			rgba(77, 79, 83, 0) 100%
		);
}

/* ==========================================
   VIDEO BANNER
========================================== */

.video-banner-header {
	position: relative;

	width: 100%;
	min-height: var(--ww-banner-height-large);

	overflow: hidden;
}

.video-banner-header video,
.video-banner-header iframe,
.video-banner-header .video,
.video-banner-header .video-background {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.video-banner-header::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(77, 79, 83, 0.82) 0%,
			rgba(77, 79, 83, 0.62) 38%,
			rgba(77, 79, 83, 0.15) 72%,
			rgba(77, 79, 83, 0) 100%
		);
}

/* ==========================================
   PAGER
========================================== */

.hero-banner .scroller-pager {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5rem;
	z-index: 5;
}

.hero-banner .sp-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.hero-banner .sp-link {
	width: 12px;
	height: 12px;

	overflow: hidden;
	border-radius: 999px;

	background: rgba(255, 255, 255, 0.5);

	text-indent: -999px;

	cursor: pointer;

	transition: background 0.3s ease;
}

.hero-banner .sp-link.active {
	background: #fff;
}

/* ==========================================
   HERO BANNER BUTTONS
========================================== */

.scroller-banner-header .button,
.static-banner-header .button,
.video-banner-header .button,
.inline-image-banner .button {
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid #fff;
	color: #fff;

	backdrop-filter: blur(4px);
}

.scroller-banner-header .button:hover,
.static-banner-header .button:hover,
.video-banner-header .button:hover,
.inline-image-banner .button:hover {
	background: #AF126D;
	border-color: #fff;
	color: #fff;
}

/* ==========================================
   STATIC BANNER DATE
   Use with:
   .static-banner-header .date
========================================== */

.static-banner-header .date {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: fit-content;
	max-width: max-content;

	margin-top: 1rem;
	padding: 0.55rem 1rem;

	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;

	color: #fff;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.03em;

	backdrop-filter: blur(5px);

	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.static-banner-header .date::before {
	content: "";

	display: block;

	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.55rem;

	border-radius: 50%;
	background: #AF126D;

	box-shadow: 0 0 0 4px rgba(175, 18, 109, 0.22);
}

/* Hide empty content block in banner */

.static-banner-header .content.empty {
	display: none;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 767px) {
	.hero-banner.scroller-banner-header,
	.banner-scroller,
	.banner-scroller .slide-container,
	.banner-scroller .slide,
	.banner-scroller .slide > .layout-cell,
	.video-banner-header {
		min-height: var(--ww-banner-height-mobile-large);
	}

	.banner-scroller .slide-container,
	.banner-scroller .slide {
		min-height: var(--ww-banner-height-mobile-large) !important;
	}

	.static-banner-header,
	.static-banner-header > .background-image,
	.hero-banner.inline-image-banner,
	.inline-image-banner .nested-banner-content {
		min-height: var(--ww-banner-height-mobile);
	}

	.scroller-banner-header .nested-banner-content,
	.video-banner-header .nested-banner-content {
		min-height: var(--ww-banner-height-mobile-large);
	}

	.static-banner-header .nested-banner-content,
	.inline-image-banner .nested-banner-content {
		min-height: var(--ww-banner-height-mobile);
	}

	.scroller-banner-header .nested-banner-content,
	.static-banner-header .nested-banner-content,
	.video-banner-header .nested-banner-content,
	.inline-image-banner .nested-banner-content {
		padding-block: 3rem;

		transform: translateY(var(--ww-banner-content-lift-mobile));
	}

	.scroller-banner-header .slide > .layout-cell::before,
	.static-banner-header > .background-image::before,
	.video-banner-header::before,
	.inline-image-banner::before {
		background:
			linear-gradient(
				180deg,
				rgba(77, 79, 83, 0.78) 0%,
				rgba(77, 79, 83, 0.62) 55%,
				rgba(77, 79, 83, 0.30) 100%
			);
	}

	.scroller-banner-header .nested-banner-content h1,
	.scroller-banner-header .nested-banner-content h2,
	.static-banner-header .nested-banner-content h1,
	.static-banner-header .nested-banner-content h2,
	.video-banner-header .nested-banner-content h1,
	.video-banner-header .nested-banner-content h2,
	.inline-image-banner .nested-banner-content h1,
	.inline-image-banner .nested-banner-content h2 {
		font-size: clamp(2.2rem, 12vw, 3.8rem);
		line-height: 1;
	}

	.static-banner-header .date {
		margin-top: 0.85rem;
		padding: 0.5rem 0.85rem;

		font-size: 0.85rem;
	}

	.static-banner-header .date::before {
		width: 0.5rem;
		height: 0.5rem;
		margin-right: 0.45rem;

		box-shadow: 0 0 0 3px rgba(175, 18, 109, 0.22);
	}
}
 /* Begin CSS Part: Search */

 /* Begin CSS Part: Search Results */

 /* Begin CSS Part: Seo */

 /* Begin CSS Part: Shipping */

 /* Begin CSS Part: Snippets */

 /* Begin CSS Part: Social Media */

 /* Begin CSS Part: Sub Layout */

 /* Begin CSS Part: System Manager */

 /* Begin CSS Part: Traffic */

 /* Begin CSS Part: User */

 /* Begin CSS Part: User Documents */

 /* Begin CSS Part: Warning */