@media (max-width: 800px){
      .grid{
            grid-template-columns: 100%;
            grid-template-areas: "section"
                                 "footer";
      }

      .header{
            position: fixed;
            top: 0;
            left: 0;
            width: 80%;
            height: 100%;
            transform: translateX(-100%); /* oculto */
            z-index: 1000;
      }

      .header.active{
            transform: translateX(0); /* visible */
      }
      .contenido{
            padding: 80px 30px 10px;
      }


      .hamburger{
            display: block;
            cursor: pointer;
            position: absolute;
            top: 20px;
            right: 20px;
      }
      .hamburger .line{
            width: 30px;
            height: 3px;
            background: #0099DD;
            margin: 6px 0;
      }
}