@charset "UTF-8";
/**
Typography

Style guide: Typography
*/
/**
Headings

Use `<h#> tag or `.abb-heading-#` class.

Markup:
<h1>Heading 1</h1>
<span class="abb-heading-1">Heading 1</span>
<h2>Heading 2</h2>
<span class="abb-heading-2">Heading 2</span>
<h3>Heading 3</h3>
<span class="abb-heading-3">Heading 3</span>
<h4>Heading 4</h4>
<span class="abb-heading-4">Heading 4</span>
<h5>Heading 5</h5>
<span class="abb-heading-5">Heading 5</span>
<h6>Heading 6</h6>
<span class="abb-heading-6">Heading 6</span>

Style guide: Typography.Headings
*/
/**
Paragraphs

Use `<p>` tag and optionally one of modifier classes.

.text-left - aligns text to the left
.text-center - centers text
.text-right - aligns text to the right
.text-justify - justifies text

Markup:
<p class="{{modifier_class}}">Some text</p>


Styleguide Typography.Paragraphs
*/
/**
Links

Markup:
<a href="">A link</a><br/>
<span class="abb-link">A link</span><br/>
<a href=""><i class="abb-icon abb-icon__location"></i> A link with icon</a>

Styleguide Typography.Links
*/
/* New branding colours */
.xsmall-text-left {
  text-align: left; }

.xsmall-text-right {
  text-align: right; }

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

.xsmall-text-justify {
  text-align: justify; }

@media screen and (min-width: 30em) {
  .text-left {
    text-align: left; }
  .text-right {
    text-align: right; }
  .text-center {
    text-align: center; }
  .text-justify {
    text-align: justify; } }

@media screen and (min-width: 48em) {
  .medium-text-left {
    text-align: left; }
  .medium-text-right {
    text-align: right; }
  .medium-text-center {
    text-align: center; }
  .medium-text-justify {
    text-align: justify; } }

@media screen and (min-width: 64em) {
  .large-text-left {
    text-align: left; }
  .large-text-right {
    text-align: right; }
  .large-text-center {
    text-align: center; }
  .large-text-justify {
    text-align: justify; } }

@media screen and (min-width: 90em) {
  .xlarge-text-left {
    text-align: left; }
  .xlarge-text-right {
    text-align: right; }
  .xlarge-text-center {
    text-align: center; }
  .xlarge-text-justify {
    text-align: justify; } }

.float-left {
  float: left !important; }

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

.float-center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.clearfix::before, .clearfix::after {
  content: ' ';
  display: table; }

.clearfix::after {
  clear: both; }

/* Typography resets */
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

th {
  font-weight: 500; }

body, .abb-frame {
  font-family: "OPPOSans";
  font-size: 1rem;
  font-weight: 300;
  color: #262626; }

body[contenteditable="true"] {
  padding: 20px; }

.abb--equalize-to-input {
  padding-top: 6px; }

.abb--equalize-to-input--large {
  padding-top: 10px; }

.abb--equalize-to-input--small {
  padding-top: 2px; }

/* Default Link Styles */
a, .abb-link {
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  color: #262626; }

.abb-link--with-icon, .abb-link--pure {
  text-decoration: none; }

.abb-link--pure:hover, .abb-link--pure:hover * {
  color: #FF000F; }

.abb-link--margined {
  margin-top: 8px;
  margin-bottom: 8px;
  display: inline-block; }

.abb-link--unstyled {
  color: inherit; }

.abb-link--ghost {
  white-space: nowrap;
  font-size: 14px; }

.abb-link--with-arrow:before {
  font-family: "OPPOSans";
  font-weight: normal;
  font-style: normal;
  content: "罘?;
  display: inline-block;
  font-size: 75%;
  margin-right: 0.5em; }

a:hover .abb-link, .abb-link:hover .abb-link {
  color: #3C3C3C; }

/* Default paragraph styles */
p {
  font-family: OPPOSans;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 0.5em;
  text-rendering: optimizeLegibility;
  color: #262626; }
  p.abb-lead-text {
    font-size: 1.25rem; }
    p.abb-lead-text--condensed {
      line-height: 1.5; }
      @media screen and (min-width: 48em) {
        p.abb-lead-text--condensed {
          line-height: 1.8; } }
    @media print {
      p.abb-lead-text {
        line-height: 1.5; } }

strong, em, .text-bold {
  font-weight: 500; }

address {
  font-style: inherit;
  display: inline; }

img {
  display: block;
  width: 100%; }

.abb-page__content p, .abb-page__content h1, .abb-page__content h2, .abb-page__content h3, .abb-page__content h4, .abb-page__content h5, .abb-page__content h6, .abb-page__content .abb-heading-1, .abb-page__content .abb-heading-2, .abb-page__content .abb-heading-3, .abb-page__content .abb-heading-4, .abb-page__content .abb-heading-5, .abb-page__content .abb-heading-6, .abb-page__content .abb-headline-text {
  max-width: 50rem; }

/* Default header styles */
h1, h2, h3, h4, h5, h6, .abb-heading-1, .abb-heading-2, .abb-heading-3, .abb-heading-4, .abb-heading-5, .abb-heading-6, .abb-headline-text {
  display: block;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.4;
  color: #262626;
  word-break: break-word; }

.abb-font--grey {
  color: #A0A0A0; }
  .abb-font--grey * {
    color: inherit; }

.abb-heading--inline-block {
  display: inline-block; }

.abb-heading--inline {
  display: inline; }

.abb-heading--unstyled {
  font-size: inherit;
  line-height: inherit;
  margin: auto; }

h1, .abb-heading-1 {
  font-size: 72px;
  margin-bottom: 0.25em;
  color: #262626;
  line-height: 1.2; }

h2, .abb-heading-2, .abb-headline-text {
  font-size: 52px; }

h3, .abb-heading-3 {
  font-size: 25px; }

h4, .abb-heading-4 {
  font-size: 18px;
  line-height: 1.6; }

h5, .abb-heading-5 {
  font-size: 16px;
  line-height: 1.2; }

h6, .abb-heading-6 {
  font-size: 14px;
  line-height: 1.2; }

h1, .abb-heading-1 {
  font-size: 32px; }

h2, .abb-heading-2, .abb-headline-text {
  font-size: 26px; }

h3, .abb-heading-3 {
  font-size: 20px; }

@media screen and (min-width: 30em) {
  h1, .abb-heading-1 {
    font-size: 32px; }
  h2, .abb-heading-2, .abb-headline-text {
    font-size: 26px; }
  h3, .abb-heading-3 {
    font-size: 20px; } }

@media screen and (min-width: 48em) {
  h1, .abb-heading-1 {
    font-size: 36px; }
  h2, .abb-heading-2, .abb-headline-text {
    font-size: 28px; }
  h3, .abb-heading-3 {
    font-size: 22px; } }

@media screen and (min-width: 64em) {
  h1, .abb-heading-1 {
    font-size: 40px; }
  h2, .abb-heading-2, .abb-headline-text {
    font-size: 30px; }
  h3, .abb-heading-3 {
    font-size: 24px; } }

ul,
ol,
dl {
  line-height: 1.6;
  margin-bottom: 0;
  list-style-position: outside; }

li {
  font-size: inherit; }

ul {
  list-style-type: disc;
  margin-left: 1.25rem; }

ol {
  margin-left: 1.25rem; }

ul ul, ol ul, ul ol, ol ol {
  margin-left: 1.25rem;
  margin-bottom: 0;
  list-style-type: inherit; }

.abb-list--unstyled {
  list-style: none;
  margin-left: 0;
  padding: 0; }

.abb-list--inline {
  display: inline; }
  .abb-list--inline > li {
    display: inline; }

.abb-list--margined > li {
  margin-bottom: 1rem; }

.abb-list--bordered > li {
  border-bottom: 1px solid #D2D2D2; }
  .abb-list--bordered > li:last-child {
    border-bottom: none; }

dl {
  margin-bottom: 1rem; }
  dl dt {
    margin-bottom: 0.3rem;
    font-weight: 500; }

.abb-definition-list--minimal {
  font-size: 80%;
  display: -ms-flexbox;
  display: flex; }
  .abb-definition-list--minimal > dt {
    margin-right: 0.5em;
    color: #A0A0A0;
    font-weight: 300; }

.abb--inline {
  display: inline; }

.abb--inline-block {
  display: inline-block; }

figure {
  margin: 2em 0; }
  figure figcaption {
    font-size: 80%;
    font-weight: 500;
    text-align: center;
    margin: 2rem auto 2rem auto; }

.abb-sup {
  vertical-align: super;
  font-size: 0.75rem; }

article p {
  margin: 1.5rem 0; }

hr {
  display: block;
  height: 1px;
  border: none;
  background: #D2D2D2; }