/* ------------------------------------------------------------------
   Wave Passage — the layer the donor stylesheet does not cover.
   Written in the donor's own two typefaces and its three colours:
   EB Garamond, Lato, #a92125, #656565, #faf9f7.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------- wordmark */

/* The donor hangs a 190px crest above a centred wordmark and hides every menu
   item behind a burger. That reads as the donor's own header on any page that
   uses it, so the lockup moves to the left of the row and the navigation comes
   out onto the bar; the burger stays, but only where a phone needs it. */
.wordmark { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.wordmark .wordmark-device { display: block; line-height: 0; flex: none; }
.wordmark .wordmark-words { display: block; }
.wordmark .wordmark-name {
	display: block;
	font-family: "EB Garamond", serif;
	font-size: 27px;
	line-height: 30px;
	letter-spacing: 3px;
	text-transform: uppercase;
	white-space: nowrap;
}
.wordmark .wordmark-note {
	display: block;
	font-family: "Lato", sans-serif;
	font-size: 10px;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-top: 5px;
	opacity: 0.85;
	white-space: nowrap;
}

/* Two tiers: the lockup and the desk line on the first, the menu on a rule of
   its own below. Eight items do not fit beside a wordmark, and squeezing them
   into two ragged lines beside it looks like an accident. */
@media only screen and (min-width: 767px) {
	header .bot { padding-top: 42px; }
	header .deck-side {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 24px;
		padding-top: 14px;
	}
	header .deck-line {
		font-family: "Lato", sans-serif;
		font-size: 12px;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		opacity: 0.9;
	}
	header .deck-line a { text-decoration: none; }
	header .deck-line a:hover { text-decoration: underline; }
	header .deck-book {
		flex: none;
		font-family: "Lato", sans-serif;
		font-size: 12px;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		text-decoration: none;
		border: 1px solid rgba(255, 255, 255, 0.55);
		padding: 12px 20px;
		transition: 0.4s;
	}
	header .deck-book:hover { background: #a92125; border-color: #a92125; }

	header .deck {
		margin-top: 30px;
		border-top: 1px solid rgba(255, 255, 255, 0.28);
		border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	}
	header .deck-nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px 22px;
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	header .deck-nav li { list-style: none; }
	header .deck-nav li:before { display: none; }
	header .deck-nav a {
		display: block;
		font-family: "Lato", sans-serif;
		font-size: 12px;
		letter-spacing: 1.8px;
		text-transform: uppercase;
		text-decoration: none;
		padding: 15px 0px 13px;
		border-bottom: 2px solid transparent;
		transition: 0.4s;
	}
	header .deck-nav a:hover { border-bottom-color: #a92125; }
	header .deck-nav li.on a { border-bottom-color: #a92125; }
	header .deck-burger { display: none; }
	#teaser.open .deck-book { border-color: rgba(101, 101, 101, 0.4); }
	#teaser.open .deck { border-color: rgba(101, 101, 101, 0.2); }
}
/* Narrow desktops: the eight items tighten before they wrap. */
@media only screen and (min-width: 767px) and (max-width: 1000px) {
	header .deck-nav { gap: 8px 14px; }
	header .deck-nav a { font-size: 11px; letter-spacing: 1.1px; }
	header .deck-line { display: none; }
}

/* On a phone the donor drops the background image off #teaser and swaps its
   white logo for a black one. There is no second file to swap to here, so the
   colours move instead; otherwise the wordmark is white type on white. */
@media only screen and (max-width: 767px) {
	header .bot { padding-top: 26px; position: relative; }
	header .deck { display: none; }
	header .logo { padding-right: 58px; }
	header .logo .wordmark { justify-content: flex-start; margin-top: 4px; }
	.wordmark .wordmark-device svg { width: 52px; height: 52px; }
	.wordmark .wordmark-name { font-size: 22px; letter-spacing: 2px; }
	.wordmark .wordmark-note { font-size: 9px; letter-spacing: 3px; }
	header .deck-burger { position: absolute; right: 0px; top: 12px; z-index: 10; }
	header .deck-burger .menu-icon div, header .deck-burger #navToggle div { display: none; }
	/* The donor's `header *` rule paints every node inside the header white,
	   including each <path> of the device, and stroke="currentColor" resolves
	   against the element's own colour. The shapes have to be named. */
	header .logo .wordmark .wordmark-device,
	header .logo .wordmark .wordmark-device svg,
	header .logo .wordmark .wordmark-device svg * { color: #a92125; }
	header .logo .wordmark .wordmark-name { color: #691517; }
	header .logo .wordmark .wordmark-note { color: #9a9a9a; }
}
#teaser.open header .wordmark * { color: #656565; }

.wordmark-foot { display: block; margin-bottom: 10px; text-align: left; }
.editorTxt a.wordmark-foot, .editorTxt a.wordmark-foot:hover { text-decoration: none; border-bottom: 0px; }
.wordmark-foot .wordmark-words { display: block; }
.wordmark-foot .wordmark-device { margin: 0px 0px 12px; color: #a92125; }
.wordmark-foot .wordmark-device svg { width: 62px; height: 62px; }
.wordmark-foot .wordmark-name { color: #691517; font-size: 30px; }
.wordmark-foot .wordmark-note { color: #9a9a9a; }
@media only screen and (max-width: 767px) {
	.wordmark-foot { text-align: center; }
	.wordmark-foot .wordmark-device { margin: 0px auto 12px; }
	.wordmark-foot .wordmark-name { font-size: 26px; }
}


/* The booking link inside the phone menu, where the bar version is hidden. */
.deck-book--phone {
	display: block;
	text-align: center;
	margin-bottom: 18px;
	padding: 14px 18px;
	background: #a92125;
	color: #fff !important;
	font-family: "Lato", sans-serif;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---------------------------------------------------------- header rail */

header .top .rail-left { float: left; }
header .top .rail-left a {
	margin-right: 26px;
	font-size: 13px;
	letter-spacing: 0.5px;
	padding-left: 22px;
}
header .top .rail-left a:before { position: absolute; left: 0px; top: 1px; font-size: 14px; }
header .top .rail-right { float: right; }

.age-flag {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 4px 14px;
	white-space: nowrap;
}
#teaser.open .age-flag { border-color: rgba(101, 101, 101, 0.4); }
.age-flag-row { text-align: center; margin-top: 18px; }
.age-flag-row .age-flag { color: #656565; border-color: #ddd8d2; }

nav .secondary .rail-left { float: none; }
nav .secondary .rail-left a {
	display: block;
	padding-left: 22px;
	margin: 0px 0px 8px;
	font-size: 14px;
	position: relative;
	color: #656565;
	text-decoration: none;
}
nav .secondary .rail-left a:before { position: absolute; left: 0px; top: 2px; }

/* A full-height hero is right for a home page and far too much for a rates
   sheet or a privacy statement. */
#teaser.inner-banner { height: auto; min-height: 0; max-height: none; }
@media only screen and (min-width: 767px) {
	#teaser.inner-banner { height: 560px; min-height: 560px; }
	#teaser.inner-banner .txt-wrap h1 { font-size: 42px; line-height: 50px; }
}
/* The donor's hero is a dim photograph of a wall in shade and its 20% scrim is
   enough. Open water at midday needs more behind white type. */
@media only screen and (min-width: 767px) {
	#teaser:after { background: rgba(0, 0, 0, 0.34); }
}

.meta-line {
	margin-top: 26px;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.meta-line span { padding-right: 18px; display: inline-block; }
@media only screen and (max-width: 767px) {
	.meta-line { letter-spacing: 1px; }
	.meta-line span { display: block; padding-right: 0px; overflow-wrap: anywhere; }
}

/* -------------------------------------------------------------- buttons */

.cta {
	display: inline-block;
	border: 0px;
	background: #a92125;
	color: #fff;
	font-family: "Lato", sans-serif;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 15px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 18px 30px;
	cursor: pointer;
	transition: 0.4s;
}
.cta:hover { background: #656565; color: #fff; }
.cta-big { padding: 24px 44px; font-size: 15px; }
.cta-quiet { background: #9a9a9a; }
.cta-quiet:hover { background: #656565; }
.cta-line { background: transparent; color: #656565; border: 1px solid #d8d8d8; }
.cta-line:hover { background: #656565; color: #fff; }
.editorTxt a.cta { color: #fff; text-decoration: none; }
.editorTxt a.cta-line { color: #656565; }
.editorTxt a.cta-line:hover { color: #fff; }

/* The donor flattens the top of whatever comes first inside .editorTxt
   (`.editorTxt :first-child { margin-top:0; padding-top:0 }`) so a leading
   heading sits flush. That also catches a leading button or callout, which
   then stands 20px shorter than the thing beside it. Given back. */
.editorTxt .cta:first-child { padding-top: 18px; }
.editorTxt .cta-big:first-child { padding-top: 24px; }
.editorTxt .callout:first-child { padding-top: 26px; }

.cta-row { margin-top: 26px; }
/* Two buttons will not sit side by side in a half-width column, so they stack,
   and stacked buttons of different widths read as an accident. */
.cta-row .cta { margin: 0px 12px 12px 0px; min-width: 250px; text-align: center; }

/* The donor's slideshows are filled by a CMS that crops every image to 475px
   against a 540px column, which is why its text and its pictures finish at the
   same line. Stock photographs arrive at 16:9 and stop 170px early. */
.cycle img { height: 475px; object-fit: cover; }
@media only screen and (max-width: 767px) { .cycle img { height: 300px; } }

/* --------------------------------------------------------- cookie notice */

.cookie-tray {
	position: fixed;
	left: 0px; right: 0px; bottom: 0px;
	z-index: 900;
	background: #fff;
	box-shadow: 0px -6px 40px rgba(0, 0, 0, 0.18);
	max-height: 85vh;
	overflow-y: auto;
}
.cookie-tray[hidden] { display: none; }
.cookie-tray-bar {
	max-width: 1300px;
	margin: 0px auto;
	padding: 22px 26px;
	display: flex;
	gap: 26px;
	align-items: center;
	flex-wrap: wrap;
}
.cookie-tray-copy { flex: 1 1 420px; }
.cookie-tray-copy p { font-size: 14px; line-height: 22px; margin: 0px; }
.cookie-tray-copy a { color: #a92125; }
.cookie-tray-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-tray-actions .cta { padding: 14px 22px; font-size: 12px; }
.cookie-tray-detail {
	max-width: 1300px;
	margin: 0px auto;
	padding: 0px 26px 26px;
	border-top: 1px solid #eee;
}
.cookie-tray-detail[hidden] { display: none; }
.cookie-tray-detail h3 {
	font-family: "EB Garamond", serif;
	font-size: 24px;
	color: #9a9a9a;
	margin: 22px 0px 14px;
}
.cookie-tray-detail .cta { margin-top: 14px; }

.cookie-reopen {
	position: fixed;
	right: 30px;
	bottom: 92px;
	z-index: 80;
	background: #fff;
	color: #656565;
	border: 1px solid #e2e2e2;
	box-shadow: 10px -10px 60px rgba(0, 0, 0, 0.1);
	font-family: "Lato", sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 12px 14px;
	cursor: pointer;
	transition: 0.4s;
}
.cookie-reopen:hover { background: #a92125; color: #fff; border-color: #a92125; }

/* ------------------------------------------------------------------ forms */

/* Out of sight of people, in plain view of anything that fills in every field
   it finds. Clipped rather than pushed off-canvas, so it cannot widen a page. */
.trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.enquiry { max-width: 900px; }
.enquiry-grid { display: flex; flex-wrap: wrap; margin: 0px -12px; padding-left: 0px; }
.enquiry .enquiry-cell { width: 50%; padding: 0px 12px 16px; list-style: none; }
.enquiry .enquiry-cell-wide { width: 100%; }
@media only screen and (max-width: 767px) { .enquiry .enquiry-cell { width: 100%; } }
.enquiry .enquiry-cell label {
	display: block;
	width: 100%;
	float: none;
	top: 0px;
	font-size: 15px;
	line-height: 26px;
	letter-spacing: 0.5px;
}
.enquiry .enquiry-cell label i {
	font-size: 12px;
	font-style: italic;
	padding-left: 10px;
	color: #a92125;
}
.enquiry .enquiry-cell input,
.enquiry .enquiry-cell select,
.enquiry .enquiry-cell textarea {
	width: 100%;
	float: none;
	background: #faf9f7 !important;
	border: 0px;
	border-left: 2px solid #9a9a9a !important;
	padding: 0px 15px;
	height: 48px;
	line-height: 48px !important;
	font-size: 17px;
	font-family: "Lato", sans-serif;
	color: #656565;
}
.enquiry .enquiry-cell textarea {
	height: 150px;
	line-height: 24px !important;
	padding: 12px 15px;
	resize: vertical;
}
.enquiry .enquiry-cell input:focus,
.enquiry .enquiry-cell select:focus,
.enquiry .enquiry-cell textarea:focus { border-left-color: #a92125 !important; }
.needs-filling input,
.needs-filling select,
.needs-filling textarea { border-left-color: #d0021b !important; }
.needs-filling > span { color: #d0021b; }

.consent { margin: 14px 0px 30px; }
.consent-row {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 24px;
	cursor: pointer;
}
.consent-row input { position: absolute; left: 0px; top: 5px; width: 15px; height: 15px; }
.consent-row span { display: block; }
.consent-row span i { font-style: italic; color: #a92125; font-size: 12px; padding-left: 6px; }
.consent-row a { color: #a92125; }
.enquiry-note { font-size: 14px; line-height: 22px; margin-top: 20px; color: #9a9a9a; }
.enquiry-note a { color: #a92125; }

/* The date strip */
.availability {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	background: #fff;
	padding: 26px 28px;
}
.availability-cell { flex: 1 1 170px; }
.availability-cell-tight { flex: 0 1 110px; }
.availability label {
	display: block;
	width: 100%;
	float: none;
	top: 0px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9a9a9a;
	margin-bottom: 6px;
}
.availability input,
.availability select {
	width: 100%;
	float: none;
	height: 46px;
	line-height: 46px !important;
	padding: 0px 12px;
	border: 0px;
	border-left: 2px solid #a92125 !important;
	background: #faf9f7 !important;
	font-size: 16px;
	font-family: "Lato", sans-serif;
	color: #656565;
}
@media only screen and (max-width: 767px) {
	.availability { padding: 20px; }
	.availability-cell, .availability-cell-tight { flex: 1 1 100%; }
	.availability .cta { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------- content */

/* The donor's ghost section number sits behind a three-word title. Two-line
   titles collide with it, so the number moves left and pales off. */
.row-title.section-head { padding-left: 170px; }
.row-title.section-head div {
	font-size: 128px;
	color: #f0dcdc;
	top: 44px;
	left: 12px;
}
@media only screen and (max-width: 767px) {
	.row-title.section-head { padding-left: 20px; padding-top: 70px; }
	.row-title.section-head div { font-size: 92px; top: 0px; left: 14px; }
}

.eyebrow {
	display: block;
	font-family: "Lato", sans-serif;
	font-size: 12px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: #a92125;
	margin-bottom: 14px;
	font-weight: 700;
}
.lede { font-size: 21px !important; line-height: 33px !important; }
@media only screen and (max-width: 767px) {
	.lede { font-size: 18px !important; line-height: 29px !important; }
}

/* Tiles: rooms, packages, the things the hotel runs */
.tile-grid { display: flex; flex-wrap: wrap; margin: 0px -15px; }
.tile { width: 33.333%; padding: 0px 15px 30px; }
@media only screen and (max-width: 1000px) { .tile { width: 50%; } }
@media only screen and (max-width: 767px)  { .tile { width: 100%; } }
.tile-inner { background: #fff; height: 100%; display: flex; flex-direction: column; }
/* Stock photography arrives in three shapes; tile headings still have to line
   up across a row. */
.tile img { display: block; width: 100%; height: 230px; object-fit: cover; }
@media only screen and (max-width: 767px) { .tile img { height: 200px; } }
.tile-copy { padding: 28px 30px 30px; flex: 1; display: flex; flex-direction: column; }
.tile-copy h3 {
	font-family: "EB Garamond", serif;
	font-size: 28px;
	line-height: 34px;
	color: #9a9a9a;
	margin-bottom: 8px;
}
.tile-tag {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a92125;
	margin-bottom: 14px;
	display: block;
}
.tile-copy p { font-size: 16px; line-height: 25px; margin-bottom: 16px; }
.tile-rate {
	font-family: "EB Garamond", serif;
	font-size: 24px;
	color: #a92125;
	margin-bottom: 14px;
}
.tile ul { padding-left: 22px !important; margin-bottom: 20px !important; }
.tile ul li { font-size: 15px !important; line-height: 23px !important; padding-bottom: 8px !important; }
.tile-foot { margin-top: auto; }

/* Counted things */
.figures { display: flex; flex-wrap: wrap; text-align: center; }
.figure { width: 20%; padding: 10px 12px; }
@media only screen and (max-width: 767px) { .figure { width: 50%; } }
.figure strong {
	display: block;
	font-family: "EB Garamond", serif;
	font-size: 52px;
	line-height: 58px;
	color: #a92125;
}
.figure strong.figure-stars { font-size: 26px; letter-spacing: 3px; line-height: 58px; }
@media only screen and (max-width: 767px) {
	.figure strong { font-size: 40px; line-height: 48px; }
	.figure strong.figure-stars { font-size: 20px; line-height: 48px; }
}
.figure span {
	display: block;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9a9a9a;
	margin-top: 8px;
}

/* Plain tables: rates, distances, the gaming floor, opening hours */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
	text-align: left;
	padding: 14px 20px 14px 0px;
	border-bottom: 1px solid #eee;
	vertical-align: top;
	font-size: 16px;
	line-height: 25px;
}
.spec-table th {
	font-family: "EB Garamond", serif;
	font-size: 21px;
	color: #656565;
	white-space: nowrap;
	width: 26%;
}
.spec-table td.spec-figure {
	color: #a92125;
	font-weight: 700;
	white-space: nowrap;
	width: 16%;
}
@media only screen and (max-width: 767px) {
	.spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: 100%; }
	.spec-table tr { padding: 12px 0px; border-bottom: 1px solid #eee; }
	.spec-table th, .spec-table td { border: 0px; padding: 2px 0px; }
	/* Row headings stop being a column once the table stacks, and some of them
	   are long. */
	.spec-table th { white-space: normal; }
}

/* Four facts under a heading */
.factbar { display: flex; flex-wrap: wrap; border-top: 1px solid #eee; margin: 24px 0px; }
.factbar div { width: 25%; padding: 14px 20px 14px 0px; border-bottom: 1px solid #eee; }
@media only screen and (max-width: 767px) { .factbar div { width: 50%; } }
.factbar dt {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a92125;
	margin-bottom: 4px;
}
.factbar dd { margin: 0px; font-size: 16px; line-height: 24px; }

/* The block that carries the helplines, repeated wherever gaming is discussed */
.callout {
	background: #faf9f7;
	border-left: 4px solid #a92125;
	padding: 26px 30px;
	margin: 30px 0px;
}
.callout h3 {
	font-family: "EB Garamond", serif;
	font-size: 26px;
	color: #a92125;
	margin-bottom: 12px;
}
.callout p, .callout li { font-size: 16px; line-height: 26px; }
.callout ul { padding-left: 0px !important; margin-bottom: 0px !important; }
.callout ul li { list-style: none; padding: 4px 0px !important; }
.callout ul li:before { display: none; }
.callout a { color: #a92125; }

/* Questions, asked at the desk often enough to answer in advance */
.faq { border-top: 1px solid #e6e4e0; margin-top: 24px; }
.faq-item { border-bottom: 1px solid #e6e4e0; padding: 20px 0px; }
.faq-item h3 {
	font-family: "EB Garamond", serif;
	font-size: 23px;
	line-height: 30px;
	color: #656565;
	margin-bottom: 6px;
}
.faq-item p { font-size: 16px !important; line-height: 26px !important; margin: 0px !important; }

/* Long-form and legal pages */
.prose { max-width: 860px; }
.prose h2 {
	font-family: "EB Garamond", serif;
	font-size: 30px;
	color: #9a9a9a;
	margin: 40px 0px 14px;
}
.prose h3 {
	font-family: "EB Garamond", serif;
	font-size: 23px;
	color: #656565;
	margin: 26px 0px 8px;
}
.prose > *:first-child { margin-top: 0px; }

/* Two text columns side by side; the donor never has them */
.split-columns { display: flex; flex-wrap: wrap; margin: 0px -24px; }
.split-columns > div { width: 50%; padding: 0px 24px; }
@media only screen and (max-width: 767px) { .split-columns > div { width: 100%; padding-bottom: 24px; } }

/* A white panel for sections sitting on the grey ground */
.panel-white { background: #fff; padding: 50px 55px; }
@media only screen and (max-width: 767px) { .panel-white { padding: 30px 22px; } }

/* Room entries on the accommodation page */
.room-list .room { margin-bottom: 70px; }
.room-list .room:last-child { margin-bottom: 0px; }
.room .txt .room-lede { font-size: 17px; line-height: 27px; margin-bottom: 18px; }
.room .price .title { font-style: normal !important; }
/* The donor's .row-btn lives inside .editorTxt, which colours every link the
   same red the button is filled with. */
.editorTxt a.row-btn.color-white { color: #fff; }

/* The donor only ever stacks .neg-top blocks and separates them with
   .neg-top + .neg-top { margin-top:80px }. Ours run on past the second block,
   where that rule stops applying and two panels end up touching. */
main > .block-row ~ .block-row:not(.neg-top) { margin-top: 80px; }
@media only screen and (max-width: 767px) {
	main > .block-row ~ .block-row:not(.neg-top) { margin-top: 40px; }
}

/* Jump links land under nothing fixed, but the heading still wants air. */
.row[id], .block-row[id] { scroll-margin-top: 40px; }

/* ---------------------------------------------------------------- footer */

/* Three columns that start on the same line. The donor lets each block bring
   its own top margin, which leaves the wordmark, the address and the button
   at three different heights. */
.foot-grid .foot-col { padding-top: 0px; }
.foot-grid .foot-col > *:first-child { margin-top: 0px; }
.foot-head {
	font-family: "Lato", sans-serif;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #a92125;
	margin: 30px 0px 12px;
}
.foot-col > .foot-head:first-child { margin-top: 4px; }
.foot-lines {
	margin: 0px;
	font-size: 15px;
	line-height: 26px;
	color: #656565;
}
.foot-lines a { color: #656565; text-decoration: none; }
.foot-lines a:hover { color: #a92125; }
.foot-col-contact { text-align: right; }
.foot-cta { margin-top: 24px; }

.foot-links {
	list-style: none;
	margin: 26px 0px 0px;
	padding: 0px !important;
	column-count: 2;
	column-gap: 30px;
}
.foot-links li { padding: 0px !important; list-style: none; break-inside: avoid; }
/* The donor draws a red square before every list item inside .editorTxt, which
   in two columns lands on top of the column beside it. */
.editorTxt .foot-links li:before,
.foot-links li:before { display: none !important; content: none !important; }
.foot-links a {
	display: block;
	padding: 6px 0px;
	font-family: "Lato", sans-serif;
	font-size: 11px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	text-decoration: none;
	color: #691517;
	transition: 0.4s;
}
.foot-links a:hover { color: #a92125; }

.foot-fine {
	display: block;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: none;
	color: #9a9a9a;
	line-height: 20px;
	padding-bottom: 8px;
}
.disclaimer { border-top: 1px solid #e6e4e0; padding-top: 26px; }
.disclaimer p {
	font-size: 13px !important;
	line-height: 21px !important;
	color: #9a9a9a;
	margin-bottom: 10px !important;
}
.disclaimer a { color: #a92125; }

/* One line of small print, and a second one under it when the first runs out
   of room, rather than a right-hand half that drops and lands left. */
.legal-strip {
	border-top: 1px solid #e6e4e0;
	padding-top: 20px;
	text-align: center;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: 0.5px;
	color: #9a9a9a;
}
.legal-strip a { color: #9a9a9a; text-decoration: none; }
.legal-strip a:hover { color: #a92125; }
.legal-strip-left { display: block; }
.legal-strip-right { display: block; margin-top: 8px; text-transform: uppercase; letter-spacing: 1.4px; }

@media only screen and (max-width: 767px) {
	.foot-grid .foot-col { text-align: center; margin-bottom: 34px; }
	.foot-col-contact { text-align: center; }
	.foot-links { justify-content: center; }
	.foot-links li { width: 100%; padding-right: 0px; }
	.foot-cta { display: inline-block; }
	.legal-strip-right { letter-spacing: 1px; }
}

/* The donor's .row is 94% of a phone with 3% either side. Gutters here are
   negative margins inside it, which on a phone push past that 3% and widen the
   page. On one column there are no gutters left to negate. */
@media only screen and (max-width: 767px) {
	.tile-grid { margin-left: 0px; margin-right: 0px; }
	.tile { padding-left: 0px; padding-right: 0px; }
	.split-columns { margin-left: 0px; margin-right: 0px; }
	.split-columns > div { padding-left: 0px; padding-right: 0px; }
}