@import url('https://fonts.googleapis.com/css?family=Gabriela');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Water+Brush');

::-moz-selection { color: #ffffff; background: #71a0bf; }
::selection { color: #ffffff; background: #71a0bf; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #cccccc; }
::-webkit-scrollbar-thumb { background: #1f4a66; }

img.galleria {
border: 3px double #e0dbc8;
}

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

html {
width: 100%;
height: 100%;
}

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(western-bg.jpg) fixed;
background-size: cover;
}

div.box {
position: relative;
display: block;
background-color: rgba(255, 255, 255, 0.95);
width: 100%;
min-height: 100%;
max-width: 1370px;
margin: 0px auto;
padding: 0;
bottom: 0;
box-shadow: 0px 0px 6px #aaaaaa;
overflow: hidden;
}

div.header {
display: inline-block;
position: fixed;
background-image: url(western-sivu.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left bottom;
width: 23%;
height: 100%;
margin: 0;
padding: 0;
float: left;
}

div.container {
position: relative;
display: inline-block;
background-color: transparent;
width: 69%;
min-height: 100%;
margin: 0 0 0 23%;
padding: 4%;
float: left;
}

div.heppa {
display: inline-block;
background-color: #f5f3eb;
width: 24%;
max-width: 100%;
margin: 0px 0px 4px 0px;
padding: 0px;
flex-wrap: wrap;
border: 3px double #e0dbc8;
}

div.kuva {
display: inline-block;
width: 59%;
max-width: 100%;
margin: 0px;
padding: 0px;
flex-wrap: wrap;
vertical-align: top;
}

div.tiedot {
display: inline-block;
width: calc(40% - 50px);
max-width: 100%;
margin: 0px;
padding: 25px 0px 0px 50px;
flex-wrap: wrap;
vertical-align: top;
}

div.kisat {
display: inline-block;
width: calc(50% - 30px);
max-width: 100%;
margin: 0px;
padding: 15px;
flex-wrap: wrap;
}

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

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

div.kolme {
display: inline-block;
width: 32%;
max-width: 100%;
margin: 50px 0px 0px 0px;
padding: 0px 5px;
flex-wrap: wrap;
}

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

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

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

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

a:hover {
color: #1f4a66;
text-decoration: underline;
}

a.header:link, a.header:visited, a.header:hover {
display: inline-block;
width: 68%;
font-size: 72px;
font-family: water brush;
font-weight: normal;
color: #ffffff;
margin: 0;
padding: 15% 0 10% 0;
line-height: 1;
text-align: center;
text-shadow: 0px 0px 3px #000000;
text-decoration: none;
z-index: 10;
}

h1 {
font-size: 42px;
font-family: water brush;
font-weight: normal;
color: #769BBD;
padding: 15px 50px;
margin: 0px;
text-align: left;
}

h2 {
font-size: 24px;
font-family: gabriela;
font-weight: normal;
color: #52809e;
margin: 25px 0px;
clear: both;
text-align: left;
text-transform: uppercase;
}

h3 {
font-size: 12px;
font-family: gabriela;
font-weight: normal;
color: #769BBD;
margin: 0;
padding: 5px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
clear: both;
}

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

.nav {
position: relative;
z-index: 11;
background-color: transparent;
list-style: none;
width: 71%;
float: center;
margin: 0 0 16% 0;
padding: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: gabriela;
font-weight: normal;
font-size: 20px;
}

.nav li {
display: inline;
}

.nav a {
display: inline-block;
width: 71%;
padding: 5px;
margin: 5px;
text-decoration: none;
color: #ffffff;
}

.nav a:hover {
color: #52809e;
}

/* Mobiili */

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

div.box { width: 100%; }
a.header:link, a.header:visited, a.header:hover { width: 100%; padding: 3%; }
div.header { width: 100%; position: relative; background-size: cover; }
div.container { width: 92%; margin: 0; }
div.kuva { width: 100% }
div.tiedot { width: 100%; padding: 25px; }
div.heppa { width: 49%; }
.nav { width: 100%; margin: 3%; }
.nav a { width: 23%; }

}