header {position: absolute; top: 0; left: 0; width: 100%; color: #FFF; background: #3A67C0; z-index: 100; transition: 0.6s;}
header.transparent {background: none; transition-delay: 0.25s;}
header.floating {position: fixed;}
header.floating.header-slide-in {top: -100px;}
header.floating.is-visible {top: 0;}
header.floating.is-visible ~ header {opacity: 0; transition-delay: 0s;}
header .brand-logo > img {width: 152px; padding: 7px 0;}
header > div {padding: 0 20px;}
header > div > div {display: flex; justify-content: space-between; min-height: 45px; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 0px;}
header a {font-family: "Proxima Nova Semi Bold", Arial, sans-serif; color: #FFF;}
header ul {list-style: none;}
header > div > div > div {display: flex; align-items: center;}
header ul > li {display: inline-block; font-size: 15px; margin: 0 24px;}
header ul > li.cta {margin-right: 0;}
header .actions {display: flex; align-items: center; margin: 0 0 0 10px;}
header .sections a.selected-section {padding-bottom: 5px; border-bottom: 1px solid #FFF;}
header .mobile-menu {display: none;}
header .button.standard-button.join-button {display: inline; background: none; color: #FFF; border: 1px solid #FFF; font-size: 15px; padding: 15px 28px; margin: 0;}
header .button.standard-button.join-button:hover {color: #3A67C0; background: #FFF; border: 1px solid #FFF;}

.header-visibility-gradient {position: absolute; top: 0; left: 0; width: 100%; height: 92px; background: linear-gradient(180deg, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, 0) 100%); z-index: 50;}
/* Styles based on page scroll position */
/* html:not([data-scroll='0']) header {background: #3A67C0;}
html:not([data-scroll='0']) header .join-button {color: #3A67C0; background: #FFF; border: 1px solid #FFF;} */

@media screen and (max-width: 1024px) {
  body.mobile-menu-visible {height: 100vh; overflow: hidden;}
  header ul:first-of-type {display: none;}
  header .mobile-menu {display: block;}
  header .mobile-menu .close-x {display: none;}
  .mobile-menu-visible header .mobile-menu .open-menu {display: none;}
  .mobile-menu-visible header .mobile-menu .close-x {display: block;}
  header .sections {display: none;}
  header .actions {padding: 0; margin: 0;}
  header .actions > li {display: none;}
  header .actions > li.no-sections {display: inline-block; margin: 0;}
  header .actions > li.cta {display: inline-block;}
  header .mobile-menu {margin-left: 20px;}

  .mobile-menu-visible header {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #3A67C0;}
  .mobile-menu-visible header .brand-logo > img {padding: 7px 0 0;}
  .mobile-menu-visible header > div > div {display: block;}
  .mobile-menu-visible header > div > div > div {display: block; width: 100%;}
  .mobile-menu-visible header ul:first-of-type {display: block; padding: 0; margin: 38px 0;}
  .mobile-menu-visible header ul > li {display: block; margin: 0 0 38px;}
  .mobile-menu-visible header .sections a {font-size: 17px;}
  .mobile-menu-visible header .sections a.selected-section {border: 0;}
  .mobile-menu-visible header .actions {display: block; padding: 0; margin: 0;}
  .mobile-menu-visible header .actions > li.cta {display: block;}
  .mobile-menu-visible header .actions > li a, .mobile-menu-visible header .button.standard-button.join-button {font-size: 17px;}
  .mobile-menu-visible header .actions > li.cta .join-button {display: block; width: 100%; color: #3A67C0; text-align: center; background: #FFFFFF; border: 1px solid #FFFFFF; padding: 15px 0;}
  .mobile-menu-visible header .mobile-menu {position: absolute; top: 30px; right: 23px; margin: 0;}
}

@media screen and (max-width: 1099px) {
  header ul > li {margin: 0 16px;}
}

@media screen and (max-width: 768px) {
  header > div > div {padding: 15px 0;}
  header .brand-logo > img {width: 133px; padding: 4px 0 0;}
  header .button.standard-button.join-button {font-size: 14px; line-height: 1; padding: 12px;}
  .mobile-menu-visible header .brand-logo > img {padding: 9px 0 0;}
}