@font-face {
    font-family: HelveticaNeueCyr-Light;
    font-display: swap;
    src: url(../fonts/HelveticaNeueCyr-Light.woff) format("woff"), url(../fonts/HelveticaNeueCyr-Light.woff2) format("woff2");
    font-weight: 300;
    font-style: normal
}
@font-face {
     font-family:"HelveticaNeueCyr-Medium";
     src:url("../fonts/HelveticaNeueCyr-Medium.eot");
     src:url("../fonts/HelveticaNeueCyr-Medium.eot?#iefix") format("embedded-opentype"),
     url("../fonts/HelveticaNeueCyr-Medium.woff") format("woff"),
     url("../fonts/HelveticaNeueCyr-Medium.ttf") format("truetype");
     font-weight:normal;
     font-style:normal;
}
@font-face {
    font-family: HelveticaNeueCyr-Thin;
    font-display: swap;
    src: url(../fonts/HelveticaNeueCyr-Thin.woff) format("woff"), url(../fonts/HelveticaNeueCyr-Thin.woff2) format("woff2");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-Bold.woff) format("woff"), url(../fonts/ProximaNova-Bold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-BoldIt.woff) format("woff"), url(../fonts/ProximaNova-BoldIt.woff2) format("woff2");
    font-weight: 600;
    font-style: italic
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-Extrabld.woff) format("woff"), url(../fonts/ProximaNova-Extrabld.woff2) format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-ExtrabldIt.woff) format("woff"), url(../fonts/ProximaNova-ExtrabldIt.woff2) format("woff2");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-LightIt.woff) format("woff"), url(../fonts/ProximaNova-LightIt.woff2) format("woff2");
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-Light.woff) format("woff"), url(../fonts/ProximaNova-Light.woff2) format("woff2");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-Regular.woff) format("woff"), url(../fonts/ProximaNova-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-RegularIt.woff) format("woff"), url(../fonts/ProximaNova-RegularIt.woff2) format("woff2");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNova-ThinIt.woff) format("woff"), url(../fonts/ProximaNova-ThinIt.woff2) format("woff2");
    font-weight: 100;
    font-style: italic
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url(../fonts/ProximaNovaT-Thin.woff) format("woff"), url(../fonts/ProximaNovaT-Thin.woff2) format("woff2");
    font-weight: 100;
    font-style: normal
}

@font-face{
    font-family:"PTrouble";
    src:url("../fonts/RUBSN.eot");
    src:url("../fonts/RUBSN.eot?#iefix") format("embedded-opentype"),
    url("../fonts/RUBSN.woff") format("woff"),
    url("../fonts/RUBSN.ttf") format("truetype");
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon.eot?a296v4);
    src: url(../fonts/icomoon.eot?a296v4#iefix) format("embedded-opentype"), url(../fonts/icomoon.ttf?a296v4) format("truetype"), url(../fonts/icomoon.woff?a296v4) format("woff"), url(../fonts/icomoon.svg?a296v4#icomoon) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class*=" icon-"], [class^=icon-] {
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-instagram:before {
    content: "\e904"
}

.icon-services-logo5:before {
    content: "\e90c"
}

.icon-services-logo6:before {
    content: "\e907"
}

.icon-services-logo4:before {
    content: "\e908"
}

.icon-services-logo3:before {
    content: "\e909"
}

.icon-services-logo2:before {
    content: "\e90a"
}

.icon-services-logo1:before {
    content: "\e90b"
}

.icon-arrow-vert:before {
    content: "\e905"
}

.icon-arrow:before {
    content: "\e906"
}

.icon-youtube:before {
    content: "\e902"
}

.icon-twitter:before {
    content: "\e903"
}

.icon-facebook:before {
    content: "\e901"
}

.icon-vkontakte:before {
    content: "\e900"
}

.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block
}

.slick-track:after, .slick-track:before {
    display: table;
    content: ''
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.modal-template .modal-dialog {
    max-width: 550px;
}

.modal-template .modal-content {
    padding: 70px 115px 60px;
    border: none;
    border-radius: 0;
}

.modal-template .modal-header,
.modal-template .modal-body {
    border: none;
    padding: 0
}

.modal-template .modal-title {
    text-align: center;
    font-size: 25px;
    line-height: 1;
    margin: 0 0 50px;
    letter-spacing: 0.115em;
    text-transform: uppercase;
    width: 100%;
}

.modal-template .close {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    background-image: url('../img/close-modal.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    opacity: 1;
}

.form-callback .form-control, .form-callback input.form-control {
    font-size: 14px;
    margin: 0 0 20px;
}

.form-callback .submit-btn-wrap {
    padding: 45px 0 0 0;
}

@media (max-width: 576px) {
    .modal-template .modal-content {
        padding: 40px 25px 30px
    }

    .modal-template .modal-dialog {
        max-width: 100%;
    }

    .modal-template .close {
        top: 10px;
        right: 10px;
    }

    .modal-template .modal-title {
        font-size: 18px;
        margin: 0 0 20px;
    }

    .form-callback .form-control, .form-callback input.form-control {
        margin: 0 0 15px;
    }

    .form-callback .submit-btn-wrap {
        padding: 15px 0 0 0;
    }
}

/*
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2013 Daniel Eden
*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce
}

@-webkit-keyframes flash {
    0%, 100%, 50% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 100%, 50% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scaleX(1.25) scaleY(.75);
        transform: scaleX(1.25) scaleY(.75)
    }
    40% {
        -webkit-transform: scaleX(.75) scaleY(1.25);
        transform: scaleX(.75) scaleY(1.25)
    }
    60% {
        -webkit-transform: scaleX(1.15) scaleY(.85);
        transform: scaleX(1.15) scaleY(.85)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    30% {
        -webkit-transform: scaleX(1.25) scaleY(.75);
        -ms-transform: scaleX(1.25) scaleY(.75);
        transform: scaleX(1.25) scaleY(.75)
    }
    40% {
        -webkit-transform: scaleX(.75) scaleY(1.25);
        -ms-transform: scaleX(.75) scaleY(1.25);
        transform: scaleX(.75) scaleY(1.25)
    }
    60% {
        -webkit-transform: scaleX(1.15) scaleY(.85);
        -ms-transform: scaleX(1.15) scaleY(.85);
        transform: scaleX(1.15) scaleY(.85)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        -ms-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        -ms-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        -ms-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        -ms-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        -ms-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        -ms-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

@keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95);
        -ms-transform: scale(.95);
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(.95);
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        -ms-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        -ms-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        -ms-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        -ms-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        -ms-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0);
        -ms-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -ms-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        -webkit-transform: translateX(0) skewX(-15deg);
        transform: translateX(0) skewX(-15deg);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(0) skewX(0);
        transform: translateX(0) skewX(0);
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        -ms-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        -webkit-transform: translateX(0) skewX(-15deg);
        -ms-transform: translateX(0) skewX(-15deg);
        transform: translateX(0) skewX(-15deg);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(0) skewX(0);
        -ms-transform: translateX(0) skewX(0);
        transform: translateX(0) skewX(0);
        opacity: 1
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0) skewX(0);
        transform: translateX(0) skewX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0) skewX(0);
        -ms-transform: translateX(0) skewX(0);
        transform: translateX(0) skewX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        -ms-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-transform: rotate(200deg);
        -ms-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

@-webkit-keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    20%, 60% {
        -webkit-transform: rotate(80deg);
        -ms-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    40% {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        -ms-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(700px);
        -ms-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        -ms-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        -ms-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        -ms-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        -ms-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        -ms-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        -ms-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(48px);
        transform: scale(.475) translateX(48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        -ms-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(48px);
        -ms-transform: scale(.475) translateX(48px);
        transform: scale(.475) translateX(48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(2000px);
        transform: scale(.1) translateX(2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(-48px);
        transform: scale(.475) translateX(-48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(2000px);
        -ms-transform: scale(.1) translateX(2000px);
        transform: scale(.1) translateX(2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(-48px);
        -ms-transform: scale(.475) translateX(-48px);
        transform: scale(.475) translateX(-48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(2000px);
        transform: scale(.1) translateY(2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(-60px);
        transform: scale(.475) translateY(-60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(2000px);
        -ms-transform: scale(.1) translateY(2000px);
        transform: scale(.1) translateY(2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(-60px);
        -ms-transform: scale(.475) translateY(-60px);
        transform: scale(.475) translateY(-60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    100% {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    50% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    100% {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(-60px);
        transform: scale(.475) translateY(-60px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(2000px);
        transform: scale(.1) translateY(2000px);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(-60px);
        -ms-transform: scale(.475) translateY(-60px);
        transform: scale(.475) translateY(-60px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(2000px);
        -ms-transform: scale(.1) translateY(2000px);
        transform: scale(.1) translateY(2000px);
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(42px);
        transform: scale(.475) translateX(42px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(42px);
        -ms-transform: scale(.475) translateX(42px);
        transform: scale(.475) translateX(42px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        -ms-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(-42px);
        transform: scale(.475) translateX(-42px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(2000px);
        transform: scale(.1) translateX(2000px);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(-42px);
        -ms-transform: scale(.475) translateX(-42px);
        transform: scale(.475) translateX(-42px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(2000px);
        -ms-transform: scale(.1) translateX(2000px);
        transform: scale(.1) translateX(2000px);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-transform-origin: center top;
        transform-origin: center top
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        -ms-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        -ms-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-transform-origin: center top;
        -ms-transform-origin: center top;
        transform-origin: center top
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

html {
    overflow-y: scroll;
    overflow-x: hidden
}

body, html {
    height: 100%
}

body {
    font-family: ProximaNova, sans-serif;
    font-size: 14px;
    color: #010101;
    line-height: 1.4;
    background-color: #fff
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

:active, :focus, :visited, a:active, a:focus, a:visited, button:active, button:focus, button:visited {
    outline: 0;
    text-decoration: none;
    outline-offset: inherit
}

::-webkit-input-placeholder {
    color: #a8a8a8;
    opacity: 1
}

::-moz-placeholder {
    color: #a8a8a8;
    opacity: 1
}

:-moz-placeholder {
    color: #a8a8a8;
    opacity: 1
}

:-ms-input-placeholder {
    color: #a8a8a8;
    opacity: 1
}

:focus::-webkit-input-placeholder {
    color: transparent
}

:focus:-moz-placeholder {
    color: transparent
}

:focus::-moz-placeholder {
    color: transparent
}

:-ms-input-placeholder {
    color: transparent
}

html.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}
h1, h2, h3{
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 20px;
}
h1{
    font-size: 25px;
    line-height: 1.2;
}
h2{
    font-size: 18px;
    line-height: 1.2;
}
h3{
    font-size: 16px;
    line-height: 1.2;
}
table{
    width: 100%;
    margin: 0 0 20px;
}
table tr td,
table tr th{
    padding: 10px 15px;
    border: 1px solid #E8E8E8;
}
table tr th{
    font-weight: bold;
    background-color: #e8e8e8;
}

.form-control, input.form-control {
    width: 100%;
    font-family: ProximaNova, sans-serif;
    height: auto;
    padding: 8px 10px;
    border-radius: 0;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #a8a8a8;
    color: #010101
}

.form-control:focus, input.form-control:focus {
    outline: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom-color: #6228b1;
    color: #010101
}

textarea.form-control {
    height: 90px;
    resize: none
}

.wow {
    opacity: 0
}

.home .header {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50
}

.header {
    background-color: #1c1d34
}

.header .container {
    position: relative;
    height: 115px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 30px 0 70px
}

.header__logo-wrap {
    min-width: 160px;
    width: 160px
}

.header__box-info {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

/*.header__box-info .btn-white,*/
.header-feedback-item {
    margin: 0 0 0 90px;
    position: relative;
}

.btn-white {
    display: inline-block;
    vertical-align: top;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 10px 24px 8px;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    text-align: center
}

.btn-white:hover {
    text-decoration: none;
    color: #010101;
    background-color: #fff
}

.btn-black {
    display: inline-block;
    vertical-align: top;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid #010101;
    border-radius: 20px;
    padding: 10px 24px 8px;
    white-space: nowrap;
    color: #010101;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    text-align: center
}
.btn-black--size_lg,
.btn-white--size_lg{
    font-size: 12px;
}
.btn-black:hover {
    text-decoration: none;
    color: #fff;
    background-color: #010101
}

.btn-grad-line {
    display: inline-block;
    vertical-align: top;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-radius: 20px;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    text-align: center;
    position: relative;
    padding: 1px
}

.btn-grad-line:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%)
}

.btn-grad-line span {
    position: relative;
    z-index: 2;
    display: block;
    padding: 10px 24px 8px;
    background-color: #002744;
    border-radius: 20px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.btn-grad-line:hover {
    color: #fff;
    text-decoration: none
}

.btn-grad-line:hover span {
    background-color: transparent
}

.btn-grad-line.grad-bg {
    background-image: url(../img/gradient-bg.svg);
    background-position: 0 0;
    background-repeat: no-repeat
}

.btn-grad-line.grad-bg:hover:after {
    opacity: 1
}

.btn-grad-line.grad-bg:after {
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.btn-grad-line.grad-bg span {
    background-color: transparent
}

.b-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -4px;
    padding: 0 0 10px
}

.b-social__item {
    padding: 0 4px;
    margin: 0 0 5px
}

.b-social__link {
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 1;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #1d1d35;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    position: relative
}

.b-social__link:hover {
    text-decoration: none;
    color: #1d1d35;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
}

.b-social__link:hover:after {
    opacity: 1;
    visibility: visible
}

.b-social__link.icon-facebook {
    font-size: 16px
}

.b-social__link.icon-facebook:before {
    top: 2px
}

.b-social__link:before {
    position: relative;
    z-index: 3
}

.b-social__link:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-radius: 50%;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, left bottom, from(#06cfb5), to(#6e14b1));
    background: -o-linear-gradient(top, #06cfb5 0, #6e14b1 100%);
    background: linear-gradient(180deg, #06cfb5 0, #6e14b1 100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.menu-trigger {
    width: 30px;
    height: 23px;
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
    z-index: 20;
    display: none
}

.menu-trigger-icon {
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #fff;
    position: absolute;
    border-radius: 3px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: background-color .1s linear;
    -o-transition: background-color .1s linear;
    transition: background-color .1s linear
}

.menu-trigger-icon:after, .menu-trigger-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    height: 100%;
    border-radius: 3px;
    -webkit-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    transform: translate(0, -10px);
    -webkit-transition: -webkit-transform .2s linear;
    transition: -webkit-transform .2s linear;
    -o-transition: transform .2s linear;
    transition: transform .2s linear;
    transition: transform .2s linear, -webkit-transform .2s linear
}

.menu-trigger-icon:after {
    -webkit-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    transform: translate(0, 10px)
}

.menu-trigger.active .menu-trigger-icon {
    background-color: transparent
}

.menu-trigger.active .menu-trigger-icon:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.menu-trigger.active .menu-trigger-icon:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.title-section {
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 50px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 400
}

.btn-gradient {
    display: inline-block;
    vertical-align: top;
    padding: 11px 35px 10px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    border: none
}

.btn-gradient:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%);
    -webkit-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s
}

.btn-gradient span {
    position: relative;
    z-index: 3
}

.btn-gradient:hover {
    color: #fff;
    text-decoration: none
}

.btn-gradient:hover:after {
    width: 200%
}

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.nav .menu-trigger {
    position: fixed;
    top: 15px;
    right: 15px;
    -webkit-transform: inherit;
    -ms-transform: inherit;
    transform: inherit
}

.nav .menu-trigger .menu-trigger-icon {
    background-color: transparent
}

.nav .menu-trigger .menu-trigger-icon:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.nav .menu-trigger .menu-trigger-icon:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}
.nav-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.nav-list__item{
    position: relative;
    margin: 0 0 0 80px;
}
.nav__link {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    display: block;
    /*margin: 0 0 0 80px;*/
    font-family: HelveticaNeueCyr-Light, sans-serif
}
.nav__link:after{
    content: "";
    position: absolute;
    bottom: -4px;
    left:-8px;
    right: -8px;
    height: 1px;
    background-color: #07cfb5;
    z-index: 1;
    transition: all ease .5s;
    opacity: 0;
}

.nav__link:hover, .nav__link--selected,
.nav-list__item:hover .nav__link{
    color: #07cfb5;
    text-decoration: none
}
.nav__link:hover:after, .nav__link--selected:after,
.nav-list__item:hover .nav__link:after{
    opacity: 1;
}
.drop-nav{
    position: absolute;
    top: 90%;
    left: -60px;
    z-index: 20;
    padding: 5px 0 0 0;
    opacity: 0;
    visibility: hidden;
}
.nav-list__item:hover .drop-nav{
    transition: all ease .5s;
    opacity: 1;
    visibility: visible;
}
.drop-nav__list{
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 4px 26px -4px rgba(0, 41, 71, 0.2);
    width: 275px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}
.drop-nav__link{
    position: relative;
    display: block;
    font-family: HelveticaNeueCyr-Light;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    color: #010101;
    text-decoration: none;
    padding: 10px 30px 10px 44px;
    transition: all ease .5s;
}
.drop-nav__link:hover,
.drop-nav__item:hover .drop-nav__link{
    background-color: #f2f2f2;
    color: #010101;
    text-decoration: none;
    font-family:"HelveticaNeueCyr-Medium";
}
.drop-nav__link:after,
.drop-nav__link:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    width: 16px;
    height:16px;
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all ease .5s;
    transform: translateY(-50%);
}
.drop-nav__link:before{
    z-index: 2;
    opacity: 0
}
.drop-nav__link:hover:after,
.drop-nav__item:hover .drop-nav__link:after{
    opacity: 0;
}
.drop-nav__link:hover:before,
.drop-nav__item:hover .drop-nav__link:before{
    opacity: 1
}
.drop-nav__link--site:after{
    background-image: url('../img/service_nav/img1.svg');
}
.drop-nav__link--site:before{
    background-image: url('../img/service_nav/img1-hover.svg');
}
.drop-nav__link--inet:after{
    background-image: url('../img/service_nav/img2.svg');
}
.drop-nav__link--inet:before{
    background-image: url('../img/service_nav/img2-hover.svg');
}
.drop-nav__link--social:after{
    background-image: url('../img/service_nav/img3.svg');
}
.drop-nav__link--social:before{
    background-image: url('../img/service_nav/img3-hover.svg');
}
.drop-nav__link--design:after{
    background-image: url('../img/service_nav/img4.svg');
}
.drop-nav__link--design:before{
    background-image: url('../img/service_nav/img4-hover.svg');
}
.drop-nav__link--bitrix:after{
    background-image: url('../img/service_nav/img5.svg');
}
.drop-nav__link--bitrix:before{
    background-image: url('../img/service_nav/img5-hover.svg');
}
.drop-nav__link--support:after{
    background-image: url('../img/service_nav/img6.svg');
}
.drop-nav__link--support:before{
    background-image: url('../img/service_nav/img6-hover.svg');
}
.drop-nav__arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(5px);
    right: 12px;
    z-index: 2;
    width: 9px;
    height: 9px;
    background-image: url('../img/service_nav/arrow-h-nav.svg');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
    transition: all ease .5s;
    opacity: 0;
    display: block;
}
.drop-nav__link:hover .drop-nav__arrow,
.drop-nav__item:hover .drop-nav__arrow{
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}
.list-level-drop{
    position: absolute;
    top: 0;
    left: 100%;
    width: 215px;
    min-height: 100%;
    background-color: #fafafa;
    border-left: 1px solid #E8E8E8;
    margin: 0;
    padding: 5px 0;
    list-style-type: none;
    display: none;
}
.drop-nav__item:hover .list-level-drop{
    display: block;
}
.list-level-drop__link{
    font-family: HelveticaNeueCyr-Light;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    display: block;
    padding: 10px 25px;
    color: #010101;
    text-decoration: none;
    position: relative;
}
.list-level-drop__link:after{
    content: "";
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    width: 54px;
    margin: 0 auto;
    height: 1px;
    background-color: #07CFB5;
    z-index: 1;
    transition: all ease .5s;
    opacity: 0
}
.list-level-drop__link:hover{
    color: #010101;
    text-decoration: none;
}
.list-level-drop__link:hover:after{
    opacity: 1;
}

.about-section {
    position: relative
}

.about-section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/bg-about.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover
}

.about-section .container {
    position: relative;
    z-index: 2;
    padding: 80px 0 40px;
    min-height: 565px
}

.about-section__content {
    padding: 0 35px 0 500px;
    position: relative;
    z-index: 3;
    line-height: 1.2
}

.about-section__content .title-section {
    margin: 0 0 65px;
    text-align: right
}

.about-section__img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2
}

.about-section__btn {
    padding: 50px 0 0 0;
    text-align: right
}

.main-banner {
    overflow: hidden;
    position: relative;
}

.main-banner__content {
    height: 100%
}

.main-banner__slogan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.main-banner__slogan.container {
    padding: 0 30px 0 70px
}

.main-banner__text {
    color: #fff;
    font-weight: 100;
    margin: 0 0 50px
}

.main-banner__slogan-wrap {
    padding: 23% 0 0 0;
    position: relative;
    z-index: 5
}

.main-banner__title {
    font-size: 25px;
    line-height: 1.1;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 8px
}

.main-banner__title span {
    display: block;
    font-size: 40px
}

.main-banner__btn {
    max-width: 208px
}

.main-banner__btn .btn-white {
    display: block;
    margin: 0 0 20px
}

.main-banner__btn .btn-grad-line {
    display: block
}

.main-slider {
    height: 100%
}

.main-slider div {
    height: 100%
}

.main-slider .slide {
    vertical-align: top
}

.main-slider .slide__card {
    position: relative
}

.main-slider .slide__img-mb {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: cover;
    display: none
}

.main-slider .slide__img-mb img {
    opacity: 0;
    margin: 0 auto
}

.main-slider .slide__img {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover
}

.main-slider .slide__img img {
    opacity: 0;
    margin: 0 auto
}

.main-slider .slide__info {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    z-index: 10;
    height: auto;
    padding: 0 30px 0 70px;
    color: #fff;
    font-size: 14px
}

.main-slider .slide__caption {
    color: #fff;
    display: inline-block;
    min-width: 205px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    padding: 0 35px 0 0;
    margin: 0 0 18px
}

.main-slider .slide__caption:hover {
    color: #07cfb5;
    text-decoration: none
}

.main-slider .slide__caption:hover:after {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px)
}

.main-slider .slide__caption:after {
    content: "\e906";
    font-family: icomoon;
    color: #07cfb5;
    position: absolute;
    bottom: 6px;
    right: 0;
    z-index: 3;
    font-size: 8px;
    line-height: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.main-slider .slide__text {
    font-weight: 100
}

.slider-controls-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.slider-controls-wrap:after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 1px;
    bottom: 0;
    background-color: #e8e8e8;
    opacity: .2;
    z-index: 2
}

.slider-controls {
    position: relative;
    z-index: 2;
    padding: 40px 0 24px;
    bottom: 32px;
    left: -31px
}

.slider-controls .slick-arrow {
    position: absolute;
    border: none;
    background-color: transparent;
    padding: 0;
    color: #fff;
    z-index: 10;
    cursor: pointer;
    font-size: 16px;
    line-height: 1
}

.slider-controls .slick-prev {
    top: 0
}

.slider-controls .slick-next {
    bottom: 0;
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg)
}

.slider-controls .slick-dots {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.slider-controls .slick-dots li {
    display: block;
    height: 7px;
    margin: 0 0 16px
}

.slider-controls .slick-dots li.slick-active button:after {
    opacity: 1
}

.slider-controls .slick-dots li button {
    padding: 0;
    border: none;
    text-indent: 100%;
    overflow: hidden;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    border: none;
    background-color: transparent;
    position: relative
}

.slider-controls .slick-dots li button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    z-index: 2;
    border: 1px solid #e8e8e8;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    opacity: 1;
    border-radius: 50%;
    overflow: hidden
}

.slider-controls .slick-dots li button:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
    top: 0;
    left: 0;
    background-image: url(../img/circle-icon-grad.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 7px;
    height: 7px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    opacity: 0
}

.projects-wrap {
    overflow: hidden
}

.projects-wrap .container {
    padding: 0
}

.projects-slider .slide {
    vertical-align: top
}

.projects-slider .slick-list {
    overflow: visible
}

.projects-slider .slick-current .projects-card__btn {
    text-decoration: none;
    color: #fff
}

.projects-slider .slick-current .projects-card__btn:after {
    border-color: transparent transparent transparent #fff
}

.projects-slider .slick-current .projects-card__btn:before {
    opacity: 1
}

.projects-slider .slick-current .projects-card__subtitle, .projects-slider .slick-current .projects-card__title {
    color: #fff
}

.projects-slider .slick-current .projects-card__img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.projects-slider .slick-current .projects-card__img:after {
    opacity: .5
}

.projects-slider .slick-current .projects-card__img:before {
    opacity: 0
}

.projects-card {
    position: relative
}

.projects-card__img {
    position: relative;
    padding: 65% 0 0 0;
    overflow: hidden;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

.projects-card__img:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 240px;
    height: 175px;
    background-image: url(../img/watermark.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    opacity: .2;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.projects-card__img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, .7)));
    background: -o-linear-gradient(top, #fff 0, rgba(255, 255, 255, .7) 100%);
    background: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, .7) 100%)
}

.projects-card__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.projects-card__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px 35px 15px 65px;
    z-index: 5;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.projects-card__subtitle, .projects-card__title {
    line-height: 1.2;
    color: #010101;
    text-transform: uppercase
}

.projects-card__subtitle {
    font-size: 14px;
    font-weight: 300
}

.projects-card__title {
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 6px
}

.projects-card__btn {
    position: relative;
    display: inline-block;
    vertical-align: top;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    color: #6228b1;
    padding: 10px 15px 8px 30px;
    text-decoration: none;
    background-color: #fff;
    font-weight: 300;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.projects-card__btn span {
    position: relative;
    z-index: 5
}

.projects-card__btn:after {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 15px;
    z-index: 3;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #6228b1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.projects-card__btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%);
    z-index: 1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    opacity: 0
}

.projects-card__btn:hover {
    text-decoration: none;
    color: #fff
}

.projects-card__btn:hover:after {
    border-color: transparent transparent transparent #fff
}

.projects-card__btn:hover:before {
    opacity: 1
}

.projects-card:hover .projects-card__btn {
    text-decoration: none;
    color: #fff
}

.projects-card:hover .projects-card__btn:after {
    border-color: transparent transparent transparent #fff
}

.projects-card:hover .projects-card__btn:before {
    opacity: 1
}

.projects-card:hover .projects-card__subtitle, .projects-card:hover .projects-card__title {
    color: #fff
}

.projects-card:hover .projects-card__img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.projects-card:hover .projects-card__img:after {
    opacity: .5
}

.projects-card:hover .projects-card__img:before {
    opacity: 0
}

.services-wrap {
    background-color: #f6f6f6;
    padding: 50px 0 70px
}

.services-row {
    margin: 0 -10px
}

.services-row > div {
    padding: 0 10px
}

.services-card {
    position: relative;
    display: block;
    min-height: 235px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    margin: 0 0 20px
}

.services-card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%);
    border-radius: 25px;
    opacity: 0;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.services-card--one {
    background-color: #d4ccc9
}

.services-card--two {
    background: #cecece;
    background: -webkit-gradient(linear, left top, right top, from(#cecece), to(#e1e1e1));
    background: -o-linear-gradient(left, #cecece 0, #e1e1e1 100%);
    background: linear-gradient(to right, #cecece 0, #e1e1e1 100%)
}

.services-card--three {
    background: #bed0d0;
    background: -webkit-gradient(linear, left top, right top, from(#bed0d0), to(#d0dede));
    background: -o-linear-gradient(left, #bed0d0 0, #d0dede 100%);
    background: linear-gradient(to right, #bed0d0 0, #d0dede 100%)
}

.services-card--thour {
    background: #bcbbc7;
    background: -webkit-gradient(linear, left top, right top, from(#bcbbc7), to(#c5c4cf));
    background: -o-linear-gradient(left, #bcbbc7 0, #c5c4cf 100%);
    background: linear-gradient(to right, #bcbbc7 0, #c5c4cf 100%)
}

.services-card--five {
    background: #c7d7dd;
    background: -webkit-gradient(linear, left top, right top, from(#c7d7dd), to(#d5e4e9));
    background: -o-linear-gradient(left, #c7d7dd 0, #d5e4e9 100%);
    background: linear-gradient(to right, #c7d7dd 0, #d5e4e9 100%)
}

.services-card--six {
    background: #d1cbcb;
    background: -webkit-gradient(linear, left top, right top, from(#d1cbcb), to(#e1dede));
    background: -o-linear-gradient(left, #d1cbcb 0, #e1dede 100%);
    background: linear-gradient(to right, #d1cbcb 0, #e1dede 100%)
}

.services-card__logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 15px 0 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.services-card__content {
    position: absolute;
    z-index: 4;
    padding: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    line-height: 1.2
}

.services-card__title {
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0 0 5px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    letter-spacing: .05em;
    display: block;
    color: #010101;
    text-decoration: none;
    transition: all ease .5s
}

.services-card__title:hover {
    text-decoration: underline;
    color: #fff
}

.services-card__list {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.services-card__list li {
    position: relative;
    padding: 0 0 0 10px
}

.services-card__list li:last-child {
    padding: 0
}

.services-card__list li:last-child:after {
    display: none
}

.services-card__list li:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 5px;
    height: 1px;
    background-color: #010101;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.services-card__list li a {
    color: #010101;
    text-decoration: none;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.services-card__icon {
    color: rgba(255, 255, 255, .3);
    line-height: 1;
    font-size: 160px
}

.services-card__detail-btn {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 5;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #fff;
    color: #fff;
    font-size: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    -webkit-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px);
    opacity: 0;
    cursor: pointer
}

.services-card__detail-btn:hover {
    background-color: #fff;
    text-decoration: none;
    color: #07cfb5
}

.services-card.active, .services-card:hover {
    border-radius: 25px
}

.services-card.active:after, .services-card:hover:after {
    opacity: 1
}

.services-card.active .services-card__title, .services-card:hover .services-card__title {
    color: #fff
}

.services-card.active .services-card__list li:after, .services-card:hover .services-card__list li:after {
    background-color: #fff
}

.services-card.active .services-card__list li a, .services-card:hover .services-card__list li a {
    color: rgba(255, 255, 255, .6)
}

.services-card.active .services-card__list li a:hover, .services-card:hover .services-card__list li a:hover {
    color: #fff;
    text-decoration: underline
}

.services-card.active .services-card__detail-btn, .services-card:hover .services-card__detail-btn {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
}

.facts-wrap {
    background-image: url(../img/facts-bg.jpg);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover
}

.facts-container {
    padding: 80px 0 40px;
    min-height: 470px;
    position: relative
}

.facts-container__title {
    font-size: 30px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    margin: 0 0 10px
}

.facts-container__subtitle {
    margin: 0 0 35px;
    font-size: 14px;
    line-height: 1.2;
    color: #f6f6f6
}

.facts-row {
    max-width: 660px;
    width: 100%
}

.facts-col {
    margin: 0 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.facts-col__logo {
    min-width: 140px;
    width: 140px
}

.facts-col__content {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 8px 0 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.facts-col__item {
    padding: 0 0 0 35px
}

.facts-col__item:first-child {
    width: 170px
}

.facts-col__item:nth-child(2) {
    width: 150px
}

.facts-col__caption {
    font-size: 30px;
    line-height: 1;
    margin: 0 0 4px;
    color: #fff;
    font-weight: 700
}

.facts-col__text {
    font-size: 14px;
    line-height: 1.2;
    color: #fff
}

.facts-robot-img {
    position: absolute;
    bottom: 0;
    right: 100px;
    z-index: 1
}

.partners-wrap {
    background-color: #f8f8f8
}

.partners-container {
    padding: 60px 0 40px;
    /*border-left: 1px solid #e8e8e8;
    border-right: 1px solid transparent*/
}

.partners-box {
    padding: 0 0 0 30px;
    display: none
}

.partners-box__img {
    display: none;
    margin: 0 0 25px
}

.partners-box__img img {
    margin: 0 auto
}

.partners-box__title {
    margin: 0 0 25px;
    font-weight: 600;
    color: #6b19b1;
    text-transform: uppercase
}

.partners-box__item {
    color: #a8a8a8;
    font-size: 14px;
    padding: 25px 0 0 0
}

.partners-box__item:first-child {
    padding: 0
}

.partners-box__item h3 {
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #010101;
    margin: 0 0 5px
}

.partners-box.visib {
    display: block
}

.partners-box.hidden-box {
    display: none !important
}

.partners-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.partners-list li {
    width: 33.3%;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 190px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    cursor: pointer;
    border-right: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8
}

.partners-list li.hidden-box {
    display: none !important
}

.partners-list li:nth-child(3n) {
    border-right: none
}

.partners-list li:nth-child(-n+3) {
    border-top: none
}

.partners-list li.current, .partners-list li:hover {
    background-color: #fefefe
}

.partners-more {
    display: inline-block;
    vertical-align: top;
    padding: 10px 10px 8px;
    text-align: center;
    border-radius: 20px;
    letter-spacing: .1em;
    background: #a8a8a8;
    cursor: pointer;
    color: #fff;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    font-size: 10px;
    line-height: 1;
    max-width: 210px;
    width: 100%;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    text-decoration: none;
    text-transform: uppercase
}

.partners-more:hover {
    background-color: #606060;
    text-decoration: none;
    color: #fff
}

.partners-more.hidden-btn {
    display: none
}

.partners-btn-wrap {
    text-align: center;
    padding: 40px 0 0 0
}

.portfolio {
    padding: 60px 0
}

.photo-filter {
    padding: 0 15px 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.photo-filter__item {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 15px;
    margin: 0 0 10px
}

.photo-filter__item.active .photo-filter__card {
    border-color: transparent
}

.photo-filter__item.active .photo-filter__card:after {
    opacity: 1
}

.photo-filter__card {
    position: relative;
    cursor: pointer;
    display: block;
    border: 1px solid #e6e6e6;
    border-radius: 20px;
    overflow: hidden;
    padding: 1px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.photo-filter__card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    opacity: 0;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%)
}

.photo-filter__name {
    padding: 11px 10px 7px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 20px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    color: #010101;
    letter-spacing: .1em;
    white-space: nowrap;
    font-family: HelveticaNeueCyr-Light, sans-serif
}

.photo-container {
    font-size: 0;
    overflow: hidden
}

.photo-container .mix {
    display: none;
    width: 50%;
    vertical-align: top;
    font-size: 14px
}

.photo-card {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 54% 0 0 0
}

.photo-card:hover .photo-card__detail {
    opacity: 1
}

.photo-card:hover .photo-card__c-item {
    background-color: rgba(225, 225, 225, .5)
}

.photo-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.photo-card__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.photo-card__category {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 30px;
    z-index: 5;
    left: 0;
    right: 0
}

.photo-card__c-item {
    display: inline-block;
    vertical-align: top;
    margin: 0 7px;
    padding: 6px 15px 4px;
    cursor: pointer;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    color: #fff;
    background-color: rgba(0, 0, 0, .7);
    font-family: HelveticaNeueCyr-Light, sans-serif;
    letter-spacing: .1em;
    font-size: 10px;
    line-height: 1;
    position: relative
}

.photo-card__c-item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%)
}

.photo-card__c-item:hover {
    color: #fff;
    text-decoration: none
}

.photo-card__c-item:hover:after {
    opacity: 1
}

.photo-card__c-item span {
    position: relative;
    z-index: 1
}

.photo-card__detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 1;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 20px 70px;
    opacity: 0;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.photo-card__title {
    font-weight: 600;
    color: #fff;
    letter-spacing: .065em;
    text-transform: uppercase;
    margin: 0 0 35px
}

.photo-card__text {
    max-width: 380px;
    margin: 0 auto;
    color: #a8a8a8;
    padding: 0 0 20px
}

.photo-card__btn-wrap .btn-grad-line {
    max-width: 208px;
    min-width: 208px;
    width: 100%
}

.photo-box-all {
    padding: 45px 0 0 0;
    text-align: center
}

.photo-box-all .btn-gradient {
    max-width: 210px;
    width: 100%
}

.photo-box-all .btn-gradient.active {
    opacity: 0;
    visibility: hidden
}

.p-slider-control {
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px 0
}

.p-slider-control__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 0 26px
}

.p-slider-control .slick-arrow {
    border: none;
    position: absolute;
    top: -1px;
    padding: 0;
    background-color: transparent;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    color: #a8a8a8;
    font-size: 8px
}

.p-slider-control .slick-arrow:hover {
    color: #07cfb5
}

.p-slider-control .slick-prev {
    left: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.p-slider-control .slick-next {
    right: 0
}

.p-slider-control .slick-dots {
    font-size: 0;
    margin: 0;
    padding: 0;
    list-style-type: none
}

.p-slider-control .slick-dots li {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px
}

.p-slider-control .slick-dots li.slick-active button:after {
    opacity: 1
}

.p-slider-control .slick-dots li button {
    padding: 0;
    border: 1px solid #a8a8a8;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    background-color: transparent;
    cursor: pointer;
    position: relative
}

.p-slider-control .slick-dots li button:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 7px;
    height: 7px;
    z-index: 2;
    border-radius: 50%;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0
}

.banner-inner {
    background-color: #f5f5f5;
    background-image: url(../img/banner-bg-inner.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover
}

.banner-inner__content {
    max-width: 500px;
    width: 100%;
    padding: 15px 0;
    margin: 0 0 0 70px;
    position: relative;
    z-index: 2
}

.banner-inner__subtitle, .banner-inner__title {
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1
}

.banner-inner__title {
    font-size: 40px;
    color: #6228b1;
    line-height: .7
}

.banner-inner__subtitle {
    font-size: 25px;
    margin: 0 0 40px
}

.banner-inner__text {
    font-weight: 300
}

.banner-inner__img {
    position: absolute;
    bottom: 0;
    right: -30px;
    z-index: 1;
    max-width: 630px
}

.banner-inner .container {
    min-height: 480px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.about-inner {
    padding: 75px 15px 35px
}

.about-inner__container {
    max-width: 720px;
    width: 100%;
    margin: 0 auto
}

.about-inner__title {
    font-size: 29px;
    line-height: 1.2;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 600
}

.stage-wrap {
    padding: 70px 0 40px
}

.stage-wrap .title-section {
    margin: 0 0 70px
}

.stage-wrap__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 500px;
    margin: 0;
    padding: 0;
    list-style-type: none
}

.stage-wrap__list:after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 1px;
    bottom: 0;
    z-index: 1;
    background-color: #07cfb5
}

.stage-wrap__box {
    display: none
}

.stage-wrap__box.visib {
    display: block
}

.item-stage {
    cursor: pointer
}

.item-stage.current .item-stage__stage-number, .item-stage.current .item-stage__title {
    color: #6228b1
}

.item-stage.current .item-stage__text {
    display: block
}

.item-stage.current .item-stage__number {
    font-size: 16px;
    color: #fff
}

.item-stage.current .item-stage__number::after {
    opacity: 1
}

.item-stage__card {
    color: #a8a8a8;
    line-height: 1.2;
    padding: 0 0 25px 25px;
    position: relative;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.item-stage__stage-number {
    text-transform: uppercase;
    margin: 0 0 10px;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.item-stage__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px;
    text-transform: uppercase;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.item-stage__number {
    position: absolute;
    top: -4px;
    left: -10px;
    z-index: 2;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    text-align: center
}

.item-stage__number:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%);
    z-index: 1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    opacity: 0
}

.item-stage__number span {
    position: relative;
    z-index: 3;
    display: inline-block;
    vertical-align: top;
    left: 1px
}

.item-stage__text {
    color: #010101;
    display: none
}

.item-stage__img {
    display: none;
    padding: 25px 0 0 0
}

.portfolio-inner {
    padding: 75px 0;
    background-color: #f2f2f2
}

.photo-in-list__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fff;
    margin: 0 0 25px
}

.photo-in-list__img {
    width: 50%;
    position: relative;
    padding: 35% 0 0 0
}

.photo-in-list__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.photo-in-list__content {
    width: 50%;
    padding: 100px 40px 20px;
    color: #a8a8a8
}

.photo-in-list__title {
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 20px;
    font-size: 18px;
    color: #010101
}

.photo-in-list .no-visible {
    display: none
}

.photo-all-wrap {
    padding: 45px 0 0 0;
    text-align: center
}

.photo-all-wrap .btn-black {
    max-width: 210px;
    width: 100%
}

.stages-development {
    background: -webkit-gradient(linear, left top, right top, from(#6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%)
}

.stages-development .title-section {
    margin: 0 0 70px;
    color: #fff
}

.stages-development__container {
    padding: 80px 0;
    position: relative
}

.stages-development__container:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    bottom: 0;
    z-index: 1;
    background-color: #e9e9e9
}

.stages-development-list {
    margin: 0;
    padding: 45px 0 0 60px;
    list-style-type: none
}

.stages-development-list li {
    cursor: pointer;
    margin: 0 0 35px;
    letter-spacing: .065em;
    text-transform: uppercase;
    font-weight: 600;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    color: #af75e4
}

.stages-development-list li.current {
    color: #fff
}

.stages-development-box {
    background-color: rgba(255, 255, 255, .8);
    padding: 35px 80px 40px;
    -webkit-box-shadow: 0 4px 48px -25px rgba(81, 6, 136, .8);
    box-shadow: 0 4px 48px -25px rgba(81, 6, 136, .8);
    min-height: 450px;
    display: none
}

.stages-development-box.visib {
    display: block
}

.stages-development-box__title {
    font-size: 47px;
    line-height: 1;
    font-weight: 600;
    margin: 0 0 40px;
    text-transform: uppercase;
    color: #af75e4;
    position: relative;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.stages-development-box__btn-mb {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer
}

.stages-development-box__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none
}

.stages-development-box__list li {
    width: 33.3%;
    padding: 0 15px 0 0
}

.stages-development-box__img {
    height: 115px
}

.stages-development-box__img img {
    max-width: 80px
}

.stages-development-box__caption {
    color: #010101;
    margin: 0 0 15px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    text-transform: uppercase
}

.stages-development-box__text {
    font-size: 14px;
    color: #383951;
    line-height: 1.2;
    max-width: 200px
}

.questions-wrap {
    background: -webkit-gradient(linear, left bottom, left top, from(#f8f8f8), to(#f8f8f8)), #f1f1f1;
    background: -o-linear-gradient(bottom, #f8f8f8, #f8f8f8), #f1f1f1;
    background: linear-gradient(0deg, #f8f8f8, #f8f8f8), #f1f1f1;
    padding: 65px 0 40px
}

.questions-list {
    max-width: 870px;
    width: 100%;
    margin: 0 auto
}

.questions-list__item {
    margin: 0 0 10px
}

.questions-list__title {
    cursor: pointer;
    padding: 20px 30px 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    background-color: #fff;
    border-left: 1px solid #e8e8e8
}

.questions-list__content {
    background-color: #fff;
    padding: 2px 30px 15px;
    color: #a8a8a8;
    border-left: 1px solid #e8e8e8;
    position: relative;
    display: none
}

.questions-list__content:after {
    content: "";
    position: absolute;
    top: 0;
    width: 4px;
    left: -4px;
    bottom: 0;
    z-index: 1;
    background-color: #e8e8e8
}

.trust-wrap {
    padding: 70px 0 50px
}

.trust-wrap__caption {
    max-width: 730px;
    width: 100%;
    margin: 0 auto 80px
}

.trust-wrap__title {
    font-size: 29px;
    line-height: 1.2;
    margin: 0 0 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center
}

.trust-wrap__text {
    color: #383951
}

.trust-gallery {
    margin: 0 0 100px
}

.trust-gallery > div {
    padding: 0
}

.trust-gallery .no-visible {
    display: none
}

.g-photo-card {
    display: block;
    position: relative;
    padding: 86% 0 0 0;
    cursor: pointer
}

.g-photo-card:hover .g-photo-card__bg {
    opacity: 1
}

.g-photo-card:after {
    content: "";
    position: absolute;
    top: -40px;
    left: -1px;
    right: 0;
    bottom: -40px;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    z-index: 1
}

.g-photo-card:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -40px;
    right: -40px;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9
}

.g-photo-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px
}

.g-photo-card__bg {
    position: absolute;
    display: block;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    -webkit-box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
    opacity: 0
}

.g-photo-card__bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.trust-btn-wrap {
    text-align: center
}

.trust-btn-wrap .btn-black {
    max-width: 210px;
    width: 100%
}

.contacts-page {
    position: relative;
    z-index: 2
}

.caption-section {
    padding: 40px 30px 40px 70px
}

.caption-section h1 {
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    margin: 0 0 10px;
    color: #fff;
    text-transform: uppercase
}

.caption-section h2 {
    font-size: 25px;
    line-height: 1.2;
    color: #fff;
    letter-spacing: .115em;
    text-transform: uppercase;
    margin: 0
}

.bg-grad-content {
    position: relative
}

.bg-grad-content:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
    -ms-transform: matrix(1, 0, 0, -1, 0, 0);
    transform: matrix(1, 0, 0, -1, 0, 0);
    background: -o-linear-gradient(243.17deg, #06cfb5 1.87%, rgba(0, 0, 0, 0) 49.46%), -o-linear-gradient(top, #6f15b2 0, #1e1f3d 45.83%);
    background: linear-gradient(206.83deg, #06cfb5 1.87%, rgba(0, 0, 0, 0) 49.46%), linear-gradient(180deg, #6f15b2 0, #1e1f3d 45.83%)
}

.contacts-wrap {
    padding: 0 65px 0 0;
    position: relative
}

.contacts-wrap__col {
    width: 100%;
    padding: 0 0 0 65%;
    background: rgba(255, 255, 255, .03);
    position: relative
}

.contacts-wrap__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 25px 30px;
    padding: 30px 0 0 0;
    border-bottom: 1px solid #fff;
    list-style-type: none
}

.contacts-wrap__list li {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
    cursor: pointer;
    padding: 0 10px 20px;
    font-size: 14px;
    line-height: 1.2;
    color: #a8a8a8;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.contacts-wrap__list li:after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 3px;
    left: 50%;
    right: 50%;
    opacity: 0;
    background-color: #fff;
    z-index: 1;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.contacts-wrap__list li.current {
    color: #fff
}

.contacts-wrap__list li.current:after {
    left: 0;
    right: 0;
    opacity: 1
}

.contacts-info {
    padding: 0 0 45px
}

.contacts-info__item {
    padding: 0 0 15px;
    font-size: 14px;
    line-height: 1.2
}

.contacts-info__caption {
    margin: 0 0 5px;
    color: #a8a8a8;
    font-weight: 100
}

.contacts-info__content {
    color: #fff;
    text-transform: uppercase
}

.contacts-info__content a {
    color: #fff;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    text-decoration: none
}

.contacts-info__content a:hover {
    color: #07cfb5;
    text-decoration: none
}

.box-contacts {
    padding: 40px 65px 45px;
    display: none
}

.box-contacts .b-social {
    padding: 0;
    margin: 0 -8px
}

.box-contacts .b-social__link {
    width: 26px;
    height: 26px;
    font-size: 15px
}

.box-contacts .b-social__link.icon-facebook {
    font-size: 19px
}

.box-contacts .b-social__link.icon-facebook:before {
    top: 3px
}

.box-contacts .b-social__item {
    padding: 0 8px
}

.box-contacts.visib {
    display: block
}

.box-contacts__map {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    z-index: 2
}

.box-contacts__map img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.contacts-img-wrap {
    text-align: center
}

.contacts-img-wrap img {
    margin: 0 auto;
    position: relative;
    bottom: -41px;
    z-index: 2
}

.feedback-bg {
    position: relative;
    z-index: 1;
    background-image: url(../img/feedback-bg.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-color: #e8e8e8
}

.feedback-wrap {
    padding: 50px 0;
    max-width: 680px;
    margin: 0 auto
}

.feedback-wrap__title {
    text-align: center;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: .115em;
    text-transform: uppercase;
    margin: 0 0 45px
}

.feedback-wrap__tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -12px;
    padding: 0 0 35px;
    list-style-type: none
}

.feedback-wrap__tabs li {
    width: 33.3%;
    padding: 0 12px 20px
}

.feedback-wrap__tabs li.current .btn-grad-line:after {
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #6e14b1), to(#06cfb5));
    background: -o-linear-gradient(left, #6e14b1 0, #06cfb5 100%);
    background: linear-gradient(90deg, #6e14b1 0, #06cfb5 100%)
}

.feedback-wrap__tabs .btn-grad-line {
    font-size: 10px;
    width: 100%
}

.feedback-wrap__tabs .btn-grad-line:after {
    background: #a8a8a8;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.feedback-wrap__tabs .btn-grad-line span {
    padding: 11px 24px 8px;
    background-color: #e8e8e8;
    color: #010101
}

.feedback-wrap__section {
    display: none
}

.feedback-wrap__section .form-control {
    margin: 0 0 20px
}

.feedback-wrap__section.visib {
    display: block
}

.submit-btn-wrap {
    padding: 25px 0 0 0;
    text-align: center
}

.submit-btn-wrap .btn-gradient {
    max-width: 210px;
    width: 100%;
    padding: 11px 15px 10px
}

.footer {
    padding: 40px 0 55px;
    background-color: #1d1d35;
    background-image: url(../img/bg-footer.svg);
    background-position: 50% 50%;
    background-repeat: repeat;
    overflow: hidden
}

.footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 70px
}

.footer__col-left {
    min-width: 175px;
    width: 175px;
    color: #fff;
    font-size: 12px;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    letter-spacing: .08em
}

.footer__link-logo {
    display: inline-block;
    vertical-align: top;
    margin: 0 0 25px
}

.footer__link-logo img {
    max-width: 160px
}

.footer__adress {
    margin: 0 0 10px
}

.footer__phone-wrap {
    min-height: 65px
}

.footer__phone-item {
    margin: 0 0 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.footer__caption {
    margin: 0 5px 0 0
}

.footer__phone-link {
    color: #fff;
    text-decoration: none;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s
}

.footer__phone-link:hover {
    text-decoration: none;
    color: #07cfb5
}

.footer__col-center {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 10px 0 0 0
}

.footer__col-right {
    min-width: 165px;
    width: 165px;
    padding: 10px 0 0 0
}

.footer__col-right .btn-feedback-mb {
    display: none
}

.footer__col-right .footer__name-col {
    padding: 0 0 0 5px
}

.footer__col-right .footer__info {
    color: #fff;
    font-size: 10px;
    line-height: 1.2;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    letter-spacing: .08em;
    display: none
}

.footer__col-right .footer__adress {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .08em;
    color: #fff;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    margin: 0 0 40px;
    display: none
}

.footer__col-right .footer__phone-mb {
    display: none;
    padding: 0 0 15px;
    text-align: center
}

.footer__col-right .footer__phonemb-item {
    margin: 0 0 5px
}

.footer__col-right .footer__phonemb-item .footer__phone-link {
    font-size: 16px;
    line-height: 1.2;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    letter-spacing: .08em
}

.footer__col-right .b-social {
    padding: 0 0 10px 5px
}

.footer__name-col {
    color: #fff;
    font-size: 12px;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    letter-spacing: .08em;
    margin: 0 0 12px;
    text-transform: uppercase
}

.menu-footer__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.menu-footer__link {
    color: #fff;
    text-decoration: none;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    margin: 0 0 13px
}

.menu-footer__link:hover {
    color: #07cfb5;
    text-decoration: underline
}

.menu-footer__list {
    font-size: 12px;
    line-height: 1.2;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    letter-spacing: .08em;
    color: #fff
}

.menu-footer__caption {
    text-transform: uppercase;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 0 22px 0 0;
    margin: 0 0 15px
}

.menu-footer__caption button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 2;
    border: none;
    cursor: pointer;
    display: none;
    background-color: transparent
}

.menu-footer__caption:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #6128b1 transparent transparent transparent;
    -webkit-transition: all ease .5s;
    -o-transition: all ease .5s;
    transition: all ease .5s;
    display: none
}

.menu-footer__caption.current:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.menu-footer__item:first-child {
    min-width: 215px
}

.menu-footer__item:nth-child(2) {
    min-width: 230px
}

.menu-footer__item:last-child {
    min-width: 185px
}
.nav-list__item:first-child{
    margin: 0;
}

/*** transfer_to_bitrix ***/

.title-section--lg_bold{
    font-size: 25px;
    font-weight: 600;
    letter-spacing: inherit;
}
.transfer-price{
    padding: 70px 0 60px;
    background: linear-gradient(215.47deg, #06CFB5 4.46%, rgba(0, 0, 0, 0) 77.19%), linear-gradient(180deg, #6F15B2 0%, #1E1F3D 100%);
}
.transfer-price .title-section{
    color: #fff;
    margin: 0 0 30px;
}
.title-description{
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0 0 40px;
}
.price-list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.price-list__item{
    width: 33.3%;
    padding: 0 15px;
    display: flex;
}
.price-list__card{
    margin: 0 0 30px;
}
.card-transfer{
    width: 100%;
    background-color: #fff;
    padding: 40px 50px;
}
.card-transfer__img{
    margin: 0 auto 15px;
}
.card-transfer__img img{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.card-transfer__name{
    text-align: center;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.card-transfer__price{
    text-align: center;
    margin: 0 0 35px;
}
.price-col{
    position: relative;
    font-size: 18px;
    line-height: 1;
    color: #6228B1;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0 16px 0 0;
}
.price-col:after{
    content: "ь";
    font-family:"PTrouble";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}
.check-transfer{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.check-transfer__li{
    padding: 0 0 0 30px;
    position: relative;
    font-size: 14px;
    line-height: 1.2;
    color: #1C1D34;
    margin: 0 0 15px;
}
.check-transfer__li:after{
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    z-index: 1;
    width: 19px;
    height: 19px;
    background-image: url('../img/checkmark.svg');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.step-transfer{
    background-color: #f5f5f5;
    padding: 150px 0 125px;
}
.step-transfer--logo{
    padding: 90px 0 65px;
}
.step-transfer-list{
    display: flex;
    align-items: flex-start;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}
.step-transfer-list__item{
    width: 50%;
}
.step-transfer-list__item:first-child{
    padding: 8px 0 0 0;
}
.step-transfer-list__item:last-child{
    padding: 252px 0 0 0;
}
.step-transfer-list__item--center{
    width: 90px;
    flex: 0 0 auto;
    margin: 0 50px;
}
.card-step-transfer{
    position: relative;
    padding: 65px 0 15px;
}
.card-step-transfer__content{
    position: relative;
    z-index: 3;
}
.card-step-transfer__img{
    position: relative;
    padding: 60% 0 0 0;
    overflow: hidden;
    margin: 0 0 25px;
}
.card-step-transfer__img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-step-transfer__name{
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 15px;
}
.card-step-transfer__text{
    font-size: 14px;
    line-height: 1.5;
    color: #1C1D34;
    font-weight: 100;
    min-height: 130px;
}
.card-step-transfer:last-child{
    padding: 65px 0 0 0;
    margin: 0 0 60px;
}
.card-step-transfer:last-child .card-step-transfer__text{
    min-height: inherit;
}
.card-step-transfer__number{
    font-size: 112px;
    line-height: .7;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-weight: 600;
    color: #e8e8e8;
}
.step-transfer-list__arrow{
    margin: 0 auto 39px;
    width: 16px;
    height: 131px;
    display: block;
    background-image: url('../img/line-step.svg');
    background-position: 0 0;
    background-size: cover;
}
.step-transfer-list__number{
    display: block;
    text-align: center;
    font-size: 72px;
    line-height: .7;
    margin: 0 0 39px;
    color: #383951;
    text-transform: uppercase;
    font-weight: 600;
}
.step-transfer__text-info{
    text-align: center;
}
.step-transfer-list__card--mb{ display: none; }
.benefit-transfer{
    background-color: #fff;
}
.benefit-transfer__container{
    padding: 115px 0 70px;
    position: relative;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}
.benefit-transfer__container .title-section{
    margin: 0 0 60px;
    color: #6228B1;
}
.benefit-transfer__content{
    position: relative;
    z-index: 3;
}
.line-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.line-container__item{
    width: 25%;
    border-left: 1px solid #efefef;
}
.line-container__item:last-child{
    border-right: 1px solid #efefef;
}
.benefit-transfer__item{
    margin: 0 0 35px;
    padding: 0 50% 0 0;
}
.benefit-transfer__item:nth-child(even){
    padding: 0 0 0 50%;
}
.card-benefit-transfer{
    position: relative;
    padding: 0 0 0 20px;
    font-size: 14px;
    line-height: 1.2;
    color: #A8A8A8;
}
.card-benefit-transfer:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    bottom: 0;
    z-index: 1;
    background: rgb(110,20,177); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(110,20,177,1) 0%, rgba(6,207,181,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(110,20,177,1) 0%,rgba(6,207,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(110,20,177,1) 0%,rgba(6,207,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e14b1', endColorstr='#06cfb5',GradientType=0 ); /* IE6-9 */
}
.card-benefit-transfer__caption{
    margin: 0 0 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #010101;
}
.card-benefit-transfer__text p{
    margin: 0 0 10px;
}
.card-benefit-transfer__text p:last-child{
    margin: 0;
}
.why-section{
    overflow: hidden;
    background-color: #f5f5f5;
}
.why-section .container{
    position: relative;
}
.why-section__img{
    position: absolute;
    bottom: 0;
    left: -70px;
    z-index: 1;
    max-width: 625px;
    width: 100%;
}
.why-section__img img{
    display: block;
    max-width: 100%;
}
.why-section__content{
    min-height: 520px;
    padding: 90px 0 45px 560px;
    position: relative;
    z-index: 3;
}
.why-section .title-section{
    text-align: left;
}
.why-section__row{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -12px;
    padding: 0 0 35px;
}
.why-section__item{
    width: 50%;
    padding: 0 12px 25px;
}
.card-why-section{
    font-size: 14px;
    line-height: 1.2;
}
.card-why-section__caption{
    display: flex;
    align-items: center;
    margin: 0 0 5px;
}
.card-why-section__img{
    width: 35px;
    flex: 0 0 auto;
    margin: 0 10px 0 0;
}
.card-why-section__img img{
    display: block;
    max-width: 100%;
}
.card-why-section__name{
    font-weight: 600;
    text-transform: uppercase;
}
.bitrix-section-info__content{
    display: flex;
    align-items: flex-end;
    max-width: 665px;
    width: 100%;
    margin: 0 auto;
}
.bitrix-section-info__img{
    width: 185px;
    flex: 0 0 auto;
    margin: 0 100px 0 0;
}
.bitrix-section-info__img img{
    display: block;
    max-width: 100%;
}
.bitrix-section-info__text{
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 0 20px;
}
.bitrix-section-info{
    padding: 50px 0 90px;
    background-image: url('../img/bitrix-bg-img.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
}
.breadcrumb{
    padding: 0;
    margin: 0 0 20px;
    background-color: transparent;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 300;
}
.breadcrumb a{
    color: #010101;
    transition: all ease .5s;
}
.breadcrumb a:hover{
    color: #07cfb5;
}
.breadcrumb li + li:before{
    content: "";
    width: 12px;
    height: 4px;
    display: inline-block;
    vertical-align: middle;
    background-image: url('../img/arrow-breadcrumb.svg');
    background-position:0 0;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 4px;
}
.transfer-banner{
    background: linear-gradient(278.97deg, #E5E3EC 32.5%, #EBF3F2 84.53%);
    padding: 15px 0 0 0;
}
.transfer-banner .container{
    padding: 0 0 0 70px;
}
.card-transfer-banner{
    min-height: 490px;
    position: relative;
    padding: 70px 0 0 0;
    position: relative;
}
.card-transfer-banner__content{
    position: relative;
    z-index: 3;
    max-width: 605px;
}
.card-transfer-banner__content h1{
    font-size: 40px;
    line-height: 1;
    margin: 0 0 15px;
    text-transform: uppercase;
    color: #6228B1;
    margin: 0 0 20px;
    font-weight: 600;
}
.card-transfer-banner__content h2{
    font-size: 25px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #010101;
    margin: 0 0 25px;
    font-weight: 600;
}
.card-transfer-banner__img{
    position: absolute;
    top: 0;
    right: -55px;
    z-index: 1;
    max-width: 635px;
    width: 100%;
}
.card-transfer-banner__img img{
    display: block;
    width: 100%;
}
.engines-list{
    display: flex;
}
.engines-list__column:first-child{
    margin: 0 35px 0 0;
}
.engines-list__item{
    display: block;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 15px;
    position: relative;
    padding: 0 0 0 35px;
    color: #010101;
}
.engines-list__item:after{
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 1;
    width: 26px;
    height: 6px;
    background-image: url('../img/arrow-gradient.svg');
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
}
/*** /transfer_to_bitrix ***/
.price-logo-banner{
    background-image: url('../img/bg-price-info.jpg');
    background-position: 0 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.price-logo-banner__content{
    position: relative;
    min-height: 312px;
    padding: 50px 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
.price-logo-banner__title{
    font-size: 29px;
    line-height: 1.3;
    margin: 0 0 20px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.price-logo-banner__value{
    font-size: 18px;
    line-height: 1;
    color: #fff;
    margin: 0 0 40px;
}
.price-logo-banner__value span{
    font-size: 39px;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.price-logo-banner__content .btn-gradient{
    max-width: 210px;
    width: 100%;
}
.price-logo-banner__img{
    max-width: 440px;
    position: absolute;
    bottom: 0;
    right: -55px;
    z-index: 1;
}
.price-logo-banner__img img{
    display: block;
    max-width: 100%;
}
.our-work{
    background-color: #e5e5e5;
    padding: 65px 0 150px;
}
.our-work__title{
    text-align: center;
    font-size: 25px;
    line-height: 1.2;
    margin: 0 0 60px;
    text-transform: uppercase;
    color: #010101;
    font-weight: 600;
}
.our-work__content{
    display: flex;
    flex-wrap: wrap;
}
.our-work__item{
    width: 25%;
    position: relative;
    overflow: hidden;
    padding: 18% 0 0 0;
    transition: all ease .5s;
}
.our-work__item img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.what-logo{
    padding: 40px 0 70px;
}
.what-logo__title{
    text-align: center;
    margin: 0 0 45px;
    font-size: 25px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 600;
    color: #6228B1;
}
.what-logo__container{
    display: flex;
    align-items: center;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
}
.what-logo__item:not(:last-child){
    margin: 0 0 50px;
}
.what-logo__item{
    position: relative;
    font-size: 14px;
    line-height: 1.2;
    color: #A8A8A8;
    padding: 0 0 0 25px;
}
.what-logo__item:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    bottom: 0;
    z-index: 1;
    background: rgb(110,20,177); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(110,20,177,1) 0%, rgba(6,207,181,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(110,20,177,1) 0%,rgba(6,207,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(110,20,177,1) 0%,rgba(6,207,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e14b1', endColorstr='#06cfb5',GradientType=0 ); /* IE6-9 */
}
.what-logo__caption{
    color: #010101;
    font-weight: 600;
    text-transform: uppercase;
}
.what-logo__text{
    padding: 12px 0 0 0;
}
.what-logo__img{
    width: 41%;
    flex: 0 0 auto;
}
.what-logo__content{
    padding: 0 0 0 70px;
    flex-grow: 1;
}
.logotip-banner{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.logotip-banner .container{
    padding: 0 30px 0 70px;
    min-height: 675px;
}
.logotip-banner .breadcrumb{
    padding: 15px 0 0 0;
    margin: 0 0 90px;
}
.logotip-banner__content{
    max-width: 500px;
}
.logotip-banner__title{
    font-size: 40px;
    line-height: 1.2;
    color: #6228B1;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 25px;
}
.logotip-banner__text{
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #010101;
    margin: 0 0 60px;
}
.logotip-banner__content .btn-grad-line{
    width: 208px;
    color: #010101;
}
.logotip-banner__content .btn-grad-line:hover{
    color: #fff;
}
.wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.wrapper .header,
.wrapper .footer{
    flex: 0 0 auto;
}
.wrapper .main{
    flex: 1 0 auto;
}
.contacts .header{
    background-color: transparent;
    position: relative;
    z-index: 20;
}
.contacts .main, .contacts .footer{
    position: relative;
    z-index: 5;
}
.header-dark .header,
.header-white .header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    z-index: 40;
}
.header-dark .banner-inner,
.header-dark .logotip-banner,
.header-white .logotip-banner{
    padding: 115px 0 0 0;
}
.header-dark .header .nav__link{
    color: #010101;
}
.header-dark .header .nav__link:hover,
.header-dark .nav__link--selected,
.header-dark .nav-list__item:hover .nav__link{
    color: #07cfb5;
}
.header-dark .header .btn-white{
    color: #010101;
    border-color: #010101;
}
.header-dark .header .btn-white:hover{
    background-color: #010101;
    color: #fff;
}
.logo-dark,
.header-dark .logo-white{
    display: none;
}
.header-dark .logo-dark{
    display: block;
}
.header-dark .transfer-banner{
    padding: 130px 0 0 0;
}
.header-dark .menu-trigger-icon,
.header-dark .menu-trigger-icon::after, 
.header-dark .menu-trigger-icon::before{
    background-color: #010101;
}
.logotip-banner--dark .logotip-banner__content{
    max-width: 665px;
}
.logotip-banner--dark .breadcrumb{
    margin: 0 0 110px;
}
.logotip-banner--dark .logotip-banner__title{
    color: #010101;
}
.logotip-banner--wh .breadcrumb{
    margin: 0 0 110px;
}
.logotip-banner--wh .breadcrumb li,
.logotip-banner--wh .breadcrumb a,
.logotip-banner--wh .logotip-banner__title{
    color: #fff;
}
.logotip-banner--wh .breadcrumb li + li::before{
    background-image: url('../img/arrow-breadcrumb-wh.svg');
}
.logotip-banner--wh .logotip-banner__text{
    text-transform: inherit;
    font-weight: 300;
    color: #fff;
}

.step-transfer--wh_bg{
    background-color: #fff;
}
.about-inner--two .about-inner__title{
    font-size: 25px;
    text-align: center;
}
.inet-info{
    background-color: #f4f4f4;
    padding: 60px 15px 0;
}
.inet-info__container{
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
.inet-info__item{
    display: flex;
    align-items: flex-start;
    padding: 0 0 70px;
}
.inet-info__img{
    width: 92px;
    flex: 0 0 auto;
    margin: 0 50px 0 0;
}
.inet-info__content{
    flex-grow: 1;
    color: #383951;
}
.inet-info__name{
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    text-transform: uppercase;
    color: #6228B1;
    letter-spacing: 0.05em;
}
.inet-info__content p{
    margin: 0;
    padding: 15px 0 0 0;
}
.site-help-info{
    background-color: #f4f4f4;
    padding: 60px 0 30px;
}
.site-help-info h2{
    text-align: center;
    margin: 0 0 90px;
    font-weight: bold;
    text-transform: uppercase;
    color: #010101;
    font-size: 25px;
    line-height: 1.2;
}
.site-help-info__items{
    display: flex;
    align-items: flex-start;
    margin: 0 -30px;
    flex-wrap: wrap;
}
.site-help-info__item{
    width: 25%;
    padding: 0 30px;
}
.card-site-help{
    width: 100%;
    margin: 0 0 30px;
}
.card-site-help__img{
    height: 97px;
    display: flex;
    align-items: flex-end;
    margin: 0 0 35px;
}
.card-site-help__img img{
    display: block;
    max-width: 100%;
}
.card-site-help__name{
    font-size: 18px;
    line-height: 1.3;
    font-weight: bold;
    margin: 0 0 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6228B1;
    min-height: 70px;
}
.card-site-help__text{
    color: #383951;
    font-size: 14px;
    line-height: 1.2;
}
.error-page{
    position: relative;
    color: #fff;
}
.error-page:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(206.83deg, #06CFB5 1.87%, rgba(0, 0, 0, 0) 49.46%), linear-gradient(180deg, #6F15B2 0%, #1E1F3D 45.83%);
    mix-blend-mode: normal;
    transform: matrix(1, 0, 0, -1, 0, 0);
}
.error-page__container{
    min-height: 660px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
}
.error-page__img{
    position: absolute;
    top: 80px;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
}
.error-page .btn-grad-line{
    font-size: 12px;
    line-height: 1;
    padding: 0;
    width: 208px;
}
.error-page .btn-grad-line p{
    padding: 10px 10px 8px;
}
.error-page h1{
    font-size: 25px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 15px;
}
.error-page__text{
    font-size: 12px;
    line-height: 1;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 40px;
}
.error-page__container .container,
.page-container .container{
    padding: 0 30px 0 70px;
}
.blog-container{
    padding: 40px 0 55px 0;
}
.blog-container h1{
    font-size: 25px;
    line-height: 1.2;
    font-weight: bold;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.blog-link-group{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.blog-link-group__item{
    margin: 0 15px 15px 0;
    display: inline-block;
    vertical-align: top;
    font-family: HelveticaNeueCyr-Light, sans-serif;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: #010101;
    padding: 11px 20px 9px;
    border:1px solid transparent;
    border-radius: 40px;
}
.blog-link-group__item:hover{
    color: #010101;
    text-decoration: none;
}
.blog-link-group__item--current,
.blog-link-group__item--current:hover{
    color: #07CFB5;
    border-color: #07CFB5;
}
.blog-body{
    display: flex;
    align-items: flex-start;
    padding: 10px 0 0 0;
}
.blog-list{
    flex-grow: 1;
}
.blog-sidebar{
    width: 220px;
    margin: 0 0 0 20px;
    flex: 0 0 auto;
}
.blog-list__item{
    margin: 0 0 15px;
}
.card-blog{
    padding: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}
.card-blog__img{
    width: 280px;
    padding: 32% 0 0 0;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    margin: 0 35px 0 0;
    display: block;
    flex: 0 0 auto;
}
.card-blog__img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-blog__content{
    flex-grow: 1;
    padding: 15px 0;
}
.card-blog__name{
    font-size: 18px;
    line-height: 1.2;
    font-weight: bold;
    text-transform: uppercase;
    color: #010101;
    margin: 0 0 10px;
    display: inline-block;
    transition: all ease .2s;
}
.card-blog__name:hover{
    color: #07CFB5;
    text-decoration: underline;
}
.card-blog__text{
    font-size: 14px;
    line-height: 1.4;
    font-weight: 300;
    margin: 0 0 15px;
}
.card-blog__text p:last-child{
    margin: 0;
}
.card-blog__link{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.card-blog__link-item{
    margin: 0 15px 15px 0;
    color: #07CFB5;
    text-decoration: none;
}
.card-blog__link-item:hover{
    color: #07CFB5;
    text-decoration: underline;
}
.card-blog__date{
    font-weight: 300;
    color: #606060;
}
.header-dark .page-container{
    padding: 115px 0 0 0;
}
.blog-list__item--btn{
    display: flex;
    align-items: center;
    padding: 15px 0;
}
.blog-list__item--btn .line-gray{
    flex-grow: 1;
    display: block;
    height: 1px;
    background-color: rgba(0,0,0,.1);
}
.blog-list__item--btn .btn-grad-line{
    font-size: 12px;
    color: #010101;
    width: 208px;
    flex: 0 0 auto;
    padding: 0;
    line-height: 1;
}
.blog-list__item--btn .btn-grad-line span{
    padding: 10px 10px 8px;
}
.blog-list__item--btn .btn-grad-line:hover{
    color: #fff;
}
.search-def{
    display: flex;
    align-items: flex-start;
    border: 1px solid #606060;
    border-radius: 20px;
    overflow: hidden;
    height: 26px;
}
.search-def__input{
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background-color: transparent;
    font-size: 10px;
    line-height: 1;
    color: #010101;
    font-family: ProximaNova, sans-serif;
    font-weight:300;
    border: none;
}
.search-def__submit{
    width: 24px;
    height: 100%;
    padding: 0;
    border:none;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url('../img/search-black.svg');
    background-color: transparent;
    flex: 0 0 auto;
}
.blog-sidebar .search-def{
    margin: 0 0 30px;
}
.popular-posts__caption{
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 15px;
    font-weight: bold;
}
.popular-posts__item{
    margin: 0 0 5px;
}
.popular-posts__item a{
    font-size: 16px;
    line-height: 1.2;
    color: #07CFB5;
    text-decoration: none;
}
.popular-posts__item a:hover{
    color: #07CFB5;
    text-decoration: underline;
}
.blog-more-wrap{
    background-color: #f4f4f4;
    padding: 35px 0 10px;
}
.blog-more-wrap h2{
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.blog-detail{
    overflow: hidden;
    font-weight: 300;
    padding: 0 0 25px;
}
.blog-detail__img{
    max-width: 450px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    float: right;
    margin: 0 0 15px 15px;
}
.btn-grad-line--arrow{
    padding: 0;
    width: 208px;
    height: 30px;
    font-size: 12px;
    line-height: 1;
    margin: 0 0 15px;
    color: #010101;
}
.btn-grad-line--arrow span{
    padding: 10px 30px 8px;
}
.btn-grad-line--arrow span:after,
.btn-grad-line--arrow span:before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 13px;
    width: 22px;
    height: 8px;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: all ease .5s;
}
.btn-grad-line--arrow span:after{
    z-index: 1;
    background-image: url('../img/arrow-btn.svg');
}
.btn-grad-line--arrow span:before{
    z-index: 2;
    background-image: url('../img/arrow-btn_wh.svg');
    opacity: 0;
}
.btn-grad-line--arrow:hover span:before{
    opacity: 1;
}
.btn-grad-line--gray{
    border: 1px solid #e4e4e4;
    background-image: none !important;
}
.btn-grad-line--gray span{
    padding: 9px 30px;
}
.btn-grad-line--gray:after{
    display: none;
}
.btn-grad-line--gray:hover{
    color: #010101;
    background-color: #e4e4e4
}
.btn-grad-line--gray span:after{
    margin: -1px 0 0 0;
}
.btn-grad-line--gray:hover span:before{
    opacity: 0;
}
.page-content{
    padding: 30px 0 0 0;
}
.page-content .btn-grad-line--arrow span{
    padding: 10px 25px 8px;
}
.politics-items{
    padding: 0 0 50px;
}
.politics-item{
    margin: 0 0 20px;
    font-weight: 300;
    padding: 25px 0 0 30px;
    border-left:1px solid #E8E8E8;
}
.politics-item__title{
    font-weight: normal;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.politics-item__content{
    margin: 0 0 0 -30px;
    padding: 10px 0 1px 30px;
    position: relative;
}
.politics-item__content:after{
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    bottom: 0;
    background-color: #E8E8E8;
    width: 4px;
    z-index: 3;
}
.header__box-info .search-main{
    top: 100%;
    position: absolute;
    left: 0;
    margin: 5px 0 0 0;
    z-index: 10;
}
.search-main{
    width: 28px;
    padding: 0 28px 0 0;
    height: 28px;
    border-radius: 30px;
    background-color: rgba(255,255,255,.3);
    position: relative;
    transition: all ease .5s;
}
.search-main:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:1px solid rgba(232,232,232,.3);
    z-index: 1;
    border-radius: 30px;
    overflow: hidden;
}
.search-main__input{
    height: 28px;
    border: none;
    padding: 0 5px 0 15px;
    background-color: transparent;
    color: #010101;
    font-size: 12px;
    line-height: 1;
    width: 100%;
    position: relative;
    z-index: 3;
}
.search-main.open{
    width: 125px;
}
.search-main__btn{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #E9E9E9;
    background-image: url('../img/search-black.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: none;
}
.header-dark .search-main::after{
    border-color: rgba(96,96,96,.3);
}
.header-dark .search-main__btn{
    background-color: #000;
    background-image: url('../img/search-white.svg');
}
.search-main--lg{
    max-width: 460px;
    width: 100%;
    margin: 0 0 15px;
}
.search-info-result{
    margin: 0 0 20px;
    font-weight: 300;
}
.search-info-result__name{
    font-weight: 400;
    text-transform: uppercase;
}
.search-item{
    padding: 20px 0 0 0;
    margin: 0 0 40px;
    border-left: 1px solid #e8e8e8;
}
.search-item__title{
    margin: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0 0 30px;
}
.search-item__text{
    margin: 0 0 20px;
    font-weight: 300;
}
.search-item__content{
    padding: 0 0 0 30px;
    position: relative;
}
.search-item__content:after{
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    z-index: 2;
    bottom: 0;
    width: 4px;
    background-color: #e8e8e8;
}
.search-item__content .btn-grad-line{
    width: 208px;
    padding: 0;
    background-image: none;
    font-size: 10px;
    background-color: #e8e8e8;
    color: #010101;
}
.search-item__content .btn-grad-line:hover{
    color: #fff;
}
.search-more{
    display: flex;
    padding: 20px 0;
    margin: 0 0 40px;
    align-items: center;
}
.search-more .line-gray {
    flex-grow: 1;
    display: block;
    height: 1px;
    background-color: rgba(0,0,0,.1);
}
.search-more .btn-grad-line {
    font-size: 12px;
    color: #010101;
    width: 208px;
    flex: 0 0 auto;
    padding: 0;
    line-height: 1;
}


@media (min-width: 1240px) {
    .container {
        padding: 0;
        max-width: 1200px
    }
}
@media (min-width: 768px) {
    .our-work__item:hover{
        opacity: .5
    }
}
@media (max-width: 1366px) {
    .about-section:after {
        left: -250px
    }
    .error-page__img{
        top: 40px;
        width: 720px;
    }
}

@media (max-width: 1239px) {
    .caption-section {
        padding: 40px 15px 40px 55px
    }
}

@media (max-width: 1199px) {
    .header .container,
    .error-page__container .container,
    .page-container .container {
        padding: 0 15px
    }

    .header-feedback-item {
        margin: 0 0 0 60px
    }

    .nav-list__item {
        margin: 0 0 0 50px;
    }

    .about-section .container {
        min-height: inherit;
        padding: 40px 0 30px
    }

    .about-section__content .title-section {
        margin: 0 0 50px
    }

    .about-section__btn {
        padding: 20px 0 0 0
    }

    .slider-controls {
        left: -21px
    }

    .services-card__content {
        padding: 20px 60px 20px 20px
    }

    .services-card__icon {
        font-size: 120px
    }

    .services-card__detail-btn {
        width: 40px;
        height: 40px;
        bottom: 20px;
        right: 15px;
        font-size: 9px
    }

    .facts-wrap {
        overflow: hidden
    }

    .facts-robot-img {
        right: -120px;
        max-width: 420px
    }

    .partners-list li {
        height: 150px
    }

    .photo-card {
        padding: 70% 0 0 0
    }

    .banner-inner__content {
        margin: 0;
        max-width: 470px
    }

    .banner-inner__img {
        max-width: 550px
    }

    .banner-inner .container {
        min-height: 430px
    }

    .photo-in-list__content {
        padding: 40px 30px
    }

    .stages-development-list {
        padding: 45px 0 0 40px
    }

    .stages-development-box {
        padding: 35px 30px
    }

    .stages-development-box__caption {
        font-size: 16px
    }

    .caption-section {
        padding: 40px 0
    }

    .contacts-wrap {
        padding: 0 35px 0 0
    }

    .contacts-wrap__col {
        padding: 0 0 0 60%
    }

    .box-contacts__map {
        width: 60%
    }

    .footer .container {
        padding: 0 15px
    }

    .menu-footer__item:first-child {
        min-width: 155px
    }

    .menu-footer__item:nth-child(2) {
        min-width: 210px
    }

    .menu-footer__item:last-child {
        min-width: 165px
    }
    .card-transfer{
        padding: 25px;
        margin: 0 0 20px;
    }
    .card-transfer__price{
        margin: 0 0 15px;
    }
    .price-list{ margin: 0 -10px; }
    .price-list__item{ padding: 0 10px; }
    .title-description{ margin: 0 0 25px; }
    .transfer-price{ padding: 50px 0 30px; }
    .step-transfer{ padding: 80px 0 50px; }
    .step-transfer-list__number{ font-size: 68px; }
    .step-transfer-list__item--center{ margin: 0 20px; }
    .step-transfer-list__item:last-child{ padding: 248px 0 0 0; }
    .card-step-transfer:last-child{ margin: 0 0 40px; }
    .why-section__content{ padding: 70px 0 45px 450px; min-height: inherit; }
    .card-transfer-banner{ padding: 55px 0 35px; min-height: inherit;}
    .card-transfer-banner__img{ max-width: 450px; }
    .card-transfer-banner__content h1{ font-size: 38px; }
    .transfer-banner .container{ padding: 0 15px; }
    .logotip-banner .container{padding: 0 15px; min-height: 525px;}
    .site-help-info__items{margin: 0 -15px;}
    .site-help-info__item{padding: 0 15px;}
    .error-page__img{ width: 500px; top: 0; }
    .error-page{padding: 115px 0 0 0;}
    .error-page__container{min-height: 400px;}
    .card-blog__img{ width: 220px; margin: 0 15px 0 0; padding: 30% 0 0 0; }
    .card-blog__content{padding: 0;}
    .blog-detail__img{ max-width: 350px; }
}

@media (max-width: 991px) {
    .header-feedback-item {
        margin: 0 0 0 30px
    }

    .nav-list__item{
        margin: 0 0 0 20px
    }
    .nav__link::after{
        left: -2px;
        right: -2px;
    }
    .about-section {
        background-color: #f1f1f1;
        overflow: hidden
    }

    .about-section:after {
        left: 0;
        height: 650px;
        top: inherit;
        background-position: 0 50%;
        bottom: -120px
    }

    .about-section .container {
        padding: 50px 0 0 0
    }

    .about-section__content {
        padding: 0;
        font-size: 16px;
        line-height: 1.4
    }

    .about-section__content .title-section {
        text-align: center;
        margin: 0 0 25px
    }

    .about-section__content .title-section br {
        display: none
    }

    .about-section__img {
        position: relative;
        width: 100%
    }

    .about-section__img img {
        margin: 0 auto;
        max-width: 400px
    }

    .about-section__btn {
        text-align: center;
        padding: 40px 0 50px
    }

    .main-banner__slogan.container {
        padding: 0 0 0 30px
    }

    .main-banner__slogan-wrap {
        padding: 20% 0 0 0
    }

    .main-slider .slide__info {
        padding: 0 0 0 30px
    }

    .facts-row {
        max-width: 100%
    }

    .facts-col__content {
        padding: 8px 0 0 0
    }

    .facts-col__item:first-child {
        width: 155px
    }

    .facts-col__item:nth-child(2) {
        width: 140px
    }

    .facts-col__item {
        padding: 0 0 0 20px
    }

    .facts-robot-img {
        right: -300px
    }

    .partners-list li {
        width: 50%
    }

    .partners-list li:nth-child(3n) {
        border-right: 1px solid #e8e8e8
    }

    .partners-list li:nth-child(2n) {
        border-right: none
    }

    .partners-list li:nth-child(-n+3) {
        border-top: 1px solid #e8e8e8
    }

    .partners-list li:nth-child(-n+2) {
        border-top: none
    }

    .photo-filter {
        padding: 0 5px 10px
    }

    .photo-filter__item {
        padding: 0 5px
    }

    .photo-card {
        padding: 80% 0 0 0
    }

    .banner-inner__content {
        max-width: 400px
    }

    .banner-inner__title {
        font-size: 36px
    }

    .banner-inner__subtitle {
        font-size: 22px
    }

    .banner-inner__img {
        max-width: 370px
    }

    .banner-inner .container {
        min-height: 285px
    }

    .about-inner {
        padding: 45px 15px 25px
    }

    .about-inner__container {
        max-width: 690px
    }

    .stage-wrap {
        padding: 40px 0
    }

    .item-stage__card {
        padding: 0 0 15px 25px
    }

    .portfolio-inner {
        padding: 45px 0
    }

    .photo-in-list__item {
        display: block
    }

    .photo-in-list__img {
        width: 100%;
        padding: 60% 0 0 0
    }

    .photo-in-list__img .photo-card__category {
        bottom: 15px
    }

    .photo-in-list__content {
        width: 100%;
        padding: 15px
    }

    .photo-in-list__title {
        margin: 0 0 15px;
        font-size: 16px
    }

    .photo-all-wrap {
        padding: 20px 0 0 0
    }

    .stages-development-box__title {
        font-size: 35px;
        margin: 0 0 25px
    }

    .stages-development-box__list {
        display: block
    }

    .stages-development-box__list li {
        width: 100%;
        padding: 0 0 15px
    }

    .stages-development-box__img {
        height: auto;
        margin: 0 0 15px
    }

    .stages-development-box__text {
        max-width: 100%
    }

    .contacts-wrap__col {
        padding: 0 0 0 50%
    }

    .box-contacts__map {
        width: 50%
    }

    .footer {
        padding: 20px 0 25px
    }

    .footer__col-center {
        display: block;
        padding: 0 15px
    }

    .menu-footer__card {
        display: block
    }

    .menu-footer__link {
        display: inline-block;
        vertical-align: top;
        margin: 0 5px 5px 0
    }

    .menu-footer__item {
        padding: 10px 0 0 0
    }

    .menu-footer__item:first-child {
        padding: 0
    }
    .price-list__item{ width: 100%; }
    .card-step-transfer{ padding: 55px 0 15px; }
    .card-step-transfer:last-child{ padding: 55px 0 0 0; }
    .card-step-transfer__number{ font-size: 92px; }
    .step-transfer-list__item--center{ margin: 0 15px; width: 70px; }
    .step-transfer-list__number{ font-size: 52px; }
    .step-transfer-list__item:last-child{ padding: 176px 0 0 0; }
    .step-transfer-list__item:first-child{ padding: 0; }
    .card-step-transfer__name{ font-size: 14px; margin: 0 0 10px; }
    .card-step-transfer__text{ font-size: 13px; line-height: 1.4;}
    .card-step-transfer__img{ margin: 0 0 15px; }
    .step-transfer-list__arrow{ margin: 0 auto 29px; width: 12px; height: 101px; }
    .step-transfer-list__number{ margin: 0 0 29px; }
    .benefit-transfer__container{padding: 65px 0 30px;}
    .why-section__content{ padding: 40px 0 15px 250px }
    .why-section__img{ left: -90px; max-width: 425px; }
    .why-section__row{ padding: 0 0 10px; }
    .card-transfer-banner{ padding: 35px 0 25px; }
    .card-transfer-banner__content h1{ font-size: 30px; margin: 0 0 10px; }
    .card-transfer-banner__content h2{ font-size: 20px; margin: 0 0 15px; }
    .card-transfer-banner__img{ max-width: 350px; right: -105px; }
    .card-transfer-banner__content{ max-width: 480px; }
    .engines-list__item{ margin: 0 0 10px; }
    .price-logo-banner__img{ max-width: 370px; right: -50px; }
    .price-logo-banner__title{ font-size: 25px; }
    .price-logo-banner__value span{ font-size: 32px; }
    .our-work__item{ width: 33.3%; padding: 25% 0 0 0; }
    .our-work{ padding: 45px 0 50px; }
    .our-work__title, .what-logo__title{ font-size: 22px; margin: 0 0 40px; }
    .what-logo__content{padding: 0 0 0 25px;}
    .what-logo__item:not(:last-child){ margin: 0 0 30px; }
    .what-logo__img{ width: 45%; }
    .logotip-banner .breadcrumb{ margin: 0 0 50px; }
    .logotip-banner__title{ font-size: 32px; }
    .logotip-banner__text{ font-size: 14px; margin: 0 0 40px; }
    .logotip-banner .container{ min-height: 400px; }
    .site-help-info__item{ width: 50%; }
    .error-page__container{min-height: 300px;}
    .error-page__img{ width: 340px; }
    .error-page h1{ font-size: 22px; }
    .blog-container{padding: 20px 0 35px;}
    .blog-sidebar{ display: none; }
    .blog-detail__img{ max-width: 280px; }
}

@media (max-width: 991px) and (max-width: 767px) {
    .menu-footer__item:first-child {
        padding: 0 0 15px
    }
}

@media (max-width: 767px) {
    .header .container {
        height: 105px
    }
    .header-dark .transfer-banner{
        padding: 120px 0 0 0;
    }
    .header-dark .header .nav__link{
        color: #fff;
    }

    .header-feedback-item {
        display: none
    }

    .menu-trigger {
        display: block
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 90;
        background-color: #1c1d34;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        opacity: 0;
        visibility: hidden
    }

    .nav.open {
        opacity: 1;
        visibility: visible;
        -webkit-transition: all ease .3s;
        -o-transition: all ease .3s;
        transition: all ease .3s
    }

    .nav__link {
        margin: 10px 0;
        font-size: 20px;
        line-height: 1
    }

    .nav-list__item{
        margin: 0;
    }
    .nav-list{
        flex-direction: column;
        align-items: center;
    }
    .drop-nav, .nav__link::after{
        display: none;
    }

    .about-section .container {
        padding: 50px 15px 0
    }

    .main-banner__slogan.container {
        padding: 0 15px
    }

    .main-banner__btn .btn-grad-line span {
        background-color: transparent
    }

    .main-slider .slide__img {
        background-position: 50% 100%
    }

    .main-slider .slide__info {
        padding: 0 15px
    }

    .slider-controls-wrap {
        display: none
    }

    .projects-card__content {
        padding: 30px 20px 15px
    }

    .projects-card__subtitle {
        font-size: 13px
    }

    .projects-card__title {
        font-size: 16px
    }

    .services-row {
        margin: 0
    }

    .services-row > div {
        padding: 0
    }

    .services-card {
        margin: 0;
        min-height: 200px
    }

    .services-card:after {
        border-radius: 0
    }

    .services-card__logo {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 30px 15px 0 0
    }

    .services-card__content {
        padding: 20px
    }

    .services-card__list {
        display: none
    }

    .services-card__icon {
        font-size: 90px
    }

    .services-card__detail-btn {
        display: none
    }

    .services-card.active, .services-card:hover {
        border-radius: 0
    }

    .facts-container {
        padding: 70px 0 410px
    }

    .facts-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .facts-col {
        display: block;
        width: 50%;
        margin: 0
    }

    .facts-col__logo {
        margin: 0 0 30px
    }

    .facts-col__content {
        display: block;
        padding: 0
    }

    .facts-col__item:first-child {
        width: 100%;
        min-height: 100px
    }

    .facts-col__item:nth-child(2) {
        width: 100%;
        min-height: 105px
    }

    .facts-col__item {
        padding: 0
    }

    .facts-robot-img {
        right: 0;
        left: 0;
        max-width: 100%;
        bottom: -100px
    }

    .facts-robot-img img {
        margin: 0 auto
    }

    .partners-container {
        padding: 40px 0;
        border: none
    }

    .partners-box {
        padding: 0
    }

    .partners-box__img {
        display: block
    }

    .partners-box__title {
        text-align: center
    }

    .partners-box__item {
        padding: 10px 0 0 0
    }

    .partners-list {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .partners-list li {
        width: auto;
        border: none;
        height: auto;
        padding: 0 10px;
        margin: 0 0 20px;
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%)
    }

    .partners-list li:nth-child(3n) {
        border: none
    }

    .partners-list li.current, .partners-list li:hover {
        background-color: transparent;
        -webkit-filter: grayscale(0);
        filter: grayscale(0)
    }

    .partners-btn-wrap {
        padding: 20px 0 0 0
    }

    .portfolio {
        padding: 40px 0
    }

    .photo-filter {
        display: block
    }

    .photo-filter__name {
        font-size: 14px;
        padding: 13px 10px 9px
    }

    .photo-card__category {
        display: none
    }

    .photo-card__detail {
        display: inline-block;
        bottom: 15px;
        top: inherit;
        width: auto;
        height: auto;
        padding: 15px 35px;
        text-align: left;
        opacity: 1
    }

    .photo-card__title {
        margin: 0
    }

    .photo-card__text {
        display: none
    }

    .photo-card__btn-wrap {
        display: none
    }

    .banner-inner {
        overflow: hidden
    }

    .banner-inner__content {
        max-width: 330px
    }

    .banner-inner__title {
        font-size: 30px
    }

    .banner-inner__subtitle {
        font-size: 18px;
        margin: 0 0 20px
    }

    .banner-inner__img {
        max-width: 260px;
        right: -90px
    }

    .banner-inner .container {
        min-height: 220px
    }

    .about-inner__container {
        max-width: 510px
    }

    .about-inner__title {
        text-align: center;
        font-size: 25px
    }

    .stage-wrap {
        padding: 40px 0 0 0
    }

    .stage-wrap__list {
        height: auto
    }

    .item-stage__stage-number {
        color: #6228b1
    }

    .item-stage__title {
        color: #6228b1
    }

    .item-stage__number {
        font-size: 16px;
        color: #fff
    }

    .item-stage__number:after {
        opacity: 1
    }

    .item-stage__text {
        display: block
    }

    .item-stage__img {
        display: block
    }

    .photo-in-list__img .photo-card__category {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .stages-development .title-section {
        margin: 0 0 40px
    }

    .stages-development__container {
        padding: 40px 0 20px
    }

    .stages-development-box {
        display: block;
        padding: 0;
        min-height: auto;
        margin: 0 0 20px
    }

    .stages-development-box__title {
        margin: 0;
        padding: 20px 30px;
        font-size: 20px
    }

    .stages-development-box__btn-mb {
        display: block
    }

    .stages-development-box__list {
        padding: 0 30px;
        display: none
    }

    .stages-development-box__list li {
        padding: 0 0 25px
    }

    .questions-wrap {
        padding: 50px 0 40px
    }

    .trust-wrap {
        padding: 40px 0;
        overflow: hidden
    }

    .trust-wrap__title {
        text-align: center;
        font-size: 25px
    }

    .trust-gallery {
        margin: 0 0 70px
    }

    .g-photo-card:after {
        top: -15px;
        bottom: -15px
    }

    .g-photo-card:before {
        left: -15px;
        right: -15px
    }

    .contacts-wrap {
        padding: 0
    }

    .contacts-wrap__col {
        padding: 0;
        background: 0 0
    }

    .contacts-info {
        padding: 20px 25px 15px
    }

    .box-contacts {
        padding: 0 0 20px
    }

    .box-contacts .b-social {
        padding: 0 25px
    }

    .box-contacts__map {
        width: 100%;
        position: relative;
        padding: 0
    }

    .contacts-img-wrap {
        display: none
    }

    .feedback-wrap__tabs {
        display: block;
        padding: 0 0 10px
    }

    .feedback-wrap__tabs li {
        width: 100%
    }

    .footer {
        padding: 60px 0 20px
    }

    .footer .container {
        display: block;
        text-align: center
    }

    .footer__col-left {
        min-width: inherit;
        width: 100%
    }

    .footer__col-left .footer__adress, .footer__col-left .footer__info, .footer__col-left .footer__phone-wrap {
        display: none
    }

    .footer__link-logo {
        margin: 0 0 50px
    }

    .footer__link-logo img {
        max-width: 270px
    }

    .footer__col-right {
        min-width: inherit;
        width: 100%
    }

    .footer__col-right .btn-white {
        display: none
    }

    .footer__col-right .btn-feedback-mb {
        display: inline-block;
        font-size: 12px;
        padding: 18px 10px 16px;
        max-width: 270px;
        width: 100%;
        border-radius: 30px;
        margin: 0 0 40px
    }

    .footer__col-right .footer__name-col {
        padding: 0;
        font-size: 16px;
        margin: 0 0 50px
    }

    .footer__col-right .footer__info {
        display: block
    }

    .footer__col-right .footer__adress {
        display: block
    }

    .footer__col-right .footer__phone-mb {
        display: block
    }

    .footer__col-right .b-social {
        padding: 0 0 40px;
        margin: 0 -12px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .footer__col-right .b-social__item {
        margin: 0 12px
    }

    .footer__col-right .b-social__link {
        width: 38px;
        height: 38px;
        font-size: 22px
    }

    .footer__col-right .b-social__link.icon-facebook {
        font-size: 28px
    }

    .footer__col-right .b-social__link.icon-facebook:before {
        top: 5px
    }

    .menu-footer__card {
        display: none
    }

    .menu-footer__link {
        margin: 0 5px 10px
    }

    .menu-footer__list {
        font-size: 12px
    }

    .menu-footer__caption button {
        display: block
    }

    .menu-footer__caption {
        font-size: 16px;
        line-height: 1;
        min-width: 130px;
        text-align: right
    }

    .menu-footer__caption:after {
        top: 3px
    }

    .menu-footer__item {
        padding: 0 0 15px
    }
    .title-section--lg_bold{
        font-size: 22px;
    }
    .step-transfer{ padding: 40px 0 25px; }
    .step-transfer-list__item--center{ display: none; }
    .step-transfer-list__item{ width: 100%; }
    .step-transfer-list__item:last-child{ display: none; }
    .card-step-transfer__text{ min-height: inherit; }
    .card-step-transfer{ padding: 55px 0 25px; }
    .card-step-transfer:last-child{padding: 55px 0 25px; margin: 0;}
    .card-step-transfer__number{ color: #383951; }
    .step-transfer-list__card--mb{ display: block; }
    .card-step-transfer__name{ font-size: 16px; }
    .card-step-transfer__text{ font-size: 14px; }
    .benefit-transfer__container{ padding: 45px 0 25px; }
    .benefit-transfer__container .title-section{ margin: 0 0 35px; }
    .benefit-transfer__item, .benefit-transfer__item:nth-child(2n){ padding: 0; }
    .benefit-transfer__item{ margin: 0 0 25px; }
    .why-section__img{ display: none; }
    .why-section__content{ padding: 40px 0 15px; }
    .why-section .title-section{ margin: 0 0 25px; }
    .bitrix-section-info__content{ display: block; }
    .bitrix-section-info__img{ margin: 0 auto 20px; }
    .bitrix-section-info{ padding: 30px 0 20px; }
    .bitrix-section-info__text{ text-align: center; }
    .card-transfer-banner__img{ max-width: 280px; right: -165px; }
    .card-transfer-banner{ padding: 20px 0 25px; }
    .price-logo-banner__content{ min-height: inherit; padding: 40px 0; max-width: 100%; }
    .price-logo-banner__img{ max-width: 280px; }
    .price-logo-banner__value{ margin: 0 0 25px; font-size: 14px; }
    .price-logo-banner__title{ margin: 0 0 15px; font-size: 19px; }
    .price-logo-banner__value span{ font-size: 25px; }
    .our-work__item{ width: 50%; padding: 35% 0 0 0; }
    .what-logo__container{ display: block; }
    .what-logo__content{ padding: 0; }
    .what-logo__img{ width: 45%; margin: 0 auto 25px; }
    .what-logo{ padding: 40px 0; }
    .logotip-banner .breadcrumb{ margin: 0 0 30px; }
    .logotip-banner__content{ max-width: 100%; }
    .logotip-banner__title{ font-size: 25px; margin: 0 0 15px; }
    .logotip-banner__text{ max-width: 380px; margin: 0 0 30px; }
    .logotip-banner .container{ min-height: 300px; }
    .inet-info{padding: 40px 15px 0;}
    .inet-info__item{padding: 0 0 40px;}
    .inet-info__img{margin: 0 30px 0 0;}
    .site-help-info h2{margin: 0 0 50px;}
    .error-page__container{min-height: inherit; padding: 10px 0 0; display: block;}
    .error-page__img{ width: 100%; position: relative; display: flex; justify-content: flex-end; padding: 0 0 0 15px; }
    .error-page__img img{ max-width: 640px; }
    .card-blog__img{width: 160px;}
    .blog-detail__img{ max-width: 100px; float: none; margin: 0 0 15px; }
    h1{ font-size: 20px; }
    .politics-item{padding: 15px 0 0 15px;}
    .politics-item__title{margin: 0 0 5px;}
    .politics-item__content{margin: 0 0 0 -15px; padding: 5px 0 1px 15px;}
}
@media (max-width: 640px) {
    .error-page__img img{ max-width: 560px; }
}
@media (max-width: 576px) {
    .title-section {
        margin: 0 0 30px
    }
    .header .container{
        height: 65px;
    }
    .header-dark .transfer-banner{
        padding: 80px 0 0 0;
    }
    .header-dark .banner-inner,
    .header-dark .page-container{
        padding: 65px 0 0 0;
    }
    .header-dark .logotip-banner,
    .header-white .logotip-banner{
        padding: 65px 0 30px;
    }

    .about-section:after {
        bottom: -60px;
        height: 400px
    }

    .about-section__img {
        bottom: -35px
    }

    .about-section__img img {
        max-width: 280px
    }

    .main-banner {
        min-height: 460px
    }

    .main-banner__text {
        margin: 0 0 30px
    }

    .main-banner__slogan-wrap {
        padding: 90px 0 0 0
    }

    .main-banner__title span {
        font-size: 35px
    }

    .main-banner__title {
        font-size: 20px
    }

    .main-banner__btn .btn-white {
        margin: 0 0 15px
    }

    .main-slider .slide__info {
        bottom: 20px
    }

    .main-slider .slide__caption {
        margin: 0 0 10px
    }

    .projects-slider .slick-current .projects-card {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    .projects-slider .slick-current .projects-card__btn {
        text-decoration: none;
        color: #fff
    }

    .projects-slider .slick-current .projects-card__btn:after {
        border-color: transparent transparent transparent #fff
    }

    .projects-slider .slick-current .projects-card__btn:before {
        opacity: 1
    }

    .projects-slider .slick-current .projects-card__subtitle, .projects-slider .slick-current .projects-card__title {
        color: #fff
    }

    .projects-slider .slick-current .projects-card__img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0)
    }

    .projects-slider .slick-current .projects-card__img:after {
        opacity: .5
    }

    .projects-slider .slick-current .projects-card__img:before {
        opacity: 0
    }

    .projects-card {
        width: 350px;
        -webkit-transition: all ease .5s;
        -o-transition: all ease .5s;
        transition: all ease .5s;
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    .projects-card__img {
        padding: 75% 0 0 0
    }

    .projects-card__content {
        padding: 30px 35px 15px
    }

    .projects-card__subtitle {
        font-size: 16px
    }

    .projects-card__title {
        font-size: 20px
    }

    .services-wrap {
        padding: 40px 0
    }

    .services-card {
        min-height: 170px
    }

    .services-card__title {
        font-size: 16px;
        margin: 0
    }

    .services-card__icon {
        font-size: 70px
    }

    .facts-container {
        padding: 40px 0 410px
    }

    .facts-container__title {
        font-size: 25px
    }

    .photo-card__detail {
        padding: 10px 15px
    }

    .p-slider-control {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .banner-inner__content {
        max-width: 100%;
        padding: 40px 0 25px
    }

    .banner-inner__title {
        font-size: 35px;
        margin: 0 0 12px;
        line-height: 1
    }

    .banner-inner__subtitle {
        font-size: 22px
    }

    .banner-inner__img {
        position: relative;
        right: inherit;
        max-width: 100%
    }

    .banner-inner__img img {
        margin: 0 auto;
        max-width: 350px
    }

    .banner-inner .container {
        min-height: auto;
        display: block
    }

    .about-inner {
        padding: 35px 15px 20px
    }

    .about-inner__container {
        max-width: 100%
    }

    .stage-wrap {
        padding: 0
    }

    .questions-list__title {
        padding: 15px 15px 13px
    }

    .questions-list__content {
        padding: 2px 15px 5px
    }

    .trust-wrap__caption {
        margin: 0 0 30px
    }

    .trust-gallery {
        margin: 0 0 50px
    }

    .caption-section {
        padding: 40px 0 20px
    }

    .caption-section h1 {
        font-size: 38px
    }

    .caption-section h2 {
        font-size: 18px
    }

    .feedback-wrap {
        padding: 40px 0
    }

    .feedback-wrap__title {
        font-size: 22px;
        margin: 0 0 25px
    }

    .submit-btn-wrap {
        padding: 15px 0 0 0
    }

    .footer__col-right .b-social {
        margin: 0 -5px
    }

    .footer__col-right .b-social__item {
        margin: 0 5px
    }
    .transfer-price{ padding: 30px 0 10px; }
    .transfer-price .title-section{ margin: 0 0 15px; }
    .card-transfer{ padding: 20px 15px 5px; }
    .title-section--lg_bold{ font-size: 20px; }
    .card-step-transfer__number{ font-size: 72px; }
    .card-step-transfer, .card-step-transfer:last-child{ padding: 45px 0 25px; }
    .why-section__content{ padding: 40px 0 0 0; }
    .why-section__row{ padding: 0; }
    .why-section__item{ width: 100%; }
    .why-section .title-section{ text-align: center; }
    .card-transfer-banner{ padding: 5px 0 15px; }
    .card-transfer-banner__content{ max-width: 100%; }
    .card-transfer-banner__img{ display: none; }
    .card-transfer-banner__content h1{ font-size: 25px; }
    .card-transfer-banner__content h2{ font-size: 18px; }
    .engines-list__item{ font-size: 14px; letter-spacing: 0.1em; margin: 0 0 5px; }
    .price-logo-banner__img{ display: none; }
    .price-logo-banner__content{ text-align: center; padding: 30px 0; }
    .our-work{ padding: 35px 0 0 0; }
    .our-work__title, .what-logo__title{ font-size: 20px; margin: 0 0 30px; }
    .what-logo__item{ padding: 0 0 0 20px; }
    .logotip-banner__text{ max-width: 100%; }
    .logotip-banner .container{ min-height: inherit; }
    .logotip-banner{ padding: 0 0 30px; }
    .logotip-banner__title{font-size: 22px;}
    .inet-info__item{ display: block; text-align: center; }
    .inet-info__img{margin: 0 auto 25px;}
    .about-inner--two .about-inner__title{ font-size: 20px; }
    .logotip-banner--dark .btn-black{ background-color: #010101; color: #fff; }
    .logotip-banner--wh .btn-white{ background-color: #fff; color: #010101; }
    .site-help-info__item{ width: 100%; }
    .card-site-help__img{ height: auto; justify-content: center; margin: 0 auto 25px; }
    .card-site-help__name{ text-align: center; min-height: inherit; font-size: 16px; }
    .site-help-info{padding: 40px 0 10px;}
    .site-help-info h2{ font-size: 20px; margin: 0 0 40px; }
    .card-site-help__name br{ display: none; }
    .error-page{padding: 65px 0 0 0;}
    .error-page__container{padding: 20px 0 0 0; text-align: center;}
    .error-page__text{margin: 0 0 30px; line-height: 1.2;}
    .error-page__text br{ display: none; }
    .error-page__img img{max-width: 100%;}
    .error-page h1{ font-size: 20px; }
    .blog-container{padding:0 0 10px;}
    .blog-list__item--btn .line-gray{ display: none; }
    .blog-list__item--btn{justify-content: center;}
    .search-item__content, .search-item__title{ padding: 0 0 0 15px; }
    .search-item{padding: 15px 0 0 0;}
    .search-item__title{margin: 0 0 10px;}
    .search-main--lg{ max-width: 100%; }
    .search-item{margin: 0 0 25px;}
    .search-more{margin: 0 0 10px; justify-content: center;}
    .search-more .line-gray{ display: none; }
}
@media (max-width: 460px) {
    .card-blog{ display: block; }
    .card-blog__img{ width: 100%; padding: 50% 0 0 0; margin: 0 0 15px; }
}
@media (max-width: 410px) {
    .main-banner {
        min-height: 800px
    }

    .main-slider .slide__img-mb {
        display: block
    }

    .main-slider .slide__img {
        display: none
    }

    .main-slider .slide__info {
        bottom: 60px
    }

    .services-card__content {
        padding: 20px 15px
    }

    .services-card__title {
        font-size: 14px
    }

    .facts-container {
        padding: 40px 0 330px
    }

    .photo-card__title {
        font-size: 12px
    }
    .engines-list__column:first-child{
        margin: 0 15px 0 0;
    }
    .card-transfer-banner__content h1{ font-size: 22px; }
    .card-transfer-banner__content h2{ font-size: 16px; }
    .engines-list__item{ font-size: 12px; }
    .blog-link-group{ display: block; }
    .blog-link-group__item{ display: block; width: 100%; margin: 0 0 15px; text-align: center; }
}

@media (max-width: 370px) {
    .main-banner__title span {
        font-size: 32px
    }

    .main-banner__title {
        font-size: 18px
    }

    .projects-card {
        width: 280px
    }

    .projects-card__content {
        padding: 20px 20px 15px
    }

    .projects-card__subtitle {
        font-size: 14px
    }

    .projects-card__title {
        font-size: 18px
    }

    .services-card {
        min-height: 140px
    }

    .services-card__logo {
        padding: 20px 15px 0 0
    }

    .services-card__content {
        padding: 15px
    }

    .services-card__title {
        font-size: 13px
    }

    .services-card__icon {
        font-size: 60px
    }

    .facts-container {
        padding: 40px 0 300px
    }

    .facts-robot-img {
        bottom: -80px
    }

    .photo-container .mix {
        width: 100%
    }

    .photo-card {
        padding: 55% 0 0 0
    }

    .photo-card__detail {
        bottom: 10px
    }

    .banner-inner__img img {
        max-width: 280px
    }
    .what-logo__img{
        width: 100%;
    }
    .about-inner--two .about-inner__title{ font-size: 18px; }
}

@media (max-width: 320px) {
    .facts-container {
        padding: 40px 0 270px
    }

    .facts-robot-img {
        bottom: -60px
    }
}

.webp .about-section:after {
    background-image: url(../img/bg-about.webp)
}

.webp .projects-card__img:after {
    background-image: url(../img/watermark.webp)
}

.webp .facts-wrap {
    background-image: url(../img/facts-bg.webp)
}

.webp .banner-inner {
    background-image: url(../img/banner-bg-inner.webp)
}

.error{
    color: #8a2be2;
}