/*
Theme Name: Mekanismi Custom
Theme URI:
Description:
Author: Mekanismi
Author URI:
Version: 1.0

License:
License URI:

*/

:root {
  --musta: #000000;
  --oranssi: #F15A24;
  --harmaa: #95afbb;
  --nappi: var(--oranssi);
  --btn-color: var(--oranssi);
  --wrap: 1100px;
  --sivu-margin: 25px;
  --gap: var(--sivu-margin);
  --full-nega-margin: -25px;
  --large-nega-margin: -25px;
}

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

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

*{
  margin:0;
  padding:0;
}

html,body{
  font-size: 18px;
}

body {
	background: #fff;
	color: var(--musta);
	text-align: left;
	font:400 18px/1.7 'Ubuntu', sans-serif;
}
p{
    margin-bottom:1em;
}
.wp-block-column p:last-child {
    margin-bottom: 0;
}


h1, h2, h3, h4{
	font:700 4em/1.2 'Ubuntu', sans-serif;
	color: var(--musta);
	margin:0 0 0.5em;
	word-wrap: break-word;
}
h1{
    font-size: clamp(min(2rem, 9.8vw), 8.2vw, min(4em, 72px));
    letter-spacing: -0.02em;
}
p + h2, p + h3, p + h4{
	margin-top:1em;
}
p:last-child{
    margin-bottom: 0;
}
h2{
    font-size: 2.2em;
    color: var(--oranssi);
    padding-bottom: 1em;
}

#header h1{
    color:#fff;
    text-align: center;
}

h3, h4{
	font-size: 1.325em;
  line-height: 1.5;
}
.wp-block-column > h3{
    padding-bottom: 1em;
}
.nostot h3{
    font-size:1.625em;
    line-height: 1.2;
}

.has-medium-font-size{
    font-size: 1.25em;
}
.has-large-font-size, .ingressi p{
    --wp--preset--font-size--large: 1.55em;
    font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 500px){
    .has-large-font-size, .ingressi p{
        --wp--preset--font-size--large: 1.2em;
        line-height: 1.5;
    }
    .has-medium-font-size{
        --wp--preset--font-size--medium: 1em;
        line-height: 1.5;
    }
}


a{
	color: var(--oranssi);
	border: none;
    outline: none;
    text-decoration: none;
}

a:hover{
	color:#f17f11;
}
.columns{
    /*border:1px #ccc dotted;*/
}
a img{
	border:none;
}
ul{
	margin:10px 0 10px 25px;
}
li{
	margin-left:15px;
}
li a{
    text-decoration: none;
}
.clear{
	clear:both;
}
.left, .alignleft {float:left;}
.right, .alignright  {float:right;}

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

/* 18 = min size, 24 = max size, 600 min width, 1200 max width */
.resp-font {
  font-size: calc(18px + (24 - 18)*(100vw - 600px)/(1200 - 600));
}

@media (max-width: 600px) {
  .resp-font {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  .resp-font {
    font-size: 24px;
  }
}

.has-primary-color{
    color: var(--oranssi);
}

.flex{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.f-nowrap{ flex-wrap: nowrap;}
.f-center{ justify-content: center; }
.f-justify{ justify-content: space-between; }
.f-space-around{ justify-content: space-around; }
.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; }
.flex > div, .f-col { flex: 1 1 auto; }


/* wp-columns tweak -> */

.wp-block-columns{
    margin: 0 auto;
    padding: 0 5px
}
.wrap{
    padding: 0 var(--sivu-margin);
}
.wp-block-group{
    padding: 0;
}
.wp-block-group .wp-block-columns{
    margin: 0 auto;
}
.wp-block-columns.full{
    max-width: 100%;
}
.wp-block-cover, .wp-block-group.full, .wp-block-group.full-wrap, .wp-block-group.full-width, .full-width{
  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-column,
#content .wp-block-column, .wp-block-media-text {
    margin: 0;
    padding: 15px 20px;
}
@media (min-width: 600px){
    .wp-block-column {
        flex-basis: 50%;
    }
}
@media (max-width: 599px){
    .wp-block-column{
        padding-top: 2px;
        padding-bottom: 2px;
    }
}
@media (max-width: 650px) {
  .wp-block-columns.has-2-columns,
  .wp-block-columns.has-3-columns,
  .wp-block-columns.has-4-columns {
    display: block;
  }

  .wp-block-columns .wp-block-column {
    margin: 10px 0;
  }
}

.wp-block-button__link{
    border-radius: 0;
}
/* .wp-block-button {
    margin-top: 2em;
} */

.wp-block-buttons {
    margin-top: 2em;
}
#content .wp-block-buttons{
    gap: 0.5em 5%;
}
ul#menu-main-menu.menu .menu-button {
    color: #fff;
    font-size: 0.9rem;
    margin: 0 15px;
    min-width: 130px;
}

ul#menu-main-menu.menu .menu-button a:hover {
    background: none;
}

.wp-block-button__link, .frm_forms .frm_button_submit, .menu .menu-button{
    display: inline-block;
    text-transform: none;
    line-height: 1.2;
    height: auto;
    border-radius: 5px;
    background: var(--nappi);
    background-size: 200%;
    background-position: 100% 0;
    font-size: 1.22rem;
    padding: 0.4em 1.5em;
    transition: all .3s;
    min-width: 160px;
    margin-bottom: 1.2em;
}
@media (max-width: 480px) {
    .wp-block-button__link, .frm_forms .frm_button_submit, .menu .menu-button{
        font-size: 1rem;
    }
}
.wp-block-button.is-style-outline .wp-block-button__link{
  border: 1px solid var(--nappi);
  color: var(--musta);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .frm_forms .frm_button_submit:hover, .menu .menu-button:hover{
  background: var(--nappi);
  color: #fff;
}

.has-sininen-background-color .wp-block-button__link,
.sininen .wp-block-button__link{
    box-shadow: 0 0 0 2px #fff;
}

.soitto-puhelin {
    font-size: 1.65em;
    text-align: center;
}
.wp-block-group.has-background{
    padding: 5%;
}
.has-primary-background-color{
    background: var(--oranssi);
    color: #fff;
}
.has-gray-background-color{
    background: #eee;
}

/* <- wp-columns tweak */


/* foundation tweak -> */
.row.full {
  width: 100%;
  max-width: 100%;
}

.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
figure {
    margin: 0;
}
@media screen and (min-width: 769px){
  .grid-container{
    padding: 0 35px;
  }
}
@media screen and (max-width: 768px){
    .full-768{
        width: 100%;
    }
}
@media screen and (max-width: 480px){
    .xsmall-12{
        width: 100%;
    }
    .xsmall-6{
        width: 50%;
    }
}

/* <- foundation tweak */

.padding-right-0{
    padding-right: 0;
}
.padding-left-0{
    padding-left: 0;
}
.margin-0{
    margin: 0 !important;
}
.wrap{
	max-width: var(--wrap);
	margin:0 auto;
}
.wrap.full{
    max-width: 100%;
}


img{
	max-width:100%;
	height:auto;
}

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


.row.padding{
    padding: 40px 0;
}


#top{
    padding: 20px 0;
    background: #fff;
    position: fixed;
    width: 100%;
    transition: all 0.5s;
}
.logo{
    display: block;
}
.logo div{
    width: 250px;
    transition: all 0.5s;
    margin: 0 auto;
}
#top.fixed{
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    padding: 15px 0;
    z-index: 999;
}
#top.fixed .logo div{
    /*width: 200px;*/
}
#top .flex {
    flex-wrap: nowrap;
}
#top .flex .f-col{
    flex: 0 1 auto;
}

#menu-top{
    display:block;
    padding:2px 0;
    color: #000;
}

.menu{
    margin:0 auto;
    text-align:center;
}
.menu li{
    list-style: none;
    padding:2px 10px;
    margin:0;
    display:inline-block;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 0.9em;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

#menu-top .menu li > ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1;
    text-align: left;
    max-width: 100%;
    background: #fff;
    padding: 20px 20px;
    margin: 0;
    margin-left: -10px;
    border: 1px dotted #ccc;
    transition: opacity 0.3s;

}

#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{
    display:inline-block;
    color: inherit;
    text-decoration:none;
    margin:0;
    background: linear-gradient(to right, var(--oranssi), var(--oranssi));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    transition: all .3s;
}
.menu li a:hover, .menu li.current-menu-item > a{
    background-size: 100% 1px;
}

.menu li > ul {
    /*display: none;*/
}
#alamenu a, .ala-alamenu a{
    border: 1px solid #ccc;
}
#alamenu{
    margin: -25px auto 25px;
}
#alamenu li, .ala-alamenu li{
    margin-bottom: 3px;
}
.ala-alamenu{
    margin-top: -20px;
}
#alamenu li.current-menu-ancestor a, #alamenu li.current-menu-item a, .ala-alamenu li.current-menu-item a{
    border-color: #ffa454;
}

.section{
    padding: 40px 0;
}

.padding{
    padding: 6% 0;
}

.search-form {
    display: flex;
}
.search-form .screen-reader-text{
    display: none;
}

#header{
    background: url() no-repeat 50% 50%;
    background-size: cover;
    min-height: 100px;
    height: 15vh;
}

.home #header{
    background-position: 0% 50%;
/*    height: 93vh;*/
}

#header .mask{
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.08) 100%);
}

#header .mask:after{
    content: '';
    display: block;
    background: url(img/mask.svg) no-repeat 50% 0%;
    background-size: 110%;
    padding-bottom: 2.3%;
    margin-top: -2.2%;
}


#header .wrap, #header .flex{
    height: 100%;
}


#header .wrap {
    max-width: 1300px;
}

@media (max-width: 1000px){
    .header-mask{
        max-width: 50vw;
        min-width: 300px;
        align-items: flex-start;
    }
    .home #header{
        background-position: 35% 50%;
    }
}

hr{
    max-width: 300px;
    margin: 50px auto;
    border:0;
    border-bottom: 1px solid #ccc;
}

#content{
    padding: 80px 0;
    margin-bottom: 2px;
    overflow: hidden;
}

.ingressi{
    text-align: center;
    margin-bottom: 10vh;

}
/*.ingressi:after{
    content: '';
    display: block;
    max-width: 300px;
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
    padding-top: 4vh;
}*/

/* osa nostojen tyyleistä suoraan blockissa */

/* ie */
.nostot .nosto{
    min-width: 250px;
}
.nostot .nosto .otsikko {
    flex-basis: 100%;
}

/* not ie */
@supports (display: grid) {
 .nostot .nosto{
    min-width: auto;
 }
 .nostot .nosto .otsikko {
    flex-basis: 0;
 }
}

.footer-ylakuva {
    padding-bottom: 35%;
}

.page-id-698 .footer-ylakuva {
    padding-bottom: 45%;
}
.wp-block-media-text{
    margin-bottom: max(7vh, 30px);
}
@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: calc(2 * var(--gap)) 0 0 0;
    }
    #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;
    }
}

#footer{
    background: linear-gradient(to bottom, rgba(255,255,255,.6) , rgba(255,255,255,0) 70%), linear-gradient(to bottom, var(--harmaa) ,var(--harmaa));
    font-size: 1em;
    font-weight: 400;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--harmaa);
    --wrap: 1300px;
}
@media (max-width: 800px) {
    #footer{
        font-size: 0.9em;
    }
}
#footer figcaption{
    text-align: center;
    color: #000;
    font-size: 1.08em;
}

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

#footer a{
    background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 50%, #fff 50%);
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    transition: all .3s;
}
#footer a:hover{
    background-position: 100% 100%;
}
#footer figure a{
    background: none;
}
#footer figure a:hover{
    filter: brightness(1.2);
}
#footer .wp-block-columns{
    padding-top: 70px;
}

#footer .alli-logo {
    margin-top: calc(-50px - 0.5em);
    margin-bottom: 0.5em;
}

@media (max-width: 599px){
    #footer .wp-block-column.alli {
        order: -1;
    }
}
#copy{
    background: var(--harmaa);
    font-size: .75em;
    padding: 5px 0;
}
#copy, #copy a{
    color: rgba(0,0,0,.5);
    text-decoration: none;
}
#copy a:hover{
    color: rgba(255,255,255,1);
    text-decoration: none;
}

#slider{
    position:relative;
}
#slider .slide{
    position:absolute;
    overflow:hidden;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity .7s;
    -o-transition: opacity .7s;
    transition: opacity .7s;
}
#slider .slide.show{
    opacity: 1;
    -webkit-transition: opacity .7s;
    -o-transition: opacity .7s;
    transition: opacity .7s;
}
#slider .slide.active{
    z-index: 2;
}

/* wp muokkaa-nappi */
p.muokkaa{
    text-align:right;
    position: absolute;
    right: 1%;
    margin-top: -25px;
    z-index: 999;
}
p.muokkaa a{
    text-decoration:none !important;
    background:none !important;
}
p.muokkaa a:after{
    display:none;
}
p.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;
}
p.muokkaa a:hover:before{
    background:#243082;
    color:#fff;
}

button{
    cursor: pointer;
}
a.nappi, .button, input[type="submit"]{
    font-size: 1.25em;
    line-height: 1;
    background: var(--nappi);
    padding: 8px 14px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;
}

a.nappi:hover, .button:hover, input[type="submit"]:hover{
    text-decoration: none;
    background: var(--nappi);
    color: #fff;
}


textarea { overflow: auto; }
input, textarea, select{
    padding:3px 8px;
    font:inherit;
    background: rgba(255,255,255,.2);
    border: 1px solid var(--harmaa);
    border-radius: 3px;
}
input:focus, select:focus{
    outline: none;
}
.search-form{
    position: relative;
}
.search-form.open input{
    width: 300px;
    max-width: 70vw;
    padding:3px 10px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--harmaa), 0 0 0 5px #fff;
}
.search-form input{
    width: 0;
    padding: 0;
    border:none;
    border-radius: 10px 0 0 10px;
    height: 40px;
    line-height: 40px;
    transition: all .3s;
    position: absolute;
    right: 40px;
}

.search-form button{
    height: 40px;
    border-radius: 0 10px 10px 0;
    padding: 5px;
    position: relative;
    z-index: 2;
    transition: all .3s;
}
.search-form.open button{
    box-shadow: 0 0 0 1px var(--nappi);
    background: var(--nappi);
}
.search-form button:hover path{
    fill: var(--nappi);
}
.search-form.open button path{
    fill: #fff;
}


form .col{
    width: 48%;
    min-width: 250px;
}

span.wpcf7-not-valid-tip{
    float:left;
    width: 100%;
    text-align: center;
}
.wpcf7-not-valid{
    border: 1px solid red !important;
}

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

.frm_form_field .grecaptcha-badge {
  display:none;
}

#content .frm_forms {
    margin: 0 auto;
}
.frm_forms h2{
    text-align: center;
}
#frm_field_28_container, .width-600 {
    max-width: 600px;
    margin: 0 auto;
}
.frm_forms .valinnat, #app.valinnat{
    background: #eee;
    padding: 50px;
    padding-bottom: 60px;
    margin-bottom: 60px;
}
.tilauslomake{
    margin-bottom: 40px;
}
@media (max-width: 800px){
    .frm_forms .valinnat, #app.valinnat{
        padding-left: 20px;
        padding-right: 20px;
    }
}

#app.valinnat hr{
    max-width: 100%;
    margin: 30px auto;
    border: 0;
    border-bottom: 1px solid #fff;
}

#app.valinnat h3{
    font-size: 1.7em;
    /*color: var(--oranssi)*/
}
#app.valinnat h4 span{
    font-weight: 400;
}
#app.valinnat h4{
    font-size: 1.4em;
    margin-top: 1em;
    color: var(--oranssi)
}
#app.valinnat .frm_radio{
    margin-bottom: 0.8em;
}
#app.valinnat label{
    font-weight: 700;
    line-height: 1.4;
    margin-left: 30px;
    display: block;
    cursor: pointer;
}
#app.valinnat label span.suositus {
    font-weight: 400;
    color: var(--oranssi);
    padding-left: 5px;
}
#app.valinnat input[type="radio"]{
   margin-right: 0.5em;
   height: 1em;
   width: 1em;
   vertical-align: text-bottom;
   /*float: left;*/
   margin-left: -28px;
}
#app.valinnat select{
   background: #fff;
   padding: 10px;
}
#app.valinnat input[type="number"]{
   background: #fff;
   width:70px;
   text-align: center;
}
#app.valinnat .info{
    margin-top: 0.3em;
    margin-bottom: 0;
   font-size: 0.85em;
   line-height: 1.5;
   color: #444;
   font-weight: 400;
}

#app.valinnat .frm_radio {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
#app.valinnat .frm_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 23px;
  width: 23px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #bbb;
  box-shadow: inset 0 0 0 2px #fff;
}

/* On mouse-over, add a grey background color */
#app.valinnat .frm_radio:hover input ~ .checkmark {
  /*box-shadow: 0 0 7px var(--oranssi);*/
  border-color: var(--oranssi);
}

/* When the radio button is checked, add a blue background */
#app.valinnat .frm_radio input:checked ~ .checkmark {
  background-color: var(--oranssi);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
#app.valinnat .frm_radio input:checked ~ .checkmark {
    box-shadow: inset 0 0 0 4px #fff;
}



.frm_style_formidable-style.with_frm_style .valinnat .form-field, .hinnat{
    max-width: 800px;
    margin: 0 auto 40px;
}
.frm_forms .valinnat .kohde,
.frm_forms .valinnat .jatteet-talkoo,
.frm_forms .valinnat .jatteet-raksa,
.frm_forms .valinnat .alue,
.frm_forms .valinnat .palvelu{
    /*grid-column: 1 / span 6;*/
}

.frm_forms .valinnat .tarvitsen,
.frm_forms .valinnat .lavankoko,
.frm_forms .valinnat .tuote,
.frm_forms .valinnat .maarakentta,
.frm_forms .valinnat .hinta{
    /*grid-column: 8 / span 5;*/

}
.frm_forms .valinnat .lavankoko{
    align-self: center;
}
.frm_forms .valinnat .maarakentta{
    margin-top: 20px;
}
.frm_forms .valinnat .maarakentta input{
    width: 70px;
    text-align: center;
}
.frm_forms .valinnat .lavankoko .jatehinta strong{
    color:#000;
    font-size: 1.8em;
    font-weight: 700;
    padding-right: 10px;
}
#frm_form_5_container.frm_forms .valinnat .alue,
#frm_form_5_container.frm_forms .valinnat .tuote,
#frm_form_5_container.frm_forms .valinnat .palvelu{
    margin-bottom: 40px;
}
#frm_form_5_container.frm_forms .valinnat .frm_primary_label,
#frm_form_5_container.frm_forms .valinnat h3{
    color: var(--oranssi);
    border-top:0;
}
#frm_form_5_container.frm_forms .valinnat label{
    font-weight: 700;
}
#frm_form_5_container.frm_forms .valinnat label span,
#frm_form_5_container.frm_forms .valinnat .info{
    font-weight: 400;
    font-size: 0.85em;
    line-height: 1.5;
    display: inline-block;
    text-indent: 0;
}
#frm_form_5_container.frm_forms .valinnat .info{
    color:#4a4a4a;
    display: block;
    margin-top: 15px;
}
#frm_form_5_container.frm_forms .valinnat .palvelu label{
    font-weight: 400;
    font-size: 0.85em;
}
#frm_form_5_container.frm_forms .valinnat .palvelu label strong{
    font-size: 1rem;
}
#frm_form_5_container.frm_forms .valinnat .frm_radio{
    margin-top: 10px;
}

.frm_forms .valinnat .huom{
    font-size: 0.85em;
    color: #4a4a4a;
}
.frm_forms .valinnat .jatteet-talkoo .huom{
    margin-top: -15px;
}
.valinnat .hintalatkat{
    display: flex;
    flex-wrap: wrap;
}
.valinnat .hinta{
    text-align: center;
    width: 240px;
    height: 240px;
    background: #fff;
    border-radius: 50%;
    padding: 25px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.8s;
    margin-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    float: left;
    margin-right: 10px;
}
.valinnat .hinta div{
    width: 100%;
}
.valinnat .hinta .kokonaishinta{
    font-size: 2.7em;
    font-weight: 700;
    line-height: 1.2;
}
.valinnat .jatehinta .kokonaishinta,
.valinnat .punnitushinta .kokonaishinta{
    font-size: 3em;
}
.valinnat .kokonaishinta span{
    font-size: 0.45em;
    line-height: 1;
    font-weight: 400;
    display: block;
    margin-bottom: 10px;
    vertical-align: text-top;
}
.valinnat .kokonaishinta span.tahti{
    display: inline-block;
}
.valinnat .hinta .alv{
    line-height: 1.4;
    color: #555;
    margin-top: 10px;
    margin-bottom: -10px;
}
.hinnat .huomio strong{
    font-size: 1.15em;
}
.opa1{
    opacity: 1 !important;
}
.valinnat .hinta{
}

.frm_forms h2 {
    margin: 20px 0;
}
.frm_forms h3 {
    font-size: 1.5em !important;
    border: 0 !important;
}

.frm_style_formidable-style.with_frm_style .frm_message p {
    color: #e06437 !important;
}


.frm_style_formidable-style.with_frm_style .frm_message, .frm_success_style {
    border: 1px solid #e06437 !important;
    background-color: #ffffff;
    color: #e06437 !important;
    border-radius: 0;
    font-size: 1.2em;
}

.frm_combo_inputs_container, .frm_grid_container, .frm_form_fields .frm_section_heading, .frm_form_fields .frm_fields_container {
    display: grid;
    grid-template-columns: repeat(12, 6.5%);
    grid-auto-rows: max-content;
    grid-gap: 0 2%;
}

.frm_style_formidable-style.with_frm_style .form-field {
    margin-bottom: 20px;
    width: 100%;
}

[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea, select {
    width: 100%;
    max-width: 400px;
}

.frm_forms input[type=submit], .frm_forms button[type=submit]{
    display: inline-block;
}
.frm_forms label, .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 input[type="text"], .frm_style_formidable-style.with_frm_style input[type="password"], .frm_style_formidable-style.with_frm_style input[type="email"], .frm_style_formidable-style.with_frm_style input[type="number"], .frm_style_formidable-style.with_frm_style input[type="url"], .frm_style_formidable-style.with_frm_style input[type="tel"], .frm_style_formidable-style.with_frm_style input[type="file"], .frm_style_formidable-style.with_frm_style input[type="search"], .frm_style_formidable-style.with_frm_style select, .frm_style_formidable-style.with_frm_style .frm-card-element.StripeElement {
    height: 40px;
    line-height: 1.3;
}
.frm_submit{
    text-align: center;
}
.frm_forms .frm_submit button.frm_button_submit {
  display: inline-block;
  text-transform: none;
    line-height: 1.2;
    height: auto;
    border-radius: 5px;
    background: var(--nappi);
    background-size: 200%;
    background-position: 100% 0;
    font-size: 1.22rem;
    padding: 0.4em 1.5em;
    transition: all .3s;
    min-width: 160px;
    color: #fff;
    border: none;
}


.frm_forms .frm_submit button.frm_button_submit:hover,
.wp-block-button__link:hover,
.menu .menu-button:hover {
    background: #333;
    color: #fff;
}


.frm_primary_label {
    font: 700 1em/1.2 'Ubuntu', sans-serif !important;
    margin-bottom: 10px !important;
}


.frm_description {
    margin-top: 10px !important;
}

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

.frm_form_fields .frm_grid_container {
    display: grid;
}

.frm_blank_field input, .frm_blank_field textarea, .frm_blank_field select{
    border: 1px solid #C70501 !important;
}
.frm_error, .frm_error_style, .frm_message {
    color: #C70501;
    text-align: center;
}
.frm_error_style, .frm_message {
    background: rgba(255,255,255,.5) !important;
}
form input[type=text].frm_verify {
    display: none !important;
}

.reveal {
    max-width: 800px;
    width: auto;
}

#mobilebuttons{
    padding: 0;
    display: none;
    position: fixed;
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, .5);
    font-size: 15px;
    width: 100%;
    z-index: 999;
    background: rgba(51, 51, 51, .9);
}
#mobilebuttons .flex{
    flex-wrap: nowrap;
}
#mobilebuttons .column{
    flex:1 0 20%;
}
#mobilebuttons a{
    color:#fff;
    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: 30px;
    fill: currentColor;
    vertical-align: middle;
}
#mobilebuttons .teksti{
    padding: 0 10px;
}

#mobilebuttons .mobile-Email .ikoni svg{
    width: 38px;
}
#mobilebuttons .mobile-Map .ikoni svg{
    width: 28px;
}

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


a.mobilemenu{
    display: none;
    font-size: 13px;
    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: 3px;
    margin-top: 1em;
    background-color: #fff;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;

}
#mobilebuttons a.mobilemenu{
  float: none;
  font-size: 12px;
}
#mobilebuttons a.mobilemenu span.ikoni{
  vertical-align: middle;
  margin-top: -0.1em;
}
#mobilebuttons a.mobilemenu span.ikoni, #mobilebuttons 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: 3px;
    background-color: #fff;
    position: absolute;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
a.mobilemenu span.ikoni:before{
    top: -1em;
}
a.mobilemenu span.ikoni:after{
    bottom: -1em;
}
a.mobilemenu:hover{
    border-color: #ca0e04;
}


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

#menu-bottom{
/*display: none;*/
    max-height: 0;
    overflow: hidden;
    background: #fff;
    position: fixed;
    z-index: 9000;
    width: 100%;
    left: 0;
    bottom: 53px;
    padding: 0 20px;
    line-height: 1.4;
    transition: all .7s;
}
#menu-bottom div{
  padding: 50px 0;

}

#menu-bottom ul{
    margin: 0;
}
#menu-bottom li{
  font-size: 1.1rem;
  display: block;
  vertical-align: middle;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: left;
  font-weight: 400;
}
#menu-bottom li a{
  display: inline;
  padding-bottom: 3px;
}
#menu-bottom li li{
  text-transform: none;
}
#menu-bottom.open{
    max-height: 1000px;
    box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(0,0,0,.3);
}
#menu-bottom ul.menu .plussa{
    font-size: 30px;
    color: var(--musta);
    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: 1px;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
}
#menu-bottom ul.menu .plussa:before, #menu-bottom ul.menu .plussa:after{
    content: "";
    width: 14px;
    height: 2px;
    background: #000;
    display: block;
    position: absolute;
    top: 0.5em;
    left: 0.3em;
}
#menu-bottom ul.menu .plussa:after{
    transform: rotate(90deg);
    transition: all .3s;
}
#menu-bottom ul.menu .plussa.open:after{
    transform: rotate(0deg);
}
#menu-bottom ul.menu .plussa:hover{
    background: #fff;
}

@media screen and (max-width: 1024px){
}

@media screen and (max-width: 800px){

}
@media screen and (min-width: 769px){
    div[class*='-menu-container']{
        display: block !important;
    }
    #menu-bottom{
      display: none;
    }
}
@media screen and (max-width: 768px){
    .logo{
        float: none;
    }
    #mobilebuttons, #menu-bottom{
        display: block;
    }
    #menu-bottom .sub-menu{
        display: none;
    }
    body{
        margin-bottom: 50px;
    }
   #menu-top{
    display: none;
   }
   .joinchat{
       --bottom: 60px !important;
   }
}

@media screen and (max-width: 640px){

}

@media screen and (max-width: 480px){
    #header{
        min-height: 0;
        height: 40px;
    }
    h2{
        font-size: 1.5em;
    }
    #copy .cell{
        width: 100%;
        text-align: left;
    }

}

@media screen and (max-width: 320px){
	body{
        font-size: 14px;
    }
    .valinnat .hinta {
        height: 220px;
        width: 220px;
    }
}

/* TILAUSDATA */

.page-id-955 #header{
    height: auto;
}
.page-id-955 #content{
    padding-top: 0;
}

.tilauksen-tiedot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.tilauksen-tiedot table{
    flex-basis: calc(50% - 2em);
    min-width: 400px;
    border: 0;
    padding: 0;
    width: 100%;
    margin: 1em;
    line-height: 1.3;
}
.tilauksen-tiedot td.label{
    width: 45%;
    padding-right: 15px;
    text-align: right;
    color: var(--oranssi);
}
.tilauksen-tiedot.short .tuotetiedot td.label{
    width: auto;
}
.tilauksen-tiedot.short .hintatiedot td.label{
    width: 50%;
}
.tilauksen-tiedot td{
    vertical-align: top;
    padding: 3px;
}
.bigger{
    font-size: 1.1em;
    font-weight: 700;
}
.smaller{
    font-size: 0.85em;
    font-weight: 400;
}
.tilauksen-tiedot th{
    color: #ccc;
    text-align: center;
    font-weight: 400;
    font-size: 1.2em;
    margin: 0 auto 0.5em;
    border-bottom: 1px solid #ccc;
}
.tilauksen-tiedot tr:nth-child(2) td{
    padding-top: 10px;
}


/*Hinnastotaulukot*/

.wp-block-table.is-style-stripes.hinnasto td {
    padding: 0.4em;
}

.wp-block-table.is-style-stripes.hinnasto th {
    padding-bottom: 0.7em;
}

.wp-block-table.is-style-stripes.hinnasto table {
    margin-bottom: 1em;
    margin-top: 1em;
}

.hinnastot h2 {
    margin-top: 1.5em;
    margin-bottom: 1em;
}


/*WOOCOMMERCE CSS*/

.woocommerce-page .wrap {
    --wrap: 1200px;
}


.woocommerce-page #header {
    background-image: none!important;
}

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



.woocommerce-page #content .button, .woocommerce a.button{
    margin-top: 0;
    background-color: var(--oranssi);
    color: #fff;
}

.woocommerce-page #content .button:hover, .woocommerce a.button:hover{
    background-color: #333;
    color: #fff;
    
}

.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{
    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%;
    text-align: center;
    margin-right: 0.8em;
}
@media (min-width: 600px) {
    .woocommerce input.qty{
        padding-right: 0;
    }
}
.woocommerce ul.products li.product .add_to_cart_button::after,
.woocommerce ul.products::after{
    display: none;
}

.woocommerce ul.products li.product a h2.woocommerce-loop-product__title {
    font-family: var(--body-font);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em !important;
    margin-top: 0.5em;
    text-align: center;
}
@media (max-width: 380px) {
    .woocommerce ul.products li.product a h2.woocommerce-loop-product__title {
        text-transform: unset;
    }
}
h2.woocommerce-loop-category__title {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.2em;
}

.woocommerce ul.products li.product a .amount {
    font-size: 1.2em;
    font-weight: 700;
    color: #000;
   position: relative;
}

.woocommerce ul.products li.product a .amount:after {
  content: '';
  position: absolute;
  border: 2px solid var(--secondary);
  height: 5px;
  width: 100%;
  border-left: 0;
  border-right: 0;
  margin: 1em 0;
  left: 0;
  top: 6px;

}

.single-product div.product p.price:after {
    content: '';
  position: absolute;
  border: 2px solid var(--secondary);
  height: 5px;
  width: 100%;
  border-left: 0;
  border-right: 0;
  margin: 1em 0;
  left: 0;
  top: 12px;
}

.woocommerce-page .tabs {
    border: none;
}

.woocommerce-variation-price {
    margin-bottom: 0.5em;
}

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

.woocommerce ul.products li.product a img {
    margin-bottom: 0;
}



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

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


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

.product-image-summary-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 4%;
    justify-content: space-between;
}

.single-product h1 {
    text-align: left;
    color: var(--oranssi);
    font-size: clamp(1.5em, 7vw, min(4em, 40px));
    font-weight: 700;
    margin-top: 2vh;
    text-transform: uppercase;
}

.single-product form {
    margin: 1em 0;
}

.woocommerce ul.products li.product .price {
    text-align: center;
}

.single-product div.product p.price, 
.single-product div.product span.price {
    color: var(--black);
    font-weight: 700;
    font-size: 1.8em;
    position: relative;
    /* width: fit-content; */
}

.single-product div.product div.images img {
    margin-bottom: 1em;
}

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

.woocommerce #content ul li {
    margin-left: 0;
}
.single-product .product_meta{
    margin-top: 1em;
}
.single-product .product_meta > span{
    display: block;
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product a img {
    border: 11px solid var(--primary);
    transition: all 0.4s ease;
}

.woocommerce ul.products li.product a img:hover {
    opacity: 0.8;
}


.woocommerce .woocommerce-breadcrumb {
    text-align: center;
    color: #000;
    margin-bottom: 3em;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--oranssi);
    transition: 0.4s ease;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: #000;
}




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


.tuote-nostot {
    margin: 4em 0;
}

span.sku_wrapper, .single-product a.reset_variations {
    display: none!important;
}


/*Ostoskoriin liittyvät*/


/*Cart icon*/

 a.cart-icon {
    align-self: center;
    margin-right: 1.5em;
    margin-left: 1em;
    position: relative;
    background: url(../custom/img/cart-icon.svg) no-repeat 50% 50%;
    background-size: contain;
    display: inline-block;
    width: 34px;
    height: 30px;
}

a.cart-icon .cart-icon-count{
    display: block;
    position: absolute;
    top: -6px;
    right: -14px;
    border-radius: 50%;
    background-color: #333;
    font-size: 15px;
    line-height: 1.3em;
    width: 1.32em;
    height: 1.32em;
    color: #fff;
    padding: 0;
    text-align: center;
}
a.cart-icon .cart-icon-count.cart-count-0{
    display: none;
}

a.cart-icon:hover {
    transform: scale(1.1);
}



.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, .woocommerce-message a {
    margin-top: 2em!important;
}


.woocommerce form {
    max-width: unset;
}

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

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


/*Kassa*/

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
    background-color: var(--btn-color);
}
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
    background-color: var(--musta);
}



.woocommerce-error::before {
    left: 0.5em;
}

.woocommerce ul#shipping_method li input {
    width: 1em;
}

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

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


@media(max-width: 768px) {
    .woocommerce-shipping-fields {
        margin-top: 2em;
    }
    .woocommerce ul.order_details li {
        width: 100%;
    }
}


/*Archive*/

.archive #content h1 {
    font-size: clamp(2.5em, 7vw, min(4em, 72px));
    text-align: center;
}


.term-description {
    font-size: 1.55em;
    text-align: center;
    margin-bottom: 1em;
}

.archive .woocommerce ul.products {
    margin-top: 3em;
}

.archive .woocommerce ul.products li.product a {
    display: flex;
    flex-direction: column-reverse;
}


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


@media(max-width: 600px) {
    #content .woocommerce ul.products li.product, .woocommerce #content ul.products li.product {
        width: 100%;
    }
}


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

.woocommerce #content ul li, .woocommerce-js #content ul li {
    margin-left: 0;
}
.woocommerce ul.products{
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.6%;
    row-gap: min(12vw, 6em);
    justify-content: flex-start;
    margin-bottom: 4em;
}

.archive .woocommerce ul.products{
   
    justify-content: flex-start;
}


.woocommerce ul.products::before{
    display: none;
}
#content .woocommerce ul.products li.product,
.woocommerce #content ul.products li.product{
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 23%;
}
@media (max-width: 800px) {
    .woocommerce ul.products{
        column-gap: 20px;
    }
    #content .woocommerce ul.products li.product,
    .woocommerce #content ul.products li.product{
        width: calc(50vw - var(--sivu-margin) - 20px);
        font-size: 0.9em;
    }
}
.woocommerce ul.products li.product a{
    flex-grow: 1;
}
.woocommerce ul.products li.product a.button{
    flex-grow: 0;
    min-width: unset;
    padding: 0.6em;
    margin-top: 0.5em;
}
.woocommerce .woocommerce-ordering select {
    padding: 0.8em;
    border-radius: 3px;
}

.woocommerce #content ul.products li::before, ul.payment_methods li::before, #content ul:not(.blocks-gallery-grid) li::before {
    display: none!important;
}

h2 + .woocommerce {
    margin-top: 3em;
}


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

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

#delivery_date_field, #pickup_date_field{
    display: none;
}

#delivery_date_field.validate-required, #pickup_date_field.validate-required{
    display: block;
}

.form-row input + .field-info{
    font-size: 0.8em;
    line-height: 1.5;
    margin: 5px 3px;
}