@import url('https://fonts.googleapis.com/css?family=Beau+Rivage');
@import url('https://fonts.googleapis.com/css?family=Bellefair');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:ital');
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC:wght@700&display=swap');

@font-face { font-family: zallman; src: url(ZallmanCaps.TTF); }

::-moz-selection { color: #eeeeee; background: #57455D; }
::selection { color: #eeeeee; background: #57455D; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #b59791; }
::-webkit-scrollbar-thumb { background: #69362b; }

img.heppa { float: right; width: 600px; }
img.lista { float: right; width: 150px; }
img.galleria { border: 1px solid #69362b; padding: 3px; }

html { height: 100%; margin: 0; padding: 0; }
body { margin: 0; padding: 0; width: 100%; height: 100%; background-image: url(k/grimm-bg.jpg); background-repeat: repeat; }
div.header { display: block; width: 100%; margin: 0; padding: 0; float: left; background-image: url(k/grimm-up.jpg); background-repeat: repeat;
box-shadow: 0px 0px 3px #000000; }
div.container { display: block; background-image: url(k/grimm-in.png); background-repeat: repeat; width: 90%; max-width: 1200px; margin: 0 auto; padding: 1% 5%;
overflow: hidden; box-shadow: 0px 0px 3px #000000; }
div.heppa { display: inline-block; font-family: open sans; font-size: 13px; text-align: left; width: 29%; margin: 0; padding: 1% 2%; background-color: transparent;
flex-wrap: wrap; float: left; }

div.varsa {
display: inline-block;
width: 24%;
max-width: 100%;
margin: 0px;
padding: 0px;
flex-wrap: wrap;
}

div.kasvatus {
display: inline-block;
width: 50%;
max-width: 100%;
margin: 15px 135px 15px 0px;
padding: 15px;
flex-wrap: wrap;
border: 1px solid #69362b;
float: left;
}

div.kaksi {
display: inline-block;
width: 50%;
max-width: 100%;
margin: 0;
padding: 0;
float: left;
flex-wrap: wrap;
}

div.kolme {
display: inline-block;
width: 33%;
max-width: 100%;
margin: 15px 0px;
padding: 0;
float: left;
flex-wrap: wrap;
font-size: 10px;
font-family: open sans;
color: #aaaaaa;
text-align: center;
}

b, strong { font-weight: normal; color: #57455D; text-shadow: 0px 0px 1px #57455D; }
m, meriitit { font-size: 11px; font-family: open sans; color: #888888; }
a:link, a:visited { color: #57455D; text-decoration: none; } a:hover { color: #422661; text-decoration: underline; }
a.lista:link, a.lisat:visited { font-size: 16px; } a.lista:hover { font-size: 16px; }
h1 { font-size: 78px; font-family: beau rivage; font-weight: normal; color: #ffffff; padding: 0; margin: 15px 0px; text-align: center; letter-spacing: 1px; }
h2 { font-size: 38px; font-family: bona nova sc; font-weight: normal; color: #422661; padding: 25px 0px; margin: 0px; text-align: left; text-transform: uppercase; }
h2::first-letter { font-size: 58px; font-family: zallman; font-weight: normal; margin: -5px 0px 5px 0px; float: left; }
h3 { font-size: 38px; font-family: bona nova sc; font-weight: normal; color: #5d437a; padding: 0px; margin: -35px 0px 25px 80px; text-align: left; text-transform: uppercase; }

h4 {
font-size: 12px;
font-family: bellefair;
font-weight: normal;
color: #888888;
padding: 45px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
clear: both;
}

p { color: #000000; font-family: open sans; font-size: 14px; text-align: justify; line-height: 2; }
p.big { color: #000000; font-family: open sans; font-size: 14px; text-align: justify; line-height: 3; }
.nav { float: center; display: block; background-color: transparent; width: 50%; color: #ffffff; margin: 0 auto; padding: 0; overflow: hidden; text-align: center;
border-top: 1px solid #765d91; } .nav li { display: inline; } 
.nav a { display: inline-block; float: center; padding: 25px 50px; margin: 0; color: #ffffff; font-family: bellefair; font-size: 22px; text-transform: uppercase;
text-decoration: none; } .nav a:hover { background-color: rgba(255, 255, 255, 0.3); }

@media all and (max-width: 1200px) {

img.heppa { float: left; clear: both; width: 100%; }

div.heppa { width: 96%; }

.nav { width: 100%; }

}