@import url(http://fonts.googleapis.com/css?family=Electrolize);
/*Strip the ul of padding and list styling*/
#menup{
	position: relative;
	width: 100%;
	float: left;
	background: #2f3036;
	height: 40px; 
}
/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{ float: left; margin-left: 150px; margin-top: 5px; background: url("../img/bg-menu.jpg") repeat-x;}
 
    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.9em;
        font-weight: 700;
    }
 
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
            display: block;
            float: left;
            text-transform: uppercase;
            text-align: center;
            color: #2f3036;
            border-right: 1px solid #2f3036;
            margin: 5px 0 5px 0;
        }
 
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #2f3036;
                text-decoration: none;
                height: 20px;
                line-height: 20px;
                padding: 0 26px;
                text-transform:uppercase;
				font-family:'Electrolize', sans-serif;
				font-weight: bold;
            }
                #menu li a:hover{
                    /*background: #151a1e;*/
                    color: #569AD7;
                }
 
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{
    display: none;
    background: url(../img/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;
    }
    @media only screen and (max-width: 768px) {

    #menup{
	position: relative;
	width: 100%;
	float: left;
	height: auto;
	padding: 0;
    margin: 0;
	}
 
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }
 
    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo */
    #menu{
        /*width: 100%;*/
        float: none;
        padding-top: 60px;
        padding-left: 0;
        background: #33363b;
        margin:0;
    }
 
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
            color: #fff;
        }
            /* estilos para los LI del menu */
            #menu li{
                background: #33363b;
                border-bottom: 1px solid #282b30;
                float: none;
                color: #fff;
            }
                /* Quitamos el borde del ultimo item del menú */
                #menu li:last-child{ border-bottom: 0;}
 
                #menu li a{
                    padding: 15px 0;
                    height: auto;
                    line-height: normal;
                    color: #fff;
                }
                #menu li a:hover{background:#2a2d33}
 
        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            transition: max-height .4s;
        }
}