body{
	background: #f0f0f0 url(../images/smooth_wall.jpg) repeat top left;
	font-family: 'Bangers', Georgia, serif;
	color: #fff;
}
h1{
	color: #fff;
	position: relative;
	z-index: 100;
}
.content{
	position: relative;
	z-index: 100;
}
.letter-container{
	text-align: center;
	padding: 20px;
	border-bottom: 5px dashed rgba(255,255,255,0.3);
	border-top: 5px dashed rgba(255,255,255,0.3);
	height: 150px;
	z-index: 10;
	position: relative;
	margin: 20px;
}
.letter-container h2 a{
	font-size: 140px;  
	display: block;
	width: 495px;
	margin: 0 auto;
	clear: both;
}
.letter-container h2 a:before{
	content: '';
	position: absolute;
	z-index: 0;
	width: 525px;
	height: 616px;
	background: transparent url(../images/superhero.png) no-repeat center center;
	background-size: 40%;
	top: 0px;
	left: 50%;
	margin-left: -277px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.letter-container h2 a:hover:before{
	background-size: 100%;
}
.letter-container h2 a span{
	color: #ff3de6;
	float:left;
	position: relative;
	z-index: 100;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-shadow:  
	  0px -1px 3px #cb4aba, 
	  0 4px 3px #934589, 
	  2px 15px 5px rgba(0, 0, 0, 0.2), 
	  1px 20px 10px rgba(0, 0, 0, 0.3);
}
.letter-container h2 a span:hover{
	color: #e929d0;
	padding-top: 10px;
	text-shadow:  
	  0px -1px 3px #cb4aba, 
	  0 4px 3px #934589, 
	  1px 1px 10px rgba(0, 0, 0, 0.2);
}