:root{
    --brand-color: rgb(0, 128, 0);
    --second-brand-color: rgb(255,255,255);
    
    --box-shadow: 12px 11px 30px 6px rgba(0,0,0,0.57);
-webkit-box-shadow: 12px 11px 30px 6px rgba(0,0,0,0.57);
-moz-box-shadow: 12px 11px 30px 6px rgba(0,0,0,0.57);

    
}
body{
    font-family: "noto", sans-serif;
    color: #555555;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
letter-spacing: 3%;

min-width: 1220px;


}
ul, p, h1,h2,h3,h4{
    margin: 0;
    padding: 0;
}
h1,h2,h3,h4 {
    color: var(--brand-color);
    font-family: "Alumni Sans Collegiate One", sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 80px;
    line-height: 100%;
   letter-spacing:2.2%;
    text-align: center;
    margin-bottom: 40px;
    margin-top: 40px;
    
	-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    /* ----------------------------------------------
 * Generated by Animista on 2026-4-22 23:33:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
     from {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: center center;
         transform-origin: center center;
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     10% {
         -webkit-transform: scale(0.91);
         transform: scale(0.91);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     17% {
         -webkit-transform: scale(0.98);
         transform: scale(0.98);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     33% {
         -webkit-transform: scale(0.87);
         transform: scale(0.87);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     45% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }
 }

 @keyframes heartbeat {
     from {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: center center;
         transform-origin: center center;
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     10% {
         -webkit-transform: scale(0.91);
         transform: scale(0.91);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     17% {
         -webkit-transform: scale(0.98);
         transform: scale(0.98);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     33% {
         -webkit-transform: scale(0.87);
         transform: scale(0.87);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     45% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }
 }

@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

 
    ::before,
    ::after {
  position: absolute;
  content: "";
}
:active, :hover, :focus {
  outline: 0;
  outline-offset: 0;
}
    figure{
        margin: 0;
       
    }
    img{
        display: block;
         border-radius: 10px;
        overflow: hidden;
    }
    .list{
        list-style: none;
    }
    .link{
        text-decoration: none;
        color: inherit;
        ransition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .link:hover,.link:focus{
        color:var(--second-brand-color);
        background-color: var(--brand-color);
transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
.active{
    color: var(--second-brand-color);
    background-color: var(--brand-color);
}
    .container{
        
        width: 1220px;
        margin: 0 auto;
        padding: 15px;

       
    }
    /*---------------------------header----------------------*/
    .header{
        position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* O la larghezza desiderata, es. 80% */
    z-index: 1000;
    width: 1220px;
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 25px;
        
        background-color: rgba(255, 255, 255, 0.801);
    }
    
    .header-up{
        display: flex;
        justify-content: flex-end;
        border-bottom:solid 2px var(--brand-color) ;
    }
    .header-down{
         border-bottom:solid 2px var(--brand-color) ;

    }
    .header-nav{
       

        font-size: 18px;

    }
    .nav-link{
        display: block;
        padding: 15px;
        border-radius: 25px;
       
       
    }
    .link-result{
        background-color: orange; 
    }
    .nav-item{
       margin-top: 5px;
       margin-bottom: 5px;
      
    }
    /*.nav-item:not(:last-child){
        margin-left: 25px;
    }*/
    .text-header{
        padding-bottom: 10px;
        padding-top: 10px;
        margin-right: 60px;
    }
    .socials-header{
        display: flex;
        
    }
    .social:not(:last-child){
        margin-right: 40px;
    }
    .social-link{
        display: block;
        padding-bottom: 10px;
        padding-top: 10px;
        border-radius: 0px;
    }
    .social-img{
        border-radius: 0px;
    }
    .nav-items{
        display: flex;
       
    }
    .nav-teams{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top:solid 2px var(--brand-color) ;
    }
    .nav-teams:not(:last-child){
        margin-left: 25px;
    }
    /*________________________sezione footer________________*/
    .footer-section{
        
        
        background-color: #212121;
        color: var(--second-brand-color);
    }
    .footer-list{
       display: flex;
     justify-content: space-between;
     margin-left: auto;
    }
    .footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        
       
    }
    .footer-info{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    address{
        margin-right: auto;
    }
    .footer-social{
        display: flex;
    }
    .footer-sections{
        display: inline-block;
      
        align-items: center;
    
       
    }
    .copyriht-section{
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
    }
    .creatore{
        font-family: Brush Script MT;
    }
    /*________________________sezione Hero________________*/
    .hero{
        padding-top: 200px;
        padding-bottom: 20px;
        height: 1100px;

        
        background-color:var(--brand-color);
        background-image: linear-gradient(90deg, rgba(87, 199, 133, 0.3) 0%, rgba(87, 199, 133, 0.3) 50%, rgba(87, 199, 133, 0.3) 100%), url(../imgs/back.jpg);
        
        background-position: center;
        background-size: cover;
        
    }
    .hero > .container{
       height: inherit;
    }
    .hero-title{
        margin-bottom: 10px;
        text-shadow: 3px -5px 0px rgba(241,232,232,1), 3px 9px 0px rgba(241,232,232,1);
    }
   
    .hero-slogan{
        width: 90%;
        font-family: "Faster One" , sans-serif;
        font-size: 50px;
        margin-bottom: 60px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 0px;
         color: var(--second-brand-color);

    }
   .hero-text{

    width: 100%;
    font-weight: 600;
    font-size: 35px;
    line-height: 100%;
   letter-spacing:2%;

   color: #3e643a;
background-color: rgba(241,232,232,0.6);
border-radius: 25px;
padding: 10px;
margin-top: 500px;
}
/*---------------------------news----------------------*/
.news{
  background-image: url(../imgs/sfondo1.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}
.news-container{
    background-color: rgba(255, 255, 255, 0.801);
}
/*---------------------------sponsor----------------------*/
.partners{
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url(../imgs/sfondo1.jpeg);
    background-position: center;
    background-size: cover;
}
.partners-container{
    background-color: rgba(255, 255, 255, 0.801);
}
.partners-title{
    color: var(--brand-color);
}
.partners-list{
display: flex;
flex-wrap:wrap ;
justify-content:space-between ;
align-items: center;

}
.pernter-link{
    display: block;
}
.partner-item{
    margin-bottom: 40px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: all 0.6s ease;
   
}
.partner-item:hover{
    transform: scale(1.5);
    transition: all 0.6s ease;
    rotate: 360deg;
}
/* _____________________________sezione squadre_____________*/
.squadre-section{
    background-image: url(../imgs/sfondo1.jpeg);
    background-position: center;
    background-size: contain;
}
.squadre-container{
     background-color: rgba(255, 255, 255, 0.801);
}
.list-squadre{
    font-family: "Faster One" , sans-serif;
    font-size: 40px;
    line-height: 100%;
   letter-spacing:2.2%;

   display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}
.gradient-photo{
    position: relative;
        display: inline-block;
}
.gradient-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    /* Градієнт: від прозорого до кольорового */
    background-image: linear-gradient(90deg, rgba(87, 199, 133, 0.3) 0%, rgba(87, 199, 133, 0.3) 50%, rgba(87, 199, 133, 0.3) 100%);
    transition: all 0.3s ease;
}
.gradient-photo:hover::after {
background-image: linear-gradient(90deg, rgba(87, 199, 133, 0.0) 0%, rgba(87, 199, 133, 0.0) 50%, rgba(87, 199, 133, 00) 100%);
transition: all 1s ease;
}
.img-squadra{
    text-align: center;
    margin-bottom: 40px;
   
    
}
.img-squadra img:hover{
    transform: scale(1.1);
    transition: all 0.3s ease;
  
}
.img-squadra img{
margin-left: auto;
margin-right: auto;

box-shadow: var(--box-shadow);
}
.squadra{
   color: var(--brand-color);
    
    justify-items: center;
    text-align: center;
     margin-bottom: 50px;

     
}
.squadra img{
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
}
/* ----------------------------------prossime partite---------------*/
.prossime-partite{
    background-color: var(--brand-color);
     padding-top: 200px;
}
.partite-div{
    background-color: rgba(255, 255, 255, 0.801);
}

.list-games{
display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.game{
    margin-bottom: 40px;
    border-radius: 25px;
    box-shadow: var(--box-shadow);
}
/*------------------------------galleria-------------------*/
.galleria-title{
    margin-bottom: 60px;
}
.galleria{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;
}
.foto{
    margin-bottom: 40px;
    border-radius: 25px;
    box-shadow: 12px 11px 30px 6px rgba(0,0,0,0.57);
-webkit-box-shadow: 12px 11px 30px 6px rgba(0,0,0,0.57);
-moz-box-shadow: 12px 11px 30px 6px rgba(0,0,0,0.57);
}
.galleria-section{
background-image: url(../imgs/sfondo7.jpeg);
background-position: 0 0;
background-size: contain;
}
.manidimarco-link{
    position: relative;
        right: 30px;
        bottom: 30px;

        border-radius: 25px;
        box-shadow: var(--box-shadow);
}
/* _____________________________pagina chi siamo_____________*/
.main-aboutus{
    background-image: url(../imgs/sfondo1.jpeg);
    padding-top: 200px;
}
.aboutus-description{
background-color: rgba(255, 255, 255, 0.801);
}
.aboutus-section{
    display: block;
    display: flex;
    align-items: center;
    
}
.about-slogan{
font-family: "Faster One" , sans-serif;
        font-size: 60px;
}
.aboutus-text{
    width: 50%;
    
}
.aboutus-text p{
    font-size: 20px;
    margin-bottom: 15px;
    margin-right: 15px;
}
.staff-section{
    background-color: rgba(255, 255, 255, 0.801);
}
/*-------------border card css------------*/

.card {
  position: relative;
  display: inline-block;
  width: 100%; height: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0px;
  color: var(--brand-color);
}

.card.hover-border-11::before,
.card.hover-border-11::after {
  width: 100%; height: 2px;
  background-color: rgb(11, 202, 107);
  z-index: 2;
  transition: 0.35s; 
}
.card.hover-border-11::before {
  top: 0; right: 0;
}
.card.hover-border-11::after {
  bottom: 0; left: 0;
}
.card.hover-border-11:hover::before,
.card.hover-border-11:hover::after {
  width: 0%;
  transition: 0.2s 0.2s ease-out; 
}

.card.hover-border-11 span::before,
.card.hover-border-11 span::after {
  width: 2px; height: 100%;
  background-color: rgb(11, 202, 107);
  z-index: 2;
  transition: 0.25s; 
}
.card.hover-border-11 span::before {
  bottom: 0; right: -2px;
}
.card.hover-border-11 span::after {
  top: 0; left: -2px;
}
.card.hover-border-11 span:hover::before,
.card.hover-border-11 span:hover::after {
  height: 0%;
}
/*-------------------fine border css-----*/
.direttivo-list{
   
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.direttivo-staf{
font-size: medium;
font-family:"Faster One" , 'Arial Narrow', Arial, sans-serif;
color: var(--brand-color);
    font-family: "Faster One" , sans-serif;
    font-size: 30px;
    line-height: 100%;
   letter-spacing:2.2%;
   border: solid,var(--brand-color);
   border-radius: 15px;
    padding: 20px;
    width: 380px;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
    background-color: var(--second-brand-color);
}
.direttivo-staf:hover {
	transform: scale(1.1);
    transition: all 0.3s ease;
}
.portret{
    color: var(--brand-color);
    font-family: "Faster One" , sans-serif;
    font-size: 22px;
    line-height: 100%;
   letter-spacing:2.2%;


}
.portret:hover{
        -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
        animation: heartbeat 1.5s ease-in-out infinite both;
    }

.portret img{
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
}
.list-gioccatore{
   display: flex;
   flex-wrap: wrap;
justify-content: space-between;
}
.schieda-gioccatore{
    width: 380px;
    margin-bottom: 45px;
}

.safe-section{
    background-color: rgba(255, 255, 255, 0.801);
}
.text-saveguard{
    font-size: 30px;
    width: 800px;
    margin-bottom: 20px;
}
/* _____________________________pagina eventi_____________*/

.event-section{
background-image: url(../imgs/sfondo3.jpeg);
background-repeat: no-repeat;
background-position: center;
    background-size: cover;
   
}
.event-container{
    background-color: rgba(255, 255, 255, 0.801);
}
.text-eventi{
    color: var(--brand-color);
    font-family: "Faster One" , sans-serif;
    font-size: 40px;
    line-height: 100%;
   letter-spacing:2.2%;

   margin-bottom: 20px;
}
.list-eventi{
    color: var(--brand-color);
    font-family: "Faster One" , sans-serif;
    font-size: 22px;
    line-height: 100%;
   letter-spacing:2.2%;

   text-align: center;
   
}
.img-eventi{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
}
/* _____________________________pagina palestre e orari_____________*/
.orari-section{
    background-image: url(../imgs/sfondo5.jpeg);
    background-repeat: no-repeat;
    background-size: cover;

    padding-top: 200px;
}
.orari-container{
    background-color: rgba(255, 255, 255, 0.9);
}
.text-palestre{
    font-size: 30px;
    line-height: 100%;
   letter-spacing:2.2%;

   margin-bottom: 20px;
   text-align: center;
}
.resultati-section{
    background-image: url(../imgs/sfondo4.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 200px;

}
/* _____________________________pagina contatti_____________*/
.contact-section{
    background-image: url(../imgs/sfondo\ sito.jpeg);
    padding-top: 200px;
    
}
.contact-container{
    background-color:rgba(255, 255, 255, 0.801);
}
.text-contatti{
    font-size: 30px;
    line-height: 100%;
   letter-spacing:2.2%;

   width: 800px;
   margin-bottom: 40px;
   margin-left: 15px;
}
.contact-link{
    display: inline-block;
    text-align: center;
  padding: 45px;
  border-radius: 25px;
}
.contact-list{
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;

}
.contact-item{
font-size: 40px;
align-content: center;
width: 500px;
height: 200px;
margin-bottom: 20px;
border: solid, black, 1px;
border-radius: 20px;
}
.contact-img{
    margin-left: auto;
    margin-right: auto;
}
.contact-mail{
    width: 600px;
}
/* _____________________________tabella_____________*/
.tabella-section{
    background-image: url(../imgs/sfondo5.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 200px;
}
.tabella-container{
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 40px;
}
.tabella-body > tr:hover {
  background-color:var(--brand-color);
  color: white;
}
.tabella {
  border-collapse: collapse;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 40px;
}
caption{
    font-size: 25px;
    margin-bottom: 20px;
}

.tabella th,
.tabella td {
  padding: 8px;
  border: 1px solid #212121;
}
.div-btn{
    text-align: center;
}
.classifica-btn{
    padding: 20px;
    margin: 20px;
   
    border: solid 1px black;
    border-radius: 50px;
    background-color: var(--brand-color);
    color: var(--second-brand-color);
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.classifica-btn:hover,.classifica-btn:focus{
background-color:var(--second-brand-color);
    color:var(--brand-color);
    border-radius: 10px;
  transform: rotate(15deg);
}
/*______________________________________squadre_____________________________________*/
.teams-section{
    background-image: url(../imgs/sfondo6.jpeg);
    background-attachment: fixed;
    
}
.pulcini-tems{
    margin-top: 200px;
}
.teams-container{
    background-color: rgba(255, 255, 255, 0.801);
}
.tumb-xmille{
   display: block;
    position: fixed;
    bottom: 10px;
    right: 10px;
   width: 200px;
   perspective: 600px
}
.xmille{
   
    width: 200px;
    border-radius: 25px;
    box-shadow: var(--box-shadow);
    transition:transform cubic-bezier(.17,.67,.83,.67)  500ms;
}

.tumb-xmille:hover .xmille{
    transform: scale3d(3, 3, 3) rotate3d(360, 360, 360, 360deg);
    transform-origin: right bottom;
    transition: transform cubic-bezier(.17,.67,.83,.67) 500ms;
}