body{
margin:0px
}
.barra {
    font-family: 'Lato', sans-serif;
    /**Alto y ancho de donde se va a activar cuando pase el mouse**/
    /*width: 10%;
    height: 9%;*/
    /*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 arriba de todo en la pantalla*/
    z-index: 1;
    
    width: 14%;
    height: 99% !important;
    /*Color*/
    /*background: rgba(5, 33, 51, 0.98);*/
    background-color: white
}

    .barra ul {
        /*solucionar espacios no deseados*/
        padding: 0px;
        /*text-align: center;*/
        /*border-bottom: 1px solid #03121b;*/
    }
    .barra li {
      
            
        /*border-top: 1px solid #03121b;*/
        width: 100%;
    }

    .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*/

      
      
        color: white;
        /*Se usa el display block para que el enlace respete el margin*/
        display: block;
      
        font-size: 15px;
        padding: 10px 0px;
        /*background: rgba(23, 78, 112, 0.98);*/
    }

.barra  h2{
    /*text-align: center;*/
    color:white;
    /*padding:7px;*/
    padding-bottom:7px;

    padding:15px;
    font-size: 35px;

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

    .barra h3 {
        /*text-align: center;*/
        color: white;
        /*padding:7px;*/
       
        font-size: 15px;
        /*Se oculta el h2*/
        /*font-size:0px;*/
    }



.barra img{
    padding-top: 10px;
    padding-left: 10px;
}


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





/*.barra:active a:hover{ 
    font-size: 25px;
    padding: 30px 0px; 
    background: rgba(23, 78, 112, 0.98);  
}*/

@media (min-width: 300px){
    .barra:active{
    width: 15%;
    }
}

@media  (max-width: 960px) {
    .barra {
        display: none;
    }
}