.evento-interno_video.is-visibile {
  display: block;
}

.slider-evento {
  color: var(--colorePrincipale);
}

.slider-visibile {
  display: block !important;
}

.fase-1_evento,
.fase-2_evento,
.fase-3_evento {
  width: 100%;

  height: 100%;

  display: flex;
}

.lato-sx_videowall {
  width: 895px;

  position: relative;

  display: flex;

  overflow: hidden;

  padding-top: 255px;

  padding-bottom: 65px;

  padding-left: 320px;

  align-items: center;
}

.lato-sx_videowall.is-left_monitor {
  width: 770px;

  padding-top: 65px;

  padding-bottom: 125px;

  padding-left: 200px;
}

.lato-dx_videowall {
  width: 1793px;

  position: relative;

  display: flex;

  overflow: hidden;

  padding-top: 85px;

  padding-right: 260px;

  padding-bottom: 210px;

  padding-left: 420px;

  justify-content: center;

  align-items: center;
}

.lato-dx_videowall.is-left_monitor {
  width: 1534px;

  padding-top: 85px;

  padding-right: 150px;

  padding-bottom: 90px;

  padding-left: 0px;
}

.swiper-wrapper.slider-evento_wrapper h1 {
  color: var(--colorePrincipale);

  font-family: var(--fontFamily);

  font-size: calc(var(--fontSize) * 1.5);

  font-weight: var(--fontWeight);

  line-height: 1em;

  padding: 20px 20px;
}

[clipText="true"] h1 {
  background-image: var(--immagineClipText);

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}

.fase-1_titolo,
.fase-2_titolo {
  background-position: -100% 50%;

  background-size: 200% 200%;

  background-repeat: no-repeat;
}

.fase-1_logo {
  width: 500px;

  max-height: 200px;

  object-fit: contain;

  opacity: 0%;

  will-change: transform;

  will-change: opacity;
}

.fase-1_logo.is-left_monitor {
  max-height: 160px;
}

h1.fase-2_titolo.is-big {
  background-size: 300% 300%;

  font-size: calc(var(--fontSize) * 2.5);

  padding: 0 20px;
}

h1.fase-2_titolo.is-left_monitor.is-big {
  font-size: calc(var(--fontSize) * 2.2);
}

.fase-1_text,
.fase-2_text {
  font-family: Gustavo;

  font-size: 40px;

  line-height: 40px;

  font-weight: 300;

  text-transform: uppercase;

  opacity: 0%;

  will-change: transform;

  will-change: opacity;

  white-space: collapse balance;

  width: 400px;
}

.fase-1_text.is-left_monitor,
.fase-2_text.is-left_monitor {
  font-size: 36px;

  line-height: 36px;
}

.fase-3_titolo {
  /* width: 100%; */

  background-position: 50% 50%;

  background-size: 130%;

  background-repeat: no-repeat;

  white-space: nowrap;

  transform: translate3d(-100%, 0px, 0px);

  transform-style: preserve-3d;
}

.fase-3_titolo.is-left_monitor {
  position: absolute;

  left: 0%;

  top: 140px;

  will-change: transform;
}

.fase-3_titolo.dx-monitor-is-left {
  position: absolute;

  left: 0%;

  bottom: 70px;

  will-change: transform;
}

.fase-3_titolo.dx-monitor-is-right {
  position: absolute;

  left: 0%;

  top: 160px;

  will-change: transform;
}

.smoke-overlay_slider-img {
  position: absolute;

  top: 50%;

  left: 100%;

  transform: translate(0%, -50%);

  will-change: transform;
}

.smoke-overlay_slider-img.start-animation {
  animation-name: fumoBg;

  animation-duration: 6s;

  animation-fill-mode: forwards;

  animation-timing-function: linear;
}

.swiper-slide.slide-evento.swiper-slide-active .fase-1_text,
.swiper-slide.slide-evento.swiper-slide-active .fase-2_text,
.swiper-slide.slide-evento.swiper-slide-active .fase-1_logo {
  animation-name: enterAnimation;

  animation-duration: 1s;

  animation-delay: 4s;

  animation-fill-mode: forwards;

  animation-timing-function: ease-out;
}

.swiper-slide.slide-evento.swiper-slide-active
  .fase-3_titolo.dx-monitor-is-left {
  animation-name: scrittaAnimata;

  animation-duration: 4s;

  animation-delay: 6s;

  animation-fill-mode: forwards;

  animation-timing-function: linear;
}

.swiper-slide.slide-evento.swiper-slide-active
  .fase-3_titolo.dx-monitor-is-right {
  animation-name: scrittaAnimata;

  animation-duration: 10s;

  animation-delay: 10s;

  animation-fill-mode: forwards;

  animation-timing-function: linear;
}

.swiper-slide.slide-evento.swiper-slide-active .fase-3_titolo.is-left_monitor {
  animation-name: scrittaAnimata;

  animation-duration: 16s;

  animation-delay: 4s;

  animation-fill-mode: forwards;

  animation-timing-function: linear;
}

.swiper-slide.slide-evento.swiper-slide-active .fase-1_titolo,
.swiper-slide.slide-evento.swiper-slide-active .fase-2_titolo {
  animation-name: smokeBg;

  animation-duration: 4s;

  animation-delay: 4s;

  animation-fill-mode: forwards;

  animation-timing-function: linear;
}

.video-evento_bg {
  position: absolute;

  top: 0;

  left: 0;

  z-index: -2;

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.slider-evento_wrapper::after {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: #000;

  opacity: 0.3;

  z-index: -1;
}

@keyframes smokeBg {
  0% {
    background-position: -100%, 50%;
  }

  100% {
    background-position: 50%, 50%;
  }
}

@keyframes enterAnimation {
  0% {
    opacity: 0%;

    transform: translate(0px, 40%);
  }

  100% {
    opacity: 100%;

    transform: translate(0px, 0%);
  }
}

@keyframes scrittaAnimata {
  0% {
    transform: translateX(-100%);

    left: 0%;
  }

  100% {
    transform: translateX(0%);

    left: 100%;
  }
}

@keyframes fumoBg {
  0% {
    transform: translate(0%, -50%);

    left: 100%;
  }

  100% {
    transform: translate(-100%, -50%);

    left: 0%;
  }
}

.lato-right-playlist.sx-monitor .text-right-playlist {
  padding-bottom: 120px;
}
/* ----------------------------------------------------- ANIMAZIONE SLIDER PRODOTTI */
.swiper-slide .div-bg-left-playlist {
  transform: scale(1);
}

.swiper-slide.swiper-slide-active .div-bg-left-playlist {
  animation-name: bgLeftAnimation;

  animation-duration: 14s;

  animation-delay: 0s;

  animation-fill-mode: forwards;

  animation-timing-function: ease;

  will-change: transform;
}

@keyframes bgLeftAnimation {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

.swiper-slide .div-bg-right-playlist {
  transform: scale(1);
}

.swiper-slide.swiper-slide-active .div-bg-right-playlist {
  animation-name: bgRightAnimation;

  animation-duration: 14s;

  animation-delay: 0s;

  animation-fill-mode: forwards;

  animation-timing-function: ease;

  will-change: transform;
}

@keyframes bgRightAnimation {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

.swiper-slide .pillola-left-playlist,
.swiper-slide .pillola-right-playlist {
  opacity: 0%;
}

.swiper-slide.swiper-slide-active .pillola-left-playlist,
.swiper-slide.swiper-slide-active .pillola-right-playlist {
  animation-name: pillolaAnimation;

  animation-duration: 2s;

  animation-delay: 6s;

  animation-fill-mode: forwards;

  animation-timing-function: ease;

  will-change: opacity;
}

@keyframes pillolaAnimation {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

.swiper-slide .title-left-playlist,
.swiper-slide .title-right-playlist {
  opacity: 0%;
}

.swiper-slide.swiper-slide-active .title-left-playlist,
.swiper-slide.swiper-slide-active .title-right-playlist {
  animation-name: titleAnimation;

  animation-duration: 2s;

  animation-delay: 4s;

  animation-fill-mode: forwards;

  animation-timing-function: ease;

  will-change: opacity;
}

@keyframes titleAnimation {
  0% {
    opacity: 0%;
  }

  100% {
    opacity: 100%;
  }
}

.swiper-slide .text-left-playlist,
.swiper-slide .text-right-playlist {
  transform: translateX(100px);
}

.swiper-slide.swiper-slide-active .text-left-playlist,
.swiper-slide.swiper-slide-active .text-right-playlist {
  animation-name: textAnimation;

  animation-duration: 2s;

  animation-delay: 4s;

  animation-fill-mode: forwards;

  animation-timing-function: ease;

  will-change: transform;
}

@keyframes textAnimation {
  0% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(-20px);
  }
}

.video-slide video {
  opacity: 0;

  transition: opacity 300ms linear;

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.video-slide.swiper-slide-active video {
  opacity: 1;
}
/* ----------------------------------------------------- ANIMAZIONE SLIDER PRODOTTI */