@import "dependencies";

@include breakpoint(mobile-only) {
    .headroom-bg-section {
        .disable-mobile & {
            @include transform(none !important);
            position: relative !important;

            + section, + header { 
                padding-top: 0 !important;
            }
        }
    }
}

.headroom-bg-section {
    position: fixed !important;
    width: 100%;
    z-index: 1001;
    right: 0;
    left: 0;
    top: 0;    
    @include transition(all 0.3s);
    @include backface-visibility(hidden);

    &.headroom--pinned {
        @include transform(translateY(0%));
    }

    &.headroom--unpinned {
        @include transform(translateY(-100%));
    }
}