/** @define stickyheader */

/*
* This file contains all styles used to control the behaviour
* of the sticky header (provided by headroom.js)
*/

/*
* This file contains all default application-wide Sass and CSS3 variables.
*/

/* used to determine when to trigger an external icon */

/* Type Sizes */

/* 12px */

/* 14px */

/* 16px */

/* 18px */

/* 20px */

/* 24px */

/* 28px */

/* 32px */

/* 36px */

/* 44px */

/* 54px */

/* 64px */

/* 80px */

/* 122px */

/* 12px */

/* 14px */

/* 16px */

/* 18px */

/* 20px */

/* 24px */

/* 28px */

/* 32px */

/* 36px */

/* 44px */

/* 54px */

/* 64px */

/* 80px */

/* 122px */

/* Colors */

/* Default colors */

/* Title weights */

/* Forms */

/* Buttons */

/* Tables */

/* Carousel */

/* Throbber / ajax loading animation */

/* CLF 8 Breakpoints map */

/* CLF 7 Breakpoints map to control version 7 of the CLF separately */

@media (min-width: 980px) {

  .stickynav--pinned {
    position: fixed;
    z-index: 51;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.3s ease;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .stickynav--unpinned {
    transform: translate3d(0, -100%, 0);
  }

  .nav--is-pinned #ubc7-unit {
    margin-bottom: 45px;
  }
}