body {
	margin: 0; 
	padding: 0;
	background: #000;
	text-align: center; 
	font-family: myriad-pro, sans-serif; font-style: normal; font-weight: 300;
	color: #000;
}

#outercircle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 290px;
	height: 400px;
}

#centercircle {
	width: 290px;
	height: 400px;
	color: #000;
	
	position: relative;
	top: -140px;
	left: -145px;
	
	text-align: center;
	font-size: xx-large;
}

#centercircle span {
	width: 210px;
	height: 400px;
	padding: 0 40px 0 40px;
	display: block;
	vertical-align: middle;	
	
}

.firstcircle  {
	background: url(../img/circle1.png) top left no-repeat;	
}

.firstcircle:hover {
	background: url(../img/circle1.png) top right no-repeat;
}

.secondcircle {
	background: url(../img/circle2.png) top left no-repeat;	
}

.secondcircle:hover {
	background: url(../img/circle2.png) top right no-repeat;
}
.thirdcircle {
	background: url(../img/circle3.png) top left no-repeat;	
}

.thirdcircle:hover {
	background: url(../img/circle3.png) top right no-repeat;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: #fff;
}