/* ============ [01] MAX-WIDTH : 1024PX START ============ */
@media only screen and (max-width: 1024px)
{
    /* ============ [01] CLASS START ============ */
    .details-resource {
        width: 100%;
        margin: 0 auto;
    }

    .hero-resource-section {
        flex-direction: column;
        gap: 30px;
    }

    .hero-resource-section-left {
        width: 100%;
        order: 2;
    }

    .hero-resource-section-right {
        width: 100%;
        order: 1;
        text-align: center;
    }
    /* ============ [01] CLASS END ============ */


    /* ============ [02] HEADER START ============ */
    .header_resource_menu_item_none {
        display: none;
    }
    /* ============ [02] HEADER END ============ */


    /* ============ [03] MAIN START ============ */

    /* ==== Slider ==== */
    .slider_resource {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .slider_resource_flex {
        flex-direction: column;
        gap: 30px;
    }

    .slider_resource_left {
        order: 2;
        width: 100%;
    }

    .slider_resource_right {
        order: 1;
        width: 100%;
        text-align: center;
    }

    .slider_resource_form_input {
        width: 100%;
        height: 38px;
        padding: 0 10px;
        font-size: 0.9em;
        outline: none;
        color: #30323a;
        border: 1px solid #636303;
        box-shadow: var(--b-shadow);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
    }

    .slider_desc_desc {
        margin-top: 15px;
    }
    /* ==== /Slider ==== */

    /* ==== Details Resource ==== */
    .details-resource-section h2,
    .details-glossary-left h2 {
        font-size: 1.85em;
    }

    .details-resource-section h3,
    .details-glossary-left h3 {
        font-size: 1.5em;
    }

    .details-resource-section h4,
    .details-glossary-left h4 {
        font-size: 1.4em;
    }
    /* ==== /Details Resource ==== */

    /* ==== Glossary ==== */
    .glossary-main {
        text-align: left;
    }

    .glossary-item {
        margin: 0;
    }

    .details-glossary {
        display: block !important;
    }

    .details-glossary-left {
        width: 100%;
    }

    .details-glossary-right {
        width: 100%;
        background-color: #f5f5f5;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        padding: 15px 20px;
        position: relative;
        top: 0;
        right: 0;
        margin-top: 55px;
    }
    /* ==== /Glossary ==== */

    /* ============ [03] MAIN END ============ */


    /* ============ [04] FOOTER START ============ */
    /* ============ [04] FOOTER END ============ */
}
/* ============ [01] MAX-WIDTH : 1024PX END ============ */


/* ============ [02] MAX-WIDTH : 991PX START ============ */
@media only screen and (max-width: 991px)
{
    /* ============ [03] MAIN START ============ */

    /* ==== Details Resource ==== */
    .details-resource-section h2,
    .details-glossary-left h2 {
        font-size: 1.75em;
    }

    .details-resource-section h3,
    .details-glossary-left h3 {
        font-size: 1.45em;
    }

    .details-resource-section h4,
    .details-glossary-left h4 {
        font-size: 1.35em;
    }
    /* ==== /Details Resource ==== */

    /* ============ [03] MAIN END ============ */
}
/* ============ [02] MAX-WIDTH : 991PX END ============ */


/* ============ [03] MAX-WIDTH : 767PX START ============ */
@media only screen and (max-width: 767px)
{
    /* ============ [03] MAIN START ============ */
    .hero-resource-user {
        margin-top: 25px;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .hero-resource-user-img {
        height: 65px;
        width: 65px;
    }

    /* ==== Details Resource ==== */
    .details-resource-section h2,
    .details-glossary-left h2 {
        font-size: 1.6em;
    }

    .details-resource-section h3,
    .details-glossary-left h3 {
        font-size: 1.35em;
    }

    .details-resource-section h4,
    .details-glossary-left h4 {
        font-size: 1.3em;
    }
    /* ==== /Details Resource ==== */

    /* ==== /Glossary ==== */
    .details-glossary-aside-title {
        font-size: 1.35em;
    }
    /* ==== /Glossary ==== */

    /* ============ [03] MAIN END ============ */
}
/* ============ [03] MAX-WIDTH : 767PX END ============ */


/* ============ [04] MAX-WIDTH : 576PX START ============ */
@media only screen and (max-width: 576px)
{
    /* ============ [02] HEADER START ============ */
    .header_resource_flex {
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
    }
    /* ============ [02] HEADER END ============ */

    /* ============ [03] MAIN START ============ */

    /* ==== Details Resource ==== */
    .details-resource-section h2,
    .details-glossary-left h2 {
        font-size: 1.5em;
    }

    .details-resource-section h3,
    .details-glossary-left h3 {
        font-size: 1.35em;
    }

    .details-resource-section h4,
    .details-glossary-left h4 {
        font-size: 1.28em;
    }

    /* ==== /Glossary ==== */
    .details-glossary-aside-title {
        font-size: 1.35em;
    }

    .details-glossary-aside-link {
        display: block;
        padding: 15px 4px;
        font-size: 1.05em;
        position: relative;
        overflow: hidden;
    }
    /* ==== /Glossary ==== */
    /* ==== /Details Resource ==== */

    /* ============ [03] MAIN END ============ */
}
/* ============ [04] MAX-WIDTH : 576PX END ============ */


/* ============ [05] MAX-WIDTH : 480PX START ============ */
@media only screen and (max-width: 480px)
{
    /* ============ [03] MAIN START ============ */

    /* ==== Details Resource ==== */
    .details-resource-section h2,
    .details-glossary-left h2 {
        font-size: 1.4em;
    }

    .details-resource-section h3,
    .details-glossary-left h3 {
        font-size: 1.3em;
    }

    .details-resource-section h4,
    .details-glossary-left h4 {
        font-size: 1.25em;
    }
    /* ==== /Details Resource ==== */

    /* ==== /Glossary ==== */
    .details-glossary-aside-title {
        font-size: 1.3em;
    }
    /* ==== /Glossary ==== */

    /* ==== Glossary ==== */
    .glossary-link {
        display: block;
        padding: 15px 20px;
        font-size: 1.1em;
        position: relative;
        overflow: hidden;
    }
    /* ==== /Glossary ==== */

    /* ============ [03] MAIN END ============ */
}
/* ============ [05] MAX-WIDTH : 480PX END ============ */


/* ============ [06] MAX-WIDTH : 390PX START ============ */
@media only screen and (max-width: 390px)
{
    /* ============ [02] HEADER START ============ */

    .header_resource_logo {
        width: 95px;
        height: 22px;
        background-image: var(--logo-mobile-url);
        background-position: left;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* ============ [02] HEADER END ============ */


    /* ============ [03] MAIN START ============ */

    /* ==== Details Resource ==== */
    .details-resource-section h2,
    .details-glossary-left h2 {
        font-size: 1.3em;
    }

    .details-resource-section h3,
    .details-glossary-left h3 {
        font-size: 1.25em;
    }

    .details-resource-section h4,
    .details-glossary-left h4 {
        font-size: 1.2em;
    }
    /* ==== /Details Resource ==== */

    /* ==== Glossary ==== */
    .glossary-link {
        display: block;
        padding: 15px 20px;
        font-size: 1.05em;
        position: relative;
        overflow: hidden;
    }

    .details-glossary-aside-title {
        font-size: 1.25em;
    }
    /* ==== /Glossary ==== */

    /* ============ [03] MAIN END ============ */


    /* ============ [04] FOOTER START ============ */

    .footer_resource_logo {
        width: 95px;
        height: 22px;
        background-image: var(--logo-mobile-url);
        background-position: left;
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* ============ [04] FOOTER END ============ */
}
/* ============ [06] MAX-WIDTH : 390PX END ============ */