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

body {
  background-color: black;
  /* opacity: 0; */
}

main {
  opacity: 0;
}

.is-loaded main {
  transition: 2s;
  opacity: 1;
}

html, body, h1, h2, h3, h4, h5, button {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 0.2em;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
}

div.loading-screen {
  background-color: black;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: 2s;
}

.loading-screen h2 {
  margin-top: -1.5%;
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
}

.is-loaded div.loading-screen {
  visibility: hidden;
  max-height: 0;
  opacity: 0;
}

p, span {
  letter-spacing: 0.1em;
}

p.blockquote {
  margin-left: 3em;
}

h1 {
  font-size: 1.2rem;
  text-align: center;
  text-transform: lowercase;
}

.exhibition-info h1 {
  line-height: 1.1em;
  padding-bottom: 0.5em;
}

.bold {
  font-weight: 600;
}

/* Titles */
.title-immortal {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.title-immortal h1 {
  font-size: 2rem;
}

.title-home {
  position: relative;
  z-index: 50;
  font-size: 2.4vw;
}

.title-home div {
  display: inline;
}

.title-home-2 {
  white-space: nowrap;
}

h2 {
  font-size: 0.8rem;
  text-align: center;
}

/* Links */
a {
  text-decoration: none;
  border: 0;
}

.overlay-content p {
  text-shadow: 0 0 10px #fff, 0 0 20px #0030f3, 0 0 30px #0030f3;
}

.overlay-content a {
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
}

ul {
  list-style-type: none;
  display: inline-block;
}

li {
  padding: 1rem;
}

button {
  outline: none;
}

button.w3-button:hover {
  color: rgba(255, 255, 255, 1) !important;
  background-color: transparent !important;
}

iframe {
  min-height: 40vh;
}

/* Layout */
section.w3-row {
  transition: opacity 2s;
  background-color: black;
}

section {
  position: relative;
}

section.full-section {
  height: 100vh;
}

.row-wrapper {
  display: block;
  overflow: auto;
  min-height: 200vh;
}

.left-col {
  position: relative;
  padding-left: 2%;
  padding-right: 1%;
}

.right-col {
  padding-right: 3%;
}

.w3-row::after {
  content: inherit !important;
}

.w3-row::before {
  content: inherit !important;
}

.right-col, .left-col {
  padding-top: 5vh;
  padding-bottom: 50vh;
  vertical-align: top;
}

.mobile .exhibition-info {
  text-align: center;
}

.w3-col.mobile {
  position: relative;
  z-index: 9000;
}

/* Overlay */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  opacity: 0;
  position: fixed;
  /* Stay in place */
  z-index: 2000;
  /* Sit on top */
  right: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  scroll-behavior: smooth;
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  width: 100%;
  /* 100% width */
  top: 10%;
  text-align: center;
  /* Centered text/links */
  margin-bottom: 5%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.overlay::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.overlay {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
}

/* Firefox */
.openBtn {
  font-size: 0.9rem;
  text-align: right;
  transition: 0.5s;
}

.openBtn::before {
  content: "\f053";
  font-family: fontawesome;
  opacity: 0.8;
}

.mobile .openBtn {
  padding-bottom: 0;
  padding-top: 2%;
}

.overlay .closeBtn {
  font-size: 40px;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 1001;
}

.process-content {
  margin: 0 auto;
  width: 80%;
}

.process-content .stacked-gallery {
  margin-top: -7%;
  padding-top: 0;
  padding-bottom: 5%;
}

/* Testimonial overlay */
div.testimonial-wrapper p {
  opacity: 0.9;
  text-align: left;
  font-size: 1.3rem;
  text-shadow: 0 0 20px #0030f3, 0 0 30px #0030f3;
}

div.testimonial-wrapper h1 {
  text-align: left;
  font-size: 2rem;
  text-transform: capitalize;
}

div.testimonial-wrapper p, div.testimonial-wrapper h1, div.testimonial-wrapper h2, div.testimonial-wrapper a {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

div.testimonial-wrapper a {
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
}

div.testimonial-wrapper {
  margin: 3% 25% 10% 25%;
}

/* Testimonial on page */
div.testimonial-onpage {
  text-shadow: 0 0 10px #0030f3, 0 0 15px #0030f3;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin: 3% 20% 0 20%;
}

/* Stacked gallery */
.stacked-gallery {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
  grid-row-gap: 0;
  padding-top: 10%;
}

.image-stack__item {
  pointer-events: none;
}

.stacked-gallery img, .stacked-gallery iframe {
  width: 100%;
  display: block;
  position: relative;
  pointer-events: auto;
  transition: transform 0.5s;
}

.zoom:hover {
  z-index: 1000;
  transform: scale(1.3);
}

.row-1 {
  grid-row: 1;
}

.row-2 {
  grid-row: 2;
  margin-top: -40%;
}

.row-3 {
  grid-row: 3;
  margin-top: -40%;
}

.row-4 {
  grid-row: 4;
  margin-top: -40%;
}

.row-5 {
  grid-row: 5;
  margin-top: -40%;
}

.row-6 {
  grid-row: 6;
  margin-top: -40%;
}

.i1 {
  grid-column: 4 / -2;
}

.i2 {
  grid-column: 1 / span 8;
}

.i3 {
  grid-column: 5 / span 8;
}

.i4 {
  grid-column: 2 / span 10;
}

.i5 {
  grid-column: 8 / span 3;
}

.i6 {
  grid-column: 2 / span 9;
}

.i7 {
  grid-column: 9 / span 4;
}

.i8 {
  grid-column: 1 / span 3;
}

.i9 {
  grid-column: 1 / span 12;
}

.i10 {
  grid-column: span 4 / -1;
}

.padding-top-15 {
  padding-top: 15%;
}

.padding-top-20 {
  padding-top: 20%;
}

.padding-bottom-20 {
  padding-bottom: 20%;
}

.padding-top-35 {
  padding-top: 35%;
}

.padding-top-50 {
  padding-top: 50%;
}

.padding-bottom-50 {
  padding-bottom: 50%;
}

.padding-top-70 {
  padding-top: 70%;
}

.padding-bottom-70 {
  padding-bottom: 70%;
}

.padding-top-90 {
  padding-top: 90%;
}

.padding-top-110 {
  padding-top: 110%;
}

.padding-bottom-110 {
  padding-bottom: 110%;
}

.padding-top-130 {
  padding-top: 130%;
}

.padding-top-160 {
  padding-top: 160%;
}

.padding-bottom-160 {
  padding-bottom: 160%;
}

.padding-top-200 {
  padding-top: 200%;
}

.padding-bottom-200 {
  padding-bottom: 200%;
}

.w30 {
  width: 30%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w70 {
  width: 70%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.top {
  z-index: 3;
}

.middle {
  z-index: 2;
}

.bottom {
  z-index: 1;
}

/* Enter text on home */
.enter-text-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enter-text {
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 10%;
  align-self: flex-end;
  max-width: 50%;
  opacity: 0.8;
  transition: 0.5s;
  z-index: 2000;
}

.enter-text:hover {
  opacity: 1;
  font-size: 1rem;
}

.enter-text::after {
  content: "\f054";
  font-family: fontawesome;
}

/* Slider */
.home .slide-wrap {
  position: absolute;
  margin: 0 auto;
  transition: 1s;
}

.slideshow {
  position: relative;
  z-index: 10;
}

.home .slide-content {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.slide-wrap {
  position: relative;
  margin: 0 auto;
  transition: 300ms;
}

.slide-content img {
  max-height: 23em;
}

.slide-entry {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: 300ms;
}

.home .slide-entry {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: 2s;
}

.slide-entry.active {
  opacity: 1;
  visibility: visible;
}

.slide-caption {
  position: absolute;
  bottom: 5%;
  width: 100vw;
  padding: 0 5em 0 5em;
  font-size: 0.8rem;
  opacity: 0;
  transition: 1.3s;
  font-weight: 600;
}

.show {
  opacity: 1;
  display: block;
}

.slide-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 50%;
  transform: translateY(-60%);
  width: 100%;
  list-style: none;
  padding: 0;
  z-index: 50;
}

.slide-nav li {
  cursor: pointer;
}

.slide-nav li#prev-slide::before {
  content: "\f053";
  font-family: fontawesome;
  font-size: 22px;
}

.slide-nav li#next-slide::before {
  content: "\f054";
  font-family: fontawesome;
  font-size: 22px;
}

/* Scroll indicator */
#scroll-indicator {
  position: absolute;
  bottom: 30%;
  left: 50%;
  margin-left: -30px;
  font-size: 0.6rem;
  text-transform: uppercase;
  opacity: 0.5;
}

.down-arrow::after {
  content: "\f078";
  font-family: fontawesome;
  text-align: center;
  margin-bottom: 2em;
  display: block;
}

/* Curatorial statement link */
.curatorial-link {
  margin-top: 5vh;
  font-size: 1rem;
  opacity: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.5s;
}

.curatorial-link:hover {
  opacity: 1;
}

/* Download PDF link on curatorial statement page */
.pdf-link {
  font-size: 0.6rem;
  opacity: 0.6;
  text-transform: uppercase;
  text-align: left;
  transition: 0.5s;
}

.pdf-link:hover {
  opacity: 1;
}

/* Curatorial statement link on home */
.curatorial-home {
  text-align: left;
}

/*Curatorial statement link on Immortal Uterus */
.curatorial-immortal {
  margin-top: 5vh;
  font-size: 0.6rem;
  opacity: 0.6;
  text-transform: uppercase;
  text-align: center;
}

/* Curatorial statement */
.separator {
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
  width: 10em;
  opacity: 0.4;
  border-bottom: 0.01em solid white;
  margin: 0 auto;
}

.attribution {
  font-family: 'Reenie Beanie', sans-serif;
  letter-spacing: normal;
  color: white;
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
  font-size: 1.3rem;
  opacity: 0.7;
  color: white;
}

.content.curatorial-content {
  margin: 4% 10% 0 10%;
  letter-spacing: normal;
}

.curatorial-text {
  margin-right: 10%;
  margin-left: 3%;
  margin-bottom: 10%;
}

/* Back link */
.back {
  position: fixed;
  padding: 3em 1em 3em 1em;
  font-size: 0.8rem;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.back::before {
  content: "\f053";
  font-family: fontawesome;
  padding-right: 0.8em;
}

/* Member list */
.member-list {
  z-index: 50;
  position: relative;
  margin-left: 30%;
  margin-top: 2em;
  margin-bottom: 10%;
}

.member {
  display: flex;
}

/* Home content */
.content-home {
  padding: 2em 2em 0 2em;
  transition: 1.3s;
}

.content-home p {
  letter-spacing: 0.1em;
}

/* Home overlay */
.overlay-home {
  -webkit-animation: color 3s ease-in-out infinite alternate;
  animation: color 3s ease-in-out infinite alternate;
  transition: 1s;
  /* background-color: rgba(38, 83, 255, 0); */
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0;
  z-index: 40;
  cursor: pointer;
}

.overlay-home:hover {
  opacity: 1;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

/* Animations */
.glow {
  font-weight: 600;
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
}

/* Animation keyframes */
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0030f3, 0 0 40px #0030f3, 0 0 50px #0030f3, 0 0 60px #0030f3, 0 0 70px #0030f3;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #2653ff, 0 0 40px #2653ff, 0 0 50px #2653ff, 0 0 60px #2653ff, 0 0 70px #2653ff, 0 0 80px #2653ff;
  }
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0030f3, 0 0 40px #0030f3, 0 0 50px #0030f3, 0 0 60px #0030f3, 0 0 70px #0030f3;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #2653ff, 0 0 40px #2653ff, 0 0 50px #2653ff, 0 0 60px #2653ff, 0 0 70px #2653ff, 0 0 80px #2653ff;
  }
}

@-webkit-keyframes color {
  from {
    background-color: rgba(38, 83, 255, 0.3);
    ;
  }

  to {
    background-color: rgba(80, 0, 46, 0.3);
  }
}

@keyframes color {
  from {
    background-color: rgba(38, 83, 255, 0.3);
    ;
  }

  to {
    background-color: rgba(80, 0, 46, 0.3);
  }
}

.audio-control {
  position: sticky;
  padding: 1em 0 0 1em;
  z-index: 4000;
  width: 20%;
}

.audio-control i {
  opacity: 0.4;
  transition: 0.5s;
}

.audio-message {
  font-size: 0.6rem;
  opacity: 0.6;
  text-transform: uppercase;
  padding-top: 2em;
}

audio {
  display: none;
}

@media only screen and (max-width: 1000px) {
  .left-col, .container {
    padding: 0;
  }

  .middle-col {
    padding: 4em 3em 0 3em;
  }

  .openBtn::before {
    display: none;
  }

  .openBtn {
    text-align: center;
    -webkit-animation: glow 3s ease-in-out infinite alternate;
    animation: glow 3s ease-in-out infinite alternate;
  }

  .closeBtn {
    width: 5em;
    height: 5em;
    cursor: pointer;
  }

  .left-buttons {
    padding-top: 1em;
  }

  div.testimonial-wrapper {
    margin: 3% 10% 10% 10%;
  }

  .enter-text {
    margin-bottom: 20%;
  }

  .w3-col.middle-col {
    padding-top: 0;
  }

  .stacked-gallery {
    padding-top: 0;
  }

  .exhibition-info {
    padding-bottom: 20%;
  }

  div.testimonial-onpage {
    margin: 0 5% 0 5%;
  }
}

@media only screen and (max-width: 650px) {
  .title-home {
    font-size: 1rem;
  }

  .member-list {
    margin: 0 auto;
    margin-bottom: 10%;
  }

  .content-home {
    font-size: 0.8rem;
  }

  .curatorial-text {
    margin-left: 0;
  }

  .overlay-content {
    margin-top: -10%;
  }

  .process-content .stacked-gallery {
    max-width: 100%;
    margin-top: -15%;
  }

  .process-content .stacked-gallery .i1, .process-content .stacked-gallery .i2,
  .process-content .stacked-gallery .i3, .process-content .stacked-gallery .i4,
  .process-content .stacked-gallery .i5, .process-content .stacked-gallery .i6,
  .process-content .stacked-gallery .i7, .process-content .stacked-gallery .i8 {
    width: 100%;
  }

  .process-content .stacked-gallery .i5 {
    padding-top: 110%;
    grid-column: 5 / span 7;
  }

  .process-content .stacked-gallery .i7 {
    padding-top: 80%;
    grid-column: 6 / span 7;
  }

  .process-content .stacked-gallery .i8 {
    padding-top: 50%;
    grid-column: 1 / span 5;
  }
}

@media (hover: none) {
  .overlay-home {
    opacity: 1;
  }

  .slide-caption {
    display: block;
    opacity: 1;
  }
}