.ticker-container { background-color: rgba(255, 255, 255, 1); -webkit-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; } .ticker-container .ticker-carroussel, .ticker-disclaimer { display: flex; align-items: center; flex-grow: 1; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; padding: 0.5em 0; } .ticker-disclaimer { color: #999; text-transform: lowercase; font-size: 0.75em; line-height: 2em; font-weight: 500; letter-spacing: 1px; background: #f5f5f5; padding-right: 10px; padding-left: 10px; position: absolute; right: 0; pointer-events: none; top: 0; border-left: 1px solid #e2e4e3; } body.nav-up .ticker-container { -webkit-transform: translateY(-105px); -moz-transform: translateY(-105px); -ms-transform: translateY(-105px); -o-transform: translateY(-105px); transform: translateY(-105px); } @media(min-width:576px) { .ticker-container { top: 0px; } } .ticker-container .ticker-carroussel::-webkit-scrollbar { display: none; } .ticker-container .ticker-content { font-size: 1rem; white-space: nowrap; animation: marquee 40s linear 8s infinite; display: inline-block; } .ticker-container:hover .ticker-content { animation-play-state: paused; } @keyframes marquee { 0% { transform: translate(0, 0) } 100% { transform: translate(-100%, 0) } } .ticker-container .ticker-content .ticker-content-aditional { float: right; position: absolute; display: inline-block; } .indicador { font-weight: 700; font-size: 11px; letter-spacing: 0.8px; flex-flow: column; position: relative; color: inherit; padding: 0 1em; border-right: 1px solid #E2E4E3; display: inline-block; flex-grow: 1; text-align: left; } .indicador .indicador-title { margin-right: 8px; font-weight: 900; } .indicador .indicador-value { margin-right: 8px; } .indicador .indicador-spread { padding: 3px 7px; border-radius: 3px; color: #ffffff; top: 97px; transition: top 0s 0.5s ease ; padding: 0.25em; box-shadow: 0 0 1px #01464d; } .indicador.negativo .indicador-spread { background-color: #B51C1C; } .indicador.positivo .indicador-spread { background-color: #01C592; }