/*per "fluidificare" il layout della pagina il più possibile
cerchiamo di utilizzare le percentuali per: width, margin e padding.
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
PER TUTTI I DISPOSITIVI - obiettivo del sito è di risultare leggibile, 
su un'unica colonna. Il sito, così sarà accessibile per tutti i dispositivi
vecchi e nuovi ... con qualche differenza ... ma ce lo aspettiamo*/


/*per evitare lo scroll orizzontale a seguito inserimento colore sfondo
sezione paragrafi ... vedi in seguito*/
html,
body {
    overflow-x: hidden;
    margin: 0;
}


body {
    color: grey;
    font-size: 17px;
    font-family: Raleway, Arial;
}

.focus {
    margin-left: 5px;
    margin-right: 5px;
}


/* per eventuali personalizzazione link
    /* unvisited link 
    a:link {
    color: black;
    text-decoration: none;
    }
    
    /* visited link 
    a:visited {
    color: grey;
    }
    
    /* mouse over link 
    a:hover {
    color: #00aeef;
    text-decoration: underline;
    }
    
    /* selected link 
    a:active {
    color: grey;
    }
    fine eventuali personalizzazioni link*/


/*con questa classe blocco la testatina comprendente il logo*/
.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/*con questa classe blocco l'immagine "lista" nella sezione vantaggi*/
.lista {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/*inizio sezione bottoni call to action homepage*/
/*blocco div immagini bottone a inizio sito*/
#images {
    text-align: center;
    margin-top: 40px;
}


img.botton {
    margin: 10px 10px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

img.botton {
    opacity: 1;
    filter: alpha(opacity=100);
}


img.botton:hover {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

/* fine sezione bottoni call to action */


/*blocco div immagini bottone prima del modulo contatti*/
.images {
    text-align: center;
    margin-top: 40px;
}


h2,
h3,
h4 {
    color: #00aeef;
    text-align: center;
    font-weight: lighter;
}


h1 {
    font-size: 35px;
    text-align: center;
    color: #FFB71E;
}


h2 {
    font-size: 27px;
}


h3 {
    font-size: 24px;
}


h5 {
    font-size: 18px;
    text-align: center;
}


h4 {
    font-size: 18px;
}


/*instruzioni per linea di separazione orizzontale*/
.linea {
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}


#wrapper {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px; /* Spigoli arrotondati */
    padding: 10px; /* Margine interno dal bordo del div */
    max-width: calc(100% - 60px); /* Larghezza massima del div */
    overflow-x: hidden; /* Nasconde eventuali contenuti che superano la larghezza del div */
    margin-right: 20px;
    margin-left: 20px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}

/*l'altezza dell'immagine inserita in testata è della
    stessa altezza della sezione "wrapper.
    per aumentare o diminuire la distanza tra l'h1
    sotto l'immagine ed il primo h2 delle vaie pag. intervengo
    sul wrapper - vedi QUERY MULTIMEDIALI*/



#container {
    width: 100%;
    height: auto;
    max-width: 1870px;
    /* se inserisco "auto", relativamente a "width" ed a "height" la larghezza e
    l'altezza dell'area del contenuto viene decisa dal browser in automatico */
    /*  margin: 1.25em auto;  1.25em = 20px*/
    /* primo valore: marg. sup. + inf.; secondo valore: marg. sin. + dest.(auto)
    per far si che la pag. sia centrata orizzontalmente nel browser*/
   /* padding: 0.625em 0.625em 0em 0.625em;*/
    background-color: #FFB71E;
}

/*il padding è assegnato in senso orario: alto, des, sin, basso */


img {
    max-width: 100%;
    height: auto;
}


/*anche le immagini sono "fluide" con il valore in %*/
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*con questa classe blocco l'immagine di testata*/


/*se voglio posizionare le immagini della pagina a sinistra
    img.left {
    max-width: 100%;    
    float: left;
    margin: 10px 10px 10px 10px;
    }
    */


/*SPECIFICHE MENU' NAVIGAZIONE*/
.topnav {
    overflow: hidden;
    background-color: #EEEEEE;
    margin-bottom: 20px;
}

.topnav a {
    float: left;
    display: block;
    color: grey;
    text-align: center;
    padding: 14px 16px;
    margin-left: 30px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #bec0c0;
    color: black;
}

.topnav .icon {
    display: none;
}

/*FINE SPECIFICHE MENU' NAVIGAZIONE*/


/*contento giocare sulla percentuale per allargare o stringere
    l'area del contenuto. Il "content" è il 90% del 100% che è il container*/
#content {
    width: 90%;
    margin: 0 auto;
    padding-top: 10px;
    height: auto;
}


/*contento giocare sulla percentuale per allargare o stringere
    l'area del contenuto. l'"inner content" è IL 70% DEL 100% che è il container*/
#innerContent {
    width: 70%;
    padding-top: 10px;
    margin: 0 auto;
    padding-top: 10px;
    height: auto;
    text-align: justify;
}

/*fine per larghezza contenuto*/


/*sezione contatti inserisco immagine sfondo viola*/
#contatti {
    background-color: #FFB71E;
    width: 100%;
    height: auto;
}


/*parametri per estendere il background div a tutto schermo
    vedi: https://css-tricks.com/full-browser-width-bars/ */
.paragrafo1 {
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    background: #dedede;
}


/*parametri per estendere il background div a tutto schermo*/
.paragrafo3 {
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    background: #dedede;
}



/*Sezione inizio form contatti*/
.contenitore {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea,
#contact button[type="submit"] {
    font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
    background: #F9F9F9;
    padding: 25px;
    margin: 20px 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
    display: block;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 10px;
}

#contact h4 {
    margin: 5px 0 15px;
    display: block;
    font-size: 13px;
    font-weight: 400;
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 90%;
    padding: 0;
    width: 90%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
    width: 100%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
    -webkit-transition: border-color 0.3s ease-in-out;
    -moz-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    border: 1px solid #aaa;
}

#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}

#contact button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #00aeef;
    color: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    font-size: 15px;
}

#contact button[type="submit"]:hover {
    background: #43A047;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
    text-align: center;
}

#contact input:focus,
#contact textarea:focus {
    outline: 0;
    border: 1px solid #aaa;
}

::-webkit-input-placeholder {
    color: #888;
}

:-moz-placeholder {
    color: #888;
}

::-moz-placeholder {
    color: #888;
}

:-ms-input-placeholder {
    color: #888;
}

/*fine sezione form contatti*/



/*aggiungiamo una sezione servizi, sotto contenuto principale
    all'interno della quale inseriamo icone servizi*/
#servizi {
    width: 100%;
    height: auto;
    text-align: center!important;
    color: grey;
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    background-color: #EEEEEE;
    /*aggiungiamo un margine inferiore per creare un po'
    di spazio dal paragrafo successivo*/
   /* margin-bottom: 50px;*/
}
/*parametri per estendere il background div a tutto schermo*/

/*aggiungiamo una sezione prezzi, sotto contenuto principale
    all'interno della quale inseriamo icone prezzi*/
    #prezzi {
        width: 100%;
        height: auto;
        text-align: center!important;
        color: grey;
        margin: 0 -9999rem;
        /* add back negative margin value */
        padding: 0.25rem 9999rem;
        background-color: #EEEEEE;
        /*aggiungiamo un margine inferiore per creare un po'
        di spazio dal paragrafo successivo*/
        margin-bottom: 50px;
    }

/*parametri per estendere il background div a tutto schermo*/

.icone_servizi {
    text-align: justify; /* Allinea i testi in justify */
}

.icone_servizi img.servizi {
    height: 150px;
    width: 150px;
    margin: 10px auto; /* Centra l'immagine orizzontalmente */
    display: block; /* Assicura che l'immagine sia visualizzata come blocco per centrarla */
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 10px; /* Spigoli arrotondati */

}

img.servizi {
    opacity: 1;
    filter: alpha(opacity=100);
}

img.servizi:hover {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

/*prezzi*/
.icone_prezzi {
    text-align: justify; /* Allinea i testi in justify */
}

.icone_prezzi img.prezzi {
    height: 150px;
    width: 150px;
    margin: 10px auto; /* Centra l'immagine orizzontalmente */
    display: block; /* Assicura che l'immagine sia visualizzata come blocco per centrarla */
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 10px; /* Spigoli arrotondati */

}

img.prezzi {
    opacity: 1;
    filter: alpha(opacity=100);
}

img.prezzi:hover {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

/* FINE SPECIFICHE IMMAGINE SERVIZI */



/*paragrafo testo servizi*/
.paragrafo {
    margin: 5px;
}

/*fine paragrafo testo servizi*/



/*bottone servizi*/
.btn {
    background: white;
    background-image: -webkit-linear-gradient(top, #00aeef, #157fbd);
    background-image: -moz-linear-gradient(top, #00aeef, #157fbd);
    background-image: -ms-linear-gradient(top, #00aeef, #157fbd);
    background-image: -o-linear-gradient(top, #00aeef, #157fbd);
    background-image: linear-gradient(to bottom, #00aeef, #157fbd);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0px;
    font-family: raleway;
    color: #ffffff;
    font-size: 14px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

.btn:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

/*fine bottone servizi*/



/*inseriamo piccole sezioni rispettivamente a sinistra e
    a destra dell'immagine vantaggi*/
#vantaggi {
    width: 100%;
    height: auto;
    text-align: center;
    /*aggiungiamo un margine inferiore per creare un po'
    di spazio dal paragrafo successivo*/
    margin-bottom: 50px;
}

.vantaggi {
    width: 33%;
    float: left;
    padding-bottom: 10px;
}


/*aggiungiamo due sezioni marketing strategico e operativo, sotto contenuto
    principale all'interno della quale inseriamo icone servizi*/

#focus_servizio_1 {
    width: 100%;
    height: auto;
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    /*aggiungiamo un margine inferiore per creare un po'
    di spazio dal paragrafo successivo*/
    margin-bottom: 50px;
}

/*parametri per estendere il background div a tutto schermo*/
.focus_servizio_1 {
    width: 47%;
    margin-right: 1px;
    margin-left: 2px;
    float: left;
    padding-bottom: 20px;
}



.img_strategico {
    width: 50%;
    float: right;
    padding-bottom: 20px;
}


#focus_servizio_2 {
    width: 100%;
    height: auto;
    margin: 0 -9999rem;
    /* add back negative margin value */
    padding: 0.25rem 9999rem;
    /*aggiungiamo un margine inferiore per creare un po'
    di spazio dal paragrafo successivo*/
    margin-bottom: 50px;
}

/*parametri per estendere il background div a tutto schermo*/
.focus_servizio_2 {
    width: 47%;
    float: right;
    padding-bottom: 20px;
    margin-right: 1px;
    margin-left: 1px;
}

.img_operativo {
    width: 50%;
    float: left;
    padding-bottom: 20px;
}




/*aggiungiamo una sezione risorse, sotto contenuto principale*/
#risorse {
    width: 100%;
    height: auto;
    background-color: #EEEEEE;
    text-align: center;
    color: grey;
    font-size: small;
}



/*rendiamo i "3 box" centrati con una istruzione float
    a sinistra e massimizzando le areee con 33%*/

section {
    width: 33%;
    float: left;
    padding-bottom: 10px;
}




/*ricoloriamo h1 della sezione "risorse"*/
h2#risorse_marketing {
    color: #00aeef;
    font-size: 30px;
    text-align: center;
    background-color: white;
    width: 100%;
    text-align: center;
}



/*ricoloriamo h3 della sezione "informazioni"*/
h3#informazioni {
    color: #00aeef;
    font-size: 25px;
    text-align: center;
    background-color: #F0F0F0;
    width: 100%;
    text-align: center;
    border-radius: 10px; /* Spigoli arrotondati */
    padding: 10px; /* Margine interno dal bordo del div */
    max-width: calc(100% - 20px); /* Larghezza massima del div */
    overflow-x: hidden; /* Nasconde eventuali contenuti che superano la larghezza del div */
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}



/*se vogliamo aggiungere aggiungiamo anche
    una nuova sezione "footer widget" ...
    
    #footer-widget{
    width:100%;
    height:auto;
    background-color: #FFFF99;
    color: grey;
    text-align: center;
    font-size: small;
    }
    .......................................*/



#footer {
    text-align: center;
    color: grey;
    clear: both;
    margin-top: 1.25em;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 10px; /* Spigoli arrotondati */

}

/*la propriet� clear indica che il footer non deve "fluire" intorno
    all'elemento flottante ma essere visualizzato dopo l'elemento*/



.prova2 {
    font-size: x-small;
}



/*footer*/

#footer-wrapper {
    width: 100%;
    height: 150px;
    background-color: #EEEEEE;
}


/*specifiche per menù responsive*/

@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

}

/*specifiche per menù responsive*/


/*Da qui in poi sfrutteremo le QUERY MULTIMEDIALI per per
    definire ciascun breakpoint della pagina ... ovvero ciascuna
    larghezza per la quale al contenuto gioverebbe un aggiustamento*/

/*ottimizzazione "budget Android" - 240*/
@media only screen and (max-width: 240px) {


    body {
        color: GREY;
        font-size: 80%;
        font-family: Raleway, Arial;
    }



    h1 {
        font-size: 16px;
    }


    h2 {
        font-size: 15px;
        color: #009bcd;
    }


    h3 {
        font-size: 14px;
        color: #009bcd;
    }



    #wrapper {
        width: 100%;
        height: auto;
        background-color: white;
    }


    #content {
        width: 90%;
        margin: 0 auto;
        padding-top: 10px;
        height: auto;
    }


    #innerContent {
        float: none;
        width: 900%;
        padding-top: 10px;
        text-align: justify;
        background-color: #FFB71E;

    }



    #sidebar {
        display: none;
    }


    /*stili per la navigazione*/
    nav {
        width: 95%;
        padding: 5px;
        position: absolute;
        top: 0px;
        right: 0px;
    }


    nav a {
        font-size: 50%;
        color: #009cda;
        padding-right: 10px;
        padding-left: 2px;
    }


    /*footer*/
    #footer-wrapper {
        width: 100%;
        height: 120px;
        background-color: #EEEEEE;
    }

    /*per centrare i 2 box sopra il footer nei dispositivi più piccoli*/
    section {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }


    /*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
    img.left {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    /*le icone sercìvizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .servizi {
        width: 100%;
        padding-bottom: 10px;
    }
    .prezzi {
        width: 100%;
        padding-bottom: 10px;
    }

    /*i blocchi focus servizi 1/2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .marketing_strategico {
        width: 100%;
        padding-bottom: 10px;
    }

    .marketing_operativo {
        width: 100%;
        padding-bottom: 10px;
    }

    .img_strategico {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }

    .img_operativo {
        width: 100%;

        padding-bottom: 10px;
    }

    /*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .icone_servizi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }
    .icone_prezzi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }
    .vantaggi {
        width: 100%;
        padding-bottom: 10px;
    }

    /*elimino immagine "lista" sui dispositivi più piccoli*/
    .lista {
        display: none
    }
}







/*ottimizzazione per iPhone 5 portrait � width: 320px*/
@media only screen and (max-width: 320px) {

    /*con questa classe blocco la testatino comprendente il logo*/
    .logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        font-size: 18px;
    }

    h2 {
        font-size: 18px;
        color: #009bcd;
    }


    h3 {
        font-size: 16px;
        color: #009bcd;
    }


    #wrapper {
        width: 100%;
        height: auto;
        background-color: white;
    }


    #content {
        width: 90%;
        margin: 0 auto;
        padding-top: 30px;
        height: auto;
    }


    #innerContent {
        float: none;
        width: 90%;
        padding-top: 10px;
        text-align: justify;
    }


    #sidebar {
        display: none;
    }


    /*stili per la navigazione*/

    nav {
        width: 95%;
        padding: 5px;
        position: absolute;
        top: 2px;
        right: 0px;
    }

    nav a {
        font-size: 40%;
        color: #009cda;
        padding-right: 0px;
        padding-left: 15px;
    }


    /*footer*/

    #footer-wrapper {
        width: 100%;
        height: 120px;
        background-color: #EEEEEE;
    }


    /*per centrare i 2 box sopra il footer nei dispositivi più piccoli*/
    section {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }


    /*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
    img.left {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }



    section {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }


    /*le icone servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .servizi {
        width: 100%;
        padding-bottom: 10px;
    }

    .prezzi {
        width: 100%;
        padding-bottom: 10px;
    }
    /*i blocchi focus servizi 1/2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .focus_servizio_1 {
        width: 100%;
        padding-bottom: 10px;
    }

    .focus_servizio_2 {
        width: 100%;
        padding-bottom: 10px;
    }

    .img_strategico {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }

    .img_operativo {
        width: 100%;
        padding-bottom: 10px;
    }

    /*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .icone_servizi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }
    .icone_prezzi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }

    .vantaggi {
        width: 100%;
        padding-bottom: 10px;
    }

    /*elimino immagine "lista" sui dispositivi più piccoli*/
    .lista {
        display: none
    }
}



/*ottimizzazione per iPhone (landscape)*/
@media only screen and (min-width: 321px) and (max-width: 479px) {

    /*con questa classe blocco la testatino comprendente il logo*/
    .logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        font-size: 18px;
    }


    h2 {
        font-size: 16px;
        color: #009bcd;
    }


    h3 {
        font-size: 16px;
        color: #009bcd;
    }



    #wrapper {
        width: 100%;
        height: auto;
        background-color: white;
    }



    #content {
        width: 90%;
        margin: 0 auto;
        padding-top: 10px;
        height: auto;
    }


    #innerContent {
        float: none;
        width: 90%;
        padding-top: 10px;
        text-align: justify;
    }


    #sidebar {
        display: none;
    }


    /*stili per la navigazione*/
    nav {
        width: 50%;
        padding: 5px;
        position: absolute;
        top: 10px;
        right: 0px;
    }


    nav a {
        font-size: 50%;
        color: #009cda;
        padding-right: 10px;
        padding-left: 2px;
    }



    /*footer*/
    #footer-wrapper {
        width: 100%;
        height: auto;
        background-color: #EEEEEE;
    }


    /*per centrare i 2 box sopra il footer nei dispositivi più piccoli*/
    section {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }

    /*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
    img.left {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }



    /*le icone sercìvizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .servizi {
        width: 100%;
        padding-bottom: 10px;
    }
    .prezzi {
        width: 100%;
        padding-bottom: 10px;
    }
    /*i blocchi focus servizio 1 e focus servizio 2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .focus_servizio_1 {
        width: 100%;
        padding-bottom: 10px;
    }

    .focus_servizio_2 {
        width: 100%;
        padding-bottom: 10px;
    }

    .img_strategico {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }

    .img_operativo {
        width: 100%;
        padding-bottom: 10px;
    }

    /*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .icone_servizi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }

    .vantaggi {
        width: 100%;
        padding-bottom: 10px;
    }

    /*elimino immagine "lista" sui dispositivi più piccoli*/
    .lista {
        display: none
    }
}





/*ottimizzazione iPhone 6-8 Plump landscape · width: 736px*/
@media only screen and (min-width: 480px) and (max-width: 736px) {

    h1 {
        font-size: 22px;
    }


    h2 {
        font-size: 20px;
        color: #009bcd;
    }


    h3 {
        font-size: 16px;
        color: #009bcd;
    }


    #wrapper {
        width: 100%;
        height: auto;
        background-color: white;
    }


    #content {
        width: 90%;
        margin: 0 auto;
        padding-top: 10px;
        height: auto;
    }

    #innerContent {
        float: none;
        width: 90%;
        padding-top: 10px;
        text-align: justify;
    }


    #sidebar {
        display: none;
    }


    /*stili per la navigazione*/
    nav {
        width: 40%;
        padding: 5px;
        background-color: white;
        position: absolute;
        top: 10px;
        right: 50px;
    }


    nav a {
        font-size: 80%;
        color: #00aeef;
        padding-right: 0px;
        padding-left: 30px;
    }


    /*footer*/
    #footer-wrapper {
        width: 100%;
        height: auto;
        background-color: #EEEEEE;
    }

    section {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }

    /*posiziono le immagini della pagina al centro per i dispositivi più piccoli*/
    img.left {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /*le icone sercvizi si posizionano una sopra l'altra sui dispositivi più
    piccoli*/
    .servizi {
        width: 100%;
        padding-bottom: 10px;
    }

    .prezzi {
        width: 100%;
        padding-bottom: 10px;
    }



    /*i blocchi focus servizi 1/2 si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .focus_servizio_1 {
        width: 100%;
        padding-bottom: 10px;
    }


    .focus_servizio_2 {
        width: 100%;
        padding-bottom: 10px;
    }


    .img_strategico {
        width: 100%;
        float: left;
        padding-bottom: 10px;
    }


    .img_operativo {
        width: 100%;
        padding-bottom: 10px;
    }


    /*i blocchi vantaggi e servizi si posizionano una sopra l'altra sui dispositivi più piccoli*/
    .icone_servizi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }
    .icone_prezzi {
        display: block;
        text-align: justify; /* Allinea il testo in modo giustificato */
        margin-bottom: 20px; /* Aggiungi un margine inferiore per separare gli elementi */
    }

    .vantaggi {
        width: 100%;
        padding-bottom: 10px;
    }
}




/*iPad portrait · width: 768px e iPad landscape · width: 1024px*/
@media (min-width: 768px) and (max-width: 1024px) {
    #wrapper {
        width: 100%;
        height: auto;
        background-color: white;
    }

    /*contento
    giocare sulla percentuale
    per allargare o stringere
    l'area del contenuto*/
    #content {
        width: 90%;
        margin: 0 auto;
        padding-top: 10px;
        height: auto;
    }


    /*ALLARGHIAMO LA PERCENTUALE DI SPAZIO DEDICATA AL CONTENUTO*/
    #innerContent {
        width: 100%;
        padding-top: 10px;
        margin: 0 auto;
        padding-top: 10px;
        height: auto;
        text-align: justify;
    }

    /*fine nuove specifiche per contenuto*/


    /*paragrafo testo servizi*/
    .paragrafo {
        margin: 5px;
        height: 120px;
    }

    /*fine paragrafo testo servizi*/

    /*stili per la navigazione*/
    nav {
        width: 30%;
        padding: 5px;
        background-color: white;
        position: absolute;
        top: 10px;
        right: 50px;
    }


    nav a {
        font-size: 90%;
        color: #00aeef;
        padding-right: 0px;
        padding-left: 30px;
    }
}