:root {
    --ku-bg: #8da35f;
    --ku-bg-dark: #44592c;
    --ku-green: #7fa255;
    --ku-green-dark: #567338;
    --ku-green-soft: #eef5e8;
    --ku-line: #c9d8b7;
    --ku-text: #26331e;
    --ku-muted: #6b7562;
    --ku-panel: #fcfdf9;
    --ku-white: #ffffff;
    --ku-shadow: 0 18px 45px rgba(28, 45, 20, .18);
    --ku-radius: 18px;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--ku-bg-dark);
}

body.kytajausmi6 {
    min-height: 100%;
    margin: 0;
    color: var(--ku-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .22), transparent 26rem),
        linear-gradient(180deg, #9fb56a 0%, #799452 42%, #5d793f 100%);
}

body.kytajausmi6::before {
    content: "";
    position: fixed;
    inset: 0 auto auto 0;
    width: min(55vw, 520px);
    height: min(60vw, 620px);
    background: url('../images/pageglare.png') no-repeat 0 0 / contain;
    opacity: .34;
    pointer-events: none;
}

a {
    color: #426d18;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:hover,
a:focus-visible {
    color: #1f390b;
}

img,
svg,
iframe,
video {
    max-width: 100%;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 999;
    padding: .7rem 1rem;
    border-radius: .7rem;
    color: var(--ku-white);
    background: #142207;
}

.skip-link:focus {
    top: 1rem;
}

.site-wrap {
    position: relative;
    z-index: 1;
    padding: 18px;
}

.site-sheet {
    width: min(100%, 1160px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--ku-radius);
    background: rgba(252, 253, 249, .97);
    backdrop-filter: saturate(115%) blur(2px);
    box-shadow: var(--ku-shadow);
}

.max-width-1040 .site-sheet { width: min(100%, 1040px); }
.max-width-1280 .site-sheet { width: min(100%, 1280px); }
.max-width-fluid .site-sheet { width: min(100%, calc(100vw - 36px)); }

.site-header {
    position: relative;
    min-height: 250px;
    background:
        linear-gradient(90deg, rgba(28, 50, 18, .46), rgba(39, 72, 27, .12) 45%, rgba(22, 41, 14, .22)),
        url('../images/header.jpg') center center / cover no-repeat;
    isolation: isolate;
}

.site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(14, 26, 8, .55));
    z-index: -1;
}

.header-top-modules {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.header-content {
    min-height: 250px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 2.25rem);
}

.brand-block {
    max-width: 70ch;
}

.site-title {
    display: inline-block;
    color: var(--ku-white);
    text-decoration: none;
    font-size: clamp(2rem, 5vw, 4.25rem);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.04em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .65), 0 1px 0 rgba(0, 0, 0, .9);
}

.site-title:hover,
.site-title:focus-visible {
    color: #f1ffd8;
}

.site-description {
    width: fit-content;
    max-width: 48rem;
    margin: .75rem 0 0;
    padding: .45rem .8rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #edf8df;
    background: rgba(72, 103, 48, .58);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.social-button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(3.4rem, 8vw, 5rem);
    aspect-ratio: 1;
    border-radius: 1rem;
    color: var(--ku-white);
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-decoration: none;
    background: linear-gradient(145deg, #6f9ded, #244f9f);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.24), 0 12px 24px rgba(0,0,0,.28);
}

.social-button:hover,
.social-button:focus-visible {
    color: var(--ku-white);
    transform: translateY(-1px);
}

.site-nav {
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 3px solid #d7e5c1;
    background: linear-gradient(180deg, #6f8f47, #4f6f30);
}

.menu-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    min-height: 48px;
    border: 0;
    color: var(--ku-white);
    background: transparent;
    font: inherit;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    display: block;
    width: 1.35rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.menu-toggle-icon {
    position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle-icon::before { top: -.45rem; }
.menu-toggle-icon::after { top: .45rem; }

.main-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: .25rem;
    padding: 0 .75rem;
}

.main-menu > * {
    min-width: 0;
}

.site-nav ul,
.site-nav .mod-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav li {
    margin: 0;
}

.site-nav a,
.site-nav .separator,
.site-nav .nav-header {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .75rem 1rem;
    color: #f8fff2;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .035em;
    border-left: 1px solid rgba(255,255,255,.11);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav li.current > a,
.site-nav li.active > a {
    color: var(--ku-white);
    background: linear-gradient(180deg, #9fc96d, #6f9b43);
}

.site-nav ul ul {
    min-width: 12rem;
    flex-direction: column;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    border-radius: 0 0 .75rem .75rem;
    background: #5d7a3f;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
    z-index: 20;
}

.site-nav li {
    position: relative;
}

.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.site-nav ul ul a {
    min-height: 0;
    padding: .75rem 1rem;
    text-transform: none;
    border: 0;
}

.module-row,
.module-grid,
.site-layout {
    padding: clamp(.85rem, 2vw, 1.25rem);
}

.banner-row {
    padding-bottom: 0;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 1rem 0;
}

.site-layout {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(170px, 220px);
    gap: clamp(.85rem, 2vw, 1.2rem);
    align-items: start;
}

.site-layout.no-left.has-right {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
}

.site-layout.has-left.no-right {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
}

.site-layout.no-left.no-right {
    grid-template-columns: minmax(0, 1fr);
}

.site-sidebar,
.site-content,
.module-card,
.content-module {
    min-width: 0;
}

.site-content {
    border: 1px solid var(--ku-line);
    border-radius: 12px;
    background: var(--ku-white);
    box-shadow: 0 1px 0 rgba(255,255,255,.75);
    padding: clamp(1rem, 2.4vw, 1.55rem);
}

.site-sidebar .moduletable,
.site-sidebar .module,
.module-card .moduletable,
.module-card .module,
.content-module .moduletable,
.content-module .module {
    overflow: hidden;
    border: 1px solid var(--ku-line);
    border-radius: 12px;
    background: #f4f8ef;
    box-shadow: 0 10px 22px rgba(86, 115, 56, .09);
}

.site-sidebar .moduletable + .moduletable,
.site-sidebar .module + .module {
    margin-top: .9rem;
}

.site-sidebar h3,
.module-card h3,
.content-module h3,
.site-sidebar .moduletable > h3,
.module-card .moduletable > h3 {
    margin: 0;
    padding: .7rem .9rem;
    color: #102006;
    background: linear-gradient(180deg, #bdd598, #92b967);
    font-size: .98rem;
    font-weight: 900;
}

.site-sidebar .moduletable > :not(h3),
.site-sidebar .module > :not(h3),
.module-card .moduletable > :not(h3),
.module-card .module > :not(h3),
.content-module .moduletable > :not(h3),
.content-module .module > :not(h3) {
    margin: .85rem;
}

.site-sidebar ul,
.module-card ul {
    padding-left: 1.2rem;
}

.site-sidebar .menu,
.site-sidebar .mod-menu {
    margin: 0;
    padding: .45rem;
    list-style: none;
}

.site-sidebar .menu li,
.site-sidebar .mod-menu li {
    margin: .15rem 0;
}

.site-sidebar .menu a,
.site-sidebar .mod-menu a {
    display: block;
    padding: .55rem .7rem;
    border-radius: .55rem;
    color: #1e350d;
    text-decoration: none;
    background: rgba(255, 255, 255, .38);
}

.site-sidebar .menu a:hover,
.site-sidebar .mod-menu a:hover,
.site-sidebar .menu .current > a,
.site-sidebar .mod-menu .current > a,
.site-sidebar .menu .active > a,
.site-sidebar .mod-menu .active > a {
    color: var(--ku-white);
    background: linear-gradient(180deg, #89bb53, #5d9135);
}

.site-content h1,
.site-content h2,
.site-content h3,
.site-content .page-header h1,
.site-content .page-header h2,
.site-content .item-title {
    color: #6f9248;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.site-content h1,
.site-content .page-header h1 {
    margin-top: 0;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
}

.site-content h2,
.site-content .page-header h2,
.site-content .item-title {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.site-content h2::after,
.site-content .page-header h2::after {
    content: "";
    display: block;
    max-width: 22rem;
    height: 1px;
    margin-top: .45rem;
    background: var(--ku-line);
}

.site-content p {
    margin-top: 0;
}

.btn,
.button,
button,
input[type="submit"],
input[type="button"] {
    border-radius: .6rem;
}

.btn-primary,
.button,
input[type="submit"],
.readmore a {
    border: 0;
    color: var(--ku-white) !important;
    background: linear-gradient(180deg, #95bf64, #6f9744);
    box-shadow: 0 6px 14px rgba(53, 91, 24, .18);
}

.readmore a {
    display: inline-block;
    padding: .55rem .85rem;
    border-radius: .55rem;
    text-decoration: none;
    font-weight: 800;
}

input,
select,
textarea {
    max-width: 100%;
    border: 1px solid #b9ca9f;
    border-radius: .55rem;
    padding: .55rem .65rem;
    font: inherit;
}

.alert,
#system-message-container .alert {
    border-radius: .75rem;
}

.pagination,
ul.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding-left: 0;
    list-style: none;
}

.pagination a,
.pagination span {
    display: inline-flex;
    min-width: 2.2rem;
    min-height: 2.2rem;
    align-items: center;
    justify-content: center;
    padding: .35rem .65rem;
    border: 1px solid var(--ku-line);
    border-radius: .5rem;
    text-decoration: none;
    background: #fbfcf8;
}

.site-footer {
    padding: 1.2rem clamp(1rem, 3vw, 1.6rem);
    color: #f1f7e8;
    text-align: center;
    background: linear-gradient(180deg, #5d7d3d, #436128);
}

.site-footer p {
    margin: 0;
}

.component-view {
    background: #fff;
}

.component-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
    background: #fff;
}

@media (max-width: 1000px) {
    .site-layout,
    .site-layout.no-left.has-right,
    .site-layout.has-left.no-right {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar-left { order: 2; }
    .site-content { order: 1; }
    .sidebar-right { order: 3; }
}

@media (max-width: 800px) {
    .site-wrap {
        padding: 10px;
    }

    .site-sheet,
    .max-width-fluid .site-sheet {
        width: 100%;
        border-radius: 12px;
    }

    .site-header,
    .header-content {
        min-height: 190px;
    }

    .header-content {
        align-items: flex-end;
        padding: 1rem;
    }

    .site-description {
        border-radius: .8rem;
    }

    .social-button {
        align-self: flex-start;
        width: 3.25rem;
        border-radius: .8rem;
        font-size: 2.35rem;
    }

    .menu-toggle {
        display: flex;
    }

    .main-menu {
        display: none;
        padding: .4rem;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .main-menu.is-open {
        display: block;
    }

    .site-nav ul,
    .site-nav .mod-menu {
        display: block;
    }

    .site-nav li + li {
        margin-top: .15rem;
    }

    .site-nav a,
    .site-nav .separator,
    .site-nav .nav-header {
        min-height: 0;
        border: 0;
        border-radius: .55rem;
        padding: .75rem .85rem;
        background: rgba(255, 255, 255, .14);
    }

    .site-nav ul ul {
        position: static;
        display: block;
        visibility: visible;
        opacity: 1;
        transform: none;
        margin: .15rem 0 .45rem .8rem;
        border-radius: .55rem;
        box-shadow: none;
        background: rgba(65, 92, 39, .22);
    }

    .module-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .module-row,
    .module-grid,
    .site-layout {
        padding: .8rem;
    }

    .site-content {
        padding: .95rem;
    }
}

@media (max-width: 520px) {
    body.kytajausmi6 {
        font-size: 15px;
    }

    .site-header,
    .header-content {
        min-height: 160px;
    }

    .header-content {
        gap: .75rem;
    }

    .site-title {
        letter-spacing: -.035em;
    }

    .site-description {
        display: none;
    }
}

/* Joomla 6 menu module may output accessibility/helper text such as
   "Lisää: ..." for submenu toggles. The old template did not include
   Bootstrap's visually-hidden helpers, so the text became visible. */
.visually-hidden,
.element-invisible,
.sr-only,
.hidden,
[hidden] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The template opens desktop submenus on hover/focus and shows them open on
   mobile, so Joomla's separate submenu toggle button is unnecessary here. */
.site-nav .mm-toggler,
.site-nav .mm-toggler-link,
.site-nav .mod-menu__toggle,
.site-nav .mod-menu__heading-toggler {
    display: none !important;
}

/* Kytäjä-Usmi: sivuvalikon alivalikot vanhan sivuston tyyliin */
.sidebar-left .moduletable,
.sidebar-left .module {
    background: #edf6e2;
}

.sidebar-left .menu,
.sidebar-left .mod-menu {
    margin: 0;
    padding: .65rem;
    list-style: none;
}

.sidebar-left .menu li,
.sidebar-left .mod-menu li {
    margin: 0;
}

.sidebar-left .menu > li + li,
.sidebar-left .mod-menu > li + li {
    margin-top: .25rem;
}

.sidebar-left .menu a,
.sidebar-left .mod-menu a,
.sidebar-left .menu .separator,
.sidebar-left .mod-menu .separator,
.sidebar-left .menu .nav-header,
.sidebar-left .mod-menu .nav-header {
    display: block;
    padding: .62rem .75rem;
    border-radius: .55rem;
    color: #23351d;
    text-decoration: none;
    line-height: 1.25;
    background: rgba(255,255,255,.52);
}

.sidebar-left .menu > li.current > a,
.sidebar-left .menu > li.active > a,
.sidebar-left .mod-menu > li.current > a,
.sidebar-left .mod-menu > li.active > a {
    color: #fff;
    background: linear-gradient(180deg, #79b644, #4d8f24);
}

.sidebar-left .menu ul,
.sidebar-left .mod-menu ul,
.sidebar-left .menu .mod-menu__sub,
.sidebar-left .mod-menu .mod-menu__sub {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    margin: .15rem 0 .4rem 0;
    padding: 0;
    list-style: none;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-left .menu ul a,
.sidebar-left .mod-menu ul a,
.sidebar-left .menu .mod-menu__sub a,
.sidebar-left .mod-menu .mod-menu__sub a {
    margin-top: 1px;
    padding: .48rem .65rem .48rem 1.45rem;
    border-radius: 0;
    color: #1f4319;
    font-size: .94rem;
    background: #d9efc7;
}

.sidebar-left .menu ul a:hover,
.sidebar-left .menu ul a:focus-visible,
.sidebar-left .menu ul li.current > a,
.sidebar-left .menu ul li.active > a,
.sidebar-left .mod-menu ul a:hover,
.sidebar-left .mod-menu ul a:focus-visible,
.sidebar-left .mod-menu ul li.current > a,
.sidebar-left .mod-menu ul li.active > a {
    color: #fff;
    background: linear-gradient(180deg, #7dbb48, #5b9b32);
}

.sidebar-left .menu ul ul a,
.sidebar-left .mod-menu ul ul a,
.sidebar-left .menu .mod-menu__sub .mod-menu__sub a,
.sidebar-left .mod-menu .mod-menu__sub .mod-menu__sub a {
    padding-left: 2.15rem;
    background: #e7f5db;
}

.sidebar-left .mm-toggler,
.sidebar-left .mm-toggler-link,
.sidebar-left .mod-menu__toggle,
.sidebar-left .mod-menu__heading-toggler {
    display: none !important;
}


/* Kytäjä-Usmi 6.1.3: sivuvalikon avattu haara yhtenäiseksi.
   Poistaa pääkohdan ja alavalikon välisen katkoksen sekä päätason alapyöristykset,
   kun kohdalla on näkyvä alivalikko. */
.sidebar-left .menu > li,
.sidebar-left .mod-menu > li {
    overflow: hidden;
    border-radius: .55rem;
}

.sidebar-left .menu > li + li,
.sidebar-left .mod-menu > li + li {
    margin-top: .25rem;
}

/* Jos aktiivisella päätasolla on alavalikko, päälinkki liittyy suoraan siihen. */
.sidebar-left .menu > li.active > a,
.sidebar-left .menu > li.current > a,
.sidebar-left .mod-menu > li.active > a,
.sidebar-left .mod-menu > li.current > a {
    margin-bottom: 0;
}

/* Modernit selaimet: tarkka kohdistus vain niihin päätasoihin, joilla on alavalikko. */
.sidebar-left .menu > li:has(> ul) > a,
.sidebar-left .mod-menu > li:has(> ul) > a,
.sidebar-left .menu > li:has(> .mod-menu__sub) > a,
.sidebar-left .mod-menu > li:has(> .mod-menu__sub) > a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Aktiivisen haaran alavalikko alkaa heti päälinkin alta. */
.sidebar-left .menu > li.active > ul,
.sidebar-left .menu > li.current > ul,
.sidebar-left .mod-menu > li.active > ul,
.sidebar-left .mod-menu > li.current > ul,
.sidebar-left .menu > li.active > .mod-menu__sub,
.sidebar-left .menu > li.current > .mod-menu__sub,
.sidebar-left .mod-menu > li.active > .mod-menu__sub,
.sidebar-left .mod-menu > li.current > .mod-menu__sub {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: 0;
    overflow: hidden;
    border-bottom-left-radius: .55rem;
    border-bottom-right-radius: .55rem;
}

/* Alivalikon ensimmäinen ja viimeinen rivi liittyvät siististi kokonaisuuteen. */
.sidebar-left .menu > li > ul > li:first-child > a,
.sidebar-left .mod-menu > li > ul > li:first-child > a,
.sidebar-left .menu > li > .mod-menu__sub > li:first-child > a,
.sidebar-left .mod-menu > li > .mod-menu__sub > li:first-child > a {
    border-top: 0;
}

.sidebar-left .menu > li > ul > li:last-child > a,
.sidebar-left .mod-menu > li > ul > li:last-child > a,
.sidebar-left .menu > li > .mod-menu__sub > li:last-child > a,
.sidebar-left .mod-menu > li > .mod-menu__sub > li:last-child > a {
    border-bottom-left-radius: .55rem;
    border-bottom-right-radius: .55rem;
}

/* Kun avattu alivalikko on aktiivisena, seuraava päätason kohta saa normaalin välin
   ilman ylimääräistä tyhjää palaa aktiivisen ryhmän sisään. */
.sidebar-left .menu > li.active + li,
.sidebar-left .menu > li.current + li,
.sidebar-left .mod-menu > li.active + li,
.sidebar-left .mod-menu > li.current + li {
    margin-top: .35rem;
}

/* Varmistus: piilossa olevat alivalikot eivät jätä tyhjää väliä. */
.sidebar-left .menu > li:not(.active):not(.current) > ul,
.sidebar-left .mod-menu > li:not(.active):not(.current) > ul,
.sidebar-left .menu > li:not(.active):not(.current) > .mod-menu__sub,
.sidebar-left .mod-menu > li:not(.active):not(.current) > .mod-menu__sub {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   Kytäjä-Usmi 6.2.0: vanhan Joomla 2.5 / Artisteer-tyylin
   palautus sivuvalikkoon ja sisältöalueeseen.
   ========================================================== */

body.kytajausmi6 {
    color: #3E532D;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
}

/* Vanhan templaten pääarkki oli vaalea ja tiiviimpi. */
.site-sheet {
    background: #F5F8F2 !important;
    border: 1px solid #ABC695 !important;
    border-radius: 5px !important;
    box-shadow: 0 18px 45px rgba(28,45,20,.18);
}

/* Pääalue tiiviimmäksi ja vanhan 2-palstaisen asettelun kaltaiseksi. */
.site-layout {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    padding: 0 !important;
    background: #F5F8F2;
}

.site-layout.no-left.has-right,
.site-layout.has-left.no-right,
.site-layout.no-left.no-right {
    grid-template-columns: minmax(0, 1fr) !important;
}

.site-layout.has-left.has-right {
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
}

/* Vasemman reunan tausta ja erotin kuten vanhassa sivussa. */
.sidebar-left {
    padding: 5px !important;
    background: #F5F8F2 !important;
    border-right: 1px solid #ABC695 !important;
}

/* Sivuvalikon moduulilaatikko: ei modernia korttia, vaan Artisteer-tyyli. */
.sidebar-left .moduletable,
.sidebar-left .module {
    overflow: visible !important;
    margin: 0 0 5px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Moduulin otsikko kuten vanha "Navigointi". */
.sidebar-left .moduletable > h3,
.sidebar-left .module > h3,
.sidebar-left h3 {
    margin: 0 10px 0 5px !important;
    padding: 10px 0 !important;
    color: #000000 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
    font-weight: bold !important;
    text-transform: none !important;
}

/* Poista aiempi moduulin sisämarginaali juuri valikolta. */
.sidebar-left .moduletable > ul,
.sidebar-left .module > ul,
.sidebar-left .moduletable > nav,
.sidebar-left .module > nav,
.sidebar-left .moduletable > .mod-menu,
.sidebar-left .module > .mod-menu {
    margin: 0 !important;
}

/* Root menu */
.sidebar-left .menu,
.sidebar-left .mod-menu {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

.sidebar-left .menu li,
.sidebar-left .mod-menu li {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Päätason valikkokohdat, hyvin lähellä vanhaa ul.naputtaja-vmenu>li>a -tyyliä. */
.sidebar-left .menu > li > a,
.sidebar-left .mod-menu > li > a,
.sidebar-left .menu > li > .separator,
.sidebar-left .mod-menu > li > .separator,
.sidebar-left .menu > li > .nav-header,
.sidebar-left .mod-menu > li > .nav-header {
    display: block !important;
    position: relative !important;
    min-height: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    border: 1px solid #7EA159 !important;
    border-radius: 0 !important;
    color: #EDF2E8 !important;
    text-decoration: none !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 12px !important;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
    font-weight: normal !important;
    background: #9AB77B !important;
    background: linear-gradient(to bottom, #C0D2AD 0%, #81A45B 81%, #719150 100%) !important;
}

/* Vanhat pienet nuoli-ikonit. */
.sidebar-left .menu > li > a::before,
.sidebar-left .mod-menu > li > a::before,
.sidebar-left .menu > li > .separator::before,
.sidebar-left .mod-menu > li > .separator::before,
.sidebar-left .menu > li > .nav-header::before,
.sidebar-left .mod-menu > li > .nav-header::before {
    content: url('../images/vmenuitemicon.png');
    margin-right: 5px;
    bottom: 2px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
}

/* Päätason hover */
.sidebar-left .menu > li > a:hover,
.sidebar-left .menu > li > a:focus-visible,
.sidebar-left .mod-menu > li > a:hover,
.sidebar-left .mod-menu > li > a:focus-visible {
    color: #395E21 !important;
    border-color: #6FB941 !important;
    background: #8ECA68 !important;
    background: linear-gradient(to bottom, #B8DEA1 0%, #71BD42 81%, #64A63A 100%) !important;
}

.sidebar-left .menu > li > a:hover::before,
.sidebar-left .menu > li > a:focus-visible::before,
.sidebar-left .mod-menu > li > a:hover::before,
.sidebar-left .mod-menu > li > a:focus-visible::before {
    content: url('../images/vmenuhovereditemicon.png');
}

/* Aktiivinen päätaso */
.sidebar-left .menu > li.current > a,
.sidebar-left .menu > li.active > a,
.sidebar-left .mod-menu > li.current > a,
.sidebar-left .mod-menu > li.active > a {
    color: #FFFFFF !important;
    border-color: #01370B !important;
    background: #01921C !important;
    background: linear-gradient(to bottom, #02E32C 0%, #01420D 100%) !important;
}

.sidebar-left .menu > li.current > a::before,
.sidebar-left .menu > li.active > a::before,
.sidebar-left .mod-menu > li.current > a::before,
.sidebar-left .mod-menu > li.active > a::before {
    content: url('../images/vmenuactiveitemicon.png');
}

/* Joomla 6:n erilliset submenu-toggle napit pois sivuvalikosta. */
.sidebar-left .mm-toggler,
.sidebar-left .mm-toggler-link,
.sidebar-left .mod-menu__toggle,
.sidebar-left .mod-menu__heading-toggler {
    display: none !important;
}

/* Sivuvalikossa näkyy vain aktiivisen haaran alavalikko kuten alkuperäisessä. */
.sidebar-left .menu > li > ul,
.sidebar-left .mod-menu > li > ul,
.sidebar-left .menu > li > .mod-menu__sub,
.sidebar-left .mod-menu > li > .mod-menu__sub {
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-left .menu > li.active > ul,
.sidebar-left .menu > li.current > ul,
.sidebar-left .mod-menu > li.active > ul,
.sidebar-left .mod-menu > li.current > ul,
.sidebar-left .menu > li.active > .mod-menu__sub,
.sidebar-left .menu > li.current > .mod-menu__sub,
.sidebar-left .mod-menu > li.active > .mod-menu__sub,
.sidebar-left .mod-menu > li.current > .mod-menu__sub {
    display: block !important;
}

/* Alavalikon rivit kuten vanhan sivun vaaleanvihreät palkit. */
.sidebar-left .menu ul li,
.sidebar-left .mod-menu ul li,
.sidebar-left .menu .mod-menu__sub li,
.sidebar-left .mod-menu .mod-menu__sub li {
    display: block !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Ohuet väli-/ylärajat kuten alkuperäisessä */
.sidebar-left .menu ul li::before,
.sidebar-left .mod-menu ul li::before,
.sidebar-left .menu .mod-menu__sub li::before,
.sidebar-left .mod-menu .mod-menu__sub li::before {
    display: block;
    position: absolute;
    content: ' ';
    left: 0;
    right: 0;
    top: -1px;
    z-index: 0;
    height: 1px;
    background-color: #D2EAC3;
}

.sidebar-left .menu ul li::after,
.sidebar-left .mod-menu ul li::after,
.sidebar-left .menu .mod-menu__sub li::after,
.sidebar-left .mod-menu .mod-menu__sub li::after {
    display: block;
    position: absolute;
    content: ' ';
    height: 0;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    border-bottom: 1px solid #BDD2AC;
}

.sidebar-left .menu > li > ul > li:first-child::before,
.sidebar-left .menu > li > ul > li:first-child::after,
.sidebar-left .mod-menu > li > ul > li:first-child::before,
.sidebar-left .mod-menu > li > ul > li:first-child::after {
    display: none;
}

.sidebar-left .menu ul a,
.sidebar-left .mod-menu ul a,
.sidebar-left .menu .mod-menu__sub a,
.sidebar-left .mod-menu .mod-menu__sub a {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 24px !important;
    height: auto !important;
    line-height: 24px !important;
    margin: 0 auto !important;
    padding: 0 10px 0 25px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #242E19 !important;
    background: #D4EAC4 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 11px !important;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
    font-weight: normal !important;
}

.sidebar-left .menu ul ul a,
.sidebar-left .mod-menu ul ul a {
    padding-left: 50px !important;
}

.sidebar-left .menu ul a:hover,
.sidebar-left .menu ul a:focus-visible,
.sidebar-left .mod-menu ul a:hover,
.sidebar-left .mod-menu ul a:focus-visible {
    color: #3E532D !important;
    background: #8ECA68 !important;
}

.sidebar-left .menu ul li.current > a,
.sidebar-left .menu ul li.active > a,
.sidebar-left .mod-menu ul li.current > a,
.sidebar-left .mod-menu ul li.active > a {
    color: #4D6737 !important;
    background: #AAD78E !important;
    font-weight: normal !important;
}

/* Sisältöalue vanhan .naputtaja-post- ja .naputtaja-article-tyylin mukaiseksi. */
.site-content {
    margin: 5px !important;
    padding: 5px !important;
    color: #3E532D !important;
    background: #FFFFFF !important;
    border: 2px solid #9AB77B !important;
    border-radius: 6px !important;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.10) !important;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

.site-content,
.site-content li,
.site-content table,
.site-content a,
.site-content a:link,
.site-content a:visited,
.site-content a:hover {
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

.site-content p {
    margin: 12px 10px !important;
}

.site-content a,
.site-content a:link {
    color: #01921C !important;
    text-decoration: none !important;
}

.site-content a:visited {
    color: #7CA659 !important;
}

.site-content a:hover,
.site-content a:focus-visible {
    color: #3B6222 !important;
    text-decoration: underline !important;
}

/* Artikkelin otsikko lähemmäs vanhaa varjostettua tyyliä. */
.site-content h1,
.site-content .page-header h1,
.site-content .item-title {
    margin: 5px 0 15px 10px !important;
    color: #4FCF86 !important;
    font-size: 36px !important;
    line-height: 1.1 !important;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
    font-weight: bold !important;
    letter-spacing: normal !important;
    text-shadow:
        0.7px 0.7px 0 rgba(153,153,153,0.8),
        1.4px 1.4px 0 rgba(140,140,140,0.8),
        2.1px 2.1px 1px rgba(122,122,122,0.5),
        2.8px 2.8px 0 rgba(107,107,107,0.5),
        3.5px 3.5px 0 rgba(92,92,92,0.48) !important;
}

.site-content h2,
.site-content .page-header h2 {
    color: #7CA659 !important;
    margin: 0 0 6px !important;
    font-size: 18px !important;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

.site-content h3 {
    color: #7CA659 !important;
    margin-top: 19px !important;
    margin-bottom: 19px !important;
    font-size: 19px !important;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

.site-content h4 {
    color: #658849 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    font-size: 16px !important;
    font-family: 'Century Gothic', Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

.site-content h2::after,
.site-content .page-header h2::after {
    display: none !important;
}

/* Joomla artikkelin metatiedot: vanhan kaltaiseksi ja kevyesti rajatuksi. */
.site-content .article-info,
.site-content .com-content-article__info,
.site-content .article-info dd,
.site-content .article-info dt {
    color: #000000 !important;
    font-size: 12px !important;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

.site-content .article-info,
.site-content .com-content-article__info {
    border-bottom: 1px solid #C0D4AF !important;
    margin: 0 auto 8px auto !important;
    padding: 1px !important;
}

/* Vanhojen artikkelitaulukoiden ulkoasu. */
.site-content table {
    border-collapse: collapse !important;
    margin: 1px !important;
    max-width: 100% !important;
}

.site-content th,
.site-content td {
    padding: 2px !important;
    border: dotted 1px #6D924F !important;
    vertical-align: top !important;
    text-align: left !important;
}

.site-content th {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 7px !important;
}

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

.site-content a img {
    border: 0 !important;
}

/* Oikean sivupalkin kortit jätetään hieman vanhan block-tyylin mukaiseksi. */
.sidebar-right .moduletable,
.sidebar-right .module,
.module-card .moduletable,
.module-card .module {
    border: 2px solid #ABC695 !important;
    border-radius: 0 !important;
    background: #F5F8F2 !important;
    box-shadow: none !important;
}

.sidebar-right .moduletable > h3,
.sidebar-right .module > h3,
.module-card .moduletable > h3,
.module-card .module > h3 {
    color: #000 !important;
    background: #7EA159 !important;
    border-radius: 6px 6px 0 0 !important;
    border: 1px solid #627D45 !important;
    padding: 12px 3px !important;
    font-size: 14px !important;
    font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif !important;
}

/* Mobiilissa säilytetään toimivuus, vaikka tyyli on vanhan mallinen. */
@media (max-width: 1000px) {
    .site-layout,
    .site-layout.has-left.has-right,
    .site-layout.no-left.has-right,
    .site-layout.has-left.no-right {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .sidebar-left {
        border-right: 0 !important;
        border-bottom: 1px solid #ABC695 !important;
    }

    .site-content {
        margin: 5px !important;
    }
}

@media (max-width: 620px) {
    .site-content h1,
    .site-content .page-header h1,
    .site-content .item-title {
        font-size: 30px !important;
        margin-left: 5px !important;
    }

    .site-content {
        overflow-x: auto;
    }

    .site-content table {
        width: auto !important;
    }
}


/* Kytäjä-Usmi 6.2.1: korjaus sivuvalikon sijaintiin.
   Edellisessä vanhan tyylin paketissa .has-left.no-right jäi vahingossa
   yhden sarakkeen asetteluksi, jolloin vasen valikko siirtyi headerin ja
   sisällön väliin. Desktopissa vasen valikko + sisältö ovat kaksi saraketta. */
@media (min-width: 1001px) {
    body.kytajausmi6 .site-layout.has-left.no-right {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) !important;
        grid-template-areas: "left content" !important;
    }

    body.kytajausmi6 .site-layout.has-left.has-right {
        display: grid !important;
        grid-template-columns: 220px minmax(0, 1fr) 220px !important;
        grid-template-areas: "left content right" !important;
    }

    body.kytajausmi6 .site-layout.no-left.has-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 220px !important;
        grid-template-areas: "content right" !important;
    }

    body.kytajausmi6 .site-layout.no-left.no-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "content" !important;
    }

    body.kytajausmi6 .sidebar-left {
        grid-area: left !important;
        width: auto !important;
    }

    body.kytajausmi6 .site-content {
        grid-area: content !important;
        min-width: 0 !important;
    }

    body.kytajausmi6 .sidebar-right {
        grid-area: right !important;
        width: auto !important;
    }
}

/* Mobiilissa valikko saa edelleen tulla sisällön yläpuolelle. */
@media (max-width: 1000px) {
    body.kytajausmi6 .site-layout,
    body.kytajausmi6 .site-layout.has-left.no-right,
    body.kytajausmi6 .site-layout.has-left.has-right,
    body.kytajausmi6 .site-layout.no-left.has-right,
    body.kytajausmi6 .site-layout.no-left.no-right {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "content"
            "left"
            "right" !important;
    }

    body.kytajausmi6 .sidebar-left {
        grid-area: left !important;
    }

    body.kytajausmi6 .site-content {
        grid-area: content !important;
    }

    body.kytajausmi6 .sidebar-right {
        grid-area: right !important;
    }
}


/* ==========================================================
   Kytäjä-Usmi 6.2.2: Phoca Gallery / lightbox -ulkoasun korjaus.
   Poistaa raskaan mustan full screen -taustan yleisimmistä Phoca Galleryn
   käyttämistä detail/lightbox-näkymistä ja varmistaa näkyvän sulkunapin.
   ========================================================== */

/* PhotoSwipe, jota Phoca Gallery käyttää joissain detail-näkymissä */
.pswp,
.pswp--open {
    z-index: 99999 !important;
}

.pswp__bg {
    background: rgba(245, 248, 242, .94) !important;
    opacity: 1 !important;
}

.pswp__scroll-wrap {
    background: transparent !important;
}

.pswp__top-bar {
    height: 48px !important;
    background: linear-gradient(to bottom, #7EA159, #4F7332) !important;
    opacity: 1 !important;
}

.pswp__caption {
    background: rgba(245, 248, 242, .96) !important;
    color: #24351c !important;
    border-top: 1px solid #ABC695 !important;
}

.pswp__caption__center {
    color: #24351c !important;
    text-align: center !important;
    font-size: 13px !important;
}

.pswp__button,
.pswp__button:hover,
.pswp__button:focus {
    opacity: 1 !important;
    filter: none !important;
    color: #fff !important;
    background-color: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
}

/* Jos PhotoSwipen oma icon-sprite ei lataudu, näytetään selkeä X sulkunappina. */
.pswp__button--close {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
}

.pswp__button--close::before {
    content: "×" !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 44px !important;
    text-align: center !important;
    font-size: 38px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: normal !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
}

/* Nuolet näkyvämmäksi ilman mustaa laatikkoa */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    width: 54px !important;
    height: 80px !important;
    margin-top: -40px !important;
    background: rgba(79, 115, 50, .65) !important;
    border-radius: 0 !important;
}

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    border-color: transparent #fff transparent transparent !important;
}

.pswp__button--arrow--right::before {
    border-color: transparent transparent transparent #fff !important;
}

/* Magnific Popup - jos Phoca/detail käyttää sitä */
.mfp-bg {
    background: rgba(245, 248, 242, .94) !important;
    opacity: 1 !important;
}

.mfp-wrap {
    z-index: 99999 !important;
}

.mfp-content {
    background: transparent !important;
}

.mfp-figure::after {
    background: transparent !important;
    box-shadow: none !important;
}

.mfp-close,
button.mfp-close {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    background: #5A7A3D !important;
    border: 1px solid #ABC695 !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    line-height: 38px !important;
    right: 10px !important;
    top: 10px !important;
    font-size: 32px !important;
    text-align: center !important;
}

/* Joomla/SqueezeBox/modal detail - vanhemmat detail-näkymät */
#sbox-overlay {
    background: rgba(245, 248, 242, .90) !important;
    opacity: 1 !important;
}

#sbox-window {
    background: #FFFFFF !important;
    border: 2px solid #9AB77B !important;
    box-shadow: 0 0 8px rgba(0,0,0,.25) !important;
}

#sbox-btn-close {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bootstrap modal - jos Phoca käyttää Bootstrapin modal-ikkunaa */
.modal-backdrop.show {
    background: rgba(245, 248, 242, .90) !important;
    opacity: 1 !important;
}

.modal-content {
    border: 2px solid #9AB77B !important;
    background: #fff !important;
}

.modal .btn-close {
    opacity: 1 !important;
    filter: none !important;
}

/* Phoca Galleryn omia mahdollisia wrapper-luokkia */
.pg-modal,
.pg-modal-box,
.phocagallery-modal,
.phocagallery-detail {
    background: #fff !important;
    color: #3E532D !important;
}

.pg-modal-bg,
.phocagallery-modal-bg {
    background: rgba(245, 248, 242, .90) !important;
}


/* Kytäjä-Usmi 6.2.3: poistaa päätason valikon ja aktiivisen alivalikkoryhmän jälkeisen raon.
   Joomla 6 voi lisätä väliä aktiivisen <li>-kohdan ja seuraavan <li>-kohdan väliin,
   etenkin kun edellinen päätason kohta sisältää näkyvän alavalikon. */
.sidebar-left .menu,
.sidebar-left .mod-menu,
.sidebar-left .menu > li,
.sidebar-left .mod-menu > li,
.sidebar-left .menu > li.active,
.sidebar-left .menu > li.current,
.sidebar-left .mod-menu > li.active,
.sidebar-left .mod-menu > li.current,
.sidebar-left .menu > li.active + li,
.sidebar-left .menu > li.current + li,
.sidebar-left .mod-menu > li.active + li,
.sidebar-left .mod-menu > li.current + li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sidebar-left .menu > li > ul,
.sidebar-left .mod-menu > li > ul,
.sidebar-left .menu > li > .mod-menu__sub,
.sidebar-left .mod-menu > li > .mod-menu__sub,
.sidebar-left .menu > li.active > ul,
.sidebar-left .menu > li.current > ul,
.sidebar-left .mod-menu > li.active > ul,
.sidebar-left .mod-menu > li.current > ul,
.sidebar-left .menu > li.active > .mod-menu__sub,
.sidebar-left .menu > li.current > .mod-menu__sub,
.sidebar-left .mod-menu > li.active > .mod-menu__sub,
.sidebar-left .mod-menu > li.current > .mod-menu__sub {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Estää taustavärisen "sauman" alavalikon viimeisen rivin ja seuraavan päätason linkin välissä. */
.sidebar-left .menu > li.active > ul,
.sidebar-left .menu > li.current > ul,
.sidebar-left .mod-menu > li.active > ul,
.sidebar-left .mod-menu > li.current > ul,
.sidebar-left .menu > li.active > .mod-menu__sub,
.sidebar-left .menu > li.current > .mod-menu__sub,
.sidebar-left .mod-menu > li.active > .mod-menu__sub,
.sidebar-left .mod-menu > li.current > .mod-menu__sub {
    position: relative !important;
    top: 0 !important;
}

.sidebar-left .menu > li.active > ul > li:last-child > a,
.sidebar-left .menu > li.current > ul > li:last-child > a,
.sidebar-left .mod-menu > li.active > ul > li:last-child > a,
.sidebar-left .mod-menu > li.current > ul > li:last-child > a,
.sidebar-left .menu > li.active > .mod-menu__sub > li:last-child > a,
.sidebar-left .menu > li.current > .mod-menu__sub > li:last-child > a,
.sidebar-left .mod-menu > li.active > .mod-menu__sub > li:last-child > a,
.sidebar-left .mod-menu > li.current > .mod-menu__sub > li:last-child > a {
    margin-bottom: 0 !important;
}

/* Päätason linkit pinoutuvat toisiinsa ilman vanhan modernin teeman välistystä. */
.sidebar-left .menu > li + li > a,
.sidebar-left .mod-menu > li + li > a,
.sidebar-left .menu > li + li > .separator,
.sidebar-left .mod-menu > li + li > .separator,
.sidebar-left .menu > li + li > .nav-header,
.sidebar-left .mod-menu > li + li > .nav-header {
    margin-top: 0 !important;
}


/* ==========================================================
   Kytäjä-Usmi: vanhan vaakavalikon pudotusvalikon palautus
   Version 6.2.4
   ========================================================== */

@media (min-width: 801px) {
    body.kytajausmi6 .site-nav {
        overflow: visible !important;
        position: relative !important;
        z-index: 499 !important;
        min-height: 32px !important;
        border-top: 0 !important;
        border-bottom: 1px solid #C0D4AF !important;
        background: #161E10 !important;
        background: linear-gradient(to bottom, #2F3F22 0, #202B17 50%, #0A0D07 50%, #192112 100%) !important;
        text-align: left !important;
    }

    body.kytajausmi6 .site-nav .main-menu {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        gap: 0 !important;
        min-height: 32px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.kytajausmi6 .site-nav .main-menu::after,
    body.kytajausmi6 .site-nav .mod-menu::after,
    body.kytajausmi6 .site-nav ul.menu::after,
    body.kytajausmi6 .site-nav ul.nav::after {
        content: "";
        display: block;
        clear: both;
    }

    body.kytajausmi6 .site-nav .moduletable,
    body.kytajausmi6 .site-nav .module {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.kytajausmi6 .site-nav .mod-menu,
    body.kytajausmi6 .site-nav ul.menu,
    body.kytajausmi6 .site-nav ul.nav {
        display: block !important;
        flex-wrap: nowrap !important;
        align-items: initial !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
        min-height: 32px !important;
    }

    body.kytajausmi6 .site-nav li {
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        list-style: none !important;
        overflow: visible !important;
    }

    body.kytajausmi6 .site-nav .mod-menu > li,
    body.kytajausmi6 .site-nav ul.menu > li,
    body.kytajausmi6 .site-nav ul.nav > li {
        float: left !important;
        margin-left: 2px !important;
        height: 32px !important;
        z-index: 5 !important;
    }

    body.kytajausmi6 .site-nav .mod-menu > li:first-child,
    body.kytajausmi6 .site-nav ul.menu > li:first-child,
    body.kytajausmi6 .site-nav ul.nav > li:first-child {
        margin-left: 1px !important;
    }

    body.kytajausmi6 .site-nav .mod-menu > li::before,
    body.kytajausmi6 .site-nav ul.menu > li::before,
    body.kytajausmi6 .site-nav ul.nav > li::before {
        position: absolute;
        display: block;
        content: "";
        top: 0;
        left: -2px;
        width: 1px;
        height: 32px;
        background: rgba(255, 255, 255, .28);
        border-left: 1px solid rgba(0, 0, 0, .55);
    }

    body.kytajausmi6 .site-nav .mod-menu > li:first-child::before,
    body.kytajausmi6 .site-nav ul.menu > li:first-child::before,
    body.kytajausmi6 .site-nav ul.nav > li:first-child::before {
        display: none;
    }

    body.kytajausmi6 .site-nav .mod-menu > li > a,
    body.kytajausmi6 .site-nav .mod-menu > li > .separator,
    body.kytajausmi6 .site-nav .mod-menu > li > .nav-header,
    body.kytajausmi6 .site-nav ul.menu > li > a,
    body.kytajausmi6 .site-nav ul.menu > li > .separator,
    body.kytajausmi6 .site-nav ul.menu > li > .nav-header,
    body.kytajausmi6 .site-nav ul.nav > li > a,
    body.kytajausmi6 .site-nav ul.nav > li > .separator,
    body.kytajausmi6 .site-nav ul.nav > li > .nav-header {
        position: relative !important;
        display: block !important;
        height: 32px !important;
        min-height: 32px !important;
        line-height: 32px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        border: 0 !important;
        color: #C7D7B7 !important;
        background: transparent !important;
        cursor: pointer !important;
        text-align: center !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
        font-family: "Century Gothic", Arial, "Arial Unicode MS", Helvetica, sans-serif !important;
        font-size: 14px !important;
        font-weight: bold !important;
        font-style: normal !important;
        white-space: nowrap !important;
        z-index: 11 !important;
    }

    body.kytajausmi6 .site-nav .mod-menu > li.current > a,
    body.kytajausmi6 .site-nav .mod-menu > li.active > a,
    body.kytajausmi6 .site-nav .mod-menu > li.current > .separator,
    body.kytajausmi6 .site-nav .mod-menu > li.active > .separator,
    body.kytajausmi6 .site-nav ul.menu > li.current > a,
    body.kytajausmi6 .site-nav ul.menu > li.active > a,
    body.kytajausmi6 .site-nav ul.nav > li.current > a,
    body.kytajausmi6 .site-nav ul.nav > li.active > a {
        color: #EAF1E4 !important;
        background: #6D924F !important;
        background: linear-gradient(to bottom, #8BB06D 0, #7CA659 37%, #779F56 50%, #5C7B42 50%, #6D924F 100%) !important;
    }

    body.kytajausmi6 .site-nav .mod-menu > li:hover > a,
    body.kytajausmi6 .site-nav .mod-menu > li:focus-within > a,
    body.kytajausmi6 .site-nav .mod-menu > li:hover > .separator,
    body.kytajausmi6 .site-nav .mod-menu > li:focus-within > .separator,
    body.kytajausmi6 .site-nav ul.menu > li:hover > a,
    body.kytajausmi6 .site-nav ul.menu > li:focus-within > a,
    body.kytajausmi6 .site-nav ul.nav > li:hover > a,
    body.kytajausmi6 .site-nav ul.nav > li:focus-within > a {
        color: #25321B !important;
        background: #8ECA68 !important;
        background: linear-gradient(to bottom, #A4D586 0, #96CE73 50%, #82C559 50%, #8ECA68 100%) !important;
        text-decoration: none !important;
    }

    body.kytajausmi6 .site-nav .mod-menu li:hover,
    body.kytajausmi6 .site-nav ul.menu li:hover,
    body.kytajausmi6 .site-nav ul.nav li:hover {
        z-index: 10000 !important;
    }

    body.kytajausmi6 .site-nav .mod-menu ul,
    body.kytajausmi6 .site-nav ul.menu ul,
    body.kytajausmi6 .site-nav ul.nav ul {
        position: absolute !important;
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        left: 0 !important;
        top: 100% !important;
        min-width: 145px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #DDE8D4 !important;
        box-shadow: none !important;
        list-style: none !important;
        transform: none !important;
        transition: none !important;
        z-index: 9999 !important;
    }

    body.kytajausmi6 .site-nav .mod-menu li:hover > ul,
    body.kytajausmi6 .site-nav .mod-menu li:focus-within > ul,
    body.kytajausmi6 .site-nav ul.menu li:hover > ul,
    body.kytajausmi6 .site-nav ul.menu li:focus-within > ul,
    body.kytajausmi6 .site-nav ul.nav li:hover > ul,
    body.kytajausmi6 .site-nav ul.nav li:focus-within > ul {
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.kytajausmi6 .site-nav .mod-menu ul ul,
    body.kytajausmi6 .site-nav ul.menu ul ul,
    body.kytajausmi6 .site-nav ul.nav ul ul {
        top: 0 !important;
        left: 100% !important;
    }

    body.kytajausmi6 .site-nav .mod-menu ul li,
    body.kytajausmi6 .site-nav ul.menu ul li,
    body.kytajausmi6 .site-nav ul.nav ul li {
        float: none !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body.kytajausmi6 .site-nav .mod-menu ul li + li,
    body.kytajausmi6 .site-nav ul.menu ul li + li,
    body.kytajausmi6 .site-nav ul.nav ul li + li {
        border-top: 1px solid #BBD1A9 !important;
    }

    body.kytajausmi6 .site-nav .mod-menu ul a,
    body.kytajausmi6 .site-nav .mod-menu ul .separator,
    body.kytajausmi6 .site-nav .mod-menu ul .nav-header,
    body.kytajausmi6 .site-nav ul.menu ul a,
    body.kytajausmi6 .site-nav ul.menu ul .separator,
    body.kytajausmi6 .site-nav ul.menu ul .nav-header,
    body.kytajausmi6 .site-nav ul.nav ul a,
    body.kytajausmi6 .site-nav ul.nav ul .separator,
    body.kytajausmi6 .site-nav ul.nav ul .nav-header {
        display: block !important;
        height: 29px !important;
        min-height: 29px !important;
        line-height: 29px !important;
        min-width: 7em !important;
        padding: 0 17px !important;
        margin: 0 !important;
        border: 1px solid transparent !important;
        color: #2F3F22 !important;
        background: transparent !important;
        text-align: left !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        font-family: Arial, "Arial Unicode MS", Helvetica, sans-serif !important;
        font-size: 12px !important;
        font-weight: bold !important;
    }

    body.kytajausmi6 .site-nav .mod-menu ul a:hover,
    body.kytajausmi6 .site-nav .mod-menu ul li:hover > a,
    body.kytajausmi6 .site-nav .mod-menu ul li:focus-within > a,
    body.kytajausmi6 .site-nav .mod-menu ul li.current > a,
    body.kytajausmi6 .site-nav .mod-menu ul li.active > a,
    body.kytajausmi6 .site-nav ul.menu ul a:hover,
    body.kytajausmi6 .site-nav ul.menu ul li:hover > a,
    body.kytajausmi6 .site-nav ul.menu ul li.current > a,
    body.kytajausmi6 .site-nav ul.menu ul li.active > a,
    body.kytajausmi6 .site-nav ul.nav ul a:hover,
    body.kytajausmi6 .site-nav ul.nav ul li:hover > a,
    body.kytajausmi6 .site-nav ul.nav ul li.current > a,
    body.kytajausmi6 .site-nav ul.nav ul li.active > a {
        color: #2A381E !important;
        background: rgba(171, 198, 149, .70) !important;
        border-color: rgba(154, 183, 123, .70) !important;
        text-decoration: none !important;
    }
}


/* ==========================================================
   Kytäjä-Usmi: ylävalikon palautus vanhan Artisteer-tyylin mukaan
   Version 6.2.5
   ========================================================== */

@media (min-width: 801px) {

    body.kytajausmi6 .naputtaja-nav.site-nav {
        background: #161E10 !important;
        background: -webkit-linear-gradient(top, #2F3F22 0, #202B17 50%, #0A0D07 50%, #192112 100%) no-repeat !important;
        background: -moz-linear-gradient(top, #2F3F22 0, #202B17 50%, #0A0D07 50%, #192112 100%) no-repeat !important;
        background: -o-linear-gradient(top, #2F3F22 0, #202B17 50%, #0A0D07 50%, #192112 100%) no-repeat !important;
        background: linear-gradient(to bottom, #2F3F22 0, #202B17 50%, #0A0D07 50%, #192112 100%) no-repeat !important;
        border-bottom: 1px solid #C0D4AF !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 499 !important;
        text-align: left !important;
        overflow: visible !important;
        min-height: 32px !important;
        height: 32px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav .menu-toggle {
        display: none !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav .main-menu {
        display: inline-block !important;
        vertical-align: bottom !important;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        min-height: 0 !important;
        height: 32px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav .moduletable,
    body.kytajausmi6 .naputtaja-nav.site-nav .module {
        display: inline-block !important;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav {
        display: inline-block !important;
        vertical-align: bottom !important;
        float: left !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style-type: none !important;
        background: transparent !important;
        overflow: visible !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul::after {
        content: ".";
        height: 0;
        display: block;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li {
        position: relative !important;
        z-index: 5 !important;
        display: block !important;
        float: left !important;
        background: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
        overflow: visible !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li:hover,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li:hover,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li:hover,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li:focus-within,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li:focus-within,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li:focus-within {
        z-index: 10000 !important;
        white-space: normal !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li {
        margin-left: 2px !important;
        height: 32px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li:first-child,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li:first-child,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li:first-child {
        margin-left: 1px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li::before {
        position: absolute !important;
        display: block !important;
        content: " " !important;
        top: 0 !important;
        left: -2px !important;
        width: 2px !important;
        height: 32px !important;
        background: url("../images/menuseparator.png") center center no-repeat !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li:first-child::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li:first-child::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li:first-child::before {
        display: none !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li > span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li > span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li > span {
        padding: 0 12px !important;
        margin: 0 auto !important;
        position: relative !important;
        display: block !important;
        height: 32px !important;
        min-height: 32px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        color: #C7D7B7 !important;
        line-height: 32px !important;
        text-align: center !important;
        z-index: 11 !important;
        font-size: 14px !important;
        font-family: "Century Gothic", Arial, "Arial Unicode MS", Helvetica, sans-serif !important;
        font-weight: bold !important;
        font-style: normal !important;
        text-transform: uppercase !important;
        font-variant: normal !important;
        white-space: nowrap !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li.current > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li.active > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li.current > span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li.active > span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li.current > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li.active > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li.current > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li.active > a {
        background: #6D924F !important;
        background: -webkit-linear-gradient(top, #8BB06D 0, #7CA659 37%, #779F56 50%, #5C7B42 50%, #6D924F 100%) no-repeat !important;
        background: -moz-linear-gradient(top, #8BB06D 0, #7CA659 37%, #779F56 50%, #5C7B42 50%, #6D924F 100%) no-repeat !important;
        background: -o-linear-gradient(top, #8BB06D 0, #7CA659 37%, #779F56 50%, #5C7B42 50%, #6D924F 100%) no-repeat !important;
        background: linear-gradient(to bottom, #8BB06D 0, #7CA659 37%, #779F56 50%, #5C7B42 50%, #6D924F 100%) no-repeat !important;
        color: #EAF1E4 !important;
        text-decoration: none !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li:hover > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li:focus-within > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li:hover > span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li:focus-within > span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li:hover > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li:focus-within > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li:hover > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li:focus-within > a {
        background: #8ECA68 !important;
        background: -webkit-linear-gradient(top, #A4D586 0, #96CE73 50%, #82C559 50%, #8ECA68 100%) no-repeat !important;
        background: -moz-linear-gradient(top, #A4D586 0, #96CE73 50%, #82C559 50%, #8ECA68 100%) no-repeat !important;
        background: -o-linear-gradient(top, #A4D586 0, #96CE73 50%, #82C559 50%, #8ECA68 100%) no-repeat !important;
        background: linear-gradient(to bottom, #A4D586 0, #96CE73 50%, #82C559 50%, #8ECA68 100%) no-repeat !important;
        color: #25321B !important;
        text-decoration: none !important;
    }

    /* Old dropdown mechanics: transparent spacer area + pale green panel */
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul {
        visibility: hidden !important;
        opacity: 1 !important;
        display: block !important;
        position: absolute !important;
        z-index: 10 !important;
        left: 0 !important;
        top: 0 !important;
        background: url("../images/spacer.gif") !important;
        background-color: transparent !important;
        list-style-type: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        min-width: 0 !important;
        width: auto !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu > li > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu > li > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav > li > ul {
        padding: 14px 34px 34px 34px !important;
        margin: -10px 0 0 -30px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul ul {
        padding: 34px 34px 34px 14px !important;
        margin: -34px 0 0 -6px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul::before {
        background: #DDE8D4 !important;
        margin: 0 auto !important;
        display: block !important;
        position: absolute !important;
        content: " " !important;
        z-index: 1 !important;
        border-radius: 0 !important;
        top: 10px !important;
        right: 30px !important;
        bottom: 30px !important;
        left: 30px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul ul::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul ul::before,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul ul::before {
        top: 30px !important;
        bottom: 30px !important;
        right: 30px !important;
        left: 10px !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li:hover > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li:focus-within > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li:hover > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li:focus-within > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li:hover > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li:focus-within > ul {
        visibility: visible !important;
        top: 100% !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li:hover > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li:focus-within > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li:hover > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li:focus-within > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li:hover > ul,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li:focus-within > ul {
        top: 0 !important;
        left: 100% !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li {
        float: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 5 !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li:first-child,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li:first-child,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li:first-child {
        margin-top: 0 !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li:last-child,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li:last-child,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li:last-child {
        margin-bottom: 0 !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li::after {
        display: block !important;
        position: absolute !important;
        content: " " !important;
        height: 0 !important;
        top: -3px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1 !important;
        border-bottom: 1px solid #BBD1A9 !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu li li:first-child::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu li li:first-child::after,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav li li:first-child::after {
        display: none !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul span,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul span {
        display: block !important;
        white-space: nowrap !important;
        height: 29px !important;
        min-height: 29px !important;
        min-width: 7em !important;
        border: 1px solid transparent !important;
        text-align: left !important;
        line-height: 29px !important;
        color: #2F3F22 !important;
        font-size: 12px !important;
        font-family: Arial, "Arial Unicode MS", Helvetica, sans-serif !important;
        font-weight: bold !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        margin: 0 auto !important;
        padding: 0 17px !important;
        background: transparent !important;
        position: relative !important;
        z-index: 11 !important;
    }

    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul a:hover,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul li:hover > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul li:focus-within > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul li.current > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.mod-menu ul li.active > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul a:hover,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul li:hover > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul li.current > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.menu ul li.active > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul a:hover,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul li:hover > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul li.current > a,
    body.kytajausmi6 .naputtaja-nav.site-nav ul.nav ul li.active > a {
        background: #ABC695 !important;
        background: rgba(171, 198, 149, 0.7) !important;
        border: 1px solid rgba(154, 183, 123, 0.7) !important;
        color: #2A381E !important;
        margin: 0 auto !important;
        text-decoration: none !important;
    }
}


/* ==========================================================
   Kytäjä-Usmi: Phoca Gallery lightbox reset / näytölle sopiva iso kuva
   Version 6.2.7
   Tämä versio ei pakota PhotoSwipen laskemia width/height-arvoja uusiksi.
   Tärkein korjaus on estää templaten yleinen img/max-width-sääntö rikkomasta
   PhotoSwipen ja muiden lightboxien laskentaa.
   ========================================================== */

/* Älä anna templaten normaalien kuvasääntöjen sotkea PhotoSwipe-kuvaa.
   PhotoSwipe laskee itse kuvan koon inline-tyyleillä. */
body.kytajausmi6 .pswp img,
body.kytajausmi6 .pswp__img,
body.kytajausmi6 .pswp__zoom-wrap img {
    max-width: none !important;
}

/* PhotoSwipe overlay vain normaalisti ruudun kokoon, ei artikkelin mukaan. */
body.kytajausmi6 .pswp {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
}

body.kytajausmi6 .pswp__bg {
    background: rgba(245, 248, 242, .92) !important;
}

body.kytajausmi6 .pswp__top-bar {
    background: rgba(47, 63, 34, .88) !important;
}

body.kytajausmi6 .pswp__caption__center {
    color: #2F3F22 !important;
    text-align: center !important;
}

/* PhotoSwipen nuolet näkyvämmiksi, mutta ei muuteta kuvan laskentaa. */
body.kytajausmi6 .pswp__button--arrow--left,
body.kytajausmi6 .pswp__button--arrow--right {
    background-color: rgba(47, 63, 34, .65) !important;
}

/* Magnific Popup: tässä voidaan turvallisemmin rajoittaa kuvaa, koska se ei laske kokoa
   samalla tavalla kuin PhotoSwipe. */
body.kytajausmi6 .mfp-bg {
    background: rgba(245, 248, 242, .92) !important;
    opacity: 1 !important;
}

body.kytajausmi6 .mfp-wrap {
    z-index: 999999 !important;
}

body.kytajausmi6 .mfp-container {
    padding: 28px 58px !important;
}

body.kytajausmi6 img.mfp-img {
    max-width: 92vw !important;
    max-height: calc(100vh - 100px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
}

body.kytajausmi6 .mfp-figure::after {
    display: none !important;
}

body.kytajausmi6 .mfp-close {
    opacity: 1 !important;
    color: #fff !important;
    background: rgba(47, 63, 34, .85) !important;
    border-radius: 50% !important;
}

/* Bootstrap modal -tyyppiselle detail-näkymälle */
body.kytajausmi6 .modal-dialog,
body.kytajausmi6 .joomla-modal .modal-dialog,
body.kytajausmi6 .phocagallery-modal .modal-dialog {
    max-width: min(940px, 94vw) !important;
    margin: 30px auto !important;
}

body.kytajausmi6 .modal-body img,
body.kytajausmi6 .joomla-modal .modal-body img,
body.kytajausmi6 .phocagallery-modal .modal-body img {
    max-width: 100% !important;
    max-height: calc(100vh - 140px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Vanha SqueezeBox */
body.kytajausmi6 #sbox-window {
    max-width: 94vw !important;
    max-height: 94vh !important;
}

body.kytajausmi6 #sbox-content img,
body.kytajausmi6 #sbox-content iframe {
    max-width: 100% !important;
    max-height: calc(94vh - 40px) !important;
}

@media (max-width: 800px) {
    body.kytajausmi6 .mfp-container {
        padding: 24px 14px !important;
    }

    body.kytajausmi6 img.mfp-img {
        max-width: 96vw !important;
        max-height: calc(100vh - 90px) !important;
    }
}


/* ==========================================================
   Kytäjä-Usmi: Phoca Gallery - kehys kuvan kokoiseksi
   Version 6.2.8
   Suositeltu Phoca detail-tyyppi: Magnific Popup.
   PhotoSwipe on fullscreen-tyyppinen eikä luonnostaan tee kuvan kokoista ikkunaa.
   ========================================================== */

/* Magnific Popup: tee ikkunasta kuvan kokoinen, ei koko sivun levyinen */
body.kytajausmi6 .mfp-bg {
    background: rgba(245, 248, 242, .72) !important;
    opacity: 1 !important;
}

body.kytajausmi6 .mfp-wrap {
    z-index: 999999 !important;
}

body.kytajausmi6 .mfp-container {
    padding: 30px 48px !important;
    text-align: center !important;
}

body.kytajausmi6 .mfp-content {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 70px) !important;
    margin: 0 auto !important;
    vertical-align: middle !important;
    text-align: left !important;
}

body.kytajausmi6 .mfp-figure {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 96px) !important;
    margin: 0 auto !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #7ea159 !important;
    box-shadow: 0 4px 18px rgba(47, 63, 34, .35) !important;
    line-height: 0 !important;
}

body.kytajausmi6 .mfp-figure::after {
    display: none !important;
}

body.kytajausmi6 img.mfp-img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 145px) !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 auto !important;
    line-height: 0 !important;
}

body.kytajausmi6 .mfp-bottom-bar {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: calc(100vw - 120px) !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    color: #2F3F22 !important;
}

body.kytajausmi6 .mfp-title {
    color: #2F3F22 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding-right: 60px !important;
}

body.kytajausmi6 .mfp-counter {
    color: #5c7747 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
}

body.kytajausmi6 .mfp-close {
    opacity: 1 !important;
    color: #fff !important;
    background: rgba(47, 63, 34, .92) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    right: -18px !important;
    top: -18px !important;
    text-align: center !important;
}

body.kytajausmi6 .mfp-arrow {
    opacity: 1 !important;
}

body.kytajausmi6 .mfp-arrow-left {
    left: 8px !important;
}

body.kytajausmi6 .mfp-arrow-right {
    right: 8px !important;
}

/* Bootstrap modal / Joomla modal: rajaa kehys sisällön kokoiseksi */
body.kytajausmi6 .modal-dialog,
body.kytajausmi6 .joomla-modal .modal-dialog,
body.kytajausmi6 .phocagallery-modal .modal-dialog {
    width: auto !important;
    max-width: calc(100vw - 80px) !important;
    display: table !important;
    margin: 30px auto !important;
}

body.kytajausmi6 .modal-content,
body.kytajausmi6 .joomla-modal .modal-content,
body.kytajausmi6 .phocagallery-modal .modal-content {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 80px) !important;
    background: #fff !important;
    border: 1px solid #7ea159 !important;
    box-shadow: 0 4px 18px rgba(47, 63, 34, .35) !important;
}

body.kytajausmi6 .modal-body,
body.kytajausmi6 .joomla-modal .modal-body,
body.kytajausmi6 .phocagallery-modal .modal-body {
    padding: 8px !important;
    text-align: center !important;
}

body.kytajausmi6 .modal-body img,
body.kytajausmi6 .joomla-modal .modal-body img,
body.kytajausmi6 .phocagallery-modal .modal-body img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 150px) !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Vanha SqueezeBox: koeta rajata kuvan mukaan */
body.kytajausmi6 #sbox-window {
    max-width: calc(100vw - 80px) !important;
    max-height: calc(100vh - 80px) !important;
    border: 1px solid #7ea159 !important;
    box-shadow: 0 4px 18px rgba(47, 63, 34, .35) !important;
}

body.kytajausmi6 #sbox-content,
body.kytajausmi6 #sbox-content iframe {
    max-width: calc(100vw - 90px) !important;
    max-height: calc(100vh - 90px) !important;
}

body.kytajausmi6 #sbox-content img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 110px) !important;
    max-height: calc(100vh - 130px) !important;
    object-fit: contain !important;
}

/* PhotoSwipe: full screen -tyyppi. Pidetään vain siistinä, ei pakoteta kuvan kokoiseksi. */
body.kytajausmi6 .pswp {
    z-index: 999999 !important;
}

body.kytajausmi6 .pswp img,
body.kytajausmi6 .pswp__img,
body.kytajausmi6 .pswp__zoom-wrap img {
    max-width: none !important;
}

body.kytajausmi6 .pswp__bg {
    background: rgba(245, 248, 242, .80) !important;
}

body.kytajausmi6 .pswp__top-bar {
    background: rgba(47, 63, 34, .88) !important;
}

@media (max-width: 800px) {
    body.kytajausmi6 .mfp-container {
        padding: 22px 12px !important;
    }

    body.kytajausmi6 .mfp-content,
    body.kytajausmi6 .mfp-figure,
    body.kytajausmi6 .modal-dialog,
    body.kytajausmi6 .modal-content {
        max-width: calc(100vw - 24px) !important;
    }

    body.kytajausmi6 img.mfp-img,
    body.kytajausmi6 .modal-body img {
        max-width: calc(100vw - 44px) !important;
        max-height: calc(100vh - 115px) !important;
    }

    body.kytajausmi6 .mfp-close {
        right: -10px !important;
        top: -10px !important;
    }
}