/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/*
* style.css 
*/

:root {
  --animationDistance: 15px !important;
  --animationDistanceMinus: -15px !important;
}

/* Custom Slide Animations */

.customSlideDown {
  animation-name: customSlideDown;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideDown {
  0% {
    opacity: 0;
    transform: translateY(var(--animationDistance));
  }

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

.customSlideleft {
  animation-name: customSlideLeft;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(var(--animationDistanceMinus));
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.customSlideRight {
  animation-name: customSlideRight;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideRight {
  0% {
    opacity: 0;
    transform: translateX(var(--animationDistance));
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.customSlideUp {
  animation-name: customSlideUp;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSlideUp {
  0% {
    opacity: 0;
    transform: translateY(var(--animationDistanceMinus));
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeDown {
	from {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}

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

.elementor-element.fadeInDown {
	animation-name: fadeDown;
}

@keyframes fadeLeft {
	from {
		opacity: 0;
		transform: translate3d(-30px, 0, 0);
	}

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

.elementor-element.fadeInLeft {
	animation-name: fadeLeft;
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translate3d(30px, 0, 0);
	}

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

.elementor-element.fadeInRight {
	animation-name: fadeRight;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}

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

.elementor-element.fadeInUp {
	animation-name: fadeUp;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100px, 0);
	}

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

.elementor-element.slideInUp {
	animation-name: slideUp;
}