/* =========================================================
   SMART HEADER
   DOWN  = HIDE
   UP    = SHOW IMMEDIATELY
========================================================= */

/* =========================================================
   SMART HEADER - SMOOTH HIDE / SHOW
========================================================= */

#header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;

    transform: translateY(0);

    /* Smooth movement */
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* =========================================================
   HEADER HIDDEN - SCROLL DOWN
========================================================= */

#header.header-hidden {
    transform: translateY(-100%);
}


/* =========================================================
   HEADER VISIBLE - SCROLL UP
========================================================= */

#header.header-visible {
    transform: translateY(0);
}


/* =========================================================
   HERO SPACE FOR FIXED HEADER
========================================================= */

#hero,
#brandHero {
    margin-top: 80px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #hero {
        margin-top: 80px;
    }

}