.audio {

}

/*Container for audio player*/
.audioplayer{
width: 100%;
height: 48px;
margin: auto;
margin-top: 50px;
border: none;
background-color: #262f10;
position: relative;
border-radius: 25px;
}


/* Play/Pause Button */
.playbutton{
height: 7em;
width: 7em;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
float: left;
outline: none;
margin-left: 1em;
display: block;
border: none;
position: absolute;
top: 50%;
left: 2%;
margin-right: -50%;
transform: translate(-50%, -50%);
}


/*Classes for play/pause button background*/
.play{background: url('//images.impresa.pt/expresso/2020-10-26-play.png/original') ;}
.pause{background: url('//images.impresa.pt/expresso/2020-10-26-pause.png/original') ;}

.play, .pause {
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.timeline{
width: 88%;
height: 1em;
background: rgb(255 255 255);
float: left;
border-radius: 15px;
position: absolute;
top: 50%;
left: 53%;
margin-right: -50%;
transform: translate(-50%, -50%);
position: relative;
}
/*Grabable Playhead*/
.playhead{
cursor: pointer;
width: 1em;
height: 1em;
border-radius: 50%;
margin-top: 0;
background: #828282;
position: absolute;
}

.progress {
width: 0%;
height: 100%;
transition: 0.25s;
background: #828282;
}

.time {
display: flex;
position: absolute;
top: 80%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #f2f2f2;
font-family: 'Firme-Bold', sans-serif;
font-size: 1.2em;
font-weight: 600;
}

.divider {
padding: 0 0.2em;
}