/***********************************************************************************************************************************
/***********************************************************************************************************************************

######## ######## ######## ########  ########     ###     ######  ##    ##  ######  
##       ##       ##       ##     ## ##     ##   ## ##   ##    ## ##   ##  ##    ## 
##       ##       ##       ##     ## ##     ##  ##   ##  ##       ##  ##   ##       
######   ######   ######   ##     ## ########  ##     ## ##       #####     ######  
##       ##       ##       ##     ## ##     ## ######### ##       ##  ##         ## 
##       ##       ##       ##     ## ##     ## ##     ## ##    ## ##   ##  ##    ## 
##       ######## ######## ########  ########  ##     ##  ######  ##    ##  ######  

For examples : https://www.dev.equideow.com/doc/animate

***********************************************************************************************************************************
***********************************************************************************************************************************/

/* FEEDBACK--POSITIVE **************************************************************************************************************/
/***********************************************************************************************************************************/

.feedback--positive{
	animation: feedbackPositive 1s 1 0s;
	background: #849644;
	border-radius: 17px;
	box-shadow: 0 0 14px #849644;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	opacity: 0;
	padding: 0 10px;
}
@keyframes feedbackPositive{
	0%{
		transform: translateY(0) scale(3);
		opacity: 1;
	}
	50%{
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	100%{
		transform: translateY(-50px) scale(1);
		opacity: 0;
	}
}

/* FEEDBACK--NEGATIVE **************************************************************************************************************/
/***********************************************************************************************************************************/

.feedback--negative{
	animation: feedbackNegative 1s 1 0s;
	background: #C80000;
	border-radius: 17px;
	box-shadow: 0 0 14px #C80000;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	opacity: 0;
	padding: 0 10px;
}
@keyframes feedbackNegative{
	0%{
		transform: translateY(0) scale(3);
		opacity: 1;
	}
	50%{
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	100%{
		transform: translateY(50px) scale(1);
		opacity: 0;
	}
}