@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: 20px 0;

  p {
    color: $gray-light;

    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: 30px;
  }
}

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