.slider{ width:960px; position:relative; z-index:1;}
.flexslider {width: 100%; margin: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
/* control Nav */
.flex-control-nav{ position:absolute; bottom:10px; left:36%;}
	.flex-control-nav li{ display:block; float:left; margin-right:1px;}
		.flex-control-nav li a{ display:block; background:url(../images/pagination.png) 0 0 no-repeat; width:24px; height:13px; text-indent:-5000px;}
		.flex-control-nav li a:hover,.flex-control-nav li a.active{ background-position:0 -14px;}
/* Caption */
.flex-caption{ position:absolute; font:20px/24px Arial, Helvetica, sans-serif; color:#382c27; text-align:center; width:100%; bottom:-40px;}
/* Background */
.main-slider{ width:960px; margin:0 auto; height:420px; overflow:hidden;}
@media only screen and (min-width: 783px) and (max-width: 980px) {
	.main-slider{ width:758px; height:350px; margin:0 auto;}
	.slider {width:758px;}
	.flex-control-nav{left:33%;}
}
@media only screen and (min-width: 480px) and (max-width: 782px) {
	.main-slider{ width:420px; height:190px;}
	.slider {width:420px;}
	.flex-control-nav{left:19%; bottom:10px;}
}
@media only screen and (max-width: 479px) {
	.main-slider{ width:300px; height:140px;}
	.slider {width:300px;}
	.flex-control-nav{left:4%; bottom:5px;}
	.flex-caption{ display:none;}	
}