
.mejs-container, .mejs-container .mejs-controls,
.mejs-embed, .mejs-embed body {
  background:transparent;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: #8a6e4c;
    height: 1px;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #0a1a9c;
    height: 1px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: #8a6e4c;
  height: 1px;
}


.mejs-time,
.mejs-volume-button,
.mejs-mute,
.mejs-controls a.mejs-horizontal-volume-slider {
  display: none;
}

.mejs-time-total {
  display: none;
  margin: 7px 0 0;
}

.mejs-controls {
  width: 55px;
  right: 6rem !important;
  position: absolute;
  top: 0;
  padding: 0;
  z-index: 9999;
/* margin-left: 88vw; */
}


.mejs-time-rail,
.mejs-time-total {
  width: 100 !important;
}

@media (min-width: 76.8rem) {
  .mejs-controls {
    background: blue;
    width: 70%;
    margin-left: 0;
  }
}

@media (min-width:100rem) {


  .mejs-controls {
    width: 100%;
  }
}


.mejs-button {
  background: white;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  border:1px solid #8a6e4c;
  position: inherit;
}


.mejs-time-current{
  background: #0a1a9c;
  border:none;
}

/* .mejs-button .mejs-play {
    background-image: url("../img/mejs-controls-dark.svg");
  }
   */

.mejs-button > button {
  /* background: transparent url("../img/mejs-controls-dark.svg"); */
  background: transparent url("../img/mejs-controls-gold.svg");
  background-position-x: 0%;
  background-position-y: 0%;
  border: 0;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 20px;
      line-height: 0;
      margin: 8px 8px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      z-index: 10;
      text-decoration: none;
      width: 20px;

  }

  .mejs-button.mejs-pause > button {
      background-position-x: -21px !important;
      background-position-y: 0%;
  }

  @media (min-width: 76.8rem) {
    .mejs-time-total {
      margin: 7px 0 0 3.5rem;
      display: block;
    }

    .mejs-time-rail,
    .mejs-time-total {
      width: 100 !important;
    }
  }
