@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Beau+Rivage&family=WindSong:wght@400;500&family=DM+Serif+Display&display=swap');

* {box-sizing: border-box;}

html {
}
body {
    background-color:#00353b;
    font-family: "Source Serif 4", serif;
    font-optical-sizing: auto;
    font-weight:300;
    color:#D7DEDB; 
    font-size:14px;
    letter-spacing:0.5px;
    line-height: 20px; 
    padding: 0px;
    min-height: 83vh;
    margin: 0;
    position: relative;
}
body::after {
    content: '';
    display: block;
    height: 50px;
    /* Set same as footer's height */
}
body a {
    color:#e6b75d;
    text-decoration:none;
}

#navbar {
    width: 100%;
    top: 0;
    padding: 0px;
    overflow: hidden;
    background-attachment: fixed;
    background-image: url('https://lasikuu.net/elitehof/k/10bg.jpg');
    background-size: cover;
    opacity:0.9;
    transition: 0.4s;
    position: fixed;
    z-index: 99;
    font-family: 'DM Serif Display', serif;
}

#logo {
    float:left;
    padding:40px 50px;
    font-size: 32px;
    font-weight: normal;
    transition: 0.4s;
    color:#fff;
    text-shadow:1px 1px 2px #000;
}

#navbar a {
  float: left;
  text-align: center;
  padding: 40px;
  text-decoration: none;
  font-size: 16px; 
  color:#bbb;
  transition: 0.5s;
  border-right:1px solid #bbb;
  text-transform:uppercase;
}


#navbar a:hover {
    color:#e6b75d;
  background-color: rgba(0, 0, 0, 0.5);
}

#navbar-right {
  float: right;
}
.sisalto {
	width: 65%;
	margin: 160px auto 80px auto;
	padding: 0;
	border-width: 0px 0px 0px 0px;
	border-color: brown;
	border-style: solid;
}
.footer {
    margin:0 auto;
    width:100%;
    opacity:0.9;
  background-attachment: fixed;
  background-image: url('https://lasikuu.net/elitehof/k/10bg.jpg');
  background-size: cover;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height:50px;
  text-align:center;
    font-family: 'DM Serif Display', serif;
  font-size: 14px; 
  text-transform:uppercase;
  font-weight: normal;
}
.etukuva {
    margin:0 20px 20px 20px;
    border-radius:7px;
    box-shadow:1px 1px 3px #022f36;
}
.nimmari {
    font-family: 'Beau Rivage', cursive;
    font-size:35px;
    letter-spacing:1px;
    padding:0 5px;
}






/* -------------------- PONILISTA -------------------- */

    .grid-container {
        margin:40px auto 10px auto;
      display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      gap: 10px;
    }

    .grid-item {
      display: block;
      text-align:center;
      padding: 20px;
    background-color:#004249;
    color:#D7DEDB; 
      border-radius: 8px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .grid-item img {
        border-radius:50%;
        margin-bottom:20px;
    }

    .grid-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    background-color:#00474f;
    }

    .grid-item h3 {
      margin: 0;
    color:#e6b75d;
    }

    .grid-item p {
      margin: 0;
      font-size:13px;
    }

.ika {
    font-size:13px;
    padding:0 2px;
    font-style:italic;
    opacity:0.5;
}



/* -------------------- PONISIVU -------------------- */

.vh {
    margin:-10px auto -25px auto;
    padding-left:40px;
	color:#e6b75d;
}

.reunat {
    margin:20px 10px 0px 10px;
    border-radius:7px;
    box-shadow:1px 1px 4px #002025;
}
.reunat:hover {
  opacity:0.9;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.5s;
    
}

.ptflex {
    margin:55px auto 10px auto;
    width:100%;
    display:flex;
    flex-direction: row;
    align-items: center;
}
.ptflex-item {
}
.ptflex-item:first-child {
    flex:1.5;
    padding-right:25px;
}
.ptflex-item:last-child {
    flex:1;
    padding-left:25px;
    text-align:center;
}
.ptflex-item:last-child img {
    margin-top:0px;
    float:right;
    border-radius:7px;
    box-shadow:1px 1px 4px #002025;
}
.ptflex-item:last-child img:hover {
    opacity:0.95;
    transition:.2s ease-out;
}

.pt-table {
    width:100%;
    border-collapse:separate;
}
.pt-table th, .pt-table td {
    text-align:left;
    padding:6px 12px;
    
}
.pt-table th {
  color:#ccc;
    width:40%;
    border-radius:6px;
    background-color:#004249;
  font-weight:600;
}
.geno {
    font-style:italic;
}
.omistaja {
    padding:0 2px;
    color:#517276;
    font-size:12px;
}





.sukutaulu {
    width:100%;
    border-collapse:collapse;
}
.sukutaulu td {
    line-height:1.3;
    padding:5px 10px;
    text-align:center;
}
.sukutaulu td a {
	color:#e6b75d;
    text-decoration:none;
    font-weight:normal;
}
.sukutaulu td small {
    color:#517276;
    font-weight:normal;
}
.sukutaulu td small a {
    color:#517276;
}
.i {border-bottom:2px solid #517276;}
.ii {border-bottom:2px solid #517276;}
.ie {border-left:2px solid #517276;}
.e {}
.ei {border-bottom:2px solid #517276;border-left:2px solid #517276;}
.ee {}

.sukutaulu4 {
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
}
.sukutaulu4 td {
    line-height:1.1;
    padding:5px 10px;
    text-align:center;
}
.sukutaulu4 td a {
	color:#e6b75d;
    text-decoration:none;
    font-weight:normal;
}
.sukutaulu4 td small {
    color:#517276;
    font-weight:normal;
}
.sukutaulu4 td small a {
    color:#517276;
}

.info {
    background-color:#004249;
    color:#ccc;
    font-size:11px;
    padding:2px 4px;
    border-radius:3px;
    margin:0 2px;
    
}


.flex-container {
    margin:20px auto;
    width:100%;
    display:flex;
}
.flex-item {
    flex:1;
    padding:0 30px;
}
.flex-item h3 {
    margin:0 30px;
}
.valkka {
    width:100%;
    margin:20px auto;
    border:1px solid #014b53;
    border-radius:3px;
    padding:8px 24px;
}


/* -------------------- LISTA -------------------- */

.lista {
    margin:20px auto;
    width:100%;
    border-collapse:separate;
}
.lista tr:hover {
  background-color:#002e33;
  transition: 0.5s;
    
}
.lista th, .lista td {
    padding:6px 10px;
    text-align:left;
    border-radius:6px;
}
.lista th {
  color:#ccc;
    background-color:#004249;
  font-weight:600;
}
.lista td {
    
}
.pvm {width:12%;}
.kasv {width:26%;} .kasv a {font-weight:600;} .kasv a:hover {text-decoration:none;}
.isa{width:22%;} .isa a {text-decoration:none;}
.ema{width:22%;} .ema a {text-decoration:none;}
.koti{width:18%;}

.kasvlista {
    margin:20px auto;
    width:100%;
    border-collapse:separate;
}
.kasvlista tr:hover {
  background-color:#002e33;
  transition: 0.5s;
}
.kasvlista td {
    padding:8px 10px;
    text-align:left;
    border-radius:6px;
    background-color:#004249;
}


/* -------------------- MERIITIT -------------------- */

#meriitit {
  text-align: center;
    margin:30px auto 40px auto;
    color:#00353b;
}

#meriitit a {
    font-family: 'DM Serif Display', serif;
    background-image:url('https://lasikuu.net/elitehof/k/meriittibg.png');
    background-position: center;
    background-repeat: no-repeat;
  margin:0 5px;
  display:inline-block;
  font-size:17px;
  letter-spacing:0px;
  width:120px;
  height:120px;
  line-height:120px;
  border-radius:50%;
  background-color:#e6b75d;
  text-align:center;
  font-weight:bold;
  text-decoration:none;
  transition:all 1.2s ease;
    color:#333;
}

#meriitit a:hover {
    opacity:0.8;
    transition:.2s ease-out;
    }



















/* -------------------- MUUT -------------------- */

.boksi {
    width:100%;
    margin:30px auto;
    border:3px solid #ccc;
    border-radius:3px;
    display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.boksi-item {
    flex:1;
    padding:10px 30px;
}


/* -------------------- MOBIILI -------------------- */

@media (max-width: 1000px) {
    .sisalto {
        width:90%;
    }
  .ptflex {
      width:100%;
    flex-direction: column;
  align-items: stretch;
    }
    .ptflex-item:last-child img {
        float:none;
    }
    .pt-table {
        width:100%;
        margin-bottom:30px;
    }
    .grid-container {
    grid-template-columns: 1fr 1fr;
}
}





















/* -------------------- TOOLTIP -------------------- */

.tooltip {
  position: relative;
  display: inline;
  cursor: help;
  font-size:12px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  font-size:13px;
}

.tooltiptext {
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* -------------------- SCROLLBAR JA MAALAUS -------------------- */

/* width */
::-webkit-scrollbar {
    width: 13px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #00353b;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #517276; 
    border-radius:4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #62888c; 
}

::-moz-selection { background-color: #62888c; }
::selection { background-color: #62888c; }


/* -------------------- HOOT -------------------- */

h1 {
    font-family: 'DM Serif Display', serif;
	font-size: 34px;
	color:#e6b75d;
}

h2 {
    margin:35px;
    font-family: 'DM Serif Display', serif;
	font-size: 22px;
	text-align: left;
	letter-spacing:1px;
	color:#e6b75d;
}
h3 {
    font-family: 'DM Serif Display', serif;
	font-size: 15px;
	font-weight:500;
	color:#ccc;
    
}