/* breakpoints */
.component.video .mejs-container {
  overflow: hidden;
}

.component.video .mejs-controls {
  background: #fafafa;
  padding: 0px;
}

.component.video .mejs-controls .mejs-button button {
  background: url("../images/sprite1.png");
  box-shadow: none;
  width: 30px;
  height: 30px;
  margin: 5px 3px;
}

.component.video .mejs-controls .mejs-button button:hover {
  width: 30px;
  height: 30px;
}

.component.video .mejs-controls .mejs-playpause-button button {
  background-position: 0 100%;
}

.component.video .mejs-controls .mejs-playpause-button button:hover {
  background-position: 74% 100%;
}

.component.video .mejs-controls .mejs-playpause-button.mejs-pause > button {
  background-position: 0 -23px;
}

.component.video .mejs-controls .mejs-playpause-button.mejs-pause:hover > button {
  background-position: -30px -23px;
}

.component.video .mejs-controls .mejs-currenttime-container span, .component.video .mejs-controls .mejs-duration-container span {
  color: #000;
}

.component.video .mejs-controls .mejs-time-total {
  background: #000;
  height: 3px;
}

.component.video .mejs-controls .mejs-time-rail {
  margin: 0 5px;
  padding-top: 15px;
}

.component.video .mejs-controls .mejs-time-rail .mejs-time-hovered.negative {
  height: 3px;
}

.component.video .mejs-controls .mejs-time-handle {
  border-color: #d2d2d2;
  border-radius: 6px;
  border-width: 6px;
  top: -4px;
}

.component.video .mejs-controls .mejs-time-handle .mejs-time-handle-content {
  border-color: #d2d2d2;
  left: -5px;
  top: -5px;
}

.component.video .mejs-controls .mejs-volume-button {
  margin-top: 2px;
  margin-right: 5px;
}

.component.video .mejs-controls .mejs-volume-button button {
  background-position: 0px -82px;
}

.component.video .mejs-controls .mejs-mute {
  margin-right: 10px;
}

.component.video .mejs-controls .mejs-mute button {
  background-position: 0 72%;
}

.component.video .mejs-controls .mejs-unmute button {
  background-position: 74% 72%;
}

.component.video .mejs-controls .mejs-fullscreen-button {
  margin-top: 3px;
}

.component.video .mejs-controls .mejs-fullscreen-button button {
  background-position: 0 48%;
}

.component.video .mejs-overlay-button {
  opacity: 0.7;
  background: url("../images/bigplay.png") no-repeat scroll left top transparent;
  height: 69px;
  left: 50%;
  margin: -35px 0 0 -36px;
  position: absolute;
  top: 50%;
  width: 73px;
}

.component.video .video-init {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  background: url("/-/media/Base-Themes/Core-Libraries/styles/mejs-controls.svg") no-repeat;
  background-position: 0 -39px;
  overflow: hidden;
  z-index: 1;
}
