/* mxtitlenew: flex layout so the side lines/dots always stay on one row with the title */
.mxtitlenew a {
    display: flex;
    align-items: baseline;
    direction: ltr;
}

/* Lines and dots are placed on the letters rather than on the line box: aligned to the
   text baseline and raised to the middle of the letters, in em so they follow the font
   size as it shrinks on phones. */
.mxtitlenew span.trow,
.mxtitlenew span.tdot {
    float: none;
    margin-top: 0;
    position: relative;
}

.mxtitlenew span.trow {
    flex: 1 1 0;
    width: auto;
    min-width: 20px;
    bottom: calc(0.28em - 1px);
}

.mxtitlenew span.tdot {
    flex: none;
    bottom: calc(0.28em - 5px);
}

.mxtitlenew span.tleft2 {
    margin-right: 8px;
}

.mxtitlenew span.tright1 {
    order: 1;
    margin-left: 8px;
}

.mxtitlenew span.tright2 {
    order: 2;
}

/* Phones: shrink the title with the screen so it stays on one line */
@media (max-width: 768px) {
    .mxtitlenew a {
        white-space: nowrap;
        font-size: min(24px, calc((100vw - 120px) / 13));
    }

    .mxtitlenew span.trow {
        min-width: 12px;
    }
}

@media (max-width: 600px) {
    .mxtitlenew {
        padding-top: 20px;
    }
}