/**
  *
  *   Author: Dmytro A.
  *   Author URI: https://freelancehunt.com/freelancer/weblabs.html
  * 
**/
@keyframes scale {
	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(0.7);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes scaleX {
	0% {
		transform: scaleX(0);
	}

	50% {
		transform: scaleX(0.7);
	}

	100% {
		transform: scaleX(1);
	}
}

@keyframes widthTo100VW {
	0% {
		width: 0;
	}

	50% {
		width: 70vw;
	}

	100% {
		width: 100vw;
	}
}

.animation--widthTo100 {
	width: 0;
}

.animate.animation--widthTo100 {
	animation-name: widthTo100;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes widthTo100 {
	0% {
		width: 0;
	}

	50% {
		width: 70%;
	}

	100% {
		width: 100%;
	}
}

.animation--fade {
	opacity: 0;
}

.animate.animation--fade {
	animation-name: fade;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fade {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0.7;
	}

	100% {
		opacity: 1;
	}
}

.animation--fadeLeft {
	opacity: 0;
	transform: translateX(-50px);
}

.animate.animation--fadeLeft {
	animation-name: fadeLeft;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	50% {
		opacity: 0.7;
		transform: translateX(-35px);
	}

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

.animation--fadeRight {
	opacity: 0;
	transform: translateX(50px);
}

.animate.animation--fadeRight {
	animation-name: fadeRight;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeRight {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}

	50% {
		opacity: 0.7;
		transform: translateX(35px);
	}

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

.animation--fadeTop {
	opacity: 0;
	transform: translateY(-50px);
}

.animate.animation--fadeTop {
	animation-name: fadeTop;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeTop {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}

	50% {
		opacity: 0.7;
		transform: translateY(-35px);
	}

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

.animation--fadeTopLeft {
	opacity: 0;
	transform: translate(-50px, -50px);
}

.animate.animation--fadeTopLeft {
	animation-name: fadeTopLeft;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeTopLeft {
	0% {
		opacity: 0;
		transform: translate(-50px, -50px);
	}

	50% {
		opacity: 0.7;
		transform: translate(-35px, -35px);
	}

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

.animation--fadeTopRight {
	opacity: 0;
	transform: translate(50px, -50px);
}

.animate.animation--fadeTopRight {
	animation-name: fadeTopRight;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeTopRight {
	0% {
		opacity: 0;
		transform: translate(50px, -50px);
	}

	50% {
		opacity: 0.7;
		transform: translate(35px, -35px);
	}

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

.animation--fadeBottom {
	opacity: 0;
	transform: translateY(50px);
}

.animate.animation--fadeBottom {
	animation-name: fadeBottom;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeBottom {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}

	50% {
		opacity: 0.7;
		transform: translateY(35px);
	}

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

.animation--fadeBottomLeft {
	opacity: 0;
	transform: translate(-50px, 50px);
}

.animate.animation--fadeBottomLeft {
	animation-name: fadeBottomLeft;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeBottomLeft {
	0% {
		opacity: 0;
		transform: translate(-50px, 50px);
	}

	50% {
		opacity: 0.7;
		transform: translate(-35px, 35px);
	}

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

.animation--fadeBottomRight {
	opacity: 0;
	transform: translate(50px, 50px);
}

.animate.animation--fadeBottomRight {
	animation-name: fadeBottomRight;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes fadeBottomRight {
	0% {
		opacity: 0;
		transform: translate(50px, 50px);
	}

	50% {
		opacity: 0.7;
		transform: translate(35px, 35px);
	}

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

.animation--delay-1 {
	animation-delay: 0.1s;
}

.animation--delay-2 {
	animation-delay: 0.2s;
}

.animation--delay-3 {
	animation-delay: 0.3s;
}

.animation--delay-4 {
	animation-delay: 0.4s;
}

.animation--delay-5 {
	animation-delay: 0.5s;
}

.animation--delay-6 {
	animation-delay: 0.6s;
}

.animation--delay-7 {
	animation-delay: 0.7s;
}

.animation--delay-8 {
	animation-delay: 0.8s;
}

.animation--delay-9 {
	animation-delay: 0.9s;
}

.animation--delay-10 {
	animation-delay: 1s;
}

.animation--delay-11 {
	animation-delay: 1.1s;
}

.animation--delay-12 {
	animation-delay: 1.2s;
}

.animation--delay-13 {
	animation-delay: 1.3s;
}

.animation--delay-14 {
	animation-delay: 1.4s;
}

.animation--delay-15 {
	animation-delay: 1.5s;
}

.animation--delay-16 {
	animation-delay: 1.6s;
}

.animation--delay-17 {
	animation-delay: 1.7s;
}

.animation--delay-18 {
	animation-delay: 1.8s;
}

.animation--delay-19 {
	animation-delay: 1.9s;
}

.animation--delay-20 {
	animation-delay: 2s;
}