What's the CSS to uncheck a checkbox which you increase the screen width?

Currently clicking the ☰ label toggles the mobile menu in mobile width.

Increasing screen width hides mobile menu.

PROBLEM: Toggled menu is still checked when resized to mobile width.

NEED: Checkbox to uncheck when the screen width exceeds X pixels.

Code so far:

    <!--toggle-->
                    <li><a class="menu" href="#">
                    <label for="toggle">☰</label>
                    <input id="toggle" type="checkbox">
                    <div class="togglemenu">test</div>
                    </a></li>

    /*toggle menu*/

    #toggle {
        display: none; /*hide checkbox*/
    }

#toggle:checked + .togglemenu { /*show menu on click*/
    display: block;
}

    .togglemenu {
        width: 100px;
        height: 100px;
        background: #333;
        top: 60px;
        right: 0;
        position: absolute;
        display: none;
    }

    /*hide menu width increase*/

    @media screen and (min-width: 480px) {
        .menu {
            display: none;
        }
    }

I'm sure I've done it before, just forgotten over time. Any ideas? Help appreciated, thanks.