body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  a{
    cursor:pointer;
  }
  button{
    cursor:pointer;
  }
  .header {
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100; 
  }

.hide {
    display: none !important;
}

#shows-content{
  min-height: 70vh;
}

.no-pointer{
  cursor:auto !important;
}

  .header-top{
    padding: 14px;
    border-bottom: 2.5px solid #9d8234;
  }
  .content {
    padding: 20px;
  }
  .footer {
    color: #fff;
    position: relative;
    bottom: 0;
    padding-top:8px;
    padding-bottom:8px;
    width:100%;
    text-align: center;
    z-index: 100;
    border-top: 2.5px solid #9d8234;
  }
  .header-logo-images{
    position: relative;
  }
  .header-logo{
    height: 50px; 
    bottom: 0px; 
    right:0px;
    display:none;
  }

  .headerTite-wrapper {
    height: 60px !important; 
  }

  .header-logo-wrapper{
    display:none;
  }

  .header-title-text{
    margin-right:80px !important;
    padding-left:8px; 
    padding-right:8px;
  }

  .bio-paragraph{
    /* max-width: 800px; */
    width: fit-content;
    margin-top: 64px !important;
    margin-bottom: 8px !important;
  }

  .paragraph-indent{
    text-indent: 20px;
  }

  .text-medium{
    font-size: 15pt;
  }

  .text-orange{
    color: #9d8234;
  }
  .text-red{
    color: #9d3434;
  }
  .text-purple{
    color: #b997ed;
  }
  .border-purple{
    border:solid 1.5px #b997ed;
  }
  .text-dark-yellow{
    color: #736111;
  }
  .text-outline-red{
    text-shadow:
                -0.5px -0.5px 0 #a10a11,
                0.5px -0.5px 0 #a10a11,
                -0.5px 0.5px 0 #a10a11,
                0.5px 0.5px 0 #a10a11;
  }
  .image-container{
    overflow: hidden;
  }
  .centered{
    margin:auto;
  }
  .small-v-margin{
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .flex-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
  .background-primary-1{
    background:#1c191a;
  }
  .background-primary-1-alpha{
    background: rgba(28, 25, 26, 0.95);
  }
  .background-primary-2{
    background-color: #433b47;
  }
  .background-primary-3{
    background-color: #433b47;
  }

  .space-evenly {
        justify-content: space-evenly;
        margin-top: 10px;
    }

  .social-icons {
      display: flex;
      gap: 10px;
  }

  .social-icons a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 2px solid #9d8234;
      border-radius: 50%;
      color: #9d8234;
      text-decoration: none;
      
  }

  .social-icons-contact-wrapper{
    width:auto;
  }

.song-list-content {
    justify-content: flex-start;
    flex-direction: column;
    height: 80%;
    max-height: 100%;
    margin-top: 8px;
    max-width: 100%;
}

  .music-page-content{
    max-width: 1000px;
    margin:auto;
    margin-bottom: 64px;
  }

  .music-page-content-title{
    width:85%;
    margin:auto;
  }

  .music-page-image-content {
    width:25%; 
    min-width: 300px; 
    padding:8px;
    margin-top: 8px;
  }

  .song-list-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 250px;
    text-align: left;
  }

  .small-audio {
    margin: 8px;
    height: 24px;
  }

  .social-icons a:hover{
    opacity: 0.7;
  }

  .songListText{
    font-weight:600; 
    text-align: center; 
    max-width:800px;
    margin: unset !important;
    justify-content: center;
  }

  .button-link {
    padding:8px;
    width: fit-content;
  }

  .submit-button {
      align-items: center;
      justify-content: center;
      border: 2px solid #9d8234;
      border-radius: 10px;
      color: #9d8234;
      text-decoration: none;
      background-color: transparent;
      
  }

  .submit-button:hover {
    opacity: 0.7;
  }

  .link{
    text-decoration: none;
    margin: 4px;
    font-weight:600;
  }

  .underline{
    text-decoration: underline !important;
  }

  .link-title{
    text-decoration: none;
    margin: 4px;
    font-weight:600;
  }

  .link:hover{
    opacity: 0.7;
  }
  
  .link-contact-wrapper{
    max-width: 100%;
    width: 800px;
    justify-content: space-around;
    flex-wrap: wrap;
    margin:auto;
  }

  .link-contact-item{
    padding:16px;
  }

  .link-icon-label{
    width:160px;
    /* width: fit-content; */
    text-align: center;
  }

  .link-labeled-wrapper{
    margin-top: 16px;
    margin-bottom: 16px;
    justify-content: space-between;
  }

  .content-block{
    min-height:750px;
    width:80%;
    margin:auto;
  }

  .content-divider{
    border-bottom: 1.5px solid #9d8234;
    width:25%;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    bottom:0;
    opacity:0.5;
  }

  .bottom-border{
    border-bottom: 1.5px solid #9d8234;
  }

  .section[id] {
      scroll-margin-top: 170px; /* Adjust this value to match your header's height */
  }

  .content-text{
    margin-top:auto;
    margin-bottom:auto;
    margin-left:16px;
    opacity: 0.7;
  }

  .centered-horizontal{
    margin-left:auto;
    margin-right:auto;
  }
  .album-image{
    cursor:pointer;
  }
  .fade-out {
      animation: fadeOut 1s ease forwards;
  }
  @keyframes fadeOut {
      from {
          opacity: 1;
      }
      to {
          opacity: 0;
      }
  }
  .fade-in {
      animation: fadeIn 1s ease forwards;
  }
  @keyframes fadeIn {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }

  input::placeholder {
      color: #9d8234; /* Change this to the color you want */
  }
  #navList{
    display:flex !important;
    height: 0;
    overflow: hidden;
  }
  

  .slide-in {
      animation: slideIn 0.5s ease forwards;
  }
  @keyframes slideIn {
      from {
          height: 0px;
      }
      to {
          height: 120px;
      }
  }

  .slide-out {
      animation: slideOut 0.5s ease forwards;
  }
  @keyframes slideOut {
      from {
          height: 120px;
      }
      to {
          height: 0px;
      }
  }

  .album-container {
      position: relative;
      max-width: 100% !important;
      width: 250px; /* Set the width as needed */
      height: 250px; /* Set the height as needed */
  }

  .album-container-lg{
    max-width: 100% !important;
    width: 300px !important; 
    height: 300px !important; 
  }

  .album-container img {
      position: absolute;
      top: 0;
      left: 0;
  }
  
  @media (max-width: 1200px) {
    /*#upcomingImage {
         width: 25% !important; 
    }
    #upcoming {
         width: 75% !important; 
    }*/

    .image-container audio{
      margin-bottom: 24px;
    }
  }
  @media (max-width: 1200px){
    .song-list-content{
        margin:auto;
    }
    .music-page-content-title {
        text-align: center;
    }
  }
  @media (max-width:1070px){
    .show-wrapper-shows h1{
      padding: 8px !important;
      font-size: xx-large!important;
    }
    
    .show-wrapper-shows div{
        padding: 8px!important;
        font-size: large!important;
    }

    .venueinfo-shows{
        top:-12px !important;
    }
  }

  @media (min-width: 920px){
    #navList{
      height: 0 !important;
    }
  }
  @media (max-width: 920px) {
    #upcomingImage {
        display: none;
    }
    #upcoming{
        width:100% !important;
    }
    #upcomingInner{
        margin:auto !important;
    }
    .hamburger{
      display: flex !important;
    }
    .links{
      display: none !important;
    }
    #headerTite{
      margin-left: 16px !important;
      margin-right: 0 !important;
    }
    #navList{
      height: 0 ;
    }
}
@media (max-width: 690px){

  .upcomingText{
    flex-direction: column !important;
    white-space: wrap !important;
  }
  .upcomingDash{
    display: none;
  }
  .content-block{
    width:100%;
  }
  .image-wrapper{
    min-width: 0 !important;
    width:100% !important;
    max-width:316px;
  }
  .formWrapper{
    min-width: 0 !important;
    width:100% !important;
  }
  /* #header-title{
    margin: 0 !important;
  } */
}

@media (max-width: 528px){
  .header-title-text{
    margin: auto !important;
    font-size: smaller;
    height: fit-content;
  }

  .headerTite-wrapper{
    display: flex;
  }

  /* .header-title {
    margin: unset !important;
  } */

  .text-medium {
    font-size: 5vw;
  }

  .social-icons a{
    width: 25px;
    height: 25px;
  }

}


@media (max-width: 400px){
  #header-logo{
    height: 50px !important;
    margin-top:16px;
  }
  #header-logo-image{
    height: 50px !important;
  }
}
@media (max-width: 370px){
  #header-logo{
    display:none !important;
  }
  #contactBanner{
    font-size: 5vw;
  }
}


.show-wrapper-shows{
    margin: auto;
    margin-bottom: 64px;
    margin-top: 64px;
    font-weight: 600;
}

.show-wrapper-shows h1{
    margin: 0;
    padding: 8px;
    font-size: xx-large;
}

.show-wrapper-shows div{
    padding: 8px;
    font-size: x-large;
}

.show-content-shows{
    width:100%;
    justify-content: space-between;
    padding: 0 !important;
}

.addresswrapper-shows{
    margin-top: 0;
}

.datewrapper-shows{
    margin-top: 0;
}

.cancelled-shows{
    margin-bottom: 0;
    text-align: center;
}

.ticketbutton-shows{
    margin:auto;
    padding:8px;
    text-align: center;
}

.time-shows{
    padding:4px 8px 4px 8px !important;
}

.timeinfo-shows{
    padding:4px 8px 4px 8px !important;
}

.ticketinfo-shows{
    padding:32px 32px 8px 32px !important;
    margin:auto;
}

.venueinfo-shows{
    padding:8px 32px 4px 32px !important;
    position: relative;
    top:-16px;
}

.address-shows{
    padding:4px 8px 4px 8px !important;
}

.upcomingText{
  display: none !important;
}

#upcomingInner .bit-offers{
  display: none !important;
}

#upcomingInner .bit-upcoming-events-show-all-button{
  display: none !important;
}

/* #upcomingInner .bit-event{
flex-direction: row; 
} */

#upcomingInner .bit-mobile-date{
 margin:16px;
 font-size: xx-large;
 white-space: nowrap;
}

.bit-description{
  display: none !important;
}

iframe{
  border: 0px none;
  height: 100%;
}

.email-form-container{
  height: 300px;
}