body {
      background-image: url("taustakuva2.webp");
      background-attachment: fixed;
      background-size: cover;
      background-size: 100%;
      background-color: #232323;
      height: 100vh;
    }
    h1.logo {
    padding-bottom: 10px;
    padding-top: 15px;
    font-size: 50px;
    }
    h1.logo,
    .teksti4 p {
    text-align: center;
    color: #000080;
    text-shadow: 0 0 10px #f4f7f8, 0 0 10px #81d2f5, 0 0 15px #1c6ea4,
    0 0 20px #1c6ea4, 0 0 30px #1c6ea4, 0 0 40px #1c6ea4, 0 0 55px #1c6ea4,
    0 0 75px #fafcfd;
    }
    .teksti7 {
    vertical-align: middle;
    transform: scaleX(-1);
    }
   .logo_kuva {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 200px;
   height: auto;
   border-radius: 10%;
   opacity: 0.8;
   }
   .teksti4 p {
   margin-bottom: 10px;
   margin-top: 10px;
   padding: 10px;
   font-size: 40px;
   font-weight: 700;
   } 
   ul.lista {
   border-radius: 10px;
   background: rgba(6, 121, 237, 0.8);
   font-size: 20px;
   padding: 8px 16px;
   list-style: none;
   text-align: center;
   }
   ul.lista li {
   display: inline;
   opacity: 1;
   }
   ul.lista li + li:before {
   padding: 8px;
   color: rgb(255, 255, 255);
   text-shadow: 2px 2px black;
   content: "/\00a0";
   }
   ul.lista li {
   color: #000080;
   opacity: 1;
   }
   li.linkit a {
   color: #f4f7f8;
   opacity: 1;
   text-shadow: 2px 2px black;
   }
   a:link,
   a:active,
   a:visited {
   text-decoration: none;
   color: #000080;
   }
   a:hover {
   text-decoration: underline;
   }
  @media screen and (max-width: 770px) {
    p.teksti4 {
      font-size: 25px;
    }
  }

.tagi  {
    color: #f4f7f8;
    /*color: rgba(6, 121, 237, 0);*/
    text-align: center;
    /*font-size: 25px;*/
}
.tags p {
    color: rgba(6, 121, 237, 0);
}
h2,
h3,
h5 {
  color: #000080;
  text-decoration: none;
  font-size: 30px;
  text-align: center;
  text-shadow: 0 0 10px #f4f7f8, 0 0 10px #81d2f5, 0 0 15px #1c6ea4,
    0 0 20px #1c6ea4, 0 0 30px #1c6ea4, 0 0 40px #1c6ea4, 0 0 55px #1c6ea4,
    0 0 75px #fafcfd;
}
h2 {
    font-weight: 700;
    padding-top: 40px;
}
h3,
h5 {
  font-weight: 700;
}
div.teksti,
.teksti2,
.teksti_face,
.teksti_ig {
  border-radius: 10px;
  margin: auto;
  margin-top: 25px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.9;
  text-align: center;
  max-width: 600px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
div.teksti1 h5 {
    padding: auto;
    padding-bottom: 10px;
    margin: auto;
} 
img.teksti3 {
    vertical-align: middle;
    margin-right: 5px;
}
.kartta {
  width: 90%;
  height: 90%;
}
div.teksti p
{
  color: #000000;
  font-weight: 600;
  /*margin: 5%;*/
  text-align: center;
}
div.palvelut,
.teksti_face
{
  display: flex;
  justify-content: center;
}
div.palvelut h4 {
  color: #000080;
  font-size: 33px;
  font-weight: 700;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  text-shadow: 0 0 10px #f4f7f8, 0 0 10px #81d2f5, 0 0 15px #1c6ea4,
    0 0 20px #1c6ea4, 0 0 30px #1c6ea4, 0 0 40px #1c6ea4, 0 0 55px #1c6ea4,
    0 0 75px #fafcfd;
}
div.osoite {
  border-radius: 10px;
  background: rgba(6, 121, 237, 0.8);
  border: 1px solid black;
  width: 400px;
  height: 175px;
  margin: auto;
  margin-bottom: 25px;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  text-align: center;
}
div.osoite h5 {
  justify-content: center;
  margin: auto;
  text-align: center;
}
div.info1,
div.info2,
div.info3 {
  border-radius: 10px;
  border: 1px solid black;
  background: rgba(6, 121, 237, 0.8);
  width: 400px;
  height: 175px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: 25px;
  display: flex;
  text-align: center;
  justify-content: center;
}
div.info1 a,
div.info2 a,
div.info3 a {
  font-size: 20px;
  font-weight: 700;
  color: #000080;
  text-shadow: 0 0 10px #f4f7f8, 0 0 10px #81d2f5, 0 0 15px #1c6ea4,
    0 0 20px #1c6ea4, 0 0 30px #1c6ea4, 0 0 40px #1c6ea4, 0 0 55px #1c6ea4,
    0 0 75px #fafcfd;
}
div.info1 h6,
div.info2 h6,
div.info3 h6 {
  margin: auto;
  font-size: 33px;
  font-weight: 700;
  margin-top: 25px;
  color: #000080;
  text-shadow: 0 0 10px #f4f7f8, 0 0 10px #81d2f5, 0 0 15px #1c6ea4,
    0 0 20px #1c6ea4, 0 0 30px #1c6ea4, 0 0 40px #1c6ea4, 0 0 55px #1c6ea4,
    0 0 75px #fafcfd;
}
div.ekakuva {
    margin-bottom: 30px;
    margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
img.etusivu {
    border: 1px solid black;
    border-radius: 15px;
  width: 300px;
  height: auto;
  margin-bottom: 30px;
}
.teksti1 {
  font-size: 40px;
  color: #000080;
  text-align: center;
}
.page-wrapper {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* The flex containers 1-2 */
.flex-container1 {
  display: flex;
  /* Default direction is a row for PC */
  flex-direction: row;
  width: 90%;
  max-width:900px;
  height: 20em;
  gap: 20px; /* Space between the items */
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  background: rgba(6, 121, 237, 0);
}
.flex-container2 {
  display: flex;
  /* Default direction is a row for PC */
  flex-direction: row;
  width: 90%;
  max-width:1200px;
  height: 20em;
  gap: 20px; /* Space between the items */
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 60px;
  background: rgba(6, 121, 237, 0);
}
/*Alareunan banneri uusi*/
.flex-container3 {
  display: flex;
  /* Default direction is a row for PC screens */
  flex-direction: row;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  height: 6em;
  gap: 5px; /* Space between the items */
  margin-top: 60px;
  background: rgba(6, 121, 237, 0.9);
}
.flex-item1,
.flex-item2,
.flex-item3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  border-radius: 8px;
  background: rgba(6, 121, 237, 0.8);
}
/* For the individual flex items */
.flex-item1 {
  max-width: 200px;
  padding: 20px 20px;
  margin-left: 50px;
  text-align: center;
}
.flex-item2 {
  min-width: 180px;
  max-width: 220px;
  padding: 20px 20px;
  text-align: center;
}
.flex-item3 {
  min-width: 175px;
  max-width: 500px;
  padding: 5px 5px;
}

.flex-item4 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 33%;
  flex: 1;
  padding: 5px;
  border-radius: 8px;
  font-size: 25px;
}
.footer,
.footer2 {
  color: #000080;
  font-weight: 700;
  text-shadow: 0 0 10px #f4f7f8, 0 0 10px #81d2f5, 0 0 15px #1c6ea4,
    0 0 20px #1c6ea4, 0 0 30px #1c6ea4, 0 0 40px #1c6ea4, 0 0 55px #1c6ea4,
    0 0 75px #fafcfd;
}
.footer2 {
  font-size: 10px;
}
.teksti6 {
    vertical-align: middle;
 }
 @media screen and (max-width: 770px)
 {
  .div.teksti2 {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
  }
 .teksti2 h5 {
      margin-bottom: 20px;
      margin-top: 15px;
  }
  p.teksti8 {
      font-size: "16px";
  }
  .info1,
  .info2,
  .info3 {
    padding-bottom: 10px;
    padding: auto;
    max-width: 100%;
  }
  .kartta {
    width: 100%;
  }
  .flex-container1,
  .flex-container2,
  .flex-container3 {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .flex-container1 {
    margin-top: 90px;
    margin-bottom: 80px;
    padding-bottom: 50px;
    flex: 1 1 100%;
    width: 400px;
  }
  .flex-container2 {
    margin: auto;
    margin-top: 20px;
    margin-bottom: 50px; 
    padding-bottom: 50px;
    max-width: 400px;
  }
  .flex-container3 {
   /* margin-top: 50px; */
    margin: auto;
    padding-bottom: 20px;
    height: 27em;
    max-width: 400px;
  }
  .flex-item4 {
    min-width: 200px;
    /*max-height: 8em;*/
    flex: 1 1 100%; 
    padding-bottom: 5px;
    margin:auto;
    padding: auto;
    max-width: 400px;
  }
 .teksti6 {
    vertical-align: middle;
 }
  .flex-item1,
  .flex-item2 {
    min-width: 350px;
    max-height: 8em;
    /*flex: 1 1 100%;*/
    margin-bottom: 10px;
    width: 450px;
    margin: auto;
  }
  .flex-item3 {
    min-height: 20em;
    flex: 1 1 100%;
    min-width: 300px;
    width: 380px;
    margin-bottom: 50px;
    margin: auto;
    /*flex: 1 1 100%;*/
  }
}