/* Non-IE8 media query mixin */
/* Shared */
/*
https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss
Create vendor-prefixed CSS in one go, e.g.
@include vendor(border-radius, 4px);
*/
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove default margin.
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block; }
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
* {
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
html {
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
color: inherit; }
/*
1. Setting `vertical-align` removes the whitespace that appears under `img`
elements when they are dropped into a page as-is. Safer alternative to
using `display: block;`.
*/
img {
vertical-align: middle;
/* [1] */ }
@font-face {
font-family: 'playfair_display';
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-regular-webfont-eot.eot");
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-regular-webfont-eot.eot?#iefix") format("embedded-opentype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-regular-webfont-woff2.woff2") format("woff2"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-regular-webfont-woff.woff") format("woff"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-regular-webfont-ttf.ttf") format("truetype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-regular-webfont-svg.svg#playfair_displayregular") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'playfair_display';
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bold-webfont-eot.eot");
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bold-webfont-eot.eot?#iefix") format("embedded-opentype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bold-webfont-woff2.woff2") format("woff2"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bold-webfont-woff.woff") format("woff"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bold-webfont-ttf.ttf") format("truetype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bold-webfont-svg.svg#playfair_displaybold") format("svg");
font-weight: bold;
font-style: normal; }
@font-face {
font-family: 'playfair_display';
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bolditalic-webfont-eot.eot");
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bolditalic-webfont-eot.eot?#iefix") format("embedded-opentype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bolditalic-webfont-woff2.woff2") format("woff2"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bolditalic-webfont-woff.woff") format("woff"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bolditalic-webfont-ttf.ttf") format("truetype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-bolditalic-webfont-svg.svg#playfair_displaybold_italic") format("svg");
font-weight: bold;
font-style: italic; }
@font-face {
font-family: 'playfair_display';
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-italic-webfont-eot.eot");
src: url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-italic-webfont-eot.eot?#iefix") format("embedded-opentype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-italic-webfont-woff2.woff2") format("woff2"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-italic-webfont-woff.woff") format("woff"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-italic-webfont-ttf.ttf") format("truetype"), url("/others/about_us/brand/bbc_article01/fonts/playfairdisplay-italic-webfont-svg.svg#playfair_displayitalic") format("svg");
font-weight:400;
font-style: italic; }
@font-face {
font-family: 'century_gothicregular';
src: url("/others/about_us/brand/bbc_article01/fonts/cgothic-webfont-eot.eot");
src: url("/others/about_us/brand/bbc_article01/fonts/cgothic-webfont-eot.eot?#iefix") format("embedded-opentype"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-webfont-woff2.woff2") format("woff2"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-webfont-woff.woff") format("woff"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-webfont-ttf.ttf") format("truetype"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-webfont-svg.svg#century_gothicregular") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'century_gothicbold';
src: url("/others/about_us/brand/bbc_article01/fonts/cgothic-bold-eot.eot");
src: url("/others/about_us/brand/bbc_article01/fonts/cgothic-bold-eot.eot?#iefix") format("embedded-opentype"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-bold-woff2.woff2") format("woff2"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-bold-woff.woff") format("woff"), url("/others/about_us/brand/bbc_article01/fonts/cgothic-bold-ttf.ttf") format("truetype");
font-weight: normal;
font-style: normal; }
.bbccom_standard_slot {
background: transparent !important; }
.AdSlot--leaderboard .bbccom_text {
color: #bbb !important; }
p,
dl,
ul,
ol {
margin-bottom: 25px; }
p:last-child {
margin-bottom: 0; }
ul,
ol {
margin-left: 40px; }
.PageSidePadding {
padding-left: 20px;
padding-right: 20px; }
/*
Adapted from http://csswizardry.com/2013/05/the-flag-object/
CSS class name Flag__image changed to Arrange_fixed
as this object can work with short strings of text as well.
CSS class name Flag__body changed to Arrange_flexible as it makes
more sense when used together with Arrange_fixed.
*/
/*
Responsive Arrange
Generates Arrange classes prefixed with $util-breakpoints:
.hugePlus-Arrange
.hugePlus-Arrange-fixed
.hugePlus-Arrange-flexible
etc.
*/
/* Regular, non-responsive Arrange classes */
.Arrange {
display: table;
width: 100%; }
.Arrange-fixed,
.Arrange-flexible {
display: table-cell;
vertical-align: middle; }
.Arrange--top > .Arrange-fixed, .Arrange--top >
.Arrange-flexible {
vertical-align: top; }
.Arrange--bottom > .Arrange-fixed, .Arrange--bottom >
.Arrange-flexible {
vertical-align: bottom; }
.Arrange-fixed {
width: auto; }
.Arrange-flexible {
width: 100%; }
/* Responsive Arrange classes */
@media only screen and (min-width: 0px) {
.tinyPlus-Arrange {
display: table;
width: 100%; }
.tinyPlus-Arrange-fixed,
.tinyPlus-Arrange-flexible {
display: table-cell;
vertical-align: middle; }
.tinyPlus-Arrange--top > .tinyPlus-Arrange-fixed, .tinyPlus-Arrange--top >
.tinyPlus-Arrange-flexible {
vertical-align: top; }
.tinyPlus-Arrange--bottom > .tinyPlus-Arrange-fixed, .tinyPlus-Arrange--bottom >
.tinyPlus-Arrange-flexible {
vertical-align: bottom; }
.tinyPlus-Arrange-fixed {
width: auto; }
.tinyPlus-Arrange-flexible {
width: 100%; } }
@media only screen and (min-width: 360px) {
.smallPlus-Arrange {
display: table;
width: 100%; }
.smallPlus-Arrange-fixed,
.smallPlus-Arrange-flexible {
display: table-cell;
vertical-align: middle; }
.smallPlus-Arrange--top > .smallPlus-Arrange-fixed, .smallPlus-Arrange--top >
.smallPlus-Arrange-flexible {
vertical-align: top; }
.smallPlus-Arrange--bottom > .smallPlus-Arrange-fixed, .smallPlus-Arrange--bottom >
.smallPlus-Arrange-flexible {
vertical-align: bottom; }
.smallPlus-Arrange-fixed {
width: auto; }
.smallPlus-Arrange-flexible {
width: 100%; } }
@media only screen and (min-width: 560px) {
.mediumPlus-Arrange {
display: table;
width: 100%; }
.mediumPlus-Arrange-fixed,
.mediumPlus-Arrange-flexible {
display: table-cell;
vertical-align: middle; }
.mediumPlus-Arrange--top > .mediumPlus-Arrange-fixed, .mediumPlus-Arrange--top >
.mediumPlus-Arrange-flexible {
vertical-align: top; }
.mediumPlus-Arrange--bottom > .mediumPlus-Arrange-fixed, .mediumPlus-Arrange--bottom >
.mediumPlus-Arrange-flexible {
vertical-align: bottom; }
.mediumPlus-Arrange-fixed {
width: auto; }
.mediumPlus-Arrange-flexible {
width: 100%; } }
@media only screen and (min-width: 760px) {
.largePlus-Arrange {
display: table;
width: 100%; }
.largePlus-Arrange-fixed,
.largePlus-Arrange-flexible {
display: table-cell;
vertical-align: middle; }
.largePlus-Arrange--top > .largePlus-Arrange-fixed, .largePlus-Arrange--top >
.largePlus-Arrange-flexible {
vertical-align: top; }
.largePlus-Arrange--bottom > .largePlus-Arrange-fixed, .largePlus-Arrange--bottom >
.largePlus-Arrange-flexible {
vertical-align: bottom; }
.largePlus-Arrange-fixed {
width: auto; }
.largePlus-Arrange-flexible {
width: 100%; } }
@media only screen and (min-width: 1024px) {
.hugePlus-Arrange {
display: table;
width: 100%; }
.hugePlus-Arrange-fixed,
.hugePlus-Arrange-flexible {
display: table-cell;
vertical-align: middle; }
.hugePlus-Arrange--top > .hugePlus-Arrange-fixed, .hugePlus-Arrange--top >
.hugePlus-Arrange-flexible {
vertical-align: top; }
.hugePlus-Arrange--bottom > .hugePlus-Arrange-fixed, .hugePlus-Arrange--bottom >
.hugePlus-Arrange-flexible {
vertical-align: bottom; }
.hugePlus-Arrange-fixed {
width: auto; }
.hugePlus-Arrange-flexible {
width: 100%; } }
/*
Responsive Board with stickies
Generates Board classes prefixed with $board-breakpoints:
.Board
.largePlus-Board
.largePlus-Board-sticky
.largePlus-Board-sticky--top
etc.
*/
/* Regular, non-responsive classes */
.Board {
position: relative; }
.Board-sticky {
position: absolute; }
.Board-sticky--top {
top: 0; }
.Board-sticky--bottom {
bottom: 0; }
.Board-sticky--left {
left: 0; }
.Board-sticky--right {
right: 0; }
/* Responsive classes */
.ButtonReset {
background: transparent;
border: 0 none;
padding: 0;
cursor: pointer;
outline: none; }
.Flush {
margin-left: -20px;
margin-right: -20px; }
@media only screen and (min-width: 360px) {
.smallPlus-Flush {
margin-left: -20px;
margin-right: -20px; } }
@media only screen and (min-width: 560px) {
.smallPlus-Flush,
.mediumPlus-Flush {
margin-left: -20px;
margin-right: -20px; } }
@media only screen and (min-width: 760px) {
.smallPlus-Flush,
.mediumPlus-Flush,
.largePlus-Flush {
margin-left: -20px;
margin-right: -20px; } }
/*
Responsive ListInline
Generates ListInline classes prefixed with $list-inline-breakpoints:
.ListInline
.largePlus-ListInline
.hugePlus-ListInline
etc.
*/
/* uncss grunt plugin will remove unused CSS classes */
/* Regular, non-responsive classes */
.ListInline > li {
display: inline-block; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
.tinyPlus-ListInline > li {
display: inline-block; } }
@media only screen and (min-width: 360px) {
.smallPlus-ListInline > li {
display: inline-block; } }
@media only screen and (min-width: 560px) {
.mediumPlus-ListInline > li {
display: inline-block; } }
@media only screen and (min-width: 760px) {
.largePlus-ListInline > li {
display: inline-block; } }
@media only screen and (min-width: 1024px) {
.hugePlus-ListInline > li {
display: inline-block; } }
.ListReset {
padding-left: 0;
margin: 0;
list-style-type: none; }
.PageWidth {
max-width: 1024px;
margin-left: auto;
margin-right: auto; }
html,
body {
height: 100%;
width: 100%; }
.StickyFooter {
display: table;
width: 100%;
height: 100%; }
.StickyFooter-footer {
width: 100%;
display: table-row;
height: 1px;
overflow: hidden; }
/* Regular, non-responsive classes */
.Table {
display: table; }
.Table-row {
display: table-row-group; }
.Table-footer {
display: table-footer-group; }
.Table-header {
display: table-header-group; }
/* Responsive classes */
@media only screen and (min-width: 760px) {
.largePlus-Table {
display: table; }
.largePlus-Table-row {
display: table-row-group; }
.largePlus-Table-footer {
display: table-footer-group; }
.largePlus-Table-header {
display: table-header-group; } }
video {
max-width: 100%;
height: auto; }
.Video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.Video iframe,
.Video object,
.Video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/*
Adapted and modified from the best of 2 grids:
- SUIT CSS Grid
- csswizardry-grids
Generates grid classes prefixed with $grid-breakpoints:
.Grid
.largePlus-u-Grid
.hugePlus-u-Grid
etc.
*/
/* Regular, non-responsive classes */
/*
Core grid component
DO NOT apply dimension or offset utilities to the `Grid` element. All cell
widths and offsets should be applied to child grid cells.
*/
/*
All content must be contained within child `Grid-cell` elements.
1. Account for browser defaults of elements that might be the root node of
the component.
2. Ensure consistent default alignment.
3. Allow the Grid system to be used on lists.
*/
.Grid {
display: block;
/* [1] */
margin: 0;
/* [1] */
padding: 0;
/* [1] */
text-align: left;
/* [2] */
list-style: none;
/* [3] */
vertical-align: top; }
/*
Modifier: center align all grid cells
*/
.Grid--alignCenter {
text-align: center; }
/*
Modifier: left align all grid cells.
Useful when need to overwrite a right/center aligned grid item for a breakpoint
*/
.Grid--alignLeft {
text-align: left; }
/*
Modifier: right align all grid cells
*/
.Grid--alignRight {
text-align: right; }
/*
Modifier: middle-align grid cells
*/
.Grid--alignMiddle > .Grid-cell {
vertical-align: middle; }
/*
Modifier: top-align grid cells
Useful when need to overwrite a bottom/middle aligned grid item for a breakpoint
*/
.Grid--alignTop > .Grid-cell {
vertical-align: top; }
/*
Modifier: bottom-align grid cells
*/
.Grid--alignBottom > .Grid-cell {
vertical-align: bottom; }
/*
Modifier: no gutters
*/
.Grid--noGutter {
margin-left: 0; }
.Grid--noGutter > .Grid-cell {
padding-left: 0; }
/*
Modifier: medium gutters
*/
.Grid--mediumGutter {
margin-left: -20px; }
.Grid--mediumGutter > .Grid-cell {
padding-left: 20px; }
/*
Modifier: small gutters
*/
.Grid--smallGutter {
margin-left: -10px; }
.Grid--smallGutter > .Grid-cell {
padding-left: 10px; }
/*
Modifier: large gutters
*/
.Grid--largeGutter {
margin-left: -30px; }
.Grid--largeGutter > .Grid-cell {
padding-left: 30px; }
/*
Modifier: extra large gutters
*/
.Grid--xLargeGutter {
margin-left: -40px; }
.Grid--xLargeGutter > .Grid-cell {
padding-left: 40px; }
/*
Modifier: normal order of Grid items, as they are structured in your source
*/
.Grid--orderNormal {
direction: ltr;
text-align: left; }
.Grid--orderNormal > .Grid-cell {
direction: ltr; }
/*
Modifier: Reversed Grids allow you to structure your source in the opposite order to
how your rendered layout will appear
*/
.Grid--orderReversed {
direction: rtl;
text-align: left; }
.Grid--orderReversed > .Grid-cell {
direction: ltr; }
/*
No explicit width by default. Rely on combining `Grid-cell` with a dimension
utility or a component class that extends 'grid'.
1. Fundamentals of the non-float grid layout.
2. Keeps content correctly aligned with the grid direction.
3. Controls vertical positioning of units.
4. Make cells full-width by default.
*/
.Grid-cell {
display: inline-block;
/* [1] */
margin: 0;
padding: 0;
text-align: left;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */ }
/* Responsive classes */
@media only screen and (min-width: 0px) {
/*
Core grid component
DO NOT apply dimension or offset utilities to the `Grid` element. All cell
widths and offsets should be applied to child grid cells.
*/
/*
All content must be contained within child `Grid-cell` elements.
1. Account for browser defaults of elements that might be the root node of
the component.
2. Ensure consistent default alignment.
3. Allow the Grid system to be used on lists.
*/
.tinyPlus-Grid {
display: block;
/* [1] */
margin: 0;
/* [1] */
padding: 0;
/* [1] */
text-align: left;
/* [2] */
list-style: none;
/* [3] */
vertical-align: top; }
/*
Modifier: center align all grid cells
*/
.tinyPlus-Grid--alignCenter {
text-align: center; }
/*
Modifier: left align all grid cells.
Useful when need to overwrite a right/center aligned grid item for a breakpoint
*/
.tinyPlus-Grid--alignLeft {
text-align: left; }
/*
Modifier: right align all grid cells
*/
.tinyPlus-Grid--alignRight {
text-align: right; }
/*
Modifier: middle-align grid cells
*/
.tinyPlus-Grid--alignMiddle > .tinyPlus-Grid-cell {
vertical-align: middle; }
/*
Modifier: top-align grid cells
Useful when need to overwrite a bottom/middle aligned grid item for a breakpoint
*/
.tinyPlus-Grid--alignTop > .tinyPlus-Grid-cell {
vertical-align: top; }
/*
Modifier: bottom-align grid cells
*/
.tinyPlus-Grid--alignBottom > .tinyPlus-Grid-cell {
vertical-align: bottom; }
/*
Modifier: no gutters
*/
.tinyPlus-Grid--noGutter {
margin-left: 0; }
.tinyPlus-Grid--noGutter > .tinyPlus-Grid-cell {
padding-left: 0; }
/*
Modifier: medium gutters
*/
.tinyPlus-Grid--mediumGutter {
margin-left: -20px; }
.tinyPlus-Grid--mediumGutter > .tinyPlus-Grid-cell {
padding-left: 20px; }
/*
Modifier: small gutters
*/
.tinyPlus-Grid--smallGutter {
margin-left: -10px; }
.tinyPlus-Grid--smallGutter > .tinyPlus-Grid-cell {
padding-left: 10px; }
/*
Modifier: large gutters
*/
.tinyPlus-Grid--largeGutter {
margin-left: -30px; }
.tinyPlus-Grid--largeGutter > .tinyPlus-Grid-cell {
padding-left: 30px; }
/*
Modifier: extra large gutters
*/
.tinyPlus-Grid--xLargeGutter {
margin-left: -40px; }
.tinyPlus-Grid--xLargeGutter > .tinyPlus-Grid-cell {
padding-left: 40px; }
/*
Modifier: normal order of Grid items, as they are structured in your source
*/
.tinyPlus-Grid--orderNormal {
direction: ltr;
text-align: left; }
.tinyPlus-Grid--orderNormal > .tinyPlus-Grid-cell {
direction: ltr; }
/*
Modifier: Reversed Grids allow you to structure your source in the opposite order to
how your rendered layout will appear
*/
.tinyPlus-Grid--orderReversed {
direction: rtl;
text-align: left; }
.tinyPlus-Grid--orderReversed > .tinyPlus-Grid-cell {
direction: ltr; }
/*
No explicit width by default. Rely on combining `Grid-cell` with a dimension
utility or a component class that extends 'grid'.
1. Fundamentals of the non-float grid layout.
2. Keeps content correctly aligned with the grid direction.
3. Controls vertical positioning of units.
4. Make cells full-width by default.
*/
.tinyPlus-Grid-cell {
display: inline-block;
/* [1] */
margin: 0;
padding: 0;
text-align: left;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */ } }
@media only screen and (min-width: 360px) {
/*
Core grid component
DO NOT apply dimension or offset utilities to the `Grid` element. All cell
widths and offsets should be applied to child grid cells.
*/
/*
All content must be contained within child `Grid-cell` elements.
1. Account for browser defaults of elements that might be the root node of
the component.
2. Ensure consistent default alignment.
3. Allow the Grid system to be used on lists.
*/
.smallPlus-Grid {
display: block;
/* [1] */
margin: 0;
/* [1] */
padding: 0;
/* [1] */
text-align: left;
/* [2] */
list-style: none;
/* [3] */
vertical-align: top; }
/*
Modifier: center align all grid cells
*/
.smallPlus-Grid--alignCenter {
text-align: center; }
/*
Modifier: left align all grid cells.
Useful when need to overwrite a right/center aligned grid item for a breakpoint
*/
.smallPlus-Grid--alignLeft {
text-align: left; }
/*
Modifier: right align all grid cells
*/
.smallPlus-Grid--alignRight {
text-align: right; }
/*
Modifier: middle-align grid cells
*/
.smallPlus-Grid--alignMiddle > .smallPlus-Grid-cell {
vertical-align: middle; }
/*
Modifier: top-align grid cells
Useful when need to overwrite a bottom/middle aligned grid item for a breakpoint
*/
.smallPlus-Grid--alignTop > .smallPlus-Grid-cell {
vertical-align: top; }
/*
Modifier: bottom-align grid cells
*/
.smallPlus-Grid--alignBottom > .smallPlus-Grid-cell {
vertical-align: bottom; }
/*
Modifier: no gutters
*/
.smallPlus-Grid--noGutter {
margin-left: 0; }
.smallPlus-Grid--noGutter > .smallPlus-Grid-cell {
padding-left: 0; }
/*
Modifier: medium gutters
*/
.smallPlus-Grid--mediumGutter {
margin-left: -20px; }
.smallPlus-Grid--mediumGutter > .smallPlus-Grid-cell {
padding-left: 20px; }
/*
Modifier: small gutters
*/
.smallPlus-Grid--smallGutter {
margin-left: -10px; }
.smallPlus-Grid--smallGutter > .smallPlus-Grid-cell {
padding-left: 10px; }
/*
Modifier: large gutters
*/
.smallPlus-Grid--largeGutter {
margin-left: -30px; }
.smallPlus-Grid--largeGutter > .smallPlus-Grid-cell {
padding-left: 30px; }
/*
Modifier: extra large gutters
*/
.smallPlus-Grid--xLargeGutter {
margin-left: -40px; }
.smallPlus-Grid--xLargeGutter > .smallPlus-Grid-cell {
padding-left: 40px; }
/*
Modifier: normal order of Grid items, as they are structured in your source
*/
.smallPlus-Grid--orderNormal {
direction: ltr;
text-align: left; }
.smallPlus-Grid--orderNormal > .smallPlus-Grid-cell {
direction: ltr; }
/*
Modifier: Reversed Grids allow you to structure your source in the opposite order to
how your rendered layout will appear
*/
.smallPlus-Grid--orderReversed {
direction: rtl;
text-align: left; }
.smallPlus-Grid--orderReversed > .smallPlus-Grid-cell {
direction: ltr; }
/*
No explicit width by default. Rely on combining `Grid-cell` with a dimension
utility or a component class that extends 'grid'.
1. Fundamentals of the non-float grid layout.
2. Keeps content correctly aligned with the grid direction.
3. Controls vertical positioning of units.
4. Make cells full-width by default.
*/
.smallPlus-Grid-cell {
display: inline-block;
/* [1] */
margin: 0;
padding: 0;
text-align: left;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */ } }
@media only screen and (min-width: 560px) {
/*
Core grid component
DO NOT apply dimension or offset utilities to the `Grid` element. All cell
widths and offsets should be applied to child grid cells.
*/
/*
All content must be contained within child `Grid-cell` elements.
1. Account for browser defaults of elements that might be the root node of
the component.
2. Ensure consistent default alignment.
3. Allow the Grid system to be used on lists.
*/
.mediumPlus-Grid {
display: block;
/* [1] */
margin: 0;
/* [1] */
padding: 0;
/* [1] */
text-align: left;
/* [2] */
list-style: none;
/* [3] */
vertical-align: top; }
/*
Modifier: center align all grid cells
*/
.mediumPlus-Grid--alignCenter {
text-align: center; }
/*
Modifier: left align all grid cells.
Useful when need to overwrite a right/center aligned grid item for a breakpoint
*/
.mediumPlus-Grid--alignLeft {
text-align: left; }
/*
Modifier: right align all grid cells
*/
.mediumPlus-Grid--alignRight {
text-align: right; }
/*
Modifier: middle-align grid cells
*/
.mediumPlus-Grid--alignMiddle > .mediumPlus-Grid-cell {
vertical-align: middle; }
/*
Modifier: top-align grid cells
Useful when need to overwrite a bottom/middle aligned grid item for a breakpoint
*/
.mediumPlus-Grid--alignTop > .mediumPlus-Grid-cell {
vertical-align: top; }
/*
Modifier: bottom-align grid cells
*/
.mediumPlus-Grid--alignBottom > .mediumPlus-Grid-cell {
vertical-align: bottom; }
/*
Modifier: no gutters
*/
.mediumPlus-Grid--noGutter {
margin-left: 0; }
.mediumPlus-Grid--noGutter > .mediumPlus-Grid-cell {
padding-left: 0; }
/*
Modifier: medium gutters
*/
.mediumPlus-Grid--mediumGutter {
margin-left: -20px; }
.mediumPlus-Grid--mediumGutter > .mediumPlus-Grid-cell {
padding-left: 20px; }
/*
Modifier: small gutters
*/
.mediumPlus-Grid--smallGutter {
margin-left: -10px; }
.mediumPlus-Grid--smallGutter > .mediumPlus-Grid-cell {
padding-left: 10px; }
/*
Modifier: large gutters
*/
.mediumPlus-Grid--largeGutter {
margin-left: -30px; }
.mediumPlus-Grid--largeGutter > .mediumPlus-Grid-cell {
padding-left: 30px; }
/*
Modifier: extra large gutters
*/
.mediumPlus-Grid--xLargeGutter {
margin-left: -40px; }
.mediumPlus-Grid--xLargeGutter > .mediumPlus-Grid-cell {
padding-left: 40px; }
/*
Modifier: normal order of Grid items, as they are structured in your source
*/
.mediumPlus-Grid--orderNormal {
direction: ltr;
text-align: left; }
.mediumPlus-Grid--orderNormal > .mediumPlus-Grid-cell {
direction: ltr; }
/*
Modifier: Reversed Grids allow you to structure your source in the opposite order to
how your rendered layout will appear
*/
.mediumPlus-Grid--orderReversed {
direction: rtl;
text-align: left; }
.mediumPlus-Grid--orderReversed > .mediumPlus-Grid-cell {
direction: ltr; }
/*
No explicit width by default. Rely on combining `Grid-cell` with a dimension
utility or a component class that extends 'grid'.
1. Fundamentals of the non-float grid layout.
2. Keeps content correctly aligned with the grid direction.
3. Controls vertical positioning of units.
4. Make cells full-width by default.
*/
.mediumPlus-Grid-cell {
display: inline-block;
/* [1] */
margin: 0;
padding: 0;
text-align: left;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */ } }
@media only screen and (min-width: 760px) {
/*
Core grid component
DO NOT apply dimension or offset utilities to the `Grid` element. All cell
widths and offsets should be applied to child grid cells.
*/
/*
All content must be contained within child `Grid-cell` elements.
1. Account for browser defaults of elements that might be the root node of
the component.
2. Ensure consistent default alignment.
3. Allow the Grid system to be used on lists.
*/
.largePlus-Grid {
display: block;
/* [1] */
margin: 0;
/* [1] */
padding: 0;
/* [1] */
text-align: left;
/* [2] */
list-style: none;
/* [3] */
vertical-align: top; }
/*
Modifier: center align all grid cells
*/
.largePlus-Grid--alignCenter {
text-align: center; }
/*
Modifier: left align all grid cells.
Useful when need to overwrite a right/center aligned grid item for a breakpoint
*/
.largePlus-Grid--alignLeft {
text-align: left; }
/*
Modifier: right align all grid cells
*/
.largePlus-Grid--alignRight {
text-align: right; }
/*
Modifier: middle-align grid cells
*/
.largePlus-Grid--alignMiddle > .largePlus-Grid-cell {
vertical-align: middle; }
/*
Modifier: top-align grid cells
Useful when need to overwrite a bottom/middle aligned grid item for a breakpoint
*/
.largePlus-Grid--alignTop > .largePlus-Grid-cell {
vertical-align: top; }
/*
Modifier: bottom-align grid cells
*/
.largePlus-Grid--alignBottom > .largePlus-Grid-cell {
vertical-align: bottom; }
/*
Modifier: no gutters
*/
.largePlus-Grid--noGutter {
margin-left: 0; }
.largePlus-Grid--noGutter > .largePlus-Grid-cell {
padding-left: 0; }
/*
Modifier: medium gutters
*/
.largePlus-Grid--mediumGutter {
margin-left: -20px; }
.largePlus-Grid--mediumGutter > .largePlus-Grid-cell {
padding-left: 20px; }
/*
Modifier: small gutters
*/
.largePlus-Grid--smallGutter {
margin-left: -10px; }
.largePlus-Grid--smallGutter > .largePlus-Grid-cell {
padding-left: 10px; }
/*
Modifier: large gutters
*/
.largePlus-Grid--largeGutter {
margin-left: -30px; }
.largePlus-Grid--largeGutter > .largePlus-Grid-cell {
padding-left: 30px; }
/*
Modifier: extra large gutters
*/
.largePlus-Grid--xLargeGutter {
margin-left: -40px; }
.largePlus-Grid--xLargeGutter > .largePlus-Grid-cell {
padding-left: 40px; }
/*
Modifier: normal order of Grid items, as they are structured in your source
*/
.largePlus-Grid--orderNormal {
direction: ltr;
text-align: left; }
.largePlus-Grid--orderNormal > .largePlus-Grid-cell {
direction: ltr; }
/*
Modifier: Reversed Grids allow you to structure your source in the opposite order to
how your rendered layout will appear
*/
.largePlus-Grid--orderReversed {
direction: rtl;
text-align: left; }
.largePlus-Grid--orderReversed > .largePlus-Grid-cell {
direction: ltr; }
/*
No explicit width by default. Rely on combining `Grid-cell` with a dimension
utility or a component class that extends 'grid'.
1. Fundamentals of the non-float grid layout.
2. Keeps content correctly aligned with the grid direction.
3. Controls vertical positioning of units.
4. Make cells full-width by default.
*/
.largePlus-Grid-cell {
display: inline-block;
/* [1] */
margin: 0;
padding: 0;
text-align: left;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */ } }
@media only screen and (min-width: 1024px) {
/*
Core grid component
DO NOT apply dimension or offset utilities to the `Grid` element. All cell
widths and offsets should be applied to child grid cells.
*/
/*
All content must be contained within child `Grid-cell` elements.
1. Account for browser defaults of elements that might be the root node of
the component.
2. Ensure consistent default alignment.
3. Allow the Grid system to be used on lists.
*/
.hugePlus-Grid {
display: block;
/* [1] */
margin: 0;
/* [1] */
padding: 0;
/* [1] */
text-align: left;
/* [2] */
list-style: none;
/* [3] */
vertical-align: top; }
/*
Modifier: center align all grid cells
*/
.hugePlus-Grid--alignCenter {
text-align: center; }
/*
Modifier: left align all grid cells.
Useful when need to overwrite a right/center aligned grid item for a breakpoint
*/
.hugePlus-Grid--alignLeft {
text-align: left; }
/*
Modifier: right align all grid cells
*/
.hugePlus-Grid--alignRight {
text-align: right; }
/*
Modifier: middle-align grid cells
*/
.hugePlus-Grid--alignMiddle > .hugePlus-Grid-cell {
vertical-align: middle; }
/*
Modifier: top-align grid cells
Useful when need to overwrite a bottom/middle aligned grid item for a breakpoint
*/
.hugePlus-Grid--alignTop > .hugePlus-Grid-cell {
vertical-align: top; }
/*
Modifier: bottom-align grid cells
*/
.hugePlus-Grid--alignBottom > .hugePlus-Grid-cell {
vertical-align: bottom; }
/*
Modifier: no gutters
*/
.hugePlus-Grid--noGutter {
margin-left: 0; }
.hugePlus-Grid--noGutter > .hugePlus-Grid-cell {
padding-left: 0; }
/*
Modifier: medium gutters
*/
.hugePlus-Grid--mediumGutter {
margin-left: -20px; }
.hugePlus-Grid--mediumGutter > .hugePlus-Grid-cell {
padding-left: 20px; }
/*
Modifier: small gutters
*/
.hugePlus-Grid--smallGutter {
margin-left: -10px; }
.hugePlus-Grid--smallGutter > .hugePlus-Grid-cell {
padding-left: 10px; }
/*
Modifier: large gutters
*/
.hugePlus-Grid--largeGutter {
margin-left: -30px; }
.hugePlus-Grid--largeGutter > .hugePlus-Grid-cell {
padding-left: 30px; }
/*
Modifier: extra large gutters
*/
.hugePlus-Grid--xLargeGutter {
margin-left: -40px; }
.hugePlus-Grid--xLargeGutter > .hugePlus-Grid-cell {
padding-left: 40px; }
/*
Modifier: normal order of Grid items, as they are structured in your source
*/
.hugePlus-Grid--orderNormal {
direction: ltr;
text-align: left; }
.hugePlus-Grid--orderNormal > .hugePlus-Grid-cell {
direction: ltr; }
/*
Modifier: Reversed Grids allow you to structure your source in the opposite order to
how your rendered layout will appear
*/
.hugePlus-Grid--orderReversed {
direction: rtl;
text-align: left; }
.hugePlus-Grid--orderReversed > .hugePlus-Grid-cell {
direction: ltr; }
/*
No explicit width by default. Rely on combining `Grid-cell` with a dimension
utility or a component class that extends 'grid'.
1. Fundamentals of the non-float grid layout.
2. Keeps content correctly aligned with the grid direction.
3. Controls vertical positioning of units.
4. Make cells full-width by default.
*/
.hugePlus-Grid-cell {
display: inline-block;
/* [1] */
margin: 0;
padding: 0;
text-align: left;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */ } }
.Icon {
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block; }
.ResponsiveContainer {
position: relative; }
.ResponsiveContainer--ratio1 {
padding-top: 56.25%; }
.ResponsiveContainer--ratio2 {
padding-top: 73.68%; }
.ResponsiveContainer--ratio3 {
padding-top: 75%; }
.ResponsiveContainer-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
height: auto;
width: 100%; }
.ResponsiveContainer,
.ResponsiveContainer-content {
overflow: hidden; }
.BodyText-introTitle {
margin-bottom: 20px; }
.BodyText-sideImageMeta {
margin-top: 15px; }
.BodyText-sideBox {
margin-top: 60px; }
.BodyText-sideBox:first-child {
margin-top: 0; }
.BodyText-sideBar {
margin-bottom: 60px; }
.BodyText-media {
margin-bottom: 45px;
margin-top: 45px; }
@media only screen and (min-width: 760px) {
.BodyText-sideBar {
margin-right: 20px;
width: 300px;
margin-bottom: 0; }
.BodyText-sideImage {
border-right: 1px solid; }
.BodyText-sideImageInner {
padding-right: 20px; } }
.Hero-inner {
position: relative;
display: table;
width: 100%; }
.Hero-stickyFooter,
.Hero-inner {
height: 400px; }
.Hero-partnerBar {
padding: 20px 0 0; }
.Hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover; }
.Hero-fill {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
.Hero-content {
position: relative;
text-align: center;
vertical-align: middle;
display: table-row;
height: 100%; }
.Hero-contentInner {
padding-top: 35px;
padding-bottom: 60px;
position: relative;
display: table-cell;
vertical-align: middle; }
.Hero-subTitle {
margin-top: 15px; }
.Hero-videoButton {
background-image: url("/others/about_us/brand/bbc_article01/img/video/video_play_button.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/video/video_play_button.svg");
margin: 50px auto 0;
width: 82px;
height: 82px; }
.no-js .Hero-videoButton {
display: none; }
.Hero-subHeading:before {
border-bottom: 1px solid;
content: '';
display: block;
margin: 35px auto 25px;
width: 100px; }
.Hero-intro-text {
max-width: 800px;
margin: 40px auto 0; }
.Hero-navBar {
margin-bottom: 60px; }
@media only screen and (min-width: 560px) {
.Hero-stickyFooter,
.Hero-inner {
height: 500px; }
.Hero-subTitle {
margin-top: 15px; } }
@media only screen and (min-width: 760px) {
.Hero-stickyFooter,
.Hero-inner {
height: 570px; }
.Hero-inner {
padding-bottom: 58px; }
.Hero-subTitle {
margin-top: 20px; }
.Hero-contentInner {
padding-top: 50px;
padding-bottom: 80px; }
.Hero-intro-text {
margin-top: 50px; }
.bbccom_mpu .Hero-intro-text--mpu {
margin-left: 10px; } }
@media only screen and (min-width: 1024px) {
.Hero-inner {
padding-bottom: 30px; }
.Hero-subTitle {
margin-top: 5px; }
.bbccom_mpu .Hero-intro-text--mpu {
margin-left: 20px; } }
.Hero-scrollTo {
background: url("/others/about_us/brand/bbc_article01/img/mobile_scrollto_bk.png");
display: block;
padding: 20px 0;
position: relative; }
.Hero-scrollTo:after {
content: '';
display: block;
height: 17px;
background-image: url("/others/about_us/brand/bbc_article01/img/arrow_scrollto-png.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/arrow_scrollto-svg.svg");
margin: 0 auto;
position: relative;
width: 35px; }
@media only screen and (min-width: 760px) {
.Hero-scrollTo {
background: none;
padding: 0;
margin-top: 30px; }
.Hero-scrollTo:after {
background-image: url("/others/about_us/brand/bbc_article01/img/scroll_to_arrow_red.png");
background-repeat: no-repeat;
height: 65px;
margin-bottom: -88.5px;
width: 196px;
background-size: 196px 65px; }
.backgroundsize .Hero-scrollTo:after {
background-image: url("/others/about_us/brand/bbc_article01/img/scroll_to_arrow_red@2x.png"); } }
@media only screen and (min-width: 1024px) {
.Hero-scrollTo:after {
margin-bottom: -60.5px; } }
.Island--bottom {
margin-bottom: 60px; }
.Island--top {
margin-top: 60px; }
.PartnerBar-feature {
line-height: 1.2;
font-size: 12px;
font-size: 1.2rem;
font-family: "century_gothicregular", Helvetica, Arial, sans-serif;
white-space: nowrap; }
.PartnerBar-logo {
margin-left: 20px;
display: block; }
@media only screen and (min-width: 560px) {
.PartnerBar-feature {
font-size: 11.5px;
font-size: 1.15rem; } }
.PullQuote-content {
padding-top: 20px;
position: relative; }
.PullQuote-content:before {
content: '\201C';
display: block;
margin-left: -10px;
line-height: .5;
position: absolute;
top: 0; }
.PullQuote-ruleStylish {
margin: 15px 0; }
@media only screen and (min-width: 760px) {
.PullQuote {
border-right: 1px solid; }
.PullQuote-content:before {
margin-left: -15px;
line-height: 0.7; }
.PullQuote-meta {
margin-bottom: 0;
display: table-cell; }
.PullQuote-meta,
.PullQuote-content {
padding-right: 20px; }
.PullQuote-content {
padding-top: 45px;
padding-bottom: 10px; } }
.Rule {
border-style: none none solid;
border-color: inherit;
border-width: 1px;
display: block; }
.RuleStylish {
border-style: none none solid;
border-width: 2px;
width: 60px;
display: block; }
.Card-contentRuleStylish {
margin-top: 35px;
margin-bottom: 30px; }
.Card-imageWrap {
margin-bottom: 25px; }
.Card-buttonArrow {
bottom: 0;
right: 0;
position: absolute;
padding: 12px 20px; }
@media only screen and (min-width: 760px) {
.Card-imageWrap {
margin-bottom: 0; }
.Card-col2 {
padding-bottom: 60px; }
.Card-iconArrowPrimary {
bottom: 0;
left: 50%;
margin-left: 30px;
position: absolute; } }
.TitleGroup {
max-width: 800px;
margin-left: auto;
margin-right: auto; }
.TitleGroup-ruleStylish {
margin-top: 30px;
margin-bottom: 30px; }
.TitleGroup-titleSecondary {
margin-bottom: 30px; }
.Quote {
margin-top: 35px; }
.Quote-content {
padding-top: 40px;
position: relative; }
.Quote-content:before {
content: '\201C';
display: block;
margin-left: -10px;
line-height: .7;
position: absolute;
top: 0; }
.Fill--transparentBlack1 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/10_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.1); }
.Fill--transparentWhite1 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/10_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.1); }
.Fill--transparentBlack2 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/20_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.2); }
.Fill--transparentWhite2 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/20_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.2); }
.Fill--transparentBlack3 {
background: url(/others/about_us/brand/bbc_article01/img/transparent/30_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.3); }
.Fill--transparentWhite3 {
background: url(/others/about_us/brand/bbc_article01/img/transparent/30_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.3); }
.Fill--transparentBlack4 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/40_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.4); }
.Fill--transparentWhite4 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/40_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.4); }
.Fill--transparentBlack5 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/50_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.5); }
.Fill--transparentWhite5 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/50_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.5); }
.Fill--transparentBlack6 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/60_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.6); }
.Fill--transparentWhite6 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/60_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.6); }
.Fill--transparentBlack7 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/70_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.7); }
.Fill--transparentWhite7 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/70_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.7); }
.Fill--transparentBlack8 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/80_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.8); }
.Fill--transparentWhite8 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/80_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.8); }
.Fill--transparentBlack9 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/90_black.png) 0 0 repeat transparent;
background: rgba(0, 0, 0, 0.9); }
.Fill--transparentWhite9 {
background: url(/others/about_us/brand/bbc_article01/../img/transparent/90_white.png) 0 0 repeat transparent;
background: rgba(255, 255, 255, 0.9); }
.IconArrow {
width: 17px;
height: 33px; }
.IconArrow--primary {
background-image: url("/others/about_us/brand/bbc_article01/img/arrow_navigation_red.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/arrow_navigation_red.svg"); }
.IconArrow--secondary {
background-image: url("/others/about_us/brand/bbc_article01/img/arrow_navigation_white.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/arrow_navigation_white.svg"); }
.TopBar {
padding-top: 7px;
padding-bottom: 7px;
color: #fff;
font-family: "century_gothicregular", Helvetica, Arial, sans-serif;
line-height: 1;
position: relative;
z-index: 1; }
.TopBar--black {
background: #000; }
.TopBar-text {
display: none;
padding-right: 15px; }
.TopBar-link:last-child {
padding-right: 0; }
@media only screen and (min-width: 760px) {
.TopBar {
padding-top: 10px;
padding-bottom: 10px; }
.TopBar-text {
display: block;
padding-right: 0; } }
.BottomBar {
padding: 20px 0;
color: #fff;
font-family: "century_gothicregular", Helvetica, Arial, sans-serif;
line-height: 1.5;
font-size: 12px;
font-size: 1.2rem; }
.BottomBar--black {
background: #000; }
.BottomBar-strong {
font-family: "century_gothicbold", Helvetica, Arial, sans-serif; }
.BottomBar-link {
text-decoration: none; }
.LogoVertical--small {
height: 20px;
background-size: auto 20px; }
.LogoVertical--medium {
background-size: auto 30px;
height: 30px; }
.LogoVertical--default.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_logo.svg");
width: 70px; }
.LogoVertical--storyworks.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_sw_logo_white.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_sw_logo_white.svg");
width: 150px;
height: 25px;
background-size: auto 25px; }
.LogoVertical--britain.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_britain_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_britain_logo.svg");
width: 160px; }
.LogoVertical--travel.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_travel_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_travel_logo.svg");
width: 143px; }
.LogoVertical--travel.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_travel_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_travel_logo_footerblock.svg");
width: 215px; }
.LogoVertical--future.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_future_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_future_logo.svg");
width: 146px; }
.LogoVertical--future.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_future_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_future_logo_footerblock.svg");
width: 219px; }
.LogoVertical--capital.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_capital_logo.svg");
width: 151px; }
.LogoVertical--capital.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_capital_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_capital_logo_footerblock.svg");
width: 226px; }
.LogoVertical--autos.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_autos_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_autos_logo.svg");
width: 139px; }
.LogoVertical--autos.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_autos_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_autos_logo_footerblock.svg");
width: 208px; }
.LogoVertical--culture.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_culture_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_culture_logo.svg");
width: 160px; }
.LogoVertical--culture.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_culture_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_culture_logo_footerblock.svg");
width: 237px; }
.LogoVertical--earth.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_earth_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_earth_logo.svg");
width: 131px; }
.LogoVertical--earth.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_earth_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_earth_logo_footerblock.svg");
width: 197px; }
.LogoVertical--sport.LogoVertical--small {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_sport_logo.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-vertical/bbc_sport_logo.svg");
width: 140px; }
.LogoVertical--sport.LogoVertical--medium {
background-image: url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_sport_logo_footerblock.png");
background-image: none, url("/others/about_us/brand/bbc_article01/img/logos-related-content/bbc_sport_logo_footerblock.svg");
width: 208px; }
.CallToAction-ruleTop {
margin-bottom: 30px; }
.CallToAction-ruleBottom {
margin-top: 40px; }
.CallToAction-header {
margin-bottom: 20px; }
.CallToAction-partnerLogo {
padding: 10px;
margin-left: 20px; }
.CallToAction-content {
margin-bottom: 35px; }
.CallToAction-button {
padding: 15px 15px;
border: 1px solid; }
@media only screen and (min-width: 560px) {
.CallToAction-button {
width: 320px; } }
.PartnerLogo {
width: 88px;
height: 31px; }
.RelatedVertical {
padding-top: 30px; }
.RelatedVertical-title {
margin-bottom: 30px; }
.RelatedVertical-verticalLogo {
margin-bottom: 45px; }
.RelatedVertical-card {
margin-bottom: 30px; }
.RelatedVertical-cardImageWrap {
margin-bottom: 15px; }
.RelatedHorizontal {
padding-top: 30px; }
.RelatedHorizontal-header {
margin-bottom: 30px; }
.RelatedHorizontal-verticalLogo {
margin-bottom: 45px;
display: inline-block; }
.RelatedHorizontal-partnerBar {
padding-left: 20px; }
.RelatedHorizontal-card {
margin-bottom: 30px; }
.RelatedHorizontal-cardImageWrap {
margin-bottom: 15px; }
.RelatedHorizontal-layer1 {
z-index: 2; }
.RelatedHorizontal-layer2 {
z-index: 1; }
.RelatedHorizontal-cardLogo {
width: 70px; }
@media only screen and (min-width: 360px) {
.RelatedHorizontal-cardLogo {
width: 100px; } }
@media only screen and (min-width: 560px) {
.RelatedHorizontal-cardLogo {
width: 70px; } }
@media only screen and (min-width: 760px) {
.RelatedHorizontal-cardLogo {
width: 100px; } }
.RelatedSeries {
padding-top: 30px; }
.RelatedSeries-header {
margin-bottom: 20px; }
.RelatedSeries-partnerBar {
padding-left: 20px; }
.RelatedSeries-categoryMeta {
margin-bottom: 5px; }
.RelatedSeries-title {
margin-bottom: 20px; }
.RelatedSeries-intro {
margin-bottom: 30px; }
.RelatedSeries-card {
margin-bottom: 30px; }
.RelatedSeries-cardImageWrap {
margin-bottom: 15px; }
@media only screen and (min-width: 760px) {
.RelatedSeries-categoryMeta {
margin-bottom: 0;
padding-right: 15px; }
.RelatedSeries-categoryTitle {
padding-left: 15px;
margin-bottom: 0;
border-left: 1px solid; } }
.IconSocial {
display: inline-block;
background-repeat: no-repeat;
width: 32px;
height: 32px;
background: url("/others/about_us/brand/bbc_article01/img/social_sprite-png.png");
background: none, url("/others/about_us/brand/bbc_article01/img/social_sprite-svg.svg");
background-size: 192px;
border-radius: 50%;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); }
.cssfilters .IconSocial {
-webkit-filter: opacity(80%);
filter: opacity(80%); }
.no-cssfilters .IconSocial {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
-ms-opacity: 0.8;
-o-opacity: 0.8;
opacity: 0.8; }
.cssfilters .IconSocial {
transition: -webkit-filter .2s;
transition: filter .2s;
transition: filter .2s, -webkit-filter .2s; }
.no-cssfilters .IconSocial {
transition: opacity .2s; }
.cssfilters .IconSocial:hover {
-webkit-filter: opacity(100%);
filter: opacity(100%); }
.no-cssfilters .IconSocial:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1; }
.IconSocial--facebook {
background-position: 0 0; }
.IconSocial--twitter {
background-position: 160px 0; }
.IconSocial--googleplus {
background-position: 96px 0; }
.IconSocial--pintrest {
background-position: 256px 0; }
.Share-title {
margin-bottom: 20px; }
.Share-ruleStylish {
margin-bottom: 40px; }
.Share-rule {
margin-bottom: 30px; }
.Share-item {
margin-left: 25px;
vertical-align: top; }
.Share-item:first-child {
margin-left: 0; }
.ContentPromo {
padding-top: 30px; }
.ContentPromo-intro {
margin: 0 auto 20px;
max-width: 800px; }
.ContentPromo-intro {
margin-bottom: 35px; }
.ContentPromo-introTitle {
margin-bottom: 20px; }
.ContentPromo-card {
margin-bottom: 30px; }
.ContentPromo-cardImageWrap {
margin-bottom: 15px; }
.ContentPromo-introRule {
margin-bottom: 25px; }
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.AdSlot {
display: none; }
.bbccom_leaderboard .AdSlot--leaderboard {
display: block; }
.bbccom_leaderboard .AdSlot--leaderboard .AdSlot-wrapper {
background: #333;
padding: 10px 0 0; }
.bbccom_mpu .AdSlot--mpu {
display: block;
margin-top: 30px;
margin-bottom: 30px;
margin-left: -20px;
margin-right: -20px; }
.bbccom_mpu .AdSlot--mpu .AdSlot-wrapper {
background: #eee;
padding: 10px 0; }
@media only screen and (min-width: 760px) {
.bbccom_mpu .AdSlot--mpu {
margin-bottom: 0; }
.bbccom_mpu .AdSlot--mpu .AdSlot-wrapper {
background: transparent;
margin-left: 0;
margin-right: 0; }
.bbccom_mpu .AdSlot--mpu-hero {
margin-bottom: 0; } }
/*
Generates utils prefixed with $util-align-breakpoints:
.u-alignTop
.largePlus-u-alignTop
.hugePlus-u-alignTop
etc.
*/
/* Regular, non-responsive classes */
/**
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.u-alignBaseline {
vertical-align: baseline; }
.u-alignBottom {
vertical-align: bottom; }
.u-alignMiddle {
vertical-align: middle; }
.u-alignTop {
vertical-align: top; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
/**
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.tinyPlus-u-alignBaseline {
vertical-align: baseline; }
.tinyPlus-u-alignBottom {
vertical-align: bottom; }
.tinyPlus-u-alignMiddle {
vertical-align: middle; }
.tinyPlus-u-alignTop {
vertical-align: top; } }
@media only screen and (min-width: 360px) {
/**
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.smallPlus-u-alignBaseline {
vertical-align: baseline; }
.smallPlus-u-alignBottom {
vertical-align: bottom; }
.smallPlus-u-alignMiddle {
vertical-align: middle; }
.smallPlus-u-alignTop {
vertical-align: top; } }
@media only screen and (min-width: 560px) {
/**
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.mediumPlus-u-alignBaseline {
vertical-align: baseline; }
.mediumPlus-u-alignBottom {
vertical-align: bottom; }
.mediumPlus-u-alignMiddle {
vertical-align: middle; }
.mediumPlus-u-alignTop {
vertical-align: top; } }
@media only screen and (min-width: 760px) {
/**
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.largePlus-u-alignBaseline {
vertical-align: baseline; }
.largePlus-u-alignBottom {
vertical-align: bottom; }
.largePlus-u-alignMiddle {
vertical-align: middle; }
.largePlus-u-alignTop {
vertical-align: top; } }
@media only screen and (min-width: 1024px) {
/**
* Vertical alignment utilities
* Depends on an appropriate `display` value.
*/
.hugePlus-u-alignBaseline {
vertical-align: baseline; }
.hugePlus-u-alignBottom {
vertical-align: bottom; }
.hugePlus-u-alignMiddle {
vertical-align: middle; }
.hugePlus-u-alignTop {
vertical-align: top; } }
/*
Generates utils prefixed with $util-before-breakpoints:
.u-before1of12
.largePlus-u-before1of12
.hugePlus-u-before1of12
etc.
*/
/* Regular, non-responsive classes */
/*
Specify the proportional offset before an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
*/
.u-before1of12 {
margin-left: 8.33333%; }
.u-before1of10 {
margin-left: 10%; }
.u-before1of8 {
margin-left: 12.5%; }
.u-before1of6,
.u-before2of12 {
margin-left: 16.66667%; }
.u-before1of5,
.u-before2of10 {
margin-left: 20%; }
.u-before1of4,
.u-before2of8,
.u-before3of12 {
margin-left: 25%; }
.u-before3of10 {
margin-left: 30%; }
.u-before1of3,
.u-before2of6,
.u-before4of12 {
margin-left: 33.33333%; }
.u-before3of8 {
margin-left: 37.5%; }
.u-before2of5,
.u-before4of10 {
margin-left: 40%; }
.u-before5of12 {
margin-left: 41.66667%; }
.u-before1of2,
.u-before2of4,
.u-before3of6,
.u-before4of8,
.u-before5of10,
.u-before6of12 {
margin-left: 50%; }
.u-before7of12 {
margin-left: 58.33333%; }
.u-before3of5,
.u-before6of10 {
margin-left: 60%; }
.u-before5of8 {
margin-left: 62.5%; }
.u-before2of3,
.u-before4of6,
.u-before8of12 {
margin-left: 66.66667%; }
.u-before7of10 {
margin-left: 70%; }
.u-before3of4,
.u-before6of8,
.u-before9of12 {
margin-left: 75%; }
.u-before4of5,
.u-before8of10 {
margin-left: 80%; }
.u-before5of6,
.u-before10of12 {
margin-left: 83.33333%; }
.u-before7of8 {
margin-left: 87.5%; }
.u-before9of10 {
margin-left: 90%; }
.u-before11of12 {
margin-left: 91.66667%; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
/*
Specify the proportional offset before an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
*/
.tinyPlus-u-before1of12 {
margin-left: 8.33333%; }
.tinyPlus-u-before1of10 {
margin-left: 10%; }
.tinyPlus-u-before1of8 {
margin-left: 12.5%; }
.tinyPlus-u-before1of6,
.tinyPlus-u-before2of12 {
margin-left: 16.66667%; }
.tinyPlus-u-before1of5,
.tinyPlus-u-before2of10 {
margin-left: 20%; }
.tinyPlus-u-before1of4,
.tinyPlus-u-before2of8,
.tinyPlus-u-before3of12 {
margin-left: 25%; }
.tinyPlus-u-before3of10 {
margin-left: 30%; }
.tinyPlus-u-before1of3,
.tinyPlus-u-before2of6,
.tinyPlus-u-before4of12 {
margin-left: 33.33333%; }
.tinyPlus-u-before3of8 {
margin-left: 37.5%; }
.tinyPlus-u-before2of5,
.tinyPlus-u-before4of10 {
margin-left: 40%; }
.tinyPlus-u-before5of12 {
margin-left: 41.66667%; }
.tinyPlus-u-before1of2,
.tinyPlus-u-before2of4,
.tinyPlus-u-before3of6,
.tinyPlus-u-before4of8,
.tinyPlus-u-before5of10,
.tinyPlus-u-before6of12 {
margin-left: 50%; }
.tinyPlus-u-before7of12 {
margin-left: 58.33333%; }
.tinyPlus-u-before3of5,
.tinyPlus-u-before6of10 {
margin-left: 60%; }
.tinyPlus-u-before5of8 {
margin-left: 62.5%; }
.tinyPlus-u-before2of3,
.tinyPlus-u-before4of6,
.tinyPlus-u-before8of12 {
margin-left: 66.66667%; }
.tinyPlus-u-before7of10 {
margin-left: 70%; }
.tinyPlus-u-before3of4,
.tinyPlus-u-before6of8,
.tinyPlus-u-before9of12 {
margin-left: 75%; }
.tinyPlus-u-before4of5,
.tinyPlus-u-before8of10 {
margin-left: 80%; }
.tinyPlus-u-before5of6,
.tinyPlus-u-before10of12 {
margin-left: 83.33333%; }
.tinyPlus-u-before7of8 {
margin-left: 87.5%; }
.tinyPlus-u-before9of10 {
margin-left: 90%; }
.tinyPlus-u-before11of12 {
margin-left: 91.66667%; } }
@media only screen and (min-width: 360px) {
/*
Specify the proportional offset before an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
*/
.smallPlus-u-before1of12 {
margin-left: 8.33333%; }
.smallPlus-u-before1of10 {
margin-left: 10%; }
.smallPlus-u-before1of8 {
margin-left: 12.5%; }
.smallPlus-u-before1of6,
.smallPlus-u-before2of12 {
margin-left: 16.66667%; }
.smallPlus-u-before1of5,
.smallPlus-u-before2of10 {
margin-left: 20%; }
.smallPlus-u-before1of4,
.smallPlus-u-before2of8,
.smallPlus-u-before3of12 {
margin-left: 25%; }
.smallPlus-u-before3of10 {
margin-left: 30%; }
.smallPlus-u-before1of3,
.smallPlus-u-before2of6,
.smallPlus-u-before4of12 {
margin-left: 33.33333%; }
.smallPlus-u-before3of8 {
margin-left: 37.5%; }
.smallPlus-u-before2of5,
.smallPlus-u-before4of10 {
margin-left: 40%; }
.smallPlus-u-before5of12 {
margin-left: 41.66667%; }
.smallPlus-u-before1of2,
.smallPlus-u-before2of4,
.smallPlus-u-before3of6,
.smallPlus-u-before4of8,
.smallPlus-u-before5of10,
.smallPlus-u-before6of12 {
margin-left: 50%; }
.smallPlus-u-before7of12 {
margin-left: 58.33333%; }
.smallPlus-u-before3of5,
.smallPlus-u-before6of10 {
margin-left: 60%; }
.smallPlus-u-before5of8 {
margin-left: 62.5%; }
.smallPlus-u-before2of3,
.smallPlus-u-before4of6,
.smallPlus-u-before8of12 {
margin-left: 66.66667%; }
.smallPlus-u-before7of10 {
margin-left: 70%; }
.smallPlus-u-before3of4,
.smallPlus-u-before6of8,
.smallPlus-u-before9of12 {
margin-left: 75%; }
.smallPlus-u-before4of5,
.smallPlus-u-before8of10 {
margin-left: 80%; }
.smallPlus-u-before5of6,
.smallPlus-u-before10of12 {
margin-left: 83.33333%; }
.smallPlus-u-before7of8 {
margin-left: 87.5%; }
.smallPlus-u-before9of10 {
margin-left: 90%; }
.smallPlus-u-before11of12 {
margin-left: 91.66667%; } }
@media only screen and (min-width: 560px) {
/*
Specify the proportional offset before an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
*/
.mediumPlus-u-before1of12 {
margin-left: 8.33333%; }
.mediumPlus-u-before1of10 {
margin-left: 10%; }
.mediumPlus-u-before1of8 {
margin-left: 12.5%; }
.mediumPlus-u-before1of6,
.mediumPlus-u-before2of12 {
margin-left: 16.66667%; }
.mediumPlus-u-before1of5,
.mediumPlus-u-before2of10 {
margin-left: 20%; }
.mediumPlus-u-before1of4,
.mediumPlus-u-before2of8,
.mediumPlus-u-before3of12 {
margin-left: 25%; }
.mediumPlus-u-before3of10 {
margin-left: 30%; }
.mediumPlus-u-before1of3,
.mediumPlus-u-before2of6,
.mediumPlus-u-before4of12 {
margin-left: 33.33333%; }
.mediumPlus-u-before3of8 {
margin-left: 37.5%; }
.mediumPlus-u-before2of5,
.mediumPlus-u-before4of10 {
margin-left: 40%; }
.mediumPlus-u-before5of12 {
margin-left: 41.66667%; }
.mediumPlus-u-before1of2,
.mediumPlus-u-before2of4,
.mediumPlus-u-before3of6,
.mediumPlus-u-before4of8,
.mediumPlus-u-before5of10,
.mediumPlus-u-before6of12 {
margin-left: 50%; }
.mediumPlus-u-before7of12 {
margin-left: 58.33333%; }
.mediumPlus-u-before3of5,
.mediumPlus-u-before6of10 {
margin-left: 60%; }
.mediumPlus-u-before5of8 {
margin-left: 62.5%; }
.mediumPlus-u-before2of3,
.mediumPlus-u-before4of6,
.mediumPlus-u-before8of12 {
margin-left: 66.66667%; }
.mediumPlus-u-before7of10 {
margin-left: 70%; }
.mediumPlus-u-before3of4,
.mediumPlus-u-before6of8,
.mediumPlus-u-before9of12 {
margin-left: 75%; }
.mediumPlus-u-before4of5,
.mediumPlus-u-before8of10 {
margin-left: 80%; }
.mediumPlus-u-before5of6,
.mediumPlus-u-before10of12 {
margin-left: 83.33333%; }
.mediumPlus-u-before7of8 {
margin-left: 87.5%; }
.mediumPlus-u-before9of10 {
margin-left: 90%; }
.mediumPlus-u-before11of12 {
margin-left: 91.66667%; } }
@media only screen and (min-width: 760px) {
/*
Specify the proportional offset before an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
*/
.largePlus-u-before1of12 {
margin-left: 8.33333%; }
.largePlus-u-before1of10 {
margin-left: 10%; }
.largePlus-u-before1of8 {
margin-left: 12.5%; }
.largePlus-u-before1of6,
.largePlus-u-before2of12 {
margin-left: 16.66667%; }
.largePlus-u-before1of5,
.largePlus-u-before2of10 {
margin-left: 20%; }
.largePlus-u-before1of4,
.largePlus-u-before2of8,
.largePlus-u-before3of12 {
margin-left: 25%; }
.largePlus-u-before3of10 {
margin-left: 30%; }
.largePlus-u-before1of3,
.largePlus-u-before2of6,
.largePlus-u-before4of12 {
margin-left: 33.33333%; }
.largePlus-u-before3of8 {
margin-left: 37.5%; }
.largePlus-u-before2of5,
.largePlus-u-before4of10 {
margin-left: 40%; }
.largePlus-u-before5of12 {
margin-left: 41.66667%; }
.largePlus-u-before1of2,
.largePlus-u-before2of4,
.largePlus-u-before3of6,
.largePlus-u-before4of8,
.largePlus-u-before5of10,
.largePlus-u-before6of12 {
margin-left: 50%; }
.largePlus-u-before7of12 {
margin-left: 58.33333%; }
.largePlus-u-before3of5,
.largePlus-u-before6of10 {
margin-left: 60%; }
.largePlus-u-before5of8 {
margin-left: 62.5%; }
.largePlus-u-before2of3,
.largePlus-u-before4of6,
.largePlus-u-before8of12 {
margin-left: 66.66667%; }
.largePlus-u-before7of10 {
margin-left: 70%; }
.largePlus-u-before3of4,
.largePlus-u-before6of8,
.largePlus-u-before9of12 {
margin-left: 75%; }
.largePlus-u-before4of5,
.largePlus-u-before8of10 {
margin-left: 80%; }
.largePlus-u-before5of6,
.largePlus-u-before10of12 {
margin-left: 83.33333%; }
.largePlus-u-before7of8 {
margin-left: 87.5%; }
.largePlus-u-before9of10 {
margin-left: 90%; }
.largePlus-u-before11of12 {
margin-left: 91.66667%; } }
@media only screen and (min-width: 1024px) {
/*
Specify the proportional offset before an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
*/
.hugePlus-u-before1of12 {
margin-left: 8.33333%; }
.hugePlus-u-before1of10 {
margin-left: 10%; }
.hugePlus-u-before1of8 {
margin-left: 12.5%; }
.hugePlus-u-before1of6,
.hugePlus-u-before2of12 {
margin-left: 16.66667%; }
.hugePlus-u-before1of5,
.hugePlus-u-before2of10 {
margin-left: 20%; }
.hugePlus-u-before1of4,
.hugePlus-u-before2of8,
.hugePlus-u-before3of12 {
margin-left: 25%; }
.hugePlus-u-before3of10 {
margin-left: 30%; }
.hugePlus-u-before1of3,
.hugePlus-u-before2of6,
.hugePlus-u-before4of12 {
margin-left: 33.33333%; }
.hugePlus-u-before3of8 {
margin-left: 37.5%; }
.hugePlus-u-before2of5,
.hugePlus-u-before4of10 {
margin-left: 40%; }
.hugePlus-u-before5of12 {
margin-left: 41.66667%; }
.hugePlus-u-before1of2,
.hugePlus-u-before2of4,
.hugePlus-u-before3of6,
.hugePlus-u-before4of8,
.hugePlus-u-before5of10,
.hugePlus-u-before6of12 {
margin-left: 50%; }
.hugePlus-u-before7of12 {
margin-left: 58.33333%; }
.hugePlus-u-before3of5,
.hugePlus-u-before6of10 {
margin-left: 60%; }
.hugePlus-u-before5of8 {
margin-left: 62.5%; }
.hugePlus-u-before2of3,
.hugePlus-u-before4of6,
.hugePlus-u-before8of12 {
margin-left: 66.66667%; }
.hugePlus-u-before7of10 {
margin-left: 70%; }
.hugePlus-u-before3of4,
.hugePlus-u-before6of8,
.hugePlus-u-before9of12 {
margin-left: 75%; }
.hugePlus-u-before4of5,
.hugePlus-u-before8of10 {
margin-left: 80%; }
.hugePlus-u-before5of6,
.hugePlus-u-before10of12 {
margin-left: 83.33333%; }
.hugePlus-u-before7of8 {
margin-left: 87.5%; }
.hugePlus-u-before9of10 {
margin-left: 90%; }
.hugePlus-u-before11of12 {
margin-left: 91.66667%; } }
/*
Generates utils prefixed with $util-display-breakpoints:
.u-hide
.largePlus-u-hide
.hugePlus-u-hide
etc.
*/
/* Regular, non-responsive classes */
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.u-hide {
display: none; }
.u-block {
display: block; }
.u-table {
display: table; }
.u-tableRow {
display: table-row; }
.u-tableCell {
display: table-cell; }
.u-inline {
display: inline; }
.u-inlineBlock {
display: inline-block; }
/* Hide for .no-js users */
.no-js .no-js-u-hide {
display: none; }
/* Hide for .js users */
.js .js-u-hide {
display: none; }
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.u-screenReaderOnly {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.tinyPlus-u-hide {
display: none; }
.tinyPlus-u-block {
display: block; }
.tinyPlus-u-table {
display: table; }
.tinyPlus-u-tableRow {
display: table-row; }
.tinyPlus-u-tableCell {
display: table-cell; }
.tinyPlus-u-inline {
display: inline; }
.tinyPlus-u-inlineBlock {
display: inline-block; } }
@media only screen and (min-width: 360px) {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.smallPlus-u-hide {
display: none; }
.smallPlus-u-block {
display: block; }
.smallPlus-u-table {
display: table; }
.smallPlus-u-tableRow {
display: table-row; }
.smallPlus-u-tableCell {
display: table-cell; }
.smallPlus-u-inline {
display: inline; }
.smallPlus-u-inlineBlock {
display: inline-block; } }
@media only screen and (min-width: 560px) {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.mediumPlus-u-hide {
display: none; }
.mediumPlus-u-block {
display: block; }
.mediumPlus-u-table {
display: table; }
.mediumPlus-u-tableRow {
display: table-row; }
.mediumPlus-u-tableCell {
display: table-cell; }
.mediumPlus-u-inline {
display: inline; }
.mediumPlus-u-inlineBlock {
display: inline-block; } }
@media only screen and (min-width: 760px) {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.largePlus-u-hide {
display: none; }
.largePlus-u-block {
display: block; }
.largePlus-u-table {
display: table; }
.largePlus-u-tableRow {
display: table-row; }
.largePlus-u-tableCell {
display: table-cell; }
.largePlus-u-inline {
display: inline; }
.largePlus-u-inlineBlock {
display: inline-block; } }
@media only screen and (min-width: 1024px) {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.hugePlus-u-hide {
display: none; }
.hugePlus-u-block {
display: block; }
.hugePlus-u-table {
display: table; }
.hugePlus-u-tableRow {
display: table-row; }
.hugePlus-u-tableCell {
display: table-cell; }
.hugePlus-u-inline {
display: inline; }
.hugePlus-u-inlineBlock {
display: inline-block; } }
.u-imageReplace {
text-indent: -9999px;
direction: ltr; }
/*
Generates utils prefixed with $util-layout-breakpoints:
.u-floatRight
.largePlus-u-floatRight
.hugePlus-u-floatRight
etc.
*/
/* Regular, non-responsive classes */
.u-floatRight {
float: right; }
.u-floatLeft {
float: left; }
.u-floatNone {
float: none; }
.u-clearfix:before,
.u-clearfix:after {
content: " ";
display: table; }
.u-clearfix:after {
clear: both; }
.u-centerBlock {
margin-left: auto;
margin-right: auto; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
.tinyPlus-u-floatRight {
float: right; }
.tinyPlus-u-floatLeft {
float: left; }
.tinyPlus-u-floatNone {
float: none; }
.tinyPlus-u-clearfix:before,
.tinyPlus-u-clearfix:after {
content: " ";
display: table; }
.tinyPlus-u-clearfix:after {
clear: both; }
.tinyPlus-u-centerBlock {
margin-left: auto;
margin-right: auto; } }
@media only screen and (min-width: 360px) {
.smallPlus-u-floatRight {
float: right; }
.smallPlus-u-floatLeft {
float: left; }
.smallPlus-u-floatNone {
float: none; }
.smallPlus-u-clearfix:before,
.smallPlus-u-clearfix:after {
content: " ";
display: table; }
.smallPlus-u-clearfix:after {
clear: both; }
.smallPlus-u-centerBlock {
margin-left: auto;
margin-right: auto; } }
@media only screen and (min-width: 560px) {
.mediumPlus-u-floatRight {
float: right; }
.mediumPlus-u-floatLeft {
float: left; }
.mediumPlus-u-floatNone {
float: none; }
.mediumPlus-u-clearfix:before,
.mediumPlus-u-clearfix:after {
content: " ";
display: table; }
.mediumPlus-u-clearfix:after {
clear: both; }
.mediumPlus-u-centerBlock {
margin-left: auto;
margin-right: auto; } }
@media only screen and (min-width: 760px) {
.largePlus-u-floatRight {
float: right; }
.largePlus-u-floatLeft {
float: left; }
.largePlus-u-floatNone {
float: none; }
.largePlus-u-clearfix:before,
.largePlus-u-clearfix:after {
content: " ";
display: table; }
.largePlus-u-clearfix:after {
clear: both; }
.largePlus-u-centerBlock {
margin-left: auto;
margin-right: auto; } }
@media only screen and (min-width: 1024px) {
.hugePlus-u-floatRight {
float: right; }
.hugePlus-u-floatLeft {
float: left; }
.hugePlus-u-floatNone {
float: none; }
.hugePlus-u-clearfix:before,
.hugePlus-u-clearfix:after {
content: " ";
display: table; }
.hugePlus-u-clearfix:after {
clear: both; }
.hugePlus-u-centerBlock {
margin-left: auto;
margin-right: auto; } }
/*
Generates utils prefixed with $util-margin-breakpoints:
.u-noMarginBottom
.largePlus-u-noMarginBottom
.hugePlus-u-noMarginBottom
etc.
*/
/* Regular, non-responsive classes */
.u-noMarginBottom {
margin-bottom: 0; }
.u-noMarginTop {
margin-top: 0; }
.u-noMarginLeft {
margin-left: 0; }
.u-noMarginRight {
margin-right: 0; }
.u-noMarginVertical {
margin-top: 0;
margin-bottom: 0; }
.u-noMarginHorizontal {
margin-left: 0;
margin-right: 0; }
.u-noMargin {
margin: 0; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
.tinyPlus-u-noMarginBottom {
margin-bottom: 0; }
.tinyPlus-u-noMarginTop {
margin-top: 0; }
.tinyPlus-u-noMarginLeft {
margin-left: 0; }
.tinyPlus-u-noMarginRight {
margin-right: 0; }
.tinyPlus-u-noMarginVertical {
margin-top: 0;
margin-bottom: 0; }
.tinyPlus-u-noMarginHorizontal {
margin-left: 0;
margin-right: 0; }
.tinyPlus-u-noMargin {
margin: 0; } }
@media only screen and (min-width: 360px) {
.smallPlus-u-noMarginBottom {
margin-bottom: 0; }
.smallPlus-u-noMarginTop {
margin-top: 0; }
.smallPlus-u-noMarginLeft {
margin-left: 0; }
.smallPlus-u-noMarginRight {
margin-right: 0; }
.smallPlus-u-noMarginVertical {
margin-top: 0;
margin-bottom: 0; }
.smallPlus-u-noMarginHorizontal {
margin-left: 0;
margin-right: 0; }
.smallPlus-u-noMargin {
margin: 0; } }
@media only screen and (min-width: 560px) {
.mediumPlus-u-noMarginBottom {
margin-bottom: 0; }
.mediumPlus-u-noMarginTop {
margin-top: 0; }
.mediumPlus-u-noMarginLeft {
margin-left: 0; }
.mediumPlus-u-noMarginRight {
margin-right: 0; }
.mediumPlus-u-noMarginVertical {
margin-top: 0;
margin-bottom: 0; }
.mediumPlus-u-noMarginHorizontal {
margin-left: 0;
margin-right: 0; }
.mediumPlus-u-noMargin {
margin: 0; } }
@media only screen and (min-width: 760px) {
.largePlus-u-noMarginBottom {
margin-bottom: 0; }
.largePlus-u-noMarginTop {
margin-top: 0; }
.largePlus-u-noMarginLeft {
margin-left: 0; }
.largePlus-u-noMarginRight {
margin-right: 0; }
.largePlus-u-noMarginVertical {
margin-top: 0;
margin-bottom: 0; }
.largePlus-u-noMarginHorizontal {
margin-left: 0;
margin-right: 0; }
.largePlus-u-noMargin {
margin: 0; } }
@media only screen and (min-width: 1024px) {
.hugePlus-u-noMarginBottom {
margin-bottom: 0; }
.hugePlus-u-noMarginTop {
margin-top: 0; }
.hugePlus-u-noMarginLeft {
margin-left: 0; }
.hugePlus-u-noMarginRight {
margin-right: 0; }
.hugePlus-u-noMarginVertical {
margin-top: 0;
margin-bottom: 0; }
.hugePlus-u-noMarginHorizontal {
margin-left: 0;
margin-right: 0; }
.hugePlus-u-noMargin {
margin: 0; } }
/*
Generates utils prefixed with $util-padding-breakpoints:
.u-noPaddingBottom
.largePlus-u-noPaddingBottom
.hugePlus-u-noPaddingBottom
etc.
*/
/* Regular, non-responsive classes */
.u-noPaddingBottom {
padding-bottom: 0; }
.u-noPaddingTop {
padding-top: 0; }
.u-noPaddingLeft {
padding-left: 0; }
.u-noPaddingRight {
padding-right: 0; }
.u-noPaddingVertical {
padding-top: 0;
padding-bottom: 0; }
.u-noPaddingHorizontal {
padding-left: 0;
padding-right: 0; }
.u-noPadding {
padding: 0; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
.tinyPlus-u-noPaddingBottom {
padding-bottom: 0; }
.tinyPlus-u-noPaddingTop {
padding-top: 0; }
.tinyPlus-u-noPaddingLeft {
padding-left: 0; }
.tinyPlus-u-noPaddingRight {
padding-right: 0; }
.tinyPlus-u-noPaddingVertical {
padding-top: 0;
padding-bottom: 0; }
.tinyPlus-u-noPaddingHorizontal {
padding-left: 0;
padding-right: 0; }
.tinyPlus-u-noPadding {
padding: 0; } }
@media only screen and (min-width: 360px) {
.smallPlus-u-noPaddingBottom {
padding-bottom: 0; }
.smallPlus-u-noPaddingTop {
padding-top: 0; }
.smallPlus-u-noPaddingLeft {
padding-left: 0; }
.smallPlus-u-noPaddingRight {
padding-right: 0; }
.smallPlus-u-noPaddingVertical {
padding-top: 0;
padding-bottom: 0; }
.smallPlus-u-noPaddingHorizontal {
padding-left: 0;
padding-right: 0; }
.smallPlus-u-noPadding {
padding: 0; } }
@media only screen and (min-width: 560px) {
.mediumPlus-u-noPaddingBottom {
padding-bottom: 0; }
.mediumPlus-u-noPaddingTop {
padding-top: 0; }
.mediumPlus-u-noPaddingLeft {
padding-left: 0; }
.mediumPlus-u-noPaddingRight {
padding-right: 0; }
.mediumPlus-u-noPaddingVertical {
padding-top: 0;
padding-bottom: 0; }
.mediumPlus-u-noPaddingHorizontal {
padding-left: 0;
padding-right: 0; }
.mediumPlus-u-noPadding {
padding: 0; } }
@media only screen and (min-width: 760px) {
.largePlus-u-noPaddingBottom {
padding-bottom: 0; }
.largePlus-u-noPaddingTop {
padding-top: 0; }
.largePlus-u-noPaddingLeft {
padding-left: 0; }
.largePlus-u-noPaddingRight {
padding-right: 0; }
.largePlus-u-noPaddingVertical {
padding-top: 0;
padding-bottom: 0; }
.largePlus-u-noPaddingHorizontal {
padding-left: 0;
padding-right: 0; }
.largePlus-u-noPadding {
padding: 0; } }
@media only screen and (min-width: 1024px) {
.hugePlus-u-noPaddingBottom {
padding-bottom: 0; }
.hugePlus-u-noPaddingTop {
padding-top: 0; }
.hugePlus-u-noPaddingLeft {
padding-left: 0; }
.hugePlus-u-noPaddingRight {
padding-right: 0; }
.hugePlus-u-noPaddingVertical {
padding-top: 0;
padding-bottom: 0; }
.hugePlus-u-noPaddingHorizontal {
padding-left: 0;
padding-right: 0; }
.hugePlus-u-noPadding {
padding: 0; } }
/*
Generates utils prefixed with $util-position-breakpoints:
.u-posRelative
.largePlus-u-posRelative
.hugePlus-u-posRelative
etc.
*/
/*
Regular, non-responsive classes
*/
.u-posAbsolute {
position: absolute; }
/*
Pins to all corners by default. But when a width and/or height are
provided, the element will be centered in its nearest relatively-positioned
ancestor.
*/
.u-posAbsoluteCenter {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
/*
1. Make sure fixed elements are promoted into a new layer, for performance
reasons.
*/
.u-posFixed {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* [1] */ }
.u-posRelative {
position: relative; }
.u-posStatic {
position: static; }
/*
Responsive classes
*/
@media only screen and (min-width: 0px) {
.tinyPlus-u-posAbsolute {
position: absolute; }
/*
Pins to all corners by default. But when a width and/or height are
provided, the element will be centered in its nearest relatively-positioned
ancestor.
*/
.tinyPlus-u-posAbsoluteCenter {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
/*
1. Make sure fixed elements are promoted into a new layer, for performance
reasons.
*/
.tinyPlus-u-posFixed {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* [1] */ }
.tinyPlus-u-posRelative {
position: relative; }
.tinyPlus-u-posStatic {
position: static; } }
@media only screen and (min-width: 360px) {
.smallPlus-u-posAbsolute {
position: absolute; }
/*
Pins to all corners by default. But when a width and/or height are
provided, the element will be centered in its nearest relatively-positioned
ancestor.
*/
.smallPlus-u-posAbsoluteCenter {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
/*
1. Make sure fixed elements are promoted into a new layer, for performance
reasons.
*/
.smallPlus-u-posFixed {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* [1] */ }
.smallPlus-u-posRelative {
position: relative; }
.smallPlus-u-posStatic {
position: static; } }
@media only screen and (min-width: 560px) {
.mediumPlus-u-posAbsolute {
position: absolute; }
/*
Pins to all corners by default. But when a width and/or height are
provided, the element will be centered in its nearest relatively-positioned
ancestor.
*/
.mediumPlus-u-posAbsoluteCenter {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
/*
1. Make sure fixed elements are promoted into a new layer, for performance
reasons.
*/
.mediumPlus-u-posFixed {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* [1] */ }
.mediumPlus-u-posRelative {
position: relative; }
.mediumPlus-u-posStatic {
position: static; } }
@media only screen and (min-width: 760px) {
.largePlus-u-posAbsolute {
position: absolute; }
/*
Pins to all corners by default. But when a width and/or height are
provided, the element will be centered in its nearest relatively-positioned
ancestor.
*/
.largePlus-u-posAbsoluteCenter {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
/*
1. Make sure fixed elements are promoted into a new layer, for performance
reasons.
*/
.largePlus-u-posFixed {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* [1] */ }
.largePlus-u-posRelative {
position: relative; }
.largePlus-u-posStatic {
position: static; } }
@media only screen and (min-width: 1024px) {
.hugePlus-u-posAbsolute {
position: absolute; }
/*
Pins to all corners by default. But when a width and/or height are
provided, the element will be centered in its nearest relatively-positioned
ancestor.
*/
.hugePlus-u-posAbsoluteCenter {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
/*
1. Make sure fixed elements are promoted into a new layer, for performance
reasons.
*/
.hugePlus-u-posFixed {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* [1] */ }
.hugePlus-u-posRelative {
position: relative; }
.hugePlus-u-posStatic {
position: static; } }
/*
Generates utils prefixed with $util-size-breakpoints:
.u-size1of12
.largePlus-u-size1of12
.hugePlus-u-size1of12
etc.
*/
/* Regular, non-responsive classes */
/*
Make an element shrink wrap its content.
*/
.u-sizeFit,
.u-sizeFitAlt {
display: block;
float: left;
width: auto; }
.u-sizeFitAlt {
float: right; }
/*
Make an element fill the remaining space.
N.B. This will hide overflow.
*/
.u-sizeFill {
display: block;
overflow: hidden;
width: auto; }
/**
An alternative method to make an element fill the remaining space.
N.B. Do not use if child elements might be wider than the remaining space.
In Chrome, Safari, and Firefox it results in undesired layout.
*/
.u-sizeFillAlt {
display: table-cell;
max-width: 100%;
width: 10000px; }
/*
Make an element the width of its parent.
*/
.u-sizeFull {
display: block;
width: 100%; }
/* Proportional widths */
/*
Specify the proportional width of an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
*/
.u-size1of12 {
width: 8.33333%; }
.u-size1of10 {
width: 10%; }
.u-size1of8 {
width: 12.5%; }
.u-size1of6,
.u-size2of12 {
width: 16.66667%; }
.u-size1of5,
.u-size2of10 {
width: 20%; }
.u-size1of4,
.u-size2of8,
.u-size3of12 {
width: 25%; }
.u-size3of10 {
width: 30%; }
.u-size1of3,
.u-size2of6,
.u-size4of12 {
width: 33.33333%; }
.u-size3of8 {
width: 37.5%; }
.u-size2of5,
.u-size4of10 {
width: 40%; }
.u-size5of12 {
width: 41.66667%; }
.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
width: 50%; }
.u-size7of12 {
width: 58.33333%; }
.u-size3of5,
.u-size6of10 {
width: 60%; }
.u-size5of8 {
width: 62.5%; }
.u-size2of3,
.u-size4of6,
.u-size8of12 {
width: 66.66667%; }
.u-size7of10 {
width: 70%; }
.u-size3of4,
.u-size6of8,
.u-size9of12 {
width: 75%; }
.u-size4of5,
.u-size8of10 {
width: 80%; }
.u-size5of6,
.u-size10of12 {
width: 83.33333%; }
.u-size7of8 {
width: 87.5%; }
.u-size9of10 {
width: 90%; }
.u-size11of12 {
width: 91.66667%; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
/*
Make an element shrink wrap its content.
*/
.tinyPlus-u-sizeFit,
.tinyPlus-u-sizeFitAlt {
display: block;
float: left;
width: auto; }
.tinyPlus-u-sizeFitAlt {
float: right; }
/*
Make an element fill the remaining space.
N.B. This will hide overflow.
*/
.tinyPlus-u-sizeFill {
display: block;
overflow: hidden;
width: auto; }
/**
An alternative method to make an element fill the remaining space.
N.B. Do not use if child elements might be wider than the remaining space.
In Chrome, Safari, and Firefox it results in undesired layout.
*/
.tinyPlus-u-sizeFillAlt {
display: table-cell;
max-width: 100%;
width: 10000px; }
/*
Make an element the width of its parent.
*/
.tinyPlus-u-sizeFull {
display: block;
width: 100%; }
/* Proportional widths */
/*
Specify the proportional width of an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
*/
.tinyPlus-u-size1of12 {
width: 8.33333%; }
.tinyPlus-u-size1of10 {
width: 10%; }
.tinyPlus-u-size1of8 {
width: 12.5%; }
.tinyPlus-u-size1of6,
.tinyPlus-u-size2of12 {
width: 16.66667%; }
.tinyPlus-u-size1of5,
.tinyPlus-u-size2of10 {
width: 20%; }
.tinyPlus-u-size1of4,
.tinyPlus-u-size2of8,
.tinyPlus-u-size3of12 {
width: 25%; }
.tinyPlus-u-size3of10 {
width: 30%; }
.tinyPlus-u-size1of3,
.tinyPlus-u-size2of6,
.tinyPlus-u-size4of12 {
width: 33.33333%; }
.tinyPlus-u-size3of8 {
width: 37.5%; }
.tinyPlus-u-size2of5,
.tinyPlus-u-size4of10 {
width: 40%; }
.tinyPlus-u-size5of12 {
width: 41.66667%; }
.tinyPlus-u-size1of2,
.tinyPlus-u-size2of4,
.tinyPlus-u-size3of6,
.tinyPlus-u-size4of8,
.tinyPlus-u-size5of10,
.tinyPlus-u-size6of12 {
width: 50%; }
.tinyPlus-u-size7of12 {
width: 58.33333%; }
.tinyPlus-u-size3of5,
.tinyPlus-u-size6of10 {
width: 60%; }
.tinyPlus-u-size5of8 {
width: 62.5%; }
.tinyPlus-u-size2of3,
.tinyPlus-u-size4of6,
.tinyPlus-u-size8of12 {
width: 66.66667%; }
.tinyPlus-u-size7of10 {
width: 70%; }
.tinyPlus-u-size3of4,
.tinyPlus-u-size6of8,
.tinyPlus-u-size9of12 {
width: 75%; }
.tinyPlus-u-size4of5,
.tinyPlus-u-size8of10 {
width: 80%; }
.tinyPlus-u-size5of6,
.tinyPlus-u-size10of12 {
width: 83.33333%; }
.tinyPlus-u-size7of8 {
width: 87.5%; }
.tinyPlus-u-size9of10 {
width: 90%; }
.tinyPlus-u-size11of12 {
width: 91.66667%; } }
@media only screen and (min-width: 360px) {
/*
Make an element shrink wrap its content.
*/
.smallPlus-u-sizeFit,
.smallPlus-u-sizeFitAlt {
display: block;
float: left;
width: auto; }
.smallPlus-u-sizeFitAlt {
float: right; }
/*
Make an element fill the remaining space.
N.B. This will hide overflow.
*/
.smallPlus-u-sizeFill {
display: block;
overflow: hidden;
width: auto; }
/**
An alternative method to make an element fill the remaining space.
N.B. Do not use if child elements might be wider than the remaining space.
In Chrome, Safari, and Firefox it results in undesired layout.
*/
.smallPlus-u-sizeFillAlt {
display: table-cell;
max-width: 100%;
width: 10000px; }
/*
Make an element the width of its parent.
*/
.smallPlus-u-sizeFull {
display: block;
width: 100%; }
/* Proportional widths */
/*
Specify the proportional width of an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
*/
.smallPlus-u-size1of12 {
width: 8.33333%; }
.smallPlus-u-size1of10 {
width: 10%; }
.smallPlus-u-size1of8 {
width: 12.5%; }
.smallPlus-u-size1of6,
.smallPlus-u-size2of12 {
width: 16.66667%; }
.smallPlus-u-size1of5,
.smallPlus-u-size2of10 {
width: 20%; }
.smallPlus-u-size1of4,
.smallPlus-u-size2of8,
.smallPlus-u-size3of12 {
width: 25%; }
.smallPlus-u-size3of10 {
width: 30%; }
.smallPlus-u-size1of3,
.smallPlus-u-size2of6,
.smallPlus-u-size4of12 {
width: 33.33333%; }
.smallPlus-u-size3of8 {
width: 37.5%; }
.smallPlus-u-size2of5,
.smallPlus-u-size4of10 {
width: 40%; }
.smallPlus-u-size5of12 {
width: 41.66667%; }
.smallPlus-u-size1of2,
.smallPlus-u-size2of4,
.smallPlus-u-size3of6,
.smallPlus-u-size4of8,
.smallPlus-u-size5of10,
.smallPlus-u-size6of12 {
width: 50%; }
.smallPlus-u-size7of12 {
width: 58.33333%; }
.smallPlus-u-size3of5,
.smallPlus-u-size6of10 {
width: 60%; }
.smallPlus-u-size5of8 {
width: 62.5%; }
.smallPlus-u-size2of3,
.smallPlus-u-size4of6,
.smallPlus-u-size8of12 {
width: 66.66667%; }
.smallPlus-u-size7of10 {
width: 70%; }
.smallPlus-u-size3of4,
.smallPlus-u-size6of8,
.smallPlus-u-size9of12 {
width: 75%; }
.smallPlus-u-size4of5,
.smallPlus-u-size8of10 {
width: 80%; }
.smallPlus-u-size5of6,
.smallPlus-u-size10of12 {
width: 83.33333%; }
.smallPlus-u-size7of8 {
width: 87.5%; }
.smallPlus-u-size9of10 {
width: 90%; }
.smallPlus-u-size11of12 {
width: 91.66667%; } }
@media only screen and (min-width: 560px) {
/*
Make an element shrink wrap its content.
*/
.mediumPlus-u-sizeFit,
.mediumPlus-u-sizeFitAlt {
display: block;
float: left;
width: auto; }
.mediumPlus-u-sizeFitAlt {
float: right; }
/*
Make an element fill the remaining space.
N.B. This will hide overflow.
*/
.mediumPlus-u-sizeFill {
display: block;
overflow: hidden;
width: auto; }
/**
An alternative method to make an element fill the remaining space.
N.B. Do not use if child elements might be wider than the remaining space.
In Chrome, Safari, and Firefox it results in undesired layout.
*/
.mediumPlus-u-sizeFillAlt {
display: table-cell;
max-width: 100%;
width: 10000px; }
/*
Make an element the width of its parent.
*/
.mediumPlus-u-sizeFull {
display: block;
width: 100%; }
/* Proportional widths */
/*
Specify the proportional width of an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
*/
.mediumPlus-u-size1of12 {
width: 8.33333%; }
.mediumPlus-u-size1of10 {
width: 10%; }
.mediumPlus-u-size1of8 {
width: 12.5%; }
.mediumPlus-u-size1of6,
.mediumPlus-u-size2of12 {
width: 16.66667%; }
.mediumPlus-u-size1of5,
.mediumPlus-u-size2of10 {
width: 20%; }
.mediumPlus-u-size1of4,
.mediumPlus-u-size2of8,
.mediumPlus-u-size3of12 {
width: 25%; }
.mediumPlus-u-size3of10 {
width: 30%; }
.mediumPlus-u-size1of3,
.mediumPlus-u-size2of6,
.mediumPlus-u-size4of12 {
width: 33.33333%; }
.mediumPlus-u-size3of8 {
width: 37.5%; }
.mediumPlus-u-size2of5,
.mediumPlus-u-size4of10 {
width: 40%; }
.mediumPlus-u-size5of12 {
width: 41.66667%; }
.mediumPlus-u-size1of2,
.mediumPlus-u-size2of4,
.mediumPlus-u-size3of6,
.mediumPlus-u-size4of8,
.mediumPlus-u-size5of10,
.mediumPlus-u-size6of12 {
width: 50%; }
.mediumPlus-u-size7of12 {
width: 58.33333%; }
.mediumPlus-u-size3of5,
.mediumPlus-u-size6of10 {
width: 60%; }
.mediumPlus-u-size5of8 {
width: 62.5%; }
.mediumPlus-u-size2of3,
.mediumPlus-u-size4of6,
.mediumPlus-u-size8of12 {
width: 66.66667%; }
.mediumPlus-u-size7of10 {
width: 70%; }
.mediumPlus-u-size3of4,
.mediumPlus-u-size6of8,
.mediumPlus-u-size9of12 {
width: 75%; }
.mediumPlus-u-size4of5,
.mediumPlus-u-size8of10 {
width: 80%; }
.mediumPlus-u-size5of6,
.mediumPlus-u-size10of12 {
width: 83.33333%; }
.mediumPlus-u-size7of8 {
width: 87.5%; }
.mediumPlus-u-size9of10 {
width: 90%; }
.mediumPlus-u-size11of12 {
width: 91.66667%; } }
@media only screen and (min-width: 760px) {
/*
Make an element shrink wrap its content.
*/
.largePlus-u-sizeFit,
.largePlus-u-sizeFitAlt {
display: block;
float: left;
width: auto; }
.largePlus-u-sizeFitAlt {
float: right; }
/*
Make an element fill the remaining space.
N.B. This will hide overflow.
*/
.largePlus-u-sizeFill {
display: block;
overflow: hidden;
width: auto; }
/**
An alternative method to make an element fill the remaining space.
N.B. Do not use if child elements might be wider than the remaining space.
In Chrome, Safari, and Firefox it results in undesired layout.
*/
.largePlus-u-sizeFillAlt {
display: table-cell;
max-width: 100%;
width: 10000px; }
/*
Make an element the width of its parent.
*/
.largePlus-u-sizeFull {
display: block;
width: 100%; }
/* Proportional widths */
/*
Specify the proportional width of an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
*/
.largePlus-u-size1of12 {
width: 8.33333%; }
.largePlus-u-size1of10 {
width: 10%; }
.largePlus-u-size1of8 {
width: 12.5%; }
.largePlus-u-size1of6,
.largePlus-u-size2of12 {
width: 16.66667%; }
.largePlus-u-size1of5,
.largePlus-u-size2of10 {
width: 20%; }
.largePlus-u-size1of4,
.largePlus-u-size2of8,
.largePlus-u-size3of12 {
width: 25%; }
.largePlus-u-size3of10 {
width: 30%; }
.largePlus-u-size1of3,
.largePlus-u-size2of6,
.largePlus-u-size4of12 {
width: 33.33333%; }
.largePlus-u-size3of8 {
width: 37.5%; }
.largePlus-u-size2of5,
.largePlus-u-size4of10 {
width: 40%; }
.largePlus-u-size5of12 {
width: 41.66667%; }
.largePlus-u-size1of2,
.largePlus-u-size2of4,
.largePlus-u-size3of6,
.largePlus-u-size4of8,
.largePlus-u-size5of10,
.largePlus-u-size6of12 {
width: 50%; }
.largePlus-u-size7of12 {
width: 58.33333%; }
.largePlus-u-size3of5,
.largePlus-u-size6of10 {
width: 60%; }
.largePlus-u-size5of8 {
width: 62.5%; }
.largePlus-u-size2of3,
.largePlus-u-size4of6,
.largePlus-u-size8of12 {
width: 66.66667%; }
.largePlus-u-size7of10 {
width: 70%; }
.largePlus-u-size3of4,
.largePlus-u-size6of8,
.largePlus-u-size9of12 {
width: 75%; }
.largePlus-u-size4of5,
.largePlus-u-size8of10 {
width: 80%; }
.largePlus-u-size5of6,
.largePlus-u-size10of12 {
width: 83.33333%; }
.largePlus-u-size7of8 {
width: 87.5%; }
.largePlus-u-size9of10 {
width: 90%; }
.largePlus-u-size11of12 {
width: 91.66667%; } }
@media only screen and (min-width: 1024px) {
/*
Make an element shrink wrap its content.
*/
.hugePlus-u-sizeFit,
.hugePlus-u-sizeFitAlt {
display: block;
float: left;
width: auto; }
.hugePlus-u-sizeFitAlt {
float: right; }
/*
Make an element fill the remaining space.
N.B. This will hide overflow.
*/
.hugePlus-u-sizeFill {
display: block;
overflow: hidden;
width: auto; }
/**
An alternative method to make an element fill the remaining space.
N.B. Do not use if child elements might be wider than the remaining space.
In Chrome, Safari, and Firefox it results in undesired layout.
*/
.hugePlus-u-sizeFillAlt {
display: table-cell;
max-width: 100%;
width: 10000px; }
/*
Make an element the width of its parent.
*/
.hugePlus-u-sizeFull {
display: block;
width: 100%; }
/* Proportional widths */
/*
Specify the proportional width of an object.
Intentional redundancy build into each set of unit classes.
Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
*/
.hugePlus-u-size1of12 {
width: 8.33333%; }
.hugePlus-u-size1of10 {
width: 10%; }
.hugePlus-u-size1of8 {
width: 12.5%; }
.hugePlus-u-size1of6,
.hugePlus-u-size2of12 {
width: 16.66667%; }
.hugePlus-u-size1of5,
.hugePlus-u-size2of10 {
width: 20%; }
.hugePlus-u-size1of4,
.hugePlus-u-size2of8,
.hugePlus-u-size3of12 {
width: 25%; }
.hugePlus-u-size3of10 {
width: 30%; }
.hugePlus-u-size1of3,
.hugePlus-u-size2of6,
.hugePlus-u-size4of12 {
width: 33.33333%; }
.hugePlus-u-size3of8 {
width: 37.5%; }
.hugePlus-u-size2of5,
.hugePlus-u-size4of10 {
width: 40%; }
.hugePlus-u-size5of12 {
width: 41.66667%; }
.hugePlus-u-size1of2,
.hugePlus-u-size2of4,
.hugePlus-u-size3of6,
.hugePlus-u-size4of8,
.hugePlus-u-size5of10,
.hugePlus-u-size6of12 {
width: 50%; }
.hugePlus-u-size7of12 {
width: 58.33333%; }
.hugePlus-u-size3of5,
.hugePlus-u-size6of10 {
width: 60%; }
.hugePlus-u-size5of8 {
width: 62.5%; }
.hugePlus-u-size2of3,
.hugePlus-u-size4of6,
.hugePlus-u-size8of12 {
width: 66.66667%; }
.hugePlus-u-size7of10 {
width: 70%; }
.hugePlus-u-size3of4,
.hugePlus-u-size6of8,
.hugePlus-u-size9of12 {
width: 75%; }
.hugePlus-u-size4of5,
.hugePlus-u-size8of10 {
width: 80%; }
.hugePlus-u-size5of6,
.hugePlus-u-size10of12 {
width: 83.33333%; }
.hugePlus-u-size7of8 {
width: 87.5%; }
.hugePlus-u-size9of10 {
width: 90%; }
.hugePlus-u-size11of12 {
width: 91.66667%; } }
/*
Generates utils prefixed with $util-text-breakpoints:
.u-textUppercase
.largePlus-u-textUppercase
.hugePlus-u-textUppercase
etc.
*/
/* Regular, non-responsive classes */
.u-textUppercase {
text-transform: uppercase; }
/*
Word breaking
Break strings when their length exceeds the width of their container.
*/
.u-textBreak {
word-wrap: break-word; }
/*
Horizontal text alignment
*/
.u-textCenter {
text-align: center; }
.u-textLeft {
text-align: left; }
.u-textRight {
text-align: right; }
/*
Inherit the ancestor's text color.
*/
.u-textInheritColor {
color: inherit; }
/*
Enables font kerning in all browsers.
http://blog.typekit.com/2014/02/05/kerning-on-the-web/
1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
2. Chrome (not Windows), Firefox, IE 10+
3. Safari 7 and future browsers
*/
.u-textKern {
text-rendering: optimizeLegibility;
/* 1 */
font-feature-settings: "kern" 1;
/* 2 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 3 */ }
/*
Prevent whitespace wrapping
*/
.u-textNoWrap {
white-space: nowrap; }
/*
Text truncation
Prevent text from wrapping onto multiple lines, and truncate with an
ellipsis.
1. Ensure that the node has a maximum width after which truncation can
occur.
2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
nodes.
*/
.u-textTruncate {
max-width: 100%;
/* 1 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
/* 2 */ }
/* Set on containers to override default link color to container's color */
.u-colorInherit a, .u-colorInherit a:hover, .u-colorInherit a:focus, .u-colorInherit a:visited,
.u-colorInherit p,
.u-colorInherit hr {
color: inherit; }
/* Responsive classes */
@media only screen and (min-width: 0px) {
.tinyPlus-u-textUppercase {
text-transform: uppercase; }
/*
Word breaking
Break strings when their length exceeds the width of their container.
*/
.tinyPlus-u-textBreak {
word-wrap: break-word; }
/*
Horizontal text alignment
*/
.tinyPlus-u-textCenter {
text-align: center; }
.tinyPlus-u-textLeft {
text-align: left; }
.tinyPlus-u-textRight {
text-align: right; }
/*
Inherit the ancestor's text color.
*/
.tinyPlus-u-textInheritColor {
color: inherit; }
/*
Enables font kerning in all browsers.
http://blog.typekit.com/2014/02/05/kerning-on-the-web/
1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
2. Chrome (not Windows), Firefox, IE 10+
3. Safari 7 and future browsers
*/
.tinyPlus-u-textKern {
text-rendering: optimizeLegibility;
/* 1 */
font-feature-settings: "kern" 1;
/* 2 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 3 */ }
/*
Prevent whitespace wrapping
*/
.tinyPlus-u-textNoWrap {
white-space: nowrap; }
/*
Text truncation
Prevent text from wrapping onto multiple lines, and truncate with an
ellipsis.
1. Ensure that the node has a maximum width after which truncation can
occur.
2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
nodes.
*/
.tinyPlus-u-textTruncate {
max-width: 100%;
/* 1 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
/* 2 */ } }
@media only screen and (min-width: 360px) {
.smallPlus-u-textUppercase {
text-transform: uppercase; }
/*
Word breaking
Break strings when their length exceeds the width of their container.
*/
.smallPlus-u-textBreak {
word-wrap: break-word; }
/*
Horizontal text alignment
*/
.smallPlus-u-textCenter {
text-align: center; }
.smallPlus-u-textLeft {
text-align: left; }
.smallPlus-u-textRight {
text-align: right; }
/*
Inherit the ancestor's text color.
*/
.smallPlus-u-textInheritColor {
color: inherit; }
/*
Enables font kerning in all browsers.
http://blog.typekit.com/2014/02/05/kerning-on-the-web/
1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
2. Chrome (not Windows), Firefox, IE 10+
3. Safari 7 and future browsers
*/
.smallPlus-u-textKern {
text-rendering: optimizeLegibility;
/* 1 */
font-feature-settings: "kern" 1;
/* 2 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 3 */ }
/*
Prevent whitespace wrapping
*/
.smallPlus-u-textNoWrap {
white-space: nowrap; }
/*
Text truncation
Prevent text from wrapping onto multiple lines, and truncate with an
ellipsis.
1. Ensure that the node has a maximum width after which truncation can
occur.
2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
nodes.
*/
.smallPlus-u-textTruncate {
max-width: 100%;
/* 1 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
/* 2 */ } }
@media only screen and (min-width: 560px) {
.mediumPlus-u-textUppercase {
text-transform: uppercase; }
/*
Word breaking
Break strings when their length exceeds the width of their container.
*/
.mediumPlus-u-textBreak {
word-wrap: break-word; }
/*
Horizontal text alignment
*/
.mediumPlus-u-textCenter {
text-align: center; }
.mediumPlus-u-textLeft {
text-align: left; }
.mediumPlus-u-textRight {
text-align: right; }
/*
Inherit the ancestor's text color.
*/
.mediumPlus-u-textInheritColor {
color: inherit; }
/*
Enables font kerning in all browsers.
http://blog.typekit.com/2014/02/05/kerning-on-the-web/
1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
2. Chrome (not Windows), Firefox, IE 10+
3. Safari 7 and future browsers
*/
.mediumPlus-u-textKern {
text-rendering: optimizeLegibility;
/* 1 */
font-feature-settings: "kern" 1;
/* 2 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 3 */ }
/*
Prevent whitespace wrapping
*/
.mediumPlus-u-textNoWrap {
white-space: nowrap; }
/*
Text truncation
Prevent text from wrapping onto multiple lines, and truncate with an
ellipsis.
1. Ensure that the node has a maximum width after which truncation can
occur.
2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
nodes.
*/
.mediumPlus-u-textTruncate {
max-width: 100%;
/* 1 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
/* 2 */ } }
@media only screen and (min-width: 760px) {
.largePlus-u-textUppercase {
text-transform: uppercase; }
/*
Word breaking
Break strings when their length exceeds the width of their container.
*/
.largePlus-u-textBreak {
word-wrap: break-word; }
/*
Horizontal text alignment
*/
.largePlus-u-textCenter {
text-align: center; }
.largePlus-u-textLeft {
text-align: left; }
.largePlus-u-textRight {
text-align: right; }
/*
Inherit the ancestor's text color.
*/
.largePlus-u-textInheritColor {
color: inherit; }
/*
Enables font kerning in all browsers.
http://blog.typekit.com/2014/02/05/kerning-on-the-web/
1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
2. Chrome (not Windows), Firefox, IE 10+
3. Safari 7 and future browsers
*/
.largePlus-u-textKern {
text-rendering: optimizeLegibility;
/* 1 */
font-feature-settings: "kern" 1;
/* 2 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 3 */ }
/*
Prevent whitespace wrapping
*/
.largePlus-u-textNoWrap {
white-space: nowrap; }
/*
Text truncation
Prevent text from wrapping onto multiple lines, and truncate with an
ellipsis.
1. Ensure that the node has a maximum width after which truncation can
occur.
2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
nodes.
*/
.largePlus-u-textTruncate {
max-width: 100%;
/* 1 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
/* 2 */ } }
@media only screen and (min-width: 1024px) {
.hugePlus-u-textUppercase {
text-transform: uppercase; }
/*
Word breaking
Break strings when their length exceeds the width of their container.
*/
.hugePlus-u-textBreak {
word-wrap: break-word; }
/*
Horizontal text alignment
*/
.hugePlus-u-textCenter {
text-align: center; }
.hugePlus-u-textLeft {
text-align: left; }
.hugePlus-u-textRight {
text-align: right; }
/*
Inherit the ancestor's text color.
*/
.hugePlus-u-textInheritColor {
color: inherit; }
/*
Enables font kerning in all browsers.
http://blog.typekit.com/2014/02/05/kerning-on-the-web/
1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
2. Chrome (not Windows), Firefox, IE 10+
3. Safari 7 and future browsers
*/
.hugePlus-u-textKern {
text-rendering: optimizeLegibility;
/* 1 */
font-feature-settings: "kern" 1;
/* 2 */
-webkit-font-kerning: normal;
font-kerning: normal;
/* 3 */ }
/*
Prevent whitespace wrapping
*/
.hugePlus-u-textNoWrap {
white-space: nowrap; }
/*
Text truncation
Prevent text from wrapping onto multiple lines, and truncate with an
ellipsis.
1. Ensure that the node has a maximum width after which truncation can
occur.
2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
nodes.
*/
.hugePlus-u-textTruncate {
max-width: 100%;
/* 1 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
/* 2 */ } }
/*
Generates utils prefixed with $util-width-breakpoints:
.u-widthFull
.largePlus-u-widthFull
.hugePlus-u-widthFull
etc.
*/
/* Regular, non-responsive util classes */
.u-widthFull {
width: 100%;
height: auto; }
.u-widthAuto {
width: auto; }
/* Responsive util classes */
@media only screen and (min-width: 0px) {
.tinyPlus-u-widthFull {
width: 100%;
height: auto; }
.tinyPlus-u-widthAuto {
width: auto; } }
@media only screen and (min-width: 360px) {
.smallPlus-u-widthFull {
width: 100%;
height: auto; }
.smallPlus-u-widthAuto {
width: auto; } }
@media only screen and (min-width: 560px) {
.mediumPlus-u-widthFull {
width: 100%;
height: auto; }
.mediumPlus-u-widthAuto {
width: auto; } }
@media only screen and (min-width: 760px) {
.largePlus-u-widthFull {
width: 100%;
height: auto; }
.largePlus-u-widthAuto {
width: auto; } }
@media only screen and (min-width: 1024px) {
.hugePlus-u-widthFull {
width: 100%;
height: auto; }
.hugePlus-u-widthAuto {
width: auto; } }
/*20170926*/
.topHead {
padding-top: 20px;
font-family:'century_gothicregular';
}
.topHead .inner {
max-width:1024px;
margin:0 auto;
padding:0 20px;
}
.topHead .inner >div {
width:100%;
display: table;
margin-bottom:14px;
}
.topHead .inner p {
margin-bottom:2px;
font-style:inherit;
font-size:60%;
}
.topHead .inner .logo {
display:table-cell;
text-align:left;
}
.topHead .inner .logo img {
width:146px;
height:auto;
}
.topHead .inner .bbcStory {
display:table-cell;
padding-left:10px;
text-align:right;
vertical-align: middle;
}
.topHead .inner .bbcStory img {
width:160px;
height:auto;
vertical-align: bottom;
}
.topHead .inner .desc {
text-align:right;
font-size:60%;
}
.BodyText-content img {
width:100%;
height:auto;
}
.Hero-inner {
background:url(/others/about_us/brand/bbc_article01/img/bg.jpg) center center no-repeat;
background-size:cover;
}
.bltone {
background:url(/others/about_us/brand/bbc_article01/img/30_black.png) 0 0 repeat;
position: absolute;
width: 100%;
height: 100%;
}
.Hero-subTitle {
font-family: "playfair_display";
display: table-cell;
text-align: center;
vertical-align: middle;
z-index: 9999;
position: relative;
}
.nitto_footer {
text-align:center;
background:#fff !important;
}
.nitto_footer .BottomBar {
color:#666666 !important;
}
.PartnerLogo {
width: auto;
}
.youtube .section-wrapper {
width: 100%;
position: relative;
}
.youtube .section-inner {
padding-top: 325.875px; padding-bottom: 325.875px;
}
.youtube .player {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.youtube .section-inner .play-video-btn {
position: relative;
display: block;
text-align: center;
}
h1.Hero-subTitle {
text-align:center;
margin:20px 0;
display: block;
z-index:100;
}
.youtube .section-inner img {
position: absolute;
top: 3%;
right: 3%;
z-index:100;
}
@media (max-width: 767px) {
.youtube .section-inner {
padding-top:0 !important;
padding-bottom:0 !important;
}
.youtube .player {
position:static;
width: 100%;
height:auto;
}
.youtube .section-inner img {
width: 130px;
height:auto;
}
h1.Hero-subTitle {
text-align: left;
margin: 10px 20px 0;
display: block;
z-index: 100;
line-height: 1.3;
}
.youtube .section-inner iframe {
width:100%;
height:auto;
}
}