/*MENU INF ESPAÑOL*/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 41px;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
	margin-top: 1px; 
	width: 700px; 
	height: 41px;
	background: url(../images/menu_inf_dcha.gif) right 0 no-repeat; 
	padding-right: 41px;
}
#cssmenu > ul {
  height: 41px; 
  background: url(../images/fondo_menu_inf.gif) repeat-x;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu a 					{ display: block; width: 130px; height: 41px; text-indent: -9999px; background-repeat: no-repeat; }
#cssmenu a#bot_inf1 			{ background-image: url(../images/bot_inf_procesos.gif); width: 140px; margin-right: 0px; }
#cssmenu a#bot_inf2 			{ background-image: url(../images/bot_inf_sistemas.gif); width: 190px; margin-right: 0px;}
#cssmenu a#bot_inf3 			{ background-image: url(../images/bot_inf_mecanica.gif); width: 140px; margin-right: 0px; }
#cssmenu a#bot_inf4 			{ background-image: url(../images/bot_inf_producto.gif); width: 140px; margin-right: 0px;}


#cssmenu > ul > li > a {
	display: block; width: 130px; height: 41px; text-indent: -9999px; background-repeat: no-repeat;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*Botonera roja con botones fijos ya que ha dejado de funcionar tras actualizacion de chrome y edge
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  transform: none !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
}*/

/*Botonera roja funcionando pero con efecto de elevacion
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  transform: rotateX(15deg) translateY(-5px);
  -webkit-transform: rotateX(15deg) translateY(-5px);
  -moz-transform: rotateX(15deg) translateY(-5px);
  transition: transform 0.3s ease-in-out;
}*/
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  transform: rotateX(30deg);
  -webkit-transform: rotateX(30deg);
  -moz-transform: rotateX(30deg);
  transition: transform 0.3s ease-in-out;
}

/*Botonera roja original, pero despues de actualizacion ha dejado de funcionar
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}*/
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 140px;
  height: 100%;
  background: #4A0002;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li > a#bot_inf2::before {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 190px;
  height: 100%;
  background: #4A0002;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a#bot_inf1:hover::before {
	width: 140px;
  background: url(../images/bot_inf_procesos.gif);
   background-position: 0 -41px;
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a#bot_inf2:hover::before {
	width: 190px;
  background: url(../images/bot_inf_sistemas.gif);
   background-position: 0 -41px;
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a#bot_inf3:hover::before {
	width: 140px;
  background: url(../images/bot_inf_mecanica.gif);
   background-position: 0 -41px;
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a#bot_inf4:hover::before {
	width: 140px;
  background: url(../images/bot_inf_producto.gif);
   background-position: 0 -41px;
}


/*MENU INF INGLÉS*/
#cssmenu_en,
#cssmenu_en ul,
#cssmenu_en ul li,
#cssmenu_en ul li a,
#cssmenu_en #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu_en:after,
#cssmenu_en > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 41px;
}
#cssmenu_en #menu-button {
  display: none;
}
#cssmenu_en {
	margin-top: 1px; 
	width: 700px; 
	height: 41px;
	background: url(../images/menu_inf_dcha.gif) right 0 no-repeat; 
	padding-right: 41px;
}
#cssmenu_en > ul {
  height: 41px; 
  background: url(../images/fondo_menu_inf.gif) repeat-x;
}
#cssmenu_en > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu_en a 					{ display: block; width: 130px; height: 41px; text-indent: -9999px; background-repeat: no-repeat; }
#cssmenu_en a#bot_inf1_en 			{ background-image: url(../images/bot_inf_procesos_en.gif); width: 140px; margin-right: 0px; }
#cssmenu_en a#bot_inf2_en 			{ background-image: url(../images/bot_inf_sistemas_en.gif); width: 190px; margin-right: 0px;}
#cssmenu_en a#bot_inf3_en 			{ background-image: url(../images/bot_inf_mecanica_en.gif); width: 140px; margin-right: 0px; }
#cssmenu_en a#bot_inf4_en 			{ background-image: url(../images/bot_inf_producto_en.gif); width: 140px; margin-right: 0px;}

#cssmenu_en > ul > li > a {
	display: block; width: 130px; height: 41px; text-indent: -9999px; background-repeat: no-repeat;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*#cssmenu_en > ul > li:hover > a,
#cssmenu_en > ul > li > a:hover {
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}*/
#cssmenu_en > ul > li:hover > a,
#cssmenu_en > ul > li > a:hover {
  transform: rotateX(30deg);
  -webkit-transform: rotateX(30deg);
  -moz-transform: rotateX(30deg);
  transition: transform 0.3s ease-in-out;
}

#cssmenu_en > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 140px;
  height: 100%;
  background: #4A0002;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu_en > ul > li > a#bot_inf2_en::before {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 190px;
  height: 100%;
  background: #4A0002;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu_en > ul > li:hover > a::before,
#cssmenu_en > ul > li > a#bot_inf1_en:hover::before {
	width: 140px;
  background: url(../images/bot_inf_procesos_en.gif);
   background-position: 0 -41px;
}
#cssmenu_en > ul > li:hover > a::before,
#cssmenu_en > ul > li > a#bot_inf2_en:hover::before {
	width: 190px;
  background: url(../images/bot_inf_sistemas_en.gif);
   background-position: 0 -41px;
}
#cssmenu_en > ul > li:hover > a::before,
#cssmenu_en > ul > li > a#bot_inf3_en:hover::before {
	width: 140px;
  background: url(../images/bot_inf_mecanica_en.gif);
   background-position: 0 -41px;
}
#cssmenu_en > ul > li:hover > a::before,
#cssmenu_en > ul > li > a#bot_inf4_en:hover::before {
	width: 140px;
  background: url(../images/bot_inf_producto_en.gif);
   background-position: 0 -41px;
}