/**
 * Styble Pro - Entrance Animations
 *
 * Keyframe animations for the entrance animation effect.
 */

/* Hide elements before they are animated */
.sp-entrance-animation {
	opacity: 0;
}

.sp-entrance-animated {
	opacity: 1;
}


/* ==================== FADING ==================== */

/* Fade In */
@keyframes sp-styble-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


/* Fade In Down */
@keyframes sp-styble-fade-in-down {
	from {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Fade In Left */
@keyframes sp-styble-fade-in-left {
	from {
		opacity: 0;
		transform: translate3d(-50%, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Fade In Right */
@keyframes sp-styble-fade-in-right {
	from {
		opacity: 0;
		transform: translate3d(50%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Fade In Up */
@keyframes sp-styble-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Fade Out */
@keyframes sp-styble-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

/* ==================== ZOOMING ==================== */

/* Zoom In */
@keyframes sp-styble-zoom-in {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}


/* Zoom In Down */
@keyframes sp-styble-zoom-in-down {
	from {
		opacity: 0;
		transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	60% {
		opacity: 1;
		transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	to {
		transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}


/* Zoom In Left */
@keyframes sp-styble-zoom-in-left {
	0% {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
	}
}

/* Zoom In Right */
@keyframes sp-styble-zoom-in-right {
	from {
		opacity: 0;
		transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	60% {
		opacity: 1;
		transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	to {
		transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	}
}

/* Zoom In Up */
@keyframes sp-styble-zoom-in-up {
	0% {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
	}
}

/* Zoom Out */
@keyframes sp-styble-zoom-out {
	from {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}

	to {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
}

/* ==================== BOUNCING ==================== */

/* Bounce In */
@keyframes sp-styble-bounce-in {

	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, 0.3);
	}

	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}


/* Bounce In Down */
@keyframes sp-styble-bounce-in-down {

	0%,
	60%,
	75%,
	90%,
	100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		transform: translate3d(0, -300px, 0);
	}

	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0);
	}

	75% {
		transform: translate3d(0, -10px, 0);
	}

	90% {
		transform: translate3d(0, 5px, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}

}

/* Bounce In Left */
@keyframes sp-styble-bounce-in-left {

	0%,
	60%,
	75%,
	90%,
	100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		transform: translate3d(-300px, 0, 0) scaleX(3);
	}

	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0) scaleX(1);
	}

	75% {
		transform: translate3d(-10px, 0, 0) scaleX(0.98);
	}

	90% {
		transform: translate3d(5px, 0, 0) scaleX(0.995);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Bounce In Right */
@keyframes sp-styble-bounce-in-right {

	0%,
	60%,
	75%,
	90%,
	100% {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		transform: translate3d(300px, 0, 0) scaleX(3);
	}

	60% {
		opacity: 1;
		transform: translate3d(-25px, 0, 0) scaleX(1);
	}

	75% {
		transform: translate3d(10px, 0, 0) scaleX(0.98);
	}

	90% {
		transform: translate3d(-5px, 0, 0) scaleX(0.995);
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Bounce In Up */
@keyframes sp-styble-bounce-in-up {

	from,
	60%,
	75%,
	90%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	from {
		opacity: 0;
		transform: translate3d(0, 300px, 0) scaleY(5);
	}

	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0) scaleY(0.9);
	}

	75% {
		transform: translate3d(0, 10px, 0) scaleY(0.95);
	}

	90% {
		transform: translate3d(0, -5px, 0) scaleY(0.985);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

/* ==================== SLIDING ==================== */

/* Slide In Left */
@keyframes sp-styble-slide-in-left {
	from {
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}


/* Slide In Right */
@keyframes sp-styble-slide-in-right {
	from {
		transform: translate3d(100%, 0, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}


/* Slide In Down */
@keyframes sp-styble-slide-in-down {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}


/* Slide In Up */
@keyframes sp-styble-slide-in-up {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

/* Slide In — Big variants */
@keyframes sp-styble-slide-in-left-big {
	from {
		opacity: 0;
		transform: translate3d(-2000px, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes sp-styble-slide-in-right-big {
	from {
		opacity: 0;
		transform: translate3d(2000px, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes sp-styble-slide-in-down-big {
	from {
		opacity: 0;
		transform: translate3d(0, 2000px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes sp-styble-slide-in-up-big {
	from {
		opacity: 0;
		transform: translate3d(0, -2000px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ==================== ROTATING ==================== */

/* Rotate In */
@keyframes sp-styble-rotate-in {


	0% {
		transform-origin: center;
		transform: rotate3d(0, 0, 1, -200deg);
		opacity: 0;
	}

	100% {
		transform-origin: center;
		transform: none;
		opacity: 1;
	}
}

/* Rotate In Down Left */
@keyframes sp-styble-rotate-in-down-left {
	from {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0;
	}

	to {
		transform-origin: left bottom;
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/* Rotate In Down Right */
@keyframes sp-styble-rotate-in-down-right {
	from {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}

	to {
		transform-origin: right bottom;
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/* Rotate In Up Left */
@keyframes sp-styble-rotate-in-up-left {
	from {
		transform-origin: left top;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0;
	}

	to {
		transform-origin: left top;
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/* Rotate In Up Right */
@keyframes sp-styble-rotate-in-up-right {
	from {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, -90deg);
		opacity: 0;
	}

	to {
		transform-origin: right bottom;
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/* ==================== FLIPPING ==================== */

/* Flip */
@keyframes sp-styble-flip {
	from {
		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		animation-timing-function: ease-out;
	}

	40% {
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		animation-timing-function: ease-out;
	}

	50% {
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		animation-timing-function: ease-in;
	}

	80% {
		transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
		animation-timing-function: ease-in;
	}

	to {
		transform: perspective(400px);
		animation-timing-function: ease-in;
	}
}

/* Flip X */
@keyframes sp-styble-flip-x {
	from {
		transform: perspective(400px) rotate3d(1, 0, 0, -360deg);
		animation-timing-function: ease-out;
	}

	40% {
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(1, 0, 0, -190deg);
		animation-timing-function: ease-out;
	}

	50% {
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(1, 0, 0, -170deg);
		animation-timing-function: ease-in;
	}

	80% {
		transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
		animation-timing-function: ease-in;
	}

	to {
		transform: perspective(400px);
		animation-timing-function: ease-in;
	}
}

/* Flip Y */
@keyframes sp-styble-flip-y {
	from {
		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
		animation-timing-function: ease-out;
	}

	40% {
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
		animation-timing-function: ease-out;
	}

	50% {
		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
		animation-timing-function: ease-in;
	}

	80% {
		transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
		animation-timing-function: ease-in;
	}

	to {
		transform: perspective(400px);
		animation-timing-function: ease-in;
	}
}

/* ==================== ROLLING ==================== */

/* Roll In */
@keyframes sp-styble-roll-in {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ==================== ATTENTION SEEKERS ==================== */

/* Flash */
@keyframes sp-styble-flash {

	from,
	50%,
	to {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

/* Pulse */
@keyframes sp-styble-pulse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

/* Rubber Band */
@keyframes sp-styble-rubber-band {
	from {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, 0.95, 1);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

/* Shake */
@keyframes sp-styble-shake {

	from,
	to {
		transform: translate3d(0, 0, 0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translate3d(-10px, 0, 0);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translate3d(10px, 0, 0);
	}
}

/* Head Shake */
@keyframes sp-styble-head-shake {
	0% {
		transform: translateX(0);
	}

	6.5% {
		transform: translateX(-6px) rotateY(-9deg);
	}

	18.5% {
		transform: translateX(5px) rotateY(7deg);
	}

	31.5% {
		transform: translateX(-3px) rotateY(-5deg);
	}

	43.5% {
		transform: translateX(2px) rotateY(3deg);
	}

	50% {
		transform: translateX(0);
	}
}

/* Swing */
@keyframes sp-styble-swing {
	20% {
		transform: rotate3d(0, 0, 1, 15deg);
	}

	40% {
		transform: rotate3d(0, 0, 1, -10deg);
	}

	60% {
		transform: rotate3d(0, 0, 1, 5deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, -5deg);
	}

	to {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

/* Tada */
@keyframes sp-styble-tada {
	from {
		transform: scale3d(1, 1, 1);
	}

	10%,
	20% {
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
	}

	30%,
	50%,
	70%,
	90% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%,
	60%,
	80% {
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

/* Wobble */
@keyframes sp-styble-wobble {
	from {
		transform: translate3d(0, 0, 0);
	}

	15% {
		transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
	}

	30% {
		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
	}

	45% {
		transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
	}

	60% {
		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
	}

	75% {
		transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

/* Jello */
@keyframes sp-styble-jello {

	from,
	11.1%,
	to {
		transform: translate3d(0, 0, 0);
	}

	22.2% {
		transform: skewX(-12.5deg) skewY(-12.5deg);
	}

	33.3% {
		transform: skewX(6.25deg) skewY(6.25deg);
	}

	44.4% {
		transform: skewX(-3.125deg) skewY(-3.125deg);
	}

	55.5% {
		transform: skewX(1.5625deg) skewY(1.5625deg);
	}

	66.6% {
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}

	77.7% {
		transform: skewX(0.390625deg) skewY(0.390625deg);
	}

	88.8% {
		transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
	}
}

/* Light Speed In */
@keyframes sp-styble-light-speed-in {
	from {
		transform: translate3d(100%, 0, 0) skewX(-30deg);
		opacity: 0;
	}

	60% {
		transform: skewX(20deg);
		opacity: 1;
	}

	80% {
		transform: skewX(-5deg);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}



.sp-styble-trail-effect-frost-sparkles {
	position: fixed;
	pointer-events: none;
	z-index: 99999;

	transform: translate(-50%, -50%);
	will-change: transform, opacity;
}

.sp-styble-trail-effect-frost-sparkles::before {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 9px;
}


.sp-styble-pro-cursor-label {
	position: fixed;
	top: 10px;
	left: 12px;
	padding: 6px 10px;
	background: #111;
	color: #fff;
	font-size: 9px;
	border-radius: 6px;
	pointer-events: none;
	white-space: nowra;
	z-index: 100002;
	opacity: 0;
	transition: opacity 0.2s ease;
}