@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Amiri|Bellefair|Spectral');

html {
	background-image:url(bg.png);
	padding:0;
	margin:0;
	left:0;
	top:0;
}

body {
	width:1200px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	font-family: 'Amiri', serif;
	font-size:16px;
	color:#141413;
	text-align:justify;
	line-height:21px;
}

p {
	line-height:20px;
}

pre {
	font-family: 'Amiri', serif;
}

#header {
	background-image:url(headbg2.png);
	background-repeat:no-repeat;
	margin-top:-5px;
	box-shadow:0px 0px 25px rgba(0,0,0,0.5);
}

.navi {
	background-image:url(navibg.png);
	background-repeat:repeat-x;
	height:45px;
	margin-top:-23px;
	box-shadow:0px 0px 15px rgba(0,0,0,0.5);
	position:relative;
	z-index:100;
}

.navi ul {
	margin-left:auto;
	margin-right:auto;
	width:1000px;
}

.navi ul li {
	display:inline-block;
	margin-top:14px;
}

.navi ul li a {
	font-family: 'Cardo', serif;
	text-transform:uppercase;
	font-size:18px;
	color:#cdd6db;
	padding-top:12px;
	padding-bottom:8px;
	padding-left:50px;
	padding-right:50px;
	text-decoration:none;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.navi ul li a:hover {
	font-family: 'Cardo', serif;
	font-size:18px;
	text-transform:uppercase;
	color:#2a7293;
	padding-top:12px;
	padding-bottom:8px;
	padding-left:50px;
	padding-right:50px;
	text-decoration:none;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
	background-color: rgba(238, 238, 238, 0.7);
}

#sisalto {
	background-color:rgba(238,238,238,0.9);
	padding:20px;
	margin-top:30px;
	padding-bottom:10px;
	box-shadow:0px 0px 25px rgba(0,0,0,0.5);
	text-align:justify;
}

p {
	padding-left:20px;
	padding-right:20px;
}

.koriste {
	border:7px solid #2D7996;
	box-shadow:0px 0px 10px #a69f97;
	-webkit-filter: grayscale(70%);
    filter: grayscale(70%);
	transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.koriste:hover {
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
	}
	
.koristekaks:hover {
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
	}
	
.koristekolme:hover {
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
	transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
	}

.koristekaks {
    width:300px;
	border-radius:15px;
	margin:10px;
	box-shadow:0px 0px 10px #a69f97;
	-webkit-filter: grayscale(70%);
    filter: grayscale(70%);
	transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.koristekolme {
	height:200px;
	border-radius:15px;
	margin:10px;
	box-shadow:0px 0px 10px #a69f97;
	-webkit-filter: grayscale(70%);
    filter: grayscale(70%);
	transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

a {
	text-decoration:none;
	color:#2D7996;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

a:hover {
	color:#32A3CF;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

h1, h2, h3 {
	font-family: 'Fondamento', cursive;
	font-weight:400;
	margin-left:100px;
	margin-right:100px;
	border-bottom:1px solid #a7b7bc;
	color:#2D7996;
	text-align:center;
	overflow:hidden;
}

h1 {
	font-size:28px;
	line-height:28px;
}

h2 {
	font-size:22px;
	line-height:22px;
}

h3 {
	font-size:18px;
	line-height:18px;
}

h5 {
	font-family: 'Fondamento', cursive;
	font-weight:400;
	font-size:28px;
	text-align:center;
	margin-left:100px;
	margin-right:100px;
	border-bottom:1px solid #a7b7bc;
	color:#2D7996;
	overflow:hidden;
	margin-top:20px;
	line-height:28px;
}

.saannot {
	list-style-type:decimal;
	width:900px;
	margin-left:auto;
	margin-right:auto;
}

.kasvatit {
	width:100%;
}

.kasvatit td {
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	border-bottom:1px solid #a7b7bc;
}

.kasvatit tr:hover td {
	background-color:rgba(238,238,238,0.6);
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.palkitut {
        width:90%;
        margin:0 auto 0 auto;
        padding:5px;
}

.palkitut td {
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	border-bottom:1px solid #a7b7bc;
}

.palkitut tr:hover td {
	background-color:rgba(238,238,238,0.6);
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.tilasto {
        width:90%;
        margin:0 auto 0 auto;
        padding:5px;
}

.tilasto .eka {
    color:#2D7996;
    width:330px;
font-family: 'Amiri', serif;
    letter-spacing:1px;
    font-size:16px;
}

.tilasto td {
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
    font-size:14px;
    width:150px;
	border-bottom:1px solid #a7b7bc;
}

.tilasto tr:hover td {
	background-color:rgba(238,238,238,0.6);
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}


#footer {
	width:1200px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:20px;
	font-size:13px;
	color:#526c79;
}

#footer a {
	color:#598292;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

#footer a:hover {
	color:#73b6d0;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.lista {
margin-top:30px;
margin-left:40px;
display:inline-block;
width:1200px;

}

#yksip, #kaksip, #kolmep, #neljap, #pitkas { display:none; }
#evm, #yksi, #kaksi, #kolme, #nelja, #pitka h2 { cursor:pointer; }

.vasen, .keski, .oikea {
width:350px;
height:157px;
margin-bottom:10px;
margin-left:0px;
float:left;
margin-right:10px;
display:inline-block;
text-align:center;
background-color:rgba(243,233,220,1.0);
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
border:1px solid #ffffff;
background-image:url(listaustausta.jpg);
}


.vasen:hover, .keski:hover, .oikea:hover {
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
box-shadow:1px 1px 15px rgba(95,95,95,0.4);
}

.vasen:hover .listaimg {
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
filter:grayscale(0%);
}

.keski:hover .listaimg {
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
filter:grayscale(0%);
}

.oikea:hover .listaimg {
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
filter:grayscale(0%);
}

.listaimg {
height:157px;
width:100px;
float:left;
border-right:1px solid #fff;
margin-top:0px;
filter:grayscale(60%);
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}

.lista h4 {
font-family: 'Fondamento', cursive;
font-weight:100;
font-size:20px;
margin-bottom:0px;
color:#b88242;
text-align:center;
text-shadow:0px 0px 2px #ffffff;
}

.lista h4 a:hover {
text-shadow:0px 0px 5px #ffffff;
}

.lista p {
font-family: 'Amiri', serif;
font-size:15px;
margin-bottom:5px;
margin-top:5px;
}

.lista i {
        font-family: 'Fondamento', cursive;
	font-weight:100;
	font-size:16px;
	color:#2a7293;
	text-align:center;
}

.listaus {
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

ul.listaus {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.listaus li {
  display: inline-block;
  height: 200px;
  margin: 0 20px 20px 0;
  position: relative;
  width: 290px;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 290px;
  border:2px solid #b3aca2;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 200px;
  left: 0;
  position: absolute;
  top: 0;
  width: 290px;
  opacity: 0;
  border-radius:10px;
  box-shadow:0px 0px 10px #474747;
  border:2px solid #b3aca2;
}

ul.listaus li:hover span.text-content {
  opacity: 1;
}

.listaus img, .listaus img:hover {
	border-radius:10px;
	border:2px solid #b3aca2;
	box-shadow:0px 0px 10px #b3aca2;
}

.perus {
	width:760px;
	margin-left:40px;
}

.perus td {
	text-align:center;
	padding-top:2px;
	padding-bottom:2px;
font-family: 'Amiri', serif;
}

.ptieto {
	text-transform:uppercase;
    text-shadow: 0px 0px 1px #000;
    color:#fff;
font-family: 'Amiri', serif;
    font-size:16px;
    width:50%;
    text-align:center;
	box-shadow:0px 0px 5px #706c66;
	background-image:url(navibg.png);
}

.sivu {
	height:200px;
	border:5px solid #fff;
	box-shadow:0px 0px 20px #a69f97;
	margin-right:20px;
}

.sivukuva {
	height:360px;
	border:10px solid #fff;
	box-shadow:0px 0px 20px #a69f97;
	margin-right:60px;
}

.pikkukuva {
	height:110px;
	border:5px solid #fff;
	box-shadow:0px 0px 10px #6E6E6E;
	margin-left:auto;
	margin-right:auto;
	display:inline-block;
}

.perus img {
	filter:grayscale(70%);
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.perus img:hover {
	filter:grayscale(0%);
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.galleria {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:20px;
}

.galleria img {
	filter:grayscale(70%);
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.galleria img:hover {
	filter:grayscale(0%);
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.copyt {
	font-size:12px;
	font-color:#888888;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}
	
.meriitit {
	margin-left:auto;
	margin-right:auto;
	background-color:#edeef0;
	width:1000px;
	padding:15px;
	text-align:center;
}

.vas, .oik {
	width:470px;
	display:inline-block;
}

.suku {
	width:1030px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #a7b7bc;
}

.suku td {
	padding-left:15px;
	padding-right:5px;
	width:25%;
}

.suku em {
	padding-left:10px;
	font-size:12px;
}

.varsat {
	width:950px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

.nayt {
	text-align:center;
}

.kisa {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	line-height:18px;
}

.kisa td {
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
	padding-top:0px;
	padding-bottom:0px;
	font-size:14px;
	border-bottom:1px solid #c4bdb3;
}

.kisa pre {
font-size:14px;
font-family: 'Amiri', serif;
	line-height:15px;
}

.kisa tr:hover td {
	background-color:#edeef0;
	transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}

.pk {
	width:1000px;
	background-color:#edeef0;
	padding:10px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	text-align:justify;
}