/*body {
  font-family: Roboto;
  background-color: #bbdefb;
}*/
/*.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}*/
.player {
  position: relative;
  background-color: #ffffff;
  background-image: url("https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/tim_minchin_piano.jpg");
  width: 550px;
  height: 375px;
  border-radius: 3px;
  border-bottom: 4px solid #3f51b5;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);

  margin-top: 30px;
   margin-bottom: 30px;
}
.player:hover .mask {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.player .like {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 15px;
  right: 20px;
  z-index: 15;
  font-size: 1.5em;
  vertical-align: middle;
  line-height: 38px;
  color: #f2f2f2;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}
.player .icon-heart {
  display: block;
}
.player .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 2;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.player-info {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 4;
  list-style: none;
  color: #262626;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.player-info li {
  margin-bottom: 7px;
}
.player-info li:nth-child(1) {
  font-size: 1.5em;
}
.player-info li:nth-child(2) {
  font-size: 1.2em;
}
.player-info li:nth-child(3) {
  font-size: .9em;
}
.player .info-two {
  left: auto;
  right: 4.5%;
  z-index: 1;
  color: #f2f2f2;
}
.player .info-two li:nth-child(2) {
  float: right;
}
.player .info-two li:nth-child(3) {
  display: inline-block;
  float: right;
  clear: both;
}
.player #play-button {
  box-sizing: border-box;
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  box-shadow: 0 8px 25px 6px rgba(0, 0, 0, 0.5);
  right: 40px;
  bottom: 90px;
  z-index: 5;
  cursor: pointer;
  -webkit-transition: all 70ms;
  transition: all 70ms;
  border: none;
}
.player #play-button:hover {
  width: 70px;
  height: 70px;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.5);
  right: 45px;
  bottom: 95px;
  -webkit-transition: all 70ms;
  transition: all 70ms;
}
.player #play-button .icon-play {
  position: absolute;
  font-size: 1.5em;
  left: 52%;
  top: 50%;
  -webkit-transform: translate(-48%, -50%);
          transform: translate(-48%, -50%);
  -webkit-transition: all 70ms;
  transition: all 70ms;
  color: #ffffff;
}
.player #play-button:hover .icon-play {
  font-size: 1.2em;
  -webkit-transition: all 70ms;
  transition: all 70ms;
}
.player #play-button .icon-cancel {
  position: absolute;
  font-size: 1.6em;
  left: 50%;
  top: 49%;
  -webkit-transform: translate(-50%, -51%);
          transform: translate(-50%, -51%);
  color: #ffffff;
}
.control-row {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 130px;
  background-color: #ffffff;
  overflow: hidden;
  z-index: 3;
}
.control-row #pause-button {
  box-sizing: border-box;
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f2f2f2;
  left: 40px;
  bottom: 25px;
  z-index: 5;
  cursor: pointer;
  border: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: none;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row #pause-button .icon-pause {
  position: absolute;
  font-size: 1.5em;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .1s;
  transition: all .1s;
  color: #424242;
}
.control-row #pause-button .icon-play {
  position: absolute;
  font-size: 1.5em;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .1s;
  transition: all .1s;
  color: #424242;
}
.control-row .seek-field {
  bottom: 67px;
  left: 148px;
  position: absolute;
  width: 170px;
  z-index: 5;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: none;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row .volume-field {
  bottom: 67px;
  right: 127px;
  position: absolute;
  width: 50px;
  z-index: 5;
  -webkit-transform: scale(0);
          transform: scale(0);
  display: none;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row .volume-icon {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  bottom: 58px;
  right: 185px;
  z-index: 5;
  font-size: 1.2em;
  display: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.control-row .volume-icon .icon-volume-up {
  color: #424242;
}
.like-active {
  color: #ef5350;
  -webkit-animation: scale-animation 0.4s;
          animation: scale-animation 0.4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes scale-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-animation {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.waves-animation-one {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  z-index: 3;
  left: 42.5%;
  bottom: 20%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: waves-animation-one 0.25s;
          animation: waves-animation-one 0.25s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  display: none;
}
@-webkit-keyframes waves-animation-one {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  99% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
  100% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
}
@keyframes waves-animation-one {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  99% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
  100% {
    -webkit-transform: scale(7.8);
            transform: scale(7.8);
  }
}
.waves-animation-two {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  z-index: 3;
  right: 40px;
  bottom: 35px;
  -webkit-transform: scale(7.8);
          transform: scale(7.8);
  display: none;
  -webkit-animation: waves-animation-two 0.2s;
          animation: waves-animation-two 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes waves-animation-two {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes waves-animation-two {
  to {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
.info-active {
  -webkit-animation: info-active-animation 3s;
          animation: info-active-animation 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .37s;
          animation-delay: .37s;
}
@-webkit-keyframes info-active-animation {
  to {
    bottom: 56.5%;
  }
}
@keyframes info-active-animation {
  to {
    bottom: 56.5%;
  }
}
.play-active {
  -webkit-animation: play-animation 0.3s;
          animation: play-animation 0.3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes play-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  98% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px);
            transform: translate(-200px, 65px);
  }
  99% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px) scale(0);
            transform: translate(-200px, 65px) scale(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(0, 65px) scale(1);
            transform: translate(0, 65px) scale(1);
  }
}
@keyframes play-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  98% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px);
            transform: translate(-200px, 65px);
  }
  99% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(-200px, 65px) scale(0);
            transform: translate(-200px, 65px) scale(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-transform: translate(0, 65px) scale(1);
            transform: translate(0, 65px) scale(1);
  }
}
.play-inactive {
  -webkit-animation: play-inactive 1s;
          animation: play-inactive 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes play-inactive {
  from {
    -webkit-transform: translate(0, 65px);
            transform: translate(0, 65px);
  }
}
@keyframes play-inactive {
  from {
    -webkit-transform: translate(0, 65px);
            transform: translate(0, 65px);
  }
}
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"] + .thumb {
  display: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  background: #f2f2f2;
  border-radius: 0;
  border: 0px solid #000101;
}
input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #f2f2f2;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  background: #f2f2f2;
  border-radius: 0;
  border: 0px solid #000101;
}
input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
  padding-top: 5px;
}
input[type="range"]::-ms-fill-lower {
  background: #f2f2f2;
  border: 0px solid transparent;
  border-radius: 0;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
input[type="range"]::-ms-fill-upper {
  background: #f2f2f2;
  border: 0px solid transparent;
  border-radius: 0x;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}
input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
  margin-top: 1px;
}
input[type="range"]::-ms-tooltip {
  display: none;
}
input[type="range"]::-ms-ticks {
  display: none;
}
input[type="range"]:focus::-ms-fill-lower {
  background: #f2f2f2;
}
input[type="range"]:focus::-ms-fill-upper {
  background: #f2f2f2;
}