body {margin:0px;
     
} 


       /*CSS HOMEPAGE*/
 

        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: 200px;
            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%;
            
        }

                
    
        


         /*QUA INIZIANO LE MEDIA QUERY*/

        @media screen and (max-width:576px)
        {
            
            .titolo{
                font-size: 80px;
                
                
            }
            
            
          
            .row-titolo {padding-top: 120px;}
            
         }
       
        .aside{width: 200%;
    
              }
    
        
        
    @media screen and (min-width:577px) and (max-width:992px)
        {
            
            .titolo{
                font-size: 120px;
            }
            
           
             
            .row-titolo {padding-top: 120px;}
         }
        
  @media screen and (min-width: 993px)
  { .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(IMG-HOME/footer.jpg);
        background-repeat: no-repeat;
        width: 100%;
        aspect-ratio: 2 / 1;
        position: relative;
        background-size: cover;
        background-position: center; 
        margin-top: 150px;  
        }
            
        .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;}  
    }
/*FINE STILE HOMEPAGE*/
.riga {margin-bottom: 2%; font-size:0px; }
.riga4, .riga4centrale, .riga4finale {width: 22.5%; margin-left: 2%;}
.riga2, .riga2sinistra, .riga2destra {width: 47%; margin-left: 2%}
.riga5, .riga5centrale, .riga5penultima, .riga5finale {width: 17.6%; margin-left: 2%}
.riga3, .riga3centrale, .riga3finale {width:30.66%;  margin-left:2%; }
.testocarosello_destro{ text-align: center;}
.testocarosello{ text-align: center;}
.carosellosinistro{width: 96%; margin-left:2%; margin-bottom: 2% }
.carosellodestro{width: 96%; margin-left:2%; margin-bottom: 2%;}
#contenitoregallery {width: 100%; margin-top:100px;}
.titoli_gallery {text-align: center; font-size:50px;}
.titoli_caroselli { color: #7eb0cb; font-size:40px; text-align: center;}
a {color: #cf3476;  font-family: "Barriecito";}





      .li{
            list-style-type: none;
        }
    
        
        .titolo{
           font-size: 60px;
        }
        
        
        .sfondo{ background-image:url(immagini/MURO.jpg);
            
        }
        
        .barranavigazione{
			background-color: #7eb0cb;/*#33A1FD 7eb9e1 #4EA5D9 #3F88C5*/
			padding: 1em;
            margin-top: -10px;
            
        
		}
		
        .font-nav{font-size: 25px}
		
		.logo {
			height: 60px;
			width: 106,67px
		} 
        
        .citazione{
            font-size: 60px;
            
        }
        
        .barriecito-regular {
            font-family: "Barriecito", system-ui;
            font-weight: 400;
            font-style: normal;
        
        }
 
        .titolo {
			font-size: 50px;
            font: url("Barriecito/._Barriecito-Regular.ttf")
		}
        
        aside{background-color: #7eb0cb;
                padding-top: 100px;
                margin-top: 10px;}


.allow {
	position: absolute; 
	width:80%;
	left:10%;
	top: 5%;
	z-index:200;
	overflow:scroll;
	
}

.allow-carousel {
   position: absolute; 
	width:80%;
	left:10%;
	top: 5%;
	z-index:200;
	
}
	

.sfondo-img {
	background-color: rgba(0,0,0,0.8);
	position:fixed;
	width:100%;
	top:0px;
	bottom:0px;
	left:0px;
	z-index:200;
	display:none;
}

.chiudi {
	width: 8%;
	aspect-ratio:1/1;
	margin-left:2%;
	margin-top:10px;
	
}
        
@media screen and (max-width:576px) {
   .riga4centrale{
     width: 47%;
    margin-top: 2%; }
	.riga4finale {width: 47%; margin-top:2%;}
	 
	
	.riga5centrale{width: 30.66%; margin-top: 2%}
		.riga5penultima{width: 47%; margin-top: 2%}
		.riga5finale{width: 47%; margin-top: 2%}
   
    .no-bottom {margin-bottom:0;}
}

          
@media screen and (max-width:576px) {
  
.testocarosello_destro{ text-align: center;}
.testocarosello{ text-align: center;}
.titoli_gallery {text-align: center; font-size:50px;}
.titoli_caroselli { color: #7eb0cb; font-size:40px; text-align: center;}
a {color: #cf3476;  font-family: "Barriecito";}
	
}
@media screen and (min-width: 577px)and (max-width:768px) {
    .titoli_caroselli {font-size: 24px} 
	.titoli_gallery{font-size: 50px}
	.testocarosello{font-size: 14px}
	.testocarosello_destro{font-size: 14px}
}
	@media screen and (min-width: 769px) and (max-width:1200px){ 
	.titoli_caroselli {font-size: 32px} 
	.titoli_gallery{font-size: 60px}
	.testocarosello{font-size: 20px}
	.testocarosello_destro{font-size: 20px;}
        .sfondino {background-color:#7eb0cb}

	
}
@media screen and (min-width: 1201px) {
    .titoli_caroselli {font-size: 42px} 
	.titoli_gallery{font-size: 90px}
	.testocarosello{font-size: 28px}
	.testocarosello_destro{font-size:28px}
	
}