@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

@font-face { 
font-family: 'CopperplateGothicLight'; 
src: url('https://hiirenkolo.net/shelyes/tiedostot/copperplate_gothic_light.eot'); 
src: url('https://hiirenkolo.net/shelyes/tiedostot/copperplate_gothic_light.eot?#iefix') format('embedded-opentype'), 
url('https://hiirenkolo.net/shelyes/tiedostot/copperplate_gothic_light.svg#Copperplate Gothic Light') format('svg'), 
url('https://hiirenkolo.net/shelyes/tiedostot/copperplate_gothic_light.woff') format('woff'), 
url('https://hiirenkolo.net/shelyes/tiedostot/copperplate-gothic-light.ttf') format('truetype'); font-weight: normal; font-style: normal;}

@font-face { 
font-family: 'KGMakesYouStronger'; 
src: url('https://hiirenkolo.net/shelyes/tiedostot/KGMakesYouStronger.eot'); 
src: url('https://hiirenkolo.net/shelyes/tiedostot/KGMakesYouStronger.eot?#iefix') format('embedded-opentype'), 
url('https://hiirenkolo.net/shelyes/tiedostot/KGMakesYouStronger.svg') format('svg'), 
url('https://hiirenkolo.net/shelyes/tiedostot/KGMakesYouStronger.woff') format('woff'), 
url('https://hiirenkolo.net/shelyes/tiedostot/KGMakesYouStronger.ttf') format('truetype'); font-weight: normal; font-style: normal;}



body {
background: url("https://hiirenkolo.net/shelyes/ulkka/puutaustapien.jpg") repeat-x, url("https://hiirenkolo.net/shelyes/ulkka/shelyrypyla.jpg") repeat;
text-align: justify; 
font-family: verdana;
color: #000000;
margin: 0;
font-size: 13px;
}
#fadeshow1 {
    border-left:8px solid #321205;border-right:8px solid #321205; box-shadow: 0px 0px 18px #000;  z-index:-999;
}

.perusnappi {background:#94471b;}
A.perusnappi.isonappi:link,A.perusnappi.isonappi:visited, A.perusnappi.isonappi:active {color:#e3b9a0;}
.perusnappi.active {background:#511b02;}
A.perusnappi.isonappi:hover,  A.perusnappi.isonappi.active {color:#fff;}

.perusnappi.isonappi {
    font-size: .9rem;
    padding: 1em;
    margin: 1em .5em .5em;
    border-radius:10px;

}

.kirjaudu > .perusnappi.isonappi {
    font-size: 1em;
}

.arvonimet {font-family: 'BenchNine', sans-serif; color: #a77165;}

.lapsi.saatiedotus {background:transparent;padding:0;overflow:hidden;position: relative;z-index:10;line-height:0;}
.lapsi.saatiedotus #weatherWidget, .lapsi.saatiedotus iframe, .lapsi.saatiedotus #weatherWidget-io-0, .lapsi.saatiedotus .weatherWidget-io {line-height:0; margin:0;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;border-collapse: separate; overflow:hidden;perspective: 1px;z-index:9;}

.puolikas .lapsi.mobiilivasen {margin:0 0 30px 0;}

.puolikas.neljaantyva .heppa {margin-top:15px;}

tr,td{
font-family: verdana;
text-align: justify;
color: #000000;
margin: 0 auto;
font-size: 12px;
}

.heppatext.rela + .lapsi { margin: 0 0 2em 0;}
.heppatext + .heppa { margin: 0 0 2.4em 0;}

.mittari {
    width:100%;
    height:100%;
    min-height:1em;
    background-color:#ceada6;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    border-radius:1em;
    overflow:hidden;
    flex-direction:row;
    align-items:stretch;
}
.mittarisisalto {
    background-color:#97736b;
    min-height:100%;
}

h1, .puolikas h1, .sisaosa .kokonainen .puolikas h1 {

font-family: Georgia;
font-size: 20px;
color: #3b2219;
line-height:20px;
margin:15px 0 8px 0;
font-weight:normal;
word-spacing: 3px;
text-align:left;

}

.sisaosa h1 {margin-left:15px;}
.yksiosa h2 {margin-left:0;}
h2{

font-family: Georgia;
font-size: 18px;
color: #442319;
margin-left: 25px;
line-height:18px;
font-weight:normal;
word-spacing: 3px;
text-align:left;
}

h3{
color: #502d22; 
font-size: 16px; 
font-family: Georgia; 
line-height:17px;
font-weight:normal;
word-spacing: 3px;
text-align:left;
}

.yksiosa h3 {margin-bottom:0;}
.karttakuvankontti {margin-right:15px;}
.liiska {
color: #502d22; 
font-size: 16px; 
font-family: Georgia; 
line-height:26px;
margin:0 0 0 30px;
font-weight:normal;
word-spacing: 3px;

}

h4{
color: #ffa289; 
font-size: 22px; 
font-family: CopperplateGothicLight; 
line-height:0px;
-webkit-margin-before:29px;
-webkit-margin-after:29px;
margin-top:29px;
margin-bottom:29px;
font-weight:normal;
word-spacing: 3px;
text-align:left;
}

h5{
color: #ffffff; 
z-index:9999999999;
font-size: 42px; 
font-family: KGMakesYouStronger; 
-webkit-margin-before:20px;
-webkit-margin-after:16px;
margin-top:20px;
margin-bottom:16px;
font-weight:normal;
text-align:left;
}

#lightbox .kokonainen .yksiosa h5 {text-align:center;}

b { color: #433129; }
i { color: #614829; font-family: georgia; }
.v { color: #cc9b46; }

A:link,A:visited,A:active{text-decoration:none; color: #ae5919;}
.toggle, a.trigger {text-decoration:none; color: #ae5919;}
A:hover{text-decoration:none; color: #703000; }
.toggle:hover, a.trigger:hover{cursor:pointer;text-decoration:none; color: #703000; }
A.navi:link,A.navi:visited,A.navi:active{
    font-family:CopperplateGothicLight;
  color: #f2f2f2;
  text-align: center;
  padding: 2px 16px;
  text-decoration: none;
  font-size: 22px;
  display:inline-block;
  line-height:22px;
}

A.navi:hover{font-family: "CopperplateGothicLight"; text-decoration:none; color:#e9d7d3; background: url("https://hiirenkolo.net/shelyes/ulkka/navitaustauus.png") no-repeat; background-position:center; }

.g { background-color:#e0cebf; border: 2px solid #e0cebf;}
.n { background-color:#d7c3ba;}

p{
color: #000000;
font: 13px verdana;
padding-bottom:30px;
text-align: justify;}


#rakenne {
border: 0 none;
margin: 0 auto;
overflow: visible;
width:932px;
}



#navbar {
  overflow: hidden;
  background-color: #511b02;
  text-align:center;
  padding:5px 0px;
  z-index:9999999;
  box-shadow: 0px 2px 10px #000;
}
#navbarsisa {
position:relative;
margin:0 auto;
  text-align:center;
  z-index:99999991;
}


.sticky {
  position: fixed;
  top: 0;
  margin:0px auto;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
.eka {order:2; }
.toka {order:1; }
.kolmas {order:3; }


.content {
position:relative;
margin:0 auto;
z-index:9999998;
width:90%;
display: flex;
min-height: 22vw;
flex-wrap: wrap;
max-width:1200px;
background-color:#fff;
background-color: rgba(255,255,255, .5);
padding-bottom:100px;
}

#kontentti {
    display: flex;
    flex-wrap: wrap;
}



#loota {
z-index: 20;
float: right;
font-size: 11px;
overflow: visible;
text-align: justify;
margin: 0px -30px 0px 10px;
line-height: 16px;
width: 180px;
position: relative;

}


div#loota img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:0px;

}

div#loota h3 {
margin-left: 0px;
-webkit-margin-after: 3px;
}


div#pikkut {
width: 180;
font-family: Verdana;
font-size: 12px;
line-height: 18px;
text-align: justify;
color: #000000;
padding: 10px 10px;
margin: 0 auto;

}

#dia {
background-color:transparent;
width: 742px;
padding: 0px 0px;
overflow:visible;
text-align:right;
margin:0 auto;
top:0;



}

#diaetu {
background-color:transparent;
width: 932px;
padding: 0px 0px;
z-index: -5;
display:block;
position:absolute;
text-align:right;
overflow:visible;
float:right;
}

#ruskee {
text-align:justify;
margin:0 auto;
overflow:visible;
background-color:#fca9eb;
width:1200px;
}

#header{
      text-align: center;
position:relative;
      width:100%;
}

#otsikkoteksti {
background-color: #511b02;
    -moz-border-radius-topleft:45px;
    -webkit-border-top-left-radius:45px;
    border-top-left-radius:45px;
        -moz-border-radius-topright:45px;
    -webkit-border-top-right-radius:45px;
    border-top-right-radius:45px;
    padding-bottom:0px;

position:absolute;
width:420px;
bottom:0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
font-family: 'KGMakesYouStronger'; 
font-size:55px;
color:#fff;
z-index:9999991;

}


.sisaosa {
flex:70%;
z-index:4;
}

.lapsi {
background-color:#fff;
margin:15px 15px 0 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 15px;
line-height:16px;
overflow:auto;
}

.lapsenlapsi {
background-color:#fff;
background-color: rgba(255, 219, 192, .6);
margin:15px 15px 15px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 15px;
line-height:16px;
}

.uudetkuvat {display: flex; flex-direction: row; flex-wrap: nowrap;justify-content: center;
}
.uudetkuvat > div:last-child {
    padding-right:0;
}

.hevoslistaus {display: flex;  flex-wrap: wrap; align-items: stretch; justify-content: flex-start;
}

.uudetkuvat img{display: flex; flex-direction: row; flex-wrap: nowrap;justify-content: center;
}

.uusikuva {padding-right:5px;}

.kokonainen {
flex:100%;
 display: flex;
 flex-wrap: nowrap;
z-index:4;
margin: 15px 0 0 15px;
}

.kokonainen .puolikas {
flex:50%;
margin:0 15px 0 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.kokonainen .kakskolme {
flex:66%;
margin:0 15px 0 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.kakskolme .kasvava.lapsi, .kakskolme .lapsi {margin:15px 0 15px 0;}
.puolikas p, .kakskolme p, .vajaapuolikas p {
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 15px;
}

.kokonainen .kolmasosa {
flex:33%;
margin:0 15px 0 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.kolmasosa p{
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 15px;
}
.lapsi.pikkuinen {padding:0;}
.kolmasosa p:first-child {margin-top:0;}
.kokonainen .yksiosa {
flex:100%;
margin:0 15px 0 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.neljasosa {
    flex:25%;
}
.neljasosa.kasvava.lapsi {margin-bottom:0;}
.yksiosa p{
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 15px;
overflow: auto;
margin-bottom: 0;
}
.oikeeosa {
min-height: 400px;
overflow: visible;
text-align: justify;
flex:30%;
font-size:11px;
min-width:270px;
line-height:16px;
}
.oikeeosa p {
background-color:#fff;
font-size:11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:15px 15px;
margin-right:15px;
margin-top:15px;
}

.oikeeosa > .lapsi {
    margin-left:0;
}

.sisajaettavat {
  flex: 50%;
  max-width: 50%;
  justify-content: center;
  align-items: center;


}

.sisajaettavat img {
  margin-top: 8px;
  vertical-align: middle;
  -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:95%;
}
.sisajaettavat iframe {
  margin:8px 0;
  vertical-align: middle;
  -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width:95%;
height:95%;
}
.sisajako {
display: flex;
flex-wrap: wrap;
align-content: stretch;
text-align:center;
   margin-right:15px;
   margin-top:15px;
   background-color:#fff;
   -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:0 4px 8px 4px;
}


#alaosa {
    position:absolute;
    bottom:0;
font: 11px verdana;
color:#826759;
text-align: center;
padding: 0 0 30px 0;
vertical-align: bottom;
width: 100%;
z-index:-1;


}


#texti {
margin-bottom: 25px;
position:relative;
min-height: 400px;
line-height: 16px;
width:670px;
z-index:10;}



.qu{
background-color: #511b02;
font-family: verdana; 
font-size: 12px;
color:#ffffff; 
font-weight:bold;
height:20px;
border-bottom: none;
 
}
.oi{
background-color: #ceada6;
font-family: verdana; 
font-size: 12px;
color:#000000; 
height:20px;

 
}

.ho{
background-color: #fce3b6;
font-family: verdana; 
font-size: 12px;
padding: 10px;
 
}

.miniteksti{
font-family: verdana; 
letter-spacing: 1px;
text-transform:uppercase; 
font-size:8px; 
font-weight:bold;
 
}
.box .miniteksti {font-size:11px;}

.heppasivu {
color: #ffffff;
padding: 0px 10px;
font-size: 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.porukkasivu {
height:75px;
text-align:center;
vertical-align: middle; 
background:#fff;
color: #ffffff;
padding: 0;
font-size: 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin:0 auto;
overflow:visible;
display:inline-block;
width:auto;}


.tietoboksi{
padding: 10px;
margin: 5px 0px;
background-color: rgba(255, 255, 255, 0.75);
font-family: verdana; 
font-size: 11px;
width:100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-collapse: collapse;}

.tietoboksi td{
padding: 10px;
}


.kohta {flex-basis:33%; flex-shrink:1; display:inline-flex;}

.heppakuva {
vertical-align: top; 
background-color: #ffffff;
color: #ffffff;
padding: 0px 0px;
font-size: 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.heppadiv {
 filter: alpha(opacity=90);
 -moz-opacity: 0.50; opacity: 0.90;
  transition-duration: 0.5s; 
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-o-transition-duration:0.5s;
color: #ffffff;
position:relative;
background-repeat:repeat;
width:237px;
margin:5px;
max-width:320px;
flex: 1 1 237px;
align-items: flex-start;
line-height:0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.heppadiv b{ 
color: #ffffff;
}
.heppadiv td{
vertical-align:top;
}
.heppadiv img{
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}

.heppakontti{ 
position:absolute;
top:0;
line-height:16px;
width:100%;
height:100%;
}

.heppakontti table{ 
width:100%;
height:100%;
}
.heppadiv:hover{ 
 filter: alpha(opacity=100);
 -moz-opacity: 1.00; opacity: 1.00;
 transition-duration: 0.5s;
 -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
 color: #ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

div#porukkadiv {
vertical-align: top; 
 filter: alpha(opacity=90);
 -moz-opacity: 0.50; opacity: 0.90;
  transition-duration: 0.5s; 
-webkit-transition-duration:0.5s;
  -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
color: #ffffff;
padding: 0px 0px;
margin: 0px 0px;
display: block;
font-size: 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
}
#porukkadiv table {
margin:0 auto;
}



#porukkadiv:hover{ 
vertical-align: top; 
display: block;
 filter: alpha(opacity=100);
 -moz-opacity: 1.00; opacity: 1.00;
 transition-duration: 0.5s;
 -webkit-transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
 color: #ffffff;
 padding: 0px 0px;
margin: 0px 0px;
font-size: 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
}

.heppa{
background-color: #e5d3cf;
font-family: verdana; 
font-size: 11px;
line-height:16px;
width:100%;
cellpadding: 0px;
cellspacing: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-collapse: collapse;
 
}

.kisa{
background-color: #e5d3cf;
font-family: verdana; 
font-size: 11px;
width:100%;
cellpadding: 0px;
cellspacing: 0px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-collapse: collapse;
}

.kisa td{
text-align:center; 
    vertical-align:middle;
}

.kisa tr: first-child{
border-bottom:none;
}

.eih{
border-bottom:none;
}
.jooh{
border-bottom: 1px solid #fff0e7;
}
.varuste {
width:50%;
vertical-align: top; 
background-color: #e5d3cf;
padding: 10px 55px 20px 55px;
font-size: 11px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.heppa td{
padding: 2px 10px;
font-size: 11px;
text-align:center;
}
.heppa tr{
border-bottom: 1px solid #fff0e7;}

.heppa tr.eih{
border-bottom:none;}

.heppa tr:last-child{
border-bottom:none;}

.heppa .ht {
width:15%;
background-color:#97736b;
padding: 4px 8px;
font-size: 10px;
text-transform:uppercase;
font-weight:bold;
color:#fff;
}

.heppatext + .heppa .ht {
    width:auto;
}

.heppa .ht2 {
width:35%;
text-align:left;
}

.kisuri td:last-child.kisa1 {
    text-align:right;
}

.yksiosa .lapsi .heppa td { text-align:left; }

.heppa tr:last-child td:first-child ,.kisakalenteri tr:last-child td:first-child , #nurkat {
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
    border-bottom-left-radius:10px
}

.heppa tr:first-child td:first-child,.kisakalenteri tr:first-child td:first-child, #sukutaulu tr:first-child td:first-child {
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    border-top-left-radius:10px
}

.heppa tr:last-child td:last-child, .kisakalenteri tr:last-child td:last-child, #sukutaulu tr:last-child td:last-child {
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px;
}
.heppa tr:first-child td:last-child , .kisakalenteri tr:first-child td:last-child , #sukutaulu tr:first-child td:last-child {
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    border-top-right-radius:10px;
}

.etari{
background-color: #fff0d4 ;
font-family: verdana; 
font-size: 12px;
border cellpadding:15;
border cellspacing:15;
border-color: #b38141;
border-width: 1px 1px 1px 1px;
border-style: dashed;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


div#voikettu{
font-family:verdana;
font-size:12px;
margin:15px 15px 15px 15px;
}

.mini {position:unset;    
    margin-top: -8px;
    margin-right: -6px;
    border: solid 10px;
}

.vasenk{
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
border-color: #000000;
}

.vasen{
margin-right: 15px;
margin-bottom: 7px;
border-color: #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:0px;
}

.oikeak{
margin-top: 15px;
margin-left: 15px;
margin-bottom: 12px;
border-color: #000000;
}

.oikea{
margin-left: 15px;
margin-bottom: 12px;
border-color: #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:0px;
}

.pallero{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:0px;
}

img.pallero, img.hahmoimg{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:0px;
}

.hahmoimg {
    max-width:150px;
    margin: 0 0 .5em 0;
}

table.pallero{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:0px;
}

.pallero td{
padding: 0px 50px 0px 50px;}

.pallero td:last-child {
padding-bottom: 50px;}


.porukka{
border-color: #33241a;
}

.ava{
border-color: #33241a;
padding: 10px 10px transparent;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

.b { background-color: #8c4720; font-family: Verdana; font-size: 12px; color: #ffffff;}


.balloonstyle{
position:absolute;
top: 0px;
left: 0;
padding: 7px;
visibility: hidden;
border:1px solid #f6c9ae;
font:normal 11px Verdana;
line-height: 18px;
z-index: 100;
background-color: #fff2ea;
width: 200px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

#arrowhead{
z-index: 99;
position:absolute;
top: 0px;
left: 0;
visibility: hidden;
}

div.ruutu {
background-image: url("/kuvat/ruutu.jpg");
background-repeat: repeat;
border: 1px dashed #838383;
float: left;
margin: 0px;
padding: 15px 15px;
min-height: 150px;
width: 290px;
}

#palkki::-webkit-scrollbar{
width:8px;
background-color:#ece3e0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}

#palkki::-webkit-scrollbar-thumb{
background-color:#c86827;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#palkki::-webkit-scrollbar-thumb:hover{
background-color:#a54300;
border:1px solid #333333;
}
#palkki::-webkit-scrollbar-thumb:active{
background-color:#a54300;
border:1px solid #333333;
} 

#palkki {
scrollbar-track-color: #ece3e0;
scrollbar-base-color: #cf7d61;
scrollbar-width:8px;
}

.palkkipalkki{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
float: right;
margin:8px 4px;
flex:100%;
max-width:100%;
max-height:250px;
font-size:11px;
}

.palkkipalkkipieni{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
    flex: 100%;
    max-width: 100%;
float: right;
margin:8px 4px;
max-height:none;
font-size:11px;
}

.palkkipalkkipieni img{
width:16px;
line-height:16px;
margin-top:0;
}
.palkkipalkkipieni td{
line-height:16px;
font-size:11px;
  vertical-align: top;

}




.oikeeosa ul {
list-style: none;
padding: 15px;
margin: 0 auto;
	     }

.oikeeosa ul li:before {
		content: "\2192 \0020";
	     }
	     
.pikkuinen p {font-size:11px;}

h6 {
font-size:17px;
color: #ad724a;
margin: 8px auto 0px 15px;
font-family: CopperplateGothicLight; 
line-height:17px;
text-align:left;
font-weight:normal;
word-spacing: 3px;
}

h7 {
font-family: 'Caveat', cursive;
font-weight:bold;
color:#433129;
font-size:27px;
line-height:30px;
text-align:left;
word-spacing:0;
}
.heppatext {text-align:left;}

.puolikas + .heppatext {margin-top:25px;}
.kokonainen .yksiosa .lapsi {margin-left:0;}

.yksiosa .lapsi {margin-right:0;}
.rela {position:relative;}
.haloo { color:#b91a1a; }

.heppatext { color:#78361c; margin-left:18px; line-height:30px;position:relative;z-index:100;}

.sukari { font-size:11px;}
.sukari td { font-size:11px;vertical-align: top;}
.kisuri {margin-bottom: 15px;}
.kisuri td { font-size:11px;vertical-align: middle; text-align:left; text-transform:uppercase;}
.kisuri.heppa .oi { text-align:center; color:#fff; text-transform:uppercase; font-weight:bold;}
.heppa .oi {text-align:left;}
.kisatext {margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 0;
    font-size: 35px;
    color: #be9991;
    line-height: 18px;
    position:relative;
    text-align:left;
}

h3.suhde {
    margin-bottom:-.5em;
    font-family: 'KGMakesYouStronger', cursive;
    font-size:2.2rem;
    position:relative;
}

.suhde img, .heppatext img {
    height:1.2em;
    border-radius:50%;
    vertical-align:text-top;
}

.hahmoflexulompi {
    max-width:100%;
    min-width:50%;
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    margin-bottom:.2em;
}

.hahmoflex:not(:first-child) {
    padding:.2em;
}

.hahmoflex:first-child {
    flex-basis:15em;
    flex-shrink:0;
}

.hahmoflex:first-child > span {
    display:block;
    text-align:center;
    color:#fff;
    font-family:'Fira Code', monospace;
    background-color:#97736b;
    padding: .2em;
    border-radius:1em;
    text-transform:uppercase;
    margin-right:1em;
}

.hahmowrap {
    background:none; 
    display:flex; 
    padding:0; 
    align-items:flex-start;
    flex-wrap:nowrap; 
    overflow:visible;
}

.muokkaustila {
    position:relative;float:right; margin:1em; cursor:pointer; z-index:9999;
}

.hahmoastro {flex:100%; display:flex; flex-direction:column;}
.hahmoastro .pilipali {flex:100%;margin-right:0;}

.hahmovasen {
    display:flex; 
    flex-direction:column; 
    padding-right:1em;
}

.hahmolabel {
    display:inline-block; 
    text-align:center;
    color:#fff;
    font-family:'Fira Code', monospace;
    background-color:#97736b;
    padding: .2em 1em;
    border-radius:1em;
    text-transform:uppercase;
    margin-right:.5em;
    min-width:7em;
    margin-bottom:.2em;
}

.hahmotiedot {flex:100%;}


h3 + .hahmolabel, .oikeeosa .hahmolabel + .hahmolabel {
    margin-top:1.5em;
    margin-right:.2em;
    font-size:.8em;
}

.hahmolabel + p {
    margin-top:.2em;
}

.hahmolabel.muokkaa {
    background-color:#4ab310;
    padding:0 .7em;
    color:#fff !important;
    min-width:2em;
    margin:0;
    line-height:1.4em;
}

.hahmolabel.pilipali {
    background-color:#ceada6;
}

.hahmolabel.muokkaa.poista {
    background-color:#e63d39;
}

.muokkaa.kohta {
    line-height:1.2em;
    font-size:.9em;
    display:none;
}

.muokattava[contenteditable=true], .muokattava[contenteditable=plaintext-only] {
    font-family:'Fira Code', monospace;
    background:#fff3a4;
    border-radius:1em;
    padding:0 1em;
    border:1px dashed #ffbb19;
    display: inline-block;
}

.piilovinkki {
    font-style: italic;
    color:#9a9a9a;
    display:none;
}

.hahmolabel.muokkaa i {
    color:#fff;
}

.input-group {
    margin:.5em 0;
}


.kiinnioleva, .puolikas .heppatext {margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 0;
    font-size: 35px;
    line-height: 18px;}
.si {margin: 5px 0 10px 15px;}
.sisi {margin: 5px 0 10px 30px;}
.kisuri .valkku {text-transform:none; padding:8px 15px;}

.janniopettaa {background-color:rgba(255, 0, 0, 0.3);padding:0 3px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.catuopettaa {background-color:rgba(219, 109, 0, 0.3);padding:0 3px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.jassuopettaa {background-color:rgba(0, 193, 0, 0.3);padding:0 3px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.punateksti {color:red;}

.lista {text-align:left;list-style-position: outside;list-style: circle;padding-left: 25px;margin: 0.2em 0 0.2em 0;}
.lista li {margin-bottom: 0.2em;}
.lista ol {list-style-position: outside;list-style: disc; padding-left:20px;}
.lista ol li {text-align:left;font-size:0.85em;}
.syntlippu, .heppa td img, .sisajaettavat .syntlippu {height:1em;vertical-align:text-bottom;border-radius:0;margin-bottom: 0.1em;}
.kolmasosa .lapsi {margin:15px 0;}
.mobiilitus {display:flex; flex-wrap:wrap;}
.mobiilisisa {flex:100%;}
.muistilappu {
    text-align:left;
    line-height:28px;
    font-size:25px;
    font-family: 'Caveat', cursive;
    background:url('ulkka/ruutu.jpg');
}
    
.ilmanmarginia {margin:0;}
.mobiilinakyy, .mobiiliipadnakyy {display:none;}
.vajaapuolikas {flex:49%;}
.fadein { position:relative; background-color:#511b02; z-index:-2; width:762px; height:343px; margin:0 auto; }
.fadein p { position:absolute;background-color:#511b02; z-index:-1; left:0; top:0; margin:0;padding:0 10px; line-height:0; }
.allekirjoitus {text-align:left;color:#b35835;margin-bottom:.15em; font-size:48px;}
#markkeri {position:absolute; top:373px; left:0;}
#mobiilimarkkeri {position:absolute; bottom:0; left:0;}
.ilmoitustauluteksti {
    text-align:center;
    color:#853316;
    font-size: 35px;
    margin-bottom: 15px;
    margin-top: 0px;}
.oikeeosa .linkkilistasisempi p {margin:0;padding:0;}
.linkkilistasisempi {width:100%;padding:0;display:flex;flex-wrap:wrap;align-content:space-between;align-items:flex-start;justify-content:flex-start;flex-direction:column;max-height: calc(22 * 16px);}
.linkkilistasisempi > p {text-align:left;margin:0;padding:0;font-size:11px;line-height:16px;flex:49%;flex-grow:0;max-width:49%;}
#palkki .linkkilistaulompi {padding:0;}
.igiframe {max-width:195px;border:none; overflow:hidden;}
.porukkaotsikot {font-size: 42px;margin-top:22px;margin-bottom: 16px;text-transform:capitalize; text-align:center;}
.porukkaotsikot.pienempi {font-size: 38px;}
#parent .porukkaotsikot {margin-top:15px;}
.trigger{flex:100%; max-width:320px; margin:3px; opacity:0.9;transition:0.3s;min-width:270px;}
.trigger:hover{opacity:1.0;transition:0.3s;}
.tiedot{display:none;flex:100%;margin:3px 0;}
.tiedot.mobiilipiilo{display:block;}
.tietorivi{flex:100%; margin:0 3px;}
.kaappikontti{max-width:320px;display:flex;flex-wrap:wrap;position:relative;overflow:visible;flex-basis:25%;flex-grow:1;}
.porukkalapsi{line-height:16px;background:none; overflow:visible;display:flex;flex-wrap:wrap;padding:0;margin: 0;}
.oikeeosa .porukkalapsi {margin-right:15px;}
.porukkakokonainen:first-child{margin-left:15px;}
option {max-width:100%;}
.box {
  padding: 10px;
flex:31%;
max-width:31%;
    height: auto;
max-height: 15vw;
  position:relative;
  float: left;
  margin:1%;
  overflow:hidden;
  text-align: center;
  color: #fff;
  display:none;
}

.triangle, .triangle2 {
    width: 0;
    position:absolute;
    top:-31px;
    right:-31px;
    height: 0;
    border: solid 30px;
    border-color: transparent transparent black transparent;
  transform: rotate(45deg);
}

.Lyo .triangle, .Lyo.triangle.mini {border-color: transparent transparent #9dac49 transparent;}
.Tyo .triangle, .Tyo.triangle.mini {border-color: transparent transparent #2ac597 transparent;}
.abi .triangle, .abi.triangle.mini {border-color: transparent transparent #e00000 transparent;}
.l2 .triangle, .l2.triangle.mini {border-color: transparent transparent #008ee0 transparent;}
.l1 .triangle, .l1.triangle.mini {border-color: transparent transparent #e0a300 transparent;}
.pk10 .triangle, .pk10.triangle.mini {border-color: transparent transparent #0db500 transparent;}
.pk9 .triangle, .pk9.triangle.mini {border-color: transparent transparent #b55e00 transparent;}
.pk8 .triangle, .pk8.triangle.mini {border-color: transparent transparent #00b573 transparent;}
.pk7 .triangle, .pk7.triangle.mini {border-color: transparent transparent #bf0d33 transparent;}
.pk6 .triangle, .pk6.triangle.mini {border-color: transparent transparent #e6512f transparent;}
.pk5 .triangle, .pk5.triangle.mini {border-color: transparent transparent #bf40e4 transparent;}
.pk4 .triangle, .pk4.triangle.mini {border-color: transparent transparent #002be2 transparent;}
.pk3 .triangle, .pk3.triangle.mini {border-color: transparent transparent #e29a00 transparent;}
.pk2 .triangle, .pk2.triangle.mini {border-color: transparent transparent #b50099 transparent;}
.pk1 .triangle, .pk1.triangle.mini {border-color: transparent transparent #b5aa00 transparent;}
.svk .triangle2, .svk.triangle2.mini {border-color: transparent transparent #2118de transparent;}
.nyb .triangle2, .nyb.triangle2.mini {border-color: transparent transparent #ffd323 transparent;}
.osa .triangle2, .osa.triangle2.mini {border-color: transparent transparent #b74bce transparent;}
.sto .triangle2, .sto.triangle2.mini {border-color: transparent transparent #cd702c transparent;}
.str .triangle2, .str.triangle2.mini {border-color: transparent transparent #6ecc29 transparent;}
.smu .triangle2, .smu.triangle2.mini {border-color: transparent transparent #837fae transparent;}
.kak .triangle2, .kak.triangle2.mini {border-color: transparent transparent #cd2222 transparent;}
.mad .triangle2, .mad.triangle2.mini {border-color: transparent transparent #a45e3b transparent;}
.pre .triangle2, .pre.triangle2.mini {border-color: transparent transparent #b854a4 transparent;}
.kst .triangle2, .kst.triangle2.mini {border-color: transparent transparent #3091ad transparent;}
.vag .triangle2, .vag.triangle2.mini {border-color: transparent transparent #43b66e transparent;}
.kmu .triangle2, .kmu.triangle2.mini {border-color: transparent transparent #ad8b89 transparent;}
.ors .triangle2, .ors.triangle2.mini {border-color: transparent transparent #5e8d14 transparent;}
.break{flex-basis:100%;height:0;}

#parent{
        zoom: 0.55;
    -moz-transform: scale(0.55);
    display:flex;
    flex-wrap:wrap;
}

.puolikas .lapsi {margin:0;}
.vajaapuolikas .lapsi {margin:0 15px 15px 0;}
.puolikas.kasvava.tokaantuva {margin:0;}
.koristekuville, .kolmasosa .koristekuville, .palkkiintuva .kolmasosa p.koristekuville {display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; padding:0 0; line-height:0;background-color:transparent;}
.ipadnakyy {display:none;}

p.kirjoittajamerkki::before {
    content: "KIRJOITTAJAMERKKI";
    display: block;
    background-color: #be9991;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 1rem);
    font-family: 'Fira Code';
    font-size: smaller;
    color: #fff;
    letter-spacing: 2px;
    padding: .1rem 0 .1rem 1rem;
}

p.kirjoittajamerkki {
    padding-top:1.5rem;
    position: relative;
}

@media screen and (max-width: 1000px) {
    p.kirjoittajamerkki {padding-top: 2rem !important;}
    .oikeeosa .porukkalapsi {margin-right:1.5vw;}
.kokonainen.kolmas.karttakuvankontti {margin-right:1.5vw;}
.kolmasosa .koristekuville {margin-bottom:1.5vw;}
.palkkiintuva .kolmasosa p {margin-left:0; margin-right:0;}
.pallero.mobiilikakskuvaa {min-width:1px; flex-grow:0; flex-shrink:1; height:auto; display:inline-flex;max-width:32%;margin:0;}
.ipadnakyy {display:block;}
.allekirjoitus {font-size: 7vw; line-height:5vw; margin-bottom:0;}    
#mobiilimarkkeri {position:absolute; top:43vw; left:0;}
#markkeri {position:absolute; bottom:0; left:0;}
.sticky + .content {padding-top: 7vw;}
.igiframe, .sisajaettavat iframe {height:145px;width:95%;max-width:none;border:none; overflow:hidden;margin-bottom:0;}
.ilmoitustauluteksti {font-size:5vw; line-height:5vw; margin-bottom:1%;}
.kokonainen {margin:1.5vw 0 0 1.5vw;}
.kokonainen .puolikas, .kokonainen .yksiosa {margin:0 1.5vw 0 0;}
.kokonainen .puolikas .lapsi, .kokonainen .puolikas p, .kokonainen .yksiosa p {margin:0 0 1.5vw 0; padding:1.5vw;}
.linkkilistasisempi > p, .oikeeosa .linkkilistasisempi p {text-align:left;margin:0;padding:0;font-size:1.5vw;line-height:2vw;flex:100%;flex-grow:0;max-width:100%;}
.linkkilistasisempi {max-height:none;padding:0;}

.eimarginiamobiiliin, .oikeeosa p.eimarginiamobiiliin, .oikeeosa h1 {margin-left:0;}
.fadein { position:relative; width:90vw; height:43vw; max-width: 771px;margin:0 auto; }
.fadein p { position:absolute;background-color:#511b02; z-index:-1; left:0; top:0; margin:0;padding:0 2%; line-height:0; }
.fadein p img {width:100%;}
body {font-size:1.4vw; line-height:2vw;background-size: auto 47vw, auto;}
#diaesitys {width:100%; height:150px;}
#otsikkoteksti {width:70%; font-size:8vw; margin-bottom:-1px;}
#otsikkoteksti img {width:35%;}
.sisaosa {width:100%;}
.heppa .ht, .heppa .oi {font-size:1.7vw;width:fit-content; max-width:25%;line-height:2.2vw; padding: 1% 1.5%; text-align:left;}
.heppa .ht2 {font-size:1.8vw;width:fit-content;max-width:25vw;line-height:2.2vw; padding: 1% 1.5%; text-align:left;}

.lapsi.sukutaulu .heppa .oi, .lapsi.sukutaulu .heppa td {width:33%; font-size:1.8vw; line-height: 2.2vw;}
.kisuri .oi {text-align:center;}
.heppa.kisuri td, .heppa td, .valkku, .pikkuinen p {font-size:1.8vw; line-height:2vw; padding: 1% 1.5%;}

.kisatext, .heppatext.kiinnioleva, .puolikas .heppatext {font-size:5vw;line-height:5vw;margin-bottom:-.22em;}
.pallero {min-width:24.4%;max-width:25%;}
.pallero.varustekuva {max-width:none;}
.puolikas.neljaantyva .heppa {margin-top:0;}
.uudetkuvat .pallero {max-width:100%;}
.vasen {margin: .7% 1.5vw 1.5vw 0;}
.oikea {margin: .7% 0 1.5vw 1.5vw;}
.heppasivu {font-size:1.5vw;line-height:1.9vw;}
.miniteksti {font-size:1.2vw;}
.heppatext {font-size:6vw; line-height:6vw; margin: .5em 1.5vw .1em 1.5vw;}
h4 {font-size:3vw;line-height:3vw;margin:.5em 0 .5em 0;}
.heppalippu {height:0.55em;}
.lapsi, p, .tietoboksi td {font-size:1.7vw;line-height:2.2vw;padding:1.5vw; margin:1.5vw;}
h1, .puolikas h1, .sisaosa .kokonainen .puolikas h1, .sisaosa h1 {font-size:3.3vw;line-height:3vw; margin: 3% 2% 2% 2%;}
.yksiosa h1 {margin-left:0;}
.oikeeosa  {font-size:1.5vw; line-height:2vw;}
.oikeeosa p {font-size:2vw;line-height:3vw;padding:1.5vw; margin:1.5vw 1.5vw 1.5vw 0;}
.lapsenlapsi {margin:3%;padding:1.5vw;}
h2 {font-size:2.5vw; line-height:2.5vw; text-align:left;margin-left:0;}
.sisaosa > h2 {margin-left: 2%;}
h3 {font-size:3vw; line-height:3vw; text-align:left;margin-bottom:0;}
h3.liiska {font-size:3vw; line-height:4.5vw;margin: 0 0 0 1.5vw;}
.muistilappu {font-size: 5.5vw;line-height: 6vw;padding: 2% 4%;}
h5 {font-size:8vw;line-height:8.5vw;margin:0;}
h7, h6{font-size:4vw; line-height:4vw;}
.mobiilipiilo {display:block;}
.mobiilinakyy, .mobiilipiilo.ipadpiilo {display:none;}
.mobiiliipadnakyy, .mobiilinakyy.ipadnakyy {display:block;}
.content {width:98%; height:auto; min-height:100%; }
.kaksiintuva {flex:50%;}
.kokonainen .kolmasosa {margin-right:1.5vw;}
.heppadiv.kaksiintuva {flex:32%; max-width:33%;margin: 0 0.5% 1% 0.5%;}
.kakskolme .kasvava.lapsi, .kakskolme .lapsi {margin: 0 0 1.5vw 0;}
.kolmiintuva {flex:33%;}
.saapudottaa{flex-wrap:wrap;}
.palkkiintuva {flex-direction:column;}
.kasvava:first-child, .eimarginiamobiiliin, .saapudottaa .kasvava.eimarginiamobiiliin {margin-left:0;}
.kakskolme.kasvava, .kolmasosa.kasvava, .kasvava, .puolikas.kasvava, .vajaapuolikas.kasvava {flex:100%;}
.vajaapuolikas .lapsi {margin:0 0 1.5vw 0;}
.mobiilisisa {margin:0;}
.mobiilivasen {text-align:left;}
.sisajaettavat .mobiilinakyy {max-height:45%; overflow:hidden;}
.eka, .ekaantuva {order:1; }
.toka, .tokaantuva {order:2; }
.kolmas, .kolmaantuva {order:3; }
.neljaantyva, .puolikas.neljaantyva {order:4;margin-right:0;}
.oikeeosa {min-height:150px;margin-left:1.5vw;}
.sisajako {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-height:160px;
margin:1.5vw 1.5vw 0 0;
padding:1%;
}
A.navi:link, A.navi:visited, A.navi:active {font-size: 3vw;
    line-height: 4vw; padding:0 1%;}
.korkea {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-height:300px;
padding:1.5vw 1.5vw;
}
.sisajaettavat {flex:25%;max-height:250px;}
.palkkipalkki { max-height:200px;flex:30%;font-size:1.5vw; line-height:2vw; margin:8px 4px 8px 4px;}
.palkkipalkkipieni {max-height:200px;flex:30%;font-size:1.5vw; line-height:2vw;margin:8px 4px 8px 4px; overflow-y: scroll;}
.palkkipalkkipieni td {font-size:1.8vw; line-height:2.5vw;}
.syntlippu, .palkkipalkkipieni img.syntlippu {vertical-align:text-bottom;height:1em; width:auto; margin-bottom: 0.1em; border-radius:0;}
.pikkukuvake {height:4vw;margin-right:1vw;}
.perusnappi {font-size:2vw; padding:1% 2%;}
.pallero.keltsu, .progress-bar, .progress-bar-danger, .progress-bar-warning, .progress-bar-success {font-size:2vw; line-height:2vw; padding:1% 2%;}
.progress, .progress.animated {height:3vw;}
#palkki .vieritysloota {padding-right:3%;}
#palkki {border-radius:0;}
#palkki::-webkit-scrollbar {width:5px;}
.palvelut {margin-bottom:1.5vw;}
.kolmasosa .lapsi {margin:1.5vw 0;}
.kakskolme, .kokonainen .kakskolme {margin:0 1.5vw 0 0;}
}

@media screen and (max-width: 600px) {
    .oikeeosa .porukkalapsi {margin-right:2%;}
.kakskolme .kasvava.lapsi, .kakskolme .lapsi {margin:0 2% 2% 0;}
p.kirjoittajamerkki {padding-top: 2rem !important;}
.kokonainen.kolmas.karttakuvankontti {margin-right:2%;}
.kolmasosa .koristekuville {margin-bottom:2%;}
.pallero.mobiilikakskuvaa, .pallero.mobiilikakskuvaa.mobiiliipadnakyy {flex-shrink:1;display:inline-flex;max-width:49%; height:auto; margin:0;}
.palvelut {margin-bottom:2%;}
.kolmasosa .lapsi {margin:2% 0;}
.trigger.mobiilinakyy {min-width:1px;}
.ipadnakyy, .pallero.mobiilikakskuvaa.ipadnakyy {display:none;}
#mobiilimarkkeri {position:absolute; top:200px; left:0;}
#markkeri {position:absolute; bottom:0; left:0;}
.sticky + .content {padding-top: 15vw;}
.ilmoitustauluteksti {font-size:8vw;line-height:7.5vw; margin-bottom:1%;}
.kokonainen {margin:2% 0 0 2%;}
.kakskolme, .kokonainen .kakskolme {margin:0;}
.kasvava.lapsi, .kasvava .lapsi {margin-left:0;}
.kokonainen .puolikas, .kokonainen .yksiosa, .kokonainen .kolmasosa {margin:0 2% 0 0;}
.kolmasosa p {margin:0;}
.palkkiintuva .kolmasosa p {margin: 0 0 2% 0; padding:2%;}
.kokonainen .puolikas .lapsi, .kokonainen .puolikas p, .kokonainen .yksiosa p {margin:0 0 2% 0; padding:2%;}
.linkkilistasisempi > p, .oikeeosa .linkkilistasisempi p {text-align:left;margin:0;padding:0;font-size:2vw;line-height:3vw;flex:100%;flex-grow:0;max-width:100%;}
.linkkilistasisempi {max-height:none;padding:0;}
.allekirjoitus {font-size: 10vw;margin-bottom:0;}
.eimarginiamobiiliin, .oikeeosa p.eimarginiamobiiliin, .oikeeosa h1, .kokonainen .yksiosa h2 {margin-left:0;}
.sisajaettavat iframe {height:45%;}
.fadein { position:relative; width:90vw; height:43vw; margin:0 auto; }
.fadein p { position:absolute;background-color:#511b02; z-index:-1; left:0; top:0; margin:0;padding:0 2%; line-height:0; }
.fadein p img {width:100%;}
body {font-size:2vw; line-height:2.3vw;background-size: auto 50vw, auto;}
#diaesitys {width:100%; height:150px;}
#otsikkoteksti {width:70%; font-size:8vw; margin-bottom:-1px;}
#otsikkoteksti img {width:35%;}
.sisaosa {width:100%;}
.heppa .ht, .heppa .oi {font-size:2vw;width:fit-content; overflow: auto; max-width:none;line-height:2.2vw; padding: 1% 0.6em; text-align:left;}
.heppa .ht2 {font-size:1.8vw;width:fit-content;max-width:25vw;line-height:2.2vw; padding: 1% 1.5%; text-align:left;}

.lapsi.sukutaulu .heppa .oi, .lapsi.sukutaulu .heppa td {width:33%; font-size:2vw; line-height: 2.2vw; height:auto;}
.oi {height:auto;}
.kisuri .oi {text-align:center;}
.heppa.kisuri td, .heppa td, .valkku {font-size:2vw; line-height:2.2vw; padding: 1% 1.5%;}
.pikkuinen p {font-size:2.5vw;line-height:3vw;}
.kisatext, .heppatext.kiinnioleva, .puolikas .heppatext {font-size:5vw;line-height:5vw;margin-bottom:-.22em;}
.pallero {min-width:24%;max-width:24.1%;}
.uudetkuvat .pallero {max-width:100%;}
.vasen {margin: .7% 2% 2% 0;}
.oikea {margin: .7% 0 2% 2%;}
.heppasivu {font-size:2vw;line-height:2.7vw;padding:0 4%;}
.miniteksti {font-size:1.5vw;}
.hahmoastro .pilipali {flex:none;}
.hahmoflex {flex:100%;}
.hahmoflex:first-child > span {margin-right:0;}
.hahmoflex form {margin:1em 0;}
.hahmoflexulompi {flex-wrap:wrap;}
.oikeeosa .hahmolabel + p {margin-top:1%;}
.hahmoimg {margin-bottom:0;}
.hahmolabel.muokkaa {font-size:3vw;display:inline-block !important;}
.hahmotiedot {width:100%;}
.hahmovasen {width:100%; flex-direction:row;padding-right:0; margin-bottom:.5em;}

h3 + .hahmolabel.poista, .oikeeosa .hahmolabel + .hahmolabel.poista {margin-top:0;}
.hahmovasen img {width:25%;margin-right:.5em !important;}
.hahmowrap {flex-direction:column; margin-bottom:1em;}
.hahmooikea {display:flex; flex-wrap:wrap;margin-right:2%;}
.hahmooikea .porukkasivu {height:4em; padding:.5em;}
.hahmooikea .hoverattava {flex:100%;}
.hahmooikea .hahmolabel.muokkaa {margin-bottom:1em;}
.hahmooikea .porukkaotsikot {font-size:6vw; margin:.2em 0 .1em !important;}
.porukkaotsikot.pienempi {font-size: 5vw;}
.hahmooikea .kaappikontti, .hahmooikea .porukkasivu.trigger {min-width:1px;}
.hahmooikea .kaappikontti {max-width:50%; flex-basis:50%;}
.hoverattava {margin-bottom:.5em; font-size:1.5em;margin-right:0;}
.muokkaustila {float:none;}
.form-group {width:100% !important;}

.heppatext {font-size:6vw; line-height:6vw; margin: .5em 2% .1em 2%;}
h4 {font-size:4vw;line-height:4vw;margin:1em 0 .5em 0;}
.heppasivu h4 {margin-top:.5em;}
.heppalippu {height:0.55em;}
.lapsi, p, .tietoboksi td {font-size:3vw;line-height:3.8vw;padding:2%; margin:2%;}
h1, .puolikas h1, .sisaosa .kokonainen .puolikas h1, .sisaosa h1 {font-size:4vw;line-height:4vw; margin: 3% 2% 2% 2%;}
.oikeeosa p {font-size:3vw;line-height:3.8vw;padding:2%; margin:2% 2% 2% 0;}
h2 {font-size:3.5vw; line-height:3.5vw; text-align:left; margin-left:0;}
h1, .puolikas h1, .sisaosa .kokonainen .puolikas h1, .sisaosa h1 {font-size:4vw;line-height:4vw; margin: 3% 2% 2% 2%;}
.lapsenlapsi {margin:3%;padding:2%;}
h3 {font-size:3.3vw; line-height:3.5vw; text-align:left; margin:0;}
h3.liiska {font-size:3vw; line-height:4.5vw;margin:0 0 0 2%;}
h3.suhde {font-size:1.9rem;}
.muistilappu {font-size: 5.5vw;line-height: 6vw;padding: 2% 4%;}
h5 {font-size:8vw;line-height:8.5vw;margin:0;}
h7, h6{font-size:6.5vw; line-height:4vw;}
.mobiilipiilo, .tiedot.mobiilipiilo {display:none;}
.mobiilinakyy {display:block;}
.kaksiintuva {flex:50%;}
.heppadiv.kaksiintuva {flex:49%; max-width:49%;margin: 0 0.5% 1% 0.5%;}
.puolikas.tokaantuva:last-child {margin-top:2%;margin-right:2%;}
.kolmiintuva {flex:33%; text-align:left;}
.saapudottaa{flex-wrap:wrap;}
.palkkiintuva {flex-direction:column;}
.kasvava:first-child, .eimarginiamobiiliin, .saapudottaa .kasvava.eimarginiamobiiliin {margin-left:0;}
.kakskolme.kasvava, .kolmasosa.kasvava, .kasvava, .puolikas.kasvava, .vajaapuolikas.kasvava {flex:100%;}
.vajaapuolikas .lapsi {margin: 0 2% 2% 0;}
.mobiilisisa {margin:0;}
.mobiilivasen {text-align:left;}
.sisajaettavat .mobiilinakyy {max-height:45%; overflow:hidden;}
.eka, .ekaantuva {order:1; }
.toka, .tokaantuva {order:2; }
.kolmas, .kolmaantuva {order:3; }
.neljaantyva, .puolikas.neljaantyva {order:4;}
.oikeeosa {min-height:150px;margin-left:2%;}
.sisajako {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-height:200px;
margin:2% 2% 0 0;
padding:1%;
}
A.navi:link, A.navi:visited, A.navi:active {font-size: 5vw;
    line-height: 5vw; padding:0 2%;}
.korkea {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
max-height:300px;
padding:2%;
}
.sisajaettavat {flex:50%;max-height:200px;}
.sisajaettavat img {margin:0;}
.palkkipalkki { max-height:200px;flex:50%;font-size:2vw; line-height:2.6vw; margin:8px 4px 8px 4px;}
.oikeeosa {font-size:2vw; line-height:2.6vw;}
.palkkipalkkipieni {max-height:200px;flex:50%;font-size:2vw; line-height:3vw;margin:8px 4px 8px 4px;overflow-y: scroll;}
.palkkipalkkipieni td {font-size:1.8vw; line-height:2.5vw;}
.syntlippu, .palkkipalkkipieni img.syntlippu {height:1em; vertical-align:text-bottom;width:auto;margin-bottom: 0.1em; border-radius:0;}
.pikkukuvake {height:4vw;margin-right:1vw;}
.perusnappi {font-size:2vw; padding:1% 2%;}
.pallero.keltsu, .progress-bar, .progress-bar-danger, .progress-bar-warning, .progress-bar-success {font-size:2vw; line-height:2vw; padding:1% 2%;}
.progress, .progress.animated {height:3vw;}
#palkki .vieritysloota {padding-right:3%;}
#palkki {border-radius:0;}
#palkki::-webkit-scrollbar {width:5px;}
.oikeeosakuvake, .sisajaettavat .oikeeosakuvake {
    max-width: 160px;
    margin: 4% 0 0 0;
    height: 10vw;
    width: auto;
}
.oikeeosakuvake2 {
    max-width: 160px;
    margin: 0;
    height: 13vw;
    width: auto;
}
}