* {
    box-sizing: border-box;
}

body {
    font-family: Verdana;
    color: #494949;
    background-color: #afafaf;
    margin: auto;
    max-width: 1280px;
}

h2 {
    padding: .25em;
}

a:link {
    color: #3d3d3d;
    text-decoration: none;
    /* font-style: italic; */
}

a:visited {
    color: #7a7a7a;
}

a:hover {
    text-decoration: underline;
    color: #494949;
    ;
}

.ctct-btn {
    filter: grayscale(100);
}

.refs-body {
    float: left;
    width: 100%;
    border-top-width: medium;
    border-top-style: solid;
    border-color: #c0c4c0;
    font-size: smaller;
    margin-top: 2em;
    padding-top: .5em;
}

.bage-stripe {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #f5f9f5;
    padding-top: .5em;
    flex-wrap: wrap;
    margin: .5em 0;
}

.bage-logo {
    width: 15%;
    font-weight: bolder;
    text-align: center;
}

.bage-code {
    width: 15%;
    font-weight: bolder;
    text-align: center;
}

.bage-text {
    width: 70%;
    padding: 0 .5em;
    text-align: left;
}

.selected {
    color: #494949;
    ;
    text-decoration: none;
}

.canvas {
    overflow: auto;
    display: inline-flex;
    width: 100%;
    flex-direction: inherit;
}

.menu {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #dadada;
    font-style: normal;
    line-height: 1em;
    /* margin: 0 .5em 0 .5em; */
}

.menu-active {
    color: #494949;
    text-decoration: none;
    background-color: white;
    box-shadow: 0 -3px 3px 1px rgba(12, 121, 121, 0.62);
    position: relative;
    border-radius: 2px 2px;
    padding: 8px;
    margin-top: 7px;
    display: inline-block;
    width: 19%;
}

.body-link {
    border-bottom-style: dotted;
    border-bottom-color: #494949;
    ;
    border-bottom-width: thin;
}

.menu-item {
    background-color: #dadada;
    padding: 8px;
    margin-top: 7px;
    display: inline-block;
    width: 19%;
    color: darkgray;
}

.main {
    float: left;
    width: 75%;
    background-color: white;
}

.aboutright,
.right {
    background-image: linear-gradient(lightgray, gray, lightgray, white, white), url("/img/mm-19-bgw.png");
    float: left;
    float: left;
    padding: 15px;
    /* margin: .5em 0 0 .5em; */
    text-align: center;
    width: 37%;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-blend-mode: saturation;
}

.page-title {
    background-color: #dadada;
    padding: 15px;
    text-align: center;
    color: #7e7e7e;
    font-family: 'Bebas Neue', cursive;
    font-size: x-large;
    /* text-shadow: 0 2px 3px rgba(121, 121, 121, 0.62); */
}

.page-body {
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 2em;
    padding-bottom: 1em;
    word-break: break-word;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: x-large;
    line-height: 1em;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width:720px) {
    .menu,
    .main {
        width: 100%;
    }
    .right {
        display: none;
    }
    .aboutright {
        width: 100%;
        padding-top: 150px;
        padding-bottom: 150px;
    }
    .menu-text {
        display: none;
    }
    .menu a {
        background-color: #dadada;
        padding: 8px;
        margin-top: 7px;
        display: inline-block;
        width: 16%;
        color: darkgray;
        font-style: normal;
    }
    .canvas {
        overflow: auto;
        display: inline-flex;
        width: 100%;
        flex-direction: column-reverse;
    }
    .bage-logo {
        width: 50%;
        font-weight: bolder;
        text-align: center;
    }
    .bage-code {
        width: 50%;
        font-weight: bolder;
        text-align: center;
        padding-left: 1em;
    }
    .bage-text,
    .bage-text a {
        width: inherit;
        padding: 1em 1em;
        text-align: center;
        background: none;
    }
}