@media only screen and (min-width:0px) and (max-width:850px){
    /* LOGO */
    .logo {
        width: 10%;
      }
      .logo img {
        width: 100%;
        float: left;
        margin-left:20%;
      }
      /* NAV */

      .barra {
        width: 90%;
        float: left;
      }
      
      .principal {
        padding-top: 2.5vw;

      }
      .menuP > li > a {
        padding-left: 2vw;
        font-size: 2.2vw;
      }
      .subP li a {
        font-size: 3vw;
      }
      
}