@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Bebas+Neue&family=Cherry+Swash:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&family=Asset&family=Bebas+Neue&family=Cherry+Swash:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Faster+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Limelight&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



body{
  color: white;
background-color: rgba(156, 5, 128, 0.489);
background-image:linear-gradient(to right,rgb(159, 5, 92), rgb(149, 147, 147));

text-align:left;
font-size:20px;
font-family: Arial, Helvetica, sans-serif;
font-family: 'montserrat', sans-serif;
  }
  
  /*body.foto-citta{
    color: rgb(154, 3, 23);
  background-color: rgb(222, 224, 216);
  
  text-align:left;
  font-size:20px;
  font-family: Arial, Helvetica, sans-serif;
  font-family: 'montserrat', sans-serif;
  box-shadow: 0px 5px 10px 3px#efe8e8;

  }*/

  h1, h2{
    font-size: 70px;
    color: rgb(246, 243, 242); 
    font-family: "Bebas Neue", sans-serif;
  font-weight: 400px;
  font-style: normal;
  /*font trovato su google*/
  }
  
  h1{
    
    margin-top: 0px;
    margin-bottom: 0px;
  }
  h2{
    text-align: center;
    font-weight: normal;
    /*normale*/
    clear: both
    /*non fluttuare ne sx ne dx*/
    }
H3{
    text-align: center;
    font-weight: normal;
    /*normale*/
    clear: both
    /*non fluttuare ne sx ne dx*/
    
}

  /*h2.titolo-kekka{
    text-align: center;
     font-family: "Cherry Swash", serif;
     font-weight: bold;
  }*/
  h2.contenuto-calendario{
    text-align: center;
  }
  
  /*p.contenuto-kekka{
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 80px;
     font-weight: normal;
    clear: both
  }*/
 
    h1.animate__animated{
    
    font-size: clamp( 2rem, 6 vm+ 1rem 5rem);
    line-height: 1.3; 
    text-align: center;
    text-transform: uppercase;
  }

    @supports (background-clip: text) or
             (-webkit-backgtound-clip: text )
             {
              h1.animate__animated {
    
                background-image: linear-gradient(to right,
                rgb(239, 236, 225), 
                #82e4f3,
                 rgb(83, 202, 33),
                 rgb(249, 242, 60));

               /*padding: 1rem;
                border: 20px solid rgba(87, 86, 85, 0.286) (255 255 / 50%);

                 background-clip: border-box;
                 background-clip: content-box;*/
                background-clip: text;

                --bg-size:200%;
                color:transparent;
                background-size: var(--bg-size);
                animation: animate 2s steps(5) infinite;
                animation: animate 2s linear infinite;
                animation: animate 2s ease infinite;
                     }
                      }
                      @keyframes animate{
                      /*from{
                        background-position: 0;
                      }*/
                      to{
                        background-position: var(--bg-size);
                      }
                      }
  h2.dentro-contenuto-articolo{
    text-align: center;
    font-size: 75px;
    --animate__infinite:	infinite;
  }
 

  div#contenitore-supremo,.LOGO-PROGRAMMA,div#contenuto-supremo-articolo,div#contenitore,div#foto-citta{
    /*background-color: rgb(209, 149, 220);*/
    max-width: 800px;
    margin: 120px auto 0px;
    /*il margine alto/basso e dx/sx*/
  }
  div#testata,div#contenuto, div#piedipagina,div#contenuto-supremo-articolo,div#contenitore,div#menu-navbar,div#logo-squadre,div#tastata-citta{
    padding: 25px;
  }

  div#testata,div#navbar-articolo,div#testata-citta,div#menu-navbar,#nabar-tx{
   background-color: #d24fd0;
  
   margin: 20px 0px 20px;
    /*bordi all elemento*/
   border: 3px solid #393939;
   border-radius: 20px;
   box-shadow: 8px 5px 10px 3px#e4e7e2 ;
  }
  div#testata-citta{
    margin-top: 50px;
  }
  img.sq{
      width: 40%;
      min-width:250px ;
      float: auto;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX; 
}
img.logo{
   width: 100%;
      min-width:250px ;
      
      margin:0px 20px 20px 0px;
}
img.logo1{
   width: 60%;
      min-width:250px ;
      float: left;
      margin:0px 20px 20px 0px;
}
/*img.logo-articolo{
      width: 100%;
      min-width:250px ;
      margin:0px 20px 20px 0px; 
}*/


div#navbar,div#navbar-articolo,div#navbar-tx,div#navbar-menu{
  text-align: center;
  color: rgb(22, 13, 1);
  background-color: #ded1d1a5;
  width: 100%;
  margin: 0px;
  padding: 2px 20px;
  position: fixed;
  top: 0px;
  left: 0px;
  /*bordi all elemento*/
   
   box-shadow: 0px 0px 10px 3px#0b2101 ;
  }




div#piedipagina{
  color: white;
  background-color: #920a0aa5 ;
   background-image: linear-gradient(to top right, #d24fd0);
   margin-top: 0px;
   margin-bottom: 50px;
   border: 2px solid #191403;
   border-radius: 20px;
   box-shadow: 0px 5px 10px 2px black;}

div#piedipagina1{
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font: bold;
  color: rgb(11, 11, 11);
  background-color: #eee8e8a5 ;
   background-image: linear-gradient(to top right, #9a060699);
   margin-top: 0px;
   margin-bottom: 50px;
   border: 2px solid #191403;
   border-radius: 20px;
   box-shadow: 0px 5px 10px 2px black;}



div#testata:hover{
  box-shadow: 0px 0px 0px 0px#7f0303
}
  p.dentro-testata{
    font-weight: bold;
  /*grassetto*/
  margin-bottom: 0px;
  padding-bottom: 0px;
  /*tolto i margine dell elemento*/
   
}
p.dentropiedipagina{
  font-style:italic;
  /*testo incorsivo*/
 }
 p.dentro-contenuto{
  font-size:19px ;
 }
 /*img.foto-kekka{
  margin-bottom: 80px;
 }*/
  
 a.link,a.articolo,a.kekka,a.menu-navbar{
  
  color: rgb(250, 90, 90);
 font-weight: bold;
 text-decoration: none;
}
a.contenuto-navbar,a.menu-navbar{
  color: white;
  font-weight: bold;
  text-decoration: none;
  margin: 0px 10px 0px 0px;
  box-shadow: 0px 0px 10px 3px#0b2101;
}
a:hover{
  text-decoration: underline;
  color: #ebe3e4;
}

/*adattamenti per schermi smartphon*/
@media screen and (max-width:600px){

  div#contenitore-supremo,div#contenuto-supremo-articolo,div#logo-squadre,.contenitore,.contenitore-citta,.gallery.C-POTIERI,.C-DIFENSORI,.C-CENTROCAMPO,.C-ATTACCANTI{
   
   margin: 0px auto 0px;
   }
  img.foto-citta{
  width: 200%;
  float: none;
  margin: 2px 0px;
}
div#testata{
  display: none;
}
div#contenuto,div#contenuto-articolo,div#contenitore-citta.gallery{
  margin-top: 20px;
}}
/*img.squadre,img.squadre-lume,img.squadre-pavia{
 
  width:70px;
  right: 70px;
 
}*/
 /*img.squadre-lume{
  width: 90px;
  right: 90px;
 }
 img.squadre-pavia{
  width: 120px;
  right: 120px;
 }
 img.squadre-venezia{
  width: 100px;
  right: 100px;
 }
 
 img.foto-kekka{
  width: 250px;
  right: 250px;
  float: left;
  margin-right: 50px;
 
}
p.p-kekka{
  margin-right: 100px;

}*/
div#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
}
div#nabar li{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid rgb(240, 62, 157);
color:black;
}
div#navbar a{
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#navbar a:hover{

padding-left: 5px;
color: #f4f2f1;
text-decoration: none;
}
div#navbar li ul   { display: none;}
div#navbar li:hover ul{
 display: block;
position: absolute;
z-index:1;
width:150px;
padding: 15px;
margin: 0 0 0 -1px;
border:1px solid black;
background: rgb(240, 5, 17); 
}

div#navbar li li { border: none; width: 150%;}
div#navbar li li a{padding: 2px 2px 2px 10px;}


body.foto-citta,div.contenitore-citta,div#gallery,a.foto-citta,a.foto-fra,div#gallery-fra,.contenitore-citta,.gallery-citta{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:Arial, Helvetica, sans-serif ;
}
a.foto-CITTA{
  text-align:center;
  color: #e4e7e2;
  

}

.contenitore,.contenitore-citta{
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 8%;

}
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-gap:30px;

}
.gallery{
  width: 100%;
}
.gallery img {
width: 110%;
}

.gallery img{
width: 100%;
}
.gallery-fra img{
  width: 100%;
}
/*.gallery-fra{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-gap:30px;
}*/
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-gap:30px;
}
Div#navbar-tx ul {
margin: 0;
padding: 0;
list-style-type: none;
font-weight: bold;
}
div#nabar-tx li{
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:black;
}
div#navbar-tx a{
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#navbar-tx a:hover{

padding-left: 5px;
color: #f4f2f1;
text-decoration: none;
}
div#navbar-tx li ul   { display: none;}
div#navbar-tx li:hover ul{
 display: block;
position: absolute;
z-index:1;
width:150px;
padding: 15px;
margin: 0 0 0 -1px;
border:1px solid black;
background: rgb(240, 111, 5); 
}

div#navbar-tx li li { border: none; width: 150%;}
div#navbar-tx li li a{padding: 2px 2px 2px 10px;}
nav li {
text-align: center;
display: inline-block;
 border: 1px solid #f0ece0;
   border-radius: 5px;
   box-shadow: 0px 5px 10px 2px rgb(20, 20, 20);
}
table.C-PORTIERI {
  width: 100%;
  border-collapse: collapse;
}



th, td {
  position: CENTER;
  width: 50PX;
  right: 50PX;
  border: 1px solid rgb(112, 10, 117);
  padding: 20px;
  text-align:center;
  font-weight: bold;
}

th {
  
  background-color: #770671;
}
.foto-rosa{
  
  width: 70px;
  right: 70px;
}

.foto-staff{
 width: 30%;
      min-width:250px ;
      float: left;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX; 
}
TD{
  color: rgb(228, 221, 221);
}
/*#navbar-tx a{
text-align: center;
transition: .3S;
opacity: 0;
animation: SLIDETOP 3S ease forwards;
animation-delay: calc(0.5s * var(--i));
}*/
@keyframes SLIDETOP{
  0%{
    transform: translateY(100PX);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}
.LOGO-PROGRAMMA{
  margin-top: 20PX;
  width: 800PX;
right: 800PX;
}
.logo-mister{
  width: 41%;
      min-width:250px ;
      float: left;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX; 


}
.logo-mister1{
  width: 40%;
      min-width:250px ;
      float: right;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX; 


}




h5 {
    color: #bf095872; /* Colore del testo */
    font-family: "Kanit", sans-serif; /* Font importata da Google Fonts */
    font-size: 100px; /* Dimensione del font */
    text-align: center; /* Allinea il testo al centro */
    margin-bottom: 50px;
    text-shadow: /* Aggiunge ombre multiple per l'effetto 3D */
        0px 1px 0px rgba(0, 0, 0, 0.1),
        0px 2px 0px rgba(0, 0, 0, 0.2),
        0px 3px 0px rgba(0, 0, 0, 0.3),
        0px 4px 0px rgba(0, 0, 0, 0.4),
        0px 5px 0px rgba(0, 0, 0, 0.5),
        0px 6px 0px rgba(0, 0, 0, 0.6),
        0px 7px 0px rgba(0, 0, 0, 0.7),
        0px 8px 0px rgba(0, 0, 0, 0.8);
       animation: shadowMove 2s infinite alternate;  
}

@keyframes shadowMove {
    0% {
        text-shadow:
            0px 1px 0px rgba(0, 0, 0, 0.1),
            0px 2px 0px rgba(0, 0, 0, 0.2),
            0px 3px 0px rgba(0, 0, 0, 0.3),
            0px 4px 0px rgba(0, 0, 0, 0.4),
            0px 5px 0px rgba(0, 0, 0, 0.5),
            0px 6px 0px rgba(0, 0, 0, 0.6),
            0px 7px 0px rgba(0, 0, 0, 0.7),
            0px 8px 0px rgba(0, 0, 0, 0.8);
    }
    100% {
        text-shadow:
            0px 8px 0px rgba(0, 0, 0, 0.1),
            0px 9px 0px rgba(0, 0, 0, 0.2),
            0px 10px 0px rgba(0, 0, 0, 0.3),
            0px 11px 0px rgba(0, 0, 0, 0.4),
            0px 12px 0px rgba(0, 0, 0, 0.5),
            0px 13px 0px rgba(0, 0, 0, 0.6),
            0px 14px 0px rgba(0, 0, 0, 0.7),
            0px 15px 0px rgba(0, 0, 0, 0.8);
    }
}


    #countdown {
      text-align: center;
      font-size: 48px;
      color: #fdf9f9;
    }
    #meteo{
      text-align: center;
    }
    
.squadre-calendario{
  width: 100px;
  right: 100px;
}
.squadre-calendario1{
  width: 80px;
  right: 80PX;
}

#slideshow-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

#slideshow-container {
  width: 100%;
  max-width: 600px;
  height: 700px;
  overflow: hidden;
  position: relative;

  /*border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);*/
  }


.slide {
  position: absolute;
  width: 400px;
  height: 300px;
  text-align: center; 
}

.slide-img {
  
  
  width: 480px;
  height: 300px;
  max-width: 600px;
  height:auto;
  margin-top: 50PX;
  object-fit: contain;
  position:absolute;
  transition: opacity 1s ease-in-out;
}

.caption {
  
  height: 15%;
  color: white;
  font-family:Faster One, system-ui;
  font-size: 40px;
  text-align: center;
  position: absolute;
  padding-top: 1px;
  margin-bottom: 50px;
  font: bold
}
.foto-rosa1{
  
  width: 200px;
  right: 80px;
  float: left;
}

img.animate__animated{
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left,;
text-align: center;
}  

img.triangolare{
      width: 20%;
      min-width:200px ;
      float: auto;
      margin:0px 20px 20px 0px;
      border-spacing: 5PX;}


   TR.YELLOW{
    background-color: #ffff99;
    color: #000;
   }
   TR.YELLOW TD{
    color: #000;
   }
   
   TR.GREEN{
    background-color: #39e609;
    color: #000;
   }
   TR.GREEN TD{
    color: #000;
   }