@charset "UTF-8";
/*--------------------------------------------------------------
>>> 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 '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;
}

@keyframes anim-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.icon-spinner6 {
  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: flex;
  align-items: center;
  justify-content: space-between;
}
.titleBar .bs-menu-toggle {
  transition: 0.3s;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 20px;
  cursor: pointer;
  /* NEW BUTTON CODE */
  background: transparent;
  border: 0;
}
.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;
  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: 0.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: 0.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);
  white-space: nowrap;
}
.track-list li a {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  font-family: "Noto Sans", "sans-serif";
  color: #282828;
  letter-spacing: -0.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: 0.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: flex;
  align-items: center;
  justify-content: space-between;
  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: 0.3s;
  height: 17px;
  background-color: #1684AE;
}

#play-btn, #pause-btn {
  transition: 0.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: flex;
  align-items: center;
  justify-content: center;
}
#play-btn span, #pause-btn span {
  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: 0.3s;
  cursor: pointer;
  background-color: #1684AE;
  border-radius: 50%;
  width: 41px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#next-btn span, #prev-btn span {
  display: flex;
}
#next-btn:hover, #prev-btn:hover {
  opacity: 0.75;
}

.current-track-container {
  display: none;
  transition: 0.3s;
  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: 0.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);
  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: 0.3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  position: fixed;
  z-index: 901;
  top: 55px;
  bottom: 80px;
  right: 0;
  width: 60%;
  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: flex;
  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: 0.3s;
  font-family: "icomoon";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  color: #FFF;
  content: "";
}
.off-canvas-cart .edd-remove-from-cart:hover:before, .off-canvas-beat-options .edd-remove-from-cart:hover:before {
  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: 0.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: 0.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-top: 0;
  margin-bottom: 14px;
  font-weight: bold;
}

.offcanvas-cart-visible {
  visibility: visible;
  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: 0.3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  z-index: 1000001;
  width: 60%;
  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: 0.1px;
  font-size: 18px;
  font-weight: 700;
  padding: 20px;
  margin: 0px;
}
.off-canvas-drawer .close-drawer {
  transition: 0.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 {
  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: 0.3s;
  position: absolute;
  right: 20px;
  top: 20px;
}

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

.playlists-list, .filter-list {
  max-height: 0px;
  overflow: hidden;
  transition: 0.3s;
}
.playlists-list h4, .filter-list h4 {
  color: #fff;
  transition: 0.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: 0.3s;
  background-color: rgba(255, 255, 255, 0.05);
}
.checkmark:after {
  transition: 0.3s;
  position: absolute;
  right: 18px;
  top: 18px;
  font-family: "Icomoon";
  content: "";
}

.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: 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: "";
  font-family: "IcoMoon" !important;
  font-size: 18px;
  color: #9e9e9e;
  z-index: 11;
}

.beat-store-shopping-cart-title {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--beat-store-gray);
}

.beat-store-cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.beat-store-cart-item__image {
  margin-right: 12px;
  margin-left: 0;
  margin-bottom: 5px;
  margin-top: 5px;
}
.beat-store-cart-item__image img {
  border-radius: 0;
  object-fit: cover;
  width: 48px;
  height: 48px;
}
.beat-store-cart-item__product-name {
  text-decoration: none;
  color: var(--beat-store-black);
  font-weight: 700;
  font-size: 14px;
}
.beat-store-cart-item__details {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.beat-store-cart-item__details-right {
  display: flex;
}
.beat-store-cart-item__details-top {
  max-width: 190px;
  width: 190px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beat-store-cart-item__price {
  font-size: 14px;
  color: rgba(var(--beat-store-primary), 1);
  font-weight: 600;
}
.beat-store-cart-item dl.variation {
  display: flex;
  font-size: 13px;
  margin: 0;
  padding: 0;
}
.beat-store-cart-item dl.variation dd {
  margin: 0;
  padding: 0;
}
.beat-store-cart-item dl.variation dt {
  margin-right: 4px;
}

li.cart_item.edd_checkout a,
.beat-store-checkout-button {
  background-color: rgba(var(--beat-store-primary), 1);
  border-radius: 5px;
  color: var(--beat-store-white);
  font-weight: bold;
  font-size: 17px;
  text-align: center;
  padding: 12px 28px;
  display: block;
  text-decoration: none;
}

.beatstore-remove-product {
  background-color: transparent;
  color: #FFF;
  cursor: pointer;
  border: none;
  outline: none;
}

.beatstore-cart-form-wrap ul {
  margin-left: 0;
  padding-left: 0;
}

.beatstore-cart-form-footer {
  margin-top: 14px;
}

.beatstore-add-cart-button {
  box-shadow: 0 0 14px rgba(17, 17, 17, 0.25);
  color: #FFF;
  cursor: pointer;
  padding: 14px 26px;
  border-radius: 4px;
  border: none;
  font-size: 19px;
  transition: 0.2s all;
  width: 220px;
  max-width: 100%;
}
.beatstore-add-cart-button .edd-add-to-cart-label {
  color: #FFF !important;
}
.beatstore-add-cart-button:hover {
  box-shadow: 0 0 18px rgba(17, 17, 17, 0.305);
}

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