@media screen and (min-width: 651px) and (max-width: 1024px){
    
    body{
        font-size: 1rem !important;
    }
    
    #msgBox{
        width: 90% !important;
    }

    .mobil-nav-bar{
        display: block !important;
        position: absolute;
        font-size: 1rem;
        padding: 0.5rem;
        left: 0.5rem;
        top: 0.5rem;
        color: var(--navbarcolor);
        background: var(--navbarback);
        border-radius: 0.3rem;
        transition: 0.3s linear;
        z-index: 101;
    }
    .mobil-nav-bar.nav-open{
        background: var(--navbackopen) !important;
    }
    .mobil-nav-bar-icon.mobil-nav-open::before{
        content: '\f00d';
    }
    
    
    main > article,
    main > aside{
        width: 100% !important;
        display: block !important;
        margin: 0.625rem 0 0.625rem 0 !important;
    }
    header > section .headerText{
        font-size: 1.4rem !important;
    }
    header > section .headerSlogan{
        font-size: 1rem !important;
    }

    #navBack{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100vh;
        background: #192e5b;
        opacity: .4;
        z-index: 98;
        display: none;
    }
    #navBack.nav-back-open{
        display: block !important;
    }
    nav{
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        min-height: 100%;
        transition: 0.3s linear;
        z-index: 100;
    }
    nav.navigation-open{
        left: 0;
    }
    nav > ul{
        display: block !important;
        text-align:  center;
    }
    nav > ul > li{
        padding: 1rem;
    }
    nav > ul > li > a:hover{
        background: none !important;
    }
    nav > ul > li > a.active{
        border-bottom: none !important;
        background: var(--navbackhover);
    }
    
    footer > section ul{
        display: block !important;
        text-align: center;
    }
}