/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v35-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v35-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v35-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v35-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/merriweather-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--background-color: hsl(60, 22%, 90%);
	--darker-color: hsl(60, 12%, 85%);
	--primary-color: black;
	--red: #933323;
	--red-hover: hsl(9, 62%, 46%);
	--orange: chocolate;
	--panel: #98AC91;
	--footer-background: hsl(60, 12%, 85%);
	--serif: 'Merriweather', serif;
	--gutter: 6vw; /*5vw*/
	--gutter-max: 85px; /*79px*/
	--row: min(4vw, 57px);
	--row-max: 30px;
	--column-gap: min(var(--gutter), var(--gutter-max));
	--row-gap: max(var(--row), var(--row-max));
}

body {
	background: var(--background-color);
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.8;
	font-size: min(calc(90% + 0.33vw), 1.225rem);
	/* Set to same height as navbar (was 4.9rem)*/
	padding-top: 8.5rem; /* see also media query below */
	/*padding-left: 4rem;
	padding-right: 4rem;*/
}

@media all and (min-width: 1168px) {
	body {
		/* Set to same height as navbar (was 8.5rem) */
		padding-top: 12rem;
	}
}
@media all and (min-width: 1169px) {
	.narrow-with-padding-desktop-only {
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--column-gap);
		padding-right: var(--column-gap);
	}
}

body main > *,
body #festival-nav,
body #information {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--column-gap);
	padding-right: var(--column-gap);
	/* Space before/after each main element */
	padding-top: var(--row-gap);
	padding-bottom: var(--row-gap);
}

/*
========================================
Resets
========================================
*/

/* Remove text bottom margin (and top margin) */
p, li, h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0;
	margin-top: 0;
}

/* Add it back as top margin */
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p,
h1+ul, h2+ul, h3+ul, h4+ul, h5+ul, h6+ul,
ul+h1, ul+h2, ul+h3, ul+h4, ul+h5, ul+h6,
p+p, p+ul,
p+h1, p+h2, p+h3, p+h4, p+h5, p+h6,
ul+ul,
ul+p,
a+h1, a+h2, a+h3, a+h4, a+h5, a+h6,
figure+p,
p+figure {
	margin-top: 1em;
}

h1, h2, h3, h4, h5, h6, strong {
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
}

main > h1 {
	font-size: 220%;
	letter-spacing: -0.03rem;

	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--column-gap);
	margin-top: 2rem;
}

main section section h1 {
	font-size: 220%;
	letter-spacing: -0.03rem;
}

h2 {
	font-size: 200%; /* Any larger than 158% and Home page in inspector causes chrome 'have to zoom out' issue */
	letter-spacing: -0.02rem;
}

h3 {
	font-size: 150%;
	letter-spacing: -0.02rem;
}

/* Links */
a, a:hover, a:active, a:visited {
	color: var(--primary-color);
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
}

/* Stop browser automatically centering Figure */
figure {
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
========================================
Utilities
========================================
*/

.weight300 {
	font-weight: 300;
}

.normal-link a,
.normal-link a p {
	/*text-decoration: underline;*/
	border-bottom: solid 1px black;
}

.red {
	color: var(--red);
}

/*
========================================
Images
========================================
*/

/* Allow images to shrink when padding applied */
* {
	box-sizing: border-box;
}

/* Stop images overflowing their container */
img {
	max-width: 100%;
}

/*
========================================
Buttons
========================================
*/

button {
	cursor: pointer;
	color: white;
	border: none;
	text-align: left;
	padding: 1rem;
	width: 10rem;
	font-size: 85%;
	border-radius: .2rem;
}
a button {
	background: var(--red);
}
a button:hover {
	background: var(--red-hover);
}
a button:active {
}
a button:visited {
}

/*
========================================
Nav current page highlighting
========================================
*/

/* Class for js highlight current page */

.current,
.current:visited {
	color: var(--orange);
	font-weight: 600;
}

/*
========================================
Sticky Header
========================================
*/

/* Sticky header (disappear until scroll up) */
#top-nav {
	position: fixed;
	/* Space before */
	padding-top: 3rem;
	/* Desktop height
	height: 3rem;*/
	background: var(--background-color);
	top: 0;
	width: 100%;
	z-index: 1000;
	transition: all .3s ease;
	/*box-shadow: 0 1px 25px rgba(0,0,0, .1);*/
}

#top-nav.hide {
	/* Use with Height above, this one needs to be larger */
	/* Adjust body padding-top if necessary */
	top: -14rem; /*-7.5em*/}


@media all and (max-width: 1168px) {
	#top-nav {
		/*height: ;*/
	}
	ul.menu {
		/* Must be in media query else desktop width becomes fiddly */
		background: var(--background-color);
		/* Must be in media query else desktop drop downs messed up */
		overflow: auto;
		/* Optional */
		height: 100vh;
	}
}

/* Sticky header (simple)
#top-nav {
	position: sticky;
	top: 0;
	background: var(--background-color);
} */

/*
========================================
Navbar
========================================
*/

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav {
	margin:0;
	padding: 0;
	/*background-color: #254441;*/
}

#logo {
	display: block;
	/*padding: 0 30px;*/
	/*padding-left: var(--gutter);*/
	margin-top: 0.75rem;
	float: left;
	/*line-height: 60px;*/
	line-height: 1.0;
	/*width: 31rem;*/
	background: url('images/logo-percy-french-cropped.jpg') 0 0 no-repeat;
}

/* Logo area phone */
@media all and (max-width: 1168px) {
	#logo {
		background: none;
		/*background-size: 67px 62px;
		background-position-x: right;
		background-position-y: top;
		background-origin: content-box;
		padding-top: 3rem;*/
	}
	#logo a {
		padding-left: 0px;
	}
}

/* Logo area desktop */
@media all and (min-width: 1169px) {
	#logo {
		background-position-y: center;
	}
	#logo a {
		padding-left: 9.0rem;
		padding-top: 0;
	}
}


#logo a {
	/* Override JS current page highlighting when on Home page */
	color: var(--primary-color) !important;
	font-weight: 400;
	/*padding-top: 0;*/
	padding-bottom: 0;
}

#logo img {
	/*float: left;
	width: min(calc(85px + 0.33vw), 7.3rem);
	margin-right: 1em;*/

	 /* -webkit-transform: scaleX(-1);
	  transform: scaleX(-1);
	/*width: 2.5rem;*/

}

#logo .informed {
	font-size: 85%;
	font-weight: 300;
	/*letter-spacing: 0.02em;*/
	font-family: var(--serif);
	font-style: italic;
}

#logo .the {
	font-family: var(--serif);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 75%;
	margin-top: .7em;
	/*font-size:20px;*/
	color: var(--red);
	font-weight: 700;
}

#logo .th {
	font-size: 90%;
	text-transform: lowercase;
	margin-left: -.1rem;
	margin-right: .22rem;
}

#logo .honorary {
	font-size: 75%;
	line-height: 1.2;
	margin-top: .5em;
	letter-spacing: 0.02em;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	/*padding:0;*/
	margin:0;
	list-style: none;
	position: relative;

}

/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	/*background-color: #254441;*/

}

/* Styling the links */
/* Nav item padding has to vary on phones */
nav a {
	padding: 7px 20px;
	/*line-height: 1.2;*/ /*Breaks hover*/
}

/* Styling the links */
nav a {
	display:block;
	/*color:#FFF;*/
	/*font-size:17px;*/
	text-decoration:none;
}

/* Drop down sub item hover */
nav ul li ul li:hover {
	/*background: #000000;*/
}

/* Background color change on Hover */
nav a:hover {
	/*background-color: #000000;*/

}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute;
	/* has to be the same number as the "line-height" of "nav a" */
	/* top: 3.0rem;  Default: 60px, 93 for two row layout */
	/* just removing top: 3.0rem entirely fixes issue on macs */
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
	/* Dropdown width */
	width:190px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */
	left:170px;
}

/* Change ' +' in order to change the Dropdown symbol */
#top-nav li > a:after { content:  ' ˅'; }
#top-nav li > a:only-child:after { content: ''; }


/* MY ADDED RULES */

nav a {
	font-size: 100%;
	color: var(--primary-color);
	font-weight: 600;
}

/* Phone section font, and phone hamburger icon */
#top-nav label {
	font-weight: 600;
}

/* Prevent dropdowns on desktop being under any HR rules there may be on page */
nav ul ul {
	z-index: 1;
}

/* Drop down background color */
nav ul li ul li {
	background-color: white;
}

/* Highlight festival items
nav ul li {
	background-color: #a4e3b3;
}

  Unhighlight non-festival items
nav > ul > li+li+li+li {
	background-color: transparent;
}

nav ul li:nth-child(3) {
	border-right: solid 1px var(--red);
}

nav  ul > li+li+li {
	border-right: none;
}
 */

nav ul li ul li a {
	font-weight: 300;
}

nav a {
	/*padding-top: 7px;
	padding-bottom: 7px;*/
}

.phone-break {
	display: none;
}

/* Nav panel */
#top-nav {
	padding-bottom: 1.25rem !important;
	/*border-bottom: solid 1px #ccc;*/
}

/* Add space above below dropdowns, and colour background */
@media all and (min-width: 1169px) {
	nav ul li ul {
		padding-top: .5rem;
		padding-bottom: 1rem;
		background: white;
	}
}

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

@media all and (max-width: 1168px) {

	#logo {
		display: block;
		margin: 0 var(--column-gap);
		/*width: 100%;*/
		/*text-align: center;*/
		float: none;
		margin-top: .65rem;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	nav#top-nav .toggle + a,
	.menu {
		display: none;
	}

	/* Styling the [toggle label] drop down parent item */
	.toggle {
		display: block;
		/*background-color: none;*/
		padding: 7px var(--column-gap);
		/*color:#FFF;*/
		/*font-size:17px;*/
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		/*background-color: #000000;*/
	}

	/* Display Dropdown when clicked on Parent Label */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
	nav ul ul ul a {
		/*background-color: #000000;*/
	}

	nav ul li ul li .toggle,
	nav ul ul a,
	  nav ul ul ul a{
		padding: 7px var(--column-gap);
		/*color:#FFF;*/
		/*font-size:17px;*/
	}

	nav ul li ul li .toggle,
	nav ul ul a {
		/*background-color: #212121;*/
	}

	/* Hide dropdowns by default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	/* First tier dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */

	}

	/* MY ADDED RULES */

	.hamburger {
		position: absolute;
		top: 0;
		right: 0;
	}

	.desktop-break {
		display: none;
	}

	.phone-break {
		/*display: inline;*/
	}

	/* Fix drop down heading font size too big on phones */
	.toggle {
		/*font-size: 80%;*/
	}

	/* Full width nav on phones */
	nav ul {
		padding-left: 0vw;
		padding-right: 0vw;
	}

	/* Remove float on phones */
	nav ul {
		float: none;
	}

	.toggle {
		cursor: pointer;
		/* Space before */
		padding-top: 1.5rem;
	}

	/* Drop down background color */
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: var(--background-color);
	}

	/* Nav item padding has to be fixed on desktop */
	nav a {
		padding: 7px var(--column-gap);
	}

	#top-nav {
		/* Space before */
		padding-top: 1rem;
	}
}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

/* DROP DOWN ARROWS */

/* Phone */
@media all and (max-width: 1168px) {
	#top-nav ul li label::after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 1.25rem;
		height: 1.25rem;
		background: url('images/icons/dropdown.png') 0 0 no-repeat;
		background-size: contain;
	}
}

/* Desktop */
@media all and (min-width: 1169px) {
	#top-nav .menu > li > a::after {
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 1.25rem;
		height: 1.25rem;
		background: url('images/icons/dropdown.png') 0 0 no-repeat;
		background-size: contain;
	}
}

/* Move desktop items to left a little to approximately align with grid */
@media all and (min-width: 1369px) {
	nav ul {
		margin-right: -.6rem;
	}
}

/*
========================================
Icons (Google Material)
========================================
*/

/* Tickets */
/*.material-symbols-outlined {
	font-size: min(calc(90% + 0.33vw), 21.84px) !important;
	vertical-align: top;
	padding-right: .5rem;
}*/

/* Brochure open in new tab */
.icon-new-tab {
	font-size: min(calc(60% + 0.33vw), 15.4px) !important;
	vertical-align: text-top;
	filter: contrast(.6);
	display: inline-block;
	margin-left: .05rem;
	width: 1em;
	height: 1em;
}

/* Bullets: remove default */
ul.list-icons {
	list-style: none;
}

/* Bullets: spacing */
ul.list-icons > li {
	/*margin-top: 1em;*/
	/*line-height: 1.2;*/
}

/* Bullets: style custom */
ul.list-icons > li::before {
	filter: contrast(.6);
	margin-right: .5rem;
	display: inline-block;
	width: 16px;
	height: 16px;
	content: "";
	margin-left: -1.5rem;
}

/* Bullets: style custom light on dark */
ul.list-icons.list-icons-light > li::before {
	filter: invert(100%);
}

/* Bullets: mail */
li.icon-mail::before {
	background: url("images/icons/mail.png");
	background-size: 18px 18px;
}

/* Bullets: phone */
li.icon-phone::before {
	background: url("images/icons/phone.png");
	background-size: 18px 18px;
}

/* Bullets: phone */
li.icon-web::before {
	background: url("images/icons/new.png");
	background-size: 18px 18px;
}

/* Bullets: web */
li.icon-web::before {
	background: url("images/icons/web.png");
	background-size: 18px 18px;
}

/* Bullets: lecture */
li.icon-lecture::before {
	background: url("images/icons/record-voice-over.png");
	background-size: 18px 18px;
}

/* Bullets: recital */
li.icon-recital::before {
	background: url("images/icons/music-note.png");
	background-size: 18px 18px;
}

/* Bullets: drink */
li.icon-drink::before {
	background: url("images/icons/local-cafe.png");
	background-size: 18px 18px;
}

/*
========================================
Home
========================================
*/

/* HERO*/

#hero {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
}

#hero-keynote h1 {
	/*font-size: 180%;*/
	letter-spacing: -0.03rem;
}

#hero-keynote h1 + p {
	/*margin-top: 0;*/
}

#hero-keynote p small {
	font-size: 75%;
	text-transform: uppercase;
	letter-spacing: 0.03rem;
}

#hero-keynote h2 {
	margin-top: 0;
}

#hero-brochure {
	width: 100%;
	display: block;
}

@media all and (max-width: 699px) {

	#hero-title,
	#hero-brochure,
	#hero-keynote {
		grid-column: span 12;
	}

	#hero-brochure {
		margin-top: calc(var(--row-gap)*2);
	}

}

@media all and (min-width: 700px) and (max-width: 999px) {

	#hero-title,
	#hero-brochure,
	#hero-keynote {
		grid-column: span 12;
	}

	#hero-brochure {
		margin-top: calc(var(--row-gap)*2);
	}

}

@media all and (min-width: 1000px) {

	#hero-title {
		grid-column: span 12;
	}
	#hero-brochure,
	#hero-keynote {
		grid-column: span 6;
	}
	#hero-keynote img {
		width: 66%;
	}
	#hero-brochure img {
		/*margin-top: -3rem;*/
	}
	#hero-brochure {
		grid-column: span 5;
		grid-column-start: span 5;
	}

}


/* SPEAKERS */

/* Grid to target grandchildren not children */
#home #speakers div {
  display: contents;
}

#home #speakers {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	padding-top: calc(var(--row-gap)*.5);
}

#home #speakers h2 {
	color: var(--red);
}

#home #speakers P {
	text-transform: uppercase;
	font-size: 75%;
}

#home #speakers div ul li {
	line-height: 1.2;
	margin-bottom: 1rem;
	list-style-type: none;
	font-size: 125%;
}

@media all and (max-width: 699px) {

	#home #speakers div h2 {
		grid-row: 1 / 2;
		grid-column: span 6;
	}

	#home #speakers div p {
		grid-row: 2 / 3;
		grid-column: span 6;
	}

	#home #speakers div ul {
		grid-row: 3 / 4;
		grid-column: span 6;
	}

	#home #speakers div + div h2 {
		grid-row: 1 / 2;
		grid-column: span 6;
	}

	#home #speakers div + div p {
		grid-row: 2 / 3;
		grid-column: span 6;
	}

	#home #speakers div + div ul {
		grid-row: 3 / 4;
		grid-column: span 6;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {

	#home #speakers div h2 {
		grid-row: 1 / 2;
		grid-column: span 8;
	}

	#home #speakers div p {
		grid-row: 2 / 3;
		grid-column: span 8;
	}

	#home #speakers div ul {
		grid-row: 3 / 4;
		grid-column: span 8;
		column-count: 2;
		column-gap: var(--column-gap);
	}

	#home #speakers div + div h2 {
		grid-row: 1 / 2;
		grid-column: span 4;
	}

	#home #speakers div + div p {
		grid-row: 2 / 3;
		grid-column: span 4;
	}

	#home #speakers div + div ul {
		grid-row: 3 / 4;
		grid-column: span 4;
		column-count: 1;
	}
}

@media all and (min-width: 1000px) {

	#home #speakers div ul li {
		margin-right: -3rem;
	}

	#home #speakers div h2 {
		grid-row: 1 / 2;
		grid-column: span 8;
	}

	#home #speakers div p {
		grid-row: 2 / 3;
		grid-column: span 8;
	}

	#home #speakers div ul {
		grid-row: 3 / 4;
		grid-column: span 8;
		column-count: 3;
		column-gap: var(--column-gap);
	}

	#home #speakers div + div h2 {
		grid-row: 1 / 2;
		grid-column: span 4;
	}

	#home #speakers div + div p {
		grid-row: 2 / 3;
		grid-column: span 4;
	}

	#home #speakers div + div ul {
		grid-row: 3 / 4;
		grid-column: span 4;
		column-count: 1;
	}
}

/* Brochure */

#home main #brochure > div {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 1.5rem;
	grid-template-columns: repeat(4, 1fr);
}

#speakers main div div img {
	min-width: 100%;
}

/* Past speakers smaller images */
#pastspeakers main section section div div img {
	width: 50%;
}

#speakers main div div h2,
#pastspeakers main > section section div div h2 {
	color: var(--red);
	margin-top: -.5rem;
}

#speakers main div div h2 small,
#pastspeakers main > section section div div h2 small {
	color: var(--primary-color);
	font-size: 50%;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.03rem;
}

/* Past speakers space between rows */
#pastspeakers main > section section div {
	padding-top: var(--row-gap);
}

@media all and (max-width: 699px) {
	#speakers main div div:nth-child(1),
	#pastspeakers main section section div div:nth-child(1) {
		grid-column: span 12;
	}
	#speakers main div div:nth-child(2),
	#pastspeakers main section section div div:nth-child(2) {
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#speakers main div div:nth-child(1),
	#pastspeakers main section section div div:nth-child(1) {
		grid-column: span 6;
	}
	#speakers main div div:nth-child(2),
	#pastspeakers main section section div div:nth-child(2) {
		grid-column: span 6;
		order: -1;
	}
}

@media all and (min-width: 1000px) {
	#speakers main div div:nth-child(1),
	#pastspeakers main section section div div:nth-child(1) {
		grid-column: span 6;
	}
	#speakers main div div:nth-child(2),
	#pastspeakers main section section div div:nth-child(2) {
		grid-column: span 6;
		order: -1;
	}
}


/* TEMPORARY BANNER */

#home #banner {
  background-color: var(--orange);
	color: white;
}



/*
========================================
Speakers & Performers
========================================
*/

#speakers main > div,
#pastspeakers main > section section > div {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 1.5rem;
	grid-template-columns: repeat(12, 1fr);
}

#speakers main div div img {
	min-width: 100%;
}

/* Past speakers smaller images */
#pastspeakers main section section div div img {
	width: 50%;
}

#speakers main div div h2,
#pastspeakers main > section section div div h2 {
	color: var(--red);
	margin-top: -.5rem;
}

#speakers main div div h2 small,
#pastspeakers main > section section div div h2 small {
	color: var(--primary-color);
	font-size: 50%;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.03rem;
}

/* Past speakers space between rows */
#pastspeakers main > section section div {
	padding-top: var(--row-gap);
}

@media all and (max-width: 699px) {
	#speakers main div div:nth-child(1),
	#pastspeakers main section section div div:nth-child(1) {
		grid-column: span 12;
	}
	#speakers main div div:nth-child(2),
	#pastspeakers main section section div div:nth-child(2) {
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#speakers main div div:nth-child(1),
	#pastspeakers main section section div div:nth-child(1) {
		grid-column: span 6;
	}
	#speakers main div div:nth-child(2),
	#pastspeakers main section section div div:nth-child(2) {
		grid-column: span 6;
		order: -1;
	}
}

@media all and (min-width: 1000px) {
	#speakers main div div:nth-child(1),
	#pastspeakers main section section div div:nth-child(1) {
		grid-column: span 6;
	}
	#speakers main div div:nth-child(2),
	#pastspeakers main section section div div:nth-child(2) {
		grid-column: span 6;
		order: -1;
	}
}

/* Past Speakers footer nav */
#pastspeakers main > section > aside {
	padding-top: var(--row-gap);
}

/*
========================================
Schedule
========================================
*/

#schedule main section > div {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	row-gap: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

#schedule main section > div div:nth-child(1) {
	grid-column: span 3;
}

#schedule main section > div div:nth-child(2) {
	grid-column: span 9;
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#schedule main section > div div:nth-child(1) {
		grid-column: span 3;
	}
	#schedule main section > div div:nth-child(2) {
		grid-column: span 9;
	}
}

@media all and (min-width: 1000px) {
	#schedule main section > div div:nth-child(1) {
		grid-column: span 2;
	}
	#schedule main section > div div:nth-child(2) {
		grid-column: span 10;
	}
}

/* Rule between rows */
#schedule main section > div {
	padding-top: 1.5rem;
	border-top: solid 1px #ccc;
}

/* Remove margin under day title */
#schedule main section > div h2 {
	/*margin-bottom: 1.5rem;*/
	margin-bottom: 0rem;
}

/* Right align times */
#schedule main section > div div:first-child {
	text-align: left;
}

/* Space after for all P tags */
#schedule main section > div div > p, #schedule main section > div div table + p {
	margin-bottom: .5rem;
}

/* Times am/pm */
#schedule main section > div div:first-child small {
	text-transform: uppercase;
}

/* Speaker names */
#schedule main section > div h3 {
	color: var(--red);
	line-height: 1.2;
	margin-bottom: .5rem;
}

/* Tea/coffee */
#schedule main section > div div > p:first-child, #schedule main section > div div table + p {
	text-transform: uppercase;
}

/* Talk title */
#schedule main section > div h3 + p {
	margin-bottom: .5rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Non-bold text */
#schedule main section > div p {
	line-height: 1.2;
}


/* Add space after Sean Freyne image */
#schedule main section div div table {
	margin-bottom: 0.5rem
}

/* Remove excess vertical space below Sean Freyne row */
#schedule main section > div table td {
	padding-bottom: 0 !important;
	vertical-align: bottom;
}

/* Sean Freyne image column width */
#schedule main section > div table td:first-child {
	width: 10rem;
}

/* Sean Freyne image size */
#schedule main section > div img {
	/* Adjust to match height with main text */
	width: 150px;
	margin-right: 0.5rem;
}

/* Sean Freyne float right on desktop */
@media all and (min-width: 768px) {
	#schedule main section > div table {
		float: right;
		width: 300px;
	}
}

/*
========================================
Venue
========================================
*/

#venue main img {
	/* min-width ensures full width of screen is filled when window restricts image height due to max-height */
	min-width: min(100%, 1400px);
	max-height: 60vh;
	/* Display block necessary for centering */
	display: block;
	margin: 0 auto;
	object-fit: cover;
	object-position: 100% 85%;
	padding-bottom: var(--row-gap);
}

#venue main > div > div {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	grid-row-gap: var(--row-gap);
}

#venue main aside p:nth-child(1) {
	font-size: 170%;
	line-height: 1.2;
	color: var(--red);
}

@media all and (max-width: 699px) {

	#venue main > div aside {
		grid-column: span 12;
	}

	#venue main > div div {
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {

	#venue main > div aside {
		grid-column: span 4;
	}

	#venue main > div div {
		grid-column: span 8;
	}
}

@media all and (min-width: 1000px) {

	#venue main > div aside {
		grid-column: span 4;
	}

	#venue main > div div {
		grid-column: span 8;
	}

	#venue main > div div {
		column-count: 2;
		column-gap: var(--column-gap);
	}
}

/*
========================================
Accommodation
========================================
*/

#accommodation > main > section  {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	grid-row-gap: var(--row-gap);
}

#accommodation > main > section > div > h2  {
	color: var(--red) !important;
}

#accommodation > main > section > div > h3  {
	color: var(--red) !important;
	text-transform: uppercase;
	font-size: 75%;
}

/* Add vertical space between H2 and first item below */
#accommodation > main > section > div > h2 + h3 {
	margin-top: 2rem;
}

/* Remove vertical space after H3 small headings */
#accommodation > main > section > div > h3 + p {
	margin-top: 0;
}


@media all and (max-width: 699px) {

	#accommodation > main > section > div {
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {

	#accommodation > main > section > div {
		grid-column: span 6;
	}
}

@media all and (min-width: 1000px) {

	#accommodation > main > section > div {
		grid-column: span 4;
	}
}

/*
========================================
Past Festivals
========================================
*/

#pastfestivals main h2 {
	color: var(--red);
}

#pastfestivals main div div,
#pastspeakers main > section aside div {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	row-gap: calc(var(--row-gap)/.5);
	margin-top: calc(var(--row-gap)*.5);
}

/* Brochure Cover Images */
#pastfestivals figure img,
#pastspeakers main > section aside figure img {
	width: 62%;
	transform: rotate(7deg);
	filter: drop-shadow(7px 7px 6px #555);
}

/* Year heading */
#pastfestivals figure h2,
#pastspeakers main > section aside figure h2 {
	margin-top: 1rem;
}

/* Speakers Include heading */
#pastfestivals figure h2 + p,
#pastspeakers main > section aside figure h2 + p {
	font-style: italic;
}

/* Speakers link */
#pastfestivals figure a p,
#pastspeakers main > section aside figure a p {
	/*margin-top: 1rem;*/
	/*font-weight: 700;*/
}

@media all and (max-width: 699px) {
	#pastfestivals figure,
	#pastspeakers main > section aside figure {
		grid-column: span 6;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#pastfestivals figure,
	#pastspeakers main > section aside figure {
		grid-column: span 6;
	}
}

@media all and (min-width: 1000px) {
	#pastfestivals figure,
	#pastspeakers main > section aside figure {
		grid-column: span 4;
	}
}


/*
========================================
Past Festival
========================================
*/

#pastfestival main h2 {
	color: var(--red);
}

#pastfestival main > section {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
}

/* Space above both lists */
#pastfestival main > section div {
	margin-top: calc(var(--row-gap)*1.5);
}

#pastfestival main > section h1 {
	padding-bottom: 1rem;
}

@media all and (max-width: 699px) {
	#pastfestival main > section section {
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#pastfestival main > section section {
		grid-column: span 9;
	}
}

@media all and (min-width: 1000px) {
	#pastfestival main > section section {
		grid-column: span 9;
	}
}


/*
========================================
Festival Nav
========================================
*/

#festival-nav ul {
	display: grid;
	column-gap: var(--column-gap);
	float: none;
}

#festival-nav ul li {
	list-style: none;
	line-height: 1.2;
	font-weight: 600;
}

#festival-nav ul li a {
	margin-left: -1rem;
	padding: 1rem 1rem;
}

@media all and (max-width: 699px) {

	#festival-nav ul {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {

	#festival-nav ul li {
		margin-right: -2rem;
	}

	#festival-nav ul {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media all and (min-width: 1000px) {

	#festival-nav ul li {
		margin-right: -3rem;
	}

	#festival-nav ul {
		grid-template-columns: repeat(6, 1fr);
	}
}

/*
========================================
Tickets
========================================
*/

#tickets {
	background: var(--panel);
}

#tickets > div {
	display: grid;
	column-gap: var(--column-gap);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--column-gap);
	color: white;
	padding-top: var(--row-gap);
	padding-bottom: var(--row-gap);
}

#tickets > div div h2 {
	margin-bottom: 1rem;
}

#tickets > div div h3 {
	color: #D4E6C2;
	margin-bottom: 2rem;
}

#tickets > div div p {
	line-height: 1.2;
}

#tickets > div div a{
	color: white;
}

/* Footnote text */
#tickets > div div div p {
	margin-top: 2rem;
	line-height: 1.8;
	font-size: 75%;
	letter-spacing: 0.03rem;
}

@media all and (max-width: 699px) {
	#tickets > div {
		grid-template-columns: 1fr;
		grid-row-gap: 3rem;
	}

	/* Ticket Office heading: add gap above */
	#tickets > div div:nth-child(2) div p {
		margin-bottom: 1rem;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#tickets > div {
		grid-template-columns: repeat(12, 1fr);
	}

	#tickets > div div:nth-child(1) {
		grid-column: span 6;
	}

	#tickets > div div:nth-child(2) {
		grid-column: span 6;
	}
}

@media all and (min-width: 1000px) {
	#tickets > div {
		grid-template-columns: repeat(12, 1fr);
	}

	#tickets > div div:nth-child(1) {
		grid-row: 2;
		grid-column: span 6;
	}

	#tickets > div div:nth-child(2) {
		grid-column: span 6;
		grid-row: 2;
	}
}

/*
========================================
Songs
========================================
*/

#songs main h2 {
	color: var(--red);
}

#songs main {
	/*display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);*/
}

#songs main > div > div + div {
	margin-top: var(--row-gap);
}

#songs main ul {
	column-gap: var(--column-gap);
}

@media all and (max-width: 699px) {
	#songs main ul {
		column-count: 1;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#songs main ul {
		column-count: 2;
	}
}

@media all and (min-width: 1000px) {
	#songs main ul {
		column-count: 3;
	}
}


/*
========================================
Song
========================================
*/

#song main h2 {
	color: var(--red);
}

#song main > section {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
}

/* Space above both lists */
#song main > section div {
	margin-top: calc(var(--row-gap)*1.5);
}

#song main > section h1 {
	padding-bottom: 1rem;
}

/* Bold first three items (of first list only) */
#songs main > div div:nth-child(1) h2+ul li:nth-child(-n+3),
#song main > section aside div:nth-child(1) h2+ul li:nth-child(-n+3) {
	font-weight: 600;
}

/* Attribution */
#song main > section section p:nth-last-child(1) {
	font-size: 75%;
	margin-top: 2rem;
}

/*
#song main > section p {
		margin-bottom: 0px !important;
		padding-bottom: 0px !important;
		margin-block-start: 0px !important;
		padding-block-end: 0px !important;
	}

#song main > section p:nth-child(4n+1) {
		margin-block-start: 0px !important;
		padding-block-end: 1.5rem !important;
	}
*/

#song main aside {
	font-size: 75%;
	/*column-count: 2;
	column-gap: var(--column-gap);*/
}

@media all and (max-width: 699px) {
	#song main > section section {
		grid-column: span 12;
	}

	#song main > section aside {
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#song main > section section {
		grid-column: span 9;
	}

	#song main > section aside {
		grid-column: span 3;
	}
}

@media all and (min-width: 1000px) {
	#song main > section section {
		grid-column: span 9;
	}

	#song main > section aside {
		grid-column: span 3;
	}
}

/*
========================================
Paintings
========================================
*/

	/* Display: grid. Set gaps */
	#paintings>main>section>figure {
		display: grid;
		column-gap: var(--column-gap);
	}

	/* Phone layout */
	@media all and (max-width: 699px) {
		#paintings>main>section>figure {
			grid-template-columns: repeat(1, 1fr);
			padding-bottom: calc(var(--row-gap)*1.5);
			align-items: end;
		}
		#paintings>main>section>figure>figcaption {
			padding-top: calc(var(--row-gap)*.66);
		}
	}

	/* Desktop layout */
	@media all and (min-width: 700px) {
		#paintings>main>section>figure {
			grid-template-columns: min(640px, 66%) auto;
			padding-bottom: calc(var(--row-gap)*2);
			align-items: end;
		}
	}

	/* Images: make all same width */
	#paintings>main>section>figure img {
		max-width: min(640px, 100%);
	}

	/* Caption titles: reduce size */
	#paintings>main>section>figure h2 {
		font-size: 100%;
	}

	/* Captions: reduce size */
	#paintings>main>section>figure p {
		font-size: 75%;
	}

	/* Caption attribution: italics */
	#paintings>main>section>figure p:last-child {
		font-style: italic;
	}

/*
========================================
Biography
========================================
*/

#biography main > section > h2, #biography main > section > p {
	max-width: 700px;
}

/*
========================================
Chronology
========================================
*/

#chronology main section {

}

#chronology main section h2 {
	padding-top: var(--row-gap);
	padding-bottom: calc(var(--row-gap)/1.5);
	color: var(--red);
}

#chronology main section > div div:nth-child(1) p {
	/*color: var(--red);*/
	/*font-weight: 600;*/
	font-style: normal;
	text-transform: uppercase;
	/*font-size: 90%;*/
}

#chronology main section > div {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	row-gap: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

#chronology main section > div div:nth-child(1) {
	grid-column: span 3;
}

#chronology main section > div div:nth-child(2) {
	grid-column: span 9;
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#chronology main section > div div:nth-child(1) {
		grid-column: span 3;
	}
	#chronology main section > div div:nth-child(2) {
		grid-column: span 9;
	}
}

@media all and (min-width: 1000px) {
	#chronology main section > div div:nth-child(1) {
		grid-column: span 2;
	}
	#chronology main section > div div:nth-child(2) {
		grid-column: span 7;
	}
}

/* Rule between rows */
#chronology main section > div {
	padding-top: 1rem;
	border-top: solid 1px #ccc;
}

/* Rule beneath last row in each section */
#chronology main section > div + h2 {
	border-top: solid 1px #ccc;
}

/* Rule beneath last row on page */
#chronology main section > div:last-child {
	padding-bottom: 1rem;
	border-bottom: solid 1px #ccc;
}

/*
========================================
Cloonyquinn House
========================================
*/

#cloonyquinn main > section > h2, #cloonyquinn main > section > p {
	max-width: 700px;
}


/*
========================================
French Collection
========================================
*/

#frenchcollection main div > div a {
	color: var(--red);
}

#frenchcollection main div div:nth-child(2) {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--column-gap);
	row-gap: calc(var(--row-gap)/.5);
	margin-top: calc(var(--row-gap)*2);
}

/* Brochure Cover Images */
#frenchcollection figure img {
	width: 62%;
	transform: rotate(7deg);
	filter: drop-shadow(7px 7px 6px #555);
}

/* Year heading */
#frenchcollection figure h2 {
	margin-top: 1rem;
}

/* Speakers Include heading */
#frenchcollection figure p {
	font-style: italic;
}

@media all and (max-width: 699px) {
	#frenchcollection figure {
		grid-column: span 6;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#frenchcollection figure {
		grid-column: span 6;
	}
}

@media all and (min-width: 1000px) {
	#frenchcollection figure {
		grid-column: span 4;
	}
}

/*
========================================
Audio
========================================
*/

#audio main > section > h2 {
	color: var(--red);
}

#audio main > section a {
	color: var(--red);
}

/* Image: add margin beneath on phones */
#audio > main > section img {
	padding-bottom: 1em;
}

@media all and (min-width: 900px) {
	/* Image: float right on desktop */
	#audio > main > section img {
		float: right;
	}
	/* Image: increase margin beneath on desktop */
	#audio > main > section img {
		padding-bottom: 2em;
	}
	/* Image: add margin left on desktop */
	#audio > main > section img {
		padding-left: 8em;
	}
	/* List: three columns on desktop and add margin beneath*/
	#audio > main > section > ol {
		columns: 3;
		column-gap: 12%;
		clear: both;
		padding-bottom: 1em;
	}
}

/*
========================================
Books
========================================
*/

#books main > section > h2 {
	color: var(--red);
}

#books main > section a {
	color: var(--red);
}

/* Image: add margin beneath on phones */
#books > main > section img {
	padding-bottom: 1em;
}

@media all and (min-width: 900px) {
	/* Image: float right on desktop */
	#books > main > section img {
		float: right;
	}
	/* Image: increase margin beneath on desktop */
	#books > main > section img {
		padding-bottom: 2em;
	}
	/* Image: add margin left on desktop */
	#books > main > section img {
		padding-left: 8em;
	}
}

/*
========================================
Contact
========================================
*/

#contact > div {
	display: grid;
	column-gap: var(--column-gap);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--column-gap);
	color: white;
	padding-top: var(--row-gap);
	padding-bottom: var(--row-gap);
}

/* Bullets: remove default */
#contact > main > section > div > ul {
	list-style: none;
}

/* Spacing */
#contact > main > section > div > ul li {
	margin-bottom: 1rem;
}

#contact > main > section {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 1.5rem;
	grid-template-columns: repeat(12, 1fr);
}

@media all and (max-width: 699px) {
	#contact > main > section > div:nth-child(1) {
		grid-column: span 12;
	}
	#contact > main > section > div:nth-child(2) {
		grid-column: span 12;
		order: ;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#contact > main > section > div:nth-child(1) {
		grid-column: span 4;
	}
	#contact > main > section > div:nth-child(2) {
		grid-column: span 8;
		order: ;
	}
}

@media all and (min-width: 1000px) {
	#contact > main > section > div:nth-child(1) {
		grid-column: span 4;
	}
	#contact > main > section > div:nth-child(2) {
		grid-column: span 8;
		order: ;
	}
}

#contact > main > section > div > img + img {
	margin-top: calc(var(--row-gap)/2);
}

/*
========================================
How you can help
========================================
*/

#help main > section > h2, #help main > section > p {
	max-width: 700px;
}

#help main > section > h2 {
	color: var(--red);
}

/*
========================================
Directors
========================================
*/

#directors main > div {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 4rem;
	grid-template-columns: repeat(12, 1fr);
}

#directors main > div figure figcaption h2 {
	margin-top: 1rem;
	font-size: 120%;
	color: var(--red);
}

#directors main > div figure img {
	width: 125px;
	height: 125px;
	object-fit: cover;
}

#directors main > div figure figcaption h2 + p,
#directors main > div figure figcaption p + p {
	margin-top: 1rem;
}


@media all and (max-width: 699px) {
	#directors main > div figure {
		grid-column: span 6;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#directors main > div figure {
		grid-column: span 6;
	}
}

@media all and (min-width: 1000px) {
	#directors main > div figure {
		grid-column: span 4;
	}
}

/*
========================================
Information
========================================
*/

#information > div {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 0.5rem;
}

/* 15th Percy French Festival heading */
#information > div div:nth-child(1) p:nth-child(1) {
	font-size: 75%;
	text-transform: uppercase;
}

/* Date and Castlecoote House*/
#information > div div p {
	margin-top: 0;
}

/* Brochure */
#information > div div + div img#brochure-thumb {
	width: 50%;
}

/* Small print */
#information #logos p {
	font-size: 75%;
}

/* Logos */
#information > div div + div img {
	/*width: 6rem;
	margin-top: .5rem;
	float: right;
	padding-left: 2rem;*/
	margin-top: 1rem;
	vertical-align: middle;
}

/* Logos: space between */
#information > div div + div img:nth-child(2),
#information > div div + div img:nth-child(3) {
	padding-right: 1.5rem;
}

/* Logos: each one */
#information > div div + div#logos img {
	height: 2.9rem;
}
#information > div div + div#logos img + img {
	height: 1.8rem;
}
#information > div div + div#logos img + img + img {
	height: 2.0rem;
	margin-top: 1.5rem;
}


@media all and (max-width: 699px) {
	#information  {
		grid-template-columns: 1fr;
	}
	#information > div div:nth-child(4) {
		margin-top: 1rem;
	}
	/* Small print: add space above */
	#information > div div + div  {
		margin-top: 1rem;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {
	#information > div  {
		grid-template-columns: 1fr 1fr;
	}
}

@media all and (min-width: 1000px) {
	#information > div {
		grid-template-columns: repeat(12, 1fr);
	}

	#information > div div:nth-child(1) {
		grid-column: span 6;
	}

	#information > div div:nth-child(2) {
		grid-column: span 6;
	}
}

/*
========================================
Footer Nav
========================================
*/

footer {
	background: var(--footer-background);
}

footer div nav ul li {
	list-style: none;
	line-height: 1.2;
	margin-bottom: .75rem;
}

/* Override top-nav css */
footer div nav ul li {
	float: none;
	display: block;
}

/* Override top-nav css */
footer div nav ul li a {
	padding: 0;
	font-weight: 300;
}

footer div nav ul > li:first-child {
	font-weight: 600;
}

/* Same as above, but if no drop down */
footer div nav ul > li:first-child,
footer div nav ul > li:first-child a:first-child {
	font-weight: 600;
}

footer div section p {
	font-size: 75%;
}

footer div {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: 1.5rem;
	grid-template-columns: repeat(12, 1fr);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--column-gap);
	padding-top: var(--row-gap);
	padding-bottom: var(--row-gap);
}

/* Grid to target grandchildren not children */
footer div nav, footer div section {
  display: contents;
}

@media all and (max-width: 699px) {

	footer div nav ul:nth-child(1) {
		grid-column: span 6;
	}

	footer div nav ul:nth-child(2) {
		grid-column: span 6;
	}

	footer div nav ul:nth-child(3) {
		grid-column: span 6;
	}

	footer div nav ul:nth-child(4) {
		grid-column: span 6;
	}

	footer div section p {
		/* Have to specify row and use col boundary */
		grid-column: span 12;
	}
}

@media all and (min-width: 700px) and (max-width: 999px) {

	footer div nav ul li {
		margin-right: -2rem;
	}

	footer div nav ul:nth-child(1) {
		grid-column: span 4;
	}

	footer div nav ul:nth-child(2) {
		grid-column: span 4;
	}

	footer div nav ul:nth-child(3) {
		grid-column: span 4;
	}

	footer div nav ul:nth-child(4) {
		grid-column: span 4;
	}

	footer div section p {
		/* Have to specify row and use col boundary */
		grid-row: 3/3;
		grid-column: 1/13;
	}
}

@media all and (min-width: 1000px) {

	footer div nav ul li {
		margin-right: -3rem;
	}

	footer div nav ul:nth-child(1) {
		grid-column: span 2;
	}

	footer div nav ul:nth-child(2) {
		grid-column: span 2;
	}

	footer div nav ul:nth-child(3) {
		grid-column: span 2;
	}

	footer div nav ul:nth-child(4) {
		grid-column: span 2;
	}

	footer div section p {
		/* Have to specify row and use col boundary */
		grid-row: 1/2;
		grid-column: 9/13;
	}
}

.hidden {
	display: none !important;
}

/*
========================================
Footer Copyright
========================================
*/

footer > div > section > p {
	margin-top: auto;
}

/*
========================================
Cookies
========================================
*/

dialog {
  position: fixed;
  bottom: 1em;
  right: 1em;

  overflow-y: auto;
  box-sizing: border-box;
  max-inline-size: min(30em, 100% - 2em);
  max-block-size: calc(100% - 2em);
  padding: 1em;
  border: 0.15em solid #000000;
  margin-inline-end: 0;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  overscroll-behavior-block: contain;
}

dialog > * {
  margin-block: 0;
}

dialog > * + * {
  margin-block-start: 1em;
}

dialog > form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* MY STYLES */
dialog button {
	color: var(--primary-color);
	background: white;
}
dialog {
	border: 0.05em;
}

/*
========================================
Articles
========================================
*/

#article main > section > h2,
#article main > section > p,
#article main > section > blockquote,
#article main > section > .footnotes {
	max-width: 700px;
}

/* Footnotes */
#article main > section > div.footnotes {
	margin-top: 2rem;
}
#article main > section > div.footnotes p {
	/*margin-top: 0;*/
}

/* Images: space above/below */
#article main > section > figure {
	margin-top: var(--row-gap);
	margin-bottom: var(--row-gap);
}

/* Images caption: font size */
#article main > section > figure > figcaption > p {
	font-size: 75%;
}

/* Images: dimensions */
#article main > section > figure > img {
	max-height: 600px;
}

/* Medium Zoom: 1002 image, 1001 background, 1000 sticky nav header */
.medium-zoom-image--opened {
	z-index: 1002;
}
.medium-zoom-overlay {
	z-index: 1001;
}

/*
========================================
Ticket Form
========================================
*/

input:not(#submit), select, option {
	width: 300px;
}

input, select {
	padding: .5rem;
	margin-bottom: 1rem;
}

select {
	/* Attempt to set background colour on safari */
	background-color: white !important;
}

.h-captcha {
	margin-bottom: .25rem;
}


#hero {
	border-bottom: solid 1px #ccc;
	padding-bottom: 4rem;
	margin-bottom: 2rem;
}
#hero+#hero {
	border-bottom: none;
}