body                   { overflow-x: hidden;
                         overflow-y: auto;
                         background:
                          background-color: #FFFFFF;
                          background-image: url('https://www.interfred.it/Installatori/grafica/I_Sfondo.jpg');         
                          background-position: left top;
                          background-repeat: no-repeat;
                          background-attachment: fixed;
                          background-size: cover                         
                       }
                       
a { text-decoration: none;
    color: blue;
    font-weight: bold
  }     

h1, h2, h3, h4         { font-family: Arial, Verdana;
                         line-height: 1.125%;
                         margin-right: 0pt; 
                         margin-left: 0pt;
                         margin-top: 0pt; 
                         margin-bottom: 0pt
                       }

h1                     { line-height: 100%;
                         margin-top: 7%;
                         font-size: 1.8em;
                         font-variant: small-caps;
                         color: #990000;
                         letter-spacing: 0.4vw; 
                         font-weight: strong; 
                         text-align: right      
                       }
                                                       
h2                     { line-height: 100%;
                         margin-top: 6%;
                         margin-bottom: 3%;
                         font-size: 1.2em;
                         font-variant: small-caps;
                         text-align: right;
                         letter-spacing: 0.2em;
                         color: #990000                                      
                       }
                                            
h3                     { line-height: 150%;
                         margin-top: 4%;
                         margin-bottom: 4%;
                         font-size: 1em;
                         font-weight: normal; 
                         text-align: justify;
                         color: #000000
                       }

.small                 { line-height: 130%;
                         margin-top: 3%;
                         margin-bottom: 3%;
                         background-color: #ED5F5F;
                         padding: 8px;
                         border-radius: 12px;
                         font-family: Arial, Verdana;
                         font-size: 0.85em;
                         font-style: italic;
                         font-weight: normal;
                         font-variant: normal;
                         color: #FFFFFF;
                         letter-spacing: 0;
                         text-align: right                 
                       }
                       
.info                  { line-height: 1.1em;
                         margin-top: 0;
                         padding-bottom: 1.2em;
                         font-family: Arial, Verdana;
                         font-size: 1.2em;
                         font-style: normal;
                         text-align: left;
                         letter-spacing: 0vw;
                         color: #FFFFFF                       
                       }

hr.contenuti           { border: none;
                         border-top: 1px dotted #990000
                       }
                       
hr.fondo               { border: none;
                         border-top: 1px dotted #FFFFFF
                       } 
 



/* ---------------------------- Div Pagina --------------------------- */


#Sommarioghost         { width: 10%;
                         height: 100%;
                         float: left
                       }   

#Sommariosx            { height: 100%;
                         float: left;
                         background: #990000
                       }

#Main                  { height: 100%;
                         float: left;
                         border-top: 1px solid #990000               
                       }




/* ------------------------- Div Sommariosx --------------------------*/ 


#LogoInstalla          { width: 100%;
                         height: 6vh;
                         min-height: 30px;
                         float: left;
                         padding-top: 1.2vh;
                         background: #FFFFFF;
                         border-top: 1px solid #990000;
                         border-left: 1px solid #990000;
                         border-bottom: 1px solid #FFFFFF;
                         text-align: center
                       }

#LogoInstalla img      { width: 79%;
                         height: 5vh;
                         min-height: 30px;
                         vertical-align: middle
                       }

#Titoloindice          { width: 100%;
                         height: auto;
                         min-height: 30px;
                         line-height: 120%;
                         padding: 5% 0%;
                         float: left;
                         background: #990000;
                         border-top: 1px solid #990000;
                         border-bottom: 1px solid #FFFFFF;
                         text-align: center                   
                       } 
                        
#Titoloindice a        {font-family: Arial, Verdana;
                        font-size: 0.85em;
                        font-weight: bold;
                        color: #FFFFFF;
                        vertical-align: middle 
                       }

#Titolipagine          { width: 96%;
                         height: auto;
                         list-style-image: url('https://www.interfred.it/images/Rosa_dx.gif');
                         padding: 0 2% 0 2%
                       }
                       
#Titolipagine ul       { width: 90%;
                         padding: 5%                                                 
                       }

#Titolipagine li       { margin-left: 10px;
                         padding: 10% 0%;
                         font-size: 0.75em;
                         border-bottom: 1px dotted #FFFFFF
                       }


#Titolipagine a        { font-family: Arial, Verdana;
                         font-weight: bold;
                         font-size: 0.9em;
                         color: #FFFFFF
                       }



/* ----------------------------------- Div Main -------------------------------- */
   
            
#Navigazione           { width: 41%;
                         height: auto;
                         line-height: 35px;
                         float: left;
                         padding: 1.5% 4% 1%;
                         border-bottom: 2px solid #990000;
                         margin-left: 2%;
                         margin-bottom: 15px;
                         text-align: left;
                         vertical-align: middle
                       }
                       

#Navigazione img       { width: 25px;
                         height: 25px;
                         float: left;
                         padding: 4px 10px 0 0
                       }                       
                                              
#LogoIF                { width: 43%;
                         height: auto;
                         line-height: 35px;
                         float: left;
                         padding: 1.5% 2% 1%;
                         border-bottom: 2px solid #990000;
                         margin-right: 2%;
                         margin-bottom: 15px;
                         text-align: right;
                         vertical-align: middle             
                       }

#LogoIF a              { font-family: Arial, Verdana;
                         font-size: 0.7em;
                         color: #990000
                       }

#LogoIF img            { width: 30px;
                         height: 30px;
                         float: right;
                         padding-top: 2px
                       }

#Princindice           { width: 92%;
                         margin-bottom: 3%;
                         padding: 0 2% 0 6%;
                         font-family: Arial, Verdana;
                         font-size: 1em;
                         color: #990000;
                         text-align: right
                       }

#Princindice a         { padding: 1px 0.7vw 1px 0.9vw;
                         border: 1px solid #990000;
                         border-radius: 10px;
                         font-family: Arial, Verdana;
                         font-size: 0.8em;
                         font-weight: normal;
                         color: #990000                                                   
                       }

.Contenuti             { width: 92%;
                         padding: 0 2% 10% 6%;
                         text-align: center
                       }
                       
.Contenuti a           { font-family: Arial, Verdana;
                         font-size: 1.1em;
                         color: #0000FF;
                       }

.immagine              { width: 90%;
                         height: auto;
                         text-align: center;
                         margin: auto
                       }
                       
.immagine img          { width: 96%;
                         border: 1px dotted #990000;
                         padding: 2%;
                         text-align: center                         
                       }

                      

#fondo                 { width: 98%;
                         height: auto;
                         margin: 3% 3% 10% 0%;
                         text-align: left                         
                       }
                 
#fondo a                { font-family: Arial, Verdana;
                          font-weight: bold;
                          font-size: 1.1em;
                          color: #990000 
                        }


#Strisciafinale        { width: 86%;
                         height: auto;
                         padding: 1% 4%;
                         margin: 10% 3% 15%;
                         text-align: center;
                         border-radius: 10px;
                         background-color: #990000;
                         box-shadow: 4px 4px 15px #990000
                       }
                 
#Strisciafinale a      { font-family: Arial, Verdana;
                         font-size: 1.1em;
                         font-weight: normal;
                         color: #FFFFFF 
                       }


/*------------------------- Banner footer -----------------------*/               

 
#Footer                { height: auto;
                         float: left
                       } 
                       
#Footer img            { width: 90%;
                         height: 86%;
                         margin: auto;
                         padding: 7% 1%
                       }                 
                 

/* --------------------------- div Informazioni ------------------------- */

.Informazioni          { width: 100%;
                         display: flex
                       }


.Infosx, .Infocen, .Infodx  { float: left;
                              padding: 7% 1% 2% 1%;
                              border-top: 2px solid #FFFFFF;
                              border-left: 1px dotted #FFFFFF;
                              background: #000080;
                              line-height: 2.5em;
                              margin: 0;
                              font-family: Arial, Verdana;
                              font-size: 0.7em;
                              font-style: normal;
                              text-align: left;
                              color: #FF66CC                            
                            }

.Infosx a { font-weight: normal;
            font-size: 1em
          }



/* ------------------------------------------------------ SCHERMI -------------------------------------------------- */



@media screen and (min-width: 1024px) {
   
    body,a             { font-size: 18px
                       }

   
/* ---------- Allineamento height colonne div Pagina -------------------------*/
   
    #Pagina            { display: table;
                         width: 100%;
                         height: 100%;
                         min-height: 100%
                       }
                 
    #Righe             { display: table-row;
                         height: 100%
                       }   
/*---*/


    #Sommariosx        { width: 13%
                       }
    
    #Main              { width: 66.9%
                       }
                       
    #Strisciafinale    { display: none                   
                       }
  
    #Sommarioghost,
    #Sommariosx,
    #Main              { display: block, table-cell
                       }
                      
    #Navigazione,      
    #LogoIF            { display: block                    
                       }
    
    #Footerghost,
    #Footer            { display: inline-block
                       }
                       
    #Footerghost       { width: 20%
                       }

    #Footer            { width: 80%
                       }

    .Infosx            { width: 36%
                       }
  
    .Infocen           { width: 42%
                       }

    .Infodx            { width: 21%
                       }
    
    .Infosx,  
    .Infocen,
    .Infodx            { display: inline-block
                       }              



/* ------------------------ Div Linkigloo -------------------------*/


.Linkigloo              { width: 83%;
                          height: auto;
                          margin:  7% 5%;
                          padding: 4%;
                          box-shadow: 4px 4px 15px #990000;
                          background-color: #FFE8E8;
                          text-align: left
                        }
                       
.Contenuti .Linkigloo a { font-size: 0.8em                    
                        }
                       
              
.Igloo                  { height: 30px;
                          line-height: 30px;
                          margin-bottom: 20px;
                          font-family: Arial, Verdana;
                          font-size: 0.7em;
                          font-style: italic;
                          text-align: left
                        }

.Igloo img              { width: 30px;
                          height: 30px;
                          float: left;
                          padding-right: 10px                         
                        }

}


/* ---------------------------------------------------------------------------*/


@media screen and (min-width: 801px) and (max-width: 1023px) {
   
    body,a             { font-size: 16px
                       }      


/* ---------- Allineamento height colonne div Pagina -------------------------*/
    
    #Pagina            { display: table;
                         width: 100%;
                         height: 100%;
                         min-height: 100%
                       }
                 
    #Righe             { display: table-row;
                         height: 100%
                       }   
/*---*/

   
    #Sommarioghost     { display: none
                       }
    
    #Sommariosx        { width: 16%
                       }
    
    #Main              { width: 70%
                       }
    
    #Strisciafinale    { display: none                   
                       }

    
    #Sommariosx,
    #Main              { display: block, table-cell
                       }

    #Footerghost       { display: none
                       }

    #Footer            { width: 86%%
                       }

     
    .Infosx            { width: 36%
                       }
  
    .Infocen           { width: 42%
                       }

    .Infodx            { width: 21%
                       }
    
    .Infosx,  
    .Infocen,
    .Infodx            { display: inline-block
                       }              



/* ------------------------------- Div Linkigloo --------------------------*/


.Linkigloo              { width: 83%;
                          height: auto;
                          margin:  7% 5%;
                          padding: 4%;
                          box-shadow: 4px 4px 15px #990000;
                          background-color: #FFE8E8;
                          text-align: left
                        }
                       
.Contenuti .Linkigloo a { font-size: 0.8em                    
                        }
                             
                          
.Igloo                  { height: 30px;
                          line-height: 30px;
                          margin-bottom: 20px;
                          font-family: Arial, Verdana;
                          font-size: 0.7em;
                          font-style: italic;
                          text-align: left
                        }

.Igloo img              { width: 30px;
                          height: 30px;
                          float: left;
                          padding-right: 10px                         
                        }
}


/* ---------------------------------------------------------------------------*/

@media screen and (max-width: 800px) and (min-width: 581px) {
  
    body,a            { font-size: 15px
                       }

             
/* ---------- Allineamento height colonne div Pagina ----------*/
   
    #Pagina            { display: table;
                         width: 100%;
                         height: 100%;
                         min-height: 100%
                       }
                 
    #Righe             { display: table-row;
                         height: 100%
                       }   
/*-------------------------------------------------------------*/
    
    
    #Sommarioghost,    
    #Sommariosx        { display: none
                       }
                          
    #Main              { width: 89%
                       }

    #Footerghost       { display: none
                       }

    #Footer            { width: 89%
                       }

    
    .Infosx            { width: 43%
                       }
  
    .Infocen           { width: 42%
                       }

    .Infodx            { width: 14%
                       }
    
    .Infosx,  
    .Infocen,
    .Infodx            { display: block
                       }       



/* ------------------------ Div Linkigloo --------------------------*/


.Linkigloo              { width: 83%;
                          height: auto;
                          margin:  10% 5%;
                          padding: 4%;
                          box-shadow: 4px 4px 15px #990000;
                          background-color: #FFE8E8;
                          text-align: left
                        }

.Contenuti .Linkigloo a { font-size: 0.8em                    
                        }


                                             
.Igloo                  { height: 30px;
                          line-height: 30px;
                          margin-bottom: 30px;
                          font-family: Arial, Verdana;
                          font-size: 0.6em;
                          font-style: italic;
                          text-align: left
                        }

.Igloo img              { width: 30px;
                          height: 30px;
                          float: left;
                          padding-right: 10px                         
                        }
}


/* ---------------------------------------------------------------------------*/

@media screen and (max-width: 580px) {
   
    body,a             { font-size: 14px
                       }
 
    #Main              { width: 100%
                       }
    
    #Sommarioghost,
    #Sommariosx        { display: none
                       } 
                       
    #Footerghost       { display: none
                       }

    #Footer            { width: 100%
                       }
 
    .Infosx            { width: 98%
                       }  
    
    .Infocen,
    .Infodx            { display: none
                       }                                        



/* -------------------------------- Div Linkigloo -----------------------------*/


.Linkigloo              { width: 83%;
                          height: auto;
                          margin:  10% 5%;
                          padding: 4%;
                          box-shadow: 4px 4px 15px #990000;
                          background-color: #FFE8E8;
                          text-align: left
                        }


.Contenuti .Linkigloo a { font-size: 0.9em                    
                        }


.Igloo                  { height: 30px;
                          line-height: 30px;
                          margin-bottom: 30px;
                          font-family: Arial, Verdana;
                          font-size: 0.6em;
                          font-style: italic;
                          text-align: left
                        }

.Igloo img              { width: 30px;
                          height: 30px;
                          float: left;
                          padding-right: 10px                         
                        }
}