@charset "UTF-8";
/* CSS Document */
.slide-in{
	animation: slide-in 1s linear both;
}
@keyframes slide-in{
	0%{opacity: 0;
	transform: translate(-500px,0);
	}
	100%{opacity: 1;
	transform: translate(0);}
}


.fade-in{
	animation:fade-in .6s .2s linear both; 
}
@keyframes fade-in{
	0%{
		opacity: 0;
		transform: translateY(50px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
	
}

.fade-in2{
	animation:fade-in2 .6s .4s linear both; 
}
@keyframes fade-in2{
	0%{
		opacity: 0;
		transform: translateY(50px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
	
}
.rotate-in{
	animation:rotate-in 1s linear both; 
}	
@keyframes rotate-in{
	0%{
		opacity: 0;
		transform: scale(.6) rotate(0);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotateY(720deg);
	}
	
}

.anime1{
	animation:anime1 4s linear both;
}
@keyframes anime1{
	0%{
		height: 1%;
		width: 0;
	}
	50%{
		height: 1%;
		width: 100%;
	}
	100%{
		height: 100%;
		width: 100%;
	}	
}

.slideimg{
	animation: slideimg 1s linear both;
}
@keyframes slideimg{
	0%{
		width: 0;
		
	}
	100%{
		width: 800px;
		
	}
	
	
}

.slideimg1{
	animation: slideimg1 .6s 1s linear both;
}
@keyframes slideimg1{
	0%{
		opacity: 0;
		left: -30%;
		
	}
	100%{
		opacity: 1;
		left: 0;
		
	}
	
	
}

.slideimg2{
	animation: slideimg2 .6s 1.6s linear both;
}
@keyframes slideimg2{
	0%{
		opacity: 0;
		right: -60%;
		
	}
	100%{
		opacity: 1;
		right: 0;
		
	}
	
	
}