.PAG-SEC-Proyecto{
padding-top: 50px;
}

.Mi-Container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFE500;
}


.slideshow-container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 500px;

  position: relative;
  margin: auto;
  background-color: #FFE500;
}


.mySlides {
  display: none;

}

.Carousel_IMG_Vertical {
  height: 450px;
  width: auto;
}

.Carousel_IMG_Horizontal {
  width: 350px;
  height: auto;
}


.Carousel_IMG_Cuadrada{
  width:300px;
  height:auto;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;

  display: flex;
  align-items: center;

  width: 100px;
  height: 20%;

  color: #222222;
  background-color: rgba(0, 255, 255, 0);

  font-family: 'Work Sans', sans-serif, Arial;
  font-weight: 300;
  font-size: 15px;
  transition: 0.6s ease;

  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 30px;
  justify-content: right;
}

.prev {
  left: 30px;
  justify-content: left;
}

/* On hover, add a black background color with a little bit see-through */



/* The dots/bullets/indicators */

.active {
  background-color: #717171;
}

@media (min-width: 350px) {

  .next,
  .prev {
    width: 100px;
  }

  .next {
    right: 40px;
    justify-content: right;
  }

  .prev {
    left: 40px;
    justify-content: left;
  }


}

@media (min-width: 576px) {

  

  .slideshow-container {
    width: 576px;
    height: 500px;
    background-color: #FFE500;
  }

  .next {
    right: 25px;
    justify-content: right;
  }

  .prev {
    left: 25px;
    justify-content: left;
  }

  .prev,
  .next {
    width: 200px;
    color: #222222;
  }

  .Carousel_IMG_Vertical {
    height: 450px;
    width: auto;
  }

  .Carousel_IMG_Horizontal {
    width: 500px;
    height: auto;
  }

  .Carousel_IMG_Cuadrada{
    width:400px;
    height:auto;
  }
  

}

@media (min-width: 768px) {

  

  .slideshow-container {
    width: 768px;
    height: 600px;
  }


  .Carousel_IMG_Vertical {
    height: 550px;
    width: auto;
  }

  .Carousel_IMG_Horizontal {
    width: 650px;
    height: auto;
  }

  .Carousel_IMG_Cuadrada{
    width:500px;
    height:auto;
  }

  .next {
    right: 25px;
    justify-content: right;
  }

  .prev {
    left: 25px;
    justify-content: left;
  }


}


@media (min-width: 1200px) {

  .PAG-SEC-Proyecto{
    padding-top: 65px;
    }

  .slideshow-container {
    width: 1200px;
    height: 800px;
  }

  .Carousel_IMG_Vertical {
    height: 700px;
    width: auto;
  }

  .Carousel_IMG_Horizontal {
    width: 800px;
    
    height: auto;
  }

  .Carousel_IMG_Cuadrada{
    width:650px;
    height:auto;
  }

  .prev,
  .next {
    width: 500px;
    color: #222222;
   
  }

  .next {
    right: 50px;
    justify-content: right;
  }

  .prev {
    left: 50px;
    justify-content: left;
  }


}