/**
 * This is our main stylesheet for the entire playspace project.
 *
 * Here we use the ITCSS convention (https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/).
 *
 * The aim is to provide a single stylesheet across playspace that
 * shares common styles across pages as opposed to a stylesheet per page.
 */
/** VENDOR */
/*------------------------------------*\
    # GRANDSTAND
\*------------------------------------*/
/*------------------------------------*\
    # SCRIPT-SPECIFIC OVERRIDES
\*------------------------------------*/
/* Lines */
/* Links */
/* Text */
.gel-canon {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 32px;
  line-height: 2rem; }

@media (min-width: 20em) {
  .gel-canon {
    font-size: 32px;
    font-size: 2rem;
    line-height: 36px;
    line-height: 2.25rem; } }

@media (min-width: 37.5em) {
  .gel-canon {
    font-size: 52px;
    font-size: 3.25rem;
    line-height: 56px;
    line-height: 3.5rem; }
  .no-touch .gel-canon {
    font-size: 44px;
    font-size: 2.75rem;
    line-height: 48px;
    line-height: 3rem; } }

.gel-canon-bold {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 32px;
  line-height: 2rem;
  font-weight: bold;
  letter-spacing: -1px;
  letter-spacing: -0.0625rem; }

@media (min-width: 20em) {
  .gel-canon-bold {
    font-size: 32px;
    font-size: 2rem;
    line-height: 36px;
    line-height: 2.25rem; } }

@media (min-width: 37.5em) {
  .gel-canon-bold {
    font-size: 52px;
    font-size: 3.25rem;
    line-height: 56px;
    line-height: 3.5rem; }
  .no-touch .gel-canon-bold {
    font-size: 44px;
    font-size: 2.75rem;
    line-height: 48px;
    line-height: 3rem; } }

.gel-trafalgar {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem; }

@media (min-width: 20em) {
  .gel-trafalgar {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 28px;
    line-height: 1.75rem; } }

@media (min-width: 37.5em) {
  .gel-trafalgar {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 40px;
    line-height: 2.5rem; }
  .no-touch .gel-trafalgar {
    font-size: 32px;
    font-size: 2rem;
    line-height: 36px;
    line-height: 2.25rem; } }

.gel-trafalgar-bold {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: bold;
  letter-spacing: -1px;
  letter-spacing: -0.0625rem; }

@media (min-width: 20em) {
  .gel-trafalgar-bold {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 28px;
    line-height: 1.75rem; } }

@media (min-width: 37.5em) {
  .gel-trafalgar-bold {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 40px;
    line-height: 2.5rem; }
  .no-touch .gel-trafalgar-bold {
    font-size: 32px;
    font-size: 2rem;
    line-height: 36px;
    line-height: 2.25rem; } }

.gel-paragon {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem; }

@media (min-width: 20em) {
  .gel-paragon {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 26px;
    line-height: 1.625rem; } }

@media (min-width: 37.5em) {
  .gel-paragon {
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 34px;
    line-height: 2.125rem; }
  .no-touch .gel-paragon {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 32px;
    line-height: 2rem; } }

.gel-paragon-bold {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: bold;
  letter-spacing: -1px;
  letter-spacing: -0.0625rem; }

@media (min-width: 20em) {
  .gel-paragon-bold {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 26px;
    line-height: 1.625rem; } }

@media (min-width: 37.5em) {
  .gel-paragon-bold {
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 34px;
    line-height: 2.125rem; }
  .no-touch .gel-paragon-bold {
    font-size: 28px;
    font-size: 1.75rem;
    line-height: 32px;
    line-height: 2rem; } }

.gel-double-pica {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem; }

@media (min-width: 37.5em) {
  .gel-double-pica {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 30px;
    line-height: 1.875rem; }
  .no-touch .gel-double-pica {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 28px;
    line-height: 1.75rem; } }

.gel-double-pica-bold {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 24px;
  line-height: 1.5rem;
  font-weight: bold;
  letter-spacing: -1px;
  letter-spacing: -0.0625rem; }

@media (min-width: 37.5em) {
  .gel-double-pica-bold {
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 30px;
    line-height: 1.875rem; }
  .no-touch .gel-double-pica-bold {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 28px;
    line-height: 1.75rem; } }

.gel-great-primer {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
  line-height: 1.375rem; }

@media (min-width: 37.5em) {
  .gel-great-primer {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 24px;
    line-height: 1.5rem; }
  .no-touch .gel-great-primer {
    font-size: 20px;
    font-size: 1.25rem; } }

.gel-great-primer-bold {
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 22px;
  line-height: 1.375rem;
  font-weight: bold; }

@media (min-width: 20em) {
  .gel-great-primer-bold {
    letter-spacing: -1px;
    letter-spacing: -0.0625rem; } }

@media (min-width: 37.5em) {
  .gel-great-primer-bold {
    font-size: 21px;
    font-size: 1.3125rem;
    line-height: 24px;
    line-height: 1.5rem; }
  .no-touch .gel-great-primer-bold {
    font-size: 20px;
    font-size: 1.25rem; } }

.gel-pica {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 20px;
  line-height: 1.25rem; }

@media (min-width: 20em) {
  .gel-pica {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem; } }

@media (min-width: 37.5em) {
  .gel-pica {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    line-height: 1.375rem; }
  .no-touch .gel-pica {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem; } }

.gel-pica-bold {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 20px;
  line-height: 1.25rem;
  font-weight: bold; }

@media (min-width: 20em) {
  .gel-pica-bold {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem; } }

@media (min-width: 37.5em) {
  .gel-pica-bold {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    line-height: 1.375rem; }
  .no-touch .gel-pica-bold {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem; } }

.gel-long-primer {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 18px;
  line-height: 1.125rem; }

@media (min-width: 37.5em) {
  .gel-long-primer {
    line-height: 20px;
    line-height: 1.25rem; }
  .no-touch .gel-long-primer {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem; } }

.gel-long-primer-bold {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 18px;
  line-height: 1.125rem;
  font-weight: bold; }

@media (min-width: 37.5em) {
  .gel-long-primer-bold {
    line-height: 20px;
    line-height: 1.25rem; }
  .no-touch .gel-long-primer-bold {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem; } }

.gel-brevier {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 16px;
  line-height: 1rem; }

@media (min-width: 20em) {
  .gel-brevier {
    line-height: 18px;
    line-height: 1.125rem; } }

@media (min-width: 37.5em) {
  .no-touch .gel-brevier {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 16px;
    line-height: 1rem; } }

.gel-brevier-bold {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 16px;
  line-height: 1rem;
  font-weight: bold; }

@media (min-width: 20em) {
  .gel-brevier-bold {
    line-height: 18px;
    line-height: 1.125rem; } }

@media (min-width: 37.5em) {
  .no-touch .gel-brevier-bold {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 16px;
    line-height: 1rem; } }

.gel-minion {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 16px;
  line-height: 1rem;
  text-transform: uppercase; }

@media (min-width: 37.5em) {
  .gel-minion {
    font-size: 13px;
    font-size: 0.8125rem; }
  .no-touch .gel-minion {
    font-size: 12px;
    font-size: 0.75rem; } }

.gel-minion-bold {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 16px;
  line-height: 1rem;
  text-transform: uppercase;
  font-weight: bold; }

@media (min-width: 37.5em) {
  .gel-minion-bold {
    font-size: 13px;
    font-size: 0.8125rem; }
  .no-touch .gel-minion-bold {
    font-size: 12px;
    font-size: 0.75rem; } }

.gel-body-copy {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 20px;
  line-height: 1.25rem; }

@media (min-width: 20em) {
  .gel-body-copy {
    font-size: 16px;
    font-size: 1rem;
    line-height: 22px;
    line-height: 1.375rem; } }

@media (min-width: 37.5em) {
  .gel-body-copy {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem; }
  .no-touch .gel-body-copy {
    font-size: 16px;
    font-size: 1rem;
    line-height: 22px;
    line-height: 1.375rem; } }

body {
  font-family: Helvetica, Arial, freesans, sans-serif; }

/* autoprefixer: off */
/**
     * Grid containing element
     */
.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px; }

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px; } }

@media (min-width: 80em) {
  .b-pw-1280 .gel-wrap {
    max-width: 1280px; } }

/**
     * A grid row
     */
.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0; }

@media (min-width: 37.5em) {
  .gel-layout {
    margin-left: -16px; } }

/**
     * A single grid item
     */
.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top; }

@media (min-width: 37.5em) {
  .gel-layout__item {
    padding-left: 16px; } }

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

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

/**
     * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
     * markup will display in order 4, 3, 2, 1 on your page
     */
.gel-layout--rev {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.no-flexbox .gel-layout--rev {
  direction: rtl;
  text-align: left; }

.no-flexbox .gel-layout--rev > .gel-layout__item {
  direction: ltr;
  text-align: left; }

/**
     * Align layout items to the vertical centers of each other
     */
.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center; }

.gel-layout--middle > .gel-layout__item {
  vertical-align: middle; }

/**
     * Align layout items to the vertical bottoms of each other
     */
.gel-layout--bottom {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end; }

.gel-layout--bottom > .gel-layout__item {
  vertical-align: bottom; }

/**
     * Make the layout items fill up from the right hand side
     */
.gel-layout--right {
  text-align: right;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

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

/**
     * Make the layout items fill up from the center outward
     */
.gel-layout--center {
  text-align: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

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

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

/**
     * Disable the flexbox grid
     *
     * 1. Prevents floated layout items from shrinking the layout
     */
.gel-layout--no-flex {
  min-width: 100%; }

.gel-layout--no-flex,
.gel-layout--no-flex > .gel-layout__item {
  display: block;
  display: inline-block; }

/**
         * Force items to be of equal height
         */
.gel-layout--equal > .gel-layout__item {
  display: -webkit-flex;
  display: flex; }

/**
         * Allow items to devide the space equally between the number of items
         */
.gel-layout--fit > .gel-layout__item {
  width: auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; }

/**
         * Align a single grid item to the top
         */
.gel-layout__item--top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start; }

/**
         * Align a single grid item to the center
         */
.gel-layout__item--center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

/**
         * Align a single grid item to the bottom
         */
.gel-layout__item--bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end; }

.gel-1\/1 {
  width: 100% !important; }

.gel-1\/2 {
  width: 50% !important; }

.gel-1\/3 {
  width: 33.3333333333% !important; }

.gel-2\/3 {
  width: 66.6666666667% !important; }

.gel-1\/4 {
  width: 25% !important; }

.gel-2\/4 {
  width: 50% !important; }

.gel-3\/4 {
  width: 75% !important; }

.gel-1\/5 {
  width: 20% !important; }

.gel-2\/5 {
  width: 40% !important; }

.gel-3\/5 {
  width: 60% !important; }

.gel-4\/5 {
  width: 80% !important; }

.gel-1\/8 {
  width: 12.5% !important; }

.gel-2\/8 {
  width: 25% !important; }

.gel-3\/8 {
  width: 37.5% !important; }

.gel-4\/8 {
  width: 50% !important; }

.gel-5\/8 {
  width: 62.5% !important; }

.gel-6\/8 {
  width: 75% !important; }

.gel-7\/8 {
  width: 87.5% !important; }

.gel-1\/10 {
  width: 10% !important; }

.gel-2\/10 {
  width: 20% !important; }

.gel-3\/10 {
  width: 30% !important; }

.gel-4\/10 {
  width: 40% !important; }

.gel-5\/10 {
  width: 50% !important; }

.gel-6\/10 {
  width: 60% !important; }

.gel-7\/10 {
  width: 70% !important; }

.gel-8\/10 {
  width: 80% !important; }

.gel-9\/10 {
  width: 90% !important; }

.gel-1\/12 {
  width: 8.3333333333% !important; }

.gel-2\/12 {
  width: 16.6666666667% !important; }

.gel-3\/12 {
  width: 25% !important; }

.gel-4\/12 {
  width: 33.3333333333% !important; }

.gel-5\/12 {
  width: 41.6666666667% !important; }

.gel-6\/12 {
  width: 50% !important; }

.gel-7\/12 {
  width: 58.3333333333% !important; }

.gel-8\/12 {
  width: 66.6666666667% !important; }

.gel-9\/12 {
  width: 75% !important; }

.gel-10\/12 {
  width: 83.3333333333% !important; }

.gel-11\/12 {
  width: 91.6666666667% !important; }

.gel-1\/24 {
  width: 4.1666666667% !important; }

.gel-2\/24 {
  width: 8.3333333333% !important; }

.gel-3\/24 {
  width: 12.5% !important; }

.gel-4\/24 {
  width: 16.6666666667% !important; }

.gel-5\/24 {
  width: 20.8333333333% !important; }

.gel-6\/24 {
  width: 25% !important; }

.gel-7\/24 {
  width: 29.1666666667% !important; }

.gel-8\/24 {
  width: 33.3333333333% !important; }

.gel-9\/24 {
  width: 37.5% !important; }

.gel-10\/24 {
  width: 41.6666666667% !important; }

.gel-11\/24 {
  width: 45.8333333333% !important; }

.gel-12\/24 {
  width: 50% !important; }

.gel-13\/24 {
  width: 54.1666666667% !important; }

.gel-14\/24 {
  width: 58.3333333333% !important; }

.gel-15\/24 {
  width: 62.5% !important; }

.gel-16\/24 {
  width: 66.6666666667% !important; }

.gel-17\/24 {
  width: 70.8333333333% !important; }

.gel-18\/24 {
  width: 75% !important; }

.gel-19\/24 {
  width: 79.1666666667% !important; }

.gel-20\/24 {
  width: 83.3333333333% !important; }

.gel-21\/24 {
  width: 87.5% !important; }

.gel-22\/24 {
  width: 91.6666666667% !important; }

.gel-23\/24 {
  width: 95.8333333333% !important; }

@media (min-width: 15em) {
  .gel-1\/1\@xs {
    width: 100% !important; }
  .gel-1\/2\@xs {
    width: 50% !important; }
  .gel-1\/3\@xs {
    width: 33.3333333333% !important; }
  .gel-2\/3\@xs {
    width: 66.6666666667% !important; }
  .gel-1\/4\@xs {
    width: 25% !important; }
  .gel-2\/4\@xs {
    width: 50% !important; }
  .gel-3\/4\@xs {
    width: 75% !important; }
  .gel-1\/5\@xs {
    width: 20% !important; }
  .gel-2\/5\@xs {
    width: 40% !important; }
  .gel-3\/5\@xs {
    width: 60% !important; }
  .gel-4\/5\@xs {
    width: 80% !important; }
  .gel-1\/8\@xs {
    width: 12.5% !important; }
  .gel-2\/8\@xs {
    width: 25% !important; }
  .gel-3\/8\@xs {
    width: 37.5% !important; }
  .gel-4\/8\@xs {
    width: 50% !important; }
  .gel-5\/8\@xs {
    width: 62.5% !important; }
  .gel-6\/8\@xs {
    width: 75% !important; }
  .gel-7\/8\@xs {
    width: 87.5% !important; }
  .gel-1\/10\@xs {
    width: 10% !important; }
  .gel-2\/10\@xs {
    width: 20% !important; }
  .gel-3\/10\@xs {
    width: 30% !important; }
  .gel-4\/10\@xs {
    width: 40% !important; }
  .gel-5\/10\@xs {
    width: 50% !important; }
  .gel-6\/10\@xs {
    width: 60% !important; }
  .gel-7\/10\@xs {
    width: 70% !important; }
  .gel-8\/10\@xs {
    width: 80% !important; }
  .gel-9\/10\@xs {
    width: 90% !important; }
  .gel-1\/12\@xs {
    width: 8.3333333333% !important; }
  .gel-2\/12\@xs {
    width: 16.6666666667% !important; }
  .gel-3\/12\@xs {
    width: 25% !important; }
  .gel-4\/12\@xs {
    width: 33.3333333333% !important; }
  .gel-5\/12\@xs {
    width: 41.6666666667% !important; }
  .gel-6\/12\@xs {
    width: 50% !important; }
  .gel-7\/12\@xs {
    width: 58.3333333333% !important; }
  .gel-8\/12\@xs {
    width: 66.6666666667% !important; }
  .gel-9\/12\@xs {
    width: 75% !important; }
  .gel-10\/12\@xs {
    width: 83.3333333333% !important; }
  .gel-11\/12\@xs {
    width: 91.6666666667% !important; }
  .gel-1\/24\@xs {
    width: 4.1666666667% !important; }
  .gel-2\/24\@xs {
    width: 8.3333333333% !important; }
  .gel-3\/24\@xs {
    width: 12.5% !important; }
  .gel-4\/24\@xs {
    width: 16.6666666667% !important; }
  .gel-5\/24\@xs {
    width: 20.8333333333% !important; }
  .gel-6\/24\@xs {
    width: 25% !important; }
  .gel-7\/24\@xs {
    width: 29.1666666667% !important; }
  .gel-8\/24\@xs {
    width: 33.3333333333% !important; }
  .gel-9\/24\@xs {
    width: 37.5% !important; }
  .gel-10\/24\@xs {
    width: 41.6666666667% !important; }
  .gel-11\/24\@xs {
    width: 45.8333333333% !important; }
  .gel-12\/24\@xs {
    width: 50% !important; }
  .gel-13\/24\@xs {
    width: 54.1666666667% !important; }
  .gel-14\/24\@xs {
    width: 58.3333333333% !important; }
  .gel-15\/24\@xs {
    width: 62.5% !important; }
  .gel-16\/24\@xs {
    width: 66.6666666667% !important; }
  .gel-17\/24\@xs {
    width: 70.8333333333% !important; }
  .gel-18\/24\@xs {
    width: 75% !important; }
  .gel-19\/24\@xs {
    width: 79.1666666667% !important; }
  .gel-20\/24\@xs {
    width: 83.3333333333% !important; }
  .gel-21\/24\@xs {
    width: 87.5% !important; }
  .gel-22\/24\@xs {
    width: 91.6666666667% !important; }
  .gel-23\/24\@xs {
    width: 95.8333333333% !important; } }

@media (min-width: 25em) {
  .gel-1\/1\@s {
    width: 100% !important; }
  .gel-1\/2\@s {
    width: 50% !important; }
  .gel-1\/3\@s {
    width: 33.3333333333% !important; }
  .gel-2\/3\@s {
    width: 66.6666666667% !important; }
  .gel-1\/4\@s {
    width: 25% !important; }
  .gel-2\/4\@s {
    width: 50% !important; }
  .gel-3\/4\@s {
    width: 75% !important; }
  .gel-1\/5\@s {
    width: 20% !important; }
  .gel-2\/5\@s {
    width: 40% !important; }
  .gel-3\/5\@s {
    width: 60% !important; }
  .gel-4\/5\@s {
    width: 80% !important; }
  .gel-1\/8\@s {
    width: 12.5% !important; }
  .gel-2\/8\@s {
    width: 25% !important; }
  .gel-3\/8\@s {
    width: 37.5% !important; }
  .gel-4\/8\@s {
    width: 50% !important; }
  .gel-5\/8\@s {
    width: 62.5% !important; }
  .gel-6\/8\@s {
    width: 75% !important; }
  .gel-7\/8\@s {
    width: 87.5% !important; }
  .gel-1\/10\@s {
    width: 10% !important; }
  .gel-2\/10\@s {
    width: 20% !important; }
  .gel-3\/10\@s {
    width: 30% !important; }
  .gel-4\/10\@s {
    width: 40% !important; }
  .gel-5\/10\@s {
    width: 50% !important; }
  .gel-6\/10\@s {
    width: 60% !important; }
  .gel-7\/10\@s {
    width: 70% !important; }
  .gel-8\/10\@s {
    width: 80% !important; }
  .gel-9\/10\@s {
    width: 90% !important; }
  .gel-1\/12\@s {
    width: 8.3333333333% !important; }
  .gel-2\/12\@s {
    width: 16.6666666667% !important; }
  .gel-3\/12\@s {
    width: 25% !important; }
  .gel-4\/12\@s {
    width: 33.3333333333% !important; }
  .gel-5\/12\@s {
    width: 41.6666666667% !important; }
  .gel-6\/12\@s {
    width: 50% !important; }
  .gel-7\/12\@s {
    width: 58.3333333333% !important; }
  .gel-8\/12\@s {
    width: 66.6666666667% !important; }
  .gel-9\/12\@s {
    width: 75% !important; }
  .gel-10\/12\@s {
    width: 83.3333333333% !important; }
  .gel-11\/12\@s {
    width: 91.6666666667% !important; }
  .gel-1\/24\@s {
    width: 4.1666666667% !important; }
  .gel-2\/24\@s {
    width: 8.3333333333% !important; }
  .gel-3\/24\@s {
    width: 12.5% !important; }
  .gel-4\/24\@s {
    width: 16.6666666667% !important; }
  .gel-5\/24\@s {
    width: 20.8333333333% !important; }
  .gel-6\/24\@s {
    width: 25% !important; }
  .gel-7\/24\@s {
    width: 29.1666666667% !important; }
  .gel-8\/24\@s {
    width: 33.3333333333% !important; }
  .gel-9\/24\@s {
    width: 37.5% !important; }
  .gel-10\/24\@s {
    width: 41.6666666667% !important; }
  .gel-11\/24\@s {
    width: 45.8333333333% !important; }
  .gel-12\/24\@s {
    width: 50% !important; }
  .gel-13\/24\@s {
    width: 54.1666666667% !important; }
  .gel-14\/24\@s {
    width: 58.3333333333% !important; }
  .gel-15\/24\@s {
    width: 62.5% !important; }
  .gel-16\/24\@s {
    width: 66.6666666667% !important; }
  .gel-17\/24\@s {
    width: 70.8333333333% !important; }
  .gel-18\/24\@s {
    width: 75% !important; }
  .gel-19\/24\@s {
    width: 79.1666666667% !important; }
  .gel-20\/24\@s {
    width: 83.3333333333% !important; }
  .gel-21\/24\@s {
    width: 87.5% !important; }
  .gel-22\/24\@s {
    width: 91.6666666667% !important; }
  .gel-23\/24\@s {
    width: 95.8333333333% !important; } }

@media (min-width: 37.5em) {
  .gel-1\/1\@m {
    width: 100% !important; }
  .gel-1\/2\@m {
    width: 50% !important; }
  .gel-1\/3\@m {
    width: 33.3333333333% !important; }
  .gel-2\/3\@m {
    width: 66.6666666667% !important; }
  .gel-1\/4\@m {
    width: 25% !important; }
  .gel-2\/4\@m {
    width: 50% !important; }
  .gel-3\/4\@m {
    width: 75% !important; }
  .gel-1\/5\@m {
    width: 20% !important; }
  .gel-2\/5\@m {
    width: 40% !important; }
  .gel-3\/5\@m {
    width: 60% !important; }
  .gel-4\/5\@m {
    width: 80% !important; }
  .gel-1\/8\@m {
    width: 12.5% !important; }
  .gel-2\/8\@m {
    width: 25% !important; }
  .gel-3\/8\@m {
    width: 37.5% !important; }
  .gel-4\/8\@m {
    width: 50% !important; }
  .gel-5\/8\@m {
    width: 62.5% !important; }
  .gel-6\/8\@m {
    width: 75% !important; }
  .gel-7\/8\@m {
    width: 87.5% !important; }
  .gel-1\/10\@m {
    width: 10% !important; }
  .gel-2\/10\@m {
    width: 20% !important; }
  .gel-3\/10\@m {
    width: 30% !important; }
  .gel-4\/10\@m {
    width: 40% !important; }
  .gel-5\/10\@m {
    width: 50% !important; }
  .gel-6\/10\@m {
    width: 60% !important; }
  .gel-7\/10\@m {
    width: 70% !important; }
  .gel-8\/10\@m {
    width: 80% !important; }
  .gel-9\/10\@m {
    width: 90% !important; }
  .gel-1\/12\@m {
    width: 8.3333333333% !important; }
  .gel-2\/12\@m {
    width: 16.6666666667% !important; }
  .gel-3\/12\@m {
    width: 25% !important; }
  .gel-4\/12\@m {
    width: 33.3333333333% !important; }
  .gel-5\/12\@m {
    width: 41.6666666667% !important; }
  .gel-6\/12\@m {
    width: 50% !important; }
  .gel-7\/12\@m {
    width: 58.3333333333% !important; }
  .gel-8\/12\@m {
    width: 66.6666666667% !important; }
  .gel-9\/12\@m {
    width: 75% !important; }
  .gel-10\/12\@m {
    width: 83.3333333333% !important; }
  .gel-11\/12\@m {
    width: 91.6666666667% !important; }
  .gel-1\/24\@m {
    width: 4.1666666667% !important; }
  .gel-2\/24\@m {
    width: 8.3333333333% !important; }
  .gel-3\/24\@m {
    width: 12.5% !important; }
  .gel-4\/24\@m {
    width: 16.6666666667% !important; }
  .gel-5\/24\@m {
    width: 20.8333333333% !important; }
  .gel-6\/24\@m {
    width: 25% !important; }
  .gel-7\/24\@m {
    width: 29.1666666667% !important; }
  .gel-8\/24\@m {
    width: 33.3333333333% !important; }
  .gel-9\/24\@m {
    width: 37.5% !important; }
  .gel-10\/24\@m {
    width: 41.6666666667% !important; }
  .gel-11\/24\@m {
    width: 45.8333333333% !important; }
  .gel-12\/24\@m {
    width: 50% !important; }
  .gel-13\/24\@m {
    width: 54.1666666667% !important; }
  .gel-14\/24\@m {
    width: 58.3333333333% !important; }
  .gel-15\/24\@m {
    width: 62.5% !important; }
  .gel-16\/24\@m {
    width: 66.6666666667% !important; }
  .gel-17\/24\@m {
    width: 70.8333333333% !important; }
  .gel-18\/24\@m {
    width: 75% !important; }
  .gel-19\/24\@m {
    width: 79.1666666667% !important; }
  .gel-20\/24\@m {
    width: 83.3333333333% !important; }
  .gel-21\/24\@m {
    width: 87.5% !important; }
  .gel-22\/24\@m {
    width: 91.6666666667% !important; }
  .gel-23\/24\@m {
    width: 95.8333333333% !important; } }

@media (min-width: 56.25em) {
  .gel-1\/1\@l {
    width: 100% !important; }
  .gel-1\/2\@l {
    width: 50% !important; }
  .gel-1\/3\@l {
    width: 33.3333333333% !important; }
  .gel-2\/3\@l {
    width: 66.6666666667% !important; }
  .gel-1\/4\@l {
    width: 25% !important; }
  .gel-2\/4\@l {
    width: 50% !important; }
  .gel-3\/4\@l {
    width: 75% !important; }
  .gel-1\/5\@l {
    width: 20% !important; }
  .gel-2\/5\@l {
    width: 40% !important; }
  .gel-3\/5\@l {
    width: 60% !important; }
  .gel-4\/5\@l {
    width: 80% !important; }
  .gel-1\/8\@l {
    width: 12.5% !important; }
  .gel-2\/8\@l {
    width: 25% !important; }
  .gel-3\/8\@l {
    width: 37.5% !important; }
  .gel-4\/8\@l {
    width: 50% !important; }
  .gel-5\/8\@l {
    width: 62.5% !important; }
  .gel-6\/8\@l {
    width: 75% !important; }
  .gel-7\/8\@l {
    width: 87.5% !important; }
  .gel-1\/10\@l {
    width: 10% !important; }
  .gel-2\/10\@l {
    width: 20% !important; }
  .gel-3\/10\@l {
    width: 30% !important; }
  .gel-4\/10\@l {
    width: 40% !important; }
  .gel-5\/10\@l {
    width: 50% !important; }
  .gel-6\/10\@l {
    width: 60% !important; }
  .gel-7\/10\@l {
    width: 70% !important; }
  .gel-8\/10\@l {
    width: 80% !important; }
  .gel-9\/10\@l {
    width: 90% !important; }
  .gel-1\/12\@l {
    width: 8.3333333333% !important; }
  .gel-2\/12\@l {
    width: 16.6666666667% !important; }
  .gel-3\/12\@l {
    width: 25% !important; }
  .gel-4\/12\@l {
    width: 33.3333333333% !important; }
  .gel-5\/12\@l {
    width: 41.6666666667% !important; }
  .gel-6\/12\@l {
    width: 50% !important; }
  .gel-7\/12\@l {
    width: 58.3333333333% !important; }
  .gel-8\/12\@l {
    width: 66.6666666667% !important; }
  .gel-9\/12\@l {
    width: 75% !important; }
  .gel-10\/12\@l {
    width: 83.3333333333% !important; }
  .gel-11\/12\@l {
    width: 91.6666666667% !important; }
  .gel-1\/24\@l {
    width: 4.1666666667% !important; }
  .gel-2\/24\@l {
    width: 8.3333333333% !important; }
  .gel-3\/24\@l {
    width: 12.5% !important; }
  .gel-4\/24\@l {
    width: 16.6666666667% !important; }
  .gel-5\/24\@l {
    width: 20.8333333333% !important; }
  .gel-6\/24\@l {
    width: 25% !important; }
  .gel-7\/24\@l {
    width: 29.1666666667% !important; }
  .gel-8\/24\@l {
    width: 33.3333333333% !important; }
  .gel-9\/24\@l {
    width: 37.5% !important; }
  .gel-10\/24\@l {
    width: 41.6666666667% !important; }
  .gel-11\/24\@l {
    width: 45.8333333333% !important; }
  .gel-12\/24\@l {
    width: 50% !important; }
  .gel-13\/24\@l {
    width: 54.1666666667% !important; }
  .gel-14\/24\@l {
    width: 58.3333333333% !important; }
  .gel-15\/24\@l {
    width: 62.5% !important; }
  .gel-16\/24\@l {
    width: 66.6666666667% !important; }
  .gel-17\/24\@l {
    width: 70.8333333333% !important; }
  .gel-18\/24\@l {
    width: 75% !important; }
  .gel-19\/24\@l {
    width: 79.1666666667% !important; }
  .gel-20\/24\@l {
    width: 83.3333333333% !important; }
  .gel-21\/24\@l {
    width: 87.5% !important; }
  .gel-22\/24\@l {
    width: 91.6666666667% !important; }
  .gel-23\/24\@l {
    width: 95.8333333333% !important; } }

@media (min-width: 63em) {
  .gel-1\/1\@xl {
    width: 100% !important; }
  .gel-1\/2\@xl {
    width: 50% !important; }
  .gel-1\/3\@xl {
    width: 33.3333333333% !important; }
  .gel-2\/3\@xl {
    width: 66.6666666667% !important; }
  .gel-1\/4\@xl {
    width: 25% !important; }
  .gel-2\/4\@xl {
    width: 50% !important; }
  .gel-3\/4\@xl {
    width: 75% !important; }
  .gel-1\/5\@xl {
    width: 20% !important; }
  .gel-2\/5\@xl {
    width: 40% !important; }
  .gel-3\/5\@xl {
    width: 60% !important; }
  .gel-4\/5\@xl {
    width: 80% !important; }
  .gel-1\/8\@xl {
    width: 12.5% !important; }
  .gel-2\/8\@xl {
    width: 25% !important; }
  .gel-3\/8\@xl {
    width: 37.5% !important; }
  .gel-4\/8\@xl {
    width: 50% !important; }
  .gel-5\/8\@xl {
    width: 62.5% !important; }
  .gel-6\/8\@xl {
    width: 75% !important; }
  .gel-7\/8\@xl {
    width: 87.5% !important; }
  .gel-1\/10\@xl {
    width: 10% !important; }
  .gel-2\/10\@xl {
    width: 20% !important; }
  .gel-3\/10\@xl {
    width: 30% !important; }
  .gel-4\/10\@xl {
    width: 40% !important; }
  .gel-5\/10\@xl {
    width: 50% !important; }
  .gel-6\/10\@xl {
    width: 60% !important; }
  .gel-7\/10\@xl {
    width: 70% !important; }
  .gel-8\/10\@xl {
    width: 80% !important; }
  .gel-9\/10\@xl {
    width: 90% !important; }
  .gel-1\/12\@xl {
    width: 8.3333333333% !important; }
  .gel-2\/12\@xl {
    width: 16.6666666667% !important; }
  .gel-3\/12\@xl {
    width: 25% !important; }
  .gel-4\/12\@xl {
    width: 33.3333333333% !important; }
  .gel-5\/12\@xl {
    width: 41.6666666667% !important; }
  .gel-6\/12\@xl {
    width: 50% !important; }
  .gel-7\/12\@xl {
    width: 58.3333333333% !important; }
  .gel-8\/12\@xl {
    width: 66.6666666667% !important; }
  .gel-9\/12\@xl {
    width: 75% !important; }
  .gel-10\/12\@xl {
    width: 83.3333333333% !important; }
  .gel-11\/12\@xl {
    width: 91.6666666667% !important; }
  .gel-1\/24\@xl {
    width: 4.1666666667% !important; }
  .gel-2\/24\@xl {
    width: 8.3333333333% !important; }
  .gel-3\/24\@xl {
    width: 12.5% !important; }
  .gel-4\/24\@xl {
    width: 16.6666666667% !important; }
  .gel-5\/24\@xl {
    width: 20.8333333333% !important; }
  .gel-6\/24\@xl {
    width: 25% !important; }
  .gel-7\/24\@xl {
    width: 29.1666666667% !important; }
  .gel-8\/24\@xl {
    width: 33.3333333333% !important; }
  .gel-9\/24\@xl {
    width: 37.5% !important; }
  .gel-10\/24\@xl {
    width: 41.6666666667% !important; }
  .gel-11\/24\@xl {
    width: 45.8333333333% !important; }
  .gel-12\/24\@xl {
    width: 50% !important; }
  .gel-13\/24\@xl {
    width: 54.1666666667% !important; }
  .gel-14\/24\@xl {
    width: 58.3333333333% !important; }
  .gel-15\/24\@xl {
    width: 62.5% !important; }
  .gel-16\/24\@xl {
    width: 66.6666666667% !important; }
  .gel-17\/24\@xl {
    width: 70.8333333333% !important; }
  .gel-18\/24\@xl {
    width: 75% !important; }
  .gel-19\/24\@xl {
    width: 79.1666666667% !important; }
  .gel-20\/24\@xl {
    width: 83.3333333333% !important; }
  .gel-21\/24\@xl {
    width: 87.5% !important; }
  .gel-22\/24\@xl {
    width: 91.6666666667% !important; }
  .gel-23\/24\@xl {
    width: 95.8333333333% !important; } }

@media (min-width: 80em) {
  .b-pw-1280 .gel-1\/1\@xxl {
    width: 100% !important; }
  .b-pw-1280 .gel-1\/2\@xxl {
    width: 50% !important; }
  .b-pw-1280 .gel-1\/3\@xxl {
    width: 33.3333333333% !important; }
  .b-pw-1280 .gel-2\/3\@xxl {
    width: 66.6666666667% !important; }
  .b-pw-1280 .gel-1\/4\@xxl {
    width: 25% !important; }
  .b-pw-1280 .gel-2\/4\@xxl {
    width: 50% !important; }
  .b-pw-1280 .gel-3\/4\@xxl {
    width: 75% !important; }
  .b-pw-1280 .gel-1\/5\@xxl {
    width: 20% !important; }
  .b-pw-1280 .gel-2\/5\@xxl {
    width: 40% !important; }
  .b-pw-1280 .gel-3\/5\@xxl {
    width: 60% !important; }
  .b-pw-1280 .gel-4\/5\@xxl {
    width: 80% !important; }
  .b-pw-1280 .gel-1\/8\@xxl {
    width: 12.5% !important; }
  .b-pw-1280 .gel-2\/8\@xxl {
    width: 25% !important; }
  .b-pw-1280 .gel-3\/8\@xxl {
    width: 37.5% !important; }
  .b-pw-1280 .gel-4\/8\@xxl {
    width: 50% !important; }
  .b-pw-1280 .gel-5\/8\@xxl {
    width: 62.5% !important; }
  .b-pw-1280 .gel-6\/8\@xxl {
    width: 75% !important; }
  .b-pw-1280 .gel-7\/8\@xxl {
    width: 87.5% !important; }
  .b-pw-1280 .gel-1\/10\@xxl {
    width: 10% !important; }
  .b-pw-1280 .gel-2\/10\@xxl {
    width: 20% !important; }
  .b-pw-1280 .gel-3\/10\@xxl {
    width: 30% !important; }
  .b-pw-1280 .gel-4\/10\@xxl {
    width: 40% !important; }
  .b-pw-1280 .gel-5\/10\@xxl {
    width: 50% !important; }
  .b-pw-1280 .gel-6\/10\@xxl {
    width: 60% !important; }
  .b-pw-1280 .gel-7\/10\@xxl {
    width: 70% !important; }
  .b-pw-1280 .gel-8\/10\@xxl {
    width: 80% !important; }
  .b-pw-1280 .gel-9\/10\@xxl {
    width: 90% !important; }
  .b-pw-1280 .gel-1\/12\@xxl {
    width: 8.3333333333% !important; }
  .b-pw-1280 .gel-2\/12\@xxl {
    width: 16.6666666667% !important; }
  .b-pw-1280 .gel-3\/12\@xxl {
    width: 25% !important; }
  .b-pw-1280 .gel-4\/12\@xxl {
    width: 33.3333333333% !important; }
  .b-pw-1280 .gel-5\/12\@xxl {
    width: 41.6666666667% !important; }
  .b-pw-1280 .gel-6\/12\@xxl {
    width: 50% !important; }
  .b-pw-1280 .gel-7\/12\@xxl {
    width: 58.3333333333% !important; }
  .b-pw-1280 .gel-8\/12\@xxl {
    width: 66.6666666667% !important; }
  .b-pw-1280 .gel-9\/12\@xxl {
    width: 75% !important; }
  .b-pw-1280 .gel-10\/12\@xxl {
    width: 83.3333333333% !important; }
  .b-pw-1280 .gel-11\/12\@xxl {
    width: 91.6666666667% !important; }
  .b-pw-1280 .gel-1\/24\@xxl {
    width: 4.1666666667% !important; }
  .b-pw-1280 .gel-2\/24\@xxl {
    width: 8.3333333333% !important; }
  .b-pw-1280 .gel-3\/24\@xxl {
    width: 12.5% !important; }
  .b-pw-1280 .gel-4\/24\@xxl {
    width: 16.6666666667% !important; }
  .b-pw-1280 .gel-5\/24\@xxl {
    width: 20.8333333333% !important; }
  .b-pw-1280 .gel-6\/24\@xxl {
    width: 25% !important; }
  .b-pw-1280 .gel-7\/24\@xxl {
    width: 29.1666666667% !important; }
  .b-pw-1280 .gel-8\/24\@xxl {
    width: 33.3333333333% !important; }
  .b-pw-1280 .gel-9\/24\@xxl {
    width: 37.5% !important; }
  .b-pw-1280 .gel-10\/24\@xxl {
    width: 41.6666666667% !important; }
  .b-pw-1280 .gel-11\/24\@xxl {
    width: 45.8333333333% !important; }
  .b-pw-1280 .gel-12\/24\@xxl {
    width: 50% !important; }
  .b-pw-1280 .gel-13\/24\@xxl {
    width: 54.1666666667% !important; }
  .b-pw-1280 .gel-14\/24\@xxl {
    width: 58.3333333333% !important; }
  .b-pw-1280 .gel-15\/24\@xxl {
    width: 62.5% !important; }
  .b-pw-1280 .gel-16\/24\@xxl {
    width: 66.6666666667% !important; }
  .b-pw-1280 .gel-17\/24\@xxl {
    width: 70.8333333333% !important; }
  .b-pw-1280 .gel-18\/24\@xxl {
    width: 75% !important; }
  .b-pw-1280 .gel-19\/24\@xxl {
    width: 79.1666666667% !important; }
  .b-pw-1280 .gel-20\/24\@xxl {
    width: 83.3333333333% !important; }
  .b-pw-1280 .gel-21\/24\@xxl {
    width: 87.5% !important; }
  .b-pw-1280 .gel-22\/24\@xxl {
    width: 91.6666666667% !important; }
  .b-pw-1280 .gel-23\/24\@xxl {
    width: 95.8333333333% !important; } }

/*------------------------------------*\
    # BULLET
\*------------------------------------*/
/**
 * The `bullet` pattern is used to align an icon with some text,
 * similar to how a bullet point has the icon and the text
 *
    <span class="gs-o-bullet [ gs-o-bullet- | gs-o-bullet+ | gs-o-bullet--essential  | gs-o-bullet--block | gs-o-bullet--reverse ]">
        <span class="gs-o-bullet__icon gel-icon">
            <svg>
                <use xlink:href="#gel-icon-duration"></use>
            </svg>
        </span>
        <span class="gs-o-bullet__text">18:30 - 18:34</span>
    </span>
 * 
 */
.gs-o-bullet {
  display: inline-block; }

/**
 * 1.
 *  |[icon] Text here |
 *  |wraps around     |
 *  |below the icon   |
 *
 * 2. Scale the icon proportionally with the text
 *
 * 3. Essential Modifier - only essential icons are shown on core 
 */
.gs-o-bullet__icon {
  /* [1] */
  display: none;
  visibility: hidden;
  height: 1em;
  /* [2] */
  width: 1em;
  /* [2] */
  vertical-align: middle;
  display: inline-block;
  visibility: visible; }

.gs-o-bullet--essential .gs-o-bullet__icon {
  /* [3] */
  display: inline-block;
  visibility: visible; }

/**
 *  4. Block Modifier
 *  |[icon] Text here does |
 *  |       not wrap around|
 *  |       below icon     |
 *  This is styled to look like a traditional list, but with custom icons
 *  The icon sits on top of the text's left margin, so it's recommended to use .gs-u-bullet+
 *  for it to have sufficient spacing
 *
 *  Example usage:
    <span class="gs-o-bullet gs-o-bullet+ gs-o-bullet--block">
        <span class="gs-o-bullet__icon gel-icon">
            <svg>
                <use xlink:href="#gel-icon-duration"></use>
            </svg>
        </span>
        <span class="gs-o-bullet__text">18:30 - 18:34</span>
    </span>
 */
.gs-o-bullet--block {
  /* [4] */
  position: relative; }

.gs-o-bullet--block .gs-o-bullet__icon {
  /* [4] */
  left: 0;
  position: absolute;
  top: 0; }

.gs-o-bullet__text {
  display: inline-block;
  vertical-align: middle; }

/* SPACING */
/**
 * For non-essential icons, we only want the space before text
 * on enhanced, since the icon isn't shown on core 
 */
/**
     * If both icon and text are present we need to space them out
     */
.gs-o-bullet__icon + .gs-o-bullet__text {
  margin-left: 8px; }

/**
     * Reduced spacing between icon and text
     */
.gs-o-bullet- .gs-o-bullet__icon + .gs-o-bullet__text {
  margin-left: 4px; }

/**
     * Increased spacing between icon and text
     */
.gs-o-bullet\+ .gs-o-bullet__icon + .gs-o-bullet__text {
  margin-left: 16px; }

/* 
 * For essential icons, we want spacing between the icon and text 
 * on both core and enhanced
 */
.gs-o-bullet--essential .gs-o-bullet__icon + .gs-o-bullet__text {
  margin-left: 8px; }

.gs-o-bullet--essential .gs-o-bullet- .gs-o-bullet__icon + .gs-o-bullet__text {
  margin-left: 4px; }

.gs-o-bullet--essential .gs-o-bullet\+ .gs-o-bullet__icon + .gs-o-bullet__text {
  margin-left: 16px; }

/**
 * If you need the icon to sit after the text you can reverse
 * the bullet
 */
.gs-o-bullet--reverse {
  direction: rtl; }

.gs-o-bullet--reverse .gs-o-bullet__icon {
  margin-right: 0;
  margin-left: 4px; }

/*------------------------------------*\
    # BUTTON
\*------------------------------------*/
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Normalize some styles.
 * 4. Fixes odd inner spacing in IE7.
 */
.gs-o-button {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [2] */
  position: relative;
  overflow: visible;
  /* [4] */
  margin: 0;
  /* [3] */
  padding: 8px;
  text-align: center;
  /* [3] */
  border: 0;
  /* [3] */ }

.gs-o-button:hover, .gs-o-button:active {
  text-decoration: none;
  /* [3] */
  cursor: pointer; }

.gs-o-button:active {
  top: 1px; }

.gs-o-button--big {
  padding: 16px; }

.gs-o-button--full {
  display: block;
  width: 100%; }

.gs-o-button--primary {
  background-color: #252525;
  color: #fff; }

.gs-o-button--primary:hover, .gs-o-button--primary:active {
  background-color: #121212; }

.gs-o-button--secondary {
  background-color: #ededed;
  color: #252525; }

.gs-o-button--secondary:hover, .gs-o-button--secondary:active {
  background-color: #e0e0e0; }

.gs-o-button--clear {
  background-color: transparent;
  color: #252525; }

.gs-o-button--clear:hover, .gs-o-button--clear:active {
  background-color: transparent;
  color: #121212; }

.gs-o-button--white {
  background: #fff;
  color: #252525; }

.gs-o-button--white:hover, .gs-o-button--white:active {
  background: #fff;
  color: #121212; }

.gs-o-button--my-bbc {
  background-color: #006def;
  color: #fff; }

.gs-o-button--my-bbc:hover {
  background-color: #005bc8; }

.gs-o-button--share {
  background-color: #0b8a0b;
  color: #fff; }

.gs-o-button--share:hover {
  background-color: #097209; }

.gs-o-button--border {
  border: 1px solid #121212; }

.gs-o-button[disabled],
.gs-o-button--disabled {
  opacity: .2;
  cursor: auto; }

.gs-o-button[disabled]:active,
.gs-o-button--disabled:active {
  top: 0; }

/*------------------------------------*\
    # FAUX BLOCK LINK
\*------------------------------------*/
/*
* The `Faux Block Link` pattern allows you to make an entire block
* a link, whilst having links nested within in that block also clickable.
*
* The main link (i.e. the faux block link) is absolutely positioned across the entire
* block, any nested links have a little z-index bump to lift them on top. Nice.
*
* This implementation is not compatible with IE8 and below. On these browsers
* this falls back to being two standard anchors.
*
* EXAMPLE IMPLEMENTATION - http://codepen.io/anon/pen/NAwZpd

<div class="gs-o-faux-block-link">
    <a href="http://www.bbc.co.uk/news" class="gs-o-faux-block-link__overlay-link">
      <h3>Heading</h3>
    </a>
    <p>This is some summary <a href="http://www.bbc.co.uk/sport">text</a>/p>
</div>

Our implementation is based on http://codepen.io/IschaGast/pen/Qjxpxo
*/
/*
 * Fixes the issue where the faux block links work intermittently on
 * IE9 and IE10, and ensures that all areas of the block act as a link
 */
.gs-o-faux-block-link {
  position: relative; }

.gs-o-faux-block-link a,
.gs-o-faux-block-link abbr[title] {
  position: relative;
  z-index: 2; }

.gs-o-faux-block-link .gs-o-faux-block-link__overlay-link {
  position: static; }

.gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
  bottom: 0;
  content: "";
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  z-index: 1; }

.ie9 .gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0; } }

/**
 * This class allows you to have a seperate overlay href rather than using :before
 * Useful if you have a position relative between the link and the container div where the .gs-o-faux-block-link
 * should overlay.
 */
.gs-o-faux-block-link .gs-o-faux-block-link__overlay {
  display: none;
  visibility: hidden;
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  visibility: visible;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap; }

.gs-o-faux-block-link .gs-o-faux-block-link__overlay:hover {
  cursor: pointer; }

/**
 * Increased specificity so it trumps ".faux-block-link a"
 *
 * 1. IE Fix - Elements have a solid black background in high contrast mode on PC without this.
 */
.gs-o-faux-block-link__overlay.gs-o-faux-block-link__overlay {
  opacity: 0;
  /* [1] */
  position: absolute;
  z-index: 0; }

/*------------------------------------*\
    # FLAG OBJECT
\*------------------------------------*/
/**
 * The flag object is a design pattern similar to the media object, however it
 * utilises `display: table[-cell];` to give us control over the vertical
 * alignments of the text and image. csswizardry.com/2013/05/the-flag-object
 *
    <div class="gs-o-flag">
        <div class="gs-o-flag__img">
            <img src="..." />
        </div>
        <div class="gs-o-flag__body">
            <p>Some content</p>
        </div>
    </div>
 *
 */
/**
 * 1. Allows us to control vertical alignments
 * 2. Force the object to be the full width of its parent. Combined with [1],
 *    this makes the object behave in a quasi-`display: block;` manner.
 */
.gs-o-flag {
  display: table;
  /* [1] */
  width: 100%;
  /* [2] */
  table-layout: fixed; }

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

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

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

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

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

/*------------------------------------*\
    # ICONS
\*------------------------------------*/
/**
     * 1. Inherit the width and height from the parent element, without
     *    without this the SVG will just scale out to a large size
     * 2. Inherit from the `color` value of the parent element
     */
.gel-icon {
  display: inline-block; }

.gel-icon svg {
  width: inherit;
  /* [1] */
  height: inherit;
  /* [1] */
  fill: currentColor;
  /* [2] */ }

/**
     * Lets make the loading spinner, spin
     */
.gel-icon--loading {
  -webkit-animation-name: gel-spin;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: gel-spin;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  animation-name: gel-spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

@-moz-keyframes gel-spin {
  0% {
    -moz-transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(360deg); } }

@-webkit-keyframes gel-spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes gel-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/*------------------------------------*\
    # LIST-INLINE
\*------------------------------------*/
/**
 * The list-inline object simply displays a list of items in one line.
 *
 * E.g:
 *
    Item 1 Item 2 Item 3 Item 4
 *
 */
.gs-o-list-inline {
  margin: 0;
  padding: 0;
  list-style: none; }

.gs-o-list-inline > li {
  display: inline-block;
  vertical-align: middle; }

/**
 * Comma delimited list to semantically mark up lists of tags, etc.
 *
 * E.g:
 *
    Item 1, Item 2, Item 3, Item 4
 *
 * N.B. This component requires that you remove the whitespace between LIs.
 *
 */
.gs-o-list-inline--delimited > li + li:before {
  content: ',\A0'; }

/**
 * Solid line divided list of items
 *
 * Eg.
 *
    Item 1 | Item 2 | Item 3 | Item 4
 *
 * 1. Offset the margin-top applied to items
 *
 */
.gs-o-list-inline--divided {
  margin-top: -4px;
  /* [1] */ }

.gs-o-list-inline--divided > li {
  margin-right: 6px;
  margin-top: 4px;
  padding-right: 6px;
  border-right: 1px solid #dbdbdb; }

.gs-o-list-inline--divided > li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0; }

/**
 * Solid line spaced list of items
 *
 * Eg.
 *
    Item 1   Item 2   Item 3   Item 4
 *
 * 1. Offset the margin-top applied to items
 */
.gs-o-list-inline--spaced {
  margin-top: -4px;
  /* [1] */ }

.gs-o-list-inline--spaced > li {
  margin-right: 8px;
  margin-top: 4px; }

.gs-o-list-inline--spaced > li:last-child {
  margin-right: 0; }

/*------------------------------------*\
    # LIST-UI
\*------------------------------------*/
/**
 * The UI list object creates blocky list items with a keyline separator out of
 * a `ul` or `ol`.
 */
.gs-o-list-ui,
.gs-o-list-ui__item {
  border: 0 solid #dbdbdb; }

.gs-o-list-ui {
  margin: 0;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
  border-top-width: 1px; }

/**
 * A subtle border variant of the list ui
 */
.gs-o-list-ui--subtle {
  border-top-color: #ededed; }

.gs-o-list-ui--subtle .gs-o-list-ui__item {
  border-bottom-color: #ededed; }

.gs-o-list-ui--top-no-border {
  border-top-width: 0; }

.gs-o-list-ui--bottom-no-border .gs-o-list-ui__item:last-child {
  border-bottom-width: 0; }

.gs-o-list-ui__item {
  padding-bottom: 8px;
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
  border-bottom-width: 1px; }

.gs-o-list-ui__item--flush {
  padding: 0; }

.gs-o-list-ui__link {
  display: block;
  padding: 8px 0;
  color: #121212; }

.gs-o-list-ui__link:hover .gs-c-media-icon,
.gs-o-list-ui__link:focus .gs-c-media-icon {
  background-color: #ffd230;
  color: #121212; }

.gs-o-list-ui__link:hover .gs-c-media-icon--live,
.gs-o-list-ui__link:focus .gs-c-media-icon--live {
  background-color: #2866f6;
  color: #fff; }

/*------------------------------------*\
    # MEDIA OBJECT
\*------------------------------------*/
/**
 * Nicole Sullivan's media object is often referred to as the poster child of
 * OOCSS and a fundamental building block of most websites.
 *
    <div class="gs-o-media">
        <div class="gs-o-media__img">
            <img src="..." />
        </div>
        <div class="gs-o-media__body">
            <p>Some content</p>
        </div>
    </div>
 *
 * 1. Force block incase `.media` is applied to an inline element
 */
.gs-o-media {
  display: block;
  /* [1] */ }

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

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

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

/**
 * 1. Remove any rogue margin-bottom of the body or last
 *    nested element
 */
.gs-o-media__body {
  display: block;
  overflow: hidden; }

.gs-o-media__body,
.gs-o-media__body > :last-child {
  margin-bottom: 0;
  /* [1] */ }

/*------------------------------------*\
    # MEDIA ISLAND
\*------------------------------------*/
/**
 * The media island is design to isolate media items from
 * other elements.
 *
 * It also has the ability to position things on top of the images
 * such as media icons
 *
    <div class="gs-o-media-island">
        <img />
        <div class="gs-o-media-island__icon">
            [icon]
        </div>
    </div>
 *
 */
.gs-o-media-island {
  position: relative; }

.gs-o-media-island__icon {
  position: absolute;
  bottom: 0;
  left: 0; }

/*------------------------------------*\
    # RESPONSIVE IMAGE
\*------------------------------------*/
/**
 * The responsive image pattern automatically reserves the space
 * needed for an image to be inserted
 *
    <div class="gs-o-responsive-image [ gs-o-responsive-image--1by1 | gs-o-responsive-image--16by9 ]">
        <img src="..." />
    </div>
 *
 * 1. Setting the height to zero collapses the div so we don't
 *    need to absolutly position the image
 * 2. Stop images 1px difference between the reserved space
 *    and the actual image from showing
 */
.gs-o-responsive-image {
  position: relative;
  height: 0;
  /* [1] */
  overflow: hidden;
  /* [2] */
  background-color: #f0f0f0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODguNTQ5IiBoZWlnaHQ9IjUzLjciIHZpZXdCb3g9IjAgMCAxODguNTQ5IDUzLjciPjxnIGZpbGw9IiNCQ0JDQkMiPjxwYXRoIGQ9Ik0xNjcuNCA3LjQ4NkMxNTcuMjEgNS43NSAxNDUuNjQ0IDkuNjUgMTQxLjUxIDE5LjgyYy0yLjA5IDUuMTM2LTEuOTEgMTAuOTQ3LjY4IDE1Ljg2MiAyLjQ2NSA0LjY3NyA2LjcwNyA4LjEzOCAxMS43MiA5Ljc3NSA2LjQwNSAyLjA5MiAxMy45NCAxLjU3NSAyMC4xNjgtLjg5LjUyLS4yMDYgMy4wOTgtLjk4IDMuMDk4LTEuNTZWMzUuODZjLTcuODU1IDUuMDIyLTIwLjcxMiA3LjY5LTI3LjM0OC0uODE2LTMuMS0zLjk3My0zLjUwOC05Ljc3NC0xLjIxLTE0LjIyNSAyLjQ5LTQuODU1IDcuODQyLTcuNDIzIDEzLjEzLTcuNjEzIDUuNDUtLjE5NSAxMC4zMiAxLjc0IDE1LjAyIDQuM3YtNi42NmMwLS4xOTQuMDktLjQ5Ni0uMTA4LS41NzUtLjk0Mi0uMzc4LTEuODk2LS43My0yLjg1My0xLjA2Ni0yLjA5LS43MzUtNC4yMy0xLjMyLTYuNDA4LTEuNzJ6TTEzMS40Ni4wMTZIMTg3LjgwN2MuNjE4IDAgLjctLjE1LjcuNDYydjUyLjMxNmMwIC41MS4yMTguOTA1LS4zMjcuOTA1aC01Ni42NDZjLS4xNyAwLS4wNzMtMS4zODMtLjA3My0xLjU1NVYuMDE2ek04Ny42MiAyOS42MnYxMC41NWg2Ljg1cy4xMzYtLjAwMy4zNi0uMDEyYy4yMy0uMDEuNTU3LS4wMi45NS0uMDU1Ljc1LS4wNyAxLjcyNi0uMjA1IDIuNjc1LS41MjYuODYtLjI5IDEuNjk4LS43MjUgMi4zMzYtMS4zNjQuMjQ3LS4yNDYuNDUtLjUwMy42MTUtLjc2Mi41MzgtLjg0Ni42NzQtMS43MDUuNzAzLTIuMTkzLjAxNi0uMjEyLjAxNS0uMzM0LjAxNS0uMzM0cy4wMDMtLjA5NiAwLS4yNmMtLjAwNy0uMjAzLS4wMzItLjYtLjE0LTEuMDItLjEzLS41LS4zNy0xLjA4Mi0uODAyLTEuNjEyLS4wOC0uMS0uMTY3LS4yLS4yNjUtLjI5OC0uMTg4LS4xODgtLjM5LS4zNy0uNjE0LS41MzMtLjM3NC0uMjc2LS44MDItLjUxMy0xLjI2OC0uNzE2LS42MTUtLjI2NS0xLjMwNS0uNDY0LTIuMDYtLjYwNS0uMzktLjA3NC0uOC0uMTM1LTEuMjItLjE3My0uMjYtLjAyNi0uNTItLjA0NC0uNzktLjA2LS4yMzMtLjAxNC0uNDc4LS4wMjQtLjcyMy0uMDI0LTIuNDMgMC02LjYyLS4wMDQtNi42Mi0uMDA0ek04Ny42MiAxMy41OHYxMC4wMDJoMy4zMTZzLjIyIDAgLjUxMy0uMDA4Yy4yMjgtLjAwOC41MDItLjAyMy43NDQtLjAzNi42ODMtLjA1IDEuNjI3LS4xNDYgMi41Ny0uNDEuMTg2LS4wNTIuMzctLjExLjU1My0uMTczLjc0LS4yNjMgMS40NS0uNjQ4IDItMS4xOS40NC0uNDMyLjczLS45MTIuOTItMS4zOC4yMzYtLjU3LjMyLTEuMTIuMzU0LTEuNTA3LjAzLS4zNDcuMDMtLjU2Ny4wMy0uNTY3cy4wMDYtLjE2My0uMDEtLjQyM2MtLjAyLS40MzctLjExMi0xLjE0NS0uNDU0LTEuODI3LS4xNjctLjMyNi0uMzk1LS42NC0uNzAyLS45NDUtLjM3NC0uMzctLjgyNi0uNjUtMS4zMTMtLjg2Ni0uOTMyLS40MTMtMi0uNTc3LTIuOS0uNjM3LS4zOS0uMDI2LS43NDgtLjAzLTEuMDUtLjAzLS42OC0uMDAyLTQuNTctLjAwMi00LjU3LS4wMDJ6TTgwLjY5NCA3LjU0NHYzOC42NjJoMTQuNTU0czcuMS4xOTUgMTEuMDE3LTMuNzI0YzMuMTg4LTMuMTg4IDIuOTYtNi44OCAyLjk2LTYuODhzLjIzLTMuODUzLTIuNzI0LTYuODA3Yy0yLjUxNS0yLjUxNi01LjcyOC0zLjE4Ni01LjcyOC0zLjE4NnMxLjQ1LS42ODIgMi41NjYtMS43OTdjLjUyLS41MjMgMi4zOC0yLjIgMi4zOC02LjI3MyAwLTQuMTA0LTIuNzMtNi40NjMtMi43My02LjQ2M3MtMi45OTItMy41MzQtOS43NDYtMy41MzRIODAuNjk0ek02NS43My4wMTZoNTcuMDQ1VjUzLjdINjUuNzNWLjAxNnpNMjEuODkgMjkuNjJ2MTAuNTVoNi44NDhzLjEzOC0uMDAzLjM2LS4wMTJjLjIzMy0uMDEuNTYtLjAyLjk1NC0uMDU1Ljc0Ni0uMDcgMS43MjMtLjIwNSAyLjY3My0uNTI2Ljg2LS4yOSAxLjY5Ny0uNzI1IDIuMzM3LTEuMzY0LjI0Ni0uMjQ2LjQ1LS41MDMuNjEzLS43NjIuNTM4LS44NDYuNjczLTEuNzA1LjcwMy0yLjE5My4wMTYtLjIxMi4wMTQtLjMzNC4wMTQtLjMzNHMuMDA0LS4wOTYgMC0uMjZjLS4wMDgtLjIwMy0uMDMtLjYtLjE0LTEuMDItLjEyOC0uNS0uMzctMS4wODItLjgtMS42MTItLjA4Mi0uMS0uMTctLjItLjI2Ni0uMjk4LS4xOS0uMTg4LS4zOTMtLjM3LS42MTUtLjUzMy0uMzc0LS4yNzYtLjgwMi0uNTEzLTEuMjctLjcxNi0uNjEzLS4yNjUtMS4zMDItLjQ2NC0yLjA2LS42MDUtLjM4Ny0uMDc0LS43OTgtLjEzNS0xLjIxNy0uMTczLS4yNi0uMDI2LS41Mi0uMDQ0LS43OS0uMDYtLjIzMy0uMDE0LS40OC0uMDI0LS43MjMtLjAyNC0yLjQzIDAtNi42Mi0uMDA0LTYuNjItLjAwNHpNMjEuODkgMTMuNTh2MTAuMDAyaDMuMzE2cy4yMiAwIC41MTMtLjAwOGMuMjI4LS4wMDguNTAyLS4wMjMuNzQ1LS4wMzYuNjgzLS4wNSAxLjYyNi0uMTQ2IDIuNTctLjQxLjE4NS0uMDUyLjM3LS4xMS41NTItLjE3My43NC0uMjYzIDEuNDUtLjY0OCAyLjAwMi0xLjE5LjQzNy0uNDMyLjcyNy0uOTEyLjkyLTEuMzguMjMzLS41Ny4zMTUtMS4xMi4zNS0xLjUwNy4wMy0uMzQ3LjAzLS41NjcuMDMtLjU2N3MuMDA2LS4xNjMtLjAwOC0uNDIzYy0uMDIzLS40MzctLjExNC0xLjE0NS0uNDU3LTEuODI3LS4xNjYtLjMyNi0uMzkzLS42NC0uNy0uOTQ1LS4zNzQtLjM3LS44MjYtLjY1LTEuMzEzLS44NjYtLjkzNC0uNDEzLTIuMDAyLS41NzctMi45MDItLjYzNy0uMzktLjAyNi0uNzQ4LS4wMy0xLjA1Mi0uMDMtLjY4LS4wMDItNC41Ny0uMDAyLTQuNTctLjAwMnpNMTQuOTY0IDcuNTQ0djM4LjY2MmgxNC41NTRzNy4wOTcuMTk1IDExLjAxNi0zLjcyNGMzLjE5LTMuMTg4IDIuOTYtNi44OCAyLjk2LTYuODhzLjIzMi0zLjg1My0yLjcyMy02LjgwN2MtMi41MTUtMi41MTYtNS43MjgtMy4xODYtNS43MjgtMy4xODZzMS40NS0uNjgyIDIuNTY2LTEuNzk3Yy41Mi0uNTIzIDIuMzgtMi4yIDIuMzgtNi4yNzMgMC00LjEwNC0yLjczLTYuNDYzLTIuNzMtNi40NjNzLTIuOTktMy41MzQtOS43NDYtMy41MzRIMTQuOTY0ek0wIC4wMTZoNTcuMDQ0VjUzLjdIMFYuMDE2eiIvPjwvZz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30%;
  /**
     * 1. Force the image to sit on top of the placeholder
     * 2. Force the image to fill the available space
     *
     * The exact combination of [1] and [2] is needed to stop the
     * image from being 1px too short, the root cause of which is
     * down to the browser's rendering of sub-pixels
     */ }

.gs-o-responsive-image img {
  position: absolute;
  /* [1] */
  width: 100%;
  /* [2] */
  height: 100%;
  /* [2] */ }

/**
 * Removes the default placeholder styles
 * for background-color and background-image
 */
.gs-o-responsive-image--no-placeholder {
  background-color: transparent;
  background-image: none; }

/**
 * Aspect radio modifiers
 */
.gs-o-responsive-image--1by1 {
  padding-bottom: 100%; }

.gs-o-responsive-image--16by9 {
  padding-bottom: 56.25%; }

/*------------------------------------*\
    # TABLE
\*------------------------------------*/
/**
 * The table object allows you to make complex tables,
 * from football league tables to medals tables.
 */
.gs-o-table {
  width: 100%;
  border-collapse: separate;
  margin-bottom: 16px; }

.gs-o-table--fixed {
  table-layout: fixed; }

/**
 * Add a parent div around a table with this class to allow it
 * to be scrollable horizontally if the viewport is to small.
 */
.gs-o-table-container {
  width: 100%;
  overflow-y: auto; }

.gs-o-table__head {
  background: #f7f7f5; }

.gs-o-table__head .gs-o-table__cell {
  border-bottom: 1px solid #dbdbdb;
  padding-top: 16px;
  padding-bottom: 4px;
  vertical-align: bottom; }

/**
 * Adds hover state to table row if required.
 */
.gs-o-table__row:focus, .gs-o-table__row:hover {
  background-color: #f7f7f5; }

.gs-o-table__row--disabled,
.gs-o-table__row--disabled .gs-o-table__link {
  color: #5a5a5a; }

.gs-o-table__row--highlighted {
  background-color: #e5f2ff; }

.gs-o-table__row--highlighted:focus, .gs-o-table__row--highlighted:hover {
  background-color: #cce5ff; }

.gs-o-table__row--highlighted .gs-o-table__cell {
  border-bottom: 1px solid #d1e8ff; }

/**
 * Use to break up tables to show boundaries or breaks.
 */
.gs-o-table__row--break .gs-o-table__cell {
  border-bottom: 1px dashed #252525; }

/**
 * 1. Force first and last cells to have increased padding
 */
.gs-o-table__cell {
  border-bottom: 1px solid #ededed;
  padding: 8px 4px;
  text-align: center; }

.gs-o-table__cell:first-child {
  padding-left: 8px;
  /* [1] */ }

.gs-o-table__cell:last-child {
  padding-right: 8px;
  /* [1] */ }

.gs-o-table__cell--flush {
  padding: 0; }

.gs-o-table__cell--no-border {
  border-bottom: 0; }

.gs-o-table__cell--border-right {
  border-right: 1px solid #ededed; }

.gs-o-table__cell--border-left {
  border-left: 1px solid #ededed; }

.gs-o-table__cell--left {
  text-align: left; }

.gs-o-table__cell--center {
  text-align: center; }

.gs-o-table__cell--right {
  text-align: right; }

.gs-o-table__cell--bold {
  font-weight: bold; }

.gs-o-table__cell--break {
  border-top: 1px dashed #252525; }

.gs-o-table__link {
  display: block;
  color: #121212;
  font-weight: bold; }

.gs-o-table__link:focus, .gs-o-table__link:hover {
  text-decoration: underline; }

/*------------------------------------*\
    # ANIMATION
\*------------------------------------*/
/**
 * Reduce Motion mixin
 *
 * Allow for custom usage within consumer codebases
 * Usage: .example { @include reduceMotion {display:none;} }
 */
/**
 * Reduce Motion
 *
 * @link https://css-tricks.com/introduction-reduced-motion-media-query/
 */
@media screen and (prefers-reduced-motion: reduce) {
  .gs-u-reduce-motion {
    animation: none; } }

/*------------------------------------*\
    # BOX SIZING
\*------------------------------------*/
/**
 * Grandstand assumes you're applying box-sizing: border-box;
 * globally, because its how box-sizing should work really.
 *
 * Not all teams and codebase follow this rule, as such we
 * might this little helper to allow box-sizing correctly
 *
 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 */
.gs-u-box-size,
.gs-u-box-size * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*------------------------------------*\
    # CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix
 *
 * @link http://bit.ly/1XaLd3M
 * @link http://bit.ly/1NkYJja
 */
.gs-u-clearfix:after {
  content: "";
  display: table;
  clear: both; }

/*------------------------------------*\
    # DISPLAY
\*------------------------------------*/
/**
 * A utility for applying common box rendering.
 *
 * Can also be used using responsive prefixes
 *
    .gs-u-display-none
    .gs-u-display-block@m
 *
 */
.gs-u-display-none {
  display: none !important;
  visibility: hidden !important; }

.gs-u-display-inline {
  display: inline !important;
  visibility: visible !important; }

.gs-u-display-inline-block {
  display: inline-block !important;
  visibility: visible !important; }

.gs-u-display-block {
  display: block !important;
  visibility: visible !important; }

.gs-u-display-table-cell {
  display: table-cell !important;
  visibility: visible !important; }

.gs-u-display-table-row {
  display: table-row !important;
  visibility: visible !important; }

.gs-u-display-flex {
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: -webkit-flex !important;
  display: flex !important;
  visibility: visible !important; }

@media (min-width: 15em) {
  .gs-u-display-none\@xs {
    display: none !important;
    visibility: hidden !important; }
  .gs-u-display-inline\@xs {
    display: inline !important;
    visibility: visible !important; }
  .gs-u-display-inline-block\@xs {
    display: inline-block !important;
    visibility: visible !important; }
  .gs-u-display-block\@xs {
    display: block !important;
    visibility: visible !important; }
  .gs-u-display-table-cell\@xs {
    display: table-cell !important;
    visibility: visible !important; }
  .gs-u-display-table-row\@xs {
    display: table-row !important;
    visibility: visible !important; }
  .gs-u-display-flex\@xs {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important; } }

@media (min-width: 25em) {
  .gs-u-display-none\@s {
    display: none !important;
    visibility: hidden !important; }
  .gs-u-display-inline\@s {
    display: inline !important;
    visibility: visible !important; }
  .gs-u-display-inline-block\@s {
    display: inline-block !important;
    visibility: visible !important; }
  .gs-u-display-block\@s {
    display: block !important;
    visibility: visible !important; }
  .gs-u-display-table-cell\@s {
    display: table-cell !important;
    visibility: visible !important; }
  .gs-u-display-table-row\@s {
    display: table-row !important;
    visibility: visible !important; }
  .gs-u-display-flex\@s {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important; } }

@media (min-width: 37.5em) {
  .gs-u-display-none\@m {
    display: none !important;
    visibility: hidden !important; }
  .gs-u-display-inline\@m {
    display: inline !important;
    visibility: visible !important; }
  .gs-u-display-inline-block\@m {
    display: inline-block !important;
    visibility: visible !important; }
  .gs-u-display-block\@m {
    display: block !important;
    visibility: visible !important; }
  .gs-u-display-table-cell\@m {
    display: table-cell !important;
    visibility: visible !important; }
  .gs-u-display-table-row\@m {
    display: table-row !important;
    visibility: visible !important; }
  .gs-u-display-flex\@m {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important; } }

@media (min-width: 56.25em) {
  .gs-u-display-none\@l {
    display: none !important;
    visibility: hidden !important; }
  .gs-u-display-inline\@l {
    display: inline !important;
    visibility: visible !important; }
  .gs-u-display-inline-block\@l {
    display: inline-block !important;
    visibility: visible !important; }
  .gs-u-display-block\@l {
    display: block !important;
    visibility: visible !important; }
  .gs-u-display-table-cell\@l {
    display: table-cell !important;
    visibility: visible !important; }
  .gs-u-display-table-row\@l {
    display: table-row !important;
    visibility: visible !important; }
  .gs-u-display-flex\@l {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important; } }

@media (min-width: 63em) {
  .gs-u-display-none\@xl {
    display: none !important;
    visibility: hidden !important; }
  .gs-u-display-inline\@xl {
    display: inline !important;
    visibility: visible !important; }
  .gs-u-display-inline-block\@xl {
    display: inline-block !important;
    visibility: visible !important; }
  .gs-u-display-block\@xl {
    display: block !important;
    visibility: visible !important; }
  .gs-u-display-table-cell\@xl {
    display: table-cell !important;
    visibility: visible !important; }
  .gs-u-display-table-row\@xl {
    display: table-row !important;
    visibility: visible !important; }
  .gs-u-display-flex\@xl {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important; } }

@media (min-width: 80em) {
  .b-pw-1280 .gs-u-display-none\@xxl {
    display: none !important;
    visibility: hidden !important; }
  .b-pw-1280 .gs-u-display-inline\@xxl {
    display: inline !important;
    visibility: visible !important; }
  .b-pw-1280 .gs-u-display-inline-block\@xxl {
    display: inline-block !important;
    visibility: visible !important; }
  .b-pw-1280 .gs-u-display-block\@xxl {
    display: block !important;
    visibility: visible !important; }
  .b-pw-1280 .gs-u-display-table-cell\@xxl {
    display: table-cell !important;
    visibility: visible !important; }
  .b-pw-1280 .gs-u-display-table-row\@xxl {
    display: table-row !important;
    visibility: visible !important; }
  .b-pw-1280 .gs-u-display-flex\@xxl {
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    visibility: visible !important; } }

/*------------------------------------*\
    # FLOATS
\*------------------------------------*/
/**
 * A utility for applying floats
 *
 * Can also be used using responsive prefixes
 *
    .gs-u-float-left
    .gs-u-float-left@m
 *
 */
.gs-u-float-left {
  float: left !important; }

.gs-u-float-right {
  float: right !important; }

.gs-u-float-none {
  float: none !important; }

@media (min-width: 15em) {
  .gs-u-float-left\@xs {
    float: left !important; }
  .gs-u-float-right\@xs {
    float: right !important; }
  .gs-u-float-none\@xs {
    float: none !important; } }

@media (min-width: 25em) {
  .gs-u-float-left\@s {
    float: left !important; }
  .gs-u-float-right\@s {
    float: right !important; }
  .gs-u-float-none\@s {
    float: none !important; } }

@media (min-width: 37.5em) {
  .gs-u-float-left\@m {
    float: left !important; }
  .gs-u-float-right\@m {
    float: right !important; }
  .gs-u-float-none\@m {
    float: none !important; } }

@media (min-width: 56.25em) {
  .gs-u-float-left\@l {
    float: left !important; }
  .gs-u-float-right\@l {
    float: right !important; }
  .gs-u-float-none\@l {
    float: none !important; } }

@media (min-width: 63em) {
  .gs-u-float-left\@xl {
    float: left !important; }
  .gs-u-float-right\@xl {
    float: right !important; }
  .gs-u-float-none\@xl {
    float: none !important; } }

@media (min-width: 80em) {
  .b-pw-1280 .gs-u-float-left\@xxl {
    float: left !important; }
  .b-pw-1280 .gs-u-float-right\@xxl {
    float: right !important; }
  .b-pw-1280 .gs-u-float-none\@xxl {
    float: none !important; } }

/*------------------------------------*\
    # CLEARS
\*------------------------------------*/
/**
 * A utility for applying clears
 *
 * Can also be used using responsive prefixes
 *
    .gs-u-clear-left
    .gs-u-clear-left@m
 *
 */
.gs-u-clear-left {
  clear: left !important; }

.gs-u-clear-right {
  clear: right !important; }

.gs-u-clear-both {
  clear: both !important; }

@media (min-width: 15em) {
  .gs-u-clear-left\@xs {
    clear: left !important; }
  .gs-u-clear-right\@xs {
    clear: right !important; }
  .gs-u-clear-both\@xs {
    clear: both !important; } }

@media (min-width: 25em) {
  .gs-u-clear-left\@s {
    clear: left !important; }
  .gs-u-clear-right\@s {
    clear: right !important; }
  .gs-u-clear-both\@s {
    clear: both !important; } }

@media (min-width: 37.5em) {
  .gs-u-clear-left\@m {
    clear: left !important; }
  .gs-u-clear-right\@m {
    clear: right !important; }
  .gs-u-clear-both\@m {
    clear: both !important; } }

@media (min-width: 56.25em) {
  .gs-u-clear-left\@l {
    clear: left !important; }
  .gs-u-clear-right\@l {
    clear: right !important; }
  .gs-u-clear-both\@l {
    clear: both !important; } }

@media (min-width: 63em) {
  .gs-u-clear-left\@xl {
    clear: left !important; }
  .gs-u-clear-right\@xl {
    clear: right !important; }
  .gs-u-clear-both\@xl {
    clear: both !important; } }

@media (min-width: 80em) {
  .b-pw-1280 .gs-u-clear-left\@xxl {
    clear: left !important; }
  .b-pw-1280 .gs-u-clear-right\@xxl {
    clear: right !important; }
  .b-pw-1280 .gs-u-clear-both\@xxl {
    clear: both !important; } }

/*------------------------------------*\
    # TEXT ALIGNMENT
\*------------------------------------*/
/**
 * A utility for managing the alignment of text elements
 */
/**
 * Horizontal alignment
 */
.gs-u-align-left {
  text-align: left; }

.gs-u-align-center {
  text-align: center; }

.gs-u-align-right {
  text-align: right; }

/**
 * Vertical alignment
 */
.gs-u-align-top {
  vertical-align: top; }

.gs-u-align-middle {
  vertical-align: middle; }

.gs-u-align-bottom {
  vertical-align: bottom; }

.gs-u-align-text-top {
  vertical-align: text-top; }

.gs-u-align-text-bottom {
  vertical-align: text-bottom; }

/*------------------------------------*\
    # SPACING
\*------------------------------------*/
/**
 * Spacing (margin and padding) utility classes. These can be used to adjust layouts of components contructed
 * entirely of other abstractions
 *
    <h1 class="gel-cannon-bold gs-u-mb+">My Title</h1>
    <p class="gel-pica gs-u-mb gs-u-mb+@m">Some content</p>
 *
 * Applying spacing should not and does not have to be done exclusively with the classes, apply a bit of
 * common sense thinking as to when and where you use these.
 *
 * These classes use the following naming structure:

    .gs-u-(margin/padding)(spacing type)(spacing size)(optional breakpoint) { ... }

 *
 * Available spacing types:
 *
 * mt -> margin-top
 * mr -> margin-right (margin-left if $rtl is true)
 * mb -> margin-bottom
 * ml -> margin-left (margin-right if $rtl is true)
 * mv -> margin-top & margin-bottom
 * mh -> margin-right & margin-left (flipped if $rtl is true)
 * pt -> padding-top
 * pr -> padding-right (padding-left if $rtl is true)
 * pb -> padding-bottom
 * pl -> padding-left (padding-right if $rtl is true)
 * pv -> padding-top & padding-bottom
 * ph -> padding-right & padding-left (flipped if $rtl is true)
 *
 * Available gel spacing unit sizes:
 *
 * 0       - 0px
 * `--`    - 2px
 * `-`     - 4px
 * Default - 8px
 * `+`     - 16px
 * `++`    - 32px
 *
 * Available gel alt spacing unit sizes:
 *
 * 'alt'   - 12px
 * 'alt+'  - 24px
 * 'alt++'  - 48px
 *
 * Optional breakpoint suffix:
 *
 * @xs - GEL Extra Small Breakpoint (240px)
 * @s - GEL Small Breakpoint (400px)
 * @m - GEL Medium Breakpoint (600px)
 * @l - GEL Large Breakpoint (900px)
 * @xl - GEL Extra Large Breakpoint (1008px)
 * @xxl - GEL Extra Extra Large Breakpoint (1280px)
 *
 */
/**
     * Margin spacing classes (gel spacing unit)
     */
.gs-u-m {
  margin: 8px !important; }

.gs-u-mt {
  margin-top: 8px !important; }

.gs-u-mr {
  margin-right: 8px !important; }

.gs-u-mb {
  margin-bottom: 8px !important; }

.gs-u-ml {
  margin-left: 8px !important; }

.gs-u-mh {
  margin-right: 8px !important;
  margin-left: 8px !important; }

.gs-u-mv {
  margin-top: 8px !important;
  margin-bottom: 8px !important; }

/**
     * Tiny margin spacing classes (gel spacing unit)
     */
.gs-u-m-- {
  margin: 2px !important; }

.gs-u-mt-- {
  margin-top: 2px !important; }

.gs-u-mr-- {
  margin-right: 2px !important; }

.gs-u-mb-- {
  margin-bottom: 2px !important; }

.gs-u-ml-- {
  margin-left: 2px !important; }

.gs-u-mh-- {
  margin-right: 2px !important;
  margin-left: 2px !important; }

.gs-u-mv-- {
  margin-top: 2px !important;
  margin-bottom: 2px !important; }

/**
     * Small margin spacing classes (gel spacing unit)
     */
.gs-u-m- {
  margin: 4px !important; }

.gs-u-mt- {
  margin-top: 4px !important; }

.gs-u-mr- {
  margin-right: 4px !important; }

.gs-u-mb- {
  margin-bottom: 4px !important; }

.gs-u-ml- {
  margin-left: 4px !important; }

.gs-u-mh- {
  margin-right: 4px !important;
  margin-left: 4px !important; }

.gs-u-mv- {
  margin-top: 4px !important;
  margin-bottom: 4px !important; }

/**
     * Large margin spacing classes (gel spacing unit)
     */
.gs-u-m\+ {
  margin: 16px !important; }

.gs-u-mt\+ {
  margin-top: 16px !important; }

.gs-u-mr\+ {
  margin-right: 16px !important; }

.gs-u-mb\+ {
  margin-bottom: 16px !important; }

.gs-u-ml\+ {
  margin-left: 16px !important; }

.gs-u-mh\+ {
  margin-right: 16px !important;
  margin-left: 16px !important; }

.gs-u-mv\+ {
  margin-top: 16px !important;
  margin-bottom: 16px !important; }

/**
     * Huge margin spacing classes (gel spacing unit)
     */
.gs-u-m\+\+ {
  margin: 32px !important; }

.gs-u-mt\+\+ {
  margin-top: 32px !important; }

.gs-u-mr\+\+ {
  margin-right: 32px !important; }

.gs-u-mb\+\+ {
  margin-bottom: 32px !important; }

.gs-u-ml\+\+ {
  margin-left: 32px !important; }

.gs-u-mh\+\+ {
  margin-right: 32px !important;
  margin-left: 32px !important; }

.gs-u-mv\+\+ {
  margin-top: 32px !important;
  margin-bottom: 32px !important; }

/**
     * Alt margin spacing classes
     */
.gs-u-m-alt {
  margin: 12px !important; }

.gs-u-mt-alt {
  margin-top: 12px !important; }

.gs-u-mr-alt {
  margin-right: 12px !important; }

.gs-u-mb-alt {
  margin-bottom: 12px !important; }

.gs-u-ml-alt {
  margin-left: 12px !important; }

.gs-u-mh-alt {
  margin-right: 12px !important;
  margin-left: 12px !important; }

.gs-u-mv-alt {
  margin-top: 12px !important;
  margin-bottom: 12px !important; }

/**
     * Alt double margin spacing classes
     */
.gs-u-m-alt\+ {
  margin: 24px !important; }

.gs-u-mt-alt\+ {
  margin-top: 24px !important; }

.gs-u-mr-alt\+ {
  margin-right: 24px !important; }

.gs-u-mb-alt\+ {
  margin-bottom: 24px !important; }

.gs-u-ml-alt\+ {
  margin-left: 24px !important; }

.gs-u-mh-alt\+ {
  margin-right: 24px !important;
  margin-left: 24px !important; }

.gs-u-mv-alt\+ {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

/**
     * Alt quadruple margin spacing classes
     */
.gs-u-m-alt\+\+ {
  margin: 48px !important; }

.gs-u-mt-alt\+\+ {
  margin-top: 48px !important; }

.gs-u-mr-alt\+\+ {
  margin-right: 48px !important; }

.gs-u-mb-alt\+\+ {
  margin-bottom: 48px !important; }

.gs-u-ml-alt\+\+ {
  margin-left: 48px !important; }

.gs-u-mh-alt\+\+ {
  margin-right: 48px !important;
  margin-left: 24px !important; }

.gs-u-mv-alt\+\+ {
  margin-top: 48px !important;
  margin-bottom: 24px !important; }

/**
     * Zero margin spacing classes
     */
.gs-u-m0 {
  margin: 0 !important; }

.gs-u-mt0 {
  margin-top: 0 !important; }

.gs-u-mr0 {
  margin-right: 0 !important; }

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

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

.gs-u-mh0 {
  margin-right: 0 !important;
  margin-left: 0 !important; }

.gs-u-mv0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

/**
     * Padding spacing classes (gel spacing unit)
     */
.gs-u-p {
  padding: 8px !important; }

.gs-u-pt {
  padding-top: 8px !important; }

.gs-u-pr {
  padding-right: 8px !important; }

.gs-u-pb {
  padding-bottom: 8px !important; }

.gs-u-pl {
  padding-left: 8px !important; }

.gs-u-ph {
  padding-right: 8px !important;
  padding-left: 8px !important; }

.gs-u-pv {
  padding-top: 8px !important;
  padding-bottom: 8px !important; }

/**
     * Tiny padding spacing classes (gel spacing unit)
     */
.gs-u-p-- {
  padding: 2px !important; }

.gs-u-pt-- {
  padding-top: 2px !important; }

.gs-u-pr-- {
  padding-right: 2px !important; }

.gs-u-pb-- {
  padding-bottom: 2px !important; }

.gs-u-pl-- {
  padding-left: 2px !important; }

.gs-u-ph-- {
  padding-right: 2px !important;
  padding-left: 2px !important; }

.gs-u-pv-- {
  padding-top: 2px !important;
  padding-bottom: 2px !important; }

/**
     * Small padding spacing classes (gel spacing unit)
     */
.gs-u-p- {
  padding: 4px !important; }

.gs-u-pt- {
  padding-top: 4px !important; }

.gs-u-pr- {
  padding-right: 4px !important; }

.gs-u-pb- {
  padding-bottom: 4px !important; }

.gs-u-pl- {
  padding-left: 4px !important; }

.gs-u-ph- {
  padding-right: 4px !important;
  padding-left: 4px !important; }

.gs-u-pv- {
  padding-top: 4px !important;
  padding-bottom: 4px !important; }

/**
     * Large padding spacing classes (gel spacing unit)
     */
.gs-u-p\+ {
  padding: 16px !important; }

.gs-u-pt\+ {
  padding-top: 16px !important; }

.gs-u-pr\+ {
  padding-right: 16px !important; }

.gs-u-pb\+ {
  padding-bottom: 16px !important; }

.gs-u-pl\+ {
  padding-left: 16px !important; }

.gs-u-ph\+ {
  padding-right: 16px !important;
  padding-left: 16px !important; }

.gs-u-pv\+ {
  padding-top: 16px !important;
  padding-bottom: 16px !important; }

/**
     * Huge padding spacing classes (gel spacing unit)
     */
.gs-u-p\+\+ {
  padding: 32px !important; }

.gs-u-pt\+\+ {
  padding-top: 32px !important; }

.gs-u-pr\+\+ {
  padding-right: 32px !important; }

.gs-u-pb\+\+ {
  padding-bottom: 32px !important; }

.gs-u-pl\+\+ {
  padding-left: 32px !important; }

.gs-u-ph\+\+ {
  padding-right: 32px !important;
  padding-left: 32px !important; }

.gs-u-pv\+\+ {
  padding-top: 32px !important;
  padding-bottom: 32px !important; }

/**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
.gs-u-p-alt {
  padding: 12px !important; }

.gs-u-pt-alt {
  padding-top: 12px !important; }

.gs-u-pr-alt {
  padding-right: 12px !important; }

.gs-u-pb-alt {
  padding-bottom: 12px !important; }

.gs-u-pl-alt {
  padding-left: 12px !important; }

.gs-u-ph-alt {
  padding-right: 12px !important;
  padding-left: 12px !important; }

.gs-u-pv-alt {
  padding-top: 12px !important;
  padding-bottom: 12px !important; }

/**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
.gs-u-p-alt\+ {
  padding: 24px !important; }

.gs-u-pt-alt\+ {
  padding-top: 24px !important; }

.gs-u-pr-alt\+ {
  padding-right: 24px !important; }

.gs-u-pb-alt\+ {
  padding-bottom: 24px !important; }

.gs-u-pl-alt\+ {
  padding-left: 24px !important; }

.gs-u-ph-alt\+ {
  padding-right: 24px !important;
  padding-left: 24px !important; }

.gs-u-pv-alt\+ {
  padding-top: 24px !important;
  padding-bottom: 24px !important; }

/**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
.gs-u-p-alt\+\+ {
  padding: 48px !important; }

.gs-u-pt-alt\+\+ {
  padding-top: 48px !important; }

.gs-u-pr-alt\+\+ {
  padding-right: 48px !important; }

.gs-u-pb-alt\+\+ {
  padding-bottom: 48px !important; }

.gs-u-pl-alt\+\+ {
  padding-left: 48px !important; }

.gs-u-ph-alt\+\+ {
  padding-right: 48px !important;
  padding-left: 24px !important; }

.gs-u-pv-alt\+\+ {
  padding-top: 48px !important;
  padding-bottom: 24px !important; }

/**
     * Zero padding spacing classes
     */
.gs-u-p0 {
  padding: 0 !important; }

.gs-u-pt0 {
  padding-top: 0 !important; }

.gs-u-pr0 {
  padding-right: 0 !important; }

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

.gs-u-pl0 {
  padding-left: 0 !important; }

.gs-u-ph0 {
  padding-right: 0 !important;
  padding-left: 0 !important; }

.gs-u-pv0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

@media (min-width: 15em) {
  /**
     * Margin spacing classes (gel spacing unit)
     */
  .gs-u-m\@xs {
    margin: 8px !important; }
  .gs-u-mt\@xs {
    margin-top: 8px !important; }
  .gs-u-mr\@xs {
    margin-right: 8px !important; }
  .gs-u-mb\@xs {
    margin-bottom: 8px !important; }
  .gs-u-ml\@xs {
    margin-left: 8px !important; }
  .gs-u-mh\@xs {
    margin-right: 8px !important;
    margin-left: 8px !important; }
  .gs-u-mv\@xs {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  /**
     * Tiny margin spacing classes (gel spacing unit)
     */
  .gs-u-m--\@xs {
    margin: 2px !important; }
  .gs-u-mt--\@xs {
    margin-top: 2px !important; }
  .gs-u-mr--\@xs {
    margin-right: 2px !important; }
  .gs-u-mb--\@xs {
    margin-bottom: 2px !important; }
  .gs-u-ml--\@xs {
    margin-left: 2px !important; }
  .gs-u-mh--\@xs {
    margin-right: 2px !important;
    margin-left: 2px !important; }
  .gs-u-mv--\@xs {
    margin-top: 2px !important;
    margin-bottom: 2px !important; }
  /**
     * Small margin spacing classes (gel spacing unit)
     */
  .gs-u-m-\@xs {
    margin: 4px !important; }
  .gs-u-mt-\@xs {
    margin-top: 4px !important; }
  .gs-u-mr-\@xs {
    margin-right: 4px !important; }
  .gs-u-mb-\@xs {
    margin-bottom: 4px !important; }
  .gs-u-ml-\@xs {
    margin-left: 4px !important; }
  .gs-u-mh-\@xs {
    margin-right: 4px !important;
    margin-left: 4px !important; }
  .gs-u-mv-\@xs {
    margin-top: 4px !important;
    margin-bottom: 4px !important; }
  /**
     * Large margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\@xs {
    margin: 16px !important; }
  .gs-u-mt\+\@xs {
    margin-top: 16px !important; }
  .gs-u-mr\+\@xs {
    margin-right: 16px !important; }
  .gs-u-mb\+\@xs {
    margin-bottom: 16px !important; }
  .gs-u-ml\+\@xs {
    margin-left: 16px !important; }
  .gs-u-mh\+\@xs {
    margin-right: 16px !important;
    margin-left: 16px !important; }
  .gs-u-mv\+\@xs {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  /**
     * Huge margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\+\@xs {
    margin: 32px !important; }
  .gs-u-mt\+\+\@xs {
    margin-top: 32px !important; }
  .gs-u-mr\+\+\@xs {
    margin-right: 32px !important; }
  .gs-u-mb\+\+\@xs {
    margin-bottom: 32px !important; }
  .gs-u-ml\+\+\@xs {
    margin-left: 32px !important; }
  .gs-u-mh\+\+\@xs {
    margin-right: 32px !important;
    margin-left: 32px !important; }
  .gs-u-mv\+\+\@xs {
    margin-top: 32px !important;
    margin-bottom: 32px !important; }
  /**
     * Alt margin spacing classes
     */
  .gs-u-m-alt\@xs {
    margin: 12px !important; }
  .gs-u-mt-alt\@xs {
    margin-top: 12px !important; }
  .gs-u-mr-alt\@xs {
    margin-right: 12px !important; }
  .gs-u-mb-alt\@xs {
    margin-bottom: 12px !important; }
  .gs-u-ml-alt\@xs {
    margin-left: 12px !important; }
  .gs-u-mh-alt\@xs {
    margin-right: 12px !important;
    margin-left: 12px !important; }
  .gs-u-mv-alt\@xs {
    margin-top: 12px !important;
    margin-bottom: 12px !important; }
  /**
     * Alt double margin spacing classes
     */
  .gs-u-m-alt\+\@xs {
    margin: 24px !important; }
  .gs-u-mt-alt\+\@xs {
    margin-top: 24px !important; }
  .gs-u-mr-alt\+\@xs {
    margin-right: 24px !important; }
  .gs-u-mb-alt\+\@xs {
    margin-bottom: 24px !important; }
  .gs-u-ml-alt\+\@xs {
    margin-left: 24px !important; }
  .gs-u-mh-alt\+\@xs {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\@xs {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  /**
     * Alt quadruple margin spacing classes
     */
  .gs-u-m-alt\+\+\@xs {
    margin: 48px !important; }
  .gs-u-mt-alt\+\+\@xs {
    margin-top: 48px !important; }
  .gs-u-mr-alt\+\+\@xs {
    margin-right: 48px !important; }
  .gs-u-mb-alt\+\+\@xs {
    margin-bottom: 48px !important; }
  .gs-u-ml-alt\+\+\@xs {
    margin-left: 48px !important; }
  .gs-u-mh-alt\+\+\@xs {
    margin-right: 48px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\+\@xs {
    margin-top: 48px !important;
    margin-bottom: 24px !important; }
  /**
     * Zero margin spacing classes
     */
  .gs-u-m0\@xs {
    margin: 0 !important; }
  .gs-u-mt0\@xs {
    margin-top: 0 !important; }
  .gs-u-mr0\@xs {
    margin-right: 0 !important; }
  .gs-u-mb0\@xs {
    margin-bottom: 0 !important; }
  .gs-u-ml0\@xs {
    margin-left: 0 !important; }
  .gs-u-mh0\@xs {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .gs-u-mv0\@xs {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  /**
     * Padding spacing classes (gel spacing unit)
     */
  .gs-u-p\@xs {
    padding: 8px !important; }
  .gs-u-pt\@xs {
    padding-top: 8px !important; }
  .gs-u-pr\@xs {
    padding-right: 8px !important; }
  .gs-u-pb\@xs {
    padding-bottom: 8px !important; }
  .gs-u-pl\@xs {
    padding-left: 8px !important; }
  .gs-u-ph\@xs {
    padding-right: 8px !important;
    padding-left: 8px !important; }
  .gs-u-pv\@xs {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  /**
     * Tiny padding spacing classes (gel spacing unit)
     */
  .gs-u-p--\@xs {
    padding: 2px !important; }
  .gs-u-pt--\@xs {
    padding-top: 2px !important; }
  .gs-u-pr--\@xs {
    padding-right: 2px !important; }
  .gs-u-pb--\@xs {
    padding-bottom: 2px !important; }
  .gs-u-pl--\@xs {
    padding-left: 2px !important; }
  .gs-u-ph--\@xs {
    padding-right: 2px !important;
    padding-left: 2px !important; }
  .gs-u-pv--\@xs {
    padding-top: 2px !important;
    padding-bottom: 2px !important; }
  /**
     * Small padding spacing classes (gel spacing unit)
     */
  .gs-u-p-\@xs {
    padding: 4px !important; }
  .gs-u-pt-\@xs {
    padding-top: 4px !important; }
  .gs-u-pr-\@xs {
    padding-right: 4px !important; }
  .gs-u-pb-\@xs {
    padding-bottom: 4px !important; }
  .gs-u-pl-\@xs {
    padding-left: 4px !important; }
  .gs-u-ph-\@xs {
    padding-right: 4px !important;
    padding-left: 4px !important; }
  .gs-u-pv-\@xs {
    padding-top: 4px !important;
    padding-bottom: 4px !important; }
  /**
     * Large padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\@xs {
    padding: 16px !important; }
  .gs-u-pt\+\@xs {
    padding-top: 16px !important; }
  .gs-u-pr\+\@xs {
    padding-right: 16px !important; }
  .gs-u-pb\+\@xs {
    padding-bottom: 16px !important; }
  .gs-u-pl\+\@xs {
    padding-left: 16px !important; }
  .gs-u-ph\+\@xs {
    padding-right: 16px !important;
    padding-left: 16px !important; }
  .gs-u-pv\+\@xs {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  /**
     * Huge padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\+\@xs {
    padding: 32px !important; }
  .gs-u-pt\+\+\@xs {
    padding-top: 32px !important; }
  .gs-u-pr\+\+\@xs {
    padding-right: 32px !important; }
  .gs-u-pb\+\+\@xs {
    padding-bottom: 32px !important; }
  .gs-u-pl\+\+\@xs {
    padding-left: 32px !important; }
  .gs-u-ph\+\+\@xs {
    padding-right: 32px !important;
    padding-left: 32px !important; }
  .gs-u-pv\+\+\@xs {
    padding-top: 32px !important;
    padding-bottom: 32px !important; }
  /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\@xs {
    padding: 12px !important; }
  .gs-u-pt-alt\@xs {
    padding-top: 12px !important; }
  .gs-u-pr-alt\@xs {
    padding-right: 12px !important; }
  .gs-u-pb-alt\@xs {
    padding-bottom: 12px !important; }
  .gs-u-pl-alt\@xs {
    padding-left: 12px !important; }
  .gs-u-ph-alt\@xs {
    padding-right: 12px !important;
    padding-left: 12px !important; }
  .gs-u-pv-alt\@xs {
    padding-top: 12px !important;
    padding-bottom: 12px !important; }
  /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\@xs {
    padding: 24px !important; }
  .gs-u-pt-alt\+\@xs {
    padding-top: 24px !important; }
  .gs-u-pr-alt\+\@xs {
    padding-right: 24px !important; }
  .gs-u-pb-alt\+\@xs {
    padding-bottom: 24px !important; }
  .gs-u-pl-alt\+\@xs {
    padding-left: 24px !important; }
  .gs-u-ph-alt\+\@xs {
    padding-right: 24px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\@xs {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  /**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\+\@xs {
    padding: 48px !important; }
  .gs-u-pt-alt\+\+\@xs {
    padding-top: 48px !important; }
  .gs-u-pr-alt\+\+\@xs {
    padding-right: 48px !important; }
  .gs-u-pb-alt\+\+\@xs {
    padding-bottom: 48px !important; }
  .gs-u-pl-alt\+\+\@xs {
    padding-left: 48px !important; }
  .gs-u-ph-alt\+\+\@xs {
    padding-right: 48px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\+\@xs {
    padding-top: 48px !important;
    padding-bottom: 24px !important; }
  /**
     * Zero padding spacing classes
     */
  .gs-u-p0\@xs {
    padding: 0 !important; }
  .gs-u-pt0\@xs {
    padding-top: 0 !important; }
  .gs-u-pr0\@xs {
    padding-right: 0 !important; }
  .gs-u-pb0\@xs {
    padding-bottom: 0 !important; }
  .gs-u-pl0\@xs {
    padding-left: 0 !important; }
  .gs-u-ph0\@xs {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .gs-u-pv0\@xs {
    padding-top: 0 !important;
    padding-bottom: 0 !important; } }

@media (min-width: 25em) {
  /**
     * Margin spacing classes (gel spacing unit)
     */
  .gs-u-m\@s {
    margin: 8px !important; }
  .gs-u-mt\@s {
    margin-top: 8px !important; }
  .gs-u-mr\@s {
    margin-right: 8px !important; }
  .gs-u-mb\@s {
    margin-bottom: 8px !important; }
  .gs-u-ml\@s {
    margin-left: 8px !important; }
  .gs-u-mh\@s {
    margin-right: 8px !important;
    margin-left: 8px !important; }
  .gs-u-mv\@s {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  /**
     * Tiny margin spacing classes (gel spacing unit)
     */
  .gs-u-m--\@s {
    margin: 2px !important; }
  .gs-u-mt--\@s {
    margin-top: 2px !important; }
  .gs-u-mr--\@s {
    margin-right: 2px !important; }
  .gs-u-mb--\@s {
    margin-bottom: 2px !important; }
  .gs-u-ml--\@s {
    margin-left: 2px !important; }
  .gs-u-mh--\@s {
    margin-right: 2px !important;
    margin-left: 2px !important; }
  .gs-u-mv--\@s {
    margin-top: 2px !important;
    margin-bottom: 2px !important; }
  /**
     * Small margin spacing classes (gel spacing unit)
     */
  .gs-u-m-\@s {
    margin: 4px !important; }
  .gs-u-mt-\@s {
    margin-top: 4px !important; }
  .gs-u-mr-\@s {
    margin-right: 4px !important; }
  .gs-u-mb-\@s {
    margin-bottom: 4px !important; }
  .gs-u-ml-\@s {
    margin-left: 4px !important; }
  .gs-u-mh-\@s {
    margin-right: 4px !important;
    margin-left: 4px !important; }
  .gs-u-mv-\@s {
    margin-top: 4px !important;
    margin-bottom: 4px !important; }
  /**
     * Large margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\@s {
    margin: 16px !important; }
  .gs-u-mt\+\@s {
    margin-top: 16px !important; }
  .gs-u-mr\+\@s {
    margin-right: 16px !important; }
  .gs-u-mb\+\@s {
    margin-bottom: 16px !important; }
  .gs-u-ml\+\@s {
    margin-left: 16px !important; }
  .gs-u-mh\+\@s {
    margin-right: 16px !important;
    margin-left: 16px !important; }
  .gs-u-mv\+\@s {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  /**
     * Huge margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\+\@s {
    margin: 32px !important; }
  .gs-u-mt\+\+\@s {
    margin-top: 32px !important; }
  .gs-u-mr\+\+\@s {
    margin-right: 32px !important; }
  .gs-u-mb\+\+\@s {
    margin-bottom: 32px !important; }
  .gs-u-ml\+\+\@s {
    margin-left: 32px !important; }
  .gs-u-mh\+\+\@s {
    margin-right: 32px !important;
    margin-left: 32px !important; }
  .gs-u-mv\+\+\@s {
    margin-top: 32px !important;
    margin-bottom: 32px !important; }
  /**
     * Alt margin spacing classes
     */
  .gs-u-m-alt\@s {
    margin: 12px !important; }
  .gs-u-mt-alt\@s {
    margin-top: 12px !important; }
  .gs-u-mr-alt\@s {
    margin-right: 12px !important; }
  .gs-u-mb-alt\@s {
    margin-bottom: 12px !important; }
  .gs-u-ml-alt\@s {
    margin-left: 12px !important; }
  .gs-u-mh-alt\@s {
    margin-right: 12px !important;
    margin-left: 12px !important; }
  .gs-u-mv-alt\@s {
    margin-top: 12px !important;
    margin-bottom: 12px !important; }
  /**
     * Alt double margin spacing classes
     */
  .gs-u-m-alt\+\@s {
    margin: 24px !important; }
  .gs-u-mt-alt\+\@s {
    margin-top: 24px !important; }
  .gs-u-mr-alt\+\@s {
    margin-right: 24px !important; }
  .gs-u-mb-alt\+\@s {
    margin-bottom: 24px !important; }
  .gs-u-ml-alt\+\@s {
    margin-left: 24px !important; }
  .gs-u-mh-alt\+\@s {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\@s {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  /**
     * Alt quadruple margin spacing classes
     */
  .gs-u-m-alt\+\+\@s {
    margin: 48px !important; }
  .gs-u-mt-alt\+\+\@s {
    margin-top: 48px !important; }
  .gs-u-mr-alt\+\+\@s {
    margin-right: 48px !important; }
  .gs-u-mb-alt\+\+\@s {
    margin-bottom: 48px !important; }
  .gs-u-ml-alt\+\+\@s {
    margin-left: 48px !important; }
  .gs-u-mh-alt\+\+\@s {
    margin-right: 48px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\+\@s {
    margin-top: 48px !important;
    margin-bottom: 24px !important; }
  /**
     * Zero margin spacing classes
     */
  .gs-u-m0\@s {
    margin: 0 !important; }
  .gs-u-mt0\@s {
    margin-top: 0 !important; }
  .gs-u-mr0\@s {
    margin-right: 0 !important; }
  .gs-u-mb0\@s {
    margin-bottom: 0 !important; }
  .gs-u-ml0\@s {
    margin-left: 0 !important; }
  .gs-u-mh0\@s {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .gs-u-mv0\@s {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  /**
     * Padding spacing classes (gel spacing unit)
     */
  .gs-u-p\@s {
    padding: 8px !important; }
  .gs-u-pt\@s {
    padding-top: 8px !important; }
  .gs-u-pr\@s {
    padding-right: 8px !important; }
  .gs-u-pb\@s {
    padding-bottom: 8px !important; }
  .gs-u-pl\@s {
    padding-left: 8px !important; }
  .gs-u-ph\@s {
    padding-right: 8px !important;
    padding-left: 8px !important; }
  .gs-u-pv\@s {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  /**
     * Tiny padding spacing classes (gel spacing unit)
     */
  .gs-u-p--\@s {
    padding: 2px !important; }
  .gs-u-pt--\@s {
    padding-top: 2px !important; }
  .gs-u-pr--\@s {
    padding-right: 2px !important; }
  .gs-u-pb--\@s {
    padding-bottom: 2px !important; }
  .gs-u-pl--\@s {
    padding-left: 2px !important; }
  .gs-u-ph--\@s {
    padding-right: 2px !important;
    padding-left: 2px !important; }
  .gs-u-pv--\@s {
    padding-top: 2px !important;
    padding-bottom: 2px !important; }
  /**
     * Small padding spacing classes (gel spacing unit)
     */
  .gs-u-p-\@s {
    padding: 4px !important; }
  .gs-u-pt-\@s {
    padding-top: 4px !important; }
  .gs-u-pr-\@s {
    padding-right: 4px !important; }
  .gs-u-pb-\@s {
    padding-bottom: 4px !important; }
  .gs-u-pl-\@s {
    padding-left: 4px !important; }
  .gs-u-ph-\@s {
    padding-right: 4px !important;
    padding-left: 4px !important; }
  .gs-u-pv-\@s {
    padding-top: 4px !important;
    padding-bottom: 4px !important; }
  /**
     * Large padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\@s {
    padding: 16px !important; }
  .gs-u-pt\+\@s {
    padding-top: 16px !important; }
  .gs-u-pr\+\@s {
    padding-right: 16px !important; }
  .gs-u-pb\+\@s {
    padding-bottom: 16px !important; }
  .gs-u-pl\+\@s {
    padding-left: 16px !important; }
  .gs-u-ph\+\@s {
    padding-right: 16px !important;
    padding-left: 16px !important; }
  .gs-u-pv\+\@s {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  /**
     * Huge padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\+\@s {
    padding: 32px !important; }
  .gs-u-pt\+\+\@s {
    padding-top: 32px !important; }
  .gs-u-pr\+\+\@s {
    padding-right: 32px !important; }
  .gs-u-pb\+\+\@s {
    padding-bottom: 32px !important; }
  .gs-u-pl\+\+\@s {
    padding-left: 32px !important; }
  .gs-u-ph\+\+\@s {
    padding-right: 32px !important;
    padding-left: 32px !important; }
  .gs-u-pv\+\+\@s {
    padding-top: 32px !important;
    padding-bottom: 32px !important; }
  /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\@s {
    padding: 12px !important; }
  .gs-u-pt-alt\@s {
    padding-top: 12px !important; }
  .gs-u-pr-alt\@s {
    padding-right: 12px !important; }
  .gs-u-pb-alt\@s {
    padding-bottom: 12px !important; }
  .gs-u-pl-alt\@s {
    padding-left: 12px !important; }
  .gs-u-ph-alt\@s {
    padding-right: 12px !important;
    padding-left: 12px !important; }
  .gs-u-pv-alt\@s {
    padding-top: 12px !important;
    padding-bottom: 12px !important; }
  /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\@s {
    padding: 24px !important; }
  .gs-u-pt-alt\+\@s {
    padding-top: 24px !important; }
  .gs-u-pr-alt\+\@s {
    padding-right: 24px !important; }
  .gs-u-pb-alt\+\@s {
    padding-bottom: 24px !important; }
  .gs-u-pl-alt\+\@s {
    padding-left: 24px !important; }
  .gs-u-ph-alt\+\@s {
    padding-right: 24px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\@s {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  /**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\+\@s {
    padding: 48px !important; }
  .gs-u-pt-alt\+\+\@s {
    padding-top: 48px !important; }
  .gs-u-pr-alt\+\+\@s {
    padding-right: 48px !important; }
  .gs-u-pb-alt\+\+\@s {
    padding-bottom: 48px !important; }
  .gs-u-pl-alt\+\+\@s {
    padding-left: 48px !important; }
  .gs-u-ph-alt\+\+\@s {
    padding-right: 48px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\+\@s {
    padding-top: 48px !important;
    padding-bottom: 24px !important; }
  /**
     * Zero padding spacing classes
     */
  .gs-u-p0\@s {
    padding: 0 !important; }
  .gs-u-pt0\@s {
    padding-top: 0 !important; }
  .gs-u-pr0\@s {
    padding-right: 0 !important; }
  .gs-u-pb0\@s {
    padding-bottom: 0 !important; }
  .gs-u-pl0\@s {
    padding-left: 0 !important; }
  .gs-u-ph0\@s {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .gs-u-pv0\@s {
    padding-top: 0 !important;
    padding-bottom: 0 !important; } }

@media (min-width: 37.5em) {
  /**
     * Margin spacing classes (gel spacing unit)
     */
  .gs-u-m\@m {
    margin: 8px !important; }
  .gs-u-mt\@m {
    margin-top: 8px !important; }
  .gs-u-mr\@m {
    margin-right: 8px !important; }
  .gs-u-mb\@m {
    margin-bottom: 8px !important; }
  .gs-u-ml\@m {
    margin-left: 8px !important; }
  .gs-u-mh\@m {
    margin-right: 8px !important;
    margin-left: 8px !important; }
  .gs-u-mv\@m {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  /**
     * Tiny margin spacing classes (gel spacing unit)
     */
  .gs-u-m--\@m {
    margin: 2px !important; }
  .gs-u-mt--\@m {
    margin-top: 2px !important; }
  .gs-u-mr--\@m {
    margin-right: 2px !important; }
  .gs-u-mb--\@m {
    margin-bottom: 2px !important; }
  .gs-u-ml--\@m {
    margin-left: 2px !important; }
  .gs-u-mh--\@m {
    margin-right: 2px !important;
    margin-left: 2px !important; }
  .gs-u-mv--\@m {
    margin-top: 2px !important;
    margin-bottom: 2px !important; }
  /**
     * Small margin spacing classes (gel spacing unit)
     */
  .gs-u-m-\@m {
    margin: 4px !important; }
  .gs-u-mt-\@m {
    margin-top: 4px !important; }
  .gs-u-mr-\@m {
    margin-right: 4px !important; }
  .gs-u-mb-\@m {
    margin-bottom: 4px !important; }
  .gs-u-ml-\@m {
    margin-left: 4px !important; }
  .gs-u-mh-\@m {
    margin-right: 4px !important;
    margin-left: 4px !important; }
  .gs-u-mv-\@m {
    margin-top: 4px !important;
    margin-bottom: 4px !important; }
  /**
     * Large margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\@m {
    margin: 16px !important; }
  .gs-u-mt\+\@m {
    margin-top: 16px !important; }
  .gs-u-mr\+\@m {
    margin-right: 16px !important; }
  .gs-u-mb\+\@m {
    margin-bottom: 16px !important; }
  .gs-u-ml\+\@m {
    margin-left: 16px !important; }
  .gs-u-mh\+\@m {
    margin-right: 16px !important;
    margin-left: 16px !important; }
  .gs-u-mv\+\@m {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  /**
     * Huge margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\+\@m {
    margin: 32px !important; }
  .gs-u-mt\+\+\@m {
    margin-top: 32px !important; }
  .gs-u-mr\+\+\@m {
    margin-right: 32px !important; }
  .gs-u-mb\+\+\@m {
    margin-bottom: 32px !important; }
  .gs-u-ml\+\+\@m {
    margin-left: 32px !important; }
  .gs-u-mh\+\+\@m {
    margin-right: 32px !important;
    margin-left: 32px !important; }
  .gs-u-mv\+\+\@m {
    margin-top: 32px !important;
    margin-bottom: 32px !important; }
  /**
     * Alt margin spacing classes
     */
  .gs-u-m-alt\@m {
    margin: 12px !important; }
  .gs-u-mt-alt\@m {
    margin-top: 12px !important; }
  .gs-u-mr-alt\@m {
    margin-right: 12px !important; }
  .gs-u-mb-alt\@m {
    margin-bottom: 12px !important; }
  .gs-u-ml-alt\@m {
    margin-left: 12px !important; }
  .gs-u-mh-alt\@m {
    margin-right: 12px !important;
    margin-left: 12px !important; }
  .gs-u-mv-alt\@m {
    margin-top: 12px !important;
    margin-bottom: 12px !important; }
  /**
     * Alt double margin spacing classes
     */
  .gs-u-m-alt\+\@m {
    margin: 24px !important; }
  .gs-u-mt-alt\+\@m {
    margin-top: 24px !important; }
  .gs-u-mr-alt\+\@m {
    margin-right: 24px !important; }
  .gs-u-mb-alt\+\@m {
    margin-bottom: 24px !important; }
  .gs-u-ml-alt\+\@m {
    margin-left: 24px !important; }
  .gs-u-mh-alt\+\@m {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\@m {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  /**
     * Alt quadruple margin spacing classes
     */
  .gs-u-m-alt\+\+\@m {
    margin: 48px !important; }
  .gs-u-mt-alt\+\+\@m {
    margin-top: 48px !important; }
  .gs-u-mr-alt\+\+\@m {
    margin-right: 48px !important; }
  .gs-u-mb-alt\+\+\@m {
    margin-bottom: 48px !important; }
  .gs-u-ml-alt\+\+\@m {
    margin-left: 48px !important; }
  .gs-u-mh-alt\+\+\@m {
    margin-right: 48px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\+\@m {
    margin-top: 48px !important;
    margin-bottom: 24px !important; }
  /**
     * Zero margin spacing classes
     */
  .gs-u-m0\@m {
    margin: 0 !important; }
  .gs-u-mt0\@m {
    margin-top: 0 !important; }
  .gs-u-mr0\@m {
    margin-right: 0 !important; }
  .gs-u-mb0\@m {
    margin-bottom: 0 !important; }
  .gs-u-ml0\@m {
    margin-left: 0 !important; }
  .gs-u-mh0\@m {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .gs-u-mv0\@m {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  /**
     * Padding spacing classes (gel spacing unit)
     */
  .gs-u-p\@m {
    padding: 8px !important; }
  .gs-u-pt\@m {
    padding-top: 8px !important; }
  .gs-u-pr\@m {
    padding-right: 8px !important; }
  .gs-u-pb\@m {
    padding-bottom: 8px !important; }
  .gs-u-pl\@m {
    padding-left: 8px !important; }
  .gs-u-ph\@m {
    padding-right: 8px !important;
    padding-left: 8px !important; }
  .gs-u-pv\@m {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  /**
     * Tiny padding spacing classes (gel spacing unit)
     */
  .gs-u-p--\@m {
    padding: 2px !important; }
  .gs-u-pt--\@m {
    padding-top: 2px !important; }
  .gs-u-pr--\@m {
    padding-right: 2px !important; }
  .gs-u-pb--\@m {
    padding-bottom: 2px !important; }
  .gs-u-pl--\@m {
    padding-left: 2px !important; }
  .gs-u-ph--\@m {
    padding-right: 2px !important;
    padding-left: 2px !important; }
  .gs-u-pv--\@m {
    padding-top: 2px !important;
    padding-bottom: 2px !important; }
  /**
     * Small padding spacing classes (gel spacing unit)
     */
  .gs-u-p-\@m {
    padding: 4px !important; }
  .gs-u-pt-\@m {
    padding-top: 4px !important; }
  .gs-u-pr-\@m {
    padding-right: 4px !important; }
  .gs-u-pb-\@m {
    padding-bottom: 4px !important; }
  .gs-u-pl-\@m {
    padding-left: 4px !important; }
  .gs-u-ph-\@m {
    padding-right: 4px !important;
    padding-left: 4px !important; }
  .gs-u-pv-\@m {
    padding-top: 4px !important;
    padding-bottom: 4px !important; }
  /**
     * Large padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\@m {
    padding: 16px !important; }
  .gs-u-pt\+\@m {
    padding-top: 16px !important; }
  .gs-u-pr\+\@m {
    padding-right: 16px !important; }
  .gs-u-pb\+\@m {
    padding-bottom: 16px !important; }
  .gs-u-pl\+\@m {
    padding-left: 16px !important; }
  .gs-u-ph\+\@m {
    padding-right: 16px !important;
    padding-left: 16px !important; }
  .gs-u-pv\+\@m {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  /**
     * Huge padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\+\@m {
    padding: 32px !important; }
  .gs-u-pt\+\+\@m {
    padding-top: 32px !important; }
  .gs-u-pr\+\+\@m {
    padding-right: 32px !important; }
  .gs-u-pb\+\+\@m {
    padding-bottom: 32px !important; }
  .gs-u-pl\+\+\@m {
    padding-left: 32px !important; }
  .gs-u-ph\+\+\@m {
    padding-right: 32px !important;
    padding-left: 32px !important; }
  .gs-u-pv\+\+\@m {
    padding-top: 32px !important;
    padding-bottom: 32px !important; }
  /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\@m {
    padding: 12px !important; }
  .gs-u-pt-alt\@m {
    padding-top: 12px !important; }
  .gs-u-pr-alt\@m {
    padding-right: 12px !important; }
  .gs-u-pb-alt\@m {
    padding-bottom: 12px !important; }
  .gs-u-pl-alt\@m {
    padding-left: 12px !important; }
  .gs-u-ph-alt\@m {
    padding-right: 12px !important;
    padding-left: 12px !important; }
  .gs-u-pv-alt\@m {
    padding-top: 12px !important;
    padding-bottom: 12px !important; }
  /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\@m {
    padding: 24px !important; }
  .gs-u-pt-alt\+\@m {
    padding-top: 24px !important; }
  .gs-u-pr-alt\+\@m {
    padding-right: 24px !important; }
  .gs-u-pb-alt\+\@m {
    padding-bottom: 24px !important; }
  .gs-u-pl-alt\+\@m {
    padding-left: 24px !important; }
  .gs-u-ph-alt\+\@m {
    padding-right: 24px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\@m {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  /**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\+\@m {
    padding: 48px !important; }
  .gs-u-pt-alt\+\+\@m {
    padding-top: 48px !important; }
  .gs-u-pr-alt\+\+\@m {
    padding-right: 48px !important; }
  .gs-u-pb-alt\+\+\@m {
    padding-bottom: 48px !important; }
  .gs-u-pl-alt\+\+\@m {
    padding-left: 48px !important; }
  .gs-u-ph-alt\+\+\@m {
    padding-right: 48px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\+\@m {
    padding-top: 48px !important;
    padding-bottom: 24px !important; }
  /**
     * Zero padding spacing classes
     */
  .gs-u-p0\@m {
    padding: 0 !important; }
  .gs-u-pt0\@m {
    padding-top: 0 !important; }
  .gs-u-pr0\@m {
    padding-right: 0 !important; }
  .gs-u-pb0\@m {
    padding-bottom: 0 !important; }
  .gs-u-pl0\@m {
    padding-left: 0 !important; }
  .gs-u-ph0\@m {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .gs-u-pv0\@m {
    padding-top: 0 !important;
    padding-bottom: 0 !important; } }

@media (min-width: 56.25em) {
  /**
     * Margin spacing classes (gel spacing unit)
     */
  .gs-u-m\@l {
    margin: 8px !important; }
  .gs-u-mt\@l {
    margin-top: 8px !important; }
  .gs-u-mr\@l {
    margin-right: 8px !important; }
  .gs-u-mb\@l {
    margin-bottom: 8px !important; }
  .gs-u-ml\@l {
    margin-left: 8px !important; }
  .gs-u-mh\@l {
    margin-right: 8px !important;
    margin-left: 8px !important; }
  .gs-u-mv\@l {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  /**
     * Tiny margin spacing classes (gel spacing unit)
     */
  .gs-u-m--\@l {
    margin: 2px !important; }
  .gs-u-mt--\@l {
    margin-top: 2px !important; }
  .gs-u-mr--\@l {
    margin-right: 2px !important; }
  .gs-u-mb--\@l {
    margin-bottom: 2px !important; }
  .gs-u-ml--\@l {
    margin-left: 2px !important; }
  .gs-u-mh--\@l {
    margin-right: 2px !important;
    margin-left: 2px !important; }
  .gs-u-mv--\@l {
    margin-top: 2px !important;
    margin-bottom: 2px !important; }
  /**
     * Small margin spacing classes (gel spacing unit)
     */
  .gs-u-m-\@l {
    margin: 4px !important; }
  .gs-u-mt-\@l {
    margin-top: 4px !important; }
  .gs-u-mr-\@l {
    margin-right: 4px !important; }
  .gs-u-mb-\@l {
    margin-bottom: 4px !important; }
  .gs-u-ml-\@l {
    margin-left: 4px !important; }
  .gs-u-mh-\@l {
    margin-right: 4px !important;
    margin-left: 4px !important; }
  .gs-u-mv-\@l {
    margin-top: 4px !important;
    margin-bottom: 4px !important; }
  /**
     * Large margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\@l {
    margin: 16px !important; }
  .gs-u-mt\+\@l {
    margin-top: 16px !important; }
  .gs-u-mr\+\@l {
    margin-right: 16px !important; }
  .gs-u-mb\+\@l {
    margin-bottom: 16px !important; }
  .gs-u-ml\+\@l {
    margin-left: 16px !important; }
  .gs-u-mh\+\@l {
    margin-right: 16px !important;
    margin-left: 16px !important; }
  .gs-u-mv\+\@l {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  /**
     * Huge margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\+\@l {
    margin: 32px !important; }
  .gs-u-mt\+\+\@l {
    margin-top: 32px !important; }
  .gs-u-mr\+\+\@l {
    margin-right: 32px !important; }
  .gs-u-mb\+\+\@l {
    margin-bottom: 32px !important; }
  .gs-u-ml\+\+\@l {
    margin-left: 32px !important; }
  .gs-u-mh\+\+\@l {
    margin-right: 32px !important;
    margin-left: 32px !important; }
  .gs-u-mv\+\+\@l {
    margin-top: 32px !important;
    margin-bottom: 32px !important; }
  /**
     * Alt margin spacing classes
     */
  .gs-u-m-alt\@l {
    margin: 12px !important; }
  .gs-u-mt-alt\@l {
    margin-top: 12px !important; }
  .gs-u-mr-alt\@l {
    margin-right: 12px !important; }
  .gs-u-mb-alt\@l {
    margin-bottom: 12px !important; }
  .gs-u-ml-alt\@l {
    margin-left: 12px !important; }
  .gs-u-mh-alt\@l {
    margin-right: 12px !important;
    margin-left: 12px !important; }
  .gs-u-mv-alt\@l {
    margin-top: 12px !important;
    margin-bottom: 12px !important; }
  /**
     * Alt double margin spacing classes
     */
  .gs-u-m-alt\+\@l {
    margin: 24px !important; }
  .gs-u-mt-alt\+\@l {
    margin-top: 24px !important; }
  .gs-u-mr-alt\+\@l {
    margin-right: 24px !important; }
  .gs-u-mb-alt\+\@l {
    margin-bottom: 24px !important; }
  .gs-u-ml-alt\+\@l {
    margin-left: 24px !important; }
  .gs-u-mh-alt\+\@l {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\@l {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  /**
     * Alt quadruple margin spacing classes
     */
  .gs-u-m-alt\+\+\@l {
    margin: 48px !important; }
  .gs-u-mt-alt\+\+\@l {
    margin-top: 48px !important; }
  .gs-u-mr-alt\+\+\@l {
    margin-right: 48px !important; }
  .gs-u-mb-alt\+\+\@l {
    margin-bottom: 48px !important; }
  .gs-u-ml-alt\+\+\@l {
    margin-left: 48px !important; }
  .gs-u-mh-alt\+\+\@l {
    margin-right: 48px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\+\@l {
    margin-top: 48px !important;
    margin-bottom: 24px !important; }
  /**
     * Zero margin spacing classes
     */
  .gs-u-m0\@l {
    margin: 0 !important; }
  .gs-u-mt0\@l {
    margin-top: 0 !important; }
  .gs-u-mr0\@l {
    margin-right: 0 !important; }
  .gs-u-mb0\@l {
    margin-bottom: 0 !important; }
  .gs-u-ml0\@l {
    margin-left: 0 !important; }
  .gs-u-mh0\@l {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .gs-u-mv0\@l {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  /**
     * Padding spacing classes (gel spacing unit)
     */
  .gs-u-p\@l {
    padding: 8px !important; }
  .gs-u-pt\@l {
    padding-top: 8px !important; }
  .gs-u-pr\@l {
    padding-right: 8px !important; }
  .gs-u-pb\@l {
    padding-bottom: 8px !important; }
  .gs-u-pl\@l {
    padding-left: 8px !important; }
  .gs-u-ph\@l {
    padding-right: 8px !important;
    padding-left: 8px !important; }
  .gs-u-pv\@l {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  /**
     * Tiny padding spacing classes (gel spacing unit)
     */
  .gs-u-p--\@l {
    padding: 2px !important; }
  .gs-u-pt--\@l {
    padding-top: 2px !important; }
  .gs-u-pr--\@l {
    padding-right: 2px !important; }
  .gs-u-pb--\@l {
    padding-bottom: 2px !important; }
  .gs-u-pl--\@l {
    padding-left: 2px !important; }
  .gs-u-ph--\@l {
    padding-right: 2px !important;
    padding-left: 2px !important; }
  .gs-u-pv--\@l {
    padding-top: 2px !important;
    padding-bottom: 2px !important; }
  /**
     * Small padding spacing classes (gel spacing unit)
     */
  .gs-u-p-\@l {
    padding: 4px !important; }
  .gs-u-pt-\@l {
    padding-top: 4px !important; }
  .gs-u-pr-\@l {
    padding-right: 4px !important; }
  .gs-u-pb-\@l {
    padding-bottom: 4px !important; }
  .gs-u-pl-\@l {
    padding-left: 4px !important; }
  .gs-u-ph-\@l {
    padding-right: 4px !important;
    padding-left: 4px !important; }
  .gs-u-pv-\@l {
    padding-top: 4px !important;
    padding-bottom: 4px !important; }
  /**
     * Large padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\@l {
    padding: 16px !important; }
  .gs-u-pt\+\@l {
    padding-top: 16px !important; }
  .gs-u-pr\+\@l {
    padding-right: 16px !important; }
  .gs-u-pb\+\@l {
    padding-bottom: 16px !important; }
  .gs-u-pl\+\@l {
    padding-left: 16px !important; }
  .gs-u-ph\+\@l {
    padding-right: 16px !important;
    padding-left: 16px !important; }
  .gs-u-pv\+\@l {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  /**
     * Huge padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\+\@l {
    padding: 32px !important; }
  .gs-u-pt\+\+\@l {
    padding-top: 32px !important; }
  .gs-u-pr\+\+\@l {
    padding-right: 32px !important; }
  .gs-u-pb\+\+\@l {
    padding-bottom: 32px !important; }
  .gs-u-pl\+\+\@l {
    padding-left: 32px !important; }
  .gs-u-ph\+\+\@l {
    padding-right: 32px !important;
    padding-left: 32px !important; }
  .gs-u-pv\+\+\@l {
    padding-top: 32px !important;
    padding-bottom: 32px !important; }
  /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\@l {
    padding: 12px !important; }
  .gs-u-pt-alt\@l {
    padding-top: 12px !important; }
  .gs-u-pr-alt\@l {
    padding-right: 12px !important; }
  .gs-u-pb-alt\@l {
    padding-bottom: 12px !important; }
  .gs-u-pl-alt\@l {
    padding-left: 12px !important; }
  .gs-u-ph-alt\@l {
    padding-right: 12px !important;
    padding-left: 12px !important; }
  .gs-u-pv-alt\@l {
    padding-top: 12px !important;
    padding-bottom: 12px !important; }
  /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\@l {
    padding: 24px !important; }
  .gs-u-pt-alt\+\@l {
    padding-top: 24px !important; }
  .gs-u-pr-alt\+\@l {
    padding-right: 24px !important; }
  .gs-u-pb-alt\+\@l {
    padding-bottom: 24px !important; }
  .gs-u-pl-alt\+\@l {
    padding-left: 24px !important; }
  .gs-u-ph-alt\+\@l {
    padding-right: 24px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\@l {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  /**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\+\@l {
    padding: 48px !important; }
  .gs-u-pt-alt\+\+\@l {
    padding-top: 48px !important; }
  .gs-u-pr-alt\+\+\@l {
    padding-right: 48px !important; }
  .gs-u-pb-alt\+\+\@l {
    padding-bottom: 48px !important; }
  .gs-u-pl-alt\+\+\@l {
    padding-left: 48px !important; }
  .gs-u-ph-alt\+\+\@l {
    padding-right: 48px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\+\@l {
    padding-top: 48px !important;
    padding-bottom: 24px !important; }
  /**
     * Zero padding spacing classes
     */
  .gs-u-p0\@l {
    padding: 0 !important; }
  .gs-u-pt0\@l {
    padding-top: 0 !important; }
  .gs-u-pr0\@l {
    padding-right: 0 !important; }
  .gs-u-pb0\@l {
    padding-bottom: 0 !important; }
  .gs-u-pl0\@l {
    padding-left: 0 !important; }
  .gs-u-ph0\@l {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .gs-u-pv0\@l {
    padding-top: 0 !important;
    padding-bottom: 0 !important; } }

@media (min-width: 63em) {
  /**
     * Margin spacing classes (gel spacing unit)
     */
  .gs-u-m\@xl {
    margin: 8px !important; }
  .gs-u-mt\@xl {
    margin-top: 8px !important; }
  .gs-u-mr\@xl {
    margin-right: 8px !important; }
  .gs-u-mb\@xl {
    margin-bottom: 8px !important; }
  .gs-u-ml\@xl {
    margin-left: 8px !important; }
  .gs-u-mh\@xl {
    margin-right: 8px !important;
    margin-left: 8px !important; }
  .gs-u-mv\@xl {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  /**
     * Tiny margin spacing classes (gel spacing unit)
     */
  .gs-u-m--\@xl {
    margin: 2px !important; }
  .gs-u-mt--\@xl {
    margin-top: 2px !important; }
  .gs-u-mr--\@xl {
    margin-right: 2px !important; }
  .gs-u-mb--\@xl {
    margin-bottom: 2px !important; }
  .gs-u-ml--\@xl {
    margin-left: 2px !important; }
  .gs-u-mh--\@xl {
    margin-right: 2px !important;
    margin-left: 2px !important; }
  .gs-u-mv--\@xl {
    margin-top: 2px !important;
    margin-bottom: 2px !important; }
  /**
     * Small margin spacing classes (gel spacing unit)
     */
  .gs-u-m-\@xl {
    margin: 4px !important; }
  .gs-u-mt-\@xl {
    margin-top: 4px !important; }
  .gs-u-mr-\@xl {
    margin-right: 4px !important; }
  .gs-u-mb-\@xl {
    margin-bottom: 4px !important; }
  .gs-u-ml-\@xl {
    margin-left: 4px !important; }
  .gs-u-mh-\@xl {
    margin-right: 4px !important;
    margin-left: 4px !important; }
  .gs-u-mv-\@xl {
    margin-top: 4px !important;
    margin-bottom: 4px !important; }
  /**
     * Large margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\@xl {
    margin: 16px !important; }
  .gs-u-mt\+\@xl {
    margin-top: 16px !important; }
  .gs-u-mr\+\@xl {
    margin-right: 16px !important; }
  .gs-u-mb\+\@xl {
    margin-bottom: 16px !important; }
  .gs-u-ml\+\@xl {
    margin-left: 16px !important; }
  .gs-u-mh\+\@xl {
    margin-right: 16px !important;
    margin-left: 16px !important; }
  .gs-u-mv\+\@xl {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  /**
     * Huge margin spacing classes (gel spacing unit)
     */
  .gs-u-m\+\+\@xl {
    margin: 32px !important; }
  .gs-u-mt\+\+\@xl {
    margin-top: 32px !important; }
  .gs-u-mr\+\+\@xl {
    margin-right: 32px !important; }
  .gs-u-mb\+\+\@xl {
    margin-bottom: 32px !important; }
  .gs-u-ml\+\+\@xl {
    margin-left: 32px !important; }
  .gs-u-mh\+\+\@xl {
    margin-right: 32px !important;
    margin-left: 32px !important; }
  .gs-u-mv\+\+\@xl {
    margin-top: 32px !important;
    margin-bottom: 32px !important; }
  /**
     * Alt margin spacing classes
     */
  .gs-u-m-alt\@xl {
    margin: 12px !important; }
  .gs-u-mt-alt\@xl {
    margin-top: 12px !important; }
  .gs-u-mr-alt\@xl {
    margin-right: 12px !important; }
  .gs-u-mb-alt\@xl {
    margin-bottom: 12px !important; }
  .gs-u-ml-alt\@xl {
    margin-left: 12px !important; }
  .gs-u-mh-alt\@xl {
    margin-right: 12px !important;
    margin-left: 12px !important; }
  .gs-u-mv-alt\@xl {
    margin-top: 12px !important;
    margin-bottom: 12px !important; }
  /**
     * Alt double margin spacing classes
     */
  .gs-u-m-alt\+\@xl {
    margin: 24px !important; }
  .gs-u-mt-alt\+\@xl {
    margin-top: 24px !important; }
  .gs-u-mr-alt\+\@xl {
    margin-right: 24px !important; }
  .gs-u-mb-alt\+\@xl {
    margin-bottom: 24px !important; }
  .gs-u-ml-alt\+\@xl {
    margin-left: 24px !important; }
  .gs-u-mh-alt\+\@xl {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\@xl {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  /**
     * Alt quadruple margin spacing classes
     */
  .gs-u-m-alt\+\+\@xl {
    margin: 48px !important; }
  .gs-u-mt-alt\+\+\@xl {
    margin-top: 48px !important; }
  .gs-u-mr-alt\+\+\@xl {
    margin-right: 48px !important; }
  .gs-u-mb-alt\+\+\@xl {
    margin-bottom: 48px !important; }
  .gs-u-ml-alt\+\+\@xl {
    margin-left: 48px !important; }
  .gs-u-mh-alt\+\+\@xl {
    margin-right: 48px !important;
    margin-left: 24px !important; }
  .gs-u-mv-alt\+\+\@xl {
    margin-top: 48px !important;
    margin-bottom: 24px !important; }
  /**
     * Zero margin spacing classes
     */
  .gs-u-m0\@xl {
    margin: 0 !important; }
  .gs-u-mt0\@xl {
    margin-top: 0 !important; }
  .gs-u-mr0\@xl {
    margin-right: 0 !important; }
  .gs-u-mb0\@xl {
    margin-bottom: 0 !important; }
  .gs-u-ml0\@xl {
    margin-left: 0 !important; }
  .gs-u-mh0\@xl {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .gs-u-mv0\@xl {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  /**
     * Padding spacing classes (gel spacing unit)
     */
  .gs-u-p\@xl {
    padding: 8px !important; }
  .gs-u-pt\@xl {
    padding-top: 8px !important; }
  .gs-u-pr\@xl {
    padding-right: 8px !important; }
  .gs-u-pb\@xl {
    padding-bottom: 8px !important; }
  .gs-u-pl\@xl {
    padding-left: 8px !important; }
  .gs-u-ph\@xl {
    padding-right: 8px !important;
    padding-left: 8px !important; }
  .gs-u-pv\@xl {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  /**
     * Tiny padding spacing classes (gel spacing unit)
     */
  .gs-u-p--\@xl {
    padding: 2px !important; }
  .gs-u-pt--\@xl {
    padding-top: 2px !important; }
  .gs-u-pr--\@xl {
    padding-right: 2px !important; }
  .gs-u-pb--\@xl {
    padding-bottom: 2px !important; }
  .gs-u-pl--\@xl {
    padding-left: 2px !important; }
  .gs-u-ph--\@xl {
    padding-right: 2px !important;
    padding-left: 2px !important; }
  .gs-u-pv--\@xl {
    padding-top: 2px !important;
    padding-bottom: 2px !important; }
  /**
     * Small padding spacing classes (gel spacing unit)
     */
  .gs-u-p-\@xl {
    padding: 4px !important; }
  .gs-u-pt-\@xl {
    padding-top: 4px !important; }
  .gs-u-pr-\@xl {
    padding-right: 4px !important; }
  .gs-u-pb-\@xl {
    padding-bottom: 4px !important; }
  .gs-u-pl-\@xl {
    padding-left: 4px !important; }
  .gs-u-ph-\@xl {
    padding-right: 4px !important;
    padding-left: 4px !important; }
  .gs-u-pv-\@xl {
    padding-top: 4px !important;
    padding-bottom: 4px !important; }
  /**
     * Large padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\@xl {
    padding: 16px !important; }
  .gs-u-pt\+\@xl {
    padding-top: 16px !important; }
  .gs-u-pr\+\@xl {
    padding-right: 16px !important; }
  .gs-u-pb\+\@xl {
    padding-bottom: 16px !important; }
  .gs-u-pl\+\@xl {
    padding-left: 16px !important; }
  .gs-u-ph\+\@xl {
    padding-right: 16px !important;
    padding-left: 16px !important; }
  .gs-u-pv\+\@xl {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  /**
     * Huge padding spacing classes (gel spacing unit)
     */
  .gs-u-p\+\+\@xl {
    padding: 32px !important; }
  .gs-u-pt\+\+\@xl {
    padding-top: 32px !important; }
  .gs-u-pr\+\+\@xl {
    padding-right: 32px !important; }
  .gs-u-pb\+\+\@xl {
    padding-bottom: 32px !important; }
  .gs-u-pl\+\+\@xl {
    padding-left: 32px !important; }
  .gs-u-ph\+\+\@xl {
    padding-right: 32px !important;
    padding-left: 32px !important; }
  .gs-u-pv\+\+\@xl {
    padding-top: 32px !important;
    padding-bottom: 32px !important; }
  /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\@xl {
    padding: 12px !important; }
  .gs-u-pt-alt\@xl {
    padding-top: 12px !important; }
  .gs-u-pr-alt\@xl {
    padding-right: 12px !important; }
  .gs-u-pb-alt\@xl {
    padding-bottom: 12px !important; }
  .gs-u-pl-alt\@xl {
    padding-left: 12px !important; }
  .gs-u-ph-alt\@xl {
    padding-right: 12px !important;
    padding-left: 12px !important; }
  .gs-u-pv-alt\@xl {
    padding-top: 12px !important;
    padding-bottom: 12px !important; }
  /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\@xl {
    padding: 24px !important; }
  .gs-u-pt-alt\+\@xl {
    padding-top: 24px !important; }
  .gs-u-pr-alt\+\@xl {
    padding-right: 24px !important; }
  .gs-u-pb-alt\+\@xl {
    padding-bottom: 24px !important; }
  .gs-u-pl-alt\+\@xl {
    padding-left: 24px !important; }
  .gs-u-ph-alt\+\@xl {
    padding-right: 24px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\@xl {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  /**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
  .gs-u-p-alt\+\+\@xl {
    padding: 48px !important; }
  .gs-u-pt-alt\+\+\@xl {
    padding-top: 48px !important; }
  .gs-u-pr-alt\+\+\@xl {
    padding-right: 48px !important; }
  .gs-u-pb-alt\+\+\@xl {
    padding-bottom: 48px !important; }
  .gs-u-pl-alt\+\+\@xl {
    padding-left: 48px !important; }
  .gs-u-ph-alt\+\+\@xl {
    padding-right: 48px !important;
    padding-left: 24px !important; }
  .gs-u-pv-alt\+\+\@xl {
    padding-top: 48px !important;
    padding-bottom: 24px !important; }
  /**
     * Zero padding spacing classes
     */
  .gs-u-p0\@xl {
    padding: 0 !important; }
  .gs-u-pt0\@xl {
    padding-top: 0 !important; }
  .gs-u-pr0\@xl {
    padding-right: 0 !important; }
  .gs-u-pb0\@xl {
    padding-bottom: 0 !important; }
  .gs-u-pl0\@xl {
    padding-left: 0 !important; }
  .gs-u-ph0\@xl {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .gs-u-pv0\@xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important; } }

@media (min-width: 80em) {
  .b-pw-1280 {
    /**
     * Margin spacing classes (gel spacing unit)
     */
    /**
     * Tiny margin spacing classes (gel spacing unit)
     */
    /**
     * Small margin spacing classes (gel spacing unit)
     */
    /**
     * Large margin spacing classes (gel spacing unit)
     */
    /**
     * Huge margin spacing classes (gel spacing unit)
     */
    /**
     * Alt margin spacing classes
     */
    /**
     * Alt double margin spacing classes
     */
    /**
     * Alt quadruple margin spacing classes
     */
    /**
     * Zero margin spacing classes
     */
    /**
     * Padding spacing classes (gel spacing unit)
     */
    /**
     * Tiny padding spacing classes (gel spacing unit)
     */
    /**
     * Small padding spacing classes (gel spacing unit)
     */
    /**
     * Large padding spacing classes (gel spacing unit)
     */
    /**
     * Huge padding spacing classes (gel spacing unit)
     */
    /**
     * Alt padding spacing classes (gel-alt-spacing-unit)
     */
    /**
     * Alt double padding spacing classes (gel-alt-spacing-unit)
     */
    /**
     * Alt quadruple padding spacing classes (gel-alt-spacing-unit)
     */
    /**
     * Zero padding spacing classes
     */ }
  .b-pw-1280 .gs-u-m\@xxl {
    margin: 8px !important; }
  .b-pw-1280 .gs-u-mt\@xxl {
    margin-top: 8px !important; }
  .b-pw-1280 .gs-u-mr\@xxl {
    margin-right: 8px !important; }
  .b-pw-1280 .gs-u-mb\@xxl {
    margin-bottom: 8px !important; }
  .b-pw-1280 .gs-u-ml\@xxl {
    margin-left: 8px !important; }
  .b-pw-1280 .gs-u-mh\@xxl {
    margin-right: 8px !important;
    margin-left: 8px !important; }
  .b-pw-1280 .gs-u-mv\@xxl {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .b-pw-1280 .gs-u-m--\@xxl {
    margin: 2px !important; }
  .b-pw-1280 .gs-u-mt--\@xxl {
    margin-top: 2px !important; }
  .b-pw-1280 .gs-u-mr--\@xxl {
    margin-right: 2px !important; }
  .b-pw-1280 .gs-u-mb--\@xxl {
    margin-bottom: 2px !important; }
  .b-pw-1280 .gs-u-ml--\@xxl {
    margin-left: 2px !important; }
  .b-pw-1280 .gs-u-mh--\@xxl {
    margin-right: 2px !important;
    margin-left: 2px !important; }
  .b-pw-1280 .gs-u-mv--\@xxl {
    margin-top: 2px !important;
    margin-bottom: 2px !important; }
  .b-pw-1280 .gs-u-m-\@xxl {
    margin: 4px !important; }
  .b-pw-1280 .gs-u-mt-\@xxl {
    margin-top: 4px !important; }
  .b-pw-1280 .gs-u-mr-\@xxl {
    margin-right: 4px !important; }
  .b-pw-1280 .gs-u-mb-\@xxl {
    margin-bottom: 4px !important; }
  .b-pw-1280 .gs-u-ml-\@xxl {
    margin-left: 4px !important; }
  .b-pw-1280 .gs-u-mh-\@xxl {
    margin-right: 4px !important;
    margin-left: 4px !important; }
  .b-pw-1280 .gs-u-mv-\@xxl {
    margin-top: 4px !important;
    margin-bottom: 4px !important; }
  .b-pw-1280 .gs-u-m\+\@xxl {
    margin: 16px !important; }
  .b-pw-1280 .gs-u-mt\+\@xxl {
    margin-top: 16px !important; }
  .b-pw-1280 .gs-u-mr\+\@xxl {
    margin-right: 16px !important; }
  .b-pw-1280 .gs-u-mb\+\@xxl {
    margin-bottom: 16px !important; }
  .b-pw-1280 .gs-u-ml\+\@xxl {
    margin-left: 16px !important; }
  .b-pw-1280 .gs-u-mh\+\@xxl {
    margin-right: 16px !important;
    margin-left: 16px !important; }
  .b-pw-1280 .gs-u-mv\+\@xxl {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .b-pw-1280 .gs-u-m\+\+\@xxl {
    margin: 32px !important; }
  .b-pw-1280 .gs-u-mt\+\+\@xxl {
    margin-top: 32px !important; }
  .b-pw-1280 .gs-u-mr\+\+\@xxl {
    margin-right: 32px !important; }
  .b-pw-1280 .gs-u-mb\+\+\@xxl {
    margin-bottom: 32px !important; }
  .b-pw-1280 .gs-u-ml\+\+\@xxl {
    margin-left: 32px !important; }
  .b-pw-1280 .gs-u-mh\+\+\@xxl {
    margin-right: 32px !important;
    margin-left: 32px !important; }
  .b-pw-1280 .gs-u-mv\+\+\@xxl {
    margin-top: 32px !important;
    margin-bottom: 32px !important; }
  .b-pw-1280 .gs-u-m-alt\@xxl {
    margin: 12px !important; }
  .b-pw-1280 .gs-u-mt-alt\@xxl {
    margin-top: 12px !important; }
  .b-pw-1280 .gs-u-mr-alt\@xxl {
    margin-right: 12px !important; }
  .b-pw-1280 .gs-u-mb-alt\@xxl {
    margin-bottom: 12px !important; }
  .b-pw-1280 .gs-u-ml-alt\@xxl {
    margin-left: 12px !important; }
  .b-pw-1280 .gs-u-mh-alt\@xxl {
    margin-right: 12px !important;
    margin-left: 12px !important; }
  .b-pw-1280 .gs-u-mv-alt\@xxl {
    margin-top: 12px !important;
    margin-bottom: 12px !important; }
  .b-pw-1280 .gs-u-m-alt\+\@xxl {
    margin: 24px !important; }
  .b-pw-1280 .gs-u-mt-alt\+\@xxl {
    margin-top: 24px !important; }
  .b-pw-1280 .gs-u-mr-alt\+\@xxl {
    margin-right: 24px !important; }
  .b-pw-1280 .gs-u-mb-alt\+\@xxl {
    margin-bottom: 24px !important; }
  .b-pw-1280 .gs-u-ml-alt\+\@xxl {
    margin-left: 24px !important; }
  .b-pw-1280 .gs-u-mh-alt\+\@xxl {
    margin-right: 24px !important;
    margin-left: 24px !important; }
  .b-pw-1280 .gs-u-mv-alt\+\@xxl {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .b-pw-1280 .gs-u-m-alt\+\+\@xxl {
    margin: 48px !important; }
  .b-pw-1280 .gs-u-mt-alt\+\+\@xxl {
    margin-top: 48px !important; }
  .b-pw-1280 .gs-u-mr-alt\+\+\@xxl {
    margin-right: 48px !important; }
  .b-pw-1280 .gs-u-mb-alt\+\+\@xxl {
    margin-bottom: 48px !important; }
  .b-pw-1280 .gs-u-ml-alt\+\+\@xxl {
    margin-left: 48px !important; }
  .b-pw-1280 .gs-u-mh-alt\+\+\@xxl {
    margin-right: 48px !important;
    margin-left: 24px !important; }
  .b-pw-1280 .gs-u-mv-alt\+\+\@xxl {
    margin-top: 48px !important;
    margin-bottom: 24px !important; }
  .b-pw-1280 .gs-u-m0\@xxl {
    margin: 0 !important; }
  .b-pw-1280 .gs-u-mt0\@xxl {
    margin-top: 0 !important; }
  .b-pw-1280 .gs-u-mr0\@xxl {
    margin-right: 0 !important; }
  .b-pw-1280 .gs-u-mb0\@xxl {
    margin-bottom: 0 !important; }
  .b-pw-1280 .gs-u-ml0\@xxl {
    margin-left: 0 !important; }
  .b-pw-1280 .gs-u-mh0\@xxl {
    margin-right: 0 !important;
    margin-left: 0 !important; }
  .b-pw-1280 .gs-u-mv0\@xxl {
    margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .b-pw-1280 .gs-u-p\@xxl {
    padding: 8px !important; }
  .b-pw-1280 .gs-u-pt\@xxl {
    padding-top: 8px !important; }
  .b-pw-1280 .gs-u-pr\@xxl {
    padding-right: 8px !important; }
  .b-pw-1280 .gs-u-pb\@xxl {
    padding-bottom: 8px !important; }
  .b-pw-1280 .gs-u-pl\@xxl {
    padding-left: 8px !important; }
  .b-pw-1280 .gs-u-ph\@xxl {
    padding-right: 8px !important;
    padding-left: 8px !important; }
  .b-pw-1280 .gs-u-pv\@xxl {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .b-pw-1280 .gs-u-p--\@xxl {
    padding: 2px !important; }
  .b-pw-1280 .gs-u-pt--\@xxl {
    padding-top: 2px !important; }
  .b-pw-1280 .gs-u-pr--\@xxl {
    padding-right: 2px !important; }
  .b-pw-1280 .gs-u-pb--\@xxl {
    padding-bottom: 2px !important; }
  .b-pw-1280 .gs-u-pl--\@xxl {
    padding-left: 2px !important; }
  .b-pw-1280 .gs-u-ph--\@xxl {
    padding-right: 2px !important;
    padding-left: 2px !important; }
  .b-pw-1280 .gs-u-pv--\@xxl {
    padding-top: 2px !important;
    padding-bottom: 2px !important; }
  .b-pw-1280 .gs-u-p-\@xxl {
    padding: 4px !important; }
  .b-pw-1280 .gs-u-pt-\@xxl {
    padding-top: 4px !important; }
  .b-pw-1280 .gs-u-pr-\@xxl {
    padding-right: 4px !important; }
  .b-pw-1280 .gs-u-pb-\@xxl {
    padding-bottom: 4px !important; }
  .b-pw-1280 .gs-u-pl-\@xxl {
    padding-left: 4px !important; }
  .b-pw-1280 .gs-u-ph-\@xxl {
    padding-right: 4px !important;
    padding-left: 4px !important; }
  .b-pw-1280 .gs-u-pv-\@xxl {
    padding-top: 4px !important;
    padding-bottom: 4px !important; }
  .b-pw-1280 .gs-u-p\+\@xxl {
    padding: 16px !important; }
  .b-pw-1280 .gs-u-pt\+\@xxl {
    padding-top: 16px !important; }
  .b-pw-1280 .gs-u-pr\+\@xxl {
    padding-right: 16px !important; }
  .b-pw-1280 .gs-u-pb\+\@xxl {
    padding-bottom: 16px !important; }
  .b-pw-1280 .gs-u-pl\+\@xxl {
    padding-left: 16px !important; }
  .b-pw-1280 .gs-u-ph\+\@xxl {
    padding-right: 16px !important;
    padding-left: 16px !important; }
  .b-pw-1280 .gs-u-pv\+\@xxl {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .b-pw-1280 .gs-u-p\+\+\@xxl {
    padding: 32px !important; }
  .b-pw-1280 .gs-u-pt\+\+\@xxl {
    padding-top: 32px !important; }
  .b-pw-1280 .gs-u-pr\+\+\@xxl {
    padding-right: 32px !important; }
  .b-pw-1280 .gs-u-pb\+\+\@xxl {
    padding-bottom: 32px !important; }
  .b-pw-1280 .gs-u-pl\+\+\@xxl {
    padding-left: 32px !important; }
  .b-pw-1280 .gs-u-ph\+\+\@xxl {
    padding-right: 32px !important;
    padding-left: 32px !important; }
  .b-pw-1280 .gs-u-pv\+\+\@xxl {
    padding-top: 32px !important;
    padding-bottom: 32px !important; }
  .b-pw-1280 .gs-u-p-alt\@xxl {
    padding: 12px !important; }
  .b-pw-1280 .gs-u-pt-alt\@xxl {
    padding-top: 12px !important; }
  .b-pw-1280 .gs-u-pr-alt\@xxl {
    padding-right: 12px !important; }
  .b-pw-1280 .gs-u-pb-alt\@xxl {
    padding-bottom: 12px !important; }
  .b-pw-1280 .gs-u-pl-alt\@xxl {
    padding-left: 12px !important; }
  .b-pw-1280 .gs-u-ph-alt\@xxl {
    padding-right: 12px !important;
    padding-left: 12px !important; }
  .b-pw-1280 .gs-u-pv-alt\@xxl {
    padding-top: 12px !important;
    padding-bottom: 12px !important; }
  .b-pw-1280 .gs-u-p-alt\+\@xxl {
    padding: 24px !important; }
  .b-pw-1280 .gs-u-pt-alt\+\@xxl {
    padding-top: 24px !important; }
  .b-pw-1280 .gs-u-pr-alt\+\@xxl {
    padding-right: 24px !important; }
  .b-pw-1280 .gs-u-pb-alt\+\@xxl {
    padding-bottom: 24px !important; }
  .b-pw-1280 .gs-u-pl-alt\+\@xxl {
    padding-left: 24px !important; }
  .b-pw-1280 .gs-u-ph-alt\+\@xxl {
    padding-right: 24px !important;
    padding-left: 24px !important; }
  .b-pw-1280 .gs-u-pv-alt\+\@xxl {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .b-pw-1280 .gs-u-p-alt\+\+\@xxl {
    padding: 48px !important; }
  .b-pw-1280 .gs-u-pt-alt\+\+\@xxl {
    padding-top: 48px !important; }
  .b-pw-1280 .gs-u-pr-alt\+\+\@xxl {
    padding-right: 48px !important; }
  .b-pw-1280 .gs-u-pb-alt\+\+\@xxl {
    padding-bottom: 48px !important; }
  .b-pw-1280 .gs-u-pl-alt\+\+\@xxl {
    padding-left: 48px !important; }
  .b-pw-1280 .gs-u-ph-alt\+\+\@xxl {
    padding-right: 48px !important;
    padding-left: 24px !important; }
  .b-pw-1280 .gs-u-pv-alt\+\+\@xxl {
    padding-top: 48px !important;
    padding-bottom: 24px !important; }
  .b-pw-1280 .gs-u-p0\@xxl {
    padding: 0 !important; }
  .b-pw-1280 .gs-u-pt0\@xxl {
    padding-top: 0 !important; }
  .b-pw-1280 .gs-u-pr0\@xxl {
    padding-right: 0 !important; }
  .b-pw-1280 .gs-u-pb0\@xxl {
    padding-bottom: 0 !important; }
  .b-pw-1280 .gs-u-pl0\@xxl {
    padding-left: 0 !important; }
  .b-pw-1280 .gs-u-ph0\@xxl {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  .b-pw-1280 .gs-u-pv0\@xxl {
    padding-top: 0 !important;
    padding-bottom: 0 !important; } }

/*------------------------------------*\
    # VISIBILITY
\*------------------------------------*/
/**
 * Hide visually and from screen readers: http://bit.ly/1sfdZho
 */
.gs-u-hidden {
  display: none !important;
  visibility: hidden; }

/**
 * Make a class and placeholder of the visually hidden helper available at all breakpoints
 */
.gs-u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); }

@media (min-width: 15em) {
  .gs-u-vh\@xs {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

@media (min-width: 25em) {
  .gs-u-vh\@s {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

@media (min-width: 37.5em) {
  .gs-u-vh\@m {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

@media (min-width: 56.25em) {
  .gs-u-vh\@l {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

@media (min-width: 63em) {
  .gs-u-vh\@xl {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

@media (min-width: 80em) {
  .b-pw-1280 .gs-u-vh\@xxl {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

/**
 * Extends the .gs-u-vh class to allow the element
 * to be focusable when navigated to via the keyboard:
 * http://bit.ly/1sfefwH
 */
.gs-u-vh--focusable:active,
.gs-u-vh--focusable:focus {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto; }

/**
 * Hide visually and from screen readers, but maintain layout
 */
.gs-u-invisible {
  visibility: hidden; }

/*------------------------------------*\
  # COLOUR PALETTE
\*------------------------------------*/
/**
 * The CAP colour palette is comprised of 2 parts.
 *
 * 1. Colour definitions. These variables give our HEX codes a human readable
 * name, but ARE NOT designed to be implemented directly within components. UX
 * will supply these names for us (they're usually types of bird).
 *
 * 2. Colour implementations. These variables DESCRIBE a colour definition in
 * a functional context. They are designed to be used within components.
 * Several implementations can (and should) share the same definition.
 *
 * NOTE: UX can help us with naming new colour implementations. If we can't
 * think of a suitable implementation name, ask WHY the colour has been chosen
 * for this specific purpose.
 *
 * EXAMPLE IMPLEMENTATION
 *
 * $brand-base: $_shiny-cowbird;
 * $brand-accent: $_raven;
 * $primary-title: $_raven;
 * $sub-title: $_macaw;
 * $modal-background: $_midnight-skylark;
 *
 *
 * BRANDING SWITCH
 *
 * In order to transition new branding as quickly as possiable, use switch($old, $new) to
 * define the current and new colours for a single implementation.
 */
/*------------------------------------*\
 BRANDING SWITCH
\*------------------------------------*/
/*------------------------------------*\
# DEPRECATED - DO NOT ADD TO THIS LIST!
\*------------------------------------*/
/*------------------------------------*\
1. COLOUR DEFINITIONS (IPLAYER RADIO)
\*------------------------------------*/
/*------------------------------------*\
2. COLOUR DEFINITIONS (FUTURE OF RADIO)
\*------------------------------------*/
/*------------------------------------*\
3. COLOUR IMPLEMENTATIONS
\*------------------------------------*/
/* FALLBACKS */
/* ICONS */
/* LINKS */
/* LINKS with ICONS */
/* TITLES */
/* CAROUSEL */
/* UPSELL */
/* SUBNAV */
/* SYNOPSIS */
/* AUTOPLAY */
/* CONTENT NOTICE */
/* TEAR */
/* TRACKS */
/* SELECTABLE ICON BUTTON */
/* NETWORK ITEM */
/* BASIC CARD */
/* COLLECTION CARD */
/* CARD METADATA */
/* LISTENING ITEM */
/* BROADCAST */
/* ICON EXPLAINER */
/* SCHEDULE */
/* LABELS */
/* PADDLE ICON */
/* PROGRESS BARS */
/* TOGGLE */
/* ILLUSTRATION */
/* BANNER */
/* RESPONSIVE IMAGE */
/* STATES */
/* MISC */
/*------------------------------------*\
  # FAUX WRAP
\*------------------------------------*/
/**
 * Breakpoint calcuations required for faux wrap and components that need to
 * work outside the standard grid ONLY.
 *
 * $gel-breakpoints is from bbc/gel-sass-tools
 *
 * NOTE: This proabably isn't what you need.
 *
 *   ____________ viewport @ xl _____________
 *  |                                        |
 *  |     <---- gel-breakpoint (1) ---->     |
 *  |     |   ______ gel-wrap ______   |     |
 *  |     |  |                      |  |     |
 *  |     |  |<-- (2) -->           |  |     |
 *  |     |  |                      |  |     |
 *  |<-(3)-->|                      |  |     |
 *  |     |  |                      |  |     |
 *  |_____|____________________________|_____|
 *
 * 1. GEL breakpoints as their max width values e.g 1008, 1280.
 * 2. Half a max width breakpoint, minus standard margin e.g 504px - 16px.
 * 3. Half (50%) the viewport width minus (2) width.
 */
/* [1] */
/* [2] */
/* [3] */
/*------------------------------------*\
  # ICONOGRAPHY
\*------------------------------------*/
/**
 * Non-interactive (stylistic) display icons (SVGs) will have 
 * a fixed width value at different breakpoints. This value will be 
 * applied to the svg's bounding box by passing it in as a class into the Icon component.
 * 
 * s-bp - small breakpoint (400px)
 * m-bp - medium breakpoint (600px)
 * l-bp - large breakpoint (900px)
 **/
.cap-u-circle {
  border-radius: 50%; }

.cap-u-rotate-270 {
  transform: rotate(270deg) !important;
  -webkit-transform: rotate(270.1deg) !important; }

.cap-u-reith-light {
  font-weight: 300 !important; }

.cap-u-antialiased {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important; }

.cap-u-truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; }

@media (min-width: 56.25em) {
  .cap-u-truncate--expand\@l {
    white-space: normal !important; } }

.cap-u-font-weight-500 {
  font-weight: 500 !important; }

.cap-u-flex-nowrap {
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important; }

.cap-u-flex-grow {
  flex-grow: 1 !important;
  -webkit-flex-grow: 1 !important; }

.cap-u-flex-column {
  flex-direction: column !important;
  -webkit-flex-direction: column !important; }

.cap-u-flex-middle {
  align-items: center !important;
  -webkit-align-items: center !important;
  justify-content: center !important;
  -webkit-justify-content: center !important; }

/*------------------------------------*\
    # DASH
\*------------------------------------*/
/*
* The `dash` object adds a dash (small line) at the beginning of the element.
* It creates a "dash" using the `::before` pseudo element.
*
* EXAMPLE IMPLEMENTATION
* <div className="cap-o-dash"></div>
*/
.cap-o-dash::before {
  border-top: 2px solid #f54997;
  content: '';
  display: block;
  width: 16px; }

/*------------------------------------*\
    # ISLAND
\*------------------------------------*/
/**
 * The island will isolate items to be positioned absolutely
 * and can be positioned to any corner using the modifiers.
 *
 *  <div class="cap-o-island">
 *      <div class="cap-o-island__point">
 *          [this is absolute positioned to the top left]
 *      </div>
 *  </div>
 *
 */
.cap-o-island {
  position: relative; }

.cap-o-island__point {
  position: absolute; }

.cap-o-island__point--br {
  bottom: 0;
  right: 0; }

.cap-o-island__point--tl {
  left: 0;
  top: 0; }

.cap-o-island__point--tr {
  top: 0;
  right: 0; }

.cap-o-island__point--center {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0; }

/*------------------------------------*\
    # LINK -- Contrast scope
\*------------------------------------*/
.cap-s-contrast .cap-o-link.cap-o-link__text,
.cap-s-contrast .cap-o-link .cap-o-link__text {
  color: #fff; }

.cap-s-contrast .cap-o-link:visited.cap-o-link__text,
.cap-s-contrast .cap-o-link:visited .cap-o-link__text {
  color: #fff; }

.cap-s-contrast .cap-o-link:hover.cap-o-link__text,
.cap-s-contrast .cap-o-link:hover .cap-o-link__text, .cap-s-contrast .cap-o-link:focus.cap-o-link__text,
.cap-s-contrast .cap-o-link:focus .cap-o-link__text {
  color: #f54997; }

.cap-s-contrast .cap-o-link.cap-o-link--secondary:hover.cap-o-link__text,
.cap-s-contrast .cap-o-link.cap-o-link--secondary:hover .cap-o-link__text, .cap-s-contrast .cap-o-link.cap-o-link--secondary:focus.cap-o-link__text,
.cap-s-contrast .cap-o-link.cap-o-link--secondary:focus .cap-o-link__text {
  color: #c0bebe; }

/*------------------------------------*\
    # LINK
\*------------------------------------*/
/*
All links should use both classes below. How you use them depends
on the use case as described below.

[1] 'cap-o-link'
Used on all links to remove the text underline decoration.

[2] 'cap-o-link__text'
Applied to text within a link to apply color and transitions.

When using a single link item, apply both styles to the same element. E.g.

<a class="cap-o-link cap-o-link__text">
    Index Also title
</a>

When using a block link item, apply .cap-o-link to the anchor tag,
and the .cap-o-link__text to text items within the link block. E.g.

<a class="cap-o-link">
    <h3 class="cap-o-link__text">
        Heading
    </h3>
</a>

- THEMING

A link should sit inside a scope class of either 'cap-s-contrast' if necessary e.g.
<div class="cap-s-contrast">
    <a class="cap-o-link">
        <h3 class="cap-o-link__text">
            Heading
        </h3>
    </a>
</div>

It changes the text color, as well as the text color for the hover, focus and visited states.
*/
/*
    - Primary link
    A primary link is used to signify an action that DOES
    affect or control "play". For example, listen to a programme.
*/
/*[1]*/
.cap-o-link {
  text-decoration: none; }

.cap-o-link.cap-o-link__text,
.cap-o-link .cap-o-link__text {
  color: #fff; }

.cap-o-link:visited.cap-o-link__text,
.cap-o-link:visited .cap-o-link__text {
  color: #fff; }

.cap-o-link:hover.cap-o-link__text,
.cap-o-link:hover .cap-o-link__text, .cap-o-link:focus.cap-o-link__text,
.cap-o-link:focus .cap-o-link__text {
  color: #f54997; }

/*[2]*/
.cap-o-link__text {
  -moz-transition-property: color 0.35s ease;
  -o-transition-property: color 0.35s ease;
  -webkit-transition-property: color 0.35s ease;
  transition: color 0.35s ease; }

.cap-o-link:hover.cap-o-link__text,
.cap-o-link:hover .cap-o-link__text,
.cap-o-link:focus.cap-o-link__text,
.cap-o-link:focus .cap-o-link__text {
  text-decoration: none; }

/*
    - Secondary link
    A secondary link is used to signify an action that DOESN'T
    affect or control "play". For example, an external link.

    TODO: Decide on whether there should be a difference between scopes on secondary links
*/
.cap-o-link--secondary:hover.cap-o-link__text,
.cap-o-link--secondary:hover .cap-o-link__text, .cap-o-link--secondary:focus.cap-o-link__text,
.cap-o-link--secondary:focus .cap-o-link__text {
  color: #c0bebe; }

/*------------------------------------*\
    # BUTTON -- Contrast scope
\*------------------------------------*/
.cap-s-contrast .cap-o-button__text {
  color: #fff; }

.cap-s-contrast .cap-o-button:visited.cap-o-button__text, .cap-s-contrast
.cap-o-button:visited .cap-o-button__text {
  color: #fff; }

/*------------------------------------*\
    # BUTTON
\*------------------------------------*/
/*
* All buttons should use both classes below.
*
* 'cap-o-button'
* Used on all buttons to normalise styles.
*
* 'cap-o-button__text'
* Applied to text within a button to apply color and transitions.
*
* When using a text only button, apply both styles to the same element. E.g.
*
* <button class="cap-o-button cap-o-button__text">
*   Index Also title
* </button>
*
* When using a button with split text, apply .cap-o-button to the button tag,
* and the .cap-o-button__text to text items within the button block. E.g.
*
* <button class="cap-o-button">
*    <h3 class="cap-o-button__text">
*        Heading
*    </h3>
* </button>
*
* [1] Normalise styles
* [2] Prevent user agent movement on press (SOUNDS-2403)
*/
/* [1] */
.cap-o-button {
  background-color: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  /* [2] */ }

.cap-o-button > * {
  position: relative; }

.cap-o-button.cap-o-hover-line--persistent .cap-o-button__text {
  color: #f54997; }

.cap-o-button--center {
  text-align: center; }

.cap-o-button__text {
  -moz-transition-property: color 0.35s ease;
  -o-transition-property: color 0.35s ease;
  -webkit-transition-property: color 0.35s ease;
  transition: color 0.35s ease;
  color: #fff; }

/*
  cap-o-button active and hover states
  Built to support same-level nesting as per
  the first use case
*/
.cap-o-button:visited.cap-o-button__text,
.cap-o-button:visited .cap-o-button__text {
  color: #fff; }

.cap-o-button:hover.cap-o-button__text,
.cap-o-button:hover .cap-o-button__text,
.cap-o-button:focus.cap-o-button__text,
.cap-o-button:focus .cap-o-button__text {
  color: #f54997;
  text-decoration: none; }

/*------------------------------------*    # PIPED
|*------------------------------------*/
/*
* The `piped` pattern adds a pipe (small line) in between list items
* (e.g. item | item ) with the appropriate spacing.
* It will not add a pipe or spacing to the last item / a single item.
*
* Note: We are using a last-child/border right pattern as pipes should always
* couple with content to their left when wrapping.
*
* EXAMPLE IMPLEMENTATION
* <ul className="cap-o-piped">
*   <li className="gs-u-display-inline">text</li>
*   <li className="gs-u-display-inline">text</li>
* </ul>
*/
.cap-o-piped li {
  border-right: 1px solid #fff;
  padding-right: 12px;
  margin-right: 12px;
  margin-left: 0; }

@media (min-width: 56.25em) {
  .cap-o-piped li {
    margin-left: 12px;
    margin-right: 0; } }

.cap-o-piped li:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0; }

.cap-o-piped li:first-child {
  margin-left: 0; }

/*------------------------------------*\
    # RESPONSIVE IMAGE
\*------------------------------------*/
/** From Grandstand: https://github.com/bbc/grandstand/blob/master/lib/objects/_responsive-image.scss
 *
 * We are not using the Grandstand supplied responsive image as we have a specific placeholder
 * image that we need to use and Grandstand does not offer this extensibility.
 * Additionally, we have some modifiers which are not available in Grandstand.
 *
**/
/**
 * The responsive image pattern automatically reserves the space
 * needed for an image to be inserted, additionally you can add some modifiers
 * or an image overlay if needed.
 *
    <div class="cap-o-responsive-image [ cap-o-responsive-image--1by1 | cap-o-responsive-image--16by9 ]">
        <img src="..." class="cap-o-responsive-image__img" />
        <div class="cap-o-responsive-image__overlay">...</div>
    </div>
 *
 * 1. Setting the height to zero collapses the div so we don't
 *    need to absolutly position the image
 * 2. Stop images 1px difference between the reserved space
 *    and the actual image from showing
 */
.cap-o-responsive-image {
  position: relative;
  height: 0;
  /* [1] */
  overflow: hidden;
  /* [2] */
  background-color: #2E3542;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjcgNzU2Ij4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTM4My42MTQgMTcxLjQwM3YtMzUuMmMxMzUuODggMCAyNDYuNDEyIDExMC41MzIgMjQ2LjQxMiAyNDYuNDFoLTM1LjIwMmMwLTExNi40NjQtOTQuNzQ1LTIxMS4yMS0yMTEuMjEtMjExLjIxem0xNDAuODA3IDIxMS4yMWMwLTc3LjYzNi02My4xNy0xNDAuODA2LTE0MC44MDYtMTQwLjgwNnYtMzUuMjAyYzk3LjA1IDAgMTc2LjAxIDc4Ljk1OCAxNzYuMDEgMTc2LjAxSDUyNC40MnpNMzgzLjYxNSA0ODguMjJjLTU4LjMzIDAtMTA1LjYwNS00Ny4yNzctMTA1LjYwNS0xMDUuNjA2IDAtNTguMzMgNDcuMjc1LTEwNS42MDUgMTA1LjYwNC0xMDUuNjA1IDU4LjMzIDAgMTA1LjYwNSA0Ny4yNzUgMTA1LjYwNSAxMDUuNjA0IDAgNTguMzMtNDcuMjc3IDEwNS42MDUtMTA1LjYwNiAxMDUuNjA1em0wLTM4Ny4yMkMyMjguMDc0IDEwMSAxMDIgMjI3LjA3NSAxMDIgMzgyLjYxNGMwIDE1NS41NCAxMjYuMDc1IDI4MS42MTQgMjgxLjYxNCAyODEuNjE0IDE1NS41NCAwIDI4MS42MTQtMTI2LjA3NSAyODEuNjE0LTI4MS42MTRDNjY1LjIyOCAyMjcuMDc0IDUzOS4xNTMgMTAxIDM4My42MTQgMTAxeiIgZmlsbD0iI0ZGRiIgb3BhY2l0eT0iLjIiLz4gICAgICAgICAgICA8L3N2Zz4=");
  background-repeat: no-repeat;
  /**
     * 1. Force the image to sit on top of the placeholder
     * 2. Force the image to fill the available space
     *
     * The exact combination of [1] and [2] is needed to stop the
     * image from being 1px too short, the root cause of which is
     * down to the browser's rendering of sub-pixels
     */ }

.cap-o-responsive-image img {
  position: absolute;
  /* [1] */
  width: 100%;
  /* [2] */
  height: 100%;
  /* [2] */ }

/**
 * A full overlay that covers the image,
 * mostly used for hover effects
 */
.cap-o-responsive-image__overlay {
  height: 100%;
  position: absolute;
  width: 100%;
  -moz-transition-property: background 0.35s ease;
  -o-transition-property: background 0.35s ease;
  -webkit-transition-property: background 0.35s ease;
  transition: background 0.35s ease; }

/**
 * A SVG that sits within the overlay above
 */
.cap-o-responsive-image__svg {
  -moz-transition-property: opacity 0.35s ease;
  -o-transition-property: opacity 0.35s ease;
  -webkit-transition-property: opacity 0.35s ease;
  transition: opacity 0.35s ease;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0; }

/**
 * Removes the default placeholder styles
 * for background-color and background-image
 */
.cap-o-responsive-image--no-placeholder {
  background-color: transparent;
  background-image: none; }

/**
* Image shape modifiers
*/
.cap-o-responsive-image--round .cap-o-responsive-image__img,
.cap-o-responsive-image--round .cap-o-responsive-image__overlay {
  border-radius: 50%; }

/**
 * Aspect radio modifiers
 */
.cap-o-responsive-image--1by1 {
  padding-bottom: 100%; }

.cap-o-responsive-image--16by9 {
  padding-bottom: 56.25%; }

/*------------------------------------*    # SCROLLABLE
|*------------------------------------*/
/*
* The `scrollable` pattern allows you to make a slice horizontally scrollable.
* The <li> MUST carry a CSS width property or it will collapse.
*
* EXAMPLE IMPLEMENTATION
*   <div className="cap-o-scrollable">
*       <ul className="cap-o-scrollable__list">
*           <li>Item</li>
*/
.cap-o-scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }

.cap-o-scrollable__list {
  white-space: nowrap; }

.cap-o-scrollable__list li {
  display: inline-block;
  white-space: normal; }

/*------------------------------------*\
    # UNDERLINE
\*------------------------------------*/
/*
* The `underline` object adds a small line after (underneath) the element.
* It is typically used to assist with orientation
*
* EXAMPLE IMPLEMENTATION
* <li className="cap-o-underline"></li>
* 
* 1. Underlines to always be centered
* 2. Underlines to always be spaced away from the parent
* 3. Underlines to be exactly 24px in width 
*
*/
.cap-o-underline::after {
  border-bottom: 2px solid #f54997;
  content: '';
  display: block;
  margin-left: auto;
  /* [1] */
  margin-right: auto;
  /* [1] */
  padding-top: 4px;
  /* [2] */
  width: 24px;
  /* [3] */ }

/*------------------------------------*    # FAUX WRAP / BLEED
|*------------------------------------*/
/*
* Elements outside of a `gel-wrap` container are clipped. In some scenarios we
* need to give the appearance that elements are inside the container, whilst
* also allowing them to bleed out of it when necessary (e.g in a carousel).
*
* The `faux wrap` pattern uses dynamic left and right padding values instead of
* a centrally positioned / fixed width container approach. This gives the
* appearance of `gel-wrap` but without max-width clipping constraints.
*
* NOTE: The `faux-wrap` object uses calc() and as such will not work fully in
* some older browsers. It cannot be used within a `gel-wrap` element or other
* padded containers (i.e the object's parent must have 100% viewport width).
*
* EXAMPLE IMPLEMENTATION
*   <div>
*       <ul>
*           <li class="cap-o-faux-wrap">First Item</li>
*           <li class="cap-o-faux-wrap-end">Last Item</li>
*
* `cap-o-faux-wrap` should be applied to the first element in the faux-wrap.
* `cap-o-faux-wrap-end` should be applied to the right most sibling element.
*
*/
.cap-o-faux-wrap {
  padding-left: 8px; }

@media (min-width: 25em) {
  .cap-o-faux-wrap {
    padding-left: 16px; } }

@media (min-width: 63em) {
  .cap-o-faux-wrap {
    padding-left: calc(50% - 488px); } }

.cap-o-faux-wrap-end {
  padding-right: 8px; }

@media (min-width: 25em) {
  .cap-o-faux-wrap-end {
    padding-right: 16px; } }

@media (min-width: 63em) {
  .cap-o-faux-wrap-end {
    padding-right: calc(50% - 488px); } }

@media (min-width: 80em) {
  .b-pw-1280 .cap-o-faux-wrap {
    padding-left: calc(50% - 624px); }
  .b-pw-1280 .cap-o-faux-wrap-end {
    padding-right: calc(50% - 624px); } }

/*------------------------------------*   
 # HOVER LINE
|*------------------------------------*/
/*
    Cretes a line that glides in and out on hover.

* EXAMPLE IMPLEMENTATION
    <button className="cap-o-hover-line">
        <div className="cap-o-hover-line__element" />
    </button>

    [1] 'cap-o-hover-line'
    Used on the hoverable region (e.g button or anchor). 

    [2] 'cap-o-hover-line__element'
    Used on the div you wish to act as the hover line.

    [3] 'cap-o-hover-line--persistent'
    Apply modifier for line to remain static 
    (e.g to indicate open element of a tear).
*/
.cap-o-hover-line {
  /* [1] */ }

.cap-o-hover-line__element {
  /* [2] */
  -moz-transition-property: width 0.35s ease;
  -o-transition-property: width 0.35s ease;
  -webkit-transition-property: width 0.35s ease;
  transition: width 0.35s ease;
  background-color: transparent;
  height: 2px;
  width: 1px;
  /* if an element's :hover rule animates child element width from 0, IOS safari will require 2 taps to click */ }

.cap-o-hover-line:hover, .cap-o-hover-line:focus, .cap-o-hover-line--persistent {
  /* [3] */ }

.cap-o-hover-line:hover .cap-o-hover-line__element, .cap-o-hover-line:focus .cap-o-hover-line__element, .cap-o-hover-line--persistent .cap-o-hover-line__element {
  background-color: #f54997;
  width: 100%; }

.cap-c-blank {
  background: #2f2e2e; }

.cap-c-blank--fixed-height {
  height: 12rem; }

.cap-c-brand {
  border-radius: 50%; }

.cap-c-carousel-item {
  will-change: transform; }

@media (min-width: 63em) {
  .cap-c-carousel-item {
    max-width: 160px; } }

@media (min-width: 80em) {
  .cap-c-carousel-item {
    max-width: 176px; } }

.cap-c-display-icon {
  background-color: rgba(255, 255, 255, 0.15); }

.cap-c-display-icon__svg {
  height: 16px;
  width: 16px; }

@media (min-width: 37.5em) {
  .cap-c-display-icon__svg {
    height: 24px;
    width: 24px; } }

@media (min-width: 56.25em) {
  .cap-c-display-icon__svg {
    height: 40px;
    width: 40px; } }

@keyframes equalizer-animation-active {
  0% {
    opacity: .35;
    top: 0; }
  100% {
    opacity: 1;
    top: .75rem; } }

@keyframes equalizer-animation-inactive {
  0% {
    opacity: .35;
    top: .1rem; }
  100% {
    opacity: 1;
    top: .7rem; } }

.cap-c-equalizer {
  height: .75rem;
  overflow: hidden;
  position: relative;
  width: 1.25rem; }

.cap-c-equalizer__bar {
  animation-fill-mode: forwards;
  animation-name: equalizer-animation-inactive;
  background-color: #bbbbbb;
  height: .75rem;
  position: absolute;
  width: .125rem; }

.cap-c-equalizer__bar:nth-child(1) {
  animation-duration: 428ms;
  left: .0625rem; }

.cap-c-equalizer__bar:nth-child(2) {
  animation-duration: 433ms;
  left: .3125rem; }

.cap-c-equalizer__bar:nth-child(3) {
  animation-duration: 407ms;
  left: .5625rem; }

.cap-c-equalizer__bar:nth-child(4) {
  animation-duration: 458ms;
  left: .8125rem; }

.cap-c-equalizer__bar:nth-child(5) {
  animation-duration: .4s;
  left: 1.063rem; }

.cap-c-equalizer--active .cap-c-equalizer__bar {
  animation-delay: -.8s;
  animation-direction: alternate;
  animation-fill-mode: initial;
  animation-iteration-count: infinite;
  animation-name: equalizer-animation-active;
  animation-play-state: initial;
  animation-timing-function: linear; }

.cap-c-fallback {
  color: #fff; }

.cap-c-fallback__text {
  color: #fff; }

.cap-c-faux-button {
  cursor: pointer; }

.cap-s-contrast .cap-c-icon > path {
  fill: #fff; }

.cap-s-contrast .cap-c-icon--primary path {
  fill: #fff; }

.cap-s-contrast .cap-c-icon--overlay path {
  fill: #fff; }

.cap-c-icon > path {
  fill: #fff; }

.cap-c-icon--primary > path {
  fill: #fff; }

.cap-c-icon--overlay > path {
  fill: #fff; }

.cap-c-label {
  background-color: #fff;
  color: #000; }

.cap-c-label--active {
  background-color: #f54997;
  color: #fff; }

.cap-s-contrast .cap-c-paddle__button {
  background-color: #fff; }

.cap-s-contrast .cap-c-paddle__button:hover .cap-c-icon > path {
  fill: #000; }

.cap-s-contrast .cap-c-paddle__button:hover.cap-c-paddle--disabled .cap-c-icon > path {
  fill: #000; }

.cap-s-contrast .cap-c-paddle__button.cap-c-paddle--disabled {
  background-color: rgba(255, 255, 255, 0.6); }

.cap-s-contrast .cap-c-paddle__button .cap-c-icon > path {
  fill: #000; }

.cap-c-paddle__button {
  background-color: #fff;
  border: 0; }

.cap-c-paddle__button:hover {
  background-color: #fff; }

.cap-c-paddle__button.cap-c-paddle--disabled {
  background-color: rgba(255, 255, 255, 0.6); }

.cap-c-paddle__button .cap-c-icon > path {
  fill: #000; }

.cap-c-page-title {
  color: #fff; }

.cap-c-progressbar__active {
  background-color: #f54997;
  stroke: #f54997; }

.cap-c-progressbar__inactive {
  background-color: rgba(60, 60, 60, 0.7);
  stroke: rgba(60, 60, 60, 0.7); }

.cap-c-scroll-indicator__track {
  background-color: #3c3c3c;
  height: 4px;
  overflow: hidden; }

.cap-c-scroll-indicator__position {
  background-color: #fff;
  height: 4px; }

.cap-c-loading-spinner {
  border-bottom: 8px solid transparent;
  border-left: 8px solid #f54997;
  border-radius: 100%;
  border-right: 8px solid #f54997;
  border-top: 8px solid #f54997;
  border-width: 8px; }

.cap-c-basic {
  will-change: transform; }

.cap-c-basic__label {
  color: #f54997; }

.cap-c-basic--hover-enabled .cap-c-basic__link:active .cap-o-responsive-image__svg, .cap-c-basic--hover-enabled .cap-c-basic__link:focus .cap-o-responsive-image__svg, .cap-c-basic--hover-enabled .cap-c-basic__link:hover .cap-o-responsive-image__svg {
  opacity: 1; }

.cap-c-basic--hover-enabled .cap-c-basic__link:active .cap-o-responsive-image__overlay, .cap-c-basic--hover-enabled .cap-c-basic__link:focus .cap-o-responsive-image__overlay, .cap-c-basic--hover-enabled .cap-c-basic__link:hover .cap-o-responsive-image__overlay {
  background: rgba(0, 0, 0, 0.85); }

.cap-c-basic--is-playing .cap-o-responsive-image__svg {
  opacity: 0; }

.cap-c-basic--is-playing .cap-o-responsive-image__overlay {
  background: rgba(0, 0, 0, 0.85); }

.cap-s-contrast .cap-c-metadata__primary {
  color: #fff; }

.cap-s-contrast .cap-c-metadata__secondary, .cap-s-contrast .cap-c-metadata__tertiary {
  color: #fff; }

.cap-s-contrast .cap-c-metadata__duration {
  color: #fff; }

.cap-c-metadata {
  color: #fff; }

.cap-c-metadata__secondary, .cap-c-metadata__tertiary {
  color: #fff; }

.cap-c-metadata__duration {
  color: #fff; }

.cap-c-carousel__inner {
  overflow-y: hidden; }

.cap-c-carousel__paddles {
  position: absolute;
  right: 0;
  z-index: 2; }

@media (min-width: 63em) {
  .cap-c-carousel__blind {
    height: 100%;
    width: calc(50% - 488px);
    z-index: 1; } }

@media (min-width: 63em) and (min-width: 80em) {
  .cap-c-carousel__blind {
    width: calc(50% - 624px); } }

@media (min-width: 63em) {
  .cap-c-carousel__blind--left {
    background: linear-gradient(to right, #262525, rgba(38, 37, 37, 0.7)); }
  .cap-c-carousel__blind--right {
    background: linear-gradient(to left, #262525, rgba(38, 37, 37, 0.7)); }
  .cap-c-carousel__blind--tear-left {
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0.7)); }
  .cap-c-carousel__blind--tear-right {
    background: linear-gradient(to left, #000, rgba(0, 0, 0, 0.7)); } }

/*------------------------------------*\
    # Carousel Trumps
\*------------------------------------*/
/*

[1] Chrome / iOS bug
There is a bug in Chrome & iOS where the paddles and blind will
hide behind the scrollable content in the carousel.

This is due to the browser modifying the 3d dimension when scrolling.
Setting elements to not translate in 3D space, fixes the bug.

*/
.cap-c-carousel {
  /* [1] */ }

.cap-c-carousel__blind, .cap-c-carousel__paddles {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0); }

.cap-c-category-card__link:active .cap-o-responsive-image__svg, .cap-c-category-card__link:focus .cap-o-responsive-image__svg, .cap-c-category-card__link:hover .cap-o-responsive-image__svg {
  opacity: 0; }

.cap-c-category-card__link:active .cap-o-responsive-image__overlay, .cap-c-category-card__link:focus .cap-o-responsive-image__overlay, .cap-c-category-card__link:hover .cap-o-responsive-image__overlay {
  background: rgba(0, 0, 0, 0.85); }

.cap-c-category-card__title {
  color: #fff; }

.cap-c-category-card__overlay {
  height: 100%; }

.cap-c-collection-card__button:active .cap-o-responsive-image__svg, .cap-c-collection-card__button:focus .cap-o-responsive-image__svg, .cap-c-collection-card__button:hover .cap-o-responsive-image__svg, .cap-c-collection-card__link:active .cap-o-responsive-image__svg, .cap-c-collection-card__link:focus .cap-o-responsive-image__svg, .cap-c-collection-card__link:hover .cap-o-responsive-image__svg {
  opacity: 0; }

.cap-c-collection-card__button:active .cap-o-responsive-image__overlay, .cap-c-collection-card__button:focus .cap-o-responsive-image__overlay, .cap-c-collection-card__button:hover .cap-o-responsive-image__overlay, .cap-c-collection-card__link:active .cap-o-responsive-image__overlay, .cap-c-collection-card__link:focus .cap-o-responsive-image__overlay, .cap-c-collection-card__link:hover .cap-o-responsive-image__overlay {
  background: rgba(0, 0, 0, 0.85); }

.cap-c-collection-card__name {
  color: #fff; }

.cap-c-collection-card__description {
  color: #fff; }

.cap-c-collection-card__overlay {
  height: 100%; }

.cap-c-container-card__synopsis {
  color: #c0bebe; }

.cap-c-content-notice {
  align-items: center; }

.cap-c-content-notice__message {
  color: #fff; }

.cap-c-content-notice__container {
  flex-grow: 1; }

.cap-c-content-notice__icon {
  flex-shrink: 0; }

.cap-c-countdown__icon {
  display: none; }

.cap-c-countdown:hover .cap-c-countdown__icon {
  display: block; }

.cap-c-countdown:hover .cap-c-countdown__time {
  display: none; }

.cap-c-countdown__status {
  padding-top: 100%; }

@media (min-width: 56.25em) {
  .cap-c-icon-explainer__item {
    text-align: center; } }

.cap-c-icon-explainer__text {
  color: #fff; }

.cap-c-icon-explainer__cta {
  background-color: #f54997;
  color: #fff; }

@media (min-width: 56.25em) {
  .cap-c-illustration-explainer {
    -webkit-flex-direction: column;
    align-items: center;
    flex-direction: column; } }

@media (max-width: 56.24em) {
  .cap-c-illustration-explainer__explainer {
    align-items: center; } }

@media (min-width: 56.25em) {
  .cap-c-illustration-explainer__explainer {
    text-align: center; } }

.cap-c-illustration-explainer__illustration {
  max-width: 152px; }

.cap-c-illustration-explainer__primary-title {
  color: #fff; }

.cap-c-illustration-explainer__secondary-title {
  color: #fff; }

.cap-c-listening-item__remaining {
  background: #f54997; }

.cap-c-listening-item__time {
  color: #ffffff; }

.cap-c-listening-item:hover .cap-o-responsive-image__svg {
  opacity: 1; }

.cap-c-listening-item:hover .cap-o-responsive-image__overlay {
  background: rgba(0, 0, 0, 0.85); }

.cap-c-module-title__text {
  color: #fff; }

.cap-c-module-title__pipe {
  border-left: 4px solid #696969; }

@media (min-width: 37.5em) {
  .cap-c-module-title__action {
    text-align: right; } }

.cap-c-network-item__link:active .cap-o-responsive-image__svg, .cap-c-network-item__link:focus .cap-o-responsive-image__svg, .cap-c-network-item__link:hover .cap-o-responsive-image__svg {
  opacity: 1; }

.cap-c-network-item__link:active .cap-o-responsive-image__overlay, .cap-c-network-item__link:focus .cap-o-responsive-image__overlay, .cap-c-network-item__link:hover .cap-o-responsive-image__overlay {
  background: rgba(0, 0, 0, 0.85); }

.cap-c-network-item__image {
  padding: 6%; }

.cap-c-network-item__meta {
  color: #fff;
  position: relative; }

@media (min-width: 25em) {
  .cap-c-network-item__meta--with-label {
    margin-top: -16px; } }

.cap-c-broadcast {
  height: inherit; }

.cap-c-broadcast--next {
  border-left: 1px solid rgba(255, 255, 255, 0.6); }

.cap-c-broadcast--onair {
  background: rgba(0, 0, 0, 0.2); }

@media (min-width: 15em) and (max-width: 37.49em) {
  .cap-c-broadcast--onair {
    min-width: 80%; } }

@media (min-width: 37.5em) and (max-width: 56.24em) {
  .cap-c-broadcast--onair {
    min-width: 60%; } }

.cap-c-broadcast__image {
  flex: none;
  height: 44px;
  width: 44px; }

.cap-c-broadcast__meta {
  color: #fff; }

.cap-c-broadcast__meta-next {
  color: #fff; }

.cap-c-broadcast__meta-status {
  color: #fff; }

.cap-c-broadcast__meta-time {
  color: #fff; }

.cap-s-contrast .cap-c-selectable-icon-button {
  background-color: transparent;
  border-color: #fff;
  color: #fff; }

.cap-s-contrast .cap-c-selectable-icon-button--selected {
  background-color: #f54997;
  color: #fff; }

.cap-c-selectable-icon-button {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  height: 40px;
  width: 120px; }

.cap-c-selectable-icon-button--selected {
  background-color: #f54997;
  color: #ffffff;
  cursor: pointer; }

.cap-c-synopsis {
  color: #c0bebe;
  white-space: pre-line; }

.cap-c-toggle {
  background-color: #f54997;
  border-radius: 12px;
  height: 24px;
  width: 40px; }

.cap-c-toggle--unchecked {
  background-color: #707070; }

.cap-c-toggle__circle {
  background-color: #fff;
  height: 16px;
  width: 16px; }

.cap-c-toggle__icon > path {
  fill: #f54997; }

.cap-c-toggle__label {
  color: #fff; }

.cap-c-track {
  background-color: #000; }

.cap-c-track .cap-c-rsimage {
  background-color: inherit; }

.cap-c-track__label-not-playing {
  color: #bbbbbb; }

.cap-c-track__label-is-playing {
  color: #bbbbbb; }

.cap-c-track__artist {
  color: #fff; }

.cap-c-track__title {
  color: #fff; }

.cap-c-banner {
  background-color: #121212; }

.cap-c-banner__text {
  color: #ffffff; }

.cap-c-banner--fixed-bottom {
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 4; }

.cap-c-banner__dismiss-button {
  height: 100%;
  margin-right: -8px; }

.cap-c-grid {
  position: relative; }

@media (min-width: 56.25em) {
  .cap-c-grid__fallback {
    position: absolute; } }

.cap-c-grid__item + .cap-c-grid__item {
  margin-top: 24px; }

.cap-c-grid__item + .cap-c-grid__item.cap-c-grid__item--categorycard {
  margin-top: 8px; }

@media (min-width: 37.5em) {
  .cap-c-grid__item + .cap-c-grid__item.cap-c-grid__item--categorycard {
    margin-top: 16px; } }

@media (min-width: 15em) {
  .cap-c-grid__item:first-child + .cap-c-grid__item {
    margin-top: 0; } }

@media (min-width: 37.5em) {
  .cap-c-grid__item:first-child + .cap-c-grid__item + .cap-c-grid__item {
    margin-top: 0; } }

@media (min-width: 56.25em) {
  .cap-c-grid__item:first-child + .cap-c-grid__item + .cap-c-grid__item + .cap-c-grid__item,
  .cap-c-grid__item:first-child + .cap-c-grid__item + .cap-c-grid__item + .cap-c-grid__item + .cap-c-grid__item,
  .cap-c-grid__item:first-child + .cap-c-grid__item + .cap-c-grid__item + .cap-c-grid__item + .cap-c-grid__item + .cap-c-grid__item {
    margin-top: 0; } }

.cap-c-grid-view {
  position: relative; }

.cap-c-grid-view__blank {
  background: rgba(255, 255, 255, 0.04); }

.cap-c-grid-view__blank--fixed-height {
  height: 12rem; }

@media (min-width: 56.25em) {
  .cap-c-grid-view__fallback {
    position: absolute; } }

.cap-c-grid-view__fallback-title {
  color: #fff; }

.cap-c-grid-view__fallback-text {
  color: #fff; }

.cap-c-grid-view__item + .cap-c-grid-view__item {
  margin-top: 24px; }

.cap-c-grid-view__item:first-child + .cap-c-grid-view__item {
  margin-top: 0; }

@media (min-width: 37.5em) {
  .cap-c-grid-view__item:first-child + .cap-c-grid-view__item + .cap-c-grid-view__item {
    margin-top: 0; } }

@media (min-width: 56.25em) {
  .cap-c-grid-view__item:first-child + .cap-c-grid-view__item + .cap-c-grid-view__item + .cap-c-grid-view__item,
  .cap-c-grid-view__item:first-child + .cap-c-grid-view__item + .cap-c-grid-view__item + .cap-c-grid-view__item + .cap-c-grid-view__item,
  .cap-c-grid-view__item:first-child + .cap-c-grid-view__item + .cap-c-grid-view__item + .cap-c-grid-view__item + .cap-c-grid-view__item + .cap-c-grid-view__item {
    margin-top: 0; } }

.cap-c-grid-view__item--large + .cap-c-grid-view__item--large {
  margin-top: 32px; }

.cap-c-grid-view__item--large:first-child + .cap-c-grid-view__item--large {
  margin-top: 0; }

@media (min-width: 56.25em) {
  .cap-c-grid-view__item--large:first-child + .cap-c-grid-view__item--large + .cap-c-grid-view__item--large,
  .cap-c-grid-view__item--large:first-child + .cap-c-grid-view__item--large + .cap-c-grid-view__item--large + .cap-c-grid-view__item--large {
    margin-top: 0; } }

.cap-c-module-fallback__text {
  color: #fff; }

@media (min-width: 56.25em) {
  .cap-c-navigation-footer__links {
    text-align: right; } }

.cap-c-navigation-sub-nav__link {
  -moz-transition-property: color 0.35s ease;
  -o-transition-property: color 0.35s ease;
  -webkit-transition-property: color 0.35s ease;
  transition: color 0.35s ease;
  color: #fff;
  cursor: pointer;
  text-decoration: none; }

.cap-c-navigation-sub-nav__link:hover, .cap-c-navigation-sub-nav__link:focus {
  color: #f54997; }

.cap-c-navigation-sub-nav__link--selected {
  color: #fff; }

.cap-c-navigation-sub-nav__link--selected:visited {
  color: #fff; }

.cap-c-next-item-autoplay {
  background: rgba(0, 0, 0, 0.8); }

@media (min-width: 37.5em) {
  .cap-c-next-item-autoplay {
    width: 22rem; } }

.cap-c-next-item-autoplay__heading {
  color: #f54997; }

.cap-c-schedule {
  background: rgba(0, 0, 0, 0.2);
  position: relative; }

.cap-c-schedule__list {
  height: 64px;
  white-space: nowrap; }

.cap-c-schedule__full-schedule {
  color: #fff; }

.cap-c-sign-in-upsell {
  background-position: top;
  background-repeat: no-repeat; }

@media (min-width: 15em) and (max-width: 62.99em) {
  .cap-c-sign-in-upsell {
    background-size: 100%; } }

@media (min-width: 15em) {
  .cap-c-sign-in-upsell__top {
    position: absolute; } }

.cap-c-sign-in-upsell__title {
  color: #fff; }

.cap-c-sign-in-upsell-sounds {
  background-color: #646464;
  background-position: top;
  background-size: cover;
  color: #fff; }

@media (min-width: 15em) {
  .cap-c-sign-in-upsell-sounds {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06jr9hg.jpg"); } }

@media (min-width: 25em) {
  .cap-c-sign-in-upsell-sounds {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06jr9hs.jpg"); } }

@media (min-width: 63em) {
  .cap-c-sign-in-upsell-sounds {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06jr9l1.jpg"); } }

@media (min-width: 80em) {
  .cap-c-sign-in-upsell-sounds {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06jr9lz.jpg"); } }

.cap-c-sign-in-upsell-sounds__subtitle {
  color: #f2f2f2; }

@media (min-width: 15em) {
  .cap-c-sign-in-upsell-sounds__content {
    padding-bottom: 6%;
    padding-top: 60%; } }

@media (min-width: 37.5em) {
  .cap-c-sign-in-upsell-sounds__content {
    padding-bottom: 6%;
    padding-top: 43%; } }

@media (min-width: 63em) {
  .cap-c-sign-in-upsell-sounds__content {
    padding-bottom: 13%;
    padding-top: 28%; } }

@media (min-width: 80em) {
  .cap-c-sign-in-upsell-sounds__content {
    padding-bottom: 13%;
    padding-top: 28%; } }

.cap-c-tear {
  background-color: #000; }

.cap-c-tear__title {
  color: #fff; }

.cap-c-tear__description {
  color: #fff; }

.cap-c-tear__error {
  color: #fff; }

@media (min-width: 37.5em) {
  .cap-c-tear__arrow-link {
    text-align: right; } }

.cap-c-tear__dismiss {
  margin-right: -8px; }

.cap-c-tracks__item {
  flex-basis: 17.5rem;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 17.5rem; }

@media (min-width: 37.5em) {
  .cap-c-tracks__item {
    flex-basis: 29.4rem;
    max-width: 29.4rem; } }

@media (min-width: 56.25em) {
  .cap-c-tracks__item {
    flex-basis: 30%;
    max-width: 30%; } }

@media (min-width: 80em) {
  .cap-c-tracks__item {
    flex-basis: 25%;
    max-width: 25%; } }

.cap-t-sign-in-upsell-florence {
  background-color: #222;
  padding-top: 6%; }

@media (min-width: 15em) {
  .cap-t-sign-in-upsell-florence {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06g873d.jpg"); } }

@media (min-width: 25em) {
  .cap-t-sign-in-upsell-florence {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06g870h.jpg"); } }

@media (min-width: 63em) {
  .cap-t-sign-in-upsell-florence {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06fvqyq.jpg"); } }

@media (min-width: 80em) {
  .cap-t-sign-in-upsell-florence {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p06g86wq.jpg");
    background-size: cover; } }

.cap-t-sign-in-upsell-florence__features {
  padding-top: 24px;
  padding-bottom: 8%; }

@media (min-width: 15em) {
  .cap-t-sign-in-upsell-florence__features {
    padding-top: 80%; } }

@media (min-width: 25em) {
  .cap-t-sign-in-upsell-florence__features {
    padding-top: 55%; } }

@media (min-width: 37.5em) {
  .cap-t-sign-in-upsell-florence__features {
    padding-top: 43%; } }

@media (min-width: 80em) {
  .cap-t-sign-in-upsell-florence__features {
    padding-bottom: 5%;
    padding-top: 33%; } }

@media (max-width: 56.24em) {
  .cap-t-sign-in-upsell-florence__icon-explainer {
    margin-top: 24px; }
  .cap-t-sign-in-upsell-florence__icon-explainer:first-child {
    margin-top: 0; } }

@media (min-width: 15em) {
  .cap-t-sign-in-upsell-mic {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p05yxhrh.jpg"); } }

@media (min-width: 25em) {
  .cap-t-sign-in-upsell-mic {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p05ywk2h.jpg"); } }

@media (min-width: 63em) {
  .cap-t-sign-in-upsell-mic {
    background-image: url("https://ichef.bbci.co.uk/images/ic/raw/p05ys9zd.jpg"); } }

@media (min-width: 15em) {
  .cap-t-sign-in-upsell-mic__features {
    padding-top: 70%; } }

@media (min-width: 25em) {
  .cap-t-sign-in-upsell-mic__features {
    padding-top: 48%; } }

@media (min-width: 37.5em) {
  .cap-t-sign-in-upsell-mic__features {
    padding-top: 40%; } }

@media (min-width: 80em) {
  .cap-t-sign-in-upsell-mic__features {
    padding-top: 30%; } }

@media (max-width: 56.24em) {
  .cap-t-sign-in-upsell-mic__icon-explainer {
    margin-top: 24px; }
  .cap-t-sign-in-upsell-mic__icon-explainer:first-child {
    margin-top: 0; } }

/** SETTINGS */
/*------------------------------------*\
  # COLOUR PALETTE
\*------------------------------------*/
/**
 * The Playspace colour palette is comprised of 2 parts.
 *
 * 1. Colour definitions. These variables give our HEX codes a human readable
 * name, but ARE NOT designed to be implemented directly within components.
 *
 * 2. Colour implementations. These variables DESCRIBE a colour definition in
 * a functional context. They are designed to be used within components.
 * Several implementations can (and should) share the same definition.
 *
 */
/*------------------------------------*\
1. COLOUR DEFINITIONS
\*------------------------------------*/
/*------------------------------------*\
2. COLOUR IMPLEMENTATIONS
\*------------------------------------*/
/*------------------------------------*\
2. PROPERTY IMPLEMENTATIONS
\*------------------------------------*/
/** GENERIC */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block; }

ol,
ul {
  list-style: none; }

.radio-main {
  background-color: #262525;
  overflow: auto; }

/** ELEMENTS */
body {
  background-color: #ffffff; }

/** UTILITIES */
.play-u-slice-spacing {
  margin-top: 48px !important; }
  @media (min-width: 37.5em) {
    .play-u-slice-spacing {
      margin-top: 64px !important; } }