@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";
@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    margin-left: -100%;
  }

  100% {
    margin-left: 100%;
  }
}

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

.player {
  color: #f1f1f1;
  background-image: url("background.dbc297d5.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Open Sans, sans-serif;
  font-weight: 300;
  position: absolute;
  inset: 0;
}

.player .logo {
  background-image: url("bodi-logo.fcd97733.svg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  width: 375px;
  height: 75px;
  margin-top: -28px;
  margin-left: -187px;
  display: none;
  position: absolute;
  bottom: 50%;
  left: 50%;
}

.player .gradient {
  position: absolute;
  inset: 0;
}

.player img, .player video {
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.player .media-info {
  padding-bottom: 54px;
  display: flex;
}

.player .media-artwork {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  align-self: flex-end;
  min-width: 96px;
  height: 143px;
  margin-right: 32px;
}

.player .media-text {
  align-self: flex-end;
  width: 100%;
}

.player .media-info .media-title {
  color: #fffc;
  text-overflow: ellipsis;
  width: 70%;
  font-size: 44px;
  overflow: hidden;
}

.player .media-info .media-subtitle {
  color: #cbcbcbcc;
  width: 60%;
  font-size: 22px;
  overflow: hidden;
}

.player .media-info .media-subtitle span:not(:first-child):before {
  content: "·";
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
}

.player .controls {
  height: 30px;
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.player .controls-play-pause {
  float: left;
  background-size: cover;
  border: 0;
  width: 32px;
  height: 36px;
  margin-top: -3px;
  margin-left: -4px;
}

.player .overlay {
  display: none;
  position: absolute;
  inset: auto 64px 64px;
}

.player .watermark {
  z-index: 1;
  background-image: url("bodi-logo.fcd97733.svg");
  background-position: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 54px;
  display: none;
  position: absolute;
  inset: 64px;
}

.player .gradient {
  opacity: .9;
  background: linear-gradient(to top, #000000e6, #0000 72% 100%);
  display: none;
}

.player .progressBar {
  background-color: #009dde;
}

.player .controls-progress {
  background-color: #fff3;
  height: 8px;
  margin-top: 11px;
  margin-bottom: 11px;
  position: relative;
  overflow: hidden;
}

.player .controls-progress-inner {
  opacity: .8;
  height: 100%;
}

.player .controls-progress-thumb {
  background-color: #ffffff80;
  width: 3px;
  height: 100%;
  margin-left: -3px;
  position: absolute;
  top: 0;
}

.player .controls-cur-time, .player .controls-total-time {
  color: #fffc;
  font-size: 16px;
  font-weight: 400;
}

.player .controls-cur-time {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
  line-height: 30px;
}

.player .controls-total-time {
  float: right;
  margin-left: 15px;
  line-height: 30px;
}

.player[data-state="launching"] .overlay, .player[data-state="launching"] .logo {
  display: block;
}

.player[data-state="launching"] .controls, .player[data-state="launching"] .media-info, .player[data-state="launching"] .media-artwork {
  display: none;
}

.player[data-state="launching"] .spinner {
  margin-left: 32px / -2;
  background-image: url("buffering.b98dc44b.png");
  width: 32px;
  height: 36px;
  animation: 1s linear infinite spin;
  display: block;
  position: absolute;
  bottom: 64px;
  left: 50%;
}

.player[data-state="loading"] .overlay, .player[data-state="loading"] .controls, .player[data-state="loading"] .watermark {
  display: block;
}

.player[data-state="loading"] .controls-cur-time, .player[data-state="loading"] .controls-total-time, .player[data-state="loading"] .controls-progress-thumb, .player[data-state="loading"] .controls-play-pause {
  display: none;
}

.player[data-state="loading"] .controls-progress-inner {
  animation: 2s linear infinite loading;
  width: 90% !important;
}

.player[data-state="buffering"] .overlay, .player[data-state="buffering"] .gradient {
  visibility: visible;
  display: block;
}

.player[data-state="buffering"] .gradient {
  opacity: .1;
}

.player[data-state="buffering"] .media-artwork, .player[data-state="buffering"] .media-info {
  display: none;
}

.player[data-state="buffering"] .controls {
  display: block;
}

.player[data-state="buffering"] .controls-play-pause {
  background-image: url("buffering.b98dc44b.png");
  animation: 1s linear infinite spin;
}

.player[data-state="buffering"][live="true"] .controls-cur-time, .player[data-state="buffering"][live="true"] .controls-total-time, .player[data-state="buffering"][live="true"] .controls-progress {
  display: none !important;
}

.player[data-state="buffering"] video {
  display: block;
}

.player[data-state="buffering"] .media-info, .player[data-state="buffering"]:not(.seeking) .controls-cur-time, .player[data-state="buffering"]:not(.seeking) .controls-total-time, .player[data-state="buffering"]:not(.seeking) .controls-progress {
  display: none;
}

.player[data-state="paused"] .overlay, .player[data-state="paused"] .gradient, .player[data-state="paused"] .watermark {
  visibility: visible;
  display: block;
}

.player[data-state="paused"] .controls-play-pause {
  background-image: url("paused.ceb15df1.png");
}

.player[data-state="paused"] .controls, .player[data-state="paused"] .watermark, .player[data-state="paused"]:not(.seeking) .controls-cur-time, .player[data-state="paused"]:not(.seeking) .controls-total-time, .player[data-state="paused"]:not(.seeking) .controls-progress {
  display: block;
}

.player[data-state="paused"][live="true"] .controls-cur-time, .player[data-state="paused"][live="true"] .controls-total-time, .player[data-state="paused"][live="true"] .controls-progress {
  display: none !important;
}

.player[data-state="paused"] video {
  display: block;
}

.player[data-state="paused"]:not(.seeking) .controls-cur-time, .player[data-state="paused"]:not(.seeking) .controls-total-time, .player[data-state="paused"]:not(.seeking) .controls-progress {
  opacity: 1;
  transition: opacity 1s linear 5s;
}

.player[data-state="paused"] .media-info {
  opacity: 0;
  transition: opacity 1s linear 5s;
}

.player[data-state="paused"] .gradient {
  opacity: .1;
  transition: opacity 1s linear 5s;
}

.player[data-state="playing"] .overlay, .player[data-state="playing"] .gradient, .player[data-state="playing"] .watermark {
  visibility: hidden;
  display: block;
}

.player[data-state="playing"].seeking .overlay, .player[data-state="playing"].seeking .gradient {
  visibility: visible;
  display: block;
}

.player[data-state="playing"].seeking .media-info {
  display: none;
}

.player[data-state="playing"].seeking .controls {
  display: block;
}

.player[data-state="playing"] .controls-play-pause {
  background-image: url("buffering.b98dc44b.png");
  animation: 1s linear infinite spin;
}

.player[data-state="playing"]:not(.seeking) .controls-play-pause {
  display: none;
}

.player[data-state="playing"]:not(.seeking) .controls-cur-time {
  margin-left: 0;
}

.player[data-state="playing"][live="true"] .controls-cur-time, .player[data-state="playing"][live="true"] .controls-total-time, .player[data-state="playing"][live="true"] .controls-progress {
  display: none !important;
}

.player[data-state="playing"] video, .player[data-state="stalled"] .logo {
  display: block;
}

.player[data-state="idle"] .overlay {
  display: none;
}

.player[data-state="idle"] .logo {
  display: block;
}

.player[data-state="idle"] .spinner, .player[data-state="done"] .overlay {
  display: none;
}

.player[data-state="done"] {
  background-image: url("bodi-logo.fcd97733.svg");
}

#errorMsg {
  text-align: center;
  width: 100%;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  font-size: 15pt;
  position: absolute;
  top: 50%;
}

/*# sourceMappingURL=index.4d663569.css.map */