/*
Theme Name: MrTheme
Description: Custom Wordpress Theme Effects
Author: Miguel J. Romero
Version: 1.1
*Required: mtheme.variables.css & mtheme.base.css
*/

/*slide-down*/
.slide-down-preanimation{
	transform: translateY(-100%);
	opacity: 0;
  }
.slide-down{
	animation-name: slide-down;
	-webkit-animation-name: slide-down;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	visibility: visible !important;						
}
@keyframes slide-down {
	0% {transform: translateY(-100%);opacity: 0;}
	100% {transform: translateY(0%);opacity:1;}		
}
@-webkit-keyframes slide-down {
	0% {-webkit-transform: translateY(-100%);opacity: 0;}
	100% {-webkit-transform: translateY(0%);opacity:1;}	
}

/*slide-up*/
.slide-up-preanimation{
  transform: translateY(100%);
  opacity: 0;
}
.slide-up{
	animation-name: slide-up;
	-webkit-animation-name: slide-up;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;
	visibility: visible !important;			
}
@keyframes slide-up {
	0% {transform: translateY(100%);opacity: 0;}
	100% {transform: translateY(0%); opacity: 1;}	
}
@-webkit-keyframes slide-up {
	0% {-webkit-transform: translateY(100%);opacity: 0;}
	100% {-webkit-transform: translateY(0%); opacity: 1;}	
}

/*slide-right*/
.slide-right-preanimation{
	transform: translateX(-100%);
	opacity: 0;
  }
.slide-right{
	animation-name: slide-right;
	-webkit-animation-name: slide-right;	
	animation-duration: 1s;
	-webkit-animation-duration:1s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		
	visibility: visible !important;	
}
@keyframes slide-right {
	0% {transform: translateX(-100%);opacity: 0;}
	100% {transform: translateX(0%);opacity:1;}	
}
@-webkit-keyframes slide-right {
	0% {-webkit-transform: translateX(-100%);opacity: 0;}
	100% {-webkit-transform: translateX(0%);opacity:1;}
}

/*slide-left*/
.slide-left-preanimation{
	transform: translateX(100%);
	opacity: 0;
  }
.slide-left{
	animation-name: slide-left;
	-webkit-animation-name: slide-left;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	
	visibility: visible !important;	
}
@keyframes slide-left {
	0% {transform: translateX(100%);opacity: 0;}
	100% {transform: translateX(0%);opacity:1;}	
}
@-webkit-keyframes slide-left {
	0% {-webkit-transform: translateX(100%);opacity: 0;}
	100% {-webkit-transform: translateX(0%);opacity:1;}
}

/*expandUp*/
.expand-open-preanimation{
	transform: scale(0);
	opacity: 0;
  }
.expand-open{
	animation-name: expand-open;
	-webkit-animation-name: expand-open;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
	visibility: visible !important;	
}
@keyframes expand-open {
	0% {transform: scale(0);opacity: 0;}	
	10% {transform: scale(0);}
	100% {transform: scale(1);opacity:1;}			
}
@-webkit-keyframes expand-open {
	0% {-webkit-transform: scale(0);opacity: 0;}	
	10% {transform: scale(0);}
	100% {-webkit-transform: scale(1);opacity:1;}					
}

/*opacity-on*/
.opacity-on-preanimation{
	opacity: 0;
  }
.opacity-on{
	animation-name: opacity-on;
	-webkit-animation-name: opacity-on;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
	visibility: visible !important;	
}
@keyframes opacity-on {
	0% {opacity:0;}	
	100% {opacity:1;}			
}
@-webkit-keyframes opacity-on {
	0% {opacity:0;}	
	100% {opacity:1;}					
}

/* boton hearth loop*/
.hearth-loop{
	animation-name: hearth-loop;
	-webkit-animation-name: hearth-loop;	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
	visibility: visible !important;	
	animation-iteration-count: infinite;
}
@keyframes hearth-loop {
	0% {transform: scale(.9);}	
	50% {transform: scale(1.1);}
	100% {transform: scale(.9);}			
}
@-webkit-keyframes hearth-loop {
	0% {-webkit-transform: scale(.9);}	
	50% {transform: scale(1.1);}
	100% {-webkit-transform: scale(.9);}					
}
/* boton radar loop*/
.radar-loop{
	animation-name: radar-loop;
	-webkit-animation-name: radar-loop;	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
	visibility: visible !important;	
	animation-iteration-count: infinite;
}
@keyframes radar-loop {
	0% {transform: scale(.9);box-shadow: 0px 0px 0 0 var(--MediumLightColor), 0px 0px 0 1px var(--MediumColor);}	
	50% {transform: scale(1.1);box-shadow: 0px 0px 0 3px var(--MediumLightColor), 0px 0px 0 5px var(--BrandColor);}
	100% {transform: scale(.9);box-shadow: 0px 0px 0 8px var(--MediumLightColor), 0px 0px 0 7px var(--MediumLightColor);}		
}
@-webkit-keyframes hearth-loop {
	0% {-webkit-transform: scale(.9);box-shadow: 0px 0px 0 0 var(--MediumLightColor), 0px 0px 0 1px var(--MediumColor);}	
	50% {transform: scale(1.1);box-shadow: 0px 0px 0 3px var(--MediumLightColor), 0px 0px 0 5px var(--BrandColor);}
	100% {-webkit-transform: scale(.9);box-shadow: 0px 0px 0 8px var(--MediumLightColor), 0px 0px 0 7px var(--MediumLightColor);}
}
/* boton rotate loop*/
.rotate-loop{
	animation-name: rotate-loop;
	-webkit-animation-name: rotate-loop;	
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	
	visibility: visible !important;	
	animation-iteration-count: infinite;
}
@keyframes rotate-loop {
	0% {transform: rotate(0deg);}	
	50% {transform: rotate(360deg);}
	100% {transform: rotate(360deg);}			
}
@-webkit-keyframes rotate-loop {
	0% {-webkit-transform: rotate(0deg);}	
	50% {transform: rotate(360deg);}
	100% {-webkit-transform: rotate(360deg);}					
}
/* image hover vfx */
.image-hover-vfx{
	visibility: visible !important;	
	animation: none;
	transform: translateX(150%);
}
.image-hover-vfx-activator:hover .image-hover-vfx {
	animation-name: image-hover-vfx;
	animation-duration: .4s;	
	animation-timing-function:linear;	
}
@keyframes image-hover-vfx {
	0% {transform: translateX(150%);}
	50% {transform: translateX(0%);}
	100% {transform: translateX(-150%);}			
}

/*slider-zoom*/
@media(min-width: 720px){
	.slider-zoom{
		transform: scale(1.3);
		animation-name: slider-zoom;
		-webkit-animation-name: slider-zoom;	
		animation-duration: 15s;	
		-webkit-animation-duration: 15s;
		animation-timing-function: ease;	
		-webkit-animation-timing-function: ease;	
		visibility: visible !important;				
	}
	@keyframes slider-zoom {
		0% {transform: scale(1);}
		100% {transform: scale(1.3);}		
	}
}