@charset "UTF-8";
/* CSS Document */

* {box-sizing: border-box}

.mySlides {display: none}

img {vertical-align: middle;
object-fit:contain;
  object-position: 50% 50%;
z-index: 0;}

.active {z-index: 1}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;

  max-height: 764px;
    display: block;
  position: relative;
  margin: auto;
  overflow: hidden;
  background-color: black;
}



/* Caption text */
.text {
  color: hsla(0,0%,100%,1.0);
  font-size: 3em;
  font-weight: 200;
  text-shadow: -1px -1px 3px hsla(0,0%,19%,0.45),-1px 1px 3px hsla(0,0%,19%,0.45), 1px -1px 3px hsla(0,0%,19%,0.45), 1px 1px 3px hsla(0,0%,19%,0.45);
  padding: 45% 10% 0;
  position: absolute;
  bottom: 0%;
  width: 100%;
  text-align: center;
  animation-name: slide;
  animation-duration: 7.5s;

}


/* upper left text */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* dark text*/
.dark {
  color: hsla(0,0%,30%,1.0);
  text-shadow: -1px -1px 3px hsla(0,0%,100%,0.45),-1px 1px 3px hsla(0,0%,100%,0.45), 1px -1px 3px hsla(0,0%,100%,0.45), 1px 1px 3px hsla(0,0%,100%,0.45);


}


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

@-webkit-keyframes fade {
  0% {opacity: 0}
  15% {opacity: 1}
  95% {opacity: 1}
  100% {opacity: 0}
}

@keyframes fade {
  0% {opacity: 0} 
  15% {opacity: 1}
  95% {opacity: 1}
  100% {opacity: 0}
}

@keyframes slide {
  0% {bottom:0%;} 
  15% {bottom:6%;}
  100% {bottom:6%;}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 666px) {
  .numbertext{font-size: .75em}
  .text {font-size: 2em}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .numbertext{font-size: .67em}
  .text {font-size: 1em}
}