.cont_menu{
    width: 1024px;
    margin: 0px auto;
    text-align: right;
}
/* Quitamos estilos por defecto de el tag UL */
nav.menu{
}
nav.menu ul{
    list-style: none;
}
/* Centramos y ponemos los textos en mayuscula */
nav.menu li{
    display: inline-block;
}
/* Damos estilo a nuestros enlaces */
nav.menu li a{
    padding: 10px 20px;
    display: block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition-property:all; 
    transition-duration: 0.2s;
    font-size: 14px;
    line-height: 1.4em;
}
nav.menu li a:hover{
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{
    display: none;
    background: url(nav.png) no-repeat center center;
    float: right;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    top:0;
    opacity: .6;
}   
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
#nav-mobile.nav-active{
    opacity: 1;
}
/* Content */
#content{
    width: 80%;
    height: 2000px;
    border: 1px solid #ccc;
    background: yellow;
    margin: 0px auto;
}
/*
    MEDIA QUERY
*/
@media only screen and (max-width: 1024px) {
    .cont_menu{
        width: 100%;
        margin:0px;
    }
}
@media only screen and (max-width: 768px) {
    .cont_menu{
        text-align: center;
    }
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    nav.menu{
        width: 100%;
        float: none;

    }
    /* Convertimos nuestra lista de enlaces en un menú horizontal */
    nav.menu ul{
        max-height: 0;
        overflow: hidden;
    }
    /* estilos para los LI del menu */
    nav.menu li{
        background: #33363b;
        border-bottom: 1px solid #282b30;
        float: none;
        display: block;
    }
    /* Quitamos el borde del ultimo item del menú */
    nav.menu li:last-child{ border-bottom: 0;}
    nav.menu li a{
        padding: 15px 0;
        height: auto;
        line-height: normal;
    }
    nav.menu li a:hover{
        background:#2a2d33;
    }
    nav.menu li a span{
        display: none;
    }
    /* Agregamos una animación al despligue del menú */
    nav.menu ul.open-menu{
        max-height: 400px;
        -webkit-transition: max-height .4s;
        -moz-transition: max-height .4s;
        -ms-transition: max-height .4s;
        -o-transition: max-height .4s;
        transition: max-height .4s;
    }

}