@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellefair&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

img.main { border: 1px solid #634b33; padding: 3px; width: calc(100% - 8px); opacity: 0.6; transform: scale(1); transition-duration: 0.3s; }
img.main:hover { opacity: 1; transform: scale(0.9); transition-duration: 0.3s; }

img.gallery { border: 1px solid #634b33; padding: 3px; margin: 3px 0px; opacity: 0.5; transform: scale(1); transition-duration: 0.3s; }
img.gallery:hover { opacity: 1; transform: scale(0.9); transition-duration: 0.3s; }

hr { border-top: 0px; border-image: linear-gradient(to right, #634b33) 1; margin: 0; width: 50%; }

::-moz-selection { color: #ffffff; background: #947c65; }
::selection { color: #ffffff; background: #947c65; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #634b33; }
::-webkit-scrollbar-thumb { background: #947c65; }

html { margin: 0; height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; background: url(k/bg.png) fixed; background-position: center center; background-size: cover; background-repeat: no-repeat; }

div.header { display: inline-block; position: relative; float: left; width: 80%; margin: 0; padding: 2% 10% 3% 10%; background-color: transparent; overflow: hidden;
font-family: lavishly yours; font-size: 92px; text-align: center; text-shadow: 0px 0px 6px #000000; color: #ffffff; }

div.container { display: block; position: relative; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0; background-color: transparent; overflow: hidden;
border-top: 25px solid rgba(99, 75, 51, 0.5); border-bottom: 25px solid rgba(99, 75, 51, 0.5); border-radius: 80px; }

	div.full { display: inline-block; position: relative; float: left; width: 90%; margin: 0; padding: 1% 5%; background-color: rgba(0, 0, 0, 0.8); overflow: hidden; }
	div.semi { display: inline-block; position: relative; float: left; width: 100%; margin: 0; padding: 0; background-color: rgba(99, 75, 51, 0.7); overflow: hidden; }
	div.bottom { display: inline-block; position: relative; float: left; width: 98%; margin: 0; padding: 1%; background-color: rgba(0, 0, 0, 0.8); overflow: hidden; }

	div.footer { display: inline-block; position: relative; float: right; width: 60%; margin: 0; padding: 2% 20%; background-color: transparent; overflow: hidden; }
	div.copy { display: inline-block; position: relative; float: left; width: 50%; margin: 0; padding: 0; background-color: transparent; overflow: hidden; flex-wrap: wrap;
	font-family: open sans; font-size: 12px; color: #888888; }

	div.images { display: inline-block; position: relative; float: right; width: 30%; margin: -3% 0 2% 5%; padding: 0; background-color: transparent; overflow: hidden;
	text-align: center; }

	div.half { display: inline-block; position: relative; float: left; width: 50%; margin: 0; padding: 0; background-color: transparent; overflow: hidden; flex-wrap: wrap; }
	div.four { display: inline-block; position: relative; float: left; width: 25%; margin: 0px 0px 15px 0px; padding: 0; background-color: transparent; overflow: hidden;
	flex-wrap: wrap; }

	div.left { display: inline-block; position: relative; float: left; width: 45%; margin: 0; padding: 0 5% 0 0; background-color: transparent; overflow: hidden;
	flex-wrap: wrap; }
	div.right { display: inline-block; position: relative; float: left; width: 50%; margin: 0; padding: 0; background-color: transparent; overflow: hidden; flex-wrap: wrap; }

div.one { display: inline-block; margin: 1px 1px 15px 1px; padding: 0% 1% 1% 1%; width: calc(98% - 4px); background-color: transparent; border: 1px solid #634b33;
text-align: center; float: left; flex-wrap: wrap; }
div.two { display: inline-block; margin: 1px 1px 15px 1px; padding: 0% 1% 1% 1%; width: calc(48% - 4px); background-color: transparent; border: 1px solid #634b33;
text-align: center; float: left; flex-wrap: wrap; }
div.three { display: inline-block; margin: 1px 1px 15px 1px; padding: 0% 1% 1% 1%; width: calc(31.33% - 4px); background-color: transparent; border: 1px solid #634b33;
text-align: center; float: left; }

	.progress-bar { height: 6px; width: calc(100% - 6px); background-color: #634b33; overflow: hidden; position: relative; border-left: 3px solid #634b33;
	border-right: 3px solid #634b33; } + .progress-bar { margin-top: 2rem; }
	.bar { width: 0; height: 100%; background-color: #947c65; background-image: linear-gradient(-45deg, rgba(99, 75, 51, .4) 25%, transparent 25%, transparent 50%,
	rgba(99, 75, 51, .4) 50%, rgba(99, 75, 51, .4) 75%, transparent 75%, transparent); background-size: 30px 30px; animation: move 2s linear infinite;
	box-shadow: 2px 0 10px inset rgba(0,0,0,0.2); transition: width 2s ease-out; }

table.perustiedot { display: table; position: relative; float: left; width: 65%; margin: 25px 0px; padding: 0; background-color: transparent; font-family: open sans;
font-size: 14px; text-align: left; }

	td.kys { display: table-cell; width: 20%; font-weight: 600; padding: 15px 0px; color: #947c65; }
	td.vas { display: table-cell; width: 80%; font-weight: 400; padding: 15px 0px; color: #aaaaaa; }

table.sukutaulu { display: table; position: relative; float: left; width: 100%; margin: 0; padding: 0; background-color: transparent; font-family: open sans; font-size: 10px;
text-align: left; color: #cccccc; }

	td.suku { display: table-cell; width: 30%; padding: 15px 25px; }
	td.isosuku { display: table-cell; width: 40%; padding: 15px 25px; }

table.hevoset { display: table; position: relative; float: left; width: 100%; margin: 0; padding: 0; background-color: transparent; font-family: open sans; font-size: 13px;
color: #aaaaaa; }

	td.nimi { display: table-cell; width: 30%; padding: 10px; }
	td.rotu { display: table-cell; width: 35%; padding: 10px; }
	td.laji { display: table-cell; width: 30%; padding: 10px; }
	td.polvi { display: table-cell; width: 5%; padding: 10px; }

table.kasvatus { display: table; position: relative; float: left; width: 100%; margin: 0; padding: 0; background-color: transparent; font-family: open sans; font-size: 11px;
font-weight: normal; color: #aaaaaa; }

	td.aika { display: table-cell; width: 10%; padding: 0; font-family: bellefair; font-size: 18px; text-align: center; line-height: 1.5; color: #ad9984; }
	td.varsa { display: table-cell; width: 86%; padding: 2%; text-align: left; line-height: 2; }

.tab { overflow: hidden; background-color: transparent; border: none; float: center; margin: 5px auto; text-align: center; clear: both; }

	.tab button { float: left; color: #634b33; background-color: transparent; font-family: open sans; font-size: 14px; padding: 5px 25px 5px 0px; }
	.tab button:hover { color: #947c65; }
	.tablinks { float: center; background-color: none; border: none; }
	.tabcontent { display: none; background-color: transparent; padding: 0px; }

tr.color { background-color: transparent; } tr.color:hover { background-color: rgba(99, 75, 51, 0.5); }

h1 { margin: 1%; padding: 0; color: #dbc4ad; font-family: lavishly yours; font-size: 48px; font-weight: normal; text-align: left; }
h2 { margin: 5% 0 0 0; padding: 0px 0px 5px 25px; color: #dbc4ad; font-family: bellefair; font-size: 28px; font-weight: normal; text-align: left; text-transform: uppercase; }
h3 { margin: 10px 25px; padding: 0; color: #ad9984; font-family: open sans; font-size: 12px; font-weight: normal; text-align: left; }
h4 { margin: 0px; padding: 25px; color: #ad9984; font-family: open sans; font-size: 24px; font-weight: 300; text-align: left; text-transform: uppercase; clear: both; }

h5 {
margin: 0;
padding: 5px;
color: #000000;
font-family: open sans;
font-size: 13px;
font-weight: 400;
text-align: left;
border-bottom: 1px solid #dddddd;
width: 100%;
clear: both;
}

p { font-family: open sans; font-size: 13px; font-weight: 400; text-align: justify; line-height: 2; color: #aaaaaa; }
	
	b, strong { font-weight: 600; color: #947c65; }
	m, mini { font-size: 11px; color: #524232; padding: 0px 5px; letter-spacing: 1px; }
	p.porr { display: block; font-family: open sans; font-size: 14px; text-align: center; padding: 0px 0px 3px 0px; line-height: 1; }

a:link, a:visited { color: #947c65; text-decoration: none; }

	a:hover { color: #dbc4ad; text-decoration: underline; }
	a.suku:link, a.suku:visited { font-size: 14px; padding: 0px 10px; color: #dbc4ad; } a.suku:hover { color: #947c65; }
	a.varsa:link, a.varsa:visited, a.varsa:hover { font-size: 14px; padding: 0px 5px 0px 0px; }

ul.nav { position: relative; background-color: transparent; list-style: none; width: 100%; margin: 0; padding: 0; text-align: center; text-decoration: none;
font-family: open sans; font-weight: normal; font-size: 20px; float: left; height: 125px; }

	ul.nav li { display: inline; position: relative; padding: 0; top: 0; vertical-align: top; }
	ul.nav a { display: inline-block; position: relative; top: 0; background-color: rgba(0, 0, 0, 0.6); border-radius: 0px 0px 25px 25px; padding: 25px 50px; margin: 0px 5px;
	text-decoration: none; text-transform: uppercase; font-family: bellefair; font-weight: normal; color: #ffffff; transition-duration: 0.3s; }
	ul.nav a:hover { padding: 50px; margin: 0px 5px; color: #ad9984; transition-duration: 0.3s; }

@media all and (max-width: 1600px) {

	h1 { margin: 0 1%; }

	ul.nav { width: 60%; }
}

@media all and (max-width: 1000px) {

	div.half { width: 100%; }

	h1 { display: none; }

	ul.nav { width: 100%; }
}