.adv-link:has(video) {
  position: relative;
  display: block;
  width: 640px;
  margin: 10px auto;
  background: #19394d;
  font-size: 24px;
  overflow: hidden;
}
.adv-link:has(video) video {
  cursor: pointer;
  width: 100%;
  opacity: 0;
}
.adv-link:has(video) video.visible {
  opacity: 1;
  transition: opacity 1s ease-out 0.8s;
  margin-bottom: -5px;
}
.adv-link:has(video) .control-bar {
  width: 100%;
  height: 0;
  padding-bottom: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  user-select: none;
}
.adv-link:has(video) .control-bar .button-bar {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 3px;
  z-index: 2;
}
.adv-link:has(video) .control-bar .button-bar i {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 100;
  color: #fff;
  position: absolute;
  width: 2em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  top: 50%;
  margin-top: -1.1em;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.1s ease;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
  z-index: 2;
}
.adv-link:has(video) .control-bar .button-bar i:hover {
  opacity: 1;
}
.adv-link:has(video) .control-bar .button-bar i.hidden {
  opacity: 0;
  z-index: 1;
}
.adv-link:has(video) .control-bar .button-bar .volume {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 100;
  color: #fff;
  position: absolute;
  width: 2em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  top: -1em;
  margin-top: -0.75em;
  opacity: 0.6;
  cursor: pointer;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
  z-index: 2;
  overflow: hidden;
  left: 0;
  font-size: 1.2em;
  transition: all 0.8s ease-out;
}
.adv-link:has(video) .control-bar .button-bar .volume .toggle {
  left: -0.5em;
  padding: 0.5em;
}
.adv-link:has(video) .control-bar .seek {
  position: absolute;
  width: 100%;
  height: 3px;
  top: -2px;
  opacity: 0.9;
  transition: all 0.2s ease;
  z-index: 7;
}
.adv-link:has(video) .control-bar .seek .watched {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: 8;
  background: #0077bd;
  overflow: visible !important;
}
.adv-link:has(video) .control-bar .seek .watched:after,
.adv-link:has(video) .control-bar .seek .watched:before {
  content: "";
  position: absolute;
  right: 10px;
  height: 100%;
  width: 10px;
  background: #0097f0;
  border-radius: 2px;
  box-shadow: 0 0 2px #0097f0;
}
.adv-link:has(video) .control-bar .seek .watched:after {
  right: 0;
  box-shadow: 0 0 3px 0 #24aeff;
  background: #24aeff;
}
.adv-link:has(video) .control-bar .seek:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  bottom: -5px;
  left: 0;
  z-index: 6;
}
.adv-link:has(video) .loading {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: 50%;
  height: 100px;
  margin-top: 30px;
  color: #fff;
  font-size: 0.6em;
  opacity: 0.3;
  transition: all 0.4s ease;
}
.adv-link:has(video) .loading.hidden {
  opacity: 0;
  top: 120%;
  height: 0;
}
.adv-link:has(video) .loading.error,
.adv-link:has(video) .loading:hover {
  opacity: 1;
}
.adv-link:has(video) .spinner {
  display: block;
  overflow: visible;
  text-indent: -999em;
  position: absolute;
  border-radius: 100% 0;
  z-index: 2;
  background: #fff;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 2px;
  margin-left: -10px;
  margin-top: -10px;
  box-shadow: 0 0 3px 2px rgba(0, 119, 189, 0.4), 0 0 5px 3px rgba(0, 119, 189, 0.4) inset;
  border: none;
  transform-origin: 9px 9px;
  animation: spin 13s cubic-bezier(0.435, -0.165, 0.56, 1.17) infinite;
  transition: top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.adv-link:has(video) .spinner.hidden {
  top: 120%;
}
.adv-link:has(video) .spinner:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 0;
  z-index: 10;
  background: #fff;
  top: 0;
  left: 0;
  width: 5px;
  height: 3px;
  transform: rotate(140deg);
  box-shadow: 0 0 3px 2px rgba(0, 150, 189, 0.4), 0 0 5px 2px rgba(0, 150, 189, 0.4) inset;
  animation: spin2 17s linear infinite;
  transform-origin: 9px 9px;
}
.adv-link:has(video) .spinner:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 0;
  z-index: 10;
  background: #fff;
  top: 0;
  left: 0;
  width: 6px;
  height: 4px;
  transform: rotate(70deg);
  box-shadow: 0 0 5px 3px rgba(0, 87, 189, 0.4), 0 0 5px 1px rgba(0, 87, 189, 0.4) inset;
  animation: spin2 13s linear infinite;
  transform-origin: 9px 9px;
}
.adv-link .toggle img {
  pointer-events: none;
}
@media screen and (max-width: 800px) {
  .adv-link:has(video) {
    font-size: 30px;
  }
  .adv-link:has(video) .control-bar .button-bar .volume .toggle {
    left: -0.7em;
  }
}
@media screen and (max-width: 1004px) {
  .adv-link:has(video) {
    width: 100%;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(360deg);
  }
  14% {
    transform: rotate(470deg);
  }
  18% {
    transform: rotate(490deg);
  }
  20% {
    transform: rotate(520deg);
  }
  22% {
    transform: rotate(540deg);
  }
  26% {
    transform: rotate(940deg);
  }
  30% {
    transform: rotate(1080deg);
  }
  40% {
    transform: rotate(1340deg);
  }
  45% {
    transform: rotate(1440deg);
  }
  55%,
  56% {
    transform: rotate(1500deg);
  }
  86% {
    transform: rotate(3220deg);
  }
  100% {
    transform: rotate(3600deg);
  }
}
@keyframes spin2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(3600deg);
  }
}