:root {
  /* FONT FAMILIES */
  --roobert: "Roobert";
  --grotesk: "roc-grotesk-compressed", sans-serif;

  /* COLORS */
  --grigio-scuro: #1d1d1b;
  --grigio-chiaro: #ebebeb;

  --error: #ff4e68;

  /* TRANSITIONS */
  --linear: all 0.1s linear;
  --page-transition: all 0.4s ease 0.65s;
}

/* GENERALS */
html {
  background: var(--grigio-chiaro);
  transition: var(--linear);
}
body {
  font-family: var(--roobert);
  background: transparent;
  color: var(--grigio-scuro);
  transition: background-color 0.3s linear;
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--grigio-scuro);
  background: var(--grigio-chiaro);
}
::selection {
  color: var(--grigio-scuro);
  background: var(--grigio-chiaro);
}

.back-grigio-chiaro::-moz-selection,
.back-grigio-chiaro *::-moz-selection {
  /* Code for Firefox */
  color: var(--grigio-chiaro);
  background: var(--grigio-scuro);
}
.back-grigio-chiaro::selection,
.back-grigio-chiaro *::selection {
  color: var(--grigio-chiaro);
  background: var(--grigio-scuro);
}

.wrapper {
  max-width: none;
}

.g-custom-small {
  --bs-gutter-y: calc(var(--distance-big) / 2);
  --bs-gutter-x: calc(var(--distance-big) / 2);
}
.gx-custom {
  --bs-gutter-x: var(--distance-medium);
}
.gy-custom {
  --bs-gutter-y: var(--distance-big);
}
.gy-custom-small {
  --bs-gutter-y: calc(var(--distance-big) / 2);
}

/* BACKGROUNDS */
.back-grigio-chiaro {
  background: var(--grigio-chiaro);
}
.back-grigio-scuro {
  background: var(--grigio-scuro);
}

/* COLORS */
.color-grigio-chiaro {
  color: var(--grigio-chiaro);
  --bs-link-hover-color-rgb: var(--grigio-chiaro);
  --bs-link-color-rgb: var(--grigio-chiaro);
}
.color-grigio-scuro {
  color: var(--grigio-scuro);
  --bs-link-hover-color-rgb: var(--grigio-scuro);
  --bs-link-color-rgb: var(--grigio-scuro);
}

/* FONT SIZES */
.roobert1,
.cont-testo h3:not([class*="roobert"]) {
  font-size: 3.6rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
}
.roobert2 {
  font-size: 2.7rem;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: normal;
}
.roobert3 {
  font-size: 2.1rem;
  line-height: 1.52;
  font-weight: 400;
  letter-spacing: normal;
}
.roobert4 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: normal;
}
.roobert5 {
  font-size: 1.2rem;
  line-height: 1.16;
  font-weight: 400;
  letter-spacing: normal;
}

.grotesk1 {
  font-family: var(--grotesk);
  font-size: 13rem;
  line-height: 0.9;
  letter-spacing: normal;
  font-weight: 600;
}
.grotesk2 {
  font-family: var(--grotesk);
  font-size: 9rem;
  line-height: 1;
  letter-spacing: normal;
  font-weight: 600;
}
.grotesk3 {
  font-family: var(--grotesk);
  font-size: 6rem;
  line-height: 1;
  letter-spacing: normal;
  font-weight: 600;
}

/* CONT TESTO */
.cont-testo {
  margin: 0;
  color: var(--text-color);
}
.cont-testo * {
  color: var(--text-color);
}
.cont-testo > * + * {
  margin-top: calc(var(--distance-medium) / 2);
}
.cont-testo > .roobert1 + *,
.cont-testo > * + .ul {
  margin-top: calc(var(--distance-big) / 2);
}
.cont-testo > .ul + .img-singola {
  margin-top: calc(var(--distance-big) * 2);
}
.cont-testo > .ul + .images {
  margin-top: calc(var(--distance-big) * 2);
}
.cont-testo > .images + .images {
  margin-top: var(--distance-medium);
}
.cont-testo > p {
  width: 75%;
}
.cont-testo > h5,
.cont-testo > h6 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
  opacity: 0.5;
}
.cont-testo > h5 + *,
.cont-testo > h6 + * {
  position: relative;
  padding-top: var(--distance-medium);
  margin-top: calc(var(--distance-medium) / 2);
}
.cont-testo > h5 + *::before,
.cont-testo > h6 + *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.cont-testo > * + h5,
.cont-testo > * + h6 {
  margin-top: calc(var(--distance-medium) * 1.5);
}

/* .cont-testo.cont-single > *:not(.row) {
  width: 41.66667%;
  margin-left: 41.66667%;
}
.cont-testo.cont-single > p:not(.row) {
  width: calc(calc(41.66667% * 75) / 100);
  margin-left: 41.66667%;
} */

/* PARALLAX IMAGES */
.simpleParallax {
  width: 100%;
  height: 100%;
}

/* REEL HOMEPAGE */
.home {
  overflow: hidden;
}
.home.reel-closed {
  overflow: auto;
}
.reel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100svh;
  z-index: 101 !important;
  transition:
    transform 0.5s 0.2s linear,
    opacity 0.3s 0.9s linear;
}
.reel-closed .reel {
  transform: translateY(-100%);
  opacity: 0;
}
.reel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--nero);
  opacity: 0.5;
  z-index: 1;
  transition: var(--transition);
}
.reel-closed .reel::before {
  opacity: 1;
}
/* .reel > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100svh;
  width: 100vw;
} */
.reel video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* MARQUEE */
.swiper-marquee {
  height: auto;
  overflow: hidden;
}
.swiper-marquee .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
  position: relative;
  height: auto;
}
.swiper-marquee .swiper-slide {
  padding: 25px 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-marquee .swiper-slide {
  width: auto !important;
}
.swiper-marquee .swiper-slide p {
  font-family: var(--grotesk);
  font-size: 28.5rem;
  line-height: 1.1;
  letter-spacing: normal;
  font-weight: 600;
}

/* VIDEO MODAL */
.custom-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background: var(--grigio-scuro);
  transition: all 0.4s ease;
  user-select: none;
}
.custom-modal.opened {
  opacity: 1;
  pointer-events: all;
}
.custom-modal .cont-iframe {
  position: relative;
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  margin: 90px 0px 0;
}
.custom-modal .cont-iframe iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.custom-modal.opened .cont-iframe iframe {
  pointer-events: all !important;
}

.close-button,
.skip-button {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  /* border: 1px solid var(--grigio-chiaro);
  border-radius: 50%; */
  cursor: pointer;
  z-index: 4;
}
.close-button::before,
.skip-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: var(--grigio-chiaro);
  -webkit-mask: url(../media/icons/close.svg) no-repeat 50% 50%;
  mask: url(../media/icons/close.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.skip-button::before {
  -webkit-mask: url(../media/icons/skip.svg) no-repeat 50% 50%;
  mask: url(../media/icons/skip.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  /* border: 1px solid var(--grigio-chiaro);
  border-radius: 50%; */
  cursor: pointer;
  z-index: 4;
}
.play-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: var(--grigio-chiaro);
  -webkit-mask: url(../media/icons/play.svg) no-repeat 50% 50%;
  mask: url(../media/icons/play.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.arrow-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  /* border: 1px solid var(--grigio-chiaro);
  border-radius: 50%; */
  pointer-events: none;
  transition: all 0.3s ease-in;
  z-index: 4;
}
.arrow-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: var(--grigio-chiaro);
  -webkit-mask: url(../media/icons/arrow.svg) no-repeat 50% 50%;
  mask: url(../media/icons/arrow.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* AGGIORNAMENTI 15/02/2024 */
.section-images {
  padding: 0 0 calc(var(--wrapper-padding) / 2);
  overflow: hidden;
}
.marquee-section-xs + .section-images[style],
.section-images + .section-images[style],
.section-images[style] + .section-images {
  padding-top: calc(var(--wrapper-padding) / 2);
}
.section-images .cont-img {
  position: relative;
  height: 100%;
}

.swiper-single .swiper-slide {
  width: auto !important;
}
.swiper-single .swiper-slide img {
  max-width: 80vw;
}
.swiper-button-prev,
.swiper-button-next {
  mix-blend-mode: difference;
  background: var(--grigio-chiaro);
  width: 80px;
  height: 80px;
  -webkit-mask: url(../media/icons/arrow-gallery.svg) no-repeat 50% 50%;
  mask: url(../media/icons/arrow-gallery.svg) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.swiper-button-prev {
  transform: scaleX(-1);
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none;
}

.elenco-progetti .swiper-slide .img-progetto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--grigio-scuro);
  transition: var(--transition);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.elenco-progetti .swiper-slide.swiper-slide-active .img-progetto::before {
  opacity: 0.5;
}
.swiper-vertical-images-mobile .swiper-slide .arrow-button {
  opacity: 0;
  z-index: 2;
}
.swiper-vertical-images-mobile .swiper-slide.swiper-slide-active .arrow-button {
  opacity: 1;
}

/* .reel > div.skip-button {
  left: auto;
  right: 20px;
  top: auto;
  bottom: 20px;
  transform: none;
  height: 32px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  pointer-events: all;
  border-radius: 16px;
  border: 1px solid var(--grigio-chiaro);
  padding: 0 var(--distance);
  user-select: none;
  z-index: 2;
} */

/* PROVV */
body.page-template-page-progetti,
body.page-template-page-progetti-new {
  overflow: hidden;
  scroll-behavior: auto !important;
}

.video-container {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.video-container > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%);
}

/* wpml */
.otgs-development-site-front-end {
  display: none !important;
}