:root {
    --x-header-fade-transition: 200ms;
}

#brx-header.x-header_sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    animation-name: x_header_fadein;
    animation-duration: var(--x-header-fade-transition);
    animation-iteration-count: 1;
}

#brx-header.x-header_sticky-active[data-x-scroll="0"] {
  animation-duration: 0ms;
}

.admin-bar #brx-header.x-header_sticky-active {
    top: var(--wp-admin--admin-bar--height);
}

#brx-header.x-header_sticky-hidden {
    animation-name: x_header_fadeout;
    animation-duration: var(---x-header-fade-transition);
    animation-iteration-count: 1;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 682px) {
    .admin-bar #brx-header.x-header_sticky-active {
        top: 0;
    }
}

@keyframes x_header_fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes x_header_fadeout {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

.x-header {
    transition-duration: var(--x-header-fade-transition);
    transition-property: transform, opacity, visibility;
    transition-timing-function: linear;
}

.scrolling .brxe-xheaderrow {
  height: var(--x-sticky-header-height)!important;
}


#brx-header.x-header_not-pin:not([data-x-hide-effect=fade]) {
    transform: translateY(-100%);
}

#brx-header.x-header_not-pin[data-x-hide-effect=fade] {
    animation-name: x_header_fadeout;
    animation-duration: var(--x-header-fade-transition);
    animation-iteration-count: 1;
    opacity: 0;
    visibility: hidden;
}

#brx-header.x-header_sticky-active [data-x-sticky=hide]{
    display: none!important;
}

#brx-header:not(.x-header_sticky-active) [data-x-sticky=show] {
    display: none!important;
}

#brx-header.x-header_sticky-active [data-x-sticky=show]:not(.brxe-xnotificationbar) {
    display: flex;
}