/*CSS HOMEPAGE*/
 
/*html, body {
    
    margin:0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}*/


        li{
            list-style-type: none;
            
        }
    
        
        
        .sfondo{ background-image:url(immagini/MURO.jpg);
            
        }
        
        
        .sezioni{padding-left: 20px;
    
           }
           


       
       /* .barranavigazione{
			background-color: #7eb0cb;
			padding: 1em;
            margin-top: 100px; 
            font-size: 25px;
            display: flex; 
            position: fixed;
            z-index: 100;
	
		}
                */
      

        .font-nav {font-size: 25px;
                    }


		
		.logo {
			height: 60px;
			width: 106,67px
		} 
        
        
        .barriecito-regular {
            font-family: "Barriecito", system-ui;
            font-weight: 400;
            font-style: normal;
        
        }
 
        .titolo {
			font-size: 1100%;
            font: Barriecitozip; /*se non funziona metti il punto prima di zip*/
    
  
}
            
    

    
           
        .icona{
            float: inline-start;
            padding-left:30%
        
                  }
        .testi{
            float: inline-start;
            padding-right:20%;
            padding-left:2%;
            
        }

.citazione {padding-top: 10%;
padding-left:10%;
padding-right:10%;}        
    



         /*QUA INIZIANO LE MEDIA QUERY*/

        @media screen and (max-width:576px)
        {
            
            .titolo{
                font-size: 80px;
                
                
            }
.citazione {padding-top: 5%}        
            
            
          
            .row-titolo {padding-top: 120px;}
            
         }
       

    
            
    
    

        
    @media screen and (min-width:577px) and (max-width:992px)
        {
            
           .titolo{
                font-size: 120px;
            }
            
           
             
            .row-titolo {padding-top: 120px;}
         }
        
  @media screen and (min-width: 992px)
  { .row-titolo{padding-top: 120px;}
      
      
      
}
            /*MEDIA QUERY VIDEO*/

            @media screen and (min-width: 320px)
                {    
                    
                    .video { height: 50%;
                         width: 100%;}
                
                }
            
            @media screen and (min-width: 720px)
                { 
                    
                    .video { height: 50%;
                         width: 100%;}
                    
                    
                }

        /*QUI INIZIA IL CSS DELLE IMMAGINI A MURO*/
     
        .paesi:link{color: whitesmoke;
                   text-decoration:none;
                   font-weight: bold;
            }

        .paesi:visited{color: whitesmoke;}


         




        .colonna-1 {
                position: relative;
                display:flex;}
            .colonna-2 {
                position: relative;
                display:flex;}

            .sfondo_immagine{
                position:absolute;
                background-color: #cf3476;
                z-index: 50;
                width: 100%;
                height: 100%;
                top: 0;
                opacity: 0;
                color: white;
                display:flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                font-size: 30px;}

            .sfondo_immagine:hover {
                opacity: 80%;}
            
            .sfondo_immagine-2 {
                position:absolute;
                background-color: #cf3476;
                z-index: 50;
                width: 96.5%;
                height: 100%;
                top: 0;
                opacity: 0;
                color: white;
                display:flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                font-size: 30px;}

            .sfondo_immagine-2:hover {
                opacity: 80%;}
            
            .colonna-3 {
                position: relative;
                display:flex; }
            
            .colonna-4 {
                position: relative;
                display:flex; }
            
            .colonna-5 {
                position: relative;
                display:flex; }
            
             .sfondo_immagine-3 {
                position:absolute;
                background-color: #cf3476;
                z-index: 50;
                width: 100%;
                height: 100%;
                top: 0;
                opacity: 0;
                color: white;
                display:flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                font-size: 30px;}


            .sfondo_immagine-3:hover {
                opacity: 80%;}
            
             .sfondo_immagine-4 {
                position:absolute;
                background-color: #cf3476;
                z-index: 50;
                width: 100%;
                height: 100%;
                top: 0;
                opacity: 0;
                color: white;
                display:flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                font-size: 30px;}

            .sfondo_immagine-4:hover {
                opacity: 80%;}
            
            .sfondo_immagine-5 {
                position:absolute;
                background-color: #cf3476;
                z-index: 50;
                width: 100%;
                height: 100%;
                top: 0;
                opacity: 0;
                color: white;
                display:flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                font-size: 30px;}

            .sfondo_immagine-5:hover {
                opacity: 80%;}

/*QUI INIZIA IL FOOTER*/

 .footer{
        background-image: url(../HOMEPAGE/IMG-HOME/footer.jpg);
        background-repeat: no-repeat;
        width: 100%;
        aspect-ratio: 2 / 1;
        position: relative;
        background-size: cover;
        background-position: center; 
        margin-top: 5%;  
        }
            
        .footer{
        display: block;
        unicode-bidi: isolate;  
        }
        
        .dati{
        text-align: center;
        color: whitesmoke;
        }    
    
     .dati{
        font-size: 20px;
        text-align: center;
        margin-right: 20px;
        margin-top: 50px;
    }
    
     .dati2{
        font-size: 20px;
        text-align: center;
        margin-top: 30px;
        margin-right: 80px;
    }

    
        @media screen and (max-width: 992px) {
    .dati {
        font-size: 15px;} 
            
    .dati2 {
        font-size: 15px;}     
    }
    
      @media screen and (max-width: 576px) {
    .dati {
        font-size: 10px;} 
            
    .dati2 {
        font-size: 10px;}  
    }