/* css vars */

/* Varit ja yhteiset front-/backend tyylit  */
@import 'https://www.spatineo.com/wp-content/themes/spatineo/assets/css/style-main.css';

:root {
  --gap: 25px;
  --grid-gap: 15px;
  --cont-padding: min(70px, 7%);
  --side-margin: var(--gap);
  --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: 20px;
  }
}

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;
}

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

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

.hide{
  display: none;
}

p > a {
  text-decoration: underline;
}

a img{
	border:none;
}
svg, img{
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
.bw > img{
  filter: grayscale(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, .is-style-rounded img{
  aspect-ratio: 1/1;
  object-position: 50% 0;
  object-fit: cover;
  border-radius: 500px!important;
}

.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;
}

.logo-banneri .wp-block-image {
  margin-bottom: 0;
}

@media(max-width:600px) {
  .logo-banneri .wp-block-image {
    max-width: 130px;
    margin: 0 auto;
  }
}

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-gray);
}
.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(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/phone.svg);
}
.icon i.email{
  background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/email.svg);
}
.icon i.location{
  background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/location.svg);
}
.icon i.calendar{
  background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/calendar.svg);
}
.icon i.time{
  background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/time.svg);
}
.icon i.arrow-right, .icon i.arrow-left{
  font-size: 1.25em;
  vertical-align: text-bottom;
  background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/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;
}

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

iframe{
  width: 100%;
}

/* Typography */

body {
  margin: 0;
  padding: 0;
  background: #fff;
  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: 17px;
  }
}
@media (max-width: 480px){
  body{
    --body-font-size: 15px;
  }
}
@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, h3, h4, h5, .h2, .h3{
  font:700 3em/1.2 var(--title-font);
  margin:1em 0 0.5em;
  color: var(--black);
  word-break: normal;
}


h1, h2.has-large-font-size{
  line-height: 1.1;
  --font-size: clamp(1.8em, 8.2vw, min(4em, 62px));
  --wp--preset--font-size--large: var(--font-size);
  font-weight: 800;
  letter-spacing: -0.01em;
}
h1{
  margin: 0;
}
.hero h1{
  margin: 0.3em 0 !important;
}
.home h1{
  /*font-size: min(8em, 120px);*/
}


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

.hero h1{
  max-width: 900px;
  color: #fff;
}

#content h1{
  margin-top: 5vh;
  margin-bottom: 0.5em;
}

h2:first-child, h3:first-child, h4:first-child, .h2:first-child, .h3:first-child {
  margin-top: 0;
  font-weight: 800;
}
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;
}

.single h1{
  text-align: left;
}
h2{
  --font-size: clamp(1em, 5vw, min(2.25em, 36px))!important;
  font-weight: 800;
}


h3{
  --font-size: clamp(1em, 5vw, min(2em, 30px));
  
}
.loop-wrapper h3{
  --font-size: clamp(1em, 5vw, min(1.25em, 20px));
  line-height: 1.5;
}
.loop-wrapper{
  font-size: min(16px, var(--font-size));
}
h4{
  --font-size: min(1.625em, 26px);
  --font-size: clamp(1em, 4.8vw, min(1.625em, 26px));
}
h5{
  --font-size: min(1.1875em, 20px);
  --font-size: clamp(1em, 4vw, min(1.1875em, 20px));
}
#footer {
  font-size: 1em;
}

@media (max-width: 760px){
  h1, h2.has-large-font-size{
    /* --font-size: calc(3 * var(--body-font-size) ); */
  }

}

h1, h2, h3, h4, h5{
  font-size: var(--font-size);
}

h4 + h2{
  margin-top: 0.3em;
}
.doughnut + h4{
  margin-top: 0;
}
.wp-block-column > h3{

}
.nostot h3{
/*    font-size:1.625em;
    line-height: 1.2;
*/}

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

.has-medium-font-size{
    font-size: 1.25em;
}
.has-large-font-size, .ingressi p{
    font-size: 1.65em;
}
h3 span.has-inline-color {
    float: left;
    margin-right: 30px;
    font-size: 2.5em;
}

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

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

blockquote{
    border: 1px solid #ccc;
    text-align: center;
    padding: 40px 20px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ccc;
    font-style: italic;
    font-size: 1.4em;
    margin: 50px 0;
}
blockquote *{
    margin: 0;
    font-style: italic;
}

.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, h1 a{
  --color: var(--black);
  color: var(--color);
  /* background: linear-gradient(to right, var(--color), var(--color) 50%, rgba(140,140,140,.5) 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 102%; */
  transition: all .3s;
}
p a:hover, label a:hover, h2 a:hover, h3 a:hover, h4 a:hover{
  background-position: 0% 102%;
}
/*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;
}
.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);
}
.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%;
}

/* wp-columns tweak -> */
#content > *,
.wp-block-group,
.hero .wrap{
  max-width: var(--wrap);
  width: 100%;
  margin: 0 auto 0;
  padding-left: var(--side-margin);
  padding-right: var(--side-margin);
}
#content > .is-style-full-width,
.wp-block-group.is-style-full-width {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
@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: min(7vh, 10vw);
  margin-bottom: min(7vh, 10vw);
}
.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;
}


.wrap,
.wp-block-group.has-background > .wp-block-group__inner-container{
    padding: 0 var(--gap);
}
.wrap.wp-block-columns,
.wrap > .wp-block-columns,
#content > .block-wrapper.core-columns > .wp-block-columns,
#content .wp-block-columns .wp-block-columns,
#footer .wp-block-columns .wp-block-columns,
.wp-block-group.is-style-full-width .wp-block-group.is-style-normal-width .wp-block-columns,
#content > .wp-block-group > div > .block-wrapper.core-columns > .wp-block-columns,
.wp-block-group.has-background .wp-block-group__inner-container > .block-wrapper.core-columns{
  margin-left: calc(-1 * var(--gap));
  margin-right: calc(-1 * 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;
  }
}

.single .is-style-narrow-width > .wp-block-group {
  padding: 2em 0!important;
}

.wrap .wp-block-columns.wrap{
    padding-left: 0;
    padding-right: 0;
}

.wp-block-group .wp-block-columns{
    margin: 0 auto;
}
/*.wp-block-columns.full{
    max-width: 100%;
}*/
/*.wp-block-group.full, .wp-block-group.full-wrap, .wp-block-group.full-width, .full-width, .wrap > .wp-block-group.has-background{
  margin-left: var(--full-nega-margin);
  margin-right: var(--full-nega-margin);
  width: auto;
}
.large-width{
  margin-left: var(--large-nega-margin);
  margin-right: var(--large-nega-margin);
  width: 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;
    padding: 20px var(--gap);
}
.block-wrapper.core-media-text{
  padding: 2% 0;
}
/*#content .wp-block-media-text__content{
  padding: calc(2 * var(--gap)) 0 0 0;
}*/
@media (min-width: 601px){
  #content .wp-block-media-text__content{
    /*padding-bottom: calc(2 * var(--gap));*/
    padding-left: calc(2 * var(--gap));
    padding-right: 0;
  }
  #content .has-media-on-the-right .wp-block-media-text__content{
    padding-right: calc(2 * var(--gap));
    padding-left: 0;
  }
}
@media (max-width: 600px){
  #content .wp-block-media-text__content{
    padding-top: calc(2 * var(--gap));
  }
}
#content .wp-block-media-text.has-background .wp-block-media-text__content{
  padding: calc(2 * var(--gap));
  padding-top: calc(2.5 * var(--gap));
}
.wp-block-media-text.is-style-small-pic{
  grid-template-columns: min(23%, 20vw) 1fr !important;
  align-items: start;
}
#content .wp-block-media-text.is-style-small-pic .wp-block-media-text__content{
  padding-top: 0;
  --gap: 5%;
  align-self: start;
}
#content .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;
}
#content .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;
}

#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;
}

/*Wordpress 5.9 bugifix*/
@media (min-width: 782px) {

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 50%;
  }
}

@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;
}

.wrap > .wp-block-group + .wp-block-columns,
.wrap > .wp-block-group + .wp-block-group,
.wrap > .wp-block-columns + .wp-block-group,
.wrap > .wp-block-columns + .wp-block-columns{
  /*margin-top: var(--gap);*/
}
.full-width.has-background + .full-width.has-background{
  margin-top: 0;
}
.wp-block-group.has-background,
#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-columns tweak */

.wp-block-columns{
  /*content-visibility: visible;*/
  contain:layout;
/*  contain-intrinsic-size: 1000px;*/
}
.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;
}

.single-post p{
  max-width: 1000px;
}

.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;
}
.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;
}

.scroll-show{
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s, transform 0.6s;
}
.scroll-show.scrolled{
  transform: none;
  opacity: 1;
}
#content{
  position: relative;
  z-index: 5;
}
#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;
}

/*.single-reference #content,
.single-post #content {
  max-width: 950px;
  margin: -35vh auto 0;
}*/

.bg-white{
  background: #fff;
}

@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);
  }

}

/* gallery */

#content .wp-block-gallery.aligncenter .blocks-gallery-grid{
  justify-content: center;
}
#content .wp-block-gallery .blocks-gallery-item{
  margin: 0;
  padding: 20px;
  flex-grow: 0;
  min-width: 200px;
}
#content .wp-block-gallery .blocks-gallery-item figure{
  align-items: center;
}
.wp-block-gallery.columns-6 .blocks-gallery-item{
  flex-basis: 16.66%;
}
.wp-block-gallery.columns-5 .blocks-gallery-item{
  flex-basis: 20%;
}
.wp-block-gallery.columns-4 .blocks-gallery-item{
  flex-basis: 25%;
}
.wp-block-gallery.columns-3 .blocks-gallery-item{
  flex-basis: 33.33%;
}
.wp-block-gallery.columns-2 .blocks-gallery-item{
  flex-basis: 50%;
}

#content .wp-block-gallery.logot .blocks-gallery-item{
  padding: 2px 20px;
}
@media (max-width: 456px){
  #content .wp-block-gallery.logot .blocks-gallery-item{
    padding: 10px 20px;
  }
}



/* /Layout & columns */

/* Ul & Ol lists */

ul{
  margin:10px 0 10px 0px;
}
li{
  margin-left:15px;
}
li a{
    text-decoration: none;
}
ol {
  margin: 40px 15px;
}
ol li {
  line-height: 1.5;
  padding-top: 0.6em;
  margin-bottom: 0.5em;
  margin-left: 0px;
}
ol.no-border li{
  border:0;

}
ol li::before {
  /* content: counters(mek-counter, ".") ""; */
  color: inherit;
  font-weight: 400;
  --size: 1em;
  font-size: 1em;
  margin-left: calc(-1 * var(--size));
/*  margin-top: 2px;*/
  /*line-height: 1;*/
  width: var(--size);
  height: var(--size);
  display: inline-block;
  font-family: var(--body-font);
  text-align: right;
  /*float: left;*/
  padding-right: 13px;
}
#content ul li{
  list-style: none;
  margin-left: 1em;
  line-height: 1.4;
  margin-bottom: 1.5em;
}
#content ul:not(.blocks-gallery-grid) li::before{
  content: '';
  --size: 0.8em;
  --margin: 1em;
  background: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/greater-than-icon.svg) no-repeat 50% 100%;
  margin-left: calc(-1 * (var(--size) + var(--margin)));
  margin-right: var(--margin);
  line-height: 1;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  border-radius: 50%;
}
#content .wp-block-cover ul{
  margin-left: 0;
}
#content .wp-block-cover li::before{
  background: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/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.2em;
  line-height: 1;
  color: var(--primary);
}*/

#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;
}

/* /Ul & Ol lists */

/* Buttons*/

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

#top-bar .wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-block-button__link, .button{
  display: inline-block;
  text-transform: none;
  line-height: 1.2;
  height: auto;
  background: var(--btn-color);
  font-family: var(--body-font);
  color: #fff;
  font-size: min(1.05em, 18px);
  font-weight: 700;
  min-width: 170px;
  margin-top: 1em;
  border-radius: 2px;
  /*text-transform: uppercase;
  letter-spacing: 0.1em;*/
  padding: 0.6em 2.2em;
  transition: all .3s;
}

#top-bar .wp-block-button .wp-block-button__link {
  min-width: 0px;
  padding: 0.6em 1.2em;
}

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

/*.hero .wp-block-button__link,
.has-primary-background-color .wp-block-button__link{
    background: #fff;
    color: var(--btn-color);
}*/

.wp-block-button.is-style-outline .wp-block-button__link{
  border: 2px solid var(--btn-color2);
  color: var(--btn-color);
  background: transparent;
}
.hero .wp-block-button.is-style-outline .wp-block-button__link{
  color: #fff;
}

.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link{
  color: #fff;
  border-color: var(--btn-color2);
}

a:hover .wp-block-button .wp-block-button__link,
#top-bar .wp-block-button__link:hover,
.hero .wp-block-button__link:hover,
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.button:hover{
  background: var(--btn-color2);
  border-color: var(--btn-color2);
  color: var(--btn-color);
  color: #fff;
}

#top-bar.fixed .wp-block-button__link:hover,
.has-primary-background-color:not(.has-background-dim) .wp-block-button__link:hover{
  box-shadow: inset 0 0 0 2px var(--btn-color);
}


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

.wp-block-button.is-style-arrow .wp-block-button__link,
.arrow-btn .wp-block-button .wp-block-button__link,
a.arrow{
  display: inline-block;
  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(--black);
  background: transparent linear-gradient(to right, var(--black), var(--black)) no-repeat 0 100%;
  background-size: 0% 1px;

}
a:hover .wp-block-button.is-style-arrow .wp-block-button__link,
.hero.arrow-btn .wp-block-button .wp-block-button__link:hover,
.hero .wp-block-button.is-style-arrow .wp-block-button__link:hover,
.arrow-btn .wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-arrow .wp-block-button__link:hover,
a.arrow:hover{
  background: transparent linear-gradient(to right, var(--black), var(--black)) no-repeat 0 100%;
  background-size: 100% 1px;
  color: var(--black);
}
.arrow-btn .wp-block-button .wp-block-button__link::before,
.wp-block-button.is-style-arrow .wp-block-button__link::before,
a.arrow::before{
  content: '';
  display: inline-block;
  position: absolute;
  font-size: 1em;
  left: -1em;
  background: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/arrow-right2.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 .wp-block-button__link::before,
.arrow-btn .wp-block-button .wp-block-button__link:hover::before,
.wp-block-button.is-style-arrow .wp-block-button__link:hover::before,
a.arrow:hover::before{
  transform: scale(1.2) translate(-30%, 18%);
}

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

.has-primary-background-color .wp-block-button.is-style-arrow .wp-block-button__link:before{
  filter: invert(1);
}

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

.hero .wp-block-button.is-style-arrow .wp-block-button__link,
.hero.arrow-btn .wp-block-button .wp-block-button__link{
  color: #fff!important;
  background-image: linear-gradient(to left, #fff, #fff) !important;
}
.hero .wp-block-button.is-style-arrow .wp-block-button__link:before,
.hero.arrow-btn .wp-block-button .wp-block-button__link:before{
  filter: invert(1);
}


@media(max-width:600px) {
  #top-bar .wp-block-button .wp-block-button__link, .wp-block-button .wp-block-button__link,
  .wp-block-button__link, .button {
    padding: 0.6em 1.8em;
  }
  .wp-block-buttons.is-content-justification-right {
    justify-content: left;
  }
}

/* /Buttons*/

/* Header & Top bar*/

#top-bar{
    padding: 30px var(--side-margin);
    width: 100%;
    z-index: 1000;
    position: fixed;
    background: var(--primary);
    text-align: center;
    font-size: 18px;
    /*box-shadow: 0 3px 6px rgba(0,0,0,.15);*/
    scroll-snap-margin-top: 0px;
    scroll-margin-top: 0px;
    transition: padding 0.5s;
}
.logo{
    display: inline-block;
}
.logo div{
    /* width: 290px; */
    transition: all 0.4s;
}
/* .home #top-bar:not(.fixed) .logo{
    filter: grayscale(1) contrast(7) invert(1);
} */
#top-bar.fixed{
  background: var(--primary);
  /*color: var(--black);*/
  padding-top: 15px;
  padding-bottom: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#top-bar.fixed .logo div{
    /*width: 100px;*/
    /* margin-top: -90px; */
}
#top-bar.white,
#top-bar.white #secondary-navi{
    color: var(--black)
}
/* .home #top-bar:not(.fixed){
    color: #fff;
} */
/* #top-bar.white .logo path,
#top-bar.white .logo rect,
#top-bar.fixed .logo path,
#top-bar.fixed .logo rect{
    fill: var(--secondary) !important;
} */
/* #top-bar #secondary-navi{
   color: #fff;
} */
#top-bar.fixed #secondary-navi, #top-bar #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{
        padding-top: 30px;
    }
}
#top-bar .search{
  margin-right: 10px;
}
#top-bar .wp-block-button .wp-block-button__link{
    margin-top: 0;
}

@media (max-width: 1000px){
   #top-bar{
    position: absolute;
   }
}
@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 .bg{
    --top-bar: 100px;
    padding: 60px 0 60px;
    /* margin-top: var(--top-bar) !important; */
    text-align: left;
    background: url() no-repeat 50% 50%;
    background-size: cover;
    min-height: calc(max(65vh, 300px) - var(--admin-bar));
    margin-top: 80px;
    display: flex;
    position: relative;
}
.home .hero .bg, .hero.landing-page{
    min-height: 500px;
    min-height: calc(85vh - var(--admin-bar) - var(--top-bar));
    padding: 60px
    position: relative;
}
.hero.landing-page{
    padding-bottom: 0;
}
.hero.landing-page .bg{
    background: url() no-repeat 50% 50%;
    background-size: cover;
    height: 85vh;
    width: 100%;
    position: absolute;
    top: 0;
}

.hero h3 {
    color: #fff!important;
}

.single-post h1 {
    text-align: left;
}

@media (max-width:980px) {
    .hero .bg{
        --top-bar: 100px;
    }
}

.hero.landing-page .wp-block-group{
    margin-top: calc(30vh - 120px);
    position: relative;
    z-index: 3;
}
.hero.landing-page .wp-block-group .bg-white{
    padding: 4% 7%;
    min-height: 60vh;
}

.hero.bg:after,
.hero .bg:after {
    content: '';
    background: rgba(0,0,0,0.45);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.hero .cont{
    max-width: 950px;
    font-size: 1.375em;
}

@media (max-width: 1000px){
  .hero .bg{
    padding: 90px 0 50px;
  }
}
@media (max-width: 750px){
  .hero .bg{
    padding: 70px 0 30px;
  }
}
/* @media (min-width: 750px){
  .home .hero h1{
    max-width: 65%;
  }
} */

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


@media (max-width: 1000px){
    .header-mask{
        max-width: 50vw;
        min-width: 300px;
        align-items: flex-start;
    }
    
    body .main-container .hero.plain{
        height: 100px;
    }
}

.hero .wrap{
  position: relative;
  z-index: 2;
}
.hero .cont{
    height: 100%;
}

.hero .lead p, .hero .cont p, .bg-video-block p {
    /* font-size: clamp(0.8em, 2.5vw, 1em); */
    font-style: italic;
    margin: 10px 0;
}

.hero .wp-block-buttons {
    margin-top: 0;
}

.hero .form-container{
    padding: 5% 8%;
}

.wp-block-group.hero .wp-block-cover{
    padding-top: calc(100px + 15vh);
    padding-bottom: 0;
    height: 60vw;
    max-height: 90vh;
    min-height: 65vh;
}
@media (max-width: 640px){
 .wp-block-group.hero .wp-block-cover{
    height: auto;
 }
 .wp-block-group.hero .wp-block-cover .wp-block-cover__inner-container{
    background: var(--primary-20);
    padding: 25px 0;
 }
 .wp-block-group.hero .wp-block-cover img{
    height: 50%;
 }
 .wp-block-group.hero .wp-block-button{
    margin: 0;
 }
}

.wp-block-group.hero .wp-block-cover.has-primary-background-color{
    background-color: var(--primary-50);
}


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

/* nostot */

.nosto .cont{
  /* background: #fff;
  border-radius: 2em;
  box-shadow: 0 0 18px rgba(0,0,0,.1); */
  padding: var(--gap) 5% 1em;
}
@media (min-width: 1200px){
  .nosto .cont{
    /*padding: 30px 80px 90px;*/
  }
}
.nosto .cont .nosto-kuva{
  text-align: left;
}
.nosto .cont .nosto-kuva img{
  /* aspect-ratio: 1/1; */
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 50em;
  max-width: 50px;

}
@supports (aspect-ratio: 1/1){
  .nosto .cont .nosto-kuva img{
    height: auto;
  }
}

.nosto.no-button .action-bottom{
  font-weight: bold;
  
}

.nosto .action-bottom{
    padding: 0 8%;
    
}

.nosto.bg-image .cont {
  border-radius: 0;
}

.nosto.bg-image .cont {
  min-height: 350px;
  display: flex;
  align-items: flex-end;
  padding: 10px 20px;
}

.single .nosto.bg-image .cont {
  min-height: 200px;
}




.nosto.nosto-block h3 {
  color: #000;
  font-size: 1.2em;
  text-align: left;
  max-width: 170px;
}

.nosto.nosto-block p {
 text-align: left;
}

.nosto.bg-image h3 {
  color: #fff;
 
}

.nosto.bg-image h3::after {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: -1px;
  background: url('https://www.spatineo.com/wp-content/themes/spatineo/assets/img/svg-icons/arrow-right.png') no-repeat 100% 100%;
  background-size: contain;
}


.people-nosto {
  padding-top: 5vh;
}

.people-nosto .contact {
  margin-bottom: 20px;
}

#content .block-wrapper.core-columns > .nostot.wp-block-columns{
/*  padding-left: calc(var(--gap) - var(--grid-gap));
  padding-right: calc(var(--gap) - var(--grid-gap));*/
  margin-left: calc(var(--grid-gap) * -1) !important;
  margin-right: calc(var(--grid-gap) * -1) !important;
}
#content .nostot .wp-block-column{
  padding: var(--grid-gap);
}
.nosto .cont:hover {
    filter: brightness(0.8);
}
.nosto .cont h2{
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.nosto .cont h4{
  font-size: min(1.25em, 20px);
}
.people-nosto .kuva img{
  max-width: 250px;
  margin-bottom: 15px;
  border-radius: 50%;
}

.people-nosto h5.person-title {
  margin: 0;
}

@media (min-width: 560px){
  .people-nosto .kuva{
    text-align: right;
  }
  .people-nosto .cont{
    padding-left: 5%;
  }

}

@media(max-width: 600px) {

  .wp-block-acf-people-nosto.people-nosto {
    text-align: center;
  }
}


.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-gray);
}
.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{
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.accordion-block:first-child{
  border-top: 1px solid rgba(0,0,0,0.2);
}
.accordion-block ol {
  margin: 0;
}
.accordion-block ol li{
  border:0;
  padding: 0;
  margin: 0;
}
.accordion-block .accordion-title{
  font-weight: bolder;
  color: var(--primary);
  cursor: pointer;
}
.accordion-block:hover{
  background: var(--light-gray);
}
.accordion-block.open:hover{
  background: #fff;
}
.accordion-block .accordion-content{
  max-height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .3s;
}
#content .accordion-block .accordion-content strong{
  font-size: 0.9em;
}

.accordion-block.open .accordion-content{
  margin-top: 10px;
  opacity: 1;
  max-height: 1000px;
}

.accordion-block .plus{
    font-size: 30px;
    --color: var(--black);
    color: var(--color);
    float: right;
    display: inline-block;
    /* background: rgba(216, 216, 216, .8); */
    width: 1.1em;
    height: 1.1em;
    line-height: 1.1em;
    border-radius: 50%;
    margin: -5px -20px 0 15px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}


/* 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%;
  /*min-width: calc(90vh * 1.778);*/
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.bg-video-block .content-container{
  position: relative;
  z-index: 2;
}

.bg-video-block .content-container .cont{
  min-height: 78vh;
  padding: 10vh 0;
  max-width: 750px;
}

.bg-video-block p {
  font-size: clamp(1.1em, 2.5vw, 1.2em);
}

@media(max-width: 650px) {
  .home .bg-video-block {
    margin-top: 92px;
    min-height: 85vh;
  }
}

@media screen and (max-height: 650px){
/* video#bgvid{
min-width: calc(650px * 1.778);
}*/

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




/* 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: calc(50% - 5px);
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg) translate(-4px, -4px);
  transition: all .3s;
}
.accordion-block.open .plus:before{
  transform: rotate(-135deg) translate(1px, 1px);
}
.accordion-block .plus:hover{
  background: var(--light-gray);
}



.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;
    padding:2px 0;
}
#menu-top a{
    color: #fff;
}

.menu{
    margin:0 auto;
    text-align:center;
}
.menu ul{
    margin:0;
}
.menu ul ul{
    margin:5px 0px 5px 15px;
}
.menu li{
    list-style: none;
    padding:2px 0.7em;
    margin:0;
    display:inline-block;

    /*letter-spacing: 0.03em;*/
}

#menu-top .menu li > ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1;
    text-align: left;
    max-width: 100%;
    /* background: var(--primary); */
    background: hsla(0, 0%, 24%, 0.850);
    padding: 20px 20px;
    margin: 0;
    margin-left: -10px;
    max-width: 250px;
    /*border: 1px dotted #ccc;*/
    transition: opacity 0.3s;
    /*box-shadow: 0 10px 15px rgba(0,0,0,.15);*/
    border: 1px dotted rgba(0,0,0,.15);
  }
/* .home #menu-top .menu li > ul {
  background: rgba(19, 38, 47,.75); */
}
.fixed #menu-top .menu li > ul {
    background: hsla(0, 0%, 24%, 0.685);
}
#menu-top .menu li > ul a{
  display: inline;
  font-size: 0.9em;
}

#menu-top ul li ul li {
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
}

#menu-top ul li:hover > ul, #menu-top ul li:focus-within > ul, #menu-top ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    justify-content: center;
    transition: opacity 0.3s 0.2s;
}

.menu li a, #menu-top .menu li .menu-label, .breadcrumb a{
    display:inline-block;
    text-decoration:none;
    margin:0;
    background: linear-gradient(to right, #fff, #fff);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    transition: all .3s, color 0s;
}
.menu li a:hover, .menu li.current-menu-item > a, .breadcrumb a:hover{
    background-size: 100% 1px;
}
.menu li.current-menu-item > a{
  background-image: linear-gradient(to right, #fff, #fff);
    background-size: 100% 2px;
}

.menu li li a{
  background-position: 0% 100%;
}
.menu li > ul {
    /*display: none;*/
}

@media(max-width: 1000px) {
  .menu li.current-menu-item > a{
    background-size: 100% 2px;
}
.menu li.current-menu-item > a{
  background-image: linear-gradient(to right, #111, #111);
    background-size: 100% 2px;
    font-weight: 700;
}
}

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

nav#secondary-navi {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 15px;
}
nav#secondary-navi ul{
  margin: 0;
}
nav#secondary-navi .lang {
  margin-left: 1.5em;
  padding-right: 0.2em;
}
nav#secondary-navi .lang li{
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.95em;
  padding: 2px 0.5em;
}
nav#secondary-navi #secondary-menu li {
    display: inline-block;
    font-size: 0.95em;
    padding-right: 20px;
}

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

@media only screen and (max-width: 1135px) and (min-width: 1000px)  {
  .menu li a {
    font-size: 15px!important;
  }
  #top-bar .wp-block-button .wp-block-button__link {
    padding: 0.6em 1.2em;
    min-width: fit-content;
  }
}

/* /Navi */

/* Post loops */

#content > .loop-wrapper{
  padding-left: calc(var(--side-margin) - var(--grid-gap));
  padding-right: calc(var(--side-margin) - var(--grid-gap));
}
.loop-wrapper{
  display: flex;
  flex-wrap: wrap;
}
#content > .loop-wrapper{
  margin-bottom: 20px;
  margin-top: 30px;
}
#content > .loop-wrapper.padding-bottom {
  padding-bottom: 5vh;
}
.loop-wrapper {
  margin-left: calc(var(--grid-gap) * -1);
  margin-right: calc(var(--grid-gap) * -1);
}
.loop-wrapper .post{
  position: relative;
  flex-basis: 33.33%;
  padding: var(--grid-gap);
  margin-bottom: var(--gap);
}
.people-wrapper .post{
  flex-basis: 33%;
  justify-content: center;
  align-items: center;
}
.loop-wrapper .post.button-post:not(.one-row){
  padding-bottom: 60px;
}
.seminar-wrapper.featured .post{
  flex-basis: 50%;
}
.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;
  }
}
.image-wrapper.no-image {
    background: #eee;
    border-radius: 50%;
    /*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 p{
  font-size: min(20px, 1em);
  /*margin-bottom: 0.2em;*/
}
.loop-wrapper .post .date{
  font-size: 0.94em;
  margin-bottom: 0.2em;
  color: var(--gray);
}

.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.4em;
}
.loop-wrapper .post .type + h3{
  margin-top: 0.2em;
}
.loop-wrapper .text-container .type{
  color: var(--gray);
  font-size: 0.9em;
  font-weight: 400;
}

.loop-wrapper .post.arkisto{
  margin: 0;
}
.loop-wrapper .post .cont{
  background: #fff;
  /* 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{
    flex-basis: 100%;
}
.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 */

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(--gray);
  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);
}

/* /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;
    /*background: var(--primary);*/
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom);
}
#mobilebuttons .flex{
    flex-wrap: nowrap;
}
#mobilebuttons .column{
    flex:1 0 20%;
}
#mobilebuttons .column:not(.mobile-menu){
    background: var(--primary);
}
#mobilebuttons .column:not(.mobile-menu) a{
    color: #fff;
}
#mobilebuttons.menu-open .column:not(.mobile-menu){
    background: #ccc;
}
#mobilebuttons a{
    color: var(--primary);
    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);
}


a.mobilemenu{
    display: none;
    font-size: 12px !important;
    height: 2.2em;
    line-height: 2.2em;
    /*float: right;*/
}

a.mobilemenu span.teksti{
    float: left;
    text-decoration: none;
    color: #fff;
    font-size: 1.5em;
    padding-left: 10px;
    padding-right: 10px;
}
a.mobilemenu span.ikoni{
    position: relative;
    float: right;
    width: 3.5em;
    height: 4px;
    margin-top: 1em;
    background-color: #fff;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;

}
a.mobilemenu span.ikoni{
  vertical-align: middle;
  margin-top: -0.1em;
}
a.mobilemenu span.ikoni, a.mobilemenu span.teksti{
  float:none;
  display: inline-block;
  line-height: 1;
}
#mobilebuttons a.mobilemenu span.teksti{
  font-size: 14px;
  /*display: none;*/
}
a.mobilemenu span.ikoni:before,
a.mobilemenu span.ikoni:after{
    content: '';
    display: block;
    width: 3.5em;
    height: 4px;
    background-color: #fff;
    position: absolute;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
a.mobilemenu span.ikoni:before{
    top: -10px;
}
a.mobilemenu span.ikoni:after{
    bottom: -10px;
}
a.mobilemenu:hover{
    border-color: #ca0e04;
}


a.mobilemenu.open span.ikoni{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 99;
    background-color: var(--primary);
}
a.mobilemenu.open span.ikoni:before{
  width: 3.5em;
  top:-1em;
    -webkit-transform: translateY(1em) rotate(-45deg);
    transform: translateY(1em) rotate(-45deg);
    background-color: #fff;
    
}
a.mobilemenu.open span.ikoni:after{
  width: 3.5em;
  bottom:-1em;
    -webkit-transform: translateY(-1em) rotate(45deg);
    transform: translateY(-1em) rotate(45deg);
    background-color: #fff;
    
}

#menu-mobile{
/*display: none;*/
    max-height: 0;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    color: var(--black);
    position: fixed;
    z-index: 9;
    width: 100%;
    left: 0;
    /* bottom: 50px;  */
    padding: 0 20px;
    margin-top: 25px;
    font-size: 1.1em;
    line-height: 1.4;
    transition: all .3s;
}
.fixed #menu-mobile{
    margin-top: 10px;
}
#menu-mobile div{
    height: 100%;
    overscroll-behavior: contain;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 0 30px;
    display: flex;
    /* align-items: flex-end; */
    padding-top: 18vh;
    margin-bottom: 5em;
}

#menu-mobile ul{
  margin: 0;
  width: 100%;
}
#menu-mobile li ul{
  display: none;
}
#menu-mobile li{
  display: block;
  vertical-align: middle;
/*  margin-top: 0.5em;
  margin-bottom: 0.5em;*/
  text-align: left;

}
#menu-mobile .menu > li + li{
  /*border-top: 1px solid rgba(0,0,0,.15);*/
  padding-top: 0.6em;

}
#menu-mobile li:not(.wp-block-button) a{
  display: inline-block;
  padding: 5px 10px;
}

#menu-mobile li.current-menu-item > a,
#menu-mobile li a:hover{
  background-size: calc(100% - 20px) 1px;
  background-position: 50% 100%;
}

#menu-mobile li li{
}
#menu-mobile.open{
    max-height: calc(100vh - 50px);
    overflow: scroll;
    /*box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(0,0,0,.3);*/
}

#menu-mobile ul.menu .plussa{
    font-size: 30px;
    --color: var(--black);
    color: var(--color);
    float: right;
    display: inline-block;
    /*background: rgba(216, 216, 216, .8);*/
    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;
}

#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 .plussa.open: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;
    }
    #menu-mobile,
    #menu-top li.secondary{
      display: none;
    }
    #secondary-menu{
        display: block;
    }
}
@media screen and (max-width: 1000px){

    #mobilebuttons, #menu-mobile, a.mobilemenu{
        display: block;
    }
    body{
        /* 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%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  align-items: center;
  overflow: hidden;
}

/* 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 {
  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;
}



/* /Modal */

/* Forms */

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

textarea { overflow: auto; }
input, textarea{
    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; /* Firefox */
}
::-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;
    margin-bottom: 12px;
}

.frm_forms .frm_required{
    display: inline-block;
    width: 10px;
    margin-top: -5px;
    color: #C70501 !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 rgba(254, 85, 82, .8) !important;
}
.frm_error, .frm_error_style, .frm_message {
  color: #C70501;
  text-align: center;
}
.frm_error_style, .frm_message {
  background-color: #ffffff;
  border: 1px solid #ea6262;
  border-radius: 0;
  font-size: inherit;
  margin: 0;
  margin-bottom: 20px;
  padding: 20px;
}
.frm_message{
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 1.2em;
}
form input[type=text].frm_verify {
    display: none !important;
}
.frm_inside_container label{
  display: none;
}

/* GRAVITY FORMS */

p.gform_required_legend {
  display: none;
}

#content .gform_wrapper.gravity-theme input, #content .gform_wrapper.gravity-theme textarea {
  color: #111;
}

#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;
}
.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_confirmation_message {
  text-align: center;
}

.gform_footer{
  text-align: left;
}
.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(--gray);
  font-weight: 400;
}
.search-form input::-ms-input-placeholder {
  color: var(--gray);
  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);
}

/* /Forms */

/* Footer */

#footer{
    position: relative;
    background: var(--footer-bg);
    padding-top: 50px;
}

#footer, #footer p, #footer a, #footer h4{
    /*color: #fff;*/
}

.footer-title strong, span.footer-address, p.footer-vat {
  margin-left: 32px;
}

#footer p.footer-title {
  margin-top: 0;
}

#footer .menu .wp-block-button__link {
  display: none;
}

#footer .menu li a {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  background: linear-gradient(to right, #111, #111);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  transition: all .3s, color 0s;
}

#footer .menu li a:hover {
  background-size: 100% 1px;
}



#footer ul li{
  margin-top: 5px;
  margin-bottom: 0.5em;
  line-height: 1;
}

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

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

#footer .pic-wrapper {
  text-align: right;
  margin-bottom: 2em;
}

#footer .addtoany_content_bottom {
  display: none;
}

#footer .wp-social-link {
  border-radius: 0;
  background: var(--primary);
  color: var(--footer-bg);
}

#copy{
  background: var(--copy-bg);
  color: #fff;
  padding: var(--gap) 0;
}

#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: left;
  }
  #footer #copy .wp-block-column.empty-column{
    min-width: 0;
  }
}

@media(max-width: 768px) {

  #footer .footer-menu {
    display: none;
  }
  #footer .wp-block-social-links {
    justify-content: flex-start;
  }
  #footer .footer-info .pic-wrapper {
    text-align: left;
  }


  #footer .footer-social figure {
    display: none;
  }
  #footer .footer-social {
    margin-top: 0;
    padding-top: 0;
  }
}

@media(min-width: 768px) {
  #footer .footer-info figure {
    display: none;
  }
}

@media(max-width:600px) {
  #copy p, #copy a {
    text-align: center;
    margin: 0.2em;
  }
}

#footer .footer-info p {
  margin-bottom: 0.2em;
}

#footer .footer-vat {
  margin-top: 1em;
}


/* 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 */
/* Theme spesific details */

/*Heron asetukset*/

.hero h2 {
    color: #fff;
}

.home .hero {
    display: none;
}


/*Etusivu*/



#fp-intro-text.wp-block-group p {
    font-size: clamp(1em, 2.5vw, 1.2em);
    font-style: italic;
}

#fp-using-data h3 {
    margin-bottom: 0;
}

#fp-using-data img {
    margin: 5vh 0;
}

/* #fp-using-data p, #careers-our-culture p {
    max-width: 600px;
    margin: 3vh auto;
} */

#fp-using-data .wp-block-button__link {
    padding: 10px 40px;
}

@media(max-width: 600px) {

    .monitor-cover .wp-block-buttons {
        justify-content: center;
    }
    .logo-banneri .wp-block-column {
        flex-basis: 50%!important;
    }
}




#content .fp-quote .wp-block-buttons {
    margin-top: 0;
}

#spatineo-monitor-logo img {
    margin-bottom: 1vh;
}

#spatineo-monitor-logo .pic-wrapper {
    text-align: right;
}

#content .webinar-cover .wp-block-cover {
    min-height: 250px;
    padding: 2vh;
    max-width: 85%;
    margin: 0 auto;
}



/*Services -sivu*/

#services-data-flow.wp-block-group p {
    max-width: 470px;
    margin: clamp(20px, 4vh, 50px) auto; 
}

/*Careers -sivu*/




/*Yksitt�inen artikkelipostaus*/

.post .cont img {
    transition: all 0.3s ease-in-out;
}

.post .cont img:hover{
    filter: brightness(0.6);
    
}

#content .breadcrumb-btn {
    margin: 30px 0;
}

#content .breadcrumb-btn a {
    font-weight: 800;
    display: inline-block;
    text-decoration: none;
    margin: 0;
    background: linear-gradient(to right, #111, #111);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    transition: all .3s, color 0s;
}

#content .breadcrumb-btn a:hover {
    background-size: 100% 1px;
}

.single .knowledge-base {
    padding-left: 0;
    padding-right: 0;
}

.single .hero .date {
    color: #fff;
    font-style: normal;
}

/*Single people*/

.single.single-people .hero h1 {
    text-align: left;
    margin-bottom: 0!important;
}

.single-people .hero p {
    color: #fff;
    text-align: left;
}


@media(max-width: 600px) {
    .single-people .people-nosto {
        text-align: center;
    }
}


/*e-book-form*/

#e-book-form-section figure {
    background-size: contain;
    background-repeat: no-repeat;
}

#e-book-form-section .gform_wrapper.gravity-theme input, #e-book-form-section .gfield_validation_message {
    max-width: 80%;
    margin: 10px 0;
    border-radius: 0;
}


#e-book-form-section .gform_wrapper.gravity-theme .gform_footer {
    text-align: left;
}

#e-book-form-section .gform_wrapper.gravity-theme .gform_footer button {
    width: 80%;
}

@media(max-width: 600px) {
    #e-book-form-section .gform_wrapper.gravity-theme input, #e-book-form-section .gfield_validation_message {
        max-width: 100%;
    }
    #e-book-form-section .gform_wrapper.gravity-theme .gform_footer button {
        width: 100%;
    }
}

.socials svg {
    max-width: 25px;
    margin: 5px;
    transition: .3s ease;
}

.socials svg:hover {
    transform: scale(1.05);
}


/*people */


.peoples {
    position: relative;
    margin: 0 auto;
  }
  
  .peoples a {
    display: block;
  }
  
  .people-kuva {
    overflow: hidden;
  }
  
  .people-kuva img {
    display: block;
    width: 100%;
    object-fit: cover;
    min-height: 200px;
    max-width: 200px;
    border-radius: 500px;
    
  }


  .contact-image img {
      border-radius: 500px;
  }
  
  
  .people-content {
    padding: 30px 0px;
  }
  
  
  .people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
  }
  
  .people, .people-content, .people-kuva img {
    transition: 0.5s ease;
  }
  
.contact-us-titteli {
    font-size: 0.6em;
}
  

  
 .people-wrapper .image-wrapper {
    width: 250px;
    margin-bottom: 1.2em;
 }


.people-wrapper h4 {
    font-size: 1.4em;
}

.people-wrapper a, .people-wrapper p {
    font-size: 1em;
}

.person-contact-form {
    background: var(--primary);
    color: #fff;
}

.person-contact-form h4, .person-contact-form a {
    color: #fff;
}

.people-wrapper img {
    transition: all 0.3s ease-in-out;
}

.people-wrapper img:hover{
    filter: brightness(0.9);
    
}

.people-wrapper .wp-block-button {
    margin-top: 0.5em;
}

/* #content .people-wrapper a.wp-block-button__link {
    color: var(--btn-color);
} */

.single-people .people-nosto .kuva img {
    height: 250px;
    object-fit: cover;
}


 
/*Article breadcrumb*/

.breadcrumb a {
    text-transform: capitalize;
    font-weight: 600;
    color: hsl(0, 0%, 69%);
    transition: 0.4s ease;
}

.breadcrumb a:hover {
    color: #111;
}

.breadcrumb .bc-active {
    color: hsl(9, 84%, 45%);
}

.breadcrumb a::after {
    content: '>';
    margin: 0 0.8em 0 0.5em;
    color: hsl(0, 0%, 69%);
}

.breadcrumb a:last-child::after {
    display: none;
}

#content .column-with-padding {
    padding: 40px 50px 30px;
    border-radius: 4px;
}

/* /Theme spesific details */

/* Added background fallback for the video block / Ilkka 2022-03-02 */
.bg-video-block video.bg-video {
    background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/earth.png);
}

#footer .wp-social-link.itewiki {
    background-image: url(https://www.spatineo.com/wp-content/themes/spatineo/assets/img/itewiki_icon_white.png);
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}

#footer .wp-social-link.itewiki svg {
    display: none;
}

#footer .wp-social-link.itewiki a {
    width: 36px;
    height: 36px;
}

/* Algolia seach layout fixes */

.algolia-autocomplete {
  width: 100%;
}