:root {
  --body-font: 'Yanone Kaffeesatz', sans-serif;
  --heading-font: 'Permanent Marker', cursive;
  --subhead-font: 'Yanone Kaffeesatz', sans-serif;
  --white: #fff;
  --black: #000;
  --light-gray: #eee;
  --peach: #eb795f;
  --bg-white-trans: rgba(255, 255, 255, 0.65);
  --bg-black-trans: rgba(0, 0, 0, 0.65);
}

body {
  color: var(--light-gray);
  font-family: var(--body-font);
  font-weight: 300;
  font-size: 16px;
  background-image: url('../assets/img/bg-train-sunset@2x.jpg');
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #000;
}

body.film {
  background-image: url('../assets/img/bg-train-sunset@2x.jpg');
}

body.music {
  background-image: url('../assets/img/JamesCollin_ElboRoom_live.jpeg');
  background-position: center top;
}

h1, .h1 {
  font-family: var(--heading-font);
  font-size: 4.209rem;
}

h2, .h2, 
h3, .h3, 
h4, .h4 {
  font-family: var(--body-font);
}

h2, .h2 {
  font-size: 3.157rem;
}

h3, .h3 {
  font-size: 2.369rem;
}

h4, .h4 {
  font-size: 1.777rem;
}

a {
  color: var(--white);
}

a:hover {
  color: var(--peach);
}

.navbar {
  font-family: var(--body-font);
  font-size: 1.777rem;
  line-height: 1;
  transition: all 0.3s;
}

.navbar-toggler, .navbar-toggler:focus {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 2rem;
  color: var(--white);
}

.navbar-toggler {
  transition: all 0.3s;
}

.nav-link {
  color: var(--light-gray);
}

.nav-link:hover {
  color: var(--peach);
}

.navbar .navbar-brand {
  font-family: var(--heading-font);
  font-size: 2.369rem;
  color: var(--white);
}
.home .navbar .navbar-brand {
  color: var(--black);
}

.navbar.shown {
  background-color: var(--white);
}

.navbar.shown .nav-link, .navbar.shown .navbar-brand, .navbar.shown .navbar-toggler {
  color: var(--black);
}

.navbar.shown .navbar-toggler {
  transform: rotate(90deg);
}

@media screen and (min-width: 768px) {
  .navbar .nav-link {
    padding-bottom: 0;
  }

  .navbar.scrolled {
    background-color: var(--bg-white-trans);
  }

  .navbar.scrolled .nav-link {
    color: var(--black);
  }

  .navbar.scrolled .nav-link:hover {
    color: var(--peach);
  }
}

.content {
  background-color: var(--bg-black-trans);
}

.video-player_wrapper {
  position: relative;
  padding-top: calc(56.25% + 43px);
}

.video-player {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0
}

footer {
  background-color: var(--bg-black-trans);
  font-size: 1.25rem;
}

.footer-copyright {
  font-size: 1rem;
}