@media (max-width: 1199px) {
    .h1, h1 {
        font-size: calc(1.3rem + 1.5vw);
    }

    .h2, h2 {
        font-size: calc(1.275rem + .9vw);
    }

    .h3, h3 {
        font-size: calc(1.25rem + .6vw);
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    #nav-primary {
        font-size: 12px;
        padding-right: 15px;
        padding-top: 26px;
    }

    .logout-desktop {
        font-size: 12px;
        padding-left: 15px;
        padding-right: 10px;
    }
}

@media (max-width: 991px) {
    #mNav {
        position: fixed;
        top: 0;
        z-index: 50;
        right: 0;
        width: 50%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-backface-visibility: hidden;
        overflow-x: hidden;
        overflow-y: auto;

        -webkit-transform: translate(100%, 0);
        -moz-transform: translate(100%, 0);
        -ms-transform: translate(100%, 0);
        -o-transform: translate(100%, 0);
        transform: translate(100%, 0);

        -webkit-transition: -webkit-transform 500ms ease;
        -moz-transition: -moz-transform 500ms ease;
        -ms-transition: -ms-transform 500ms ease;
        -o-transition: -o-transform 500ms ease;
        transition: transform 500ms ease;
    }

    #mNav .logout {
        padding: 0px 30px;
        font-size: 0.85em;
    }

    #mNav .logout .user {
        padding-bottom: 10px;
    }

    #mno {
        position: relative;
    }


    #mno:target #mNav {
        position: absolute;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        overflow: visible;
    }

    #mNav .menu-wrapper {
        background-color: #343a40;
        box-shadow: 0 0 20px rgba(2, 15, 27, .15);
        padding-top: 40px;
        min-height: 500px;
        color: #FFF;
    }

    #mNav .user a {
        color: #FFF;
    }

    #mNav .user a:hover {
        color: #FFF;
        text-decoration: underline;
    }

    #mNav .menu {
        clear: both;
        margin-top: 15px;
        padding-bottom: 90px;
    }

    #mNav .nav-trigger {
        margin: 36px 25px;
    }

    #mNav .nav-trigger .bar {
        background: none;
    }


    #mNav .close-trigger {
        width: 20px;
        height: 20px;
        position: relative;
        display: inline-block;
        float: right;
        margin-right: 30px;
    }

    #mNav .close-trigger:after, #mNav .close-trigger:before {
        content: '';
        height: 20px;
        border-left: 1px solid #000F23;
        position: absolute;
        left: 10px;
    }

    #mNav .close-trigger:after {
        transform: rotate(45deg);
    }

    #mNav .close-trigger:before {
        transform: rotate(-45deg);
    }

    #mNav li a, #mNav li input[type=submit] {
        padding: 15px 30px;
        display: block;
        text-transform: uppercase;
        text-decoration: none;
        color: #FFF;
        font-size: 0.795em;
    }

    #mNav li input[type=submit] {
        border: none;
        width: 100%;
        background-color: transparent;
        text-align: left;
    }

    #mNav ul.level_2 > li {
        border-bottom: 1px solid #E8E9E9;
    }

    #mNav ul.level_2 > li, #mNav ul.level_1.no-cat > li {
        border-bottom: 1px solid #E8E9E9;
    }

    #mNav ul.level_1.no-cat {
        border-top: 1px solid #E8E9E9;
        margin-top: 45px;
    }

    #mNav li.current {
        background-color: #ceb862;
    }

    #mNav ul.level_1 > li > h2 {
        font-weight: 700;
        font-size: 0.795em;
        text-transform: uppercase;
        color: #ceb862;
        padding: 15px 30px;
        margin: 30px 0 0;
        border-bottom: 1px solid #E8E9E9;
    }

    @-webkit-keyframes navOpen {
        0% {
            margin-right: 0%;
        }


        100% {
            margin-right: 100%;
        }
    }

    @keyframes navOpen {
        0% {
            margin-right: 0%;
        }


        100% {
            margin-right: 100%;
        }
    }
}

@media (max-width: 769px) {

    #content {
        padding: 1.5em 1em;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0;
        box-shadow: none;
    }

    #logo img {
        width: 131px;
        height: 55px;
    }

    #mNav {
        width: 95%;
    }

    #mNav .menu-wrapper {
        margin-top: 75px;
    }

    h1 {
        word-wrap: break-word;
    }

    .panel {
        padding: 15px;
    }


    .month-filter {
        text-align: right;
    }

    .month-filter .year-container {
        display: block;
    }

    .data-listing .label {
        text-align: left;
    }

    table.table {
        font-size: 80%;
        table-layout: fixed;
    }

    table.table .tooltip-area {
        font-size: 1em;
    }

    table.table td {
        width: auto;
    }

    td.amount {
        width: 40%;
    }

    table.table td.w15-xs, table.table th.w15-xs {
        width: 15%;
    }

    .form-heading {
        display: block;
    }

    .form-heading h2 {
        display: block;
        padding-right: 0;
    }
}