@import url('https://fonts.googleapis.com/css2?family=Unica+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@200;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;400;500;600;700;800&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75..100,300..800&display=swap');



/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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



/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: 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 {
  --väri-aksentti: #ec6140;
  --väri-aksentti-hover: hsl(12, 82%, 70%);


  --väri-tumma-200: #2c4250;
  --väri-tumma-400: #012032;
  --väri-tumma-600: #00131e;

  --väri-tumma-200-alpha: #2c4250dd;
  --väri-tumma-400-alpha: #012032dd;
  --väri-tumma-600-alpha: #00131edd;

  --väri-vaalea-200: #dbe2ec;
  --väri-vaalea-400: #fff9f2;
  --väri-vaalea-600: #fff;

  --ff-otsikko: 'Unica One', sans-serif;	
  --ff-otsikko-s: 'Playfair Display', serif;
  --ff-perus:'Open Sans', serif;

  --fw-300: 300;
  --fw-400: 800;
  --fw-600: 600;
  --fw-800: 800;

  --fstretch-200: 75%;
  --fstretch-400: 85%;
  --fstretch-600: 100%;

  --fs-xxl: clamp(2.5rem, .8rem + 10vw, 12rem);
  --fs-xl: 2.8rem;
  --fs-l: 1.5rem;
  --fs-m: 1.125rem;
  --fs-s: 1rem;
  --fs-xs: .9rem;

}




body {    
  max-width:100vw;
  background: transparent;
  min-height: 100vh;
  color:white;
  font-family: var(--ff-perus);
  line-height: 1.3;
  font-size: var(--fs-m);
  font-stretch: 80%;
  font-weight: 300;


}

main {
  position:relative;
}

h1, 
h2 {
  line-height: 1.1;
}

h1 {
  position:absolute;
  bottom: 0;
  font-size: 2.5rem;
  font-stretch: 119%;
  font-weight: 400;
  letter-spacing: 11px;
  text-align: center;
  font-family: var(--ff-otsikko-s);
  text-transform: uppercase;
  padding: .5em;
}

h2 {
  font-family: var(--ff-otsikko);
  font-size: var(--fs-l);
  font-weight: 600;
  letter-spacing: 2px;
  font-stretch: 79%;
  margin: 0.3em 0;
}

h3 {
  font-family: var(--ff-otsikko-s);
  font-size: var(--fs-m);
  font-weight: 800;
  width:100%;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 7px;
  margin:2em 0;
}

strong {
  font-family: var(--ff-otsikko-s);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.sisalto {
  max-width: 60ch;
}

p {
  margin-bottom: 1em;
}

.pvm {
  font-weight: 800;
  letter-spacing: 8px;
  font-size: 0.6rem;
  line-height: 1;
  margin:0;
}

a:not(.btn, .nav) {
  color: var(--väri-aksentti);
  letter-spacing: 1px;
  font-stretch: 90%;
  font-weight: 500;
  text-decoration:none;
}

a:not(.btn, .nav):hover,
a:not(.btn, .nav):focus {
  text-decoration:underline;
}

a > i {
  color: var(--väri-tumma-600);
  transition:transform 300ms ease-in-out;
  transform:scale(1,1);
}

a > i:hover {
  transform:scale(1.2,1.2);
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
  align-self: center;
  background: radial-gradient(var(--väri-tumma-400), var(--väri-tumma-600));
  color: var(--väri-vaalea-600);
  width: 85vw;
  max-width: 27em;
  max-height: 90%;
  overflow-y: scroll;
  border-radius: 0.5rem;
}
.modal-content > div {
  padding:1em;
}
.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

button {
  border:0;
  background:transparent;
}
.btn {
  display:inline-block;
  outline:3px solid var(--väri-vaalea-600);
  padding: .5em 2em;
  color: var(--väri-vaalea-600);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration:none;
  margin:1em 0;
  box-shadow: 0 0 0 #fff;
  cursor:pointer;
  transition:transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
  transform:translate(0px,0px);
}

.musta {
  outline:3px solid var(--väri-tumma-600);
  color: var(--väri-tumma-600);
}

section {
  margin-top:-1px;
}


.btn:hover,
.btn:focus {
  box-shadow: 1px 1px 0 5px #fffa;
  transform:translate(-2px,-2px);
}

.musta:hover,
.musta:focus {
  box-shadow: 1px 1px 0 5px #0003;

}



/* MAIN SECTIONS AND CHILDREN */

#intro,
#konsertit {
    box-shadow: 0 0 10px #000;

}

#landing,
#home,
#intro,
#konsertit,
#ajankohtaista,
#trio,
#kuuntele,
#footer,
#konserit-page {
  width:100vw;
  overflow:hidden;
}

#landing,
#home,
#trio,
#intro,
#footer {
  padding:1em;
}




#landing__toggle:not(:checked) ~ #intro,
#landing__toggle:not(:checked) ~ #trio,
#landing__toggle:not(:checked) ~ #home,
#landing__toggle:not(:checked) ~ #media,
#landing__toggle:not(:checked) ~ #ajankohtaista,
#landing__toggle:not(:checked) ~ header,
#landing__toggle:not(:checked) ~ .aalto,
#landing__toggle:not(:checked) ~ #konsertit,
#landing__toggle:not(:checked) ~ #footer {
  display:none;
  position:relative;
}

/* LANDING */

#landing {
  position:absolute;
  height:100vh;
  height: calc(var(--vh, 1vh) * 100);
  opacity:1;
  transition: opacity 4000ms ease-in-out;
  background:var(--väri-tumma-600);
  z-index:15;
}


.landing__logo {
  width: 20vmin;
  height:auto;
  transform-origin: center center;
  transform: scale(1,1);
  transition: transform 900ms ease-in-out;

}

.landing__toggle-label {
  position:absolute;
  top: calc(calc(var(--vh, 1vh) * 50) - 11vmin);
  left: calc(50vw - 10vmin);
  z-index:16;
  cursor:pointer;
  opacity:1;
  transform: scale(1,1);
  transition: transform 900ms ease-in-out, opacity 2500ms ease-in-out;
}

#landing__toggle {
  display:none;
}



@media (hover: hover) {

  .landing__logo:hover,
  .landing__logo:focus {
    transform: scale(1.1,1.1);
  }

  .landing__toggle-label:hover ~ #landing > svg,
  .landing__toggle-label:focus ~ #landing > svg {
    transform: rotate(180deg) scale(1.3, 1.3);
  }
}



#landing__toggle:checked ~ #home {
  opacity: 1;
}

#landing__toggle:checked ~ .landing__toggle-label {
  transform: scale(1.1,1.1);
  opacity: 0;
  pointer-events: none;


}

#landing__toggle:checked ~ #landing > svg {
  transform: rotate(180deg) scale(1.3, 1.3);

}


#landing__toggle:checked ~ #landing {
  opacity: 0;
  pointer-events: none;

}



/* HOME */

#home {
  position:relative;
  background:url(img/home_bg.jpg) center center/cover no-repeat;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index:11;
  padding:0;

  opacity:0;
  transition: opacity 1900ms ease-in-out;
}

.home__container {
  padding:1em;
  z-index:11;
  display: flex;

  width:100%;
  height: calc(var(--vh, 1vh) * 100);
}


.home__logo {
  position:sticky;
  width: 20vmin;
  height:auto;
  transform-origin: center center;
  transform: scale(1.1,1.1);
  filter: drop-shadow(0 0 20px var(--väri-tumma-600));
  -webkit-filter: drop-shadow(0 0 30px var(--väri-tumma-600));
}

.home__buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position:absolute;
  top:calc(calc(var(--vh, 1vh) * 100) - 7rem);
  gap:1em;
}

.home__buttons > * {
  margin:0;
}




/* NAVIGATION */

header {
  position:fixed;
  display:grid;
  grid-template-columns: 1fr minmax(40ch, 60vw) 1fr;
  bottom:0;
  text-align: center;
  height: 2.5em;
  width: 100%;
  z-index: 1;
  isolation: isolate;


}

header::before {
  content:''; 
  position:absolute;
  inset:0;
  background: var(--väri-tumma-600);
  z-index:-1;
  opacity:.8;
}

nav {
  flex-grow:  2;
  grid-column: 2;
  display:flex;
  gap: 2vmax;
}

nav > div {
    position:relative;
    margin:auto;
    height:100%;

    display:flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(2px);

}



.nav__dropdown {
    position:absolute;
    top:2.5em;
    text-align: left;
    padding:0;
    width:10em;
    isolation: isolate;
    backdrop-filter: blur(2px);

    transform:scaleY(0);
    border-left:1px solid #fff4;
    border-bottom:1px solid #fff4;
    border-right:1px solid #fff4;

}
.nav__dropdown::after {
    position:absolute;
    content: '';
    inset:0;
    background: var(--väri-tumma-600);
    z-index:-1;
}

.nav__dropdown ul {
    list-style: none;
    padding-inline:1em;
}

.drop:hover .nav__dropdown,
.drop:focus .nav__dropdown {

    transform:scaleY(1);
}

.nav { 
  position:relative;
  color: white;
  font-weight: 600;
  font-size: var(--fs-s);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration:none;


}

.nav::before {
  content:'';

  position:absolute;
  display: block;
  bottom:-2px; 
  height: 3px;
  width:100%;
  background: var(--väri-vaalea-600);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease-in-out;
}

.nav:hover::before,
.nav:focus::before {
  transform: scaleX(1);
  transform-origin:left;
}

@media only screen and (min-width: 40.063em) { 
  header {
    position:absolute;
    top: calc(var(--vh, 1vh) * 100);
    z-index:17;
  }

  header::before {
    opacity:.1;
    background:var(--väri-vaalea-200);

  }

}

/* INTRO */

#intro {
  padding:0;
  width:100vw;
  position:relative;
  background: radial-gradient(var(--väri-tumma-400), var(--väri-tumma-600));

}

#intro .sisalto {
  display:flex;
  justify-content: flex-end;
  max-width:100%;
}

#intro h3 {
  letter-spacing: 0;
    font-size: 2rem;
    font-weight: 400;
    margin: 0;
    text-align:left;
}

.intro__teksti {
  padding: 2em 2em 5em 2em;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



.intro__kuva {
display:none;
}



@media only screen and (min-width: 72em) { 
  .intro__teksti {
    width: 50vw;
    max-width:51em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vmax 2em 10vmax 10vmax;
  }

.intro__kuva {
    display:block;
    width:50vw;
    display:flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .intro__kuva > img {
    width:100%;
    height:auto;
    max-width:55em;
    margin-top:10%;
  }
  

}

/* KONSERTIT */

#konsertit {
  background: var(--väri-tumma-600);
  position:relative;
  z-index:6;
  display:flex;
  flex-direction:column;

}


#konsertit > div {
  
  position:relative;
  padding: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center center;
  isolation: isolate;
  transition: background-size 300ms ease-in-out;

}

#konsertit > div::before {
  position:absolute;
  content:'';
  inset:0;
  background: var(--väri-aksentti);
  mix-blend-mode: multiply;
  z-index:-1;
  
}



#konsertit > div:first-child {
  background-image: url(img/_DSC3272-Edit_t.jpg);
}
#konsertit > div:nth-child(3) {
  background-image: url(img/_DSC0593-Edit_t.jpg);
}
#konsertit > div:nth-child(5) {
  background-image: url(img/_DSC0617-Edit_t.jpg);
}
#konsertit > div:nth-child(7) {
  background-image: url(img/_DSC0657-Edit_t.jpg);
}

#konsertit > div:last-child {
  background: var(--väri-tumma-600);
  padding:2em;
}

#konsertit > div:last-child::before {
  background:transparent;
}

#konsertit > div:not(:last-child) {
  display: flex; 
  flex-direction:column;
  justify-content: flex-start;
}



@media only screen and (min-width: 40.063em) { 
  #konsertit {

    flex-direction: row;
    flex-wrap: wrap;
  }
  #konsertit > div {
    min-width:20em;
    flex: 1 1 calc(100vw/3);
  }

  #konsertit > div:last-child {
    height: 40ch;
    display: flex; 
    flex-direction:column;
    justify-content: center;

  }

}

/* AJANKOHTAISTA */


#ajankohtaista {
    position:relative;
    width:100vw;
    margin: 2em 0;
    background: var(--väri-vaalea-600);
    display:flex;
    flex-direction: column-reverse;
    color: var(--väri-tumma-600);

}

.ajankohtaista__kuva {

    display:none;
}

.ajankohtaista__linkit {

  min-width: 25ch;
  background: var(--väri-vaalea-600);


}

#ajankohtaista h2 {
  font-family: var(--ff-otsikko-s);
  text-transform: none;
  letter-spacing: 1px;
  font-weight: 400;
  margin:0.1em 0 1.5em;
  font-size: 0.7rem;
  text-align: left;
  max-width: 25ch;
  text-align:center;


}

#ajankohtaista > .ajankohtaista__linkit > .pvm {
  font-size: 0.5rem;

}


#ajankohtaista h3 {
  letter-spacing: 0;
  font-size: 2rem;
  font-weight:200;
  margin:0 0 0.5em 0;

}

#ajankohtaista .sisalto {
  position:relative;
  width:100%;
  padding: 1em;
  max-width:100%;

}

#ajankohtaista .sisalto > div {
  inset:3em;
  display:none;
  align-items: center;
  flex-direction: column;
  opacity:0;
  transition: opacity 300ms ease-in-out;
}

#ajankohtaista .sisalto p {
  max-width: 70ch;
}

#ajankohtaista input {
  display:none;
}

#ajankohtaista label {
  cursor:pointer; 
  display:block;
  transform:scale(1,1);
  transition: transform 300ms ease-in-out;


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

}



#ajankohtaista label:hover {
  transform: scale(1.1,1.1);

}



#ajankohtaista-1:checked ~ .sisalto > div:nth-child(1) {
  display:flex;
  opacity:1;

}

#ajankohtaista-2:checked ~ .sisalto > div:nth-child(2) {
  display:flex;
  opacity:1;

}

#ajankohtaista-3:checked ~ .sisalto > div:nth-child(3) {
  display:flex;
  opacity:1;

}

#ajankohtaista-4:checked ~ .sisalto > div:nth-child(4) {
  display:flex;
  opacity:1;

}

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

  #ajankohtaista {
   flex-direction: row;
   margin: -11vmax 0;   

  }

  .ajankohtaista__linkit {

    min-width: 28ch;
    background: var(--väri-vaalea-600);
    padding: 5em 1em 0 2em;
  }
  #ajankohtaista label {
    display:block;
  }


  .ajankohtaista__linkit > hr {
    display:none;
  }
    

  #ajankohtaista .sisalto {
    padding: 7em;
  }

  #ajankohtaista .sisalto {
    border-left: 3px dotted var(--väri-tumma-600);
    margin: 3em 0 6em;

  }

  #ajankohtaista h2 {
    text-align:left;
  }

}


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

  #ajankohtaista {
    margin: -13vmax 0;   

  }


  .ajankohtaista__kuva {
    display:block;

    width:50%;

    background: url(img/_DSC0677.jpg) right center;
    background-size: cover;

    }

    .ajankohtaista__linkit {

      transform: rotate(13.8deg) scale(110%, 110%);
      transform-origin: top left;

    }

}





/* MEDIA */

#media {
  background: var(--väri-tumma-600);
  padding:3em 1em;
  position:relative;
}

#media .sisalto {
  padding: 2em;
  margin: 0 5vw;
  max-width: 90%;
}

.galleria-wrap {
    height: auto;
    overflow: hidden;
}
.galleria {
    position: relative;
    height: 100%;
    width: 100%;
    display: grid;
    margin: auto;
    grid-template-columns: auto;
    grid-auto-rows: 20vh;
    grid-gap: 2vmin; 
} 
.galleria-img {
    width: 100%;
    height: 100%;
    position:relative;
    overflow: hidden;
    border-radius: 6px;
}

.galleria-img::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0em;
    background: var(--väri-aksentti);
    mix-blend-mode: screen;
    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);
    pointer-events: none;
}

.galleria-img:hover img,
.galleria-img:focus img {
    transform: scale(1.1, 1.1);

}

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


@media only screen and (orientation:landscape) { 
  .galleria-wrap {
    height: 100vh;
  }
  .galleria {
    position: relative;
    height: 100%;
    margin: auto;
    display: grid;
    grid-template-columns:auto auto auto auto;
    grid-auto-rows: auto;
    grid-gap: 2vmin; 
    grid-auto-flow: dense;
  } 

  .galleria-img:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .galleria-img:nth-child(2n+3) {
    grid-row: span 2;
  }

  .galleria-img:nth-child(4n+5) {
    grid-column: span 1;
    grid-row: span 2;

  }

  .galleria-img:nth-child(8n+9) {
    grid-column: span 1;
    grid-row: span 1;

  }

  .galleria img {

    object-position: center center;

  } 
}



/* TRIO */

#trio {
  position: relative;
  background:var(--väri-vaalea-600);
  color:var(--väri-tumma-600);
  display:flex;
  justify-content: center;
  align-items: center;
}

#trio .sisalto {
  display:grid;
  gap:2em;

}

#trio > .sisalto > div {
  box-shadow: 10px 10px 10px #0002;

  padding:2em;
  margin:1em;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align:center;
  max-width:400px;
}

.trio__icons {
  font-size: 3.5rem;
  letter-spacing:5px;
  margin:0;  
}

@media only screen and (min-width: 64em) { 
  
  #trio .sisalto {
    max-width:90%;
    grid-template-columns: 1fr 1fr 1fr;
  
  }

}

/* KUUNTELE */

.kuuntele {
  max-width:40em;
  max-height:100vh;
  position:fixed;
  height:auto;
  top:0;
  right:0;
  z-index:15;
  overflow: scroll;
  transform:translateX(100%);
  transition:transform 300ms ease-in-out;
  isolation: isolate;
}

#kuuntele__toggle:checked ~ .kuuntele {
  transform:translateX(0);
}

.kuuntele__toggle {
  display:none;
}


.kuuntele > div {
  position:relative;
  display:grid;
  padding: 2em;
  grid-template-columns: 1fr;
  gap:2em;
  isolation: isolate;
}

.kuuntele > div::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.95;
  background: var(--väri-tumma-600);

}



.kuuntele > div:first-child::after {
  background: var(--väri-tumma-200);
}
.kuuntele > div:nth-child(2)::after {
  background: var(--väri-tumma-400);
}
.kuuntele > div:nth-child(3)::after {
  background: var(--väri-tumma-600);
}


/* KONSERTIT__PAGE */

#konsertit-page {
    position:relative;

    background:var(--väri-tumma-600);
    min-height: 100vh;
    text-align:center;
}

 input[type=radio] {
   position:absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  border: 3px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;
  top:80px;
  z-index:6;
  margin-left:2em;
  cursor: pointer;

}

input:checked {
  background: #fff;
}


.konsertit__header {
    top:0;
}

#konsertit-page > .sisalto {
    width:100vw;
    max-width:100vw;
    white-space: nowrap;
    overflow:hidden;
    padding:0;
    margin:0;
}

#konsertit-page > .sisalto > div > h3 {
  letter-spacing: 0;
  font-size: 2.5rem;
  font-weight:400;
  margin:1em 0 0.5em 0;
}

.konsertit-page__banneri {
width:100%;
}

.konsertit-page__logo {
  width: 8em;
  margin-bottom: 2em !important;

}

.konsertit-page__pvm {
  font-size: var(--fs-s);
  font-weight:800;
  letter-spacing: 0.33em;
  margin:0;
  line-height:.6;

}

.konsertit-page__konsertti > *:not(hr) {
  margin:auto;
}

.konsertit-page__konsertti {
    display:inline-block;
    width:100%;
    margin-right:-4px;
    transform: translateX(0);
    transition: transform 300ms ease-in-out;
    vertical-align:top;
    padding:0 1em;

}

.konsertit-page__konsertti > p {
  max-width:60ch;
  white-space:pre-wrap;
  margin-bottom: 1em;
}



.konsertit-page__nuolet {
    width:100%;
    position:fixed;
    top:50vh;
    left:0;
    z-index:5;

    display:grid;
    gap:60vw;
    grid-template-columns: 1fr 1fr;
    justify-items: center; 

}

.konsertit-page__nuolet > label {
    position:relative;
    z-index:3;
    padding:1em;
    cursor: pointer;
    background-color: var(--väri-tumma-200-alpha);
    transition: background-color 250ms ease-in-out; 
}

.konsertit-page__nuolet > label::before {
  content: '';
  position:absolute;
  inset:0;

}



.konsertit-page__nuolet > label:hover,
.konsertit-page__nuolet > label:focus {
  background-color: var(--väri-tumma-400-alpha);
}



input[type=radio]:first-child {
}
input[type=radio]:nth-child(2) {
  left: 30px;
}
input[type=radio]:nth-child(3) {
  left: 60px;
}
input[type=radio]:nth-child(4) {
  left: 90px;
}
input[type=radio]:nth-child(5) {
  left: 120px;
}



.konsertit-page__nuolet > label:not(:nth-child(2)) {
    display:none;
}

#konsertti2:checked ~ .konsertit-page__konsertti {
    transform: translateX(-100%);
}

#konsertti3:checked ~ .konsertit-page__konsertti {
    transform: translateX(-200%);
}

#konsertti4:checked ~ .konsertit-page__konsertti {
    transform: translateX(-300%);
}

#konsertti5:checked ~ .konsertit-page__konsertti {
    transform: translateX(-400%);
}



#konsertti1:checked ~ .konsertit-page__nuolet > .konsertti2__label {
    grid-column:2;
}
#konsertti1:checked ~ .konsertit-page__nuolet > .konsertti2__label > i:first-child {
    display:none;
}

#konsertti2:checked ~ .konsertit-page__nuolet > .konsertti1__label,
#konsertti2:checked ~ .konsertit-page__nuolet > .konsertti3__label {
    display:block;
}
#konsertti2:checked ~ .konsertit-page__nuolet > .konsertti2__label,
#konsertti2:checked ~ .konsertit-page__nuolet > .konsertti3__label > i:first-child,
#konsertti2:checked ~ .konsertit-page__nuolet > .konsertti1__label > i:last-child {
    display:none;
}

#konsertti3:checked ~ .konsertit-page__nuolet > .konsertti2__label,
#konsertti3:checked ~ .konsertit-page__nuolet > .konsertti4__label {
    display:block;
}
#konsertti3:checked ~ .konsertit-page__nuolet > .konsertti3__label,
#konsertti3:checked ~ .konsertit-page__nuolet > .konsertti4__label > i:first-child,
#konsertti3:checked ~ .konsertit-page__nuolet > .konsertti2__label > i:last-child {
    display:none;
}

#konsertti4:checked ~ .konsertit-page__nuolet > .konsertti3__label,
#konsertti4:checked ~ .konsertit-page__nuolet > .konsertti5__label {
    display:block;
}
#konsertti4:checked ~ .konsertit-page__nuolet > .konsertti2__label,
#konsertti4:checked ~ .konsertit-page__nuolet > .konsertti4__label,
#konsertti4:checked ~ .konsertit-page__nuolet > .konsertti5__label > i:first-child,
#konsertti4:checked ~ .konsertit-page__nuolet > .konsertti3__label > i:last-child {
    display:none;
}

#konsertti5:checked ~ .konsertit-page__nuolet > .konsertti4__label {
    display:block;
}
#konsertti5:checked ~ .konsertit-page__nuolet > .konsertti2__label,
#konsertti5:checked ~ .konsertit-page__nuolet > .konsertti3__label,
#konsertti5:checked ~ .konsertit-page__nuolet > .konsertti5__label,
#konsertti5:checked ~ .konsertit-page__nuolet > .konsertti4__label > i:last-child {
    display:none;
}













/* FOOTER */

#footer {
  margin-top:-6px;
  display:flex;
  gap:2em;
  padding:1em 2em 3em 2em;
  flex-wrap: wrap;
  align-items:center;
  background: var(--väri-tumma-600);
}

#footer > div {
  z-index:3;

}

.footer__logo {
  width: 100px;
  height:auto;
}

.aalto  {
  z-index:5;
  position:relative;
  margin-bottom: -6px;
  background:transparent;
  margin-left:-5px;
  margin-right:-5px;
  fill: var(--väri-tumma-600);
}

.ajankohtaista__svg {
  position:relative;
  margin-top: -12vmax;
}


.ylahuuli {
  position:relative;
  margin-bottom: -6vmax;
  margin-top:-1px;
  transform-origin: top;
  transform: scaleY(.4);
  filter: drop-shadow(0px 2px 4px #000c);

}

.alahuuli {
  margin-top: -4vmax;
  transform-origin: bottom;
  transform: scaleY(.7);
  filter: drop-shadow(0px -2px 4px #000c);


}



/* ELEMENTS */

hr {
  width:50%;
  margin:1em auto;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

hr.invert {

  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0));
}

svg {
  position:absolute;
  fill: var(--väri-vaalea-200);
  height: auto;
  transform-origin: center;
  transform: rotate(0deg) scale(1,1);
  pointer-events: none;
}
svg text {
  text-transform: uppercase;
}


.svg__layer1 {
  opacity: 0.3;
  transition: transform 1000ms ease-out;
  width: 40vmin;
}

.svg__layer1 text {
  font-size: 0.85rem;
  font-stretch: 76.5%;
}

.svg__layer2 {
  opacity: 0.2;
  transition: transform 1400ms ease-out;
  width: 60vmin;
  filter: blur(1px);
  -webkit-filter: blur(1px);
}
.svg__layer2 text {
  font-family: var(--ff-otsikko-s);
  letter-spacing: 0px;;
}

.svg__layer3 {
  opacity: 0.15;
  transition: transform 1800ms ease-out;
  width:87vmin;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.svg__layer3 text {
  font-stretch: 75%;
  letter-spacing: -.2px;
}

.svg__layer4 {
  opacity: 0.1;
  transition: transform 1800ms ease-out;
  width: 125vmin;
  filter: blur(3px);
  -webkit-filter: blur(3px);
}

.svg__layer4 text {
  font-family: var(--ff-otsikko-s);
  letter-spacing: 0px;;
}

.svg__layer5 {
  opacity: 0.05;
  transition: transform 2200ms ease-out;
  width: 175vmin;
  filter: blur(4px);
  -webkit-filter: blur(4px);
}

.svg__layer3 text {
  font-stretch: 75%;
  letter-spacing: -.2px;
}



/* UTILITIES */

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

.flex-column {

  flex-direction: column;

}

.fs-s {
  font-size: var(--fs-s);
}

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

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

.fs-xxl {
  font-size: var(--fs-xxl);
}

.fw-500 {
font-weight: 500;
}

.vaalea600 {
  color: var(--väri-vaalea-600);

}

.ta-center {
  text-align:center;
}

.grid-2col {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.5em;
}

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



/* KUOROLAISILLE */

#linktree {
  background: var(--väri-tumma-400);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:2em;
  gap:1em;
}

#linktree h1 {
  position:relative;
}

#linktree > div > div {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.aksentti {
  color: var(--väri-aksentti);
  display:block;
  outline: 3px solid var(--väri-aksentti);
}
.ilmoitustaulu {
  border: 4px solid black;
  padding: 2em;
  background: url(https://naissound.fi/img/liitutaulu.jpg);

}

.ilmoitustaulu p {
  color: white;
  font-weight:600;
}

.ilmoitustaulu h3 {
  color: white;
  font-weight:600;
  font-style:italic;
  text-decoration:underline;
  text-align:left;
  margin: 0 0 1em 0;
}


.kuorolaisille {
  position:absolute;
  top:1em;
  right:1em;
  z-index:12;
  padding:1em; 
  font-size:.5rem;
  line-height:1.3;
  text-align:right;


}
.kuorolaisille a {
  color:white;
}
.kuorolaisille i {
  font-size:1.5rem;
}

.kuorolaisille a:hover, 
.kuorolaisille a:focus {
  color: var(--väri-aksentti-hover);
  filter:drop-shadow(2px 2px 5px var(--väri-aksentti-hover));
}