/* ==========================================================================
ANIMAZIONI

Istruzioni:
Applicare la classe .watch all'elemento da animare, seguito dalla classe dell'animazione e, in caso servisse, inserire il transition delay.

Es. <div class="watch fade-in-top transition-delay-1"></div>
 ========================================================================== */
.fade-in {
    opacity: 0;
    transition: all 5s cubic-bezier(.215,.60,.355,1);
}
.fade-in.in-page {
    opacity: 1;
} 

.fade-in-top {
    opacity: 0;
    transform: translateY(10vh);
    transition: all 1s cubic-bezier(.215,.60,.355,1);
}
.fade-in-top.in-page {
    opacity: 1;
    transform: translateY(0);
} 
.fade-in-left {
    opacity: 0;
    transform: translateX(-10vw);
	transition: all 1s cubic-bezier(.215,.60,.355,1);
	overflow: hidden;
} 
.fade-in-left.in-page {
    opacity: 1;
    transform: translateY(0);
} 
.fade-in-bottom {
    opacity: 0;
    transform: translateY(-10vh);
    transition: all 1s cubic-bezier(.215,.60,.355,1);
}
.fade-in-bottom.in-page {
    opacity: 1;
    transform: translateX(0);
} 
.fade-in-right {
    opacity: 0;
    transform: translateX(10vw);
	transition: all 1s cubic-bezier(.215,.60,.355,1);
	overflow: hidden;
} 
.fade-in-right.in-page {
    opacity: 1;
    transform: translateX(0);
} 

/* ==========================================================================
TRANSITION DELAY
========================================================================== */
.transition-delay-0 {
	transition-delay: 0ms;
}
.transition-delay-1 {
	transition-delay: 100ms;
}
.transition-delay-2 {
	transition-delay: 200ms;
}
.transition-delay-3 {
	transition-delay: 300ms;
}
.transition-delay-4 {
	transition-delay: 400ms;
}