/* The _variables.less in needed to use the variables
 * from the site because the page.less is not included
 * in the master.less file
 */
/* Defaults for Hero container.
 * DO NOT Modify
 */
.page-hero-wrapper {
  background-color: #000000;
}
.page-hero-wrapper h1 {
  text-shadow: -2px 2px 2px rgba(0, 0, 0, 0.1);
}
.page-hero-wrapper div.spacer {
  height: 270px;
}
.page-hero-wrapper div.spacer:last-child {
  height: 25px;
}
.page-hero-wrapper .btn {
  max-width: 200px;
}
@media (min-width: 576px) {
  .page-hero-wrapper {
    height: 500px;
  }
  .page-hero-wrapper div.spacer {
    height: 364px;
  }
  .page-hero-wrapper div.spacer:last-child {
    height: 25px;
  }
}
.page-body {
  padding-top: 80px;
}
.page-body h3 {
  margin: 40px 0 20px 0;
  font-weight: 300;
}
.page-body p {
  font-size: 18px;
  line-height: 27px;
}
.page-body p:last-child {
  margin-bottom: 40px;
}
/* Set the background for HERO images here. 
 * DOES NOT apply to homepage
 */
.page-hero-wrapper .about-hero,
.page-hero-wrapper .repertoire-hero {
  background-repeat: no-repeat;
  background-position: center 0;
}
.page-hero-wrapper .about-hero {
  background-image: url("../media/images/backgrounds/_MGL3485.jpg");
  background-size: 370px;
}
.repertoire-hero {
  background-image: url("../media/Images/backgrounds/repertoire-bg.jpg");
  background-size: cover;
}
@media (min-width: 576px) {
  .page-hero-wrapper .about-hero {
    background-position: right 0;
  }
}
@media (min-width: 992px) {
  .page-hero-wrapper .about-hero {
    background-size: 610px;
  }
}
.page-body .card {
  border: 0;
  border-radius: 0;
  margin-bottom: 80px;
}
.page-body .card h2 {
  font-family: mr-eaves-xl-modern, sans-serif;
}
.page-body .card h2 button {
  color: #ffffff;
}
.page-body .card h2 button i {
  margin-right: 10px;
}
.page-body .list-group-item {
  background-color: #333333;
  border: 0;
  font-weight: 400;
  color: #f2f2f2;
}