/*Stuff incase we encounter a browser that doesn't support the @ tag*/
#menu li {
    font-size: 1em;
    font-size: 100%;
    font-size: 1vw;
    height: 4vw;
}

/*mainmenu*/
.MenuLink {
    height: inherit;
}

/*submenu*/
#menu ul a {
    height: 2vw;
}


/* for laptops, tablets & pcs with larger screens 
*/@media screen and (min-width: 960px) {

    #menu li {
        font-size: 1em;
        font-size: 100%;
        font-size: 1.2vw;
        height: 3vw;
    }

    /*mainmenu*/
    .MenuLink {
        height: inherit;
    }

    /*submenu */
    #menu ul {
        height: 1vw;
    }

    /*submenu hyperlink*/
    #menu ul a {
        height: inherit;
    }

}

/* for phones and tablets with smaller screens */
@media screen and (max-width: 959px) {

    #menu li {
        font-size: 0.5em;
        font-size: 8%;
        font-size: 2vw;
        height: 4em;
        height: 8vw;
    }

    /*mainmenu*/
    .MenuLink {
        height: inherit;
    }

    /*submenu*/
    #menu ul {
        height: 2.5em;
        height: 4vw;
    }

    /*submenu hyperlink*/
    #menu ul a {
        height: inherit;
    }

}

.Header {
    position: relative;
    padding: 0% 0%;
    padding-bottom: 0%;
    padding-bottom: 1vw;
    width: 100%;
}

#MenuDivider {
    width: 100%;
}

#menu {
    margin: 0;
    padding: 0%;
}

#menu li {
    margin: 0;
    padding: 0;
    width: 16.6667%; /*since there are 6 of them we divide 100 by 6*/
    list-style: none;
    float: left;
}

#menu li a, #menu li p {
    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
}

.MenuLink {

    margin: 0 1vw 0 0;
    padding: 8% 0%;
    padding: 0.5vw 0;
    width: 100%;
    background: #741243;
    color: #8BEDBC;
    text-align: center;

}

.MenuLink:hover {
    background: #211a3c;
    color: #DEE5C3;
}

#menu li p:hover {
    cursor: default;
}

#Logo {
    background-image: url(../Images/Logos/PIAMLogoOnlyWhite.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#MenuIcon:hover, #Logo:hover {
    background-color: #741243;
}

#menu ul {
    position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #211a3c;
    text-align: center;
}

#menu ul a {
    position: relative;

    display: block;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 10% 0%;
    padding: 1vw 0;
    width: 100%;
    text-align: center;
    background: #0f5388;
    color: #F0AC77;
}

#menu ul a:hover {
    background: #211a3c;
    color: #DEE5C3;
}

.SubMenu {
    z-index: 3;
    position: relative;
}