:root {
    --content-side-padding: 3.5rem;
    --bg-bright-green: #8ac642;
    --bg-bright-green-darker: #7cac30;
    --bg-bright-green-darkest: #5c8e0b;
    --bg-green: #2fa632;
    --bg-green-darker: #228a22;
    --bg-green-darkest: #156215;
    --bg-cold-green: #1bb270;
    --bg-cold-green-darker: #289f62;
    --bg-cold-green-darkest: #1a7647;
    --paragraph-font-size: 0.8rem;

    --graph-bar-spacing: 1rem;
    --graph-chart-height: 300px;
    --graph-tick-length: 0.3rem;
    --graph-y-axis-width: 2rem;
    --graph-animation-duration: 0.6s;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 20px; /* html font size affects everything! */
    scroll-behavior: auto !important; /* jQuery scroll script has conflict with scroll-behavior: smooth in _reboot.scss. Override it with css. */
}

body {
    font-family: "Overpass", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: #000;
    width: 100%;
}

h1, h2, h3, h4, h5 {
    font-family: "Sofia Sans Extra Condensed", sans-serif;
    font-weight: 600;
    font-style: normal;
}

h1 {
    font-size: 4rem;
    line-height: 1;
    text-transform: uppercase;
}

h2 {
    font-size: 2.2rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.9rem;
    margin-bottom: 1.2rem;
}

h4 {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}

p, li, a {
    font-size: var(--paragraph-font-size);
}

p {
    line-height: inherit;
}

b, strong {
    font-weight: 700;
}

a {
    color: blue;
}

a:hover {
    color: green;
    text-decoration: underline;
}

a.raquo:after {
    content: "\00BB";
    display: inline-block;
    vertical-align: baseline;
    margin-left: 0.4em;
}

svg.icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
}

[data-action] {
    cursor: pointer;
}

.nobr { white-space: nowrap; }
.show-mob { display: none; }
.fullscreen {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

main, video, img { display: block; }
small { font-size: 80%; }
svg { pointer-events: none; }

main {
    z-index: 2;
    position: relative;
    width: 100%;
    overflow: hidden;
}

section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.wrapper {
    position: relative;
    width: 100%; max-width: 60rem;
    box-sizing: border-box;
    margin: 0 auto;
}

.padding {
    padding: 3.5rem var(--content-side-padding);
}

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

.padding-top-0 {
    padding-top: 0;
}

.text-wrap {
    display: block;
}

.centered-text-wrap {
    display: block;
    margin: 0 auto;
}

.bg-bright-green { background-color: var(--bg-bright-green); }
.bg-bright-green-darker { background-color: var(--bg-bright-green-darker); }
.bg-green { background-color: var(--bg-green); }
.bg-green-darker { background-color: var(--bg-green-darker); }
.bg-cold-green { background-color: var(--bg-cold-green); }
.bg-cold-green-darker { background-color: var(--bg-cold-green-darker); }

.img-col img,
img.section-img { position: relative; display: block; width: 100%; }


/*
   COLORED BARS
*/
.colored-bar {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.colored-bar > .wrapper {
    margin: 1rem auto;
}

.colored-bar-padding {
    padding: 2rem var(--content-side-padding);
}

.colored-bar .colored-bar-img-col {
    position: relative;
}

.colored-bar .colored-bar-img-col img {
    position: absolute;
    top: 50%;
    display: block;
    width: auto;
    max-height: 100%;
    object-fit: contain;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.colored-bar .colored-bar-title {
    margin-bottom: 0 !important;
    font-size: 2.2rem;
}


/*
    NAV
*/
.menu-toggle {
    opacity: 1;
    cursor: pointer;
    position: fixed; z-index: 999;
    width: 3.75em; height: 3.75em;
    top: 1.5em; right: 1.5em;
    font-size: 0.9rem;

    -webkit-transform:  rotate(0deg);
    -ms-transform:      rotate(0deg);
    transform:          rotate(0deg);

    -webkit-transition: 0.5s ease;
    -ms-transition:     0.5s ease;
    transition:         0.5s ease;
    cursor: pointer;
}

.menu-toggle::before {
    display: block;
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 150%; height: 150%;
    background-color: white;
    border-radius: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.menu-toggle > div {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 90%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.menu-toggle i {
    display: block;
    position: absolute;
    width: 100%; height: 15%;
    background: #000;
    border-radius: 0.1em;
    opacity: 1; left: 0;

    -webkit-transform:  translateY(-50%) rotate(0deg);
    -ms-transform:      translateY(-50%) rotate(0deg);
    transform:          translateY(-50%) rotate(0deg);

    -webkit-transition:     0.25s ease;
    -ms-transition:         0.25s ease;
    transition:             0.25s ease;
}

.menu-toggle i:nth-child(1) { top: 16.66%; }
.menu-toggle i:nth-child(2), .menu-toggle i:nth-child(3) { top: 50%; }
.menu-toggle i:nth-child(4) { top: 83.33%; }

.nav-open .menu-toggle::before { background: transparent; }
.nav-open .menu-toggle i { background:white; }
.nav-open .menu-toggle i:nth-child(1) {
    top: 50%; left: 50%;
    width: 0%;
}

.nav-open .menu-toggle i:nth-child(2) {
    -webkit-transform:  rotate(45deg);
    -ms-transform:      rotate(45deg);
    transform:          rotate(45deg);
}

.nav-open .menu-toggle i:nth-child(3) {
    -webkit-transform:  rotate(-45deg);
    -ms-transform:      rotate(-45deg);
    transform:          rotate(-45deg);
}

.nav-open .menu-toggle i:nth-child(4) {
    top: 50%; left: 50%;
    width: 0%;
}

nav {
    position: fixed;
    right: 0; top: 0;
    z-index: 100;
    width: 25rem; height: 100%;
    opacity: 1;

    -webkit-transform:  translate3d(105%, 0, 0);
    -ms-transform:      translate3d(105%, 0, 0);
    transform:          translate3d(105%, 0, 0);

    -webkit-transition: transform 0.4s ease, opacity 0.2s linear;
    -ms-transition:     transform 0.4s ease, opacity 0.2s linear;
    transition:         transform 0.4s ease, opacity 0.2s linear;
}
[data-page="1"] .menu-toggle,
[data-page="1"] nav { opacity: 0; pointer-events: none; }

.nav-open nav {
    -webkit-transform:  translate3d(0, 0, 0);
    -ms-transform:      translate3d(0, 0, 0);
    transform:          translate3d(0, 0, 0);
}

nav #menu {
    position: relative; z-index: 1;
    height: 100%;
    background: var(--bg-green-darker);
    color: white;
}

nav #menu ul {
    position: relative; top: 50%;
    width: 100%;
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-family: "Sofia Sans Extra Condensed", sans-serif;
    font-weight: 600;
    font-style: normal;
    
    -webkit-transform:  translateY(-50%);
    -ms-transform:      translateY(-50%);
    transform:          translateY(-50%);
}
nav #menu ul li {
    position: relative;
    cursor: pointer;
    font-size: 1em;
    margin: 1.5rem 1rem;
    list-style: none;
}

nav #menu ul li:hover {
    color: #9ce14a;
}


/*
    VIDEO CONTAINER
*/
.video-container {
    position: relative;
    width: 100%;
}

.video-container video {
    display: block;
    width: 100%;
    height: auto;
}

.video-container .loader {
    opacity: 1;
    position: absolute;
    pointer-events: none;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: url('../images/2025/loader.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 4rem;
    background-color: rgba(0, 0, 0, 0.8);
    
    -webkit-transition:     opacity 0.3s ease;
    -ms-transition:         opacity 0.3s ease;
    transition:             opacity 0.3s ease;
}

.video-container.loaded .loader { pointer-events: none; opacity: 0; }

.video-container .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;

    -webkit-transition:     opacity 0s ease;
    -ms-transition:         opacity 0s ease;
    transition:             opacity 0s ease;
}

.video-container.started .poster { pointer-events: none; opacity: 0; }

.video-container .control {
    z-index: 3;
    opacity: 1;
    position: absolute;
    width: 4rem; height: 4rem;
    cursor: pointer;

    -webkit-transition: opacity 0.3s ease;
    -ms-transition:     opacity 0.3s ease;
    transition:         opacity 0.3s ease;
}

.video-container .control.play {
    pointer-events: none;
    top: 50%; left: 50%;
    margin: 0 auto;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.video-container:not(.loaded) .control.play,
.video-container.playing .control.play {
    opacity: 0;
}

.video-container .control.soundoff,
.video-container .control.soundon {
    opacity: 0; pointer-events: none;
    top: 0em; right: 0em;
    width: 5em; height: 5em;
    padding: 1.5em;
}

.video-container[data-muted="1"].playing .control.soundoff,
.video-container[data-muted="0"].playing .control.soundon { opacity: 1; pointer-events: auto; }

.video-container .control svg {
    pointer-events: none;
    width: 100%;
    height: 100%;
    fill: white;
}

.video-container .control.play svg {
    -webkit-transform:  scale(1);
    -ms-transform:      scale(1);
    transform:          scale(1);

    -webkit-transition: transform 0.3s ease;
    -ms-transition:     transform 0.3s ease;
    transition:         transform 0.3s ease;
}

.video-container:not(.loaded) .control.play svg,
.video-container.playing .control.play svg {
    -webkit-transform:  scale(2);
    -ms-transform:      scale(2);
    transform:          scale(2);
}


/*
    PARALLAX
*/
.parallax-img {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    will-change: transform;

    -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    -webkit-transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.4, 1);
        -ms-transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.4, 1);
            transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.4, 1);
}

img.parallax-img { display: block; }

div.parallax-img:after {
    content: "";
    width: 100%;
    display: block;
}

.parallax-bg {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 40%;
}

.parallax-bg .wrap {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.parallax-bg .parallax-img {
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
}

.parallax-bg-1 .parallax-img { margin-top: -10%; }
.parallax-bg-2 .parallax-img { margin-top: -10%; }
.parallax-bg-3 .parallax-img { margin-top: -10%; }


/*
    REVEALS
*/
.reveal-on-scroll .reveal-text,
.reveal-on-scroll .reveal-image,
.reveal-on-scroll.reveal-text,
.reveal-on-scroll.reveal-image {
  opacity: 0;

    -webkit-transition: transform 2s ease, opacity 1s ease;
        -ms-transition: transform 2s ease, opacity 1s ease;
            transition: transform 2s ease, opacity 1s ease;
    
    -webkit-transition-delay: 0.1s;
        -ms-transition-delay: 0.1s;
            transition-delay: 0.1s;
}

.reveal-on-scroll .reveal-text,
.reveal-on-scroll.reveal-text {
-webkit-transform: translateY(5rem);
    -ms-transform: translateY(5rem);
        transform: translateY(5rem);
}

.reveal-on-scroll.reveal .reveal-text,
.reveal-on-scroll.reveal-text.reveal {
    opacity: 1;

    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.reveal-on-scroll.reveal .reveal-image,
.reveal-on-scroll.reveal-image .reveal { opacity: 1; }


/*
   NOTE BOX
*/
.note-box {
    position: relative;
    width: 17.5em;
    font-size: 1rem;
    margin: 0 auto;
    box-sizing: border-box;
}

.note-box.turn-right {
    -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
            transform: rotate(4deg);
}

.note-box.turn-left {
    -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
            transform: rotate(-4deg);
}

.note-box::before {
    content: "";
    position: absolute;
    width: 3em;
    height: 3em;
    clip-path: polygon(100% 0%, 0% 0%, 0% 100%);
    background-color: var(--bg-bright-green-darker);
    opacity: 0.5;
    right: 0;
    bottom: 0;
}

.note-box.bg-bright-green::before {
    background-color: var(--bg-bright-green-darker);
}

.note-box.bg-green::before {
    background-color: var(--bg-green-darker);
}

.note-box.bg-cold-green::before {
    background-color: var(--bg-cold-green-darker);
}

.note-box:after {
    content: "";
    position: absolute;
    width: 3em;
    height: 3em;
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    background-color: white;
    right: 0;
    bottom: 0;
    right: -0.025em;  /* Remove the dashed line that appears if box is roatated */
    bottom: -0.025em;  /* Remove the dashed line that appears if box is roatated */
}

.note-box .note-box-title {
    display: block;
    font-size: 1.7em;
    font-family: "Sofia Sans Extra Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.1;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.note-box p,
.note-box li {
    font-size: 0.9em;
    font-weight: 700;
    color: white;
    margin-bottom: 0;
}

.note-box ul {
    padding-left: 1rem;
    margin-bottom: 0;
}

.note-box li {
    padding-left: 0.5em;
}

.note-box-top {
    padding: 0.7em 1.5em;
}

.note-box-body {
    padding: 1em 1.5em 2.5em;
}

.note-box-body .note-box-title {
    margin-bottom: 1rem;
}



/*
   FOOTER
*/
footer {
    z-index: 1;
    display: block;
    position: relative;
    padding-bottom: 3rem;
    background-color: #febd00;
}

footer .footer-box {
    background-color: white;
    border-radius: 2rem;
    margin: 0 auto 3rem;
}

footer img.footer-top {
    position: relative;
    top: -1px;
}

footer .footer-title {
    margin-bottom: 1.2rem;
}

footer a {
    color: #000;
    text-decoration: none;
    margin: 0.5rem 0;
    white-space: nowrap;
}

footer a + a {
    margin-left: 0.8rem;
}

footer a:hover {
    text-decoration: underline;
}

footer img.footer-fruits {
    display: block;
    width: 100%;
    max-width: 27.5rem;
    margin: 1.5rem auto -1.5rem;
}


footer .balloon {
    position: absolute;
    top: -3rem;
    left: 6rem;
    width: 8rem; height: 8rem;
}




/*
    GRAPH
*/

.graph .chart-container {
    position: relative;
    padding-top: 1.5rem;
}

.graph .chart-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.graph .chart {
    position: relative;
    flex: 1;
    display: flex;
    gap: var(--graph-bar-spacing);
    align-items: flex-end;
    height: var(--graph-chart-height);
    position: relative;
    border-bottom: 1px solid #000;
    padding-left: var(--graph-bar-spacing);
    width: 100%;
}

.graph .chart::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: #000;
    height: 100%;
}

.graph .bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
}

.graph .bar-label-outside {
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
}

.graph .bar-label-inside {
    position: absolute;
    top: 0.2rem;
    width: 100%;
    text-align: center;
    color: #fff;
    pointer-events: none;
}

.graph .bar-label-outside,
.graph .bar-label-inside {
    font-family: "Overpass", sans-serif;
    font-size: var(--paragraph-font-size);
    font-weight: 700;
}

.graph .bar-stack {
    position: relative;
    width: 100%;
    height: 100%; /* Take full chart height */
}

.graph .bar {
    position: absolute;
    bottom: 0 !important;
    width: 100%;
    border-top: 2px solid white;

    -webkit-transition: height var(--graph-animation-duration) ease;
        -ms-transition: height var(--graph-animation-duration) ease;
            transition: height var(--graph-animation-duration) ease;
}

/* Bars start hidden ONLY if .reveal-on-scroll WITHOUT .reveal */
.graph .reveal-on-scroll:not(.reveal) .bar {
    height: 0 !important;
}

.graph .y-axis {
    position: relative;
    height: var(--graph-chart-height);
    width: var(--graph-y-axis-width);
}

.graph .y-axis::after {
    display: block;
    content: "snt/l";
    position: absolute;
    bottom: calc(100% + var(--paragraph-font-size));
    left: 0.5rem;
    width: 100%;
    font-size: var(--paragraph-font-size);
    font-weight: 700;
}

.graph .y-axis span {
    position: absolute;
    left: 0;
    width: 100%;
    color: #000;
    line-height: 1;
    text-align: center;

    -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
            transform: translateY(50%);
}

.graph .y-axis span::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%; /* Align tick line to middle of label */
    width: 0.5rem;
    height: 1px;
    background-color: #000;
}

.graph .y-axis span:first-child::after {
    opacity: 0;
}

.graph .x-axis {
    display: flex;
    gap: var(--graph-bar-spacing);
    margin-top: 0.25rem;
    margin-left: calc(var(--graph-y-axis-width) + var(--graph-bar-spacing));
    width: calc(100% - var(--graph-y-axis-width) - var(--graph-bar-spacing));
}

.graph .x-axis span {
    text-align: center;
    flex: 1;
    min-width: 0;
}
    
.graph .y-axis span,
.graph .x-axis span {
    font-size: 0.75rem;
}

.graph .graph-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: center;
    align-items: flex-start;
}

.graph .graph-info > div {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    margin: 0.5rem 1rem;
    white-space: nowrap;
}

.graph .graph-info > div > div.rectangle {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.75rem;
    vertical-align: middle;
    flex-shrink: 0;
}

.graph .graph-info > div > div.otsikko {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.graph .graph-info .otsikko {
    font-size: var(--paragraph-font-size);
    font-weight: 400;
    font-style: normal;
    line-height: 0.8;
}

.graph .graph-info > div:nth-of-type(1) .rectangle {
    background-color: #f89646;
}

.graph .graph-info > div:nth-of-type(2) .rectangle {
    background-color: #ec6113;
}


/*
   BALLOONS
*/

.balloon img {
    width: 100%; height: 100%;
    object-fit: cover;

    -webkit-transition: transform 0.3s ease;
        -ms-transition: transform 0.3s ease;
            transition: transform 0.3s ease;

    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

.balloon:hover img {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
}

/*
   ALOITUS
*/
#aloita h1 {
    margin-bottom: 1rem;
}

#aloita .hide-mob.balloon {
    position: absolute;
    top: 2rem;
    right: 1rem;
    width: 8rem; height: 8rem;
}

#aloita .show-mob.balloon {
    position: relative;
    width: 8rem; height: 8rem;
    margin: 0 auto;
}

#aloita .centered-text-wrap {
    max-width: 35rem;
}

#aloita .splide-content {
    position: relative;
    margin: 0 0.7rem;
}

#aloita .splide__arrow { 
    display: none;
}

#aloita .splide-content figure {
    position: relative;
    width: 19em;
    font-size: 1rem;
    border-radius: 1.2em;
    margin-bottom: 0;
    cursor: pointer;
    overflow: hidden;

    -webkit-transition: background-color 0.5s ease;
        -ms-transition: background-color 0.5s ease;
            transition: background-color 0.5s ease;
}

#aloita .splide-content figure.bg-bright-green:hover {
    background-color: var(--bg-bright-green-darkest);
}

#aloita .splide-content figure.bg-green:hover {
    background-color: var(--bg-green-darkest);
}

#aloita .splide-content figure.bg-cold-green:hover {
    background-color: var(--bg-cold-green-darkest);
}

#aloita .splide-content figure:after {
    display: block;
    content: '';
    width: 100%;
    padding-bottom: 55.26%;
}

#aloita .splide-content figure img {
    position: absolute;
}

#aloita .splide-content figure figcaption {
    position: absolute;
    color: white;
    font-family: "Sofia Sans Extra Condensed", sans-serif;
    font-weight: 600;
    font-size: 2.5em;
    font-style: normal;
    line-height: 0.7;
    text-transform: uppercase;
    white-space: nowrap;
}

#aloita .splide-content figure figcaption > span {
    display: block;
    white-space: nowrap;
    line-height: inherit;
}

#aloita .splide-content figure figcaption .more-lh {
    line-height: 1.1;
}

#aloita .splide-content figure figcaption small {
    font-size: 68%;
    line-height: inherit;
}

#aloita .slide-hedelmista-rangaistaan figure img {
    width: 50%;
    left: -6%;
    bottom: -4%;
}
#aloita .slide-hedelmista-rangaistaan figure figcaption {
    top: 15%;
    left: 49%;
}

#aloita .slide-mehuista-virvoitusjuomaveroa figure img {
    width: 25%;
    left: 5.5%;
    bottom: 0;
}
#aloita .slide-mehuista-virvoitusjuomaveroa figure figcaption {
    top: 17%;
    left: 35%;
}

#aloita .slide-sokerivero figure img {
    width: 28.5%;
    bottom: 0;
    right: 4%;
}
#aloita .slide-sokerivero figure figcaption {
    top: 16%;
    right: 36%;
}

#aloita .slide-hanavedesta-veroa figure img {
    width: 36.5%;
    bottom: 0;
    right: 0;
}
#aloita .slide-hanavedesta-veroa figure figcaption {
    left: 7%;
    top: 15%;
}

#aloita .slide-vahainen-verotuotto figure img {
    width: 48.5%;
    right: -5%;
    bottom: -2%;
}
#aloita .slide-vahainen-verotuotto figure figcaption {
    left: 7%;
    top: 15%;
}

#aloita .slide-vaikutus-tyollisyyteen figure img {
    width: 30.8%;
    top: 0;
    right: 0;
}
#aloita .slide-vaikutus-tyollisyyteen figure figcaption {
    right: 34%;
    bottom: 14%;
}


/*
   HEDELMISTÄ RANGAISTAAN
*/
#hedelmista-rangaistaan .note-box-body {
    padding-bottom: 1.5em;
}

#hedelmista-rangaistaan .hide-mob img.section-img {
    width: 102.6%;
    left: -5%;
    margin-bottom: 0.5rem;
    margin-top: -1.2rem;
}

#hedelmista-rangaistaan .show-mob img.section-img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 1rem;
}

#hedelmista-rangaistaan .colored-bar .colored-bar-img-col img {
    width: 8.7rem;
}


/*
   MEHUISTA VIRVOITUSJUOMAVEROA
*/
#mehuista-virvoitusjuomaveroa .hide-mob img.section-img {
    width: 100%;
    left: -2%;
    margin-bottom: 2rem;
    margin-top: 0;
}

#mehuista-virvoitusjuomaveroa .show-mob img.section-img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 1rem;
}

#mehuista-virvoitusjuomaveroa .row-1 .text-wrap {
    max-width: 22.5rem;
}

#mehuista-virvoitusjuomaveroa .note-box {
    margin-top: -4rem;
    margin-left: 1rem;
}

#mehuista-virvoitusjuomaveroa .note-box-body {
    margin-top: -2.9em;
}

#mehuista-virvoitusjuomaveroa .note-box img {
    position: absolute;
    top: 3.8em;
    right: 0;
    width: 25%;
}

#mehuista-virvoitusjuomaveroa .colored-bar .colored-bar-img-col img {
    width: 6rem;
    right: 0;
}

#mehuista-virvoitusjuomaveroa .colored-bar-padding {
    padding-left: 0;
}


/*
   SOKERIVERO
*/
#sokerivero img.section-img {
    max-width: 440px;
    margin: 0 auto 1.5rem;
}

#sokerivero .colored-bar-padding {
    padding-right: 0;
}

#sokerivero .colored-bar .colored-bar-img-col img {
    width: 6rem;
}


/*
    HANAVESTÄ VEROA
*/
#hanavedesta-veroa .hide-mob img.section-img {
    max-width: 860px;
    margin: 0 auto 2.5rem;
}

#hanavedesta-veroa .show-mob img.section-img {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 1rem;
}

#hanavedesta-veroa .colored-bar .colored-bar-img-col img {
    width: 6rem;
    right: 0;
}

#hanavedesta-veroa .colored-bar-padding {
    padding-left: 0;
}


/*
    VÄHÄINEN VEROTUOTTO
*/
#vahainen-verotuotto .chart-container {
    width: 110%;
    left: -5%;
}

#vahainen-verotuotto .graph-info {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

#vahainen-verotuotto .colored-bar-padding {
    padding-right: 0;
}

#vahainen-verotuotto .colored-bar .colored-bar-img-col img {
    max-width: 7.5rem;
}

#vahainen-verotuotto .table-wrapper {
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;  
}

#vahainen-verotuotto table {
    width: 100%;
    font-size: 0.65rem;
    margin: 0 auto 1.5rem;
}

#vahainen-verotuotto table thead td {
    color: #000;
    font-weight: 700;
    padding: 0 1rem;
}

#vahainen-verotuotto table tbody tr td:nth-of-type(2) {
    padding: 0.65rem 0;
}

#vahainen-verotuotto table tbody tr:nth-child(odd) {
    background-color: #a7a7a7;
}

#vahainen-verotuotto table tbody tr:nth-child(even) {
    background-color: #b8b8b8;
}

#vahainen-verotuotto table tbody td {
    color: white;
    font-weight: 700;
    padding: 0.65rem 1rem;
    white-space: nowrap;
}

#vahainen-verotuotto table td:nth-of-type(2) {
    text-align: center;
    width: 27%;
    padding: 0;
    border-left: 0.12rem solid white;
}


/*
    VAIKUTUS TYÖLLISYYTEEN
*/
#vaikutus-tyollisyyteen .hide-mob img.section-img {
    width: 104%;
    left: -5%;
    margin-bottom: 2rem;
}

#vaikutus-tyollisyyteen .show-mob img.section-img {
    margin-bottom: 1rem;
}

#vaikutus-tyollisyyteen .colored-bar-padding {
    padding-right: 0;
}

#vaikutus-tyollisyyteen .colored-bar .colored-bar-img-col img  {
    width: 6rem;
}

#vaikutus-tyollisyyteen .note-box {
    margin-top: -1rem;
    margin-bottom: 1rem;
}

#vaikutus-tyollisyyteen .note-box-body .note-box-title {
    margin-bottom: 0;
}

#vaikutus-tyollisyyteen .note-box-body {
    padding: 3em 1.5em 3.5em;
}