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

.fx-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; 
}
.fx-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; 
}

.fx-transition-slow { 
    -ms-transition: all .75s ease-out; 
    -moz-transition: all .75s ease-out; 
    -webkit-transition: all .75s ease-out; 
    -o-transition: all .75s ease-out; 
    transition: all .75s ease-out; 
}
.fx-transition-slow: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; 
}

.fx-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; 
}
.fx-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: 800px) 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-top-1 {
        transform: translateY(150px); 
        -moz-transform: translateY(150px); 
        -webkit-transform: translateY(150px); 
        -ms-transform: translateY(150px);
        transition-duration: 2s; 
        -moz-transition-duration: 2s; 
        -webkit-transition-duration: 2s; 
        -ms-transition-duration: 2s;
        }

        
    .movies-down {
        transform: translateY(100px); 
        -moz-transform: translateY(100px); 
        -webkit-transform: translateY(100px); 
        -ms-transform: translateY(100px);
        transition-duration: 2s; 
        -moz-transition-duration: 2s; 
        -webkit-transition-duration: 2s; 
        -ms-transition-duration: 2s;
        }

    .movies-down-1 {
        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-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-rotX.effect, .movies-top-1.effect, .movies-down-1.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 .35s ease-in-out; 
        -moz-transition: opacity .35s ease-in-out; 
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out; 
        transition: opacity .35s 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 .35s ease-in-out; 
        -moz-transition: opacity .35s ease-in-out; 
        -ms-transition: opacity .35s ease-in-out;
        -o-transition: opacity .35s ease-in-out; 
        transition: opacity .35s ease-in-out;
        transition-duration: 1s;
         -moz-transition-duration: 1s; 
         -webkit-transition-duration: 1s; 
         -ms-transition-duration: 1s;
        }

    .cover-rad.effect { border-radius: 20px; }
    .cover-rad { border-radius: 100%; }

    .cover-rad-inv.effect { border-radius: 100%; }
    .cover-rad-inv { border-radius: 20px; }

    .cover-rad-min.effect { border-radius: 20px; }
    .cover-rad-min { border-radius: 0%; }

    .zoom-in {transform: scale(1.3);}
    .zoom-in.effect {transform: scale(1);}
    .zoom-out {transform: scale(0.7);}
    .zoom-out.effect {transform: scale(1);}

    .zoom {transform: scale(1.2);}
    .zoom.small.effect-scroll {transform: scale(1);}

    .skew { 
        transform: skewY(0deg);
        transform-origin: top left; 
    }
    .skew.effect { 
        transform: skewY(-3deg);
        transform-origin: top left; 
    }

    .skew.effect .box-936 { 
        transform: skewY(+3deg);
        transform-origin: top left; 
    }

    .skew-stop { 
        transform: skewY(-3deg);
        transform-origin: top left; 
    }

    .skew-stop .box-936 { 
        transform: skewY(+3deg);
        transform-origin: top left; 
    }


    .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: 100;
            -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;
        }

    .hover-2 {
            -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-2:hover {
            z-index: 100;
            -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
            -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
            box-shadow: 0px 10px 10px 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;
        }

    .hover-3 {
            -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(79, 79, 79, 0.1);
            -moz-box-shadow:inset 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(79, 79, 79, 0.1);
            box-shadow: inset 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-3:hover {
            z-index: 100;
            -webkit-box-shadow: inset 0px 10px 10px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
            -moz-box-shadow: inset 0px 10px 10px 0px rgba(0, 0, 0, 0.35), 0px 0px 8px 0px rgba(79, 79, 79, 0.1);
            box-shadow: inset 0px 10px 10px 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;
        }

    .hover-4 { 
            transform: translateY(0px); 
            -moz-transform: translateY(0px); 
            -webkit-transform: translateY(0px); 
            -ms-transform: translateY(0px);
            transition-duration: 1s; 
            -moz-transition-duration: 1s; 
            -webkit-transition-duration: 1s; 
            -ms-transition-duration: 1s;
            } 
    .hover-4:hover { 
            transform: translateY(-50px); 
            -moz-transform: translateY(-50px); 
            -webkit-transform: translateY(-50px); 
            -ms-transform: translateY(-50px);
            transition-duration: 1s; 
            -moz-transition-duration: 1s; 
            -webkit-transition-duration: 1s; 
            -ms-transition-duration: 1s;
            } 

    .hover-5 { 
            transform: rotateY(0deg); 
            -moz-transform: rotateY(0deg);  
            -webkit-transform: rotateY(0deg); 
            -ms-transform: rotateY(0deg); 
            transition-duration: 1s; 
            -moz-transition-duration: 1s; 
            -webkit-transition-duration: 1s; 
            -ms-transition-duration: 1s;
            } 
    .hover-5:hover { 
            transform: rotateY(360deg); 
            -moz-transform: rotateY(360deg);  
            -webkit-transform: rotateY(360deg); 
            -ms-transform: rotateY(360deg); 
            transition-duration: 1s; 
            -moz-transition-duration: 1s; 
            -webkit-transition-duration: 1s; 
            -ms-transition-duration: 1s;
            } 
    .hover-6 a:hover h2 { color: var(--w-color-hover); } 

    .hover-7 { 
        outline: 0px solid var(--w-color-4);
        transition: all 0.3s ease-in-out;
        border-radius: 15px;
        outline-offset: -5px;

     }
    .hover-7:hover { 
        outline: 4px solid var(--w-color-4);
        transition: all 0.3s ease-in-out;
        background-color: var(--w-color-4);
     }
    .hover-8 { 
        outline: 0px solid var(--w-color-4);
        transition: all 0.3s ease-in-out;
        border-radius: var(--radio-site);
        outline-offset: -5px;

     }
    .hover-8:hover { 
        outline: 4px solid var(--w-color-4);
        transition: all 0.3s ease-in-out;
     }

}


.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;  }


/* ACCORDION */
.accordion-header { cursor: pointer; }
.accordion-content { display: none; }
.accordion-arrow { float: right; transition: transform 0.3s ease; }
.accordion-header.accordion-active .accordion-arrow { transform: rotate(180deg); }
.accordion-item { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }