#heroku-footer {

  $asset-path: 'bookends/footer';

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

  $color-header: #211746;
  $color-purple: #6e5baa;
  $color-link: #999;
  $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: #999;

  * {
    @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: 200;
  }

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

  h4 {
    margin: 1.33em 0;
    padding: 0;
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: $color-header;
    @include screen($screen: $threshold-mobile) {
      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;
    @include screen($screen: $threshold-mobile) {
       width: auto;
       float: none;
    }
  }

  .wrapper > .col {
    ul {
      margin-left: 0;
    }

    li {
      margin-left: 0;
    }

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

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

    .col {
      width: 25%;
      padding-right: 2%;
      @include screen($screen: $threshold-mobile) {
         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;
      }
    }

    // This has been commented out because the form is styled inside of Pardot.
    // See template "Newsletter Signup - WWW Footer" to style the newsletter form.

    // form {
    //   $input-height: 40px;

    //   position: relative;
    //   width: 100%;
    //   padding-bottom: 10px;
    //   @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;
    //     }
    //   }

    //   button {
    //     -webkit-appearance: none;
    //     position: absolute;
    //     top: 0;
    //     right: 0;
    //     width: $input-height;
    //     height: $input-height;
    //     border: 0;
    //     background-color: transparent;
    //     border-radius: 3px;
    //     &:focus {
    //       outline: none;
    //       border: 1px solid fade-out($color-purple, .5);
    //     }
    //   }
    // }

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

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

  }

  .tertiary {
    p {
      font-size: 13px;
      color: #999;
    }
    ul {
      margin: 13px 0 10px;
      float: right;
      @include screen() {
       float: none;
      }
    }

    li {
      display: inline-block;
      margin-right: 7px;
      @include screen() {
        &:last-child {
          margin-right: 0;
        }
      }
      a {
        display: block;
      }
    }
  }

    .sfdc-heroku-logo {
      @include hide-text;
      display: block;
      float: left;
      width: 142px;
      height: 54px;
      margin-right: 18px;
      background-image: asset-url("#{$asset-path}/salesforce_heroku_gray.png");
      background-size: 100%;
      @include screen() {
        display: inline-block;
        float: none;
        margin-right: 0;
      }
    }

  //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");
    @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,
           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;
    }
  }

}