@media screen and (max-width: 1920px){

    .squadre div{
        width: 25%;
    }

    .maglie{
        width: 150px;
    }
    
    .bonus{
        font-size: 60px;
    }

    .maggiorata{
        font-size: 40px;
    }

    .vecchia-quota{
        font-size: 40px;
    }

    .nuova-quota{
        font-size: 80px;
    }

    .info img{
        width: 35px;
    }

    button{
        font-size: 20px;
    }

    .step{
        padding: 1rem 15rem;
    }

    .numero p{
        font-size: 6vw;
    }

    .passaggio p {
        line-height: 2vw;
    }
}

@media screen and (max-width: 1280px){

    .squadre div{
        width: 30%;
    }

    .step{
        padding: 1rem 10rem;
    }
	.testo-mobile{
        padding-left: 10rem;
    }

    .numero p{
        font-size: 7vw;
    }
}

@media screen and (max-width: 1024px){

    header{
        padding-bottom: 0px;
    }

    .squadre img{
        width: 50px;
    }

    .maglie{
       width: 140px !important;
    }

    h3{
        font-size: 25px;
    }

    .bonus{
        font-size: 50px;
    }

    .maggiorata{
        font-size: 40px;
    }
    
    .vecchia-quota{
        font-size: 40px;
    }

    .nuova-quota{
        font-size: 80px;
    }

    .modal-overlay{
        z-index: 9999;
    }

    .modal{
        width: 90%;
        z-index: 9999;
    }

    button{
        font-size: 20px;
        padding: 0.8rem 2.5rem;
    }

    .step{
        padding: 1rem 1rem;
    }

    .numero p{
        font-size: 10vw;
    }

    .passaggio p{
        font-size: 20px;
        line-height: 3vw;
    }

    .passaggio p span{
        font-size: 15px;
    }

    .gioca p{
        font-size: 60px;
    }

    .icona-freccia img{
        width: 15px;
    }

    .testo-mobile{
        padding-left: 2rem;
    }

    .mobile{
        background-size: 50%;
        background-position: bottom right;
    }

    .mobile div{
        width: 50%;
    }

    .mobile img{
        width: 59%;
    }

    .testo-mobile h2{
        font-size: 25px;
    }

    .testo-mobile p{
        font-size: 20px;
    }

    .pagamenti img{
        width: 59px;
    }

    .legal{
        margin-top: 4%;
    }

}

@media screen and (max-width: 768px) {
    h3{
        font-size: 23px;
    }
}

@media screen and (max-width: 600px) {

    header{
        padding: 0;
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    header img{
        width: 100px;
    }

    .promo{
        background-position: center;
        padding: 2.8rem 0rem;
		background-image: url('https://cdn.snai.it/promozioni/sources/background-calcio5.jpg');
    }

    h3{
        font-size: 20px;
        margin-top: 10px;
    }

    .squadre{
        justify-content:normale;
        gap: 1.5%
    }

    .blocco-desk{
     display:none
    }

    .versione-mobile{
     display:block;
    }

    .blocco-squadra{
        flex-direction:column;
        align-items:end;
	    width: 40%;
    }

    .versus{
        margin-right: 5px;
    }

    .blocco-squadra h3 {
        text-align:right !important;
        width: 130%;
    }

    .secondo{
        flex-direction: column-reverse;
        align-items: start
    } 

    .secondo h3{
        text-align:left !important
    }   

    .squadre > h3{
        font-size: 24px;
        line-height: 24px;
    }

    .squadre img{
        width: 50px;
    }

    .maglie{
        width: 76px !important;
    }

    .scommessa{
        font-size: 40px;
    }

    .maggiorata{
        font-size: 30px;
    }

    .vecchia-quota{
        font-size: 30px;
        padding-bottom: 3%;
    }

    .nuova-quota{
        font-size: 60px;
    }

    button{
        font-size: 20px;
        padding: 0.7rem 3.5rem;
    }

    .iconInfo{
        width: 30px !important;
    }
	
	.iconButton{
		width:30px !important;
		height: 30px !important;
	}
	
	.iconInfo{
		height: 4vw;
	}

    .step{
        padding: 0;
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%;
    }
	
	.step-mobile{
		display:flex !important
	}

    .carousel {
        display: flex;
        overflow: hidden;
        position: relative;
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .sezione {
        flex: 1 0 100%;
        width: 100%;
        background-color: transparent;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
    }

    .numero{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .numero p{
       font-size: 62px;
	   padding-right: 20px!important;
    }

    .passaggio p{
        font-size: 24px;
        line-height: 5vw;
		text-align: center;
    }

    .passaggio p span{
        font-size: 13px;
    }

    .gioca{
        display: flex;
        align-items: center;
        justify-content: center;            
    }

    .gioca p{
        font-size: 68px;
    }

    .icona-freccia img{
        margin-left: 1rem;
        display: none;
    }

    .freccia_mobile {
        display: block!important;
        margin-left: 1rem;
        width: 13px!important;
    }
	.freccia_mobile img{
		width: 13px!important;
	}

    .mobile{
        flex-direction: column;
        background-attachment: scroll;
        background-size: contain;
        background-position: right bottom;
    }

    .mobile div{
        width: 90%;
		margin:0 auto;
		text-align:center
    }

    .testo-mobile{
        padding-left: 1%;
    }

    .mobile img{
        width: auto;
    }

    .pagamenti-container {
        overflow-x: auto;
        white-space: nowrap;
        padding: 25px;
        scrollbar-width: none;
      }
      
      .pagamenti-container::-webkit-scrollbar {
        display: none;
      }
      
      .pagamenti img {
        width: 100px;
        height: auto;
        margin-right: 30px;
        display: inline-block;
        transition: transform 0.3s;
      }
}

@media screen and (max-width: 390px) {
    .maglie{
        width: 59px !important;
    }	

    /* .sezione {
        flex: 0 0 100%;
    } */
}

@media screen and (max-width: 375px) {
    /* .sezione {
        flex: 0 0 99%;
    } */
}

@media screen and (max-width: 360px) {

    .maglie{
        width: 55px !important;
    }

    /* .sezione {
        flex: 0 0 98%;
    } */
}