.mySlides {display: none;

      position:relative;
      top:auto;
      bottom:0;
      left:0;
      right:0;
      /*background:#e0e0e0;*/
      }

/* Slideshow container */
.slideshow-container {
  max-width: 70%;
  position: relative;
  margin: auto;
  /*background:#ffffff;*/
  height:auto;
  overflow: hidden; /* Important! Flex breaks without this! */
  border:1px solid transparent;
  top:1.5em;
  padding:0 10px 0 10px;
}

.slideshow-container img { 
	position: relative;
 	 border-radius:1rem;
	 border:1px solid #303030;
	 box-shadow: -6px 6px 8px #506886;
	 box-shadow: -6px 6px 8px #808080;
	 vertical-align:middle;
	 width:100%;
         }

/* Caption text */
.text {
  color: #050f11;
  background:#f0f0f0;
  font-size: 1.4rem;
  padding: 8px 12px;
  position: relative;
  display:block;
  margin-top:16px;
  margin-bottom:6px;
  width: 100%;
  text-align: center;
  bottom:0;
  border:1px solid grey;
  border-radius:1rem;
	 box-shadow: -6px 6px 8px #506886;
	 box-shadow: -6px 6px 8px #808080;
}
.text > .subtext {
   font-size:1rem;
   line-height:1.2rem;

}
/* Number text (1/3 etc) */
.numbertext {
  color: white;
  font-size: 1rem;
  /*padding: 12px 12px;*/
  position: relative;
  bottom: 4.5rem;
  left: 48%;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 2rem 4px;
  background-color: #f0f060;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
	 box-shadow: -4px 4px 6px #506886;
	 box-shadow: -4px 4px 6px #808080;
}

.active {
   position:relative;
   left:-2px;
   top:2px;
  background-color: #c0c0c0;
	 box-shadow: -2px 2px 2px #506886;
	 box-shadow: -2px 2px 8px #808080;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.25s;
}

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

/* On smaller screens, decrease text size */
@media (orientation:portrait) {
   .slideshow-container {
      max-width: 100%;
      border:1px solid transparent;
      }
  /*.text {font-size: 14px;}*/
}

