@import url(https://fonts.googleapis.com/css2?family=Germania+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap);
@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark {
  background: #1a1a1a; }

.bg-light {
  background: #f2f2f2; }

.bg-army-light {
  background: #e4d9c7; }

.bg-army-dark {
  background: #aba480; }

.bg-army-subtext {
  background: #7d8e5c; }

.bg-winter-light {
  background: #a6aa9d; }

.bg-winter-dark {
  background: #7d8077; }

.bg-army-blue {
  background: #01499d; }

.color-dark {
  color: #1a1a1a; }

.color-light {
  color: #f2f2f2; }

.color-army-light {
  color: #e4d9c7; }

.color-army-dark {
  color: #aba480; }

.color-army-subtext {
  color: #7d8e5c; }

.color-winter-light {
  color: #a6aa9d; }

.color-winter-dark {
  color: #7d8077; }

.color-army-blue {
  color: #01499d; }

.box-block {
  display: block; }

.box-flex {
  display: flex; }

.box-hide {
  display: none; }

.box-show {
  display: inherit; }

.font-base {
  font-family: Yle-Medium, Arial, sans-serif; }

.font-header {
  font-family: Germania One, serif; }

.font-mono {
  font-family: Cutive mono, serif; }

.gap-top-300 {
  margin-top: 0.8rem; }

.gap-top-400 {
  margin-top: 1rem; }

.gap-top-500 {
  margin-top: 1.25rem; }

.gap-top-600 {
  margin-top: 1.6rem; }

.gap-top-700 {
  margin-top: 2rem; }

.gap-top-900 {
  margin-top: 3rem; }

.gap-right-300 {
  margin-right: 0.8rem; }

.gap-right-400 {
  margin-right: 1rem; }

.gap-right-500 {
  margin-right: 1.25rem; }

.gap-right-600 {
  margin-right: 1.6rem; }

.gap-right-700 {
  margin-right: 2rem; }

.gap-right-900 {
  margin-right: 3rem; }

.gap-bottom-300 {
  margin-bottom: 0.8rem; }

.gap-bottom-400 {
  margin-bottom: 1rem; }

.gap-bottom-500 {
  margin-bottom: 1.25rem; }

.gap-bottom-600 {
  margin-bottom: 1.6rem; }

.gap-bottom-700 {
  margin-bottom: 2rem; }

.gap-bottom-900 {
  margin-bottom: 3rem; }

.gap-left-300 {
  margin-left: 0.8rem; }

.gap-left-400 {
  margin-left: 1rem; }

.gap-left-500 {
  margin-left: 1.25rem; }

.gap-left-600 {
  margin-left: 1.6rem; }

.gap-left-700 {
  margin-left: 2rem; }

.gap-left-900 {
  margin-left: 3rem; }

.pad-top-300 {
  padding-top: 0.8rem; }

.pad-top-400 {
  padding-top: 1rem; }

.pad-top-500 {
  padding-top: 1.25rem; }

.pad-top-600 {
  padding-top: 1.6rem; }

.pad-top-700 {
  padding-top: 2rem; }

.pad-top-900 {
  padding-top: 3rem; }

.pad-right-300 {
  padding-right: 0.8rem; }

.pad-right-400 {
  padding-right: 1rem; }

.pad-right-500 {
  padding-right: 1.25rem; }

.pad-right-600 {
  padding-right: 1.6rem; }

.pad-right-700 {
  padding-right: 2rem; }

.pad-right-900 {
  padding-right: 3rem; }

.pad-bottom-300 {
  padding-bottom: 0.8rem; }

.pad-bottom-400 {
  padding-bottom: 1rem; }

.pad-bottom-500 {
  padding-bottom: 1.25rem; }

.pad-bottom-600 {
  padding-bottom: 1.6rem; }

.pad-bottom-700 {
  padding-bottom: 2rem; }

.pad-bottom-900 {
  padding-bottom: 3rem; }

.pad-left-300 {
  padding-left: 0.8rem; }

.pad-left-400 {
  padding-left: 1rem; }

.pad-left-500 {
  padding-left: 1.25rem; }

.pad-left-600 {
  padding-left: 1.6rem; }

.pad-left-700 {
  padding-left: 2rem; }

.pad-left-900 {
  padding-left: 3rem; }

.stack-300 {
  z-index: 0; }

.stack-400 {
  z-index: 10; }

.stack-500 {
  z-index: 20; }

.stack-600 {
  z-index: 30; }

.stack-700 {
  z-index: 40; }

.text-300 {
  font-size: 0.8rem; }

.text-400 {
  font-size: 1rem; }

.text-500 {
  font-size: 1.25rem; }

.text-600 {
  font-size: 1.6rem; }

.text-700 {
  font-size: 2rem; }

.text-900 {
  font-size: 3rem; }

.weight-light {
  font-weight: 300; }

.weight-regular {
  font-weight: 400; }

.weight-bold {
  font-weight: 700; }

.width-full {
  width: 100%; }

.width-half {
  width: 50%; }

.width-quarter {
  width: 25%; }

.width-third {
  width: 33.33333%; }

@media screen and (min-width: 22em) {
  .smd\:box-block {
    display: block; }
  .smd\:box-flex {
    display: flex; }
  .smd\:box-hide {
    display: none; }
  .smd\:box-show {
    display: inherit; }
  .smd\:text-300 {
    font-size: 0.8rem; }
  .smd\:text-400 {
    font-size: 1rem; }
  .smd\:text-500 {
    font-size: 1.25rem; }
  .smd\:text-600 {
    font-size: 1.6rem; }
  .smd\:text-700 {
    font-size: 2rem; }
  .smd\:text-900 {
    font-size: 3rem; }
  .smd\:width-full {
    width: 100%; }
  .smd\:width-half {
    width: 50%; }
  .smd\:width-quarter {
    width: 25%; }
  .smd\:width-third {
    width: 33.33333%; } }

@media screen and (min-width: 36em) {
  .sm\:box-block {
    display: block; }
  .sm\:box-flex {
    display: flex; }
  .sm\:box-hide {
    display: none; }
  .sm\:box-show {
    display: inherit; }
  .sm\:text-300 {
    font-size: 0.8rem; }
  .sm\:text-400 {
    font-size: 1rem; }
  .sm\:text-500 {
    font-size: 1.25rem; }
  .sm\:text-600 {
    font-size: 1.6rem; }
  .sm\:text-700 {
    font-size: 2rem; }
  .sm\:text-900 {
    font-size: 3rem; }
  .sm\:width-full {
    width: 100%; }
  .sm\:width-half {
    width: 50%; }
  .sm\:width-quarter {
    width: 25%; }
  .sm\:width-third {
    width: 33.33333%; } }

@media screen and (min-width: 48em) {
  .md\:box-block {
    display: block; }
  .md\:box-flex {
    display: flex; }
  .md\:box-hide {
    display: none; }
  .md\:box-show {
    display: inherit; }
  .md\:text-300 {
    font-size: 0.8rem; }
  .md\:text-400 {
    font-size: 1rem; }
  .md\:text-500 {
    font-size: 1.25rem; }
  .md\:text-600 {
    font-size: 1.6rem; }
  .md\:text-700 {
    font-size: 2rem; }
  .md\:text-900 {
    font-size: 3rem; }
  .md\:width-full {
    width: 100%; }
  .md\:width-half {
    width: 50%; }
  .md\:width-quarter {
    width: 25%; }
  .md\:width-third {
    width: 33.33333%; } }

@media screen and (min-width: 62em) {
  .lg\:box-block {
    display: block; }
  .lg\:box-flex {
    display: flex; }
  .lg\:box-hide {
    display: none; }
  .lg\:box-show {
    display: inherit; }
  .lg\:text-300 {
    font-size: 0.8rem; }
  .lg\:text-400 {
    font-size: 1rem; }
  .lg\:text-500 {
    font-size: 1.25rem; }
  .lg\:text-600 {
    font-size: 1.6rem; }
  .lg\:text-700 {
    font-size: 2rem; }
  .lg\:text-900 {
    font-size: 3rem; }
  .lg\:width-full {
    width: 100%; }
  .lg\:width-half {
    width: 50%; }
  .lg\:width-quarter {
    width: 25%; }
  .lg\:width-third {
    width: 33.33333%; } }

:root {
  --size-500: 1em * 1.25; }

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/ }
  @media (max-width: 36em) {
    .shape-arrow {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%); } }

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px; }

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%; }

.date {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0; }

.quote-wrapper {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em; }

p {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48); }

#bodytext-def {
  margin-bottom: 15px; }

#bodytext-def > p {
  margin-bottom: 7.8px; }

h1, h2, h3, h4 {
  margin-bottom: 15px; }

.data-state-combined {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0; }

.highlight-wrapper {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5)); }

.outer-image-wrapper {
  position: relative; }

.outer-image-wrapper > picture {
  width: 100%;
  padding: 0 0 30px 0; }
  @media (max-width: 600px) {
    .outer-image-wrapper > picture {
      padding: 0 0 60px 0; } }
  @media (max-width: 500px) {
    .outer-image-wrapper > picture {
      padding: 0 0 80px 0; } }
  @media (max-width: 400px) {
    .outer-image-wrapper > picture {
      padding: 0 0 100px 0; } }

.outer-image-wrapper {
  position: relative; }

.outer-image-wrapper > img {
  width: 100%;
  padding: 0 0 30px 0; }
  @media (max-width: 600px) {
    .outer-image-wrapper > img {
      padding: 0 0 60px 0; } }
  @media (max-width: 500px) {
    .outer-image-wrapper > img {
      padding: 0 0 30px 0; } }
  @media (max-width: 400px) {
    .outer-image-wrapper > img {
      padding: 0 0 25px 0; } }

.outer-image-wrapper > picture {
  width: 100%;
  padding: 0 0 30px 0; }
  @media (max-width: 600px) {
    .outer-image-wrapper > picture {
      padding: 0 0 60px 0; } }
  @media (max-width: 500px) {
    .outer-image-wrapper > picture {
      padding: 0 0 80px 0; } }
  @media (max-width: 400px) {
    .outer-image-wrapper > picture {
      padding: 0 0 100px 0; } }

.outer-image-wrapper > .caption-wrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px); }
  @media (max-width: 500px) {
    .outer-image-wrapper > .caption-wrapper {
      min-height: 80px; } }
  @media (max-width: 400px) {
    .outer-image-wrapper > .caption-wrapper {
      min-height: 100px; } }

.outer-image-wrapper > .caption-wrapper-w {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px); }
  @media (max-width: 500px) {
    .outer-image-wrapper > .caption-wrapper-w {
      min-height: 80px; } }
  @media (max-width: 400px) {
    .outer-image-wrapper > .caption-wrapper-w {
      min-height: 100px; } }

.outer-image-wrapper > .caption-wrapper > p {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4); }
  @media (max-width: 600px) {
    .outer-image-wrapper > .caption-wrapper > p {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3); } }

.outer-image-wrapper > .caption-wrapper-w > p {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4); }
  @media (max-width: 600px) {
    .outer-image-wrapper > .caption-wrapper-w > p {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3); } }

.lentajapallo {
  display: block;
  margin: 0 auto;
  width: 100px; }

.kasipallo {
  display: block;
  margin: 0 auto;
  width: 100px; }

.split {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%; }

.split-2 {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%; }

.nimil {
  display: block;
  margin: 0 auto;
  width: 150px; }

/* Yle Fonts */
@font-face {
  font-family: 'Yle-Medium';
  src: url(//deski.yle.fi/2020-06-inttivuosi/fonts/4bea9b802c2b2d8b170907d9ac12b129.otf);
  font-display: swap; }

figure, body, html {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  background: #fff; }

/* ------ General styles ------ */
.yle__app > .yle__navigation {
  margin-bottom: 0; }

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

.yle__footer {
  z-index: 1; }

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

#bodytext-def {
  margin-bottom: 15px; }

#bodytext-def > p {
  margin-bottom: 4px; }

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

.yle-header {
  position: relative; }

.yle__headerWrapper {
  position: relative;
  z-index: 1; }

.yle-header.sticky {
  position: relative;
  top: 0; }

.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; }

/* Tavalliseen body-text-flowhun liittyvät elementit */
.wrapper {
  max-width: none;
  width: 94%;
  margin: 0 auto; }
  @media (min-width: 48em) {
    .wrapper {
      margin: 0 auto;
      max-width: 30rem;
      line-height: 1.48; } }

.wrapper > .wrapper {
  margin: 0 auto;
  width: 100%; }

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

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-84a9d7a8] {
  background: #1a1a1a;
}
.bg-light[data-v-84a9d7a8] {
  background: #f2f2f2;
}
.bg-army-light[data-v-84a9d7a8] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-84a9d7a8] {
  background: #aba480;
}
.bg-army-subtext[data-v-84a9d7a8] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-84a9d7a8] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-84a9d7a8] {
  background: #7d8077;
}
.bg-army-blue[data-v-84a9d7a8] {
  background: #01499d;
}
.color-dark[data-v-84a9d7a8] {
  color: #1a1a1a;
}
.color-light[data-v-84a9d7a8] {
  color: #f2f2f2;
}
.color-army-light[data-v-84a9d7a8] {
  color: #e4d9c7;
}
.color-army-dark[data-v-84a9d7a8] {
  color: #aba480;
}
.color-army-subtext[data-v-84a9d7a8] {
  color: #7d8e5c;
}
.color-winter-light[data-v-84a9d7a8] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-84a9d7a8] {
  color: #7d8077;
}
.color-army-blue[data-v-84a9d7a8] {
  color: #01499d;
}
.box-block[data-v-84a9d7a8] {
  display: block;
}
.box-flex[data-v-84a9d7a8] {
  display: flex;
}
.box-hide[data-v-84a9d7a8] {
  display: none;
}
.box-show[data-v-84a9d7a8] {
  display: inherit;
}
.font-base[data-v-84a9d7a8] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-84a9d7a8] {
  font-family: Germania One, serif;
}
.font-mono[data-v-84a9d7a8] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-84a9d7a8] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-84a9d7a8] {
  margin-top: 1rem;
}
.gap-top-500[data-v-84a9d7a8] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-84a9d7a8] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-84a9d7a8] {
  margin-top: 2rem;
}
.gap-top-900[data-v-84a9d7a8] {
  margin-top: 3rem;
}
.gap-right-300[data-v-84a9d7a8] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-84a9d7a8] {
  margin-right: 1rem;
}
.gap-right-500[data-v-84a9d7a8] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-84a9d7a8] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-84a9d7a8] {
  margin-right: 2rem;
}
.gap-right-900[data-v-84a9d7a8] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-84a9d7a8] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-84a9d7a8] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-84a9d7a8] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-84a9d7a8] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-84a9d7a8] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-84a9d7a8] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-84a9d7a8] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-84a9d7a8] {
  margin-left: 1rem;
}
.gap-left-500[data-v-84a9d7a8] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-84a9d7a8] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-84a9d7a8] {
  margin-left: 2rem;
}
.gap-left-900[data-v-84a9d7a8] {
  margin-left: 3rem;
}
.pad-top-300[data-v-84a9d7a8] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-84a9d7a8] {
  padding-top: 1rem;
}
.pad-top-500[data-v-84a9d7a8] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-84a9d7a8] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-84a9d7a8] {
  padding-top: 2rem;
}
.pad-top-900[data-v-84a9d7a8] {
  padding-top: 3rem;
}
.pad-right-300[data-v-84a9d7a8] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-84a9d7a8] {
  padding-right: 1rem;
}
.pad-right-500[data-v-84a9d7a8] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-84a9d7a8] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-84a9d7a8] {
  padding-right: 2rem;
}
.pad-right-900[data-v-84a9d7a8] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-84a9d7a8] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-84a9d7a8] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-84a9d7a8] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-84a9d7a8] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-84a9d7a8] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-84a9d7a8] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-84a9d7a8] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-84a9d7a8] {
  padding-left: 1rem;
}
.pad-left-500[data-v-84a9d7a8] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-84a9d7a8] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-84a9d7a8] {
  padding-left: 2rem;
}
.pad-left-900[data-v-84a9d7a8] {
  padding-left: 3rem;
}
.stack-300[data-v-84a9d7a8] {
  z-index: 0;
}
.stack-400[data-v-84a9d7a8] {
  z-index: 10;
}
.stack-500[data-v-84a9d7a8] {
  z-index: 20;
}
.stack-600[data-v-84a9d7a8] {
  z-index: 30;
}
.stack-700[data-v-84a9d7a8] {
  z-index: 40;
}
.text-300[data-v-84a9d7a8] {
  font-size: 0.8rem;
}
.text-400[data-v-84a9d7a8] {
  font-size: 1rem;
}
.text-500[data-v-84a9d7a8] {
  font-size: 1.25rem;
}
.text-600[data-v-84a9d7a8] {
  font-size: 1.6rem;
}
.text-700[data-v-84a9d7a8] {
  font-size: 2rem;
}
.text-900[data-v-84a9d7a8] {
  font-size: 3rem;
}
.weight-light[data-v-84a9d7a8] {
  font-weight: 300;
}
.weight-regular[data-v-84a9d7a8] {
  font-weight: 400;
}
.weight-bold[data-v-84a9d7a8] {
  font-weight: 700;
}
.width-full[data-v-84a9d7a8] {
  width: 100%;
}
.width-half[data-v-84a9d7a8] {
  width: 50%;
}
.width-quarter[data-v-84a9d7a8] {
  width: 25%;
}
.width-third[data-v-84a9d7a8] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-84a9d7a8] {
    display: block;
}
.smd\:box-flex[data-v-84a9d7a8] {
    display: flex;
}
.smd\:box-hide[data-v-84a9d7a8] {
    display: none;
}
.smd\:box-show[data-v-84a9d7a8] {
    display: inherit;
}
.smd\:text-300[data-v-84a9d7a8] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-84a9d7a8] {
    font-size: 1rem;
}
.smd\:text-500[data-v-84a9d7a8] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-84a9d7a8] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-84a9d7a8] {
    font-size: 2rem;
}
.smd\:text-900[data-v-84a9d7a8] {
    font-size: 3rem;
}
.smd\:width-full[data-v-84a9d7a8] {
    width: 100%;
}
.smd\:width-half[data-v-84a9d7a8] {
    width: 50%;
}
.smd\:width-quarter[data-v-84a9d7a8] {
    width: 25%;
}
.smd\:width-third[data-v-84a9d7a8] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-84a9d7a8] {
    display: block;
}
.sm\:box-flex[data-v-84a9d7a8] {
    display: flex;
}
.sm\:box-hide[data-v-84a9d7a8] {
    display: none;
}
.sm\:box-show[data-v-84a9d7a8] {
    display: inherit;
}
.sm\:text-300[data-v-84a9d7a8] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-84a9d7a8] {
    font-size: 1rem;
}
.sm\:text-500[data-v-84a9d7a8] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-84a9d7a8] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-84a9d7a8] {
    font-size: 2rem;
}
.sm\:text-900[data-v-84a9d7a8] {
    font-size: 3rem;
}
.sm\:width-full[data-v-84a9d7a8] {
    width: 100%;
}
.sm\:width-half[data-v-84a9d7a8] {
    width: 50%;
}
.sm\:width-quarter[data-v-84a9d7a8] {
    width: 25%;
}
.sm\:width-third[data-v-84a9d7a8] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-84a9d7a8] {
    display: block;
}
.md\:box-flex[data-v-84a9d7a8] {
    display: flex;
}
.md\:box-hide[data-v-84a9d7a8] {
    display: none;
}
.md\:box-show[data-v-84a9d7a8] {
    display: inherit;
}
.md\:text-300[data-v-84a9d7a8] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-84a9d7a8] {
    font-size: 1rem;
}
.md\:text-500[data-v-84a9d7a8] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-84a9d7a8] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-84a9d7a8] {
    font-size: 2rem;
}
.md\:text-900[data-v-84a9d7a8] {
    font-size: 3rem;
}
.md\:width-full[data-v-84a9d7a8] {
    width: 100%;
}
.md\:width-half[data-v-84a9d7a8] {
    width: 50%;
}
.md\:width-quarter[data-v-84a9d7a8] {
    width: 25%;
}
.md\:width-third[data-v-84a9d7a8] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-84a9d7a8] {
    display: block;
}
.lg\:box-flex[data-v-84a9d7a8] {
    display: flex;
}
.lg\:box-hide[data-v-84a9d7a8] {
    display: none;
}
.lg\:box-show[data-v-84a9d7a8] {
    display: inherit;
}
.lg\:text-300[data-v-84a9d7a8] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-84a9d7a8] {
    font-size: 1rem;
}
.lg\:text-500[data-v-84a9d7a8] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-84a9d7a8] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-84a9d7a8] {
    font-size: 2rem;
}
.lg\:text-900[data-v-84a9d7a8] {
    font-size: 3rem;
}
.lg\:width-full[data-v-84a9d7a8] {
    width: 100%;
}
.lg\:width-half[data-v-84a9d7a8] {
    width: 50%;
}
.lg\:width-quarter[data-v-84a9d7a8] {
    width: 25%;
}
.lg\:width-third[data-v-84a9d7a8] {
    width: 33.33333%;
}
}
[data-v-84a9d7a8]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-84a9d7a8] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-84a9d7a8] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-84a9d7a8] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-84a9d7a8] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-84a9d7a8] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-84a9d7a8] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-84a9d7a8] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-84a9d7a8] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-84a9d7a8] {
  margin-bottom: 7.8px;
}
h1[data-v-84a9d7a8], h2[data-v-84a9d7a8], h3[data-v-84a9d7a8], h4[data-v-84a9d7a8] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-84a9d7a8] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-84a9d7a8] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-84a9d7a8] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-84a9d7a8] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-84a9d7a8] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-84a9d7a8] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-84a9d7a8] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-84a9d7a8] {
  position: relative;
}
.outer-image-wrapper > img[data-v-84a9d7a8] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-84a9d7a8] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-84a9d7a8] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-84a9d7a8] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-84a9d7a8] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-84a9d7a8] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-84a9d7a8] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-84a9d7a8] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-84a9d7a8] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-84a9d7a8] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-84a9d7a8] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-84a9d7a8] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-84a9d7a8] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-84a9d7a8] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-84a9d7a8] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-84a9d7a8] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-84a9d7a8] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-84a9d7a8] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-84a9d7a8] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-84a9d7a8] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-84a9d7a8] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-84a9d7a8] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-84a9d7a8] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.outer-authors-wrapper[data-v-84a9d7a8] {
  width: 100%;
  margin: 0;
  padding: 40px 0 30px 0;
  text-align: center;
  background-color: #aba480;
}
.inner-authors-wrapper[data-v-84a9d7a8] {
  max-width: 600px;
  margin: 0 auto;
}
@media (max-width: 620px) {
.inner-authors-wrapper[data-v-84a9d7a8] {
      max-width: none;
      width: 94%;
      margin: 0 auto;
}
}
h3[data-v-84a9d7a8], h4[data-v-84a9d7a8] {
  text-align: center;
  padding-top: 14px;
}
.name[data-v-84a9d7a8] {
  text-align: center;
}
.feedback[data-v-84a9d7a8] {
  margin: 0 0 40px 0;
}
.feedback > a[data-v-84a9d7a8] {
  font-family: 'Source Serif Pro', serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.45;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #e4d9c7;
  border-radius: 30px;
  color: #1a1a1a;
  border: #000 solid 4px;
}
@media (max-width: 400px) {
.feedback > a[data-v-84a9d7a8] {
      font-size: 22px;
}
}
h4[data-v-84a9d7a8] {
  margin-bottom: 8px;
}
.name[data-v-84a9d7a8] {
  padding: 0;
}
h3[data-v-84a9d7a8] {
  font-family: 'Source Serif Pro', serif;
  font-size: 24px;
  line-height: 1.45;
  margin: 0;
  padding: 0 0 20px 0;
}
p[data-v-84a9d7a8] {
  font-family: 'Source Serif Pro', serif;
  font-weight: 400;
  margin: 0;
  padding: 0 0 0.8em 0;
  font-size: 18px;
  line-height: 1.45;
  color: black;
  text-decoration: none;
}
strong[data-v-84a9d7a8] {
  font-weight: 700;
  color: #313d6d;
}
.date[data-v-84a9d7a8] {
  padding: 30px 0;
}

/* Maskaukseen tarvittavaa hienoa koodia */
/* Taustamaskit */
.gradient-top[data-v-84a9d7a8] {
  position: sticky;
  top: 0;
  z-index: 5;
  border: solid 14px transparent;
  background: rgba(171, 164, 128, 0.99) padding-box;
}
.gradient-bottom[data-v-84a9d7a8] {
  background: conic-gradient(from 30deg, #e4d9c7 0% 60deg, #aba480 0% 120deg, #e4d9c7 0% 50%, #aba480 0% 240deg, #e4d9c7 0% 300deg, #aba480 0%) 0 0/ 20px 34.64102px;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3c845006] {
  background: #1a1a1a;
}
.bg-light[data-v-3c845006] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3c845006] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3c845006] {
  background: #aba480;
}
.bg-army-subtext[data-v-3c845006] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3c845006] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3c845006] {
  background: #7d8077;
}
.bg-army-blue[data-v-3c845006] {
  background: #01499d;
}
.color-dark[data-v-3c845006] {
  color: #1a1a1a;
}
.color-light[data-v-3c845006] {
  color: #f2f2f2;
}
.color-army-light[data-v-3c845006] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3c845006] {
  color: #aba480;
}
.color-army-subtext[data-v-3c845006] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3c845006] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3c845006] {
  color: #7d8077;
}
.color-army-blue[data-v-3c845006] {
  color: #01499d;
}
.box-block[data-v-3c845006] {
  display: block;
}
.box-flex[data-v-3c845006] {
  display: flex;
}
.box-hide[data-v-3c845006] {
  display: none;
}
.box-show[data-v-3c845006] {
  display: inherit;
}
.font-base[data-v-3c845006] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3c845006] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3c845006] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3c845006] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3c845006] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3c845006] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3c845006] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3c845006] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3c845006] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3c845006] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3c845006] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3c845006] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3c845006] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3c845006] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3c845006] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3c845006] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3c845006] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3c845006] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3c845006] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3c845006] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3c845006] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3c845006] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3c845006] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3c845006] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3c845006] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3c845006] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3c845006] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3c845006] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3c845006] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3c845006] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3c845006] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3c845006] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3c845006] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3c845006] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3c845006] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3c845006] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3c845006] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3c845006] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3c845006] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3c845006] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3c845006] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3c845006] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3c845006] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3c845006] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3c845006] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3c845006] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3c845006] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3c845006] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3c845006] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3c845006] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3c845006] {
  padding-left: 3rem;
}
.stack-300[data-v-3c845006] {
  z-index: 0;
}
.stack-400[data-v-3c845006] {
  z-index: 10;
}
.stack-500[data-v-3c845006] {
  z-index: 20;
}
.stack-600[data-v-3c845006] {
  z-index: 30;
}
.stack-700[data-v-3c845006] {
  z-index: 40;
}
.text-300[data-v-3c845006] {
  font-size: 0.8rem;
}
.text-400[data-v-3c845006] {
  font-size: 1rem;
}
.text-500[data-v-3c845006] {
  font-size: 1.25rem;
}
.text-600[data-v-3c845006] {
  font-size: 1.6rem;
}
.text-700[data-v-3c845006] {
  font-size: 2rem;
}
.text-900[data-v-3c845006] {
  font-size: 3rem;
}
.weight-light[data-v-3c845006] {
  font-weight: 300;
}
.weight-regular[data-v-3c845006] {
  font-weight: 400;
}
.weight-bold[data-v-3c845006] {
  font-weight: 700;
}
.width-full[data-v-3c845006] {
  width: 100%;
}
.width-half[data-v-3c845006] {
  width: 50%;
}
.width-quarter[data-v-3c845006] {
  width: 25%;
}
.width-third[data-v-3c845006] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3c845006] {
    display: block;
}
.smd\:box-flex[data-v-3c845006] {
    display: flex;
}
.smd\:box-hide[data-v-3c845006] {
    display: none;
}
.smd\:box-show[data-v-3c845006] {
    display: inherit;
}
.smd\:text-300[data-v-3c845006] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3c845006] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3c845006] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3c845006] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3c845006] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3c845006] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3c845006] {
    width: 100%;
}
.smd\:width-half[data-v-3c845006] {
    width: 50%;
}
.smd\:width-quarter[data-v-3c845006] {
    width: 25%;
}
.smd\:width-third[data-v-3c845006] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3c845006] {
    display: block;
}
.sm\:box-flex[data-v-3c845006] {
    display: flex;
}
.sm\:box-hide[data-v-3c845006] {
    display: none;
}
.sm\:box-show[data-v-3c845006] {
    display: inherit;
}
.sm\:text-300[data-v-3c845006] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3c845006] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3c845006] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3c845006] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3c845006] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3c845006] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3c845006] {
    width: 100%;
}
.sm\:width-half[data-v-3c845006] {
    width: 50%;
}
.sm\:width-quarter[data-v-3c845006] {
    width: 25%;
}
.sm\:width-third[data-v-3c845006] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3c845006] {
    display: block;
}
.md\:box-flex[data-v-3c845006] {
    display: flex;
}
.md\:box-hide[data-v-3c845006] {
    display: none;
}
.md\:box-show[data-v-3c845006] {
    display: inherit;
}
.md\:text-300[data-v-3c845006] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3c845006] {
    font-size: 1rem;
}
.md\:text-500[data-v-3c845006] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3c845006] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3c845006] {
    font-size: 2rem;
}
.md\:text-900[data-v-3c845006] {
    font-size: 3rem;
}
.md\:width-full[data-v-3c845006] {
    width: 100%;
}
.md\:width-half[data-v-3c845006] {
    width: 50%;
}
.md\:width-quarter[data-v-3c845006] {
    width: 25%;
}
.md\:width-third[data-v-3c845006] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3c845006] {
    display: block;
}
.lg\:box-flex[data-v-3c845006] {
    display: flex;
}
.lg\:box-hide[data-v-3c845006] {
    display: none;
}
.lg\:box-show[data-v-3c845006] {
    display: inherit;
}
.lg\:text-300[data-v-3c845006] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3c845006] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3c845006] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3c845006] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3c845006] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3c845006] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3c845006] {
    width: 100%;
}
.lg\:width-half[data-v-3c845006] {
    width: 50%;
}
.lg\:width-quarter[data-v-3c845006] {
    width: 25%;
}
.lg\:width-third[data-v-3c845006] {
    width: 33.33333%;
}
}
[data-v-3c845006]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3c845006] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3c845006] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3c845006] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3c845006] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3c845006] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3c845006] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3c845006] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3c845006] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3c845006] {
  margin-bottom: 7.8px;
}
h1[data-v-3c845006], h2[data-v-3c845006], h3[data-v-3c845006], h4[data-v-3c845006] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3c845006] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3c845006] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3c845006] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3c845006] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3c845006] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3c845006] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3c845006] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3c845006] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3c845006] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3c845006] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3c845006] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3c845006] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3c845006] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3c845006] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3c845006] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3c845006] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3c845006] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3c845006] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3c845006] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3c845006] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3c845006] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3c845006] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3c845006] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3c845006] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3c845006] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3c845006] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3c845006] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3c845006] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3c845006] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3c845006] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3c845006] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
#bodytext-def[data-v-3c845006] {
  margin-bottom: 0.09em;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3c926787] {
  background: #1a1a1a;
}
.bg-light[data-v-3c926787] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3c926787] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3c926787] {
  background: #aba480;
}
.bg-army-subtext[data-v-3c926787] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3c926787] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3c926787] {
  background: #7d8077;
}
.bg-army-blue[data-v-3c926787] {
  background: #01499d;
}
.color-dark[data-v-3c926787] {
  color: #1a1a1a;
}
.color-light[data-v-3c926787] {
  color: #f2f2f2;
}
.color-army-light[data-v-3c926787] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3c926787] {
  color: #aba480;
}
.color-army-subtext[data-v-3c926787] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3c926787] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3c926787] {
  color: #7d8077;
}
.color-army-blue[data-v-3c926787] {
  color: #01499d;
}
.box-block[data-v-3c926787] {
  display: block;
}
.box-flex[data-v-3c926787] {
  display: flex;
}
.box-hide[data-v-3c926787] {
  display: none;
}
.box-show[data-v-3c926787] {
  display: inherit;
}
.font-base[data-v-3c926787] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3c926787] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3c926787] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3c926787] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3c926787] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3c926787] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3c926787] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3c926787] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3c926787] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3c926787] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3c926787] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3c926787] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3c926787] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3c926787] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3c926787] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3c926787] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3c926787] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3c926787] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3c926787] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3c926787] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3c926787] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3c926787] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3c926787] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3c926787] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3c926787] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3c926787] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3c926787] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3c926787] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3c926787] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3c926787] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3c926787] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3c926787] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3c926787] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3c926787] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3c926787] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3c926787] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3c926787] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3c926787] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3c926787] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3c926787] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3c926787] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3c926787] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3c926787] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3c926787] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3c926787] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3c926787] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3c926787] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3c926787] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3c926787] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3c926787] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3c926787] {
  padding-left: 3rem;
}
.stack-300[data-v-3c926787] {
  z-index: 0;
}
.stack-400[data-v-3c926787] {
  z-index: 10;
}
.stack-500[data-v-3c926787] {
  z-index: 20;
}
.stack-600[data-v-3c926787] {
  z-index: 30;
}
.stack-700[data-v-3c926787] {
  z-index: 40;
}
.text-300[data-v-3c926787] {
  font-size: 0.8rem;
}
.text-400[data-v-3c926787] {
  font-size: 1rem;
}
.text-500[data-v-3c926787] {
  font-size: 1.25rem;
}
.text-600[data-v-3c926787] {
  font-size: 1.6rem;
}
.text-700[data-v-3c926787] {
  font-size: 2rem;
}
.text-900[data-v-3c926787] {
  font-size: 3rem;
}
.weight-light[data-v-3c926787] {
  font-weight: 300;
}
.weight-regular[data-v-3c926787] {
  font-weight: 400;
}
.weight-bold[data-v-3c926787] {
  font-weight: 700;
}
.width-full[data-v-3c926787] {
  width: 100%;
}
.width-half[data-v-3c926787] {
  width: 50%;
}
.width-quarter[data-v-3c926787] {
  width: 25%;
}
.width-third[data-v-3c926787] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3c926787] {
    display: block;
}
.smd\:box-flex[data-v-3c926787] {
    display: flex;
}
.smd\:box-hide[data-v-3c926787] {
    display: none;
}
.smd\:box-show[data-v-3c926787] {
    display: inherit;
}
.smd\:text-300[data-v-3c926787] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3c926787] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3c926787] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3c926787] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3c926787] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3c926787] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3c926787] {
    width: 100%;
}
.smd\:width-half[data-v-3c926787] {
    width: 50%;
}
.smd\:width-quarter[data-v-3c926787] {
    width: 25%;
}
.smd\:width-third[data-v-3c926787] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3c926787] {
    display: block;
}
.sm\:box-flex[data-v-3c926787] {
    display: flex;
}
.sm\:box-hide[data-v-3c926787] {
    display: none;
}
.sm\:box-show[data-v-3c926787] {
    display: inherit;
}
.sm\:text-300[data-v-3c926787] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3c926787] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3c926787] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3c926787] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3c926787] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3c926787] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3c926787] {
    width: 100%;
}
.sm\:width-half[data-v-3c926787] {
    width: 50%;
}
.sm\:width-quarter[data-v-3c926787] {
    width: 25%;
}
.sm\:width-third[data-v-3c926787] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3c926787] {
    display: block;
}
.md\:box-flex[data-v-3c926787] {
    display: flex;
}
.md\:box-hide[data-v-3c926787] {
    display: none;
}
.md\:box-show[data-v-3c926787] {
    display: inherit;
}
.md\:text-300[data-v-3c926787] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3c926787] {
    font-size: 1rem;
}
.md\:text-500[data-v-3c926787] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3c926787] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3c926787] {
    font-size: 2rem;
}
.md\:text-900[data-v-3c926787] {
    font-size: 3rem;
}
.md\:width-full[data-v-3c926787] {
    width: 100%;
}
.md\:width-half[data-v-3c926787] {
    width: 50%;
}
.md\:width-quarter[data-v-3c926787] {
    width: 25%;
}
.md\:width-third[data-v-3c926787] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3c926787] {
    display: block;
}
.lg\:box-flex[data-v-3c926787] {
    display: flex;
}
.lg\:box-hide[data-v-3c926787] {
    display: none;
}
.lg\:box-show[data-v-3c926787] {
    display: inherit;
}
.lg\:text-300[data-v-3c926787] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3c926787] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3c926787] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3c926787] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3c926787] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3c926787] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3c926787] {
    width: 100%;
}
.lg\:width-half[data-v-3c926787] {
    width: 50%;
}
.lg\:width-quarter[data-v-3c926787] {
    width: 25%;
}
.lg\:width-third[data-v-3c926787] {
    width: 33.33333%;
}
}
[data-v-3c926787]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3c926787] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3c926787] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3c926787] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3c926787] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3c926787] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3c926787] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3c926787] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3c926787] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3c926787] {
  margin-bottom: 7.8px;
}
h1[data-v-3c926787], h2[data-v-3c926787], h3[data-v-3c926787], h4[data-v-3c926787] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3c926787] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3c926787] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3c926787] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3c926787] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3c926787] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3c926787] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3c926787] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3c926787] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3c926787] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3c926787] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3c926787] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3c926787] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3c926787] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3c926787] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3c926787] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3c926787] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3c926787] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3c926787] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3c926787] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3c926787] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3c926787] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3c926787] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3c926787] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3c926787] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3c926787] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3c926787] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3c926787] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3c926787] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3c926787] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3c926787] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3c926787] {
  display: block;
  margin: 0 auto;
  width: 150px;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3ca07f08] {
  background: #1a1a1a;
}
.bg-light[data-v-3ca07f08] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3ca07f08] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3ca07f08] {
  background: #aba480;
}
.bg-army-subtext[data-v-3ca07f08] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3ca07f08] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3ca07f08] {
  background: #7d8077;
}
.bg-army-blue[data-v-3ca07f08] {
  background: #01499d;
}
.color-dark[data-v-3ca07f08] {
  color: #1a1a1a;
}
.color-light[data-v-3ca07f08] {
  color: #f2f2f2;
}
.color-army-light[data-v-3ca07f08] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3ca07f08] {
  color: #aba480;
}
.color-army-subtext[data-v-3ca07f08] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3ca07f08] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3ca07f08] {
  color: #7d8077;
}
.color-army-blue[data-v-3ca07f08] {
  color: #01499d;
}
.box-block[data-v-3ca07f08] {
  display: block;
}
.box-flex[data-v-3ca07f08] {
  display: flex;
}
.box-hide[data-v-3ca07f08] {
  display: none;
}
.box-show[data-v-3ca07f08] {
  display: inherit;
}
.font-base[data-v-3ca07f08] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3ca07f08] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3ca07f08] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3ca07f08] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3ca07f08] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3ca07f08] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3ca07f08] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3ca07f08] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3ca07f08] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3ca07f08] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3ca07f08] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3ca07f08] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3ca07f08] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3ca07f08] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3ca07f08] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3ca07f08] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3ca07f08] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3ca07f08] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3ca07f08] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3ca07f08] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3ca07f08] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3ca07f08] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3ca07f08] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3ca07f08] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3ca07f08] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3ca07f08] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3ca07f08] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3ca07f08] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3ca07f08] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3ca07f08] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3ca07f08] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3ca07f08] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3ca07f08] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3ca07f08] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3ca07f08] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3ca07f08] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3ca07f08] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3ca07f08] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3ca07f08] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3ca07f08] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3ca07f08] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3ca07f08] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3ca07f08] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3ca07f08] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3ca07f08] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3ca07f08] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3ca07f08] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3ca07f08] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3ca07f08] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3ca07f08] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3ca07f08] {
  padding-left: 3rem;
}
.stack-300[data-v-3ca07f08] {
  z-index: 0;
}
.stack-400[data-v-3ca07f08] {
  z-index: 10;
}
.stack-500[data-v-3ca07f08] {
  z-index: 20;
}
.stack-600[data-v-3ca07f08] {
  z-index: 30;
}
.stack-700[data-v-3ca07f08] {
  z-index: 40;
}
.text-300[data-v-3ca07f08] {
  font-size: 0.8rem;
}
.text-400[data-v-3ca07f08] {
  font-size: 1rem;
}
.text-500[data-v-3ca07f08] {
  font-size: 1.25rem;
}
.text-600[data-v-3ca07f08] {
  font-size: 1.6rem;
}
.text-700[data-v-3ca07f08] {
  font-size: 2rem;
}
.text-900[data-v-3ca07f08] {
  font-size: 3rem;
}
.weight-light[data-v-3ca07f08] {
  font-weight: 300;
}
.weight-regular[data-v-3ca07f08] {
  font-weight: 400;
}
.weight-bold[data-v-3ca07f08] {
  font-weight: 700;
}
.width-full[data-v-3ca07f08] {
  width: 100%;
}
.width-half[data-v-3ca07f08] {
  width: 50%;
}
.width-quarter[data-v-3ca07f08] {
  width: 25%;
}
.width-third[data-v-3ca07f08] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3ca07f08] {
    display: block;
}
.smd\:box-flex[data-v-3ca07f08] {
    display: flex;
}
.smd\:box-hide[data-v-3ca07f08] {
    display: none;
}
.smd\:box-show[data-v-3ca07f08] {
    display: inherit;
}
.smd\:text-300[data-v-3ca07f08] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3ca07f08] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3ca07f08] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3ca07f08] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3ca07f08] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3ca07f08] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3ca07f08] {
    width: 100%;
}
.smd\:width-half[data-v-3ca07f08] {
    width: 50%;
}
.smd\:width-quarter[data-v-3ca07f08] {
    width: 25%;
}
.smd\:width-third[data-v-3ca07f08] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3ca07f08] {
    display: block;
}
.sm\:box-flex[data-v-3ca07f08] {
    display: flex;
}
.sm\:box-hide[data-v-3ca07f08] {
    display: none;
}
.sm\:box-show[data-v-3ca07f08] {
    display: inherit;
}
.sm\:text-300[data-v-3ca07f08] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3ca07f08] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3ca07f08] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3ca07f08] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3ca07f08] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3ca07f08] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3ca07f08] {
    width: 100%;
}
.sm\:width-half[data-v-3ca07f08] {
    width: 50%;
}
.sm\:width-quarter[data-v-3ca07f08] {
    width: 25%;
}
.sm\:width-third[data-v-3ca07f08] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3ca07f08] {
    display: block;
}
.md\:box-flex[data-v-3ca07f08] {
    display: flex;
}
.md\:box-hide[data-v-3ca07f08] {
    display: none;
}
.md\:box-show[data-v-3ca07f08] {
    display: inherit;
}
.md\:text-300[data-v-3ca07f08] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3ca07f08] {
    font-size: 1rem;
}
.md\:text-500[data-v-3ca07f08] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3ca07f08] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3ca07f08] {
    font-size: 2rem;
}
.md\:text-900[data-v-3ca07f08] {
    font-size: 3rem;
}
.md\:width-full[data-v-3ca07f08] {
    width: 100%;
}
.md\:width-half[data-v-3ca07f08] {
    width: 50%;
}
.md\:width-quarter[data-v-3ca07f08] {
    width: 25%;
}
.md\:width-third[data-v-3ca07f08] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3ca07f08] {
    display: block;
}
.lg\:box-flex[data-v-3ca07f08] {
    display: flex;
}
.lg\:box-hide[data-v-3ca07f08] {
    display: none;
}
.lg\:box-show[data-v-3ca07f08] {
    display: inherit;
}
.lg\:text-300[data-v-3ca07f08] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3ca07f08] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3ca07f08] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3ca07f08] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3ca07f08] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3ca07f08] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3ca07f08] {
    width: 100%;
}
.lg\:width-half[data-v-3ca07f08] {
    width: 50%;
}
.lg\:width-quarter[data-v-3ca07f08] {
    width: 25%;
}
.lg\:width-third[data-v-3ca07f08] {
    width: 33.33333%;
}
}
[data-v-3ca07f08]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3ca07f08] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3ca07f08] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3ca07f08] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3ca07f08] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3ca07f08] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3ca07f08] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3ca07f08] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3ca07f08] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3ca07f08] {
  margin-bottom: 7.8px;
}
h1[data-v-3ca07f08], h2[data-v-3ca07f08], h3[data-v-3ca07f08], h4[data-v-3ca07f08] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3ca07f08] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3ca07f08] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3ca07f08] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3ca07f08] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3ca07f08] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3ca07f08] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3ca07f08] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3ca07f08] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3ca07f08] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3ca07f08] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3ca07f08] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3ca07f08] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3ca07f08] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3ca07f08] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3ca07f08] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3ca07f08] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3ca07f08] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3ca07f08] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3ca07f08] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3ca07f08] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3ca07f08] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3ca07f08] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3ca07f08] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3ca07f08] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3ca07f08] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3ca07f08] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3ca07f08] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3ca07f08] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3ca07f08] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3ca07f08] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3ca07f08] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
picture[data-v-3ca07f08], img[data-v-3ca07f08] {
  max-width: 100vw;
  /* @include media-query("md") {
      width: auto;
      
  }*/
}
@media (min-width: 36em) {
picture[data-v-3ca07f08], img[data-v-3ca07f08] {
      width: auto;
      max-width: 480px;
}
}
.outer-wrapper[data-v-3ca07f08] {
  background-color: #a6aa9d;
}
.bodyTextExcept[data-v-3ca07f08] {
  border-bottom: 25px solid #a6aa9d;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3cae9689] {
  background: #1a1a1a;
}
.bg-light[data-v-3cae9689] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3cae9689] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3cae9689] {
  background: #aba480;
}
.bg-army-subtext[data-v-3cae9689] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3cae9689] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3cae9689] {
  background: #7d8077;
}
.bg-army-blue[data-v-3cae9689] {
  background: #01499d;
}
.color-dark[data-v-3cae9689] {
  color: #1a1a1a;
}
.color-light[data-v-3cae9689] {
  color: #f2f2f2;
}
.color-army-light[data-v-3cae9689] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3cae9689] {
  color: #aba480;
}
.color-army-subtext[data-v-3cae9689] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3cae9689] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3cae9689] {
  color: #7d8077;
}
.color-army-blue[data-v-3cae9689] {
  color: #01499d;
}
.box-block[data-v-3cae9689] {
  display: block;
}
.box-flex[data-v-3cae9689] {
  display: flex;
}
.box-hide[data-v-3cae9689] {
  display: none;
}
.box-show[data-v-3cae9689] {
  display: inherit;
}
.font-base[data-v-3cae9689] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3cae9689] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3cae9689] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3cae9689] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3cae9689] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3cae9689] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3cae9689] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3cae9689] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3cae9689] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3cae9689] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3cae9689] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3cae9689] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3cae9689] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3cae9689] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3cae9689] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3cae9689] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3cae9689] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3cae9689] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3cae9689] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3cae9689] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3cae9689] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3cae9689] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3cae9689] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3cae9689] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3cae9689] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3cae9689] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3cae9689] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3cae9689] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3cae9689] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3cae9689] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3cae9689] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3cae9689] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3cae9689] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3cae9689] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3cae9689] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3cae9689] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3cae9689] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3cae9689] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3cae9689] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3cae9689] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3cae9689] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3cae9689] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3cae9689] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3cae9689] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3cae9689] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3cae9689] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3cae9689] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3cae9689] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3cae9689] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3cae9689] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3cae9689] {
  padding-left: 3rem;
}
.stack-300[data-v-3cae9689] {
  z-index: 0;
}
.stack-400[data-v-3cae9689] {
  z-index: 10;
}
.stack-500[data-v-3cae9689] {
  z-index: 20;
}
.stack-600[data-v-3cae9689] {
  z-index: 30;
}
.stack-700[data-v-3cae9689] {
  z-index: 40;
}
.text-300[data-v-3cae9689] {
  font-size: 0.8rem;
}
.text-400[data-v-3cae9689] {
  font-size: 1rem;
}
.text-500[data-v-3cae9689] {
  font-size: 1.25rem;
}
.text-600[data-v-3cae9689] {
  font-size: 1.6rem;
}
.text-700[data-v-3cae9689] {
  font-size: 2rem;
}
.text-900[data-v-3cae9689] {
  font-size: 3rem;
}
.weight-light[data-v-3cae9689] {
  font-weight: 300;
}
.weight-regular[data-v-3cae9689] {
  font-weight: 400;
}
.weight-bold[data-v-3cae9689] {
  font-weight: 700;
}
.width-full[data-v-3cae9689] {
  width: 100%;
}
.width-half[data-v-3cae9689] {
  width: 50%;
}
.width-quarter[data-v-3cae9689] {
  width: 25%;
}
.width-third[data-v-3cae9689] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3cae9689] {
    display: block;
}
.smd\:box-flex[data-v-3cae9689] {
    display: flex;
}
.smd\:box-hide[data-v-3cae9689] {
    display: none;
}
.smd\:box-show[data-v-3cae9689] {
    display: inherit;
}
.smd\:text-300[data-v-3cae9689] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3cae9689] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3cae9689] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3cae9689] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3cae9689] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3cae9689] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3cae9689] {
    width: 100%;
}
.smd\:width-half[data-v-3cae9689] {
    width: 50%;
}
.smd\:width-quarter[data-v-3cae9689] {
    width: 25%;
}
.smd\:width-third[data-v-3cae9689] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3cae9689] {
    display: block;
}
.sm\:box-flex[data-v-3cae9689] {
    display: flex;
}
.sm\:box-hide[data-v-3cae9689] {
    display: none;
}
.sm\:box-show[data-v-3cae9689] {
    display: inherit;
}
.sm\:text-300[data-v-3cae9689] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3cae9689] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3cae9689] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3cae9689] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3cae9689] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3cae9689] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3cae9689] {
    width: 100%;
}
.sm\:width-half[data-v-3cae9689] {
    width: 50%;
}
.sm\:width-quarter[data-v-3cae9689] {
    width: 25%;
}
.sm\:width-third[data-v-3cae9689] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3cae9689] {
    display: block;
}
.md\:box-flex[data-v-3cae9689] {
    display: flex;
}
.md\:box-hide[data-v-3cae9689] {
    display: none;
}
.md\:box-show[data-v-3cae9689] {
    display: inherit;
}
.md\:text-300[data-v-3cae9689] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3cae9689] {
    font-size: 1rem;
}
.md\:text-500[data-v-3cae9689] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3cae9689] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3cae9689] {
    font-size: 2rem;
}
.md\:text-900[data-v-3cae9689] {
    font-size: 3rem;
}
.md\:width-full[data-v-3cae9689] {
    width: 100%;
}
.md\:width-half[data-v-3cae9689] {
    width: 50%;
}
.md\:width-quarter[data-v-3cae9689] {
    width: 25%;
}
.md\:width-third[data-v-3cae9689] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3cae9689] {
    display: block;
}
.lg\:box-flex[data-v-3cae9689] {
    display: flex;
}
.lg\:box-hide[data-v-3cae9689] {
    display: none;
}
.lg\:box-show[data-v-3cae9689] {
    display: inherit;
}
.lg\:text-300[data-v-3cae9689] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3cae9689] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3cae9689] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3cae9689] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3cae9689] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3cae9689] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3cae9689] {
    width: 100%;
}
.lg\:width-half[data-v-3cae9689] {
    width: 50%;
}
.lg\:width-quarter[data-v-3cae9689] {
    width: 25%;
}
.lg\:width-third[data-v-3cae9689] {
    width: 33.33333%;
}
}
[data-v-3cae9689]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3cae9689] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3cae9689] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3cae9689] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3cae9689] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3cae9689] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3cae9689] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3cae9689] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3cae9689] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3cae9689] {
  margin-bottom: 7.8px;
}
h1[data-v-3cae9689], h2[data-v-3cae9689], h3[data-v-3cae9689], h4[data-v-3cae9689] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3cae9689] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3cae9689] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3cae9689] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3cae9689] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3cae9689] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3cae9689] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3cae9689] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3cae9689] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3cae9689] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3cae9689] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3cae9689] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3cae9689] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3cae9689] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3cae9689] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3cae9689] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3cae9689] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3cae9689] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3cae9689] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3cae9689] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3cae9689] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3cae9689] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3cae9689] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3cae9689] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3cae9689] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3cae9689] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3cae9689] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3cae9689] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3cae9689] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3cae9689] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3cae9689] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3cae9689] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.outer-wrapper[data-v-3cae9689] {
  background-color: #a6aa9d;
}
.bodyTextExcept[data-v-3cae9689] {
  border-bottom: 5px solid #a6aa9d;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3cbcae0a] {
  background: #1a1a1a;
}
.bg-light[data-v-3cbcae0a] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3cbcae0a] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3cbcae0a] {
  background: #aba480;
}
.bg-army-subtext[data-v-3cbcae0a] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3cbcae0a] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3cbcae0a] {
  background: #7d8077;
}
.bg-army-blue[data-v-3cbcae0a] {
  background: #01499d;
}
.color-dark[data-v-3cbcae0a] {
  color: #1a1a1a;
}
.color-light[data-v-3cbcae0a] {
  color: #f2f2f2;
}
.color-army-light[data-v-3cbcae0a] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3cbcae0a] {
  color: #aba480;
}
.color-army-subtext[data-v-3cbcae0a] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3cbcae0a] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3cbcae0a] {
  color: #7d8077;
}
.color-army-blue[data-v-3cbcae0a] {
  color: #01499d;
}
.box-block[data-v-3cbcae0a] {
  display: block;
}
.box-flex[data-v-3cbcae0a] {
  display: flex;
}
.box-hide[data-v-3cbcae0a] {
  display: none;
}
.box-show[data-v-3cbcae0a] {
  display: inherit;
}
.font-base[data-v-3cbcae0a] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3cbcae0a] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3cbcae0a] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3cbcae0a] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3cbcae0a] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3cbcae0a] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3cbcae0a] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3cbcae0a] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3cbcae0a] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3cbcae0a] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3cbcae0a] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3cbcae0a] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3cbcae0a] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3cbcae0a] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3cbcae0a] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3cbcae0a] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3cbcae0a] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3cbcae0a] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3cbcae0a] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3cbcae0a] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3cbcae0a] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3cbcae0a] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3cbcae0a] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3cbcae0a] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3cbcae0a] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3cbcae0a] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3cbcae0a] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3cbcae0a] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3cbcae0a] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3cbcae0a] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3cbcae0a] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3cbcae0a] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3cbcae0a] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3cbcae0a] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3cbcae0a] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3cbcae0a] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3cbcae0a] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3cbcae0a] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3cbcae0a] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3cbcae0a] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3cbcae0a] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3cbcae0a] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3cbcae0a] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3cbcae0a] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3cbcae0a] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3cbcae0a] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3cbcae0a] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3cbcae0a] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3cbcae0a] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3cbcae0a] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3cbcae0a] {
  padding-left: 3rem;
}
.stack-300[data-v-3cbcae0a] {
  z-index: 0;
}
.stack-400[data-v-3cbcae0a] {
  z-index: 10;
}
.stack-500[data-v-3cbcae0a] {
  z-index: 20;
}
.stack-600[data-v-3cbcae0a] {
  z-index: 30;
}
.stack-700[data-v-3cbcae0a] {
  z-index: 40;
}
.text-300[data-v-3cbcae0a] {
  font-size: 0.8rem;
}
.text-400[data-v-3cbcae0a] {
  font-size: 1rem;
}
.text-500[data-v-3cbcae0a] {
  font-size: 1.25rem;
}
.text-600[data-v-3cbcae0a] {
  font-size: 1.6rem;
}
.text-700[data-v-3cbcae0a] {
  font-size: 2rem;
}
.text-900[data-v-3cbcae0a] {
  font-size: 3rem;
}
.weight-light[data-v-3cbcae0a] {
  font-weight: 300;
}
.weight-regular[data-v-3cbcae0a] {
  font-weight: 400;
}
.weight-bold[data-v-3cbcae0a] {
  font-weight: 700;
}
.width-full[data-v-3cbcae0a] {
  width: 100%;
}
.width-half[data-v-3cbcae0a] {
  width: 50%;
}
.width-quarter[data-v-3cbcae0a] {
  width: 25%;
}
.width-third[data-v-3cbcae0a] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3cbcae0a] {
    display: block;
}
.smd\:box-flex[data-v-3cbcae0a] {
    display: flex;
}
.smd\:box-hide[data-v-3cbcae0a] {
    display: none;
}
.smd\:box-show[data-v-3cbcae0a] {
    display: inherit;
}
.smd\:text-300[data-v-3cbcae0a] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3cbcae0a] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3cbcae0a] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3cbcae0a] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3cbcae0a] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3cbcae0a] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3cbcae0a] {
    width: 100%;
}
.smd\:width-half[data-v-3cbcae0a] {
    width: 50%;
}
.smd\:width-quarter[data-v-3cbcae0a] {
    width: 25%;
}
.smd\:width-third[data-v-3cbcae0a] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3cbcae0a] {
    display: block;
}
.sm\:box-flex[data-v-3cbcae0a] {
    display: flex;
}
.sm\:box-hide[data-v-3cbcae0a] {
    display: none;
}
.sm\:box-show[data-v-3cbcae0a] {
    display: inherit;
}
.sm\:text-300[data-v-3cbcae0a] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3cbcae0a] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3cbcae0a] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3cbcae0a] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3cbcae0a] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3cbcae0a] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3cbcae0a] {
    width: 100%;
}
.sm\:width-half[data-v-3cbcae0a] {
    width: 50%;
}
.sm\:width-quarter[data-v-3cbcae0a] {
    width: 25%;
}
.sm\:width-third[data-v-3cbcae0a] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3cbcae0a] {
    display: block;
}
.md\:box-flex[data-v-3cbcae0a] {
    display: flex;
}
.md\:box-hide[data-v-3cbcae0a] {
    display: none;
}
.md\:box-show[data-v-3cbcae0a] {
    display: inherit;
}
.md\:text-300[data-v-3cbcae0a] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3cbcae0a] {
    font-size: 1rem;
}
.md\:text-500[data-v-3cbcae0a] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3cbcae0a] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3cbcae0a] {
    font-size: 2rem;
}
.md\:text-900[data-v-3cbcae0a] {
    font-size: 3rem;
}
.md\:width-full[data-v-3cbcae0a] {
    width: 100%;
}
.md\:width-half[data-v-3cbcae0a] {
    width: 50%;
}
.md\:width-quarter[data-v-3cbcae0a] {
    width: 25%;
}
.md\:width-third[data-v-3cbcae0a] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3cbcae0a] {
    display: block;
}
.lg\:box-flex[data-v-3cbcae0a] {
    display: flex;
}
.lg\:box-hide[data-v-3cbcae0a] {
    display: none;
}
.lg\:box-show[data-v-3cbcae0a] {
    display: inherit;
}
.lg\:text-300[data-v-3cbcae0a] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3cbcae0a] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3cbcae0a] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3cbcae0a] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3cbcae0a] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3cbcae0a] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3cbcae0a] {
    width: 100%;
}
.lg\:width-half[data-v-3cbcae0a] {
    width: 50%;
}
.lg\:width-quarter[data-v-3cbcae0a] {
    width: 25%;
}
.lg\:width-third[data-v-3cbcae0a] {
    width: 33.33333%;
}
}
[data-v-3cbcae0a]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3cbcae0a] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3cbcae0a] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3cbcae0a] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3cbcae0a] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3cbcae0a] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3cbcae0a] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3cbcae0a] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3cbcae0a] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3cbcae0a] {
  margin-bottom: 7.8px;
}
h1[data-v-3cbcae0a], h2[data-v-3cbcae0a], h3[data-v-3cbcae0a], h4[data-v-3cbcae0a] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3cbcae0a] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3cbcae0a] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3cbcae0a] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3cbcae0a] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3cbcae0a] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3cbcae0a] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3cbcae0a] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3cbcae0a] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3cbcae0a] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3cbcae0a] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3cbcae0a] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3cbcae0a] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3cbcae0a] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3cbcae0a] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3cbcae0a] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3cbcae0a] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3cbcae0a] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3cbcae0a] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3cbcae0a] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3cbcae0a] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3cbcae0a] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3cbcae0a] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3cbcae0a] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3cbcae0a] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3cbcae0a] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3cbcae0a] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3cbcae0a] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3cbcae0a] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3cbcae0a] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3cbcae0a] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3cbcae0a] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
picture[data-v-3cbcae0a], img[data-v-3cbcae0a] {
  max-width: 100vw;
  /* @include media-query("md") {
      width: auto;
      
  }*/
}
@media (min-width: 36em) {
picture[data-v-3cbcae0a], img[data-v-3cbcae0a] {
      width: auto;
      max-width: 480px;
}
}
.outer-wrapper[data-v-3cbcae0a] {
  background-color: #fff;
}
.bodyTextExcept[data-v-3cbcae0a] {
  border-bottom: 25px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3ccac58b] {
  background: #1a1a1a;
}
.bg-light[data-v-3ccac58b] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3ccac58b] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3ccac58b] {
  background: #aba480;
}
.bg-army-subtext[data-v-3ccac58b] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3ccac58b] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3ccac58b] {
  background: #7d8077;
}
.bg-army-blue[data-v-3ccac58b] {
  background: #01499d;
}
.color-dark[data-v-3ccac58b] {
  color: #1a1a1a;
}
.color-light[data-v-3ccac58b] {
  color: #f2f2f2;
}
.color-army-light[data-v-3ccac58b] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3ccac58b] {
  color: #aba480;
}
.color-army-subtext[data-v-3ccac58b] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3ccac58b] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3ccac58b] {
  color: #7d8077;
}
.color-army-blue[data-v-3ccac58b] {
  color: #01499d;
}
.box-block[data-v-3ccac58b] {
  display: block;
}
.box-flex[data-v-3ccac58b] {
  display: flex;
}
.box-hide[data-v-3ccac58b] {
  display: none;
}
.box-show[data-v-3ccac58b] {
  display: inherit;
}
.font-base[data-v-3ccac58b] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3ccac58b] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3ccac58b] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3ccac58b] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3ccac58b] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3ccac58b] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3ccac58b] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3ccac58b] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3ccac58b] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3ccac58b] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3ccac58b] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3ccac58b] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3ccac58b] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3ccac58b] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3ccac58b] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3ccac58b] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3ccac58b] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3ccac58b] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3ccac58b] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3ccac58b] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3ccac58b] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3ccac58b] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3ccac58b] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3ccac58b] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3ccac58b] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3ccac58b] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3ccac58b] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3ccac58b] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3ccac58b] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3ccac58b] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3ccac58b] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3ccac58b] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3ccac58b] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3ccac58b] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3ccac58b] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3ccac58b] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3ccac58b] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3ccac58b] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3ccac58b] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3ccac58b] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3ccac58b] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3ccac58b] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3ccac58b] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3ccac58b] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3ccac58b] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3ccac58b] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3ccac58b] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3ccac58b] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3ccac58b] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3ccac58b] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3ccac58b] {
  padding-left: 3rem;
}
.stack-300[data-v-3ccac58b] {
  z-index: 0;
}
.stack-400[data-v-3ccac58b] {
  z-index: 10;
}
.stack-500[data-v-3ccac58b] {
  z-index: 20;
}
.stack-600[data-v-3ccac58b] {
  z-index: 30;
}
.stack-700[data-v-3ccac58b] {
  z-index: 40;
}
.text-300[data-v-3ccac58b] {
  font-size: 0.8rem;
}
.text-400[data-v-3ccac58b] {
  font-size: 1rem;
}
.text-500[data-v-3ccac58b] {
  font-size: 1.25rem;
}
.text-600[data-v-3ccac58b] {
  font-size: 1.6rem;
}
.text-700[data-v-3ccac58b] {
  font-size: 2rem;
}
.text-900[data-v-3ccac58b] {
  font-size: 3rem;
}
.weight-light[data-v-3ccac58b] {
  font-weight: 300;
}
.weight-regular[data-v-3ccac58b] {
  font-weight: 400;
}
.weight-bold[data-v-3ccac58b] {
  font-weight: 700;
}
.width-full[data-v-3ccac58b] {
  width: 100%;
}
.width-half[data-v-3ccac58b] {
  width: 50%;
}
.width-quarter[data-v-3ccac58b] {
  width: 25%;
}
.width-third[data-v-3ccac58b] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3ccac58b] {
    display: block;
}
.smd\:box-flex[data-v-3ccac58b] {
    display: flex;
}
.smd\:box-hide[data-v-3ccac58b] {
    display: none;
}
.smd\:box-show[data-v-3ccac58b] {
    display: inherit;
}
.smd\:text-300[data-v-3ccac58b] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3ccac58b] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3ccac58b] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3ccac58b] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3ccac58b] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3ccac58b] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3ccac58b] {
    width: 100%;
}
.smd\:width-half[data-v-3ccac58b] {
    width: 50%;
}
.smd\:width-quarter[data-v-3ccac58b] {
    width: 25%;
}
.smd\:width-third[data-v-3ccac58b] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3ccac58b] {
    display: block;
}
.sm\:box-flex[data-v-3ccac58b] {
    display: flex;
}
.sm\:box-hide[data-v-3ccac58b] {
    display: none;
}
.sm\:box-show[data-v-3ccac58b] {
    display: inherit;
}
.sm\:text-300[data-v-3ccac58b] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3ccac58b] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3ccac58b] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3ccac58b] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3ccac58b] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3ccac58b] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3ccac58b] {
    width: 100%;
}
.sm\:width-half[data-v-3ccac58b] {
    width: 50%;
}
.sm\:width-quarter[data-v-3ccac58b] {
    width: 25%;
}
.sm\:width-third[data-v-3ccac58b] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3ccac58b] {
    display: block;
}
.md\:box-flex[data-v-3ccac58b] {
    display: flex;
}
.md\:box-hide[data-v-3ccac58b] {
    display: none;
}
.md\:box-show[data-v-3ccac58b] {
    display: inherit;
}
.md\:text-300[data-v-3ccac58b] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3ccac58b] {
    font-size: 1rem;
}
.md\:text-500[data-v-3ccac58b] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3ccac58b] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3ccac58b] {
    font-size: 2rem;
}
.md\:text-900[data-v-3ccac58b] {
    font-size: 3rem;
}
.md\:width-full[data-v-3ccac58b] {
    width: 100%;
}
.md\:width-half[data-v-3ccac58b] {
    width: 50%;
}
.md\:width-quarter[data-v-3ccac58b] {
    width: 25%;
}
.md\:width-third[data-v-3ccac58b] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3ccac58b] {
    display: block;
}
.lg\:box-flex[data-v-3ccac58b] {
    display: flex;
}
.lg\:box-hide[data-v-3ccac58b] {
    display: none;
}
.lg\:box-show[data-v-3ccac58b] {
    display: inherit;
}
.lg\:text-300[data-v-3ccac58b] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3ccac58b] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3ccac58b] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3ccac58b] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3ccac58b] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3ccac58b] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3ccac58b] {
    width: 100%;
}
.lg\:width-half[data-v-3ccac58b] {
    width: 50%;
}
.lg\:width-quarter[data-v-3ccac58b] {
    width: 25%;
}
.lg\:width-third[data-v-3ccac58b] {
    width: 33.33333%;
}
}
[data-v-3ccac58b]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3ccac58b] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3ccac58b] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3ccac58b] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3ccac58b] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3ccac58b] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3ccac58b] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3ccac58b] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3ccac58b] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3ccac58b] {
  margin-bottom: 7.8px;
}
h1[data-v-3ccac58b], h2[data-v-3ccac58b], h3[data-v-3ccac58b], h4[data-v-3ccac58b] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3ccac58b] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3ccac58b] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3ccac58b] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3ccac58b] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3ccac58b] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3ccac58b] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3ccac58b] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3ccac58b] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3ccac58b] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3ccac58b] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3ccac58b] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3ccac58b] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3ccac58b] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3ccac58b] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3ccac58b] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3ccac58b] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3ccac58b] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3ccac58b] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3ccac58b] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3ccac58b] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3ccac58b] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3ccac58b] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3ccac58b] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3ccac58b] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3ccac58b] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3ccac58b] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3ccac58b] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3ccac58b] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3ccac58b] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3ccac58b] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3ccac58b] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.outer-wrapper[data-v-3ccac58b] {
  background-color: #a6aa9d;
}
.bodyTextExcept[data-v-3ccac58b] {
  border-bottom: 5px solid #a6aa9d;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3cd8dd0c] {
  background: #1a1a1a;
}
.bg-light[data-v-3cd8dd0c] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3cd8dd0c] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3cd8dd0c] {
  background: #aba480;
}
.bg-army-subtext[data-v-3cd8dd0c] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3cd8dd0c] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3cd8dd0c] {
  background: #7d8077;
}
.bg-army-blue[data-v-3cd8dd0c] {
  background: #01499d;
}
.color-dark[data-v-3cd8dd0c] {
  color: #1a1a1a;
}
.color-light[data-v-3cd8dd0c] {
  color: #f2f2f2;
}
.color-army-light[data-v-3cd8dd0c] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3cd8dd0c] {
  color: #aba480;
}
.color-army-subtext[data-v-3cd8dd0c] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3cd8dd0c] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3cd8dd0c] {
  color: #7d8077;
}
.color-army-blue[data-v-3cd8dd0c] {
  color: #01499d;
}
.box-block[data-v-3cd8dd0c] {
  display: block;
}
.box-flex[data-v-3cd8dd0c] {
  display: flex;
}
.box-hide[data-v-3cd8dd0c] {
  display: none;
}
.box-show[data-v-3cd8dd0c] {
  display: inherit;
}
.font-base[data-v-3cd8dd0c] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3cd8dd0c] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3cd8dd0c] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3cd8dd0c] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3cd8dd0c] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3cd8dd0c] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3cd8dd0c] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3cd8dd0c] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3cd8dd0c] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3cd8dd0c] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3cd8dd0c] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3cd8dd0c] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3cd8dd0c] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3cd8dd0c] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3cd8dd0c] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3cd8dd0c] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3cd8dd0c] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3cd8dd0c] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3cd8dd0c] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3cd8dd0c] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3cd8dd0c] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3cd8dd0c] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3cd8dd0c] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3cd8dd0c] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3cd8dd0c] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3cd8dd0c] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3cd8dd0c] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3cd8dd0c] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3cd8dd0c] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3cd8dd0c] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3cd8dd0c] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3cd8dd0c] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3cd8dd0c] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3cd8dd0c] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3cd8dd0c] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3cd8dd0c] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3cd8dd0c] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3cd8dd0c] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3cd8dd0c] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3cd8dd0c] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3cd8dd0c] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3cd8dd0c] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3cd8dd0c] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3cd8dd0c] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3cd8dd0c] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3cd8dd0c] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3cd8dd0c] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3cd8dd0c] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3cd8dd0c] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3cd8dd0c] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3cd8dd0c] {
  padding-left: 3rem;
}
.stack-300[data-v-3cd8dd0c] {
  z-index: 0;
}
.stack-400[data-v-3cd8dd0c] {
  z-index: 10;
}
.stack-500[data-v-3cd8dd0c] {
  z-index: 20;
}
.stack-600[data-v-3cd8dd0c] {
  z-index: 30;
}
.stack-700[data-v-3cd8dd0c] {
  z-index: 40;
}
.text-300[data-v-3cd8dd0c] {
  font-size: 0.8rem;
}
.text-400[data-v-3cd8dd0c] {
  font-size: 1rem;
}
.text-500[data-v-3cd8dd0c] {
  font-size: 1.25rem;
}
.text-600[data-v-3cd8dd0c] {
  font-size: 1.6rem;
}
.text-700[data-v-3cd8dd0c] {
  font-size: 2rem;
}
.text-900[data-v-3cd8dd0c] {
  font-size: 3rem;
}
.weight-light[data-v-3cd8dd0c] {
  font-weight: 300;
}
.weight-regular[data-v-3cd8dd0c] {
  font-weight: 400;
}
.weight-bold[data-v-3cd8dd0c] {
  font-weight: 700;
}
.width-full[data-v-3cd8dd0c] {
  width: 100%;
}
.width-half[data-v-3cd8dd0c] {
  width: 50%;
}
.width-quarter[data-v-3cd8dd0c] {
  width: 25%;
}
.width-third[data-v-3cd8dd0c] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3cd8dd0c] {
    display: block;
}
.smd\:box-flex[data-v-3cd8dd0c] {
    display: flex;
}
.smd\:box-hide[data-v-3cd8dd0c] {
    display: none;
}
.smd\:box-show[data-v-3cd8dd0c] {
    display: inherit;
}
.smd\:text-300[data-v-3cd8dd0c] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3cd8dd0c] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3cd8dd0c] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3cd8dd0c] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3cd8dd0c] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3cd8dd0c] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3cd8dd0c] {
    width: 100%;
}
.smd\:width-half[data-v-3cd8dd0c] {
    width: 50%;
}
.smd\:width-quarter[data-v-3cd8dd0c] {
    width: 25%;
}
.smd\:width-third[data-v-3cd8dd0c] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3cd8dd0c] {
    display: block;
}
.sm\:box-flex[data-v-3cd8dd0c] {
    display: flex;
}
.sm\:box-hide[data-v-3cd8dd0c] {
    display: none;
}
.sm\:box-show[data-v-3cd8dd0c] {
    display: inherit;
}
.sm\:text-300[data-v-3cd8dd0c] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3cd8dd0c] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3cd8dd0c] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3cd8dd0c] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3cd8dd0c] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3cd8dd0c] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3cd8dd0c] {
    width: 100%;
}
.sm\:width-half[data-v-3cd8dd0c] {
    width: 50%;
}
.sm\:width-quarter[data-v-3cd8dd0c] {
    width: 25%;
}
.sm\:width-third[data-v-3cd8dd0c] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3cd8dd0c] {
    display: block;
}
.md\:box-flex[data-v-3cd8dd0c] {
    display: flex;
}
.md\:box-hide[data-v-3cd8dd0c] {
    display: none;
}
.md\:box-show[data-v-3cd8dd0c] {
    display: inherit;
}
.md\:text-300[data-v-3cd8dd0c] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3cd8dd0c] {
    font-size: 1rem;
}
.md\:text-500[data-v-3cd8dd0c] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3cd8dd0c] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3cd8dd0c] {
    font-size: 2rem;
}
.md\:text-900[data-v-3cd8dd0c] {
    font-size: 3rem;
}
.md\:width-full[data-v-3cd8dd0c] {
    width: 100%;
}
.md\:width-half[data-v-3cd8dd0c] {
    width: 50%;
}
.md\:width-quarter[data-v-3cd8dd0c] {
    width: 25%;
}
.md\:width-third[data-v-3cd8dd0c] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3cd8dd0c] {
    display: block;
}
.lg\:box-flex[data-v-3cd8dd0c] {
    display: flex;
}
.lg\:box-hide[data-v-3cd8dd0c] {
    display: none;
}
.lg\:box-show[data-v-3cd8dd0c] {
    display: inherit;
}
.lg\:text-300[data-v-3cd8dd0c] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3cd8dd0c] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3cd8dd0c] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3cd8dd0c] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3cd8dd0c] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3cd8dd0c] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3cd8dd0c] {
    width: 100%;
}
.lg\:width-half[data-v-3cd8dd0c] {
    width: 50%;
}
.lg\:width-quarter[data-v-3cd8dd0c] {
    width: 25%;
}
.lg\:width-third[data-v-3cd8dd0c] {
    width: 33.33333%;
}
}
[data-v-3cd8dd0c]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3cd8dd0c] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3cd8dd0c] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3cd8dd0c] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3cd8dd0c] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3cd8dd0c] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3cd8dd0c] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3cd8dd0c] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3cd8dd0c] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3cd8dd0c] {
  margin-bottom: 7.8px;
}
h1[data-v-3cd8dd0c], h2[data-v-3cd8dd0c], h3[data-v-3cd8dd0c], h4[data-v-3cd8dd0c] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3cd8dd0c] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3cd8dd0c] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3cd8dd0c] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3cd8dd0c] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3cd8dd0c] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3cd8dd0c] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3cd8dd0c] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3cd8dd0c] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3cd8dd0c] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3cd8dd0c] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3cd8dd0c] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3cd8dd0c] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3cd8dd0c] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3cd8dd0c] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3cd8dd0c] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3cd8dd0c] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3cd8dd0c] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3cd8dd0c] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3cd8dd0c] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3cd8dd0c] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3cd8dd0c] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3cd8dd0c] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3cd8dd0c] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3cd8dd0c] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
picture[data-v-3cd8dd0c], img[data-v-3cd8dd0c] {
  width: 100%;
}
@media (min-width: 48em) {
picture[data-v-3cd8dd0c], img[data-v-3cd8dd0c] {
      width: auto;
      max-width: 480px;
}
}
#bodytext-def[data-v-3cd8dd0c] {
  padding-bottom: 15px;
}
.outer-wrapper[data-v-3cd8dd0c] {
  background-color: #fff;
}
.bodyTextExcept[data-v-3cd8dd0c] {
  border-bottom: 25px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3ce6f48d] {
  background: #1a1a1a;
}
.bg-light[data-v-3ce6f48d] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3ce6f48d] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3ce6f48d] {
  background: #aba480;
}
.bg-army-subtext[data-v-3ce6f48d] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3ce6f48d] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3ce6f48d] {
  background: #7d8077;
}
.bg-army-blue[data-v-3ce6f48d] {
  background: #01499d;
}
.color-dark[data-v-3ce6f48d] {
  color: #1a1a1a;
}
.color-light[data-v-3ce6f48d] {
  color: #f2f2f2;
}
.color-army-light[data-v-3ce6f48d] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3ce6f48d] {
  color: #aba480;
}
.color-army-subtext[data-v-3ce6f48d] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3ce6f48d] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3ce6f48d] {
  color: #7d8077;
}
.color-army-blue[data-v-3ce6f48d] {
  color: #01499d;
}
.box-block[data-v-3ce6f48d] {
  display: block;
}
.box-flex[data-v-3ce6f48d] {
  display: flex;
}
.box-hide[data-v-3ce6f48d] {
  display: none;
}
.box-show[data-v-3ce6f48d] {
  display: inherit;
}
.font-base[data-v-3ce6f48d] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3ce6f48d] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3ce6f48d] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3ce6f48d] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3ce6f48d] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3ce6f48d] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3ce6f48d] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3ce6f48d] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3ce6f48d] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3ce6f48d] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3ce6f48d] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3ce6f48d] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3ce6f48d] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3ce6f48d] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3ce6f48d] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3ce6f48d] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3ce6f48d] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3ce6f48d] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3ce6f48d] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3ce6f48d] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3ce6f48d] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3ce6f48d] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3ce6f48d] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3ce6f48d] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3ce6f48d] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3ce6f48d] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3ce6f48d] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3ce6f48d] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3ce6f48d] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3ce6f48d] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3ce6f48d] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3ce6f48d] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3ce6f48d] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3ce6f48d] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3ce6f48d] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3ce6f48d] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3ce6f48d] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3ce6f48d] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3ce6f48d] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3ce6f48d] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3ce6f48d] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3ce6f48d] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3ce6f48d] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3ce6f48d] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3ce6f48d] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3ce6f48d] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3ce6f48d] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3ce6f48d] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3ce6f48d] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3ce6f48d] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3ce6f48d] {
  padding-left: 3rem;
}
.stack-300[data-v-3ce6f48d] {
  z-index: 0;
}
.stack-400[data-v-3ce6f48d] {
  z-index: 10;
}
.stack-500[data-v-3ce6f48d] {
  z-index: 20;
}
.stack-600[data-v-3ce6f48d] {
  z-index: 30;
}
.stack-700[data-v-3ce6f48d] {
  z-index: 40;
}
.text-300[data-v-3ce6f48d] {
  font-size: 0.8rem;
}
.text-400[data-v-3ce6f48d] {
  font-size: 1rem;
}
.text-500[data-v-3ce6f48d] {
  font-size: 1.25rem;
}
.text-600[data-v-3ce6f48d] {
  font-size: 1.6rem;
}
.text-700[data-v-3ce6f48d] {
  font-size: 2rem;
}
.text-900[data-v-3ce6f48d] {
  font-size: 3rem;
}
.weight-light[data-v-3ce6f48d] {
  font-weight: 300;
}
.weight-regular[data-v-3ce6f48d] {
  font-weight: 400;
}
.weight-bold[data-v-3ce6f48d] {
  font-weight: 700;
}
.width-full[data-v-3ce6f48d] {
  width: 100%;
}
.width-half[data-v-3ce6f48d] {
  width: 50%;
}
.width-quarter[data-v-3ce6f48d] {
  width: 25%;
}
.width-third[data-v-3ce6f48d] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3ce6f48d] {
    display: block;
}
.smd\:box-flex[data-v-3ce6f48d] {
    display: flex;
}
.smd\:box-hide[data-v-3ce6f48d] {
    display: none;
}
.smd\:box-show[data-v-3ce6f48d] {
    display: inherit;
}
.smd\:text-300[data-v-3ce6f48d] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3ce6f48d] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3ce6f48d] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3ce6f48d] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3ce6f48d] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3ce6f48d] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3ce6f48d] {
    width: 100%;
}
.smd\:width-half[data-v-3ce6f48d] {
    width: 50%;
}
.smd\:width-quarter[data-v-3ce6f48d] {
    width: 25%;
}
.smd\:width-third[data-v-3ce6f48d] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3ce6f48d] {
    display: block;
}
.sm\:box-flex[data-v-3ce6f48d] {
    display: flex;
}
.sm\:box-hide[data-v-3ce6f48d] {
    display: none;
}
.sm\:box-show[data-v-3ce6f48d] {
    display: inherit;
}
.sm\:text-300[data-v-3ce6f48d] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3ce6f48d] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3ce6f48d] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3ce6f48d] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3ce6f48d] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3ce6f48d] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3ce6f48d] {
    width: 100%;
}
.sm\:width-half[data-v-3ce6f48d] {
    width: 50%;
}
.sm\:width-quarter[data-v-3ce6f48d] {
    width: 25%;
}
.sm\:width-third[data-v-3ce6f48d] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3ce6f48d] {
    display: block;
}
.md\:box-flex[data-v-3ce6f48d] {
    display: flex;
}
.md\:box-hide[data-v-3ce6f48d] {
    display: none;
}
.md\:box-show[data-v-3ce6f48d] {
    display: inherit;
}
.md\:text-300[data-v-3ce6f48d] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3ce6f48d] {
    font-size: 1rem;
}
.md\:text-500[data-v-3ce6f48d] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3ce6f48d] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3ce6f48d] {
    font-size: 2rem;
}
.md\:text-900[data-v-3ce6f48d] {
    font-size: 3rem;
}
.md\:width-full[data-v-3ce6f48d] {
    width: 100%;
}
.md\:width-half[data-v-3ce6f48d] {
    width: 50%;
}
.md\:width-quarter[data-v-3ce6f48d] {
    width: 25%;
}
.md\:width-third[data-v-3ce6f48d] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3ce6f48d] {
    display: block;
}
.lg\:box-flex[data-v-3ce6f48d] {
    display: flex;
}
.lg\:box-hide[data-v-3ce6f48d] {
    display: none;
}
.lg\:box-show[data-v-3ce6f48d] {
    display: inherit;
}
.lg\:text-300[data-v-3ce6f48d] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3ce6f48d] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3ce6f48d] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3ce6f48d] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3ce6f48d] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3ce6f48d] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3ce6f48d] {
    width: 100%;
}
.lg\:width-half[data-v-3ce6f48d] {
    width: 50%;
}
.lg\:width-quarter[data-v-3ce6f48d] {
    width: 25%;
}
.lg\:width-third[data-v-3ce6f48d] {
    width: 33.33333%;
}
}
[data-v-3ce6f48d]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-3ce6f48d] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-3ce6f48d] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-3ce6f48d] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-3ce6f48d] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-3ce6f48d] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-3ce6f48d] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-3ce6f48d] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-3ce6f48d] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-3ce6f48d] {
  margin-bottom: 7.8px;
}
h1[data-v-3ce6f48d], h2[data-v-3ce6f48d], h3[data-v-3ce6f48d], h4[data-v-3ce6f48d] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-3ce6f48d] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-3ce6f48d] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-3ce6f48d] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-3ce6f48d] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3ce6f48d] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3ce6f48d] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3ce6f48d] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-3ce6f48d] {
  position: relative;
}
.outer-image-wrapper > img[data-v-3ce6f48d] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-3ce6f48d] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-3ce6f48d] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-3ce6f48d] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-3ce6f48d] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-3ce6f48d] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-3ce6f48d] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-3ce6f48d] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-3ce6f48d] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-3ce6f48d] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-3ce6f48d] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-3ce6f48d] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3ce6f48d] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-3ce6f48d] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-3ce6f48d] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-3ce6f48d] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3ce6f48d] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-3ce6f48d] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-3ce6f48d] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-3ce6f48d] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-3ce6f48d] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-3ce6f48d] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-3ce6f48d] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
picture[data-v-3ce6f48d], img[data-v-3ce6f48d] {
  max-width: 100vw;
  /* @include media-query("md") {
      width: auto;
      
  }*/
}
@media (min-width: 36em) {
picture[data-v-3ce6f48d], img[data-v-3ce6f48d] {
      width: auto;
      max-width: 480px;
}
}
.date[data-v-3ce6f48d] {
  border: white 1px solid;
}
.outer-wrapper[data-v-3ce6f48d] {
  background-color: #1a1a1a;
}
.bodyTextExcept[data-v-3ce6f48d] {
  border-bottom: 25px solid #1a1a1a;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-8ba8d6a6] {
  background: #1a1a1a;
}
.bg-light[data-v-8ba8d6a6] {
  background: #f2f2f2;
}
.bg-army-light[data-v-8ba8d6a6] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-8ba8d6a6] {
  background: #aba480;
}
.bg-army-subtext[data-v-8ba8d6a6] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-8ba8d6a6] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-8ba8d6a6] {
  background: #7d8077;
}
.bg-army-blue[data-v-8ba8d6a6] {
  background: #01499d;
}
.color-dark[data-v-8ba8d6a6] {
  color: #1a1a1a;
}
.color-light[data-v-8ba8d6a6] {
  color: #f2f2f2;
}
.color-army-light[data-v-8ba8d6a6] {
  color: #e4d9c7;
}
.color-army-dark[data-v-8ba8d6a6] {
  color: #aba480;
}
.color-army-subtext[data-v-8ba8d6a6] {
  color: #7d8e5c;
}
.color-winter-light[data-v-8ba8d6a6] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-8ba8d6a6] {
  color: #7d8077;
}
.color-army-blue[data-v-8ba8d6a6] {
  color: #01499d;
}
.box-block[data-v-8ba8d6a6] {
  display: block;
}
.box-flex[data-v-8ba8d6a6] {
  display: flex;
}
.box-hide[data-v-8ba8d6a6] {
  display: none;
}
.box-show[data-v-8ba8d6a6] {
  display: inherit;
}
.font-base[data-v-8ba8d6a6] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-8ba8d6a6] {
  font-family: Germania One, serif;
}
.font-mono[data-v-8ba8d6a6] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-8ba8d6a6] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-8ba8d6a6] {
  margin-top: 1rem;
}
.gap-top-500[data-v-8ba8d6a6] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-8ba8d6a6] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-8ba8d6a6] {
  margin-top: 2rem;
}
.gap-top-900[data-v-8ba8d6a6] {
  margin-top: 3rem;
}
.gap-right-300[data-v-8ba8d6a6] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-8ba8d6a6] {
  margin-right: 1rem;
}
.gap-right-500[data-v-8ba8d6a6] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-8ba8d6a6] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-8ba8d6a6] {
  margin-right: 2rem;
}
.gap-right-900[data-v-8ba8d6a6] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-8ba8d6a6] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-8ba8d6a6] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-8ba8d6a6] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-8ba8d6a6] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-8ba8d6a6] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-8ba8d6a6] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-8ba8d6a6] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-8ba8d6a6] {
  margin-left: 1rem;
}
.gap-left-500[data-v-8ba8d6a6] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-8ba8d6a6] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-8ba8d6a6] {
  margin-left: 2rem;
}
.gap-left-900[data-v-8ba8d6a6] {
  margin-left: 3rem;
}
.pad-top-300[data-v-8ba8d6a6] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-8ba8d6a6] {
  padding-top: 1rem;
}
.pad-top-500[data-v-8ba8d6a6] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-8ba8d6a6] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-8ba8d6a6] {
  padding-top: 2rem;
}
.pad-top-900[data-v-8ba8d6a6] {
  padding-top: 3rem;
}
.pad-right-300[data-v-8ba8d6a6] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-8ba8d6a6] {
  padding-right: 1rem;
}
.pad-right-500[data-v-8ba8d6a6] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-8ba8d6a6] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-8ba8d6a6] {
  padding-right: 2rem;
}
.pad-right-900[data-v-8ba8d6a6] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-8ba8d6a6] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-8ba8d6a6] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-8ba8d6a6] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-8ba8d6a6] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-8ba8d6a6] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-8ba8d6a6] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-8ba8d6a6] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-8ba8d6a6] {
  padding-left: 1rem;
}
.pad-left-500[data-v-8ba8d6a6] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-8ba8d6a6] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-8ba8d6a6] {
  padding-left: 2rem;
}
.pad-left-900[data-v-8ba8d6a6] {
  padding-left: 3rem;
}
.stack-300[data-v-8ba8d6a6] {
  z-index: 0;
}
.stack-400[data-v-8ba8d6a6] {
  z-index: 10;
}
.stack-500[data-v-8ba8d6a6] {
  z-index: 20;
}
.stack-600[data-v-8ba8d6a6] {
  z-index: 30;
}
.stack-700[data-v-8ba8d6a6] {
  z-index: 40;
}
.text-300[data-v-8ba8d6a6] {
  font-size: 0.8rem;
}
.text-400[data-v-8ba8d6a6] {
  font-size: 1rem;
}
.text-500[data-v-8ba8d6a6] {
  font-size: 1.25rem;
}
.text-600[data-v-8ba8d6a6] {
  font-size: 1.6rem;
}
.text-700[data-v-8ba8d6a6] {
  font-size: 2rem;
}
.text-900[data-v-8ba8d6a6] {
  font-size: 3rem;
}
.weight-light[data-v-8ba8d6a6] {
  font-weight: 300;
}
.weight-regular[data-v-8ba8d6a6] {
  font-weight: 400;
}
.weight-bold[data-v-8ba8d6a6] {
  font-weight: 700;
}
.width-full[data-v-8ba8d6a6] {
  width: 100%;
}
.width-half[data-v-8ba8d6a6] {
  width: 50%;
}
.width-quarter[data-v-8ba8d6a6] {
  width: 25%;
}
.width-third[data-v-8ba8d6a6] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-8ba8d6a6] {
    display: block;
}
.smd\:box-flex[data-v-8ba8d6a6] {
    display: flex;
}
.smd\:box-hide[data-v-8ba8d6a6] {
    display: none;
}
.smd\:box-show[data-v-8ba8d6a6] {
    display: inherit;
}
.smd\:text-300[data-v-8ba8d6a6] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-8ba8d6a6] {
    font-size: 1rem;
}
.smd\:text-500[data-v-8ba8d6a6] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-8ba8d6a6] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-8ba8d6a6] {
    font-size: 2rem;
}
.smd\:text-900[data-v-8ba8d6a6] {
    font-size: 3rem;
}
.smd\:width-full[data-v-8ba8d6a6] {
    width: 100%;
}
.smd\:width-half[data-v-8ba8d6a6] {
    width: 50%;
}
.smd\:width-quarter[data-v-8ba8d6a6] {
    width: 25%;
}
.smd\:width-third[data-v-8ba8d6a6] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-8ba8d6a6] {
    display: block;
}
.sm\:box-flex[data-v-8ba8d6a6] {
    display: flex;
}
.sm\:box-hide[data-v-8ba8d6a6] {
    display: none;
}
.sm\:box-show[data-v-8ba8d6a6] {
    display: inherit;
}
.sm\:text-300[data-v-8ba8d6a6] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-8ba8d6a6] {
    font-size: 1rem;
}
.sm\:text-500[data-v-8ba8d6a6] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-8ba8d6a6] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-8ba8d6a6] {
    font-size: 2rem;
}
.sm\:text-900[data-v-8ba8d6a6] {
    font-size: 3rem;
}
.sm\:width-full[data-v-8ba8d6a6] {
    width: 100%;
}
.sm\:width-half[data-v-8ba8d6a6] {
    width: 50%;
}
.sm\:width-quarter[data-v-8ba8d6a6] {
    width: 25%;
}
.sm\:width-third[data-v-8ba8d6a6] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-8ba8d6a6] {
    display: block;
}
.md\:box-flex[data-v-8ba8d6a6] {
    display: flex;
}
.md\:box-hide[data-v-8ba8d6a6] {
    display: none;
}
.md\:box-show[data-v-8ba8d6a6] {
    display: inherit;
}
.md\:text-300[data-v-8ba8d6a6] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-8ba8d6a6] {
    font-size: 1rem;
}
.md\:text-500[data-v-8ba8d6a6] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-8ba8d6a6] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-8ba8d6a6] {
    font-size: 2rem;
}
.md\:text-900[data-v-8ba8d6a6] {
    font-size: 3rem;
}
.md\:width-full[data-v-8ba8d6a6] {
    width: 100%;
}
.md\:width-half[data-v-8ba8d6a6] {
    width: 50%;
}
.md\:width-quarter[data-v-8ba8d6a6] {
    width: 25%;
}
.md\:width-third[data-v-8ba8d6a6] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-8ba8d6a6] {
    display: block;
}
.lg\:box-flex[data-v-8ba8d6a6] {
    display: flex;
}
.lg\:box-hide[data-v-8ba8d6a6] {
    display: none;
}
.lg\:box-show[data-v-8ba8d6a6] {
    display: inherit;
}
.lg\:text-300[data-v-8ba8d6a6] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-8ba8d6a6] {
    font-size: 1rem;
}
.lg\:text-500[data-v-8ba8d6a6] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-8ba8d6a6] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-8ba8d6a6] {
    font-size: 2rem;
}
.lg\:text-900[data-v-8ba8d6a6] {
    font-size: 3rem;
}
.lg\:width-full[data-v-8ba8d6a6] {
    width: 100%;
}
.lg\:width-half[data-v-8ba8d6a6] {
    width: 50%;
}
.lg\:width-quarter[data-v-8ba8d6a6] {
    width: 25%;
}
.lg\:width-third[data-v-8ba8d6a6] {
    width: 33.33333%;
}
}
[data-v-8ba8d6a6]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-8ba8d6a6] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-8ba8d6a6] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-8ba8d6a6] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-8ba8d6a6] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-8ba8d6a6] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-8ba8d6a6] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-8ba8d6a6] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-8ba8d6a6] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-8ba8d6a6] {
  margin-bottom: 7.8px;
}
h1[data-v-8ba8d6a6], h2[data-v-8ba8d6a6], h3[data-v-8ba8d6a6], h4[data-v-8ba8d6a6] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-8ba8d6a6] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-8ba8d6a6] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-8ba8d6a6] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-8ba8d6a6] {
  position: relative;
}
.outer-image-wrapper > img[data-v-8ba8d6a6] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-8ba8d6a6] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-8ba8d6a6] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-8ba8d6a6] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-8ba8d6a6] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-8ba8d6a6] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-8ba8d6a6] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-8ba8d6a6] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-8ba8d6a6] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-8ba8d6a6] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-8ba8d6a6] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-8ba8d6a6] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-8ba8d6a6] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-8ba8d6a6] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-8ba8d6a6] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-8ba8d6a6] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-8ba8d6a6] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-8ba8d6a6] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-8ba8d6a6] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-8ba8d6a6] {
  display: block;
  margin: 0 auto;
  width: 150px;
}

/* Teksti asemoidaan osin alla olevan tekstipalkin päälle. Tämä puuttuu vielä, ominaisuus ei toimi.
.cover-overflow {
    margin: calc($overlap * -1) 2rem 2rem;
}*/
.cover-overflow[data-v-8ba8d6a6] {
  background: #fff;
}
.cover-full-width[data-v-8ba8d6a6] {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.cover-headers-container[data-v-8ba8d6a6] {
  line-height: 1;
  margin: 0;
  position: absolute;
  max-width: 900px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.cover-except[data-v-8ba8d6a6] {
  font-size: 3rem;
}
@media (min-width: 22em) {
.cover-except[data-v-8ba8d6a6] {
      font-size: 4em;
}
}
@media (min-width: 48em) {
.cover-except[data-v-8ba8d6a6] {
      font-size: 5em;
}
}
.black-v[data-v-8ba8d6a6] {
  /* army styles */
  -webkit-filter: drop-shadow(0px 40px 0px #1a1a1a) !important;
  filter: drop-shadow(0px 40px 0px #1a1a1a);
  padding-bottom: 70px;
  /*army styles end */
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-200d4034] {
  background: #1a1a1a;
}
.bg-light[data-v-200d4034] {
  background: #f2f2f2;
}
.bg-army-light[data-v-200d4034] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-200d4034] {
  background: #aba480;
}
.bg-army-subtext[data-v-200d4034] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-200d4034] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-200d4034] {
  background: #7d8077;
}
.bg-army-blue[data-v-200d4034] {
  background: #01499d;
}
.color-dark[data-v-200d4034] {
  color: #1a1a1a;
}
.color-light[data-v-200d4034] {
  color: #f2f2f2;
}
.color-army-light[data-v-200d4034] {
  color: #e4d9c7;
}
.color-army-dark[data-v-200d4034] {
  color: #aba480;
}
.color-army-subtext[data-v-200d4034] {
  color: #7d8e5c;
}
.color-winter-light[data-v-200d4034] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-200d4034] {
  color: #7d8077;
}
.color-army-blue[data-v-200d4034] {
  color: #01499d;
}
.box-block[data-v-200d4034] {
  display: block;
}
.box-flex[data-v-200d4034] {
  display: flex;
}
.box-hide[data-v-200d4034] {
  display: none;
}
.box-show[data-v-200d4034] {
  display: inherit;
}
.font-base[data-v-200d4034] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-200d4034] {
  font-family: Germania One, serif;
}
.font-mono[data-v-200d4034] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-200d4034] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-200d4034] {
  margin-top: 1rem;
}
.gap-top-500[data-v-200d4034] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-200d4034] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-200d4034] {
  margin-top: 2rem;
}
.gap-top-900[data-v-200d4034] {
  margin-top: 3rem;
}
.gap-right-300[data-v-200d4034] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-200d4034] {
  margin-right: 1rem;
}
.gap-right-500[data-v-200d4034] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-200d4034] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-200d4034] {
  margin-right: 2rem;
}
.gap-right-900[data-v-200d4034] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-200d4034] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-200d4034] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-200d4034] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-200d4034] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-200d4034] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-200d4034] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-200d4034] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-200d4034] {
  margin-left: 1rem;
}
.gap-left-500[data-v-200d4034] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-200d4034] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-200d4034] {
  margin-left: 2rem;
}
.gap-left-900[data-v-200d4034] {
  margin-left: 3rem;
}
.pad-top-300[data-v-200d4034] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-200d4034] {
  padding-top: 1rem;
}
.pad-top-500[data-v-200d4034] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-200d4034] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-200d4034] {
  padding-top: 2rem;
}
.pad-top-900[data-v-200d4034] {
  padding-top: 3rem;
}
.pad-right-300[data-v-200d4034] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-200d4034] {
  padding-right: 1rem;
}
.pad-right-500[data-v-200d4034] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-200d4034] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-200d4034] {
  padding-right: 2rem;
}
.pad-right-900[data-v-200d4034] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-200d4034] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-200d4034] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-200d4034] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-200d4034] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-200d4034] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-200d4034] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-200d4034] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-200d4034] {
  padding-left: 1rem;
}
.pad-left-500[data-v-200d4034] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-200d4034] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-200d4034] {
  padding-left: 2rem;
}
.pad-left-900[data-v-200d4034] {
  padding-left: 3rem;
}
.stack-300[data-v-200d4034] {
  z-index: 0;
}
.stack-400[data-v-200d4034] {
  z-index: 10;
}
.stack-500[data-v-200d4034] {
  z-index: 20;
}
.stack-600[data-v-200d4034] {
  z-index: 30;
}
.stack-700[data-v-200d4034] {
  z-index: 40;
}
.text-300[data-v-200d4034] {
  font-size: 0.8rem;
}
.text-400[data-v-200d4034] {
  font-size: 1rem;
}
.text-500[data-v-200d4034] {
  font-size: 1.25rem;
}
.text-600[data-v-200d4034] {
  font-size: 1.6rem;
}
.text-700[data-v-200d4034] {
  font-size: 2rem;
}
.text-900[data-v-200d4034] {
  font-size: 3rem;
}
.weight-light[data-v-200d4034] {
  font-weight: 300;
}
.weight-regular[data-v-200d4034] {
  font-weight: 400;
}
.weight-bold[data-v-200d4034] {
  font-weight: 700;
}
.width-full[data-v-200d4034] {
  width: 100%;
}
.width-half[data-v-200d4034] {
  width: 50%;
}
.width-quarter[data-v-200d4034] {
  width: 25%;
}
.width-third[data-v-200d4034] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-200d4034] {
    display: block;
}
.smd\:box-flex[data-v-200d4034] {
    display: flex;
}
.smd\:box-hide[data-v-200d4034] {
    display: none;
}
.smd\:box-show[data-v-200d4034] {
    display: inherit;
}
.smd\:text-300[data-v-200d4034] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-200d4034] {
    font-size: 1rem;
}
.smd\:text-500[data-v-200d4034] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-200d4034] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-200d4034] {
    font-size: 2rem;
}
.smd\:text-900[data-v-200d4034] {
    font-size: 3rem;
}
.smd\:width-full[data-v-200d4034] {
    width: 100%;
}
.smd\:width-half[data-v-200d4034] {
    width: 50%;
}
.smd\:width-quarter[data-v-200d4034] {
    width: 25%;
}
.smd\:width-third[data-v-200d4034] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-200d4034] {
    display: block;
}
.sm\:box-flex[data-v-200d4034] {
    display: flex;
}
.sm\:box-hide[data-v-200d4034] {
    display: none;
}
.sm\:box-show[data-v-200d4034] {
    display: inherit;
}
.sm\:text-300[data-v-200d4034] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-200d4034] {
    font-size: 1rem;
}
.sm\:text-500[data-v-200d4034] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-200d4034] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-200d4034] {
    font-size: 2rem;
}
.sm\:text-900[data-v-200d4034] {
    font-size: 3rem;
}
.sm\:width-full[data-v-200d4034] {
    width: 100%;
}
.sm\:width-half[data-v-200d4034] {
    width: 50%;
}
.sm\:width-quarter[data-v-200d4034] {
    width: 25%;
}
.sm\:width-third[data-v-200d4034] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-200d4034] {
    display: block;
}
.md\:box-flex[data-v-200d4034] {
    display: flex;
}
.md\:box-hide[data-v-200d4034] {
    display: none;
}
.md\:box-show[data-v-200d4034] {
    display: inherit;
}
.md\:text-300[data-v-200d4034] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-200d4034] {
    font-size: 1rem;
}
.md\:text-500[data-v-200d4034] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-200d4034] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-200d4034] {
    font-size: 2rem;
}
.md\:text-900[data-v-200d4034] {
    font-size: 3rem;
}
.md\:width-full[data-v-200d4034] {
    width: 100%;
}
.md\:width-half[data-v-200d4034] {
    width: 50%;
}
.md\:width-quarter[data-v-200d4034] {
    width: 25%;
}
.md\:width-third[data-v-200d4034] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-200d4034] {
    display: block;
}
.lg\:box-flex[data-v-200d4034] {
    display: flex;
}
.lg\:box-hide[data-v-200d4034] {
    display: none;
}
.lg\:box-show[data-v-200d4034] {
    display: inherit;
}
.lg\:text-300[data-v-200d4034] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-200d4034] {
    font-size: 1rem;
}
.lg\:text-500[data-v-200d4034] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-200d4034] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-200d4034] {
    font-size: 2rem;
}
.lg\:text-900[data-v-200d4034] {
    font-size: 3rem;
}
.lg\:width-full[data-v-200d4034] {
    width: 100%;
}
.lg\:width-half[data-v-200d4034] {
    width: 50%;
}
.lg\:width-quarter[data-v-200d4034] {
    width: 25%;
}
.lg\:width-third[data-v-200d4034] {
    width: 33.33333%;
}
}
[data-v-200d4034]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-200d4034] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-200d4034] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-200d4034] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-200d4034] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-200d4034] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-200d4034] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-200d4034] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-200d4034] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-200d4034] {
  margin-bottom: 7.8px;
}
h1[data-v-200d4034], h2[data-v-200d4034], h3[data-v-200d4034], h4[data-v-200d4034] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-200d4034] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-200d4034] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-200d4034] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-200d4034] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-200d4034] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-200d4034] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-200d4034] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-200d4034] {
  position: relative;
}
.outer-image-wrapper > img[data-v-200d4034] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-200d4034] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-200d4034] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-200d4034] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-200d4034] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-200d4034] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-200d4034] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-200d4034] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-200d4034] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-200d4034] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-200d4034] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-200d4034] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-200d4034] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-200d4034] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-200d4034] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-200d4034] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-200d4034] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-200d4034] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-200d4034] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-200d4034] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-200d4034] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-200d4034] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-200d4034] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.army-blue[data-v-200d4034] {
  text-decoration-line: none;
}
picture[data-v-200d4034], img[data-v-200d4034] {
  display: block;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 22em) {
picture[data-v-200d4034], img[data-v-200d4034] {
      width: 94%;
}
}
@media (min-width: 48em) {
picture[data-v-200d4034], img[data-v-200d4034] {
      display: block;
      margin: 0 auto;
      max-width: 430px;
}
}
@media (min-width: 22em) {
.lentajapallo[data-v-200d4034] {
    width: 100px;
}
}
.gradient-top[data-v-200d4034] {
  position: sticky;
  top: 0;
  z-index: 5;
  border: solid 5px transparent;
  background: rgba(255, 255, 255, 0.99) padding-box;
}
.gradient-bottom[data-v-200d4034] {
  background: conic-gradient(from 30deg, #e4d9c7 0% 60deg, #aba480 0% 120deg, #e4d9c7 0% 50%, #aba480 0% 240deg, #e4d9c7 0% 300deg, #aba480 0%) 0 0/ 15px 25.98076px;
}

@charset "UTF-8";
[data-v-70fb958a]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-70fb958a] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-70fb958a] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-70fb958a] {
  -webkit-filter: drop-shadow(0px 50px 0px get-color(dark));
  filter: drop-shadow(0px 50px 0px get-color(dark));
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-70fb958a] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-70fb958a] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-70fb958a] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-70fb958a] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-70fb958a] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-70fb958a] {
  margin-bottom: 7.8px;
}
h1[data-v-70fb958a], h2[data-v-70fb958a], h3[data-v-70fb958a], h4[data-v-70fb958a] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-70fb958a] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-70fb958a] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-70fb958a] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-70fb958a] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-70fb958a] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-70fb958a] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-70fb958a] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-70fb958a] {
  position: relative;
}
.outer-image-wrapper > img[data-v-70fb958a] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-70fb958a] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-70fb958a] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-70fb958a] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-70fb958a] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-70fb958a] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-70fb958a] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-70fb958a] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-70fb958a] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-70fb958a] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-70fb958a] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-70fb958a] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-70fb958a] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-70fb958a] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-70fb958a] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: get-size("400");
  background-color: get-color("army-subtext");
  color: get-color("light");
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-70fb958a] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-70fb958a] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: get-size("500");
  background-color: get-color("winter-light");
  color: get-color("light");
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-70fb958a] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-70fb958a] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-70fb958a] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-70fb958a] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(get-color("army-dark") 0%, get-color("army-dark") 30%, #fff 30%, #fff 30%);
  background-image: get-color("army-dark") 0%, get-color("army-dark") 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-70fb958a] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(get-color("winter-light") 0%, get-color("winter-light") 45%, get-color("dark") 45%, get-color("dark") 45%);
  background-image: get-color("winter-light") 0%, get-color("winter-light") 45%, get-color("dark") 45%, get-color("dark") 45%;
}
.nimil[data-v-70fb958a] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.progress-wrapper[data-v-70fb958a] {
  position: fixed;
  background-color: #262a2e;
  z-index: 130;
  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: 135;
  height: 100%;
  width: 100%;
  background: #b0c047;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-79f8e934] {
  background: #1a1a1a;
}
.bg-light[data-v-79f8e934] {
  background: #f2f2f2;
}
.bg-army-light[data-v-79f8e934] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-79f8e934] {
  background: #aba480;
}
.bg-army-subtext[data-v-79f8e934] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-79f8e934] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-79f8e934] {
  background: #7d8077;
}
.bg-army-blue[data-v-79f8e934] {
  background: #01499d;
}
.color-dark[data-v-79f8e934] {
  color: #1a1a1a;
}
.color-light[data-v-79f8e934] {
  color: #f2f2f2;
}
.color-army-light[data-v-79f8e934] {
  color: #e4d9c7;
}
.color-army-dark[data-v-79f8e934] {
  color: #aba480;
}
.color-army-subtext[data-v-79f8e934] {
  color: #7d8e5c;
}
.color-winter-light[data-v-79f8e934] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-79f8e934] {
  color: #7d8077;
}
.color-army-blue[data-v-79f8e934] {
  color: #01499d;
}
.box-block[data-v-79f8e934] {
  display: block;
}
.box-flex[data-v-79f8e934] {
  display: flex;
}
.box-hide[data-v-79f8e934] {
  display: none;
}
.box-show[data-v-79f8e934] {
  display: inherit;
}
.font-base[data-v-79f8e934] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-79f8e934] {
  font-family: Germania One, serif;
}
.font-mono[data-v-79f8e934] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-79f8e934] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-79f8e934] {
  margin-top: 1rem;
}
.gap-top-500[data-v-79f8e934] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-79f8e934] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-79f8e934] {
  margin-top: 2rem;
}
.gap-top-900[data-v-79f8e934] {
  margin-top: 3rem;
}
.gap-right-300[data-v-79f8e934] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-79f8e934] {
  margin-right: 1rem;
}
.gap-right-500[data-v-79f8e934] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-79f8e934] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-79f8e934] {
  margin-right: 2rem;
}
.gap-right-900[data-v-79f8e934] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-79f8e934] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-79f8e934] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-79f8e934] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-79f8e934] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-79f8e934] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-79f8e934] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-79f8e934] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-79f8e934] {
  margin-left: 1rem;
}
.gap-left-500[data-v-79f8e934] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-79f8e934] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-79f8e934] {
  margin-left: 2rem;
}
.gap-left-900[data-v-79f8e934] {
  margin-left: 3rem;
}
.pad-top-300[data-v-79f8e934] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-79f8e934] {
  padding-top: 1rem;
}
.pad-top-500[data-v-79f8e934] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-79f8e934] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-79f8e934] {
  padding-top: 2rem;
}
.pad-top-900[data-v-79f8e934] {
  padding-top: 3rem;
}
.pad-right-300[data-v-79f8e934] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-79f8e934] {
  padding-right: 1rem;
}
.pad-right-500[data-v-79f8e934] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-79f8e934] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-79f8e934] {
  padding-right: 2rem;
}
.pad-right-900[data-v-79f8e934] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-79f8e934] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-79f8e934] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-79f8e934] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-79f8e934] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-79f8e934] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-79f8e934] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-79f8e934] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-79f8e934] {
  padding-left: 1rem;
}
.pad-left-500[data-v-79f8e934] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-79f8e934] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-79f8e934] {
  padding-left: 2rem;
}
.pad-left-900[data-v-79f8e934] {
  padding-left: 3rem;
}
.stack-300[data-v-79f8e934] {
  z-index: 0;
}
.stack-400[data-v-79f8e934] {
  z-index: 10;
}
.stack-500[data-v-79f8e934] {
  z-index: 20;
}
.stack-600[data-v-79f8e934] {
  z-index: 30;
}
.stack-700[data-v-79f8e934] {
  z-index: 40;
}
.text-300[data-v-79f8e934] {
  font-size: 0.8rem;
}
.text-400[data-v-79f8e934] {
  font-size: 1rem;
}
.text-500[data-v-79f8e934] {
  font-size: 1.25rem;
}
.text-600[data-v-79f8e934] {
  font-size: 1.6rem;
}
.text-700[data-v-79f8e934] {
  font-size: 2rem;
}
.text-900[data-v-79f8e934] {
  font-size: 3rem;
}
.weight-light[data-v-79f8e934] {
  font-weight: 300;
}
.weight-regular[data-v-79f8e934] {
  font-weight: 400;
}
.weight-bold[data-v-79f8e934] {
  font-weight: 700;
}
.width-full[data-v-79f8e934] {
  width: 100%;
}
.width-half[data-v-79f8e934] {
  width: 50%;
}
.width-quarter[data-v-79f8e934] {
  width: 25%;
}
.width-third[data-v-79f8e934] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-79f8e934] {
    display: block;
}
.smd\:box-flex[data-v-79f8e934] {
    display: flex;
}
.smd\:box-hide[data-v-79f8e934] {
    display: none;
}
.smd\:box-show[data-v-79f8e934] {
    display: inherit;
}
.smd\:text-300[data-v-79f8e934] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-79f8e934] {
    font-size: 1rem;
}
.smd\:text-500[data-v-79f8e934] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-79f8e934] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-79f8e934] {
    font-size: 2rem;
}
.smd\:text-900[data-v-79f8e934] {
    font-size: 3rem;
}
.smd\:width-full[data-v-79f8e934] {
    width: 100%;
}
.smd\:width-half[data-v-79f8e934] {
    width: 50%;
}
.smd\:width-quarter[data-v-79f8e934] {
    width: 25%;
}
.smd\:width-third[data-v-79f8e934] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-79f8e934] {
    display: block;
}
.sm\:box-flex[data-v-79f8e934] {
    display: flex;
}
.sm\:box-hide[data-v-79f8e934] {
    display: none;
}
.sm\:box-show[data-v-79f8e934] {
    display: inherit;
}
.sm\:text-300[data-v-79f8e934] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-79f8e934] {
    font-size: 1rem;
}
.sm\:text-500[data-v-79f8e934] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-79f8e934] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-79f8e934] {
    font-size: 2rem;
}
.sm\:text-900[data-v-79f8e934] {
    font-size: 3rem;
}
.sm\:width-full[data-v-79f8e934] {
    width: 100%;
}
.sm\:width-half[data-v-79f8e934] {
    width: 50%;
}
.sm\:width-quarter[data-v-79f8e934] {
    width: 25%;
}
.sm\:width-third[data-v-79f8e934] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-79f8e934] {
    display: block;
}
.md\:box-flex[data-v-79f8e934] {
    display: flex;
}
.md\:box-hide[data-v-79f8e934] {
    display: none;
}
.md\:box-show[data-v-79f8e934] {
    display: inherit;
}
.md\:text-300[data-v-79f8e934] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-79f8e934] {
    font-size: 1rem;
}
.md\:text-500[data-v-79f8e934] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-79f8e934] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-79f8e934] {
    font-size: 2rem;
}
.md\:text-900[data-v-79f8e934] {
    font-size: 3rem;
}
.md\:width-full[data-v-79f8e934] {
    width: 100%;
}
.md\:width-half[data-v-79f8e934] {
    width: 50%;
}
.md\:width-quarter[data-v-79f8e934] {
    width: 25%;
}
.md\:width-third[data-v-79f8e934] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-79f8e934] {
    display: block;
}
.lg\:box-flex[data-v-79f8e934] {
    display: flex;
}
.lg\:box-hide[data-v-79f8e934] {
    display: none;
}
.lg\:box-show[data-v-79f8e934] {
    display: inherit;
}
.lg\:text-300[data-v-79f8e934] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-79f8e934] {
    font-size: 1rem;
}
.lg\:text-500[data-v-79f8e934] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-79f8e934] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-79f8e934] {
    font-size: 2rem;
}
.lg\:text-900[data-v-79f8e934] {
    font-size: 3rem;
}
.lg\:width-full[data-v-79f8e934] {
    width: 100%;
}
.lg\:width-half[data-v-79f8e934] {
    width: 50%;
}
.lg\:width-quarter[data-v-79f8e934] {
    width: 25%;
}
.lg\:width-third[data-v-79f8e934] {
    width: 33.33333%;
}
}
[data-v-79f8e934]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-79f8e934] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-79f8e934] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-79f8e934] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-79f8e934] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-79f8e934] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-79f8e934] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-79f8e934] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-79f8e934] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-79f8e934] {
  margin-bottom: 7.8px;
}
h1[data-v-79f8e934], h2[data-v-79f8e934], h3[data-v-79f8e934], h4[data-v-79f8e934] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-79f8e934] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-79f8e934] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-79f8e934] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-79f8e934] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-79f8e934] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-79f8e934] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-79f8e934] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-79f8e934] {
  position: relative;
}
.outer-image-wrapper > img[data-v-79f8e934] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-79f8e934] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-79f8e934] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-79f8e934] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-79f8e934] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-79f8e934] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-79f8e934] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-79f8e934] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-79f8e934] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-79f8e934] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-79f8e934] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-79f8e934] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-79f8e934] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-79f8e934] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-79f8e934] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-79f8e934] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-79f8e934] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-79f8e934] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-79f8e934] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-79f8e934] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-79f8e934] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-79f8e934] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-79f8e934] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
svg[data-v-79f8e934] {
  display: block;
  margin: 0 auto;
  width: 100vmin;
}
.black-v[data-v-79f8e934] {
  /* army styles */
  -webkit-filter: drop-shadow(0px 40px 0px #1a1a1a) !important;
  filter: drop-shadow(0px 40px 0px #1a1a1a);
  padding-bottom: 70px;
  /*army styles end */
}
.sticky-content[data-v-79f8e934] {
  height: 145vh;
  background-size: cover;
  background-position: center center;
  position: sticky;
  top: 0;
}
@media (max-width: 550px) {
.sticky-content[data-v-79f8e934] {
      height: 100vh;
}
}
.overflow[data-v-79f8e934] {
  max-width: 500px;
  margin: 0 auto;
  transform: translate3d(0, 0, 0);
  /* -webkit-transform: translate3d(0,0,0); Tämä täytyy olla että homma toimii iPadilla  */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100;
  text-align: center;
}
@media (max-width: 520px) {
.overflow[data-v-79f8e934] {
      max-width: none;
      width: 94%;
      margin: 0 3%;
}
}
.overflow p[data-v-79f8e934] {
    font-family: 'Yle-Medium', serif;
    font-weight: 400;
    z-index: 120;
    font-size: 1.25rem;
    line-height: 1.3;
    border-radius: 1px;
    background-color: #7d8e5c;
    filter: contrast(180%) saturate(60%);
    color: white;
    margin: 0 auto 130vh auto;
    padding: 20px;
}
@media (max-width: 550px) {
.overflow p[data-v-79f8e934] {
        font-size: 1rem;
        margin: 0 auto 100vh auto;
        padding: 19px;
}
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-32027c20] {
  background: #1a1a1a;
}
.bg-light[data-v-32027c20] {
  background: #f2f2f2;
}
.bg-army-light[data-v-32027c20] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-32027c20] {
  background: #aba480;
}
.bg-army-subtext[data-v-32027c20] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-32027c20] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-32027c20] {
  background: #7d8077;
}
.bg-army-blue[data-v-32027c20] {
  background: #01499d;
}
.color-dark[data-v-32027c20] {
  color: #1a1a1a;
}
.color-light[data-v-32027c20] {
  color: #f2f2f2;
}
.color-army-light[data-v-32027c20] {
  color: #e4d9c7;
}
.color-army-dark[data-v-32027c20] {
  color: #aba480;
}
.color-army-subtext[data-v-32027c20] {
  color: #7d8e5c;
}
.color-winter-light[data-v-32027c20] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-32027c20] {
  color: #7d8077;
}
.color-army-blue[data-v-32027c20] {
  color: #01499d;
}
.box-block[data-v-32027c20] {
  display: block;
}
.box-flex[data-v-32027c20] {
  display: flex;
}
.box-hide[data-v-32027c20] {
  display: none;
}
.box-show[data-v-32027c20] {
  display: inherit;
}
.font-base[data-v-32027c20] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-32027c20] {
  font-family: Germania One, serif;
}
.font-mono[data-v-32027c20] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-32027c20] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-32027c20] {
  margin-top: 1rem;
}
.gap-top-500[data-v-32027c20] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-32027c20] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-32027c20] {
  margin-top: 2rem;
}
.gap-top-900[data-v-32027c20] {
  margin-top: 3rem;
}
.gap-right-300[data-v-32027c20] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-32027c20] {
  margin-right: 1rem;
}
.gap-right-500[data-v-32027c20] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-32027c20] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-32027c20] {
  margin-right: 2rem;
}
.gap-right-900[data-v-32027c20] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-32027c20] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-32027c20] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-32027c20] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-32027c20] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-32027c20] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-32027c20] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-32027c20] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-32027c20] {
  margin-left: 1rem;
}
.gap-left-500[data-v-32027c20] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-32027c20] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-32027c20] {
  margin-left: 2rem;
}
.gap-left-900[data-v-32027c20] {
  margin-left: 3rem;
}
.pad-top-300[data-v-32027c20] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-32027c20] {
  padding-top: 1rem;
}
.pad-top-500[data-v-32027c20] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-32027c20] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-32027c20] {
  padding-top: 2rem;
}
.pad-top-900[data-v-32027c20] {
  padding-top: 3rem;
}
.pad-right-300[data-v-32027c20] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-32027c20] {
  padding-right: 1rem;
}
.pad-right-500[data-v-32027c20] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-32027c20] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-32027c20] {
  padding-right: 2rem;
}
.pad-right-900[data-v-32027c20] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-32027c20] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-32027c20] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-32027c20] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-32027c20] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-32027c20] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-32027c20] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-32027c20] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-32027c20] {
  padding-left: 1rem;
}
.pad-left-500[data-v-32027c20] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-32027c20] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-32027c20] {
  padding-left: 2rem;
}
.pad-left-900[data-v-32027c20] {
  padding-left: 3rem;
}
.stack-300[data-v-32027c20] {
  z-index: 0;
}
.stack-400[data-v-32027c20] {
  z-index: 10;
}
.stack-500[data-v-32027c20] {
  z-index: 20;
}
.stack-600[data-v-32027c20] {
  z-index: 30;
}
.stack-700[data-v-32027c20] {
  z-index: 40;
}
.text-300[data-v-32027c20] {
  font-size: 0.8rem;
}
.text-400[data-v-32027c20] {
  font-size: 1rem;
}
.text-500[data-v-32027c20] {
  font-size: 1.25rem;
}
.text-600[data-v-32027c20] {
  font-size: 1.6rem;
}
.text-700[data-v-32027c20] {
  font-size: 2rem;
}
.text-900[data-v-32027c20] {
  font-size: 3rem;
}
.weight-light[data-v-32027c20] {
  font-weight: 300;
}
.weight-regular[data-v-32027c20] {
  font-weight: 400;
}
.weight-bold[data-v-32027c20] {
  font-weight: 700;
}
.width-full[data-v-32027c20] {
  width: 100%;
}
.width-half[data-v-32027c20] {
  width: 50%;
}
.width-quarter[data-v-32027c20] {
  width: 25%;
}
.width-third[data-v-32027c20] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-32027c20] {
    display: block;
}
.smd\:box-flex[data-v-32027c20] {
    display: flex;
}
.smd\:box-hide[data-v-32027c20] {
    display: none;
}
.smd\:box-show[data-v-32027c20] {
    display: inherit;
}
.smd\:text-300[data-v-32027c20] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-32027c20] {
    font-size: 1rem;
}
.smd\:text-500[data-v-32027c20] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-32027c20] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-32027c20] {
    font-size: 2rem;
}
.smd\:text-900[data-v-32027c20] {
    font-size: 3rem;
}
.smd\:width-full[data-v-32027c20] {
    width: 100%;
}
.smd\:width-half[data-v-32027c20] {
    width: 50%;
}
.smd\:width-quarter[data-v-32027c20] {
    width: 25%;
}
.smd\:width-third[data-v-32027c20] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-32027c20] {
    display: block;
}
.sm\:box-flex[data-v-32027c20] {
    display: flex;
}
.sm\:box-hide[data-v-32027c20] {
    display: none;
}
.sm\:box-show[data-v-32027c20] {
    display: inherit;
}
.sm\:text-300[data-v-32027c20] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-32027c20] {
    font-size: 1rem;
}
.sm\:text-500[data-v-32027c20] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-32027c20] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-32027c20] {
    font-size: 2rem;
}
.sm\:text-900[data-v-32027c20] {
    font-size: 3rem;
}
.sm\:width-full[data-v-32027c20] {
    width: 100%;
}
.sm\:width-half[data-v-32027c20] {
    width: 50%;
}
.sm\:width-quarter[data-v-32027c20] {
    width: 25%;
}
.sm\:width-third[data-v-32027c20] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-32027c20] {
    display: block;
}
.md\:box-flex[data-v-32027c20] {
    display: flex;
}
.md\:box-hide[data-v-32027c20] {
    display: none;
}
.md\:box-show[data-v-32027c20] {
    display: inherit;
}
.md\:text-300[data-v-32027c20] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-32027c20] {
    font-size: 1rem;
}
.md\:text-500[data-v-32027c20] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-32027c20] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-32027c20] {
    font-size: 2rem;
}
.md\:text-900[data-v-32027c20] {
    font-size: 3rem;
}
.md\:width-full[data-v-32027c20] {
    width: 100%;
}
.md\:width-half[data-v-32027c20] {
    width: 50%;
}
.md\:width-quarter[data-v-32027c20] {
    width: 25%;
}
.md\:width-third[data-v-32027c20] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-32027c20] {
    display: block;
}
.lg\:box-flex[data-v-32027c20] {
    display: flex;
}
.lg\:box-hide[data-v-32027c20] {
    display: none;
}
.lg\:box-show[data-v-32027c20] {
    display: inherit;
}
.lg\:text-300[data-v-32027c20] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-32027c20] {
    font-size: 1rem;
}
.lg\:text-500[data-v-32027c20] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-32027c20] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-32027c20] {
    font-size: 2rem;
}
.lg\:text-900[data-v-32027c20] {
    font-size: 3rem;
}
.lg\:width-full[data-v-32027c20] {
    width: 100%;
}
.lg\:width-half[data-v-32027c20] {
    width: 50%;
}
.lg\:width-quarter[data-v-32027c20] {
    width: 25%;
}
.lg\:width-third[data-v-32027c20] {
    width: 33.33333%;
}
}
[data-v-32027c20]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-32027c20] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-32027c20] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-32027c20] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-32027c20] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-32027c20] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-32027c20] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-32027c20] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-32027c20] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-32027c20] {
  margin-bottom: 7.8px;
}
h1[data-v-32027c20], h2[data-v-32027c20], h3[data-v-32027c20], h4[data-v-32027c20] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-32027c20] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-32027c20] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-32027c20] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-32027c20] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-32027c20] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-32027c20] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-32027c20] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-32027c20] {
  position: relative;
}
.outer-image-wrapper > img[data-v-32027c20] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-32027c20] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-32027c20] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-32027c20] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-32027c20] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-32027c20] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-32027c20] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-32027c20] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-32027c20] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-32027c20] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-32027c20] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-32027c20] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-32027c20] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-32027c20] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-32027c20] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-32027c20] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-32027c20] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-32027c20] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-32027c20] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-32027c20] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-32027c20] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-32027c20] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-32027c20] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-32027c20] {
  display: grid;
}
.sticky-container[data-v-32027c20] {
  position: relative;
  z-index: 2;
}
svg[data-v-32027c20] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-32027c20] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-32027c20] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-32027c20] {
  background-color: #aba480;
}
.bodyTextExcept[data-v-32027c20] {
  border-bottom: 5px solid #1a1a1a;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-0b051cd2] {
  background: #1a1a1a;
}
.bg-light[data-v-0b051cd2] {
  background: #f2f2f2;
}
.bg-army-light[data-v-0b051cd2] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-0b051cd2] {
  background: #aba480;
}
.bg-army-subtext[data-v-0b051cd2] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-0b051cd2] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-0b051cd2] {
  background: #7d8077;
}
.bg-army-blue[data-v-0b051cd2] {
  background: #01499d;
}
.color-dark[data-v-0b051cd2] {
  color: #1a1a1a;
}
.color-light[data-v-0b051cd2] {
  color: #f2f2f2;
}
.color-army-light[data-v-0b051cd2] {
  color: #e4d9c7;
}
.color-army-dark[data-v-0b051cd2] {
  color: #aba480;
}
.color-army-subtext[data-v-0b051cd2] {
  color: #7d8e5c;
}
.color-winter-light[data-v-0b051cd2] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-0b051cd2] {
  color: #7d8077;
}
.color-army-blue[data-v-0b051cd2] {
  color: #01499d;
}
.box-block[data-v-0b051cd2] {
  display: block;
}
.box-flex[data-v-0b051cd2] {
  display: flex;
}
.box-hide[data-v-0b051cd2] {
  display: none;
}
.box-show[data-v-0b051cd2] {
  display: inherit;
}
.font-base[data-v-0b051cd2] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-0b051cd2] {
  font-family: Germania One, serif;
}
.font-mono[data-v-0b051cd2] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-0b051cd2] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-0b051cd2] {
  margin-top: 1rem;
}
.gap-top-500[data-v-0b051cd2] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-0b051cd2] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-0b051cd2] {
  margin-top: 2rem;
}
.gap-top-900[data-v-0b051cd2] {
  margin-top: 3rem;
}
.gap-right-300[data-v-0b051cd2] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-0b051cd2] {
  margin-right: 1rem;
}
.gap-right-500[data-v-0b051cd2] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-0b051cd2] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-0b051cd2] {
  margin-right: 2rem;
}
.gap-right-900[data-v-0b051cd2] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-0b051cd2] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-0b051cd2] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-0b051cd2] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-0b051cd2] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-0b051cd2] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-0b051cd2] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-0b051cd2] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-0b051cd2] {
  margin-left: 1rem;
}
.gap-left-500[data-v-0b051cd2] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-0b051cd2] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-0b051cd2] {
  margin-left: 2rem;
}
.gap-left-900[data-v-0b051cd2] {
  margin-left: 3rem;
}
.pad-top-300[data-v-0b051cd2] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-0b051cd2] {
  padding-top: 1rem;
}
.pad-top-500[data-v-0b051cd2] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-0b051cd2] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-0b051cd2] {
  padding-top: 2rem;
}
.pad-top-900[data-v-0b051cd2] {
  padding-top: 3rem;
}
.pad-right-300[data-v-0b051cd2] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-0b051cd2] {
  padding-right: 1rem;
}
.pad-right-500[data-v-0b051cd2] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-0b051cd2] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-0b051cd2] {
  padding-right: 2rem;
}
.pad-right-900[data-v-0b051cd2] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-0b051cd2] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-0b051cd2] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-0b051cd2] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-0b051cd2] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-0b051cd2] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-0b051cd2] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-0b051cd2] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-0b051cd2] {
  padding-left: 1rem;
}
.pad-left-500[data-v-0b051cd2] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-0b051cd2] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-0b051cd2] {
  padding-left: 2rem;
}
.pad-left-900[data-v-0b051cd2] {
  padding-left: 3rem;
}
.stack-300[data-v-0b051cd2] {
  z-index: 0;
}
.stack-400[data-v-0b051cd2] {
  z-index: 10;
}
.stack-500[data-v-0b051cd2] {
  z-index: 20;
}
.stack-600[data-v-0b051cd2] {
  z-index: 30;
}
.stack-700[data-v-0b051cd2] {
  z-index: 40;
}
.text-300[data-v-0b051cd2] {
  font-size: 0.8rem;
}
.text-400[data-v-0b051cd2] {
  font-size: 1rem;
}
.text-500[data-v-0b051cd2] {
  font-size: 1.25rem;
}
.text-600[data-v-0b051cd2] {
  font-size: 1.6rem;
}
.text-700[data-v-0b051cd2] {
  font-size: 2rem;
}
.text-900[data-v-0b051cd2] {
  font-size: 3rem;
}
.weight-light[data-v-0b051cd2] {
  font-weight: 300;
}
.weight-regular[data-v-0b051cd2] {
  font-weight: 400;
}
.weight-bold[data-v-0b051cd2] {
  font-weight: 700;
}
.width-full[data-v-0b051cd2] {
  width: 100%;
}
.width-half[data-v-0b051cd2] {
  width: 50%;
}
.width-quarter[data-v-0b051cd2] {
  width: 25%;
}
.width-third[data-v-0b051cd2] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-0b051cd2] {
    display: block;
}
.smd\:box-flex[data-v-0b051cd2] {
    display: flex;
}
.smd\:box-hide[data-v-0b051cd2] {
    display: none;
}
.smd\:box-show[data-v-0b051cd2] {
    display: inherit;
}
.smd\:text-300[data-v-0b051cd2] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-0b051cd2] {
    font-size: 1rem;
}
.smd\:text-500[data-v-0b051cd2] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-0b051cd2] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-0b051cd2] {
    font-size: 2rem;
}
.smd\:text-900[data-v-0b051cd2] {
    font-size: 3rem;
}
.smd\:width-full[data-v-0b051cd2] {
    width: 100%;
}
.smd\:width-half[data-v-0b051cd2] {
    width: 50%;
}
.smd\:width-quarter[data-v-0b051cd2] {
    width: 25%;
}
.smd\:width-third[data-v-0b051cd2] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-0b051cd2] {
    display: block;
}
.sm\:box-flex[data-v-0b051cd2] {
    display: flex;
}
.sm\:box-hide[data-v-0b051cd2] {
    display: none;
}
.sm\:box-show[data-v-0b051cd2] {
    display: inherit;
}
.sm\:text-300[data-v-0b051cd2] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-0b051cd2] {
    font-size: 1rem;
}
.sm\:text-500[data-v-0b051cd2] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-0b051cd2] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-0b051cd2] {
    font-size: 2rem;
}
.sm\:text-900[data-v-0b051cd2] {
    font-size: 3rem;
}
.sm\:width-full[data-v-0b051cd2] {
    width: 100%;
}
.sm\:width-half[data-v-0b051cd2] {
    width: 50%;
}
.sm\:width-quarter[data-v-0b051cd2] {
    width: 25%;
}
.sm\:width-third[data-v-0b051cd2] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-0b051cd2] {
    display: block;
}
.md\:box-flex[data-v-0b051cd2] {
    display: flex;
}
.md\:box-hide[data-v-0b051cd2] {
    display: none;
}
.md\:box-show[data-v-0b051cd2] {
    display: inherit;
}
.md\:text-300[data-v-0b051cd2] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-0b051cd2] {
    font-size: 1rem;
}
.md\:text-500[data-v-0b051cd2] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-0b051cd2] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-0b051cd2] {
    font-size: 2rem;
}
.md\:text-900[data-v-0b051cd2] {
    font-size: 3rem;
}
.md\:width-full[data-v-0b051cd2] {
    width: 100%;
}
.md\:width-half[data-v-0b051cd2] {
    width: 50%;
}
.md\:width-quarter[data-v-0b051cd2] {
    width: 25%;
}
.md\:width-third[data-v-0b051cd2] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-0b051cd2] {
    display: block;
}
.lg\:box-flex[data-v-0b051cd2] {
    display: flex;
}
.lg\:box-hide[data-v-0b051cd2] {
    display: none;
}
.lg\:box-show[data-v-0b051cd2] {
    display: inherit;
}
.lg\:text-300[data-v-0b051cd2] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-0b051cd2] {
    font-size: 1rem;
}
.lg\:text-500[data-v-0b051cd2] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-0b051cd2] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-0b051cd2] {
    font-size: 2rem;
}
.lg\:text-900[data-v-0b051cd2] {
    font-size: 3rem;
}
.lg\:width-full[data-v-0b051cd2] {
    width: 100%;
}
.lg\:width-half[data-v-0b051cd2] {
    width: 50%;
}
.lg\:width-quarter[data-v-0b051cd2] {
    width: 25%;
}
.lg\:width-third[data-v-0b051cd2] {
    width: 33.33333%;
}
}
[data-v-0b051cd2]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-0b051cd2] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-0b051cd2] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-0b051cd2] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-0b051cd2] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-0b051cd2] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-0b051cd2] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-0b051cd2] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-0b051cd2] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-0b051cd2] {
  margin-bottom: 7.8px;
}
h1[data-v-0b051cd2], h2[data-v-0b051cd2], h3[data-v-0b051cd2], h4[data-v-0b051cd2] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-0b051cd2] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-0b051cd2] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-0b051cd2] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-0b051cd2] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b051cd2] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b051cd2] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b051cd2] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-0b051cd2] {
  position: relative;
}
.outer-image-wrapper > img[data-v-0b051cd2] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-0b051cd2] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-0b051cd2] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-0b051cd2] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-0b051cd2] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b051cd2] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b051cd2] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b051cd2] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-0b051cd2] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b051cd2] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b051cd2] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-0b051cd2] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b051cd2] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b051cd2] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-0b051cd2] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-0b051cd2] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b051cd2] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b051cd2] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-0b051cd2] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-0b051cd2] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-0b051cd2] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-0b051cd2] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-0b051cd2] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-0b051cd2] {
  display: grid;
}
.sticky-container[data-v-0b051cd2] {
  position: relative;
  z-index: 2;
}
svg[data-v-0b051cd2] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-0b051cd2] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-0b051cd2] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-0b051cd2] {
  background-color: #aba480;
}
.bodyTextExcept[data-v-0b051cd2] {
  border-bottom: 5px solid #1a1a1a;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-0b133453] {
  background: #1a1a1a;
}
.bg-light[data-v-0b133453] {
  background: #f2f2f2;
}
.bg-army-light[data-v-0b133453] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-0b133453] {
  background: #aba480;
}
.bg-army-subtext[data-v-0b133453] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-0b133453] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-0b133453] {
  background: #7d8077;
}
.bg-army-blue[data-v-0b133453] {
  background: #01499d;
}
.color-dark[data-v-0b133453] {
  color: #1a1a1a;
}
.color-light[data-v-0b133453] {
  color: #f2f2f2;
}
.color-army-light[data-v-0b133453] {
  color: #e4d9c7;
}
.color-army-dark[data-v-0b133453] {
  color: #aba480;
}
.color-army-subtext[data-v-0b133453] {
  color: #7d8e5c;
}
.color-winter-light[data-v-0b133453] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-0b133453] {
  color: #7d8077;
}
.color-army-blue[data-v-0b133453] {
  color: #01499d;
}
.box-block[data-v-0b133453] {
  display: block;
}
.box-flex[data-v-0b133453] {
  display: flex;
}
.box-hide[data-v-0b133453] {
  display: none;
}
.box-show[data-v-0b133453] {
  display: inherit;
}
.font-base[data-v-0b133453] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-0b133453] {
  font-family: Germania One, serif;
}
.font-mono[data-v-0b133453] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-0b133453] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-0b133453] {
  margin-top: 1rem;
}
.gap-top-500[data-v-0b133453] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-0b133453] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-0b133453] {
  margin-top: 2rem;
}
.gap-top-900[data-v-0b133453] {
  margin-top: 3rem;
}
.gap-right-300[data-v-0b133453] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-0b133453] {
  margin-right: 1rem;
}
.gap-right-500[data-v-0b133453] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-0b133453] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-0b133453] {
  margin-right: 2rem;
}
.gap-right-900[data-v-0b133453] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-0b133453] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-0b133453] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-0b133453] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-0b133453] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-0b133453] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-0b133453] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-0b133453] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-0b133453] {
  margin-left: 1rem;
}
.gap-left-500[data-v-0b133453] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-0b133453] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-0b133453] {
  margin-left: 2rem;
}
.gap-left-900[data-v-0b133453] {
  margin-left: 3rem;
}
.pad-top-300[data-v-0b133453] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-0b133453] {
  padding-top: 1rem;
}
.pad-top-500[data-v-0b133453] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-0b133453] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-0b133453] {
  padding-top: 2rem;
}
.pad-top-900[data-v-0b133453] {
  padding-top: 3rem;
}
.pad-right-300[data-v-0b133453] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-0b133453] {
  padding-right: 1rem;
}
.pad-right-500[data-v-0b133453] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-0b133453] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-0b133453] {
  padding-right: 2rem;
}
.pad-right-900[data-v-0b133453] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-0b133453] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-0b133453] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-0b133453] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-0b133453] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-0b133453] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-0b133453] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-0b133453] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-0b133453] {
  padding-left: 1rem;
}
.pad-left-500[data-v-0b133453] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-0b133453] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-0b133453] {
  padding-left: 2rem;
}
.pad-left-900[data-v-0b133453] {
  padding-left: 3rem;
}
.stack-300[data-v-0b133453] {
  z-index: 0;
}
.stack-400[data-v-0b133453] {
  z-index: 10;
}
.stack-500[data-v-0b133453] {
  z-index: 20;
}
.stack-600[data-v-0b133453] {
  z-index: 30;
}
.stack-700[data-v-0b133453] {
  z-index: 40;
}
.text-300[data-v-0b133453] {
  font-size: 0.8rem;
}
.text-400[data-v-0b133453] {
  font-size: 1rem;
}
.text-500[data-v-0b133453] {
  font-size: 1.25rem;
}
.text-600[data-v-0b133453] {
  font-size: 1.6rem;
}
.text-700[data-v-0b133453] {
  font-size: 2rem;
}
.text-900[data-v-0b133453] {
  font-size: 3rem;
}
.weight-light[data-v-0b133453] {
  font-weight: 300;
}
.weight-regular[data-v-0b133453] {
  font-weight: 400;
}
.weight-bold[data-v-0b133453] {
  font-weight: 700;
}
.width-full[data-v-0b133453] {
  width: 100%;
}
.width-half[data-v-0b133453] {
  width: 50%;
}
.width-quarter[data-v-0b133453] {
  width: 25%;
}
.width-third[data-v-0b133453] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-0b133453] {
    display: block;
}
.smd\:box-flex[data-v-0b133453] {
    display: flex;
}
.smd\:box-hide[data-v-0b133453] {
    display: none;
}
.smd\:box-show[data-v-0b133453] {
    display: inherit;
}
.smd\:text-300[data-v-0b133453] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-0b133453] {
    font-size: 1rem;
}
.smd\:text-500[data-v-0b133453] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-0b133453] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-0b133453] {
    font-size: 2rem;
}
.smd\:text-900[data-v-0b133453] {
    font-size: 3rem;
}
.smd\:width-full[data-v-0b133453] {
    width: 100%;
}
.smd\:width-half[data-v-0b133453] {
    width: 50%;
}
.smd\:width-quarter[data-v-0b133453] {
    width: 25%;
}
.smd\:width-third[data-v-0b133453] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-0b133453] {
    display: block;
}
.sm\:box-flex[data-v-0b133453] {
    display: flex;
}
.sm\:box-hide[data-v-0b133453] {
    display: none;
}
.sm\:box-show[data-v-0b133453] {
    display: inherit;
}
.sm\:text-300[data-v-0b133453] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-0b133453] {
    font-size: 1rem;
}
.sm\:text-500[data-v-0b133453] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-0b133453] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-0b133453] {
    font-size: 2rem;
}
.sm\:text-900[data-v-0b133453] {
    font-size: 3rem;
}
.sm\:width-full[data-v-0b133453] {
    width: 100%;
}
.sm\:width-half[data-v-0b133453] {
    width: 50%;
}
.sm\:width-quarter[data-v-0b133453] {
    width: 25%;
}
.sm\:width-third[data-v-0b133453] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-0b133453] {
    display: block;
}
.md\:box-flex[data-v-0b133453] {
    display: flex;
}
.md\:box-hide[data-v-0b133453] {
    display: none;
}
.md\:box-show[data-v-0b133453] {
    display: inherit;
}
.md\:text-300[data-v-0b133453] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-0b133453] {
    font-size: 1rem;
}
.md\:text-500[data-v-0b133453] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-0b133453] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-0b133453] {
    font-size: 2rem;
}
.md\:text-900[data-v-0b133453] {
    font-size: 3rem;
}
.md\:width-full[data-v-0b133453] {
    width: 100%;
}
.md\:width-half[data-v-0b133453] {
    width: 50%;
}
.md\:width-quarter[data-v-0b133453] {
    width: 25%;
}
.md\:width-third[data-v-0b133453] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-0b133453] {
    display: block;
}
.lg\:box-flex[data-v-0b133453] {
    display: flex;
}
.lg\:box-hide[data-v-0b133453] {
    display: none;
}
.lg\:box-show[data-v-0b133453] {
    display: inherit;
}
.lg\:text-300[data-v-0b133453] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-0b133453] {
    font-size: 1rem;
}
.lg\:text-500[data-v-0b133453] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-0b133453] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-0b133453] {
    font-size: 2rem;
}
.lg\:text-900[data-v-0b133453] {
    font-size: 3rem;
}
.lg\:width-full[data-v-0b133453] {
    width: 100%;
}
.lg\:width-half[data-v-0b133453] {
    width: 50%;
}
.lg\:width-quarter[data-v-0b133453] {
    width: 25%;
}
.lg\:width-third[data-v-0b133453] {
    width: 33.33333%;
}
}
[data-v-0b133453]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-0b133453] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-0b133453] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-0b133453] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-0b133453] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-0b133453] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-0b133453] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-0b133453] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-0b133453] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-0b133453] {
  margin-bottom: 7.8px;
}
h1[data-v-0b133453], h2[data-v-0b133453], h3[data-v-0b133453], h4[data-v-0b133453] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-0b133453] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-0b133453] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-0b133453] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-0b133453] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b133453] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b133453] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b133453] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-0b133453] {
  position: relative;
}
.outer-image-wrapper > img[data-v-0b133453] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-0b133453] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-0b133453] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-0b133453] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-0b133453] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b133453] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b133453] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b133453] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-0b133453] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b133453] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b133453] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-0b133453] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b133453] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b133453] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-0b133453] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-0b133453] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b133453] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b133453] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-0b133453] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-0b133453] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-0b133453] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-0b133453] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-0b133453] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-0b133453] {
  display: grid;
}
.sticky-container[data-v-0b133453] {
  position: relative;
  z-index: 2;
}
svg[data-v-0b133453] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-0b133453] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-0b133453] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-0b133453] {
  background-color: #a6aa9d;
}
.bodyTextExcept[data-v-0b133453] {
  border-bottom: 5px solid #a6aa9d;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-0b214bd4] {
  background: #1a1a1a;
}
.bg-light[data-v-0b214bd4] {
  background: #f2f2f2;
}
.bg-army-light[data-v-0b214bd4] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-0b214bd4] {
  background: #aba480;
}
.bg-army-subtext[data-v-0b214bd4] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-0b214bd4] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-0b214bd4] {
  background: #7d8077;
}
.bg-army-blue[data-v-0b214bd4] {
  background: #01499d;
}
.color-dark[data-v-0b214bd4] {
  color: #1a1a1a;
}
.color-light[data-v-0b214bd4] {
  color: #f2f2f2;
}
.color-army-light[data-v-0b214bd4] {
  color: #e4d9c7;
}
.color-army-dark[data-v-0b214bd4] {
  color: #aba480;
}
.color-army-subtext[data-v-0b214bd4] {
  color: #7d8e5c;
}
.color-winter-light[data-v-0b214bd4] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-0b214bd4] {
  color: #7d8077;
}
.color-army-blue[data-v-0b214bd4] {
  color: #01499d;
}
.box-block[data-v-0b214bd4] {
  display: block;
}
.box-flex[data-v-0b214bd4] {
  display: flex;
}
.box-hide[data-v-0b214bd4] {
  display: none;
}
.box-show[data-v-0b214bd4] {
  display: inherit;
}
.font-base[data-v-0b214bd4] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-0b214bd4] {
  font-family: Germania One, serif;
}
.font-mono[data-v-0b214bd4] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-0b214bd4] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-0b214bd4] {
  margin-top: 1rem;
}
.gap-top-500[data-v-0b214bd4] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-0b214bd4] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-0b214bd4] {
  margin-top: 2rem;
}
.gap-top-900[data-v-0b214bd4] {
  margin-top: 3rem;
}
.gap-right-300[data-v-0b214bd4] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-0b214bd4] {
  margin-right: 1rem;
}
.gap-right-500[data-v-0b214bd4] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-0b214bd4] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-0b214bd4] {
  margin-right: 2rem;
}
.gap-right-900[data-v-0b214bd4] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-0b214bd4] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-0b214bd4] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-0b214bd4] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-0b214bd4] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-0b214bd4] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-0b214bd4] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-0b214bd4] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-0b214bd4] {
  margin-left: 1rem;
}
.gap-left-500[data-v-0b214bd4] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-0b214bd4] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-0b214bd4] {
  margin-left: 2rem;
}
.gap-left-900[data-v-0b214bd4] {
  margin-left: 3rem;
}
.pad-top-300[data-v-0b214bd4] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-0b214bd4] {
  padding-top: 1rem;
}
.pad-top-500[data-v-0b214bd4] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-0b214bd4] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-0b214bd4] {
  padding-top: 2rem;
}
.pad-top-900[data-v-0b214bd4] {
  padding-top: 3rem;
}
.pad-right-300[data-v-0b214bd4] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-0b214bd4] {
  padding-right: 1rem;
}
.pad-right-500[data-v-0b214bd4] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-0b214bd4] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-0b214bd4] {
  padding-right: 2rem;
}
.pad-right-900[data-v-0b214bd4] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-0b214bd4] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-0b214bd4] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-0b214bd4] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-0b214bd4] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-0b214bd4] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-0b214bd4] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-0b214bd4] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-0b214bd4] {
  padding-left: 1rem;
}
.pad-left-500[data-v-0b214bd4] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-0b214bd4] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-0b214bd4] {
  padding-left: 2rem;
}
.pad-left-900[data-v-0b214bd4] {
  padding-left: 3rem;
}
.stack-300[data-v-0b214bd4] {
  z-index: 0;
}
.stack-400[data-v-0b214bd4] {
  z-index: 10;
}
.stack-500[data-v-0b214bd4] {
  z-index: 20;
}
.stack-600[data-v-0b214bd4] {
  z-index: 30;
}
.stack-700[data-v-0b214bd4] {
  z-index: 40;
}
.text-300[data-v-0b214bd4] {
  font-size: 0.8rem;
}
.text-400[data-v-0b214bd4] {
  font-size: 1rem;
}
.text-500[data-v-0b214bd4] {
  font-size: 1.25rem;
}
.text-600[data-v-0b214bd4] {
  font-size: 1.6rem;
}
.text-700[data-v-0b214bd4] {
  font-size: 2rem;
}
.text-900[data-v-0b214bd4] {
  font-size: 3rem;
}
.weight-light[data-v-0b214bd4] {
  font-weight: 300;
}
.weight-regular[data-v-0b214bd4] {
  font-weight: 400;
}
.weight-bold[data-v-0b214bd4] {
  font-weight: 700;
}
.width-full[data-v-0b214bd4] {
  width: 100%;
}
.width-half[data-v-0b214bd4] {
  width: 50%;
}
.width-quarter[data-v-0b214bd4] {
  width: 25%;
}
.width-third[data-v-0b214bd4] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-0b214bd4] {
    display: block;
}
.smd\:box-flex[data-v-0b214bd4] {
    display: flex;
}
.smd\:box-hide[data-v-0b214bd4] {
    display: none;
}
.smd\:box-show[data-v-0b214bd4] {
    display: inherit;
}
.smd\:text-300[data-v-0b214bd4] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-0b214bd4] {
    font-size: 1rem;
}
.smd\:text-500[data-v-0b214bd4] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-0b214bd4] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-0b214bd4] {
    font-size: 2rem;
}
.smd\:text-900[data-v-0b214bd4] {
    font-size: 3rem;
}
.smd\:width-full[data-v-0b214bd4] {
    width: 100%;
}
.smd\:width-half[data-v-0b214bd4] {
    width: 50%;
}
.smd\:width-quarter[data-v-0b214bd4] {
    width: 25%;
}
.smd\:width-third[data-v-0b214bd4] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-0b214bd4] {
    display: block;
}
.sm\:box-flex[data-v-0b214bd4] {
    display: flex;
}
.sm\:box-hide[data-v-0b214bd4] {
    display: none;
}
.sm\:box-show[data-v-0b214bd4] {
    display: inherit;
}
.sm\:text-300[data-v-0b214bd4] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-0b214bd4] {
    font-size: 1rem;
}
.sm\:text-500[data-v-0b214bd4] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-0b214bd4] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-0b214bd4] {
    font-size: 2rem;
}
.sm\:text-900[data-v-0b214bd4] {
    font-size: 3rem;
}
.sm\:width-full[data-v-0b214bd4] {
    width: 100%;
}
.sm\:width-half[data-v-0b214bd4] {
    width: 50%;
}
.sm\:width-quarter[data-v-0b214bd4] {
    width: 25%;
}
.sm\:width-third[data-v-0b214bd4] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-0b214bd4] {
    display: block;
}
.md\:box-flex[data-v-0b214bd4] {
    display: flex;
}
.md\:box-hide[data-v-0b214bd4] {
    display: none;
}
.md\:box-show[data-v-0b214bd4] {
    display: inherit;
}
.md\:text-300[data-v-0b214bd4] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-0b214bd4] {
    font-size: 1rem;
}
.md\:text-500[data-v-0b214bd4] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-0b214bd4] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-0b214bd4] {
    font-size: 2rem;
}
.md\:text-900[data-v-0b214bd4] {
    font-size: 3rem;
}
.md\:width-full[data-v-0b214bd4] {
    width: 100%;
}
.md\:width-half[data-v-0b214bd4] {
    width: 50%;
}
.md\:width-quarter[data-v-0b214bd4] {
    width: 25%;
}
.md\:width-third[data-v-0b214bd4] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-0b214bd4] {
    display: block;
}
.lg\:box-flex[data-v-0b214bd4] {
    display: flex;
}
.lg\:box-hide[data-v-0b214bd4] {
    display: none;
}
.lg\:box-show[data-v-0b214bd4] {
    display: inherit;
}
.lg\:text-300[data-v-0b214bd4] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-0b214bd4] {
    font-size: 1rem;
}
.lg\:text-500[data-v-0b214bd4] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-0b214bd4] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-0b214bd4] {
    font-size: 2rem;
}
.lg\:text-900[data-v-0b214bd4] {
    font-size: 3rem;
}
.lg\:width-full[data-v-0b214bd4] {
    width: 100%;
}
.lg\:width-half[data-v-0b214bd4] {
    width: 50%;
}
.lg\:width-quarter[data-v-0b214bd4] {
    width: 25%;
}
.lg\:width-third[data-v-0b214bd4] {
    width: 33.33333%;
}
}
[data-v-0b214bd4]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-0b214bd4] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-0b214bd4] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-0b214bd4] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-0b214bd4] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-0b214bd4] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-0b214bd4] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-0b214bd4] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-0b214bd4] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-0b214bd4] {
  margin-bottom: 7.8px;
}
h1[data-v-0b214bd4], h2[data-v-0b214bd4], h3[data-v-0b214bd4], h4[data-v-0b214bd4] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-0b214bd4] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-0b214bd4] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-0b214bd4] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-0b214bd4] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b214bd4] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b214bd4] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b214bd4] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-0b214bd4] {
  position: relative;
}
.outer-image-wrapper > img[data-v-0b214bd4] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-0b214bd4] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-0b214bd4] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-0b214bd4] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-0b214bd4] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b214bd4] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b214bd4] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b214bd4] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-0b214bd4] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b214bd4] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b214bd4] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-0b214bd4] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b214bd4] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b214bd4] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-0b214bd4] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-0b214bd4] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b214bd4] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b214bd4] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-0b214bd4] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-0b214bd4] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-0b214bd4] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-0b214bd4] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-0b214bd4] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-0b214bd4] {
  display: grid;
}
.sticky-container[data-v-0b214bd4] {
  position: relative;
  z-index: 2;
}
svg[data-v-0b214bd4] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-0b214bd4] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-0b214bd4] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-0b214bd4] {
  background-color: #a6aa9d;
}
.bodyTextExcept[data-v-0b214bd4] {
  border-bottom: 5px solid #1a1a1a;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-0b2f6355] {
  background: #1a1a1a;
}
.bg-light[data-v-0b2f6355] {
  background: #f2f2f2;
}
.bg-army-light[data-v-0b2f6355] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-0b2f6355] {
  background: #aba480;
}
.bg-army-subtext[data-v-0b2f6355] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-0b2f6355] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-0b2f6355] {
  background: #7d8077;
}
.bg-army-blue[data-v-0b2f6355] {
  background: #01499d;
}
.color-dark[data-v-0b2f6355] {
  color: #1a1a1a;
}
.color-light[data-v-0b2f6355] {
  color: #f2f2f2;
}
.color-army-light[data-v-0b2f6355] {
  color: #e4d9c7;
}
.color-army-dark[data-v-0b2f6355] {
  color: #aba480;
}
.color-army-subtext[data-v-0b2f6355] {
  color: #7d8e5c;
}
.color-winter-light[data-v-0b2f6355] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-0b2f6355] {
  color: #7d8077;
}
.color-army-blue[data-v-0b2f6355] {
  color: #01499d;
}
.box-block[data-v-0b2f6355] {
  display: block;
}
.box-flex[data-v-0b2f6355] {
  display: flex;
}
.box-hide[data-v-0b2f6355] {
  display: none;
}
.box-show[data-v-0b2f6355] {
  display: inherit;
}
.font-base[data-v-0b2f6355] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-0b2f6355] {
  font-family: Germania One, serif;
}
.font-mono[data-v-0b2f6355] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-0b2f6355] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-0b2f6355] {
  margin-top: 1rem;
}
.gap-top-500[data-v-0b2f6355] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-0b2f6355] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-0b2f6355] {
  margin-top: 2rem;
}
.gap-top-900[data-v-0b2f6355] {
  margin-top: 3rem;
}
.gap-right-300[data-v-0b2f6355] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-0b2f6355] {
  margin-right: 1rem;
}
.gap-right-500[data-v-0b2f6355] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-0b2f6355] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-0b2f6355] {
  margin-right: 2rem;
}
.gap-right-900[data-v-0b2f6355] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-0b2f6355] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-0b2f6355] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-0b2f6355] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-0b2f6355] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-0b2f6355] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-0b2f6355] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-0b2f6355] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-0b2f6355] {
  margin-left: 1rem;
}
.gap-left-500[data-v-0b2f6355] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-0b2f6355] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-0b2f6355] {
  margin-left: 2rem;
}
.gap-left-900[data-v-0b2f6355] {
  margin-left: 3rem;
}
.pad-top-300[data-v-0b2f6355] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-0b2f6355] {
  padding-top: 1rem;
}
.pad-top-500[data-v-0b2f6355] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-0b2f6355] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-0b2f6355] {
  padding-top: 2rem;
}
.pad-top-900[data-v-0b2f6355] {
  padding-top: 3rem;
}
.pad-right-300[data-v-0b2f6355] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-0b2f6355] {
  padding-right: 1rem;
}
.pad-right-500[data-v-0b2f6355] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-0b2f6355] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-0b2f6355] {
  padding-right: 2rem;
}
.pad-right-900[data-v-0b2f6355] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-0b2f6355] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-0b2f6355] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-0b2f6355] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-0b2f6355] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-0b2f6355] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-0b2f6355] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-0b2f6355] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-0b2f6355] {
  padding-left: 1rem;
}
.pad-left-500[data-v-0b2f6355] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-0b2f6355] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-0b2f6355] {
  padding-left: 2rem;
}
.pad-left-900[data-v-0b2f6355] {
  padding-left: 3rem;
}
.stack-300[data-v-0b2f6355] {
  z-index: 0;
}
.stack-400[data-v-0b2f6355] {
  z-index: 10;
}
.stack-500[data-v-0b2f6355] {
  z-index: 20;
}
.stack-600[data-v-0b2f6355] {
  z-index: 30;
}
.stack-700[data-v-0b2f6355] {
  z-index: 40;
}
.text-300[data-v-0b2f6355] {
  font-size: 0.8rem;
}
.text-400[data-v-0b2f6355] {
  font-size: 1rem;
}
.text-500[data-v-0b2f6355] {
  font-size: 1.25rem;
}
.text-600[data-v-0b2f6355] {
  font-size: 1.6rem;
}
.text-700[data-v-0b2f6355] {
  font-size: 2rem;
}
.text-900[data-v-0b2f6355] {
  font-size: 3rem;
}
.weight-light[data-v-0b2f6355] {
  font-weight: 300;
}
.weight-regular[data-v-0b2f6355] {
  font-weight: 400;
}
.weight-bold[data-v-0b2f6355] {
  font-weight: 700;
}
.width-full[data-v-0b2f6355] {
  width: 100%;
}
.width-half[data-v-0b2f6355] {
  width: 50%;
}
.width-quarter[data-v-0b2f6355] {
  width: 25%;
}
.width-third[data-v-0b2f6355] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-0b2f6355] {
    display: block;
}
.smd\:box-flex[data-v-0b2f6355] {
    display: flex;
}
.smd\:box-hide[data-v-0b2f6355] {
    display: none;
}
.smd\:box-show[data-v-0b2f6355] {
    display: inherit;
}
.smd\:text-300[data-v-0b2f6355] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-0b2f6355] {
    font-size: 1rem;
}
.smd\:text-500[data-v-0b2f6355] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-0b2f6355] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-0b2f6355] {
    font-size: 2rem;
}
.smd\:text-900[data-v-0b2f6355] {
    font-size: 3rem;
}
.smd\:width-full[data-v-0b2f6355] {
    width: 100%;
}
.smd\:width-half[data-v-0b2f6355] {
    width: 50%;
}
.smd\:width-quarter[data-v-0b2f6355] {
    width: 25%;
}
.smd\:width-third[data-v-0b2f6355] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-0b2f6355] {
    display: block;
}
.sm\:box-flex[data-v-0b2f6355] {
    display: flex;
}
.sm\:box-hide[data-v-0b2f6355] {
    display: none;
}
.sm\:box-show[data-v-0b2f6355] {
    display: inherit;
}
.sm\:text-300[data-v-0b2f6355] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-0b2f6355] {
    font-size: 1rem;
}
.sm\:text-500[data-v-0b2f6355] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-0b2f6355] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-0b2f6355] {
    font-size: 2rem;
}
.sm\:text-900[data-v-0b2f6355] {
    font-size: 3rem;
}
.sm\:width-full[data-v-0b2f6355] {
    width: 100%;
}
.sm\:width-half[data-v-0b2f6355] {
    width: 50%;
}
.sm\:width-quarter[data-v-0b2f6355] {
    width: 25%;
}
.sm\:width-third[data-v-0b2f6355] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-0b2f6355] {
    display: block;
}
.md\:box-flex[data-v-0b2f6355] {
    display: flex;
}
.md\:box-hide[data-v-0b2f6355] {
    display: none;
}
.md\:box-show[data-v-0b2f6355] {
    display: inherit;
}
.md\:text-300[data-v-0b2f6355] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-0b2f6355] {
    font-size: 1rem;
}
.md\:text-500[data-v-0b2f6355] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-0b2f6355] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-0b2f6355] {
    font-size: 2rem;
}
.md\:text-900[data-v-0b2f6355] {
    font-size: 3rem;
}
.md\:width-full[data-v-0b2f6355] {
    width: 100%;
}
.md\:width-half[data-v-0b2f6355] {
    width: 50%;
}
.md\:width-quarter[data-v-0b2f6355] {
    width: 25%;
}
.md\:width-third[data-v-0b2f6355] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-0b2f6355] {
    display: block;
}
.lg\:box-flex[data-v-0b2f6355] {
    display: flex;
}
.lg\:box-hide[data-v-0b2f6355] {
    display: none;
}
.lg\:box-show[data-v-0b2f6355] {
    display: inherit;
}
.lg\:text-300[data-v-0b2f6355] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-0b2f6355] {
    font-size: 1rem;
}
.lg\:text-500[data-v-0b2f6355] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-0b2f6355] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-0b2f6355] {
    font-size: 2rem;
}
.lg\:text-900[data-v-0b2f6355] {
    font-size: 3rem;
}
.lg\:width-full[data-v-0b2f6355] {
    width: 100%;
}
.lg\:width-half[data-v-0b2f6355] {
    width: 50%;
}
.lg\:width-quarter[data-v-0b2f6355] {
    width: 25%;
}
.lg\:width-third[data-v-0b2f6355] {
    width: 33.33333%;
}
}
[data-v-0b2f6355]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-0b2f6355] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-0b2f6355] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-0b2f6355] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-0b2f6355] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-0b2f6355] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-0b2f6355] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-0b2f6355] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-0b2f6355] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-0b2f6355] {
  margin-bottom: 7.8px;
}
h1[data-v-0b2f6355], h2[data-v-0b2f6355], h3[data-v-0b2f6355], h4[data-v-0b2f6355] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-0b2f6355] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-0b2f6355] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-0b2f6355] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-0b2f6355] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b2f6355] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b2f6355] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b2f6355] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-0b2f6355] {
  position: relative;
}
.outer-image-wrapper > img[data-v-0b2f6355] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-0b2f6355] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-0b2f6355] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-0b2f6355] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-0b2f6355] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b2f6355] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b2f6355] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b2f6355] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-0b2f6355] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b2f6355] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b2f6355] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-0b2f6355] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b2f6355] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b2f6355] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-0b2f6355] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-0b2f6355] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b2f6355] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b2f6355] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-0b2f6355] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-0b2f6355] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-0b2f6355] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-0b2f6355] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-0b2f6355] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-0b2f6355] {
  display: grid;
}
.sticky-container[data-v-0b2f6355] {
  position: relative;
  z-index: 2;
}
svg[data-v-0b2f6355] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-0b2f6355] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-0b2f6355] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-0b2f6355] {
  background-color: #fff;
}
.bodyTextExcept[data-v-0b2f6355] {
  border-bottom: 5px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-0b3d7ad6] {
  background: #1a1a1a;
}
.bg-light[data-v-0b3d7ad6] {
  background: #f2f2f2;
}
.bg-army-light[data-v-0b3d7ad6] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-0b3d7ad6] {
  background: #aba480;
}
.bg-army-subtext[data-v-0b3d7ad6] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-0b3d7ad6] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-0b3d7ad6] {
  background: #7d8077;
}
.bg-army-blue[data-v-0b3d7ad6] {
  background: #01499d;
}
.color-dark[data-v-0b3d7ad6] {
  color: #1a1a1a;
}
.color-light[data-v-0b3d7ad6] {
  color: #f2f2f2;
}
.color-army-light[data-v-0b3d7ad6] {
  color: #e4d9c7;
}
.color-army-dark[data-v-0b3d7ad6] {
  color: #aba480;
}
.color-army-subtext[data-v-0b3d7ad6] {
  color: #7d8e5c;
}
.color-winter-light[data-v-0b3d7ad6] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-0b3d7ad6] {
  color: #7d8077;
}
.color-army-blue[data-v-0b3d7ad6] {
  color: #01499d;
}
.box-block[data-v-0b3d7ad6] {
  display: block;
}
.box-flex[data-v-0b3d7ad6] {
  display: flex;
}
.box-hide[data-v-0b3d7ad6] {
  display: none;
}
.box-show[data-v-0b3d7ad6] {
  display: inherit;
}
.font-base[data-v-0b3d7ad6] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-0b3d7ad6] {
  font-family: Germania One, serif;
}
.font-mono[data-v-0b3d7ad6] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-0b3d7ad6] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-0b3d7ad6] {
  margin-top: 1rem;
}
.gap-top-500[data-v-0b3d7ad6] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-0b3d7ad6] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-0b3d7ad6] {
  margin-top: 2rem;
}
.gap-top-900[data-v-0b3d7ad6] {
  margin-top: 3rem;
}
.gap-right-300[data-v-0b3d7ad6] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-0b3d7ad6] {
  margin-right: 1rem;
}
.gap-right-500[data-v-0b3d7ad6] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-0b3d7ad6] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-0b3d7ad6] {
  margin-right: 2rem;
}
.gap-right-900[data-v-0b3d7ad6] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-0b3d7ad6] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-0b3d7ad6] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-0b3d7ad6] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-0b3d7ad6] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-0b3d7ad6] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-0b3d7ad6] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-0b3d7ad6] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-0b3d7ad6] {
  margin-left: 1rem;
}
.gap-left-500[data-v-0b3d7ad6] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-0b3d7ad6] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-0b3d7ad6] {
  margin-left: 2rem;
}
.gap-left-900[data-v-0b3d7ad6] {
  margin-left: 3rem;
}
.pad-top-300[data-v-0b3d7ad6] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-0b3d7ad6] {
  padding-top: 1rem;
}
.pad-top-500[data-v-0b3d7ad6] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-0b3d7ad6] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-0b3d7ad6] {
  padding-top: 2rem;
}
.pad-top-900[data-v-0b3d7ad6] {
  padding-top: 3rem;
}
.pad-right-300[data-v-0b3d7ad6] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-0b3d7ad6] {
  padding-right: 1rem;
}
.pad-right-500[data-v-0b3d7ad6] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-0b3d7ad6] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-0b3d7ad6] {
  padding-right: 2rem;
}
.pad-right-900[data-v-0b3d7ad6] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-0b3d7ad6] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-0b3d7ad6] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-0b3d7ad6] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-0b3d7ad6] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-0b3d7ad6] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-0b3d7ad6] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-0b3d7ad6] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-0b3d7ad6] {
  padding-left: 1rem;
}
.pad-left-500[data-v-0b3d7ad6] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-0b3d7ad6] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-0b3d7ad6] {
  padding-left: 2rem;
}
.pad-left-900[data-v-0b3d7ad6] {
  padding-left: 3rem;
}
.stack-300[data-v-0b3d7ad6] {
  z-index: 0;
}
.stack-400[data-v-0b3d7ad6] {
  z-index: 10;
}
.stack-500[data-v-0b3d7ad6] {
  z-index: 20;
}
.stack-600[data-v-0b3d7ad6] {
  z-index: 30;
}
.stack-700[data-v-0b3d7ad6] {
  z-index: 40;
}
.text-300[data-v-0b3d7ad6] {
  font-size: 0.8rem;
}
.text-400[data-v-0b3d7ad6] {
  font-size: 1rem;
}
.text-500[data-v-0b3d7ad6] {
  font-size: 1.25rem;
}
.text-600[data-v-0b3d7ad6] {
  font-size: 1.6rem;
}
.text-700[data-v-0b3d7ad6] {
  font-size: 2rem;
}
.text-900[data-v-0b3d7ad6] {
  font-size: 3rem;
}
.weight-light[data-v-0b3d7ad6] {
  font-weight: 300;
}
.weight-regular[data-v-0b3d7ad6] {
  font-weight: 400;
}
.weight-bold[data-v-0b3d7ad6] {
  font-weight: 700;
}
.width-full[data-v-0b3d7ad6] {
  width: 100%;
}
.width-half[data-v-0b3d7ad6] {
  width: 50%;
}
.width-quarter[data-v-0b3d7ad6] {
  width: 25%;
}
.width-third[data-v-0b3d7ad6] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-0b3d7ad6] {
    display: block;
}
.smd\:box-flex[data-v-0b3d7ad6] {
    display: flex;
}
.smd\:box-hide[data-v-0b3d7ad6] {
    display: none;
}
.smd\:box-show[data-v-0b3d7ad6] {
    display: inherit;
}
.smd\:text-300[data-v-0b3d7ad6] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-0b3d7ad6] {
    font-size: 1rem;
}
.smd\:text-500[data-v-0b3d7ad6] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-0b3d7ad6] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-0b3d7ad6] {
    font-size: 2rem;
}
.smd\:text-900[data-v-0b3d7ad6] {
    font-size: 3rem;
}
.smd\:width-full[data-v-0b3d7ad6] {
    width: 100%;
}
.smd\:width-half[data-v-0b3d7ad6] {
    width: 50%;
}
.smd\:width-quarter[data-v-0b3d7ad6] {
    width: 25%;
}
.smd\:width-third[data-v-0b3d7ad6] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-0b3d7ad6] {
    display: block;
}
.sm\:box-flex[data-v-0b3d7ad6] {
    display: flex;
}
.sm\:box-hide[data-v-0b3d7ad6] {
    display: none;
}
.sm\:box-show[data-v-0b3d7ad6] {
    display: inherit;
}
.sm\:text-300[data-v-0b3d7ad6] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-0b3d7ad6] {
    font-size: 1rem;
}
.sm\:text-500[data-v-0b3d7ad6] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-0b3d7ad6] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-0b3d7ad6] {
    font-size: 2rem;
}
.sm\:text-900[data-v-0b3d7ad6] {
    font-size: 3rem;
}
.sm\:width-full[data-v-0b3d7ad6] {
    width: 100%;
}
.sm\:width-half[data-v-0b3d7ad6] {
    width: 50%;
}
.sm\:width-quarter[data-v-0b3d7ad6] {
    width: 25%;
}
.sm\:width-third[data-v-0b3d7ad6] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-0b3d7ad6] {
    display: block;
}
.md\:box-flex[data-v-0b3d7ad6] {
    display: flex;
}
.md\:box-hide[data-v-0b3d7ad6] {
    display: none;
}
.md\:box-show[data-v-0b3d7ad6] {
    display: inherit;
}
.md\:text-300[data-v-0b3d7ad6] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-0b3d7ad6] {
    font-size: 1rem;
}
.md\:text-500[data-v-0b3d7ad6] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-0b3d7ad6] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-0b3d7ad6] {
    font-size: 2rem;
}
.md\:text-900[data-v-0b3d7ad6] {
    font-size: 3rem;
}
.md\:width-full[data-v-0b3d7ad6] {
    width: 100%;
}
.md\:width-half[data-v-0b3d7ad6] {
    width: 50%;
}
.md\:width-quarter[data-v-0b3d7ad6] {
    width: 25%;
}
.md\:width-third[data-v-0b3d7ad6] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-0b3d7ad6] {
    display: block;
}
.lg\:box-flex[data-v-0b3d7ad6] {
    display: flex;
}
.lg\:box-hide[data-v-0b3d7ad6] {
    display: none;
}
.lg\:box-show[data-v-0b3d7ad6] {
    display: inherit;
}
.lg\:text-300[data-v-0b3d7ad6] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-0b3d7ad6] {
    font-size: 1rem;
}
.lg\:text-500[data-v-0b3d7ad6] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-0b3d7ad6] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-0b3d7ad6] {
    font-size: 2rem;
}
.lg\:text-900[data-v-0b3d7ad6] {
    font-size: 3rem;
}
.lg\:width-full[data-v-0b3d7ad6] {
    width: 100%;
}
.lg\:width-half[data-v-0b3d7ad6] {
    width: 50%;
}
.lg\:width-quarter[data-v-0b3d7ad6] {
    width: 25%;
}
.lg\:width-third[data-v-0b3d7ad6] {
    width: 33.33333%;
}
}
[data-v-0b3d7ad6]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-0b3d7ad6] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-0b3d7ad6] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-0b3d7ad6] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-0b3d7ad6] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-0b3d7ad6] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-0b3d7ad6] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-0b3d7ad6] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-0b3d7ad6] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-0b3d7ad6] {
  margin-bottom: 7.8px;
}
h1[data-v-0b3d7ad6], h2[data-v-0b3d7ad6], h3[data-v-0b3d7ad6], h4[data-v-0b3d7ad6] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-0b3d7ad6] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-0b3d7ad6] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-0b3d7ad6] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-0b3d7ad6] {
  position: relative;
}
.outer-image-wrapper > img[data-v-0b3d7ad6] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-0b3d7ad6] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-0b3d7ad6] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-0b3d7ad6] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b3d7ad6] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-0b3d7ad6] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b3d7ad6] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b3d7ad6] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-0b3d7ad6] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b3d7ad6] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b3d7ad6] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-0b3d7ad6] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-0b3d7ad6] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b3d7ad6] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b3d7ad6] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-0b3d7ad6] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-0b3d7ad6] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-0b3d7ad6] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-0b3d7ad6] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-0b3d7ad6] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-0b3d7ad6] {
  display: grid;
}
.sticky-container[data-v-0b3d7ad6] {
  position: relative;
  z-index: 2;
}
svg[data-v-0b3d7ad6] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-0b3d7ad6] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-0b3d7ad6] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-0b3d7ad6] {
  background-color: #fff;
}
.bodyTextExcept[data-v-0b3d7ad6] {
  border-bottom: 5px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-0b4b9257] {
  background: #1a1a1a;
}
.bg-light[data-v-0b4b9257] {
  background: #f2f2f2;
}
.bg-army-light[data-v-0b4b9257] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-0b4b9257] {
  background: #aba480;
}
.bg-army-subtext[data-v-0b4b9257] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-0b4b9257] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-0b4b9257] {
  background: #7d8077;
}
.bg-army-blue[data-v-0b4b9257] {
  background: #01499d;
}
.color-dark[data-v-0b4b9257] {
  color: #1a1a1a;
}
.color-light[data-v-0b4b9257] {
  color: #f2f2f2;
}
.color-army-light[data-v-0b4b9257] {
  color: #e4d9c7;
}
.color-army-dark[data-v-0b4b9257] {
  color: #aba480;
}
.color-army-subtext[data-v-0b4b9257] {
  color: #7d8e5c;
}
.color-winter-light[data-v-0b4b9257] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-0b4b9257] {
  color: #7d8077;
}
.color-army-blue[data-v-0b4b9257] {
  color: #01499d;
}
.box-block[data-v-0b4b9257] {
  display: block;
}
.box-flex[data-v-0b4b9257] {
  display: flex;
}
.box-hide[data-v-0b4b9257] {
  display: none;
}
.box-show[data-v-0b4b9257] {
  display: inherit;
}
.font-base[data-v-0b4b9257] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-0b4b9257] {
  font-family: Germania One, serif;
}
.font-mono[data-v-0b4b9257] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-0b4b9257] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-0b4b9257] {
  margin-top: 1rem;
}
.gap-top-500[data-v-0b4b9257] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-0b4b9257] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-0b4b9257] {
  margin-top: 2rem;
}
.gap-top-900[data-v-0b4b9257] {
  margin-top: 3rem;
}
.gap-right-300[data-v-0b4b9257] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-0b4b9257] {
  margin-right: 1rem;
}
.gap-right-500[data-v-0b4b9257] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-0b4b9257] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-0b4b9257] {
  margin-right: 2rem;
}
.gap-right-900[data-v-0b4b9257] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-0b4b9257] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-0b4b9257] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-0b4b9257] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-0b4b9257] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-0b4b9257] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-0b4b9257] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-0b4b9257] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-0b4b9257] {
  margin-left: 1rem;
}
.gap-left-500[data-v-0b4b9257] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-0b4b9257] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-0b4b9257] {
  margin-left: 2rem;
}
.gap-left-900[data-v-0b4b9257] {
  margin-left: 3rem;
}
.pad-top-300[data-v-0b4b9257] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-0b4b9257] {
  padding-top: 1rem;
}
.pad-top-500[data-v-0b4b9257] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-0b4b9257] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-0b4b9257] {
  padding-top: 2rem;
}
.pad-top-900[data-v-0b4b9257] {
  padding-top: 3rem;
}
.pad-right-300[data-v-0b4b9257] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-0b4b9257] {
  padding-right: 1rem;
}
.pad-right-500[data-v-0b4b9257] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-0b4b9257] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-0b4b9257] {
  padding-right: 2rem;
}
.pad-right-900[data-v-0b4b9257] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-0b4b9257] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-0b4b9257] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-0b4b9257] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-0b4b9257] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-0b4b9257] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-0b4b9257] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-0b4b9257] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-0b4b9257] {
  padding-left: 1rem;
}
.pad-left-500[data-v-0b4b9257] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-0b4b9257] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-0b4b9257] {
  padding-left: 2rem;
}
.pad-left-900[data-v-0b4b9257] {
  padding-left: 3rem;
}
.stack-300[data-v-0b4b9257] {
  z-index: 0;
}
.stack-400[data-v-0b4b9257] {
  z-index: 10;
}
.stack-500[data-v-0b4b9257] {
  z-index: 20;
}
.stack-600[data-v-0b4b9257] {
  z-index: 30;
}
.stack-700[data-v-0b4b9257] {
  z-index: 40;
}
.text-300[data-v-0b4b9257] {
  font-size: 0.8rem;
}
.text-400[data-v-0b4b9257] {
  font-size: 1rem;
}
.text-500[data-v-0b4b9257] {
  font-size: 1.25rem;
}
.text-600[data-v-0b4b9257] {
  font-size: 1.6rem;
}
.text-700[data-v-0b4b9257] {
  font-size: 2rem;
}
.text-900[data-v-0b4b9257] {
  font-size: 3rem;
}
.weight-light[data-v-0b4b9257] {
  font-weight: 300;
}
.weight-regular[data-v-0b4b9257] {
  font-weight: 400;
}
.weight-bold[data-v-0b4b9257] {
  font-weight: 700;
}
.width-full[data-v-0b4b9257] {
  width: 100%;
}
.width-half[data-v-0b4b9257] {
  width: 50%;
}
.width-quarter[data-v-0b4b9257] {
  width: 25%;
}
.width-third[data-v-0b4b9257] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-0b4b9257] {
    display: block;
}
.smd\:box-flex[data-v-0b4b9257] {
    display: flex;
}
.smd\:box-hide[data-v-0b4b9257] {
    display: none;
}
.smd\:box-show[data-v-0b4b9257] {
    display: inherit;
}
.smd\:text-300[data-v-0b4b9257] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-0b4b9257] {
    font-size: 1rem;
}
.smd\:text-500[data-v-0b4b9257] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-0b4b9257] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-0b4b9257] {
    font-size: 2rem;
}
.smd\:text-900[data-v-0b4b9257] {
    font-size: 3rem;
}
.smd\:width-full[data-v-0b4b9257] {
    width: 100%;
}
.smd\:width-half[data-v-0b4b9257] {
    width: 50%;
}
.smd\:width-quarter[data-v-0b4b9257] {
    width: 25%;
}
.smd\:width-third[data-v-0b4b9257] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-0b4b9257] {
    display: block;
}
.sm\:box-flex[data-v-0b4b9257] {
    display: flex;
}
.sm\:box-hide[data-v-0b4b9257] {
    display: none;
}
.sm\:box-show[data-v-0b4b9257] {
    display: inherit;
}
.sm\:text-300[data-v-0b4b9257] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-0b4b9257] {
    font-size: 1rem;
}
.sm\:text-500[data-v-0b4b9257] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-0b4b9257] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-0b4b9257] {
    font-size: 2rem;
}
.sm\:text-900[data-v-0b4b9257] {
    font-size: 3rem;
}
.sm\:width-full[data-v-0b4b9257] {
    width: 100%;
}
.sm\:width-half[data-v-0b4b9257] {
    width: 50%;
}
.sm\:width-quarter[data-v-0b4b9257] {
    width: 25%;
}
.sm\:width-third[data-v-0b4b9257] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-0b4b9257] {
    display: block;
}
.md\:box-flex[data-v-0b4b9257] {
    display: flex;
}
.md\:box-hide[data-v-0b4b9257] {
    display: none;
}
.md\:box-show[data-v-0b4b9257] {
    display: inherit;
}
.md\:text-300[data-v-0b4b9257] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-0b4b9257] {
    font-size: 1rem;
}
.md\:text-500[data-v-0b4b9257] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-0b4b9257] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-0b4b9257] {
    font-size: 2rem;
}
.md\:text-900[data-v-0b4b9257] {
    font-size: 3rem;
}
.md\:width-full[data-v-0b4b9257] {
    width: 100%;
}
.md\:width-half[data-v-0b4b9257] {
    width: 50%;
}
.md\:width-quarter[data-v-0b4b9257] {
    width: 25%;
}
.md\:width-third[data-v-0b4b9257] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-0b4b9257] {
    display: block;
}
.lg\:box-flex[data-v-0b4b9257] {
    display: flex;
}
.lg\:box-hide[data-v-0b4b9257] {
    display: none;
}
.lg\:box-show[data-v-0b4b9257] {
    display: inherit;
}
.lg\:text-300[data-v-0b4b9257] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-0b4b9257] {
    font-size: 1rem;
}
.lg\:text-500[data-v-0b4b9257] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-0b4b9257] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-0b4b9257] {
    font-size: 2rem;
}
.lg\:text-900[data-v-0b4b9257] {
    font-size: 3rem;
}
.lg\:width-full[data-v-0b4b9257] {
    width: 100%;
}
.lg\:width-half[data-v-0b4b9257] {
    width: 50%;
}
.lg\:width-quarter[data-v-0b4b9257] {
    width: 25%;
}
.lg\:width-third[data-v-0b4b9257] {
    width: 33.33333%;
}
}
[data-v-0b4b9257]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-0b4b9257] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-0b4b9257] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-0b4b9257] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-0b4b9257] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-0b4b9257] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-0b4b9257] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-0b4b9257] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-0b4b9257] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-0b4b9257] {
  margin-bottom: 7.8px;
}
h1[data-v-0b4b9257], h2[data-v-0b4b9257], h3[data-v-0b4b9257], h4[data-v-0b4b9257] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-0b4b9257] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-0b4b9257] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-0b4b9257] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-0b4b9257] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b4b9257] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b4b9257] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b4b9257] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-0b4b9257] {
  position: relative;
}
.outer-image-wrapper > img[data-v-0b4b9257] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-0b4b9257] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-0b4b9257] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-0b4b9257] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-0b4b9257] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-0b4b9257] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-0b4b9257] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-0b4b9257] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-0b4b9257] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b4b9257] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-0b4b9257] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-0b4b9257] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b4b9257] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-0b4b9257] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-0b4b9257] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-0b4b9257] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b4b9257] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-0b4b9257] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-0b4b9257] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-0b4b9257] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-0b4b9257] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-0b4b9257] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-0b4b9257] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-0b4b9257] {
  display: grid;
}
.sticky-container[data-v-0b4b9257] {
  position: relative;
  z-index: 2;
}
svg[data-v-0b4b9257] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-0b4b9257] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-0b4b9257] {
  grid-area: 1 / 1 / 2 / 2;
  z-index: 3;
}
.outer-wrapper[data-v-0b4b9257] {
  background-color: #fff;
}
.bodyTextExcept[data-v-0b4b9257] {
  border-bottom: 5px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-1f104f12] {
  background: #1a1a1a;
}
.bg-light[data-v-1f104f12] {
  background: #f2f2f2;
}
.bg-army-light[data-v-1f104f12] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-1f104f12] {
  background: #aba480;
}
.bg-army-subtext[data-v-1f104f12] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-1f104f12] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-1f104f12] {
  background: #7d8077;
}
.bg-army-blue[data-v-1f104f12] {
  background: #01499d;
}
.color-dark[data-v-1f104f12] {
  color: #1a1a1a;
}
.color-light[data-v-1f104f12] {
  color: #f2f2f2;
}
.color-army-light[data-v-1f104f12] {
  color: #e4d9c7;
}
.color-army-dark[data-v-1f104f12] {
  color: #aba480;
}
.color-army-subtext[data-v-1f104f12] {
  color: #7d8e5c;
}
.color-winter-light[data-v-1f104f12] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-1f104f12] {
  color: #7d8077;
}
.color-army-blue[data-v-1f104f12] {
  color: #01499d;
}
.box-block[data-v-1f104f12] {
  display: block;
}
.box-flex[data-v-1f104f12] {
  display: flex;
}
.box-hide[data-v-1f104f12] {
  display: none;
}
.box-show[data-v-1f104f12] {
  display: inherit;
}
.font-base[data-v-1f104f12] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-1f104f12] {
  font-family: Germania One, serif;
}
.font-mono[data-v-1f104f12] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-1f104f12] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-1f104f12] {
  margin-top: 1rem;
}
.gap-top-500[data-v-1f104f12] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-1f104f12] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-1f104f12] {
  margin-top: 2rem;
}
.gap-top-900[data-v-1f104f12] {
  margin-top: 3rem;
}
.gap-right-300[data-v-1f104f12] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-1f104f12] {
  margin-right: 1rem;
}
.gap-right-500[data-v-1f104f12] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-1f104f12] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-1f104f12] {
  margin-right: 2rem;
}
.gap-right-900[data-v-1f104f12] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-1f104f12] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-1f104f12] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-1f104f12] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-1f104f12] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-1f104f12] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-1f104f12] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-1f104f12] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-1f104f12] {
  margin-left: 1rem;
}
.gap-left-500[data-v-1f104f12] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-1f104f12] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-1f104f12] {
  margin-left: 2rem;
}
.gap-left-900[data-v-1f104f12] {
  margin-left: 3rem;
}
.pad-top-300[data-v-1f104f12] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-1f104f12] {
  padding-top: 1rem;
}
.pad-top-500[data-v-1f104f12] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-1f104f12] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-1f104f12] {
  padding-top: 2rem;
}
.pad-top-900[data-v-1f104f12] {
  padding-top: 3rem;
}
.pad-right-300[data-v-1f104f12] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-1f104f12] {
  padding-right: 1rem;
}
.pad-right-500[data-v-1f104f12] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-1f104f12] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-1f104f12] {
  padding-right: 2rem;
}
.pad-right-900[data-v-1f104f12] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-1f104f12] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-1f104f12] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-1f104f12] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-1f104f12] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-1f104f12] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-1f104f12] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-1f104f12] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-1f104f12] {
  padding-left: 1rem;
}
.pad-left-500[data-v-1f104f12] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-1f104f12] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-1f104f12] {
  padding-left: 2rem;
}
.pad-left-900[data-v-1f104f12] {
  padding-left: 3rem;
}
.stack-300[data-v-1f104f12] {
  z-index: 0;
}
.stack-400[data-v-1f104f12] {
  z-index: 10;
}
.stack-500[data-v-1f104f12] {
  z-index: 20;
}
.stack-600[data-v-1f104f12] {
  z-index: 30;
}
.stack-700[data-v-1f104f12] {
  z-index: 40;
}
.text-300[data-v-1f104f12] {
  font-size: 0.8rem;
}
.text-400[data-v-1f104f12] {
  font-size: 1rem;
}
.text-500[data-v-1f104f12] {
  font-size: 1.25rem;
}
.text-600[data-v-1f104f12] {
  font-size: 1.6rem;
}
.text-700[data-v-1f104f12] {
  font-size: 2rem;
}
.text-900[data-v-1f104f12] {
  font-size: 3rem;
}
.weight-light[data-v-1f104f12] {
  font-weight: 300;
}
.weight-regular[data-v-1f104f12] {
  font-weight: 400;
}
.weight-bold[data-v-1f104f12] {
  font-weight: 700;
}
.width-full[data-v-1f104f12] {
  width: 100%;
}
.width-half[data-v-1f104f12] {
  width: 50%;
}
.width-quarter[data-v-1f104f12] {
  width: 25%;
}
.width-third[data-v-1f104f12] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-1f104f12] {
    display: block;
}
.smd\:box-flex[data-v-1f104f12] {
    display: flex;
}
.smd\:box-hide[data-v-1f104f12] {
    display: none;
}
.smd\:box-show[data-v-1f104f12] {
    display: inherit;
}
.smd\:text-300[data-v-1f104f12] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-1f104f12] {
    font-size: 1rem;
}
.smd\:text-500[data-v-1f104f12] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-1f104f12] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-1f104f12] {
    font-size: 2rem;
}
.smd\:text-900[data-v-1f104f12] {
    font-size: 3rem;
}
.smd\:width-full[data-v-1f104f12] {
    width: 100%;
}
.smd\:width-half[data-v-1f104f12] {
    width: 50%;
}
.smd\:width-quarter[data-v-1f104f12] {
    width: 25%;
}
.smd\:width-third[data-v-1f104f12] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-1f104f12] {
    display: block;
}
.sm\:box-flex[data-v-1f104f12] {
    display: flex;
}
.sm\:box-hide[data-v-1f104f12] {
    display: none;
}
.sm\:box-show[data-v-1f104f12] {
    display: inherit;
}
.sm\:text-300[data-v-1f104f12] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-1f104f12] {
    font-size: 1rem;
}
.sm\:text-500[data-v-1f104f12] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-1f104f12] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-1f104f12] {
    font-size: 2rem;
}
.sm\:text-900[data-v-1f104f12] {
    font-size: 3rem;
}
.sm\:width-full[data-v-1f104f12] {
    width: 100%;
}
.sm\:width-half[data-v-1f104f12] {
    width: 50%;
}
.sm\:width-quarter[data-v-1f104f12] {
    width: 25%;
}
.sm\:width-third[data-v-1f104f12] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-1f104f12] {
    display: block;
}
.md\:box-flex[data-v-1f104f12] {
    display: flex;
}
.md\:box-hide[data-v-1f104f12] {
    display: none;
}
.md\:box-show[data-v-1f104f12] {
    display: inherit;
}
.md\:text-300[data-v-1f104f12] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-1f104f12] {
    font-size: 1rem;
}
.md\:text-500[data-v-1f104f12] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-1f104f12] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-1f104f12] {
    font-size: 2rem;
}
.md\:text-900[data-v-1f104f12] {
    font-size: 3rem;
}
.md\:width-full[data-v-1f104f12] {
    width: 100%;
}
.md\:width-half[data-v-1f104f12] {
    width: 50%;
}
.md\:width-quarter[data-v-1f104f12] {
    width: 25%;
}
.md\:width-third[data-v-1f104f12] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-1f104f12] {
    display: block;
}
.lg\:box-flex[data-v-1f104f12] {
    display: flex;
}
.lg\:box-hide[data-v-1f104f12] {
    display: none;
}
.lg\:box-show[data-v-1f104f12] {
    display: inherit;
}
.lg\:text-300[data-v-1f104f12] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-1f104f12] {
    font-size: 1rem;
}
.lg\:text-500[data-v-1f104f12] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-1f104f12] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-1f104f12] {
    font-size: 2rem;
}
.lg\:text-900[data-v-1f104f12] {
    font-size: 3rem;
}
.lg\:width-full[data-v-1f104f12] {
    width: 100%;
}
.lg\:width-half[data-v-1f104f12] {
    width: 50%;
}
.lg\:width-quarter[data-v-1f104f12] {
    width: 25%;
}
.lg\:width-third[data-v-1f104f12] {
    width: 33.33333%;
}
}
[data-v-1f104f12]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-1f104f12] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-1f104f12] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-1f104f12] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-1f104f12] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-1f104f12] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-1f104f12] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-1f104f12] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-1f104f12] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-1f104f12] {
  margin-bottom: 7.8px;
}
h1[data-v-1f104f12], h2[data-v-1f104f12], h3[data-v-1f104f12], h4[data-v-1f104f12] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-1f104f12] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-1f104f12] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-1f104f12] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-1f104f12] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-1f104f12] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-1f104f12] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-1f104f12] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-1f104f12] {
  position: relative;
}
.outer-image-wrapper > img[data-v-1f104f12] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-1f104f12] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-1f104f12] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-1f104f12] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-1f104f12] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-1f104f12] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-1f104f12] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-1f104f12] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-1f104f12] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-1f104f12] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-1f104f12] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-1f104f12] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-1f104f12] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-1f104f12] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-1f104f12] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-1f104f12] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-1f104f12] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-1f104f12] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-1f104f12] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-1f104f12] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-1f104f12] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-1f104f12] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-1f104f12] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.video-container[data-v-1f104f12] {
  position: relative;
  padding: 0px 0 30px 0;
  background-color: #a6aa9d;
}
video[data-v-1f104f12] {
  width: 100%;
}

/* video::-webkit-media-controls-panel-container, video::-webkit-media-controls {
  display: flex !important;
} */
button[data-v-1f104f12] {
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  color: #aba480;
  background-size: cover;
  position: absolute;
  top: 40px;
  left: 10px;
}
.caption[data-v-1f104f12] {
  margin: 5px 5px 0 5px;
  font-family: 'Yle-Medium', serif;
  font-weight: 400;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1.45;
  color: #f2f2f2;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-321093a1] {
  background: #1a1a1a;
}
.bg-light[data-v-321093a1] {
  background: #f2f2f2;
}
.bg-army-light[data-v-321093a1] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-321093a1] {
  background: #aba480;
}
.bg-army-subtext[data-v-321093a1] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-321093a1] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-321093a1] {
  background: #7d8077;
}
.bg-army-blue[data-v-321093a1] {
  background: #01499d;
}
.color-dark[data-v-321093a1] {
  color: #1a1a1a;
}
.color-light[data-v-321093a1] {
  color: #f2f2f2;
}
.color-army-light[data-v-321093a1] {
  color: #e4d9c7;
}
.color-army-dark[data-v-321093a1] {
  color: #aba480;
}
.color-army-subtext[data-v-321093a1] {
  color: #7d8e5c;
}
.color-winter-light[data-v-321093a1] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-321093a1] {
  color: #7d8077;
}
.color-army-blue[data-v-321093a1] {
  color: #01499d;
}
.box-block[data-v-321093a1] {
  display: block;
}
.box-flex[data-v-321093a1] {
  display: flex;
}
.box-hide[data-v-321093a1] {
  display: none;
}
.box-show[data-v-321093a1] {
  display: inherit;
}
.font-base[data-v-321093a1] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-321093a1] {
  font-family: Germania One, serif;
}
.font-mono[data-v-321093a1] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-321093a1] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-321093a1] {
  margin-top: 1rem;
}
.gap-top-500[data-v-321093a1] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-321093a1] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-321093a1] {
  margin-top: 2rem;
}
.gap-top-900[data-v-321093a1] {
  margin-top: 3rem;
}
.gap-right-300[data-v-321093a1] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-321093a1] {
  margin-right: 1rem;
}
.gap-right-500[data-v-321093a1] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-321093a1] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-321093a1] {
  margin-right: 2rem;
}
.gap-right-900[data-v-321093a1] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-321093a1] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-321093a1] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-321093a1] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-321093a1] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-321093a1] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-321093a1] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-321093a1] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-321093a1] {
  margin-left: 1rem;
}
.gap-left-500[data-v-321093a1] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-321093a1] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-321093a1] {
  margin-left: 2rem;
}
.gap-left-900[data-v-321093a1] {
  margin-left: 3rem;
}
.pad-top-300[data-v-321093a1] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-321093a1] {
  padding-top: 1rem;
}
.pad-top-500[data-v-321093a1] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-321093a1] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-321093a1] {
  padding-top: 2rem;
}
.pad-top-900[data-v-321093a1] {
  padding-top: 3rem;
}
.pad-right-300[data-v-321093a1] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-321093a1] {
  padding-right: 1rem;
}
.pad-right-500[data-v-321093a1] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-321093a1] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-321093a1] {
  padding-right: 2rem;
}
.pad-right-900[data-v-321093a1] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-321093a1] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-321093a1] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-321093a1] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-321093a1] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-321093a1] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-321093a1] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-321093a1] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-321093a1] {
  padding-left: 1rem;
}
.pad-left-500[data-v-321093a1] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-321093a1] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-321093a1] {
  padding-left: 2rem;
}
.pad-left-900[data-v-321093a1] {
  padding-left: 3rem;
}
.stack-300[data-v-321093a1] {
  z-index: 0;
}
.stack-400[data-v-321093a1] {
  z-index: 10;
}
.stack-500[data-v-321093a1] {
  z-index: 20;
}
.stack-600[data-v-321093a1] {
  z-index: 30;
}
.stack-700[data-v-321093a1] {
  z-index: 40;
}
.text-300[data-v-321093a1] {
  font-size: 0.8rem;
}
.text-400[data-v-321093a1] {
  font-size: 1rem;
}
.text-500[data-v-321093a1] {
  font-size: 1.25rem;
}
.text-600[data-v-321093a1] {
  font-size: 1.6rem;
}
.text-700[data-v-321093a1] {
  font-size: 2rem;
}
.text-900[data-v-321093a1] {
  font-size: 3rem;
}
.weight-light[data-v-321093a1] {
  font-weight: 300;
}
.weight-regular[data-v-321093a1] {
  font-weight: 400;
}
.weight-bold[data-v-321093a1] {
  font-weight: 700;
}
.width-full[data-v-321093a1] {
  width: 100%;
}
.width-half[data-v-321093a1] {
  width: 50%;
}
.width-quarter[data-v-321093a1] {
  width: 25%;
}
.width-third[data-v-321093a1] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-321093a1] {
    display: block;
}
.smd\:box-flex[data-v-321093a1] {
    display: flex;
}
.smd\:box-hide[data-v-321093a1] {
    display: none;
}
.smd\:box-show[data-v-321093a1] {
    display: inherit;
}
.smd\:text-300[data-v-321093a1] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-321093a1] {
    font-size: 1rem;
}
.smd\:text-500[data-v-321093a1] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-321093a1] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-321093a1] {
    font-size: 2rem;
}
.smd\:text-900[data-v-321093a1] {
    font-size: 3rem;
}
.smd\:width-full[data-v-321093a1] {
    width: 100%;
}
.smd\:width-half[data-v-321093a1] {
    width: 50%;
}
.smd\:width-quarter[data-v-321093a1] {
    width: 25%;
}
.smd\:width-third[data-v-321093a1] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-321093a1] {
    display: block;
}
.sm\:box-flex[data-v-321093a1] {
    display: flex;
}
.sm\:box-hide[data-v-321093a1] {
    display: none;
}
.sm\:box-show[data-v-321093a1] {
    display: inherit;
}
.sm\:text-300[data-v-321093a1] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-321093a1] {
    font-size: 1rem;
}
.sm\:text-500[data-v-321093a1] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-321093a1] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-321093a1] {
    font-size: 2rem;
}
.sm\:text-900[data-v-321093a1] {
    font-size: 3rem;
}
.sm\:width-full[data-v-321093a1] {
    width: 100%;
}
.sm\:width-half[data-v-321093a1] {
    width: 50%;
}
.sm\:width-quarter[data-v-321093a1] {
    width: 25%;
}
.sm\:width-third[data-v-321093a1] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-321093a1] {
    display: block;
}
.md\:box-flex[data-v-321093a1] {
    display: flex;
}
.md\:box-hide[data-v-321093a1] {
    display: none;
}
.md\:box-show[data-v-321093a1] {
    display: inherit;
}
.md\:text-300[data-v-321093a1] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-321093a1] {
    font-size: 1rem;
}
.md\:text-500[data-v-321093a1] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-321093a1] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-321093a1] {
    font-size: 2rem;
}
.md\:text-900[data-v-321093a1] {
    font-size: 3rem;
}
.md\:width-full[data-v-321093a1] {
    width: 100%;
}
.md\:width-half[data-v-321093a1] {
    width: 50%;
}
.md\:width-quarter[data-v-321093a1] {
    width: 25%;
}
.md\:width-third[data-v-321093a1] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-321093a1] {
    display: block;
}
.lg\:box-flex[data-v-321093a1] {
    display: flex;
}
.lg\:box-hide[data-v-321093a1] {
    display: none;
}
.lg\:box-show[data-v-321093a1] {
    display: inherit;
}
.lg\:text-300[data-v-321093a1] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-321093a1] {
    font-size: 1rem;
}
.lg\:text-500[data-v-321093a1] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-321093a1] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-321093a1] {
    font-size: 2rem;
}
.lg\:text-900[data-v-321093a1] {
    font-size: 3rem;
}
.lg\:width-full[data-v-321093a1] {
    width: 100%;
}
.lg\:width-half[data-v-321093a1] {
    width: 50%;
}
.lg\:width-quarter[data-v-321093a1] {
    width: 25%;
}
.lg\:width-third[data-v-321093a1] {
    width: 33.33333%;
}
}
[data-v-321093a1]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-321093a1] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-321093a1] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-321093a1] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-321093a1] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-321093a1] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-321093a1] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-321093a1] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-321093a1] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-321093a1] {
  margin-bottom: 7.8px;
}
h1[data-v-321093a1], h2[data-v-321093a1], h3[data-v-321093a1], h4[data-v-321093a1] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-321093a1] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-321093a1] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-321093a1] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-321093a1] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-321093a1] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-321093a1] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-321093a1] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-321093a1] {
  position: relative;
}
.outer-image-wrapper > img[data-v-321093a1] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-321093a1] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-321093a1] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-321093a1] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-321093a1] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-321093a1] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-321093a1] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-321093a1] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-321093a1] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-321093a1] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-321093a1] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-321093a1] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-321093a1] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-321093a1] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-321093a1] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-321093a1] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-321093a1] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-321093a1] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-321093a1] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-321093a1] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-321093a1] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-321093a1] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-321093a1] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
.grid-stack[data-v-321093a1] {
  display: grid;
}
.sticky-container[data-v-321093a1] {
  position: relative;
  z-index: 2;
}
svg[data-v-321093a1] {
  display: block;
  margin: 0 auto;
  width: 20vmin;
  overflow: hidden;
}
#image[data-v-321093a1] {
  grid-area: 1 / 1 / 4 / 2;
}
.svg-container[data-v-321093a1] {
  grid-area: 1 / 1 / 2 / 2;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-594f6385] {
  background: #1a1a1a;
}
.bg-light[data-v-594f6385] {
  background: #f2f2f2;
}
.bg-army-light[data-v-594f6385] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-594f6385] {
  background: #aba480;
}
.bg-army-subtext[data-v-594f6385] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-594f6385] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-594f6385] {
  background: #7d8077;
}
.bg-army-blue[data-v-594f6385] {
  background: #01499d;
}
.color-dark[data-v-594f6385] {
  color: #1a1a1a;
}
.color-light[data-v-594f6385] {
  color: #f2f2f2;
}
.color-army-light[data-v-594f6385] {
  color: #e4d9c7;
}
.color-army-dark[data-v-594f6385] {
  color: #aba480;
}
.color-army-subtext[data-v-594f6385] {
  color: #7d8e5c;
}
.color-winter-light[data-v-594f6385] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-594f6385] {
  color: #7d8077;
}
.color-army-blue[data-v-594f6385] {
  color: #01499d;
}
.box-block[data-v-594f6385] {
  display: block;
}
.box-flex[data-v-594f6385] {
  display: flex;
}
.box-hide[data-v-594f6385] {
  display: none;
}
.box-show[data-v-594f6385] {
  display: inherit;
}
.font-base[data-v-594f6385] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-594f6385] {
  font-family: Germania One, serif;
}
.font-mono[data-v-594f6385] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-594f6385] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-594f6385] {
  margin-top: 1rem;
}
.gap-top-500[data-v-594f6385] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-594f6385] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-594f6385] {
  margin-top: 2rem;
}
.gap-top-900[data-v-594f6385] {
  margin-top: 3rem;
}
.gap-right-300[data-v-594f6385] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-594f6385] {
  margin-right: 1rem;
}
.gap-right-500[data-v-594f6385] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-594f6385] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-594f6385] {
  margin-right: 2rem;
}
.gap-right-900[data-v-594f6385] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-594f6385] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-594f6385] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-594f6385] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-594f6385] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-594f6385] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-594f6385] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-594f6385] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-594f6385] {
  margin-left: 1rem;
}
.gap-left-500[data-v-594f6385] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-594f6385] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-594f6385] {
  margin-left: 2rem;
}
.gap-left-900[data-v-594f6385] {
  margin-left: 3rem;
}
.pad-top-300[data-v-594f6385] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-594f6385] {
  padding-top: 1rem;
}
.pad-top-500[data-v-594f6385] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-594f6385] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-594f6385] {
  padding-top: 2rem;
}
.pad-top-900[data-v-594f6385] {
  padding-top: 3rem;
}
.pad-right-300[data-v-594f6385] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-594f6385] {
  padding-right: 1rem;
}
.pad-right-500[data-v-594f6385] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-594f6385] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-594f6385] {
  padding-right: 2rem;
}
.pad-right-900[data-v-594f6385] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-594f6385] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-594f6385] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-594f6385] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-594f6385] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-594f6385] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-594f6385] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-594f6385] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-594f6385] {
  padding-left: 1rem;
}
.pad-left-500[data-v-594f6385] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-594f6385] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-594f6385] {
  padding-left: 2rem;
}
.pad-left-900[data-v-594f6385] {
  padding-left: 3rem;
}
.stack-300[data-v-594f6385] {
  z-index: 0;
}
.stack-400[data-v-594f6385] {
  z-index: 10;
}
.stack-500[data-v-594f6385] {
  z-index: 20;
}
.stack-600[data-v-594f6385] {
  z-index: 30;
}
.stack-700[data-v-594f6385] {
  z-index: 40;
}
.text-300[data-v-594f6385] {
  font-size: 0.8rem;
}
.text-400[data-v-594f6385] {
  font-size: 1rem;
}
.text-500[data-v-594f6385] {
  font-size: 1.25rem;
}
.text-600[data-v-594f6385] {
  font-size: 1.6rem;
}
.text-700[data-v-594f6385] {
  font-size: 2rem;
}
.text-900[data-v-594f6385] {
  font-size: 3rem;
}
.weight-light[data-v-594f6385] {
  font-weight: 300;
}
.weight-regular[data-v-594f6385] {
  font-weight: 400;
}
.weight-bold[data-v-594f6385] {
  font-weight: 700;
}
.width-full[data-v-594f6385] {
  width: 100%;
}
.width-half[data-v-594f6385] {
  width: 50%;
}
.width-quarter[data-v-594f6385] {
  width: 25%;
}
.width-third[data-v-594f6385] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-594f6385] {
    display: block;
}
.smd\:box-flex[data-v-594f6385] {
    display: flex;
}
.smd\:box-hide[data-v-594f6385] {
    display: none;
}
.smd\:box-show[data-v-594f6385] {
    display: inherit;
}
.smd\:text-300[data-v-594f6385] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-594f6385] {
    font-size: 1rem;
}
.smd\:text-500[data-v-594f6385] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-594f6385] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-594f6385] {
    font-size: 2rem;
}
.smd\:text-900[data-v-594f6385] {
    font-size: 3rem;
}
.smd\:width-full[data-v-594f6385] {
    width: 100%;
}
.smd\:width-half[data-v-594f6385] {
    width: 50%;
}
.smd\:width-quarter[data-v-594f6385] {
    width: 25%;
}
.smd\:width-third[data-v-594f6385] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-594f6385] {
    display: block;
}
.sm\:box-flex[data-v-594f6385] {
    display: flex;
}
.sm\:box-hide[data-v-594f6385] {
    display: none;
}
.sm\:box-show[data-v-594f6385] {
    display: inherit;
}
.sm\:text-300[data-v-594f6385] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-594f6385] {
    font-size: 1rem;
}
.sm\:text-500[data-v-594f6385] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-594f6385] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-594f6385] {
    font-size: 2rem;
}
.sm\:text-900[data-v-594f6385] {
    font-size: 3rem;
}
.sm\:width-full[data-v-594f6385] {
    width: 100%;
}
.sm\:width-half[data-v-594f6385] {
    width: 50%;
}
.sm\:width-quarter[data-v-594f6385] {
    width: 25%;
}
.sm\:width-third[data-v-594f6385] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-594f6385] {
    display: block;
}
.md\:box-flex[data-v-594f6385] {
    display: flex;
}
.md\:box-hide[data-v-594f6385] {
    display: none;
}
.md\:box-show[data-v-594f6385] {
    display: inherit;
}
.md\:text-300[data-v-594f6385] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-594f6385] {
    font-size: 1rem;
}
.md\:text-500[data-v-594f6385] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-594f6385] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-594f6385] {
    font-size: 2rem;
}
.md\:text-900[data-v-594f6385] {
    font-size: 3rem;
}
.md\:width-full[data-v-594f6385] {
    width: 100%;
}
.md\:width-half[data-v-594f6385] {
    width: 50%;
}
.md\:width-quarter[data-v-594f6385] {
    width: 25%;
}
.md\:width-third[data-v-594f6385] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-594f6385] {
    display: block;
}
.lg\:box-flex[data-v-594f6385] {
    display: flex;
}
.lg\:box-hide[data-v-594f6385] {
    display: none;
}
.lg\:box-show[data-v-594f6385] {
    display: inherit;
}
.lg\:text-300[data-v-594f6385] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-594f6385] {
    font-size: 1rem;
}
.lg\:text-500[data-v-594f6385] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-594f6385] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-594f6385] {
    font-size: 2rem;
}
.lg\:text-900[data-v-594f6385] {
    font-size: 3rem;
}
.lg\:width-full[data-v-594f6385] {
    width: 100%;
}
.lg\:width-half[data-v-594f6385] {
    width: 50%;
}
.lg\:width-quarter[data-v-594f6385] {
    width: 25%;
}
.lg\:width-third[data-v-594f6385] {
    width: 33.33333%;
}
}
[data-v-594f6385]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-594f6385] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-594f6385] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-594f6385] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-594f6385] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-594f6385] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-594f6385] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-594f6385] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-594f6385] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-594f6385] {
  margin-bottom: 7.8px;
}
h1[data-v-594f6385], h2[data-v-594f6385], h3[data-v-594f6385], h4[data-v-594f6385] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-594f6385] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-594f6385] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-594f6385] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-594f6385] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-594f6385] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-594f6385] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-594f6385] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-594f6385] {
  position: relative;
}
.outer-image-wrapper > img[data-v-594f6385] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-594f6385] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-594f6385] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-594f6385] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-594f6385] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-594f6385] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-594f6385] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-594f6385] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-594f6385] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-594f6385] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-594f6385] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-594f6385] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-594f6385] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-594f6385] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-594f6385] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-594f6385] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-594f6385] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-594f6385] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-594f6385] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-594f6385] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-594f6385] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-594f6385] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-594f6385] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
picture[data-v-594f6385], img[data-v-594f6385] {
  max-width: 100vw;
  /* @include media-query("md") {
      width: auto;
      
  }*/
}
@media (min-width: 36em) {
picture[data-v-594f6385], img[data-v-594f6385] {
      width: auto;
      max-width: 480px;
}
}
.outer-wrapper[data-v-594f6385] {
  background-color: #fff;
}
.bodyTextExcept[data-v-594f6385] {
  border-bottom: 25px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-5e969306] {
  background: #1a1a1a;
}
.bg-light[data-v-5e969306] {
  background: #f2f2f2;
}
.bg-army-light[data-v-5e969306] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-5e969306] {
  background: #aba480;
}
.bg-army-subtext[data-v-5e969306] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-5e969306] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-5e969306] {
  background: #7d8077;
}
.bg-army-blue[data-v-5e969306] {
  background: #01499d;
}
.color-dark[data-v-5e969306] {
  color: #1a1a1a;
}
.color-light[data-v-5e969306] {
  color: #f2f2f2;
}
.color-army-light[data-v-5e969306] {
  color: #e4d9c7;
}
.color-army-dark[data-v-5e969306] {
  color: #aba480;
}
.color-army-subtext[data-v-5e969306] {
  color: #7d8e5c;
}
.color-winter-light[data-v-5e969306] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-5e969306] {
  color: #7d8077;
}
.color-army-blue[data-v-5e969306] {
  color: #01499d;
}
.box-block[data-v-5e969306] {
  display: block;
}
.box-flex[data-v-5e969306] {
  display: flex;
}
.box-hide[data-v-5e969306] {
  display: none;
}
.box-show[data-v-5e969306] {
  display: inherit;
}
.font-base[data-v-5e969306] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-5e969306] {
  font-family: Germania One, serif;
}
.font-mono[data-v-5e969306] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-5e969306] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-5e969306] {
  margin-top: 1rem;
}
.gap-top-500[data-v-5e969306] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-5e969306] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-5e969306] {
  margin-top: 2rem;
}
.gap-top-900[data-v-5e969306] {
  margin-top: 3rem;
}
.gap-right-300[data-v-5e969306] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-5e969306] {
  margin-right: 1rem;
}
.gap-right-500[data-v-5e969306] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-5e969306] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-5e969306] {
  margin-right: 2rem;
}
.gap-right-900[data-v-5e969306] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-5e969306] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-5e969306] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-5e969306] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-5e969306] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-5e969306] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-5e969306] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-5e969306] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-5e969306] {
  margin-left: 1rem;
}
.gap-left-500[data-v-5e969306] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-5e969306] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-5e969306] {
  margin-left: 2rem;
}
.gap-left-900[data-v-5e969306] {
  margin-left: 3rem;
}
.pad-top-300[data-v-5e969306] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-5e969306] {
  padding-top: 1rem;
}
.pad-top-500[data-v-5e969306] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-5e969306] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-5e969306] {
  padding-top: 2rem;
}
.pad-top-900[data-v-5e969306] {
  padding-top: 3rem;
}
.pad-right-300[data-v-5e969306] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-5e969306] {
  padding-right: 1rem;
}
.pad-right-500[data-v-5e969306] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-5e969306] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-5e969306] {
  padding-right: 2rem;
}
.pad-right-900[data-v-5e969306] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-5e969306] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-5e969306] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-5e969306] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-5e969306] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-5e969306] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-5e969306] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-5e969306] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-5e969306] {
  padding-left: 1rem;
}
.pad-left-500[data-v-5e969306] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-5e969306] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-5e969306] {
  padding-left: 2rem;
}
.pad-left-900[data-v-5e969306] {
  padding-left: 3rem;
}
.stack-300[data-v-5e969306] {
  z-index: 0;
}
.stack-400[data-v-5e969306] {
  z-index: 10;
}
.stack-500[data-v-5e969306] {
  z-index: 20;
}
.stack-600[data-v-5e969306] {
  z-index: 30;
}
.stack-700[data-v-5e969306] {
  z-index: 40;
}
.text-300[data-v-5e969306] {
  font-size: 0.8rem;
}
.text-400[data-v-5e969306] {
  font-size: 1rem;
}
.text-500[data-v-5e969306] {
  font-size: 1.25rem;
}
.text-600[data-v-5e969306] {
  font-size: 1.6rem;
}
.text-700[data-v-5e969306] {
  font-size: 2rem;
}
.text-900[data-v-5e969306] {
  font-size: 3rem;
}
.weight-light[data-v-5e969306] {
  font-weight: 300;
}
.weight-regular[data-v-5e969306] {
  font-weight: 400;
}
.weight-bold[data-v-5e969306] {
  font-weight: 700;
}
.width-full[data-v-5e969306] {
  width: 100%;
}
.width-half[data-v-5e969306] {
  width: 50%;
}
.width-quarter[data-v-5e969306] {
  width: 25%;
}
.width-third[data-v-5e969306] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-5e969306] {
    display: block;
}
.smd\:box-flex[data-v-5e969306] {
    display: flex;
}
.smd\:box-hide[data-v-5e969306] {
    display: none;
}
.smd\:box-show[data-v-5e969306] {
    display: inherit;
}
.smd\:text-300[data-v-5e969306] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-5e969306] {
    font-size: 1rem;
}
.smd\:text-500[data-v-5e969306] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-5e969306] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-5e969306] {
    font-size: 2rem;
}
.smd\:text-900[data-v-5e969306] {
    font-size: 3rem;
}
.smd\:width-full[data-v-5e969306] {
    width: 100%;
}
.smd\:width-half[data-v-5e969306] {
    width: 50%;
}
.smd\:width-quarter[data-v-5e969306] {
    width: 25%;
}
.smd\:width-third[data-v-5e969306] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-5e969306] {
    display: block;
}
.sm\:box-flex[data-v-5e969306] {
    display: flex;
}
.sm\:box-hide[data-v-5e969306] {
    display: none;
}
.sm\:box-show[data-v-5e969306] {
    display: inherit;
}
.sm\:text-300[data-v-5e969306] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-5e969306] {
    font-size: 1rem;
}
.sm\:text-500[data-v-5e969306] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-5e969306] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-5e969306] {
    font-size: 2rem;
}
.sm\:text-900[data-v-5e969306] {
    font-size: 3rem;
}
.sm\:width-full[data-v-5e969306] {
    width: 100%;
}
.sm\:width-half[data-v-5e969306] {
    width: 50%;
}
.sm\:width-quarter[data-v-5e969306] {
    width: 25%;
}
.sm\:width-third[data-v-5e969306] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-5e969306] {
    display: block;
}
.md\:box-flex[data-v-5e969306] {
    display: flex;
}
.md\:box-hide[data-v-5e969306] {
    display: none;
}
.md\:box-show[data-v-5e969306] {
    display: inherit;
}
.md\:text-300[data-v-5e969306] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-5e969306] {
    font-size: 1rem;
}
.md\:text-500[data-v-5e969306] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-5e969306] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-5e969306] {
    font-size: 2rem;
}
.md\:text-900[data-v-5e969306] {
    font-size: 3rem;
}
.md\:width-full[data-v-5e969306] {
    width: 100%;
}
.md\:width-half[data-v-5e969306] {
    width: 50%;
}
.md\:width-quarter[data-v-5e969306] {
    width: 25%;
}
.md\:width-third[data-v-5e969306] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-5e969306] {
    display: block;
}
.lg\:box-flex[data-v-5e969306] {
    display: flex;
}
.lg\:box-hide[data-v-5e969306] {
    display: none;
}
.lg\:box-show[data-v-5e969306] {
    display: inherit;
}
.lg\:text-300[data-v-5e969306] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-5e969306] {
    font-size: 1rem;
}
.lg\:text-500[data-v-5e969306] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-5e969306] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-5e969306] {
    font-size: 2rem;
}
.lg\:text-900[data-v-5e969306] {
    font-size: 3rem;
}
.lg\:width-full[data-v-5e969306] {
    width: 100%;
}
.lg\:width-half[data-v-5e969306] {
    width: 50%;
}
.lg\:width-quarter[data-v-5e969306] {
    width: 25%;
}
.lg\:width-third[data-v-5e969306] {
    width: 33.33333%;
}
}
[data-v-5e969306]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-5e969306] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-5e969306] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-5e969306] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-5e969306] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-5e969306] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-5e969306] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-5e969306] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-5e969306] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-5e969306] {
  margin-bottom: 7.8px;
}
h1[data-v-5e969306], h2[data-v-5e969306], h3[data-v-5e969306], h4[data-v-5e969306] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-5e969306] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-5e969306] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-5e969306] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-5e969306] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-5e969306] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-5e969306] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-5e969306] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-5e969306] {
  position: relative;
}
.outer-image-wrapper > img[data-v-5e969306] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-5e969306] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-5e969306] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-5e969306] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-5e969306] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-5e969306] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-5e969306] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-5e969306] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-5e969306] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-5e969306] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-5e969306] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-5e969306] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-5e969306] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-5e969306] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-5e969306] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-5e969306] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-5e969306] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-5e969306] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-5e969306] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-5e969306] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-5e969306] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-5e969306] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-5e969306] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
picture[data-v-5e969306], img[data-v-5e969306] {
  max-width: 100vw;
  /* @include media-query("md") {
      width: auto;
      
  }*/
}
@media (min-width: 36em) {
picture[data-v-5e969306], img[data-v-5e969306] {
      width: auto;
      max-width: 480px;
}
}
.outer-wrapper[data-v-5e969306] {
  background-color: #fff;
}
.bodyTextExcept[data-v-5e969306] {
  border-bottom: 25px solid #fff;
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-70999d5c] {
  background: #1a1a1a;
}
.bg-light[data-v-70999d5c] {
  background: #f2f2f2;
}
.bg-army-light[data-v-70999d5c] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-70999d5c] {
  background: #aba480;
}
.bg-army-subtext[data-v-70999d5c] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-70999d5c] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-70999d5c] {
  background: #7d8077;
}
.bg-army-blue[data-v-70999d5c] {
  background: #01499d;
}
.color-dark[data-v-70999d5c] {
  color: #1a1a1a;
}
.color-light[data-v-70999d5c] {
  color: #f2f2f2;
}
.color-army-light[data-v-70999d5c] {
  color: #e4d9c7;
}
.color-army-dark[data-v-70999d5c] {
  color: #aba480;
}
.color-army-subtext[data-v-70999d5c] {
  color: #7d8e5c;
}
.color-winter-light[data-v-70999d5c] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-70999d5c] {
  color: #7d8077;
}
.color-army-blue[data-v-70999d5c] {
  color: #01499d;
}
.box-block[data-v-70999d5c] {
  display: block;
}
.box-flex[data-v-70999d5c] {
  display: flex;
}
.box-hide[data-v-70999d5c] {
  display: none;
}
.box-show[data-v-70999d5c] {
  display: inherit;
}
.font-base[data-v-70999d5c] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-70999d5c] {
  font-family: Germania One, serif;
}
.font-mono[data-v-70999d5c] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-70999d5c] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-70999d5c] {
  margin-top: 1rem;
}
.gap-top-500[data-v-70999d5c] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-70999d5c] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-70999d5c] {
  margin-top: 2rem;
}
.gap-top-900[data-v-70999d5c] {
  margin-top: 3rem;
}
.gap-right-300[data-v-70999d5c] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-70999d5c] {
  margin-right: 1rem;
}
.gap-right-500[data-v-70999d5c] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-70999d5c] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-70999d5c] {
  margin-right: 2rem;
}
.gap-right-900[data-v-70999d5c] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-70999d5c] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-70999d5c] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-70999d5c] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-70999d5c] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-70999d5c] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-70999d5c] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-70999d5c] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-70999d5c] {
  margin-left: 1rem;
}
.gap-left-500[data-v-70999d5c] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-70999d5c] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-70999d5c] {
  margin-left: 2rem;
}
.gap-left-900[data-v-70999d5c] {
  margin-left: 3rem;
}
.pad-top-300[data-v-70999d5c] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-70999d5c] {
  padding-top: 1rem;
}
.pad-top-500[data-v-70999d5c] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-70999d5c] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-70999d5c] {
  padding-top: 2rem;
}
.pad-top-900[data-v-70999d5c] {
  padding-top: 3rem;
}
.pad-right-300[data-v-70999d5c] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-70999d5c] {
  padding-right: 1rem;
}
.pad-right-500[data-v-70999d5c] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-70999d5c] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-70999d5c] {
  padding-right: 2rem;
}
.pad-right-900[data-v-70999d5c] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-70999d5c] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-70999d5c] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-70999d5c] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-70999d5c] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-70999d5c] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-70999d5c] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-70999d5c] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-70999d5c] {
  padding-left: 1rem;
}
.pad-left-500[data-v-70999d5c] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-70999d5c] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-70999d5c] {
  padding-left: 2rem;
}
.pad-left-900[data-v-70999d5c] {
  padding-left: 3rem;
}
.stack-300[data-v-70999d5c] {
  z-index: 0;
}
.stack-400[data-v-70999d5c] {
  z-index: 10;
}
.stack-500[data-v-70999d5c] {
  z-index: 20;
}
.stack-600[data-v-70999d5c] {
  z-index: 30;
}
.stack-700[data-v-70999d5c] {
  z-index: 40;
}
.text-300[data-v-70999d5c] {
  font-size: 0.8rem;
}
.text-400[data-v-70999d5c] {
  font-size: 1rem;
}
.text-500[data-v-70999d5c] {
  font-size: 1.25rem;
}
.text-600[data-v-70999d5c] {
  font-size: 1.6rem;
}
.text-700[data-v-70999d5c] {
  font-size: 2rem;
}
.text-900[data-v-70999d5c] {
  font-size: 3rem;
}
.weight-light[data-v-70999d5c] {
  font-weight: 300;
}
.weight-regular[data-v-70999d5c] {
  font-weight: 400;
}
.weight-bold[data-v-70999d5c] {
  font-weight: 700;
}
.width-full[data-v-70999d5c] {
  width: 100%;
}
.width-half[data-v-70999d5c] {
  width: 50%;
}
.width-quarter[data-v-70999d5c] {
  width: 25%;
}
.width-third[data-v-70999d5c] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-70999d5c] {
    display: block;
}
.smd\:box-flex[data-v-70999d5c] {
    display: flex;
}
.smd\:box-hide[data-v-70999d5c] {
    display: none;
}
.smd\:box-show[data-v-70999d5c] {
    display: inherit;
}
.smd\:text-300[data-v-70999d5c] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-70999d5c] {
    font-size: 1rem;
}
.smd\:text-500[data-v-70999d5c] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-70999d5c] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-70999d5c] {
    font-size: 2rem;
}
.smd\:text-900[data-v-70999d5c] {
    font-size: 3rem;
}
.smd\:width-full[data-v-70999d5c] {
    width: 100%;
}
.smd\:width-half[data-v-70999d5c] {
    width: 50%;
}
.smd\:width-quarter[data-v-70999d5c] {
    width: 25%;
}
.smd\:width-third[data-v-70999d5c] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-70999d5c] {
    display: block;
}
.sm\:box-flex[data-v-70999d5c] {
    display: flex;
}
.sm\:box-hide[data-v-70999d5c] {
    display: none;
}
.sm\:box-show[data-v-70999d5c] {
    display: inherit;
}
.sm\:text-300[data-v-70999d5c] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-70999d5c] {
    font-size: 1rem;
}
.sm\:text-500[data-v-70999d5c] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-70999d5c] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-70999d5c] {
    font-size: 2rem;
}
.sm\:text-900[data-v-70999d5c] {
    font-size: 3rem;
}
.sm\:width-full[data-v-70999d5c] {
    width: 100%;
}
.sm\:width-half[data-v-70999d5c] {
    width: 50%;
}
.sm\:width-quarter[data-v-70999d5c] {
    width: 25%;
}
.sm\:width-third[data-v-70999d5c] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-70999d5c] {
    display: block;
}
.md\:box-flex[data-v-70999d5c] {
    display: flex;
}
.md\:box-hide[data-v-70999d5c] {
    display: none;
}
.md\:box-show[data-v-70999d5c] {
    display: inherit;
}
.md\:text-300[data-v-70999d5c] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-70999d5c] {
    font-size: 1rem;
}
.md\:text-500[data-v-70999d5c] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-70999d5c] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-70999d5c] {
    font-size: 2rem;
}
.md\:text-900[data-v-70999d5c] {
    font-size: 3rem;
}
.md\:width-full[data-v-70999d5c] {
    width: 100%;
}
.md\:width-half[data-v-70999d5c] {
    width: 50%;
}
.md\:width-quarter[data-v-70999d5c] {
    width: 25%;
}
.md\:width-third[data-v-70999d5c] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-70999d5c] {
    display: block;
}
.lg\:box-flex[data-v-70999d5c] {
    display: flex;
}
.lg\:box-hide[data-v-70999d5c] {
    display: none;
}
.lg\:box-show[data-v-70999d5c] {
    display: inherit;
}
.lg\:text-300[data-v-70999d5c] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-70999d5c] {
    font-size: 1rem;
}
.lg\:text-500[data-v-70999d5c] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-70999d5c] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-70999d5c] {
    font-size: 2rem;
}
.lg\:text-900[data-v-70999d5c] {
    font-size: 3rem;
}
.lg\:width-full[data-v-70999d5c] {
    width: 100%;
}
.lg\:width-half[data-v-70999d5c] {
    width: 50%;
}
.lg\:width-quarter[data-v-70999d5c] {
    width: 25%;
}
.lg\:width-third[data-v-70999d5c] {
    width: 33.33333%;
}
}
[data-v-70999d5c]:root {
  --size-500: 1em * 1.25;
}

/* Muotoilu kuvan äärirajoille, alanurkka kärjistyy pieneksi kolmioksi*/
.shape-arrow[data-v-70999d5c] {
  /*clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);
    -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 66%, 50% 100%, 0 66%, 0 25%);*/
  clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
  /*@media (min-width: 48) and (max-width: 62em){
        clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
        -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
    }*/
}
@media (max-width: 36em) {
.shape-arrow[data-v-70999d5c] {
      clip-path: polygon(0% 0, 100% 0%, 100% 80%, 50% 100%, 0 80%, 0 25%);
      -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 90%, 50% 100%, 0 90%, 0 25%);
}
}

/* Kuvan alle asetetaan drop-shadow mustan "inttikolmion" kohdaksi. */
.img-wrapper[data-v-70999d5c] {
  -webkit-filter: drop-shadow(0px 50px 0px #1a1a1a);
  filter: drop-shadow(0px 50px 0px #1a1a1a);
  padding-bottom: 50px;
}

/*
.date-clip-rect {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 88%, 0% 88%, 0% 99%, 3% 88%, 0% 88%);
}*/
.date-sticky[data-v-70999d5c] {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
}
.date[data-v-70999d5c] {
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.quote-wrapper[data-v-70999d5c] {
  --pad-quote: 15px 0;
  --line-height: 1.42;
  margin-bottom: 0.09em;
}
p[data-v-70999d5c] {
  padding: var(--pad-quote, 3px 0);
  line-height: var(--line-height, 1.48);
}
#bodytext-def[data-v-70999d5c] {
  margin-bottom: 15px;
}
#bodytext-def > p[data-v-70999d5c] {
  margin-bottom: 7.8px;
}
h1[data-v-70999d5c], h2[data-v-70999d5c], h3[data-v-70999d5c], h4[data-v-70999d5c] {
  margin-bottom: 15px;
}
.data-state-combined[data-v-70999d5c] {
  padding: 0 0 0 1em;
  margin: 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.highlight-wrapper[data-v-70999d5c] {
  -webkit-filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, 0.5));
}
.outer-image-wrapper[data-v-70999d5c] {
  position: relative;
}
.outer-image-wrapper > picture[data-v-70999d5c] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-70999d5c] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-70999d5c] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-70999d5c] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper[data-v-70999d5c] {
  position: relative;
}
.outer-image-wrapper > img[data-v-70999d5c] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > img[data-v-70999d5c] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > img[data-v-70999d5c] {
      padding: 0 0 30px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > img[data-v-70999d5c] {
      padding: 0 0 25px 0;
}
}
.outer-image-wrapper > picture[data-v-70999d5c] {
  width: 100%;
  padding: 0 0 30px 0;
}
@media (max-width: 600px) {
.outer-image-wrapper > picture[data-v-70999d5c] {
      padding: 0 0 60px 0;
}
}
@media (max-width: 500px) {
.outer-image-wrapper > picture[data-v-70999d5c] {
      padding: 0 0 80px 0;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > picture[data-v-70999d5c] {
      padding: 0 0 100px 0;
}
}
.outer-image-wrapper > .caption-wrapper[data-v-70999d5c] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -6px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper[data-v-70999d5c] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper[data-v-70999d5c] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper-w[data-v-70999d5c] {
  position: absolute;
  width: 100%;
  bottom: 0;
  transform: translate(0, -20px);
}
@media (max-width: 500px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-70999d5c] {
      min-height: 80px;
}
}
@media (max-width: 400px) {
.outer-image-wrapper > .caption-wrapper-w[data-v-70999d5c] {
      min-height: 100px;
}
}
.outer-image-wrapper > .caption-wrapper > p[data-v-70999d5c] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1rem;
  background-color: #7d8e5c;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper > p[data-v-70999d5c] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.outer-image-wrapper > .caption-wrapper-w > p[data-v-70999d5c] {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Yle-Medium', sans-serif;
  font-size: 1.25rem;
  background-color: #a6aa9d;
  color: #f2f2f2;
  box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 600px) {
.outer-image-wrapper > .caption-wrapper-w > p[data-v-70999d5c] {
      margin: 0 15px;
      box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.3);
}
}
.lentajapallo[data-v-70999d5c] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.kasipallo[data-v-70999d5c] {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.split[data-v-70999d5c] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#aba480 0%, #aba480 30%, #fff 30%, #fff 30%);
  background-image: #aba480 0%, #aba480 30%, #fff 30%, #fff 30%;
}
.split-2[data-v-70999d5c] {
  background-color: #fff;
  background-image: -webkit-linear-gradient(#a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%);
  background-image: #a6aa9d 0%, #a6aa9d 45%, #1a1a1a 45%, #1a1a1a 45%;
}
.nimil[data-v-70999d5c] {
  display: block;
  margin: 0 auto;
  width: 150px;
}
h4[data-v-70999d5c] {
  padding: 0px 0px;
  margin: 0 0;
}
.box-header[data-v-70999d5c] {
  text-align: center;
  margin-bottom: 0px;
}
@media (min-width: 22em) {
.box-header[data-v-70999d5c] {
      font-size: 3rem;
}
}
.yearbox-spacer[data-v-70999d5c] {
  padding-top: 200px;
  padding-bottom: 150px;
  width: 100%;
}
@media (min-width: 22em) {
.yearbox-spacer[data-v-70999d5c] {
      padding-bottom: 170px;
}
}
@media (min-width: 48em) {
.yearbox-spacer[data-v-70999d5c] {
      padding-bottom: 190px;
}
}
.margin-reset[data-v-70999d5c] {
  margin-top: 0px;
}

/* round yearbox wrapper */
.yearbox-wrapper[data-v-70999d5c] {
  position: relative;
}
.item-9[data-v-70999d5c] {
  --i: 9;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-9[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-9[data-v-70999d5c]::before {
    content: '1';
}
.item-10[data-v-70999d5c] {
  --i: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #01499d;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-10[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-10[data-v-70999d5c]::before {
    content: '2';
}
.item-11[data-v-70999d5c] {
  --i: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #01499d;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-11[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-11[data-v-70999d5c]::before {
    content: '3';
}
.item-0[data-v-70999d5c] {
  --i: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-0[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-0[data-v-70999d5c]::before {
    content: '4';
}
.item-1[data-v-70999d5c] {
  --i: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-1[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-1[data-v-70999d5c]::before {
    content: '5';
}
.item-2[data-v-70999d5c] {
  --i: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-2[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-2[data-v-70999d5c]::before {
    content: '6';
}
.item-3[data-v-70999d5c] {
  --i: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 1.1px solid #e4d9c7;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: white;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-3[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.25 cutive mono, monospace;
}
}
.item-3[data-v-70999d5c]::before {
    content: '7';
}
.item-4[data-v-70999d5c] {
  --i: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4.1em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-4[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-4[data-v-70999d5c]::before {
    content: '8';
}
.item-5[data-v-70999d5c] {
  --i: 5;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-5[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-5[data-v-70999d5c]::before {
    content: '9';
}
.item-6[data-v-70999d5c] {
  --i: 6;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-6[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-6[data-v-70999d5c]::before {
    content: '10';
}
.item-7[data-v-70999d5c] {
  --i: 7;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4em) rotate(calc(-1*var(--az)));
  background: #01499d;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-7[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-7[data-v-70999d5c]::before {
    content: '11';
}
.item-8[data-v-70999d5c] {
  --i: 8;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  --az: calc(var(--i)*1turn/12);
  transform: rotate(var(--az)) translate(4em) rotate(calc(-1*var(--az)));
  background: #e4d9c7;
  font: 1.6em/ 2 cutive mono, monospace;
  text-align: center;
}
@media (min-width: 22em) {
.item-8[data-v-70999d5c] {
      margin: -1.1em;
      width: 2.2em;
      height: 2.2em;
      --az: calc(var(--i)*1turn/12);
      transform: rotate(var(--az)) translate(4.4em) rotate(calc(-1*var(--az)));
      font: 1.88em/ 2.22 cutive mono, monospace;
}
}
.item-8[data-v-70999d5c]::before {
    content: '12';
}
#start[data-v-70999d5c] {
  --i: 8;
  position: absolute;
  top: 50%;
  left: 46%;
  width: 50px;
  --az: calc(var(--i)*1turn/24);
  transform: rotate(var(--az)) translate(5.4em);
}
@media (min-width: 22em) {
#start[data-v-70999d5c] {
      left: 48%;
      transform: rotate(var(--az)) translate(7.2em);
}
}
#kk[data-v-70999d5c] {
  --i: 8;
  position: absolute;
  top: 20%;
  left: 24%;
  width: 60px;
  --az: calc(var(--i)*1turn/24);
  transform: rotate(var(--az)) translate(3em) rotate(calc(-1*var(--az)));
}
@media (min-width: 22em) {
#kk[data-v-70999d5c] {
      top: 4%;
      left: 20%;
      transform: rotate(var(--az)) translate(3.5em) rotate(calc(-1*var(--az)));
}
}

@charset "UTF-8";
/**
 * BASE SIZE
 * All calculations are based on this. It’s recommended that
 * you keep it at 1rem because that is the root font size. You
 * can set it to whatever you like and whatever unit you like.
 */
/**
  * SIZE SCALE
  * This is a Major Third scale that powers all the utilities that
  * it is relevant for (font-size, margin, padding). All items are
  * calcuated off the base size, so change that and cascade across
  * your whole project.
  */
/**
  * COLORS
  * Colors are shared between backgrounds and text by default. 
  * You can also use them to power borders, fills or shadows, for example.
  */
/**
  * CORE CONFIG
  * This powers everything from utility class generation to breakpoints
  * to enabling/disabling pre-built components/utilities.
  */
/**
 * GET CONFIG VALUE FUNCTION
 * Returns back a 1 dimensional (key value pair) config value if available.
 *
 * @param {string} $key - The key of the config value that you want
 * @param {string{ $group - The group within $gorko-config where that $key lives
 */
/**
 * GET COLOR FUNCTION
 *
 * Function tries to match the passed $key with the $gorko-colors map. Returns null
 * if it can’t find a match.
 *
 * @param {string} $key - The color that you want to get 
 */
/**
 * GET SIZE FUNCTION
 *
 * Function tries to match the passed $ratio-key with the $gorko-size-scale. Returns null
 * if it can’t find a match.
 *
 * @param {string} $ratio-key - The size ratio that you want to get 
 */
/**
 * APPLY UTILITY MIXIN
 * Grab the property and value of one of the $gorko-config utilities
 * that the generator will generate a class for. 
 *
 * @param {string} $key - The configured utility’s key
 * @param {string} $value-key - The value key that you are looking for within the utilty
 */
/**
 * MEDIA QUERY MIXIN
 * Pass in the key of one of your breakpoints set in `$gorko-config['breakpoints']`
 * and this mixin will generate the @media query with your configured value.
 *
 * @param {string} $key - The key of your configured breakpoint
 */
/**
 * CYCLE MIXIN
 * A simple worker that loops every element in the config
 * and pushes it into the collection processor
 * 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * PROCESS COLLECTION MIXIN
 * Takes a passed collection and finds utility classes to generate. 
 * It’ll loop through breakpoints, too and generate responsive utilities 
 * where required
 *
 * @param {map} $collection - The '$gorko-config' config item 
 * @param {string} $prefix - An optional prefix that is stuck to the front of selectors
 * @param {string} $selector - The CSS selector that should be generated
 * @param {bool} $is-breakpoint - A flag for the responsive generation to use to determine wether to run or not
 */
/**
 * GENERATE CSS MIXIN
 * The final CSS generator that takes the process params and generates
 * a CSS utility.
 *
 * @param {string} $selector - The CSS selector that should be generated
 * @param {string} $property - The CSS property that this utility affects
 * @param {map} $items - The collection of utility items to generate classes for
 */
.bg-dark[data-v-3ea74058] {
  background: #1a1a1a;
}
.bg-light[data-v-3ea74058] {
  background: #f2f2f2;
}
.bg-army-light[data-v-3ea74058] {
  background: #e4d9c7;
}
.bg-army-dark[data-v-3ea74058] {
  background: #aba480;
}
.bg-army-subtext[data-v-3ea74058] {
  background: #7d8e5c;
}
.bg-winter-light[data-v-3ea74058] {
  background: #a6aa9d;
}
.bg-winter-dark[data-v-3ea74058] {
  background: #7d8077;
}
.bg-army-blue[data-v-3ea74058] {
  background: #01499d;
}
.color-dark[data-v-3ea74058] {
  color: #1a1a1a;
}
.color-light[data-v-3ea74058] {
  color: #f2f2f2;
}
.color-army-light[data-v-3ea74058] {
  color: #e4d9c7;
}
.color-army-dark[data-v-3ea74058] {
  color: #aba480;
}
.color-army-subtext[data-v-3ea74058] {
  color: #7d8e5c;
}
.color-winter-light[data-v-3ea74058] {
  color: #a6aa9d;
}
.color-winter-dark[data-v-3ea74058] {
  color: #7d8077;
}
.color-army-blue[data-v-3ea74058] {
  color: #01499d;
}
.box-block[data-v-3ea74058] {
  display: block;
}
.box-flex[data-v-3ea74058] {
  display: flex;
}
.box-hide[data-v-3ea74058] {
  display: none;
}
.box-show[data-v-3ea74058] {
  display: inherit;
}
.font-base[data-v-3ea74058] {
  font-family: Yle-Medium, Arial, sans-serif;
}
.font-header[data-v-3ea74058] {
  font-family: Germania One, serif;
}
.font-mono[data-v-3ea74058] {
  font-family: Cutive mono, serif;
}
.gap-top-300[data-v-3ea74058] {
  margin-top: 0.8rem;
}
.gap-top-400[data-v-3ea74058] {
  margin-top: 1rem;
}
.gap-top-500[data-v-3ea74058] {
  margin-top: 1.25rem;
}
.gap-top-600[data-v-3ea74058] {
  margin-top: 1.6rem;
}
.gap-top-700[data-v-3ea74058] {
  margin-top: 2rem;
}
.gap-top-900[data-v-3ea74058] {
  margin-top: 3rem;
}
.gap-right-300[data-v-3ea74058] {
  margin-right: 0.8rem;
}
.gap-right-400[data-v-3ea74058] {
  margin-right: 1rem;
}
.gap-right-500[data-v-3ea74058] {
  margin-right: 1.25rem;
}
.gap-right-600[data-v-3ea74058] {
  margin-right: 1.6rem;
}
.gap-right-700[data-v-3ea74058] {
  margin-right: 2rem;
}
.gap-right-900[data-v-3ea74058] {
  margin-right: 3rem;
}
.gap-bottom-300[data-v-3ea74058] {
  margin-bottom: 0.8rem;
}
.gap-bottom-400[data-v-3ea74058] {
  margin-bottom: 1rem;
}
.gap-bottom-500[data-v-3ea74058] {
  margin-bottom: 1.25rem;
}
.gap-bottom-600[data-v-3ea74058] {
  margin-bottom: 1.6rem;
}
.gap-bottom-700[data-v-3ea74058] {
  margin-bottom: 2rem;
}
.gap-bottom-900[data-v-3ea74058] {
  margin-bottom: 3rem;
}
.gap-left-300[data-v-3ea74058] {
  margin-left: 0.8rem;
}
.gap-left-400[data-v-3ea74058] {
  margin-left: 1rem;
}
.gap-left-500[data-v-3ea74058] {
  margin-left: 1.25rem;
}
.gap-left-600[data-v-3ea74058] {
  margin-left: 1.6rem;
}
.gap-left-700[data-v-3ea74058] {
  margin-left: 2rem;
}
.gap-left-900[data-v-3ea74058] {
  margin-left: 3rem;
}
.pad-top-300[data-v-3ea74058] {
  padding-top: 0.8rem;
}
.pad-top-400[data-v-3ea74058] {
  padding-top: 1rem;
}
.pad-top-500[data-v-3ea74058] {
  padding-top: 1.25rem;
}
.pad-top-600[data-v-3ea74058] {
  padding-top: 1.6rem;
}
.pad-top-700[data-v-3ea74058] {
  padding-top: 2rem;
}
.pad-top-900[data-v-3ea74058] {
  padding-top: 3rem;
}
.pad-right-300[data-v-3ea74058] {
  padding-right: 0.8rem;
}
.pad-right-400[data-v-3ea74058] {
  padding-right: 1rem;
}
.pad-right-500[data-v-3ea74058] {
  padding-right: 1.25rem;
}
.pad-right-600[data-v-3ea74058] {
  padding-right: 1.6rem;
}
.pad-right-700[data-v-3ea74058] {
  padding-right: 2rem;
}
.pad-right-900[data-v-3ea74058] {
  padding-right: 3rem;
}
.pad-bottom-300[data-v-3ea74058] {
  padding-bottom: 0.8rem;
}
.pad-bottom-400[data-v-3ea74058] {
  padding-bottom: 1rem;
}
.pad-bottom-500[data-v-3ea74058] {
  padding-bottom: 1.25rem;
}
.pad-bottom-600[data-v-3ea74058] {
  padding-bottom: 1.6rem;
}
.pad-bottom-700[data-v-3ea74058] {
  padding-bottom: 2rem;
}
.pad-bottom-900[data-v-3ea74058] {
  padding-bottom: 3rem;
}
.pad-left-300[data-v-3ea74058] {
  padding-left: 0.8rem;
}
.pad-left-400[data-v-3ea74058] {
  padding-left: 1rem;
}
.pad-left-500[data-v-3ea74058] {
  padding-left: 1.25rem;
}
.pad-left-600[data-v-3ea74058] {
  padding-left: 1.6rem;
}
.pad-left-700[data-v-3ea74058] {
  padding-left: 2rem;
}
.pad-left-900[data-v-3ea74058] {
  padding-left: 3rem;
}
.stack-300[data-v-3ea74058] {
  z-index: 0;
}
.stack-400[data-v-3ea74058] {
  z-index: 10;
}
.stack-500[data-v-3ea74058] {
  z-index: 20;
}
.stack-600[data-v-3ea74058] {
  z-index: 30;
}
.stack-700[data-v-3ea74058] {
  z-index: 40;
}
.text-300[data-v-3ea74058] {
  font-size: 0.8rem;
}
.text-400[data-v-3ea74058] {
  font-size: 1rem;
}
.text-500[data-v-3ea74058] {
  font-size: 1.25rem;
}
.text-600[data-v-3ea74058] {
  font-size: 1.6rem;
}
.text-700[data-v-3ea74058] {
  font-size: 2rem;
}
.text-900[data-v-3ea74058] {
  font-size: 3rem;
}
.weight-light[data-v-3ea74058] {
  font-weight: 300;
}
.weight-regular[data-v-3ea74058] {
  font-weight: 400;
}
.weight-bold[data-v-3ea74058] {
  font-weight: 700;
}
.width-full[data-v-3ea74058] {
  width: 100%;
}
.width-half[data-v-3ea74058] {
  width: 50%;
}
.width-quarter[data-v-3ea74058] {
  width: 25%;
}
.width-third[data-v-3ea74058] {
  width: 33.33333%;
}
@media screen and (min-width: 22em) {
.smd\:box-block[data-v-3ea74058] {
    display: block;
}
.smd\:box-flex[data-v-3ea74058] {
    display: flex;
}
.smd\:box-hide[data-v-3ea74058] {
    display: none;
}
.smd\:box-show[data-v-3ea74058] {
    display: inherit;
}
.smd\:text-300[data-v-3ea74058] {
    font-size: 0.8rem;
}
.smd\:text-400[data-v-3ea74058] {
    font-size: 1rem;
}
.smd\:text-500[data-v-3ea74058] {
    font-size: 1.25rem;
}
.smd\:text-600[data-v-3ea74058] {
    font-size: 1.6rem;
}
.smd\:text-700[data-v-3ea74058] {
    font-size: 2rem;
}
.smd\:text-900[data-v-3ea74058] {
    font-size: 3rem;
}
.smd\:width-full[data-v-3ea74058] {
    width: 100%;
}
.smd\:width-half[data-v-3ea74058] {
    width: 50%;
}
.smd\:width-quarter[data-v-3ea74058] {
    width: 25%;
}
.smd\:width-third[data-v-3ea74058] {
    width: 33.33333%;
}
}
@media screen and (min-width: 36em) {
.sm\:box-block[data-v-3ea74058] {
    display: block;
}
.sm\:box-flex[data-v-3ea74058] {
    display: flex;
}
.sm\:box-hide[data-v-3ea74058] {
    display: none;
}
.sm\:box-show[data-v-3ea74058] {
    display: inherit;
}
.sm\:text-300[data-v-3ea74058] {
    font-size: 0.8rem;
}
.sm\:text-400[data-v-3ea74058] {
    font-size: 1rem;
}
.sm\:text-500[data-v-3ea74058] {
    font-size: 1.25rem;
}
.sm\:text-600[data-v-3ea74058] {
    font-size: 1.6rem;
}
.sm\:text-700[data-v-3ea74058] {
    font-size: 2rem;
}
.sm\:text-900[data-v-3ea74058] {
    font-size: 3rem;
}
.sm\:width-full[data-v-3ea74058] {
    width: 100%;
}
.sm\:width-half[data-v-3ea74058] {
    width: 50%;
}
.sm\:width-quarter[data-v-3ea74058] {
    width: 25%;
}
.sm\:width-third[data-v-3ea74058] {
    width: 33.33333%;
}
}
@media screen and (min-width: 48em) {
.md\:box-block[data-v-3ea74058] {
    display: block;
}
.md\:box-flex[data-v-3ea74058] {
    display: flex;
}
.md\:box-hide[data-v-3ea74058] {
    display: none;
}
.md\:box-show[data-v-3ea74058] {
    display: inherit;
}
.md\:text-300[data-v-3ea74058] {
    font-size: 0.8rem;
}
.md\:text-400[data-v-3ea74058] {
    font-size: 1rem;
}
.md\:text-500[data-v-3ea74058] {
    font-size: 1.25rem;
}
.md\:text-600[data-v-3ea74058] {
    font-size: 1.6rem;
}
.md\:text-700[data-v-3ea74058] {
    font-size: 2rem;
}
.md\:text-900[data-v-3ea74058] {
    font-size: 3rem;
}
.md\:width-full[data-v-3ea74058] {
    width: 100%;
}
.md\:width-half[data-v-3ea74058] {
    width: 50%;
}
.md\:width-quarter[data-v-3ea74058] {
    width: 25%;
}
.md\:width-third[data-v-3ea74058] {
    width: 33.33333%;
}
}
@media screen and (min-width: 62em) {
.lg\:box-block[data-v-3ea74058] {
    display: block;
}
.lg\:box-flex[data-v-3ea74058] {
    display: flex;
}
.lg\:box-hide[data-v-3ea74058] {
    display: none;
}
.lg\:box-show[data-v-3ea74058] {
    display: inherit;
}
.lg\:text-300[data-v-3ea74058] {
    font-size: 0.8rem;
}
.lg\:text-400[data-v-3ea74058] {
    font-size: 1rem;
}
.lg\:text-500[data-v-3ea74058] {
    font-size: 1.25rem;
}
.lg\:text-600[data-v-3ea74058] {
    font-size: 1.6rem;
}
.lg\:text-700[data-v-3ea74058] {
    font-size: 2rem;
}
.lg\:text-900[data-v-3ea74058] {
    font-size: 3rem;
}
.lg\:width-full[data-v-3ea74058] {
    width: 100%;
}
.lg\:width-half[data-v-3ea74058] {
    width: 50%;
}
.lg\:width-quarter[data-v-3ea74058] {
    width: 25%;
}
.lg\:width-third[data-v-3ea74058] {
    width: 33.33333%;
}
}
img[data-v-3ea74058] {
  width: 100vw;
}


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