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

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

/**************************************
PAGE: PORTFOLIO
***************************************/
 
#gallery li {
  width: 28.3333%;
}
 
#gallery li:ninth-child(4n) {
  clear: left;
}


/**************************************
PAGE: PORTFOLIO NAV
***************************************/

.port-description {
  display: block;
  width: 40%;
  margin: 0 auto;
  float: left;
}

.port-photo {
  display: block;
  width: 60%;
  margin: 0 auto 30px;
  float: right;
}


/**************************************
PAGE: ABOUT
***************************************/
 
.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
}

@media screen and (min-width: 660px) {
  

/**************************************
HEADER
***************************************/
 
h1 {
  font-size: 2.5em;
  }

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
  }
header {
  border-bottom: 5px solid #999;
  margin-bottom: 60px;
}


}


/* nav
  background: none;
  float: right;
  font-size: 1.125em;
  margin-right: 5%;
  text-align: right
  width: 45%;

#logo
  float: left;
  margin-left: 5%;
  width: 45%; */