:root {
	--tumma: #41150D;
	--ruskea: #7B2910;
	--vali: #F9C4A0;
	--vaalea: #FDE7DD;
	--musta: #000000;
	--valkoinen: #FFFFFF;
}

html, body {
	margin: 0;
	font-size: 20px;
}

body {
	font-family: "Bricolage Grotesque", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
	color: var(--ruskea);
    /*-webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;*/
}

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

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

header.etusivu_hero {
    background-color: var(--ruskea);
    color: var(--vaalea);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(images/hero_kuvio.svg);
    background-position: center left calc(50% - 415px);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

nav.paavalikko ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 1.3rem;
}

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

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

nav.paavalikko ul a {
    color: var(--vali);
    text-transform: uppercase;
    font-weight: 800;
}

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

nav.paavalikko {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.paavalikko > .kehys {
    width: 1920px;
    max-width: 100%;
    padding-left: 3.600rem;
    padding-right: 3.600rem;
    box-sizing: border-box;
    margin-top: 2.800rem;
}

img.etusivu_kuva {
    display: block;
    padding-right: 5.700rem;
    width: 797px;
    box-sizing: border-box;
    max-width: 50%;
}

.bg_vaalea {
    background: var(--vaalea);
    color: var(--tumma);
}

main.paasisalto {
    display: block;
    padding-top: 9.800rem;
    padding-bottom: 10.300rem;
}

h1, h2 {
    font-size: 2.5rem;
    line-height: 1.300em;
}

h1.iso_otsikko {
    display: flex;
    align-items: center;
    min-height: 215px;
    background: url(images/ikoni_iso_otsikko.svg);
    background-size: auto 100%;
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 4.780em;
    margin-bottom: 3.780em;
}

h2.koko3, h3 {
    font-size: 1.400rem;
    line-height: 1.286em;
    margin-top: 2.857em;
    margin-bottom: 1.536em;
}

p {
    font-size: 1rem;
    line-height: 1.750em;
    margin: 2.1em 0;
}

p a {
    font-weight: 600;
}

.nappula {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.750em;
    background-color: var(--ruskea);
    color: var(--vaalea);
    padding: 0.45em 3.3166em 0.45em 1.7166em;
    border-radius: 7px;
    background-image: url(images/arrow_right_vaalea.svg);
    background-size: auto 0.900em !important;
    background-position: center right 1.3em !important;
    background-repeat: no-repeat !important;
    transition: 0.25s background;
    font-weight: 800;
    margin-right: 0.500em;
    margin-bottom: 1rem;
}

.nappula:hover {
    color: var(--vaalea);
    background-color: var(--tumma);
}

p+p > .nappula {
    margin-top: 2.300em;
}

.bg_ruskea {
    background: var(--ruskea);
    color: var(--vali);
}

.sisalto_osio > .kehys {
    display: block;
    padding-top: 8.350rem;
    padding-bottom: 9.600rem;
    position: relative;
}

.bg_ruskea h1, .bg_ruskea h2, .bg_ruskea h3, .bg_ruskea h4, .bg_ruskea h5 {
    color: var(--vali);
}

.sisalto_osio > .kehys > *:first-child,
.yhteydessa_rajaus > *:first-child,
.tutustu_rajaus > *:first-child {
    margin-top: 0;
}

.sisalto_osio > .kehys > *:last-child,
.yhteydessa_rajaus > *:last-child,
.tutustu_rajaus > *:last-child {
    margin-bottom: 0;
}

.bg_ruskea .nappula {
    background-color: var(--vali);
    color: var(--ruskea);
    background-image: url(images/arrow_right_ruskea.svg);
}

.bg_ruskea .nappula:hover {
    background-color: var(--vaalea);
}

.kuvio_bg_ruskea::after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: -3.150rem;
	bottom: 0;
	background-image: url(images/kuvio_bg_ruskea.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: right center;
	z-index: 0;
}

.sisalto_osio > .kehys > * {
    z-index: 1;
    position: relative;
}

img.tutustu_kuva {
    display: block;
    position: absolute !important;
    bottom: -205px;
    right: -30px;
    width: 646px;
}

img.yhteydessa_kuva {
    display: block;
    position: absolute !important;
    bottom: 0;
    right: -30px;
    width: auto;
    height: calc(100% - 50px);
}

.bg_vali {
    background: var(--vali);
    color: var(--ruskea);
}

.blogitekstit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7.7rem;
    margin-top: 5rem;
    margin-bottom: 5.450rem;
}

article.yksi_blogiteksti h2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

a.luelisaa {
    display: inline-block;
    min-height: 12px;
    padding-right: 1.5rem;
    font-weight: 600;
    transition: 0.25s background, 0.25s color;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24.99" height="18.186" viewBox="0 0 24.99 18.186"><path id="arrow_right_alt" d="M180.891-700.694h-19.7a1.159,1.159,0,0,1-.856-.338,1.159,1.159,0,0,1-.338-.855,1.159,1.159,0,0,1,.338-.856,1.16,1.16,0,0,1,.856-.338h19.7L175-708.971a1.078,1.078,0,0,1-.338-.836,1.221,1.221,0,0,1,.378-.836,1.145,1.145,0,0,1,.836-.358,1.145,1.145,0,0,1,.836.358l7.919,7.919a1.213,1.213,0,0,1,.279.4,1.168,1.168,0,0,1,.08.438,1.168,1.168,0,0,1-.08.438,1.214,1.214,0,0,1-.279.4l-7.879,7.879a1.146,1.146,0,0,1-.836.358,1.146,1.146,0,0,1-.836-.358,1.168,1.168,0,0,1-.358-.856,1.168,1.168,0,0,1,.358-.856Z" transform="translate(-160 711)" fill="%237B2910"/></svg>');
    background-size: auto 12px !important;
    background-repeat: no-repeat !important;
    background-position: center right !important;
}

a.luelisaa:hover {
    color: var(--tumma);
    background: url(
    'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24.99" height="18.186" viewBox="0 0 24.99 18.186"><path id="arrow_right_alt" d="M180.891-700.694h-19.7a1.159,1.159,0,0,1-.856-.338,1.159,1.159,0,0,1-.338-.855,1.159,1.159,0,0,1,.338-.856,1.16,1.16,0,0,1,.856-.338h19.7L175-708.971a1.078,1.078,0,0,1-.338-.836,1.221,1.221,0,0,1,.378-.836,1.145,1.145,0,0,1,.836-.358,1.145,1.145,0,0,1,.836.358l7.919,7.919a1.213,1.213,0,0,1,.279.4,1.168,1.168,0,0,1,.08.438,1.168,1.168,0,0,1-.08.438,1.214,1.214,0,0,1-.279.4l-7.879,7.879a1.146,1.146,0,0,1-.836.358,1.146,1.146,0,0,1-.836-.358,1.168,1.168,0,0,1-.358-.856,1.168,1.168,0,0,1,.358-.856Z" transform="translate(-160 711)" fill="%2341150D"/></svg>');
}

.tutustu_rajaus {
    display: block;
    padding-right: 450px;
}

.yhteydessa_rajaus {
    padding-right: 550px;
}

.yhteydessa_rajaus a.nappula {
    margin-top: 1rem;
}

.sisalto_osio.yhteystiedot {
    background: var(--vaalea);
    background: linear-gradient(90deg, var(--vaalea) 0%, var(--vaalea) 50%, var(--valkoinen) 50%, var(--valkoinen) 100%);
}

.yhteystiedot > .kehys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.yhteystiedot_vasen {
    display: block;
    padding-right: 200px;
}

.yhteystiedot_oikea {
    display: block;
    position: relative;
    padding-left: 200px;
    text-align: right;
}

img.yhteystiedot_kuva {
    display: block;
    width: 346px;
    max-width: 100%;
}

.yhteystiedot h2.koko3 {
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}

.yhteystiedot > .kehys::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 150px);
    width: 300px;
    bottom: 0;
    height: 100%;
    background: url(images/kuvio_footer_jakaja.svg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
}

a.some {
    display: flex;
    font-weight: 600;
    min-height: 2.050rem;
    align-items: center;
    padding-left: 2.750rem;
    background: url(images/ikoni_li.svg);
    background-size: 2.050rem 2.050rem !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    margin-bottom: 0.600rem;
    transition: 0.25s background, 0.25s color;
}

a.some.some_li {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41.195" height="41.195" viewBox="0 0 41.195 41.195"><path id="linkedin" d="M22.6,2A20.6,20.6,0,1,0,43.2,22.6,20.587,20.587,0,0,0,22.6,2ZM17.629,31.136H13.481V18.69h4.148ZM15.651,16.568a2.122,2.122,0,1,1,2.122-2.122A2.141,2.141,0,0,1,15.651,16.568ZM32.583,31.136H28.435V24.479c0-1.688-.579-2.8-2.074-2.8a2.276,2.276,0,0,0-2.122,1.544,3.672,3.672,0,0,0-.145,1.013v6.946H19.945s.048-11.288,0-12.445h4.148v1.785a4.247,4.247,0,0,1,3.763-2.074c2.7-.048,4.727,1.737,4.727,5.547Z" transform="translate(-2 -2)" fill="%237b2910"/></svg>');
}

a.some.some_li:hover {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41.195" height="41.195" viewBox="0 0 41.195 41.195"><path id="linkedin" d="M22.6,2A20.6,20.6,0,1,0,43.2,22.6,20.587,20.587,0,0,0,22.6,2ZM17.629,31.136H13.481V18.69h4.148ZM15.651,16.568a2.122,2.122,0,1,1,2.122-2.122A2.141,2.141,0,0,1,15.651,16.568ZM32.583,31.136H28.435V24.479c0-1.688-.579-2.8-2.074-2.8a2.276,2.276,0,0,0-2.122,1.544,3.672,3.672,0,0,0-.145,1.013v6.946H19.945s.048-11.288,0-12.445h4.148v1.785a4.247,4.247,0,0,1,3.763-2.074c2.7-.048,4.727,1.737,4.727,5.547Z" transform="translate(-2 -2)" fill="%2341150D"/></svg>');
}

a.some.some_ig {
    background: url('data:image/svg+xml,<svg id="instagram" xmlns="http://www.w3.org/2000/svg" width="42.02" height="42.02" viewBox="0 0 42.02 42.02"><path id="Path_103" data-name="Path 103" d="M38.5,32.6a6,6,0,1,0,6,6A6,6,0,0,0,38.5,32.6Zm0,9.89A3.887,3.887,0,1,1,42.39,38.6,3.834,3.834,0,0,1,38.5,42.49Z" transform="translate(-17.493 -17.544)" fill="%237b2910"/><ellipse id="Ellipse_1" data-name="Ellipse 1" cx="1.329" cy="1.329" rx="1.329" ry="1.329" transform="translate(25.881 13.531)" fill="%237b2910"/><path id="Path_104" data-name="Path 104" d="M23.01,2A21.01,21.01,0,1,0,44.02,23.01,21,21,0,0,0,23.01,2ZM34.327,28.127a6.258,6.258,0,0,1-6.249,6.249H17.893a6.258,6.258,0,0,1-6.249-6.249V17.942a6.258,6.258,0,0,1,6.249-6.249H28.127a6.185,6.185,0,0,1,6.2,6.249Z" transform="translate(-2 -2)" fill="%237b2910"/></svg>');
}

a.some.some_ig:hover {
    background: url('data:image/svg+xml,<svg id="instagram" xmlns="http://www.w3.org/2000/svg" width="42.02" height="42.02" viewBox="0 0 42.02 42.02"><path id="Path_103" data-name="Path 103" d="M38.5,32.6a6,6,0,1,0,6,6A6,6,0,0,0,38.5,32.6Zm0,9.89A3.887,3.887,0,1,1,42.39,38.6,3.834,3.834,0,0,1,38.5,42.49Z" transform="translate(-17.493 -17.544)" fill="%237b2910"/><ellipse id="Ellipse_1" data-name="Ellipse 1" cx="1.329" cy="1.329" rx="1.329" ry="1.329" transform="translate(25.881 13.531)" fill="%237b2910"/><path id="Path_104" data-name="Path 104" d="M23.01,2A21.01,21.01,0,1,0,44.02,23.01,21,21,0,0,0,23.01,2ZM34.327,28.127a6.258,6.258,0,0,1-6.249,6.249H17.893a6.258,6.258,0,0,1-6.249-6.249V17.942a6.258,6.258,0,0,1,6.249-6.249H28.127a6.185,6.185,0,0,1,6.2,6.249Z" transform="translate(-2 -2)" fill="%2341150D"/></svg>');
}

a.some.some_ss {
    background: url('data:image/svg+xml,<svg id="Group_52" data-name="Group 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.02" height="42.02" viewBox="0 0 42.02 42.02"><defs><clipPath id="clip-path"><rect id="Rectangle_33" data-name="Rectangle 33" width="42.02" height="42.02" fill="%237b2910"/></clipPath></defs><g id="Group_39" data-name="Group 39" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_105" data-name="Path 105" d="M21.01,0A21.01,21.01,0,1,0,42.02,21.01,21,21,0,0,0,21.01,0m9.014,31.3-9.016-5.057L12,31.3V19.937H30.024Zm0-13.446H12V15.328H30.024Zm0-4.609H12V10.719H30.024Z" transform="translate(0 0)" fill="%237b2910"/></g></svg>');
}

a.some.some_ss:hover {
    background: url('data:image/svg+xml,<svg id="Group_52" data-name="Group 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42.02" height="42.02" viewBox="0 0 42.02 42.02"><defs><clipPath id="clip-path"><rect id="Rectangle_33" data-name="Rectangle 33" width="42.02" height="42.02" fill="%237b2910"/></clipPath></defs><g id="Group_39" data-name="Group 39" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_105" data-name="Path 105" d="M21.01,0A21.01,21.01,0,1,0,42.02,21.01,21,21,0,0,0,21.01,0m9.014,31.3-9.016-5.057L12,31.3V19.937H30.024Zm0-13.446H12V15.328H30.024Zm0-4.609H12V10.719H30.024Z" transform="translate(0 0)" fill="%2341150D"/></g></svg>');
}

a.some.some_tt {
    background: url('data:image/svg+xml,<svg id="tiktok" xmlns="http://www.w3.org/2000/svg" width="42.02" height="42.02" viewBox="0 0 42.02 42.02"><g id="OBJECTS"><path id="Path_275" data-name="Path 275" d="M21.01,0A21.01,21.01,0,1,0,42.02,21.01,21,21,0,0,0,21.01,0ZM31.737,18.894s-3.789-.148-5.806-1.968v8.266a11.99,11.99,0,0,1-.049,1.329,7.815,7.815,0,1,1-6.741-8.758v4.428a3.746,3.746,0,0,0-1.033-.148,3.444,3.444,0,1,0,3.444,3.444V8.709H25.93a5.776,5.776,0,0,0,5.806,5.9v4.33Z" fill="%237b2910"/></g></svg>');
}

a.some.some_tt:hover {
    background: url('data:image/svg+xml,<svg id="tiktok" xmlns="http://www.w3.org/2000/svg" width="42.02" height="42.02" viewBox="0 0 42.02 42.02"><g id="OBJECTS"><path id="Path_275" data-name="Path 275" d="M21.01,0A21.01,21.01,0,1,0,42.02,21.01,21,21,0,0,0,21.01,0ZM31.737,18.894s-3.789-.148-5.806-1.968v8.266a11.99,11.99,0,0,1-.049,1.329,7.815,7.815,0,1,1-6.741-8.758v4.428a3.746,3.746,0,0,0-1.033-.148,3.444,3.444,0,1,0,3.444,3.444V8.709H25.93a5.776,5.776,0,0,0,5.806,5.9v4.33Z" fill="%2341150D"/></g></svg>');
}

.kehys.kuvio_bg_ruskea {
    width: 1418px;
    padding-left: 7.1rem;
}

footer.alapalkki {
    display: block;
    background: var(--tumma);
    color: var(--vaalea);
    padding-top: 9.800rem;
    padding-bottom: 9.700rem;
}

.alapalkki_logo {
    width: 222px;
    display: block;
    max-width: 100%;
}

.alapalkki_logo img {
    display: block;
}

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

.alapalkki > .kehys {
    display: grid;
    grid-template-columns: 250px 1fr;
}

.alapalkki_oikea {
    display: block;
    padding-left: 5rem;
}

.alapalkki_linkkirivi {
    display: flex;
    justify-content: flex-end;
    gap: 1.300rem;
    margin-bottom: 1.200rem;
}

.alapalkki_linkkirivi a {
    color: var(--vaalea);
    font-weight: 600;
    min-height: 12px;
    padding-right: 1.25rem;
    font-weight: 600;
    transition: 0.25s background, 0.25s color;
    background: url(images/arrow_right_vali.svg);
    background-repeat: no-repeat !important;
    background-position: center right !important;
    background-size: auto 12px;
}

.alapalkki_linkkirivi a:hover {
    color: var(--vali);
}

.alapalkki_linkkirivi.ohut a {
    background: none;
    padding: 0;
    font-weight: 400;
}

.alapalkki_linkkirivi.ohut {
    margin-bottom: 0;
}

.etusivu_logo {
    display: block;
    max-width: 40%;
}

@media screen and (max-width: 1600px) {
    html, body {
        font-size: 18px;
    }
    
    .kuvio_bg_ruskea::after {
        right: 0;
    }
        
    img.tutustu_kuva {
        max-width: 46%;
        right: 0;
    }

    img.yhteydessa_kuva {
        right: 20px;
    }

    .etusivu_logo {
        display: block;
        max-width: 30%;
    }

    .sisalto_osio > .kehys,
    main.paasisalto {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    img.yhteydessa_kuva {
        height: calc(100% - 20px)
    }

    header.etusivu_hero {
        background-position: center left calc(50% - 315px);
    }
}

@media screen and (max-width: 1500px) {
    header.etusivu_hero {
        background-position: center left calc(50% - 250px);
    }
}

@media screen and (max-width: 1400px) {
    img.tutustu_kuva {
        bottom: unset;
        top: 20px;
        max-width: 43%;
    }

    .kehys.kuvio_bg_ruskea {
        width: 1234px;
        padding-left: 2.5rem;
    }
}

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

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

@media screen and (max-width: 1000px) {
    header.etusivu_hero {
        background-position: center left 15px;
        /* justify-content: space-between; */
        /* padding-left: 3rem; */
        /* padding-right: 6rem; */
        padding-top: 100px;
    }

    img.etusivu_kuva {
        padding-right: 3rem;
    }
        
    img.tutustu_kuva {
        top: -50px;
        height: calc(100% + 100px);
        width: auto;
        object-fit: contain;
        max-width: 52%;
    }

    .alapalkki > .kehys {
        display: block;
    }

    .alapalkki_logo {
        max-width: 60%;
        margin: 0 auto 5rem auto;
    }

    .alapalkki_oikea {
        padding-left: 0;
    }

    .alapalkki_linkkirivi {
        justify-content: center;
    }

    footer.alapalkki {
        padding-top: 6rem;
        padding-bottom: 5rem;
    }

    nav.paavalikko ul {
        justify-content: center;
    }

    .yhteydessa_rajaus {
        padding-right: 43%;
    }

    .yhteystiedot_vasen {
        padding-right: 100px;
    }

    .yhteystiedot_oikea {
        padding-left: 100px;
    }

    .blogitekstit {
        gap: 3rem;
    }

    .tutustu_rajaus {
        padding-right: 50%;
    }
}

@media screen and (max-width: 800px) {
    body * {
        display: none !important;
    }

    body {
        height: 100%;
    }

    body::after {
        display: flex !important;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        content: 'Mobiili ei vielä valmis, desktop / tabletti vasta.';
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        padding: 3rem;
        box-sizing: border-box;
        text-align: center;
        background: var(--ruskea);
        color: var(--vali);
        font-weight: 600;
    }
}