* {
    box-sizing: border-box;
}

.mySlides {
    display: block;
    min-width: 100%;
    max-height: 100%;
}

img {
    vertical-align: middle;
    object-fit: cover;
    width: 100vw;
}

/* Slideshow container */
.slideshow-container {
width: 100vw;
position: relative;
margin: auto;
overflow: hidden;
margin-top: -30px;
}

/* Caption text */
.text {
color: rgb(0, 0, 0);
font-size: 30px;
font-style: bold;
padding: 8px 12px;
position: absolute;

margin-top: -30%;

height: 20%;

text-align: center;
background-color: rgba(255, 255, 255, 0.868);
/*
margin-bottom: 80px;
*/
width: max-content;

margin-left: 10%;
border-left-style: solid;
border-width: 15px;
border-color: rgba(153, 51, 51, 1);
border-radius: 10px;

display: flex;
    align-items: center;
    justify-content: center;
}


/* Number text (1/3 etc) */
.numbertext {
color: rgba(153, 51, 51, 1);
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
width: auto;
display: none;
}

/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: none;
/*transition: background-color 0.6s ease;*/
}

.active {
background-color: #717171;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 850px) {
.text {font-size: 20px}
.slideshow-container {margin-top: 0px;}}

.slide-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    min-height: 200px;
    max-height: 60vh;
    
}
.slide{
    min-height:190px;
}