body {
  font-family: Roboto;
  background-color: #bbdefb;
}


.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: 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: 6px solid #3f51b5;
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, .5);
  z-index: 1;
  &:hover .mask {
    background-color: rgba(255, 255, 255, .1);
    transition: all 1s;
  }
  & .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;
  }
  & .icon-heart {
    display: block;
  }
  & .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .2);
    z-index: 2;
    transition: all 1s;
  }
  &-info {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    list-style: none;
    color: #262626;
    transform: scale(1);
    & li {
      margin-bottom: 7px;
    }
    & li:nth-child(1) {
      font-size: 1.5em;
    }
    & li:nth-child(2) {
      font-size: 1.2em;
    }
    & li:nth-child(3) {
      font-size: .9em;
    }
  }
  & .info-two {
    left: auto;
    right: 4.5%;
    z-index: 1;
    color: #f2f2f2;
    & li:nth-child(2) {
      float: right;
    }
    & li:nth-child(3) {
      display: inline-block;
      float: right;
      clear: both;
    }
  }
  & #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, .5);
    right: 40px;
    bottom: 90px;
    z-index: 5;
    cursor: pointer;
    transition: all 70ms;
    border: none;
    &:hover {
      width: 70px;
      height: 70px;
      box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .5);
      right: 45px;
      bottom: 95px;
      transition: all 70ms;
    }
    & .icon-play {
      position: absolute;
      font-size: 1.5em;
      left: 52%;
      top: 50%;
      transform: translate(-48%, -50%);
      transition: all 70ms;
      color: #ffffff;
    }
    &:hover .icon-play {
      font-size: 1.2em;
      transition: all 70ms;
    }
    & .icon-cancel {
      position: absolute;
      font-size: 1.6em;
      left: 50%;
      top: 49%;
      transform: translate(-50%, -51%);
      color: #ffffff;
    }
  }
}

.control-row {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 130px;
  background-color: #ffffff;
  overflow: hidden;
  z-index: 3;
  & #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;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    & .icon-pause {
      position: absolute;
      font-size: 1.5em;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: all .1s;
      color: #424242;
    }
    & .icon-play {
      position: absolute;
      font-size: 1.5em;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: all .1s;
      color: #424242;
    }
  }
  & .seek-field {
    bottom: 67px;
    left: 148px;
    position: absolute;
    width: 170px;
    z-index: 5;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
  }
  & .volume-field {
    bottom: 67px;
    right: 127px;
    position: absolute;
    width: 50px;
    z-index: 5;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
  }
  & .volume-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    bottom: 58px;
    right: 185px;
    z-index: 5;
    font-size: 1.2em;
    display: none;
    transform: scale(0);
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    & .icon-volume-up {
      color: #424242;
    }
  }
}

.like-active {
  color: #ef5350;
  animation: scale-animation .4s;
  animation-fill-mode: forwards;
}

@keyframes scale-animation {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    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%;
  transform: scale(0);
  animation: waves-animation-one .25s;
  animation-fill-mode: forwards;
  animation-delay: .3s;
  display: none;
}

@keyframes waves-animation-one {
  0% {
    transform: scale(1);
  }
  99% {
    transform: scale(7.8);
  }
  100% {
    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;
  transform: scale(7.8);
  display: none;
  animation: waves-animation-two .2s;
  animation-fill-mode: forwards;
}

@keyframes waves-animation-two {
  to {
    transform: scale(0);
  }
}

.info-active {
  animation: info-active-animation 3s;
  animation-fill-mode: forwards;
  animation-delay: .37s;
}

@keyframes info-active-animation {
  to {
    bottom: 56.5%;
  }
}

.play-active {
  animation: play-animation .3s;
  animation-fill-mode: forwards;
}

@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);
    transform: translate(-200px, 65px);
  }
  99% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translate(-200px, 65px) scale(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translate(0, 65px) scale(1);
  }
}

.play-inactive {
  animation: play-inactive 1s;
  animation-fill-mode: forwards
}

@keyframes play-inactive {
  from {
    transform: translate(0, 65px);
  }
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  position: absolute;
  top: 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;
}