body, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, dl, dd, ol, ul, form, fieldset, legend,
figure, table, th, td, caption, hr {
margin: 0;
padding: 0; }
h1, h2, h3 {
font-weight: inherit; }
body {
font-weight: normal; }
/**
* Styleguide styles
*
* Provides page Orb css (i.e. font resets) to allow consistent overrides
* to when it's used on a BBC page
*
* TODO: Integrate ORB into styleguide
*/
body {
font-size: 62.5%;
font-family: Arial,Helvetica,freesans,sans-serif;
line-height: 1; }
.b-g-p, .b-r .b-g-p {
padding: 0 8px; }
.b-g-m, .b-r .b-g-m {
margin: 0 8px; }
@media screen and (min-width: 400px) {
.b-g-p, .b-r .b-g-p {
padding: 0 16px; }
.b-g-m, .b-r .b-g-m {
margin: 0 16px; } }
@media screen and (min-width: 1008px) {
.b-g-p, .b-r .b-g-p {
padding: 0 16px; }
.b-g-m, .b-g-p, .b-r .b-g-m, .b-r .b-g-p {
max-width: 976px;
margin: 0 auto; } }
@media screen and (min-width: 1280px) {
.b-pw-1280 .b-g-m, .b-pw-1280 .b-g-p, .b-pw-1280 .b-r .b-g-m, .b-pw-1280 .b-r .b-g-p {
max-width: 1248px; } }
/*------------------------------------* # 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
*
18:30 - 18:34
*
*/
.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:
18:30 - 18:34
*/
.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: #4a9442;
color: #fff; }
.gs-o-button--share:hover {
background-color: #41823a; }
.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
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
*
*
*/
/**
* 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: ',\00A0'; }
/**
* 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: #ffdf43;
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: #1169f6;
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.
*
*
* 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
*
*
*/
.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
*
*
* 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; }
/*------------------------------------* # 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
*
My Title
Some content
*
* 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
*
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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; }
/**
* 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
*/
/**
* 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)
*/
/**
* 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-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-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; }
.cap-u-reith-light {
font-weight: 300 !important; }
.cap-u-truncate {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important; }
.cap-u-flex-nowrap {
flex-wrap: nowrap !important; }
.cap-o-link {
color: #ffffff;
text-decoration: none;
-webkit-transition: color .5s ease;
transition: color .5s ease; }
.cap-o-link:visited {
color: #ffffff; }
.cap-o-link--no-visited-state:visited {
color: #ffffff; }
.cap-o-link:hover, .cap-o-link:focus {
color: #c0bebe; }
.button {
padding: .5em 1.5em;
color: #666;
background-color: #fff;
border: 1px solid currentColor;
border-radius: .3em;
text-align: center;
vertical-align: middle;
cursor: pointer; }
.cap-c-duration {
color: #ffffff; }
.cap-c-duration i {
color: #f54997; }
.cap-c-progressbar {
background-color: #696969;
height: 2px; }
.cap-c-progressbar__position {
background-color: #f54997;
height: 100%;
max-width: 100%; }
.cap-c-rsimage__overlay {
height: 100%;
position: absolute;
width: 100%; }
.cap-c-rsimage__svg {
bottom: 0;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0; }
.cap-c-favouritesbutton {
display: inline-block; }
.cap-c-favouritesbutton button {
background: none;
border: 0;
color: #ffffff;
cursor: pointer; }
.cap-c-favouritesbutton i {
margin-right: 5px; }
.cap-c-favouritesbutton form {
display: inline-block; }
.cap-c-favouritesbutton:hover button, .cap-c-favouritesbutton:focus button {
color: #f54997; }
.cap-c-card {
width: 100%; }
.cap-c-card.cap-c-card__open .cap-c-card__primary,
.cap-c-card.cap-c-card__open .cap-c-card__tertiary {
display: none; }
@media (min-width: 37.5em) {
.cap-c-card.cap-c-card__open .cap-c-card__primary,
.cap-c-card.cap-c-card__open .cap-c-card__tertiary {
display: block; } }
.cap-c-card.cap-c-card__open .cap-c-card__availability {
display: none; }
@media (min-width: 25em) {
.cap-c-card.cap-c-card__open .cap-c-card__availability {
display: block;
text-align: right; } }
@media (min-width: 37.5em) {
.cap-c-card.cap-c-card__open .cap-c-card__availability {
text-align: left; } }
.cap-c-card.cap-c-card__open .cap-c-duration__value {
display: none; }
@media (min-width: 37.5em) {
.cap-c-card.cap-c-card__open .cap-c-duration__value {
display: inline; } }
.cap-c-card.cap-c-card__open h3,
.cap-c-card.cap-c-card__open .cap-c-duration {
display: inline; }
@media (min-width: 37.5em) {
.cap-c-card.cap-c-card__open h3,
.cap-c-card.cap-c-card__open .cap-c-duration {
display: block; } }
@media (max-width: 37.5em) {
.cap-c-card {
flex-wrap: wrap; } }
@media (min-width: 37.5em) {
.cap-c-card {
flex-direction: column; } }
.cap-c-card .cap-c-card__wrapper {
flex-direction: row;
flex-flow: row;
flex-grow: 1; }
@media (min-width: 37.5em) {
.cap-c-card .cap-c-card__wrapper {
flex-direction: column;
flex-flow: column; } }
@media (max-width: 37.5em) {
.cap-c-card .cap-c-card__cover {
background: #111111; } }
@media (min-width: 37.5em) {
.cap-c-card .cap-c-card__cover {
overflow: hidden; } }
.cap-c-card .cap-c-card__image {
position: relative;
width: 145px; }
.cap-c-card .cap-c-card__image .cap-c-duration {
background: rgba(0, 0, 0, 0.8); }
@media (min-width: 25em) {
.cap-c-card .cap-c-card__image {
width: 180px; } }
@media (min-width: 37.5em) {
.cap-c-card .cap-c-card__image {
width: 100%; } }
@media (max-width: 37.5em) {
.cap-c-card .cap-c-card__image {
min-height: 100px; } }
.cap-c-card .cap-c-card__meta {
flex-grow: 1; }
.cap-c-card .cap-c-card__meta .cap-c-card__pipe {
color: #ffffff; }
.cap-c-card .cap-c-card__boxlink:hover p,
.cap-c-card .cap-c-card__boxlink:hover h3, .cap-c-card .cap-c-card__boxlink:focus p,
.cap-c-card .cap-c-card__boxlink:focus h3 {
color: #f54997; }
.cap-c-card--hide {
display: none !important; }
.cap-c-card .cap-c-card--pink {
color: #f54997; }
.cap-c-card .cap-c-card__meta,
.cap-c-card .cap-c-card__footer,
.cap-c-card .cap-c-card__meta {
background: #111111; }
.cap-c-card h3 {
color: #ffffff; }
.cap-c-card p {
color: #c0bebe; }
.cap-c-card img {
display: block;
max-width: 100%; }
.cap-c-card a {
color: #c0bebe;
text-decoration: none; }
.cap-c-card a:hover, .cap-c-card a:focus {
color: #f54997; }
.cap-c-card a:hover svg, .cap-c-card a:focus svg {
fill: #f54997; }
.cap-c-card .cap-c-card__availability a {
position: relative;
z-index: 2; }
@media (max-width: 37.5em) {
.cap-c-card .cap-c-card__footer {
width: 100%; } }
.cap-c-card .cap-c-card__addbutton {
color: #ffffff; }
.cap-c-metadata {
color: #ffffff; }
.cap-c-iconbutton {
color: #ffffff;
text-decoration: none;
width: auto; }
.cap-c-listeningitem__remaining {
background: #f54997; }
.cap-c-listeningitem__time {
color: #ffffff; }
.cap-c-listeningitem:hover .cap-c-rsimage__overlay {
background: #f54997; }
.cap-c-listeningitem:hover .cap-c-rsimage__svg {
opacity: 1; }
.cap-c-heading__title {
color: #ffffff; }
.cap-c-heading__pipe {
border-left: 4px solid #696969; }
.cap-c-broadcast {
height: inherit;
min-width: 252px; }
.cap-c-broadcast--next {
border-left: 1px solid #ffffff; }
.cap-c-broadcast--onair {
background: #000000; }
.cap-c-broadcast__image {
flex-basis: 44px;
flex-grow: 0;
flex-shrink: 0;
height: 44px;
width: 44px; }
.cap-c-broadcast__image img {
border-radius: 50%; }
.cap-c-broadcast__meta {
color: #ffffff; }
.cap-c-broadcast__meta--next {
opacity: .6; }
.cap-c-schedule {
background: #000000;
overflow-x: scroll; }
.cap-c-schedule__list {
height: 60px;
white-space: nowrap; }
.cap-c-rsimage__overlay,
.cap-c-rsimage__svg {
transition: .5s ease; }
.cap-c-listeningitem:hover .cap-c-rsimage__overlay {
background: rgba(245, 73, 151, 0.8); }
.cap-c-broadcast--onair {
background: rgba(0, 0, 0, 0.2); }
.cap-c-broadcast--next {
border-color: rgba(255, 255, 255, 0.6); }
.cap-c-schedule {
background: rgba(0, 0, 0, 0.2); }