/*
	Theme Name: Dance Camp Wales - Custom Styles
	Theme URI: http://www.dancecampwales.org.uk/
	Description: This is the Dace Camp Wales theme created for the Genesis Framework.
	Author: JamesBates
	Author URI: http://www.jamesbat.es

	Version: 1.0

	Template: genesis
	Template Version: 2.2.3

	License: GPL-2.0+
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/



/* # Table of Contents
- HTML5 Reset
	- Baseline Normalize
	- Box Sizing
	- Float Clearing
- Defaults
	- Typographical Elements
	- Headings
	- Objects
	- Gallery
	- Forms
	- Tables
	- Screen Reader Text
- Structure and Layout
	- Site Containers
	- Column Widths and Positions
	- Column Classes
- Common Classes
	- Avatar
	- Genesis
	- Search Form
	- Titles
	- WordPress
- Widgets
	- Featured Content
- Plugins
	- Genesis eNews Extended
	- Jetpack
- Skip Links
- Site Header
	- Title Area
	- Widget Area
- Site Navigation
	- Accessible Menu
	- Site Header Navigation
	- After Header Navigation
- Content Area
	- Entries
	- Entry Meta
	- Pagination
	- Comments
- Sidebars
- Footer Widgets
- Site Footer
- Media Queries
	- Max-width: 1340px
	- Max-width: 1200px
	- Max-width: 1023px
	- Max-width: 860px
	- Max-width: 782px
	- Max-width: 768px
	- Max-width: 580px
	- Max-width: 460px
- Print Styles
*/

/* # Fonts
---------------------------------------------------------------------------------------------------- */
/* Fonts are now loaded via fonts.css enqueued in functions.php */

/* # Yearly Color Updates
---------------------------------------------------------------------------------------------------- */

/* background-color: #b2a4d9; */ /* 2016: Soft Purple */
/* background-color: #6CA0C3; */ /* 2017: Sky Blue */
/* background-color: #e49535; */ /* 2018: Pumpkin Orange */
/* background-color: #68d4c9; */ /* 2019: Turquoise */
/* background-color: #d8639c; */ /* 2020: Raspberry */
/* background-color: #4CAEAA; */ /* 2023: Teal */
/* background-color: #e45353; */ /* 2024: Vivid Coral Red */
/* background-color: #ffbb00; */ /* 2025: Grass Green */
/* 2026 Yellow primary #ffbb00 - Blue secondary #203a52 */

/* #Primary Color */
.site-header,
.site-footer {
		/* background-color: #22aa88; */
		/* background-color: #2a967b; */
		/* background-color: #5caaa0; */
		background-color: #67a1a1;
}

/* #Secondary Color */
body,
.nav-secondary .genesis-nav-menu a:hover,
.nav-secondary .genesis-nav-menu a:focus,
.nav-secondary .genesis-nav-menu .current-menu-item > a,
.nav-secondary .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.nav-secondary .genesis-nav-menu .sub-menu .current-menu-item > a:focus {
	color: #fff;
	/* background-color: #2d587d; */
	background-color: #814664;
}

/* #Secondary Color - Darker */
.site-logo,
.nav-secondary,
.footer-widgets,
.site-title,
.nav-primary .genesis-nav-menu .wpmenucartli a {
	color: #fff;
	/* background-color: #222222; */
	/* background-color: #203a52; */
	background-color: #522c3e;
}

a {
	color: #886400;
}

a:hover,
a:focus {
	color: #5a4200;
	text-decoration: underline;
}

/* On the plum page surface and in the footer, #886400 is all but unreadable -
 * it is a leftover from the yellow year. These are the surfaces where body text
 * is white, so links take a light gold and go white on hover.
 *
 * Deliberately scoped to links inside running text. A bare ".entry-content a"
 * also catches links that wrap a whole card or button - the card then inherits
 * the link colour and underlines every line inside it on hover. */
.entry-content p a,
.entry-content li a,
.entry-content td a,
.entry-content dd a,
.footer-widgets p a,
.footer-widgets li a {
	color: #f2d492;
}

.entry-content p a:hover,
.entry-content p a:focus,
.entry-content li a:hover,
.entry-content li a:focus,
.entry-content td a:hover,
.entry-content td a:focus,
.entry-content dd a:hover,
.entry-content dd a:focus,
.footer-widgets p a:hover,
.footer-widgets p a:focus,
.footer-widgets li a:hover,
.footer-widgets li a:focus {
	color: #fff;
	text-decoration: underline;
}

/* The credits bar sits on the header teal, where the light gold has nothing to
 * push against - a deeper tone of the same teal reads as a link there. */
.site-footer a {
	color: #2f5f5f;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #1d4444;
	text-decoration: underline;
}

.nav-primary .genesis-nav-menu a {
	background-color: rgba(0,0,0,.2);
	color: #fff;
}

.nav-primary .genesis-nav-menu a:hover,	
.nav-primary .genesis-nav-menu a:focus,
.nav-primary .genesis-nav-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:focus  {
	background-color: rgba(0,0,0,.4);
	color: #fff;
}

.nav-primary .genesis-nav-menu .wpmenucartli a:hover,
.nav-primary .genesis-nav-menu .wpmenucartli a:focus {
	background-color: #814664;
}

@media only screen and (max-width: 1023px) {
	
	.js .nav-primary {
		color: inherit;
	}

	/* The toggle sits outside .nav-secondary, so it needs the nav colour itself
	 * - without it the bar is the page background and the padding disappears */
	.menu-toggle {
		background-color: #522c3e;
	}

	.js nav button:hover,
	.js .menu-toggle:hover,
	.js .nav-secondary {
		background-color: #522c3e;
		color: #fff;
	}

	.js .menu-toggle:hover {
		background-color: #814664;
	}

	.js nav button:focus,
	.js .menu-toggle:focus {
		background-color: #814664;
		color: #fff;
		outline: 0;
	}
}


.site-header #simple-social-icons-2 ul li a:hover,
.site-header#simple-social-icons-2 ul li a:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #727272 !important;
}

.site-header #simple-social-icons-2 ul li a,
.site-header #simple-social-icons-2 ul li a:hover,
.site-header#simple-social-icons-2 ul li a:focus {
    background-color: #ffffff !important;
    border-radius: 4px;
    color: #2d2d2d !important;
}


/* # HTML5 Reset
---------------------------------------------------------------------------------------------------- */

/* ## Baseline Normalize
--------------------------------------------- */
/* normalize.css v4.1.1 | MIT License | http://necolas.github.io/normalize.css/ */

/* ## Box Sizing
--------------------------------------------- */

/* ## Float Clearing
--------------------------------------------- */

/* # Defaults
---------------------------------------------------------------------------------------------------- */

/* ## Typographical Elements
--------------------------------------------- */

/* Body copy and every heading below scale on one shared ramp: full size at
 * 1023px and up, smallest at 460px and down, sliding between the two. Before
 * this, body text dropped straight from 22px to 16px at 860px while the
 * headings never moved at all, so a phone got 50px headings over 16px text.
 *
 * Each clamp is (floor, slope + intercept, ceiling), the middle term solved so
 * the line passes through the floor at 460px and the ceiling at 1023px. */

/* Chrome fix */
body > div {
	font-size: 2.2rem;
	font-size: clamp(18px, 0.71vw + 14.73px, 22px);
}

body {
	color: #fff;
	/* font-family: 'Source Sans Pro', sans-serif; */
	font-family: 'Crimson Pro', Georgia, serif;
	font-size: 22px;
	font-size: 2.2rem;
	font-size: clamp(18px, 0.71vw + 14.73px, 22px);
	font-weight: 400;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
/* 	color: #1d7dc2; */
	text-decoration: none;
}

/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Crimson Pro', Georgia, serif;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 10px;
}

.entry-title,
h1 {
	font-size: 50px;
	font-size: 5.0rem;
	font-size: clamp(32px, 3.2vw + 17.3px, 50px);
}

h2 {
	font-size: 50px;
	font-size: 5.0rem;
	font-size: clamp(32px, 3.2vw + 17.3px, 50px);
}

h3 {
	font-size: 42px;
	font-size: 4.2rem;
	font-size: clamp(28px, 2.49vw + 16.56px, 42px);
}

h4 {
	font-size: 36px;
	font-size: 3.6rem;
	font-size: clamp(25px, 1.95vw + 16.03px, 36px);
}

h5 {
	font-size: 28px;
	font-size: 2.8rem;
	font-size: clamp(21px, 1.24vw + 15.28px, 28px);
}

h6 {
	font-size: 22px;
	font-size: 2.2rem;
	font-size: clamp(18px, 0.71vw + 14.73px, 22px);
}



/* ## Objects
--------------------------------------------- */

/* ## Gallery
--------------------------------------------- */

/* ## Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.fl-button,
.fl-button span,
.fl-button-text,
.dcw-explore-button,
.dcw-booking-status-button {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
}

/* The serif body face is for running text. Everything that is interface rather
 * than prose - form fields and their labels, and the small print inside tables
 * - reads better and sits straighter in the sans. */
input,
select,
textarea,
label,
legend,
small,
.woocommerce td.product-name dl.variation,
.woocommerce td.product-name .wc-item-meta,
.woocommerce-checkout .woocommerce-checkout-review-order-table dl.variation {
	font-family: 'Source Sans Pro', sans-serif;
}

/* WooCommerce sets "font-family: inherit" on its own form fields from a
 * three-class selector, which outweighs the bare input/select/textarea above
 * and pulled the checkout fields back into the serif. body in front of it wins
 * on element count without needing !important. */
body .woocommerce form .form-row .input-text,
body .woocommerce form .form-row select,
body .woocommerce form .form-row textarea {
	font-family: 'Source Sans Pro', sans-serif;
}

/* The page builder styles its own buttons from
 * ".fl-builder-content .fl-button:is(a, button)", which outweighs a plain
 * .fl-button, so its buttons need the weight matched here. */
body .fl-builder-content a.fl-button,
body .fl-builder-content button.fl-button,
body .fl-builder-content a.fl-button *,
body .fl-builder-content button.fl-button * {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 700;
}

/* ## Page builder photo captions
--------------------------------------------- */

/* The page builder's own caption is 13px on a bare background with
 * `text-overflow: ellipsis`, so on the build diary pages it reads as a
 * footnote and clips the longer lines. Given the same translucent white the
 * page content buttons use, it sits under its photo as a label instead.
 *
 * .fl-builder-content in front so this outweighs .fl-photo-caption-below,
 * which sets its own padding on the very same element. */
.fl-builder-content .fl-photo-caption {
	display: block;
	overflow: visible;
	padding: 9px 14px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .24);
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.4;
	white-space: normal;
	text-overflow: clip;
}

/* Joined to the bottom edge of its photo rather than floating under it, so the
 * two read as one object - square where they meet, rounded where they do not. */
.fl-builder-content .fl-photo-caption {
	border-radius: 0 0 8px 8px;
}

.fl-builder-content .fl-photo-caption-below {
	margin-top: 0;
	padding-top: 9px;
}

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

	.fl-builder-content .fl-photo-caption {
		padding: 8px 12px;
		font-size: 15px;
		font-size: 1.5rem;
	}

}
/*
input[type=checkbox] {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	vertical-align: sub;
}

input[type=checkbox]:active,
input[type=checkbox]:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

input[type=checkbox]:checked {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

input[type=checkbox]:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #666666;
  line-height: normal;
}
*/

fieldset {
	margin-bottom: 20px;
}

/* ## Buttons - white outline
--------------------------------------------- */

/* The button for page content: white wording inside a 3px white frame over a
 * barely-there white fill, with 8px corners. It is the same frame the panels
 * and cards on the page wear, so a button reads as one of them rather than as
 * something borrowed, and it works on any of the coloured backgrounds the
 * content sits on. Hover lifts the fill rather than changing the colours.
 *
 * The set that wears it: .dcw-button, the contact and GDPR form buttons, the
 * password form, the CSV download form, the gallery's pagination, and the
 * explore and booking status buttons in the plugin's own stylesheets.
 *
 * The checkout's own large coloured buttons are deliberately left out - they
 * are the one action on the page and are meant to carry more weight than the
 * page around them.
 *
 * An opt-in button for links written into page content. Most of the site sits
 * on the plum background, where the default button (dark grey, red on hover)
 * is a leftover from an earlier colour year and reads as a warning rather
 * than an action.
 *
 * Deliberately its own class rather than a restyle of ".button", which
 * WooCommerce uses for add-to-cart, checkout and account buttons that are
 * styled to their own rules further down this file.
 *
 * Usage: <a class="dcw-button" href="...">Donate</a> */
.dcw-button,
a.dcw-button,
.entry-content a.dcw-button {
	display: inline-block;
	padding: 15px 34px;
	border: 3px solid #fff;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .14);
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.dcw-button:hover,
.dcw-button:focus,
a.dcw-button:hover,
a.dcw-button:focus,
.entry-content a.dcw-button:hover,
.entry-content a.dcw-button:focus {
	background-color: rgba(255, 255, 255, .28);
	color: #fff;
	text-decoration: none;
}

/* ## Tables
--------------------------------------------- */

/* ## Screen Reader Text
--------------------------------------------- */

/* # Structure and Layout
---------------------------------------------------------------------------------------------------- */

.site-inner,
.wrap {
	max-width: 1480px;
	padding-left: 40px;
	padding-right: 40px;
}

/* 1520 less the two 40px gutters puts the content panel on exactly 1440 - the
 * page builder's row width, so a boxed page and a full width one line up */
.site-inner {
	max-width: 1520px;
}

/* No padding at any width. .site-inner picks up 40px of side padding at the
 * top of this file, 28px on top at 1023 and below, 28px 20px 0 at 860 and
 * below, and 12px sides at 460 and below - the two classes here outrank all of
 * them, so one declaration covers every breakpoint. */
.edge-to-edge-content .site-inner {
	max-width: none;
	padding: 0;
}

/* ## Site Containers
--------------------------------------------- */

/* ## Column Widths and Positions
--------------------------------------------- */

/* ### Wrapping div for .content and .sidebar-primary */

/* ### Content */

/* ### Primary Sidebar */

/* ### Secondary Sidebar */

/* ## Column Classes
--------------------------------------------- */
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */

/* # Common Classes
---------------------------------------------------------------------------------------------------- */

/* ## Avatar
--------------------------------------------- */

/* ## Genesis
--------------------------------------------- */

/* ## Search Form
--------------------------------------------- */

/* ## Titles
--------------------------------------------- */

.widget-title {
	font-size: 24px;
	font-size: 2.4rem;
	margin-bottom: 20px;
}

/* ## WordPress
--------------------------------------------- */

/* # Widgets
---------------------------------------------------------------------------------------------------- */

/* ## Featured Content
--------------------------------------------- */

/* # Plugins
---------------------------------------------------------------------------------------------------- */

/* ## Genesis eNews Extended
--------------------------------------------- */

/* ## Jetpack
--------------------------------------------- */

/* # Skip Links
---------------------------------------------------------------------------------------------------- */

/* # Site Header
---------------------------------------------------------------------------------------------------- */

/* The logo is a circle that the title block tucks in behind. Both the overlap
 * and the indent that keeps the title text clear of the circle are worked out
 * from the logo's size, so a breakpoint only has to change --dcw-logo and the
 * whole lockup rescales together. --dcw-social is the gap kept clear at the end
 * of the date strip for the social icons. */
.site-header {
	--dcw-logo: 150px;
	--dcw-social: 110px;
}

.site-header > .wrap,
body .site-header > .wrap {
  padding: 20px 40px !important;
	position: relative !important;
}

/* ## Title Area
--------------------------------------------- */


.title-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	width: 700px;
}

.site-logo {
	background-image: url(images/logo-3.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: calc(100% - 10px) calc(100% - 10px); 
	border-radius: 140px;
  padding: 5px;
	vertical-align: middle;
	width: var(--dcw-logo);
	height: var(--dcw-logo);
	flex: 0 0 auto;
	/* margin-left: -13px; */
	z-index: 2;
	position: relative;
}

.title-desc-wrap {
	vertical-align: middle;
	margin-left: calc(var(--dcw-logo) * -0.293);
	/* No grow, so the boxes keep hugging the title; shrink with a zero minimum
	 * so a narrow screen squeezes the block rather than dropping it below the
	 * logo */
	flex: 0 1 auto;
	min-width: 0;
	z-index: 1;
	position: relative;
}

.site-title,
.second-line-title {
	font-weight: normal;
  font-family: 'calligraph421_btroman';
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: subpixel-antialiased !important;
}

.site-title {
	margin-bottom: 0;
	line-height: 1;
	color: #fff;
	font-size: 49px;
	font-size: 4.9rem;
	padding: 12px 30px 10px calc(var(--dcw-logo) * 0.42);
	border-top-right-radius: 6px;
}

.site-title a,
.site-title a:hover,
.site-title a:focus {
	color: #fff;
	/* The title lockup is one big link - an underline on hover would draw a
	 * line across the panel */
	text-decoration: none;
}

.second-line-title {
	color: #fff;
	background-color: rgba(0,0,0,.2);
	padding: 10px 30px 8px calc(var(--dcw-logo) * 0.42);
	border-bottom-right-radius: 6px;
	font-size: 35px;
	line-height: 1;
	margin-bottom: 0;
	letter-spacing: 2.4px;
}

.second-line-title a,
.second-line-title a:hover,
.second-line-title a:focus {
	color: inherit;
	text-decoration: none;
}

.site-description {
	font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
	display: block;
	/* vertical-align: middle; */
	/* background-color: #222; */
	background-color: rgba(0,0,0,0.2);
	padding: 0 10px;
	margin: 0 var(--dcw-social) 0 calc(var(--dcw-logo) + 10px);
	text-align: center;
	flex-basis: 100%;
	border-radius: 6px;
}

.site-description a,
.site-description a:hover,
.site-description a:focus {
	color: inherit;
	text-decoration: none;
}

/* ## Widget Area
--------------------------------------------- */

.site-header .widget-area {
	width: auto;
  margin-top: 0;
  position: absolute;
  bottom: 20px;
  right: 34px;
}

/* # Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu a {
	font-family: 'Crimson Pro', Georgia, serif;
	font-weight: 400;
	color: #000;
	padding: 20px 20px;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu a:focus,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus  {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}


/* ## Accessible Menu
--------------------------------------------- */

/* ## Site Header Navigation
--------------------------------------------- */

.nav-primary {
  border-top: 0;
  background-color: transparent;
  position: absolute;
  right: 0;
  width: 100%;
	z-index: 3;
}

.nav-primary .wrap .menu-primary {
  width: auto;
  float: right; 
}

.nav-primary .genesis-nav-menu a {
	/* background-color: #f2f2f2; */
	/* color: #fff; */
	font-size: 20px;
	margin-left: 10px;
	padding: 16px 20px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.nav-primary .genesis-nav-menu a:hover,
.nav-primary .genesis-nav-menu a:focus,
.nav-primary .genesis-nav-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:focus  {
	text-decoration: none;
}


/* ## After Header Navigation
--------------------------------------------- */

.nav-secondary {
	color: #fff;
}

.nav-secondary .genesis-nav-menu a {
	font-size: 20px;
	color: #fff;
}

.nav-secondary .working-membership-menu-item {
	display: none;
}


/* # Content Area
---------------------------------------------------------------------------------------------------- */


/* ## Entries
--------------------------------------------- */

.entry {
  background-color: transparent;
  margin-bottom: 40px;
  padding: 0;
}

/* The page builder pages lay out their own full width sections down to the
 * footer, so the gap under the entry is a strip of page background they never
 * asked for. Two classes against one beats both the 40px here and the 5% the
 * 860px query gives every entry, so this holds at all widths. */
.edge-to-edge-content .entry {
	margin-bottom: 0;
}

/* Simple text pages get a panel: a translucent black box on the plum page
 * background, matching the title boxes in the header.
 *
 * Excluded on three kinds of page, all of which lay out their own full width
 * sections and would be boxed in by it:
 *   .edge-to-edge-content - the body class set per page in Genesis
 *   .fl-builder           - any page built in Beaver Builder
 *   .woocommerce-page     - cart, checkout, account, which are styled below */
body:not(.edge-to-edge-content):not(.fl-builder):not(.woocommerce-page):not(.woocommerce) .entry {
	padding: 45px 50px;
	border: 4px solid rgba(0, 0, 0, .11);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .11);
}

/* ## Entry Meta
--------------------------------------------- */

/* ## Pagination
--------------------------------------------- */

/* ## Comments
--------------------------------------------- */

/* # Sidebars
---------------------------------------------------------------------------------------------------- */

/* # Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
	color: #fff;
	/* Sans for the footer copy - the serif body face is set for long reading
	 * lines, and the footer is short labels, lists and addresses. The titles
	 * keep the serif, below, so the columns still head up like the site. */
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15px;
	font-size: 1.5rem;
	padding: 55px 0 45px;
}

/* Even columns rather than Genesis's fixed width floats, which left a tall
 * column on one side and a gap in the middle. There are four footer widget
 * areas (see genesis-footer-widgets in functions.php), one widget each, so the
 * areas are the columns. auto-fit means the row stays even whether three or
 * four of them are filled. No boxes: a rule under each title gives the columns
 * structure without competing with the panels in the content area above. */
.footer-widgets .wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 45px 40px;
	/* Lines the columns up with the page builder's row width above, so the footer
	 * reads as part of the same page rather than a narrower block underneath it.
	 * 1480 less the 20px gutters leaves 1440, which is the row width. */
	max-width: 1480px;
	padding: 0 20px;
}

.footer-widgets .footer-widget-area {
	float: none;
	width: auto;
	margin: 0;
}

/* The theme clears floats with :before/:after on .wrap. In a grid container
 * those count as items and take a cell each, which left an empty column at the
 * start and pushed the last widget onto a second row. */
.footer-widgets .wrap:before,
.footer-widgets .wrap:after {
	display: none;
}

.footer-widgets .widget {
	float: none;
	width: auto;
	margin: 0;
}

/* Should an area ever hold two widgets, they need separating - without this the
 * second one's title sits straight on the last line of the first */
.footer-widgets .widget + .widget {
	margin-top: 35px;
}

.footer-widgets .widget-title {
	font-family: 'Crimson Pro', Georgia, serif;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	font-size: 22px;
	font-size: 2.2rem;
	line-height: 1.2;
}

.footer-widgets p {
	margin-bottom: 12px;
	line-height: 1.35;
}

.footer-widgets ul {
	margin-bottom: 10px;
}

.footer-widgets ul li {
	margin-bottom: 0;
	padding-bottom: 9px;
	line-height: 1.3;
}

/* Buttons on the dark plum footer panel. The site's default button is a dark
 * grey block, which all but disappears down here, so these take a white pill.
 * Deliberately not the outlined page content button - a frame on the footer's
 * own dark panel reads as a box drawn round the link.
 *
 * Both markups are covered: a widget written as <a class="button"> and the
 * <a><button> pairing the text widget currently uses. */
.footer-widgets button,
.footer-widgets .button,
.footer-widgets a.button,
.footer-widgets input[type="button"],
.footer-widgets input[type="submit"] {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: 5px;
	background-color: #fff;
	color: #522c3e;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.2;
	text-decoration: none;
}

.footer-widgets button:hover,
.footer-widgets button:focus,
.footer-widgets .button:hover,
.footer-widgets .button:focus,
.footer-widgets a.button:hover,
.footer-widgets a.button:focus,
.footer-widgets input[type="button"]:hover,
.footer-widgets input[type="button"]:focus,
.footer-widgets input[type="submit"]:hover,
.footer-widgets input[type="submit"]:focus,
.footer-widgets a:hover button,
.footer-widgets a:focus button {
	background-color: #f2d492;
	color: #522c3e;
}

/* A link wrapped around a button is still a link, so the running-text link
 * colour and hover underline would otherwise show through around it */
.footer-widgets p a:has(button),
.footer-widgets p a:has(button):hover,
.footer-widgets p a:has(button):focus {
	color: inherit;
	text-decoration: none;
}

/* # Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	padding: 22px 0;
	border-top: 0;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
}

/* The 1023 query hands every .wrap 28px of top padding for the content area,
 * and this bar's wrap picks it up too - the credit line was sitting 42px below
 * the top edge and 14px above the bottom one. */
.site-footer .wrap {
	padding-top: 0;
}

/* # Woocommerce
---------------------------------------------------------------------------------------------------- */

/* ## Text on the light panels
--------------------------------------------- */

/* WooCommerce's tables and columns are light grey panels, written when the site
 * had a white background and dark body text. The site is now white text on
 * plum, so everything inside them inherited white on near-white and became
 * unreadable - the basket lines, the order review and every checkout field
 * label. The colour is set back per panel rather than by changing the body,
 * which the rest of the site depends on. */
.woocommerce table.shop_table .cart_item,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce table.cart td.actions,
.woocommerce-page table.cart td.actions,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	color: #333;
}

/* Headings and labels inside those panels set their own colour in places */
.woocommerce .col2-set .col-1 h3,
.woocommerce .col2-set .col-2 h3,
.woocommerce-page .col2-set .col-1 h3,
.woocommerce-page .col2-set .col-2 h3 {
	color: #522c3e;
}

/* The payment box sits on the plum page background, not on a panel, so its
 * required marker needs a light red rather than WooCommerce's #a00 */
.woocommerce-checkout #payment abbr.required {
	color: #ffb3b3;
	border: 0;
}

.woocommerce-error:before,
.woocommerce-info:before,
.woocommerce-message:before {
  left: 1em;
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
  list-style: disc !important;
}

/* ## Buttons
--------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  color: #515151;
  background-color: #e8e9eb;
}

.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: #748cac;
  /* background-color: #647fa3; */
  color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: #537494;
  color: #fff;
}

/* Apply coupon is a plain .button, which WooCommerce paints light grey - the
 * only button on the basket that wasn't the site's blue. */
.woocommerce table.cart td.actions .coupon button.button,
.woocommerce table.cart td.actions .coupon input.button,
.woocommerce-page table.cart td.actions .coupon button.button,
.woocommerce-page table.cart td.actions .coupon input.button {
	background-color: #748cac;
	color: #fff;
}

.woocommerce table.cart td.actions .coupon button.button:hover,
.woocommerce table.cart td.actions .coupon button.button:focus,
.woocommerce table.cart td.actions .coupon input.button:hover,
.woocommerce table.cart td.actions .coupon input.button:focus,
.woocommerce-page table.cart td.actions .coupon button.button:hover,
.woocommerce-page table.cart td.actions .coupon button.button:focus {
	background-color: #537494;
	color: #fff;
}

/* The primary action buttons echo the frame on the tables above them, but at a
 * low alpha - a solid white border made them read as heavier than the basket
 * itself. The coupon button is secondary and takes the radius only. */
.woocommerce table.cart td.actions .coupon button.button,
.woocommerce table.cart td.actions .coupon input.button {
	border: 0;
	border-radius: 8px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order {
	border: 4px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce a.button.alt:disabled[disabled]:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover {
  background-color: #6489a3;
  color: #fff;
}

/* ## Single
--------------------------------------------- */

/* .woocommerce.single div.product form.cart div.quantity {
	display: none !important;
} */

/* .product_cat_working-booking.woocommerce div.product p.price {
	display: none;
} */

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 1.5em;
  font-weight: 600;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .stock {
	padding: 15px 20px;
	margin: 0 !important;
	border-bottom: 1px solid #fff;
	background-color: #c2d4b9;
	text-align: right;
	color: #7d9b76;
	/* color: #fff; */
	font-size: 2.3rem;
}

.woocommerce div.product p.price .amount {
	font-size: 2.8rem;
	color: #3e5c38;
	font-family: 'Source Sans Pro', sans-serif;
}

.woocommerce div.product .woocommerce-variation-price {
	margin-left: 20px;
	margin-right: 20px;
}

.woocommerce.single div.product form.cart .variations
.woocommerce.single div.product .previous_orders {
  margin-bottom: 0;
}

.woocommerce div.product form.cart .woocommerce-variation-description {
  line-height: 1.3;
}

.woocommerce div.product form.cart .woocommerce-variation-description p {
	margin-bottom: 0;
	font-size: 1.5em;
}

.woocommerce.single div.product .woocommerce-variation-description ul li {
	list-style-type: disc;
	margin-left: 5%;
}

.woocommerce div.product .product_title {
  padding: 20px;
  color: #fff;
  margin: 0;
  border-bottom: 1px solid #fff;
}

.woocommerce.single div.product div[itemprop="description"] {
  padding-top: 10px;
	border-bottom: 1px solid #fff;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 50%;
  background-color: #e9e9e9;
	padding-bottom: 20px;
/*   padding: 20px; */
}

.woocommerce #content div.product div.summary p,
.woocommerce div.product div.summary p,
.woocommerce-page #content div.product div.summary p,
.woocommerce-page div.product div.summary p {
	margin-left: 20px;
	margin-right: 20px;
}

.woocommerce #content div.product div.summary p.stock,
.woocommerce div.product div.summary p.stock,
.woocommerce-page #content div.product div.summary p.stock,
.woocommerce-page div.product div.summary p.stock {
	margin-bottom: 0;
}

.woocommerce #content div.product div.summary .dcw-select-membership,
.woocommerce div.product div.summary .dcw-select-membership,
.woocommerce-page #content div.product div.summary .dcw-select-membership,
.woocommerce-page div.product div.summary .dcw-select-membership {
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px 20px 10px;
	display: none;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
  width: 46%;
}

.woocommerce div.product .dcwf-previous-order-select-wrap {
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
}

.woocommerce div.product .previous_order_note {
	padding: 20px 0 0;
	margin: 0 20px 10px;
}

.woocommerce div.product .previous_orders  {
	margin-bottom: 10px;
}

.woocommerce div.product .previous_orders tbody {
	border-bottom: 0;
}

.woocommerce div.product .previous_orders tbody tr td.label {
	padding-left: 20px;
	padding-bottom: 10px;
}

.woocommerce div.product .previous_orders tbody tr td.value {
	padding-right: 20px;
}

.woocommerce div.product .previous_orders tbody tr td.value #previous_order_select {
	margin-bottom: 0;
}

.woocommerce div.product form.cart .variations {
	background-color: #f0f0f0;
	margin-bottom: 0;
}

.woocommerce div.product form.cart .variations td.label,
.woocommerce div.product .previous_orders td.label {
  width: 160px;
  padding-left: 20px;
}

.woocommerce div.product form.cart .variations td.value {
  padding-right: 20px;
}

.woocommerce div.product .previous_orders td.label {
	font-weight: 700;
	border: 0;
  vertical-align: top;
  line-height: 2em;
}

.woocommerce div.product .previous_orders td.value {
	border: 0;
	padding-left: 0;
}

.woocommerce div.product form.cart {
	margin-bottom: 20px;
}

.woocommerce div.product form.cart tbody {
	border-bottom: 1px solid #fff;
}

.woocommerce div.product form.cart .variations select,
.woocommerce div.product .previous_orders select {
  padding: 2px 4px;
}

.woocommerce .summary div > p:last-child {
	margin-bottom: 10px;
}

.woocommerce .summary .variations_form p:last-child {
	margin-bottom: 20px;
}

.woocommerce div.product form.cart .reset_variations {
  display: block;
  line-height: 1.75em;
  width: auto;
  float: left;
}

.woocommerce div.product form.cart,
.woocommerce div.product p.cart {
	margin-bottom: 0;
}

.woocommerce .single_variation_wrap {
	margin: 1em 0 0;
}



.woocommerce .single_variation_wrap .woocommerce-variation.single_variation {
	display: none !important;
}

.woocommerce div.product .woocommerce-variation-add-to-cart.variations_button {
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: none;
}

.woocommerce div.product div.images {
	margin-bottom: 60px;
	border-radius: 8px;
	overflow: hidden;
	border: 4px solid #ffffff;
}

/* .woocommerce div.product div.images.woocommerce-product-gallery {
	display: none;
} */

.woocommerce div.product div.summary {
	font-size: 18px;
	border-radius: 8px;
	overflow: hidden;
	color: #444444;
	border: 4px solid #ffffff;
	font-family: 'Source Sans Pro', Georgia, serif;
}

.woocommerce.full-width-content .sidebar-primary {
	display: none;
}


/* More info styles */
.dcw-info-flex-container {
  display: flex;
  flex-direction: column;
}

.dcw-info-row {
  display: flex;
  margin-bottom: 10px;
}

.dcw-info-title {
	font-size: 16px;
  flex: 0 0 150px; /* Fixed width for the left column */
  font-weight: bold;
	padding: 0 0 0 20px;
}

.dcw-info-content {
  flex-grow: 1; /* Right column takes the remaining space */
	font-size: 16px;
	padding: 0 20px 0;
}

.dcw-info-content p {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.dcw-info-content h3 {
	font-size: 16px;
	font-weight: bold;
}

.dcw-info-content ul li {
	font-size: 16px;
	list-style-type: disc;
}

.dcw-info-content ul {
	margin-bottom: 10px;
	margin-left: 30px;
}

.dcw-more-details-content {
	padding: 20px 0 0;
	border-bottom: 1px solid #fff;
}

.dcw-more-details-content p {
	font-family: 'Source Sans Pro', Georgia, serif;
}

.product_cat_standard-booking .product .more-details-btn {
	background-color: #5f83a0;
}
.product_cat_family-booking .product .more-details-btn {
	background-color: #7cac66;
}
.product_cat_early-bird-booking .product .more-details-btn {
	font-family: 'Source Sans Pro', Georgia, serif;
	background-color: #66aca3;
}
.product_cat_super-early-bird-booking .product .more-details-btn {
	background-color: #a26daf;
}

.woocommerce .more-details-btn {
	border-radius: 8px;
	color: #fff;
	padding: 10px 17px 10px 20px;
  margin-left: auto;
	margin-right: 20px;
}

.woocommerce .more-details-btn .dashicons {
	vertical-align: sub;
	padding-left: 5px;
}


.dcw-info-title {
	font-size: 18px;
	flex: 0 0 150px;
	font-weight: bold;
	padding: 0 0 0 20px;
}


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

	.dcw-info-title {
		padding: 0 0 0 2.5%;
		flex: 0 0 90px;
		line-height: 1.2;
		font-size: 14px;
	}

	.dcw-info-content {
		line-height: 1.2;
		padding-right: 2.5%;
	}

}

/* Quantity disabled force border */
.woocommerce .quantity .qty:disabled {
	border-width: 1px !important;
}

/* Hide defualt item quantity for relocation */
.woocommerce .summary .cart .quantity{
	display: none;
}

.flex-container {
	display: flex;
	align-items: center; 
	justify-content: left;
}

.dcw-qty-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.dcw-buttons-details-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}


@media only screen and (max-width: 768px) {
  .flex-container {
      flex-direction: row;
  }
}

@media only screen and (max-width: 460px) {
  .flex-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .dcw-qty-container {
    width: 100%;
  }
	
	.dcw-buttons-details-container {
		padding: 0 2.5%;
	}

	.woocommerce .more-details-btn {
		margin-left: 0;
		margin-right: 0;
		min-width: 155px;
	}

  .dcw-quantity-text {
    margin-bottom: 10px;
  }

}

.woocommerce .dcw-quantity-container.active .qty {
	background-color: #fff;
}

.woocommerce .dcw-quantity-container .qty {
	font-family: 'Source Sans Pro', sans-serif;
	padding: 0 10px 0 10px !important;
  	height: 44px !important;
  	line-height: 44px;
	border: 0	;
	border-top: 1px solid #d0d0d0 !important;
	border-bottom: 1px solid #d0d0d0 !important;
	text-align: center; 
	border-top: 1px solid #ccc; 
	border-bottom: 1px solid #ccc; 
	margin: 0; 
	width: 50px;
	background-color: #eee;
} 

/* Hide the increment and decrement arrows on number inputs */
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce .dcw-quantity-container .quantity .qty {
    -moz-appearance: textfield; 
    text-align: center; 
		pointer-events: none; 
}

.woocommerce .dcw-quantity-container.active .increase-qty,
.woocommerce .dcw-quantity-container.active .decrease-qty {	
	background-color: #c1d7e4;
	border: 1px solid #a3bece;
}

.woocommerce .dcw-quantity-container .increase-qty,
.woocommerce .dcw-quantity-container .decrease-qty {	
	background-color: #dfdfdf;
	border: 1px solid #c4c4c4;
	cursor: pointer;
	font-size: 20px;
	padding: 5px 10px;
	color: #405a6b;
	height: 32px;
	box-sizing: content-box;
	width: 20px;
	line-height: 32px;
	text-shadow: 0px 1px rgba(255,255,255,.33);
	-webkit-user-select: none;
}

.woocommerce .dcw-quantity-container .increase-qty:hover,
.woocommerce .dcw-quantity-container .decrease-qty:hover {
	background-color: #adc8d8;
	border: 1px solid #89a7b8;
}

.woocommerce .dcw-quantity-container .increase-qty:focus,
.woocommerce .dcw-quantity-container .decrease-qty:focus {
  outline: none;
}


.woocommerce .dcw-quantity-container .increase-qty {
	border-radius: 0 8px 8px 0;
}

.woocommerce .dcw-quantity-container .decrease-qty {
	border-radius: 8px 0 0 8px;
}

.woocommerce .dcw-quantity-text {
	width: 150px;
	/* display: inline-block; */
	padding-left: 20px;
	font-weight: bold;
}
/* 
.woocommerce .dcw-quantity-container .quantity {
	display: inline-block;
} */

.woocommerce div.product p.stock {
	display: none;
}

.dcw-quantity-container {
	padding: 15px 0;
}


/* ## Cart
--------------------------------------------- */

/*
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal,
*/

.woocommerce-cart table.cart th.product-quantity,
.woocommerce-cart table.cart td.product-quantity
 {
	display: none;
}

/* WooCommerce's own small-screen stylesheet re-shows this at 768px and below
 * with a more specific selector, hence the extra .woocommerce here. The
 * quantity column is hidden above, so nothing on the page can ever enable the
 * button - left alone it appears on phones and tablets only, greyed out and
 * unusable. */
.woocommerce-cart .woocommerce table.cart td.actions > .button {
	display: none;
}

.woocommerce-cart .shop_table thead {
	background-color: #4f7ca0;
	color: #fff;
	border-radius: 0 4px 4px 0;
}

.woocommerce table.shop_table {
	border-radius: 8px;
	overflow: hidden;
	border: 0;
}

/* The basket and its totals are framed like the content panel and the product
 * cards - a white border with a slightly larger radius, so the two tables read
 * as a pair of boxes rather than as bands of grey. overflow:hidden above is
 * what keeps the header row's corners inside the frame. */
.woocommerce-cart table.shop_table,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table,
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	border: 4px solid #fff;
	border-radius: 8px;
}

.woocommerce table.shop_table td {
	border-top: 1px solid #fff;
}

.woocommerce table.shop_table .cart_item:nth-child(odd) {
	background-color: #F0F0F0; /* Replace with the color for odd elements */
}

.woocommerce table.shop_table .cart_item:nth-child(even) {
	background-color: #e9e9e9; /* Replace with the color for even elements */
}


.woocommerce-cart td.product-name dl.variation dt,
.woocommerce-cart td.product-name dl.variation dd {
	line-height: 21px;
	font-size: 16px;
}

.woocommerce table.shop_table td.product-name a {
	font-weight: bold;
	color: #4f7ca0;
}

.woocommerce td.product-name .wc-item-meta,
.woocommerce td.product-name dl.variation {
	margin-top: 5px;
}

.woocommerce table.shop_table .product-remove {
	width: 100px;
}

.woocommerce #content table.cart td.actions,
.woocommerce table.cart td.actions,
.woocommerce-page #content table.cart td.actions,
.woocommerce-page table.cart td.actions {
	background-color: #9ba8be;
}

.woocommerce-cart td.product-name dl.variation dt {
	width: 100%;
	max-width: 130px;
	margin: 0;
  padding-bottom: 0;
	font-weight: bold;
} 

.woocommerce-cart td.product-name dl.variation dd {
	display: table-cell;
	width: auto;
  margin: 0;
  padding-bottom: 0;
  padding-left: 15px;
  vertical-align: middle;
	text-align: left;
}

#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  min-width: 32px;
  width: 16%;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
  width: 100%;
  max-width: 129px;
  padding: 10px;
  display: block;
}

#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
	min-width: 140px;
  padding: 8px 10px 6px;
	/* Square against the rounded button beside it otherwise */
	border-radius: 8px;
}

.toggle-item-meta {
	color: #60b038;
	cursor: pointer;
}

.woocommerce-checkout .wpgdprc-checkbox {
	float: left;
}

.edit_price_in_cart_text {
	display: none;
}


/* WooCommerce centres the x by setting line-height equal to the circle's
 * height, which only lands true if the font's metrics happen to agree - in the
 * serif body face the glyph sat low and left. Centring it with flex, in the
 * sans, puts it in the middle whatever the glyph. */
.woocommerce a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ee3b3b;
	color: white!important;
	font-family: 'Source Sans Pro', sans-serif;
	/* WooCommerce sizes this button as width/height 1em, so the glyph filled the
	 * whole circle and any metric asymmetry showed. Sizing the circle explicitly
	 * and keeping the glyph smaller than it leaves room to centre in. */
	width: 30px;
	height: 30px;
	font-size: 20px;
	line-height: 1;
}

.woocommerce a.remove:hover,
.woocommerce a.remove:focus {
	color: #d53535!important;
	background-color: white;
	/* The site underlines links on hover - on a one glyph button it draws a line
	 * across the circle */
	text-decoration: none;
}

.dcw-wc-cart-notice a button {
	border-radius: 8px;
	padding: 10px 20px;
	margin-left: 20px;
	background-color: rgb(68, 122, 51);
	float: right;
	line-height: 1.6;
}


.dcw-wc-cart-notice a:hover button,
.dcw-wc-cart-notice a:focus button {
	background-color: rgb(57, 106, 42);
	/* background-color: rgb(255, 255, 255);
	color: rgb(79, 140, 61); */
}

.dcw-wc-cart-notice::before {
	color: rgb(57, 106, 42);
}

.dcw-wc-cart-notice {
	line-height: 2.5;
	font-weight: 700;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
	padding: 1em 2em 1em 3.5em;
	margin: 0 0 2em;
	/* background-color: #84c767; */
	background-color: #78b95c;
	color: #ffffff;
	border-top: 3px solid rgb(57, 106, 42);
	list-style: none outside;
	width: auto;
	word-wrap: break-word;
}

.woocommerce-cart td.product-name dl.variation dt:last-of-type,
.woocommerce-cart td.product-name dl.variation dd:last-of-type {
    display: none;
}

/* table.shop_table in the selector to outweigh WooCommerce's own
 * ".shop_table_responsive tr:nth-child(2n) td", which paints alternate rows
 * rgba(0,0,0,.024). That left the total row all but transparent, and with the
 * page now plum behind it, its dark text became unreadable below 768px. */
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th {
	background-color: #ddd;
}

/* ## Checkout
--------------------------------------------- */

.woocommerce-checkout.full-width-content .content {
	padding-left: 30px;
	padding-right: 30px;
}

.woocommerce-checkout form .form-row label {
	line-height: 26px;
	font-size: 16px;
	margin-bottom: 2px;
}

.woocommerce .col2-set,
.woocommerce-page .col2-set {
	width: 50%;
	float: left;
	padding-right: 20px;
}

/* Order details and Additional information are framed like the tables beside
 * them. #ddd rather than the old #f0f0f0 - against a white border, #f0f0f0 was
 * near enough white that the frame disappeared into the panel. */
.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
	background-color: #ddd;
	padding: 20px 2.5%;
	width: 100%;
	border: 4px solid #fff;
	border-radius: 8px;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1 {
	margin-bottom: 20px;
}

.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
	/* display: none; */
	float: left;
}


.woocommerce h3#order_review_heading,
.woocommerce div#order_review {
	width: 50%;
	float: left;
	padding-left: 20px;
}
.woocommerce-checkout input, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
	padding: 10px 15px;
	border-radius: 8px;
}

/* WooCommerce's own `.woocommerce form .form-row .input-text` is the more
 * specific selector, so the billing and shipping fields - the ones the rule
 * above was written for - were keeping WooCommerce's 0.5em padding and 4px
 * corners while every other box on the page sat at 8px. */
.woocommerce-checkout .woocommerce form .form-row .input-text,
.woocommerce-checkout .woocommerce form .form-row select,
.woocommerce-checkout .woocommerce form .form-row textarea {
	padding: 10px 15px;
	border-radius: 8px;
}

/* The same 18px box as the membership fields on the product page - terms and
 * conditions, the GDPR consent, "create an account", "ship to a different
 * address", "remember me", and the payment method radios beside them.
 * WooCommerce leaves them all at the browser's own 13px, which is a small
 * thing to hit on a phone and smaller than the wording beside it.
 *
 * The padding and corners are put back because the rule above dresses every
 * input on the checkout as a text field, a tick box included. Radius is inert
 * on a radio, which the browser draws round whatever it is told. */
.woocommerce-cart .woocommerce input[type="checkbox"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-account .woocommerce input[type="checkbox"],
.woocommerce-cart .woocommerce input[type="radio"],
.woocommerce-checkout input[type="radio"],
.woocommerce-account .woocommerce input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	padding: 0;
	border-radius: 0;
	vertical-align: -3px;
	accent-color: #522c3e;
	cursor: pointer;
}

.woocommerce-checkout td.product-name dl.variation dt {
	width: 40%;
	padding: 0;
	margin: 0;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 18px;
} 

.woocommerce-checkout td.product-name dl.variation dd {
	width: 100%;
  margin: 0;
  padding: 0 0 0 15px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 18px;
}

#add_payment_method #payment ul.payment_methods li,
.woocommerce-cart #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods li {
  list-style-type: none;
}

/* The payment box sits on the plum page background rather than on a light
 * panel, so it is framed in translucent black instead of the white used on the
 * tables - the same treatment as the content panel on the text pages. */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	border: 4px solid rgba(0, 0, 0, .22);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .11);
}

/* The description that drops open under the chosen gateway. WooCommerce's own
 * stylesheet gives it 2px corners, which read as square beside everything else
 * on the page. */
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	border-radius: 8px;
}

.woocommerce-checkout .checkout_coupon .button {
	padding: 19px 38px;
}


.woocommerce-checkout .wc-terms-and-conditions,
.woocommerce-checkout .wc-terms-and-conditions label,
.woocommerce-checkout .wc-terms-and-conditions input,
.woocommerce-checkout .wc-terms-and-conditions a {
	cursor: pointer;
}

.woocommerce-checkout .wc-terms-and-conditions a {
	color: #333;
}

.woocommerce-checkout .terms-page-content {
	display: none;
}

.woocommerce-checkout  .dcwf-terms-overlay {
	background-color: rgba(62, 62, 62, 0.3);
	width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
	cursor: pointer;
	font-size: 16px;
	font-size: 1.6rem;
}

.woocommerce-checkout.admin-bar .dcwf-terms-overlay {
  margin-top: -32px;
}

.woocommerce-checkout  .dcwf-terms-popup-wrap {
	position: absolute;	
	width: auto;
	height: inherit;
  max-width: 750px;
  height: 60%;
  top: 50%;
	transform: translateY(-50%);
  left: 0;
  right: 0;
	margin: 0 auto;
/* 	padding: 20px 5%; */
}

.woocommerce-checkout  .dcwf-terms-popup-inner {
	background-color: #fff;
  overflow-y: scroll;
  padding: 30px 30px 20px;
  margin: 20px 5%;
  max-height: 100%;
  max-width: 100%;
  box-shadow: 0px 2px 18px rgba(0,0,0,.4);
	cursor: default;
	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.woocommerce-checkout .dcwf-terms-overlay .dcwf-terms-exit {
	display: block;
  font-size: 24px;
  font-size: 2.4rem;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 1;
  border-radius: 100%;
  color: red!important;
  text-decoration: none;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  position: fixed;
  right: 5%;
  top: 20px;
  box-shadow: 0 0px 8px 0px rgba(0,0,0,.4);
  background: white;
  margin: -9px -7px 0 0;
}

.woocommerce-checkout .dcwf-terms-overlay .dcwf-terms-exit:hover,
.woocommerce-checkout .dcwf-terms-overlay .dcwf-terms-exit:focus {
  color: #fff!important;
  background: red;
}

.woocommerce-checkout .dcwf-terms-overlay ul {
	margin: 0 0 20px 28px;
}

.woocommerce-checkout .dcwf-terms-overlay ul li {
	list-style-type: disc;
}

.woocommerce-checkout .dcwf-terms-overlay .button {
	font-size: 100%;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  overflow: visible;
  padding: .618em 1em;
  font-weight: 700;
  border-radius: 3px;
  left: auto;
  color: #515151;
  background-color: #ebe9eb;
  border: 0;
  white-space: nowrap;
  display: inline-block;
  background-image: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  text-shadow: none;
}

.woocommerce-checkout .dcwf-terms-overlay .terms-buttons {
	float: right;
	width: auto;
	margin-bottom: 10px;
}

.woocommerce-checkout .dcwf-terms-overlay .button.agree-terms {
  color: #fff;
  background-color: #88bd5c;
  font-size: 18px;
  font-size: 1.8rem;
  margin-left: 20px;
}

.woocommerce-checkout .dcwf-terms-overlay .button.disagree-terms {
  color: #fff;
  background-color: #b64c4c;
  font-size: 18px;
  font-size: 1.8rem;
}

.woocommerce-checkout .dcwf-terms-overlay ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}

.woocommerce-checkout .dcwf-terms-overlay ::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 0 1px rgba(255,255,255,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.woocommerce-checkout .order-again {
	display: none;
}



.woocommerce-checkout table.shop_table th {
	background-color: rgb(92, 141, 172);
	color: #fff;		
}

.woocommerce-checkout .shop_table .cart-subtotal th,
.woocommerce-checkout .shop_table .order-total th {
	color: rgb(50, 74, 88);
	background-color: rgb(178, 198, 211);	
}

.woocommerce-checkout .shop_table .cart-subtotal,
.woocommerce-checkout .shop_table .order-total {
	color: rgb(37, 68, 39);
	background-color: rgb(179, 211, 181);	

}

.woocommerce-checkout td.product-name dl.variation dt:last-of-type,
.woocommerce-checkout td.product-name dl.variation dd:last-of-type {
    display: none;
}

/* The country field is not the <select> - WooCommerce hides that and Select2
 * draws a span in its place, which is why it kept the serif and sat taller than
 * the text inputs. It was padded twice over: 10px on the box and another 11px
 * on the text inside it. Height, padding and corners here match .input-text -
 * the 9px inset this used to carry matched WooCommerce's own 0.5em on the text
 * fields, which the rule above now overrides with 15px. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: 42px;
	padding: 0;
	border-radius: 8px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 30px 0 15px;
	color: #333;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	line-height: 40px;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px;
}

/* Select2 appends its dropdown to the end of the body, outside .woocommerce,
 * so the open list has to be styled unscoped */
.select2-container--default .select2-results__option,
.select2-container--default .select2-search--dropdown .select2-search__field {
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
}

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

	.dcw-terms-popup-button-col.fl-col,
	.dcw-terms-popup-title-col.fl-col{
		width: 100% !important;
		max-width: none !important;
	}

}

/* ## Order Recieved
--------------------------------------------- */

.woocommerce-order-received table.shop_table td {
	border-top: 1px solid #fff;
}

.woocommerce-order-received table.shop_table td:nth-child(odd) {
	background-color: #F0F0F0; /* Replace with the color for odd elements */
}

.woocommerce-order-received table.shop_table td:nth-child(even) {
	background-color: #e9e9e9; /* Replace with the color for even elements */
}

/* Every cell in this table is a light panel, so its text needs the dark colour
 * back - the page's white body colour left the whole order unreadable. The
 * tfoot labels are the blue th cells and keep the white. */
.woocommerce-order-received table.shop_table td {
	color: #333;
}

/* Framed like the basket and the checkout order table */
.woocommerce-order-received table.shop_table {
	border: 4px solid #fff;
	border-radius: 8px;
}

/* This table lists item meta as .wc-item-meta rather than the dl.variation the
 * basket uses, so it never picked up the smaller size and ran at full body
 * copy - eight lines of 22px per booking. */
.woocommerce-order-received td.product-name .wc-item-meta {
	margin: 5px 0 0;
	font-size: 16px;
	line-height: 1.45;
}

.woocommerce-order-received td.product-name .wc-item-meta li {
	margin: 0;
	list-style: none;
}

/* Billing address takes the payment box's treatment - it sits on the plum page
 * background, not on a panel */
.woocommerce-order-received .woocommerce-customer-details address {
	padding: 20px 24px;
	border: 4px solid rgba(0, 0, 0, .22);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .11);
	font-style: normal;
}


/* ## My Account
--------------------------------------------- */

/* The account pages follow the same two surfaces as the basket and checkout:
 * navigation and forms sit on the plum page background in black alpha .11
 * panels, and anything holding data - orders, addresses, notices - is a light
 * panel with a white frame and dark text. */

/* No padding, so the rows meet the frame - the current row is filled, and any
 * gap above it reads as a mistake. overflow keeps that fill inside the panel's
 * rounded corners. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	border: 4px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .11);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	list-style: none;
}

/* Between the rows rather than around them, so the panel's own frame is the
 * only edge */
.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 20px;
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 17px;
	line-height: 1.3;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
	background-color: rgba(255, 255, 255, .12);
	color: #f2d492;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background-color: #522c3e;
	color: #fff;
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a:focus {
	color: #f2d492;
}

/* Orders, downloads and the order detail tables, framed like the basket */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	border: 4px solid #fff;
	border-radius: 8px;
	background-color: #ddd;
	color: #333;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	color: #333;
}

/* Order numbers were the site's gold on the plum background - 1.3:1, near
 * enough invisible. On the light panel they take the heading plum. */
/* :not(.button) so the View buttons in the Actions column keep the button
 * colours rather than being treated as links on a panel */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a:not(.button) {
	color: #522c3e;
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table a:not(.button):hover,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table a:not(.button):focus {
	color: #814664;
}

/* Saved addresses */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	padding: 22px 26px;
	border: 4px solid #fff;
	border-radius: 8px;
	background-color: #ddd;
	color: #333;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h3 {
	margin-bottom: 12px;
	color: #522c3e;
	font-size: 30px;
	font-size: clamp(26px, 0.71vw + 22.73px, 30px);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
	margin: 0;
	font-style: normal;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a {
	color: #522c3e;
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address a:focus {
	color: #814664;
}

/* Notices - "confirm your email address", "address saved", and the like.
 * WooCommerce paints these near-white with a purple rule on top; scoped to the
 * account pages for now rather than changed everywhere. */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error {
	border: 4px solid #fff;
	border-top: 4px solid #748cac;
	border-radius: 8px;
	background-color: #ddd;
	color: #333;
}

.woocommerce-account .woocommerce-error {
	border-top-color: #b23b3b;
}

.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-error a {
	color: #522c3e;
}

/* Every button here is an action - View, Next, Save address. WooCommerce paints
 * the plain .button light grey, which reads as disabled against the plum. */
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button {
	border: 0;
	border-radius: 8px;
	background-color: #748cac;
	color: #fff;
}

.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce a.button:focus,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce button.button:focus,
.woocommerce-account .woocommerce input.button:hover,
.woocommerce-account .woocommerce input.button:focus {
	background-color: #537494;
	color: #fff;
}

/* The account forms sit on the plum background, so the required marker needs
 * the light red rather than WooCommerce's #a00. Its own rule carries a form
 * and a .form-row, so those are matched here too rather than reaching for
 * !important. */
.woocommerce-account .woocommerce-MyAccount-content form .form-row .required,
.woocommerce-account .woocommerce-MyAccount-content form .form-row abbr.required,
.woocommerce-account .woocommerce-MyAccount-content .required,
.woocommerce-account .woocommerce-MyAccount-content abbr.required {
	border: 0;
	color: #ffb3b3;
	text-decoration: none;
}

/* The note under a field ("This will be how your name will be displayed...").
 * Interface small print, so it follows the same sans as the labels rather than
 * running as 22px italic serif. */
.woocommerce-account .woocommerce-MyAccount-content form em {
	display: inline-block;
	margin-top: 4px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: 1.4;
	opacity: .85;
}

/* Password change, the one fieldset in the account forms */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
	padding: 8px 26px 22px;
	border: 4px solid rgba(0, 0, 0, .22);
	border-radius: 8px;
	background-color: rgba(0, 0, 0, .11);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding: 0 10px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-weight: 700;
}

/* # Login and register, the logged out view
 *
 * Both sit in .col2-set, which the checkout narrows to half the page. Here it
 * is the whole content, so it is given the width back and the two panels are
 * laid out side by side. */
.woocommerce-account #customer_login.col2-set,
.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	float: none;
	width: 100%;
	padding-right: 0;
}

.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
	flex: 1 1 320px;
	float: none;
	width: auto;
	padding: 26px 30px;
}

/* Headings inside a light panel. The checkout's panels use h3, these use h2.
 * The page's h2 runs up to 50px, which is a page heading rather than the name
 * of a card, so it is brought down to sit with the form under it. */
.woocommerce .col2-set .col-1 h2,
.woocommerce .col2-set .col-2 h2,
.woocommerce-page .col2-set .col-1 h2,
.woocommerce-page .col2-set .col-2 h2 {
	margin-bottom: 18px;
	color: #522c3e;
	font-size: 30px;
	font-size: clamp(26px, 0.71vw + 22.73px, 30px);
}

/* WooCommerce draws its own bordered box around the login form. Inside a panel
 * that is a box in a box, and the 400px cap left it narrower than the register
 * form beside it. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* The tickbox for "remember me" and the privacy policy agreement, which sit
 * hard against their own wording */
.woocommerce-account .woocommerce-form__input-checkbox,
.woocommerce-account .woocommerce-MyAccount-content input[type="checkbox"] {
	margin-right: 8px;
}

.woocommerce-account #customer_login a {
	color: #522c3e;
}

.woocommerce-account #customer_login a:hover,
.woocommerce-account #customer_login a:focus {
	color: #814664;
}

.woocommerce form.login {
	max-width: 400px;
}

.woocommerce-account .order-again {
	display: none;
}

.woocommerce-account .woocommerce-order-details ul {
	margin-left: 0;
}


.woocommerce-account .woocommerce-order-details ul > li {
	list-style-type: none;
}

/* The navigation drops above the content at the same width the site's own
 * menu collapses */
@media only screen and (max-width: 1023px) {

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 30px;
	}

}

/* ## Order Successful 
--------------------------------------------- */

.woocommerce-order-received .order_item ul.wc-item-meta {
	margin-left: 0;
}

.woocommerce-order-received .order_item ul.wc-item-meta > li {
	list-style-type: none;
}

/* ## Order Successful 
--------------------------------------------- */

.woocommerce-order-pay .order_item ul.wc-item-meta {
	margin-left: 0;
}

.woocommerce-order-pay .order_item ul.wc-item-meta > li {
	list-style-type: none;
}

/* ## Password Page for Working Booking  
--------------------------------------------- */

.password-protected-page-form .site-inner,
.woocommerce-product-password-form .site-inner {
	max-width: 600px;
}

#dcw-form-password {
	margin-bottom: 26px;
}


/* # WC Decposits
---------------------------------------------------------------------------------------------------- */

.wc-deposits-wrapper .wc-deposits-option li {
	background-color: #fff;
}

.wc-deposits-wrapper {
  margin: 1em 20px 0;
}

.wc-deposits-wrapper .wc-deposits-payment-description {
  margin: 1em 0 0;
}

/* # WC Field Factory
---------------------------------------------------------------------------------------------------- */

.woocommerce .variations_form .single_variation_clone_wrap {
	padding: 20px 0;
	margin-top: 0;
  color: #fff;
}

.woocommerce div.product .product_title {
	/*   background-color: #8bb5cf; */
	/*   background-color: #70a5c5; */
		background-color: #505050;
	}
	
.product_cat_standard-booking div.product .product_title {
  background-color: #5989a7;
}

.product_cat_early-bird-booking div.product .product_title {
  background-color: #66aca3;
}

.product_cat_super-early-bird-booking div.product .product_title {
  background-color: #a26daf;
}

.product_cat_family-booking div.product .product_title {
  background-color: #7cac66;
}

.product_cat_working-booking div.product .product_title {
  background-color: #b13c3c;
}

.wccpf-validation-message {
	font-size: 16px;
	font-family: 'Source Sans Pro', sans-serif;
}

.wcff_pricing_rules_title_container {
	display: none !important;
}

.cart .wccpf-group-title-h4 {
	color: #555;
	font-family: 'Source Sans Pro', sans-serif;
}

/* .dcw-membership-adult .wccpf-group-title-h4,
.dcw-membership-young_adult .wccpf-group-title-h4,
.dcw-membership-teen .wccpf-group-title-h4,
.dcw-membership-child .wccpf-group-title-h4,
.dcw-membership-infant .wccpf-group-title-h4 {
	color: #fff;
} */




/* ## Adult */

.cart .wccpf-fields-group-clone-container.dcw-membership-adult {
	background-color: #a2bccc !important;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-adult .wccpf-group-title-h4 {
	color: #3c5564;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-adult .wcff-fields-group {
	border: 1px solid #91acbd; 
	background-color: #e2edf5;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-adult .wccpf_value select,
.cart .wccpf-fields-group-clone-container.dcw-membership-adult .wccpf_value input[type=text],
.cart .wccpf-fields-group-clone-container.dcw-membership-adult .wccpf_value input[type=email] {
	border: 1px solid #afc1cc !important; 
}

/* ## Young Adult */

.cart .wccpf-fields-group-clone-container.dcw-membership-young_adult {
	background-color: #a3c7c7 !important;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-young_adult .wccpf-group-title-h4 {
	color: #3a6161;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-young_adult .wcff-fields-group {
	border: 1px solid #83b3b3 ; 
	background-color: #def0f0;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-young_adult .wccpf_value select,
.cart .wccpf-fields-group-clone-container.dcw-membership-young_adult .wccpf_value input[type=text],
.cart .wccpf-fields-group-clone-container.dcw-membership-young_adult .wccpf_value input[type=email] {
	border: 1px solid #a7c5c5 !important; 
}


/* ## Teen */

.cart .wccpf-fields-group-clone-container.dcw-membership-teen {
	background-color: #adc29a !important;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-teen .wccpf-group-title-h4 {
	color: #475738
}

.cart .wccpf-fields-group-clone-container.dcw-membership-teen .wcff-fields-group {
	border: 1px solid #9fb48c; 
	background-color: #e5eedd;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-teen .wccpf_value select,
.cart .wccpf-fields-group-clone-container.dcw-membership-teen .wccpf_value input[type=text],
.cart .wccpf-fields-group-clone-container.dcw-membership-teen .wccpf_value input[type=email] {
	border: 1px solid #b6c4a8 !important; 
}


/* ## Child */

.cart .wccpf-fields-group-clone-container.dcw-membership-child {
	background-color: #cdaace !important;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-child .wccpf-group-title-h4 {
	color: #674868;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-child .wcff-fields-group {
	border: 1px solid #b695bb; 
	background-color: #f6e8f8;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-child .wccpf_value select,
.cart .wccpf-fields-group-clone-container.dcw-membership-child .wccpf_value input[type=text],
.cart .wccpf-fields-group-clone-container.dcw-membership-child .wccpf_value input[type=email] {
	border: 1px solid #c6afc9 !important; 
}

/* ## Infant */

.cart .wccpf-fields-group-clone-container.dcw-membership-infant {
	background-color: #bca6ce !important;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-infant .wccpf-group-title-h4 {
	color: #574666;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-infant .wcff-fields-group {
	border: 1px solid #a58ab4; 
	background-color: #efe3f5;
}

.cart .wccpf-fields-group-clone-container.dcw-membership-infant .wccpf_value select,
.cart .wccpf-fields-group-clone-container.dcw-membership-infant .wccpf_value input[type=text] ,
.cart .wccpf-fields-group-clone-container.dcw-membership-infant .wccpf_value input[type=email] {
	border: 1px solid #c1aeca !important; 
}

.woocommerce .variations_form .single_variation_clone_wrap,
.woocommerce div.product.membership_adult .product_title,
.woocommerce div.product.membership_adult .nyp,
.woocommerce .product.membership_adult .variations_form .single_variation_clone_wrap {
  background-color: #73abcd;
}

.woocommerce div.product.membership_young_adult .product_title,
.woocommerce div.product.membership_young_adult .nyp,
.woocommerce .product.membership_young_adult .variations_form .single_variation_clone_wrap {
  background-color: #73b8b8;
}

.woocommerce div.product.membership_teen .product_title,
.woocommerce div.product.membership_teen .nyp,
.woocommerce .product.membership_teen .variations_form .single_variation_clone_wrap {
  background-color: #92b772;
}

.woocommerce div.product.membership_child .product_title,
.woocommerce div.product.membership_child .nyp,
.woocommerce .product.membership_child .variations_form .single_variation_clone_wrap {
  background-color: #ba86c0;
}

.woocommerce div.product.membership_infant .product_title,
.woocommerce div.product.membership_infant .nyp,
.woocommerce .product.membership_infant .variations_form .single_variation_clone_wrap {
  background-color: #ab89bf;
}

.woocommerce.product_cat_working-booking div.product .product_title,
.woocommerce.product_cat_working-booking .variations_form .single_variation_clone_wrap,
.woocommerce div.product.membership_working_adult .product_title,
.woocommerce div.product.membership_working_adult .nyp,
.woocommerce .product.membership_working_adult .variations_form .single_variation_clone_wrap {
/* 	color: #af4e4e; */
	color: #fff;
  background-color: #af4e4e;
}

.woocommerce div.product.membership_working_young_adult .product_title,
.woocommerce div.product.membership_working_young_adult .nyp,
.woocommerce .product.membership_working_young_adult .variations_form .single_variation_clone_wrap {
/*   color: ; */
	color: #fff;
  background-color: #bf8839;
}

.woocommerce div.product.membership_working_teen .product_title,
.woocommerce div.product.membership_working_teen .nyp,
.woocommerce .product.membership_working_teen .variations_form .single_variation_clone_wrap {
  background-color: #b7a929;
	color: #fff;
}


.woocommerce div.product.membership_working_child .product_title,
.woocommerce div.product.membership_working_child .nyp,
.woocommerce .product.membership_working_child .variations_form .single_variation_clone_wrap {
  background-color: #81ba3b;
	color: #fff;
}


.woocommerce div.product.membership_working_infant .product_title,
.woocommerce div.product.membership_working_infant .nyp,
.woocommerce .product.membership_working_infant .variations_form .single_variation_clone_wrap {
  background-color: #3eb98d;
	color: #fff;
}



.woocommerce .variations_form .single_variation_clone_wrap .woocommerce-variation-availability .stock {
	margin-bottom: 15px;
}

.woocommerce .variations_form table.wccpf_fields_table {
	margin-bottom: 0;
}

.woocommerce .variations_form table.wccpf_fields_table td {
  border-top: 0;
  padding: 10px;
}

.woocommerce div.product form.cart table td {
	/* line-height: 24px; */
	/* font-weight: bold; */
}

.woocommerce div.product table.wccpf_fields_table tbody {
  border: 0;
}

.woocommerce .cart table.wccpf_fields_table td.wccpf_label {
  width: 150px;
  padding-left: 20px;
}

/* .woocommerce .cart table.wccpf_fields_table td.wccpf_label label {
  width: 150px;
} */

/* .woocommerce .summary table.wccpf_fields_table td.wccpf_label,
.woocommerce .summary table.wccpf_fields_table td.wccpf_label label {
  width: 200px;
}

.woocommerce .summary table.wccpf_fields_table td.wccpf_label label {
  padding-left: 20px;
} */

.woocommerce table.wccpf_fields_table td.wccpf_value{
  padding-right: 20px;
}

.woocommerce table.wccpf_fields_table td.wccpf_value label {
	font-family: 'Source Sans Pro', sans-serif;
	display: contents;
}

.woocommerce .wccpf_value input[type="checkbox"] {
  margin-right: 5px;
}

.woocommerce .wcff-label {
	font-size: 16px;
	line-height: 22px;
  padding: 5px 10px;
  margin: -1px 20px 10px;
  border: none;
  border-radius: 0;
}

.woocommerce .wccpf-fields-group-1 {
	padding-top: 10px;
	background-color: #f0f0f0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	display: none;
}

table.wccpf_fields_table td.wccpf_value input[type=text],
table.wccpf_fields_table td.wccpf_value input[type=number],
table.wccpf_fields_table td.wccpf_value input[type=email],
table.wccpf_fields_table td.wccpf_value input[type=password],
table.wccpf_fields_table td.wccpf_value textarea,
table.wccpf_fields_table td.wccpf_value select {
	font-family: 'Source Sans Pro', sans-serif;
	padding: 7px 14px !important;
	height: 45px !important;
	border-radius: 8px !important;
  	border: 1px solid #d0d0d0 !important;
}

/* The browser's own 13px box, which is a small thing to hit on a phone and
 * smaller than the wording beside it.
 *
 * wcff-client.css declares `width: auto !important` on this exact selector and
 * is enqueued after this stylesheet, so !important alone only draws the tie and
 * loses it on source order - the height took and the width did not, leaving a
 * squashed 13x18 box. The leading .woocommerce (on the body) puts one more
 * class on our side and settles it. */
.woocommerce table.wccpf_fields_table td.wccpf_value input[type=checkbox],
.woocommerce table.wccpf_fields_table td.wccpf_value input[type=radio] {
	width: 18px !important;
	height: 18px;
	margin-right: 8px;
	vertical-align: -3px;
	accent-color: #522c3e;
	cursor: pointer;
}

/* .wccpf-fields-container .wcff-fields-group {
	margin: 0;
	padding: 0;
} */

.cart .wccpf-fields-container .wcff-fields-group {
	margin: 0;
	padding: 0;
	background-color: #f7f7f7;
	padding: 10px 0;
	margin: 0 20px;
	border-radius: 8px;
	border: 1px solid #d0d0d0;
}

.wccpf-group-title-h4 {
	padding: 0 20px;
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 4px;
	/* display: none; */
}

/* Hide first group number in title */
/* .wccpf-fields-group-container .wccpf-fields-group-title-index {
	display: none;
}
.wccpf-fields-group-container .cloned .wccpf-fields-group-title-index {
	display: inline;
} */

/* Hide empty WCFF elements - bugfix */
.woocommerce .wcff-layout-form-col:empty {
	display: none;
}

.dcw-last-name-wrapper .wccpf_label,
.dcw-phone-wrapper .wccpf_label {
	display: none;
}

.wccpf-fields-group-container {
	border-bottom: 1px solid #FFFFFF;
}

.wccpf-fields-group-clone-container.cloned.processed {
	display: block;
}

.wccpf-fields-group-clone-container.cloned {
	display: none;
}


/* Default background color for all elements */
.wccpf-fields-group-clone-container {
	background-color: #FFFFFF; /* Replace with your default background color */
	margin: 0;
	padding: 15px 0 15px;
	border-top: 1px solid #FFFFFF;
}	

/* Different background color for every other element */
.wccpf-fields-group-clone-container:nth-child(odd) {
	background-color: #F0F0F0; /* Replace with the color for odd elements */
}

.wccpf-fields-group-clone-container:nth-child(even) {
	background-color: #e9e9e9; /* Replace with the color for even elements */
}

.woocommerce .wcff-label-info {
	color: #ffffff !important;
  background-color: #73abcd !important;
}

.wcff-label-info a {
	color: #ffdd00;
}

.wcff-label-warning {
	color: #ffffff !important;
  background-color: #8dbc58 !important;
}

.woocommerce .wcff-label-danger {
    color: #ffffff !important;
    background-color: #e66c6c !important;
}

.woocommerce div.product form.cart .button {
	vertical-align: middle;
	float: right;
	margin: 1em 20px 0;
	padding: 15px 25px;
}

/* # WC Name Your Price
---------------------------------------------------------------------------------------------------- */

.woocommerce .nyp {
/*
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 20px;
	background-color: #7eac5b;
*/
	padding: 10px 20px;
	background-color: #73abcd;
	margin-top: -20px;
	margin-bottom: 0;
	color: #fff;
	display: none;
}

.woocommerce-page .product .nyp label {
	padding-right: 20px;
	font-size: 1.2em;
	display: inline-block;
}

.woocommerce-page .product .nyp .minimum-price {
	margin-left: 0;
}

.product .nyp input.nyp-input {
  text-align: left;
  display: inline-block;
  width: 100px;
  padding: 9px 14px;
	font-size: 1.2em;
}

.product .minimum-price {
  margin-top: -9px;
}

.product .nyp label,
.product .minimum-price .minimum-text,
.product .minimum-price .amount {
	color: #fff;
/* 	color: #6a9256; */
  /* #77a464 */;
}

.product .nyp input.nyp-input {
	color: #4680a6;
	border: 1px solid #578db2;
	border-radius: 8px;
}

/* # WC Custom Product Fields
---------------------------------------------------------------------------------------------------- */

.woocommerce .variations_form .field-name-county {
	display: inline-block;
	width: 55%
}

.woocommerce .variations_form .field-name-postcode {
	display: inline-block;
	width: 45%
}

.woocommerce .field-name-postcode table.wccpf_fields_table td.wccpf_label,
.woocommerce .field-name-postcode table.wccpf_fields_table td.wccpf_label label {
	width: 110px;
	padding: 0;
}

	/*
	.woocommerce .field-name-postcode table.wccpf_fields_table td.wccpf_value {
		width: 60%;
	}
	*/

.woocommerce .variations_form .field-name-notes .wccpf_label {
	vertical-align: top;
  padding-top: 20px;
}

/* # Misc
---------------------------------------------------------------------------------------------------- */

.dcw-home-call-to-action .fl-cta-title {
	padding: 0;
}

@media (max-width: 860px) {
	.dcw-home-call-to-action  .fl-cta-inline .fl-cta-button {
			padding-top: 10px;
			padding-bottom: 5px;
	}
}

body.styled-checkboxes.woocommerce-checkout input[type=checkbox]:nth-child(1n) {
    visibility: visible;
}

.site-inner {
	position: relative;
}

.site-inner .logout-button {
	position: absolute;
  top: 61px;
  right: 22px;
  z-index: 1000;
}

.site-inner .logout-button input.button.logout {
	background-color: #fff;
}

.woocommerce .entry-content input.button.logout {
	display: none;
}

/* # Table Press
---------------------------------------------------------------------------------------------------- */

 /* .tablepress {
		
} */

.tablepress .odd td {
    background-color: #f9f9f9;
}

.tablepress tbody td,
.tablepress tfoot th {
  border-top: 1px solid #ddd;
}

.fl-module.dcw-programme-table .tablepress tfoot th,
.fl-module.dcw-programme-table .tablepress thead th {
  background-color: #73abcd;
  color: #fff;
  font-weight: 700;
  vertical-align: middle;
  text-align: center;
}


.fl-module.dcw-programme-table .tablepress thead tr th {
  border-bottom: 0;
  line-height: 1.05;
}

.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-3,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-4,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-5,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-7,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-8,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-9,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-10,
.fl-module.dcw-programme-table .tablepress thead tr.odd th.column-11 {
  background-color: #5e8fad;
}

.fl-module.dcw-programme-table .tablepress tbody tr td {
  border-top: 0;
  line-height: 1.05;
}

.fl-module.dcw-programme-table .tablepress tbody tr.odd td,
.fl-module.dcw-programme-table .tablepress tbody tr.even td {
	background-color: #fff;
}

.fl-module.dcw-programme-table .tablepress tbody tr td.column-1,
.fl-module.dcw-programme-table .tablepress tbody tr td.column-2,
.fl-module.dcw-programme-table .tablepress tbody tr td.column-6,
.fl-module.dcw-programme-table .tablepress tbody tr td.column-12 {
	text-align: center;
}

.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-3,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-4,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-5,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-7,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-8,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-9,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-10,
.fl-module.dcw-programme-table .tablepress tbody tr.odd td.column-11 {
  background-color: #5e8fad;
  border-top: 0;
  color: #fff;
}

.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-3,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-4,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-5,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-7,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-8,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-9,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-10,
.fl-module.dcw-programme-table .tablepress tbody tr.even td.column-11 {
  background-color: #699bb9;
  border-top: 0;
  color: #fff;
}

.dataTables_filter,
.dataTables_length {
	margin-bottom: 20px;
}

.dataTables_wrapper label input,
.dataTables_wrapper label select {
	margin: 0;
	height: 58px;
}

/* # Forms on the page background
----------------------------------------------------------------------------------------------------

 The contact form and the GDPR request forms both sit straight on the plum page
 background, so they are styled as a set of white rounded fields rather than the
 theme's default square grey-bordered inputs. 5px corners are the radius used by
 the shortcode cards, so the forms match the blocks elsewhere on the site.

 Both plugins are covered by the same rules - the markup differs but the
 treatment should not.
   Contact Form 7 - .wpcf7-form
   GDPR           - .gdpr-request-form (request / delete / complaint) and the
                    .gdpr-preferences button on the privacy preferences page */

/* The CF7 wrap is a span, so a margin on it does nothing - make it the field's
 * own block and the spacing below every field becomes consistent. The GDPR
 * forms have no wrapper at all, so their fields are spaced directly. */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 20px;
}

.wpcf7-form p {
	margin-bottom: 0;
}

/* The GDPR plugin outputs its fields as bare siblings with no spacing of their
 * own, so email, textarea and submit ran together in one block */
.gdpr-request-form input[type="email"],
.gdpr-request-form textarea {
	display: block;
	margin-bottom: 20px;
}

/* Nothing follows these forms on the page, so they need their own bottom margin
 * or the panel edge sits tight under the submit button */
.gdpr-request-form,
.entry-content .gdpr-preferences {
	margin-bottom: 40px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea,
.gdpr-request-form input[type="text"],
.gdpr-request-form input[type="email"],
.gdpr-request-form textarea {
	padding: 16px 18px;
	border: 2px solid transparent;
	border-radius: 8px;
	background-color: #fff;
	color: #333;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.4;
}

.wpcf7-form textarea,
.gdpr-request-form textarea {
	min-height: 220px;
	resize: vertical;
}

/* A gold ring rather than the theme's grey border, which is invisible against a
 * white field on a coloured background */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.gdpr-request-form input[type="text"]:focus,
.gdpr-request-form input[type="email"]:focus,
.gdpr-request-form textarea:focus {
	border-color: #f2d492;
	outline: none;
}

.wpcf7-form ::-moz-placeholder,
.gdpr-request-form ::-moz-placeholder {
	color: #7d6a74;
	opacity: 1;
}

.wpcf7-form ::-webkit-input-placeholder,
.gdpr-request-form ::-webkit-input-placeholder {
	color: #7d6a74;
}

.wpcf7-form ::placeholder,
.gdpr-request-form ::placeholder {
	color: #7d6a74;
	opacity: 1;
}

/* The page content button - see .dcw-button */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.gdpr-request-form input[type="submit"],
.entry-content .gdpr-preferences {
	width: auto;
	padding: 15px 34px;
	border: 3px solid #fff;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .14);
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.2;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus,
.wpcf7-form button[type="submit"]:hover,
.wpcf7-form button[type="submit"]:focus,
.gdpr-request-form input[type="submit"]:hover,
.gdpr-request-form input[type="submit"]:focus,
.entry-content .gdpr-preferences:hover,
.entry-content .gdpr-preferences:focus {
	background-color: rgba(255, 255, 255, .28);
	color: #fff;
}

/* ## Password protected pages
--------------------------------------------- 

 WordPress's own form on a password protected page - the CSV download tool is
 behind one. Same white rounded field and pill button as the forms above. The
 field is capped rather than run the full width of the content, because a
 password is a short thing to type and a full width box reads as a mistake. */

/* Core opens the form with an empty paragraph, which otherwise adds a blank
 * line's worth of space above the wording */
.post-password-form p:empty {
	display: none;
}

/* The field lives inside its label, so both have to become blocks for the
 * wording to sit above the box rather than beside it */
.post-password-form label {
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
}

.post-password-form input[type="password"] {
	display: block;
	width: 100%;
	max-width: 360px;
	margin-top: 8px;
	padding: 16px 18px;
	border: 2px solid transparent;
	border-radius: 8px;
	background-color: #fff;
	color: #333;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.4;
}

/* A gold ring rather than the theme's grey border, which is invisible against
 * a white field on a coloured background */
.post-password-form input[type="password"]:focus {
	border-color: #f2d492;
	outline: none;
}

/* The page content button - see .dcw-button */
.post-password-form input[type="submit"] {
	width: auto;
	margin-top: 20px;
	padding: 15px 34px;
	border: 3px solid #fff;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .14);
	color: #fff;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.2;
	cursor: pointer;
}

.post-password-form input[type="submit"]:hover,
.post-password-form input[type="submit"]:focus {
	background-color: rgba(255, 255, 255, .28);
	color: #fff;
}

/* # Forms - validation and messages
--------------------------------------------- */

.wpcf7-form .wpcf7-not-valid {
	border-color: #ffb3b3;
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #ffd4d4;
	font-size: 16px;
	font-size: 1.6rem;
}

.wpcf7 form .wpcf7-response-output {
	margin: 25px 0 0;
	padding: 16px 20px;
	border-width: 2px;
	border-radius: 8px;
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1.4;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #fff;
	background-color: rgba(255, 255, 255, .15);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #ffb3b3;
	background-color: rgba(255, 255, 255, .12);
}

.wpcf7-spinner {
	background-color: rgba(255, 255, 255, .6);
}

.dcw-home-notice {
	background-color: #e24f4f;
	color: #fff;
	text-align: center;
	padding: 40px 40px 34px;
	display: block;
}

.dcw-home-notice:hover,
.dcw-home-notice:focus {
	background-color: #d64040;
	color: #ffcdcd;
}

/* # Media Queries
---------------------------------------------------------------------------------------------------- */

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

	.site-inner,
	.wrap {
		max-width: 1200px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 920px;
	}

	.content {
		width: 800px;
	}

	.site-header .widget-area .simple-social-icons ul li {
		margin-bottom: 0 !important;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 580px;
	}

	.sidebar-primary {
		width: 300px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 340px;
	}

	.footer-widgets-1 {
		margin-right: 60px;
	}

}


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

	.site-inner,
	.wrap {
		max-width: 960px;
	}

	/* The header runs the full width of the screen from here down rather than
	 * sitting in a fixed column. .wrap is capped at 960px here and at 800px in
	 * the 1023px block below, which left the logo, the account bar and the social
	 * icons stranded well inside the edges of the screen. The content area keeps
	 * its cap - this is only the header and the two navs that sit against it. */
	.site-header > .wrap,
	.nav-primary .wrap,
	.nav-secondary .wrap {
		max-width: none;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 740px;
	}

	.content {
		width: 620px;
	}

	.site-header .widget-area {
		width: auto;
	}

	/* The account bar is positioned over the header on a desktop. From here down
	 * there is no longer room beside the title for it, and a logged in menu wraps
	 * to two lines and lands on top of the title, so it takes a row of its own.
	 * The colour matches .site-header in Yearly Color Updates - change together. */
	.nav-primary,
	.js .nav-primary {
		position: relative;
		width: auto;
		background-color: #67a1a1;
	}

	/* .wrap is given a top padding further down for the content area; on the
	 * account bar it just opens a gap above the buttons */
	.nav-primary .wrap {
		padding-top: 0;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 400px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 300px;
	}

	.footer-widgets-1 {
		margin-right: 30px;
	}
	
	.genesis-nav-menu a {
    padding: 20px 10px;
	}
	
	.tablepress.tablepress-id-1 {
		font-size: 16px;
		font-size: 1.6rem;
	}

}

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

	.site-inner,
	.wrap {
		max-width: 800px;
		padding-top: 28px;
	}

	.content,
	.content-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.js .genesis-nav-menu .sub-menu a,
	.js .genesis-nav-menu .sub-menu, 
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.title-area {
		width: 100%;
	}

	.site-header .wrap {
		padding-left: 5%;
		padding-right: 5%;
		position: relative;
	}

	/* Stacked against the right edge and centred on the header, which keeps them
	 * away from the date strip now the header is too narrow to sit beside it */
	/* Stretched between the header's top and bottom and centred inside that,
	 * rather than positioned from a midpoint: the widget's own box is not the
	 * same height as the icons it holds, so centring on it left them hanging
	 * over the bottom edge. The bottom inset is the larger of the two, which
	 * keeps a little more air between the last icon and the menu bar. */
	.site-header .widget-area {
		position: absolute;
		top: 16px;
		right: 2.5%;
		bottom: 24px;
		width: 42px;
		display: flex;
		align-items: center;
		margin: 0;
	}

	.site-header .widget-area .widget {
		width: 100%;
		margin: 0;
	}

	/* The plugin floats the icons, which leaves the list with no real height for
	 * the centring above to work from. A flex column gives it one. */
	.site-header .widget-area .simple-social-icons ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		float: none;
	}

	.site-header .widget-area .simple-social-icons ul li {
		float: none !important;
		margin: 0 0 6px !important;
	}

	.site-header .widget-area .simple-social-icons ul li:last-child {
		margin-bottom: 0 !important;
	}

	/* Smaller than the plugin's own sizing, so three of them stacked still fit
	 * inside the header at its shortest. The plugin styles these from an ID, so
	 * the override needs the weight. */
	.site-header #simple-social-icons-2 ul li a,
	.site-header #simple-social-icons-2 ul li a:hover,
	.site-header #simple-social-icons-2 ul li a:focus {
		font-size: 16px !important;
		padding: 8px !important;
	}

	.genesis-nav-menu li,
	.header-image .title-area,
	.site-header ul.genesis-nav-menu,
	.site-header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	.site-header .widget-area {
		text-align: center;
	}

	/* The strip is a full width row of the title flex box, so with the header now
	 * running the whole width it would finish well past the title above it. Cap
	 * it at the title block's width, as the 860px block does further down. */
	.site-description {
		max-width: 427px;
	}

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

	.site-header .search-form {
		margin: 16px auto;
	}

	.js nav.nav-primary {
		display: inherit;
	}

	.js nav.nav-secondary,
	.js .site-header nav  {
		display: none;
		position: relative;
	}

	.js .site-header nav .wrap {
		padding: 0;
	}

	.js nav.pagination {
		display: block;
	}

	.menu-toggle,
	.sub-menu-toggle {
		border-width: 0;
		color: #fff;
		display: block;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		visibility: visible;
	}
	
	.sub-menu-toggle:hover,
	.sub-menu-toggle:focus {
		border-width: 0;
	}

	.menu-toggle {
		border-top: 0;
		color: #fff;
		line-height: 20px;
		position: relative;
		right: 0;
		z-index: 1000;
		width: 100%;
	}

	.site-header .menu-toggle {
		border: 0;
	}

	.menu-toggle:before,
	.menu-toggle.activated:before {
		margin-right: 10px;
		text-rendering: auto;
		-webkit-transform: translate(0, 0);
		-ms-transform:     translate(0, 0);
		transform:         translate(0, 0);
	}
	

	.sub-menu-toggle {
		float: right;
		padding: 10px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
	}

	.sub-menu-toggle:before {
		display: inline-block;
		text-rendering: auto;
		-webkit-transform: translate(0, 0);
		-ms-transform:     translate(0, 0);
		transform:         translate(0, 0);
	}

	.sub-menu-toggle.activated:before {
		content: "\f142";
	}

	.js .nav-secondary .genesis-nav-menu .menu-item,
	.js .site-header .genesis-nav-menu .menu-item {
		display: block;
		float: none;
		margin: 1px 0;
		position: relative;
		text-align: left;
	}
	
	.js .nav-primary .genesis-nav-menu .menu-item {
		display: inherit;
		float: left;
		margin: inherit;
		position: inherit;
		text-align: inherit;
	}

	.js .genesis-nav-menu .menu-item:hover {
		position: relative;
	}

	.js .nav-secondary .genesis-nav-menu .menu-item a,
	.js .site-header .genesis-nav-menu .menu-item a {
		border: none;
		padding: 12px 5%;
		width: 100%;
	}

	.js .nav-primary .genesis-nav-menu .menu-item a {
		border: inherit;
		padding: 10px 18px;
		width: inherit;
	}

	.js .genesis-nav-menu .sub-menu {
		border: none;
	}

	.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu,
	.js .genesis-nav-menu .menu-item > a:focus ul.sub-menu .sub-menu {
		left: 0;
		margin-left: 0;
	}

	.js .genesis-nav-menu > .menu-item-has-children > a:after {
		content: none;
	}

	.js .genesis-nav-menu .sub-menu {
		clear: both;
		display: none;
		margin: 0;
		opacity: 1;
		padding-left: 15px;
		position: static;
		width: 100%;
	}

	.js .genesis-nav-menu .sub-menu .sub-menu {
		margin: 0;
	}

	.js nav button:focus,
	.js .menu-toggle:focus {
		outline: 0;
	}

	.footer-widgets-1,
	.footer-widgets-2 {
		margin: 0 auto 40px;
	}
	
	/* Stacked, the image and the booking form read as one panel: the image loses
	 * its bottom edge and its bottom corners, the form loses its top corners,
	 * and the 40px that used to sit between them goes. */
	.woocommerce #content div.product div.images,
	.woocommerce div.product div.images,
	.woocommerce-page #content div.product div.images,
	.woocommerce-page div.product div.images {
		width: 100%;
		margin-bottom: 0;
		border-bottom: 0;
		border-radius: 8px 8px 0 0;
	}
	
	.woocommerce #content div.product div.summary,
	.woocommerce div.product div.summary,
	.woocommerce-page #content div.product div.summary,
	.woocommerce-page div.product div.summary {
		width: 100%;
		border-radius: 0 0 8px 8px;
	}
	
	/* A 10px gutter round the whole booking page once it stacks. .site-inner
	 * carries 40px of its own down to 1023 and nothing at all below 860, so it
	 * is zeroed here and the gutter kept in one place. */
	.woocommerce.single-product .site-inner {
		padding: 0;
	}
	
	.woocommerce.single-product .content-area {
		padding: 30px 10px;
	}
	
	/* The image was held at its own 570px and centred, so once the column went
	 * full width a strip of page background showed either side - widest at 860,
	 * where the frame reaches 837px. It covers the frame now. The ratio is the
	 * image's own, so nothing is actually cropped unless the frame's shape
	 * changes. */
	.woocommerce div.product div.images img {
		width: 100%;
		max-width: none;
		aspect-ratio: 570 / 321;
		object-fit: cover;
	}

}

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

	/* Body size is a clamp on the base rule now, ramping down with the viewport
	 * rather than dropping 6px in one step here */
	
	input,
	select,
	textarea {
		font-size: 16px;
		font-size: 1.6rem;
	}
	
	textarea {
		line-height: 1.3;
	}

	.site-inner {
		/* Enough side padding for the content panel to read as a box - at zero it
		 * ran to both screen edges and its rounded corners never showed */
		padding: 28px 20px 0;
		max-width: none;
	}

	body:not(.edge-to-edge-content):not(.fl-builder):not(.woocommerce-page):not(.woocommerce) .entry {
		padding: 30px 25px;
	}

	.wrap {
		padding-left: 0;
		padding-right: 0;
	}

	.after-entry,
	.archive-description,
	.author-box,
	.comment-respond,
	.entry,
	.entry-comments,
	.entry-pings,
	.sidebar .widget {
		padding: 0;
		margin-bottom: 5%;
	}

	.sidebar {
		margin-bottom: 5%;
	}

	.pagination {
		margin: 5% auto;
	}

	.archive-pagination li a {
		margin-bottom: 4px;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	
	.entry-content ol,
	.entry-content ul {
    margin-left: 7%;
	}
	
	/* The circle has to be tall enough to cover the top and bottom corners of the
	 * title boxes tucked behind it - about 1.1x their combined height, plus the
	 * 5px ring of padding around the symbol. Trimming the boxes' vertical padding
	 * keeps that from needing a huge logo. */
	.site-header {
		--dcw-logo: 120px;
		--dcw-social: 60px;
	}

	/* Full size from about 680px up. Below that the title block, which is as wide
	 * as its own text, would otherwise run into the icon column pinned to the
	 * right, so the type ramps down instead of colliding. */
	.site-title {
		font-size: 38px;
		font-size: 3.8rem;
		font-size: clamp(32px, 5.6vw, 38px);
		padding-top: 10px;
		padding-bottom: 8px;
	}

	.second-line-title {
		font-size: 26px;
		font-size: 2.6rem;
		font-size: clamp(22px, 3.9vw, 26px);
		padding-top: 8px;
		padding-bottom: 6px;
	}

	/* The strip is a full width row of the title flex box, so it ran on well past
	 * the lockup above it. Line it up with the left edge of the title block and
	 * cap it at the title block's width - the dates are 44 characters against the
	 * title's 16, so they wrap to two lines rather than shrink to nothing.
	 * max-width tracks .site-title's width at this breakpoint. */
	.site-description {
		font-size: 15px;
		font-size: 1.5rem;
		width: fit-content;
		max-width: 340px;
		margin-left: calc(var(--dcw-logo) * 0.707);
		margin-right: 0;
	}
	
	.js nav.nav-primary {
		padding: 0 2.5%;
	}

	.footer-widgets {
		padding: 45px 5% 35px;
	}

	.footer-widgets .wrap {
		padding: 0;
	}
	
	.woocommerce .variations_form .field-name-county,
	.woocommerce .variations_form .field-name-postcode {
    width: 100%;
	}
	
	.woocommerce .field-name-postcode table.wccpf_fields_table td.wccpf_label {
		padding-right: 10px;
	}
	
	.woocommerce .field-name-postcode table.wccpf_fields_table td.wccpf_label label {
		width: 150px;
		padding-left: 20px;
	}
	
	.woocommerce #content div.product div.images,
	.woocommerce div.product div.images,
	.woocommerce-page #content div.product div.images, 
	.woocommerce-page div.product div.images {
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}

	.product_cat_standard-booking div.product .product_title {
		font-size: 28px;
	}
	
	.woocommerce #content div.product div.summary,
	.woocommerce div.product div.summary,
	.woocommerce-page #content div.product div.summary,
	.woocommerce-page div.product div.summary {
    margin: 0 0 40px;
	}
	
	.woocommerce #content div.product .woocommerce-tabs,
	.woocommerce-page #content div.product .woocommerce-tab,
	.woocommerce-page div.product .woocommerce-tabs {
		margin: 0 5%;
	}
	
	.woocommerce #content div.product div.summary p,
	.woocommerce div.product div.summary p,
	.woocommerce-page #content div.product div.summary p,
	.woocommerce-page div.product div.summary p {
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.woocommerce #content div.product div.summary .dcw-select-membership,
	.woocommerce div.product div.summary .dcw-select-membership,
	.woocommerce-page #content div.product div.summary .dcw-select-membership,
	.woocommerce-page div.product div.summary .dcw-select-membership {
		padding-left: 5%;
		padding-right: 5%;
	}
	
	.woocommerce div.product form.cart .variations td.label,
	.woocommerce div.product .previous_orders td.label {
    width: 33.3%;
    padding-left: 5%;
	}
	
	.woocommerce div.product form.cart .variations td.value {
    padding-right: 5%;
	}
	
	.woocommerce div.product .previous_orders tbody tr td.label {
		padding-left: 5%;
	}
	
	.woocommerce div.product .previous_orders tbody tr td.value {
    padding-right: 5%;
	}
	
	.woocommerce #content div.product div.summary .dcw-select-membership,
	.woocommerce div.product div.summary .dcw-select-membership,
	.woocommerce-page #content div.product div.summary .dcw-select-membership,
	.woocommerce-page div.product div.summary .dcw-select-membership {
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.woocommerce table.wccpf_fields_table td.wccpf_label {
    vertical-align: text-top;
		width: auto;
		padding-left: 10px!important;
		min-width: 100px;
	}

 	.woocommerce table.wccpf_fields_table td.wccpf_label label {
		width: 100%;
		padding: 16px 0px;
    line-height: 16px;
 	}

	.woocommerce .cart table.wccpf_fields_table td.wccpf_label {
		padding: 2.5px 0 2.5px 10px;
	}
	
	.woocommerce table.wccpf_fields_table td.wccpf_value {
		width: 72%;
		padding: 2.5px 10px 2.5px 0;
	}

	.woocommerce .wcff-label,
	.wc-deposits-wrapper,
	.woocommerce div.product .woocommerce-variation-price {
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.product .nyp label {
		padding-left: 5%;
	}
	
	.woocommerce div.product .woocommerce-variation-add-to-cart.variations_button {
		padding: 0 5%;
	}

	.woocommerce .product .dcwf-product-info.dcwf-pricing-structure,
	.woocommerce .product .single_variation_clone_wrap .dcwf-product-info.dcwf-nyp-info {
		margin-right: 5%;
	}
	
	.woocommerce .product .dcwf-product-info.dcwf-guardian-info,
	.woocommerce .product .dcwf-product-info.dcwf-nsl-info,
	.woocommerce .product .dcwf-product-info.dcwf-cl-info {
		right: 5%;
	}
	
	.wc-deposits-wrapper .wc-deposits-option li input {
    margin: -2px 4px 0 0;
	}
	
	.wc-deposits-wrapper .wc-deposits-option li {
    padding: .5em .75em;
  }
  
  .woocommerce .dcwf-product-overlay,
  .woocommerce-checkout  .dcwf-terms-overlay {
	  font-size: 15px;
	  font-size: 1.5rem;
  }
  
  .woocommerce .dcwf-popup-wrap,
  .woocommerce-checkout  .dcwf-terms-popup-wrap {
  	height: 75%;
	}
	
	.woocommerce .dcwf-popup-inner,
	.woocommerce-checkout  .dcwf-terms-popup-inner {
		padding: 20px 5%;
	}

	.woocommerce .dcw-quantity-text,
	.wccpf-group-title-h4 {
    padding-left: 2.5%;
	}

	.cart .wccpf-fields-container .wcff-fields-group {
		margin: 0 2.5%;
	}

	.dcw-last-name-wrapper .wccpf_label{
		line-height: 45px;
	}

	.dcw-last-name-wrapper .wccpf_label,
	.dcw-phone-wrapper .wccpf_label {
    display: table-cell;
	}
	
	.wcff-fields-group .wcff-layout-form-col {
		flex-basis: 100% !important;
		width: 100%;
	}
	
	div.wcff-fields-group > div.wcff-layout-form-row {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
    flex-flow: row nowrap;
	}

	div.wcff-fields-group > div.wcff-layout-form-row > div.wcff-layout-form-col {
    flex: none !important;
    min-height: 40px !important;
    position: relative!important;
	}

	div.wcff-fields-group > div.wcff-layout-form-row {
    flex-wrap: wrap !important;
	}

	table.wccpf_fields_table td.wccpf_value input[type=text],
	table.wccpf_fields_table td.wccpf_value input[type=number],
	table.wccpf_fields_table td.wccpf_value input[type=email],
	table.wccpf_fields_table td.wccpf_value input[type=password], 
	table.wccpf_fields_table td.wccpf_value textarea,
	table.wccpf_fields_table td.wccpf_value select {
    padding: 7px 10px !important;
    height: 45px !important;
	}

	.woocommerce.single-product .content-area {
		padding: 20px 10px;
	}

	/* Squared off from when this panel ran to both screen edges. It sits in a
	 * 10px gutter now, so it keeps the bottom corners and only gives up the top
	 * two, where the image meets it. */
	.woocommerce div.product div.summary {
		border-radius: 0 0 8px 8px;
	}

	.wccpf-validation-message {
		font-size: 14px;
	}

	.woocommerce .dcw-quantity-text {
    width: 110px;
	}

	.woocommerce-cart .entry-header {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
	/* The corners used to be squared off here, from when these tables ran to both
	 * screen edges with no border. They are framed panels now and .site-inner
	 * gives them a margin, so they keep the radius at every width. */
	
	.woocommerce .cart-collaterals,
	.woocommerce-page .cart-collaterals {
		padding: 0 2.5%;
	}
	
	.woocommerce-checkout .entry-title,
	.woocommerce-checkout .woocommerce-notices-wrapper,
	.woocommerce-checkout .woocommerce-form-login-toggle,
	.woocommerce-checkout .woocommerce-form-coupon-toggle {
		margin-left: 2.5%;
		margin-right: 2.5%;
	}

	.woocommerce .col2-set .col-1,
	.woocommerce-page .col2-set .col-1 {
		border-radius: 0;
	}

	.woocommerce .col2-set, 
	.woocommerce-page .col2-set {
		width: 100%;
		padding: 0;
		margin-bottom: 20px;
	}

	.woocommerce h3#order_review_heading {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	.woocommerce div#order_review {
		width: 100%;
		padding: 0;
	}

	.woocommerce-checkout.full-width-content .content {
		padding-left: 0;
		padding-right: 0;
	}

	/* The radius used to be dropped here, from when this box had no border and
	 * ran full width. It is a framed panel now, and squaring it off would leave
	 * it the odd one out against the order table above. */

	
	.woocommerce-order-received .entry-content {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	.footer-widgets ul li {
    margin-bottom: 0;
    padding-bottom: 0;
	}

	.footer-widgets p {
    margin-bottom: 5px;
	}

	.footer-widgets-1,
	.footer-widgets-2 {
    margin: 0 auto 20px;
	}

	.footer-widgets ul {
		margin-bottom: 0;
	}

	/* The credit line is the last thing on a phone screen and the least worth
	 * the room, so it gives up more again here. */
	.site-footer {
		padding: 14px 0;
		font-size: 14px;
		font-size: 1.4rem;
	}

	.dcw-home-notice {
		padding: 25px 2.5% 24px;
	}

	.dcw-home-notice h1,
	.dcw-home-notice h2 {
		font-size: 20px;
	}

	.dcw-home-notice h3, 
	.dcw-home-notice h4 {
		font-size: 20px;
	}

  .dcw-no-collapse .fl-col {
    width: 100% !important;
    float: left !important;
		clear: none !important;
		max-width: none !important;
  }

  .dcw-no-collapse .fl-col > .fl-col {
    width: 50% !important;
    float: left !important;
		clear: none !important;
		max-width: none !important;
  }

}


@media only screen and (max-width: 782px) {
	
	.woocommerce.admin-bar .dcwf-product-overlay,
	.woocommerce-checkout.admin-bar .dcwf-terms-overlay {
	  margin-top: -46px;
	}
	
}

@media only screen and (max-width: 768px) {
	
	.woocommerce table.shop_table_responsive tr.cart_item,
	.woocommerce-page table.shop_table_responsive tr.cart_item {
		position: relative;
	}
	
	.woocommerce table.shop_table_responsive tr td.product-remove,
	.woocommerce-page table.shop_table_responsive tr td.product-remove {
    width: 100%;
    display: inline-block;
	}
	
	.woocommerce table.shop_table_responsive tr td.product-edit,
	.woocommerce-page table.shop_table_responsive tr td.product-edit {
    width: auto;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    height: 36px;
    line-height: 25px;
    border-top: 0;
	}
	
	.woocommerce table.shop_table_responsive tr td.product-edit:before,
	.woocommerce-page table.shop_table_responsive tr td.product-edit:before {
    display: none;
	}


	.woocommerce-page.woocommerce-checkout table.shop_table, 
	.woocommerce-page.woocommerce-checkout table.shop_table tbody, 
	.woocommerce-page.woocommerce-checkout table.shop_table td, 
	.woocommerce-page.woocommerce-checkout table.shop_table tr,
	.woocommerce-page.woocommerce-checkout table.shop_table th,
	.woocommerce-page.woocommerce-checkout table.shop_table tfoot { 
		display: block; 
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table tfoot,
	.woocommerce-page.woocommerce-checkout table.shop_table tfoot tr {
		width: 100%;
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table tbody tr:first-child td.product-name,
	.woocommerce-page.woocommerce-checkout table.shop_table tfoot tr:first-child th {
		border-top: 0;
	}

	.dataTables_filter,
	.dataTables_length {
		margin-bottom: 10px;
		float: left !important;
	}

	.dataTables_wrapper label input,
	.dataTables_wrapper label select {
		margin: 0;
		height: 40px;
		padding: 5px;
	}
	
	
	/*
	.woocommerce-page.woocommerce-checkout table.shop_table td { 
		border: 1px solid #d2d3d3; 
		position: relative;
		padding-left: 30% !important; 
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table {
		border: none;
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-spacer {
		border-color: #FFF;
		height: 10px;
	}
	*/
	
	/*
	.woocommerce-page.woocommerce-checkout table.shop_table td:before { 
		width: 100%;
	}
	*/
	
	
	/*
	Label the data
	*/
	/*
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-remove:before {
		content: "DELETE";
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-thumbnail:before {
		content: "IMAGE";
	}*/
	
	/*
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-name:before {
		content: "Membership ";
	}
	*/
	/*
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-price:before {
		content: "PRICE";
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-quantity:before {
		content: "QUANTITY";
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-subtotal:before {
		content: "SUBTOTAL";
	}
	
	.woocommerce-page.woocommerce-checkout table.shop_table td.product-total:before {
		content: "TOTAL";
	}
	*/
	
	/*
	.woocommerce .quantity, 
	.woocommerce #content .quantity, 
	.woocommerce-page .quantity, 
	.woocommerce-page #content .quantity {
		margin: 0;
	}
	
	.woocommerce-page table.cart td.actions, 
	.woocommerce-page #content table.cart td.actions {
		text-align: left;
		border:0;
		padding-left: 6px !important;
	}
	
	.woocommerce-page table.cart td.actions .button.alt, 
	.woocommerce-page #content table.cart td.actions .button.alt {
		float: left;
		margin-top: 10px;
	}
	
	.woocommerce-page table.cart td.actions div, 
	.woocommerce-page #content table.cart td.actions div,
	.woocommerce-page table.cart td.actions input, 
	.woocommerce-page #content table.cart td.actions input {
		margin-bottom: 10px;
	}
	
	.woocommerce-page .cart-collaterals .cart_totals {
		float: left;
		width: 100%;
		text-align: left;
	}
	
	.woocommerce-page .cart-collaterals .cart_totals th, 
	.woocommerce-page .cart-collaterals .cart_totals td {
		border:0 !important;
	}
	
	.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
	.woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
	.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
		padding-left: 6px !important;
	}
	
	.woocommerce-page table.shop_table tr.cart-subtotal td,
	.woocommerce-page table.shop_table tr.shipping td,
	.woocommerce-page table.shop_table tr.total td,
	.woocommerce-page table.shop_table.order_details tfoot th,
	.woocommerce-page table.shop_table.order_details tfoot td {
		padding-left: 6px !important;
		border:0 !important;
	}
	
	.woocommerce-page table.shop_table tbody {
		padding-top: 10px;
	}
	
	.woocommerce .col2-set .col-1, 
	.woocommerce-page .col2-set .col-1,
	.woocommerce .col2-set .col-2, 
	.woocommerce-page .col2-set .col-2,
	.woocommerce form .form-row-first, 
	.woocommerce form .form-row-last, 
	.woocommerce-page form .form-row-first, 
	.woocommerce-page form .form-row-last {
		float: none;
		width: 100%;
	}
	
	.woocommerce .order_details ul, 
	.woocommerce-page .order_details ul,
	.woocommerce .order_details, 
	.woocommerce-page .order_details {
		padding:0;
	}
	
	.woocommerce .order_details li, 
	.woocommerce-page .order_details li {
		clear: left;
		margin-bottom: 10px;
		border:0;
	}
	*/

}


@media only screen and (max-width: 580px) {
	
	/* The desktop padding is set with !important, so trimming it needs the same */
	.site-header > .wrap,
	body .site-header > .wrap {
		padding: 16px 5% 12px !important;
	}

	.footer-widgets .wrap {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	/* See the 860px block - the logo is sized to cover the title boxes' corners */
	.site-header {
		--dcw-logo: 104px;
	}

	/* Full size from about 520px up, then ramping down - see the 860px block.
	 * The title box is as wide as its own text, so without this it grows into
	 * the icon column pinned to the right. */
	.site-title {
		font-size: 30px;
		font-size: 3.0rem;
		font-size: clamp(25px, 5.8vw, 30px);
		padding-top: 10px;
		padding-right: 16px;
		padding-bottom: 8px;
	}

	.second-line-title {
		font-size: 21px;
		font-size: 2.1rem;
		font-size: clamp(17.5px, 4.05vw, 21px);
		padding-top: 8px;
		padding-right: 16px;
		padding-bottom: 6px;
		letter-spacing: 1.6px;
	}

	/* Tracks .site-title's width at this breakpoint - see the 860px block. The
	 * type drops far enough to keep the dates on one line inside that width. */
	.site-description {
		font-size: 11px;
		font-size: 1.1rem;
		max-width: 270px;
	}
	
	.entry-content ol,
	.entry-content ul {
    margin-left: 10%;
	}
	
	.nav-primary .genesis-nav-menu {
		font-size: 14px;
		font-size: 1.4rem;
	}
	
	.js .nav-primary .genesis-nav-menu .menu-item a {
    padding: 10px 8px;
	}
  
  .woocommerce .dcwf-popup-wrap,
  .woocommerce-checkout  .dcwf-terms-popup-wrap {
  	height: 95%;
	}
	
	.woocommerce-checkout .dcwf-terms-overlay .button.agree-terms {
		margin-left: 10px;
	}
	
	.woocommerce-checkout .dcwf-terms-overlay .button.agree-terms,
	.woocommerce-checkout .dcwf-terms-overlay .button.disagree-terms {
		font-size: 16px;
		font-size: 1.6rem;
	}

	
}


@media only screen and (max-width: 460px) {
  
	/* See the 860px block. The type comes down a step as well, so the bigger
	 * circle still leaves the title room to sit beside it on a 320px screen -
	 * any wider and the flex row wraps and drops the title below the logo. */
	.site-header {
		--dcw-logo: 82px;
	}

	/* Held at full size down to 375px, then scaled with the viewport rather than
	 * wrapping - the grid above stops the block dropping, so the only thing left
	 * to give is the type. */
	.site-title {
		font-size: 21px;
		font-size: 2.1rem;
		font-size: clamp(17px, 5.6vw, 21px);
		padding-top: 8px;
		padding-right: 10px;
		padding-bottom: 6px;
	}

	.second-line-title {
		font-size: 15px;
		font-size: 1.5rem;
		font-size: clamp(12px, 4vw, 15px);
		padding-top: 6px;
		padding-right: 10px;
		padding-bottom: 5px;
		letter-spacing: 1px;
	}

	/* Nothing hugs at this size - the logo, the title boxes and the date strip
	 * all take the full width so the header reads as one solid block.
	 *
	 * A grid rather than the wrapping flex row used above: the logo and the title
	 * keep their row however narrow the screen gets, so the title can never drop
	 * underneath the logo. The title column squeezes instead. */
	.title-area {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}

	.title-desc-wrap {
		flex: 1 1 auto;
	}

	.site-description {
		grid-column: 1 / -1;
	}

	.site-description {
		font-size: 12px;
		font-size: 1.2rem;
		width: auto;
		max-width: none;
		margin: 8px 0;
	}

	/* Back into the flow, centred under the dates - there is no width left to
	 * hold a column of icons beside the title */
	.site-header .widget-area {
		position: static;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	.site-header .widget-area .simple-social-icons ul {
		display: inline-block;
		float: none;
	}

	/* Back to a row, so the gap goes sideways rather than underneath - the
	 * stacked rule above puts it below each icon */
	.site-header .widget-area .simple-social-icons ul li {
		display: inline-block !important;
		float: none !important;
		margin: 0 5px !important;
	}
	
	.entry-content ol,
	.entry-content ul {
    margin-left: 10%;
	}

	.site-inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	body:not(.edge-to-edge-content):not(.fl-builder):not(.woocommerce-page):not(.woocommerce) .entry {
		padding: 22px 18px;
	}

	/* .woocommerce .flex-container{
    flex-direction: column;
    align-items: flex-start;
	} */
	
}

/* # Print Styles
---------------------------------------------------------------------------------------------------- */

@media print {

	*,
	*:before,
	*:after {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	a[href^="javascript:"]:after,
	a[href^="#"]:after,
	.site-title > a:after {
		content: "";
	}

	thead {
		display: table-header-group;
	}

	img,
	tr {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 2cm 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	blockquote,
	pre {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	.content,
	.content-sidebar {
		width: 100%;
	}

	button,
	input,
	select,
	textarea,
	.breadcrumb,
	.comment-edit-link,
	.comment-form,
	.comment-list .reply a,
	.comment-reply-title,
	.edit-link,
	.entry-comments-link,
	.entry-footer,
	.genesis-box,
	.header-widget-area,
	.hidden-print,
	.home-top,
	.nav-secondary,
	.post-edit-link,
	.sidebar {
		display: none !important;
	}
	
	.nav-primary {
		display: block !important;
	}
	
	.title-area {
		text-align: center;
		width: 100%;
	}

	.site-title > a {
		margin: 0;
		text-decoration: none;
		text-indent: 0;
	}

	.site-inner {
		padding-top: 0;
		position: relative;
		top: -100px;
	}

	.author-box {
		margin-bottom: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		orphans: 3;
		page-break-after: avoid;
		page-break-inside: avoid;
		widows: 3;
	}


	img {
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	blockquote,
	pre,
	table {
		page-break-inside: avoid;
	}

	dl,
	ol,
	ul {
		page-break-before: avoid;
	}

}