/* Bar */

.header-bar-wrapper {
    height: 60px;
}

.header-bar {
    height: 60px;
    padding-top: 10px;
    background: #212121;
    transition: background 0.4s ease;
}

.header-bar--fixed {
    position: fixed;
    left: 0;
    top: 60px;
    width: 100%;
    height: 60px;
    background: #424242;
    z-index: 99;
}

.header-bar > div {
    display: table;
    table-layout: fixed;
    width: 1140px;
    margin: 0 auto;
}

.header-bar-left,
.header-bar-right {
    display: table-cell;
    vertical-align: middle;
}

.header-bar-right {
    text-align: right;
    width: 260px;
    padding-left: 60px;
}

@media (max-width: 1240px) {
    .header-bar-wrapper {
        height: auto;
    }

    .header-bar {
        height: auto;
    }

    .header-bar > div {
        display: block;
        width: 100%;
    }

    .header-bar-left,
    .header-bar-right {
        display: block;
    }

    .header-bar-left {
        padding: 0 10px;
    }

    .header-bar-right {
        text-align: center;
        width: 100%;
        padding: 10px;
    }
}