@use '../utils' as *;

/*----------------------------------------*/
/*  2.3 Animations
/*----------------------------------------*/
@keyframes headerSlideDown {
	0% {
		margin-top: -150px
	}

	100% {
		margin-top: 0
	}
}

@-webkit-keyframes movingX {
	0% {
		left: 100%;
	}

	100% {
		left: -25%;
	}
}

@keyframes movingX {
	0% {
		left: 100%;
	}

	100% {
		left: -25%;
	}
}


@include tp-keyframes (spin-1) {
	0% {
		transform: rotate(10deg);
	}

	100% {
		transform: rotate(-10deg);
	}
}

@keyframes moving {
	0% {
		transform: translatey(0px);
	}

	50% {
		transform: translatey(-20px);
	}

	100% {
		transform: translatey(0px);
	}
}

@keyframes zoom {
	0% {
		transform: scale(.5);
	}

	50% {
		transform: scale(1);
	}

	100% {
		transform: scale(.5);
	}
}

@keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}

	70% {
		-webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
	}

	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

@keyframes rotate2 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes icon-bounce {

	0%,
	100%,
	20%,
	50%,
	80% {
		@include tp-transform(translateY(0));
	}

	40% {
		@include tp-transform(translateY(-10px));
	}

	60% {
		@include tp-transform(translateY(-5px));
	}
}

@keyframes tptranslateX2 {
	0% {
		-webkit-transform: translateX(-30px);
		-moz-transform: translateX(-30px);
		-ms-transform: translateX(-30px);
		-o-transform: translateX(-30px);
		transform: translateX(-30px);
	}

	100% {
		-webkit-transform: translatXY(20px);
		-moz-transform: translateX(20px);
		-ms-transform: translateX(20px);
		-o-transform: translateX(20px);
		transform: translateX(20px);
	}
}

@keyframes tpswing {
	0% {
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		-ms-transform: rotate(6deg);
		-o-transform: rotate(6deg);
		transform: rotate(6deg);
	}

	100% {
		-webkit-transform: rotate(-6deg);
		-moz-transform: rotate(-6deg);
		-ms-transform: rotate(-6deg);
		-o-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}
}

@keyframes borderanimate2 {
	0% {
		transform: translate(-50%, -50%) scale(.8);
	}

	60% {
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(2.5);
		opacity: 0;
	}
}

@keyframes tp-arrow {
	49% {
		transform: translateX(30%);
	}

	50% {
		opacity: 0;
		transform: translateX(-30%);
	}

	51% {
		opacity: 1;
	}
}

@keyframes scroll1 {
	0% {
		top: 0%;
	}

	50% {
		top: 95%;
	}

	100% {
		top: 0%;
	}
}

@keyframes dash {
	to {
	  stroke-dashoffset: 0px;
	  stroke-dasharray: 3000;
	}
  }