/* css vars */

:root {
  --full-nega-margin: calc(-1 * var(--side-margin));
  --large-nega-margin: calc(-1 * var(--side-margin));
  --grid-2: 1fr 1fr;
  --admin-bar: 0px;
}

@media (min-width: 1200px){
  :root{
    --side-margin: 50px;
  }
}
@media (min-width: 1301px){
  :root {
    --full-nega-margin: calc((var(--wrap) - 100vw) / 2 - var(--side-margin));
    --large-nega-margin: calc((var(--wrap) + 300px - 100vw) / 2 - var(--side-margin));
    /*--side-margin: calc((100vw - var(--wrap)) / 2);*/
  }
}

@media (max-width: 880px){
  :root {
  --gap: 15px;
  --grid-gap: 10px;
  --side-margin: 25px;
  }
}

body.admin-bar{
  --admin-bar: 32px;
}
@media (max-width: 765px) {
  body.admin-bar{
    --admin-bar: 46px;
  }
}
/* /css vars */

/* HTML5 fixes */
div,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

*{
  margin:0;
  padding:0;
}
html {
  box-sizing: border-box;
  font-size: 100%;
  scroll-behavior: smooth;
}
::selection{
  background-color: var(--primary);
  color: #fff;
}
.has-primary-background-color ::selection{
  background-color: var(--secondary);
}

*,
*::before,
*::after {
  box-sizing: inherit; }

[id]{
  scroll-snap-margin-top: 170px;
  scroll-margin-top: 170px;
}

.hide{
  display: none;
}

a img{
	border:none;
}
svg, img{
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
.bw > img{
  filter: greyscale(1) contrast(1.15);
}
figure > a{
  display: inline-block;
  transition: all 0.3s;
}
figure > a:hover{
  transform: scale(1.03);
}

.kuva.circle img, .img.circle img, img.circle{
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 500px;
}
.single .post-thumb img{
  /* aspect-ratio: 16/7;
  object-fit: cover; */
  max-height: 500px;
  object-fit: contain;
}
figure.wp-block-image{
  margin: 0;
}
figure.wp-block-image + p,
p + figure.wp-block-image{
  margin-top: 2em;
}

p.post-thumb{
  margin-bottom: 2em;
}
.kuva.cover{
  align-self: stretch;
}
.kuva.cover .wp-block-image{
  height: 100%;
}
.cover .wp-block-image img,
.wp-block-image.cover img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
div.svg-image:not(.no-scale) figure.svg-image img,
div:not(.svg-image) > figure.svg-image:not(.no-scale) img{
  /* width: 100% !important; */
}
.breadcrumb{
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
@media (max-width: 750px){
  .breadcrumb{
    margin-bottom: 10px;
    font-size: 13px;
  }
}

.breadcrumb .sep{
  display: inline-block;
  margin: 0 10px;
  font-size: 1.1em;
}

hr{
  margin: min(50px, 10vw) auto;
  border:0;
  width: 100%;
  border-bottom: 1px solid var(--light-grey);
}
.has-primary-background-color hr{
  border-bottom-color: var(--secondary);
}

hr:first-child{
  margin-top: min(40px, 4vw);
}

.icon{
  display: inline-flex;
  margin-right: 0.6em;
  width: 1em;
  vertical-align: text-bottom;
  padding-bottom: 0.2em;
}
a[href*="tel:"] .icon,
.icon.inline {
    margin: 0 0.3em 0 0.5em;
}
a.icon #Fill-1{
transition: all .3s;
}
a.icon:hover{
  background: none !important;
}
a.icon:hover #Fill-1{
  fill: var(--secondary);
}

.icon i{
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 100%;
  width: 1em;
  height: 1em;
  filter: var(--primary-filter);
}
.has-cyan-background-color .icon i{
  filter: var(--secondary-filter);
}
.icon i.phone{
  background-image: url(../img/svg-icons/phone.svg);
}
.icon i.email{
  background-image: url(../img/svg-icons/email.svg);
}
.icon i.location{
  background-image: url(../img/svg-icons/location.svg);
}
.icon i.calendar{
  background-image: url(../img/svg-icons/calendar.svg);
}
.icon i.time{
  background-image: url(../img/svg-icons/time.svg);
}
.icon i.arrow-right, .icon i.arrow-left{
  font-size: 1.25em;
  vertical-align: text-bottom;
  background-image: url(../img/svg-icons/arrow-right.svg);
}
.icon.rotate, .icon i.arrow-left{
  transform: rotate(180deg);
}

.pagination .icon{
  border: none !important;
  vertical-align: initial;
  margin-right: 0;
  width: auto;
}
.pagination .icon i{
  height: 0.5em;
  filter:none;
}

/* SVG animations */
/* yleinen määritys (yksittäisiä ei välttis tarvii) */
.animate svg *{
  stroke-dashoffset: var(--dash, 150%);
  stroke-dasharray: var(--dash, 150%);
  transition: stroke-dashoffset var(--duration, 1.5s) cubic-bezier(0.47, 0, 0.745, 0.715) var(--delay, 0s);
}

.animate svg.active * {
  stroke-dashoffset: 0 !important;
}

.single #content .pagination{
  max-width: 350px;
  margin: 6vh auto;
  display: flex;
  justify-content: space-between;
}

iframe{
  width: 100%;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper{
  padding-top: 56.25%;
  position: relative;
}

.video-embed{
  position: relative;
}

.video-embed iframe,
.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

/* old browsers */
body.old-browser #footer .wp-block-group.is-style-full-width{
    padding-bottom: 60px;
}
body.old-browser::after{
    content: 'Käyttämäsi selain on vanhentunut, minkä takia sivut eivät näy kaikilta osin kuten ne on suunniteltu. Suosittelemme ottamaan käyttöön esim. Chrome-selaimen, joka päivittyy aina automaattisesti.';
    position: fixed;
    z-index: 999;
    bottom: 0;
    background: var(--black);
    color: var(--white);
    width: 100%;
    padding: 5px;
    text-align: center;
    font-size: min(15px, 3.2vw);
}

/* Typography */

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--text-color, var(--black));
  text-align: left;
  --body-font-size: var(--base-font-size); 
  font:400 var(--body-font-size)/1.5 var(--body-font);
}

@media (min-width: 1400px){
  body{
    --body-font-size: calc(var(--base-font-size) + 1px);
  }
}
@media (max-width: 480px){
  body{
    --body-font-size: calc(var(--base-font-size) - 1px);
  }
}
@media (max-width: 320px){
  body{
    --body-font-size: 14px;
  }
}
body{
  font-size: var(--body-font-size);
}

p{
    margin-bottom:1em;
}
p:empty:last-of-type{
  display: none;
}
.wp-block-column p:last-child,
p:last-child {
    margin-bottom: 0;
}


h1, h2.has-large-font-size{
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1{
  margin: 0;
}

.has-white-text-color h1, .has-white-text-color h2{
  color: #fff;
}

.hero h1{
  color: #fff;
}

#content .hero h1,
.hero h1{
  margin: 0;
}



h2:first-child, h3:first-child, h4:first-child, .h2:first-child, .h3:first-child {
  margin-top: 0;
}
h1:last-child, h2:last-child, h3:last-child, .h2:last-child, .h3:last-child, h4:last-child, .wp-block-image:last-child, .hero h2 {
  margin-bottom: 0;
}

.hero :is(h1, h2, h3) + p{
  margin-top: 0.5em;
}

.single h1{
  text-align: center;
}

h2.has-large-font-size,
h3.has-large-font-size{
  --wp--preset--font-size--large: var(--font-size);
}

.loop-wrapper h3{
  --font-size: var(--h4);
  line-height: 1.5;
}
.loop-wrapper{
  font-size: min(16px, var(--font-size));
}

#footer {
  font-size: 1em;
}

h1 + h2{
  --margin-top: 0.3em;
  color: var(--secondary);
}
h4 + h2{
  --margin-top: 0.3em;
}
h2 + h3{
  --margin-top: -0.6em;
  --margin-bottom: 0.8em;
}
.doughnut + h4{
  --margin-top: 0;
}

.wp-block-image figcaption,
.has-small-font-size{
  font-size: min(1em, 20px);
}

b, strong{
  font-weight: bolder;
  font-family: var(--body-font);
}
.date{
  font-size: 0.85em;
}

.wp-block-image figcaption{
  margin-top: 1em;
  margin-bottom: 0;
}

blockquote{
  font-style: italic;
  font-size: 1.35em;
  margin: 50px auto;
  padding-left: 2em;
  max-width: 800px;
}
blockquote:before {
  content: '"';
  float: left;
  margin-left: -0.65em;
  font-size: 4.5em;
  line-height: 0.75em;
  color: var(--secondary);
}
blockquote *{
  margin: 0;
  font-style: normal;
}
blockquote cite{
  font-style: normal;
  display: block;
  margin-top: 0.8em;
  font-size: 0.85em;
}
blockquote cite img{
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5em;
}

.ingressi{
    text-align: center;
    margin-bottom: 10vh;
}
.home .ingressi{
  font-size: 1.2em;
}

a{
  border: none;
  outline: none;
  text-decoration: none;
  color: inherit;
}

p a, label a, h2 a, h3 a, h4 a, li a{
  color: var(--color, var(--secondary));
  background: linear-gradient(to right, var(--color, var(--primary)), var(--color, var(--primary)) 50%, var(--underline, rgba(140,140,140,.5)) 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: all .3s;
}
p a:hover, label a:hover, h2 a:hover, h3 a:hover, h4 a:hover, li a:hover{
  background-position: 0% 100%;
}
/*p a{
  --color: var(--primary);
}*/

a[href*="tel:"] {
    /*white-space: nowrap;*/
    display: inline-block;
    line-height: 1.3; /* alleviivauksen takia */
}
@media (min-width: 600px){
  a[href*="tel:"] {
    background: none !important;
  }
}
#copy{
  font-size: min(0.875em, 14px);
}

.contact p{
  margin-bottom: 0.2em;
}
.contact + p{
  margin-top: 1em;
}

@media (max-width: 599px){
  #content .has-text-align-right{
    text-align: left;
  }
}

/* /Typography */

/* Layout & columns */

.clear{
  clear:both;
}
.left, .alignleft {float:left;}
.right, .alignright  {float:right;}

.aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.main-container{
  /* overflow: hidden; */
  position: relative;
}

.flex{
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
.f-nowrap{ flex-wrap: nowrap;}
.f-center{ justify-content: center; }
.f-justify{ justify-content: space-between; }
.f-end{ justify-content: flex-end; }
.f-start{ justify-content: flex-start; }
.f-vstart{ align-items: flex-start; }
.f-vend{ align-items: flex-end; }
.f-vcenter{ align-items: center; }
.f-c-justify{ align-content: space-between; }
.f-dir-col {display: flex; flex-direction: column;}
.flex > div, .f-col { flex: 1 1 auto;}
#content .flex > div, #content .f-col{
  padding-bottom: var(--grid-gap);
}
.f-grow {
  flex-grow: 1;
}
.flex > .f-50{
  flex-basis: 50%;
}
.flex > .f-33{
  flex-basis: 33.33%;
}
.flex > .f-66{
  flex-basis: 66.66%;
}
.flex > .f-min{
  flex-basis: auto;
  flex-grow: 0;
}

.max-w-90{
  max-width: 90%;
}

.no-margin {
  margin: 0!important;
}

.wp-block-group.fullscreen, .wp-block-group.h-100{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* wp-columns tweak -> */
#content > *,
.wp-block-group,
.hero .wrap{
  max-width: var(--wp--style--global--content-size, var(--wrap));
  width: 100%;
  margin: 0 auto 0;
}
#content > *,
#content > .is-style-full-width > .wp-block-group,
.hero .inner-blocks > .wp-block-group:not(.is-style-full-width),
.hero .is-style-full-width > .wp-block-group,
#top-bar > .wrap,
#footer > .is-style-full-width > .wp-block-group,
#copy > .wp-block-group{
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
}

#content > .wp-block-group:not(.is-style-full-width).has-background,
.wp-block-cover__inner-container{
  padding-inline: max(var(--side-margin), var(--cont-padding));
}

#content .wp-block-cover__inner-container{
  color: var(--text-color, inherit);
}

#content > .is-style-full-width,
.wp-block-group.is-style-full-width,
.wp-block-group.is-style-full-width.has-background {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
/* .wp-block-group:not(.is-style-full-width) > .wp-block-group{
  padding-left: 0;
  padding-right: 0;
} */
.wp-block-group.is-vertical{
  padding: 0;
  height: 100%;
}

@media (min-width: 950px){
  #content > .is-style-narrow-width,
  .wp-block-group.is-style-narrow-width{
    max-width: var(--narrow-wrap);
  }
}
#content > .wp-block-group,
#content > .wp-block-cover,
#content > .post-wrapper,
#content > .block-wrapper{
  margin-top: clamp(7vh, 7vw, 100px);
}
#content > div:not(.has-background):last-of-type {
  padding-bottom: clamp(7vh, 7vw, 100px);
}
.wp-block-group.is-style-full-width:first-of-type {
  margin-top: 0 !important;
}
#content .wp-block-group.bottom-0 {
    margin-bottom: 0;
}
#content .nostot{
  margin-top: 0;
  margin-bottom: 0;
}
#content .nostot.wp-block-columns {
  gap: min(5%, 4vw);
  row-gap: 2em;
}
#content .nostot.wp-block-columns .wp-block-column{
  padding: 0;
}

#content{
  min-height: 80vh;
}


/* .wrap,
.wp-block-group.has-background > .wp-block-group__inner-container{
    padding: 0 var(--gap);
} */

#content > .block-wrapper.core-columns > .wp-block-columns[class*="columns-grid-"]{
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 599px){
  #content .wp-block-columns .wp-block-columns{
    margin-left: 0;
    margin-right: 0;
  }
}
.wrap .wp-block-columns.wrap{
    padding-left: 0;
    padding-right: 0;
}

.wp-block-group .wp-block-columns{
    margin: 0 auto;
}

.wp-block-group.full-wrap .wp-block-group__inner-container{
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
}

.wp-block-columns[class*="columns-grid-"] {
  gap: calc(var(--grid-gap) * 2);
}
#content .wp-block-columns[class*="columns-grid-"] .wp-block-column{
  padding: 0;
}
.wp-block-column,
#content .wp-block-column,
#footer .wp-block-column {
    margin: 0;
}
.block-wrapper.core-media-text{
  padding: 2% 0;
}

.row-block > :is(h2, h3, h4, h5){
  padding: 0;
  margin: 0;
}
div.wp-block-group.row-block > * + *{
  margin: 0;
}

.wp-block-column .wp-block-cover{
  min-height: min(350px, 70vw);
  height: unset;
  width: 100%;
}
#content .wp-block-column.wp-block-cover-inside{
  min-width: 50%;
  padding: 0;
}

@media (max-width: 600px){
  #content .wp-block-column.wp-block-cover-inside{
    order: -1;
  }
  #content .wp-block-column.wp-block-cover-inside .wp-block-cover{
    min-height: 60vw !important;
  }
}

.wp-block-media-text.is-style-small-pic{
  grid-template-columns: min(23%, 20vw) 1fr !important;
  align-items: start;
}
.wp-block-media-text.is-style-small-pic .wp-block-media-text__content{
  padding-top: 0;
  --gap: 5%;
  align-self: start;
}
.wp-block-media-text.is-style-small-pic .wp-block-media-text__media{
  max-width: 85px;
  max-height: 95px;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  margin-bottom: var(--gap);
  justify-self: center;
  align-self: start;
}
.wp-block-media-text.is-style-small-pic .wp-block-media-text__media img{
  max-height: 100%;
  object-fit: contain;
}
figure.wp-block-media-text__media img {
  max-height: 80vh;
  object-fit: cover;
}
.wp-block-media-text.is-image-fill .wp-block-media-text__media{
  min-height: max(250px, 50vh);
}

#content .wp-block-column.cover{
    padding: 0;
}

/* #content .wp-block-group.has-background .wp-block-column:not(.cover){
  padding: 15px var(--gap);
} */

#content .wp-block-column.kuva,
#content .wp-block-columns .wp-block-column.empty-column,
#content .wp-block-group.has-background .wp-block-column.kuva {
  padding: 0;
}
.main-container .wp-block-columns{
  column-gap: var(--column-gap);
}

@media (min-width: 600px){
    .wp-block-column {
        flex-basis: 50%;
    }
}
@media (min-width: 600px) and (max-width: 781px){
  .wp-block-column:not(:only-child) {
    flex-basis: 50% !important;

  }
}
@media (max-width: 599px){
    .wp-block-column{
        padding-top: 2px;
        padding-bottom: 2px;
    }
    #content .wp-block-column{
/*      padding-left: 0;
      padding-right: 0;*/
    }
    .kuva{
      order: -1;
    }
    .wp-block-media-text.is-stacked-on-mobile.is-style-small-pic .wp-block-media-text__content{
      grid-column: 2;
      grid-row: 1;
    }
}
@media (max-width: 650px) {
  .wp-block-columns .wp-block-column {
    margin: 10px 0;
  }
}
.wp-block-columns + p{
  margin-top: 1em;
}

.wp-block-cover{
  height: auto;
  padding: 8vh 0;
}
.wp-block-columns.has-background{
  padding: 0;
}

#content > .hero + .is-style-full-width.has-background,
#content > .is-style-full-width.has-background + .is-style-full-width.has-background{
  margin-top: 0;
}

/* #content > .wrap > .wp-block-group,
#content > .wrap > .wp-block-group.no-padding .wp-block-group,
#content > .wrap > .wp-block-group.no-padding .padding{
  padding-top: var(--cont-padding);
  padding-bottom: var(--cont-padding);
}
#content > .wrap > .wp-block-group.no-padding{
  padding-top: 0;
  padding-bottom: 0;
}
 */

.wp-block-group.has-background{
  padding: var(--cont-padding);
}


.wp-block-columns{
  /*content-visibility: visible;*/
  contain:layout;
/*  contain-intrinsic-size: 1000px;*/
}

@media (max-width: 1000px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile):not(.block-columns-2){
    flex-wrap: wrap !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
    min-width: 300px;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile).block-columns-4 > .wp-block-column{
    flex-basis: calc(50% - var(--column-gap) / 2);
    min-width: 200px;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile).block-columns-5 > .wp-block-column{
    min-width: 120px;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile).block-columns-6 > .wp-block-column{
    min-width: 100px;
  }
}
@media (max-width: 781px) and (min-width: 599px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    max-width: calc(50% - var(--column-gap) / 2);
  }
}
@media (max-width: 599px) and (min-width: 479px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile).block-columns-4 > .wp-block-column{
    max-width: calc(50% - var(--column-gap) / 2);
    min-width: 0;
  }
}
@media (max-width: 599px){
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{
    min-width: 0;
  }
}

/* <- wp-columns tweak */

@media (max-width: 781px){
  .wp-block-media-text{
    grid-template-columns: calc(50% - var(--gap)) 1fr;
  }
  .wp-block-media-text.has-media-on-the-right{
    grid-template-columns: 1fr calc(50% - var(--gap));

  }
}

.wp-block-cover{
  contain: paint layout;
}
.wp-block-video {
  contain: layout;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}

.padding-right-0{
    padding-right: 0;
}
.padding-left-0{
    padding-left: 0;
}
.padding-top-0{
    padding-top: 0 !important;
}
.padding-bottom-0{
    padding-bottom: 0 !important;
}
.padding-0,
.wp-block-columns.padding-0 .wp-block-column,
.wp-block-media-text.padding-0 .wp-block-media-text__content{
  padding: 0px !important;
}
.padding-10{
  padding: 10px;
}
.margin-0{
    margin: 0 !important;
}
.margin-top-0{
  margin-top: 0 !important;
}
.margin-bottom-0{
  margin-bottom: 0 !important;
}
.wrap,
.wp-block-group.has-background > .wp-block-group__inner-container{
  max-width: var(--wrap);
  margin:0 auto;
  width: 100%;
}

.wp-block-columns.padding-0{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-column.wrap-margin{
  width: calc((100vw - var(--wrap) + var(--side-margin)) / 2 + var(--gap));
  flex-basis: auto !important;
  min-width: var(--side-margin);
  flex-grow: 0;
}
@media (min-width: 1200px){
 .wp-block-column.wrap-margin{
  padding-left: var(--gap) !important;
 }
}

.wrap.full{
    max-width: 100%;
}

.message-div{
  text-align: center;
  padding: var(--grid-gap);
}
.row.padding{
    padding: 40px 0;
}

:where(#content) > *:not(.hero){
  opacity: 0;
}

.ready :where(#content) > *{
  opacity: 1;
  transition: opacity 0.5s;
}
.scroll-show:not(.wp-block-group.has-background), 
.scroll-show.wp-block-group.has-background > *{
  opacity: 0;
  transform: translateY(100px);
}
.scroll-show:not(.wp-block-group.has-background).scrolled,
.scroll-show.scrolled.wp-block-group.has-background > *{
  transition: opacity 0.8s, transform 0.7s;
  transform: none;
  opacity: 1;
}

.hero .wp-block-cover__inner-container .wp-block-group > *,
.scroll-show :where(h2, h3),
.scroll-show :where(h2, h3) + *,
.scroll-show :where(h2, h3) + * + *,
.scroll-show :where(h2, h3) + * + * + * ,
.scroll-show :where(h2, h3) + * + * + * + *,
.scroll-show :where(h2, h3) + * + * + * + * + *,
.scroll-show :where(h2, h3) + * + * + * + * + * + *{
  opacity: 0;
  transform: translateY(50px);
  transition: all .5s 0.3s;
}
.hero .wp-block-cover__inner-container .wp-block-group > h1{
  transition-delay: 0s;
}
.hero .wp-block-cover__inner-container .wp-block-group > *:nth-child(3){
  transition-delay: 0.5s;
}
.hero .wp-block-cover__inner-container .wp-block-group > *:nth-child(4){
  transition-delay: 0.6s;
}

.ready .hero .wp-block-cover__inner-container .wp-block-group > *,
.scrolled :where(h2, h3),
.scrolled :where(h2, h3) + *,
.scrolled :where(h2, h3) + * + *,
.scrolled :where(h2, h3) + * + * + *,
.scrolled :where(h2, h3) + * + * + * + *,
.scrolled :where(h2, h3) + * + * + * + * + *,
.scrolled :where(h2, h3) + * + * + * + * + * + *{
  opacity: 1;
  transform: none;
}

.scroll-show :where(h2, h3) + *{
  transition-delay: 0.5s;
}
.scroll-show :where(h2, h3) + * + *{
  transition-delay: 0.6s;
}
.scroll-show :where(h2, h3) + * + * + *{
  transition-delay: 0.7s;
}
.scroll-show :where(h2, h3) + * + * + * + *{
  transition-delay: 0.8s;
}
.scroll-show :where(h2, h3) + * + * + * + * + *{
  transition-delay: 0.9s;
}
.scroll-show :where(h2, h3) + * + * + * + * + * + *{
  transition-delay: 1s;
}


#content{
  position: relative;
}
#content.padding-bottom{
  padding-bottom: 10vh;
}
#content.padding-top,
#content .wrap.padding-top{
  padding-top: 8vh;
}
#content .block-wrapper.nega-margin,
#content .wrap.nega-margin,
#content .wp-block-group.nega-margin{
  margin-top: -50px;
}

.wp-block-spacer{
  margin: 0 !important;
}

@media (min-height: 650px){
  #content .block-wrapper.nega-margin,
  #content .wrap.nega-margin,
  #content .wp-block-group.nega-margin{
    margin-top: calc(650px - 100vh);
    margin-top: -15vh;
  }
}

@media screen and (max-width: 840px){
  .wp-block-spacer{
    max-height: 5vh;
  }

}
@media (max-width: 780px){
  .wp-block-column:not(:only-child){
    flex-grow: 1;
  }
  .wp-block-column.empty-column{
    flex-basis: 0 !important;
    flex-grow: 0;
  }

}

 @media screen and (min-width: 600px) {
  .hide-desktop {
    display: none;
  }
 }

/* wp-kolumnit yhteen palstaan tässä kohtaa */
@media screen and (max-width: 599px){
  .hide-mobile,
  .home .hero .isologo{
    display: none;
  }
  .full-mobile {
      margin-left: calc(var(--side-margin) * -1);
      margin-right: calc(var(--side-margin) * -1);
      width: 100vw;
      padding-left: var(--side-margin);
      padding-right: var(--side-margin);
  }

}

.wp-block-image.aligncenter{
  display: flex;
  justify-content: center;
}

/* gallery */

#content .wp-block-gallery.aligncenter .blocks-gallery-grid{
  justify-content: center;
}
#content .wp-block-gallery{
  --gap: 20px;
  gap: var(--row-gap, var(--gap)) var(--gap);
  justify-content: center;
  /* align-items: center; */
}
#content .wp-block-gallery .wp-block-image:not(#individual-image){
  margin: 0;
  flex-grow: 0;
  min-width: min(150px, 23vw);
}
#content .wp-block-gallery .wp-block-image figure{
  align-items: center;
}
.wp-block-gallery.columns-6 .wp-block-image{
  flex-basis: calc(16.66% - var(--gap) * 5/6)
}
.wp-block-gallery.columns-5 .wp-block-image{
  flex-basis: calc(20% - var(--gap) * 4/5);
}
.wp-block-gallery.columns-4 .wp-block-image{
  flex-basis: calc(25% - var(--gap) * 3/4);
}
.wp-block-gallery.columns-3 .wp-block-image{
  flex-basis: calc(33.33% - var(--gap) * 2/3)
}
.wp-block-gallery.columns-2 .wp-block-image{
  flex-basis: calc(50% - var(--gap) * 1/2);
}

#content .wp-block-gallery.logos{
  --gap: max(5%, 20px);
  --row-gap: 20px;
}
#content .logos .wp-block-image{
  padding: 10px;
}
#content .logos img{
  max-height: min(80px, 12vw);
  width: auto;
  filter: grayscale(1) contrast(0.9) brightness(1.05);
  mix-blend-mode: multiply;
}
#content .has-background:not(.has-light-grey-background-color) .logos img{
  filter: brightness(0) invert(1);
}
#content .logos a:hover img{
  transform: scale(1.02);
  filter: drop-shadow(0px 0px 35px rgba(255,255,255,.3)) drop-shadow(0px 0px 2px rgba(255,255,255,.3)) drop-shadow(0px 0px 1px #fff) !important;
}



/* /Layout & columns */

/* Ul & Ol lists */

ul{
  margin:10px 0 10px 0px;
}
#content ul, #footer ul{
  margin-left: 1em;
}
li{
  margin-left:15px;
}
li a{
    text-decoration: none;
}
:where(:not(.normal-ol)) ol:not(.normal) {
  list-style: none;
  counter-reset: mek-counter;
  margin: 2em 0;
}

:where(:not(.normal-ol)) ol:not(.normal) li {
  counter-increment: mek-counter;
  font-size: 1em;
  --size: 38px;
  margin-left: 0px;
  padding-left: var(--size);
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translate(-2em, 0);
  transition: opacity 0.7s var(--delay, 0s), transform 0.7s var(--delay, 0s);
  --base-delay: 0.2s;
  gap: var(--grid-gap, 15px);
}
ol li:nth-child(1) {--delay: calc(var(--base-delay) * 1); }
ol li:nth-child(2) {--delay: calc(var(--base-delay) * 2); }
ol li:nth-child(3) {--delay: calc(var(--base-delay) * 3); }
ol li:nth-child(4) {--delay: calc(var(--base-delay) * 4); }
ol li:nth-child(5) {--delay: calc(var(--base-delay) * 5); }
ol li:nth-child(6) {--delay: calc(var(--base-delay) * 6); }
ol li:nth-child(7) {--delay: calc(var(--base-delay) * 7); }
ol li:nth-child(8) {--delay: calc(var(--base-delay) * 8); }
ol li:nth-child(9) {--delay: calc(var(--base-delay) * 9); }
ol li:nth-child(10) {--delay: calc(var(--base-delay) * 10); }
ol li:nth-child(11) {--delay: calc(var(--base-delay) * 11); }
ol li:nth-child(12) {--delay: calc(var(--base-delay) * 12); }

.scrolled ol li{
  transform: translate(0, 0);
  opacity: 1;
}

ol.no-border li{
  border:0;
}
:where(:not(.normal-ol)) ol:not(.normal) li::before {
  content: counters(mek-counter, ".") "";
  color: #fff;
  font-weight: 400;
  font-size: min(1.6em, 26px);
  font-weight: 700;
  background-color: var(--secondary);
  border-radius: 50%;
  margin-left: calc(-1 * var(--size));
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  font-family: var(--body-font);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  /* margin-right: 15px; */
}
/* #content :where(:not(.classic-editor)) > ul:not([class]) > li{
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin-left: 1.8em;
  line-height: 1.5;
}
#content :where(:not(.classic-editor)) > ul:not([class]) > li::before{
  content: '';
  --size: calc(1em - 12px);
  --margin: calc(1em - 5px);
  margin-left: calc(-1 * (var(--size) + var(--margin)));
  margin-right: var(--margin);
  margin-bottom: 0.1em;
  line-height: 1;
  width: var(--size);
  height: var(--size);
  background: var(--dot-color, var(--primary));
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.5em;
}
#content .wp-block-cover ul{
  margin-left: 0;
}
#content .wp-block-cover li::before{
  background: url(../img/svg-icons/check.svg) no-repeat 50% 100%;
  border-radius: 0;
  margin-bottom: 0;
  --size: 1em;
  --margin: 0.5em;
} */

li::marker{
  font-size: 1.3em;
  line-height: 0.8;
  color: var(--secondary);
}

#content ul.icons {
  margin-bottom: 1.5em;
}
#content ul.icons li,
ul.icons li{
  margin-left: 1.6em;
  list-style: none;
}
#content ul.icons li .icon,
ul.icons li .icon{
  margin-left: -1.6em;
  display: block;
  float: left;
  margin-top: 0.15em;
}
#content ul.icons li::before,
ul.icons li::before{
  display: none;
}

#content ul.wp-block-social-links li{
  margin-left: 0;
  padding-top: 0;
}
ul.wp-block-social-links li a{
  background: none;
}

/* /Ul & Ol lists */

/* Buttons*/

p + .wp-block-buttons {
  margin-top: 2em;
}

.wp-block-button__link, .button{
  display: inline-block;
  text-transform: none;
  line-height: 1.3;
  height: auto;
  background: var(--btn-color);
  font-family: var(--body-font);
  font-size: min(1.05em, 18px);
  font-weight: 700;
  min-width: 170px;
  max-width: 300px;
  margin-top: 1em;
  text-transform: uppercase;
  --padding-x: 1.7em;
  --padding-y: 0.9em;
  --padding: var(--padding-y, 0.9em) var(--padding-x, 1.7em);
  padding: var(--padding) !important;
  transition: all .3s;
  border: 0;
}
.two-row-button{
  --padding-y: 0.5em;
}
#top-bar .wp-block-button .wp-block-button__link {
  text-transform: none;
  background-image: none;
}
#top-bar .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  --text-color: var(--white);
}

a.wp-block-button__link:not([href])::before{
  content: '!';
  color: red;
  position: absolute;
  margin-left: -1em;
}
a[href] .wp-block-button__link::before{
  display: none;
}

.wp-block-button__link:focus, .button:focus{
  background: var(--btn-color);
  outline: none;
}


@media (max-width: 400px){
  .wp-block-button {
      margin-top: 0.5em;
  }
}

.wp-block-button.is-style-arrow .wp-block-button__link{
  display: inline-flex;
  margin-left: 2em;
  font-size: 1em;
  margin-top: 0;
  --padding: 0;
  border: 0;
  min-width: 0;
  box-shadow: none !important;
  background-color: transparent;
  position: relative;
  font-weight: bold;
  line-height: inherit;
  --color: var(--text-color, var(--black));
  background: transparent linear-gradient(to right, var(--color), var(--color)) no-repeat 0 100%;
  background-size: 0% 1px;
}
.wp-block-button.is-style-arrow.has-icon .wp-block-button__link{
  align-items: center;
  gap: 0.7em;
  margin-left: 0;
  background: none;
}
.wp-block-button.is-style-arrow.has-icon .wp-block-button__link span{
  background: transparent linear-gradient(to right, var(--color), var(--color)) no-repeat 0 100%;
  background-size: 0% 1px;
  display: inline-block;
  transition: all .3s;
}

a:hover .wp-block-button.is-style-arrow .wp-block-button__link,
a:hover .wp-block-button.is-style-arrow.has-icon .wp-block-button__link span,
.wp-block-button.is-style-arrow.has-icon .wp-block-button__link:hover span,
.wp-block-button.is-style-arrow .wp-block-button__link:hover{
  background-size: 100% 1px;
}

.wp-block-button.is-style-arrow:not(.has-icon) .wp-block-button__link::before{
  content: '';
  display: inline-block;
  position: absolute;
  font-size: 1em;
  left: -1em;
  background: url(../img/svg-icons/link-icon.svg) no-repeat 0 50%;
  background-size: contain;
  /*filter: contrast(0.15);  grey */
  width: 1em;
  height: 1em;
  transform: scale(1.2) translate(-50%, 18%);
  transition: all .3s;
}
a:hover .wp-block-button.is-style-arrow:not(.has-icon) .wp-block-button__link::before,
.wp-block-button.is-style-arrow:not(.has-icon) .wp-block-button__link:hover::before{
  transform: scale(1.2) translate(-30%, 18%);
}

.has-primary-background-color .wp-block-button.is-style-arrow .wp-block-button__link{
  background-image: linear-gradient(to left, #fff, #fff);
}

.wp-block-quote + .wp-block-buttons{
  margin-left: 20px;
}

#top-bar .wp-block-button.is-style-outline .wp-block-button__link:hover{
  --border-color: var(--accent);
}

/* /Buttons*/

/* Header & Top bar*/

#top{
    --top-bar-height: 80px;
}
#top-bar{
    padding: 15px 0;
    width: 100%;
    z-index: 1000;
    position: fixed;
    background: var(--primary-70, var(--primary));
    --color: var(--white);
    text-align: center;
    top: var(--admin-bar, 0px);
    /*box-shadow: 0 3px 6px rgba(0,0,0,.15);*/
    scroll-snap-margin-top: 0px;
    scroll-margin-top: 0px;
    transition: padding 0.5s;
}
#top-bar .logo{
    display: inline-block;
}
#top-bar .logo div{
    width: 190px;
    transition: all 0.4s;
}
/* .home #top-bar:not(.fixed) .logo{
    filter: greyscale(1) contrast(7) invert(1);
} */
#top-bar.fixed{
  /*color: var(--black);*/
  background: var(--primary);
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#top-bar.fixed .logo div{
    /*width: 100px;*/

}
#top-bar.white,
#top-bar.white #secondary-navi{
    color: var(--black)
}

#top-bar.fixed #secondary-navi{
   display: none;
}
#top-bar .flex {
    flex-wrap: nowrap;
}
#top-bar .flex .f-col{
    flex: 0 1 auto;
}
@media (min-width: 750px) {
    #top-bar .flex .f-col{
        /* min-width: 200px; */
    }
}
@media (max-width: 580px) {
    #top-bar .flex #secondary-navi{
        position: absolute;
        top: 5px;
        right: 10px;
    }

}
#top-bar .search{
  margin-right: 10px;
}
#top-bar .wp-block-button .wp-block-button__link{
    margin-top: 0;
}

@media (min-width: 800px){
    #top-bar .f-col.right{
        width: 150px;
    }
}


@media screen and (max-width: 583px) {
    body.admin-bar{
        margin-top: calc(-1 * var(--admin-bar));
    }
    body.admin-bar .main-container{
        padding-top: var(--admin-bar);
    }
}

.hero{
    --min-height: calc(max(70vh, 500px) - var(--admin-bar, 0px));
}
.home .hero{
    --min-height: calc(100vh - var(--admin-bar, 0px) - var(--top-bar-height, 80px));
}

.hero.wp-block-group{
    padding-bottom: 0;
}

.hero .core-media-text{
    padding: 0;
}

.hero .bg{
    background: url() no-repeat 50% 20%;
    background-size: cover;
}
.hero .bg .mask{
    text-align: left;
    min-height: var(--min-height);
    padding-top: var(--top-bar-height);
    display: flex;
    position: relative;
    background: rgba(0,0,0,0.15);
}

.home .hero .bg .mask, .hero.landing-page .mask{
    min-height: 500px;
    min-height: var(--min-height);
    position: relative;
}

#top-bar + .hero .bg,
#top-bar + #content .hero .bg{
    /* --top-bar-height: 80px; */
    /* margin-top: var(--top-bar-height) !important; */
}
.hero .inner-blocks{
    z-index: 2;
    align-self: center;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 80px;
}

.hero .wp-block-group.has-background{
    padding: 0;
}

@media (max-width:980px) {
    #top-bar + .hero .bg,
    #top-bar + #content .hero .bg{
        --top-bar-height: 100px;
    }
}
@media (max-width: 750px){
  .home .hero{
    --min-height: 90vh;
  }
}

body .main-container .hero.plain{
    height: 90px;
    padding: 0;
    min-height: 0;
    background: none;
}
.home .main-container .hero.plain{
    height: 0;
}


@media (max-width: 1000px){
    body .main-container .hero.plain{
        height: 100px;
    }
}

.wp-block-group.hero .wp-block-cover{
    max-height: 90vh;
    min-height: var(--min-height);
}
@media (max-width: 640px){
 .wp-block-group.hero .wp-block-cover{
    height: auto;
 }
 .wp-block-group.hero .wp-block-button{
    margin: 0;
 }
}


/* /Header & Top bar*/
/* custom-blocks */

/* nostot */

.nosto-link-container, .nosto-block{
  height: 100%;
  display: block;
  transition: all .2s;
}
.nosto-block{
  border-radius: 25px 25px 0 0;
  overflow: hidden;
}
.nosto-block, .nosto-block .wp-block-group{
  display: flex;
  flex-direction: column;
  --cont-padding: 25px;
}
.nosto-block .wp-block-group .wp-block-cover{
  width: calc(100% + 2 * var(--cont-padding));
  margin: calc(var(--cont-padding) * -1) !important;
  margin-bottom: var(--margin-bottom, 0) !important;
}
.nosto-block .wp-block-buttons{
  margin-top: 0.5em;
  flex-grow: 1;
  align-items: flex-end;
}
.nosto-link-container:hover .nosto-block{
  box-shadow: 0 0 0 1px var(--accent);
  border-radius: 0;
}

.people-nosto .kuva img{
  max-width: 250px;
  margin-bottom: 15px;
}
@media (min-width: 500px){
  .people-nosto .kuva{
    text-align: right;
  }
  .people-nosto .cont{
    padding-left: 5%;
  }

}

.wp-block-acf-person{
  display: flex;
  flex-direction: column;
  height: 100%;
} 
.person .kuva{
  --size: 270px;
  margin-bottom: 1em;
  width: var(--size);
  height: var(--size);
  max-width: 100%;
  display: flex;
  align-items: flex-end;
}
.person .kuva img{
  object-fit: cover;
  object-position: 0 0;
  height: 100%;
  width: 100%;
}
.person .kuva.no-image{
  background: var(--light-grey);
}
.person.small-pic .kuva{
  --size: 200px;
}

.person h4{
  font-size: 1.25em;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
}

.person p{
  margin-bottom: 0.3em;
  line-height: 1.4;
  font-weight: 300;
}
.person .contact{
  align-content: flex-end;
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}

.writer{
  margin-top: 8vh;
}
.writer .person{
  display: flex;
  align-items: center;
}
@media (max-width: 600px) {
  .writer .person{
    display: block;
  }
  
}
.writer .contact,
.writer .job-title{
  display: none;
}

.writer .person .kuva{
  max-width: 200px;
}
#content .writer .person h4 {
  text-align: left;
  margin-top: 0;
}
.writer h5{
  font-family: var(--title-font-italic);
  font-size: 1.4em;
  opacity: 0.5;
  margin-bottom: 0.5em;
}

/* accordion-block */

.accordion-block{
  border-bottom: 1px solid rgba(0,0,0,0.25);
}
.accordion-block.open .accordion-title{
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.accordion-block:first-child{
  border-top: 1px solid rgba(0,0,0,0.25);
}

.accordion-block ol {

}
.accordion-block ol li{
  border:0;
}
.accordion-block .accordion-title{
  font-weight: bolder;
  color: var(--primary);
  background: var(--light-grey);
  cursor: pointer;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion-block .accordion-title:hover{
  background: #fff;
}

.accordion-block.open:hover{
  background: #fff;
}
.accordion-block .accordion-title .text{
  max-width: calc(100% - 50px);
}
.accordion-block .accordion-content{
  max-height: 0;
  padding: 0 20px;
  opacity: 0;
  overflow: hidden;
  transition: all .3s;
}

.accordion-block.open .accordion-content{
  margin-top: 20px;
  margin-bottom: 30px;
  opacity: 1;
  max-height: 3000px;
}

.accordion-block .plus{
    font-size: 30px;
    --color: var(--black);
    color: var(--color);
    display: inline-flex;
    background: #fff;
    width: 1.3em;
    height: 1.3em;
    line-height: 1.3em;
    border-radius: 50%;
    order: 2;
    text-align: center;
    cursor: pointer;
    position: relative;
    transform: rotate(45deg);
}

/* plus/minus */
/* .accordion-block .plus:before, .accordion-block .plus:after{
    content: "";
    width: 14px;
    height: 2px;
    background: var(--color);
    display: block;
    position: absolute;
    top: 0.5em;
    left: 0.3em;
}
.accordion-block .plus:after{
    transform: rotate(90deg);
    transition: all .3s;
}
.accordion-block.open .plus:after{
    transform: rotate(0deg);
} */

/* arrow down/up */
.accordion-block .plus:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 6px;
  transform: translate(-9px, -9px);
  transform-origin: 50% 70%;
  transition: all .3s;
}
.accordion-block.open .plus:before{
  transform: rotate(180deg) translate(4px, 9px);
}
.accordion-block .plus:hover{
  background: var(--light-grey);
}


/* Video block */

.bg-video-block{
  position: relative;
}

.home .bg-video-block {
  min-height: 95vh;
  align-items: center;
  justify-content: center;
  display: flex;
}

.bg-video-block .overlay{
  height: 100%;
  width: 100%;
  background: #000;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
.bg-video-block video.bg-video {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.bg-video-block .content-container{
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 78vh;
}
.bg-video-block .content-container > div{
  flex-grow: 1;
}

.bg-video-block video{
  width: 100%;
  height: auto;
}

/* Timeline */

.timeline-block{
  position: relative;
}
.timeline-block::before{
  content: '';
  height: 100%;
  width: 2px;
  border-left: 2px dashed var(--primary);
  position: absolute;
  left: calc(50% - 1px);
}

.timeline-block .timeline-event{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  margin-bottom: 2em;
  --color: var(--accent);
  --factor: 1;
}

.timeline-block .timeline-event:nth-child(even){
  direction: rtl;
  --color: var(--secondary);
  --factor: -1;
}
/* .timeline-block .timeline-event:nth-child(even) .year{
  order: 2;
} */
.timeline-block .timeline-event .content{
  /* border: 1px solid var(--color); */
  border-inline-start: 10px solid var(--color);
  background: linear-gradient(calc(90deg * var(--factor)), var(--light-gray) 10%, transparent 50%);
  position: relative;
  border-radius: 20px;
  margin-inline-start: 5%;
  min-width: calc(45% - 10px); /* 50% - gap - 1/2*dot */
  flex-basis: calc(45% - 10px);
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
}
.timeline-block .timeline-event .content div{
  padding: 1em 1.2em;
  padding-inline-end: 1em;
  direction: ltr;
  flex-basis: 70%;
  flex-grow: 1;
}
.timeline-block .timeline-event .content div.image{
  direction: ltr;
  flex-basis: 30%;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 0 20px 20px 0;
  min-height: 100px;
}
.timeline-block .timeline-event .year{
  margin-inline-end: 5%;
}
.timeline-block .timeline-event .content h3,
.timeline-block .timeline-event .content h4{
  margin: 0;
}
.timeline-block .timeline-event .content h3 + p,
.timeline-block .timeline-event .content h4 + p{
  margin-top: 0.3em;
}
.timeline-block .timeline-event .content p:last-of-type{
  margin-bottom: 0;
}

.timeline-block .timeline-event .year{
  font-size: 1.5em;
  padding: 0.5em;
  background: var(--color);
  color: #fff;
  border-radius: 50%;
  height: 3.5em;
  width: 3.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.timeline-block .timeline-event .dot{
  width: 20px;
  height: 20px;
  background: var(--primary);
  border-radius: 20px;
}
.timeline-block .timeline-event .timeline-arrow{
  width: 25px;
  height: 40px;
  display: block;
  top: calc(50% - 20px);
  position: absolute;
  margin-inline-start: -24px;
  color: var(--color);
}
.timeline-block .timeline-event:nth-child(even) .timeline-arrow{
  transform: scaleX(var(--factor));
}
.timeline-block .timeline-event .timeline-arrow .inner{
  fill: var(--light-gray);
}

.timeline-block .timeline-event.scroll-anim .content,
.timeline-block .timeline-event.scroll-anim .year{
  opacity: 0;
  transform: translateX(calc(40% * var(--factor)));
  transition: all 1s .6s;
}
.timeline-block .timeline-event.scroll-anim .year{
  transform: translateX(calc(-60% * var(--factor)));
}
.timeline-block .timeline-event.scroll-anim.scrolled .content,
.timeline-block .timeline-event.scroll-anim.scrolled .year{
  opacity: 1;
  transform: none;
}
@media (min-width: 701px) {
  .timeline-block .timeline-event:nth-child(even) .content div.image{
    border-radius: 20px 0 0 20px;
  }
}


@media (max-width: 700px) {
  .timeline-block::before{
    left: calc(1.2em * 3.5 / 2);
  }
  .timeline-block .timeline-event{
    --factor:1 !important;
    direction: ltr !important;
    justify-content: flex-start;
    flex-grow: 1;
    flex-basis: 80%;
  }
  .timeline-block .timeline-event .year{
    font-size: 1.2em;
    background: var(--primary);
    border: 3px solid var(--color);
  }
  .timeline-block .timeline-event .content{
    flex-grow: 1;
    margin: 0;
    padding-right: 0;
    text-align: left;
  }
  .timeline-block .timeline-event .content div.image{
    flex-basis: 100%;
    border-radius: 0 0 20px 13px;
    background-position: 50% 30%;
    min-height: 20vw;
  }
  .timeline-block .timeline-event .dot{
    display: none;
  }
}

.numbers-block {
  text-align: center;
}
.numbers-block .number{
  font-size: 6em;
  font-weight: 800;
  white-space: nowrap;
}
.columns-4 .numbers-block .number{
  font-size: 6em;
}
.columns-5 .numbers-block .number{
  font-size: 4.8em;
}
.numbers-block .number .suffix{
  padding-left: 0.1em;
}
.numbers .number .suffix.plus{
  display: none;
}
.numbers-block .number.done .suffix.plus{
  display: inline;
}
.numbers-block .text{
  font-size: 1.125em;
}
@media (max-width: 800px) {
  .numbers-block .number{
    line-height: 1.2;
  }
}
/* /custom-blocks */

/* Navi */

#menu-top{
  display:block;
  align-items: center;
  display: flex;
}
#top-bar.fixed #menu-top{
  margin-bottom: 0;
}
#top-bar, #top-bar a{
  --text-color: var(--white);
  --border-color: var(--white);
  color: var(--text-color);
}

#top-bar .h4{
  color: inherit;
}

.menu{
  margin:0 auto;
  text-align:right;
  display: flex;
  flex-wrap: wrap;
  gap: 10px min(1.5vw, 30px);
}
.menu ul{
  margin:0;
}
.menu ul ul{
  margin:5px 0px 5px 15px;
}
.menu li,
.main-container .menu li{
  list-style: none;
  padding:0;
  margin:0;
  display:inline-flex;
  align-items: center;
  position: relative;
  /*letter-spacing: 0.03em;*/
}

.menu.drop-down-menu li > ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  align-self: flex-start;
  z-index: 1;
  text-align: left;
  max-width: 100%;
  margin: 0;
  background: rgba(0,0,0,.5);
  background: var(--primary);
  padding: 15px 20px;
  margin-left: -20px;
  border-radius: 6px;
  top: 2.8em;
  max-width: 250px;
  min-width: 170px;
  /* width: calc(100% + 35px); */
  width: fit-content;
  transition: opacity 0.3s;
  /*box-shadow: 0 10px 15px rgba(0,0,0,.15);*/
  /* border: 1px dotted rgba(0,0,0,.15); */
}
.menu.drop-down-menu.lang li > ul {
  min-width: 0;
}
.menu.drop-down-menu li > ul a{
  display: block;
  font-size: 0.9em;
}
.menu .menu-item-has-children,
nav#secondary-navi .menu .menu-item-has-children,
nav#secondary-navi #secondary-menu.menu .menu-item-has-children{
  display: inline-flex;
}
.menu.drop-down-menu .menu-item-has-children .plussa,
.vertical-menu .menu .plussa {
  content: "";
  position: relative;
  border: solid var(--color);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  height: 4px;
  top: 0;
  transform: rotate(45deg) translate(-4px, -4px);
  transform-origin: 20% 50%;
  transition: 0.2s ease-in-out;
}

.vertical-menu .menu .menu-item-has-children > a{
  position: relative;
  padding-right: 1em;
}
.vertical-menu .menu .plussa{
  position: absolute;
  right: 0.2em;
  top: 0.8em;
  cursor: pointer;
}
.vertical-menu li ul{
  max-height: 0;
  margin: 0;
  padding: 0;
  padding-left: 1em;
  overflow: hidden;
  transition: all .7s;
}
.vertical-menu li.ul-open > ul{
  max-height: 2000px;
  padding-bottom: 0.4em;
}
.vertical-menu .menu,
.vertical-menu .menu li{
  display: block;
  text-align: left;
}
.vertical-menu li.ul-open > .plussa{
  transform: scaleY(-1) rotate(45deg) translate(-2px, -2px);
}

#menu-mobile .menu-item-has-children::after{
  display: none;
}
.menu.drop-down-menu .menu-item-has-children:not(.click-open):hover > a .plussa {
  top: 3px;
}

.menu li.menu-item a .icon{
  display: block;
}
.menu li.menu-item a .description{
  font-size: 0.8em;
  opacity: 0.7;
  display: block;
}
.menu li.menu-item a.wp-block-button__link .description{
  font-weight: 400;
  padding-top: 0.1em;
  text-transform: none;
}

.menu.drop-down-menu li ul li {
  display: block;
  margin: 4px 0 4px 0;
  padding: 0;
}

.menu.drop-down-menu li:not(.megamenu.click-open):hover > ul, .menu.drop-down-menu li:not(.megamenu.click-open):focus-within > ul, .menu.drop-down-menu li:not(.megamenu.click-open) ul:hover, .menu.drop-down-menu li:not(.megamenu.click-open).ul-open > ul {
  visibility: visible;
  opacity: 1;
  display: block;
  justify-content: center;
  transition: opacity 0.3s 0.2s;
}

.menu.drop-down-menu .menu li .menu-label, .breadcrumb a{
  display:inline-flex;
  text-decoration:none;
  margin:0;
  background: linear-gradient(to right, var(--border-color, var(--color)), var(--border-color, var(--color)));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  transition: all .3s, color 0s;
}
.menu li a:not(.wp-block-button__link){
  display:inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration:none;
  margin:0;
  padding: 0.2em;
  background: none;
}

.menu li a .title,
span.xoo-wsc-pname a{
  display: inline;
  text-align: left;
  background: linear-gradient(to right, var(--border-color, var(--color)), var(--border-color, var(--color)));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  transition: all .3s, color 0s;
}
.menu li a:hover .title, .menu li.current-menu-item > a .title, .breadcrumb a:hover,
span.xoo-wsc-pname a:hover{
  background-size: 100% 1px;
}
.menu li a .icon{
  margin: 0;
  width: 1.5em;
}
/* .menu li li a{
background-position: 0% 100%;
} */


/* .navigation.f-col {
  display: flex;
  gap: 1em;
  align-items: center;
  width: 80%;
  justify-content: center;
} */


/* megamenu */

#menu-top li.megamenu{
	position: static;
}
#menu-top li.megamenu a.mega-link{
	background-position: 0 1.4em;
}
#menu-top li.megamenu > ul {
  max-width: min(95vw, 1400px);
  width: min(95vw, var(--wrap));
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex!important;
  gap: 20px 6%;
  flex-wrap: wrap;
  padding: 3% 4%;
  justify-content: center;
}
#menu-top li.megamenu > ul > li{
	/*min-width: 250px;*/
	max-width: 20%;
	padding: 0;
}
#menu-top li.megamenu.click-open > ul > li{
	max-width: 30%;
}

#menu-top li.megamenu > ul > li .title{
  /* font-weight: 700; */
}
#menu-top li.megamenu > ul > li > a{
	display: initial;
}
#menu-top li.megamenu > ul > li > a:hover{
  opacity: 1;
}
#menu-top li.megamenu > ul .plussa{
  display: none;
}

#menu-top .menu li.megamenu ul ul{
  display: block;
  position: static;
  visibility: inherit;
  opacity: 1;
  background: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
}
/* #menu-top li.megamenu:focus-within > ul{
  gap: 40px;
} */
ul.sub-menu >.menu-item-has-children::after {
  display: none!important;
}
#menu-top li.megamenu > ul > li > a {
 display: initial;
 font-size: 1.1em;
 /* font-weight: 700; */
 color: var(--primary);
}
#menu-top li.megamenu a {
  padding: 0;
}
#menu-top li.megamenu ul li {
  margin-top: 0.7em;
}

.menu.drop-down-menu li.megamenu.megamenu-open > ul{
    visibility: visible;
    opacity: 1;
}
#menu-top li.megamenu.click-open > ul{
    max-width: min(100vw, 1500px);
    height: 100vh;
    top: 0;
    padding: 15vh 10% 30vh;
    justify-content: flex-start;
}
.megamenu .close{
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--white);
    position: absolute !important;
    right: 30px;
    top: 30px;
    cursor: pointer;
}
#menu-top li.megamenu > ul > li.title{
    max-width: 100%;
    width: 100%;
    text-align: center;
}


#secondary-navi .menu li a {
  color: var(--color);
}

.menu li.lang{
  padding-right: 0;
}
.menu li.lang a{
  text-transform: uppercase;
  font-family: var(--body-font);
  font-size: 0.8em;
  background: var(--grey);
  border-radius: 50px;
  width: 40px;
  height: 40px;
  line-height: 47px;
}
.menu li.lang a:hover{
  background: var(--primary);
  color: var(--color);
}

nav#secondary-navi {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85em;
  margin-top: -1em;
  margin-bottom: 0.5em;
}
nav#secondary-navi ul.menu{
  margin: 0;
}
nav#secondary-navi .lang {
  margin-left: 1.5em;
  padding-right: 0.2em;
}
nav#secondary-navi .lang li{
  text-transform: uppercase;
}
nav#secondary-navi #secondary-menu li {
  margin-right: 0.5em;
}

#footer .menu li{
  display: block;
  text-align: left;
  padding-left: 0;
}


/* /Navi */

/* Post loops */

.loop-wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}
#content > .loop-wrapper{
  margin-bottom: 20px;
  margin-top: 30px;
}
#content > .loop-wrapper.padding-bottom {
  padding-bottom: 5vh;
}

.loop-wrapper .post{
  position: relative;
}

.loop-wrapper .post.button-post:not(.one-row){
  padding-bottom: 60px;
}

.people-wrapper .post{
  display: flex;
  flex-direction: column;
}
.loop-wrapper .image-wrapper{
  margin-bottom: 1.8em;
  aspect-ratio: 7 / 4;
  text-align: center;
}
.people-wrapper .image-wrapper{
  aspect-ratio: 1 / 1;
}
@supports not (aspect-ratio: 7 / 4){
  .loop-wrapper .image-wrapper{
    height: 220px;
  }
}
.old-browser .loop-wrapper .image-wrapper,
.old-browser .people-wrapper .image-wrapper{
    min-height: 220px;
}

.image-wrapper.no-image {
    background: #eee;
    /*box-shadow: inset 0 0 0 30px #fff, inset 0 0 0 31px #ccc;*/
}
.loop-wrapper .image-wrapper img{
  object-fit: cover;
  height: 100%;
  width: auto;
  width: 100%;
}
.loop-wrapper .post-type-post .image-wrapper img,
.people-wrapper .image-wrapper img{
  object-fit: cover;
  width: 100%;
  object-position: 50% 20%;
}

.loop-wrapper .image-wrapper.rounded {
    border-radius: 50%;
    overflow: hidden;
}

.loop-wrapper .text-container{
  display: flex;
  flex-direction: column;
}
.loop-wrapper .text-container .actions{
  order: 5;
}
.loop-wrapper .post .text{
  margin-bottom: 1em;
}
.loop-wrapper .post p{
  font-size: min(20px, 1em);
  /*margin-bottom: 0.2em;*/
}
.loop-wrapper .post .date{
  font-size: 0.94em;
  margin-bottom: 0.2em;
  color: var(--grey);
}

.loop-wrapper .post h2{
  margin-bottom: 0.6em;
}
.people-wrapper .post h2{
  margin-bottom: 0;
}
.loop-wrapper .post h3,
.loop-wrapper .post h4{
  margin-bottom: 0.9em;
}
.loop-wrapper .post .type + h3{
  margin-top: 0.2em;
}
.loop-wrapper .text-container .type{
  color: var(--grey);
  font-size: 0.9em;
  font-weight: 400;
}

.loop-wrapper .post.arkisto{
  margin: 0;
}
.loop-wrapper .post .cont{
  /* border-radius: 2em; */
  /* box-shadow: 0 0 18px rgba(0,0,0,.05); */
  text-align: left !important;
  /* padding: var(--gap); */
  height: 100%;
}

.loop-wrapper .post p.text{
  font-size: 0.94em;
}

@media (max-width: 920px){
 .loop-wrapper .post,
 .people-wrapper .post{
  flex-basis: 50%;
 }
}
@media (max-width: 560px){
 .loop-wrapper .post,
 .people-wrapper .post{
  /*padding-left: 20px;*/
  /*padding-right: 0;*/
  flex-basis: 100% !important;
  margin: 15px 0;
 }
 .loop-wrapper .post.arkisto .cont{
  padding: 6%;
 }
}

/* one-row loop */
.loop-wrapper > .post.one-row{
  grid-column: 1 / -1;
}
.loop-wrapper > .post.one-row .wp-block-button{
    position: static;
}
@media (min-width: 561px){
  .loop-wrapper > .post.one-row.last{
    margin-bottom: 50px;
  }
  .loop-wrapper > .post.one-row .cont{
      display: flex;
      align-items: center;
  }
  .loop-wrapper > .post.one-row .image-wrapper{
      margin-bottom: 0;
  }
  .loop-wrapper > .post.one-row .cont > div{
      flex-basis: 50%;
      width: 50%;
      align-self: stretch;
  }
  .loop-wrapper > .post.one-row .cont .text-container{
      padding: 0 max(4%, 25px);
  }
  .loop-wrapper > .post.one-row:nth-child(odd) .cont .text-container{
      order: -1;
      padding-left: 0;
  }
  .loop-wrapper > .post.one-row:nth-child(even) .cont .text-container{
      padding-right: 0;
  }
}

#content .pagination{
  text-align: center;
  padding: 30px;
  margin-bottom: 6vh;
}
.pagination span:not(.dots){
  color: #000;
  border-bottom: 1px solid #ccc;
}
.pagination span,
.pagination a{
  padding: 0 5px;
}

.loop-wrapper .text-container [class*="field-"]{
  margin-right: 0.5em;
}

/* filters */
.filterbuttons-wrapper, .ajax-more-button{
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  align-items: center;
  align-items: center;
  justify-content: center;
}
.filterbuttons-wrapper a.wp-block-button__link{
  min-width: 0;
  border-radius: 50px;
  font-weight: 400;
}
.filterbuttons-wrapper .active a.wp-block-button__link{
  font-weight: bolder;
}
.ajax-more-button{
  margin-block: 2em;
}
a.ajax-load-more svg {
  height: 2.5em;
  width: 2.5em;
  cursor: pointer;
}
a.ajax-load-more:hover svg path{
  fill: var(--secondary);
}
.ajax-more-button{
  width: 100%;
}
a.filter-button{
  display: inline-flex;
  align-items: center;
  margin-right: 30px;
  font-size: 16px;
  max-width: 250px;
  margin-bottom: 20px;
}
a.filter-button .name{
  font-weight: 700;
  color: var(--grey);
  transition: all .3s;
}
a.filter-button .filter-icon{
  margin-right: 10px;
  transition: all .3s;
}
a.filter-button img,
a.filter-button svg{
  object-fit: contain;
  max-width: 60px;
  height: 50px;
}
a.filter-button svg path,
a.filter-button svg line,
a.filter-button svg rect{
  stroke-width: 7;
}
a.filter-button:not(.active) .filter-icon,
a.filter-button.active:hover .filter-icon{
  filter: contrast(5) invert(69%) sepia(70%) saturate(251%) hue-rotate(1deg) brightness(90%) contrast(88%);
}
a.filter-button:hover .filter-icon{
  filter: none;
}
a.filter-button.active .name,
a.filter-button:hover .name{
  color: var(--primary);
}

.loader {
  position: fixed;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader::after{
  border: 8px solid #f3f3f3;
  border-top: 8px solid var(--primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  animation: spin 1s linear infinite;
  z-index: 9999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: '';
}

/* /Post loops */

/* Mobile buttons & mobile menu */

#mobilebuttons{
    padding: 0;
    display: none;
    position: fixed;
    bottom: 0;
    border-top: 1px solid rgba(200, 200, 200, .4);
    font-size: 15px;
    width: 100%;
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
}
#mobilebuttons .flex{
    flex-wrap: nowrap;
    gap: 0;
}
#mobilebuttons .column{
    flex:1 0 20%;
}
#mobilebuttons .column:not(.mobile-menu){
    background: var(--grey);
}
#mobilebuttons .column:not(.mobile-menu) a{
    color: #fff;
}
#mobilebuttons.menu-open .column:not(.mobile-menu){
    background: #ccc;
}
#mobilebuttons a{
    color: var(--grey);
    text-align: center;
    display: flex;
    justify-content:center;
    align-items: center;
    padding: 5px 0;
    text-decoration: none;
    background: none;
    font-size: 14px;
    height: 100%;
    min-height: 50px;
}
#mobilebuttons .ikoni svg{
    width: 25px;
    fill: currentColor;
    vertical-align: middle;
}
#mobilebuttons .teksti{
    padding: 0 10px;
}

#mobilebuttons .mobile-Email .ikoni svg{
    width: 32px;
}
#mobilebuttons .mobile-Map .ikoni svg{
    width: 23px;
}

#mobilebuttons .column + .column {
    border-left: 1px solid rgba(170,170,170,.6);
}


.mobilemenu{
    display: flex;
    align-items: center;
    font-size: 12px !important;
    height: 2.2em;
    line-height: 2.2em;
    z-index: 999;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    /* --color: var(--grey); */
    --border-radius: 2px;
    background: transparent;
    margin-left: 2em;
}

.mobilemenu span.teksti{
    display: inline-block;
    display: none;
    text-decoration: none;
    order: -1;
    color: var(--color);
    font-size: 1rem;
    padding-left: 10px;
    padding-right: 10px;
}
.mobilemenu span.ikoni{
    position: relative;
    width: 3.5em;
    height: 4px;
    background-color: var(--color);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}
.mobilemenu span.ikoni:before,
.mobilemenu span.ikoni:after,
.mobilemenu span.ikoni{
    border-radius: var(--border-radius, 0px);
}
.mobilemenu span.ikoni:before,
.mobilemenu span.ikoni:after{
    content: '';
    display: block;
    width: 3.5em;
    height: 4px;
    background-color: var(--color);
    position: absolute;
    transition: all .3s;
}
.mobilemenu span.ikoni:before{
    top: -10px;
}
.mobilemenu span.ikoni:after{
    bottom: -10px;
}


.mobilemenu.open span.ikoni{
    background: transparent;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.mobilemenu.open span.ikoni:before{
  width: 3.5em;
  top:-1em;
  transform: translateY(1em) rotate(-45deg);
}
.mobilemenu.open span.ikoni:after{
  width: 3.5em;
  bottom:-1em;
  transform: translateY(-1em) rotate(45deg);
}

#menu-mobile{
    height: 100vh;
    overflow: hidden;
    background: var(--primary);
    color: var(--color, var(--black));
    position: fixed;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    left: 0;
    top: 0;
    /* bottom: 50px; tää pois jos menu topissa*/
    padding: 0 20px;
    font-size: 1.1em;
    line-height: 1.4;
    transition: all .3s;
}

#menu-mobile div{
    height: 100%;
    overscroll-behavior: contain;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-mobile ul{
  margin: 0;
  width: 100%;
}
#menu-mobile ul.menu {
    display: block;
    max-height: 100%;
    max-width: 240px;
    overflow: auto;
    padding-top: 2em;
    padding-bottom: 2em;
}

#menu-mobile li{
  display: block;
  text-align: left;
}
#menu-mobile .menu > li + li{
  padding-top: 0.6em;
}
#menu-mobile .menu > li + li.wp-block-button{
  margin-top: 10px;
}
#menu-mobile li:not(.wp-block-button) a{
  padding: 5px 10px;
}

#menu-mobile.open{
    max-height: 100vh;
    visibility: visible;
    opacity: 1;
    z-index: 9;
}

#menu-mobile ul.menu .plussa{
    font-size: 30px;
    color: var(--color, #fff);
    display: inline-block;
    background: rgba(216, 216, 216, .1);
    width: 1.1em;
    height: 1.1em;
    line-height: 1.1em;
    border-radius: 50%;
    margin: 0px 5px 0 0;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transform: none;
    top: unset;
    right: unset;
    border: none;
}

#menu-mobile ul.menu .plussa:before, #menu-mobile ul.menu .plussa:after{
    content: "";
    width: 14px;
    height: 2px;
    background: var(--color);
    display: block;
    position: absolute;
    top: 0.5em;
    left: 0.3em;
}

#menu-mobile ul.menu .plussa:after{
    transform: rotate(90deg);
    transition: all .3s;
}

#menu-mobile ul.menu li.ul-open > a .plussa:after{
    transform: rotate(0deg);
}

#menu-mobile ul.menu .plussa:hover{
    /* background: #fff; */
}


@media screen and (min-width: 1001px){
    div[class*='-menu-container']{
        display: block !important;
    }
    .mobilemenu,
    #menu-mobile,
    #menu-top li.secondary{
      display: none;
    }
    #secondary-menu{
        display: block;
    }
    .menu .plussa{
        display: none;
    }
}
@media screen and (max-width: 1000px){

    #mobilebuttons, #menu-mobile{
        display: block;
    }
    .mobilemenu{
        display: flex;
    }
    #footer.mobilebuttons{
        margin-bottom: 50px;
    }
   #menu-top,
   #secondary-menu{
    display: none;
   }

 }
/* /Mobile buttons & mobile menu */

/* Modal */

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  max-width: 100% !important;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  align-items: center;
  overflow: hidden;
}
.modal.open{
  display: flex;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fff;
  margin: 10px auto;
  padding: 4%;
  border: 1px solid #888;
  width: 90%;
  max-width: 800px;
  position: relative;
  top:0;
  max-height: 95vh;
  overflow: auto;
}
.admin-bar .modal-content {
    margin-top: 50px;
}
@media (max-width: 500px){
  .modal-content {
    width: 100%;
  }
}

/* The Close Button */
.close-button {
  font-family: auto;
  color: #555;
  background: #e8e8e8;
  font-size: 33px;
  border-radius: 1em;
  text-align: center;
  line-height: 1em;
  position: absolute;
  width: 1em;
  height: 1em;
  top: 8px;
  right: 8px;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

a[data-open]{
  cursor: pointer;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  white-space: nowrap;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  right: 0;
  bottom: -30px;
  font-size: 0.95em;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  transition: opacity 1s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* TABS */
.tabs{
	padding: 20px;
	margin-top: 30px;
}

.tab-link {
	background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	border-radius: 5px 5px 0 0;
	padding: 14px 16px;
	margin-right: 10px;
	transition: 0.3s;
	background: #ddd;
}

.tab-link:hover {
	background-color: #e9e9e9;
}

.tab-link.active {
	background-color: #fff;
}

.tab-content {
	display: none;
	padding: 6px 12px;
}
.tab-content.active {
	display: block;
	background: #fff;
}

/* /Modal */

/* Forms */

form{
  max-width: 500px;
  margin: 50px auto;
  accent-color: var(--primary);
}
button, .button{
    cursor: pointer;
    outline: none;
    border: 0;
    display: inline-block;
}

textarea { overflow: auto; }
input:where(:not([type=radio]):not([type=checkbox])), textarea, select{
    padding: 0.3em 0.8em;
    font: inherit;
    color: var(--black);
    /*letter-spacing: 0.02em;*/
    border:0;
    border:1px solid rgba(140,140,140,.5);
    background: #fff;
    border-radius: 5px;
    width: 100%;
}
textarea:focus,
input:focus{
    outline: none;
}

/* ::placeholder {
  color: var(--black);
  opacity: 1;
} */
/* ::-ms-input-placeholder {
  color: var(--black);
} */

label{
  margin-bottom: 0.3em;
  display: inline-block;
}

/* FORMIDABLE FORMS */
/* .frm_forms input*/

.frm_submit{
  margin-top: 1em;
  text-align: center;
}

.frm_forms input[type=text], .frm_forms input[type=number], .frm_forms input[type=email], .frm_forms input[type=tel], .frm_forms input[type=url], .frm_forms select, .frm_forms textarea {
    display: inline-block;
}
.frm_style_formidable-style.with_frm_style .form-field {
  margin-bottom: var(--field-gap, 10px);
}
.with_frm_style .vertical_radio .frm_checkbox label, .with_frm_style .vertical_radio .frm_radio label{
  display: flex;
  padding: 0%;
  text-indent: 0;
  margin-block: 0.4em;
}
.frm_top_container.vertical_radio label{
  margin-left: 0.5em;
}
.with_frm_style .frm_top_container .frm_primary_label{
  margin-left: var(--label-margin-left, 0px);
  margin-bottom: var(--label-margin-bottom, 0px);
}
input + .frm_error{
  margin-left: var(--label-margin-left, 0px);
}
form, .with_frm_style {
  --title-margin-bottom: 1em;
  --field-height: auto;
  --field-pad: 0.5em 1em;
  --border-radius: 20px;
  --error-color: rgb(255, 53, 53, 0.8);
  --success-color: #17a536;
}
.frm_field_text_container,
.frm_field_textarea_container,
.frm_field_email_container,
.frm_error{
  --label-margin-left: 20px;
}
.with_frm_style .vertical_radio .frm_checkbox input, .with_frm_style .vertical_radio .frm_radio input{
  margin-top: 3px;
  margin-right: 0.7em;
}

.frm_forms .frm_required{
    display: inline-block;
    width: 10px;
    margin-top: -5px;
    color: var(--error-color) !important;
    font-weight: inherit !important;
    vertical-align: text-bottom;
}

fieldset{
  border: 0;
}

.frm_blank_field input, .frm_blank_field textarea, .frm_blank_field select{
  border: 1px solid var(--error-color) !important;
}
.frm_error, .frm_error_style {
  color: var(--error-color) !important;
}
.frm_error, .frm_error_style, .frm_message {
  text-align: center;
}
.frm_error_style, .frm_message {
  background-color: #ffffff;
  border: 1px solid var(--error-color) !important;
  border-radius: 0;
  font-size: inherit;
  margin: 0;
  margin-bottom: 20px;
  padding: 20px;
}
.frm_message{
  border: 1px solid var(--success-color) !important;
  color: var(--success-color) !important;
  font-size: 1.2em;
}
form input[type=text].frm_verify {
    display: none !important;
}
.frm_inside_container label{
  display: none;
}
.frm_field_checkbox_container{
  margin-top: 0.5em;
}
.form-field.bigger{
  font-size: 1.2em;
  margin-bottom: 1em;
}
.with_frm_style .frm_radio input[type=radio], .with_frm_style .frm_checkbox input[type=checkbox] {
  --text-color: var(--accent);
  --border-color: transparent;
  box-shadow: 0 0 0 1px var(--grey-2);
}

.with_frm_style .frm_radio input:focus,
.with_frm_style input:focus,
.with_frm_style .frm_radio:hover input{
    --border-color: transparent;
    --box-shadow: var(--accent);
    border-color: var(--border-color) !important;
    box-shadow: 0 0 0 1px var(--box-shadow) !important;
}
.grecaptcha-badge{
  display: none !important;
}

/* GRAVITY FORMS */
#content .gform_wrapper ul li::before{
    display: none;
}
#content .gform_wrapper ul li,
.gform_wrapper form ul li {
    margin-top: 0em;
    margin-bottom: 0.9em;
    padding-right: 0;
}
.gform_wrapper form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]){
    padding: 0.5em 0.8em;
}
.gform_wrapper form .gform_fields{
  grid-column-gap: 5%;
}
.gform_wrapper form .gfield{
  margin-bottom: 0;
}
.gform_wrapper form .top_label label.gfield_label{
  font-weight: 400;
  display: none; /* label placeholderina */
  display: block;
  margin-bottom: 0.2em;
}
input[type=checkbox],
.gform_wrapper form input[type=checkbox] {
  width: 1.1em;
  height: 1.1em;
  margin: 0.08em 0.5em 0 0;
  vertical-align: text-top;
  /* appearance: none; */
  padding: 0;
}
input[type=checkbox]:checked,
.gform_wrapper form input[type=checkbox]:checked {
  appearance: auto;
}
.gform_wrapper form li.gfield.gfield_error,
.validation_error{
  background-color: rgba(255,223,224,.5);
}
.gform_wrapper .gform_confirmation_message{
    padding: 20px;
    border: 2px solid var(--secondary);
}
.gform_footer{
  text-align: center;
}
.gform_footer .wp-block-button .wp-block-button__link{
  margin-top: 0;
}
.gform_wrapper form ul.gform_fields li.gfield{
  padding-right: 0;
}
.gform_wrapper form h3.gform_title{
  font-size: 1.5em;
  color: inherit;
}
.gform_wrapper .gfield_consent_label{
  font-size: 0.9em;
}

/* Search */

.search-form {
  margin-bottom: 40px;
}
.search-form input::placeholder {
  color: var(--grey);
  font-weight: 400;
}
.search-form input::-ms-input-placeholder {
  color: var(--grey);
  font-weight: 400;
}

.search-form .screen-reader-text{
    display: none;
}
.search-form{
    display: flex;
    position: relative;
    --height: 38px;
    width: 330px;
    max-width: 80vw;
    border: 2px solid var(--secondary);
    border-radius: 20px;
    background: #fff;
}
.search-form label{
    flex-grow: 1;
}
.search-form input{
    width: 100%;
    background: transparent;
    padding:3px 15px;
    border: 0;
    height: var(--height);
    line-height: var(--height);
    transition: all .3s;
}
.search-form button{
    height: 38px;
    height: var(--height);
    background: transparent;
    padding: 7px 12px;
    position: relative;
    z-index: 2;
    transition: all .3s;
}
.search-form button svg{
  height: 100%;
}
.search-form button path{
    fill: var(--secondary);
}
.search-form button:hover path{
    fill: var(--primary);
}

/* Range inputs (sliders) */

.frm_field_range_container{
  text-align: right;
}

.with_frm_style .frm_top_container.frm_field_range_container label.frm_primary_label{
  float: left;
  margin-top: 12px;
}

#content input[type="range"] {
  -webkit-appearance: none;
  margin-right: 15px;
  /* width: 200px; */
  height: 12px;
  --thumb-size: 26px;
  --thumb-color: #fff;
  background: #ccc !important;
  border-radius: 10px;
  background-image: linear-gradient(var(--secondary), var(--secondary)) !important;
  background-size: 0% 100% !important;
  background-repeat: no-repeat !important;
}

/* Input Thumb */
#content input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  margin-top: 0;
  border-radius: 50%;
  background: var(--thumb-color);
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}

#content input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  margin-top: 0;
  border-radius: 50%;
  background: var(--thumb-color);
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}

#content input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  margin-top: 0;
  border-radius: 50%;
  background: var(--thumb-color);
  cursor: ew-resize;
  box-shadow: 0 0 2px 0 #555;
  transition: background .3s ease-in-out;
}


/* Input Track */
#content input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  height: auto;
  box-shadow: none;
  border: none;
  background: transparent;
}

#content input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  height: auto;
  box-shadow: none;
  border: none;
  background: transparent;
}

#content input[type="range"]::-ms-track {
  -webkit-appearance: none;
  height: auto;
  box-shadow: none;
  border: none;
  background: transparent;
}


/* reset pw */

body.login #login{
  width: 370px;
}

body.login #login h1 a{
  background: none;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-indent: 0;
  width: unset;
  height: unset;
}

body.login #login .message{
  box-shadow: none;
  border-left: 4px solid #ccc;
}
body.login #login #login_error{
  box-shadow: none;
}
body.login #login .description{
  font-size: 0.9em;
}
body.login #login .button{
  float: none;
}
body.login #login .button.wp-generate-pw{
  font-size: 0.9em;
  color: #000;
  background: #fff;
  border: 1px solid var(--primary);
  font-weight: 400;
}


/* /Forms */

/* Footer */

#footer{
  position: relative;
  font-size: 0.95em;
}

#footer .socials {
  margin-top: 1.2em;
}

#footer .socials img {
  filter: var(--primary-filter);
  max-width: 30px;
}

#footer a {
}

/* #footer a:hover {
  background-size: 200% 1px;
} */

#footer h4 {
  font-weight: 400;
  margin-bottom: 1em;
}


#footer p {
  margin-top: 0.5em;
}

#footer .wp-block-group.is-style-full-width.has-primary-background-color{
  background-color: var(--footer-bg) !important;
}

#footer ul li{
  margin-bottom: 0.5em;
  line-height: 1.5;
}

#footer .wp-block-buttons{
  margin-top: 1em;
  margin-bottom: 2em;
}

#footer .wp-block-columns .wp-block-columns .wp-block-column{
  padding-top: 0;
}
#footer .wp-block-columns{
  justify-content: space-between;
}

#footer h3 {
  color: var(--white);
}

#copy{
  padding: 20px 0;
  padding-inline: 0 !important;
  position: absolute;
  bottom: 0;
  left: 0;
}

#copy > p,
#copy > div > p,
#copy .wp-block-column{
  opacity: 0.75;
}

#copy .wp-block-column{
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 840px) {
#footer #copy .wp-block-column{
  flex-basis: auto !important;
  min-width: 0;
  flex-grow: 1;
  margin-left: 0;
}
#copy .has-text-align-center{
  text-align: center;
}
#footer #copy .wp-block-column.empty-column{
  min-width: 0;
}
}

/* Sigi */
.mek-sigi {
  position: absolute;
  z-index: 99;
  bottom: 5px;
  right: 10px;
  padding: 0 !important;
  opacity: 0.3;
  transition: all .3s;
}
.mek-sigi:hover {
  opacity: 1;
}

/* wp muokkaa-nappi */
span.muokkaa{
  text-align:right;
  position: absolute;
  right: 1%;
  margin-top: -30px !important;
  z-index: 999;
}
span.muokkaa a{
  text-decoration:none !important;
  background:none !important;
}
span.muokkaa a:after{
  display:none;
}
span.muokkaa a:before{
  content: '\f464' !important;
  font: 400 22px/24px dashicons;
  background: #cfcfcf;
  color:#000;
  border-radius:24px;
  -moz-border-radius:24px;
  -webkit-border-radius:24px;
}
span.muokkaa a:hover:before{
  background:var(--primary);
  color:#fff;
}

/* GDPR plugari */

.gdpr.gdpr-privacy-bar .gdpr-wrapper .gdpr-content a {
  color: #fff !important;
  text-decoration: underline;
}
.gdpr.gdpr-privacy-bar .gdpr-wrapper .gdpr-content a:hover {
  text-decoration: none;
}

/* /Footer */
/*Woocommerce*/

:root{
    --red: #d13d3d;
    --yellow: #ecad00;
    --green: #35b53a;
    --onsale: #eb4d4d;
}

.role-discount.onsale{
    --onsale: #dbcab1;
}


.checkout-button{
    border-radius: 0; 
    width: 100%;
    margin-top: 0;
}

.woocommerce-page #content form.cart .button:before{
}

:where(.woocommerce-info, .woocommerce-breadcrumb, .product_meta, .woocommerce-cart-form) a, :where(.product-name) a .title, .accordion-content a{
    color: var(--color, var(--secondary));
    background: linear-gradient(to right, var(--underline, rgba(140,140,140,.5)) 50%, transparent 50%);
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: all .3s;
}
:where(.woocommerce-info, .woocommerce-breadcrumb, .product_meta, .woocommerce-cart-form) a:hover, :where(.product-name) a .title:hover, .accordion-content a:hover{
    background-position: 0% 100%;
}

#content .woocommerce-breadcrumb {
    margin-bottom: 3em;
}

.woocommerce-page #content .woocommerce-cart-form .button{
    padding-right: 1.2em;
    min-width: 0;
}
.woocommerce-page #content .woocommerce-cart-form .button::after,
.woocommerce-page #content a.add_to_cart_button:before,
.woocommerce .products ul::after, .woocommerce ul.products::after{
    display: none;
}

.woocommerce div.product form.cart,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
    display: flex;
    flex-wrap: wrap;
}
.woocommerce div.product form.cart .variations{
    max-width: 400px;
}
.woocommerce input.qty{
    height: 100%;
    border-radius: 0;
    text-align: center;
    margin-right: 0.8em;
}

.woocommerce ul.products li.product .add_to_cart_button::after{
    display: none;
}

/* .woocommerce ul.products li.product a h2.woocommerce-loop-product__title,
.wc-block-grid__product-title {
    text-align: center;
    font-family: var(--body-font);
    font-weight: inherit;
    color: inherit;
    padding-block: 1em;
} */


a.more-link {
    font-weight: 700;
    margin-top: 1em;
}

.woocommerce ul.products li.product a img,
.wc-block-grid__products .wc-block-grid__product-image img {
    margin-bottom: 0;
    mix-blend-mode: multiply;
}


.woocommerce-info {
    margin-top: 2em;
    border-top-color: var(--primary);
}

.woocommerce-info::before {
    color: var(--primary);
}

.woocommerce ul.products::before {
    display: none;
}


/* .woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
    display: none;
} */


.single-product td {
    padding: 0.2em 0.8em;
}

.pswp__bg  {
    opacity: 0.85!important;
}

.single-product #content button {
    max-width: 230px;
}

.single-product .grid-layout-container {
    display: grid;
    gap: 20px 6%;
    grid-template-columns: 54% 40%;
    justify-content: space-between;
}
@media (min-width: 769px) {
    .single-product .grid-layout-container > div {
        width: auto !important;
    }
    .single-product .grid-layout-container .images{
        width: auto !important;
    }
    .single-product .grid-layout-container > div.summary {
        grid-row: 1/4;
        grid-column: 2/3;
    }
    .single-product .grid-layout-container > div.summary .sticky{
        position: sticky;
        top: 150px;
    }
}
@media (max-width: 768px) {
    .single-product .grid-layout-container {
        grid-template-columns: 100%;
    }
}
.single-product .accordion-block:first-child{
    border-top: 0;
}
.single-product .accordion-block .accordion-title{
    background: none;
    color: inherit;
    font-weight: inherit;
    font-size: 1.2em;
    padding: 10px 0;
}
.single-product .accordion-block .accordion-content{
    /* padding: 0; */
    /* margin-top: 0; */
}

.single-product .accordion-block .accordion-content li{
    line-height: 1.5;
}


.single-product h1 {
    text-align: left;
    font-family: var(--body-font);
    font-size: var(--h3, 28px);
    font-weight: 500;
    margin-top: 2vh;
    text-transform: uppercase;
}
.single-product h2 {
    font-size: var(--h3, 28px);
}



.single-product form.cart {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 0;
}

.single-product div.product p.price, 
.single-product div.product span.price,
ul.wc-block-grid__products li.wc-block-grid__product .price,
.woocommerce ul.products li.product .price {
    color: var(--black);
    font-weight: 700;
    font-size: 2.5em;
    position: relative;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5em;
}
.single-product p.price > .amount .decimals,
.single-product p.price ins .decimals{
    font-size: 0.6em;
    vertical-align: text-top;
    padding-left: 0.1em;
    line-height: 1.85;
}
ul.wc-block-grid__products li.wc-block-grid__product .price,
.woocommerce ul.products li.product .price{
    font-size: 1.2em;
    line-height: 1;
    color: inherit;
    text-align: center;
    justify-content: center;
    margin-bottom: 0.6em;
    margin-top: 0.4em;
    width: 100%;
}

/* stock */

li.product .stock,
.dgwt-wcas-stock,
.summary .stock{
    --margin-bottom: 0;
    color: var(--color) !important;
}
li.product .stock{
    font-size: 0.85em;
}
.stock.nostock{
    --color: var(--grey);
}
.stock.instock{
    --color: var(--green);
}
.stock.outofstock,
.stock.onbackorder{
    --color: var(--red);
    margin-bottom: 1em;
}
.stock.lowstock{
    --color: var(--yellow);
}

li.product .description{
    font-size: 0.85em;
    color: var(--grey);
    flex-grow: 1;
}

.qty-block{
    display: flex;
    align-items: center;
    border-radius: 2em;
    border: 1px solid rgba(0, 0, 0, 0.12);
    width: 8em;
    justify-content: space-evenly;
    justify-content: center;
    gap: 0.2em;
}
.qty-block .quantity,
.qty-block input.qty{
    margin: 0 !important;
}
.woocommerce .qty-block input.qty{
    border-top: 0;
    border-bottom: 0;
    padding: 0;
    font-size: 1em;
    font-weight: 700;
    width: 2.5em;
}
.qty-minus, .qty-plus{
    font-size: 1.4em;
    font-weight: 300;
    width: 1.5em;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.qty-minus:hover, .qty-plus:hover{
    color: var(--primary);
}

.single-product div.product div.images img {
    margin-bottom: 1em;
    background: var(--light-grey);
    mix-blend-mode: multiply;
}

.woocommerce-product-details__short-description {
    margin-bottom: 2em;
}

.single-product .product_meta{
    margin-top: 1em;
}
.single-product .product_meta > span{
    display: block;
}

.single-product .variations tr {
    display: flex;
    flex-direction: column;
    max-width: 200px;
    max-height: 80px;
    margin-bottom: 1em;
}

.single-product .variations label {
    font-size: 1.2em;
}

.wc-block-grid__products .wc-block-grid__product-image img[alt=""] {
    border: none;
}

.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    background: var(--light-grey);
    padding: 0.5em;
}

#content .wc-block-grid__product-title,
ul.products li.product .woocommerce-loop-product__title {
    color: var(--primary);
    font-weight: 500;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
    margin-right: 1em;
    width: 100px;
    transition: all 0.3s;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2):hover {
    transform: scale(1.05);
}
.woocommerce-product-gallery__image a{
    cursor: zoom-in;
}

.single-product img.fancybox-image {
    padding: 1em;
}

.single-product span.tagged_as {
    display: none!important;
}

.zoomImg{
    cursor: crosshair;
}

section.related.products {
    margin-top: 6em;
}

.single-product .quantity input::-webkit-outer-spin-button,
.single-product .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.single-product .quantity input[type=number] {
  -moz-appearance: textfield;
}

/*Ostoskoriin liittyvät*/

span.xoo-wsc-pname {
    max-width: 150px;
}

.xoo-wsc-product {
    padding: 25px 15px;
}




.xoo-wsc-sm-sales {
    display: none;
}

a.cart-icon {
    align-self: center;
    position: relative;
    display: inline-block;
}
.navigation a.cart-icon {
    margin-top: 2px;
    margin-left: 1em;
}
#top-bar a.cart-icon,
#top-bar ul.account-menu{
    flex-shrink: 0;
}
a.cart-icon svg *,
ul.account-menu svg *{
    fill: var(--color, var(--primary));
    transition: .2s;
}
a.cart-icon:hover svg *,
ul.account-menu:hover svg *{
    fill: var(--secondary);
}

@media (max-width: 800px) {
    ul.account-menu{
        font-size: 1.15em;
    }
}
#top-bar ul.account-menu.open ul{
    visibility: visible;
    opacity: 1;
}
#top-bar ul.account-menu ul.logged-out{
    max-width: 350px;
    min-width: 300px;
    right: 0;
    transform: translateX(24%);
}


a.cart-icon .cart-icon-count {
    position: absolute;
    top: -8px;
    right: -10px;
    border-radius: 50%;
    background-color: var(--secondary);
    font-size: 12px;
    width: 20px;
    height: 20px;
    color: var(--white);
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation ul.account-menu{
    margin-left: 1em;
    position: relative;
}
.account-menu.menu.drop-down-menu li > ul{
    right: 50%;
    transform: translateX(50%);
    top: 100%;
}
.navigation ul.account-menu + a.cart-icon{
    margin-left: 0;
}

#content a.added_to_cart.wc-forward {
    display: none;
}

.coupon {
    display: flex;
}

.coupon input {
    width: unset!important;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: var(--btn-color);
}

#add_payment_method table.cart img, .woocommerce-cart table.cart img, .woocommerce-checkout table.cart img {
    max-width: 70px;
    width: 100%;
}

td.product-subtotal {
    font-weight: 700;
}

.woocommerce-message, .woocommerce-error {
    margin-top: 2em;
}
#content ul.woocommerce-error li{
    display: block;
}

.woocommerce form {
    max-width: unset;
}

p.return-to-shop {
    margin-top: 2em;
}

mark.count, .woocommerce-cart .actions button:before {
    display: none;
}

.woocommerce a.remove{
    filter: grayscale(1) brightness(2);
    line-height: 0.9;
    font-weight: inherit;
}
.woocommerce a.remove:hover{
    filter: none;
}

.woocommerce-page input {
    accent-color: black;
}

#content .back-to-shop a {
    width: 200px;
    text-align: center!important;
}

.back-to-shop a:before {
    display: none;
}

.back-to-shop {
    margin-bottom: 1.5em;
}

form.cart button.single_add_to_cart_button{
    font-size: 1.15em;
}


/*Kategoria*/

.tax-product_cat h1 + .term-description {
    margin-top: 2em;
}

/*Kassa/checkout/oma-tili*/


.woocommerce-account #content form button {
    margin-top: 1.2em;
}


#payment .button{
    font-size: 1.15em;
}
form.woocommerce-checkout{
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
    justify-content: space-between;
}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
    float: none;
    width: unset;
}

.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
    float: left;
    width: 48%;
}

.woocommerce-account .u-columns {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    margin-top: 2em;
}


.woocommerce .col2-set::after, .woocommerce .col2-set::before,
.woocommerce-page .col2-set::after, .woocommerce-page .col2-set::before {
    display: none;
}

form.woocommerce-ResetPassword.lost_reset_password {
    max-width: 700px;
    width: 100%;
}

.woocommerce-lost-password p {
    max-width: 700px;
    margin-inline: auto;
}

ul.logged-out .button {
    background: var(--secondary);
    color: var(--white);
    border-radius: 0;
    transition: 0.3s ease;
}

ul.logged-out .button:hover {
    background: var(--light-grey);
    color: var(--primary);
}


.woocommerce-account .addresses .title .edit {
    float: right;
    padding: 0.3em 1em;
    border-radius: 5px;
    color: var(--text-color);
    --border-color: var(--primary);
    --text-color: var(--border-color);
    box-shadow: inset 0 0 0 1px var(--border-color, var(--btn-color));
    background: transparent;
    border: 0;
    transition: 0.3s ease;
}


.woocommerce-account .addresses .title .edit:hover {
    background: var(--primary);
    color: var(--white);
    border: 0;
}

.woocommerce-account.woocommerce-page #content .edit-account .button,
.woocommerce-account.woocommerce-page #content .woocommerce-address-fields .button{
    margin-top: 1.2em;
}

.woocommerce-account h3 {
    font-size: clamp(1.2em, 5vw, 28px);
}


tr.woocommerce-shipping-totals.shipping {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

#shipping_method li {
    font-weight: 400;
}

.woocommerce-checkout-review-order-table td {
    min-width: 120px;
}

#content tr.woocommerce-shipping-totals.shipping th {
    border-top: none;
}

.woocommerce ul#shipping_method {
    margin-top: 1em;
}

#content tfoot th, .woocommerce-checkout-review-order-table .product-quantity,
.woocommerce-checkout-review-order-table bdi, #content tfoot td {

    font-weight: 500;
}

#content .woocommerce-checkout-review-order-table .order-total.amount {
    font-weight: 700;
}

.woocommerce-order-received table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
    border: none;
}


.woocommerce-order-received .woocommerce-order {
    max-width: 750px;
    width: 100%;
    margin-inline: auto;
}




@media (min-width: 750px) {
    form.woocommerce-checkout #customer_details{
        flex-basis: 45%;
    }
    .order-review {
        flex-basis: 48%;
    }
}

form.woocommerce-checkout .col-1{
    margin-bottom: var(--gap);
}
.order-review .sticky{
    position: sticky;
    top: 150px;
}
.woocommerce-checkout .woocommerce-form-login{
    max-width: max(45%, 350px);
}
.woocommerce-checkout .woocommerce-form-login p{
    float: none;
    margin-inline: 0;
    width: 100%;
}

.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{
    display: block;
}

form.checkout_coupon.woocommerce-form-coupon{
    display: block !important;
}
.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout-review-order-table .product-name a{
    display: flex;
    align-items: center;
}
.woocommerce-checkout-review-order-table td.product-name{
    justify-content: space-between;
}
.woocommerce-checkout-review-order-table .product-name a{
    gap: 5%;
    flex-grow: 1;
}
.woocommerce-checkout-review-order-table img{
    width: 50px;
}
@media (max-width: 800px) {
    .woocommerce-checkout-review-order-table .product-name a{
        flex-direction: column;
        align-items: flex-start;
    }
    .woocommerce-checkout-review-order-table .product-name img{
        width: 35px;
    }
}
@media (max-width: 400px) {
    .woocommerce table.shop_table{
        font-size: min(1em, 14px);
    }
}
.woocommerce-error::before {
    left: 0.5em;
}

.woocommerce ul#shipping_method li input {
    width: 1em;
    margin-right: 0.6em;
    margin-top: 0.3em;
}

#ship-to-different-address {
    margin-bottom: 5px;
}


p.woocommerce-notice {
    margin-top: 2em;
    text-align: center;
    font-size: clamp(1.1em, 6vw, min(2.5em, 48px));
    font-weight: 700;
    color: var(--red);
}

.woocommerce-order-overview {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.woocommerce-customer-details h2, .woocommerce-order-details h2 {
    margin: 1em 0;
}

.woocommerce .woocommerce-customer-details address {
    padding: 1em;
}

.input-radio {
    width: 1em;
}

.woocommerce-checkout #payment ul.payment_methods li {
    list-style: none;
}


@media(max-width: 768px) {
    .woocommerce-shipping-fields {
        margin-top: 2em;
    }
    .woocommerce ul.order_details li {
        width: 100%;
    }
    form.woocommerce-checkout {
        flex-direction: column;
    }
    .woocommerce-account .u-columns {
        flex-direction: column;
    }
    .woocommerce-account .col2-set .col-1, .woocommerce-account .col2-set .col-2,
    .account-side-bar {
        width: 100%;
    }
}
h3#ship-to-different-address{
    float: none;
    font-size: 1.15em
}
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox{
    display: flex;
    align-items: center;
    gap: 5px;
}
.woocommerce-additional-fields{
    margin-top: 1em;
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment{
    background: var(--light-grey, rgba(0,0,0,.1));
}
#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box{
    background: rgba(0, 0, 0, 0.05);
    background: #fff;
}
#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before{
    border-bottom-color: #fff;
}
#add_payment_method #payment ul.payment_methods, 
.woocommerce-cart #payment ul.payment_methods, 
.woocommerce-checkout #payment ul.payment_methods{
    border: 0;
}


/*Archive*/

.woocommerce nav.woocommerce-pagination {
    margin-top: 2.5em;
}

.archive .woocommerce ul.products {
    margin-top: 3em;
}
.archive .cont {
    display: flex;
    gap: 50px;
    font-size: 0.9em;
}
.products-area{
    flex-grow: 1;
}
.archive .left-menu .menu{
    font-size: 1em;
    --color: var(--primary);
    /* padding: 10px; */
    /* background: var(--light-grey); */
}
.archive .left-menu .current-cat > a{
    color: var(--accent);
}
.filters-bar{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.filters-bar *{
    margin: var(--margin, 0) !important;
}
.filters-bar .wp-block-button{
    visibility: hidden;
}
.filters-bar .wp-block-button__link{
    margin: 0;
}
@media (min-height: 800px) {
    .archive .left-menu .menu{
        position: sticky;
        top: 150px;
    }
}

@media (max-width: 1000px) {
    .filters-bar .wp-block-button{
        visibility: visible;
    }
    .archive .left-menu{
        font-size: 1.15em;
        max-width: 300px;
        position: fixed;
        left: -300px;
        top: 0;
        background: var(--white);
        height: 100vh;
        overflow: auto;
        z-index: 9999;
        transition: all 0.5s;
    }
    .archive .left-menu .menu{
        padding: 20px;
    }
    .left-menu-open .left-menu{
        left: 0;
    }
    body.left-menu-open::after{
        content: '';
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(0, 0, 0, 0.4);
    }
}

.woocommerce.archive h1.page-title{
    margin-block: 0;
}

.wc-block-grid__product-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
    background: none;
}


/* .archive .wp-block-button__link {
    max-width: 370px;
} */

.archive .svg-arrows svg {
    width: 30px;
    transform: rotate(180deg);
    background: var(--black);
    border-radius: 50%;
}

.woocommerce .star-rating{
    float: none;
}

#content .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
div.woocommerce-form-coupon-toggle{
    display: none;
}

.woocommerce #content ul[class] li {
    margin-left: 0;
}
.woocommerce ul.products,
.wc-block-grid ul.wc-block-grid__products{
    display: flex !important;
    flex-wrap: wrap;
    width: auto;
    gap: min(50px, 5vw) var(--gap);
    margin: 0;
}
.wc-block-grid.has-5-columns,
ul.products.columns-5{
    font-size: 0.9em;
}
.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product,
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product{
    flex-grow: 0;
    border: 0;
    max-width: 100%;
    font-size: inherit !important;
}

.wc-block-grid.has-4-columns li.wc-block-grid__product,
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
    flex-basis: calc((100% + var(--gap)) / 4 - var(--gap));
}
.wc-block-grid.has-5-columns li.wc-block-grid__product,
ul.products.columns-5 li.product{
    flex-basis: calc((100% + var(--gap)) / 5 - var(--gap));
}
.wc-block-grid.has-3-columns li.wc-block-grid__product{
    flex-basis: calc((100% + var(--gap)) / 3 - var(--gap));
}
.wc-block-grid.has-2-columns li.wc-block-grid__product{
    flex-basis: calc((100% + var(--gap)) / 2 - var(--gap));
}
@media(max-width: 768px) {
    .wc-block-grid.has-5-columns li.wc-block-grid__product,
    .wc-block-grid.has-4-columns li.wc-block-grid__product,
    .wc-block-grid.has-3-columns li.wc-block-grid__product,
    #content .woocommerce ul.products li.product, .woocommerce #content ul.products li.product {
        flex-basis: calc((100% + var(--gap)) / 2 - var(--gap));
    }
}
@media(max-width: 389px) {
    .wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product,
    #content .woocommerce ul.products li.product, .woocommerce #content ul.products li.product {
        flex-basis: 100%;
        gap: 0;
    }
}

#content ul.wc-block-grid__products li.wc-block-grid__product,
#content ul.products li.product{
    display: flex;
    flex-direction: column;
    margin: 0;
    gap: 0.6em;
    padding: 5px;
    transition: background 0.3s ease;
    padding-top: 1.5em;
    padding-bottom: 0.5em;
}
ul.wc-block-grid__products li.wc-block-grid__product:hover,
#content ul.products li.product:hover{
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
ul.wc-block-grid__products li.wc-block-grid__product a,
ul.products li.product a{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.wc-block-grid ul.wc-block-grid__products li.wc-block-grid__product :is(a) > *,
ul.products li.product :is(a) > *{
    margin-bottom: var(--margin-bottom, min(4%, 0.7em));
    padding-inline: 2%;
}

ul.wc-block-grid__products li.wc-block-grid__product .wp-block-button,
.woocommerce ul.products li.product a.button,
ul.products li.product .button{
    flex-grow: 0;
    min-width: unset;
    max-width: 100%;
    align-self: center;
    --padding-x: 2em;
    margin: 0.4em 0.4em 0.8em;
}
ul.wc-block-grid__products li.wc-block-grid__product .wp-block-button__link{
    min-width: 0;
    margin: 0;
}
ul.wc-block-grid__products li.wc-block-grid__product .wp-block-button__link,
ul.products li.product .button{
    font-weight: 400;
}

#content ul.wc-block-grid__products li.wc-block-grid__product span.amount,
#content ul.products li.product span.amount{
 font-weight: 400;
}



.woocommerce .woocommerce-ordering select {
    padding: 0.3em;
    border-radius: 0;
    margin-bottom: 0.8em;
}

.woocommerce .button, .woocommerce button{
    text-align: center;
}

@media(max-width: 500px) {
    .woocommerce-message {
        display: flex;
        flex-direction: column-reverse;
    }
}


/*Alennus*/

.price ins, .woocommerce div.product p.price ins, .woocommerce div.product span.price ins, .woocommerce ul.products li.product ins{
    text-decoration: none;
}
ul.wc-block-grid__products li.wc-block-grid__product .price del, .woocommerce div.product p.price del, .woocommerce div.product span.price del, .woocommerce ul.products li.product del{
    font-size: 0.9em;
    opacity: .5;
    padding-right: 0.5em;
    font-weight: 400;
    order: 2;
}

/* .woocommerce div.product p.price del{
    font-size: 0.6em;
} */


span.new-item {
    position: absolute;
    padding: 0.6em 1em !important;
    line-height: 1;
    border-radius: 50px;
    top: 0.8em;
    left: 0.5em;
    z-index: 1;
    color: var(--white);
    background: var(--primary);
}

li.wc-block-grid__product .onsale,
.woocommerce ul.products li.product .onsale,
.single-product .grid-layout-container span.onsale{
    top: 0.8em;
    right: 0.5em;
    left: auto;
    margin: 0;
    position: absolute;
    background: var(--onsale);
    color: var(--white);
    padding: 0.6em 0.8em;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    min-height: 0;
    font-weight: 400;
    font-size: 1em;
    line-height: 1;
}
.single-product .grid-layout-container span.onsale{
    right: unset;
    top: 1em;
    left: 1em;
}

/*up & cross-sells */

.woocommerce-page .cross-sells{
    background: var(--light-grey);
    padding: 1.5em 1em;
    border-radius: 0.5em;
    margin-bottom: 2em;
}
.woocommerce-page .cross-sells > h2{
    --max-size: 1.8em;
    text-align: center;
}
.woocommerce-page .cross-sells ul{
    justify-content: center;
    margin-bottom: 0;
}
.woocommerce-page .cross-sells li {
    max-width: 155px;
}
@media (min-width:600px) {
    .woocommerce-page .cross-sells{
        font-size: 0.9em;
    }
}
@media (max-width: 599px) {
    .woocommerce-page .cross-sells li img{
        margin: auto !important;
    }
    .woocommerce-page .cross-sells li:nth-child(1n+3){
        display: none !important;
    }
}

/* Mini cart */

li.woocommerce-mini-cart-item{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
li.woocommerce-mini-cart-item img{
    width: 100px;
}

/*Side cart plugari */

.xoo-wsc-cart-trigger {
    display: flex;
    gap: 0.5em;
}

.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn {
    max-width: 100%;
}
.xoo-wsc-product,
span.xoo-wsc-smr-del {
    transition: 0.3s ease;
}

.xoo-wsc-product:hover {
    box-shadow: rgb(50 50 93 / 25%) 0px 5px 6px -2px, rgb(0 0 0 / 30%) 0px 3px 1px -3px;
}


span.xoo-wsc-smr-del.xoo-wsc-icon-trash {
    background: white;
    width: 25px;
    height: 25px;
    display: grid;
    align-content: center;
    text-align: center;
    border-radius: 50%;
}

span.xoo-wsc-smr-del.xoo-wsc-icon-trash:hover {
    background: red;
    color: var(--white);
    
}

.xoo-wsc-sp-container {
    background-color: var(--light-grey);
    min-height: 200px;
    height: auto;
    padding: 1em 0.3em;
    border-radius: 10px;
    margin-top: 1em;
}

span.xoo-wsc-sp-price {
    margin-bottom: 0.5em;
}

li.xoo-wsc-notice-success {
    margin-left: 0;
    text-align: center;
}

span.xoo-wsc-sp-atc a.button {
    background: var(--primary);
    color: var(--white);
    
}

.xoo-wsc-qtb-circle .xoo-wsc-chng {
    background: none;
    transition: 0.3s ease;
    height: 18px;
    color: var(--primary);
    padding-bottom: 3px;
}

span.xoo-wsc-plus.xoo-wsc-chng:hover,
span.xoo-wsc-minus.xoo-wsc-chng:hover {
    background: var(--primary);
    color: var(--white);
}


.xoo-wsc-qtb-circle input[type="number"].xoo-wsc-qty {
    margin: 0px 10px;
    min-width: 50px;
}

span.xoo-wsc-ft-amt-label {
    font-weight: 400;
}

.xoo-wsc-ft-amt.xoo-wsc-ft-amt-subtotal bdi,
.xoo-wsc-ft-amt.xoo-wsc-ft-amt-subtotal span.xoo-wsc-ft-amt-label,
.xoo-wsc-ft-amt.xoo-wsc-ft-amt-tax.add, .xoo-wsc-ft-amt.xoo-wsc-ft-amt-tax.add bdi {
    font-size: 0.8em;
    line-height: 2;
}

.xoo-wsc-ft-amt.xoo-wsc-ft-amt-total bdi {
    font-weight: 600;
}

span.xoo-wsc-smr-ptotal bdi {
    display: none;
}

.xoo-wsc-sm-left, .xoo-wsc-sum-col {
    position: relative;
}

.xoo-wsc-pprice bdi {
    font-size: 1.1em;
}

.xoo-wsc-qty-box.xoo-wsc-qtb-circle {
    position: absolute;
    bottom: -25px;
    right: 10px;
    border: 1px solid var(--light-grey);
    border-radius: 500px;
    margin-bottom: 0.7em;
}

.xoo-wsc-qtb-circle input[type="number"].xoo-wsc-qty {
    border: none;
    min-width: 25px;
}



.xoo-wsc-qty-box {
    padding-inline: 7px;
    max-width: 100px;
}

.xoo-wsc-sm-right {
    position: absolute;
    top: 10px;
    right: 0;
}

span.xoo-wsc-sp-heading {
    font-weight: 400;
}


/*Image flip*/

li.product .product-image{
    display: grid;
    justify-content: center;
    padding: 0 !important;
}
li.product .product-image img{
    grid-area: 1/1;
    transition: opacity 0.3s;
}
li.product .product-image img:nth-child(2){
    opacity: 0;
}
li.product .product-image:hover img:nth-child(2){
    opacity: 1;
}


/*Tuotearviot*/

.woocommerce #reviews #comments .commentlist>li::before {
    display: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin: 0;
    background-color: var(--light-grey);
    padding: 2em;
    border: none;
}

strong.woocommerce-review__author {
    color: black;
    text-transform: capitalize;
    font-size: 1.2em;
}

.woocommerce .star-rating span::before {
    color:hsl(49, 100%, 50%);
}

.woocommerce p.stars a {
    color:hsl(49, 100%, 50%);
    background-size: 0;
}

.woocommerce ul.products li.product .star-rating {
    margin-inline: auto;
}

.woocommerce #reviews #comments h2 {
    clear: none;
    font-size: 1.5em;
    margin-bottom: 2em;
    color: var(--black);
}

.woocommerce #review_form #respond .form-submit input {
    max-width: 230px;
}


.woocommerce textarea#comment {
    min-height: 200px;
}

.comment_container {
    max-width: 1000px;
    width: 100%;
}

/* My account */

.woocommerce-notices-wrapper{
    width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap) * 2);
}
.my-account-content{
    flex-grow: 1;
}
.woocommerce-MyAccount-content .box, .woocommerce-MyAccount-content .woocommerce-Address{
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: var(--gap);
    margin-bottom: var(--gap);
}

/*Ilmoitukset*/

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border-top: none;
}

.woocommerce-error {
    background-color: hsl(356, 53%, 90%);
}

.woocommerce-message {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
}
.woocommerce-info {
    border: 0;
    padding: 0;
    background: 0;
}
.woocommerce-info::before {
    padding: 1em 2em;
    border-radius: 5px;
    display: none;
}

@media(max-width: 500px) {
    .woocommerce-message {
        flex-direction: column-reverse;
        gap: 1em;
        align-items: flex-start;
    }
}


table.shop_table.woocommerce-checkout-review-order-table {
    border: none!important;
}

.woocommerce-message::after, .woocommerce-message::before {
    display: none;
}

/* Fibo */

.dgwt-wcas-tpd-price{
    display: none;
}

@media (max-width: 680px) {
    .dgwt-wcas-search-wrapp{
        position: absolute;
        right: 20px;
        top: 0;
    }
    #top-bar{
        padding-top: 60px;
    }
    #top-bar.fixed .dgwt-wcas-search-wrapp{
        top: -100px;
    }
}
/* Theme spesific details */


/* /Theme spesific details */