.simpleSlider {height:600px; width: 100%; background: #000000; position: relative;}
/* The circle and arrow buttons */
.buttonArea{
    position: relative;            
    bottom: 80px; height: 8px; z-index: 9998;
	width: 1120px; margin: 0px auto;
}                     
.buttonCon{  
    float: left;
    position: relative;        
}
.buttonCon .theButton {
	display: block;
	width: 8px;
	height: 8px;
	background: #FFFFFF;
	text-indent: -9999px;
	border: 0;
	margin-right: 10px;
	float: left;
	opacity: 0.5;
	border-radius: 50%;
}
.buttonArea a.active {
	opacity: 1;
}

.arrowButton{    
	cursor: pointer;
}            
.arrowButton .prevArrow{
	background: url(../img/left.png) no-repeat; 
	width: 40px;
	height: 70px;      
	position: absolute;
	top: 50%; margin-top:-35px;
	left: 50px;
} 
.arrowButton .nextArrow{                 
	background: url(../img/right.png) no-repeat;
	width: 40px;
	height: 70px;
	position: absolute;
	top: 50%; margin-top:-35px;
	right: 50px;          
}    
           


/* required CSS3 animation, you can see http://daneden.me/animate/ for more information */

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    0% {
		opacity: 1;
		-webkit-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-webkit-transform: translateX(100%) rotate(120deg);
	}
}

@-moz-keyframes rollOut {
    0% {
		opacity: 1;
		-moz-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-moz-transform: translateX(100%) rotate(120deg);
	}
}

@-ms-keyframes rollOut {
    0% {
		opacity: 1;
		-ms-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-ms-transform: translateX(100%) rotate(120deg);
	}
}

@-o-keyframes rollOut {
    0% {
		opacity: 1;
		-o-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-o-transform: translateX(100%) rotate(120deg);
	}
}

@keyframes rollOut {
    0% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		transform: translateX(100%) rotate(120deg);
	}
}

.rollOut {
	-webkit-animation-name: rollOut;
	-moz-animation-name: rollOut;
	-ms-animation-name: rollOut;
	-o-animation-name: rollOut;
	animation-name: rollOut;
}  


@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-ms-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-ms-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-ms-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}      

/* The animation delay settings, required */

.animate0{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 0s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 0s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 0s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}         

.animate1{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .3s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .3s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .3s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .3s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.animate2{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .6s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .6s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .6s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .6s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
} 

.animate3{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: .9s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: .9s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: .9s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: .9s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}   

.animate4{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1.2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 1.2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 1.2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}  

.animate5{
   	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1.5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: .6s;
	-moz-animation-delay: 1.5s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: .6s;
	-ms-animation-delay: 1.5s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	animation-duration: .6s;
	animation-delay: 1.5s;
	animation-timing-function: ease;
	animation-fill-mode: both;	          
}     



/* set the whole slider's width and height, keep same as defined in the jQuery */
#banner {
	width: 100%;		   
	height: 600px;
	position: relative;
	left: 0px;
	margin-left: 0px;
	background: #000000;
	overflow: hidden;
}         
.mainSlider {
	width: 100%; height:600px;	 
	position: relative;          
	float: left;     
}   
.mainSlider .sliderItem {
	width:100%; height:600px;
}
.subSlider {         
	position: absolute;
	float: left; width:100%;
	margin: 0px auto; height:600px;
	top: 0px !important; left: 0px !important;
	z-index: 999;
}
.subSlider .sliderItem {width: 1120px; margin: 0px auto;}  
.subSlider .sliderItem h2 {
	color: #FFFFFF; font-size: 56px; width: 100%; font-weight: 300; text-align: left;
    font-weight: normal; line-height: 56px; text-shadow:0px 3px 3px rgba(0,0,0,0.1);
    position: absolute; bottom: 140px; letter-spacing: -4px;
}