@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap');


html {
	background: url(t1.png) no-repeat fixed;
	background-size: cover; 
	background-position-y: center; 
	letter-spacing: 1px; 
	font-style: italic;
	font-family: "Old Standard TT", serif;
}

body {
	margin: 0;
	background-color: rgb(233 233 233 / 89%); 
	min-height: 100%; 
	width: 100%; 
	position: absolute; 
}

header {
	width: 100%;
	height: 350px; 
	min-width: 1000px;
}

.otsikko {
	object-fit: cover; 
	object-position: bottom;
	width: 100%; 
	height: 100%; 
	opacity: 90%;
}

.navi {
	width: 100%;
	min-width: 1000px;
	list-style-type: none;
	display: flex;
	background-color: #202d29f5;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	flex-wrap: nowrap;
	justify-content: center;
	position: absolute;
	z-index: 1;
	border-bottom: 5px solid rgb(23 28 26 / 46%);
	font-family:"Bodoni Moda", serif;
	align-items: center;
}

.navi li {
	margin: 0px 30px; 
	font-size: 20px; 
}

.navi a:hover {
	color: #dcdcc7; 
	transition: 2s;
}

.index {
	font-size: 40px !important; 
	text-transform: uppercase;
	font-weight: 100; 
	background: -webkit-linear-gradient(#e6e1bc, #a2955b, #223b3b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	letter-spacing: 5px; 
	font-style: normal; 
}

.sisalto, footer {
	background-color: #f9f8f4; 
	padding: 30px 0px;
	width: 1000px; 
	margin: 0px auto; 
	border: solid #dfd5d5; 
	border-width: 0px 1px; 
}

footer {
	text-align: center; 
	padding-bottom: 20px; 
}

footer em {
	width: 900px; 
	padding-top: 30px; 
}


	/* fontit */

p {
	margin: 20px 100px; 
	font-style: italic;
	line-height: 24px; 
	font-family: "Old Standard TT", serif; 
	text-align: justify; 
}

a {
	text-decoration: none; 
	color: #9d9261; 
}

a:hover {
	color: #33523f; 
	transition: 2s;
}

em, .varsat, .kisat p, .kasvatus {
	font-family: "Source Sans 3", sans-serif; 
	font-style: normal; 
	text-transform: uppercase; 
	font-size: 12px; 
	letter-spacing: 1.5px;
	color: rgba(0, 0, 0, 0.35); 
}

h2 {
	font-family: "Bodoni Moda", serif; 
	font-weight: normal; 
	font-style: normal ; 
	font-size: 30px; 
	margin: 20px 20px; 
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); 
}


	/* hevossivu */

.yla {
	display: flex; 
	width: 900px; 
	margin: 20px auto; 
}

.yla p {
	margin: 20px 20px;
}

.isokuva {
	width: 300px;
	margin: 20px; 
	border-radius: 10px;
	box-shadow: 0px 0px 4px #7a8a83; 
	filter: grayscale(40%);
}

.rmp {
	opacity: 0.15;
	width: 250px; 
	display: block; 
	margin: 35px auto; 
	filter: grayscale(100%);
}

.rmp:hover {
	filter: grayscale(0%);	
	transition: 1s;
}

.perustieto {
	text-transform: uppercase; 
	font-style: normal; 
	font-size: 12px; 
	border-bottom: 1px solid rgb(233 233 233 / 89%);
	padding-bottom: 30px; 
	color: #000; 
	text-shadow: 0 0 2px #c6c6c6; 
}

.sivu {
	text-align: center; 
}

.sivu b {
	text-transform: uppercase; 
	font-style: normal; 
	font-size: 13px; 
	color: #000; 
	text-shadow: 0 0 2px #c6c6c6; 
	display: block; 
	width: 340px; 
	text-align: center; 
	color: #9d9261; 
}

.perustieto em {
	text-transform: none;
}

.teksti {
	color: rgba(0, 0, 0, 0.7); 
}

.laatikko {
	width: 100%; 
	border-collapse: collapse; 
	background: url(pt3.png) no-repeat;
	background-size: 35%;
	background-position-x: center; 
	background-position-y: center;
}

.suku td, .kisat td {
	border: 1px solid #abc5b85c; 
	padding: 10px; 
	background-color: rgb(241 240 237 / 97%); 
}

.suku em, .varsat {
	color: rgba(0, 0, 0, 0.25); 
	font-size: 11px; 
}

.td1 {
	border-left: 0px !important; 
}

.td3 {
	border-right: 0px !important; 
}

.varsat, .kasvatus {
	width: 800px; 
	margin: 30px auto 50px auto;
	border-collapse: collapse; 
}

.varsat td, .kasvatus td {
	border-bottom: 1px solid rgb(233 233 233 / 89%);
	padding: 8px 0px; 
}

.varsat td:nth-child(2) {
	font-style: italic;
	font-family: "Old Standard TT", serif;
	font-size: 16px;
	text-transform: none; 
}

.kisat, .suku {
	min-height: 450px;
}

.kisat td {
	vertical-align: top; 
}

.kisat td:nth-child(1) {
	width: 50%;
}

.kisat img {
	height: 8px; 
}

.taso {
	text-align: center; 
	font-size: 45px; 
	display: block; 
	margin: 20px auto; 
	border: 1px solid #dcdcc7b5; 
	border-radius: 50%; 
	height: 120px; 
	width: 120px; 
	line-height: 120px;
	padding: 15px; 
	background-color: #f5f6f4; 
	color: #9d9261;
	font-family: "Old Standard TT", serif; 
}

.ominaisuus p {
	text-align: center; 
}

.kisat b {
	margin: 30px auto 50px auto;
	display: block; 
	width: 100%; 
	text-align: center; 
	color: rgba(0, 0, 0, 0.35); 
	position: relative;
	font-weight: normal; 
	font-size: 16px; 
	text-transform: uppercase; 
	font-style: normal; 
	text-shadow: 0 0 3px #fff; 
}

.kisat b:after {
    content: '';
    position: absolute;
	left: 215px;
    top: 40px;
    width: 50px;
    height: 2px;
    background: #e1e1be;
} 

.kisat p {
	margin: 20px; 
	font-size: 12px; 
}

.kisat td:nth-child(1) {
	border-left: 0px; 
}

.kisat td:nth-child(2) {
	border-right: 0px; 
}

.kasvatus {
	margin-top: 40px; 
}

.galleria {
	width: 900px; 
	margin: 50px auto 20px auto; 
	text-align: center; 
}

.galleria img, .listaus img {
	margin: 10px; 
	border-radius: 10px;
	box-shadow: 0px 0px 4px #7a8a83; 
	filter: grayscale(40%);
}

.galleria img:hover {
	filter: grayscale(0%);
	transition: 1s;
}


/* listaus */

.listaus {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 40px 50px 0px 50px; 
}

.listaus img {
	width: 200px; 
}

.heppa {
	width: 280px; 
	text-align: center; 
	margin: 10px; 
}