@charset "utf-8";

.f-in,
.f-in-child{
	position: relative;
}
.f-in > *,
.f-in-child > *{
	opacity: 0;
}

.f-in:after,
.f-in-child:after{
	content: "";
	display: block;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color:background: rgb(227, 223, 10);
	background: -moz-linear-gradient(left, rgba(227, 223, 10, 1) 42%,rgba(215, 223, 31, 1) 100%);
	background: -webkit-linear-gradient(left, rgba(227, 223, 10, 1) 42%,rgba(215, 223, 31, 1) 100%);
	background: linear-gradient(to right, rgba(227, 223, 10, 1) 42%,rgba(215, 223, 31, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3df0a',endColorstr='#d7df1f', GradientType=0);
}

.pink .f-in:after,
.pink .f-in-child:after{
	background: rgb(222,95,119);
	background: -moz-linear-gradient(left, rgba(222,95,119,1) 0%, rgba(255,241,13,1) 100%);
	background: -webkit-linear-gradient(left, rgba(222,95,119,1) 0%,rgba(255,241,13,1) 100%);
	background: linear-gradient(to right, rgba(222,95,119,1) 0%,rgba(255,241,13,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de5f77', endColorstr='#fff10d',GradientType=0 );
}

.f-in:after.f-top,
.f-in-child.f-top:after{
	width: 100%;
	height: 0;
}
.f-in.active{
}

.f-in.active > *{
	animation-name: flameInAnimation;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	animation-duration: 1.2s;
	opacity: 1;
}
.f-in.active:after{
	animation-name: flameInAnimationForAfter;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	animation-duration: 1.2s;
}
.f-in.f-top.active:after{
	animation-name: flameInAnimationForAfterT;
}

.f-in.f-right.active:after{
	animation-name: flameInAnimationForAfterR;
}


@keyframes  flameInAnimation{
	0% {
		opacity : 0;
    }
    50% {
		opacity : 0;
    }
    100% {
   		opacity : 1;
    }
}

@keyframes  flameInAnimationForAfter{
	0% {
		width: 0%;
    }
    50% {
		width: 100%;
		margin-left: 0;
    }
    100% {
		width: 0%;
		margin-left: 100%;
		display: none;
	}
}


@keyframes  flameInAnimationForAfterR{
	0% {
		width: 0%;
		margin-left: 100%;
    }
    50% {
		width: 100%;
		margin-left: 0;
    }
    100% {
		width: 0%;
		display: none;
	}
}

@keyframes  flameInAnimationForAfterT{
	0% {
		height: 0%;
    }
    50% {
		height: 100%;
		margin-top: 0;
    }
    100% {
		height: 0%;
		margin-top: 100%;
		display: none;
	}
}