::selection {
    background: #2f80ed;
    color: #fff
}

body {
    font-family: Montserrat,sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #4f4f4f;
    font-weight: 500
}

* {
    box-sizing: border-box
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em
}

h1,h2,h3,p,ul {
    margin-top: 0
}

h1.center,h2.center,h3.center,p.center,ul.center {
    text-align: center
}

h1 {
    font-weight: 800;
    font-size: 64px;
    line-height: .95;
    margin-bottom: 20px;
    color: #141414
}

@media only screen and (max-width:1279px) {
    h1 {
        font-size: 35px;
        margin-bottom: 10px
    }
}

h2 {
    font-weight: 600;
    font-size: 48px;
    line-height: 1.3;
    color: #141414
}

@media only screen and (max-width:1345px) {
    h2 {
        font-size: 42px
    }
}

@media only screen and (max-width:1279px) {
    h2 {
        font-size: 35px;
        font-weight: 800
    }
}

@media only screen and (max-width:767px) {
    h2 {
        font-size: 24px
    }
}

@media only screen and (max-width:374px) {
    h2 {
        font-size: 22px
    }
}

h2 .orange {
    font-weight: 800
}

h2 .inline {
    color: #828282;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500
}

.subtitle {
    line-height: 1.8;
    font-size: 18px
}

@media only screen and (max-width:1023px) {
    .subtitle {
        font-size: 16px
    }
}

@media only screen and (max-width:767px) {
    .subtitle {
        font-size: 14px
    }
}

.subtitle.center {
    text-align: center
}

.btn,button:focus,input,select,textarea {
    outline: 0
}

input[type=text] {
    transition: all .2s ease-in-out
}

input[type=text]:hover {
    border-color: #d0cbcb
}

input[type=text]:focus {
    border-color: #141414
}

input[type=text].error {
    color: #f11;
    border-color: #f11
}

input[type=text].error::placeholder {
    color: #f11
}

input[type=radio] {
    display: none
}

input[type=radio]:checked+label::after {
    box-shadow: inset 0 0 0 7px #f90
}

input[type=radio]+label {
    width: 100%;
    display: block;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    border: 1px solid #edf1f7;
    padding: 40px 73px;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    transition: all .2s ease-in-out
}

@media only screen and (max-width:1279px) {
    input[type=radio]+label {
        padding: 30px 50px
    }
}

@media only screen and (max-width:1023px) {
    input[type=radio]+label {
        padding-right: 30px
    }
}

@media only screen and (max-width:374px) {
    input[type=radio]+label {
        padding-right: 20px
    }
}

input[type=radio]+label:hover {
    border-color: #909090
}

input[type=radio]+label:hover::before {
    border-color: #909090
}

input[type=radio]+label::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    transition: all .2s ease-in-out
}

@media only screen and (max-width:1279px) {
    input[type=radio]+label::before {
        left: 15px
    }
}

input[type=radio]+label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 34px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: none;
    transition: all .2s ease-in-out
}

@media only screen and (max-width:1279px) {
    input[type=radio]+label::after {
        left: 19px
    }
}

input[type=radio]+label strong {
    font-size: 14px;
    font-weight: 600;
    color: #131313
}

@media only screen and (max-width:374px) {
    input[type=radio]+label strong {
        line-height: 1.2
    }
}

input[type=checkbox] {
    display: none
}

input[type=checkbox]:checked+label::after {
    opacity: 1
}

input[type=checkbox]+label {
    width: 100%;
    display: block;
    font-size: 11px;
    cursor: pointer;
    position: relative;
    padding-left: 40px;
    line-height: 1.5
}

input[type=checkbox]+label:hover::before {
    border-color: #909090
}

input[type=checkbox]+label::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 24px;
    height: 24px;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-radius: 5px;
    transition: all .2s ease-in-out
}

input[type=checkbox]+label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6px;
    width: 14px;
    height: 14px;
    box-shadow: none;
    transition: all .2s ease-in-out;
    background: url(../img/icons/check.svg) no-repeat center;
    background-size: contain;
    opacity: 0
}

input[type=checkbox]+label strong {
    font-size: 14px;
    font-weight: 600;
    color: #131313
}

.textarea {
    position: relative;
    width: 100%
}

.textarea textarea {
    width: 100%;
    height: 160px;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-radius: 5px;
    resize: none;
    padding: 20px;
    transition: all .2s ease-in-out
}

.textarea textarea:hover {
    border-color: #d0cbcb
}

.textarea textarea:focus {
    border-color: #141414
}

.textarea__count {
    font-size: 11px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #141414;
    opacity: .25
}

a {
    text-decoration: none;
    color: inherit
}

.btn {
    display: inline-block;
    transition: all .2s ease-in-out;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    padding: 22px 39px;
    text-transform: uppercase;
    color: #fff;
    fill: #fff;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%),#f90;
    box-shadow: 0 2px 0 #b95937,inset 0 0 20px 5px rgba(255,255,255,.15);
    border-radius: 5px;
    text-shadow: 0 2px 0 #d67926
}

@media only screen and (max-width:1279px) {
    .btn {
        font-size: 12px
    }

    .btn .mobile {
        display: none
    }
}

@media only screen and (max-width:1023px) {
    .btn {
        padding: 18px 39px
    }
}

.btn:focus {
    outline: 0
}

.btn:hover {
    box-shadow: none
}

.btn.center {
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

@media only screen and (max-width:767px) {
    .btn.mobile {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        transform: none;
        left: initial;
        text-align: center
    }
}

.btn-blue,.btn-green,.btn-purple {
    padding: 8px 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-transform: initial;
    font-size: 11px;
    box-shadow: none;
    text-shadow: none
}

.btn-blue svg,.btn-green svg,.btn-purple svg {
    margin-right: 15px;
    font-size: 13px
}

.btn-blue {
    background: #2f80ed
}

.btn-blue:hover {
    box-shadow: 0 2px 0 #0e50a8,inset 0 0 20px 5px rgba(255,255,255,.15)
}

.btn-blue:hover:active {
    box-shadow: none
}

.btn-green {
    background: #27ae60
}

.btn-green:hover {
    box-shadow: 0 2px 0 #145b32,inset 0 0 20px 5px rgba(255,255,255,.15)
}

.btn-green:hover:active {
    box-shadow: none
}

.btn-purple {
    background: #7b519d
}

.btn-purple:hover {
    box-shadow: 0 2px 0 #462e5a,inset 0 0 20px 5px rgba(255,255,255,.15)
}

.btn-purple:hover:active {
    box-shadow: none
}

.orange {
    color: #f90
}

.container {
    margin: 0 auto;
    max-width: 1425px
}

@media only screen and (max-width:1455px) {
    .container {
        padding: 0 15px
    }
}

.header {
    padding: 40px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3
}

@media only screen and (max-width:1345px) {
    .header {
        padding: 20px 0
    }
}

@media only screen and (max-width:767px) {
    .header {
        position: relative
    }
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media only screen and (max-width:767px) {
    .header .container {
        position: relative;
        padding-bottom: 50px
    }

    .header .container .social {
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px
    }

    .header .container .social .social__list {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .header .container .social a {
        margin-right: 0
    }
}

.header__right {
    display: flex;
    align-items: center
}

.header__phone {
    display: flex;
    align-items: center;
    text-align: right;
    margin-left: 120px
}

@media only screen and (max-width:1023px) {
    .header__phone {
        margin-left: 30px
    }
}

@media only screen and (max-width:767px) {
    .header__phone {
        margin-left: 0
    }
}

.header__phone-icon {
    fill: orange;
    font-size: 20px;
    width: 44px;
    height: 44px;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border: 1px solid #edf1f7
}

@media only screen and (max-width:767px) {
    .header__phone-icon {
        display: none
    }
}

.header__phone-num {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: -3px;
    color: #131313;
    display: block;
    transition: all .2s ease-in-out
}

.header__phone-num:hover {
    opacity: .7
}

.header__phone-link {
    color: #fff;
    font-size: 12px;
    border-bottom: 1px solid;
    transition: all .2s ease-in-out
}

@media only screen and (max-width:1700px) {
    .header__phone-link {
        color: #4f4f4f
    }
}

.header__phone-link:hover {
    border-color: transparent
}

.social span {
    font-size: 12px;
    display: block;
    margin-bottom: 8px
}

@media only screen and (max-width:1279px) {
    .social span {
        display: none
    }
}

.social__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px -5px;
    margin-top: 0;
    margin-bottom: 0
}

@media only screen and (max-width:374px) {
    .social__list {
        flex-wrap: nowrap
    }
}

.social__list.line {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.social__list.line div {
    display: flex;
    align-items: center
}

.social__list a {
    margin: 0 5px
}

@media only screen and (max-width:374px) {
    .social__list a {
        margin: 0;
        padding: 6px 0;
        width: 31%;
        text-align: center;
        font-size: 9px
    }

    .social__list a svg {
        margin-right: 10px
    }
}

.social__list a:not(.btn) {
    font-size: 11px;
    border-bottom: 1px solid;
    color: #141414;
    opacity: .5;
    transition: all .2s ease-in-out
}

.social__list a:not(.btn):hover {
    border-color: transparent
}

.main {
    height: 795px;
    background: url(../img/main.png) no-repeat right center;
    background-size: contain;
    position: relative;
    overflow: hidden
}

@media only screen and (max-width:1279px) {
    .main {
        background: url(../img/main.png) no-repeat -80% center;
        background-size: cover
    }
}

@media only screen and (max-width:1023px) {
    .main {
        height: 680px;
        background: url(../img/main.png) no-repeat -4% center;
        background-size: cover
    }
}

@media only screen and (max-width:767px) {
    .main {
        background: 0 0;
        margin-top: -50px;
        margin-bottom: 30px;
        height: auto
    }
}

.main::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(42%) rotate(-3.5deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fff
}

.main .mobile {
    display: none;
    margin-right: 0;
    width: 100%;
    margin-bottom: -13%
}

@media only screen and (max-width:767px) {
    .main .mobile {
        display: block
    }
}

.main h2 {
    font-weight: 800
}

.main .container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2
}

@media only screen and (max-width:1023px) {
    .main .container {
        width: 390px;
        margin: 0
    }
}

@media only screen and (max-width:767px) {
    .main .container {
        width: 100%;
        height: auto;
        padding-bottom: 10px
    }
}

.main .subtitle {
    font-weight: 600;
    font-size: 36px;
    margin-bottom: 15px
}

@media only screen and (max-width:1279px) {
    .main .subtitle {
        color: #141414;
        margin-bottom: 10px
    }
}

@media only screen and (max-width:1023px) {
    .main .subtitle {
        font-size: 18px
    }
}

.main__text {
    color: #4f4f4f;
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 1.8
}

@media only screen and (max-width:1279px) {
    .main__text {
        font-size: 14px;
        margin-bottom: 30px
    }
}

@media only screen and (max-width:1023px) {
    .main__text br {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .main__text {
        margin-bottom: 20px
    }
}

.features {
    margin-top: -60px;
    margin-bottom: 100px
}

@media only screen and (max-width:767px) {
    .features {
        margin-top: 0
    }
}

.features .swiper-pagination {
    padding-right: 76px
}

@media only screen and (max-width:1279px) {
    .features .swiper-pagination {
        padding-right: 0
    }
}

.features .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media only screen and (max-width:1400px) {
    .features .container {
        display: block
    }
}

.features h2 {
    position: relative;
    display: inline-block;
    margin-right: 50px;
    flex-shrink: 0
}

@media only screen and (max-width:1400px) {
    .features h2 br {
        display: none
    }
}

.features h2 .inline {
    position: absolute;
    bottom: 15px;
    right: -20px
}

@media only screen and (max-width:1400px) {
    .features h2 .inline {
        position: static;
        display: block;
        margin-top: 5px
    }
}

.features__header {
    display: flex;
    align-items: center;
    margin-bottom: 47px
}

@media only screen and (max-width:1023px) {
    .features__header {
        margin-bottom: 20px
    }
}

.features__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-radius: 5px
}

.features__icon img {
    height: 24px;
    pointer-events: none;
    user-select: none
}

.features__name {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    color: #010001
}

@media only screen and (max-width:1023px) {
    .features__name {
        text-transform: uppercase
    }
}

.features__text {
    font-size: 14px;
    line-height: 1.5
}

@media only screen and (max-width:1023px) {
    .features .slider {
        margin-left: -15px;
        width: calc(100% + 30px)
    }
}

.slider {
    position: relative;
    overflow: hidden;
    padding: 0 76px;
    margin-bottom: -60px
}

@media only screen and (max-width:1279px) {
    .slider {
        padding: 0 50px
    }
}

@media only screen and (max-width:1023px) {
    .slider {
        padding: 0
    }
}

.swiper-container {
    padding-bottom: 60px;
    overflow: hidden
}

.swiper-slide {
    padding: 40px;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    border: 2px solid rgba(0,82,255,.04)
}

@media only screen and (max-width:1279px) {
    .swiper-slide {
        padding: 20px
    }
}

.swiper-button-disabled {
    opacity: 0!important
}

.swiper-button-next,.swiper-button-prev {
    width: 40px;
    height: 40px;
    margin-top: -50px;
    transition: all .1s linear
}

@media only screen and (max-width:1023px) {
    .swiper-button-next,.swiper-button-prev {
        display: none
    }
}

.swiper-button-next:hover,.swiper-button-prev:hover {
    background-size: 25px
}

.swiper-button-next::after,.swiper-button-prev::after {
    display: none
}

.swiper-button-prev {
    background: url(../img/icons/double-arrow-left.svg) no-repeat center;
    background-size: 20px;
    left: 0
}

.swiper-button-next {
    background: url(../img/icons/double-arrow-right.svg) no-repeat center;
    background-size: 20px;
    right: 0
}

.swiper-pagination {
    text-align: right
}

@media only screen and (max-width:1023px) {
    .swiper-pagination {
        text-align: center
    }
}

.swiper-pagination-bullet {
    width: 45px;
    height: 5px;
    background: #edf1f7;
    border-radius: 10px;
    opacity: 1;
    transition: all .2s ease-in-out;
    position: relative
}

@media only screen and (max-width:1023px) {
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px
    }
}

.swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    border-radius: 10px;
    background: #f90;
    width: 0
}

@media only screen and (max-width:1023px) {
    .swiper-pagination-bullet::before {
        display: none
    }
}

.swiper-pagination-bullet-active {
    width: 162px
}

@media only screen and (max-width:1023px) {
    .swiper-pagination-bullet-active {
        width: 8px;
        background: #f90
    }
}

.swiper-pagination-bullet-active::before {
    animation: pagination 5s ease-in-out 0s forwards
}

@keyframes pagination {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

.noUi-target {
    border: 0;
    border-radius: 0;
    height: 7px;
    padding: 0;
    background: 0 0;
    border: 0;
    box-shadow: none
}

.noUi-connects {
    background: #edf1f7;
    border-radius: 0
}

.noUi-connect {
    background: #f90;
    border-radius: 0
}

.noUi-handle {
    width: 20px!important;
    height: 20px!important;
    box-shadow: inset 0 0 0 7px #f90;
    border-radius: 50%;
    border: 0;
    right: -10px!important
}

.noUi-handle::after,.noUi-handle::before {
    display: none
}

.cheap {
    background: url(../img/money.png) no-repeat left -131px;
    background-size: contain;
    padding: 220px 0 308px;
    margin-bottom: -200px;
    position: relative;
    overflow: hidden;
    z-index: 3
}

@media only screen and (max-width:1700px) {
    .cheap {
        background: url(../img/money.png) no-repeat left -195px;
        background-size: contain
    }
}

@media only screen and (max-width:1585px) {
    .cheap {
        background: url(../img/money.png) no-repeat left -34%;
        background-size: 60%
    }
}

@media only screen and (max-width:1345px) {
    .cheap {
        background: url(../img/money.png) no-repeat -18% -34%;
        background-size: 62%
    }
}

@media only screen and (max-width:1279px) {
    .cheap {
        background: url(../img/money.png) no-repeat -18% -52%;
        background-size: 81%;
        margin-bottom: 0;
        padding-bottom: 70px
    }
}

@media only screen and (max-width:1023px) {
    .cheap {
        background: url(../img/money.png) no-repeat -180px -62%;
        background-size: 105%;
        padding-bottom: 60px
    }
}

@media only screen and (max-width:767px) {
    .cheap {
        padding-top: 80px;
        background: 0 0
    }
}

.cheap::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-92%) rotate(3deg);
    width: 150%;
    height: 300px;
    top: 0;
    background: #fff;
    box-shadow: 0 20px 25px rgba(0,82,255,.02)
}

@media only screen and (max-width:1023px) {
    .cheap::after {
        top: -1px
    }
}

@media only screen and (max-width:1279px) {
    .cheap__wrap {
        max-width: 500px
    }
}

@media only screen and (max-width:1023px) {
    .cheap__wrap {
        width: 435px
    }
}

@media only screen and (max-width:767px) {
    .cheap__wrap {
        width: 100%
    }
}

.cheap .container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    position: relative
}

@media only screen and (max-width:767px) {
    .cheap .container {
        display: flex;
        align-items: flex-start;
        justify-content: center
    }
}

.cheap h2 {
    margin-bottom: 17px;
    margin-right: 155px;
    font-weight: 800
}

@media only screen and (max-width:1023px) {
    .cheap h2 {
        margin-right: 0
    }
}

.cheap h2 .mobile {
    display: none
}

@media only screen and (max-width:1023px) {
    .cheap h2 .mobile {
        display: block
    }
}

.cheap__text {
    line-height: 1.8;
    margin-bottom: 41px;
    font-size: 16px
}

@media only screen and (max-width:1279px) {
    .cheap__text br {
        display: none
    }
}

.cheap__info {
    margin-bottom: 20px
}

.cheap__icons {
    display: flex;
    align-items: center
}

@media only screen and (max-width:1279px) {
    .cheap__icons {
        display: block
    }
}

.cheap__item {
    width: 50%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1;
    font-weight: 700
}

@media only screen and (max-width:1279px) {
    .cheap__item {
        margin-bottom: 15px;
        width: 80%
    }

    .cheap__item br {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .cheap__item {
        width: 100%
    }
}

.cheap__icon {
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 15px;
    fill: #f90;
    font-size: 25px
}

@media only screen and (max-width:1023px) {
    .cheap__icon {
        width: 44px;
        height: 44px;
        font-size: 20px
    }
}

.cheap__dollar {
    position: absolute;
    right: -4%;
    bottom: -11%;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1585px) {
    .cheap__dollar {
        right: 2%
    }
}

@media only screen and (max-width:374px) {
    .cheap__dollar {
        display: none
    }
}

.happen {
    background: url(../img/questions.svg) no-repeat center;
    background-size: cover;
    text-align: center;
    padding: 130px 0;
    position: relative;
    overflow: hidden
}

@media only screen and (max-width:1023px) {
    .happen {
        padding: 80px 0
    }
}

.happen::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(90deg,#fff 0,rgba(0,212,255,0) 100%)
}

@media only screen and (max-width:1023px) {
    .happen::before {
        display: none
    }
}

.happen::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40%;
    background: linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 100%)
}

@media only screen and (max-width:1023px) {
    .happen::after {
        display: none
    }
}

.happen.smile {
    background: url(../img/smile.svg) no-repeat center;
    background-size: cover
}

@media only screen and (max-width:1279px) {
    .happen .container {
        position: relative;
        z-index: 2
    }
}

.happen h2 {
    margin-bottom: 35px;
    margin-top: 30px
}

@media only screen and (max-width:1023px) {
    .happen h2 {
        margin-bottom: 20px
    }

    .happen h2 br {
        display: none
    }

    .happen h2 br.mobile {
        display: block
    }
}

.happen h2+.happen__text {
    margin-top: 35px
}

@media only screen and (max-width:1023px) {
    .happen h2+.happen__text {
        margin-top: 20px
    }
}

.happen h2+.happen__subtitle {
    margin-top: 15px
}

.happen h2 .mobile {
    display: none
}

.happen__subtitle {
    font-size: 18px;
    margin-bottom: 30px
}

@media only screen and (max-width:1023px) {
    .happen__subtitle {
        margin-bottom: 20px;
        font-size: 14px
    }
}

@media only screen and (max-width:767px) {
    .happen__subtitle br {
        display: none
    }
}

.happen__text {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 34px;
    text-transform: uppercase
}

@media only screen and (max-width:1023px) {
    .happen__text {
        margin-bottom: 20px
    }
}

.happen__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    margin: 0 auto;
    border: 1px solid #edf1f7
}

.happen__icon img {
    pointer-events: none;
    user-select: none
}

.happen .corner.left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(95%) rotate(7deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fffaf2;
    z-index: 5
}

.happen .corner.right {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(95%) rotate(-7deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fffaf2;
    z-index: 5
}

.step {
    overflow: hidden;
    padding: 130px 0 404px;
    margin-top: 75px;
    position: relative
}

@media only screen and (max-width:1023px) {
    .step {
        padding-bottom: 290px
    }
}

@media only screen and (max-width:767px) {
    .step {
        padding-bottom: 240px;
        padding-top: 20px
    }
}

.step.step1,.step.step3 {
    z-index: 4
}

.step.step1 .step__figure,.step.step3 .step__figure {
    bottom: 0;
    right: 0;
    mix-blend-mode: soft-light
}

@media only screen and (max-width:1279px) {
    .step.step1 .step__figure,.step.step3 .step__figure {
        bottom: 8%;
        width: 400px
    }
}

@media only screen and (max-width:1023px) {
    .step.step1 .step__figure,.step.step3 .step__figure {
        width: 300px
    }
}

@media only screen and (max-width:767px) {
    .step.step1 .step__figure,.step.step3 .step__figure {
        width: 230px;
        bottom: 15%
    }
}

.step.step1 .step__num,.step.step3 .step__num {
    top: 0;
    left: 0;
    transform: translateY(-50%) translateX(-30%)
}

@media only screen and (max-width:767px) {
    .step.step1 .step__num,.step.step3 .step__num {
        transform: translateY(-20%) translateX(-30%)
    }
}

.step.step2 {
    position: relative;
    overflow: hidden;
    padding-top: 380px;
    margin-top: -320px;
    z-index: 3
}

@media only screen and (max-width:1023px) {
    .step.step2 {
        padding-bottom: 350px
    }
}

@media only screen and (max-width:767px) {
    .step.step2 {
        padding-top: 340px;
        margin-top: -310px;
        padding-bottom: 0
    }
}

.step.step2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(3deg);
    width: 150%;
    height: 300px;
    top: 0;
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,82,255,.05)
}

.step.step2::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) rotate(-3deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,82,255,.05)
}

@media only screen and (max-width:767px) {
    .step.step2::before {
        display: none
    }
}

.step.step2 .container {
    text-align: right
}

.step.step2 .step__content {
    text-align: left
}

.step.step2 .step__figure {
    top: 0;
    left: 0
}

@media only screen and (max-width:1800px) {
    .step.step2 .step__figure {
        left: -11%
    }
}

@media only screen and (max-width:1660px) {
    .step.step2 .step__figure {
        width: 57%
    }
}

@media only screen and (max-width:1345px) {
    .step.step2 .step__figure {
        width: 53%
    }
}

@media only screen and (max-width:1279px) {
    .step.step2 .step__figure {
        top: 12%
    }
}

@media only screen and (max-width:1023px) {
    .step.step2 .step__figure {
        width: 61%;
        top: 21%;
        left: -15%
    }
}

@media only screen and (max-width:767px) {
    .step.step2 .step__figure {
        display: none
    }
}

.step.step2 .step__num {
    top: 0;
    right: 0;
    transform: translateY(-15%) translateX(43%)
}

@media only screen and (max-width:1660px) {
    .step.step2 .step__num {
        transform: translateY(-46%) translateX(25%)
    }
}

.step.step2 .step__money {
    position: absolute;
    bottom: 0;
    right: -9%;
    box-shadow: none;
    z-index: 3;
    transform: translateY(18%);
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1279px) {
    .step.step2 .step__money {
        display: none
    }
}

.step.step2 .dollar {
    position: absolute;
    bottom: -90%;
    left: 60%;
    z-index: 4;
    box-shadow: none;
    top: initial;
    transform: none
}

@media only screen and (max-width:767px) {
    .step.step2 .dollar {
        display: none
    }
}

.step.step3 {
    position: relative;
    overflow: hidden;
    background: url(../img/money3.png) no-repeat bottom right;
    padding-top: 250px;
    z-index: 2;
    margin-top: -320px;
    padding-bottom: 250px;
    margin-bottom: 0
}

@media only screen and (max-width:1279px) {
    .step.step3 {
        padding-bottom: 180px
    }
}

@media only screen and (max-width:1023px) {
    .step.step3 {
        padding-top: 200px
    }
}

@media only screen and (max-width:767px) {
    .step.step3 {
        margin-top: 0;
        padding-bottom: 40px;
        padding-top: 140px
    }
}

.step.step3 .dollar {
    position: absolute;
    top: 50%;
    right: -22%;
    z-index: 4;
    box-shadow: none;
    top: initial;
    transform: none
}

@media only screen and (max-width:767px) {
    .step.step3 .dollar {
        display: none
    }
}

.step__figure {
    position: absolute;
    pointer-events: none;
    user-select: none
}

.step h2 {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
    font-weight: 800
}

@media only screen and (max-width:1279px) {
    .step h2 {
        font-size: 30px
    }
}

@media only screen and (max-width:1023px) {
    .step h2 {
        font-size: 24px
    }
}

@media only screen and (max-width:767px) {
    .step h2 {
        font-size: 18px
    }
}

.step .container {
    position: relative
}

.step .container>img {
    box-shadow: 0 80px 75px -45px rgba(0,0,0,.3);
    border-radius: 5px;
    position: absolute;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -18%;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1279px) {
    .step .container>img {
        max-height: 500px
    }
}

@media only screen and (max-width:1023px) {
    .step .container>img {
        display: none
    }

    .step .container>img.mobile {
        display: block!important;
        right: -1%;
        height: 474px
    }
}

@media only screen and (max-width:767px) {
    .step .container>img {
        display: block;
        position: static;
        width: calc(100% + 30px);
        margin-left: -15px;
        transform: none
    }

    .step .container>img.mobile {
        display: none!important
    }
}

.step .container>img.mobile {
    display: none
}

.step__content {
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    padding: 70px;
    display: inline-block;
    border: 2px solid #edf1f7
}

@media only screen and (max-width:1279px) {
    .step__content {
        padding: 40px
    }
}

@media only screen and (max-width:1023px) {
    .step__content {
        width: 55%
    }
}

@media only screen and (max-width:767px) {
    .step__content {
        width: 100%;
        margin-top: -25%;
        padding: 40px 30px
    }
}

.step__num {
    position: absolute;
    color: #edf1f7;
    font-size: 350px;
    font-weight: 800;
    opacity: .5;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1279px) {
    .step__num {
        font-size: 200px
    }
}

@media only screen and (max-width:767px) {
    .step__num {
        font-size: 100px
    }
}

.step__text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 60px;
    position: relative
}

@media only screen and (max-width:1279px) {
    .step__text {
        font-size: 16px
    }
}

@media only screen and (max-width:1023px) {
    .step__text {
        font-size: 13px
    }

    .step__text br {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .step__text {
        margin-bottom: 30px
    }
}

.step__text strong {
    font-weight: 800;
    font-style: italic
}

.step__text+.step__text {
    margin-top: -30px
}

.step__bottom {
    font-family: "Playfair Display",serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    display: inline-block
}

@media only screen and (max-width:1023px) {
    .step__bottom {
        font-size: 13px
    }
}

.step__bottom.question::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 40px;
    height: 60px;
    background: url(../img/icons/!q.svg) no-repeat center;
    background-size: contain
}

@media only screen and (max-width:1023px) {
    .step__bottom.question::after {
        width: 30px
    }
}

@media only screen and (max-width:767px) {
    .step__bottom.question::after {
        display: none
    }
}

.step__bottom::before {
    content: '';
    position: absolute;
    z-index: 1;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 60px;
    background: url(../img/icons/!.svg) no-repeat center;
    background-size: contain
}

@media only screen and (max-width:1023px) {
    .step__bottom::before {
        width: 10px;
        right: -4px
    }
}

@media only screen and (max-width:767px) {
    .step__bottom::before {
        display: none
    }
}

.step__bottom span {
    position: relative;
    z-index: 2
}

.step__grid {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(50%) translateX(-50%);
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1023px) {
    .step__grid {
        display: none
    }
}

.recap {
    background: #fffaf2;
    padding: 140px 0 230px;
    text-align: center;
    position: relative;
    overflow: hidden
}

@media only screen and (max-width:1279px) {
    .recap {
        padding: 68px 0 155px
    }
}

@media only screen and (max-width:767px) {
    .recap {
        padding: 35px 0 102px
    }
}

.recap::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(95%) rotate(7deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fff;
    z-index: 5
}

.recap::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(95%) rotate(-7deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fff;
    z-index: 5
}

.recap .container {
    display: flex;
    align-items: center;
    justify-content: center
}

.recap h2 {
    margin-bottom: 30px
}

.recap__block {
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    display: inline-block;
    padding: 60px 80px;
    border: 1px solid #edf1f7;
    position: relative;
    z-index: 4
}

@media only screen and (max-width:767px) {
    .recap__block {
        padding: 40px 30px
    }
}

.recap__block .corner {
    position: absolute;
    width: 20px;
    height: 20px
}

.recap__block .corner.tr {
    right: -2px;
    top: -2px;
    border-top: 4px solid #f90;
    border-right: 4px solid #f90
}

.recap__block .corner.tl {
    left: -2px;
    top: -2px;
    border-top: 4px solid #f90;
    border-left: 4px solid #f90
}

.recap__block .corner.br {
    right: -2px;
    bottom: -2px;
    border-bottom: 4px solid #f90;
    border-right: 4px solid #f90
}

.recap__block .corner.bl {
    left: -2px;
    bottom: -2px;
    border-bottom: 4px solid #f90;
    border-left: 4px solid #f90
}

.recap__text {
    line-height: 1.5;
    color: #000
}

@media only screen and (max-width:767px) {
    .recap__text br {
        display: none
    }
}

.recap__text strong {
    font-style: italic
}

.plan {
    padding: 75px 0;
    position: relative
}

@media only screen and (max-width:1345px) {
    .plan {
        overflow: hidden
    }
}

.plan::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(0);
    height: 246px;
    width: 100%;
    background: #edf1f7;
    opacity: .5
}

@media only screen and (max-width:1279px) {
    .plan::before {
        display: none
    }
}

.plan h2 {
    margin-bottom: 19px
}

.plan .subtitle {
    margin-bottom: 50px
}

@media only screen and (max-width:1279px) {
    .plan .subtitle {
        margin-bottom: 80px
    }
}

@media only screen and (max-width:1023px) {
    .plan .subtitle br {
        display: none
    }
}

.plan__list {
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width:1279px) {
    .plan__list {
        flex-wrap: wrap
    }
}

.plan__item {
    position: relative;
    z-index: 1
}

@media only screen and (max-width:1279px) {
    .plan__item {
        width: 500px;
        text-align: center;
        margin-bottom: 20px
    }
}

@media only screen and (max-width:767px) {
    .plan__item {
        text-align: left
    }
}

.plan__item:nth-child(2) {
    position: relative;
    z-index: 2;
    margin: 0 -2px
}

@media only screen and (max-width:1279px) {
    .plan__item:nth-child(2) {
        margin: 0 0 20px
    }
}

.plan__item:nth-child(2) .plan__num {
    top: initial;
    left: initial;
    right: 0;
    bottom: 0;
    transform: translate(30%,35%);
    z-index: 5;
    font-size: 250px
}

@media only screen and (max-width:1660px) {
    .plan__item:nth-child(2) .plan__num {
        font-size: 150px;
        transform: translate(30%,32%)
    }
}

@media only screen and (max-width:1279px) {
    .plan__item:nth-child(2) .plan__num {
        line-height: 1;
        transform: translate(42%,21%)
    }
}

@media only screen and (max-width:767px) {
    .plan__item:nth-child(2) .plan__num {
        right: -10%!important
    }
}

.plan__item:nth-child(2) .plan__text {
    margin-bottom: 64px
}

@media only screen and (max-width:1023px) {
    .plan__item:nth-child(2) .plan__text {
        margin-bottom: 30px
    }
}

@media only screen and (max-width:767px) {
    .plan__item:nth-child(3) {
        z-index: 3
    }
}

.plan__item:nth-child(3) .plan__num {
    left: initial;
    right: 0;
    transform: translate(50%,-55%)
}

@media only screen and (max-width:1279px) {
    .plan__item:nth-child(3) .plan__num {
        right: initial;
        left: 0;
        top: initial;
        bottom: 0;
        line-height: 1;
        transform: translate(-63%,37%)
    }
}

@media only screen and (max-width:767px) {
    .plan__item:nth-child(3) .plan__num {
        right: -10%!important
    }
}

.plan__type {
    color: #f11;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px
}

.plan__name {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #131313
}

@media only screen and (max-width:1345px) {
    .plan__name {
        font-size: 38px
    }
}

@media only screen and (max-width:1023px) {
    .plan__name {
        font-size: 35px
    }
}

.plan__text {
    line-height: 1.5;
    margin-bottom: 30px
}

@media only screen and (max-width:767px) {
    .plan__text br {
        display: none
    }
}

.plan ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

@media only screen and (max-width:1279px) {
    .plan ul {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column
    }
}

@media only screen and (max-width:767px) {
    .plan ul {
        display: flex;
        align-items: flex-start;
        justify-content: center
    }
}

.plan ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5
}

@media only screen and (max-width:1279px) {
    .plan ul li {
        display: block
    }
}

@media only screen and (max-width:767px) {
    .plan ul li {
        font-size: 14px
    }
}

.plan ul li:last-child {
    margin-bottom: 0
}

.plan ul li::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 14px;
    height: 14px;
    background: url(../img/icons/close.svg) no-repeat center;
    background-size: contain
}

.plan__num {
    color: #edf1f7;
    font-size: 350px;
    font-weight: 800;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1660px) {
    .plan__num {
        font-size: 250px
    }
}

@media only screen and (max-width:1279px) {
    .plan__num {
        z-index: 3;
        font-size: 350px!important;
        transform: translate(-50%,-40%)
    }
}

@media only screen and (max-width:767px) {
    .plan__num {
        font-size: 144px!important;
        line-height: 1!important;
        left: initial!important;
        right: 0!important;
        bottom: initial!important;
        top: 0!important;
        transform: translate(-50%,-30%)!important
    }
}

.plan__block {
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    padding: 55px 50px;
    border: 1px solid #edf1f7
}

@media only screen and (max-width:1660px) {
    .plan__block {
        padding: 43px 26px
    }
}

.plan__grid {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-100%)
}

@media only screen and (max-width:1279px) {
    .plan__grid {
        display: none
    }
}

.icons {
    position: relative;
    padding: 120px 0
}

@media only screen and (max-width:767px) {
    .icons {
        padding-bottom: 60px
    }
}

.icons::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: #fff;
    box-shadow: 0 15px 25px rgba(0,82,255,.03)
}

.icons h2 {
    margin-bottom: 15px
}

.icons .subtitle {
    margin-bottom: 44px
}

@media only screen and (max-width:1023px) {
    .icons .subtitle br {
        display: none
    }
}

.icons__desc {
    font-family: "Playfair Display",serif;
    font-weight: 700;
    font-size: 18px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    color: #131313
}

.icons__desc::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 40px;
    height: 60px;
    background: url(../img/icons/!q.svg) no-repeat center;
    background-size: contain
}

.icons__desc span {
    position: relative;
    z-index: 2
}

.icons__list {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media only screen and (max-width:1279px) {
    .icons__list {
        flex-wrap: wrap
    }
}

.icons__item {
    text-align: center
}

@media only screen and (max-width:1345px) {
    .icons__item {
        width: 100%;
        padding: 0 10px
    }
}

@media only screen and (max-width:1279px) {
    .icons__item {
        width: 50%
    }
}

@media only screen and (max-width:1023px) {
    .icons__item {
        padding: 0 20px
    }
}

@media only screen and (max-width:767px) {
    .icons__item {
        width: 100%
    }
}

.icons__item img {
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1345px) {
    .icons__item img {
        max-width: 100%
    }
}

.icons__title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-top: -30px
}

.icons__text {
    line-height: 1.5
}

@media only screen and (max-width:1345px) {
    .icons__text br {
        display: none
    }
}

.callback {
    position: relative;
    padding: 80px 0;
    overflow: hidden
}

@media only screen and (max-width:1023px) {
    .callback {
        padding: 100px 0
    }
}

@media only screen and (max-width:767px) {
    .callback {
        padding: 30px 0
    }
}

.callback.form {
    margin: 50px 0;
    padding: 260px 0
}

@media only screen and (max-width:1279px) {
    .callback.form {
        padding: 120px 0
    }
}

@media only screen and (max-width:767px) {
    .callback.form {
        padding: 60px 0 40px
    }

    .callback.form .callback__block {
        padding: 30px 22px
    }
}

@media only screen and (max-width:1279px) {
    .callback.form img {
        right: -6%
    }
}

.callback img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1279px) {
    .callback img {
        right: -40%;
        height: 600px
    }
}

@media only screen and (max-width:1023px) {
    .callback img {
        right: -50%;
        height: 500px
    }
}

@media only screen and (max-width:767px) {
    .callback img {
        position: relative;
        top: 0;
        transform: translateX(-50%);
        left: 50%
    }
}

.callback__question {
    font-weight: 800;
    font-size: 500px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-45%) translateX(-50%);
    color: #edf1f7;
    opacity: .25;
    pointer-events: none;
    user-select: none
}

.callback__block {
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    padding: 80px 70px;
    position: relative;
    z-index: 3;
    display: inline-block;
    border: 1px solid #edf1f7
}

@media only screen and (max-width:1279px) {
    .callback__block {
        width: 65%;
        padding: 40px
    }
}

@media only screen and (max-width:1023px) {
    .callback__block {
        width: 70%;
        padding: 30px
    }
}

@media only screen and (max-width:767px) {
    .callback__block {
        width: 100%;
        margin-top: -100%
    }
}

.callback h2 {
    margin-bottom: 13px
}

@media only screen and (max-width:1023px) {
    .callback h2 {
        font-size: 24px;
        margin-right: 20px
    }

    .callback h2 br {
        display: none
    }
}

@media only screen and (max-width:767px) {
    .callback h2 {
        font-size: 24px
    }
}

.callback__text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px
}

@media only screen and (max-width:1279px) {
    .callback__text {
        font-size: 16px
    }

    .callback__text br {
        display: none
    }
}

@media only screen and (max-width:1023px) {
    .callback__text {
        font-size: 13px
    }
}

.callback__text span {
    font-weight: 800;
    font-size: 24px
}

@media only screen and (max-width:1279px) {
    .callback__text span {
        font-size: 20px
    }
}

@media only screen and (max-width:1023px) {
    .callback__text span {
        font-size: 13px
    }
}

.callback__controls {
    display: flex;
    align-items: center
}

@media only screen and (max-width:767px) {
    .callback__controls {
        display: block
    }
}

.callback__controls .btn {
    margin-right: 30px;
    padding: 18px 39px
}

@media only screen and (max-width:1023px) {
    .callback__controls .btn {
        padding: 18px 19px
    }
}

@media only screen and (max-width:767px) {
    .callback__controls .btn {
        margin-right: 0;
        margin-bottom: 20px;
        padding: 18px 49px
    }
}

.callback__controls>span {
    font-size: 12px;
    color: #828282;
    line-height: 1.4
}

@media only screen and (max-width:1023px) {
    .callback__controls>span {
        display: none
    }

    .callback__controls>span.mobile {
        display: block!important
    }
}

.callback__controls>span.mobile {
    display: none
}

.callback__controls>span strong {
    font-size: 14px;
    text-transform: uppercase;
    color: #4f4f4f
}

.callback form span {
    display: block;
    margin-bottom: 15px
}

.callback form .form-group {
    display: flex
}

.callback form input {
    height: 60px;
    margin: 0;
    width: 100%;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    font-size: 18px;
    color: #131313;
    padding: 5px 30px
}

@media only screen and (max-width:767px) {
    .callback form input {
        padding: 5px 15px;
        height: 50px;
        font-size: 16px
    }
}

.callback form button {
    box-shadow: none;
    margin: 0;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%),#f90;
    border-radius: 0 5px 5px 0;
    font-weight: 700
}

@media only screen and (max-width:767px) {
    .callback form button {
        width: 48px!important;
        height: 50px;
        color: transparent;
        user-select: none;
        text-shadow: none;
        position: relative
    }

    .callback form button::before {
        content: '';
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: url(../img/icons/check-white.svg) no-repeat;
        background-size: contain;
        width: 22px;
        height: 22px
    }
}

.callback form button:hover {
    box-shadow: 0 2px 0 #b95937,inset 0 0 20px 5px rgba(255,255,255,.15)
}

.callback form button:hover:active {
    box-shadow: none
}

.callback .social {
    margin-top: 40px
}

@media only screen and (max-width:767px) {
    .callback .social {
        position: relative;
        margin-top: 50px
    }
}

@media only screen and (max-width:374px) {
    .callback .social .social__list>div {
        width: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .callback .social .social__list>div a {
        width: 32%;
        padding-left: 7px;
        padding-right: 7px;
        font-size: 7px
    }
}

@media only screen and (max-width:767px) {
    .callback .social .social__list>a {
        position: absolute;
        top: -40px;
        padding-left: 0;
        padding-right: 0;
        left: 0;
        width: auto;
        padding: 0
    }
}

@media only screen and (max-width:767px) {
    .callback .social a {
        font-size: 9px;
        padding-left: 10px;
        padding-right: 10px
    }
}

.help {
    padding: 140px 0
}

@media only screen and (max-width:1279px) {
    .help {
        overflow: hidden
    }
}

@media only screen and (max-width:1023px) {
    .help {
        padding: 100px 0 140px
    }
}

@media only screen and (max-width:767px) {
    .help {
        padding: 60px 0
    }
}

.help .container {
    display: flex;
    align-items: center;
    justify-content: center
}

@media only screen and (max-width:1023px) {
    .help .container {
        padding: 0 80px
    }
}

@media only screen and (max-width:767px) {
    .help .container {
        padding: 0 15px
    }
}

.help__block {
    padding: 80px 70px;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    border: 1px solid #edf1f7;
    position: relative
}

@media only screen and (max-width:1023px) {
    .help__block {
        padding: 50px 40px
    }
}

@media only screen and (max-width:374px) {
    .help__block {
        padding: 40px 30px
    }

    .help__block .btn {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center
    }
}

.help h2 {
    margin-bottom: 13px
}

@media only screen and (max-width:1023px) {
    .help h2 {
        font-size: 24px
    }
}

@media only screen and (max-width:767px) {
    .help h2 {
        font-size: 22px
    }
}

.help__text {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px
}

@media only screen and (max-width:1023px) {
    .help__text {
        font-size: 14px;
        margin-bottom: 20px
    }

    .help__text br {
        display: none
    }
}

.help__img {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(40%,30%);
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:767px) {
    .help__img {
        width: 214px;
        transform: translate(40%,42%)
    }
}

.price {
    background: url(../img/bricks2.png) no-repeat -20% 30%
}

@media only screen and (max-width:1844px) {
    .price {
        background: url(../img/bricks2.png) no-repeat -39% 30%
    }
}

@media only screen and (max-width:1640px) {
    .price {
        background: url(../img/bricks2.png) no-repeat -78% 30%
    }
}

@media only screen and (max-width:1345px) {
    .price {
        background: url(../img/bricks2.png) no-repeat -97% 30%
    }
}

@media only screen and (max-width:1279px) {
    .price {
        background: url(../img/bricks2.png) no-repeat -47% 30%;
        background-size: 50%
    }
}

@media only screen and (max-width:1023px) {
    .price {
        background: url(../img/bricks2.png) no-repeat -240% 70%;
        background-size: 80%
    }
}

@media only screen and (max-width:767px) {
    .price {
        background: url(../img/bricks2.png) no-repeat center -20vw;
        background-size: 100%;
        padding-top: 40px
    }
}

@media only screen and (max-width:485px) {
    .price {
        background: url(../img/bricks2.png) no-repeat center -10vw;
        background-size: 130%;
        padding-top: 40px
    }
}

.price .container {
    display: flex;
    align-items: center
}

@media only screen and (max-width:767px) {
    .price .container {
        display: block;
        text-align: center
    }
}

.price .container>img {
    pointer-events: none;
    user-select: none;
    margin-left: -30px;
    margin-right: -30px
}

@media only screen and (max-width:1279px) {
    .price .container>img {
        width: 300px;
        margin-right: 30px
    }
}

@media only screen and (max-width:1023px) {
    .price .container>img {
        margin-right: 10px
    }
}

@media only screen and (max-width:767px) {
    .price .container>img {
        margin: 0 auto
    }
}

.price h2 {
    margin-bottom: 25px
}

@media only screen and (max-width:1023px) {
    .price h2 {
        font-size: 24px;
        margin-bottom: 15px
    }

    .price h2 br {
        display: none
    }
}

.price__text {
    font-size: 18px
}

@media only screen and (max-width:1640px) {
    .price__text br {
        display: none
    }
}

@media only screen and (max-width:1023px) {
    .price__text {
        font-size: 14px
    }
}

.price__text strong {
    font-weight: 800;
    font-style: italic
}

.reviews {
    padding: 130px 0;
    position: relative
}

@media only screen and (max-width:1700px) {
    .reviews {
        overflow: hidden
    }
}

.reviews h2 {
    margin-bottom: 15px
}

@media only screen and (max-width:1023px) {
    .reviews h2 {
        font-size: 24px
    }
}

.reviews .subtitle {
    margin-bottom: 40px
}

@media only screen and (max-width:1023px) {
    .reviews .subtitle br {
        display: none
    }
}

.reviews .slider {
    padding: 0
}

.reviews .swiper-slide {
    display: inline-block;
    width: auto;
    display: flex;
    align-items: center
}

@media only screen and (max-width:767px) {
    .reviews .swiper-slide {
        display: block
    }
}

.reviews .swiper-slide span {
    color: #131313;
    opacity: .5;
    font-size: 11px;
    line-height: 1.8
}

.reviews .swiper-pagination {
    text-align: center
}

.reviews__photo {
    border-radius: 50%;
    border: 7px solid #fff;
    box-shadow: 0 0 50px 10px rgba(255,153,0,.08),0 20px 25px -10px rgba(0,82,255,.04);
    width: 164px;
    margin-right: 20px
}

@media only screen and (max-width:767px) {
    .reviews__photo {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-right: 0;
        margin-bottom: 20px
    }
}

.reviews__name {
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.reviews__name a {
    display: inline-block;
    margin-left: 10px;
    transition: all .2s ease-in-out
}

.reviews__name a:hover {
    opacity: .5
}

.reviews__text {
    line-height: 1.5;
    color: #000;
    margin-bottom: 15px
}

@media only screen and (max-width:767px) {
    .reviews__text br {
        display: none
    }
}

.reviews .share1 {
    position: absolute;
    left: 26%;
    bottom: 2%;
    z-index: 4;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1660px) {
    .reviews .share1 {
        left: 16%
    }
}

@media only screen and (max-width:1279px) {
    .reviews .share1 {
        left: -20%;
        bottom: 0
    }
}

.reviews .share2 {
    position: absolute;
    right: 24%;
    top: 30%;
    z-index: 4;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1660px) {
    .reviews .share2 {
        right: 14%;
        top: -2%;
        right: -6%;
        width: 240px
    }
}

@media only screen and (max-width:1023px) {
    .reviews .share2 {
        top: -4%
    }
}

@media only screen and (max-width:767px) {
    .reviews .share2 {
        right: -40%
    }
}

.docs {
    padding: 146px 0;
    margin-top: -32px;
    position: relative;
    overflow: hidden
}

.docs::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-80%) rotate(-4deg);
    width: 150%;
    height: 300px;
    top: 0;
    background: #fff;
    box-shadow: 0 15px 30px rgba(0,82,255,.05);
    z-index: 2
}

.docs::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(80%) rotate(-4deg);
    width: 150%;
    height: 300px;
    bottom: 0;
    background: #fff;
    box-shadow: 0 -15px 30px rgba(0,82,255,.05);
    z-index: 2
}

.docs .square {
    top: -24%;
    left: -14%;
    position: absolute;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1660px) {
    .docs .square {
        width: 53%
    }
}

@media only screen and (max-width:1023px) {
    .docs .square {
        display: none
    }
}

.docs .circle {
    bottom: -32%;
    right: -20%;
    position: absolute;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1660px) {
    .docs .circle {
        width: 53%
    }
}

@media only screen and (max-width:1023px) {
    .docs .circle {
        display: none
    }
}

.docs h2 {
    margin-bottom: 19px
}

.docs .subtitle {
    margin-bottom: 47px
}

@media only screen and (max-width:1023px) {
    .docs .subtitle {
        width: 60%;
        margin: 0 auto 47px
    }
}

.docs__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(../img/docs.png) no-repeat center;
    background-size: contain
}

@media only screen and (max-width:1023px) {
    .docs__list {
        background: 0 0;
        flex-direction: initial;
        flex-wrap: wrap
    }
}

.docs__item {
    display: flex;
    align-items: center;
    margin-right: 47px;
    transform: translateX(-63%);
    text-align: right;
    margin-bottom: 144px
}

@media only screen and (max-width:1279px) {
    .docs__item {
        margin-right: 0;
        transform: translateX(-48%)
    }
}

@media only screen and (max-width:1023px) {
    .docs__item {
        transform: none!important;
        margin-right: 0!important;
        margin-left: 0!important;
        flex-direction: column;
        text-align: center!important;
        width: 50%;
        margin-bottom: 31px;
        padding: 0 20px
    }

    .docs__item>div:not(.docs__icon) {
        order: 2
    }
}

@media only screen and (max-width:767px) {
    .docs__item {
        width: 100%
    }
}

.docs__item:last-child {
    margin-bottom: 0
}

.docs__item:nth-child(even) {
    margin-right: 0;
    margin-left: 47px;
    transform: translateX(63%);
    text-align: left
}

@media only screen and (max-width:1279px) {
    .docs__item:nth-child(even) {
        transform: translateX(53%)
    }
}

.docs__item:nth-child(even) .docs__icon {
    margin-left: 0;
    margin-right: 20px
}

.docs__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 500px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    border: 1px solid #edf1f7
}

@media only screen and (max-width:1023px) {
    .docs__icon {
        order: 1;
        margin-bottom: 15px;
        margin-left: 0!important;
        margin-right: 0!important
    }
}

.docs__title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px
}

.docs__text {
    line-height: 1.5
}

@media only screen and (max-width:1023px) {
    .docs__text br {
        display: none
    }
}

.portfolio {
    padding: 100px 0
}

@media only screen and (max-width:1660px) {
    .portfolio {
        overflow: hidden;
        padding-bottom: 200px;
        margin-bottom: -60px
    }
}

@media only screen and (max-width:767px) {
    .portfolio {
        padding-bottom: 120px;
        padding-top: 40px
    }
}

.portfolio .container {
    position: relative
}

.portfolio .ruler {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(40%) translateY(70%);
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1279px) {
    .portfolio .ruler {
        transform: translateX(40%) translateY(80%);
        width: 300px
    }
}

@media only screen and (max-width:1023px) {
    .portfolio .ruler {
        transform: translateX(40%) translateY(60%)
    }
}

@media only screen and (max-width:767px) {
    .portfolio .ruler {
        display: none
    }
}

.portfolio h2 {
    margin-bottom: 10px
}

.portfolio .subtitle {
    margin-bottom: 40px
}

.portfolio .swiper-slide {
    padding: 0;
    border: 0;
    box-shadow: none
}

.portfolio__block {
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    padding: 50px 80px;
    border: 1px solid #edf1f7
}

@media only screen and (max-width:1279px) {
    .portfolio__block {
        padding: 25px
    }
}

@media only screen and (max-width:767px) {
    .portfolio__block {
        padding: 0;
        box-shadow: none;
        border: 0
    }
}

.portfolio__item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    position: relative;
    cursor: pointer
}

.portfolio__zoom {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: url(../img/icons/zoom.svg) no-repeat center;
    background-size: 24px
}

@media only screen and (max-width:1023px) {
    .portfolio__zoom {
        z-index: 3
    }
}

.portfolio .main {
    height: 576px
}

@media only screen and (max-width:1279px) {
    .portfolio .main {
        height: 450px
    }
}

@media only screen and (max-width:1023px) {
    .portfolio .main {
        height: 301px
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main {
        height: auto;
        margin-top: 0;
        padding-bottom: 0;
        margin-bottom: 0
    }
}

.portfolio .main .swiper-slide {
    display: flex
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide {
        display: block
    }
}

.portfolio .main .swiper-slide .portfolio__item {
    height: 576px;
    width: 27%;
    display: flex;
    justify-content: space-between;
    flex-direction: column
}

@media only screen and (max-width:1279px) {
    .portfolio .main .swiper-slide .portfolio__item {
        height: 450px
    }
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item {
        position: relative;
        height: 301px;
        border-radius: 5px
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item {
        height: auto;
        margin-bottom: 10px;
        width: calc(100% + 10px);
        display: block;
        flex-direction: initial
    }
}

.portfolio .main .swiper-slide .portfolio__item:first-child {
    width: 100%;
    margin-right: 10px;
    display: block
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(0deg,#000 0,rgba(255,255,255,0) 100%);
        border-radius: 5px
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child {
        height: 264px
    }
}

.portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__info {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: #fff;
    padding: 27px 30px;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__info {
        background: 0 0;
        padding: 0;
        bottom: 20px;
        left: 20px
    }
}

.portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__title {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    color: #131313;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__title {
        color: #fff
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__title {
        font-size: 12px
    }
}

.portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__s {
    margin-left: 15px;
    font-weight: 700;
    padding: 5px 7px 3px;
    border: 1px solid #f90;
    border-radius: 5px;
    color: orange;
    text-transform: initial
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__s {
        display: none
    }
}

.portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__addr {
    color: #000;
    opacity: .5
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__addr {
        color: #fff
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__addr {
        font-size: 12px
    }
}

.portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__zoom {
    position: absolute;
    right: 40px;
    top: 40px;
    border: 1px solid #fff
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item:first-child .portfolio__zoom {
        right: 20px;
        top: 20px
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item:last-child {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px -5px;
        margin-top: 0
    }

    .portfolio .main .swiper-slide .portfolio__item:last-child>.portfolio__item {
        width: calc(33.33% - 10px);
        margin: 0 5px 5px
    }
}

.portfolio .main .swiper-slide .portfolio__item .portfolio__item {
    height: 186px;
    width: 100%;
    margin-right: 0;
    display: block
}

@media only screen and (max-width:1279px) {
    .portfolio .main .swiper-slide .portfolio__item .portfolio__item {
        height: 143px
    }
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item .portfolio__item {
        height: 93px;
        border-radius: 3px
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item .portfolio__item {
        height: 74px
    }
}

.portfolio .main .swiper-slide .portfolio__item .portfolio__item .portfolio__zoom {
    border: 0;
    position: absolute;
    right: 20px;
    bottom: 20px;
    top: initial;
    left: initial;
    opacity: .5
}

@media only screen and (max-width:1023px) {
    .portfolio .main .swiper-slide .portfolio__item .portfolio__item .portfolio__zoom {
        right: 0;
        bottom: 0
    }
}

@media only screen and (max-width:767px) {
    .portfolio .main .swiper-slide .portfolio__item .portfolio__item .portfolio__zoom {
        right: 50%;
        bottom: 50%;
        transform: translate(50%,50%)
    }
}

.portfolio .nav {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #edf1f7;
    overflow: hidden;
    position: relative
}

@media only screen and (max-width:1023px) {
    .portfolio .nav {
        margin-top: 20px;
        padding-top: 20px
    }
}

@media only screen and (max-width:767px) {
    .portfolio .nav {
        margin-left: -15px;
        width: calc(100% + 30px)
    }
}

.portfolio .nav .portfolio__item {
    height: 225px;
    color: #fff
}

@media only screen and (max-width:1279px) {
    .portfolio .nav .portfolio__item {
        height: 170px
    }
}

@media only screen and (max-width:1023px) {
    .portfolio .nav .portfolio__item {
        height: 225px
    }
}

.portfolio .nav .portfolio__item .portfolio__s {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid #fff;
    font-weight: 700;
    padding: 5px 10px 3px;
    border-radius: 5px
}

.portfolio .nav .portfolio__item .portfolio__info {
    position: absolute;
    bottom: 15px;
    left: 20px
}

.portfolio .nav .portfolio__item .portfolio__title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px
}

@media only screen and (max-width:1279px) {
    .portfolio .nav .portfolio__item .portfolio__title {
        font-size: 14px
    }
}

.portfolio .nav .portfolio__item .portfolio__addr {
    opacity: .5
}

@media only screen and (max-width:1279px) {
    .portfolio .nav .portfolio__item .portfolio__addr {
        font-size: 12px
    }
}

.portfolio .swiper-button-next,.portfolio .swiper-button-prev {
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%),#f90;
    border-radius: 5px;
    top: initial;
    bottom: 2px;
    right: initial
}

.portfolio .swiper-button-next::before,.portfolio .swiper-button-prev::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.portfolio .swiper-button-next:hover,.portfolio .swiper-button-prev:hover {
    box-shadow: 0 2px 0 #b95937,inset 0 0 20px 5px rgba(255,255,255,.15)
}

.portfolio .swiper-button-next:hover:active,.portfolio .swiper-button-prev:hover:active {
    box-shadow: none
}

.portfolio .swiper-button-disabled {
    opacity: .5!important
}

.portfolio .swiper-button-prev {
    left: 0
}

.portfolio .swiper-button-prev::before {
    background: url(../img/icons/arrow-left-orange.svg) no-repeat center;
    background-size: 24px
}

.portfolio .swiper-button-next {
    left: 60px
}

.portfolio .swiper-button-next::before {
    background: url(../img/icons/arrow-right-orange.svg) no-repeat center;
    background-size: 24px
}

.tariff {
    padding: 10px 0;
    margin-bottom: 100px
}

.tariff h2 {
    margin-bottom: 20px
}

.tariff .subtitle {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 35px
}

@media only screen and (max-width:767px) {
    .tariff .subtitle {
        font-size: 14px
    }

    .tariff .subtitle br {
        display: none
    }
}

.tariff__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px -10px;
    margin-top: 0
}

@media only screen and (max-width:1279px) {
    .tariff__list {
        justify-content: center
    }
}

.tariff__item {
    width: calc(33.33% - 20px);
    margin: 0 10px 10px;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    border: 1px solid #edf1f7;
    padding: 55px 50px;
    position: relative
}

@media only screen and (max-width:1345px) {
    .tariff__item {
        padding: 37px 30px
    }
}

@media only screen and (max-width:1279px) {
    .tariff__item {
        width: 466px
    }
}

@media only screen and (max-width:767px) {
    .tariff__item {
        width: 100%
    }
}

.tariff__item .btn {
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: 55px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    text-align: center
}

@media only screen and (max-width:1023px) {
    .tariff__item .btn {
        position: static;
        width: 100%
    }
}

.tariff__item.ribbon {
    background: url(../img/ribbon.svg) no-repeat right top;
    background-size: 130px
}

.tariff__type {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px
}

@media only screen and (max-width:767px) {
    .tariff__type {
        font-size: 14px
    }
}

.tariff__type.blue {
    color: #2f80ed
}

.tariff__type.green {
    color: #27ae60
}

.tariff__type.orange {
    color: #f90
}

.tariff__price {
    font-size: 24px;
    line-height: 135%;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #edf1f7
}

.tariff__price strong {
    font-weight: 800;
    font-size: 48px;
    color: #131313
}

.tariff__price-crossed {
    margin-bottom: 10px;
    opacity: .45;
}

@media only screen and (max-width:767px) {
    .tariff__price strong {
        font-size: 36px
    }
}

@media only screen and (max-width:374px) {
    .tariff__price strong {
        font-size: 29px
    }
}

.tariff__text {
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 15px
}

.tariff ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 160px
}

@media only screen and (max-width:1023px) {
    .tariff ul {
        margin-bottom: 30px
    }
}

.tariff ul li {
    position: relative;
    padding-left: 39px;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 20px
}

@media only screen and (max-width:767px) {
    .tariff ul li {
        font-size: 14px
    }
}

@media only screen and (max-width:374px) {
    .tariff ul li {
        padding-left: 29px
    }
}

.tariff ul li:last-child {
    margin-bottom: 0
}

.tariff ul li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url(../img/icons/check.svg) no-repeat center;
    background-size: 20px
}

@media only screen and (max-width:374px) {
    .tariff ul li::before {
        width: 18px;
        height: 18px;
        background-size: 18px
    }
}

.tariff ul li.disable {
    opacity: .45
}

.tariff ul li.disable::before {
    background: url(../img/icons/doublecheck.svg) no-repeat center;
    background-size: 20px
}

.calculator {
    position: relative;
    padding-top: 77px;
    margin-bottom: 100px
}

@media only screen and (max-width:1279px) {
    .calculator {
        padding-top: 0
    }
}

@media only screen and (max-width:1023px) {
    .calculator {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 60px
    }
}

@media only screen and (max-width:767px) {
    .calculator {
        padding-top: 42px
    }
}

.calculator h2 {
    margin-bottom: 15px
}

@media only screen and (max-width:374px) {
    .calculator h2 br {
        display: none
    }
}

.calculator .subtitle {
    margin-bottom: 40px
}

.calculator .main-work {
    width: 100%
}

.calculator__header {
    display: flex;
    align-items: center
}

@media only screen and (max-width:767px) {
    .calculator__header {
        display: none
    }
}

.calculator__content {
    background: #fff;
    border-radius: 15px;
    position: relative
}

@media only screen and (max-width:1023px) {
    .calculator__content {
        border-radius: 0;
        height: auto
    }
}

.calculator__body {
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    border: 1px solid #edf1f7;
    padding: 42px 50px;
    margin-top: 30px
}

@media only screen and (max-width:1279px) {
    .calculator__body {
        padding: 20px 15px
    }
}

@media only screen and (max-width:1023px) {
    .calculator__body {
        box-shadow: none;
        padding: 0;
        border: 0
    }
}

@media only screen and (max-width:767px) {
    .calculator__body {
        border-radius: 0
    }
}

.calculator__body.padding {
    padding: 42px 22%
}

@media only screen and (max-width:767px) {
    .calculator__body.padding {
        padding: 30px 15px
    }
}

.calculator__body.padding .calculator__controls {
    margin-left: 0;
    padding: 0
}

.calculator__step {
    padding: 0 71px;
    display: none;
    transition: all .2s ease-in-out;
    height: 630px
}

@media only screen and (max-width:1345px) {
    .calculator__step {
        padding: 0
    }
}

@media only screen and (max-width:1023px) {
    .calculator__step {
        height: auto
    }
}

.calculator__step.active {
    display: block
}

.calculator__step.visible {
    opacity: 1
}

@media only screen and (max-width:1023px) {
    .calculator__step[data-step='1'] .calculator__row {
        justify-content: space-between
    }

    .calculator__step[data-step='1'] .form-group {
        margin-right: 0!important
    }

    .calculator__step[data-step='1'] .form-group label {
        min-height: 125px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column
    }

    .calculator__step[data-step='1'] .form-group label br {
        display: none
    }
}

.calculator__step[data-step='2'] {
    padding-top: 80px
}

@media only screen and (max-width:1023px) {
    .calculator__step[data-step='2'] {
        padding-top: 30px
    }
}

.calculator__step[data-step='3'],.calculator__step[data-step='4'] {
    padding: 60px 0 0
}

@media only screen and (max-width:1023px) {
    .calculator__step[data-step='3'],.calculator__step[data-step='4'] {
        padding-top: 0
    }
}

.calculator__step[data-step='3'] .calculator__title,.calculator__step[data-step='4'] .calculator__title {
    text-align: center;
    margin-bottom: 30px
}

.calculator__step[data-step='3'] .calculator__subtitle,.calculator__step[data-step='4'] .calculator__subtitle {
    text-align: center;
    margin-top: -30px;
    margin-bottom: 5px
}

.calculator__step[data-step='3'] .form-group,.calculator__step[data-step='4'] .form-group {
    margin-bottom: 15px
}

.calculator__step[data-step='3'] .sand1,.calculator__step[data-step='4'] .sand1 {
    position: absolute;
    top: 42%;
    left: 12%;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1345px) {
    .calculator__step[data-step='3'] .sand1,.calculator__step[data-step='4'] .sand1 {
        left: 9%
    }
}

@media only screen and (max-width:1023px) {
    .calculator__step[data-step='3'] .sand1,.calculator__step[data-step='4'] .sand1 {
        left: -1%
    }
}

@media only screen and (max-width:767px) {
    .calculator__step[data-step='3'] .sand1,.calculator__step[data-step='4'] .sand1 {
        display: none
    }
}

.calculator__step[data-step='3'] .sand2,.calculator__step[data-step='4'] .sand2 {
    position: absolute;
    top: 87%;
    left: -6%;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:767px) {
    .calculator__step[data-step='3'] .sand2,.calculator__step[data-step='4'] .sand2 {
        display: none
    }
}

.calculator__step[data-step='3'] .sand3,.calculator__step[data-step='4'] .sand3 {
    position: absolute;
    top: 20%;
    right: -4%;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:767px) {
    .calculator__step[data-step='3'] .sand3,.calculator__step[data-step='4'] .sand3 {
        display: none
    }
}

.calculator__step[data-step='3'] .sand4,.calculator__step[data-step='4'] .sand4 {
    position: absolute;
    right: 3%;
    bottom: 3%;
    pointer-events: none;
    user-select: none
}

@media only screen and (max-width:1350px) {
    .calculator__step[data-step='3'] .sand4,.calculator__step[data-step='4'] .sand4 {
        bottom: 5%
    }
}

@media only screen and (max-width:1023px) {
    .calculator__step[data-step='3'] .sand4,.calculator__step[data-step='4'] .sand4 {
        display: none
    }
}

.calculator__step[data-step='5'] {
    text-align: center
}

.calculator__step[data-step='5'] .price {
    background: 0 0
}

@media only screen and (max-width:767px) {
    .calculator__step[data-step='5'] .price {
        padding-top: 0
    }
}

.calculator__step[data-step='5'] h2 {
    font-weight: 800
}

.calculator__result {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 90px
}

@media only screen and (max-width:1023px) {
    .calculator__result {
        flex-wrap: wrap;
        margin-bottom: 50px
    }
}

.calculator__result>div {
    margin: 0 10px;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    padding: 50px;
    text-align: left;
    border: 1px solid #edf1f7
}

@media only screen and (max-width:1023px) {
    .calculator__result>div {
        margin: 0 0 20px
    }
}

@media only screen and (max-width:767px) {
    .calculator__result>div {
        width: 100%;
        padding: 20px 0!important;
        text-align: center
    }
}

.calculator__result>div>span {
    color: #f90;
    display: block;
    font-size: 18px
}

@media only screen and (max-width:1023px) {
    .calculator__result>div>span {
        margin-bottom: -20px
    }
}

@media only screen and (max-width:767px) {
    .calculator__result>div>span {
        margin-bottom: -10px
    }
}

.calculator__result>div div {
    font-size: 24px;
    font-weight: 600;
    white-space: nowrap;
    color: #131313
}

.calculator__result>div div i {
    opacity: .25;
    font-weight: 600;
    font-size: 36px;
    font-style: normal
}

@media only screen and (max-width:374px) {
    .calculator__result>div div i {
        font-size: 26px
    }
}

.calculator__result>div div span,.calculator__result>div div strong {
    font-weight: 800;
    font-size: 48px;
    color: #131313
}

@media only screen and (max-width:767px) {
    .calculator__result>div div span,.calculator__result>div div strong {
        font-size: 36px
    }
}

.calculator__callback span {
    color: #141414;
    opacity: .75;
    display: block;
    margin-bottom: 15px
}

.calculator__callback .form-group {
    display: flex;
    padding: 0 20%;
    margin-bottom: 20px
}

@media only screen and (max-width:767px) {
    .calculator__callback .form-group {
        padding: 0
    }
}

.calculator__callback input {
    height: 60px;
    margin: 0;
    width: 100%;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    font-size: 18px;
    color: #131313;
    padding: 5px 30px
}

@media only screen and (max-width:767px) {
    .calculator__callback input {
        height: 50px;
        padding: 5px 20px;
        font-size: 16px
    }
}

.calculator__callback button {
    box-shadow: none;
    margin: 0;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%),#f90;
    border-radius: 0 5px 5px 0;
    font-weight: 700
}

@media only screen and (max-width:767px) {
    .calculator__callback button {
        width: 48px;
        height: 50px;
        color: transparent;
        user-select: none;
        text-shadow: none;
        position: relative
    }

    .calculator__callback button::before {
        content: '';
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: url(../img/icons/check-white.svg) no-repeat;
        background-size: contain;
        width: 22px;
        height: 22px
    }
}

.calculator__callback button:hover {
    box-shadow: 0 2px 0 #b95937,inset 0 0 20px 5px rgba(255,255,255,.15)
}

.calculator__callback button:hover:active {
    box-shadow: none
}

.calculator__callback a {
    font-size: 11px;
    border-bottom: 1px solid;
    transition: all .2s ease-in-out;
    color: #141414;
    opacity: .5
}

.calculator__callback a:hover {
    border-color: transparent
}

.calculator__work {
    margin-bottom: 9px
}

.calculator__progress {
    font-size: 14px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

@media only screen and (max-width:767px) {
    .calculator__progress {
        margin-bottom: 20px
    }
}

.calculator__progress-step {
    position: relative;
    z-index: 2;
    border-radius: 50px;
    padding: 9px 19px;
    font-weight: 600;
    font-size: 11px;
    color: #ababab;
    transition: all .2s ease-in-out;
    background: #edf1f7
}

.calculator__progress-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%),#f90;
    border-radius: 50px;
    height: 100%;
    width: 0;
    transition: all .3s ease-in-out
}

.calculator__progress-step.active {
    box-shadow: 0 10px 15px -10px rgba(255,156,7,.5);
    color: #fff;
    padding: 11px 27px 12px;
    font-size: 14px
}

.calculator__progress-step.active::before {
    width: 100%
}

.calculator__progress-step span {
    position: relative;
    z-index: 2
}

.calculator__progressbar {
    background: #edf1f7;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0
}

.calculator__line {
    background: #f90;
    height: 100%;
    border-radius: 10px
}

.calculator__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 72px
}

@media only screen and (max-width:1345px) {
    .calculator__controls {
        padding-left: 0;
        padding-right: 0
    }
}

@media only screen and (max-width:1023px) {
    .calculator__controls {
        margin-top: 30px;
        margin-left: 30px
    }
}

@media only screen and (max-width:374px) {
    .calculator__controls {
        margin-left: 0
    }
}

.calculator__controls.hide {
    opacity: 0;
    pointer-events: none;
    user-select: none
}

.calculator__prev {
    transition: all .2s ease-in-out;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    color: #f90;
    opacity: 1;
    text-transform: uppercase;
    font-weight: 700
}

.calculator__prev svg {
    width: 12px;
    margin-right: 12px;
    transition: all .2s ease-in-out;
    fill: #f90
}

.calculator__prev:hover {
    box-shadow: none;
    background-size: 16px
}

.calculator__prev.disable {
    color: #131313;
    opacity: .3;
    pointer-events: none
}

.calculator__prev.disable svg {
    fill: #131313
}

.calculator__next {
    display: flex;
    align-items: center;
    user-select: none;
    font-weight: 700;
    padding: 19px 26px
}

.calculator__next img {
    margin-left: 14px
}

.calculator__next.disable {
    opacity: .3;
    pointer-events: none
}

.calculator__block {
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    border: 1px solid #edf1f7;
    padding: 48px 50px;
    margin-bottom: 40px
}

@media only screen and (max-width:1279px) {
    .calculator__block {
        padding: 30px 40px
    }
}

@media only screen and (max-width:767px) {
    .calculator__block {
        padding: 36px 20px
    }
}

.calculator__slider {
    margin-bottom: 48px
}

.calculator__slider:last-child {
    margin-bottom: 40px
}

.calculator__slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px
}

.calculator__slider-value {
    width: 89px;
    height: 45px;
    text-align: center;
    padding: 12px 0;
    color: #141414;
    font-size: 18px;
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border: 1px solid #edf1f7;
    border-radius: 5px;
    transition: all .2s ease-in-out
}

.calculator__slider-value::-webkit-inner-spin-button,.calculator__slider-value::-webkit-outer-spin-button {
    appearance: none;
    margin: 0
}

.calculator__slider-value:focus {
    border-color: #141414
}

.calculator__slider-pips {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.calculator__slider-pips span {
    font-size: 11px;
    color: #333;
    text-align: center;
    display: block;
    margin-top: 12px;
    position: relative;
    width: 0;
    white-space: nowrap
}

@media only screen and (max-width:767px) {
    .calculator__slider-pips span {
        display: none
    }
}

.calculator__slider-pips span::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -12px;
    width: 4px;
    height: 10px;
    background: #edf1f7
}

.calculator__slider-pips span:first-child {
    text-align: left
}

@media only screen and (max-width:767px) {
    .calculator__slider-pips span:first-child {
        display: block
    }
}

.calculator__slider-pips span:first-child::before {
    transform: none;
    left: 0
}

.calculator__slider-pips span:first-child i {
    left: 0;
    transform: none
}

.calculator__slider-pips span:last-child {
    text-align: right
}

@media only screen and (max-width:767px) {
    .calculator__slider-pips span:last-child {
        display: block
    }
}

.calculator__slider-pips span:last-child::before {
    transform: none;
    right: 0;
    left: initial
}

.calculator__slider-pips span:last-child i {
    right: 0;
    left: initial;
    transform: none
}

.calculator__slider-pips span.active::before {
    background: #f90
}

.calculator__slider-pips span i {
    margin: 0;
    padding: 0;
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal
}

.calculator__slider-pips span i::before {
    display: none
}

.calculator .slider {
    position: relative;
    overflow: visible;
    padding: 0;
    margin-bottom: 0
}

.calculator__title {
    font-weight: 600;
    font-size: 24px;
    color: #131313
}

@media only screen and (max-width:767px) {
    .calculator__title {
        font-size: 16px;
        line-height: 1.2;
        margin-right: 20px
    }
}

.calculator__subtitle {
    margin-bottom: 20px
}

.calculator__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px -5px;
    margin-top: 0
}

@media only screen and (max-width:1023px) {
    .calculator__row {
        margin: 0;
        width: 100%
    }
}

@media only screen and (max-width:767px) {
    .calculator__row {
        display: block
    }
}

.calculator__row>.form-group {
    width: calc(33.33% - 10px);
    margin: 0 5px 5px
}

@media only screen and (max-width:1023px) {
    .calculator__row>.form-group {
        margin-right: 25px!important
    }

    .calculator__row>.form-group:last-child {
        margin-right: 0
    }
}

@media only screen and (max-width:767px) {
    .calculator__row>.form-group {
        margin-right: 0!important;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px
    }
}

.calculator__row .calculator__col {
    width: calc(50% - 10px);
    margin: 0 5px 5px
}

@media only screen and (max-width:1023px) {
    .calculator__row .calculator__col {
        display: block;
        width: 100%;
        margin: 0 0 20px
    }
}

@media only screen and (max-width:1023px) {
    .calculator__col {
        background: #fff;
        box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
        border-radius: 5px;
        border: 1px solid #edf1f7;
        padding: 50px
    }
}

@media only screen and (max-width:767px) {
    .calculator__col {
        padding: 30px 20px!important
    }
}

.calculator__col:first-child {
    padding-right: 30px
}

.calculator__col:last-child {
    padding-left: 30px
}

.calculator__top {
    padding-bottom: 20px;
    border-bottom: 1px solid #edf1f7;
    margin-bottom: 30px
}

.calculator__top .calculator__subtitle {
    font-size: 11px;
    color: #141414;
    opacity: .5;
    margin-bottom: 0
}

.calculator__option-title {
    font-weight: 800;
    color: #131313;
    opacity: .5;
    margin-bottom: 13px
}

.calculator__option .form-group {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    width: auto;
    margin-right: 10px
}

.calculator__option .form-group:last-child {
    margin-right: 0
}

.calculator__option input[type=radio]+label {
    padding: 0;
    padding-left: 40px;
    box-shadow: none;
    font-size: 11px;
    color: #f90;
    line-height: 1.5;
    border: 0
}

@media only screen and (max-width:1279px) {
    .calculator__option input[type=radio]+label {
        padding-left: 35px
    }
}

.calculator__option input[type=radio]+label strong {
    font-size: 14px;
    color: #131313;
    font-weight: 600
}

.calculator__option input[type=radio]+label::before {
    left: 0
}

.calculator__option input[type=radio]+label::after {
    left: 4px
}

.odometer {
    position: relative;
    top: -7px
}

.odometer-value {
    font-size: 48px!important;
    font-weight: 800!important;
    text-align: center
}

@media only screen and (max-width:767px) {
    .odometer-value {
        font-size: 36px!important
    }
}

.odometer-inside {
    line-height: 0!important
}

.odometer-digit {
    line-height: 1!important
}

.footer {
    background: linear-gradient(270deg,rgba(255,255,255,.34) 0,rgba(255,255,255,0) 100%);
    border-top: 1px solid #edf1f7;
    padding: 40px 0
}

@media only screen and (max-width:767px) {
    .footer {
        padding: 30px 0
    }
}

.footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media only screen and (max-width:767px) {
    .footer .container {
        display: block
    }
}

.footer .container+.container {
    margin-top: 30px
}

.footer .container+.container a {
    font-size: 11px;
    color: #141414;
    opacity: .5;
    transition: all .2s ease-in-out;
    border-bottom: 1px solid
}

@media only screen and (max-width:767px) {
    .footer .container+.container a {
        font-size: 9px
    }
}

.footer .container+.container a:hover {
    border-color: transparent
}

.footer__copy {
    font-size: 11px;
    color: #141414;
    opacity: .5
}

@media only screen and (max-width:767px) {
    .footer__copy {
        font-size: 9px
    }
}

.footer__col {
    display: flex;
    align-items: center
}

@media only screen and (max-width:1023px) {
    .footer__col {
        display: block
    }
}

@media only screen and (max-width:767px) {
    .footer__col {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px
    }
}

.footer__logo {
    margin-right: 100px
}

@media only screen and (max-width:1023px) {
    .footer__logo {
        margin-right: 0;
        margin-bottom: 20px
    }
}

.footer__phone-num {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: -5px;
    display: block;
    transition: all .2s ease-in-out
}

.footer__phone-num:hover {
    opacity: .7
}

.footer__phone-link {
    color: #f90;
    font-size: 12px;
    border-bottom: 1px solid;
    transition: all .2s ease-in-out
}

.footer__phone-link:hover {
    border-color: transparent
}

.footer__social {
    display: flex;
    align-items: center
}

@media only screen and (max-width:767px) {
    .footer__social {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%
    }
}

.footer__social a {
    padding: 10px 25px;
    background: #fff;
    box-shadow: 0 20px 25px -10px rgba(0,82,255,.04);
    border-radius: 5px;
    margin-left: 20px;
    border: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    transition: all .2s ease-in-out
}

@media only screen and (max-width:1279px) {
    .footer__social a {
        font-size: 16px
    }
}

@media only screen and (max-width:767px) {
    .footer__social a {
        font-size: 9px;
        padding-left: 0;
        padding-right: 0;
        width: 31%;
        text-align: center;
        margin: 0
    }
}

.footer__social a:first-child {
    margin-left: 0
}

.footer__social a:hover {
    box-shadow: none;
    border-color: transparent;
    color: #fff!important;
    fill: #fff!important
}

.footer__social a svg {
    margin-right: 22px
}

@media only screen and (max-width:767px) {
    .footer__social a svg {
        margin-right: 10px
    }
}

.footer__social a.blue {
    color: #2f80ed;
    fill: #2f80ed
}

.footer__social a.blue:hover {
    background: #2f80ed
}

.footer__social a.green {
    color: #27ae60;
    fill: #27ae60
}

.footer__social a.green:hover {
    background: #27ae60
}

.footer__social a.purple {
    color: #7b519d;
    fill: #7b519d
}

.footer__social a.purple:hover {
    background: #7b519d
}

.backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
    opacity: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    transition: all .2s ease-in-out
}

.backdrop.active {
    opacity: 1;
    z-index: 11
}

.modal {
    display: none;
    opacity: 0;
    background: #fff;
    cursor: default;
    position: relative;
    border-radius: 10px
}

.modal.active {
    display: block;
    opacity: 1
}

.modal .callback {
    padding: 0;
    margin: 0 0 50px;
    overflow: visible
}

.modal .callback span {
    margin-bottom: 10px
}

.modal h2 {
    margin-bottom: 10px
}

.modal .subtitle {
    margin-bottom: 40px
}

.modal[data-modal=callback],.modal[data-modal=order] {
    min-width: 760px
}

@media only screen and (max-width:767px) {
    .modal[data-modal=callback],.modal[data-modal=order] {
        min-width: auto;
        width: 95%
    }

    .modal[data-modal=callback] .social,.modal[data-modal=order] .social {
        position: relative;
        margin-top: 60px
    }

    .modal[data-modal=callback] .social div,.modal[data-modal=order] .social div {
        width: 100%;
        margin: 0
    }

    .modal[data-modal=callback] .social a.btn,.modal[data-modal=order] .social a.btn {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        text-align: center
    }

    .modal[data-modal=callback] .social a.btn svg,.modal[data-modal=order] .social a.btn svg {
        margin-right: 5px
    }

    .modal[data-modal=callback] .social a:not(.btn),.modal[data-modal=order] .social a:not(.btn) {
        position: absolute;
        bottom: 70px;
        left: 0;
        width: auto;
        text-align: left;
        padding: 0
    }
}

.modal[data-modal=thanks] {
    text-align: center;
    min-width: 483px
}

@media only screen and (max-width:767px) {
    .modal[data-modal=thanks] {
        min-width: auto;
        width: 95%
    }

    .modal[data-modal=thanks] br {
        display: none
    }

    .modal[data-modal=thanks] strong {
        display: block;
        width: 100%
    }
}

.modal[data-modal=thanks] svg.animate circle,.modal[data-modal=thanks] svg.animate rect {
    stroke-dashoffset: 0;
    opacity: 1
}

.modal[data-modal=thanks] circle {
    transition: all .8s ease-in-out;
    stroke-dasharray: 180.81460571289062;
    stroke-dashoffset: 180.81460571289062
}

.modal[data-modal=thanks] rect {
    opacity: 0;
    transition: all .8s ease-in-out .2s
}

.modal[data-modal=thanks] p {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 20px
}

.modal[data-modal=thanks] p strong {
    font-size: 18px;
    line-height: 1.3;
    display: inline-block;
    margin-bottom: 7px
}

.modal[data-modal=thanks] .btn {
    border-radius: 100px;
    padding: 12px 39px
}

.modal[data-modal=thanks] .modal__body {
    padding: 40px 60px 50px
}

.modal[data-modal=thanks] .modal__body svg {
    margin-bottom: 7px
}

.modal__header {
    padding: 40px 60px 20px;
    border-bottom: 1px solid #efefef
}

.modal__title {
    font-weight: 700;
    font-size: 24px
}

.modal__body {
    padding: 25px 60px 50px
}

@media only screen and (max-width:767px) {
    .modal__body {
        padding: 40px 25px 50px
    }
}

.modal__body form {
    display: flex;
    flex-direction: column
}

.modal__body form button,.modal__body form input {
    width: 100%
}

.modal__body form input:last-child {
    margin-bottom: 0
}

.modal__body form button {
    width: 183px
}

.modal__close {
    position: absolute;
    right: 15px;
    top: 13px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    transition: all .2s ease-in-out
}

.modal__close:hover {
    transform: scale(1.3)
}

.modal__close::after,.modal__close::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #777
}

.modal__close::before {
    transform: translate(-50%,-50%) rotate(45deg)
}

.modal__close::after {
    transform: translate(-50%,-50%) rotate(-45deg)
}