/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Setup / Import
2.0 TitleBar
3.0 Tracklist
4.0 Footer
5.0 Off-Canvas Cart
6.0 Off-Canvas Drawer
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Setup / Import
--------------------------------------------------------------*/
@import url(icomoon.css);
* {
  box-sizing: border-box; }

html {
  margin-top: 0 !important; }

body {
  font-family: "Noto Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 0 !important; }
  body:before {
    content: none !important; }
  body * {
    box-sizing: border-box; }

#app {
  position: relative;
  margin-top: 55px; }

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

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

.icon-spinner6 {
  -webkit-animation: anim-rotate 2.5s infinite linear;
          animation: anim-rotate 2.5s infinite linear;
  position: fixed;
  font-size: 30px;
  color: #111;
  z-index: 9999;
  top: 50%;
  right: 0;
  left: 0;
  text-align: center; }

select {
  font-size: 15px;
  width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: sans-serif; }

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "IcoMoon" !important; }

/*--------------------------------------------------------------
2.0 TitleBar
--------------------------------------------------------------*/
.titleBar {
  background-color: #282828;
  width: 100%;
  height: 55px;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .titleBar .bs-menu-toggle {
    transition: .3s;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 20px;
    cursor: pointer; }
    .titleBar .bs-menu-toggle:hover {
      opacity: 0.75; }

.producer-banner {
  min-height: 130px;
  max-height: 295px;
  height: 30vw;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative; }
  .producer-banner .inner {
    background-color: rgba(22, 22, 22, 0.58);
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    padding: 15px;
    color: #d0d0d0; }
    .producer-banner .inner .details {
      position: relative;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      top: 50%; }
    .producer-banner .inner h3.producer-name {
      right: 0px;
      margin: 0;
      font-size: 30px;
      font-weight: 700;
      color: #FFF;
      letter-spacing: .8px; }
      @media (max-width: 768px) {
        .producer-banner .inner h3.producer-name {
          font-size: 16px; } }

.total-plays {
  font-size: 14px;
  font-family: sans-serif; }
  @media (max-width: 768px) {
    .total-plays {
      font-size: 12px; } }

.bs-shopping-cart-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 17px;
  height: 21px; }
  .bs-shopping-cart-icon .widget-cart-total {
    font-family: "Noto Sans";
    position: relative;
    bottom: 3px;
    left: 2px;
    color: #FFF;
    font-size: 15px; }
  .bs-shopping-cart-icon .icon-cart {
    padding: 11px;
    font-size: 22px;
    color: #FFF; }
  .bs-shopping-cart-icon:hover {
    opacity: 0.7; }
  @media (max-width: 768px) {
    .bs-shopping-cart-icon {
      right: 2px; } }

/*--------------------------------------------------------------
3.0 Tracklist
--------------------------------------------------------------*/
.track-list {
  position: relative;
  top: 55px;
  margin: 0px !important;
  padding: 0px 0px 80px 0px; }
  .track-list li {
    transition: .3s;
    position: relative;
    height: 54px;
    width: 100%;
    display: block;
    clear: both;
    margin-bottom: 0px !important;
    background-color: #FFF;
    border-bottom: 1px solid rgba(236, 236, 236, 0.5); }
    .track-list li a {
      display: block;
      overflow: hidden;
      font-size: 14px;
      font-weight: 600;
      font-family: "Noto Sans", "sans-serif";
      color: #282828;
      letter-spacing: -.82px;
      text-decoration: none !important; }
    .track-list li .track-details {
      float: left;
      display: block;
      margin-top: 6px; }
    .track-list li span.song-title {
      font-weight: 600;
      display: inline-block;
      padding-top: 5px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 78vw; }
    .track-list li span.jp-artist {
      font-weight: 100;
      color: #5C5C5C;
      font-family: "Merriweather", "serif";
      font-style: italic;
      font-size: 12px;
      display: block;
      margin-top: 1px; }
    .track-list li span.beat-tags {
      display: inline-block;
      background-color: transparent;
      color: #333 !important;
      border: 1px solid #333;
      border-radius: 3px;
      font-size: 12px;
      padding: 0px 4px;
      margin: 0 3px 0 3px;
      position: relative;
      bottom: 6px;
      left: 7px; }
    .track-list li img {
      width: 54px;
      float: left;
      margin-right: 10px; }
    .track-list li:hover {
      background-color: #efefef; }
  .track-list li.jp-playlist-current {
    background-color: #f5f5f5; }
    .track-list li.jp-playlist-current a, .track-list li.jp-playlist-current span {
      color: #23a7da; }
  @media (max-width: 768px) {
    .track-list {
      padding: 0 0 136px 0; } }

.poster-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 54px;
  width: 54px;
  display: block;
  float: left;
  margin-right: 8px; }

#open-buy-area {
  display: none; }

span.genre {
  display: none; }

span.icon-share {
  display: none; }

span.play-count {
  display: none; }

.btn-add-me {
  transition: .3s;
  width: auto !important;
  color: #FFF !important;
  background-color: #1684AE;
  border-radius: 4px;
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 6px 10px 7px 8px;
  cursor: pointer; }
  .btn-add-me img {
    width: 17px !important;
    margin-right: 0 !important; }
  .btn-add-me:hover {
    opacity: 0.7; }
  @media (max-width: 768px) {
    .btn-add-me {
      top: 0px;
      bottom: 0px;
      right: 0px;
      border-radius: 0px;
      padding: 6px 15px 7px 15px; }
      .btn-add-me img {
        margin-top: 6px; } }

.edd_purchase_submit_wrapper .edd_go_to_checkout {
  display: none !important; }

.edd_purchase_submit_wrapper input[type="submit"] {
  padding: 12px 37px; }

/*--------------------------------------------------------------
4.0 Footer
--------------------------------------------------------------*/
#footer {
  height: 95px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9998;
  background-color: #282828;
  box-shadow: 0 0 18px 0px rgba(56, 56, 56, 0.62);
  padding: 0 !important; }
  @media (min-width: 768px) {
    #footer {
      height: 80px; } }

.footer-controls {
  max-width: 100%;
  width: 215px;
  position: relative;
  margin: 0 auto;
  padding-bottom: 12px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; }
  @media (min-width: 768px) {
    .footer-controls {
      margin: 0;
      left: 25px;
      padding: 0px; } }

#progress-bar {
  display: block;
  position: relative;
  z-index: 10000;
  left: 0;
  height: 17px;
  max-width: 100%;
  background-color: #5E5E5E;
  cursor: pointer; }
  @media (min-width: 768px) {
    #progress-bar {
      position: absolute;
      top: 33px;
      left: 275px;
      right: 25px; } }
  #progress-bar .jp-play-bar {
    transition: .3s;
    height: 17px;
    background-color: #1684AE; }

#play-btn, #pause-btn {
  transition: .3s;
  font-size: 37px;
  text-indent: 7px;
  text-align: center;
  color: #FFF;
  background-color: #1684AE;
  cursor: pointer;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  #play-btn span, #pause-btn span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  #play-btn:hover, #pause-btn:hover {
    opacity: 0.7; }

#pause-btn {
  font-size: 30px;
  text-indent: 3px; }

#next-btn, #prev-btn {
  color: #FFF;
  font-size: 25px;
  text-align: center;
  transition: .3s;
  cursor: pointer;
  background-color: #1684AE;
  border-radius: 50%;
  width: 41px;
  height: 41px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  #next-btn span, #prev-btn span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  #next-btn:hover, #prev-btn:hover {
    opacity: 0.75; }

.current-track-container {
  display: none;
  transition: .3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  cursor: pointer;
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(226, 226, 226, 0.97);
  height: 44px;
  text-align: left;
  z-index: 99;
  font-weight: bold;
  color: #1d1d1d;
  font-size: 12px;
  opacity: 0.95; }
  .current-track-container:hover {
    opacity: .99; }
  .current-track-container #title {
    padding: 13px; }

.artwork-container {
  display: none;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 65vh; }

.track-container-expanded {
  height: calc(100% - 80px);
  -webkit-transform: translateY(55px);
          transform: translateY(55px);
  background-color: #282828;
  opacity: 1; }
  .track-container-expanded:hover {
    opacity: 1; }

/*--------------------------------------------------------------
5.0 Off-Canvas Cart
--------------------------------------------------------------*/
.off-canvas-cart, .off-canvas-beat-options {
  transition: .3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  position: fixed;
  z-index: 901;
  top: 55px;
  bottom: 80px;
  right: 0;
  width: 60%;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  background-color: #403E3E;
  box-shadow: 0 0px 22px 0px rgba(64, 64, 64, 0.22);
  color: #FFF;
  padding: 15px; }
  .off-canvas-cart li, .off-canvas-beat-options li {
    list-style-type: none; }
  .off-canvas-cart .edd-cart-item-quantity, .off-canvas-beat-options .edd-cart-item-quantity, .off-canvas-cart .edd-cart-item-separator, .off-canvas-beat-options .edd-cart-item-separator {
    display: none; }
  .off-canvas-cart .edd-cart, .off-canvas-beat-options .edd-cart {
    margin-left: 0px !important;
    padding-left: 0px !important; }
  .off-canvas-cart .edd-cart-number-of-items, .off-canvas-beat-options .edd-cart-number-of-items {
    margin-bottom: 42px; }
  .off-canvas-cart .edd-cart-item, .off-canvas-beat-options .edd-cart-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 25px; }
  .off-canvas-cart .edd-cart-item-title, .off-canvas-beat-options .edd-cart-item-title {
    width: 85%; }
  .off-canvas-cart .edd-remove-from-cart, .off-canvas-beat-options .edd-remove-from-cart {
    color: transparent !important;
    position: relative; }
    .off-canvas-cart .edd-remove-from-cart:before, .off-canvas-beat-options .edd-remove-from-cart:before {
      transition: .3s;
      font-family: 'icomoon';
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      color: #FFF;
      content: "\ea0d"; }
    .off-canvas-cart .edd-remove-from-cart:hover:before, .off-canvas-beat-options .edd-remove-from-cart:hover:before {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
      color: red; }
  .off-canvas-cart .edd_total, .off-canvas-beat-options .edd_total {
    padding-left: 0px;
    margin-bottom: 25px; }
  .off-canvas-cart .edd_checkout a, .off-canvas-beat-options .edd_checkout a {
    transition: .3s;
    background-color: #1684AE;
    display: block;
    padding: 15px;
    font-weight: 300;
    font-size: 23px;
    letter-spacing: 1px;
    text-align: center;
    color: #FFF;
    text-transform: uppercase; }
    .off-canvas-cart .edd_checkout a:hover, .off-canvas-beat-options .edd_checkout a:hover {
      opacity: 0.7;
      text-decoration: none; }
  @media (max-width: 768px) {
    .off-canvas-cart, .off-canvas-beat-options {
      width: 100%; } }
  .off-canvas-cart .cart-close-drawer, .off-canvas-beat-options .cart-close-drawer {
    transition: .3s;
    color: #979797;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 15px;
    width: 100%;
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
    .off-canvas-cart .cart-close-drawer:hover, .off-canvas-beat-options .cart-close-drawer:hover {
      opacity: 0.7; }

#beat-buttons {
  position: relative;
  top: 60px;
  color: #111; }
  #beat-buttons h4 {
    font-size: 23px;
    margin-bottom: 20px;
    font-weight: bold; }

.offcanvas-cart-visible {
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0); }

.off-canvas-beat-options {
  background-color: #f5f5f5; }
  .off-canvas-beat-options .go-back {
    position: absolute;
    font-size: 15px;
    color: #23a7da;
    cursor: pointer;
    top: 20px;
    left: 10px; }
    .off-canvas-beat-options .go-back span {
      position: relative;
      top: 1px;
      font-size: 16px;
      margin-right: 5px; }

.edd-cart-meta.edd_subtotal, .edd-cart-meta.edd_total {
  background-color: transparent !important; }

/*--------------------------------------------------------------
6.0 Off-Canvas Drawer
--------------------------------------------------------------*/
.off-canvas-drawer {
  transition: .3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  z-index: 1000001;
  width: 60%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #403E3E;
  box-shadow: 0 0px 22px 0px rgba(64, 64, 64, 0.22);
  color: #FFF; }
  .off-canvas-drawer .menu-title {
    letter-spacing: .1px;
    font-size: 18px;
    font-weight: 700;
    padding: 20px;
    margin: 0px; }
  .off-canvas-drawer .close-drawer {
    transition: .3s;
    color: #979797;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 20px 22px; }
    .off-canvas-drawer .close-drawer:hover {
      opacity: 0.7; }
  @media (max-width: 768px) {
    .off-canvas-drawer {
      width: 100%; } }

.drawer-visible {
  -webkit-transform: translateX(0%);
          transform: translateX(0%); }

.drawer-item {
  position: relative;
  padding: 20px;
  color: #FFF;
  cursor: pointer;
  margin: 0px;
  font-size: 17px;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.1); }
  .drawer-item:hover {
    opacity: 0.7; }
  .drawer-item span {
    color: #d8d8d8; }
  .drawer-item .icon-circle-right {
    transition: .3s;
    position: absolute;
    right: 20px;
    top: 20px; }

.turnt {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.playlists-list, .filter-list {
  max-height: 0px;
  overflow: hidden;
  transition: .3s; }
  .playlists-list h4, .filter-list h4 {
    color: #fff;
    transition: .3s;
    position: relative;
    padding: 20px 34px;
    margin: 0px;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer; }
    .playlists-list h4:hover, .filter-list h4:hover {
      background-color: #23a7da;
      color: #eee; }

.list-visible {
  max-height: 2999px; }

.checkmark {
  transition: .3s;
  background-color: rgba(255, 255, 255, 0.05); }
  .checkmark:after {
    transition: .3s;
    position: absolute;
    right: 18px;
    top: 18px;
    font-family: "Icomoon";
    content: "\ea11"; }

.powered-beatstore {
  display: block;
  text-align: left;
  position: relative;
  margin-top: 80px;
  margin-bottom: 20px;
  margin-left: 20px;
  color: #FFF;
  font-size: 12px; }
  .powered-beatstore:hover {
    color: #1684AE; }

#visualizer-canvas {
  position: absolute;
  top: 0;
  left: 0px;
  right: 0;
  height: 30vw;
  width: 100%;
  max-height: 295px;
  margin-top: 0px;
  z-index: 20;
  opacity: 1; }

#visualizer-canvas ~ .producer-banner {
  z-index: 25;
  opacity: 0.68; }

.loader {
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top; }

.search-beats-form {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: -55px; }
  .search-beats-form .search-beats {
    border-bottom: 1px solid #e2e2e2;
    background-color: #fff;
    color: #111;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    text-indent: 38px;
    outline: none;
    position: relative;
    z-index: 10; }
  .search-beats-form:before {
    position: absolute;
    left: 20px;
    top: 16px;
    display: block;
    width: 28px;
    height: 28px;
    content: "\e986";
    font-family: "IcoMoon" !important;
    font-size: 18px;
    color: #9e9e9e;
    z-index: 11; }
/*# sourceMappingURL=style.css.map */