/*
Theme Name: TKI-polku
Theme URI: https://viuleva.fi/
Author: Viuleva
Author URI: https://viuleva.fi/
Description: TKI-Polulle tehty WordPress-teema
Version: 1.0
Text Domain: tkipolku
*/

:root {
	--musta: #000000;
	--valkoinen: #FFFFFF;
	--oranssi: #FF7B00;
	--ruskea: #815839;
	--vaaleanruskea: #AD4812;
	--beige: #F2ECE6;
}

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

blockquote {
	quotes: '"' '"' '"' '"';
	font-style: italic;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}

.alignleft {
    float: left;
    margin: 0.3em 2em 2em 0;
}

.aligncenter {
	display: block;
	margin: 2em auto;
}

.alignright {
    float: right;
    margin: 0.3em 0 2em 2em;
}

.wp-caption-text {
    font-size: 0.9em;
    font-style: italic;
    margin-top: 0.25em;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


html, body {
	margin: 0;
	font-size: 20px;
	color: var(--ruskea);
}

body {
	background-color: #fff;
	background-color: var(--valkoinen);
}

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

body {
	font-family: "Roboto", serif;
	/*font-optical-sizing: auto;*/
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

.kehys {
	width: 1720px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

.rivi {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.solu {
	display: block;
	box-sizing: border-box;
}

.solu12 {
	width: 100%;
}

.solu11 {
	width: calc(100% / 12 * 11);
}

.solu10 {
	width: calc(100% / 1.2);
}

.solu9 {
	width: 75%;
}

.solu8 {
	width: calc(100% / 1.5);
}

.solu7 {
	width: calc(100% / 12 * 7);
}

.solu6 {
	width: 50%;
}

.solu5 {
	width: calc(100% / 2.4);
}

.solu4 {
	width: calc(100% / 3);
}

.solu3 {
	width: 25%;
}

.solu2 {
	width: calc(100% / 6);
}

.solu1 {
	width: calc(100% / 12);
}

.ylavalikko.kehys {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.300rem;
    margin-bottom: 0.700rem;
    position: relative;
}

a.paalogo img, a.elylogo img {
    display: block;
}

a.paalogo span, a.elylogo span {
    display: none !important;
}

a.paalogo {
    display: block;
    width: 9.850rem;
    max-width: 20%;
}

a.elylogo {
    display: block;
    width: 14.500rem;
    max-width: 20%;
    margin-left: 4.5rem;
}

.navigaatio_wrapper {
    display: block;
    width: calc(100% - 28.85rem);
    box-sizing: border-box;
    padding-left: 4.5rem;
    font-size: 1.2rem;
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	color: var(--oranssi);
	margin: 4rem 0 3.4rem 0;
}

.bg_oranssi h1,
.bg_oranssi h2,
.bg_oranssi h3,
.bg_oranssi h4,
.bg_oranssi h5,
.bg_oranssi h6 {
	color: var(--valkoinen);
}

.bg_beige h1,
.bg_beige h2,
.bg_beige h3,
.bg_beige h4,
.bg_beige h5,
.bg_beige h6 {
	color: var(--ruskea);
}

.bg_vaaleanruskea h1,
.bg_vaaleanruskea h2,
.bg_vaaleanruskea h3,
.bg_vaaleanruskea h4,
.bg_vaaleanruskea h5,
.bg_vaaleanruskea h6 {
	color: var(--valkoinen);
}

a {
    text-decoration: none;
    color: var(--oranssi);
    transition: 0.25s color;
}

nav.paavalikko ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}

nav.paavalikko a {
    font-weight: 700;
    display: block;
    margin-left: 2.950rem;
}

ul.sub-menu {
    display: none !important;
}

nav.paavalikko a:hover {
    color: var(--ruskea);
}

body.home {
    background: url(kuvat/etusivukuvio.svg);
    background-position: right top;
    background-repeat: no-repeat;
}

.hero.kehys {
    display: flex;
    align-items: center;
    margin-bottom: 14.000rem;
}

.hero_oikea {
    display: block;
    width: 628px;
    max-width: 50%;
    box-sizing: border-box;
}

.hero_oikea_kuva {
    display: block;
    padding-top: 100%;
    position: relative;
}

.hero_oikea_kuva > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.hero_vasen {
    display: block;
    width: calc(100% - 628px);
    padding: 5rem 5rem 0 0;
    box-sizing: border-box;
}

h1 {
    font-size: 4.250rem;
    line-height: 1.200em;
}

.asiakaskokemus  > *:first-child,
footer.alapalkki.kehys > *:first-child,
.bg_vaaleanruskea .kehys > *:first-child,
.bg_beige > .kehys > *:first-child,
.bg_oranssi > .kehys > *:first-child,
.hero_vasen > *:first-child {
	margin-top: 0;
}

.asiakaskokemus > *:last-child,
footer.alapalkki.kehys > *:last-child,
.bg_vaaleanruskea .kehys > *:last-child,
.bg_beige > .kehys > *:last-child,
.bg_oranssi > .kehys > *:last-child,
.hero_vasen > *:last-child {
	margin-bottom: 0;
}

h2 {
    font-size: 2.750rem;
}

.kehys.kapea {
    width: 1300px;
}

.tekstiosio p {
    font-size: 1.2rem;
}

p {
    line-height: 1.500em;
    margin: 1.5rem 0;
}

.tekstiosio > h2 {
    padding-left: 6rem;
    padding-right: 6rem;
}

.tekstiosio {
    margin-bottom: 12.350em;
}

.hanke_kuvake {
    display: inline-block;
    margin-top: -115px;
    background: var(--valkoinen);
    width: 67.37%;
    padding-top: 67.37%;
    position: relative;
    margin-bottom: 2.2rem;
}

.upotukset {
    display: grid;
    gap: 2.700rem;
}

.upotukset.kolme {
    grid-template-columns: repeat(3, 1fr);
}

.upotukset.nelja {
    grid-template-columns: repeat(4, 1fr);
}

article.upotus.hanke {
    display: block;
    border: 2px solid var(--oranssi);
    text-align: center;
    padding: 0 2.5rem 2rem 2.5rem;
    margin-top: 115px;
}

.tavoitteet.kehys {
    width: 1448px;
    margin-bottom: 10rem;
}

.hanke_kuvake > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
    object-position: center;
}

.hanke h3 {
    font-size: 1rem;
    color: var(--ruskea);
    margin: 0;
}

.isokuva.kehys {
    display: flex;
    position: relative;
    align-items: center;
    width: 1920px;
    padding-left: 0;
    padding-right: 0;
    margin-left: -102px;
    max-width: calc(100% + 102px);
    margin-bottom: 10.700rem;
}

.isokuva_kuva {
    display: block;
    position: relative;
    width: 42.2%;
    box-sizing: border-box;
}

.nelio_wrapper_ympyra {
    display: block;
    padding-top: 100%;
    position: relative;
    width: 100%;
}

.nelio_wrapper_ympyra > img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.isokuva_teksti {
    display: block;
    width: 57.8%;
    box-sizing: border-box;
    padding: 0 10.5rem 0 6.3rem;
}

span.preotsikko {
    display: block;
    font-size: 1.750rem;
    font-weight: 700;
    color: var(--oranssi);
    margin-top: 0;
    margin-bottom: 0;
}

span.preotsikko + * {
    margin-top: 1rem;
}

input.wpcf7-form-control.wpcf7-submit.nappula,
.nappula {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--valkoinen);
    background: var(--vaaleanruskea);
    padding: 0.8rem 1.372rem;
    transition: 0.25s background, 0.25s color;
    cursor: pointer;
    font-family: "Roboto", serif;
    /*font-optical-sizing: auto;*/
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    border: 0;
}

input.wpcf7-form-control.wpcf7-submit.nappula:hover,
.nappula:hover {
    background: var(--oranssi);
    color: var(--valkoinen);
}

.bg_oranssi a.nappula:hover {
    background: var(--valkoinen);
    color: var(--oranssi);
}

.bg_oranssi {
    background: var(--oranssi);
    color: var(--valkoinen);
    padding: 7rem 0;
}

.bg_oranssi .upotukset.kolme {
    gap: 5.5rem;
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.bg_oranssi .upotus {
    display: block;
    padding: 1rem;
    text-align: center;
}

.upotus.artikkeli img {
    display: block;
    width: 100%;
    /* height: 100%; */
    aspect-ratio: 1 / 1;
}

a.artikkelikuva {
    display: block;
}

.arkisto .upotus h3,
.bg_oranssi .upotus h3 {
    font-size: 1.750rem;
    margin-top: 0;
    margin-bottom: 0;
}

a.artikkeliotsikko {
    display: block;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.nappula.pieni {
    font-size: 1rem;
}

.nappula.lapinakyva {
    border: 2px solid var(--valkoinen);
    background: rgba(0,0,0,0);
}

.nappula.lapinakyva:hover {
    background: var(--valkoinen);
    color: var(--oranssi);
}

.bg_beige {
    background: var(--beige);
}

.bg_beige.seuraasomessa {
    display: block;
    padding: 6rem 0 7rem 0;
}

a.some_li {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    font-size: 1.25rem;
    color: #3E5D98;
    transition: 0.25s background, 0.25s color;
    background: url('data:image/svg+xml,<svg id="li" xmlns="http://www.w3.org/2000/svg" width="39.724" height="39.724" viewBox="0 0 39.724 39.724"><path id="Path_7" data-name="Path 7" d="M47.275,41.544V41.5s-.044.044,0,.044Z" transform="translate(-26.258 -23.06)" fill="%233e5d98"/><path id="Path_8" data-name="Path 8" d="M0,0V39.724H39.724V0ZM13.908,30.215H9.331V16.485h4.577ZM11.686,14.174a2.355,2.355,0,1,1,2.355-2.355A2.371,2.371,0,0,1,11.686,14.174ZM30.393,30.215H25.816V22.883c0-1.866-.667-3.11-2.311-3.11a2.544,2.544,0,0,0-2.355,1.688,2.939,2.939,0,0,0-.133,1.111v7.643H16.441s.044-12.441,0-13.73h4.577V18.44a4.562,4.562,0,0,1,4.132-2.266c3.022,0,5.243,1.955,5.243,6.176Z" fill="%233e5d98"/></svg>');
    background-size: auto 100% !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    padding-left: 52px;
    padding-top: 5px;
    padding-bottom: 5px;
}

a.some_li:hover {
	color: var(--ruskea);
	background: url('data:image/svg+xml,<svg id="li" xmlns="http://www.w3.org/2000/svg" width="39.724" height="39.724" viewBox="0 0 39.724 39.724"><path id="Path_7" data-name="Path 7" d="M47.275,41.544V41.5s-.044.044,0,.044Z" transform="translate(-26.258 -23.06)" fill="%233e5d98"/><path id="Path_8" data-name="Path 8" d="M0,0V39.724H39.724V0ZM13.908,30.215H9.331V16.485h4.577ZM11.686,14.174a2.355,2.355,0,1,1,2.355-2.355A2.371,2.371,0,0,1,11.686,14.174ZM30.393,30.215H25.816V22.883c0-1.866-.667-3.11-2.311-3.11a2.544,2.544,0,0,0-2.355,1.688,2.939,2.939,0,0,0-.133,1.111v7.643H16.441s.044-12.441,0-13.73h4.577V18.44a4.562,4.562,0,0,1,4.132-2.266c3.022,0,5.243,1.955,5.243,6.176Z" fill="%23815839"/></svg>');
}

.upotus.some {
    display: block;
    padding-top: 154%;
    background: var(--valkoinen);
}

.bg_beige .upotukset.nelja {
    gap: 0.8rem;
    margin-top: 6.5rem;
}

.bg_vaaleanruskea {
    background: var(--vaaleanruskea);
}

.asiakaskokemus {
    display: block;
    color: var(--valkoinen);
    text-align: center;
    font-size: 1.2rem;
    padding: 0;
}

p.pieni {
    font-size: 0.833em;
}

.asiakaskokemus p.pieni {
    margin-top: 4rem;
}

.bg_vaaleanruskea .kehys {
    padding: 6rem 2rem 5rem 2rem;
}

footer.alapalkki.kehys {
    padding-top: 6.5rem;
    padding-bottom: 7rem;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6rem;
    justify-content: center;
    margin: 7rem 0;
}

.gallery br {
    display: none;
}

dl.gallery-item {
    display: block;
    margin: 0;
    max-width: 25%;
    box-sizing: border-box;
}

.footnote p {
    margin: 0;
    text-align: center;
}

.bg_beige.footnote {
    display: block;
    padding: 1.4rem 1rem;
}

a:hover {
    color: var(--vaaleanruskea);
}

h1.paaotsikko {
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.75rem;
}

.kuvio {
    display: block;
    width: 2000px;
    max-width: 100%;
    margin-bottom: 12rem;
    margin-left: auto;
    margin-right: auto;
}

.kuvio img {
    display: block;
    width: 100%;
    height: auto;
}

.oletussisalto.kehys {
    width: 1415px;
}

.oletussisalto ul {
    margin: 0;
    padding: 0;
}

.tekstiosio.oletussisalto h2 {
    padding-left: 0;
    padding-right: 0;
}

.tekstiosio ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tekstiosio ul > li::before {
    content: '• ';
    display: inline;
}

.tekstiosio ul ul {
    padding-left: 1.5rem;
}

.tekstiosio ul li {
    display: block;
    margin: 0.5rem 0;
}

.tekstiosio.oletussisalto p {
    font-size: 1rem;
}

.tekstiosio h3 {
    font-size: 1.75rem;
    margin: 3rem 0 1rem 0;
}

.arkisto .upotukset article.upotus.artikkeli {
    display: block;
    text-align: center;
}

.arkisto_luelisaa {
    display: block;
    margin: 13rem 0 13.5rem 0;
}

.alapalkki .nappula {
    margin-top: 3.5rem;
}

.kehys.arkisto {
    width: 1750px;
}

a.artikkeliotsikko > * {
    color: inherit;
}

span.wpcf7-form-control-wrap {
    display: block;
    margin: 0.800rem 0;
}

span.wpcf7-form-control-wrap input,
span.wpcf7-form-control-wrap textarea {
    display: block;
    width: 100%;
    border: 0;
    font-size: 1rem;
    font-family: "Roboto", serif;
    /*font-optical-sizing: auto;*/
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    box-sizing: border-box;
    padding: 0.8084em 1.1em;
    border: 2px solid var(--oranssi);
}

span.wpcf7-form-control-wrap textarea {
    min-height: 299px;
}

.kokolevea span.wpcf7-form-control-wrap {
    width: 100%;
    margin: 14px 0;
}

.submit_wrapper {
    display: block;
    margin-top: 4.5rem;
    grid-column: 1 / -1;
    text-align: center;
}

.kokolevea span.wpcf7-form-control-wrap:first-child, .kokolevea span.wpcf7-form-control-wrap:last-child {
    margin: 0;
}

.oletussisalto.kehys.yhteystiedot {
    width: 1600px;
}

.wpcf7 {
    display: block;
    width: 1136px;
    max-width: 100%;
    margin: 0 auto;
}

.yhteystiedot .solu {
    padding: 0 1rem;
}

.yhteystiedot .solu p {
    margin: 0;
}

.yhteystiedot .rivi {
    margin-top: 4rem;
    margin-bottom: 12.300rem;
}

.bg_oranssi a.artikkeliotsikko {
    color: var(--valkoinen);
}

.bg_oranssi a.artikkeliotsikko:hover {
    color: var(--ruskea);
}

.arkisto .upotukset {
    gap: 8.850rem;
}

footer.alapalkki p {
    font-size: 1.2rem;
}

.tekstiosio a:hover {
    text-decoration: underline;
    color: var(--oranssi);
}

.slick-prev, .slick-next {
    width: 38px;
    height: 59px;
    z-index: 10;
    transition: 0.25s background;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1.0 !important;
}

.slick-prev,
.slick-prev:focus {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="61.676" viewBox="0 0 38.085 61.676"><path id="Path_40" data-name="Path 40" d="M46.085,13.247,38.838,6,8,36.838,38.838,67.676l7.247-7.247L22.545,36.838Z" transform="translate(-8 -6)" fill="%23fff"/></svg>');
}

.slick-next,
.slick-next:focus {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="61.676" viewBox="0 0 38.085 61.676"><path id="Path_42" data-name="Path 42" d="M15.837,6,8.59,13.247,32.129,36.838,8.59,60.429l7.247,7.247L46.675,36.838Z" transform="translate(-8.59 -6)" fill="%23fff"/></svg>');
}

.slick-prev:hover {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="61.676" viewBox="0 0 38.085 61.676"><path id="Path_40" data-name="Path 40" d="M46.085,13.247,38.838,6,8,36.838,38.838,67.676l7.247-7.247L22.545,36.838Z" transform="translate(-8 -6)" fill="%23FF7B00"/></svg>');
}

.slick-next:hover {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38.085" height="61.676" viewBox="0 0 38.085 61.676"><path id="Path_42" data-name="Path 42" d="M15.837,6,8.59,13.247,32.129,36.838,8.59,60.429l7.247,7.247L46.675,36.838Z" transform="translate(-8.59 -6)" fill="%23FF7B00"/></svg>');
}

.slick-next:before,
.slick-prev:before {
    display: none !important;
}

.slick-next {
    right: 0px;
}

.slick-prev {
    left: 0px;
}

.asiakaskokemuksia_slider {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 200px;
    padding-right: 200px;
    box-sizing: border-box;
}

.asiakaskokemuksia .kehys {
    width: 1800px;
}

.tekstiosio a {
    color: var(--ruskea);
    text-decoration: underline;
}

.invalid .wpcf7-response-output {
    display: block !important;
    margin: 2rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #780d0d !important;
    color: var(--valkoinen) !important;
    border: 0 !important;
    padding: 3rem 2rem !important;
    text-align: center !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    display: block !important;
    margin: 2rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #1f7727;
    color: var(--valkoinen) !important;
    border: 0 !important;
    padding: 3rem 2rem !important;
    text-align: center !important;
}

span.wpcf7-not-valid-tip {
    background: #780d0d;
    display: block;
    color: var(--valkoinen);
    padding: 0.5em 1.1em;
}

p.eituloksia {
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
}

.eapps-widget {
    margin-top: 5rem;
}

@media screen and (min-width: 2000px) {
    .isokuva.kehys {
        margin-left: auto;
        margin-right: auto;
    }

    body.home {
        background-position: calc(50% + 420px) top;
    }
}

@media screen and (max-width: 1700px) {
    .isokuva_teksti {
        width: 50%;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    
    .isokuva_kuva {
        width: 50%;
    }
}

@media screen and (max-width: 1500px) {
    html, body {
        font-size: 18px;
    }

    body.home {
        background-size: 65%;
    }

    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2rem;
    }

    .tekstiosio h3,
    span.preotsikko,
    .arkisto .upotus h3,
    .bg_oranssi .upotus h3 {
        font-size: 1.5rem;
    }
    
    .isokuva_teksti {
        width: 60%;
    }
    
    .isokuva_kuva {
        width: 40%;
    }

    .hero_oikea {
        width: 40%;
    }
    
    .hero_vasen {
        width: 60%;
        padding-top: 2rem;
    }

    a.elylogo {
        margin-left: 2rem;
    }
    
    .navigaatio_wrapper {
        width: calc(100% - 26.35rem);
        padding-left: 2rem;
    }
    
    nav.paavalikko a {
        margin-left: 1.8rem;
    }

    .gallery {
        gap: 3rem;
    }
    
    dl.gallery-item {
        max-width: 22%;
    }

    .asiakaskokemuksia_slider {
        padding-left: 100px;
        padding-right: 100px;
    }
}

@media screen and (max-width: 1200px) {
    html,
    body {
        font-size: 16px;
    }

    a.paalogo {
        width: 18%;
    }

    a.elylogo {
        width: 18%;
        margin-left: 7%;
    }

    nav.paavalikko {
        width: 100%;
    }

    .tavoitteet.kehys,
    .isokuva.kehys,
    .hero.kehys, .tekstiosio {
        margin-bottom: 8rem;
    }

    .asiakaskokemus p.pieni {
        margin-top: 3rem;
    }

    .bg_beige .upotukset.nelja,
    .gallery {
        margin-top: 4rem;
    }

    .bg_oranssi .upotukset.kolme {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    footer.alapalkki.kehys,
    .bg_vaaleanruskea .kehys,
    .bg_beige.seuraasomessa,
    .bg_oranssi {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
        
    .yhteystiedot .solu.solu3 {
        width: 50%;
        margin: 2rem 0;
    }

    .asiakaskokemuksia_slider {
        padding-left: 70px;
        padding-right: 70px;
    }
}

@media screen and (min-width: 1001px) {
    .mobile_nav_toggle {
        display: none !important;
    }

    nav.paavalikko {
        display: block !important;
    }
}

@media screen and (max-width: 1000px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 2rem 0 1rem 0;
    }
    
    .tekstiosio h3,
    span.preotsikko,
    .arkisto .upotus h3,
    .bg_oranssi .upotus h3 {
        font-size: 1.3rem;
    }
    
    a.some_li,
    .nappula,
    .navigaatio_wrapper {
        font-size: 1.1rem;
    }

    .asiakaskokemus {
        font-size: 1rem;
    }

    .mobile_nav_toggle {
		display: block;
		width: 29px;
		margin-left: 0;
		box-sizing: border-box;
		cursor: pointer;
		padding: 5px 0px;
	}

	.viiva1, .viiva2, .viiva3 {
		width: 29px;
		height: 5px;
		background-color: var(--oranssi);
		margin: 6px 0;
		transition: 0.4s;
	}

	.avattu .viiva1 {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-8px, 7px);
	}

	.avattu .viiva2 {
		opacity: 0;
	}

	.avattu .viiva3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -8px);
	}
        
    .ylavalikko.kehys {
        flex-wrap: wrap;
    }

    nav.paavalikko {
        width: 100%;
        padding-left: 0;
        display: flex;
        justify-content: flex-end;
    }

    a.paalogo {
        width: 130px;
        max-width: unset;
    }

    a.elylogo {
        width: 30%;
        max-width: 30%;
        margin-left: 5%;
    }

    nav.paavalikko {
        display: none;
        text-align: right;
        background: var(--oranssi);
        padding: 0.5rem 1rem;
        box-sizing: border-box;
        width: 200px;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 10000;
    }

    nav.paavalikko a {
        margin: 0;
        padding: 0.5rem 0;
        color: var(--valkoinen);
    }

    nav.paavalikko ul {
        display: block;
    }

    .navigaatio_wrapper {
        width: 29px;
        margin-left: calc(35% - 29px);
        padding: 0;
    }
    
    .upotukset.kolme {
        display: block;
    }
    
    article.upotus.hanke {
        width: 400px;
        max-width: 100%;
        margin: 7rem auto 0 auto;
        box-sizing: border-box;
    }
    
    .isokuva.kehys {
        display: block;
        margin-left: 0;
        padding-left: 2rem;
        padding-right: 2rem;
        width: 100%;
        max-width: 100%;
    }
    
    .isokuva_kuva {
        width: 400px;
        max-width: 80%;
        margin: 0 auto 4rem auto;
    }
    
    .isokuva_teksti {
        width: 100%;
        padding: 0;
        text-align: center;
    }
    
    .bg_oranssi .upotus {
        width: 400px;
        max-width: 100%;
        margin: 2rem auto;
        box-sizing: border-box;
    }
    
    .upotukset.nelja {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .upotus.some {
        display: none;
    }
    
    .upotus.some:nth-of-type(1),
    .upotus.some:nth-of-type(2),
    .upotus.some:nth-of-type(3),
    .upotus.some:nth-of-type(4) {
        display: block;
    }
    
    .gallery {
        gap: 3rem;
    }
    
    dl.gallery-item {
        max-width: 18%;
    }

    .hero_vasen {
        padding-top: 0rem;
    }

    .tekstiosio > h2 {
        padding-left: 0;
        padding-right: 0;
    }

    .hanke_kuvake {
        margin-top: -40%;
    }

    .tavoitteet.kehys,
    .isokuva.kehys,
    .hero.kehys, .tekstiosio {
        margin-bottom: 4rem;
    }

    .asiakaskokemus p.pieni {
        margin-top: 2rem;
    }

    .bg_beige .upotukset.neljay {
        margin-top: 3rem;
    }

    .gallery {
        margin-top: 5rem;
    }

    .bg_oranssi .upotukset.kolme {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    footer.alapalkki.kehys,
    .bg_beige.seuraasomessa,
    .bg_oranssi {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .bg_vaaleanruskea .kehys {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .kuvio {
        margin-bottom: 6rem;
    }
    
    .arkisto .upotukset article.upotus.artikkeli {
        width: 400px;
        margin: 5rem auto;
        max-width: 100%;
    }
    
    .arkisto_luelisaa {
        margin: 5rem 0;
    }
    
    .alapalkki .nappula {
        margin-top: 1rem;
    }

    a.artikkeliotsikko {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
        
    .yhteystiedot .rivi {
        margin-top: 0rem;
        margin-bottom: 5rem;
    }
        
    .slick-prev, .slick-next {
        width: 19px;
        height: 30px;
    }

    .asiakaskokemuksia_slider {
        padding-left: 40px;
        padding-right: 40px;
    }
        
    .isokuva_teksti a.nappula {
        margin-top: 2rem;
    }
	
	.eapps-widget {
    	margin-top: 3rem;
	}
}

@media screen and (max-width: 700px) {
    .hero.kehys {
        flex-direction: column-reverse;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 2rem;
    }
    
    .hero_oikea {
        width: 600px;
        max-width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
        position: relative;
    }
    
    .hero_vasen {
        width: 100%;
        padding: 3rem 0 0 0;
        text-align: center;
    }
    
    .ylavalikko.kehys {
        margin-bottom: 2rem;
    }
        
    a.elylogo {
        width: 180px;
        margin-left: 20px;
        max-width: unset;
    }

    .navigaatio_wrapper {
        margin-left: calc(100% - 359px);
    }

    dl.gallery-item {
        max-width: 40%;
    }

    .yhteystiedot .solu.solu3 {
        width: 100%;
        margin: 1rem 0;
    }

    .asiakaskokemuksia h2 {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 600px) {
    body.home {
        background: var(--valkoinen);
    }

    .home .hero_oikea {
        background: url(kuvat/alasivukuvio.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding-bottom: 12%;
    }
}

@media screen and (max-width: 470px) {
    a.paalogo {
        width: 100px;
    }

    a.elylogo {
        width: 130px;
        margin-left: 20px;
    }

    .navigaatio_wrapper {
        margin-left: calc(100% - 279px);
    }
}

@media screen and (max-width: 400px) {
    a.paalogo {
        width: 30%;
    }

    a.elylogo {
        width: 30%;
        margin-left: 20px;
    }

    .navigaatio_wrapper {
        margin-left: calc(40% - 49px);
    }

    .ylavalikko.kehys {
        min-height: 100px;
    }
}

@media screen and (max-width: 350px) {
    .hero_vasen {
        padding: 3rem 0 0 0;
    }
}