.title-image {
	position:relative;
}

.title-image-title {
	position: absolute;
	z-index: 1;
	bottom: 0%;
	left: 50%;
	transform: translateX(-50%);
}

.title-image-title h2 {
	font-size: 2rem;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.3);
    width: 100vw;
    text-align: center;
    padding-top:20px;
}

.title-image-title h2:after{
	content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 20px;
    left: 100%;
    background: #fff;
    transform-origin: left;
    transform: scaleX(0);
    animation: 2s 2s ease-out forwards title-anim-left;


}
.title-image-title h2:before{
	content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: 15px;
    left: 0;
    background: #fff;
    transform-origin: left;
    transform: scaleX(0);
    animation: 2s 2s  ease-out forwards title-anim;


}

.scroll-title-up {
	animation: scroll-title-up ease-out forwards;
	animation-timeline: view();
	animation-range: entry 0 cover 10%;
}

@keyframes scroll-title-up {
	from{
		opacity: 0;
		transform:translateY(500px);
	}
	to{
		opacity: 1;
		transform:translateY(0px);
	}

}

@keyframes title-anim {
	from{
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes title-anim-left {
	from{
		transform: scaleX(0);
	}
	to {
		transform: scaleX(-1);
	}
}

/* ======================= Media Queries (Enhancements for Larger Screens) ======================== */

@media screen and (min-width: 481px) {

	.title-image-title h2 {
	font-size: 5rem;
}

}