@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';

body {
  background: #8e9eab;
  background: -webkit-linear-gradient(right, #8e9eab , #eef2f3);
  background: linear-gradient(to left, #8e9eab , #eef2f3);
}


@-webkit-keyframes wave {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


@keyframes wave {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.music-card {
 /* margin: 10vmin auto; */
  background: #fff;
  box-shadow: 9px 7px 37px -6px rgba(0,0,0,0.75);
  overflow: hidden;
 /* position: relative; */
  width: 70vmin;
  height: 85vmin;
    border-radius: 1vmin;
position: absolute;
  top: 45%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);


}

.image {
  background: url('/akmaliah2016/Bapak-bw.jpg') no-repeat 75%;
  background-size: cover;  
  position: absolute;
  z-index: 1;
  opacity: 0.5;
  width: 70vmin;
  height: 60vmin;
}

.image:after {
  /** height: 30vmin;
  content: '';
  top: 200px;
  position: absolute;
  width: 100%;
  z-index: 1;
  background: -webkit-linear-gradient(rgba(9, 2, 4, 0), #444);
  background: linear-gradient(rgba(9, 2, 4, 0), #444); **/
}

.wave {
  position: absolute;
  height: 87vmin;
  width: 92vmin;
  opacity: 0.4;
  top: 0%;
  left: -15%;
  margin-top:  -40%;
  margin-left: 0px;
  background: -webkit-radial-gradient(#353535, #383737);
  background: radial-gradient(#353535, #383737);
  

}

.wave:nth-child(2),
.wave:nth-child(3) {
  top: 10px;
}

.playing .wave {
  border-radius: 50%;
  -webkit-animation: wave 3000ms infinite linear;
          animation: wave 3000ms infinite linear;
}
/* when stop */
.wave {
  border-radius: 60%;
  -webkit-animation: wave 55s infinite linear;
          animation: wave 55s infinite linear;
}

.playing .wave:nth-child(2) {
  -webkit-animation-duration: 4000ms;
          animation-duration: 4000ms;
}
/* when stop */
.wave:nth-child(2) {
  -webkit-animation-duration: 50s;
          animation-duration: 50s;
}

.playing .wave:nth-child(3) {
  -webkit-animation-duration: 5000ms;
          animation-duration: 5000ms;
}
/* when stop */
.wave:nth-child(3) {
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
}

.info {
  position: absolute;
  bottom: 10vmin;
  left: 0;
  right: 0;
  text-align: center;
}

.title {
  font-size: 4vmin;
  font-weight: 700;
  color: #007f3d;
  margin-bottom: 0.5vmin;
  text-transform: uppercase;
  font-family: 'Philosopher', sans-serif;
}

.artist {
  color: #333;
  font-weight: 400;
  font-size: 2.5vmin;
  margin-bottom: -.5vmin;
  letter-spacing: 0em;
  font-family: 'Philosopher', sans-serif;
}
.fa {
  position: absolute;
  bottom: 12px;
  right: 10px;
  /*font-size: 9vmin !important;*/
  cursor: pointer;
  color: #007f3d;
  padding: 10px;
  border-bottom: : 4px solid;
  
}
.fa-play {
  /*display: none;*/
}