button {
    text-indent: -9999px;
    width: 106.08px;
    height: 106.08px;
    border: none;

    cursor: pointer;
}

button:focus {
    border: none;
    outline: none;
}

body:after {
    position: absolute; left: -50000px;
    content: url('../images/pause-hover.png') 
    url('../images/play-hover.png') url('../images/play.png') url('../images/pause.png');
   }

.pause {
    background: transparent url('../images/pause.png') no-repeat 0 0;
    background-size:cover;
}

.pause:hover {
    background: transparent url('../images/pause-hover.png') no-repeat 0 0;
    background-size:cover;
}

.play {
    background: transparent url('../images/play.png') no-repeat 0 0;
    background-size: cover;
}


.play:hover {  
    background: transparent url('../images/play-hover.png') no-repeat 0 0;
    background-size: cover;
}

#media-controls {
    width:auto;
    height:auto;
     
    justify-content: center;
  
}