#header .logo img, #header .logo svg {
height: 70px;
}

body.header-fixed.header-animated #header.scrolled .logo img, body.header-fixed.header-animated #header.scrolled .logo svg {
height: 50px;
}

.hero { padding-top: 18rem; }
@media (max-width: 840px) {
    .hero {
        padding-top: 12rem;
    }
}
.title-center h1+h2, .title-h1h2 h1+h2 {
margin-bottom: 0;
}

#header .festival a {
    color: orangered;
}

.btn.btn-festival {
    background: orangered;    
    border-color: orange;
}

#top #logos + .modular-text { background: #acb3c2!important; padding-top: 2rem; padding-bottom: 2rem;  }
#top #logos + .modular-text p { margin: 0; }
#top #logos + .modular-text .column { text-align: center; }
#top #logos + .modular-text img { height: 4rem; }

.card {
    border: 0;
    box-shadow: 0 .25rem 1rem rgba(48,55,66,.15);
    margin-bottom: 1rem; 
}

#top #adherer + .modular-text { text-align: center; border-top: 1px solid #acb3c2; }

h1.with-subtext { margin-bottom: 0; }
h1.with-subtext + div { margin-bottom: 1.5rem; }

/* from https://stackoverflow.com/questions/38270661/displaying-a-youtube-video-with-iframe-full-width-of-page */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  margin-top: 25px;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fully-clickable {
  position: relative;
}

/* https://stackoverflow.com/questions/70068954/make-entire-card-clickable-by-targeting-a-inside-of-it */
.fully-clickable a::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.photo-gallery { margin-top: 4rem; }

.film-members td { vertical-align: top; }
.movie-poster img { margin-top: 2rem; }

@media (max-width: 840px) {
    .hero {
        background-position: 0 0 !important;
    }
}

.header-dark #header:not(.scrolled) + .mobile-menu .button_container span  {
background: rgba(255,255,255,.7)!important;
}

.treemenu li { line-height: 2.2rem; }
.treemenu li a { font-size: 1.8rem; color: white; }

table.film-members { table-layout: fixed; margin-top: 4rem; }
table.film-members th, table.film-members td { width: 60%; }
table.film-members th:first-child, table.film-members td:first-child { width: 40%; }

#footer { text-align: left; padding: 1rem 0 2rem 0; }
#footer p { margin-bottom: .5rem; }

.timeline { margin-top: 2rem; }
.timeline h2 { margin-top: -.6rem; }
.timeline .timeline-item {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.2rem;
    position:relative
}

.timeline .timeline-item::before {
    background: #dadee4;
    content: "";
    height: 100%;
    left: 11px;
    position: absolute;
    top: 1.2rem;
    width: 2px;

}

.timeline .timeline-item .tile-subtitle { font-weight: 700; }

.timeline .timeline-item .timeline-left {
    -ms-flex: 0 0 auto;
    flex:0 0 auto
}

.timeline .timeline-item .timeline-content {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding:2px 0 2px .8rem
}

.timeline .timeline-item .timeline-icon {
    align-items: center;
    border-radius: 50%;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    height: 1.2rem;
    justify-content: center;
    text-align: center;
    width:1.2rem
}

.timeline .timeline-item .timeline-icon::before {
    border: .1rem solid #5755d9;
    border-radius: 50%;
    content: "";
    display: block;
    height: .4rem;
    left: .4rem;
    position: absolute;
    top: .4rem;
    width:.4rem
}

.timeline .timeline-item .timeline-icon.icon-lg {
    background: #5755d9;
    line-height:1.2rem
}

.timeline .timeline-item .timeline-icon.icon-lg::before {
    content:none
}

.divider {
border-top: .05rem solid #f1f3f5;
height: .05rem;
margin: .4rem 0;
}

.film-poster { aspect-ratio: 3 / 4; background-repeat: no-repeat; background-position: 50% 100%; background-size: contain; }

.tab-label {
  display: block;
  float: left;
  padding: 10px;
  margin: 0 .4rem 0 0;
  padding: .4rem .2rem .3rem .2rem;
  cursor: pointer;
  border-bottom: .1rem solid transparent;    
}

.tab-divider {
  height: 1px; 
  clear: both;
  border-top: .05rem solid #e7e9ed;        
}

.tab-label.tab-closure { float: none; }

.tab-label:hover {
  color: #3085ee;    
}

.tab-radio:checked + .tab-label {
  color: #3085ee;
  border-bottom-color: #3085ee;
}

.tab-radio {
  display: none;
}

#tab-film ~ [id^="tab-content"] {
  display: none;
}

#tab-film:checked ~ #tab-content-film,
#tab-makingof:checked ~ #tab-content-makingof {
  display: block;
}


#agenda div { display: none; padding: .5rem 0; }
#agenda div b { display: block; }
#agenda div.event { display: block; }

@media (min-width: 840px) {
    #agenda div { display: block; }
    #agenda { margin-top: 1rem; }
    #agenda div { width: calc(100%/7); aspect-ratio: 4/3; float: left; border: 1px solid black; margin: 0 -1px -1px 0; overflow: hidden; padding: .2rem; position: relative; }
    #agenda div:nth-child(7n), #agenda div:nth-child(7n-1) { background: rgb(247, 248, 249); }
    #agenda div span { font-size: 1.8rem; color: #bcc3ce; }
    #agenda div.today span { color: red; }
    #agenda div.lastweek { margin-bottom: 2rem;  }
    #agenda div.event { background: rgb(50, 182, 67); color: white; }
}