/* montserrat-300 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: local(''), url('../fonts/montserrat-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/montserrat-v18-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display:swap; } /* montserrat-regular - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/montserrat-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/montserrat-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display:swap; } /* montserrat-700 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: local(''), url('../fonts/montserrat-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/montserrat-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display:swap; } /* montserrat-900 - latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: local(''), url('../fonts/montserrat-v18-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/montserrat-v18-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display:swap; } :root { --primary-color: #ec831b; --base-font-size: min(max(0.95rem, 1vw), 1rem); --base-text-color: #2f2f2f; --base-line-height: 160%; --google-font: 'Montserrat', sans-serif; --google-heading-font: 'Montserrat', sans-serif; --navilink-font-size: min(max(0.8rem, 0.8vw), 1rem); --navilink-color: #fff; --navilink-font-weight: 500; --navilink-padding: 20px 15px; --navilink-selected-bg: #fff; --navilink-selected-color: #ee851d; --heading-size-1: min(max(1.6rem, 2.6875vw), 2.6875rem); --heading-size-2: min(max(1.8rem, 1.875vw), 1.875rem); --heading-size-3: min(max(1.1rem, 1.8125vw), 1.8125rem); --heading-size-4: min(max(1.5rem, 2.25vw), 2.25rem); --heading-size-5: min(max(1.5rem, 2.8125vw), 2.8125rem); --heading-size-6: min(max(1.3rem, 2.1vw), 2.1rem); --grid-gap: 2em 1em; --button-background: #ee851d; --button-text-color: #fff; --button-font-size: min(max(0.8rem, 1vw), 1rem); --button-font-weight: 500; --button-padding: 20px 50px; --max-input-width: 450px; --max-button-width: min(100%, 600px); --img-gallery-rows: repeat(4, 1fr); --img-gallery-img-size: 240px; --mobilemenu-container-height: 63px; --mobilemenu-open-close-color: #171714; --mobilemenu-menutext-color: #171714; --mobilemenu-button-background: #171714; --mobilemenu-link-color: #fff; --mobilemenu-link-background: #222222; --mobilemenu-expand-button: #ee851d; --mobilemenu-submenu-background: #2f2f2f; --padding-s: min(max(20px, 1vw), 20px); --padding-m: min(max(30px, 2vw), 40px); --padding-xl: min(max(40px, 3vw), 60px); --padding-xxl: min(max(60px, 4vw), 80px); } /* General */ body, html, p, button, #tuotesivu-tuotteet li, .syyboksi li, .subpage li {margin: 0;padding: 0;font-family: var(--google-font);color: var(--base-text-color);font-size: var(--base-font-size);line-height: var(--base-line-height);} #tuotesivu-tuotteet ul{padding: 0 0 0 20px;} body {line-height: calc(1rem + .1vw); background:#f0f0f0} #frontbg{background:#fff} section, article, .center-col, .content-col {box-sizing: border-box;} img {max-width: 100%;height: auto;display: block;} a {color: var(--primary-color);text-decoration: none} a:hover {text-decoration: underline} header.content-col {position: absolute;z-index: 2;} picture {width: 100%; display:block;max-width:100%} table, td, tr {border-collapse: unset !important} .featuretable img {max-width: 65%;margin: 0 auto;} /*#main-navi a[href^="https://piippulaskuri.fi/"], .mean-nav a[href^="https://piippulaskuri.fi/"]{pointer-events: none;}*/ /*#main-navi a[href^="https://piippulaskuri.fi/"]:before, .mean-nav a[href^="https://piippulaskuri.fi/"]:before{content:"Tulossa"; display:block;font-size:9px; font-weight:700;color:#e8821d; position:absolute;top:4px}*/ /* Headers, sivuston

-

tagien muotoilut */ h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {font-family: var(--google-heading-font);margin: 0;padding: 0;line-height: 110%;color: var(--primary-color); color:#262626} h1, h1 a {font-size: var(--heading-size-1);color:#ec831b} h1#ammattilaisille-header {font-weight:300;font-size:min(max(1.5rem, 2.8125vw), 2.8125rem); color:#000; text-align:center;} #tuotekortti-header {font-size:min(max(1.4rem, 1.8125vw), 1.8125rem); font-weight:500; color:#ec831b} h2, h2 a {font-size: var(--heading-size-2); color: #000;} h3, h3 a {font-size: var(--heading-size-3);} h4, h4 a {font-size: var(--heading-size-4);font-weight: 500;} h5, h5 a {font-size: var(--heading-size-5); font-weight: 700;} h6, h6 a {font-size: var(--heading-size-6);} p {font-weight: 400;} @media screen and (max-width:1024px) {table, td, tr {height: auto !important; max-width: 100%}} @media screen and (max-width:480px) {body {line-height: calc(1rem + 1.2vw)}} @media screen and (max-width:375px) { h1, h2, h3, h4, h5, h6 {word-wrap: anywhere}} /* Wrappers */ .content-col, .center-col {width: 100%;clear: both;position: relative;} .center-col {width: min(max(60vw, 1600px), 90%);margin: 0 auto} .center-col iframe { max-width: 100%;margin: 0 auto} .narrow-col {max-width: 1200px;} .erikoiskuva, .kuva, .kuva2 {box-sizing: border-box;border: 0; outline: 0;height: auto;margin: 0;cursor: pointer;max-width: 100%;} @media screen and (max-width:1280px) {header .center-col {width:100%;padding:0 1vw;}} @media screen and (max-width:480px) {.kuva, .kuva2 {float: none !important; clear: both;padding: 20px 0;box-sizing: border-box;}} /* Grids */ .autogrid, .dgrid-2-cols, .dgrid-3-cols, .dgrid-4-cols, .dgrid-s-m-s-cols, .dgrid-s-xl-cols, .dgrid-xl-s-cols, .dgrid-m-l-cols, .dgrid-l-m-cols {display: grid;grid-gap: var(--grid-gap);clear: both;position: relative;} .dgrid-s-m-s-cols {grid-template-columns: 1fr 2fr 1fr} .dgrid-s-xl-cols {grid-template-columns: 1fr 3fr} .dgrid-xl-s-cols {grid-template-columns: 3fr 1fr} .dgrid-m-l-cols {grid-template-columns: 1fr 2fr} .dgrid-l-m-cols {grid-template-columns: 2fr 1fr} .autogrid, .dgrid-3-cols {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))} .dgrid-2-cols { grid-template-columns: repeat(2, 1fr)} .dgrid-4-cols {grid-template-columns: repeat(2, 1fr);} .nogap {grid-gap: 2em 0;} @media screen and (max-width:1024px) {.dgrid-m-l-cols, .dgrid-l-m-cols, .dgrid-s-m-s-cols, .dgrid-s-xl-cols, .dgrid-xl-s-cols {grid-template-columns: 1fr}} @media screen and (max-width:768px) {.dgrid-2-cols, .dgrid-4-cols {grid-template-columns: 1fr;}} @media screen and (max-width:480px) {.autogrid, .dgrid-2-cols, .dgrid-3-cols {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}} /* Navigation */ #main-navi, #top-navi, #footernavi, #footernavi-secondary {display: flex;padding: 0;list-style: none;z-index: 2;position: relative;flex-direction: row;text-transform: uppercase;justify-content:space-around} #main-navi {background: #fff;border-radius: 40px;padding: 0 10px;box-sizing: border-box;padding: 0 20px;width: 100%;margin: 30px 0 0 0;} #logo {align-self:flex-end;} #main-nav {display: flex; align-items: flex-end;justify-content: flex-start; flex-direction:column;} #top-navi {margin:0;z-index:4; margin-top:30px} #top-navi li {color:#fff; margin-right:40px;display: flex;justify-content: space-evenly;align-items: center;} #top-navi a {padding:0;padding: 0;font-weight: 700;} #footer-nav {display: flex; justify-content: center;} #footer-nav a {font-size: min(max(0.8rem, 0.8vw), 0.8rem)} #footernavi-secondary {margin-left: 60px;} #footernavi-secondary a {color: #ee851d;} a.orangelink {color:#eb831a} .mainnavi-link, .topnavi-link, .footerlink {padding: var(--navilink-padding);font-size: var(--navilink-font-size);font-weight: var(--navilink-font-weight);text-decoration: none;color: var(--navilink-color);display: block;} .topnavi-link {color: #000} .pudotusvalikko ul {margin:0; padding:0; list-style-type:none;} #top-navi span, .pudotusvalikko span {transform: rotate(90deg);display: inline-block;} #top-navi span {padding-left:1px;} #link-sel-1-9, #link-sel-2-3, #link-sel-5-4, #link-sel-4-5, #link-sel-6-8, #link-sel-14-10, #link-sel-4-10, #link-sel-3-11, #link-sel-8-21 {color: var(--primary-color);text-decoration: underline;} #logoimg {max-width: 50%;min-width: 127px;margin: 0 auto;float: none;display: block;height: auto;padding: 0 0 10px 0;-webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.2));} #sidenavi ul {background: var(--primary-color);padding: 10%;margin: 0;list-style: none;} #shop-langnavi{position:relative;padding:0 2px;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 4px;margin-left:0px} #shop-langnavi a {padding: 0;display: flex;color: #331000;font-size: 14px;font-weight: 500;font-weight:500;width: 30px; justify-content: center; align-items: center;border-radius:4px;height:25px} #shop-langnavi{padding:3px 3px} a#selected-lang {background:#dc8227; color:#fff; font-weight:700;} @media screen and (max-width: 1024px) {#main-nav, #footer-nav {display: none;}} /* Site elements & styles */ #main-heroimg {width: 100%;} #mainhero .abs-element{width: 600px;text-align: left;margin-right: 28vw;} #mainhero .center-elements{align-items:flex-end;} .headerbox {background:#fff; width:max-content; font-size:14px;font-weight:700;color:#6c767c; text-transform:uppercase; padding:5px 20px; border-radius:4px;} #mainhero{position: relative;} .tns-item #herotext-1,.tns-item #herotext-2 {max-width: 40%;margin: 0 auto;text-align: left;right: 10%;} .tns-item #herotext-3{bottom:19%; max-width:33%; text-align:left;} #herotext-1 h2, #herotext-2 h2 {font-size:min(max(1.5rem, 3vw), 3rem); padding:10px 0;} #tuotekaruselli{position:relative;} #tuotekaruselli picture img {width:100%} #tuotekaruselli .abs-element {max-width: 49%;padding: 0 4em 0em 8em;height: 100%;display: flex;text-align: left; justify-content: center;align-items: flex-start;} /*#tuotekaruselli .webiolinkkipainike{display:inline;bottom: 5%;left: 4em; position:absolute;z-index:20;}*/ .siro-carousel-features {padding: 0 0 0 1em;} .siro-carousel-features li {font-family: var(--google-font);font-size: 1rem;line-height:160%} img.bannerlogo {border: none !important; border-radius: 0 !important;} .dflex-kaupallinennosto{background: #fff;border-radius: 200px;padding: 2em;box-sizing: border-box;} #randomdiat .webiolinkkipainike {margin:0 auto;} #lomakerivi_submit_14_30_2 .lomakenappi_submit {height: auto !important;} #fmoment-table img {object-fit: cover;min-height: 280px;max-height: 350px;height: 15vw;width:100%} #tuotesivu-fwimg {object-fit: cover;width: 100%;object-position: left bottom;} #ominaisuusnostot-wrapper {background-size:cover;min-height: 600px;display: flex;align-items: center;} .omwrapper#ominaisuusnostot-wrapper {min-height:unset; display:grid;} #omwrapper-content{background-size:cover; height:100%;display:flex; flex-direction:column;justify-content:center; align-items:center;} #omwrapper-content img {width: min(max(80px, 6vw), 8vw);} #omwrapper-content tr{padding-bottom: 2em;display: grid;width: 100%;grid-template-columns: 150px auto;align-items: center;} #omwrapper-content tr td {width:100% !important;} #omwrapper-content .featuretable {max-width: 80ch;margin: 0 auto;} #omwrapper-img img{max-height:1200px; width:100%; height:auto;} @media screen and (min-width:1920px) {#tuotesivu-fwimg {min-height: unset;max-height: unset}} @media screen and (max-width:1660px) {#mainhero .abs-element{margin-right: 16vw;}#tuotesivu-top-wrapper img {max-width:250px}} @media screen and (max-width:1280px) {#mainhero .abs-element{margin-right: 8vw;}#tuotesivu-top-wrapper img {max-width:200px}} @media screen and (max-width:1024px) {img.bannerlogo {max-width: 180px;}#tuotesivu-fwimg { min-height: 300px;max-height: 65vw;}#omwrapper-img img {max-height: 400px;width: 100%;height: auto;object-fit: contain;}#omwrapper-content .featuretable {max-width: unset;}#omwrapper-img {background:#000}#omwrapper-content tr {grid-template-columns: 90px auto;}} @media screen and (max-width:575px) {#omwrapper-content tr{grid-template-columns: 1fr}#omwrapper-content .featuretable img {display: none;}#omwrapper-content{padding:2em}#fmoment-table tr {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 1em;}#fmoment-table img {object-fit: cover;min-height: 220px;max-height: 350px;padding: 0;}.kuva.fmomentimg {float: none !important;max-height: 300px;object-fit: contain;}} /* Ribbon */ #inforibbon:empty, #inforibbon-mbl:empty {display:none;} #inforibbon,#inforibbon-mbl {background: #000} #inforibbon a,#inforibbon-mbl a {display: flex;justify-content:center;padding: 15px 30px;box-sizing: border-box;align-items: center; flex-wrap:wrap;} #inforibbon a:hover,#inforibbon-nbl a:hover {text-decoration:none;} #inforibbon span,#inforibbon-mbl span {color: #fff;margin-right: 3vw;} #inforibbon p, #inforibbon-mbl p {width:100%} .ribbon-header {color:#fff; font-weight:700;} .ribbon-subheader {color:#B9B9B9} .infobutton {background: #ec831b;padding: 5px 20px;border-radius: 30px;font-size: 0.9rem;font-weight: 700;} .infobutton:hover {background:green;} @media screen and (max-width:1024px) {#inforibbon {display:none;}#inforibbon-mbl{display:flex;}#inforibbon-mbl:empty{display:none;}#inforibbon span,#inforibbon-mbl span, .infobutton {font-size: 0.8rem;}#inforibbon a,#inforibbon-mbl a {padding:15px 30px}} @media screen and (max-width:860px) {#inforibbon a,#inforibbon-mbl a{flex-direction: column;text-align:center;}#inforibbon span,#inforibbon-mbl span, .infobutton {font-size: 1rem;}#inforibbon span,#inforibbon-mbl span{line-height: 140%;}.infobutton{min-width: 100px;text-align: center;padding: 8px 20px; margin-top:20px;}} /* Video */ video {position: absolute;object-fit: cover;height: 100%;object-position: center -25vw;width:100%} /* Tuotebannerit alasivuilla */ .mobile-banners {display: flex;justify-content: center;} .mobile-banners .bg-kuva {width: 400px;} .mobile-banners article {position: absolute;bottom: 25px;left: 25px;} .mobile-banners div {position: relative;} .mobile-banners .logo-kuva {height: 40px;width: auto;} .mobile-banners h2 {font-size: var(--heading-size-3);padding-top: 10px;padding-left: 5px;} .mobile-banners .siro-carousel-features {padding: 0 0 0 20px;} .orange-border .bg-kuva {border: 1px solid var(--primary-color) !important;padding: 0 !important;} .blue-border .bg-kuva {border: 1px solid #00a6d8 !important;padding: 0 !important;} .grey-border .bg-kuva {border: 1px solid #9fa6ae !important;padding: 0 !important;} .mobile-banners div {position: relative;margin: 5px;} .mobile-banners .kuva {cursor: default!important;} @media screen and (max-width:1024px) {.mobile-banners {flex-wrap: wrap;}.mobile-banners .bg-kuva {width: 350px;}} @media screen and (max-width:768px) {.mobile-banners {flex-wrap: wrap;}.mobile-banners .bg-kuva {width: 300px;}.mobile-banners article {bottom: 16px;left: 16px;}} @media screen and (max-width:678px) {.mobile-banners .bg-kuva {width: 350px;}.mobile-banners article {bottom: 40px;left: 25px;}} /*#mainhero .fwimg, #tuotesivu-hero,#alasivu-hero-s,#alasivu-hero-m {border-bottom-left-radius: 12vw 6vw;border-bottom-right-radius: 12vw 6vw;outline: 1px solid #dedede;outline-offset: 0px;border-bottom: 20px solid #fff;border-right: 20px solid #fff;border-left: 20px solid #fff;overflow-x: hidden;box-sizing: content-box;margin-left: -20px;}*/ /*#tuotesivu-hero,#alasivu-hero-s,#alasivu-hero-m{outline: 1px solid #dedede;}*/ .heroimg {position: relative;} .abs-element {position: absolute;z-index: 200;max-width: 100%;flex-direction: column;display: flex;width: 80%;flex-wrap: wrap;} .dflex {display: flex;flex-wrap: wrap;flex-direction: column;} .mainhero-mask{width: 100%;bottom: 0;} .dflex-row {display: flex;flex-wrap: wrap;flex-direction: row;} .center-elements {align-items: center;justify-content: center} .fwimg {width:100%} .white-p {color: #fff} .shadow {text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);} .bnr {position:relative;} .bnr img {width:100%;} .bgcolor-wrapper {background:#000} .bgcolor-wrapper img {opacity:0.7} .greytext{color:#e3e3e3} /* Tuotekortti */ /*#tuotesivu-top-wrapper {max-width: 66.7%;float: right;grid-gap: 2em 3em;padding-top: 12em;}*/ #tuotesivu-top-wrapper {max-width: 34vw;left: 64vw; padding:0;} #tuotesivu-top-ominaisuudet { clear: both;display: flex;} #tuotesivu-top-ominaisuudet p{width: 75%;clear: both;display: flex; justify-content:center;margin: 0 auto;float: right;} #tuotesivu-top-ominaisuudet img {display: inline-block;padding-left: 30px !important;width: max-content;} .featuretable h2 { font-size: min(max(1.2rem, 1.875vw), 1.875rem);} .tabs-header {color: var(--primary-color);font-size: var(--heading-size-1);} /* Esittelykappale */ #siro-esittelykappale-wrapper{grid-gap:2em 4em;} #siro-esittelyotsikko {text-align: right;color:#000;} /*#tuotekaruselli-wrapper article picture img {min-height:600px;object-fit:cover}*/ #tuotekaruselli-aside {background:url(../img/header/siro-frontbox-bg.jpg) center center no-repeat; background-size:cover; height:100%;border-radius:10px;display: flex;flex-direction: column;justify-content: center;} #uniquebg-tl {border: 1px solid #f5821f;} #airbg-tl {border: 1px solid #00a9df;} #primebg-tl {border: 1px solid #818285;} @media screen and (max-width:860px) {#tuotekaruselli-wrapper article picture img{object-fit: contain;object-position: top !important;}/*#tuotekaruselli-wrapper {max-width: 65%;}*/} @media screen and (max-width:678px) {#tuotekaruselli-wrapper {max-width: 100%;}img.bannerlogo {}} @media screen and (max-width:520px) {#tuotekaruselli-wrapper {max-width: 100%;}} /* Referenssi & ajankohtaista */ #referenssinostopalsta {background:#adb6b3} #referenssinosto-sisalto {grid-gap:0;} #utnostot #solu1201 {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); grid-gap:0 2em} #utnostot #solu1201 tr{grid-gap:0 !important} @media screen and (max-width:1280px) {#referenssinosto-kuva, #referenssinosto-kuva div, #referenssinosto-kuva article{height: 100%;}#referenssinosto-kuva img {width: 100%;object-fit: cover;height:100%}} @media screen and (max-width:860px) {#referenssinosto-sisalto{grid-template-columns:1fr}} /* Ammattilaisille */ .ammattilaisille-wrapper, .syyboksi{background: #fff;border-radius: 20px;text-align: left;outline: 1px solid #c0c0c0;outline-offset: -10px;padding: 6em;} .ammattilaisille-wrapper li {font-family: 'Montserrat', sans-serif; line-height:140%} .syyboksi {margin-bottom:2em;display: grid;grid-template-columns: 1fr 3fr;grid-gap: 1em 3em;} #stickynavi{top: 0;position: sticky;align-self: flex-start;} /*#solu17101 .syyboksi:nth-of-type(2n+1) {border-radius: 0 200px 0;} #solu17101 .syyboksi:nth-of-type(2n) {border-radius: 200px 0 200px;}*/ .subpage #tuotesivu-tuotteet{background:none;} /* Tarvikkeet tuotekortti */ #tarvikkeet-tuotekortti-wrapper {grid-gap: 2em 5em;} .whitecol {background:#fff} /* Yritysesittely */ .abous-us-wrapper{grid-gap:0;} .about-us-text div {padding:min(max(25px, 4vw), 80px);} .abous-us-wrapper div:empty {display:none;} .about-us-image .erikoiskuva {height:100%; width:100%; object-fit:cover} .about-us-image div {height:100%} #lomake_14_30_3 input.lomakenappi_submit {height:auto} @media screen and (max-width:1280px) {.ammattilaisille-wrapper table tr {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));}.ammattilaisille-wrapper table td{width:100% !important; grid-gap:2em}} @media screen and (max-width:1024px) {.syyboksi {grid-template-columns: 1fr;border-radius: 20px; padding:4em}.ammattilaisille-wrapper {border-radius: 20px;}#stickynavi {position: relative;}} @media screen and (max-width:768px) {.abous-us-wrapper:nth-of-type(2n) .about-us-image {order: 2;}} @media screen and (max-width:575px) {.syyboksi{padding:3em}.syyboksi h2 {font-size: 1.3rem;}.ammattilaisille-wrapper table td{box-sizing: border-box;}.ammattilaisille-wrapper #solu14301 table td, .ammattilaisille-wrapper #solu14302 table td{padding: 20px;}.ammattilaisille-wrapper #lomake14-30-3 table tr {grid-gap:0}#solu657.modulikuvausteksti{padding-top:1em}} @media screen and (max-width:480px) {#referenssinosto-kuva img {min-height: 200px;}} /* Footer */ footer {background: #000} footer p, footer h4 {color:#fff} footer img {display: inline;} #turvallisin-piippu {background: #000;border-radius: 80px;display: grid;grid-template-columns: 1fr 25vw 1fr;min-height:150px; justify-content:center; align-items:center;margin: 4em auto;} #logo-container {} #ftr-logoblock {display: flex;justify-content: center;} #footer-yla-p1 {text-align:right;position:relative; z-index:2} #footer-yla-p1 h4 {color: #fff;font-weight: 700;} #footer-yla-p2 .webiolinkkipainike{width: max-content;border-radius: 60px;font-size: 1.1rem;font-weight: 500;margin:0;position:relative; z-index:2} #footer-top-siro-esittely {width: 72ch;text-align: right;right: 0;float: right;} #siro-footer-top .dgrid-3-cols{text-align:center;grid-template-columns:1fr 1fr 1fr;} #harma-air-footerpalsta {max-width: 50%;} #ftralasivu {background:#fff} /* Siro piiput ominaisuudet */ #siro-piiput-wrapper {background:#f0f0f0;} .capitalize{text-transform:uppercase;} #siropiiput-img-content{position:relative;text-align:center;} #siropiiput-img-content .fwimg {max-height:882px; object-fit:cover;} #siropiiput-img-content .abs-element {max-width: 50%;} #siropiiput-img-content .webiolinkkipainike{margin:0 auto;} .paragraph-big {font-size:min(max(1.2rem, 1.4vw), 1.6rem); font-weight:300} /* Banner - imgmask (optional) */ .banner-imgmask {position: absolute;height: 100%; width: 100%;} /* Optional */ .bannermask-img {opacity: 1 !important;max-height: 100%;object-fit: cover;width: 100%;} @media screen and (max-width:1024px) {#main-heroimg, .bnr img{object-fit: cover; min-height: 300px;max-height: 50vh;}#herotext img {max-width:100px}#ominaisuusnostot-wrapper .dgrid-2-cols {grid-template-columns: 1fr;}#siropiiput-img-content .fwimg {max-height: 482px;max-width: 100%;margin-left: 0em;}#siro-piiput-wrapper{padding: 2em 0em 0em 0em;margin-bottom: 1em;}} /* Mobiiliresoluutioiden kuvamaaritykset */ @media screen and (max-width:678px) {#siropiiput-img-content .abs-element {max-width: 71%;right: 5%; text-align:center;}#siropiiput-img-content h2 {font-size: 1.4rem;}#siropiiput-img-content .webiolinkkipainike{ padding: 15px;width: max-content; margin: 0 auto;}} @media screen and (max-width:575px) {.featuretable img {width: auto;height: auto;min-width: 30px;}.featuretable tr {display: grid;grid-gap: 1em;grid-template-columns: 1fr 4fr;}.featuretable td{width:auto !important}} @media screen and (max-width:520px) {video {height: 100%;border-radius: 0;top: 0;}#turvallisin-piippu {background: none;border-radius:0}#siro-piiput-wrapper .cpadding-rl-xxl,#referenssinosto-sisalto .cpadding-xxl {padding: 2em;}} @media screen and (max-width:480px) {#siropiiput-img-content .abs-element {max-width: 100%;right: unset;}#siropiiput-img-content .fwimg {max-height: unset;max-width: 100%;margin-left: 0;border: 0 !important;border-radius: 0;min-height:480px}} /* Mobile tags*/ #mobilemenu-container{height:var(--mobilemenu-container-height);position: absolute;right: 0;top: 0;z-index: 2000;width: 100%;} #mobile-logo {position: absolute;top: 0;left: 0px;z-index: 50000} #mobilelogo-img { max-width: 120px;height: auto;padding: 15px 2rem;} #tuotekaruselli-wrapper article picture img{box-sizing:border-box;} @media screen and (max-width:1660px) {#tuotesivu-top-wrapper {padding-top: 8em;}#tuotekaruselli-wrapper article picture img{box-sizing: border-box;min-height: 800px;max-height: 800px;object-fit: cover;}} @media screen and (max-width:1440px) {#tuotekaruselli .abs-element {padding: 0 4em 0em 3em;}img.bannerlogo {max-width: 250px;}#tuotekaruselli h2 {font-size: min(max(1.2rem, 1.875vw), 1.875rem);}} @media screen and (max-width:1280px) {#tuotekaruselli-wrapper{grid-template-columns:1fr}#tuotekaruselli-wrapper article picture img {min-height: unset;max-height: 900px;}} @media screen and (max-width:1024px) {#mobile-logo {display: block !important}main-nav, #logo, footer nav, footer ul, #sidenavi {display: none}#tuotesivu-top-wrapper {grid-template-columns: 1fr 3fr;max-width: 100%;float: unset;padding: 4em 0em;left: unset;position: relative; order: 2;}#tuotesivu-hero picture {order:1;}#tuotesivu-top-ominaisuudet p { width: 100%;justify-content: space-evenly;}} @media screen and (max-width:860px) {#tuotekaruselli-wrapper{margin-top:1em;}#tuotekaruselli-wrapper article picture img{min-height: 500px;object-position: left -100px;object-fit:cover;}#tuotekaruselli {background: #f5f5f5;}#tuotekaruselli .abs-element {max-width: 100%; width: 100%;position: relative;order: 2; padding: 4em 4em 6em 4em;top: unset;background:#f5f5f5}#tuotekaruselli .webiolinkkipainike {display: block;bottom: 0;left: 0;position: relative;}.bannerlogo {max-width: 220px;}#tuotekaruselli-wrapper .tns-nav {width: 100%;left: 0;}} @media screen and (max-width:480px) {#tuotekaruselli .abs-element {padding: 2em 2em 6em 2em;}#tuotekaruselli .webiolinkkipainike { width: 100%;padding: 20px;display: flex;text-align: center;left: unset;align-items: center;justify-content: center; box-sizing:border-box;}#tuotekaruselli p {justify-self: normal;width: 100%;}#tuotekaruselli-wrapper article picture img{min-height: 400px;}#tuotekaruselli-wrapper h2{font-size: 1.2rem;}img.bannerlogo {max-height: 40px;width: auto;}} .cpadding-s {padding: var(--padding-s)} .cpadding-m {padding: var(--padding-m)} .cpadding-xl {padding: var(--padding-xl)} .cpadding-xxl {padding: var(--padding-xxl)} .cpadding-tb-s {padding: var(--padding-s) 0} .cpadding-tb-m {padding: var(--padding-m) 0} .cpadding-tb-xl {padding: var(--padding-xl) 0} .cpadding-tb-xxl {padding: var(--padding-xxl) 0} .cpadding-t-s {padding-top: var(--padding-s)} .cpadding-t-m {padding-top: var(--padding-m)} .cpadding-t-xl {padding-top: var(--padding-xl)} .cpadding-t-xxl {padding-top: var(--padding-xxl)} .cpadding-b-s {padding-bottom: var(--padding-s)} .cpadding-b-m {padding-bottom: var(--padding-m)} .cpadding-b-xl {padding-bottom: var(--padding-xl)} .cpadding-b-xxl {padding-bottom: var(--padding-xxl)} .cpadding-rl-s {padding: 0 var(--padding-s)} .cpadding-rl-m {padding: 0 var(--padding-m)} .cpadding-rl-xl {padding: 0 var(--padding-xl)} .cpadding-rl-xxl {padding: 0 var(--padding-xxl)} /* HARMA AIR */ .p-orange {color: #ee851d; font-family: "Montserrat", sans-serif; font-weight: 300;font-size: min(max(1rem, 1vw), 1rem);} .banner-text {color: #000; font-family: "Montserrat", sans-serif; font-weight: 300; font-size: min(max(0.9rem, 0.9vw), 0.9rem);} .p-nanum, #sisaltopalsta-article p {font-size: min(max(1rem, 1.2vw), 1.2rem);} .margin-t-xs {margin-top: 10px;} .margin-t-s {margin-top: 20px;} .margin-t-m {margin-top: 40px;} .margin-t-xxl {margin-top: 80px;} .margin-b-xs {margin-bottom: 10px;} .margin-b-s {margin-bottom: 20px;} .margin-b-m {margin-bottom: 40px;} .margin-b-xl {margin-bottom: 60px;} .white-bg {background-color: #fff;} .gray-bg {background-color: #f2f2f2;} .black-bg {background: rgba(0,0,0,0.7);} .center-text {text-align: center;} .grid-wrapper-r1 {/*grid-row: 1;*/ position: relative;} .grid-wrapper-r2 {/*grid-row: 2;*/ margin-top: 10px;} .lang-select {color: #000;padding: 0;font-size: min(max(0.8rem, 0.8vw), 0.8rem);text-align: center;;height: 30px;width: 30px;justify-content: center;align-items: center;display: flex;background:#e8821d} .lang-select:hover {text-decoration: none; cursor: pointer; opacity: 0.7;} .dropdown {position: relative; display: inline-block;} .dropdown-content {display: none; position: absolute; background-color: #fff; min-width: 70px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; right: 0; top: 15px;} .dropdown-content a {color: #000; padding: 6px 10px !important; box-sizing:border-box;text-decoration: none; display: block; font-size: min(max(0.8rem, 0.8vw), 0.8rem);border-bottom:1px solid #eee} .dropdown a:hover {background-color: #ddd;} .myDropdown a {margin: 0;} .show {display: block;} .dflex-kaupallinennosto {display: flex; flex-direction: row; align-items: flex-start;} .siro-etusivu-img {width: 16px; min-width: 16px;} .accordion {background-color: #e3e3e3; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; border-bottom: 2px solid #f0f0f0; font-size: 1rem;} .active, .accordion:hover {background-color: #ccc;} .panel {padding: 0 18px; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;} .accordion::after {content: '\02795'; font-size: 13px; color: #777; float: right; margin-left: 5px;} .accordion.active::after {content: "\2796";} .vesikattovarit-dflex {display: flex; justify-content: space-between; flex-wrap: wrap;} .pudotusnappi:hover {cursor: pointer;} .pudotusvalikko:hover .pudotusnappi {text-decoration: underline;} .pudotusnappi a {color:#000} .pudotusvalikko-sisalto {display: none; position: absolute; background-color: #fff; width: 22%; z-index: 1; top: 56px; /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/} .pudotusvalikko-sisalto a {display: block; text-align: left; font-size: 0.8rem; color: #000; padding: 12px 16px;} .pudotusvalikko-sisalto a:hover {background-color: #ddd; text-decoration: none; cursor: pointer;} .pudotusvalikko:hover .pudotusvalikko-sisalto {display: block; cursor: pointer;} #herotext .webiolinkkipainike {padding: 15px 30px;} #etusivu-tuote-info p {font-weight: 500; font-size: min(max(1rem, 1vw), 1rem);} #etusivu-tuote-esittely, #tuotesivu-tuotteet {background-image: url("../img/header/etusivu-banner-bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;} #hero-karuselli {background-image: linear-gradient(#fafafa, #fff); padding-top: 40px;} #alasivu-hero-s, #alasivu-hero-m {padding: 1em 2em 3em 2em;} #alasivu-hero-m {min-height:200px;} #siro-elite-banner, #siro-air-banner, #siro-prime-banner {position: relative; display: grid; grid-template-rows: auto minmax(100px, 120px); height: auto;} #elite-piippu-img, #air-piippu-img, #prime-piippu-img {position: absolute; right: 10px; top: 34%;} #elite-piippu-img {width: 32%;} #air-piippu-img {width: 38%;} #prime-piippu-img {width: 30%;} #siro-elite-grid, #siro-air-grid, #siro-prime-grid {display: grid;} #siro-elite-grid h2, #siro-air-grid h2, #siro-prime-grid h3 {grid-row: 1;} #siro-elite-grid p, #siro-air-grid p, #siro-prime-grid p {grid-row: 2; margin-top: 10px;} #siro-elite-grid a, #siro-air-grid a, #siro-prime-grid a {grid-row: 3; width: 165px; margin-top: 20px;} #siro-elite-img, #siro-air-img, #siro-prime-img {width: 100%;} #miksi-harma-air {background-image: url(../img/header/sisaltopalsta-bg-etusivu.jpg); background-repeat: no-repeat; background-size: cover; background-position: center} #harma-air-info {padding: 5% 10%;} #miksi-harma-air p {font-size: min(max(0.8rem, 1vw), 1rem); color: #fff;} #harma-air-info p {font-size: min(max(1.1rem, 1.375vw), 1.375rem);} #harma-air-tech h4 {color: #fff; font-size: min(max(1rem, 1.3vw), 1.3rem);} #rakentuu-btn-div {padding-bottom: 8%;} #harma-air-tech .dgrid-s-xl-cols {grid-gap: 10px; align-items: center; grid-template-columns: 15% auto; grid-template-rows: 60px;} #anna-palaa {background-image: url(../img/header/antaa-palaa-bg.jpg); background-repeat: no-repeat; background-size: cover; position: relative; background-position: center;} #anna-palaa .dflex-row {justify-content: space-evenly;} #anna-palaa .dgrid-xl-s-cols {grid-template-columns: auto 15%; margin: 0 90px;} #anna-palaa article {width: 65%; margin: 0 auto;} #wrapper-div {position: relative; margin-top: 20px;} #wrapper-div .dgrid-2-cols {justify-items: center; align-items: center; margin: 60px 90px 100px 90px;} #suomi-merkit {position: absolute; top: 50%; right: 0;} #suomi-merkit img {margin: 0 10px;} #alatunniste {background-image: url(../img/header/footer-bg.jpg); background-repeat: no-repeat; background-size: cover;background-position: top 0 left 50%;} #alatunniste a {line-height: 160%;} #alatunniste .dgrid-3-cols {grid-template-columns: 2fr 3fr 5fr;} #logo-somet, #footer-info, #footer-yht-tiedot {display: flex; flex-direction: column; justify-content: space-between;} #some-ikonit {display: flex; flex-direction: row;justify-content:center;} #some-ikonit img {width: 50px;} #logo-musta {width: 200px;} #fw-karuselli-ow {width: 100%;} .palloclassi {border-radius:200px;} #fw-karuselli-ow .tns-item img {max-height: 900px; object-fit: cover; min-height: 450px;} #valitse-turvallisin {justify-items: center; align-items: center; background-image: url(../img/header/siro-logo-bg.png); background-position: center; height: 269px; background-size: contain; background-repeat: no-repeat;} #valitse-turvallisin .webiolinkkipainike {margin-top: 0;} #siro-logo {width: 90%; margin: 0 auto; min-width: 65px;} #harma-air-tech.dgrid-3-cols {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));} #siro-rectangle, #tuotesivu-siro-rectangle {display: none;} #tuotesivu-hero, #alasivu-hero-s,#alasivu-hero-m {background-position: center top, center center;background-size: cover, cover;background-repeat: no-repeat, no-repeat;} #alasivu-hero-s,#alasivu-hero-m {min-height:300px;max-height:300px; background-position:center center} #alasivu-hero-s{min-height:300px;} #kaupallinen-nosto table {max-width: 100%;width: 100% !important;} #tuotesivu-hero .dgrid-xl-s-cols {grid-template-columns: 6fr 4fr;} #siro-elite-tuotekuvaus p {font-size: min(max(0.8rem, 1.125vw), 1.125rem); font-weight: 300;} #nosto-1 h2, #nosto-2 h2, #nosto-3 h2 {font-size: min(max(1.2rem, 1.4vw), 1.4rem); } #nosto-1 p, #nosto-2 p, #nosto-3 p {font-size: min(max(0.75rem, 0.75vw), 0.75rem);} #nosto-1, #nosto-2, #nosto-3 {width: 100%} #mittari, #pallo, #vasara {margin: auto 30px} #sisaltopalsta-info {background-image: url(../img/header/siro-frontbox-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; /*border-top-right-radius: 100vw 90vw; border-bottom-right-radius: 100vw 90vw;*/margin-top: 4em;} #solu11121 h4 {font-size: min(max(1.1rem, 1.5vw), 1.5rem);} #solu11121 p {font-family: "Montserrat", sans-serif; font-weight: 400;font-size: min(max(0.8rem, 1vw), 1rem);} #solu5103 tr {flex-wrap: wrap;} #solu5103 td {flex-basis:150px;} #sisaltopalsta-article {width: 80%; margin: 0 auto;} #sisaltopalsta-article .webiolinkkipainike {width: max-content} #kuvagalleria {text-align: center;} #kuvagalleria h4 {text-transform: uppercase; color: #000; font-weight: bold; font-size: min(max(1.3rem, 1.7vw), 1.7rem);} #halkaisija-img {margin: 0 auto; min-width: 50px;} .jamytable {width:100% !important} .jamytable tr {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));grid-gap: 1em 2em;} .jamytable td {width:100% !important} #varit .esittelypalsta {grid-template-columns: 30% auto;} #varit .esittelypalsta .col-right table p {font-size: min(max(0.7rem, 0.7vw), 0.7rem);text-align: center;font-weight: 300;} #varit .esittelypalsta .col-right table td, #mobile-accordion .esittelypalsta td {width: 100% !important;} #varit .esittelypalsta .col-right table td img, #mobile-accordion .esittelypalsta .col-right table td img {margin:0 auto;} #varit .esittelypalsta-bottom {max-width: 400px; width: 100%;} #tekniset-tiedot, #lisavarusteet, #hinnasto {display: none;} #tekniset-tiedot, #varit, #lisavarusteet, #hinnasto {background: #fff; border: 1px solid #e6e6e6; border-top: none;border-radius: 0px 0px 40px 40px;padding:min(max(60px, 8vw), 8em); } #tekniset-tiedot table td {box-sizing: border-box;} #tekniset-tiedot h2, #varit h2, #lisavarusteet h2, #hinnasto h2, #mobile-accordion h2 { font-weight: bold; color: #000; font-size: min(max(1.3rem, 1.7vw), 1.7rem); text-transform: uppercase;} #tekniset-tiedot h4, #varit h4, #lisavarusteet h4, #hinnasto h4, #mobile-accordion h4, .esittelypalsta h4 {font-weight: bold; color: #000; font-size: min(max(1rem, 1.2vw), 1.2rem);} #tekniset-tiedot p, #varit p, #lisavarusteet p, #hinnasto p, mobile-accordion p {font-weight: 300;font-size: min(max(0.8rem, 1vw), 1rem);} #tab-btn-container {border: 1px solid #e6e6e6; border-bottom: none; background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(243, 243, 243) 60%); border-radius: 40px 40px 0 0;display:flex;} .tab-buttons, #default-open {flex: 1;} #tab-btn-container button {user-select: none; background: none; border: none; text-transform: uppercase; font-weight: bold; padding: 30px 50px; font-size: min(max(0.75rem, 1vw), 1rem);color:#303030; font-weight:900;} .tab-buttons {border-right: 1px solid rgba(0,0,0,0.05) !important;} #tab-btn-container button:last-of-type{border:none !important;border-radius: 0px 40px 0px 0px;} #tab-btn-container button:first-of-type {border-radius: 40px 0px 0 0;} #tab-btn-container button:hover, #tab-btn-container button.active {color: #ee851d; background: #fff!important;} #tab-btn-container button:hover{background:#ee851d !important; color:#fff !important; cursor:pointer} /*#varit {display: grid; grid-template-columns: 30% auto; grid-gap: 40px;}*/ #varivaihtoehdot, .esittelypalsta .col-right table tr {display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));} #varivaihtoehdot img {margin: 0 auto;} #varivaihtoehdot p {font-size: min(max(0.7rem, 0.7vw), 0.7rem); text-align: center;} #mobile-accordion {background: #f0f0f0; display: none;} #mobile-accordion h2 {font-size: 1.3rem;} #mobile-accordion h4 {font-size: 1.2rem;} #mobile-accordion p {font-size: 0.9rem; margin-top: 0!important;} #varivaihtoehdot-mobile {display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));} #varivaihtoehdot-mobile img {max-width: 75px; margin: 0 auto; padding-top: 20px;} #varivaihtoehdot-mobile p {text-align: center; font-size: 0.7rem; padding: 0 3px;} #vesikattovarit-mobile {justify-content: flex-start;} #vesikattovarit-mobile img {padding: 20px 5px 0 5px;} #lang-fi, #lang-en {margin: 0!important;} #solu1181 tr {display: flex;} #solu1181 p {font-size: 0.7rem;} #design-piippu {font-size: min(max(1.15rem, 1.3vw), 1.3rem);} #solu911 h5, #lomakerivi1_21 p {font-size: min(max(1rem, 1.2vw), 1.2rem); letter-spacing: 2px; font-weight: bold; text-transform: uppercase;} #lomake9-1-2 label, #lomakerivi1_25 .lomakeotsikko, #online-edit-form-header-5, #online-edit-form-header-3, #online-edit-form-header-6 {color: #000;} #lomakerivi1_21 p {padding: 0;} #harma-air-banner { color:#fff; padding-bottom:2em} #harma-air-banner-content {padding: 1em 2em;border-radius: 6px;background: rgba(0,0,0,0.8);display: flex;justify-content: center;align-items: center; width:100%;box-sizing:border-box;} #harma-air-banner-content h6{font-size:min(max(1.2rem, 1.5vw), 1.6rem);} #harma-air-banner-content img {padding-right: 2em;} #tuotesivu-tuotteet .bannertext-1,#tuotesivu-tuotteet .bannertext-2,#tuotesivu-tuotteet .bannertext-3{position:relative; padding:90% 4em 15% 4em} #uniquebg-tl, #airbg-tl, #primebg-tl {background-color:#fff;background-image:url(../img/header/tuotebanneri-siro-unique-mobiili.jpg); background-position:center top; background-repeat: no-repeat; background-size:100%;} #airbg-tl{background-image:url(../img/header/tuotebanneri-siro-air-mobiili.jpg);} #primebg-tl {background-image:url(../img/header/tuotebanneri-siro-prime-mobiili.jpg);} body {overflow-x: hidden;} #yhteysttable tr {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); grid-gap:2em} #yhteysttable tr td {width:100% !important} /* Media Querys */ @media screen and (max-width: 1600px) { #harma-air-tech .dgrid-s-xl-cols { grid-template-rows: 40px; } } @media screen and (max-width: 1280px) { #mainhero-item0 #herotext-1, #mainhero-item1 #herotext-2 {max-width: 50%;} #turvallisin-piippu {display: flex;} #footer-yla-p1{order: 2;flex-basis: 66%;text-align: center;} #ftr-logoblock {display: flex;justify-content: center;flex-basis: 10%;min-width:163px} #footer-yla-p2{order: 3;padding-right: 2em;flex-basis: 24%;margin: 0 auto;} #logo-container {height: 80px;width: 80px;background: #fff;border-radius: 160px;display: flex;justify-content: center;align-items: center;position: absolute;top: 15px;padding: 20px;border: 1px solid #dedede;left: 21px;} #footer-yla-p2 .webiolinkkipainike {padding: 20px;font-size: 0.9rem;} } @media screen and (max-width: 1214px) { #tuotesivu-hero .dgrid-3-cols { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } #nosto-1, #nosto-2, #nosto-3 { padding: 2em; } #mittari, #pallo, #vasara { margin: auto 10px auto 0; } #tuotesivu-hero .dgrid-xl-s-cols { grid-template-columns: 55% auto; } .mainnavi-link, .topnavi-link { padding: 20px 7px; } } @media screen and (max-width: 1160px) { #siro-elite-banner, #siro-air-banner, #siro-prime-banner { grid-template-rows: auto minmax(50px, 120px); } #siro-elite-grid, #siro-air-grid, #siro-prime-grid { grid-template-rows: 25% minmax(30px, 70px) 25%; } #siro-elite-grid a, #siro-air-grid a, #siro-prime-grid a { margin-top: 0; } #suomi-lippu, #design-from-finland { max-height: 60px; width: auto; } #suomi-merkit { top: 55%; } #tuotesivu-sisaltopalsta.dgrid-2-cols { grid-template-columns: 1fr; } } @media screen and (max-width: 1024px) { #mobile-accordion { display: block; } #mainhero #herotext-1, #mainhero #herotext-2, #mainhero #herotext-3{position: relative;order: 2;max-width: 100%;padding: 2em 4em 6em 4em;background: #000;right: unset;width: 100%;min-height: 300px;} #mainhero #herotext-2 {background:#ec851e} .mainhero-mask { z-index: 20000} #tuotesivu-top-ominaisuudet img {padding-left: 0px !important;} #mobile-accordion .dgrid-2-cols { grid-template-columns: 1fr;padding:2em; } .esittelypalsta .col-right table tr{ display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; grid-gap: 3em 1em; } #siro-esittelyotsikko { text-align: left;} #siro-esittelykappale-wrapper{padding:2em} .esittelypalsta-bottom table { width: auto !important; padding-bottom: 4em; } .esittelypalsta-bottom table td { padding: 0 10px; } #tuotesivu-tuotteet,#jamylistausdiv { display: none; } /*#tuotesivu-hero { background-position: right 60% bottom 0px; padding: 10em 0; }*/ #tuotesivu-hero .dgrid-xl-s-cols { grid-template-columns: 1fr 1fr; } #mobile-accordion .panel > .col-full {padding:2em} #alatunniste .dgrid-3-cols, #siro-footer-top .dgrid-3-cols {grid-template-columns: repeat(auto-fit, minmax(250px,1fr));} #harma-air-banner-content img {max-width:120px;} #footer-top-siro-esittely { width: 100%; text-align: left } #siro-footer-top .dgrid-3-cols div:empty{display:none;} .avainlippu-logoblock {text-align: center;display: flex;flex-direction: column-reverse;margin: 0 auto;align-items: center;} .avainlippu-logoblock img {padding-top:2em !important} } @media screen and (max-width: 965px) { #valitse-turvallisin .webiolinkkipainike { margin-left: 40px; padding: 10px 15px; } #tuotesivu-hero .dgrid-3-cols { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); padding:;0 2em background: rgba(0,0,0,0.8); margin-top: 5em; } #tuotesivu-hero { background-position: right 70% bottom 0; } #nosto-1, #nosto-2, #nosto-3 { display: grid; grid-template-columns: 20% auto; justify-items: center; } #tuotesivu-hero .dgrid-3-cols { grid-gap: 5px; } #solu22101 div {overflow-x: auto;}#solu22101 div table{min-width: 600px;} #solu22101 table {display:table !important} #solu22101 td {display:table-cell !important} #solu22101 tr {display: table-row !important;} #solu22101 > div { overflow-x: auto; max-width: 90vw; } } @media screen and (max-width: 901px) { #harma-air-tech .dgrid-s-xl-cols { grid-template-rows: 60px; } } @media screen and (max-width: 880px) { #harma-air-tech.dgrid-3-cols { grid-template-columns: 1fr; justify-items: center; } #harma-air-tech .dgrid-s-xl-cols { grid-template-rows: 35px; } #valitse-turvallisin .webiolinkkipainike { padding: 10px 15px; } } @media screen and (max-width: 850px) { #siro-elite-banner, #siro-air-banner, #siro-prime-banner { grid-template-rows: auto minmax(50px, 120px); } #siro-elite-grid, #siro-air-grid, #siro-prime-grid { grid-template-rows: 25% minmax(30px, 100px) 25%; } #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 30%; } #design-piippu { padding-left: 15px; padding-right: 15px; } #valitse-turvallisin { background: none; text-align: center; height: auto; } #valitse-turvallisin.dgrid-2-cols { grid-template-columns: 1fr; grid-template-rows: 25% auto 25%; grid-gap: 20px; } #siro-rectangle { display: block; height: 135px; } #valitse-turvallisin .webiolinkkipainike { margin-left: 0; } #valitse-turvallisin.margin-b-m { margin-bottom: 0; } #suomi-merkit { position: relative; justify-content: center!important; } #footer-info { padding-right: 20px; } .mobilepadding { padding: 40px 0; } #valitse-turvallisin h6 { background: rgba(0,0,0,0.6); padding: 20px; } #mobile-accordion { padding: 30px; } #mainhero .abs-element {margin-right: unset;margin-left: unset;margin: 0 auto;max-width: 100vw;padding: 0 2em;width: auto;flex-wrap: nowrap;} } @media screen and (max-width: 801px) { #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 40%; } .col-full tr {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); grid-gap:2em} .col-full tr td {width:100% !important;box-sizing: border-box;} .col-full tr td.uutisryhma-bg-sisalto{width:max-content !important} #tuotesivu-hero .dgrid-3-cols { background:#000;} .p-orange { font-size: min(max(1rem, 1.5vw), 1.5rem); margin-top: 15px!important; } .banner-text { font-size: min(max(0.8rem, 1.25vw), 1.25rem); } #siro-elite-banner, #siro-air-banner, #siro-prime-banner { grid-template-rows: auto 1fr; } #siro-elite-grid, #siro-air-grid, #siro-prime-grid { grid-template-rows: 25% auto 25%; } #siro-elite-grid a, #siro-air-grid a, #siro-prime-grid a { margin-top: 20px; } #etusivu-tuote-info.dgrid-2-cols { grid-template-columns: 1fr; } #etusivu-tuote-info.margin-t-m { margin: 0 auto; } #etusivu-tuote-esittely.margin-b-xl { margin-bottom: 0; } #tuotesivu-hero .dgrid-xl-s-cols { grid-template-columns: 1fr; padding: 2em 2em 4em 2em; } #tuotesivu-hero .dgrid-3-cols {grid-template-columns: 1fr;} .dflex-kaupallinennosto td {width: auto !important;} #siro-elite-tuotekuvaus {width: 100%;padding: 0px 0 0 0;} #nosto-1, #nosto-2, #nosto-3 {text-align: left !important;} #tuotesivu-hero .dgrid-3-cols {margin: 0;} #tuotesivu-hero{background-size: 1000px;background-position: top !important;} .dflex-kaupallinennosto td:first-of-type {min-width: 100px;} .dflex-kaupallinennosto td img {margin:0 auto;float:none !important;} #sisaltopalsta-article table {width:100% !important} #empty {display: none;} #tuotesivu-hero .center-col { width: 100%; /*background-color: rgba(0,0,0,0.5);*/ } #kaupallinen-nosto { padding: 2em; } #kuvagalleria h4 { padding: 5px 0; } #tuotesivu-top-wrapper {grid-template-columns: 1fr;} #tuotesivu-top-wrapper .kuva2{max-width: 260px;}#tuotesivu-hero {background-size: 800px;} #tuotesivu-top-ominaisuudet p {padding: 0 2em;box-sizing: border-box;} #tuotesivu-top-ominaisuudet img {max-width: 260px;padding: 0 20px 10px 0px !important} #tuotesivu-top-ominaisuudet p {width: 100%;justify-content: space-evenly;flex-wrap: wrap;} #top-wrapper-img {margin:20% auto 0 auto} } @media screen and (max-width: 768px) { #footer-yla-p1 {padding-right: 3em;} #footer-yla-p2 {order: 3;padding-right: 3em;flex-basis: 100%;margin: 0 auto;margin-top: 0px;grid-row: 2;text-align: ;grid-column: 2;margin-top: -40px;} #turvallisin-piippu {display: grid;grid-template-rows: auto auto;grid-template-columns: 2fr 3fr;}} @media screen and (max-width: 735px) { #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 37%; } #mainhero {padding:0;overflow: hidden;width: 100vw;} #mainhero img {min-height: 400px; max-height:500px; object-fit: cover; } #mainhero .mainhero-mask img {min-height:unset;object-position: unset; } #tuotesivu-top-ominaisuudet p {justify-content: flex-start;} .mobiletable .col-full:last-of-type > div {overflow-x: auto;}.mobiletable .col-full:last-of-type table{min-width: 600px;}.jamy-accordion .mobiletable .col-full:last-of-type table{min-width:unset;}.jamy-accordion .mobiletable .col-full:last-of-type > div {overflow-x:unset} .jamy-accordion .mobiletable .col-full tr td {box-sizing: border-box;}#mobile-accordion.jamy-accordion .panel > .col-full {padding: 1em 0;}.jamy-accordion .col-full tr { grid-template-columns: repeat(auto-fit,minmax(200px,1fr));} } @media screen and (max-width: 670px) { #alatunniste .dgrid-3-cols { grid-template-columns: 1fr; width: 50%; padding: 40px 0; } #logo-musta { width: 150px; } #some-ikonit img { width: 35px; } #alatunniste { background-position: right 55% bottom 0; } #mainhero img {object-position: left bottom;} #mainhero .abs-element{max-width: 100vw;padding: 5%;width: auto;box-sizing: border-box;position: relative;order: 2;background: #7f7f81;left: 0;margin: 0 0 1em 0;} #mainhero .center-elements{align-items: flex-start;position: relative;flex-wrap: nowrap;} } @media screen and (max-width: 595px) { #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 35%; } #hero-karuselli.cpadding-rl-xl { padding-left: 15px; padding-right: 15px; padding: 15px 15px 0 15px; } #siro-esittelykappale-wrapper{padding:2em 1em} #tuotekortit.cpadding-xl { padding-left: 15px; padding-right: 15px; } #siro-elite-grid p{ padding: 0; } #design-piippu { padding: 0 15px; } #anna-palaa article { width: 85%; } #alatunniste .dgrid-3-cols { width: 70%; } #sisaltopalsta-nosto-div.dgrid-s-xl-cols { grid-template-columns: 1fr; text-align: center; } #sisaltopalsta-article { width: 100%; } #kaupallinen-nosto { padding: 0; margin-top:1em; } #mobile-accordion { padding: 20px; } #varit .esittelypalsta .col-right table td img, #mobile-accordion .esittelypalsta .col-right table td img { margin: 0 auto; max-height: 140px; width: auto; } #mobile-accordion .dgrid-2-cols { padding: 2em 0; } #harma-air-banner-content { padding: 2em; flex-direction: column; } #tuotesivu-top-ominaisuudet img {max-width: 200px;padding:0 0 10px 0 !important} #tuotesivu-top-ominaisuudet p {justify-content: center;} #tuotesivu-hero .cpadding-rl-s img {max-width:200px} #mainhero #herotext-1, #mainhero #herotext-2, #mainhero #herotext-3 {padding: 2em 2em 5em 2em;min-height: 400px;} .ammattilaisille-wrapper {padding:4em 2em} #top-wrapper-img {margin:0% auto 0 auto} #tuotesivu-top-wrapper .kuva2 { max-width: 200px; } #alasivu-hero-s, #alasivu-hero-m { background-size: cover;} } @media screen and (max-width: 520px) { #turvallisin-piippu {display: flex;flex-direction: column;background:none;width:100%; padding:6em 0;overflow: hidden;} #turvallisin-piippu > div {order: unset !important;position: relative;flex-basis: unset;left: 0;top: 0; margin:0 auto 20px auto; padding:0;} #logo-container {position: relative; top: unset; padding: 20px;border: 1px solid #dedede;left: unset;height: 160px;width: 160px;} #footer-yla-p1 h4 {color: #fff;} #harma-air-footerpalsta {max-width: 90%;padding: 0 2em;} } @media screen and (max-width: 490px) { #sisaltopalsta-info { padding: 30px 20px 60px 30px; } #sisaltopalsta-article .webiolinkkipainike { width: auto; } } @media screen and (max-width: 485px) { #harma-air-tech .dgrid-s-xl-cols { grid-template-columns: 1fr; justify-items: center; grid-gap: 20px; } .empty-div { display: none; } #harma-air-info p { padding-bottom: 30px; } #harma-air-tech { text-align: center; } #harma-air-info .margin-t-m { margin-top: 95px; } #harma-air-tech p { padding-top: 15px; } #rakentuu-btn-div .webiolinkkipainike { margin: 0 30px; padding: 15px; } #herotext .webiolinkkipainike { width: 150px; text-align: center; display: inline-block; } #alatunniste .dgrid-3-cols { width: 80%; } #sisaltopalsta-nosto-div.dgrid-s-xl-cols { margin-top: 10px; } #top-wrapper-img { margin: -10% auto 0 auto;} } @media screen and (max-width: 450px){ #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 25%; right: 5px; } } .dflex-kaupallinennosto td:first-of-type { min-width: 70px;} #tuotesivu-hero .dgrid-xl-s-cols {padding: 4em 2em 4em 2em;} #etusivu-tuote-info.cpadding-xl { padding: 20px; } #alatunniste .dgrid-3-cols { width: 85%; } #nosto-1, #nosto-2, #nosto-3 { grid-template-columns: 1fr; text-align: center; border-radius: 10px; outline: 1px solid #dedede; outline-offset: -8px; } #mittari, #pallo, #vasara { margin: 0; padding-bottom: 10px; } } @media screen and (max-width: 385px) { .esittelypalsta .col-right table tr { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 345px) { #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 22%; } #valitse-turvallisin.dgrid-2-cols { grid-gap: 40px; } #anna-palaa.cpadding-b-xxl { padding: 0; } #anna-palaa .cpadding-t-xl { padding: 0; } } @media screen and (max-width: 345px) { #elite-piippu-img, #air-piippu-img, #prime-piippu-img { top: 20%; } } #footer-contentblock .dgrid-3-cols {align-items:center;} #footer-contentblock .dgrid-3-cols div:nth-of-type(2){margin-top: -27px;} #footer-contentblock .dgrid-3-cols div:last-of-type{padding-top: 20px;} /* Webio cols classes */ .col-3,.col-full,.col-left,.col-right{width:100%;float:none; margin:0}.col-full, .colpadding{clear:both;}.center-col .colpadding:last-of-type, .content-col .colpadding:last-of-type {display: none;} .col-left, .col-right {width:100%!important;} /* Webio content classes */ /* Linkkipainikkeiden maaritykset */ .webiolinkkipainike, .lomakenappi_submit, .takaisinuutisiin, #siro-tech-specs-subcol .col-left a {line-height: 100%;min-height:32px;box-sizing: border-box;cursor: pointer;margin-top: 20px;display: block;text-align: center;font-size: var(--button-font-size);padding: var(--button-padding);background: background: rgb(227,122,18);background: linear-gradient(0deg, rgba(227,122,18,1) 0%, rgba(243,138,34,1) 100%);color: var(--button-text-color);font-weight: var(--button-font-weight);width: max-content;max-width: var(--max-button-width);border-radius:80px;} .webiolinkkipainike:hover, .takaisinuutisiin:hover {transition: all .3s ease 0s;-webkit-filter: brightness(110%);filter: brightness(110%);text-decoration: none} .webiolinkkipainike {border-radius: 80px; text-transform: uppercase; font-family: "Montserrat", sans-serif;} .tapahtumat, .tapahtumakalenteri_otsikko, .tapahtumakalenteri_valiotsikko, .uutis_otsikko.tapahtumakalenteri_valiotsikko, .uutis_otsikko, .nostettumoduli, .nostettumoduli a, a.nostouutis_otsikko {color: var(--primary-color);font-size: 1.2rem;display: block;}.valikkolinkki, .valikkolinkki-sel, .valikkomodulilinkki, .valikkomodulilinkki-sel {text-decoration: none;color: #fff;padding: 5px 0;display: block;} .uutisryhma-bg-sisalto {width: max-content;background: #b8275e;display: block;padding: 5px 10px;border-radius: 4px;color: #fff;text-transform: uppercase;font-size: 12px;font-weight: 700;margin: 20px 0 5px 0;}a.nostouutis_otsikko {color: #000;line-height: 160%;font-size: 1rem;max-width: 100%;} @media screen and (max-width:480px) {.webiolinkkipainike, .lomakenappi_submit, .takaisinuutisiin {display: block;padding: 15px 0;width:100% !important}} /* Image gallery */ .kuvagalleriagrid {display: grid;grid-template-columns: var(--img-gallery-rows);grid-gap: 1em} .kuvagalleriakuvatausta {width: 100% !important;height: auto !important;margin: 0 !important} .kuvagalleriakuvatausta .kuva {width: 100%;max-width: 100%;object-fit: cover;padding: 0 !important;height: var(--img-gallery-img-size)} .kgalleria-tsk .kuvagalleriagrid {grid-template-columns: repeat(5,1fr);} @media screen and (max-width: 1920px) {.kuvagalleriagrid {grid-template-columns: repeat(3,1fr);}.kgalleria-tsk .kuvagalleriagrid {grid-template-columns: repeat(5,1fr);}} @media screen and (max-width: 1440px) {.kuvagalleriakuvatausta .kuva {height: 160px;}} @media screen and (max-width: 1280px) {.kuvagalleriakuvatausta .kuva {height: 120px;}} @media screen and (max-width: 1160px) {.kuvagalleriagrid {grid-template-columns: repeat(4,1fr);}} @media screen and (max-width: 860px) {#solu51101 tr {display: flex;flex-direction: column;}#solu51101 tr, #solu51101 td {width: 100% !important;}} @media screen and (max-width: 720px) {.kgalleria-tsk .kuvagalleriagrid {grid-template-columns: repeat(4,1fr);}} @media screen and (max-width:575px) {.kuvagalleriagrid {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))}.kuvagalleriakuvatausta img {height: 150px}.kgalleria-tsk .kuvagalleriagrid {grid-template-columns: repeat(3,1fr);}} @media screen and (max-width:420px) {.kgalleria-tsk .kuvagalleriagrid {grid-template-columns: repeat(2,1fr);}} /* Semio referencelinks*/ #swlinkit {text-align: center;font-size: 12px;}.swlinkki {font-size: 12px;color: #000} .subpage .kuvagalleriakuvatausta .kuva{ aspect-ratio: 1/1; height: auto !important} /* Responsive content tables, taulukkomaaritykset mobiililaitteissa */ @media screen and (max-width:678px) { .subpage table, .subpage td, .subpage tr {display: block;width: 100% !important;height: auto;clear: both;box-sizing: border-box} .subpage tbody {width: 100%;display: inline-block} .subpage tr {display: grid;} .subpage tr td { flex: 1;} .tarviketable tr {display:grid;} } #referenssinosto-kuva .tns-item img{max-height: 600px;object-fit: cover;} #rfnosto-front-block {margin:4em 0 4em 0} @media screen and (max-width:1024px) {#rfnosto-front-block {margin:2em 0 2em 0}} @media screen and (max-width:480px) {.subpage tr {display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}} /* Forms, lomakkeiden perusmaaritykset */ .lomakeotsikko {color: var(--primary-color);font-weight: 700; padding:10px 0;}.lomake-ve-solu input[type=checkbox] {display: none}.lomake-ve-solu input[type=checkbox] + label, .lomake-ve-solu input[type=checkbox]:checked + label {-webkit-appearance: none;display: block;position: relative;height: auto;clear: both;}.lomake-ve-solu input[type=checkbox] + label::before, .lomake-ve-solu input[type=checkbox]:checked + label::before {border-radius: 100%;border: 1px solid #8e8e8e;border-radius: 4px;color: #fff;content: "✓";float: left;font-size: 1.2em !important;font-weight: 700;height: 18px;line-height: 11px;margin-right: 20px;padding: 8px 12px 0 8px;position: relative; width: 9px}.lomake-ve-solu input[type=checkbox] + label::before {content: ""}.lomake-ve-solu input[type=checkbox]:checked + label::before { background: #2a2a2a none repeat scroll 0 0;color: #fff !important;border: none;padding: 8px 15px 0 7px}#suodatin input[type=checkbox]:checked + label,.lomake-ve-solu input[type=checkbox]:checked + label {color: #000;box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 -15px 10px -12px rgba(0, 0, 0, .05), inset 15px 10px -12px rgba(255, 255, 255, .1), inset 0 0 10px rgba(0, 0, 0, .1)}.lomake-ve-solu input[type=checkbox] + label:active, .lomake-ve-solu input[type=checkbox]:checked + label:active {box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1)}.lomake-ve-solu [type=radio]:checked, .lomake-ve-solu [type=radio]:not(:checked) {position: absolute;left: -9999px}.lomake-ve-solu [type=radio]:checked + label, .lomake-ve-solu [type=radio]:not(:checked) + label {position: relative; padding-left: 28px;cursor: pointer;line-height: 20px;padding-bottom: 10px;display: inline-block;color: #666}.lomake-ve-solu [type=radio]:checked + label:before, .lomake-ve-solu [type=radio]:not(:checked) + label:before {content: '';position: absolute;left: 0;top: 0;width: 18px; height: 18px;border: 1px solid #8e8e8e;border-radius: 100%;background: #fff} .lomake-ve-solu [type=radio]:checked + label:after, .lomake-ve-solu[type=radio]:not(:checked) + label:after {content: '';width: 12px;height: 12px;background: #9ec72a;position: absolute;top: 4px;left: 4px;border-radius: 100%;-webkit-transition: all .2s ease;transition: all .2s ease}.lomake-ve-solu [type=radio]:not(:checked) + label:after {opacity: 0;-webkit-transform: scale(0);transform: scale(0)}.lomake-ve-solu [type=radio]:checked + label:after {opacity: 1;-webkit-transform: scale(1); transform: scale(1)}input[type="text"].pmvk, input[type="button"].lpainike { width: auto !important;}@media screen and (max-width:1200px) {.lomake-ve-solu input[type=checkbox] + label::before, .lomake-ve-solu input[type=checkbox]:checked + label::before { margin-bottom: 10px}}tr[id^=lomakerivi] {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))}input[type=button], input[type=file], input[type=text], textarea_pois_pois_pois_pois_pois {max-width: var(--max-input-width);height:35px;width: 100% !important;box-sizing: border-box;border: 1px solid #8e8e8e}textarea_pois_pois_pois_pois_pois,.lomakenappi_submit, input[type=file] {height: auto}.lomakenappi_submit {-webkit-appearance: none;-moz-appearance: none;appearance: none;color: var(--button-text-color);font-size: var(--button-font-size);width: auto;border: none !important;border-radius: 6px;font-weight: 700;margin-top: 10px;line-height: 100%}tr[id^="lomakerivi"] select {border: 1px solid #888 !important;padding: 10px;border-radius: 4px;appearance: auto;-webkit-appearance: auto;-moz-appearance: auto;-ms-appearance: auto; width: auto !important;}.lpainike, .pmvk {width: auto;height: auto}.lomake-ve-solu {padding-bottom: 5px;padding-right: 10px}tr[id^="lomakerivi"] table tr {grid-gap: 2em;display: grid;grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));}tr[id^="lomakerivi"] table { width: 100%;} /* MOBIILIVALIKKO */ #main-navi-resp{display:none}@media screen and (max-width:1024px){#mobilemenu-container, #main-navi-resp {display:block !important;}#mobile-logo{display:block;}.mean-bar::before{display:none;color:var(--mobilemenu-menutext-color) !important;content:"VALIKKO";top:52px;width:auto;height:auto;right:0;position:absolute;font-size:9px!important;line-height:100%!important}#mobilemenu-container::after{right:13px!important}.meanmenu-reveal{display:none}.meanmenu-reveal:after{color:#000;font-size:10px!important;top:65px;width:50px;height:50px}.meanmenu-reveal.meanclose::after{display:block;margin-left:-2px;margin-top:15px;padding-left:0;text-align:left}.meanmenu-reveal.meanclose{color:var(--mobilemenu-open-close-color);padding:15px 10px 5px 20px}.meanmenu-reveal.meanclose{width:39px!important; font-size:30px !important}.mean-bar{float:left;width:100%;position:absolute;top:0;padding:0;min-height:42px;z-index:999}.meanmenu-reveal{color:var(--mobilemenu-open-close-color);cursor:pointer;display:block;font-size:1px;font-weight:700;height:37px;line-height:22px;margin-top:0;padding:12px 0 0;position:absolute;right:0!important;text-decoration:none;text-indent:-9999em;top:10px;width:39px}.meanmenu-reveal span{background:var(--mobilemenu-button-background);border-radius:6px;display:block;height:6px;margin-top:4px;color:#000;width:39px;line-height:100%!important}.mean-nav{float:left;width:100%;margin-top:71px}.mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}.mean-nav li a{display:block;float:left;width:100%;padding:15px 50px 15px 12px;box-sizing:border-box;height:auto;margin:0;text-align:left;color:var(--mobilemenu-link-color);border-top:1px solid rgba(255,255,255,.2);text-decoration:none;font-size:14px;background:var(--mobilemenu-link-background);font-weight:600;text-transform:uppercase}.mean-nav ul li li a{width:100%;padding:15px 50px 15px 10%;background:var(--mobilemenu-submenu-background) !important;text-shadow:none!important;visibility:visible}.mean-nav ul li li li a{width:100%;padding:15px 50px 15px 15%;box-sizing:border-box;background: #414141!important;}.mean-nav ul li{position:relative;float:left;width:100%}.mean-nav ul li a:hover{background: #424242 !important}.mean-container .mean-push,.mean-nav .wrapper{width:100%;padding:0;margin:0}.mean-container .mean-push{float:left;clear:both}.mean-remove{display:none!important}.meanmenu-reveal{right: 0px;left: auto;background: #fff;padding: 10px 10px 8px 20px;border-radius: 30px 0 0 30px;text-align: center;text-indent: 0px;font-size: 18px;}.mean-nav li a.mean-expand{border-radius: 3px;background: #fff !important;font-weight: 700;height: 20px !important;margin-top: 2px;padding: 3px 4px 4px !important;position: absolute;right: 10px;text-align: center !important;top: 12px;width: 23px !important;z-index: 2;font-size: 22px !important;color: #000 !important;height: 25px !important;width: 25px !important;border-radius: 30px;line-height: 100%;display: flex !important;justify-content: center;align-items: center;font-weight: 400 !important;}}@media screen and (max-width:720px){.mean-bar::before{top:49px}}@media screen and (max-width:375px){#mobilemenu-container::after{right:8px!important}}@media screen and (max-width:290px){#mobilemenu-container::after{right:4px!important}} #mobilepalsta-2 {display:flex; justify-content:center;} #mobilepalsta-2 a {background:#5d6265; color:orange;flex:1;display:block; width:100%; text-align:center; box-sizing:border-box;padding: 10px;} .langlink-mbl.leftlink{border-right:1px solid rgba(255,255,255,0.3)} /* TINY-SLIDER CAROUSEL */ .tns-outer{padding:0 !important} .tns-outer [hidden]{display:none !important} .tns-outer [aria-controls], .tns-outer [data-action]{cursor:pointer} .tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s;} .tns-slider>.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .tns-horizontal.tns-subpixel{white-space:nowrap} .tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal} .tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both} .tns-horizontal.tns-no-subpixel>.tns-item{float:left} .tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%} .tns-no-calc{position:relative;left:0} .tns-gallery{position:relative;left:0;min-height:1px} .tns-gallery>.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s} .tns-gallery>.tns-slide-active{position:relative;left:auto !important} .tns-gallery>.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s} .tns-autowidth{display:inline-block} .tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6} .tns-lazy-img.tns-complete{opacity:1} .tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s} .tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em} .tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0} .tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1} .tns-vpfix{white-space:nowrap} .tns-vpfix>div,.tns-vpfix>li{display:inline-block} .tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden} .tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0} .tns-t-ct:after{content:'';display:table;clear:both} .tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left} .tns-nav {text-align:center; margin:10px 0} .tns-nav button, .tns-nav-active {width: 20px;height: 20px;border-radius: 100%;border: none;background: #d5d5d5;margin:0 2px} button.tns-nav-active {background: #ee851d;} .tns-nav {text-align: center;margin: 0px 0 20px 0;position: absolute;bottom: 20px;width: auto;left: 49%;} .tns-outer {position:relative;} @media screen and (max-width:1280px) {.tns-nav { margin: 0px 0 10px 0;}} @media screen and (max-width:1024px) {#mainhero-ow .tns-nav{width: 100%;left:unset}} /* .vbox-overlay {background:url(../img/header/bg-joulu.png) left top no-repeat !important; background-size:cover !important;} .vbox-container img {max-height:800px !important} .vbox-container {background-color: transparent;background-image: url('../img/header/lumi1.png'), url('../img/header/lumi2.png'), url('../img/header/lumi3.png') !important; animation: lumisade 20s linear infinite;} @keyframes lumisade { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px} }*/ /* Front - Refecences */ #bannersbg-ma .banner {width: 66.7%;grid-template-columns: 1fr 1fr;grid-gap: 3em;right: 0;display: grid;padding-right: 3em;} #bannersbg-ma h2,#bannersbg-ma h3,#bannersbg-ma h4,#bannersbg-ma h5,#bannersbg-ma h6, #bannersbg-ma p {color:#fff} #bannersbg-ma #utnostot #solu1201 {display: grid;grid-template-columns: 1fr;} #bannersbg-ma img {min-height:500px;object-fit:cover;max-height:800px} @media screen and (max-width:1024px) {#bannersbg-ma .banner {width: 100%;position: relative;order: 2;grid-template-columns: 1fr;grid-gap: 0;padding-right:0;background: #9f988e;box-sizing:border-box}#bannersbg-ma-text {padding: 2em;box-sizing:border-box}#bannersbg-ma #utnostot {padding:2em;background: #fff;}#bannersbg-ma img{min-height: 300px;}} /* Piippulomake */ /* Lomake Wrappers */ #feedbacklomake #lomakerivi10_11,#feedbacklomake #lomakerivi10_12,#feedbacklomake #lomakerivi10_13,#feedbacklomake #lomakerivi10_14,#feedbacklomake #lomakerivi10_15, #feedbacklomake #lomakerivi10_16 {display:grid;background: #fff;padding: 3em !important;border-radius: 20px;margin-top:1em} #feedbacklomake #lomakerivi10_11 table tr,#feedbacklomake #lomakerivi10_12 table tr,#feedbacklomake #lomakerivi10_13 table tr,#feedbacklomake #lomakerivi10_14 table tr,#feedbacklomake #lomakerivi10_15 table tr,#feedbacklomake #lomakerivi10_16 table tr {display: grid;grid-template-columns: repeat(5,1fr); grid-gap:0.5em} #feedbacklomake #lomakerivi10_11 .lomakeotsikko,#feedbacklomake #lomakerivi10_12 .lomakeotsikko,#feedbacklomake #lomakerivi10_13 .lomakeotsikko,#feedbacklomake #lomakerivi10_14 .lomakeotsikko,#feedbacklomake #lomakerivi10_15 .lomakeotsikko,#feedbacklomake #lomakerivi10_16 .lomakeotsikko {grid-column:1 / -1} #feedbacklomake #lomakerivi10_16 table tr {display: grid;grid-template-columns: repeat(6,1fr); grid-gap:0.5em} /* Radiobuttonien piilotus */ #feedbacklomake input#optionitem-69::before, #feedbacklomake #optionitem-70::before, #feedbacklomake #optionitem-71::before, #feedbacklomake #optionitem-72::before, #feedbacklomake input#optionitem-90::before, #feedbacklomake #optionitem-91::before, #feedbacklomake #optionitem-92::before, #feedbacklomake #optionitem-93::before, #feedbacklomake #optionitem-94::before, #feedbacklomake #optionitem-95::before, #lomakerivi10_11 .lomake-ve-solu [type="radio"]:checked + label::before, #lomakerivi10_11 .lomake-ve-solu [type="radio"]:not(:checked) + label::before, #lomakerivi10_11 .lomake-ve-solu [type="radio"]:checked + label::after {display: none;} #lomakerivi10_12 .lomake-ve-solu [type="radio"]:checked + label::before, #lomakerivi10_12 .lomake-ve-solu [type="radio"]:not(:checked) + label::before, #lomakerivi10_12 .lomake-ve-solu [type="radio"]:checked + label::after {display: none;} #lomakerivi10_13 .lomake-ve-solu [type="radio"]:checked + label::before, #lomakerivi10_13 .lomake-ve-solu [type="radio"]:not(:checked) + label::before, #lomakerivi10_13 .lomake-ve-solu [type="radio"]:checked + label::after {display: none;} #lomakerivi10_14 .lomake-ve-solu [type="radio"]:checked + label::before, #lomakerivi10_14 .lomake-ve-solu [type="radio"]:not(:checked) + label::before, #lomakerivi10_14 .lomake-ve-solu [type="radio"]:checked + label::after {display: none;} #lomakerivi10_15 .lomake-ve-solu [type="radio"]:checked + label::before, #lomakerivi10_15 .lomake-ve-solu [type="radio"]:not(:checked) + label::before, #lomakerivi10_15 .lomake-ve-solu [type="radio"]:checked + label::after {display: none;} #lomakerivi10_16 .lomake-ve-solu [type="radio"]:checked + label::before, #lomakerivi10_16 .lomake-ve-solu [type="radio"]:not(:checked) + label::before, #lomakerivi10_16 .lomake-ve-solu [type="radio"]:checked + label::after {display: none;} /* Lomakevalinnat - taustakuva - ei valittu */ #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-69 {background: url(https://www.harmaair.com/images/kuvapankki/maxi/tuotekuva-siro-unique_44.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-70 {background: url(https://www.harmaair.com/images/kuvapankki/maxi/tuotekuva-siro-air-in_45.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-71 {background: url(https://www.harmaair.com/images/kuvapankki/maxi/harma-air-AIR-1_2_240.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-72 {background: url(https://www.harmaair.com/images/kuvapankki/maxi/tuotekuva-siro-prime_46.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 60%;} #feedbacklomake #lomakerivi10_12 input[type="radio"] + label,#feedbacklomake #lomakerivi10_13 input[type="radio"] + label,#feedbacklomake #lomakerivi10_14 input[type="radio"] + label,#feedbacklomake #lomakerivi10_15 input[type="radio"] + label{background: url(../img/header/halkaisija.png) center 0px no-repeat;height: 116px;width: 116px;background-size: 100%;padding: 0 0 1.4em 0;} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-90 {background: url(../img/header/sirovari-matta-valkoinen.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-91 {background: url(../img/header/sirovari-kiiltava-valkoinen.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-92 {background: url(../img/header/sirovari-musta.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-93 {background: url(../img/header/sirovari-vaaleanharmaa.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-94 {background: url(../img/header/sirovari-tummanharmaa.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-95 {background: url(../img/header/sirovari-harjattu-rst.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} /* lomakevalinnat - taustakuva -valittu */ #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-69 {background: #ededed url(https://www.harmaair.com/images/kuvapankki/maxi/tuotekuva-siro-unique_44.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 70%;color: #f60;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-70 {background: #ededed url(https://www.harmaair.com/images/kuvapankki/maxi/tuotekuva-siro-air-in_45.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 70%;color: #f60;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-71 {background: #ededed url(https://www.harmaair.com/images/kuvapankki/maxi/harma-air-AIR-1_2_240.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 70%;color: #f60;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-72 {background: #ededed url(https://www.harmaair.com/images/kuvapankki/maxi/tuotekuva-siro-prime_46.png) center 20px no-repeat;height: 212px;width: 200px;background-size: 70%;color: #f60;} #feedbacklomake #lomakerivi10_12 input[type=radio]:checked + label, #feedbacklomake #lomakerivi10_13 input[type=radio]:checked + label, #feedbacklomake #lomakerivi10_14 input[type=radio]:checked + label, #feedbacklomake #lomakerivi10_15 input[type=radio]:checked + label {background: #ededed url(../img/header/halkaisija.png) center 0px no-repeat;color: #f60;height: 116px;width: 116px;background-size: 100%;padding: 0 0 1.4em 0;} #feedbacklomake #lomakerivi10_16 input[type=radio]:checked + label#optionitem-90 {background: #ededed url(../img/header/sirovari-matta-valkoinen.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #f60;} #feedbacklomake #lomakerivi10_16 input[type=radio]:checked + label#optionitem-91 {background: #ededed url(../img/header/sirovari-kiiltava-valkoinen.jpg) center 0px no-repeat;height: 90pxpx;width: 100%;background-size: cover;color: #f60;} #feedbacklomake #lomakerivi10_16 input[type=radio]:checked + label#optionitem-92 {background: #ededed url(../img/header/sirovari-musta.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} #feedbacklomake #lomakerivi10_16 input[type=radio]:checked + label#optionitem-93 {background: #ededed url(../img/header/sirovari-vaaleanharmaa.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} #feedbacklomake #lomakerivi10_16 input[type=radio]:checked + label#optionitem-94 {background: #ededed url(../img/header/sirovari-tummanharmaa.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} #feedbacklomake #lomakerivi10_16 input[type=radio]:checked + label#optionitem-95 {background: #ededed url(../img/header/sirovari-harjattu-rst.jpg) center 0px no-repeat;height: 90px;width: 100%;background-size: cover;color: #fff;} /* Radiobutton tekstin asemointi */ #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-69, #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-70, #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-71, #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-72 {display: inline-block;cursor: pointer;min-height: 128px; display: flex;justify-content: center;align-items: flex-end;padding-bottom: 10px;font-size: 13px;font-weight: 700;border-radius: 6px;padding: 2em;box-sizing: border-box;border: 1px solid #dedede;line-height: 120%;text-align: center;} #feedbacklomake #lomakerivi10_11 input[type="radio"]:checked + label#optionitem-69::before, #feedbacklomake #lomakerivi10_11 input[type="radio"]:checked + label#optionitem-70::before, #feedbacklomake #lomakerivi10_11 input[type="radio"]:checked + label#optionitem-71::before, #feedbacklomake #lomakerivi10_11 input[type="radio"]:checked + label#optionitem-72::before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label#optionitem-90::before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label#optionitem-91::before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label#optionitem-92::before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label#optionitem-93::before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label#optionitem-94::before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label#optionitem-95::before {content: "Valittu";display: flex;background: #f60;width: auto;border-radius: 20px;color: #fff;margin: 0 auto;align-items: center;justify-content: center;padding: 2px 10px;font-size: 9px;border: 0;left: 10px;top: 10px;} #feedbacklomake #lomakerivi10_12 input[type="radio"] + label, #feedbacklomake #lomakerivi10_13 input[type="radio"] + label, #feedbacklomake #lomakerivi10_14 input[type="radio"] + label, #feedbacklomake #lomakerivi10_15 input[type="radio"] + label {display: inline-block;cursor: pointer; display: flex;justify-content: center;align-items: center;font-size: 13px;font-weight: 700;border-radius: 200px;box-sizing: border-box;border: 1px solid #000;line-height: 120%;text-align: center;} #feedbacklomake #lomakerivi10_12 input[type="radio"]:checked + label:before, #feedbacklomake #lomakerivi10_13 input[type="radio"]:checked + label:before, #feedbacklomake #lomakerivi10_14 input[type="radio"]:checked + label:before, #feedbacklomake #lomakerivi10_15 input[type="radio"]:checked + label:before, #feedbacklomake #lomakerivi10_16 input[type="radio"]:checked + label:before {content: "Valittu";display: flex;background: #f60;width: auto;border-radius: 20px;color: #fff;margin: 0 auto;align-items: center;justify-content: center;padding: 1px 5px;font-size: 9px !important;border: 0;font-size: 13px; left:35px; top:10px} #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-90, #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-91, #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-92, #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-93, #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-94, #feedbacklomake #lomakerivi10_16 input[type="radio"] + label#optionitem-95 {cursor: pointer; min-height: 100px;display: flex;justify-content: center;align-items: flex-end;padding-bottom: 10px;font-size: 13px;font-weight: 700;border-radius: 6px;padding: 1em;box-sizing: border-box;border: 1px solid #dedede;line-height: 120%;text-align: center;} /* Peruslomakekentat bg */ #feedbacklomake #lomakerivi10_18 td,#feedbacklomake #lomakerivi10_19 td,#feedbacklomake #lomakerivi10_110 td, #lomakerivi10_111 td, #lomakerivi10_112 td, #lomakerivi10_113 td, #lomakerivi10_114 td, #lomakerivi10_115 td, #lomakerivi10_116 td, #lomakerivi10_117 td, #feedbacklomake #lomakerivi10_119 td,#feedbacklomake #lomakerivi10_120 td,#feedbacklomake #lomakerivi10_121 td, #lomakerivi10_122 td, #lomakerivi10_123 td, #lomakerivi10_124 td, #lomakerivi10_125 td, #lomakerivi10_126 td,#lomakerivi10_128 td, #lomakerivi10_129 td, #lomakerivi10_130 td{padding: 10px 40px;} #feedbacklomake #lomakerivi10_18,#feedbacklomake #lomakerivi10_19,#feedbacklomake #lomakerivi10_110, #lomakerivi10_111, #lomakerivi10_112, #lomakerivi10_113, #lomakerivi10_114, #lomakerivi10_115, #lomakerivi10_116, #lomakerivi10_117, #lomakerivi10_119,#lomakerivi10_120,#lomakerivi10_121,#lomakerivi10_122, #lomakerivi10_123, #lomakerivi10_124, #lomakerivi10_125, #lomakerivi10_126,#lomakerivi10_128, #lomakerivi10_129, #lomakerivi10_130 {background: #fff;grid-template-columns: 1fr 2fr;} #feedbacklomake #lomakerivi10_18,#feedbacklomake #lomakerivi10_119,#feedbacklomake #lomakerivi10_128 {border-radius:6px 6px 0 0;padding: 30px 0 0 0;} #feedbacklomake #lomakerivi10_117,#feedbacklomake #lomakerivi10_127,#feedbacklomake #lomakerivi10_130 {border-radius:0 0 6px 6px;} #feedbacklomake #lomakerivi_submit_50_10_1 td {grid-column: 1/ -1;} #feedbacklomake #lomakerivi_submit_50_10_1 .lomakenappi_submit {max-width: unset;} #feedbacklomake #lomakerivi10_117 .formrow-wb,#feedbacklomake #lomakerivi10_120 .formrow-wb,#feedbacklomake #lomakerivi10_121 .formrow-wb {display: flex !important; flex-wrap:wrap;grid-gap: 20px;} #feedbacklomake #lomakerivi10_117 .formrow-wb td, #feedbacklomake #lomakerivi10_119 .formrow-wb td,#feedbacklomake #lomakerivi10_120 .formrow-wb td, #feedbacklomake #lomakerivi10_121 .formrow-wb td{padding:10px 10px 10px 20px;} #lomakerivi10_119 .formrow-wb {display: flex !important;flex-wrap: wrap;grid-gap: 0;} #feedbacklomake #lomakerivi10_117 label, #feedbacklomake #lomakerivi10_119 label, #feedbacklomake #lomakerivi10_120 label, #feedbacklomake #lomakerivi10_121 label {display: flex;align-items: center;} #lomakerivi_submit_50_10_1 .lomakenappi_submit {height: auto;} #feedbacklomake .pakollisetkentat{display: block;margin-top: 50px;} #feedbacklomake h3 {margin-bottom: 10px;} #feedbacklomake .modulikuvausteksti p {display: none;} @media screen and (max-width:1024px) {#feedbacklomake #lomakerivi10_11 table tr {grid-template-columns: repeat(4,1fr);}} @media screen and (max-width:1024px) { #feedbacklomake #lomakerivi10_12 table tr, #feedbacklomake #lomakerivi10_13 table tr, #feedbacklomake #lomakerivi10_14 table tr, #feedbacklomake #lomakerivi10_15 table tr, #feedbacklomake #lomakerivi10_16 table tr {grid-template-columns: repeat(4,1fr);} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-69 {height: 180px;width: 130px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-70 {height: 180px;width: 163px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-71 {height: 180px;width: 130px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-72 {height: 180px;width: 130px;background-size: 60%;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-69 {height: 180px;width: 130px;background-size: 65%;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-70 {height: 180px;width: 163px;background-size: 65%;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-71 {height: 180px;width: 130px;background-size: 65%;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-72 {height: 180px;width: 130px;background-size: 65%;}} @media screen and (max-width:800px) {#feedbacklomake #lomakerivi10_11 table tr {grid-template-columns: repeat(3,1fr);}} @media screen and (max-width:768px) {#feedbacklomake #lomakerivi10_18 table tr, #feedbacklomake #lomakerivi10_19 table tr, #feedbacklomake #lomakerivi10_110 table tr, #feedbacklomake #lomakerivi10_111 table tr, #feedbacklomake #lomakerivi10_112 table tr {grid-template-columns: repeat(3,1fr);}} @media screen and (max-width:720px) {#feedbacklomake tr[id^="lomakerivi"], tr[id^="lomakerivi"] table tr.formrow-wb {grid-template-columns: 1fr;grid-gap: 0;} #feedbacklomake #lomakerivi10_18 td, #feedbacklomake #lomakerivi10_19 td, #feedbacklomake #lomakerivi10_110 td, #lomakerivi10_111 td, #lomakerivi10_112 td, #lomakerivi10_113 td, #lomakerivi10_114 td, #lomakerivi10_115 td, #lomakerivi10_116 td, #lomakerivi10_117 td, #feedbacklomake #lomakerivi10_119 td, #feedbacklomake #lomakerivi10_120 td, #feedbacklomake #lomakerivi10_121 td, #lomakerivi10_122 td, #lomakerivi10_123 td, #lomakerivi10_124 td, #lomakerivi10_125 td, #lomakerivi10_126 td, #lomakerivi10_128 td, #lomakerivi10_129 td, #lomakerivi10_130 td { padding: 10px 15px 0 40px;}} @media screen and (max-width:600px) { #feedbacklomake #lomakerivi10_11 table tr, #feedbacklomake #lomakerivi10_12 table tr, #feedbacklomake #lomakerivi10_13 table tr, #feedbacklomake #lomakerivi10_14 table tr, #feedbacklomake #lomakerivi10_15 table tr {grid-template-columns: repeat(2,1fr);} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-69 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-70 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-71 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type="radio"] + label#optionitem-72 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-69 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-70 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-71 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_11 input[type=radio]:checked + label#optionitem-72 {height: 180px;width: 100%;background-size: 80px;} #feedbacklomake #lomakerivi10_12 table tr, #feedbacklomake #lomakerivi10_13 table tr, #feedbacklomake #lomakerivi10_14 table tr, #feedbacklomake #lomakerivi10_15 table tr, #feedbacklomake #lomakerivi10_16 table tr {grid-template-columns:repeat(3,1fr)}} @media screen and (max-width:575px) {#feedbacklomake #lomakerivi10_11 table tr,#feedbacklomake #lomakerivi10_12 table tr, #feedbacklomake #lomakerivi10_13 table tr, #feedbacklomake #lomakerivi10_14 table tr, #feedbacklomake #lomakerivi10_15 table tr, #feedbacklomake #lomakerivi10_16 table tr {grid-template-columns: repeat(2,1fr);}} @media screen and (max-width:575px) {#feedbacklomake #lomakerivi10_18, #feedbacklomake #lomakerivi10_19, #feedbacklomake #lomakerivi10_110, #lomakerivi10_111, #lomakerivi10_112, #lomakerivi10_113, #lomakerivi10_114, #lomakerivi10_115, #lomakerivi10_116, #lomakerivi10_117 {grid-gap: 0;padding: 0 !important;}} @media screen and (max-width:480px) { #feedbacklomake #lomakerivi10_11 table tr { grid-template-columns: 1fr;} #feedbacklomake #lomakerivi10_18 td, #feedbacklomake #lomakerivi10_19 td, #feedbacklomake #lomakerivi10_110 td, #lomakerivi10_111 td, #lomakerivi10_112 td, #lomakerivi10_113 td, #lomakerivi10_114 td, #lomakerivi10_115 td, #lomakerivi10_116 td, #lomakerivi10_117 td, #feedbacklomake #lomakerivi10_119 td, #feedbacklomake #lomakerivi10_120 td, #feedbacklomake #lomakerivi10_121 td, #lomakerivi10_122 td, #lomakerivi10_123 td, #lomakerivi10_124 td, #lomakerivi10_125 td, #lomakerivi10_126 td, #lomakerivi10_128 td, #lomakerivi10_129 td, #lomakerivi10_130 td { padding: 10px 15px 0 20px;} } @media screen and (max-width:375px) {#feedbacklomake #lomakerivi10_12 table tr,#feedbacklomake #lomakerivi10_13 table tr, #feedbacklomake #lomakerivi10_14 table tr, #feedbacklomake #lomakerivi10_15 table tr, #feedbacklomake #lomakerivi10_16 table tr{grid-template-columns: 1fr;}} #webiolomake_49_10_1 tr {background: none;} #webiolomake_49_10_1 tr td tr{grid-template-columns: 1fr 1fr;} #webiolomake_49_10_1 tr td {padding: 5px 0px;} #lomakerivi_submit_49_10_1 .lomakenappi_submit {height: auto;font-size: 1rem;} @media screen and (max-width:678px) {#webiolomake_49_10_1 tr td tr {grid-template-columns: 1fr; grid-gap:0}} /* Even/odd cols */ .feature-col .abs-element img {width:auto;} .feature-col img {padding:0; width:100%; object-fit: cover;} .feature-col .col-right,.feature-even .col-left{padding: 2em 4em;} .feature-even .col-right{padding: 0;} .feature-col .col-left,.feature-even .col-right{width: 100%;position:relative} .feature-col {align-items:center; justify-content:center;grid-gap: 0;} .feature-col h2 {letter-spacing:5px} .feature-col img {height:auto; padding:0 !important;margin: 0 auto;} @media screen and (max-width:1280px) {.feature-col .col-right, .feature-even .col-left {padding: 2em !important;}} @media screen and (max-width:1024px) {.feature-col .col-right, .feature-even .col-left,.feature-col .col-left, .feature-even .col-right {padding: 0em !important;}} @media screen and (max-width:768px) {.feature-even .col-left {order: 2;}} /* Tuotteet etusivu - Exodraft */ #ed-hero {background:#2a2a2a;} #ed-hero-content {padding-top: 220px;} #ed-hero img {width:100%; object-fit:cover;border-radius: 12px;} #ed-hero .abs-element {max-width: 50%;right: 0;padding-right: 10%;} #pcardlift-endorse-points-wrapper, #pcardlift-bottom{background:#fff} @media screen and (max-width:1024px) {#ed-hero-content {padding-top: 100px;}} /* Tuotekortti - Exodraft */ #pcard-wrapper {background:#252525; padding-top:220px} #pcard-wrapper .headerbox {background: #dc8227;max-width: max-content;margin-bottom: 1em;position: relative;width: 100%;display: flex;justify-content: center;align-items: center;z-index: 1;border-radius: 4px;} #pcard-wrapper .headerbox .col-full {margin: 0;} #pcard-wrapper .headerbox p {background: unset;font-size: 14px !important;font-weight: 700;padding: 5px 1vw;padding: 5px 1vw;text-transform: uppercase;} #pcard-img, #pcard-img img {border-radius:12px;} #pcard-content{height: 43vw;justify-self: flex-start;align-self: flex-start;display: flex;justify-content: center;flex-direction: column;max-height: 800px;} #pcard-wrapper :is(li,p){color:#fff} #pcard-wrapper :is(h1,h2,h3,h4,h5,h6){color:#dc8227} #pcard-features-wrapper .dgrid-3-cols,#pcard-features-wrapper .dgrid-2-cols{grid-gap:2em 1em} #pcard-features-wrapper article.col-full, #pcard-features-wrapper .dgrid-2-cols div,#pcard-features-wrapper .dgrid-3-cols div {background:#fff; border-radius:12px; background:#fff; padding:2em;}#pcard-features-wrapper .dgrid-3-cols .col-3{margin:0} #pcard-features-wrapper iframe,#pcard-features-wrapper-2 iframe {display:block; margin:0 auto; text-align: center} #pcard-img .kuvagalleriakuvatausta {background: #fff;border-radius: 12px;} #pcard-img .kuvagalleriagrid {display:flex;flex-wrap: wrap; grid-template-columns: repeat(auto-fill,minmax(120px,1fr));justify-content: flex-start;} #pcard-img .kuvagalleriagrid .kuvagalleriakuvatausta{float:none !important;flex-basis: 23%;} #pcard-img .kuvagalleriagrid .kuvagalleriakuvatausta:first-of-type{grid-column: 1 / -1;flex:1 1 100%} #pcard-img .kuvagalleriagrid .kuvagalleriakuvatausta:first-of-type img {width:75% !important;} #pcard-img .kuvagalleriagrid .kuvagalleriakuvatausta:first-of-type img.kuva{aspect-ratio: 4/3; max-width:auto; border-radius:8px;margin:0 auto; width:auto;max-height: unset;object-fit: contain;} #pcard-img .kuvagalleriagrid .kuvagalleriakuvatausta img.kuva{aspect-ratio:unset;max-height: unset;object-fit: contain;aspect-ratio: 1/1;} #pcard-tech-specs {background: #fff;border-radius: 12px;margin-bottom: 2em;} #pcard-tech-specs table {width:100%;} #pcard-tech-specs tbody tr:nth-of-type(2n) {background: #f1f1f1;border-radius: 4px;} #pcard-tech-specs tr { display: flex; padding:10px 20px}#pcard-tech-specs tr td, #pcard-tech-specs tr th {flex: 1;text-align: left;} #nopcard-bg article.col-full {background:none !important;padding:0} #pcard-product-description #breadcrump {color: #dc8227;} @media screen and (max-width:1024px) {#pcard-img .kuvagalleriagrid .kuvagalleriakuvatausta {flex-basis: 18%;}#pcard-content {padding: 1em;height: auto;max-height: unset;}#pcard-features-wrapper {padding: 4em 0em;}#pcard-wrapper,#ed-hero-content s{padding-top:120px}#pcard-wrapper .center-col{grid-template-columns: 1fr 2fr;align-items: flex-start;}#pcard-img .kuvagalleriakuvatausta {border-radius: 6px;}} @media screen and (max-width: 800px) {#pcard-wrapper .center-col {grid-template-columns: 1fr;align-items: flex-start;}#pcard-product-description {padding: 0;}#pcard-tech-specs div {overflow:hidden;overflow-x: auto;}#pcard-tech-specs table {width:800px !important}#ed-hero .abs-element {max-width: 100%;right: 0;padding-right: 10%;position: relative;background: #2a2a2a;width: 100%;padding: 2em;order: 2;}} @media screen and (max-width: 575px) {.plift-img img {max-height: 120px;}} @media screen and (max-width: 440px) {#pcard-tech-specs td p {font-size: 12px;line-height: 120%;}} /* Tuotenostot - Exodraft */ #product-modals .col-full {display:grid;grid-template-columns: repeat(4,1fr);grid-gap:1em;} #product-modals .modulikuvausteksti {grid-column: 1 / -1;} .p-modal {background:#fff;border-radius: 12px;} .p-modal-img {width:100%;position: relative;padding:40px 0 0 0;} .p-modal img{border-radius: 12px 12px 0 0;object-fit: cover;padding:0 !important; width:100%; height:100%; object-fit:contain;transition: .2s ease-in-out;transform: scale(100%);} .p-modal:hover {transform: scale(100%);box-shadow: 2px 2px 12px rgba(0,0,0,.1);} .p-modal-mask {width:100%; bottom:0;} .abs-element.p-modal-mask img {width: 100%;} .plift-img img {aspect-ratio: 3/4;max-height: 200px;} .p-modal-content .headerbox:empty{min-height: 46px;visibility:hidden} .p-modal-header, .p-modal-text {position:relative; z-index:23} .p-modal-header h2 {font-size:min(max(1.3rem, 1.5vw), 1.6rem)} .p-modal-content .headerbox {background:#ec831b; font-size: 15px; font-weight: 700; text-transform:uppercase;padding:0;margin-bottom: 10px;} .p-modal-content .headerbox p{font-size:12px !important;padding: 5px 1vw; color:#fff; font-weight:700} .p-modal-button.webiolinkkipainike {background:#f1f1f1;border-radius:8px; color:#006eb2;max-width: unset; text-align: left; width:100%;padding: 12px 24px; } .p-modal-button a{color:#000; font-weight:700;font-size: 0.9rem} .p-modal-button.webiolinkkipainike,.p-modal-button.webiolinkkipainike p {position: relative} .p-modal-button.webiolinkkipainike span {position:absolute; right:0;} .p-modal-button.webiolinkkipainike:hover {filter:unset} .p-modal-text {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow: hidden;} @media screen and (max-width:1024px) {#product-modals .col-full{grid-template-columns: repeat(2,1fr);}} @media screen and (max-width:575px) {#product-modals .col-full{grid-template-columns: 1fr;}.p-modal-button.webiolinkkipainike p {font-size: 14px;}.p-modal-content .headerbox p {padding: 5px 3vw;}} #piippulaskurilink {position: fixed;right: 10px;bottom: 10px; z-index:200000} #piippulaskurilink .webiolinkkipainike{margin: 0 auto;font-weight: 700;padding: 12px 36px;text-align: left;background: #000;border: 1px solid #fff;} #plaskuri-header {font-weight: 700;text-align: left;display: flex;align-items: center;} #plaskuri-header-text {display: block;font-size: 12px;font-weight: 400; text-transform: none;padding-top:2px} #plaskuri-sign{background: #ec831b;font-size: 9px;padding: 0px 5px;border-radius: 3px;margin-right: 5px;} @media screen and (max-width:575px) {#piippulaskurilink {width: calc(100% - 20px);}#piippulaskurilink .webiolinkkipainike{bottom:5px; text-align:center; padding:12px 45px;display: flex;flex-direction: column; align-items: center;}#plaskuri-header {font-size: 14px;line-height: 140%;}#plaskuri-header-text {font-size: 12px;}} @media only screen and (max-width: 801px) {#pcard-tech-specs.colorchart-35 table tr,#pcard-tech-specs.colorchart-160 table tr {display: grid !important;grid-template-columns: repeat(auto-fit,minmax(120px,1fr));}} @media only screen and (max-width: 575px) {#pcard-tech-specs.colorchart-35 table tr,#pcard-tech-specs.colorchart-160 table tr {grid-template-columns: repeat(auto-fit,minmax(100px,1fr));}#pcard-tech-specs.colorchart-35 {padding: 1em;}} /* NAVI */ @media screen and (max-width:1440px) {#abs-navi .topnavi-link {padding:20px 10px}} @media screen and (max-width:1160px) {#abs-navi .center-col {grid-template-columns: 180px 1fr;}} @media only screen and (max-width: 1024px) {#solu7301 img, #solu7331 img, #solu7341 img {padding: 20px !important;}} @media only screen and (max-width: 768px) {#solu7301 img, #solu7331 img, #solu7341 img {padding: 40px 0 !important;}} @media only screen and (max-width: 640px) {#webiolomake_14_30_3 tr[id^="lomakerivi"] {grid-gap: 0;}} @media only screen and (max-width: 380px) {#pcard-tech-specs {padding: 1.5em;}} textarea_pois_pois_pois {max-width: 100%;box-sizing:border-box} #uusi-tehdas, #uusi-tehdas tbody,#uusi-tehdas tr, #uusi-tehdas td{width:100% !important; height:auto !important} #uusi-tehdas tr {display:grid; grid-template-columns:repeat(4,1fr); grid-gap:0em;} @media screen and (max-width:575px) {#uusi-tehdas tr {display:grid; grid-template-columns:1fr 1fr; grid-gap:0px;}} #uusi-tehdas img {aspect-ratio: 4/3; object-fit: cover; width:100%}