#masthead > .translate {width: 100%; padding: 12px 0;}

@media all and (max-width: 899px) {
    .translate { padding: 24px 40px;}
    .translate dl {
        display: flex;
    }
}
@media all and (min-width: 900px) {
    #masthead .translate,
    .translate dl {
        display: flex;
        justify-content: flex-end;
    }
}

.translate dt,
.translate dd
{ font-size: 16px; line-height: 1; color:#6E6E6E }

.translate dt:not(:last-child),
.translate dd:not(:last-child) { margin-right: 0.5em;}
.translate dd a { color: var(--black);}

.translate dd a {
    transition: all 0.2s ease; cursor: pointer;
    text-decoration: none;
    padding: 0 0;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 0 1px, 100% 1px;
    transition: background-size .5s;

}

/*.translate dd a:not(.current) ,*/
.translate dd a.current
{ background-size: 100% 1px, 100% 1px }


.translate dd a:hover {
    background-size: 100% 1px, 100% 1px

}
.translate dd a:focus-visible {box-shadow: 0 0 0 1px white, 0 0 0 3px var(--orange); border-radius: 2px; }


#mainmenu { width:100%;   }

@media all and (max-width: 899px) {

    #masthead > .translate { display: none !important; }
}