MiniDigger/Hangar

@import "sponge_variables";
@import 'pallette';
@import 'utils';

.footer {
  display: block;
  width: 100%;
  margin-top: 2em;
  text-align: center;

  h5, p , a, a:hover {
    color: #ffffff;
  }

  h5 {
    font-size: 1.3em;
    font-weight: bold;
  }

  .above {
    background: $sponge_light_gray;
    padding: 10px 0;
    color: #e5e5e5;

    a.tos {
      color: #e5e5e5;
      font-size: 1em;
      padding: 0;
      text-decoration: underline;
    }
  }

  .middle {
    background: $sponge_grey;
    padding: 1.5em;

    img.spongie {
      height: 60px;
      width: 60px;

      @media (min-width: 768px) {
        height: 74px;
        width: 74px;

        &:hover {
          animation-name: bounce;
          animation-duration: .5s;
          animation-fill-mode: both;
          animation-iteration-count: infinite;
        }

        @keyframes bounce {
          0%, 100% {
            transform: rotateZ(0);
          }
          33% {
            transform: rotateZ(-5deg);
          }
          50% {
            transform: rotateZ(0);
          }
          76% {
            transform: rotateZ(5deg);
          }
        }
      }
    }
  }

  .below {
    background: $sponge_dark_grey;
    padding: 1em;
    font-size: 1em;

    p {
      margin: 0;
    }
  }

  @media (max-width: 768px) {
    [class*="col-"] {
      margin: 1em 0;
    }

    h5 {
      margin-top: 0;
    }
  }

}