@charset "UTF-8";
 /*------------------------------------*\
    #TABLE OF CONTENTS
\*------------------------------------*/
/**
 * ABSTRACTS..............................Declarations of Sass variables & mixins
 * BASE...................................Default element styles
 * LAYOUT.................................Layout-specific styles
 * COMPONENTS.............................Component styles
 * UTILITIES..............................Utility classes
 */
/*------------------------------------*\
    #ABSTRACTS
\*------------------------------------*/
/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/
/**
 * CONTENTS
 *
 * COLORS
 * Brand Colors...............Globally-available variables and config
 * Neutral Colors.............Grayscale colors, including white and black
 * Utility Colors.............Info, Warning, Error, Success
 *
 * TYPOGRAPHY
 * Font Families..............The fonts used in the design system
 * Sizing.....................Font sizing
 *
 * LAYOUT
 * Max-widths.................Maximum layout container width
 *

 * SPACING
 * Spacing defaults...........Spacing between elements
 *
 * BORDERS
 * Border Width...............Border thicknesses
 * Border Radius..............Border radius definitions
 *
 * ANIMATION
 * Animation Speed............Transition/animation speed variables
 * Animation easing...........Easing variables
 *
 * BREAKPOINTS
 * Breakpoints................Global breakpoint definitions
 */
/*------------------------------------*\
    #COLORS
\*------------------------------------*/
/**
 * Brand Colors
 * 1) Brand=specific colors
 */
/**
 * TODO: Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
/**
 * Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
/**
 * Utility Colors
 * 1) Utility colors are colors used to provide feedback, such as alert messages,
 *    form validation, etc.
 */
/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/
/**
 * Font Family
 */
/**
 * Font Family
 */
/**
 * Font Sizing
 */
/**
 * Line Height
 */
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * Max Width
 */
/*------------------------------------*\
    #SPACING
\*------------------------------------*/
/**
 * Spacing and offsets
 * 1) Used to space grids and body padding
 */
/*------------------------------------*\
    #BORDERS
\*------------------------------------*/
/**
 * Border
 */
/**
 * Border radius
 */
/*------------------------------------*\
    #BOX SHADOWS
\*------------------------------------*/
/**
 * Default Box Shadow
 */
/*------------------------------------*\
    #ANIMATION
\*------------------------------------*/
/**
 * Transition Speed
 */
/**
 * Transition Ease
 */
/*------------------------------------*\
    #BREAKPOINTS
\*------------------------------------*/
/**
 * Breakpoints used in media queries
 * 1) These are not the only breakpoints used, but they provide a few defaults
 */
/*------------------------------------*\
    #MIXINS
\*------------------------------------*/
/*------------------------------------*\
    #BASE
\*------------------------------------*/
/*------------------------------------*\
    #RESET
\*------------------------------------*/
/**
 * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
 */
* {
  box-sizing: border-box; }

/**
 * 1) Zero out margins and padding for elements
 */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
  margin: 0;
  padding: 0; }

/**
 * 1) Set HTML5 elements to display: block
 */
header, footer, nav, section, article, figure {
  display: block; }

/*------------------------------------*\
    #BODY
\*------------------------------------*/
/**
 * Body base styles
 * 1) Set the body element's height to at least 100vh of the viewport.
 *    This is used to achieve a sticky footer
 * 2) Prevent Mobile Safari from scaling up text: https://blog.55minutes.com/2012/04/iphone-text-resizing/
 */
body {
  font: 100%/1.5 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  -webkit-text-size-adjust: 100%;
  color: #444;
  display: flex;
  flex-direction: column;
  height: 100%; }

/*------------------------------------*\
    #LINKS
\*------------------------------------*/
/**
 * Link base styles
 */
a {
  color: #444;
  text-decoration: none;
  outline: 0;
  transition: color 0.15s ease-out; }
  a:hover, a:focus {
    color: #808080; }
  a:active {
    color: #131313; }

/*------------------------------------*\
    #LISTS
\*------------------------------------*/
/**
 * 1) List base styles
 */
/**
 * Remove list styles from unordered and ordered lists
 */
ol, ul {
  list-style: none; }

/*------------------------------------*\
    #HEADINGS
\*------------------------------------*/
/**
 * Heading 1 base styles
 */
h1 {
  font-size: 2.25rem;
  line-height: 1;
  word-wrap: break-word; }
  @media all and (min-width: 47em) {
    h1 {
      font-size: 2.75rem; } }

/**
 * Heading 2 base styles
 */
h2 {
  font-size: 1.6em;
  line-height: 1.2;
  letter-spacing: -0.02rem;
  margin-bottom: 0.5rem;
  word-wrap: break-word; }

/**
 * Heading 3 base styles
 */
h3 {
  font-size: 1.2em;
  line-height: 1.2;
  margin-bottom: 0.3rem;
  word-wrap: break-word; }

/*------------------------------------*\
    #FORMS
\*------------------------------------*/
/**
 * 1) Form element base styles
 */
/**
 * Input placeholder text base styles
 */
::-webkit-input-placeholder {
  color: #808080; }

::-moz-placeholder {
  color: #808080; }

:-ms-input-placeholder {
  color: #808080; }

/**
 * Fieldset base styles
 */
fieldset {
  border: 0;
  padding: 0;
  margin: 0; }

/**
 * Legend base styles
 */
legend {
  margin-bottom: 0.25rem; }

/**
 * Label base styles
 */
label {
  display: block;
  padding-bottom: 0.25rem;
  color: #808080; }

/**
 * Add font size 100% of form element and margin 0 to these elements
 */
button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  margin: 0; }

/**
 * Text area base styles
 */
textarea {
  min-height: 6rem;
  resize: none; }

/**
 * Input  and text area base styles
 */
input, textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #bbbbbb;
  background: #fff;
  border-radius: 4px; }
  input:focus, textarea:focus {
    border-color: #131313; }

/**
 * Remove webkit appearance styles from these elements
 */
input[type=text], input[type=search], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=url], input[type=number], textarea {
  -webkit-appearance: none; }

/**
 * Checkbox and radio button base styles
 */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: 0.3rem;
  border-color: #444; }

/**
 * Search input base styles
 */
input[type="search"] {
  -webkit-appearance: none;
  border-radius: 0; }

/**
 * Select
 * 1) Remove default styling
 */
select {
  display: block;
  font-size: 1rem;
  width: 100%;
  border: 1px solid #bbbbbb;
  padding: 0.5rem;
  color: #131313;
  -webkit-appearance: none;
  background: url("../images/chevron-down.svg");
  background-position: calc(100% - 0.7rem) 50%;
  background-color: #fff;
  background-size: 10px 10px;
  background-repeat: no-repeat; }
  select:focus {
    border-color: #131313; }

/*------------------------------------*\
    #BUTTONS
\*------------------------------------*/
/**
 * Button and submit inputs reset
 * 1) These should be styled using c-btn
 */
button {
  cursor: pointer; }

/*------------------------------------*\
    #MAIN ELEMENT
\*------------------------------------*/
/**
 * Main element
 */
[role=main] {
  display: block;
  flex: 1 0 auto;
  padding: 1rem; }
  @media all and (min-width: 60em) {
    [role=main] {
      padding: 2rem; } }

/*------------------------------------*\
    #MEDIA
\*------------------------------------*/
/**
 * Responsive image styling
 * 1) Allows for images to flex with varying screen size
 */
img {
  max-width: 100%;
  height: auto; }

/*------------------------------------*\
    #TEXT
\*------------------------------------*/
/**
 * Paragraph base styles
 */
p {
  margin-bottom: 1rem; }

/**
 * Blockquote base styles
 */
blockquote {
  font-style: italic;
  border-left: 1px solid #808080;
  color: #808080;
  padding-left: 1rem;
  margin-bottom: 1rem; }

/**
 * Horizontal rule base styles
 */
hr {
  border: 0;
  height: 1px;
  background: #ddd;
  margin: 4rem 0; }

/**
 * Selection styles
 */
::-moz-selection {
  color: #131313;
  background: #dddddd;
  /* Gecko Browsers */ }

::selection {
  color: #131313;
  background: #dddddd;
  /* WebKit/Blink Browsers */ }

/**
 * Code base styles
 */
code {
  display: inline-block;
  background: #f8f9fb;
  border: 1px solid #ddd;
  padding: .2rem .5rem;
  line-height: 1.2;
  font-size: .85rem;
  	/**
  	 * 1) Force code inside tables to remain on one line
  	 * 2) //TODO: cleanup
   	 */ }
  .c-table code {
    white-space: nowrap; }

/**
 * Preformatted text base styles
 */
pre {
  background: #f8f9fb;
  border: 1px solid #ddd;
  font-size: 1rem;
  padding: 1rem;
  overflow-x: auto;
  /**
   * Remove border from code within preformatted text block
   */ }
  pre code {
    border: 0; }

/**
 * Code with languages associated with them
 * 1) Override Prism sysles for code blocks with language
 */
code[class*="language-"],
pre[class*="language-"] {
  font-family: monospace !important;
  /* 1 */ }

pre[class*="language-"] {
  margin: 0 !important;
  /* 1 */ }

/*------------------------------------*\
    #TABLES
\*------------------------------------*/
/**
 * Table
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

/**
 * Table header cell
 */
th {
  text-align: left; }

/**
 * Table row
 */
tr {
  vertical-align: top; }

/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * Layout Container
 * 1) Caps the width of the content to the maximum width
 *    and centers the container
 */
.l-container {
  max-width: 78.125rem;
  margin: 0 auto; }

/**
 *
 * 1) This narrow layout container is for lists, forms,
 *    and other singular objects that aren't dashboard-y
 *    kinds of displays
 */
.l-linelength-container {
  margin: 0 auto;
  max-width: 44rem; }

/*------------------------------------*\
    #GRID
\*------------------------------------*/
/**
 * Grid Container
 */
.l-grid {
  display: flex;
  flex-wrap: wrap; }
  @supports (display: grid) {
    .l-grid {
      display: grid;
      grid-gap: 1rem;
      margin: 0; } }

/**
 * 2up Grid and 2up-expand-first grid
 */
.l-grid--2up {
  margin: 0 -0.5rem; }
  @supports (display: grid) {
    .l-grid--2up {
      grid-template-columns: 1fr;
      margin: 0; }
      @media all and (min-width: 47em) {
        .l-grid--2up {
          grid-template-columns: 1fr 1fr; } } }

.l-grid--2up-wide {
  grid-gap: 10rem; }

/**
 * 2up Grid and 2up-expand-first grid
 */
.l-grid--3up {
  margin: 0 -0.5rem; }
  @supports (display: grid) {
    .l-grid--3up {
      grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
      margin: 0; } }

/**
 * 4up Grid and 2up-expand-first grid
 */
.l-grid--4up {
  margin: 0 -0.5rem; }
  @supports (display: grid) {
    .l-grid--4up {
      grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
      margin: 0; }
      @media all and (min-width: 47em) {
        .l-grid--4up {
          grid-template-columns: 1fr 1fr; } }
      @media all and (min-width: 60em) {
        .l-grid--4up {
          grid-template-columns: 1fr 1fr 1fr; } }
      @media all and (min-width: 70em) {
        .l-grid--4up {
          grid-template-columns: 1fr 1fr 1fr 1fr; } } }

/**
 * Grid Item
 */
.l-grid__item {
  /**
   * 4up Grid and 2up-expand-first grid
   */ }
  @media all and (min-width: 47em) {
    .l-grid--2up .l-grid__item {
      width: 50%; } }
  @supports (display: grid) {
    .l-grid--2up .l-grid__item {
      width: 100%; } }
  @media all and (min-width: 47em) {
    .l-grid--3up .l-grid__item {
      width: 50%; } }
  @media all and (min-width: 60em) {
    .l-grid--3up .l-grid__item {
      width: 33.33%; } }
  @supports (display: grid) {
    .l-grid--3up .l-grid__item {
      width: 100%; } }
  @media all and (min-width: 47em) {
    .l-grid__item .l-grid--4up {
      width: 50%; } }
  @media all and (min-width: 60em) {
    .l-grid__item .l-grid--4up {
      width: 33.33%; } }
  @media all and (min-width: 70em) {
    .l-grid__item .l-grid--4up {
      width: 25%; } }
  @supports (display: grid) {
    .l-grid__item .l-grid--4up {
      width: 100%; } }

/**
 * Main section
 * 1) The main section is the primary content container
 */
.l-page-layout__main {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  /**
   * Main section of 2 column fixed layout
   * 1) Margin left equals width of the fixed positioned sidebar
   */ }
  .l-page-layout--two-column-fixed > .l-page-layout__main {
    height: 100vh; }
    @media all and (min-width: 60em) {
      .l-page-layout--two-column-fixed > .l-page-layout__main {
        margin-left: 18rem;
        /* 1 */ } }

/**
 * Secondary section
 * 1) The secondary section is an auxiliary container
 *    Otherwise known as "sidebar", but we try to
 *    avoid that term to be mindful of the fact in
 *    responsive environments "sidebar"
 */
.l-page-layout__secondary {
  /**
   * Secondary section in a two-column fixed layout
   * 1) This is a fixed element
   */ }
  @media all and (min-width: 60em) {
    .l-page-layout--two-column-fixed > .l-page-layout__secondary {
      position: fixed;
      z-index: 2;
      overflow: auto;
      width: 18rem;
      height: 100vh; } }

/*------------------------------------*\
    #COMPONENTS
\*------------------------------------*/
/**
 * Global
 */
/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
/**
 * 1) Global block at the bottom of each page that contains a navigation and other information
 */
.c-footer {
  text-align: center;
  display: flex;
  flex-shrink: 0;
  border-top: 1px solid #eee;
  padding: 1rem 0;
  margin-top: 1rem; }

/*------------------------------------*\
    #HEADER
\*------------------------------------*/
/**
 * Global block at the top of each page containing the navigation, logo, and other potential utility nav
 */
.c-header {
  position: relative;
  background-color: #eee;
  color: #fff;
  margin-bottom: 2rem;
  z-index: 2; }

.c-header--vertical {
  margin-bottom: 0;
  background-color: #eee; }
  @media all and (min-width: 60em) {
    .c-header--vertical {
      height: auto; } }

/**
 * Header inner wrapper
 * 1) Align header items in horizontal configuration
 * 2) Vertically-align logo, primary nav items, and other stuff.
 */
.c-header__inner {
  display: flex;
  /* 1 */
  align-items: center;
  /* 2 */
  padding: 1rem 0; }
  @media all and (min-width: 60em) {
    .c-header--vertical .c-header__inner {
      display: block;
      min-height: 100vh; } }

.c-header__nav-btn.c-header__nav-btn {
  margin-left: auto;
  margin-right: 1rem; }
  @media all and (min-width: 60em) {
    .c-header__nav-btn.c-header__nav-btn {
      display: none; } }

/**
 * Header navigation conntainer
 * 1) Contains the primary navigation and other possible patterns
 */
.c-header__nav-container {
  display: none;
  width: 100%;
  /**
   * Header navigation conntainer within vertical header
   */ }
  @media all and (min-width: 60em) {
    .c-header__nav-container {
      display: block;
      margin-left: auto; } }
  @media all and (min-width: 60em) {
    .c-header--vertical .c-header__nav-container {
      margin-left: 0; } }

/**
 * Active header nav container
 */
.c-header__nav-container.is-active {
  display: block;
  position: absolute;
  background: #eee;
  top: 100%;
  left: 0;
  padding: 0 1rem;
  width: 100%;
  z-index: 5;
  /**
   * Active header nav container within vertical header
   */ }
  @media all and (min-width: 60em) {
    .c-header__nav-container.is-active {
      display: block;
      position: static;
      padding: 0;
      margin-left: auto;
      width: inherit; } }
  @media all and (min-width: 60em) {
    .c-header--vertical .c-header__nav-container.is-active {
      margin-left: 0;
      width: 100%; } }

/*------------------------------------*\
    #LOGO
\*------------------------------------*/
/**
 * Branding image or text of the site
 */
.c-logo {
  /**
   * Logo within vertical header
   */ }
  @media all and (min-width: 60em) {
    .c-logo {
      margin: 0; } }
  .c-header--vertical .c-logo {
    margin-left: 1rem; }
    @media all and (min-width: 60em) {
      .c-header--vertical .c-logo {
        margin: 1rem; } }

/**
 * Logo link
 */
.c-logo__link {
  display: block; }

/**
 * Logo img
 */
.c-logo__img {
  display: block;
  max-width: 13rem;
  height: auto;
  /**
   * Logo within vertical header
   */ }
  @media all and (min-width: 60em) {
    .c-header--vertical .c-logo__img {
      max-width: 15.75rem; } }

/**
 * Page
 */
/*------------------------------------*\
    #WRAPPER
\*------------------------------------*/
/**
 * 1) The main wrapper <div> for the website 
 */
.c-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column; }

/*------------------------------------*\
    #SECTION
\*------------------------------------*/
/**
 * Section block that helps chunk related items together
 */
.c-section {
  margin-bottom: 2rem; }

/*------------------------------------*\
    #SECTION HEADER
\*------------------------------------*/
/**
 * 1) Block containing section title and description to distinguish section
 */
.c-section__header {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee; }

/**
 * Section header title
 */
.c-section__title {
  font-size: 1.4375rem;
  margin-bottom: 0; }

/**
 * Section description
 */
.c-section__desc {
  font-size: 1rem;
  margin-bottom: 0; }

.c-well .c-section__title {
  font-size: 0.85rem;
  margin-bottom: 0; }

/*------------------------------------*\
    #PAGE HEADER
\*------------------------------------*/
/**
 * 1) Container that consists of of a page header kicker, title, and description
 */
.c-page-header {
  margin-bottom: 2rem;
  max-width: 44rem; }

/**
 * Page header kicker
 */
.c-page-header__kicker {
  color: #999999;
  margin-bottom: 1rem; }

/**
 * Page header title
 */
.c-page-header__title {
  margin-bottom: 0.2rem; }

/**
 * Page description
 */
.c-page-header__desc {
  margin-bottom: 0;
  font-size: 1.2rem;
  color: #707070; }

/**
 * Navigation
 */
/*------------------------------------*\
    #FOOTER NAVIGATION
\*------------------------------------*/
/**
 * 1) Navigation within the footer
 */
.c-footer-nav {
  display: flex;
  font-size: 0.75rem; }

/**
 * Footer navigation link
 */
.c-footer-nav__link {
  display: block;
  padding: 1rem 1rem 0.5rem;
  line-height: 1;
  color: #666; }
  .c-footer-nav__link:hover, .c-footer-nav__link:focus {
    color: #444; }

/*------------------------------------*\
    #PRIMARY NAVIGATION
\*------------------------------------*/
/**
 * Primary navigation most likely existing in the header
 */
/**
 * Primary navigation list
 */
.c-primary-nav__list {
  display: flex;
  flex-direction: column;
  /**
   * Primary navigation list within a vertical header
   */ }
  .c-header--vertical .c-primary-nav__list {
    display: block; }
  @media all and (min-width: 60em) {
    .c-primary-nav__list {
      flex-direction: row; } }

/**
 * Primary navigation item
 */
.c-primary-nav__item {
  position: relative;
  /**
   * Primary navigation item within vertical header
   */ }
  @media all and (min-width: 60em) {
    .c-primary-nav__item {
      margin-right: 1rem;
      /**
       * Remove margin right from last primary navigation item on large screens
       */ }
      .c-primary-nav__item:last-child {
        margin-right: 0; } }
  .c-header--vertical .c-primary-nav__item {
    margin-right: 0; }

/**
 * Primary navigation link
 */
.c-primary-nav__link {
  display: block;
  padding: 0.5rem 0;
  cursor: pointer;
  /**
   * Primary navigation link within vertical header
   */ }
  .c-primary-nav__link:focus {
    outline: 1px dotted #666; }
  .c-header--vertical .c-primary-nav__link {
    padding: 0.5rem 1rem; }

/**
 * Active primary navigation link
 */
.c-primary-nav__link.is-active {
  font-weight: bold; }

/**
 * Current primary navigation link
 */
.c-primary-nav__link.is-current {
  font-weight: bold; }

/**
 * Primary navigation link with subnavigation
 */
.c-primary-nav__link--has-children {
  display: flex;
  align-items: center;
  /**
   * Primary navigation link withing active item
   */
  /**
   * Primary navigation link within active item in vertical header
   */ }
  @media all and (min-width: 60em) {
    .c-primary-nav__item.is-active .c-primary-nav__link--has-children {
      background: #444;
      color: #444; } }
  .c-header--vertical .c-primary-nav__item.is-active .c-primary-nav__link--has-children {
    background: none;
    color: #444; }

/**
 * Primary navigation list subnavigation
 * Targets descendant of the
 */
.c-primary-nav__subitem {
  /**
   * Primary navigation sublist within subitem
   */
  /**
   * Primary navigation sublist within active subitem
   */ }
  .c-primary-nav__subitem .c-primary-nav__subitem {
    display: none; }
  .c-primary-nav__subitem.is-active .c-primary-nav__subitem {
    display: block; }

/**
 * Primary navigation sublist
 */
.c-primary-nav__sublist {
  border-left: 1px solid #bbbbbb; }

/**
 * Primary navigation list subnavigation first of type
 * 1) First of type is chosen to only choose direct descendant of primary
 *    navigation item
 */
.c-primary-nav__sublist:first-of-type {
  display: none;
  margin-left: 1rem;
  /**
   * Primary navigation sublist within vertical header
   */
  /**
   * Primary navigation sublist within vertical header active primary nav item
   */
  /**
   * Primary navigation sublist within active primary navigation item
   */
  /**
   * Primary navigation sublist within active item in vertical header
   */ }
  .c-header--vertical .c-primary-nav__sublist:first-of-type {
    margin-left: 1rem; }
  .c-header--vertical.is-active > .c-primary-nav__sublist:first-of-type {
    display: block; }
  .c-primary-nav__item.is-active .c-primary-nav__sublist:first-of-type {
    display: block; }
    @media all and (min-width: 60em) {
      .c-primary-nav__item.is-active .c-primary-nav__sublist:first-of-type {
        background: #444;
        padding: .5rem 1rem 1rem;
        margin: 0;
        position: absolute;
        top: 100%;
        z-index: 6;
        min-width: 8rem; } }
  .c-header--vertical .c-primary-nav__item.is-active .c-primary-nav__sublist:first-of-type {
    background: none; }
    @media all and (min-width: 60em) {
      .c-header--vertical .c-primary-nav__item.is-active .c-primary-nav__sublist:first-of-type {
        margin: 0;
        margin-left: 1rem;
        padding: 0;
        position: static; } }
  @media all and (min-width: 60em) {
    .c-primary-nav__sublist:first-of-type {
      margin-left: 0; } }

/**
 * Primary navigation sublink
 */
.c-primary-nav__sublink {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  /**
   * Primary navigation sublink within vertical header
   */ }
  .c-primary-nav__sublink:focus {
    outline: 1px dotted #666; }
  @media all and (min-width: 60em) {
    .c-header--vertical .c-primary-nav__sublink {
      color: #444; } }

/**
 * Active primary navigation link
 */
.c-primary-nav__sublink.is-active {
  font-weight: bold; }

/**
 * Current primary navigation link
 */
.c-primary-nav__sublink.is-current {
  font-weight: bold; }

/**
 * Primary navigation sublink with subnavigation
 */
.c-primary-nav__sublink--has-children {
  display: flex;
  align-items: center; }

/**
 * Primary navigation icon
 */
.c-primary-nav__icon {
  fill: #444;
  transition: fill 0.2s ease;
  margin-left: auto;
  /**
   * Primary navigation icon within vertical header
   */
  /**
   * Primary navigation icon within active link
   */
  /**
   * Primary navigation icon within active link within vertical header
   */
  /**
   * Primary navigation icon within hovered/focused primary navigation link
   */ }
  .c-header--vertical .c-primary-nav__icon {
    margin-left: auto; }
  .c-primary-nav__item.is-active .c-primary-nav__icon {
    fill: #444;
    transform: rotate(180deg); }
  .c-header--vertical .c-primary-nav__item.is-active .c-primary-nav__icon {
    fill: #444;
    transform: rotate(90deg); }
  .c-primary-nav__link:hover .c-primary-nav__icon, .c-primary-nav__link:focus .c-primary-nav__icon {
    fill: #808080; }

/**
 * Primary navigation subicon
 */
.c-primary-nav__subicon {
  fill: #444;
  transition: fill 0.2s ease;
  margin-left: auto;
  /**
   * Primary navigation icon within vertical header
   */
  /**
   * Primary navigation subicon within active link
   */
  /**
   * Primary navigation subicon within active subitem within vertical header
   */
  /**
   * Primary navigation icon within hovered/focused primary navigation link
   */ }
  .c-header--vertical .c-primary-nav__subicon {
    margin-left: auto; }
  .c-primary-nav__subitem.is-active .c-primary-nav__subicon {
    fill: #444;
    transform: rotate(180deg); }
  .c-header--vertical .c-primary-nav__subitem.is-active .c-primary-nav__subicon {
    fill: #444;
    transform: rotate(90deg); }
  .c-primary-nav__sublink:hover .c-primary-nav__subicon, .c-primary-nav__sublink:focus .c-primary-nav__subicon {
    fill: #808080; }

/*------------------------------------*\
    #BREADCRUMBS
\*------------------------------------*/
/**
 * 1) This is an ordered list showing what level you are on in the site
 */
.c-breadcrumbs {
  display: flex;
  /* 2 */
  flex-wrap: wrap;
  /* 3 */
  margin: 0 0 1rem 0;
  /* 4 */ }

/**
 * Breadcrumbs list item
 * 1) Set to position relative so :after is positioned relative to the breadcrumbs item
 */
.c-breadcrumbs__item {
  position: relative;
  /* 1 */
  margin-right: 1rem;
  /**
   * Icon in between list item
   * 1) Set to position absolute so it is positioned relative to its parent container
   */
  /**
   * Last breadcrumbs list item
   */ }
  .c-breadcrumbs__item:after {
    content: "\203A";
    position: absolute;
    /* 1 */
    top: 0;
    right: -10px; }
  .c-breadcrumbs__item:last-child {
    margin-right: 0;
    /**
     * Remove last breadcrumb item icon after
     */ }
    .c-breadcrumbs__item:last-child:after {
      display: none; }

/**
 * Breadcrumbs link
 */
.c-breadcrumbs__link {
  margin: 0 0.5rem;
  /**
   * Breadcrumbs link within first breadcrumb item
   */ }
  .c-breadcrumbs__item:first-child .c-breadcrumbs__link {
    margin-left: 0; }

/**
 * Buttons
 */
/*------------------------------------*\
    #BUTTON
\*------------------------------------*/
/**
 * 1) Button or link that has functionality to it
 */
.c-btn {
  display: inline-block;
  background: #444;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  font-weight: bold;
  padding: 1rem 2rem;
  border: 0;
  box-shadow: none;
  /* 2 */
  text-align: center;
  transition: all 0.15s ease-out; }
  .c-btn:hover, .c-btn:focus {
    background: #000;
    color: #fff; }

/**
 * Small button
 */
.c-btn--small {
  padding: .375rem .75rem; }

.c-btn__text {
  display: block; }

.c-btn__icon {
  position: relative;
  bottom: 2px;
  display: block;
  height: 24px;
  width: 24px;
  margin-right: 0.5rem; }

/*------------------------------------*\
    #BUTTON GROUP
\*------------------------------------*/
/**
 * 1) A grouping of buttons, often displayed side-by-side
 */
.c-btn-group {
  display: flex;
  flex-wrap: wrap; }
  .c-card .c-btn-group, .c-hero .c-btn-group {
    justify-content: center; }

/**
 * Forms
 */
/**
 * Blocks
 */
/*------------------------------------*\
    #CARD
\*------------------------------------*/
/**
 * 1) A card is a block of media followed by a body of text in a vertical format
 */
.c-card {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  position: relative;
  display: flex;
  padding: 1.5rem 1rem 1rem 1rem;
  border: 1px solid #bbbbbb; }

/**
* Card Footer
*/
.c-card__header {
  background: #f8f9fb;
  margin: -1.5rem -1rem 1rem -1rem;
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-bottom: 1px solid #ddd; }

/**
 * Card Body
 */
.c-card__body {
  flex: 1 0 auto; }

/**
 * Card Title
 */
.c-card__title {
  display: flex;
  align-items: center;
  font-size: 1.4375rem;
  color: #444;
  margin: 0; }

/**
* Card Footer
*/
.c-card__footer {
  background: #f8f9fb;
  margin: 1rem -1rem -1rem -1rem;
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-top: 1px solid #ddd; }

/**
* Card Actions
* 1) Card actions is a container for links and buttons within a card.
*/
.c-card__actions {
  margin-top: 1rem; }

/**
 * Card icon
 */
.c-card__icon {
  margin-left: auto;
  transition: transform 0.15s ease-out;
  /**
   * Card icon on card hover
   */ }
  .c-card:hover .c-card__icon, .c-card:focus .c-card__icon {
    transform: translate(3px); }

/*------------------------------------*\
    #CONTENT BLOCK
\*------------------------------------*/
.c-content-block__title {
  font-size: 1.2rem; }

/*------------------------------------*\
    #HERO
\*------------------------------------*/
/**
 * 1) Block containing headline, description text, that serves as a primary content area
 * 2) Background image set inline
 */
.c-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 2rem;
  min-height: 50vh;
  background-color: #fff;
  background-image: none;
  /* 2 */
  background-size: contain; }

.c-hero__body {
  padding: 2rem;
  text-align: center; }

/**
 * Hero Title
 */
.c-hero__title {
  max-width: 45rem;
  margin: 0 auto 2rem;
  font-size: 3.5rem;
  line-height: 1em; }

/**
 * Hero Description
 */
.c-hero__desc {
  color: #808080;
  font-size: 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  max-width: 35rem; }

/**
 * Hero Meta Information
 * 1) A lighter small treatment
 */
.c-hero__meta {
  color: #bbbbbb; }

/*------------------------------------*\
    #WELL
\*------------------------------------*/
/**
 * 1) A visually-styled container for content.
 */
.c-well {
  background: #fff;
  border: 1px solid #d9d9d9;
  padding: 1.5rem;
  margin-bottom: 2rem; }

/**
 * Tables
 */
/*------------------------------------*\
	#TABLE
\*------------------------------------*/
/**
 * 1) Data Table
 */
.c-table {
  margin-bottom: 1rem;
  min-width: 600px;
  /* 2 */ }

/**
 * Table Header
 */
.c-table__header {
  background: #eee; }

/**
 * Table Header Cell
 */
.c-table__header-cell {
  padding: 0.8rem; }

/**
 * Table Row
 */
.c-table__row {
  border-bottom: 1px solid #eee; }

/**
 * Table Cell
 */
.c-table__cell {
  padding: 1.6rem 0.8rem; }

/**
 * Table Footer
 */
/**
 * Table Footer Cell
 */
.c-table__footer-cell {
  padding: 0.8rem; }

/**
 * Images
 */
/*------------------------------------*\
    #ICON
\*------------------------------------*/
/**
 * 1) Small image that represents functionality
 */
.c-icon {
  height: 16px;
  width: 16px; }

/**
 * Text
 */
/*------------------------------------*\
    #TEXT PASSAGE
\*------------------------------------*/
/**
 * 1) A passage of text, including various components (i.e. article, blog post)
 */
.c-text-passage {
  /**
   * Link within the text passage
   */
  /**
   * Blockquote within text passage
   */
  /**
   * First-level heading within text passage
   */
  /**
   * Second-level heading within text passage
   */
  /**
   * Third-level heading within text passage
   */
  /**
   * Fourth-level heading within text passage
   */
  /**
   * Fifth-level heading within text passage
   */
  /**
   * Sixth-level heading within text passage
   */
  /**
   * Unordered list within text passage
   */
  /**
   * Ordered list within text passage
   */ }
  .c-text-passage p {
    margin-bottom: 1rem; }
  .c-text-passage a:not(.c-btn) {
    color: #808080;
    text-decoration: underline; }
    .c-text-passage a:not(.c-btn):hover, .c-text-passage a:not(.c-btn):focus {
      color: #444; }
  .c-text-passage blockquote {
    padding-left: 0.8rem;
    border-left: 3px solid #444;
    color: #808080;
    font-size: 1rem; }
  .c-text-passage h1 {
    margin-bottom: 1rem; }
  .c-text-passage h2 {
    margin: 2rem 0 0.5rem;
    color: #444;
    font-weight: bold; }
  .c-text-passage h3 {
    margin: 1rem 0 1rem; }
  .c-text-passage h4 {
    margin: 1rem 0 1rem; }
  .c-text-passage h5 {
    margin: 1rem 0 1rem; }
  .c-text-passage h6 {
    margin: 1rem 0 1rem; }
  .c-text-passage ul {
    list-style: disc;
    margin-left: 1rem;
    margin-bottom: 1rem; }
    .c-text-passage ul li:last-child {
      margin-bottom: 0; }
  .c-text-passage ol {
    list-style: decimal;
    margin-left: 1rem;
    margin-bottom: 1rem; }
    .c-text-passage ol li:last-child {
      margin-bottom: 0; }
  .c-text-passage li {
    margin-bottom: 0.5rem;
    line-height: 1.6; }

/*------------------------------------*\
    #BADGE
\*------------------------------------*/
/**
 * A badge is a small 
 */
.c-badge {
  border-radius: 4px;
  color: #ffffff;
  font-size: .65rem;
  margin-left: 4px;
  padding: 4px;
  vertical-align: middle; }

.c-badge--negative {
  background-color: #d82424; }

.c-badge--positive {
  background-color: #00af53; }

.c-badge--caution {
  background-color: #225896; }

/**
 * Lists
 */
/*------------------------------------*\
    #CARD LIST
\*------------------------------------*/
/**
 * 1) A collection of cards displayed as a list or grid
 */
/**
 * Interactive
 */
/*------------------------------------*\
    #TABS
\*------------------------------------*/
/**
 * 1) Unordered list of links where the each link targets different information
 */
/**
 * Tabs list
 */
.c-tabs__list {
  display: flex;
  border-bottom: 1px solid #bbbbbb; }

/**
* Tabs list
* 1) Overlap the tabs bottom border
*/
.c-tabs__link {
  display: block;
  padding: 0.5rem 1rem;
  min-width: 5rem;
  text-align: center; }

.c-tabs__list-item {
  margin-bottom: -1px;
    /**
	 * Active tabs link
	 */ }
  .c-tabs__list-item.is-active {
    border: 1px solid #bbbbbb;
    border-bottom: 1px solid #fff; }

/**
 * Tab Body
 */
.c-tabs__body {
  padding: 1rem 0;
  border-top: 0; }

/**
 * Tab Panel
 * 1) Display by default, and only hide if JS is available
 */
.c-tabs__panel {
  display: none;
  padding: 1rem;
  /**
   * Active tabs panel
   */ }
  .c-tabs__panel.is-active {
    display: block; }

/*------------------------------------*\
    #UTILITIES
\*------------------------------------*/
/*------------------------------------*\
    #SPACING CLASSES
\*------------------------------------*/
.u-margin-bottom-none {
  margin-bottom: 0 !important; }

.u-margin-bottom-large {
  margin-bottom: 2rem !important; }

.u-margin-left-none {
  margin-left: 0 !important; }

.u-margin-top-quad {
  margin-top: 4rem !important; }

.u-padding-bottom-none {
  padding-bottom: 0 !important; }

/*------------------------------------*\
    #VISIBILITY CLASSES
\*------------------------------------*/
/**
 * Is Hidden
 * 1) Completely remove from the flow and screen readers.
 */
.u-is-hidden {
  display: none !important;
  visibility: hidden !important; }

/**
 * Is Visibly Hidden
 * 1) Completely remove from the flow but leave available to screen readers.
 */
.u-is-vishidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px); }

.u-margin-bottom-none {
  margin-bottom: 0 !important; }

/*------------------------------------*\
    #UTILITIES
\*------------------------------------*/
/*------------------------------------*\
    #PRISM OVERRIDES
\*------------------------------------*/
/**
 * Code Overrides
 */
code[class*="language-"], pre[class*="language-"] {
  white-space: normal !important; }

.fpo {
  background: #ddd;
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5rem; }

/*# sourceMappingURL=style.css.map */
