/* =========================================================
   VANCE CEYLON — ANNOUNCEMENT BAR
   TRUE SEAMLESS CONTINUOUS LOOP
   ========================================================= */

#vanceAnnouncementBar{
    position:relative;
    width:100%;
    height:32px;
    overflow:hidden;
    background:#050505;
    color:#fff;
    z-index:1100;
    border-bottom:1px solid rgba(255,255,255,.10);
}

#vanceAnnouncementBar[hidden]{
    display:none !important;
}

#vanceAnnouncementBar .vance-ann-window{
    width:100%;
    height:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
}

#vanceAnnouncementBar .vance-ann-track{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    width:max-content;
    min-width:max-content;
    transform:translate3d(0,0,0);
    will-change:transform;
}

#vanceAnnouncementBar .vance-ann-set{
    display:flex;
    flex:none;
    flex-wrap:nowrap;
    align-items:center;
    width:max-content;
    min-width:max-content;
}

#vanceAnnouncementBar .vance-ann-item{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 42px;
    white-space:nowrap;
    color:inherit;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:.11em;
    text-transform:uppercase;
}

#vanceAnnouncementBar .vance-ann-item::after{
    content:"•";
    display:inline-block;
    margin-left:42px;
    opacity:.45;
}

#vanceAnnouncementBar .vance-ann-item:hover{
    opacity:.78;
}

/* Keep the announcement and header in the normal page start.
   They scroll away with the page; they do not become sticky. */
#vanceAnnouncementBar{
    position:relative !important;
    top:auto !important;
}

/* Existing header offset used by the current VANCE customer site. */
.header{
    top:32px !important;
}

.header.scrolled{
    top:32px !important;
}

@media(max-width:900px){
    #vanceAnnouncementBar{
        height:28px;
    }

    #vanceAnnouncementBar .vance-ann-item{
        min-height:28px;
        padding:0 28px;
        font-size:9px;
        letter-spacing:.09em;
    }

    #vanceAnnouncementBar .vance-ann-item::after{
        margin-left:28px;
    }

    .header,
    .header.scrolled{
        top:28px !important;
    }
}

@media(prefers-reduced-motion:reduce){
    #vanceAnnouncementBar .vance-ann-track{
        will-change:auto;
    }
}