/*
 Theme Name:   Sankaritarina
 Theme URI:    https://jj-net.fi
 Description:  JJ-Net theme child
 Author:       JJ-Net Group Oy
 Author URI:   https://jj-net.fi
 Template:     jj-net-theme
 Version:      1.0
 License:      All rights reserved
 License URI:  https://jj-net.fi
 Text Domain:  jjnet
*/

@font-face {
	font-family: 'Poppins-Regular';
	font-style: normal;
	font-weight: 400;
	src: url(./fonts/Poppins-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'Poppins-Light';
	font-style: normal;
	font-weight: 200;
	src: url(./fonts/Poppins-ExtraLight.ttf) format('truetype');
}
/*
@font-face {
	font-family: 'Poppins-Semibold';
	font-style: normal;
	font-weight: 400;
	src: url(./fonts/Poppins-SemiBold.ttf) format('truetype');
}
*/

body { font-family: "Poppins-Regular", sans-serif; font-size:16px; line-height:1.5rem; }
h1,h2,h3,h4,h5,h6 { color:#333; font-family: "Poppins-Light", sans-serif; font-weight:200; }
h1 span { color:#ec0b8e; font-family: "Poppins-Regular", sans-serif; font-weight:400; }
h3 { font-size:1.5rem; }

a, .hl-pink { color:#ec0b8e; }

.bordered .col-content { padding:30px; border:2px solid #f2f2f2; }
.content { margin:35px 0; }

.container-fluid { max-width:1920px; margin: 0 auto; }
.row .container { padding:0 15px; }

.btn-custom { display:inline-block; border:0; background-color:#ec0b8e; color:#fff; border-radius:25px; line-height:1; text-decoration:none; padding:10px 35px 10px 22px; transition: background-color .5s linear; font-size:1rem; position:relative; }
.btn-custom::before { position: absolute; background-image:url('./icons/arrow-right-short-w.svg'); background-repeat:no-repeat; width:20px; height:20px; right:10px; top:10px; color:#fff; content: ""; }
.btn-custom:hover,.btn-custom:focus,.btn-custom:active { background-color:#a60f64; color:#fff; }

.admin-bar div.navigation-menu { top:31px; }
div.navigation-menu { position:absolute; right:auto; left:0; top:0; width:100%; background-color:#fff; border-bottom:1px solid #eee; }
div.navigation-menu > .container { padding: 24px 30px 12px; }
div.navigation-menu .navigation-menu-items { display:flex; }
div.navigation-menu .navigation-logo { display:flex; margin-right:auto; align-items:center; }
div.navigation-menu .navigation-logo > a { margin-right:15px; }
div.navigation-menu .navigation-logo img { height:80px; }
div.navigation-menu .navigation-logo b { display:block; font-size: 30px; color:#ec0b8e; font-family: "Poppins-Light", sans-serif; font-weight:200; margin-top:10px; }
div.navigation-menu .navigation-logo span { display:block; line-height:2.5; margin-top:-5px; font-family: "Poppins-Light", sans-serif; font-weight:200; }
.navigation-cover+.banner-container, .navigation-cover+.content.banner-element { padding-top:116px; margin-top:0; }
.navigation-cover+.content { padding-top:150px; }
@media (max-width:1199px) { .banner-container h1, .content.banner-element h1 { font-size:2.8rem; } }
@media (max-width:782px) {
	.admin-bar div.navigation-menu { top:46px; }
	.navigation-cover + .banner-container, .navigation-cover + .banner-element { padding-top:135px; }
}
@media (max-width:576px) { .navigation-cover + .banner-container, .navigation-cover + .banner-element { padding-top:92px; } }

.navigation-menu .navigation-menu-items > .navi-toggler { display:inline-flex; }
.navigation-menu .navigation-menu-items > .navi-toggler > .navi-button { margin: auto 0; }
.navigation-menu .navi-toggler { margin-left:auto; }
.navigation-menu .navi-toggler .navi-button { border-radius:100%; background-color:#000; width:auto; height:auto; position:relative; padding:11px 8px; transition: padding 0.3s linear; }
.navigation-menu .navi-toggler .navi-button:hover { background-color:#ec0b8e; }
.navigation-menu .navi-toggler .navi-button .navi-button-segments { width: 24px; height: 18px; position:relative; transition:width 0.3s linear; }
.navigation-menu .navi-toggler .navi-button .button-segment { position:absolute; width:50%; height:50%; transition: transform 0.3s linear, width 0.3s ease-in; }
.navigation-menu .navi-toggler .navi-button .button-segment.segment-topleft { left:0; top:0; transform-origin: top left; border-top:2px solid #ffffff; }
.navigation-menu .navi-toggler .navi-button .button-segment.segment-topright { right:0; top:0; transform-origin: top right; border-top:2px solid #ffffff; }
.navigation-menu .navi-toggler .navi-button .button-segment.segment-bottomright { bottom:0; right:0; transform-origin: bottom right; border-bottom:2px solid #ffffff; }
.navigation-menu .navi-toggler .navi-button .button-segment.segment-bottomleft { bottom:0; left:0; transform-origin: bottom left; border-bottom:2px solid #ffffff; }
.navigation-menu .navi-toggler .navi-button .button-segment.segment-centerleft { top:calc(50% - 1px); height:2px; right:50%; background-color:#ffffff; }
.navigation-menu .navi-toggler .navi-button .button-segment.segment-centerright { top:calc(50% - 1px); height:2px; left:50%; background-color:#ffffff; }
.nav-visible .navigation-menu .navi-toggler .navi-button { height:40px; padding: 11px 11.5px; }
.nav-visible .navigation-menu .navi-toggler .navi-button .navi-button-segments { width: 17px; }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-topleft,.nav-visible .navi-toggler .navi-button .button-segment.segment-topright { width: 70.71%; }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-bottomleft,.nav-visible .navi-toggler .navi-button .button-segment.segment-bottomright { width: 70.71%; }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-topleft { transform:rotate(45deg); }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-topright { transform:rotate(-45deg); }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-bottomleft { transform:rotate(-45deg); }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-bottomright { transform:rotate(45deg); }
.nav-visible .navigation-menu .navi-toggler .navi-button .button-segment.segment-centerleft,.nav-visible .navi-toggler .navi-button .button-segment.segment-centerright { width:0; }

.navigation-container.navigation-container2 { position:fixed; left:100%; top:0; opacity:0; visibility:hidden; height:100%; width:100%; display:flex; justify-content:center; align-items:center; background-color:#fff; transition: opacity 0.6s, visibility 0.6s; }
.navigation-container.navigation-container2 ul { padding-left:0; text-align:center; }
.navigation-container.navigation-container2 li > a { color:#ec0b8e; font-size:1.5rem; text-decoration:none; position:relative; transition: background-color .5s linear; padding:0.25rem; }
.navigation-container.navigation-container2 li > a::before { position: absolute; background-image:url('./icons/arrow-right-short.svg'); background-repeat:no-repeat; width:20px; height:20px; left:-20px; top:8px; color:#fff; content: ""; }
.navigation-container.navigation-container2 li > a { color:#ec0b8e; font-size:1.5rem; }
.navigation-container.navigation-container2 li > a:hover, .navigation-container.navigation-container2 li > a:focus,.navigation-container.navigation-container2 li > a:active { background-color:#ec0b8e; }
.nav-visible .navigation-container.navigation-container2 { opacity:1; left:0; }
.nav-visible .navi-toggler-container { position:fixed; }
.nav-visible div.navigation-menu { position:fixed; }

.banner-container { position:relative; }
.banner-container .silhouette { position:absolute; bottom:0; width:100%; padding-top:25%; z-index:10; }
.banner-container .silhouette > img { position:absolute; top:0; left:50px; height:100%; }
.banner-container .waves.top { position:absolute; width:100%; z-index:10; top:-2px; overflow:hidden; transform-origin:50% 0; transform:rotateY(180deg); }
.banner-container .waves > img { width: calc(100% + 4px); position:relative; left:-2px; }
.banner-container .waves.bottom { position:absolute; width:100%; bottom:-2px; z-index:10; transform-origin:50% 50%; transform:rotateX(180deg) rotateY(180deg); }

.banner-element > .container > .row { align-items: center; }

.col-content_highlights div.content-highlight-container { box-shadow: 0 0; display:flex; column-gap:20px; }
.col-content_highlights div.content-highlight-container > .content-highlight-image { width:18%; }
.col-content_highlights div.content-highlight-container > .content-highlight-inner { width:82%; padding:0; text-align:left; }
.col-content_highlights div.content-highlight-container > .content-highlight-inner .ingress > p:last-child { margin-bottom:0; }
.col-content_highlights .row-highlights { row-gap: 1.5rem; }

.col-blog_highlights .row { row-gap:1rem; }
.col-blog_highlights { margin-bottom:1.5rem; }

.archive-blog { padding-top:10px; }
.archive-read-more { margin:1rem 0; }
.archive-title { margin:0.5rem 0; }

/*Alasivut*/
.wrapper .col-post_title h1 { font-size:8rem; }
/*
.col-text ul { list-style:none; padding:0; margin:0; }
.col-text ul li { position:relative; padding-left: 2.5rem; margin-bottom: 1.25rem; }
.col-text ul li::before { width: 1.5rem; height: 1.5rem; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: right center; margin-top: -.0625rem; position:absolute; left:0; top:0; background-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='18' height='18' rx='9' fill='%230ABF53' fill-opacity='0.1'/%3e%3cpath d='M12.0603 5.78792C12.2511 5.56349 12.5876 5.5362 12.8121 5.72697C13.0365 5.91774 13.0638 6.25432 12.873 6.47875L8.3397 11.8121C8.14594 12.04 7.80261 12.064 7.57901 11.8653L5.17901 9.73195C4.95886 9.53626 4.93903 9.19915 5.13472 8.979C5.33041 8.75885 5.66751 8.73902 5.88766 8.93471L7.88011 10.7058L12.0603 5.78792Z' fill='%230ABF53'/%3e%3c/svg%3e"); }
*/
/*etusivu*/


.banner-container h1, body.archive .content-6_6 h1 { margin:1rem 0; font-size:3rem; }
.banner-container .subtitle, body.archive .subtitle { font-family: "Poppins-Light", sans-serif; font-weight:300; font-size:1.5rem; line-height:1.25; }
.banner-container .subtitle span, body.archive .subtitle span { font-family: "Poppins-Regular", sans-serif; font-weight:400; }

.footer-container { border-top:1px solid #eee; margin-top:2rem; padding:4rem; text-align:center; color:#777; }

/*Palvelut*/
body.page-id-543 {}
body.page-id-543 .content-3-6-3 img { max-width:120px; height:auto; }
body.page-id-543 h2 { font-family: "Poppins-Regular", sans-serif; font-weight:400; margin-bottom:1rem; }
body.page-id-543 .col-text ul {}

/*blog*/
.single-blog h2.wp-block-heading { margin:2rem 0 1rem 0; }
.single-blog .content-3-6-3 > .container { background-image:url('./images/piste-elementti.png'); background-position:left top; background-repeat:no-repeat; }

.footer-element .has-col-image:first-child { padding-right:0; }
.footer-element .has-col-image:last-child { padding-left:0; }
.footer-element .has-col-text { padding: 80px 65px; background-color: #ec0b8e; color:#fff; background-image:url('./images/pisteet-lapinakyva.png'); background-repeat:no-repeat; background-position:right bottom; }
.footer-element .has-col-text p:last-child { margin-bottom:0; }
.footer-element .has-col-text .col-text > * { color:#fff; }
.footer-element .has-col-text .btn-custom { background-color: #fff; color:#ec0b8e; }
.footer-element .has-col-text .btn-custom:hover,.footer-element .has-col-text .btn-custom:focus,.footer-element .has-col-text .btn-custom:active { background-color: #fff; color:#a60f64; }
.footer-element .has-col-text a { color:#fff; }

@media (min-width:992px) {
	.banner-container .silhouette { padding-top:20%; }
}
@media (min-width:577px) {
	h1 span { display:block; }
	.element-left .container, .element-right .container { padding:10rem 2rem; background-repeat:no-repeat; }
	.element-left .container { background-image:url('./images/piste-elementti.png'); background-position:left top; }
	.element-right .container { background-image:url('./images/piste-elementti-o.png'); background-position:right top; }	
}
@media (max-width:576px) {
	div.navigation-menu .navigation-logo img { height:40px; }
	div.navigation-menu .navigation-logo b { font-size:18px; }
	div.navigation-menu .navigation-logo span { display:none; }
	
	.banner-container { margin-top:50px; }
	.banner-container h1, body.archive .content-6_6 h1 { margin:1rem 0; font-size:2rem; }
	.banner-container .subtitle, body.archive .subtitle { font-family: "Poppins-Light", sans-serif; font-weight:300; font-size:1rem; }
	.banner-container .subtitle span, body.archive .subtitle span { font-family: "Poppins-Regular", sans-serif; font-weight:400; }
	
	.btn-custom { margin-bottom:2rem; }
	
	.element-left .container, .element-right .container { margin:4rem 0; }
	.footer-element .has-col-text { padding:60px 40px; }
}