@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
	font-family: 'Oswald', sans-serif;
}
.road_signanim{
		opacity: 0;
	}
.set-img{
	width: 100%;
}
.svg-top{
/*	margin-top: -120px;*/
}
/*
.animationsvg{
	background-image: url("../images/background.png");
	background-size: cover;
	background-repeat: repeat-x;
	background-position: top center;
}
*/
.svgcl{
	margin-top: -160px;
}
/*	Road Sign Board*/
	@keyframes fireworthree {
  		0%{ transform: translateY(0px);opacity: 0;}
		50%{ transform: translateY(-20px);}
  		100%{ transform: translateY(0px);opacity: 1;} 
	}
	.board1{	
		animation-name: fireworthree;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.board2{
		animation-name: fireworthree;
		animation-delay: 0s; 
		animation-duration: 1s;
		animation-iteration-count: 1;	
	}
	.board3{
		animation-name: fireworthree;
		animation-delay: 0s; 
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.board4{
		animation-name: fireworthree;
		animation-delay: 0s; 
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.board5{
		animation-name: fireworthree;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.board6{
		animation-name: fireworthree;
		animation-delay: 0s; 
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
/* End OF-Road Sign Board*/

/*Man Animation */
	@keyframes manwalk { 
		0%{  opacity: 0;}
  		30%{ opacity: 1;} 
		80%{ opacity: 1;}
		100%{ opacity: 0;} 
	}
	@keyframes manwalkfrw {
  		0%{  opacity: 0;}
  		30%{ opacity: 1;} 
		100%{ opacity: 1;} 
	}
	.man1{
		opacity: 0;
		animation-name: manwalk;
		animation-delay: 0s;
		animation-duration: 5s;
		animation-iteration-count: 1;
	}
	.man2{
		opacity: 0;
		animation-name: manwalk;
		animation-delay: 0s;
		animation-duration: 6s;
		animation-iteration-count: 1;
	}
	.man3{
		opacity: 0;
		animation-name: manwalk;
		animation-delay: 0s;
		animation-duration: 9s;
		animation-iteration-count: 1;
	}
	.man4{
		opacity: 0;
		animation-name: manwalk;
		animation-delay: 0s;
		animation-duration: 6s;
		animation-iteration-count: 1;
	}
	.man5{
		opacity: 0;
		animation-name: manwalk;
		animation-delay: 0s;
		animation-duration: 7s;
		animation-iteration-count: 1;
	}
	.man6{
		opacity: 1;
		animation-name: manwalkfrw;
		animation-delay: 0s;
		animation-duration: 5s;
		animation-iteration-count: 1;
	}
/*End of Man Animation */

/*Text Animation */
@keyframes textAnimation {
  		0%{ transform: scaleX(-2);opacity: 0;}
  		100%{ transform: scaleX(1);opacity: 1;} 
	}
@keyframes textAnimationrev {
  		0%{ transform: scaleX(2);opacity: 0;}
  		100%{ transform: scaleX(1);opacity: 1;} 
	}
	.texta1{
		animation-name: textAnimation;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.texta2{
		animation-name: textAnimation;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.texta3{
		animation-name: textAnimation;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.texta4{
		animation-name: textAnimation;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.texta5{
		animation-name: textAnimation;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.texta6{
		animation-name: textAnimationrev;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}
	.texta7{
		animation-name: textAnimationrev;
		animation-delay: 0s;
		animation-duration: 1s;
		animation-iteration-count: 1;
	}