#heroku-footer {
  #bookends-website { //honeypot
    position: absolute;
    left: -9999px;
  }

  .hide {
    display: none;
  }

  $asset-path: 'bookends/footer';

  $footer-width: 94%;
  $footer-max-width: 1200px;

  $color-header: #211746;
  $color-purple: #6e5baa;
  $color-link: #666;
  $color-background: #f0f0f0;
  $color-border: darken($color-background, 10%);

  $threshold-tablet: 900px;
  $threshold-mobile: 700px;

  @mixin hidpi($ratio: 1.3) {
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min--moz-device-pixel-ratio: $ratio),
    only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
    only screen and (min-resolution: #{round($ratio*96)}dpi),
    only screen and (min-resolution: #{$ratio}dppx) {
      @content;
    }
  }

  @mixin hide-text {
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
  }

  @mixin screen($threshold: max-width, $screen: $threshold-tablet) {
    @media ($threshold: $screen) {
      @content;
    }
  }

  @mixin clearfix {
    *zoom: 1;

    &:before,
    &:after {
      content: " ";
      display: table;
    }

    &:after {
      clear: both;
    }
  }

  padding-top: 15px;
  background: $color-background;
  box-shadow: 0 1px 1px 0 fade-out($color-background, .9) inset;
  font-size: 13px;
  color: #666;
  line-height: 1.8em;
  -webkit-font-smoothing: antialiased;

  * {
    @include box-sizing(border-box);
  }

  .wrapper {
    @include clearfix();
    position: relative;
    width: $footer-width;
    max-width: $footer-max-width;
    padding: 2em 0;
    margin: 0 auto;
  }

  a:link,
  a:visited {
    color: $color-link;
    text-decoration: none;
  }

  a:hover,
  a:active {
    color: darken($color-link, 30%);
  }

  ul {
    list-style: none;
    padding-left: 0;
    font-weight: $font-light;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    line-height: 1.1em;
    padding: 0;
  }

  h3 {
    color: $color-purple;
    font-size: 14px;
    font-weight: $font-normal;
  }

  h4 {
    margin: 1.33em 0;
    font-size: 12px;
    text-align: left;
    font-weight: $font-bold;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: $color-header;

    @include screen($screen: $threshold-tablet) {
      text-align: center;
    }
  }

  .tertiary {
    background: fade-out(white, .6);
    @include screen() {
      text-align: center;
    }

    a:link,
    a:visited {
      text-decoration: underline;
    }

    .col {
      width: 50%;
    }
  }

  .col {
    display: block;
    float: left;

    ul {
      margin: 1em 0;
    }

    li {
      margin: 0;
    }
  }

  .wrapper {

    .col {
      @include screen() {
        float: none;
        width: 100%;
      }
    }
  }

  .heroku-footer-links {
    @include clearfix();
    width: 70%;

    .col {
      width: 25%;
      padding-right: 2%;
      @include screen($screen: $threshold-tablet) {
         width: auto;
         padding-right: 0;
         text-align: center;
      }
    }
  }

  .heroku-footer-social {
    width: 30%;
    @include screen() {
      border-top: 1px solid $color-border;
      text-align: center;
      margin-top: 30px;
      padding-top: 10px;
    }

    h3 {
      margin: 7px 0 15px;
      text-align: left;
      span {
        margin-right: 6px;
        top: 4px;
      }
    }

    #bookends-newsletter {
      $input-height: 40px;

      position: relative;
      width: 100%;
      padding-bottom: 15px;
      @include screen(min-width, $threshold-tablet) {
        border-bottom: 1px solid $color-border;
      }

      input[type="text"],
      input[type="email"], {
        -webkit-appearance: none;
        width: 100%;
        height: $input-height;
        padding: 0 10px;
        border-radius: 4px;
        border: 1px solid $color-border;
        box-shadow: 0 0 4px fade-out($color-purple, 1);
        transition: all .2s ease;
        -webkit-transition: all .2s ease;

        &:focus {
          outline: none;
          box-shadow: 0 0 4px fade-out($color-purple, .5);
          border-color: $color-purple;
        }
      }

      input[type="submit"] {
        -webkit-appearance: none;
        position: absolute;
        top: 0;
        right: 0;
        margin: 5px;
        width: $input-height;
        height: ($input-height - 10);
        border: 0;
        background-color: $color-purple;
        border-radius: 3px;
        text-transform: uppercase;
        letter-spacing: .05em;
        padding: 0;
        font-weight: $font-bold;
        text-align: center;
        color: #fff;

        &:focus {
          outline: none;
          border: 1px solid fade-out($color-purple, .5);
        }

        &:hover {
          background-color: darken($color-purple, 5%);
        }
      }

      p {
        margin: 6px 0;
        padding: 8px;
        border-radius: 3px;
        font-size: 11px;
        text-align: left;
        background-color: #fff;
        height: $input-height;

        &.error {
          background-color: tomato;
        }
      }
    }

    .social-list {
      margin: 0;
      > li {
        display: inline-block;
        margin-right: 5px;
      }
    }

    .language-select {
      margin-top: 10px;
      > a {
        margin: 0 5px;
        @include screen(min-width, $threshold-tablet) {
          margin: 0 5px 0 0;
        }
      }
    }

    iframe {
      position: relative;
      width: 100%;
      margin: 0;

      @include screen(min-width, $threshold-tablet) {
        border-bottom: 1px solid $color-border;
      }
    }

  }

  .tertiary {

    .col {
      @include clearfix;
    }

    ul {
      margin: 13px 0 10px;
      float: right;
      @include screen() {
        margin-top: 25px;
        float: none;
      }
    }

    li {
      display: inline-block;
      margin-right: 7px;
      @include screen() {
        margin: 0 4px;
      }
      &:last-child {
        margin-right: 0;
      }
      &.copyright {
        font-weight: $font-normal;
        @include screen() {
          margin: 10px 0 0;
          display: block;
        }
      }
      a {
        display: block;
      }
    }

    a.sfdc-logo:link {
      display: block;
      float: left;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .05em;
      font-size: 10px;
      font-weight: $font-bold;

      @include screen() {
        display: inline-block;
        float: none;
        margin-right: 0;
      }

      span {
        @include hide-text;
        display: inline-block;
        width: 78px;
        height: 55px;
        text-align: center;
        margin: 0 3px -24px 3px;
        background-image: asset-url("#{$asset-path}/salesforce.png");
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }

  //Icons
  [class^="heroku-footer-icon-"] {
    position: relative;
    display: inline-block;
    width: 21px;
    height: 21px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: asset-url("#{$asset-path}/footer_sprite.png");
    transition: none;
    @include hide-text;
    @include hidpi {
      background-image: asset-url("#{$asset-path}/footer_sprite@2x.png");
      background-size: 200px 100px;
    }
  }

  //Icon array (class, background position x, y)
  $icons: (rss 0 0,
           twitter -21px 0,
           facebook -42px 0,
           github -63px 0,
           vimeo -84px 0,
           instagram -129px 0,
           linkedin -105px 0,
           newsletter -21px -63px,
           submit 0 -42px
          );

  //Each loop to create classes
  .heroku-footer-icon {
    @each $var in $icons {
      &-#{nth($var, 1)} {
        background-position: #{nth($var, 2)} #{nth($var, 3)};
      }
    }
  }

  //Hover state for social links
  .social-list .heroku-footer-icon {
    @each $var in $icons {
      &-#{nth($var, 1)} {
        &:hover {
          background-position: #{nth($var, 2)} -21px;
        }
      }
    }
  }

  .heroku-footer-icon-submit {
    top: -8px;
    &:hover {
      background-position: 0 -63px;
    }
  }

  .has-dropdown {

    //Dropdown hover
    &:hover {

      .dropdown {
        visibility: visible;
        opacity: 1;
        margin-top: 3px;
        @include transition-delay(0s);
      }
    }

  }

  .dropdown {
    $dropdown-padding: 16px;

    margin-top: 0;
    min-width: 200px;
    font-size: 14px;
    font-weight: $font-normal;
    display: none;

    @include screen(min-width, $threshold-tablet) {
      display: block;
      position: absolute;
      background: #fff;
      border-radius: 4px;
      z-index: 3;
      padding: $dropdown-padding/2 $dropdown-padding;
      overflow: visible;
      box-shadow: 0 2px 7px fade-out(#000, .825);
    }

    [class^="heroku-footer-icon-"] {
      margin-right: 5px;
      float: left;
      font: inherit;
    }

    // Transition
    visibility: hidden;
    opacity: 0;
    @include transition(visibility 0s 0.15s, opacity 0.15s, margin-top .15s);

    ul {
      margin: .5em 0 0;
    }

    li {
      display: block;
      margin-bottom: 5px;
    }

    a {
      color: #444;
      font-weight: $font-normal;

      &:hover {
        color: $color-purple;
      }
    }
  }

}