html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background-color: #3F77B8;
  display: flex; justify-content: center; align-items: center;
}

.sivusto {
  width: 80vw; height: 62vw;
  max-width: 590px; max-height: 460px;
  position: relative; background-color: transparent;
}

.teksti-nakyma { display: none; width: 100%; height: 100%; position: relative;}
.kartta-nakyma { display: block; width: 100%; height: 100%; position: relative; }

.kartta {
  position: absolute; right: 0; width: 100%; height: 100%;
  background: url('suomi.png') no-repeat right bottom;
  background-size: contain;
}

.otsikko {
  position: absolute; top: -10%; left: -5%;
  transform: translate(0, 0);
  font-family: Arial; font-size: 18px; font-weight: bold;
  letter-spacing: 10px; color: #fff;
}

.jussi {
  position: absolute; bottom: -10%; left: 12%;
  height: 100%; width: auto; z-index: 2;
}

.symboli {
  position: absolute; width: 10%; height: 10%;
  background: center / contain no-repeat; z-index: 1;
}

.saaboksi { margin-top: 30px; text-align: left; }
.boksi {
  padding:5px;
  display: inline-block;
  vertical-align: middle;
}
.citi { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 5px; }

.teksti-liuku {
  padding: 5px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: white;
  text-align: left;
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
  animation: yles 20s linear forwards;
}

@keyframes yles {
  from { transform: translateY(50vh); }
  to { transform: translateY(-200vh); }
}

@media (max-width: 768px) { 
  .element {
    animation: yles 15s linear forwards; 
  }
}


.symboli.ivalo { top: 12%; left: 82%; }
.symboli.kilpisjarvi { top: 15%; left: 65%; }
.symboli.oulu { top: 47%; left: 74%; }
.symboli.rovaniemi { top: 36%; left: 75%; }
.symboli.kajaani { top: 55%; left: 82%; }
.symboli.vaasa { top: 68%; left: 65%; }
.symboli.joensuu { top: 75%; left: 84%; }
.symboli.maarianhamina { top: 88%; left: 62%; }
.symboli.helsinki { top: 88%; left: 73%; }

@media (max-width: 480px) {
  .teksti-grid {
    margin-top: 0px;

    font-size: 12px; 
    text-align: center; 
  }

  .teksti-grid .kaupunki {
    margin-bottom: 5px; 
  }
}