* {box-sizing:border-box}



/* Slideshow container */

.slideshow-container {

 max-width: 1000px;

 position: relative;

 margin: auto;

}



/* Hide the images by default */

.mySlides {

 display: none;

}

.show {
    display: block;
}

/* Next & previous buttons */

.prev, .next {

 cursor: pointer;

 position: absolute;

 top: 50%;

 width: auto;

 margin-top: -22px;

 padding: 16px;

 color: white;

 font-weight: bold;

 font-size: 18px;

 transition: 0.6s ease;

 border-radius: 0 3px 3px 0;

 user-select: none;

 color: rgb(46, 46, 46);

}

@media (max-width: 991px) {
    .prev, .next {
        left: 16%;
    }
    .next {
        margin-left: 59%;
        max-width: 46px;
    }
}


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

.text {

 color: #f2f2f2;

 font-size: 15px;

 padding: 8px 12px;

 position: absolute;

 bottom: 8px;

 width: 100%;

 text-align: center;

}



/* Number text (1/3 etc) */

.numbertext {

 color: #030303;

 font-size: 12px;

 padding: 8px 12px;

 position: absolute;

 top: 0;

}



/* The dots/bullets/indicators */

.thumbnail-item {

 cursor: pointer;

 height: 50px;

 width: 100px;

 margin: 0 2px;

 opacity: 0.5;

 display: inline-block;

 transition: opacity 0.3s ease;

}

.thumbnail-item img {
    border: 2px solid #030303;
}


.active, .thumbnail-item:hover {
 opacity: 1; 
}

 

/* Fading animation */

.fade {

 -webkit-animation-name: fade;

 -webkit-animation-duration: 1.2s;

 animation-name: fade;

 animation-duration: 1.2s;

}



@-webkit-keyframes fade {

 from {opacity: .6}

 to {opacity: 1}

}


@keyframes fade {

 from {opacity: .6}

 to {opacity: 1}

}

@media (max-width: 386px) {
    .thumbnail-item {
        width: 76px;
    }
}