@media only screen and (max-height: 800px) and (min-width: 769px) {
  #dark-back {
    min-height: 100vh;
  }

  .downupPopup {
    bottom: 9px;
    z-index: 10000;
  }
}

@media only screen and (max-width: 1024px) {
  .hide-on-mobile {
    display: none !important;
  }

  .contact-column-left {
    padding: 0 40px 0 0;
  }

  .contact-column-right {
    padding: 0 0 0 40px;
  }

  .message-wrapper {
    padding: 20px;
  }
}

@media only screen and (min-width: 1025px) {
  .album-nav {
    z-index: 9998;
  }
}

@media only screen and (max-width: 320px) {
  .plTitle {
    left: 25px !important;
  }

  .plAlbum {
    padding: 7px 7px;
  }

  .container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}
@media only screen and (max-width: 425px) {
  .gig-card .gig-info {
    grid-template-columns: 1fr !important;
  }
  
.gig-card .gig-info .gig-cover {
  width: 100% !important;
}

.gig-card .gig-info .gig-content .gig-title {
  text-align: center;
  margin-bottom: 40px;
}

  .album-list {
    grid-template-columns: 1fr !important;
    gap: 10px;
}

  .plTitle {
    left: 30px;
  }

  .plAlbum {
    font-size: 13px;
    margin: -6px;
  }

  .player-info .player-title {
    font-size: 14px;
  }

  .player-info .player-album {
    font-size: 12px;
  }

  .order-info-container .order-info-column {
    flex: 1 auto !important;
    text-align: center;
    width: 100%;
  }

  .order-info-column-right {
    padding-top: 20px;
    text-align: center !important;
  }

  .album-info-container .album-info-column {
    flex: none !important;
    width: 100%;
  }

  .album-info-container .album-info-column:last-child {
    padding-top: 50px;
  }

  .bio-container .bio-column-left {
    flex: 1 auto;
    order: 2;
  }

  .bio-container .bio-column-left-r {
    flex: 1 auto;
  }

  .bio-container .bio-column-right,
  .bio-container .bio-column-right-l {
    flex: 1 auto;
    padding: 0 !important;
    text-align: center;
    width: 100%;
  }

  .darken-small {
    text-align: center !important;
  }

  .player-bar-container {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  .album-artwork {
    height: 200px;
    width: 200px;
  }

  .player-artwork {
    margin-right: 10px;
  }

  .player-button i,
  h3 {
    font-size: 20px;
  }

  .carousel-item {
    text-align: center;
  }

  .carousel-item .review-link {
    align-self: center;
  }

  .container {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 426px) {
  .container {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 768px) {
  .gig-card .gig-info .gig-cover img {
    height: 200px;
}

.gig-card .gig-info .gig-cover {
  width: 200px;
}
.gig-card .gig-info {
  grid-template-columns: 0fr 3fr;
}
  .welcome-box {
    padding-top: 0;
    padding-bottom: 50px;
  }

  .hero-bg {
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #ploWrap {
    height: 270px;
    overflow: auto;
  }

  html {
    scroll-padding-top: 117px;
  }

  .album-nav {
    height: 50px;
  }

  .contact-column-left {
    padding: 0;
  }

  .contact-column-right {
    padding: 0;
    margin-top: 50px;
  }

  .contact-bg {
    background: #202020;
  }

  .message-wrapper {
    background: #2b2b2b;
    padding: 10px;
  }

  .contact-container {
    display: inline-block;
  }

  .media-player-bar {
    bottom: -133px;
  }

  #plList li {
    padding: 14px;
  }

  .title-item-count {
    font-weight: 400;
    margin-left: 5px;
  }

  p {
    font-size: 14px;
  }

  .downupPopup {
    bottom: 9px;
  }

  .album-nav-col .label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
  }

  .album-nav-col .svg svg {
    fill: var(--text-secondary);
  }

  .album-nav-col:hover {
    background: var(--card-hover);
  }

  .bio-container .bio-column-left {
    margin-bottom: 50px;
    order: 0;
  }

  .bio-container .bio-column-right,
  .bio-container .bio-column-right-l {
    padding: 0;
    text-align: center;
    width: 100%;
  }

  .darken-small {
    text-align: center;
  }

  .video-wrapper-right {
    flex: 1 auto;
    padding: 20px;
    text-align: center;
  }

  .solid-section {
    padding-bottom: 0;
    padding-top: 50px;
  }

  .video-description {
    padding: 20px 0 0;
  }

  .section-line {
    margin-bottom: 0;
    margin-top: 50px;
  }

  #dark-back {
    min-height: calc(100vh - 125px);
  }

  .player-bar-container {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }

  .player-right-column {
    display: none;
  }

  .player-left-column {
    width: calc(60vw);
  }

  .player-middle-column {
    justify-content: flex-end;
    padding-right: 5px;
    width: calc(40vw);
  }

  .player-button,
  .player-sub-button {
    margin: 0;
  }

  .hero-column-left {
    text-align: center;
    width: 100%;
  }

  .hero-column-right {
    flex: 1;
    padding: 20px 0;
    text-align: center;
  }

  h1 {
    font-size: 35px;
  }

  h2 {
    font-size: 20px;
  }

  .plyr--audio .plyr__controls {
    padding: 10px;
  }

  .player-container {
    border-top: 1px solid var(--divider);
  }

  .plLength,
  .plNum,
  .plTitle {
    font-size: 14px;
    line-height: 1.5;
  }

  .album-card .album-subtitle {
    font-size: 14px;
  }

  .body {
    margin-top: 117px;
  }

  .body-no-promote {
    margin-top: 67px !important;
  }

  .hero-button-container {
    display: inline-block;
    flex-direction: column;
    width: 100%;
  }

  .hero-button-container .section-button {
    margin-bottom: 40px;
  }

  .section-platforms {
    font-size: 14px;
    width: 100%;
  }

  .video-title,
  h4 {
    font-size: 16px;
  }

  .album-card .album-title,
  .owl-carousel .carousel-item .review-title,
  .video-subtitle {
    font-size: 14px;
  }
}

@media only screen and (min-width: 769px) {
  .hero-bg {
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }

  html {
    scroll-padding-top: 127px;
  }

  .title-item-count {
    font-weight: 400;
    margin-left: 10px;
  }

  .body-no-promote {
    margin: 67px 0 0 !important;
  }

  #nav-album-promote {
    display: none;
  }

  .album-nav {
    height: 60px;
  }

  .album-nav-col .label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
  }

  .album-nav-col .svg svg {
    fill: var(--text-secondary);
  }

  .album-nav-col:hover {
    background: var(--card-hover);
  }

  .bio-container .bio-column-left {
    flex: 1;
  }

  .bio-column-left-r {
    padding: 0 0 0 140px;
    flex: 1;
  }

  #dark-back {
    min-height: 100vh;
  }

  .solid-section {
    padding-bottom: 0;
    padding-top: 100px;
  }

  .section-line {
    margin-bottom: 0;
    margin-top: 100px;
  }

  .nav-logo {
    max-height: 35px;
    padding: 0;
  }

  .album-artwork {
    height: 200px;
    width: 200px;
  }

  .media-player-bar {
    bottom: -142px;
  }

  .player-bar-container {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }

  .plyr--audio .plyr__controls {
    padding: 15px;
  }

  .downupPopup {
    bottom: 9px;
  }
}

@media only screen and (max-width: 600px) {

  .plLength {
    display: none;
  }

  .plBtnItem {
    margin-right: 0;
  }
}
@media only screen and (max-width: 1024px) {

  
  .album-list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

  .nav-logo-container span {
    text-align: center;
  }

  .top-nav-container svg {
    fill: var(--text-dark);
  }

  .logo-dark {
    content: url(images/logo-mobile-white.png);
  }

  .top-nav-container {
    padding-left: 15px;
    padding-right: 33px;
  }

  .nav-logo {
    margin: 20px 0;
    max-height: 27px;
    padding: 0;
  }

  .nav-logo-container {
    margin-left: auto;
    margin-right: auto;
  }

  .app-layout,
  .nav-cta {
    display: none;
  }
}

@media only screen and (min-width: 1025px) {
  .only-show-mobile {
    display: none;
  }

  .logo-dark {
    content: url(images/logo.png);
  }
}

@media only screen and (max-height: 470px) {
  #dark-back {
    min-height: 100vh;
  }

  .downupPopup {
    bottom: 9px;
    z-index: 10000;
    height: 95vh;
  }

  .downupPopup-content {
    height: calc(100% - 64px);
  }
  .lyricWrapper {
    height: calc(100% - 88px);
  }
}