/* entry animations */
.ht_ctc_entry_animation {
	animation-duration: center;
	animation-fill-mode: both;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

@keyframes center {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

.ht_ctc_an_entry_center {
	animation: center 0.25s;
}

/* animations */

/* 
$an_list =[ 'bounce',
'flash',
'pulse',
'heartBeat',
'flip',
];

$an_duration ='1s';
$an_delay ='';
$an_delay ='';
$an_itr ='1';

foreach ($an_list as $an_type) {
    $animations->animations($an_type, $an_duration, $an_delay, $an_itr );

} */

.ht_ctc_animation {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-delay: 0s;
	animation-iteration-count: 1;
}

/* bounce */
@keyframes bounce {
	from,
	20%,
	53%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -30px, 0) scaleY(1.1);
	}

	70% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -15px, 0) scaleY(1.05);
	}

	80% {
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0) scaleY(0.95);
	}

	90% {
		transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
}

.ht_ctc_an_bounce {
	animation-name: bounce;
	transform-origin: center bottom;
}

/* flash */
@keyframes flash {
	from,
	50%,
	to {
		opacity: 1;
	}

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

.ht_ctc_an_flash {
	animation-name: flash;
}

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

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

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

.ht_ctc_an_pulse {
	animation-name: pulse;
	animation-timing-function: ease-in-out;
}

/* heartBeat */
@keyframes heartBeat {
	0% {
		transform: scale(1);
	}

	14% {
		transform: scale(1.3);
	}

	28% {
		transform: scale(1);
	}

	42% {
		transform: scale(1.3);
	}

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

.ht_ctc_an_heartBeat {
	animation-name: heartBeat;
	animation-duration: calc(1s * 1.3);
	animation-timing-function: ease-in-out;
}

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

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

	50% {
		transform: perspective(400px) scale3d(1, 1, 1) 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) translate3d(0, 0, 0)
			rotate3d(0, 1, 0, 0deg);
		animation-timing-function: ease-in;
	}

	to {
		transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
		animation-timing-function: ease-in;
	}
}

.ht_ctc_an_flip {
	backface-visibility: visible;
	animation-name: flip;
}