.icon-hamburger {
    display: block;
    text-indent: -9999px;
    width: 3rem;
    height: 3rem;
    background: url('./fonts/hamburger_icon.svg') no-repeat;
    background-size: 3rem 3rem;
    /* filter: invert(0.5) sepia(0.6) saturate(40) hue-rotate(8deg); */
}

.brand-logo {
    display: block;
    text-indent: -9999px;
    min-width: 500px;
    height: 3rem;
    background: url('../images/template/main_logo.svg') no-repeat;
    background-size: auto 42px;
    /* filter: invert(0.5) sepia(0.6) saturate(40) hue-rotate(8deg); */
}

.icon-arrow-right {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('./fonts/arrow_icon.svg') no-repeat;
    background-size: 40px 40px;
}

.icon-arrow-left {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('./fonts/arrow_icon.svg') no-repeat;
    background-size: 40px 40px;
    transform: rotate(180deg);
}

.icon-arrow-up {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url('./fonts/arrow_icon.svg') no-repeat;
    background-size: 30px 30px;
    transform: rotate(-90deg);
}

.icon-cross {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('./fonts/close_icon.svg') no-repeat;
    background-size: 40px 43px;
}


/* Small devices (landscape phones, 576px and up)*/
@media screen and (max-width: 576px) {

    .brand-logo {
/*        background-size: auto 18px;
        min-width: 220px;*/
        background-size:auto;
        min-width:56vw;
    }

    .icon-hamburger {
        width: 3rem;
        height: 3rem;
/*        background-size: 2.5rem 2.25rem;
*/      background-size: 3rem 1.25rem;

    }

    .icon-cross {
        width: 3rem;
        height: 3rem;
        background: url('./fonts/close_icon.svg') no-repeat;
        background-size: 2.8rem 1.5rem;
    }
}