=d
  @media only screen and (max-width: "1120px")
    @content
=t
  @media only screen and (max-width: "1023px")
    @content
=m
  @media only screen and (max-width: "599px")
    @content
=s
  @media only screen and (max-width: "474px")
    @content

+font(ProximaNova-Regular, ProximaNova-Regular)
=f
  font-family: 'ProximaNova-Regular', sans-serif
+font(ProximaNova-Bold, ProximaNova-Bold)
=fb
  font-family: 'ProximaNova-Bold', sans-serif
+font(ProximaNova-SemiBold, ProximaNova-SemiBold)
=fs
  font-family: 'ProximaNova-SemiBold', sans-serif
+font(ProximaNova-Light, ProximaNova-Light)
=fl
  font-family: 'ProximaNova-Light', sans-serif

$pink: #FF9393
$pink-light: #FDF8F9
$pink2: #FEB9B9
$purple: #B995D9
$green: #8ECFC0
$green-light: #5BD700
$cyan: #B6DFD6
$gray: #A7A7A7
$blue: #4A90E2
$viol: #B995D9
$viol2: #A186BD
$bg: #f8f8f8
$border: #E6E6E6
$cl: #191919

@keyframes blinker
  50%
    opacity: 0

@keyframes iridescent
  0%
    background-position: 0% 50%
  50%
    background-position: 100% 50%
  100%
    background-position: 0% 50%

body
  min-width: 360px
  +f
  font-size: 15px
  color: $cl
  line-height: 1.333
  +t
    font-size: 14px
    line-height: 1.57
  &.no-scroll
    overflow: hidden
button,
input,
textarea,
select
  +f
  font-size: 15px
button
  background: none
a
  color: $pink
  text-decoration: none
input,
textarea
  text-overflow: ellipsis
  &::placeholder
    color: $gray
textarea
  border: none
strong,
b
  +fb

*
  &::selection
    background: $pink
    color: white
  // box-shadow: 0 0 0 1px red

.bold
  +fb

button
  &:disabled
    cursor: not-allowed

.outer
  display: flex
  min-height: 100vh
  flex-direction: column

.container
  flex: 1 0 auto
  margin-top: 100px

.center
  width: 100%
  max-width: 1024px
  margin: 0 auto
  padding: 0 40px
  +t
    padding: 0 15px
  &_md
    max-width: 860px
  &_sm
    max-width: 800px
  &_xs
    max-width: 540px

.text-center
  text-align: center

.btn
  position: relative
  padding: 13px 24px 12px
  background-image: linear-gradient(-225deg, #D1FF7F 0%, #56FFFD 100%)
  border-radius: 3px
  +fb
  font-size: 12px
  color: $cl
  text-transform: uppercase
  letter-spacing: 2px
  text-align: center
  transition: all .2s
  z-index: 2
  +t
    line-height: 1.33
  +m
    padding: 13px 20px 12px
    letter-spacing: 1px
  &:disabled
    &:hover
      box-shadow: none
  &:active
    box-shadow: 0 0 0 0 rgba(0,0,0,0)
    color: rgba(#262626,.1)
    .icon
      fill: rgba(#262626,.1)
  &__title,
  .icon
    display: inline-block
    vertical-align: middle
  &__title
    margin-top: -1px
  .icon
    position: relative
    top: -1px
    margin-right: 15px
    fill: $cl
    transition: fill .2s
  &_dark
    background: $cl
    color: white
    &:hover
      background: #545454
    &:active
      color: rgba(white,.1)
  &_light
    background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  &_stroke
    &:hover,
    &:active
      &:before
        opacity: 0
    &:before
      content: ''
      position: absolute
      top: 1px
      left: 1px
      right: 1px
      bottom: 2px
      background: white
      border-radius: 2px
      transition: opacity .2s
      z-index: -2
  &_fb
    background: #3957A7
    color: white
    &:active
      color: rgba(white,.2)
      .icon
        fill: rgba(white,.2)
    .icon
      margin: -9px 15px -6px -25px
      font-size: 20px
      fill: white
  &_gray
    background: $bg
  &_light-gray
    background: white
    border: 1px solid $gray
    color: $gray

    &:hover,
    &:active
      color: $cl
  &_white
    background: white
  &_pink
    background: #ff9393
    color: white
  &_stroke-black
    background: none
    border: 1px solid $cl
    color: $cl
  &_pink-blue
    background-image: linear-gradient(100deg, #8febff, #ffa2cb)
  &_md
    padding: 18px 24px 17px
    +m
      padding: 13px 24px 12px
  &_lg
    padding: 28px 40px 27px
    +m
      padding: 13px 20px
  &_lg#{&}_stroke
    padding: 27px  39px 26px
    +m
      padding: 12px 19px
  &_icon
    padding-left: 9px
    padding-right: 9px
    background: transparent
    border: 1px solid $border
    font-size: 0
    .icon
      margin: 0
      font-size: 13px
      fill: $cl
  &.loading
    box-shadow: none
    color: transparent
    .icon
      visibility: hidden
    &:after
      content: ''
      position: absolute
      top: 50%
      left: 50%
      width: 24px
      height: 24px
      margin: -12px 0 0 -12px
      border: 3px solid $cl
      border-left: 3px solid transparent
      border-radius: 50%
      animation: loading .6s infinite linear
  &_fb
    background: #3957A7
    color: white
    &:active
      color: rgba(white, .2)
      .icon
        fill: rgba(white, .2)
    .icon
      margin: -9px 15px -6px -25px
      font-size: 20px
      fill: white
    &.loading
      box-shadow: none
      color: transparent
      .icon
        visibility: hidden
      &:after
        content: ''
        position: absolute
        top: 50%
        left: 50%
        width: 24px
        height: 24px
        margin: -12px 0 0 -12px
        border: 3px solid #fff
        border-left: 3px solid transparent
        border-radius: 50%
        animation: loading .6s infinite linear

@keyframes loading
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

a.btn
  display: inline-block

.logo
  display: block
  width: 219px
  height: 71px
  background: url(../img/school-lil-city.svg) no-repeat 0 0 / contain
  +t
    width: 180px
    height: 58px

.search
  position: relative
  width: 40px
  height: 40px
  +m
    width: 100%
  &__input
    position: absolute
    top: 0
    right: 0
    width: 40px
    height: 40px
    padding: 0 15px
    background: rgba($cl,.1)
    border-radius: 20px
    color: rgba($cl,.8)
    transition: width .4s
    +m
      width: 100%
  &__btn
    position: absolute
    top: 0
    right: 0
    bottom: 0
    width: 40px
    .icon
      font-size: 17px
      fill: rgba($cl,.5)
      transform: translate(0,2px)
  &.open &__input
    width: 170px
    +m
      width: 100%

.header
  position: absolute
  left: 0
  right: 0
  z-index: 100
  &--shadow
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08)
  &__container
    display: flex
    height: 100px
    border-bottom: 1px solid $border
    align-items: center
    +t
      height: 65px
    +m
      height: 70px
      margin: 0 -15px
      justify-content: space-between
  &__wrap
    display: flex
    align-items: center
    flex-direction: row-reverse
    flex: 1 0 auto
    +m
      display: none
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: white
      flex-direction: column
      z-index: 20
      &.visible
        display: block
  &__actions
    display: flex
    margin: auto
    align-items: center
    justify-content: center
    +m
      position: absolute
      top: 100%
      left: 0
      right: 0
      padding: 10px 15px
      background: white
  &__status
    width: 100px
    margin-right: 5px
    +fb
    font-size: 12px
    color: $gray
    letter-spacing: 1px
  &__btn
    margin-left: 10px
  &__top
    +m
      display: flex
      height: 70px
      border-bottom: 1px solid $border
      align-items: center
  &__search
    +m
      margin-left: 10px
      flex: 0 0 calc(100% - 90px)
  &__nav
    display: flex
    position: absolute
    transform: translateX(-50%)
    left: 50%
    +t
      position: static
      transform: none
      left: auto
    +m
      display: block
      height: calc(100vh - 71px)
      margin: 0
      padding: 15px 0
      overflow: auto
      position: static
      transform: none
      left: auto
  &__group
    position: relative
  &__group:hover &__section
    color: $cl
    +m
      color: $pink
  &__group:hover &__list
    opacity: 1
    visibility: visible
  &__section
    display: block
    height: 100px
    margin: 0 15px
    border-bottom: 1px solid transparent
    +fb
    font-size: 12px
    color: #8C8C8C
    line-height: 100px
    transition: color .2s
    +t
      height: 65px
      font-size: 10px
      line-height: 65px
    +m
      position: relative
      height: auto
      margin: 0
      padding: 15px 40px 15px 20px
      border: none
      font-size: 14px
      color: $pink
      letter-spacing: 2.5px
      line-height: 1.33
    &_sub
      +m
        &:before,
        &:after
          content: ''
          position: absolute
          top: 50%
          background: $gray
          transform: translateY(-50%)
        &:before
          right: 20px
          width: 12px
          height: 2px
        &:after
          right: 25px
          width: 2px
          height: 12px
    &.active
      border-color: $cl
      color: $cl
      +m
        color: $pink
    &.open
      +m
        &:after
          opacity: 0
  &__dot
    position: absolute
    top: 50%
    right: 3px
    width: 7px
    height: 7px
    margin-top: -5px
    background: #EE4630
    border-radius: 50%
    animation: blinker 2s linear infinite
    +t
      width: 6px
      height: 6px
      margin-top: -4px
    +m
      display: none
  &__list,
  &__drop
    position: absolute
    top: 100%
    left: 50%
    width: 190px
    margin-left: -95px
    padding: 10px 0
    background: white
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10)
    border-radius: 2px
    opacity: 0
    visibility: hidden
    transform: translate3d(0,0,0)
    transition: opacity .2s, visibility .2s
    overflow: hidden
  &__list
    +m
      display: none
      position: static
      width: 100%
      margin: 0
      box-shadow: none
      opacity: 1
      visibility: visible
  &__drop
    left: auto
    right: 20px
    margin: 0
    +m
      padding: 0
  &__drop &__link
    +m
      padding: 8px 20px 7px
    &_border
      +m
        padding: 12px 20px 10px
  &__balance
    margin-bottom: 10px
    padding: 0 20px 10px
    border-bottom: 1px solid $border
  &__link
    display: block
    position: relative
    padding: 8px 20px 7px
    +fb
    font-size: 10px
    color: #8C8C8C
    text-transform: uppercase
    transition: color .2s
    +m
      padding: 11px 20px
      font-size: 12px
      color: $cl
    &:hover
      color: $cl
    &_green
      color: $green-light
      +m
        color: $green-light
      &:hover
        color: darken($green-light,10)
    &_gray
      color: $gray
      +m
        color: $gray
    &_border
      margin-bottom: 5px
      padding: 2px 20px 10px
      border-bottom: 1px solid $border
      color: $cl
  &__link.active &__title
    &:after
      content: ''
      position: absolute
      top: 50%
      left: -10px
      right: -10px
      height: 2px
      margin-top: -2px
      background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  &__title
    display: table
    position: relative
  &__menu,
  &__enter,
  &__close
    +m
      display: block
      width: 60px
      height: 60px
      font-size: 0
  &__menu,
  &__close
    display: none
    +m
      display: block
    .icon
      fill: $cl
  &__menu
    .icon
      font-size: 10px
  &__close
    .icon
      font-size: 20px
  &__enter
    height: 100px
    margin-left: 40px
    +fb
    font-size: 12px
    color: #8C8C8C
    line-height: 100px
    transition: color .2s
    +t
      height: 65px
      margin-left: 25px
      font-size: 10px
      line-height: 65px
    +m
      margin: 0
      line-height: 1
      width: 90px
      color: black
    &:hover
      color: $cl
    .icon
      display: none
      +m
        display: inline-block
        font-size: 20px
        fill: $cl
  &__login
    position: relative
    margin-right: -20px
    padding: 30px 20px
    flex: 0 0 80px
    +t
      margin-right: -15px
    +m
      margin: 0
      padding: 15px 20px
  &__login:hover &__drop
    opacity: 1
    visibility: visible
  &__ava
    height: 40px
  &_bg &__container
    border-color: transparent
  &__bonuses
    padding: 5px 12px
    white-space: nowrap
    border: 1px solid rgba(25, 25, 25, 0.1)
    position: relative
    margin-left: 20px
    border-radius: 20px
    height: 40px
    font-size: 18px
    text-align: center
  &__bonuses-link
    color: rgba(25, 25, 25, 0.3)
  &__lil-coin-img
    margin-bottom: -5px
  &__lil-coin-img-salut
    position: absolute
    height: 65px
    left: -9px
    top: -15px
    opacity: 0

.main
  display: flex
  position: relative
  min-height: 500px
  padding: 120px 0 50px
  background-position: 50% 50%
  background-repeat: no-repeat
  background-size: cover
  text-align: center
  z-index: 4
  +t
    min-height: 350px
    padding: 137px 0 40px
  +m
    min-height: 400px
  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    opacity: .8
    z-index: -2
    background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  &__center
    margin: auto
  &__title
    max-width: 780px
    margin: 0 auto 40px
    +fb
    font-size: 50px
    line-height: (6/5)
    +t
      max-width: 400px
      font-size: 24px
      line-height: 1.33
    +m
      margin-bottom: 50px
  &__bold
    +fb
  &__content
    margin-bottom: 30px
  &__time
    padding: 7px 0
    +fb
    font-size: 20px
    text-transform: uppercase
    letter-spacing: 3px
  &__btn
    margin: 0 10px
    &:hover
      box-shadow: 0 5px 20px 0 rgba(0,0,0,0.11)
    +m
      margin: 0 0 10px
  &__foot
    margin-top: 30px
  &__foot,
  &__list
    display: flex
    justify-content: center
    align-items: center
  &__go
    font-size: 0
    .icon
      font-size: 32px
      fill: black
      +m
        font-size: 24px
  &__nav
    padding: 0 15px
    +m
      padding: 0 10px
  &__link
    margin: 0 15px
    font-size: 12px
    color: #888
    text-transform: uppercase
    +m
      margin: 0 10px
    &.active
      +fb
      color: black
  &__socials
    position: fixed
    z-index: 500
    top: 50%
    right: 15px
    transform: translateY(-50%)
    +t
      right: 5px
    +m
      display: none
  &__social
    display: block
    padding: 10px
    font-size: 0
    text-align: center
    +nl
      margin-bottom: 10px
    .icon
      font-size: 16px
      &-facebook
        font-size: 18px
  &_green
    &:before
      background-image: linear-gradient(-225deg, #E2E2E2 0%, #E2FFDF 100%)
  &_sm
    min-height: 0
    padding: 135px 0 55px
    +t
      min-height: 0
    +m
      min-height: 0
  &_sm &__title
    margin-bottom: 0
  &_default
    padding-top: 200px
    padding-bottom: 125px
  &_default &__center
    margin: 0 auto
  &_default &__title
    margin-bottom: 25px
    +f
    font-size: 40px
    +t
      max-width: 480px
      margin-bottom: 40px
      font-size: 24px
    +m
      margin-bottom: 30px
      font-size: 20px
  &__subtitle
    margin-bottom: 25px
    +f
    font-size: 20px
    +t
      margin-bottom: 40px
      font-size: 20px
    +m
      margin-bottom: 30px
      font-size: 15px

a[name]
  .title
    color: #000

.title
  position: relative
  margin-bottom: 35px
  +f
  font-size: 32px
  line-height: (35/32)
  z-index: 4
  +t
    max-width: 420px
    margin: 0 auto 20px
    font-size: 24px
    line-height: 1.33
  &_center
    text-align: center
  &_sm
    margin-bottom: 20px
    font-size: 25px
  &_light
    font-family: 'ProximaNova-Light', serif

.subtitle
  margin-bottom: 25px
  +fb
  font-size: 20px
  letter-spacing: 4px
  text-transform: uppercase
  +m
    margin-bottom: 15px
    font-size: 12px
    letter-spacing: 2px
  &_center
    +t
      text-align: center

.subtitle2
  margin-bottom: 20px
  font-size: 18px
  font-weight: bold

.text
  position: relative
  max-width: 620px
  margin: 0 auto 60px
  +fl
  font-size: 24px
  text-align: center
  z-index: 2
  +t
    max-width: 400px
    margin-bottom: 40px
    font-size: 14px
    line-height: 1.5
  +m
    margin-bottom: 30px
  p
    &:not(:last-child)
      margin-bottom: 35px
      +t
        margin: 5px 5px 15px 5px
  &__curve
    position: absolute
    pointer-events: none
    z-index: -2
    &_one
      left: -95px
      bottom: 5px
      +t
        left: -85px
        bottom: -60px
      +m
        width: 200px
        left: 0
        top: -10px
        bottom: auto
    &_two
      left: -105px
      bottom: -50px
      +t
        left: -85px
      +m
        left: 0
        bottom: -15px
        width: 150px
    &_three
      left: -65px
      bottom: -35px
      +t
        left: -85px
      +m
        left: 0
        bottom: -10px
    &_four
      left: -75px
      bottom: -45px
      +t
        left: -60px
        width: 90px
      +m
        left: 30px
        bottom: -20px
    &_five
      left: -100px
      bottom: -90px
    &_six
      left: -200px
      bottom: -90px
  &_left
    text-align: left
  &_lg
    max-width: 740px
  &_mb0
    margin-bottom: 0
    +t
      margin-bottom: 0
    +m
      margin-bottom: 0
  &_only_curve
    margin: 0 auto 10px
  &_only_curve &__curve_one
    left: -75px
    bottom: -25px
    +t
      left: -180px
      bottom: -40px
    +m
      top: auto
      left: -55px
      bottom: -15px
  &_arts
    max-width: 500px
    margin-bottom: 65px
    +f
    font-size: 20px
  &_arts &__curve_two
    bottom: 35px
  &_courses
    max-width: 670px
    margin-bottom: 75px
    +f
    font-size: 20px

.section
  padding: 50px 0
  +t
    padding: 30px 0
  +m
    padding: 20px 0
  &_gray
    background: $bg
  &_pink-light
    background: $pink-light
  &_border
    position: relative
    &:after
      content: ''
      position: absolute
      top: 100%
      left: 50%
      width: 100%
      max-width: 944px
      height: 1px
      background: $border
      transform: translateX(-50%)
      +t
        max-width: calc(100% - 30px)
  &_gradient
    background-image: linear-gradient(-225deg, $bg 0%, #FFF2F2 100%)
  &_tabs
    padding-top: 20px
    +m
      padding-top: 10px
  &_menu
    padding: 20px 0
  &_confirm
    padding: 30px 0 50px
  &_counters
    padding-top: 0px
  &_benefits
    padding: 95px 0 100px
    background: $bg
    +t
      padding: 65px 0 55px
    +m
      padding: 45px 0
  &_arts
    padding: 70px 0 70px
    overflow: hidden
    +t
      padding: 80px 0 70px
    +m
      padding: 45px 0
  &_courses
    padding: 95px 0 85px
    background: $bg
    +t
      padding: 80px 0 40px
  &_video
  	padding: 70px 0 70px
  &_flex &__center
    display: flex

  &__column
    flex: 50%

    &_img
      background-position: bottom center
      background-size: contain

    &_text
      padding-right: 20px

  &__column .text
    font-size: 20px

  &__title
    font-size: 30px
    margin-bottom: 40px
    font-family: 'ProximaNova-Bold', sans-serif

  &__buttons
    margin-bottom: 45px

    & .btn
      border-radius: 10px
      box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.1)

  &_video &__column_img
    text-align: center

    & img
      height: 270px
      border-radius: 10px
      box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.2)
      width: auto

  &_video .btn
    box-shadow: 0 11px 24px 0 rgba(255, 147, 147, 0.3)

  &_counters .text_only_curve
    margin-bottom: 0


.reviews-section
  background: linear-gradient(to bottom, rgba(248,248,248,1) 0%, rgba(254,244,244,1) 100%)
  padding: 0
  &__center
    display: flex
    height: 650px
    +m
      padding-bottom: 20px
      flex-direction: column
  &__title
    flex: 0 0 60%;
    padding-right: 100px
    padding-top: 150px
    +m
      padding: 20px 0 0
      flex: 0
      text-align: center
    .text
      text-align: left
      +m
        text-align: center

.ava
  display: block
  position: relative
  overflow: hidden
  &__pic
    display: block
    width: 100%
    height: 100%
    border-radius: 50%
    object-fit: cover
  &__input
    position: absolute
    top: 0
    right: 0
    font-size: 140px
    appearance: none
    cursor: pointer
    z-index: 2
  &__icon
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%,-50%)
    font-size: 0
    .icon
      font-size: 30px
      fill: white

.likes
  display: flex
  color: $cl
  align-items: center
  &__counter
    margin-right: 5px
    +fb
    font-size: 13px
    +t
      font-size: 12px
  &__icon
    position: relative
    font-size: 0
  &.active
    .icon
      display: none
      &-like-fill,
      &-like-fill-bold
        display: block
  .icon
    position: relative
    top: -1px
    font-size: 14px
    fill: $cl
    &-like-fill,
    &-like-fill-bold
      display: none
      fill: $pink
    &-like-fill-bold
      position: relative
      top: -1px

.user
  display: flex
  align-items: center
  &__ava
    height: 40px
    margin-right: 10px
    flex: 0 0 40px
  &__ava
    height: 40px
    margin-right: 10px
    flex: 0 0 40px
  &__info
    flex: 0 0 calc(100% - 50px)
    display: flex
  &__name,
  &__date
    +fb
    font-size: 10px
    text-transform: uppercase
    letter-spacing: 0.5px
    line-height: 1.1
  &__meta
    flex: 1
    display: flex
    align-items: center
  &__date
    color: $gray
  &__likes
    margin: -5px 0 -5px auto
    +f
    font-size: 15px
    .icon
      fill: $gray
      &-fill
        fill: $pink
  &_white &__date
    color: white

.video
  display: block
  position: relative
  &__pic
    display: block
    width: 100%
  .icon-play
    position: absolute
    top: 50%
    left: 50%
    font-size: 48px
    fill: white
    transform: translate(-50%,-50%)
    +m
      font-size: 22px
  &__soon
    display: flex
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    padding: 20px
    background: rgba($cl,.5)
    align-items: center
    justify-content: center
    flex-direction: column
    color: white
  &__title
    margin-bottom: 20px
  &__time
    +fb
    font-size: 20px
    text-transform: uppercase
    letter-spacing: 3px

.about
  display: flex
  padding-right: 60px
  +t
    padding: 0
  &__ava
    height: 120px
    margin-right: 40px
    flex: 0 0 120px
    +t
      margin-right: 25px
      height: 90px
      flex: 0 0 90px
    +m
      margin-right: 15px
      height: 60px
      flex: 0 0 60px
  &__content
    margin-bottom: 20px
    font-size: 18px
    p
      margin-bottom: 18px
  &__ceo
    margin-bottom: 20px
    font-size: 16px
    a
      +fb
  &__video
    margin-bottom: 20px
    +t
      max-width: calc(100% - 55px)
    +m
      max-width: 100%
  &__more
    text-align: center
    +t
      text-align: left

.online
  display: block
  position: relative
  padding-top: 55px
  background-position: 50% 50%
  background-repeat: no-repeat
  background-size: cover
  color: black
  text-align: center
  z-index: 4
  +t
    padding-top: 30px
  +m
    padding-top: 20px
  &__type
    margin-bottom: 85px
    // +fb
    font-size: 20px
    letter-spacing: 4px
    +t
      margin-bottom: 30px
      font-size: 12px
      letter-spacing: 2px
    +m
      margin-bottom: 40px
  &__title
    margin-bottom: 20px
    font-size: 35px
    line-height: (6/5)
    +t
      margin-bottom: 15px
      font-size: 24px
  &__text
    max-width: 600px
    font-size: 20px
    font-family: 'ProximaNova-Regular', sans-serif
    margin-bottom: 0
    +m
      max-width: 80%
  &__action
    +fb
    font-size: 10px
    letter-spacing: 1px
    .icon
      position: relative
      top: 4px
      margin-right: 15px
      font-size: 16px

.benefits
  display: flex
  position: relative
  max-width: 890px
  margin: 0 auto 80px
  text-align: center
  flex-wrap: wrap
  justify-content: center
  z-index: 4
  +t
    margin: 0
  +m
    display: block
  &__item
    padding: 0 15px
    flex: 0 0 25%
    +t
      margin-bottom: 40px
      flex: 0 0 33.33%
    +m
      padding: 0
  &__preview
    display: flex
    height: 45px
    margin-bottom: 20px
    align-items: center
    justify-content: center
    +m
      height: auto
      margin-bottom: 15px
    .icon
      &-thumb
        font-size: 43px
      &-wallet
        font-size: 38px
      &-location
        font-size: 40px
      &-searching
        font-size: 37px
  &__title
    display: flex
    min-height: 38px
    margin-bottom: 10px
    +fb
    font-size: 14px
    letter-spacing: 2.5px
    line-height: 1.42
    text-transform: uppercase
    align-items: center
    justify-content: center
    +m
      min-height: 0
  &__content
    +t
      font-size: 12px
    +m
      font-size: 14px
  &_colors
    max-width: 100%
    margin: 0
    +t
      margin-bottom: -40px
    +m
      display: flex
      margin-bottom: -30px
  &_colors &__item
    +t
      flex: 0 0 50%
    +m
      margin-bottom: 30px
  &_colors &__preview
    margin-bottom: 25px
    +m
      margin-bottom: 10px
      height: 45px
    .icon
      fill: #ff3837
  &_colors &__title
    min-height: 0
    margin-bottom: 10px
    letter-spacing: .5px
  &_colors &__content
    +m
      line-height: 1.2

.reviews
  width: 300px
  height: 650px
  overflow: hidden
  position: relative
  +m
    width: 100%
  &__wrap
    transition: top 3s linear
    position: absolute
    display: flex
    flex-direction: column
  &__item
    margin: 10px 0
    width: 100%
    +m
      max-width: 600px
      margin: 10px auto

.gallery
  display: flex
  margin: 0 -10px -20px
  +m
    display: block
    margin: 0 -5px -10px
  &__grid
    flex: 0 0 50%
    overflow: hidden
    &:first-child
      +t
        flex: 0 0 60%
    &:last-child
      +t
        flex: 0 0 40%
      +m
        display: none
  &__grid:last-child &__item
    +t
      width: calc(50% - 20px)
  &__grid:last-child &__item_lg
    +t
      width: calc(100% - 20px)
  &__grid:last-child &__item:nth-child(3),
  &__grid:last-child &__item:nth-child(5),
  &__grid:last-child &__item:nth-child(6)
    +t
      display: none
  &__item
    background-position: center center
    background-size: cover
    float: left
    width: 140px
    height: 140px
    margin: 0 10px 20px
    +t
      width: calc(33.33% - 10px)
      margin: 0 5px 10px
    &_lg
      width: 300px
      height: 300px
      overflow: hidden
      +t
        width: calc(66.66% - 10px)
    &:nth-child(4)
      clear: both
  &__pic
    display: block
    width: 100%
    height: 100%
    object-fit: cover

.app
  position: relative
  margin-top: 72px
  background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  +t
    margin-top: 42px
  +m
    margin-top: 35px
  &__center
    display: flex
    align-items: flex-end
  &__col
    &:first-child
      position: relative
      padding: 50px 0 60px
      flex: 0 0 49%
      text-align: center
      z-index: 2
      +t
        padding: 30px 0 35px
        flex: 0 0 47%
      +m
        padding: 20px 0
        text-align: left
    &:last-child
      flex: 0 0 51%
      +t
        flex: 0 0 53%
  &__theme
    margin-bottom: 20px
    +fb
    font-size: 10px
    color: $blue
    +t
      margin-bottom: 5px
    +m
      margin-bottom: 15px
  &__title
    margin-bottom: 25px
    font-size: 32px
    line-height: (40/32)
    +t
      margin-bottom: 30px
      +fb
      font-size: 24px
      line-height: 1.33
    +m
      margin-bottom: 15px
      font-size: 16px
  &__content
    margin-bottom: 30px
    +t
      display: none
  &__links
    display: flex
    justify-content: center
  &__link
    margin: 0 10px
    flex: 0 0 135px
    +t
      margin: 0 5px
      flex: 0 0 80px
    +m
      margin: 0 5px 0 0
  &__preview
    display: flex
    height: 100px
    align-items: flex-end
    justify-content: flex-end
    +m
      margin: 0 -15px
  &__pic
    display: block
    max-width: 100%
    max-height: 277px
    +m
      max-height: 185px

a.grey-link
  color: #A7A7A7
  border-bottom: 1px #ccc solid
  font-size: 14px
  &:hover
    color: #000
    border-bottom: 1px #545454 solid

.game
  position: relative
  padding: 70px 0 80px
  background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  overflow: hidden
  +t
    padding: 30px 0 35px
  +m
    padding: 20px 0
  &__wrap
    max-width: 375px
    +t
      max-width: 220px
    +m
      max-width: 180px
  &__theme
    margin-bottom: 20px
    +fb
    font-size: 10px
    color: $blue
    +m
      margin-bottom: 15px
  &__title
    margin-bottom: 65px
    font-size: 32px
    line-height: (40/32)
    +t
      margin-bottom: 30px
      +fs
      font-size: 18px
      line-height: 1.33
    +m
      margin-bottom: 15px
      font-size: 14px
  &__btn
    background: transparent
    padding: 11px 24px 10px
    border: 2px solid $cl
    color: $cl
    &:hover
      background: $cl
      border-color: $cl
      color: white
    &:active
      color: rgba(white,.1)
  &__preview
    position: absolute
    top: 0
    left: calc(50% - 145px)
    bottom: 0
    +t
      left: calc(50% - 110px)
    +m
      left: 50%
  &__pic
    display: block
    width: auto
    height: 100%

.teachers
  margin-bottom: 50px
  +t
    margin-bottom: 0
  &__item
    display: flex
    margin-bottom: 40px
  &__ava
    height: 140px
    margin-right: 25px
    flex: 0 0 140px
    +t
      height: 100px
      margin-right: 20px
      flex: 0 0 100px
    +m
      height: 95px
      margin-right: 25px
      flex: 0 0 95px
  &__title
    margin-bottom: 5px
    display: flex
    +fb
    font-size: 20px
    letter-spacing: 2px
    +t
      font-size: 12px
      letter-spacing: 2px
    +m
      display: block
    &-name
      flex: 1
  &__social
    .social__item
      margin-right: 3px
      font-size: 25px
    +fb
  &__content
    font-size: 16px
    line-height: (22/16)
  &__wrap
    flex: 1

.toggle
  font-size: 14px
  &__head
    color: $pink
    .icon
      position: relative
      top: -1px
      margin-left: 10px
      font-size: 6px
      transition: transform .2s
    &.active
      .icon
        transform: rotate(-180deg)
  &__body
    display: none
    padding-top: 10px
    color: #888

.schedule
  margin-bottom: 70px
  +t
    margin-bottom: 0
  &__item
    display: flex
    margin-bottom: 40px
    +m
      display: block
      margin-bottom: 30px
  &__day
    padding-top: 2px
    +fb
    font-size: 12px
    color: $pink
    letter-spacing: 2px
    text-transform: uppercase
    flex: 0 0 140px
    +m
      margin-bottom: 10px
      padding: 0
  &__title,
  &__content
    font-size: 16px
  &__title
    +fb
  &__toggle
    margin-top: 10px

.theme
  +fb
  font-size: 12px
  letter-spacing: 2px
  color: $pink
  &_green
    color: $green
  &_violet
    color: $viol
  &_violet2
    color: $viol2
  &_pink2
    color: $pink2
  &_cyan
    color: $cyan
  &_lg
    font-size: 20px
    letter-spacing: 4px

.courses
  &__list
    display: flex
    margin: 0 -10px
    flex-wrap: wrap
    +m
      display: block
      margin: 0
  &__item
    display: block
    margin: 0 10px 60px
    color: $cl
    flex: 0 0 calc(33.33% - 20px)
    +t
      margin-bottom: 50px !important
    +m
      margin: 0 0 30px
  &__preview
    display: block
    position: relative
    margin-bottom: 15px
    border-radius: 2px
    color: $cl
    overflow: hidden
    +t
      margin-bottom: 10px
  &__preview:hover &__view
    opacity: .9
  &__label
    position: absolute
    top: 0
    right: 20px
    width: 30px
    height: 45px
    background-repeat: no-repeat
    background-size: contain
    z-index: 6
    +t
      width: 20px
      height: 30px
      right: 10px
    &_fav
      background-image: url(../img/fav.svg)
    &_clock
      background-image: url(../img/clock.svg)
  &__pic
    display: block
    width: 100%
    // border-radius: 2px
  &__view
    display: flex
    position: absolute
    top: -1%
    left: -1%
    width: 102%
    height: 102%
    background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
    // border-radius: 2px
    opacity: 0
    font-size: 18px
    align-items: center
    justify-content: center
    transform: translate3d(0,0,0)
    transition: opacity .2s
    z-index: 4
  &__soon
    display: flex
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    padding: 10px
    background: rgba(black,.4)
    color: white
    flex-direction: column
    justify-content: center
    text-align: center
    transform: translate3d(0,0,0)
  &__left
    margin-bottom: 5px
    font-size: 15px
    +t
      font-size: 12px
  &__time
    +fb
    font-size: 20px
    text-transform: uppercase
    letter-spacing: 3px
    +t
      font-size: 12px
      letter-spacing: 1px
  &__details
    display: flex
    margin-bottom: 10px
  &__price, &__old-price
    margin-left: 20px
    +fb
    font-size: 12px
    letter-spacing: 2px
    color: $cl
  &__old-price
    margin-right: -15px
  &__title
    display: block
    margin-bottom: 10px
    +fs
    font-size: 18px
    color: $cl
    +t
      line-height: 1.33
  &__theme
    text-transform: uppercase
    flex: 1
  &__user
    margin-top: 20px
  &_two &__item
    flex: 0 0 calc(50% - 20px)
    +t
      flex: 0 0 calc(33.33% - 20px)
  &_scroll
    +m
      margin: 0 -15px
      overflow: auto
  &_scroll &__list
    +m
      display: flex
      flex-wrap: nowrap
  &_scroll &__item
    +m
      margin-left: 15px
      flex: 0 0 220px
      &:last-child
        padding-right: 15px
        flex: 0 0 235px

.load
  margin-top: 30px
  +m
    margin-top: 40px
  &__btn
    width: 100%
    padding: 22px 24px 21px
    background: none
    border: 1px solid $border
    +m
      padding: 17px 20px 16px

.more
  text-align: center
  +t
    margin-top: 30px
  &__btn
    position: relative
    min-width: 300px
    padding: 19px 24px 18px
    border-radius: 28px
    letter-spacing: 2px
    z-index: 4
    &:hover
      &:before
        opacity: 0
    &:before
      content: ''
      position: absolute
      top: 5px
      left: 5px
      right: 5px
      bottom: 5px
      background: white
      border-radius: 24px
      transition: opacity .2s
      z-index: -2

.partners
  display: flex
  margin: 0 -10px -20px
  align-items: center
  justify-content: center
  +m
    margin: 0 -5px -10px
    flex-wrap: wrap
  &__item
    margin: 0 10px 20px
    flex: 0 0 calc(16.66% - 20px)
    text-align: center
    height: 160px
    +m
      margin: 0 5px 10px
      flex: 0 0 100px
    & a
      height: 120px
      display: flex
  &__item-promocode
    border: 1px solid #333;
    display: inline-block;
    padding: 7px 10px;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
  &__pic
    max-width: 100%
    object-fit: contain

.switch
  display: block
  position: relative
  font-size: 13px
  user-select: none
  cursor: pointer
  &__input
    position: absolute
    top: 0
    left: 0
    opacity: 0
  &__input:checked + &__content
    &:after
      opacity: 1
  &__content
    display: block
    padding: 3px 0 3px 30px
    font-size: 14px
    &:before,
    &:after
      content: ''
      position: absolute
    &:before
      top: 0
      left: 0
      width: 20px
      height: 20px
      border: 1px solid $border
    &:after
      top: 5px
      left: 5px
      width: 10px
      height: 10px
      background-image: linear-gradient(-225deg, #B4EC51 0%, #61E9E7 100%)
      opacity: 0
      transition: opacity .2s
  &__cell
    padding-right: 10px
    +m
      margin-bottom: 5px
    &:first-child
      padding-top: 3px
      +fb
      font-size: 11px
      text-transform: uppercase
      flex: 0 0 110px
    &:nth-child(2)
      +t
        padding: 0
        text-align: right
        flex: 0 0 calc(100% - 110px)
    &:nth-child(2)
      flex: 0 0 60px
    &:nth-child(3)
      flex: 1
      +t
        padding: 0
        flex: 0 0 calc(100% - 120px)
    &:last-child
      padding: 0
      text-align: right
      flex: 0 0 120px
  &_blue &__content
    &:after
      background: #4A90E2
  &_lesson &__content
    display: flex
    padding: 19px 0 19px 50px
    border-bottom: 1px solid $border
    font-size: 16px
    color: $gray
    transition: color .2s
    +t
      padding: 10px 0 10px 40px
      flex-wrap: wrap
      line-height: 1.33
    &:before,
    &:after
      transform: translateY(18px)
      +t
        transform: translateY(9px)
  &_lesson:first-child &__content
    border-top: 1px solid $border
  &_lesson &__input:checked + &__content
    color: $cl
  &_circle &__content
    &:before,
    &:after
      border-radius: 50%
  &_lg &__content
    padding: 0 0 0 30px
    font-size: 16px
    &:before,
    &:after


.footer
  padding: 50px 0 30px
  +t
    padding: 30px 0 35px
  &__row
    display: flex
    margin: 0 -10px 50px
    flex-wrap: wrap
    +m
      flex-direction: column
      margin: 0 0 10px
  &__col
    flex: 0 0 25%
    +t
      margin: 10px
  &__row_second &__col:nth-child(2)
      flex: 1
  &__nav
    +m
      display: flex
  &__nav > div
    flex: 50%
  &__logo
    width: 188px
    height: 58px
    margin: 2px 0 25px
    font-size: 18px
    line-height: (22/18)
    +t
      width: 188px
      height: 58px
      margin-top: 0
  &__content
    max-width: 200px
    font-size: 18px
    +t
      max-width: 250px
      font-size: 14px
      line-height: 1.33
  &__title
    padding: 20px 0 50px
    +fb
    font-size: 12px
    letter-spacing: 0.92px
    text-transform: uppercase
    +t
      padding: 0 0 20px
      letter-spacing: 2px
  &__link,
  &__contact
    display: table
    font-size: 14px
    color: $cl
    line-height: (20/14)
    +t
      padding: 5px 0
  &__contact
    margin-bottom: 20px
    +m
      margin: 0
    a
      color: $cl
  &__group,
  &__links
    display: flex
    color: #888
    +t
      display: none
  &__links &__link
    color: #888
  &__divider
    margin: 0 10px
  &__copyright
    margin-top: 50px
    margin-bottom: 20px
    font-size: 14px
    color: $gray

.subscribe
  margin-top: 10px
  display: flex
  &__btn
    height: 40px
    width: 220px
    +m
      width: 50%
  &__input
    height: 39px
    width: 220px
    padding: 0 10px
    font-size: 16px
    text-align: center
    margin-right: 20px
    background: $bg
    +m
      margin-right: 0
      width: 50%

.socials
  display: flex
  align-items: center
  &__item
    font-size: 0
    &:not(:last-child)
      margin-right: 20px
    .icon
      &-instagram
        font-size: 18px
      &-twitter
        font-size: 17px
      &-fb
        font-size: 19px
      &-youtube
        font-size: 15px

.select
  position: relative
  user-select: none
  z-index: 4
  &__head
    position: relative
    height: 36px
    border-bottom: 1px solid rgba(82, 82, 82, 0.2)
    transition: border-color .2s
    font-size: 18px
    line-height: 36px
    white-space: nowrap
    text-overflow: ellipsis
    color: $gray
    cursor: pointer
    transition: border-color .2s
    padding-right: 15px
    overflow: hidden
    &:after
      content: ''
      position: absolute
      top: 14px
      right: 0
      +arr(8,8,$cl,b)
  &__drop
    position: absolute
    left: 0
    right: 0
    top: calc(100% + 10px)
    padding: 10px 0
    background: white
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10)
    border-radius: 2px
    opacity: 0
    visibility: hidden
    transition: opacity .2s, visibility .2s
    overflow: hidden
  &__option
    display: block
    position: relative
    padding: 8px 20px 7px
    +fb
    font-size: 10px
    color: #8C8C8C
    text-transform: uppercase
    transition: color .2s
    text-transform: uppercase
    cursor: pointer
    +m
      padding: 11px 20px
      font-size: 12px
      color: $cl
    &:hover
      color: $cl
  &__option.active
    color: $cl
  &__option.active &__title
    &:after
      content: ''
      position: absolute
      top: 50%
      left: -10px
      right: -10px
      height: 2px
      margin-top: -2px
      background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  &__title
    display: table
    position: relative
  &.active
    z-index: 99
  &.active &__head
    border-color: #686868
    &:after
      transform: rotate(180deg)
  &.active &__drop
    opacity: 1
    visibility: visible
  &.selected &__head
    color: #686868

.error.info__field--light
  .select
    &__head
      color: $pink
      border-bottom: 1px $pink solid

.error.field .redactor-box
  border-bottom: 1px $pink solid

.info__field--light
  .select
    .select__head
      color: #525252
      &:after
        border-color: #525252 transparent transparent transparent
    &.selected
      .select__head
        color: #525252
        &:after
          border-color: #525252 transparent transparent transparent

.field
  margin-bottom: 20px
  &__label
    display: flex
    +fb
    font-size: 10px
    letter-spacing: 1px
    text-transform: uppercase
    &_gray
      color: $gray
  &__link
    margin-left: auto
  &__wrap
    position: relative
    &__appended
      display: flex
    &__100px
      width: 100px
  &__append
    text-transform: uppercase
  &__text
    height: 36px
    font-size: 18px
    padding-top: 6px
  &__input,
  &__textarea
    width: 100%
    border-bottom: 1px solid $border
    background: transparent
    font-size: 18px
    transition: border-color .2s
    &:focus
      border-color: $cl
    &_bg
      background: $bg
      border: 1px solid $bg
    &_sm
      font-size: 16px
  &__input
    height: 36px
    &[type='password']
      font-size: 30px
      &::placeholder
        font-size: 18px
    &_bg
      height: 50px
      padding: 0 20px
    &__appended
      flex: 1
  &__textarea
    display: block
    height: 36px
    padding: 7px 0
    resize: vertical
    &_lg
      height: 80px
      font-size: 25px
  &__preview
    position: absolute
    top: 8px
    right: 0
  &__pic
    display: block
    width: auto
    height: 20px
  &__error
    margin-top: 5px
    font-size: 12px
    color: $pink
  &__switch
    margin-top: 10px
    &:first-child
      margin-top: 5px
  &_code &__input
    height: 40px
    font-size: 15px
  &_info &__label
    color: $gray
  &_info &__input,
  &_info &__textarea
    border-color: rgba(#525252,.2)
    color: #525252
    &:focus
      border-color: #686868
  &.error &__input,
  &.error &__textarea
    border-color: $pink
  &.success &__input,
  &.success &__textarea
    border-color: $green-light
  &__password-show
    position: absolute
    right: 0
    top: 0
    button
      &.password-toggle
        border: none
        background: none
        margin-top: 11px
  &__stroke
    background-image: linear-gradient(-225deg, #D1FF7F 0%, #56FFFD 100%)
    padding: 1px
    display: inline-block
    & .field__input
      background: white
      padding: 5px

.field__wrap
  &--title
    margin-right: 60px
  &--additional
    margin-top: 10px
  svg.icon-password-eye
    display: block
  svg.icon-password-hidden-eye
    display: none
  &.password-visible
    svg.icon-password-eye
      display: none
    svg.icon-password-hidden-eye
      display: block
    button
      &.password-toggle
        margin-top: 12px

.icon-password-eye
  width: 1.47em
  height: 1em

.icon-arrow-up
  transform: rotate(180deg)

.auth
  padding: 0 20px 25px
  &__nav
    display: flex
    margin-bottom: 30px
  &__type
    border-bottom: 1px solid $border
    +fb
    font-size: 12px
    letter-spacing: 2px
    line-height: 60px
    color: $gray
    text-transform: uppercase
    text-align: center
    flex: 1 0 50%
    transition: border-color .2s, color .2s
    &.active
      border-color: $cl
      color: $cl
  &__tab
    display: none
  &__fieldset
    display: flex
  &__fieldset
    display: flex
    margin: 0 -7px
  &__fieldset &__field
    margin: 0 7px 20px
    flex: 0 0 calc(50% - 14px)
  &__link
    display: block
    margin: -5px 0 0
    font-size: 12px
    color: $cl
    text-decoration: underline
    line-height: 1.5
  &__foot
    margin-top: 30px
  &__btn
    width: 100%
    padding: 18px 24px 17px
  &__or
    padding: 10px 0
    font-size: 14px
    text-align: center
  &__pass
    display: none

.auth__text
  margin-bottom: 20px
  line-height: 1.3

.popup
  display: none
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  min-width: 360px
  padding: 15px
  background: rgba($cl,.7)
  opacity: 0
  transition: opacity .2s
  overflow: auto
  z-index: 999
  &__wrap
    position: relative
    width: 100%
    max-width: 340px
    margin: auto
    background: white
    box-shadow: 0 2px 20px rgba(0,0,0,0.10)
    border-radius: 3px
    transform: scale(.9)
    transition: transform .2s
    &_sm
      max-width: 500px
    &_md
      max-width: 620px
    &_lg
      max-width: 1000px
  &__close
    position: absolute
    top: -15px
    right: -15px
    padding: 10px
    background: $cl
    border-radius: 50%
    box-shadow: 0 2px 20px rgba(0,0,0,0.10)
    font-size: 0
    .icon
      font-size: 14px
      fill: white
  &.open
    display: flex
  &.visible
    opacity: 1
  &.visible &__wrap
    transform: scale(1)

.main-video-preview
  z-index: 10
  position: relative
  box-shadow: 0 10px 100px rgba(0,0,0,0.20)
  width: 100%
  height: auto
  cursor: pointer

.head
  display: flex
  margin-bottom: 50px
  +t
    margin-bottom: 40px
    flex-wrap: wrap
  &__right
    flex: 0 0 220px
    +t
      margin-left: auto !important
    +m
      margin: 0
    &.hidden
      visibility: hidden
  &__title
    position: relative
    margin: 0
    padding: 0 20px 0 260px
    flex: 0 0 calc(100% - 220px)
    z-index: 4
    +t
      max-width: 100%
      margin: 0 0 15px
      padding: 0
      flex: 0 0 100%
  &__curve
    position: absolute
    top: 50%
    left: calc(50% - 60px)
    transform: translateY(-50%)
    z-index: -2
  &__field
    margin: 0
  &__text
    padding-right: 30px
    font-size: 18px
    align-self: center
    flex: 0 0 calc(100% - 220px)
    +t
      max-width: 260px
      font-size: 14px
      line-height: 1.2
    +m
      display: none

.layout
  display: flex
  margin: 0 -10px
  +t
    display: block
  &__container,
  &__sidebar
    padding: 0 10px
  &__container
    flex: 0 0 66.66%
    +t
      margin-bottom: 40px
  &__search
    flex: 0 0 100%
  &__sidebar
    flex: 0 0 33.33%

.similar
  +t
    display: flex
    margin: 0 -10px -30px
    flex-wrap: wrap
  &__item
    display: flex
    margin-bottom: 30px
    color: $cl
    +t
      margin: 0 10px 30px
      flex: 0 0 calc(50% - 20px)
    +m
      flex: 0 0 calc(100% - 20px)
  &__preview
    margin-right: 15px
    flex: 0 0 80px
  &__pic
    display: block
    width: 100%
    border-radius: 2px
  &__wrap
    flex: 0 0 calc(100% - 95px)
  &__title
    margin-bottom: 5px
  &__ava
    font-size: 10px
    color: $gray
    text-transform: uppercase

.go
  display: flex
  margin-bottom: 40px
  justify-content: space-between
  align-items: center
  +t
    margin-bottom: 20px
  &__item
    display: flex
    max-width: calc(50% - 20px)
    align-items: center
    color: $cl
  &__arrow
    margin-right: 15px
    font-size: 0
    +t
      margin-right: 10px
    .icon
      font-size: 17px
      fill: $cl
      +t
        font-size: 12px
  &__title
    font-size: 18px
    line-height: 1.33
    +t
      font-size: 14px
  &__title + &__arrow
    margin: 0 0 0 15px
    +t
      margin-left: 10px
  &__btn
    width: 220px
    +m
      width: auto

.meta
  &,
  &__item
    display: flex
    align-items: center
    color: inherit
  &__item
    //&:not(:last-child)
    margin-right: 40px
    +t
      margin-right: 30px
  &__icon
    margin-right: 10px
    font-size: 0
    .icon
      font-size: 16px
      fill: $gray
      &-video
        font-size: 14px
      &-showcase
        font-size: 18px
      &-date
        font-size: 20px
  &_white &__icon
    .icon
      fill: white

.course
  margin-bottom: 50px
  &__head
    display: flex
    min-height: 40px
    margin-bottom: 20px
    align-items: center
    justify-content: space-between
    +t
      margin-bottom: 10px
  &__title
    margin-bottom: 20px
    +t
      margin-bottom: 10px
  &__content
    margin-bottom: 30px
    +t
      margin-bottom: 15px
  &__about
    position: relative
    margin-bottom: 40px
    +t
      margin-bottom: 25px
    &:before
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background: rgba(black,.3)
  &__pic
    display: block
    width: 100%
  &__btn
    position: absolute
    top: 50%
    left: 50%
    min-width: 200px
    background: transparent
    border: 2px solid white
    color: white
    transform: translate(-50%,-50%)
    overflow: hidden
    &:active
      color: rgba(white,.4)
  &__user
    margin-bottom: 30px
    +t
      margin-bottom: 20px
  &__info
    display: flex
    align-items: center
    justify-content: space-between
    +m
      display: block
  &__buy
    width: 220px
    margin-left: auto
    +m
      width: auto
      margin: 20px 0 0
  &__metas
    display: flex
    margin-bottom: 35px
    justify-content: space-between
    +m
      display: block
      margin-bottom: 15px
  &__metas &__meta
    +m
      margin-bottom: 20px
  &__actions
    display: flex
    margin: 0 -10px 40px
  &__action
    position: relative
    margin: 0 10px
    flex: 0 0 calc(50% - 20px)
    .icon
      position: absolute
      top: 50%
      right: 45px
      margin: 0
      font-size: 19px
      transform: translateY(calc(-50% - 1px))
      +m
        right: 20px
  &__video
    margin-bottom: 30px
  &__share
    margin-bottom: 60px
  &_promo
    position: relative
    margin: 0
    padding: 100px 0 110px
    background-size: cover
    background-position: 50% 50%
    background-repeat: no-repeat
    color: white
    z-index: 4
    +t
      padding: 60px 0
    +m
      padding: 40px 0 45px
    &:before,
    &:after
      content: ''
      position: absolute
    &:before
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-image: linear-gradient(0deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.64) 100%)
      z-index: -2
    &:after
      left: 50%
      bottom: -1px
      margin-left: -16px
      +arr(32,16,$bg,t)
  &_promo &__likes
    color: white
    .icon
      fill: white

.lessons
  &__list
    margin-bottom: 60px
    +m
      margin-bottom: 40px
  &__item
    position: relative
    margin-bottom: 40px
    transition: box-shadow .2s
    +m
      margin-bottom: 30px
  &__item:hover &__actions
    opacity: 1
    visibility: visible
  &__subtitle
    margin-bottom: 20px
    text-transform: none
    letter-spacing: normal
  &__row
    display: flex
    +m
      display: block
  &__preview
    margin-right: 25px
    flex: 0 0 140px
    +m
      display: none
  &__pic-wrapper
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
  &__pic
    object-fit: cover
    width: 100%
    height: 100%
  &__content-wrapper
    flex: 1
  &__content
    flex: 0 0 calc(100% - 165px)
  &__actions
    display: flex
    position: absolute
    top: 10px
    right: 10px
    opacity: 0
    visibility: hidden
    transition: opacity .2s, visibility .2s
    &__no-hover
      opacity: 1
      visibility: visible
  &__action
    margin-left: 10px
    padding: 10px
    font-size: 0
    &:hover
      .icon
        fill: $cl
    .icon
      font-size: 20px
      fill: #C8C8C8
      transition: fill .2s
  &__foot
    text-align: center
  &__btn
    width: 220px
  &_kit &__item
    margin-bottom: 20px
    padding: 20px
    &:hover
      box-shadow: 0 10px 50px 0 rgba(0,0,0,0.06)
      border-radius: 10px
  &_kit &__content
    flex: 0 0 100%

.lesson
  &__subtitle
    letter-spacing: normal
    text-transform: none
    margin-bottom: 10px
    color: #191919
  &__content
    margin-bottom: 15px
    color: #191919
  &__video_frame
    width: 100%
    height: 400px
  &__chat_frame
    width: 100%
    height: 600px
  &__row
    display: flex
    +m
      display: block
  &__preview
    margin-right: 25px
    flex: 0 0 140px
    +m
      display: none
  &__pic-wrapper
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
  &__pic
    object-fit: cover
    width: 100%
    height: 100%
  &__user
    margin-bottom: 30px


.lessons
  &__subtitle
    margin-bottom: 10px
    color: #191919
  &__content
    margin-bottom: 30px
    color: #191919

.materials
  &__item
    display: flex
    &:not(:last-child)
      margin-bottom: 40px
  &__preview
    margin-right: 25px
    flex: 0 0 140px
    +m
      margin-right: 20px
      flex: 0 0 100px
  &__pic
    display: block
    width: 100%
  &__wrap
    flex: 0 0 calc(100% - 180px)
    +m
      flex: 0 0 calc(100% - 120px)
  &__title
    margin-bottom: 10px
    +fb
    font-size: 12px
    letter-spacing: 2px
    text-transform: uppercase

.examples
  display: flex
  margin: 0 -10px -20px
  flex-wrap: wrap
  +m
    margin: 0 -5px -10px
  &__item
    margin: 0 10px 20px
    flex: 0 0 calc(25% - 20px)
    +m
      margin: 0 5px 10px
      flex: 0 0 calc(33.33% - 10px)
  &__pic
    display: block
    width: 165px
    height: 165px
    +s
      width: 160px
      height: 160px

.questions
  &__anchor
    display: block
    position: relative
    top: -110px
    visibility: hidden
  &__form,
  &__item
    display: flex
  &__form
    position: relative;
    margin-top: 20px
    padding-bottom: 20px
    border-bottom: 1px solid $border
  &__form-loader
    display: none;
  &__form-foot
    text-align: center;
  &__item
    &:not(:last-child)
      margin-bottom: 25px
    +m
      padding: 10px 0
    &_reply
      padding-left: 80px
      +m
        padding-left: 25px
  &__reply-info
    display: none
    margin-bottom: 10px
  &__item_reply &__details
    margin-bottom: 10px
    padding: 20px
    background: white
    border-radius: 0 10px 10px 10px
    +m
      padding: 10px
  &__ava
    height: 60px
    margin-right: 20px
    flex: 0 0 60px
    +m
      height: 40px
      margin-right: 10px
      flex: 0 0 40px
  &__pic
    display: block
    width: 100%
  &__wrap
    flex: 0 0 calc(100% - 80px)
    +m
      flex: 0 0 calc(100% - 50px)
  &__field
    margin-bottom: 20px
  &__textarea
    display: block
    width: 100%
    height: 44px
    padding: 11px 15px
    border-radius: 2px
    font-size: 16px
    resize: vertical
    +m
      height: 64px
  &__btn
    margin: 0 15px;
    border-radius: 20px
    +m
      margin-left: 0
  &__details
    margin-bottom: 5px
    flex: 1
  &__head,
  &__action
    +fb
    font-size: 12px
    letter-spacing: 2px
    text-transform: uppercase
  &__head
    margin-bottom: 15px
    +m
      margin-bottom: 5px
  &__action,
  &__date
    color: $gray
  &__author
    margin-right: 15px
  &__date
    font-size: 10px
    display: inline-block
  &__foot
    height: 20px
    text-align: right
  &__action
    margin-left: auto
  &__heart
    fill: #d40700
    width: 28px
    height: 28px
  &__send-icon
    fill: $gray
    width: 20px
    height: 20px
  &__delete-icon
    fill: #C8C8C8
    width: 17px
    height: 17px
    :hover
      fill: #000000
  &__toggle
    margin-top: 10px
    margin-left: 10px
    display: inline-block
  &--heart
    &__content
      font-size: 24px
      color: #d40700

  &--chat
    margin-top: 15px
  &--chat &__items
    background: white
    padding: 10px
    border-radius: 5px
    max-height: 400px
    overflow: auto
    +m
      max-height: 800px
  &--chat &__item, &--chat &__item_reply
    +m
      padding: 0
  &--chat &__ava
    height: 40px
    margin-right: 10px
    flex: 0 0 40px
    +m
      display: none
  &--chat &__content
    margin-bottom: 10px
  &--chat &__wrap
    display: flex
    flex: 0 0 calc(100% - 60px);
    +m
      flex: 1
  &--chat &__field
    margin-bottom: 0;
    flex: 0 0 calc(100% - 160px);
    +m
      flex: 1
  &--chat &__btn
    font-weight: 600;
    text-shadow: 1px 1px #fff;
    +m
      margin: 0 0 0 15px;
  &--chat &__form-foot
    display: flex;

  &--loading &__form-loader
    display: block

  &--loading &__form &__ava, &--loading &__form &__wrap
    opacity: 0.4

.share
  &__title
    margin-bottom: 45px
    +fb
    font-size: 20px
    text-align: center
    +m
      margin-bottom: 30px
  &__list
    display: flex
    justify-content: center
  &__item
    font-size: 0
    &:not(:last-child)
      margin-right: 20px
    .icon
      font-size: 40px
    span:first-child
      display: none
  &_sm &__title
    margin-bottom: 15px
  &_sm &__item
    &:not(:last-child)
      margin-right: 10px
    .icon
      font-size: 30px
  &_right &__list
    justify-content: flex-start
    +m
      justify-content: center

.buy
  padding: 15px 30px 30px
  +t
    padding: 10px 15px 25px
  &__row
    display: flex
    margin: 0 -10px
    flex-wrap: wrap
    +m
      flex-direction: column
  &__col
    margin-bottom: 20px
    padding: 0 10px
    flex: 0 0 320px
    +t
      flex: 0 0 260px
    +m
      flex: 0 0 100%
    &:nth-child(2n-1)
      flex: 0 0 calc(100% - 320px)
      +t
        flex: 0 0 calc(100% - 260px)
      +m
        flex: 0 0 100%
  &__head_main
    padding-top: 25px
    +t
      padding-top: 21px
  &__label
    font-size: 16px
    +t
      font-size: 14px
  &__title
    font-size: 30px
    +t
      font-size: 24px
  &__subtitle
    margin-bottom: 10px
    font-family: 'ProximaNova-Bold', serif
    font-size: 12px
    letter-spacing: 2px
    text-align: center
    width: 100%
  &__content
    font-size: 12px
    color: $gray
  &__foot
    margin-top: 20px
    text-align: center
  &__btn
    width: 275px
    +m
      width: 100%
  &__trial-lesson
    +m
      position: absolute;
      right: 0;
      padding: 0;
      top: 9px;
  &__bonuses
    margin-top: 10px

.order
  padding: 2px
  background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)
  border-radius: 8px
  &__days
    min-height: 58px
  &__wrap
    padding: 20px 30px 30px
    background: white
    border-radius: 6px
    +t
      padding: 15px 20px 20px
  &__title
    margin-bottom: 20px
    font-size: 20px
  &__preview
    margin: 0 -30px 20px
    +t
      margin: 0 -20px 20px
  &__pic
    display: block
    width: 100%
  &__label
    margin-bottom: 10px
    +fb
    font-size: 11px
    text-transform: uppercase
  &__foot
    display: flex
    margin: 30px -30px -10px
    padding: 20px 30px 0
    border-top: 1px solid $border
    +fb
    font-size: 16px
    +t
      margin: 30px -20px 0
      padding: 20px 20px 0
  &__total
    margin-left: auto
    position: relative
    del
      color: #a0a0a0
  & .loading-loader
    display: none
    margin-left: -40px
  &--loading .loading-loader
    display: block

.lock
  padding: 50px 60px 40px
  text-align: center
  +m
    padding: 30px 020px
  &__label
    margin-bottom: 70px
    +fb
    font-size: 12px
    color: $gray
    letter-spacing: 2px
    +m
      margin-bottom: 40px
      font-size: 10px
  &__title
    margin-bottom: 20px
  &__content
    margin-bottom: 70px
    +m
      margin-bottom: 40px
  &__btn
    width: 220px

.profile
  position: relative
  padding-bottom: 20px
  text-align: center
  +m
    padding: 0
    text-align: center
  &__head
    display: flex
    margin-bottom: 30px
    align-items: flex-start
    +m
      display: none
  &__title
    margin: 0 20px 0 0
  &__btn
    margin-left: auto
    padding: 10px 15px
    background: transparent
    border: 1px solid $gray
    color: $gray
    margin-bottom: 10px
    width: 100%
  &__btns
    position: absolute
    top: 0
    right: 0
    display: flex
    flex-direction: column
    +m
      display: none !important
  &__row
    display: flex
    margin-bottom: 25px
    align-items: center
    +m
      display: block
      margin-bottom: 30px
  &__ava
    width: 120px
    height: 120px
    margin-right: 25px
    flex: 0 0 120px
    margin: 15px auto
    +m
      width: 140px
      height: 140px
      margin: 0 auto 20px
  &__wrap
    flex: 0 0 calc(100% - 145px)
  &__name
    margin-bottom: 25px
    font-size: 20px
    letter-spacing: 3px
    text-transform: uppercase
    +m
      margin-bottom: 10px
      +fb
      font-size: 24px
      letter-spacing: 0
      text-transform: none
  &__share
    margin-bottom: 35px
  &__content
    max-width: 760px
    margin: 0 auto
  &__foot
    display: none
    margin-top: 30px
    text-align: center
    +m
      display: block

.fill-profile
  width: 100%
  display: flex
  align-items: center
  position: relative
  padding: 40px 35px
  background: url(../img/fill-profile-gramota.png) center bottom no-repeat

  +m
    flex-direction: column
    padding: 20px 15px

  &:before
    content: ''
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    opacity: .8
    z-index: -2
    background-image: linear-gradient(-225deg, #FFE2EB 0%, #D8F5F5 100%)

  &__text
    flex: 0 0 300px
    font-size: 18px

    +m
      flex: 1
      font-size: 16px
      margin-bottom: 40px

  &__img
    flex: 1

  &__btn
    flex: 0 0 205px
    text-align: right

    +m
      margin-bottom: 35px
      flex: 1

  &__arrow
    flex: 0 0 50px
    text-align: right

    +m
      display: none

.tabs
  &__nav
    display: flex
    height: 56px
    margin-bottom: 40px
    border-bottom: 1px solid $border
    align-items: center
    justify-content: center
  &__btn
    height: 56px
    line-height: 56px
    border-bottom: 1px solid $border
    +fb
    font-size: 12px
    color: $gray
    letter-spacing: 1px
    transition: border-color .2s, color .2s
    +m
      flex: 0 0 35%
      font-size: 10px
    &:not(:last-child)
      margin-right: 40px
      +m
        margin: 0
    &:hover
      color: $cl
    &.active
      border-color: $cl
      color: $cl
  &__item
    display: none

.menu
  display: flex
  &__link
    font-size: 16px
    color: $gray
    transition: color .2s
    &:not(:last-child)
      margin-right: 30px
    &.active
      +fb
      color: $cl

.confirm
  &__title
    margin-bottom: 20px
    font-size: 24px
  &__form
    display: flex
    margin: 25px -10px 30px
    align-items: center
    +m
      display: block
  &__field,
  &__btn
    margin: 0 10px
    flex: 0 0 calc(50% - 20px)
  &__field
    +m
      margin-bottom: 20px

.form
  position: relative
  &__ava
    position: absolute
    left: -160px
    width: 140px
    height: 140px
    +t
      position: relative
      left: 0
      margin-bottom: 40px
  &__group
    position: relative
    margin-bottom: 40px
  &__title
    margin-bottom: 30px
    font-size: 25px
    +m
      +fb
      font-size: 24px
      line-height: 1.33
  &__content
    margin-bottom: 40px
    +m
      margin-bottom: 30px
  &__fieldset
    display: flex
    margin: 0 -10px
    +m
      display: block
  &__fieldset &__field
    padding: 0 10px
    flex: 0 0 50%
  &__field
    margin-bottom: 25px
    +m
      margin-bottom: 20px
  &__switch
    margin-bottom: 10px
  &__btn
    width: 100%

.transactions
  &__row
    display: flex
    margin: 0 -10px 20px
    flex-wrap: wrap
  &__cell
    padding: 0 10px
    font-size: 13px
  &__product
    +fb
    font-size: 12px
    text-transform: uppercase
    letter-spacing: 2px
    flex: 0 0 60%
    +m
      flex: 0 0 75%
  &__amount
    flex: 0 0 20%
    text-align: right
    +m
      flex: 0 0 25%
  &__status
    flex: 0 0 20%
    text-align: right
    color: $green-light
    +m
      flex: 0 0 100%
    &_success
      color: $green
    &_pending
      color: $gray
    &_error
      color: $pink
.transactions_bonuses .transactions
  &__product
    flex: 0 0 60%;
    +m
      flex: 1 0 40%;
  &__amount
    flex: 0 0 10%;
  &__user
    flex: 0 0 20%;


.empty
  max-width: 300px
  margin: 0 auto
  text-align: center

.done
  padding: 60px 0
  text-align: center
  +m
    padding: 0
  &__foot
    margin-top: 60px
    +m
      margin-top: 40px
  &__btn
    width: 100%
    max-width: 300px

.author
  &__row
    display: flex
  &__ava
    height: 90px
    margin-right: 20px
    flex: 0 0 90px
    +m
      height: 60px
      margin-right: 15px
      flex: 0 0 60px
  &__wrap
    flex: 0 0 calc(100% - 110px)
    +m
      flex: 0 0 calc(100% - 75px)
  &__hi,
  &__name
    display: table
    +fb
    text-transform: uppercase
  &__hi
    margin-bottom: 30px
    font-size: 12px
    letter-spacing: 2px
    +m
      margin-bottom: 10px
  &__name
    font-size: 10px
    letter-spacing: 1.66px
  &__content
    margin-bottom: 30px
    +m
      margin-bottom: 10px

.upload
  position: relative
  font-size: 18px
  color: $blue
  overflow: hidden
  &__file
    position: absolute
    top: 0
    right: 0
    opacity: 0
    cursor: pointer

.info
  display: flex
  background: $bg
  +m
    display: block
    margin-top: 60px
  &__section
    display: flex
    position: relative
    flex: 0 0 50%
    justify-content: flex-end
  &__sidebar
    flex: 0 0 50%
  &__main
    display: flex
    max-width: 675px
    height: 550px
    padding: 30px 40px 50px
    flex-direction: column
    flex-grow: 1
    +t
      width: 100%
      max-width: 100%
      padding: 30px 15px 50px
  &__head
    display: flex
    align-items: flex-start
  &__user
    display: flex
    margin-bottom: 45px
    align-items: center
  &__ava
    width: 40px
    height: 40px
    margin-right: 20px
    flex: 0 0 40px
  &__label
    +fb
    font-size: 10px
    color: $gray
    letter-spacing: 1px
  &__value
    font-size: 18px
    color: #525252
  &__upload
    margin-left: auto
    font-size: 16px
    color: #525252
  &__foot
    display: flex
    margin-top: auto
    +m
      display: block
  &__foot &__field
    margin-right: 20px
    flex: 0 0 140px
    flex-grow: 1
  &__wrap
    max-width: 349px
    padding: 10px 40px 30px 30px
    +t
      max-width: 100%
      height: auto
      padding: 30px 15px 30px
  &__wrap
    display: flex
    flex-direction: column
  &__wrap &__field
    margin-bottom: 20px
    &:last-child
      margin: 0
  &__fieldset
    &:first-child
      margin-bottom: 50px
    //&:last-child
    //  margin-top: auto
    &:only-child
      margin-top: 0px

.add
  display: flex
  align-items: flex-start
  &__toggle
    font-size: 0
  &__circle,
  &__title
    display: inline-block
    vertical-align: middle
  &__circle
    position: relative
    margin-right: 10px
    padding: 19px
    border: 1px solid $border
    border-radius: 50%
    .icon
      font-size: 20px
      fill: #B5B5B5
  &__title
    margin-left: 10px
    font-size: 20px
    color: #B5B5B5
  &__list
    display: none
  &__btn
    width: 60px
    height: 60px
    border: 1px solid #888
    border-radius: 50%
    font-size: 0
    &:not(:last-child)
      margin: 0 10px 10px 0
    .icon
      font-size: 22px
      fill: $cl
      &-live
        font-size: 10px
      &-image-text
        font-size: 15px
      &-text
        font-size: 17px
      &-images
        font-size: 32px
  &.open &__circle
    .icon
      transform: rotate(45deg)
  &.open &__title
    display: none
  &.open &__list
    display: flex
    flex-wrap: wrap

.kit
  max-width: 620px
  &__section
    margin-bottom: 60px
    &--block
      /* box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.06) */
      /* border-radius: 10px */
      padding: 15px
      position: relative
    &-remove
      position: absolute
      right: 15px
      top: 20px
      button:not(:last-child)
        margin-right: 10px
      .icon-delete, .icon-arrow-up, .icon-arrow-down
        width: 1.3em
        height: 1.3em
        transition: fill 0.3s ease
      .icon-arrow-up, .icon-arrow-down
        fill: #C8C8C8
      .icon-delete:hover, .icon-arrow-up:hover, .icon-arrow-down:hover
          fill: #000
  &__nav
    display: flex
    margin: 0 -10px 60px
    flex-wrap: wrap
    &-message
      width: 100%
      margin: 15px 0 0 15px
      font-size: 15px
  &__btn
    margin: 0 10px
    flex: 0 0 calc(50% - 20px)
  &__add
    margin-bottom: 40px
  &__service
    display: flex
    align-items: center
  &__service &__field
    margin: 0
    flex: 1 0 auto
  &__upload
    margin-left: 20px
  &__row
    display: flex
  &__row &__photo
    height: 110px
    margin-right: 20px
    flex: 0 0 140px
    +m
      flex: 0 0 110px
  &__delete-photo
    position: absolute
    bottom: 2px
    left: 3px
  &__photo
    display: flex
    position: relative
    border: 1px solid $border
    justify-content: center
    align-items: center
    overflow: hidden
    .icon
      font-size: 20px
      fill: #B5B5B5

    &.loading &-image
      visibility: hidden
    &.loading
      .icon
        visibility: hidden
      &:after
        content: ''
        position: absolute
        top: 50%
        left: 50%
        width: 24px
        height: 24px
        margin: -12px 0 0 -12px
        border: 3px solid #B5B5B5
        border-left: 3px solid transparent
        border-radius: 50%
        animation: loading .6s infinite linear
  &__file
    position: absolute
    top: 0
    right: 0
    font-size: 100px
    opacity: 0
    cursor: pointer
  &__fieldset
    flex: 0 0 calc(100% - 160px)
    +m
      flex: 0 0 calc(100% - 130px)
  &__gallery
    display: flex
    margin: 0 -10px
    flex-wrap: wrap
  &__gallery &__photo,
  &__preview
    position: relative
    margin: 0 10px 20px
    flex: 0 0 calc(25% - 20px)
    &--loading
      opacity: 0.5
  &__pic
    display: block
    width: 100%
    object-fit: contain
    transform: translateY(-50%)
    top: 50%
    position: relative
  &__theme
    margin-bottom: 30px
    padding-bottom: 5px
    font-size: 20px
    border-bottom: 1px solid $border
  &__foot
    text-align: center
  &__submit
    width: 220px
  &__field .field__wrap--title
    margin-right: 125px;

.editor
  position: relative

.fontstyle
  position: absolute
  top: -40px
  left: 40px
  padding: 0 15px
  background: $cl
  border-radius: 35px
  font-size: 0
  white-space: nowrap
  &__regular,
  &__bold,
  &__italic
    width: 28px
    height: 35px
    font-size: 16px
    color: white
  &__bold
    +fb
  &__italic
    font-style: italic

.ui-datepicker
  display: none
  width: 240px
  margin-top: 10px
  padding: 5px
  background: white
  box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10)
  z-index: 99!important
  &-header
    display: flex
    margin-bottom: 5px
    align-items: center
  &-prev,
  &-next
    padding: 10px
    font-size: 0
    cursor: pointer
    &:before
      content: ''
      display: block
      width: 10px
      height: 10px
      border: solid $border
      border-width: 2px 2px 0 0
  &-prev
    order: 1
    &:before
      transform: rotate(-135deg)
  &-title
    text-align: center
    order: 2
    flex: 1 0 auto
  &-next
    order: 3
    &:before
      transform: rotate(45deg)
  &-calendar
    th,
    td
      +fb
      font-size: 10px
      text-transform: uppercase
      text-align: center
      vertical-align: middle
    th
      padding: 5px
    a
      display: block
      padding: 7px
      color: #8C8C8C
      transition: color .2s
      &:hover
        color: $cl
      &.ui-state-active
        background: $bg
        color: $pink

.form__common-error
  margin-top: 15px
  font-size: 14px
  background: $pink
  color: #fff
  padding: 10px
  display: none

.message
  margin: 15px
  font-size: 14px
  text-align: center
  color: #fff
  padding: 10px
  z-index: 999
  &_error
    background: $pink
  &_info
    background: $green


.mobile-hide
  +m
    display: none

.mobile-show
  display: none
  +m
    display: block

.school
  display: flex
  position: relative
  margin: 0 -15px
  flex-wrap: wrap
  z-index: 2
  +t
    margin-bottom: -40px
  +m
    margin: 0 -10px -30px
  &__col
    padding: 0 15px
    text-align: center
    flex: 0 0 25%
    +t
      margin-bottom: 40px
      flex: 0 0 50%
    +m
      margin-bottom: 30px
      padding: 0 10px
  &__preview
    margin-bottom: 25px
    font-size: 0
    +m
      margin-bottom: 15px
    .icon
      font-size: 34px
      fill: #93d2c2
  &__title
    margin-bottom: 5px
    font-size: 24px
    +t
      font-size: 18px
  &__text
    max-width: 200px
    margin: 0 auto
    font-size: 11px
    line-height: 1.3
    text-transform: uppercase
    +t
      font-size: 10px
  &_main &__col
    +t
      flex: 0 0 25%
    +m
      flex: 0 0 50%
  &_main &__preview
    margin-bottom: 10px
    font-size: 32px
    +t
      font-size: 24px
  &_main &__title
    font-size: 15px
    text-transform: uppercase
    font-weight: bold
  &_main &__text
    text-transform: none
    font-size: 15px

.arts
  display: flex
  margin: 0 -12px
  justify-content: center
  flex-wrap: wrap
  +m
    margin-bottom: -24px
  &__col
    padding: 0 12px
    flex: 0 0 16%
    +t
      flex: 0 0 28%
      margin-bottom: 15px
    +m
      margin-bottom: 24px
      flex: 0 0 50%
    &:hover
      .arts__title
        display: none
      .arts__item:before
        background: rgba(255,255,255,0)
        transition: all .1s ease-out 0.1s
  &__item
    position: relative
    border-radius: 50%
    background-position: 50% 50%
    background-size: cover
    &:before
      background: rgba(255,255,255,0.8)
      content: ''
      display: block
      padding-bottom: 100%
  &__title
    position: absolute
    top: 50%
    left: 50%
    width: 100%
    padding: 0 20px
    +fs
    font-size: 14px
    text-align: center
    text-transform: uppercase
    transform: translate(-50%,-50%)

.letsgo
  margin-top: 80px
  text-align: center
  +t
    margin-top: 45px

.timing
  +t
    padding-left: 10px
  &__week
    margin-bottom: 35px
  &__item
    display: flex
    position: relative
    padding: 20px 0
    cursor: pointer
    page-break-inside: avoid
    +nf
      border-top: 1px solid $border
    &_bg
      margin-top: 10px
      background: $pink-light
      box-shadow: -40px 0 0 0 $pink-light, 40px 0 0 0 $pink-light
      +nf
        border-color: transparent
    +m
      display: block
  &__item.open
    padding-bottom: 40px
  &__item.open &__toggle
    .icon
      transform: rotate(180deg)
  &__item.open &__buy,
  &__item.open &__more
    display: block
  &__item.open &__cell
    &:nth-child(3)
      +m
        padding-bottom: 70px
  &__item.disable &__preview,
  &__item.disable &__title,
  &__item.disable &__content
    opacity: .4
  &__cell
    &--info
      display: flex
      padding-right: 20px
      flex-direction: column
      align-items: flex-start
      flex: 0 0 140px
      +m
        padding: 0
        flex: 0 0 0
        margin-bottom: 15px
    &--preview
      padding-right: 20px
      flex: 0 0 90px
    &--content
      flex: 1
      +m
        flex: 0 0 calc(100% - 114px)
    &--toggle
      flex: 0 0 34px
  &__unlock
    +m
      position: absolute
      left: 90px
      bottom: 20px
  &__info
    margin-bottom: auto
    +m
      display: flex
      flex-direction: row
      width: 100%
  &__day
    position: relative
    margin: 10px 0 5px
    +fb
    font-size: 12px
    text-transform: uppercase
    +m
      margin: 0
    &.active
      &:before
        content: ''
        position: absolute
        top: 3px
        left: -13px
        width: 8px
        height: 8px
        background: #EE4630
        border-radius: 50%
        animation: blinker 2s linear infinite
  &__date
    opacity: .5
    +m
      margin: -3px 0 0 10px
  &__buy
    +m
      flex: 1 0 0
      text-align: right
  &__trial-lesson
    display: inline-block
    margin-top: 10px
    +m
      position: absolute;
      width: 120px;
      margin-top: 6px;
  &__time
    margin: 15px 0
    opacity: .5
    +m
      margin: -1px 15px 0 5px
      font-size: 12px;
  &__btn
    margin-right: -60px
    padding-left: 20px
    padding-right: 20px
    white-space: nowrap
    letter-spacing: 1px
    +m
        margin-right: 0
  &__pic
    display: block
    width: 100%
    border-radius: 50%
    object-fit: cover
  &__title
    margin-bottom: 5px
    font-size: 24px
    line-height: 1.3
    +t
      font-size: 18px
  &__content
    padding-bottom: 5px
  &__toggle
    width: 34px
    height: 34px
    margin-top: 30px
    font-size: 0
    .icon
      font-size: 8px
      fill: $pink
  &__more
    display: none
  &__more
    padding-top: 15px
  &__head
    margin-bottom: 10px
    +fb
  &__row
    display: flex
    margin: 0 0 20px
    +t
      display: block
  &__col
    padding: 0 15px
    flex: 0 0 40%
    &:first-child
      flex: 0 0 60%
      +m
        margin-bottom: 10px
  &__text
    ul
      li
        position: relative
        padding-left: 17px
        &:before
          content: '-'
          position: absolute
          top: 0
          left: 0
  &__works
    display: flex
    margin: 0 -30px -10px 0
    flex-wrap: wrap
  &__work
    margin: 0 10px 10px 0
    flex: 0 0 48px
  &__foot
    display: flex
    align-items: center
  &__foot &__btn
    margin-right: 40px
  &__print
    position: relative
    margin-left: auto
    padding-left: 30px
    color: #878787
    line-height: 1.3
    .bold
      color: $cl
    .icon
      position: absolute
      top: 1px
      left: 0
      fill: $pink

.switcher
  display: inline-block
  position: relative
  &__input
    position: absolute
    top: 0
    left: 0
    opacity: 0
  // &__input:checked + &__wrap &__item
  //   &:first-child
  //     background: #f8f8f8
  //   &:last-child
  //     background: transparent
  &__wrap
    display: flex
    background: linear-gradient(to right, #cdff82, #5efff4)
    border-radius: 23px
    align-items: center
  &__item
    padding: 11px 20px
    border-radius: 23px
    color: black
    +fb
    font-size: 12px
    text-transform: uppercase
    user-select: none
    cursor: pointer
    &.active
      background: #f8f8f8
    // &:last-child
    //   background: #f8f8f8


.casing
  display: flex
  position: relative
  +t
    padding-top: 105px
  +m
    padding-top: 155px
  &__col
    &:first-child
      padding-right: 20px
      flex: 0 0 160px
      +t
        padding: 0
        flex: 0 0 0
    &:last-child
      flex: 0 0 calc(100% - 160px)
      +t
        flex: 0 0 100%
  &__subscribe
    +t
      display: flex
      position: absolute
      top: 0
      left: 0
      width: 250px
      flex-wrap: wrap
      align-items: center
    +m
      width: 100%
      justify-content: center
  &__msg
    margin-bottom: 15px
    padding-top: 5px
    font-size: 14px
    line-height: 1.3
    +t
      margin: 0 15px 0 0
      padding: 0
    .bold
      display: block
  &__btn
    padding-left: 15px
    padding-right: 15px
    letter-spacing: 1px
  &__note
    padding-top: 15px
    font-size: 14px
    line-height: 1.2
    opacity: 0.6
    +t
      padding-top: 10px
      flex: 0 0 140px
    +m
      display: none
  &__head
    display: flex
    margin-bottom: 30px
    align-items: center
    +t
      justify-content: center
  &__title
    margin: 0 auto 0 0
    +t
      margin: 0
  &__switcher
    +t
      position: absolute
      top: 0
      right: 0
    +m
      top: 60px
      right: 50%
      transform: translateX(50%)
      white-space: nowrap


.searching
  display: flex
  margin-bottom: 40px
  &__input
    height: 40px
    padding: 0 10px
    border: 1px solid $border
    border-radius: 3px 0 0 3px
    font-size: 18px
    transition: border-color .2s
    &:focus
      border-color: $cl
    flex: 0 0 calc(100% - 100px)
  &__btn
    border-radius: 0 3px 3px 0
    flex: 0 0 100px

a
 &.link--black
   color: #000
 &.disabled
   pointer-events: none
   cursor: default
   opacity: 0.6

.content-block
  &.title
    font-size: 24px
    font-style: bold
  &.text
    font-size: 16px
    padding-bottom: 24px
    text-align: left
    margin: 0
    max-width: 100%
  &.pic
    position: relative
    width: 100%
  &__video
    position: relative
  &__video iframe
    height: 360px
    width: 640px
    max-width: 100%
    max-height: 60%

@media only screen and (max-width: 639px)
  .content-block__video iframe
    width: 100%;
    height: 240px;

  .content-block__video.iframe__container
    text-align: center;
    width: 100%;
    padding-bottom: 56.25%;
    margin-bottom: -56.25%;

@media only screen and (min-width: 640px)
  .content-block__video.iframe__container
    text-align: center;
  .content-block__video iframe
    width: 640px;
    height: 360px;

.banners
  margin-top: -100px

.banner
  padding-top: 100px
  text-align: center
  color: #fff
  position: relative
  +m
    padding-top: 70px
  &__content
    width: 1024px
    padding-top: 10px
    display: flex
    margin: 0 auto
    height: 300px
    padding-left: 80px
    +t
      width: calc(100% - 40px)
      padding-top: 0
    +m
      padding-left: 0
      height: 220px
  &__text
    font-size: 30px
    text-shadow: none
    color: black
    +t
      font-size: 25px
    +m
      font-size: 16px
      width: auto
      font-weight: bold
  &__link
    font-size: 15px
    color: black
    text-shadow: none
    background: white
    padding: 12px 22px
    border-radius: 25px
    border: 1px solid #ddd
    text-align: center
    margin-top: 50px
    display: inline-block
    text-transform: uppercase
    font-family: 'ProximaNova-Bold'
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05), 0 9px 24px 0 rgba(33, 74, 211, 0.1)
    +m
      margin-top: 20px
      font-size: 10px
      padding: 10px 14px
  &__link:hover
    background: #ddd
  &__image-column
    flex: 50%
    text-align: center
    position: relative
    padding-right: 20px
    & img
      position: absolute
      bottom: 0
      transform: translateX(-50%)
      left: 50%
      max-width: 100%
      max-height: 100%
  &__text-column
    flex: 50%
    text-align: left
    padding-bottom: 20px
    padding-right: 10px
    padding-top: 40px
    +m
      padding-top: 20px
  &__countdown-title
    color: black
    font-size: 15px
    margin-bottom: 5px
    +m
      font-size: 15px
  &__countdown-wrap
    position: absolute
    transform: translateX(-50%)
    left: 50%
  &__countdown
    display: flex
    color: black
    transition: 0.5s opacity
    > div
      font-size: 27px
      display: flex
      flex-direction: column
      +m
        font-size: 16px
    &-nums
      display: flex
      & > div
        margin: 1px
        width: 27px
        border-radius: 5px
        background: #000000ba
        text-align: center
        padding-top: 2px
        color: white

        +m
          width: 20px
    &-delim
      width: 10px
      color: black
      +m
        width: 5px
    &-descr
      text-align: center
      font-size: 11px
      margin-top: 3px


.anchor
  padding-top: 100px
  margin-top: -100px

.contest-work
  text-transform: uppercase;
  font-weight: bold;

  &__img-wrap
    width: 100%;
    text-align: center;

  &__img
    max-width: 100%;

  &__info
    display: flex;
    padding: 5px 10px;

  &__age
    color: #919191;

  &__bio
    flex: calc(100% - 70px);

.loading-loader
  content: ''
  position: absolute
  top: 50%
  left: 50%
  width: 24px
  height: 24px
  margin: -12px 0 0 -12px
  border: 3px solid #B5B5B5
  border-left: 3px solid transparent
  border-radius: 50%
  animation: loading .6s infinite linear

.modal-video-close-btn
  +m
    right: 0

.referrer-url
  display: flex

  +m
    flex-direction: column

  &__text-column
    flex: 50%
    padding-right: 16%
    padding-top: 8px

    +m
      padding-right: 0

  &__title
    font-size: 20px
    margin-bottom: 5px

  &__url-column
    display: flex
    flex-direction: column
    flex: 30%
    align-items: center

  &__input
    height: 40px
    width: 100%
    margin-bottom: 5px

  &__btn
    width: 100%


.bonuses
  display: flex
  font-size: 20px
  margin-bottom: 20px
  &__count
    flex: 1
  &__course
    font-family: 'ProximaNova-Bold', serif
    color: $cl
  &__lil-coin-img
    margin-bottom: -5px
    margin-right: 4px


.gift-certificates
  display: flex
  margin: 0 -10px
  flex-wrap: wrap
  +m
    display: block
    margin: 0
  &__item
    display: block
    margin: 0 10px 60px
    color: $cl
    flex: 0 0 calc(33.33% - 20px)
    +t
      margin-bottom: 50px !important
    +m
      margin: 0 0 30px
  &__preview
    display: block
    position: relative
    margin-bottom: 15px
    border-radius: 2px
    color: $cl
    overflow: hidden
    width: 300px
    height: 200px
    +t
      margin-bottom: 10px
  &__cover
    object-fit: cover;
    width: 100%;
  &__details
    display: flex
    margin-bottom: 10px
  &__price
    margin-left: auto
    +fb
    font-size: 12px
    letter-spacing: 2px
    color: $cl
  &__title
    text-transform: uppercase
  &__status
    font-family: 'ProximaNova-Bold', serif
    font-size: 12px
    letter-spacing: 2px
    text-transform: uppercase
    & .icon
      width: 16px
      display: inline-block
      height: 16px
      margin-bottom: -4px
  &__buy-btn
    width: 100%
  &__preview.theme_pink2
    background: $pink2
  &__preview.theme_cyan
    background: $cyan
  &__preview.theme_violet2
    background: $viol2

.user-child-form
  padding: 30px 80px 40px 160px
  margin: 30px -80px 30px -160px
  background: url(../img/profile-edit-child-form.png) no-repeat 7px bottom  white
  border-radius: 20px
  box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.05)

  +t
    margin: 30px -80px 30px -60px

  +m
    background: white
    margin: 30px -80px 30px -60px
    padding: 30px 80px 40px 60px

  &__description
    margin-bottom: 40px
    margin-top: -20px
    color: #333333
    font-size: 12px

  &__tabs
    justify-content: left
    overflow-x: auto
    overflow-y: hidden

.bonuses-table
  margin-left: -120px
  margin-top: 50px
  margin-right: -46px

  &__row
    display: flex
    width: 100%
    margin-bottom: 35px

    & > div
      font-size: 14px

    & > div:nth-child(1)
      flex: 115px
      font-size: 40px
      margin-top: -7px
      text-align: center
    & > div:nth-child(2)
      flex: 320px
    & > div:nth-child(3)
      flex: 165px
      font-size: 20px
      font-weight: bold
      text-align: center
    & > div:nth-child(4)
      flex: 220px

      & .btn
        width: 100%

    & > div:nth-child(5)
      flex: 40px
      padding-top: 13px
      padding-left: 10px
      text-align: center

  &__title
    margin-bottom: 5px
    font-size: 20px


.bonuses-came
  &__body
    padding: 30px 30px 50px
    text-align: center

  &__title
    margin-bottom: 5px
    margin-top: 5px
    font-size: 25px

  &__bonuses
    font-size: 50px
    margin-bottom: -8px

  &__text
    margin: 40px 0

.video-ended-popup
  display: none
  position: absolute
  top: 90px
  height: 200px
  background: url(../img/video-ended-popup-ref.jpg) no-repeat center white
  left: 50%
  width: 600px
  margin-left: -300px
  border-radius: 5px
  padding: 30px
  box-shadow: 0 2px 20px rgba(0,0,0,0.10)
  opacity: 0

  +m
    width: 100%
    left: 0
    top: 0
    height: 153px
    background-position: center bottom
    background-size: auto 130px
    border-radius: 0
    background-color: #151a1e
    margin-left: 0

  & .loading-loader
    display: none

  &_like
    background-image: url(../img/video-ended-popup-like.jpg)

  &_black
    background: url(../img/video-ended-popup-logo.png) no-repeat center #141a1d

  &_loading
    background: #141a1d

  &_loading .loading-loader
    display: block

  &__like-btn
    background: url(../img/heart.png) no-repeat center
    position: absolute
    top: 90px
    display: none
    width: 91px
    height: 52px
    cursor: pointer
    left: 50%
    margin-left: -45px

    +m
      background-size: contain
      width: 54px
      margin-left: -27px
      bottom: 27px
      top: auto

  &_like &__like-btn
    display: block

.free-lessons-title
  padding-top: 140px
  min-height: 300px
  padding-bottom: 120px

  +m
    padding-top: 80px
    min-height: 200px
    padding-bottom: 60px