@charset "UTF-8";
.sg {
  margin: 0;
  padding: 0;
  border: 0; }

.sg.sg-wrapper {
  max-width: 1200px !important; }

.sg-item {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px; }
  .sg-item * {
    box-sizing: inherit; }

.sg-black-bg {
  background-color: #000;
  padding: 20px; }

.sg-grey-bg {
  background-color: #f4f4f4;
  padding: 20px; }

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block; }

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/* Forms
   ========================================================================== */
/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  font: inherit; }

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */
button,
input,
select {
  /* 2 */
  overflow: visible; }

/**
 * Remove the margin in Safari.
 * 1. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  /* 1 */
  margin: 0; }

/**
 * Remove the inheritence of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritence of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Change the cursor in all browsers (opinionated).
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer; }

/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */
[disabled] {
  cursor: default; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * Correct the odd appearance of search inputs in Chrome and Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; }

/**
 * Remove the inner padding and cancel buttons in Chrome on OS X and
 * Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*------------------------------------*    $RESET
\*------------------------------------*/
html {
  font-size: 10px;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

body {
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  color: #2c2c2c;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.main {
  position: relative;
  z-index: 600; }

img {
  display: block;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

/*
Grid

We use the <a href="http://getbootstrap.com/css/#grid">Twitter Boostrap responsive grid</a> because it is great at handling layouts at different screen sizes. It also contains nice features for pushing and pulling around grid columns.

markup:
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div class="grid-placeholder">.col-xs-12.col-md-6</div>
    </div>
    <div class="col-xs-12 col-md-6">
      <div class="grid-placeholder">.col-xs-12.col-md-6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="grid-placeholder">.col-xs-6.col-md-4</div>
    </div>
    <div class="col-xs-6 col-md-4">
      <div class="grid-placeholder">.col-xs-6.col-md-4</div>
    </div>
    <div class="col-xs-6 col-md-4">
      <div class="grid-placeholder">.col-xs-6.col-md-4</div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6 col-md-3">
      <div class="grid-placeholder">.col-xs-6.col-md-3</div>
    </div>
    <div class="col-xs-6 col-md-3">
      <div class="grid-placeholder">.col-xs-6.col-md-3</div>
    </div>
    <div class="col-xs-6 col-md-3">
      <div class="grid-placeholder">.col-xs-6.col-md-3</div>
    </div>
    <div class="col-xs-6 col-md-3">
      <div class="grid-placeholder">.col-xs-6.col-md-3</div>
    </div>
  </div>
</div>

Styleguide 1.0
*/
.grid-placeholder {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #2c2c2c;
  background-color: #f4f4f4;
  padding: 15px;
  margin-bottom: 18px; }

[data-container],
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px;
  max-width: 1200px; }
  [data-container]:before, [data-container]:after,
  .container:before,
  .container:after {
    content: ' ';
    display: table; }
  [data-container]:after,
  .container:after {
    clear: both; }
  [data-container].narrow-grid,
  .container.narrow-grid {
    max-width: 788px; }
  [data-container].full-width-grid,
  .container.full-width-grid {
    overflow-x: hidden;
    max-width: none;
    padding: 0; }

[data-container] {
  margin-bottom: 18px; }

.row {
  box-sizing: border-box;
  margin-left: -6px;
  margin-right: -6px;
  position: relative; }
  .row:before, .row:after {
    content: ' ';
    display: table; }
  .row:after {
    clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 6px;
  padding-right: 6px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left; }

.col-xs-1 {
  width: 8.33333%; }

.col-xs-2 {
  width: 16.66667%; }

.col-xs-3 {
  width: 25%; }

.col-xs-4 {
  width: 33.33333%; }

.col-xs-5 {
  width: 41.66667%; }

.col-xs-6 {
  width: 50%; }

.col-xs-7 {
  width: 58.33333%; }

.col-xs-8 {
  width: 66.66667%; }

.col-xs-9 {
  width: 75%; }

.col-xs-10 {
  width: 83.33333%; }

.col-xs-11 {
  width: 91.66667%; }

.col-xs-12 {
  width: 100%; }

.col-xs-pull-0 {
  right: 0%; }

.col-xs-pull-1 {
  right: 8.33333%; }

.col-xs-pull-2 {
  right: 16.66667%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-4 {
  right: 33.33333%; }

.col-xs-pull-5 {
  right: 41.66667%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-7 {
  right: 58.33333%; }

.col-xs-pull-8 {
  right: 66.66667%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-10 {
  right: 83.33333%; }

.col-xs-pull-11 {
  right: 91.66667%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-push-0 {
  left: 0%; }

.col-xs-push-1 {
  left: 8.33333%; }

.col-xs-push-2 {
  left: 16.66667%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-4 {
  left: 33.33333%; }

.col-xs-push-5 {
  left: 41.66667%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-7 {
  left: 58.33333%; }

.col-xs-push-8 {
  left: 66.66667%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-10 {
  left: 83.33333%; }

.col-xs-push-11 {
  left: 91.66667%; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-offset-0 {
  margin-left: 0%; }

.col-xs-offset-1 {
  margin-left: 8.33333%; }

.col-xs-offset-2 {
  margin-left: 16.66667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.33333%; }

.col-xs-offset-5 {
  margin-left: 41.66667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.33333%; }

.col-xs-offset-8 {
  margin-left: 66.66667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.33333%; }

.col-xs-offset-11 {
  margin-left: 91.66667%; }

.col-xs-offset-12 {
  margin-left: 100%; }

@media (min-width: 540px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left; }
  .col-sm-1 {
    width: 8.33333%; }
  .col-sm-2 {
    width: 16.66667%; }
  .col-sm-3 {
    width: 25%; }
  .col-sm-4 {
    width: 33.33333%; }
  .col-sm-5 {
    width: 41.66667%; }
  .col-sm-6 {
    width: 50%; }
  .col-sm-7 {
    width: 58.33333%; }
  .col-sm-8 {
    width: 66.66667%; }
  .col-sm-9 {
    width: 75%; }
  .col-sm-10 {
    width: 83.33333%; }
  .col-sm-11 {
    width: 91.66667%; }
  .col-sm-12 {
    width: 100%; }
  .col-sm-pull-0 {
    right: 0%; }
  .col-sm-pull-1 {
    right: 8.33333%; }
  .col-sm-pull-2 {
    right: 16.66667%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-4 {
    right: 33.33333%; }
  .col-sm-pull-5 {
    right: 41.66667%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-7 {
    right: 58.33333%; }
  .col-sm-pull-8 {
    right: 66.66667%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-10 {
    right: 83.33333%; }
  .col-sm-pull-11 {
    right: 91.66667%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-push-0 {
    left: 0%; }
  .col-sm-push-1 {
    left: 8.33333%; }
  .col-sm-push-2 {
    left: 16.66667%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-4 {
    left: 33.33333%; }
  .col-sm-push-5 {
    left: 41.66667%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-7 {
    left: 58.33333%; }
  .col-sm-push-8 {
    left: 66.66667%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-10 {
    left: 83.33333%; }
  .col-sm-push-11 {
    left: 91.66667%; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-offset-0 {
    margin-left: 0%; }
  .col-sm-offset-1 {
    margin-left: 8.33333%; }
  .col-sm-offset-2 {
    margin-left: 16.66667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.33333%; }
  .col-sm-offset-5 {
    margin-left: 41.66667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.33333%; }
  .col-sm-offset-8 {
    margin-left: 66.66667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.33333%; }
  .col-sm-offset-11 {
    margin-left: 91.66667%; }
  .col-sm-offset-12 {
    margin-left: 100%; } }

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left; }
  .col-md-1 {
    width: 8.33333%; }
  .col-md-2 {
    width: 16.66667%; }
  .col-md-3 {
    width: 25%; }
  .col-md-4 {
    width: 33.33333%; }
  .col-md-5 {
    width: 41.66667%; }
  .col-md-6 {
    width: 50%; }
  .col-md-7 {
    width: 58.33333%; }
  .col-md-8 {
    width: 66.66667%; }
  .col-md-9 {
    width: 75%; }
  .col-md-10 {
    width: 83.33333%; }
  .col-md-11 {
    width: 91.66667%; }
  .col-md-12 {
    width: 100%; }
  .col-md-pull-0 {
    right: 0%; }
  .col-md-pull-1 {
    right: 8.33333%; }
  .col-md-pull-2 {
    right: 16.66667%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-4 {
    right: 33.33333%; }
  .col-md-pull-5 {
    right: 41.66667%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-7 {
    right: 58.33333%; }
  .col-md-pull-8 {
    right: 66.66667%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-10 {
    right: 83.33333%; }
  .col-md-pull-11 {
    right: 91.66667%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-push-0 {
    left: 0%; }
  .col-md-push-1 {
    left: 8.33333%; }
  .col-md-push-2 {
    left: 16.66667%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-4 {
    left: 33.33333%; }
  .col-md-push-5 {
    left: 41.66667%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-7 {
    left: 58.33333%; }
  .col-md-push-8 {
    left: 66.66667%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-10 {
    left: 83.33333%; }
  .col-md-push-11 {
    left: 91.66667%; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-offset-0 {
    margin-left: 0%; }
  .col-md-offset-1 {
    margin-left: 8.33333%; }
  .col-md-offset-2 {
    margin-left: 16.66667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.33333%; }
  .col-md-offset-5 {
    margin-left: 41.66667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.33333%; }
  .col-md-offset-8 {
    margin-left: 66.66667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.33333%; }
  .col-md-offset-11 {
    margin-left: 91.66667%; }
  .col-md-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left; }
  .col-lg-1 {
    width: 8.33333%; }
  .col-lg-2 {
    width: 16.66667%; }
  .col-lg-3 {
    width: 25%; }
  .col-lg-4 {
    width: 33.33333%; }
  .col-lg-5 {
    width: 41.66667%; }
  .col-lg-6 {
    width: 50%; }
  .col-lg-7 {
    width: 58.33333%; }
  .col-lg-8 {
    width: 66.66667%; }
  .col-lg-9 {
    width: 75%; }
  .col-lg-10 {
    width: 83.33333%; }
  .col-lg-11 {
    width: 91.66667%; }
  .col-lg-12 {
    width: 100%; }
  .col-lg-pull-0 {
    right: 0%; }
  .col-lg-pull-1 {
    right: 8.33333%; }
  .col-lg-pull-2 {
    right: 16.66667%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-4 {
    right: 33.33333%; }
  .col-lg-pull-5 {
    right: 41.66667%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-7 {
    right: 58.33333%; }
  .col-lg-pull-8 {
    right: 66.66667%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-10 {
    right: 83.33333%; }
  .col-lg-pull-11 {
    right: 91.66667%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-push-0 {
    left: 0%; }
  .col-lg-push-1 {
    left: 8.33333%; }
  .col-lg-push-2 {
    left: 16.66667%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-4 {
    left: 33.33333%; }
  .col-lg-push-5 {
    left: 41.66667%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-7 {
    left: 58.33333%; }
  .col-lg-push-8 {
    left: 66.66667%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-10 {
    left: 83.33333%; }
  .col-lg-push-11 {
    left: 91.66667%; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-offset-0 {
    margin-left: 0%; }
  .col-lg-offset-1 {
    margin-left: 8.33333%; }
  .col-lg-offset-2 {
    margin-left: 16.66667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.33333%; }
  .col-lg-offset-5 {
    margin-left: 41.66667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.33333%; }
  .col-lg-offset-8 {
    margin-left: 66.66667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.33333%; }
  .col-lg-offset-11 {
    margin-left: 91.66667%; }
  .col-lg-offset-12 {
    margin-left: 100%; } }

@media screen and (min-width: 0) and (max-width: 539px) {
  .page-wrapper {
    overflow-x: hidden; }
  .full-bleed--xs {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

/*
Typography

This section outlines all the different type styles that can be used

Styleguide 3.0
*/
/*
Headings

These are our headings and paragraph styles

markup:
<h1 class="h1">Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa ipsum, tincidunt vel convallis in, suscipit et risus. Morbi erat dolor, mattis at dignissim sed, feugiat sed lorem.</p>
<h2 class="h2">Heading 2</h2>
<p>Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.</p>
<h3 class="h3">Heading 3</h3>
<p>Ut leo ipsum, tincidunt vel mauris eget, convallis egestas justo. Nunc ligula neque, porta ac lorem id, ultrices dapibus dolor.</p>
<h4 class="h4">Heading 4</h4>
<p>Phasellus interdum massa ante, ac placerat felis ultricies at. Fusce vulputate, odio sed convallis laoreet, tortor orci venenatis massa, a placerat ligula nisl vitae felis. In pellentesque ornare eleifend. Suspendisse potenti. Quisque eget mauris enim.</p>
<h5 class="h5">Heading 5</h5>
<p>Mauris feugiat suscipit turpis, ut rhoncus lectus finibus sed. Etiam suscipit consectetur eros vitae venenatis.</p>

Styleguide 3.1
*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
  font-weight: 600;
  font-style: normal;
  line-height: 1.2;
  color: #2c2c2c;
  margin: 0; }

h1, .h1 {
  font-size: 64px;
  font-size: 6.4rem;
  line-height: 72px;
  margin: 24px 0 32px; }

h2, .h2 {
  font-size: 56px;
  font-size: 5.6rem;
  line-height: 64px;
  margin: 28px 0 36px; }

h3, .h3 {
  font-size: 40px;
  font-size: 4rem;
  line-height: 48px;
  margin: 8px 0 16px; }

h4, .h4 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  margin: 16px 0 18px; }

h5, .h5 {
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 32px;
  margin: 8px 0 16px; }

/*
Paragraphs

Use paragraphs for any sentence that isn't a header, standard paragraphs can be augmented, singularly or in a combination, with the modifier classes...

default - standard paragraph text
.meta-text - smaller variant for meta copy
.lead-text - larger text for lead paragraphs etc
.pull-text - a large text variant for pullout text
.dim-text - a slightly opaque style of text for subtle use
.centered-text - a centered text block

markup:
<p class="{$modifiers}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa ipsum, tincidunt vel convallis in, suscipit et risus. Morbi erat dolor, mattis at dignissim sed, feugiat sed lorem.</p>

Styleguide 3.2
*/
p {
  line-height: 1.5;
  margin: 0 0 18px; }

.meta-text {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 20px; }

.lead-text {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 48px; }

.pull-text {
  font-size: 32px;
  font-size: 3.2rem;
  font-style: italic;
  line-height: 48px; }

.dim-text {
  opacity: 0.6; }

.centered-text {
  text-align: center; }

/*
Text Styles

Text styles to be applied to paragraphs and list items.

markup:
<p><strong>To make text bold</strong>, use a &lt;strong&gt; tag.</p>
<p><em>To make text italic</em>, use a &lt;em&gt; tag.</p>
<p><strike>To strike out text</strike>, use a &lt;strike&gt; tag.</p>

Styleguide 3.3
*/
/*
Lists

Text styles to lists and list items.

markup:
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ol>

Styleguide 3.4
*/
ul {
  margin-bottom: 5px; }

ol {
  margin-bottom: 5px; }

li {
  margin-bottom: 0; }

/*
Links

Styles for links and linked items.

a - standard link
a:hover - standard link (hovered)

markup:
<p>
  <a class="{$modifiers}" href="https://example.org">A link</a>
</p>

Styleguide 3.5
*/
a {
  color: #0073c6; }
  a:hover {
    color: #e28c05;
    text-decoration: underline; }
  a:focus {
    outline: none;
    box-shadow: 0 0 0 3px #df0f9c; }

.grid-text {
  margin-bottom: 36px; }
  @media screen and (min-width: 992px) {
    .grid-text {
      max-width: 100%;
      font-size: 1.8rem; } }

.img-left {
  float: left;
  margin: 0 20px 20px 0; }

.img-right {
  float: right;
  margin: 0 0 20px 20px; }

.img-centered {
  margin-left: auto;
  margin-right: auto; }

/*
Custom List Styles

Applying these classes to list items will replace their defualt bullets with custom icons.

.list-icon-tick - Tick icon
.list-icon-cross - Cross icon
.list-icon-hourglass - Hourglass icon
.list-icon-plus - Plus icon
.list-icon-minus - Minus icon
.list-icon-bullet - Bullet icon
.list-icon-number - Number icon
.list-icon-calendar - Calendar icon
.list-icon-spanner - Spanner icon

markup:
<ul>
  <li><span class="{$modifiers}">List Item</span></li>
  <li><span class="{$modifiers}">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eos nulla quasi ut, dolorem praesentium beatae voluptatum sequi quibusdam eveniet fugit assumenda iure et temporibus architecto eum placeat quis fugiat.</span></li>
  <p><span class="{$modifiers}">List Item</span></p>
  <p><span class="{$modifiers}">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eos nulla quasi ut, dolorem praesentium beatae voluptatum sequi quibusdam eveniet fugit assumenda iure et temporibus architecto eum placeat quis fugiat.</span></p>
</ul>

Styleguide 3.4.1
*/
.list-icon,
.list-icon-tick,
.list-icon-cross,
.list-icon-hourglass,
.list-icon-minus,
.list-icon-plus,
.list-icon-bullet,
.list-icon-number,
.list-icon-calendar,
.list-icon-spanner {
  position: relative;
  list-style-type: none; }
  .list-icon:before,
  .list-icon-tick:before,
  .list-icon-cross:before,
  .list-icon-hourglass:before,
  .list-icon-minus:before,
  .list-icon-plus:before,
  .list-icon-bullet:before,
  .list-icon-number:before,
  .list-icon-calendar:before,
  .list-icon-spanner:before {
    content: '';
    display: block;
    position: absolute;
    top: 0.5em;
    left: -20px;
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    background-color: #fff; }

.list-icon-tick:before {
  width: 16.875px;
  height: 13.5px;
  background-position: -4814.25px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg");
  left: -22px; }
  .no-svg .list-icon-tick:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-cross:before {
  width: 13.5px;
  height: 13.5px;
  background-position: -4564.32147px -16.04278px;
  background-size: 7825.19466px 112.29947px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .list-icon-cross:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-hourglass:before {
  width: 9.7px;
  height: 18px;
  background-position: -6137px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg");
  left: -19px; }
  .no-svg .list-icon-hourglass:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-minus:before {
  width: 13.5px;
  height: 4.5px;
  background-position: -4640.25px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg");
  left: -25px;
  top: 0.53em; }
  .no-svg .list-icon-minus:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-plus:before {
  width: 13.5px;
  height: 13.5px;
  background-position: -4727.25px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .list-icon-plus:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-bullet:before {
  width: 6px;
  height: 6px;
  background-position: -5977px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg");
  top: 9px;
  left: -16px; }
  .no-svg .list-icon-bullet:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-number:before {
  width: 18px;
  height: 18px;
  background-position: -6245px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg");
  left: -25px; }
  .no-svg .list-icon-number:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-calendar:before {
  width: 15.84px;
  height: 18px;
  background-position: -6023px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg");
  left: -25px; }
  .no-svg .list-icon-calendar:before {
    background-image: url("/images/sprites/sprite.png"); }

.list-icon-spanner:before {
  width: 18px;
  height: 18px;
  background-position: -6361px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg");
  left: -25px; }
  .no-svg .list-icon-spanner:before {
    background-image: url("/images/sprites/sprite.png"); }

/*------------------------------------*    $BUTTONS
\*------------------------------------*/
/*
Buttons & Links

The buttons and links in this section should adequately cover all situations.
Try to use only these items in your layouts.

Styleguide 4.0
*/
/*
Buttons

Common buttons that can be used in lots of places, standard CTA etc.

Styleguide 4.1
*/
/*
Standard button

The primary button type: an outlined button

markup:
<a href="#" class="{$modifiers}">Download</a>

.btn - Default button
.btn.btn--large - Larger button
.btn.btn--blue - Primary button
.btn.btn--red - Red button
.btn.btn--pink - Pink button
.btn.btn--orange - Orange button
.btn.btn--green - Green button
.btn.btn--purple - Purple button
.btn.btn--yellow - Purple button
.btn:disabled - Disabled button

Styleguide 4.1.1
*/
.btn {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  color: #2c2c2c;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background-color: transparent;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 9px 30px;
  margin: 0;
  transition: box-shadow 25ms linear, background-color 100ms linear, color 25ms linear; }
  .btn:hover {
    text-decoration: none;
    color: #fff;
    background-color: #00529b; }
  .btn.btn--blue, .asset-cards--blue .btn, .form-pod--blue .btn, .card--blue .btn {
    color: #00529b; }
    .btn.btn--blue:hover, .asset-cards--blue .btn:hover, .form-pod--blue .btn:hover, .card--blue .btn:hover, .card--blue:hover .btn {
      background-color: #00529b; }
    .btn.btn--blue:hover, .asset-cards--blue .btn:hover, .form-pod--blue .btn:hover, .card--blue .btn:hover, .card--blue:hover .btn, .btn.btn--blue:active, .asset-cards--blue .btn:active, .form-pod--blue .btn:active, .card--blue .btn:active {
      color: #fff; }
  .btn.btn--red, .asset-cards--red .btn, .form-pod--red .btn, .card--red .btn {
    color: #d81e05; }
    .btn.btn--red:hover, .asset-cards--red .btn:hover, .form-pod--red .btn:hover, .card--red .btn:hover, .card--red:hover .btn {
      background-color: #d81e05; }
    .btn.btn--red:hover, .asset-cards--red .btn:hover, .form-pod--red .btn:hover, .card--red .btn:hover, .card--red:hover .btn, .btn.btn--red:active, .asset-cards--red .btn:active, .form-pod--red .btn:active, .card--red .btn:active {
      color: #fff; }
  .btn.btn--pink, .asset-cards--pink .btn, .form-pod--pink .btn, .card--pink .btn {
    color: #da3b8f; }
    .btn.btn--pink:hover, .asset-cards--pink .btn:hover, .form-pod--pink .btn:hover, .card--pink .btn:hover, .card--pink:hover .btn {
      background-color: #da3b8f; }
    .btn.btn--pink:hover, .asset-cards--pink .btn:hover, .form-pod--pink .btn:hover, .card--pink .btn:hover, .card--pink:hover .btn, .btn.btn--pink:active, .asset-cards--pink .btn:active, .form-pod--pink .btn:active, .card--pink .btn:active {
      color: #fff; }
  .btn.btn--orange, .asset-cards--orange .btn, .form-pod--orange .btn, .card--orange .btn {
    color: #e28c05; }
    .btn.btn--orange:hover, .asset-cards--orange .btn:hover, .form-pod--orange .btn:hover, .card--orange .btn:hover, .card--orange:hover .btn {
      background-color: #e28c05; }
    .btn.btn--orange:hover, .asset-cards--orange .btn:hover, .form-pod--orange .btn:hover, .card--orange .btn:hover, .card--orange:hover .btn, .btn.btn--orange:active, .asset-cards--orange .btn:active, .form-pod--orange .btn:active, .card--orange .btn:active {
      color: #fff; }
  .btn.btn--green, .asset-cards--green .btn, .form-pod--green .btn, .card--green .btn {
    color: #178a11; }
    .btn.btn--green:hover, .asset-cards--green .btn:hover, .form-pod--green .btn:hover, .card--green .btn:hover, .card--green:hover .btn {
      background-color: #178a11; }
    .btn.btn--green:hover, .asset-cards--green .btn:hover, .form-pod--green .btn:hover, .card--green .btn:hover, .card--green:hover .btn, .btn.btn--green:active, .asset-cards--green .btn:active, .form-pod--green .btn:active, .card--green .btn:active {
      color: #fff; }
  .btn.btn--purple, .asset-cards--purple .btn, .form-pod--purple .btn, .card--purple .btn {
    color: #56008c; }
    .btn.btn--purple:hover, .asset-cards--purple .btn:hover, .form-pod--purple .btn:hover, .card--purple .btn:hover, .card--purple:hover .btn {
      background-color: #56008c; }
    .btn.btn--purple:hover, .asset-cards--purple .btn:hover, .form-pod--purple .btn:hover, .card--purple .btn:hover, .card--purple:hover .btn, .btn.btn--purple:active, .asset-cards--purple .btn:active, .form-pod--purple .btn:active, .card--purple .btn:active {
      color: #fff; }
  .btn.btn--yellow {
    color: #fff219;
    border-color: #fff219; }
    .btn.btn--yellow:hover {
      background-color: #fff219;
      color: #353940; }
  .btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none; }
  .btn:active {
    color: #fff;
    background-color: #56008c !important;
    border-color: #56008c !important; }
  .btn:focus:active {
    box-shadow: none; }

.btn--block {
  display: block;
  width: 100%; }

.btn--large {
  padding: 15px 30px; }

/*
Solid button

Buttons with a solid variation

markup:
<a href="#" class="{$modifiers}">Download</a>

.btn.btn--solid - Default button
.btn.btn--solid.btn--blue - Primary solid button
.btn.btn--solid.btn--red - Red solid button
.btn.btn--solid.btn--pink - Pink solid button
.btn.btn--solid.btn--orange - Orange solid button
.btn.btn--solid.btn--green - Green solid button
.btn.btn--solid.btn--purple - Purple solid button
.btn.btn--solid:disabled - Disabled button

sg-wrapper:
<div class="sg-grey-bg">
  <sg-wrapper-content/>
</div>

Styleguide 4.1.2
*/
.btn--solid {
  color: #fff;
  background-color: #2c2c2c; }
  .btn--solid:hover {
    color: #fff;
    background-color: #00529b; }
  .btn--solid:active {
    background-color: #56008c; }
  .btn--solid.btn--blue, .asset-cards--blue .btn--solid.btn, .form-pod--blue .btn--solid.btn, .card--blue .btn--solid.btn {
    color: #fff;
    background-color: #00529b; }
    .btn--solid.btn--blue:hover, .asset-cards--blue .btn--solid.btn:hover, .form-pod--blue .btn--solid.btn:hover, .card--blue .btn--solid.btn:hover, .card--blue:hover .btn--solid.btn {
      background-color: #002947; }
    .btn--solid.btn--blue:active, .asset-cards--blue .btn--solid.btn:active, .form-pod--blue .btn--solid.btn:active, .card--blue .btn--solid.btn:active {
      background-color: #56008c; }
  .btn--solid.btn--red, .asset-cards--red .btn--solid.btn, .form-pod--red .btn--solid.btn, .card--red .btn--solid.btn {
    color: #fff;
    background-color: #d81e05; }
    .btn--solid.btn--red:hover, .asset-cards--red .btn--solid.btn:hover, .form-pod--red .btn--solid.btn:hover, .card--red .btn--solid.btn:hover, .card--red:hover .btn--solid.btn {
      background-color: #a61704; }
    .btn--solid.btn--red:active, .asset-cards--red .btn--solid.btn:active, .form-pod--red .btn--solid.btn:active, .card--red .btn--solid.btn:active {
      background-color: #56008c; }
  .btn--solid.btn--pink, .asset-cards--pink .btn--solid.btn, .form-pod--pink .btn--solid.btn, .card--pink .btn--solid.btn {
    color: #fff;
    background-color: #da3b8f; }
    .btn--solid.btn--pink:hover, .asset-cards--pink .btn--solid.btn:hover, .form-pod--pink .btn--solid.btn:hover, .card--pink .btn--solid.btn:hover, .card--pink:hover .btn--solid.btn {
      background-color: #be2475; }
    .btn--solid.btn--pink:active, .asset-cards--pink .btn--solid.btn:active, .form-pod--pink .btn--solid.btn:active, .card--pink .btn--solid.btn:active {
      background-color: #56008c; }
  .btn--solid.btn--orange, .asset-cards--orange .btn--solid.btn, .form-pod--orange .btn--solid.btn, .card--orange .btn--solid.btn {
    color: #fff;
    background-color: #e28c05; }
    .btn--solid.btn--orange:hover, .asset-cards--orange .btn--solid.btn:hover, .form-pod--orange .btn--solid.btn:hover, .card--orange .btn--solid.btn:hover, .card--orange:hover .btn--solid.btn {
      background-color: #b06d04; }
    .btn--solid.btn--orange:active, .asset-cards--orange .btn--solid.btn:active, .form-pod--orange .btn--solid.btn:active, .card--orange .btn--solid.btn:active {
      background-color: #56008c; }
  .btn--solid.btn--green, .asset-cards--green .btn--solid.btn, .form-pod--green .btn--solid.btn, .card--green .btn--solid.btn {
    color: #fff;
    background-color: #178a11; }
    .btn--solid.btn--green:hover, .asset-cards--green .btn--solid.btn:hover, .form-pod--green .btn--solid.btn:hover, .card--green .btn--solid.btn:hover, .card--green:hover .btn--solid.btn {
      background-color: #0f5d0b; }
    .btn--solid.btn--green:active, .asset-cards--green .btn--solid.btn:active, .form-pod--green .btn--solid.btn:active, .card--green .btn--solid.btn:active {
      background-color: #56008c; }
  .btn--solid.btn--purple, .asset-cards--purple .btn--solid.btn, .form-pod--purple .btn--solid.btn, .card--purple .btn--solid.btn {
    color: #fff;
    background-color: #56008c; }
    .btn--solid.btn--purple:hover, .asset-cards--purple .btn--solid.btn:hover, .form-pod--purple .btn--solid.btn:hover, .card--purple .btn--solid.btn:hover, .card--purple:hover .btn--solid.btn {
      background-color: #370059; }
    .btn--solid.btn--purple:active, .asset-cards--purple .btn--solid.btn:active, .form-pod--purple .btn--solid.btn:active, .card--purple .btn--solid.btn:active {
      background-color: #56008c; }

/*
Inverted button on dark

An example of an inverted button on a dark background

.btn.btn--on-dark - Primary button on dark
.btn.btn--on-dark:disabled - Disabled button

markup:
<a href="#" class="{$modifiers}">Download</a>

sg-wrapper:
<div class="sg-black-bg">
  <sg-wrapper-content/>
</div>

Styleguide 4.1.3
*/
.btn--on-dark {
  color: #fff;
  border-color: #fff; }
  .btn--on-dark:hover {
    color: #2c2c2c;
    background-color: #fff;
    border-color: #fff; }
  .btn--on-dark:active {
    color: #fff;
    background-color: #56008c;
    border-color: #56008c; }
  .btn--on-dark:disabled {
    opacity: 0.4; }

/*
Download Buttons

Buttons that link to downloadable files.

Styleguide 4.1.4
*/
/*
Download Button (DOC)

Buttons that link to a downloadable Word document.

.btn.btn--download.btn--download-doc - Download button (DOC)
.btn.btn--blue.btn--download.btn--download-doc - Download button (DOC, Primary)
.btn.btn--red.btn--download.btn--download-doc - Download button (DOC, Red)
.btn.btn--pink.btn--download.btn--download-doc - Download button (DOC, Pink)
.btn.btn--orange.btn--download.btn--download-doc - Download button (DOC, Orange)
.btn.btn--green.btn--download.btn--download-doc - Download button (DOC, Green)
.btn.btn--purple.btn--download.btn--download-doc - Download button (DOC, Purple)

markup:
<a href="#" class="{$modifiers}">Download Document</a>

Styleguide 4.1.4.1
*/
.btn--download:before {
  content: "";
  margin: 3px auto;
  display: block; }

.btn--download-doc:before {
  width: 22.98px;
  height: 24px;
  background-position: -2615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-doc:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--download-doc:hover:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-doc:hover:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-doc:before, .asset-cards--blue .btn--download-doc.btn:before, .form-pod--blue .btn--download-doc.btn:before, .card--blue .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -2678px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-doc:before, .no-svg .asset-cards--blue .btn--download-doc.btn:before, .asset-cards--blue .no-svg .btn--download-doc.btn:before, .no-svg .form-pod--blue .btn--download-doc.btn:before, .form-pod--blue .no-svg .btn--download-doc.btn:before, .no-svg .card--blue .btn--download-doc.btn:before, .card--blue .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-doc:hover:before, .asset-cards--blue .btn--download-doc.btn:hover:before, .form-pod--blue .btn--download-doc.btn:hover:before, .card--blue .btn--download-doc.btn:hover:before, .card--blue:hover .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-doc:hover:before, .no-svg .asset-cards--blue .btn--download-doc.btn:hover:before, .asset-cards--blue .no-svg .btn--download-doc.btn:hover:before, .no-svg .form-pod--blue .btn--download-doc.btn:hover:before, .form-pod--blue .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--blue .btn--download-doc.btn:hover:before, .card--blue .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--blue:hover .btn--download-doc.btn:before, .card--blue:hover .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-doc:before, .asset-cards--red .btn--download-doc.btn:before, .form-pod--red .btn--download-doc.btn:before, .card--red .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -2993px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-doc:before, .no-svg .asset-cards--red .btn--download-doc.btn:before, .asset-cards--red .no-svg .btn--download-doc.btn:before, .no-svg .form-pod--red .btn--download-doc.btn:before, .form-pod--red .no-svg .btn--download-doc.btn:before, .no-svg .card--red .btn--download-doc.btn:before, .card--red .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-doc:hover:before, .asset-cards--red .btn--download-doc.btn:hover:before, .form-pod--red .btn--download-doc.btn:hover:before, .card--red .btn--download-doc.btn:hover:before, .card--red:hover .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-doc:hover:before, .no-svg .asset-cards--red .btn--download-doc.btn:hover:before, .asset-cards--red .no-svg .btn--download-doc.btn:hover:before, .no-svg .form-pod--red .btn--download-doc.btn:hover:before, .form-pod--red .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--red .btn--download-doc.btn:hover:before, .card--red .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--red:hover .btn--download-doc.btn:before, .card--red:hover .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-doc:before, .asset-cards--pink .btn--download-doc.btn:before, .form-pod--pink .btn--download-doc.btn:before, .card--pink .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -2867px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-doc:before, .no-svg .asset-cards--pink .btn--download-doc.btn:before, .asset-cards--pink .no-svg .btn--download-doc.btn:before, .no-svg .form-pod--pink .btn--download-doc.btn:before, .form-pod--pink .no-svg .btn--download-doc.btn:before, .no-svg .card--pink .btn--download-doc.btn:before, .card--pink .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-doc:hover:before, .asset-cards--pink .btn--download-doc.btn:hover:before, .form-pod--pink .btn--download-doc.btn:hover:before, .card--pink .btn--download-doc.btn:hover:before, .card--pink:hover .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-doc:hover:before, .no-svg .asset-cards--pink .btn--download-doc.btn:hover:before, .asset-cards--pink .no-svg .btn--download-doc.btn:hover:before, .no-svg .form-pod--pink .btn--download-doc.btn:hover:before, .form-pod--pink .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--pink .btn--download-doc.btn:hover:before, .card--pink .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--pink:hover .btn--download-doc.btn:before, .card--pink:hover .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-doc:before, .asset-cards--orange .btn--download-doc.btn:before, .form-pod--orange .btn--download-doc.btn:before, .card--orange .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -2804px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-doc:before, .no-svg .asset-cards--orange .btn--download-doc.btn:before, .asset-cards--orange .no-svg .btn--download-doc.btn:before, .no-svg .form-pod--orange .btn--download-doc.btn:before, .form-pod--orange .no-svg .btn--download-doc.btn:before, .no-svg .card--orange .btn--download-doc.btn:before, .card--orange .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-doc:hover:before, .asset-cards--orange .btn--download-doc.btn:hover:before, .form-pod--orange .btn--download-doc.btn:hover:before, .card--orange .btn--download-doc.btn:hover:before, .card--orange:hover .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-doc:hover:before, .no-svg .asset-cards--orange .btn--download-doc.btn:hover:before, .asset-cards--orange .no-svg .btn--download-doc.btn:hover:before, .no-svg .form-pod--orange .btn--download-doc.btn:hover:before, .form-pod--orange .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--orange .btn--download-doc.btn:hover:before, .card--orange .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--orange:hover .btn--download-doc.btn:before, .card--orange:hover .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-doc:before, .asset-cards--green .btn--download-doc.btn:before, .form-pod--green .btn--download-doc.btn:before, .card--green .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -2741px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-doc:before, .no-svg .asset-cards--green .btn--download-doc.btn:before, .asset-cards--green .no-svg .btn--download-doc.btn:before, .no-svg .form-pod--green .btn--download-doc.btn:before, .form-pod--green .no-svg .btn--download-doc.btn:before, .no-svg .card--green .btn--download-doc.btn:before, .card--green .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-doc:hover:before, .asset-cards--green .btn--download-doc.btn:hover:before, .form-pod--green .btn--download-doc.btn:hover:before, .card--green .btn--download-doc.btn:hover:before, .card--green:hover .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-doc:hover:before, .no-svg .asset-cards--green .btn--download-doc.btn:hover:before, .asset-cards--green .no-svg .btn--download-doc.btn:hover:before, .no-svg .form-pod--green .btn--download-doc.btn:hover:before, .form-pod--green .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--green .btn--download-doc.btn:hover:before, .card--green .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--green:hover .btn--download-doc.btn:before, .card--green:hover .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-doc:before, .asset-cards--purple .btn--download-doc.btn:before, .form-pod--purple .btn--download-doc.btn:before, .card--purple .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -2930px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-doc:before, .no-svg .asset-cards--purple .btn--download-doc.btn:before, .asset-cards--purple .no-svg .btn--download-doc.btn:before, .no-svg .form-pod--purple .btn--download-doc.btn:before, .form-pod--purple .no-svg .btn--download-doc.btn:before, .no-svg .card--purple .btn--download-doc.btn:before, .card--purple .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-doc:hover:before, .asset-cards--purple .btn--download-doc.btn:hover:before, .form-pod--purple .btn--download-doc.btn:hover:before, .card--purple .btn--download-doc.btn:hover:before, .card--purple:hover .btn--download-doc.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3056px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-doc:hover:before, .no-svg .asset-cards--purple .btn--download-doc.btn:hover:before, .asset-cards--purple .no-svg .btn--download-doc.btn:hover:before, .no-svg .form-pod--purple .btn--download-doc.btn:hover:before, .form-pod--purple .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--purple .btn--download-doc.btn:hover:before, .card--purple .no-svg .btn--download-doc.btn:hover:before, .no-svg .card--purple:hover .btn--download-doc.btn:before, .card--purple:hover .no-svg .btn--download-doc.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

/*
Download Button (XLS)

Buttons that link to a downloadable Excel spreadsheet.

.btn.btn--download.btn--download-xls - Download button (XLS)
.btn.btn--blue.btn--download.btn--download-xls - Download button (XLS, Primary)
.btn.btn--red.btn--download.btn--download-xls - Download button (XLS, Red)
.btn.btn--pink.btn--download.btn--download-xls - Download button (XLS, Pink)
.btn.btn--orange.btn--download.btn--download-xls - Download button (XLS, Orange)
.btn.btn--green.btn--download.btn--download-xls - Download button (XLS, Green)
.btn.btn--purple.btn--download.btn--download-xls - Download button (XLS, Purple)

markup:
<a href="#" class="{$modifiers}">Download Spreadsheet</a>

Styleguide 4.1.4.2
*/
.btn--download-xls:before {
  width: 22.98px;
  height: 24px;
  background-position: -4961px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-xls:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--download-xls:hover:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-xls:hover:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-xls:before, .asset-cards--blue .btn--download-xls.btn:before, .form-pod--blue .btn--download-xls.btn:before, .card--blue .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5024px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-xls:before, .no-svg .asset-cards--blue .btn--download-xls.btn:before, .asset-cards--blue .no-svg .btn--download-xls.btn:before, .no-svg .form-pod--blue .btn--download-xls.btn:before, .form-pod--blue .no-svg .btn--download-xls.btn:before, .no-svg .card--blue .btn--download-xls.btn:before, .card--blue .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-xls:hover:before, .asset-cards--blue .btn--download-xls.btn:hover:before, .form-pod--blue .btn--download-xls.btn:hover:before, .card--blue .btn--download-xls.btn:hover:before, .card--blue:hover .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-xls:hover:before, .no-svg .asset-cards--blue .btn--download-xls.btn:hover:before, .asset-cards--blue .no-svg .btn--download-xls.btn:hover:before, .no-svg .form-pod--blue .btn--download-xls.btn:hover:before, .form-pod--blue .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--blue .btn--download-xls.btn:hover:before, .card--blue .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--blue:hover .btn--download-xls.btn:before, .card--blue:hover .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-xls:before, .asset-cards--red .btn--download-xls.btn:before, .form-pod--red .btn--download-xls.btn:before, .card--red .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5339px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-xls:before, .no-svg .asset-cards--red .btn--download-xls.btn:before, .asset-cards--red .no-svg .btn--download-xls.btn:before, .no-svg .form-pod--red .btn--download-xls.btn:before, .form-pod--red .no-svg .btn--download-xls.btn:before, .no-svg .card--red .btn--download-xls.btn:before, .card--red .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-xls:hover:before, .asset-cards--red .btn--download-xls.btn:hover:before, .form-pod--red .btn--download-xls.btn:hover:before, .card--red .btn--download-xls.btn:hover:before, .card--red:hover .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-xls:hover:before, .no-svg .asset-cards--red .btn--download-xls.btn:hover:before, .asset-cards--red .no-svg .btn--download-xls.btn:hover:before, .no-svg .form-pod--red .btn--download-xls.btn:hover:before, .form-pod--red .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--red .btn--download-xls.btn:hover:before, .card--red .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--red:hover .btn--download-xls.btn:before, .card--red:hover .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-xls:before, .asset-cards--pink .btn--download-xls.btn:before, .form-pod--pink .btn--download-xls.btn:before, .card--pink .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5213px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-xls:before, .no-svg .asset-cards--pink .btn--download-xls.btn:before, .asset-cards--pink .no-svg .btn--download-xls.btn:before, .no-svg .form-pod--pink .btn--download-xls.btn:before, .form-pod--pink .no-svg .btn--download-xls.btn:before, .no-svg .card--pink .btn--download-xls.btn:before, .card--pink .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-xls:hover:before, .asset-cards--pink .btn--download-xls.btn:hover:before, .form-pod--pink .btn--download-xls.btn:hover:before, .card--pink .btn--download-xls.btn:hover:before, .card--pink:hover .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-xls:hover:before, .no-svg .asset-cards--pink .btn--download-xls.btn:hover:before, .asset-cards--pink .no-svg .btn--download-xls.btn:hover:before, .no-svg .form-pod--pink .btn--download-xls.btn:hover:before, .form-pod--pink .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--pink .btn--download-xls.btn:hover:before, .card--pink .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--pink:hover .btn--download-xls.btn:before, .card--pink:hover .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-xls:before, .asset-cards--orange .btn--download-xls.btn:before, .form-pod--orange .btn--download-xls.btn:before, .card--orange .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5150px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-xls:before, .no-svg .asset-cards--orange .btn--download-xls.btn:before, .asset-cards--orange .no-svg .btn--download-xls.btn:before, .no-svg .form-pod--orange .btn--download-xls.btn:before, .form-pod--orange .no-svg .btn--download-xls.btn:before, .no-svg .card--orange .btn--download-xls.btn:before, .card--orange .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-xls:hover:before, .asset-cards--orange .btn--download-xls.btn:hover:before, .form-pod--orange .btn--download-xls.btn:hover:before, .card--orange .btn--download-xls.btn:hover:before, .card--orange:hover .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-xls:hover:before, .no-svg .asset-cards--orange .btn--download-xls.btn:hover:before, .asset-cards--orange .no-svg .btn--download-xls.btn:hover:before, .no-svg .form-pod--orange .btn--download-xls.btn:hover:before, .form-pod--orange .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--orange .btn--download-xls.btn:hover:before, .card--orange .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--orange:hover .btn--download-xls.btn:before, .card--orange:hover .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-xls:before, .asset-cards--green .btn--download-xls.btn:before, .form-pod--green .btn--download-xls.btn:before, .card--green .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5087px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-xls:before, .no-svg .asset-cards--green .btn--download-xls.btn:before, .asset-cards--green .no-svg .btn--download-xls.btn:before, .no-svg .form-pod--green .btn--download-xls.btn:before, .form-pod--green .no-svg .btn--download-xls.btn:before, .no-svg .card--green .btn--download-xls.btn:before, .card--green .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-xls:hover:before, .asset-cards--green .btn--download-xls.btn:hover:before, .form-pod--green .btn--download-xls.btn:hover:before, .card--green .btn--download-xls.btn:hover:before, .card--green:hover .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-xls:hover:before, .no-svg .asset-cards--green .btn--download-xls.btn:hover:before, .asset-cards--green .no-svg .btn--download-xls.btn:hover:before, .no-svg .form-pod--green .btn--download-xls.btn:hover:before, .form-pod--green .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--green .btn--download-xls.btn:hover:before, .card--green .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--green:hover .btn--download-xls.btn:before, .card--green:hover .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-xls:before, .asset-cards--purple .btn--download-xls.btn:before, .form-pod--purple .btn--download-xls.btn:before, .card--purple .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5276px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-xls:before, .no-svg .asset-cards--purple .btn--download-xls.btn:before, .asset-cards--purple .no-svg .btn--download-xls.btn:before, .no-svg .form-pod--purple .btn--download-xls.btn:before, .form-pod--purple .no-svg .btn--download-xls.btn:before, .no-svg .card--purple .btn--download-xls.btn:before, .card--purple .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-xls:hover:before, .asset-cards--purple .btn--download-xls.btn:hover:before, .form-pod--purple .btn--download-xls.btn:hover:before, .card--purple .btn--download-xls.btn:hover:before, .card--purple:hover .btn--download-xls.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -5402px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-xls:hover:before, .no-svg .asset-cards--purple .btn--download-xls.btn:hover:before, .asset-cards--purple .no-svg .btn--download-xls.btn:hover:before, .no-svg .form-pod--purple .btn--download-xls.btn:hover:before, .form-pod--purple .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--purple .btn--download-xls.btn:hover:before, .card--purple .no-svg .btn--download-xls.btn:hover:before, .no-svg .card--purple:hover .btn--download-xls.btn:before, .card--purple:hover .no-svg .btn--download-xls.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

/*
Download Button (PDF)

Buttons that link to a downloadable PDF document.

.btn.btn--download.btn--download-pdf - Download button (PDF)
.btn.btn--blue.btn--download.btn--download-pdf - Download button (PDF, Primary)
.btn.btn--red.btn--download.btn--download-pdf - Download button (PDF, Red)
.btn.btn--pink.btn--download.btn--download-pdf - Download button (PDF, Pink)
.btn.btn--orange.btn--download.btn--download-pdf - Download button (PDF, Orange)
.btn.btn--green.btn--download.btn--download-pdf - Download button (PDF, Green)
.btn.btn--purple.btn--download.btn--download-pdf - Download button (PDF, Purple)

markup:
<a href="#" class="{$modifiers}">Download Document</a>

Styleguide 4.1.4.3
*/
.btn--download-pdf:before {
  width: 22.98px;
  height: 24px;
  background-position: -3733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-pdf:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--download-pdf:hover:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-pdf:hover:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-pdf:before, .asset-cards--blue .btn--download-pdf.btn:before, .form-pod--blue .btn--download-pdf.btn:before, .card--blue .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3796px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-pdf:before, .no-svg .asset-cards--blue .btn--download-pdf.btn:before, .asset-cards--blue .no-svg .btn--download-pdf.btn:before, .no-svg .form-pod--blue .btn--download-pdf.btn:before, .form-pod--blue .no-svg .btn--download-pdf.btn:before, .no-svg .card--blue .btn--download-pdf.btn:before, .card--blue .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-pdf:hover:before, .asset-cards--blue .btn--download-pdf.btn:hover:before, .form-pod--blue .btn--download-pdf.btn:hover:before, .card--blue .btn--download-pdf.btn:hover:before, .card--blue:hover .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-pdf:hover:before, .no-svg .asset-cards--blue .btn--download-pdf.btn:hover:before, .asset-cards--blue .no-svg .btn--download-pdf.btn:hover:before, .no-svg .form-pod--blue .btn--download-pdf.btn:hover:before, .form-pod--blue .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--blue .btn--download-pdf.btn:hover:before, .card--blue .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--blue:hover .btn--download-pdf.btn:before, .card--blue:hover .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-pdf:before, .asset-cards--red .btn--download-pdf.btn:before, .form-pod--red .btn--download-pdf.btn:before, .card--red .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4111px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-pdf:before, .no-svg .asset-cards--red .btn--download-pdf.btn:before, .asset-cards--red .no-svg .btn--download-pdf.btn:before, .no-svg .form-pod--red .btn--download-pdf.btn:before, .form-pod--red .no-svg .btn--download-pdf.btn:before, .no-svg .card--red .btn--download-pdf.btn:before, .card--red .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-pdf:hover:before, .asset-cards--red .btn--download-pdf.btn:hover:before, .form-pod--red .btn--download-pdf.btn:hover:before, .card--red .btn--download-pdf.btn:hover:before, .card--red:hover .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-pdf:hover:before, .no-svg .asset-cards--red .btn--download-pdf.btn:hover:before, .asset-cards--red .no-svg .btn--download-pdf.btn:hover:before, .no-svg .form-pod--red .btn--download-pdf.btn:hover:before, .form-pod--red .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--red .btn--download-pdf.btn:hover:before, .card--red .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--red:hover .btn--download-pdf.btn:before, .card--red:hover .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-pdf:before, .asset-cards--pink .btn--download-pdf.btn:before, .form-pod--pink .btn--download-pdf.btn:before, .card--pink .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3985px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-pdf:before, .no-svg .asset-cards--pink .btn--download-pdf.btn:before, .asset-cards--pink .no-svg .btn--download-pdf.btn:before, .no-svg .form-pod--pink .btn--download-pdf.btn:before, .form-pod--pink .no-svg .btn--download-pdf.btn:before, .no-svg .card--pink .btn--download-pdf.btn:before, .card--pink .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-pdf:hover:before, .asset-cards--pink .btn--download-pdf.btn:hover:before, .form-pod--pink .btn--download-pdf.btn:hover:before, .card--pink .btn--download-pdf.btn:hover:before, .card--pink:hover .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-pdf:hover:before, .no-svg .asset-cards--pink .btn--download-pdf.btn:hover:before, .asset-cards--pink .no-svg .btn--download-pdf.btn:hover:before, .no-svg .form-pod--pink .btn--download-pdf.btn:hover:before, .form-pod--pink .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--pink .btn--download-pdf.btn:hover:before, .card--pink .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--pink:hover .btn--download-pdf.btn:before, .card--pink:hover .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-pdf:before, .asset-cards--orange .btn--download-pdf.btn:before, .form-pod--orange .btn--download-pdf.btn:before, .card--orange .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3922px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-pdf:before, .no-svg .asset-cards--orange .btn--download-pdf.btn:before, .asset-cards--orange .no-svg .btn--download-pdf.btn:before, .no-svg .form-pod--orange .btn--download-pdf.btn:before, .form-pod--orange .no-svg .btn--download-pdf.btn:before, .no-svg .card--orange .btn--download-pdf.btn:before, .card--orange .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-pdf:hover:before, .asset-cards--orange .btn--download-pdf.btn:hover:before, .form-pod--orange .btn--download-pdf.btn:hover:before, .card--orange .btn--download-pdf.btn:hover:before, .card--orange:hover .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-pdf:hover:before, .no-svg .asset-cards--orange .btn--download-pdf.btn:hover:before, .asset-cards--orange .no-svg .btn--download-pdf.btn:hover:before, .no-svg .form-pod--orange .btn--download-pdf.btn:hover:before, .form-pod--orange .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--orange .btn--download-pdf.btn:hover:before, .card--orange .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--orange:hover .btn--download-pdf.btn:before, .card--orange:hover .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-pdf:before, .asset-cards--green .btn--download-pdf.btn:before, .form-pod--green .btn--download-pdf.btn:before, .card--green .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3859px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-pdf:before, .no-svg .asset-cards--green .btn--download-pdf.btn:before, .asset-cards--green .no-svg .btn--download-pdf.btn:before, .no-svg .form-pod--green .btn--download-pdf.btn:before, .form-pod--green .no-svg .btn--download-pdf.btn:before, .no-svg .card--green .btn--download-pdf.btn:before, .card--green .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-pdf:hover:before, .asset-cards--green .btn--download-pdf.btn:hover:before, .form-pod--green .btn--download-pdf.btn:hover:before, .card--green .btn--download-pdf.btn:hover:before, .card--green:hover .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-pdf:hover:before, .no-svg .asset-cards--green .btn--download-pdf.btn:hover:before, .asset-cards--green .no-svg .btn--download-pdf.btn:hover:before, .no-svg .form-pod--green .btn--download-pdf.btn:hover:before, .form-pod--green .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--green .btn--download-pdf.btn:hover:before, .card--green .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--green:hover .btn--download-pdf.btn:before, .card--green:hover .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-pdf:before, .asset-cards--purple .btn--download-pdf.btn:before, .form-pod--purple .btn--download-pdf.btn:before, .card--purple .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4048px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-pdf:before, .no-svg .asset-cards--purple .btn--download-pdf.btn:before, .asset-cards--purple .no-svg .btn--download-pdf.btn:before, .no-svg .form-pod--purple .btn--download-pdf.btn:before, .form-pod--purple .no-svg .btn--download-pdf.btn:before, .no-svg .card--purple .btn--download-pdf.btn:before, .card--purple .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-pdf:hover:before, .asset-cards--purple .btn--download-pdf.btn:hover:before, .form-pod--purple .btn--download-pdf.btn:hover:before, .card--purple .btn--download-pdf.btn:hover:before, .card--purple:hover .btn--download-pdf.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-pdf:hover:before, .no-svg .asset-cards--purple .btn--download-pdf.btn:hover:before, .asset-cards--purple .no-svg .btn--download-pdf.btn:hover:before, .no-svg .form-pod--purple .btn--download-pdf.btn:hover:before, .form-pod--purple .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--purple .btn--download-pdf.btn:hover:before, .card--purple .no-svg .btn--download-pdf.btn:hover:before, .no-svg .card--purple:hover .btn--download-pdf.btn:before, .card--purple:hover .no-svg .btn--download-pdf.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

/*
Download Button (JPG)

Buttons that link to a downloadable JPG image.

.btn.btn--download.btn--download-jpg - Download button (JPG)
.btn.btn--blue.btn--download.btn--download-jpg - Download button (JPG, Primary)
.btn.btn--red.btn--download.btn--download-jpg - Download button (JPG, Red)
.btn.btn--pink.btn--download.btn--download-jpg - Download button (JPG, Pink)
.btn.btn--orange.btn--download.btn--download-jpg - Download button (JPG, Orange)
.btn.btn--green.btn--download.btn--download-jpg - Download button (JPG, Green)
.btn.btn--purple.btn--download.btn--download-jpg - Download button (JPG, Purple)

markup:
<a href="#" class="{$modifiers}">Download Image</a>

Styleguide 4.1.4.4
*/
.btn--download-jpg:before {
  width: 22.98px;
  height: 24px;
  background-position: -3174px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-jpg:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--download-jpg:hover:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-jpg:hover:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-jpg:before, .asset-cards--blue .btn--download-jpg.btn:before, .form-pod--blue .btn--download-jpg.btn:before, .card--blue .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3237px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-jpg:before, .no-svg .asset-cards--blue .btn--download-jpg.btn:before, .asset-cards--blue .no-svg .btn--download-jpg.btn:before, .no-svg .form-pod--blue .btn--download-jpg.btn:before, .form-pod--blue .no-svg .btn--download-jpg.btn:before, .no-svg .card--blue .btn--download-jpg.btn:before, .card--blue .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-jpg:hover:before, .asset-cards--blue .btn--download-jpg.btn:hover:before, .form-pod--blue .btn--download-jpg.btn:hover:before, .card--blue .btn--download-jpg.btn:hover:before, .card--blue:hover .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-jpg:hover:before, .no-svg .asset-cards--blue .btn--download-jpg.btn:hover:before, .asset-cards--blue .no-svg .btn--download-jpg.btn:hover:before, .no-svg .form-pod--blue .btn--download-jpg.btn:hover:before, .form-pod--blue .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--blue .btn--download-jpg.btn:hover:before, .card--blue .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--blue:hover .btn--download-jpg.btn:before, .card--blue:hover .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-jpg:before, .asset-cards--red .btn--download-jpg.btn:before, .form-pod--red .btn--download-jpg.btn:before, .card--red .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3552px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-jpg:before, .no-svg .asset-cards--red .btn--download-jpg.btn:before, .asset-cards--red .no-svg .btn--download-jpg.btn:before, .no-svg .form-pod--red .btn--download-jpg.btn:before, .form-pod--red .no-svg .btn--download-jpg.btn:before, .no-svg .card--red .btn--download-jpg.btn:before, .card--red .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-jpg:hover:before, .asset-cards--red .btn--download-jpg.btn:hover:before, .form-pod--red .btn--download-jpg.btn:hover:before, .card--red .btn--download-jpg.btn:hover:before, .card--red:hover .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-jpg:hover:before, .no-svg .asset-cards--red .btn--download-jpg.btn:hover:before, .asset-cards--red .no-svg .btn--download-jpg.btn:hover:before, .no-svg .form-pod--red .btn--download-jpg.btn:hover:before, .form-pod--red .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--red .btn--download-jpg.btn:hover:before, .card--red .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--red:hover .btn--download-jpg.btn:before, .card--red:hover .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-jpg:before, .asset-cards--pink .btn--download-jpg.btn:before, .form-pod--pink .btn--download-jpg.btn:before, .card--pink .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3426px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-jpg:before, .no-svg .asset-cards--pink .btn--download-jpg.btn:before, .asset-cards--pink .no-svg .btn--download-jpg.btn:before, .no-svg .form-pod--pink .btn--download-jpg.btn:before, .form-pod--pink .no-svg .btn--download-jpg.btn:before, .no-svg .card--pink .btn--download-jpg.btn:before, .card--pink .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-jpg:hover:before, .asset-cards--pink .btn--download-jpg.btn:hover:before, .form-pod--pink .btn--download-jpg.btn:hover:before, .card--pink .btn--download-jpg.btn:hover:before, .card--pink:hover .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-jpg:hover:before, .no-svg .asset-cards--pink .btn--download-jpg.btn:hover:before, .asset-cards--pink .no-svg .btn--download-jpg.btn:hover:before, .no-svg .form-pod--pink .btn--download-jpg.btn:hover:before, .form-pod--pink .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--pink .btn--download-jpg.btn:hover:before, .card--pink .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--pink:hover .btn--download-jpg.btn:before, .card--pink:hover .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-jpg:before, .asset-cards--orange .btn--download-jpg.btn:before, .form-pod--orange .btn--download-jpg.btn:before, .card--orange .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3363px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-jpg:before, .no-svg .asset-cards--orange .btn--download-jpg.btn:before, .asset-cards--orange .no-svg .btn--download-jpg.btn:before, .no-svg .form-pod--orange .btn--download-jpg.btn:before, .form-pod--orange .no-svg .btn--download-jpg.btn:before, .no-svg .card--orange .btn--download-jpg.btn:before, .card--orange .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-jpg:hover:before, .asset-cards--orange .btn--download-jpg.btn:hover:before, .form-pod--orange .btn--download-jpg.btn:hover:before, .card--orange .btn--download-jpg.btn:hover:before, .card--orange:hover .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-jpg:hover:before, .no-svg .asset-cards--orange .btn--download-jpg.btn:hover:before, .asset-cards--orange .no-svg .btn--download-jpg.btn:hover:before, .no-svg .form-pod--orange .btn--download-jpg.btn:hover:before, .form-pod--orange .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--orange .btn--download-jpg.btn:hover:before, .card--orange .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--orange:hover .btn--download-jpg.btn:before, .card--orange:hover .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-jpg:before, .asset-cards--green .btn--download-jpg.btn:before, .form-pod--green .btn--download-jpg.btn:before, .card--green .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3300px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-jpg:before, .no-svg .asset-cards--green .btn--download-jpg.btn:before, .asset-cards--green .no-svg .btn--download-jpg.btn:before, .no-svg .form-pod--green .btn--download-jpg.btn:before, .form-pod--green .no-svg .btn--download-jpg.btn:before, .no-svg .card--green .btn--download-jpg.btn:before, .card--green .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-jpg:hover:before, .asset-cards--green .btn--download-jpg.btn:hover:before, .form-pod--green .btn--download-jpg.btn:hover:before, .card--green .btn--download-jpg.btn:hover:before, .card--green:hover .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-jpg:hover:before, .no-svg .asset-cards--green .btn--download-jpg.btn:hover:before, .asset-cards--green .no-svg .btn--download-jpg.btn:hover:before, .no-svg .form-pod--green .btn--download-jpg.btn:hover:before, .form-pod--green .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--green .btn--download-jpg.btn:hover:before, .card--green .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--green:hover .btn--download-jpg.btn:before, .card--green:hover .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-jpg:before, .asset-cards--purple .btn--download-jpg.btn:before, .form-pod--purple .btn--download-jpg.btn:before, .card--purple .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3489px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-jpg:before, .no-svg .asset-cards--purple .btn--download-jpg.btn:before, .asset-cards--purple .no-svg .btn--download-jpg.btn:before, .no-svg .form-pod--purple .btn--download-jpg.btn:before, .form-pod--purple .no-svg .btn--download-jpg.btn:before, .no-svg .card--purple .btn--download-jpg.btn:before, .card--purple .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-jpg:hover:before, .asset-cards--purple .btn--download-jpg.btn:hover:before, .form-pod--purple .btn--download-jpg.btn:hover:before, .card--purple .btn--download-jpg.btn:hover:before, .card--purple:hover .btn--download-jpg.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -3615px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-jpg:hover:before, .no-svg .asset-cards--purple .btn--download-jpg.btn:hover:before, .asset-cards--purple .no-svg .btn--download-jpg.btn:hover:before, .no-svg .form-pod--purple .btn--download-jpg.btn:hover:before, .form-pod--purple .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--purple .btn--download-jpg.btn:hover:before, .card--purple .no-svg .btn--download-jpg.btn:hover:before, .no-svg .card--purple:hover .btn--download-jpg.btn:before, .card--purple:hover .no-svg .btn--download-jpg.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

/*
Download Button (PNG)

Buttons that link to a downloadable PNG image.

.btn.btn--download.btn--download-png - Download button (PNG)
.btn.btn--blue.btn--download.btn--download-png - Download button (PNG, Primary)
.btn.btn--red.btn--download.btn--download-png - Download button (PNG, Red)
.btn.btn--pink.btn--download.btn--download-png - Download button (PNG, Pink)
.btn.btn--orange.btn--download.btn--download-png - Download button (PNG, Orange)
.btn.btn--green.btn--download.btn--download-png - Download button (PNG, Green)
.btn.btn--purple.btn--download.btn--download-png - Download button (PNG, Purple)

markup:
<a href="#" class="{$modifiers}">Download Image</a>

Styleguide 4.1.4.5
*/
.btn--download-png:before {
  width: 22.98px;
  height: 24px;
  background-position: -4292px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-png:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--download-png:hover:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-png:hover:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-png:before, .asset-cards--blue .btn--download-png.btn:before, .form-pod--blue .btn--download-png.btn:before, .card--blue .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4355px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-png:before, .no-svg .asset-cards--blue .btn--download-png.btn:before, .asset-cards--blue .no-svg .btn--download-png.btn:before, .no-svg .form-pod--blue .btn--download-png.btn:before, .form-pod--blue .no-svg .btn--download-png.btn:before, .no-svg .card--blue .btn--download-png.btn:before, .card--blue .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-png:hover:before, .asset-cards--blue .btn--download-png.btn:hover:before, .form-pod--blue .btn--download-png.btn:hover:before, .card--blue .btn--download-png.btn:hover:before, .card--blue:hover .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-png:hover:before, .no-svg .asset-cards--blue .btn--download-png.btn:hover:before, .asset-cards--blue .no-svg .btn--download-png.btn:hover:before, .no-svg .form-pod--blue .btn--download-png.btn:hover:before, .form-pod--blue .no-svg .btn--download-png.btn:hover:before, .no-svg .card--blue .btn--download-png.btn:hover:before, .card--blue .no-svg .btn--download-png.btn:hover:before, .no-svg .card--blue:hover .btn--download-png.btn:before, .card--blue:hover .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-png:before, .asset-cards--red .btn--download-png.btn:before, .form-pod--red .btn--download-png.btn:before, .card--red .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4670px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-png:before, .no-svg .asset-cards--red .btn--download-png.btn:before, .asset-cards--red .no-svg .btn--download-png.btn:before, .no-svg .form-pod--red .btn--download-png.btn:before, .form-pod--red .no-svg .btn--download-png.btn:before, .no-svg .card--red .btn--download-png.btn:before, .card--red .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-png:hover:before, .asset-cards--red .btn--download-png.btn:hover:before, .form-pod--red .btn--download-png.btn:hover:before, .card--red .btn--download-png.btn:hover:before, .card--red:hover .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-png:hover:before, .no-svg .asset-cards--red .btn--download-png.btn:hover:before, .asset-cards--red .no-svg .btn--download-png.btn:hover:before, .no-svg .form-pod--red .btn--download-png.btn:hover:before, .form-pod--red .no-svg .btn--download-png.btn:hover:before, .no-svg .card--red .btn--download-png.btn:hover:before, .card--red .no-svg .btn--download-png.btn:hover:before, .no-svg .card--red:hover .btn--download-png.btn:before, .card--red:hover .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-png:before, .asset-cards--pink .btn--download-png.btn:before, .form-pod--pink .btn--download-png.btn:before, .card--pink .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4544px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-png:before, .no-svg .asset-cards--pink .btn--download-png.btn:before, .asset-cards--pink .no-svg .btn--download-png.btn:before, .no-svg .form-pod--pink .btn--download-png.btn:before, .form-pod--pink .no-svg .btn--download-png.btn:before, .no-svg .card--pink .btn--download-png.btn:before, .card--pink .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-png:hover:before, .asset-cards--pink .btn--download-png.btn:hover:before, .form-pod--pink .btn--download-png.btn:hover:before, .card--pink .btn--download-png.btn:hover:before, .card--pink:hover .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-png:hover:before, .no-svg .asset-cards--pink .btn--download-png.btn:hover:before, .asset-cards--pink .no-svg .btn--download-png.btn:hover:before, .no-svg .form-pod--pink .btn--download-png.btn:hover:before, .form-pod--pink .no-svg .btn--download-png.btn:hover:before, .no-svg .card--pink .btn--download-png.btn:hover:before, .card--pink .no-svg .btn--download-png.btn:hover:before, .no-svg .card--pink:hover .btn--download-png.btn:before, .card--pink:hover .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-png:before, .asset-cards--orange .btn--download-png.btn:before, .form-pod--orange .btn--download-png.btn:before, .card--orange .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4481px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-png:before, .no-svg .asset-cards--orange .btn--download-png.btn:before, .asset-cards--orange .no-svg .btn--download-png.btn:before, .no-svg .form-pod--orange .btn--download-png.btn:before, .form-pod--orange .no-svg .btn--download-png.btn:before, .no-svg .card--orange .btn--download-png.btn:before, .card--orange .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-png:hover:before, .asset-cards--orange .btn--download-png.btn:hover:before, .form-pod--orange .btn--download-png.btn:hover:before, .card--orange .btn--download-png.btn:hover:before, .card--orange:hover .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-png:hover:before, .no-svg .asset-cards--orange .btn--download-png.btn:hover:before, .asset-cards--orange .no-svg .btn--download-png.btn:hover:before, .no-svg .form-pod--orange .btn--download-png.btn:hover:before, .form-pod--orange .no-svg .btn--download-png.btn:hover:before, .no-svg .card--orange .btn--download-png.btn:hover:before, .card--orange .no-svg .btn--download-png.btn:hover:before, .no-svg .card--orange:hover .btn--download-png.btn:before, .card--orange:hover .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-png:before, .asset-cards--green .btn--download-png.btn:before, .form-pod--green .btn--download-png.btn:before, .card--green .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4418px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-png:before, .no-svg .asset-cards--green .btn--download-png.btn:before, .asset-cards--green .no-svg .btn--download-png.btn:before, .no-svg .form-pod--green .btn--download-png.btn:before, .form-pod--green .no-svg .btn--download-png.btn:before, .no-svg .card--green .btn--download-png.btn:before, .card--green .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-png:hover:before, .asset-cards--green .btn--download-png.btn:hover:before, .form-pod--green .btn--download-png.btn:hover:before, .card--green .btn--download-png.btn:hover:before, .card--green:hover .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-png:hover:before, .no-svg .asset-cards--green .btn--download-png.btn:hover:before, .asset-cards--green .no-svg .btn--download-png.btn:hover:before, .no-svg .form-pod--green .btn--download-png.btn:hover:before, .form-pod--green .no-svg .btn--download-png.btn:hover:before, .no-svg .card--green .btn--download-png.btn:hover:before, .card--green .no-svg .btn--download-png.btn:hover:before, .no-svg .card--green:hover .btn--download-png.btn:before, .card--green:hover .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-png:before, .asset-cards--purple .btn--download-png.btn:before, .form-pod--purple .btn--download-png.btn:before, .card--purple .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4607px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-png:before, .no-svg .asset-cards--purple .btn--download-png.btn:before, .asset-cards--purple .no-svg .btn--download-png.btn:before, .no-svg .form-pod--purple .btn--download-png.btn:before, .form-pod--purple .no-svg .btn--download-png.btn:before, .no-svg .card--purple .btn--download-png.btn:before, .card--purple .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-png:hover:before, .asset-cards--purple .btn--download-png.btn:hover:before, .form-pod--purple .btn--download-png.btn:hover:before, .card--purple .btn--download-png.btn:hover:before, .card--purple:hover .btn--download-png.btn:before {
  width: 22.98px;
  height: 24px;
  background-position: -4733px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-png:hover:before, .no-svg .asset-cards--purple .btn--download-png.btn:hover:before, .asset-cards--purple .no-svg .btn--download-png.btn:hover:before, .no-svg .form-pod--purple .btn--download-png.btn:hover:before, .form-pod--purple .no-svg .btn--download-png.btn:hover:before, .no-svg .card--purple .btn--download-png.btn:hover:before, .card--purple .no-svg .btn--download-png.btn:hover:before, .no-svg .card--purple:hover .btn--download-png.btn:before, .card--purple:hover .no-svg .btn--download-png.btn:before {
    background-image: url("/images/sprites/sprite.png"); }

/*
Download Button (inline)

Buttons with an inline download icon.

.btn.btn--download-inline - Download button (inline)
.btn.btn--blue.btn--download-inline - Download button (inline, Primary)
.btn.btn--red.btn--download-inline - Download button (inline, Red)
.btn.btn--pink.btn--download-inline - Download button (inline, Pink)
.btn.btn--orange.btn--download-inline - Download button (inline, Orange)
.btn.btn--green.btn--download-inline - Download button (inline, Green)
.btn.btn--purple.btn--download-inline - Download button (inline, Purple)

markup:
<a href="#" class="{$modifiers}">Download</a>

Styleguide 4.1.4.6
*/
.btn--download-inline:after {
  content: "";
  margin-left: 4px;
  display: inline-block;
  position: relative;
  top: 2px;
  width: 15px;
  height: 15px;
  background-position: -2560px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-inline:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--download-inline:hover:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--download-inline:hover:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-inline:after, .asset-cards--blue .btn--download-inline.btn:after, .form-pod--blue .btn--download-inline.btn:after, .card--blue .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -2560px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-inline:after, .no-svg .asset-cards--blue .btn--download-inline.btn:after, .asset-cards--blue .no-svg .btn--download-inline.btn:after, .no-svg .form-pod--blue .btn--download-inline.btn:after, .form-pod--blue .no-svg .btn--download-inline.btn:after, .no-svg .card--blue .btn--download-inline.btn:after, .card--blue .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--blue.btn--download-inline:hover:after, .asset-cards--blue .btn--download-inline.btn:hover:after, .form-pod--blue .btn--download-inline.btn:hover:after, .card--blue .btn--download-inline.btn:hover:after, .card--blue:hover .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--blue.btn--download-inline:hover:after, .no-svg .asset-cards--blue .btn--download-inline.btn:hover:after, .asset-cards--blue .no-svg .btn--download-inline.btn:hover:after, .no-svg .form-pod--blue .btn--download-inline.btn:hover:after, .form-pod--blue .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--blue .btn--download-inline.btn:hover:after, .card--blue .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--blue:hover .btn--download-inline.btn:after, .card--blue:hover .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-inline:after, .asset-cards--red .btn--download-inline.btn:after, .form-pod--red .btn--download-inline.btn:after, .card--red .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4851px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-inline:after, .no-svg .asset-cards--red .btn--download-inline.btn:after, .asset-cards--red .no-svg .btn--download-inline.btn:after, .no-svg .form-pod--red .btn--download-inline.btn:after, .form-pod--red .no-svg .btn--download-inline.btn:after, .no-svg .card--red .btn--download-inline.btn:after, .card--red .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--red.btn--download-inline:hover:after, .asset-cards--red .btn--download-inline.btn:hover:after, .form-pod--red .btn--download-inline.btn:hover:after, .card--red .btn--download-inline.btn:hover:after, .card--red:hover .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--red.btn--download-inline:hover:after, .no-svg .asset-cards--red .btn--download-inline.btn:hover:after, .asset-cards--red .no-svg .btn--download-inline.btn:hover:after, .no-svg .form-pod--red .btn--download-inline.btn:hover:after, .form-pod--red .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--red .btn--download-inline.btn:hover:after, .card--red .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--red:hover .btn--download-inline.btn:after, .card--red:hover .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-inline:after, .asset-cards--pink .btn--download-inline.btn:after, .form-pod--pink .btn--download-inline.btn:after, .card--pink .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4237px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-inline:after, .no-svg .asset-cards--pink .btn--download-inline.btn:after, .asset-cards--pink .no-svg .btn--download-inline.btn:after, .no-svg .form-pod--pink .btn--download-inline.btn:after, .form-pod--pink .no-svg .btn--download-inline.btn:after, .no-svg .card--pink .btn--download-inline.btn:after, .card--pink .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--pink.btn--download-inline:hover:after, .asset-cards--pink .btn--download-inline.btn:hover:after, .form-pod--pink .btn--download-inline.btn:hover:after, .card--pink .btn--download-inline.btn:hover:after, .card--pink:hover .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--pink.btn--download-inline:hover:after, .no-svg .asset-cards--pink .btn--download-inline.btn:hover:after, .asset-cards--pink .no-svg .btn--download-inline.btn:hover:after, .no-svg .form-pod--pink .btn--download-inline.btn:hover:after, .form-pod--pink .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--pink .btn--download-inline.btn:hover:after, .card--pink .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--pink:hover .btn--download-inline.btn:after, .card--pink:hover .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-inline:after, .asset-cards--orange .btn--download-inline.btn:after, .form-pod--orange .btn--download-inline.btn:after, .card--orange .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -3678px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-inline:after, .no-svg .asset-cards--orange .btn--download-inline.btn:after, .asset-cards--orange .no-svg .btn--download-inline.btn:after, .no-svg .form-pod--orange .btn--download-inline.btn:after, .form-pod--orange .no-svg .btn--download-inline.btn:after, .no-svg .card--orange .btn--download-inline.btn:after, .card--orange .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--orange.btn--download-inline:hover:after, .asset-cards--orange .btn--download-inline.btn:hover:after, .form-pod--orange .btn--download-inline.btn:hover:after, .card--orange .btn--download-inline.btn:hover:after, .card--orange:hover .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--orange.btn--download-inline:hover:after, .no-svg .asset-cards--orange .btn--download-inline.btn:hover:after, .asset-cards--orange .no-svg .btn--download-inline.btn:hover:after, .no-svg .form-pod--orange .btn--download-inline.btn:hover:after, .form-pod--orange .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--orange .btn--download-inline.btn:hover:after, .card--orange .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--orange:hover .btn--download-inline.btn:after, .card--orange:hover .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-inline:after, .asset-cards--green .btn--download-inline.btn:after, .form-pod--green .btn--download-inline.btn:after, .card--green .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -3119px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-inline:after, .no-svg .asset-cards--green .btn--download-inline.btn:after, .asset-cards--green .no-svg .btn--download-inline.btn:after, .no-svg .form-pod--green .btn--download-inline.btn:after, .form-pod--green .no-svg .btn--download-inline.btn:after, .no-svg .card--green .btn--download-inline.btn:after, .card--green .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--green.btn--download-inline:hover:after, .asset-cards--green .btn--download-inline.btn:hover:after, .form-pod--green .btn--download-inline.btn:hover:after, .card--green .btn--download-inline.btn:hover:after, .card--green:hover .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--green.btn--download-inline:hover:after, .no-svg .asset-cards--green .btn--download-inline.btn:hover:after, .asset-cards--green .no-svg .btn--download-inline.btn:hover:after, .no-svg .form-pod--green .btn--download-inline.btn:hover:after, .form-pod--green .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--green .btn--download-inline.btn:hover:after, .card--green .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--green:hover .btn--download-inline.btn:after, .card--green:hover .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-inline:after, .asset-cards--purple .btn--download-inline.btn:after, .form-pod--purple .btn--download-inline.btn:after, .card--purple .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4796px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-inline:after, .no-svg .asset-cards--purple .btn--download-inline.btn:after, .asset-cards--purple .no-svg .btn--download-inline.btn:after, .no-svg .form-pod--purple .btn--download-inline.btn:after, .form-pod--purple .no-svg .btn--download-inline.btn:after, .no-svg .card--purple .btn--download-inline.btn:after, .card--purple .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--purple.btn--download-inline:hover:after, .asset-cards--purple .btn--download-inline.btn:hover:after, .form-pod--purple .btn--download-inline.btn:hover:after, .card--purple .btn--download-inline.btn:hover:after, .card--purple:hover .btn--download-inline.btn:after {
  width: 15px;
  height: 15px;
  background-position: -4906px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--purple.btn--download-inline:hover:after, .no-svg .asset-cards--purple .btn--download-inline.btn:hover:after, .asset-cards--purple .no-svg .btn--download-inline.btn:hover:after, .no-svg .form-pod--purple .btn--download-inline.btn:hover:after, .form-pod--purple .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--purple .btn--download-inline.btn:hover:after, .card--purple .no-svg .btn--download-inline.btn:hover:after, .no-svg .card--purple:hover .btn--download-inline.btn:after, .card--purple:hover .no-svg .btn--download-inline.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

/*
Share Button

A button to share content via social networks or other communication methods.

.btn.btn--share.js-btn-share - Share button
.btn.btn--share.btn--blue.js-btn-share - Share button (blue)
.btn.btn--share.btn--red.js-btn-share - Share button (red)
.btn.btn--share.btn--pink.js-btn-share - Share button (pink)
.btn.btn--share.btn--orange.js-btn-share - Share button (orange)
.btn.btn--share.btn--green.js-btn-share - Share button (green)
.btn.btn--share.btn--purple.js-btn-share - Share button (purple)

markup:
<a href="#" class="{$modifiers} js-share-sheet-trigger">Share</a>


Styleguide 4.1.5
*/
.btn--share:after {
  width: 13.25px;
  height: 15px;
  background-position: -8358px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg");
  content: "";
  margin-left: 4px;
  display: inline-block;
  position: relative;
  top: 2px; }
  .no-svg .btn--share:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share:hover:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share:hover:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--blue:after, .asset-cards--blue .btn--share.btn:after, .form-pod--blue .btn--share.btn:after, .card--blue .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8412px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--blue:after, .no-svg .asset-cards--blue .btn--share.btn:after, .asset-cards--blue .no-svg .btn--share.btn:after, .no-svg .form-pod--blue .btn--share.btn:after, .form-pod--blue .no-svg .btn--share.btn:after, .no-svg .card--blue .btn--share.btn:after, .card--blue .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--blue:hover:after, .asset-cards--blue .btn--share.btn:hover:after, .form-pod--blue .btn--share.btn:hover:after, .card--blue .btn--share.btn:hover:after, .card--blue:hover .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--blue:hover:after, .no-svg .asset-cards--blue .btn--share.btn:hover:after, .asset-cards--blue .no-svg .btn--share.btn:hover:after, .no-svg .form-pod--blue .btn--share.btn:hover:after, .form-pod--blue .no-svg .btn--share.btn:hover:after, .no-svg .card--blue .btn--share.btn:hover:after, .card--blue .no-svg .btn--share.btn:hover:after, .no-svg .card--blue:hover .btn--share.btn:after, .card--blue:hover .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--red:after, .asset-cards--red .btn--share.btn:after, .form-pod--red .btn--share.btn:after, .card--red .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8682px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--red:after, .no-svg .asset-cards--red .btn--share.btn:after, .asset-cards--red .no-svg .btn--share.btn:after, .no-svg .form-pod--red .btn--share.btn:after, .form-pod--red .no-svg .btn--share.btn:after, .no-svg .card--red .btn--share.btn:after, .card--red .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--red:hover:after, .asset-cards--red .btn--share.btn:hover:after, .form-pod--red .btn--share.btn:hover:after, .card--red .btn--share.btn:hover:after, .card--red:hover .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--red:hover:after, .no-svg .asset-cards--red .btn--share.btn:hover:after, .asset-cards--red .no-svg .btn--share.btn:hover:after, .no-svg .form-pod--red .btn--share.btn:hover:after, .form-pod--red .no-svg .btn--share.btn:hover:after, .no-svg .card--red .btn--share.btn:hover:after, .card--red .no-svg .btn--share.btn:hover:after, .no-svg .card--red:hover .btn--share.btn:after, .card--red:hover .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--pink:after, .asset-cards--pink .btn--share.btn:after, .form-pod--pink .btn--share.btn:after, .card--pink .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8574px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--pink:after, .no-svg .asset-cards--pink .btn--share.btn:after, .asset-cards--pink .no-svg .btn--share.btn:after, .no-svg .form-pod--pink .btn--share.btn:after, .form-pod--pink .no-svg .btn--share.btn:after, .no-svg .card--pink .btn--share.btn:after, .card--pink .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--pink:hover:after, .asset-cards--pink .btn--share.btn:hover:after, .form-pod--pink .btn--share.btn:hover:after, .card--pink .btn--share.btn:hover:after, .card--pink:hover .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--pink:hover:after, .no-svg .asset-cards--pink .btn--share.btn:hover:after, .asset-cards--pink .no-svg .btn--share.btn:hover:after, .no-svg .form-pod--pink .btn--share.btn:hover:after, .form-pod--pink .no-svg .btn--share.btn:hover:after, .no-svg .card--pink .btn--share.btn:hover:after, .card--pink .no-svg .btn--share.btn:hover:after, .no-svg .card--pink:hover .btn--share.btn:after, .card--pink:hover .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--orange:after, .asset-cards--orange .btn--share.btn:after, .form-pod--orange .btn--share.btn:after, .card--orange .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8520px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--orange:after, .no-svg .asset-cards--orange .btn--share.btn:after, .asset-cards--orange .no-svg .btn--share.btn:after, .no-svg .form-pod--orange .btn--share.btn:after, .form-pod--orange .no-svg .btn--share.btn:after, .no-svg .card--orange .btn--share.btn:after, .card--orange .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--orange:hover:after, .asset-cards--orange .btn--share.btn:hover:after, .form-pod--orange .btn--share.btn:hover:after, .card--orange .btn--share.btn:hover:after, .card--orange:hover .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--orange:hover:after, .no-svg .asset-cards--orange .btn--share.btn:hover:after, .asset-cards--orange .no-svg .btn--share.btn:hover:after, .no-svg .form-pod--orange .btn--share.btn:hover:after, .form-pod--orange .no-svg .btn--share.btn:hover:after, .no-svg .card--orange .btn--share.btn:hover:after, .card--orange .no-svg .btn--share.btn:hover:after, .no-svg .card--orange:hover .btn--share.btn:after, .card--orange:hover .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--green:after, .asset-cards--green .btn--share.btn:after, .form-pod--green .btn--share.btn:after, .card--green .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8466px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--green:after, .no-svg .asset-cards--green .btn--share.btn:after, .asset-cards--green .no-svg .btn--share.btn:after, .no-svg .form-pod--green .btn--share.btn:after, .form-pod--green .no-svg .btn--share.btn:after, .no-svg .card--green .btn--share.btn:after, .card--green .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--green:hover:after, .asset-cards--green .btn--share.btn:hover:after, .form-pod--green .btn--share.btn:hover:after, .card--green .btn--share.btn:hover:after, .card--green:hover .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--green:hover:after, .no-svg .asset-cards--green .btn--share.btn:hover:after, .asset-cards--green .no-svg .btn--share.btn:hover:after, .no-svg .form-pod--green .btn--share.btn:hover:after, .form-pod--green .no-svg .btn--share.btn:hover:after, .no-svg .card--green .btn--share.btn:hover:after, .card--green .no-svg .btn--share.btn:hover:after, .no-svg .card--green:hover .btn--share.btn:after, .card--green:hover .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--purple:after, .asset-cards--purple .btn--share.btn:after, .form-pod--purple .btn--share.btn:after, .card--purple .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8628px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--purple:after, .no-svg .asset-cards--purple .btn--share.btn:after, .asset-cards--purple .no-svg .btn--share.btn:after, .no-svg .form-pod--purple .btn--share.btn:after, .form-pod--purple .no-svg .btn--share.btn:after, .no-svg .card--purple .btn--share.btn:after, .card--purple .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

.btn--share.btn--purple:hover:after, .asset-cards--purple .btn--share.btn:hover:after, .form-pod--purple .btn--share.btn:hover:after, .card--purple .btn--share.btn:hover:after, .card--purple:hover .btn--share.btn:after {
  width: 13.25px;
  height: 15px;
  background-position: -8736px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .btn--share.btn--purple:hover:after, .no-svg .asset-cards--purple .btn--share.btn:hover:after, .asset-cards--purple .no-svg .btn--share.btn:hover:after, .no-svg .form-pod--purple .btn--share.btn:hover:after, .form-pod--purple .no-svg .btn--share.btn:hover:after, .no-svg .card--purple .btn--share.btn:hover:after, .card--purple .no-svg .btn--share.btn:hover:after, .no-svg .card--purple:hover .btn--share.btn:after, .card--purple:hover .no-svg .btn--share.btn:after {
    background-image: url("/images/sprites/sprite.png"); }

/*
Button Grid

A list of buttons, used as a picker.

markup:
<div class="button-grid">
  <div class="button-grid-btn">
    <input type="radio" class="button-grid-btn__checkbox" id="1" name="select-grid">
    <label for="1" class="btn btn--grid button-grid-btn__label">Option</label>
  </div>
  <div class="button-grid-btn">
    <input type="radio" class="button-grid-btn__checkbox" id="2" name="select-grid">
    <label for="2" class="btn btn--grid button-grid-btn__label">Option</label>
  </div>
  <div class="button-grid-btn">
    <input type="radio" class="button-grid-btn__checkbox" id="3" name="select-grid">
    <label for="3" class="btn btn--grid button-grid-btn__label">Option</label>
  </div>
  <div class="button-grid-btn">
    <input type="radio" class="button-grid-btn__checkbox" id="4" name="select-grid">
    <label for="4" class="btn btn--grid button-grid-btn__label">Option</label>
  </div>
  <div class="button-grid-btn">
    <input type="radio" class="button-grid-btn__checkbox" id="5" name="select-grid">
    <label for="5" class="btn btn--grid button-grid-btn__label">Option</label>
  </div>
  <div class="button-grid-btn">
    <input type="radio" class="button-grid-btn__checkbox" id="6" name="select-grid">
    <label for="6" class="btn btn--grid button-grid-btn__label">Option</label>
  </div>
</div>

Styleguide 4.1.6
*/
.button-grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 450px; }

.button-grid-btn {
  -ms-flex: 1 0 auto;
      flex: 1 0 auto; }

.button-grid-btn__label {
  cursor: pointer;
  width: 100%;
  border-radius: 0; }
  .button-grid-btn__label:hover, .button-grid-btn__checkbox:checked + .button-grid-btn__label {
    background-color: #178a11;
    border-color: #178a11;
    color: #fff; }

.button-grid-btn__checkbox {
  display: none; }

/*
Text links

A more simple text link for when a CTA is too much.

.text-link - Default text button
.text-link:hover - hovered style
.text-link:focus - focused style
.text-link:visited - visited style

markup: <a href="#" class="{$modifiers}">Show more...</a>

Styleguide 4.2
*/
.text-link {
  white-space: nowrap; }
  .text-link:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 10px;
    background-position: -10090px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin-left: 10px; }
    .no-svg .text-link:after {
      background-image: url("/images/sprites/sprite.png"); }
  .text-link:hover:after {
    width: 12px;
    height: 10px;
    background-position: -10142px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .text-link:hover:after {
      background-image: url("/images/sprites/sprite.png"); }
  .text-link:visited:after {
    width: 12px;
    height: 10px;
    background-position: -10194px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .text-link:visited:after {
      background-image: url("/images/sprites/sprite.png"); }
  .text-link.text-link--on-dark {
    color: #fff; }
    .text-link.text-link--on-dark:after {
      width: 12px;
      height: 10px;
      background-position: -10246px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .text-link.text-link--on-dark:after {
        background-image: url("/images/sprites/sprite.png"); }

/*
Text links on dark

A more simple text link for when a CTA is too much.

.text-link.text-link--on-dark - Default text button
.text-link.text-link--on-dark:hover - hovered style
.text-link.text-link--on-dark:focus - focused style
.text-link.text-link--on-dark:visited - visited style

markup: <a href="#" class="{$modifiers}">Show more...</a>

sg-wrapper:
<div class="sg-black-bg">
  <sg-wrapper-content/>
</div>

Styleguide 4.2.1
*/
/*
Global Nav Text links

A more simple text link for when a CTA is too much.

.globaltext-link - Default text button
.globaltext-link:hover - hovered style
.globaltext-link:focus - focused style
.globaltext-link:visited - visited style

markup: <a href="#" class="{$modifiers}">Show more...</a>

Styleguide 4.2.2
*/
.globaltext-link {
  margin: 0px 15px 0 15px; }

/*------------------------------------*    Forms
\*------------------------------------*/
/*
Form controls

A thorough library of inputs that can be used to style any form on the site.

Styleguide 5.0
*/
/*
Form containment elements

A thorough library of  inputs that can be used to style any form on the site.

Styleguide 5.1
*/
/*
The form element

A standard form element

markup:
<form class="{$modifiers}">
  <fieldset class="form__fieldset">
    <div class="form__item">
      <label class="form__label" for="name_1">name</label>
      <input class="form__control" id="name_1" type="text" placeholder="e.g Tom Smith">
    </div>
    <button class="btn btn--blue form__btn">Submit</button>
  </fieldset>
</form>

.form - regular form
.form.form--inline - An inline form variant

Styleguide 5.1.1
*/
.form {
  margin: 0; }
  .form.form--inline:before, .form.form--inline:after {
    content: ' ';
    display: table; }
  .form.form--inline:after {
    clear: both; }

/*
Fieldset element overrides styling in  _normalize.scss

A standard form fieldset container element

markup:
<fieldset class="form__fieldset"></fieldset>

Styleguide 5.1.2
*/
.form__fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

.form__legend {
  white-space: normal;
  font-weight: bold;
  margin-bottom: 9px; }

/*
Form item

A container element for form rows

.form__item - standard wrapper for form label, input and validation
.form__item.form__item--inline - An inline variation.

markup:
<div class="{$modifiers}">
  <label class="form__label" for="name_2">name</label>
  <input class="form__control" id="name_2" type="text" placeholder="e.g Tom Smith">
</div>

Styleguide 5.1.3
*/
.form__item {
  clear: both;
  max-width: 600px;
  margin-bottom: 18px; }
  .form--inline .form__item {
    float: left;
    clear: none; }

/*
Form labels

A thorough library of  inputs that can be used to style any form on the site.

markup:
<label class="form__label">Name:</label>

Styleguide 5.1.4
*/
.form__label {
  display: block;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 5px; }
  .form--inline .form__label {
    float: left;
    padding: 14px 0;
    margin-right: 10px; }
  .form__item--inline .form__label {
    float: left;
    width: 20%;
    padding: 14px 10px 14px 0; }

/*
Form controls

A thorough library of inputs that can be used to style any form on the site.

Styleguide 5.2
*/
/*
Form control

A class to be applied to <strong>&lt;input&gt;</strong>, <strong>&lt;textarea&gt;</strong> and <strong>&lt;select&gt;</strong> elements

.form__control - form control

markup:
<div class="form__item">
  <input class="{$modifiers}" type="text" placeholder="e.g Tom Smith">
</div>
<div class="form__item">
  <textarea class="{$modifiers}" placeholder="e.g Tom Smith"></textarea>
</div>
<div class="form__item">
  <select class="{$modifiers}" placeholder="e.g Tom Smith">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
  </select>
</div>

Styleguide 5.2.1
*/
.form__control {
  display: block;
  width: 100%;
  height: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  color: #2c2c2c;
  background-color: #fff;
  background-image: none;
  border: 1px solid #8a8b8a;
  padding: 9px 7px;
  transition: box-shadow 100ms; }
  .form__control:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 3px #0073c6; }
  .form__control.input-validation-error {
    border-color: transparent;
    box-shadow: 0 0 0 3px #df1e05; }
  .form__control.valid {
    border-color: transparent;
    box-shadow: 0 0 0 3px #178a11; }
  .form--inline .form__control {
    float: left;
    width: auto;
    margin-right: 23px; }
  .form__item--inline .form__control {
    float: left;
    width: 80%; }

textarea.form__control {
  resize: vertical;
  min-height: 200px; }

select.form__control {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url(/images/svg/form-select-arrow.svg) no-repeat calc(100% - 15px) 50%; }

.form__file-upload {
  width: 100%; }

/*
Checkboxes

Custom form checkbox elements

.checkbox - default checkbox
.checkbox.checkbox--inline - inline checkboxes

markup:
<div class="form-group">
  <div class="{$modifiers}">
    <input class="checkbox__input" type="checkbox" name="checkbox" id="checkbox_1" value="option 1">
    <label class="checkbox__label" for="checkbox_1">Option 1</label>
  </div>
  <div class="{$modifiers}">
    <input class="checkbox__input" type="checkbox" name="checkbox" id="checkbox_2" value="option 2">
    <label class="checkbox__label" for="checkbox_2">Option 2</label>
  </div>
  <div class="{$modifiers}">
    <input class="checkbox__input" type="checkbox" name="checkbox" id="checkbox_3" value="option 3">
    <label class="checkbox__label" for="checkbox_3">Option 3</label>
  </div>
  <div class="{$modifiers}">
    <input class="checkbox__input" type="checkbox" name="checkbox" id="checkbox_4" value="option 4">
    <label class="checkbox__label" for="checkbox_4">Option 4</label>
  </div>
</div>

Styleguide 5.2.2
*/
.checkbox {
  margin-bottom: 9px; }
  .checkbox.checkbox--inline {
    float: left;
    margin-right: 30px; }

.checkbox__input {
  position: absolute;
  left: -9999px; }

.checkbox__label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 5px 2px 0 40px; }
  .checkbox__label:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 4px;
    width: 24px;
    height: 24px;
    border: 2px solid #8a8b8a;
    transition: border-color 100ms; }
  .checkbox__label:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 1px;
    width: 30px;
    height: 24.54px;
    background-position: -5541px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    transform: scale3d(0, 0, 0);
    transition: transform 100ms; }
    .no-svg .checkbox__label:after {
      background-image: url("/images/sprites/sprite.png"); }
  .checkbox__input:checked + .checkbox__label:before {
    border-color: #178a11; }
  .checkbox__input:checked + .checkbox__label:after {
    transform: scale3d(1, 1, 1); }

/*
Radio buttons

Custom form radio button elements

.radio-btn - default checkbox
.radio-btn.radio-btn--inline - inline checkboxes

markup:
<div class="form-group" role="radiogroup">
  <div class="{$modifiers}">
    <input class="radio-btn__input" type="radio" id="radio-btn_1" name="radio">
    <label class="radio-btn__label" for="radio-btn_1">Option 1</label>
  </div>
  <div class="{$modifiers}">
    <input class="radio-btn__input" type="radio" id="radio-btn_2" name="radio">
    <label class="radio-btn__label" for="radio-btn_2">Option 1</label>
  </div>
  <div class="{$modifiers}">
    <input class="radio-btn__input" type="radio" id="radio-btn_3" name="radio">
    <label class="radio-btn__label" for="radio-btn_3">Option 1</label>
  </div>
</div>

Styleguide 5.2.3
*/
.radio-btn {
  margin-bottom: 9px; }
  .radio-btn.radio-btn--inline {
    float: left;
    margin-right: 30px; }

.radio-btn__input {
  position: absolute;
  left: -9999px; }

.radio-btn__label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 5px 2px 0 35px; }
  .radio-btn__label:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 4px;
    width: 24px;
    height: 24px;
    border: 1px solid #8a8b8a;
    border-radius: 50%;
    transition: border-color 100ms; }
  .radio-btn__label:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 8px;
    width: 12px;
    height: 12px;
    background-color: #178a11;
    border-radius: 50%;
    transform: scale3d(0, 0, 0);
    transition: transform 100ms ease-in; }
  .radio-btn__input:checked + .radio-btn__label:before {
    border-color: #178a11; }
  .radio-btn__input:checked + .radio-btn__label:after {
    transform: scale3d(1, 1, 1); }

.select-day {
  width: 65px;
  float: left !important;
  margin-right: 2px; }
  @media screen and (min-width: 540px) {
    .select-day {
      width: 118px !important; } }

.select-month {
  width: 65px;
  float: left !important;
  margin-right: 2px; }
  @media screen and (min-width: 540px) {
    .select-month {
      width: 118px !important; } }

.select-year {
  width: 74px;
  float: left !important;
  margin-right: 2px; }
  @media screen and (min-width: 540px) {
    .select-year {
      width: 118px !important; } }

::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1; }

::-moz-placeholder {
  color: #ccc;
  opacity: 1; }

:-ms-input-placeholder {
  color: #ccc;
  opacity: 1; }

/*
Form Button

Validation styling for form controls

markup:
<button class="btn btn--blue form__btn">Submit form</button>

Styleguide 5.2.4
*/
.form--inline .form__btn {
  float: left; }

/*
Form validation

Validation styling for form controls

markup:
<div class="form__item">
  <input class="form__control" type="text" placeholder="e.g Tom Smith">
</div>
<div class="form__item">
  <input class="form__control input-validation-error" type="text" placeholder="e.g Tom Smith">
  <span class="field-validation-error">Please complete the form field</span>
</div>
<div class="form__item">
  <input class="form__control valid" type="text" placeholder="e.g Tom Smith">
</div>

Styleguide 5.2.5
*/
.field-validation-error {
  display: block;
  clear: both;
  font-size: 14px;
  font-size: 1.4rem;
  color: #df1e05;
  margin: 8px 0; }
  .field-validation-error:after {
    content: '';
    float: right;
    width: 18px;
    height: 17px;
    background-position: -5657px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .field-validation-error:after {
      background-image: url("/images/sprites/sprite.png"); }

/*
Components

Library of Components

Styleguide 6.0
*/
/*
Info Banners (cookie, beta etc)

Various information banners

Styleguide 6.1
*/
/*
Cookie Banner

Dismissable Cookie banner at bottom of the page, if you can't see the module below, delete your cookies :D

markup:
<div class="info-banner info-banner--cookie js-cookie-policy">
    <div class="container">
        <div class="info-banner__body">
          <div class="info-banner__text">
            <p>Cookies help us deliver our services, by using our services you agree to our use of cookies. <a class="text-link text-link--on-dark" href="#" target="_blank">Learn more</a></p>
          </div>
          <button class="btn btn--yellow js-cookie-policy-trigger">Got it</button>
        </div>
    </div>
</div>

Styleguide 6.1.1
*/
/*
Beta Banner

The beta banner that notifies users that this is a new website that is in beta stage of development

markup:
<div class="info-banner info-banner--beta">
    <div class="container">
        <div class="info-banner__body">
            <p>This is a <strong>BETA</strong> version of this service, your feedback will help us to improve it. You can provide feedback <a href="mailto:digital@nhsbt.nhs.uk?subject=Blood Donation Beta Feedback">here</a></p>
        </div>
    </div>
</div>

Styleguide 6.1.2
*/
/*
Maintenance Banner

A banner to notify user that some areas of site may be inaccesible

markup:
<div class="info-banner info-banner--maintenance">
    <div class="container">
        <div class="info-banner__body">
            <p>We appologise for any interuption to your experience, we are currently working to resolve all issues. If you find any issues please <a href="mailto:digital@nhsbt.nhs.uk?subject=Blood Donation Beta Feedback">leave feedback here</a></p>
        </div>
    </div>
</div>

Styleguide 6.1.3
*/
.info-banner {
  padding: 9px 0; }
  .info-banner.info-banner--cookie {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    z-index: 7001;
    display: none;
    color: #fff219;
    background-color: #323232; }
  .info-banner.info-banner--beta {
    color: #323232;
    background-color: #e28c05; }

.info-banner__body {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 14px;
  font-size: 1.4rem; }
  .info-banner__body:before {
    content: '';
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-right: 10px; }
    .info-banner--cookie .info-banner__body:before {
      width: 30px;
      height: 30px;
      background-position: -978px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .info-banner--cookie .info-banner__body:before {
        background-image: url("/images/sprites/sprite.png"); }
    .info-banner--beta .info-banner__body:before {
      width: 27px;
      height: 30px;
      background-position: -662px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .info-banner--beta .info-banner__body:before {
        background-image: url("/images/sprites/sprite.png"); }
    .info-banner--maintenance .info-banner__body:before {
      width: 30px;
      height: 30px;
      background-position: -6482px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .info-banner--maintenance .info-banner__body:before {
        background-image: url("/images/sprites/sprite.png"); }
  .info-banner__body p {
    margin: 0 20px 0 0; }
    .info-banner__body p a {
      color: inherit; }
      .info-banner--beta .info-banner__body p a:hover {
        color: #000; }
  .info-banner__body .text-link:after {
    margin-bottom: -2px; }
  .info-banner__body .btn {
    white-space: nowrap;
    margin-left: auto; }

.info-banner__text {
  padding-right: 10px; }

.info-banner--maintenance {
  color: #fff;
  background-color: #df1e05; }
  .info-banner--maintenance:before {
    width: 27px;
    height: 30px;
    background-position: -662px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .info-banner--maintenance:before {
      background-image: url("/images/sprites/sprite.png"); }
  .info-banner--maintenance a {
    color: #fff; }

/*
Global Header

Global header that sits at the very top of every site and page

markup:
<div class="global-header-wrapper">
  <div class="container">
    <div class="global-header">
      <a class="global-header__logo " href="/"><img src="/images/svg/nhsbt-logo-left.svg" alt="NHS Blood and Transplant Corporate Logo"></a>
      <button class="btn global-header__menu-btn js-mobile-global-nav">Auxiliary nav</button>
        <nav class="global-header__nav global-nav visually-hidden js-global-nav" aria-role="navigation">
          <ul class="global-nav__list">
            <li class="global-nav__item"><a class="global-nav__link" href="#">Lorem Ipsum</a></li>
            <li class="global-nav__item"><a class="global-nav__link" href="#">Lorem Ipsum</a></li>
            <li class="global-nav__item"><a class="global-nav__link" href="#">Lorem Ipsum</a></li>
          </ul>
      </nav>
    </div>
  </div>
</div>

Styleguide 6.2
*/
.global-header-wrapper {
  position: relative;
  z-index: 800;
  color: #000;
  background-color: #f4f4f4;
  border-top: 2px solid #c6c6c6;
  border-bottom: 2px solid #e5e5e5;
  padding: 9px 0; }

.global-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center; }
  @media screen and (min-width: 992px) {
    .global-header {
      -ms-flex-pack: start;
          justify-content: flex-start; } }

.global-header__logo {
  margin-right: 18px;
  height: 40px;
  line-height: 40px; }
  .global-header__logo img {
    height: 34px;
    margin-top: 4px; }

.global-header__menu-btn {
  width: 80px;
  height: 40px;
  text-transform: uppercase;
  font-size: 0;
  margin-left: auto; }
  .global-header__menu-btn:after {
    content: '';
    display: inline-block;
    width: 11.82px;
    height: 11.82px;
    background-position: -6552px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .global-header__menu-btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .global-header__menu-btn.is-active:after {
    width: 15px;
    height: 15px;
    background-position: -833px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .global-header__menu-btn.is-active:after {
      background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 992px) {
    .global-header__menu-btn {
      display: none; } }

.global-nav {
  position: relative; }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .global-nav {
      padding: 10px 0; } }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .global-nav {
      width: 100%;
      background: #333;
      margin-top: 15px;
      margin-bottom: -12px; }
      .global-nav:before, .global-nav:after {
        content: '';
        background: inherit;
        width: 100%;
        top: 0;
        position: absolute;
        z-index: 100px;
        height: 100%; }
      .global-nav:before {
        left: -100%; }
      .global-nav:after {
        right: -100%; }
      .global-nav.visually-hidden {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important; } }

.global-nav__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0; }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .global-nav__list {
      -ms-flex-direction: column;
          flex-direction: column; } }
  @media screen and (min-width: 540px) and (max-width: 991px) {
    .global-nav__list {
      margin-bottom: -1px; } }

.global-nav__item {
  padding: 0 10px;
  margin: 0 1px 0 -1px; }
  @media screen and (min-width: 540px) and (max-width: 991px) {
    .global-nav__item {
      -ms-flex: 1 0 25%;
          flex: 1 0 25%;
      max-width: 25%;
      border-bottom: 1px solid #fff; } }
  @media screen and (min-width: 992px) {
    .global-nav__item + .global-nav__item {
      border-left: 1px solid #000; } }

.global-nav__link {
  font-size: 14px;
  font-size: 1.4rem;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
  padding: 10px 0; }
  @media screen and (min-width: 540px) and (max-width: 991px) {
    .global-nav__link {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      height: 100%; }
      .global-nav__link:after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        display: block;
        background: #fff;
        width: 1px;
        height: 50%; }
        .global-nav__item:nth-child(4n) .global-nav__link:after {
          display: none; } }
  @media screen and (min-width: 540px) {
    .global-nav__link {
      padding: 20px; } }
  @media screen and (min-width: 992px) {
    .global-nav__link {
      color: #000;
      padding: 0; } }
  .global-nav__link:hover {
    text-decoration: underline; }

/*
Header

Coloured section above the navigation tabs

.primary-header - Default business pod
.primary-header.primary-header--blue - Blue pod
.primary-header.primary-header--red - Red pod
.primary-header.primary-header--pink - Pink pod
.primary-header.primary-header--orange - Orange pod
.primary-header.primary-header--green - Green pod
.primary-header.primary-header--purple - Purple pod

markup:
<header class="{$modifiers}">
  <div class="container">
    <button class="btn primary-header__menu-btn js-mobile-navigation">Menu</button>
    <a class="primary-header__logo" href="/"><img src="/images/raster/nhsbt-logo.png" alt="Site Logo"></a>
    <form action="/" class="form form--inline search-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
        <input name="ufprt" type="hidden"">
        <fieldset class="form__fieldset">
            <div class="form__item">
                <label class="form__label" for="SearchTerm">name</label>
                <input class="form__control" id="SearchTerm" name="SearchTerm" placeholder="Your Search Criteria Here " type="text" value="">
            </div>
            <button class="btn btn--blue form__btn search-form__btn" id="btnSearch" value="Search">Search</button>
        </fieldset>
    </form>
  </div>
</header>

Styleguide 6.3
*/
.header-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 800; }

.primary-header {
  position: relative;
  z-index: 800;
  color: #fff;
  background-color: #fff;
  border-bottom: 4px solid #75777b;
  transition: transform 200ms ease; }
  .primary-header a {
    text-decoration: none; }
    .primary-header a:hover {
      text-decoration: underline; }
  .primary-header.primary-header--blue {
    border-bottom-color: #005593; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .primary-header.primary-header--blue {
        border-bottom-color: transparent; } }
  .primary-header.primary-header--red {
    border-bottom-color: #a61704; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .primary-header.primary-header--red {
        border-bottom-color: transparent; } }
  .primary-header.primary-header--pink {
    border-bottom-color: #be2475; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .primary-header.primary-header--pink {
        border-bottom-color: transparent; } }
  .primary-header.primary-header--orange {
    border-bottom-color: #b06d04; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .primary-header.primary-header--orange {
        border-bottom-color: transparent; } }
  .primary-header.primary-header--green {
    border-bottom-color: #0f5d0b; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .primary-header.primary-header--green {
        border-bottom-color: transparent; } }
  .primary-header.primary-header--purple {
    border-bottom-color: #370059; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .primary-header.primary-header--purple {
        border-bottom-color: transparent; } }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .primary-header {
      height: 84px;
      box-shadow: 0px 6px 6px 6px rgba(0, 0, 0, 0.1);
      padding: 20px 10px 20px 10px; } }
  @media screen and (min-width: 992px) {
    .primary-header {
      padding: 18px 0; } }

.is-scrolled .global-header-wrapper + .primary-header {
  -ms-transform: translateY(-61px);
      transform: translateY(-61px); }

.primary-header__logo {
  float: left;
  height: 40px;
  line-height: 40px;
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 600;
  color: #2c2c2c;
  margin-right: 30px; }
  .primary-header--blue .primary-header__logo {
    color: #00529b; }
  .primary-header--red .primary-header__logo {
    color: #d81e05; }
  .primary-header--pink .primary-header__logo {
    color: #da3b8f; }
  .primary-header--orange .primary-header__logo {
    color: #e28c05; }
  .primary-header--green .primary-header__logo {
    color: #178a11; }
  .primary-header--purple .primary-header__logo {
    color: #56008c; }
  @media screen and (min-width: 540px) and (max-width: 991px) {
    .primary-header__logo {
      font-size: 24px; } }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .primary-header__logo {
      font-size: 18px; } }
  .primary-header__logo img {
    height: 40px; }

.primary-header__logo-text--mobile-only {
  display: block; }
  @media screen and (min-width: 992px) {
    .primary-header__logo-text--mobile-only {
      display: none; } }

.primary-header__logo-text--desktop-only {
  display: none; }
  @media screen and (min-width: 992px) {
    .primary-header__logo-text--desktop-only {
      display: block; } }

.primary-header__menu-btn {
  float: right;
  text-transform: uppercase;
  padding-left: 15px;
  padding-right: 15px; }
  .primary-header__menu-btn:after {
    content: '';
    display: inline-block;
    width: 11.82px;
    height: 11.82px;
    background-position: -6552px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin-left: 10px; }
    .no-svg .primary-header__menu-btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .primary-header__menu-btn.is-active:after {
    width: 15px;
    height: 15px;
    background-position: -778px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin: 0 0 -2px 7px; }
    .no-svg .primary-header__menu-btn.is-active:after {
      background-image: url("/images/sprites/sprite.png"); }
  .primary-header__menu-btn:hover:after, .primary-header__menu-btn:active:after {
    width: 11.82px;
    height: 11.82px;
    background-position: -6604px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .primary-header__menu-btn:hover:after, .no-svg .primary-header__menu-btn:active:after {
      background-image: url("/images/sprites/sprite.png"); }
  .primary-header__menu-btn.is-active:hover:after, .primary-header__menu-btn.is-active:active:after {
    width: 15px;
    height: 15px;
    background-position: -833px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .primary-header__menu-btn.is-active:hover:after, .no-svg .primary-header__menu-btn.is-active:active:after {
      background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 992px) {
    .primary-header__menu-btn {
      display: none; } }

/*
Header component with text title

Coloured section above the navigation tabs

.primary-header - Default business pod
.primary-header.primary-header--blue - Blue pod
.primary-header.primary-header--red - Red pod
.primary-header.primary-header--pink - Pink pod
.primary-header.primary-header--orange - Orange pod
.primary-header.primary-header--green - Green pod
.primary-header.primary-header--purple - Purple pod

markup:
<header class="{$modifiers}">
  <div class="container">
    <button class="btn primary-header__menu-btn js-mobile-navigation">Menu</button>
    <a class="primary-header__logo" href="/">NHS Blood and Transplant</a>
    <form action="/" class="form form--inline search-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
        <input name="ufprt" type="hidden"">
        <fieldset class="form__fieldset">
            <div class="form__item">
                <label class="form__label" for="SearchTerm">name</label>
                <input class="form__control" id="SearchTerm" name="SearchTerm" placeholder="Your Search Criteria Here " type="text" value="">
            </div>
            <button class="btn form__btn search-form__btn" id="btnSearch" value="Search">Search</button>
        </fieldset>
    </form>
  </div>
</header>

Styleguide 6.3.1
*/
.search-form {
  width: 100%; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .search-form {
      max-width: 630px;
      margin: 0 auto 35px; } }
  @media screen and (min-width: 992px) {
    .search-form {
      max-width: 450px;
      float: right; } }
  .search-form.search-form--on-page {
    float: none;
    max-width: none;
    border-bottom: 1px solid #00529b;
    margin: 40px auto 30px; }
    @media screen and (min-width: 0) and (max-width: 991px) {
      .search-form.search-form--on-page {
        padding: 0 10px 40px; } }
    @media screen and (min-width: 992px) {
      .search-form.search-form--on-page {
        padding: 0 0 40px; } }
  .search-form.search-form--borderless {
    border: 0; }
  @media screen and (min-width: 992px) {
    .main-navigation .search-form {
      display: none; } }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .primary-header .search-form {
      display: none; } }
  .search-form .form__item {
    max-width: none;
    width: calc(100% - 123px);
    margin: 0 13px 0 0; }
  .search-form .form__label {
    display: none; }
  .search-form .form__control {
    width: 100%;
    background-color: #f4f4f4;
    margin-right: 0; }
  .search-form.search-form--on-page .form__control {
    background-color: #fff; }

.search-form__btn {
  width: 110px;
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap; }
  .search-form__btn:after {
    content: '';
    display: inline-block;
    width: 14.03px;
    height: 14px;
    background-position: -8790px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin: 0 0 -1px 6px; }
    .no-svg .search-form__btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn.btn--blue:after, .asset-cards--blue .search-form__btn.btn:after, .form-pod--blue .search-form__btn.btn:after, .card--blue .search-form__btn.btn:after {
    width: 14.03px;
    height: 14px;
    background-position: -8845px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn.btn--blue:after, .no-svg .asset-cards--blue .search-form__btn.btn:after, .asset-cards--blue .no-svg .search-form__btn.btn:after, .no-svg .form-pod--blue .search-form__btn.btn:after, .form-pod--blue .no-svg .search-form__btn.btn:after, .no-svg .card--blue .search-form__btn.btn:after, .card--blue .no-svg .search-form__btn.btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn.btn--red:after, .asset-cards--red .search-form__btn.btn:after, .form-pod--red .search-form__btn.btn:after, .card--red .search-form__btn.btn:after {
    width: 14.03px;
    height: 14px;
    background-position: -9120px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn.btn--red:after, .no-svg .asset-cards--red .search-form__btn.btn:after, .asset-cards--red .no-svg .search-form__btn.btn:after, .no-svg .form-pod--red .search-form__btn.btn:after, .form-pod--red .no-svg .search-form__btn.btn:after, .no-svg .card--red .search-form__btn.btn:after, .card--red .no-svg .search-form__btn.btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn.btn--pink:after, .asset-cards--pink .search-form__btn.btn:after, .form-pod--pink .search-form__btn.btn:after, .card--pink .search-form__btn.btn:after {
    width: 14.03px;
    height: 14px;
    background-position: -9010px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn.btn--pink:after, .no-svg .asset-cards--pink .search-form__btn.btn:after, .asset-cards--pink .no-svg .search-form__btn.btn:after, .no-svg .form-pod--pink .search-form__btn.btn:after, .form-pod--pink .no-svg .search-form__btn.btn:after, .no-svg .card--pink .search-form__btn.btn:after, .card--pink .no-svg .search-form__btn.btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn.btn--orange:after, .asset-cards--orange .search-form__btn.btn:after, .form-pod--orange .search-form__btn.btn:after, .card--orange .search-form__btn.btn:after {
    width: 14.03px;
    height: 14px;
    background-position: -8955px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn.btn--orange:after, .no-svg .asset-cards--orange .search-form__btn.btn:after, .asset-cards--orange .no-svg .search-form__btn.btn:after, .no-svg .form-pod--orange .search-form__btn.btn:after, .form-pod--orange .no-svg .search-form__btn.btn:after, .no-svg .card--orange .search-form__btn.btn:after, .card--orange .no-svg .search-form__btn.btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn.btn--green:after, .asset-cards--green .search-form__btn.btn:after, .form-pod--green .search-form__btn.btn:after, .card--green .search-form__btn.btn:after {
    width: 14.03px;
    height: 14px;
    background-position: -8900px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn.btn--green:after, .no-svg .asset-cards--green .search-form__btn.btn:after, .asset-cards--green .no-svg .search-form__btn.btn:after, .no-svg .form-pod--green .search-form__btn.btn:after, .form-pod--green .no-svg .search-form__btn.btn:after, .no-svg .card--green .search-form__btn.btn:after, .card--green .no-svg .search-form__btn.btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn.btn--purple:after, .asset-cards--purple .search-form__btn.btn:after, .form-pod--purple .search-form__btn.btn:after, .card--purple .search-form__btn.btn:after {
    width: 14.03px;
    height: 14px;
    background-position: -9065px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn.btn--purple:after, .no-svg .asset-cards--purple .search-form__btn.btn:after, .asset-cards--purple .no-svg .search-form__btn.btn:after, .no-svg .form-pod--purple .search-form__btn.btn:after, .form-pod--purple .no-svg .search-form__btn.btn:after, .no-svg .card--purple .search-form__btn.btn:after, .card--purple .no-svg .search-form__btn.btn:after {
      background-image: url("/images/sprites/sprite.png"); }
  .search-form__btn:hover:after {
    width: 14px;
    height: 14px;
    background-position: -9175px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .search-form__btn:hover:after {
      background-image: url("/images/sprites/sprite.png"); }

/*
Main Navigation

The navigation component that draws the desktop tabs and mobile navigation

.main-navigation - Default business pod
.main-navigation.main-navigation--blue - Blue pod
.main-navigation.main-navigation--red - Red pod
.main-navigation.main-navigation--pink - Pink pod
.main-navigation.main-navigation--orange - Orange pod
.main-navigation.main-navigation--green - Green pod
.main-navigation.main-navigation--purple - Purple pod

markup:
<nav class="{$modifiers} js-main-navigation">
  <div class="container">
    <ul class="main-navigation__list-lvl-1">
      <li class="main-navigation__item-lvl-1 js-navigation-target is-active">
          <a href="/" class="main-navigation__link-lvl-1">Home</a>
      </li>
      <li class="main-navigation__item-lvl-1 js-navigation-target">
          <a href="/what-we-do/listing-page/" class="main-navigation__link-lvl-1 js-navigation-trigger">Who We Are</a>
          <button class="main-navigation__toggle-btn js-navigation-trigger">toggle next navigation level</button>
          <div class="main-navigation__wrapper main-navigation__wrapper--3-col">
            <div class="main-navigation__wrapper-inner">
                <ul class="main-navigation__list-lvl-2">
                  <li class="main-navigation__item-lvl-2 js-navigation-mobile-only">
                      <a href="/what-we-do/listing-page/" class="main-navigation__link-lvl-2">Who We Are</a>
                  </li>
                  <li class="main-navigation__item-lvl-2">
                      <a href="/who-we-are/standard-content/" class="main-navigation__link-lvl-2">Blood</a>
                      <ul class="main-navigation__list-lvl-3">
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/a/">Blood donation</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/b/">Blood transfusion</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/c/">Blood donation</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/c/">Platelet donation</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/c/">Cord blood donation</a>
                        </li>
                      </ul>
                  </li>
                </ul>
                <ul class="main-navigation__list-lvl-2">
                  <li class="main-navigation__item-lvl-2">
                      <a href="/who-we-are/standard-content/" class="main-navigation__link-lvl-2">Transportation Services</a>
                      <ul class="main-navigation__list-lvl-3">
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/a/">Organ donation and transplantation</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/b/">Stem cells</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/c/">Tissue and eye services</a>
                        </li>
                      </ul>
                  </li>
                  <li class="main-navigation__item-lvl-2">
                      <a href="/who-we-are/standard-content/" class="main-navigation__link-lvl-2">Diagnostic and theraputic services</a>
                      <ul class="main-navigation__list-lvl-3">
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/a/">Theraputic apheresis</a>
                        </li>
                      </ul>
                  </li>
                </ul>
                <ul class="main-navigation__list-lvl-2">
                  <li class="main-navigation__item-lvl-2">
                      <a href="/who-we-are/standard-content/" class="main-navigation__link-lvl-2">Clinical and research</a>
                      <ul class="main-navigation__list-lvl-3">
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/a/">Research</a>
                        </li>
                        <li class="main-navigation__item-lvl-3">
                            <a class="main-navigation__link-lvl-3" href="/who-we-are/standard-content/a/">Clinical Trials Unit</a>
                        </li>
                      </ul>
                  </li>
                </ul>
              </div>
          </div>
      </li>
      <li class="main-navigation__item-lvl-1 js-navigation-target">
          <a href="/how-we-help" class="main-navigation__link-lvl-1 js-navigation-trigger">How We Help</a>
          <button class="main-navigation__toggle-btn js-navigation-trigger">toggle next navigation level</button>
          <div class="main-navigation__wrapper main-navigation__wrapper-2-col">
            <div class="main-navigation__wrapper-inner">
              <ul class="main-navigation__list-lvl-2">
                <li class="main-navigation__item-lvl-2 js-navigation-mobile-only">
                    <a href="/how-we-help" class="main-navigation__link-lvl-2">How We Help</a>
                </li>
                <li class="main-navigation__item-lvl-2">
                    <a href="/how-we-help/test-form/" class="main-navigation__link-lvl-2">test form</a>
                </li>
              </ul>
            </div>
          </div>
      </li>
      <li class="main-navigation__item-lvl-1 js-navigation-target">
          <a href="/what-we-do" class="main-navigation__link-lvl-1 js-navigation-trigger">What We Do</a>
          <button class="main-navigation__toggle-btn js-navigation-trigger">toggle next navigation level</button>
          <div class="main-navigation__wrapper">
            <div class="main-navigation__wrapper-inner">
              <ul class="main-navigation__list-lvl-2">
                <li class="main-navigation__item-lvl-2 js-navigation-mobile-only">
                    <a href="/what-we-do" class="main-navigation__link-lvl-2">What We Do</a>
                </li>
                <li class="main-navigation__item-lvl-2">
                    <a href="/what-we-do/listing-page/" class="main-navigation__link-lvl-2">Listing Page</a>
                    <ul class="main-navigation__list-lvl-3">
                      <li class="main-navigation__item-lvl-3">
                          <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-content/">Test Content</a>
                      </li>
                      <li class="main-navigation__item-lvl-3">
                          <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-landing/">Test Landing</a>
                      </li>
                      <li class="main-navigation__item-lvl-3">
                          <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-content-2/">Test Content 2</a>
                      </li>
                      <li class="main-navigation__item-lvl-3">
                          <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-landing-2/">Test Landing 2</a>
                      </li>
                    </ul>
                </li>
              </ul>
            </div>
          </div>
      </li>
      <li class="main-navigation__item-lvl-1 js-navigation-target">
          <a href="/get-involved/" class="main-navigation__link-lvl-1">Get Involved</a>
      </li>
      <li class="main-navigation__item-lvl-1 main-navigation__item-lvl-1--overflow js-navigation-target-click-only">
          <a class="main-navigation__link-lvl-1 main-navigation__link-lvl-1--overflow js-navigation-trigger-click-only">
            More
            <span class="main-navigation__arrow"></span>
          </a>
          <button class="main-navigation__toggle-btn js-navigation-trigger-click-only">toggle next navigation level</button>
          <div class="main-navigation__wrapper main-navigation__wrapper--overflow">
            <div class="main-navigation__wrapper-inner">
              <ul class="main-navigation__list-lvl-2">
                <li class="main-navigation__item-lvl-2 main-navigation__item--overflow js-navigation-target">
                    <a class="main-navigation__link-lvl-1 js-navigation-trigger">Dropdown</a>
                    <button class="main-navigation__toggle-btn js-navigation-trigger">toggle next navigation level</button>
                    <div class="main-navigation__wrapper">
                      <div class="main-navigation__wrapper-inner">
                        <ul class="main-navigation__list-lvl-2">
                          <li class="main-navigation__item-lvl-2">
                              <a href="/what-we-do/listing-page/" class="main-navigation__link-lvl-2">Dropdown</a>
                              <ul class="main-navigation__list-lvl-3">
                                <li class="main-navigation__item-lvl-3">
                                    <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-content/">Test Content</a>
                                </li>
                                <li class="main-navigation__item-lvl-3">
                                    <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-landing/">Test Landing</a>
                                </li>
                                <li class="main-navigation__item-lvl-3">
                                    <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-content-2/">Test Content 2</a>
                                </li>
                                <li class="main-navigation__item-lvl-3">
                                    <a class="main-navigation__link-lvl-3" href="/what-we-do/listing-page/test-landing-2/">Test Landing 2</a>
                                </li>
                              </ul>
                          </li>
                        </ul>
                      </div>
                    </div>
                </li>
                <li class="main-navigation__item-lvl-2">
                  <a href="/media-centre/" class="main-navigation__link-lvl-1">Lorem Ipsum</a>
                </li>
                <li class="main-navigation__item-lvl-2">
                  <a href="/media-centre/" class="main-navigation__link-lvl-1">Lorem Ipsum</a>
                </li>
                <li class="main-navigation__item-lvl-2">
                  <a href="/media-centre/" class="main-navigation__link-lvl-1">Lorem Ipsum</a>
                </li>
                <li class="main-navigation__item-lvl-2">
                  <a href="/media-centre/" class="main-navigation__link-lvl-1">Lorem Ipsum</a>
                </li>
              </ul>
            </div>
          </div>
      </li>
    </ul>
  </div>
</nav>

sg-wrapper:
<div style="padding-bottom: 500px;">
  <sg-wrapper-content/>
  <button class="btn btn--blue primary-header__menu-btn js-mobile-navigation">Menu</button>
</div>

Styleguide 6.4
*/
.main-navigation {
  z-index: 700;
  margin: auto;
  transition: transform 200ms ease; }
  .main-navigation.main-navigation--blue {
    background-color: #0073c6; }
  .main-navigation.main-navigation--red {
    background-color: #d81e05; }
  .main-navigation.main-navigation--pink {
    background-color: #da3b8f; }
  .main-navigation.main-navigation--orange {
    background-color: #e28c05; }
  .main-navigation.main-navigation--green {
    background-color: #178a11; }
  .main-navigation.main-navigation--purple {
    background-color: #56008c; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation {
      position: absolute;
      left: -9999px;
      right: auto;
      background-color: #0072c6;
      padding: 18px 10px 30px;
      overflow: scroll;
      height: calc(100vh - 84px); }
      .main-navigation.is-active {
        left: 0;
        right: 0; } }
  @media screen and (min-width: 992px) {
    .main-navigation {
      position: relative;
      background-color: #0073c6;
      box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.25); } }
  .main-navigation a {
    text-decoration: none; }

.is-scrolled .global-header-wrapper ~ .main-navigation {
  -ms-transform: translateY(-60px);
      transform: translateY(-60px); }

@media screen and (min-width: 992px) {
  .is-scrolled .main-navigation {
    -ms-transform: translateY(-100%);
        transform: translateY(-100%); }
  .is-scrolled .global-header-wrapper ~ .main-navigation {
    -ms-transform: translateY(-162px);
        transform: translateY(-162px); } }

.main-navigation__list-lvl-1 {
  list-style-type: none;
  padding: 0;
  text-transform: uppercase; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation__list-lvl-1 {
      max-width: 500px;
      margin: 0 auto; } }
  @media screen and (min-width: 992px) {
    .main-navigation__list-lvl-1 {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      margin: 0; } }

@media screen and (min-width: 0) and (max-width: 991px) {
  .main-navigation__item-lvl-1 {
    display: block;
    position: relative;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 6px;
    margin-bottom: 5px; }
    .main-navigation__list-lvl-2 .main-navigation__item-lvl-1 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-left: none;
      border-right: none;
      margin-bottom: 0; } }

@media screen and (min-width: 992px) {
  .main-navigation__item-lvl-1 {
    display: inline-block;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    text-align: center;
    position: relative; } }

.main-navigation__item-lvl-1--overflow {
  position: static; }

@media screen and (min-width: 0) and (max-width: 991px) {
  .main-navigation__item-lvl-1.is-expanded {
    position: relative;
    z-index: 2; }
    .main-navigation--blue .main-navigation__item-lvl-1.is-expanded {
      background-color: #005593;
      border-color: #005593; }
    .main-navigation--red .main-navigation__item-lvl-1.is-expanded {
      background-color: #a61704;
      border-color: #a61704; }
    .main-navigation--pink .main-navigation__item-lvl-1.is-expanded {
      background-color: #be2475;
      border-color: #be2475; }
    .main-navigation--orange .main-navigation__item-lvl-1.is-expanded {
      background-color: #b06d04;
      border-color: #b06d04; }
    .main-navigation--green .main-navigation__item-lvl-1.is-expanded {
      background-color: #0f5d0b;
      border-color: #0f5d0b; }
    .main-navigation--purple .main-navigation__item-lvl-1.is-expanded {
      background-color: #370059;
      border-color: #370059; } }

.main-navigation__link-lvl-1 {
  position: relative;
  display: block;
  font-weight: bold; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation__link-lvl-1 {
      line-height: 1.3;
      font-size: 18px;
      font-size: 1.8rem;
      color: #00529b;
      padding: 9px 10px 8px;
      margin-right: 50px; } }
  @media screen and (min-width: 992px) {
    .main-navigation__link-lvl-1 {
      letter-spacing: 1px;
      font-size: 14px;
      font-size: 1.4rem;
      color: #fff;
      padding: 9px 18px;
      height: 100%;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center; }
      .main-navigation__link-lvl-1 + .main-navigation__link-lvl-1 {
        border-left: 1px solid #fff; } }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .is-expanded > .main-navigation__link-lvl-1 {
      color: #fff;
      padding-bottom: 10px; } }
  @media screen and (min-width: 992px) {
    .main-navigation--blue .is-hovered > .main-navigation__link-lvl-1, .main-navigation--blue .main-navigation__link-lvl-1:hover {
      background-color: #005593;
      color: #fff; }
    .main-navigation--red .is-hovered > .main-navigation__link-lvl-1, .main-navigation--red .main-navigation__link-lvl-1:hover {
      background-color: #a61704;
      color: #fff; }
    .main-navigation--pink .is-hovered > .main-navigation__link-lvl-1, .main-navigation--pink .main-navigation__link-lvl-1:hover {
      background-color: #be2475;
      color: #fff; }
    .main-navigation--orange .is-hovered > .main-navigation__link-lvl-1, .main-navigation--orange .main-navigation__link-lvl-1:hover {
      background-color: #b06d04;
      color: #fff; }
    .main-navigation--green .is-hovered > .main-navigation__link-lvl-1, .main-navigation--green .main-navigation__link-lvl-1:hover {
      background-color: #0f5d0b;
      color: #fff; }
    .main-navigation--purple .is-hovered > .main-navigation__link-lvl-1, .main-navigation--purple .main-navigation__link-lvl-1:hover {
      background-color: #370059;
      color: #fff; } }
  @media screen and (min-width: 992px) {
    .main-navigation--blue .is-active > .main-navigation__link-lvl-1 {
      background-color: #005593; }
    .main-navigation--red .is-active > .main-navigation__link-lvl-1 {
      background-color: #a61704; }
    .main-navigation--pink .is-active > .main-navigation__link-lvl-1 {
      background-color: #be2475; }
    .main-navigation--orange .is-active > .main-navigation__link-lvl-1 {
      background-color: #b06d04; }
    .main-navigation--green .is-active > .main-navigation__link-lvl-1 {
      background-color: #0f5d0b; }
    .main-navigation--purple .is-active > .main-navigation__link-lvl-1 {
      background-color: #370059; } }
  @media screen and (min-width: 992px) {
    .main-navigation--blue .is-hovered > .main-navigation__link-lvl-1--overflow,
    .main-navigation--blue .main-navigation__link-lvl-1--overflow:hover {
      color: #0073c6;
      background-color: #fff; }
    .main-navigation--red .is-hovered > .main-navigation__link-lvl-1--overflow,
    .main-navigation--red .main-navigation__link-lvl-1--overflow:hover {
      color: #d81e05;
      background-color: #fff; }
    .main-navigation--pink .is-hovered > .main-navigation__link-lvl-1--overflow,
    .main-navigation--pink .main-navigation__link-lvl-1--overflow:hover {
      color: #da3b8f;
      background-color: #fff; }
    .main-navigation--orange .is-hovered > .main-navigation__link-lvl-1--overflow,
    .main-navigation--orange .main-navigation__link-lvl-1--overflow:hover {
      color: #e28c05;
      background-color: #fff; }
    .main-navigation--green .is-hovered > .main-navigation__link-lvl-1--overflow,
    .main-navigation--green .main-navigation__link-lvl-1--overflow:hover {
      color: #178a11;
      background-color: #fff; }
    .main-navigation--purple .is-hovered > .main-navigation__link-lvl-1--overflow,
    .main-navigation--purple .main-navigation__link-lvl-1--overflow:hover {
      color: #56008c;
      background-color: #fff; } }

@media screen and (min-width: 992px) {
  .js-navigation-mobile-only {
    display: none !important; } }

@media screen and (min-width: 992px) {
  .main-navigation__item-lvl-1:not(:last-child) .main-navigation__link-lvl-1:after {
    content: "";
    position: absolute;
    top: 20%;
    right: -1px;
    background-color: #fff;
    height: 60%;
    width: 2px;
    z-index: 800; } }

.main-navigation__toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  text-indent: -9999px;
  width: 42px;
  height: 42px;
  background-color: transparent;
  border: 0;
  border-radius: 4px; }
  .main-navigation__toggle-btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background-position: -182px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin: -7px 0 0 -7px; }
    .no-svg .main-navigation__toggle-btn:before {
      background-image: url("/images/sprites/sprite.png"); }
    .is-expanded > .main-navigation__toggle-btn:before {
      width: 14px;
      height: 14px;
      background-position: -74px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .is-expanded > .main-navigation__toggle-btn:before {
        background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 992px) {
    .main-navigation__toggle-btn {
      display: none; } }

@media screen and (min-width: 992px) {
  .main-navigation__arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #fff transparent transparent transparent;
    display: inline-block;
    position: relative;
    top: -2px;
    margin-left: 0.5rem;
    transition: transform 200ms; }
    .main-navigation--blue .main-navigation__link-lvl-1:hover .main-navigation__arrow,
    .main-navigation--blue .main-navigation__link-lvl-1.is-hovered .main-navigation__arrow {
      border-top-color: #0073c6; }
    .main-navigation--red .main-navigation__link-lvl-1:hover .main-navigation__arrow,
    .main-navigation--red .main-navigation__link-lvl-1.is-hovered .main-navigation__arrow {
      border-top-color: #d81e05; }
    .main-navigation--pink .main-navigation__link-lvl-1:hover .main-navigation__arrow,
    .main-navigation--pink .main-navigation__link-lvl-1.is-hovered .main-navigation__arrow {
      border-top-color: #da3b8f; }
    .main-navigation--orange .main-navigation__link-lvl-1:hover .main-navigation__arrow,
    .main-navigation--orange .main-navigation__link-lvl-1.is-hovered .main-navigation__arrow {
      border-top-color: #e28c05; }
    .main-navigation--green .main-navigation__link-lvl-1:hover .main-navigation__arrow,
    .main-navigation--green .main-navigation__link-lvl-1.is-hovered .main-navigation__arrow {
      border-top-color: #178a11; }
    .main-navigation--purple .main-navigation__link-lvl-1:hover .main-navigation__arrow,
    .main-navigation--purple .main-navigation__link-lvl-1.is-hovered .main-navigation__arrow {
      border-top-color: #56008c; }
    .is-expanded .main-navigation__arrow {
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); } }

@media screen and (min-width: 992px) {
  .main-navigation__wrapper {
    position: absolute;
    left: -9999px;
    width: 330px;
    text-align: left; }
    .main-navigation__wrapper--2-col {
      width: 660px; }
    .main-navigation__wrapper--3-col {
      width: 990px; } }

.is-hovered > .main-navigation__wrapper {
  left: 0; }

.is-right > .main-navigation__wrapper {
  left: auto;
  right: 0; }

@media screen and (min-width: 992px) {
  .main-navigation__wrapper--overflow {
    background: #fff;
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.25);
    z-index: -10;
    width: 100%;
    display: -ms-flexbox;
    display: flex; }
    .main-navigation__wrapper--overflow .main-navigation__wrapper-inner {
      border-style: none !important;
      color: #000;
      width: 100%; }
    .main-navigation__wrapper--overflow .main-navigation__wrapper-inner .main-navigation__wrapper-inner {
      border-style: solid !important; }
    .main-navigation__wrapper--overflow .main-navigation__list-lvl-2 {
      display: -ms-flexbox;
      display: flex;
      margin: 0 6px;
      padding: 0;
      box-shadow: none !important; }
    .main-navigation__wrapper--overflow .main-navigation__item-lvl-2 {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
      text-align: center;
      box-shadow: none !important;
      position: relative; }
    .main-navigation__wrapper--overflow a {
      text-transform: uppercase; } }
    @media screen and (min-width: 992px) and (min-width: 992px) {
      .main-navigation__wrapper--overflow a:after {
        content: "";
        position: absolute;
        top: 20%;
        right: -1px;
        height: 60%;
        width: 2px;
        z-index: 800; } }

@media screen and (min-width: 992px) {
    .main-navigation--blue .main-navigation__wrapper--overflow a {
      color: #0073c6; }
      .main-navigation--blue .main-navigation__wrapper--overflow a:hover {
        color: #fff; } }
  @media screen and (min-width: 992px) and (min-width: 992px) {
    .main-navigation--blue .main-navigation__wrapper--overflow a:after {
      background-color: #0073c6 !important; } }

@media screen and (min-width: 992px) {
    .main-navigation--red .main-navigation__wrapper--overflow a {
      color: #d81e05; }
      .main-navigation--red .main-navigation__wrapper--overflow a:hover {
        color: #fff; } }
  @media screen and (min-width: 992px) and (min-width: 992px) {
    .main-navigation--red .main-navigation__wrapper--overflow a:after {
      background-color: #d81e05 !important; } }

@media screen and (min-width: 992px) {
    .main-navigation--pink .main-navigation__wrapper--overflow a {
      color: #da3b8f; }
      .main-navigation--pink .main-navigation__wrapper--overflow a:hover {
        color: #fff; } }
  @media screen and (min-width: 992px) and (min-width: 992px) {
    .main-navigation--pink .main-navigation__wrapper--overflow a:after {
      background-color: #da3b8f !important; } }

@media screen and (min-width: 992px) {
    .main-navigation--orange .main-navigation__wrapper--overflow a {
      color: #e28c05; }
      .main-navigation--orange .main-navigation__wrapper--overflow a:hover {
        color: #fff; } }
  @media screen and (min-width: 992px) and (min-width: 992px) {
    .main-navigation--orange .main-navigation__wrapper--overflow a:after {
      background-color: #e28c05 !important; } }

@media screen and (min-width: 992px) {
    .main-navigation--green .main-navigation__wrapper--overflow a {
      color: #178a11; }
      .main-navigation--green .main-navigation__wrapper--overflow a:hover {
        color: #fff; } }
  @media screen and (min-width: 992px) and (min-width: 992px) {
    .main-navigation--green .main-navigation__wrapper--overflow a:after {
      background-color: #178a11 !important; } }

@media screen and (min-width: 992px) {
    .main-navigation--purple .main-navigation__wrapper--overflow a {
      color: #56008c; }
      .main-navigation--purple .main-navigation__wrapper--overflow a:hover {
        color: #fff; } }
  @media screen and (min-width: 992px) and (min-width: 992px) {
    .main-navigation--purple .main-navigation__wrapper--overflow a:after {
      background-color: #56008c !important; } }

@media screen and (min-width: 992px) {
  .main-navigation__wrapper--overflow .main-navigation__item-lvl-2:last-of-type a:after {
    width: 0px; } }

@media screen and (min-width: 992px) {
  .main-navigation__wrapper-inner {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    display: -ms-flexbox;
    display: flex;
    background-color: #fff; }
    .main-navigation--blue .main-navigation__wrapper-inner {
      border: 2px solid #005593; }
    .main-navigation--red .main-navigation__wrapper-inner {
      border: 2px solid #a61704; }
    .main-navigation--pink .main-navigation__wrapper-inner {
      border: 2px solid #be2475; }
    .main-navigation--orange .main-navigation__wrapper-inner {
      border: 2px solid #b06d04; }
    .main-navigation--green .main-navigation__wrapper-inner {
      border: 2px solid #0f5d0b; }
    .main-navigation--purple .main-navigation__wrapper-inner {
      border: 2px solid #370059; } }

@media screen and (min-width: 0) and (max-width: 991px) {
  .is-expanded > .main-navigation__wrapper > .main-navigation__wrapper-inner > .main-navigation__list-lvl-2 {
    display: block; } }

.main-navigation__item--overflow .main-navigation__item-lvl-2 a {
  text-align: left;
  text-transform: none; }

@media screen and (min-width: 992px) {
  .main-navigation--blue .main-navigation__item--overflow .main-navigation__wrapper-inner {
    background-color: #fff; }
    .main-navigation--blue .main-navigation__item--overflow .main-navigation__wrapper-inner a {
      color: #000 !important; }
  .main-navigation--red .main-navigation__item--overflow .main-navigation__wrapper-inner {
    background-color: #fff; }
    .main-navigation--red .main-navigation__item--overflow .main-navigation__wrapper-inner a {
      color: #000 !important; }
  .main-navigation--pink .main-navigation__item--overflow .main-navigation__wrapper-inner {
    background-color: #fff; }
    .main-navigation--pink .main-navigation__item--overflow .main-navigation__wrapper-inner a {
      color: #000 !important; }
  .main-navigation--orange .main-navigation__item--overflow .main-navigation__wrapper-inner {
    background-color: #fff; }
    .main-navigation--orange .main-navigation__item--overflow .main-navigation__wrapper-inner a {
      color: #000 !important; }
  .main-navigation--green .main-navigation__item--overflow .main-navigation__wrapper-inner {
    background-color: #fff; }
    .main-navigation--green .main-navigation__item--overflow .main-navigation__wrapper-inner a {
      color: #000 !important; }
  .main-navigation--purple .main-navigation__item--overflow .main-navigation__wrapper-inner {
    background-color: #fff; }
    .main-navigation--purple .main-navigation__item--overflow .main-navigation__wrapper-inner a {
      color: #000 !important; } }

.main-navigation__list-lvl-2 {
  list-style-type: none;
  text-transform: none;
  margin: 0; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation__list-lvl-2 {
      display: none;
      background-color: #fff;
      padding: 0; }
      .main-navigation__list-lvl-2:last-of-type {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        padding: 0 0 12px; } }
  @media screen and (min-width: 992px) {
    .main-navigation__list-lvl-2 {
      padding: 0;
      -ms-flex: 1 0 325px;
          flex: 1 0 325px;
      padding: 9px 0px; }
      .main-navigation--blue .main-navigation__list-lvl-2 {
        box-shadow: 2px 0px 0px #005593; }
      .main-navigation--red .main-navigation__list-lvl-2 {
        box-shadow: 2px 0px 0px #a61704; }
      .main-navigation--pink .main-navigation__list-lvl-2 {
        box-shadow: 2px 0px 0px #be2475; }
      .main-navigation--orange .main-navigation__list-lvl-2 {
        box-shadow: 2px 0px 0px #b06d04; }
      .main-navigation--green .main-navigation__list-lvl-2 {
        box-shadow: 2px 0px 0px #0f5d0b; }
      .main-navigation--purple .main-navigation__list-lvl-2 {
        box-shadow: 2px 0px 0px #370059; } }

@media screen and (min-width: 992px) {
  .main-navigation__item-lvl-2 {
    margin-left: 2px; }
    .main-navigation--blue .main-navigation__item-lvl-2 {
      box-shadow: 0px 2px 0px #c9dbe8; }
    .main-navigation--red .main-navigation__item-lvl-2 {
      box-shadow: 0px 2px 0px #ecceca; }
    .main-navigation--pink .main-navigation__item-lvl-2 {
      box-shadow: 0px 2px 0px #f1d1e2; }
    .main-navigation--orange .main-navigation__item-lvl-2 {
      box-shadow: 0px 2px 0px #eee0ca; }
    .main-navigation--green .main-navigation__item-lvl-2 {
      box-shadow: 0px 2px 0px #cdddcc; }
    .main-navigation--purple .main-navigation__item-lvl-2 {
      box-shadow: 0px 2px 0px #d5c9dc; }
    .main-navigation__item-lvl-2:last-of-type {
      box-shadow: none; } }

.main-navigation__link-lvl-2 {
  display: block;
  font-weight: 600;
  padding: 10px 24px 10px; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation__link-lvl-2 {
      color: #2c2c2c; }
      .main-navigation__link-lvl-2:visited {
        color: #2c2c2c; } }
  @media screen and (min-width: 992px) {
    .main-navigation__link-lvl-2 {
      color: #000; }
      .main-navigation__link-lvl-2:visited {
        color: #000; }
      .main-navigation__link-lvl-2:hover, .main-navigation__link-lvl-2.is-active {
        color: #fff; }
        .main-navigation--blue .main-navigation__link-lvl-2:hover, .main-navigation--blue .main-navigation__link-lvl-2.is-active {
          background-color: #005593; }
        .main-navigation--red .main-navigation__link-lvl-2:hover, .main-navigation--red .main-navigation__link-lvl-2.is-active {
          background-color: #a61704; }
        .main-navigation--pink .main-navigation__link-lvl-2:hover, .main-navigation--pink .main-navigation__link-lvl-2.is-active {
          background-color: #be2475; }
        .main-navigation--orange .main-navigation__link-lvl-2:hover, .main-navigation--orange .main-navigation__link-lvl-2.is-active {
          background-color: #b06d04; }
        .main-navigation--green .main-navigation__link-lvl-2:hover, .main-navigation--green .main-navigation__link-lvl-2.is-active {
          background-color: #0f5d0b; }
        .main-navigation--purple .main-navigation__link-lvl-2:hover, .main-navigation--purple .main-navigation__link-lvl-2.is-active {
          background-color: #370059; } }

.main-navigation__list-lvl-3 {
  list-style-type: none;
  padding: 0; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation__list-lvl-3 {
      padding: 0;
      margin: 0; } }
  @media screen and (min-width: 992px) {
    .main-navigation__list-lvl-3 {
      padding: 0 0 5px; } }

@media screen and (min-width: 0) and (max-width: 991px) {
  .main-navigation__item-lvl-3 {
    border-top: 1px solid #f4f4f4;
    padding: 10px 0 10px 50px; } }

@media screen and (min-width: 992px) {
  .main-navigation__item-lvl-3 {
    padding: 0;
    max-width: 326px; } }

.main-navigation__link-lvl-3 {
  display: block; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .main-navigation__link-lvl-3 {
      color: #2c2c2c; }
      .main-navigation__link-lvl-3:visited {
        color: #2c2c2c; } }
  @media screen and (min-width: 992px) {
    .main-navigation__link-lvl-3 {
      color: #000;
      padding: 7px 14px 7px 50px; }
      .main-navigation__link-lvl-3:visited {
        color: #000; }
      .main-navigation__link-lvl-3:hover, .main-navigation__link-lvl-3.is-active {
        color: #fff; }
        .main-navigation--blue .main-navigation__link-lvl-3:hover, .main-navigation--blue .main-navigation__link-lvl-3.is-active {
          background-color: #005593; }
        .main-navigation--red .main-navigation__link-lvl-3:hover, .main-navigation--red .main-navigation__link-lvl-3.is-active {
          background-color: #a61704; }
        .main-navigation--pink .main-navigation__link-lvl-3:hover, .main-navigation--pink .main-navigation__link-lvl-3.is-active {
          background-color: #be2475; }
        .main-navigation--orange .main-navigation__link-lvl-3:hover, .main-navigation--orange .main-navigation__link-lvl-3.is-active {
          background-color: #b06d04; }
        .main-navigation--green .main-navigation__link-lvl-3:hover, .main-navigation--green .main-navigation__link-lvl-3.is-active {
          background-color: #0f5d0b; }
        .main-navigation--purple .main-navigation__link-lvl-3:hover, .main-navigation--purple .main-navigation__link-lvl-3.is-active {
          background-color: #370059; } }

/*
Footer

Footer section at the bottom of the page

.footer - Default business pod
.footer.footer--blue - Blue pod
.footer.footer--red - Red pod
.footer.footer--pink - Pink pod
.footer.footer--orange - Orange pod
.footer.footer--green - Green pod
.footer.footer--purple - Purple pod

markup:
<footer class="{$modifiers}">
  <div class="container">
    <nav class="footer-nav">
      <ul class="footer-nav__list">
        <li class="footer-nav__item"><a href="/privacy/" class="footer-nav__link" title="Privacy" target="_top">Privacy</a></li>
        <li class="footer-nav__item"><a href="/accessibility/" class="footer-nav__link" title="Accessibility" target="_top">Accessibility</a></li>
        <li class="footer-nav__item"><a href="/cookie-information/" class="footer-nav__link" title="Cookie Information" target="_top">Cookie Information</a></li>
        <li class="footer-nav__item"><a href="/equality-and-diversity/" class="footer-nav__link" title="Equality And Diversity" target="_top">Equality And Diversity</a></li>
        <li class="footer-nav__item"><a href="/freedom-of-information/" class="footer-nav__link" title="Freedom Of Information" target="_top">Freedom Of Information</a></li>
      </ul>
    </nav>
    <div class="footer-contact">
      <div class="footer-tel">
        <p>You can call us on: <strong class="footer-tel__number">0300 123 23 23</strong></p>
      </div>
      <div class="footer-social">
        <a class="footer-social__link" href="https://www.facebook.com/givebloodnhs/" target="_blank" title="NHSBT Facebook Page">
          <img class="footer-social__image" src="/images/raster/social-icon-facebook.png" alt="Item 1">
          <img class="footer-social__image-hover" src="/images/raster/social-icon-facebook-hover.png" alt="Item 1 hover">
        </a>
        <a class="footer-social__link" href="https://twitter.com/NHSBT" target="_blank" title="NHSBT Twitter Feed">
          <img class="footer-social__image" src="/images/raster/social-icon-twitter.png" alt="Item 2">
          <img class="footer-social__image-hover" src="/images/raster/social-icon-twitter-hover.png" alt="Item 2 hover">
        </a>
        <a class="footer-social__link" href="https://www.youtube.com/user/NHSGiveBlood" target="_blank" title="NHSBT YouTube Channel">
          <img class="footer-social__image" src="/images/raster/social-icon-youtube.png" alt="Item 3">
          <img class="footer-social__image-hover" src="/images/raster/social-icon-youtube.png" alt="Item 3 hover">
        </a>
      </div>
    </div>
    <nav class="dept-buttons">
      <ul class="dept-buttons__list">
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--red" href="https://www.blood.co.uk">
            <span class="dept-buttons__text">Give blood, blood.co.uk</span>
            <img class="dept-buttons__img" src="/images/svg/dept-icon-blood.svg">
            <img class="dept-buttons__img-hover" src="/images/svg/dept-icon-blood-white.svg">
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--pink" href="https://www.organdonation.nhs.uk/">
            <span class="dept-buttons__text">Yes I donate, Organ Donation</span>
            <img class="dept-buttons__img" src="/images/svg/dept-icon-organs.svg">
            <img class="dept-buttons__img-hover" src="/images/svg/dept-icon-organs-white.svg">
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--orange" href="http://platelets.blood.co.uk/">
            <span class="dept-buttons__text">Save a life, Give Platelets</span>
            <img class="dept-buttons__img" src="/images/svg/dept-icon-platelets.svg">
            <img class="dept-buttons__img-hover" src="/images/svg/dept-icon-platelets-white.svg">
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--purple" href="http://www.nhsbt.nhs.uk/bonemarrow/">
            <span class="dept-buttons__text">British Bone Marrow Registry</span>
            <img class="dept-buttons__img" src="/images/svg/dept-icon-bone-marrow.svg">
            <img class="dept-buttons__img-hover" src="/images/svg/dept-icon-bone-marrow-white.svg">
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--green" href="http://www.nhsbt.nhs.uk/tissuedonation/">
            <span class="dept-buttons__text">Tissue Donation</span>
            <img class="dept-buttons__img" src="/images/svg/dept-icon-tissue.svg">
            <img class="dept-buttons__img-hover" src="/images/svg/dept-icon-tissue-white.svg">
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--red" href="http://www.nhsbt.nhs.uk/cordblood/">
            <span class="dept-buttons__text">Cord Blood Bank</span>
            <img class="dept-buttons__img" src="/images/svg/dept-icon-cord-blood.svg">
            <img class="dept-buttons__img-hover" src="/images/svg/dept-icon-cord-blood-white.svg">
          </a>
        </li>
      </ul>
    </nav>
    <a class="footer__logo" href="http://www.nhsbt.nhs.uk/">
      <img src="/images/raster/nhsbt-logo.png" alt="NHS Blood and Transplant Logo">
    </a>
    <p>&nbsp;</p>
    <p class="footer__copyright">Copyright NHS Blood and Transplant ©, all rights reserved.</p>
  </div>
</footer>

Styleguide 6.11
*/
.footer {
  color: #000;
  background-color: #f4f4f4;
  padding: 12px 0 36px;
  margin-top: 72px;
  border-top: 6px solid #75777b;
  position: relative; }
  .footer a {
    text-decoration: none; }
    .footer a:hover {
      text-decoration: underline; }
  .footer.footer--blue {
    border-top-color: #0073c6; }
  .footer.footer--red {
    border-top-color: #d81e05; }
  .footer.footer--pink {
    border-top-color: #da3b8f; }
  .footer.footer--orange {
    border-top-color: #e28c05; }
  .footer.footer--green {
    border-top-color: #178a11; }
  .footer.footer--purple {
    border-top-color: #56008c; }

.footer-nav {
  text-align: center;
  margin-bottom: 18px; }

.footer-nav__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  list-style-type: none;
  padding: 4px 0 0;
  margin: 0; }

.footer-nav__item {
  line-height: 1;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 0 10px;
  margin: 0 1px 8px -1px; }
  .footer-nav__item + .footer-nav__item {
    border-left: 1px solid #000; }

.footer-nav__link {
  color: #000;
  padding: 0 5px; }

.footer-contact:before, .footer-contact:after {
  content: ' ';
  display: table; }

.footer-contact:after {
  clear: both; }

.footer-tel {
  text-align: center; }
  @media screen and (min-width: 540px) {
    .footer-tel {
      float: left;
      text-align: left; } }
  .footer-tel :last-child {
    margin-bottom: 0; }

.footer-tel__number {
  display: block;
  font-size: 40px;
  font-size: 4rem;
  line-height: 1.2;
  color: #2c2c2c; }

.footer-social {
  text-align: center; }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .footer-social {
      margin-top: 20px; } }
  @media screen and (min-width: 540px) {
    .footer-social {
      float: right;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      text-align: left;
      padding: 0 2%;
      margin-top: 6px; } }

.footer-social__link {
  display: inline-block;
  width: 48px;
  height: 48px;
  text-indent: -9999px;
  color: #fff;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50%; }
  .footer-social__link + .footer-social__link {
    margin-left: 10px; }
  .footer-social__link img {
    width: 100%; }
  .footer-social__link:hover .footer-social__image {
    display: none; }
  .footer-social__link:hover .footer-social__image-hover {
    display: block; }

.footer-social__image-hover {
  display: none; }

.dept-buttons {
  margin: 32px 0 36px; }

.dept-buttons__list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  list-style-type: none;
  padding: 0;
  margin: 0; }

.dept-buttons__item {
  width: 48%; }
  @media screen and (min-width: 420px) {
    .dept-buttons__item {
      width: 30%; } }

.dept-buttons__link {
  position: relative;
  display: block;
  min-height: 48px;
  text-align: center;
  text-decoration: none;
  color: #2c2c2c;
  background-color: #fff;
  border: 1px solid #2c2c2c;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 10px;
  margin-bottom: 12px; }
  .dept-buttons__link:hover {
    text-decoration: none; }
  .dept-buttons__link.dept-buttons__link--blue {
    color: #0073c6;
    border-color: #0073c6; }
    .dept-buttons__link.dept-buttons__link--blue:hover {
      color: #fff;
      background-color: #0073c6; }
  .dept-buttons__link.dept-buttons__link--red {
    color: #d81e05;
    border-color: #d81e05; }
    .dept-buttons__link.dept-buttons__link--red:hover {
      color: #fff;
      background-color: #d81e05; }
  .dept-buttons__link.dept-buttons__link--pink {
    color: #e0119d;
    border-color: #e0119d; }
    .dept-buttons__link.dept-buttons__link--pink:hover {
      color: #fff;
      background-color: #e0119d; }
  .dept-buttons__link.dept-buttons__link--orange {
    color: #b06d04;
    border-color: #f59c00; }
    .dept-buttons__link.dept-buttons__link--orange:hover {
      color: #2c2c2c;
      background-color: #f59c00; }
  .dept-buttons__link.dept-buttons__link--purple {
    color: #56008c;
    border-color: #56008c; }
    .dept-buttons__link.dept-buttons__link--purple:hover {
      color: #fff;
      background-color: #56008c; }
  .dept-buttons__link.dept-buttons__link--green {
    color: #006b54;
    border-color: #006b54; }
    .dept-buttons__link.dept-buttons__link--green:hover {
      color: #fff;
      background-color: #006b54; }
  .dept-buttons__link.dept-buttons__link--red {
    color: #d81e05;
    border-color: #d81e05; }
    .dept-buttons__link.dept-buttons__link--red:hover {
      color: #fff;
      background-color: #d81e05; }

.dept-buttons__text {
  opacity: 0;
  font-weight: bold; }
  .dept-buttons__link--text .dept-buttons__text {
    opacity: 1; }

.dept-buttons__img,
.dept-buttons__img-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

.dept-buttons__img {
  opacity: 1; }
  .dept-buttons__link:hover .dept-buttons__img {
    opacity: 0; }

.dept-buttons__img-hover {
  opacity: 0; }
  .dept-buttons__link:hover .dept-buttons__img-hover {
    opacity: 1; }

.footer__logo {
  float: right;
  margin-left: 20px; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .footer__logo {
      width: 110px; } }
  @media screen and (min-width: 992px) {
    .footer__logo {
      width: 168px; } }
  .footer__logo img {
    width: 100%; }

.footer__copyright {
  float: right;
  font-size: 14px;
  font-size: 1.4rem; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .footer__copyright {
      margin: 16px 0 0; } }
  @media screen and (min-width: 992px) {
    .footer__copyright {
      margin: 28px 0 0; } }

/*
Footer component without image logos

.footer - Default business pod
.footer.footer--blue - Blue pod
.footer.footer--red - Red pod
.footer.footer--pink - Pink pod
.footer.footer--orange - Orange pod
.footer.footer--green - Green pod
.footer.footer--purple - Purple pod

markup:
<footer class="{$modifiers}">
  <div class="container">
    <nav class="footer-nav">
      <ul class="footer-nav__list">
        <li class="footer-nav__item"><a href="/privacy/" class="footer-nav__link" title="Privacy" target="_top">Privacy</a></li>
        <li class="footer-nav__item"><a href="/accessibility/" class="footer-nav__link" title="Accessibility" target="_top">Accessibility</a></li>
        <li class="footer-nav__item"><a href="/cookie-information/" class="footer-nav__link" title="Cookie Information" target="_top">Cookie Information</a></li>
        <li class="footer-nav__item"><a href="/equality-and-diversity/" class="footer-nav__link" title="Equality And Diversity" target="_top">Equality And Diversity</a></li>
        <li class="footer-nav__item"><a href="/freedom-of-information/" class="footer-nav__link" title="Freedom Of Information" target="_top">Freedom Of Information</a></li>
      </ul>
    </nav>
    <div class="footer-contact">
      <div class="footer-tel">
        <p>You can call us on: <strong class="footer-tel__number">0300 123 23 23</strong></p>
      </div>
      <div class="footer-social">
        <a class="footer-social__link" href="https://www.facebook.com/givebloodnhs/" target="_blank" title="NHSBT Facebook Page">
          <img class="footer-social__image" src="/images/raster/social-icon-facebook.png" alt="Item 1">
          <img class="footer-social__image-hover" src="/images/raster/social-icon-facebook-hover.png" alt="Item 1 hover">
        </a>
        <a class="footer-social__link" href="https://twitter.com/NHSBT" target="_blank" title="NHSBT Twitter Feed">
          <img class="footer-social__image" src="/images/raster/social-icon-twitter.png" alt="Item 2">
          <img class="footer-social__image-hover" src="/images/raster/social-icon-twitter-hover.png" alt="Item 2 hover">
        </a>
        <a class="footer-social__link" href="https://www.youtube.com/user/NHSGiveBlood" target="_blank" title="NHSBT YouTube Channel">
          <img class="footer-social__image" src="/images/raster/social-icon-youtube.png" alt="Item 3">
          <img class="footer-social__image-hover" src="/images/raster/social-icon-youtube.png" alt="Item 3 hover">
        </a>
      </div>
    </div>
    <nav class="dept-buttons">
      <ul class="dept-buttons__list">
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--text dept-buttons__link--red" href="https://www.blood.co.uk">
            <span class="dept-buttons__text">Give blood, blood.co.uk</span>
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--text dept-buttons__link--pink" href="https://www.organdonation.nhs.uk/">
            <span class="dept-buttons__text">Yes I donate, Organ Donation</span>
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--text dept-buttons__link--orange" href="http://platelets.blood.co.uk/">
            <span class="dept-buttons__text">Save a life, Give Platelets</span>
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--text dept-buttons__link--purple" href="http://www.nhsbt.nhs.uk/bonemarrow/">
            <span class="dept-buttons__text">British Bone Marrow Registry</span>
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--text dept-buttons__link--green" href="http://www.nhsbt.nhs.uk/tissuedonation/">
            <span class="dept-buttons__text">Tissue Donation</span>
          </a>
        </li>
        <li class="dept-buttons__item">
          <a class="dept-buttons__link dept-buttons__link--text dept-buttons__link--red" href="http://www.nhsbt.nhs.uk/cordblood/">
            <span class="dept-buttons__text">Cord Blood Bank</span>
          </a>
        </li>
      </ul>
    </nav>
    <a class="footer__logo" href="http://www.nhsbt.nhs.uk/">
      <img src="/images/raster/nhsbt-logo.png" alt="NHS Blood and Transplant Logo">
    </a>
    <p class="footer__copyright">Copyright NHS Blood and Transplant ©, all rights reserved.</p>
  </div>
</footer>

Styleguide 6.11.1
*/
/*
Accordion

A standard accordion item

markup:
<div class="accordion">
  <button class="accordion__title js-accordion-trigger" aria-expanded="false">Apprenticeships</button>
  <div class="accordion__body js-accordion-target" aria-hidden="true">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores hic quibusdam, mollitia numquam voluptates repellat atque! Aspernatur excepturi molestias, cum animi. Vero quibusdam veniam vel vitae voluptate labore, ratione illum.</p>
  </div>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-sm-8">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 6.8
*/
.accordion {
  width: 100%;
  margin-bottom: 20px; }

.accordion__title {
  position: relative;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-size: 21px;
  font-size: 2.1rem;
  font-weight: 600;
  color: #0073c6;
  background-color: #fff;
  border: 2px solid currentColor;
  border-radius: 6px;
  padding: 10px;
  outline: none; }
  .accordion__title:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 14px;
    height: 14px;
    background-position: -182px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin-top: -7px; }
    .no-svg .accordion__title:before {
      background-image: url("/images/sprites/sprite.png"); }
  .accordion:hover .accordion__title {
    background-color: #0073c6;
    color: #fff;
    border-color: #0073c6; }
    .accordion:hover .accordion__title:before {
      width: 14px;
      height: 14px;
      background-position: -506px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .accordion:hover .accordion__title:before {
        background-image: url("/images/sprites/sprite.png"); }
  .accordion.is-active .accordion__title {
    background-color: #56008c;
    color: #fff;
    border-color: #56008c;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
    .accordion.is-active .accordion__title:before {
      width: 14px;
      height: 14px;
      background-position: -74px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .accordion.is-active .accordion__title:before {
        background-image: url("/images/sprites/sprite.png"); }
  .accordion.is-active:hover .accordion__title {
    background-color: #0073c6;
    color: #fff;
    border-color: #0073c6; }

.accordion__body {
  display: none;
  background-color: #fff;
  border: 2px solid #56008c;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 15px 10px 50px; }
  .accordion:hover .accordion__body {
    border-color: #0073c6; }
  .accordion__body :last-child {
    margin-bottom: 0; }

/*
Asset cards

Cards to display and allow download of digital assets.

.asset-cards - Default asset card
.asset-cards.asset-cards--blue - Blue asset card
.asset-cards.asset-cards--red - Red asset card
.asset-cards.asset-cards--pink - Pink asset card
.asset-cards.asset-cards--orange - Orange asset card
.asset-cards.asset-cards--green - Green asset card
.asset-cards.asset-cards--purple - Purple asset card

Styleguide 6.20

markup:
<div class="{$modifiers}">
  <div class="asset-card">
    <img src="http://placehold.it/283x200" alt="" class="asset-card__image">
    <div class="asset-card__type-banner">Infographic</div>
    <h5 class="asset-card__title">A Downloadable Asset File</h5>
    <a href="" class="btn btn--block btn--download btn--download-xls">Download <div class="btn--download-filetype">Spreadsheet</div></a>
    <div class="asset-card__controls">
      <div class="form-group asset-card__control asset-card__control--select">
        <div class="checkbox checkbox__inline"><input type="checkbox" class="checkbox__input" name="asset" id="asset-card-1"><label for="asset-card-1" class="checkbox__label">Select</label></div>
      </div>
      <div class="asset-card__control">
        <div class="share-sheet-wrapper js-share-sheet-target">
          <a href="#" class="btn btn--share btn--block js-share-sheet-trigger">Share</a>
          <div class="share-sheet">
            <a href="#" class="share-sheet__button share-sheet__button--facebook">Share via Facebook</a>
            <a href="#" class="share-sheet__button share-sheet__button--twitter">Share via Twitter</a>
            <a href="#" class="share-sheet__button share-sheet__button--linkedin">Share via LinkedIn</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="asset-card">
    <img src="http://placehold.it/283x200" alt="" class="asset-card__image">
    <div class="asset-card__type-banner">Infographic</div>
    <h5 class="asset-card__title">A Downloadable Asset File</h5>
    <a href="" class="btn btn--block btn--download btn--download-pdf">Download <div class="btn--download-filetype">Document</div></a>
    <div class="asset-card__controls">
      <div class="form-group asset-card__control asset-card__control--select">
        <div class="checkbox checkbox__inline"><input type="checkbox" class="checkbox__input" name="asset" id="asset-card-2"><label for="asset-card-2" class="checkbox__label">Select</label></div>
      </div>
      <div class="asset-card__control">
        <div class="share-sheet-wrapper js-share-sheet-target">
          <a href="#" class="btn btn--share btn--block js-share-sheet-trigger">Share</a>
          <div class="share-sheet">
            <a href="#" class="share-sheet__button share-sheet__button--facebook">Share via Facebook</a>
            <a href="#" class="share-sheet__button share-sheet__button--twitter">Share via Twitter</a>
            <a href="#" class="share-sheet__button share-sheet__button--linkedin">Share via LinkedIn</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="asset-card">
    <img src="http://placehold.it/283x200" alt="" class="asset-card__image">
    <div class="asset-card__type-banner">Infographic</div>
    <h5 class="asset-card__title">A Downloadable Asset File</h5>
    <a href="" class="btn btn--block btn--download btn--download-jpg">Download <div class="btn--download-filetype">Image</div></a>
    <div class="asset-card__controls">
      <div class="form-group asset-card__control asset-card__control--select">
        <div class="checkbox checkbox__inline"><input type="checkbox" class="checkbox__input" name="asset" id="asset-card-3"><label for="asset-card-3" class="checkbox__label">Select</label></div>
      </div>
      <div class="asset-card__control">
        <div class="share-sheet-wrapper js-share-sheet-target">
          <a href="#" class="btn btn--share btn--block js-share-sheet-trigger">Share</a>
          <div class="share-sheet">
            <a href="#" class="share-sheet__button share-sheet__button--facebook">Share via Facebook</a>
            <a href="#" class="share-sheet__button share-sheet__button--twitter">Share via Twitter</a>
            <a href="#" class="share-sheet__button share-sheet__button--linkedin">Share via LinkedIn</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
*/
.asset-cards {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  .asset-cards .btn--share {
    margin-bottom: 9px; }
    @media screen and (min-width: 992px) {
      .asset-cards .btn--share {
        margin-bottom: 0; } }

.asset-card {
  -ms-flex: 0 1 calc(50% - 9px);
      flex: 0 1 calc(50% - 9px);
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid #000; }
  .asset-cards--blue .asset-card {
    border-color: #0073c6; }
  .asset-cards--red .asset-card {
    border-color: #d81e05; }
  .asset-cards--pink .asset-card {
    border-color: #da3b8f; }
  .asset-cards--orange .asset-card {
    border-color: #e28c05; }
  .asset-cards--green .asset-card {
    border-color: #178a11; }
  .asset-cards--purple .asset-card {
    border-color: #56008c; }
  @media screen and (min-width: 992px) {
    .asset-card {
      -ms-flex: 0 1 calc(33.3% - 9px);
          flex: 0 1 calc(33.3% - 9px);
      margin-bottom: 54px; } }
  .asset-card .checkbox__label:before {
    border-color: #000; }
    .asset-cards--blue .asset-card .checkbox__label:before {
      border-color: #0073c6; }
    .asset-cards--red .asset-card .checkbox__label:before {
      border-color: #d81e05; }
    .asset-cards--pink .asset-card .checkbox__label:before {
      border-color: #da3b8f; }
    .asset-cards--orange .asset-card .checkbox__label:before {
      border-color: #e28c05; }
    .asset-cards--green .asset-card .checkbox__label:before {
      border-color: #178a11; }
    .asset-cards--purple .asset-card .checkbox__label:before {
      border-color: #56008c; }

.asset-card__image {
  width: 100%; }

.asset-card__type-banner {
  background-color: #75777b;
  padding: 4px 9px;
  font-size: 18px;
  font-size: 1.8rem;
  color: #fff;
  font-weight: bold;
  text-align: center; }
  .asset-cards--blue .asset-card__type-banner {
    background-color: #005593; }
  .asset-cards--red .asset-card__type-banner {
    background-color: #a61704; }
  .asset-cards--pink .asset-card__type-banner {
    background-color: #be2475; }
  .asset-cards--orange .asset-card__type-banner {
    background-color: #b06d04; }
  .asset-cards--green .asset-card__type-banner {
    background-color: #0f5d0b; }
  .asset-cards--purple .asset-card__type-banner {
    background-color: #370059; }

.asset-card__title {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 18px; }

.asset-card__controls {
  margin-top: 12px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }
  @media screen and (min-width: 992px) {
    .asset-card__controls {
      display: block; } }

@media screen and (min-width: 992px) {
  .asset-card__control {
    float: left;
    width: 50%;
    margin-bottom: 0; } }

.asset-card__control--select {
  -ms-flex-order: 1;
      order: 1; }

/*
Blockquote

A blockquote component that can use an image too.

markup:
<blockquote class="blockquote">
  <q class="blockquote__quote">Our ambition is to be at the forefront of the drive towards improving patient care through digital services in the NHS.</q>
  <img class="blockquote__bio-pic" src="https://nhsbtdbe.blob.core.windows.net/umbraco-assets-careers/1178/aaron_powell_quote.jpg" alt="Aaron Powell Quote">
  <h5 class="blockquote__citation">Aaron Powell</h5>
  <p class="blockquote__job">Chief Digital Officer</p>
</blockquote>

Styleguide 6.13
*/
.blockquote {
  max-width: 690px;
  text-align: center;
  border: 0;
  padding: 0;
  margin: 20px auto; }

.blockquote__quote {
  position: relative;
  display: block;
  font-size: 32px;
  font-size: 3.2rem;
  font-style: italic;
  line-height: 48px;
  padding: 20px 60px; }
  .blockquote__quote:before, .blockquote__quote:after {
    content: '';
    position: absolute; }
  .blockquote__quote:before {
    top: 0;
    left: 0;
    width: 53px;
    height: 36px;
    background-position: -5715px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .blockquote__quote:before {
      background-image: url("/images/sprites/sprite.png"); }
  .blockquote__quote:after {
    bottom: 0;
    right: 0;
    width: 53px;
    height: 36px;
    background-position: -5808px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .blockquote__quote:after {
      background-image: url("/images/sprites/sprite.png"); }

.blockquote__bio-pic {
  display: inline-block;
  margin: 10px 0 5px;
  width: 80px;
  border-radius: 50%; }

.blockquote__job {
  font-size: 20px;
  font-size: 2rem;
  font-style: italic;
  margin-bottom: 0; }

/*
Breadcrumb styles

A simple breadcrumb component that comes in two styles.

Styleguide 6.6
*/
.breadcrumb {
  position: relative;
  z-index: 590;
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 18px; }
  .breadcrumb.breadcrumb--over-hero {
    position: absolute;
    left: 0;
    right: 0; }

.breadcrumb__label {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.breadcrumb__list {
  display: inline-block;
  list-style: none;
  color: #fff;
  background-color: rgba(44, 44, 44, 0.6);
  padding: 5px 10px;
  margin: 0; }
  @media screen and (min-width: 992px) {
    .breadcrumb--over-hero .breadcrumb__list {
      margin-left: 20px; } }

.breadcrumb__item {
  display: inline-block; }
  .breadcrumb__item + .breadcrumb__item:before {
    content: '/\00a0';
    padding: 0 5px; }

.breadcrumb__link {
  display: inline-block;
  text-decoration: none;
  font-size: inherit;
  font-weight: 600;
  color: #fff; }
  .breadcrumb__link:hover {
    color: #fff; }

/*
Standard Breadcrumb

The base breadcrumb to be used most of the time.

markup:
<nav class="breadcrumb" aria-label="breadcrumbs" role="navigation">
  <p class="breadcrumb__label" id="breadcrumblabel"><strong>You are here:</strong></p>
  <ol class="breadcrumb__list" aria-labelledby="breadcrumblabel">
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="asdfasdf.html" >Level 1 item</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="asdfasdf.html" >Level 2 item</a></li>
    <li class="breadcrumb__item" >Current page item</li>
  </ol>
</nav>

Styleguide 6.6.1
*/
/*
White Breadcrumb

A fully white variant of the breadcrumb to be used on a dark background, or over an image.

markup:
<nav class="breadcrumb breadcrumb--white" aria-label="breadcrumbs" role="navigation">
  <p class="breadcrumb__label" id="breadcrumblabel"><strong>You are here:</strong></p>
  <ol class="breadcrumb__list" aria-labelledby="breadcrumblabel">
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="asdfasdf.html" >Level 1 item</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="asdfasdf.html" >Level 2 item</a></li>
    <li class="breadcrumb__item" >Current page item</li>
  </ol>
</nav>

sg-wrapper:
<div class="sg-black-bg">
  <sg-wrapper-content/>
</div>

Styleguide 6.6.2
*/
/*
Carousel

A responsive carousel for displaying items in a revolving loop.

default - Default pod
blue - Blue pod
red - Red pod
pink - Pink pod
orange - Orange pod
green - Green pod
purple - Purple pod

markup:
<div class="carousel carousel--{$modifiers}">
    <div class="carousel__items js-carousel">
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
        <div class="carousel__item">
            <div class="card profile-card card--{$modifiers}">
              <div class="card__image">
                <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
              </div>
              <div class="card__body">
                <h2 class="profile-card__heading">Michael Ambler</h2>
                <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
              </div>
            </div>
        </div>
    </div>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-sm-8">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 6.15
*/
.carousel {
  position: relative;
  padding: 0 55px;
  margin: 25px 0; }

.carousel__items {
  position: relative; }
  .carousel__items:before, .carousel__items:after {
    content: ' ';
    display: table; }
  .carousel__items:after {
    clear: both; }
  .carousel__items .slick-list {
    overflow: hidden; }
  .carousel__items--full-height .slick-track {
    display: -ms-flexbox;
    display: flex; }
  .carousel__items--full-height .card {
    margin-top: 0;
    margin-bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100%; }
    .carousel__items--full-height .card__body {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column;
      height: 100%; }
    .carousel__items--full-height .card__text {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }

.carousel__item {
  position: relative;
  z-index: 1;
  float: left;
  width: 33.33%;
  padding: 0 2px; }
  @media (min-width: 540px) {
    .carousel__item {
      width: 20%;
      padding: 0 3px; } }
  .carousel__item:hover {
    z-index: 2; }

.carousel__nav-btn {
  position: absolute;
  z-index: 3;
  top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  border-radius: 50%; }
  .carousel--blue .carousel__nav-btn {
    color: #00529b; }
    .carousel--blue .carousel__nav-btn:hover {
      background-color: #00529b;
      color: #fff; }
  .carousel--red .carousel__nav-btn {
    color: #d81e05; }
    .carousel--red .carousel__nav-btn:hover {
      background-color: #d81e05;
      color: #fff; }
  .carousel--pink .carousel__nav-btn {
    color: #da3b8f; }
    .carousel--pink .carousel__nav-btn:hover {
      background-color: #da3b8f;
      color: #fff; }
  .carousel--orange .carousel__nav-btn {
    color: #e28c05; }
    .carousel--orange .carousel__nav-btn:hover {
      background-color: #e28c05;
      color: #fff; }
  .carousel--green .carousel__nav-btn {
    color: #178a11; }
    .carousel--green .carousel__nav-btn:hover {
      background-color: #178a11;
      color: #fff; }
  .carousel--purple .carousel__nav-btn {
    color: #56008c; }
    .carousel--purple .carousel__nav-btn:hover {
      background-color: #56008c;
      color: #fff; }
  .carousel__nav-btn.slick-hidden {
    display: none; }

.carousel__nav-btn--prev {
  left: -48px; }

.carousel__nav-btn--next {
  right: -48px; }

.carousel__nav-btn-text {
  display: none; }

.carousel__nav-btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  color: inherit;
  fill: currentColor;
  -ms-transform: translateY(-50%) translateX(-50%);
      transform: translateY(-50%) translateX(-50%); }
  .carousel__nav-btn--prev .carousel__nav-btn-icon {
    margin-left: -1px; }
  .carousel__nav-btn--next .carousel__nav-btn-icon {
    margin-left: 2px; }

/*
Footer Survey

A fixed footer tab that expands to reveal a customer feedback survey.

.footer-survey - Default footer survey
.footer-survey.footer-survey--blue - Blue survey
.footer-survey.footer-survey--red - Red survey
.footer-survey.footer-survey--pink - Pink survey
.footer-survey.footer-survey--orange - Orange survey
.footer-survey.footer-survey--green - Green survey
.footer-survey.footer-survey--purple - Purple survey

markup:
<div class="{$modifiers} js-footer-survey-target">
  <div class="footer-survey__tab js-footer-survey-trigger">Give Feedback</div>
  <div class="footer-survey__hider">
    <div class="footer-survey__body">
      <h4 class="footer-survey__title h4">How was your experience today?</h4>
      <p class="footer-survey__subtitle">Please select one of the five options below:</p>
      <form class="form">
        <div class="footer-survey__reactions">
          <input class="footer-survey__reaction-radio" id="very-happy" type="radio" name="reaction" value="very-happy">
          <label class="footer-survey__reaction footer-survey__reaction--very-happy" for="very-happy">Very Happy</label>
          <input class="footer-survey__reaction-radio" id="happy" type="radio" name="reaction" value="happy">
          <label class="footer-survey__reaction footer-survey__reaction--happy" for="happy">Happy</label>
          <input class="footer-survey__reaction-radio" id="neutral" type="radio" name="reaction" value="neutral">
          <label class="footer-survey__reaction footer-survey__reaction--neutral" for="neutral">Neutral</label>
          <input class="footer-survey__reaction-radio" id="unhappy" type="radio" name="reaction" value="unhappy">
          <label class="footer-survey__reaction footer-survey__reaction--unhappy" for="unhappy">Unhappy</label>
          <input class="footer-survey__reaction-radio" id="very-unhappy" type="radio" name="reaction" value="very-unhappy">
          <label class="footer-survey__reaction footer-survey__reaction--very-unhappy" for="very-unhappy">Very Unhappy</label>
        </div>
        <div class="form__item">
          <a class="btn form__btn js-footer-survey-textarea-trigger">Want to tell us more?</a>
        </div>
        <div class="form__item footer-survey__additional-info js-footer-survey-textarea-target">
          <textarea class="form__control"></textarea>
        </div>
        <div class="form__item pull-right">
          <button class="btn btn--blue form__btn" type="submit">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

sg-wrapper:
<div class="main" style="height: 600px;">
  <sg-wrapper-content/>
</div>

Styleguide 6.18
*/
.footer-survey {
  position: absolute;
  bottom: 0;
  right: 12px;
  width: calc(100% - 24px);
  transition: max-width 300ms ease 200ms;
  z-index: 600; }
  @media screen and (min-width: 540px) {
    .footer-survey {
      max-width: 250px;
      right: 24px; } }
  .footer-survey.is-active {
    max-width: 468px;
    transition: max-width 300ms ease 0ms; }

.footer-survey__tab {
  background-color: #fff;
  border: 1px solid #75777b;
  border-bottom: 0;
  padding: 10px 12px;
  transition: background-color 200ms ease, color 100ms ease;
  cursor: pointer;
  color: #75777b;
  font-weight: bold;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px; }
  .footer-survey__tab:hover {
    background-color: #000;
    color: #fff; }
  .is-active .footer-survey__tab {
    background-color: #56008c;
    color: #fff;
    border-color: #56008c; }
  .footer-survey--blue .footer-survey__tab {
    border-color: #0073c6;
    color: #0073c6; }
  .footer-survey--blue.is-active .footer-survey__tab {
    color: #fff;
    border-color: #56008c; }
  .footer-survey--blue .footer-survey__tab:after {
    width: 14px;
    height: 14px;
    background-position: -182px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey--blue .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey--blue .footer-survey__tab:hover {
    background-color: #0073c6;
    border-color: #0073c6;
    color: #fff; }
  .footer-survey--red .footer-survey__tab {
    border-color: #d81e05;
    color: #d81e05; }
  .footer-survey--red.is-active .footer-survey__tab {
    color: #fff;
    border-color: #56008c; }
  .footer-survey--red .footer-survey__tab:after {
    width: 14px;
    height: 14px;
    background-position: -452px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey--red .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey--red .footer-survey__tab:hover {
    background-color: #d81e05;
    border-color: #d81e05;
    color: #fff; }
  .footer-survey--pink .footer-survey__tab {
    border-color: #da3b8f;
    color: #da3b8f; }
  .footer-survey--pink.is-active .footer-survey__tab {
    color: #fff;
    border-color: #56008c; }
  .footer-survey--pink .footer-survey__tab:after {
    width: 14px;
    height: 14px;
    background-position: -344px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey--pink .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey--pink .footer-survey__tab:hover {
    background-color: #da3b8f;
    border-color: #da3b8f;
    color: #fff; }
  .footer-survey--orange .footer-survey__tab {
    border-color: #e28c05;
    color: #e28c05; }
  .footer-survey--orange.is-active .footer-survey__tab {
    color: #fff;
    border-color: #56008c; }
  .footer-survey--orange .footer-survey__tab:after {
    width: 14px;
    height: 14px;
    background-position: -290px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey--orange .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey--orange .footer-survey__tab:hover {
    background-color: #e28c05;
    border-color: #e28c05;
    color: #fff; }
  .footer-survey--green .footer-survey__tab {
    border-color: #178a11;
    color: #178a11; }
  .footer-survey--green.is-active .footer-survey__tab {
    color: #fff;
    border-color: #56008c; }
  .footer-survey--green .footer-survey__tab:after {
    width: 14px;
    height: 14px;
    background-position: -236px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey--green .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey--green .footer-survey__tab:hover {
    background-color: #178a11;
    border-color: #178a11;
    color: #fff; }
  .footer-survey--purple .footer-survey__tab {
    border-color: #56008c;
    color: #56008c; }
  .footer-survey--purple.is-active .footer-survey__tab {
    color: #fff;
    border-color: #56008c; }
  .footer-survey--purple .footer-survey__tab:after {
    width: 14px;
    height: 14px;
    background-position: -398px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey--purple .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey--purple .footer-survey__tab:hover {
    background-color: #56008c;
    border-color: #56008c;
    color: #fff; }
  .footer-survey__tab:after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: -128px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg");
    margin: 0 0 -1px 12px;
    position: absolute;
    right: 10px;
    top: 15px; }
    .no-svg .footer-survey__tab:after {
      background-image: url("/images/sprites/sprite.png"); }
  .footer-survey__tab:hover:after {
    width: 14px;
    height: 14px;
    background-position: -506px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey__tab:hover:after {
      background-image: url("/images/sprites/sprite.png"); }
  .is-active .footer-survey__tab:after,
  .is-active .footer-survey__tab:hover:after {
    width: 14px;
    height: 14px;
    background-position: -74px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .is-active .footer-survey__tab:after, .no-svg
    .is-active .footer-survey__tab:hover:after {
      background-image: url("/images/sprites/sprite.png"); }

.footer-survey__hider {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out 0ms; }
  .is-active .footer-survey__hider {
    max-height: 80vh;
    transition: max-height 300ms ease-out; }
    @media screen and (min-width: 540px) {
      .is-active .footer-survey__hider {
        transition: max-height 300ms ease-out 300ms; } }

.footer-survey__body {
  background: #fff;
  padding: 24px 16px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  height: 100%;
  overflow-y: auto;
  transition: border-color 200ms ease; }
  .footer-survey--blue .footer-survey__body {
    border-color: #0073c6; }
  .footer-survey--red .footer-survey__body {
    border-color: #d81e05; }
  .footer-survey--pink .footer-survey__body {
    border-color: #da3b8f; }
  .footer-survey--orange .footer-survey__body {
    border-color: #e28c05; }
  .footer-survey--green .footer-survey__body {
    border-color: #178a11; }
  .footer-survey--purple .footer-survey__body {
    border-color: #56008c; }
  .is-active .footer-survey__body {
    border-color: #56008c; }

.footer-survey__title {
  text-align: center;
  margin-top: 0; }

.footer-survey__additional-info {
  display: none; }
  .footer-survey__additional-info.is-active {
    display: block; }

/*
Footer Survey (align to footer)

.footer-survey.footer-survey--with-footer - Aligns the survey tab with the footer.

markup:
<div style="height: 100px; position: relative;">
  <div class="footer">
    <div class="{$modifiers} js-footer-survey-target">
      <div class="footer-survey__tab js-footer-survey-trigger">Give Feedback</div>
      <div class="footer-survey__hider">
        <div class="footer-survey__body">
        </div>
      </div>
    </div>
  </div>
</div>

sg-wrapper:
<div style="height: 100px;">
  <sg-wrapper-content/>
</div>

Styleguide 6.18.1
*/
.footer-survey--with-footer {
  bottom: calc(100% + 6px); }

/*
Survey Reactions

A collection of icons to signify user satisfaction.

markup:
<div class="footer-survey__reactions">
  <input class="footer-survey__reaction-radio" id="very-happy" type="radio" name="reaction" value="very-happy">
  <label class="footer-survey__reaction footer-survey__reaction--very-happy" for="very-happy">Very Happy</label>
  <input class="footer-survey__reaction-radio" id="happy" type="radio" name="reaction" value="happy">
  <label class="footer-survey__reaction footer-survey__reaction--happy" for="happy">Happy</label>
  <input class="footer-survey__reaction-radio" id="neutral" type="radio" name="reaction" value="neutral">
  <label class="footer-survey__reaction footer-survey__reaction--neutral" for="neutral">Neutral</label>
  <input class="footer-survey__reaction-radio" id="unhappy" type="radio" name="reaction" value="unhappy">
  <label class="footer-survey__reaction footer-survey__reaction--unhappy" for="unhappy">Unhappy</label>
  <input class="footer-survey__reaction-radio" id="very-unhappy" type="radio" name="reaction" value="very-unhappy">
  <label class="footer-survey__reaction footer-survey__reaction--very-unhappy" for="very-unhappy">Very Unhappy</label>
</div>

sg-wrapper:
<div style="height: 200px;">
  <sg-wrapper-content/>
</div>

Styleguide 6.18.2
*/
.footer-survey__reactions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 20px; }

.footer-survey__reaction {
  margin: 5px;
  display: inline-block;
  text-indent: -9999px;
  cursor: pointer; }

.footer-survey__reaction-radio {
  display: none; }

.footer-survey__reaction--very-happy {
  width: 49.5px;
  height: 49.5px;
  background-position: -5845.5px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .footer-survey__reaction--very-happy {
    background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 540px) {
    .footer-survey__reaction--very-happy {
      width: 66px;
      height: 66px;
      background-position: -7794px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .footer-survey__reaction--very-happy {
        background-image: url("/images/sprites/sprite.png"); } }
  .footer-survey__reaction--very-happy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-happy {
    width: 49.5px;
    height: 49.5px;
    background-position: -5925px -15px;
    background-size: 7816.5px 105px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey__reaction--very-happy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-happy {
      background-image: url("/images/sprites/sprite.png"); }
    @media screen and (min-width: 540px) {
      .footer-survey__reaction--very-happy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-happy {
        width: 66px;
        height: 66px;
        background-position: -7900px -20px;
        background-size: 10422px 140px;
        background-image: url("/images/sprites/sprite.svg"); }
        .no-svg .footer-survey__reaction--very-happy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-happy {
          background-image: url("/images/sprites/sprite.png"); } }

.footer-survey__reaction--happy {
  width: 49.5px;
  height: 49.5px;
  background-position: -5368.5px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .footer-survey__reaction--happy {
    background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 540px) {
    .footer-survey__reaction--happy {
      width: 66px;
      height: 66px;
      background-position: -7158px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .footer-survey__reaction--happy {
        background-image: url("/images/sprites/sprite.png"); } }
  .footer-survey__reaction--happy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--happy {
    width: 49.5px;
    height: 49.5px;
    background-position: -5448px -15px;
    background-size: 7816.5px 105px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey__reaction--happy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--happy {
      background-image: url("/images/sprites/sprite.png"); }
    @media screen and (min-width: 540px) {
      .footer-survey__reaction--happy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--happy {
        width: 66px;
        height: 66px;
        background-position: -7264px -20px;
        background-size: 10422px 140px;
        background-image: url("/images/sprites/sprite.svg"); }
        .no-svg .footer-survey__reaction--happy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--happy {
          background-image: url("/images/sprites/sprite.png"); } }

.footer-survey__reaction--neutral {
  width: 49.5px;
  height: 49.5px;
  background-position: -5527.5px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .footer-survey__reaction--neutral {
    background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 540px) {
    .footer-survey__reaction--neutral {
      width: 66px;
      height: 66px;
      background-position: -7370px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .footer-survey__reaction--neutral {
        background-image: url("/images/sprites/sprite.png"); } }
  .footer-survey__reaction--neutral:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--neutral {
    width: 49.5px;
    height: 49.5px;
    background-position: -5607px -15px;
    background-size: 7816.5px 105px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey__reaction--neutral:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--neutral {
      background-image: url("/images/sprites/sprite.png"); }
    @media screen and (min-width: 540px) {
      .footer-survey__reaction--neutral:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--neutral {
        width: 66px;
        height: 66px;
        background-position: -7476px -20px;
        background-size: 10422px 140px;
        background-image: url("/images/sprites/sprite.svg"); }
        .no-svg .footer-survey__reaction--neutral:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--neutral {
          background-image: url("/images/sprites/sprite.png"); } }

.footer-survey__reaction--unhappy {
  width: 49.5px;
  height: 49.5px;
  background-position: -5686.5px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .footer-survey__reaction--unhappy {
    background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 540px) {
    .footer-survey__reaction--unhappy {
      width: 66px;
      height: 66px;
      background-position: -7582px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .footer-survey__reaction--unhappy {
        background-image: url("/images/sprites/sprite.png"); } }
  .footer-survey__reaction--unhappy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--unhappy {
    width: 49.5px;
    height: 49.5px;
    background-position: -5766px -15px;
    background-size: 7816.5px 105px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey__reaction--unhappy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--unhappy {
      background-image: url("/images/sprites/sprite.png"); }
    @media screen and (min-width: 540px) {
      .footer-survey__reaction--unhappy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--unhappy {
        width: 66px;
        height: 66px;
        background-position: -7688px -20px;
        background-size: 10422px 140px;
        background-image: url("/images/sprites/sprite.svg"); }
        .no-svg .footer-survey__reaction--unhappy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--unhappy {
          background-image: url("/images/sprites/sprite.png"); } }

.footer-survey__reaction--very-unhappy {
  width: 49.5px;
  height: 49.5px;
  background-position: -6004.5px -15px;
  background-size: 7816.5px 105px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .footer-survey__reaction--very-unhappy {
    background-image: url("/images/sprites/sprite.png"); }
  @media screen and (min-width: 540px) {
    .footer-survey__reaction--very-unhappy {
      width: 66px;
      height: 66px;
      background-position: -8006px -20px;
      background-size: 10422px 140px;
      background-image: url("/images/sprites/sprite.svg"); }
      .no-svg .footer-survey__reaction--very-unhappy {
        background-image: url("/images/sprites/sprite.png"); } }
  .footer-survey__reaction--very-unhappy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-unhappy {
    width: 49.5px;
    height: 49.5px;
    background-position: -6084px -15px;
    background-size: 7816.5px 105px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .footer-survey__reaction--very-unhappy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-unhappy {
      background-image: url("/images/sprites/sprite.png"); }
    @media screen and (min-width: 540px) {
      .footer-survey__reaction--very-unhappy:hover, .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-unhappy {
        width: 66px;
        height: 66px;
        background-position: -8112px -20px;
        background-size: 10422px 140px;
        background-image: url("/images/sprites/sprite.svg"); }
        .no-svg .footer-survey__reaction--very-unhappy:hover, .no-svg .footer-survey__reaction-radio:checked + .footer-survey__reaction--very-unhappy {
          background-image: url("/images/sprites/sprite.png"); } }

/*
Horizontal Rule

Inserts a horizontal rule onto the page.

markup:
<hr>

Styleguide 6.19
*/
hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 2px solid #0073c6;
  margin: 1em 0;
  padding: 0; }

/*
Lefthand Navigation pod

Secondary Navigation on the lefthand side of content pages.

.leftnav-pod - Default leftnav pod
.leftnav-pod.leftnav-pod--blue - Blue pod
.leftnav-pod.leftnav-pod--red - Red pod
.leftnav-pod.leftnav-pod--pink - Pink pod
.leftnav-pod.leftnav-pod--orange - Orange pod
.leftnav-pod.leftnav-pod--green - Green pod
.leftnav-pod.leftnav-pod--purple - Purple pod

markup:
<div class="{$modifiers}">
  <p class="leftnav-pod__heading">Who can give blood?</p>
  <div class="leftnav-pod__body">
    <ul>
        <li><a href="">Content Link One</a></li>
        <ul>
            <li><a href="">Sub link one</a></li>
        </ul>
        <li><a href="">Content Link Two</a></li>
        <li><a href="">Content Link Three</a></li>
    </ul>
  </div>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <sg-wrapper-content/>
  </div>
</div>

*/
.leftnav-pod {
  display: block;
  text-align: left;
  width: 100%;
  color: #2c2c2c;
  border-width: 2px;
  border-style: solid;
  border-color: inherit;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background-color: #f9f9f9;
  box-shadow: 0 0 8px rgba(91, 74, 74, 0.6);
  padding: 10px 10px 20px 10px;
  margin-bottom: 40px; }
  .leftnav-pod a {
    color: inherit;
    text-decoration: none; }
    .leftnav-pod a:hover {
      text-decoration: underline; }
  .leftnav-pod.leftnav-pod--blue {
    color: #0073c6;
    background-color: #feffff; }
  .leftnav-pod.leftnav-pod--red {
    color: #d81e05;
    background-color: #fffcfc; }
  .leftnav-pod.leftnav-pod--pink {
    color: #da3b8f;
    background-color: #fef8fb; }
  .leftnav-pod.leftnav-pod--orange {
    color: #e28c05;
    background-color: #fff8ed; }
  .leftnav-pod.leftnav-pod--green {
    color: #178a11;
    background-color: #9df298; }
  .leftnav-pod.leftnav-pod--purple {
    background-color: #d99bff;
    color: #56008c; }

.leftnav-pod__heading {
  color: inherit;
  font-weight: bold; }

.leftnav-pod__body {
  color: #2c2c2c; }

/*
Listing item teaser

A teaser item used for listing pages, i.e. news, search results etc.

.listing-item - default top aligned teaser
.listing-item.listing-item--reverse - centered aligned teaser
.listing-item.listing-item--circular - circular images (will only work properly on square images)

markup:
<a class="{$modifiers}" href="#">
  <div class="listing-item__figure">
    <img src="/images/raster/media-teaser.jpg" alt="">
  </div>
  <div class="listing-item__body">
    <header>
      <h2 class="h5 listing-item__title">Parciis ellam expliquunt accabor epraecus molupturem quam aut quae.</h2>
    </header>
    <div class="listing-item__text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit adipisci sed quia voluptates. Veniam perspiciatis asperiores atque, distinctio assumenda, odio eos sunt porro eligendi tempora inventore ipsam impedit modi.</p>
    </div>
  </div>
</a>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-sm-8">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 6.7
*/
.listing-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  text-decoration: none;
  color: #2c2c2c;
  margin-bottom: 35px; }
  .listing-item:hover {
    text-decoration: none;
    color: #2c2c2c; }

.listing-item__figure {
  width: 120px;
  margin-right: 12px; }
  @media screen and (min-width: 1200px) {
    .listing-item__figure {
      width: 144px; } }
  .listing-item--reverse .listing-item__figure {
    -ms-flex-order: 1;
        order: 1;
    margin: 0 0 0 12px; }
  .listing-item--circular .listing-item__figure {
    border-radius: 50%;
    overflow: hidden; }
  .listing-item__figure img {
    width: 100%; }

.listing-item__body {
  -ms-flex: 1;
      flex: 1; }

.listing-item__title {
  line-height: 1.2;
  margin-bottom: 5px; }
  .listing-item:hover .listing-item__title {
    text-decoration: underline;
    color: #00529b; }

.listing-item__text :last-child {
  margin-bottom: 0; }

.listing-item__text p {
  line-height: 1.3; }

/*
Loading Spinner

An animation to indicate that content is loading. Use the loading-spinner--active class to toggle its visiblity.

markup:
<div class="loading-spinner loading-spinner--active">
</div>

Styleguide 6.22
*/
.loading-spinner,
.loading-spinner:before,
.loading-spinner:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: loadingSpinner 1.8s infinite ease-in-out; }

.loading-spinner {
  color: #00529b;
  font-size: 10px;
  margin: -10px auto 41px;
  position: relative;
  text-indent: -9999em;
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  animation-delay: -0.16s;
  display: none; }
  .loading-spinner:before, .loading-spinner:after {
    content: '';
    position: absolute;
    top: 0; }
  .loading-spinner:before {
    left: -3.5em;
    animation-delay: -0.32s; }
  .loading-spinner:after {
    left: 3.5em; }

.loading-spinner--active {
  display: block; }

@keyframes loadingSpinner {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

/*
Page intro

Various page intro variations to be used at the top of a page

Styleguide 6.5
*/
/*
Standard "low-key" page intro

A large page intro with left aligned text

markup:
<div class="page-intro">
  <div class="container">
    <div class="page-intro__content">
        <h1 class="page-intro__title">Header 2; Written over two lines as seen here...</h1>
        <div class="lead-text page-intro__text">
          <p>Intro text; Written over three lines sitati alitibus volores tibusci sit laborest at opti accus que volupti sam es.</p>
        </div>
        <a class="page-intro__btn btn" href="#">Big cta here</a>
    </div>
  </div>
</div>

Styleguide 6.5.1
*/
.page-intro {
  position: relative;
  z-index: 580;
  display: block;
  margin: 36px 0 48px; }
  .container > .page-intro {
    margin-left: 0;
    margin-right: 0; }
  .page-intro.page-intro--hero {
    text-align: center;
    color: #fff;
    background-color: rgba(0, 115, 198, 0.8);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 70px 20px 60px;
    margin-top: 0;
    margin-bottom: 24px; }
  .page-intro.page-intro--white {
    color: #2c2c2c;
    background-color: #fff; }
  .page-intro.page-intro--blue {
    background-color: rgba(0, 115, 198, 0.8);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 350px; }
  .page-intro.page-intro--red {
    background-color: rgba(216, 30, 5, 0.6);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 350px; }
  .page-intro.page-intro--pink {
    background-color: rgba(218, 59, 143, 0.6);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 350px; }
  .page-intro.page-intro--orange {
    background-color: rgba(226, 140, 5, 0.6);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 350px; }
  .page-intro.page-intro--green {
    background-color: rgba(23, 138, 17, 0.6);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 350px; }
  .page-intro.page-intro--purple {
    background-color: rgba(86, 0, 140, 0.6);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 350px; }

.page-intro__content {
  max-width: 870px; }
  .page-intro--hero .page-intro__content {
    max-width: 790px;
    color: inherit;
    margin: 0 auto; }

.page-intro__title {
  color: inherit;
  margin: 0; }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .page-intro__title {
      font-size: 48px;
      font-size: 4.8rem;
      line-height: 54px; } }
  .page-intro--hero .page-intro__title {
    display: inline-block;
    background-color: rgba(0, 115, 198, 0.6);
    padding: 10px 20px;
    margin-bottom: 0; }
  .page-intro--hero.page-intro--white .page-intro__title {
    color: #2c2c2c;
    background-color: rgba(255, 255, 255, 0.6); }
  .page-intro--hero.page-intro--blue .page-intro__title {
    background-color: rgba(0, 82, 155, 0.6); }
  .page-intro--hero.page-intro--red .page-intro__title {
    background-color: rgba(216, 30, 5, 0.6); }
  .page-intro--hero.page-intro--pink .page-intro__title {
    background-color: rgba(218, 59, 143, 0.6); }
  .page-intro--hero.page-intro--orange .page-intro__title {
    background-color: rgba(226, 140, 5, 0.6); }
  .page-intro--hero.page-intro--green .page-intro__title {
    background-color: rgba(23, 138, 17, 0.6); }
  .page-intro--hero.page-intro--purple .page-intro__title {
    background-color: rgba(86, 0, 140, 0.6); }

.page-intro__icon {
  display: block;
  margin: 30px 0 40px; }

.page-intro__text {
  margin-top: 26px; }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .page-intro__text {
      font-size: 21px;
      font-size: 2.1rem;
      line-height: 24px; } }
  .page-intro--hero .page-intro__text {
    display: inline-block;
    color: inherit;
    background-color: rgba(0, 115, 198, 0.6);
    padding: 10px 20px;
    margin: 20px auto 0; }
  .page-intro--hero.page-intro--white .page-intro__text {
    color: #2c2c2c;
    background-color: rgba(255, 255, 255, 0.6); }
  .page-intro--hero.page-intro--blue .page-intro__text {
    background-color: rgba(0, 82, 155, 0.6); }
  .page-intro--hero.page-intro--red .page-intro__text {
    background-color: rgba(216, 30, 5, 0.6); }
  .page-intro--hero.page-intro--pink .page-intro__text {
    background-color: rgba(218, 59, 143, 0.6); }
  .page-intro--hero.page-intro--orange .page-intro__text {
    background-color: rgba(226, 140, 5, 0.6); }
  .page-intro--hero.page-intro--green .page-intro__text {
    background-color: rgba(23, 138, 17, 0.6); }
  .page-intro--hero.page-intro--purple .page-intro__text {
    background-color: rgba(86, 0, 140, 0.6); }
  .page-intro__text p:last-child {
    margin-bottom: 0; }

.page-intro__btn {
  font-size: 24px;
  font-size: 2.4rem;
  margin-top: 30px; }
  @media screen and (min-width: 0) and (max-width: 539px) {
    .page-intro__btn {
      padding-left: 40px;
      padding-right: 40px; } }
  @media screen and (min-width: 540px) {
    .page-intro__btn {
      padding-left: 50px;
      padding-right: 50px; } }
  .page-intro--white .page-intro__btn {
    color: inherit;
    border-color: inherit; }
  .page-intro--red .page-intro__btn:hover,
  .page-intro--pink .page-intro__btn:hover,
  .page-intro--orange .page-intro__btn:hover,
  .page-intro--green .page-intro__btn:hover,
  .page-intro--purple .page-intro__btn:hover {
    color: #2c2c2c;
    border-color: #2c2c2c; }

/*
Page intro with image

A large page intro with a background image.

markup:
<div class="page-intro page-intro--hero" style="background-image: url(/images/raster/hero-banner-bg.jpg)">
  <div class="container">
    <div class="page-intro__content">
        <h2 class="page-intro__title">Header 2; Written over two lines as seen here...</h2>
        <div class="lead-text page-intro__text">
          <p>Intro text; Written over three lines sitati alitibus volores tibusci sit laborest at opti accus que volupti sam es.</p>
        </div>
        <a class="page-intro__btn btn btn--on-dark" href="#">Big cta here</a>
    </div>
  </div>
</div>

Styleguide 6.5.2
*/
/*
Page intro with block colour

A large page intro with a solid background colour.

.page-intro.page-intro--hero - Default campaign page intro
.page-intro.page-intro--hero.page-intro--blue - Blue page intro
.page-intro.page-intro--hero.page-intro--red - Red page intro
.page-intro.page-intro--hero.page-intro--pink - Pink page intro
.page-intro.page-intro--hero.page-intro--orange - Orange page intro
.page-intro.page-intro--hero.page-intro--green - Green page intro
.page-intro.page-intro--hero.page-intro--purple - Purple page intro
.page-intro.page-intro--hero.page-intro--white - Purple page intro

markup:
<div class="{$modifiers}">
  <div class="container">
    <div class="page-intro__content">
        <h2 class="page-intro__title">Header 2; Written over two lines as seen here...</h2>
        <div class="lead-text page-intro__text">
          <p>Intro text; Written over three lines sitati alitibus volores tibusci sit laborest at opti accus que volupti sam es.</p>
        </div>
        <a class="page-intro__btn btn btn--on-dark" href="#">Big cta here</a>
    </div>
  </div>
</div>

Styleguide 6.5.3
*/
/*
Pagination

An element that can be used to paginate listing pages

markup:
<nav class="pagination" aria-label="Page navigation">
  <ul class="pagination__list" role="navigation" aria-label="Pagination">
    <li class="pagination__item">
      <a href="#" class="pagination__link pagination__link--prev" aria-label="Previous">Back</a>
    </li>
    <li class="pagination__item"><a href="#" class="pagination__link is-active">1</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">2</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">3</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">4</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">5</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">…</a></li>
    <li class="pagination__item"><a href="#" class="pagination__link">25</a></li>
    <li class="pagination__item">
      <a href="#" class="pagination__link pagination__link--next" aria-label="Next">Next</a>
    </li>
  </ul>
</nav>

Styleguide 6.9
*/
.pagination {
  text-align: center;
  margin-bottom: 20px; }

.pagination__list {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  margin: 0; }
  .pagination__list:before, .pagination__list:after {
    content: ' ';
    display: table; }
  .pagination__list:after {
    clear: both; }

.pagination__item {
  float: left;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem; }
  .pagination__item + .pagination__item {
    margin-left: 15px; }

.pagination__link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #0073c6; }
  .pagination__link.pagination__link--prev, .pagination__link.pagination__link--next {
    font-weight: 300;
    font-size: 12px;
    font-size: 1.2rem; }
    .pagination__link.pagination__link--prev:before, .pagination__link.pagination__link--next:before {
      content: '';
      display: block;
      margin: 8px auto 5px; }
  .pagination__link.pagination__link--prev:before {
    width: 12px;
    height: 12px;
    background-position: -7054px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .pagination__link.pagination__link--prev:before {
      background-image: url("/images/sprites/sprite.png"); }
  .pagination__link.pagination__link--next:before {
    width: 12px;
    height: 12px;
    background-position: -7106px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .pagination__link.pagination__link--next:before {
      background-image: url("/images/sprites/sprite.png"); }
  .pagination__link:hover, .pagination__link:hover:visited {
    text-decoration: underline;
    color: #e28c05; }
  .pagination__link:focus {
    outline: none;
    box-shadow: 0 0 0 3px #df0f9c; }
  .pagination__link:visited {
    color: #0073c6; }
  .pagination__link.is-active {
    text-decoration: underline;
    color: #56008c; }

.resource-list {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  list-style-type: none;
  padding: 0;
  margin: 0 0 50px 0; }

.resource-list__item {
  width: 47%;
  margin-bottom: 30px; }

.resource-list__link {
  text-decoration: none;
  color: #2c2c2c; }
  .resource-list__link:hover {
    text-decoration: underline;
    color: #00529b; }

.row-block__header {
  max-width: 750px;
  text-align: center;
  margin: 0 auto 30px; }

.row-block_intro {
  margin: 0; }

/*
Search result

The search result teaser

markup:
<div class="search-result">
  <header>
    <h2 class="h5 search-result__title"><a href="#">Media item title</a></h2>
    <div class="search-result__tags tags">
      <ul class="tags__list">
        <li class="tags__item"><a class="tags__link" href="#">Tag lorem 1</a></li>
        <li class="tags__item"><a class="tags__link" href="#">Tag lorem 2</a></li>
        <li class="tags__item"><a class="tags__link" href="#">Tag lorem 3</a></li>
      </ul>
    </div>
    <span class="search-result__date">5<sup>TH</sup> Sept. 2016</span>
  </header>
  <div class="search-result__intro">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit adipisci sed quia voluptates. Veniam perspiciatis asperiores atque, distinctio assumenda, odio eos sunt porro eligendi tempora inventore ipsam impedit modi&hellip;</p>
  </div>
</div>

Styleguide 6.12
*/
.search-intro {
  line-height: 0.9;
  margin-top: 0; }

.search-intro__title {
  font-weight: 300; }

.search-intro__term {
  font-weight: 600; }

@media screen and (min-width: 0) and (max-width: 991px) {
  .search-results {
    padding: 0 10px; } }

.search-result {
  margin-bottom: 54px; }

.search-result__title {
  font-weight: normal;
  color: #0073c6;
  margin-bottom: 2px; }
  .search-result__title a {
    color: inherit; }
    .search-result__title a:hover {
      font-weight: bold; }

.search-result__date {
  display: block;
  font-size: 12px;
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 2px; }
  .search-result__date sup {
    top: -0.3em; }

.search-result__intro :last-child {
  margin-bottom: 0; }

.search-result__tags {
  margin-bottom: 15px; }

.tags__list {
  list-style-type: none;
  padding: 0;
  margin: 0; }

.tags__item {
  display: inline-block; }
  .tags__item + .tags__item {
    margin-left: 10px; }

.tags__link {
  text-decoration: none;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  background-color: #0073c6;
  border-radius: 9px;
  padding: 4px 13px; }
  .tags__link:hover {
    color: #fff; }

/*
Share sheet

A share popover, used with a share button to share content via social networks or other communication methods.

.share-sheet - a standard share sheet

markup:
<div class="share-sheet-wrapper js-share-sheet-target">
  <sg-insert>4.1.5-2</sg-insert>
  <div class="{$modifiers}">
    <a href="#" class="share-sheet__button share-sheet__button--facebook">Share via Facebook</a>
    <a href="#" class="share-sheet__button share-sheet__button--twitter">Share via Twitter</a>
    <a href="#" class="share-sheet__button share-sheet__button--linkedin">Share via LinkedIn</a>
  </div>
</div>

sg-wrapper:
<div class="main" style="height: 200px; margin-left: 60px;">
  <sg-wrapper-content/>
</div>

Styleguide 6.21
*/
.share-sheet-wrapper {
  position: relative; }

.share-sheet {
  background-color: #353940;
  border-radius: 18px;
  padding: 10px 25px;
  min-width: 180px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  .share-sheet:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -8px;
    right: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #353940 transparent; }
  .is-active .share-sheet {
    display: -ms-flexbox;
    display: flex; }

.share-sheet__button {
  text-indent: -9999px;
  content: "";
  display: inline-block; }

.share-sheet__button--facebook {
  width: 36px;
  height: 36px;
  background-position: -5465px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .share-sheet__button--facebook {
    background-image: url("/images/sprites/sprite.png"); }

.share-sheet__button--twitter {
  width: 36px;
  height: 36px;
  background-position: -10366px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .share-sheet__button--twitter {
    background-image: url("/images/sprites/sprite.png"); }

.share-sheet__button--linkedin {
  width: 36px;
  height: 36px;
  background-position: -5901px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .share-sheet__button--linkedin {
    background-image: url("/images/sprites/sprite.png"); }

/*
Site Map

The search result teaser

markup:
<div class="search-result">
  <header>
    <h2 class="h5 search-result__title"><a href="#">Media item title</a></h2>
    <div class="search-result__tags tags">
      <ul class="tags__list">
        <li class="tags__item"><a class="tags__link" href="#">Tag lorem 1</a></li>
        <li class="tags__item"><a class="tags__link" href="#">Tag lorem 2</a></li>
        <li class="tags__item"><a class="tags__link" href="#">Tag lorem 3</a></li>
      </ul>
    </div>
    <span class="search-result__date">5<sup>TH</sup> Sept. 2016</span>
  </header>
  <div class="search-result__intro">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit adipisci sed quia voluptates. Veniam perspiciatis asperiores atque, distinctio assumenda, odio eos sunt porro eligendi tempora inventore ipsam impedit modi&hellip;</p>
  </div>
</div>

Styleguide 6.14
*/
.site-map__list {
  padding-left: 20px; }
  .site-map > .site-map__list {
    padding: 0;
    margin: 0; }
  .site-map > .site-map__list > .site-map__item > .site-map__list {
    margin-bottom: 25px; }
  .site-map__list .site-map__list {
    margin-top: 10px; }

.site-map__item {
  list-style-type: disc;
  padding: 0;
  margin: 0; }
  .site-map__item .site-map__item {
    list-style-type: disc;
    margin-bottom: 20px; }
    .site-map__item .site-map__item .site-map__item {
      margin-bottom: 10px; }

.site-map__link {
  display: inline-block;
  font-weight: bold; }
  .site-map > .site-map__list > .site-map__item > .site-map__link {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 32px;
    margin-bottom: 25px; }

.stats-block__controls {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #005593; }

.stats-block__results {
  margin-bottom: 36px; }

.stats-block__download {
  text-align: center;
  margin-bottom: 18px; }
  .stats-block__download .btn {
    min-width: 315px; }

/*
Tables

Styling for tables and tabular data.

markup:
<div class="table">
  <div class="table__row table__row--header">
    <div class="table__cell table__cell--header table__cell--width-5">
      Report title
    </div>
    <div class="table__cell table__cell--header">
      File type
    </div>
    <div class="table__cell table__cell--header">
      Updated date
    </div>
    <div class="table__cell table__cell--header">
      Created data
    </div>
  </div>
  <div class="table__row">
    <a href="#" class="table__cell table__cell--subheader">Selecting appropriate Cornea for donor recipient</a>
    <div class="table__cell">
      <div class="table__cell-inline-header">File type</div>
      PDF
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Updated date</div>
      14-11-2016
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Created date</div>
      13-11-2013
    </div>
  </div>
  <div class="table__row">
    <a href="#" class="table__cell table__cell--subheader">Donor optimisation for Cornea</a>
    <div class="table__cell">
      <div class="table__cell-inline-header">File type</div>
      DOC
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Updated date</div>
      13-11-2012
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Created date</div>
      13-09-2011
    </div>
  </div>
  <div class="table__row">
    <a href="#" class="table__cell table__cell--subheader">Donor optimisation for Cornea patients in the South West of England</a>
    <div class="table__cell">
      <div class="table__cell-inline-header">File type</div>
      DOC
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Updated date</div>
      10-12-2010
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Created date</div>
      10-08-2009
    </div>
  </div>
</div>

Styleguide 6.17.0
*/
@media screen and (min-width: 992px) {
  .table:not(.table--alternate) {
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #333; } }

.table__row {
  border: 1px solid #333;
  padding: 8px;
  margin-bottom: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .table__row--header {
    display: none; }
  @media screen and (min-width: 992px) {
    .table:not(.table--alternate) .table__row {
      border: none;
      padding: 0;
      margin: 0;
      display: table-row; } }

.table__cell {
  font-size: 18px;
  font-weight: bold;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 8px; }
  @media screen and (min-width: 992px) {
    .table:not(.table--alternate) .table__cell {
      display: table-cell;
      font-size: 14px;
      font-weight: normal;
      padding: 16px;
      border: 1px solid #eee; } }
  .table__cell--header {
    font-size: 24px;
    font-weight: bold;
    vertical-align: middle; }
    @media screen and (min-width: 992px) {
      .table:not(.table--alternate) .table__cell--header {
        font-size: 20px;
        padding: 24px 16px;
        border: 1px solid #333;
        background-color: #005593;
        color: #fff; } }
  .table__cell--subheader {
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    padding-bottom: 7px; }
    .table__cell--subheader[href] {
      color: #0073c6;
      text-decoration: none; }
    @media screen and (min-width: 992px) {
      .table:not(.table--alternate) .table__cell--subheader {
        font-size: 14px;
        width: auto; } }
  .table__cell-inline-header {
    font-size: 14px;
    font-weight: normal; }
    .table__cell-inline-header:after {
      content: ":"; }
    @media screen and (min-width: 992px) {
      .table:not(.table--alternate) .table__cell-inline-header {
        display: none; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table a.table__cell {
    text-decoration: underline; }
    .table:not(.table--alternate) .table a.table__cell:hover {
      text-decoration: underline;
      color: #0073c6; }
    .table:not(.table--alternate) .table a.table__cell:focus {
      text-decoration: underline; } }

/*
Alternate Table

.table.table--alternate - An alternate display mode for tables, which forces the mobile display even on desktop.

markup:
<div class="{$modifiers}">
  <div class="table__row table__row--header">
    <div class="table__cell table__cell--header table__cell--width-6">Column 1</div>
    <div class="table__cell table__cell--header">Column 2</div>
    <div class="table__cell table__cell--header">Column 3</div>
  </div>
  <div class="table__row">
    <div class="table__cell table__cell--subheader">
      Content
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Column header</div>
      Content
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Column header</div>
      Content
    </div>
  </div>
</div>

Styleguide 6.17.1
*/
/*
Column Widths

Columns will be equal width unless you add a class to a cell in the top row of the table. Generally, you would apply the width to the header row, and allow the rest of the table to size itself automatically.
These classes only apply to tablet and desktop - they will be ignored on mobile, where all cells will size themselves to fill the available space.

markup:
<div class="table">
  <div class="table__row">
    <div class="table__cell">Default</div>
    <div class="table__cell">Default</div>
    <div class="table__cell">Default</div>
    <div class="table__cell">Default</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-4">40%</div>
    <div class="table__cell">Default</div>
    <div class="table__cell">Default</div>
    <div class="table__cell">Default</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-1">10%</div>
    <div class="table__cell table__cell--width-2">20%</div>
    <div class="table__cell table__cell--width-3">30%</div>
    <div class="table__cell table__cell--width-4">40%</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-5">50%</div>
    <div class="table__cell table__cell--width-5">50%</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-6">60%</div>
    <div class="table__cell table__cell--width-4">40%</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-7">70%</div>
    <div class="table__cell table__cell--width-3">30%</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-8">80%</div>
    <div class="table__cell table__cell--width-2">20%</div>
  </div>
</div>
<div class="table">
  <div class="table__row">
    <div class="table__cell table__cell--width-9">90%</div>
    <div class="table__cell table__cell--width-1">10%</div>
  </div>
</div>
<hr>
<div class="table">
  <div class="table__row table__row--header">
    <div class="table__cell table__cell--header table__cell--width-6">Column 1</div>
    <div class="table__cell table__cell--header">Column 2</div>
    <div class="table__cell table__cell--header">Column 3</div>
  </div>
  <div class="table__row">
    <div class="table__cell table__cell--subheader">
      Content
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Column header</div>
      Content
    </div>
    <div class="table__cell">
      <div class="table__cell-inline-header">Column header</div>
      Content
    </div>
  </div>
</div>

Styleguide 6.17.2
*/
@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-1 {
    width: 10%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-2 {
    width: 20%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-3 {
    width: 30%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-4 {
    width: 40%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-5 {
    width: 50%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-6 {
    width: 60%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-7 {
    width: 70%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-8 {
    width: 80%; } }

@media screen and (min-width: 992px) {
  .table:not(.table--alternate) .table__cell--width-9 {
    width: 90%; } }

/*
Timeline

A component for displaying linked, time-based data.

markup:
<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2011</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item timeline-item--even">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2012</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2013</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item timeline-item--even">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2014</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2015</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item timeline-item--even">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2016</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2017</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Styleguide 6.23.1
*/
.timeline {
  position: relative; }
  .timeline:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #005593;
    position: absolute;
    top: 0;
    z-index: -1;
    left: calc(50% - 1px); }

.timeline-item:last-of-type {
  background-color: #fff; }

.timeline-item__container {
  max-width: 400px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 18px;
  text-align: center;
  margin: 20px auto 54px;
  position: relative; }
  .timeline-item__container:before, .timeline-item__container:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .timeline-item__container:before {
    border-color: rgba(51, 51, 51, 0);
    border-bottom-color: #333;
    border-width: 21px;
    margin-left: -21px; }
  .timeline-item__container:after {
    border-color: rgba(0, 82, 155, 0);
    border-bottom-color: #00529b;
    border-width: 20px;
    margin-left: -20px; }

.timeline-item__icon-ring {
  width: 65px;
  height: 65px;
  background: #fff;
  border-radius: 50%;
  border: 4px solid #005593;
  margin: 0px auto;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }

.timeline-item__icon {
  width: 28px;
  height: 31.59px;
  background-position: -10298px -20px;
  background-size: 10422px 140px;
  background-image: url("/images/sprites/sprite.svg"); }
  .no-svg .timeline-item__icon {
    background-image: url("/images/sprites/sprite.png"); }

.timeline-item__header {
  background-color: #00529b;
  color: #fff;
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: bold;
  padding: 4px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px; }

.timeline-item__body {
  padding: 9px; }
  .timeline-item__body .h5 {
    margin: 4px 0px; }

/*
Timeline (Full width)

A timeline that stretches across an entire page.

markup:
<div class="timeline timeline--full-width">
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2011</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item timeline-item--even">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2012</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2013</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item timeline-item--even">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2014</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2015</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item timeline-item--even">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2016</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-item__icon-ring">
      <div class="timeline-item__icon"></div>
    </div>
    <div class="timeline-item__container">
      <div class="timeline-item__header">2017</div>
      <div class="timeline-item__body">
        <h5 class="h5">Heading 5</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Styleguide 6.23.2
*/
@media screen and (min-width: 992px) {
  .timeline--full-width .timeline-item__container {
    margin: 0 0 54px;
    border-top-right-radius: 0;
    left: calc(50% - 475px); }
    .timeline--full-width .timeline-item__container:before, .timeline--full-width .timeline-item__container:after {
      left: 100%;
      top: 0; }
    .timeline--full-width .timeline-item__container:before {
      border-bottom-color: transparent;
      border-left-color: #333;
      border-width: 33px;
      margin-left: 0;
      margin-top: -2px; }
    .timeline--full-width .timeline-item__container:after {
      border-bottom-color: transparent;
      border-left-color: #00529b;
      border-width: 32px;
      margin-top: -1px;
      margin-left: 0; }
  .timeline--full-width .timeline-item__icon-ring {
    position: absolute;
    left: calc(50% - 32.5px); }
  .timeline--full-width .timeline-item__header {
    border-top-right-radius: 0; }
  .timeline--full-width .timeline-item--even .timeline-item__container {
    border-top-left-radius: 0;
    border-top-right-radius: 18px;
    left: calc(50% + 75px); }
    .timeline--full-width .timeline-item--even .timeline-item__container:before, .timeline--full-width .timeline-item--even .timeline-item__container:after {
      left: auto;
      right: 100%; }
    .timeline--full-width .timeline-item--even .timeline-item__container:before {
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: #333;
      border-width: 32px;
      margin-top: -1px;
      margin-right: 0; }
    .timeline--full-width .timeline-item--even .timeline-item__container:after {
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: #00529b;
      border-width: 31px;
      margin-top: 0px;
      margin-right: 0; }
  .timeline--full-width .timeline-item--even .timeline-item__header {
    border-top-left-radius: 0;
    border-top-right-radius: 18px; } }

.transaction-page__search {
  float: none;
  max-width: none;
  margin: 40px auto 0px; }
  .transaction-page__search .form__control {
    background-color: #fff; }

.transaction-page__search-results {
  margin-bottom: 54px; }

.transaction-page__button-row-1 {
  margin-bottom: 18px; }

.transaction-page__button-row-2 {
  padding-bottom: 54px;
  margin-bottom: 36px;
  border-bottom: 1px solid #0073c6; }

/*
Twitter widget

<p style="max-width: 600px;">For extra config options, <a href="https://dev.twitter.com/web/embedded-timelines" target="_self">see documentation</a>.</p>

markup:
<div class="twitter-widget-container">
  <div class="twitter-widget">
    <a class="twitter-timeline"
      href="https://twitter.com/NHSBTCareers/lists/nhs-blood-and-transplant"
      data-widget-id="735429414222237696"
      data-link-color="#0073c6"
      data-border-color="#00529b"
      data-chrome="nofooter"
      data-width="600"
      data-height="800">
      Tweets from https://twitter.com/NHSBTCareers/lists/nhs-blood-and-transplant
    </a>
    <script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs");</script>
  </div>
</div>

Styleguide 6.10
*/
a.twitter-timeline {
  display: inline-block;
  padding: 10px; }

.twitter-widget-container {
  text-align: center;
  margin: 0 auto; }

.twitter-widget {
  display: inline-block;
  overflow: hidden;
  border: 1px solid #00529b;
  border-radius: 6px;
  margin: 34px; }
  .twitter-widget > iframe {
    display: block !important;
    margin-bottom: -2px !important; }

/*
Article teasers

Article teaser pods for both featured articles and standard article teaser listing

Styleguide 7.3
*/
/*
Featured Article Teaser

A utility pod that can be used for representing information/teasers in a card format, with or without a picture

.article.article--featured - Default media pod
.article.article--featured.article--blue - Blue pod
.article.article--featured.article--red - Red pod
.article.article--featured.article--pink - Pink pod
.article.article--featured.article--orange - Orange pod
.article.article--featured.article--green - Green pod
.article.article--featured.article--purple - Purple pod

markup:
<a href="#" class="{$modifiers}">
  <div class="article__image">
    <img src="https://nhsbtdbe.blob.core.windows.net/umbraco-assets-careers-dev/1118/nurse2_carousel.jpg" alt="Nurse">
  </div>
  <div class="article__body">
    <div class="article__text">
      <h3 class="h5 article__heading" data-mh="article-heading">Faffing can be fatal, loafing can be lethal.</h3>
      <p data-mh="article-intro">Public urged: What are you waiting for - take a few minutes this Christmas to join the NHS Organ Donor Register.</p>
    </div>
    <span class="article__date">6th December. 2016</span>
  </div>
</a>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.3.1
*/
.article {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #2c2c2c;
  margin-bottom: 18px; }
  .article:hover {
    text-decoration: none;
    color: inherit; }
  .article:focus {
    outline: none;
    box-shadow: 0 0 0 3px #df0f9c; }
  .article.article--featured {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    margin-bottom: 30px; }
  .article.article--blue {
    color: #0073c6; }
  .article.article--red {
    color: #d81e05; }
  .article.article--pink {
    color: #da3b8f; }
  .article.article--orange {
    color: #e28c05; }
  .article.article--green {
    color: #178a11; }
  .article.article--purple {
    color: #56008c; }
  .media-panel__items .article {
    position: relative;
    min-height: 1px;
    padding-left: 6px;
    padding-right: 6px;
    position: relative;
    min-height: 1px;
    padding-left: 6px;
    padding-right: 6px; }
    @media (min-width: 540px) {
      .media-panel__items .article {
        float: left;
        width: 50%; } }
    @media (min-width: 992px) {
      .media-panel__items .article {
        float: left;
        width: 100%; } }

.article__image img {
  width: 100%; }

.article__body {
  color: inherit;
  padding: 15px; }
  .article__body p {
    color: #2c2c2c; }

.article__text {
  color: inherit; }
  .article__text :last-child {
    margin-bottom: 0; }

.article__heading {
  line-height: 1.2;
  margin-bottom: 10px; }
  .article:hover .article__heading {
    color: inherit;
    text-decoration: underline; }

.article__date {
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  font-style: italic;
  color: #2c2c2c;
  margin-top: 5px; }
  .article__date:before {
    content: '';
    display: inline-block;
    margin-right: 6px;
    width: 9px;
    height: 10px;
    background-position: -729px -20px;
    background-size: 10422px 140px;
    background-image: url("/images/sprites/sprite.svg"); }
    .no-svg .article__date:before {
      background-image: url("/images/sprites/sprite.png"); }
  .article--featured .article__date {
    margin-top: 10px; }

/*
Standard Article Teaser

A utility pod that can be used for representing information/teasers in a card format, without a picture

.article - Default media pod
.article.article--blue - Blue pod
.article.article--red - Red pod
.article.article--pink - Pink pod
.article.article--orange - Orange pod
.article.article--green - Green pod
.article.article--purple - Purple pod

markup:
<a href="#" class="{$modifiers}">
  <div class="article__text">
    <h3 class="h5 article__heading" data-mh="article-heading">Faffing can be fatal, loafing can be lethal.</h3>
  </div>
  <span class="article__date">6th December. 2016</span>
</a>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.3.2
*/
.media-panel__items {
  box-sizing: border-box;
  margin-left: -6px;
  margin-right: -6px; }
  .media-panel__items:before, .media-panel__items:after {
    content: ' ';
    display: table; }
  .media-panel__items:after {
    clear: both; }
  @media screen and (min-width: 0) and (max-width: 991px) {
    .media-panel__items:before {
      content: '';
      display: block;
      width: 200px;
      border-top: 2px solid #0073c6;
      margin: 0 auto 30px; } }

/*
Pods

Library of Pods

Styleguide 7.0
*/
/*
Business Area CTA pod

Main CTA located below the Hero Banner on homepages

.business-pod - Default business pod
.business-pod.business-pod--blue - Blue pod
.business-pod.business-pod--red - Red pod
.business-pod.business-pod--pink - Pink pod
.business-pod.business-pod--orange - Orange pod
.business-pod.business-pod--green - Green pod
.business-pod.business-pod--purple - Purple pod

markup:
<a class="{$modifiers}" href="#" target="">
  <div class="business-pod__image">
    <img class="business-pod__image-1" src="/images/raster/business-pod-icon.png">
    <img class="business-pod__image-2" src="/images/raster/business-pod-icon-white.png">
  </div>
  <h3 class="h4 business-pod__heading">Header 4; Title over two lines</h3>
  <div class="business-pod__text">
    <p>Pioneering clinical trials and life changing research. Adiam faciis cusam quis mincim es ius.</p>
  </div>
  <span class="btn">Register now</span>
</a>

sg-wrapper:
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.1
*/
.business-pods {
  margin-bottom: 18px; }
  @media screen and (min-width: 540px) {
    .business-pods {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -ms-flex-pack: center;
          justify-content: center; } }
  @media screen and (min-width: 992px) {
    .business-pods {
      margin-left: -1.65%;
      margin-right: -1.65%;
      margin-top: 24px; } }

.business-pod {
  display: block;
  text-decoration: none;
  color: #2c2c2c;
  background-color: inherit;
  border-width: 2px;
  border-style: solid;
  border-color: #2c2c2c;
  border-radius: 18px;
  padding: 12px 12px 14px;
  margin-bottom: 18px;
  min-height: 130px;
  transition: all 0.1s linear; }
  .business-pod p {
    color: #000; }
  .business-pods .business-pod {
    float: left; }
    @media screen and (min-width: 540px) and (max-width: 991px) {
      .business-pods .business-pod {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%; } }
    @media screen and (min-width: 992px) {
      .business-pods .business-pod {
        width: 30%;
        margin-left: 1.66%;
        margin-right: 1.66%; } }
  .business-pod:hover {
    text-decoration: none;
    color: inherit;
    border-color: inherit; }
  .business-pod:focus {
    outline: none;
    box-shadow: none;
    background-color: #2c2c2c; }
  .business-pod .btn {
    display: block;
    color: inherit;
    border-width: 2px; }
  .business-pod:hover .btn {
    color: #fff;
    background-color: #2c2c2c;
    border-color: #2c2c2c; }
  .business-pod:focus .btn {
    color: #2c2c2c;
    background-color: #fff; }
  .business-pod__text + .btn {
    margin-top: 10px; }
  .business-pod--blue .btn {
    border-color: #00529b; }
  .business-pod--blue:hover .btn {
    background-color: #00529b;
    border-color: #00529b; }
  .business-pod--blue:focus .btn {
    background-color: #fff;
    color: #00529b; }
  .business-pod--red .btn {
    border-color: #d81e05; }
  .business-pod--red:hover .btn {
    background-color: #d81e05;
    border-color: #d81e05; }
  .business-pod--red:focus .btn {
    background-color: #fff;
    color: #d81e05; }
  .business-pod--pink .btn {
    border-color: #da3b8f; }
  .business-pod--pink:hover .btn {
    background-color: #da3b8f;
    border-color: #da3b8f; }
  .business-pod--pink:focus .btn {
    background-color: #fff;
    color: #da3b8f; }
  .business-pod--orange .btn {
    border-color: #e28c05; }
  .business-pod--orange:hover .btn {
    background-color: #e28c05;
    border-color: #e28c05; }
  .business-pod--orange:focus .btn {
    background-color: #fff;
    color: #e28c05; }
  .business-pod--green .btn {
    border-color: #178a11; }
  .business-pod--green:hover .btn {
    background-color: #178a11;
    border-color: #178a11; }
  .business-pod--green:focus .btn {
    background-color: #fff;
    color: #178a11; }
  .business-pod--purple .btn {
    border-color: #56008c; }
  .business-pod--purple:hover .btn {
    background-color: #56008c;
    border-color: #56008c; }
  .business-pod--purple:focus .btn {
    background-color: #fff;
    color: #56008c; }

.business-pod--blue {
  color: #00529b;
  border-color: #00529b; }
  .business-pod--blue:focus {
    background-color: #00529b; }

.business-pod--red {
  color: #d81e05;
  border-color: #d81e05; }
  .business-pod--red:focus {
    background-color: #d81e05; }

.business-pod--pink {
  color: #da3b8f;
  border-color: #da3b8f; }
  .business-pod--pink:focus {
    background-color: #da3b8f; }

.business-pod--orange {
  color: #e28c05;
  border-color: #e28c05; }
  .business-pod--orange:focus {
    background-color: #e28c05; }

.business-pod--green {
  color: #178a11;
  border-color: #178a11; }
  .business-pod--green:focus {
    background-color: #178a11; }

.business-pod--purple {
  color: #56008c;
  border-color: #56008c; }
  .business-pod--purple:focus {
    background-color: #56008c; }

.business-pod__image {
  position: relative;
  float: right;
  width: 100%;
  max-width: 45px;
  margin: 0 0 24px 20px; }
  .business-pod__image img {
    transition: opacity 0.2s linear;
    width: 100%;
    max-width: 42px; }

.business-pod__image-1 {
  position: relative;
  z-index: 2; }
  .business-pod:focus .business-pod__image-1 {
    opacity: 0; }

.business-pod__image-2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0; }
  .business-pod:focus .business-pod__image-2 {
    opacity: 1; }

.business-pod__heading {
  overflow: hidden;
  color: inherit;
  margin-top: 0; }
  .business-pod:hover .business-pod__heading {
    text-decoration: underline; }
  .business-pod:focus .business-pod__heading {
    color: #fff; }

.business-pod__text :last-child {
  margin-bottom: 0;
  color: inherit; }

.business-pod:focus .business-pod__text {
  color: #fff; }

/*
Button List Pod

Pod contains a link list in button format

default - default pod
blue - Blue pod
red - Red pod
pink - Pink pod
orange - Orange pod
green - Green pod
purple - Purple pod

markup:
<div class="button-list-pod button-list-pod--{$modifiers}">
  <h2 class="h4 button-list-pod__heading">Who can give blood?</h2>
  <div class="button-list-pod__body">
    <a href="#" class="btn btn--{$modifiers}">This is a link button</a>
    <a href="#" class="btn btn--{$modifiers}">This is a link button</a>
    <a href="#" class="btn btn--{$modifiers}">This is a link button</a>
    <a href="#" class="btn btn--{$modifiers}">This is a link button</a>
  </div>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-4">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.4
*/
.button-list-pod {
  display: block;
  text-align: left;
  width: 100%;
  color: #2c2c2c;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  border-radius: 18px;
  background-color: #fff;
  padding: 10px 10px 20px 10px;
  margin-bottom: 30px; }
  .button-list-pod .btn {
    display: block;
    margin: 20px 0; }

.button-list-pod__body :last-child {
  margin-bottom: 5px; }

/*
Campaign Card

A card used for campaign teasers

.campaign-card - Default campaign card
.campaign-card.campaign-card--blue - Blue card
.campaign-card.campaign-card--red - Red card
.campaign-card.campaign-card--pink - Pink card
.campaign-card.campaign-card--orange - Orange card
.campaign-card.campaign-card--green - Green card
.campaign-card.campaign-card--purple - Purple card

markup:
<div class="{$modifiers}" style="background-image: url(/images/raster/campaign-card-image.jpg)">
  <div class="campaign-card__body">
    <h2 class="h3 campaign-card__heading">Header 3; over three lines looks like this...</h2>
    <div class="campaign-card__text">
      <p>Pel ma sitati alitibus volores tibusci sit laborest at opti accus que volupti debis dissed et estrum nestrumquia ilibers?</p>
    </div>
    <a class="btn btn--on-dark btn--block" href="#">Read More</a>
  </div>
</div>

Styleguide 7.6
*/
.campaign-card {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-size: cover; }
  .campaign-card__body {
    position: relative;
    z-index: 2;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px 24px 35px; }
    @media screen and (min-width: 0) and (max-width: 539px) {
      .campaign-card__body {
        margin-top: 200px; } }
    @media screen and (min-width: 540px) {
      .campaign-card__body {
        float: right;
        width: 50%;
        max-width: 400px; } }
    .campaign-card--blue .campaign-card__body {
      background-color: rgba(0, 82, 155, 0.8); }
    .campaign-card--red .campaign-card__body {
      background-color: rgba(216, 30, 5, 0.8); }
    .campaign-card--pink .campaign-card__body {
      background-color: rgba(218, 59, 143, 0.8); }
    .campaign-card--orange .campaign-card__body {
      background-color: rgba(226, 140, 5, 0.8); }
    .campaign-card--green .campaign-card__body {
      background-color: rgba(23, 138, 17, 0.8); }
    .campaign-card--purple .campaign-card__body {
      background-color: rgba(86, 0, 140, 0.8); }
  .campaign-card__heading {
    color: #fff;
    margin-bottom: 30px; }
    @media screen and (min-width: 0) and (max-width: 539px) {
      .campaign-card__heading {
        font-size: 26px;
        font-size: 2.6rem; } }
    @media screen and (min-width: 540px) {
      .campaign-card__heading {
        line-height: 1; } }
  .campaign-card__text :last-child {
    margin-bottom: 0; }
  .campaign-card .btn {
    max-width: 244px;
    font-size: 24px;
    font-size: 2.4rem;
    margin: 30px auto 0; }
  .campaign-card--blue .btn:hover {
    color: #0073c6; }
  .campaign-card--red .btn:hover {
    color: #d81e05; }
  .campaign-card--pink .btn:hover {
    color: #da3b8f; }
  .campaign-card--orange .btn:hover {
    color: #e28c05; }
  .campaign-card--green .btn:hover {
    color: #178a11; }
  .campaign-card--purple .btn:hover {
    color: #56008c; }

/*
Content pod

A pod to display pulled-out content, partiuclarly in sidebars.

.content-pod - Default blue content pod
.content-pod.content-pod--red - Red content pod
.content-pod.content-pod--pink - Pink content pod
.content-pod.content-pod--orange - Orange content pod
.content-pod.content-pod--green - Green content pod
.content-pod.content-pod--purple - Purple content pod

Styleguide 7.10

markup:
<div class="{$modifiers}">
  <h4 class="content-pod__header">Content pod title</h4>
  <p class="content-pod__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis laboriosam numquam dolorum alias repudiandae dolor dignissimos excepturi nisi modi odit debitis, ratione dolores aliquid ut placeat, vero! Blanditiis, quia!</p>
</div>

sg-wrapper:
<div class="row">
  <div class="col-lg-4 col-md-4 no-padding-left">
    <sg-wrapper-content/>
  </div>
</div>

*/
.content-pod {
  padding: 9px 18px;
  margin-bottom: 18px;
  background-color: #D9EEF7; }

.content-pod--red {
  background-color: #F9E1DE; }

.content-pod--pink {
  background-color: #FAE0F2; }

.content-pod--orange {
  background-color: #FFFDDF; }

.content-pod--green {
  background-color: #DFF2E7; }

.content-pod--purple {
  background-color: #E9DEEF; }

/*
Form pod

A pod containing a small form, for embedding into other pages.

.form-pod - Standard form pod
.form-pod.form-pod--blue - Blue pod
.form-pod.form-pod--red - Red pod
.form-pod.form-pod--pink - Pink pod
.form-pod.form-pod--orange - Orange pod
.form-pod.form-pod--green - Green pod
.form-pod.form-pod--purple - Purple pod

markup:
<div class="{$modifiers}">
  <h4 class="form-pod__heading">Form pod</h4>
  <form action="">
    <div class="form__item"><label for="input-1" class="form__label">Input</label><input id="input-1" type="text" class="form__control" placeholder="Type something..."></div>
    <div class="form__item"><label for="input-2" class="form__label">Input</label><input id="input-2" type="text" class="form__control" placeholder="Type something..."></div>
    <div class="form__item">
      <label for="input-3" class="form__label">Text Area</label>
      <textarea id="input-3" class="form__control" placeholder="e.g Tom Smith"></textarea>
    </div>
    <div class="form__item">
      <select class="form__control" placeholder="e.g Tom Smith">
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
      </select>
    </div>
    <button class="btn btn--block form__btn" type="submit">Submit</button>
  </form>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-md-4">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.9
*/
.form-pod {
  padding: 18px;
  border: 1px solid currentColor;
  border-radius: 18px; }

.form-pod--blue {
  color: #00529b; }
  .form-pod--blue .form-pod__heading {
    color: #00529b; }

.form-pod--red {
  color: #d81e05; }
  .form-pod--red .form-pod__heading {
    color: #d81e05; }

.form-pod--pink {
  color: #da3b8f; }
  .form-pod--pink .form-pod__heading {
    color: #da3b8f; }

.form-pod--orange {
  color: #e28c05; }
  .form-pod--orange .form-pod__heading {
    color: #e28c05; }

.form-pod--green {
  color: #178a11; }
  .form-pod--green .form-pod__heading {
    color: #178a11; }

.form-pod--purple {
  color: #56008c; }
  .form-pod--purple .form-pod__heading {
    color: #56008c; }

/*
Interested In

You might be interested in item. Inside each wrapper (div) can be multiple pods (anchor tags).

markup:
<hr noshade>
<br />
<h4 class="">You may also be interested in:</h4>
<br />
<div class="interested-in-pod-wrapper">
  <a class="interested-in-pod" href="#" title="">
    <h5 class="interested-in-pod__title">Lorem ipsum</h5>
  </a>
  <a class="interested-in-pod" href="#" title="">
    <h5 class="interested-in-pod__title">Lorem ipsum</h5>
  </a>
  <a class="interested-in-pod" href="#" title="">
    <h5 class="interested-in-pod__title">Lorem ipsum</h5>
  </a>
  <a class="interested-in-pod interested-in-pod--site-colour" href="#" title="">
    <h5 class="interested-in-pod__title">Lorem ipsum</h5>
  </a>
  <a class="interested-in-pod" href="#" title="">
    <h5 class="interested-in-pod__title">Lorem ipsum</h5>
  </a>
</div>

Styleguide 6.16
*/
@media screen and (min-width: 540px) {
  .interested-in-pod-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between; } }

.interested-in-pod {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  background: #fff;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 10px 15px;
  text-decoration: none;
  text-align: center;
  margin-bottom: 18px;
  transition: box-shadow 25ms linear, background-color 100ms linear, color 25ms linear; }
  @media screen and (min-width: 540px) {
    .interested-in-pod {
      -ms-flex: 0 1 30%;
      flex: 0 1 calc(33% - 8px); } }
  .interested-in-pod:hover {
    background: #333; }
  .interested-in-pod__title {
    color: #333;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 24px;
    margin: 0; }
    .interested-in-pod:hover .interested-in-pod__title {
      color: #fff;
      text-decoration: underline; }

/*
Text Link Pod

Pod contains a link list in text format

.link-list-pod - Default leftnav pod
.link-list-pod.link-list-pod--blue - Blue pod
.link-list-pod.link-list-pod--red - Red pod
.link-list-pod.link-list-pod--pink - Pink pod
.link-list-pod.link-list-pod--orange - Orange pod
.link-list-pod.link-list-pod--green - Green pod
.link-list-pod.link-list-pod--purple - Purple pod

markup:
<div class="{$modifiers}">
  <h2 class="h4 link-list-pod__heading">Who can give blood?</h2>
  <ul class="link-list">
  	<li class="link-list__item"><a class="link-list__link" href="#">This is a link</a></li>
    <li class="link-list__item"><a class="link-list__link" href="#">This is a link</a></li>
    <li class="link-list__item"><a class="link-list__link" href="#">This is a link</a></li>
    <li class="link-list__item"><a class="link-list__link" href="#">This is a link</a></li>
  </ul>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.5
*/
.link-list-pod {
  display: block;
  text-align: left;
  width: 100%;
  color: #2c2c2c;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  border-radius: 18px;
  background-color: #fff;
  padding: 10px 10px 20px 10px;
  margin-bottom: 18px; }
  .link-list-pod.link-list-pod--blue {
    border-color: #0073c6; }
  .link-list-pod.link-list-pod--red {
    border-color: #d81e05; }
  .link-list-pod.link-list-pod--pink {
    border-color: #da3b8f; }
  .link-list-pod.link-list-pod--orange {
    border-color: #e28c05; }
  .link-list-pod.link-list-pod--green {
    border-color: #178a11; }
  .link-list-pod.link-list-pod--purple {
    border-color: #56008c; }

.link-list {
  padding: 0 0 0 20px;
  margin: 0; }

.link-list__item {
  padding-left: 5px;
  margin-bottom: 10px; }
  .link-list__item:last-child {
    margin-bottom: 0; }

.link-list-pod--blue .link-list__link {
  color: #00529b; }

.link-list-pod--red .link-list__link {
  color: #d81e05; }

.link-list-pod--pink .link-list__link {
  color: #da3b8f; }

.link-list-pod--orange .link-list__link {
  color: #e28c05; }

.link-list-pod--green .link-list__link {
  color: #178a11; }

.link-list-pod--purple .link-list__link {
  color: #56008c; }

/*
Staff Profile Cards

A  pod that can be used for representing members of staff in a card format

Styleguide 7.7
*/
/*
Staff Profile Small

.card.profile-card - Default media pod
.card.profile-card.card--blue - Blue pod
.card.profile-card.card--red - Red pod
.card.profile-card.card--pink - Pink pod
.card.profile-card.card--orange - Orange pod
.card.profile-card.card--green - Green pod
.card.profile-card.card--purple - Purple pod

markup:
<div class="{$modifiers}">
  <div class="card__image">
    <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
  </div>
  <div class="card__body">
    <h2 class="profile-card__heading">Michael Ambler</h2>
    <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
  </div>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-6 col-md-2">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.7.1
*/
.profile-card.profile-card--full {
  padding-bottom: 10px; }

.profile-card__heading {
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1.1;
  color: #2c2c2c;
  margin: 0 0 10px; }
  .profile-card--full .profile-card__heading {
    font-size: 40px;
    font-size: 4rem;
    margin-bottom: 15px; }

.profile-card__sub-heading {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.4;
  color: inherit;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: inherit;
  padding-top: 8px;
  margin-bottom: 5px; }
  .profile-card--full .profile-card__sub-heading {
    font-size: 22px;
    font-size: 2.2rem;
    margin-bottom: 20px; }

.profile-card__sub-heading-text {
  color: #2c2c2c; }

/*
Staff Profile Large

.card.profile-card.profile-card--full - Default media pod
.card.profile-card.profile-card--full.card--blue - Blue pod
.card.profile-card.profile-card--full.card--red - Red pod
.card.profile-card.profile-card--full.card--pink - Pink pod
.card.profile-card.profile-card--full.card--orange - Orange pod
.card.profile-card.profile-card--full.card--green - Green pod
.card.profile-card.profile-card--full.card--purple - Purple pod

markup:
<div class="{$modifiers}">
  <div class="card__image">
    <img src="/images/raster/staff-photo.jpg" alt="Michael Ambler">
  </div>
  <div class="card__body">
    <h2 class="profile-card__heading">Michael Ambler</h2>
    <h3 class="profile-card__sub-heading"><span class="profile-card__sub-heading-text">Senior Web Architect</span></h3>
    <div class="card__text">
      <p>Ian has led strategic operations since 2014, and is the driving force behind our 2016 strategic plan. Ian started his career as an Inspector with the Royal Hong Kong Police and then moved to Surrey Police before working in the private sector. Prior to NHSBT, Ian was the Chief Operating Officer at DEFRA and before this, the Chief Executive of the Royal Borough of Windsor and Maidenhead.</p>
    </div>
  </div>
</div>

sg-wrapper:
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 no-padding-left">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.7.2
*/
/*
Standard card pod

A utility pod that can be used for representing information/teasers in a card format, with or without a picture

.card - Default media pod
.card.card--blue - Blue pod
.card.card--red - Red pod
.card.card--pink - Pink pod
.card.card--orange - Orange pod
.card.card--green - Green pod
.card.card--purple - Purple pod

markup:
<a href="#" class="{$modifiers}">
  <div class="card__image">
    <img src="https://nhsbtdbe.blob.core.windows.net/umbraco-assets-careers-dev/1118/nurse2_carousel.jpg" alt="Nurse">
  </div>
  <div class="card__body">
    <h2 class="h4 card__heading">Join our nursing team</h3>
    <div class="card__text">
      <p>Our nurses provide a specialist and unique role within the organisation.</p>
    </div>
    <span class="btn">Make a difference</span>
  </div>
</a>

sg-wrapper:
<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 no-padding-left">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.2
*/
.card {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #2c2c2c;
  border-width: 1px;
  border-style: solid;
  border-color: currentColor;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  margin-top: 24px;
  margin-bottom: 18px; }
  .card:focus {
    outline: none;
    box-shadow: 0 0 0 3px #df0f9c; }
  .card .btn {
    margin-top: 20px;
    display: block;
    clear: both; }

a.card:hover {
  text-decoration: none; }

.card__image img {
  width: 100%; }

.card__body {
  color: inherit;
  padding: 18px 15px; }

.card__heading {
  color: #2c2c2c;
  margin: 0 0 18px; }
  .card:hover .card__heading {
    text-decoration: underline;
    color: currentColor; }

.card__text {
  color: #2c2c2c; }
  .card__text p:last-child {
    margin-bottom: 0; }

.card--blue {
  color: #0073c6; }
  .card--blue:hover {
    border-color: #005593; }
  .card--blue:hover .card__heading {
    color: #0073c6; }

.card--red {
  color: #d81e05; }
  .card--red:hover {
    border-color: #a61704; }
  .card--red:hover .card__heading {
    color: #d81e05; }

.card--pink {
  color: #da3b8f; }
  .card--pink:hover {
    border-color: #be2475; }
  .card--pink:hover .card__heading {
    color: #da3b8f; }

.card--orange {
  color: #e28c05; }
  .card--orange:hover {
    border-color: #b06d04; }
  .card--orange:hover .card__heading {
    color: #e28c05; }

.card--green {
  color: #178a11; }
  .card--green:hover {
    border-color: #0f5d0b; }
  .card--green:hover .card__heading {
    color: #178a11; }

.card--purple {
  color: #56008c; }
  .card--purple:hover {
    border-color: #370059; }
  .card--purple:hover .card__heading {
    color: #56008c; }

/*
Stat pod

A stat pod that can be used to display important stats in two formats, large and small.

.stat-pod - Default stat pod
.stat-pod.stat-pod--blue - Blue pod
.stat-pod.stat-pod--red - Red pod
.stat-pod.stat-pod--pink - Pink pod
.stat-pod.stat-pod--orange - Orange pod
.stat-pod.stat-pod--green - Green pod
.stat-pod.stat-pod--purple - Purple pod
.stat-pod - Default stat pod
.stat-pod.stat-pod--standout.stat-pod--blue - Blue pod (Standout)
.stat-pod.stat-pod--standout.stat-pod--red - Red pod (Standout)
.stat-pod.stat-pod--standout.stat-pod--pink - Pink pod (Standout)
.stat-pod.stat-pod--standout.stat-pod--orange - Orange pod (Standout)
.stat-pod.stat-pod--standout.stat-pod--green - Green pod (Standout)
.stat-pod.stat-pod--standout.stat-pod--purple - Purple pod (Standout)

markup:
<div class="{$modifiers}">
    <div class="stat-pod__body">
        <div class="stat-pod__image">
            <img src="/images/svg/stat-icon-stem-cell.svg" alt="">
        </div>
        <div class="stat-pod__text">
            <h3 class="stat-pod__title"><strong class="stat-pod__title-stat">126</strong> Organ Transplants</h3>
            <h4 class="stat-pod__date">February 2017</h4>
        </div>
    </div>
    <a class="btn stat-pod__btn" href="#">Learn More</a>
</div>

sg-wrapper:
<div class="row">
  <div class="col-xs-12 col-ms-8 col-md-4 no-padding-left">
    <sg-wrapper-content/>
  </div>
</div>

Styleguide 7.8
*/
@media screen and (min-width: 0) and (max-width: 991px) {
  .stat-pods {
    margin: 10px 0; } }

@media screen and (min-width: 992px) {
  .stat-pods {
    margin: 15px -15px; } }

.stat-pod {
  color: #2c2c2c;
  background-color: #2c2c2c;
  border-radius: 18px;
  padding: 5px 10px 11px;
  margin-bottom: 12px; }
  .stat-pod.stat-pod--blue {
    color: #2c2c2c;
    background-color: #0073c6; }
    @media screen and (min-width: 992px) {
      .stat-pod.stat-pod--blue.stat-pod--standout {
        color: #0073c6; } }
  .stat-pod.stat-pod--red {
    color: #2c2c2c;
    background-color: #d81e05; }
    @media screen and (min-width: 992px) {
      .stat-pod.stat-pod--red.stat-pod--standout {
        color: #d81e05; } }
  .stat-pod.stat-pod--pink {
    color: #2c2c2c;
    background-color: #da3b8f; }
    @media screen and (min-width: 992px) {
      .stat-pod.stat-pod--pink.stat-pod--standout {
        color: #da3b8f; } }
  .stat-pod.stat-pod--orange {
    color: #2c2c2c;
    background-color: #e28c05; }
    @media screen and (min-width: 992px) {
      .stat-pod.stat-pod--orange.stat-pod--standout {
        color: #e28c05; } }
  .stat-pod.stat-pod--green {
    color: #2c2c2c;
    background-color: #178a11; }
    @media screen and (min-width: 992px) {
      .stat-pod.stat-pod--green.stat-pod--standout {
        color: #178a11; } }
  .stat-pod.stat-pod--purple {
    color: #2c2c2c;
    background-color: #56008c; }
    @media screen and (min-width: 992px) {
      .stat-pod.stat-pod--purple.stat-pod--standout {
        color: #56008c; } }
  @media screen and (min-width: 540px) and (max-width: 991px) {
    .stat-pod {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between;
      -ms-flex-align: start;
          align-items: flex-start;
      padding: 12px 25px 12px 20px; } }
  @media screen and (min-width: 992px) {
    .stat-pod {
      margin-left: 5%;
      margin-right: 5%; } }
  @media screen and (min-width: 992px) {
    .stat-pod.stat-pod--standout {
      background-color: transparent;
      padding: 0; } }

@media screen and (min-width: 992px) {
  .stat-pod--standout .stat-pod__body {
    position: relative;
    height: 0;
    background-color: #2c2c2c;
    border: 3px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 6px #fff;
    padding: 0 20px 100%;
    margin-bottom: 20px; } }

.stat-pod--standout.stat-pod--blue .stat-pod__body {
  background-color: #0073c6; }

.stat-pod--standout.stat-pod--red .stat-pod__body {
  background-color: #d81e05; }

.stat-pod--standout.stat-pod--pink .stat-pod__body {
  background-color: #da3b8f; }

.stat-pod--standout.stat-pod--orange .stat-pod__body {
  background-color: #e28c05; }

.stat-pod--standout.stat-pod--green .stat-pod__body {
  background-color: #178a11; }

.stat-pod--standout.stat-pod--purple .stat-pod__body {
  background-color: #56008c; }

@media screen and (min-width: 992px) {
  .stat-pod--standout .stat-pod__body-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center; } }

.stat-pod__image {
  float: left;
  text-align: center;
  margin-right: 10px; }
  @media screen and (min-width: 992px) {
    .stat-pod--standout .stat-pod__image {
      float: none;
      margin-bottom: 20px; } }
  .stat-pod__image img {
    display: inline-block;
    max-width: 60px; }

.stat-pod__text {
  overflow: hidden; }
  @media screen and (min-width: 992px) {
    .stat-pod--standout .stat-pod__text {
      text-align: center; } }

.stat-pod__title {
  line-height: 1;
  font-size: 20px;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0; }
  .stat-pod--orange .stat-pod__title {
    color: #2c2c2c; }

.stat-pod__title-stat {
  font-size: 40px;
  font-size: 4rem;
  display: block;
  margin-bottom: 5px; }
  @media screen and (min-width: 992px) {
    .stat-pod--standout .stat-pod__title-stat {
      font-size: 56px;
      font-size: 5.6rem; } }

.stat-pod__date {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 300;
  font-style: italic;
  color: #fff; }
  .stat-pod--orange .stat-pod__date {
    color: #2c2c2c; }
  @media screen and (min-width: 992px) {
    .stat-pod--standout .stat-pod__date {
      font-weight: 600; } }

.stat-pod__btn {
  display: block;
  color: #fff;
  border-color: #fff; }
  .stat-pod__btn:hover {
    color: currentColor;
    background-color: #fff;
    border-color: #fff; }
  .stat-pod--orange .stat-pod__btn {
    color: #2c2c2c;
    border-color: #2c2c2c; }
    .stat-pod--orange .stat-pod__btn:hover {
      color: #e28c05;
      border-color: #2c2c2c;
      background-color: #2c2c2c; }
  @media screen and (min-width: 992px) {
    .stat-pod--standout .stat-pod__btn {
      color: currentColor;
      border-color: currentColor; }
      .stat-pod--standout .stat-pod__btn:hover {
        color: #fff;
        background-color: inherit; } }
  @media screen and (min-width: 992px) {
    .stat-pod--blue.stat-pod--standout .stat-pod__btn:hover {
      background-color: #0073c6; } }
  @media screen and (min-width: 992px) {
    .stat-pod--red.stat-pod--standout .stat-pod__btn:hover {
      background-color: #d81e05; } }
  @media screen and (min-width: 992px) {
    .stat-pod--pink.stat-pod--standout .stat-pod__btn:hover {
      background-color: #da3b8f; } }
  @media screen and (min-width: 992px) {
    .stat-pod--orange.stat-pod--standout .stat-pod__btn:hover {
      background-color: #e28c05; } }
  @media screen and (min-width: 992px) {
    .stat-pod--green.stat-pod--standout .stat-pod__btn:hover {
      background-color: #178a11; } }
  @media screen and (min-width: 992px) {
    .stat-pod--purple.stat-pod--standout .stat-pod__btn:hover {
      background-color: #56008c; } }

.media {
  position: relative;
  margin: 0 0 9px 0; }
  .media.media--full-width img {
    max-width: none;
    width: 100%; }

.media__obj {
  max-width: 100%; }

.media__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 300px;
  font-style: italic;
  font-size: 14px;
  font-size: 1.4rem;
  color: #fff;
  background-color: rgba(44, 44, 44, 0.5);
  padding: 2px 5px; }