@media all and (max-width: 1600px) {

    .menu-toggle {
        font-size: 0.7rem;
    }

    nav {
        width: 20rem;
    }

    nav #menu ul {
        font-size: 1.3rem;
    }

}


@media all and (max-width: 1300px) {

    html {
       font-size: 18px; /* html font size affects everything! */
    }

    footer .footer-box {
        max-width: 90%;
        margin-top: 1rem;
    }

}

@media (max-width: 1150px) {

    :root {
        --graph-bar-spacing: 0.5rem;
    }

    .graph .graph-info {
        width: 100%;
    }

    .graph .graph-info > div {

    }

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

}

@media all and (max-width: 1100px) {

    #hedelmista-rangaistaan .note-box {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    #mehuista-virvoitusjuomaveroa .note-box {
        margin-top: 0;
    }

}

@media all and (max-width: 1000px) {

    :root {
        --content-side-padding: 2rem;
    }

   #aloita .hide-mob.balloon {
        display: none;
    }

    #aloita .show-mob.balloon {
         display: block;
    }


    #hedelmista-rangaistaan .hide-mob img.section-img {
        width: 100%;
        left: auto;
        margin-top: 0;
        margin-bottom: 1rem;
    }

    #mehuista-virvoitusjuomaveroa .note-box {
        margin-top: 1.5rem;
    }

}

@media all and (max-width: 900px) {

    .note-box {
        font-size: 0.9rem;
    }

    footer .balloon {
        left: 2rem;
    }

}

@media all and (max-width: 767px) {

    :root {
        --content-side-padding: 1rem;
        --graph-bar-spacing: 1rem;
    }

    html {
       font-size: 20px; /* html font size affects everything! */
    }

    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 1.9rem;
    }

    .colored-bar .colored-bar-title {
        font-size: 1.6rem;
    }

    .hide-mob { display: none; }
    .show-mob { display: block; }

    .menu-toggle {
        font-size: clamp(0.3rem, 2.5vw, 0.6rem);
    }

    nav { width: 100%; }
    nav #menu ul {
        font-size: 3vh;
        text-align: center;
        left: 50%;
        padding: 1rem 5vw;

        -webkit-transform:  translate(-50%, -50%);
        -ms-transform:      translate(-50%, -50%);
        transform:          translate(-50%, -50%);
    }
    nav #menu ul li {
        margin: 3vh 1vh;
    }

    footer img.footer-fruits { margin-bottom: 0; }

    footer .balloon {
        top: -4em;
        left: 1rem;
        width: 7rem; height: 7rem;
    }


    .text-wrap,
    .centered-text-wrap {
        max-width: none !important;
    }

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

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

    .colored-bar img {
        display: none !important;
    }

    .video-container .control.play {
        width: 3rem;
        height: 3rem;
    }
    
    .video-container .control.soundoff, 
    .video-container .control.soundon {
        width: 15vw;
        height: 15vw;
        padding: 5vw;
    }

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

    .parallax-bg .parallax-img {
        position: relative;
        top: auto; left: auto;
        margin-top: 0 !important;
        -webkit-transform: none !important;
            -ms-transform: none !important;
                transform: none !important;
    }

    .parallax-bg-1 .parallax-img {
 
    }

    .graph .bar-label-outside,
    .graph .bar-label-inside {
        font-size: 0.7rem;
    }

    .graph .y-axis span, 
    .graph .x-axis span {
        font-size: 0.7rem;
    }

    .note-box {
        font-size: 3vw;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #hedelmista-rangaistaan .note-box {
        margin-bottom: 2.5rem;
        margin-top: 1rem;
    }

    #vahainen-verotuotto .chart-container {
        position: relative;
        width: 100%;
        left: -15px;
    }

    #mehuista-virvoitusjuomaveroa .note-box {
        margin-bottom: 2.5rem;
        margin-top: 1rem;
    }

    #aloita .splide-content figure {
        font-size: 0.7rem;
    }

    #vahainen-verotuotto .table-wrapper {
        margin-left: 0;
    }

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


}

@media all and (max-width: 600px) { 

    footer .balloon {
        top: -6em;
    }

}

@media all and (max-width: 500px) { 

    :root {
        --graph-bar-spacing: 0.5rem;
    }

    .note-box {
        font-size: 4.3vw;
    }

    footer .padding {
        padding-top: 2rem;
    }

    footer .balloon {
    
    }

}

@media (max-width: 400px) {

    .graph .graph-info > div > div.rectangle {
        margin-right: 15px;
    }

}