/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* .cycle-slideshow { width: 100%; min-width: 1024px; position: relative; }  */

/* slideshow images (for most of the demos, these are the actual "slides") */

/* in case script does not load */
.cycle-slideshow img:first-child { position: static; z-index: 100; }

/* caption */
#alt-caption { font-size: 20px; text-align: center; width: 1024px; position: absolute; color: white; letter-spacing: 1px; margin-top: -30px; z-index: 700; }

/* overlay */
.cycle-overlay { font-family: tahoma, arial; position: absolute; bottom: 0; width: 100%; z-index: 600; background: black; color: white; padding: 15px; opacity: .5; }

/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; width: 25px; z-index: 800; height: 44px; cursor: pointer; }
.cycle-prev { margin-left: -30px; top: 380px; background: url("../images/left_over.png"); background-repeat: no-repeat;}
.cycle-next { margin-left: 1034px; top: 380px; background: url("../images/right_over.png"); background-repeat: no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=80); }

.disabled { opacity: .5; filter:alpha(opacity=50); }

/* display paused text on top of paused slideshow */
.cycle-paused:after { content: 'Paused'; color: white; background: black; padding: 10px; z-index: 500; position: absolute; bottom: 10px; left: 10px; border-radius: 10px; opacity: .25; filter: alpha(opacity=25); }