*{
	font-family:monospace;
}






#reproductor{
    width: 50%;
    margin: 0 auto 7rem;
    padding: 0px;
    background: #000;
    -webkit-border-radius: 5px;
    box-shadow: rgba(150,150, 150, 0.5) 0px -5px 25px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: self-start;
    justify-content: space-around;
    position: relative;
}



#reproducir{
	-webkit-border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    background: rgba(150,150,150,0);
    color: white;
    position: relative;
}


nav{
	margin: 5px 0px 1px;
display: flex;
width: 100%;
align-content: center;
align-items: center;
justify-content: start;
	
}

#botones{
	float: left;
	width: 100px;
	height: 20px;
	display: inline-block;
}


#barra{

    
    height: 6px;
    width: 100%;
    border: 1px #CCCCCC;
    border-radius: 40px;
    background: #000000;
    margin: 0 1rem;
    
}



#progreso{
	position: absolute;
	width: 0px;
	height: 6px;
	background:white;
	border-radius: 12px
}





#mascara{
    position: absolute;
    display:flex;
    text-align: center;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background: black;
    border-radius: 50%;
    padding: 0.5rem;
}




#icon-play{
    /* margin: 25% auto;
    width: 12%; */
}
#pausa{

  height: 48px;
  width: 48px;
}

h1{

	color:red;
	width: 10%;
	/* border: 1px solid black; */
	
}