.s4-infinite-banner-text {
position: relative;
overflow: hidden;
width: 100%;
}
.s4-infinite-banner-text .s4-infinite-banner-text__track {
display: flex;
width: max-content;
animation: s4-infinite-banner-scroll 20s linear infinite;
will-change: transform;
gap: 30px;
}
.s4-infinite-banner-text .s4-infinite-banner-text__group {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 30px;
white-space: nowrap;
color: #fff;
}
.s4-infinite-banner-text .s4-infinite-banner-text__item,
.s4-infinite-banner-text .s4-infinite-banner-text__separator {
font-family: "melindaevania", sans-serif;
font-size: 3.5rem;
text-transform: uppercase;
line-height: 1;
}
.s4-infinite-banner-text:hover .s4-infinite-banner-text__track {
animation-play-state: paused;
}
@keyframes s4-infinite-banner-scroll {
from {
transform: translate3d(-50%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.s4-infinite-banner-text .s4-infinite-banner-text__track {
animation: none;
transform: none;
}
}
@media screen and (max-width: 991px) { 
.s4-infinite-banner-text .s4-infinite-banner-text__item,
.s4-infinite-banner-text .s4-infinite-banner-text__separator {
font-size: 2.5rem;
}
}
@media screen and (max-width: 575px) { 
.s4-infinite-banner-text .s4-infinite-banner-text__group {
gap: 20px;
}
.s4-infinite-banner-text .s4-infinite-banner-text__item,
.s4-infinite-banner-text .s4-infinite-banner-text__separator {
font-size: 1.8rem;
}
}.s4-text-hover-media .s4-text-hover-media__content-wrapper {
display: flex;
flex-direction: column;
gap: clamp(40px, 4vw, 80px);
width: 100%;
}
.s4-text-hover-media .s4-text-hover-media__infos {
display: flex;
gap: clamp(40px, 4vw, 80px);
position: relative;
width: fit-content;
}
.s4-text-hover-media .s4-text-hover-media__items {
display: flex;
flex-direction: column;
gap: clamp(30px, 3vw, 60px);
width: clamp(550px, 40vw, 750px);
padding-top: clamp(20px, 2vw, 40px);
}
.s4-text-hover-media .s4-text-hover-media__item {
display: flex;
flex-direction: column;
gap: 10px;
transition: opacity 0.3s ease;
opacity: 0.5;
position: relative;
padding-left: clamp(30px, 3vw, 60px);
cursor: default;
}
.s4-text-hover-media .s4-text-hover-media__item-circle {
position: absolute;
top: 2.5px;
left: 0;
border-radius: 50%;
width: clamp(16px, 1.25vw, 24px);
height: clamp(16px, 1.25vw, 24px);
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}
.s4-text-hover-media .s4-text-hover-media__item-circle::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid #9B0112;
border-radius: 50%;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.5s ease;
}
.s4-text-hover-media .s4-text-hover-media__inner-circle {
width: clamp(8px, 0.5vw, 10px);
height: clamp(8px, 0.5vw, 10px);
background: currentColor;
border-radius: 50%;
transition: background-color 0.3s ease;
}
.s4-text-hover-media .s4-text-hover-media__inner-circle-bar {
position: absolute;
top: 50%;
right: 100%;
width: 100vw;
height: 1px;
background: transparent;
transition: max-width 2s ease, background-color 0.3s ease;
transform-origin: left center;
transform: translateY(-50%);
max-width: 0;
}
.s4-text-hover-media .s4-text-hover-media__item h3 {
font-size: 1.85rem;
}
.s4-text-hover-media .s4-text-hover-media__item p {
font-size: max(1.1rem, 14px);
}
.s4-text-hover-media .s4-text-hover-media__item.active {
opacity: 1;
}
.s4-text-hover-media .s4-text-hover-media__item.active .s4-text-hover-media__item-circle::after {
clip-path: inset(0 0 0 0);
}
.s4-text-hover-media .s4-text-hover-media__item.active .s4-text-hover-media__inner-circle-bar {
background: #9B0112;
max-width: 50vw;
}
.s4-text-hover-media .s4-text-hover-media__item.active .s4-text-hover-media__inner-circle {
background: #9B0112;
}
.s4-text-hover-media .s4-text-hover-media__item-image {
display: flex;
align-items: flex-start;
position: sticky;
top: 140px;
left: calc(100% + clamp(40px, 4vw, 80px));
height: clamp(350px, 25vw, 500px);
width: clamp(350px, 25vw, 500px);
overflow: hidden;
}
.s4-text-hover-media .s4-text-hover-media__item-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
pointer-events: none;
}
.s4-text-hover-media .s4-text-hover-media__item-image.is-crossfade-ready img {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.58s ease;
}
.s4-text-hover-media .s4-text-hover-media__item-image.is-crossfade-ready img.is-visible {
opacity: 1;
}
@media screen and (max-width: 991px) {
.s4-text-hover-media .s4-text-hover-media__items {
padding-top: 0;
width: 100%;
}
.s4-text-hover-media .s4-text-hover-media__item h3 {
font-size: 1.7rem;
}
.s4-text-hover-media .s4-text-hover-media__item-image {
display: none;
}
}.s4-block-scroll-text-color {
width: 100%;
}
.s4-block-scroll-text-color .content {
width: 100%;
}
.fade-text-scroll {
margin: 0;
}
.fade-text-scroll .word {
display: inline-block; padding: .3em .6em .35em .4em;
margin: -.3em -.6em -.35em -.4em;
}