#back-color{
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 70%;
	background-color: #88BFC9;
	z-index: -1;
	transition: width .5s ease-in-out;
	animation-name: bg-color;
	animation-duration: 30s;
	animation-iteration-count: 10;
}

#back-color.load-animation{
	width: 0;

}

@keyframes bg-color{
	0% {background-color: #88BFC9;}
	20% {background-color: #88BFC9;}
	25% {background-color: #DCBA01;}
	45% {background-color: #DCBA01;}
	50% {background-color: #88C9AE;}
	70% {background-color: #88C9AE;}
	75% {background-color: #C9888C;}
	95% {background-color: #C9888C;}
	100% {background-color: #88BFC9;}
}

#tagline{
	position: absolute;
	top:30px;
	right: 50px;
	text-transform: uppercase;
	font-weight: 300;
	text-align: right;
	letter-spacing: 0.2em;
	opacity: 1;
	transition: all .5s ease-in-out .8s;

}

#tagline.load-animation{
	opacity: 0;
	right: 60px;
}

#name{
	position: absolute;
	right: 50px;
	bottom: 30px;
	text-transform: uppercase;
	font-weight: 400;
	text-align: right;
	letter-spacing: 0.2em;
	color: #fff;
	opacity: 1;
	transition: all .5s ease-in-out 1s;
}

#name.load-animation{
	opacity: 0;
	right: 60px;
}

#coming-soon{
	position: absolute;
	top: 45%;
	left: 25%;
	/*width: 100%;*/
	/*text-align: center;*/
	font-size: 32px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0.06em;
	opacity: 1;
	margin: 0;
	transition: all .5s ease-in-out 0.5s;
}
#coming-soon span{
	font-size: 70%;
}

#coming-soon.load-animation{
	opacity: 0;
	margin-top: 20px;
}

body{
	font-family: 'Source Code Pro', monospace;
	overflow: hidden;
	max-width: 100vw;
}

@media screen and (max-width: 768px){
	#tagline{
		font-size: 21px;
		right: 30px;
		top: 20px;
	}
	#name{
		font-size: 24px;
		right: 30px;
		bottom: 20px;
	}

	#coming-soon{
		font-size: 24px;
		/*padding: 30px;*/
		/*box-sizing: border-box;*/
		/*top: 40%;*/
		left: 15%;
	}
	

}