body{font-family:'Open Sans', sans serfif;width:320px;height:100px;position:relative;padding:0;margin:0;overflow:hidden;}
.layer{position:absolute;top:0;left:0;}
.intro{position:relative;color:#fff;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:26px;padding:0 10px;}
#intro-1{padding-top:10px;animation-name:slide1;animation-duration:2s;}
#intro-2{animation-name:slide2;animation-duration:4.5s;text-align:right;}
#rainbow{animation-name:rainbow;animation-duration:3s;opacity:1;}
#logo{animation-name:brand;animation-duration:8s;opacity:1;}
#town{animation-name:slide3;animation-duration:7s;}
#finaltext{animation-name:slide3;animation-duration:7s;padding:5px 10px 5px 170px;background:rgba(0,0,0,.3);text-align:right;box-sizing:border-box;height:100px;width:320px;line-height:1.2;}
.message{color:#fff;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:20px;}
.town{animation-name:bounce;animation-duration:8s;animation-timing-function:linear;color:#e9af4b;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:26px;position:relative;left:0;}

#vanish1{animation-name:vanish1;animation-duration:6s;opacity:0;}
#vanish2{animation-name:vanish2;animation-duration:6s;opacity:0;}



@keyframes slide1{
	from{left:320px;}
	to{left:0;}
}
@keyframes slide2{
	0%{left:320px;}
	33%{left:320px;}
	100%{left:0;}
}
@keyframes rainbow{
	0%{opacity:0;}
	33%{opacity:0;}
	100%{opacity:1;}
}
@keyframes slide3{
	0%{left:320px;}
	69%{left:320px;}
	100%{left:0;}
}
@keyframes bounce{
	0%{left:-300px;opacity:0;}
	84%{left:-300px;opacity:0}
	85%{left:-300px;opacity:1}
	98%{left:10px;}
	100%{left:0;}
}
@keyframes brand{
	0%{opacity:0;}
	81%{opacity:0;}
	100%{opacity:1;}
}
@keyframes vanish1{
	0%{opacity:1;}
	90%{opacity:1;}
	100%{opacity:0;}
}
@keyframes vanish2{
	0%{opacity:1;}
	83%{opacity:1;}
	100%{opacity:0;}
}