/* Shared: header is transparent with white text/logo while it sits over a dark hero.
   Used by the home page and the outing landing pages. js/header-over-hero.js toggles
   body.vo-over-hero and swaps the logo. */
.header.-type-4 { transition: background-color .3s ease, transform .35s cubic-bezier(.4,0,.2,1), box-shadow .3s ease; }
.header.-type-4 .desktopNav__item > a.dropdown-toggle, .header.-type-4 .header-contact-btn { transition: color .25s, background .25s, border-color .25s; }
body.vo-over-hero .header.-type-4 { background-color: transparent; border-bottom-color: transparent; box-shadow: none; }
body.vo-over-hero .header .desktopNav__item > a.dropdown-toggle { color: #fff; }
body.vo-over-hero .header .desktopNav__item > a.dropdown-toggle:hover { color: #ffb066; }
body.vo-over-hero .header-contact-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.85); }
body.vo-over-hero .header-contact-btn:hover { background: #ff7b00; border-color: #ff7b00; color: #fff; }
body.vo-over-hero .header__menuBtn, body.vo-over-hero .header__menuBtn i { color: #fff; }
body.vo-over-hero .header-mobile-phone img { filter: brightness(0) invert(1); }