@import url('https://fonts.googleapis.com/css?family=Karla|Elsie|Herr+Von+Muellerhoff|Mrs+Saint+Delafield&display=swap');

body {
	margin: 0px; 
	background: url(t2.png);
	font-family: "Karla", sans-serif; 
	letter-spacing: 1px; 
	word-spacing: 5px; 
	color: #696969; 
}

header {
	width: 90%;
	min-width: 1000px;
	margin: auto;
	text-align: center; 
}

#navi {
	height: 80px; 
	width: 100%;
	min-width: 1000px;
	padding: 0px 0px; 
	margin: auto; 
}

header img {
	width: 100%; 
	display: block; 
	height: 250px; 
	object-fit: cover; 
	filter: grayscale(70%);
	min-width: 1000px;
}

ul {
	display: inline-block;
	list-style-type: none;
}

li {
	display: inline-block;
	padding: 0px 20px;
}

li:before {
	content: "\1F651";
	font-size: 20px; 
	margin-right: 15px; 
	color: #b9a6a6; 
	text-shadow: 1px 2px 2px #736a6a8c; 
}

li a {
	color: #6d6a6a; 
    text-decoration: none; 
    font-size: 18px; 
    padding: 10px;
    width: 100px;
}

li a:hover {
	text-shadow: 0px 0px 3px #9c7070; 
}

#sisalto {
	width: 90%;
	min-width: 1000px;
	margin: 0px auto; 
	background-color: rgb(216 212 212 / 70%); 
	padding: 50px 0px; 
}

.meriitit {
	width: 80%; 
	margin: 20px auto;
}

.meriitti {
	display: inline-block; 
	background-color: rgb(212 205 205); 
	padding: 10px 20px; 
	text-align: center; 
}

.kuvagalleria {
	text-align: center; 
	margin: 50px 100px; 
}

.kuvagalleria img {
	border-radius: 4px; 
	box-shadow: 0px 0px 3px #9E9E9E; 
	filter: grayscale(40%);	
}

footer {
	height: 20px; 
	width: 90%;
	min-width: 1000px;
	text-align: center; 
	padding: 20px; 
	font-size: 13px; 
	text-transform: uppercase; 
}

/* fontit */

h1 {
	padding: 0px; 
	display: inline;
	font-family: "Elsie", serif; 
	color: #ab9f9a; 
	text-shadow: 0px 0px 1px #fff; 
	font-weight: normal; 
	text-transform: uppercase; 
	font-size: 70px;  
}

h2 {
	margin: 10px 200px; 
	font-family: "Elsie", serif;
	font-weight: normal; 
	font-size: 40px; 
	text-transform: uppercase;
	border-bottom: solid #ebeceb; 
}

h3 {
	font-family: "Elsie", serif; 
	width: 78%; 
	margin: 50px auto 20px auto; 
    padding: 10px; 
    text-transform: uppercase;
    font-weight: normal; 
	background-color: rgb(212 205 205);     
    font-size: 20px; 
	color: #9e9e9e;
}

h4 {
	font-family: "Elsie", serif; 
	margin: 0px 180px;
    padding: 5px; 
    text-transform: uppercase;
	font-weight: normal; 
    font-size: 23px; 
	color: #9e9e9e;
	border-bottom: solid #ebeceb; 	
}

p {
	margin: 30px 100px; 
	text-align: justify;
}

em {
	font-style: normal; 
	font-size: 10px;
	color: #9E9E9E; 
}

a {
	color: #9c7070; 
	text-decoration: none; 
    text-shadow: 0px 0px 2px rgb(115 106 106 / 0.7); 
}

.copyt {
	text-align: center; 
	margin: 0px;
	font-size: 12px;  
	text-transform: uppercase;
	letter-spacing: 2px; 
	color: #9E9E9E; 
}

/* taulukot */

.taulukko {
	width: 80%; 
	margin: 20px auto; 
}

.etusivu p {
	text-align: center; 
}

.tiedot {
	border-collapse: collapse; 
}

.taulukko td {
	padding: 8px 20px; 
}

.tiedot tr:nth-child(odd) {
	background-color: rgb(212 205 205); 
}

.kuva img {
	width: 450px;
	border-radius: 4px; 
	box-shadow: 0px 0px 3px #9E9E9E; 
	filter: grayscale(40%);
}

.kuva img:hover {
	filter: grayscale(0%);
	transition: 2s;	
}

.suku {
	border-spacing:  10px;
}

.suku td {
	background-color: rgb(212 205 205); 
    padding: 10px; 
}

.suku td:hover {
	box-shadow: 0px 0px 3px #9E9E9E; 	
}

.td1 {
	text-align: center; 
}

.piilodiv {
    display:none; 
}

.trigger {
	cursor: pointer; 
	font-family: "Elsie", serif; 
	margin: 0px 180px;
    padding: 5px; 
    text-transform: uppercase;
    font-size: 23px; 
	color: #9e9e9e;
	border-bottom: solid #ebeceb; 
	text-shadow: none; 
}

.varsat {
	margin: 50px auto;
}

.varsat tr:nth-child(odd) {
	background-color: rgb(212 205 205); 
}

.varsat th {
	padding: 20px;   
}

.kisat {
	margin: 50px auto; 
}

.kisat td {
	background-color: rgb(212 205 205); 
    padding: 30px 15px; 
    width: 33%; 
    vertical-align: top; 
}


/* listaus */

.listaus {
	width: 85%; 
	margin: auto; 
}

.listaus img {
	height: 150px; 
	float: left; 
	border-radius: 4px; 
	box-shadow: 0px 0px 3px #9E9E9E; 
	filter: grayscale(40%);	
	margin: -5px 20px -5px 0px; 
}

.hevonen {
	width: 47%; 
	display: inline-block; 
	margin: 10px; 
	background-color: rgb(212 205 205); 
	border: 1px solid rgb(235 236 235 / 0.7); 
}

.hevonen p {
	margin: 20px; 
}

.hevonen a {
	border-left: 4px solid #ebeceb; 
	padding-left: 8px; 
}

.hevonen a:hover {
	text-shadow: 0px 0px 3px #736a6a;
}