  /* el menú en si mismo */
  .mi-menu  {
	border-radius: 0px;
	list-style-type: none;
	margin: 0 auto; /* si queremos centrarlo */
	padding: 0;
	/* la altura y su ancho dependerán de los textos */
    height: 40px;
	/* el color de fondo */
	background-color:#1A7699;
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
	
  }
  .mi-menu li a {
	border-left: 1px solid;
	border-right: 1px solid;
	color: #FFF;/* color texto enlace */
	display: block;
	font-family: arial;
	font-size: 12px;
	font-weight: normal;
	line-height: 40px;
	padding: 0 36px;/* para hacer mas ancho el boton y llegar al final*/
	margin: 0px 0;
	text-decoration: none;



















    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
	border-left-color: #1A7699;
	border-right-color: #1F8CB6;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a {
	color: #1A7699;
	background-color:#FFF;
}

  /* los submenús */
  .mi-menu ul {
	border-radius: 0 0 5px 5px;
	left: 0px;
	margin: 0px;
	opacity: 0; /* no son visibles */
	position: absolute;
	top: 40px; /* se ubican debajo del enlace principal */
	/* el color de fondo */
	background-color:#8D8C89;




    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1;
  
   }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0px;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
	height: 36px; /* los mostramos */
	overflow: visible;
	padding: 0;
  }
  .mi-menu ul li a {
	border: none;
	border-bottom: 1px solid;
	margin: 0px 0px 0px -40px;/*subcategorias distancias
    /* el ancho dependerá de los textos a utilizar */
	padding: 0px 0px 0px 20px;
	width: 200px;
	border-bottom-color: #999;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a {  border: none; }
#inicio a#inicio, #acerca a#acerca, #representaciones a#representaciones, #mercados a#mercados, #novedades a#novedades, #aplicaciones a#aplicaciones, #servicios a#servicios, #metodologia a#metodologia, #asesor a#asesor, #contactos a#contactos {
	color: #145B76;
	background-color:#FFF;
	font-size: 12px;
	
	
	
	
	
	
	
	
}
