@media screen and (min-width: 480px) {
  
/***************************
TWO COLUMN LAYOUT
****************************/
#primary {
    width: 50%;
    float: left;
  }

#secondary {
    width: 40%;
    float: right;
  }

#primary2 {
    width: 60%;
    float: left;
  }

#secondary2 {
    width: 30%;
    float: right;
  }

/***************************
PAGE: PORTFOLIO
****************************/
  #gallery li {
    width: 28.3333%;
  }
  
  #gallery li:nth-child(3n + 1) {
    clear:left;
  }
  
/***************************
PAGE: ABOUT
****************************/

.profile-photo {
    float: left;
    margin: 2% 5% 2000px 0;
  }

  
  
@media screen and (min-width: 660px) {
/***************************
HEADER
****************************/
nav {
      background: #579ced;
      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;
      color: #fff;
    }
h2 {
      font-size: 0.825em;
      margin-bottom:15px;
      color: #fff;
    }
header {
      background: #579ced;
      border-bottom: 20px solid #0e73a7;
      margin-bottom:60px;
    }