/* CSS Document */

/**
 * Le transizioni presenti in questo file vengono applicate ai tag <i></i>.
 * La classe relativa ad una data transizione deve essere applicata al padre dell'elemento; la transizione viene attivata all'hover sull'elemento padre.
 */

/* GROW and SHRINK */
.transition-grow i {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.transition-grow:hover i {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.transition-shrink:hover i {
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
}



/* FLOAT and SINK */
.transition-float i,
.transition-sink i {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.transition-float:hover i {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
}

.transition-sink:hover i {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
}



/* FORWARD and BACKWARD  */
.transition-forward i,
.transition-backward i {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.transition-forward:hover i {
	-webkit-transform: translateX(5px);
	transform: translateX(5px);
}

.transition-backward:hover i {
	-webkit-transform: translateX(-5px);
	transform: translateX(-5px);
}