/*MENÚ HORIZONTAL CON DESPLEGABLE*/

#cssmenu {
  width: auto;
  padding: 0;
  display: block;
  position: relative;
  font-family: 'Hind', sans-serif;
  font-size: 12px;
  font-weight:600;
  z-index:400;
  /*float:right;*/
  padding: 0px 0px;
  padding-top:0px;
}

#cssmenu ul {list-style: none; margin: 0; padding: 0; display: block;}#cssmenu ul{ display: flex; flex-wrap: wrap; justify-content: right }
#cssmenu ul:after,
#cssmenu:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {margin-right: 2px; padding: 0px; display: block; position: relative;}
#cssmenu ul li.tablet.visible{visibility:hidden; display:none;}

#cssmenu ul li a {
  text-decoration: none;
  display: block;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu ul li a.active{color: #000000;}/*añadido*/
/*#cssmenu ul li a:hover{background:#823133;}*/

#cssmenu ul li ul {position: absolute; left: -9999px; top: auto;}/*submenú*/
#cssmenu ul li ul li { max-height: 0; position: absolute; background: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}/*submenú*/
#cssmenu ul li ul li:first-child{margin-top:0px}/*separación del submenú*/


/*símbolo > en el submenú*/
#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: "\00bb";
  color:#fff;
  z-index: 1;
  top: 10px;
  right: 10px;
}

#cssmenu.align-right ul li ul li.has-sub:after {right: auto; left: 15px;}
#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: "";
  z-index: 2;
}
#cssmenu.align-right ul li ul li.has-sub:before {right: auto; left: 15px; border-left-color: transparent; border-right-color: #ffffff;}

/*submenú*/

#cssmenu ul li ul li a {
  font-size:1.2em; /*0.9285em*/
  text-transform: none;
  color: #828282;
  letter-spacing: 0;
  display: block;
  width: 280px;
  padding:11px 15px;
}

#cssmenu ul li ul li {border-bottom:1px solid rgba(0,0,0,0.14);}
#cssmenu ul li ul li:last-child{border-bottom:0px solid #3b3b3b;}

#cssmenu ul li ul li:hover > a {

	-o-transition: color .3s linear, background .3s linear;
	-moz-transition: color .3s linear, background .3s linear;
    -webkit-transition: color .3s linear, background .3s linear;
    transition: color .3s linear, background .3s linear;
}

#cssmenu ul li ul li.active {color: #fff; }
#cssmenu ul li ul li.active a {color: #222;}

#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {color: #fff; background:#2e3936;}

#cssmenu ul li ul li:hover:after, #cssmenu ul li ul li.active:after {background: none;}
#cssmenu ul li ul li:hover > ul {left: 100%; top: 0;}
#cssmenu ul li ul li:hover > ul > li {max-height: 72px; position: relative;}
#cssmenu > ul > li {float: left;}

#cssmenu > ul > li:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  z-index: 0;
  background: #494e55;
}




/*catego*/

#cssmenu > ul > li > a {color: #ffffff; padding: 12px 15px 8px 15px; letter-spacing: 1px; z-index: 2; position: relative;-webkit-transition: all ease .3s;
	   -moz-transition: all ease .3s;
	    -ms-transition: all ease .3s;
	     -o-transition: all ease .3s;
	        transition: all ease .3s;}

#cssmenu > ul > li:hover > a {color: #ffff01; background:inherit; background:#b62247; border-radius:inherit;}
#cssmenu > ul > li.active > a {color: #ffff01; position:relative; background:#b62247; border-radius:inherit;}


#cssmenu > ul > li.has-sub.active {color: #fff; background:#b62247; font-size: 16px }

#cssmenu > ul > li.has-sub > a{background: none}
#cssmenu > ul > li.has-sub > a:hover{background: none}
#cssmenu > ul > li.has-sub > a.active {background: #006b7b; color: #fff;}

#cssmenu > ul > li:hover > ul {left: 0;}
#cssmenu > ul > li:hover > ul > li {max-height: 72px; position: relative;}

#cssmenu #menu-button {display: none;}
#cssmenu > ul > li > a {display: block;}
#cssmenu > ul > li {width: auto;}
#cssmenu > ul > li > ul {width: 280px; display: block;}
#cssmenu > ul > li > ul > li {width: 280px; display: block;}

@media (min-width:1200px) {
	#cssmenu > ul > li > a {padding-left:16px; padding-right:25px;}
	#cssmenu > ul > li.has-sub > a, #cssmenu > ul > li.has-sub > a:focus {background: url('../images/trimenu.png') no-repeat 90% 20px;}
	#cssmenu > ul > li.has-sub > a:hover, #cssmenu > ul > li.active.has-sub > a {background: url('../images/trimenu.png') no-repeat 90% 20px;}
}

@media (min-width:1400px) {
	#cssmenu > ul > li > a {padding-left: 16px; padding-right:25px;}
	#cssmenu > ul > li.has-sub > a, #cssmenu > ul > li.has-sub > a:focus {background: url('../images/trimenu.png') no-repeat 92% 20px;}
	#cssmenu > ul > li.has-sub > a:hover, #cssmenu > ul > li.active.has-sub > a {background: url('../images/trimenu.png') no-repeat 92% 20px;}
}

/*@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {*/

@media (max-width: 992px) {
  
  
  #cssmenu{background: none; float:none; margin:0 auto; position:relative; margin-top:0px; padding:0px;
  	/*position:absolute; top:1px; left:0; margin:0 auto; width:100%; z-index:1;*/  position:relative; z-index:2
  }
  /*#cssmenu ul li:first-child{margin-top:15px;}*/
  
  #cssmenu ul{
	position:absolute; z-index:-1; top:49px; left:0px;
	/*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);*/
  }/*añadido por mi para que despliegue sobre contenido*/
  
  
  #cssmenu ul li.tablet.visible{visibility:visible; display:inherit;}

  
  #cssmenu > ul > li > a {color: #4b4b4b; font-size:1em; padding:0px; border-top:0px;background:none;}
  #cssmenu > ul > li > a:hover {background: #fff;}
  #cssmenu ul li:last-child{padding-bottom: 0px;}
  
 
  #cssmenu > ul {max-height: 0; overflow: hidden;}
  #cssmenu > ul > li > ul {width: 100%; display: block; }

   
  #cssmenu ul li > a:hover {color: #4b4b4b;background:#efefef}
  
  #cssmenu > ul > li.active > a {color: #fff; border-top:0px;background:#b62247}
  #cssmenu > ul > li.active > a:hover {color: #fff; background:#b62247}
  
  #cssmenu ul li ul li:hover > a,
  #cssmenu ul li ul li.active > a {color: #ffff01; background:none;}

  
  #cssmenu.align-right ul li a {text-align: left;}
  #cssmenu > ul > li > ul > li {width: 100%; display: block;}
  #cssmenu.align-right ul ul li a {text-align: left;}
  #cssmenu > ul > li > ul > li > a {width: 100%; display: block; font-size:0.8571em}
  #cssmenu ul li ul li a {width: 100%;}
  #cssmenu.align-center > ul {text-align: left;}
  #cssmenu.align-center > ul > li {display: block;}
  #cssmenu > ul.open {max-height: 2000px; /*border-top: 1px solid rgba(110, 110, 110, 0.25);*/background:#f8f8f8;}
  #cssmenu ul {width: 100%;}
  #cssmenu ul > li {float: none; width: 100%; border:none; border-top: 1px solid rgba(110, 110, 110, 0.15); z-index:2;}
  #cssmenu ul > li:first-child {border-top: 0px solid rgba(110, 110, 110, 0.15);}
  #cssmenu ul li a {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 12px 10px; }  
  #cssmenu ul > li:after {display: none;}

  #cssmenu ul li.has-sub > a:after,
  #cssmenu ul li.has-sub > a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {display: none;}
 
 
  #cssmenu > ul > li.has-sub.active {color: #f42736; background:#efefef}

 
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover > ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover > ul {left: 0; position: relative; right: auto; border:none; box-shadow: none; background:#efefef}
  
  /*submenú*/
  #cssmenu ul li ul li,
  #cssmenu ul li:hover > ul > li {max-height: 999px; position: relative; background: none; box-shadow: none; border:none;}
  #cssmenu ul li ul li a {padding: 8px 10px 8px 10px; color: #828282;}
  #cssmenu ul li ul ul li a {padding: 8px 20px 8px 50px;}
  
  #cssmenu ul li ul li:hover > a {color: #000000;}
  #cssmenu > ul > li:hover > a {color: #000000;}
  
  #cssmenu ul li ul li a { font-size:1em;}
    
  #cssmenu > ul > li.fonver > a{display:none; visibility:hidden;}

	#cssmenu #menu-button {
	  display: block;
	  padding: 12px 0px;
	  cursor: pointer;
	  font-size: 1.1333em;
	  text-decoration: none;
	  color: #fff;
	  font-weight:normal;
	  text-transform: uppercase;
	  background: none;
	  
	}
	#cssmenu #menu-button:after {
	  content: "";
	  position: absolute;
	  right: 20px;
	  top: 17px;
	  display: block;
	  -webkit-box-sizing: content-box;
	  -moz-box-sizing: content-box;
	  box-sizing: content-box;
	  border-top: 2px solid #fff;
	  border-bottom: 2px solid #fff;
	  width: 28px;
	  height: 4px;
	}
	#cssmenu #menu-button.menu-opened:after {
	  border-top: 2px solid #fff;
	  border-bottom: 2px solid #fff;
	}
	#cssmenu #menu-button:before {
	  content: "";
	  position: absolute;
	  right: 20px;
	  top: 29px;
	  display: block;
	  width: 28px;
	  height: 2px;
	  background: #fff;
	}
	#cssmenu #menu-button.menu-opened:before {background: #fff;}
}