3D CSS Music Player Design

by Posted on

This is awesome CSS only 3d music player design which you can integrate with any music player plugin and customize your music player theme with this music player and make unique 3d look music player.

3D CSS Music Player Design

HTML

<div class='player'>
  <div class='player_inner'>
    <div class='player_inner__top'>
      <div class='t_left'>
        <i class='fa fa-bars'></i>
      </div>
      <div class='t_mid'>
        <h1>CUB3DPlayer</h1>
      </div>
      <div class='t_right'>
        <i class='fa fa-search'></i>
      </div>
    </div>
    <div class='player_inner__middle'>
      <input class='trigger--4' name='omni' type='radio'>
      <input class='trigger--3' name='omni' type='radio'>
      <input class='trigger--2' name='omni' type='radio'>
      <input class='trigger--1' name='omni' type='radio'>
      <input class='empty'>
      <div class='cube'>
        <div class='cube_inner'>
          <div class='cube_inner__front'>
            <div class='bars'>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
              <div class='bars_bar'></div>
            </div>
            <div class='details'>
              <div class='details_album'></div>
              <h2>Koan Sound - Meanwhile in the future</h2>
              <h3>Funkblaster</h3>
            </div>
          </div>
          <div class='cube_inner__left'>
            <div class='options'>
              <i class='fa fa-headphones'></i>
              <i class='fa fa-redo-alt'></i>
              <i class='fa fa-random'></i>
              <i class='fa fa-fast-forward'></i>
              <i class='fa fa-music'></i>
            </div>
          </div>
          <div class='cube_inner__right'>
            <div class='volume'>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <div class='volume_pip'></div>
              <i class='fa fa-volume-up'></i>
            </div>
          </div>
        </div>
      </div>
      <div class='r_trim'></div>
      <div class='l_trim'></div>
      <div class='shadow_right'></div>
      <div class='shadow_left'></div>
    </div>
    <div class='player_inner__bottom'>
      <div class='options'>
        <i class='fa fa-repeat'></i>
        <i class='fa fa-random'></i>
      </div>
      <div class='playbar'>
        <div class='playbar_inner'></div>
        <div class='playbar_left'>
          <span>0:00</span>
        </div>
        <div class='playbar_right'>
          <span>3:45</span>
        </div>
      </div>
      <div class='controls'>
        <div class='controls_left'>
          <i class='fa fa-step-backward'></i>
        </div>
        <div class='controls_middle'>
          <i class='fa fa-play-circle'></i>
        </div>
        <div class='controls_right'>
          <i class='fa fa-step-forward'></i>
        </div>
      </div>
    </div>
  </div>
</div>


CSS

@import url("https://fonts.googleapis.com/css?family=Nunito:600");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
* {
  box-sizing: border-box;
}
 
body {
  background: #cbded8;
  margin: 0;
  overflow: hidden;
}
 
.b_overlay {
  position: fixed;
  background: rgba(69, 195, 155, 0.64);
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
}
 
.bar {
  background: white;
  position: fixed;
  bottom: -50px;
  -webkit-animation: up 300ms 500ms forwards;
          animation: up 300ms 500ms forwards;
  width: 100%;
  height: 48px;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  font-weight: 600;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  z-index: 2;
}
.bar_inner__left {
  float: left;
}
.bar_inner__left .brand {
  background: #45c39b;
  position: relative;
  padding: 15px;
  display: inline-block;
  margin-right: -4px;
  transition: all 300ms;
}
.bar_inner__left .brand a {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.bar_inner__left .brand img {
  width: 40px;
  position: relative;
  top: 2px;
}
.bar_inner__left .brand:hover {
  background: #35a07e;
}
.bar_inner__left .selection {
  position: relative;
  display: inline-block;
  background: white;
  border-right: 1px solid #e6e6e6;
  padding: 15px 20px 18px 20px;
  cursor: pointer;
  font-weight: 600;
  color: #5d6265;
  min-width: 340px;
  position: relative;
  top: -1px;
  transition: background 300ms, border 300ms;
}
.bar_inner__left .selection:hover {
  background: #eceff3;
  border-right: 1px solid #d9dfe7;
}
.bar_inner__left .selection .fa-codepen {
  margin-right: 8px;
  font-size: 15px;
}
.bar_inner__left .selection .fa-chevron-up {
  font-size: 10px;
  opacity: 0.4;
  position: relative;
  top: 4px;
  margin-left: 8px;
  float: right;
  transition: all 200ms;
  -webkit-transform-origin: 5px 6px;
          transform-origin: 5px 6px;
}
.bar_inner__left .selection_list {
  position: absolute;
  background: #eceff3;
  border-bottom: 0;
  opacity: 0;
  bottom: -250px;
  width: 100%;
  max-height: 165px;
  z-index: -1;
  border-bottom: 1px solid #dce2e9;
  transition: bottom 200ms, opacity 200ms;
  left: 0;
  overflow: scroll;
}
.bar_inner__left .selection_list::-webkit-scrollbar {
  width: 3px;
  background-color: #F5F5F5;
}
.bar_inner__left .selection_list::-webkit-scrollbar-thumb {
  background-color: #000000;
  border: 2px solid #555555;
}
.bar_inner__left .selection_list a {
  display: block;
  text-decoration: none;
  padding: 15px;
  position: relative;
  overflow: hidden;
  transition: all 300ms;
  color: #5d6265;
}
.bar_inner__left .selection_list a i {
  position: absolute;
  opacity: 0;
  right: -40px;
  transition: right 300ms, opacity 300ms;
  font-size: 10px;
  top: 20px;
}
.bar_inner__left .selection_list a:hover {
  background: #dfe4eb;
  text-indent: 10px;
  color: #309292;
}
.bar_inner__left .selection_list a:hover i {
  opacity: 1;
  right: 20px;
}
.bar_inner__left p {
  margin: 0;
  display: inline-block;
  margin-left: 14px;
}
.bar_inner__left p i {
  color: red;
  font-size: 10px;
}
.bar_inner__right {
  float: right;
  color: white;
}
.bar_inner__right i {
  margin-right: 10px;
}
.bar_inner__right .youtube {
  background: #e22424;
  display: inline-block;
  margin-left: -4px;
  padding: 16px 19px 17px 19px;
  transition: all 300ms;
  cursor: pointer;
  position: relative;
}
.bar_inner__right .youtube i.fa-chevron-right {
  margin-left: 10px;
  font-size: 10px;
  position: absolute;
  right: -100px;
  opacity: 0;
  transition: all 300ms;
  top: 20px;
}
.bar_inner__right .youtube i.fa-play {
  font-size: 12px;
}
.bar_inner__right .youtube .v_preview {
  background: #e22424;
  width: 102%;
  transition: all 300ms;
  position: absolute;
  height: 150px;
  left: 0;
  top: 0;
  z-index: -1;
}
.bar_inner__right .youtube:hover {
  background: #cc1b1b;
  padding: 16px 29px 17px 19px;
}
.bar_inner__right .youtube:hover i.fa-chevron-right {
  right: 0;
  opacity: 1;
}
.bar_inner__right .youtube:hover .v_preview {
  top: -150px;
}
.bar_inner__right .tweet {
  display: inline-block;
  color: #1da1f2;
  padding: 16px 20px 17px 20px;
  transition: all 300ms;
  cursor: pointer;
  position: relative;
  margin-left: -4px;
}
.bar_inner__right .tweet a {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.bar_inner__right .tweet:hover {
  background: #0d92e3;
  color: white;
}
.bar_inner__right .codepen {
  display: inline-block;
  color: #5d6265;
  border-right: 1px solid #e6e6e6;
  padding: 16px 20px 17px 20px;
  transition: all 300ms;
  cursor: pointer;
  position: relative;
}
.bar_inner__right .codepen a {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.bar_inner__right .codepen:hover {
  background: #1a1b1f;
  color: white;
}
 
.owl .left-eye,
.owl .right-eye {
  border-radius: 50%;
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  bottom: 71px;
  z-index: 2;
}
 
.owl .left-pupil,
.owl .right-pupil {
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
  display: block;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  position: absolute;
  -webkit-animation: blink 3s infinite;
          animation: blink 3s infinite;
}
 
.owl {
  width: 100px;
  position: absolute;
  right: 60px;
  bottom: -140px;
  -webkit-animation: owl 1s 1s forwards, owl_bob 1.4s 2s infinite;
          animation: owl 1s 1s forwards, owl_bob 1.4s 2s infinite;
  transition: all 1s;
  z-index: 1;
}
.owl .left-eye {
  right: 63px;
}
.owl .right-eye {
  right: 23px;
}
.owl .love {
  opacity: 0;
  position: absolute;
  bottom: 50px;
  right: 94px;
  transition: all .2s .2s;
  width: 70px;
}
 
._video_id,
._pen_id,
._pen_title {
  display: none;
}
 
@media (max-width: 900px) {
  .bar_inner__left, .bar_inner__right {
    width: 50%;
  }
  .bar_inner__left .tweet, .bar_inner__left .codepen, .bar_inner__right .tweet, .bar_inner__right .codepen {
    width: 20%;
    text-align: center;
  }
  .bar_inner__left .tweet i, .bar_inner__left .codepen i, .bar_inner__right .tweet i, .bar_inner__right .codepen i {
    margin: 0;
  }
  .bar_inner__left .youtube, .bar_inner__right .youtube {
    width: 60%;
    left: 4px;
  }
  .bar_inner__left span, .bar_inner__right span {
    display: none;
  }
  .bar_inner__left .brand {
    z-index: 1;
  }
  .bar_inner__left .selection {
    padding-left: 90px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 50%;
  }
}
@media (max-width: 764px) {
  .bar_inner__left, .bar_inner__right {
    width: 100%;
  }
  .bar_inner__left .tweet, .bar_inner__left .codepen, .bar_inner__right .tweet, .bar_inner__right .codepen {
    width: 20%;
    display: none;
    border: none;
    text-align: center;
  }
  .bar_inner__left .tweet i, .bar_inner__left .codepen i, .bar_inner__right .tweet i, .bar_inner__right .codepen i {
    margin: 0;
  }
  .bar_inner__left .youtube, .bar_inner__right .youtube {
    width: 60%;
    display: none;
    left: 4px;
  }
  .bar_inner__left span, .bar_inner__right span {
    display: none;
  }
  .bar_inner__left .brand {
    z-index: 1;
  }
  .bar_inner__left .selection {
    padding-left: 90px;
    left: 0;
    border: none !important;
    position: absolute;
    top: 1px;
    width: 100%;
  }
}
@-webkit-keyframes up {
  0% {
    bottom: -50px;
  }
  100% {
    bottom: 0;
  }
}
@keyframes up {
  0% {
    bottom: -50px;
  }
  100% {
    bottom: 0;
  }
}
@-webkit-keyframes owl {
  0% {
    bottom: -140px;
  }
  100% {
    bottom: 10px;
  }
}
@keyframes owl {
  0% {
    bottom: -140px;
  }
  100% {
    bottom: 10px;
  }
}
@-webkit-keyframes owl_bob {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 14px;
  }
  100% {
    bottom: 10px;
  }
}
@keyframes owl_bob {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 14px;
  }
  100% {
    bottom: 10px;
  }
}
@-webkit-keyframes blink {
  0% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  46% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    height: 0px;
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  54% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes blink {
  0% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  46% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    height: 0px;
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  54% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    height: 8px;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
.shadow_right {
  width: 90px;
  height: 380px;
  transition: all 300ms 200ms;
  top: 0px;
  position: absolute;
  pointer-events: none;
  box-shadow: 0px 0px 0px #303f45 inset;
}
 
i {
  transition: all .3s;
  cursor: pointer;
}
 
i:hover {
  color: #44f5b7;
}
 
.shadow_left {
  width: 90px;
  height: 380px;
  transition: all 300ms 200ms;
  top: 0px;
  position: absolute;
  right: 0;
  pointer-events: none;
  box-shadow: 0px 0px 0px #303f45 inset;
}
 
.r_trim {
  width: 260px;
  height: 660px;
  position: absolute;
  left: 380px;
  z-index: 2;
  right: 0;
  top: -82px;
  margin: auto;
  background: #4cb892;
}
 
.l_trim {
  width: 260px;
  height: 660px;
  position: absolute;
  z-index: 2;
  left: -640px;
  right: 0;
  top: -33px;
  margin: auto;
  background: #4cb892;
}
 
body {
  font-family: 'Open Sans', sans-serif;
  background: #4cb892;
}
 
body .player_inner, body .player_inner__middle .cube {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
}
 
body .player_inner__middle .cube_inner > div {
  width: 380px;
  height: 380px;
  background: pink;
  position: absolute;
  -webkit-transform-style: preserve-3D;
          transform-style: preserve-3D;
}
 
body .player_inner {
  background: #3a4e47;
  width: 380px;
  height: 640px;
  border-radius: 6px;
  -webkit-perspective: 800px;
          perspective: 800px;
}
body .player_inner__top {
  height: 70px;
  padding: 24px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koan.png");
  background-size: 103% !important;
  margin-bottom: 0px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
body .player_inner__top i,
body .player_inner__top h1 {
  position: relative;
  color: white;
  font-weight: 600;
}
body .player_inner__top .t_left {
  width: 25%;
  float: left;
}
body .player_inner__top .t_mid {
  float: left;
  text-align: center;
  width: 50%;
}
body .player_inner__top .t_mid h1 {
  margin: 0;
  font-size: 12px;
}
body .player_inner__top .t_right {
  float: right;
  width: 25%;
  text-align: right;
}
body .player_inner__middle {
  position: relative;
  height: 380px;
  background: #40555f;
  box-shadow: 0px 0px 110px #181f23 inset;
}
body .player_inner__middle .empty {
  display: none;
}
body .player_inner__middle input {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent !important;
  outline: none;
  transition: all .3s;
  width: 60px !important;
  height: 50px !important;
  line-height: 16px;
}
body .player_inner__middle input:hover {
  background: #00000061 !important;
}
body .player_inner__middle input:hover:after {
  color: #44f5b7 !important;
}
body .player_inner__middle input:nth-of-type(1) {
  width: 130px !important;
  top: 40px;
  height: 320px !important;
}
body .player_inner__middle input:nth-of-type(1):hover {
  background: none !important;
}
body .player_inner__middle input:nth-of-type(1)::after {
  font-family: 'Open Sans', sans-serif, 'fontawesome';
  content: '\f001   Now Playing';
  display: block;
  left: 0 !important;
  color: white;
  font-size: 13px;
  cursor: pointer;
}
body .player_inner__middle input:nth-of-type(2) {
  display: none;
}
body .player_inner__middle input:nth-of-type(2)::after {
  font-family: 'fontawesome';
  content: '\f001';
  display: block;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
body .player_inner__middle input:nth-of-type(3) {
  BORDER-TOP-LEFT-RADIUS: 50PX;
  border-bottom-left-radius: 50px;
}
body .player_inner__middle input:nth-of-type(3)::after {
  font-family: 'fontawesome';
  content: '\f028';
  display: block;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
body .player_inner__middle input:nth-of-type(3):checked {
  opacity: 0;
  right: -50px;
  box-shadow: 0px 0px 0px 100px #00000061;
  pointer-events: none;
}
body .player_inner__middle input:nth-of-type(3):checked + input + input + div > .cube_inner > .cube_inner__right i {
  opacity: 1;
  top: 8px;
  transition: all .3s .3s;
}
body .player_inner__middle input:nth-of-type(3):checked + input + input + div + div + div + div {
  display: block;
  box-shadow: 60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle input:nth-of-type(3):checked + input + input + div + div + div + div + div {
  display: block;
  box-shadow: -60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle input:nth-of-type(4) {
  BORDER-TOP-right-RADIUS: 50PX;
  border-bottom-right-radius: 50px;
}
body .player_inner__middle input:nth-of-type(4)::after {
  font-family: 'fontawesome';
  content: '\f1de';
  display: block;
  color: white;
  font-size: 18px;
  cursor: pointer;
  left: 4px;
}
body .player_inner__middle input:nth-of-type(4):checked {
  opacity: 0;
  left: -50px;
  pointer-events: none;
  box-shadow: 0px 0px 0px 100px #00000061;
}
body .player_inner__middle input:nth-of-type(4):checked + input + div + div + div + div {
  display: block;
  box-shadow: 60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle input:nth-of-type(4):checked + input + div + div + div + div + div {
  display: block;
  box-shadow: -60px 10px 50px -17px #303f45 inset;
}
body .player_inner__middle .trigger--1, body .player_inner__middle .trigger--2, body .player_inner__middle .trigger--3, body .player_inner__middle .trigger--4 {
  background: black;
  width: 20px;
  cursor: pointer;
  height: 400px;
  position: absolute;
  z-index: 2;
  margin: auto;
  text-align: center;
}
body .player_inner__middle .trigger--1::after, body .player_inner__middle .trigger--2::after, body .player_inner__middle .trigger--3::after, body .player_inner__middle .trigger--4::after {
  position: relative;
  top: 18px;
  left: -6px;
  transition: all .3s;
}
body .player_inner__middle .trigger--1 {
  left: 0px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 40px;
}
body .player_inner__middle .trigger--1:checked + input + .cube {
  -webkit-transform: translateY(-50%) rotateX(0) rotateY(30deg);
          transform: translateY(-50%) rotateX(0) rotateY(30deg);
  -webkit-transform-origin: 200px 0px -200px;
          transform-origin: 200px 0px -200px;
  transition: -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s, -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
}
body .player_inner__middle .trigger--2 {
  left: auto;
  right: 0px;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 40px;
}
body .player_inner__middle .trigger--2:checked + input + input + .cube {
  -webkit-transform: translateY(-50%) rotateX(0) rotateY(-30deg);
          transform: translateY(-50%) rotateX(0) rotateY(-30deg);
  -webkit-transform-origin: 200px 0px -200px;
          transform-origin: 200px 0px -200px;
  transition: -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s, -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
}
body .player_inner__middle .trigger--3 {
  left: 0;
  right: 0;
  top: 0px;
  bottom: auto;
  width: 40px;
  height: 20px;
}
body .player_inner__middle .trigger--3:checked + input + input + input + .cube {
  -webkit-transform: translateY(-50%) rotateX(0) rotateY(0);
          transform: translateY(-50%) rotateX(0) rotateY(0);
  -webkit-transform-origin: 200px 200px -200px;
          transform-origin: 200px 200px -200px;
  transition: -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s, -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
}
body .player_inner__middle .trigger--4 {
  left: 0;
  right: 0;
  top: 0px;
  bottom: auto;
  width: 40px;
  height: 20px;
}
body .player_inner__middle .trigger--4:checked + input + input + input + input + .cube {
  -webkit-transform: translateY(-50%) rotateX(0) rotateY(0);
          transform: translateY(-50%) rotateX(0) rotateY(0);
  -webkit-transform-origin: 200px 200px -200px;
          transform-origin: 200px 200px -200px;
  transition: -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s;
  transition: transform 300ms 200ms, transform-origin 0s, -webkit-transform 300ms 200ms, -webkit-transform-origin 0s;
}
body .player_inner__middle .cube {
  top: 190px;
  height: 380px;
  -webkit-transform-style: preserve-3D;
          transform-style: preserve-3D;
  -webkit-perspective-origin: 190px 190px;
          perspective-origin: 190px 190px;
  transition: all 300ms 200ms cubic-bezier(0.1, 1.94, 0.32, 1.02), -webkit-transform-origin 0ms;
  transition: all 300ms 200ms cubic-bezier(0.1, 1.94, 0.32, 1.02), transform-origin 0ms;
  transition: all 300ms 200ms cubic-bezier(0.1, 1.94, 0.32, 1.02), transform-origin 0ms, -webkit-transform-origin 0ms;
}
body .player_inner__middle .cube_inner {
  height: 380px;
  -webkit-transform-style: preserve-3D;
          transform-style: preserve-3D;
}
body .player_inner__middle .cube_inner > div:nth-of-type(1) {
  background: #ffb6c3;
}
body .player_inner__middle .cube_inner > div:nth-of-type(2) {
  background: #ffacba;
}
body .player_inner__middle .cube_inner > div:nth-of-type(3) {
  background: #ffa1b2;
}
body .player_inner__middle .cube_inner > div:nth-of-type(4) {
  background: #ff97a9;
}
body .player_inner__middle .cube_inner__front {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koan.png") !important;
  background-size: 103% !important;
  background-position-y: -71px !important;
}
body .player_inner__middle .cube_inner__front .bars {
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform: rotatez(180deg);
          transform: rotatez(180deg);
  width: 100%;
  z-index: 1;
}
body .player_inner__middle .cube_inner__front .bars_bar {
  width: 10px;
  background: white;
  opacity: 0.1;
  float: left;
  width: 10%;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(1) {
  -webkit-animation: eq 1s 2ms infinite ease-in-out;
          animation: eq 1s 2ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(2) {
  -webkit-animation: eq 1s 76ms infinite ease-in-out;
          animation: eq 1s 76ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(3) {
  -webkit-animation: eq 1s 78ms infinite ease-in-out;
          animation: eq 1s 78ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(4) {
  -webkit-animation: eq 1s 88ms infinite ease-in-out;
          animation: eq 1s 88ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(5) {
  -webkit-animation: eq 1s 60ms infinite ease-in-out;
          animation: eq 1s 60ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(6) {
  -webkit-animation: eq 1s 96ms infinite ease-in-out;
          animation: eq 1s 96ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(7) {
  -webkit-animation: eq 1s 119ms infinite ease-in-out;
          animation: eq 1s 119ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(8) {
  -webkit-animation: eq 1s 248ms infinite ease-in-out;
          animation: eq 1s 248ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(9) {
  -webkit-animation: eq 1s 243ms infinite ease-in-out;
          animation: eq 1s 243ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(10) {
  -webkit-animation: eq 1s 10ms infinite ease-in-out;
          animation: eq 1s 10ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(11) {
  -webkit-animation: eq 1s 187ms infinite ease-in-out;
          animation: eq 1s 187ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(12) {
  -webkit-animation: eq 1s 264ms infinite ease-in-out;
          animation: eq 1s 264ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(13) {
  -webkit-animation: eq 1s 39ms infinite ease-in-out;
          animation: eq 1s 39ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(14) {
  -webkit-animation: eq 1s 560ms infinite ease-in-out;
          animation: eq 1s 560ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(15) {
  -webkit-animation: eq 1s 375ms infinite ease-in-out;
          animation: eq 1s 375ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(16) {
  -webkit-animation: eq 1s 336ms infinite ease-in-out;
          animation: eq 1s 336ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(17) {
  -webkit-animation: eq 1s 17ms infinite ease-in-out;
          animation: eq 1s 17ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(18) {
  -webkit-animation: eq 1s 594ms infinite ease-in-out;
          animation: eq 1s 594ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(19) {
  -webkit-animation: eq 1s 589ms infinite ease-in-out;
          animation: eq 1s 589ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(20) {
  -webkit-animation: eq 1s 600ms infinite ease-in-out;
          animation: eq 1s 600ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(21) {
  -webkit-animation: eq 1s 378ms infinite ease-in-out;
          animation: eq 1s 378ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(22) {
  -webkit-animation: eq 1s 220ms infinite ease-in-out;
          animation: eq 1s 220ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(23) {
  -webkit-animation: eq 1s 759ms infinite ease-in-out;
          animation: eq 1s 759ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(24) {
  -webkit-animation: eq 1s 576ms infinite ease-in-out;
          animation: eq 1s 576ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(25) {
  -webkit-animation: eq 1s 275ms infinite ease-in-out;
          animation: eq 1s 275ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(26) {
  -webkit-animation: eq 1s 936ms infinite ease-in-out;
          animation: eq 1s 936ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(27) {
  -webkit-animation: eq 1s 891ms infinite ease-in-out;
          animation: eq 1s 891ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(28) {
  -webkit-animation: eq 1s 84ms infinite ease-in-out;
          animation: eq 1s 84ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(29) {
  -webkit-animation: eq 1s 580ms infinite ease-in-out;
          animation: eq 1s 580ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(30) {
  -webkit-animation: eq 1s 210ms infinite ease-in-out;
          animation: eq 1s 210ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(31) {
  -webkit-animation: eq 1s 589ms infinite ease-in-out;
          animation: eq 1s 589ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(32) {
  -webkit-animation: eq 1s 704ms infinite ease-in-out;
          animation: eq 1s 704ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(33) {
  -webkit-animation: eq 1s 561ms infinite ease-in-out;
          animation: eq 1s 561ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(34) {
  -webkit-animation: eq 1s 748ms infinite ease-in-out;
          animation: eq 1s 748ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(35) {
  -webkit-animation: eq 1s 1085ms infinite ease-in-out;
          animation: eq 1s 1085ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(36) {
  -webkit-animation: eq 1s 432ms infinite ease-in-out;
          animation: eq 1s 432ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(37) {
  -webkit-animation: eq 1s 407ms infinite ease-in-out;
          animation: eq 1s 407ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(38) {
  -webkit-animation: eq 1s 798ms infinite ease-in-out;
          animation: eq 1s 798ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(39) {
  -webkit-animation: eq 1s 585ms infinite ease-in-out;
          animation: eq 1s 585ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(40) {
  -webkit-animation: eq 1s 960ms infinite ease-in-out;
          animation: eq 1s 960ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(41) {
  -webkit-animation: eq 1s 369ms infinite ease-in-out;
          animation: eq 1s 369ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(42) {
  -webkit-animation: eq 1s 168ms infinite ease-in-out;
          animation: eq 1s 168ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(43) {
  -webkit-animation: eq 1s 473ms infinite ease-in-out;
          animation: eq 1s 473ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(44) {
  -webkit-animation: eq 1s 748ms infinite ease-in-out;
          animation: eq 1s 748ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(45) {
  -webkit-animation: eq 1s 315ms infinite ease-in-out;
          animation: eq 1s 315ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(46) {
  -webkit-animation: eq 1s 1426ms infinite ease-in-out;
          animation: eq 1s 1426ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(47) {
  -webkit-animation: eq 1s 893ms infinite ease-in-out;
          animation: eq 1s 893ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(48) {
  -webkit-animation: eq 1s 1152ms infinite ease-in-out;
          animation: eq 1s 1152ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(49) {
  -webkit-animation: eq 1s 147ms infinite ease-in-out;
          animation: eq 1s 147ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(50) {
  -webkit-animation: eq 1s 600ms infinite ease-in-out;
          animation: eq 1s 600ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(51) {
  -webkit-animation: eq 1s 1071ms infinite ease-in-out;
          animation: eq 1s 1071ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(52) {
  -webkit-animation: eq 1s 1560ms infinite ease-in-out;
          animation: eq 1s 1560ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(53) {
  -webkit-animation: eq 1s 1007ms infinite ease-in-out;
          animation: eq 1s 1007ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(54) {
  -webkit-animation: eq 1s 648ms infinite ease-in-out;
          animation: eq 1s 648ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(55) {
  -webkit-animation: eq 1s 1705ms infinite ease-in-out;
          animation: eq 1s 1705ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(56) {
  -webkit-animation: eq 1s 2128ms infinite ease-in-out;
          animation: eq 1s 2128ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(57) {
  -webkit-animation: eq 1s 228ms infinite ease-in-out;
          animation: eq 1s 228ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(58) {
  -webkit-animation: eq 1s 2146ms infinite ease-in-out;
          animation: eq 1s 2146ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(59) {
  -webkit-animation: eq 1s 2242ms infinite ease-in-out;
          animation: eq 1s 2242ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(60) {
  -webkit-animation: eq 1s 2160ms infinite ease-in-out;
          animation: eq 1s 2160ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(61) {
  -webkit-animation: eq 1s 976ms infinite ease-in-out;
          animation: eq 1s 976ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(62) {
  -webkit-animation: eq 1s 1612ms infinite ease-in-out;
          animation: eq 1s 1612ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(63) {
  -webkit-animation: eq 1s 2520ms infinite ease-in-out;
          animation: eq 1s 2520ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(64) {
  -webkit-animation: eq 1s 2240ms infinite ease-in-out;
          animation: eq 1s 2240ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(65) {
  -webkit-animation: eq 1s 2600ms infinite ease-in-out;
          animation: eq 1s 2600ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(66) {
  -webkit-animation: eq 1s 396ms infinite ease-in-out;
          animation: eq 1s 396ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(67) {
  -webkit-animation: eq 1s 1206ms infinite ease-in-out;
          animation: eq 1s 1206ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(68) {
  -webkit-animation: eq 1s 2584ms infinite ease-in-out;
          animation: eq 1s 2584ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(69) {
  -webkit-animation: eq 1s 966ms infinite ease-in-out;
          animation: eq 1s 966ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(70) {
  -webkit-animation: eq 1s 2590ms infinite ease-in-out;
          animation: eq 1s 2590ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(71) {
  -webkit-animation: eq 1s 1207ms infinite ease-in-out;
          animation: eq 1s 1207ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(72) {
  -webkit-animation: eq 1s 216ms infinite ease-in-out;
          animation: eq 1s 216ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(73) {
  -webkit-animation: eq 1s 730ms infinite ease-in-out;
          animation: eq 1s 730ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(74) {
  -webkit-animation: eq 1s 370ms infinite ease-in-out;
          animation: eq 1s 370ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(75) {
  -webkit-animation: eq 1s 2250ms infinite ease-in-out;
          animation: eq 1s 2250ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(76) {
  -webkit-animation: eq 1s 2964ms infinite ease-in-out;
          animation: eq 1s 2964ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(77) {
  -webkit-animation: eq 1s 2618ms infinite ease-in-out;
          animation: eq 1s 2618ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(78) {
  -webkit-animation: eq 1s 1482ms infinite ease-in-out;
          animation: eq 1s 1482ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(79) {
  -webkit-animation: eq 1s 1896ms infinite ease-in-out;
          animation: eq 1s 1896ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(80) {
  -webkit-animation: eq 1s 2080ms infinite ease-in-out;
          animation: eq 1s 2080ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(81) {
  -webkit-animation: eq 1s 1782ms infinite ease-in-out;
          animation: eq 1s 1782ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(82) {
  -webkit-animation: eq 1s 1558ms infinite ease-in-out;
          animation: eq 1s 1558ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(83) {
  -webkit-animation: eq 1s 3071ms infinite ease-in-out;
          animation: eq 1s 3071ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(84) {
  -webkit-animation: eq 1s 1008ms infinite ease-in-out;
          animation: eq 1s 1008ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(85) {
  -webkit-animation: eq 1s 3315ms infinite ease-in-out;
          animation: eq 1s 3315ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(86) {
  -webkit-animation: eq 1s 2838ms infinite ease-in-out;
          animation: eq 1s 2838ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(87) {
  -webkit-animation: eq 1s 3132ms infinite ease-in-out;
          animation: eq 1s 3132ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(88) {
  -webkit-animation: eq 1s 1408ms infinite ease-in-out;
          animation: eq 1s 1408ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(89) {
  -webkit-animation: eq 1s 534ms infinite ease-in-out;
          animation: eq 1s 534ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(90) {
  -webkit-animation: eq 1s 2880ms infinite ease-in-out;
          animation: eq 1s 2880ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(91) {
  -webkit-animation: eq 1s 3367ms infinite ease-in-out;
          animation: eq 1s 3367ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(92) {
  -webkit-animation: eq 1s 1748ms infinite ease-in-out;
          animation: eq 1s 1748ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(93) {
  -webkit-animation: eq 1s 558ms infinite ease-in-out;
          animation: eq 1s 558ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(94) {
  -webkit-animation: eq 1s 3384ms infinite ease-in-out;
          animation: eq 1s 3384ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(95) {
  -webkit-animation: eq 1s 285ms infinite ease-in-out;
          animation: eq 1s 285ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(96) {
  -webkit-animation: eq 1s 768ms infinite ease-in-out;
          animation: eq 1s 768ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(97) {
  -webkit-animation: eq 1s 291ms infinite ease-in-out;
          animation: eq 1s 291ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(98) {
  -webkit-animation: eq 1s 2842ms infinite ease-in-out;
          animation: eq 1s 2842ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(99) {
  -webkit-animation: eq 1s 1683ms infinite ease-in-out;
          animation: eq 1s 1683ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .bars_bar:nth-of-type(100) {
  -webkit-animation: eq 1s 2600ms infinite ease-in-out;
          animation: eq 1s 2600ms infinite ease-in-out;
}
body .player_inner__middle .cube_inner__front .details {
  position: absolute;
  z-index: 10;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: white;
  text-align: center;
}
body .player_inner__middle .cube_inner__front .details_album {
  width: 90px;
  height: 90px;
  background-size: cover !important;
  background: white;
  border-radius: 4px;
  margin: 0 auto;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/koanalbum.png");
  margin-bottom: 20px;
}
body .player_inner__middle .cube_inner__front .details h2 {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
}
body .player_inner__middle .cube_inner__front .details h3 {
  font-size: 10px;
  margin: 0;
  opacity: 0.6;
  font-weight: 400;
}
body .player_inner__middle .cube_inner__top {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  background: yellow !important;
}
body .player_inner__middle .cube_inner__bottom {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  background: purple !important;
  -webkit-transform-origin: 0 380px;
          transform-origin: 0 380px;
}
body .player_inner__middle .cube_inner__left {
  background: #354752 !important;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
body .player_inner__middle .cube_inner__left .options {
  left: 150px;
  top: 60px;
  position: absolute;
  -webkit-transform: rotatey(254deg) translatez(57px);
          transform: rotatey(254deg) translatez(57px);
}
body .player_inner__middle .cube_inner__left .options i {
  color: white;
  font-size: 24px;
  display: block;
  margin-bottom: 53px;
  transition: all .3s;
  cursor: pointer;
}
body .player_inner__middle .cube_inner__left .options i:hover {
  color: #44f5b7;
}
body .player_inner__middle .cube_inner__right {
  background: #354752 !important;
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
  -webkit-transform-origin: 380px 0;
          transform-origin: 380px 0;
}
body .player_inner__middle .cube_inner__right .volume {
  left: 210px;
  top: 60px;
  position: absolute;
}
body .player_inner__middle .cube_inner__right .volume_pip {
  width: 40px;
  height: 6px;
  margin-bottom: 10px;
  background: #ffffff2e;
}
body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(14), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(13), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(12), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(11) {
  background: #44f5b7;
}
body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(10), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(9), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(8), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(7) {
  background: #f5c844;
}
body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(6), body .player_inner__middle .cube_inner__right .volume_pip:nth-of-type(5) {
  background: #f54444;
}
body .player_inner__middle .cube_inner__right .volume i {
  -webkit-transform: rotatez(180deg) rotatey(89deg);
          transform: rotatez(180deg) rotatey(89deg);
  color: white;
  font-size: 20px;
  position: relative;
  left: 10px;
  top: 24px;
  opacity: 0;
  transition: all .3s;
}
body .player_inner__bottom {
  height: 190px;
  padding: 30px;
}
body .player_inner__bottom .controls {
  clear: left;
  margin-top: 26px;
}
body .player_inner__bottom .controls_left {
  float: left;
  width: 30%;
  text-align: right;
  font-size: 20px;
  color: white;
  position: relative;
  top: 20px;
}
body .player_inner__bottom .controls_middle {
  float: left;
  width: 40%;
  font-size: 50px;
  color: white;
  text-align: center;
}
body .player_inner__bottom .controls_right {
  float: right;
  position: relative;
  top: 20px;
  width: 30%;
  font-size: 20px;
  color: white;
  text-align: left;
}
body .player_inner__bottom .options {
  text-align: center;
  color: white;
  font-size: 12px;
  margin-bottom: 20px;
}
body .player_inner__bottom .options i {
  padding: 5px;
}
body .player_inner__bottom .options i:nth-of-type(1) {
  color: #44f5b7;
}
body .player_inner__bottom .options i:nth-of-type(2) {
  opacity: 0.4;
}
body .player_inner__bottom .playbar {
  width: 100%;
  background: #2c3e38;
  height: 4px;
  position: relative;
  border-radius: 10px;
}
body .player_inner__bottom .playbar_inner {
  position: absolute;
  width: 40%;
  height: 100%;
  border-radius: 10px;
  background: #44f5b7;
}
body .player_inner__bottom .playbar_left {
  float: left;
  position: relative;
  top: 8px;
}
body .player_inner__bottom .playbar_right {
  position: relative;
  top: 8px;
  float: right;
}
body .player_inner__bottom .playbar span {
  color: white;
  font-size: 10px;
}
 
@-webkit-keyframes eq {
  0% {
    height: 30px;
  }
  50% {
    height: 100px;
  }
  100% {
    height: 30px;
  }
}
 
@keyframes eq {
  0% {
    height: 30px;
  }
  50% {
    height: 100px;
  }
  100% {
    height: 30px;
  }
}

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by jcoulterdesign. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin