@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=GFS+Neohellenic:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap");
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul {
  margin: 0;
}

section {
  margin-top: -1px;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style-type: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --ff-otsikko: "Bodoni Moda", serif;
  --ff-otsikko-s: "Antic Didone", serif;
  --ff-otsikko-ss: "Poiret One", cursive;
  --ff-perus: "Raleway", sans-serif;
  --fs-xxl: clamp(4.4rem, .8rem + 12vw, 16rem);
  --fs-xl: 2.4rem;
  --fs-l: 1.5rem;
  --fs-m: 1rem;
  --fs-s: .9rem;
  --fs-xs: .7rem;
  --fs-xxs: .6rem;
  --väri-tumma-600: #0d0d0f;
  --väri-tumma-400: #212121;
  --väri-tumma-200: #2B2B2B;
  --väri-vaalea-600: #ffffff;
  --väri-aksentti-200: hsl(49, 80%, 75%);
  --väri-aksentti-400: hsl(36, 79%, 69%);
  --väri-aksentti-600: hsl(36, 79%, 59%);

  --väri-switch-100:hsl(36,79%, 95%);
  --väri-switch-200:hsl(49,79%, 85%);
  --väri-switch-400:hsl(49, 80%, 75%);
  --väri-switch-600:hsl(36,79%, 65%);
  --väri-switch-800:hsl(36, 79%, 35%);

}

body {
  font-family: var(--ff-perus);
  font-size: var(--fs-m);
  background: var(--väri-tumma-600);
  color: var(--väri-vaalea-600);
  max-width: 100vw;
  overflow-x: hidden;
}

a:not(.nav, .btn, .galleriathumb) {
  display: inline-block;
  text-decoration: none;
  color: var(--väri-aksentti-400);
  font-size: var(--fs-xs);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transition: transform 100ms ease-in;
}

a:not(.btn) > i:not(.aksentti) {
  text-align: center;
  letter-spacing: 0;
  font-size: var(--fs-l);
  color: var(--väri-vaalea-600);
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transition: transform 100ms ease-in;
}

a:not(.nav, .btn, .galleriathumb):hover,
a:not(.nav, .btn, .galleriathumb):focus {
  transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
}

a > i:hover,
a > i:focus {
  transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
}

h1,
h2 {
  font-family: var(--ff-otsikko);
  text-transform: uppercase;
  font-weight: normal;
}

h1 {
  font-size: var(--fs-xl);
}

h2 {
  font-size: var(--fs-l);
  letter-spacing: 0.1em;
  line-height: 1.1;
}

h3 {
  font-size: var(--fs-l);
  letter-spacing: 3px;
  font-family: var(--ff-otsikko);
}

strong {
  font-family: var(--ff-otsikko);
}

p {
    max-width: 50ch;
    line-height: 1.3;
    margin-bottom: 1em;
    font-weight: 200;
    letter-spacing: 1px;
}

blockquote p {
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  line-height: 1.1rem;
  max-width: 52ch;
}

strong {
  font-family: var(--ff-otsikko-s);
  font-size: var(--fs-l);
  letter-spacing: 1px;
}

figure {
  display: grid;
  place-items: center;
  text-align: center;
}

figure figcaption {
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 2;
}

.kulta {
  position: relative;
  background: linear-gradient(to top, #4A360F, #F2E98A 18% 49%, #7D6537 62%, #926B30 66% 76%, #D79C33 84%);
  line-height: 0.9;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-stroke: 0.02em transparent;
  -webkit-text-stroke: 0.02em transparent;
  text-shadow: 0px 0px 10px hsla(55, 100%, 89%, 0.569);
}

.kulta::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #4A360F, #F2E98A 18% 49%, #7D6537 62%, #926B30 66% 76%, #D79C33 84%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-stroke: 0px;
  -webkit-text-stroke: 0px;
}

.kulta::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: url(img/kulta.jpeg);
  background-size: auto 100%;
  isolation: isolate;
  z-index: 2;
  opacity: 0.2;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-stroke: 0.02em transparent;
  -webkit-text-stroke: 0.02em transparent;
}

.btn {
  cursor:pointer;
  border:0;
  display: inline-block;
  position: relative;
  padding: 0.5em 2em;
  margin-bottom: 0.5em;
  color: var(--väri-tumma-600);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--fs-xs);
  text-decoration: none;
  background: linear-gradient(to left, var(--väri-aksentti-200), var(--väri-aksentti-400));
  border-radius: 50em;
  line-height: 1.6;
  box-shadow: 0 0 0 0 hsl(49, 80%, 59%);
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transition: transform 200ms, box-shadow 200ms;
}

.btn:hover,
.btn:focus {
  background: linear-gradient(to left, hsl(49, 80%, 85%), hsl(36, 79%, 76%));
  box-shadow: 2px 2px 3px hsl(49, 80%, 59%);
  transform: translate(-2px, -2px);
  -webkit-transform: translate(-2px, -2px);
  -ms-transform: translate(-2px, -2px);
}

.ruksi {
    padding:0;
    width:30px;
    height:30px;
    margin:1em;
    font-size: var(--fs-m);
    color: var(--väri-vaalea-600);
    border: 3px solid var(--väri-vaalea-600);
    border-radius:50px;
    background:transparent;
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transition:transform 300ms ease-in-out;
}

.ruksi:hover,
.ruksi:focus {
  transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

.some {
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.5em;
  display: grid;
  place-items: center;
  z-index: 10;
}

@media only screen and (orientation: landscape) { /* min-width 641px, medium screens */
  .some {
    position: fixed;
    top: auto;
    bottom: 0;
    right: 0;
    padding: 0.5em;
    display: grid;
    place-items: center;
    z-index: 10;
  }
}
/* NAVIGAATIO */
header {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 12;
  display: grid;
  place-items: center;
}

nav {
  width: 100vw;
  position: relative;
  max-width: 29em;
  display: flex;
  justify-content: space-evenly;
  /* align-content: center; */
  /* gap: 3em; */
  padding: 1em;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--väri-tumma-600);
  isolation: isolate;
  z-index: -1;
  opacity: 0.7;
}

nav a {
  position: relative;
  font-size: var(--fs-xs);
  color: var(--väri-vaalea-600);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
}

nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2em;
  bottom: -0.2em;
  background: var(--väri-vaalea-600);
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  transition: transform 250ms ease-in-out;
  transform-origin: left;
}

nav a:hover::before,
nav a:focus::before {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform-origin: right;
}

@media only screen and (orientation: landscape) { /* min-width 641px, medium screens */
  header {
    top: 0;
    bottom: auto;
    place-items: start;
  }
  header::before {
    opacity: 0;
  }
  .scroll::before {
    opacity: 0.7;
    background: var(--väri-tumma-600);
  }
}



/* HERO */
#hero {
  height: 100vh;
  height: 100dvh;
  background-image: url(img/waltteri_tausta-center.jpeg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.logo {
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 3em;
}

.logo p:first-of-type {
  font-family: var(--ff-otsikko-ss);
  font-size: 11rem;
  margin: 0;
  line-height: 1;
}

.logo p:nth-of-type(2) {
  font-family: var(--ff-otsikko-s);
  font-size: 1.3rem;
  text-align: center;
  margin: 0;
}

@media only screen and (orientation: landscape) { /* min-width 641px, medium screens */
  #hero {
    background-image: url(img/WT_tausta-desktop.jpg);
    background-size: auto 100%;
    background-position: left top;
  }
  #hero > div {
    width: auto;
    height: 100%;
    margin: 0 0 0 60vw;
  }
}




/* BIO */
#bio {
  padding: 1em;
  display: grid;
  overflow: hidden;
}

.bio__karuselli {
  --karuselli_width: 15em;
  width: var(--karuselli_width);
  max-width:100vw;

  position: relative;
  left: calc(50% - var(--karuselli_width) / 2);
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--karuselli_width));
  overflow: hidden;
}


.bio__karuselli p {
    font-size: var(--fs-xs);
    letter-spacing: 3px;
    line-height: 1.1rem;
    max-width: 34ch;
}

@media only screen and (min-width: 40.063em) {
    .bio__karuselli {
        --karuselli_width: 55ch;
    }

    .bio__karuselli p {

        max-width: 52ch;
    }

}

.bio__karuselli::after {
    content:"";
    position:absolute;
    inset:0;
    /* background:linear-gradient(to left, var(--väri-tumma-600),transparent 10% 90% , var(--väri-tumma-600)); */

}


.bio__karuselli > div {
  /* grid-row:1; */
  grid-area: 1/1;
  width: var(--karuselli_width);
  max-width:100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index:5;


  animation-name: karuselli;
  animation-iteration-count: infinite;

  -webkit-animation-name: karuselli;
  -webkit-animation-iteration-count: infinite;
}

.karuselli__fi,
.karuselli__en {
  transition: opacity 350ms ease-in-out;
}

.karuselli__fi {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.karuselli__en {

  position: relative;
  pointer-events: all;
  opacity: 1;
}


#toggle_kieli:checked ~ .bio__karuselli > div > .karuselli__fi {
  position: relative;
  pointer-events: all;
  opacity: 1;
}

#toggle_kieli:checked ~ .bio__karuselli > div > .karuselli__en {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}


.bio__karuselli > div {
  animation-duration: calc(var(--lkm) * 6s);
  -webkit-animation-duration: calc(var(--lkm) * 6s);
}


.bio__karuselli > div:nth-of-type(2) {
  animation-delay: calc(var(--lkm) * 6s * 1 / var(--lkm));
  -webkit-animation-delay: calc(var(--lkm) * 6s * 1 / var(--lkm));
  transform: translateX(var(--karuselli_width));
  -webkit-transform: translateX(var(--karuselli_width));
  -ms-transform: translateX(var(--karuselli_width));

}

.bio__karuselli > div:nth-of-type(3) {
  animation-delay: calc(var(--lkm) * 6s * 2 * 1 / var(--lkm));
  -webkit-animation-delay: calc(var(--lkm) * 6s * 2 * 1 / var(--lkm));
  transform: translateX(var(--karuselli_width));
  -webkit-transform: translateX(var(--karuselli_width));
  -ms-transform: translateX(var(--karuselli_width));

}

.bio__karuselli > div:nth-of-type(4) {
  animation-delay: calc(var(--lkm) * 6s * 3 * 1 / var(--lkm));
  -webkit-animation-delay: calc(var(--lkm) * 6s * 3 * 1 / var(--lkm));
  transform: translateX(var(--karuselli_width));
  -webkit-transform: translateX(var(--karuselli_width));
  -ms-transform: translateX(var(--karuselli_width));

}

.bio__karuselli > div:nth-of-type(5) {
  animation-delay: calc(var(--lkm) * 6s * 4 * 1 / var(--lkm));
  -webkit-animation-delay: calc(var(--lkm) * 6s * 4 * 1 / var(--lkm));
  transform: translateX(var(--karuselli_width));
  -webkit-transform: translateX(var(--karuselli_width));
  -ms-transform: translateX(var(--karuselli_width));
}

/* JOS 2 tapahtumaa */
/* JOS 3 tapahtumaa */
/* JOS 4 tapahtumaa */
/* JOS 5 tapahtumaa */
#bio > div:nth-of-type(2) {
  max-width: 100vw;
  display: grid;
  place-items: center;
}

#bio hr {
  border-bottom: 0px;
  border-top: 1px solid var(--väri-vaalea-600);
  width: 9em;
  margin-bottom: 0.6em;
}

.bio__toggle-container {

    margin:1em;


} 



#toggle_kieli {
    display:none;
}


.bio__toggle_kieli {
    position:relative;
    display:grid;
    grid-template-columns: 1fr 1fr;
    place-content: center;
    gap:3.3em;
    width: 5em;
    padding:1em 5em ;

    font-size: var(--fs-xxs);
    letter-spacing: 2px;
    border: 1px solid white;
    border-radius: 2em;
    z-index:3;

}



.bio__toggle_kieli::after {
    position:absolute;
    content:'';
    inset:2px 50% 2px 2px;
    background: linear-gradient(to left, var(--väri-aksentti-200), var(--väri-aksentti-400));
    border-radius: 2em;
    isolation: isolate;
    z-index:-1;
    transform:translateX(0);
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);

    transition: transform 200ms;


}


#toggle_kieli:checked ~ div > .bio__toggle-container > label > .bio__toggle_kieli::after {
  transform:translateX(100%);
  -webkit-transform:translateX(100%);
  -ms-transform:translateX(100%);
}

.bio__toggle_kieli > span:nth-of-type(1) {
    color: var(--väri-tumma-600);
}

#toggle_kieli:checked ~ div > .bio__toggle-container > label > .bio__toggle_kieli > span:nth-of-type(2) {
    color: var(--väri-tumma-600);
}

#toggle_kieli:checked ~ div > .bio__toggle-container > label > .bio__toggle_kieli > span:nth-of-type(1) {
    color: var(--väri-vaalea-200);
}




/* .bio__toggle_kieli {
    --transition: 300ms;
    --switch-text-off: hsl(30.78deg 96.19% 7.24% / 39%);
    --switch-text-on: 1px 1px 17px hsl(190.85deg 100% 50%);

    padding: 1em 2.5em;
    position:relative;
    border-radius:5px;
    outline: 1px solid var(--väri-switch-600);
    box-shadow: 0 0 3px 4px var(--väri-switch-400);
    outline-offset: 3px;
    overflow:hidden; 
    transition: var(--transition);

}

.bio__toggle_kieli::after,
.bio__toggle_kieli::before {
    color:var(--väri-tumma-600);
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: 2px;

    display:grid;
    place-content: center;

}
.bio__toggle_kieli::after {
    content:"FI";
    position:absolute;
    inset: 0 50% 0 0;
    background: var(--väri-switch-600);
    color: var(--switch-text-off);
    box-shadow: 2px 0 0 0 var(--väri-switch-100) inset;
    border-radius:5px 0 0 5px;
    padding-left:1px;

    transition: var(--transition);
}

.bio__toggle_kieli::before {
    content:"EN";
    position:absolute;
    inset: 0 0 0 50%;
    background-color: var(--väri-switch-400);
    border-radius:0 5px 5px 0;
    box-shadow: 0 0 0 0;
    text-shadow: var(--switch-text-on);

    transition: var(--transition);


}


#toggle_kieli:checked ~ div > .bio__toggle-container > label > .bio__toggle_kieli::after {
    background: var(--väri-switch-400);
    box-shadow: 0 0 0 0;
    color:var(--väri-tumma-600);
    text-shadow: var(--switch-text-on);
    padding-left:0px;
}

#toggle_kieli:checked ~ div > .bio__toggle-container > label > .bio__toggle_kieli::before {
    background: var(--väri-switch-100);
    box-shadow: -2px 0 0 0 var(--väri-switch-800) inset;
    color: var(--switch-text-off);
    text-shadow: 0 0 0;

    padding-right:2px;
} */






#toggle_kieli:checked ~ div > div > .bio__fi {
  position: relative;
  pointer-events: all;
  opacity: 1;
}

#toggle_kieli:checked ~ div > div > .bio__en {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

figure.bio__quote_fi {
  display: none;
}

#toggle_kieli:checked ~ figure.bio__quote_en {
  display: none;
}

#toggle_kieli:checked ~ figure.bio__quote_fi {
  display: block;
}

.bio__fi,
.bio__en {
  top: 0;
  transition: opacity 350ms ease-in-out;
}

.bio__en {
  position: relative;
  pointer-events: all;
  opacity: 1;
}

.bio__fi {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.bio__wrapper {
  position:relative;
}





.bio__longbio {
    position:fixed;
    inset:0;
    background: url(img/WT_longbio.jpg);
    background-size: auto 100%;
    background-repeat:no-repeat;
    /* background-attachment: fixed; */
    translate: 100vw 0;
    max-height:100dvh;
    z-index:15;
}

.bio__longbio::before {
    content: '';
    position:absolute;
    inset:0;
    background: rgba(5, 5, 5, .5);
    pointer-events: none;
    isolation: isolate;
    z-index:-1;
}


.bio__longbio_teksti {
    padding:5em 2em;
    max-height:100dvh;
    overflow-y: scroll;

    display:flex;
    flex-direction: column;
    align-items: center;

}

.bio__longbio h3 {

  cursor:pointer;
}
.bio__longbio_panel {
  display:grid;
  grid-template-rows: 0fr;

  transition: grid-template-rows 600ms ease-in-out, padding 600ms ease-in-out;

  /* padding:1em; 
  grid-template-rows: 1fr; */

}

.show {

  grid-template-rows: 1fr;


}

.bio__longbio_panel  > span {

  overflow:hidden;
}

.bio__longbio_teksti hr {
    border-bottom: 0px;
    border-top: 1px solid var(--väri-vaalea-600);
    width: 9em;
    margin-bottom: 0.6em;
    margin-top: 2em;

}

.bio__longbio_teksti figure {

    margin:0 0 2em 0;
}


.bio__longbio .ruksi {
    position:fixed;
    top:0;
    left:0;
}

.fullscreen {
    translate: 0 0;
    transition:translate 500ms ease-in-out;

}

.trans {
    transition:translate 500ms ease-in-out;

}

.long_bio_fi {
  display: none;
}

#toggle_kieli:checked ~ .bio__longbio > .bio__longbio_teksti > .long_bio_en {
  display: none;
}

#toggle_kieli:checked ~ .bio__longbio > .bio__longbio_teksti > .long_bio_fi {
  display: block;
}


@media only screen and (orientation: landscape) { /* min-width 641px, medium screens */
    .bio__longbio_teksti {
        width: 100vw;
        padding-left: 60vw;
    }

    .bio__longbio::before {
       opacity:0;
    }
    .bio__longbio {
        background: url(img/WT_longbio.jpg) rgba(5, 5, 5, 1);
        background-size: auto 100%;
        background-repeat:no-repeat;
    }

}

/* KALENTERI */
#kalenteri {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2em;
  isolation: isolate;
}

.kalenteri__haitari-wrap,
.kalenteri__highlight,
#konsertit__btn {
  max-width: 54em;
}

#surplus {
  width:100%;
  display:grid;
  place-items: center;
}
.hide {
  transform: scale(0,0);
  -webkit-transform: scale(0,0);
  -ms-transform: scale(0,0);
  position:absolute;
}

#konsertit__btn {
  border:0;
  width:90%;
  padding:2em;
  cursor: pointer;

  background: var(--väri-tumma-200);
  color: var(--väri-vaalea-600);
  letter-spacing: 2px;
}

#konsertit__btn:hover,
#konsertit__btn:focus {
  background: var(--väri-tumma-400);
}



.kalenteri__vuosi {
  text-align: center;
  margin: 1em;
}

.kalenteri__vuosi .kalenteri__otsikko {
  color: var(--väri-aksentti-400);
  letter-spacing: 4px;
}

.kalenteri__vuosi p:first-of-type {
  margin-bottom: -0.1em;
}

.kalenteri__pvm {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kalenteri__pvm > p:first-of-type,
.kalenteri__pvm > p:last-of-type {
  margin: 0.2em;
  text-transform: uppercase;
  font-size: var(--fs-xxs);
  letter-spacing: 3px;
}

.end > p:nth-of-type(2) {
  font-size: 1.1rem !important;
}

.kalenteri__otsikko {
  font-family: var(--ff-otsikko);
  text-transform: uppercase;
  font-size: var(--fs-l);
  letter-spacing: 3px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.kalenteri__pvm p:nth-of-type(2) {
  font-family: var(--ff-otsikko);
  font-size: 2.2rem;
  color: var(--väri-aksentti-400);
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 0;
}

.kalenteri__highlight {
  background: var(--väri-vaalea-600);
  color: var(--väri-tumma-600);
  width: 90%;
  margin-bottom: 1em;
  display: grid;
}

.kalenteri__highlight div:first-of-type {
  padding: 1em;
}

.kalenteri__highlight div:first-of-type h2 {
  text-align: center;
}

.kalenteri__highlight-kuva {
  display: none;
}

.kalenteri__highlight > div:nth-of-type(2) {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.kalenteri__highlight .sisalto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kalenteri__highlight > h2 {
  text-align: center;
  font-weight: 600;
}

#kalenteri hr {
  border: 0px;
  border-top: 1px dotted var(--väri-tumma-600);
  margin: 1em -1em;
}

.kalenteri__haitari-wrap {
  width: 90%;
  display: grid;
  place-items: center;
}

label {
  cursor: pointer;
}

.kalenteri__haitari:hover,
.kalenteri__haitari:focus {
  background-color: var(--väri-tumma-200);
}

.kalenteri__haitari {
  background-color: var(--väri-tumma-400);
  width: 100%;
  padding: 1em 0.2em;

}

.kalenteri__haitari-info {
  display: grid;
  grid-template-columns: minmax(30%, 10em) 1fr;
  justify-content: center;
  padding: 0.5em;
}

.kalenteri__haitari-info > div:nth-of-type(2) {
  justify-content: center;
}

.kalenteri__aikapaikka {
  font-size: var(--fs-xs);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: -1em;
}

.kalenteri__highlight .kalenteri__aikapaikka {
  text-align: center;
  max-width: 100%;
}

.kalenteri__haitari h2 {
  font-size: var(--fs-l);
}

.kalenteri__haitari-panel {
  display: grid;
  grid-template-rows: 0fr;
  justify-content: center;
  padding: 0em 1em;
  transition: grid-template-rows 300ms, padding 300ms;
}

.kalenteri__haitari-panel > div {
  overflow: hidden;
}

.kalenteri__haitari-panel > div > p {
  padding: 0.3em;
}

.kalenteri__toggle:checked ~ .kalenteri__haitari > label > .kalenteri__haitari-panel {
  grid-template-rows: 1fr;
  padding: 1em;
}

.kalenteri__toggle:checked ~ .kalenteri__haitari > label > .kalenteri__haitari-panel > div {
  overflow: auto;
}

.kalenteri__toggle:checked ~ .kalenteri__haitari {
  position: relative;
  background-color: var(--väri-tumma-200);
  margin: 0.1em;
}

.kalenteri__toggle:checked ~ .kalenteri__haitari::before {
  content: "";
  position: absolute;
  inset: -0.1em;
  isolation:isolate;
  z-index: -1;
  background-image: linear-gradient(to top, #4A360F, #F2E98A 18% 49%, #7D6537 62%, #926B30 66% 76%, #D79C33 84%);
}

.kalenteri__toggle {
  display: none;
}

@media only screen and (orientation: landscape) { /* min-width 641px, medium screens */


}
@media only screen and (max-width: 40.063em) {
  .kalenteri__otsikko {
    font-size: var(--fs-xs);
    letter-spacing: 2px;
  }
  .kalenteri__pvm > p:nth-of-type(2) {
    font-size: 1.5rem !important;
    letter-spacing: 1px;
  }
  .end > p:nth-of-type(2) {
    font-size: 0.9rem !important;
    letter-spacing: 1px;
  }
}
/* MEDIA */
#media {
  margin: 2em 0 0 0;
}

.galleria-wrap {
  height: auto;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(to right, #100d28, #000);
}

.galleria {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  display: -ms-grid;
  margin: auto;
  grid-template-columns: auto;
  grid-auto-rows: 40vh;
}

.galleria-img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.galleria-img::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0em;
  background: var(--väri-aksentti);
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
  border-radius: 6px;
}

.galleria-img:hover::before,
.galleria-img:focus::before {
  opacity: 1;
}

.galleria-img span {
  display: block;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  color: white;
  inset: 0;
  padding: 1em;
  z-index: 2;
  transition: transform 300ms ease-in-out;
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  pointer-events: none;
}

.galleria-img:hover span,
.galleria-img:focus span {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
}

.galleria img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -o-object-fit: cover;
  object-position: top center;
  transition: 300ms ease-in-out;
}

@media only screen and (orientation: landscape) {
  .galleria-wrap {
    height: 100vh;
    max-height: 40em;
  }
  .galleria {
    position: relative;
    height: 100%;
    margin: auto;
    display: grid;
    display: -ms-grid;
    grid-template-columns: auto auto auto auto;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
  }
  .galleria img {
    object-position: center center;
  }
}
/* YHTEYS */
#yhteys {
  position: relative;
  z-index: 11;
  background: url(img/WT-contact.jpeg), #050505;
  min-height: 30em;
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2em 1em;
}

#yhteys div {
  padding: 1em;
}

#yhteys p {
  font-size: var(--fs-s);
}

#yhteys > .logo {
  display: none;
}

#yhteys > div:first-of-type {
  display: none;
}

@media only screen and (max-width: 40.063em) {
  #yhteys {
    background: #050505;
  }
}
@media only screen and (min-width: 70.2em) {
  #yhteys div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #yhteys {
    flex-direction: row;
    justify-content: flex-start;
    gap: 4vmax;
    padding-left: 15vmax;
  }
  #yhteys > .logo {
    position: relative;
    bottom: auto;
    width: auto;
  }
  #yhteys > .logo p:first-of-type {
    font-size: 7rem;
  }
}
@media only screen and (min-width: 95.2em) {
  #yhteys > div:first-of-type {
    display: flex;
  }

  #yhteys {
    padding-left: 0;

    justify-content: center;
  }
}
/* UTILITIES */
.flex-col {
  display: flex;
  flex-direction: column;
}






@media only screen and (min-width: 70.2em) {


    html,body {
        background-image: url(img/WT_tausta-desktop.jpg);
        background-size: auto 100%;
        background-position: left top;
        background-repeat:no-repeat;
        /* background-attachment: fixed; */
        overflow-y: scroll;
        max-height:100vh;
    }
    #bio, 
    #media,
    #hero {
        background:transparent;
    }

    #kalenteri {
        margin:25em 0 5em;
    }

    #bio,#hero {
        position:relative;
        display:grid;
        justify-content: end;
        margin-right:10vmax;

    }

    #hero > div {
        position:absolute;
        right:0;
        width:55ch;
        margin:1em;

    }
}



.btn > i {
    color: var(--väri-tumma-600);
}