.navigation, .top-nav, .notificationR {
    display: none;
}

.small-screen {
    display: none;
}

@media only screen and (max-width: 650px) {
    .big-screen {
        display: none;
    }

    .small-screen {
        display: initial;
    }

    body {
        height: auto;
    }

    #body {
        padding-left: 0;
    }

    .site-nav {
        display: none;
    }

    .notif-body, .user-body {
        display: none;
    }

    .top-nav {
        z-index: 25;
        background-color: #42424a;
        position: sticky;
        top: 0;
        box-shadow: 0 0 .25rem rgba(0,0,0,.5);
        display: flex;
        justify-content: space-between;
        padding: .5rem 1rem;
    }

    .top-nav-menu {
        display: flex;
        align-items: center;
        user-select: none;
        cursor: pointer;
    }

    .top-icon {
        color: #efefef;
        font-size: 2rem;
        user-select: none;
    }

    .resp-notif {
        display: flex;
        align-items: center;
        padding: 0 .5rem;
        border-radius: .25rem;
        background-color: rgba(255,255,255,.25);
        cursor: pointer;
        user-select: none;
    }

        .resp-notif.new {
            background-color: #459345;
            color: #fff;
            box-shadow: inset 0 0 0.2rem rgba(0,0,0,.5)
        }

    .navigation {
        display: initial;
        height: 100%;
        background-color: #42424a;
        position: fixed;
        width: 100%;
        top: 0;
        padding-top: calc(35px + 1rem);
        z-index: 10;
        transform: translateX(100%);
        transition: all .2s ease-in-out;
    }

        .navigation.show {
            transform: translateY(0%);
        }

    .navigation-ul {
        height: 100%;
        list-style-type: none;
        padding: .3rem;
        display: flex;
        flex-direction: column;
        gap: .3rem;
        flex-grow: 1;
        margin-bottom: .3rem;
    }

    .navigation-li {
        padding: 0;
        background-color: rgba(255,255,255,.25);
        border-radius: .25rem;
    }

    .navigation-a {
        color: #fff;
        display: flex;
        align-items: center;
        text-decoration: none;
        height: 50px;
        padding: .5rem;
        width: 100%
    }

        .navigation-a:hover {
            color: #fff;
        }

        .navigation-a span {
            margin: 0 .5rem 0 0;
            font-size: 30px;
        }

        .navigation-a label {
            cursor: pointer;
            font-size: 20px;
            font-weight: 500;
        }

    .notificationR {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: #42424a;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 150;
        transform: translateX(100%);
        transition: all .2s ease-in-out;
    }

        .notificationR.show {
            transform: translateX(0%);
        }

    .notif-headerR {
        color: #efefef;
        font-family: Dosis;
        font-size: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        padding: 10px;
        letter-spacing: 1px;
    }

        .notif-headerR span {
            font-size: 2rem;
            user-select: none;
        }

    .notif-contentR {
        padding: 5px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: small;
        overflow-y: auto;
    }

    .text-sm {
        font-size: small;
    }

    .div-sm {
        line-height: 15px;
    }

    .div-recibo {
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
        .div-recibo:first-child {
            border-top: 1px solid rgba(0,0,0,.2);
        }
}