#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #111;
  opacity: 0;
  z-index: 1100;
  pointer-events: none;
  transition: width 0.18s ease-out, opacity 0.22s ease-out;
}

.topbar,
.login-header,
.careers-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: height 0.5s cubic-bezier(.4,0,.2,1), padding 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.5s cubic-bezier(.4,0,.2,1), background-color 0.5s cubic-bezier(.4,0,.2,1);
}

.logo-header,
.login-logo,
.careers-logo {
  transition: height 0.5s cubic-bezier(.4,0,.2,1), max-width 0.5s cubic-bezier(.4,0,.2,1);
}

body[data-scroll-header-fixed="1"] {
  padding-top: var(--scroll-header-offset, 0px);
  transition: padding-top 0.32s cubic-bezier(.4,0,.2,1);
}

body[data-scroll-header-fixed="1"] .topbar.about-header,
body[data-scroll-header-fixed="1"] .login-header,
body[data-scroll-header-fixed="1"] .careers-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

@media (min-width: 1025px) {
  body[data-scroll-mobile-only="1"] {
    padding-top: 0 !important;
  }

  body[data-scroll-mobile-only="1"] #scrollProgressBar {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
  }

  body[data-scroll-mobile-only="1"] .topbar,
  body[data-scroll-mobile-only="1"] .login-header,
  body[data-scroll-mobile-only="1"] .careers-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  body[data-scroll-mobile-only="1"] .topbar.shrink,
  body[data-scroll-mobile-only="1"] .login-header.shrink,
  body[data-scroll-mobile-only="1"] .careers-header.shrink {
    height: auto !important;
    min-height: 0 !important;
    padding: inherit !important;
    box-shadow: none !important;
  }

  body[data-scroll-mobile-only="1"] .topbar.shrink .logo-header,
  body[data-scroll-mobile-only="1"] .login-header.shrink .login-logo,
  body[data-scroll-mobile-only="1"] .careers-header.shrink .careers-logo {
    height: inherit !important;
  }
}

.topbar.shrink,
.login-header.shrink,
.careers-header.shrink {
  height: 54px !important;
  min-height: 54px !important;
  padding: 4px 18px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
}

.topbar.shrink .logo-header,
.login-header.shrink .login-logo,
.careers-header.shrink .careers-logo {
  height: 38px !important;
}

@media (max-width: 1024px) {
  #scrollProgressBar {
    height: 3px;
  }
}

@media (max-width: 600px) {
  .topbar.shrink,
  .login-header.shrink,
  .careers-header.shrink {
    height: 50px !important;
    min-height: 50px !important;
    padding: 4px 14px !important;
  }

  .topbar.shrink .logo-header,
  .login-header.shrink .login-logo,
  .careers-header.shrink .careers-logo {
    height: 28px !important;
  }
}