/* http://www.menucool.com */
#sliderFrame {
     position: relative;
     width: 100%;
     margin: 0 auto; /*center-aligned*/
}
#slider, #slider div.sliderInner {
    /* width: 100%;*/
     height: 506px; /* Must be the same size as the slider images */
}
#slider {
     /*  background:#fff url(loading.gif) no-repeat 50% 50%;  */
     background-repeat: no-repeat !important;
     background-position: center center !important;
     background-size: 100% 100% !important;
     position: relative;
     margin: 0 auto;
     transform: translate3d(0, 0, 0);
     box-shadow: 0px 1px 5px #999999;
}
/* image wrapper */
#slider a.imgLink, #slider div.video {
     z-index: 2;
     position: absolute;
     top: 0px;
     left: 0px;
     border: 0;
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
}
#slider .video {
     background: transparent url(video.html) no-repeat 50% 50%;
}
/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
     position: absolute;
     width: 100%;
     height: auto;
     padding: 10px 20px; /* 10px will increase the height.*/
     left: 30px;
     top: 350px;
     z-index: 3;
     overflow: hidden;
     font-size: 0;
}
#slider div.mc-caption-bg {
     /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
     width: 65%;
     border-radius: 5px;
     /* or any other colors such as White, or: background:none; */
}
#slider div.mc-caption-bg2 {
     background: none;
}
#slider div.mc-caption {
     font: bold 40px/40px Arial;
     color: #fff;
     z-index: 4;
     text-align: left;
     background: none;
     text-transform: uppercase;
     text-shadow: 2px 2px 8px #000;
}
#slider div.mc-caption a {
     color: #FB0;
}
#slider div.mc-caption a:hover {
     color: #DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
#slider div.navBulletsWrapper {
     top: auto !important; /* Its position is relative to the #slider */
     bottom: 5px!important;
     text-align: center;
     background: none;
     position: absolute;
     z-index: 5;
     width: 100%!important;
}
/* each bullet */
#slider div.navBulletsWrapper div {
     width: 11px;
     height: 11px;
     font-size: 0;
     color: White; /*hide the index number in the bullet element*/
     background: transparent url(bullet.png) no-repeat 0 0;
     display: inline-block;
     *display: inline;
     zoom: 1;
     overflow: hidden;
     cursor: pointer;
     margin: 0 6px; /* set distance between each bullet*/
}
#slider div.navBulletsWrapper div.active {
     background-position: 0 -11px;
}
/* --------- Others ------- */
#slider div.loading {
     width: 100%;
     height: 100%;
     background: transparent url(loading.gif) no-repeat 50% 50%;
     filter: alpha(opacity=60);
     opacity: 0.6;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 9;
}
#slider img, #slider > b, #slider a > b {
     position: absolute;
     border: none;
     display: none;
}
#slider div.sliderInner {
     overflow: hidden;
     -webkit-transform: rotate(0.000001deg); /* fixed the Chrome not crop border-radius bug*/
     position: absolute;
     top: 0;
     left: 0;
}
#slider > a, #slider video, #slider audio {
     display: none;
}
@media only screen and (max-width:1280px) {
     #slider div.sliderInner {
          display: none !important;
     }
     #slider, #slider div.sliderInner {
          width: 100%;
          height: 341px; /* Must be the same size as the slider images */
     }
}
@media only screen and (max-width:1025px) {
     #slider, #slider div.sliderInner {
          width: 100%;
          height: 331px; /* Must be the same size as the slider images */
     }
}
@media only screen and (max-width:992px) {
     #slider, #slider div.sliderInner {
          width: 100%;
          height: 255px; /* Must be the same size as the slider images */
     }
}
@media only screen and (max-width:767px) {
     #slider, #slider div.sliderInner {
          width: 100%;
          height: 192px; /* Must be the same size as the slider images */
     }
}
@media only screen and (max-width:576px) {
     #slider, #slider div.sliderInner {
          width: 100%;
          height: 123px;
     }
}
@media only screen and (max-width:370px) {
     #slider, #slider div.sliderInner {
          width: 100%;
          height: 107px;
     }
}