@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Calligraffitti&display=swap');

img.galleria { background-color: #ffffff; padding: 6px; transform: scale(1); transition-duration: 0.3s; }
img.galleria:hover { transform: scale(0.9); transition-duration: 0.3s; }

::-moz-selection { color: #ffffff; background: #DD9C66; }
::selection { color: #ffffff; background: #DD9C66; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-image: url(tausta.jpg); background-repeat: repeat; }
::-webkit-scrollbar-thumb { background: #895234; }

html { height: 100%; }
body { display: block; margin: 0; padding: 0; width: 100%; height: 100%; background-image: url(tausta.jpg); background-repeat: repeat; }

div.nav { display: inline-block; position: fixed; bottom: 0; background-image: url(paa.png); background-position: center center; background-repeat: no-repeat;
background-size: cover; overflow: hidden; width: 345px; padding: 26px 0px 180px 255px; margin: 0; font-family: calligraffitti; font-size: 24px; }

div.sivu { display: block; position: fixed; bottom: 0; background-color: transparent; overflow: hidden; width: 600px; height: 500px; padding: 0; margin: 0; z-index: 10; }

div.header { position: relative; display: block; background: url(banneri.jpg) fixed; background-position: center center; background-size: cover; background-repeat: no-repeat;
width: 100%; padding: 0; margin: 0; overflow: hidden; float: left; border-bottom: 2px solid #895234; box-shadow: 0px 0px 3px #000000; z-index: 8; }

div.container { position: relative; display: block; float: right; background-color: #f5f3f0; width: 90%; max-width: 1200px; padding: 2% 5%; margin: 0; overflow: hidden;
box-shadow: 0px 0px 3px #000000; }

div.puoli {
display: inline-block;
float: left;
width: 50%;
margin: 0px 0px 50px 0px;
padding: 0px;
flex-wrap: wrap;
vertical-align: top;
}

div.nelja {
display: inline-block;
float: left;
width: 25%;
margin: 0px 0px 25px 0px;
padding: 0px;
flex-wrap: wrap;
vertical-align: top;
}

div.suku {
display: inline-block;
background-color: transparent;
width: 100%;
margin: 0;
padding: 15px 0px;
}

div.kisa { display: inline-block; background-color: transparent; width: 100%; margin: 0; padding: 0; }

button.suku {
display: inline-block;
background-color: transparent;
border: none;
font-family: open sans;
font-size: 13px;
color: #C07A40;
text-decoration: none;
margin: 0;
padding: 0;
}

button.suku:hover {
color: #EFD55B;
text-decoration: underline;
}

button.kisa { display: inline-block; border: none; background-color: transparent; font-family: open sans; font-size: 13px; color: #C07A40; text-decoration: none; margin: 0; }
button.kisa:hover { color: #EFD55B; text-decoration: underline; }

button.nav, button.nav:hover {
display: inline-block;
background-color: transparent;
font-size: 36px;
font-weight: 800;
font-family: open sans;
color: #895234;
padding: 0px 15px;
margin: 0px 25px;
border: 3px solid #895234;
border-radius: 50%;
}

tr.color { background-color: transparent; transition: 0.2s; }
tr.color:hover { background-color: #f5e8df; transition: 0.2s; }

b, strong {
font-weight: normal;
color: #63262B;
text-shadow: 0px 0px 1px #63262B;
}

m, meriitit {
font-size: 10px;
font-family: open sans;
}

a:link, a:visited {
color: #C07A40;
text-decoration: none;
}

a:hover {
color: #EFD55B;
text-decoration: none;
}

h1 {
font-size: 58px;
font-family: calligraffitti;
font-weight: normal;
color: #ffffff;
padding: 30px 0px 25px 0px;
margin: 0px;
text-align: center;
text-shadow: 0px 0px 3px #000000;
line-height: normal;
}

h2 {
font-size: 26px;
font-family: calligraffitti;
font-weight: normal;
color: #000000;
padding: 15px;
margin: 0px;
text-align: center;
line-height: normal;
}

h3 {
font-size: 16px;
font-family: open sans;
font-weight: normal;
color: #000000;
padding: 25px 0px 10px 15px;
margin: 0px;
text-align: left;
line-height: normal;
}

h4 {
font-size: 12px;
font-family: bellefair;
font-weight: 300;
color: #aaaaaa;
padding: 50px 0px 10px 0px;
margin: 0px;
text-align: center;
line-height: normal;
text-transform: uppercase;
}

p {
color: #000000;
font-family: open sans;
font-size: 13px;
text-align: justify;
line-height: 1.8;
}

/* Style the tab */
.tab {
overflow: hidden;
text-align: left;
padding: 10px 5px;
}

/* Style the buttons that are used to open the tab content */
button.tablinks {
float: left;
border: none;
outline: none;
padding: 5px;
font-family: open sans;
font-size: 14px;
color: #C07A40;
text-transform: uppercase;
background-color: transparent;
}

/* Change background color of buttons on hover */
button.tablinks:hover {
color: #EFD55B;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 15px 0px;
border-top: none;
}

button.historia {
border: none;
outline: none;
background-color: transparent;
font-family: open sans;
font-size: 13px;
color: #63262B;
padding: 0;
margin: 0;
}

button.historia:hover {
color: #801922;
}