.cnt-play{

  width: 100%;

  height: 300px;

  padding: 0;

  position: relative;

  margin: 0;

  overflow: hidden;

  background: #BBC4BC;

  -webkit-user-select: none;

  user-select: none;

  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  zoom: 0.6;
}



/* Top Info */

#title {

  position: absolute;

  width: 600px;

  top: 10%;

  left: 50%;

  transform: translate(-50%,0);

  line-height: 34px;

  height: 34px;

  text-align: center;

  font-size: 26px;

  opacity: 0.9;

  font-weight: 300;

  color: #242825;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);

}

#timer {

  position: absolute;

  top: 0;

  left: 3%;

  text-align: left;

  font-size: 26px;

  opacity: 0.9;

  font-weight: 300;

  color: #242825;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);

}

#duration {

  position: absolute;

  top: 0;

  right: 3%;

  text-align: right;

  font-size: 26px;

  opacity: 0.5;

  font-weight: 300;

  color: #242825;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);

}



/* Controls */

.controlsOuter {

  position: absolute;

  height: 70px;

  width: 600px;

  left: 50%;

  bottom: 10%;

  transform: translate(-50%,0%);

}

.controlsInner {

  position: absolute;

  width: 340px;

  height: 70px;

  left: 50%;

  margin: 0 -170px;

}

.btn {

  position: absolute;

  cursor: pointer;

  opacity: 0.9;

  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));

  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));

  -webkit-user-select: none;

  user-select: none;

}

.btn:hover {

  opacity: 1;

}

#playBtn {

  background-image: url(../images/play-a.png);

  width: 69px;

  height: 70px;

  left: 50%;

  margin: auto -34.5px;

}

#pauseBtn {

  background-image: url(../images/pause-a.png);

  width: 69px;

  height: 70px;

  left: 50%;

  margin: auto -34.5px;

  display: none;

}

#prevBtn {

  background-image: url(../images/left-a.png);

  width: 35px;

  height: 35px;

  left: 0;

  top: 50%;

  margin: -17.5px auto;

}

#nextBtn {

  background-image: url(../images/right-a.png);

  width: 35px;

  height: 35px;

  right: 0;

  top: 50%;

  margin: -17.5px auto;

}

#playlistBtn {

  background-image: url(../images/list-a.png);;

  width: 35px;

  height: 35px;

  top: 50%;

  left: 3%;

  margin: -17.5px auto;

}

#volumeBtn {

  background-image: url(../images/audio-a.png);

  width: 35px;

  height: 35px;

  top: 50%;

  right: 3%;

  margin: -17.5px auto;

}



/* Progress */

#waveform {

  width: 100%;

  height: 30%;

  position: absolute;

  left: 0;

  top: 60%;

  margin: -15% auto;

  display: none;

  cursor: pointer;

  opacity: 0.8;

  -webkit-user-select: none;

  user-select: none;

}

#waveform:hover {

  opacity: 1;

}

#bar {

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 2px;

  background-color: rgba(255, 255, 255, 0.9);

  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);

  opacity: 0.9;

}

#progress {

  position: absolute;

  top: 0;

  left: 0;

  width: 0%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.1);

  z-index: -1;

}



/* Loading */

#loading {

  position: absolute;

  left: 50%;

  top: 50%;

  margin: -35px;

  width: 70px;

  height: 70px;

  background-color: #fff;

  border-radius: 100%;  

  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;

  animation: sk-scaleout 1.0s infinite ease-in-out;

  display: none;

}

@-webkit-keyframes sk-scaleout {

  0% { -webkit-transform: scale(0) }

  100% {

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

@keyframes sk-scaleout {

  0% { 

    -webkit-transform: scale(0);

    transform: scale(0);

  } 100% {

    -webkit-transform: scale(1.0);

    transform: scale(1.0);

    opacity: 0;

  }

}



/* Plylist */

#playlist {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: rgba(0, 0, 0, 0.5);

  display: none;

}

#list {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}

.list-song {

  width: 100%;

  height: auto;

  font-size: 2em;

  text-align: center;

  font-weight: bold;

  color: #fff;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);

}

.list-song:hover {

  background-color: rgba(255, 255, 255, 0.1);

  cursor: pointer;

}



/* Volume */

#volume {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: rgba(0, 0, 0, 0.5);

  touch-action: none;

  -webkit-user-select: none;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  display: none;

}

.bar {

  position: absolute;

  top: 50%;

  left: 5%;

  margin: -5px auto;

  height: 10px;

  background-color: rgba(255, 255, 255, 0.9);

  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);

}

#barEmpty {

  width: 90%;

  opacity: 0.5;

  box-shadow: none;

  cursor: pointer;

}

#barFull {

  width: 90%;

}

#sliderBtn {

  width: 50px;

  height: 50px;

  position: absolute;

  top: 50%;

  left: 93.25%;

  margin: -25px auto;

  background-color: rgba(255, 255, 255, 0.8);

  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);

  border-radius: 25px;

  cursor: pointer;

}



/* Fade-In */

.fadeout {

  webkit-animation: fadeout 0.5s;

  -ms-animation: fadeout 0.5s;

  animation: fadeout 0.5s;

}

.fadein {

  webkit-animation: fadein 0.5s;

  -ms-animation: fadein 0.5s;

  animation: fadein 0.5s;

}

@keyframes fadein {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@-webkit-keyframes fadein {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@-ms-keyframes fadein {

  from { opacity: 0; }

  to   { opacity: 1; }

}

@keyframes fadeout {

  from { opacity: 1; }

  to   { opacity: 0; }

}

@-webkit-keyframes fadeout {

  from { opacity: 1; }

  to   { opacity: 0; }

}

@-ms-keyframes fadeout {

  from { opacity: 1; }

  to   { opacity: 0; }

}



@media(max-width:600px){

  #title,.controlsOuter{

    width: 100%;

     zoom:0.7;

  }

  .controlsInner {

    position: absolute;

    width: 200px;

    height: 70px;

    left: 50%;

    margin-left: -100px;

  }

  .cnt-play{
    zoom:1;
  }
}