.header {
    width: var(--width-full);
    height: var(--height-xl-2xs);
    padding: var(--offset-sm-l)0;
    color: #f6f7f7;
    z-index: var(--zindex-250);
    transition: all var(--transition-slow)ease-out;
    will-change: transform;
    background-color: #00000099;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0;
}

.header.sticky {
    background-color: #191919;
}

.header .container {
    width: var(--width-full);
    max-width: none;
    padding: 0 var(--offset-sm-l);
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.header .start_side,
.header .end_side {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header .header_burger {
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    width: 24px;
    height: 24px;
    padding: 0px;
}

.logo_container {
    margin-left: var(--offset-sm-m);
    display: inline-block;
}

.logo_link {
    display: flex;
}

.header .logo_link img {
    width: var(--width-xl-2xs);
    font-size: 0;
    height: auto;
}

.header .navigation {
    display: none;
}

.header .navigation_list {
    align-items: center;
    padding: 0;
    display: flex;
}

.header .navigation_item {
    margin-right: var(--offset-md-2xs);
    position: relative;
}

.header .navigation_item:hover:after {
    content: "";
    width: var(--width-full);
    height: var(--height-sm-3xs);
    background-color: rgb(var(--color-white));
    border-radius: var(--border-radius-m);
    position: absolute;
    bottom: 0;
}

.header .navigation_link {
    font: var(--body-text-medium);
    color: var(--color-white);
    white-space: nowrap;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.header_buttons {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    display: flex;
}

.header .log_in {
    display: none;
}

.header .sign_up {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: var(--height-md-s);
    border: var(--border-width-s)solid rgba(255, 221, 60, .5);
    padding: 0 var(--offset-sm-l);
    border-radius: var(--border-radius-l);
    vertical-align: top;
    letter-spacing: .04rem;
    color: #ffdd3c;
    cursor: pointer;
    font: var(--caption-text-semibold);
    transition: color var(--transition-fastest)var(--cubic-ease-out), background-color var(--transition-fastest)var(--cubic-ease-out);
    background-color: transparent;
    justify-content: center;
    align-items: center;
    display: flex;
}

.header .sign_up:hover,
.header .sign_up:focus {
    background-color: var(--color-background-accent-positive);
    color: var(--color-text-button-primary);
}

.header .locale_btn {
    display: none;
}

@media (min-width: 400px) {
    .logo_container {
        margin-left: var(--offset-sm-l);
    }

    .header .log_in {
        margin-right: var(--offset-sm-l);
        font: var(--caption-text-semibold);
        color: var(--color-text-accent);
        cursor: pointer;
        display: block;
        background-color: transparent;
        border: none;
        outline: none;
        padding: 0px;
    }
}

/** md **/
@media screen and (min-width: 768px) {
    .header {
        padding: var(--offset-sm-xxl)0;
    }

    .header .container {
        padding: 0 var(--offset-md-l);
    }

    .header .logo_link img {
        width: 108px;
    }

    .header .locale_btn {
        margin-left: var(--offset-sm-l);
        cursor: pointer;
        align-items: center;
        display: flex;
    }

    .header .locale_btn .locale_btn_img {
        width: var(--width-md-s);
        height: var(--height-md-2xs);
        border-radius: var(--border-radius-xxs);
    }
}

@media (min-width: 1024px) {
    .header.sticky {
        transform: translateY(0);
    }

    .header .container {
        padding: 0 var(--offset-md-2xl);
    }

    .header .header_burger {
        display: none;
    }

    .logo_container {
        margin-left: 0;
    }

    .header .logo_link img {
        width: 128px;
    }

    .header .navigation {
        margin-left: var(--offset-md-l);
        display: block;
    }

    .header .dropdown_wrap {
        display: none;
    }

    .header .dropdown_wrap {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        padding-top: var(--offset-sm-s);
        position: absolute;
    }

    .header .navigation_item:hover>.dropdown-wrap {
        display: block;
    }

    .header .dropdown_wrap .dropdown {
        padding: var(--offset-sm-s)0;
        border-radius: var(--border-radius-m);
        background: #3f4044;
        box-shadow: 0 0 25px rgba(0, 0, 0, .25);
    }

    .header .dropdown_wrap .dropdown_item {
        padding: var(--offset-sm-m)var(--offset-md-2xs);
        border-bottom: var(--border-width-xs)solid #616368;
    }

    .header .dropdown_wrap .dropdown_link {
        font: var(--caption-text-semibold);
        display: inline-block;
        position: relative;
        color: inherit;
        text-decoration: none;
    }

    .header .sign_up {
        height: var(--height-md-2xl);
        padding: 0 var(--offset-md-s);
        letter-spacing: .02rem;
    }
}

@media (min-width: 1360px) {
    .header .container {
        max-width: 1264px;
    }

    .header .navigation {
        margin-left: 104px;
    }

    .header .navigation_item {
        margin-right: var(--offset-md-s);
    }

    .header .log_in {
        margin-right: var(--offset-md-2xs);
    }

    .header .locale_btn {
        margin-left: var(--offset-md-2xs);
    }
}