@font-face {
	font-family: recline;
	src: url(../fonts/Recline-Regular.otf)
}

@font-face {
	font-family: recline;
	src: url(../fonts/Recline-Italic.otf);
	font-style: italic;
}

@font-face {
	font-family: recline;
	src: url(../fonts/Recline-Bold.otf);
	font-weight: 700;
}

@font-face {
	font-family: recline;
	src: url(../fonts/Recline-BoldItalic.otf);
	font-weight: 700;
	font-style: italic;
}

body {
	background-color: #d2d2d2;
	text-align: center;
	color: #000;
	font-family: recline, sans-serif, arial;
	font-size: 18px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
}

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

h1 {
	font-size: 1.5em;
	writing-mode: vertical-rl;
	margin: 0;
	transform: rotate(180deg);
}

h1 span {
	font-style: italic;
}

h2 {
	margin: auto;
}

h3 {
	font-size: 2em;
	margin-bottom: 25px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: inline-block;
}

#background {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

#background video {
	min-height: 100%;
	min-width: 100%;
	pointer-events: none;
}

nav {
	position: fixed;
	display: flex;
	flex-direction: column;
	top: 15px;
	left: 15px;
	z-index: 999;
	display: none;
}

nav img {
	display: block;
	height: 50px;
	margin-bottom: 15px;
	position: relative;
	left: 10px;
}

/*Opening Screen */
header {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	pointer-events: none;
	display: block;
	overflow: hidden;
}

.extra-spacing {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: block;
	height: 25%;
}

@media only screen and (max-width: 800px) {
	.extra-spacing {
		height: auto;
		margin-top: 15%;
		margin-right: -3%;
	}
}

.title-line-1, .title-line-2, .title-line-3, .title-line-4 {
	display: none;
}

@media only screen and (max-width: 800px) {
	.title-line-1, .title-line-2, .title-line-3, .title-line-4 {
		display: block;
	}
}

@media only screen and (max-width: 1250px) {
	.title-line-3 {
		display: block;
	}
}


header .fading-title span {
	font-size: 5em;
}

/*Curatorial Statement*/
#curatorial-statement {
	position: absolute;
	text-align: left;
	background-color: #F5F4F5;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
	display: none;
}

#curatorial-statement article {
	width: 80%;
	margin: 5% 10%;
}

#curatorial-statement p {
	margin-bottom: 13px;
	line-height: 1.25;
}

#curatorial-statement h2 {
	font-size: 2em;
}

#curatorial-statement h3 {
	font-size: 1.1em;
}

#curatorial-statement h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 13px 0;
}

/*Exhibition Space */
main {
	opacity: 1;
	/*animation: fadeIn 4s 6s forwards;*/
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	display: none;
}

#metadata-modal {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	display: none;
	overflow: hidden;
}

@media only screen and (max-width: 800px) {
	#metadata-modal {
		overflow: visible;	
	}
}

.close-icon {
	width: 30px;
	cursor: pointer;
	position: absolute;
	top: 5%;
	right: 8%;
	margin: 0;
	opacity: 0.8;
}

.close-icon:hover {
	opacity: 0.6;
}

.close-icon:active {
	opacity: 1;
}

@media only screen and (max-width: 1100px) {
	.close-icon {
		top: 4%;
		right: 6%;
	}
}

@media only screen and (max-width: 800px) {
	.close-icon {
		top: 2%;
		right: 4%;
		display: block;
	}
}

#modal-wrapper {
	width: 95%;
	margin-left: 5%;
	padding: 5% 10%;
	text-align: left;
	position: relative;
	height: 100%;
	max-width: 2000px;
}

@media only screen and (max-width: 800px) {
	#modal-wrapper {
		height: auto;
	}
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
	background-color: transparent;
	width: 50%;
	max-height: 70vh;
	perspective: 1000px;
	display: inline-block;
	/* Remove this if you don't want the 3D effect */
}

@media only screen and (max-width: 800px) {
	.flip-card {
		display: block;
		margin-top: 10%;
		margin-bottom: 20px;
		max-height: none;
	}
}

/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	text-align: center;
	object-fit: contain;
	max-height: 80vh;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

@media only screen and (max-width: 800px) {
	.flip-card-inner {
		max-height: none;
	}
}

/* The class added via jQuery toggle that adds a horizontal flip when you click the trigger */
.flipped {
	transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
	margin: auto;
	position: relative;
	top: 0;
	bottom: 0;
	max-width: 100%;
	max-height: 80vh;
	-webkit-backface-visibility: hidden;
	/* Safari */
	backface-visibility: hidden;
}

.flip-card-front img,
.flip-card-back img {
	object-fit: contain;
	width: 100%;
	max-height: 80vh;
}

/*For Zooming*/
.flip-card-front-img {
	transition: all 0.5s;
	right: 0;
	top: 0;
}

.flip-card-front-img.zoomed {
	transform: scale(2);
	right: 130px;
	top: 100px;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	color: black;
	overflow: hidden;
}

/* Style the back side */
.flip-card-back {
	color: white;
	transform: rotateY(180deg);
	position: absolute;
}

#flip-trigger, #open-trigger, #zoom-trigger {
	margin: 10px;
	width: 100%;
	text-align: right;
	cursor: pointer;
}

#flip-trigger.unavailable, #open-trigger.unavailable, #zoom-trigger.unavailable {
	cursor: default;
	opacity: 0.5;
}

#metadata-text {
	width: 45%;
	margin-left: 3%;
	margin-right: -3%;
	max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px;
    display: inline-block;
    vertical-align: top;
}

@media only screen and (max-width: 800px) {
	#metadata-text {
		display: block;
		width: 100%;
		position: static;
		overflow: visible;
		max-height: none;
		margin-top: 25px;
	}
}

#metadata-text::-webkit-scrollbar-track { /* Background */
  background: transparent;
}

#metadata-text h2 {
	width: 100%;
	text-align: left;
	margin: 0 0 20px 0;
	font-size: 1.6em;
}

#metadata-text p {
	line-height: 1.25;
}

@media only screen and (max-width: 800px) {
	#modal-inner-wrapper {
		flex-direction: column-reverse;
	}

	.flip-card {
		width: 100%;
	}

	#metadata-text {
		width: 100%;
	}
  }

.grid-wrapper>article {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 1s;
}

.ephemera-item {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 5px;
	transition: opacity 1s;
	position: relative;
	z-index: 1;
	cursor: pointer;
}

.grid-wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
	grid-auto-rows: 300px;
	grid-auto-flow: dense;
	grid-gap: 50px;
	padding: 50px;
}

@media only screen and (max-width: 1100px) {
	.grid-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
		grid-auto-rows: auto;
	}
  }

@media only screen and (max-width: 800px) {
	.grid-wrapper {
		grid-template-columns: repeat(auto-fit, minmax(15%, 1fr));
		grid-auto-rows: auto;
	}
  }

@media only screen and (max-width: 600px) {
	.grid-wrapper {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
  }

.grid-wrapper .wide {
	grid-column: span 2;
}

.grid-wrapper .tall {
	grid-row: span 2;
}

.grid-wrapper .extra-tall {
	grid-row: span 3;
}

.grid-wrapper .big {
	grid-column: span 2;
	grid-row: span 2;
}

.grid-wrapper .extra-padding-5 {
	padding: 5%;
}

.grid-wrapper .extra-padding-10 {
	padding: 10%;
}

.grid-wrapper .extra-padding-15 {
	padding: 15%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fade-in {
	opacity: 1;
	/* make things invisible upon start */
	/* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	animation: fadeIn ease-in 1;
	/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	animation-fill-mode: forwards;
	animation-duration: 1s;
}

span {
	display: inline-block;
	text-shadow: 0 0 0 rgb(0, 0, 0);
	animation: smoky 5s both;
	color: transparent;
	backface-visibility: hidden;
}

span:nth-child(even) {
	animation-name: smoky-mirror;
}


@keyframes smoky {
	60% {
		text-shadow: 0 0 40px black;
	}

	100% {
		transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
		text-shadow: 0 0 20px black;
		opacity: 0;
	}
}

@keyframes smoky-mirror {
	60% {
		text-shadow: 0 0 40px black;
	}

	100% {
		transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
		text-shadow: 0 0 20px black;
		opacity: 0;
	}
}

span:nth-of-type(1) {
	-webkit-animation-delay: 3.1s;
	animation-delay: 3.1s;
}

span:nth-of-type(2) {
	-webkit-animation-delay: 3.2s;
	animation-delay: 3.2s;
}

span:nth-of-type(3) {
	-webkit-animation-delay: 3.3s;
	animation-delay: 3.3s;
}

span:nth-of-type(4) {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
}

span:nth-of-type(5) {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

span:nth-of-type(6) {
	-webkit-animation-delay: 3.6s;
	animation-delay: 3.6s;
}

span:nth-of-type(7) {
	-webkit-animation-delay: 3.7s;
	animation-delay: 3.7s;
}

span:nth-of-type(8) {
	-webkit-animation-delay: 3.8s;
	animation-delay: 3.8s;
}

span:nth-of-type(9) {
	-webkit-animation-delay: 3.9s;
	animation-delay: 3.9s;
}

span:nth-of-type(10) {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

span:nth-of-type(11) {
	-webkit-animation-delay: 4.1s;
	animation-delay: 4.1s;
}

span:nth-of-type(12) {
	-webkit-animation-delay: 4.2s;
	animation-delay: 4.2s;
}

span:nth-of-type(13) {
	-webkit-animation-delay: 4.3s;
	animation-delay: 4.3s;
}

span:nth-of-type(14) {
	-webkit-animation-delay: 4.4s;
	animation-delay: 4.4s;
}

span:nth-of-type(15) {
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s;
}

span:nth-of-type(16) {
	-webkit-animation-delay: 4.6s;
	animation-delay: 4.6s;
}

span:nth-of-type(17) {
	-webkit-animation-delay: 4.7s;
	animation-delay: 4.7s;
}

span:nth-of-type(18) {
	-webkit-animation-delay: 4.8s;
	animation-delay: 4.8s;
}

span:nth-of-type(19) {
	-webkit-animation-delay: 4.9s;
	animation-delay: 4.9s;
}

span:nth-of-type(20) {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}

span:nth-of-type(21) {
	-webkit-animation-delay: 5.1s;
	animation-delay: 5.1s;
}

span:nth-of-type(22) {
	-webkit-animation-delay: 5.2s;
	animation-delay: 5.2s;
}

span:nth-of-type(23) {
	-webkit-animation-delay: 5.3s;
	animation-delay: 5.3s;
}

span:nth-of-type(24) {
	-webkit-animation-delay: 5.4s;
	animation-delay: 5.4s;
}

span:nth-of-type(25) {
	-webkit-animation-delay: 5.5s;
	animation-delay: 5.5s;
}

span:nth-of-type(26) {
	-webkit-animation-delay: 5.6s;
	animation-delay: 5.6s;
}

span:nth-of-type(27) {
	-webkit-animation-delay: 5.7s;
	animation-delay: 5.7s;
}

span:nth-of-type(28) {
	-webkit-animation-delay: 5.8s;
	animation-delay: 5.8s;
}

span:nth-of-type(29) {
	-webkit-animation-delay: 5.9s;
	animation-delay: 5.9s;
}

span:nth-of-type(30) {
	-webkit-animation-delay: 6.0s;
	animation-delay: 6.0s;
}

.rotate-2 {
	transform: rotate(2deg);
}

.rotate-2-counter {
	transform: rotate(-2deg);
}

.rotate-5 {
	transform: rotate(5deg);
}

.rotate-5-counter {
	transform: rotate(-5deg);
}

.rotate-10 {
	transform: rotate(10deg);
}

.rotate-10-counter {
	transform: rotate(-10deg);
}

.rotate-15 {
	transform: rotate(15deg);
}

.rotate-15-counter {
	transform: rotate(-15deg);
}