:root {
  /* Characters */

  /* Colors */ /* deprecated */ /* orange */ /* #5bc0de; */ /* #231f20 */ /* #3c444f */ /* #565a5c */ /* #a2a4a3 */ /* #d2d4d3 */ /* #eceded */ /* #f6f6f6 */

  /* Scaffolding */ /* darken --brand-blue */

  /* Sprites */
  /* stylelint-disable unit-blacklist */
  /* stylelint-enable unit-blacklist */

  /* Typography */
  /* $font-family-sans-serif: "Trade Gothic W01", Helvetica, Arial, sans-serif; */
  /* $font-family-condensed: "Trade Gothic W01 Condensed", Helvetica, Arial, */
  /* sans-serif; */
  /* Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. */ /* 60/16/100 */ /* 40/16/100 */

  /* Footers */

  /* Components */

  /* Tables */

  /* Forms */ /* deprecated */ /* deprecated */

  /* Datepicker */

  /* Dropdowns */

  /* Z-index master list */

  /* Grid system */

  /* Container sizes */
  /* TODO: convert to rem */

  /* Navbar */

  /* Basics of a navbar */ /* was floor()ed */

  /* Navbar links */

  /* Navbar brand label */

  /* Navbar toggle */

  /* Inverted navbar */
  /* Reset inverted navbar basics */

  /* Inverted navbar links */

  /* Inverted navbar brand label */

  /* Inverted navbar toggle */

  /* Navs */

  /* Tabs */

  /* Flyout */

  /*--nav-flyout-opacity: 70%;*/

  /* Categories */

  /* Pagination */

  /* Pager */

  /* Form states and alerts */

  /* Tooltips */

  /* Labels */

  /* Modals */

  /* Alerts */

  /* Panels */

  /* Wells */

  /* Badges */

  /* Carousel */

  /* Close */

  /* Code */

  /* Type */

  /* Margins */

  /* Lists */
  /* Lists */

  /* Medium editor */

  /* Calendar */

  /* Miscellaneous */

  /* Navdrawer (deprecated) */
}
/* TODO: convert to em */
/* Extra small screen / phone */
/* Small screen / tablet */
/* Medium screen / desktop */
/* Large screen / wide desktop */
/* --retina:    ~"only screen and (-webkit-min-device-pixel-ratio: 2)",
            ~"only screen and (min-device-pixel-ratio: 2)",
            ~"only screen and (min-resolution: 2dppx)"; */
/* hack to target ie9/10. Avoid using if possible */
/* these for reference only? */
/* remove default button styles */
/*
 Typographical styles

 This is the master list of font sizes & styles. Use these
 in other modules by @apply-ing them.
*/
/* TODO: Convert most of these to simple mixins */
/*
Sprites

Classes: sprite-*

<p class="alert alert-info">
Be sure to put a brief descriptive text inside sprite and logo elements, for accessibility on screen readers. A title attribute may also be added to provide tooltip text on mouse hover: `<i class="sprite-close" title="close">close</i>.`
</p>

Markup:
<i class="{{modifier_class}}"></i>

sprite-search - search
sprite-print - print
sprite-email  - email
sprite-download - download
sprite-file-pdf - pdf file
sprite-file-doc - doc file
sprite-file-excel - excel file
sprite-plus - plus
sprite-minus - minus
sprite-plus-faded - faded plus
sprite-minus-faded - faded minus
sprite-menu - menu (click to toggle `is-open` class)
sprite-close - close (add `inverse` class for white version)
sprite-close-main - large close
sprite-play-sm - small play icon
sprite-play - play icon
sprite-play-lg  - large play icon
sprite-play-xl  - xl play icon
sprite-featured - star
sprite-edit - edit
sprite-draggable - indicate draggable item
sprite-gear - settings gear

Wrapper: gray

Weight: 13

Styleguide Sprites
*/
/* stylelint-disable unit-blacklist */
.sprite,
[class*="sprite-"] {
  display: inline-block;
  overflow: hidden;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite,
[class*="sprite-"] {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/* heads up: these three sprites are replicated in typography.css for item-* classes */
.sprite-file-pdf {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -548px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-file-pdf {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-file-doc {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -576px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-file-doc {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-file-excel {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -603px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-file-excel {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-menu,
.sprite-menu-animated {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 0.15em;
  background: #fff;
  -webkit-transition: background-color 0.3s
    ease-out;
  transition: background-color 0.3s
    ease-out;
  overflow: visible;
  vertical-align: middle;
  margin: 0.5em 0
}
.sprite-menu::before,
  .sprite-menu::after,
  .sprite-menu-animated::before,
  .sprite-menu-animated::after {
  position: absolute;
  content: "";
  right: 0;
  left: 0;
  background-color: #fff;
  height: 0.15em;
  -webkit-transition: all 0.3s
      ease-out;
  transition: all 0.3s
      ease-out;
}
.sprite-menu::before, .sprite-menu-animated::before {
  top: -0.5em;
}
.sprite-menu::after, .sprite-menu-animated::after {
  bottom: -0.5em;
}
.sprite-menu.is-open, .sprite-menu-animated.is-open {
  background-color: rgba(255, 255, 255, 0);
}
.sprite-menu.is-open::before, .sprite-menu-animated.is-open::before {
  -webkit-transform: translateY(0.5em) rotate(45deg);
          transform: translateY(0.5em) rotate(45deg);
}
.sprite-menu.is-open::after, .sprite-menu-animated.is-open::after {
  -webkit-transform: translateY(-0.5em) rotate(135deg);
          transform: translateY(-0.5em) rotate(135deg);
}
.sprite-print {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -546px -340px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-print {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-email {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -582px -340px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-email {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-download {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -618px -340px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-download {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-search {
  display: inline-block;
  overflow: hidden;
  width: 21px;
  height: 21px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -12px -179px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-search {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-close {
  display: inline-block;
  position: relative;
  width: 1.125em;
  height: 1.125em;
  vertical-align: text-bottom;
  text-indent: -10000px
}
.sprite-close::after {
  display: block;
  position: absolute;
  content: "\00D7";
  top: 0;
  right: 0;
  left: 0;
  font-size: 1.125em;
  color: hsl(200, 3.4%, 34.9%);
  font-style: normal;
  text-indent: 0;
  line-height: 1;
  text-align: center;
}
.sprite-close {
  .inverse &:after, &.inverse:after {
    color: #fff;
  }
}
.sprite-market-open,
.sprite-market-closed {
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background-image: none;
  margin-right: 5px;
  vertical-align: baseline;
}
.sprite-market-open {
  background-color: #00c300;
}
.sprite-market-closed {
  background-color: hsl(200, 3.4%, 34.9%);
}
.sprite-play-sm {
  display: inline-block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -352px -125px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-play {
  display: inline-block;
  overflow: hidden;
  width: 64px;
  height: 64px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -390px -93px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-play-lg {
  display: inline-block;
  overflow: hidden;
  width: 104px;
  height: 104px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -458px -56px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-play-xl {
  display: inline-block;
  overflow: hidden;
  width: 140px;
  height: 140px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -569px -20px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play-xl {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-instagram {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -146px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-instagram {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-instagram {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-linkedin {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -174px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-linkedin {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-linkedin {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-facebook {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -202px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-facebook {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-facebook {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-twitter {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -232px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-twitter {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-twitter {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-twitter-lg {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -13px ;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-twitter-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-linkedin-lg {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -54px -129px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-linkedin-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-facebook-lg {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -97px -129px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-facebook-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-featured {
  width: 14px;
  height: 14px;
  background-position: -160px -135px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-featured {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-edit {
  width: 14px;
  height: 14px;
  background-position: -178px -136px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-edit {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-draggable {
  width: 7px;
  height: 15px;
  background-position: -198px -136px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-draggable {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-plus-faded {
  display: inline-block;
  overflow: hidden;
  width: 34px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -528px -264px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-faded {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-minus-faded {
  display: inline-block;
  overflow: hidden;
  width: 34px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -567px -264px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-faded {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-plus-faded-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -538px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-faded-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-minus-faded-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -577px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-faded-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-plus-light-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -394px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-light-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-minus-light-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -433px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-light-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-gear {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 50 50'%3E%3Cg%3E%3Cpath d=' M 22.055 1.863 L 20.974 8.714 C 19.328 9.12 17.758 9.728 16.346 10.577 L 10.697 6.55 L 6.611 10.637 L 10.577 16.286 C 9.721 17.706 9.067 19.261 8.654 20.913 L 1.863 22.055 L 1.863 27.825 L 8.654 29.026 C 9.067 30.679 9.721 32.234 10.577 33.654 L 6.55 39.303 L 10.637 43.389 L 16.286 39.423 C 17.698 40.272 19.268 40.88 20.913 41.286 L 22.055 48.137 L 27.825 48.137 L 29.087 41.286 C 30.724 40.873 32.249 40.219 33.654 39.363 L 39.363 43.389 L 43.45 39.303 L 39.363 33.654 C 40.204 32.249 40.88 30.717 41.286 29.087 L 48.137 27.825 L 48.137 22.055 L 41.286 20.913 C 40.88 19.283 40.204 17.751 39.363 16.346 L 43.389 10.637 L 39.303 6.55 L 33.654 10.637 C 32.249 9.788 30.672 9.127 29.026 8.714 L 27.825 1.863 L 22.055 1.863 Z M 24.748 14.349 C 18.855 14.349 14.045 19.159 14.045 25.052 C 14.045 30.946 18.855 35.756 24.748 35.756 C 30.642 35.756 35.451 30.946 35.451 25.052 C 35.451 19.159 30.642 14.349 24.748 14.349 Z ' fill-rule='evenodd' style='fill: hsl%28200%2C 3.4%25%2C 34.9%25%29'/%3E%3C/g%3E%3C/svg%3E");
}
/*
Alignment

Classes: sprite-middle sprite-bottom

The default vertical alignment of sprites is on the baseline of the text. Adjust this using these classes.

Markup:
<p><i class="sprite-print {{modifier_class}}"></i> Print</p>

sprite-middle - middle alignment
sprite-bottom - bottom alignment
sprite-baseline - baseline alignment
sprite-textbottom - bottom of text

Weight: 20

Styleguide Sprites.Alignment
*/
.sprite-middle {
  vertical-align: middle !important;
}
.sprite-baseline {
  vertical-align: baseline !important;
}
.sprite-bottom {
  vertical-align: bottom !important;
}
.sprite-textbottom {
  vertical-align: text-bottom !important;
}
/* stylelint-enable unit-blacklist */
/*
Asset Classes

These sprites come in four variations each: regular, small, inverse, and inverse small.

Markup:
<i class="{{modifier_class}}"></i>

sprite-emissions - emissions
sprite-agriculture - agriculture
sprite-metals - metals
sprite-equities - equities
sprite-bonds - bonds
sprite-energy - energy
sprite-fx - fx
sprite-credit - credit
sprite-int-rates - interest rates
sprite-etp - etp

Markup2:
<div style="background-color: #999">
  <i class="sprite-emissions"></i>
  <i class="sprite-emissions-sm"></i>
  <i class="sprite-emissions inverse"></i>
  <i class="sprite-emissions-sm inverse"></i>
</div>

Styleguide Sprites.Asset-Classes
*/
.sprite-emissions {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -11px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-emissions {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-agriculture {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -65px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-agriculture {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-metals {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -121px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-metals {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-equities {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -175px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-equities {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-bonds {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -232px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-bonds {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-energy {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -285px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-energy {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-fx {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -326px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-fx {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-credit {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -372px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-credit {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-int-rates {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -429px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-int-rates {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-etp {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -480px -302px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-etp {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/* Inverse */
.inverse.sprite-emissions,
.inverse.sprite-agriculture,
.inverse.sprite-metals,
.inverse.sprite-equities,
.inverse.sprite-bonds,
.inverse.sprite-energy,
.inverse.sprite-fx,
.inverse.sprite-credit,
.inverse.sprite-int-rates,
.inverse.sprite-etp,
.inverse .sprite-emissions,
.inverse .sprite-agriculture,
.inverse .sprite-metals,
.inverse .sprite-equities,
.inverse .sprite-bonds,
.inverse .sprite-energy,
.inverse .sprite-fx,
.inverse .sprite-credit,
.inverse .sprite-int-rates,
.inverse .sprite-etp {
  background-position-y: -380px;
}
/* Small */
.sprite-emissions-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -11px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-emissions-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-agriculture-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -47px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-agriculture-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-metals-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -81px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-metals-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-equities-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -116px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-equities-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-bonds-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -152px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-bonds-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-energy-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -186px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-energy-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-fx-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -213px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-fx-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-credit-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -242px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-credit-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-int-rates-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -278px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-int-rates-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-etp-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -311px -349px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-etp-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/* Inverse small */
.inverse.sprite-emissions-sm,
.inverse.sprite-agriculture-sm,
.inverse.sprite-metals-sm,
.inverse.sprite-equities-sm,
.inverse.sprite-bonds-sm,
.inverse.sprite-energy-sm,
.inverse.sprite-fx-sm,
.inverse.sprite-credit-sm,
.inverse.sprite-int-rates-sm,
.inverse.sprite-etp-sm,
.inverse .sprite-emissions-sm,
.inverse .sprite-agriculture-sm,
.inverse .sprite-metals-sm,
.inverse .sprite-equities-sm,
.inverse .sprite-bonds-sm,
.inverse .sprite-energy-sm,
.inverse .sprite-fx-sm,
.inverse .sprite-credit-sm,
.inverse .sprite-int-rates-sm,
.inverse .sprite-etp-sm {
  background-position-y: -426px;
}
/*
Business Sprites

Markup:
<i class="{{modifier_class}}"></i>

sprite-calendar - calendar
sprite-clock  - clock
sprite-locked  - locked
sprite-unlocked  - unlocked
sprite-pin - pin
sprite-document - document
sprite-computer - computer
sprite-person - person
sprite-speech - speech
sprite-check - check
sprite-chart - chart
sprite-mobile - mobile

Markup2:
<div style="background-color: #999">
  <i class="sprite-calendar"></i>
  <i class="sprite-calendar-sm"></i>
  <i class="sprite-calendar inverse"></i>
  <i class="sprite-calendar-sm inverse"></i>
</div>

Styleguide Sprites.Business
*/
.sprite-calendar {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -10px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-calendar {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-history/* deprecated */,
.sprite-clock {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -56px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-history,
.sprite-clock {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-locked {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -93px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-locked {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-unlocked {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -137px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-unlocked {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-pin {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -179px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-pin {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-document {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -215px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-document {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-computer {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -261px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-computer {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-person {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -305px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-person {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-speech {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -350px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-speech {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-check {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -394px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-check {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-chart-selected/* deprecated */,
.sprite-chart {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -430px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-chart-selected,
.sprite-chart {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-mobile {
  display: inline-block;
  overflow: hidden;
  width: 38px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -471px -470px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-mobile {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/* Inverse */
.inverse.sprite-calendar,
.inverse.sprite-clock,
.inverse.sprite-locked,
.inverse.sprite-unlocked,
.inverse.sprite-pin,
.inverse.sprite-document,
.inverse.sprite-computer,
.inverse.sprite-person,
.inverse.sprite-speech,
.inverse.sprite-check,
.inverse.sprite-chart,
.inverse.sprite-mobile,
.inverse .sprite-calendar,
.inverse .sprite-clock,
.inverse .sprite-locked,
.inverse .sprite-unlocked,
.inverse .sprite-pin,
.inverse .sprite-document,
.inverse .sprite-computer,
.inverse .sprite-person,
.inverse .sprite-speech,
.inverse .sprite-check,
.inverse .sprite-chart,
.inverse .sprite-mobile {
  background-position-y: -548px;
}
/* Small */
.sprite-calendar-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -12px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-calendar-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-clock-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -42px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-clock-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-locked-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -67px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-locked-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-unlocked-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -96px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-unlocked-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-pin-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -125px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-pin-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-document-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -148px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-document-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-computer-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -179px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-computer-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-person-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -209px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-person-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-speech-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -239px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-speech-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-check-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -267px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-check-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-chart-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -291px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-chart-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-mobile-sm {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -318px -511px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-mobile-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/* Inverse small */
.inverse.sprite-calendar-sm,
.inverse.sprite-clock-sm,
.inverse.sprite-locked-sm,
.inverse.sprite-unlocked-sm,
.inverse.sprite-pin-sm,
.inverse.sprite-document-sm,
.inverse.sprite-computer-sm,
.inverse.sprite-person-sm,
.inverse.sprite-speech-sm,
.inverse.sprite-check-sm,
.inverse.sprite-chart-sm,
.inverse.sprite-mobile-sm,
.inverse .sprite-calendar-sm,
.inverse .sprite-clock-sm,
.inverse .sprite-locked-sm,
.inverse .sprite-unlocked-sm,
.inverse .sprite-pin-sm,
.inverse .sprite-document-sm,
.inverse .sprite-computer-sm,
.inverse .sprite-person-sm,
.inverse .sprite-speech-sm,
.inverse .sprite-check-sm,
.inverse .sprite-chart-sm,
.inverse .sprite-mobile-sm {
  background-position-y: -589px;
}
/*
Arrows

Classes: chevron-*

“Chevron” arrows, available in three sizes for each direction.

Markup:
<i class={{modifier_class}}></i>

chevron-n - north/up
chevron-s - south/down
chevron-e - east/right
chevron-w - west/left

Markup2:
<i class="chevron-n chevron-sm"></i>
<i class="chevron-n"></i>
<i class="chevron-n chevron-lg"></i>
<i class="chevron-s chevron-sm"></i>
<i class="chevron-s"></i>
<i class="chevron-s chevron-lg"></i>
<i class="chevron-e chevron-sm"></i>
<i class="chevron-e"></i>
<i class="chevron-e chevron-lg"></i>
<i class="chevron-w chevron-sm"></i>
<i class="chevron-w"></i>
<i class="chevron-w chevron-lg"></i>

Styleguide Sprites.Chevrons
*/
.chevron-e,
.chevron-s,
.chevron-w,
.chevron-n {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    color: #2235f9;
    text-align: center
}
.chevron-e::before, .chevron-s::before, .chevron-w::before, .chevron-n::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
}
.chevron-e,
.chevron-w {
    width: .5em;
    height: 1em;
}
.chevron-n,
.chevron-s {
    width: 1em;
    height: .5em;
}
.chevron-e::before {
  -webkit-transform: translate(-0.5em, 0.2em) rotate(45deg);
          transform: translate(-0.5em, 0.2em) rotate(45deg);
}
.chevron-s::before {
  -webkit-transform: translate(-0.3em, -0.25em) rotate(135deg);
          transform: translate(-0.3em, -0.25em) rotate(135deg);
}
.chevron-w::before {
  -webkit-transform: translate(-0.1em, 0.2em) rotate(225deg);
          transform: translate(-0.1em, 0.2em) rotate(225deg);
}
.chevron-n::before {
  -webkit-transform: translate(-0.3em, 0.15em) rotate(315deg);
          transform: translate(-0.3em, 0.15em) rotate(315deg);
}
/* Alternate sizes */
.chevron-sm {
    font-size: .75rem;
}
.chevron-lg {
    font-size: 2rem
}
.chevron-lg::before,
    .chevron-lg::after {
  border-width: 2px 2px 0 0;
}
/*
Alternate colors

Classes: chevron-primary chevron-inverse chevron-disabled

Wrapper: gray

Markup:
<i class="chevron-e {{modifier_class}}"></i>

chevron-primary - bright blue
chevron-inverse - white
chevron-disabled - gray

Styleguide Sprites.Chevrons.Colors
*/
.chevron-primary {
    color: #00b5e2;
}
.chevron-inverse {
    color: #fff;
}
.chevron-disabled {
    color: hsl(200, 3.4%, 34.9%);
}
.sprite-dropdown {
    width: 20px;
    height: 20px;
    background-position: -78px 0px;
    background-image: url(../images/sprites-1x.png);
    vertical-align: text-bottom;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-dropdown {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-dropdown-main {
    width: 28px;
    height: 28px;
    background-position: -45px 0px;
    background-image: url(../images/sprites-1x.png);
    vertical-align: text-bottom;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-dropdown-main {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-plus-small {
    width: 16px;
    height: 16px;
    background-position: -103px -33px;
    background-image: url(../images/sprites-1x.png);
    vertical-align: text-bottom;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-small {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-minus-small {
    width: 16px;
    height: 16px;
    background-position: -124px -33px;
    background-image: url(../images/sprites-1x.png);
    vertical-align: text-bottom;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-small {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
/*.sprite-plus-large, /* deprecated */
.sprite-plus {
    display: inline-block;
    overflow: hidden;
    width: 34px;
    height: 34px;
    background-image: url(../images/sprites2-1x.png);
    background-repeat: no-repeat;
    background-position: -384px -264px;
    text-indent: -10000px;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/*.sprite-minus-large, /* deprecated */
.sprite-minus {
    display: inline-block;
    overflow: hidden;
    width: 34px;
    height: 34px;
    background-image: url(../images/sprites2-1x.png);
    background-repeat: no-repeat;
    background-position: -423px -264px;
    text-indent: -10000px;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-plus-large {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Change `sprite-plus-large` to `sprite-plus`.';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
    text-indent: 0 !important;
  }
.sprite-minus-large {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Change `sprite-minus-large` to `sprite-minus`.';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
    text-indent: 0 !important;
  }
.sprite-close-main {
    width: 28px;
    height: 28px;
    background-position: -103px 0;
    background-image: url(../images/sprites-1x.png);
    vertical-align: text-bottom;
  }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-close-main {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
/*
.logo-main {
  &:extend(.logo-ice);
}
.logo-main-sm {
  &:extend(.logo-ice-sm);
}
.logo-white {
  &:extend(.logo-ice-white);
}
.logo-inverse {
  &:extend(.logo-ice-inverse);
}
*/
/*
Social Networks

Classes: social-*

Sprites for various social networks

Markup:
<i class="{{modifier_class}}"></i>

social-twitter - twitter
social-linkedin - linked-in
social-facebook - facebook
social-email - email
social-instagram - instagram
social-periscope - periscope
social-youtube - youtube
social-pinterest - pinterest
social-snapchat - snapchat

Styleguide Sprites.Social
*/
/*
Variations

Classes: social-* social-*-block social-*-sm social-*-block-sm

There are four available variations for each of the social networks.

Markup:
<i class="{{modifier_class}}"></i>

social-twitter - regular
social-twitter-block - block style
social-twitter-sm - small
social-twitter-block-sm - small block style

Styleguide Sprites.Social.Variations
*/
/* stylelint-disable unit-blacklist */
/* stylelint-enable unit-blacklist */
.social-twitter-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -10px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-twitter-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-twitter {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -10px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-twitter {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-twitter-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -14px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-twitter-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-twitter-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -14px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-twitter-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-linkedin-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -50px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-linkedin-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-linkedin {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -50px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-linkedin {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-linkedin-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -34px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-linkedin-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-linkedin-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -34px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-linkedin-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-facebook-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -90px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-facebook-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-facebook {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -90px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-facebook {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-facebook-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -54px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-facebook-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-facebook-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -54px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-facebook-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-email-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -130px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-email-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-email {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -130px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-email {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-email-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -74px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-email-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-email-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -74px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-email-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-instagram-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -171px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-instagram-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-instagram {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -171px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-instagram {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-instagram-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -94px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-instagram-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-instagram-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -94px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-instagram-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-periscope-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -211px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-periscope-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-periscope {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -211px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-periscope {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-periscope-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -115px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-periscope-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-periscope-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -115px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-periscope-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-youtube-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -251px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-youtube-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-youtube {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -251px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-youtube {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-youtube-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -135px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-youtube-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-youtube-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -135px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-youtube-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-pinterest-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -291px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-pinterest-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-pinterest {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -291px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-pinterest {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-pinterest-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -155px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-pinterest-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-pinterest-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -155px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-pinterest-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-snapchat-block {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -332px -8px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-snapchat-block {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-snapchat {
  display: inline-block;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -332px -48px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-snapchat {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-snapchat-block-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -175px -119px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-snapchat-block-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
.social-snapchat-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-image: url(../images/social-1x.png);
  background-repeat: no-repeat;
  background-position: -175px -139px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .social-snapchat-sm {
    background-image: url(../images/social-2x.png);
    background-size: 376px 179px;
  }
}
/* stylelint-disable unit-blacklist */
.inverse.social-twitter,
.inverse.social-linkedin,
.inverse.social-facebook,
.inverse.social-email,
.inverse.social-instagram,
.inverse.social-periscope,
.inverse.social-youtube,
.inverse.social-pinterest,
.inverse.social-snapchat,
.inverse .social-twitter,
.inverse .social-linkedin,
.inverse .social-facebook,
.inverse .social-email,
.inverse .social-instagram,
.inverse .social-periscope,
.inverse .social-youtube,
.inverse .social-pinterest,
.inverse .social-snapchat {
  background-position-y: -82px;
}
.inverse.social-twitter-sm,
.inverse.social-linkedin-sm,
.inverse.social-facebook-sm,
.inverse.social-email-sm,
.inverse.social-instagram-sm,
.inverse.social-periscope-sm,
.inverse.social-youtube-sm,
.inverse.social-pinterest-sm,
.inverse.social-snapchat-sm,
.inverse .social-twitter-sm,
.inverse .social-linkedin-sm,
.inverse .social-facebook-sm,
.inverse .social-email-sm,
.inverse .social-instagram-sm,
.inverse .social-periscope-sm,
.inverse .social-youtube-sm,
.inverse .social-pinterest-sm,
.inverse .social-snapchat-sm {
  background-position-y: -157px;
}
/* stylelint-enable unit-blacklist */
/* @import (reference) "modules/utilities/responsive"; */
/*
 * Extended modules
 * Supplements modules found in _core
 */
/* @import "layout"; /* already in core... necessary here? */
.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: 0.9375rem;
  padding-right: 0.9375rem;
}
.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-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
/*
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: 0%;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: 0%;
}
*/
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 768px) {
  .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-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  /*
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: 0%;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: 0%;
  }
  */
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 980px) {
  .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-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  /*
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: 0%;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: 0%;
  }
  */
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@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-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  /*
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: 0%;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: 0%;
  }
  */
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}
/*
Compact

Stylesheet: extended

Classes: form-compact

Use this option for tighter spacing and smaller inputs. This is especially useful for webapps with a lot of inputs and buttons. This also works in conjuction with `form-inline`

Markup:
<form class="form-compact">
  <div class="row">
    <div class="form-group true-grid-3">
      <label for="compact-form-email">Email address</label>
      <input type="email" class="form-control" id="compact-form-email" placeholder="Enter email">
    </div>
  </div>
  <div class="row">
    <div class="form-group true-grid-3">
      <label for="compact-form-password">
        Password <span class="form-label-additional">Min. 8 characters</span>
      </label>
      <input type="password" class="form-control" id="compact-form-password" placeholder="Password">
    </div>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"><i></i> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>

Markup2:
<form class="form-compact form-inline row">
  <div class="form-group true-grid-4">
    <label for="compact-inlino-input">Input</label>
    <input id="compact-inlino-input" type="text" class="form-control"/>
  </div>
  <div class="form-group true-grid-3">
    <label for="compact-inline-select">Input</label>
    <select id="compact-inline-select" type="text">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
  <div class="true-grid-2">
    <button class="btn btn-primary btn-sm">Submit</button>
  </div>
</form>

Styleguide Forms.Compact
*/
.form-compact .form-control,
  .form-compact .chosen-container {
  font-size: .875rem;
}
.form-compact.form-inline .form-control {
  padding: 0.09em .5em;
}
.form-compact.form-inline .chosen-container,
    .form-compact.form-inline .selectbox {
  padding: 0.03em 0;
}
.form-compact.form-inline .btn {
  height: 1.75em;
  margin-top: 2.6em;
  font-size: .875em;
  line-height: 1;
}
/*
Inline

Stylesheet: extended

Classes: form-inline

Make forms appear inline with `form-inline`. Inputs will still stack horizontally on small devices. Be sure to use the `form-group` class as always. You can optionally use the grid system to set widths of inputs.

Markup:
<form class="form-inline row">
  <div class="form-group true-grid-4">
    <label for="inline-input-id">Input</label>
    <input id="inline-input-id" type="text" class="form-control"/>
  </div>
  <div class="form-group true-grid-3">
    <label for="inline-select-id">Input</label>
    <select id="inline-select-id" type="text">
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
  <div class="true-grid-2">
    <button class="btn btn-primary">Submit</button>
  </div>
</form>

Styleguide Forms.Inline
*/
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px; /* space out consecutive inline controls */
}
@media screen and (min-width: 768px), print {
  .form-inline {
    /* Inline-block all the things for "inline" */
  }
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline {
    /* In navbar-form, allow folks to *not* use `.form-group` */
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    /* Prevent labels from stacking above inputs in `.form-group` */
    vertical-align: middle;
  }
  .form-inline {
    /* Input groups need that 100% width though */
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline {
    /* Remove default margin on radios/checkboxes that were used for stacking, and
         then undo the floating of radios and checkboxes to match (which also avoids
         a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). */
  }
  .form-inline .radio,
    .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 2.14286em;
    margin-right: 2.25rem;
    padding-left: 2.25rem;
    vertical-align: bottom;
  }
  .form-inline .radio input[type="radio"],
    .form-inline .checkbox input[type="checkbox"] {
    float: left;
    margin-left: -var(--grid-gutter-width);
  }
  .form-inline .form-control,
    .form-inline select.form-control + .chosen-container {
    margin-top: 1.75rem;
    width: 100%;
  }
  .form-inline .checkbox {
    margin-top: 1.75rem;
    margin-bottom: 0;
  }
  .form-inline .btn {
    margin-top: 1.75rem;
    height: calc(1.75em * 1em);
    line-height: 1;
    vertical-align: top;
  }
  .form-inline label + .form-control,
    .form-inline label + .btn,
    .form-inline label + select.form-control + .chosen-container,
    .form-inline label + div > .form-control,
    .form-inline label + div > .btn {
    margin-top: 0;
    /* remove placeholder when label present */
  }
  .form-inline label {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .form-inline .has-feedback .form-control-feedback {
    /* Reposition the icon because it's now within a grid column and columns have
           * `position: relative;` on them. Also accounts for the grid gutter padding. */
    top: 0;
  }
  .form-inline [class*="true-grid-"] .form-control,
      .form-inline [class*="true-grid-"] .btn {
    min-width: 100%;
  }
  .form-inline [class*="true-grid-"] .btn {
    display: block;
  }
  .form-inline [class*="true-grid-"] .btn-group > .btn {
    width: inherit;
  }
}
/*
Form addons

Stylesheet: extended

Classes: input-group input-group-addon

Attach an addon label to the beginning or the end of an input. Useful to indicate units such as dollars or percent.

Markup:
<div class="input-group">
  <div class="input-group-addon">$</div>
  <input class="form-control" type="number" placeholder="Enter amount">
</div>

Markup2:
<div class="input-group">
  <input class="form-control" type="number" placeholder="Enter percent">
  <div class="input-group-addon">%</div>
</div>

Markup3:
<div class="input-group">
  <input class="form-control" type="text" placeholder="Enter value">
  <button class="input-group-btn btn">Submit</button>
</div>

Styleguide Forms.Addons
*/
.input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
.input-group > * {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.625;
}
.input-group > * + * {
  margin-left: -1px;
}
.input-group-addon {
  padding: 0 0.85714em;
  border: 1px solid hsl(150, 1.1%, 63.9%);
  color: hsl(200, 3.4%, 34.9%);
  background-color: hsl(150, 2.3%, 82.7%);
}
.input-group-btn {
  z-index: 1; /* ensure border appears above input border */
}
/* @import "forms/states"; /* already in core */
/*
Radio links

Stylesheet: extended

Classes: radio-link

An alternate styling for radio buttons.

Markup:
<legend>Time zone</legend>
<div class="radio-link">
  <label>
    <input type="radio" name="time-zone" value="new-york" checked>
    <span>New York</span>
  </label>
  <label>
    <input type="radio" name="time-zone" value="london">
    <span>London</span>
  </label>
  <label>
    <input type="radio" name="time-zone" value="singapore">
    <span>Singapore/Hong Kong</span>
  </label>
</div>

Styleguide Forms.Radio-Links
*/
.radio-link label {
  color: #00b5e2;
  margin-right: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}
.radio-link input[type="radio"] {
  display: none;
}
.radio-link input[type="radio"]:checked + span {
  color: #000;
}
/*
Date Range

Stylesheet: extended

Classes: form-date-range

Instead of a datepicker, you can also use select boxes for choosing a date range.

Markup:
<div class="row">
  <div class="form-group true-grid-8 form-date-range">
    <label>Date Range with Selects</label>
    <div class="form-date-range-begin">
      <select name="from-month">
        <option>January</option>
        <option>February</option>
      </select>
      <select name="from-year">
        <option>2014</option>
      </select>
    </div>
    <span class="form-date-range-to">to</span>
    <div class="form-date-range-end">
      <select name="to-month">
        <option>January</option>
        <option>February</option>
      </select>
      <select name="to-year">
        <option>2014</option>
      </select>
    </div>
  </div>
</div>

Styleguide Forms.Datepicker.Date-Range
*/
.form-date-range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}
.form-date-range > label {
  width: 100%;
}
.form-date-range > input,
  .form-date-range > select,
  .form-date-range > .chosen-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}
.form-date-range > input + input,
    .form-date-range > input + select,
    .form-date-range > input + .chosen-container,
    .form-date-range > select + input,
    .form-date-range > select + select,
    .form-date-range > select + .chosen-container,
    .form-date-range > .chosen-container + input,
    .form-date-range > .chosen-container + select,
    .form-date-range > .chosen-container + .chosen-container {
  margin-left: 0.6em;
}
.form-date-range > input > *, .form-date-range > select > *, .form-date-range > .chosen-container > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}
.form-date-range-to {
  padding: 0 0.2em;
  -ms-flex-item-align: start;
      align-self: flex-start;
  text-transform: uppercase;
}
.form-date-range-begin,
.form-date-range-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  margin-bottom: 0
}
.form-date-range-begin > *, .form-date-range-end > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}
.form-date-range-begin .chosen-container, .form-date-range-end .chosen-container {
  min-width: 0;
  min-width: initial;
}
/*
Helper classes

Stylesheet: extended

There are a handful of helper classes for additional styling options

Weight: 20

Styleguide Forms.Helpers
*/
/*
Additional label

Stylesheet: extended

Classes: form-label-additional

Used to add a bit of helper text to the label.

Markup:
<div class="form-group true-grid-5">
  <label for="exampleInputPassword1">
    Password <span class="form-label-additional">Min. 8 characters</span>
  </label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

Styleguide Forms.Helpers.Additional-Label
*/
label > .form-label-additional {
    color: hsl(200, 3.4%, 34.9%);
    margin-left: 5px
}
label > .form-label-additional:before {
  content: '/';
  margin-right: 5px;
}
.form-control-rich-text {
    height: auto
}
.form-control-rich-text p:last-child {
  margin-bottom: 0;
}
/*
Form columns

Stylesheet: extended

Classes: form-column

Use in conjunction with the grid to organize portions of the form into columns.

Markup:
<fieldset class="form-column true-grid-3">
  <div class="form-group">
    <label>Pick a number</label>
    <select name="foo" class="form-control">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</fieldset>
<fieldset class="form-column true-grid-6">
  <div class="row">
    <div class="form-group true-grid-3">
      <label>First Name</label>
      <input type="text" class="form-control"/>
    </div>
    <div class="form-group true-grid-3">
      <label>Last Name</label>
      <input type="text" class="form-control"/>
    </div>
  </div>
</fieldset>

Styleguide Forms.Helpers.Columns
*/
.form-column.form-column {
    margin-left: -1px;
    margin-bottom: 1.5652rem;
    padding: 0 35px;
    border-right: 1px solid hsl(150, 1.1%, 63.9%);
    border-left: 1px solid hsl(150, 1.1%, 63.9%)
}
.form-column.form-column:first-child {
  padding-left: 0;
  border-left: 0;
  margin-left: 0;
}
.form-column.form-column:last-child {
  padding-right: 0;
  border-right: 0;
}
fieldset.form-column.form-column {
  border-bottom: 0;
}
.fieldset-primary {
    margin-top: 30px;
    margin-bottom: 30px;
}
.radio-inline {
    margin-right: 10px
}
.radio-inline + .radio-inline {
  margin-left: 0;
}
.radio-inline:last-of-type {
  margin-right: 0;
}
/*
Datepicker

Stylesheet: extended

Classes: datepicker-control

Use the class `datepicker-control` to indicate date pickers. Both [jQuery UI](http://jqueryui.com/datepicker/) and [Bootstrap](http://www.eyecon.ro/bootstrap-datepicker/) datepickers are supported.

Markup:
<div class="row">
  <div class="true-grid-4">
    <input type="text" class="form-control datepicker-control" value="18-Feb-2014"/>
  </div>
</div>

Markup2:
<div class="row">
  <div class="form-group true-grid-6 form-date-range">
    <label>Date Range with Pickers</label>
    <input type="text" value="18-Feb-2014" class="form-control datepicker-control form-date-range-begin">
    <span class="form-date-range-to">to</span>
    <input type="text" value="18-Feb-2014" class="form-control datepicker-control form-date-range-end">
  </div>
</div>

Styleguide Forms.Datepicker
*/
.datepicker-control {
    padding: .3125em 1.375em .3125em .75em;
    height: 1.75em;
    font-size: 1em;
    line-height: 1.65;
    font-weight: 400;
    border: 1px solid hsl(150, 1.1%, 63.9%);
    background: #fff url(../images/calendar-1x.png) no-repeat 100% center;
    -webkit-transition: none;
    transition: none
}
.datepicker-control:focus,
    .datepicker-control.focus,
    .datepicker-control:focus:hover {
  background-color: #fff;
  color: #00b5e2;
  border: 1px solid hsl(150, 1.1%, 63.9%);
  background-image: none;
  padding-right: .75em;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
    .datepicker-control {
        background-image: url(../images/calendar-2x.png);
        background-size: 22px;
    }
}
.datepicker,
.dropdown-menu.datepicker {
  background-color: #fff;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid #00b5e2;
  min-width: 280px;
  right: auto
}
.datepicker table, .dropdown-menu.datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}
.datepicker table > thead > tr > th, .dropdown-menu.datepicker table > thead > tr > th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
}
.datepicker table > thead > tr .prev,
        .datepicker table > thead > tr .datepicker-switch,
        .datepicker table > thead > tr .next,
        .dropdown-menu.datepicker table > thead > tr .prev,
        .dropdown-menu.datepicker table > thead > tr .datepicker-switch,
        .dropdown-menu.datepicker table > thead > tr .next {
  color: hsl(200, 3.4%, 34.9%);
  font-weight: 400;
  cursor: pointer;
}
.datepicker table > thead > tr .prev,
        .datepicker table > thead > tr .next,
        .dropdown-menu.datepicker table > thead > tr .prev,
        .dropdown-menu.datepicker table > thead > tr .next {
  position: relative;
  color: transparent;
  display: block;
  /* allows abs. positioning of :after in firefox */
  margin-bottom: -1px;
  /* fixes bottom border position in chrome */
}
.datepicker table > thead > tr .prev:after, .datepicker table > thead > tr .next:after, .dropdown-menu.datepicker table > thead > tr .prev:after, .dropdown-menu.datepicker table > thead > tr .next:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -3px;
}
.datepicker table > thead > tr .prev:after, .dropdown-menu.datepicker table > thead > tr .prev:after {
  color: #00b5e2;
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(-135deg);
          transform: translate(-0.5em, 0.2em) rotate(-135deg);
}
.datepicker table > thead > tr .next:after, .dropdown-menu.datepicker table > thead > tr .next:after {
  color: #00b5e2;
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(45deg);
          transform: translate(-0.5em, 0.2em) rotate(45deg);
}
.datepicker table > thead > tr .datepicker-switch, .dropdown-menu.datepicker table > thead > tr .datepicker-switch {
  text-transform: none;
}
.datepicker table > thead > tr:first-child > th, .dropdown-menu.datepicker table > thead > tr:first-child > th {
  border-bottom: 1px solid #00b5e2;
}
.datepicker .datepicker-days tbody > tr > td,
  .datepicker .datepicker-months td > span,
  .datepicker .datepicker-years td > span,
  .dropdown-menu.datepicker .datepicker-days tbody > tr > td,
  .dropdown-menu.datepicker .datepicker-months td > span,
  .dropdown-menu.datepicker .datepicker-years td > span {
  padding: 5px;
  text-align: center;
  cursor: pointer;
  color: #000;
  font-weight: 700;
}
.datepicker .datepicker-days tbody > tr > td:hover, .datepicker .datepicker-months td > span:hover, .datepicker .datepicker-years td > span:hover, .dropdown-menu.datepicker .datepicker-days tbody > tr > td:hover, .dropdown-menu.datepicker .datepicker-months td > span:hover, .dropdown-menu.datepicker .datepicker-years td > span:hover {
  background-color: hsl(150, 2.3%, 82.7%);
}
.datepicker .datepicker-days tbody > tr > td.today, .datepicker .datepicker-months td > span.today, .datepicker .datepicker-years td > span.today, .dropdown-menu.datepicker .datepicker-days tbody > tr > td.today, .dropdown-menu.datepicker .datepicker-months td > span.today, .dropdown-menu.datepicker .datepicker-years td > span.today {
  border: #71c5e8 1px solid;
}
.datepicker .datepicker-days tbody > tr > td.active,
    .datepicker .datepicker-days tbody > tr > td.is-active,
    .datepicker .datepicker-months td > span.active,
    .datepicker .datepicker-months td > span.is-active,
    .datepicker .datepicker-years td > span.active,
    .datepicker .datepicker-years td > span.is-active,
    .dropdown-menu.datepicker .datepicker-days tbody > tr > td.active,
    .dropdown-menu.datepicker .datepicker-days tbody > tr > td.is-active,
    .dropdown-menu.datepicker .datepicker-months td > span.active,
    .dropdown-menu.datepicker .datepicker-months td > span.is-active,
    .dropdown-menu.datepicker .datepicker-years td > span.active,
    .dropdown-menu.datepicker .datepicker-years td > span.is-active {
  color: #00b5e2;
}
.datepicker .datepicker-days tbody > tr > td.new,
    .datepicker .datepicker-days tbody > tr > td.is-new,
    .datepicker .datepicker-months td > span.new,
    .datepicker .datepicker-months td > span.is-new,
    .datepicker .datepicker-years td > span.new,
    .datepicker .datepicker-years td > span.is-new,
    .dropdown-menu.datepicker .datepicker-days tbody > tr > td.new,
    .dropdown-menu.datepicker .datepicker-days tbody > tr > td.is-new,
    .dropdown-menu.datepicker .datepicker-months td > span.new,
    .dropdown-menu.datepicker .datepicker-months td > span.is-new,
    .dropdown-menu.datepicker .datepicker-years td > span.new,
    .dropdown-menu.datepicker .datepicker-years td > span.is-new {
  color: hsl(200, 3.4%, 34.9%);
}
.datepicker .datepicker-days tbody > tr > td.disabled,
    .datepicker .datepicker-days tbody > tr > td.is-disabled,
    .datepicker .datepicker-months td > span.disabled,
    .datepicker .datepicker-months td > span.is-disabled,
    .datepicker .datepicker-years td > span.disabled,
    .datepicker .datepicker-years td > span.is-disabled,
    .dropdown-menu.datepicker .datepicker-days tbody > tr > td.disabled,
    .dropdown-menu.datepicker .datepicker-days tbody > tr > td.is-disabled,
    .dropdown-menu.datepicker .datepicker-months td > span.disabled,
    .dropdown-menu.datepicker .datepicker-months td > span.is-disabled,
    .dropdown-menu.datepicker .datepicker-years td > span.disabled,
    .dropdown-menu.datepicker .datepicker-years td > span.is-disabled {
  cursor: default;
  color: hsl(150, 1.1%, 63.9%);
  font-weight: 400;
}
.datepicker .datepicker-days tbody > tr > td.disabled:hover, .datepicker .datepicker-days tbody > tr > td.is-disabled:hover, .datepicker .datepicker-months td > span.disabled:hover, .datepicker .datepicker-months td > span.is-disabled:hover, .datepicker .datepicker-years td > span.disabled:hover, .datepicker .datepicker-years td > span.is-disabled:hover, .dropdown-menu.datepicker .datepicker-days tbody > tr > td.disabled:hover, .dropdown-menu.datepicker .datepicker-days tbody > tr > td.is-disabled:hover, .dropdown-menu.datepicker .datepicker-months td > span.disabled:hover, .dropdown-menu.datepicker .datepicker-months td > span.is-disabled:hover, .dropdown-menu.datepicker .datepicker-years td > span.disabled:hover, .dropdown-menu.datepicker .datepicker-years td > span.is-disabled:hover {
  background-color: transparent;
}
.datepicker .datepicker-months table, .datepicker .datepicker-years table, .dropdown-menu.datepicker .datepicker-months table, .dropdown-menu.datepicker .datepicker-years table {
  width: 280px;
}
.datepicker .datepicker-months table td > span, .datepicker .datepicker-years table td > span, .dropdown-menu.datepicker .datepicker-months table td > span, .dropdown-menu.datepicker .datepicker-years table td > span {
  float: left;
  width: 25%;
  height: 50px;
  line-height: 40px;
}
.datepicker .datepicker-years table > thead > tr > th, .dropdown-menu.datepicker .datepicker-years table > thead > tr > th {
  margin-bottom: 0;
}
.datepicker-dropdown {
  padding: 0;
  z-index: 1000 !important;
}
/* jQuery UI popup */
.ui-datepicker {
    width: 20em;
    display: none;
    background: #fff;
    margin-top: -1px /* overlap border with input border */
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 5px 0;
  background-color: #fff;
  color: #00b5e2;
  border: 1px solid #00b5e2;
  border-bottom-width: 0;
}
.ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}
.ui-datepicker .ui-datepicker-next {
  right: 6px;
}
.ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 60%;
  top: 50%;
  margin-top: -3px;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
  width: 49%;
}
.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}
.ui-datepicker .ui-datepicker-calendar {
  border: 1px solid #00b5e2;
}
.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  border: 0;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
}
.ui-datepicker td span,
    .ui-datepicker td a {
  color: #000;
  display: block;
  padding: 5px;
  text-align: center;
  text-decoration: none;
}
.ui-datepicker td > a.ui-state-default {
  border: 1px solid transparent;
}
.ui-datepicker td > a.ui-state-default:hover {
  background-color: hsl(150, 2.3%, 82.7%);
}
.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 5px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: 5px 5px*3;
  width: auto;
  overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}
.ui-datepicker td > a.ui-state-active {
  color: #00b5e2;
}
.ui-datepicker .ui-state-disabled,
        .ui-datepicker .ui-state-disabled span {
  color: hsl(150, 1.1%, 63.9%);
}
.ui-datepicker .ui-state-disabled.ui-corner-all {
  opacity: 0.5;
  cursor: default;
}
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}
.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0em;
}
.ui-icon {
    text-indent: -9999px
}
.ui-icon.ui-icon-circle-triangle-e {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(45deg);
          transform: translate(-0.5em, 0.2em) rotate(45deg);
}
.ui-icon.ui-icon-circle-triangle-w {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(-135deg);
          transform: translate(-0.5em, 0.2em) rotate(-135deg);
}
.ui-icon:hover {
  opacity: 0.85;
}
/*
Dropdowns

Stylesheet: extended

Classes: dropdown dropdown-toggle dropdown-menu divider

Use JavaScript to toggle the `is-open` class on the dropdown container. See the [Bootstrap documentation](http://getbootstrap.com/javascript/#dropdowns) for instructions for using their script.

Markup:
<div class="dropdown">
  <a href="#" class="dropdown-toggle">Toggle menu</a>
  <ul class="dropdown-menu">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li class="divider"></li>
    <li><a href="#">Final</a></li>
  </ul>
</div>

Styleguide Components.Dropdowns
*/
.dropdown {
  position: relative;
  text-align: left;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 0; /* override default ul */
  list-style: none;
  font-size: 1rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  background-clip: padding-box
  /*overflow: hidden; broken: hides submenus */

  /* Dividers (basically an hr) within the dropdown */
}
.dropdown-menu .divider {
  height: 1px;
  margin: 0.6em 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu {
  /* Links within the dropdown menu */
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.65;
  color: hsl(345, 6.1%, 12.9%);
  white-space: nowrap;
  /* prevent links from randomly breaking onto new lines */
}
.dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
  text-decoration: none;
  color: rgb(30, 30, 30);
  background-color: #f5f5f5;
}
.dropdown-menu > .active {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " "Change `active` to `is-active`." "2.0.0";
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.dropdown-menu > .disabled {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " "Change `disabled` to `is-disabled`." "2.0.0";
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.dropdown-menu > .is-active > a,
  .dropdown-menu > .is-active > a:hover,
  .dropdown-menu > .is-active > a:focus,
  .dropdown-menu > li > a:focus,
  .dropdown-menu > li > a:focus:hover,
  .dropdown-menu > li > a:focus:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  background-color: #00b5e2;
}
.dropdown-menu > .disabled > a,
  .dropdown-menu > .disabled > a:hover,
  .dropdown-menu > .disabled > a:focus,
  .dropdown-menu > .is-disabled > a,
  .dropdown-menu > .is-disabled > a:hover,
  .dropdown-menu > .is-disabled > a:focus {
  color: hsl(150, 1.1%, 63.9%);
}
.dropdown-menu > .disabled > a:hover,
  .dropdown-menu > .disabled > a:focus,
  .dropdown-menu > .is-disabled > a:hover,
  .dropdown-menu > .is-disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  cursor: not-allowed;
}
.dropdown-menu.open {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " "Change `open` to `is-open`." "2.0.0";
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.dropdown.open > .dropdown-menu, .dropdown.is-open > .dropdown-menu {
  display: block;
}
.dropdown.open > a, .dropdown.is-open > a {
  outline: 0;
}
.dropdown-menu-right,
.pull-right > .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: (1000 - 10);
}
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}
@media (min-width: 980px), print {
  .navbar__right .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
  }
}
.dropdown-search .dropdown-menu {
  left: auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 40em;
}
.dropdown-search .dropdown-menu > li {
  text-align: right;
}
/*
Submenus

Stylesheet: extended

Classes: dropdown-submenu

Markup:
<div class="dropdown">
  <a href="#" class="dropdown-toggle">Toggle menu</a>
  <ul class="dropdown-menu">
    <li class="dropdown-submenu">
      <a href="#">
        View Settlement Reports for All Markets
      </a>
      <div class="dropdown-menu">
        <p>This is the submenu content</p>
      </div>
    </li>
    <li><a href="#">
      Daily and Historical Volume and Open Interest
    </a></li>
  </ul>
</div>

Styleguide Components.Dropdowns.Submenus
*/
.dropdown-submenu {
    position:relative
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu > a::after {
  display: block;
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -5px;
  content: " ";
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(45deg);
          transform: translate(-0.5em, 0.2em) rotate(45deg);
}
.dropdown-submenu:hover > a::after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  border-radius: 6px 0 6px 6px;
}
/*
TODO: Are these still in use?
@import "navbar/navbar";
@import "navbar/nav";
@import "navbar/helpers";
*/
/*
Pagination

Stylesheet: extended

Classes: pagination pagination-summary

Markup:
<div class="pagination-summary">1&ndash;10 of about 190 results</div>
<ul class="pagination">
  <li class="is-disabled"><a href="#">Previous</a></li>
  <li class="is-active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li class="is-disabled"><span>&hellip;</span></li>
  <li><a href="#">Next</a></li>
</ul>

Styleguide Components.Pagination
*/
.pagination-summary {
  float: left;
  margin: 1.65em 0;
  padding-right: 1em;
}
.pagination {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding-left: 0;
  margin: 1.65em 0;
  list-style-type: none
}
.pagination > li > a,
    .pagination > li > span {
  padding: 0 0.5em;
  margin-left: -1px;
  border-left: 1px solid hsl(200, 3.4%, 34.9%);
  color: #00b5e2;
  text-transform: uppercase;
}
.pagination > li:first-child > a,
      .pagination > li:first-child > span {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}
.pagination > li:last-child > a,
      .pagination > li:last-child > span {
  padding-right: 0;
}
.pagination > li > a:hover,
    .pagination > li > a:focus,
    .pagination > li > span:hover,
    .pagination > li > span:focus {
  color: #00b5e2;
  border-color: hsl(200, 3.4%, 34.9%);
  text-decoration: none;
}
.pagination > .active > a,
      .pagination > .active > a:hover,
      .pagination > .active > a:focus,
      .pagination > .active > span,
      .pagination > .active > span:hover,
      .pagination > .active > span:focus,
      .pagination > .is-active > a,
      .pagination > .is-active > a:hover,
      .pagination > .is-active > a:focus,
      .pagination > .is-active > span,
      .pagination > .is-active > span:hover,
      .pagination > .is-active > span:focus {
  z-index: 2;
  color: hsl(150, 1.1%, 63.9%);
  border-color: hsl(200, 3.4%, 34.9%);
  cursor: default;
  text-decoration: none;
}
.pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus,
    .pagination > .is-disabled > span,
    .pagination > .is-disabled > span:hover,
    .pagination > .is-disabled > span:focus,
    .pagination > .is-disabled > a,
    .pagination > .is-disabled > a:hover,
    .pagination > .is-disabled > a:focus {
  color: hsl(150, 1.1%, 63.9%);
  border-color: hsl(200, 3.4%, 34.9%);
  text-decoration: none;
}
@media (min-width: 980px) {
  .pagination {
    font-size: 0.875em;
  }
}
/*
Pager

Stylesheet: extended

Classes: pager

Markup:
<ul class="pager">
  <li>1&ndash;10 of about 190 results</li>
  <li><a href="#">&lsaquo; Previous</a></li>
  <li><a href="#">Next &rsaquo;</a></li>
</ul>

Styleguide Components.Pagination.Pager
*/
.pager::before,
  .pager::after {
  content: " ";
  display: table;
}
.pager::after {
  clear: both;
}
.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding-left: 0;
  margin: 1.65em 0;
  list-style: none;
}
.pager > li > a,
    .pager > li > span {
  display: inline-block;
  padding: 0.5em 1em;
  font-weight: 700;
  text-transform: uppercase;
}
.pager .pager-select {
  min-width: 12em;
}
.pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span,
    .pager .is-disabled > a,
    .pager .is-disabled > a:hover,
    .pager .is-disabled > a:focus,
    .pager .is-disabled > span {
  color: hsl(150, 1.1%, 63.9%);
  cursor: not-allowed;
  text-decoration: none;
}
.pager form,
  .pager .chosen-container {
  display: inline-block;
}
/*
Labels

Stylesheet: extended

Classes: label label-*

Markup:
<span class="label {{modifier_class}}">Label</span>
<a href="#" class="label {{modifier_class}}">Link</a>

label-primary - primary
label-success - success
label-info - info
label-warning - warning
label-danger - danger

Styleguide Components.Labels
*/
.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-tranform: none;
  white-space: nowrap;
  vertical-align: baseline
}
.label[href]:hover,
    .label[href]:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.label:empty {
  display: none;
}
.btn .label {
  position: relative;
  top: -1px;
}
@media print {
  .label {
    border: 1px solid black;
    color: white !important;
  }
}
.label {
  background-color: hsl(150, 1.1%, 63.9%);
}
.label[href]:hover,
  .label[href]:focus {
  background-color: rgb(137, 139, 138);
}
.label-primary {
  background-color: #00b5e2;
}
.label-primary[href]:hover,
  .label-primary[href]:focus {
  background-color: rgb(0, 139, 173);
}
.label-success {
  background-color: #00c300;
}
.label-success[href]:hover,
  .label-success[href]:focus {
  background-color: rgb(0, 143, 0);
}
.label-info {
  background-color: #71c5e8;
}
.label-info[href]:hover,
  .label-info[href]:focus {
  background-color: rgb(71, 179, 225);
}
.label-warning {
  background-color: #f26407;
}
.label-warning[href]:hover,
  .label-warning[href]:focus {
  background-color: rgb(193, 81, 6);
}
.label-danger {
  background-color: #c9001a;
}
.label-danger[href]:hover,
  .label-danger[href]:focus {
  background-color: rgb(148, 0, 20);
}
/*
Badges

Stylesheet: extended

Highlight new or unread items with `badge`.

Markup:
<a href="#">Inbox <span class="badge">42</span></a>

Styleguide: Components.Badges
*/
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-style: normal;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: hsl(150, 1.1%, 63.9%);
  border: 0;
  border-radius: 10px
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}
.btn-xs .badge {
  top: 0;
  padding: 1px 5px;
}
a.badge:hover,
  a.badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
/*
Contextual Badges

Use empty badges with contextual classes for color and meaningful icons:

Markup:
<i class="badge {{modifier_class}}"></i>

badge-success - green
badge-info    - blue
badge-warning - yellow
badge-danger  - red

Styleguide Components.Badges.Contextual
*/
.badge-info:empty, .badge-success:empty, .badge-warning:empty, .badge-danger:empty {
  display: inline-block;
  padding: 0.2143em 0.5714em;
}
.badge-info {
  background-color: #71c5e8;
}
.badge-info::before {
  content: 'i ';
}
.badge-success {
  background-color: #00c300
}
.badge-success::before {
  content: "\2713";
}
.badge-success:empty {
  padding-right: 0.3571em;
  padding-left: 0.3571em;
}
.badge-warning {
  background-color: #f26407;
}
.badge-warning::before {
  content: '! ';
}
.badge-danger {
  background-color: #c9001a;
}
.badge-danger::before {
  content: '! ';
}
/*
Images

Stylesheet: extended

Various helper classes for images and background images.

Weight: 9

Styleguide Images
*/
/*
Banner

Stylesheet: extended

Classes: img-banner

`<img>`s will always shrink to fit their container when they are too large. But sometimes, you will want it to stretch to fill the container when it is too small. This class will cause the image to scale up to fill the width of its container.

Markup:
<img src="../images/docs/placeholders/300x100.png" class="img-banner">

Styleguide Images.Banner
*/
img.img-banner {
  width: 100%;
}
/*
Fill background

Stylesheet: extended

Classes: img-fill

If you need to specify a background image that fills your container, use the `img-fill`. Then set a background-image in your stylesheet or an inline style to specify the image url.

Mix this class in with a container like a `panel` for formatting, or use `padded` to make it standalone:

Markup:
<div class="img-fill" style="background-image: url(../images/docs/placeholders/800x200.png)">
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Markup2:
<div class="panel panel-default img-fill" style="background-image: url(../images/docs/placeholders/800x200.png)">
  <div class="panel-body">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Markup3:
<div class="img-fill padded" style="background-image: url(../images/docs/placeholders/800x200.png)">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Styleguide Images.Fill
*/
.img-fill {
  background: center center no-repeat;
  background-size: cover;
}
img.img-fill {
  -o-object-fit: cover;
     object-fit: cover;
}
/*
Fit background image

Stylesheet: extended

Classes: img-fit

If you need to specify a background image that fits entirely inside your container, use the class `img-fit.` Then set a background-image in your stylesheet or an inline style to specify the image url.

Markup:
<div class="img-fit" style="background-image: url(../images/docs/placeholders/800x200.png)">
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Styleguide Images.Fit
*/
.img-fit {
  background: center center no-repeat;
  background-size: contain;
}
img.img-fit {
  -o-object-fit: contain;
     object-fit: contain;
}
/*
Panels

Stylesheet: extended

Classes: panel panel-heading panel-body panel-footer

A small panel of content. Muliple panels can be stacked one after the other

Markup:
<div class="panel">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    Panel content here.
  </div>
  <div class="panel-footer">Optional panel footer</div>
</div>

Weight: 20

Styleguide Panels
*/
.panel {
  border-top: 1px solid hsl(200, 3.4%, 34.9%);
  border-bottom: 1px solid hsl(200, 3.4%, 34.9%)
}
.panel + .panel {
  border-top: 0;
}
.panel-heading,
.panel-body,
.panel-footer {
  padding: 0.8em 0;
}
.panel-heading {
  border: 0;
  background-color: transparent;

  border: 0;
  font-size: 1.124em;
  font-weight: 800
}
.panel-heading > h1,
  .panel-heading > h2,
  .panel-heading > h3,
  .panel-heading > h4,
  .panel-heading > h5,
  .panel-heading > h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
}
.panel-heading > h1 > a, .panel-heading > h2 > a, .panel-heading > h3 > a, .panel-heading > h4 > a, .panel-heading > h5 > a, .panel-heading > h6 > a {
  color: inherit;
}
button.panel-heading {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.panel-body {
  border-top: 1px solid hsl(200, 3.4%, 34.9%)
}
.panel-body > :last-child {
  margin-bottom: 0;
}
.panel-footer {
  color: hsl(150, 1.1%, 63.9%);
}
.panel-aside {
  float: right;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 400;
}
/*
Collapsible

Stylesheet: extended

A panel where the body can be collapsed by clicking the header. Add/remove `is-collapsed` to open and close the panel.

Markup:
<div class="panel panel-collapsible">
  <button class="panel-heading">Non-collapsed panel</button>
  <div class="panel-body">
    Body is visible
  </div>
</div>
<div class="panel panel-collapsible is-collapsed">
  <button class="panel-heading">Collapsed panel</button>
  <div class="panel-body">
    Body is not visible
  </div>
</div>

Markup2:
<div class="panel panel-collapsible">
  <button class="panel-heading">
    Panel heading
    <span class="panel-aside">(1 item selected)</span>
  </button>
  <div class="panel-body">
    Body contents here
  </div>
</div>


Styleguide Panels.Collapsible
*/
.panel-collapsible > .panel-heading {
  position: relative;
  padding-right: 2.5em;
}
.panel-collapsible > .panel-heading::after {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -577px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .panel-collapsible > .panel-heading::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.panel-collapsible > .panel-heading::after {
  content: "";
  position: absolute;
  top: 1.1em;
  right: 1em;
}
.panel-collapsible {
  .panel-body {
    display: block;
  }
}
.panel-collapsible.is-collapsed .panel-heading::after {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -538px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .panel-collapsible.is-collapsed .panel-heading::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.panel-collapsible.is-collapsed .panel-body {
  display: none;
}
.modal-simple {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Please convert to a full modal as documented in the style guide.';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }

  display: none;
  position: fixed;
  top: 10%;
  right: 10%;
  bottom: 100px;
  left: 10%;
  padding: 2.25rem 2.25rem;
  background-color: #fff;
  border: 1px solid #00b5e2;
  border-bottom: 0;
  z-index: 1100;
  overflow: auto
}
.modal-simple.in {
  display: block;
}
.modal-simple:after {
  display: block;
  content: '';
  position: fixed;
  right: 10%;
  bottom: 45px;
  left: 10%;
  height: 55px;
  background-color: #fff;
  border: 1px solid #00b5e2;
  border-top: 0;
}
.modal-simple .modal-close {
  position: fixed;
  right: 10%;
  bottom: 45px;
  margin-right: 20px;
  margin-bottom: 10px;
  z-index: 1101;
}
@media --retina {
  .modal-simple {
    /* * NOTE: the ::after pseudo-element is hidden on retina chrome because of the
         * overflow: auto rule. This extends the modal down to include it. The scrollbar
         * renders a little differently, but it works. */
    bottom: 45px;
    padding-bottom: 45px;
  }
}
.modal-video {
  top: 10px;
  right: 20px;
  bottom: 10px;
  left: 20px;
  border-radius: 5px
}
.modal-video .modal-dialog {
  width: 100%;
  height: 390px;
  height: 48vw;
  margin: 0 auto;
}
.modal-video .modal-dialog .modal-content {
  height: 100%;
  padding-top: 0;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-video .modal-dialog .modal-content > .close,
      .modal-video .modal-dialog .modal-content .modal-header > .close {
  position: absolute;
  top: 5px;
  right: 10px;
  opacity: 1;
  z-index: 1100;
}
.modal-video .modal-dialog .modal-body {
  padding: 1.25rem;
  background-color: transparent;
}
.modal-video video.video {
  max-width: 100%;
  max-height: 99%;
}
.modal-video .oo-player-container .oo-player {
  padding-top: 0 !important;
}
@media (min-width: 768px) {
  .modal-video-md {
    width: 75%;
    margin: 0 auto
  }
  .modal-video-md .modal-dialog {
    height: 710px;
    height: 38vw;
  }

  .modal-video-sm {
    width: 50%;
    margin: 0 auto
  }

  .modal-video-sm .modal-dialog {
    height: 490px;
    height: 32vw;
  }

  .modal-video .modal-dialog .modal-body {
    margin-right: auto;
    margin-left: auto;
    padding: 1.25rem 3rem;
  }
}
/*
Landing Page

Stylesheet: extended

Classes: media media-landing media-object media-body media-link

Designed to go on landing pages, inside of a padded container (such as `landing-section`). Use a background-image on the `media-left` or `media-right`.

The height of this media object is determined purely by the content in the `media-body`. The image will be cropped to fit if necessary.

**TODO**: Convert to absolute positioning of `<img>`, so bg image isn’t necessary when the need is for the content to determine height.

Markup:
<div class="media-landing">
  <div class="media-left" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

Markup2:
<div class="media-landing">
  <div class="media-right" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

Styleguide Media.Landing
*/
.media-landing .media-left,
  .media-landing .media-right,
  .media-bleed .media-left,
  .media-bleed .media-right {
  width: 100%;
}
.media-landing .media-left > img, .media-landing .media-right > img, .media-bleed .media-left > img, .media-bleed .media-right > img {
  width: 100%;
}
.media-landing .media-body, .media-bleed .media-body {
  padding-top: 1.875em;
}
.media-landing .media-heading, .media-bleed .media-heading {
  margin-top: 0;
  margin-bottom: 0.6667em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
  color: hsl(214.7, 13.7%, 27.3%);
}
.media-landing .media-link, .media-bleed .media-link {
  display: inline-block;
  color: #00b5e2;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 700;
  /* copied from .btn-more */
  position: relative;
  padding-right: 1.5em;
}
.media-landing .media-link::after, .media-bleed .media-link::after {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(45deg);
          transform: translate(-0.5em, 0.2em) rotate(45deg);
  right: 0.2em;
  bottom: 42%;
}
.media-landing .media-link:hover, .media-bleed .media-link:hover {
  text-decoration: underline;
}
a.media,
a.media-landing {
  color: inherit;
  font-weight: inherit;
  border: 1px solid transparent;
  -webkit-transition: border-color 0.3s linear;
  transition: border-color 0.3s linear
}
a.media:hover, a.media-landing:hover {
  text-decoration: none;
  border-color: hsl(150, 1.1%, 63.9%);
}
a.media:focus, a.media-landing:focus {
  text-decoration: none;
  -webkit-box-shadow: 0 0 0.2em #00b5e2;
          box-shadow: 0 0 0.2em #00b5e2;
}
@media (max-width: 767px) {
  .media-landing .media-body,
    .media-landing .media-left + .media-body,
    .media-bleed .media-body,
    .media-bleed .media-left + .media-body {
    display: block;
    padding-left: 0;
    padding-right: 0;
  }
  .media-landing .media-left,
    .media-landing .media-right,
    .media-bleed .media-left,
    .media-bleed .media-right {
    display: block;
    min-height: 17.5em;
  }
}
@media (min-width: 768px), print {
  .media-landing,
  .media-bleed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch
  }
  .media-landing .media-left,
    .media-landing .media-right,
    .media-landing .media-body,
    .media-bleed .media-left,
    .media-bleed .media-right,
    .media-bleed .media-body {
    width: 50%;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
  }
  .media-landing .media-body, .media-bleed .media-body {
    padding-right: 2em;
    padding-bottom: 1.875em;
  }
  .media-landing .media-left + .media-body, .media-bleed .media-left + .media-body {
    padding-right: 0;
    padding-left: 2em;
  }
}
/*
Media Bleed

Stylesheet: extended

Classes: media media-bleed media-left/media-right media-body media-heading media-link

This is designed to go on landing pages, outside of any section containers (such as `landing-section`). It fills to the edges of the screen. Use a background-image on the `media-left` or `media-right`.

Markup:
<div class="media-bleed">
  <div class="media-left" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

Markup2:
<div class="media-bleed">
  <div class="media-right" style="background-image: url(../images/docs/gold.png);"/></div>
  <div class="media-body">
    <p class="media-heading">What we do</p>
    <p>In the late 1990s, we noticed a need for electronic trading that could bring transparency and accessibility to the global markets. So we built it. And, when we started noticing other tools our customers needed, we kept building.</p>
    <a class="media-link" href="#">Read more</a>
  </div>
</div>

Styleguide Media.Landing.Bleed
*/
/* NOTE: this shares a lot of styles with media-landing, mixed in by hand in that file */
.media-bleed {
  font-size: 1.15em
}
.media-bleed.is-alternate {
  background-color: hsl(180, 2.7%, 92.7%);
}
@media screen and (max-width: 767px) {
  .media-bleed .media-body,
    .media-bleed .media-left + .media-body {
    padding: 1em 1em;
  }
}
@media screen and (min-width: 768px), print {
  .media-bleed .media-left,
    .media-bleed .media-right {
    width: 40%;
    -webkit-box-flex: 5;
        -ms-flex: 5;
            flex: 5;
  }
  .media-bleed .media-body {
    width: 60%;
    -webkit-box-flex: 6;
        -ms-flex: 6;
            flex: 6;
    padding-top: 3.1em;
    padding-bottom: 3.1em;
  }
  .media-bleed .media-body {
    padding-left: 1em;
  }
  .media-bleed .media-left + .media-body {
    padding-right: 1em;
  }
}
@media screen and (min-width: 1200px) {
  .media-bleed .media-body {
    padding-left: 8.33333%;
    padding-top: 3.26em;
    padding-bottom: 3.26em;
  }
  .media-bleed .media-left + .media-body {
    padding-right: 8.33333%;
  }
}
/*
Attribution

Stylesheet: extended

Classes: media media-attribution

Mixin the media-attribution class with the base media class. Unlike other Media types, this does <strong>not</strong> support a `media-right` alternative.

Markup:
<div class="media media-attribution">
  <div class="media-left">
    <img class="media-object" src="../images/docs/sample-avatar.png"/>
  </div>
  <div class="media-body">
    <p class="media-heading">Tammy Graves</p>
    <p>Content Manager</p>
  </div>
</div>

Styleguide Media.Attribution
*/
.media-attribution {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* all breakpoints, unlike base .media */
  color: hsl(200, 3.4%, 34.9%);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}
.media-attribution .media-heading {
  margin-top: 0.2778em;
  color: hsl(214.7, 13.7%, 27.3%);
  font-size: 1.25rem;
}
.media-attribution .media-body {
  font-size: 0.9375rem;
  text-align: left;
}
.media-attribution .media-body > p {
  margin-bottom: 0.3125rem;
}
.media-attribution > .pull-left,
  .media-attribution > .media-left {
  margin-right: 1em;
  text-align: right;
}
.media-attribution > .pull-right,
  .media-attribution > .media-right {
  margin-left: 1em;
}
.media-attribution > .media-left,
  .media-attribution > .media-right,
  .media-attribution > .media-body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  width: 50%;
  min-height: 0;
  min-height: initial;
}
.media-attribution > .media-left + .media-body {
  padding-left: 0;
}
/*
Highchart Tooltips

Stylesheet: extended

Classes: tooltip-product tooltip-date tooltip-series

Use these settings in highcharts:

<dl>
  <dt>colors</dt>
  <dd>['#0254a3']</dd>
  <dt>tooltip.backgroundColor</dt>
  <dd>'#333'</dd>
  <dt>tooltip.style.color</dt>
  <dd>'#fff'</dd>
</dl>

Markup:
<div class="highcharts-tooltip" style="display: inline-block; position: relative; background-color: #333; padding: 8px; color: #fff">
  <div class="tooltip-product">
    <div class="tooltip-date">
      Friday <strong>Apr 11,<br>
      2014</strong>
    </div>
    <div class="tooltip-series">
      Series 1: <strong>109.04</strong>
    </div>
  </div>
</div>

Styleguide Graphs.Highcharts
*/
.highcharts-container {
    font-size: 1rem !important;
    font-weight: 400;
}
.highcharts-tooltip {
    background-color: hsl(345, 6.1%, 12.9%);
}
.tooltip-product {
    padding: 10px;
    color: #fff
}
.tooltip-product .tooltip-date {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  text-transform: uppercase;
  & b, strong {
            font-weight: 400;
  }
}
.tooltip-product .tooltip-series {
  font-size: 22px;
  font-weight: 400;
  & b, strong {
            font-weight: 700;
  }
}
/*
Graphs

Stylesheet: extended

Various types of graphs and charts. Some of these are merely helper classes to supplement other tools.

Weight: 21

Styleguide Graphs
*/
/*
Percent Bar Graph

Stylesheet: extended

Classes: percent-graph percent-graph-bar

The `aria-*` attributes are essential to make the bar graph understandable to screen readers.

Markup:
<div class="percent-graph">
  <div class="percent-graph-bar"
       aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"
       style="width: 48%;">
    48%<br>Derivatives
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"
       style="width: 16%;">
    16%<br>Tech &amp; Other
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"
       style="width: 14%;">
    14%<br>Market Data
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"
       style="width: 12%;">
    12%<br>Listings
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
       style="width: 10%;">
    10%<br>Cash Equities
  </div>
</div>

Markup2:
<div class="percent-graph percent-graph-compact">
  <div class="percent-graph-bar"
       aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"
       style="width: 48%;">
    48%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="16" aria-valuemin="0" aria-valuemax="100"
       style="width: 16%;">
    16%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="14" aria-valuemin="0" aria-valuemax="100"
       style="width: 14%;">
    14%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"
       style="width: 12%;">
    12%
  </div>
  <div class="percent-graph-bar"
       aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"
       style="width: 10%;">
    10%
  </div>
</div>

Styleguide Graphs.Percent
*/
.percent-graph {
  margin-bottom: 2.5rem;
  overflow: hidden
}
.percent-graph .percent-graph-bar {
  float: left;
  height: 100%;
  position: relative;
  padding-top: 68px;
  text-align: center;
  color: #000;
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.75;
  -webkit-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
}
.percent-graph .percent-graph-bar:after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  content: "";
  height: 50px;
}
.percent-graph .percent-graph-bar:nth-child(5n + 1):after {
  background-color: #002f6d;
}
.percent-graph .percent-graph-bar:nth-child(5n + 2):after {
  background-color: #2235f9;
}
.percent-graph .percent-graph-bar:nth-child(5n + 3):after {
  background-color: #00b5e2;
}
.percent-graph .percent-graph-bar:nth-child(5n + 4):after {
  background-color: #71c5e8;
}
.percent-graph .percent-graph-bar:nth-child(5n + 5):after {
  background-color: #e3e1df;
}
.percent-graph-compact {
  margin-bottom: 0.3125rem;
  line-height: 0.8
}
.percent-graph-compact .percent-graph-bar {
  height: 20px;
  padding-top: 4px;
  color: #fff;
  line-height: inherit;
}
.percent-graph-compact .percent-graph-bar:nth-child(5n + 1) {
  background-color: #002f6d;
}
.percent-graph-compact .percent-graph-bar:nth-child(5n + 2) {
  background-color: #2235f9;
}
.percent-graph-compact .percent-graph-bar:nth-child(5n + 3) {
  background-color: #00b5e2;
}
.percent-graph-compact .percent-graph-bar:nth-child(5n + 4) {
  background-color: #71c5e8;
}
.percent-graph-compact .percent-graph-bar:nth-child(5n + 5) {
  background-color: rgb(204, 203, 201);
}
.percent-graph-compact .percent-graph-bar:after {
  display: none;
}
/*
Chart

Stylesheet: extended

Classes: chart

Use the chart class to add proper spacing to a chart.

Markup:
<!-- This will likely be a canvas element rather than a div. -->
<div class="chart">
  <img src="../images/docs/example-chart.png"/>
</div>
<p>Following content</p>

Styleguide Graphs.Chart
*/
.chart {
  margin-bottom: 40px;
}
/*
Dot

Stylesheet: extended

Intended to be absolutely positioned over maps and diagrams.

Markup:
<div class="dot"></div>

Styleguide Graphs.Dot
*/
.dot,
.dot-inline {
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #2235f9;
}
.dot-container .dot:not(.dot-inline) {
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);

  &.is-active,
  &:hover,
  &:focus,
  :focus > & {
    height: 1rem;
    width: 1rem;
    -webkit-box-shadow: 0.2em 0.2em 0.5em #000;
            box-shadow: 0.2em 0.2em 0.5em #000;
  }
}
.dot-inline {
  display: inline-block;
  margin-right: 0.4em;
  vertical-align: -0.1em;
}
.dot-container {
  position: relative;
}
/* @import "timeline"; DELETED */
/*
Carousel

Stylesheet: extended

Classes: carousel carousel-indicators carousel-inner carousel-caption carousel-control

These styles are designed to work in conjunction with the Carousel JavaScript library from Bootstrap and React-Bootstrap.

Add the class `is-below-nav` to add a bit of extra padding to the top of the carousel. Use this when the carousel immediately follows a [Nav Flyout](section-layout.html#kssref-layout-header-flyout) menu. This compensates for the way the nav flyout overlaps the content beneath it, and allows it to overlay any background images in the carousel without covering the text.


Markup:
<div class="carousel">
  <ol class="carousel-indicators">
    <li class="is-active"></li>
    <li></li>
    <li></li>
  </ol>
  <ol class="carousel-inner">
    <li class="item is-active">
      <img src="https://www.google.com/images/srpr/logo11w.png">
      <div class="carousel-caption">Carousel example</div>
    </li>
    <li class="item">
      <img src="https://www.google.com/images/srpr/logo11w.png">
    </li>
    <li class="item">
      <img src="https://www.google.com/images/srpr/logo11w.png">
    </li>
  </ol>
  <a class="carousel-control left" href="#prev">
    <span class="icon-prev"></span>
  </a>
  <a class="carousel-control right" href="#next">
    <span class="icon-next"></span>
  </a>
</div>

Weight: 18

Styleguide Carousel
*/
.carousel {
  position: relative;
  /* force new stacking context so indicators stay behind nav-flyout */
  z-index: 0;
}
.carousel-inner {
  position: relative;
  width: 100%;
  padding-left: 0;
  margin-bottom: 0;
  overflow: hidden
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  /* Account for jankitude on images */
}
.carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
  /* display: block; */
  max-width: 100%;
  height: auto;
  line-height: 1;
}
.carousel-inner > .active,
  .carousel-inner > .is-active,
  .carousel-inner > .next,
  .carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active,
  .carousel-inner > .is-active {
  -webkit-transform: translate(0);
          transform: translate(0);
}
.carousel-inner > .next,
  .carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  -webkit-transform: translate(100%);
          transform: translate(100%);
}
.carousel-inner > .prev {
  -webkit-transform: translate(-100%);
          transform: translate(-100%);
}
.carousel-inner > .next.left,
  .carousel-inner > .prev.right {
  -webkit-transform: translate(0);
          transform: translate(0);
}
.carousel-inner > .active.left,
  .carousel-inner > .is-active.left {
  -webkit-transform: translate(-100%);
          transform: translate(-100%);
}
.carousel-inner > .active.right,
  .carousel-inner > .is-active.right {
  -webkit-transform: translate(100%);
          transform: translate(100%);
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: 1;
  font-size: 2.5rem;
  color: #2235f9;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  z-index: 600;
  cursor: pointer
}
.carousel-control.right {
  left: auto;
  right: 0;
}
.carousel-control:hover,
  .carousel-control:focus {
  outline: none;
  color: #2235f9;
  text-decoration: none;
  opacity: 0.9;
}
.carousel-control .icon-prev,
  .carousel-control .icon-next {
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -1em;
  font-family: serif;
  z-index: 5;
  -webkit-transition: color 0.3s
      ease-out;
  transition: color 0.3s
      ease-out;
}
.carousel-control .icon-prev.inverse, .carousel-control .icon-next.inverse {
  color: #fff;
}
.carousel-control .icon-prev {
  left: 0.5em;
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(-135deg);
          transform: translate(-0.5em, 0.2em) rotate(-135deg);
  border-width: 2px 2px 0 0;
}
.carousel-control .icon-next {
  right: -0.5em;
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  border: 1px solid currentColor;
  border-width: 1px 1px 0 0;
  -webkit-transform: translate(-0.5em, 0.2em) rotate(45deg);
          transform: translate(-0.5em, 0.2em) rotate(45deg);
  border-width: 2px 2px 0 0;
}
.carousel-indicators {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
  z-index: 600
}
.carousel-indicators li {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 1px 3px;
  text-indent: -999px;
  border: 1px solid hsl(150, 2.3%, 82.7%);
  border-radius: 50%;
  background-color: hsl(150, 2.3%, 82.7%);
  cursor: pointer;
}
.carousel-indicators .active,
  .carousel-indicators .is-active {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 0 2px;
  background-color: #fff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6)
}
.carousel-caption .btn {
  text-shadow: none;
}
@media (min-width: 768px), print {
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-control .icon-prev {
    left: 1.5em;
  }
  .carousel-control .icon-next {
    right: 0.5em;
  }
  .carousel-indicators {
    bottom: 10px;
  }
}
/*TODO: port in carousel/advanced.less? */
/*
Slides

Stylesheet: extended

Classes: slide slide-title slide-title-parent

Provides layouts that are common inside carousel slides, though they can also stand alone if you want a single static "slide" on a page.

Note there are two  `<div>` elements wrapping the slide. Slides require two nested elements wrapping all slide content: the outer `slide` and the inner wrapper (`slide-hero-left` in this example). Apply one of the slide layout classes (below) to this inner wrapper to control they layout of the slide contents.

Markup:
<div class="slide {{modifier_class}}">
  <div class="slide-hero-left">
    <h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
    <p>Some slide content</p>
    <button class="btn">Button</button>
  </div>
</div>

slide-padded - Add extra padding to the top and bottom of the slide
slide-centered - Vertically center the contents of the slide. Use this in conjunction with carousels or other components that dynamically specify a height for the slide.

Markup2:
<div class="slide" style="background-image: url(http://placehold.it/800x200)">
  <div class="slide-hero-left">
    <div class="slide-title-parent">Liquid, transparent markets</div>
    <h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
  </div>
</div>

Styleguide Carousel.Slides
*/
/*
For some unknown reason, Bootstrap & React-Bootstrap add the "slide" class to their
carousel element. I don't want to target that, hence the `:not()`.
The <div class="slide"> should be placed inside the carousel item (though it also
works standalone outside of a carousel entirely)
*/
.slide:not(.carousel) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: hsl(200, 3.4%, 34.9%);
  background-size: cover;
  background-position: 50% 50%
}
.slide:not(.carousel) > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}
.slide:not(.carousel).is-below-nav {
  padding-top: 4.8rem;
}
.slide-content-title {
  /* deprecated 2.7.3 */
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " "Change `slide-content-title` to `slide-title`";
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.slide-content-title /* deprecated 2.7.3 */,
.slide-title {
  margin: 0 0 0.6667em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none
}
.slide-content-title:only-child, .slide-title:only-child {
  margin-bottom: 0;
}
.slide-title-parent {
  margin-top: 2em;
  font-size: 1rem;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 400;
  text-transform: uppercase
}
.slide-title-parent + .slide-title {
  margin-top: 0.15em;
}
.inverse .slide-content-title,
  .inverse .slide-title {
  color: #fff;
  text-shadow: 0.02em 0.05em 0.05em rgba(0, 0, 0, .2);
}
@media (min-width: 980px) {
  .slide-content-title /* deprecated 2.7.3 */,
  .slide-title {
  }
}
.slide-centered {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/*
heads up: this is modified in the carousel module, when used in
conjunction with .carousel.is-below-nav
*/
.slide-padded {
  padding: 4em 0;
}
@media print {
  .slide :not(.inverse) {
    color: inherit !important;
  }
}
.slide-article {
  padding-right: 1em;
  padding-left: 1em;
}
@media screen and (min-width: 980px) {
  .slide-article {
    max-width: 45rem;
    margin-right: auto;
    margin-left: auto;
  }
}
/*
Layouts

Stylesheet: extended

Classes: slide-hero-left slide-hero-right slide-hero-center slide-inline

Change the class on the inner wrapper to control the layout of the slide contents.

Markup:
<div class="slide">
  <div class="{{modifier_class}}">
    <h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
    <p>Some slide content</p>
  </div>
</div>

slide-hero-left - contents on left
slide-hero-right - contents on right
slide-hero-center - contents centered
slide-inline - more subdued look; useful for slides that are standalone (not in a carousel)

Styleguide Carousel.Slides.Layouts
*/
.slide-hero-left,
.slide-hero-center,
.slide-hero-right {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
  color: hsl(345, 6.1%, 12.9%);
  font-size: 1.8125rem;
  font-weight: 400
}
.slide-hero-left > p, .slide-hero-center > p, .slide-hero-right > p {
  margin-bottom: 2.5rem;
}
.slide-hero-left,
.slide-hero-center,
.slide-hero-right {
  /* prettier-ignore */
}
.slide-hero-left.inverse, .inverse .slide-hero-left, .slide-hero-center.inverse, .inverse .slide-hero-center, .slide-hero-right.inverse, .inverse .slide-hero-right {
  color: #fff;
  text-shadow: 0.02em 0.05em 0.05em rgba(0, 0, 0, .2);
}
.slide-hero-left.inverse .btn, .inverse .slide-hero-left .btn, .slide-hero-center.inverse .btn, .inverse .slide-hero-center .btn, .slide-hero-right.inverse .btn, .inverse .slide-hero-right .btn {
  text-shadow: none;
}
.slide-hero-left > :last-child, .slide-hero-center > :last-child, .slide-hero-right > :last-child {
  margin-bottom: 0;
}
@media (min-width: 980px) {
  .slide-hero-left {
    padding-right: 40%;
  }

  .slide-hero-center {
    padding-right: 15%;
    padding-left: 15%;
    text-align: center;
  }

  .slide-hero-right {
    padding-left: 40%;
  }
}
@media (min-width: 1200px) {
  .slide-hero-left,
  .slide-hero-center {
    padding-left: 8.3333%;
  }

  .slide-hero-right,
  .slide-hero-center {
    padding-right: 8.3333%;
  }
}
/*
Inline slides

Stylesheet: extended

Markup:
<div class="slide-inline">
  <h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
  <p>Some content goes here</p>
  <button class="btn">Button</button>
</div>

Styleguide Carousel.Slides.inline
*/
.slide-hero-inline {
  /* deprecated 2.7.3 */
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Change `slide-hero-inline` to `slide-inline`';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.slide-hero-inline,
.slide-inline {
  padding: 1em;
  text-align: center;
  font-weight: 400;
  color: hsl(200, 3.4%, 34.9%)
}
.slide-hero-inline .slide-title, .slide-inline .slide-title {
  margin-top: 0.625em;
  font-size: 1.4rem;
  font-weight: 700;
  color: hsl(200, 3.4%, 34.9%);
}
.slide-hero-inline,
.slide-inline {
  /* prettier-ignore */
}
.slide-hero-inline.inverse, .inverse .slide-hero-inline, .slide-inline.inverse, .inverse .slide-inline {
  color: #fff;
}
@media (min-width: 768px) {
  .slide-hero-inline,
.slide-inline {
    padding-bottom: 2.5em;
    font-size: 1.1667rem;
  }
  .slide-hero-inline .slide-title, .slide-inline .slide-title {
    font-size: 2.4rem;
  }
  .carousel-item-container .slide-hero-inline, .carousel-item-container .slide-inline {
    padding-left: 6.5em;
    padding-right: 6.5em;
  }
}
@media (min-width: 1200px) {
  .slide-hero-inline,
.slide-inline {
    padding: 1em 25%;
  }
}
/*
Media Slides

Stylesheet: extended

Classes: media-slide media-slide-left media-slide-right

Splits the slide content into a left and right side.

Markup:
<div class="slide">
  <div class="media-slide">
    <div class="media-slide-left">
      <img src="//placehold.it/400x400"/>
    </div>
    <div class="media-slide-right">
      <h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
      <p>Some slide content</p>
    </div>
  </div>
</div>

Styleguide Carousel.Slides.Media
*/
.media-slide {
  display: table;
  width: 100%
}
.media-slide .slide-title {
  color: #000;
}
@media (max-width: 979px) {
  .media-slide-left,
  .media-slide-right {
    padding: 1em 2.25rem;
  }

  .media-slide-left {
    text-align: center
  }

  .media-slide-left > img {
    max-height: 50vh;
  }
}
@media (min-width: 768px) {
  .media-slide-left,
  .media-slide-right {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
  }

  .media-slide-left {
    text-align: right;
    padding-right: 2em;
    padding-left: 1.125rem;
  }

  .media-slide-right {
    text-align: left;
    padding-left: 2em;
    padding-right: 1.125rem;
  }
}
@media (min-width: 1200px) {
  .media-slide-left {
    padding-left: 8.3333%;
  }

  .media-slide-right {
    padding-right: 8.3333%;
  }
}
/*
Search

Stylesheet: extended

Classes: slide-search, slide-search__inner

Markup:
<div class="slide">
  <div class="slide-search">
    <div class="slide-search__inner">
      <h1 class="slide__title">Search Results</h2>
      <div class="form-group">
        <label htmlFor="search-main-input" class="sr-only">
          Search
        </label>
        <input
          id="search-main-input"
          class="form-control form-control--mega"
          type="search"
        />
      </div>
    </div>
  </div>
</div>

Styleguide Carousel.Slides.Search
*/
.slide-search {
  padding-left: 1em;
  padding-right: 1em;
}
@media screen and (min-width: 1200px) {
  .slide-search {
    padding-left: 8.33333%;
    padding-right: 8.33333%;
  }
}
.slide-search > .slide-search__inner {
  padding-left: 8.33333%;
  padding-right: 33.33333%;
}
.slide-search {
  .slide__title {
    font-size: 3.75rem;
    font-weight: 700;
  }
}
.typeahead-basic .typeahead-input input {
  font-size: 1rem;
}
.typeahead-basic .typeahead-drop {
  border: 1px solid #00b5e2;
  border-width: 0 1px 1px;
}
.typeahead-basic.is-focused .typeahead-drop {
  display: block;
}
@media screen and (min-width: 768px) {
    .search-homepage-placeholder-box {
        width: 100%;
        height: 92px;
        margin-bottom: 2.5rem;
    }
}
.typeahead-search-homepage {
    margin-bottom: 0;
    padding: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    z-index: 800;
}
@media screen and (min-width: 768px) {
  .typeahead-search-homepage {
    position: absolute;
    top: 65px;
    right: 8.1%;
    left: 57.4%;
    margin-bottom: 20px;
  }
}
.typeahead-search-homepage {
  .typeahead-input {
        input {
            background: transparent;
        }
        button {
            top: 40%;
        }
  }
}
.typeahead-search-homepage.is-focused {
  /* ignored state; behave same as default state */
  .typeahead-mask {
            opacity: 0;
  }
  .typeahead-input {
            border-bottom: 1px solid hsl(150, 1.1%, 63.9%);

            button,
            .typeahead-button {
                display: block;
            }
  }
  .typeahead-drop {
            display: none;
  }
}
.typeahead-search-homepage.is-active {
  position: fixed;
  padding: 40px 8.3333%;
  z-index: 1060;
  .typeahead-mask {
            bottom: 0;
  }
  .typeahead-input {
            input {
                background: #fff;
            }

            button, .typeahead-button {
                right: 20px;
            }
  }
}
.typeahead-search-homepage.inverse {
  .typeahead-input {
            border-bottom-color: #fff;
  }
}
/* @import "homepages"; UNUSED? */
/*
Numbers

Stylesheet: extended

Classes: num

Helper classes for number formatting.

Markup:
<span class="num">123.456</span>

Styleguide Components.Numbers
*/
/*
With Units

Stylesheet: extended

Deprecated: since 3.0.0

Classes: num-units num-*

Markup:
<span class="num num-unit {{modifier_class}}">123.456</span>

num-dollar - Dollars
num-euro - Euros
num-pound - British pounds
num-percent - Percentage

Styleguide Components.Numbers.Units
*/
.num-unit.num-dollar::before {
  content: "$";
}
.num-unit.num-euro::before {
  content: "\20AC";
}
.num-unit.num-pound::before {
  content: "\00A3";
}
.num-unit.num-percent::after {
  content: "%";
}
table .num {
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/*
 * DEPRECATED
 * This introduces a bug where negative values become positive if copied+pasted
 * elsewhere, or if the styles are missing.
 */
.num-signed {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " ;
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.num-signed.num-positive:before {
  content: "+";
}
.num-signed.num-negative:before {
  content: "-";
}
.num-signed.num-unit.num-dollar.num-positive:before {
  content: "+$";
}
.num-signed.num-unit.num-dollar.num-negative:before {
  content: "-$";
}
.num-signed.num-unit.num-euro.num-positive:before {
  content: "+\20AC";
}
.num-signed.num-unit.num-euro.num-negative:before {
  content: "-\20AC";
}
.num-signed.num-unit.num-pound.num-positive:before {
  content: "+\00A3";
}
.num-signed.num-unit.num-pound.num-negative:before {
  content: "-\00A3";
}
/*
Colors

Stylesheet: extended

Classes: num-colored num-positive num-negative

Markup:
<span class="num num-colored {{modifier_class}}">123.456</span>

num-positive - positive number
num-negative - negative number

Styleguide Components.Numbers.Colors
*/
.num-colored.num-positive {
  color: #00c300;
}
.num-colored.num-negative {
  color: #c9001a;
}
@webkit-keyframes medium-editor-image-loading {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes medium-editor-image-loading {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes medium-editor-image-loading {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@webkit-keyframes medium-editor-pop-upwards {
  0% {
    opacity: 0;
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
            transform: matrix(0.97, 0, 0, 1, 0, 12); }
  20% {
    opacity: .7;
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
            transform: matrix(0.99, 0, 0, 1, 0, 2); }
  40% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
            transform: matrix(1, 0, 0, 1, 0, -1); }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0); } }
@-webkit-keyframes medium-editor-pop-upwards {
  0% {
    opacity: 0;
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
            transform: matrix(0.97, 0, 0, 1, 0, 12); }
  20% {
    opacity: .7;
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
            transform: matrix(0.99, 0, 0, 1, 0, 2); }
  40% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
            transform: matrix(1, 0, 0, 1, 0, -1); }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0); } }
@keyframes medium-editor-pop-upwards {
  0% {
    opacity: 0;
    -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
            transform: matrix(0.97, 0, 0, 1, 0, 12); }
  20% {
    opacity: .7;
    -webkit-transform: matrix(0.99, 0, 0, 1, 0, 2);
            transform: matrix(0.99, 0, 0, 1, 0, 2); }
  40% {
    opacity: 1;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -1);
            transform: matrix(1, 0, 0, 1, 0, -1); }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
            transform: matrix(1, 0, 0, 1, 0, 0); } }
.medium-editor-anchor-preview {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  left: 0;
  line-height: 1.4;
  max-width: 280px;
  position: absolute;
  text-align: center;
  top: 0;
  word-break: break-all;
  word-wrap: break-word;
  visibility: hidden;
  z-index: 2000; }
.medium-editor-anchor-preview a {
    color: #fff;
    display: inline-block;
    margin: 5px 5px 10px; }
.medium-editor-anchor-preview-active {
  visibility: visible; }
.medium-editor-dragover {
  background: #ddd; }
.medium-editor-image-loading {
  -webkit-animation: medium-editor-image-loading 1s infinite ease-in-out;
          animation: medium-editor-image-loading 1s infinite ease-in-out;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  height: 40px;
  width: 40px; }
.medium-editor-placeholder {
  position: relative; }
.medium-editor-placeholder:after {
    content: attr(data-placeholder) !important;
    font-style: italic;
    left: 0;
    position: absolute;
    top: 0;
    white-space: pre;
    padding: inherit;
    margin: inherit; }
.medium-toolbar-arrow-under:after, .medium-toolbar-arrow-over:before {
  border-style: solid;
  content: '';
  display: block;
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  width: 0; }
.medium-toolbar-arrow-under:after {
  border-width: 8px 8px 0 8px; }
.medium-toolbar-arrow-over:before {
  border-width: 0 8px 8px 8px;
  top: -8px; }
.medium-editor-toolbar {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  z-index: 2000; }
.medium-editor-toolbar ul {
    margin: 0;
    padding: 0; }
.medium-editor-toolbar li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0; }
.medium-editor-toolbar li button {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      cursor: pointer;
      display: block;
      font-size: 14px;
      line-height: 1.33;
      margin: 0;
      padding: 15px;
      text-decoration: none; }
.medium-editor-toolbar li button:focus {
        outline: none; }
.medium-editor-toolbar li .medium-editor-action-underline {
      text-decoration: underline; }
.medium-editor-toolbar li .medium-editor-action-pre {
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
      font-size: 12px;
      font-weight: 100;
      padding: 15px 0; }
.medium-editor-toolbar-active {
  visibility: visible; }
.medium-editor-sticky-toolbar {
  position: fixed;
  top: 1px; }
.medium-editor-relative-toolbar {
  position: relative; }
.medium-editor-toolbar-active.medium-editor-stalker-toolbar {
  -webkit-animation: medium-editor-pop-upwards 160ms forwards linear;
          animation: medium-editor-pop-upwards 160ms forwards linear; }
.medium-editor-action-bold {
  font-weight: bolder; }
.medium-editor-action-italic {
  font-style: italic; }
.medium-editor-toolbar-form {
  display: none; }
.medium-editor-toolbar-form input,
  .medium-editor-toolbar-form a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.medium-editor-toolbar-form .medium-editor-toolbar-form-row {
    line-height: 14px;
    margin-left: 5px;
    padding-bottom: 5px; }
.medium-editor-toolbar-form .medium-editor-toolbar-input,
  .medium-editor-toolbar-form label {
    border: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 14px;
    margin: 0;
    padding: 6px;
    width: 316px;
    display: inline-block; }
.medium-editor-toolbar-form .medium-editor-toolbar-input:focus,
    .medium-editor-toolbar-form label:focus {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      border: none;
      -webkit-box-shadow: none;
              box-shadow: none;
      outline: 0; }
.medium-editor-toolbar-form a {
    display: inline-block;
    font-size: 24px;
    font-weight: bolder;
    margin: 0 10px;
    text-decoration: none; }
.medium-editor-toolbar-form-active {
  display: block; }
.medium-editor-toolbar-actions:after {
  clear: both;
  content: "";
  display: table; }
[data-medium-editor-element] {
  word-break: break-all;
  min-height: 30px; }
[data-medium-editor-element] img {
    max-width: 100%; }
[data-medium-editor-element] sub {
    vertical-align: sub; }
[data-medium-editor-element] sup {
    vertical-align: super; }
.medium-editor-hidden {
  display: none; }
.medium-toolbar-arrow-under:after {
  border-color: #242424 transparent transparent transparent;
  top: 50px; }
.medium-toolbar-arrow-over:before {
  border-color: transparent transparent #242424 transparent;
  top: -8px; }
.medium-editor-toolbar {
  background-color: #242424;
  background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(rgba(36, 36, 36, .75)));
  background: linear-gradient(to bottom, #242424, rgba(36, 36, 36, .75));
  border: 1px solid #000;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 3px #000;
          box-shadow: 0 0 3px #000; }
.medium-editor-toolbar li button {
    background-color: #242424;
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(rgba(36, 36, 36, .89)));
    background: linear-gradient(to bottom, #242424, rgba(36, 36, 36, .89));
    border: 0;
    border-right: 1px solid #000;
    border-left: 1px solid #333;
    border-left: 1px solid rgba(255, 255, 255, .1);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
    color: #fff;
    height: 50px;
    min-width: 50px;
    -webkit-transition: background-color .2s ease-in;
            transition: background-color .2s ease-in; }
.medium-editor-toolbar li button:hover {
      background-color: #000;
      color: yellow; }
.medium-editor-toolbar li .medium-editor-button-first {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px; }
.medium-editor-toolbar li .medium-editor-button-last {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px; }
.medium-editor-toolbar li .medium-editor-button-active {
    background-color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#242424), to(rgba(0, 0, 0, .89)));
    background: linear-gradient(to bottom, #242424, rgba(0, 0, 0, .89));
    color: #fff; }
.medium-editor-toolbar-form {
  background: #242424;
  border-radius: 5px;
  color: #999; }
.medium-editor-toolbar-form .medium-editor-toolbar-input {
    background: #242424;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #ccc;
    height: 50px; }
.medium-editor-toolbar-form a {
    color: #fff; }
.medium-editor-toolbar-anchor-preview {
  background: #242424;
  border-radius: 5px;
  color: #fff; }
.medium-editor-placeholder:after {
  color: #b3b3b1; }
.events {
    padding-left: 0;
    list-style: none;

    > li {
        margin-bottom: 5px;

    }
}
.events-compact {
    > li a {
        display: block;
        padding-left: .75em;
        text-indent: -.75em;
    }
}
.cal {
  width: 100%;
}
.cal-week {
  .cal-week-header {
    margin-top: 0;
    margin-bottom: 0.375em;
    color: hsl(345, 6.1%, 12.9%);
    font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.125rem;
    line-height: 1.75;
    display: none;
    text-align: center;
  }

  .cal-week-day {
    padding: 10px 5px;
    .cal-date {
      margin: -5px 0 5px;
      text-align: right;
    }
  }
}
@media screen and (max-width: 479px) {
  .cal-week {
    .cal-week-day {
      .cal-date {
        display: none;
      }
    }
  }
}
.cal-week {
  .cal-week-day {
    .cal-date-full {
      margin-top: 0;
      margin-bottom: 0.375em;
      color: hsl(345, 6.1%, 12.9%);
      font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
      font-weight: 400;
      text-transform: uppercase;
      font-size: 1.125rem;
      line-height: 1.75;
    }
  }
}
.cal-single-day {
  .cal-date {
    margin-top: 0;
    margin-bottom: 0.375em;
    color: hsl(345, 6.1%, 12.9%);
    font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.125rem;
    line-height: 1.75
  }
  .cal-date + .cal-date-full {
    display: none;
  }
}
@media screen and (min-width: 768px), print {
  .cal {
    display: table;
  }

  .cal-week {
    display: table-row;

    .cal-week-header {
      display: table-cell;
    }

    .cal-week-day {
      display: table-cell;
      width: percentage(1/7);
      border-right: hsl(150, 2.3%, 82.7%) 1px solid;
      border-bottom: hsl(150, 2.3%, 82.7%) 1px solid
    }

    .cal-week-day:first-child {
      border-left: hsl(150, 2.3%, 82.7%) 1px solid;
    }

    .cal-week-day {
      .cal-date-full {
        display: none;
      }
    }

    .cal-week-day::before {
      display: block;
      content: "";
      float: left;
      min-height: 100px;
    }

    .cal-week-day.cal-week-header::before {
      display: none;
    }
  }

  .cal-week:first-child .cal-week-day {
    border-top: hsl(150, 2.3%, 82.7%) 1px solid;
  }
}
.l-video-fullscreen video {
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  /* override ooyala nonsense: */
  width: auto !important;
  height: auto !important;
}
.l-video-fullscreen {
  /* Ooyala */
}
.l-video-fullscreen .oo_end_screen {
  background-size: cover !important;
}
.l-video-fullscreen .oo_replay {
  display: none;
}
.l-video-fullscreen .oo_spinner {
  display: none;
}
.l-video-fullscreen .oo_controls {
  display: none !important;
}
.l-video-fullscreen table {
  /* Missing flash plugin displays error message in a table */
  display: none;
}
[id^="ooyalaplayer"] > div, .ooyala-video > div, #playerContainer > div {
  z-index: 500 !important;
}
.ooyala-video {
  width: 100%;
  height: 500px;
}
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  overflow: hidden
}
.background-video > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}
.background-video > div {
  height: 100%;
  width: 100%;
}
.background-video video {
  left: 0;
  min-height: 100%;
  min-width: 100%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  width: auto !important;
  height: auto !important;
}
.background-video .oo_controls_wrap {
  display: none;
}
.oo-social-action-text {
  display: none;
}
/*
Transitions

Stylesheet: extended

Classes: transition-*

These transition classes each provide a simple effect for animating an element. Use the transition-* class, then toggle the `is-in` class to trigger the effect.

<p class="alert alert-info">Transitioned elements will always be visible/active if JavaScript is disabled. This is determined by the presence of a `js` or `no-js` class on the `<html>` element&mdash;We recommend the use of [Modernizr](https://modernizr.com/docs#configuration-options) to enable this.</p>

<p class="alert alert-info">If you see unwanted scrollbars around a transition element, add the class `transition-container` to its parent element.</p>

Markup:
<div class="{{modifier_class}}">
  <h4 class="subheader">Transition example</h4>
  <p>This is an example of a transition. Click the button again to hide.</p>
</div>
<button class="btn toggle-transition">Show transition</button>

transition-fadein - Fade in
transition-flyleft - Fly to the left
transition-flyright - Fly to the right
transition-flyup - Fly up
transition-flydown - Fly down
transition-zoom - Zoom in

Weight: 22

Styleguide Transitions
*/
/* add to transition element's parent if needed to prevent scrollbars */
.transition-container {
  overflow: hidden;
}
/* Toggle "is-in" class to enact the following transitions: */
.no-js .transition-fadein, .transition-fadein.is-in, .no-js .transition-flyleft, .transition-flyleft.is-in, .no-js .transition-flyright, .transition-flyright.is-in, .no-js .transition-flyup, .transition-flyup.is-in, .no-js .transition-flydown, .transition-flydown.is-in, .no-js .transition-zoom, .transition-zoom.is-in {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.transition-fadein,
.transition-flyleft,
.transition-flyright,
.transition-flyup,
.transition-flydown,
.transition-zoom {
  -webkit-transition: all 0.7s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 0.7s;
  transition: all 0.7s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear 0.7s;
  opacity: 0;
  visibility: hidden;
}
.transition-flyleft {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}
.no-js .transition-flyleft,
.transition-flyleft.is-in {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.transition-flyright {
  -webkit-transform: translateX(-var(--flyin-distance));
          transform: translateX(-var(--flyin-distance));
}
.no-js .transition-flyright,
.transition-flyright.is-in {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.transition-flyup {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
}
.no-js .transition-flyup,
.transition-flyup.is-in {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.transition-flydown {
  -webkit-transform: translateY(-var(--flyin-distance));
          transform: translateY(-var(--flyin-distance));
}
.no-js .transition-flydown,
.transition-flydown.is-in {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.transition-zoom {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.no-js .transition-zoom,
.transition-zoom.is-in {
  -webkit-transform: scale(1);
          transform: scale(1);
}
/* misc util classes (undocumented) */
.transition-height {
  -webkit-transition: height 0.3s ease-out;
  transition: height 0.3s ease-out;
}
.transition-opacity {
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.quote-item .quote-item-main {
  overflow: hidden;
  text-overflow: ellipsis;
}
.quote-item .quote-item-quote {
  float: right;
  max-width: 10em;
  overflow: hidden;
}
.quote-item .quote-item-quote + .quote-item-main {
  max-width: 30em;
}
/*
Pullquote

Stylesheet: extended

Classes: pull-quote

Highlight a short quote or snippet. Add an optional `<cite>` element within to cite the author or source.

Markup:
<div class="pull-quote {{modifier_class}}">
  <q>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in
    odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate
    enim, in semper lorem ligula et magna.
  </q>
</div>

pull-quote-colored - Styles the pullquote with a branded blue color

Markup2:
<div class="pull-quote">
  <q>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in
    odio leo. Sed viverra, ante nec aliquet imperdiet, risus eros vulputate
    enim, in semper lorem ligula et magna.
  </q>
  <cite>George Washington, Former president, USA</cite>
</div>

Styleguide Components.Pullquote
*/
.pull-quote {
  margin-bottom: 1.5652rem;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.32;
  font-weight: bold
}
.pull-quote > q::before {
  content: "\201c";
  margin-right: -0.2em;
}
@media (min-width: 768px) {
  .pull-quote > q::before {
    margin-left: -0.6em;
  }
}
.pull-quote > q::after {
  content: "\201d";
  margin-left: -0.2em;
}
.pull-quote > cite {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: normal;
}
.pull-quote-colored {
  color: #2235f9;
}
/* TODO: document or deprecate */
.lightbox-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
  z-index: 1090;
}
.lightbox-content {
  position: fixed;
  top: 1em;
  right: 1em;
  bottom: 1em;
  left: 1em;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
          box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  z-index: 1100;
}
.lightbox-close {
  display: inline-block;
  position: relative;
  width: 1.125em;
  height: 1.125em;
  vertical-align: text-bottom;
  text-indent: -10000px
}
.lightbox-close::after {
  display: block;
  position: absolute;
  content: "\00D7";
  top: 0;
  right: 0;
  left: 0;
  font-size: 1.125em;
  color: hsl(200, 3.4%, 34.9%);
  font-style: normal;
  text-indent: 0;
  line-height: 1;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  border: 0;
  background-color: transparent;
  font-size: 1.6em;
  cursor: pointer;
  z-index: 1;
}
.lightbox-close::after {
  color: #fff;
}
/* TODO: document */
.gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  background-color: hsl(345, 6.1%, 12.9%);
}
.gallery-main {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
}
.gallery-thumbnails {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 100px;
          flex: 0 1 100px;
  margin: 0;
  padding-left: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, .5);
  list-style: none;
  text-align: center;
  white-space: nowrap
}
.gallery-thumbnails > li {
  display: inline-block;
}
.gallery-thumbnails > li.is-active > img {
  border: 1px solid #00b5e2;
  -webkit-box-shadow: 0 0 0.5em #fff;
          box-shadow: 0 0 0.5em #fff;
}
.gallery-thumbnails > li > img {
  height: calc(100px - 1em);
  margin: 0.5em;
}
.gallery-image,
.gallery img.gallery-image {
  /* increased specificity to work inside carousel */
  height: calc(100vh - 100px - 2em);
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@supports ((-o-object-fit: contain) or (object-fit: contain)) {
  .gallery-image,
  .gallery img.gallery-image {
    /* increased specificity to work inside carousel */
    width: 100%;
  }
}
.gallery-image-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2em;
  color: #fff;
  background-color: rgba(0, 0, 0, .5);
}
@media screen and (min-width: 768px), print {
  .gallery-image-overlay {
    padding: 2em 10%;
  }
}
/*
Tooltip

Classes: tooltip tooltip-body

Tooltips are absolutely positioned. It is up to you to position them using the `top`, `right`, `bottom`, and/or `left` properties. The point of the tooltip arrow will point to the position you specify.

Markup:
<div style="position: relative; height: 150px; background-color: gray">
  <div class="tooltip {{modifier_class}}" style="top: 70px; left: 70px;">
    <div class="tooltip-body">Tooltip</div>
  </div>
</div>

tooltip-left - place the tooltip to the left of the specified point
tooltip-right - place the tooltip to the right of the specified point
tooltip-top - place the tooltip above the specified point (may be used in conjunction with `tooltip-left` or `tooltip-right`)

Styleguide Components.Tooltip
*/
.tooltip {
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transform: translate(-50%, 1.3em);
          transform: translate(-50%, 1.3em);
  -webkit-box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, .3);
          box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, .3);
  z-index: 1040
}
.tooltip::after {
  position: absolute;
  top: -1.2em;
  left: calc(50% - 0.5em);
  /* triangle */
  content: "";
  display: block;
  border: 0.5em solid transparent;
}
.tooltip:not(.tooltip-top)::after {
  border-bottom-color: #fff;
  border-bottom-width: 0.8em;
}
.tooltip-body {
  position: relative;
  padding: 1em;
  color: hsl(345, 6.1%, 12.9%);
  background-color: #fff;
  font-size: 0.75rem;
  -webkit-box-shadow: 0.5em 0.5em 1.5em 0.5em fade(#000, 20%);
          box-shadow: 0.5em 0.5em 1.5em 0.5em fade(#000, 20%);
}
.tooltip-left {
  -webkit-transform: translate(-85%, 1.3em);
          transform: translate(-85%, 1.3em)
}
.tooltip-left::after {
  left: calc(85% - 0.5em);
}
.tooltip-right {
  -webkit-transform: translate(-15%, 1.3em);
          transform: translate(-15%, 1.3em)
}
.tooltip-right::after {
  left: calc(15% - 0.5em);
}
.tooltip-top {
  /* IE doesn't support calc() within translate() */
  -webkit-transform: translate(-50%, -100%) translateY(-1.3em);
          transform: translate(-50%, -100%) translateY(-1.3em);
  -webkit-transform: translate(-50%, calc(-100% - 1.3em));
          transform: translate(-50%, calc(-100% - 1.3em))
}
.tooltip-top::after {
  top: auto;
  top: initial;
  bottom: -1.2em;
  border-top-color: #fff;
  border-top-width: 0.8em;
}
.tooltip-top.tooltip-left {
  /* IE doesn't support calc() within translate() */
  -webkit-transform: translate(-85%, -100%) translateY(-1.3em);
          transform: translate(-85%, -100%) translateY(-1.3em);
  -webkit-transform: translate(-85%, calc(-100% - 1.3em));
          transform: translate(-85%, calc(-100% - 1.3em));
}
.tooltip-top.tooltip-right {
  /* IE doesn't support calc() within translate() */
  -webkit-transform: translate(-15%, -100%) translateY(-1.3em);
          transform: translate(-15%, -100%) translateY(-1.3em);
  -webkit-transform: translate(-15%, calc(-100% - 1.3em));
          transform: translate(-15%, calc(-100% - 1.3em));
}
.tooltip-heading {
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.75;

  margin-bottom: 0.3125rem;
  color: #2235f9;
}
.tooltip-link {
  position: relative;
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted
}
.tooltip-link:hover {
  color: inherit;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
@-webkit-keyframes fade-in-out {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
@keyframes fade-in-out {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}
/*
Icon Grid

Classes: icon-grid icon-link

A grid of icons for app launchers.

Markup:
<div class="icon-grid">
  <button type="button" class="icon-link">
    <img src="https://placehold.it/50x50" width="50" height="50" alt="App icon">
    <div class="icon-link-label">Customer Desk Manager</div>
  </button>
  <button type="button" class="icon-link">
    <img src="https://placehold.it/50x50" width="50" height="50" alt="App icon">
    <div class="icon-link-label">Listing Manager</div>
  </button>
  <button type="button" class="icon-link">
    <img src="https://placehold.it/50x50" width="50" height="50" alt="App icon">
    <div class="icon-link-label">NYSE Connect</div>
  </button>
</div>

Styleguide Tiles.Icon-Grid
*/
.icon-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.icon-grid > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 25%;
          flex: 1 1 25%;
  margin: 0.8em;
}
.icon-link {
  border: 0;
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer
}
.icon-link:hover .icon-link-label {
  color: #00b5e2;
  text-decoration: underline;
}
.icon-link-label {
  margin-top: 1em;
  color: #000;
}
.app-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1.3em;
  padding-left: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none
}
.app-list li {
  min-height: 3.125rem;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  line-height: 1.2;
}
.app-list li > a {
  display: block;
  color: #000;
}
.app-list li > a:active {
  color: #00b5e2;
}
.app-list img {
  margin-right: 1em;
}
.app-list .app-list-link {
  float: right;
  padding: 1.21em 0;
  color: #00b5e2;
}
.app-sublist {
  padding-left: calc(50px + 1em);
  list-style: none
}
.app-sublist > li {
  padding: 0.9em 0;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
.map-container {
  height: 80vh;
}
@media (min-width: 980px) {
  .map-container {
    height: 70vh;
  }
}
@media (min-width: 1200px) {
  .map-container {
    height: 60vh;
  }
}
.x-panel * {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Ext is the Debil';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }

  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
:focus {
  outline: none;
}
.x-panel-header {
  border: none;
  background: none;
}
.x-panel-body {
  border: none;
}
.x-panel-bbar {
  display: none;
}
.x-panel-header-text {
  margin-bottom: 18px;
  color: #000;
  font-size: 14px;
  line-height: 35px;
  font-weight: 500;
  text-transform: uppercase;
}
.x-grid3-header {
  background: none;
}
.x-grid3-row {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px dotted hsl(150, 1.1%, 63.9%);
}
.x-grid-group-hd div {
  color: #00b5e2;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
.x-grid3-body .x-grid3-td-checker {
  background: none;
}
td.x-grid3-hd-over .x-grid3-hd-inner {
  background: none;
}
.x-grid-group-hd div {
  font-size: 12px;
}
.x-grid3-row td {
  font-size: 12px;
}
.x-grid3-row-selected {
  border: none;
  background: none;
}
.x-grid3-cell {
  border-right: none;
}
.x-grid3-hd-row td {
  border: none;
  font-size: 12px;
}
.x-grid3-hd-row td {
  font-size: 12px;
}
.ext-strict .x-form-text {
  height: 21px;
}
/* @import "one-offs/ring-true"; */
/* Intended for use within .l-article */
@media screen and (min-width: 980px) {
  .right-rail {
    float: right;
    width: 8rem;
    margin-right: -9rem;
  }
}
@media screen and (min-width: 1200px) {
  .right-rail {
    width: 15rem;
    margin-right: -16rem;
  }
}
.hang-left {
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  padding: 1em 0;
  border-top: 2px solid #2235f9;
  border-bottom: 2px solid @#2235f9
}
.hang-left > :last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 980px) {
  .hang-left {
    float: left;
    width: 18rem;
    margin-right: 2rem;
    margin-left: -9rem;
  }
}
/* TODO: move to mixins after merge to 3.0.0 */
.collapse-toggle {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  position: relative;
  margin-bottom: 1rem;
  padding-left: 1.5em;
  border: 0;
  color: #00b5e2;
  font-size: 1rem
}
.collapse-toggle::before {
  position: absolute;
  top: 0.3em;
  left: 0;
  content: '';
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -394px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .collapse-toggle::before {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.collapse-toggle.is-expanded::before {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -433px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .collapse-toggle.is-expanded::before {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.collapse-toggle-body {
  padding-left: 1.5em;
}
.collapse-toggle-nav {
  padding-right: 1.3em;
  padding-left: 0;
  color: hsl(200, 3.4%, 34.9%);
  font-weight: 700
}
.collapse-toggle-nav::before {
  right: 0;
  left: auto;
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -538px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .collapse-toggle-nav::before {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.collapse-toggle-nav.is-expanded::before {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -577px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .collapse-toggle-nav.is-expanded::before {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/*
Backgrounds

Stylesheet: extended

Add a background color or gradient to a Landing Section container. For the darker backgrounds, you may need to mixin the `inverse` class to ensure buttons or other modules appear with light text.

Markup:
<div class="landing-section {{modifier_class}}">
  <p>Banh mi health goth normcore fixie kinfolk cornhole. Migas synth fixie keffiyeh, health goth taxidermy direct trade stumptown yr selfies brooklyn portland next level 90's pitchfork.</p>
</div>

bg-highlight      - Light gray background
bg-highlight-fade - Gradient to white
bg-highlight-fade-top - Gradient to light gray
bg-vivid          - Blue background
bg-vivid-fade     - Blue with white fade at the bottom
bg-vivid-fade-top - Blue with white fade at the top
bg-inverse        - Dark blue background
bg-inverse-fade   - Dark blue with fade at the bottom
bg-inverse-fade-top - Dark blue with fade at the top
bg-dark           - Dark gray background
bg-dark-fade      - Dark gray with fade at the bottom
bg-dark-fade-top  - Dark gray with fade at the top

Weight: 4

Styleguide Sections.Backgrounds
*/
.bg-highlight {
  background-color: hsl(180, 2.7%, 92.7%);
}
.bg-highlight-fade {
  background-color: hsl(180, 2.7%, 92.7%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, hsl(180, 2.7%, 92.7%)), to(#fff));
  background-image: linear-gradient(to bottom, hsl(180, 2.7%, 92.7%) 60%, #fff);
}
.bg-highlight-fade-top {
  background-color: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #fff), to(hsl(180, 2.7%, 92.7%)));
  background-image: linear-gradient(to bottom, #fff 60%, hsl(180, 2.7%, 92.7%));
}
.bg-vivid {
  color: hsl(214.7, 13.7%, 27.3%);
  background-color: #00b5e2;
}
.bg-vivid-fade {
  background-color: #00b5e2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #00b5e2), to(#fff));
  background-image: linear-gradient(to bottom, #00b5e2 60%, #fff);
  color: hsl(214.7, 13.7%, 27.3%);
}
.bg-vivid-fade-top {
  background-color: #00b5e2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(40%, #00b5e2));
  background-image: linear-gradient(to bottom, #fff, #00b5e2 40%);
  color: hsl(214.7, 13.7%, 27.3%);
}
.bg-inverse {
  color: #fff;
  background-color: #2235f9;
}
.bg-inverse-fade {
  background-color: #2235f9;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #2235f9), to(#fff));
  background-image: linear-gradient(to bottom, #2235f9 60%, #fff);
  color: #fff;
}
.bg-inverse-fade-top {
  background-color: #2235f9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(40%, #2235f9));
  background-image: linear-gradient(to bottom, #fff, #2235f9 40%);
  color: #fff;
}
.bg-dark {
  color: #fff;
  background-color: hsl(214.7, 13.7%, 27.3%)
}
.bg-dark-fade {
  background-color: hsl(214.7, 13.7%, 27.3%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, hsl(214.7, 13.7%, 27.3%)), to(#fff));
  background-image: linear-gradient(to bottom, hsl(214.7, 13.7%, 27.3%) 60%, #fff);
  color: #fff;
}
.bg-dark-fade-top {
  background-color: hsl(214.7, 13.7%, 27.3%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(40%, hsl(214.7, 13.7%, 27.3%)));
  background-image: linear-gradient(to bottom, #fff, hsl(214.7, 13.7%, 27.3%) 40%);
  color: #fff;
}
/*
CTA Block

Stylesheet: extended

Classes: cta-block cta-block-header cta-block-body cta-block-footer

Markup:
<div class="cta-block {{modifier_class}}">
  <span class="cta-block-header">
    Contact us to learn
  </span>
  <span class="cta-block-body">
    what MiFID II means for your organization, and how to
    stay compliant.
  </span>
  <div class="cta-block-footer">
    <a href="http://example.com" class="btn btn-secondary btn-more">
      Learn more
    </a>
  </div>
</div>

cta-block-inverse - gray block with white text
cta-block-info - blue block with white text
cta-block-image - white text (expects a background image; see 2nd example below)

Markup2:
<div style="max-width: 300px">
<div class="cta-block cta-block-image"
  style="background-image: url(http://placekitten.com/300/250)"
>
  <span class="cta-block-header">
    Contact us to learn
  </span>
  <span class="cta-block-body">
    what MiFID II means for your organization, and how to
    stay compliant.
  </span>
  <div class="cta-block-footer">
    <a href="http://example.com" class="btn btn-secondary btn-more">
      Learn more
    </a>
  </div>
</div>
</div>

Wrapper: narrow

Styleguide Tiles.CTA-Block
*/
.cta-block {
  padding: 1rem;
  border: 1px solid hsl(150, 1.1%, 63.9%);
  color: #2235f9;
  background: url(../images/calendar-bg-light.png) no-repeat bottom right;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1.25rem;
  font-weight: bold;
}
.cta-block-header {
  display: block;
  color: #00b5e2;
  text-transform: uppercase;
}
.cta-block-body {
  display: block;
}
.cta-block-footer {
  margin-top: 1rem;
  text-align: center;
}
.cta-block-inverse {
  color: #fff;
  background-color: hsl(200, 3.4%, 34.9%);
  background-image: url(../images/calendar-bg-dark.png);
}
.cta-block-info {
  color: #fff;
  background-color: #0a59a8;
  background-image: url(../images/calendar-bg-dark.png)
}
.cta-block-info > .cta-block-header {
  color: #fff;
  text-transform: none;
}
.cta-block-image {
  color: #fff;
  background-color: #0a59a8;
  background-image: none; /* override with inline styles */
  background-position: center center;
}
.sticky-header__front {
  position: relative;
  top: 0;
  z-index: 20;
}
.sticky-header__back {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1; /* fix stacking in Safari 11 */
}
.sticky-header__main {
  position: relative;
  background-color: white;
  z-index: 10;
}