#ServicesSection {

    --font-family: HelveticaNeueCyr;

    margin-top: 130px;

    @media (max-width: 1239px) {
        margin-top: 50px;
    }

    .Section {
        position: relative;

        overflow: hidden;

        background-color: #101010;

        min-height: 740px;
    }

    .SectionViewport {
        display: flex;
        flex-direction: column;
    }

    .MottoContainer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        margin-left: 40px;
        margin-right: 40px;

        @media (max-width: 1239px) {
            margin-left: unset;
            margin-right: unset;

            flex-direction: column;
        }
    }

    .MottoContainer .Motto {
        color: #fff;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 36px;
        font-style: normal;
        font-weight: 550;
        line-height: normal;

        @media (max-width: 1239px) {
            text-align: center;

            color: #fff;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: 25px;
            font-style: normal;
            font-weight: 550;
            line-height: normal;
        }
    }

    .MottoContainer .PairMotto {
        color: #fff;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 21px;
        font-style: normal;
        font-weight: 550;
        line-height: 22.589px;
        /* 107.566% */

        width: 450px;
        margin-top: 12px;

        @media (max-width: 1239px) {
            margin-top: 45px;
            margin-left: auto;
            margin-right: auto;
            width: 58vw;
            text-align: center;

            color: #fff;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: 14px;
            font-style: normal;
            font-weight: 550;
            line-height: 14.875px;
            /* 106.25% */

            opacity: 0.6;
        }
    }

    .LeadContainer {
        margin-top: 160px;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        @media (max-width: 1239px) {
            margin-top: 75px;
        }
    }

    .LeadParent.Appear {
        animation: Services_LeadParent 600ms;
    }

    .Lead {
        width: 295px;
        height: 247px;

        box-sizing: border-box;

        padding: 30px;

        margin-bottom: 5px;
        margin-right: 5px;

        background-color:  #2f2f2f;
        border-radius: 12px;

        @media (min-width: 1240px) {
            animation: Services_UnHover_Lead 400ms;
        }

        @media (max-width: 1239px) {
            width: 100%;
            margin-right: unset;
            height: unset;

            display: flex;
            flex-direction: row;
            justify-content: space-between;

            padding-left: 20px;
            padding-top: 20px;
            padding-right: 10px;
            padding-bottom: 18px;
        }
    }

    .Lead.Hover {
        background-color: #B5BDCA;
    }

    @media (min-width: 1240px) {

        .Lead:hover {
            animation: Services_Hover_Lead 400ms;
            transform: translate(0, -20px);
            background-color: #B5BDCA;
        }

        .Lead:hover img {
            animation: Services_Hover_LeadImage 400ms;
            width: 235px;
            height: 139px;
        }

        .Lead:hover .Number {
            visibility: hidden;
            width: 0 !important;
        }

        .Lead:hover .LeadPlay {
            display: block;
            animation: Services_Hover_LeadPlay 800ms;
        }

        .Lead img {
            animation: Services_UnHover_LeadImage 400ms;
        }

        .Lead .LeadBottom {
            animation: Services_UnHover_LeadBottom 400ms;
        }

        .Lead .LeadCaption {
            animation: Services_UnHover_LeadCaption 400ms;
        }

        .Lead .LeadDetailButton {
            animation: Services_UnHover_LeadDetail 400ms;
        }

        .Lead:hover .LeadBottom {
            animation: Services_Hover_LeadBottom 400ms;
            margin-top: 20px;
        }

        .Lead:hover .LeadCaption {
            animation: Services_Hover_LeadCaption 400ms;
            opacity: 0;
            display: none;
        }

        .Lead:hover .LeadDetailButton {
            display: unset;
            animation: Services_Hover_LeadDetail 400ms;
        }
    }

    @media (max-width: 1239px) {

        .Lead.Hover {
            animation: Services_Hover_Lead 400ms;
            background-color: #B5BDCA;
        }

        .Lead.Hover .LeadImage {
            animation: Services_Hover_LeadImage 400ms;
        }

        .Lead.Hover img {
            animation: Services_Hover_LeadImage 400ms;
            width: 235px;
            height: 139px;
        }

        .Lead.Hover .LeadDetailButton {
            animation: Services_Hover_LeadDetail 400ms;
        }

        .Lead.Hover .LeadPlay {
            display: block;
            animation: Services_Hover_LeadPlay 800ms;
        }

        .Lead.UnHover img {
            animation: Services_UnHover_LeadImage 400ms;
        }

        .Lead.UnHover .LeadImage {
            animation: Services_UnHover_LeadImage 400ms;
        }

        .Lead.UnHover .LeadBottom {
            animation: Services_UnHover_LeadBottom 400ms;
        }

        .Lead.UnHover .LeadDetailButton {
            animation: Services_UnHover_LeadDetail 400ms;
        }

        .Lead.Hover .LeadBottom {
            animation: Services_Hover_LeadBottom 400ms;
        }

        .Lead.Hover .LeadCaption {
            animation: Services_Hover_LeadCaption 400ms;
        }
    }

    .LeadColumn {
        max-width: 60vw;
    }

    .LeadImage {
        @media (max-width: 1239px) {
            img {
                border-radius: 10px;
                width: 80px;
                height: 80px;
                object-fit: cover;
            }

            width: 80px;
            height: 80px;
        }
    }

    .Lead.Hover .LeadImage {
        @media (max-width: 1239px) {
            img {
                object-fit: cover;
                border-radius: 10px;
                width: 46vw;
                height: 120px;
            }

            width: 46vw;
            height: 120px;
        }
    }

    .Lead.Hover .LeadDetailButton {
        display: inline-block;
    }

    .Lead.Hover .LeadBottom {
        display: flex;
        height: 100px;
    }

    .Lead.Hover .LeadColumn {
        position: relative;
    }

    .Lead.Hover .LeadPlay {
        left: 50%;
        top: 50%;
        display: block;
    }

    .Lead.Hover .LeadPlay a {
        padding: 9.5vw;
        text-decoration: none;
        color: #FFF;
    }

    .LeadTop {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        text-decoration: none;

        @media (max-width: 1239px) {
            margin-top: 10px;
        }
    }

    .LeadTop span {
        color: #fff;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;

        opacity: 0.6;

        @media (max-width: 1239px) {
            font-size: 7px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }

    .LeadTop img {
        border-radius: 12px;

        width: 80px;
        height: 80px;

        object-fit: cover;

        @media (max-width: 1239px) {
            width: 0px;
            height: 0px;
        }
    }

    .LeadPlay {
        position: absolute;
        font-size: 36px;
        color: #FFF;
        display: none;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
    }

    .LeadBottom {
        color: #fff;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 24px;
        font-style: normal;
        font-weight: 550;
        line-height: 24px;
        /* 100% */

        margin-top: 63px;

        @media (max-width: 1239px) {
            margin-top: 0px;
            height: 59px;
            display: flex;

            color: #fff;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: min(4.52vw, 19px);
            font-style: normal;
            font-weight: 550;
            line-height: 19px;
            /* 100% */
        }
    }

    .LeadBottomInner {
        align-self: flex-end;
    }

    .LeadCaption {
        @media (max-width: 1239px) {
            align-self: flex-end;
        }
    }

    .LeadDetailButton {
        text-decoration: none;

        background-color: #E6EAF5;
        display: inline-block;

        padding-top: 8px;
        padding-bottom: 9px;
        padding-left: 9px;

        margin-top: 15px;

        border-radius: 5px;

        color: #000;
        leading-trim: both;
        text-edge: cap;
        font-family: HelveticaNeueCyr;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        cursor: pointer;
        display: none;

        @media (max-width: 1239px) {

            padding-top: 8px;
            padding-bottom: 9px;
            padding-left: 9px;

            margin-top: 15px;

            border-radius: 5px;

            color: #000;
            leading-trim: both;
            text-edge: cap;
            font-family: HelveticaNeueCyr;
            font-size: 9px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }

    .LeadDetailButton>i {
        margin-right: 9px;
        margin-left: 12px;

        border: 1px solid black;
        border-radius: 5px;
        padding: 2px;
        padding-right: 3px;
    }

    .LeadButton {
        border: 1px solid white;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 12px;
    }

    .LeadVideo {
        width: 244px;
        height: 146px;

        background-color: #EEE;
        border-radius: 12px;

        overflow: hidden;
        pointer-events: none;

        @media (max-width: 1239px) {
            width: 46vw;
            height: 119.999px;
            flex-shrink: 0;
        }
    }

    .LeadVideo video {
        border: 0;

        border-radius: 12px;

        width: 100%;
        object-fit: cover;
    }

    .Lead.Odd.Appear {
        animation: Services_Odd 700ms;
    }

    .Lead.Even.Appear {
        animation: Services_Even 700ms;
    }
}

@keyframes Services_LeadParent {
    from {
        opacity: .4;
        transform: scale(.8);
    }
}

@media (max-width: 1239px) {

    @keyframes Services_Hover_Lead {
        from {
            background-color: #2f2f2f;
        }

        to {
            background-color: #B5BDCA;
        }
    }

    @keyframes Services_Hover_LeadImage {
        from {
            width: 80px;
            height: 80px;
        }

        to {
            width: 46vw;
            height: 120px;
        }
    }

    @keyframes Services_Hover_LeadBottom {
    }

    @keyframes Services_Hover_LeadCaption {
        from {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        to {
            opacity: 1;
        }   
    }

    @keyframes Services_Hover_LeadDetail {
        from {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes Services_Hover_LeadPlay {
        from {
            display: none;
        }

        49% {
            display: none;
        }

        50% {
            opacity: 0;
            display: block;
            transform: translate(-50%, -50%) scale(1.2) rotate(30deg);
        }

        75% {
            display: block;
            transform: translate(-50%, -50%) scale(1.2) rotate(30deg);
        }

        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(0deg);
        }
    }

    @keyframes Services_UnHover_Lead {
        from {
            background-color: #B5BDCA;
        }

        to {
            background-color: #2f2f2f;
        }
    }

    @keyframes Services_UnHover_LeadImage {
        to {
            width: 80px;
            height: 80px;
        }

        from {
            width: 46vw;
            height: 120px;
        }
    }

    @keyframes Services_UnHover_LeadBottom {
    }

    @keyframes Services_UnHover_LeadCaption {
    }

    @keyframes Services_UnHover_LeadDetail {
        from {
            opacity: 1;
            display: unset;
        }

        50% {
            opacity: 0;
            display: none;
        }

        to {
            display: none;
        }
    }
}

@media (min-width: 1240px) {

    @keyframes Services_Hover_Lead {
        from {
            transform: translate(0, 0);
            background-color: #2f2f2f;
        }

        to {
            transform: translate(0, -20px);
            background-color: #B5BDCA;
        }
    }

    @keyframes Services_Hover_LeadImage {
        from {
            width: 76px;
            height: 76px;
        }

        to {
            width: 235px;
            height: 139px;
        }
    }

    @keyframes Services_Hover_LeadBottom {
        from {
            margin-top: 63px;
        }

        to {
            margin-top: 20px;
        }
    }

    @keyframes Services_Hover_LeadCaption {
        from {
            opacity: 1;
        }

        50% {
            opacity: 0;
            display: none;
        }
    }

    @keyframes Services_Hover_LeadDetail {
        from {
            display: none;
        }

        50% {
            opacity: 0;
            display: none;
        }

        to {
            opacity: 1;
            display: unset;
        }
    }

    @keyframes Services_Hover_LeadPlay {
        from {
            display: none;
        }

        49% {
            display: none;
        }

        50% {
            opacity: 0;
            display: block;
            transform: translate(-50%, -50%) scale(1.2) rotate(30deg);
        }

        75% {
            display: block;
            transform: translate(-50%, -50%) scale(1.2) rotate(30deg);
        }

        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(0deg);
        }
    }

    @keyframes Services_UnHover_Lead {
        from {
            transform: translate(0, -20px);
            background-color: #B5BDCA;
        }

        to {
            transform: translate(0, 0);
            background-color: #2f2f2f;
        }
    }

    @keyframes Services_UnHover_LeadImage {
        to {
            width: 76px;
            height: 76px;
        }

        from {
            width: 235px;
            height: 139px;
        }
    }

    @keyframes Services_UnHover_LeadBottom {
        to {
            margin-top: 63px;
        }

        from {
            margin-top: 20px;
        }
    }

    @keyframes Services_UnHover_LeadCaption {
        from {
            opacity: 0;
            display: none;
        }

        50% {
            opacity: 0;
            display: none;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes Services_UnHover_LeadDetail {
        from {
            opacity: 1;
            display: unset;
        }

        50% {
            opacity: 0;
            display: none;
        }

        to {
            display: none;
        }
    }
}

@keyframes Services_Odd {
    from {
        opacity: .4;
        transform: translate(-20px);
    }
}

@keyframes Services_Even {
    from {
        opacity: .4;
        transform: translate(20px);
    }
}