.logo {
  display: block;
  width: 8vw;
  height: 3vw;
  background: left top no-repeat url(images/om-logo.png);
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
  top: 1vw;
  left: calc(50% - 4vw);;
}


.menu {
  position: absolute;
  bottom: 1vw;
  right: 40.8vw;
  padding: 1.2vw;
  background: #1b1b1b00;
  border-radius: 100%;
  z-index: 99;
  /*-webkit-box-shadow: 0.4vw 0.4vw 0.8vw black, -0.4vw -0.4vw 1.2vw #272727, inset 0vw 0vw 0.2vw rgba(255, 255, 255, 0.2), inset 0.4vw 0.4vw 0.8vw #2b2b2b, inset -0.4vw -0.4vw 1.2vw rgba(0, 0, 0, 0.26), 0vw 0vw 0.2vw rgba(255, 255, 255, 0);
          box-shadow: 0.4vw 0.4vw 0.8vw black, -0.4vw -0.4vw 1.2vw #272727, inset 0vw 0vw 0.2vw rgba(255, 255, 255, 0.2), inset 0.4vw 0.4vw 0.8vw #2b2b2b, inset -0.4vw -0.4vw 1.2vw rgba(0, 0, 0, 0.26), 0vw 0vw 0.2vw rgba(255, 255, 255, 0);*/
}

/*.menu::before, .menu::after {
  content: "";
  background: #fff;
  border-radius: 0.2vw;
  width: 1.2vw;
  height: 0.2vw;
  position: absolute;
  left: 0.6vw;
  top: 1.1vw;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  z-index: 1;
}*/


.menu.open .button {
  opacity: 0.5;
  pointer-events: auto;
}
.menu.open .button:hover {
  opacity: 1;
  pointer-events: auto;
}

.button {
  padding: 1.2vw;
  border-radius: 50%;
  cursor: pointer;
  /*background: #000000;*/
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 1;
  pointer-events: none;
  -webkit-box-shadow: inherit;
          box-shadow: inherit;
}
.button2 {
  padding: 1.2vw;
  border-radius: 50%;
  cursor: pointer;
  /*background: #000000;*/
  position: absolute;
  -webkit-box-shadow: inherit;
          box-shadow: inherit;
}

#fs.button {
  right: 4vw;
  background: url(images/expand-solid.svg) no-repeat 50%/50%;
}

#tdm.button {
  right: 8vw;
  background: url(images/align-justify-solid.svg) no-repeat 50%/50%;

}

#first.button2 {
  left: 1vw;
  bottom: 50vh;
  background: url(images/first-solid.svg) no-repeat 50%/50%;
  z-index: 999;
  opacity: 0;
  pointer-events: auto;
}
#first.button2:hover{
  opacity: 1;
}

#last.button2 {
  right: 1vw;
  bottom: 50vh;
  background: url(images/last-solid.svg) no-repeat 50%/50%;
  z-index: 999;
  opacity: 0;
  pointer-events: auto;
}
#last.button2:hover{
  opacity: 1;
}

#play-pause.button {
  right: 12vw;
  background: url(images/play-solid.svg) no-repeat 55%/40%;

}
#play-pause.button.pause {
  right: 12vw;
  background: url(images/pause-solid.svg) no-repeat 50%/40%;

}

.progress {
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 400px;
      margin: 0;
      right: 14vw;
      top: 0.3vw;
      padding: 0 1vw;
      border-radius: 1vw!important;
    }

.button.play .progress{
  opacity: 0;
}    

.button.play.show .progress{
  opacity: 1;
}    

    .progress-bar {
      position: relative;
      width: 70%;
      height: 10px;
      background-color: rgb(63, 63, 63);
      vertical-align: 2px;
      border-radius: 5px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0;
      display: inline-block;
      height: 10px;
      width: 70%;
      border-radius: 5px 0 0 5px;
      background: #818181;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      margin-left: -5px;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: rgb(255, 255, 255);
    }
    .start, .end{
      font-size: 1em;
      letter-spacing: 0.1em;
      color: #fff;
      padding-top: 3px;
      padding-left: 10px;
      padding-right: 10px;
      -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;  
    }

/*.button:hover {
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}*/