/* =========================================================
   RD3 CORE — MOBILE
   Responsive and mobile-specific styles
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .content-area {

        flex-direction: column !important;

        padding: 1%;

    }


    .sidebar {

        max-width: 100%;

    }


    .site-main {

        flex: 1;

    }


    .main-sidebar-wrapper {

        width: 100%;

    }

    .content-area {

        gap: 0;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       HEADER
       ===================================================== */

    .site-header > .container {

        padding-top: 1rem;

        padding-bottom: 1rem;

    }


    /* =====================================================
       LOGO
       ===================================================== */

    .site-header .logo {

        padding-left: 0;

    }


    .site-header .logo img {

        max-width: 80px;

    }


    /* =====================================================
       TITLE / TAGLINE
       ===================================================== */

    .Title-Tagline {

        margin-left: 12px;

        flex: 1;

    }


    .site-title h1 {

        font-size: 1.7rem;

    }


    .site-tagline p {

        font-size: 0.9rem;

    }


    /* =====================================================
       DESKTOP NAVIGATION
       ===================================================== */

    .main-nav.desktop {

        display: none;

    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .menu-toggle {

        display: inline-block;

    }


    /* =====================================================
       MOBILE NAVIGATION
       ===================================================== */

    .mobile-nav {

        display: none;

    }


    body.menu-open .mobile-nav {

        display: block;

    }


    /* =====================================================
       SIDEBAR
       ===================================================== */

    .main-sidebar-wrapper {

        width: 100%;

    }


    .sidebar-toggle-button {

        display: inline-block;

        margin-bottom: 1rem;

    }


    /* =====================================================
       CONTENT AREA
       ===================================================== */

    .content-area {

        gap: 0;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {

    body {

        font-size: 15px;

    }


    .container {

        padding-left: 10px;

        padding-right: 10px;

    }


    .site-header .logo img {

        max-width: 70px;

    }


    .Title-Tagline {

        margin-left: 10px;

    }


    .site-title h1 {

        font-size: 1.5rem;

    }


    .site-tagline p {

        font-size: 0.85rem;

    }

}