body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f8f5f0; }

nav {
  font-family: Lexend, sans-serif; }
  nav .nav-link {
    font-size: 1.15rem; }

nav .navbar-toggler:focus {
  background: #1a1a1a !important;
  box-shadow: none; }

@media screen and (max-width: 767px) {
  nav #mainNavbar {
    margin-top: 50px; } }

a:not(.btn) {
  color: #50116c; }
  a:not(.btn):hover {
    text-decoration: none; }

.hero {
  /* background-color: #1a1a1a; */
  /* background-color: #cacaca; */
  /* background-color: #50116c; */
  color: #bfa427;
  padding: 0rem 1rem;
  border-top: 8px solid;
  /* box-shadow: 8px 7px 8px gray; */
  /* background: url(resources/images/bg-purple-black.png?3) 0 0 / 100% 100% no-repeat; */
  background: url(../images/bg-wood.png?4) 0 0/100% 100% no-repeat #212529; }
  @media screen and (max-width: 767px) {
    .hero {
      background: url(../images/bg-wood.png?4) center center/800px 186px repeat-y #212529; } }

.hero img {
  width: 120px;
  height: 120px; }

.hero h1 {
  font-weight: 700; }

.hero .btn, .card .btn {
  background-color: #50116c;
  color: white;
  font-weight: 600;
  border-radius: 50px;
  padding: 8px 24px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.6; }

.wood-panel {
  background: url(../images/bg-wood.png?4) center bottom/900px 108px #212529 no-repeat;
  height: 40px; }
  @media screen and (min-width: 768px) {
    .wood-panel {
      background: url(../images/bg-wood.png?4) center bottom/100% auto #212529 no-repeat;
      height: 60px; } }

h2 {
  font-family: Lexend, sans-serif; }

h3 {
  font-weight: lighter; }

.shows-section {
  padding: 2rem 1rem; }

.logo {
  margin-bottom: -55px;
  margin-top: -30px; }

@media screen and (min-width: 768px) {
  .logo {
    margin-bottom: -42px;
    margin-top: -30px; }
  .hero img {
    width: 180px;
    max-width: 100% !important;
    height: auto !important; }
  .shows-section {
    padding: 4rem 1rem; } }

.shows-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 700;
  line-height: 30px; }

.card {
  transition: transform 0.3s ease-in-out;
  overflow: hidden;
  cursor: pointer; }

.card .btn, .btn-purple {
  background-color: #50116c;
  background-size: 200% 200%;
  background-position: left center;
  color: white;
  font-weight: 600;
  border-radius: 50px;
  padding: 8px 24px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  line-height: 1.6;
  transition: background-position 0.5s ease-in-out, color 0.5s ease-in-out; }

.card .btn:hover, .card:hover .btn, .btn-purple:hover {
  background-image: linear-gradient(135deg, #6d25a3, #b43ae0);
  color: #fff;
  text-decoration: none; }

.card:hover {
  transform: scale(1.02); }

.card img {
  transition: transform 0.5s ease-in-out; }

.card:hover img {
  transform: scale(1.05); }

a .card {
  text-decoration: mone;
  color: black; }

.card p {
  text-decoration: none; }

.date {
  position: absolute;
  right: 0px;
  top: -30px;
  background: url(../images/bg-gold-banner.png?2) 100% 100%/contain no-repeat;
  width: 300px;
  height: 50px;
  text-align: right; }

.date.past {
  background: url(../images/bg-gray-banner.png?1) 100% 100%/contain no-repeat; }

.nav-text {
  color: #f8f5f0;
  letter-spacing: 1.1px;
  text-decoration: none;
  font-family: Lexend;
  font-size: 20px; }

.mainH {
  font-family: Lexend, sans-serif; }

.location img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc; }

.location a {
  color: #50116c; }

.location a:hover {
  text-decoration: none; }

.home .panel-text a {
  color: #c1a900 !important;
  font-weight: 500; }