.header-caret-trigger {
    position: absolute;
    width: calc(100% - 250px);
    height: 5px;
    top: 0px;
    left: 0px;
}

.sub-header {
    position: absolute;
    top: 5px;
    width: 100%;
    height: 75px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 998;
    background-color: #DDD;
    box-shadow: 0px 3px 5px #C4C4C4;
}

.sub-header-menu-opened {
    background-color: #3C3C3C;
    box-shadow: 0px 3px 5px #333;
    z-index: 1000;
}

.main-header {
    background-color: #DDD;
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 999;
}

.main-header-menu-opened {
    background-color: #3C3C3C;
    z-index: 1001;
}

/* .main-header-menu-opened .header-button-separator {
    display: none;
} */

.header-logo {
    position: relative;
    background: url('../../images/graphic/logo.png') no-repeat 0px -20px;
    height: 16px;
    flex-grow: 18;
    margin-left: 30px;
}

.header-logo-menu-opened {
    background-position: 0px 0px !important;
}

.main-header nav {
    cursor: pointer;
    opacity: 1;
    transition: opacity .2s ease-in;
}

.main-header nav:hover {
    opacity: .5;
}

.header-menu-button {
    background: url('../../images/graphic/Buttons.png') no-repeat -225px 0px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
    margin-right: 20px;
}

.header-menu-button-menu-opened {
    background-position: -90px -45px;
}

.header-close-button {
    background: url('../../images/graphic/Buttons.png') no-repeat -45px -45px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
    margin-right: 20px;
}

.header-contact-button-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.header-contact-button {
    background: url('../../images/graphic/Buttons.png') no-repeat 0px -45px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
}

.header-contact-button-menu-opened {
    background: url('../../images/graphic/Buttons.png') no-repeat -225px -45px;
}

.header-contact-button-text {
    color: #3C3C3C;
    font-size: 14px;
    padding-top: 4px;
}

.header-contact-button-text-menu-opened {
    color: #CCC;
}

.header-button-separator {
    width: 35px;
    height: 45px;
    position: relative;
}

.header-button-separator:after {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 2px);
    margin: 10px 0px 10px 0px;
    border-left: 1px solid #CCC;
}

.header-button-separator-menu-opened:after {
    border-left: 1px solid #5f5d5d !important;
}

.header-list-button {
    background: url('../../images/graphic/Buttons.png') no-repeat -45px 0px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
}

.header-start-button {
    background: url('../../images/graphic/Buttons.png') no-repeat 0px 0px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
}

.header-caret-button {
    background: url('../../images/graphic/Buttons.png') no-repeat -90px 0px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
}

.header-caret-button-caret-opened {
    background-position: -135px 0px;
}

.header-help-button {
    background: url('../../images/graphic/Buttons.png') no-repeat -180px 0px;
    align-self: flex-end;
    height: 45px;
    width: 45px;
}

.header-help-button-menu-opened {
    background-position: -180px -45px;
}