h1
  font: normal 400 4rem/1.2 $default-font
  color: $text-light
  +MQ(M)
    font-size: 5rem
  +MQ(XXL)
    font-size: 6.6rem

.typed-cursor
  font-weight: 200

.headline__title

.headline__subtitle
  display: block
  font: normal 600 1.8rem/1.6 $default-font
  color: $text-light
  margin-bottom: 2.3rem

.headline__btnholder
  margin-top: 3.8rem

.headline__text
  font: normal 400 1.6rem/1.6 $default-font
  color: $text-light-base
  max-width: 480px
  margin-bottom: 4.4rem
  +MQ(XXL)
    max-width: 542px
    margin-bottom: 4.8rem

h2
  font: normal 400 3rem/1.2 $default-font
  color: $text-light
  +MQ(M)
    font-size: 3.8rem
  +MQ(XXL)
    font-size: 5rem

.block__subtitle
  display: block
  font: normal 600 1.8rem/1.2 $default-font
  color: $text-light-base
  margin-bottom: 2.2rem

.block__title

.block__text
  margin-top: 2.3rem

h3
  font: normal 500 2rem/1.2 $default-font
  color: $text-light
 
h4
  font: normal 500 1.8rem/1.2 $default-font
  color: $text-light
  small
    display: block
    margin-top: 0.2rem
    font: normal 300 1.4rem/1.6 $default-font
    color: $text-light
  &.opposite
    font-weight: 600
    color: $text-dark
    small
      font-weight: 400
      color: $text-dark

h5
  font: normal 500 1.8rem/1.2 $default-font
  color: $text-light

p
  font: normal 300 1.4rem/1.6 $default-font
  color: $text-light-base
  span
    font-weight: 500
    color: $text-light
  &.copyright
    font: normal 500 1.2rem/1.6 $default-font
    color: $text-light-base
    a
      font: normal 500 1.2rem/1.6 $default-font
      color: $text-light-base
      .no-touch &:hover
        color: $text-light
  &.bright
    color: $text-light
    a
      color: $text-light
      .no-touch &:hover
        color: $text-light
  +MQ(XXL)
    font-size: 1.6rem

a
  color: $text-base

.text-link
  color: inherit
  color: $text-light-base
  text-decoration: none
  background: linear-gradient(to right, rgba($white, 0.3), rgba(white, 0.3)), linear-gradient(to right, rgba($white, 1), rgba($white, 1))
  background-size: 100% 1px, 0 1px
  background-position: 100% 100%, 0 100%
  background-repeat: no-repeat
  transition: background-size 400ms, color 300ms
  .no-touch &:hover
    color: $text-light
    background-size: 0 1px, 100% 1px

.contact-link
  color: inherit
  color: $text-light-base
  text-decoration: none
  background: linear-gradient(to right, rgba($white, 0.0), rgba($white, 0.0)), linear-gradient(to right, rgba($white, 1), rgba($white, 1))
  background-size: 100% 1px, 0 1px
  background-position: 100% 100%, 0 100%
  background-repeat: no-repeat
  transition: background-size 400ms, color 300ms
  .no-touch &:hover
    color: $text-light
    background-size: 0 1px, 100% 1px

.image-caption
  p
    font: normal 500 1.8rem/1.2 $default-font
    color: $text-dark
    span
      display: block
      font: normal 400 1.4rem/1.6 $default-font
      color: $text-dark
      margin-top: 0.2rem
  &.opposite
    p
      font-weight: 400
      color: $text-light
      span
        display: block
        font-weight: 300
        color: $text-light-transparent


.popup-title__title
  font: normal 400 3rem/1.2 $default-font
  color: $text-light
  +MQ(M)
    font-size: 4rem

.popup-title__text
  font: normal 300 1.6rem/1.6 $default-font
  color: $text-light-base
  margin-top: 2.5rem
  +MQ(M)
    margin-top: 2.3rem


