/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

  /* Container alleen op kleine schermen schermbreed maken */
  @media (max-width: 576px) {
    .layout-mobile-full {
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

#intro-example 
{
      margin-top: 1rem;
      height: 200px;
}

    /* Height for devices larger than 992px */
    @media (min-width: 992px) {
      #intro-example {
        height: 400px;
      }
    }

img {
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
}


/* Statuskleuren (open / storing / gesloten) 
   We laten jouw bestaande .red-background gewoon staan. */

.green-background {
  background-color: #d4edda;   /* open */
}

.orange-background {
  background-color: #ffeeba;   /* storing / onderhoud */
}

/* Shows: tijden in verleden doorstrepen en toekomstige iets vetter */
.showtime {
  display: inline-block;
  margin: 0 2px;
}

.showtime.past {
  text-decoration: line-through;
  opacity: 0.6;
}

.showtime.upcoming {
  font-weight: 500;
}


main > .container {
  padding: 50px 15px 0;
}

.footer {
  background-color: #f5f5f5;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}
.grey-background {
    background-color: #ccc;
}

.blue-background {
    background-color: #D7E5F0;
}

/* Open = groen */
.green-background {
    background-color: #d4edda;
}

/* Storing / in onderhoud = oranje */
.orange-background {
    background-color: #ffe5b3;
}

/* Gesloten = rood */
.red-background {
    background-color: #f7bec0;
}

.light-background {
    background-color: #e9eae0;
}

.show-time {
  display: inline-block;
  margin-right: 4px;
  font-size: 0.85rem;
}

.show-time.past {
  text-decoration: line-through;
  opacity: 0.6;
}


/* Extra statuskleuren */
.green-background {
    background-color: #d4edda; /* licht groen */
}

.orange-background {
    background-color: #ffe3b3; /* zacht oranje */
}

/* Shows: tijden die al geweest zijn / nu / nog komen */
.past-show {
    text-decoration: line-through;
    opacity: 0.6;
}

.next-show {
    font-weight: bold;
    text-decoration: underline;
}

.future-show {
    opacity: 0.9;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 1rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 2rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 18rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 18rem;
}

.up-arrow {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    border-bottom: solid 7px black;
    border-top-width: 0;
    cursor: pointer;
}

.down-arrow {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    border-top: solid 7px black;
    border-bottom-width: 0;
    margin-top:1px;
    cursor: pointer;
}