.barra {
    font-family: 'Lato', sans-serif;
    /**Alto y ancho de la hamburguesa donde se va a activar cuando pase el mouse**/ 
       width: 34px;
       height: 10px;
    /*Para que este siempre en la misma parte de la pantalla aunque se haga scroll*/
    position: fixed;
    /*Tiempo en el que va a transitar la animacion
    transition: .4s all;   este crea problemas al puntero*/ 
    transition: .0 all;
    /*este arriba de todo en la pantalla*/
    z-index: 1;
}
 
.portada{
    color: red;
}

.barra ul {
    /*solucionar espacios no deseados*/
    padding: 10px; /*espacio del borde a los nombres de la barra*/
    text-align: left; }

.barra li {
    /*Velocidad de transicion del contenido*/ 
    list-style: none;
        transition:all .3s;}

.barra a {
    text-decoration: none;

    font-weight: normal;

    /*La letra crece con el menu de esta manera no se va a ver como se ajusta al margen mientras crece*/
    transition: .3s all;
    /*Se ocultan los elementos*/
    font-size: 0px;
    padding: 0px;
}


/*Posicion del texto encabezado 
.barra h2 {
    text-align: right;
    color: rgb(171, 16, 16);
    padding: 7px;
    padding-bottom: 7px; 

    Se oculta el h2 
    font-size: 0px;  }*/

.barra img {   /* tamaño de imagen hamburguesa sin responsive*/ 
    width: 100%;
    padding-top: 0px;
    padding-left: 10px;  
}

.barra:hover {
    /*Ancho y alto de la barra del menu emergente al pasar el mouse*/
    width: 48%;
    height: 78vh; 
    
    /*Color transparente poniendo un punto al parametro final .1 al .9 */
    background: rgba(5, 33, 51, 0.98);
}

/*Tamaño del menu*/
.barra:hover h2 {
    /*posicion dentro de barra del h2 padd 15*/
    padding: 0px;
    font-size: 35px; 
}

/*Propiedades del font */
.barra:hover a {
    font-size: 13px;
    color: white;
    /*Se usa el display block para que el enlace respete el margin*/
    display: block;
    padding: 5px;  /*espaciado interlineal*/
        /*padding alto de la barra de menu */
}

.barra:hover img {
    /*Desaparecer la imagen*/
    height: 0px;
}


.barra:hover li {
    border-top: 1px solid #d2ea19;
    /*Espacios entre las lineas y el contenido*/
    width: 100%; 
}
/*
.barra:hover ul:last-of-type { 
    border-bottom: 1px solid #f1801e;
}
*/
.barra:hover a:hover {
    font-size: 18px; /* tamaño de letra al pasar el mouse*/
    color: yellow;
    padding: 10px 0px;
    background: rgba(23, 78, 112, 0.98);
}

@media screen and (max-width: 630px){ 

.barra img {
        /* tamaño de imagen hamburguesa con responsive*/
        width: 100%; }

.barra:hover {
    /*Ancho y alto de la barra del menu emergente al pasar el mouse*/
    width: 75%;
    height: 90vh; }

   /* El menu desaparece al achicarse la web*/
   .menu {
       position: absolute;
       visibility: hidden;
       margin-left: 5%;
       /*Margen IZQ de la imagen del menu principal*/
   }
 }