.footer {
  padding: 2rem 0 0 0;

  .top {
    display: grid;
    grid-template-columns: repeat(3, 1.25fr) 2fr ;
    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 }
      }

      .btn a {
        display: inline-block;
        color: $s-color;
        background: $b-color;
        font-weight: 600;
        border: .1rem solid $s-color;
        padding: .15rem 2rem .25rem 1.55rem;
        margin: .25rem 0;

        .icon-btc-b {
          position: relative;
          top: .15rem;
          font-size: 1.15rem;
        }

        &:hover {
          text-decoration: none;
          background: $sh-color;
        }
      }
    }
  }

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

  .bottom {
    background: $b-color;
    
    .center {
      height: 5.5rem;
      max-width: 60rem;
      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: 768px) {
  .footer {
    height: unset;
    padding: 0;

    .top {
      grid-template-columns: 1fr 1fr;
      padding: 2rem 2rem 0 2rem;

      ul {
        margin: 2rem 1rem;
      }
    }

    .bottom {      
      .center {
        height: 5.5rem;
        padding: .5rem 2.5rem;
        margin: 0;

        .who {
          float: none;
          padding: .5rem;
        }

        ul {
          float: none;
        }
      }
    }
  }
}

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