/* styles for the headroom.js plugin
------------------------------------------------------- */

.header,
.headroom,
.headroom--pinned,
.headroom--unpinned {
  @include forcesmooth;
}

.headroom--pinned,
.headroom--unpinned,
.headroom--top,
.headroom--not-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

// adjust the timing
.headroom,
.headroom--pinned,
.headroom--unpinned,
.headroom--top,
.headroom--not-top {
-webkit-animation-duration: $header-animation-speed;
   -moz-animation-duration: $header-animation-speed;
    -ms-animation-duration: $header-animation-speed;
     -o-animation-duration: $header-animation-speed;
        animation-duration: $header-animation-speed;
}

// I'm using animate.css instead of attempting to create the css here:

/*
.headroom--pinned,
.headroom--unpinned {
-webkit-transition: transform 200ms ease-out !important;
   -moz-transition: transform 200ms ease-out !important;
    -ms-transition: transform 200ms ease-out !important;
     -o-transition: transform 200ms ease-out !important;
        transition: transform 200ms ease-out !important;
}

.headroom--pinned {
  -webkit-transform: translateY(0%);
     -moz-transform: translateY(0%);
      -ms-transform: translateY(0%);
       -o-transform: translateY(0%);
          transform: translateY(0%);
}

.headroom--unpinned {
  -webkit-transform: translateY(-100%);
     -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
       -o-transform: translateY(-100%);
          transform: translateY(-100%);
}
*/