/*Nav Image (Left)*/
div.navImg{
    max-width: 300px;
    overflow: hidden;
    padding: 0 10px;

    flex-shrink:0;
}
div.navImg > a{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
div.navImg > a > img {
    max-width: 100%;
    /*	max-height: var(--nav-height);*/
    max-height: calc(var(--nav-height) - 25px);
}


/* Nav Link Buttons (Center)*/
ul.nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;

    margin: 0;
    padding: 0 10px;

    flex-grow: 1;

}
ul.nav a {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style-type: none;
    align-items: center;

    height: var(--nav-height);

    margin: 0;
    padding: 0 17px;
}
ul.nav a span{
    margin-left: 5px;
    font-size: 30px;
    width: 30px;
}


/* Nav Account (Right)*/
div.navAccount{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: var(--nav-height);
    padding: 0 20px;
}

div.navAccount a{
    flex-direction: column;
}

div.navAccount p{
    font-size: 12px;
    font-weight: bold;
    /*color: var(--text-color-grey);*/
    margin: 5px 0 0 0;
}





/*All Buttons*/
a p {
    margin: 0;
    padding: 0;
    color: inherit;
}

nav a, nav a * {
    transition: 0.1s ease-in-out color;
}

nav a:hover, nav a:active, .active, nav a:active p, nav a:hover p, nav a:active span, nav a:hover span {
    color: var(--nav-ac-color) !important;
}

ul.nav a, div.navAccount a, div.navAccount label{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;

    height: var(--nav-height);
    font-size: 30px;
    font-weight: 600;

    color: var(--nav-text-color);
    text-decoration: none;
    text-transform: uppercase;
}


/*Compact version for Ipads*/
@media screen and (max-width: 1200px) {

    ul.nav p {
        display: none;
    }
}