html{
    box-sizing: border-box;    
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* STILI BASE  */

.container{
    height: 100vh;

    width: 100%;
 
}

.fp-watermark{
    display: none;
}
   
   
   
   .body {
        font-family: "Cormorant Garamond", serif;
   
    }



    /* HOME*/

    .home{
        background-image: url(../img/Scena-tratta-dal-film-Paris-is-burning.jpg);
  
        background-size: cover;
        background-position: center; /* Centra l'immagine */

        display: flex;             /* Usa Flexbox per il layout */
        flex-direction: column;    /* Posiziona gli elementi in colonna */
        justify-content:flex-end;   /* Centra gli elementi verticalmente */
        align-items: center;       /* Centra gli elementi orizzontalmente */
        height: 100vh;             /* Imposta l'altezza della sezione per centrare verticalmente */
        text-align: center;
       
        color: white;


        
    }
    


    .bigger-title{
        font-size: 20em;
        font-weight: 500;
        margin: 0;
    }

  .smaller-title{
    font-size: 3em;
    font-weight: 500;
    margin: 0;
  }



  
  .smaller-title .bigger-title{
    margin: 4px 0;            /* Aggiunge spazio tra gli elementi */
    padding: 5px;
    
  }




/* VOGUE*/



.canzone-griglia{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-template-rows: 95vh;
    position: inherit;
}

.vogue-sx{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;


}

.vogue-sx img{
    width: 100%;
}
.fp-viewing-secondPage .vogue-sx{
    animation-name: slideInLeft;
      animation-duration: 3s;
      
      
    }



.vogue-dx img{
    width: 100%;
}

.fp-viewing-secondPage .vogue-dx{
    animation-name: slideInRight;
      animation-duration: 3s;
      
      
    }


.vogue-dx{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    

}

    

    .vogue-caption{
      color:#E65783;
      font-size: 3em; 
      text-align: center;
      width: 100%;
      padding-bottom: 2px;
      justify-content: center;
      padding-top: 100px;
      
      
    }


    .vogue-caption h2{
        font-weight: 400;
    }


    .fp-viewing-secondPage .vogue-caption h2{
        animation-name: zoomInUp;
          animation-duration: 2s;
          
          
        }

    span{
        font-style: italic;
    }

    .subtitle{
        color: black;
        font-size: 0.7em;
    }

    .fp-viewing-secondPage .subtitle{
        animation-name: fadeInUpBig;
          animation-duration: 2s;
          
          
        }
 

    /* ORIGINE*/


    .origine{
        background-color: #E65783;
        display: flex;
        justify-content: center; 
        height: 90vh;

       
    }

   


.origine-img{
    width: 55%;
    
    object-fit: fill; /* Mantiene le proporzioni dell'immagine */
    position: absolute;
   
}


.fp-viewing-2 .origine-img{
    animation-name: fadeInLeft;
      animation-duration: 3.5s;
      
      
    }

.madonna{
    width: 50%;
    padding: 0;
}


.origine-caption{
  
   
    text-align: center;
   
}


.origine-caption h1{
    font-size: 19em;
    color: white;
    font-weight: 400;
    padding: 0;
   
   margin-left: 600px;
   margin-top: 0;
   margin-bottom: 0;


   
  
}


.fp-viewing-2 .origine-caption h1{
    animation-name: fadeInRight;
      animation-duration: 2s;
      
      
    }

.origine-trafiletto{
    text-align: justify;
    font-size: 1.2em;
    text-justify: inter-word;
    color: white;
    margin-right: 80px;
    margin-left: 700px;
    margin-top: 200px;
   
    
}


.origine-trafiletto span{
    font-style: italic;
}

.fp-viewing-2 .origine-trafiletto{
    animation-name: fadeInRight;
      animation-duration: 2s;
      
      
    }


/* IDEOLOGIA*/

.ideologia{
    height: 100vh;
    background-image: url(../img/Group\ 8\ \(2\).png);
  
    background-size: cover;
    
}



.parte-1{
    height: 100vh;
}
.title-1{
    font-size: 25em;
    color: #E65783;
   
   
    font-weight: 400;
    margin: 0px;
    padding: 0px;

    justify-content:flex-start;   /* Centra gli elementi verticalmente */
    align-items: center;       /* Centra gli elementi orizzontalmente */
    height: 80vh;             /* Imposta l'altezza della sezione per centrare verticalmente */
    text-align: center;
   
}


.fp-viewing-3 .title-1{
    animation-name: fadeInUp ;
      animation-duration: 2s;
      
      
    }

.ideologia-container{
    display: flex;
    justify-content: space-between;
}
.p-1{
    
 text-align: justify;
    font-size: 1.2em;
    text-justify: inter-word;
    color: black;
    margin-right: 100px;
    margin-left: 40px;
}


.p-1 span{
    font-style: italic;
}


.fp-viewing-3 .p-1{
    animation-name: fadeInUp ;
      animation-duration: 2s;
      
      
    }
   

.ideologia-caption-1{
    width: 50%;
    text-align: left;
   margin: 0;
}





/* OGGI?*/




.oggi{
    height:100vh;
    background-image: url(../img/Runway.png);
  
    background-size: cover;
}


.p-2{
    text-align: justify;
       font-size: 1.2em;
       text-justify: inter-word;
       color: white;
       margin-left: 800px;
       margin-right: 50px;
       margin-bottom: 0;

   
       
   }


   .fp-viewing-4 .p-2{
    animation-name: fadeInRight;
      animation-duration: 2s;
      
      
    }








   .oggi-container{
    height: 70vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
   
   }



.title-2{
   
    font-size: 23em;
    color: white;
    
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;
   
    
}

.fp-viewing-4 .title-2{
    animation-name: fadeInLeft;
      animation-duration: 2s;
      
      
    }

.oggi-container img{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
  
    
}

.fp-viewing-4 .oggi-container img{
    animation-name: flip;
      animation-duration: 1.7s;
      
      
    }
.ideologia-caption-2{
    
    text-align: right;
    
    
    align-items: center;
    
    
}


.ideologia-caption-2 span{
    font-style: italic;
}






/* STILI*/


.stili-griglia{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: 80vh;
   margin-top: 40px;
    
}

.fp-viewing-5 .stili-griglia{
    animation-name: zoomIn;
      animation-duration: 3s;
      
      
    }




.flip-card {
    
    perspective: 1000px;
    cursor: pointer;
    margin: 0;
}

.flip-card-inner {
    width: 90%;
    height: 90%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    width: 90%;
    height:90%;
    position: absolute;
    backface-visibility: hidden;
    margin: 0;
}

.flip-card-front img,
.flip-card-back img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}


.flip-card-front img{
    width: 100%;
}

.flip-card-back {
    transform: rotateY(180deg);
}



.stili-caption{
    text-align: center;
    justify-content: center;
    font-size:1.5em ;
}

.stili-title{
    color: #E65783;
    font-weight: 400;
    font-size: 4em;
    margin: 0;
} 

.stili-title span{
    font-style: italic;
}


.fp-viewing-5 .stili-title{
    animation-name: slideInDown;
      animation-duration: 2s;
      
      
    }

.stili{
    height: 100vh;
}







/* 5 ELEMENTI*/

.elementi-vogue-title{
    font-size: 7em;
   font-weight: 400;
    color: white;
    text-align: center;
    padding-top: 20px;
}


.fp-viewing-7-0 .elementi-vogue-title{
    animation-name: tada;
      animation-duration: 2s;
      
      
    }



.elementi-vogue-title span{

    font-style: italic;  
}









.slide h2{

    color: white;
    font-weight: 400;
    font-size: 5em;
font-style: italic;
    padding-left: 150px;
    margin: 0;
  
}

.slide p{
    color: white;
    padding-left: 150px;
    font-size: 1.3em;
    font-weight: 300;
    text-align: justify;

  


}


.hands-performance{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



.hands-performance-caption{
   display: flex;
   flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    text-align: justify;
   


}

.fp-viewing-7-1 .hands-performance-caption{
    animation-name: slideInLeft;
      animation-duration: 1.5s;
      
      
    }


.hands-performance img{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    

}


.catwalk{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



.catwalk-caption{
   display: flex;
   flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 90%;
    text-align: justify;
   


}


.fp-viewing-7-2 .catwalk-caption{
    animation-name: slideInLeft;
      animation-duration: 1.5s;
      
      
    }




.catwalk img{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 60%;
    

}



.duckwalk{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



.duckwalk-caption{
   display: flex;
   flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
   


}

.fp-viewing-7-3 .duckwalk-caption{
    animation-name: slideInLeft;
      animation-duration: 1.5s;
      
      
    }


.duckwalk img{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    

}





.spin-and-dips{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



.spin-and-dips-caption{
   display: flex;
   flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 80%;
   


}


.fp-viewing-7-4 .spin-and-dips-caption{
    animation-name: slideInLeft;
      animation-duration: 1.5s;
      
      
    }


.spin-and-dips img{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 70%;
    

}



.floor-performance{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



.floor-performance-caption{
   display: flex;
   flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
   


}


.fp-viewing-7-5 .floor-performance-caption{
    animation-name: slideInLeft;
      animation-duration: 1.5s;
      
      
    }


.floor-performance img{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    

}




/* final-page */


.final-page{
    margin: 0;
    height: 100vh;
    background-image: url(../img/final-definitiva.gif);
  
    background-size: cover;
    background-position: center; /* Centra l'immagine */

    display: flex;
    align-items: center;
    justify-content: flex-end;
  
    
  }

  .final-page-title{
    color: white;
    font-size: 13em;
    margin: 0;
    font-weight: 400;
    
  }

  .fp-viewing-8 .final-page-title{
    animation-name: flip;
      animation-duration: 2s;
      
      
    }


























/* ANIMAZIONI*/




@keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }