@import url('https://fonts.googleapis.com/css2?family=Carattere&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poltawski+Nowy:ital,wght@0,400..700;1,400..700&display=swap');

html, body {
    background: #D8CCA3 url(../k/bg01.png) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 0;
    margin: 0;
    height: 100%;
}
a, a:visited {
    color: #4A5A6A;
    text-decoration: none;
}
a:hover, a:active {
    color: #c3603a;
    text-decoration: underline;
}
pre {
    font-family: 'Open Sans', sans-serif;
}
#wrapper {
    margin: 0;
    width: 100%;
    max-width: 1495px;
    display: flex;
    flex-direction: row;
}
.sivupalkki {
    margin: 0;
    width: 314px;
    height: 100%;
    float: left;
    display: block;
    position: fixed;
    z-index: 1;
    background: url(../k/paakuva1.png) top left no-repeat;
}
.otsikko {
    margin: 330px 0 0 0;
    display: inline-block;
    padding: 6px 0 0 0;
    height: 60px;
    width: 100%;
    max-width: 314px;
    background: #4c4632 url(../k/bg02.png);
    text-align: center;
    border-top: 12px solid #c7be9a;
    border-bottom: 12px solid #c7be9a;
}
.otsikko span {
    font-size: 40px;
    font-family: "Poltawski Nowy", serif;
    color: #EDDFB3;
    text-transform: none;
    font-variant: small-caps;
    letter-spacing: .05em;
    font-weight: normal;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
}
nav {
    width: 100%;
    max-width: 314px;
    float: left;
    margin: 0;
    padding: 0;
}
nav ul {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    text-align: left;
}
nav li {
    display: block;
    margin: 5px 0;
}
nav li a, nav li a:visited {
    display: block;
    background-color: rgba(76, 70, 50, 0.2);
    padding: 10px 45px;
    font-family: "Poltawski Nowy", serif;
    font-size: 10pt;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 00.3s 5s ease-out; transition: all 0.3s ease-out;
}
nav li a:hover, nav li a:active {
    background-color: rgba(76, 70, 50, 0.5);
    color: #EDDFB3;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
}
.sisalto {
    display: block;
    background: #ddd5c1 url(../k/bg03.png) top right no-repeat;
    width: 83%;
    margin: 0 auto 0 314px;
    padding: 35px 55px;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    font-weight: 400;
    line-height: 1.6em;
    color: #50443b;
    float: right;
    text-shadow: none;
    border-bottom: 15px solid #c7be9a;
    border-top: 10px solid #c7be9a;
    border-radius: 0 0 10px 10px;
}
#clear {
    clear: both;
}
h1 {
    font-family: "Carattere", cursive;
    font-size: 31pt;
    font-variant: normal;
    font-weight: 500;
    font-style: normal;
    color: #4c4632;
    padding: 0 0 0 35px;
    margin: .6em 0 .35em 0;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
h2 {
    font-family: "Poltawski Nowy", serif;
    font-weight: normal;
    font-style: italic;
    font-size: 18pt;
    color: #5C5A44;
    margin: 40px auto 10px auto;
    padding: 0 0 5px 35px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
footer {
    margin: 0 79% 0 auto;
    width: 100%;
    max-width: 1450px;
    text-align: right;
    padding: 20px 0 50px 0;
    color: rgba(76, 70, 50, 0.8);
    font-family: "Poltawski Nowy", serif;
    text-transform: uppercase;
    font-size: 7pt;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.3em;
}

/* ========== HEVOSEN SIVUT ========== */

.suku {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}
.suku td {
    width: 33%;
    background: rgba(255, 255, 255, 0.27);
    padding: 10px 20px;
    border-radius: 10px;
    text-align: left;
    line-height: 1.4em;
    text-transform: none;
}
.suku a {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.08);
}
.suku small {
    display: inline-block;
    font-size: 11px;
    line-height: 1.4em;
    color: #827469;
}
.meriitit {
    display: inline-block;
    font-family: "Poltawski Nowy", serif;
    font-variant: normal;
    font-style: normal;
    font-weight: 400;
    margin: 0 0 0 60px;
    font-size: 16px;
    color: #5C5A44;
}
.palkinto {
    display: inline-block;
    width: 150px;
    text-align: center;
    border-left: 1px dashed #ada989;
    border-top: 1px dashed #ada989;
    margin: 0 9px 14px 9px;
    padding: 12px;
    font-size: 11px;
    line-height: 1.4em;
}
.palkinto b {
    font-size: 13px;
}
.heppaloota {
    padding: 10px 0 0 0;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.perustiedot {
    width: 100%;
    height: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}
.perustiedot th {
    width: 15%;
    text-align: right;
    font-family: "Poltawski Nowy", serif;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    text-transform: lowercase;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.27);
    text-shadow: 1px 1px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}
.perustiedot td {
    width: 35%;
    padding-left: 8px;
}
.ponikuva {
    display: block;
    text-align: left;
    padding-right: 40px;
}
.ponikuva img {
    height: 220px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    filter: sepia(25%);
    -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 00.3s 5s ease-out; transition: all 0.3s ease-out;
}
.ponikuva img:hover {
    filter: sepia(0%);
    -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
}
.ponikuva2 {
    display: block;
    text-align: right;
    padding-left: 40px;
}
.ponikuva2 img {
    height: 220px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    filter: sepia(25%);
    -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 00.3s 5s ease-out; transition: all 0.3s ease-out;
}
.ponikuva2 img:hover {
    filter: sepia(0%);
    -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
}
details {
    padding: 10px 20px 0 20px;
}
.varsat {
    width: 100%;
    border-collapse: collapse;
}
.varsat tr {
    border-bottom: 1px dashed #ada989;
}
.varsat tr:last-child {
    border-bottom: none;
}
.varsat td {
    padding: 4px 8px;
    font-size: 12px;
}
.varsat th {
    text-align: left;
}
.vp {
    font-weight: normal;
    padding-left: 15px;
    font-size: 12px;
    font-style: italic;
}
.galleria {
    width: 100%;
    margin: 30px auto 0 auto;
    text-align: center;
    border-top: 1px dashed #ada989;
    padding: 20px 0 0 0;
}
.galleria img {
    height: 170px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    filter: sepia(25%);
    -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 00.3s 5s ease-out; transition: all 0.3s ease-out;
    margin: 10px;
}
.galleria img:hover {
    filter: sepia(0%);
    -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
}

/* ========== HEVOSEN KISAT (MODAL) ========== */

.modal, .modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 3%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #e8e1c5;
    margin: auto;
    padding: 30px 40px;
    width: 100%;
    max-width: 450px;
    max-height: 700px;
    overflow: auto;
    border-radius: 30px;
    font-size: 12px;
}
.modal-content2 {
    background-color: #e8e1c5;
    margin: auto;
    padding: 30px 40px;
    width: 100%;
    max-width: 680px;
    max-height: 700px;
    overflow: auto;
    border-radius: 30px;
    font-size: 13px;
}
.close, .close2 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus, .close2:hover, .close2:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.nappi {
    background-color: rgba(76, 70, 50, 0.1);
    border: none;
    color: #4A5A6A;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 10px;
    font-family: "Poltawski Nowy", serif;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.08);
}
.nappi:hover {
    color: #c3603a;
}

/* ========== HEVOSLISTAUS ========== */

.heppalista {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}
.heppalista > div {
    width: 237px;
    height: 70px;
    margin: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 10px;
}
.heppalista span {
    display: block;
    float: left;
    font-size: 12px;
    line-height: 1.5em;
    max-height: 70px;
    max-width: 170px;
}
.heppalista a {
    font-size: 14px;
    font-family: "Poltawski Nowy", serif;
    font-style: italic;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.08);
}
.heppalista img {
    display: block;
    float: left;
    margin: 0 10px 0 0;
    height: 70px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* ========== TEKSTIN MAALAUS ========== */

::selection {
	background: rgba(0, 0, 0, 0.6); /* WebKit/Blink Browsers */
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: rgba(0, 0, 0, 0.6); /* Gecko Browsers */
	color: #fff;
	text-shadow: none;
}