/* 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 { 
 position: relative;


 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img, .cycle-slideshow picture { 

 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: center;
 width: 100%;
 z-index: 500;
 position: absolute;
 bottom: 10px;
 overflow: hidden;

}


.cycle-pager span { 

 width: 20px;
 height: 20px;
 margin-right: 4px;
    display: inline-block;
 cursor: pointer;
border: 2px solid white;
-webkit-border-radius: 360px;
-moz-border-radius: 360px;
border-radius: 360px;
background: white;
    color: white;
 
}
.cycle-pager span.cycle-pager-active { 
color: transparent;
    background: transparent;
}


.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: 15px;
 opacity: .5;

}


.cycle-prev, .cycle-next { 
position: absolute;
 top: 0;
 width: 5%;
  z-index: 800;
 height: 100%;
 cursor: pointer;
 }
.cycle-prev { 
left: 0;
  background: url(../images/prev.png) 50% 50% no-repeat;
}
.cycle-next { 
right: 0;
 background: url(../images/next.png) 50% 50% no-repeat;
}

.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);

}

/* 
    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 }
}