body {
 margin: 0px;
padding: 0px;

}

	/* CSS Document */

.contenedor1 { margin:auto;    width: 350px;      /*IMPORTANTE*/    display: flex;   justify-content: center;   /*  align-items: center; */ z-index:1; }

.conten {     width: 300px;    height: 300px;   top:10px;     display: flex;   justify-content: center;   /*  align-items: center; */   position:relative; z-index:3; }

.conten1 {   background:#EAECEE;     width: 296px;    height: 340px;   top:160px; display: flex;   justify-content: center;     /*  align-items: center; */   position:absolute; z-index:2; border-radius: 0 0 20px 20px; border:2px solid #D5D8DC;}

.imagen {     width: 300px;    height: 300px; top:-150px;   position:absolute;   border-radius: 50% 50%; background-image:url(cole.jpg); background-size: cover;  }

.nombre {  text-align:center; width: 300px;  position:absolute; top:50px }
.autor {  text-align:center;  width: 300px;  position:absolute; top:70px;  }

.Boton {  margin:auto; position:absolute; top:160px; }

.slaider { width: 90%;  max-width: 350px; display: flex; justify-content: center; align-items: center;  position:absolute;  top:240px;}

.slaider1 {width: 90%;  max-width: 350px; display: flex; justify-content: center; align-items: center; position:absolute; top:280px;}

.visual, .volumen {  -webkit-appearance: none;   -moz-appearance: none;   appearance: none;
  height: 5px;   background:#0066CC;    opacity: 0.7;    -webkit-transition: .2s;   transition: opacity .2s; }

.visual::-webkit-slider-thumb, .volumen::-webkit-slider-thumb {
  -webkit-appearance: none;   -moz-appearance: none;   appearance: none;   width: 25px;
  height: 15px;    background:  #FFFF00;   cursor: pointer;   border-radius: 50%; }

.visual:hover, .volumen:hover {  opacity: 1.0; }

.visual {   width: 60%; }

.volumen {  width: 80%; }

.tiempo_tras, .tiempo_t {  padding: 10px; }

i.fa-volume-down, i.fa-volume-up {  padding: 10px; }

i.fa-play-circle, i.fa-pause-circle{   cursor: pointer;}