.input-search {
    display: inline-block;
}

.input-search>.content {
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    color: inherit;
    font-family: Arial, "Roboto", sans-serif;
    font-size: 20px;
    padding: 8px;
    width: 358px;
    margin-right: 65px;
    /* vertical-align: bottom; */
}

.input-search>.content ::placeholder {
    color: inherit;
}

.input-search>.icon {
    width: 40px;
    height: 40px;
    display: none;
}

@media(max-width: 960px) {
    .input-search {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(calc(-100% + 40px));
        transition: transform 300ms linear;
    }
    .input-search.-active {
        transform: translateX(0);
        margin: 2px 0 0 2px;
    }
    .input-search>.content {
        background-color: rgb(255, 255, 255);
        color: rgb(95, 87, 87);
        margin-right: 0;
        border-radius: 8px 0 0 8px;
    }
    .input-search>.icon {
        background-color: rgb(255, 255, 255);
        float: right;
        display: none;
        border-radius: 0 8px 8px 0;
    }
    .input-search>.icon.-active {
        display: block;
    }
}

@media (max-width:405px) {
    .input-search>.content {
        width: 260px;
    }
}