#Reproductor{
  width: 20%;
  border-bottom: 3px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  background: #383749;
  min-width: 295px;
  padding-left:5px;
  padding-right: 5px;
  padding-bottom: 10px;
  margin:0 auto;

}
#Reproductor .logotipo{
  width: 100%;
  text-align: center;
}
#Reproductor .logotipo img{
  
}
#Reproductor  #controles  ul li a span,
#Reproductor  #controles  .tim{
  color: #FFFFFF;
  font-size:30px;
}
#Reproductor #controles ul{
 display:block;
 list-style: none;
 padding: 0px;
 width:100%;
  margin:0 auto;
  z-index: 20; 
}

#Reproductor #controles ul li{
  display: block;
  float: left;
  margin-right: 9px;
}
#Reproductor #controles .tim{
  padding-top: 14px;
  cursor: pointer;
}
#Reproductor #controles .volumen{
  padding-top: 14px;
   width: 50%;  
}
#Reproductor #HoraTime{
  display: block;
  position:relative;
  width: 50px;
 font-size: 12px;
 top: 20px;
 margin-left: 89%;
 color: #FFFFFF;
}
#btnpause{
  display: none;
  display: block;
  border-radius: 50%;
  border:solid 1px #B7B7B7;
  cursor: pointer;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 13.9px;
  padding-right: 13.9px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
#Reproductor #btnplay{
  display: block;
  border-radius: 50%;
  border:solid 1px #B7B7B7;
  cursor: pointer;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 15px;
  padding-right: 15px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
.contener-animacion{
  position: relative;
  overflow: hidden;
  width: 99%;
      height: 280px;  
  margin: 0 auto;
}
.contenedor .cover img{
     width:100%;
     height: 260px;
}
/*sector de  de barra para volumen*/

#volumenTipo {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  border:0px;
  background: none;
}
#volumenTipo:focus {
  outline: none;
}
#volumenTipo::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    background:#807E7E;
  border: 0px solid #000101;
}
#volumenTipo::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.6px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5bdc8+0,828c95+36,7f869b+100 */
  background: #b5bdc8; /* Old browsers */
  background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #7f869b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#7f869b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#7f869b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#7f869b',GradientType=0 ); /* IE6-9 */

}
#volumenTipo:focus::-webkit-slider-runnable-track {
  background: #807E7E;
}
#volumenTipo::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #807E7E;
  border-radius: 25px;
  border: 0px solid #000101;
}
#volumenTipo::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 50%;
  background: #65001c;
  cursor: pointer;
}
#volumenTipo::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
#volumenTipo::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50%;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
#volumenTipo::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50%;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
#volumenTipo::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius:50%;
  background: #65001c;
  cursor: pointer;
}
#volumenTipo:focus::-ms-fill-lower {
  background: #ac51b5;
}
#volumenTipo:focus::-ms-fill-upper {
  background: #ac51b5;
}

/*Redes Sociales*/
.RedesSociales{
  list-style: none;
  display: block;
  padding: 0px;
  width: 100%;
  text-align: center;
}
.RedesSociales li{
  display: inline-block;
  margin-right:9px;
}
#Reproductor .RedesSociales li a span{
  font-size:35px;
  color: #FFFFFF;
}

#Reproductor .RedesSociales li a{

}
#Reproductor .Texto{
  width: 90%;
  margin: 0 auto;
  margin-top: 60px;
  text-align: center;
  color: #fff;
  border-bottom:solid 1px #929292;
  padding-bottom: 7px;
}
/*.fa-facebook-square, .fa-twitter-square,.fa-google-plus-square
/*Animacion */
 .baseline {
    display: block;
  width: 260px;
  height: 260px;
  border-radius: 50%;
    top: 10px;
    left:39px;
  opacity: 0;
  background: magenta;
  z-index: 0;
}
.playing .baseline {
  -webkit-animation: bounce 8275.86207ms linear 32;
          animation: bounce 8275.86207ms linear 32;
}

.riffs {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
      top: 10px;
    left: 39px;
  opacity: 0;
  background: cyan;
}
.playing .riffs {
  -webkit-animation: bounce 1034.48276ms linear 32 17068.96552ms, bounce 1034.48276ms linear 16 74482.75862ms, bounce 1034.48276ms linear 16 107586.2069ms, bounce 1034.48276ms linear 60 157241.37931ms;
          animation: bounce 1034.48276ms linear 32 17068.96552ms, bounce 1034.48276ms linear 16 74482.75862ms, bounce 1034.48276ms linear 16 107586.2069ms, bounce 1034.48276ms linear 60 157241.37931ms;
}

.kicks {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
    top: 10px;
    left: 39px;
  opacity: 0;
  background: yellow;
}
.playing .kicks {
  -webkit-animation: bounce 517.24138ms linear 64 33103.44828ms, bounce 517.24138ms linear 64 91034.48276ms, bounce 517.24138ms linear 64 190344.82759ms;
          animation: bounce 517.24138ms linear 64 33103.44828ms, bounce 517.24138ms linear 64 91034.48276ms, bounce 517.24138ms linear 64 190344.82759ms;
}

.piano {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
      top: 10px;
    left: 39px;
  opacity: 0;
  background: transparent;
  border: 2px solid #fff;
}
.playing .piano {
  -webkit-animation: bounce 2068.96552ms linear 128, color-rhythm 8275.86207ms linear infinite;
          animation: bounce 2068.96552ms linear 128, color-rhythm 8275.86207ms linear infinite;
}

.cover {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
    top: 10px;
    left: 18px;
  opacity: 0;
  background: transparent;
  overflow: hidden;
  opacity: .5;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  z-index: 40;
}
.cover img {
  width: 100%;
  height: auto;
}
.playing .cover {
  opacity: 1;
  -webkit-animation: around-the-world 8275.86207ms linear 128;
          animation: around-the-world 8275.86207ms linear 128;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  20% {
    opacity: .33;
  }
  100% {
    -webkit-transform: scale(2.4);
            transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0;
  }
  20% {
    opacity: .33;
  }
  100% {
    -webkit-transform: scale(2.4);
            transform: scale(2.4);
    opacity: 0;
  }
}
@-webkit-keyframes color-rhythm {
  0% {
    border-color: cyan;
  }
  25% {
    border-color: magenta;
  }
  50% {
    border-color: yellow;
  }
  100% {
    border-color: lime;
  }
}
@keyframes color-rhythm {
  0% {
    border-color: cyan;
  }
  25% {
    border-color: magenta;
  }
  50% {
    border-color: yellow;
  }
  100% {
    border-color: lime;
  }
}
@-webkit-keyframes around-the-world {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes around-the-world {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*Media quieres*/
@media only screen and (max-width:768px){
#Reproductor{
  width: 100%;
  height: 700px;
  min-width: none;
}
#Reproductor  #HoraTime{
  margin-left: 87%;
}
body{
  margin: 0px;
}
#Reproductor #controles ul{
  margin-left: 3px;
}
}