.slider-frame {
    /* background: #fff url('loading.gif') no-repeat 50% 50%; */
    background: #fff;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 1px 5px #999999;
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);

    img {
        position: absolute;
        border: none;
        display: none;
        margin: 0 auto;
        width: 300px;
        height: 120px;
    }

    @media (min-width: 668px) {
        img {
            width: 630px;
            height: 250px;
        }
    }

    a.imgLink {
        z-index: 2;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
}

.slider-horizontal {
    position: relative;
    width: 100%;
    margin: 0 auto;

    .slider-frame {
        width: 300px;
        height: 120px;
        background-size: 300px 120px !important;

        .mcSlc,
        .mcBox {
            /* This would change based on your original images size */
            /* First argument is width, second is height */
            background-size: 300px 120px !important;
        }
    }

    @media (min-width: 520px) {
        .slider-frame {
            width: 475px;
            height: 180px;
            background-size: 475px 180px !important;

            .mcSlc,
            .mcBox {
                /* This would change based on your original images size */
                /* First argument is width, second is height */
                background-size: 475px 180px !important;
            }
        }
    }

    @media (min-width: 768px) {
        .slider-frame {
            width: 630px;
            height: 250px;
            background-size: 630px 250px !important;

            .mcSlc,
            .mcBox {
                /* This would change based on your original images size */
                /* First argument is width, second is height */
                background-size: 630px 250px !important;
            }
        }
    }
}

.slider-vertical {
    position: relative;
    margin:0 auto;
    width: 260px;
    border: 1px solid #ccc;

    img {
        width: auto!important;
    }

    .slider-frame {
        width: 260px;
        height: 380px;
    }
}

/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    left: 0; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    bottom: 0; /*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    z-index: 3;
    overflow: hidden;
    font-size: 0;
}

div.mc-caption-bg {
    background-color: black;
}

div.mc-caption {
    font: bold 14px/20px Arial;
    color: #eeeeee;
    z-index: 4;
    padding: 10px 0; /*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
    text-align: center;
}

div.mc-caption a {
    color: #ffbb00;
}

div.mc-caption a:hover {
    color: #ddaa00;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
    /*display: none;*/
    top: 10px;
    left: 565px; /* Its position is relative to the #slider */
    width: 150px;
    background: none;
    padding-left: 20px;
    position: relative;
    z-index: 5;
    cursor: pointer;
}

/* each bullet */
div.navBulletsWrapper div {
    width: 11px;
    height: 11px;
    background: transparent url('bullet.png') no-repeat 0 0;
    float: left;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 11px; /* distance between each bullet*/
    _position: relative; /*IE6 hack*/
    display: none;
}

div.navBulletsWrapper div.active {
    background-position: 0 -11px;
}