@charset "utf-8";
/* CSS Document */

[data-id="mainMenu"] .mobilemenuck-bar-title,
[data-id="mainMenu"].mobilemenuck {
  background-color: #FFF;
  -webkit-box-shadow: 2px 2px 5px -2px #929292;
  -moz-box-shadow: 2px 2px 5px -2px #929292;
  border-bottom: 5px solid #cc181d;
}

[data-id="mainMenu"].mobilemenuck {
  position: fixed !important;
  background-color: #f6f6f6;
  height: 100vh;
  z-index: 99999999999 !important;
  overflow: hidden !important;
}

[data-id="mainMenu"] .mobilemenuck-title {
  background: transparent;
  height: auto;
}

[data-id="mainMenu"] .mobilemenuck-bar-button,
[data-id="mainMenu"] .mobilemenuck-item > .level1 {
  background: #f6f6f6;
  color: #cc181d;
}

[data-id="mainMenu"] .mobilemenuck-bar-button {
  background: #FFF;
}

[data-id="mainMenu"] .mobilemenuck-item > .level1.open {
  background: #f6f6f6;
}

.mobilemenuck-item .level2 span {
  font-size: 16px;
}

[data-id="mainMenu"] .mobilemenuck-item {
  padding: 0px 10vw;
}

[data-id="mainMenu"] .mobilemenuck-item .mobilemenuck-item,
[data-id="mainMenu"] .mobilemenuck-item .mobilemenuck-item .mobilemenuck-item {
  padding: 0px
}

[data-id="mainMenu"] .mobilemenuck-item > .level1.open .mobilemenuck-togglericon,
.mobilemenuck-button,
.mobilemenuck-item .open span {
  color: #000 !important;
}

.mobilemenuck-item span {
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
}

.mobilemenuck-togglericon {
  color: #f6f6f6 !important;
}

[data-id="mainMenu"] .mobilemenuck-togglericon:after {
  background: #cc181d !important;
}

[data-id="mainMenu"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div {
  background-color: #FFF;
}

[data-id="mainMenu"] .mobilemenuck-item > .level1:not(.headingck):hover,
[data-id="mainMenu"] .mobilemenuck-item > .level1.open,
[data-id="mainMenu"] .mobilemenuck-item > .level2:not(.headingck):hover,
[data-id="mainMenu"] .mobilemenuck-item > .level2.open,
[data-id="mainMenu"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.headingck):hover {
  background-color: #cc181d;
}

[data-id="mainMenu"] .mobilemenuck-item > .level1:not(.headingck):hover span,
[data-id="mainMenu"] .mobilemenuck-item > .level1.open span,
[data-id="mainMenu"] .mobilemenuck-item > .level2:not(.headingck):hover span,
[data-id="mainMenu"] .mobilemenuck-item > .level2.open span,
[data-id="mainMenu"] .mobilemenuck-item > .level1.open .mobilemenuck-togglericon,
.mobilemenuck-button, .mobilemenuck-item .open span {
  color: #FFF !important;
}

[data-id="mainMenu"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div span {
  color: #635c5a !important;
  font-weight: bold !important;
  font-size: 16px !important;
}

[data-id="mainMenu"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:hover span {
  color: #FFF !important;
}

.mobilemenuck-button {
  color: #635c5a !important;
}

/* --- #banners su TABLET e SMARTPHONE (fino a 767px) --- */
/* Sotto i 768px i due riquadri passano in colonna. L'immagine torna
   intera (altezza naturale) e l'iframe — scalato da banners.js —
   occupa tutta la larghezza con il contenuto SEMPRE INTERO, solo
   rimpicciolito in proporzione (niente più tagli): l'altezza di ogni
   riquadro è sempre quella del proprio contenuto. Senza JavaScript
   l'iframe tiene l'altezza del codice di embed, come prima. */
@media (max-width: 767px) {

  #banners {
    flex-direction: column;
  }

  #banners .custom,
  #banners .custom:has(iframe),
  #banners .custom:not(:has(iframe)) {
    width: 100%;
    flex: none;
    min-width: 0;
  }

  #banners .custom img {
    height: auto;
    object-fit: unset;
  }

  /* In colonna il riquadro con l'immagine torna a flusso normale
     (niente più position: absolute del desktop): immagine intera a
     tutta larghezza, altezza naturale */
  #banners:has(iframe) .custom:not(:has(iframe)) a {
    position: relative !important;
  }

  #banners:has(iframe) .custom:not(:has(iframe)) img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: initial;
  }

}

/* SMARTPHONE */
@media (max-width: 450px) {

  #sponsor_tecnico img {
    margin-left: -30% !important;
  }

  #sponsor_tecnico span {
    margin-top: 6.5%;
  }

  #banners,
  .moduli-contenuto.bottom {
    background-color: #FFF !important;
  }

  .newsletter {
    background-color: #ac0000;
  }

  #banners .mod-custom,
  .newsletter,
  .downloadApp img,
  #news2 {
    border-radius: 50px !important;
    margin: 5% !important;
    width: 90% !important;
  }

  #news2 {
    width: 80% !important;
  }

  .newsletter h3 {
    font-size: 11vw !important;
  }

  /* BANNER CROWDFUNDING */
  /* i due moduli sulla stessa riga, a prescindere da quanti wrapper ci sono */
  #mod-custom188,
  #mod-custom176 {
    width: 100% !important;
    max-width: 100% !important;       /* così ci stanno in due sulla riga */
  }

  img.renma {
    width: 100%;
  }

  #testoArticolo img.abbonamenti {
    width: 100%;
    margin: 0px;
  }

  #inner-top {
    display: none;
  }

  #logo {
    width: 20%;
  }

  #news {
    padding-top: 0vh;
    margin-top: -7vh;
  }

  #news #articleData {
    width: 60vw !important;
  }

  .dettagliMatch .team span {
    font-size: 5vw;
    line-height: 6vw;
  }

  .dettagliMatch .score span {
    font-size: 5.5vw;
    line-height: 6.5vw;
  }

  .game_counter {
    width: 80%;
    margin: 0px 5%;
    padding: 5%;
  }

  .djl_theme_bootstrap.mod_djl_counter .dj-date-counter {
    font-size: 26px;
    margin: 0px
  }

  .djl_theme_bootstrap.mod_djl_counter .dj-date-counter span span {
    background: transparent;
    letter-spacing: 0px;
  }

  .contacts {
    /* width: 70%;
    padding: 5%;
    margin: 10%; */
    width: 94%;
    margin: 10% 0%;
    height: 250px;
  }

  .contacts span {
    font-size: 100%;
  }

  .visform {
    position: relative;
    float: left;
    width: 100%;
  }

  .visforms fieldset {
    width: 100%;
    padding: 5% 0%;
  }

  .visforms input,
  .visforms textarea,
  .visforms select {
    width: 80%;
  }

  .eventgallery-events-gridlist .item-container {
    width: 100% !important;
    margin: 5% 0px;
  }

  #events .item-container .item {
    padding: 0px;
  }

  #djleague table thead th,
  #djleague table thead th span {
    font-size: 14px;
    line-height: 26px;
  }

  #djleague table thead tr th,
  #djleague table tbody tr td {
    padding: 5px;
  }

  .djl_schedule_list .time,
  .djl_schedule_list .venue {
    display: none;
  }

  #next-match {
    width: 100%;
    padding: 0px;
    border-right: 0px;
  }

  #biglietti {
    width: 90%;
    margin: 0px 5%;
    padding: 0px;
    border-top: 2px solid #000;
  }

  #biglietti p {
    font-size: 7vw;
    line-height: 8vw;
  }

  #biglietti .btn-link {
    font-size: 4vw;
  }

  .liveMatch * {
    text-align: center;
  }

  .liveMatch table {
    width: 90%;
    margin: 0px 5%;
  }

  .nextMatch .team_logo,
  .liveMatch table .team_logo {
    display: block !important;
    height: 60px !important;
    width: auto !important;
    margin: 20px auto !important;
    float: none !important;;
  }

  .liveMatch table .name {
    font-size: 18px;
    line-height: 28px;
  }
  
  .liveMatch table .score {
    font-size: 24px;
    line-height: 34px;
  }

  .dettagliMatch img {
    width: 100% !important;
    margin: 20px 0% !important;
  }

  .claim_sponsor_match {
    font-size: 18px;
    margin: 80px 0px 0px 0px;
  }

  .dettagliMatch .infoMatch img,
  .sponsor_match_img {
    width: 100% !important;
    margin: 50px 0% !important;
  }

  .dettagliMatch .infoMatch img {
    margin: -50px 0px 50px 0px !important;
  }

  .liveMatch .team_home,
  .liveMatch .vs_score,
  .liveMatch .team_away {
    width: 30% !important;
  }

  .notizieBlog .blog-item {
    width: 100%;
    margin: 5% 0px;
  }

  .item-pagecategoria .article-info .category-name,
  .item-pagecategoria .article-info .published {
    position: relative;
    float: left;
    width: 40%;
    padding: 5px 5%;
    margin: 0px;
    text-align: center;
  }

  .societa .left.item-image {
    width: 100% !important;
    margin: 0px 0px 40px 0px !important;
  }

  .com-content-article__body {
    width: 100%;
  }

  .fields-container {
    position: relative;
    float: left;
    width: 90%;
    background-color: #f6f6f6;
    border-radius: 20px;
    margin: 0px;
    padding: 5%;
  }

  .pagination__wrapper ul li {
    font-size: 8vw;
  }

  .moduletable.videogallery,
  .moduletable.photogallery,
  .moduletable.sponsorMese {
    width: 100%;
  }

  .moduletable.sponsorMese img {
    width: 90%;
    margin: 0px 5%;
  }

  .crediti #testoArticolo img {
    width: 100% !important;
    margin-right: 0px;
  }

  /* Impilati uno sotto l'altro: ogni riquadro è un QUADRATO DINAMICO,
     l'altezza segue sempre la larghezza (aspect-ratio 1/1: se la
     larghezza cambia, cambia anche l'altezza). L'altezza minima è
     quella del contenuto (min-height automatico dei flex item): se
     gli elementi della newsletter non ci stanno nel quadrato, il
     riquadro cresce quanto basta e nulla viene mai nascosto. */
  .newsletter,
  .downloadApp {
    width: 100%;
    /* aspect-ratio: 1 / 1; */
    height: auto;
    max-height: none;
  }

  /* Il modulo "scarica l'app": nessun padding, così l'immagine quadrata
     riempie esattamente il riquadro senza venire tagliata */
  .downloadApp {
    max-height: none;
    height: auto;
    padding: 0px;
  }

  /* Il mockup su smartphone: sempre intero e centrato, con un tetto
     di altezza per non allungare troppo la pagina */
  #mod-custom190 .mockup-app,
  #mod-custom190 img[src*="mockup-app"] {
    max-height: 50vh;
  }

  .newsletter {
    width: 100%;
    margin-bottom: 5%;
  }

  .newsletter h3 {
    font-size: 12vw;
    line-height: 13vw;
  }

  .newsletter p {
    font-size: 4vw;
    line-height: 6vw;
  }

  .newsletter form input {
    max-width: 85%;
    font-size: 4vw;
  }

  .newsletter .acysubbuttons {
    max-width: 90%;
  }

  .newsletter form input.btn {
    font-size: 4vw;
  }

  .downloadApp {
    background-size: contain;
  }

  .downloadApp p {
    font-size: 9vw;
    line-height: 9vw;
  }

  .downloadApp p span a {
    font-size: 5vw;
    line-height: 5vw;
  }

  /* #storeContainer img {
    width: 100% !important;
    margin: 20px 0% !important;
  } */

  .downloadApp #storeContainer img,
  #article #storeContainer img {
    width: 40% !important;
    margin: 10px 5% !important;
  }

  .downloadApp #storeContainer {
    margin-bottom: 0px;
  }

  .downloadApp img,
  .downloadApp .mockup-app {
    width: 100%;
    max-height: 100vw;   /* mai più alta del quadrato a tutta larghezza */
    object-fit: contain; /* sempre intera: niente tagli né deformazioni */
  }

  #footer {
    width: 80%;
    padding: 10%;
  }

  #footer img {
    width: 30%;
  }

  #social-menu,
  #help-menu,
  #help-menu ul {
    width: 100%;
    float: left;
    text-align: center;
  }

  #help-menu {
    margin-top: 30px;
  }

  #help-menu ul img {
    width: 20%;
  }

  .menuSocial {
    width: 100%;
  }

  .organigramma-societario {
    position: relative !important;
    float: left !important;
    display: grid !important;
  }

  .organigramma-societario img {
    position: relative !important;
    float: left !important;
    width: 100% !important;
    flex: none !important;
    margin: 5% 0px !important;
    width: 100% !important;
  }

  #banners {
    flex-direction: column;
  }

  #banners .custom,
  #banners-footer .custom {
    width: 100%;
  }

  #banners .custom {
    flex: none;
  }

  #banners .custom img {
    height: auto;
    object-fit: unset;
  }

  #mod-custom188 a span {
    font-size: 8vw;
    line-height: 9vw;
  }

  /* In colonna: ogni riquadro calcola la propria altezza da solo
     (quadrato dinamico), senza lo stretch orizzontale del desktop
     che su mobile può gonfiare l'altezza */
  .moduli-contenuto.bottom {
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }

}

.menuSocialMobile {
  width: 100%;
  text-align: center;
  list-style: none;
  padding: 0px;
  margin: 50px 0px 0px 0px;
  display: inline-flex;
}

.menuSocialMobile img {
  width: 30%;
  height: auto;
}

#menuTopMobile {
  position: fixed;
  top: 5px;
  z-index: 9999999999 !important;
  width: auto !important;
  text-align: right !important;
  right: 20vw;
}

#menuTopMobile img {
  width: auto !important;
  height: 7vw;
  /* border: 1px solid #cc181d; */
  border-radius: 500px;
}

#menuTopMobile img:hover {
  border: 1px solid #FFF;
  border-radius: 500px;
}