@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: nth-child(4n){
    clear:left;
  }

  #cover-photo{
    margin: 0;
    padding: 0;
  }

  #header-index{
    margin-bottom: 0;
  }
 /********************
  * Page : about me  *
  ********************/
 .profile-photo{
   float:left;
    margin: 0 5% 80px 0;
  }
}

@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%;
  }
  
  h2{
    font-size : 0.825em;
    margin-bottom:20px;
  }
  
  header{
    border-bottom: 10px solid #116611; 
    margin-bottom:60px;
  }

  #header-index{
    margin-bottom: 0;
  }
  
}