body{



    font-family: "Prompt", sans-serif;

    color: #324B9B;

    background-color: #FCF7F2;



}



.sec1 {



    position: relative;

    height: 100vh;

    width: 100vw;

    overflow: hidden;

    padding: 4.5%;



}



p{



    font-weight: 200;

    font-size: 20px;

    line-height: 20pt;

    



}



.background {



    background-image: url(../img/Charlie1.svg);

    position: absolute;

    top: 4%;

    right: -1%;

    bottom: 0;

    width: 100%;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: right;

    animation-name: sfondo;

    animation-duration: 0.7s;

    z-index: 1;



}





h1{



    font-size: 18em;

    text-transform: uppercase;

    font-weight: 900;

    position: absolute;

    bottom: -0.3em;

    margin: 0;

    color: #e85c5b;

    opacity: 0;

    animation-name: h1;

    animation-duration: 0.5s;

    animation-fill-mode: forwards;

    transition-timing-function: ease-in;

    animation-delay: 1s;

    z-index: 2;



}





.sec1 h2{



  font-family: "Cormorant", serif;

  font-size: 74px;

  font-weight: 300;

  font-style: italic;

  margin: 0;

  position: absolute;

  bottom: 3em;

  opacity: 0;

  animation-name: h2;

  animation-duration: 0.7s;

  animation-fill-mode: forwards;

  transition-timing-function: ease-in;

  animation-delay: 0.7s;



}





.frecciauno {



    z-index: 0;

    rotate: -128deg;

    height: auto;

    width: 25%;

    position: absolute;

    top: -300px; 

    left: -300px; 

    

    animation: freccia1 0.8s forwards ease-in 1.5s, infilza 0.1s forwards ease-in-out 2.3s;



}





.moschina1{



    opacity: 0;

    position: absolute;

    width: 3%;

    top: 4.5%;

    left: 4.2%;

    rotate: 145deg;

    animation: anatomia 1s forwards 0.5s;

}







/*ANIMAZIONI SEZIONE 1*/





@keyframes sfondo{



    from {

        transform: translateX(100%);

    }

    to {

        transform: translateX(0);

    }



}



@keyframes h2{



    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }



}



@keyframes h1{



    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }



}







@keyframes freccia1 {



    0% {

        top: -300px; 

        left: -300px; 

    }

    100% {

        top: calc(65% - 100px); 

        left: calc(60% - 300px);

    }



}



@keyframes infilza {



    0% {

        transform: rotate(0); 

    }

    25% {

        transform: rotate(5deg); 

    }

    50% {

        transform: rotate(-5deg); 

    }

    75% {

        transform: rotate(5deg); 

    }

    100% {

        transform: rotate(0deg); 

    }



}







/* -------------------------------------------------------------------------- */

/*                                 SEZIONE DUE                                */

/* -------------------------------------------------------------------------- */





.anatomiasez{



    position: relative;

    overflow: hidden;



}







.sec2{



    height: 100vh;

    padding: 3% 3% 0 3%;

    overflow: hidden;



}







.testidue span{



    font-size:45px; 

    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic; 

    color: #324B9B;

    text-transform: lowercase;



}



.testidue h2{



    font-size: 7em;

    text-transform: uppercase;

    font-weight: 900;

    margin: 0;

    color: #e85c5b;

    line-height: 7rem;



}



.fp-viewing-2page .testidue h2{



    opacity: 0;

    animation: anatomia 1s forwards 0.5s;

    



}





.testidue{



    display: flex;

    justify-content: space-between;

    

}



.testidue p{



    width: 50%;



}





.fp-viewing-2page .testidue p{



    opacity: 0;

    animation: anatomia 1s forwards 0.8s;

    

}



.containertestoni{



    padding-top: 4%;

    overflow: hidden;

    



}



.containertestoni img{



    width: 300px;



}





.fp-viewing-2page .samuel{



    opacity: 0;

    animation: anatomia 1s forwards 1s;



}





.fp-viewing-2page .darren{



    opacity: 0;

    animation: anatomia 1s forwards 1.5s;



}



.fp-viewing-2page .brandon{



    opacity: 0;



    animation: anatomia 1s forwards 2s;

    overflow: hidden;



}





.samuel:hover .samuelimg, .darren:hover .darrenimg, .brandon:hover .brandonimg {



    animation: ehno 0.8s infinite;



}







.nome{



    font-size: 25px;

    color: #e85c5b;

    font-weight: 600;

    margin-top: 1.1em;



}



.professione{



    font-size: 25px;

    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic;

    line-height: 0pt;



}



.mosca{



    position: absolute;

    rotate: 90deg;

    top: 50%; 

    left: -100px; 

    width: 60px;

    z-index: 999;



}



.fp-viewing-2page .mosca{



    animation: volo 4s ease-in 3s, bzz 4s infinite alternate 3s, vibrazione 0.1s infinite alternate 3s;

    

}







/*ANIMAZIONI SEZIONE 2*/



@keyframes anatomia{

    from {

      opacity: 0;

    }

    to {

      opacity: 1;

    }

}  



@keyframes ehno{

    0% {

      transform: rotate(6deg); 

    }

    25%{

        transform: rotate(-6deg);

    }

    50% {

      transform: rotate(6deg); 

    }

    75%{

        transform: rotate(-6deg);

    }

    100% {

      transform: rotate(6deg);

    }

  }



  



@keyframes volo {



    0% {

        left: -100px; 

    }



    25%{

        top: 30%;

    }



    50% {

        top: 50%;

        left: calc(50% - 45px); 

    }



    75%{

        top:20%;

    }

    100% {

        left: calc(100% + 50px); 

    }



}



@keyframes vibrazione {



    0% {

        transform: translateX(0); 

    }



    25%{

        transform: translateY(20px);

    }

    50% {

        transform: translateX(10px); 

    }

    75%{

        transform: translateY(-20px);

    }

    100% {

        transform: translateX(-10px); 

    }



}





@keyframes bzz{



    0%{

        rotate: 60deg; 

    }



    25%{

        rotate: 90deg;

    }



    30%{

        rotate: 100deg;

    }



    40%{

        rotate: 150deg;

    }



    50% {

        rotate: 100deg;

    }



    75%{

        rotate: 50deg;

    }



    80%{

        rotate: 100deg;

    }



    90%{

        rotate: 130deg;

    }

 

    

    100% {

        rotate: 100deg;

    }



    

}



  

















/* -------------------------------------------------------------------------- */

/*                                 SEZIONE TRE                                */

/* -------------------------------------------------------------------------- */





.sec3{



    position: relative;

    height: 100vh;

    width: 100vw;

    overflow: hidden;

    padding: 3%;



}







.interobg{



    background-image: url(../img/intero.png);

    width: 100vw;

    height: 100vh;

    position: absolute;

    left: 1.3%;

    bottom: 0.1em;

    background-size: 26%;

    background-repeat: no-repeat;

    background-position:center;

    



}



.fp-viewing-3page .interobg{



    opacity: 0;

    

    animation: sfondointero 1s ease-out forwards 1.2s, anatomia 0.1s forwards 1.2s;

    



}



 

.sec3 span{



    font-size:45px; 

    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic; 

    color: #324B9B;

    text-transform: lowercase;



}



.sec3 h2{



    font-size: 7em;

    text-transform: uppercase;

    font-weight: 900;

    margin: 0;

    color: #e85c5b;

    line-height: 6rem;

    line-height: 7rem;



}



.fp-viewing-3page .sec3 h2{



    opacity: 0;

    animation: anatomia 1s forwards 0.5s;



}



.sec3 .col-5{



   height: 100vh;



}



.sec3 .col-5 p{



    font-weight: 200;

    font-size: 20px;

    line-height: 20pt;

    color: #324B9B;

    width: 25%;

    position: absolute;

    bottom: 2.7em;



}



.fp-viewing-3page .sec3 .col-5 p{



    opacity: 0;

    animation: anatomia 1s forwards 0.8s;

    

}



.sec3 .col-4{



    height: 88vh;



}



.sec3 img{



    height: auto;

    width: 20%;

    margin: 0px;

    padding: 0px;

    

}







.oop{



    padding-left: 3.5em;

    width: 100%;

    overflow: hidden;

    



}



.oop p{





    font-size: 23px;

    font-weight: 300;

    width: 60%;

    line-height: 22pt;

    

    overflow: hidden;

    

    margin-bottom: 0;

    margin-left: 2em;

    padding: 0;



}









.fp-viewing-3page .imgfreccia{



    opacity: 0;

    animation: freccia 1s forwards 1.6s, anatomia 0.1s forwards 1.6s;

    overflow: hidden;



}



.fp-viewing-3page .imgfreccia2{



    opacity: 0;

    animation: freccia 1s forwards 1.8s, anatomia 0.1s forwards 1.8s;

    overflow: hidden;



}



.fp-viewing-3page .imgfreccia3{



    opacity: 0;

    animation: freccia 1s forwards 2s, anatomia 0.1s forwards 2s;

    overflow: hidden;



}



.fp-viewing-3page .imgfreccia4{



    opacity: 0;

    animation: freccia 1s forwards 2.2s, anatomia 0.1s forwards 2.2s;

    overflow: hidden;



}



.fp-viewing-3page .imgfreccia5{



    opacity: 0;

    animation: freccia 1s forwards 2.4s, anatomia 0.1s forwards 2.4s;

    overflow: hidden;



}



.fp-viewing-3page .imgfreccia6{



    opacity: 0;

    animation: freccia 1s forwards 2.6s, anatomia 0.1s forwards 2.6s;

    overflow: hidden;



}





.fp-viewing-3page .att1{



    opacity: 0;

    animation: anatomia 0.5s forwards 2.2s;



}



.fp-viewing-3page .att2{



    opacity: 0;

    animation: anatomia 0.5s forwards 2.4s;



}



.fp-viewing-3page .att3{



    opacity: 0;

    animation: anatomia 0.5s forwards 2.6s;



}



.fp-viewing-3page .att4{



    opacity: 0;

    animation: anatomia 0.5s forwards 2.8s;



}



.fp-viewing-3page .att5{



    opacity: 0;

    animation: anatomia 0.5s forwards 3s;



}



.fp-viewing-3page .att6{



    opacity: 0;

    animation: anatomia 0.5s forwards 3.2s;



}







/*ANIMAZIONI SEZIONE 3*/







@keyframes sfondointero{



    from {

        transform: scale(1%);

      }

      to { scale: (100%);

      }



}





@keyframes freccia{



    from {

        opacity: 0;

        transform: translateX(999%);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }



}





















/* -------------------------------------------------------------------------- */

/*                             SEZIONE QUATTRO                                */

/* -------------------------------------------------------------------------- */

.sec4{



    height: 100vh;

    width: 100vw;

    overflow: hidden;



}



h3{

    

    font-size: 64px;

    color: #FCF7F2;

    font-weight: 900;

    overflow: hidden;

    

}



.sottob{

    position: relative;

    z-index: 995;

}



.soprab{



    position: relative;

    z-index: 998;

}



.fp-viewing-4page h3{

    

    animation: opacità 1.6s linear 0.5s;



}



.sec4 span{



    font-size:75.5px; 

    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic;     

    

}





.pallino {



    position: absolute;

    top: 0;

    right: 0;

    height: 100vh;

    width: 100vw;

    background-color: #e85c5b;

    overflow: hidden;



}



.fp-viewing-4page .pallino{



    position: absolute;

    right: 50%;

    top: -50%;

    width: 20px;

    height: 20px;

    background-color: #e85c5b;

    border-radius: 50%;

    transform: translate(50%, -50%);

    animation: movimento 1.5s ease-out forwards 0.5s, espansione 4s ease forwards 2s;

    overflow: hidden;

    

}



/*bottom: -42%;*/



.balenottera{



    position: absolute;

    z-index: 996;

    rotate: 90deg;

    width: 40%;

    top: 98%;

    left: 26%;

    overflow: hidden;



}











.fp-viewing-4page .balenottera{



    opacity: 0;

    animation: nuoto 4.8s forwards ease-in-out 1.6s, anatomia 0.5s forwards 1.6s;



}

















/*ANIMAZIONI SEZIONE 4*/









@keyframes opacità{



    0%{

        opacity: 0;

    }



    99.99%{

        opacity: 0.1;

    }



    100%{

        opacity: 1;

    }

}









@keyframes movimento {

    from {

        top: -50;

        transform: translateY(-50%);

       

    }

    to {

        top: 49%;

        transform: translate(-50%, -50%);

       

    }

}





@keyframes espansione {

    from {

        right: 51.1%;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        transform: translate(50%, -50%) scale(1);

       

    }

    to {

        width: 100%;

        height: 100%;

        border-radius: 0%;

        top: 0;

        right: 0;

        transform: translate(50%, -50%) scale(100);

       

    }

}





@keyframes forma{



    0%{

        width: 10px;

        height: 10px;

        border-radius: 0 100% 100% 100%;

    }



    100%{

        

        width: 100vw;

        height: 100vh;

        border-radius: 0;

    }



}



@keyframes nuoto{



    0% {



        top: -200%;

        left: 27%; 

        rotate: 40deg;



    }



    50%{



        rotate: 60deg;



    }



    100%{



        top: 98%;

        left: 26%;

        rotate: 90deg;



    }



}































/* -------------------------------------------------------------------------- */

/*                              SEZIONE CINQUE                                */

/* -------------------------------------------------------------------------- */



.sec5{



    padding: 3%;

    margin-bottom: 3%;

    height: 100vh;



}



.sec5 h2{

    



    font-size: 7em;

    font-weight: 900;

    margin: 0;

    color: #e85c5b;

    line-height: 7rem;

    

}



.fp-viewing-5page .sec5 h2{



    opacity: 0;

    animation: anatomia 1s forwards 1.5s;



}



.col-10{



    padding-left: 10em;



}



.col-2{

    rotate: 180deg;



}





.sec5 span{



    font-size:45px; 

    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic; 

    color: #324B9B;

    

}



.balena{



    position: absolute;

    bottom: 0;

    right: 2em;

    width: 72%;

    z-index: 999;



}



.fp-viewing-5page .balena{



    animation: balenanuoto 1.5s ease-in-out;



}



.frecciabalena1{



    

    z-index: 0;

    rotate: -140deg;

    height: auto;

    width: 22%;

    position: absolute;

    left: 25%;

    top: 52%;



}



.fp-viewing-5page .frecciabalena1{



    opacity: 0;

    animation: frecciab1 0.5s linear 1.6s, anatomia 0.1s forwards 1.7s, infilza 0.1s forwards ease-in-out 2.1s;



}



.frecciabalena2{



    z-index: 0;

    rotate: -55deg;

    height: auto;

    width: 22%;

    position: absolute;

    right: 1%;

    top: 70%;

    

}



.fp-viewing-5page .frecciabalena2{



    opacity: 0;

    animation: frecciab2 0.5s linear 3.4s, anatomia 0.1s forwards 3.5s, infilza 0.1s forwards ease-in-out 3.9s;



}









.coso{



    background-color: #e85c5b;

    height: 98.5%;

    width: 200px;

    border-bottom-left-radius: 100px;

    border-bottom-right-radius: 100px;

    overflow: hidden;



    padding-top: 10%;



}





.fp-viewing-5page .coso{



    opacity: 0;

    animation: cosorosso 1s forwards linear 2.2s, anatomia 0.1s forwards 2.3s;



}











.counter1{



    font: 800 40px system-ui;

    content: counter(count);

    

    color: #FCF7F2;

    opacity: 1;





    padding-bottom: 50%;

    rotate: 180deg;





}



.fp-viewing-5page .counter1::after {



    font: 800 40px system-ui;

    content: counter(count);

    opacity: 0;

    animation: counter 1s forwards 2.4s ease-in-out, anatomia 0.1s forwards 2.5s;



    

} 



.stereo{

    width: 28%;

    position: absolute;

    right: 15%;

    top: 37%;

}



.fp-viewing-5page .stereo{



    opacity: 0;

    animation: anatomia 1s forwards 4s;



}



/*ANIMAZIONI SEZIONE 5*/



@keyframes cosorosso{



    0%{

        height: 0;

    }



    100%{



        height: 98.5%



    }

}



@keyframes balenanuoto{



    0%{



        rotate: 90deg;

        bottom: -150%;

        right: -50%;



    }



    50%{

         rotate: 90deg;

    }



    100%{

        rotate: 0deg;

        bottom: 0;

        right: 2em;

    }

}





@keyframes frecciab1{



    0%{



        top: -150%;

        left: -150%;



    }



    100%{



        top: 52%;

        left: 25%;



    }



}



@keyframes frecciab2{



    0%{



        top: -100%;

        right: -150%;



    }



    100%{



        top: 70%;

        right: 1%;



    }



}









@keyframes counter {

    0% {

        counter-increment: count 0;

    }

    3.125% {

        counter-increment: count 1;

    }

    6.25% {

        counter-increment: count 2;

    }

    9.375% {

        counter-increment: count 3;

    }

    12.5% {

        counter-increment: count 4;

    }

    15.625% {

        counter-increment: count 5;

    }

    18.75% {

        counter-increment: count 6;

    }

    21.875% {

        counter-increment: count 7;

    }

    25% {

        counter-increment: count 8;

    }

    28.125% {

        counter-increment: count 9;

    }

    31.25% {

        counter-increment: count 10;

    }

    34.375% {

        counter-increment: count 11;

    }

    37.5% {

        counter-increment: count 12;

    }

    40.625% {

        counter-increment: count 13;

    }

    43.75% {

        counter-increment: count 14;

    }

    46.875% {

        counter-increment: count 15;

    }

    50% {

        counter-increment: count 16;

    }

    53.125% {

        counter-increment: count 17;

    }

    56.25% {

        counter-increment: count 18;

    }

    59.375% {

        counter-increment: count 19;

    }

    62.5% {

        counter-increment: count 20;

    }

    65.625% {

        counter-increment: count 21;

    }

    68.75% {

        counter-increment: count 22;

    }

    71.875% {

        counter-increment: count 23;

    }

    75% {

        counter-increment: count 24;

    }

    78.125% {

        counter-increment: count 25;

    }

    81.25% {

        counter-increment: count 26;

    }

    84.375% {

        counter-increment: count 27;

    }

    87.5% {

        counter-increment: count 28;

    }

    90.625% {

        counter-increment: count 29;

    }

    93.75% {

        counter-increment: count 30;

    }

    96.875% {

        counter-increment: count 31;

    }

    100% {

        counter-increment: count 32;

    }

}





 /*

@keyframes counter {

    0% {

        counter-increment: count 0;

    }

    10% {

        counter-increment: count 1;

    }

    20% {

        counter-increment: count 2;

    }

    30% {

        counter-increment: count 3;

    }

    40% {

        counter-increment: count 4;

    }

    50% {

        counter-increment: count 5;

    }

    60% {

        counter-increment: count 6;

    }

    70% {

        counter-increment: count 7;

    }

    80% {

        counter-increment: count 8;

    }

    90% {

        counter-increment: count 9;

    }

    100% {

        counter-increment: count 10;

    }

    

    }*/



























/* -------------------------------------------------------------------------- */

/*                                SEZIONE SEI                                 */

/* -------------------------------------------------------------------------- */





.sec6{



    padding: 3%;

    height: 100vh;

    overflow: hidden;



}

.sec6 span{



    font-size:45px; 

    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic; 

    color: #524B9B;

    text-transform: lowercase;



}



.sec6 h2{



    font-size: 7em;

    text-transform: uppercase;

    font-weight: 900;

    margin: 0;

    color: #e85c5b;

    line-height: 7rem;



}



.row{



    height: 100vh;

   

}







.branndon{



    width: 23%;

    position: absolute;

    left: 25.5%;

    bottom: 0%;

    transform: scaleX(-1);

    

}



.problemi{

    height: 90vh;

}





.col-bg1{



    animation-name: sfondo3;

    animation-duration: 0.7s;

    animation-iteration-count: ease-in;



}



.balenona{

   

    width: 50%;

    position: absolute;

    bottom: 0;

    left: -1.5%;

    z-index: 1;



}





.pallina{



    border-radius: 50%;

    background: #e85c5b;

    width: 28px;

    height: 28px;

    margin-right: 6%;



    overflow: hidden;

}



.problemi p{



    width: 80%;

    margin: 0;



}



.conpp{

    overflow: hidden;

}





.fp-viewing-6page .sec6 h2{



    opacity: 0;

    animation: anatomia 1s forwards 0.5s;

    

}



.fp-viewing-6page .balenona{



    opacity: 0;

    animation: sec6img1 0.7s forwards 1s, anatomia 0.1s forwards 1s;

    

}



.fp-viewing-6page .branndon{



    opacity: 0;

    animation: sec6img2 0.7s forwards 1.3s, anatomia 0.1s forwards 1.3s;



}



.fp-viewing-6page .pp1{



    opacity: 0;

    animation: animpallina 1s forwards 1.6s, anatomia 0.1s forwards 1.6s;

    overflow: hidden;



}



.fp-viewing-6page .prob1{



    opacity: 0;



    animation: anatomia 0.5s forwards 2.4s;

    overflow: hidden;



}



.fp-viewing-6page .pp2{



    opacity: 0;

    animation: animpallina 1s forwards 2.9s, anatomia 0.1s forwards 2.9s;

    overflow: hidden;



}



.fp-viewing-6page .prob2{



    opacity: 0;

    animation: anatomia 0.5s forwards 3.7s;

    overflow: hidden;



}



.fp-viewing-6page .pp3{



    opacity: 0;

    animation: animpallina 1s forwards 4.2s, anatomia 0.1s forwards 4.2s;

    overflow: hidden;



}



.fp-viewing-6page .prob3{



    opacity: 0;



    animation: anatomia 0.5s forwards 5s;



}





/*ANIMAZIONI SEZIONE 6*/





@keyframes sec6img1{



   from{

    left: -200%;

   }



   to{

    left: -1.5%;

   }



}



@keyframes sec6img2 {



    from{

        bottom: -200%;

    }



    to{

        bottom: 0%;

    }

    

}







@keyframes animpallina{



    from {

        opacity: 0;

        transform: translateX(2999%);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }



}















































/* -------------------------------------------------------------------------- */

/*                              SEZIONE SETTE                                 */

/* -------------------------------------------------------------------------- */





.sec7{



    height: 100vh;

    width: 100vw;

}







h4{



    font-size: 120px;

    font-weight: 900;

    color: #FCF7F2;



}



.tipopremio{



    font-size: 40px;

    font-weight: 600;

    color: #FCF7F2;



}



.premio{



    font-family: 'Cormorant', serif; 

    font-weight:200;

    font-style: italic;    



    font-size: 25px;

    line-height: 30px;

    color: #FCF7F2;

    

    

}





.spiegazione{



    width: 58%;

    font-weight: 300;

    color: #FCF7F2;

    

}



.contt{

    position: relative;

    z-index: 999;

    opacity: 1;

}





.pallino2{



    position: absolute;

    top: 0;

    right: 0;

    height: 100vh;

    width: 100vw;

    background-color: #e85c5b;

    overflow: hidden;



}



.fp-viewing-7page .pallino2{



    position: absolute;

    

    width: 20px;

    height: 20px;

    background-color: #e85c5b;

    border-radius: 50%;

    transform: translate(50%, -50%);

    animation: movimento2 1.5s ease-out forwards 0.5s, espansione 4s ease forwards 2s;

    overflow: hidden;

    

}











/*ANIMAZIONI SEZIONE 7*/







@keyframes movimento2 {



    from {



        

        top: -48%;

        right: 50%;

        transform: translateY(-50%);

       

    }

    to {

        top: 49%;

        right: 50%;

        transform: translate(-50%, -50%);

       

    }



}







.bolla{



    width: 1%;

    position: absolute;

    bottom: -5%;

    opacity: 0;

    

    



}



.fp-viewing-7page .bolla{



    animation: gluglu 5s ease-in infinite 2.5s, anatomia 0.5s forwards 1.6s;



}



.bolla2{



    width: 1.5%;

    position: absolute;

    opacity: 0;

    bottom: -5%;

   

    



}



.fp-viewing-7page .bolla2{



    animation: gluglu2 6s ease-in infinite 2.8s, anatomia 0.5s forwards 1.6s;



}



.bolla3{



    width: 1.5%;

    position: absolute;

    opacity: 0;

    bottom: -5%;

    

    



}





.fp-viewing-7page .bolla3{



    animation: gluglu3 7s ease-in infinite 3s, anatomia 0.5s forwards 1.6s;



}







.bolla4{



    width: 1%;

    position: absolute;

    opacity: 0;

    bottom: -5%;

    

    



}



.fp-viewing-7page .bolla4{



    animation: gluglu4 4s ease-in infinite 4s, anatomia 0.5s forwards 1.6s;



}





.bolla5{



    width: 1%;

    position: absolute;

    opacity: 0;

    bottom: -5%;

    

    



}



.fp-viewing-7page .bolla4{



    animation: gluglu5 4.5s ease-in infinite 3s, anatomia 0.5s forwards 1.6s;



}



@keyframes gluglu5{



    0%{



        bottom: -10%;

        right: 53%;



    }





    



    100%{



        bottom: 110%;

        right: 40%;



    }



}







@keyframes gluglu4{



    0%{



        bottom: -10%;

        right: 50%;



    }





    



    100%{



        bottom: 110%;

        right: 30%;



    }



}







@keyframes gluglu3{



    0%{



        bottom: -10%;

        right: 52%;



    }





    



    100%{



        bottom: 110%;

        right: 45%;



    }



}





@keyframes gluglu2{



    0%{



        bottom: -10%;

        right: 50%;



    }





   



    100%{



        bottom: 110%;

        right: 60%;



    }



}



@keyframes gluglu{



    0%{



        bottom: -10%;

        left: 50%;



    }





  



    100%{



        bottom: 110%;

        left: 45%;



    }



}









/*bollicine



.bubbles {



    position: absolute;

    width: 100%;

    height: 100vh;

    overflow: hidden;

    bottom: 0;



}



.fp-viewing-7page .bubbles{



    opacity: 0;

    animation: anatomia 3s forwards 2.2s;



}

  

.bubble {



    position: absolute;

    left: var(--bubble-left-offset);

    bottom: -75%;

    display: block;

    width: var(--bubble-radius);

    height: var(--bubble-radius);

    border-radius: 50%;

    animation: float-up var(--bubble-float-duration) 2.5s ease-in infinite;



  }





.bubble::before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #FCF7F2;

    opacity: 0.3;

    border-radius: inherit;

    animation: var(--bubble-sway-type) var(--bubble-sway-duration) 2.5s ease-in-out alternate infinite;

  }

  .bubble:nth-child(0) {

    --bubble-left-offset: 34vw;

    --bubble-radius: 8vw;

    --bubble-float-duration: 10s;

    --bubble-sway-duration: 4s;

    --bubble-float-delay: 0s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(1) {

    --bubble-left-offset: 29vw;

    --bubble-radius: 9vw;

    --bubble-float-duration: 10s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 0s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(2) {

    --bubble-left-offset: 30vw;

    --bubble-radius: 2vw;

    --bubble-float-duration: 12s;

    --bubble-sway-duration: 4s;

    --bubble-float-delay: 0s;

    --bubble-sway-delay: 1s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(3) {

    --bubble-left-offset: 6vw;

    --bubble-radius: 9vw;

    --bubble-float-duration: 11s;

    --bubble-sway-duration: 4s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(4) {

    --bubble-left-offset: 9vw;

    --bubble-radius: 6vw;

    --bubble-float-duration: 8s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 3s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(5) {

    --bubble-left-offset: 14vw;

    --bubble-radius: 4vw;

    --bubble-float-duration: 9s;

    --bubble-sway-duration: 4s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(6) {

    --bubble-left-offset: 67vw;

    --bubble-radius: 10vw;

    --bubble-float-duration: 11s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 3s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(7) {

    --bubble-left-offset: 32vw;

    --bubble-radius: 4vw;

    --bubble-float-duration: 7s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(8) {

    --bubble-left-offset: 47vw;

    --bubble-radius: 9vw;

    --bubble-float-duration: 8s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 2s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(9) {

    --bubble-left-offset: 4vw;

    --bubble-radius: 3vw;

    --bubble-float-duration: 10s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 4s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(10) {

    --bubble-left-offset: 0vw;

    --bubble-radius: 5vw;

    --bubble-float-duration: 12s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(11) {

    --bubble-left-offset: 20vw;

    --bubble-radius: 3vw;

    --bubble-float-duration: 12s;

    --bubble-sway-duration: 4s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(12) {

    --bubble-left-offset: 41vw;

    --bubble-radius: 3vw;

    --bubble-float-duration: 6s;

    --bubble-sway-duration: 4s;

    --bubble-float-delay: 2s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(13) {

    --bubble-left-offset: 99vw;

    --bubble-radius: 3vw;

    --bubble-float-duration: 6s;

    --bubble-sway-duration: 5s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 2s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(14) {

    --bubble-left-offset: 92vw;

    --bubble-radius: 6vw;

    --bubble-float-duration: 6s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 3s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(15) {

    --bubble-left-offset: 49vw;

    --bubble-radius: 2vw;

    --bubble-float-duration: 10s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 0s;

    --bubble-sway-type: sway-right-to-left;

  }

  .bubble:nth-child(16) {

    --bubble-left-offset: 62vw;

    --bubble-radius: 7vw;

    --bubble-float-duration: 12s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 1s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(17) {

    --bubble-left-offset: 43vw;

    --bubble-radius: 10vw;

    --bubble-float-duration: 10s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 4s;

    --bubble-sway-delay: 1s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(18) {

    --bubble-left-offset: 9vw;

    --bubble-radius: 5vw;

    --bubble-float-duration: 11s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 0s;

    --bubble-sway-delay: 1s;

    --bubble-sway-type: sway-left-to-right;

  }

  .bubble:nth-child(19) {

    --bubble-left-offset: 16vw;

    --bubble-radius: 7vw;

    --bubble-float-duration: 12s;

    --bubble-sway-duration: 6s;

    --bubble-float-delay: 1s;

    --bubble-sway-delay: 4s;

    --bubble-sway-type: sway-right-to-left;

  }

  

  

  @keyframes float-up {

    to {

      transform: translateY(-175vh);

    }

  }

  @keyframes sway-left-to-right {

    from {

      transform: translateX(-100%);

    }

    to {

      transform: translateX(100%);

    }

  }

  @keyframes sway-right-to-left {

    from {

      transform: translateX(100%);

    }

    to {

      transform: translateX(-100%);

    }

  }



bollicine*/



























































/* -------------------------------------------------------------------------- */

/*                               SEZIONE OTTO                                 */

/* -------------------------------------------------------------------------- */



.sec8{



    height: 100vh;

    width: 100vw;

    padding: 3%;

    overflow: hidden;



}



.sec8 h2{



    font-size: 7em;

    text-transform: uppercase;

    font-weight: 900;

    color: #e85c5b;

    line-height: 7rem;



    width: 50%;

    overflow: hidden;

    margin-bottom: 8%;

    overflow: hidden;





}



.sec8 p{



    width: 36%;

    

}



.moscasec8{



    position: absolute;

    top: 6%;

    right: -50%;

    rotate: -120deg;

    width: 3%;

    overflow: hidden;



}







.fat{



    position: absolute;

    bottom: 0;

    right: 4%;

    width: 29%;

    overflow: hidden;

    /*width: 32.1%;*/



}





.fp-viewing-8page .sec8 h2{



    opacity: 0;



    animation: anatomia 0.5s forwards 0.7s;



}



.fp-viewing-8page .sec8 p{





    opacity: 0;



    animation: anatomia 0.5s forwards 1s;





}



.fp-viewing-8page .fat{



    opacity: 0;



    animation: fatanim 1.2s forwards 1s, anatomia 0.1s forwards 1s;

    overflow: hidden;



}









.fp-viewing-8page .moscasec8{



    opacity: 0;



    animation: anatomia 0.5s forwards 2s, bzz2 4s forwards 2.8s, volo2 4s ease-in forwards 2.8s,  vibrazione 0.1s infinite alternate 2.8s;



    overflow: hidden;

}





@keyframes volo2 {



    0% {

        right: -10%; 

        top: 5%;

    }



    25%{

        right: 20%;

        top: 30%;

    }



    50% {

        top: 50%;

        right: 60%

    }



    75%{

        top:75%;



        right: 80%;



    }

    100% {



	    top: 180%;

        right: 90%;



    }



}





@keyframes bzz2{



    0%{

         rotate: -60deg;

    }



    25%{

        rotate: -120deg;

    }



   



    50% {

        rotate: -100deg;

    }



    75%{

        rotate: -150deg;

    }



  



    90%{

        rotate: -200deg;

    }

 

    

    100% {

        rotate: -200deg;

    }



    

}







@keyframes fatanim {



    from{

        bottom: -200%;

    }

    

    to{

        bottom: 0;

    }



}











































/* -------------------------------------------------------------------------- */

/*                               SEZIONE NOVE                                 */

/* -------------------------------------------------------------------------- */







.sec9{

    height: 100vh;

    width: 100vw;

    padding: 3%;

}

.sec9 h5{



    font-family: 'Cormorant', serif; 

    font-weight:500;

    font-style: italic;    

    font-size: 64px;

    line-height: 80pt;

    margin: 0;

    color: #FCF7F2;

    



}



.fp-viewing-9page .testilast{



    opacity: 0;

    animation: opacità 1.58s forwards 1.9s;



}



.testilast{



    padding-left: 10%;

    padding-right: 10%;

    margin: 0;

    position: relative;

    z-index: 999;



}



.sec9 p{



    font-size: 23px;

    font-weight: 400;

    opacity: 0.5;

    color: #FCF7F2;

    

}





.moscasec9{



    position: absolute;

    top: 2%;

    right: 82%;

    rotate: -200deg;

    width: 3%;

    overflow: hidden;



}





.fp-viewing-9page .moscasec9{



    opacity: 0;



    animation: volo3 2s ease-in forwards 0.5s, bzz3 2s forwards 0.5s, vibrazione 0.1s  0.5s 22 forwards , anatomia 0.5s forwards 0.5s;



    overflow: hidden;



}





.frecciasec9{



    width: 15%;

    position: absolute;

    left: 35%;

    top: 41%;

    rotate: 225deg;



}



.fp-viewing-9page .frecciasec9{



    opacity: 0;



    animation: freccia 0.5s forwards 2.8s;



}





.pallino9 {



    position: absolute;

    top: 0;

    right: 0;

    height: 100vh;

    width: 100vw;

    background-color: #e85c5b;

    overflow: hidden;



}









.fp-viewing-9page .pallino9{



    opacity: 0;

    position: absolute;

    right: 52.8%;

    top: 53.5%;

    width: 20px;

    height: 20px;

    background-color: #e85c5b;

    border-radius: 50%;

    transform: translate(50%, -50%);

    animation: espansione2 4s ease forwards 3.3s, anatomia 0.1s forwards 3.3s;

    overflow: hidden;

    

}







@keyframes espansione2 {



    from {

        right: 52.8%;

        width: 20px;

        height: 20px;

        border-radius: 50%;

        transform: translate(50%, -50%) scale(1);

       

    }

    to {

        width: 100%;

        height: 100%;

        border-radius: 0%;

        top: 0;

        right: 0;

        transform: translate(50%, -50%) scale(100);

       

    }

    

}





@keyframes freccia{



    from {

        opacity: 0;

        transform: translateX(999%);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }



}











@keyframes volo3 {



    0% {

        right: 82%; 

        top: -15%;

    }



    50%{

        right: 70%;

        top: 20%;

    }



    100% {

        top: 50%;

        right: 50%

    }





}





@keyframes bzz3{



    0%{

         rotate: -200deg;

    }



    50%{

        rotate: -240deg;

    }

    

    75%{



        rotate: -220deg;



    }



    90%{



        rotate: -240deg;

    }



    100%{

        rotate: -320deg;

    }



    

}













































.fp-watermark{

    display: none;

}