html {
  height: 100%;
}
body {
  --playback-logo-image: url("logo.png");
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
cast-media-player {
  --theme-hue: 100;
  --progress-color: rgb(0, 255, 0);
  --splash-image: url("logo.png");
  --splash-size: 760px 152px;
}
body > div {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
}
body > div > div.media {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease-in-out;
}
body > div > div.logo {
  position: relative;
  width: 960px;
  height: 192px;
  transition: opacity 0.25s ease-in-out;
}
body > div > div.logo > img {
  position: absolute;
  width: 760px;
  height: 152px;
  left: 100px;
  top: 20px;
  z-index: 1;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: translateY(-35px);
}
body.loading > div > div.logo {
  opacity: 0;
}
body > div > div.test_1 > svg,
body > div > div.test_2 > img,
body > div > div.test_3 > img,
body > div > div.test_4 > img,
body > div > div.test_5 > svg,
body > div > div.media {
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out,
    height 0.35s ease-in-out;
  transform: translateY(35px);
  z-index: 2;
}
body > div > div.test_1 > svg [class^="l_"],
body > div > div.test_1 > svg [class^="r_"],
body > div > div.test_5 > svg [class^="l_"],
body > div > div.test_5 > svg [class^="r_"] {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
body > div > div.test_1 > svg [class^="l_"].highlight,
body > div > div.test_5 > svg [class^="l_"].highlight {
  opacity: 0.2;
}
body > div > div.test_1[class*="row_"] > svg [class*="r_"],
body > div > div.test_5[class*="row_"] > svg [class*="r_"] {
  opacity: 0;
}
body > div > div.test_1.row_1 > svg .r_1,
body > div > div.test_1.row_2 > svg .r_2,
body > div > div.test_1.row_3 > svg .r_3,
body > div > div.test_1.row_4 > svg .r_4,
body > div > div.test_1.row_5 > svg .r_5,
body > div > div.test_1.row_6 > svg .r_6,
body > div > div.test_1.row_7 > svg .r_7,
body > div > div.test_5.row_1 > svg .r_1,
body > div > div.test_5.row_2 > svg .r_2,
body > div > div.test_5.row_3 > svg .r_3,
body > div > div.test_5.row_4 > svg .r_4,
body > div > div.test_5.row_5 > svg .r_5,
body > div > div.test_5.row_6 > svg .r_6,
body > div > div.test_5.row_7 > svg .r_7 {
  opacity: 1;
}
body > div > div.test_1 > div,
body > div > div.test_5 > div {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
body > div > div.test_1 > div.green,
body > div > div.test_5 > div.green {
  background: #02903e;
  left: 0;
  right: 50%;
}
body > div > div.test_1 > div.red,
body > div > div.test_5 > div.red {
  background: #da251c;
  left: 50%;
  right: 0;
}
body > div > div.test_2,
body > div > div.test_3,
body > div > div.test_4 {
  text-align: center;
}
body > div > div.test_2 > img {
  width: 50%;
}
body > div > div.test_3 > img,
body > div > div.test_4 > img {
  width: 75%;
}

.spinner {
  position: absolute;
  width: 100%;
  height: 42px;
  left: 0;
  top: 50%;
  margin-top: -21px;
  text-align: center;
  transition: transform 0.5s ease-in-out, opacity 0.35s ease-in-out;
  transform: translateY(75px);
}
.spinner > div {
  width: 28px;
  height: 28px;
  margin: 10px 5px 0;
  background-color: #ba5b79;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.7);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
body.main_screen > div > div.logo > img,
body.main_screen .spinner {
  transform: translateY(0);
}
body.main_screen .spinner,
body.test_1 .spinner,
body.test_2 .spinner,
body.test_3 .spinner,
body.test_4 .spinner,
body.test_5 .spinner,
body.media .spinner {
  opacity: 0;
}
body.test_1 > div > div.logo > img,
body.test_2 > div > div.logo > img,
body.test_3 > div > div.logo > img,
body.test_4 > div > div.logo > img,
body.test_5 > div > div.logo > img,
body.media > div > div.logo {
  opacity: 0;
}
body.test_1 > div > div.test_1 > svg,
body.test_2 > div > div.test_2 > img,
body.test_3 > div > div.test_3 > img,
body.test_4 > div > div.test_4 > img,
body.test_5 > div > div.test_5 > svg,
body.media > div > div.media {
  opacity: 1;
  transform: translateY(0);
}
body.test_1 > div > div.test_1.background > div,
body.test_5 > div > div.test_5.background > div {
  opacity: 1;
}
body.small_screen > div:nth-of-type(3),
body.small_screen > div:nth-of-type(7) {
  align-items: flex-start;
}
body.small_screen > div:nth-of-type(3).bottom,
body.small_screen > div:nth-of-type(7).bottom {
  align-items: flex-end;
}