* {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: auto;
  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: 2000 !important;
  color: #000;
  font-size: .9em;
  margin: 6px auto auto 6px;
  padding: 1px 1px;
  position: absolute; }

.numbertext2 { z-index: 2001 !important;
  color: #fff;
  font-size: 1.1em;
  margin: 6px auto auto 6px;
  padding: 1px 1px;
  position: absolute; }
  
.numbertext_vid { z-index: 200 !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; }

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

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: 99.4vw; max-height: 99.9vh; }

.text { color: #000; font-size:1.1em; position: absolute; bottom: -2.6em; text-align: center; width: 100%; left: 0%; right:0%;}
.kartta { color: #000; font-size: 1.1em; position: absolute; bottom: -1.3em; text-align: center; width: 100%; left: 0%; right:0%;}

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

a { color:#ff8000; text-decoration:none;}
a:hover { color:#00ff82; text-decoration:none;}
a:visited {color:#d5acff; text-decoration:none;}

#text_vid, #text_vid2 { margin: 0 auto; text-align: center; position: absolute; bottom: .1em; font-size: 1em; font-weight: 400; color: #fff; max-width: 100%; left: 0%; right: 0%; }


							/* BURGER */
#burger {display: none;}
main {height: 1.3vh; margin-top: 0vh; }
input + label {position: fixed; top:50px; right: 60px; 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, button { 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); }

			/* LINKIT YLHÄÄLTÄ 60px LEVEYS 25% */
input ~ nav { background: transparent; position: fixed; top:60px; right:0px; width: 25%; height: 30px; z-index: 3; transition: 0.5s; transition-delay: 0.5s; overflow: hidden; }
			/* LINKIT OIKEALTA 0.6% */
input ~ nav { text-align: right; position: absolute; right: .6%; }
input ~ nav li {list-style-type: none; opacity: 0; transition: 0.5s; transition-delay: 0s; }
input ~ nav a {font-size:1em; 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; }

/* PIENEMMÄT 959px NÄYTÖT, KÄNNYT */
@media screen and (max-width: 959px), 
screen and (max-height: 650px) {
body {background-color: #000; overflow: visible;}

				/* LINKKIEN LEVEYS 65% */
input ~ nav {font-size:0.9em; background: transparent; position: fixed; top:40px; right:0px; width: 65%; height: 30px; z-index: 3; transition: 0.5s; transition-delay: 0.5s; overflow: hidden; }

img, .img, video { max-width: 100vw; height: auto; filter: none;}

.text {color: #fff; font-size:0.9em; padding: 1px; position: absolute; bottom: -4.8em; text-align: center; width: 100%; left: 0%; right:0%; }
.kartta { color: #fff; font-size: 1em; position: absolute; bottom: 4.5em; text-align: center; width: 100%; left: 0%; right:0%;}

#text_vid, #text_vid2 {font-size: .9em; padding: 8px 12px; width: 100%; left: 0%; right:0%; position: absolute; bottom: -2.5em; color:#fff; filter: none;}

.numbertext, .numbertext_vid { /* Numerointi ylhäällä (1/3 etc), ei välttämätön */
  font-size:0.8em; color: aqua;}
}