.video-js {
  border-radius: 0.75rem;
}

.video-js:hover .vjs-big-play-button {
  background-color: #fff;
}

.video-js .vjs-dock-text {
  font-family: 'Lato', sans-serif;
  text-align: left;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 100%);
}

.video-js .vjs-control-bar {
  font-family: 'Lato', sans-serif;
  height: 2.625rem;
  font-size: 0.875rem !important;
}

.video-js .vjs-control-bar .vjs-progress-control {
  height: 0.75rem;
  top: -0.75rem;
}

.video-js .vjs-control-bar .vjs-progress-control .vjs-progress-holder {
  background-color: #fff;
}

.video-js .vjs-control-bar .vjs-progress-control .vjs-load-progress {
  background-color: #fff;
  opacity: 50%;
}

.video-js .vjs-control-bar .vjs-progress-control .vjs-play-progress {
  background-color: #0061d5;
}

.video-js .vjs-control-bar .vjs-time-control {
  padding: 0;
}

.video-js .vjs-control-bar .vjs-playback-rate-value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  font-weight: 600;
}

.video-js .vjs-control-bar .vjs-menu-content {
  font-family: 'Lato', sans-serif;
  background: rgba(0, 0, 0, 0.1);
}

.video-js .vjs-control-bar .vjs-menu-content .vjs-menu-item {
  background: none;
  font-size: inherit;
  font-weight: 600;
  color: #fff;
  border-radius: 0;
  margin: 0;
  transition: background-color 75ms;
}

.video-js .vjs-control-bar .vjs-menu-content .vjs-menu-item:hover {
  background: rgba(21, 27, 23, 0.4);
  text-shadow: none;
}

.video-js .vjs-control-bar .vjs-menu-content .vjs-menu-item:active, .video-js .vjs-control-bar .vjs-menu-content .vjs-menu-item:focus {
  text-shadow: none;
}

.video-js .vjs-control-bar .vjs-menu-content .vjs-menu-item.vjs-selected {
  background: #0061d5;
}

.video-js .vjs-text-track-cue div {
  font-family: 'Lato', sans-serif !important;
  display: inline-block !important;
  border-radius: 0.25rem;
  background-color: rgba(0, 0, 0, 0.65) !important;
}

.video-js .vjs-text-track-cue div:not(:empty) {
  padding: 0.125rem 0.625rem;
}

.video-js .vjs-big-play-button {
  background: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyBmaWxsPSIjMDA2MWQ1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMjMiIGhlaWdodD0iMTAyNCIgdmlld0JveD0iMCAwIDEwMjMgMTAyNCI+Cjx0aXRsZT48L3RpdGxlPgo8ZyBpZD0iaWNvbW9vbi1pZ25vcmUiPgo8L2c+CjxwYXRoIGQ9Ik0yMjUuMjY1IDk4MS40NzVjLTY4LjE4OSA0Mi42MTctMTIzLjQ2MSAxMi4wNDYtMTIzLjQ2MS02OC4wMjV2LTgwMi45NjhjMC04MC4xODcgNTUuMzgxLTExMC41NzQgMTIzLjQ2MS02OC4wMjVsNjI3Ljc0MyAzOTIuMzQzYzY4LjE4OSA0Mi42MTcgNjguMDg5IDExMS43NzggMCAxNTQuMzNsLTYyNy43NDMgMzkyLjM0M3oiPjwvcGF0aD4KPC9zdmc+Cg==");
  background-color: #fff;
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: 55% 50%;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 50px;
  min-height: 50px;
  border-radius: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 50px 0 black;
  margin: auto;
  z-index: 1;
}

@media (min-width: 48em) {
  .video-js .vjs-big-play-button {
    width: 6rem;
    height: 6rem;
  }
}

@media (min-width: 90em) {
  .video-js .vjs-big-play-button {
    width: 7.5rem;
    height: 7.5rem;
  }
}

.video-js .vjs-big-play-button .vjs-icon-placeholder {
  display: none;
}