#carousel {
  height: 548px;
  position: relative;
  top: -105px;
  width: 960px;
  z-index: 0;
  /*opacity:0;*/
  z-index:-1;
  display:none;
}

/* warp speed ahead */
#carousel * {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* more specific animation properties here */
}


		
#carousel > div {
	position:absolute;
	text-align:center;
	font-size:100px;
	top:25%;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width:40%;
	height:100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#carousel > div span {
  color: #fff;
  display: block;
  margin: -52px 0 0;
  position: relative;
  top: 50%;
}
.front {
	left:30%;
	z-index:500;
}
.right {
	left:55%;
	z-index:300;
}
.left {
	left:5%;
	z-index:300;
}

.warrior {
	background:url(http://img.playa-games.com/res/landingpage_new/sfgame/img/carousel/warrior.png) no-repeat center center;
	width:364px;
	height:548px;
}
.mage {
	background:url(http://img.playa-games.com/res/landingpage_new/sfgame/img/carousel/mage.png) no-repeat center center;
	width:349px;
	height:471px;
}
.hunter {
	background:url(http://img.playa-games.com/res/landingpage_new/sfgame/img/carousel/hunter.png) no-repeat center center;
	width:287px;
	height:511px;
}

[data-pos="right"],
[data-pos="left"] {	cursor:pointer; }



/* classes */
#carousel #class-icon {
  background: url("http://img.playa-games.com/res/landingpage_new/sfgame/img/carousel/class_icons.png") no-repeat scroll 0 0;
  height: 256px;
  left: 50%;
  margin-left: -107px;
  position: absolute;
  top: 277px;
  width: 215px;
  z-index: 1000;
}
#carousel #class-icon.class3 {background-position:-215px 0;}
#carousel #class-icon.class2 {background-position:-430px -1px;}

#carousel .car-left {
  background: url("http://img.playa-games.com/res/landingpage_new/sfgame/img/carousel/arrow_l.png") no-repeat scroll -93px 0;
  height: 89px;
  left: 50%;
  margin-left: -200px;
  position: absolute;
  top: 370px;
  width: 93px;
  z-index: 1000;
  cursor:pointer;
}
#carousel .car-left:hover {
	background-position:0 0;
}
#carousel .car-right {
  background: url("http://img.playa-games.com/res/landingpage_new/sfgame/img/carousel/arrow_r.png") no-repeat scroll 0 0; 
  height: 89px;
  right: 50%;
  margin-right: -200px;
  position: absolute;
  top: 370px;
  width: 93px;
  z-index: 1000;
  cursor:pointer;
}
#carousel .car-right:hover {background-position:-93px 0;}

#carousel #class-name {
  font-size: 22px;
  height: 30px;
  left: 330px;
  position: absolute;
  text-align: center;
  text-shadow: 2px 2px 0 #000, 0 2px 0 #000, -2px 2px 0 #000, -2px 0 0 #000, -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, 2px 0 0 #000;
  text-transform: uppercase;
  top: 470px;
  width: 300px;
  z-index: 1000;
 
}

#carousel #class-name div{font-weight:bold;}

#class2-name,#class3-name{display:none;}

#class1-name{color:#f4e5e8;}
#class2-name{color:#c5f6ff;}
#class3-name{color:#f5ffdf;}


@media (max-width:1024px) {
#carousel {
  top: -150px;
  transform: scale(0.8, 0.8);
  left: -155px;
}
}