.slideSwipe {width:100%; position: relative; margin: auto; user-select: none;}
.mySlides{line-height: 0;}
.mySlides img{width:100%; border-radius:30px;}
.mySlides img:hover{opacity:1;}
.slidenav{display:flex; text-align:center; justify-content:center; gap:10px;}
.dothold {user-select: none;  display:inline-flex; align-items: center; justify-content: center; gap:10px;}
.dotbut{ display:inline-block; background-color:#98c161; position: relative; width: 28px; height: 28px; z-index: 2; vertical-align:top; box-sizing:border-box; cursor: pointer; border-radius:120px; border:0; box-shadow: rgba(0,0,0,0.3) 0 10px 10px -10px; color:#558300; font-weight:bold; font-size:14px; order: 0; transition:color .2s ease-out, background .2s ease-in; transition: width 0.3s ease, height 0.3s ease;color:#fff;aspect-ratio: 1;}
.dotbut:hover{background-color:#f90;}
.active{background-color:#579604;width: 38px; height: 38px;}
.prev, .next {cursor: pointer;  width: auto; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; text-decoration:none;display:inline-block;}
.prev svg, .next svg {color: #69a618; transition: color 0.2s ease;}
.prev:hover svg, .next:hover svg{color: #f90;}
.prev{transform: scaleX(-1);}
.fade {animation-name: fade; animation-duration: 2s;}

@media only screen and (max-width: 515px){
.dotbut{width: 6vw;height: 6vw; gap:1%;}
.active{width: 8vw;height: 8vw;}
}

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