/* ======================================================
   SEAN B SHOP
   TOP SERVICE BAR + SCROLLING ADVERT TICKER
   assets/css/components/topbar.css
====================================================== */


/* ======================================================
   TOP BAR WRAPPER
====================================================== */


.desktop-topbar{

    height:34px;

    background:#07192d;

    color:#fff;

    overflow:hidden;

}



.topbar-inner{

    height:34px;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:25px;

}



/* ======================================================
   CONTACT AREA
====================================================== */


.topbar-contact{

    display:flex;

    align-items:center;

    gap:18px;

    white-space:nowrap;

}



.topbar-contact a{

    color:#fff;

    font-size:12px;

    opacity:.9;

    transition:.2s ease;

}



.topbar-contact a:hover{

    color:#ffb400;

}



.topbar-contact i{

    color:#ffb400;

    margin-right:5px;

}




/* ======================================================
   SCROLLING ADVERT TICKER
====================================================== */


.topbar-ticker{

    overflow:hidden;

    position:relative;

    white-space:nowrap;

}



.ticker-track{

    display:flex;

    align-items:center;

    width:max-content;

    gap:70px;

    animation:topTicker 35s linear infinite;

}



.ticker-track span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}



/* Pause when user hovers */

.topbar-ticker:hover .ticker-track{

    animation-play-state:paused;

}




@keyframes topTicker{


from{

    transform:translateX(0);

}


to{

    transform:translateX(-50%);

}


}





/* ======================================================
   SETTINGS
====================================================== */


.topbar-settings{

    display:flex;

    align-items:center;

    gap:10px;

}



.topbar-settings select{

    height:24px;

    padding:0 8px;

    border-radius:5px;

    border:1px solid rgba(255,255,255,.2);

    background:transparent;

    color:white;

    font-size:12px;

}



.topbar-settings option{

    color:#222;

}





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


@media(max-width:992px){

    .desktop-topbar{

        display:none;

    }

}