.page-header {
    /* IE 10-11 workaround - https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items */
    flex-shrink: 0;
    position: relative;
    height: 60px;
}
.page-header__inner {
    /* Using sticky would require removing the height 100% from html
       and body, but it is required to create a footer sticky to the
       bottom of the viewport with flex. Due to the html tag height
       being limited to the viewport size as a result the header
       will stop and remain at its position when scrolling below
       the bottom edge of the viewport. Therefore using pos-sticky
       is only possible when quitting the sticky footer. */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 60px;
    font-size: 13px;
    color: #3c3c3b;
    background-color: #fff;
    border-bottom: 1px solid #e0e2e3;
    opacity: 1;
    transition: transform .3s, opacity .3s, background-color .3s, border .3s;
    /* required to prevent content elements from overlapping */
    z-index: 2000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* force composition layer to fix scroll rendering issue */
    transform: translate3d(0, 0, 0);
}
.page-header--collapsed .page-header__inner {
    transform: translateY(-60px);
}
.page-header--fixed .page-header__inner {
    position: fixed;
}
.page-header--hidden .page-header__inner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s .3s;
}
.page-header__main-bar {
    padding-left: 0;
    padding-right: 0;
}
.page-header__group {
    /* revert .col styles, but .col is required for IE11 to work, because they fucked up flex-basis - horrific shit */
    position: static;
    width: auto;
    padding: 0;
}

.page-header__btn {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    /* do not apply - issues on safari => always use flex */
    /*height: 100%;*/
    padding: 0 10px;
    background-color: transparent;
    border: 0;
    color: inherit;
}
.page-header__btn:focus,
.no-touchevents .page-header__btn:hover {
    color: inherit;
}
.page-header__btn > .svg-icon {
    width: 25px;
    height: 25px;
    pointer-events: none;
}

.page-header__logo {
    position: relative;
    width: 140px;
    padding: 0;
    color: transparent;
}
.page-header__logo-img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin: auto;
    width: calc(100% - 30px);
    height: auto;
    max-height: 100%;
}

@media ( min-width: 992px ) {
    .page-header {
        height: 160px;
    }
    .page-header__inner {
        height: 160px;
    }
    .page-header--on-top .page-header__inner {
        background-color: transparent;
        border-bottom-color: transparent;
    }
    .page-header--collapsed .page-header__inner {
        transform: translateY(-50px);
    }
    .page-header__meta-bar {
        /* required to enable z-index */
        position: relative;
        height: 50px;
        letter-spacing: 1px;
        /* required to overlap .nav-main__dropdown */
        z-index: 2;
    }
    .page-header__main-bar {
        padding-left: 20px;
        padding-right: 20px;
    }
    .page-header__group--left {
        /* Fix IE11 */
        flex-basis: auto;
    }
    .page-header__group--center {
        /* force flex-child to obey width if contents overflow */
        overflow: hidden;
    }

    .page-header__logo {
        width: 180px;
        align-self: stretch;
        /* required to overlap .nav-main__dropdown */
        z-index: 2;
    }
    .page-header__logo-img {
        width: 100%;
        margin: auto 0;
    }

    .page-header__close-btn {
        width: 50px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
    }
    .page-header__close-btn--visible {
        opacity: 1;
        pointer-events: auto;
    }
}
@media ( min-width: 1200px ) {
    .page-header__logo {
        width: 210px;
    }
}