@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700|Abel|Open+Sans+Condensed:300|Oswald:200|PT+Sans+Narrow|Hind|Abel|Catamaran|Josefin+Sans:100i,300,300i,400,400i,600,600i,700|Ubuntu+Condensed|Roboto:300,400|Source+Sans+Pro:300,300i,400');


@font-face {
    font-family: 'carolusRomanFont'; /*a name to be used later*/
    src: url('carolusr.ttf'); /*URL to font*/
}




@font-face {
    font-family: 'carolusi'; /*a name to be used later*/
    src: url('carolusi.ttf'); /*URL to font*/
}



html {
height: 100%;
}


body {
/*background-image: url(taustakuva.jpg);
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
background-color: #e3e4e1;
text-align: justify;
/*font-family: 'Josefin Sans', sans-serif;*/
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
line-height:23px;
color:#292825;
height: 100%;
text-shadow: 1px 1px #f5f6f3;
margin: 0;
font-weight: 300;
}


#ylapalkki {
width: 100%;
background: #261d1a;
height: 100px; 
}

#ylasisalto {
width: 100%;
max-width: 1000px;
margin: 0 auto;
height: 100px
}

#otsikko {
float: left;
width: 45%;
}

#otsikko h1 {
font-family: 'Cinzel Decorative', cursive;
text-transform: lowercase;
font-size: 60px;
color: #a6a48b;
font-weight: 100;
text-shadow: 1px 1px #000;
    font-size: 45px;
    margin-top: 40px;
}

#nav {
float: left;
width: 55%;
color: #a6a48b;
}


#nav ul {
width: 100%;
margin: 0 auto;
}

#nav ul li {
width: 23%;
float: left;
list-style: none;
text-align: center;
border-left: 2px groove #392f2c;
margin-top: 30px;
}


#nav ul li a{
font-size: 21px;
color: #a6a48b;
text-decoration: none;
font-family: 'Hind', sans-serif;
text-transform: uppercase;
text-shadow: 0 0 0 #000;
top: 30px;
float: left;
margin-left: 15px;
}

#nav ul li a:hover{
color: #d1c7c9;
text-decoration: underline;
}

span {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
float: left;
text-transform: none;
color: #d1c7c9;
}



.active a {
color: #8493ca;
top: 100px;
}





#container {
background: #eeeeee;
width: 100%;
max-width: 1000px;
margin: -50px auto 0 auto;
top: 0;
box-shadow: 0px 0px 3px rgba(0,0,0,.2);
}

#otsikkokuva {
/*background-image: url(vn_header.jpg);
width:1000px;
height: 265px;
margin: 0 auto;
margin-top: 40px;
-webkit-box-shadow:inset 0px 0px 0px 3px #928977;
-moz-box-shadow:inset 0px 0px 0px 3px #928977;
box-shadow:inset 0px 0px 0px 3px #928977;*/

    background-image: url(vn_headerkuva.jpg);
    /* object-fit: scale-down; */
    background-size: contain;
    width: 100%;
    /* max-width: 100%; */
    /* min-width: 100%; */
    /* min-height: 200px; */
    /* height: 500px; */
    background-repeat: no-repeat;
    /* margin: 0 auto; */
    /* margin-top: 40px; */
    /* -webkit-box-shadow: inset 0px 0px 0px 3px #928977; */
    -moz-box-shadow: inset 0px 0px 0px 3px #928977;
    /* box-shadow: inset 0px 0px 0px 3px #928977; */
    background-position: center top;
    background-size: 100% auto;
    min-height: 300px;
    
    background-size: cover;

}



#textarea {
padding: 45px;
}

h2 {
font-family: 'Cinzel Decorative', cursive;
text-transform: lowercase;
font-size: 30px;
color: #61504d;
font-weight: 100;
text-shadow: 1px 1px 2px #fff;
text-align: center;
margin-bottom: 40px;
}


h3 {
font-family: 'Hind', sans-serif;
font-size: 20px;
color: #61504d;
font-weight: normal;
text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
    margin-top: 40px;
    margin-left: 20px;
}

h4 {
font-family: 'Hind', sans-serif;
font-size: 18px;
color: #61504d;
font-weight: normal;
text-shadow: 1px 1px 2px rgba(255,255,255,0.7);
    line-height: 1.4em;
margin-top: 30px;
}


footer {
    max-width: 1000px;
    width: 100%;
height: 50px;
background:  #38302b;
border-top: 0px solid #e1ddd6;
font-family: 'Hind', sans-serif;
margin: 0 auto;
margin-bottom: 30px;
box-shadow: 0px 0px 3px #c9ccba;
}

#copytoikea p, 
#copytvasen p {
color:#a89f8d;   
text-shadow: 1px 1px #000000;
}

#copytoikea p{
float:right;
font-size:14px;
padding: 0 45px 0 0;
}


#copytvasen p {
text-align: left;
float:left;
font-size:19px;
line-height: 0.7em;
padding: 0 0 0 45px;
}

.taulukko {
width:100%;
margin:0px auto 0px auto;
border-collapse:collapse;
border-top:1px solid #b9aba6;
}

.taulukko td {
border-bottom:1px solid #b9aba6;
}


.td1 {
background: #38302b;
padding:10px 8px;
color:#e9e9e9;
letter-spacing:2px;
text-shadow: 0px 0px #f5f6f3;
}


.td2 {
padding:10px 8px;
text-shadow: 0px 0px #f5f6f3;
}


.td3 {
padding:10px 8px;
}


.td4 {
padding:10px 8px;
}


a {
color:#71920d;
text-decoration: underline;
}

a:hover {
color:#44442f;
text-decoration: none;
}




::selection {
  background: #a2b46b;
  color: #ffffff;
}
::-moz-selection {
  background: #a2b46b;
  color: #ffffff;
}
::-webkit-selection {
  background: #a2b46b;
  color: #ffffff;
}



.kehykset{
background: #55423b;
padding: 5px;
margin: 7px;
border: 0px solid #38302b;
box-shadow: 1px 1px 4px #62725b;
height:180px;
width:auto;}


.kehykset2{
background: #55423b;
padding: 5px;
margin: 7px;
border: 0px solid #38302b;
box-shadow: 1px 1px 4px #62725b;
height:220px;
width:auto;}


.kehykset3{
background: #55423b;
padding: 5px;
margin: 7px;
border: 0px solid #38302b;
box-shadow: 1px 1px 4px #62725b;
height:280px;
width:auto;}


.kehykset4{
background: #55423b;
padding: 5px;
margin: 7px;
border: 0px solid #38302b;
box-shadow: 1px 1px 4px #62725b;
height:310px;
width:auto;}


.ema,
.isa{
padding:5px 10px;
}




.kirja { 
border-radius:5px; 
font-size:10pt; 
margin:20px 0 20px 0; 
padding:20px 30px 20px 30px; 
border:0px solid #d2c4bf; 

}


.kirja strong { 
font-family:serif; 
color:#9a7461; 
font-size:13pt; 
margin-left:20px;
font-weight:500; 
}



.hevoslista {
width:100%;
line-height:20px;
font-size:15px;
border-collapse:separate;
text-shadow: 0px 0px 0px #000;
}


.lista {
width:33%;
list-style:none;
padding:17px;
border-bottom:1px solid #d2c4bf;
}

.lista tr:last-child() {
border-bottom:0px solid #ddd3ca;
}


.listavika {
width:33%;
list-style:none;
padding:17px;

}


.hevoslista a {
font-size:16px;
font-weight: 400;
text-decoration: none;
text-shadow: 0px 0px 0px #fff;
letter-spacing: -1px;
}

.hevoslista a:hover {
color:#d3bebe;
text-decoration: none;
text-shadow: 0px 0px 0px #fff;
}




.kuva {
border: 3px solid #fff; 
box-shadow: 1px 1px 7px #696159;
margin-right:15px;
margin-top:0px;
width:90px;
height:90px;
}





.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.4);
}

.lightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
border:10px solid #55423b;
}

.lightbox:target {
	outline: none;
	display: block;
}





/* Hevossivu */



#hevossivu #textarea {
    padding: 45px 0;
}



#hevossivu p {
    padding: 0 45px;
}

#hevossivu h2 {
    margin: 0;
    padding-left: 0;
    padding-top: 65px;
    padding-bottom: 30px;
    font-size: 30px;
}

#hevossivu .paaotsikko {
    font-size: 40px;
    text-align: center;
    padding: 20px 45px 40px 45px;
}

#hevossivu .taulukko .td3 {
    width: calc(33% - 45px) !important;
    padding: 30px 0;
}

#hevossivu .taulukko.jalkelaiset .td3:nth-child(2), #hevossivu .taulukko.jalkelaiset .td3:nth-child(3), #hevossivu .taulukko.jalkelaiset .td3:nth-child(4)  {
    width: 28% !important;
}

#hevossivu .taulukko.jalkelaiset .td3:nth-child(1) {
    width: 15%;
}




#hevossivu .taulukko .sijat {
    background-color: #eee;
}
#hevossivu .taulukko.jalkelaiset .td3 {
    padding: 10px 8px;
}
#hevossivu .taulukko .td3:first-child {
    padding-left: 45px;
}
#hevossivu .taulukko .td3:last-child {
    padding-right: 45px;
}

#hevossivu .taulukko {
    border-top: 1px solid #f8f8f8;
    background-color: #f7f7f7;
}

#hevossivu .taulukko td {
        border-bottom: 1px solid #eaeaea;
}

#hevossivu .td1 {
    background-color: transparent;
    padding: 10px 8px 10px 45px;
    color: #55423b;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0px 0px #f5f6f3;
}

#hevossivu .ema, #hevossivu .isa {
    padding: 8px 45px;
}

p.vhevo {
    margin-bottom: -30px;
    text-align: right;
}

#hevossivu .taulukko .sijat {
    background-color: transparent;
    border-bottom: 0;
    padding-top: 30px;
    text-align: left !important;
    float: left;
    padding-left: 45px;
    font-style: italic;
    font-weight: 600;
}

#hevossivu a {
    color: #739200;
    text-decoration: none;
}


/*
#hevossivu .taulukko.jalkelaiset {
    width: 70%;
    margin-left: 0;
}
#hevossivu .taulukko.jalkelaiset td.td3 {
    width: auto !important;
    padding-top: 0;
    padding-bottom: 10px;
}

#hevossivu .taulukko.jalkelaiset, #hevossivu .taulukko.jalkelaiset td.td3 {
    background-color: transparent;
    border-top: 0;
    border-bottom: 0;
}*/

@media only screen and (max-width: 1000px) {
    #otsikkokuva {
            height: 300px;
    min-height: 0;
    background-size: contain;
    background-size: auto 100%;
    }
    #container {
        margin-top: 0;
    }
    
    #nav {
        padding-right: 45px;
         width: calc(55% - 45px);
    }
}



@media only screen and (min-width: 1300px) {
    #otsikkokuva {
        min-height: 400px;
    }
}