﻿/************************************* Variables */
#nav2 {
   --white: rgba(255, 255, 255, 1);
   --white-dark: rgba(245, 245, 245, 1);
   --grey: rgba(192, 192, 192, 1);
   --grey-dark: rgba(64, 64, 64, 1);
   --blue: rgba(142, 192, 224, 1);
   --blue-dark: rgba(0, 66, 133, 1); 
}

/***************************** Menus hamburguesas */
.madHamburguer {
   font-weight: bold;
   min-width: 0 !important;
   width: 2.5em;
   height: 2.5em;
   border-radius: 0;
   background-color: transparent;
   margin: 0.75rem;
   padding: 0px;
   font-size: 1rem;
   cursor: pointer;
}
.madHamburguer[aria-expanded="false"]~ul {
   display: none;
}
.madHamburguer[aria-expanded="true"]~ul {
   display: block;
}
.madHamburguer:hover {
   /* background-color: var(--blue-dark); */
   transition: all 0.3s ease-in;
   color:var(--white)
}
.hamburguer_button {
   display: none;
}

/* ===================================== nav2 ================================ */

#nav2 {
   padding: 4px 10px;
   color: var(--grey-dark);
   background-color: var(--white-dark);
}

#nav2 ul {
   list-style-type: none;
}

#nav2 i {
   display: none;
}

#nav2 ul li {
   position: relative;
}

#nav2 ul li a {
   font-size: 1rem;
   color: rgb(255, 255, 255);
   display: block;
   padding: 8px 15px;
   border-bottom: 1px solid var(--grey);
   text-decoration: none;
   color: rgb(0, 66, 133);
   background: rgb(242, 244, 246);
   font-weight: 500;
   padding-right: 1.5rem;
}

#nav2 ul li button {
   width: 2.2em;
   height: 2em;
   position: absolute;
   top: 0em;
   right: 4px;
   min-width: 0 !important;
   cursor: pointer;
   background: transparent;
   border: 0;
   top: 5px;
}

#nav2 ul li button:after {
   display: inline-block;
   vertical-align: top;
   content: "";
   width: 8px;
   height: 8px;
   border-top: 0;
   border-right: 2px solid;
   border-bottom: 2px solid;
   border-left: 0;
   transform: rotate(45deg);
   position: relative;
   /* top: -2px; */
   right: 0px;
}

#nav2 ul ul li button:after {
   display: inline-block;
   vertical-align: top;
   content: "";
   width: 8px;
   height: 8px;
   border-top: 0;
   border-right: 2px solid;
   border-bottom: 2px solid;
   border-left: 0;
   transform: rotate(315deg);
   position: relative;
   top: 2px;
   right: 2px;
}

#nav2 ul li button[aria-expanded="false"]~ul {
   display: none;
}

#nav2 ul li button[aria-expanded="true"]~ul {
   display: block;
}

#nav2 ul li ul li a {
   background-color: var(--grey);
   padding-left: 34px;
}

#nav2 ul li a:hover,
#nav2 ul li a:focus {
   color: #fff !important;
   background-color: var(--blue-dark);
}

#nav2 ul li a+button {
   background: var(--blue-dark);
   border: 1px solid var(--white);
   color: var(--white);
}

#nav2 ul li ul li ul li a {
   padding-left: 55px;
}
#nav2 ul li ul li ul li ul li a {
   padding-left: 75px;
}

#nav2 ul li button:active,
#nav2 ul li button:visited,
#nav2 ul li button:hover,
#nav2 ul li button:focus {
   background-color: var(--blue-dark);
   color: var(--grey);
   border-radius: 0px;
}

#nav2>ul>li>a[aria-current] {
   color: var(--white);
   background-color: var(--blue-dark);
}

#nav2>ul>li>a[aria-current]+button:hover {
   background: var(--white-dark);
   color: var(--blue-dark);
}

#nav2>ul>li>ul {
   display: none;
}

/* Tablet */
@media only screen and (min-width: 992px) {

   /* hamburguer */
   .madHamburguer {
      display: none;
   }

   .madHamburguer[aria-expanded="false"]~ul,
   .madHamburguer[aria-expanded="true"]~ul {
      display: flex;
   }

   .madBarraIdiomas select {
      width: 100px;
      /* font-size: .75em; */
   }

   .madBuscador input {
      height: 30px;
      width: 100px;
      /* font-size: .75em !important; */
   }

   /*  nav2 */
   #nav2 {
      background-color: transparent;
      padding: 0;
   }

   #nav2>ul {
      margin-top: 0em;
      display: flex !important;
   }

   #nav2 ul li button {
      width: auto;
      height: 100%;
      position: initial;
      padding: 0px 10px 0px 10px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: var(--color-green);
      color: var(--color-white);
      top: 0;
      right: 0;
      margin: 0;
      color: #000;
   }

   #nav2>ul>li>a+button {
      color: var(--blue-dark);
      border: 0px;
      background-color: var(--white-dark);
   }


   #nav2 ul ul li button {
      border-radius: 0.25em;
      position: absolute;
      background: transparent;
      border: 0;
      color: var(--blue-dark);
   }


   #nav2 ul li button:after {
      top: 0px;
      right: 0px;
   }

   #nav2>ul>li>a[aria-current] {
      color: var(--white);
      background-color: var(--blue-dark);
   }

   #nav2>ul>li.miUltimo {
      border-right: 0;
   }

   #nav2>ul>li>a[aria-current]+button {
      color: rgb(255, 255, 255);
      background-color: var(--blue-dark);
   }

   #nav2>ul>li>a[aria-current]:hover {
      background-color: var(--blue-dark);
   }

   #nav2>ul>li>a[aria-current]:hover+button,
   #nav2>ul>li>a[aria-current]:focus+button {
      color: var(--white);
      background-color: var(--blue-dark);
   }

   #nav2 ul li a:hover,
   #nav2 ul li a:focus {
      color: var(--white) !important;
      background-color: var(--blue-dark);
   }

   #nav2 ul li a:hover+button,
   #nav2 ul li a:focus+button {
      color: var(--blue-dark);
      background-color: var(--white-dark);
   }

   #nav2>ul>li {
      width: 140px;
      flex-grow: 1;
      position: relative;
      text-align: center;
      display: flex;
      align-items: stretch;
      justify-content: start;
      left: 0;
      text-align: center;
      background-color: var(--white-dark);
      border-right: 1px solid var(--grey);
   }
   #nav2 ul li a{
      padding-right:0;
   }

   #nav2>ul>li>a {
      border-bottom: none;
      width: 100%;
      font-size: .9rem;
      padding-left: 5px !important;
      padding-right: 0px !important;
   }

   #nav2 ul li ul {
      position: absolute;
      width: 100%;
      z-index: 1;
      top: 101%;
      left: 0;
   }

   #nav2 ul li ul li {
      position: relative;
   }

   #nav2 ul li ul li ul {
      top: 0px;
      left: 101%;
      display: none;
   }

   #nav2 ul li:last-child ul li ul {
      left: -101%;
   }

   #nav2 ul li ul li a {
      padding: 10px 25px 10px 10px !important;
      background-color: rgb(239, 239, 239);
      border: 1px solid rgb(228, 228, 228);
      box-shadow: 2px 2px 3px rgba(128, 128, 128, 0.6);
      text-align: left;
      font-size: 0.85rem;
   }


   #nav2 ul li ul li:last-child a {
      border-bottom: none;
   }
}


/******************************** IE11 */
@media all and (-ms-high-contrast:none) {
   #nav2>ul>li {
      background-color: rgb(61, 120, 176);
      border: 1px solid rgb(61, 120, 176);
   }

   #nav2 ul li a {
      color: rgb(255, 255, 255);
   }

   #nav2 ul ul li {
      background-color: rgb(61, 120, 176);

   }

   .miSeleccionado a {
      background: rgb(128 128 128) !important;
   }

   #nav2 ul li:hover>ul {
      display: block !important;
   }

   #nav2 ul li a:hover,
   #nav2 ul li a:focus {
      color: rgb(0, 0, 0);
      background-color: rgb(255, 210, 0);
   }

   #nav2 ul li button:active,
   #nav2 ul li button:hover,
   #nav2 ul li button:focus {
      background-color: rgb(255, 210, 0);
      color: rgb(0, 0, 0);
   }

   #nav2 ul ul li button:after {
      top: 5px;
      right: 2px;
   }
}




