.why-we {
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 20px;
}

.why-we > .inner:not(.back) {
    position: relative;
    z-index: 2;
    background: url("/bitrix/templates/m_food/image/why-we/image-up.png");
    height: 1920px;
}

.why-we .head-box {
    padding: 60px 0;
}

.why-we ul li {
    padding-bottom: 160px;
}

.why-we > .inner ul li .title {
    font-family: "Rubik Bold";
    color: #fff;
    text-transform: uppercase;
    font-size: 2.2rem;
    margin: 0 auto;
}

.why-we > .inner ul li .description {
    font-family: "Roboto Slab Regular";
    color: #fff;
    font-size: 1.8rem;
    padding: 20px 0;
    margin: 0 auto;
}

.why-we > .inner.back {
    display: none;
}

@media only screen and (min-width: 640px) {
    .why-we > .inner ul li .title {
        font-size: 1.4rem;
    }

    .why-we > .inner ul li .description {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 960px) {
    .why-we {
        height: 600px;
        font-size: 10px;
    }

    .why-we > .inner:not(.back) {
        max-width: 1200px;
        height: auto;
        background: none;
    }

    .why-we .head-box {
        /*opacity: 0.6;*/
        position: absolute;
    }

    .why-we .head-box.active {
        /*opacity: 1;*/
    }

    .why-we > .inner ul {
        height: 100%;
    }

    .why-we > .inner ul li {
        height: 100%;
        padding-top: 200px;
        width: 26%;
        float: left;
        margin-left: 6%;
        opacity: 0.6;
    }

    .why-we > .inner ul li .title {
        font-size: 1.2rem;
    }

    .why-we > .inner ul li .description {
        font-size: 1rem;
    }

    .why-we > .inner ul li .title {
        width: 80%;
    }

    .why-we > .inner ul li .description {
        width: 80%;
        opacity: 0;
        transition: opacity 1s;
    }

    .why-we > .inner ul li:hover {
        opacity: 1;
    }

    .why-we > .inner ul li:hover .description {
        opacity: 1;
    }

    .why-we > .inner.back {
        display: block;
        width: 1920px;
        max-width: 1920px;
        position: absolute;
        top: 0;
    }

    .why-we > .inner.back > div {
        position: relative;
    }

    .why-we > .inner > div img {
        -webkit-filter: brightness(25%);
        transition: -webkit-filter 1s, transform 1s;
    }

    .why-we > .inner > div > img.active {
        -webkit-filter: brightness(80%);
        transform: scaleX(1.05);
    }

    .why-we img {
        -webkit-filter: brightness(25%);
    }

    .why-we .left-img {
        float: left;
        width: 670px;
        z-index: 1;
    }

    .why-we .left-img img {
        width: 853px;
        height: 600px;
    }

    .why-we .center-img {
        float: left;
        width: 300px;
        z-index: 2;
    }

    .why-we .center-img img {
        width: 580px;
        height: 601px;
        transition: width 1s;
    }

    .why-we .right-img {
        width: 900px;
        float: right;
        z-index: 1;
    }

    .why-we .right-img img {
        width: 900px;
        height: 600px;
    }
}

@media only screen and (min-width: 1200px) {

}