        @font-face {
          font-family: Agency;
          src: url(agency_fb.ttf);
        }
        * {
          box-sizing: border-box;
          font-family: Agency;
        }
        html, body {
          height: 100%;
        }
        body {
          display: flex;
          flex-direction: column;
        }
        section {
          flex: 1 0 auto;
          background-color: #f1f1f1;
        }
        header {
          background-color: #666;
          padding: 20px;
          text-align: center;
          font-size: 35px;
          color: white;
        }
        article {
          float: left;
          padding: 20px;
          width: 70%;
          background-color: #f1f1f1;
        }
        .foto {
          float: left;
          width: 30%;
          background: #999;
          padding: 20px;
        }
        footer {
          width: 100%;
          position: relative;
          font-size: 120%;
          height: 250px;
          background-color: lightgrey;
        }
        .info {
          padding-top: 1%;
          float: left;
          width: 33.3%;
          text-align: center;
        }

        @media (max-width: 580px) {
          .foto, article {
            width: 100%;
            height: auto;
          }
          .info {
            width: 100%;
          }
          body {
            margin-bottom: -350px;
          }
          footer {
            height: 350px;
          }
        }
