* {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: -8px auto auto -8px; }

.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: 100%; left: 0%; right:0%; 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; }

#burger {display: none;}
main {height: 1.3vh; margin-top: 0vh; }
input + label {position: fixed; top:4px; right: 20px; height: 19px; width: 23px; z-index: 5;}
/* Viivat, ruksi, kohta, korkeus, väri */
span { position: absolute; width: 100%; height: 3px; top: 50%; margin-top: 0px; left: 0; display: block; background: #ff8000; transition: 0.5s; }
span:first-child { top: 3px; } /* Viivat */
span:last-child { top: 16px; } /* Viivat */

label:hover { cursor: pointer; }

input:checked + label span { opacity: 0; top: 50%; } /* Raksi */
input:checked + label span:first-child { opacity: 1; transform: rotate(405deg); }
input:checked + label span:last-child { opacity: 1; transform: rotate(-405deg); }

			/* LINKKIEN LEVEYS 25% */
input ~ nav { background: transparent; position: fixed; top:0; right:0; width: 25%; height: 20px; z-index: 3; transition: 0.5s; transition-delay: 0.5s; overflow: hidden; }
			/* LINKIT OIKEALTA 1% */
input ~ nav { text-align: right; position: absolute; right: 1%; }
input ~ nav li {list-style-type: none; opacity: 0; transition: 0.5s; transition-delay: 0s; }
input ~ nav a { text-decoration: none; text-transform: uppercase; color: #ff8000; font-weight: 700; font-family: calibri; display: block; padding: 5px; } 
			/* LINKIT KORKEUS, NÄKYVYYS, AIKA */
input:checked ~ nav {height: 100%; transition-delay: 0s; }
input:checked ~ nav li { opacity: 1; transition-delay: 0.5s; }

button {cursor: pointer;}
 
/* Pienemmät näytöt, kännyt, pienempi textikoko */

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

.text {color: #fff; font-size: .8em; text-align: center; width: 100%; left: 0%; right:0%; position: absolute; bottom: -4em; }

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