body {
  background-color: #1a1a1a;
  font-family: mr-eaves-xl-modern, sans-serif;
  font-style: normal;
  color: #ffffff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: essonnes-display, serif;
  font-weight: 700;
  font-style: normal;
  color: whitesmoke;
}
h1,
h2 {
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 20px;
}
h4 {
  font-weight: 300;
}
a {
  color: #ca4041;
}
a:hover {
  text-decoration: underline;
  color: #ca4041;
}
a.btn-custom:hover {
  color: #ffffff;
}
input[type=submit] {
  color: #ffffff;
}
input[type=submit]:hover {
  color: #ffffff;
  font-weight: bold;
}
ul {
  padding: 0;
}
ul li {
  padding: 0;
  list-style: none;
}
.bg-dark-custom {
  background-color: #0d0d0d;
}
.navbar-toggler {
  border: solid 1px #0d0d0d;
  color: #ca4041;
}
.navbar {
  background-color: #000000;
  border-bottom: solid 3px #ca4041;
  z-index: 1010;
}
.navbar .logo {
  width: 190px;
  height: auto;
}
.color-primary {
  color: #ca4041 !important;
}
.dark-20 {
  background-color: #333333;
}
.btn-custom {
  background: radial-gradient(#ca4041, #9c335a, #733867);
  border-radius: 3px;
  color: #ffffff;
}
.btn-custom-outline {
  background: none;
  border-radius: 3px;
  border: solid 1px rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.btn-custom-outline:hover {
  background-color: #000000;
  color: #ffffff;
  border: #000000;
}
.btn-txt {
  text-align: center;
  font: #000000 16px/22px Avenir;
  letter-spacing: 0;
  color: #FFFFFF;
}
/* The _variables.less in needed to use the variables
 * from the site because the page.less is not included
 * in the master.less file
 */
.hero-wrapper {
  background-color: #b5bec5;
  margin: 0;
  padding: 0;
}
.hero-wrapper .hero {
  background-color: #b5bec5;
  background-image: url('../media/images/backgrounds/hero.jpg');
  background-repeat: no-repeat;
  background-size: 280px auto;
  background-position: -90px bottom;
  overflow: visible;
  height: 410px;
}
.hero-wrapper .hero h1 {
  font-weight: 700;
}
.hero-wrapper .hero .sub-tagline .container h1 {
  text-align: left;
  font-size: 36px;
  color: #000000;
}
.hero-wrapper .hero .sub-tagline .container .soprano {
  text-align: left;
}
.hero-wrapper .hero .sub-tagline .container p {
  color: #000000;
  font-size: 18px;
}
.hero-wrapper .hero .sub-tagline .container .soprano {
  font-family: annabelle-jf, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: #ca4041;
}
.hero-wrapper .hero .sub-tagline i {
  text-align: center;
  align-content: end;
  width: 100%;
  position: relative;
  bottom: -210px;
  font-size: 36px;
  display: none;
}
.main-content {
  /* This line goes over the section title
	 * Global Element
	 */
}
.main-content section.events,
.main-content section.bio,
.main-content section.repertoire,
.main-content section.disco,
.main-content section.gallery,
.main-content section.social-media,
.main-content section.newsletter {
  padding: 80px 10px;
}
.main-content p,
.main-content ul,
.main-content li {
  color: #cccccc;
  line-height: 26px;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: .5px;
}
.main-content .line {
  height: 5px;
  max-width: 60px;
  background-color: #ca4041;
}
.main-content .events .card {
  margin-bottom: 20px;
  max-width: 85%;
  margin: 0 auto;
  float: none;
}
.main-content .repertoire {
  border-top: solid 1px #333333;
}
.main-content .repertoire footer {
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}
.main-content .bio {
  background-color: #000000;
}
.main-content .disco {
  padding: 80px 15px;
}
.main-content .disco .player iframe {
  width: 300px;
  height: 300px;
}
.main-content .gallery {
  border-top: solid 1px #333333;
}
.main-content .gallery .caption,
.main-content .gallery img {
  padding: 0 15px;
}
.main-content .gallery .caption,
.main-content .gallery p,
.main-content .gallery a {
  font-style: normal;
  font-weight: 100;
}
.main-content .social-media {
  background-color: #000000;
}
.main-content .social-media a {
  color: #ffffff;
  text-align: center;
}
.main-content .social-media .fab {
  font-size: 36px;
  font-size: -webkit-xxx-large;
  text-align: center;
}
.main-content .newsletter {
  background: radial-gradient(#ca4041, #9c335a, #733867);
  opacity: 1;
}
.main-content .newsletter a {
  color: #ca4041;
}
.main-content .newsletter a:hover {
  color: #ca4041;
}
.main-content .newsletter #mce-email {
  height: 45px;
  margin: 0 0 10px 0;
  border: 0;
}
.main-content .newsletter .btn {
  width: 100%;
}
.main-content footer {
  padding: 80px 10px;
  text-align: center;
}
.main-content footer p {
  font-size: 14.4px;
}
/* =========================================================================================================
 * MEDIA QUERIES
 */
@media (min-width: 576px) {
  .hero-wrapper .hero {
    background-size: 350px auto;
    background-position: -16px bottom;
    height: 500px;
  }
  .hero-wrapper .sub-tagline .container h1 {
    font-size: 54px;
  }
  .hero-wrapper .sub-tagline .container .soprano {
    font-size: 39.6px;
  }
  .hero-wrapper .sub-tagline .container p {
    font-size: 18px;
    font-weight: 100;
  }
  .hero-wrapper .sub-tagline i {
    top: 190px;
  }
  .main-content section.events,
  .main-content section.bio .main-content section.disco,
  .main-content section.gallery,
  .main-content section.social-media {
    padding: 150px 10px;
  }
  .main-content section.newsletter {
    padding: 50px 10px;
  }
  .main-content p {
    line-height: 30px;
    font-weight: 200;
    font-size: 18px;
    letter-spacing: .5px;
  }
  .main-content section h1 {
    margin-bottom: 15px;
  }
  .main-content .events {
    background-size: cover;
  }
  .main-content .events .card {
    max-width: 100%;
  }
  .main-content .bio {
    padding: 150px 0;
  }
  .main-content .gallery #img1-link {
    /* This is to display a reponsive gallery thumbnails because
				 * surreal cms does not permit to add any other elemets, classes,
				 * and atributes to the images e.g. col-md-2. Instead we use
				 * CSS Grid to control the number of columns
				 *
				 * NOTE: This is only added on Small and Large Media Queries
				 */
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-evenly;
  }
}
@media (min-width: 768px) {
  .hero-wrapper .hero {
    background-size: 430px auto;
    background-position: -29px bottom;
    height: 600px;
  }
  .hero-wrapper .hero .sub-tagline .container h1 {
    font-size: 61.2px;
  }
  .hero-wrapper .hero .sub-tagline .container .soprano {
    font-size: 61.2px;
  }
  .hero-wrapper .hero .sub-tagline .container p {
    font-size: 24px;
    font-weight: 100;
  }
  .main-content section.bio {
    padding: 0;
  }
  .main-content section.bio .container {
    background-image: url(../media/images/backgrounds/_MGL3485.jpg);
    background-size: 400px auto;
    background-repeat: no-repeat;
    background-position: right top;
    padding: 80px 10px;
  }
  .main-content .disco {
    padding: 100px 0;
  }
  .main-content .disco .player iframe {
    width: 100%;
    height: 400px;
    max-width: 600px;
  }
}
@media (min-width: 992px) {
  .hero-wrapper .hero {
    background-size: 540px auto;
    background-position: -36px bottom;
    height: 700px;
    padding: 40px 0 0 0;
  }
  .hero-wrapper .hero .sub-tagline .container h1 {
    font-size: 82.8px;
  }
  .hero-wrapper .hero .sub-tagline .container .soprano {
    font-size: 82.8px;
  }
  .hero-wrapper .hero .sub-tagline .container p {
    font-size: 24px;
    font-weight: 100;
  }
  .main-content p {
    font-size: 32.72727273px;
    font-weight: 200;
    line-height: 46.8px;
  }
  .main-content h2 {
    font-size: 54px;
    margin-bottom: 50px;
  }
  .main-content .card p,
  .main-content .uk-card p,
  .main-content .gallery p {
    font-size: 18px;
    line-height: 24px;
  }
  .main-content .bio .container {
    background-size: 520px auto;
    padding: 200px 0;
  }
  .main-content .bio .container p {
    margin-bottom: 50px;
  }
  .main-content .disco {
    padding: 200px 0;
  }
  .main-content .gallery #img1-link {
    /* This is to display a reponsive gallery thumbnails because
				 * surreal cms does not permit to add any other elemets, classes,
				 * and atributes to the images e.g. col-md-2. Instead we use
				 * CSS Grid to control the number of columns
				 *
				 * NOTE: This is only added on Small and Large Media Queries
				 */
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-evenly;
  }
  .main-content .gallery img {
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  .main-content .gallery img:hover {
    transform: scale(1.03);
    -webkit-transition: all .5s;
    transition: all, .5s;
    z-index: 100;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .main-content .newsletter p {
    font-weight: 200;
    color: #ffffff;
  }
  .main-content .newsletter h2 {
    font-size: 54px;
    margin: 0 0 20px 0;
  }
  .main-content .newsletter #mce-email {
    width: 80%;
    float: left;
    border-radius: 3px 0 0 3px;
  }
  .main-content .newsletter .btn {
    width: 20%;
    border-radius: 0 3px 3px 0;
    height: 45px;
  }
}
@media (min-width: 1200px) {
  .hero-wrapper .hero {
    background-size: 585px auto;
    background-position: -33 bottom;
    height: 750px;
  }
  .hero-wrapper .hero .sub-tagline .container h1 {
    font-size: 90px;
  }
  .hero-wrapper .hero .sub-tagline .container .soprano {
    font-size: 90px;
  }
  .hero-wrapper .hero .sub-tagline .container p {
    font-size: 27.69230769px;
    font-weight: 100;
  }
}
.sub-tagline .container {
  display: grid;
  grid-template-columns: 60%;
  justify-content: end;
  padding: 80px 0 0 0;
}
.hero-template .sub-tagline .container {
  display: grid;
  grid-template-columns: 100%;
  padding: 80px 0 0 0;
}
@media (min-width: 576px) {
  .sub-tagline .container {
    grid-template-columns: 40%;
    padding: 80px 0 10px 0;
  }
  .main-content section {
    padding: 50px 25px;
  }
}
@media (min-width: 768px) {
  .sub-tagline .container {
    grid-template-columns: 50%;
  }
}
@media (min-width: 992px) {
  .sub-tagline .container {
    grid-template-columns: 50%;
  }
}
@media (min-width: 1200px) {
  .sub-tagline .container {
    grid-template-columns: 47%;
  }
}