/*animaciones*/
.efecto-fade-in {
	visibility: hidden;
}

.fade-in-animation{
	visibility: visible;
	animation: fadeIn linear 0.7s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes fadeIn{
	0% {
		opacity:0;
		transform:  scaleX(0.50) scaleY(0.50) ;
	}
	100% {
		opacity:1;
		transform:  scaleX(1.00) scaleY(1.00) ;
	}
}


.efecto-slide-left {
	visibility: hidden;
}

.slide-left-animation{
	visibility: visible;
    animation: slideLeft linear .7s ;
    animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes slideLeft{
	0% {
		transform:  translate(-200px,0px)  ;
	}
	100% {
		transform:  translate(0px,0px)  ;
	}
}


.efecto-slide-right {
	visibility: hidden;
}

.slide-right-animation{
	visibility: visible;
	animation: slideRight linear .7s;
    animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes slideRight {
	0% {
		transform:  translate(200px,0px)  ;
	}
	100% {
		transform:  translate(0px,0px)  ;
	}
}

.efecto-slide-up {
	visibility: hidden;
}

.slide-up-animation{
	visibility: visible;
	animation: slideUp linear .7s;
    animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes slideUp {
	0% {
		transform:  translate(0px,200px)  ;
	}
	100% {
		transform:  translate(0px,0px)  ;
	}
}
.efecto-slide-down {
	visibility: hidden;
}

.slide-down-animation{
	visibility: visible;
	animation: slideDown linear .7s;
    animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes slideDown {
	0% {
		transform:  translate(0px,-200px)  ;
	}
	100% {
		transform:  translate(0px,0px)  ;
	}
}

.efecto-zoom-in {
	visibility: hidden;
}

.zoom-in-animation{
	visibility: visible;
	animation: zoomIn linear .7s;
    animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes zoomIn {
	0% {
		transform:  scale(0) ;
	}
	100% {
		transform:  scale(1) ;
	}
}

.efecto-tembleque-y {
	visibility: hidden;
}

.tembleque-y-animation{
	visibility: visible;
	animation: temblequeY linear .7s;
    animation-iteration-count: 1;
	transform-origin: 50% 50%;
}

@keyframes temblequeY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.efecto-hover-zoom-out,
.efecto-hover-zoom-in {
	transition: all ease-in-out .3s;
}

.efecto-hover-zoom-out:hover {
	transform: scale(0.9);
}

.efecto-hover-zoom-in:hover {
	transform: scale(1.1);
}