body {
  background-image: linear-gradient(45deg, #1B75B9, #1294B6);
}

.extra-controls {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 101;
  display: none;
}
.extra-controls button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extra-controls #pause {
  background-color: #DF4E69;
  margin-bottom: 20px;
}
.extra-controls #pause img {
  width: 30px;
  height: auto;
}
.extra-controls #replay {
  background-color: #DCBE6E;
}
.extra-controls #replay img {
  width: 50px;
  height: auto;
}

.speaker-view .extra-controls {
  display: block;
}

@font-face {
  font-family: Objective-Bold;
  src: url("../fonts/objective/Objective-Bold.woff2");
}
@font-face {
  font-family: Objective-Regular;
  src: url("../fonts/objective/Objective-Regular.woff2");
}
* {
  box-sizing: border-box;
}

h2 {
  font-family: Objective-Bold;
  font-size: 42px;
  text-transform: uppercase;
  color: #4A4A4A;
  margin-bottom: 25px;
}

p {
  font-family: Objective-Regular;
  color: #4A4A4A;
  font-size: 18px;
  line-height: 24px;
}

.slide {
  background-color: rgba(0, 177, 64, 0);
  transition: 2s background-color;
  width: 100vw;
  height: 100vh;
}
.slide .full-image {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.particles {
  pointer-events: none;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.particle {
  transition: transform 3.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 3.5s cubic-bezier(0.19, 1, 0.22, 1);
  animation: floatingParticles 22.5s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.particle.red {
  position: absolute;
  left: 16vw;
  top: 16vw;
  opacity: 0.2;
  animation-delay: 2s;
}

.particle.yellow {
  position: absolute;
  left: 40vw;
  bottom: 6vw;
  opacity: 0.2;
  animation-delay: 6s;
}

.particle.blue {
  position: absolute;
  right: 16vw;
  top: 10vw;
  opacity: 0.2;
  animation-delay: 12s;
}

@keyframes floatingParticles {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(80px) rotate(20deg);
    transform: translateY(80px) rotate(20deg);
  }
}
.transitions {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.transitions video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

[data-type=decade-pick] video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

[data-type=question-title] .container {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: left;
}
[data-type=question-title] .container .slide-info {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: 12.5vw;
}
[data-type=question-title] .container .slide-info h1 {
  color: white;
  font-family: Objective-Bold;
  font-size: 140px;
  line-height: 140px;
  max-width: 75vw;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  text-align: left;
}
[data-type=question-title] .container .slide-info h1 span {
  background-image: linear-gradient(45deg, #1B75B9, #1294B6);
  display: inline-block;
  padding: 20px 20px 0 20px;
  margin: 15px 0;
}
[data-type=question-title] .container .slide-info .info-round-number {
  position: absolute;
  top: -35px;
  left: -130px;
  z-index: 3;
}
[data-type=question-title] .container .slide-info .info-round-number video {
  width: 90px;
  height: 90px;
  object-fit: cover;
}
[data-type=question-title] .container .slide-info .info-slide-number {
  background-color: #DF4E69;
  width: 120px;
  height: 120px;
  color: white;
  font-size: 65px;
  line-height: 130px;
  font-family: Objective-Bold, sans-serif;
  position: absolute;
  top: -80px;
  left: -60px;
  z-index: 2;
}
[data-type=question-title] .image-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}
[data-type=question-title] .image-container img {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

[data-type=question], [data-type=audio-question], [data-type=question-fragments] {
  background: rgba(0, 177, 64, 0);
  transition: all 0.6s ease-in-out;
}
[data-type=question] .container, [data-type=audio-question] .container, [data-type=question-fragments] .container {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  transition: all 0.6s ease-in-out;
}
[data-type=question] .container .text-box, [data-type=audio-question] .container .text-box, [data-type=question-fragments] .container .text-box {
  width: calc(100vw / 18 * 10);
  height: calc(100vh / 18 * 12);
  text-align: left;
  padding: calc(100vh / 18 / 2);
  position: relative;
  transform: translateY(calc(-100vh / 18));
  border: 5px dotted white;
  transition: all 0.6s ease-in-out;
}

[data-type=question] .container .text-box .slide-info, [data-type=audio-question] .container .text-box .slide-info, [data-type=question-fragments] .container .text-box .slide-info {
  position: absolute;
  left: calc(-100vw / 18 / 2);
  top: calc(100vw / 18);
  transition: all 0.6s ease-in-out;
}
[data-type=question] .container .text-box .slide-info .info-round-number, [data-type=audio-question] .container .text-box .slide-info .info-round-number, [data-type=question-fragments] .container .text-box .slide-info .info-round-number {
  width: 90px;
  height: 90px;
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -160px;
  left: -60px;
  text-align: center;
}
[data-type=question] .container .text-box .slide-info .info-round-number video, [data-type=audio-question] .container .text-box .slide-info .info-round-number video, [data-type=question-fragments] .container .text-box .slide-info .info-round-number video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-type=question] .container .text-box .slide-info .info-slide-number, [data-type=audio-question] .container .text-box .slide-info .info-slide-number, [data-type=question-fragments] .container .text-box .slide-info .info-slide-number {
  display: block;
  background-color: #DF4E69;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  text-align: center;
  font-family: Objective-Bold, sans-serif;
  font-size: 55px;
  line-height: 130px;
  color: white;
}
[data-type=question] .container .text-box .text-box-inner, [data-type=audio-question] .container .text-box .text-box-inner, [data-type=question-fragments] .container .text-box .text-box-inner {
  padding: calc(100vw / 18 / 2);
  padding-top: calc(100vw / 18);
  padding-right: calc(100vw / 18);
  padding-left: calc(100vw / 18);
  background-color: white;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease-in-out;
}
[data-type=question] .container .text-box .text-box-inner p, [data-type=audio-question] .container .text-box .text-box-inner p, [data-type=question-fragments] .container .text-box .text-box-inner p {
  font-size: 36px;
  line-height: 1.5;
}
[data-type=question] .container .text-box .points, [data-type=audio-question] .container .text-box .points, [data-type=question-fragments] .container .text-box .points {
  position: absolute;
  right: calc(100vw / 18 / 2);
  bottom: -15px;
  transition: all 0.6s ease-in-out;
}
[data-type=question] .container .text-box .points li, [data-type=audio-question] .container .text-box .points li, [data-type=question-fragments] .container .text-box .points li {
  display: inline-block;
  overflow: hidden;
}
[data-type=question] .container .text-box .points li span, [data-type=audio-question] .container .text-box .points li span, [data-type=question-fragments] .container .text-box .points li span {
  display: inline-block;
  padding: 15px 25px;
  color: white;
  font-family: Objective-Bold, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  margin-left: 20px;
}
[data-type=question] .container .text-box .points li.artist span, [data-type=audio-question] .container .text-box .points li.artist span, [data-type=question-fragments] .container .text-box .points li.artist span {
  background-color: #DF4E69;
}
[data-type=question] .container .text-box .points li.title span, [data-type=audio-question] .container .text-box .points li.title span, [data-type=question-fragments] .container .text-box .points li.title span {
  background-color: #DCBE6E;
}
[data-type=question] .container .text-box .points li.fact span, [data-type=audio-question] .container .text-box .points li.fact span, [data-type=question-fragments] .container .text-box .points li.fact span {
  background-color: #1294B6;
}
[data-type=question].chroma, [data-type=audio-question].chroma, [data-type=question-fragments].chroma {
  background: #00b140;
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma .container, [data-type=audio-question].chroma .container, [data-type=question-fragments].chroma .container {
  transform: translateY(calc(100vh / 18 * 14));
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma .container .text-box .slide-info, [data-type=audio-question].chroma .container .text-box .slide-info, [data-type=question-fragments].chroma .container .text-box .slide-info {
  top: calc(100vw / 18/ 2);
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma .container .text-box .text-box-inner, [data-type=audio-question].chroma .container .text-box .text-box-inner, [data-type=question-fragments].chroma .container .text-box .text-box-inner {
  padding-top: calc(100vw / 18 / 2);
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma .container .text-box .points, [data-type=audio-question].chroma .container .text-box .points, [data-type=question-fragments].chroma .container .text-box .points {
  transform: translateY(-63vh);
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma.out, [data-type=audio-question].chroma.out, [data-type=question-fragments].chroma.out {
  background: #00b140;
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma.out .container, [data-type=audio-question].chroma.out .container, [data-type=question-fragments].chroma.out .container {
  transform: translateY(calc(100vh / 18 * 20)) !important;
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma.out .container .text-box .slide-info, [data-type=audio-question].chroma.out .container .text-box .slide-info, [data-type=question-fragments].chroma.out .container .text-box .slide-info {
  top: calc(100vw / 18/ 2);
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma.out .container .text-box .text-box-inner, [data-type=audio-question].chroma.out .container .text-box .text-box-inner, [data-type=question-fragments].chroma.out .container .text-box .text-box-inner {
  padding-top: calc(100vw / 18 / 2);
  transition: all 0.6s ease-in-out;
}
[data-type=question].chroma.out .container .text-box .points, [data-type=audio-question].chroma.out .container .text-box .points, [data-type=question-fragments].chroma.out .container .text-box .points {
  transform: translateY(-63vh);
  transition: all 0.6s ease-in-out;
}

[data-type=question-fragments] .container .text-box {
  height: calc(100vh / 18 * 18);
}
[data-type=question-fragments] .container .text-box .text-box-inner .fragment {
  margin-bottom: 20px;
}

[data-type=question] .container .text-box, [data-type=audio-question] .container .text-box, [data-type=question-fragments] .container .text-box {
  transform: translateY(-100%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question] .container .text-box .slide-info .info-round-number, [data-type=audio-question] .container .text-box .slide-info .info-round-number, [data-type=question-fragments] .container .text-box .slide-info .info-round-number {
  transform: translateY(-200px);
  transition-delay: 0.2s;
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question] .container .text-box .slide-info .info-slide-number, [data-type=audio-question] .container .text-box .slide-info .info-slide-number, [data-type=question-fragments] .container .text-box .slide-info .info-slide-number {
  transform: translateY(-200px);
  transition-delay: 0.4s;
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question] .container .text-box .points .artist span, [data-type=audio-question] .container .text-box .points .artist span, [data-type=question-fragments] .container .text-box .points .artist span {
  transform: translateY(110%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question] .container .text-box .points .title span, [data-type=audio-question] .container .text-box .points .title span, [data-type=question-fragments] .container .text-box .points .title span {
  transform: translateY(110%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question] .container .text-box .points .fact span, [data-type=audio-question] .container .text-box .points .fact span, [data-type=question-fragments] .container .text-box .points .fact span {
  transform: translateY(110%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question].present .container .text-box, [data-type=audio-question].present .container .text-box, [data-type=question-fragments].present .container .text-box {
  transform: translateY(calc(-100vh / 18));
}
[data-type=question].present .container .text-box .slide-info .info-round-number, [data-type=audio-question].present .container .text-box .slide-info .info-round-number, [data-type=question-fragments].present .container .text-box .slide-info .info-round-number {
  transform: translateY(0);
}
[data-type=question].present .container .text-box .slide-info .info-slide-number, [data-type=audio-question].present .container .text-box .slide-info .info-slide-number, [data-type=question-fragments].present .container .text-box .slide-info .info-slide-number {
  transform: translateY(0);
}
[data-type=question].present .container .text-box .points .artist span, [data-type=audio-question].present .container .text-box .points .artist span, [data-type=question-fragments].present .container .text-box .points .artist span {
  transition-delay: 0.6s;
  transform: translateY(0);
}
[data-type=question].present .container .text-box .points .title span, [data-type=audio-question].present .container .text-box .points .title span, [data-type=question-fragments].present .container .text-box .points .title span {
  transition-delay: 0.8s;
  transform: translateY(0);
}
[data-type=question].present .container .text-box .points .fact span, [data-type=audio-question].present .container .text-box .points .fact span, [data-type=question-fragments].present .container .text-box .points .fact span {
  transition-delay: 1s;
  transform: translateY(0);
}
[data-type=question].out .container .text-box, [data-type=audio-question].out .container .text-box, [data-type=question-fragments].out .container .text-box {
  transform: translateY(-100%);
}
[data-type=question].out .container .text-box .slide-info .info-round-number, [data-type=audio-question].out .container .text-box .slide-info .info-round-number, [data-type=question-fragments].out .container .text-box .slide-info .info-round-number {
  transform: translateY(-200px);
  transition-delay: 0.2s;
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question].out .container .text-box .slide-info .info-slide-number, [data-type=audio-question].out .container .text-box .slide-info .info-slide-number, [data-type=question-fragments].out .container .text-box .slide-info .info-slide-number {
  transform: translateY(-200px);
  transition-delay: 0.4s;
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question].out .container .text-box .points .artist span, [data-type=audio-question].out .container .text-box .points .artist span, [data-type=question-fragments].out .container .text-box .points .artist span {
  transition-delay: 0.1s;
  transform: translateY(-110%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question].out .container .text-box .points .title span, [data-type=audio-question].out .container .text-box .points .title span, [data-type=question-fragments].out .container .text-box .points .title span {
  transition-delay: 0.2s;
  transform: translateY(-110%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question].out .container .text-box .points .fact span, [data-type=audio-question].out .container .text-box .points .fact span, [data-type=question-fragments].out .container .text-box .points .fact span {
  transition-delay: 0.3s;
  transform: translateY(-110%);
  transition: all 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}

[data-type=question-title] .image-container {
  width: 0;
  transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question-title] .container .slide-info .info-slide-number {
  transform: translateX(-400px);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.1s;
}
[data-type=question-title] .container .slide-info .info-round-number {
  transform: translateX(-400px);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.2s;
}
[data-type=question-title] .container .slide-info h1 {
  overflow: hidden;
}
[data-type=question-title] .container .slide-info h1 span {
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=question-title] .container .slide-info h1 span:nth-child(2) {
  transition-delay: 0.1s;
}
[data-type=question-title] .container .slide-info h1 span:nth-child(3) {
  transition-delay: 0.2s;
}
[data-type=question-title].present .image-container {
  transform-origin: left;
  width: 100%;
}
[data-type=question-title].present .image-container img {
  left: 0;
}
[data-type=question-title].present .container .slide-info .info-slide-number {
  transform: translateX(0);
}
[data-type=question-title].present .container .slide-info .info-round-number {
  transform: translateX(0);
}
[data-type=question-title].present .container .slide-info h1 span {
  transform: translateX(0);
}
[data-type=question-title].out .image-container {
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  transform-origin: right;
  transform: translateX(100vw);
}
[data-type=question-title].out .image-container img {
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  transform-origin: right;
  transform: translateX(-100vw);
}
[data-type=question-title].out .container .slide-info .info-slide-number {
  transform: translateX(-400px);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.1s;
}
[data-type=question-title].out .container .slide-info .info-round-number {
  transform: translateX(-400px);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.2s;
}
[data-type=question-title].out .container .slide-info h1 span {
  transform: translateX(-100%);
}

[data-type=break] {
  background-color: transparent;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=break]::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #00b140;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
}
[data-type=break].chroma::before {
  transform: translateX(0);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

[data-type=answer], [data-type=answer-fragments] {
  background: rgba(0, 177, 64, 0);
  transition: all 0.6s ease-in-out;
}
[data-type=answer] .container, [data-type=answer-fragments] .container {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  transition: all 0.6s ease-in-out;
}
[data-type=answer] .container .top-2000-info, [data-type=answer-fragments] .container .top-2000-info {
  position: absolute;
  right: 0;
  top: calc(100vw / 18 / 2);
  font-size: 24px;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 3;
  font-family: Objective-Bold, sans-serif;
}
[data-type=answer] .container .top-2000-info .position, [data-type=answer-fragments] .container .top-2000-info .position {
  background-color: #DF4E69;
  padding: 20px;
  margin-bottom: calc(100vw / 18 / 4);
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer] .container .top-2000-info .year, [data-type=answer-fragments] .container .top-2000-info .year {
  background-color: #1294B6;
  padding: 20px;
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer] .container .answer-image, [data-type=answer-fragments] .container .answer-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer] .container .text-box, [data-type=answer-fragments] .container .text-box {
  width: calc(100vw / 18 * 10);
  height: calc(100vh / 18 * 12);
  text-align: left;
  padding: calc(100vh / 18 / 2);
  position: relative;
  transform: translateY(110vh);
  border: 5px dotted white;
  transition: all 0.6s ease-in-out;
  z-index: 1;
}
[data-type=answer] .container .text-box .slide-info, [data-type=answer-fragments] .container .text-box .slide-info {
  position: absolute;
  left: calc(-100vw / 18 / 2);
  top: calc(100vw / 18 / 2);
  transition: all 0.6s ease-in-out;
}
[data-type=answer] .container .text-box .slide-info .info-round-number, [data-type=answer-fragments] .container .text-box .slide-info .info-round-number {
  width: 90px;
  height: 90px;
  display: block;
  position: absolute;
  z-index: 1;
  bottom: -160px;
  left: -60px;
  text-align: center;
}
[data-type=answer] .container .text-box .slide-info .info-round-number video, [data-type=answer-fragments] .container .text-box .slide-info .info-round-number video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-type=answer] .container .text-box .slide-info .info-slide-number, [data-type=answer-fragments] .container .text-box .slide-info .info-slide-number {
  display: block;
  background-color: #DF4E69;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  text-align: center;
  font-family: Objective-Bold, sans-serif;
  font-size: 55px;
  line-height: 130px;
  color: white;
}
[data-type=answer] .container .text-box .text-box-inner, [data-type=answer-fragments] .container .text-box .text-box-inner {
  padding-bottom: calc(100vw / 18 / 2);
  padding-top: calc(100vw / 18 / 1.5);
  padding-left: calc(100vw / 18);
  padding-right: calc(100vw / 18);
  background-color: white;
  width: 100%;
  height: 100%;
}
[data-type=answer] .container .text-box .text-box-inner h2, [data-type=answer-fragments] .container .text-box .text-box-inner h2 {
  font-size: 24px;
  color: white;
  background-image: linear-gradient(45deg, #1B75B9, #1294B6);
  position: absolute;
  top: calc(-100vw / 18 / 4);
  display: inline-block;
  padding: 20px;
}
[data-type=answer] .container .text-box .text-box-inner p, [data-type=answer-fragments] .container .text-box .text-box-inner p {
  font-size: 36px;
  line-height: 1.5;
  position: relative;
  top: -10px;
}
[data-type=answer] .container .text-box .text-box-inner p.title, [data-type=answer-fragments] .container .text-box .text-box-inner p.title {
  font-family: Objective-Regular, sans-serif;
}
[data-type=answer] .container .text-box .text-box-inner p.artist, [data-type=answer-fragments] .container .text-box .text-box-inner p.artist {
  font-family: Objective-Bold, sans-serif;
}
[data-type=answer] .container .text-box .text-box-inner p b, [data-type=answer-fragments] .container .text-box .text-box-inner p b {
  font-family: Objective-Bold, sans-serif;
}
[data-type=answer] .container .text-box .points, [data-type=answer-fragments] .container .text-box .points {
  right: calc(-100vw / 18 * 2);
  top: calc(100vw / 18 / 1.4);
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 300px;
}
[data-type=answer] .container .text-box .points li, [data-type=answer-fragments] .container .text-box .points li {
  display: inline-block;
  overflow: hidden;
  margin-bottom: 20px;
}
[data-type=answer] .container .text-box .points li span, [data-type=answer-fragments] .container .text-box .points li span {
  display: inline-block;
  padding: 15px 25px;
  color: white;
  font-family: Objective-Bold, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}
[data-type=answer] .container .text-box .points li.artist span, [data-type=answer-fragments] .container .text-box .points li.artist span {
  background-color: #DF4E69;
}
[data-type=answer] .container .text-box .points li.title span, [data-type=answer-fragments] .container .text-box .points li.title span {
  background-color: #DCBE6E;
}
[data-type=answer] .container .text-box .points li.fact span, [data-type=answer-fragments] .container .text-box .points li.fact span {
  background-color: #1294B6;
}
[data-type=answer].present .top-2000-info .position, [data-type=answer-fragments].present .top-2000-info .position {
  transform: translateX(0);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].present .top-2000-info .year, [data-type=answer-fragments].present .top-2000-info .year {
  transform: translateX(0);
  transition: all 0.6s 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].present .text-box, [data-type=answer-fragments].present .text-box {
  transform: translateY(calc(100vh / 18 * 14));
  transition: all 0.6s 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].present .answer-image, [data-type=answer-fragments].present .answer-image {
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].out .top-2000-info .position, [data-type=answer-fragments].out .top-2000-info .position {
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].out .top-2000-info .year, [data-type=answer-fragments].out .top-2000-info .year {
  transform: translateX(100%);
  transition-delay: 0.2s;
  transition: all 0.6s 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].out .text-box, [data-type=answer-fragments].out .text-box {
  transform: translateY(110vh);
  transition: all 0.6s 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=answer].out .answer-image, [data-type=answer-fragments].out .answer-image {
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

[data-type=video] video, [data-type=video-round-up] video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
}

.score-container {
  position: absolute;
  left: 25%;
  top: 5%;
  width: 50vw;
}
.score-container .row {
  display: flex;
}
.score-container .row:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.3);
}
.score-container .row:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.6);
}
.score-container .row .team, .score-container .row .score {
  width: 50%;
  color: white;
  font-size: 32px;
  line-height: 40px;
}
.score-container .row .team {
  font-family: Objective-Regular, sans-serif;
  text-align: left;
  padding: 10px;
}
.score-container .row .score {
  padding: 10px;
  font-family: Objective-Bold, sans-serif;
  text-align: right;
}

[data-type=countdown] {
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-type=countdown] video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
[data-type=countdown]::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #00b140;
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
}
[data-type=countdown].chroma::before {
  transform: translateX(0);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.countdown {
  text-align: left;
  width: 100%;
  z-index: 3;
  position: absolute;
  top: 30%;
  display: flex;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.countdown.active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.countdown.round-up {
  top: 40%;
}
.countdown p {
  line-height: 200px;
  font-size: 200px;
  font-family: Objective-Bold, sans-serif;
  color: white;
  text-align: left;
  width: 100%;
  display: flex;
}
.countdown p #mins {
  display: inline-block;
  text-align: right;
  width: 47.5%;
}
.countdown p #divider {
  display: inline-block;
  text-align: center;
  width: 5%;
}
.countdown p #secs {
  display: inline-block;
  text-align: left;
  width: 47.5%;
}

.puzzle {
  display: flex;
  flex-wrap: wrap;
  /* margin-top: 60px; */
  color: #4A4A4A;
  padding-bottom: 30px;
}
.text-box-inner .puzzle {
  margin-top: 80px;
}
.text-box-inner .puzzle li {
  width: calc(100% / 3);
  height: 140px;
  padding: 20px;
  font-size: 24px;
  line-height: 32px;
  font-family: Objective-Regular, sans-serif;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
.puzzle li:nth-child(1), .puzzle li:nth-child(2), .puzzle li:nth-child(3) {
  border-top: none;
}
.puzzle li:nth-child(3n) {
  border-right: none;
}

.timer {
  background-color: white;
  position: absolute;
  top: calc(100vw / 18);
  right: calc(100vw / 18);
  padding: calc(100vw / 18 / 8);
  border-radius: calc(100vw / 18 / 4);
}
.timer .time-left {
  font-family: Objective-Bold, sans-serif;
  color: #4A4A4A;
  display: block;
  position: absolute;
  bottom: calc(-100vw / 18 / 2);
  left: -50%;
  padding: calc(100vw / 18 / 8);
  background-color: white;
  width: calc(100vw / 18);
  height: calc(100vw / 18);
  border-radius: 50%;
  z-index: 1;
  line-height: 85px;
}

@keyframes puzzle-timer {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.info-bottom {
  position: absolute;
  z-index: 2;
  bottom: calc(100vw / 18 / 2);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: #1B75B9;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.info-bottom.active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.info-bottom .spotify {
  padding-left: calc(100vw / 18 / 2);
  color: black;
  display: flex;
  flex-wrap: wrap;
  width: calc(100vw / 18 * 8);
  z-index: 2;
}
.info-bottom .spotify .cover {
  position: relative;
  top: calc(-100vw / 18 / 4);
  width: calc(100vw / 18 * 2);
  display: flex;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
}
.info-bottom .spotify .cover img {
  width: 100%;
}
.info-bottom .spotify .song-container {
  width: calc(100vw / 18 * 5);
  height: calc(100vw / 18 );
  text-align: left;
  padding-left: calc(100vw / 18 / 2);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  background-color: #1B75B9;
  color: white;
  align-self: center;
  font-size: 30px;
}
.info-bottom .spotify .song-container .title {
  font-family: Objective-Bold, sans-serif;
  width: 100%;
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
}
.info-bottom .spotify .song-container .artist {
  width: 100%;
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: Objective-Regular, sans-serif;
}
.info-bottom .messages {
  width: calc(100vw / 18 * 10);
  height: calc(100vw / 18 * 2);
  text-align: left;
}
.info-bottom .messages .messages-wrapper {
  position: relative;
}
.info-bottom .messages .messages-wrapper .message {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  height: calc(100vw / 18 * 2);
  padding: calc(100vw / 18 / 2);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-items: center;
  transform: translateY(calc(100vw / 18 / 2));
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.info-bottom .messages .messages-wrapper .message .text {
  width: 100%;
}
.info-bottom .messages .messages-wrapper .message .text p {
  padding: 5px 0;
  font-size: 30px;
  line-height: 40px;
  color: white;
}
.info-bottom .messages .messages-wrapper .message .text p .name {
  padding: 5px 0;
  font-family: Objective-Bold, sans-serif;
  width: 100%;
}
.info-bottom .messages .messages-wrapper .message.active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.6s;
}
.info-bottom .ticker-wrap {
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: calc(100vw / 18 / 2);
  background-color: #DF4E69;
  overflow: hidden;
  box-sizing: content-box;
}
.info-bottom .ticker-wrap .ticker {
  display: inline-block;
  height: 100%;
  line-height: 55px;
  white-space: nowrap;
  box-sizing: content-box;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 30s;
}
.info-bottom .ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 24px;
  color: white;
  font-family: Objective-Regular, sans-serif;
}

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-50%), 0, 0);
  }
}

/*# sourceMappingURL=topquiz.css.map */
.contained-padding-image {
  width: 100%;
  height: 100%;
  padding: 5%;
  object-fit: contain;
}
[data-type=question-fragments] .container .text-box .text-box-inner p {
  font-size: 32px;
  line-height: 40px;
}

.slide.contained .container .answer-image {
  object-fit: contain;
  padding: calc(100vw / 18);
}

.puzzle .container .text-box {
  height: calc(100vh / 18 * 14);
}

/* Speaker view edit */
[data-speaker-layout="default"] {
  display: flex;
  flex-wrap: wrap;
  background-color: red;
}
[data-speaker-layout=default] #current-slide {
  position: relative;
  width: 960px;
  height: 540px;
}
[data-speaker-layout=default] #current-slide iframe {
  width: 1920px;
  height: 1080px;
  transform: scale(0.5);
  transform-origin: left top;
}
[data-speaker-layout=default] #upcoming-slide {
  position: relative;
  width: 480px;
  height: 270px;
}
[data-speaker-layout=default] #upcoming-slide iframe {
  width: 1920px;
  height: 1080px;
  transform: scale(0.25);
  transform-origin: left top;
}
[data-speaker-layout=default] #speaker-controls {
  position: relative;
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
}
[data-speaker-layout=default] #speaker-layout {
  display: none;
}
.speaker-view {
  background-color: white;
  background-image: none;
}
.speaker-view .reveal .slides .slide .container .text-box .slide-info .info-slide-number {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
}
.speaker-view .reveal .slides .slide .container .text-box {
  transform: none;
  width: 100%;
  height: 100%;
}
.speaker-view .reveal .slides .slide .container .text-box .slide-info {
  transform: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.speaker-view .reveal .slides .slide .container .text-box .slide-info .info-round-number, .speaker-view .reveal .slides .slide .container .text-box .slide-info .info-slide-number {
  transform: none;
  display: block;
}
.speaker-view .reveal .slides .slide .container .text-box .slide-info .info-round-number {
  right: 0;
  top: 0;
  left: auto;
  bottom: auto;
}

.speaker-view .reveal .slides .slide .container .text-box .slide-info .info-slide-number {
  left: 0;
  top: 0;
}
.speaker-view .reveal .slides .slide .container .text-box .points {
  transform: none;
  left: 0;
  bottom: 0;
  top: auto;
  right: auto;
  font-size: 16px;
  margin-left: 0;
}
.speaker-view .reveal .slides .slide .container .text-box .points li {
  transform: none;
}
.speaker-view .reveal .slides .slide .container .text-box .points li span {
  font-size: 16px;
}
.speaker-view .reveal .slides .slide .container .slide-info h1 {
  font-size: 32px
}
.speaker-view .reveal .slides .slide .container .text-box .text-box-inner {
  padding: 50px;
}
.speaker-view .reveal .slides .slide .container .text-box .text-box-inner h2 {
  font-size: 24px
}
.speaker-view .reveal .slides .slide .container .text-box .text-box-inner p {
  font-size: 16px
}
.speaker-view .reveal .particles {
  display: none;
}

.speaker-view .reveal .slides .slide .image-container {
  display: none;
}

.speaker-view .reveal .slides .slide .image-container, .speaker-view .reveal .slides .slide .image-container img {
  transform: none;
}

.speaker-view .reveal .slides .slide .container .slide-info {
 margin: 0;
 width: 100%;
}

.speaker-view .reveal .slides .slide .container .slide-info .info-slide-number {
  left: 0;
  top: 0;
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.speaker-view .reveal .slides .slide .container .slide-info .info-round-number {
  right: 0;
  top: 0;
  left: auto;
  bottom: auto;
}

#upcoming-slide iframe .reveal-full-page .speaker-view .extra-controls {
  display: none;
}

.song-container .title {
  position: relative;
  height: 40px;
}
.song-container .title .pan {
  animation: panAnimation;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  position: absolute;
  animation-timing-function: linear;
  left: 0;
  top: 0;
}

.song-container .artist {
  position: relative;
  height: 40px;
  margin-top: 5px;
}
.song-container .artist .pan {
  animation: panAnimation;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  position: absolute;
  animation-timing-function: linear;
  left: 0;
  top: 0;
}


@keyframes panAnimation {
  0% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}