.mySlides2 {display: none}
img {vertical-align: middle;}
  
/* Slideshow container */
.slideshow-container2 {
  max-width: 1000px;
  position: relative;
  margin: auto;
  border-style: solid;	/* draw a border around the image */
  border-width: 1px;
}

/* Next & previous buttons */
.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;			/* vertical location of the buttons */
  width: auto;
  padding: 7px;		/* size of the buttons */
  margin-top: -22px; 
  color: white; 
  font-weight: bold;
  font-size: 22px;  
  transition: 0.6s ease;
  border-radius: 12px 12px 12px 12px;  	/* rounded looking arrow boxes */
  user-select: none;
  background-color: rgba(0,0,0,0.4);   /* color and how transparent the button looks */
}

/* Position the "next button" to the right */
.next2 {
  right: 0;
}

/* Caption text */
.text2 {
  color: red;  
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext2 {
  color: black;
  font-size: 15px;
  font-weight: bold;  
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

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

.active2, .dot2:hover2 {
  background-color: #717171;
}

/* On smaller screens, decrease text size. html school says tiny 10px, not so tiny 12px, so this appears good */
@media only screen and (max-width: 300px) {
  .prev2, .next2, .text2 {font-size: 11px}
}