/* Background pattern from subtlepatterns.com */
/* flower pattern from Lileya.deviantart. com. */


body {
	background:url(http://i236.photobucket.com/albums/ff111/SeSSa95/light_alu_zpsu84kizpi.png);
	text-align: justify;
	margin: 0;
	line-height:1.6;
	font-family: arial, sans-serif;
	font-size: 13px;
	color:#eee; 
}

a {
color:#bbb8b8;
text-decoration: none;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}

a:hover {
color:#3b3b3b;
text-decoration: none;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}


.etusivu {
font-family: 'Allura', serif, cursive;
color: #6c726e;
font-size: 20px;
text-align: center;
}

hr {
border-color: #fff;
margin-top: 20px;
margin-bottom: 10px;
}


h1 {
font-size: 85px;
margin: 0;
padding-top: 10px;
padding-bottom: 0;
text-transform: none;
color: #fff;
font-weight:normal;
font-family: 'Tangerine', cursive;
text-shadow: 2px 2px 2px #797979;
}



h3{
font-family: 'Alex Brush';
font-size: 30px;
font-weight: 400;
font-style: none;
color: #d4d4d4;
text-align: left;
margin-top: 5px;
padding-left:30px;
letter-spacing: 1px;
border-bottom:1px solid;
line-height:1.0;

}




h4{
font-family: arial, sans-serif;
font-size: 13px;
font-weight: 600;
font-style: none;
color: #bfbfbf;
text-align: left;
margin-top: 5px;
margin-bottom: 5px;
padding-left:30px;
letter-spacing: 1px;

line-height:1.1;

}

#sisalto {
width: 1050px;
margin: 10px auto 0 auto;
}

#teksti{
background:url(http://i236.photobucket.com/albums/ff111/SeSSa95/tausta_zpsag4cx1c9.png) left top no-repeat #f5f5f5;
width: 1000px;
padding-left: 40px;
padding-right: 40px;
color: #797979;
box-shadow: 0px 0px 7px #cacaca;
padding-top: 35px;
border-radius:5px;
border:6px solid rgba(255,255,255,.8);
}



#end {
font-size: 14px;
color: #fff;
padding-top: 40px;
clear: both;
}



.tint {
	position: relative;

	cursor: pointer;
margin:0px 0px 0px 0px;
}

.tint:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255,255,255, 0.3);
	-moz-transition: background .3s linear;
	-webkit-transition: background .3s linear;
	-o-transition: background .3s linear;
	transition: background .3s linear;
}

.tint:hover:before {
	background: none;
}




.img-frame-cap {
	float: left;
    width:275px;
    background:#f5f5f5;
    padding:15px 15px 0px 15px;
    border:1px solid #d8d8d8; 
margin: 0px;
margin-left: 30px;
box-shadow: 0px 0px 7px #cacaca;
}



.caption {
font-family: 'Allura', cursive;
text-align:center;
margin-top:4px;
font-size:40px; 
color: #919191;
 text-shadow: 2px 2px 3px #bec2bc;
}





#perustiedot {
width:100%;
margin:0 auto;  
margin-top: 10px; 
border-spacing: 0;
}



#tyhja{
width:100px;
margin-top:600px;
}





.td3 {
background: url(http://i236.photobucket.com/albums/ff111/SeSSa95/light_alu_zpsu84kizpi.png); 
height: 3px;
}



#tiedot {
margin-top: 4px;
	width:100%;
border-spacing: 0;
	line-height:22px;



}



.suku {
width:33%;
letter-spacing: 0px;
font-size: 13px;
padding-left: 20px;
line-height: 1.4; 
padding-top:10px;
padding-bottom:10px;
border-bottom: 1px solid #d9d9d9;
}


.suku2 {
width:33%;

letter-spacing: 0px;
font-size: 13px;
padding-left: 20px;
line-height: 1.4; 
padding-top:10px;
    padding-bottom:10px;


}

.td1 {
background: #f5f5f5;
width:20%;
height:35px;
font-weight: bold;
font-style: none;
color: #7b7b7b;
letter-spacing: 0px;
font-size: 13px;
padding-left: 20px;
border-bottom: 1px solid #d9d9d9;

}

.td2 {
width:30%;
padding-left: 10px;
color: #7b7b7b;
border-bottom: 1px solid #d9d9d9;
font-size: 13px;

}

.td1last {
width:20%;
height:35px;
font-size: 13px;
font-weight: bold;
font-style: none;
color: #7b7b7b;
letter-spacing: 0px;
font-size: 14px;
padding-left: 20px;
}

.td2last {
width:30%;
padding-left: 10px;
color: #7b7b7b;
}


.taulukko2 {
width:100%;
margin-left:0px;
border-top:1px solid #686868;
border-bottom:1px solid #686868;

}



.jalkelaiset {
text-align:left;
text-indent:10px;
border-bottom:3px solid #d9d8d8;
border-top:3px solid #d9d8d8;
padding:0;
margin:20px 0;
vertical-align:middle;
width:100%;
border-spacing: 0;
}



.jalkelaiset td {
padding:9px 0;
padding-left:20px;
border-bottom: 1px solid #d9d9d9;
}

.kehykset{
background:url(http://i236.photobucket.com/albums/ff111/SeSSa95/light_alu_zpsu84kizpi.png);
padding: 5px;
margin: 8px;
margin-bottom: 0px;
margin-top: 0px;
border: 0px solid #ab9471;
box-shadow: 1px 1px 4px #62725b;
height:200px;
width:auto;
}

.kehykset2{
background:url(http://i236.photobucket.com/albums/ff111/SeSSa95/light_alu_zpsu84kizpi.png);
padding: 5px;
margin: 8px;
margin-bottom: 0px;
margin-top: 0px;
border: 0px solid #ab9471;
box-shadow: 1px 1px 4px #62725b;
height:300px;
width:auto;

}



.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
}

.lightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
border:15px solid #e8e8e8;
}

.lightbox:target {
	outline: none;
	display: block;
}









.view {

   width: 215px;
   height: 140px;
   margin: 12px;
   float: left;
   border: 4px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 4px #62725b;
   cursor: default;
   background: #fff no-repeat center center;

}
.view .mask,.view .content {
   width: 215px;
   height: 140px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;

}
.view img {
   display: block;
   position: relative;

}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 12px;
   padding: 5px;
   background: rgba(56, 56, 56, 0.8);
   margin: 10px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   
   font-size: 13px;
   position: relative;
   color: #000;
text-shadow: 1px 1px 1px #fff;
   padding: 0px 20px 20px;
   text-align: center;
}



.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background: rgba(255, 255, 255, 0.8);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;

}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}

.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}