body{font-family:'Open Sans', sans serfif;width:728px;height:90px;position:relative;padding:0;margin:0;overflow:hidden;}
.layer{position:absolute;top:0;left:247px;}
.intro{color:#fff;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:24px;padding:10px 10px 0;}
#intro-1{animation-name:reveal1;animation-duration:8s;opacity:0;}
#intro-2{animation-name:reveal2;animation-delay:1s;animation-duration:6s;opacity:0;}
#intro-3{animation-name:reveal3;animation-delay:2s;animation-duration:5s;opacity:0;}
#intro-4{animation-name:reveal4;animation-delay:3s;animation-duration:4s;opacity:0;}
#rainbow{animation-name:rainbow;animation-duration:5s;opacity:1;}
#logo,#rainbow{left:0;}
#town{animation-name:slide;animation-duration:7s;}
#finaltext{animation-name:slide;animation-duration:7s;padding:5px 10px 5px 218px;background:rgba(0,0,0,.3);text-align:right;box-sizing:border-box;height:90px;width:481px;}
.message{color:#fff;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:23px;}
.town{animation-name:bounce;animation-duration:8s;animation-timing-function:linear;color:#e9af4b;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:34px;position:relative;left:0;}


@keyframes reveal1{
	0%{opacity:0;}
	25%{opacity:1;}
	88%{opacity:1;}
	100%{opacity:0;}
}
@keyframes reveal2{
	0%{opacity:0;}
	33%{opacity:1;}
	83%{opacity:1;}
	100%{opacity:0;}
}
@keyframes reveal3{
	0%{opacity:0;}
	40%{opacity:1;}
	77%{opacity:1;}
	78%{opacity:0;}
	100%{opacity:0;}
}
@keyframes reveal4{
	0%{opacity:0;}
	50%{opacity:1;}
	62%{opacity:1;}
	63%{opacity:0;}
	100%{opacity:0;}
}
@keyframes rainbow{
	0%{opacity:0;}
	60%{opacity:0;}
	100%{opacity:1;}
}
@keyframes slide{
	0%{left:729px;}
	71%{left:729px;}
	100%{left:247px;}
}
@keyframes bounce{
	0%{left:-300px;opacity:0;}
	84%{left:-300px;opacity:0}
	85%{left:-300px;opacity:1}
	98%{left:10px;}
	100%{left:0;}
}