@import '../../stylesheets/mixins';
@import '../../stylesheets/colors';

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 80px;
}

.Footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* height: 60px; */
  background-color: #fff;
  border-top: 1px solid $gray-lighter;
  padding: 15px 0 0 0;

  p {
    color: $gray-light;
    font-size: 16px !important;
    line-height: 1.3em;

    a {
      color: $gray-light;
    }

    a:hover,
    a:active,
    a:focus {
      text-decoration: none;
      color: $gray;
    }

  }

  ul {
    list-style: none;
    padding: 0;
  }

  ul li {
    float: left;

    &:first-child, &:nth-child(3) {
      margin-right: 15px;
    }

    a {
      color: $gray-light;
    }

    a:hover,
    a:active,
    a:focus {
      text-decoration: none;
      color: $gray;
    }
  }
}

@include breakpoint(tablet) {
  .Footer ul li:first-child, .Footer ul li:nth-child(2) {
    margin-right: 15px;
  }
}

.reverse {
  display:inline-block;
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

@include breakpoint(mobile) {
  .Footer, .Footer p {
    font-size: 13px;
  }
}