@media only screen and (min-width:480px) and (max-width: 640px){
    body {
        background-color: red;
    }
}

@media only screen and (max-width: 479px){
    body {
        background-color: antiquewhite;
    }
    #header{display: none;}
    #main{display: none;}
    #menu {width: 100%;}
    #logo{    display: block; margin:auto;}
}

@media only screen and (min-width: 641px){
    body {
        background-color: white;
    }
    #menu{
        display:none;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
        font-size:20px;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    /* Change the link color to #111 (black) on hover */
    li a:hover {
        background-color: #111;
    }

}

@media only print {
    #header {

        display: none;
    }

    body {
        background-color: white;
    }
}