@import url(https://design-system.cdn.yle.fi/fonts/fonts.css);
/* @import url('https://fonts.googleapis.com/css2?family=Calistoga&display=swap'); Calistoga */
/* @import url('https://fonts.googleapis.com/css2?family=Seaweed+Script&display=swap'); Seaweed Script */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap'); Open Sans */
@font-face {
  font-family: "Calistoga";
  src: url(//deski.yle.fi/2020-04-hyonteishotelli/fonts/da3c17f39ff73861392488cc82eadd0c.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Seaweed Script";
  src: url(//deski.yle.fi/2020-04-hyonteishotelli/fonts/cef2cfe035717c75345666eb9d8fe930.ttf) format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url(//deski.yle.fi/2020-04-hyonteishotelli/fonts/78609089d3dad36318ae0190321e6f3e.ttf) format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url(//deski.yle.fi/2020-04-hyonteishotelli/fonts/31d95e96058490552ea28f732456d002.ttf) format("truetype");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}
/* ------ Project related styles ------ */
body {
  margin: 0;
}

html {
  background-color: white;
}

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

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

.yle__footer {
  z-index: 1;
}

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

/* .yle__footer {
  display: none;
} */
.yle-header-ad {
  display: none;
}

/* html #app .yle__app, body #app .yle__app {
  padding-bottom: 0;
} */
.inner-loader-wrapper[data-v-375f125f] {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #f4f3e4;
  transition: 0.5s;
  z-index: 140;
}
.inner-loader-wrapper > p[data-v-375f125f] {
  text-align: left;
  width: 195px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Calistoga", "Yle Next", cursive;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.3;
}
.hidden[data-v-375f125f] {
  visibility: hidden;
  opacity: 0;
}
div[data-v-730ab9ea] {
  position: absolute;
  width: 30%;
  height: 100%;
  margin: 0 auto;
  top: 0;
  left: 35%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: repeat-y;
}
@media (max-width: 800px) {
div[data-v-730ab9ea] {
    width: 40%;
    left: -2%;
}
}
.outer-bug-wrapper[data-v-e72e22e4] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-e72e22e4] {
  position: absolute;
  animation: fly-data-v-e72e22e4 0.8s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .body[data-v-e72e22e4] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@keyframes fly-data-v-e72e22e4 {
0% {
    transform: translate(0, 0);
}
50% {
    transform: translate(0, -5px);
}
100% {
    transform: translate(0, 0);
}
}
@keyframes wing_r-data-v-e72e22e4 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(0, 0) rotate(-4deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-e72e22e4 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(0, 0) rotate(4deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-e72e22e4] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-e72e22e4 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-e72e22e4] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-e72e22e4 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-bug-wrapper[data-v-062e4c8a] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-062e4c8a] {
  position: absolute;
  animation: fly-data-v-062e4c8a 1s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .body[data-v-062e4c8a] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@keyframes fly-data-v-062e4c8a {
0% {
    transform: translate(0, 0);
}
50% {
    transform: translate(0, -10px);
}
100% {
    transform: translate(0, 0);
}
}
@keyframes wing_r-data-v-062e4c8a {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(0, 0) rotate(-4deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-062e4c8a {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(0, 0) rotate(4deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-062e4c8a] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-062e4c8a 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-062e4c8a] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-062e4c8a 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-bug-wrapper[data-v-f2494034] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-f2494034] {
  position: absolute;
  animation: fly-data-v-f2494034 0.9s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .body[data-v-f2494034] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@keyframes fly-data-v-f2494034 {
0% {
    transform: translate(0, 0);
}
50% {
    transform: translate(0, -6px);
}
100% {
    transform: translate(0, 0);
}
}
@keyframes wing_r-data-v-f2494034 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(0, 0) rotate(-4deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-f2494034 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(0, 0) rotate(4deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-f2494034] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-f2494034 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-f2494034] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-f2494034 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-landing-wrapper[data-v-a07e830a] {
  width: 100%;
}
.inner-landing-wrapper[data-v-a07e830a] {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  transform: translate(0, 0);
}
.animation-wrapper[data-v-a07e830a] {
  background-color: transparent;
  margin: 0 auto;
  padding: 30px 0 20px 0;
}
.flying-bug-wrapper[data-v-a07e830a] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.outer-bug-wrapper[data-v-03df009f] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-03df009f] {
  position: absolute;
}
.inner-bug-wrapper > .body[data-v-03df009f] {
  width: 100%;
}
@keyframes wing_r-data-v-03df009f {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(3px, 3px) rotate(-8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-03df009f {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(-3px, 3px) rotate(8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-03df009f] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-03df009f 0.2s infinite;
  animation-delay: 0.5s;
}
.inner-bug-wrapper > .wing-l[data-v-03df009f] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-03df009f 0.2s infinite;
  animation-delay: 0.5s;
}
.outer-roof-wrapper[data-v-15b43c20] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-15b43c20] {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
  transform: translate(0, 0);
}
@media (max-width: 1400px) {
.inner-roof-wrapper[data-v-15b43c20] {
    max-width: none;
    width: 100%;
    transform: translate(0, 0);
}
}
@media (max-width: 1000px) {
.inner-roof-wrapper[data-v-15b43c20] {
    width: 120%;
    transform: translate(-8%, 0);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-15b43c20] {
    width: 200%;
    transform: translate(-45%, 0);
}
}
.inner-roof-wrapper > img[data-v-15b43c20] {
  width: 100%;
}
.outer-text-wrapper[data-v-67e1dd98] {
  width: 100%;
  padding: 20px 0;
}
@media (max-width: 500px) {
.outer-text-wrapper[data-v-67e1dd98] {
    padding: 30px 0;
}
}
@media (max-width: 400px) {
.outer-text-wrapper[data-v-67e1dd98] {
    padding: 40px 0 30px 0;
}
}
.inner-text-wrapper[data-v-67e1dd98] {
  max-width: 800px;
  margin: 0 auto;
  padding: 1px 0;
  background-color: #241f12;
  transform: translate(0, 0);
}
@media (max-width: 860px) {
.inner-text-wrapper[data-v-67e1dd98] {
    max-width: none;
    width: 94%;
    margin: 0 3%;
}
}
.inner-text-wrapper > .content[data-v-67e1dd98] {
  margin: 25px;
  padding: 20px 3%;
  background-color: #f4f3e4;
  transform: translate(0, 0);
}
@media (max-width: 600px) {
.inner-text-wrapper > .content[data-v-67e1dd98] {
    margin: 15px;
}
}
@media (max-width: 400px) {
.inner-text-wrapper > .content[data-v-67e1dd98] {
    margin: 10px;
}
}
.inner-text-wrapper > .content > .portrait-wrapper[data-v-67e1dd98] {
  position: relative;
  max-width: 250px;
  height: 250px;
  margin: 0 auto;
}
.inner-text-wrapper > .content > .portrait-wrapper > img[data-v-67e1dd98] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate(0, -90px);
}
@media (max-width: 600px) {
.inner-text-wrapper > .content > .portrait-wrapper > img[data-v-67e1dd98] {
    transform: translate(0, -90px);
}
}
.inner-text-wrapper > .content > h2[data-v-67e1dd98] {
  font-family: "Calistoga", "Yle Next", cursive;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin: 0;
  padding: 0;
  hyphens: manual;
  color: #241f12;
}
.inner-text-wrapper > .content > h3[data-v-67e1dd98] {
  font-family: "Seaweed Script", "Yle Next", cursive;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 30px 0;
  padding: 10px 0 20px 0;
  color: #5d9088;
  background-image: linear-gradient(to right, #241f12 20%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 5px 1px;
  background-repeat: repeat-x;
}
.inner-text-wrapper > .content > p[data-v-67e1dd98] {
  font-family: "Open Sans", "Yle Next", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  padding: 0 0 0.85em 0;
  color: black;
}
.inner-text-wrapper > .content > p[data-v-67e1dd98]  span {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  color: #5d9088;
}
.inner-text-wrapper > .content > p[data-v-67e1dd98]  strong {
  font-weight: 700;
}
.inner-text-wrapper > .content > p[data-v-67e1dd98]  a {
  color: #5d9088;
  text-decoration: none;
}
.outer-bug-wrapper[data-v-c8115812] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-c8115812] {
  position: absolute;
}
.inner-bug-wrapper > .body[data-v-c8115812] {
  width: 100%;
}
@keyframes wing_r-data-v-c8115812 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(5px, 3px) rotate(-8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-c8115812 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(-5px, 3px) rotate(8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-c8115812] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-c8115812 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-c8115812] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-c8115812 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-roof-wrapper[data-v-d4e7291e] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-d4e7291e] {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
  transform: translate(0, 0);
}
@media (max-width: 1400px) {
.inner-roof-wrapper[data-v-d4e7291e] {
    max-width: none;
    width: 100%;
    transform: translate(0, 0);
}
}
@media (max-width: 1000px) {
.inner-roof-wrapper[data-v-d4e7291e] {
    width: 120%;
    transform: translate(-8%, 0);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-d4e7291e] {
    width: 200%;
    transform: translate(-45%, 0);
}
}
.inner-roof-wrapper > img[data-v-d4e7291e] {
  width: 100%;
}
.outer-bug-wrapper[data-v-7675262c] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-7675262c] {
  position: absolute;
}
.inner-bug-wrapper > .body[data-v-7675262c] {
  width: 100%;
}
@keyframes wing_r-data-v-7675262c {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(3px, 2px) rotate(-8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-7675262c {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(-3px, 2px) rotate(8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-7675262c] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-7675262c 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-7675262c] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-7675262c 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-roof-wrapper[data-v-d4cafa1c] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-d4cafa1c] {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
  transform: translate(0, 0);
}
@media (max-width: 1400px) {
.inner-roof-wrapper[data-v-d4cafa1c] {
    max-width: none;
    width: 100%;
    transform: translate(0, 0);
}
}
@media (max-width: 1000px) {
.inner-roof-wrapper[data-v-d4cafa1c] {
    width: 120%;
    transform: translate(-8%, 0);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-d4cafa1c] {
    width: 200%;
    transform: translate(-45%, 0);
}
}
.inner-roof-wrapper > img[data-v-d4cafa1c] {
  width: 100%;
}
.outer-bug-wrapper[data-v-33f88e90] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-33f88e90] {
  position: absolute;
}
.inner-bug-wrapper > .body[data-v-33f88e90] {
  width: 100%;
}
@keyframes wing_r-data-v-33f88e90 {
0% {
    transform: translate(0, 0) rotate(0);
}
40% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(3px, 2px) rotate(-8deg);
}
60% {
    transform: translate(0, 0) rotate(0);
}
70% {
    transform: translate(3px, 2px) rotate(-8deg);
}
80% {
    transform: translate(0, 0) rotate(0);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-33f88e90 {
0% {
    transform: translate(0, 0) rotate(0);
}
40% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(-3px, 2px) rotate(8deg);
}
60% {
    transform: translate(0, 0) rotate(0);
}
70% {
    transform: translate(-3px, 2px) rotate(8deg);
}
80% {
    transform: translate(0, 0) rotate(0);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-33f88e90] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-33f88e90 1s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-33f88e90] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-33f88e90 1s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-roof-wrapper[data-v-d4aecb1a] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-d4aecb1a] {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
  transform: translate(0, 0);
}
@media (max-width: 1400px) {
.inner-roof-wrapper[data-v-d4aecb1a] {
    max-width: none;
    width: 100%;
    transform: translate(0, 0);
}
}
@media (max-width: 1000px) {
.inner-roof-wrapper[data-v-d4aecb1a] {
    width: 120%;
    transform: translate(-8%, 0);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-d4aecb1a] {
    width: 200%;
    transform: translate(-45%, 0);
}
}
.inner-roof-wrapper > img[data-v-d4aecb1a] {
  width: 100%;
}
.outer-bug-wrapper[data-v-be73dce8] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-be73dce8] {
  position: absolute;
}
.inner-bug-wrapper > .body[data-v-be73dce8] {
  width: 100%;
}
@keyframes wing_r-data-v-be73dce8 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(2px, 2px) rotate(-5deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-be73dce8 {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(-2px, 2px) rotate(5deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-be73dce8] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-be73dce8 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-be73dce8] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-be73dce8 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-roof-wrapper[data-v-d4929c18] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-d4929c18] {
  max-width: 1400px;
  margin: 0 auto;
  background-color: transparent;
  transform: translate(0, 0);
}
@media (max-width: 1400px) {
.inner-roof-wrapper[data-v-d4929c18] {
    max-width: none;
    width: 100%;
    transform: translate(0, 0);
}
}
@media (max-width: 1000px) {
.inner-roof-wrapper[data-v-d4929c18] {
    width: 120%;
    transform: translate(-8%, 0);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-d4929c18] {
    width: 200%;
    transform: translate(-45%, 0);
}
}
.inner-roof-wrapper > img[data-v-d4929c18] {
  width: 100%;
}
.outer-bug-wrapper[data-v-44dbbb6b] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.inner-bug-wrapper[data-v-44dbbb6b] {
  position: absolute;
}
.inner-bug-wrapper > .body[data-v-44dbbb6b] {
  width: 100%;
}
@keyframes wing_r-data-v-44dbbb6b {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(4px, 2px) rotate(-8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
@keyframes wing_l-data-v-44dbbb6b {
0% {
    transform: translate(0, 0) rotate(0);
}
50% {
    transform: translate(-4px, 2px) rotate(8deg);
}
100% {
    transform: translate(0, 0) rotate(0);
}
}
.inner-bug-wrapper > .wing-r[data-v-44dbbb6b] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_r-data-v-44dbbb6b 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.inner-bug-wrapper > .wing-l[data-v-44dbbb6b] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: wing_l-data-v-44dbbb6b 0.2s infinite;
  animation-delay: 0.5s;
  animation-play-state: paused;
}
.outer-roof-wrapper[data-v-d4766d16] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-d4766d16] {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  background-color: transparent;
  transform: translate(0, 0);
}
@media (max-width: 1400px) {
.inner-roof-wrapper[data-v-d4766d16] {
    max-width: none;
    width: 100%;
    transform: translate(0, 0);
}
}
@media (max-width: 1000px) {
.inner-roof-wrapper[data-v-d4766d16] {
    width: 120%;
    transform: translate(-8%, 0);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-d4766d16] {
    width: 200%;
    transform: translate(-45%, 0);
}
}
.inner-roof-wrapper > img[data-v-d4766d16] {
  width: 100%;
}
@charset "UTF-8";
.outer-text-wrapper[data-v-efbe295a] {
  width: 100%;
  padding: 20px 0;
}
@media (max-width: 500px) {
.outer-text-wrapper[data-v-efbe295a] {
    padding: 30px 0;
}
}
@media (max-width: 400px) {
.outer-text-wrapper[data-v-efbe295a] {
    padding: 40px 0 30px 0;
}
}
.inner-text-wrapper[data-v-efbe295a] {
  max-width: 800px;
  margin: 0 auto;
  padding: 1px 0;
  background-color: #241f12;
  transform: translate(0, 0);
}
@media (max-width: 860px) {
.inner-text-wrapper[data-v-efbe295a] {
    max-width: none;
    width: 94%;
    margin: 0 3%;
}
}

/* ------ Valonauhat ------ */
.inner-text-wrapper > svg[data-v-efbe295a] {
  height: 30px;
  width: 305px;
}
@media (max-width: 600px) {
.inner-text-wrapper > svg[data-v-efbe295a] {
    height: 20px;
}
}
@media (max-width: 400px) {
.inner-text-wrapper > svg[data-v-efbe295a] {
    width: 260px;
}
}
.inner-text-wrapper > .top-lights[data-v-efbe295a] {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.inner-text-wrapper > .bottom-lights[data-v-efbe295a] {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.inner-text-wrapper > svg > circle[data-v-efbe295a] {
  fill: #a1beb9;
  stroke: #241f12;
  stroke-width: 5px;
}

/* ------ Tekstisisältö ------ */
.inner-text-wrapper > .content[data-v-efbe295a] {
  margin: 30px;
  padding: 20px 3% 10px 3%;
  background-color: #e6d9b2;
  transform: translate(0, 0);
}
@media (max-width: 600px) {
.inner-text-wrapper > .content[data-v-efbe295a] {
    margin: 20px;
}
}
@media (max-width: 400px) {
.inner-text-wrapper > .content[data-v-efbe295a] {
    margin: 20px 15px 20px 15px;
}
}
.inner-text-wrapper > .content > p[data-v-efbe295a] {
  font-family: "Seaweed Script", "Yle Next", cursive;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  padding: 0 0 0.85em 0;
}
@media (max-width: 800px) {
.inner-text-wrapper > .content > p[data-v-efbe295a] {
    font-size: 26px;
}
}
div[data-v-5e2f0fd6] {
  text-align: center;
  padding: 50px 0 0 0;
}
.outer-roof-wrapper[data-v-a26d25cc] {
  width: 100%;
  overflow: hidden;
}
.inner-roof-wrapper[data-v-a26d25cc] {
  position: relative;
  width: 100%;
  margin: 20% 0 0 0;
  background: linear-gradient(#84722d, #513d2d);
  transform: translate(0, 0);
}
@media (max-width: 800px) {
.inner-roof-wrapper[data-v-a26d25cc] {
    margin: 25% 0 0 0;
}
}
@media (max-width: 400px) {
.inner-roof-wrapper[data-v-a26d25cc] {
    margin: 30% 0 0 0;
}
}
.grass-wrapper[data-v-a26d25cc] {
  position: relative;
  width: 100%;
}
.inner-roof-wrapper > .grass-wrapper > .grass[data-v-a26d25cc] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate(0, -50%);
  z-index: 2;
}
@media (max-width: 1000px) {
.inner-roof-wrapper > .grass-wrapper > .grass[data-v-a26d25cc] {
    width: 125%;
    transform: translate(-10%, -50%);
}
}
@media (max-width: 800px) {
.inner-roof-wrapper > .grass-wrapper > .grass[data-v-a26d25cc] {
    width: 150%;
    transform: translate(-20%, -50%);
}
}
@media (max-width: 650px) {
.inner-roof-wrapper > .grass-wrapper > .grass[data-v-a26d25cc] {
    width: 170%;
    transform: translate(-30%, -50%);
}
}
@media (max-width: 400px) {
.inner-roof-wrapper > .grass-wrapper > .grass[data-v-a26d25cc] {
    width: 200%;
    transform: translate(-40%, -50%);
}
}
.inner-roof-wrapper > .tree-wrapper[data-v-a26d25cc] {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 30%;
  margin: 0;
  padding: 0 0 40px 0;
  z-index: -1;
}
@media (max-width: 800px) {
.inner-roof-wrapper > .tree-wrapper[data-v-a26d25cc] {
    width: 40%;
    left: 0;
    transform: translate(-4%, 0);
}
}
.inner-roof-wrapper > .tree-wrapper > .tree[data-v-a26d25cc] {
  width: 100%;
}
.inner-roof-wrapper > .authors-wrapper[data-v-a26d25cc] {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 15% 0 10% 0;
}
@media (max-width: 1000px) {
.inner-roof-wrapper > .authors-wrapper[data-v-a26d25cc] {
    padding: 20% 0 80px 0;
}
}
@media (max-width: 800px) {
.inner-roof-wrapper > .authors-wrapper[data-v-a26d25cc] {
    padding: 25% 0 80px 0;
}
}
@media (max-width: 650px) {
.inner-roof-wrapper > .authors-wrapper[data-v-a26d25cc] {
    padding: 27% 0 60px 0;
}
}
@media (max-width: 400px) {
.inner-roof-wrapper > .authors-wrapper[data-v-a26d25cc] {
    padding: 30% 0 60px 0;
}
}
@media (max-width: 350px) {
.inner-roof-wrapper > .authors-wrapper[data-v-a26d25cc] {
    padding: 30% 0 90px 0;
}
}
.inner-roof-wrapper > .authors-wrapper > h2[data-v-a26d25cc] {
  font-family: "Calistoga", "Yle Next", cursive;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin: 0;
  padding: 0 0 20px 0;
  hyphens: manual;
  color: #f4f3e4;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
}
.inner-roof-wrapper > .authors-wrapper > h4[data-v-a26d25cc] {
  font-family: "Calistoga", "Yle Next", cursive;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin: 0;
  padding: 0 0 5px 0;
  color: #e1cb82;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
}
.inner-roof-wrapper > .authors-wrapper > p[data-v-a26d25cc] {
  font-family: "Open Sans", "Yle Next", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  padding: 0 0 15px 0;
  color: #f4f3e4;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
}
.inner-roof-wrapper > .authors-wrapper > .date[data-v-a26d25cc] {
  font-family: "Calistoga", "Yle Next", cursive;
  font-size: 26px;
  padding: 30px 0 15px 0;
}
.inner-roof-wrapper > .authors-wrapper > .date > span[data-v-a26d25cc] {
  color: #e1cb82;
}
.inner-roof-wrapper > .authors-wrapper > .feedback[data-v-a26d25cc] {
  margin: 40px 0 0 0;
}
.inner-roof-wrapper > .authors-wrapper > .feedback > a[data-v-a26d25cc] {
  font-family: "Calistoga", "Yle Next", cursive;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.45;
  padding: 10px 30px;
  border: 5px solid #241f12;
  border-radius: 30px;
  text-decoration: none;
  background-color: #f4f3e4;
  color: #241f12;
  box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.4);
}
@media (max-width: 400px) {
.inner-roof-wrapper > .authors-wrapper > .feedback > a[data-v-a26d25cc] {
    font-size: 20px;
}
}
figure[data-v-3ea74058] {
  position: relative;
  margin: 0;
  background: linear-gradient(#81d2db, #a9e2ed, #d7f3f1);
}

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