@import url(https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap);
/* Cormorant Infant */
/* Open Sans */
figure, body, html {
  margin: 0; }

figure {
  /* overflow: hidden; */ }

.yle__app > .yle__navigation {
  margin-bottom: 0;
  display: none; }

.yle__section--article.yle__section--fullWidth {
  margin-bottom: 0; }

.yle__footer {
  z-index: 1; }

html #app, body #app {
  min-height: auto; }

.yle__footer {
  display: none; }

.yle-header-ad {
  display: none; }

html #app .yle__app, body #app .yle__app {
  padding-bottom: 0; }

/* Piilotetaan areena-playerin virheilmoitus */
.AspectRatio__AspectRatioWrapper-sc-189l4xf-0 {
  display: none; }

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.progress-wrapper[data-v-70fb958a] {
  position: fixed;
  background-color: #262a2e;
  z-index: 210;
  height: 3px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
}
.progress-bar[data-v-70fb958a] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 215;
  height: 100%;
  width: 100%;
  background: #8EAD9C;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.inner-loader-wrapper[data-v-375f125f] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #e5e5e5;
  transition: 0.5s;
  z-index: 220;
}
.inner-loader-wrapper > p[data-v-375f125f] {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Open Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: #000;
}
.hidden[data-v-375f125f] {
  visibility: hidden;
  opacity: 0;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.outer-image-wrapper[data-v-d9c04ea4] {
  width: 100%;
  padding-bottom: 15px;
}
.outer-image-wrapper > .inner-image-wrapper[data-v-d9c04ea4] {
  max-width: 100%;
}
.outer-image-wrapper > .inner-image-wrapper > img[data-v-d9c04ea4] {
  display: block;
  width: 100%;
}
.outer-image-wrapper > .inner-image-wrapper > p[data-v-d9c04ea4] {
  font-family: "Cormorant Infant", serif;
  font-size: 18px;
  font-weight: 500;
  color: #4d4d4d;
  font-style: italic;
  width: calc(100% - 30px);
  margin: 5px auto 10px auto;
  padding: 0;
  /*text-shadow: var(--shadow);*/
}
.outer-image-wrapper > hr[data-v-d9c04ea4] {
  width: calc(100% - 30px);
  margin: 0 auto;
  border: none;
  height: 1.5px;
  background-color: #e5e5e5;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.outer-landing-wrapper[data-v-a07e830a] {
  width: 100%;
  text-align: center;
}
.outer-landing-wrapper > .landing-background[data-v-a07e830a] {
  width: 100%;
  height: 120vh;
  min-height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (max-width: 375px) {
.outer-landing-wrapper > .landing-background[data-v-a07e830a] {
      background-size: auto 100%;
      height: 130vh;
}
}
.outer-landing-wrapper > .landing-background > .inner-landing-wrapper[data-v-a07e830a] {
  position: absolute;
  max-width: 550px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
@media (min-width: 550px) {
.outer-landing-wrapper > .landing-background > .inner-landing-wrapper[data-v-a07e830a] {
      min-width: 550px;
}
}
@media (max-width: 550px) {
.outer-landing-wrapper > .landing-background > .inner-landing-wrapper[data-v-a07e830a] {
      max-width: none;
      min-width: none;
      width: 100%;
}
}
h1[data-v-a07e830a] {
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  font-size: 80px;
  color: #fff;
  line-height: 0.9;
  padding: 10px;
  margin: 0;
  text-shadow: 5px 5px 15px #000;
}
@media (max-width: 475px) {
h1[data-v-a07e830a] {
      font-size: 50px;
}
}
h1 > span[data-v-a07e830a] {
  font-weight: 700;
}
.intro-wrapper[data-v-a07e830a] {
  background-color: #fff;
  max-width: 550px;
  padding: 10px 0 30px;
  margin: 0;
}
@media (max-width: 550px) {
.intro-wrapper[data-v-a07e830a] {
      margin: 0 10px;
}
}
.intro-wrapper > h2[data-v-a07e830a] {
  padding: 20px 15px 0;
  font-size: 25px;
  font-family: "Cormorant Infant", serif;
  font-weight: 500;
  font-style: italic;
  margin: 0;
}
@media (max-width: 475px) {
.intro-wrapper > h2[data-v-a07e830a] {
      font-size: 22px;
      padding: 15px 10px 0;
}
}
.intro-wrapper > h2 > strong[data-v-a07e830a] {
  font-weight: 700;
}
.diamond[data-v-a07e830a] {
  width: 50px;
  height: 50px;
  margin: 30px auto;
}
.diamond > img[data-v-a07e830a] {
  display: block;
  width: 50px;
  height: 50px;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
p[data-v-729a93af] {
  font-family: "Open Sans", sans-serif;
  position: relative;
  margin: 0;
  padding: 0 0 16px 0;
}
[data-v-729a93af] p > strong {
  font-weight: 700;
}
[data-v-729a93af] p > span.first-character {
  font-family: "Cormorant Infant", serif;
  font-weight: 700;
  color: #8EAD9C;
  float: left;
  font-size: 125px;
  line-height: 95px;
  padding-right: 25px;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.outer-audio-wrapper[data-v-1ef60613] {
  width: 100%;
  overflow: hidden;
}
.outer-audio-wrapper > .inner-audio-wrapper > .nopeet-ja-syvat[data-v-1ef60613] {
  font-size: 0;
}
.outer-audio-wrapper > .inner-audio-wrapper > .nopeet-ja-syvat > img[data-v-1ef60613] {
  width: 100%;
}
.outer-audio-wrapper > .inner-audio-wrapper[data-v-1ef60613] {
  max-width: 550px;
  margin: 0 auto;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.outer-video-wrapper[data-v-0f89818e] {
  width: 100%;
}
.outer-video-wrapper > .inner-video-wrapper[data-v-0f89818e] {
  position: relative;
}
.outer-video-wrapper > .inner-video-wrapper > video[data-v-0f89818e] {
  width: 100%;
  display: block;
}
.outer-video-wrapper > .text-wrapper > p[data-v-0f89818e] {
  font-family: "Cormorant Infant", serif;
  font-size: 18px;
  font-weight: 500;
  color: #4d4d4d;
  font-style: italic;
  width: calc(100% - 30px);
  margin: 5px auto 10px auto;
  padding: 0;
}
.outer-video-wrapper > .text-wrapper > hr[data-v-0f89818e] {
  width: calc(100% - 30px);
  margin: 0 auto;
  border: none;
  height: 1.5px;
  background-color: #e5e5e5;
}
.btn-volume[data-v-0f89818e] {
  outline: none;
  border: none;
  border-radius: 10px;
  height: 45px;
  width: 45px;
  background-size: 40px 40px;
  background-position: center center;
  background-color: rgba(0, 128, 159, 0.6);
  background-repeat: no-repeat;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.btn-hidden[data-v-0f89818e] {
  display: none;
}

@charset "UTF-8";
/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
/* Aikajanan sisältöblokki */
.timeline-entry[data-v-21d64315] {
  max-width: 500px;
  position: relative;
  margin-left: 30px;
  border-top: 3px dashed #999;
  transition-property: 'opacity';
  transition-duration: .3s;
}
.timeline-entry[data-v-21d64315]:before {
  left: -8px;
  width: calc(100% + 8px);
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: calc(100%);
  height: 100%;
}
.timeline-entry.current[data-v-21d64315] {
  border-top: 3px dashed #FFD91D;
}
.timeline-entry.future[data-v-21d64315] {
  opacity: .3;
}

/* Aikajanaviiva */
.timeline-entry[data-v-21d64315]:after {
  content: "";
  display: block;
  width: 2px;
  margin-left: -10px;
  height: calc(100% - 10px);
  position: absolute;
  background: #999;
  top: 0;
}
.timeline-entry.current[data-v-21d64315]:after {
  background: #FFD91D;
}

/* Aikajanablokin mediasisältö */
.timeline-info[data-v-21d64315] {
  margin-right: 20px;
  margin-left: 10px;
  top: -15px;
  position: relative;
  color: #e5e5e5;
  font-family: "Open Sans", sans-serif;
}
.timeline-info h4[data-v-21d64315] {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  padding: 20px 0;
  position: relative;
}
@media (max-width: 39.375em) {
.timeline-info h4[data-v-21d64315] {
      font-size: 30px;
}
}

/* Alaotsikko, jos käytetään */
.timeline-info h6[data-v-21d64315] {
  margin: 0;
  font-size: 20px;
  padding: 10px 0 24px;
}

/* Päivämäärän / kellonajan perustyylit */
.timeline-entry h5[data-v-21d64315] {
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 32px;
  margin: 0;
  color: #fff;
  position: relative;
  top: -16px;
  transform-origin: center;
}

/* sd-left-col = Aikajanan päivämäärä ja merkkipallo */
.sd-left-col[data-v-21d64315] {
  width: 120px;
}
.timeline-entry.current h5[data-v-21d64315] {
  transform: scale(1.1);
}
@media (min-width: 900px) {
.sd-left-col[data-v-21d64315] {
    text-align: center;
    position: absolute;
    margin-left: -150px;
    width: 120px;
    margin-top: -4px;
    left: 0;
    padding-top: 0;
}
.timeline-entry .sd-left-col[data-v-21d64315]:before {
    left: auto;
    right: -30px;
    top: -7px;
}
.timeline-entry .sd-left-col h5[data-v-21d64315] {
    left: 0;
    padding-top: 0;
    transition: all .2s ease-in-out;
    transform-origin: right center;
}
.timeline-info h4[data-v-21d64315] {
    margin-top: 20px;
}
}
@media (min-width: 39.375em) {
.sd-left-col[data-v-21d64315]:before {
    left: -8px;
}
}
@media (max-width: 900px) {
.sd-left-col[data-v-21d64315]:before {
    left: -19px;
    top: -11px;
}
.timeline-entry h5[data-v-21d64315] {
    left: 20px;
    padding-top: 20px;
}
}
.timeline-entry .sd-left-col[data-v-21d64315]:before {
  content: "";
  display: block;
  position: absolute;
  background: #999;
  /*top: -7px;*/
  width: 19px;
  height: 19px;
  border-radius: 50%;
}
.timeline-entry.current .sd-left-col[data-v-21d64315]:before {
  background: #FFD91D;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.timeline-outer-wrapper[data-v-0b01728d] {
  box-sizing: border-box;
  width: 100%;
  z-index: 100;
  margin: 40px 0;
  padding: 1px;
  background-color: #4d4d4d;
}
@media (max-width: 550px) {
.timeline-outer-wrapper[data-v-0b01728d] {
      margin: 0;
      padding: 0;
}
}
.timeline-inner-wrapper[data-v-0b01728d] {
  max-width: 550px;
  margin: -25px auto;
}
@media (max-width: 550px) {
.timeline-inner-wrapper[data-v-0b01728d] {
      margin: 0 auto;
}
}
.timeline[data-v-0b01728d] {
  position: relative;
  background-color: #333333;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
@media (min-width: 71.25em) {
.timeline .timeline[data-v-0b01728d]:after {
      left: 151px;
}
}
.timeline-outer-wrapper > .timeline-inner-wrapper > .timeline > .timeline-title-wrapper[data-v-0b01728d] {
  padding: 180px 0 60px;
}
.timeline-outer-wrapper > .timeline-inner-wrapper > .timeline > .timeline-title-wrapper > h3[data-v-0b01728d] {
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  text-align: center;
  font-size: 65px;
  line-height: 0.9;
  padding: 30px 10px;
  margin: 0;
  text-shadow: 2px 2px 20px #000;
  color: #fff;
}
@media (max-width: 39.375em) {
.timeline-outer-wrapper > .timeline-inner-wrapper > .timeline > .timeline-title-wrapper > h3[data-v-0b01728d] {
      font-size: 50px;
      padding: 0 10px;
}
}

/* Pallo aikajanana lopussa */
.timeline[data-v-0b01728d]:after {
  content: "";
  display: block;
  position: absolute;
  background: #FFD91D;
  bottom: -10px;
  left: 11px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  z-index: 99999999;
}

/* Video aikajanan lopussa */
.timeline-end-video-wrapper[data-v-0b01728d] {
  background-color: #333333;
  padding-top: 30px;
  font-size: 0;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
/*
.outer-authors-wrapper {
  width: 100%;
  padding: 20px 0 0;
}*/
.feedback[data-v-84a9d7a8] {
  margin: 30px 0 20px;
  text-align: center;
}
.feedback > a[data-v-84a9d7a8] {
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  background-color: #8EAD9C;
  color: #fff;
}
.outer-authors-wrapper[data-v-84a9d7a8] {
  width: 100%;
  height: 110vh;
  padding: 1px;
  margin: 20px 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
@media (max-width: 550px) {
.outer-authors-wrapper[data-v-84a9d7a8] {
      padding: 0;
      height: 150vh;
}
}
.outer-authors-wrapper > .inner-authors-wrapper[data-v-84a9d7a8] {
  background-color: #333333;
  color: #fff;
  width: 550px;
  margin: auto;
  padding: 15px 15px 20px;
}
@media (max-width: 550px) {
.outer-authors-wrapper > .inner-authors-wrapper[data-v-84a9d7a8] {
      width: calc(100% - 30px);
      margin: 30px auto;
}
}
.outer-authors-wrapper > .inner-authors-wrapper > .authors[data-v-84a9d7a8] {
  padding: 0 0 15px;
}
.outer-authors-wrapper > .inner-authors-wrapper > .authors > h1[data-v-84a9d7a8] {
  font-family: "Cormorant Infant", serif;
  font-weight: 400;
  font-size: 40px;
  padding-bottom: 15px;
  margin: 0;
}
.outer-authors-wrapper > .inner-authors-wrapper > .authors > p[data-v-84a9d7a8] {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.9;
  margin: 0;
}
.outer-authors-wrapper > .inner-authors-wrapper > .authors > p > strong[data-v-84a9d7a8] {
  font-weight: 700;
}
.outer-authors-wrapper > .inner-authors-wrapper > .authors > p > .italic[data-v-84a9d7a8] {
  font-style: italic;
}
.outer-authors-wrapper > .inner-authors-wrapper > .date[data-v-84a9d7a8] {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  padding-top: 20px;
  text-align: center;
}

div[data-v-5e2f0fd6] {
  text-align: center;
  padding: 20px 0;
}
div > a[data-v-5e2f0fd6] {
  margin: 0 3px;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.outer-block-wrapper[data-v-71cc9591] {
  width: 100%;
}
.outer-block-wrapper > .block-background[data-v-71cc9591] {
  width: 100%;
  height: 100vh;
  min-height: 800px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
@media (max-width: 375px) {
.outer-block-wrapper > .block-background[data-v-71cc9591] {
      height: 100vh;
}
}
@media (min-width: 375px) and (max-width: 550px) {
.outer-block-wrapper > .block-background[data-v-71cc9591] {
      height: 100vh;
}
}
@media (min-width: 551px) and (max-width: 768px) {
.outer-block-wrapper > .block-background[data-v-71cc9591] {
      height: 110vh;
}
}
@media (min-width: 769px) and (max-width: 980px) {
.outer-block-wrapper > .block-background[data-v-71cc9591] {
      height: 120vh;
}
}
@media (min-width: 981px) and (min-aspect-ratio: 8 / 5) {
.outer-block-wrapper > .block-background[data-v-71cc9591] {
      height: 136vh;
}
}
.outer-block-wrapper > .block-background > .text-block-wrapper[data-v-71cc9591] {
  position: absolute;
  width: 100%;
  max-width: 550px;
  background-color: #fff;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 20px 15px;
}
@media (max-width: 550px) {
.outer-block-wrapper > .block-background > .text-block-wrapper[data-v-71cc9591] {
      max-width: none;
      width: calc(100% - 20px);
}
}
.outer-block-wrapper > .block-background > .text-block-wrapper > h3[data-v-71cc9591] {
  font-family: "Cormorant Infant", serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  color: #333333;
  margin: 0;
  padding-bottom: 20px;
}

/* Colors */
/* Fonts */
/* Font sizes */
/* Font weights */
.sd-outer-app-container[data-v-3ea74058] {
  width: 100%;
  background-color: #e5e5e5;
}

/* Teksityylit */
.sd-paragraph[data-v-3ea74058] {
  background-color: #fff;
  max-width: 550px;
  margin: 0 auto;
  padding: 20px 15px;
}
@media (max-width: 550px) {
.sd-paragraph[data-v-3ea74058] {
      margin: 0 10px;
}
}
.sd-paragraph > h3[data-v-3ea74058] {
  font-family: "Cormorant Infant", serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 1;
  color: #333333;
  padding-bottom: 20px;
  hyphens: manual;
  margin: 0;
}
@media (max-width: 375px) {
.sd-paragraph > h3[data-v-3ea74058] {
      font-size: 55px;
}
}
.sd-media-container[data-v-3ea74058] {
  max-width: 550px;
  margin: 0 auto;
  background-color: #fff;
}
@media (max-width: 550px) {
.sd-media-container[data-v-3ea74058] {
      width: calc(100% - 20px);
}
}
.p-with-margin[data-v-3ea74058] {
  margin-top: 20px;
}
.diamond[data-v-3ea74058] {
  width: 50px;
  height: 50px;
  margin: 10px auto;
}
.diamond > img[data-v-3ea74058] {
  display: block;
  width: 50px;
  height: 50px;
}


/*# sourceMappingURL=styles.css.map*/