/* Wed, 29 Jan 2025 08:52:00 +0000 (0.0614s) */

@charset "UTF-8";
h1, h2, h3, h4, h5, h6 {
  font-family: "Istok Web", sans-serif;
  color: #4d4d4f;
}
h1 {
  font-size: 25px;
  line-height: 1.3em;
  margin: 0.83em 0 1em;
  color: #6b4589;
}
html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.375em;
  color: #4d4d4f;
}
body, td, div, p, a {
  background-repeat: no-repeat;
  word-break: break-word;
}
body, td, p, a, div, section {
  font-family: "Montserrat", serif;
  font-weight: 300;
  line-height: 1.5em;
}
a {
  text-decoration: none;
  color: #553378;
  font-weight: 600;
}
ul {
  padding-left: 1.3em;
}
a:focus, button:focus, div:focus {
  outline: 0;
}
div.desktop {
  display: none;
}
@media screen and (min-width: 600px) {
  div.desktop {
    display: block;
  }
}
h2.some {
  background-color: #6b4589;
  color: #fff;
  padding: 0.2em 0.5em;
}
strong {
  font-weight: 600;
}
header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
}
header .top {
  background-color: #6b4589;
  height: 75px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  header .top {
    height: 100px;
  }
}
header .top .inner {
  max-width: 688px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  padding: 14px 0 6px 0;
}
@media screen and (min-width: 768px) {
  header .top .inner {
    padding: 14px 0 6px 20px;
  }
}
header .toggle {
  text-align: center;
  padding: 10px 15px;
}
header .toggle button {
  background-color: transparent;
  border: 0;
  text-align: left;
  color: #6b4589;
  position: relative;
  padding-left: 20px;
}
header .toggle button .l1, header .toggle button .l2, header .toggle button .l3 {
  position: absolute;
  left: 0;
  background-color: #6b4589;
  height: 3px;
  width: 15px;
  border-radius: 1.5px;
  transition: all 0.2s ease 0s;
}
header .toggle button .l1 {
  top: 0;
}
header .toggle button .l2 {
  top: 6px;
}
header .toggle button .l3 {
  top: 12px;
}
header .toggle button .lines {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 17px;
  position: relative;
}
header .toggle button span {
  text-transform: uppercase;
  font-size: 18px;
  display: inline-block;
  line-height: 1em;
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
  header .toggle {
    display: none;
  }
}
header .logo {
  text-indent: -500px;
  font-size: 0;
  width: 290px;
  height: 55px;
  display: block;
  background-image: url(../img/han.2023.svg);
  background-size: 100% auto;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  header .logo {
    width: 391px;
    height: 80px;
    margin: 0;
  }
}
header .items {
  margin: 0 auto;
  max-width: 698px;
  padding: 0;
  box-sizing: border-box;
  display: none;
}
@media screen and (min-width: 768px) {
  header .items {
    display: block;
  }
}
header .items div.level1 {
  display: block;
  background-color: #a469ee;
  border-bottom: 1px solid #7439ae;
}
@media screen and (min-width: 768px) {
  header .items div.level1 {
    border-bottom: none;
    background-color: transparent;
    display: inline-block;
    vertical-align: top;
  }
}
header .items a {
  font-family: "Istok web", serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1em;
  color: #fff;
  transition: color 0.5s ease 0s;
  text-decoration: none;
  letter-spacing: -0.2px;
  padding: 0.6em 0 0.6em 1em;
  display: inline-block;
}
header .items a.selected {
  color: #6b4589;
}
@media screen and (min-width: 768px) {
  header .items a {
    color: #4d4d4f;
  }
}
header .items a:hover {
  color: #6b4589;
}
header .items div.level1.haschildren > a {
  padding-right: 30px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  header .items div.level1.haschildren > a {
    padding-right: 0;
  }
}
header .items div.level1.haschildren > a:after {
  content: "»";
  color: #fff;
  transform: rotate(-90deg);
  position: absolute;
  right: 10px;
  font-size: 2rem;
  font-weight: 600;
  transition: transform 0.5s ease 0s;
}
@media screen and (min-width: 768px) {
  header .items div.level1.haschildren > a:after {
    display: none;
  }
}
header .items div.level1.haschildren.active > a:after {
  transform: rotate(90deg);
}
header .items div.level2 {
  display: none;
  top: 100%;
  background-color: #d193c2;
  padding: 0 0 0.3em;
}
@media screen and (min-width: 768px) {
  header .items div.level2 {
    padding: 0.3em 0;
    background-color: #b781ef;
    position: absolute;
    margin-left: 0.95em;
  }
}
header .items div.level2 a {
  display: block;
  padding: 0.4em 1em 0.3em 2em;
  color: #4d4d4f;
  font-weight: 300;
  border-top: 1px solid #af7aa2;
}
@media screen and (min-width: 768px) {
  header .items div.level2 a {
    border-top: 0;
    font-weight: 700;
    padding: 0.3em 1em;
    color: #fff;
    font-weight: initial;
  }
}
header .items div.level2 a.selected {
  color: #fff;
}
@media screen and (min-width: 768px) {
  header .items div.level2 a.selected {
    color: #573b72;
  }
}
@media screen and (min-width: 768px) {
  header .items div.level2 a:hover {
    color: #573b72;
  }
}
body.navigation .toggle .l1 {
  transform: rotate(45deg) translate(5px, 4px);
}
body.navigation .toggle .l2 {
  transform: rotate(-45deg);
}
body.navigation .toggle .l3 {
  opacity: 0;
}
body.navigation .items {
  display: block;
}
footer {
  background-color: #6d6e71;
  width: 100%;
  padding: 34px 30px 76px;
  box-sizing: border-box;
  text-align: center;
}
footer .inner {
  margin: 0 auto;
}
footer p {
  font-size: 12px;
  line-height: 1.2em;
  color: #fff;
  margin-bottom: 2em;
}
footer a {
  color: #dfb41f;
  text-decoration: none;
}
footer .fa {
  display: inline-block;
  font-size: 28px;
  padding: 0 9px;
}
footer .links a {
  color: #fff;
}
footer .links a .fa {
  transform: scale(1);
  transition: transform 0.5s ease 0s;
}
footer .links a:hover .fa {
  transform: scale(1.2);
}
body.basic .pagetopimage {
  height: 200px;
  background-size: cover;
  background-position: center top;
}
@media screen and (min-width: 500px) {
  body.basic .pagetopimage {
    height: 350px;
  }
}
@media screen and (min-width: 768px) {
  body.basic .pagetopimage {
    height: 450px;
  }
}
@media screen and (min-width: 1600px) {
  body.basic .pagetopimage {
    height: 35vw;
  }
}
body.basic .pagetopimage.post {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  background-size: contain;
}
body.basic section.basic {
  max-width: 688px;
  margin: 70px auto;
  min-height: calc(100vh - 485px);
}
body.basic section.basic .inner {
  padding: 0 17px;
  box-sizing: border-box;
}
body.basic p {
  margin: 0.5em 0 1em;
}
body.basic h3 {
  margin: 1.5em 0 0.5em;
}
.frontlinks {
  text-align: center;
  padding: 30px 0;
  box-sizing: border-box;
}
.frontlinks a {
  display: inline-block;
  vertical-align: middle;
  width: 150px;
  height: 150px;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  text-decoration: none;
  border-radius: 50%;
  color: #fff;
  font-family: "Istok web", serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1em;
  padding: 90px 10px 0;
  background-position: center center;
  margin: 0 28px 56px;
  transition: box-shadow 0.5s ease 0s, transform 0.5s ease 0s;
  transform: translateY(0);
}
.frontlinks a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}
.frontlinks .viihdy {
  background-color: #b781ef;
  background-image: url(../img/icon-viihdy.svg);
}
.frontlinks .verkostoidu {
  background-color: #dda6cc;
  background-image: url(../img/icon-verkostoidu.svg);
}
.frontlinks .vaikuta {
  background-color: #dcba53;
  background-image: url(../img/icon-vaikuta.svg);
}
.frontlinks .liity {
  background-color: #dda6cc;
  background-image: url(../img/icon-liity.svg);
}
.frontlinks .yhteys {
  background-color: #dcba53;
  background-image: url(../img/icon-yhteys.svg);
}
.frontlinks .ajankohtaista {
  background-color: #b781ef;
  background-image: url(../img/icon-ajankohtaista.svg);
}
.wp-block-latest-posts {
  padding: 0;
}
.wp-block-latest-posts:before {
  content: "Uutiset ja tapahtumat";
  background-color: #6b4589;
  display: block;
  color: #fff;
  font-family: "Istok web", serif;
  font-size: 25px;
  line-height: 1.32em;
  padding: 10px;
  box-sizing: border-box;
}
section.postlist .post .top h2 {
  font-family: "Istok web", sans-serif;
  background-color: #ccc;
  color: #fff;
  text-align: left;
  padding: 0.2em 0.5em;
  margin: 0;
}
section.postlist .post .top .background img {
  width: 100%;
}
section.postlist .post.tiedotteet .top h2 {
  background-color: #cc99cc;
  /* background-color: #dda6cc; */
}
section.postlist .post.tapahtumat .top h2 {
  background-color: #dcba53;
}
section.postlist .post.tarinat.talteen .top h2 {
  background-color: #cc99cc;
}
section.postlist .post .author {
  margin: 1em 0;
}
section.postlist .post .body {
  padding-bottom: 3em;
}
section.postlist .post .body figure {
  padding: 0;
  margin: 0;
}
section.postlist .post .body img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}
section.postlist .post .body .readmore {
  text-decoration: none;
  display: block;
  font-weight: 700;
  margin-top: 0.3em;
  font-family: "Istok web", sans-serif;
  color: #4d4d4f;
  color: #6b4589;
}
section.postlist .post .body .readmore:after {
  content: " »";
  margin-left: 0;
  transition: margin-left 0.5s ease 0s;
}
section.postlist .post .body .readmore:hover:after {
  margin-left: 0.2em;
}
section.postlist .paginator {
  text-align: center;
}
section.postlist .paginator a {
  display: inline-block;
  vertical-align: center;
  background-color: #553378;
  color: #fff;
  width: 32px;
  height: 32px;
  text-align: center;
  font-family: "Istok web", sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1em;
  padding-top: 7px;
  box-sizing: border-box;
  margin: 0 4px;
}
section.postlist .paginator .current {
  background-color: #d193c2;
}
section.post .wp-block-image {
  margin: 1em 0;
}
section.post .wp-block-image img {
  height: auto;
}
section.post .top h2 {
  font-family: "Istok web", sans-serif;
  background-color: #ccc;
  color: #fff;
  text-align: left;
  padding: 0.2em 0.5em;
  margin: 0;
}
section.post .top .background img {
  width: 100%;
}
section.post .author {
  margin: 1em 0;
}
section.post .body {
  padding-bottom: 3em;
}
section.post .body figure {
  padding: 0;
  margin: 0;
}
section.post .body img {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}
section.post .body .readmore {
  text-decoration: none;
  display: block;
  font-weight: 700;
  margin-top: 0.3em;
  font-family: "Istok web", sans-serif;
  color: #4d4d4f;
}
section.post .body .readmore:after {
  content: " »";
  margin-left: 0;
  transition: margin-left 0.5s ease 0s;
}
section.post .body .readmore:hover:after {
  margin-left: 0.2em;
}
section.post .share p {
  font-size: 0.9rem;
  margin: 0.5em 0;
}
section.post .share a {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  color: #fff;
  text-align: center;
  font-size: 1.3rem;
  line-height: 32px;
  background-color: #553378;
  border-radius: 50%;
  margin: 0 7px 0 0;
  transition: background-color 0.5s ease 0s;
}
section.post .share a:hover {
  background-color: #d193c2;
}
section.join .field {
  padding: 0 0 1em;
}
section.join .field label {
  font-weight: 700;
}
section.join .field label span {
  color: #a00;
}
section.join .field textarea, section.join .field input, section.join .field select {
  padding: 0.2em 0.3em;
  font-size: 1rem;
  display: block;
  width: 100%;
  max-width: 350px;
  box-sizing: border-box;
  font-family: Montserrat, serif;
  border: 1px solid #ccc;
}
section.join .field textarea {
  font-size: 1rem;
  height: 4em;
}
section.join .field.invalid label {
  color: #a00;
}
section.join .field.invalid textarea, section.join .field.invalid input, section.join .field.invalid select {
  border-colod: #a00;
}
section.join .form {
  position: relative;
}
section.join .form button {
  color: #fff;
  background-color: #553378;
  padding: 0.5em 2em;
  font-size: 1.1rem;
  font-weight: 600;
  border: 0;
  transition: background-color 0.5s ease 0s;
  cursor: pointer;
}
section.join .form button:hover {
  background-color: #d193c2;
}
section.join .thanks {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background-color: rgba(255, 255, 255, 0.9);
  display: none;
}
section.join .thanks .inner {
  font-family: "Istok web", sans-serif;
  font-weight: 600;
  box-sizing: border-box;
  margin-bottom: 1em;
}
section.join .thanks.shown {
  display: flex;
}
.wp-block-han-personlist .person {
  margin-bottom: 1em;
  color: #4d4d4f;
}
@media screen and (min-width: 600px) {
  .wp-block-han-personlist .person {
    margin-bottom: 2em;
  }
}
.wp-block-han-personlist .photo {
  width: 150px;
  height: 150px;
  background-size: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1em;
}
@media screen and (min-width: 600px) {
  .wp-block-han-personlist .photo {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
  }
}
.wp-block-han-personlist .text {
  display: block;
  margin: 0 auto 3em;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .wp-block-han-personlist .text {
    padding: 1em 0;
    text-align: left;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    padding-left: 2em;
  }
}
.wp-block-han-personlist a {
  color: #dfb41f;
  text-decoration: none;
}