#resultSection {

    --font-family: HelveticaNeueCyr;
    font-family: var(--font-family);

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

    @media (min-width: 1240px) {
        margin-top: 230px;
    }

    .header {
        @media (max-width: 1239px) {
            margin-left: 5.24vw;
            margin-right: 5.24vw;
        }

        @media (min-width: 1240px) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            margin-left: auto;
            margin-right: auto;
            width: 1160px;
        }
    }

    .header .primary {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: min(25px, 5.95vw);
            line-height: 100%;
            color: #fff;

            width: 47.62vw;
            margin-bottom: 6.19vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 36px;
            line-height: 100%;
            color: #fff;

            width: 290px;
        }
    }

    .header .secondary {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: min(16px, 3.81vw);
            line-height: 100%;
            color: #fff;

            width: 45.24vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 22px;
            line-height: 104%;
            color: #fff;

            width: 265px;
        }
    }

    .body {
        display: flex;
        flex-direction: column;
        align-items: center;

        background-color: #2f2f2f;

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

        @media (min-width: 1240px) {
            margin-top: 100px;
        }
    }

    .navigation {
        @media (max-width: 1239px) {
            display: flex;
            flex-direction: row;
            
            margin-top: 11.90vw;
            margin-left: auto;
            margin-right: auto;
        }
        
        @media (min-width: 1240px) {    
            
        }
    }

    .navigation>* {
        margin: 1px;
        height: 2px;
        width: min(50px, 11.90vw);
    }

    .navigation .dark {
        background-color: #737373;
    }

    .navigation .light {
        background-color: #C9C7C2;
    }

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

        @media (max-width: 1239px) {
            width: 90.48vw;
            margin-top: 8.33vw;
        }

        @media (min-width: 1240px) {
            width: 1200px;
            margin-top: 60px;
        }
    }

    .holder {
        overflow: hidden;
    }

    .carousel .arrow {
        @media (max-width: 1239px) {}

        @media (min-width: 1240px) {
            margin-top: auto;
            margin-bottom: auto;

            color: #fff;
            border: 1px solid #fff;
            padding: 7px;
            padding-left: 11px;
            padding-right: 11px;
            border-radius: 12px;
            cursor: pointer;
        }
    }

    .carousel .wall {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        flex-grow: 1;

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

        @media (min-width: 1240px) {}
    }

    .card {
        overflow: hidden;

        @media (max-width: 1239px) {
            width: 90.48vw;
            margin: 0.48vw;

            border-bottom-left-radius: 3.57vw;
            border-bottom-right-radius: 3.57vw;
        }

        @media (min-width: 1240px) {
            width: 350px;
            margin: 1.5px;

            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }
    }

    .card .number {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: min(8px, 1.90vw);
            color: #fff;

            padding-bottom: 3.57vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 9px;
            color: #fff;

            padding-bottom: 20px;
        }
    }

    .card .inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .card img {
        object-fit: cover;
        user-select: none;

        @media (max-width: 1239px) {
            margin: 1px;

            width: 90.71vw;
            height: 51vw;
        }

        @media (min-width: 1240px) {
            margin: 1px;

            width: 350px;
            height: 200px;
        }
    }

    .card .explanation {
        @media (max-width: 1239px) {
            box-sizing: border-box;
            flex-grow: 1;

            padding-top: 5.71vw;
            padding-left: 1.90vw;
            padding-right: 13.33vw;
            padding-bottom: 7.86vw;

            min-height: 50.95vw;
            background-color: #515151;
        }

        @media (min-width: 1240px) {
            box-sizing: border-box;
            flex-grow: 1;

            padding-top: 26px;
            padding-left: 11px;
            padding-bottom: 27px;
            padding-right: 18px;

            min-height: 235px;

            background-color: #515151;
        }
    }

    .explanation .title {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 4.29vw;
            line-height: 105%;
            color: #fff;

            margin-bottom: 4.76vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 22px;
            line-height: 100%;
            color: #fff;

            margin-bottom: 25px;
        }
    }

    .explanation .small {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 2.38vw;
            line-height: 100%;
            color: #A2A2A2;

            margin-bottom: 1.90vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 10px;
            line-height: 100%;
            color: #A2A2A2;

            margin-bottom: 8px;
        }
    }

    .explanation .answer {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 3.33vw;
            line-height: 100%;
            color: #fff;

            margin-bottom: 1.90vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 14px;
            line-height: 100%;
            color: #fff;

            padding-right: 8px;
        }
    }

    .explanation .gap {
        @media (max-width: 1239px) {
            height: 3.57vw;
        }

        @media (min-width: 1240px) {
            height: 15px;
        }
    }

    .motto {
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 1239px) {
            margin-top: 54.76vw;
            margin-bottom: 47.62vw;
        }

        @media (min-width: 1240px) {
            margin-top: 170px;
            margin-bottom: 240px;
        }
    }

    .motto .primary {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: min(25px, 5.95vw);
            line-height: 100%;
            text-align: center;
            color: #fff;

            width: 51.19vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 36px;
            line-height: 100%;
            text-align: center;
            color: #fff;

            width: 490px;
        }
    }

    .motto .primary.appear {
        @media (max-width: 1239px) {
            animation: AppearTop 600ms;
        }
        
        @media (min-width: 1240px) {    
            animation: AppearOutside 600ms;
        }
    }

    .motto .secondary {
        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: min(14px, 3.33vw);
            line-height: 100%;
            text-align: center;
            color: #ACACAC;

            margin-top: 10.71vw;
            width: 84.05vw;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 15px;
            line-height: 120%;
            text-align: center;
            color: #ACACAC;

            margin-top: 60px;
            width: 430px;
        }
    }

    .motto .secondary.appear {
        @media (max-width: 1239px) {
            animation: AppearInside 600ms;  
        }
        
        @media (min-width: 1240px) {    
            animation: AppearBottom 600ms;   
        }
    }

    .accent {
        color: #1d76ff;
    }

    .consultButton {
        cursor: pointer;

        @media (max-width: 1239px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: min(13px, 3.10vw);
            color: #fff;

            padding-left: min(80px, 19.05vw);
            padding-right: min(80px, 19.05vw);
            padding-top: min(20px, 4.76vw);
            padding-bottom: min(20px, 4.76vw);
            border-radius: min(15px, 3.57vw);

            box-sizing: border-box;
            margin-top: 21.43vw;

            background-color: #fff;
            color: #000;
        }

        @media (min-width: 1240px) {
            font-family: var(--font-family);
            font-weight: 500;
            font-size: 20px;
            color: #fff;

            padding-left: 50px;
            padding-right: 50px;
            padding-top: 26px;
            padding-bottom: 26px;
            margin-top: 115px;
            box-sizing: border-box;

            border-radius: 25px;
            background-color: #fff;
            color: #000;

            animation: ButtonColorFromBlue 300ms;
        }
    }

    .consultButton:hover {
        animation: ButtonColorToBlue 300ms;
        background-color: #1D75FF;
        color: #FFF;
    }
}