﻿/* Root = Horizontal, Secondary = Vertical */
/*ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 100%;*/
/*For KHTML*/
/*list-style: none;
  height: 24px;
  z-index:100;
}

ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left;*/
/*For Gecko*/
/*display: inline;
  list-style: none;
  position: relative;
  height: 24px;
    z-index:100;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 170px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul li {
  float: none;*/
/*For Gecko*/
/*display: block !important;
  display: inline;*/
/*For IE*/
/*}*/

/* Root Menu */
/*ul#navmenu a {
  border: 1px solid  #104A7B;
  border-right-color: #0F5FA3;
  border-bottom-color: #0F5FA3;
  padding: 0 6px;
  float: none !important;*/
/*For Opera*/
/*float: left;*/
/*For IE*/
/*display: block;
  background: #104A7B;
  color: #FFFFFF;
  font: 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 100%;*/
/*For IE*/
/*}*/

/* Root Menu Hover Persistence */
/*ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #EF2129;
  color: #FFF;
  
}*/

/* 2nd Menu */
/*ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #104A7B;
  color: #FFFFFF;
}*/

/* 2nd Menu Hover Persistence */
/*ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #EF2129;
  color: #FFF;
}*/

/* 3rd Menu */
/*ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #104A7B;
  color: #FFFFFF;
}*/

/* 3rd Menu Hover Persistence */
/*ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #EF2129;
  color: #FFF;
}*/

/* 4th Menu */
/*ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #104A7B;
  color: #FFF;
}*/

/* 4th Menu Hover */
/*ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #EF2129;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 170px;
}*/

/* Do Not Move - Must Come Before display:block for Gecko */
/*ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

@media (max-width: 576px) {
    
}*/

/*// Medium devices (tablets, 768px and up)*/
/*@media (max-width: 768px) {
    ul#navmenu {
        background: red
    }

    ul#navmenu {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        z-index: -3;
    }

        ul#navmenu > li > a {
            font-size: 0.6rem;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
             text-overflow: ellipsis; 
             max-width:40px; 
             width:40px; 
             min-width: 40px; 
            max-height: 25px;
             overflow-y: hidden; 
             overflow: hidden !important; 
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }
}*/

/* // Large devices (desktops, 992px and up) */
/*@media (max-width: 992px) {

}*/

/* // Extra large devices (large desktops, 1200px and up) */
/*@media (max-width: 1200px) {
}*/

/*nuevo*/
/* Root = Horizontal, Secondary = Vertical */
:root {
	--principal-navmenu: #104a7b;
	--red-navmenu: #ef2129;
	--white-navmenu: #ffffff;
	--text-navmenu: #121212;
}

ul#navmenu br {
	display: none;
}

ul#navmenu {
	box-sizing: border-box;
	margin: 0;
	border: 0;
	padding: 0;
	width: 100%;
	background-color: var(--principal-navmenu);
	height: auto;
	/*font-size: 16px;*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	z-index: 100;
	filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
	position: relative;
}

/* ******************************primer nivel */
ul#navmenu > li > a {
	display: block;
	box-sizing: border-box;
	/* border: 1px solid  #0F5FA3; */
	padding: 7px 16px;
	margin: 0;
	background: var(--principal-navmenu);
	text-align: left;
	/* background: #7b7210; */
	color: var(--white-navmenu);
	font: 0.75rem Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height: 25px;
	/*font-weight: bold;*/
}

ul#navmenu > li:hover > a {
	background-color: var(--red-navmenu);
	color: var(--white-navmenu);
	/* border-bottom: 4px solid var(--principal-navmenu) ;   */
}

ul#navmenu > li {
	margin: 0;
	border: 0;
	padding: 0;
	display: inline-block;
	/* display: inline;
    float: left; */
	position: relative;
	height: 25px;
	max-width: 185px;
	min-width: 185px;
	/*width:auto;*/
	/* max-width: 200px; */
	/*flex: 1;*/
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ******************************segundo nivel */
ul#navmenu > li > ul {
	margin: 0;
	border: 0;
	padding: 0;
	display: none;
	position: relative;
	/* top: 48px; */
	/* position: absolute; */
	/* top: 64px;  */
	z-index: 101;
	filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
}

ul#navmenu > li:hover > ul {
	display: block;
}

ul#navmenu > li > ul > li {
	height: min-content;
	display: block;
	position: relative;
	width: inherit;
}

ul#navmenu > li > ul > li > a {
	display: flex;
	justify-content: start;
	align-items: center;
	/* border: 1px solid  #0F5FA3; */
	padding: 1px 10px;
	margin: 0;
	background: var(--principal-navmenu);
	/* background: #7b7210; */
	color: var(--white-navmenu);
	font: 0.75rem Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	min-height: 25px;
	font-weight: normal;
	border-bottom: 1px solid rgb(0 0 0 / 0.2);
	/* transition: cubic-bezier(.18,1.07,.95,-0.65) 1000ms; */
}

ul#navmenu > li > ul > li:last-child > a {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li:hover > a {
	font-weight: normal;
	background: var(--red-navmenu);
}

ul#navmenu > li > ul > li:hover:last-child > a::after {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li:hover > a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-left: 5px solid var(--white-navmenu);
}

/* ******************************tercer nivel */
ul#navmenu > li > ul > li > ul {
	list-style: none;
	margin: 0;
	border: 0;
	padding: 0;
	width: 185px;
	display: none;
	position: absolute;
	left: 25px;
	top: 20px;
	z-index: 102;
	filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
}

ul#navmenu > li:hover > ul > li:hover > ul {
	display: block;
}

ul#navmenu > li > ul > li > ul > li {
	height: min-content;
	display: block;
	position: relative;
}

ul#navmenu > li > ul > li > ul > li > a {
	display: flex;
	justify-content: start;
	align-items: center;
	/* border: 1px solid  #0F5FA3; */
	padding: 0px 10px;
	margin: 0;
	background: var(--principal-navmenu);
	/* background: #7b7210; */
	color: var(--white-navmenu);
	font: 0.75rem Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	min-height: 25px;
	font-weight: normal;
	border-bottom: 1px solid rgb(0 0 0 / 0.2);
	/* transition: cubic-bezier(.18,1.07,.95,-0.65) 1000ms; */
}

ul#navmenu > li > ul > li > ul > li:first-child > a {
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li:last-child > a {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li:hover > a {
	font-weight: normal;
	background-color: var(--red-navmenu);
}

ul#navmenu > li > ul > li > ul > li:hover:first-child > a::after {
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li:hover:last-child > a::after {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li:hover > a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-left: 5px solid var(--white-navmenu);
}

/* ******************************Cuarto nivel */
ul#navmenu > li > ul > li > ul > li > ul {
	list-style: none;
	margin: 0;
	border: 0;
	padding: 0;
	width: 185px;
	display: none;
	position: absolute;
	left: 25px;
	top: 20px;
	z-index: 102;
	filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
}

ul#navmenu > li:hover > ul > li:hover > ul > li:hover > ul {
	display: block;
}

ul#navmenu > li > ul > li > ul > li > ul > li {
	height: min-content;
	display: block;
	position: relative;
}

ul#navmenu > li > ul > li > ul > li > ul > li > a {
	display: flex;
	justify-content: start;
	align-items: center;
	/* border: 1px solid  #0F5FA3; */
	padding: 0px 10px;
	margin: 0;
	background: var(--principal-navmenu);
	/* background: #7b7210; */
	color: var(--white-navmenu);
	font: 0.75rem Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	min-height: 25px;
	font-weight: normal;
	border-bottom: 1px solid rgb(0 0 0 / 0.2);
	/* transition: cubic-bezier(.18,1.07,.95,-0.65) 1000ms; */
}

ul#navmenu > li > ul > li > ul > li > ul > li:first-child > a {
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li:last-child > a {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li:hover > a {
	font-weight: normal;
	background-color: var(--red-navmenu);
}

ul#navmenu > li > ul > li > ul > li > ul > li:hover:first-child > a::after {
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li:hover:last-child > a::after {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li:hover > a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-left: 5px solid var(--white-navmenu);
}

/* ******************************Quinto nivel */
ul#navmenu > li > ul > li > ul > li > ul > li > ul {
	list-style: none;
	margin: 0;
	border: 0;
	padding: 0;
	width: 185px;
	display: none;
	position: absolute;
	left: 25px;
	top: 20px;
	z-index: 102;
	filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
}

ul#navmenu > li:hover > ul > li:hover > ul > li:hover > ul > li:hover > ul {
	display: block;
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li {
	height: min-content;
	display: block;
	position: relative;
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li > a {
	display: flex;
	justify-content: start;
	align-items: center;
	/* border: 1px solid  #0F5FA3; */
	padding: 0px 10px;
	margin: 0;
	background: var(--principal-navmenu);
	/* background: #7b7210; */
	color: var(--white-navmenu);
	font: 0.75rem Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	min-height: 25px;
	font-weight: normal;
	border-bottom: 1px solid rgb(0 0 0 / 0.2);
	/* transition: cubic-bezier(.18,1.07,.95,-0.65) 1000ms; */
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li:first-child > a {
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li:last-child > a {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li:hover > a {
	font-weight: normal;
	background-color: var(--red-navmenu);
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li:hover:first-child > a::after {
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li:hover:last-child > a::after {
	border-bottom-left-radius: 13px;
	border-bottom-right-radius: 13px;
}

ul#navmenu > li > ul > li > ul > li > ul > li > ul > li:hover > a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-left: 5px solid var(--white-navmenu);
}

/* @media (max-width: 576px) {
      
  } */

/*// Medium devices (tablets, 768px and up)*/
/* @media (max-width: 768px) {
      ul#navmenu {
          background: red
      }
  
      ul#navmenu {
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          z-index: -3;
      }
  
          ul#navmenu > li > a {
              font-size: 0.6rem;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
               text-overflow: ellipsis; 
               max-width:30px; 
               width:30px; 
               min-width: 30px; 
              max-height: 25px;
               overflow-y: hidden; 
               overflow: hidden !important; 
              text-overflow: ellipsis !important;
              white-space: nowrap !important;
          }
  } */

/* // Large devices (desktops, 992px and up) */
/* @media (max-width: 992px) {
  
  } */

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	ul#navmenu > li > ul > li > ul {
		list-style: none;
		margin: 0;
		border: 0;
		padding: 0;
		width: 185px;
		display: none;
		position: absolute;
		left: 185px;
		top: 0px;
		z-index: 102;
		filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
	}

	ul#navmenu > li:hover > ul > li:hover > ul {
		display: block;
	}

	ul#navmenu > li > ul > li > ul > li {
		height: min-content;
		display: block;
		position: relative;
	}

	ul#navmenu > li > ul > li > ul > li > a {
		display: flex;
		justify-content: start;
		align-items: center;
		/* border: 1px solid  #0F5FA3; */
		padding: 0px 10px;
		margin: 0;
		background: var(--principal-navmenu);
		/* background: #7b7210; */
		color: var(--white-navmenu);
		font: 0.75rem Verdana, Arial, Helvetica, sans-serif;
		text-decoration: none;
		min-height: 25px;
		font-weight: normal;
		border-bottom: 1px solid rgb(0 0 0 / 0.2);
		/* transition: cubic-bezier(.18,1.07,.95,-0.65) 1000ms; */
	}

	ul#navmenu > li > ul > li > ul > li:first-child > a {
		border-top-left-radius: 0px;
		border-top-right-radius: 13px;
	}

	ul#navmenu > li > ul > li > ul > li:last-child > a {
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 13px;
	}

	ul#navmenu > li > ul > li > ul > li:hover > a {
		font-weight: normal;
		background-color: var(--red-navmenu);
	}

	ul#navmenu > li > ul > li > ul > li:hover:first-child > a::after {
		border-top-left-radius: 0px;
		border-top-right-radius: 13px;
	}

	ul#navmenu > li > ul > li > ul > li:hover:last-child > a::after {
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 13px;
	}

	ul#navmenu > li > ul > li > ul > li:hover > a::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		border-left: 5px solid var(--white-navmenu);
	}
}
