/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.1.3.1763019876
Updated: 2025-11-13 09:44:36

*/

.woocommerce-mini-cart__empty-message {

    display:none;
}

 .puhelin p a:before { mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-contact-phone-v1.svg'); -webkit-mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-contact-phone-v1.svg');}
 .sahkoposti p a:before { mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-contact-email-v1.svg'); -webkit-mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-contact-email-v1.svg');}
 .facebook:before { content: ''; mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-facebook.svg'); -webkit-mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-facebook.svg');}
 .instagram:before { content: ''; mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-instagram.svg'); -webkit-mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-instagram.svg');}
 .linkedin:before { content: ''; mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-linkedin.svg'); -webkit-mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-linkedin.svg');}
 .youtube:before { content: ''; mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-youtube.svg'); -webkit-mask-image: url('/wp-content/themes/oceanwp-child/svg/icon-youtube.svg'); margin-bottom: -2px;}
 .puhelin:hover:before, .esittely-sisallot.valakia-info .sahkoposti p a:hover:before, .esittely-sisallot.valakia-info .facebook p a:hover:before, .esittely-sisallot.valakia-info .instagram p a:hover:before, .esittely-sisallot.valakia-info .linkedin p a:hover:before, .esittely-sisallot.valakia-info .youtube p a:hover:before { background-color: rgba(var(--main-red));}


/* Asiakkaiden logot etusivulle // LOGOSEINÄ */
.index-asiakkaat-alue {padding: 70px calc(var(--pagepadding) + 2%) 70px; background-color: rgba(var(--gray90)); /*margin-left: 2%; margin-right: 2%; margin-top: 35px;margin-bottom: 35px;*/ }
.index-asiakkaat-alue .wp-block-columns { flex-wrap: wrap !important; justify-content: space-between; }
.index-asiakkaat-alue .wp-block-column.paaotsikko {flex-basis: calc(10%) !important; border-left: 1px solid rgba(var(--white)); border-right: 1px solid rgba(var(--white)); padding-top: 35px; display: flex; justify-content: center;}
.index-asiakkaat-alue .wp-block-column.sisallot { flex-basis: calc(90%) !important; padding: 0 2.25%; border-right: 1px solid rgba(var(--white)); }
.index-asiakkaat-alue .wp-block-column { flex-grow: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
.index-asiakkaat-alue h1 {writing-mode: vertical-rl; text-orientation: upright; font-size: 200%; font-weight: 700; text-transform: uppercase; color: rgba(var(--white));}
.index-asiakkaat-alue .osion-otsikko, .index-asiakkaat-alue .osion-esittely {border-bottom: 1px solid rgba(var(--gray10)); margin-top: 15px !important; margin-bottom: 35px !important;} /*osion otsikko*/
.index-asiakkaat-alue .osion-otsikko h2 {font-size: 100% !important; font-weight: 500 !important; color: rgba(var(--white)); text-transform: uppercase; padding-right: 35px; letter-spacing: 0.1em !important;} /*osion otsikko*/
.index-asiakkaat-alue .osion-esittely p {font-size: 100% !important; font-weight: 300 !important; color: rgba(var(--white)); text-transform: uppercase; padding-right: 35px;} /*osion otsikko*/

/* Logot: Asiakkaat // logoseinä ––> */
.valakia-logoseina { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px; align-content: center; }
.valakia-logoseina-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 18px; }
.valakia-logoseina-logo a { display: flex; } /*border: 1px solid orange;*/
.valakia-logoseina-logo a img { object-position: center; width: auto !important; height: 69px !important; margin-bottom: 0 !important; }
.valakia-logoseina-logo a img { -webkit-filter: invert(87%) sepia(0%) saturate(26%) hue-rotate(160deg) brightness(79%) contrast(81%); -moz-filter: invert(87%) sepia(0%) saturate(26%) hue-rotate(160deg) brightness(79%) contrast(81%); filter: invert(87%) sepia(0%) saturate(26%) hue-rotate(160deg) brightness(79%) contrast(81%); }
.valakia-logoseina-logo a img:hover { -webkit-filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%); -moz-filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%); filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(23deg) brightness(118%) contrast(118%); }
/*sorttaus-painike logoseinään ––>*/
.index-asiakkaat-alue .lataa-logot-painike-alue { text-align: center !important; width: 100% !important;}
.index-asiakkaat-alue button { color: rgba(var(--white)) !important; border: 1px solid rgba(var(--white)) !important; background-color: transparent !important; border-radius: 0 !important; font-size: 88.88888888% !important; font-weight: 300; line-height: 1.5 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 36px 0 0 0 !important; padding: 9px 21px 7px 21px !important; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
.index-asiakkaat-alue button:hover { background-color: rgba(var(--main-red)) !important; color: rgba(var(--white)) !important; border: 1px solid rgba(var(--main-red)) !important; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }



/* SISÄSIVUT: Työt ––> PORTFOLIO - SHORTCODE-LISTAUS by Mika */
.valakia-portfolio-container { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.valakia-portfolio-wrapper { width: calc(100%) !important; position: relative; height: 100%; }
.valakia-portfolio-linkki { aspect-ratio: 4 / 3; width: calc(25%); margin-bottom: 0% !important; justify-content: center; line-height: 0 !important; overflow: hidden !important; }
a.valakia-portfolio-linkki, a:hover.valakia-portfolio-linkki { text-decoration: none !important; }
a.valakia-portfolio-linkki { background-color: rgba(var(--white)); }
a:hover.valakia-portfolio-linkki { background-color: rgba(var(--main-red)); }
.valakia-portfolio-linkki .valakia-portfolio-kuva { background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; min-height: 100% !important; }
.valakia-portfolio-linkki:hover .valakia-portfolio-kuva { filter: grayscale(1) blur(3px) !important; mix-blend-mode: multiply !important; transform: scale(1.06); }
.valakia-portfolio-linkki h2 { font-size: 133.33333%; color: white; font-weight: 300; text-decoration: none !important; text-align: center; line-height: 1.35; text-shadow: 0px 0px 6px rgba(var(--black)); display: none; margin-top: 0 !important; margin-bottom: 0 !important;}
.valakia-portfolio-linkki:hover h2 { display: block; position: absolute !important; width: 84%; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 22 !important; object-position: center; }
/*linkkien siirtymät ––> */
a.valakia-portfolio-linkki .valakia-portfolio-kuva, a.valakia-portfolio-linkki:hover .valakia-portfolio-kuva { transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }

a.valakia-portfolio-linkki, a:focus.valakia-portfolio-linkki, a:active.valakia-portfolio-linkki, a:visited.valakia-portfolio-linkki { outline-color: transparent !important; color: transparent !important; }



.esittely-sisallot.valakia-info p {margin-top: 7px !important; margin-bottom: 7px !important;}
.esittely-sisallot.valakia-info h3 {font-size: 88.88888% !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em !important;}
.esittely-sisallot.valakia-info h4 {font-size: 100% !important; font-weight: 500; color: rgba(var(--black)) !important; }
.esittely-sisallot.valakia-info h3, .esittely-sisallot.valakia-info h4 {margin-top: 21px !important; margin-bottom: 14px !important;}
.esittely-sisallot.valakia-info p a:before { content: ''; height: 15px !important; width: 15px !important; display: inline-block; margin-bottom: -2px; margin-right: 15px; mask-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; background-color: rgba(var(--gray50)); position: static !important; transform: scaleX(1);}
.esittely-sisallot.valakia-info .puhelin p a:before { mask-image: url('/wp-content/themes/valakia/svg/icon-contact-phone-v1.svg'); -webkit-mask-image: url('/wp-content/themes/valakia/svg/icon-contact-phone-v1.svg');}
.esittely-sisallot.valakia-info .sahkoposti p a:before { mask-image: url('/wp-content/themes/valakia/svg/icon-contact-email-v1.svg'); -webkit-mask-image: url('/wp-content/themes/valakia/svg/icon-contact-email-v1.svg');}
.esittely-sisallot.valakia-info .facebook p a:before { content: ''; mask-image: url('/wp-content/themes/valakia/svg/icon-facebook.svg'); -webkit-mask-image: url('/wp-content/themes/valakia/svg/icon-facebook.svg');}
.esittely-sisallot.valakia-info .instagram p a:before { content: ''; mask-image: url('/wp-content/themes/valakia/svg/icon-instagram.svg'); -webkit-mask-image: url('/wp-content/themes/valakia/svg/icon-instagram.svg');}
.esittely-sisallot.valakia-info .linkedin p a:before { content: ''; mask-image: url('/wp-content/themes/valakia/svg/icon-linkedin.svg'); -webkit-mask-image: url('/wp-content/themes/valakia/svg/icon-linkedin.svg');}
.esittely-sisallot.valakia-info .youtube p a:before { content: ''; mask-image: url('/wp-content/themes/valakia/svg/icon-youtube.svg'); -webkit-mask-image: url('/wp-content/themes/valakia/svg/icon-youtube.svg'); margin-bottom: -2px;}
.esittely-sisallot.valakia-info .puhelin p a:hover:before, .esittely-sisallot.valakia-info .sahkoposti p a:hover:before, .esittely-sisallot.valakia-info .facebook p a:hover:before, .esittely-sisallot.valakia-info .instagram p a:hover:before, .esittely-sisallot.valakia-info .linkedin p a:hover:before, .esittely-sisallot.valakia-info .youtube p a:hover:before { background-color: rgba(var(--main-red));}


/* Mietelause boxi taustakuvalla */
.mietelause-alue {
    padding: 140px calc(var(--pagepadding) + 4%);
    /*background-color: rgba(var(--gray20));*/
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 0px;
    /* background-image: url('/wp-content/themes/valakia/svg/valakia-bg-kolmio-box.svg');
    background-repeat: repeat;
    background-size: 104px 104px;*/
    animation: quotecolor 20s infinite linear;
}
.mietelause-alue h2 {font-size: 400%; font-weight: 100 !important; color: rgba(var(--gray90)) !important;} /*lainausteksti*/
.mietelause-alue h2 span { background-color: rgba(var(--white)); padding: 15px; line-height: 1.5; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mietelause-alue p { font-size: 200%; font-weight: 300 !important; color: rgba(var(--gray90)) !important; font-style: italic; line-height: 1.25; margin: -35px 70px 0px 70px; } /*lainaustekstin viittaus*/
.mietelause-alue p em { font-style: normal !important;} /*lainaustekstin viittaus*/
.mietelause-alue h2 span:nth-of-type(1) {margin-left: 36px !important;}


.mietelause-alue h2 span{
background:#9e116b;

}

.mietelause-alue p {
    padding-top:40px;
}

.mietelause-alue {
    margin:50px 0px;
}



/* CONTACT FORM 7 */
/*lyhyemmät kentät 2-palstaan ––> */
.wpcf7 .left, .wpcf7 .right, .wpcf7 .full {display: inline-flex !important; flex-direction: column !important; flex-wrap: wrap !important;}
.wpcf7 .left {width: calc(50% - 25px) !important;}
.wpcf7 .right {width: calc(50% - 3.5%) !important; margin-left: 3% !important;}
.wpcf7 .full {width: calc(100% - 25px); margin-right: 0% !important;}
/*CF 7*/
.wpcf7 {margin-top: 25px !important;}
.wpcf7 label {font-weight: 300 !important;}
.wpcf7 h2 {font-weight: 300 !important;}
.wpcf7 h3 {font-weight: 300 !important; font-size: 133.33333% !important; font-style: italic; color: rgba(var(--black));}
.wpcf7 p {font-weight: 300 !important; margin-bottom: 7px;}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 textarea {
     background-color: #FFF; color: rgba(var(--black)); width: calc(100%); border: 1px solid rgba(var(--gray30)) !important; padding: 7px !important; font-size: 100% !important; margin: 3px 0px 12px 0px !important;}
.wpcf7 input[type="file"] {color: rgba(var(--main-red)); width: calc(100%); padding: 7px !important; font-size: 100% !important; margin: 3px 0px 12px 0px !important;}
.wpcf7-list-item {margin: 0 0 0 1em;} /*oletus*/
/*RADIO BUTTONS*/
.wpcf7-list-item {margin: 7px 0 0 0 !important; width: calc(25% - 2px) !important;} /*3 ekaa radiota*/ .wpcf7-list-item.last {width: calc(50% - 2px) !important;} /*viimeinen radio tekstikentällä*/
.wpcf7 select {background-color: #FFF; color: rgba(var(--main-red)); border: 1px solid rgba(var(--main-red), var(--alpha60)) !important; padding: 7px !important; font-size: 100% !important; margin: 3px 0px 12px 0px !important;}
/* CF7 placeholderit ––> */
.wpcf7 input[type="email"] {}
.wpcf7 input::-webkit-input-placeholder, .wpcf7 textarea::-webkit-input-placeholder {color: rgba(var(--gray50)) !important; opacity: 1 !important;}
.wpcf7 input:-moz-placeholder, .wpcf7 textarea:-moz-placeholder {color: rgba(var(--gray50)) !important; opacity: 1 !important;}
.wpcf7 input::-moz-placeholder, .wpcf7 textarea::-moz-placeholder {color: rgba(var(--gray50)) !important; opacity: 1 !important;}
.wpcf7 input:-ms-input-placeholder, .wpcf7 textarea:-ms-input-placeholder {color: rgba(var(--gray50)) !important; opacity: 1 !important;}
/* CF7 Submit Button */
.wpcf7 input[type="submit"] {color: rgba(var(--white)); font-size: 100% !important; font-weight: 500 !important; background: rgba(var(--main-red)); border: 1px solid rgba(var(--main-red)) !important; padding: 15px 25px 15px 25px; border-radius: 3px !important; width: auto; text-transform: uppercase;}
.wpcf7 input:hover[type="submit"] {transition: all 0.4s ease 0s; background: rgba(var(--black)) !important; color: rgba(var(--main-red)) !important; border: 1px solid rgba(var(--main-red)) !important;}
.wpcf7 input:active[type="submit"] {background: rgba(var(--black)); color: rgba(var(--white));}
/* CF7 virheilmoitukset */
.wpcf7-not-valid-tip {background-color: red !important; color: #FFF !important; font-weight: 500 !important; padding: 4px 14px !important; margin: 3px 0px !important; }
.wpcf7 form .wpcf7-response-output {margin: 14px 0px !important;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {}
.wpcf7 form.sent .wpcf7-response-output {border: 2px solid green !important; background-color: green !important; color: #FFF !important;}

/* Googlen reCAPTCHA-ikkuna piiloon*/
.wpcf7 p.recaptha {margin-top: 35px; font-family: var(--helperfont); font-weight: 300 !important;} .wpcf7 p.recaptha a {font-family: var(--helperfont) !important; }
.grecaptcha-badge {visibility: hidden !important;} /* EI SAA OLLA: display: none */


.reveal {position: relative; opacity: 0; -webkit-transform: translateY(150px); transform: translateY(150px); transition: 1s all ease;}
.reveal.active {-webkit-transform: translateY(0); transform: translateY(0); opacity: 1;}

/*Siirtymä vasemmalta • CSS Transformation on Scroll + JS*/
.reveal-left {position: relative; opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); transition: 1s all ease;}
.reveal-left.active {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; overflow: hidden !important;}

/*Siirtymä oikealta• CSS Transformation on Scroll + JS*/
.reveal-right {position: relative; opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: 1s all ease;}
.reveal-right.active {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}

/*Siirtymä tesmaus CSS Transformation on Scroll + JS*/
.reveal-xyz {position: relative; opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); transition: 1s all ease;}
.reveal-xyz.active {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1;}



#button-container {
    --button-columns: 8;
}