.promo
  &-color-line
    display flex
    flex-direction row
    min-width 100vw
    height calc(100vh - 74px)
    position relative

    @media (max-width: mobile-upper-limit)
      height initial
      min-height initial
      padding-top 150px
      padding-bottom 100px

  &-title
    margin-top -45px
    margin-bottom vertical-space * 1.75

  &-left-line-image
    width 1286px
    height 100%
    background-position right center
    background-size cover
    position absolute
    top 0
    bottom 0
    -webkit-background-size cover

    @media (max-width: 1625px)
      left calc(66.66vw - 1345px)

    @media (max-width: 1881px) and (min-width: 1476px)
      left calc(100vw - 1476px - 405px)

    @media (min-width: 1881px)
      left 0

  &-reg-app
    background-color light-grey

    .{newAppName}-dark-theme &
      color main-color

  &-color-block
    color #ffffff
    padding-top 50px
    padding-bottom 50px

    &--hide-overflow
      max-width 100%
      overflow-x hidden

  &-tv
    &-icon
      height 92px
      vertical-align top

    &-channel
      display flex
      flex-wrap wrap
      justify-content space-between

      &__item
        display flex
        flex-direction column
        align-self center
        align-self center
        min-width 12%
        box-sizing border-box
        padding-top vertical-space * .5
        vertical-align middle

        @media (max-width: mobile-upper-limit)
          min-width 20%

        &--perii
          min-width 100px

          .promo-tv-channel__img
            width 57px

        &--sts
          .promo-tv-channel__img
            width 75px

        &--tnt
          .promo-tv-channel__img
            width 75px

        &--friday
          .promo-tv-channel__img
            width 90px

        &--carusel
          .promo-tv-channel__img
            width 110px

        &--ntv
          .promo-tv-channel__img
            width 65px

        &--rossia1
          .promo-tv-channel__img
            width 125px

        &--muztv
          .promo-tv-channel__img
            width 55px

        &--sony
          .promo-tv-channel__img
            width 62px

        &--paramount
          .promo-tv-channel__img
            width 77px

        &--romans
          min-height 110px

          .promo-tv-channel__img
            width 65px

        &--mtv
          min-width 130px

          .promo-tv-channel__img
            width 65px

        &--matchtv
          .promo-tv-channel__img
            width 85px

        &--rentv
          .promo-tv-channel__img
            width 47px

        &--tvc
          .promo-tv-channel__img
            width 73px

        &--tv3
          .promo-tv-channel__img
            width 65px

      &__img
        width fit-content
        max-width 100%
        height auto

  &-shelf
    &__list
      padding-top 10px

    &__image
      width 100%

    &__pseudo-item
      opacity .3

    &__info
      margin-top vertical-space * .5
      opacity .5

    &__label
      max-width 100%
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      -ms-text-overflow ellipsis

  &-full-width-img
    width 100%

.flex-column-center-items
  display flex
  flex-direction column
  justify-content center

.rt-sticky--tariff
  position sticky
  top 400px

.scroll-step-text
  line-height 23px
  outline 5px solid #fff
  transition-timing-function cubic-bezier(.11, .34, .97, .33)
  transition-duration .4s
  transition-property outline, color, background-color

.rt-orange-breaker-item
  padding-right: 15px
  &+&
    padding-left: 45px
    position: relative
    &:before
      content: ''
      position: absolute
      left: 0
      width: 32px
      height: 42px
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzJweCIgaGVpZ2h0PSI0MnB4IiB2aWV3Qm94PSIwIDAgMzIgNDIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUzICg3MjUyMCkgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+TGluZSAzIENvcHkgNDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJEZXNpZ24iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgIDxnIGlkPSI1NTMtTFBfSWdyb3ZvaS00Z2FtZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5OS4wMDAwMDAsIC00NzUuMDAwMDAwKSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiNGRjRGMTIiIHN0cm9rZS13aWR0aD0iNCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMDIsNTE0IEwzMjgsNDc4IiBpZD0iTGluZS0zLUNvcHktNCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+')



.scroll-step--is-active .scroll-step-text
  color white
  background-color #65B8DF
  outline 5px solid #65B8DF

.vip-iphone
  width: 381px
  height: 451px
  background-image: url('/static/images/iphone.png')
  background-size: cover
  position: relative
  @media (max-width: 767px)
    background-image: none
    height: auto
    width: auto
.vip-iphone:before
  width: 55%;
  height: 110px;
  background-image: url('/static/images/IPhoneeye.png')
  background-repeat: no-repeat
  background-size: contain
  position: absolute
  left: 0
  right: 0
  margin-left: auto
  margin-right: auto
  top: 22px
  z-index: 10
  content: ''
  @media (max-width: 767px)
    background-image: none

.vip-iphone__inner
  width: 86.9%;
  height: 94.6%;
  border-radius: 36px 36px 0 0;
  position: absolute;
  bottom: 0;
  left: 0.5%;
  right: 0
  margin-left: auto
  margin-right: auto
  overflow: hidden
  @media (max-width: 767px)
    height: auto
    position: relative
  &:before
    content: ''
    width: 190%;
    transform: rotate(17deg);
    height: 300%;
    background-image: url(/static/images/iphoneBg.png);
    position: absolute
    -webkit-background-size: contain
    -moz-background-size: contain
    background-size: contain
    top: -120%
    right: -105%
    background-repeat:no-repeat
    transition-timing-function cubic-bezier(.77,.34,.39,.77)
    transition-duration 1s
    transition-property top, right, transform, width, height
    @media (max-width: 767px)
      background-image: none
    .vip-iphone--step-2 &
      transform: rotate(-34deg)
      top: -200%
      right: -90%
      width: 220%
    .vip-iphone--step-3 &
      transform: rotate(-75deg)
      top: -203%
      right: -20%
      width: 220%
    .vip-iphone--step-4 &
      transform: rotate(-165deg);
      top: -203%;
      right: 90%;
      width: 220%;

.vip-iphone-count
  position: absolute
  bottom: 4%
  left: 5%
  right: 0
  margin-left: auto
  margin-right: auto
  font-size: 14px
  color white
  text-align: center
  @media (max-width: 767px)
    display: none

.winklp
  background-color: #836BFF
  color: #fff

.vip-iphone-text
  position: absolute
  top: 45%
  width: 55%
  left: 5%
  right: 0
  margin-left: auto
  margin-right: auto
  font-size: 16px
  color white
  line-height: 24px
  opacity: 1
  visibility: visible
  transition-timing-function ease-in-out
  transition-duration .5s
  transition-property opacity
  @media (max-width: 767px)
    position: relative
    opacity: 1
    visibility: visible
    width: auto
    left: 0
    &+&
      padding-top: 40px


.vip
  .rt-banner-content
  .rt-card__footer
    padding-left: 0
    padding-right: 0
  .rt-dark-theme
    .rt-price__option-value
      color: #fff
      font-size: 50px
    .rt-card__background
      background-color: #1B2841
    .rt-card__body
      padding-bottom: 20px
    .rt-card__footer
      position: relative
      padding-top: 20px
      &:before
        content: ''
        position: absolute
        top: 0
        left: 5px
        right: 5px
        height: 1px
        background-color: rgba(255,255,255,0.1)
  .rt-card-list__name
    colro: white
  .rt-card-list__sub-name
  .rt-annotation--is-open
    .rt-annotation__content
      padding-top: 10px
      padding-bottom: 10px
  .rt-annotation__content
    background-color: rgba(16,24,40,0.34)
  .rt-card__content
    padding-bottom: 0

  .rt-annotation__arrow
    position: absolute
    right: 20px
    left:initial
  .rt-annotation--empty
    .rt-annotation__arrow
      display: none
    .rt-annotation__title
      opacity: 0.3
      cursor: default
    .rt-annotation__content
      display: none

  .rt-annotation__title
    text-transform: uppercase
    font-size: 12px
    line-height: 15px
    display: block
    padding-right: 20px
    padding-top: 20px
    padding-bottom: 20px


  .rt-annotation
    border-top: 0


.vip-iphone-text-eq1
  .vip-iphone--step-2 &,
  .vip-iphone--step-3 &,
  .vip-iphone--step-4 &
    opacity: 0
    @media (max-width: 767px)
      opacity: 1
      visibility: visible

.vip-iphone-text-eq2
  opacity: 0
  @media (max-width: 767px)
    opacity: 1
  .vip-iphone--step-2 &
    opacity: 1

.vip-iphone-text-eq3
  opacity: 0
  @media (max-width: 767px)
    opacity: 1
  .vip-iphone--step-3 &
    opacity: 1

.vip-iphone-text-eq4
  opacity: 0
  @media (max-width: 767px)
    opacity: 1
  .vip-iphone--step-4 &
    opacity: 1

.vip-iphone-wrapper
  display: flex
  background-color: #1b2841
  flex-direction: column
  @media (max-width: 767px)
    height: initial
    display: block
    min-height auto
    background-color: #101828

.vip-iphone-container
  position: sticky
  bottom: 0
  width: 100%
  height: 50vh
  min-height: 492px
  align-self: flex-end
  @media (max-width: 767px)
    position: relative
    min-height auto
    height: auto

.vip-background
  &:before
    content: ''
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: linear-gradient(to bottom, #1b284100 0%,#1b2841 5%,#1b2841 100%);
    @media (max-width: 767px)
      display: none
.vip-list-img-1
  height: 261px
  @media (max-width: 767px)
    height: 137px
.vip-list-img-2
  height: 261px
  @media (max-width: 767px)
    height: 137px
.vip-list-img-3
  height: 191px
  @media (max-width: 767px)
    height: 117px
.vip-list-img-4
  height: 185px
  @media (max-width: 767px)
    height: 137px
.vip-list-img-container
  height: 261px
  @media (max-width: 767px)
    height: 137px
.horizontal-scroll-container
  display: flex;
  flex-direction: row;
  white-space: normal;
  overflow: auto

.vip-scroll-button
  position: absolute
  top: 0
  bottom: 0
  margin-top: auto
  margin-bottom: auto
  cursor: pointer
  z-index: 10
  opacity: 0.8
  transition-timing-function cubic-bezier(.11, .34, .97, .33)
  transition-duration .2s
  transition-property opacity
  display: none
  &:hover
    opacity: 1
  &--next
    right: 0px
  &--prev
    left: 0px
    transform rotate(180deg)

.tariff-scroller
  position: relative
  top: 0

.tariff-scroller-sticky
  top: 0
  position: sticky

.vip-iphone-title
  position: sticky
  top: 50px
  @media (max-width: 767px)
    position: relative
    padding-bottom: 30px
    padding-left: 20px
    padding-right: 20px

.vip-iphone-count__point
  width: 8px
  height: 8px
  display: inline-block
  box-sizing border-box
  border 1.5px solid white
  cursor: pointer
  border-radius 50%

.vip-iphone-count__point:hover
  background-color: #fff

.vip-iphone-count__point+.vip-iphone-count__point
  margin-left: 12px

.vip-iphone-count__point--is-active
  background-color: #fff
  cursor: default

.vip-tariff-wrapper
  transition-timing-function ease
  transition-duration .1s
  transition-property transform

.animate-scroller-sticky
  position: sticky
  top: 0

.animate-scroller-sticky__container
  overflow: hidden

.warface-popup-wrapper
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  display: flex
  align-items center
  justify-content center
  background-color: rgba(0,0,0,0.3)
  z-index: 1000
  transition-timing-function cubic-bezier(.11, .34, .97, .33)
  transition-duration .2s
  transition-property opacity, visibility
  opacity: 0
  visibility: hidden
  z-index: 1

.warface-popup-wrapper--is-active
  opacity: 1
  visibility: visible
  z-index: 2

.warface-popup
  width: 565px
  background-color: #242C39
  box-shadow 0 20px 30px rgba(0,0,0,0.3)
  color white
  padding-left: 20px
  padding-right: 20px
  padding-bottom: 20px
  padding-top: 40px
  position: relative
  max-width: calc(100vw - 40px)

.warface-popup-close
  position: absolute
  top: 20px
  right: 20px
  cursor: pointer

.warface-popup-slider
  max-width: 365px
  margin-left: auto
  margin-right: auto
  position: relative
  height: 180px

.warface-popup-slider__arrow
  position: absolute
  top: 0
  bottom: 30px
  margin-top: auto
  margin-bottom: auto
  height: 16px
  cursor: pointer
  z-index: 2

.warface-popup-slider__arrow-prev
  left: 0


.warface-popup-slider__arrow-next
  right: 0

.warface-popup-slider,
.warface-popup-slider__count
  text-align: center

.warface-popup-slider__count
  user-select: none

.warface-popup-slider__img
  height: 115px
  display: flex
  align-items center
  justify-content center

.warface-popup-slider__item
  position: absolute
  opacity: 0
  visibility: hidden
  left: 0
  right: 0
  margin-left: auto
  margin-right: auto
  user-select: none
  transition-timing-function cubic-bezier(.11, .34, .97, .33)
  transition-duration .2s
  transition-property opacity, visibility

.warface-popup-slider__item--is-active
  opacity: 1
  visibility: visible

.kids
  .rt-annotation__title
    text-align: center
    padding-left: 0
    display: block

  .rt-annotation__arrow
    display: none

.rt-forgame
  .rt-logo-co-branding
    height: 30px
  .rt-logo-co-branding__item
    padding-left: 0
    padding-right: 30px
    &+.rt-logo-co-branding__line+.rt-logo-co-branding__item
      padding-left: 20px


.forgame-games-header__item
  position: relative
  cursor: pointer

  &:hover
    &:before
      height: 3px
      bottom: -10px

  &:before
    content: ''
    position: absolute
    height: 0
    width: 100%
    background-color: #FF4F12
    bottom: -7px
    transition-timing-function cubic-bezier(.77,.34,.39,.77)
    transition-duration .2s
    transition-property height, bottom

.forgame-games-header__item--is-active
  &:before
    height: 3px
    bottom: -10px

.forgame-games-body__item
  display: none

.forgame-games-body__item--is-active
  display: block

.forgame-white-line
  padding-bottom: 10px
  border-bottom: 2px solid white

.forgame-green-line
  padding-bottom: 10px
  border-bottom: 2px solid #466E1B
  min-height: 55px

.forgame-day-icon
  width: 50px
  height: 50px

.pseudo-full-width
  background-color: #fff
  width: 100vw
  position: relative
  left: calc((100% - 100vw) / 2)
  .rt-slide__arrow #new-abonent
    fill #fff!important
.rt-forgame
  .rt-col-md-3
    @media (max-width: mobile-upper-limit)
      max-width: calc(100% - 30px)
  .pseudo-full-width
    background-color: rgba(27,40,65,0.5)

    //background linear-gradient(to bottom, rgba(main-color, 0) 0%,  rgba(main-color, .75) 100%)

.forgame-main-image
  @media (max-width: tablet-upper-limit)
    max-width: calc(50vw - 20px)
  @media (max-width: mobile-upper-limit)
    max-width: calc(100vw - 20px)

.rt-forgame-small-image
  @media (max-width: mobile-upper-limit)
    height: 50px


.rt-forgame-linege
  @media (max-width: mobile-upper-limit)
    min-height: 180px
.rt-forgame-linege-row
  @media (max-width: mobile-upper-limit)
    max-width: 80%

.partner-offers
  &__header
    .rt-col-10
      @media (max-width: tablet-upper-limit)
        margin-top 5px
    &-title
      width 570px
      height 53px
      @media (max-width: tablet-upper-limit)
        width 480px
        height 45px
      &-text
        position absolute
        font-size 52px
        top -15px
  &__back-link
    &-button
      width 50px
      height 50px
      background-color: #3e235a
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
      border-radius 50%
      position relative
    &-arrow
      position absolute
      top 50%
      left 50%
      transform translateY(-50%) translateX(-50%)
  .rt-logo__rt-text
    margin-left -1%
  &__card-image
    max-height 85px
    max-width 195px
    vertical-align middle
    @media (max-width: tablet-upper-limit)
      max-height 55px
      max-width 142px
  &__main-block
    .rt-card,
    .rt-card__content
      min-height auto
  .helper
    height 100%
    vertical-align middle
    display inline-block
  .rt-card__image-wrapper
    vertical-align: middle
    height 155px
    @media (max-width: tablet-upper-limit)
      height 105px
  .rt-card__body
    @media (max-width: tablet-upper-limit)
      padding 0 30px

  .rtk-carousel__inner
    width: calc((100vw - 140px)/1.2)
    max-width: calc(1340px/1.2)
    @media (max-width: tablet-upper-limit)
      width calc((100vw - 20px) / 1.2)
      overflow visible!important
      .rtk-carousel-slide:first-child
        margin-left: 0
    @media (max-width: mobile-upper-limit)
      width calc(100vw - 20px)
      flex-direction column
  .rtk-carousel.is-touch-device .rtk-carousel-slide
    max-width 100vw

.gradient-header
  background linear-gradient(to right, #2f0045, #1c2c4d)

.additional-possibilities
  //.rtk-carousel__inner
  //  width calc(100vw - 140px)
  //  max-width none
  .rt-card__image-wrapper
    width 100%
    height auto

.a-p__popup
  &-upper-text-block,
  &-image,
  &-benefit
    flex-basis calc(50% - 10px)
    border-radius 10px
    padding 10px 0
    &s-list
      flex-wrap wrap
    .rt-card__background
      background-color light-grey
    .rt-card
      min-height auto
      padding-bottom 50px
      box-shadow none
    .rt-card__content
      min-height auto
  &-image
    background-repeat: no-repeat
    background-size 100%
    background-position: 50% 50%
  .rtb-popup
    padding 0

.tile-block
  display flex
  flex-direction row
  flex-wrap wrap
  .rt-card,
  .rt-card:hover
    box-shadow none//card-shadow--before-hovered
  &__ordered-item
    &--main
      @media (max-width: tablet-upper-limit)
        order -1
    &--secondary
      @media (max-width: tablet-upper-limit)
        order 1

.tile__item
  &+&
    margin-top 20px
  .additional-possibilities__card-image
    width 100%
    max-width 148px
  &--double-sized
    height 100%
    .additional-possibilities__card-image
      left -20px
      position relative
      margin-top 70px
      margin-bottom: 80px
      float left
      max-width: none
      width calc(100% + 40px)
      @media (max-width: tablet-upper-limit)
        max-width 700px
      @media (max-width: mobile-upper-limit)
        max-width none
    .rt-card,
    .rt-card__content
      height 100%

.rt-tabs
  .rt-card
    text-align left

.with-icon
  position relative
  @media (max-width: tablet-upper-limit)
    margin-left 25px
  &:before
    position absolute
    content: ''
    background-image: url('/static/images/B2B/purple.svg')
    top 3px
    left -25px
    width 20px
    height 20px

.block
  position: relative

.block-svg-green
  position: absolute
  background-image url('/static/images/B2B/b2b-screen-bg-green.svg')
  right: 0
  top: 0
  height: 538px
  width: 153px

.b2b-sceen-icon
  width: 54px
  height: 54px
  border-radius 50%
  background-color: #aaa
  box-sizing border-box

.b2b-screen-card
  display: flex
  flex-direction: column
  position: relative
  justify-content: space-around;
  min-height: 380px

.b2b-screen-card-image-1
  position: absolute
  right: 0
  bottom: 0
  height: 291px

.b2b-screen-card-image-2
  position: absolute
  right: 0
  bottom: -1px;
  height: 310px;

.b2b-screen-card__body
  flex: 1
.b2b-screen-card__footer
  flex: 0

.b2b-screen .rt-card
  box-shadow 0 0 5px 0 rgba(16, 24, 40, 0.2);
.b2b-screen .rt-tabs-navigation__item:hover .rt-tabs-navigation__item-name:before,
.b2b-screen .rt-tabs-navigation__item--is-active .rt-tabs-navigation__item-name:before
  border-bottom-color: main-color
.b2b-screen .flex-row
  flex-direction row
.b2b-screen .rt-tabs-content .rt-row-list__item
  padding-top: 16px
  padding-bottom: 16px






.winklp__first
  text-align: center


.winklp__first__label
  color #FF4F12
  font-size: 140px

.winklp__first__video
  width: 1066px
  height: 682px
  background-image url('/static/images/wink/img_1i2x1i8m.png')
  max-width: 100%
  background-size: contain
  background-repeat: no-repeat
  margin-left: auto
  margin-right: auto

.winklp__first__text
  font-size: 48px
  line-height: 54px

.winklp__first__second-text
  margin-top: 5px
  margin-bottom: 48px

.winklp__first__footr
  margin-bottom: 200px

.winklp__first__second-text
  font-size: 32px
  line-height: 39px


.winklp__second__text
  font-size: 60px
  line-height: 60px
  font-weight: 500

.orange-text
  color #FF4F12

.winklp__second__label-text
  font-size: 80px
  line-height: 68px

.winklp__second__label-subtext
  font-size: 32px
  line-height: 40px

.winklp__third
  margin-top: 180px

.winklp__third-label
  font-size: 80px
  line-height: 68px
  font-weight: 500

.winklp__third-text
  font-size: 32px
  line-height: 40px
  margin-top: 30px

.winklp__third__cards
  margin-top: 80px
  margin-left: 80px
  margin-right: 80px
  display: flex
  justify-content: space-between

.winklp__third__cards-item
  width: 480px
  padding-left: 40px
  padding-right: 40px
  padding-top: 40px
  color: #fff
  font-size: 18px
.winklp__pictures
  position: absolute
  right: 0
  display: flex
  top: 0
.winklp__third__cards-images
  text-align: center
  margin-top: 50px
.winklp__third__cards-images-item
  max-width: 100%

.winklp__third__cards-item--orange
  background-color: #FF4F12


.winklp__third__cards-item--blue
  background-color: #6588DF
  position: relative
  top: -80px
  color #fff

.winklp__third__cards-title
  font-size: 32px
winklp__third-text

.winklp__fourth

  margin-top: 160px
  height: 545px
  display: flex

.winklp__fourth__block
  flex: 1
  display: flex
  flex-direction column
  vertical-align middle
  align-items: center
  height: 545px

.winklp__pictures-zero
  position: absolute
  bottom: 0
  align-items: baseline
.winklp__fourth
  margin-left: 80px
  margin-right: 80px
.winklp__pictures__item
  position: relative
  transition-timing-function ease-in-out
  transition-duration 0.8s
  transition-property top, opacity
  top: 40px
  opacity: 0
  &+&
    margin-left: 20px



.winklp__pictures__item-zero-0
  width: 185px
  height: 241px
  transition-delay 0.8s


.winklp__pictures__item-zero-1
  width: 255px
  height: 307px

.winklp__pictures__item-zero-2
  width: 234px
  height: 280px
  transition-delay 0.8s

.winklp__pictures__item-first-0
  width: 371px
  height: 307px
  transition-delay 1.6s


.winklp__pictures__item-first-1
  width: 255px
  height: 307px
  transition-delay 1.2s

.winklp__pictures__item-first-2
  width: 234px
  height: 307px
  transition-delay 1.6s

.winklp__pictures__item-second-0
  width: 158px
  height: 191px
  transition-delay 2s

.winklp__pictures__item-second-1
  width: 283px
  height: 235px
  transition-delay 1.7s

.winklp__pictures__item-second-2
  width: 255px
  height: 191px
  transition-delay 2s

.winklp__pictures__item-image
  width: 0%
  height: 100%
  position: absolute
  top: 0
  left: 0
  -webkit-background-size: cover
  background-size: cover
.winklp__pictures__item--show
  top: 0
  opacity: 1
  .winklp__pictures__item-image--active
    width: 100%
    z-index 2
    opacity 1
    transition-timing-function cubic-bezier(.11, .34, .97, .33)
    transition-duration 0.8s
    transition-property width, opacity
.winklp__fourth__title
  font-size: 48px
  line-height: 54px
  font-weight: 500

.winklp__fourth__list
  margin-top: 40px

.winklp__fourth__list-item
  padding-left: 46px
  position: relative
  &:before
    content: ''
    background-image: url('/static/images/wink/Path.png')
    width: 20px
    height: 16px
    background-size: cover
    position: absolute
    left: 0
    top: 0
  &+&
    margin-top: 24px
.winklp__five
  padding-top: 80px
  padding-bottom: 80px
  background-color: #fff
  color: #000
  margin-top: 80px
.winklp__five__list
  display: flex
  margin-top: 65px

.winklp__five__list-item
  flex 1.4
  box-sizing border-box
  padding-top: 80px
  &+&
    flex 1
    padding-left: 100px
.winklp__five__list-item-big
  font-size: 32px
  line-height: 40px

@keyframes showCardForm
  0%
    opacity 0
    position: relative
    top 5vh

  99%
    opacity 1
    position relative
    top 0

  100%
    opacity 1
    top 0

@keyframes showCardForm2
  0%
    opacity 0
    position: relative
    top 5vh
  25%
    opacity 0
    position: relative
    top 5vh
  99%
    opacity 1
    position relative
    top 0

  100%
    opacity 1
    top 0
@keyframes showCardForm3
  0%
    opacity 0
    position: relative
    top 5vh
  50%
    opacity 0
    position: relative
    top 5vh
  99%
    opacity 1
    position relative
    top 0

  100%
    opacity 1
    top 0

.show-swipe-top-on-scroll
  animation 1s showCardForm linear

.winklp__first__label-image
  width: 400px
.winklp__pictures-zero
  .show-swipe-top-on-scroll
    animation 1s showCardForm linear
.winklp__pictures-first
  .show-swipe-top-on-scroll
    animation 2s showCardForm2 linear
.winklp__pictures-second
  .show-swipe-top-on-scroll
    animation 2.5s showCardForm3 linear
.winklp__fourth__block-image
  width: 270px
.winklp__fourth__block-content
  display: flex
  height: 100%
  flex-direction: row
  align-items center

.winklp__five

  .download-content
    margin-top: 40px
    padding-left: 30px
    padding-right: 15px
    padding-top: 10px
    padding-bottom: 10px
    border-radius 5px
    border 1px dashed
    .download-content__icon
      left: 15px
    .download-content__text
      display: inline-block
      opacity: 1
      color: #000
      margin-left: 12px
    .download-content__info
      display: inline-block
      margin-left: 15px
.winklp__five__list-item-big
  position: relative
  &:before
    content: ''
    width: 40px
    height: 56px
    background-image: url('/static/images/wink/icon-document.png')
    position: absolute
    top: 0
    left: 0
    background-size: cover
.winklp__five__list-item-bell
  position: relative
  &:before
    content: ''
    width: 40px
    height: 56px
    background-image: url('/static/images/wink/bell-icon.png')
    position: absolute
    top: 0
    left: 100px
    background-size: cover
.winklp__five__list-item-sim
  position: relative
  &:before
    content: ''
    width: 42px
    height: 56px
    background-image: url('/static/images/wink/sim-icon.png')
    position: absolute
    top: 0
    left: 100px
    background-size: cover

.icon-switch
  cursor: pointer;
.promo-phone-container
  min-height 470px
  height: 100vh
.promo-tablet-static
  @media (max-width: tablet-upper-limit)
    position: static
    min-width 100vw
//
//@media (max-width: tablet-upper-limit)
//  .icon-switch
//    position: absolute
//    left: -50px
//    right: 0
//    margin-left: auto
//    margin-right: auto
//    width: 240px
//    z-index: 2
//    top: 200px
//    opacity: 0
//    visibility: hidden
//    transition-timing-function ease-in-out
//    transition-duration .4s
//    transition-property opacity, visibility
//@media (max-width: mobile-upper-limit)
//  .icon-switch
//    left: -10px
//.icon-switch .rt-font-h4
//  display: inline-block
//  transition-timing-function ease-in-out
//  transition-duration .4s
//  transition-property outline, color, background-color, padding
//
//  padding-top: 3px
//
//
//.icon-switch--is-active .rt-font-h4
//  background-color: #7700FF
//  color #fff
//  padding-left: 10px
//  padding-right: 10px
//@media (max-width: tablet-upper-limit)
//  .icon-switch--is-active
//    opacity: 1
//    visibility: visible
//
//.new-iphone
//  background-image: url('/static/images/newIphone.png')
//  background-size: cover;
//  width: 308px
//  height: 459px
//  padding-left: 13px
//  padding-right: 10px
//  padding-top: 43px
//  box-sizing border-box
//  margin-left: auto
//  margin-right: auto
//
//@media (max-width: tablet-upper-limit)
//  .new-iphone
//    position: absolute;
//    left: -5px
//    right: 0
//
//
//.new-iphone__images
//  position: relative;
//  overflow: hidden
//  height 416px
//  width: 100%
//  @media (max-width: tablet-upper-limit)
//    background-image: url('/static/images/PATTERN.jpg')
//    background-size: cover;
//
//
//
//.new-iphone__images-item
//  position: absolute;
//  top: 0
//  left: 0
//  right: 0
//
//  max-width: 100%
//  width: 100%
//  opacity: 0
//  visibility: hidden
//  transition-timing-function ease-in-out
//  transition-duration .4s
//  transition-property opacity, visibility
//  @media (max-width: tablet-upper-limit)
//    display: none
//
//.new-iphone__images-item--is-active
//    opacity 1
//    visibility: visible
//
//.new-iphone--paginator
//  opacity: 0
//  visibility: hidden
//  display: flex
//  position: absolute;
//  justify-content center
//  left: 0
//  right: 0
//  bottom: 20px
//  @media (max-width: tablet-upper-limit)
//    opacity: 1
//    visibility: visible;
//
//.new-iphone--paginator-item
//  border 2px solid #101828
//  background-color: transparent
//  border-radius 50%
//  height: 8px
//  width: 8px
//  box-sizing border-box
//  cursor: pointer
//  transition-timing-function ease-in-out
//  transition-duration .4s
//  transition-property background-color
//.new-iphone--paginator-item+.new-iphone--paginator-item
//  margin-left: 8px
//.new-iphone--paginator-item--is-active
//  background-color: #101828
//  cursor: none
//.promo-mobile-icon svg
//  max-height 50px