@media screen and (min-width: 480px) {
    /**************************
  Two column layout
  ***************************/
    #primary {
      /* width: 70%; */
      width: 80%;
      float: left;
    }
    
    #secondary {
      /* width: 25%; */
      width: 15%;
      float: right;
    }
    
    /**************************
    Page: portfolio
    ***************************/
    
    #gallery li {
      width: 28.3333%;
    }
    
    #gallery li:nth-child(4n) {
      clear: left;
    }
  
    /**************************
    Page: about
    ***************************/
  
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

  
  /* menu,
  ol,
  ul {
      padding: 0 0 0 20px;
  } */
    
  }
  
  @media screen and (min-width: 660px) {
  
     /**************************
    Header
    ***************************/ 
    
    nav {
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align: right;
      width: 45%;
    }
    
    #logo {
      float: left;
      margin-left: 5%;
      text-align: left;
      width: 45%;
    }
    
    h1 {
      font-size: 2.5em;
    }
    
    h2 {
      font-size: 0.825em;
      margin-bottom: 20px;
    }
    
    header {
      /* border-bottom: 10px solid #599a68; */
      margin-bottom: 60px;
    }

    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    }

    #gallery ul {
      height: 900px; /*keep an eye on this change*/
    }
  }