/* Event-wide header variants. The navigation markup stays identical. */
#header.eb-event-header {
    transition: background-color .18s ease, box-shadow .18s ease;
}

#header.eb-event-header--compact #topNav .logo {
    margin-top: 6px;
    margin-bottom: 6px;
}

#header.eb-event-header--compact #topNav .logo img {
    max-height: 45px;
}

#header.eb-event-header--compact #topNav ul.nav-main > li > a {
    min-height: 56px;
    line-height: 56px;
}

#header.eb-event-header--immersive {
    position: absolute;
    z-index: 1001;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    background: linear-gradient(to bottom, rgba(6, 19, 34, .68), rgba(6, 19, 34, 0));
    box-shadow: none;
}

#header.eb-event-header--immersive #topNav .logo,
#header.eb-event-header--immersive #topNav ul.nav-main > li > a,
#header.eb-event-header--immersive #topNav .btn-mobile {
    color: #fff;
}

#header.eb-event-header--immersive #topNav .btn-mobile {
    border-color: rgba(255, 255, 255, .55);
}

#header.eb-event-header--immersive #topNav ul.nav-main > li:hover > a,
#header.eb-event-header--immersive #topNav ul.nav-main > li.active > a {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 991px) {
    #header.eb-event-header--immersive {
        position: relative;
        border-bottom: 0;
        background: #102a43;
    }

    #header.eb-event-header--immersive .nav-main-collapse {
        background: #102a43;
    }
}