body {
     margin: 0;
     padding: 0;
     font-family: 'Open Sans', sans-serif;
     font-size: 17px;
     color: #4c514a;
     line-height: 1.6;
     /* background: #f2f2f2; */
}

.logo {
     width: 30%;
}

a {
     text-decoration: none;
}

.header {
     background: #20396d;
     line-height: 0;
     padding: 3px 0;
}

.header-dentro {
     width: 800px;
     margin: 0 auto;
     text-align: left;
}

h1 {
     font-family: 'Poppins';
     text-align: left;
     font-size: 28px;
     line-height: 1.2;
     color: black;

}

h2 {
     font-family: 'Poppins';
     font-size: 25px;
     color: black;
     font-weight: 400;
     line-height: 1.2;
}

.riga_grigia {
     background: #f7f7f7;
     padding: 1%;
     margin: 1%;
     margin-inline: 0px;
}

.advertorial {
     font-size: 12px;
     width: 100%;
     text-align: center;
     color: #afafaf
}

.div_totale {
     width: 800px;
     margin: 0 auto;

}

.pagina_bianca {
     width: 60%;
     margin: 0 auto;
     background: white;
     padding-top: 1%;
     padding-bottom: 2%;
}

.div_sinistra {
     width: 60%;
     float: left;
     padding-right: 5%;
     padding-bottom: 2%;
}

hr {
     border: 0;
     border-top: 1px solid black;
}

.div_foto {
     margin: 0 auto;
     padding: 1% 0%;
}

.foto1 {
     width: 100%;
}

blockquote {
     background-color: #eaeaea;
     padding: 10px 20px;
     margin: 0 0 20px;
     border-left: 5px solid #093368;
}

.pulsante {
     cursor: pointer;
     letter-spacing: 0.5px;
     font-family: sans-serif;
     background-color: #ff8100;
     color: #fff;
     font-family: sans-serif;
     font-size: 22px;
     margin: 20px 0 35px 0;
     padding: 10px;
     /* border-radius: 4px; */
     text-align: center;
     font-weight: bold;
     border: 2px solid #ff8100;
}

.pulsante:hover {
     background-color: WHITE;
     color: #ff8100;
     border: 2px solid #ff8100;
}

.pulsante2 {
     cursor: pointer;
     letter-spacing: 0.5px;
     font-family: sans-serif;
     background-color: #ff8100;
     color: #fff;
     font-size: 22px;
     margin: 20px 15px 35px 0;
     border: 2px solid #ff8100;
     padding: 10px;
     font-weight: bold;
     ;
     text-align: center;
     display: inline-flex;
}

.pulsante2:hover {
     background-color: WHITE;
     color: #ff8100;
     border: 2px solid #ff8100;
}

.div_form_commenti {
     width: 100%;
     background-color: #f5f5f5;
     border: 1px solid #eaeaea;
     border-radius: 4px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
     margin-bottom: 20px;
}

#form_commenti {
     padding: 10px;
     font-size: 15px;
}

label {
     font-weight: bold;
}

::placeholder {
     font-size: 14px;
}

.nome {
     width: 96%;
     border-radius: 4px;
     height: 30px;
     border: 1px solid #eaeaea;
     margin-top: 10px;
     margin-bottom: 10px;
     padding: 6px 12px;
}

.msg {
     width: 96%;
     resize: none;
     border-radius: 4px;
     height: 60px;
     border: 1px solid #eaeaea;
     margin-top: 10px;
     padding: 6px 12px;
}

.div_commenti {
     padding-top: 2%;
}

.testo_commenti {
     width: 85%;
     padding-left: 2%;
     display: inline-block;
     vertical-align: top;
}

.nome_commenti {
     font-weight: bold;
     color: #093368;
}

.div_pulsanti {
     margin-left: 10%;
}

.pulsanti {
     width: 20px;
     margin-right: 1%;
}

.div_destra {
     width: 34%;
     display: inline-block;
     padding-left: 1%;
}

#a1,
#a2 {
     width: 17px;
     height: 17px;
}

.div_arancione {
     background: #093368;
     border-radius: 4px;
}

.testo_div_arancione {
     color: white;
     font-size: 22px;
     line-height: 1.2;
     padding: 10px 30px;
}

.div_verde {
     background: #eaeaea;
     border-radius: 4px;
     line-height: 1.5;
     color: #4c514a;
}

.testo_div_verde {
     font-size: 21px;
     line-height: 1.2;
     padding: 10px 10px;
}

.testo_step {
     line-height: 1.5;
}

.separatore_vuoto {
     margin: 30px;
}

.fadeIn {
     animation-duration: 1s;
}

.footer {

     background: #093368;
     color: #fff;
     width: 100%;
     padding: 1% 0;
     display: table;
     text-align: center;
     font-size: 13px;
}

.testo_footer {
     width: 96%;
     margin: 0 auto;
}

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

     .div_totale {
          width: 90%;
          margin: 0 auto;
          padding-inline: 2%;

     }

     .logo {
          width: 20%;
          margin-left: 1%;
     }

     .pagina_bianca {
          width: 70%;
     }

     .header-dentro {
          width: 100% !important;
     }
}

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

     .head .nome,
     .msg {
          width: 97%;
     }

     .separatore_foto {
          display: none;
     }
}

@media only screen and (max-width : 550px) {
     .advertorial {
          font-size: 3vw;

     }

     .pulsante2 {
          cursor: pointer;
          letter-spacing: 0.5px;
          font-family: sans-serif;
          background-color: #ff8100;
          color: #fff;
          font-size: 22px;
          margin: 1px 15px 35px 0;
          border: 2px solid #ff8100;
          padding: 10px;
          font-weight: bold;
          text-align: center;
          display: inline-flex;
          margin-bottom: 4%;
          margin-top: 2%;
     }

     .div_foto {
          width: 100%;
          padding: 0px 0px 10px 0px;
     }

     .logo {
          width: 40%;
          margin-left: 4.5%;

     }

     .pagina_bianca {
          width: 100%;
     }

     .nome,
     .msg {
          width: 94%;
     }

     .mappa,
     table {
          width: 80% !important;
          margin: 0 auto !important;
          display: block !important;
     }


     .testo_commenti {
          width: 100%;
          padding-left: 0%;
          display: inherit;
     }

     .div_pulsanti {
          margin-left: 0%;
     }
}

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

     .nome,
     .msg {
          width: 91%;
     }
}