div {
box-sizing:border-box;
}
.slideshow-container_1 {
width: 100%;position: relative;
}
.mySlides_1 {
display: none;width: 100%;text-align: center;
}
.prev_1, .next_1 {
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;
}
.next_1 {
right: 0;border-radius: 3px 0 0 3px;
}
.prev_1:hover, .next_1:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;width: 100%;text-align: center;
}
.numbertext {
color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;
}
.dot_1 {
cursor: pointer;height: 30px;width: 40px;margin: 0 5px;background-color: #bbb;border-radius: 10%;
display: inline-block;transition: 1s ease;
}
.dot_1:active, .dot_1:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;-webkit-animation-duration: 2.5s;-moz-animation-name: fade;
-moz-animation-duration: 2.5s;animation-name: fade;animation-duration: 2.5s;
}
@-webkit-keyframes fade {
from {opacity: 0.1} to {opacity: 1}
}
@-moz-keyframes fade {
from {opacity: 0.1} to {opacity: 1}
}
@keyframes fade {
from {opacity: 0.1} to {opacity: 1}
}