@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zalando+Sans+Expanded:ital,wght@0,800;1,800&display=swap');
body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size:18px;
}

h1, h2, h3, h4, .navbar-center-text {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1em;
  margin: 0 0 0.75em 0;
}

p {
  margin-bottom: 1.5em;
}

#zone-main ul {
  list-style-position: outside;
  padding: 0 0 0 1em;
}

#zone-main li {
  margin-bottom:0.5em;
}

#zone-main li:last-child {
  margin:0;
}

.btn {
  font-size: 0.85em;
  padding: 12px 25px;
  border: 0;
  border-radius: 50px;
}

.btn-primary {
  background: #121212;
  font-weight: bold;
}

.card {
  border: 0;
}

.card-body {
  background: #f2f2f2;
  padding:2em;
  border-radius: 0 0 25px 25px;
}

.card-img-top {
  border-radius: 25px 25px 0 0;
}

.col p:last-child {
  margin-bottom: 0;
}

header .page-menu {
  float: none;
}
header .navbar {background: #121212;}
.navbar-center-text ul {
  list-style: none;
}
.navbar-center-text ul li {
  display: inline;
  margin-right: 15px;
  font-size:1.15em;
}
.navbar-center-text ul li:last-child {
  margin-right: 0;
}
.navbar-center-text ul li a {
  color: #f5f5f5;
}
.custom-navbar {
  margin-bottom: 0;
  border-radius: 0;
  background: #fff;
  border: 0;
}

.navbar-row {
  display: table;
  width: 100%;
  margin: 0;
}

.navbar-col {
  display: table-cell;
  float: none;
  vertical-align: middle;
  height: 76px;
}

.navbar-logo {
  text-align: left;
}

.logo-img {
  max-height: 48px;
  width: auto;
}

.navbar-center-text {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.navbar-menu-button {
  text-align: right;
  color: #f5f5f5;
}

.hamburger-button {
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  z-index: 1040;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Flyout */
.flyout-menu {
  position: fixed;
  top: 0;
  right: -340px;
  width: 340px;
  max-width: 86vw;
  height: 100vh;
  background: #121212;
  color: #fff;
  z-index: 1050;
  padding: 32px;
  transition: right 0.28s ease;
}

.flyout-menu.is-active {
  right: 0;
}

.close-menu {
  position: absolute;
  top: 18px;
  right: 22px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1;
}

.flyout-nav {
  list-style: none;
  padding: 56px 0 0;
  margin: 0;
}

.flyout-nav a {
  display: block;
  padding: 0 0 12px 0;
  color: #f5f5f5;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-login {
  border-bottom: 1px solid #333;
  margin-bottom: 12px;
}

.header {
  text-align: center;
  color: #f5f5f5;
  padding: 10vh 0!important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.video-container {
  width: 100%;                  /* Fills the horizontal space of its parent */
  aspect-ratio: 16 / 9;         /* Maintains standard YouTube widescreen proportions */
}

.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;               /* Removes default inline bottom whitespace */
}

.nav-sub li {
  border:none;
  border-radius: 0;
}
.nav-pills>li>a {
  border-radius: 0;
}

.nav>li>a {
  border-bottom: 2px solid #121212;
  color: #121212;
}

.nav-stacked>li+li {
  margin: 0;
}

.nav-pills>li.active>a {
  background: #121212;
}

footer {
  background: #121212;
  color: #f5f5f5;
  text-align: center;
  font-size:0.85em;
  margin: 0;
  padding: 1em 0;
}

footer a {
  color: #fff;
}

footer ul {
  list-style: none;
}

footer ul li {
  display: inline;
  margin-right: 15px;
}

footer ul li:last-child {
  margin-right: 0;
}

main .container-fluid .row {
  padding-bottom: 2em;
  padding-top: 2em;
}

main .container-fluid .row .col:not(last-child) {
  padding-bottom: 1em;
  padding-top: 1em;
}

@media (max-width: 767px) {
  .navbar-col {
    height: 64px;
  }

  .navbar-center-text ul {
    display: none;
  }

  .logo-img {
    max-height: 38px;
  }
}

@media screen and (min-width: 768px) {
  .card-deck .card {
    margin-bottom:30px;
  }
}