@charset "UTF-8";
/* LESS */
@import url("normalize.css");
@font-face {
  font-family: "Overpass";
  src: local("Overpass"), url("fonts/overpass-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Overpass";
  font-weight: bold;
  src: local("Overpass"), url("fonts/overpass-bold.ttf") format("truetype");
}
@font-face {
  font-family: "Overpass";
  font-style: italic;
  src: local("Overpass"), url("fonts/overpass-italic.ttf") format("truetype");
}
@font-face {
  font-family: "Quicksand";
  src: local("Quicksand"), url("fonts/quicksand.ttf") format("truetype");
}
/* MIXINS */
/* Pääväri */
/* Toinen pääväri */
/* Tekstin väri */
/* Negatekstin väri */
/* Taustan väri */
/* Leipäfontti */
/* Otsikkofontti */
/* Sivuilla oleva yleinen väli */
/* Ylhäällä ja alhaalla oleva yleinen väli */
/* Ylhäällä ja alhaalla oleva isompi väli */
/* Ylhäällä ja alhaalla oleva isoin väli */
/* Omat tyylit tähän */
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Overpass", sans-serif;
  color: #333333;
  font-size: 14px;
}
h1,
h2,
h3,
.nosto {
  font-family: "Quicksand", sans-serif;
  text-align: center;
  color: #09c;
}
h1 {
  font-size: 3.5em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.5em;
}
.nosto {
  font-size: 1.5em;
  color: #333333;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
a,
a:visited {
  color: #042546;
}
.button,
.button:visited,
button {
  background-color: #042546;
  box-sizing: border-box;
  border: 0;
  padding: 0.7em 2em 0.6em 2em;
  margin: 1em 2em 1em 2em;
  color: #ffffff;
  display: inline-block;
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: auto;
  min-width: 10em;
  text-decoration: none;
  text-align: center;
  text-indent: 0;
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
}
.button:hover,
.button:active {
  background-color: #05325e;
}
img {
  max-width: 100%;
  display: block;
}
.kuvake {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.logo {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  width: 75%;
  max-width: 400px;
}
/* Tämän alapuolelta muuta vain sallittuja! */
.full {
  width: 100%;
  padding-top: 40px;
  /* saa muuttaa */
  padding-bottom: 40px;
  /* saa muuttaa */
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.full:nth-child(even) {
  background-color: #e5eef8;
}
#aloitus {
  min-height: 100vh;
}
.wrapper {
  margin: 0 auto;
  padding: 0 20px;
}
.palsta {
  margin: 0 0 20px 0;
  padding: 0.5em 1em;
  /* saa muuttaa */
  float: left;
  width: 100%;
  box-sizing: border-box;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Tabletti ja sitä isommat näytöt */
@media only screen and (min-width: 580px) {
  body {
    font-size: 16px;
  }
  .wrapper {
    padding: 0;
    width: 80%;
  }
  .palsta {
    margin-right: 3%;
  }
  .palsta:last-child {
    margin-right: 0;
  }
  .puolikas {
    width: 48.5%;
  }
}
/* Tietokone ja sitä isommat näytöt */
@media only screen and (min-width: 960px) {
  h3 {
    text-align: left;
  }
  .center h3 {
    text-align: center;
  }
  .nosto {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .full {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .wrapper {
    max-width: 960px;
  }
  .kapea {
    max-width: 720px;
  }
  .kolmasosa {
    width: 31.333%;
  }
  .kaksikolmasosaa {
    width: 65.666%;
  }
}