@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-Medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Memphis";
  src: url("../fonts/memphis/MemphisLTPro-MediumItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
body {
  font-family: 'Memphis', 'sans-serif';
  background-color: rgb(247,247,247);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
  font-weight: 900;
  color: #18171C;
  text-decoration: underline #f2e157;
  text-decoration-thickness: 0.7rem;
  margin-bottom: 20px;
  line-height: 3.3rem;
}

h3 {
  text-decoration: none;
}

h3 span {
  background-color: #f2e157;
  padding: 0 5px;
  /* box-shadow: 5px 0 0px 0px #f2e157, -5px 0 0px 0px #f2e157; */
}


/* Language */
:lang(en) {
  display: none;
}

:lang(fr) {
  display: revert;
}

/* Common - stick footer to the bottom */
html {
  box-sizing: border-box;
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Header */
#title {
  background-color: #002147;
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
}

#title h1 {
  margin: 0;
  text-decoration: none;
}

/* Header - logo */
.bso-logo-header {
  height: 45px;
  margin-right: 10px;
  /* filter: invert(100%); */
}

/* Header - Brussels Film Orchestra */
#title .navbar-brand {
  color: rgb(247,247,247);
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
  font-weight: 900;
  font-size: 2.2rem;
}

/* Header - links to other pages */
/* .navbar-toggler {
  color: rgb(247,247,247);
  border-color: rgb(247,247,247);
} */

#title .nav-link {
  color: rgb(247,247,247);
  font-weight: 900;
  font-size: 1.5rem;
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
  margin-left: 7px;
  margin-right: 7px;
}

/* #concert-button {
  border-radius: 0px;
}

#concert-link {
  color: #18171C;
  background-color: #f2e157;
  padding: 5px 10px;
} */

/* .about-page-link, .contact-page-link, .gallery-page-link, .lang-switch-link { */
.home-page-link, .concerts-page-link, .about-page-link, .contact-page-link, .gallery-page-link, .lang-switch-link {
  padding-left: 10px;
}

.language-icon {
  filter: invert(100%);
  /* filter: invert(9%) sepia(39%) saturate(4239%) hue-rotate(345deg) brightness(100%) contrast(114%); */
  padding-bottom: 3px;
}

/* Footer */
footer {
  font-size: 0.8rem;
  color: rgb(120, 120, 120);

  /* background-color: #002147; */
}

footer p {
  margin-bottom: 0;
}

.social-logo {
  width: 18px;
}

.mail-logo {
  width: 19px;
}

.site-by {
  font-size: 0.70rem;
}

/* Index */
.body-index {
  /* background-color: #002147; */
  background-color: rgb(247,247,247);
  /* background: linear-gradient(#002147,#18171C); */
}

.empty-space {
  width: 100%;
  height: 500px;
  padding: 0.5% 3% 0.5%;
  background-image: url("../images/concert_nb.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;

  margin-bottom: 40px;
  text-align: center;
  position: relative;
}

.empty-space .card {
  /* background-color: #002147!important; */
  /* background-color: #18171C!important; */
  border-color: #f2e157!important;
  color: #f2e157!important;
}
.empty-space .card h2 {
  text-decoration: none;
  font-family: "Bebas Neue";
  /* background-color: #f2e157!important; */
  /* font-weight: 800;
  font-size: 1.4rem; */
}


.index-promotion {
  color: #f2e157;
  font-size: 2rem;
  position: absolute;
  text-align: center;
  /* right: 50%; */
  bottom: 0%;
  font-family: "Memphis";
  font-weight: 400;
}

.body-index .container-fluid {
  /* vertical-align: middle; */
  /* margin: 10% 0px; */
}

/* Index - logo */
.logo-title {
  width: 70%;
  filter: invert(100%);
  margin-left: 3%;
  margin-top: 3%;
  margin-right: 8%;
}

.bso-name {
  font-weight: 800;
  font-style: italic;
  background-color: #f2e157;
}

/* Index - BFO */
.index-bso {
  font-size: 6rem;
  text-decoration: none;
  font-weight: 500;
  line-height: 6rem;
  margin-bottom: 0;
}
/* Index - ad for Uccle June 23 */
.body-index .card-title,
.body-index h1,
.body-index h2 {
  color: rgb(247,247,247);
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
}

.body-index .card {
  background-image: url("../images/concert_crop.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  border: none;
  margin-bottom: 0!important;
}

.body-index .card-header {
  padding-top: 8px;
  padding-bottom: 0px;
  line-height: 3rem;
  text-decoration: none;
}

.body-index .card-body {
  padding-top: 0;
}

.body-index .card-title {
  text-decoration: none;
  background-color: #f2e157;
  color: #18171C;
  margin-bottom: 200px;
}

.card-text {
  margin-bottom: 0px;
}

@media (max-width: 1200px) {
  .logo-title {
    width: 74%;
  }
  .index-bso {
    font-size: 4.5rem;
    line-height: 4.5rem;
  }
  .body-index .card-title {
    font-size: 2.1rem;
  }
  .body-index h2 {
    font-size: 1.8rem;
  }
}

/* @media (max-width: 1028px) {
  .body-index .card-title {
    font-size: 1.7rem;
  }

  .body-index h2 {
    font-size: 1.5rem;
  }
} */

@media (max-width: 820px) {
  .logo-title {
    width: 85%;
  }
  .index-bso {
    font-size: 4.0rem;
    line-height: 4.0rem;
  }
  .body-index .card-title {
    font-size: 1.4rem;
  }

  .body-index h2 {
    font-size: 1.2rem;
  }
}

@media (max-width: 575px) {
  .logo-title {
    width: 73%;
  }
  .index-bso {
    font-size: 4.4rem;
    line-height: 4.4rem;
  }
  .body-index .card-title {
    font-size: 1.6rem;
  }

  .body-index h2 {
    font-size: 1.4rem;
  }
}

.body-teaser {
  text-align: center;
  width: 100%;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px
}

.body-teaser video {
  width: 100%;
}

/* @media (max-width: 575px) {
  .body-teaser {
    width: 95%;
  }
} */

.body-teaser-2 {
  text-align: center;
  width: 80%;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px
}
.body-teaser-2 video {
  width: 100%;
}
/* @media (max-width: 775px) {
  .body-teaser-2 {
    width: 40%;
  }
}
@media (max-width: 575px) {
  .body-teaser-2 {
    width: 55%;
  }
} */

.body-teaser-3 {
  text-align: center;
  width: 100%;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px
}
.body-teaser-3 video {
  width: 100%;
}
/* @media (max-width: 575px) {
  .body-teaser-3 {
    width: 95%;
  }
} */

.body-teaser p {
  margin-top: -0.2rem;
  text-align: right;
  color: rgb(158, 158, 158);
  font-size: 0.65rem;
  font-style: italic;
}

@media (max-width: 1200px) {
  .body-teaser p {
    font-size: 0.6rem;
  }
}
@media (max-width: 575px) {
  .body-teaser p {
    font-size: 0.55rem;
  }
}

.no-concert-text {
  text-align: center;
}

/* Concerts */
.body-concerts h1 {
  margin-top: 40px;
  text-align: center;
}

/* Concerts - thumbnails */
.cards-group-concerts {
  padding: 0% 0 5%;
}

.thumbnail-concert {
  background-color: #002147;
  width: 160px;
  border-radius: 0px;
  font-weight: 700;

  /* font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem; */
}

@media (max-width: 700px) {
  .thumbnail-concert {
    width: 140px;
  }
}

@media (max-width: 600px) {
  .thumbnail-concert {
    width: 120px;
  }
}

@media (max-width: 500px) {
  .thumbnail-concert {
    width: 90px;
    font-size: 0.9rem;
  }
}

.thumbnail-concert:hover {
  background-color: #25233e;
}

.thumbnail-concert:active,
.thumbnail-concert:focus,
.thumbnail-concert:target,
.thumbnail-concert:active:focus {
  background-color: #18171C;
}

/* Concerts - flyers */
.concert-flyer-box {
  padding: 0 3% 20px;
  text-align: center;
}

.concert-flyer-box img {
  width: 80%;
  margin-bottom: 17px;
}

.img-responsive {
  width: 100%;
}

/* Concerts - infos */
.concert-info-box {
  line-height: 2.5rem;
}

/* .concert-info-box a {
  text-decoration-line: none;
  color: #002147;
} */
.concert-info-box .weez {
  width: 95%;
  max-width: 700px;
  margin-right: auto;
}

@media (max-width: 767px) {
  .concert-info-box .weez {
    /* width: 95%; */
    margin-left: auto;
  }
}

.ticket-button-box {
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: 1.8rem;
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
  font-weight: 900;
  display: inline-block;

  color: #18171C;
  background: #f2e157;
  text-align: center;
  padding: .4em 1em .1em;

  line-height: 1.5rem;
}

.ticket-button-box a {
  text-decoration: none;
  color: #18171C;
}

.concert-info-box a {
  /* text-decoration: none; */
  color: #002147;
}


.buy-ticket-infos {
  font-size: 1.0rem;
}

.ticket-title-box {
  margin-bottom: 0px;
  margin-top: 20px;
  font-size: 1.8rem;
  font-family: 'Bebas Neue', 'serif';
  letter-spacing: 0.1rem;
  font-weight: 900;
  display: inline-block;

  color: #18171C;
  background: #f2e157;
  text-align: center;
  padding: .1em 1em .1em;

  line-height: 1.5rem;
  
  width: 95%;
  max-width: 700px;
  margin-right: auto;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .ticket-title-box .weez {
    /* width: 95%; */
    margin-left: auto;
  }
}
.ticket-title-box p {
  text-decoration: none;
  color: #18171C;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.ticket-time-infos {
  font-size: 1.0rem;
}


.concert-info-box img {
  /* vertical-align: text-bottom; */
  padding-bottom: 0.4rem;
}

.event-fb-link {
  color: #002147;
}

.map-concert {
  margin-bottom: 17px;
}

@media (max-width: 450px) {
  .map-xs {
    display: revert;
  }
  .map-sm {
    display: none;
  }
}
@media (min-width: 451px) {
  .map-xs {
    display: none;
  }
  .map-sm {
    display: revert;
  }
}

.booking-helper {
  width: 95%;
  max-width: 700px;
  font-size: 0.75rem;
  text-align: right;
}
.booking-helper p {
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 1.2rem;
}

.concert-sold-out {
  font-weight: 900;
  /* line-height: 1.9rem; */
  margin-bottom: 2px;
}
.concert-sold-out-body {
  font-size: 0.95rem;
  line-height: 1.5rem;
}

/* .weez {
  margin-bottom: 3rem;
  /* float: none!important; */
/* } */ */

/* About */
.body-about {
  margin: 7% 8%;
}

.about-history-title {
  /* text-align: left; */
}

.about-bso {
  margin-top: 12px;
  /* margin-bottom: 8%; */
}

.logo-about {
  width: 200px;
}

.about-bso-text {
  /* margin-top: 8%; */
  /* margin-bottom: 18%; */
}

.body-about h2 {
  /* text-align: center; */
}

.about-founder-element {
  margin: 30px 0px;
}

.about-founder-element h3 {
  text-decoration: none;
  margin-bottom: 8px;
}

.name-founder {
  background-color: #f2e157;
  padding: 0px 5px;
}

.founders {
  padding-left: 12px;
  padding-right: 12px;
}

.photo-jean {
  height: 200px;
  border-radius: 100%;
  margin-bottom: 5%;
  float: left;
  margin-right: 20px;
}

.photo-lydwine {
  height: 200px;
  border-radius: 100%;
  margin-bottom: 5%;
  float: right;
  margin-left: 20px;
}

/* Contact */
.body-contact {
  margin: 7% 8%;
}

.logos-contact {
  text-align: center;
}

.social-logo-contact {
  color: #002147;
  width: 12%;
  margin: 5%;
}

.fb-logo-contact {
  color: #002147;
  width: 12.5%;
  margin: 5%;
}

.mail-logo-contact {
  color: #002147;
  width: 16%;
  margin: 5%;
}

.addr-box {
  text-decoration-line: none;
  color: #002147;
}

/* Gallery */

.gallery-body h2 {
  margin: 20px 4%;
}

.gallery-box {
  margin: 1% 1%;
}

.gallery-element {
  margin: 0% 3% 7%;
}

.gallery-element img {
  width: 100%;
}