Poxoronoe_buro/less/_header.less

@media screen and (min-width: 1209px) {
    /* Header hover */
    
    .header__contact-link {
        &:hover {
            color: #ffffff;
        }
    }
    
    .header__link {
        &:hover {
            color: #CDB092;
        }
    }
}

/* Header */

.header__top {
    display: flex;
    align-items: center;
    height: 30px;
    background-color: #39060A;
}

.header__contact-list {
    display: flex;
    justify-content: flex-end;
}

.header__contact-item {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    margin-right: 30px;
    color: #BDBDBD;
    
    &:last-child {
        margin-right: 0px;
    }
}

.header__contact-link {
    transition: color .4s;
}

.header__main {
    display: flex;
    align-items: center;
    background-color: #7A1B2E;
    height: 65px;
}

.header__main__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    width: 100px;
    height: 41px;
}

.header__nav {
    margin-left: 40px;
}

.header__list {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
}

.header__item {
    margin-right: 30px;
    
    &:last-child {
        margin-right: 0px;
    }
}

.header__link {
    transition: color .4s;
}

.header-burger-menu,
.header__burger-button {
    display: none;
}

@media screen and (max-width: 1210px) {
    .header__top {
        .header__contact-item {
            margin-right: 0px;
            
            &:nth-child(n + 2) {
                display: none;
            }
        }
    }
    
    .header__logo {
        width: 70px;
        height: 29px;
        margin-right: 20px;
    }
    
    .header-burger-menu {
        display: block;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        padding: 75px 20px 20px;
        background-color: #39060A;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        z-index: 4;
        transform: translateX(101%);
        
        &.active {
            transform: translateX(0%);
            transition: transform .4s;
        }
        
        &::-webkit-scrollbar {
            display: none;
        }
    }
    
    .header__nav {
        display: none;
    }
    
    .header__list--burger {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 30px;
        border-bottom: 1px solid #561623;
        font-size: 14px;
        line-height: 18px;
    }
    
    .header__item {
        margin-bottom: 30px;
        
        &:last-child {
            margin-bottom: 0px;
        }
    }
    
    .header__contact-list--burger {
        flex-direction: column;
        justify-content: flex-start;
        margin-top: 30px;
        font-size: 14px;
        line-height: 18px;
        
        .header__contact-item {
            margin-bottom: 30px;
            
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }
    
    .close__popup--burger {
        &::before,
        &::after {
            background-color: #ffffff;
        }
    }
    
    
    .header__burger-button {
        display: block;
        width: 25px;
        height: 18px;
        margin-left: 20px;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        position: relative;
        
        &::before {
            content: "";
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 2px;
            background-color: #ffffff;
        }
    }
}

/* //Header */