.content, .footer-div {
  display: flex;
  flex-wrap: wrap;
  width:94%;
  padding-left:3%;
}

.hero, .team, .weather, .recent-news {
    order: 10;
}

.proj-client, .proj-year {color:#3bb370;}
.header__menu {
  display: none;
}
.project__title{font-size:20px;}

@media screen and (max-width: 549px) {
  .client-div{width:49%;text-align:center;}
  img.client_logo{width:80%;max-width:300px;padding:0px 0px 40px;}
  .project__title{font-size:18px;}
  .nav__list { background-color:#f0f0f0;}
  .header__logo {
    height: 48px;
    margin-right: 0.5em;
  }
  .header__title {
    margin-left: .5em;
    font-size: 2em;
    vertical-align: bottom; 
  }
  #signin{display:none;}
  .nav {
    z-index: 10;
    background-color:##f0f0f0;
    width: 100%;
    position: absolute;
    /* This trasform moves the drawer off canvas. */
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    /* Optionally, we animate the drawer. */
    transition: transform 0.3s ease;
  }
  .nav.open {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  .nav__item {
    display: list-item;
    border-bottom: 1px solid #E0E0E0;
    width: 92%;
    padding-left:4%;
    text-align: left;
  }
  .header__menu {
    display: inline-block;
    position: absolute;
    right: 0;
    padding: 1em;
  }
  .header__menu svg {
    width: 32px;
    fill: rgba(0, 0, 0, 0.6);

  }
}

@media screen and (min-width: 550px) {
  .client-div{width:33%;text-align:center;}
  img.client_logo{width:80%;max-width:300px;padding:0px;}
  .project_image{width:30%;max-width:240px;float:left;margin-right: 1em;}
  .nav__list { width: 94%;padding-left:3%; }
  .hero {
    order: 0;
    width: 60%;
  }
  .weather {
    order: 1;
    width: 40%;
  }
  #signin{margin-right:20px;}
}

@media screen and (min-width: 700px) {
  .client-div{width:33%;text-align:center;}
  img.client_logo{width:90%;max-width:300px;padding:0px 0px 20px;}
  .team {
    order: 2;
    width: 100%;
  }
  .content {width:94%;padding-left:3%;}
}

@media screen and (min-width: 780px) {
  main, .header__inner, .nav, .content,.footer-div {
    width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
  .content{width:100%;padding-left:0px;}
  .nav__list { width: 100%;padding-left:0px;}
  .nav__list, .header__title{padding-left:0px;margin-left:0px;}
}