/* Vuotila.net - Tein itse ja säästin :D. */
/* Tsekkaa scrollbar-hommelit (rivi 22). Ne oli aikas jees ja itselle uutta, että niitä voi käpälöidä. Ei tosin Edge tue vielä, mutta se onkin sellanen selain. */

html,body{ padding:0; margin:0rem; box-sizing: border-box; }
html, body, *{ font-family:'Open Sans', Arial, sans-serif; line-height:1.25; text-align:center; color:#000; }
/*html{ scroll-behavior: smooth; }*/
body{ font-family: 'Open Sans', sans-serif;	background-color:#000000; overflow-y: hidden; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }
ul{ list-style:none; padding:0; }
li,p{ display:block; margin: 0 auto 1rem auto;  }
ul.images{ width: 100%; height: auto; background-color: #000; overflow: visible; white-space:nowrap; margin:0; }
ul.images li{ display:inline-block; /*max-height: 667px;*/ padding:0; margin: 0 auto; background-image: url("/www/loader.gif"); background-position: center; background-repeat: no-repeat; background-color:transparent; }
/*ul.images li{ height: 100vh; padding:0; margin: 0 auto; }*/
ul.images li img{ cursor:default; object-fit: contain; height: calc( 100vh - 100px); /*height:667px;*/ }
img{ position:relative; z-index:500; display:block; width:auto; height: auto; margin: 0 auto; opacity:1; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; }
hr{ margin: 2rem auto; }
img[data-src] { width: 100vw; height: 100px; max-height: 500px; background-color:transparent; opacity:0; }
a i{ color:inherit; }

.transition-opacity-250{ -webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -ms-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; }
.transition-all-250{ -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; }

.disable-select { user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ }

/* hide scrollbar */
/*body::-webkit-scrollbar { width: 10px !important }*/
/*body { overflow: -moz-scrollbars-none; -ms-overflow-style: none; }*/
/*
::-webkit-scrollbar{ width: 12px;  /* for vertical scrollbars */ height: 12px; /* for horizontal scrollbars * / }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }
*/

div.container-main{ width:90vw; margin: 0 auto; } 

a.container-logo{ position:fixed; left:2%; top:2%; z-index: 9999; display: inline-block; width:75px; height:75px; background-color:rgba(0,0,0,0.2); border-radius: 50%; padding: 0.5rem; } 
a.container-logo .logo{ margin: 3px auto auto auto; }

.container-btn-menu{ position:fixed; right:2%; bottom: calc( 2% + 17px); z-index: 9999; display: inline-block; width:75px; height:75px; background-color:rgba(0,0,0,0.2); border-radius: 50%; padding: 0.5rem; cursor: pointer; }
.container-btn-menu i{ color:#fff; font-size: 3rem; margin-top:15px; cursor: pointer; }
.container-btn-menu.small{ width:42px; height:42px; }
.container-btn-menu.small i{ font-size: 2rem; margin-top:5px; }
body.menu-open .container-btn-menu{ opacity:0; }

body.menu-open ul.navi{ opacity:1; z-index:9999; }
body.menu-open ul.navi li a{ display: block; }
ul.navi{ display: table; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; opacity:0; background-color: rgba(0,0,0,0.8); padding: 0; margin: 0; overflow:hidden; z-index:-1;  }
ul.navi li{ display: table-cell; vertical-align: middle; position: relative; top: -50px; }
ul.navi li a{ display: none; line-height: 1; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; }
ul.navi li a,
ul.navi li a:active,
ul.navi li a:hover,
ul.navi li a:visited{ font-size: 10vw; padding: 0.5em; color:#ffffff; text-decoration:none; } 
ul.navi li a:hover{ transform: scale(1.3); }
/*ul.navi li a:hover::before{ opacity:1; }
ul.navi li a:hover::after{ opacity:1; }*/

/*
div.header ul{ float:right; text-align: right; padding: 0 0 0 1rem; margin: 0; }
div.header ul li{ width:auto; padding:0; margin: 0 0 0 1rem; } 

div.header ul li a{ font-size: 1rem; line-height:27px; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; }
div.header ul li a:after{ display:inline-block; padding:0; margin: 0 0 0 0.25rem; content:"»" }
*/

figure{ position: relative; /*top: 50%; transform: translateY(-50%);*/ z-index:1000; height: auto; margin:0; overflow:hidden; }
/*figcaption{ position:relative; display:inline-block; z-index:1000; font-size:0.8rem; font-weight:normal; background-color: rgba(255,255,255,0.25); padding:0.5rem 1rem; margin:0.5rem auto 0 auto; border-radius:15px; } */
figcaption{ position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, -100%); z-index:1000; font-size:0.8rem; font-weight:normal; background-color: rgba(255,255,255,0.7); padding:0.35rem 0.75rem; margin:0.5rem auto 0 auto; border-radius:15px; } 

a, a:visited, a:hover, a:focus, a:active{ font-weight:bold; color:#7a0a00; text-decoration: none; }
a:hover{ color:#f00; }

ul.buttons small{ display:block; color: #aaa; margin-top: 0.5em; }

@media all and (min-width: 400px){

	ul.navi li a,
	ul.navi li a:active,
	ul.navi li a:hover,
	ul.navi li a:visited{ font-size: 2rem; padding: 0.5em; }

}

@media all and (min-width: 992px){
	ul.images li{ min-width: 100%; }

	.container-btn-menu{ bottom:auto; top: 2%; }

	ul.navi li a,
	ul.navi li a:active,
	ul.navi li a:hover,
	ul.navi li a:visited{ font-size: 3rem; } 
	/*ul.images li{ margin: 25vh auto; }*/

	figure{ position: relative; /*top: 50%; transform: translateY(-50%);*/ z-index:1000; height: calc(100vh - 17px); margin:0; overflow:hidden; }
	ul.images li img{ height: calc( 100vh - 17px ); }
}

@media all and (min-width: 992px) and (orientation: portrait) {
	
}