* {box-sizing: border-box;} /* TÄMÄ TOIMII OIKEIN JA HYVIN. TEKSTIT OVAT HARMAALLA TAUSTALLA 31.3.26 */

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

.mySlides {display: none; width: 100%;}

.slideshow-container { /* Kuvashow n säiliön koko verrattuna ikkunan kokoon */
  max-width: 99.94%;
  max-height: auto;
  position: relative;
  margin: -8px auto auto -8px;
  }  
 /* Numerointi ylhäällä (1/3 etc), ei välttämätön */
.numbertext { z-index: 20000 !important;
  color: #000;
  font-size: 1em;
  margin: 8px auto auto 5px;
  padding: 1px 1px;
  position: absolute; }
  
.numbertext_vid { z-index: 20001 !important;
  color: #fff;
  font-size: 1em;
  margin: 5px auto auto 5px;
  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, 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 {max-width: 100vw; max-height: 100vh; }

video {max-width: 99.8vw; max-height: 99.8vh; }
/* käytä "cover" jos tulee ristiriitoja */
/* Video viimeiseksi ja jätä sen .dot pois listasta niin esitys pysähtyy videon kohdalle! */

.text { /* Kuvatexti alhaalla */
  color: #fff;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;}

#text_vid, #text_vid2 { /* Texti */ margin: 0 auto; text-align: center; position: absolute; top: 0.1em; font-size: 1.1em; font-weight: 400; color: #fff; max-width: 100%; left: 0%; right: 0%; filter: none; padding: .12rem 1rem; }

.fade { /* Häivytys animaation kesto */
  animation-name: fade; animation-duration: 1.7s;
  -webkit-animation-name: fade; -webkit-animation-duration: 1.7s;
  -moz-animation-name: fade; -moz-animation-duration: 1.7s; }

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

@-webkit-keyframes fade {from {opacity: .2}
  to {opacity: 1}}

@-moz-keyframes fade {from {opacity: .2} 
  to {opacity: 1}}
  
button { cursor: pointer; }


/* PIENEMMÄT 959px NÄYTÖT, KÄNNYT, PIENEMPI TEXTIKOKO */

@media screen and (max-width: 959px), 
screen and (max-height: 400px) {
body {background-color: #000;}
img, video { max-width: 100%; height: auto; filter: none;}
.text, #text_vid, .text_kes, .text_vas {font-size: .8em; width: 99.8%; left: .1%; right:.1%; bottom: 0em; color:#fff; filter: none;}

.numbertext, .numbertext_vid { /* Numerointi ylhäällä (1/3 etc), ei välttämätön */
  color: #fff;
  font-size: .9em;
  margin: 8px auto auto 8px;
  padding: 1px 1px;
  position: absolute;}
}