@font-face {font-family: Bebas Neue Rounded;src: url('/MATERIALI_LANDING/bebas-neue-rounded-regular.otf'); font-display: swap !important;}
    @font-face {font-family: MyriadVariableConcept-Roman;src: url('/MATERIALI_LANDING/MyriadVariableConcept-Roman.otf'); font-display: swap !important;}

    :root {
      --bluscuro: #233776;
      --azzurrino: #01a4a0;
      --giallo: #fabb12;
	  --radiusValue: 150px;
    }

    .text-bluscuro {color: var(--bluscuro);}
    .text-azzurrino {color: var(--azzurrino);}
    .text-giallo {color: var(--giallo);}
    .bg-bluscuro {background-color: var(--bluscuro);}
    .bg-azzurrino {background-color: var(--azzurrino);}
    .bg-giallo {background-color: var(--giallo);}

    html > * {
      font-family: "Bebas Neue Rounded", sans-serif;
      font-weight: 400;
      font-style: normal;
    }

    .icon-social a {
      font-family: system-ui;
    }

    body {
      margin: 0;
      background-color: var(--bluscuro);
    }

    .first-section-container {
      position: relative;
      overflow-x: hidden !important;
    }

    .first-section-container .img-ciclista {
      position: absolute;
      right: -25%;
      bottom: 0;
      height: 45vw;
      width: auto;
    }

    .first-section-container .img-bollino {
      position: absolute;
      left: 58%;
      top: 20%;
      height: 20vh;
      width: auto;
    }

    .slide-container {
      width: 100%;
      padding-left: 15%;
      padding-right: 15%;
      padding-top: 2%;
      padding-bottom: 2%;
      overflow-x: hidden !important;
    }

    .slide-container.first-title {
      padding-top: 3%;
      padding-bottom: 3%;
    }

    .first-title {
      background-color: var(--azzurrino);
    }

    .head-structure {
      display: flex;
      justify-content: flex-start;
    }

    .head-structure .ul-socials {
      align-content: center;
    }

    .head-structure .ul-socials ul {
      list-style-type: none;
    }

    .head-structure .ul-socials ul li {
      color: #fff;
      display: inline-block;
      margin: 5px;
      background-color: var(--bluscuro);
      text-align: center;
      padding: 5px;
      border-radius: 25px;
      aspect-ratio: 1/1;
      font-size: 25px;
      width: 50px;
      align-content: center;
    }

    .first-title .logo-upslowtour img {
      height: 150px;
      width: auto;
    }

    .slide-container.second-title {
      position: relative;
      background-color: var(--bluscuro);
      padding-bottom: 1%;
    }

    .second-title::after {
      content: "";
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      right: 0;
      height: 8vh;
      background-color: var(--azzurrino);
      z-index: 0;
    }

    .second-title .title-structure h1 {
      font-size: 14vh;
      line-height: 14vh;
      margin-bottom: 0;
      z-index: 1;
      position: relative;
    }

    .second-title .title-structure h3 {
      font-size: 6vh;
      line-height: 6vh;
      margin-bottom: 5px;
      z-index: 1;
      position: relative;
    }

    .third-description {
      background-color: var(--giallo);
    }

    .third-description h2 {
      font-size: 8vh;
      line-height: 8vh;
      margin-bottom: 40px;
    }

    .third-description p {
      font-size: 3vh;
      line-height: 3.5vh;
    }

    .event-recap {
      text-align: center;
      padding-bottom: 30vh;
      position: relative;
    }

    .event-recap::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 210px;
      background: white;
      mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0,0 L150,80 L300,0 L450,100 L600,20 L750,100 L900,40 L1050,100 L1200,30 L1350,100 L1440,50 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat center / cover;
      -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M0,0 L150,80 L300,0 L450,100 L600,20 L750,100 L900,40 L1050,100 L1200,30 L1350,100 L1440,50 L1440,120 L0,120 Z'/%3E%3C/svg%3E") no-repeat center / cover;
    }

    .event-recap p {
      font-size: 3vh;
      line-height: 3.5vh;
      margin-top: 16px;
    }

    .events-dates {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(4, 1fr); /* 4 per riga di default */
    }

    .events-dates.second {
      grid-template-columns: repeat(3, 1fr) !important; /* 4 per riga di default */
      margin-top: 30px;
    }

    .events-dates .event-date {
      width: 100%;
      background-color: #fff;
      border-radius: 25px;
      padding-top: 25px;
      padding-bottom: 40px;
      padding-left: 27px;
      padding-right: 27px;
      position: relative;
    }

    .events-dates .event-date .red-banner {
      color: #fff;
	  background-color: #dc3545;
	  position: absolute;
	  top: 50%;
	  left: 0;
	  right: 0;
	  transform: translateY(-50%);
	  padding: 15px;
	  font-size: 30px;
	  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    }

    .events-dates .event-date .event-title {
      font-size: 8vh;
      line-height: 8vh;
      color: var(--bluscuro);
      margin-bottom: 0;
    }

    .events-dates .event-date .event-title-separator {
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      margin-bottom: 15px;
      height: 5px;
      width: 50px;
      background-color: var(--bluscuro);
      border-radius: 25px;
    }

    .events-dates .event-date .event-description {
      font-size: 3.5vh;
      line-height: 3.5vh;
      color: var(--bluscuro);
    }

    .events-dates .event-date .event-link {
      text-decoration: none;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--giallo);
      font-size: 2.5vh;
      line-height: 2.5vh;
    }

    .events-dates .event-date .event-gpx {
      color: var(--azzurrino);
      font-size: 2.5vh;
      line-height: 2.5vh;
    }

    .event-date.event-clickable {
      width: 100%;
      background-color: var(--giallo);
      border-radius: 25px;
      margin-top: 30px;
      display: flex;
      justify-content: center;
      gap: 20px;
      align-items: center;
      padding: 25px;
    }

    .event-date.event-clickable .event-title {
      font-size: 6vh;
      line-height: 6vh;
      color: var(--bluscuro);
      margin-bottom: 0;
    }

    .event-date.event-clickable .event-link {
      text-decoration: none;
      font-size: 3vh;
      line-height: 3vh;
      color: #fff;
    }

    .tappa-evento {
      position: relative;
      padding-top: 8vh;
      padding-bottom: 8vh;
      background-color: #fff;
    }

    .tappa-evento .red-banner {
	  color: #fff;
	  /* Colore rosso semitrasparente (85% di opacità) */
	  background-color: #dc3545EE; 
	  
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding: 15px;
	  font-size: 80px;
	  text-align: center;
	  align-content: center;
	  z-index: 2;

	  /* Ombra morbida e diffusa */
	  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	}

    .tappa-evento .titolo-tappa h1 {
      z-index: 1;
      font-size: 10vh;
      line-height: 10vh;
      margin-bottom: -10px;
    }

    .tappa-evento .titolo-tappa h3 {
      z-index: 1;
      font-size: 6vh;
      line-height: 6vh;
    }

    .tappa-evento .titolo-tappa .text-azzurrino {
      z-index: 1;
      font-size: 3vh;
      line-height: 3vh;
    }

    .tappa-evento ul.avvertenze-tappa {
      margin-top: 30px;
      list-style-type: none;
      margin-left: 0;
      align-content: center;
    }

    .tappa-evento ul.avvertenze-tappa li .avvertenza {
      display: flex;
      justify-content: flex-start;
      gap: 20px;
      margin-bottom: 20px;
      align-items: center;
    }
	
	.tappa-evento ul.avvertenze-tappa li .avvertenza.avvertenza-deprecata {
		text-decoration: line-through;
		color: var(--bluscuro);
	}
	
	.correzione-postuma, .correzione-postuma h4 {
		color: #dc3545 !important;
	}

    .tappa-evento ul.avvertenze-tappa .avvertenza img {
      width: 60px;
      height: auto;
    }

    .tappa-evento ul.avvertenze-tappa .avvertenza h4 {
      z-index: 1;
      position: relative;
      font-size: 3vh;
      line-height: 3vh;
      margin-bottom: 0;
      color: var(--bluscuro);
    }

    .tappa-evento ul.caratteristiche-tappa {
      text-align: center;
      margin-top: 30px;
      list-style-type: none;
      margin-left: 0;
      align-content: center;
    }

    .tappa-evento ul.caratteristiche-tappa li {
      display: inline-block;
      z-index: 1;
      position: relative;
    }

    .tappa-evento ul.caratteristiche-tappa li:not(:last-child) {
      margin-right: 3vw;
    }

    .tappa-evento ul.caratteristiche-tappa li .caratteristica {
      text-align: center;
      align-items: center;
    }

    .tappa-evento ul.caratteristiche-tappa li .caratteristica h3{
      font-size: 10vh;
      line-height: 10vh;
      margin-bottom: -5px;
      color: var(--bluscuro);
    }

    .tappa-evento ul.caratteristiche-tappa li .caratteristica h5 {
      font-size: 3vh;
      line-height: 3vh;
      color: var(--azzurrino);
    }

    .tappa-evento p.testo-finale {
      color: var(--bluscuro);
      z-index: 1;
      position: relative;
    }

    .tappa-evento img.img-ciclista {
      position: absolute;
      right: -5%;
      bottom: 20%;
      height: 35vw;
      width: auto;
      z-index: 0;
    }

    .tappa-evento.tappa-evento-speciale {
      background-color: var(--giallo);
      border-radius: var(--radiusValue);
      border-bottom-left-radius: unset !important;
    }

    .tappa-evento.tappa-evento-speciale .centro-tappa ul.avvertenze-tappa {
      align-content: start;
    }

    .tappa-evento.tappa-evento-speciale .centro-tappa {
      display: flex;
      justify-content: center;
      gap: 100px;
    }

    .tappa-evento.tappa-evento-speciale .centro-tappa .modulo-iscrizione {
      text-align: start;
    }

    .tappa-evento.tappa-evento-speciale .centro-tappa .modulo-iscrizione h5 {
      font-size: 3vh;
      line-height: 3vh;
      color: var(--bluscuro);
    }

    .tappa-evento.tappa-evento-speciale .centro-tappa .modulo-iscrizione input[type='text'] {
      min-width: 300px;
      width: 100%;
      font-family: "MyriadVariableConcept-Roman";
      font-size: 2vh;
      line-height: 1vh;
      padding: 15px 20px;
      border: 1px solid #ddd;
      background-color: #fff;
      border-radius: 20px;
      margin-bottom: 20px;
      z-index: 1;
      position: relative;
    }

    .invia-iscrizione {
      border: none;
      border-radius: 10px;
      padding: 10px 60px;
      font-size: 2.5vh;
      line-height: 2.5vh;
      cursor: pointer;
      z-index: 1;
      position: relative;
      margin-bottom: 30px;
    }

    .invia-iscrizione:disabled {
      opacity: .8;
    }

    .tappa-evento.tappa2 {
      background-color: var(--bluscuro);
      border-radius: var(--radiusValue);
    }

    .tappa-evento.tappa2 ul.avvertenze-tappa .avvertenza h4,
    .tappa-evento.tappa2 ul.caratteristiche-tappa li .caratteristica h3,
    .tappa-evento.tappa2 p.testo-finale {
      color: #fff;
    }

    .tappa-evento.tappa4 {
      background-color: var(--bluscuro);
      border-radius: var(--radiusValue);
    }

    .tappa-evento.tappa4 ul.avvertenze-tappa .avvertenza h4,
    .tappa-evento.tappa4 ul.caratteristiche-tappa li .caratteristica h3,
    .tappa-evento.tappa4 p.testo-finale {
      color: #fff;
    }

    .tappa-evento.tappa6 {
      background-color: var(--bluscuro);
      border-radius: var(--radiusValue);
    }

    .tappa-evento.tappa6 ul.avvertenze-tappa .avvertenza h4,
    .tappa-evento.tappa6 ul.caratteristiche-tappa li .caratteristica h3,
    .tappa-evento.tappa6 p.testo-finale {
      color: #fff;
    }

    .footer-upslowtour {
      background-color: #fff;
    }

    .footer-content-start {
      padding-top: 8vh;
      padding-bottom: 8vh;
      position: relative;
      text-align: center;
    }

    .footer-content-start .logo-upslowtour {
      position: relative;
      z-index: 1;
      height: 150px;
      width: auto;
      margin-bottom: 40px;
    }

    .footer-content-start .upslowtour-info {
      margin-bottom: 40px;
    }

    .footer-content-start .upslowtour-utilities {
      margin-bottom: 40px;
    }

    .footer-content-start .upslowtour-info h5 {
      font-size: 3vh;
      line-height: 3vh;
      z-index: 2;
      position: relative;
    }

    .footer-content-start .upslowtour-utilities h5 {
      font-size: 2vh;
      line-height: 2vh;
      z-index: 2;
      position: relative;
    }

    .footer-content-start .upslowtour-utilities h5 a {
      color: #fff;
      text-decoration: none;
    }

    .footer-content-start .footer-shape {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 10%;
      background-color: var(--bluscuro);
      border-bottom-right-radius: var(--radiusValue);
      z-index: 0;
    }

    .footer-content-end {
      text-align: center;
      padding-top: 4vh;
      padding-bottom: 4vh;
    }

    .footer-content-end h5 {
      font-weight: 3vh;
      line-height: 3vh;
      color: var(--azzurrino);
    }

    .footer-content-end .upslowtour-partners {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(5, 1fr);
      justify-items: center;
    }

    .footer-content-end .upslowtour-partners img {
      height: 100px;
      width: auto;
    }

    /*#region Breakpoints*/

    /* XX-Large devices (large desktops, less than 1550px) */
    @media (max-width: 1549.98px) {
      .first-section-container .img-ciclista {
        height: 40vw;
      }

      .first-section-container .img-bollino {    
        height: 15vh;
        left: 67%;
        top: 22%;
      }
    }

    /* X-Large devices (large desktops, less than 1400px) */
    @media (max-width: 1399.98px) {
      .first-section-container .img-ciclista {
        height: 35vw;
      }

      .first-section-container .img-bollino {
        left: 70%;
      }

      .events-dates {
        grid-template-columns: repeat(2, 1fr);
      }

      .events-dates.second {
        grid-template-columns: repeat(1, 1fr) !important;
      }

      .event-date.event-clickable {
        display: block;
      }
    }

    /* Large devices (desktops, less than 1200px) */
    @media (max-width: 1199.98px) {
      .first-section-container .img-ciclista {
        display: none;
      }

      .first-section-container .img-bollino {
        left: 80%;
      }

      .slide-container.second-title {
        padding-bottom: 2%;
      }

      .tappa-evento.tappa-evento-speciale .centro-tappa {
        display: block;
      }

      .footer-content-end .upslowtour-partners {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Medium devices (tablets, less than 992px) */
    @media (max-width: 991.98px) {
      .first-section-container .img-bollino {
        left: 85%;
        top: 18vh;
        height: 13vh;
      }

      .footer-content-end .upslowtour-partners {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Small devices (landscape phones, less than 768px) */
    @media (max-width: 767.98px) {
      .head-structure {
        display: block;
        text-align: center;
      }

      .head-structure .ul-socials ul {
        padding-left: 0;
      }
	  
      .first-section-container .img-bollino {
        left: 80%;
        top: 22vh;
        height: 13vh;
      }

      .events-dates {
        grid-template-columns: repeat(1, 1fr);
      }

      .footer-content-end .upslowtour-partners {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    /* X-Small devices (portrait phones, less than 576px)*/
    @media (max-width: 575.98px) {
      .first-section-container .img-bollino {
        left: 78%;
        top: 28vh;
        height: 10vh;
      }
	  
	  .tappa-evento ul.avvertenze-tappa, .tappa-evento ul.caratteristiche-tappa {
		  padding-left: 0 !important;
	  }
    }

    /*#endregion*/
	
	
	
	/*NEW CUSTOM STYLE - RISULTATI*/
	.risultati-section-container .table-indicator {
		width: fit-content !important;
		padding: 0.5rem 1.5rem;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		margin-bottom: 0;
	}
	
	.risultati-section-container .table-container {
		width: 100% !important;
		border: 3px solid var(--bluscuro);
		border-radius: 15px;
		border-top-left-radius: 0;
		padding: 15px;
		background-color: #fff;
	}
	
	.risultati-section-container .table-container table {
		width: 100% !important;
	}
	
	.risultati-section-container .table-container table thead tr th, .risultati-section-container .table-container table tbody tr td {
		border: 1px solid #ddd;
		font-size: 1.8rem;
		padding: 15px;
	}
	
	.btn-titolo-pagina {
		display: block;
		margin-left: 2rem;
		color: var(--bluscuro) !important;
		background-color: var(--giallo);
		border-color: var(--bluscuro);
		border-width: 2px;
		font-size: 1.5rem;
	}