/* ---------- Site Effect Transition ---------- */

.effect_transition { 
    -ms-transition: all .25s ease-out; 
    -moz-transition: all .25s ease-out; 
    -webkit-transition: all .25s ease-out; 
    -o-transition: all .25s ease-out; 
    transition: all .25s ease-out; 
}
.effect_transition:hover { 
    -ms-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -webkit-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}
.effect_color { 
    -webkit-transition: color .25s linear, background-color .5s ease-in-out; 
    -moz-transition: color .25s linear, background-color .5s ease-in-out; 
    -o-transition: color .25s linear, background-color .5s ease-in-out; 
    transition: color .25s linear, background-color .5s ease-in-out; 
}
.effect_color:hover { 
    -webkit-transition: background-color .25s ease-in-out; 
    -moz-transition: background-color .25s ease-in-out; 
    -o-transition: background-color .25s ease-in-out; 
    transition: background-color .25s ease-in-out; 
}

/* ---------- EFFETTI DI ANIMAZIONE ---------- */

@media only screen and (min-width: 801px) and (max-width: 5000px){

    .movies-dx {
        transform: translateX(300px); 
        -moz-transform: translateX(300px); 
        -webkit-transform: translateX(300px); 
        -ms-transform: translateX(300px);
        transition-duration: 1s; 
        -moz-transition-duration: 1s; 
        -webkit-transition-duration: 1s; 
        -ms-transition-duration: 1s;
        }
    .movies-sx {
        transform: translateX(-300px); 
        -moz-transform: translateX(-300px); 
        -webkit-transform: translateX(-300px); 
        -ms-transform: translateX(-300px);
        transition-duration: 1s; 
        -moz-transition-duration: 1s; 
        -webkit-transition-duration: 1s; 
        -ms-transition-duration: 1s;
        }
    .movies-top {
        transform: translateY(-50px); 
        -moz-transform: translateY(-50px); 
        -webkit-transform: translateY(-50px); 
        -ms-transform: translateY(-50px);
        transition-duration: 2s; 
        -moz-transition-duration: 2s; 
        -webkit-transition-duration: 2s; 
        -ms-transition-duration: 2s;
        }
    .movies-down {
        transform: translateY(200px); 
        -moz-transform: translateY(200px); 
        -webkit-transform: translateY(200px); 
        -ms-transform: translateY(200px);
        transition-duration: 2s; 
        -moz-transition-duration: 2s; 
        -webkit-transition-duration: 2s; 
        -ms-transition-duration: 2s;
        }
    .movies-rotY { 
        transform: rotateY(130deg); 
        -moz-transform: rotateY(130deg);  
        -webkit-transform: rotateY(130deg); 
        -ms-transform: rotateY(130deg); 
        transition-duration: 1s; 
        -moz-transition-duration: 1s; 
        -webkit-transition-duration: 1s; 
        -ms-transition-duration: 1s;
        }
    .movies-rotX { 
        transform: rotateX(130deg); 
        -moz-transform: rotateX(130deg);  
        -webkit-transform: rotateX(130deg); 
        -ms-transform: rotateX(130deg); 
        transition-duration: 1s; 
        -moz-transition-duration: 1s; 
        -webkit-transition-duration: 1s; 
        -ms-transition-duration: 1s;
        }

    .movies-dx.effect, .movies-sx.effect, .movies-top.effect, .movies-down.effect, .movies-rotY.effect, .movies-opa.effect,.movies-rotX.effect { 
        transform: translateX(0); 
        -moz-transform: translateX(0); 
        -webkit-transform: translateX(0); 
        -ms-transform: translateX(0);
        transform: translateY(0); 
        -moz-transform: translateY(0); 
        -webkit-transform: translateY(0); 
        -ms-transform: translateY(0);
        transform: rotateY(0); 
        -moz-transform: rotateY(0); 
        -webkit-transform: rotateY(0); 
        -ms-transform: rotateY(0);
        transform: rotateX(0); 
        -moz-transform: rotateX(0); 
        -webkit-transform: rotateX(0); 
        -ms-transform: rotateX(0);
        }

    .movies-opa { 
        filter: alpha(opacity=0); opacity: 0;
        -webkit-transition: opacity .15s ease-in-out; 
        -moz-transition: opacity .15s ease-in-out; 
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out; 
        transition: opacity .15s ease-in-out;
        transition-duration: 1s; 
        -moz-transition-duration: 1s; 
        -webkit-transition-duration: 1s; 
        -ms-transition-duration: 1s;
        }

    .movies-opa.effect { 
        filter: alpha(opacity=100); opacity: 1;
        -webkit-transition: opacity .15s ease-in-out; 
        -moz-transition: opacity .15s ease-in-out; 
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out; 
        transition: opacity .15s ease-in-out;
        transition-duration: 1s;
         -moz-transition-duration: 1s; 
         -webkit-transition-duration: 1s; 
         -ms-transition-duration: 1s;
        }
}


.webi-bg img { height: 100vh; overflow: hidden; z-index: -3; width: auto; position: fixed; transform: translate(-400px); 
    -ms-transform: translate(-400px);
    -moz-transform: translate(-400px); 
    -webkit-transform: translate(-400px); 
    -o-transform: translate(-400px);

     }

.webi-bg-col { height: 100vh; overflow: hidden; z-index: -1; width: 100%; position: fixed; background-color: #f1f1f1;  }


.hover-1 {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(79, 79, 79, 0.1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(79, 79, 79, 0.1);
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(79, 79, 79, 0.1);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

.hover-1:hover {
                z-index: 10;
        -webkit-box-shadow: 0px 30px 20px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
        -moz-box-shadow: 0px 30px 20px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
        box-shadow: 0px 30px 20px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }