/* basic stripe styling */
/*.custom-stripe, #custom-stripe {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}


#custom-stripe .stripe-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}


#custom-stripe .stripe-inner {
  display: inline-block;
  white-space: nowrap;
  position: relative;
  will-change: transform;
}


#custom-stripe .stripe-text {
  display: inline-block;
  padding-right: 40px;
}


#custom-stripe.scrollable .stripe-inner.do-scroll {
  animation-name: cs-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}


#custom-stripe.scrollable .stripe-viewport:hover .stripe-inner.do-scroll,
#custom-stripe.scrollable .stripe-viewport.touch-active .stripe-inner.do-scroll {
  animation-play-state: paused;
}


@keyframes cs-marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}


@media (max-width: 768px) {
  #custom-stripe { font-size: 14px; padding: 6px 10px; }
}
*/

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 16s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

#custom-stripe {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	height: 35px;
  line-height: 35px;
	position: relative;
	cursor: pointer;
	margin: 0 auto;
  text-align: center;

}
#custom-stripe .marquee {
  display: none;
}
@media (max-width:768px) {
  #custom-stripe .marquee {
    display: block;
  }
  #custom-stripe .custom-stripe-desktop {
    display: none;
  }
}