.bx-wrapper {
position : relative;
margin : 0 auto 0 auto;
max-width : 984px;
}
.bx-wrapper img {
max-width : 100%;
display : block;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
position : absolute;
bottom : 0;
width : 100%;
}
.bx-wrapper .bx-loading {
min-height : 50px;
background : url("../js/images/bx_loader.gif") center center no-repeat #fff;
height : 100%;
width : 100%;
position : absolute;
top : 0;
left : 0;
z-index : 2000;
}
.bx-wrapper .bx-pager {
text-align : center;
font-size : 0.85em;
font-family : Arial;
font-weight : bold;
color : #666;
padding-top : 16px;
padding-bottom : 14px;
}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display : inline-block;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background : rgb(255, 255, 255, 0.25);
text-indent : -9999px;
display : block;
width : 10px;
height : 10px;
margin : 0 2px;
outline : 0;
border-radius : 5px;
display : none;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background : #fff;
}
.bx-wrapper .bx-prev {
left : 20px;
background : url("../img/arrow-prev.png") no-repeat;
opacity : 1;
width : 25px;
height : 40px;
}
.bx-wrapper .bx-next {
right : 6px;
background : url("../img/arrow-next.png") no-repeat;
opacity : 1;
width : 25px;
height : 40px;
}
.bx-wrapper .bx-prev:hover {
background : url("../img/arrow-prev.png") no-repeat;
opacity : 0.5;
}
.bx-wrapper .bx-next:hover {
background : url("../img/arrow-next.png") no-repeat;
opacity : 0.5;
}
.bx-wrapper .bx-controls-direction a {
position : absolute;
top : 50%;
margin-top : -16px;
outline : 0;
width : 37px;
height : 60px;
text-indent : -9999px;
z-index : 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display : none;
}
.bx-wrapper .bx-controls-auto {
text-align : center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display : block;
text-indent : -9999px;
width : 10px;
height : 11px;
outline : 0;
background : url("../js/images/controls.png") -86px -11px no-repeat;
margin : 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
background-position : -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display : block;
text-indent : -9999px;
width : 9px;
height : 11px;
outline : 0;
background : url("../js/images/controls.png") -86px -44px no-repeat;
margin : 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
background-position : -86px -33px;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align : left;
width : 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right : 0;
width : 35px;
}
.bx-wrapper .bx-caption {
position : absolute;
bottom : 40px;
right : 40px;
width : 100%;
}
.bx-wrapper .bx-caption h2 {
color : #fff;
display : block;
font-size : 2.6em;
padding : 20px;
float : right;
font-weight : 300;
background-color : rgb(0, 0, 0, 0.2);
}
@media (max-width: 620px) {
.bx-wrapper .bx-caption h2 {
display : none;
}
}