.input-search {
    display: inline-block;
    background-color: transparent;
}

.input-search > .content {
    outline: none;
    background-color: 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;
}

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

.input-search > .icon {
    outline: none;
    display: none;
}

@media (max-width: 1025px) {
    .input-search {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(calc(-100% + 40px));
        transition: transform 200ms linear;
    }

    .input-search.-active {
        transition: transform 200ms cubic-bezier(0, 0, 0.96, 1.26);
        transform: translateX(0);
    }

    .input-search > .content {
        width: 75vw;
        background-color: #fff;
        color: #000;
        margin-right: 0;
        vertical-align: middle;
    }

    .input-search > .icon {
        display: none;
        box-sizing: border-box;
        background: #fff;
        width: 40px;
        height: 40px;
        padding: 8px;
        vertical-align: middle;
    }

    .input-search > .icon.-active {
        display: inline-block;
    }
}

@media (max-width: 400px) {
    .input-search > .content {
        width: 65vw;
    }
}