/*

  UI

*/

button {
  margin-bottom: 0;
}

/*

  Video.js

*/

.video-js {
  height: 100vh !important;
}

.video-js .vjs-control-bar {
  position: fixed !important;
}

/* Make the video relative, instead of absolute, so that
   the parent container will size based on the video. Also,
   note the max-height rule. Note the line-height 0 is to prevent
   a small artifact on the bottom of the video.
 */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
video.video-js,
video.vjs-tech {
  width: 100%;
  max-width: 100% !important;
  padding-top: 0 !important;
  line-height: 0;
}
 
 /* Fix the control bar due to us resetting the line-height on the video-js */
.vjs-control-bar {
  line-height: 1;
}

.video-js .vjs-big-play-button,
.video-js .vjs-big-play-button:focus,
.video-js:hover .vjs-big-play-button {
  border: none;
}

.video-js .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  /* background-color: rgba(255, 0, 51, .8); */
  background-color: #c10202;
}

.video-js:hover .vjs-big-play-button {
  transition: background-color ease .4s;
  /* background-color: rgba(255, 0, 51, 1); */
  background-color: #b10202;
}

.video-js .vjs-control-bar {
  height: 3rem;
}

.video-js .vjs-control-bar .vjs-control {
  font-size: 1rem;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}