/* Slideshow container */
.slideshow-container {
  width: 376px;
  height: 451px;
  position: relative;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #2ba0b9;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #002244;
  color: white;
}

.sectionSliders {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.mySlides1{
  width: 376px;
  height: 451px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.mySlides2{
  width: 376px;
  height: 451px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.mySlides3{
  width: 376px;
  height: 451px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.mySlides4{
  width: 376px;
  height: 451px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.mySlides5{
  width: 376px;
  height: 451px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.mySlides6{
  width: 376px;
  height: 451px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
/* #foto1 {
  background: url("../images/foto1.webp");
}
#foto2 {
  background: url("../images/foto2.webp");
}
#foto3 {
  background: url("../images/foto3.webp");
}
#foto4 {
  background: url("../images/foto4.webp");
} */
/* #foto5 {
  background: url("../images/foto5.jpg");
}
#foto6 {
  background: url("../images/foto6.jpg");
}
#foto7 {
  background: url("../images/foto7.jpg");
}
#foto8 {
  background: url("../images/foto8.jpg");
} */
#foto9 {
  background: url("../images/foto9.webp");
}
#foto10 {
  background: url("../images/foto10.webp");
}
#foto11 {
  background: url("../images/foto11.webp");
}
#foto12 {
  background: url("../images/foto12.webp");
}
#foto13 {
  background: url("../images/foto13.webp");
}
#foto14 {
  background: url("../images/foto14.webp");
}
#foto15 {
  background: url("../images/foto15.webp");
}
#foto16 {
  background: url("../images/foto16.webp");
}

@media (max-width: 798px) {
  .slideshow-container {
    width: 309px;
    height: 370px;
  }
  .mySlides1{
    width: 309px;
    height: 370px;
  }
  .mySlides2{
    width: 309px;
    height: 370px;
  }
  .mySlides3{
    width: 309px;
    height: 370px;
  }
  .mySlides4{
    width: 309px;
    height: 370px;
  }
  .mySlides5{
    width: 309px;
    height: 370px;
  }
  .mySlides6{
    width: 309px;
    height: 370px;
  }
}

@media (max-width: 672px){
  .slideshow-container {
    width: 277px;
    height: 332px;
  }
  .mySlides1{
    width: 277px;
    height: 332px;
  }
  .mySlides2{
    width: 277px;
    height: 332px;
  }
  .mySlides3{
    width: 277px;
    height: 332px;
  }
  .mySlides4{
    width: 277px;
    height: 332px;
  }
  .mySlides5{
    width: 277px;
    height: 332px;
  }
  .mySlides6{
    width: 277px;
    height: 332px;
  }
}

@media (max-width: 575px){
  .sectionSliders{
    flex-direction: column;
    align-items: center;
    padding-bottom: 0 !important;
  }
  .slideshow-container {
    width: 500px;
    height: 600px;
    margin: 0 0 24px 0 !important;
  }
  .mySlides1{
    width: 500px;
    height: 600px;
  }
  .mySlides2{
    width: 500px;
    height: 600px;
  }
  .mySlides3{
    width: 500px;
    height: 600px;
  }
  .mySlides4{
    width: 500px;
    height: 600px;
  }
  .mySlides5{
    width: 500px;
    height: 600px;
  }
  .mySlides6{
    width: 500px;
    height: 600px;
  }
}

@media (max-width: 499px){
  .sectionSliders{
    flex-direction: column;
    align-items: center;
    padding-bottom: 0 !important;
  }
  .slideshow-container {
    width: 418px;
    height: 501px;
    margin: 0 0 24px 0 !important;
  }
  .mySlides1{
    width: 418px;
    height: 501px;
  }
  .mySlides2{
    width: 418px;
    height: 501px;
  }
  .mySlides3{
    width: 418px;
    height: 501px;
  }
  .mySlides4{
    width: 418px;
    height: 501px;
  }
  .mySlides5{
    width: 418px;
    height: 501px;
  }
  .mySlides6{
    width: 418px;
    height: 501px;
  }
}

@media (max-width: 419px){
  .sectionSliders{
    flex-direction: column;
    align-items: center;
    padding-bottom: 0 !important;
  }
  .slideshow-container {
    width: 344px;
    height: 412px;
    margin: 0 0 24px 0 !important;
  }
  .mySlides1{
    width: 344px;
    height: 412px;
  }
  .mySlides2{
    width: 344px;
    height: 412px;
  }
  .mySlides3{
    width: 344px;
    height: 412px;
  }
  .mySlides4{
    width: 344px;
    height: 412px;
  }
  .mySlides5{
    width: 344px;
    height: 412px;
  }
  .mySlides6{
    width: 344px;
    height: 412px;
  }
}

@media (max-width: 347px){
  .sectionSliders{
    flex-direction: column;
    align-items: center;
    padding-bottom: 0 !important;
  }
  .slideshow-container {
    width: 257px;
    height: 308px;
    margin: 0 0 24px 0 !important;
  }
  .mySlides1{
    width: 257px;
    height: 308px;
  }
  .mySlides2{
    width: 257px;
    height: 308px;
  }
  .mySlides3{
    width: 257px;
    height: 308px;
  }
  .mySlides4{
    width: 257px;
    height: 308px;
  }
  .mySlides5{
    width: 257px;
    height: 308px;
  }
  .mySlides6{
    width: 257px;
    height: 308px;
  }
}