.home-hero .title-line{
	width: 40%;
	height: 20px;
	top: 165px;
	left: 50%;
	position: relative;
	border-bottom: 4px solid white;
	opacity: 0.8;
	transform: translate(-50%,-50%);
	animation: home-hero-line-anim 6s;
	animation-delay: 0s;
}

.home-hero .img{
	position: absolute;
	z-index:1;
}
.home-hero .img.a{
	width: 100%;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: home-hero-imga-anim 3s;
	animation-delay: 0ms;
}
.home-hero .img.b, .img.c, .img.d{
	width: 700px;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: visible;
}
.home-hero .img.b{
	animation: home-hero-imgbcd-anim 2s forwards;
	animation-delay: 0ms;
	visibility: hidden;
}
.home-hero .img.c{
	animation: home-hero-imgbcd-anim 2s forwards;
	animation-delay: 100ms;
	visibility: hidden;
}
.home-hero .img.d{
	animation: home-hero-imgbcd-anim 2s forwards;
	animation-delay: 200ms;
	visibility: hidden;
}

@keyframes home-hero-line-anim{
	0%    { 
		width: 0px;
	}
	66%  { 
		width: 0%;
	}
	100%  { 
		width: 40%;
	}
}

@keyframes home-hero-imga-anim{
	0%    { 
		transform: translate(-50%, 200%);
	}
	100%  { 
		transform: translate(-50%, -50%);
	}
}

@keyframes home-hero-imgbcd-anim{
	0%    { 
		transform: translate(-50%, 200%);
		visibility: visible;
	}
	100%  { 
		transform: translate(-50%, -50%);
		visibility: visible;
	}
}

@media screen and (max-width: 750px) {
	
	.home-hero .img.a{
		top: 80%;
	}
	.home-hero .img.b,
	.home-hero .img.c,
	.home-hero .img.d{
		width: 600px;
	}
	
}

@media screen and (max-width: 600px) {
	
	.home-hero .img.a{
		top: 70%;
	}
	.home-hero .img.b,
	.home-hero .img.c,
	.home-hero .img.d{
		width: 400px;
	}
	
}