.elementor-29504 .elementor-element.elementor-element-ffb1e1c{--display:flex;}.elementor-29504 .elementor-element.elementor-element-3193bbf{width:auto;max-width:auto;top:0px;z-index:0;}.elementor-29504 .elementor-element.elementor-element-3193bbf.elementor-element{--align-self:center;}body:not(.rtl) .elementor-29504 .elementor-element.elementor-element-3193bbf{left:0px;}body.rtl .elementor-29504 .elementor-element.elementor-element-3193bbf{right:0px;}/* Start custom CSS for html, class: .elementor-element-3193bbf */.top-bar-outer {
  width: 100vw;
  position: relative;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 99999;
}

.top-bar-slider {
  background-color: #33bbff;
  height: 35px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

.message {
  position: absolute;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  padding: 0 20px;
  opacity: 0;
  transform: translateX(100%);
  animation-duration: 16s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  display: flex;
  align-items: center;
  height: 30px;
}

/* Assign animations */
.message1 { animation-name: slide1; }
.message2 { animation-name: slide2; }
.message3 { animation-name: slide3; }
.message4 { animation-name: slide4; }

/* Message 1 */
@keyframes slide1 {
  0%   { opacity: 0; transform: translateX(100%); }
  5%   { opacity: 1; transform: translateX(0); }
  20%  { opacity: 1; transform: translateX(0); }
  25%  { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Message 2 */
@keyframes slide2 {
  25%  { opacity: 0; transform: translateX(100%); }
  30%  { opacity: 1; transform: translateX(0); }
  45%  { opacity: 1; transform: translateX(0); }
  50%  { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Message 3 */
@keyframes slide3 {
  50%  { opacity: 0; transform: translateX(100%); }
  55%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; transform: translateX(0); }
  75%  { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 0; transform: translateX(-100%); }
}

/* Message 4 */
@keyframes slide4 {
  75%  { opacity: 0; transform: translateX(100%); }
  80%  { opacity: 1; transform: translateX(0); }
  95%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-100%); }
}/* End custom CSS */