.slider{ width:630px;position:relative; z-index:1; background:#003300; padding:5px;}
.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:-81px; left:434px;}
	.flex-control-nav li{ display:none; float:left; margin-right:1px;}
		.flex-control-nav li a{ display:none; background:url("../images/pagination.png") 0 0 no-repeat; width:24px; height:24px; text-indent:-5000px;}
		.flex-control-nav li a:hover,.flex-control-nav li a.active{ background-position:0 -24px;}
/* Caption */
.flex-caption{ position:absolute; font:20px/24px Arial, Helvetica, sans-serif; color:#382c27; text-align:center; width:100%; bottom:-40px;}
/* Background */
.bg-slider{ width:630px}
.main-slider{ width:630px; margin:0 auto; height:480px; overflow:hidden;}

@media only screen and (min-width: 768px) and (max-width: 995px) {
	.main-slider{ width:480px; height:366px; overflow:hidden}
	.slider {width:460px;background:#003300; padding:5px;}
	.bg-slider{ width:480px; }	
	.flex-control-nav{left:45%;}
}
@media only screen and (max-width: 767px) {
	.main-slider{ width:300px; height:228px;}
	.slider {width:280px; background:#003300; padding:5px;}
	.bg-slider{ width:300px;}
	.flex-control-nav{left:40%; bottom:15px;}
	.flex-caption{ display:none;}	
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.main-slider{ width:420px; height:320px; padding-left:0;}
	.slider {width:400px;background:#003300; padding:5px;}
	.bg-slider{ width:420px;}
}