/* Slideshow container */
div.slideshow-container { width: 100%; position: relative; }

div.slideshow-image { display: none; position:relative; }
div.slideshow-image img { vertical-align:middle; width:initial; max-width:100%; text-align:center; margin:0 auto !important; display:block; }

/* Next & previous buttons */
.prev, .next { cursor: pointer; background-color: rgba(0,0,0,0.3); position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }

/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Caption text */
div.slideshow-image div.caption-content b { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

/* The dots/bullets/indicators */
/*.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }*/
/*.active, .dot:hover { background-color: #717171; }*/

/* Fading animation */
.slideshow-fade { animation-name: fade; animation-duration: 1s; }

@keyframes fade {
    from { opacity: .7 }
    to { opacity: 1 }
}