body{font-family:'Open Sans', sans serfif;width:336px;height:280px;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;opacity:0;left:0;}
#intro-1{padding-top:10px;animation-name:slide1;animation-duration:10s;}
#intro-2{animation-name:slide2;animation-delay:3s;animation-duration:7s;text-align:right;}
#rainbow{animation-name:rainbow;animation-delay:2s;animation-duration:10s;opacity:0;}
#greene{animation-name:reveal;animation-duration:10s;opacity:0;}
#logo{animation-name:brand;animation-duration:12s;opacity:1;}
#finaltext{animation-name:slide3;animation-duration:14s;left:0;position:relative;padding:5px 10px;background:rgba(0,0,0,.5);text-align:right;top:97px;}
.message{color:#fff;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:26px;}
.town{color:#e9af4b;text-shadow:-2px 1px 0 #000;font-weight:bold;font-size:40px;}


@keyframes slide1{
	0%{left:336px;opacity:1;}
	30%{left:0;opacity:1;}
	80%{left:0;opacity:1;}
	100%{opacity:0;}
}
@keyframes slide2{
	0%{left:336px;opacity:1;}
	50%{left:0;opacity:1;}
	71%{opacity:1;}
	100%{opacity:0;}
}
@keyframes rainbow{
	0%{opacity:0;}
	20%{opacity:1;}
	70%{opacity:1;}
	100%{opacity:0;}
}
@keyframes reveal{
	0%{opacity:1;}
	80%{opacity:1;}
	100%{opacity:0;}
}
@keyframes brand{
	0%{opacity:0;}
	80%{opacity:0;}
	100%{opacity:1;}
}
@keyframes slide3{
	0%{left:-336px;}
	86%{left:-336px;}
	100%{left:0;}
}