@import url('https://fonts.googleapis.com/css?family=Kavivanar');
 @import url('https://fonts.googleapis.com/css?family=Parisienne');
 
body {
	background-image: url(tausta.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	margin: 0;
}

.otsikko {
	margin-top: 70px;
	margin-right: 60px;
	margin-bottom: -10px;
}

h1 {
	text-align: right;
    font-family: 'Parisienne', cursive;
	font-size: 3em;
}


h2 {
    font-family: 'Kavivanar', cursive;
}


h3 {
    font-family: 'Kavivanar', cursive;
	color: #000;
	text-align: left;
	font-weight: lighter;
	margin: 20px 0 0 0;
}

a { 
	color: rgba(66, 64, 73, 1);
	text-decoration: none;
}

a:hover {
	color: #dc9dac;

}

i, em {
	color: #dc9dac;
}



/* navigaatio */

.navi {
	width: 100%;
	height: 50px;
	margin: 0;
	background-color: rgba(66, 64, 73, .8);
	position: fixed;
	top:0;
}


.navi ul {
	margin: 0 auto;
	width: 900px;
	height: 50px;
	padding: 0;
}

.navi li {
	display: inline-block;
	letter-spacing: 1px;
	margin: 0 auto;
	text-align: center;
	line-height: 49px;
	width: 170px;
}

.navi li:hover {
	background-color: rgba(66, 64, 73, 1);
}

.navi a {
    font-family: 'Kavivanar', cursive;
	color: #fff;
	text-decoration: none;
	padding: 20px 40px;
}

.navi a:hover {
	color: #dc9dac;
}

/* sisältö */

.koko {
	width: 1200px;
	margin: 0 auto;
}

.teksti {
	max-width: 1200px;
	background-color: rgba(255, 255, 255, .8);
	padding: 30px 40px;
	border-radius: 20px;
	overflow: auto;
	box-shadow: 12px 20px 12px 1px rgba(0, 0, 0, .5);

}

.teksti p {
	margin-top: 5px;
}

.vasen {
	width: 75%;
	padding-right: 40px;
	border-right: 1px solid #dc9dac;
	float: left;
	text-align: justify;
}

.oikea {
	width: 19%;
	padding-left: 20px;
	padding-top: 20px;
	float: right;
	line-height: 1.5;

}

.pinkki {
	color: #dc9dac;
}

.oikea img {
	width: 90%;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 1px 10px 6px 1px rgba(0, 0, 0, .1);
	margin-bottom: 20px;
}

.oikea b {
	font-size: 1.3em;
    font-family: 'Kavivanar', cursive;
	font-weight: lighter;
}

.ak {
	float: right;
	margin-top: 20px;
	margin-right: 10px;
}

.ak a {
    font-family: 'Parisienne', cursive;
	font-size: 1.5em;
	font-weight: lighter;
	color: rgba(66, 64, 73, 1);
	text-decoration: none;
}

.ak a:hover {
	color: #dc9dac;
}

/* copyt */

.footer {
	margin: 20px 30px 10px 0;
	text-align: right;
	color: rgba(255, 255, 255, .6);
	font-size: .7em;
}

.footer a {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.footer a:hover {
	color: rgba(255, 255, 255, 1);
}

/* hevosen sivu */

.vasenh {
	width: 62%;
	padding-right: 40px;
	border-right: 1px solid #dc9dac;
	float: left;
	text-align: justify;
}

.oikeah {
	width: 32%;
	padding-left: 20px;
	padding-top: 20px;
	float: right;
	line-height: 1.5;

}
.hevosenkuva {
	display: block;
	max-width: 90%;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 2px 10px 6px 1px rgba(0, 0, 0, .2);
	margin-bottom: 12px;
	clear: both;
}

.copy {
	font-size: .8em;
	color: rgba (0, 0, 0, .7);
}

.suku {
	border-collapse: collapse;
	width: 100%;
	line-height: 1.5;
	border-spacing: 5px;
	font-size: .9em;
	margin: 20px auto;
	background-color: rgba(220, 157, 172, .1);
}

.suku td {
	border: 2px solid #fff;
	padding: 5px 15px;
	width: 33%;
}

.lapset {
	margin: 10px auto;

}

.stats {
	width: 100%;
	padding: 15px 10px;
	background-color: rgba(220, 157, 172, .1);
	text-align: center;
	margin: 0 auto;
	margin-top: 50px;
	border: 1px solid #fff;
	line-height: 2;
}

.arvo {
	font-size: .8em;
	margin: 40px auto;
	line-height: 2;
}

.muu {
	width: 90%;
	margin: 20px auto;
	padding: 20px;
	padding-top: 50px;
	text-align: justify;
	clear: both;
}