/** Shopify CDN: Minification failed

Line 10:0 Unexpected "<"
Line 266:2 Unexpected "<"

**/


/* CSS from section stylesheet tags */
<style>
  
  .player.playing a:empty,
.player.playing ul:empty,
.player.playing dl:empty,
.player.playing div:empty,
.player.playing section:empty,
.player.playing article:empty,
.player.playing p:empty,
.player.playing h1:empty,
.player.playing h2:empty,
.player.playing h3:empty,
.player.playing h4:empty,
.player.playing h5:empty,
.player.playing h6:empty {
  display: unset !important;
}



 .player div:empty {
  display:  unset !important;
}
.player div.cover {
    display: block !important;
}
  .player div.runner {
    display: block !important;
}
  
  
    body, html {
      padding: 0;
      margin: 0;
      background: #455A64;
      font-family: 'Roboto', sans-serif;
    }
    *, *:before, *:after {
      box-sizing: border-box;
      transition: all .5s ease;
    }
    .wrap {
      margin: 0 auto;
      max-width: 1000px;
      width: 100%;
      color: white;
      text-align: center;
      text-shadow: 1px 1px 5px rgba(0,0,0,.3);
      padding: 20px;
    }
    a {
      text-decoration: none;
      color: white;
      border-bottom: 1px dashed rgba(255,255,255,.5);
    }
    .player {
      margin-top: 50px;
      max-width: 1000px;
      width: 100%;
      height: 110px;
      background: white;
      border-bottom: 4px #ccc solid;
      position: relative;
      color: black;
      text-align: left;
      /* overflow: hidden; */
    }
    .album-art {
      position: absolute;
      left: 0;
      width: 15%;
      height: 100%;
      box-shadow: 3px 0 3px 0 rgba(0,0,0,.4);
      padding: 5px;
    }
    .album-art .cover {
      width: 100%;
      height: 100%;
      box-shadow: 0 0 3px 2px rgba(0,0,0,0.25);
      background: url('https://5ynte8hnxvqydwfb-94431707468.shopifypreview.com/cdn/shop/files/voicey_audio_logo_2b9e9eae-1400-49d9-b9fb-779363f02db8.png?v=1746951181&width=110');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .description {
      position: relative;
      width: 60%;
      height: 50px;
      top: 20%;
      left: 20%;
    }
    .titlee {
      font-size: 24px;
      font-weight: 100;
    }
    .sub-title {
      font-size: 13px;
      font-weight: 100;
      color: #999;
    }
    .play-button {
      padding-left: 5px;
      position: absolute;
      width: 55px;
      height: 55px;
      right: 10%;
      border-radius: 50%;
      top: -25px;
      background: white;
      box-shadow: 0 3px 20px 0 rgba(0,0,0,0.35);
      text-align: center;
      line-height: 57px;
      font-size: 26px;
      color: #fa0dfd;
      cursor: pointer;
    }
    .lp-background {
      background: url("http://i65.tinypic.com/v5wy3b.png");
      background-size: cover;
      animation: spin 1s infinite linear;
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 1;
    }
    .play-button i {
      z-index: 100;
    }
    .mdi-pause {
      
      z-index: 100;
      position: absolute;
      right: 17.5px;
      top: 0px;
      color: #fa0dfd;
      font-size: 20px;
    }
    .time-indicator {
      position: absolute;
      right: 11%;
      top: 60%;
      font-size: 13px;
      font-weight: 100;
    }
    .time-indicator i {
      color: #D32F2F;
    }
    .progress-bar {
      width: 100%;
      top: 100%;
      opacity: 0;
      height: 0;
      position: absolute;
      cursor: pointer;
    }
    .progress-bar .runner {
      height: 4px;
      background: linear-gradient(136deg, rgba(10, 234, 237, 1) 11%, rgba(250, 13, 253, 1) 84%);
    }
    .visualizer {
      position: absolute;
      top: 25%;
      left: 37.5%;
      width: 0%;
      height: 50%;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .visualizer div {
      width: 2px;
      /* background: linear-gradient(136deg, rgba(10, 234, 237, 1) 11%, rgba(250, 13, 253, 1) 84%); */
      background: linear-gradient(136deg, 
    rgba(250, 13, 253, 1) 0%, 
    rgba(10, 234, 237, 1) 50%, 
    rgba(250, 13, 253, 1) 100%
);
      height: 0%;
      margin-right: 5px;
      transition: all .1s ease;
    }
    .player.paused {
      border-bottom: none;
    }
    .player.paused .visualizer,
    .player.paused .lp-background,
    .player.paused .mdi-pause {
      opacity: 0;
    }
    .player.playing .description {
      opacity: 0;
    }
    .player.playing .album-art {
      width: 0px;
      opacity: 0;
    }
    .player.playing .visualizer {
      left: 5%;
      width: 65%;
    }
    .player.playing .progress-bar {
      height: 4px;
      opacity: 1;
    }
    .player.playing .play-button {
      /* background: transparent; */
    }
    .player.playing .mdi-play {
      opacity: 0;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

 
    @media (max-width: 768px) {
      .wrap {
        padding: 10px;
      }
      .description {
        width: 50%;
        left: 24%;
      }
      .play-button {
        right: 5%;
        width: 45px;
        height: 45px;
        font-size: 22px;
        line-height: 45px;
      }
      .time-indicator {
        font-size: 12px;
      }
      .titlee 
      {
        font-size: 16px;
        line-height: normal;
      }
      .player 
      {
        height: 80px;
      }
      .album-art 
      {
        width: 20%;
      }
       .mdi-pause 
      {
        right: 13.5px;
      }
      .visualizer div 
      {
        width: 3px;
      }
    }
  </style>