@media screen and (max-width: 640px) {
 
  #header {
    text-align: left;
    #title { 
      font-size: 2em;
      a { padding: 0 5%; }
    }
    .menu-link {
      position: absolute;
      top: 0; right: 0;
      display: block;
      padding: 0 5%;
      font-size: 2em;
      color: $primary-color;
      text-align: center;
      @include prefix(transition, all 0.2s);
      &:hover { color: $link-hover; }
    }
    #header-widget { display: none; }
  }
  h2 { padding-left: 0; }
  h3#comments, h3#reply-title { margin: 5% 0; }
      
  #container { padding: 0 0 5% 0; }
    
  #sidebar {
    position: absolute;
    top: 74px; bottom: auto;
    margin: 0;
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    #sidebar-widget { display: none; }
  }
  #site-nav {
    
    > ul {
      display: none;
      width: 100%;
      background: rgba($highlight,0.95);
      border-bottom: 1px solid $line-color;
      padding: 5%;
      
      &.active { display: block; }
      
      li {
        clear: both;
        width: 100%;
        text-align: right;
        
        &.active {
          > a {
            padding: 1em;
          }
          > ul.sub-menu {
            display: block;
          }
        }
        
        a {
          padding: 1em;
          &:hover {
            background-color: transparent;
            padding: 1em;
          }
        }

        
        ul.sub-menu {
          background-color: transparent;
        }
      }
    }
  }
  
  #content {
    width: 100%;
    padding-top: 5%;
    float: none;
  }
    
  nav.pagination {
    margin: 5% 0 0 0;
    * {
      &.prev { padding-left: 0; left: 5%; }
      &.next { padding-right: 0; right: 5%; }
    }
  }
  
  .post-header,
  .archive-header, .attachment-header,
  article:not(.excerpt), #attachment,
  #comments-section, #archive,
  ul.page-numbers, {
    width: $post-width-640;
  }
  
  .post-header {
    margin: 0 auto;
    padding-left: 0;
    border: 6px solid $line-color;
  }
  
  .archive-header, .attachment-header {
    margin: (5% * (100% / $post-width-640)) auto;
    padding: 1.2em;
  }
  
  article:not(.excerpt), #attachment,
  #comments-section,
  ul.page-numbers {
    margin: 0 auto 5%;
    padding: 0;
  }

  #archive {
    margin: 0 auto;
    li, .sticky {
      width: 100%;
      margin-bottom: 10% * (100% / $post-width-640);
      &:last-child { margin-bottom: 5% * (100% / $post-width-640); }
      &.odd-post, &.even-post { padding: 0; }
    }
  }
}