#slider {
    width:820px;height:300px;/* Make it the same size as your images */
    background:#fff no-repeat 50% 50%;
    position:relative;
    margin:0 auto 20px;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
    position:absolute;
    border:none;
    display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}


.mc-caption-bg, div.mc-caption-bg2 {
    position:absolute;
    width:100%;
    height:auto;
    padding:0;
    left:0px; 
    bottom:0px;
    z-index:3;
    font-size: 0;
}
.mc-caption {
    font: bold 16px/20px "Open Sans" , sans-serif;
    color:#DDD;
    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;
}
.mc-caption a {
    color:#FB0;
}
.mc-caption a:hover {
    color:#DA0;
}