@media screen and (max-width: 640px) {
 
  #sidebar #title { 
    font-size: 2.4em;
    padding: 0 5%;
    text-align: left;
    border: none;
    line-height: 74px;
    background-color: $highlight;
    a { padding: 0; }
    .menu-link {
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      width: 74px;
      padding: 0;
      background: rgba(62,62,62,0.9);
      color: $bg-color;
      font-size: 130%;
      text-align: center;
    }
  }
  
  h2 { padding-left: 0; }
  h3#comments, h3#reply-title { margin: 5% 0; }
      
  #container { padding: 0 0 5% 0; }
    
  #sidebar {
    position: relative;
    margin: 0 0 5% 0;
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
  
    nav#site-nav {
      
      > ul {
        z-index: 10;
        position: absolute;
        display: none;
        top: 74px;
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(62,62,62,0.9);
        
        &.active {
          z-index: 1000;
          display: block;
          padding: 5% 20%;
        }
        
        > li { 
          border: 1px solid transparent;
          margin-bottom: 10px;
          &.active { border: 1px solid $bg-color; }
        }
        
        li {
          background-color: transparent;
          
          &.active {
            > a {
              background-color: transparent;
              text-decoration: underline;
            }
            > ul.sub-menu {
              border-top: 1px solid $bg-color;
              display: block;
            }
          }
          
          a {
            color: $bg-color;
            &:hover {
              background-color: transparent;
              text-decoration: underline;
            }
          }

          
          ul.sub-menu {
            background-color: transparent;
          }
        }
      }
    }
    #sidebar-widget { display: none; }
  }
  
  section#content {
    width: 100%;
    padding-top: 0;
    float: none;
  }
    
  nav.pagination {
    margin: 5% 0 0 0;
    * {
      &.prev { padding-left: 0; left: 5%; }
      &.next { padding-right: 0; right: 5%; }
    }
  }
  
  header.post-header .post-title h2,
  .archive-header, .attachment-header,
  article,
  #comments-section,
  ul.page-numbers {
    width: $post-width-640;
  }
  
  header.post-header .post-title h2 {
    margin: 0 auto;
    padding-left: 0;
  }
  
  .archive-header, .attachment-header {
    margin: 5% auto 5%;
    padding: 1.2em;
  }
  
  article,
  #comments-section,
  ul.page-numbers {
    margin: 0 auto 5%;
    padding: 0;
  }

  #archive {
    width: 100%;
    li {
      width: 100%;
      padding: (100% - $post-width-640) / 2;
      margin: 0;
      &:first-child { padding-top: 0; }
    }
    li.even {
      padding: (100% - $post-width-640) / 2;
      .thumbnail { margin-right: 5%; }
    }
    li.odd .thumbnail { margin-left: 5%; }
  }
}