/* SCENA - IN BACKGROUND */
#scene { position:absolute; width:100%; height:100%; padding: 0px; margin: 0px; z-index:1; 
         -o-transition: all 0.3s; 
        -moz-transition: all 0.3s; 
        -webkit-transition: all 0.3s; 
        transition: all 0.3s; 
}
#scene li { position:absolute !important; padding: 0px; margin: 0px; 
            -o-transition: all 0.3s; 
            -moz-transition: all 0.3s; 
            -webkit-transition: all 0.3s; 
            transition: all 0.3s; 
}
.liFull { width:100%; height:100%; }

/* NELLA SCENA - CASA */
            
#img_montagne { position:absolute; width:100%; height:105%; background:url('/img/montagne.png') no-repeat center bottom; background-size: 100% auto;  }
#img_casa { position:absolute; width:100%; height:105%; background:url('/img/casa.png') no-repeat center bottom; background-size: 100% auto;  }
#img_dosso { position:absolute; width:100%; height:105%; /*right:-5%;*/  background:url('/img/dosso_dx.png') no-repeat center bottom; background-size: 100% auto;  }


/* PARALLAX CENTRA */
#scene.center {
    -o-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
#scene li.center {
    -o-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    
}


/* ANIMAZIONE COMPARSA OGGETTI */
.imgparallax {  bottom: -110%; }


.imgparallax.first  { bottom:-5%; }
.imgparallax.second { bottom:-5%; }
.imgparallax.third  { bottom:-5%; }
.imgparallax.forceGPU {
    -o-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
}
.imgparallax.anim-bottom { bottom:-5%; }

.imgparallax.first-transition { 
             -o-transition: bottom 0.6s cubic-bezier(1,-0.2,0,1.2);
            -ms-transition: bottom 0.6s cubic-bezier(1,-0.2,0,1.2);
           -moz-transition: bottom 0.6s cubic-bezier(1,-0.2,0,1.2);
        -webkit-transition: bottom 0.6s cubic-bezier(1,-0.2,0,1.2);
        transition: bottom 0.6s cubic-bezier(1,-0.2,0,1.2);
}                                                                 
.imgparallax.second-transition { 
             -o-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.4s;
            -ms-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.4s;
           -moz-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.4s;
        -webkit-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.4s;
        transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.4s;
}                                                                 
.imgparallax.third-transition { 
             -o-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.5s;
            -ms-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.5s;
           -moz-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.5s;
        -webkit-transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.5s;
        transition: bottom 0.8s cubic-bezier(1,-0.2,0,1.2) 0.5s;
}
            

/* NELLA SCENA - LOGO */
#logo {position:absolute; left:50%; top:50%; width:250px; margin-left:-125px; margin-top:-50px; opacity:0.3; cursor:pointer; 
            -o-transition: all 0.7s ease-in;
            -ms-transition: all 0.7s ease-in;
            -moz-transition: all 0.7s ease-in;
        -webkit-transition: all 0.7s ease-in;
        transition: all 0.7s ease-in;
                    
}
#logo.zoom {width:300px; margin-top:-50px; margin-left:-150px; opacity:0.7; }
#logo:hover { opacity:1; }
#logo.hide { opacity:0; }
            

/* NELLA SCENA - MANIFESTO */
#manifesto { position:absolute; overflow:hidden; width:670px; height:670px; top:50%; left:50%; margin:-335px 0px 0px -335px; 
             cursor:pointer; z-index:99999;
            -moz-border-radius: 335px; 
            -webkit-border-radius: 335px; 
            border-radius: 335px;
            -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
            -ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
            -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
            -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
            
            -o-transform: scale(0);
            -ms-transform: scale(0);
            -moz-transform: scale(0);
            -webkit-transform: scale(0);
            transform: scale(0); 
}

#manifesto.show { -o-transform: scale(1);
                    -ms-transform: scale(1);
                    -moz-transform: scale(1);
                    -webkit-transform: scale(1);
                    transform: scale(1); }
                    
#manifesto .background { position:absolute; top:0px; left:0px; width:100%; height:inherit; background-color:#000000; opacity:0.7; 
                        -o-transition: all 0.3s; 
                        -ms-transition: all 0.3s; 
                        -moz-transition: all 0.3s; 
                        -webkit-transition: all 0.3s; 
                        transition: all 0.3s; 
}
#manifesto:hover .background { opacity:1; }
#manifesto .testo { position:absolute; top:85px; left:85px; width:500px; height:500px; text-align:center; font-size:22px; font-weight:200; color:#ffffff;  }
#manifesto .testo img { position:relative; display:block; width:175px; height:auto; margin:0px 162px 30px 162px; }
#manifesto .testo span { color:#c8be00; }




@media screen and (min-width: 600px) and (max-width:700px) {
    
    #manifesto.show { -o-transform: scale(0.85);
                    -ms-transform: scale(0.85);
                    -moz-transform: scale(0.85);
                    -webkit-transform: scale(0.85);
                    transform: scale(0.85); }

}

@media screen and (min-width: 500px) and (max-width:599px) {
    
    #manifesto.show { -o-transform: scale(0.7);
                    -ms-transform: scale(0.7);
                    -moz-transform: scale(0.7);
                    -webkit-transform: scale(0.7);
                    transform: scale(0.7); }

}

@media screen and (min-width: 400px) and (max-width:499px) {
    
    #manifesto.show { -o-transform: scale(0.6);
                    -ms-transform: scale(0.6);
                    -moz-transform: scale(0.6);
                    -webkit-transform: scale(0.6);
                    transform: scale(0.6); }

}

@media screen and (min-width: 0px) and (max-width:399px) {
    
    #manifesto.show { -o-transform: scale(0.5);
                    -ms-transform: scale(0.5);
                    -moz-transform: scale(0.5);
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5); }

}