:root {
    --header-height:            160px;
    --header-menu-bar:          50px;
    --header-font-color:        white;
    --header-background:        #405060;
    --header-navi-background:   #6080a0;
}

div.header {
    background-color:   var( --header-background );
    color:              var( --header-font-color );
    margin:             0px;
    padding:            0px;
    height:             var( --header-height );
    margin-bottom:      20px;
}

.header-content {
    margin:             0px auto 0px auto;
}

.contact-bar {
    float:              right;
    margin:             auto;
    padding:            20px;
    height:             calc( var( --header-height ) - var( --header-menu-bar ) );
}

.header-contact {
    font-size:          var( --font-small );
}

.header-contact.address::before {
    content:            "\00a0\f3c5\00a0";
    font-family:        "FontAwesome Solid";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.header-contact.email::before {
    content:            "\00a0\f0e0\00a0";
    font-family:        "FontAwesome Regular";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.header-contact.phone::before {
    content:            "\00a0\f095\00a0";
    font-family:        "FontAwesome Solid";
    font-size:          var( --font-tiny );
    margin-right:       10px;
}

.title-bar {
    margin:             0px auto 0px auto;
    height:             calc( var( --header-height ) - var( --header-menu-bar ) );
}

.title-bar-content {
    width:              var( --page-min-width );
    margin:             0px auto 0px auto;
}

.title-bar--logo {
    max-height:         calc( var( --header-height ) - var( --header-menu-bar ) - 10px );
    display:            inline-block;
    vertical-align:     middle;
}

.title-bar.title {
    display:            inline-block;
    margin-left:        20px;
    font-size:          var( --font-large );
    height:             unset;
    line-height:        calc( ( var( --header-height ) - var( --header-menu-bar ) - 10px ) );
    color:              var( --header-font-color );
}

.navi-bar {
    background-color:   var( --header-navi-background );
    height:             var( --header-menu-bar );
    margin:             0px;
    padding:            0px;
    /* margin-top:         auto; */
}

.navi-bar-content {
    width:              var( --page-min-width );
    margin:             0px auto 0px auto;
    padding-left:       10px;
}

ul.navi-bar.list {
    float:              right;
}

.navi-bar.list-item {
    list-style-type:    none;
    margin-right:       calc( 0.5 * var( --header-menu-bar ) );
    line-height:        var( --header-menu-bar );
    float:              left;
}

.navi-bar-item {
    color:              var( --header-font-color );
}

.navi-bar.organization {
    width:              100%;
}