/* general spacing & setup */

body {
  width: 100%;
  height: 100vh;
}

.info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding: 2% 0 2% 0;
}

.halo {
width: 800px;
height: 100px;
border-radius: 100%;
border: 5px solid rgba(255, 159, 238, 0.27);
  position: relative;
  z-index: -10;
}

.info-text {
  align-self: center;
}

.info p {
  position: relative;
  z-index: 50;
  width: 800px;
  margin: 0 0 0 -800px;
  margin-top: 0px;
  text-align: center;
  font-size: 42px;
  font-family: garamond-premier-pro-display, serif;
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
}

.wing-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.wing-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  margin-right: 5%;
  padding: 10px;
}

.wing-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  padding: 10px;
}

a {
  color: #9D03FF;
  text-decoration: underline;
}

a:hover {
  color: #D14FE8;
  text-decoration: underline;
}

/*title card and disclaimer */

#title-card {
  display: flex;
  flex-direction: column;
  width: 80vw;
  margin: 2vh 10vw 2vh 10vw;
}

p.disclaimer {
  font-size: 28px;
  font-family: garamond-premier-pro-display, serif;
  font-weight: 400;
  text-align: center;
}

/* waiting room */

#waiting-room {
  height: 65vh;
  width: 90vw;
  margin: 2vh 5vw 2vh 5vw;
  overflow: hidden;
}

#waiting-room video {
  width: 100%;
  object-fit: cover;
}

/* creepy class */

#class-participant {
  overflow: hidden;
  height: 40vh;
}

#class-cyborg {
  width:100%;
/*  width: 480;
  height: 300;*/
}

#creepyKate1-vid {
  display: block;
  margin: auto;
  width: 480px;
  height: 300px;
  align-self: center;
}

#creepyKate2-vid {
  display: block;
  margin: auto;
  width: 480px;
  height: 300px;
  align-self: center;
}

#creepyKate3-vid {
  display: block;
  margin: auto;
  width: 480px;
  height: 300px;
  align-self: center;
}

#creepyKate1-vid-new {
  display: block;
  margin: auto;
  width: 480px;
  height: 300px;
  align-self: center;
}

#creepyKate2-vid-new {
  display: block;
  margin: auto;
  width: 480px;
  height: 300px;
  align-self: center;
}

#creepyKate3-vid-new {
  display: block;
  margin: auto;
  width: 480px;
  height: 300px;
  align-self: center;
}

canvas {
  padding-left: 0;
  padding-right: 0;
  margin: auto;
  display: block;
}

/* creepy mini-performance / fracture: 2 even wing shards */

#invisi-wall.wing-container {
  position: absolute;
  z-index: 0;
}

#minishow-participant {
  height: 40vh;
  background-color: #FF9FEE;
  padding: 0;
  animation: left-aud 3s infinite;
  clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%);
  overflow: hidden;
}

@keyframes left-aud {
  0% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
  50% { clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 45% 55%); }
  100% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
}

#replay-video {
  object-fit: cover;
}

#minishow-cyborg {
  height: 40vh;
  background-color: #FF9FEE;
  padding: 0;
  animation: right-borg 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
  overflow: hidden;
}

@keyframes right-borg {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

/* full wing spread spacing & animations */

#wall.wing-container {
  position: relative;
  z-index: 100;
}

#wall-transition.wing-container {
  position: relative;
  z-index: 100;
}

.wing-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  margin-right: 5%;
  padding: 10px;
}

.wing-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  padding: 10px;
}

.wing-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.wing-segment {
  width: 100%;
  height: 16vh;
  margin: 10px;
  overflow: hidden;
  background-color: #FF9FEE;
}

video {
  width: 100%;
  object-fit: cover;
}

#wing-left-3 video {
  width: 115% !important;
}

#wing-left-1 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(-5deg);
  animation: left-polygon1 3s infinite;
  clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%);
}

@keyframes left-polygon1 {
  0% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
  50% { clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 45% 55%); }
  100% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
}

#wing-left-2 {
  padding: 0;
  margin: 0 0 0 -5vw;
  width: 100%;
  animation: left-polygon2 3s infinite;
  clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%);
}

@keyframes left-polygon2 {
  0% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
  50% { clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 45% 55%); }
  100% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
}

#wing-left-3 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(-15deg);
  animation: left-polygon3 3s infinite;
  clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%);
}

@keyframes left-polygon3 {
  0% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
  50% { clip-path: polygon(0% 0%, 55% 35%, 100% 100%, 50% 60%); }
  100% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
}

#wing-left-4 {
  padding: 0;
  margin: 0 0 0 2vw;
  width: 100%;
  transform: rotate(-10deg);
  animation: left-polygon4 3s infinite;
  clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%);
}

@keyframes left-polygon4 {
  0% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
  50% { clip-path: polygon(0% 0%, 55% 35%, 100% 100%, 50% 60%); }
  100% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
}

#wing-left-4 video {
  transform: rotate(2deg);
  width: 150%;
}

#wing-left-5 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(-2deg);
  animation: left-polygon5 3s infinite;
  clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%);
}

@keyframes left-polygon5 {
  0% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
  50% { clip-path: polygon(0% 0%, 55% 35%, 100% 100%, 50% 60%); }
  100% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
}

#wing-left-5 video {
  width: 130%;
  transform: rotate(5deg)
}

#wing-left-6 {
  padding: 0;
  margin: 0 -6vh 0 0;
  width: 100%;
  transform: rotate(2deg);
  animation: left-polygon6 3s infinite;
  clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%);
}

@keyframes left-polygon6 {
  0% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 45% 50%, 100% 20%, 50% 75%); }
  100% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
}

#wing-left-6 video {
  width: 115%;
}

#wing-left-7 {
  padding: 0;
  margin: 0 -5vh 0 0;
  width: 100%;
  transform: rotate(4deg);
  animation: left-polygon7 3s infinite;
  clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%);
}

@keyframes left-polygon7 {
  0% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 45% 50%, 100% 20%, 50% 75%); }
  100% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
}

#wing-left-7 video {
  width: 115%;
}

#wing-left-8 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(2deg);
  animation: left-polygon8 3s infinite;
  clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%);
}

@keyframes left-polygon8 {
  0% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 45% 50%, 100% 20%, 50% 75%); }
  100% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
}

#wing-left-8 video {
  width: 115%;
}

#wing-right-1 {
  padding: 0;
  margin: 0;
  width: 100%;
  animation: right-polygon1 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon1 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#wing-right-2 {
  padding: 0;
  margin: 0 0 0 -5vw;
  width: 100%;
  transform: rotate(5deg);
  animation: right-polygon2 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon2 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#wing-right-3 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(2deg);
  animation: right-polygon3 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon3 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#wing-right-3 video {
  width: 150%;
  transform: rotate (-5deg);
}

#wing-right-4 {
  padding: 0;
  margin: 0 0 0 -1vw;
  width: 100%;
  transform: rotate(10deg);
  animation: right-polygon4 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon4 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#wing-right-4 video {
  width: 150%;
  transform: rotate (-10deg);
}

#wing-right-5 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(13deg);
  animation: right-polygon5 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon5 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#wing-right-5 video {
  width: 150%;
  transform: rotate (-25deg);
}

#wing-right-6 {
  padding: 0;
  margin: 0;
  width: 100%;
  animation: right-polygon6 3s infinite;
  clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%);
}

@keyframes right-polygon6 {
  0% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
  50% { clip-path: polygon(0% 20%, 50% 45%, 100% 100%, 50% 75%); }
  100% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
}

#wing-right-6 video {
  width: 130%;
  transform: rotate(10deg);
}

#wing-right-7 {
  padding: 0;
  margin: 0 0 0 -5vh;
  width: 100%;
  transform: rotate(-4deg);
  animation: right-polygon7 3s infinite;
  clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%);
}

@keyframes right-polygon7 {
  0% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
  50% { clip-path: polygon(0% 20%, 50% 45%, 100% 100%, 50% 75%); }
  100% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
}

#wing-right-7 video {
  width: 130%;
  transform: rotate(45deg);
}

#wing-right-8 {
  padding: 0;
  margin: 0 0 0 -6vh;
  width: 100%;
  transform: rotate(-2deg);
  animation: right-polygon8 3s infinite;
  clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%);
}

@keyframes right-polygon8 {
  0% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
  50% { clip-path: polygon(0% 20%, 50% 45%, 100% 100%, 50% 75%); }
  100% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
}

#wing-right-8 video {
  width: 120%;
  transform: rotate (25deg);
}

#in-wing-left-1 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(-5deg);
  animation: left-polygon1 3s infinite;
  clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%);
}

@keyframes left-polygon1 {
  0% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
  50% { clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 45% 55%); }
  100% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
}

#in-wing-left-2 {
  padding: 0;
  margin: 0 0 0 -5vw;
  width: 100%;
  animation: left-polygon2 3s infinite;
  clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%);
}

@keyframes left-polygon2 {
  0% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
  50% { clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 45% 55%); }
  100% { clip-path: polygon(0% 0%, 60% 20%, 100% 100%, 45% 80%); }
}

#in-wing-left-3 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(-15deg);
  animation: left-polygon3 3s infinite;
  clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%);
}

@keyframes left-polygon3 {
  0% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
  50% { clip-path: polygon(0% 0%, 55% 35%, 100% 100%, 50% 60%); }
  100% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
}

#in-wing-left-3 video {
  width: 140%;
}

#in-wing-left-4 {
  padding: 0;
  margin: 0 0 0 2vw;
  width: 100%;
  transform: rotate(-10deg);
  animation: left-polygon4 3s infinite;
  clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%);
}

@keyframes left-polygon4 {
  0% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
  50% { clip-path: polygon(0% 0%, 55% 35%, 100% 100%, 50% 60%); }
  100% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
}

#in-wing-left-4 video {
  transform: rotate(2deg);
  width: 150%;
}

#in-wing-left-5 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(-2deg);
  animation: left-polygon5 3s infinite;
  clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%);
}

@keyframes left-polygon5 {
  0% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
  50% { clip-path: polygon(0% 0%, 55% 35%, 100% 100%, 50% 60%); }
  100% { clip-path: polygon(0% 0%, 65% 30%, 100% 100%, 40% 80%); }
}

#in-wing-left-5 video {
  width: 130%;
  transform: rotate(5deg)
}

#in-wing-left-6 {
  padding: 0;
  margin: 0 -6vh 0 0;
  width: 100%;
  transform: rotate(2deg);
  animation: left-polygon6 3s infinite;
  clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%);
}

@keyframes left-polygon6 {
  0% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 45% 50%, 100% 20%, 50% 75%); }
  100% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
}

#in-wing-left-6 video {
  width: 115%;
}

#in-wing-left-7 {
  padding: 0;
  margin: 0 -5vh 0 0;
  width: 100%;
  transform: rotate(4deg);
  animation: left-polygon7 3s infinite;
  clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%);
}

@keyframes left-polygon7 {
  0% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 45% 50%, 100% 20%, 50% 75%); }
  100% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
}

#in-wing-left-7 video {
  width: 115%;
}

#in-wing-left-8 {
  padding: 0;
  margin: 0;
  width: 100%;
  transform: rotate(2deg);
  animation: left-polygon8 3s infinite;
  clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%);
}

@keyframes left-polygon8 {
  0% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 45% 50%, 100% 20%, 50% 75%); }
  100% { clip-path: polygon(0% 100%, 45% 30%, 100% 20%, 65% 80%); }
}

#in-wing-left-8 video {
  width: 115%;
}

#in-wing-right-1 {
  padding: 0;
  margin: 0;
  width: 110%;
  animation: right-polygon1 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon1 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#in-wing-right-2 {
  padding: 0;
  margin: 0 0 0 -5vw;
  width: 110%;
  transform: rotate(5deg);
  animation: right-polygon2 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon2 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#in-wing-right-3 {
  padding: 0;
  margin: 0;
  width: 110%;
  transform: rotate(2deg);
  animation: right-polygon3 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon3 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#in-wing-right-3 video {
  width: 150%;
  transform: rotate (-5deg);
}

#in-wing-right-4 {
  padding: 0;
  margin: 0 0 0 -1vw;
  width: 110%;
  transform: rotate(10deg);
  animation: right-polygon4 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon4 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#in-wing-right-4 video {
  width: 150%;
  transform: rotate (-10deg);
}

#in-wing-right-5 {
  padding: 0;
  margin: 0;
  width: 110%;
  transform: rotate(13deg);
  animation: right-polygon5 3s infinite;
  clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%);
}

@keyframes right-polygon5 {
  0% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
  50% { clip-path: polygon(0% 100%, 55% 35%, 100% 5%, 60% 55%); }
  100% { clip-path: polygon(0% 100%, 40% 30%, 100% 0%, 65% 80%); }
}

#in-wing-right-5 video {
  width: 150%;
  transform: rotate (-25deg);
}

#in-wing-right-6 {
  padding: 0;
  margin: 0;
  width: 110%;
  animation: right-polygon6 3s infinite;
  clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%);
}

@keyframes right-polygon6 {
  0% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
  50% { clip-path: polygon(0% 20%, 50% 45%, 100% 100%, 50% 75%); }
  100% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
}

#in-wing-right-6 video {
  width: 130%;
  transform: rotate(10deg);
}

#in-wing-right-7 {
  padding: 0;
  margin: 0 0 0 -5vh;
  width: 110%;
  transform: rotate(-4deg);
  animation: right-polygon7 3s infinite;
  clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%);
}

@keyframes right-polygon7 {
  0% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
  50% { clip-path: polygon(0% 20%, 50% 45%, 100% 100%, 50% 75%); }
  100% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
}

#in-wing-right-7 video {
  width: 130%;
  transform: rotate(45deg);
}

#in-wing-right-8 {
  padding: 0;
  margin: 0 0 0 -6vh;
  width: 110%;
  transform: rotate(-2deg);
  animation: right-polygon8 3s infinite;
  clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%);
}

@keyframes right-polygon8 {
  0% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
  50% { clip-path: polygon(0% 20%, 50% 45%, 100% 100%, 50% 75%); }
  100% { clip-path: polygon(0% 20%, 60% 30%, 100% 100%, 45% 85%); }
}

#in-wing-right-8 video {
  width: 120%;
  transform: rotate (25deg);
}

/* bottom area questions & emoji buttons */

.voting {
  display: block;
  width: 100%;
  padding: 1% 0 2% 0;
}

.vote-text p {
  width: 100%;
  font-size: 28px;
  font-family: garamond-premier-pro-display, serif;
  font-weight: 400;
  font-style: italic;
  text-align: center;
}

.credit-text {
  font-size: 21px;
  font-family: garamond-premier-pro-display, serif;
  font-weight: 400;
  text-align: center;
}

.vote-emoji {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.emoji-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.emoji-item button {
  width: 80px !important;
    height: 80px;
    border: none;
    background: #ffffff;
    box-shadow: 5px 10px 18px #b5b5b5;
    font-size: 28px;
    cursor: pointer;
    margin: 0 25px 0 25px;
}

.emoji-item button:hover {
    box-shadow: 5px 10px 18px #888888;
}

.text-button button {
  padding: 15px;
    border: none;
    background: #ffffff;
    box-shadow: 5px 10px 18px #b5b5b5;
    font-size: 28px;
    cursor: pointer;
    margin: 0 25px 0 25px;
    font-family: garamond-premier-pro-display, serif;
    font-weight: 400;
    font-style: italic;
    text-align: center;
}

.text-button button:hover {
    box-shadow: 5px 10px 18px #888888;
}

/*page control*/

#start-frac {
  display: none;
}

#myFace2 {
  display: none;
}

#myFace3 {
  display: none;
}


#instrPage {
  display: none;
}

#creepyClassPage {
  display: none;
}

#creditsPage {
  display: none;
}

#creepyKate2 {
  display: none;
}

#creepyKate3 {
  display: none;
}

#creepyButton1 {
  display: none;
}

#creepyButton2 {
  display: none;
}

#creepyButton3 {
  display: none;
}

#creepyPerfPage {
  display: none;
}

#finish-class {
  display: none;
}

#fracture1 {
  display: none;
}

#fracture2 {
  display: none;
}

#fracture0b {
  display: none;
}

#fracture0c {
  display: none;
}

#mid-frac {
  display: none;
}

#end-frac {
  display: none;
}

#performancePage {
  display: none;
}

#rosiePage {
  display: none;
}

#finalePage {
  display: none;
}

/*fracture control*/

#in-wing-left-1-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-left-2-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

#in-wing-left-3-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-left-4-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-left-5-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-left-6-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

#in-wing-left-7-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

#in-wing-left-8-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-right-1-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  /* animation: none; */
}

#in-wing-right-2-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-right-3-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-right-4-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-right-5-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

#in-wing-right-6-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-right-7-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none;
}

#in-wing-right-8-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

#fracture0d-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

#minishow-participant-invis {
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
  animation: none; 
}

/* misc things that need to be hidden */

#really-end-frac {
  display: none;
}

#part2 {
  display: none;
}

#replay1hide {
  display: none;
}

#replay2hide {
  display: none;
}

#replay3hide {
  display: none;
}

#replay4hide {
  display: none;
}

#replay5hide {
  display: none;
}

#replay6hide {
  display: none;
}

#replay7hide {
  display: none;
}

#creepyKate1-wait {
  display: none;
}

#creepyKate2-wait {
  display: none;
}

#creepyKate3-wait {
  display: none;
}

#credits-option {
  display: none;
}