/* Project 14. Rebuild of the es3 one-pager on CMS blocks. Everything here is
   what block styles and the design settings cannot express: viewport-based
   type sizes, full-bleed banner images, the fixed black header with centred
   logo, the splash screen, scroll fade-in and the footer row. */

/* Bootstrap fixed-top removes the navbar from the flow. */
body {
  padding-top: 9.375rem;
  background-color: #000000;
  color: #FFFFFF;
  line-height: 1.8;
}

main p {
  font-weight: 100;
}

/* Header: 150px black bar, logo centred, single link on the right. */
#ewMainNav {
  min-height: 9.375rem;
  padding-left: 3rem;
  padding-right: 3rem;
  border-bottom: 0;
  transition: min-height 0.3s ease;
}

/* Brand marker ships without start-50; centre it here. */
#ewMainNav .navbar-brand.position-absolute {
  left: 50%;
}

#ewMainNav .ew-site-logo {
  max-height: 9rem !important;
}

#ewMainNav .nav-link {
  font-size: 1rem;
  font-weight: 300;
}

#ewMainNav .navbar-toggler {
  border: 0;
}

/* Section hosts: text sections use the original px-md-5 / px-3 gutters,
   banner sections are edge to edge. */
#ew-e-p14hero-host,
#ew-e-p14txt1-host,
#ew-e-p14txt2-host,
#ew-e-p14txt3-host,
#ew-e-p14txt4-host {
  padding-left: 1rem;
  padding-right: 1rem;
}

#ew-e-p14bn1a-host,
#ew-e-p14bn2a-host,
#ew-e-p14bn3a-host,
#ew-e-p14bn4a-host {
  padding-left: 0;
  padding-right: 0;
}

/* Hero: viewport-sized title and tagline over the background image. */
#ew-e-p14ttl2 {
  font-size: 18.6vw;
}

#ew-e-p14sub2 {
  font-size: 3.7vw;
}

/* Large text: Bootstrap display-1 / display-4 scale, thin weight. */
#ew-e-p14h1a2,
#ew-e-p14rel2,
#ew-e-p14wl1b {
  font-size: calc(1.625rem + 4.5vw);
}

#ew-e-p14ld1b,
#ew-e-p14mn1b,
#ew-e-p14rc1b {
  font-size: calc(1.475rem + 2.7vw);
}

#ew-e-p14wl1b a {
  color: #FFFFFF !important;
  font-weight: 100 !important;
  font-size: inherit !important;
}

#ew-e-p14wl1b a:hover,
#ew-e-p14wl1b a:focus {
  color: #CCCCCC !important;
}

/* Banner images: 95vh, cover, slightly darkened like the original overlay. */
#ew-e-p14bn1c,
#ew-e-p14bn2c,
#ew-e-p14bn3c,
#ew-e-p14bn4c {
  display: block;
  width: 100%;
  height: 95vh;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.76);
}

/* Scroll fade-in (class set by custom.js). */
html.ew-fade main h1,
html.ew-fade main h3 {
  opacity: 0;
  transition: opacity 1s ease-in;
}

html.ew-fade main h1.ew-visible,
html.ew-fade main h3.ew-visible {
  opacity: 1;
}

/* Splash screen (node created by custom.js). */
#ewSplash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  pointer-events: none;
  animation: ewSplashOut 0.6s ease-in 0.25s forwards;
}

#ewSplash img {
  height: 83px;
}

@keyframes ewSplashOut {
  0%, 10% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    filter: blur(5px);
  }
}

/* Footer: copyright left, Instagram and legal links right. */
#ewSiteFooter {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#ewSiteFooter .ew-footer-bottom {
  border-top: 0 !important;
}

#ewSiteFooter .ew-footer-bottom .container {
  font-size: 1rem;
}

#ewSiteFooter .ew-footer-copyright {
  margin-right: auto;
  font-weight: 100;
}

#ewSiteFooter .ew-footer-social {
  font-size: 1.25rem;
  line-height: 1;
}

#ewSiteFooter .ew-footer-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 300;
}

/* Legal pages. */
#ew-e-p14impg .ew-section-container,
#ew-e-p14prpg .ew-section-container {
  max-width: 52rem;
}

#ew-e-p14impg .ew-section-container > div,
#ew-e-p14prpg .ew-section-container > div {
  margin-bottom: 1rem;
}

#ew-e-p14impg h2,
#ew-e-p14prpg h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
}

#ew-e-p14impg h3,
#ew-e-p14prpg h3 {
  font-size: 1.35rem;
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  #ew-e-p14hero-host,
  #ew-e-p14txt1-host,
  #ew-e-p14txt2-host,
  #ew-e-p14txt3-host,
  #ew-e-p14txt4-host {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 767.98px) {
  body {
    padding-top: 4.5rem;
  }

  #ewMainNav {
    min-height: 4.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #ewMainNav .ew-site-logo {
    max-height: 2.4rem !important;
  }

}