html.theater-is-open {
  overflow: hidden;
}

.theater {
  height: 100%;
  position: fixed;
  z-index: auto;
  top: -100vh;
  right: -100vw;
  width: 0;
  background-color: #000000;
  overflow-x: hidden;
  white-space: nowrap;
  border-radius: 100%;
}
.theater.theater--open {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  animation-name: menuAnimOpenBottomLeft;
  animation-timing-function: cubic-bezier(0.24, 0.64, 0.05, 0.89);
  animation-duration: 0.5s;
  z-index: 200;
  overflow-x: visible;
}
.theater.theater--open .theater-content {
  opacity: 1;
  transition: opacity 200ms ease-in-out 1150ms;
}
.theater.theater--opening, .theater.theater--closing {
  pointer-events: none;
  overflow-x: hidden;
}
.theater.theater--closing {
  animation-name: menuAnimCloseBottomLeft;
  animation-timing-function: cubic-bezier(0.24, 0.64, 0.05, 0.89);
  animation-delay: 300ms;
  animation-duration: 1s;
}
.theater.theater--closing .theater-content {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}
@keyframes menuAnimOpenNew {
  0% {
    clip-path: ellipse(0px 0px at 100% 0%);
  }
  100% {
    clip-path: ellipse(120vw 120vw at 100% 0%);
  }
}
@keyframes menuAnimCloseNew {
  0% {
    clip-path: ellipse(120vw 120vw at 100% 0%);
  }
  100% {
    clip-path: ellipse(0px 0px at 100% 0%);
  }
}
.theater .theater-content {
  /* grid implementation of bulma columns */
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 0;
}
.theater .theater-content.shown {
  opacity: 1;
  transition: opacity 200ms 100ms ease-in-out;
}

@media (max-width: 767px) {
  .theater .c-menu-theater {
    top: 27px;
    right: 8.33333%;
  }
  .theater .logo {
    max-width: 132px;
  }
}
/* c-menu is the two-line hamburger icon */
.c-menu-theater,
.c-menu-theater span {
  width: 29px;
  display: block;
}

.s-main {
  min-height: 100%;
  background: #000;
}

.c-menu-theater span,
.s-nav-visible .c-menu-theater:after,
.s-nav-visible .c-menu-theater:before {
  background: white;
}

.theater-icon {
  position: absolute;
  transform: rotate(-360deg);
  transition: transform 100ms ease;
  z-index: auto;
}
.theater-icon.open {
  transform: rotate(-180deg);
  transition: transform 100ms ease;
  z-index: 200;
}

.c-menu-theater {
  top: 29px;
  right: calc(4.166% + 18px);
  z-index: auto;
  height: 30px;
  padding: 4px 0;
  position: fixed;
  overflow: hidden;
  display: none;
}
.c-menu-theater.c-menu-theater--open {
  z-index: 200;
  display: block;
}

.c-menu-theater span {
  left: 0;
  top: 10px;
  height: 2px;
  position: absolute;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.c-menu-theater span.open {
  opacity: 1;
  transition: opacity 200ms 550ms ease-in-out;
}

.c-menu-theater span:nth-child(1) {
  top: 21px;
  width: 24px;
  transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, -6);
  width: 29px;
}
.c-menu-theater span:nth-child(1).open {
  transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, -6);
  width: 29px;
}

.c-menu-theater span:nth-child(2) {
  -webkit-transform: translateX(-30px);
  -moz-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  transform: translateX(-30px);
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform: matrix(-0.7071, 0.7071, -0.7071, -0.7071, 0, 5);
}
.c-menu-theater span:nth-child(2).open {
  transform: matrix(-0.7071, 0.7071, -0.7071, -0.7071, 0, 5);
}

.theater-wrapper {
  position: relative;
}

.theater-wrapper .play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.theater-wrapper .play-btn:hover {
  opacity: 0.5;
  cursor: pointer;
}

@media (max-width: 767px) {
  .theater .c-menu-theater {
    top: 27px;
    right: 8.33333%;
  }
  .theater .logo {
    max-width: 132px;
  }
}
.player-wrapper {
  position: relative;
  padding-top: 56.25%;
  /* Player ratio: 100 / (1280 / 720) */
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}