.nav-open {
        display: none;
}

#nav {
        position: relative;
        float: left;
        width: 900px;
        margin: 20px auto;
        background: #333;
        font-family: Arial, sans-serif;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px #888;
        -moz-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
}

#nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

#nav ul li {
        float: left;
}

#nav ul li.close {
        display: none;
}


#nav ul li a {
        padding: 10px 15px;
        display: block;
        color: #fff;
        text-decoration: none;
}

#nav ul li a:hover {
        background: #111;
        color: #aaa;
}



@media screen and (max-width: 640px) {

.nav-open {
        position: fixed;
        top: 0;
        left: 0;
        background: #333;
        font-family: Arial, sans-serif;
        display: block;
        width: 100%;
}

.nav-open a {
        padding: 10px 15px;
        display: block;
        color: #fff;
        text-align: center;
        text-decoration: none;
}

#nav {
        position: fixed;
        top: -200%;
        left: 0;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
}

#nav:target {
        top: 0;
}

#nav ul li {
        float: none;
        text-align: center;
        border-bottom: 1px solid #555;
}

#nav ul li.close {
        display: block;
}

#nav ul li:last-child {
        border-bottom: none;
}

}