/* 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;
}

hr {
	border-top: solid 1px #ccc;
	margin-top: var(--row-gap);
	margin-bottom: calc(var(--row-gap));
}

/*
========================================
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%;
}

/* If using the max-width rule above, then lazysizes auto sizes function won't work properly in Firefox - the browser will download the smallest image, when it should be downloading a larger one (a tiny adjustment of the window width then forces the correct image to be downloaded). Chrome also downloads the smallest image, but also downloads the correct image, which it renders. The '[data-sizes=auto] part of the selector simply restricts the inline-block declaration to images that are set up to lazyload with lazysizes
img[data-sizes="auto"] {
	display: inline-block;
}
*/

/*
========================================
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:relative" */
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;
}

/* PDF */
.icon-pdf {
	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
========================================
*/

/* INTRODUCTION */

@media all and (min-width: 1000px) {
	#home-introduction section {
		width: 95%;
	}
	#home-introduction section p {
		column-count: 1;
	}
}

/* HERO*/

#hero #hero-title {
	grid-area: title;
}
#hero #hero-keynote1 {
	grid-area: keynote1;
}
#hero #hero-keynote2 {
	grid-area: keynote2;
}
#hero #hero-brochure {
	grid-area: brochure;
}

#hero {
	display: grid;
	column-gap: var(--column-gap);
}

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

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

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

#hero-keynote1 h2,
#hero-keynote2 h2 {
	margin-top: 0;
}

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

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

	#hero {
		grid-template-columns: repeat(1, 1fr);
		grid-template-areas:
			'title'
			'keynote1'
			'keynote2'
			'brochure';
	}
	#hero-keynote2,
	#hero-brochure {
		padding-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: 800px) {

	#hero {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			'title title title'
			'keynote1 keynote2 brochure';
	}

	/*#hero-keynote img {
		width: 46.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;
}

/* HORIZONTAL RULE BETWEEN OLD/NEW FESTIVALS */
#home-introduction {
	border-bottom: solid 1px #ccc;
	padding-bottom: 4rem;
	margin-bottom: 2rem;
}
#hero {
	border-bottom: solid 1px #ccc;
	padding-bottom: 4rem;
	margin-bottom: 2rem;
}
#hero+#hero {
	border-bottom: none;
}



/*
========================================
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;
	filter: saturate(0%);
}

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

/* Sponsored */
.sponsored {
	color: var(--red);
	text-transform: uppercase;
}
.sponsored + h3 {
	margin-top: 0;
}

/*
========================================
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:nth-child(1) {
	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%;
	margin-bottom: 1rem;
}

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

/* Logos: each one */
#information > div div + div#logos img {
	margin-top: 0.3rem;
	height: 2.9rem;
	padding-right: 1.5rem;
}
#information > div div + div#logos img + img {
	margin-top: 1.2rem;
	height: 1.8rem;
	padding-right: 1.5rem;
}
#information > div div + div#logos img + img + img {
	height: 1.9rem;
	margin-top: 1.3rem;
	padding-right: 1.0rem;
}
#information > div div + div#logos img + img + img + img {
	margin-top: 0.90rem;
	height: 2.3rem;
}


@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;
}

footer div section p .safe-to-create {
	width: 3.5rem;
	float: right;
}

footer div nav ul:nth-child(1) {
	grid-area: festival;
}
footer div nav ul:nth-child(2) {
	grid-area: percy;
}
footer div nav ul:nth-child(3) {
	grid-area: about;
}
footer div nav ul:nth-child(4) {
	grid-area: contact;
}
footer div section p {
	grid-area: copyright;
}

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

	footer div {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			'festival percy'
			'about contact'
			'copyright copyright';
	}

	footer div section p .safe-to-create {
		margin-top: -0.8rem;
	}
}

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

	footer div {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			'festival percy about'
			'contact - -'
			'copyright copyright copyright';
	}

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

}

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

	footer div {
		grid-template-columns: repeat(6, 1fr);
		grid-template-areas:
			'festival percy about contact copyright copyright';
	}

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

	footer div section p .safe-to-create {
		margin-top: -0.2rem;
	}
}

.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 / Biography
========================================
*/

#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,
#biography main > section > figure,
#cloonyquinn main > section > figure {
	margin-top: var(--row-gap);
	margin-bottom: var(--row-gap);
}

/* Images: remove space above if page starts with image under H1 */
#biography main > h1 + section > figure:first-child {
	margin-top: 0;
}

/* Images: add space above if image under anchor link */
#biography main > h1 + section > a + figure {
	margin-top: calc(var(--row-gap)*1.33);
}

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

/* Images: dimensions */
#article main > section > figure > img,
#biography main > section > figure > img,
#cloonyquinn main > section > figure > img {
	max-height: 600px;
	max-width: min(900px, 100%); /* Desktop, Mobile */
}

/* 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
========================================
*/

#tickets input:not(#submit), #tickets select, #tickets option {
	min-width: 20em; /* Was width: 300px for email form */
}

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

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

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

/* Additions when changing from email form to Stripe forms */

#tickets form {
	font-size: 90%;
}

#tickets input {
	line-height: 1.4;
}


/*
========================================
Video
========================================
*/

.video {
	max-width: 1400px;
}

.video-responsive {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100) */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background: #000; /* Optional: background color for loading state */
}

.video-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}