/*
 Tutti i selettori prevedono che il body abbia classe 'jsok'
 La classe 'jsok' viene aggiunta al body dinamicamente da Javascript
 Se la classe 'jsok' non è presente allora JavaScript non sta funzionando
 Quindi non dobbiamo far vedere nessuna animazione.
*/

body.jsok .top_logo,
body.jsok .top_logo2,
body.jsok .cont_nav_2,
body.jsok .contenitore_centrale_1,
body.jsok .contenitore_centrale_2 {
    visibility:hidden;
}

body.jsok .contenitore_centrale,
body.jsok .contenitore_centrale_1,
body.jsok .contenitore_centrale_2,
body.jsok #menu_top_left,
body.jsok #menu_top,
body.jsok .cont_nav_2,
body.jsok .spazio_banner_home {
    overflow:visible;
}

/* OGGETTI IN ALTO */
body.jsok .top_logo.an,
body.jsok .top_logo2.an {
    -webkit-animation: enter_from_top 2s ease-out;
    animation: enter_from_top 2s ease-out;
}
body.jsok .top_community.an {
    -webkit-animation: fade_in 2s ease-out;
    animation: fade_in 2s ease-out;
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(1) {
    -webkit-animation: enter_from_top 1s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 1s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(2) {
    -webkit-animation: enter_from_top 1.2s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 1.2s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(3) {
    -webkit-animation: enter_from_top 1.4s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 1.4s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(4) {
    -webkit-animation: enter_from_top 1.6s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 1.6s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(5) {
    -webkit-animation: enter_from_top 1.8s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 1.8s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(6) {
    -webkit-animation: enter_from_top 2s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 2s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .cont_nav_2.an #main-menu li:nth-child(7) {
    -webkit-animation: enter_from_top 2.2s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_top 2.2s cubic-bezier(0.5,1.4,0.4,1);
}

/* MENU SINISTRA */
body.jsok .contenitore_centrale_1.an #menu_top_left {
    /*-webkit-animation: enter_from_left 1.4s ease-out;
    animation: enter_from_left 1.4s ease-out;*/
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(1) {
    -webkit-animation: enter_from_left 1s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 1s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(2) {
    -webkit-animation: enter_from_left 1.2s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 1.2s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(3) {
    -webkit-animation: enter_from_left 1.4s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 1.4s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(4) {
    -webkit-animation: enter_from_left 1.6s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 1.6s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(5) {
    -webkit-animation: enter_from_left 1.8s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 1.8s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(6) {
    -webkit-animation: enter_from_left 2s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 2s cubic-bezier(0.5,1.4,0.4,1);
}
body.jsok .contenitore_centrale_1.an #menu_top_left li:nth-child(7) {
    -webkit-animation: enter_from_left 2.2s cubic-bezier(0.5,1.4,0.4,1);
    animation: enter_from_left 2.2s cubic-bezier(0.5,1.4,0.4,1);
}

/* BANNER CENTRALI */
body.jsok .contenitore_centrale_2.an .spazio_banner_home_cont li:nth-child(1) {
    -webkit-animation: fadein_delayed 2.4s ease-out;
    animation: fadein_delayed 2.4s ease-out;
}
body.jsok .contenitore_centrale_2.an .spazio_banner_home_cont li:nth-child(2) {
    -webkit-animation: fadein_delayed 2.6s ease-out;
    animation: fadein_delayed 2.6s ease-out;
}
body.jsok .contenitore_centrale_2.an .spazio_banner_home_cont li:nth-child(3) {
    -webkit-animation: fadein_delayed 1.8s ease-out;
    animation: fadein_delayed 1.8s ease-out;
}
body.jsok .contenitore_centrale_2.an .spazio_banner_home_cont li:nth-child(4) {
    -webkit-animation: fadein_delayed 2s ease-out;
    animation: fadein_delayed 2s ease-out;
}
body.jsok .contenitore_centrale_2.an .spazio_banner_home_cont li:nth-child(5) {
    -webkit-animation: fadein_delayed 2.2s ease-out;
    animation: fadein_delayed 2.2s ease-out;
}

@-webkit-keyframes enter_from_top {
  from { -webkit-transform:translateY(-1000px); }
  to { -webkit-transform:translateY(0%); }
}
@keyframes enter_from_top {
    from { transform:translateY(-1000px); }
    to { transform:translateY(0%); }
}
@-webkit-keyframes enter_from_left {
  from { -webkit-transform:translateX(-1000px); }
  to { -webkit-transform:translateX(0%); }
}
@keyframes enter_from_left {
    from { transform:translateX(-1000px); }
    to { transform:translateX(0%); }
}
@-webkit-keyframes enter_from_bottom {
  from { -webkit-transform:translateY(1000px); }
  to { -webkit-transform:translateY(0%); }
}
@keyframes enter_from_bottom {
    from { transform:translateY(1000px); }
    to { transform:translateY(0%); }
}
@-webkit-keyframes fade_in {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes fade_in {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes rotate_and_zoom {
    from {
        transform:rotate(-1440deg) scale(0.1);
        opacity:0;
    }
    to {
        -webkit-transform:rotate(0deg) scale(1);
        opacity:1;
    }
}
@-webkit-keyframes rotate_and_zoom {
    from {
        -webkit-transform:rotate(-1440deg) scale(0.1);
        opacity:0;
    }
    to {
        -webkit-transform:rotate(0deg) scale(1);
        opacity:1;
    }
}
@keyframes fadein_and_zoom {
    from {
        transform:scale(0.8);
        opacity:0;
    }
    to {
        transform:scale(1);
        opacity:1;
    }
}
@-webkit-keyframes fadein_and_zoom {
    from {
        -webkit-transform:scale(0.8);
        opacity:0;
    }
    to {
        -webkit-transform:scale(1);
        opacity:1;
    }
}

@keyframes fadein_delayed {
    0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes fadein_delayed {
    0% { opacity:0; }
    50% { opacity:0; }
    100% { opacity:1; }
}
/* L'immagine loop durante il preload */
@-webkit-keyframes flip {
	0% {
		-webkit-transform: perspective(400px) rotateY(0);
		-webkit-animation-timing-function: ease-out;
	}
	40% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
	80% {
		-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
		-webkit-animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: perspective(400px) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}
body.jsok .flip_forever {
	-webkit-backface-visibility: visible !important;
	-webkit-animation: flip 5s linear infinite;
	backface-visibility: visible !important;
	animation: flip 5s linear infinite;
}
body.jsok .alcentro {
    position:absolute;
    left:50%;
    margin-left: -117px;
    top:250px;
}