* {box-sizing: border-box;}

body {font-family: Calibri, Verdana, sans-serif; background-color: #fff; overflow: hidden;}

.mySlides {display: none;}

.slideshow-container { /* Kuvashow n säiliön koko verrattuna ikkunan kokoon */
  max-width: 100vw; max-height: 94.8vh; position: relative; margin: -7px auto; }

.numbertext { /* Numerointi ylhäällä (1/3 etc), ei välttämätön display:none; */
font-size: .9em; margin: 6px auto auto 6px; padding: 1px 1px; position: absolute;}

.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 {max-width: 100vw; max-height: 94.5vh; }
video { max-height: 98vh; }

.text {background: #fff; color: #000; font-size:1.1em; padding: 1px; position: absolute; bottom: -1.7em; text-align: center; width: auto; left: 0%; right:0%; }

.fade { /* Häivytysanimaation kesto */
  animation-name: fade; animation-duration: 1.6s;}

@keyframes fade {from {opacity: .02} 
  to {opacity: 1} }
  
button { cursor: pointer; filter:drop-shadow(3px 3px 4px gray); }


/* PIENEMMÄT 659px NÄYTÖT, KÄNNYT, PIENEMPI TEXTIKOKO */

@media screen and (max-width: 959px), 
screen and (max-height: 650px) {
body {background-color: #000; font-size: .9em !important;}
.slideshow-container { /* Kuvashow n säiliön koko verrattuna ikkunan kokoon */
  max-width: 100vw; max-height: 92.8vh; position: relative; margin: -7px auto auto -7px; }
img, .img, video { filter: none;}

.numbertext { /* Numerointi ylhäällä (1/32 etc), ei välttämätön*/
  color: aqua;
  font-size: .8em;
  margin: 6px auto auto 6px;
  padding: 1px 1px;
  position: absolute;}

.text {background: transparent; color: #fff; font-size:1em; padding: 1px; position: absolute; bottom: -2.6em; text-align: center; width: 100%; left: 0%; right:0%; }

button { cursor: pointer; filter:none;}
}