/* =============================================================================
- Animation
============================================================================= */
.gwel-animated-item {
	transition-behavior: normal, normal;
	transition-duration: 1.25s, 1.25s;
	transition-timing-function: ease, ease;
	transition-delay: var(--animation-delay, 0s), var(--animation-delay, 0s);
	transition-property: transform, opacity;
	&.gwel-slow-animation {
		transition-duration: 2s, 2s;
	}
	&.gwel-fast-animation {
		transition-duration: .75s, .75s;
	}
	&.gwel-fade-in {
		opacity: 0;
	}
	&.gwel-fade-in-up {
		opacity: 0;
		transform: translate(0px,-30px) scale(1);
	}
	&.gwel-fade-in-down {
		opacity: 0;
		transform: translate(0px,30px) scale(1);
	}
	&.gwel-fade-in-left {
		opacity: 0;
		transform: translate(-30px,0px) scale(1);
	}
	&.gwel-fade-in-right {
		opacity: 0;
		transform: translate(30px,0px) scale(1);
	}
	&.gwel-zoom-in {
		opacity: 0;
		transform-origin: left;
		transform: translate(30px,0px) scale(0.8);
	}
	&.gwel-animated {
		opacity: 1;
		transform: translate(0px,0px) scale(1);
	}
}

/* Custom Slide Animations */
.fade-in-up-small {
	animation-name: fadeInUpSmall;
}
@keyframes fadeInUpSmall {
	0% {
		opacity: 0;
		transform: translate(0px,30px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}

.fade-in-down-small {
	animation-name: fadeInDownSmall;
}
@keyframes fadeInDownSmall {
	0% {
		opacity: 0;
		transform: translate(0px,-30px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}

.fade-in-left-small {
	animation-name: fadeInLeftSmall;
}
@keyframes fadeInLeftSmall {
	0% {
		opacity: 0;
		transform: translate(-30px,0px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}

.fade-in-right-small {
	animation-name: fadeInRigthSmall;
}
@keyframes fadeInRigthSmall {
	0% {
		opacity: 0;
		transform: translate(30px,0px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}

.clipping-up {
	animation-name: clippingUp;
}
@keyframes clippingUp {
	0% {
		clip-path: inset(100% 0 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

.clipping-down {
	animation-name: clippingDown;
}
@keyframes clippingDown {
	0% {
		clip-path: inset(0 0 100% 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

.clipping-left {
	animation-name: clippingLeft;
}
@keyframes clippingLeft {
	0% {
		clip-path: inset(0 100% 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

.clipping-right {
	animation-name: clippingRight;
}
@keyframes clippingRight {
	0% {
		clip-path: inset(0 0 0 100%);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}