body { font-family: 'Century Gothic', sans-serif; font-size: 22px; background-color: #DBDAAE; color: #fff; min-width: 400px; min-height: 400px; }
.hidden{display:none;}
.layer{
	position:absolute; left:50%; top:40%; margin-left:-250px; margin-top:-250px;
	width:500px; height:500px; text-align:center; 
}
.upper, .bottom { width: 500px; height: 250px; background: url(sprite.jpg) no-repeat; }
.bottom{background-position:0 -250px;}

.layer.active .upper, .layer.active .bottom {background-image:url(spritecolored.jpg)}

*,*:before,*:after{box-sizing:border-box}
.slogan, .comingsoon{
	position:absolute; top:440px; width:100%; text-align:left;
	font-size:15px; color:#000; padding-left:110px;
}

.layer.active .slogan{display:none;}


.comingsoon{
	display:none;
	 font-weight:bold;
}
.comingsoon div{display:none;}
.layer.active .comingsoon{display:block;}





.hoverLayer{
	position:absolute; left:50%; top:50%; margin-left:-195px; margin-top:-220px;
	
	width:390px; height:440px;
}