#cont_menu{ width:85%;  height:auto;  position:relative;  float:right;  text-align:right;  margin-top:25px}
/* Quitamos estilos por defecto de el tag UL */
nav.menu{ width:75%;  float:left}
nav.menu ul{ list-style:none;  margin:1px;  padding:1px}
/* Centramos y ponemos los textos en mayuscula */
nav.menu li{ display:inline-block;  margin-left:0px}
/* Damos estilo a nuestros enlaces */
nav.menu li a{ padding:8px 15px;  display:block;  color:#000;  text-decoration:none;  text-align:center;  transition-property:all;  transition-duration:0.2s;  font-size:14px;  font-family:'Open Sans',sans-serif;  border-radius:5px; line-height:16px}
nav.menu li a:hover{ background:#000;  color:#fff}
nav.menu li ul{display:none; position:absolute; min-width:10px}
nav.menu li:hover >ul{ display:grid;  z-index:10; position:absolute; min-width:10px}
nav.menu li ul li{position:relative}
nav.menu li ul li ul{right:-10px; top:0px}
.blue{ background:#000 !important;  color:#fff !important}
.blue:hover{ background:#000 !important;  color:#fff !important}
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{ display:none;  background:url(nav.png) no-repeat center center;  float:right;  width:50px;  height:50px;  position:absolute;  right:0;  top:0;  opacity:.8}
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
#nav-mobile.nav-active{ opacity:1}
/* Content */
#content{ width:100%;  height:200px;  border:1px solid #ccc;  background:yellow;  margin:0px auto}
/* MEDIA QUERY*/
@media only screen and (max-width:1024px){ .cont_menu{ width:100%;  margin:10px}}
@media only screen and (max-width:768px){ #cont_menu{ width:100%;  height:auto;  min-height:60px;  background-color:#000;  position:relative;  float:none;  text-align:right;  margin:0px;  line-height:0px}
 .cont_menu{ text-align:center}
 nav.menu li a{ color:#fff}
 /* 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{margin:0; padding:0; background:#000;  border-bottom:1px solid #000;  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;  background-color:#000; color:#fff; border:1px solid #000;  display:block; font-size:14px; padding:12px !important; padding:0;}
 nav.menu li a:hover{ background:#000;}
 nav.menu li ul{display:none; position:absolute; min-width:10px}
nav.menu li:hover >ul{ display:grid;  z-index:10; position:absolute; min-width:10px}
nav.menu li ul li{position:relative}
nav.menu li ul li ul{right:-10px; top:0px}
 nav.menu li a span{ display:none}
 nav.menu li.parent{background:none !important; padding:0}
 nav.menu li:hover a, 
 nav.menu li.current-menu-item >a{border:1px solid #000 !important; color:#fff !important}
ul.sub-menu{display:block; margin-top:-1px; margin-left:20px; position:static; padding:0; width:inherit}
ul.sub-menu li:first-child{border-top:1px solid #000 !important}
ul.sub-menu li a.parent{background-color:#000; color:#fff; }}
 /* 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}}