html,body {
  color: #222;
}

/* Hide the "home link" at the top of the page when in mobile view */
#topbar>a.topbar-home-link {
  display:none;
}

main.tickets {
  margin:0 16px;
}

main.venue-info {
  margin-top: 32px;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 740px;
  font-size:14pt;
}

.venue-info-container {
  max-width:90%;
}

a {
  text-decoration: none;
  color: inherit;
}

header {
  width: 100%;
  height: 200px;
  max-height:300px;
  min-height:200px;
  position: relative;
}

.hero-heading {
  text-align: center;
  font-size: 8vw;
  margin-top:7vh;
}

.product-list {
  margin:0;
  width: 100%;
  max-width: 100%;
  margin-top: 32px;
}

.product-container {
  display: block;
  border: none;
  margin-top:32px;
  overflow:auto;
  min-height:200px;
  border-radius: 0;
}

.product-image img {
  display: block;
  max-width: initial;
  max-height: initial;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.product-summary {
  font-size:75%;
}

.bottom-columns {
  margin-top:10px;
}

.star-rating {
  display:block; /* This is meant to move the rating text UNDER the stars */
}

.rating-in-text {
  margin-left:0;
  font-weight:normal;
}

.content-container {
  padding-top: 32px;
  margin: 0 16px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

main.content {
  width: 100%;
}

aside.content-aside {
  width: 100%;
  margin-left:0;
  margin-right:0;
}

aside.venue-info-aside {
  width: 100%;
  margin-left:0;
  margin-right:0;
}


.exhibition_hero_image {
  margin: 6px 14px 20px 0;
  width: 100%;
}