.footer {
  padding: 2rem 0 0 0;

  .top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2.5fr ;
    max-width: 60rem;
    padding: 2rem 4rem;
    margin: 0 auto;
    
    ul {
      list-style-type: none;
      white-space:nowrap;
      padding: 0;
      margin: 0;
      
      li { 
        font-size: .895rem;
        margin: .25rem 0;
      }

      li h5 { font-size: 1rem }
      li h6 { 
        font-size: .895rem;
        font-weight: 400;
      }

      a {
        color: $link;
        &:hover { text-decoration: underline }
      }
    }
  }

  hr {
    height: 1px;
    border: none;
    color: $t-color;
    background-color: $t-color;
    margin: 0;
  }

  .bottom {
    max-width: 60rem;
    height: 5.5rem;
    padding: 2rem 4rem;
    margin: 0 auto;

    .who {
      float: left;
      color: $f-color;
      font-size: .895rem;
  
      a {
        color: $link;
        margin: 0 2px;
  
        &:hover { text-decoration: underline }
      }
  
      .icon-btc-b {
        position: relative;
        top: .25rem;
        font-size: 1.1rem;
      }
    }
    
    ul {
      float: right;
      list-style-type: none;
      white-space:nowrap;
      padding: 0;
      margin: 0;
  
      li, li p {
        display:inline; 
        font-size: .895rem;
      }
  
      a {
        color: $link;
        margin: 0 .5rem;
  
        &:hover { text-decoration: underline }
      }
  
      p {
        color: $f-color;
        margin: 0 0 0 .5rem;
      }
  
      .copy .icon-copyright {
        font-size: .7rem;
        opacity: .9;
      }
    }
  }
}

@media only screen and (max-width: 600px) {
  .footer {
    height: unset;
    padding: 0 2rem;
    margin: 1rem 0;

    .who,
    .links {
      float: none;
    }

    .links {
      padding: .5rem 0;

      a:first-of-type {
        margin: 0 1rem 0 0;
      }
    }
  }
}

@media only screen and (max-width: 345px) {
  .footer {
    padding: 0 1rem;
  }
}