/*Slideshow*/

#slideshow {
    position: relative;
    overflow: hidden;
    background-color: #eee;
}

#slideshow > div.slide {
    width:100%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    text-align: center;
    vertical-align: middle;
}

#slideshow > div.slide img{
    width: 100%;
}

/* Next & previous buttons */

.prev, .next {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 36%;
    width: auto;
    color: white;
    font-weight: bold;
    font-size: 28px;
    line-height: 10px;
    padding: 16px 9px 16px 9px;
    border-radius: 0 3px 3px 0;
    background-color: rgb(0,0,0);
    transition: 0.6s ease;
}

/* disable selection */
.prev::selection {
    background: transparent;
    color: inherit;
}

.prev::-moz-selection {
    background: transparent;
    color: inherit;
}

.prev {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.next::selection {
    background: transparent;
    color: inherit;
}

.next::-moz-selection {
    background: transparent;
    color: inherit;
}

.next {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

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


/* On hover, add a black background color with a little bit see-through */
#slideshow .prev:hover,
#slideshow .next:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=0.9);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

/* Caption text */
.caption {
    color: #f2f2f2;
    font-size: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px 10px;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    box-sizing: border-box;
}

.fade, .custom-fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}