.c-header
  position: relative


.c-header__img
  position: relative
  z-index: 0
  width: 100%
  object-fit: cover


.c-header__title
  position: absolute
  z-index: 1
  top: 50%
  left: 50%
  transform: translateY(-50%) translateX(-50%)
  font-size: calc(4vmin + 40px)
  margin: 0
  color: white
  text-shadow: 0 1px 5px rgba(0,0,0,0.4)



.c-intro
  padding: column(1)
  background-color: #0E121A
  color: white
  text-align: center


.c-intro__main
  margin: 0 auto
  max-width: 576px
  font-size: 1.6rem
  font-weight: 600

  br
    +respond-to-width(576)
      display: none


.c-intro__appendix
  margin: 32px auto 0
  max-width: 576px
  color: #808080
  font-size: 0.8rem
  text-transform: uppercase
  font-weight: bold


.rwd-break
  display: block

  +respond-to-width(576)
    display: none


.c-subsection
  position: relative
  width: 100%
  margin: auto
  padding: column(2) column(1)

  +respond-to-width-beyond($smGridBreakpoint)
    padding: column(1)

  +respond-to-width-beyond($lgGridBreakpoint)
    width: column(10, 12)
    padding: column(1) 0

.c-subsection--full-width
  width: 100%

.c-subheader
  margin: 0
  font-size: calc(6vmin + 20px)
  font-weight: 700
  color: #0E121A

.c-subheader--service
  font-size: 36px
  text-align: center

.c-subheader--light
  color: #fff


.c-benefits
  display: flex
  flex-wrap: wrap
  flex-direction: column
  list-style: none
  margin: column(1) 0 0
  padding-left: 0
  white-space: normal

  +respond-to-width-beyond(900)
    flex-direction: row
    justify-content: space-between


.c-benefits__item
  display: flex
  border-top: 1px solid #0E121A
  padding: 25px
  color: #0E121A
  font-size: 1.2rem
  font-weight: 600

  &::before
    flex: 0 0 24px
    content: ''
    display: block
    background-image: url(/img/icons/check.svg)
    width: 24px
    height: 18px
    margin-top: 10px

  +respond-to-width-beyond(900)
    width: calc(40%)

  +respond-to-width-beyond($lgGridBreakpoint)
    width: calc(25% + 1px)


.c-benefits__text
  flex: 1
  margin-left: 16px


.c-duo-picture
  +respond-to-width-beyond(576)
    width: column(10, 12)
    margin: auto

  +respond-to-width-beyond(800)
    display: flex


.c-duo-picture__img
  width: 100%
  max-width: 100%

  +respond-to-width-beyond(800)
    width: 50%
    flex: 1 1 50%


.c-personality
  list-style: none
  margin: column(1) 0 0
  padding-left: 0


.c-personality__item
  border-top: 1px solid #0E121A
  padding-bottom: 26px
  color: #0E121A

  +respond-to-width-beyond(900)
    display: flex


.c-personality__label
  display: flex
  margin: 0
  padding-top: 26px
  font-size: 1.6rem
  font-weight: 700

  &::before
    flex: 0 0 24px
    content: ''
    display: block
    background-image: url(/img/icons/plus.svg)
    width: 24px
    height: 24px
    margin-top: 14px
    margin-right: 24px

  +respond-to-width-beyond(900)
    flex: 1 1 50%


.c-personality__description
  padding-top: 26px
  font-size: 0.9rem
  font-weight: 600
  white-space: normal

  +respond-to-width-beyond(900)
    flex: 1 1 50%
    padding-top: 36px


.l-split
  +respond-to-width-beyond($mdGridBreakpoint)
    display: flex


.l-split__item
  +respond-to-width-beyond($mdGridBreakpoint)
    flex: 0 0 50%
    white-space: normal


.c-skills
  list-style: none
  padding-left: 0

.c-skills__item
  display: flex
  margin: 16px 0 0
  font-size: 0.9rem
  font-weight: 500
  line-height: 2
  color: #fff

  &::before
    flex: 0 0 24px
    content: ''
    display: block
    background-image: url(/img/icons/plus--white.svg)
    width: 24px
    height: 24px
    margin-top: 6px
    margin-right: 24px



.c-apply__form
  max-width: 480px
  margin-top: 32px

  label, .c-apply__label
    margin-bottom: 6px
    font-size: 0.9rem
    line-height: 1.2
    color: #0E121A
    font-weight: 600

  .input-holder
    margin-bottom: 16px

    .message
      font-size: 16px
      background: #ffb502
      color: #0E121A
      border-radius: 4px
      padding: 3px 10px
      margin-bottom: 3px

  input, textarea
    border: 2px solid #0E121A
    border-radius: 4px
    +placeholder
      color: #fff


.c-button
  display: inline-block
  padding: 16px 32px
  background-color: #0D65FB
  color: #fff
  border: none
  border-radius: 4px
  font-size: 0.9rem
  line-height: 1.2
  font-weight: 600
  cursor: pointer
  transition: background-color 0.25s linear

  &:hover
    background-color: #0d5bb6



.c-questions
  display: flex
  justify-content: flex-end
  margin-bottom: 144px


.c-questions__figure
  flex: 0
  margin: 0
  position: relative


.c-questions__img
  +respond-to-width($mdGridBreakpoint)
    width: 30vw


.c-questions__caption
  position: absolute
  bottom: -36px
  font-size: 0.9rem
  font-weight: 600
  color: #000

  +respond-to-width($mdGridBreakpoint)
    display: none


.c-questions__body
  flex: 0 1 50%
  padding: column(1)
  background-color: #0E121A
  color: #fff

  +respond-to-width($mdGridBreakpoint)
    flex-basis: 100%
  a
    color: #00C7FF
    text-decoration: none

    &:hover
      text-decoration: underline


.c-questions__header
  margin: 0 0 16px
  color: #fff
  font-size: 1.6rem
  font-weight: 600
  line-height: 1.25


.c-questions__info
  color: #fff
  font-size: 0.9rem
  line-height: 1.33



.c-picture-slider
  position: relative

.c-picture-slider__prev,
.c-picture-slider__next
  position: absolute
  z-index: 1
  top: 0
  bottom: 0
  left: 0
  width: 100px
  transform: rotate(.5turn)
  border: none
  background-color: transparent
  outline: none
  cursor: pointer


  &::before
    flex: 0 0 32px
    content: ''
    display: block
    margin: 0 auto
    background-image: url(/img/icons/arrow.svg)
    width: 32px
    height: 32px
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5))


.c-picture-slider__next
  left: auto
  right: 0

  &::before
    transform: rotate(.5turn)


.u-bg-dark
  background-color: #0E121A

.t-vacancy__dynamic
  padding: column(2) 0

  +respond-to-width-beyond($smGridBreakpoint)
    padding: column(1) 0

  &.t-vacancy__dynamic--empty
    padding-bottom: 0 !important


.t-vacancy__block
  width: calc(100% - 40px)
  margin: auto

  +respond-to-width-beyond(576)
    width: column(10, 12)


  + .t-vacancy__block
    margin-top: 60px

  .text-block
    padding: 0
    white-space: normal

    h2
      @extend .c-subheader