/**
 * BASIC STYLES
 **/

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

:root {
	font-size: 18px;
}

body {
	width: 100%;
	overflow: hidden;
	overflow-y: scroll;
	margin: 0;
	--color-text: #1c1c1a;
	--color-link: #1c1c1a;
	--color-link-hover: #1c1c1a;
	--color-text-alt: #6fa18a;
	--color-bg: #e6e6e6;
	--color-info: #e97c1f;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: niveau-grotesk, sans-serif;
	font-display: swap;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	counter-reset: section;
	--cursor-stroke: none; 
	--cursor-fill: var(--color-info); 
	--cursor-stroke-width: 1px; 
	--margin-images: 10px; /* horizontal spacing between tiles on HP - has to be in px for js to work */
}

.cursor { 
	display: none; 
}


/**
 * PAGE LOADER
 **/

.js body::before,
.js body::after {
	content: '';
	position: fixed;
	z-index: 1000;
	transition: opacity 0.3s;
	opacity: 0;
	pointer-events: none;
}

.js body::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js body::after {
	content: 'PLEASE WAIT... LOADING';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 5%;
	color: var(--color-info);
}

.js .loading::before,
.js .loading::after {
	opacity: 1;
	pointer-events: auto;
}


/**
 * PAGE STRUCTURE - Header, Footer, Content area etc
 **/


.page {
	text-align: center;
	position: relative;
	z-index: 99;
	background: var(--color-bg);

	width: 100%;
}

.page--header {
	background-color: #cecfc1;
	margin: 0 auto;
	padding: 0;
	border-radius: 8px;
	position: relative;
	top: -1em;
}	

section.content {
	margin: 10vw auto 5vh;
	max-width: 1300px;
	line-height: 28px;
}

  /* desktops & large laptops - uses css above 
  @media only screen and (min-width: 1279px) {			
  } */

  /* laptops & big tablets in landscape & small desktops - two cols with more padding around the footer */
  @media only screen and (max-width: 1279px) {			
	section.content {
		/* background-color: aliceblue; */
		padding-right: 40px;
		padding-left: 40px;
	}
  }

  /* tablets & larger smart phones - two cols with more padding around the footer */
  @media only screen and (max-width: 768px) {			
	section.content {
		/* background-color: rosybrown; */
		padding-right: 30px;
		padding-left: 30px;
	}

  }

/* TO DO - CAT */

  /* mobiles - adjust margins and padding to maximise screen real estate while leaving space for nav */
  @media only screen and (max-width: 480px) {			
	section.content {
		margin: 10vw 60px auto 5vh;
		padding: 0;
		/* background-color: moccasin; */
		max-width: 1300px;
		line-height: 28px;
	}
  }


.page__links a {
	margin: 0 0.5rem;
	padding: 0.1rem 0;
	display: block;
	font-size: 1rem;
	color: var(--color-text-alt);
	text-transform: uppercase;
	grid-area: links;
}

.page__copyright {
	margin: 1rem 0;
	display: block; 
	font-size: 0.7rem; 
	line-height: 0.75rem; 
	color: var(--color-text);
	grid-area: copyright;
}
.page__copyright a {
	color: var(--color-text);
	text-decoration: none;
}

.mini__contact {
	text-align: center;
	margin: 0 auto;
}

.mini__contact a {
	color: var(--color-text);
	text-decoration: none;
}
.mini__contact a:hover, .page__copyright a:hover { 
	text-decoration: underline;
}

.sm__links {
	text-align: right;
	margin-bottom: 0.5em;
}

.sm__links a {
	color: var(--color-text-alt);
	font-size: 24px;
    margin: 0 10px 0 0;
	text-transform: uppercase;
	text-decoration: none;
}

.sm__links a:hover { 
    color: var(--color-info)
}

.sm__links .fa span {
	display:none
}

/**
 * TYPOGRAPHY
 **/

h2.content__title {
	font-family: niveau-grotesk, sans-serif;
	font-weight: 300;
	margin: 0;
	position: relative;
	font-size: 2.778rem;
	font-display: swap;
}

.content__title--no-number {
	padding: 0 0 0 3.5rem;
	font-size: 2.778rem;
}

.content__subtitle {
	margin: 0;
	padding: 0 3.5rem;
	font-size: 1.778rem;
	font-family: niveau-grotesk, sans-serif;
	font-weight: 400;
	font-display: swap;
}
h3 {
	font-size: 1.778rem;
	font-family: niveau-grotesk, sans-serif;
	font-weight: 400;
	font-display: swap;
	line-height: 110%;
}

.content__text {
	margin: 1rem 0;
	padding: 0 3.5rem;
}

.content__image {
	margin: 1rem 0;
	padding: 0 3.5rem;
}

.content__image img, .content__text img {
	border-radius: 0.35rem;
}

a {
	text-decoration: underline;
	color: var(--color-link);
	outline: none;
}

a:hover {
	text-decoration: none;
	color: var(--color-link-hover);
	outline: none;
	cursor: none;
}

/**
 * CTA BUTTONS used throughout over the site - big, visible and clickable
 **/


.cta-form {
	margin-top: 2em;
}
.cta-form blockquote {
	font: 1.4rem/1.2 niveau-grotesk, sans-serif;
}	
.cta-form .quote {
	margin: 0;
	padding: 0;
}
.cta-form .quote figcaption {
	text-align: center;
	font: 0.8rem/1.4 niveau-grotesk, sans-serif;
	margin-bottom: 1em;	
	letter-spacing: 0.1px;	
}

.clickable {
	padding: 2em 0.5em; border-radius: 10px; border-bottom: 2px solid #ffffff; background: #c0ded1; width: 100%;
}
.clickable:hover { 
	background: #6fa18a; color: #ffffff 
}

a.abutton {
	text-decoration: none;
	text-align: center;
} 

/**
 * BASIC PANEL SETUP - working from narrowest screens to widest (mobile first)
 **/

.panel, .Nav__panel, .shop-panel {
	margin: 0 auto !important;
}

/* .panel:before { content: 'VERY NARROW'; font-size: xx-small; }	/* DEBUG */

.js .panel, .js .Nav__panel, .js .shop-panel {
	display: grid;
	width: calc(100% - 2rem);
	grid-template-areas: 'item'; /* css positions each tile one on top of the other, the js then moves them into place */
}

.panel__item, .Nav__panel__item {
	position: relative;
	grid-area: item;
	width: 100%;
	display: grid;
	grid-gap: 0;
	grid-template-columns: auto minmax(0,1fr) auto;
	grid-template-areas: 	'image 		title'
							'image 		title'
							'subtitle 	subtitle'
							'more 		more';
	grid-template-rows: 1fr auto auto auto auto;
	/* '.	 		close' removed for now on small screens */

}

/* TO DO - remove these styles for 320px +
.panel {
	margin: 1em auto;
	width: 90% !important;
}	

.panel__item {
	grid-gap: 0.5em;
	grid-template-columns: auto minmax(0,1fr) auto;
	grid-template-areas: 'image title title'
						 'image subtitle close'
						 'more more more';
	grid-template-rows: 1fr auto auto;
}
*/

.no-js .panel__item, .no-js .Nav__panel__item {
	margin: 0 0 1rem 0;
	opacity: 1;
	grid-template-areas: 	'image 		title		title'
							'image 		title 		title'
							'subtitle 	subtitle 	subtitle'
							'more 		more 		more';
}

.js .panel__item, .js .Nav__panel__item {
	pointer-events: none;
}

.panel__item-imgwrap {
	grid-area: image;
	position: relative;
	border-radius: 0.35rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: min-content;
}

.js .panel__item-imgwrap {
	cursor: none;
	pointer-events: auto;
	will-change: transform, opacity;
}

.panel__item-img, .panel__item-img-inner  {
	position: relative;
	width: 25vw;
	height: auto;
	max-width: 250px;
	display: block;
}

.panel__item-title {
	grid-area: title;
	font-size: 7vw;
	margin: 0;
	line-height: 0.8;
	font-family: ivypresto-display, serif;
	font-weight: 100;
	font-display: swap;
}

.panel__item-title span {
	display: inline-block;
	padding-bottom: 1.85vw;
	will-change: transform, opacity;
}

h1.panel__item-title span {
	font-weight: 400;
}

h1.panel__item-title span:first-child {
	font-weight: 700;
}

h1.panel__item-title span:last-child {
	font-style: italic;
	font-weight: 300;
	text-indent: 10vw;
	font-size: 50%;
	display: block;
}

h3.panel__item-title span:first-child {
	font-style: italic;
	font-weight: 300;
}

h3.panel__item-title span:last-child {
	font-weight: 700;
	text-indent: 10vw;
	font-size: 100%;
	display: block;
}


.panel__item-subtitle {
	grid-area: subtitle;
	justify-self: start;
	margin-bottom: 1em;
}

.panel__item-subtitle > span {
	display: inline-block;
	position: relative;
	text-transform: uppercase;
	color: var(--color-text-alt);
}

.panel__item-subtitle h4 {
	position: relative;
	/* margin: 0.5rem 0 0 0;  - 0.5rem is too much gap*/
	margin: 0;
	font-weight: normal;
	font-size: 1.2rem;
	font-size: clamp(0.75rem,8vw,1.2rem);
}

.panel__item-subtitle h4 span.char {
	will-change: transform, opacity;
}

.panel__item-close {
	grid-area: close;
	border: 0;
	padding: 0;
	margin: 0;
	position: relative;
	background: none;
	color: rgb(53, 45, 39, 0.2);
	cursor: none;	
	align-self: end;
}

/* TO DO - CAT */

  /* hide close button if it's not a big X */
  @media only screen and (max-width: 1170px) {
	.panel__item-close { display: none; }
  }


/* Big Back button */
.panel__item-close2 {
	display: block;
	width: 100%;
	height: 2rem;
	text-transform: uppercase;
	cursor: pointer;
	pointer-events: auto;	
	z-index: 501;
	border-radius: 16px;
	background-color: var(--color-bg);
	border-color: #cecfc1;
	border-bottom-style: inset;
	border-right-style: inset;
}

a.btn {
	text-decoration: none;
}


/* More info panels */
.js .panel__item-moreinfo {
	grid-area: more;
	grid-column-start: 1;
	grid-column-end: 4;	
	will-change: transform, opacity, height;
	opacity: 0;
	height: 0; /* height is set in panel.js */
	cursor: none;
	display: none;
}

/* More info panel floats */
.panel__item-moreinfo .panel-content {
	float: left; 
	text-align: left;
	padding: 0 0.5em 0.5em 0;
	width: 50%;
}

.no-js .panel__item-close,
.no-js .home .panel__item-close2 {
	display: none;
}

.panel__item-close:focus {
	outline: none;
}

.panel__item-imgwrap2 {
	grid-area: image;
	position: relative;
	border-radius: 0.35rem;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	width: min-content;
}

.js .panel__item-imgwrap2 {
	cursor: none;
	pointer-events: auto;
	will-change: transform, opacity;
}

/* Permanently expanded panels */
.panel__item-moreinfo-expanded {
	grid-area: more;
	grid-column-start: 1;
	grid-column-end: 4;	
	will-change: transform, opacity, height;
	opacity: 100;
	height: 360;
	cursor: pointer;
	display: block;
}

.panel__item-moreinfo-expanded .panel-content {
	float: left; 
	padding-right: 1em; 
	padding-bottom: 2em; 
	width: 50%;
	overflow: hidden;
	/* background-color: green; */

	height: auto; /* Mobile to avoid gaps below */
}

.panel__item-moreinfo-expanded .panel-content p {
	line-height: 115%;
}

/* TO DO - CAT */

  /* desktops & large laptops - uses css above 
  @media only screen and (min-width: 1279px) {			
  } */

  /* laptops & big tablets in landscape & small desktops - two cols with more padding around the footer */
  @media only screen and (max-width: 1279px) {			
  }

  /* tablets & larger smart phones - drop the padding to make more room for content */
  @media only screen and (max-width: 768px) {			
	.panel__item-moreinfo-expanded .content__subtitle,
	.panel__item-moreinfo-expanded .content__text,
	.panel__item-moreinfo-expanded .content__image {
		padding: 0 0;
	}
  }

  /* mobiles - drop the padding to make more room for content - use prev media query */
  @media only screen and (max-width: 480px) {			
  }


/* styles for wide panels */
.panel__item-moreinfo-expanded .panel-content-wide, .panel__item-moreinfo-expanded .panel-content-wide .panel__item-imgwrap {
	width: 100% !important;
	padding-right: 0;
}

.panel-content-wide img.panel__item-img-inner {
	width: 100%; max-width: 100%;
	overflow: hidden;
}

/* zoom for images */
.panel__item-moreinfo-expanded .panel__item-imgwrap, .panel__item-moreinfo-expanded .panel__item-imgwrap a img,
.panel__item-moreinfo .panel__item-imgwrap, .panel__item-moreinfo .panel__item-imgwrap a img, .artwork-image a img {
	transition: 250ms transform ease;
}

.panel__item-moreinfo-expanded .panel__item-imgwrap:hover a img, .panel__item-moreinfo .panel__item-imgwrap:hover a img {
	transform: scale(1.5);
}

/* Artwork details */
.artwork-details { 
	margin-top: 0.5em; 
	font-size: medium !important; 
	margin-bottom: 2em; 
	height: auto !important; 
	font-weight: normal; 
	line-height: 140% 
}
.reddot { 
	height: 12px; 
	width: 12px; 
	background-color: #bb0a1e; 
	border-radius: 50%; 
	display: inline-block 
}
.artwork-image a img:hover {
	transform: scale(1.1);
}

/* Date overlay */
.panel__item-imgwrap .post-date,
.panel__item-imgwrap2 .post-date,
.panel__item-imgwrap .event-date,
.panel__item-imgwrap2 .event-date { 
	text-align:center; 
	font-weight:800; 
	font-size:1.0rem;
	line-height: 1.2;
	text-transform:uppercase; 
	display:block; 
	color: var(--color-text);
	/* background: radial-gradient(var(--color-bg), rgb(229, 229, 228,0.2)); */
	width:6rem; 
	height:100%; 
	position:absolute; 
	left:0; 
	top:0; 
	padding-top:1.8rem;
	z-index:50;
}

.event-date, .post-date {
	/* clip-path: circle(60px at 50px 50px); */

	background-color: rgba(255, 255, 255, .35);
    border-radius: 800px; /* forces clip path to also clip blur */
	clip-path: circle(50%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);	
  }


.panel__item-imgwrap .next, 
.panel__item-imgwrap2 .next {
	color: white;
	background-color:rgb(229, 229, 228, 0.4);
}

.panel__item-imgwrap .prev, 
.panel__item-imgwrap2 .prev {
	color: white;
	background-color:rgb(229, 229, 228, 0.4);

}

.panel__item-imgwrap .post-date span,
.panel__item-imgwrap2 .post-date span,
.panel__item-imgwrap .event-date span,
.panel__item-imgwrap2 .event-date span { 
	font-size:50px; 
	line-height:35px; 
	display:block;
}

/* Title overlay */
.panel__item-imgwrap .post-topic,
.panel__item-imgwrap2 .post-topic { 
	text-align:center; 
	color:var(--color-text);
	font-weight:500; 
	text-transform:uppercase; 
	display:block; 
	background-color:rgb(245, 243, 236, 0.8); 
	width:100%; 
	position:absolute; 
	left:0; 
	bottom:0px; 
	z-index:50;

	font-size:0.65rem;
	line-height:100%; 
	height:2rem; 
	padding-top:0.5rem;
}

/* TO DO - CAT */

/* Content excerpt */
.panel__item-excerpt {
	height: 14em;
	margin-bottom: 1em;
}

.panel__item-excerpt h2 {
	font-size:1rem;
	color: var(--color-text);
	font-weight:500; 
	text-transform:uppercase; 
	line-height: 120%;	
}

.panel__item-excerpt h2 a {
	text-decoration: underline;
	text-decoration: none;
}

.panel__item-excerpt h2 a:hover {
	text-decoration: underline;
}

.panel__item-excerpt p {
	font-size: 0.9rem;
}

/* mobiles - hide description for previous events */
@media only screen and (max-width: 480px) {			
    .previously .panel__item-excerpt p { display: none;}
	.panel__item-excerpt { height: 6em; margin-bottom: 0; overflow: hidden; }
	.panel__item-excerpt h2 { font-size: 0.9rem}
}

/***
 * Styles just for about and subscribe page (for splitting content, social icons, and signup form
 **/
.left__half {
	width: 100%; 
	margin-bottom: 2rem;
}

.right__half {
	width: 100%; 
	margin-bottom: 2rem;
	margin: 0;
    padding: 0 3.5rem;
}	

ul.value-list {
	text-align: center;
	list-style: none; 
	align-items: center;
	font-size: 0.9rem;
	font-style: italic;
	margin-top: 0;
};
ul.value-list li:before {
	content: 'we believe in';
	background: rgba(255, 255, 255, 0);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
}
ul.value-list li {
	margin-bottom: 2em;
}
ul.value-list div {
	font-weight: 900; 
	text-decoration: underline; 
	font-style: normal; 
	font-size: 2.5rem;
	background: #cecfc1;
}
ul.value-list span {
	font-size: 1.4rem;
}


#mc_embed_signup{background:#cecfc1; border-radius: 10px; clear:left; font:14px niveau-grotesk, sans-serif; }
#mc_embed_signup .helper_text{background: transparent}
#mc_embed_signup input {background: #e5e5e4}
#mc_embed_signup .button {background: var(--color-info)}
#mc_embed_signup .asterisk, #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {color: var(--color-info); background-color: auto;}
p.privacy {font-size: 75%; text-align: left; margin-top: -1em; color: var(--color-text-alt)}
p.privacy a{color: var(--color-text-alt)}

/***
 * SMALL MOBILE MEDIA QUERIES
 * Use 2 items per expanded row at this size
 **/
@media screen and (min-width: 320px) {
	/* .panel:before { content: '320px MOBILE'; }	/* DEBUG */

	.panel, .Nav__panel {
		margin: 1em auto;
		width: 90% !important;
	}	

	.panel__item, .Nav__panel__item {
		grid-gap: 0.5em;
		grid-template-columns: auto minmax(0,1fr) auto;
		grid-template-areas: 'image title title'
							 'image subtitle close'
							 'more more more';
		grid-template-rows: 1fr auto auto;
	}

	.panel__item-img {
		width: 28vw;
	}

	.content__title {
		font-size: 1.778rem;
	}

	.content__text, .content__image, .content__subtitle {
		padding: 0 0;
		line-height: 120%;
	}	

	.panel__item-subtitle > span {
		display: none;
	}	

	.content__title--no-number {
		padding: 0 0 0 0rem;
		line-height: 120%;
	}

	.panel__item-imgwrap .event-date,
	.panel__item-imgwrap2 .event-date { 
		border-radius: 200px;
		-webkit-clip-path: circle(200px);
		clip-path: circle(200px);

		width: 70%;
		margin: 15% 15% 0 15%;
		padding: 1em;
		font-size: 60%;
		height: auto;
	}

	.panel__item-imgwrap .next, 
	.panel__item-imgwrap2 .next {
		display: none;
	}	

	.panel__item-imgwrap .post-date,
	.panel__item-imgwrap2 .post-date,
	.panel__item-imgwrap .event-date .year,
	.panel__item-imgwrap2 .event-date .year { 
		display: none;
	}

	.panel__item-imgwrap .post-topic,
	.panel__item-imgwrap2 .post-topic { 
		font-size:0.65rem;
		font-weight: 500;
		height:1rem; 
		padding-top: 3px;
		line-height: 100%;
		bottom:0px; 
	}

	.panel__item-imgwrap .post-topic span,
	.panel__item-imgwrap2 .post-topic span {
		display: none;
	}

	.page--header {
		background-color: #cecfc1;
		margin: 0 auto;
		padding: 0;
		border-radius: 8px;
	}	

	.page--menu {
		display: inline-block;
		text-align: center;
		width: 100%;
		margin-bottom: 1em;
		/* background-color: red; */
	}

	.HeaderLink {
		text-align: center;
		font-weight: 400;
		font-size: 16px;
		/* text-transform: uppercase; */
		padding: 5px 0 5px;
		margin-right: 1em;
		/* background: #f5f3ec;
		border-radius: 16px 16px 0 0; */
	}
	

	h2.content__title {
		font-family: niveau-grotesk, sans-serif;
		font-weight: 300;
		margin: 0;
		position: relative;
		font-size: 1.778rem;
		font-display: swap;
	}

	.panel__item-subtitle span, .panel__item-subtitle h4 {
		font-size: 0.8rem;
		font-size: clamp(0.75rem,8vw,0.8rem);
		line-height: normal;
	}	

	.panel__item-moreinfo-expanded {
		margin-top: 2em;
	}
}


/***
 * MOBILE LANDSCAPE & TABLET MEDIA QUERIES
* Use 2 items per expanded row at this size
**/
@media screen and (min-width: 480px) {
	/* .panel:before { content: '480px MOBILE'; }	 /* DEBUG */

	.panel, .Nav__panel {
		margin: 1em auto;
	}	

	body {
		--margin-images: 30px;	
	}

	.panel__item-img {
		width: 28vw;
	}	

	.panel__item-img-inner  {
		width: 26vw;
		max-width: 320px;
	}

	.panel__item, .Nav__panel__item {
		grid-gap: 0.5rem;
		grid-template-columns: auto minmax(0,1fr) auto;
		grid-template-areas: 'image title title'
							 'image subtitle close'
							 'more more more';
		grid-template-rows: 1fr auto auto;
	}

	.content__text, .content__image, .content__subtitle {
		margin: 1rem 0;
		padding: 0 2rem;
	}

	.content__title--no-number {
		padding: 0 0 0 2rem;
	}

	.panel__item-subtitle > span {
		display: inline-block;
	}
	
	.panel__item-imgwrap .post-date,
	.panel__item-imgwrap2 .post-date { 
		display: none;
	}
			
	.panel__item-imgwrap .event-date,
	.panel__item-imgwrap2 .event-date { 
		/*
		display: block;
		width:100%; 
		height:100%; 
		padding-top:3rem;
		background: none;
		background-color:rgb(229, 229, 228, 0.4);
		*/

		border-radius: 300px;
		-webkit-clip-path: circle(300px);
		clip-path: circle(300px);

		width: 60%;
		margin: 30% 20% 0 20%;
		padding: 1em;
		font-size: 60%;
		height: auto;

	}

	.panel__item-imgwrap .next, 
	.panel__item-imgwrap2 .next {
		display: none;
	}	

	.panel__item-imgwrap .post-date span,
	.panel__item-imgwrap2 .post-date span { 
		font-size:45px; 
	}	

	.panel__item-imgwrap .post-topic,
	.panel__item-imgwrap2 .post-topic { 
		height:1.4rem; 
		padding-top:0.16rem;
		font-size:0.7rem;
		line-height:1rem; 	
	}	

	.panel__item-imgwrap .post-topic span,
	.panel__item-imgwrap2 .post-topic span {
		display: none;
	}

	.panel__item-excerpt {
		height: 9rem;
	}	
	
	.no-js .panel__item, .no-js .Nav__panel__item {
		margin: 0 0 5rem 0;
		grid-template-areas: 'image title title'
							 'image subtitle subtitle'
							 'more more more';
	}

}


/***
 * SMALL LAPTOP MEDIA QUERIES
 * Use 3 items per row at this size
 **/

@media screen and (min-width: 760px) {
	/* .panel:before { content: '760px LAPTOP'; }	 /* DEBUG */

	.panel, .Nav__panel {
		margin: 2rem auto;
	}	

	body {
		--margin-images: 50px;	
	}

	.panel__item-img-inner  {
		width: 26vw;
		max-width: 320px;
	}

	.panel__item, .Nav__panel__item {
		grid-gap: 1rem;
		grid-template-columns: auto minmax(0,1fr) auto;
		grid-template-areas: 	'image	title 	   title'
								'image 	subtitle   close'
								'more 	more 	   more';
		grid-template-rows: 1fr auto auto;
	}

	.panel__item-moreinfo .panel-content {
		padding: 1em 1em 1em 0;
	}

	.content__text, .content__image, .content__subtitle {
		margin: 1rem 0;
		padding: 0 2.5rem;
	}	

	.content__title--no-number {
		padding: 0 0 0 2.5rem;
	}	

	.panel__item-moreinfo .panel-content {
		width: 30%;
		margin-right: 0.5rem;
	}

	.panel__item-moreinfo-expanded .panel-content {
		width: 30%;
		overflow: hidden;
		margin-right: 0.5rem;
		height: auto !important;
		/* background: black; */
	}

	.panel__item-moreinfo-expanded .panel-content-wide {
		width: 30%;
		overflow: hidden;
		margin-right: 0.5rem;
		height: auto !important; /* bigger screens to show text as well as image */
		/* background: yellow; */
	}
	
	.panel__item-imgwrap .post-topic,
	.panel__item-imgwrap2 .post-topic { 
		height:1.4rem; 
		padding-top:0.16rem;
		font-size:0.7rem;
		line-height:1rem; 	
	}	

	.panel__item-imgwrap .post-topic span,
	.panel__item-imgwrap2 .post-topic span {
		display: inline;
	}

	.no-js .panel__item, .no-js .Nav__panel__item {
		margin: 0 0 5rem 0;
		grid-template-areas: 	'image title 	title'
								'image subtitle subtitle'
								'more  more 	more';
	}

	.panel__item-imgwrap .post-date,
	.panel__item-imgwrap2 .post-date,
	.panel__item-imgwrap .event-date,
	.panel__item-imgwrap2 .event-date { 
		/* display: block;
		height:6rem;
		width:6rem; 
		padding-top:1.8rem; */

		border-radius: 300px;
		-webkit-clip-path: circle(300px);
		clip-path: circle(300px);

		width: 6rem;
		margin: 0 auto 0 auto;
		padding: 2.5em;
		font-size: 60%;
		height: 6rem;

	}

	.panel__item-subtitle span, .panel__item-subtitle h4 {
		font-size: 1.0rem;
		font-size: clamp(0.75rem,8vw,1.0rem);
	}	

	blockquote {
		font: 1.4rem/1.2 modesto-condensed, serif;
	}	

	/* about uses 2 side by side panels */
	.left__half {
		width: 50%; 
		float: left;
		margin-bottom: 0;
	}
	
	.right__half {
		width: 50%; 
		float: left; 
	}	

	/* TO DO - used? */
	.right__half h3 {
		font-size: 140%
	}
}


/***
 * BIGGER LAPTOP/DESKTOP MEDIA QUERIES
 * Use 3 items per row at this size 
 **/
@media screen and (min-width: 1170px) {
	/* .panel:before, .Nav__panel:before { content: '1170px DESKTOP+' }	 /* DEBUG */

	.panel, .Nav__panel {
		margin: 2rem auto 0 auto;
	}	

	body {
		--margin-images: 50px;	
	}

	.Nav__panel .panel__item-img {
		width: 16.8vw;
		max-width: 192px;
	}

	.panel__item-img {
		width: 28vw;
		max-width: 320px;
	}

	.content__title {
		font-size: 2.778rem;
	}

	.content__title--no-number {
		padding: 0 0 0 3rem;
	}

	.content__text, .content__image, .content__subtitle {
		margin: 1rem 0;
		padding: 0 3rem;
	}

	.panel__item-imgwrap .post-date,
	.panel__item-imgwrap2 .post-date,
	.panel__item-imgwrap .event-date,
	.panel__item-imgwrap2 .event-date { 
		width:6rem; 
	}

	.panel__item-imgwrap .post-topic,
	.panel__item-imgwrap2 .post-topic { 
		height:2rem; 
		padding-top:0.5rem;
		font-size:0.8rem;
		line-height:1rem; 	
	}

	.page {
		text-align: left;
		display: grid;
		align-content: space-between;
		width: 90%;
		max-width: calc(1450px - 4rem);
		/* grid-template-columns: 25% 50% 25%;
		grid-template-rows: auto;
		grid-template-areas: 'copyright logo links'; */
		grid-template-columns: 25% 50% 25%;
		grid-template-rows: auto
							40px;
		grid-template-areas: '. logo .'
							 'nav nav nav';
	}

	.page--header {
		background-color: #cecfc1;
		margin: 0 auto;
		padding: 0;
		border-radius: 8px;
	}

	.page--logo {
		display: inline-block;
		margin: 0 auto;
		grid-area: logo;
	}
	.page--logo img {
		height:175px; 
		z-index: 1;
	}

	nav {
		grid-area: nav;
		/* background-color: #ffa08c; */
	  }	

	.page--menu {
		display: inline-block;
		text-align: center;
		width: 100%;
		/* background-color: red; */
	}

	.HeaderLink {
		text-align: center;
		font-weight: 400;
		font-size: 16px;
		padding: 5px 0 5px;
		margin-right: 2em;
	}
	

	.page--footer {
		padding: 10rem 4rem 1.5rem;
		border-radius: 8px 8px 0 0;
		margin: 15vh auto 0;
		background: transparent;
	}

	.page__links {
		grid-area: links;
		padding: 0;
		justify-self: end;
		align-self: center;
	}

	.panel__item {	
		grid-template-columns: auto minmax(0,1fr) 250px;
		grid-template-areas: 'image title close'
			'image subtitle close'
			'more more more';
		grid-template-rows: 1fr auto auto;
	}

	/* TO DO - need to alter perhaps for other screen sizes */
	.Nav__panel__item {	
		grid-template-columns: auto minmax(0,1fr) 0;
		grid-template-areas: 'image title close'
			'image subtitle close'
			'more more more';
		grid-template-rows: 0 auto auto;
	}

	.panel__item-close {
		align-self: unset;
	}

	.panel__item-close span {
		display: none;
	}

	.panel__item-close::before,
	.panel__item-close::after {
		content: '';
		width: 1px;
		height: 100%;
		background: currentColor;
		position: absolute;
		transform-origin: 50% 50%;
		left: 50%;
		top: 0;
		transform: scale(1.15) rotate(32deg);
	}

	.panel__item-close::after {
		transform: scale(1.15) rotate(-32deg);
	}
}

/* Hide the open panels if js enabled */
.js .panel__item-title>*,
.js .panel__item-subtitle>*,
.js .panel__item-close {
	opacity: 0;
	pointer-events: none;
}

.js .panel__item--open .panel__item-title>*,
.js .panel__item--open .panel__item-subtitle>*,
.js .panel__item--open .panel__item-close {
	pointer-events: auto;
}

.js .panel__item--open {
	z-index: 500;
}

@media (any-pointer:fine) {
	.cursor {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		pointer-events: none;
		z-index: 1001;
	}

	.cursor__inner {
		fill: var(--cursor-fill);
		stroke: var(--cursor-stroke);
		stroke-width: var(--cursor-stroke-width);
		opacity: 0.7;
	}

	.no-js .cursor {
		display: none;
	}

}


/**
 * BLINKING EYE ANIMATION
 **/

.button {
	pointer-events: auto;
	/* cursor: pointer; */
	border: none;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	position: relative;
	display: inline-block;
}

.button::before,
.button::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@keyframes rotateIt {
	to { transform: rotate(-360deg); }
  }
  

.button--surtur {
	padding: 0;
	background: none;
	-webkit-clip-path: circle(40% at 50% 50%);
	clip-path: circle(40% at 50% 50%);
}

.button--surtur:focus-visible {
	background: var(--color-text-alt);
}

.textcircle {
	position: relative;
	display: block;
	width: 120px;
}

@media screen and (min-width: 1170px) {
	.textcircle { width: 200px; }
}
@media screen and (min-width:760px) and (max-width: 1170px) {
	.textcircle { width: 200px; }
}

.textcircle text {
	font-size: 32px;
	text-transform: uppercase;
	fill: var(--color-text-alt);
}

.textcircle textPath {
	letter-spacing: 17px; /* Firefox needs this */
}

/* Rotate text on hover */
.button--surtur:hover .textcircle {
	animation: rotateIt 7s linear infinite;
}

.eye {
	position: absolute;
	z-index: 2;
	width: 60px;
	height: 60px;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
}

.eye__outer,
.eye__inner,
.eye__lashes-up,
.eye__lashes-down {
	stroke: var(--color-info);;
	fill: none;
	stroke-width: 1.5px;
}

.eye__lashes-down {
	opacity: 0;
}

/* Eye blink all the time */
.button--surtur .eye__lashes-up,
.button--surtur .eye__inner,
.button--surtur .eye__iris {
	animation: blinkHide 2s step-end infinite;
}

.button--surtur .eye__lashes-down {
	animation: blinkShow 2s step-end infinite;
}

@keyframes blinkHide {
	0% { opacity: 0; }
	10% { opacity: 1; }
}

@keyframes blinkShow {
	0% { opacity: 1; }
	10% { opacity: 0; }
}


/**
 * IMAGES FOR EXHIBITION ARTWORK GRIDS
 **/
.artwork-wrapper {
margin: 5em auto 0 auto;
max-width: 800px;
}
.artwork-wrapper img {
max-width: 100%;
display: block;
}
.artwork-wrapper figure {
margin-bottom: 1.8em;
display: flex;
justify-content: space-between;
}
.artwork-wrapper .post-image:nth-last-child(n+2):nth-last-child(-n+2):first-child,
.artwork-wrapper .post-image:nth-last-child(n+2):nth-last-child(-n+2):first-child ~ .post-image {
flex: 0 1 48%;
}
.artwork-wrapper .post-image:nth-last-child(n+3):nth-last-child(-n+3):first-child,
.artwork-wrapper .post-image:nth-last-child(n+3):nth-last-child(-n+3):first-child ~ .post-image {
flex: 0 1 31%;
}

.artwork-wrapper .post-image div {
    display: none;
	display: block;
    height:20px;
	line-height: 125%;
    max-width: 100%;
	font-size: x-small;
	text-align: center;
}

.red-dot {
	height: 12px;
	width: 12px;
	background-color: #bb0a1e;
	border-radius: 50%;
	display: inline-block;
}

/* Mobile view of artworks */
@media only screen and (max-width: 480px) {			
	.artwork-wrapper {
		margin: auto 0 auto;
	}

	.artwork-wrapper figure {
		margin-bottom: 0;
		display: block;
	}

}


/**
 * BLOCKQUOTES
 **/

blockquote::before {
	content: open-quote;
}
blockquote::after {
	content: close-quote;
}
blockquote {
	quotes: "“" "”" "‘" "’";
	text-align: center;
	margin: 10% 1em 0.5em 5%;
	font: 1.4rem/1.2 ivypresto-display, serif;
	letter-spacing: 0.2px;
}

.quote figcaption {
	text-align: center;
	font: 0.8rem/1.4 ivypresto-display, serif;
	margin-bottom: 1em;	
	letter-spacing: 0.1px;	
}

/* Responsive maps and youtube videos */
.google-map {
	padding-bottom: 50%;
	position: relative;
}

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

.youtube-video {
	aspect-ratio: 16 / 9;
	width: 100%;
}