.business-drive
  position relative
  &__header
    padding 10px 0
    position fixed
    top 0
    left 0
    right 0
    z-index 20
    //.button-wrapper
    //  margin-top 5px
    &-menu
      width calc(100% - 50px)
      display: inline-block
      vertical-align: middle
      margin-bottom -5px
      @media(max-width mobile-upper-limit)
        position: absolute
        top -100vh
        transition top .4s
      &--active
        @media(max-width mobile-upper-limit)
          display: block
          position: absolute
          top: 50px
          width: 100vw
          height: calc(100vh - 50px)
          left: -10px
          background-color b2c-white
          box-sizing border-box
          padding 20px
        .rt-scroll-tab-header
          display block
          height auto!important
          margin-left 0
        .rt-scroll-tab-nav
          flex-direction column
          justify-content flex-start
          height auto
          align-items flex-start
        .button-wrapper
          float none!important
  .mobile-burger
    width 24px
    height 3px
    margin 18px 0
    //float: right
    background-color: #313948
    position relative
    &:before,
    &:after
      position absolute
      content: ''
      width 100%
      height 3px
      left 0
      background-color: #313948
      transition-property top, bottom, transform
      transition-duration .3s
    &:before
      top -8px
    &:after
      bottom -8px
    &--active
      background-color: transparent
      &:before
        transform rotate(45deg)
        top 0
      &:after
        transform rotate(-45deg)
        bottom 0
    &-wrapper
      float: right
    @media(min-width tablet-lower-limit)
      display none
  &__footer
    padding 20px 0
    font-size 14px
    line-height 18px
  &__footer-link
    margin-left 30px
    @media(max-width mobile-upper-limit)
      margin-left: 0
    &+.business-drive__footer-link
      @media(max-width mobile-upper-limit)
        margin-left 20px
  &__tabs-wrapper
    display inline-block
    width auto
    //vertical-align: bottom
    .rt-scroll-tab-header
      height 34px
      &__item
        font-size 18px
        line-height 34px
        margin 0 20px
        position relative
        @media(max-width tablet-upper-limit)
          font-size 16px
          line-height 22px
        &:after
          position absolute
          content: ''
          width 0
          height 3px
          background-color main-color
          bottom -12px
          left 0
          transition width .3s linear
        &--active
          border-bottom-color transparent!important
          &:after
            width 100%
  .rt-logo
    vertical-align middle
  .button-wrapper
    float: right
  .rtb-popup
    background-color: #273656
    color b2c-white
    padding 0
    overflow-x hidden
    @media(max-width tablet-upper-limit)
      overflow-y auto
    &-close
      z-index 5
      path
        fill b2c-white
        fill-opacity 1
    .popup-image
      position relative
      width 100%
      height 290px
      background-size: cover
      background-position: 50% 50%
    .popup-title
      font-size 56px
      line-height 69px
      margin-bottom 40px
      margin-top -8px
      position relative
      @media(max-width mobile-upper-limit)
        font-size 27px
        line-height 37px
        margin-top: -4px
      .speaker-name__name,
      .speaker-name__surname
        border-width 8px
        @media(max-width mobile-upper-limit)
          border-width 4px
    .popup-title,
    .popup-reputation,
    .popup-description,
    .popup-theme
      padding 0 30% 0 20px
      @media(max-width mobile-upper-limit)
        padding-right 20px
    .popup-description
      padding-bottom 20px
      opacity .5
      font-size 28px
    .popup-theme
      margin-bottom: 35px
    .popup-reputation
      margin-bottom: 15px
    .row
      max-height none
  .map-block
    width 100%
    height 420px
    iframe
      max-width 100%
  .popup-content
    @media(max-width tablet-upper-limit)
      padding-bottom 50px
  .rt-scroll-tab-header__item
    @media(max-width mobile-upper-limit)
      font-size 18px
      line-height 24px
      font-weight 400
      margin 0
      margin-bottom 30px

.animated-text
  font-size 12vh
  line-height 12vh
  height 100vh
  padding-top 10vh
  box-sizing border-box
  display flex
  flex-direction column
  @media(max-width tablet-upper-limit)
    font-size 75px
    line-height 68px
    height 500px
  @media(max-width mobile-upper-limit)
    padding-top 60px
    font-size 34px
    line-height 37px
  &__line
    opacity 0
    &-item
      position relative
      &:after
        position absolute
        content: ''
        top calc(50% + 5px)
        left 0
        width 0
        height 20px
        background-color b2c-orange
        transform translateY(-50%)
        @media(max-width tablet-upper-limit)
          top calc(50% + 4px)
          height 14px
        @media(max-width mobile-upper-limit)
          height 7px
          top calc(50% + 2px)
  &--active
    .animated-text__first-line
      transform translateY(100%)
      opacity 0
      animation fadeIn1 .5s .3s ease-out forwards
    .animated-text__second-line
      transform translateY(140%)
      opacity 0
      animation fadeIn1 .5s .4s ease-out forwards
      .animated-text__line-item
        &:after
          animation lineThrough1 .4s .6s ease-out forwards
    .animated-text__third-line
      transform translateY(180%)
      opacity 0
      animation fadeIn1 .5s .5s ease-out forwards
      .animated-text__line-item
        &:after
          animation lineThrough1 .4s .8s ease-out forwards
    .animated-text__fourth-line
      transform translateY(220%)
      opacity 0
      animation fadeIn1 .5s .6s ease-out forwards
      .animated-text__line-item
        &:after
          animation lineThrough1 .4s 1s ease-out forwards
    .animated-text__fifth-line
      transform translateY(480%)
      opacity 0
      animation fadeIn1 .5s .9s ease-out forwards
    .animated-text__sixth-line
      animation fadeIn1 .4s 1.3s linear forwards
      transform translateY(100%)
    .animated-text__seventh-line
      animation fadeIn1 .4s 1.4s linear forwards
      transform translateY(100%)
    .animated-text__eighth-line
      font-size 32px
      line-height 40px
      margin-top 30px
      animation fadeIn2 .4s 1.7s linear forwards
      @media(max-width tablet-upper-limit)
        margin-top: 20px
      .meeting-legend
        padding-left 40px
        position relative
        display inline-block
        opacity .8
        animation bounce .5s 2.1s linear forwards
        @media(max-width tablet-upper-limit)
          font-size 21px
          line-height 34px
          padding-left 30px
        @media(max-width mobile-upper-limit)
          font-size 18px
          line-height 26px
        &:nth-child(2)
          margin-left 30px
          @media(max-width tablet-upper-limit)
            margin-left: 20px
          @media(max-width mobile-upper-limit)
            margin-left: 0
        .icon
          position absolute
          left 0
          top 5px
          width 30px
          height 30px
          @media(max-width tablet-upper-limit)
            width 20px
            height 20px
          @media(max-width mobile-upper-limit)
            top 0
    .animated-text__ninth-line
      transform translateY(480%)
      opacity 0
      animation fadeIn2 .4s 2.2s ease-out forwards
      .button-bounce
        animation bounce .5s 2.6s linear forwards
  &__footnote
    font-size 32px
    line-height 40px
    top 40px
    right -40px
    position absolute
    min-width 240px
    transform translateX(100%)
    @media(max-width tablet-upper-limit)
      font-size 22px
      line-height 28px
      top 26px
      right -20px
    @media(max-width mobile-upper-limit)
      font-size 12px
      line-height 14px
      top 10px
      right -9px
  .rt-button
    height 55px

.first-gradient-section
  background linear-gradient(to bottom, #001c45, #002845 16%, #450031 50%, #001c45);

.second-gradient-section
  background linear-gradient(to bottom, #001c45, #002845 16%, #003d45 50%, #1c2c4d);

.rt-portrait-tile-gallery
  color b2c-white
  &__item
    border-radius 8px
    margin-top vertical-space
    position relative
    overflow hidden
    min-height 373px
    cursor pointer
    @media(max-width tablet-upper-limit)
      height calc((100vw - 60px) / 2)
      border-radius 8px
      min-height auto
    @media(max-width mobile-upper-limit)
      height calc(100vw - 40px)
    &:after
      position absolute
      content: ''
      top 0
      left 0
      bottom 0
      right 0
      background-color: #001C45
      opacity .37
      width 100%
      height 100%
    &-description
      position absolute
      bottom 20px
      left 20px
      z-index 2
  &__image
    position: absolute
    top: 0
    bottom: 0
    height: 100%
    left: 50%
    transform: translateX(-50%)
    width: auto
  &__description,
  &__theme
    display none

.speaker-name
  display flex
  flex-direction column
  font-size 27px
  line-height 37px
  @media(max-width tablet-upper-limit)
    font-size 21px
    line-height 29px
  &__name
    border-top 4px solid b2c-orange
    border-bottom 4px solid b2c-orange
    display inline-block
  &__surname
    border-bottom 4px solid b2c-orange
    display inline-block

.color-white03
  color rgba(b2c-white, .3)
  @media(max-width tablet-upper-limit)
    color rgba(b2c-white, .5)

.business-drive__motto
  height 860px
  @media(max-width tablet-upper-limit)
    height 100vw
  @media(max-width mobile-upper-limit)
    height 200vw
  &-text
    position absolute
    top 50%
    transform translateY(-50%)

.rt-timeline
  position relative
  &:after
    position absolute
    content: ''
    top 0
    bottom 0
    width 8px
    background-color b2c-orange
    left calc((100% - 8px) / 2)
    @media(max-width tablet-upper-limit)
      width 6px
      left calc((100% - 6px) / 2)
    @media(max-width mobile-upper-limit)
      left 0
      width 4px
  &__item
    color b2c-white
    font-weight 500
    width 50%
    margin-left 50%
    padding-left 10px
    position relative
    @media(max-width mobile-upper-limit)
      width 100%
      margin-left: 0
      margin-top 0!important
      &+&
        margin-top 40px!important
    .rt-timeline__item-image-wrapper
      left 200px
      @media(max-width tablet-upper-limit)
        left 165px
    &:nth-child(2n - 1)
      text-align: right
      margin-left: 0
      padding-right 10px
      padding-left: 0
      @media(max-width mobile-upper-limit)
        text-align left
        padding-right 0
        padding-left 10px
      .rt-timeline__item-image-wrapper
        right 200px
        left auto
        @media(max-width tablet-upper-limit)
          right 165px
    .timestamp
      position relative
      padding-top 5px
      padding-bottom 2px
      width 177px
      display: inline-block
      font-weight 500
      @media(max-width tablet-upper-limit)
        width 118px
      &:before,
      &:after
        position absolute
        content ''
        width 100%
        height 4px
        background-color b2c-white
        left 0
      &:before
        top 0
      &:after
        bottom 0
      &-wrapper
        z-index 2
        position relative
    &--important
      .timestamp
        color b2c-orange
        font-size 56px
        padding-bottom 0
        width 232px
        @media(max-width tablet-upper-limit)
          width 176px
          font-size 46px
          line-height 1
          padding-top 10px
          padding-bottom 5px
        &:before,
        &:after
          background-color b2c-orange
          height 8px
          @media(max-width tablet-upper-limit)
            height 6px
      .rt-timeline__item-theme,
      .rt-timeline__item-speaker
        text-align left
    &-image
      position: absolute
      top: 0
      bottom: 0
      width: auto
      left: 50%
      transform: translateX(-50%)
      height 100%
      &-wrapper
        width 275px
        height 183px
        position absolute
        top -94px
        z-index 1
        @media(max-width tablet-upper-limit)
          width 198px
          height 132px
          top -71px
        @media(max-width mobile-upper-limit)
          display none
    .rt-timeline__item-speaker
      margin-top vertical-space
      @media(max-width tablet-upper-limit)
        margin-top vertical-space * .5
    &-description,
    &-reputation
      display none

.clickable
  cursor pointer

.video-wrapper
  width 100%

.slider-block-title
  &__item
    font-size 36px
    line-height 42px
    @media(max-width tablet-upper-limit)
      font-size 32px
      line-height 40px
  &__first-line
    @media(max-width mobile-upper-limit)
      font-size 27px
      line-height 35px
  &__second-line
    @media(max-width mobile-upper-limit)
      font-size 21px
      line-height 35px

.address-text
  font-size 27px
  line-height 35px
  @media(max-width tablet-upper-limit)
    font-size 20px
    line-height 26px
  @media(max-width mobile-upper-limit)
    font-size 18px
    line-height 24px

.desktop-only
  @media(max-width tablet-upper-limit)
    display none

.thanx-popup
  .rtb-popup
    padding 80px 100px
    @media(max-width tablet-upper-limit)
      padding 40px
    @media(max-width mobile-upper-limit)
      padding 40px 20px
    .popup-content
      padding-bottom: 0
  .rt-button
    width 177px
    @media(max-width mobile-upper-limit)
      width 110px
      height 34px
  .rtb-popup-close
    @media(max-width mobile-upper-limit)
      top 10px
      right 10px

.business-drive__copyright
  @media(max-width mobile-upper-limit)
    display block
    margin-bottom 18px

.rt-scrollbar__wrapper
  //height 100%!important
  .rtb-popup--bottom-center &
    max-height calc(100vh - 80px)
    @media (max-width: tablet-upper-limit)
      max-height calc(100vh - 40px)
    @media (max-width: mobile-upper-limit)
      max-height calc(100vh - 20px)
  .rtb-popup--center-center &
      max-height 80vh
    @media (max-width: tablet-upper-limit)
      max-height calc(100vh - 40px)
    @media (max-width: mobile-upper-limit)
      max-height calc(100vh - 20px)

.rt-scrollbar-transition,
.rt-scrollbar__scrollbar-vertical
  transition: all 0.5s ease

.rt-scrollbar-transition--scrollbar
  transition: opacity 0.5s linear

.rt-scrollbar__wrapper
  margin: 0 auto
  overflow: hidden
  position: relative

.rt-scrollbar__wrapper:hover .rt-scrollbar__scrollbar-vertical
  opacity: 1

.rt-scrollbar__scrollbar-vertical
  opacity: 0.5
  position: absolute
  background: transparent

.rt-scrollbar__scrollbar-vertical:hover
  background: rgba(16, 24, 40, 0.6)

.rt-scrollbar__scrollbar-vertical .scrollbar
  position: relative
  background: rgba(16, 24, 40, 0.6)
  border-radius: 10px
  cursor: default

.rt-scrollbar__scrollbar-vertical
  width: 10px
  height: 100%
  top: 0
  right: 0

.rt-scrollbar__scrollbar-vertical .scrollbar
  width: 10px



@keyframes fadeIn1
  //0%
  //  transform translateY(150px)
  //  opacity 0
  50%
    opacity .1
  100%
    transform translateY(0)
    opacity 1

@keyframes fadeIn2
  0%
    opacity 0
  100%
    opacity 1

@keyframes lineThrough1
  0%
    width 0
  100%
    width 100%

@keyframes bounce
  0%
    transform scale(1)
    opacity .8
  50%
    opacity 1
    transform scale(1.015)
  100%
    opacity 1
    transform scale(1)