#audioplayer {
    width: 100%;
    position: absolute;
    left: -120px;
    top: 340px;
}

#pButton {
    width: 95px;
    height: 95px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
    /*padding-bottom: 80%;*/
    position: absolute;
    bottom: 0;
    left: 90%;
    right: 0;
    /*margin: auto;*/
}

.play {
    background: url('../images/ON.png');
    transition: .3s;
    border: 0;
}

.play:hover {
    filter: brightness(140%);
}

.pause {
    background: url('../images/OFF.png');
    transition: .3s;
    border: 0;
}

.pause:hover {
    filter: brightness(140%);
}

/*#timeline{
  width: 400px;
  height: 20px;
  margin-top: 20px;
  float: left;
  border-radius: 15px;
  background: rgba(0,0,0,.3);
  
}
#playhead{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: 1px;
  background: rgba(0, 0, 0,1);

}*/

@media screen and (max-width:767px) {
    #audioplayer {
        width: 100%;
        position: absolute;
        top: 75%;
        left: 0;
        right: 0;
        margin: auto;
    }

    #pButton {
        width: 20%;
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        outline: none;
        /*padding-bottom: 100%;*/
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        margin: auto;
    }














}