/* ######## ESTILO DE LA CABECERA DE TODOS LOS DOCUWMNTOS####### */

*{
    margin:0;
    padding:0;
    box-sizing: border-box; /*para que los bordes o padding queden dentro del mismo modelo de caja*/
    text-decoration: none;
    /*list-style: none;*/
  }

  body{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; /*coloca las secciones verticales en una sola columna apilados*/
    margin:0;
    padding:0;
    min-height: 100vh; /* define el alto minimo del body*/
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3rem;
    color: rgb(52, 50, 54);
   
    }

 /*################################################################################*/
  .contenedor{
    display:flex;
    flex-direction: column;
    flex-wrap: wrap; /*coloca las secciones verticales en una sola columna apilados*/
    width: 1100px;
    height:198px;
    margin:0 auto;
    max-width: 1100px;
    max-height:198px;
    position: relative;
    top:0px;
    
  }
  
  /*css imagen cabecera I.E.*/
   .imagencab{
     display: flex;
     display:block;
     background-image: url(../imagenes/cabezote.jpg);
     position: absolute;
     width:100%;        /*Ancho de la imagen nueva, aunque en este caso son iguales.*/
     height:100%;       /*Alto de la imagen nueva, aunque en este caso son iguales.*/
     max-width: 1100px;
     max-height: 198px;
     box-sizing:border-box;
     padding-left:100%;
         
   }

   /*css Nombren I.E.*/
   .nombre{
    display: flex;
    justify-content: flex-start;
    line-height: 1.8rem;
    color: rgba(33, 23, 90, 0.993);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    margin-top: 25px;
    margin-left: 150px;
    position: absolute;
    /*transform: translate(34%, -615%);*/
   }

   /*css Resolucion*/
   .resolucion{
    display: flex;
    justify-content: flex-start;
    line-height: 1.4rem;
    color: rgb(52, 50, 54);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-top: 85px;
    margin-left: 150px;
    position: absolute;
    /*overflow: hidden;
    transform: translate(49%, -515%);*/

   }

  /*css Eslogan*/
   .eslogan{
    display: flex;
    justify-content: flex-start;
    line-height: 1.4rem;
    color: rgb(52, 50, 54);
    <!--color:rgba(245, 239, 239, 0.993);-->
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    margin-top: 145px;
    margin-left: 15px;
    position: absolute;
    
    }

/*
  .imgeventual {
     display: flex;
     display:block;
     background-image: url(../imagenes/eventuales/aviso.gif);
     position: relative;
     width:1100px;     
     max-width: 1100px;
     max-height: 320px;
     box-sizing:border-box;
     padding-left:100%;
    
  }*/

/*css fecha */
.fechaactual{
  display: flex;
  display: inline;
  display: flex;
      flex-wrap: wrap;
  
  justify-content: center;
  width: 1100px;
  max-width: 1100px;
  background-color: rgb(68, 138, 230);
  margin:0 auto;

  /*height: 1.3rem;  
  text-align: right;
  padding-right: 5px;
  font-size: 1rem;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(52, 50, 54);}
  color: rgba(23, 16, 59, 0.993);
  background-color: rgba(231, 216, 212, 0.856);*/
  }
 
  .menujs{
    display: flex;
    justify-content: flex-start;
    position: relative;  
    height: 4rem;
    width: 1100px;
    margin:0 auto;
    z-index: 1;
    padding-top: 0px;
    background-color: rgb(6, 87, 192);
       
   } 

   /* --- Clase que agregaremos cuando el usuario haga scroll, el menú (header)queda fijo en la margen superior--- */
.menu_fijo {
   
  display: flex;
  position:fixed;
  justify-content: flex-start;
  height: 4rem;
  width: 100%;
  max-width:100%;
  margin:0 auto;
  z-index: 1;
  top: 0px;
  padding-top: 0px;
  background-color: rgb(6, 87, 192);
/*box-shadow:0px 4px 3px rgba(0,0,0,.5);*/
}
 
/* #################  INICIA EL MENU ################### */
.nav_horizontal{
display: flex;
justify-content: space-between;
width: 1100px;
height: 3.3rem;
max-height: 3.3rem;
margin-top:4px;
margin-left: auto;
margin-right: auto;
align-items: flex-end;
font-size: 1.3rem;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(6, 87, 192);
left: 0;   /*****uno*/
top: 0; /****dos*/

 }

.div_menu{
  display: flex;
  position: relative;
  margin: 0 auto;
  text-align: left;
  width: 110%;
  max-width: 1100px;
  white-space: nowrap;
    
}

.menu > li{ /*mueve caja con texto sobre la barra de*/
  display: flex;
  position: relative;
  display: inline-block;
  width: auto;
               
}

.menu li span {
  display: flex;
  position: relative;
  width: auto;
  margin-top: 0;
  padding-top: 2px;
  margin-right: 0;
  margin-left: 6px;
  color: rgb(244, 242, 247);
  font-size: 1.2rem;
  background-color: rgb(7, 45, 95);
}


.menu > li > a{
  display: flex;
  height: 3.2rem;
  max-height: 3.2rem;
  padding:15px 15px;
  color: rgb(244, 242, 247);
  text-decoration:none;
    
 }

 .menu li a:hover{
  display: flex;
  color: rgb(255, 7, 7);
  transition: all 0.4;
  background-color: rgb(7, 45, 95);

}

.menu li a:hover span{
  display: flex;
  color: rgb(255, 7, 7);
  transition: all 0.4;
  background-color: rgb(7, 45, 95);

}

.submenu{
  display: flex;
  flex-direction: column;
  position: absolute;
  width:110%; 
  width: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1.5s;
  list-style: none;
  background-color:  rgb(6, 87, 192);
}

.submenu li a{
  display: flex;
  height: 3.2rem;
  max-height: 3.2rem;
  width: auto;
  padding:1rem;
  color: rgb(244, 242, 247);
  text-decoration:none;
  
}

.menu li:hover .submenu{
  visibility: visible;
  opacity: 1;
  
  }

.submenu2{
display: flex;
position: absolute;
display: block;
flex-direction: column;
width:auto; 
visibility: hidden;
opacity: 0;
list-style: none;
background-color:  rgb(7, 45, 95);

}

.submenu2 li a{
display: flex;
position: relative;
display: block;
padding-left:0.5rem;
color: rgb(244, 242, 247);
text-decoration:none;
background-color:  rgb(7, 45, 95);

}

.submenu li:hover .submenu2{
 display: flex;
 display: block;
 visibility: visible;
 position: absolute;
 opacity: 1;
 left: 100%;
 top:0;

}

.submenu li:hover .submenu3{
  display: flex;
  display: block;
  visibility: visible;
  position: absolute;
  opacity: 1;
  left: 100%;
  top:14.3%;}

  .submenu li:hover .submenu4{
    display: flex;
    display: block;
    visibility: visible;
    position: absolute;
    opacity: 1;
    left: 100%;
    top:37.5%;}
  
/* ######################  FIN DEL MENU  ####################################### */