* {box-sizing: border-box;}

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: 100%;
  max-height: auto;
  position: relative;
  margin: -6px auto;
}

.numbertext { /* Numerointi ylhäällä (1/3 etc), ei välttämätön */
  /* display:none; */
  z-index: 4000 !important; /* ISO z-index näyttää textin kuvien päällä ! */
  font-size: .9em;
  margin: 8px auto auto 4px;
  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 {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-height: 96vh; max-width: 90vw;}

.text_yl {position: absolute; width: 99%; margin: 0 auto; text-align: center; left: .5%; right:.5%; top: 0%; font-size: 1.2em; padding: .2rem 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 650px NÄYTÖT, KÄNNYT, PIENEMPI TEXTIKOKO */

@media screen and (max-width: 650px) {
body {background-color: #000;}
.img {max-height: 98vh; max-width: 99vw; filter: none;}
 
.numbertext { /* Numerointi ylhäällä (1/3 etc), ei välttämätön*/
  color: #fff;
  font-size: .8em;
  margin: 8px auto auto 5px;
  padding: 1px 1px;
  position: absolute;} 

.text_yl { position: relative; margin: 0 auto; text-align: center; width: 98%; left:0%; right: 2%; top: 0%; font-size: 1.2em; background: transparent; }
}
button { cursor: pointer; }