html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.lottie {
    width: 500px;
    height: 500px;
    position: absolute;
    z-index: 0;
    bottom:-100px;
    left:-100px;
    overflow: hidden;
  }
  .text-blue {
    color:#0a58ca;
  }
  .text-green {
    color: #0c8b00;
  }
  .text-red {
    color: #8b1000;
  }
  .pointer {
    cursor: pointer;
  }
  .button-menu{
    width:100%;
    background-color:#eee;
    padding:11px 40px;
    border-radius:20px;
    margin: 5px 0;
  }

  .btn-risposta {
    padding: 20px 0;
    text-align: center;
    width: 100%;
    display: block;
    border-radius: 20px;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    top: -3px;
    transform: translateY(0px);
    position: relative;
    box-shadow: inset 0 30px 30px -15px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 20px rgba(0,0,0,0), 0 3px 0 #9d9d9d, 0 3px 2px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.1);
    background: #eee;
    border: 1px solid #9d9d9d;
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
    transition: 150ms all;
    -webkit-transition: 150ms all;
    -moz-transition: 150ms all;
    -o-transition: 150ms all;
    -ms-transition: 150ms all;
}

.neutral {
  box-shadow: inset 0 30px 30px -15px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 20px rgba(0,0,0,0), 0 3px 0 #9d9d9d, 0 3px 2px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.1);
    background: #eee;
    border: 1px solid #9d9d9d;
}
.selected {
  box-shadow: inset 0 30px 30px -15px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 20px rgba(0,0,0,0), 0 3px 0 #b68a07, 0 3px 2px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.1);
    background: #ffc107;
    border: 1px solid #b68a07;
}
.right {
  box-shadow: inset 0 30px 30px -15px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 20px rgba(0,0,0,0), 0 3px 0 #469610, 0 3px 2px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.1);
    background: #85ff34;
    border: 1px solid #469610;
}
.wrong {
  box-shadow: inset 0 30px 30px -15px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 20px rgba(0,0,0,0), 0 3px 0 #b6432f, 0 3px 2px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.1);
    background: #ff5f43;
    border: 1px solid #b6432f;
}

.btn-risposta:active {
  transform: translateY(3px);
  box-shadow: inset 0 16px 2px -15px rgba(0,0,0,0), inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 20px rgba(0,0,0,.1), 0 0 0 #0f988e, 0 0 0 2px rgba(255,255,255,.5), 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0);
}

  .menu-text {
    text-align: center;
    font-weight: 500;
  }
  .risp-text {
    text-align: center;
    font-weight: 500;
    color: #000;
  }
  .is-countdown {
    border:0;
    background-color: transparent;
  }
  .countdown-period {
    font-size:12px;
  }
  .button-menu.accedi {
    background-color: gold;
  }
  .modal-full{
    position:absolute;
    width:95%;
    height:95%;
    max-width:none;
    max-height:none;
    top:0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom:auto;
    bottom:0;
    left:0;
    right:0;
    z-index: 9;
    border-radius:12px;
    background-color:#f2eff6;
    padding:15px 25px;
  }
  .close-modal {
    background-color:#f80000;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    right:-5px;
    top:-10px;
    font-size:20px;
    font-weight: 600;
    cursor:pointer;
  }
  .form-control {
    border:none;
    border-radius: 12px;
    padding-top:13px;
    padding-bottom:13px;
    width:100%;
    /** max-width: 350px; **/
  }
  .btn {
    width:100%;
    max-width: 350px;
    border-radius:20px;
    padding-top:11px;
    padding-bottom:11px;
    text-align: center;
  }
  .btn-iscrivimi {
    background-color:gold;
  }
  .btn-accedi {
    background-color:#7FDA6A ;
  }
  .btn p {
    font-weight: 500;
  }
  hr {
    margin: 2rem 0;
    color: #000;
    background-color: #000;
    border: 1px;
    width: 100%;
  }


  .bottom-menu{
    width:100%;
    position:relative;
    /** background-image: linear-gradient(to bottom, rgba(255,0,0,0), red); **/
    padding:15px 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }


  .bottom-menu-shadow {
    position: absolute;
    z-index:9;
    background-color: rgba(0, 84, 211, 0.956);
    padding:5px 15px;
    border-radius:9px;
    display:flex;
    gap:10px;
    align-items: center;

    animation: shadows 4s infinite;
  }

  @keyframes shadows {
    0% {
      box-shadow: 0px 0px 20px 2px rgba(0, 84, 211, 0.956);
    }
    50% {
      box-shadow: 0px 0px 20px 2px rgba(0, 84, 211, 0.356);
    }
    100% {
      box-shadow: 0px 0px 20px 2px rgba(0, 84, 211, 0.956);
    }
  }

  .avatar-intro-home{
    height:30px;
    width:30px;
    border-radius: 100%;
    background-color: chocolate;
  }

  .lottie-background {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:-1;
    transform: scale(1.5);
  }


  @keyframes infiniteScroll {
    from {transform: translateX(0) }
    to {transform: translateX(calc(0px - 50% - 25px));}
  }

  .horizontal-scrolling-items {
    gap: 10px;
  }

  .horizontal-scrolling-items__item {
    display:flex;
    align-items:center;
    gap:10px;
    width:150px;
    color:#fff;
  }

  .bottom-menu .horizontal-scrolling-items__item {
    color:#000;
  }

  .horizontal-scrolling-items {
    display:flex;
    animation-name: infiniteScroll;
    animation-duration: 36s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .user-menu {
    position:absolute;
    right:10px;
    top:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:5px;
  }
  .user-avatar {
    height:40px;
    width: 40px;
    background-color: #333;
    border-radius:100%;
  }
  .user-menu i {
    font-size:10px;
  }


  /* CSS */

.blue {
  background-color: #1899D6;
}
.blue:after {
  background-color: #1CB0F6;
}

.grey {
  background-color: #cccccc;
}
.grey:after {
  background-color: #f3f3f3;
}

.gold {
  background-color: #b68a07;
}
.gold:after{
  background-color: #ffc107;
}

.red {
  background-color: #b61b07;
}
.red:after{
  background-color: #ff3907;
}

.green {
  background-color: #45753C;
}
.green:after{
  background-color: #81B64C;
}


.button-19 {
  appearance: button;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 15px 16px;
  text-align: center;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;

}

.menu {
  width:100%;
  max-width:500px;
}

.pulse-button {
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  animation: shadows 3.5s infinite linear;
}


@keyframes shadows {
  0% {
    transform: scale(1);
    box-shadow: 0px 0px 20px 2px rgba(0, 84, 211, 0.356);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0px 0px 20px 2px rgba(0, 84, 211, 0.996);
  }
  100% {
    transform: scale(1);
    box-shadow: 0px 0px 20px 2px rgba(0, 84, 211, 0.356);
  }
}

.button-19:after {
  background-clip: padding-box;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.button-19:main,
.button-19:focus {
  user-select: auto;
}

.button-19:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.button-19:disabled {
  cursor: auto;
}

.button-19:active {
  border-width: 4px 0 0;
  background: none;
}

.quiz-section {
  width:95%;
  max-width:500px;
}
.quiz-container {
  width:100%;
  display:flex;
  flex-direction: column;
  background-color:#fff;
  border: 1px solid #d8d8d8;
  border-radius: 14px;
  padding:13px 13px 0px 13px;
}

.banner-mobile {
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: center;
}
.banner-mobile img {
  width:auto;
  max-width: 100%;
  height:50px;
  border-radius: 3px;
}
.banner-laterale {
  display:none;
}
.banner-laterale img {
  border-radius:6px;
  width: 90%;
  margin: 0 auto;
}


.risposte-container {
  overflow:scroll;
  overflow-x: hidden;
}
.risposte-content {
  background-color:#fff;
  border-radius:12px;
  padding:15px;
  margin:5px 0;
  width:95%;
}

#id_risultato_finale {
  font-size:0.9rem;
}

.sponsor_logo {
  max-width:290px;
  width: 100%;
  border-radius:6px;
}


.trademark {
  position: absolute; text-align: center; left:0px; right:0px; bottom:2px; font-size:0.7rem; color:#555
}

.light-shadow {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.brakets {
  font-size:3rem;
}

#iscrivi_accedi {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}


.tab-btn.active {
  background-color: #007bff !important;
  color: white !important;
}
.tab-sezione.active {
  display: block !important;
}

/* Carousel wrapper: clips overflow so logos slide in/out cleanly */
.logo-carousel-wrapper {
  width: 100%;
  overflow: hidden;
  background: #fff;         /* change as needed */
  padding: 10px 0;
  position: relative;
}

.quiz-container .logo-carousel-wrapper {
  background: transparent!important;
}

/* The moving track */
.logo-carousel-track {
  display: flex;
  width: max-content;
  animation: logoScroll 20s linear infinite;
}

/* Pause on hover */
.logo-carousel-wrapper:hover .logo-carousel-track {
  animation-play-state: paused;
}

/* Each logo slot */
.logo-slide {
  flex: 0 0 auto;
  width: 160px;
  margin: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-slide img {
  max-width: 100%;
  max-height: 65px;
  object-fit: contain;
}

.logo-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* The scroll animation */
@keyframes logoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% because we duplicated the list */
}

.sezione-sponsor .logo-slide {
  width: 130px;
  margin: 0 10px;
}

.gallery {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 360px; /* fits any mobile screen */
  margin: 0 auto;
}

.col-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.col-right {
  display: flex;
  flex: 1;
  justify-content: center; /* centers vertically */
  align-items: center;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.col-left .item {
  flex: 1;
}

.col-right .item {
  flex: 1;
  width: 100%;
  align-items: center;  /* centers image and text horizontally */
  justify-content: center;
  width: 100%;
  margin: 0 10px;
}

/* Key rules for mobile images */
img {
  width: 100%;      /* fills the column width */
  height: 80px;      /* fixed height for left images — adjust to taste */
  object-fit: contain;
  border-radius: 8px; /* optional, looks clean on mobile */
  display: block;
}

.col-left .item img {
  max-width: 110px;
}

.col-right .item img {
  height: 100%;       /* right image stretches to match both left images + gap */
  max-height: 160px;  /* 120 + 120 + 8 gap = 248px */
}

p {
  font-size: 12px;
  text-align: center;
  margin: 4px 0 0 0;
  color:#111;
}


.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  /* Positioning — top left, always visible */
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 999;

  /* Style */
  background-color: #ffffff;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 50px;        /* pill shape */
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);

  /* Smooth interaction */
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  /* Mobile tap target — minimum 44px height recommended */
  min-height: 44px;
}

.back-btn:hover,
.back-btn:active {
  transform: translateX(-3px);   /* subtle slide left on hover */
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}

/* Mobile first — shrink label on very small screens */
@media (max-width: 360px) {
  .back-btn span {
    display: none; /* hide text, keep only the arrow icon */
  }
  .back-btn {
    padding: 10px 14px;
  }
}