/* 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 {  padding: 0;  position: relative; background: url(spinner.gif) 50% 50% no-repeat; min-height: 100px; overflow: hidden; } /* slideshow images (for most of the demos, these are the actual "slides") */ .cycle-slideshow img {  /*  some of these styles will be set by the plugin (by default) but setting them here helps avoid flash-of-unstyled-content */ position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block; } /* in case script does not load */ .cycle-slideshow img:first-child { position: static; z-index: 100; } /* pager */ .cycle-pager {  text-align: right; width: 100%; z-index: 500; position: absolute; bottom: 0; overflow: hidden; padding-right: 10px; } .cycle-pager span {  font-family: arial; font-size: 50px; width: 16px; height: 16px;  display: inline; color: #fff; cursor: pointer; line-height: 16px; } .cycle-pager span.cycle-pager-active { color: #660066; } .cycle-pager > * { cursor: pointer; } /* caption */ .cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; } /* overlay */ .cycle-overlay {  font-family: tahoma, arial; position: absolute; bottom: 0; width: 100%; z-index: 600; background: black; color: white; padding: 3px 15px; opacity: .7; } /* prev / next links */ .cycle-prev, .cycle-next { position: absolute; top: 0; width: 20%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; } .cycle-prev { left: 0;  background: url('left.png') 50% 50% no-repeat; } .cycle-next { right: 0; background: url('right.png') 50% 50% no-repeat; } .cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) } .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; top: 10px; right: 10px; border-radius: 10px; opacity: .5; filter: alpha(opacity=50); } .cycle-slide{ width: 100%; } /*  media queries  some style overrides to make things more pleasant on mobile devices @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { .cycle-slideshow { width: 200px;} .cycle-overlay { padding: 4px } .cycle-caption { bottom: 4px; right: 4px } } */