body {
}


m-navigation {
    bottom: 0;
    top: inherit;
    height: 60px;
    box-shadow: 0 -2px 3px rgba(0,0,0,0.12), 0 -2px 2px rgba(0,0,0,0.24);
}

    m-navigation m-printer {
        display: none;
    }

    m-navigation .container > m-flex {
        width: 100%;
    }
    m-navigation m-flex.sC {
        width: 100%;
        height: 60px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 .5em;
    }
    m-navigation span {
        font-size: .75em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-align: center;
    }
    m-navigation m-flex.sC:hover,
    m-navigation m-flex.sC.active {
        border-bottom: 6px solid #00AEEF;
    }

m-body[data-label="Primary"] {
    padding-top:0;
}

@media screen and (min-width: 768px) {

    m-navigation {
        bottom: inherit;
        top: inherit;
        box-shadow: none;
        height: 50px;
    }

        m-navigation m-printer {
            display: inherit;
        }

        m-navigation .container > m-flex {
            width: initial;
        }

        m-navigation m-flex.sC {
            width: inherit;
            height: 50px;
            text-overflow: inherit;
            overflow: inherit;
            white-space: inherit;
            padding: 0 1em;
        }

        m-navigation span {
            font-size: .8em;
            text-overflow: inherit;
            overflow: inherit;
            white-space: inherit;
            width: inherit;
            text-align: center;
        }

        m-navigation m-flex.sC:hover,
        m-navigation m-flex.sC.active {
            border-bottom: 2px solid #00AEEF;
        }

    m-body[data-label="Primary"] {
        padding-top: 50px;
    }

}