You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4773 lines
84 KiB
4773 lines
84 KiB
=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
|
|
|
|
.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
|
|
&_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: fixed
|
|
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
|
|
font-size: 0
|
|
line-height: 1
|
|
&: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
|
|
margin-top: -100px
|
|
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
|
|
&_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
|
|
&_school
|
|
padding: 85px 0 20px
|
|
+t
|
|
padding: 65px 0 55px
|
|
+m
|
|
padding: 45px 0
|
|
&_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
|
|
|
|
.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: 55px 0 50px
|
|
background-position: 50% 50%
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
color: white
|
|
text-align: center
|
|
z-index: 4
|
|
+t
|
|
padding: 30px 0
|
|
+m
|
|
padding: 20px 0
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
background-image: linear-gradient(-1deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.60) 100%)
|
|
z-index: -2
|
|
&__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: 2px
|
|
// +fb
|
|
font-size: 50px
|
|
line-height: (6/5)
|
|
+t
|
|
margin-bottom: 6px
|
|
font-size: 24px
|
|
&__text
|
|
max-width: 600px
|
|
+t
|
|
margin-bottom: 65px
|
|
+m
|
|
max-width: 80%
|
|
margin-bottom: 40px
|
|
&__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
|
|
&--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: inherit
|
|
&--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
|
|
margin: 55px 0 35px
|
|
+m
|
|
margin-top: 35px
|
|
&_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
|
|
&__item a.timing__btn
|
|
opacity: 0;
|
|
transition: 0.5s ease;
|
|
&__item:hover a.timing__btn
|
|
opacity: 1;
|
|
&__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 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;
|
|
iframe
|
|
width: 640px;
|
|
height: 360px;
|
|
|
|
|
|
.banner
|
|
height: 140px
|
|
text-align: center
|
|
color: #fff
|
|
position: relative
|
|
+m
|
|
height: auto
|
|
&__bg
|
|
background-repeat: no-repeat
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
left: 0
|
|
top: 0
|
|
&_countdown
|
|
+m
|
|
height: 140px
|
|
&__image-wrap
|
|
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(159,159,159,0) 72%, rgba(221,221,221,0.65) 100%)
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(159,159,159,0) 72%,rgba(221,221,221,0.65) 100%)
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6dddddd',GradientType=0 )
|
|
width: 100%
|
|
height: 100%
|
|
&__image
|
|
+m
|
|
width: 100%
|
|
display: block
|
|
margin: 0 auto
|
|
&_colored &__image
|
|
+m
|
|
max-width: 100%
|
|
width: auto
|
|
opactiy: 0.8
|
|
&__content
|
|
position: absolute
|
|
width: 100%
|
|
margin-top: 50px
|
|
+m
|
|
margin-top: 0px
|
|
top: 0
|
|
&_countdown &__content
|
|
margin-top: 15px
|
|
+m
|
|
margin-top: 5px
|
|
&__content-center
|
|
width: 1024px
|
|
margin: 0 auto
|
|
display: flex
|
|
padding: 0 40px
|
|
+m
|
|
width: 100%
|
|
padding: 0 10px
|
|
&_countdown &__content-center
|
|
+m
|
|
display: block
|
|
&__text
|
|
font-size: 30px
|
|
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
|
|
+m
|
|
font-size: 16px
|
|
&_countdown &__text
|
|
font-size: 22px
|
|
text-shadow: none
|
|
color: black
|
|
width: 300px
|
|
+m
|
|
font-size: 16px
|
|
width: auto
|
|
font-weight: bold
|
|
&__link
|
|
display: block
|
|
color: #fff
|
|
font-size: 20px
|
|
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
|
|
margin-top: 20px
|
|
+m
|
|
margin-top: 0px
|
|
font-size: 16px
|
|
&_countdown &__link
|
|
font-size: 15px
|
|
color: black
|
|
text-shadow: none
|
|
background: white
|
|
font-weight: bold
|
|
padding: 7px 20px
|
|
border-radius: 20px
|
|
border: 1px solid #ddd
|
|
text-align: center
|
|
margin-top: 10px
|
|
display: inline-block
|
|
+m
|
|
margin-top: 25px
|
|
&_countdown &__link:hover
|
|
background: #ddd
|
|
&__hide
|
|
position: absolute
|
|
right: 5px
|
|
top: 5px
|
|
display: block
|
|
color: #fff
|
|
text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
|
|
text-transform: uppercase
|
|
border-bottom: 1px dotted #fff
|
|
opacity: 0.3
|
|
+m
|
|
font-size: 11px
|
|
&__text-column
|
|
flex: 1
|
|
&_countdown &__text-column
|
|
text-align: left
|
|
+m
|
|
text-align: center
|
|
&__countdown-column
|
|
padding: 0 20px
|
|
+m
|
|
padding: 0
|
|
display: flex
|
|
& > div:nth-child(1)
|
|
+m
|
|
padding: 0 10px
|
|
border-radius: 3px
|
|
background: rgba(255, 255, 255, 0.3)
|
|
margin-right: 10px
|
|
& > div:nth-child(2)
|
|
+m
|
|
flex: 1
|
|
&__countdown-title
|
|
color: black
|
|
font-size: 15px
|
|
margin-bottom: 5px
|
|
+m
|
|
font-size: 15px
|
|
&__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)
|
|
|
|
&__description
|
|
margin-bottom: 40px
|
|
margin-top: -20px
|
|
color: #333333
|
|
font-size: 12px
|
|
|
|
|
|
.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
|
|
|