@media only screen and (max-width: 767px)
{
    body {
        font-size: 50%;
    }

    .main {
    	padding: 0 5%;
    }

    div#site {
        /* height: 750px; */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    header {
        height: 170px;
        min-width: 100%;
    }

    #logo {
        display: block;
    }

    div#navigation {
        min-width: 100%;
        top: 0px;
        right: 0px;
        position: relative;
        margin: 0px, auto;
    }

    div#navigation ul {
        clear: both;
        margin: 0px, auto;
        list-style: none;
    }

    div#navigation ul li {
        position: relative;
        clear: both;
        margin: 0px, auto;
    }

    div#blog {
        float: left;
        margin: 0;
        padding: 8px;
    }

    div#blog img {
        width: 40%;
    }

    footer {
        width: 100%;
        height: 20px;
        color: #666;
        padding: 0px;
    }
}