/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "Maxeville Construct";
  src: url("fonts/Maxeville-Construct.woff") format("woff"),
  		 url("fonts/Maxeville-Construct.woff2") format("woff2");
}

:root {
	--pink: #ff3399;
	--lightgray: #a3a3a3;
}

* {
	font-family: "Geist", sans-serif;
	font-size: 1.13em;
	font-weight: 700;
	font-style: normal;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body,
main {
	width: 100%;
	height: 100%;
}

h2 {
	font-family: "Maxeville Construct";
	font-weight: normal;
	line-height: 1;
	font-size: 4em;
	color: var(--pink);
	text-align: center;
	width: 8em;
	max-width: 80vw;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

h3 {
	font-family: "Maxeville Construct";
	font-weight: normal;
	font-size: 3em;
	line-height: 1.2;
}

img {
	width: 100%;
}

p,
ul {
	width: 100%;
	max-width: 40rem;
}

p {
	margin-bottom: 1em;
}

section {
	width: 100%;
	padding: 2em;
}

em {
	color: var(--pink);
}

i {
	font-style: italic;
}

li {
	list-style: disc;
}

a,
a:hover,
a:active,
a:focus {
	color: #000000;
	text-decoration: underline;
}

.centered {
	text-align: center;
}

.body-text-large {
	font-size: 2em;
	line-height: 1.2;
	width: 100%;
	max-width: 21.5em;
}

.body-text-small {
	font-size: 0.75em;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.maxeville-large {
	font-family: "Maxeville Construct";
	font-size: 3em;
	font-weight: normal;
	line-height: 1;
}

.faux-italic {
	font-style: oblique;
}

/* General */

header {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2em;
	display: flex;
	justify-content: space-between;
	z-index: 9;
}

#production {
	display: flex;
	justify-content: flex-end;
	width: 60%;
}

#production-wrapper {
	display: flex;
}

.production-credit {
	margin-right: 0.75em;
}

#BC-logo {
	width: 25em;
}

/* Landing */

#landing {
	background-color: #FFFFFF;
	width: 100vw;
	height: 100vh;
}

#AOH-title {
	width: 61.5vw;
	position: absolute;
	top: 2em;
	left: 2em;
	z-index: 9;
}

#AOH-artist {
	width: 66.9vw;
	position: absolute;
	bottom: 1em;
	right: 2em;
	z-index: 9;
}

.scroll-fade {
	position: relative;
}

img#cloud-one {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

/* Intro */

#intro {
	width: 100vw;
	display: flex;
	justify-content: center;
}

#intro p {
	margin-bottom: 5vh;
}

/* Render Image */

.render-sticky {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
}

#render-section {
	padding: 0;
	display: flex;
	justify-content: center;
	min-height: 150vh;
}

img#render-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(0.5);
	will-change: transform;
}

section#caption {
	padding: 0.5em 2em;
	color: var(--lightgray);
}

section#caption p {
	max-width: none;
}

/* About the Project */

section#about-the-project {
	padding-bottom: 0;
}

#about-the-project p {
	width: 50%;
	margin-bottom: 1em;
	padding-right: 1em;
	max-width: none;
}

#about-the-project p:nth-of-type(2) {
	margin-left: 50%;
	padding-left: 1em;
	padding-right: 0;
}

/* Whitney Quote */

#quote-group {
	padding: 2em 0;
	display: flex;
	border-top: 1px solid var(--lightgray);
	border-bottom: 1px solid var(--lightgray);
	opacity: 0;
	position: relative;
	top: 5em;
}

#quote-text {
	width: 50%;
	padding-right: 0.5em;
	hanging-punctuation: first;
}

#quote-image {
	width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fade {
  100% { 
  	opacity: 1;
  	top: 0;
  }
}

#quote-group.fadeIn {
  animation: fade 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#quote-image img {
	width: 80%;
}

/* Donate */

#donation-intro,
#donation-support {
	width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


#donation-intro .body-text-large {
	width: 100%;
	max-width: 15em;
}

#funding-progress {
	width: 100%;
	margin: 4em 0 2em 0;
}

.progress-background {
	width: 100%;
	height: 5em;
	border-radius: 20em;
	background-color: #e2e2e2;
}

.progress-relative {
	position: relative;
	top: -5em;
	height: 0px;
}

.progress {
	width: 10%;
	height: 5em;
	border-radius: 20em;
	background-color: var(--pink);
}

#funding-progress.animation .progress {
  animation: play 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.progress-text {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 1em;
	height: 8em;
}

@keyframes move {
  100% { 
  	width: calc(100% - 5em);
  }
}

@keyframes opacity {
  100% { 
  	opacity: 100;
  }
}

/*@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

@keyframes countUp {
  from {
    --num: 0;
  }
  to {
    --num: 184;
  }
}*/

/*.counter {
  transition: --num 3s;
  counter-reset: num var(--num);
  animation: countUp 3s steps(184) forwards; comment this out
}*/

/*#funding-progress.animation .counter {
  --num: 184;
}
.counter::after {
  content: counter(num);
}*/

.raised {
	color: var(--pink);
	opacity: 0;
	display: flex;
	justify-content: flex-end;
	width: 5em;
  /*max-width: 70vw;*/
}

@keyframes play {
  100% { 
  	width: 73.89%;
		/*
		To find width: 10 * (raised amount / total amount) + %
		Example: 10 * ((184,000 / 249,000) + vw
		         10 * 0.7389 + vw
		         73.89vw
		*/
  }
}

@media (min-width: 1200px) {
	.raised {
		padding-right: calc(26.11vw - 2rem - 5em);
		/*
		To find padding-right: 10 * (1 - (raised amount / total amount) ) + vw
		Example: 10 * (1 - (184,000 / 249,000) ) + vw
		         10 * (1 - 0.7389) + vw
		         10 * 0.2611 + vw
		         26.11vw
		*/
	}
}

#funding-progress.animation .raised {
  animation: move 3s, opacity 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.raised-inner {
	width: 5em;
}

.remaining {
	color: #b5b5b5;
	width: 5em;
}

.funding-date {
	color: #9e9e9e;
}

/* Table */

#donation-table {
	width: 100%;
	margin-top: 2em;
	margin-bottom: 3em;
}

#donation-table .title {
	color: #b5b5b5;
}

#donation-table .row-first {
	display: flex;
	align-items: flex-end;
	padding: 1rem 0 0.5rem 0;
	border-bottom: 1px solid var(--lightgray);
}

#donation-table .row {
	display: flex;
	padding: 1rem 0 3rem 0;
	border-bottom: 1px solid var(--lightgray);
	position: relative;
	top: 2em;
	opacity: 0;
}

#donation-table .row.fadeIn {
  animation: fade 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#donation-table p {
	width: 100%;
}

.tier-wrapper {
	width: 60%;
	display: flex;
	flex-direction: column;
}

.row-first .tier-wrapper {
	flex-direction: row;
}

.tier-text {
	display: flex;
}

.col-tier {
	width: 66%;
	padding-right: 0.5em;
}

.col-tier:not(.title) {
	color: var(--pink);
}

.col-amount {
	color: #000000;
	width: 33%;
}

.col-gift {
	width: 40%;
}

#donation-cta {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 4em;
}

#donation-cta .col-one {
	width: 25%;
}

#donation-cta .col-two {
	text-align: center;
	width: 50%;
	padding: 0 2em;
}

.donate-button {
	margin-top: 0.75em;
}

.donate-button a {
	display: inline-block;
	font-family: "Geist", sans-serif;
	font-size: 1.13rem;
	font-weight: 700;
	background-color: var(--pink);
	color: #FFFFFF;
	text-align: center;
	border-radius: 20em;
	cursor: pointer;
	text-decoration: none;
	padding: 0.25em 1.5em;
  -webkit-transition: background-color 150ms linear;
  -ms-transition: background-color 150ms linear;
  transition: background-color 150ms linear;
}

.donate-button a:hover {
  background-color: #000000;
}

#supporter-logos {
	display: flex;
	gap: 1em;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 40rem;
	margin-top: 2em;
	margin-bottom: 4em;
}

.supporter-logo#via {
	width: 18%;
}

.supporter-logo#warhol {
	width: 35%;
}

.supporter-logo#dlmf {
	width: 30%;
}

/* FAQ */

#faq-cloud {
	width: 100%;
	position: absolute;
	pointer-events: none;
	/*transform: rotate(180deg);*/
}

section#faq {
	background-color: var(--pink);
	padding: 0;
	padding-bottom: 4em;
}

#faq-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2em;
  padding-top: 30vw;
  position: relative;
  z-index: 99;
}

section#faq a,
section#faq a:active,
section#faq a:focus {
	color: #FFFFFF;
}

section#faq a:hover {
	color: #000000;
}

#faq h2 {
	color: #FFFFFF;
	margin: 0;
}

#question-list {
	width: 100%;
	margin-top: 4em;
}

.entry {
	padding: 1em 0;
	border-top: 1px solid #FFFFFF;
}

.entry:last-of-type {
	border-bottom: 1px solid #FFFFFF;
}

.question {
	display: flex;
	justify-content: space-between;
	color: #FFFFFF;
	cursor: pointer;
}

.question h3 {
	padding-right: 0.5em;
}

.question:hover,
.question.active {
	color: #000000;
}

.question:hover img {
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          filter: invert(100%);
}

.question.active img {
  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          filter: invert(100%);
  transform: rotate(45deg);
}

.toggle-icon {
	width: 2.1em;
	flex-shrink: 0;
}

.toggle-icon img {
	position: relative;
	top: 0.75em;
  transition: transform 0.2s ease-out;
}

.answer-wrapper {
	display: none;
}

.answer {
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	color: #FFFFFF;
	margin-top: 4em;
}

ul.image-grid {
	width: 100%;
	max-width: none;
	display: flex;
	justify-content: space-around;
	gap: 2em;
	margin: 2em 0;
}

.image-grid li.flex-item {
	list-style: none;
	align-self: flex-start;
	cursor: pointer;
}

.image-grid li.flex-item.active {
	flex: 0 0 50%;
}

.image-grid li.flex-item.inactive {
	opacity: 0.5;
}

#timeline {
	width: 100%;
	margin-top: 4em;
}

.timeline-entry {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 4em;
}

.timeline-year {
	margin-right: 2em;
}

.timeline-text {
	width: 50%;
}

.source {
	color: #000000;
}

section#faq .source a,
section#faq .source a:active,
section#faq .source a:focus {
	color: #000000;
}

section#faq .source a:hover {
	color: #FFFFFF;
}

/* Transition */

section#transition {
	display: flex;
	overflow: hidden;
	justify-content: center;
	padding: 0;
	background-color: var(--pink);
	margin: 0;
}

#transition-image {
	width: 50em;
	min-width: 100vw;
	height: auto;
}

/*#transition-layer {
	width: 100%;
	height: 35vh;
	background: #000000;
	background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}*/

/* Footer */

footer {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 5em 2em 2em 2em;
	background-color: #000000;
	color: #FFFFFF;
}

footer h3 {
	text-align: center;
	line-height: 1;
	margin-bottom: 1em;
	min-height: 2em;
}

#footer-two-col {
	width: 100%;
	max-width: 75em;
	display: flex;
	align-self: center;
}


#footer-two-col .col {
	padding-right: 1em;
	width: 50%;
}

#footer-two-col .col:nth-of-type(2) {
	padding-left: 1em;
	padding-right: 0;
}

#footer-contact {
	margin-top: 4em;
	width: 100%;
	text-align: center;
}

#footer-contact p {
	max-width: none;
}

footer a,
footer a:active,
footer a:focus {
	color: #FFFFFF;
}

footer a:hover {
	color: var(--pink);
}

/* ----------- Mobile ----------- */


@media (max-width: 1500px) {

#production-wrapper {
	flex-direction: column;
}

}

@media (max-width: 1200px) {

.col-tier {
	width: 60%;
}

.col-amount {
	width: 40%;
}

}

@media (max-width: 1000px) {

#AOH-title {
	top: 7em;
}

.tier-wrapper,
.tier-text {
	flex-direction: column;
}

.col-tier,
.col-amount {
	width: 100%;
	margin-bottom: 0.25em;
}

.donate-button {
	margin-top: 0.15em;
}

}

@media (max-width: 750px) {

#date-location {
	width: 10em;
}

}

@media (max-width: 1200px) and (min-aspect-ratio: 5/3) {

	header {
		padding: 1em;
		font-size: 0.8em;
	}

	#AOH-title {
		top: 1.5em;
	}

	#AOH-title img {
		width: 55.35vw; /* 61.5vw x 0.9 */
	}

	#AOH-artist {
		right: 0;
		bottom: 0.25em;
	}

	#AOH-artist img {
		width: 60.21vw; /* 66.9vw x 0.9 */
	}

}

/* Single Column */

@media (max-width: 700px) and (max-aspect-ratio: 1/1) {

	header {
	position: static;
	height: 0;
	padding: 0;
	}

	#date-location p,
	#production p,
	.production-credit {
		font-size: 1.5em;
		line-height: 1.15;
	}

	#date-location {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 2em;
		z-index: 99;
		text-align: center;
	}

	#production {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 2em;
		z-index: 99;
		justify-content: flex-start;
	}

	.production-credit {
		margin: 0 0 0.25em 0;
	}

	#production-wrapper a {
		display: block;
	}

	#production-wrapper {
		width: 100%;
		align-items: center;
	}

	#BC-logo {
	  width: 40em;
	  max-width: 90vw;
	}

	#AOH-title,
	#AOH-artist {
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	#AOH-title {
		top: 25vh;
	}

	#AOH-title img {
		width: 83.025vw; /* 61.5vw x 1.35 */
	}
	#AOH-artist {
		bottom: auto;
		top: calc(25vh + 50vw);
	}

	#AOH-artist img {
		width: 90.315vw; /* 66.9vw x 1.35 */
	}

}

@media (max-width: 700px) {

* {
	font-size: 0.75rem;
}

p,
ul,
.production-credit {
	font-size: 1.17em;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

h2 {
	margin-top: 0.5em;
}

section#intro {
	padding-bottom: 4em;
}

#intro p {
	margin-bottom: 2em;
}

#render-section {
	min-height: auto;
}

.render-sticky {
	top: 50vh;
	height: 50vh;
}

#about-the-project p {
	width: 100%;
	padding: 0;
	margin-bottom: 1em;
}

#about-the-project p:nth-of-type(2) {
	margin-left: 0;
	padding: 0;
	margin-bottom: 1em;
}

#quote-group {
	flex-direction: column;
}

#quote-text {
	width: 100%;
	padding-right: 0;
	margin-bottom: 4em;
}

#quote-text p {
	margin-bottom: 0.5em;
}

#quote-image {
	width: 100%;
}

#quote-image img {
	width: 100%;
}

/* Donation */

#donation-table {
	margin-bottom: 1em;
}

#donation-table .row-first {
	display: none;
}

#donation-table .row.begin {
	border-top: 1px solid var(--lightgray);
}

#donation-table .row {
	flex-direction: column;
	padding: 1rem 0 1.5rem 0;
}

.tier-wrapper,
.tier-text {
	width: 100%;
}

.tier-wrapper {
	margin-bottom: 0.5em;
}

.col-tier,
.col-amount,
.col-gift {
	width: 100%;
	margin-bottom: 0.25em;
}

.donate-button {
	margin-top: 0;
}

.col-tier .maxeville-large {
	margin-bottom: 0.15em;
}

.col-gift {
	margin-top: 1em;
}

#donation-cta {
	flex-direction: column;
}

#donation-cta .col-one,
#donation-cta .col-two {
	width: 100%;
}

#donation-cta .col-one {
	margin-bottom: 2em;
}

a#donate-button {
	display: block;
}

.question,
.timeline-year {
	font-size: 0.65em;
}

.question h3 {
	padding-right: 1em;
}

.answer {
	margin-top: 1em;
}

ul.image-grid {
	flex-direction: column;
}

.image-grid li.flex-item {
	cursor: auto;
}

.image-grid li.flex-item.active {
	flex: 0 0 100%;
}

.image-grid li.flex-item.inactive {
	opacity: 1;
}

#timeline {
	margin-top: 2em;
}

.timeline-year {
	width: 10em;
}

.timeline-text {
	width: auto;
}

.timeline-entry {
	margin-bottom: 2em;
}

#footer-two-col {
	flex-direction: column;
}

#footer-two-col .col {
	padding-right: 0;
	width: 100%;
	margin-bottom: 4em;
}

#footer-two-col .col:nth-of-type(2) {
	padding-left: 0;
}

footer h3 {
	min-height: auto;
	margin-bottom: 0.5em;
}

#footer-contact {
	margin-top: 0;
}

}

@media (max-width: 500px) {

#funding-progress {
	margin-top: 2em;
}

#funding-progress .maxeville-large {
	font-size: 2em;
}

.progress-text {
	height: 6em;
}

.timeline-entry {
	flex-direction: column;
}

.timeline-year {
	width: 100%;
	margin: 0;
	margin-bottom: 1em;
	font-size: 1em;
	text-align: center;
}

#transition-image {
	min-width: 150vw;
}

}