* {box-sizing: border-box;}

body {font-family: Calibri, Verdana, sans-serif; background-color: #000; overflow: hidden;}

.mySlides {display: none;}

.slideshow-container { /* Kuvashow n säiliön koko verrattuna ikkunan kokoon */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  margin: -7px auto auto -7px; }

.numbertext { /* Numerointi ylhäällä (1/3 etc), ei välttämätön. KOKEILE DISPLAY NONE!? */
  display: none;
  color: #f2f2f2;
  font-size: 0px;
  padding: 0px 0px;
  position: absolute;
  top: 0;
}

.dot { /* Täplät / indikaattorit pienennetty 15px stä -> 0px. Eivät näy! */
  display:none;
  height: 0px;
  width: 0px;
  margin: 0 0px;
  background-color: #bbb;
  border-radius: 0%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {	/* Liittyvät dot teihin. Eivät näy! */
  display:none;
  background-color: #717171; }

img, .img, video {display: block; margin-left: auto; margin-right: auto; border-radius: .4em; -moz-border-radius: .4em; -webkit-border-radius: .4em; filter:drop-shadow(3px 3px 4px gray);}
  
.img, .img, video {max-width: 99.95vw; max-height: 99vh; }

.fade { /* Häivytys animaatio */
  animation-name: fade; animation-duration: 1.6s;}

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

 		/* Isot näytöt texti keskellä alhaalla, ei taustaväriä koska tummat kuvat */
.text {text-align: center; width: 99.8%; left: .1%; right:.1%; position: absolute; bottom: .8em; font-size: 1em; font-weight: 400; color: #fff; }

#red { color: #ff0000; font-size: 150%; }

video { position: absolute; width:70%; left:15%; right:15%; top:.1%; margin: 0 auto; text-align: center; object-fit: fill; filter:drop-shadow(3px 3px 4px gray); border-radius: .5em; }
/* käytä "cover" jos tulee ristiriitoja */
/* Video viimeiseksi ja jätä sen .dot pois listasta niin esitys pysähtyy videon kohdalle! */

 /* Videon valkoinen texti pienilläkin näytöillä */
#txt_vid {text-align: center; width: 99.8%; left: .1%; right:.1%; position: absolute; padding: 3px; top: 20px;  color: #fff; }
 
/* Pienemmät näytöt, kännyt, pienempi textikoko */

@media screen and (max-width: 959px) {
img, .img, video { max-width: 99.95vw; height: auto; filter: none;}

.text {color: #fff; font-size: .9em; text-align: center; width: 99.8%; left: .1%; right:.1%; position: absolute; bottom: -1.3em; }

video { position: absolute; width:90%; left:5%; right:5%; top:0%; margin: 0 auto; text-align: center; object-fit: fill; filter:none; border-radius: .5em; }
}