.simpleSlider {height:700px; width: 100%; background: #000000; position: relative;}
/* The circle and arrow buttons */
.buttonArea{
    position: relative;            
    bottom: 230px; height: 8px; z-index: 9998;
	width: 1120px; margin: 0px auto; text-align: center;
}  
.buttonCon{  
    text-align: center;
    position: relative;        
}
.buttonCon .theButton {
	display: block;
	width: 40px;
	height: 5px;
	background: #FFFFFF;
	text-indent: -9999px;
	border: 0;
	margin-right: 10px;
	display: inline-block;
	text-align: center;
	opacity: 0.5;
}
.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: 700px;
	position: relative;
	left: 0px;
	margin-left: 0px;
	background: #000000;
	overflow: hidden;
}         
.mainSlider {
	width: 100%; height:700px;	 
	position: relative;          
	float: left;     
}   
.mainSlider .sliderItem {
	width:100%; height:700px; background-blend-mode: multiply; background-color: #1a3a3e59 !important;
}
.subSlider {         
	position: absolute;
	float: left; width:100%;
	margin: 0px auto; height:700px;
	top: 0px !important; left: 0px !important;
	z-index: 999;
}
.subSlider .sliderItem {width: 1120px; margin: 0px auto; text-align: center;} 
.subSlider .sliderItem h2 {
	color: #FFFFFF; font-size: 48px;
    font-weight: normal; line-height: 48px;
    letter-spacing: 0px; margin-bottom: 20px;
}
.subSlider .sliderItem h3 {
	color: #FFFFFF; font-size: 16px; text-transform: uppercase;
    font-weight: normal; line-height: 20px; font-family: 'proxima_novaextrabold';
    letter-spacing: 10px; margin-bottom: 20px;
}
.subSlider .sliderItem i {
	color: #FFFFFF; font-size: 56px;margin: 100px 0px 30px 0px;
    font-weight: normal; line-height: 56px;
}
.subSlider .sliderItem a {
	color: #FFFFFF; font-size: 14px; text-transform: uppercase; padding: 0px 20px;
    font-weight: normal; line-height: 50px; font-family: 'proxima_novaextrabold'; display: inline-block;
    letter-spacing: 4px; height: 50px; border: 1px solid #a8764e; 
}
.subSlider .sliderItem a:hover {
    background: #a8764e; border: 1px solid #a8764e; 
}