/* Global Styles */
body {
	cursor: url(../../assets/images/little_p.png) 0 0, pointer;
	-webkit-font-smoothing: antialiased;
	display: flex;
  	flex-direction: column;
  	/* min-height: 100vh; */
}

a {
	color: black;
	text-decoration: none;
}

a {
	cursor: url(../../assets/images/little_p.png) 0 0, auto;
	/* cursor: default */
}

h1, h2, h3, h4 {
	font-size: 1.7em;
	font-family: "Arial Narrow", Arial, sans-serif;
}

button {
	cursor: url(../../assets/images/little_p.png) 0 0, auto;
}

input {
    border-radius: 0;
}

.rando {
	display: none;
}

.caption {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: center;
	width: 50%;
    margin: 2rem auto;
}

.caption a {
	text-decoration: underline;
}

.caption a:hover {
	color: blue;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

.container {
    margin: 0.5% 3%;
	/* position: relative; */
	flex: 1 auto;
}

/* padding on <p>'s generated by kirbytext() */
.exinfo p, .snippet p, .reltext p {
	padding-bottom: 0.5em;
}

.blankslate {
	display: none;
}

.smallcontainer {
	margin: 6% 0 0 0;
}

/* Promo */
.promowrapper {
    margin: 8% 0 0 0;
}

.mobilecover .promowrapper {
    margin: 44% 0 0 0;
}

/* Navigation */
.navwrapper {
	position: fixed;
	top: 0.5%;
	width: 100%;
    z-index: 1;
}

.nav {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    font-size: 1.75vw;
    text-transform: uppercase;
    text-align: justify;
	width: 94%;
}

@media (max-width: 1300px) {
	.nav {
		font-size: 2.25vw;
	}
}

.nav p:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.nav a:hover, .nav a.selected {
    text-decoration: underline;
}

.nav a.logo:hover {
	text-decoration: none;
}

/* Subnav */
.subnav {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.6em;
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

.subnav span {
    margin: 0 0.5em;
    white-space: nowrap;
}

.subnav span:hover, .subnav span.active {
    border-bottom: 2px solid;
}

/* Cover */
.mobilecover {
	display: none !important;
}

.mobilecover.close {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name: mobileslideout;
}

.cover.close {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name: slideout;
}

.cover.open {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name: slidein;
}

/* Mobile Cover: Slide Out */
@keyframes mobileslideout { from { left: 0; } to { left: -100%; } }
/* Cover: Slide Out */
@keyframes slideout { from { left: 0; } to { left: -98.5%; } }
/* Cover: Slide In */
@keyframes slidein { from { left: -98.5%; } to { left: 0; } }


/* Narrative */
.snippet {
	max-width: 40%;
	padding: 0 0 2em 0;
}

#cu-exhib-wrapper {
	width: 50%;
	padding: 1.5em 0 0 0;
	overflow-y: scroll;
}

#cu-exhib-wrapper h1 {
	/* font-size: 1.3em; */
	text-transform: uppercase;
}

.cu-narrative:hover h1 {
	text-decoration: underline;
	font-weight: bold;
}

.home-container {
	display: flex;
    gap: 3em;
    max-height: 80vh;
}

.narrative-container {
	display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5em 1.5em 0 0;
    width: 50%;
}

.narrative-container .signup {
	margin: 0;
	padding: 0;
}

.subscribe-container {
	margin-bottom: 2rem;
}

.narrative-exhibitions {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.5em 1.5em 1em 0;
    overflow-y: scroll;
}
.narrative-exhibitions h1 {
	text-transform: uppercase;
	display: inline-block;
	border-bottom: 2.5px solid transparent;
}

.narrative-exhibitions:hover h1 {
	text-decoration: underline;
	font-weight: bold;
}

.narrative-exhibitions.upcoming {
	padding: 1.5em 1.5em 0 0;
	width: 50%;
}

.narrative-exhibitions.current {
	padding: 1.5em 1.5em 3em 0;
}

.exhib-title {
	font-weight: bold;
}

.single-exhibition {
	line-height: 2rem;
	border-bottom: 2px solid transparent;
	font-size: 1.7em;
}
.single-exhibition:hover p {
	border-bottom: 2px solid black;
    display: inline;
	line-height: 1.75rem;
}

.away-container {
	width: 100%;
}

.away-container .subscribe-container {
	width: 50%;
}

.away-message {
	width: 75%;
	display: block;
	font-size: 1.7em;
}

/* Artist(s) */

/* .artistlist {
	gap: 2vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
	max-height: 70vh;
	margin-top: 4%;
} */

#artists-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; /* Set the flex direction to column */
  max-width: 100vw;
  max-height: 80vh;
	.column {
		width: 30%;
	}
}

.artist {
	text-align: center;
	padding: 3em 0 10em 0;
	font-family: "Arial Narrow", Arial, sans-serif;
}

.artistlist h1 {
	font-size: calc(1.5vw + 1.5vh);
	flex: 1;
	display: block; /* Change to block display */
	padding: 1rem;
	box-sizing: border-box;
	margin: 0 0 .80em 0;
	border-bottom: 4px solid transparent;
}

.artistlist h1 a:hover {
    font-weight: bold;
	font-size: calc(1.5vw + 1.5vh);
    /* letter-spacing: -0.07rem; */
	border-bottom: 4px solid black;
}

@media (max-width: 1000px) {
	#artists-wrapper{
		.column {
			width: 35%;
		}
	}
}

@media (max-width: 900px) {
	.single-artist {	
			padding: 0!important;
	}
	.mp-footer {
			font-size: 12px;
	}
}

@media(max-width: 1600px) {
	.artistlist {
		max-height: 75vh;
		/* gap: 3vh; */
	}
}


.artistnav {
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 0 0 5em 0;
    text-transform: uppercase;
}

.artistnav span {
    margin: 0 0.3em;
}

.artistnav a:hover, .artistnav a.active {
    border-bottom: 1px solid;
}

.artist-relative {
    position: relative;
}

.textcolumn {
    line-height: 1.2em;
    margin: 0 auto;
    text-align: left;
    width: 50%;
}

.textcolumn p {
    padding: 0 0 1.5em 0;
}

.textcolumn p a:hover {
    border-bottom: 1px solid;
}

.textcolumn h2 {
    font-weight: bold;
	font-size: 1.2em;
    padding-bottom: 1em;
}

.textcolumn h3 {
    font-weight: bold;
	font-size: 1.2em;
}

.publication {
    margin-bottom: 4em;
}

.publication img {
    max-width: 25%;
}

/* Exhibition (Single) */
.exinfo {
	text-align: center;
	padding: 3em 0 5em 0;
}

.exinfo h1 {
	width: 85%;
	margin: 0 auto;
	font-size: 4em;
	display: block;
}

.exinfo .moreinfo, .exinfo .exdate {
	font-size: 1.8em;
	width: 65%;
	margin: 0.8em auto 0.4em auto;
}

.moreinfo a {
    border-bottom: 1px solid;
}

.exinfo .expdfs {
	text-transform: uppercase;
	margin: 1.2em auto 0 auto;
}

.exinfo .expdfs span {
	display: inline-block;
	margin: 0 1em 0 1em;
} 

.exinfo .exopening {
	font-size: 1.8em;
}

.exinfo .virtual {
	padding: 3em 0 0 0;
}

.eximages div {
	padding: 0 0 3em 0;
}

.eximages img {
	display: block;
	max-height: 100vh;
	max-width: 100%;
	margin: 0 auto 1em auto;
}

.eximages video {
	display: block;
	height: 100vh;
	width: 100%;
	margin: 0 auto 1em auto;
}

/* Exhibition (List) */
.exinfo .exlist {
	margin: 0 0 7em 0;
}

.single-archive-exhibition {
	display: none;
	line-height: 2rem;
	font-size: 1.7em;
}

.single-archive-exhibition.selected {
	display: block;
}

.single-archive-exhibition p {
	display: inline;
}

.single-archive-exhibition:hover p {
	border-bottom: 2px solid black;
	display: inline;
}

.exhibitions-wrapper {
	display: flex;
	gap: 3em;
	max-height: 80vh;
}

.exhibitions {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.5em 1.5em 1em 0;
    overflow-y: scroll;
}

.exhibitions h1 {
	text-transform: uppercase;
	margin-bottom: 2rem;
	display: inline-block;
	border-bottom: 2.5px solid transparent;
}
.exhibitions:hover h1 {
	text-decoration: underline;
	font-weight: bold;
}

.exhibitions.current {
	padding: 1.5em 1.5em 3em 0;
}

.archive-container {
	width: 100%;
	display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1em 1.5em 0 0;
	overflow-y: scroll;
}

.year-container {
	display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5em 1.5em 0 0;
	width: 50%;
}

.year-container:hover h1{
	font-weight: bold;
	text-decoration: underline;
}

.year-container h1 {
	/* font-size: 1.7em; */
    text-transform: uppercase;
}

.years {
	display: inline-flex;
    /* font-size: 1.7em; */
    text-transform: uppercase;
    gap: 0.5rem;
	flex-wrap: wrap;
}

.exhibition-year {
	font-size: 1.7em;
}

.exhibition-year:hover {
	font-weight: bold;
	text-decoration: underline;
}

.exhibition-year.active{
	font-weight: bold;
	text-decoration: underline;
	/* border-bottom: 1px solid black; */
}

/* Related (List) aka -> News */

.news-wrapper {
	display: flex;
	gap: 3em;
	max-height: 80vh;
}

.related {
	padding: 1em 0 5em 0;
	font-size: 300%;
}

.press-container {
	padding: 0 1.5em 1.5em 0;
	width: 100%;
    overflow-y: scroll;
}

.related span {
	display: inline;
}

.press {
	display: none;
}

.press.selected {
	display: block;
}

.press.selected {
	font-size: 1.7em;
	line-height: 2rem;
}

.press a:hover {
	border-bottom: 2px solid black;
}

.press-publication {
	font-weight: bold;
}

/* Related (Single) */
.relative h1 {
	text-align: center;
	padding: 1em 0 0 0;
	font-size: 300%;
}

.relative .reltext {
	width: 50%;
	text-align: justify;
	margin: 2em auto 0 auto;
}

.relative .reltext a {
	text-decoration: underline;
}

.relative blockquote {
	text-align: center;
}

.relative .reltext a:hover {
	color: blue;
}

.relative div {
	padding: 0 0 3em 0;
}

.relative img {
	display: block;
	max-height: 100vh;
	max-width: 100%;
	margin: 0 auto 1em auto;
}

.announcements {
	width: 50%;
	padding: 1.5em 1.5em 0 0;
    overflow-y: scroll;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.single-announcement:hover h1 {
	border-bottom: 2.5px solid black;
	font-weight: bold;
}

.annoucement-description {
	max-width: 100%;
	margin-bottom: 1em;
}

.single-announcement h1 {
	text-transform: uppercase;
	margin-bottom: calc(2rem - 5px);
	display: inline-block;
	border-bottom: 2.5px solid transparent;
}

.annoucement-description {
	font-size: 1.7em;
}

.show-more:hover, .show-less:hover {
	font-weight: bold;
}

.annoucement-image img {
	width: 100%;
}

/* Mail Chimp now for Artlogic  */
.signup {
	display: inline-block;
	padding: 1.5em 1.5em 1.5em 0;
	margin: 0 0 5em 0;
	background: #FFFFFF;
	width: 75%;
}
			
.signup input, .signup button {
	display: block;
	border: none;
	background: #FFFFFF;
	outline: none;
	font-size: 1.7em;
	font-family: "Arial Narrow", Arial, sans-serif;
	color: black;
}

.signup input {
	border-bottom: 2px solid #000000;
	margin-bottom: 2em;
	width: 100%;
	padding: 0;
}

.signup button {
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 1em;
}

.signup button:hover {
	text-decoration: underline;
}

::-webkit-input-placeholder {
	color: #000000;
}		

input:focus::-webkit-input-placeholder {
	color:transparent; 
}

/* Shop Button */

.shop {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 3em;
	border-bottom: 4px solid transparent;
	text-transform: uppercase;
}

.shop a:hover {
   font-weight: bold;
   border-bottom: 4px solid black;
   transform: scale(1.5);
}

/* Contact */
.map {
	margin: 0 0 5em 0;
}

iframe {
	width: 100%;
	height: 50vh;
}

.contactsignup {
	float: left;
	margin: 0 0 0 5%;
	width: 35%;
}

.contactinfo {
	width: 50%;
	float: left;
	margin: 0 0 10em 0;
	font-size: 1.7em;
}

.contactinfo p {
    padding: 0 0 1em 0;
}

.contact_m {
	clear: both;
}

#response {
	font-size: 1.7em;
}

#response .success {
	background-color: #16F529;
	display: inline-block;
}

#response .error {
	background-color: red;
	display: inline-block;
}

/* Footer */
footer {
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: 1em;
	font-family: "Arial Narrow", Arial, sans-serif;
	font-weight: bold;
}

footer li {
	display: inline-block;
	padding: 0 2em 0 0;
}

footer a {
	color: black;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

#return-to-top {
    position: fixed;
    right: 40px;
    bottom: 25px;
    display: none;
    font-family: Courier, monospace;
    font-size: 0.8em;
    border-bottom: 1px solid;
	z-index: 10;
}

.magic_m {
	position: absolute;
	bottom: 0;
	z-index: 20;
}

@media (max-width: 920px) {
	footer li {
		display: inline-block;
		padding: 0 0.5em 0 0;
	}
	.artistlist {
		max-height: 80vh;
		h1 {
			width: auto;
		}
	}
}

/* Small Styles */
@media (max-width: 800px) {
	body {
		/* font-size: 80%; */
		cursor: default;
	} 

	.smallcontainer {
		margin: 5% 0 20% 0;
	}
	
	/* Cover */
	.mobilecover {
		display: flex !important;
	}
	.cover {
		display: none !important;
	}
	
    .covertext {
        font-size: 3.5em !important;
    }
		
	/* Navigation */
	.navwrapper {
		position: relative;
	}
	
	.nav {
	    font-family: "Arial Narrow", Arial, sans-serif;
	    font-weight: bold;
	    font-size: 1.3em;
	    text-transform: uppercase;
	    text-align: left;
		width: auto;
	}
	
	.nav p:after {
	    content: "";
	    display: none;
	    width: 100%;
	}
	
	.nav a {
		display: block;
		padding: 0.2em 0 0 0;
	}
	
    .subnav {
        font-size: 1em;
        line-height: 2em;
    }

	.away-message {
		font-size: 1.5em;
	}
    	
	/* Narrative */
	.snippet {
		max-width: 80%;
		padding: 0 0 4em 0;
	}

	.home-container {
		max-height: 50vh;
	}

	/* Mail Chimp */
	.signup {
	 	display: block;
		/* margin: 0 auto 5em auto; */
	}

	.signup input, .signup button {
		font-size: 1.5em;
	}

	.signup input.subscribe {
		font-size: 1.5em;
	}

	#response {
		font-size: 1.5em;
	}

	/* Artist List */

	.artistlist {
		max-height: 55vh !important;
	}

	.artistlist h1{
		margin: 0 0 0.1em 0;
	}
	
	/* Artist Pages */
    .textcolumn {
        width: 80%;
    }
    
    .publication img {
        max-width: 80%;
    }
	
	/* Exhibitions */
	.exinfo h1 {
		font-size: 3.5em;
		display: block;
	}
	
	.exinfo .moreinfo, .exinfo .exdate {
		font-size: 1.3em;
		width: 85%;
		margin: 1.2em auto 0 auto;
	}

	.exhibitions-wrapper {
		max-height: 55vh;
	}

	.cu-narrative h1 {
		font-size: 1.5em;
	}

	.single-exhibition {
		font-size: 1.5em;
	}

	.single-archive-exhibition {
		font-size: 1.5em;
	}
	
	/* Related (List) NEWS */
	.related {
		padding: 1em 0 5em 0;
		font-size: 200%;
	}
	
	.related span {
		display: block;
		padding: 0 0 1em 0;
	}

	.news-wrapper {
		max-height: 55vh;
	}

	.year-container h1 {
		font-size: 1.5em;
	}

	.exhibition-year {
		font-size: 1.5em;
	}

	.press.selected {
		font-size: 1.5em;
	}

	.single-announcement h1 {
		font-size: 1.5em;
	}

	.annoucement-description {
		font-size: 1.5em;
	}
	
	/* Related (Single) */
	.relative .reltext {
		width: 100%;
		margin: 2em 0;
	}
		
	/* Contact */
	.map {
		margin: 0 0 5em 0;
	}
	
	iframe {
		display: none;
		width: 100%;
		height: 50vh;
	}
	
	.contactsignup {
		float: none;
		margin: 0;
		width: auto;
	}
	
	.contactinfo {
		width: auto;
		float: none;
		margin: 0 0 2em 0;
		font-size: 1.5em;
	}
	
	.contactinfo p {
	   padding: 0 0 1em 0;
	}
	
	.contact_m {
		clear: none;
	}
	
	/* Footer */
	.magic_m {
		text-align: center;
		margin: 5em 0 1.5em 0;
	}
	
	footer {
		margin: 5em 0 1.5em 0;
	}
	
	footer li {
		display: block;
		padding: 0 0 0.5em 0;
	}
}

/* X-Small Styles */

@media (max-width: 600px) {

	.container {
		position: relative;
	}

	.smallcontainer {
		margin: 8% 0 20% 0;
	}

	/* News */

	.news-wrapper {
		flex-direction: column;
		gap: 1rem;
		max-height: 100%;
	}

	.announcements {
		order: -1;
		width: 90%;
		max-height: 100%;
		padding: 0;
		margin-bottom: 3em;
	}

	.annoucement-description h1 {
		margin-bottom: 1rem;
		font-size: 1.3em;
	}

	.year-container h1 {
		font-size: 1.3em;
	}

	.exhibition-year {
		font-size: 1.3em;
	}

	.press.selected {
		font-size: 1.3em;
	}

	.single-announcement h1 {
		font-size: 1.3em;
	}

	.annoucement-description {
		font-size: 1.3em;
	}

	.year-container {
		width: 90%;
		padding: 0 0 3em 0;
	}

	.press-container {
		max-height: 100%;
		width: 100%;
		margin-bottom: 4rem;
	}

	.press.press.selected {
		font-size: 1.3em;
	}

	/* Exhibitions */

	.exhibitions-wrapper {
		flex-direction: column;
		gap: 1rem;
		max-height: 100%;
	}

	#cu-exhib-wrapper {
		order: -1;
		width: 100%;
	}

	.cu-narrative {
		margin-bottom: 2em;
	}

	.cu-narrative h1 {
		font-size: 1.3em;
	}

	.archive-container {
		max-height: 100%;
		margin-bottom: 4rem;
	}

	.single-exhibition {
		font-size: 1.3em;
	}

	.year-container h1 {
		font-size: 1.3em;
	}

	.exhibition-year {
		font-size: 1.3em;
	}

	.single-archive-exhibition {
		font-size: 1.3em;
	}


	.snippet {
		padding: 0 0 6em 0;
	}

	/* Narrative */
	.home-container {
    	max-height: 100%;
		flex-direction: column;
		padding-bottom: 3rem;
	}

	.signup {
		margin: 0 auto 5em auto;
    	border: 0.15em solid black;
    	padding: 1em 1.5em;
	}

	.narrative-container .signup {
		border-bottom: 0.15em solid #000000;
		text-align: center;
		width: auto;
		padding: 1em 1.5em;
	}

	.signup input, .signup button {
		font-size: 1.3em;
	}

	.signup input {
		border-bottom: 2px solid #000000;
		margin-bottom: 1em;
		text-align: center;
		width: 100%;
		text-transform: uppercase;
	}

	.signup button {
		text-transform: uppercase;
		font-weight: bold;
		padding: 0;
		width: 100%;
		text-align: center;
	}

	.signup input.subscribe {
		font-size: 1.3em;
		text-align: center;
	}

	.subscribe-container {
		width: auto;
    	margin: 0 6.35% 0 6.35%;
	}

	.narrative-container {
		width: 100%;
		padding: 0;
	}

	.narrative-exhibitions {
		max-height: 100%!important;
		padding: 1.5em 1.5em 3em 3em!important;
	}

	.narrative-exhibitions.current {
		max-height: 100%!important;
		padding: 1.5em 1.5em 0 3em!important;
	}

	.narrative-exhibitions.upcoming {
		width: auto;
	}

	.away-container .subscribe-container {
	width: auto;
	}

	.away-message {
		margin: 0 auto;
		font-size: 1.3em;
	}

	/* Artists */

	.artistlist {
		margin: 0px 0 10em 0;
		max-height: 100%!important;;
		column-count: 1!important;
		.column {
			width: 100%!important;
		}
	}

	.artistlist h1{
		font-size: 1.3em;
		width: auto;
	}

	.artistlist h1 a:hover {
		font-size: inherit;
	}

	.subnav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		line-height: 1.5em;
		margin: 0;
		text-align: start;
		width: 100%;
    }

	.subnav span {
		width: fit-content;
		margin: 0 1.5em 0 0;
	}

	.artist-relative {
		position: static;
	}

	/* Contact */

	.contactinfo {
		padding-left: 1.7em;
		padding-right: 1.7em;
		font-size: 1.3em;
	}

	#response {
		font-size: 1.3em;
		text-align: center;
	}

	.map {
		display: none;
	}
}