*{
    font-family: 'Roboto Condensed', sans-serif; /* Cambio font */

}
/* Selettore di Tipo */
body{
    margin-left: 20px;
    color: rgb(74, 96, 192) !important; /*Colore*/
}

.header-top {
    display: flex;
    padding: 8px;
    justify-content: space-between;
    color: white;
    font-size: 16px;
    text-align: center;
}
.header-top-icone{
    box-sizing: border-box;
    align-self: center;
}


.header-contatti :hover {
    background-color:rgb(74, 96, 192);
    color: white !important;
    transition: all 0.6s;
    border: 1px solid #032e7c; /*bordo della casella*/
    border-radius: 5px;
}
   
.header-menu{  
    text-align: center;
}

header{
    
    justify-content: space-between;
    position: sticky !important;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.61);
   /* padding: 10px 10px;*/
    width: 100%;
    padding: 10px;
    /*margin-left: 240px;
    margin-right: 250px;*/
    text-decoration: none;
    box-sizing: border-box;
    z-index: 99999;
}


/* Mi riferisco a tutti gli elementi navMenu del progetto*/
nav {
    text-align: center; /*allineamento al centro*/ 
    /*posiziono il menu con allineamento centrale rispetto alla header*/
    align-self: center;
    padding-bottom: 5px;
    
}

nav a {
    text-transform: uppercase;    /* Carattere stampatello maiuscolo del menu di navigazione*/
    /* TOP  RIGHT  BOTTOM  LEFT*/
    padding:5px 25px 5px 25px;
    text-align: center;
    border-right: 1px solid #e5e7ee;
   /* border-radius: 5px;*/
}

nav a:hover {
    background-color:rgb(74, 96, 192);
    color: white !important;
    transition: all 0.6s;
    border: 1px solid #032e7c !important; /*bordo della casella*/
    border-radius: 5px;
}


.hamburger {
    display: none;
}


a {
    color: rgb(74, 96, 192) !important; /*Colore*/
    text-decoration: none !important;  /* Elimina la sottolineatura del link*/
}
p {
    color: rgb(74, 96, 192); /*Colore*/ 
}
.intestazione {
    display: flex;
    padding: 10px 10px;
    margin-left: 240px;
    margin-right: 250px;
    text-decoration: none;
    border-top: 1px solid #032e7c;
}
.intestazione .intestazione-destra{
    flex: 1;
    text-align: left; 
    text-decoration: none;
}
.intestazione .soloIcone{
    
    text-align: right; 
    text-decoration: none;
}
.intestazione .intestazione-colonna{
    flex: 1;
    text-align: center; 
    text-decoration: none;
}
.intestazione .intestazione-colonna img{
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
}


.intestazione  h1 {
    color: rgb(74, 96, 192);
    text-transform: uppercase;
    text-align: center;
    /*display: inline-block;*/

}
.sfondo {
    height: 400px;
    /*margin-left: 240px;
    margin-right: 250px;*/
    background-image: url("../img/sfondo.jpg");
    background-position: center; /* Posizione centrale dell'img di sfondo*/
    background-size: cover; /* Grandezza dell'immagine di sfondo */

}
.Testo{
    padding:  10px 250px 10px 240px;
    text-align: center;
    font-size: xx-large;
}
.Testo-Descrittivo{
    padding:  2px 250px 2px 240px;
    text-align: center;
    font-size: x-large;
}

.Testo-Descrittivo p  span{
    font-style: italic;
    text-decoration:underline;
}
.Testo a {
    color: rgb(74, 96, 192);
    text-transform: uppercase;
    border: 1px solid rgb(74, 96, 192);  /*bordo della casella*/
    padding: 10px 30px;           /*distanza della linea tra il lato alto, basso, destro e sinistro all'interno del testo*/   
    margin-top: 10px;             /* tra la linea della casella e il testo superiore (perchè uso top, ma potrei usare botton, left etc) esterno alla  casella*/
    display: inline-block;
    border-radius: 5px;
}
.Testo a:hover {
    background-color: rgb(74, 96, 192);
    color: white;
    transition: 0.6s;

}

/* Mi riferisco al primo contenitore box */
.contenitore_box {
    display: flex;
    max-width: 1300px;
    margin: auto;
    padding:  5px 250px 5px 240px; 
    color: rgb(74, 96, 192);   
}
.contenitore_box H2 {
    text-align: center;  
}

/* mi riferisco ad un singolo box
contentuo in conteitore box1 */
.contenitore_box .singolo_box{
    flex: 1;
    text-align: center; 
    padding: 10px; 
    margin-left: 10px;
    border-radius: 2%;
    /*background-color: rgb(234, 236, 243);*/
    
}

.contenitore_box .singolo_box h2:hover{
    color: rgb(231, 105, 105);
    transition: 0.6s;
    
}

.contenitore_box .singolo_box .immagine img{
    width: 40%;
    padding: 2px;
    box-sizing: border-box;  
    object-fit: cover; 
}

.contenitore_box .singolo_box .immagine_clienti img{
    width: 80%;
    padding: 2px;
    box-sizing: border-box;  
    object-fit: cover; 
}

.contenitore_box .singolo_box .immagine_clienti p{
    text-align: justify;
}

/* Mi riferisco al secondo contenitore box */
.contenitore_box-2 {
    display: flex;
    max-width: 1300px;
    margin: auto;
    padding:  10px 250px 5px 240px; 
    color: rgb(74, 96, 192);   
}
/* mi riferisco ad un singolo box
contentuo in conteitore box2 */
.contenitore_box-2 .singolo_box-2{
    flex: 1;
    text-align: center; 
    padding: 10px ; 
    margin-left: 10px;
    border-radius: 10%;
    /*background-color: rgb(234, 236, 243);*/

    
}

.contenitore_box-2 .singolo_box-2 h2:hover{
    color: rgb(231, 105, 105);
    transition: 0.6s;
}
.contenitore_box-2 .singolo_box-2 .immagine-2 img{
    width: 40%;
    border-radius: 20%;
    border: 2px solid #080bc7;
    padding: 2px;
    box-sizing: border-box;  
}

.contenitore_box-2 .singolo_box-2 .immagine-2 img:hover {
    border-color: rgb(8, 124, 47);
    transition: 0.6s;
}


/* Mi riferisco al terzo contenitore box */
.contenitore_box-3 {
    display: flex;
    max-width: 1300px;
    margin: auto;
    padding:  10px 250px 5px 240px; 
    color: rgb(74, 96, 192);   
}
/* mi riferisco ad un singolo box
contentuo in conteitore box2 */
.contenitore_box-3 .singolo_box-3{
    flex: 1;
    text-align: center; 
    padding: 10px ; 
    margin-left: 10px;
    border-radius: 10%;
   /* background-color: rgb(234, 236, 243);*/
}

.contenitore_box-3 .singolo_box-3 h2:hover{
    color: rgb(231, 105, 105);
    transition: 0.6s;   
}
.contenitore_box-3 .singolo_box-3 ol{
    text-align: left;

}
.contenitore_box-3 .singolo_box-3 .immagine-3 img{
    width: 40%;
    border-radius: 20%;
    border: 2px solid #080bc7;
    padding: 2px;
    box-sizing: border-box;  
}

.contenitore_box-3 .singolo_box-3 .immagine-3 img:hover {
    border-color: rgb(8, 124, 47);
    transition: 0.6s;
}

/* INIZIO PAGINA CONTATTI*/

.contenitore_box .contatti{
    flex: 1;
    padding: 10px;
    text-align: left;
    margin-left: 10px;
    border-radius: 2%;
    background-color: rgb(234, 236, 243);
    }
    .contenitore_box .contatti h3{
        text-align: center;    
    }

    .contenitore_box .contatti form input[type="text"],
    .contenitore_box .contatti form input[type="email"],
    .contenitore_box .contatti form input[type="tel"],
    .contenitore_box .contatti form input[type="date"],
    .contenitore_box .contatti form select,
        .contenitore_box .contatti form textarea {
        padding: 5px;
        width: 100%;
        box-sizing: border-box;
    }
    .contenitore_box .contatti form input[type="submit"]{
        background-color: white;
        color: #080bc7;
         margin-top: 10px; 
        padding: 20px 30 px;
        text-transform: uppercase;
        font-weight: bold;
        font-size: xx-large;
        border-radius: 3%;
        border: 1px solid #080bc7;
        padding: 2px;
        box-sizing: border-box;
    }

   
    .contenitore_box .campo_form{
        margin-bottom: 20px;
    }

        .contenitore_box .campo_form .PulsanteInvio{
        text-align: center;
    }
    .contenitore_box .contatti form input[type="submit"]:hover {
        background-color:  #080bc7;
        color: white;
        transition: 0.6s;
    }

    .RiduciMargine{
        margin-bottom: -15px;   
       }
    /*FINE PAGINA CONTATTI*/

/* Footer */
.prefooter,
.prefooter_testo  {
    display: flex;
    padding: 10px 10px;
    margin-left: 240px;
    margin-right: 250px;
    text-decoration: none;
    border-top: 1px solid #032e7c;
 
}
.prefooter .colonna_prefooter   {
    flex: 1;
    text-align: center; 
    text-decoration: none;
}
.prefooter_testo {
    display: none;
}

.download {
    display: flex;  
    text-align: left; 
   /* background-color: #834a31;*/
    padding-top: 30px;
    padding-left: 50px;
    color: rgb(74, 96, 192); 
}
.colonna_download{
    flex: 1;   
}
.colonna_download a{
    color: rgb(74, 96, 192);    
}
.colonna_download ul {
    padding:0;  /* PORTA IL MARGINE DELL'ELENCO PUNTATO A 0*/
    list-style-type: none; /* Elimina i puntini dell'elenco puntato*/
    line-height: 24px;
}
.colonna_download p {
    line-height: 24px;
}
.colonna_download h3 {
    text-transform: uppercase;
    padding-top: 2px;
}

.colonna_download button {
    text-transform: uppercase;
    color: #0e47af;
    font-size: 16px;
    font-weight: bold;
}

.colonna_download h5 {
    padding-left: 30px;  
}

/*Metodo per inserire un segno diverso dai puntini. nel nostro caso il simbolo ">"*/
.colonna_download ul li:before{
    content: "\f0a9";           /* Elemento da utilizzare (nel nostro esempio >*/
    font-family: "FontAwesome"; /* il font da utilizzare*/
    font-size: 12px;            /* grandezza dell'immagine (<) inserita */
    padding-right: 10px;        /* distanza tra il simbolo ed il testo*/
}

.colonna_download ul li:hover {
    padding-left: 20px;
    transition: 0.7s;
}

.colonna_download ul li a {
    font-size: 14px;
    
}

.colonna_download ul li a:hover {
    font-size: 14px;

    background-color:rgb(74, 96, 192);
    color: white !important;
    transition: all 0.6s;
    border: 1px solid #032e7c; /*bordo della casella*/
    border-radius: 5px;

}

.download .singola_colonna_download{
    flex: 1;
    text-align: center; 
    padding: 10px; 
    margin-left: 10px;
    border-radius: 2%;
    /*background-color: rgb(234, 236, 243);*/
    
}



.imgdownloadsw1 img{
    width: 10%;
  /*  display: none;*/
}
.imgdownloadsw img{
    width: 10%;
  /*  display: none;*/
}

/*
.imgdownloadsw p{
    display: none;
}*/

.colonna_download .singola_colonna_download .immagine_download img{
    width: 20%;
    padding-top: 100px;
    /*padding: 10px;*/
    box-sizing: border-box;  
    object-fit: cover; 
}


.DivPsw {
    display: flex;  
    text-align: left; 
   /* background-color: #834a31;*/
    padding: 30px; 
    padding-top: 2px;
    color: rgb(74, 96, 192); 
}
.colonna_DivPsw{
    flex: 1;   
}

.colonna_DivPsw p {
    font-size: 14px;
    text-transform: uppercase;
    
}
.colonna_DivPsw a {
    padding-left: 20px;
    color: #080bc7;
    padding-right: 10px;
    border: 1px solid #032e7c; /*bordo della casella*/
    border-radius: 5px;
    font-family: "FontAwesome"; /* il font da utilizzare*/
    font-size: 20px;            /* grandezza dell'immagine (<) inserita */
}

.colonna_DivPsw a:hover {
    background-color:  #080bc7;
    color: white !important;           /* grandezza dell'immagine (<) inserita */
    padding-right: 10px;
    border: 1px solid #032e7c; /*bordo della casella*/
    border-radius: 5px;
    transition: 0.6s;

}

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


    header{
    
        margin-left: 20px;
        margin-right: 20px;
    }
   
    .hamburger{
        display: block;
        color: #080bc7;
        font-size: 20px;
        position: fixed;
        right: 20px;
        top: 10px;
        }
        
    .hamburger #menuhamburger {
        display: none;
      }
   
  /* Style navigation menu links */
  .hamburger a {
    color: #080bc7;
    padding: 14px 16px;
    text-decoration: none ;
    font-size: 17px;
    display: block;
  }
    
  /* Style the hamburger menu */
  .hamburger a.icon {
    /*background: black;*/
    display: block;
    position: absolute;
    color: #080bc7;
    right: 0;
    top: 0;
  }
    .header-contatti{
        display: none;
    }
    nav {
        display: none;
    }

    .sfondo {
        height: 250px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .contenitore_box,
    .singolo_box,
    .contenitore_box-2,
    .singolo_box-2,
    .contenitore_box-3,
    .singolo_box-3,
    .download,
    .colonna_download
    {
        flex-direction: column;
    }
    .contenitore_box,
    .contenitore_box-2,
    .contenitore_box-3,
    .colonna_download
    {
    padding: 5px 20px 40px 20px;

    }
    .singolo_box,
    .singolo_box-2,
    .singolo_box-3
    {
        padding-bottom: 30px;
        border-bottom: 1px solid #e9dede;
    }

    .Testo-Descrittivo{
        padding: 5px 20px 40px 20px;

    }

    .download {
        padding-top: 30px;
        padding-left: 10px;
    }
    
    .nascondismart{
        display: none;   
    }

    .imgdownloadsw img{
        display:block;
        width: 10%;
    }
    .imgdownloadsw p{
        display:block;
    }
    .prefooter_testo{
        margin-left: 20px;
        margin-right: 20px;
        box-sizing: border-box;
        display: flex;
    }
    .prefooter_testo .colonna_prefooter{
        padding: 10px;
    }

    .prefooter{
        display: none;
    }
    
}