section[data-cattype="239"] { overflow: hidden; padding: 39px 0 39px 0; position: relative; } [data-cattype="239"] .wrapper_marquee { overflow: hidden; white-space: nowrap; width: 100%; } [data-cattype="239"] .wrapper_marquee span.heading{ display: inline-block; font-size: 6vw; font-weight: 900; color: #000; padding: 0 0.1em; margin: 0; line-height: 1.11; -webkit-text-stroke: 1px black; -webkit-text-fill-color: transparent; animation: marquee 30s linear infinite; } [data-cattype="239"] .wrapper_marquee.reverse span.heading{ -webkit-text-stroke: 1px#f87733; -webkit-text-fill-color: transparent; animation: marquee-revise 45s linear infinite; } [data-cattype="239"] .wrapper_marquee:hover span.heading{ animation-play-state: paused; } [data-cattype="239"] .wrapper_marquee span.heading span:hover{ -webkit-text-fill-color: #000; } [data-cattype="239"] .wrapper_marquee.reverse span.heading span:hover{ -webkit-text-fill-color: #f87733; } @keyframes marquee { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @keyframes marquee-revise { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @media (max-width: 1400px) {} @media (min-width: 768px) and (max-width: 980px) { [data-cattype="239"] .wrapper_marquee span.heading{ font-size: 13vw; } } @media (max-width: 767px) { [data-cattype="239"] .wrapper_marquee span.heading{ font-size: 13vw; } } @media (max-width: 480px) {}