.c-header {
    color: white;
    font-size: font-size(small);
    position: relative;
    width: 100%;
    height: 85px;
    top: -2px;
    background-color: color(brand);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    @include mq($from: 840px) {
        top: 0;
    }
}

.c-header--article {
    font-size: 22px;


    @include mq($from: 840px) {
        font-size: font-size(body-large);
    }
}

.c-header__content {
    display: inline;
}

.c-header__button {
    border: none;
    width: 200px;
    height: 100%;
    padding:  10px 0;
    background-color: color(white);
    color: color(brand);
    position: absolute;
    right: 0;
    font-size: 18px;
    transition: all 0.3s;
    font-weight: bold;

    @include mq($until: 840px) {
        display: none;
    }

    &:hover {
        cursor: pointer;
        &::after {
            opacity: 1;
            right: -10px;
        }
    }
}