body,
    html {
        margin: 0px;
        padding: 0px;
        scroll-behavior: smooth;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 27px;
        color: #1F2121;
        background-color: WHITE;


    }

    a {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    /*COLORI:
Verde scuro: #1d6364
Verde chiaro: #dff2dd
Arancione: #ff8100
Blu: #20396d
FONT:
Titoli: Poppins
Corpo testo: Open sans*/

    * {
        transition: 0.3s;
    }


    .steps {

        width: 116.5%;
        margin-left: 3%;
    }

    /* range 2 */
    .range-input {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        cursor: pointer;
        outline: none;
        border-radius: 10PX;
        height: 18px;
        background: #ccc;
        MARGIN: 1%;
        margin-bottom: 0;

        border: 1px dashed #9da3a8;
    }

    .range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 25px;
        width: 25px;
        background-color: white;
        border-radius: 50%;
        border: 8px solid #20396d;
        transition: .2s ease-in-out;
        position: relative;
        left: 0px;
    }

    .range-input::-moz-range-thumb {
        height: 25px;
        width: 25px;
        background-color: BLUE;
        border-radius: 50%;
        border: none;
        transition: .2s ease-in-out;
    }



    .range {
        display: flex;
        align-items: center;

    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .your-class-mobile {
        display: none;
    }

    * {
        transition: all 0.3s;
    }

    h1 {
        font-size: 1.3vw;
        margin: 1%;
    }

    h2 {
        font-size: 1.3VW;
        margin: 1%;
    }

    /* The slider itself */

    .sopra {
        background-color: #f7f4f2;
        padding-top: 1%;

        height: 21vw;
    }

    .logo {
        margin: 0 auto;
        display: block;
        margin-top: 0.5%;
        width: 15%;
        margin: 0 auto;
        display: block;
        margin-top: 0.5%;
        width: 300px;
        padding: 5px;
    }

    .pannello {
        width: 30%;
        border-radius: 18px;
        background-color: white;
        -webkit-box-shadow: 5px 5px 10px 0px #b7b7b7;
        -moz-box-shadow: 5px 5px 10px 0px #b7b7b7;
        -o-box-shadow: 5px 5px 10px 0px #b7b7b7;
        box-shadow: 0px 1px 7px 0px #666666;
        margin: 0 auto;
        position: relative;
        top: 0.8vw;
        margin-top: 1.5%;
        margin-left: 61%;
        text-align: center;
        margin-top: -35.5%;
    }

    .div_form {

        MARGIN: 1% AUTO;
        PADDING: 1%;
        padding-bottom: 5%;
    }

    .div_form h2 {
        font-weight: bold;
        margin: 3% auto;
        margin-bottom: 0;
    }

    .sotto_form {

        text-align: center;
        font-size: 17px;
        color: gray;
        padding: 1.5%;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
        font-weight: bold;
        color: #9da3a8;
    }


    .steps td {
        width: 20%;
        margin: 0;
        padding: 0;

    }

    .output {
        color: #20396d;
        margin-inline: 1%;
        width: 96%;
        font-size: 1.2vw;
        top: 23px;
        margin-top: 8%;
        margin-bottom: -3%;
        margin-left: 2%;
    }

    .avanti {
        background-color: #ff8100;
        text-align: center;
        color: white;
        width: 60%;
        padding: 1.5%;
        height: auto;
        font-weight: 600;
        padding-inline: 12%;
        cursor: pointer;
        border-radius: 5PX;
        position: static;
        margin: 0 auto;
        margin: 2% auto;
        font-size: 1.4vw;
        text-transform: uppercase;

    }

    .due_dx .avanti {
        margin-top: 5%;
        width: 69%;
    }

    .bottone {
        background-color: #ff8100;
        text-align: center;
        color: white;
        width: fit-content;
        padding: 0.5%;
        height: auto;
        font-weight: 600;
        padding-inline: 4%;
        cursor: pointer;
        border-radius: 5PX;
        position: static;
        margin: 0 auto;
        font-size: 1.4vw;
        text-transform: uppercase;
        margin-top: 4%;
    }

    #tabella_consensi a {
        color: blue;
    }

    .testo .bottone {
        margin-left: 0px;
        padding: 1%;
        padding-inline: 5%;
    }

    #consenso4 {
        float: left;
    }

    .progress2 {
        display: none;
    }

    .progress {
        display: block;
    }


    .step1,
    .step3,
    .step4,
    .step5,
    .step6,
    .step7 {
        display: none;
    }

    #regione,
    #professione,
    #anno,
    #email,
    #telefono,
    #prof_dip,
    #prof_pensionato,
    #tipo_contratto,
    #totale_pensione,
    #cessione,
    #anni_cessione,
    #cap_comune {
        margin: 1%;
        font-size: max(17px, 1.2vw);
        color: #484848;
        padding: 1%;
        MARGIN-TOP: 0PX;
        width: 84%;
        margin: 0 auto;
        margin-top: 1%;
    }

    input[type=checkbox] {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    #nome,
    #cognome {
        font-size: 1vw;
        margin: 0%;
        font-size: 1.2vw;
        color: #484848;
        padding: 1%;
        MARGIN-TOP: 0PX;
        width: 41.5%;
    }

    .msg_datanascita,
    .msg_regione,
    .msg_professione {
        font-size: max(13px, 0.8vw);
        color: red;
        font-weight: bold;
        display: none;
        text-align: center;
        margin: 0px auto;
        position: relative;

    }

    .prof_dip,
    .prof_pensionato,
    .tipo_contratto,
    .prof_dip,
    .prof_pensionato,
    .tipo_contratto,
    .totale_pensione,
    .cessione,
    .anni_cessione {
        display: none;
    }







    * {
        transition: 1s;
    }

    .pannello2 {
        display: flex;
        width: 60%;



        margin: 0 auto;
        margin-top: 2%;
        position: relative;


        min-width: 900px;
    }

    .ele {
        margin: 0 auto;
        width: 27%;
        text-align: left;
        font-size: 1.2vw;
        text-align: center;
    }

    .ele img {
        width: 16%;
    }

    .ele .testo {
        width: 60%;
        /* float: right; */
        display: inline-block;
        font-size: max(17px, 1.1vw);
        text-align: left;
    }



    .footer {
        width: 100%;
        margin: 0 auto;
        margin-top: 13%;
        background: #20396d;
        /* min-width: 900px; */
        color: white;
        margin: 0%;
        font-size: 0.5vw;
        text-align: justify !important;

    }

    .footer p {
        width: 86%;
        display: inline-block;
        font-size: max(12px, 0.6vw);

    }





    /******* fascia 1 **********/
    .fascia1 {
        background: url(img/desktop-apertura.jpg) no-repeat;
        background-size: 100%;
        padding-bottom: 22%;
    }

    .logo {
        margin: 0 auto;
        display: block;
        margin-top: 0.5%;
        width: 15%;
        margin: 0 auto;
        display: block;
        margin-top: 0.5%;
        width: 50%;
        padding: 5px;
        margin-left: 0;
        background-size: 100%;
        height: auto;
        padding-bottom: 6%;
    }

    .testo_evidenza {
        background-color: #dff2dd;
        font-size: 1.3vw;
        text-align: center;
        width: fit-content;
        border-radius: 21px;
        padding: 0.5%;
        padding-inline: 2%;
        margin-bottom: 3%;
        color: #20396d;
        font-weight: bold;

    }


    .offerta {
        width: 40%;
        margin-left: 5%;
        padding-top: 2%;
        font-weight: bold;
        font-size: 1.4vw;

    }



    .check {
        width: 4%;
        vertical-align: -webkit-baseline-middle;
        margin-bottom: 2%;
    }

    h1 {
        color: #20396d;
        font-size: 2.5vw;
        margin: 0 auto;
        font-weight: 800;
    }




    H3 {
        color: white;
        color: white;
        font-family: 'Poppins';
        font-size: 4.2vw;
        margin-top: -8%;
        margin-bottom: 0;

    }





    /**** F O R M *************/


    .top_form {
        text-align: center;
        color: white;
        font-weight: bold;
        background-color: #1d6364;
        font-size: 1.6vw;
        padding: 2%;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;

    }



    .testo_in_verde {
        background: #1d6364;
        padding: 1%;
        border-radius: 12px;
        color: white;
        font-weight: normal;
        font-size: 1.5vw;
        padding: 2%;
        width: fit-content;
        padding-bottom: 0px;
        margin-bottom: 5%;
    }





    /*************FASCIA 2***********/

    .fascia2 {
        width: 100%;
    }







    .fascia2 {
        background-color: #dff2dd;
        padding: 2%;
        border-radius: 20px;
        width: 80%;
        margin: 0 auto;
        margin-top: -1%;
    }

    .pannello_verde {

        display: flex;
    }


    .step1 {
        padding-bottom: 2%;
    }


    .ele * {
        display: block;
        margin: 0 auto;
    }

    .ele {
        text-align: center;
    }









    /*************FASCIA 3***********/

    .fascia3 {}

    .cont_fascia3 {
        display: flex;
        width: 80%;
        margin: 0 auto;
    }

    .due_sx,
    .due_dx {
        display: inline-block;
        width: 90%;
        margin: 2% auto;
        font-size: 1.2vw;
        text-align: center;
    }

    .due_dx {
        border: 1px solid gray;

        border-radius: 20px;
        font-size: 1.2vw;
        text-align: center;
        margin: 5% auto;
        width: 35%;
    }

    .due_dx h2 {
        font-size: 1.7vw;
    }

    .pan {
        border-top: 1px solid;
        width: 100%;
        margin: 0;
        display: flex;
        flex-wrap: wrap;

    }

    .pan div {
        width: 39%;
        text-align: left;
        border: 1px solid black;
        border-radius: 12px;
        margin: 5% auto;
        padding: 2%;
        font-size: 1.3vw;
        text-align: left;
        margin-top: 2%;
        margin-bottom: 2%;
        ;
    }

    .pan div b {
        display: block;
    }



    .cont_fascia5 {
        width: 70%;
        margin: 0 auto;
    }

    .ele2 {}









    /*************FASCIA 4***********/


    .fascia4 {
        background: #1d6364;
        width: 80%;
        border-radius: 40px;
        margin: 0 auto;
    }

    .cont_fascia4 {
        display: flex;
        color: white;

        margin-bottom: 2%;

    }






    .due_dx h1 {
        font-size: 4.5vw;
        ;
    }






    /************fascia5 */
    .fascia5 {

        margin: 0 auto;
        text-align: center;
        display: block;
        height: fit-content;
    }

    .cont_fascia5 {

        margin: 0 auto;
    }


    .testo .avanti {
        margin-left: 0;
        width: fit-content;
        border-radius: 0;
        padding-inline: 2%;
        margin-bottom: 2%;
    }

    .testo {
        font-weight: 400;
        font-size: 1.2vw;
        width: 54%;
    }

    .bol {
        width: 40%;
        margin: 4%;
        margin-left: -1%;
    }

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

        .fascia1 {
            background: url(img/MOBY-apertura.jpg) no-repeat;
            background-size: 100%;
            padding-bottom: 7%;
            padding-top: 76%;

        }

        .fascia2 {
            background-color: #dff2dd;
            padding: 2%;
            border-radius: 0px;
            width: 100%;
            margin: 0 auto;
            margin-top: 3%;
            padding-inline: 0;
        }

        .offerta {

            display: none;
        }



        .pagina {
            overflow-x: hidden;

        }

        .logo {
            margin: 0 auto;
            width: 47%;
        }

        body,
        html {

            background-position: -530px -122px;
        }

        .range-input {

            height: 5vw;
        }


        .range-input::-webkit-slider-thumb {

            height: 55px;
            width: 55px;
            border: 20px solid #20396d;
        }

        .logo {
            margin: 0 auto;
            width: 47%;
        }


        .pannello {
            width: 90%;
            margin: 0 auto;
            min-width: 0px;
            text-align: center;
            margin-top: 16vw;

        }

        h1 {
            font-size: 3.8vw;
            margin: 1%;
        }

        h2 {
            font-size: 3.8vw;
            margin: 1%;
        }

        .output {
            color: #20396d;
            margin-inline: 1%;
            width: 96%;
            font-size: 2.2vw;
        }

        .progress2 {
            display: block;
        }

        .progress {
            display: none;
        }

        .avanti {
            display: block;
            margin: 0 auto;
            position: static;
            margin: 3% auto !important;
            margin-bottom: 0px;
            font-size: 3vw;
            padding-inline: 6%;
        }

        .msg_datanascita,
        .msg_regione,
        .msg_professione,
        #nome,
        #cognome {
            font-size: 20px;
        }

        .pannello2 {
            display: block;
            width: 100%;
            margin: 0 auto;
            margin-top: 2%;
            position: relative;

            width: 90%;
            margin: 4% auto;
            min-width: 0;
            text-align: center;
        }

        .ele {
            margin: 4% auto;
            width: 90%;
            text-align: center;
            font-size: 4vw;
        }


        .ele b {

            font-size: 6vw;
        }

        .ele img {
            display: block;
            margin: 0 auto;
            width: 35%;
        }


        .ele .testo {
            width: 60%;
            /* float: right; */
            display: inline-block;
            font-size: 5vw;
            text-align: center;
        }

        .img1 {
            display: none;
        }

        .img2 {
            display: block !important;
            margin: 0 auto;
            width: 12%;
            vertical-align: top;
            margin: 1% auto;
        }

        .footer {
            min-width: 0;
            width: 95%;
            display: block;
            margin: 0 auto;
        }

        .footer p {
            text-align: center;
            width: 90%;
            margin: 0 auto;
            display: block;
        }



        .pannello_verde {
            display: flex;
            display: block;
        }


        .due_sx,
        .due_dx {
            display: inline-block;
            width: 100%;
            margin: 2% auto;
            font-size: 16px;
            text-align: center;
        }

        .cont_fascia3 {
            display: block;
        }

        h1 {
            font-size: 26px;
            margin: 4%;
        }

        .due_sx img {
            width: 100%;
            margin: 4% auto;
            margin: 4% auto;
        }

        .due_dx h2 {
            font-size: 22px;
            font-weight: bold !important;

        }

        .pan div {
            width: 44%;
            text-align: left;
            border: 1px solid black;
            border-radius: 12px;
            margin: 5% auto;
            padding: 2%;
            font-size: 16px;
            text-align: left;
            margin-top: 5%;
            margin-bottom: 2%;
        }



        .top_form {
            text-align: center;
            color: white;
            font-weight: bold;
            background-color: #1d6364;
            font-size: 25px;

        }


    }








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

        .logo {
            margin: 1% auto;
            width: 25%;
        }

        h1 {
            font-size: 24px;
            margin: 3%;
        }

        h2 {
            font-size: 15px;
            margin: 1%;
            margin-bottom: 3%;
        }

        .ele img {
            display: block;
            margin: 0 auto;
            width: 30%;
        }

        .top_form {

            font-size: 16px;

        }

        .range-input {

            height: 20px;
        }

        .range-input::-webkit-slider-thumb {

            height: 35px;
            width: 35px;
            border: 12px solid #20396d;
        }

        .output {
            color: #20396d;
            margin-inline: 1%;
            width: 96%;
            font-size: 5.2vw;
            margin-top: 5%;
        }

        .avanti {
            display: block;
            margin: 0 auto;
            position: static;
            margin: 6% auto !important;
            margin-bottom: 0px;
            font-size: 7vw;
            padding-inline: 6%;
        }


        #nome,
        #cognome {
            font-size: 20px;
            display: block;
            margin: 2% auto;
            width: 90%;
        }

        #msg_consenso,
        #msg_telefono,
        #msg_telefono_doppio,
        #msg_email,
        #msg_email_doppia,
        .msg_datanascita,
        .msg_regione,
        .msg_professione,
        #msg_nome {
            text-align: center !important;
            width: 90% !important;
            margin: 0 auto !important;
            font-size: 14px !important;
            ;
        }

        .step7 .avanti {
            display: block;
            margin: 0 auto;
            position: static;
            margin: 6% auto !important;
            margin-bottom: 0px;
            font-size: 18px !important;
            padding: 2%;
            padding-inline: 9%;
            width: fit-content;
        }

        #regione,

        #anno,
        #email,
        #telefono {
            font-size: 1vw;
            margin: 1%;
            font-size: max(20px, 1.2vw);
            color: #484848;
            padding: 3%;
            MARGIN-TOP: 0PX;
            width: 97%;
        }

        .riga_valori {

            display: none;

        }

        .steps {
            width: 109.5%;
            margin-left: 6%;
        }

        .logo {
            width: 45% !important;
        }


        .your-class {
            display: none;
        }

        .your-class-mobile {
            display: block;
        }

        .ele {
            margin: 4% auto;
            width: 70%;
            text-align: center;
            font-size: 4vw;
            margin-bottom: 8%;
        }

        .ele b {
            font-size: 18px;
        }

        .bottone {
            background-color: #ff8100;
            text-align: center;
            color: white;
            width: fit-content;
            padding: 5px;
            height: auto;
            font-weight: 600;
            padding-inline: 10px;
            cursor: pointer;
            border-radius: 5PX;
            position: static;
            margin: 0 auto;
            font-size: 25px;
            text-transform: uppercase;
            margin-top: 4%;
            margin: 4% auto;

        }

        .due_dx h1 {
            font-size: 40px;
        }

        .due_dx h2 {
            font-size: 21px;
            font-weight: bold !important;
            margin-bottom: 0;
        }

        .pan div {
            width: 37%;
            text-align: left;
            border: 1px solid black;
            border-radius: 12px;
            margin: 5% auto;
            padding: 3%;
            font-size: 17px;
            text-align: left;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        .pan div b {
            display: block;
            font-size: 20px;
        }

        .due_sx,
        .due_dx {
            display: inline-block;
            width: 100%;
            margin: 0% auto;
            font-size: 16px;
            text-align: center;
        }

        .fascia4 h1 {
            font-size: 23px !important;
            padding-inline: 11%;
            padding-top: 6% !important;

        }

        .fascia4 {
            padding-inline: 0;
            border-radius: 0px;
            width: 100%;
            margin-top: 4%;

        }

        .img_persone {
            display: none;
        }

        .img_persone_mob {
            display: block !important;
            display: none;
            height: fit-content;
            width: 99%;
            margin: 2% auto;
        }

        .testo {
            font-weight: 400;
            font-size: 17px;
            width: 90%;
            margin: 0 auto;
            text-align: left;
        }

        .fascia5 .bottone {
            margin-top: 13%;

        }

        .footer div {
            width: 87% !important;
            ;
            margin: 0 auto !important;
            ;
            font-size: 9px !important;
            ;
            padding: 4% !important;
            ;
        }

        .footer {
            text-align: left !important;
            ;
            padding-top: 1% !important;
            /* margin-top: 9%; */
            padding-inline: 0 !important;
            width: 100% !important;
        }

        .bol {
            width: 90%;
            margin: 4%;
            margin-left: -1%;
        }


        #regione,
        #professione,
        #anno,
        #email,
        #telefono,
        #prof_dip,
        #prof_pensionato,
        #tipo_contratto,
        #totale_pensione,
        #cessione,
        #anni_cessione,
        #cap_comune {
            margin: 1%;
            font-size: 4vw;
            color: #484848;
            padding: 1%;
            MARGIN-TOP: 0PX;
            width: 95%;
            margin: 0 auto;
            margin-top: 1%;
            padding: 2% 0%;
        }

        #email {
            font-size: 20px;
            display: block;
            margin: 2% auto;
            width: 90%;
        }


        .step7 .avanti {
            display: block;
            margin: 0 auto;
            position: static;
            margin: 6% auto !important;
            margin-bottom: 0px;
            font-size: 17px !important;
            padding: 2%;
            padding-inline: 10%;
            width: fit-content;
        }

    }

    }