/**
 * CSS3 Keyframe Animations for Popup Creator for Elementor
 * Hardware accelerated with transforms and will-change optimization.
 */

/* ==========================================================================
   ENTRANCE ANIMATIONS
   ========================================================================== */

/* Fade In */
@keyframes oepFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.oep-animated.oep-fade-in {
	animation-name: oepFadeIn;
}

/* Fade In Up */
@keyframes oepFadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-fade-in-up {
	animation-name: oepFadeInUp;
}

/* Fade In Down */
@keyframes oepFadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -40px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-fade-in-down {
	animation-name: oepFadeInDown;
}

/* Fade In Left */
@keyframes oepFadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-40px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-fade-in-left {
	animation-name: oepFadeInLeft;
}

/* Fade In Right */
@keyframes oepFadeInRight {
	from {
		opacity: 0;
		transform: translate3d(40px, 0, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-fade-in-right {
	animation-name: oepFadeInRight;
}

/* Zoom In */
@keyframes oepZoomIn {
	from {
		opacity: 0;
		transform: scale3d(0.7, 0.7, 1);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.oep-animated.oep-zoom-in {
	animation-name: oepZoomIn;
}

/* Zoom In Up */
@keyframes oepZoomInUp {
	from {
		opacity: 0;
		transform: scale3d(0.4, 0.4, 1) translate3d(0, 100px, 0);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}
.oep-animated.oep-zoom-in-up {
	animation-name: oepZoomInUp;
}

/* Zoom In Down */
@keyframes oepZoomInDown {
	from {
		opacity: 0;
		transform: scale3d(0.4, 0.4, 1) translate3d(0, -100px, 0);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}
.oep-animated.oep-zoom-in-down {
	animation-name: oepZoomInDown;
}

/* Slide In Up */
@keyframes oepSlideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-slide-in-up {
	animation-name: oepSlideInUp;
}

/* Slide In Down */
@keyframes oepSlideInDown {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-slide-in-down {
	animation-name: oepSlideInDown;
}

/* Slide In Left */
@keyframes oepSlideInLeft {
	from {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-slide-in-left {
	animation-name: oepSlideInLeft;
}

/* Slide In Right */
@keyframes oepSlideInRight {
	from {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}
.oep-animated.oep-slide-in-right {
	animation-name: oepSlideInRight;
}

/* Bounce In */
@keyframes oepBounceIn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 1);
	}
	40% {
		transform: scale3d(1.08, 1.08, 1);
	}
	70% {
		transform: scale3d(0.95, 0.95, 1);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
.oep-animated.oep-bounce-in {
	animation-name: oepBounceIn;
}

/* Flip In X */
@keyframes oepFlipInX {
	from {
		transform: perspective(600px) rotate3d(1, 0, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(600px) rotate3d(1, 0, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(600px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(600px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		transform: perspective(600px);
	}
}
.oep-animated.oep-flip-in-x {
	animation-name: oepFlipInX;
	backface-visibility: visible !important;
}

/* Flip In Y */
@keyframes oepFlipInY {
	from {
		transform: perspective(600px) rotate3d(0, 1, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(600px) rotate3d(0, 1, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(600px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(600px) rotate3d(0, 1, 0, -5deg);
	}
	to {
		transform: perspective(600px);
	}
}
.oep-animated.oep-flip-in-y {
	animation-name: oepFlipInY;
	backface-visibility: visible !important;
}

/* Rotate In */
@keyframes oepRotateIn {
	from {
		transform: rotate3d(0, 0, 1, -200deg);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}
.oep-animated.oep-rotate-in {
	animation-name: oepRotateIn;
}

/* ==========================================================================
   EXIT ANIMATIONS
   ========================================================================== */

/* Fade Out */
@keyframes oepFadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.oep-animated.oep-fade-out {
	animation-name: oepFadeOut;
}

/* Fade Out Up */
@keyframes oepFadeOutUp {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, -40px, 0);
	}
}
.oep-animated.oep-fade-out-up {
	animation-name: oepFadeOutUp;
}

/* Fade Out Down */
@keyframes oepFadeOutDown {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(0, 40px, 0);
	}
}
.oep-animated.oep-fade-out-down {
	animation-name: oepFadeOutDown;
}

/* Fade Out Left */
@keyframes oepFadeOutLeft {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(-40px, 0, 0);
	}
}
.oep-animated.oep-fade-out-left {
	animation-name: oepFadeOutLeft;
}

/* Fade Out Right */
@keyframes oepFadeOutRight {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	to {
		opacity: 0;
		transform: translate3d(40px, 0, 0);
	}
}
.oep-animated.oep-fade-out-right {
	animation-name: oepFadeOutRight;
}

/* Zoom Out */
@keyframes oepZoomOut {
	from {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
		transform: scale3d(0.8, 0.8, 1);
	}
	to {
		opacity: 0;
		transform: scale3d(0.5, 0.5, 1);
	}
}
.oep-animated.oep-zoom-out {
	animation-name: oepZoomOut;
}

/* Slide Out Up */
@keyframes oepSlideOutUp {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		transform: translate3d(0, -100%, 0);
	}
}
.oep-animated.oep-slide-out-up {
	animation-name: oepSlideOutUp;
}

/* Slide Out Down */
@keyframes oepSlideOutDown {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
	}
}
.oep-animated.oep-slide-out-down {
	animation-name: oepSlideOutDown;
}

/* Slide Out Left */
@keyframes oepSlideOutLeft {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		transform: translate3d(-100%, 0, 0);
	}
}
.oep-animated.oep-slide-out-left {
	animation-name: oepSlideOutLeft;
}

/* Slide Out Right */
@keyframes oepSlideOutRight {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		transform: translate3d(100%, 0, 0);
	}
}
.oep-animated.oep-slide-out-right {
	animation-name: oepSlideOutRight;
}

/* Base Animation Helper */
.oep-animated {
	animation-fill-mode: both;
	animation-duration: var(--oep-animation-duration, 350ms);
	animation-timing-function: var(--oep-animation-timing, cubic-bezier(0.25, 1, 0.5, 1));
	will-change: transform, opacity;
}