@keyframes fromtop {



    from {



       transform:translatey(-100%);



       opacity: 0;



    }







    to {



       mtransform:translatey(0);



       opacity: 1;



    }



}







@keyframes fadein {



    from {



       opacity: 0;



    }



    100% {



       opacity: 1;



    }



}







@keyframes frombottom {



    from {



       transform:translatey(100%);



    }



    20% {



       mtransform:translatey(0);



    }



}





@keyframes frombottomFooter {

    from {

       transform:translatey(100%);

       margin-bottom: -100%;

    }

    100% {

       transform:translatey(0);

       margin-bottom: 0;

    }

}





.title-container{



    animation: fromtop 0.5s forwards !important;



    animation-timeline: auto !important;



}







.par{



    animation: fadein linear forwards;



    animation-timeline: view();



    animation-range: entry 10% entry 25%;



    opacity: 0;



}







.par > div{



    animation: frombottom linear forwards;



    animation-timeline: view();



    animation-range: entry 0% entry 25%;



}







footer{



    animation: frombottomFooter linear both;



    animation-timeline: view();



    animation-range: entry 40% entry 90%;



}







.prodotto{



    animation:none !important;



    animation-timeline: none;



    animation-range: none;



}







.parVariant{



    animation: fadein linear forwards ;



    animation-timeline: view() !important;



    animation-range: entry 10% entry 20% ;



    opacity: 0;



}







.parVariant2{



    animation:none !important;



    animation-timeline: none;



    animation-range: none;



    opacity: 1 !important;



}







#Privacy .par{



    animation:none !important;



    animation-timeline: none;



    animation-range: none;



    opacity: 1 !important;



}







#Privacy .par > div{



    animation:none !important;



    animation-timeline: none;



    animation-range: none;



    opacity: 1 !important;



}



.par div.title-hiddenLayer{

    opacity: 0 !important;

}



.par div.title-hiddenLayer.active{

    opacity: 1 !important;

}



@media (max-width: 768px) {



    .par, .par > div, .parVariant, .parVariant > div, footer { 



            animation: none !important; 



            opacity: 1 !important;



        }



}