@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz@6..12&family=Old+Standard+TT&family=Playfair+Display&family=Rufina&display=swap');

a { transition: all .2s linear; }
a:link:not(.btn) { color: #536823; text-decoration: underline; }
a:visited:not(.btn) { color: #536823; text-decoration: underline; }
a:hover:not(.btn) { color: #1c2012; }
a:active:not(.btn) { color: #1c2012; }

::selection {
    color: lightgray;
    background-color: #92AA83;
}

/* Main layout */

body {
    background-color: #e8e3ce;
    font-family: 'Nunito Sans', sans-serif;
    line-height: 2;
    color: #161616;
}

.navbar-brand, .navbar-brand a:link, .navbar-brand a:hover, .navbar-brand a:visited, .navbar-brand a:active {
    font-family: 'Rufina', serif;
    font-size: 30pt;
    font-size: 1.8em;
    background-image: linear-gradient(to left, #289a11, #091f0b) !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
    text-decoration: none !important;
}

.color-green {
    color: #104730;
}

.punline {
    color: #fff;
    background-color: #92AA83;
    padding: 10px 0;
}

.navbar-light {
    background-color: #D0C59A !important;
}

.navbar {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.custom-width {
    width: 75% !important;
    max-width: 1200px;
}

.nav-item a {
    font-size: 15pt;
    text-transform: uppercase;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
    border-bottom: 3px solid transparent;
    text-decoration: none !important;
}

.nav-item a:link, .nav-item a:visited {
    color: #464E47;
    border-bottom: 3px solid transparent;
}

.nav-item a:hover, .nav-item a:active {
    color: #FF8200;
    border-bottom: 2px solid #ff8200;
}

.shrink {
    padding-top: .1rem !important;
    padding-bottom: .1rem !important;
    transition: all .2s linear;
}

.header {
    margin: 0 auto;
    max-height: 350px;
    display: block;
    width: 100%;
    max-width: 1920px;
    background-image: url('../img/image_cover.jpg');
    background-size: cover;
    background-position: 50% 50%;
}

.text-background {
    background: rgba(255, 130, 0, 0.3);
}

.textbox {
    background-color: #e8e3ce;
    padding: 60px;
}

footer {
    margin: 20px auto;
}

.nav-tabs, .nav-tabs>.nav-item>.nav-link {
	border: 1px solid transparent;
}

.nav-tabs .nav-item .active:link {
	background: none;
	color: #104730;
	border: 1px solid #e8e3ce;
}

.nav-tabs .nav-link:link {
	color: #104730;
}

.nav-tabs .nav-item .nav-link.active {
    background: rgba(245, 245, 245, 0.6);
    border: 1px solid #d3d3d3;
	border-radius: 5px;
}

.nav-tabs .nav-item .nav-link:hover, .nav-tabs .nav-item .nav-link:active {
	color: #091f0b;
	background: rgba(245, 245, 245, 0.6);
    border: 1px solid #d3d3d3;
	border-radius: 5px;
}

.table td {
    background: rgba(245, 245, 245, 0.6) !important;
    border: 1px solid #d3d3d3 !important;
	border-radius: 5px !important;
}

.table th {
    background: rgba(245, 245, 245, 1) !important;
    border: 1px solid #d3d3d3 !important;
	border-radius: 5px !important;
}

@media (max-width: 991px) {
	.custom-width {
	  width: 100% !important;
	}
    .textbox {
        padding: 5px;
    }
}

/* Text styles */

hr {
    margin-top: 50px;
    overflow: visible;
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -1.1em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: #e8e3ce;
}

.text-small {
    font-size: 80%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Old Standard TT', serif;
    color: #104730;
}

/* Horse page */

.hevosen {
	opacity:1.0;
	margin: 5px; 
	border: 5px solid #fff; 
	box-shadow: 0px 0px 19px 1px rgba(0, 0, 0, 0.2);  
	text-align: center;
	transition: .4s;
}

.hevosen:hover {
    opacity:0.9;
}

.hevosen2 {
	opacity: 1.0;
	max-width: 300px;
	height: auto;
	margin: 5px;
	border: 5px solid #fff; 
	box-shadow: 0px 0px 19px 1px rgba(0, 0, 0, 0.2); 
	text-align: center;
	transition: .4s;
}

.hevosen2:hover {
    opacity:0.9;
}

.sukutaulu {
    width: 100%;
    margin: 30px auto;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    border-collapse: separate;
}
.sukutaulu td {
    width: 33%;
    padding: 8px 25px;
    background-color: rgba(245, 245, 245, 0.6);
    border: 1px solid #d3d3d3;
	border-radius: 5px;
}

.listauskuva { object-fit: cover; border: 2px solid #fff; box-shadow: 1px 1px 8px darkgrey; width: 83px; height: 55px; }