.music-wrapper {
  display: flex;
  position: relative;
  width: 400px;
  height: 400px;
  user-select: none; }
  .music-wrapper .left, .music-wrapper .right {
    position: absolute;
    width: 50%;
    height: 100%;
    perspective-origin: 50% 50%;
    perspective: 1200px; }
    .music-wrapper .left .flip-card,
    .music-wrapper .left .static-card, .music-wrapper .right .flip-card,
    .music-wrapper .right .static-card {
      background: white;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 7px solid #dedede; }
      .music-wrapper .left .flip-card img,
      .music-wrapper .left .static-card img, .music-wrapper .right .flip-card img,
      .music-wrapper .right .static-card img {
        width: calc(100% * 2); }
    .music-wrapper .left .static-card, .music-wrapper .right .static-card {
      border-right: none; }
    .music-wrapper .left .flip-card, .music-wrapper .right .flip-card {
      border-left: none;
      transform-origin: 0% 50%;
      transition: transform 0.5s cubic-bezier(0.45, 0, 0.55, 1);
      transform: rotateY(0); }
      .music-wrapper .left .flip-card:before, .music-wrapper .right .flip-card:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        right: -20px;
        box-shadow: 29px 0px 52px 6px #bababa; }
      .music-wrapper .left .flip-card img, .music-wrapper .right .flip-card img {
        position: absolute;
        background-color: #fff;
        right: 0; }
  .music-wrapper .left {
    left: 0; }
  .music-wrapper .right {
    right: 0; }
  .music-wrapper .right:hover .flip-card {
    transform: rotateY(-60deg); }
  .music-wrapper .controls {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer; }
    .music-wrapper .controls:after {
      position: absolute;
      content: '';
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
      box-shadow: inset 20px 0px 37px -10px rgba(0, 0, 0, 0.75);
      pointer-events: none;
      transition: width 0.5s cubic-bezier(0.45, 0, 0.55, 1); }
    .music-wrapper .controls input[type="radio"] {
      position: absolute;
      left: -1000px; }
    .music-wrapper .controls label {
      flex-grow: 1;
      display: block;
      width: 100%;
      border-top: 1px #e6e6e6 solid;
      border-bottom: 1px #9c9c9c solid;
      box-sizing: border-box;
      cursor: pointer;
      background-color: #dcdcdc; }
      .music-wrapper .controls label span {
        background: no-repeat 16px 42px;
        width: 80px;
        height: 125px;
        display: block;
        pointer-events: none; }
    .music-wrapper .controls input:checked + label,
    .music-wrapper .controls label:active {
      background-color: #BCBCBC;
      box-shadow: inset 0px 0px 10px 5px rgba(120, 120, 120, 0.2);
      border: 1px solid #fff; }
    .music-wrapper .controls .btn-forward span {
      background-size: calc(42px * 2) calc(42px * 2);
      margin-left: 10px;
      background: url("../../img/music/forward.svg") no-repeat center; }
    .music-wrapper .controls .btn-rewind span {
      background-size: calc(42px * 2) calc(42px * 2);
      margin-left: 10px;
      background: url("../../img/music/rewind.svg") no-repeat center; }
    .music-wrapper .controls .btn-settings span {
      background-size: calc(42px * 2) calc(42px * 2);
      margin-left: 10px;
      background: url("../../img/music/playlist.svg") no-repeat center; }
  .music-wrapper .controls-overlay {
    position: absolute;
    display: block;
    top: calc(100% - 60px);
    width: 100%;
    height: 60px;
    z-index: 100;
    overflow-x: hidden;
    transition: width 0.5s cubic-bezier(0.45, 0, 0.55, 1); }
    .music-wrapper .controls-overlay .song {
      margin-top: 5px;
      margin-left: 20px;
      height: 15px;
      width: 360px;
      font-family: "DejaVu Serif", serif; }
    .music-wrapper .controls-overlay .timer {
      margin-left: 20px;
      height: 15px;
      z-index: 200;
      width: 360px;
      display: inline-flex;
      justify-content: space-between;
      vertical-align: center; }
      .music-wrapper .controls-overlay .timer .button {
        width: 10px;
        height: 12px;
        margin-left: 2px;
        fill: none;
        stroke: #4c4c4c;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
        cursor: pointer;
        color: white;
        mix-blend-mode: difference; }
      .music-wrapper .controls-overlay .timer .button.active {
        animation: bounce 500ms alternate;
        transform: scale(1.3);
        transition: transform 150ms; }
      .music-wrapper .controls-overlay .timer .button:hover {
        animation: bounce 500ms alternate;
        transform: scale(1.1);
        transition: transform 150ms; }
      .music-wrapper .controls-overlay .timer .button.active:hover {
        animation: bounce 500ms alternate;
        transform: scale(1.5);
        transition: transform 150ms; }
      .music-wrapper .controls-overlay .timer .timeline * {
        border: gray 0;
        border-radius: 8px; }
      .music-wrapper .controls-overlay .timer .timeline {
        width: calc(100% - 100px);
        height: 4px;
        float: left;
        background: #DBE3E3;
        position: relative;
        align-self: center;
        border: gray 0;
        border-radius: 8px; }
        .music-wrapper .controls-overlay .timer .timeline .buffered {
          position: absolute;
          width: 80%;
          height: 100%;
          background: #a0a0a0; }
        .music-wrapper .controls-overlay .timer .timeline .played {
          position: absolute;
          width: 60%;
          height: 100%;
          background: #1fe2e3; }
        .music-wrapper .controls-overlay .timer .timeline .slider {
          position: absolute;
          width: 4px;
          height: 12px;
          top: -4px;
          background: #303030;
          cursor: pointer; }
      .music-wrapper .controls-overlay .timer .time {
        min-width: 38px;
        margin-left: 5px;
        position: relative;
        align-self: center;
        font-family: "fantasy"; }
  .music-wrapper .controls-overlay.flipped {
    width: calc(50% + 7px); }

.music-wrapper.empty {
  border: 7px solid #dedede;
  display: flex;
  flex-direction: column;
  background: white; }

.music-wrapper.empty img {
  margin: 5px;
  -webkit-animation: rotation 5s infinite linear; }

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(359deg); } }
.music-wrapper.empty a {
  text-align: center;
  margin: 5px;
  margin-top: 20px;
  font-size: 20px;
  font-family: Arial; }

/*# sourceMappingURL=info_plate.css.map */