@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Paprika&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
--green:#061e15;
--gold:#b98a3d;
--gold2:#d6aa5e;
--gold-soft: #E9D8BA;
--ink:#171717;
--text:#F9F8F7;
}

html,body{ background:#0C3424 url(https://ikitiera.com/cf/img/bg2.jpg);font-family:Lato;color:var(--#DED9D3); line-height: 1.8; font-size: 16px; text-align:justify; }

body{display:flex;justify-content:center;align-items:flex-start}

a:link, a:active, a:visited { color:var(--gold); text-decoration:none; }
a:hover { color:var(--gold2); }

.frame{width:100%;background:#0C3424 url(https://ikitiera.com/cf/img/bg2.jpg);overflow:hidden;}
.page{width:90%; max-width: 1200px; margin: 0 auto;}

.top{position:relative;background:radial-gradient(circle at 50% 0,rgba(22,68,42,.55),transparent 36%),linear-gradient(180deg,#071e15,#04120d);border-bottom:1px solid var(--gold); border-top:1px solid var(--gold);  margin: 80px 0 0 0; height: 50px; padding: 0; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.nav-toggle-label{display:none;cursor:pointer;color:#f4efe5;font-size:24px;line-height:50px;text-align:right;}

.nav {width: 90%; max-width:1200px; margin: 0 auto; padding: 0 0 30px 0; text-align:center; }
.nav-logo-mobile{display:none;}
.nav-menu{display:flex;align-items:center;justify-content:center;gap:0;}

.nav a{position:relative;text-decoration:none;text-transform:uppercase;font-family:DM Serif Display,serif;font-size:15px;letter-spacing:2px;color:#f4efe5;transition:.28s ease; padding: 10px 40px;}

.nav a:hover {color:var(--gold2);text-shadow:0 0 10px rgba(214,170,94,.45); transform:translateY(-2px); }

.nav img { margin: -70px 0 -70px 0;   filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); }

.hero, .hero-horse {width: 100%; background: url("https://ikitiera.com/cf/img/bg.jpg"); background-position: top center; background-size:cover; border-bottom:1px solid #0A2C1E; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); height:400px; }
.hero { height:400px; }
.hero-horse { height:470px; }
.inner-hero {width: 90%; max-width:1200px; margin: 0 auto; height:400px;display:grid;grid-template-columns:auto 622px;position:relative;z-index:1; text-align:center; color: var(--text); }

.inner-hero-horse {width: 90%; max-width:1200px; margin: 0 auto; height:470px;display:grid;grid-template-columns: auto 600px;position:relative;z-index:1; text-align:center; color: var(--text); padding: 20px 0; font-family: DM Serif Display,serif; letter-spacing: 1px; }

.inner-hero-horse p { margin-bottom: 15px; font-size: 17px; }
.inner-hero-horse small { color:#F3EEE2; font-size: 15px; }
.inner-hero-horse b { font-family: DM Serif Display,serif; font-size: 42px; color: var(--gold); letter-spacing: 1px; }
.inner-hero-horse span { font-weight:bold; margin: 0 5px; }

.inner-hero-photo, .inner-hero-horse-photo { text-align:right; }
.inner-hero-photo img { height: 330px; }
.inner-hero-horse-photo img { height: 400px; }

.buttons { margin-top: 30px; }
.buttons a { font-size: 15px; background:radial-gradient(circle at 50% 0,rgba(22,68,42,.55),transparent 36%),linear-gradient(180deg,#071e15,#04120d); border: solid var(--gold) 1px; padding: 5px 10px; margin: 10px; border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.hero-photo { background-image: url(img/ots.png); background-position: right bottom; background-repeat: no-repeat; }

.hero span { padding: 50px 0 0 0; font-weight:600; font-family: DM Serif Display,serif; letter-spacing: 1px; }
.hero span img {   filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); }

.middle {width: 90%; max-width:1200px; margin: 0 auto; position:relative;background:radial-gradient(circle at 50% 0,rgba(22,68,42,.55),transparent 36%),linear-gradient(180deg,#071e15,#04120d);border:1px solid var(--gold); padding: 10px; text-align:center; color:#FFF; border-radius: 10px; margin-top: -30px; z-index:100;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family:DM Serif Display,serif;font-size:20px; }

.intro{ position:relative; padding:50px 0px; color: var(--text); }
p { margin-bottom: 15px; }


h2{font-family:DM Serif Display,serif;font-size:30px; color: var(--gold2); letter-spacing:2px;line-height:1.28;margin: 30px 0 15px 20px; }

.galleria { text-align:center; }
.galleria img { height: 185px; margin: 10px; padding: 5px; border: solid var(--green) 1px; background:radial-gradient(circle at 50% 0,rgba(22,68,42,.55),transparent 36%),linear-gradient(180deg,#071e15,#04120d); }

.sukutaulu { width: 100%; border-collapse:separate; border-spacing: 10px; margin: 20px 0; }
.sukutaulu td { width: 33%; padding: 15px 20px; background: rgba(0,0,0,.2); border: solid rgba(0,0,0,.3) 1px; border-radius: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.sukutaulu b { color: var(--gold); margin-right: 5px; text-transform:uppercase; font-size: 14px; }
.sukutaulu small { font-family: DM Serif Display,serif; font-style:italic; color: #DFDFDF; text-style:italic; font-size: 14px; }

.varsat span { color: var(--gold); margin: 0 5px; font-size: 14px; }
.varsat hr { margin: 10px 0; border: none; height: 1px; background-color: rgba(255,255,255,.3); }
.varsat a { margin-left: 5px; }

.suku { display:grid;grid-template-columns:auto 400px; gap:20px; }
.varsat { letter-spacing: 1px; background: rgba(0,0,0,.2); border: solid rgba(0,0,0,.3) 1px; border-radius: 20px; padding: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.ohjeet { display:grid;grid-template-columns: 1fr 1fr; gap:30px; }

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: rgba(70,128,66,.4);
font-size: 14px;
margin-left: 10px;
}

.tooltiptext {
font-family: DM Serif Display,serif; font-style:italic; color: grey; text-style:italic; font-size: 14px;

  visibility: hidden;
  background-color: rgba(52,88,52,.4);
box-shadow:0px 0px 0px #ddd;

  text-align: center;
  border-radius: 6px;
  padding: 5px 8px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
width: 200px; }

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

ul { padding-left: 30px; }

.copyright{ padding: 10px; background:radial-gradient(circle at 50% 0,rgba(22,68,42,.55),transparent 36%),linear-gradient(180deg,#071e15,#04120d);border-top:1px solid var(--gold); text-align:center; color:var(--text); font-family:DM Serif Display,serif;}
.inner-copyright{ width: 90%; max-width:1200px; margin: 0 auto; display:grid;grid-template-columns: 1fr 1fr;}

.copyright b { color:var(--gold); text-transform:uppercase;font-family:DM Serif Display,serif;font-size:14px;letter-spacing:2px; }


.listaus {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
text-align:center;
}

.listaus div { background: rgba(0,0,0,.2); border: solid rgba(0,0,0,.3) 1px; border-radius:18px; box-shadow:0 8px 20px rgba(0,0,0,.32); padding: 0 0 10px 0; }

.listaus img { width:100%; border-radius:18px 18px 0 0; filter: sepia(0.5); }
.listaus a { font-family:DM Serif Display,serif; font-size: 20px; }

/* KUVAGALLERIA */
.gallery-mosaic{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  grid-auto-rows:170px;
  gap:14px;
margin-top: 30px;
}

.gallery-mosaic a{
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid rgba(185,138,61,.75);
  border-radius:18px;
  background:#061e15;
  box-shadow:0 8px 20px rgba(0,0,0,.32);
}

.gallery-mosaic a.big{
  grid-row:span 2;
}

.gallery-mosaic img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.45s ease;
  filter:sepia(.18) contrast(1.05) brightness(.92);
}

.gallery-mosaic a:hover img{
  transform:scale(1.08);
  filter:sepia(.05) contrast(1.08) brightness(1.08);
}

.gallery-mosaic span{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:18px 12px 10px;
  text-align:center;
  font-family:"DM Serif Display",serif;
  color:var(--gold2);
  letter-spacing:1px;
  background:linear-gradient(0deg,rgba(4,18,13,.94),rgba(4,18,13,0));
  text-shadow:0 2px 5px #000;
}

@media(max-width:800px){

  .gallery-mosaic{
    grid-template-columns:1fr;
    grid-auto-rows:220px;
  }

  .gallery-mosaic a.big{
    grid-row:span 1;
  }
}



/* KILPAILUKALENTERI */
.calendar{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.calendar thead tr { background:radial-gradient(circle at 50% 0,rgba(22,68,42,.55),transparent 36%),linear-gradient(180deg,#071e15,#04120d); }
.calendar th{
  font-family:"DM Serif Display",serif;
  color:var(--gold);
  padding:10px;
  letter-spacing:1px;
text-transform:uppercase;
padding: 10px 15px;
}

.calendar td{
  padding:10px;
  border-bottom:1px solid rgba(214,170,94,.22);
  color:#f9f8f7;
  background:rgba(255,255,255,.025);
}

.calendar tr:nth-child(even) { background:rgba(255,255,255,.035); }

.calendar b {
  color:var(--gold2);
  font-weight:700;
}

.calendar img { margin-right: 5px; }

.calendar span {
    display: inline-block;
    padding: 1px 3px;
    font-size: 14px;
    line-height: 1.5em;
    border-radius: 3px;
    margin-left: 5px;
}

.calendar span:before {
    content: "[ ";
}

.calendar span:after {
    content: " ]";
}

.ruusukkeet { text-align:center; margin-top: 30px; }
.ruusukkeet img { max-height: 120px; }

.pkk-img { width: 150px; }
.pkk-img img { width: 130px; height: 130px; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

@media(max-width:800px){
  .calendar{font-size:14px}
}



@media(max-width:1024px){body{justify-content:flex-start}}







@media(max-width:1180px){
  .nav a{padding:0 24px;font-size:14px;}
  .inner-hero{grid-template-columns:1fr minmax(300px,48%);}
  .inner-hero-horse{grid-template-columns:1fr minmax(300px,48%);}
}

@media(max-width:900px){
  html,body{text-align:left;font-size:15px;}
  .page,.middle,.nav,.inner-hero,.inner-hero-horse,.inner-copyright{width:92%;}

  .top{margin-top:25px;min-height:60px;}
  .nav{min-height:60px;padding:0;display:flex;align-items:center;justify-content:space-between;}
  .nav-toggle-label{display:block;position:absolute;right:0;top:0;z-index:4;padding:5px 0 5px 25px;}
  .nav-logo-mobile{display:block;max-height:150px;width:auto;margin:-42px 0 -42px 0;position:relative;z-index:3; text-align:center;}
  .nav-menu{display:none;position:absolute;top:60px;left:0;right:0;z-index:5;flex-direction:column;align-items:stretch;gap:0;background:linear-gradient(180deg,#071e15,#04120d);border:1px solid var(--gold);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 12px 24px rgba(0,0,0,.35);overflow:hidden;}
  .nav-toggle:checked ~ .nav-menu{display:flex;}
  .nav-menu a{display:block;padding:14px 18px;border-top:1px solid rgba(214,170,94,.25);text-align:center;}
  .nav-menu img{display:none;}

  .hero,.hero-horse{height:auto;min-height:0;}
  .inner-hero,.inner-hero-horse{height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 0 35px;gap:20px;}
  .hero span{padding:0;}
  .hero span img{max-width:min(440px,92vw);}
  .hero-photo img,.inner-hero-photo img,.inner-hero-horse-photo img{height:auto;max-height:360px;max-width:90vw;}
  .inner-hero-horse b{font-size:clamp(30px,8vw,42px);}
  .middle{margin-top:-18px;font-size:18px;padding:12px 15px;}

  .suku,.ohjeet,.inner-copyright{grid-template-columns:1fr;}
  .sukutaulu,.sukutaulu tbody,.sukutaulu tr,.sukutaulu td{display:block;width:100%;}
  .sukutaulu{border-spacing:0;}
  .sukutaulu td{margin:0 0 12px 0;}
  .galleria img{height:auto;max-width:44%;}
}

@media(max-width:650px){
  .page,.middle,.nav,.inner-hero,.inner-hero-horse,.inner-copyright{width:94%;}
  .intro{padding:35px 0;}
  h2{font-size:26px;margin-left:0;}
  .buttons a{display:block;margin:10px auto;max-width:260px;text-align:center;}
  .galleria img{max-width:100%;margin:8px 0;}

  .calendar,.calendar thead,.calendar tbody,.calendar th,.calendar td,.calendar tr{display:block;width:100%;}
  .calendar thead{display:none;}
  .calendar tr{margin-bottom:12px;border:1px solid rgba(214,170,94,.22);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.025);}
  .calendar td{border-bottom:1px solid rgba(214,170,94,.16);}
  .calendar td:last-child{border-bottom:0;}

  .copyright{text-align:center;}
  .inner-copyright{gap:16px;}
}

@media(max-width:420px){
  .nav-logo-mobile{max-height:92px;margin:-30px 0 -30px 0;}
  .hero span img{max-width:88vw;}
  .hero-photo img,.inner-hero-photo img,.inner-hero-horse-photo img{max-height:300px;}
  .middle{font-size:16px;}
}