.slider{ width:940px;position:relative; z-index:1; margin:0 auto 0; padding:30px 0 0 0;}
.flexslider,.flexslider2 {width: 100%; margin: 0;}
.flexslider .slides > li ,.flexslider2 .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider2 .slides > li { background:#fff;}
.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%;}
/* caption */
.caption{ position:absolute; left:1px;bottom:31px; background: url(../img/bg-caption.png) 0 0 repeat; width:440px; height:106px; color:#fff; font:28px/38px Arial, Helvetica, sans-serif;}
.caption span{ text-transform:uppercase; font-weight:bold;}
.caption em{ font-style:normal; font-size:24px; display:inline-block; margin-top:2px;}
.caption>div{ padding:20px 0 0 30px;}
.caption>div>div{ margin-top:-8px;}
@media only screen and (min-width: 768px) and (max-width: 995px) {
	.slider {width:748px;}
	.flex-control-nav{ position:absolute;}
	.caption{ position:absolute; width:290px;}
	.text2{ font:35px/48px 'Alegreya', serif;; text-transform:uppercase;}
}
@media only screen and (max-width: 767px) {
	.slider {width:300px;}
	.caption{ display:none;}
	.flex-control-nav{ position:absolute; bottom:38%; right:30px;}
	.flex-control-nav li{ display:block; float:none; margin-right:0; margin-bottom:2px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.slider {width:420px;}
	.flex-control-nav{ position:absolute; bottom:40%; right:40px;}
}