body{
	background: #ddd url(../images/bgblue.jpg) no-repeat top left;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

.container > header h1,
.container > header h2 {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.cs-text {
	position: relative;
	width: 960px;
	height: 100px;
	margin: 100px auto;
	cursor: default;
}

.cs-text > span {
	-webkit-perspective: 200px;
	-moz-perspective: 200px;
	-o-perspective: 200px;
	-ms-perspective: 200px;
	perspective: 200px;
	float: left;
	position: relative;
}

.cs-text > span:first-child,
.cs-text > span:last-child {
	z-index: 1;
}

.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
	z-index: 2;
}

.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
	z-index: 3;
}

.cs-text > span:nth-child(4) {
	z-index: 5;
}

.cs-text > span:nth-child(5){
	z-index: 4;
}

.cs-text span span {
	display: block;
	background: #00b7ea;
	background: url(../images/scratch-texture.png), -moz-linear-gradient(left, #00b7ea 0%, #009ec3 100%);
	background: url(../images/scratch-texture.png), -webkit-gradient(linear, left top, right top, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
	background: url(../images/scratch-texture.png), -webkit-linear-gradient(left, #00b7ea 0%,#009ec3 100%);
	background: url(../images/scratch-texture.png), -o-linear-gradient(left, #00b7ea 0%,#009ec3 100%);
	background: url(../images/scratch-texture.png), -ms-linear-gradient(left, #00b7ea 0%,#009ec3 100%);
	background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%);
	box-shadow: 
		-1px 0 2px rgba(255,255,255,0.4),
		-2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	color: #fff;
	text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
	width: 120px;
	height: 150px;
	line-height: 150px;
	font-weight: 700;
	font-size: 140px;
	text-align: center;
	text-transform: uppercase;
}

.cs-text > span:nth-child(n+5) span {
	background: #009ec3;
	background: url(../images/scratch-texture.png), -moz-linear-gradient(left, #009ec3 0%, #00b7ea 100%);
	background: url(../images/scratch-texture.png), -webkit-gradient(linear, left top, right top, color-stop(0%,#009ec3), color-stop(100%,#00b7ea));
	background: url(../images/scratch-texture.png), -webkit-linear-gradient(left, #009ec3 0%,#00b7ea 100%);
	background: url(../images/scratch-texture.png), -o-linear-gradient(left, #009ec3 0%,#00b7ea 100%);
	background: url(../images/scratch-texture.png), -ms-linear-gradient(left, #009ec3 0%,#00b7ea 100%);
	background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%);
	box-shadow: 
		1px 0 2px rgba(255,255,255,0.4),
		2px 0 0 #00adda, 
		-2px 7px 9px rgba(0, 0, 0, 0.5);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.cs-text > span:nth-child(4) span{
	-webkit-transform: translateZ(40px) rotateY(40deg);
	-moz-transform: translateZ(40px) rotateY(40deg);
	-o-transform: translateZ(40px) rotateY(40deg);
	-ms-transform: translateZ(40px) rotateY(40deg);
	transform: translateZ(40px) rotateY(40deg);
}

.cs-text > span:nth-child(5) span{
	-webkit-transform: translateZ(40px) rotateY(-40deg);
	-moz-transform: translateZ(40px) rotateY(-40deg);
	-o-transform: translateZ(40px) rotateY(-40deg);
	-ms-transform: translateZ(40px) rotateY(-40deg);
	transform: translateZ(40px) rotateY(-40deg);
}

.cs-text > span:nth-child(3) span{
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-moz-transform: translateZ(30px) rotateY(30deg);
	-o-transform: translateZ(30px) rotateY(30deg);
	-ms-transform: translateZ(30px) rotateY(30deg);
	transform: translateZ(30px) rotateY(30deg);
}

.cs-text > span:nth-child(6) span{
	-webkit-transform: translateZ(30px) rotateY(-30deg);
	-moz-transform: translateZ(30px) rotateY(-30deg);
	-o-transform: translateZ(30px) rotateY(-30deg);
	-ms-transform: translateZ(30px) rotateY(-30deg);
	transform: translateZ(30px) rotateY(-30deg);
}

.cs-text > span:nth-child(2) span{
	-webkit-transform: translateZ(20px) rotateY(20deg);
	-moz-transform: translateZ(20px) rotateY(20deg);
	-o-transform: translateZ(20px) rotateY(20deg);
	-ms-transform: translateZ(20px) rotateY(20deg);
	transform: translateZ(20px) rotateY(20deg);
}

.cs-text > span:nth-child(7) span{
	-webkit-transform: translateZ(20px) rotateY(-20deg);
	-moz-transform: translateZ(20px) rotateY(-20deg);
	-o-transform: translateZ(20px) rotateY(-20deg);
	-ms-transform: translateZ(20px) rotateY(-20deg);
	transform: translateZ(20px) rotateY(-20deg);
}

.cs-text > span:first-child span{
	-webkit-transform: translateZ(10px) rotateY(10deg);
	-moz-transform: translateZ(10px) rotateY(10deg);
	-o-transform: translateZ(10px) rotateY(10deg);
	-ms-transform: translateZ(10px) rotateY(10deg);
	transform: translateZ(10px) rotateY(10deg);
}

.cs-text > span:last-child span{
	-webkit-transform: translateZ(10px) rotateY(-10deg);
	-moz-transform: translateZ(10px) rotateY(-10deg);
	-o-transform: translateZ(10px) rotateY(-10deg);
	-ms-transform: translateZ(10px) rotateY(-10deg);
	transform: translateZ(10px) rotateY(-10deg);
}

.cs-text > span:nth-child(-n+4) {
	-webkit-transform: translateX(14px);
	-moz-transform: translateX(14px);
	-o-transform: translateX(14px);
	-ms-transform: translateX(14px);
	transform: translateX(14px);
}

.cs-text > span:nth-child(n+5) {
	-webkit-transform: translateX(-14px);
	-moz-transform: translateX(-14px);
	-o-transform: translateX(-14px);
	-ms-transform: translateX(-14px);
	transform: translateX(-14px);
}