body
  font-family "RT Fonts", Arial, "Helvetica Neue", Helvetica, sans-serif
  font-size 16px
  line-height 1.5
  font-weight 400

.{newAppName}-font
  font-size 16px
  line-height 1.5
  font-weight 400

.{newAppName}-font-dashed
  position: relative
  display inline-block
  &:before
    content: ''
    position: absolute
    width: 100%
    height: 1px
    border-bottom: 1px dashed
    bottom: 0
    left: 0
    right: 0


.{newAppName}-font-hero
  font-size 50px
  line-height 60px
  font-weight 500

  @media (max-width: laptop-upper-limit)
    font-size 44px
    line-height 54px

  @media (max-width: tablet-upper-limit)
    font-size 36px
    line-height 46px

  @media (max-width: mobile-upper-limit)
    font-size 28px
    line-height 34px

h1,
.{newAppName}-font-h1
  font-size 50px
  line-height 60px
  font-weight 200

  @media (max-width: laptop-upper-limit)
    font-size 44px
    line-height 54px

  @media (max-width: tablet-upper-limit)
    font-size 36px
    line-height 46px

  @media (max-width: mobile-upper-limit)
    font-size 28px
    line-height 34px
  .{newAppName}-card &
    font-size 50px
    line-height 60px

.{newAppName}-font-banner-label
  font-size 50px
  line-height 60px
  font-weight 500

  @media (max-width: laptop-upper-limit)
    font-size 44px
    line-height 54px

  @media (max-width: tablet-upper-limit)
    font-size 36px
    line-height 46px

  @media (max-width: mobile-upper-limit)
    font-size 28px
    line-height 34px

.{newAppName}-font-banner-label-bold
  font-size 48px
  line-height 60px

  @media (max-width: mobile-upper-limit)
    font-size 31px
    line-height 1.3

.{newAppName}-font-banner-label-thin
  font-size 48px
  line-height 63px
  font-weight 200

  @media (max-width: mobile-upper-limit)
    font-size 38px

h2,
.{newAppName}-font-h2
  font-size 36px
  line-height 46px
  font-weight 200

  @media (max-width: laptop-upper-limit)
    font-size 32px
    line-height 40px

  @media (max-width: mobile-upper-limit)
    font-size 24px
    line-height 32px
  .{newAppName}-card &
    font-size 36px
    line-height 46px

.{newAppName}-font-promo-title
  font-size 36px

h3,
.{newAppName}-font-h3
  font-size 28px
  line-height 36px
  font-weight 200

  @media (max-width: laptop-upper-limit)
    font-size 24px
    line-height 32px

  @media (max-width: mobile-upper-limit)
    font-size 22px
    line-height 30px
  .{newAppName}-card &
    font-size 28px
    line-height 36px

.{newAppName}-font-promo
  font-size 24px
  font-weight 200
  letter-spacing .28px

h4,
.{newAppName}-font-h4
  font-size 22px
  line-height 28px
  font-weight 200

  @media (max-width: laptop-upper-limit)
    font-size 20px
    line-height 26px

  @media (max-width: mobile-upper-limit)
    font-size 18px
    line-height 24px
  .{newAppName}-card &
    font-size 22px
    line-height 28px

strong,
b,
.{newAppName}-font-bold
  font-weight 500

.{newAppName}-font-real-bold
  font-weight 800

.{newAppName}-font-medium
  font-weight 500

.{newAppName}-font-light
  font-weight 200

.p1,
.{newAppName}-font-paragraph
  font-size 18px
  line-height 26px

  @media (max-width: laptop-upper-limit)
    font-size 16px
    line-height 22px
  .{newAppName}-card &
    font-size 18px
    line-height 26px

.p2,
.{newAppName}-font-small-paragraph
  font-size 16px
  line-height 24px

  @media (max-width: laptop-upper-limit)
    font-size 16px
    line-height 22px

  @media (max-width: mobile-upper-limit)
    font-size 14px
    line-height 18px
  .{newAppName}-card &
    font-size 16px
    line-height 24px

.p3,
.{newAppName}-font-control
  font-size 14px
  line-height 18px

  @media (max-width: mobile-upper-limit)
    font-size 12px
    line-height 16px
  .{newAppName}-card &
    font-size 14px
    line-height 18px

.p4,
.{newAppName}-font-label
  font-size 12px
  line-height 16px

.tagline,
.{newAppName}-font-label-uppercase
  font-size 12px
  line-height 16px
  text-transform uppercase
  letter-spacing 2px

.{newAppName}-font-sup
  position relative
  top -5px

.{newAppName}-font-no-wrap
  text-overflow ellipsis
  white-space nowrap

.{newAppName}-font-td-left
  @media (max-width: tablet-upper-limit)
    text-align left


.{newAppName}-font-left
  text-align left

.{newAppName}-font-center
  text-align center

.{newAppName}-font-right
  text-align right

.{newAppName}-font-card-title
  font-size 30px

.{newAppName}-font-light
  font-weight 200

.{newAppName}-font-link
  color inherit
  text-decoration underline

  &:hover
    color inherit

.{newAppName}-td-font-left
  @media (max-width: tablet-upper-limit)
    text-align left
.{newAppName}-font-md-left
  @media (max-width: mobile-upper-limit)
    text-align left

.{newAppName}-font
  &-td-center
    @media (max-width: tablet-upper-limit)
      text-align center
  &-md-center
    @media (max-width: mobile-upper-limit)
      text-align center

.{newAppName}-font-small
  font-size 14px

.{newAppName}-font-small-upper
  font-size 14px
  text-transform uppercase
.{newAppName}-font-phone
  font-size 28px
  @media (max-width: tablet-upper-limit)
    font-size 24px


.{newAppName}-font-spacing2
  letter-spacing 2px

.{newAppName}-font-spacing018
  letter-spacing .18px

.{newAppName}-font-hypnens-off
  word-wrap normal
  hyphens none
  -webkit-hyphens none
  -ms-hyphens none
  -moz-hyphens none

.{newAppName}-wrapper
  font-size 16px

a
  color inherit

.{newAppName}-numeric-list
  color main-color
  list-style-type none
  counter-reset step-counter

  .{newAppName}-dark-theme &
    color b2c-white

.{newAppName}-ordered-list__item
  .{newAppName}-dark-theme &
    color b2c-white

  &:before
    content ""
    display inline-block
    width 6px
    height 6px
    background-color main-color
    border-radius 50%
    position absolute
    top .5em
    left 7px

    .{newAppName}-dark-theme &
      background-color b2c-white05

.{newAppName}-numeric-list__item
  counter-increment step-counter

  &:before
    content counter(step-counter) "."
    min-width 20px
    color main-color
    position absolute
    left 0

    .{newAppName}-dark-theme &
      color b2c-white

.{newAppName}-ordered-list__item,
.{newAppName}-numeric-list__item
  padding-left horizontal-space * 1.5
  position relative

  &+&
    margin-top 15px

    @media (max-width: mobile-upper-limit)
      margin-top 10px

  &:before
    text-align center

.{newAppName}-ordered-list__item+.{newAppName}-numeric-list__item,
.{newAppName}-numeric-list__item+.{newAppName}-ordered-list__item
  margin-top 15px

.{b2bAppName}-faq-unordered-list
  &__item
    padding vertical-space 0

    &+&
      border-top 2px solid b2b-cool-grey05-no-opacity

  .{newAppName}-numeric-list,
  .{newAppName}-ordered-list
    color main-color05

  .{newAppName}-numeric-list__item:before
    color main-color05

  .{newAppName}-ordered-list__item:before
    background-color main-color05

  .rt-annotation__title
    font-size 18px
    line-height 26px

    @media (max-width: tablet-upper-limit)
      font-size 16px
      line-height 22px

.{newAppName}-vam
  vertical-align: middle

.{newAppName}-va-top
  vertical-align: top