body,
html {
    background: #fff;
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    overflow-x: hidden
}

img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: auto
}

.uk-container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1170px
}

[class*=uk-child-width]>*,
[class*=uk-width] {
    padding-left: 15px;
    padding-right: 15px
}

.uk-margin {
    margin-bottom: 30px
}

*+.uk-margin {
    margin-top: 30px !important
}

.uk-margin-top {
    margin-top: 30px !important
}

.uk-margin-bottom {
    margin-bottom: 30px !important
}

.uk-margin-left {
    margin-left: 30px !important
}

.uk-margin-right {
    margin-right: 30px !important
}

.uk-margin-small {
    margin-bottom: 15px
}

*+.uk-margin-small {
    margin-top: 15px !important
}

.uk-margin-small-top {
    margin-top: 15px !important
}

.uk-margin-small-bottom {
    margin-bottom: 15px !important
}

.uk-margin-small-left {
    margin-left: 15px !important
}

.uk-margin-small-right {
    margin-right: 15px !important
}

.uk-margin-medium {
    margin-bottom: 45px
}

*+.uk-margin-medium {
    margin-top: 45px !important
}

.uk-margin-medium-top {
    margin-top: 45px !important
}

.uk-margin-medium-bottom {
    margin-bottom: 45px !important
}

.uk-margin-medium-left {
    margin-left: 45px !important
}

.uk-button {
    text-transform: inherit;
    font-size: 1.125rem;
    border: none;
    border-radius: 4px;
    line-height: 1.3;
    font-weight: 600;
    padding: 12px 45px
}

.uk-button-primary {
    background: #e73439 !important;
    color: #fff !important
}

.uk-button-default {
    background: #1f2d47;
    color: #fff !important
}

.uk-button-default:hover {
    background: #1f2d47
}

.uk-margin-medium-right {
    margin-right: 45px !important
}

.uk-margin-large {
    margin-bottom: 60px
}

*+.uk-margin-large {
    margin-top: 60px !important
}

.uk-margin-large-top {
    margin-top: 60px !important
}

.uk-margin-large-bottom {
    margin-bottom: 60px !important
}

.uk-margin-large-left {
    margin-left: 60px !important
}

.uk-margin-large-right {
    margin-right: 60px !important
}

.uk-row {
    margin-left: -15px;
    margin-right: -15px
}

.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
address,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
pre,
ul {
    margin: 0 0 30px 0
}

h2 {
    color: #33425e !important
}

.uk-padding {
    padding: 30px
}

.tell-you {
    display: table;
    margin-left: auto;
    margin-right: auto
}

.tell-you li {
    color: #e73439;
    text-align: left
}

.tell-you li span {
    color: #33425e
}

@media (min-width:1200px) {
    .uk-padding {
        padding: 15px
    }
}

.uk-padding-small {
    padding: 10px
}

.uk-padding-large {
    padding: 30px
}

.uk-h1,
h1 {
    font-size: 3rem;
    font-weight: 600
}

.uk-h2,
h2 {
    font-size: 2.125rem;
    font-weight: 600
}

.uk-h3,
h3 {
    font-size: 1.875rem;
    font-weight: 600
}

.uk-text-white {
    color: #fff
}

.uk-text-lead {
    font-size: 1.5rem;
    color: inherit
}

.uk-text-muted {
    color: #919aaa !important
}

.uk-text-primary {
    color: #e73439 !important
}

.uk-text-main {
    font-size: 1.5rem;
    line-height: 32px
}

.uk-text-large {
    font-size: 1.125rem
}

.uk-text-small {
    font-size: 1rem
}

.uk-text-color {
    color: #33425e
}

.uk-light {
    color: #fff !important
}

.uk-input {
    height: 48px;
    padding: 0 13px;
    border-radius: 4px;
    max-width: 605px;
    font-size: 1rem
}

.uk-text-gray {
    color: #d2d2d2 !important
}

.uk-text-ligth {
    font-weight: 400
}

.uk-text-bolder {
    font-weight: 600
}

.uk-overlay-primary {
    background: linear-gradient(90deg, rgba(32, 29, 49, .5) .02%, rgba(32, 29, 49, .2) 99.98%)
}

.uk-light .uk-text-lead {
    color: #fff
}

input[type=submit] {
    border-radius: 0 4px 4px 0
}

input[type=email] {
    border-radius: 4px 0 0 4px
}

.uk-light .uk-lead,
.uk-light .uk-lead .uk-input {
    color: #000 !important
}

.uk-input,
.uk-light .uk-input {
    border: none;
    background-color: #b4b7bd !important
}

header {
    padding: 50px 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2
}

#banner {
    padding: 170px 0 140px;
    background: url(../img/banner.jpg) no-repeat center/cover;
    position: relative;
    border-bottom: 5px solid #e73439;
    z-index: 1
}

#banner::before {
    content: '';
    position: absolute;
    bottom: -65px;
    left: 50%;
    width: 130px;
    height: 60px;
    background: url(../img/ellipseBanner.png) center no-repeat;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.banner__subtitle {
    padding-left: 20px;
    border-left: 5px solid #e73439
}

.banener__clock--info {
    text-align: left
}

header::after {
    content: '';
    display: block;
    width: 800px;
    height: 620px;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../img/arrows.png) no-repeat 100% -80px, url(../img/arrows.png) no-repeat calc(60% + 100px) 100%;
    pointer-events: none
}

.why {
    position: relative
}

.why:before {
    content: '';
    width: 857px;
    height: 748px;
    display: block;
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(-350px, -95px);
    background: url(../img/ellipse-left-why.png) no-repeat center/contain;
    pointer-events: none
}

.why:after {
    content: '';
    width: 425px;
    height: 425px;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(350px, -40px);
    background: url(../img/ellipse-rigth-why.png) no-repeat center/contain;
    pointer-events: none
}

.why__line {
    background-color: #919aaa;
    height: 2px;
    width: 100%
}

.success {
    position: relative
}

.success:before {
    content: '';
    width: 417px;
    height: 412px;
    display: block;
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(-540px, 60px);
    background: url(../img/ellipse-left-success.png) no-repeat center/contain;
    pointer-events: none
}

.success:after {
    content: '';
    width: 796px;
    height: 766px;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(430px, -130px);
    background: url(../img/ellipse-rigth-success.png) no-repeat center/contain;
    pointer-events: none
}

.steps {
    position: relative;
    background: #1f2d47;
    padding-bottom: 60px;
    z-index: 4
}

.steps::after {
    content: '';
    display: block;
    width: 800px;
    height: 620px;
    position: absolute;
    top: 250px;
    right: 160px;
    background: url(../img/arrows.png) no-repeat 100% 0, url(../img/arrows.png) no-repeat calc(60% + 100px) 100%;
    pointer-events: none
}

.step {
    position: relative;
    margin-bottom: 200px;
    z-index: 2
}

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

.step:before {
    content: '';
    position: absolute;
    width: 235px;
    height: 205px;
    left: -7px;
    top: -125px;
    z-index: -1
}

.step__title {
    font-size: 2.88rem;
    line-height: 1;
    font-weight: 600
}

.step__item {
    position: relative;
    padding-left: 15px
}

.step__item::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #e73439;
    border-radius: 50%;
    left: -15px;
    top: 10px
}

.step-1:before {
    background: url(../img/step-1.png) no-repeat
}

.step-2:before {
    background: url(../img/step-2.png) no-repeat
}

.step-3:before {
    background: url(../img/step-3.png) no-repeat
}

.hints {
    padding-bottom: 145px;
    z-index: 2
}

.hints:before {
    content: '';
    position: absolute;
    width: 627px;
    height: 627px;
    left: -280px;
    top: -360px;
    background: url(../img/ellipse-left-hints.png);
    z-index: -1
}

.hints:after {
    content: '';
    position: absolute;
    width: 854px;
    height: 930px;
    right: -130px;
    top: -160px;
    background: url(../img/ellipse-right-hints.png);
    z-index: -2
}

.hints__wrapper {
    max-width: 715px;
    text-align: center
}

.hints__wrapper:after {
    content: '';
    position: absolute;
    width: 753px;
    height: 645px;
    right: -750px;
    bottom: -145px;
    background: url(../img/family.png) no-repeat center bottom/contain;
    z-index: -1
}

.active {
    position: relative;
    background-color: #e73439;
    padding: 100px 0
}

.active:before {
    content: '';
    position: absolute;
    left: 80px;
    top: 20px;
    width: 382px;
    height: 315px;
    background: url(../img/arrows.png) center no-repeat;
    pointer-events: none
}

.active:after {
    content: '';
    position: absolute;
    right: 80px;
    top: 20px;
    width: 382px;
    height: 315px;
    background: url(../img/arrows.png) center no-repeat;
    pointer-events: none
}

footer {
    background: #1f1f1f;
    color: #fff;
    padding: 40px 0 60px
}

.footer-menu {
    text-align: right
}

.footer-menu a {
    margin: 0 20px
}

footer a,
footer a:hover {
    color: #fff;
    text-decoration: underline
}

footer {
    background: #1f2d47;
    border-top: #e73439 12px solid
}

@media all and (min-width:1200px) {
    .uk-width-5-12 {
        width: calc(100% * 5 / 12.001)
    }

    .uk-width-7-12 {
        width: calc(100% * 7 / 12.001)
    }
}

@media all and (max-width:1199px) {

    body,
    html {
        font-size: 14px
    }

    .hints:after {
        width: 500px;
        top: -230px
    }

    .hints__wrapper:after {
        background: unset
    }
}

@media all and (max-width:959px) {
    header {
        padding: 20px 0
    }

    #banner,
    footer {
        padding-left: 15px;
        padding-right: 15px
    }

    .row-mobile {
        margin-left: -15px;
        margin-right: -15px
    }

    .steps::after {
        content: unset
    }

    .steps__blocks {
        margin-top: 160px
    }

    .uk-accordion-title {
        padding: 10px 15px 10px 56px
    }

    .footer-menu {
        text-align: center;
        margin-top: 60px
    }

    .footer-menu a {
        margin: 0 7px
    }

    .active:before {
        background: unset
    }
}

@media all and (max-width:639px) {
    .main-form {
        flex-direction: column
    }

    input[type=submit] {
        border-radius: 4px;
        margin-top: 15px
    }

    input[type=email] {
        border-radius: 4px
    }

    #banner {
        padding-top: 120px;
        padding-bottom: 120px;
        background: url(../img/banner-mobail.jpg) no-repeat center/cover;
        background-position-x: 60%
    }

    #banner:after {
        position: absolute;
        content: '';
        background-color: rgba(0, 0, 0, .7);
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1
    }
    .banner__subtitle {
        font-size: 1.3rem;
    }
    .banner__clock--img {
        max-width: 44px;
    }
    .banener__clock--info {
        font-size: 1.3rem;
    }
    .uk-h1,
    h1 {
        font-size: 2.1428rem
    }

    #banner a.uk-button {
        margin: 30px 0
    }

    .uk-text-lead {
        font-size: 1.2857rem
    }

    .uk-h2,
    h2 {
        font-size: 1.7142rem
    }

    .hints::before,
    .hints:after {
        background: unset
    }

    .footer-menu a {
        font-size: 1rem;
        display: table !important;
        margin: 10px auto
    }

    .footer-menu hr {
        display: none !important
    }
}