.topOfPageMenu
{
    position: fixed;
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: fit-content;
    gap:5%;
    min-height: calc(57px+2%);/* this takes the logos height and adds padding*/
    padding-top:1%;
    padding-bottom:1%;
    padding-left:5%;
    padding-right:5%;
    display: flex;
    justify-content: flex;
    align-items:start;
    /*margin: auto;*/
    z-index:100;
    color:white;
    box-sizing: border-box;
    line-height:1.2;
}

#topMenuLogo
{
    height: 94.4%;
    margin-top: 1.6%;
}

div.menuRow {
    display: flex;
    justify-content: start;
    align-items:end;  
    flex-direction: row;
    line-height:1.2;
    /*
    
    animation-timing-function: ;
    animation-delay: ;
    animation-iteration-count: ;
    animation-direction: ;
    animation-play-state: ;
    animation-name: ;
    */
    opacity:0;
    animation-duration: 4s;
    animation-name: menuFadeIn;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    
}
/*div.menuRow:nth-child(1) {  font-size: calc(var(--textBaseSize) * 0.68); }*/
@keyframes menuFadeIn {
    0%
    {
        opacity: 0;
    }
    100% 
    {
        opacity: 1;
    }
}


.menuRow > div, .menuRow > a {

    padding-right: calc(var(--textBaseSize) * 0.25);
    padding-left:calc(var(--textBaseSize) * 0.25);
    padding-top:0px;
    /*margin-top:0.5%;*/
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
    
    padding-bottom:0px;
    border-right: calc(var(--textBaseSize) * 0.05) solid white;
    height: 70%;
    /* with flexbox:
    width: calc(50% - 21px);
    */
}

/* Remove border bottom from last item */
.menuRow > :last-child{
    border-right: none;
}
.menuRow > :first-child{
    padding-left: 0;
}

/*div.menuRow:nth-child(1) { animation-delay: 4s; }
div.menuRow:nth-child(2) { animation-delay: 5s; }
div.menuRow:nth-child(3) { animation-delay: 6s; }
div.menuRow:nth-child(4) { animation-delay: 7s; }
div.menuRow:nth-child(5) { animation-delay: 8s; }
div.menuRow:nth-child(6) { animation-delay: 9s; }
div.menuRow:nth-child(7) { animation-delay: 10s; }
div.menuRow:nth-child(8) { animation-delay: 32s; }
*/



.topOfPageMenuText
{
    display: flex;
    justify-content: end;
    align-items:start;  
    flex-direction:column;
    color:white;
    font-size: calc(var(--textBaseSize) * 0.48);
    gap: 0px;
}
/*.topContactText
{
    font-size: calc(var(--textBaseSize) * 0.5);
    
}*/
.topLogo
{
    width: calc(var(--textBaseSize) * 4);
    display: flex;
    align-items:end;
}
a{
    color:white;
    text-decoration: none;
}
/*.grow, */
a
{
    transition: all .2s ease-in-out; 
}
/*.grow:hover, */
a:hover
{
    transform: scale(1.1); 
}




/*********************************************************
***************Mobile Vertical (portrait)*****************
**********************************************************/
@media (orientation: portrait) and (max-width: 1000px)
{
    
    .topOfPageMenu
    {
        position: sticky;
    }
    
    
}