/*
 * This CSS contains all style informations for the header of the website
 * (CSS style for small screens is on the bottom of this file)
 */

.header
{
    display: flex;

    width: 100%;

    color: black;
}

.header > .headerEntry
{
    width: 24%;

    vertical-align: middle;
}

.header > .headerEntry > .headerImage
{
    width: 100%;
    margin-left: 0%;
}

.header > .headerEntry > .headerImage:hover
{
    background-color: transparent;
    cursor: pointer;
}

.header > .headerEntry > .headerTextWithSymbol
{
    display: flex;
    margin: auto;

    color: black;

    text-decoration: none;
}

.header > .headerEntry > .headerTextWithSymbol > .headerSymbol
{
    margin-top: -1px;
    margin-right: 15px;

    font-size: xx-large;
}

.header > .headerEntry > .headerTextWithSymbol > .headerText
{
    align-self: center;
}

.header > .headerEntry > a:hover
{
    color: #E36C0A;
}

.header > .headerEntry > .headerTextWithSymbol > .headerImage
{
    width: 35px;
    height: 35px;

    margin-top: auto;
    margin-bottom: auto;
    margin-right: 5px;
}

@media only screen and (max-width: 570px)
{
    .header
    {
        display: block;
    }
    .header > .headerEntry
    {
        width: 100%;
    }
    .headerTextWithSymbol
    {
        justify-content: center;
    }
}