#menu{
	position:relative;
	float: right;
	left:0px;
	top:110px;
	z-index:1000;
}   
    #menu ul{
        list-style: none;
        font-size: 11px;
		letter-spacing:1px;
		word-spacing:10px;
    }
        #menu li{
           display: block;
           float: left;
           text-transform: uppercase;
           text-align: right;
        }
            #menu li a{
                display: block;
                color: #FFF;
                text-decoration: none;
                padding: 0 0 0 40px;
            }
            #menu li a:hover{
                color: #000;
            }

    #nav-mobile{
        display: none;
        background: url(../img/nav.png) no-repeat center center;
        float: right;
        width: 60px;
        height: 60px;
        position: absolute;
		z-index:100;
		left:300px;
		top:10px;

    }   
        #nav-mobile.nav-active{
			background: url(../img/cerrar.png) no-repeat center center;
			position:absolute;
			z-index:100;
        }

@media only screen and (max-width: 769px) {
    
    /* mostramos #nav-mobile*/
    #nav-mobile{
		display: block;
		position:absolute;
		z-index:100;
		
	}
 
    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo */ 
    #menu{
        float: none;
		position:absolute;
		top:-14px;
		left:-40px;
    }

        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background:#EEE;
                border-bottom: 1px solid #000;
                float: none;
				text-align:left;
				width:320px;
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 15px 20px;
                    height: auto;
                    line-height: normal;
					color:#000;
                }
                #menu li a:hover{
					background:#CCC;
					color:#000;
				}

        /* Agregamos una animación al despligue del menú */
        #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;
			position:absolute;
        }

}