* {box-sizing: border-box;}

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

.mySlides {display: none;}

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

.numbertext { z-index: 2; font-size: .9em; color: #fff; margin: 0px auto auto 0px; position: absolute; background: rgba(0, 0, 0, 0.348); backdrop-filter: blur(10px); padding: .52rem; border-radius: 0.4rem; }

img, iframe, #iframe {display: block; margin-left: auto; margin-right: auto; border-radius: .5em; filter:drop-shadow(3px 3px 4px gray); }

img {max-width:99.6vw; max-height:99vh;}

iframe, #iframe {z-index: 1;}

.text, .text_h, .text_vap, .text_w, .text_r15, .text_as, .text_kaup, .text_lr, .kartta {background: #fff; color: #000; font-size:1.1em; padding: 1px; position: absolute; bottom: -1.7em; text-align: center; width: auto; left: 0%; right:0%; }


#text_yl { position: absolute; width: 30%; margin: 0 auto; text-align: center; left: 20%; right:50%; top: 0.1%; font-size: 1.1em; padding: .12rem 1rem;  border: none; border-radius: 0.6rem; }

.kartta {width: 100%; }

video {max-width: 90vw; max-height:90vh; margin-left: auto; margin-right: auto; text-align:center; display: block; position: relative; border-radius: .4em; object-fit: fill; filter:drop-shadow(3px 3px 4px gray); }
/* käytä "cover" jos tulee ristiriitoja KÄYTETÄÄN NYT MYÖS PIENEMMILLE NÄYTÖILLE*/
/* Video viimeiseksi ja jätä sen .dot pois listasta niin esitys pysähtyy videon kohdalle! */

.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; }

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

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

/* Pienemmät näytöt, kännyt, pienempi textikoko */

@media screen and (max-width: 959px), 
screen and (max-height: 650px) {
body {background-color:#000;}

.numbertext { z-index: 2; font-size: .8em; }

img {filter: none; max-width:100vw; max-height:99vh;}
iframe, #iframe {z-index: 1; filter: none; }

.text, .text_h, .text_vap, .text_w, .text_as, .text_r15, .text_kaup, .text_lr {color:#fff; background: transparent; font-size: .9em; width: 100%; left: 0%; right:0%; bottom: -3.5em; }

.kartta {filter:none; border: none; background: transparent; font-size: .85em; width: 100%; left: 0%; right:0%; margin: 0 auto; text-align: center; position: absolute; bottom: -1.7em; }

#text_yl { position: absolute; top: 0px; width: 75%; margin: 0 auto; text-align: center; left: 10%; right:25%; font-size: .9em; border: none; filter: none; }
}