@charset "UTF-8";
/*------------------------------------*\
    #BLOCK
\*------------------------------------*/
/**
 * The block object simply stacks an image on top of some text-like content.
 */
/**
 * Stacked image-with-text object. A simple abstraction to cover a very commonly
 * occurring design pattern.
 */
.o-block {
  display: block;
}

/**
 * 1. Eliminate whitespace around images.
 */
.o-block__img {
  vertical-align: middle; /* [1] */
  margin-bottom: 24px;

}

/**
 * No space between the image and the text content.
 */
.o-block--flush > .o-block__img {
  margin-bottom: 0;
}

/**
 * Tiny space between the image and the text content.
 */
.o-block--tiny > .o-block__img {
  margin-bottom: 6px;
}

/**
 * Small space between the image and the text content.
 */
.o-block--small > .o-block__img {
  margin-bottom: 12px;
}

/**
 * Large space between the image and the text content.
 */
.o-block--large > .o-block__img {
  margin-bottom: 48px;
}

/**
 * Huge space between the image and the text content.
 */
.o-block--huge > .o-block__img {
  margin-bottom: 96px;
}

/**
 * Text-content.
 */
.o-block__body {
  display: block;
}

/**
 * Right-aligned blocks.
 */
.o-block--right {
  text-align: right;
}

/**
 * Center-aligned blocks.
 */
.o-block--center {
  text-align: center;
}









/*------------------------------------*\
    #BOX
\*------------------------------------*/
/**
 * The box object simply boxes off content.
 */
/**
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 */
.o-box {
  display: block; /* [1] */
  padding: 24px;
}

.o-box > :last-child {
  margin-bottom: 0;
}

/**
 * Flush (i.e. no padding) box.
*/
.o-box--flush {
  padding: 0;
}

/**
 * Tiny box.
 */
.o-box--tiny {
  padding: 6px;
}

/**
 * Small box.
 */
.o-box--small {
  padding: 12px;
}

/**
 * Large box.
 */
.o-box--large {
  padding: 48px;
}

/**
 * Huge box.
 */
.o-box--huge {
  padding: 96px;
}












/*------------------------------------*\
    #FLAG
\*------------------------------------*/
/**
 * The flag object is a design pattern similar to the media object, however it
 * utilises `display: table[-cell];` to give us control over the vertical
 * alignments of the text and image. csswizardry.com/2013/05/the-flag-object
 */
/**
 * 1. Allows us to control vertical alignments
 * 2. Force the object to be the full width of its parent. Combined with [1],
 *    this makes the object behave in a quasi-`display: block;` manner.
 */
.o-flag {
  display: table; /* [1] */
  width: 100%; /* [2] */
}

/**
 * Items within a flag object. There should only ever be one of each.
 *
 * 1. Default to aligning content to their middles.
 */
.o-flag__img,
.o-flag__body {
  display: table-cell;
  vertical-align: middle; /* [1] */
}

/**
 * Flag images have a space between them and the body of the object.
 */
.o-flag__img {
  padding-right: 24px;
}

.o-flag__img > img {
  display: block;
  max-width: none;
}

/**
 * The container for the main content of the flag object.
 *
 * 1. Forces the `.o-flag__body` to take up all remaining space.
 */
.o-flag__body {
  width: 100%; /* [1] */
}

.o-flag__body,
.o-flag__body > :last-child {
  margin-bottom: 0;
}

/**
 * Tiny flags.
 */
.o-flag--tiny > .o-flag__img {
  padding-right: 6px;
}

/**
* Tiny reversed flags.
*/
.o-flag--tiny.o-flag--rev > .o-flag__img {
  padding-right: 0;
  padding-left: 6px;
}

/**
 * Small flags.
 */
.o-flag--small > .o-flag__img {
  padding-right: 12px;
}

/**
 * Small reversed flags.
 */
.o-flag--small.o-flag--rev > .o-flag__img {
  padding-right: 0;
  padding-left: 12px;
}

/**
 * Large flags.
 */
.o-flag--large > .o-flag__img {
  padding-right: 48px;
}

/**
 * Large reversed flags.
 */
.o-flag--large.o-flag--rev > .o-flag__img {
  padding-right: 0;
  padding-left: 48px;
}

/**
 * Huge flags.
 */
.o-flag--huge > .o-flag__img {
  padding-right: 96px;
}

/**
 * Huge reversed flags.
 */
.o-flag--huge.o-flag--rev > .o-flag__img {
  padding-right: 0;
  padding-left: 96px;
}

/**
 * Reversed flag objects have their image-content to the right, and text-content
 * to the left.
 *
 * 1. Swap the rendered direction of the object…
 * 2. …and reset it.
 * 3. Reassign margins to the correct sides.
 */
.o-flag--rev {
  direction: rtl; /* [1] */
}

.o-flag--rev > .o-flag__img,
.o-flag--rev > .o-flag__body {
  direction: ltr; /* [2] */
}

.o-flag--rev > .o-flag__img {
  padding-right: 0; /* [3] */
  padding-left: 24px; /* [3] */
}

/**
 * Flush flag objects have no space between the image- and text-content.
 */
.o-flag--flush > .o-flag__img {
  padding-right: 0;
  padding-left: 0;
}

/**
 * Vertically top aligned flag objects.
 */
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
  vertical-align: top;
}

/**
 * Vertically bottom aligned flag objects.
 */
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
  vertical-align: bottom;
}

/**
 * Responsive flag objects.
 *
 * There is a very pragmatic, simple implementation of a responsive flag
 * object, which simply places the text-content beneath the image-content.
 *
 * We use a `max-width` media query because:
 *
 * a) it is the least verbose method in terms of amount of code required.
 * b) the flag object’s default state is image-next-to-text, so its stacked
 *    state is the exception, rather than the rule.
 */
@media screen and (max-width: 767px) {
  .o-flag__img--hide-on-small {
    display: none;
  }

  .o-flag--responsive {
    /**
     * Disable reversal of content because there is no concept of
     * ‘reversed’ in a stacked layout.
     */
    direction: ltr;
  }

  /**
   * Rework the spacings on regular flag objects.
   */
  .o-flag--responsive,
  .o-flag--responsive > .o-flag__img,
  .o-flag--responsive > .o-flag__body {
    display: block;
  }

  .o-flag--responsive > .o-flag__img {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 24px;
  }

  /**
   * Tiny responsive flags.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on flags that are also tiny flags in their regular
   * state.
   */
  .o-flag--responsive.o-flag--tiny > .o-flag__img {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 6px;
  }

  /**
   * Small responsive flags.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on flags that are also small flags in their regular
   * state.
   */
  .o-flag--responsive.o-flag--small > .o-flag__img {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 12px;
  }

  /**
   * Large responsive flags.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on flags that are also large flags in their regular
   * state.
   */
  .o-flag--responsive.o-flag--large > .o-flag__img {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 48px;
  }

  /**
  * Huge responsive flags.
  *
  * Take a little more heavy-handed approach to reworking
  * spacings on flags that are also huge flags in their regular
  * state.
  */
  .o-flag--responsive.o-flag--huge > .o-flag__img {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 96px;
  }
}









/*------------------------------------*\
    #LIST-BARE
\*------------------------------------*/
/**
 * The list-bare object simply removes any indents and bullet points from lists.
 */
.o-list-bare {
  margin: 0;
  padding: 0;
  list-style: none;
}








/*------------------------------------*\
    #LIST-INLINE
\*------------------------------------*/
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-list-inline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-list-inline > li {
  display: inline-block;
}

/**
 * Comma delimited list to semantically mark up lists of tags, etc.
 *
 * N.B. This component requires that you remove the whitespace between LIs.
 *      The simplest (and valid) way to achieve this is by omitting the
 *      closing `</li>` tag.
 */
.o-list-inline--delimited > li + li:before {
  content: "| ";
}









/*------------------------------------*\
    #MEDIA
\*------------------------------------*/
/**
 * Place any image- and text-like content side-by-side, as per:
 * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */

.clearfix:after,
.o-media:after {
content: "";
display: table;
clear: both;
}

.o-media {
  display: block;
}

.o-media__img {
  float: left;
  margin-right: 24px;
}

.o-media__img > img {
  display: block;
}

.o-media__body {
  overflow: hidden;
  display: block;
}

.o-media__body,
.o-media__body > :last-child {
  margin-bottom: 0;
}

/**
 * Tiny media objects.
 */
.o-media--tiny > .o-media__img {
  margin-right: 6px;
}

/**
 * Tiny reversed media objects.
 */
.o-media--tiny.o-media--rev > .o-media__img {
  margin-right: 0;
  margin-left: 6px;
}

/**
 * Small media objects.
 */
.o-media--small > .o-media__img {
  margin-right: 12px;
}

/**
 * Small reversed media objects.
 */
.o-media--small.o-media--rev > .o-media__img {
  margin-right: 0;
  margin-left: 12px;
}

/**
 * Large media objects.
 */
.o-media--large > .o-media__img {
  margin-right: 48px;
}

/**
 * Large reversed media objects.
 */
.o-media--large.o-media--rev > .o-media__img {
  margin-right: 0;
  margin-left: 48px;
}

/**
 * Huge media objects.
 */
.o-media--huge > .o-media__img {
  margin-right: 96px;
}

/**
 * Huge reversed media objects.
 */
.o-media--huge.o-media--rev > .o-media__img {
  margin-right: 0;
  margin-left: 96px;
}

/**
 * Reversed image location (right instead of left). Extends `.o-media`.
 */
.o-media--rev > .o-media__img {
  float: right;
  margin-right: 0;
  margin-left: 24px;
}

/**
 * Flush media objects have no space between the image- and text-content.
 */
.o-media--flush > .o-media__img {
  margin-right: 0;
  margin-left: 0;
}

/**
 * Responsive media objects.
 *
 * There is a very pragmatic, simple implementation of a responsive media
 * object, which simply places the text-content beneath the image-content.
 *
 * We use a `max-width` media query because:
 *
 * a) it is the least verbose method in terms of amount of code required.
 * b) the media object’s default state is image-next-to-text, so its stacked
 *    state is the exception, rather than the rule.
 */
@media screen and (max-width: 767px) {
  /**
   * Rework the spacings on regular media objects.
   */
  .o-media--responsive > .o-media__img {
    float: none;
    margin-right: 0;
    margin-bottom: 24px;
    margin-left: 0;
  }

  /**
   * Tiny responsive media objects.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on media objects that are also tiny media objects
   * in their regular state.
   */
  .o-media--responsive.o-media--tiny > .o-media__img {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 6px;
  }

  /**
   * Small responsive media objects.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on media objects that are also small media objects
   * in their regular state.
   */
  .o-media--responsive.o-media--small > .o-media__img {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 12px;
  }

  /**
   * Large responsive media objects.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on media objects that are also large media objects
   * in their regular state.
   */
  .o-media--responsive.o-media--large > .o-media__img {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 48px;
  }

  /**
   * Huge responsive media objects.
   *
   * Take a little more heavy-handed approach to reworking
   * spacings on media objects that are also huge media objects
   * in their regular state.
   */
  .o-media--responsive.o-media--huge > .o-media__img {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 96px;
  }
}










/*------------------------------------*\
    #PACK
\*------------------------------------*/
/**
 * The pack object simply causes any number of elements pack up horizontally to
 * automatically fill an equal, fluid width of their parent.
 */

/**
 * 1. Fill all available space.
 * 2. Cause children to be automatically equally sized.
 */
.o-pack {
  width: 100%; /* [1] */
  display: table;
  table-layout: fixed; /* [2] */
}

/**
 * Cause children to adopt table-like structure.
 */
.o-pack__item {
  display: table-cell;
}

/**
 * All items are aligned to the middles of each other.
 */
.o-pack--middle > .o-pack__item {
  vertical-align: middle;
}

/**
 * All items are aligned to the bottoms of each other.
 */
.o-pack--bottom > .o-pack__item {
  vertical-align: bottom;
}

/**
 * Cause children to pack up into available space, but not equally sized.
 */
.o-pack--auto {
  table-layout: auto;
}

/**
 * Tiny gutters between items.
 */
.o-pack--tiny {
  border-spacing: 6px;
}

/**
 * Small gutters between items.
 */
.o-pack--small {
  border-spacing: 12px;
}

/**
 * Large gutters between items.
 */
.o-pack--large {
  border-spacing: 48px;
}

/**
 * Huge gutters between items.
 */
.o-pack--huge {
  border-spacing: 96px;
}

/**
 * Reversed order packs.
 */
.o-pack--rev {
  direction: rtl;
}

.o-pack--rev > .o-pack__item {
  direction: ltr;
}







/*------------------------------------*\
    #TABS
\*------------------------------------*/
/**
 * A simple abstraction for making equal-width navigation tabs.
 */
/**
 * 1. Reset any residual styles (most likely from lists).
 * 2. Tables for layout!
 * 3. Force all `table-cell` children to have equal widths.
 * 4. Force the object to be the full width of its parent. Combined with [2],
 *    this makes the object behave in a quasi-`display: block;` manner.
 */
.o-tabs {
  margin: 0; /* [1] */
  padding: 0; /* [1] */
  list-style: none; /* [1] */
  display: table; /* [2] */
  table-layout: fixed; /* [3] */
  width: 100%; /* [4] */
  text-align: center;
}

.o-tabs__item {
  display: table-cell; /* [2] */
}

.o-tabs__link {
  display: block;
}







/*------------------------------------*\
    #CONTAINER
\*------------------------------------*/
.o-container {
  max-width: 1190px;
  margin: 0 auto;
}

.o-container {
  padding-left: 12px;
  padding-right: 12px;
}






/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * The inuitcss layout system uses `box-sizing: border-box;` and
 * `display: inline-block;` to create an extremely powerful, flexible
 * alternative to the traditional grid system. Combine the layout items with
 * the widths found in `trumps.widths`.
 */

/**
 * Begin a layout group.
 */
.o-layout {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -24px;
}

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.o-layout__item {
  display: inline-block; /* [1] */
  padding-left: 24px; /* [2] */
  vertical-align: top; /* [3] */
  width: 100%; /* [4] */
}

/**
 * Layouts with tiny gutters.
 */
.o-layout--tiny {
  margin-left: -6px;
}

.o-layout--tiny > .o-layout__item {
  padding-left: 6px;
}

/**
 * Layouts with small gutters.
 */
.o-layout--small {
  margin-left: -12px;
}

.o-layout--small > .o-layout__item {
  padding-left: 12px;
}

/**
 * Layouts with large gutters.
 */
.o-layout--large {
  margin-left: -48px;
}

.o-layout--large > .o-layout__item {
  padding-left: 48px;
}

/**
 * Layouts with huge gutters.
 */
.o-layout--huge {
  margin-left: -96px;
}

.o-layout--huge > .o-layout__item {
  padding-left: 96px;
}

/**
 * Layouts with no gutters.
 */
.o-layout--flush {
  margin-left: 0;
}

.o-layout--flush > .o-layout__item {
  padding-left: 0;
}

/**
 * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
 * markup will display in order 4, 3, 2, 1 on your page.
 */
.o-layout--rev {
  direction: rtl;
  text-align: left;
}

.o-layout--rev > .o-layout__item {
  direction: ltr;
  text-align: left;
}

/**
 * Align layout items to the vertical centers of each other.
 */
.o-layout--middle > .o-layout__item {
  vertical-align: middle;
}

/**
 * Align layout items to the vertical bottoms of each other.
 */
.o-layout--bottom > .o-layout__item {
  vertical-align: bottom;
}

/**
 * Make the layout items fill up from the right hand side.
 */
.o-layout--right {
  text-align: right;
}

.o-layout--right > .o-layout__item {
  text-align: left;
}

/**
 * Make the layout items fill up from the center outward.
 */
.o-layout--center {
  text-align: center;
}

.o-layout--center > .o-layout__item {
  text-align: left;
}

/**
 * Cause layout items to take up a non-explicit amount of width.
 */
.o-layout--auto > .o-layout__item {
  width: auto;
}

/**
 * Hack for IE 7
 */

.o-layout__item {
  /* Make inline-block work */
  zoom: 1;
  *display:inline;
}







/*------------------------------------*\
    #WIDTHS
\*------------------------------------*/
.u-1-of-1 {
  width: 100% !important; }

.u-1-of-2 {
  width: 50% !important; }

.u-1-of-3 {
  width: 33.33333% !important; }

.u-2-of-3 {
  width: 66.66667% !important; }

.u-1-of-4 {
  width: 25% !important; }

.u-2-of-4 {
  width: 50% !important; }

.u-3-of-4 {
  width: 75% !important; }

.u-1-of-5 {
  width: 20% !important; }

.u-2-of-5 {
  width: 40% !important; }

.u-3-of-5 {
  width: 60% !important; }

.u-4-of-5 {
  width: 80% !important; }

@media screen and (max-width: 767px) {
  .u-1-of-1--mobile {
    width: 100% !important; }

  .u-1-of-2--mobile {
    width: 50% !important; }

  .u-1-of-3--mobile {
    width: 33.33333% !important; }

  .u-2-of-3--mobile {
    width: 66.66667% !important; }

  .u-1-of-4--mobile {
    width: 25% !important; }

  .u-2-of-4--mobile {
    width: 50% !important; }

  .u-3-of-4--mobile {
    width: 75% !important; }

  .u-1-of-5--mobile {
    width: 20% !important; }

  .u-2-of-5--mobile {
    width: 40% !important; }

  .u-3-of-5--mobile {
    width: 60% !important; }

  .u-4-of-5--mobile {
    width: 80% !important; }
}








/*------------------------------------*\
    #ISLAND
\*------------------------------------*/
/* http://csswizardry.com/2011/10/the-island-object/ */
.o-island{
  padding:24px;
  margin-bottom:24px;
}
.o-island > :last-child{
  margin-bottom:0; /* Remove the margin from the last child of a boxed off area so that we don’t end up with compounded margin/padding spacings. */
}