/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */

    .main {
        flex-direction: column;
    }

    .usa-in-page-nav-container {
        flex-direction: column;
        padding-left: 0px;
    }

    .usa-card-group {
        flex-direction: row;
    }

}

@media (min-width: 40em) {
    .usa-card-group {
        flex-direction: row;
    }

    .usa-in-page-nav {
        display: none;
    }
}

@media (min-width: 50em) {
    
    .usa-in-page-nav {
        display: block;
    }
}

@media (min-width: 55em) {
    .tablet-lg\:grid-col-6 {
        flex: 0 1 auto !important;
        width: 50% !important;
    }

}

@media (max-width: 60em) {
    
    .usa-ssa-ar-side-navigation {
        display: none;
    }
}



/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */

    .main-content {
        flex-direction: column;
    }

    .content, .sidebar {
        margin: 0.5rem 0;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */

    .main-content {
        flex-direction: column;
    }

    .content, .sidebar {
        margin: 0.5rem 0;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
}

@media (max-width: 1029px) {
    .usa-breadcrumb {
        margin: 0px;
        padding: 16px 0px;
    }
}
 

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

/* Hide first column on screens smaller than 640px */
@media only screen and (max-width: 640px) {
    .hide-on-small {
        display: none;
    }

    body {
        color: var(--disabled-typography-text, #1C1D1F);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 29.16px; /* 162% */
    }

    .usa-breadcrumb {
        color: var(--element-state-typography-hyperlink-blue, #005EA2);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 29.16px; /* 162% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .h1-heading {
        color: var(--high-contrast-typography-headers-h1, #112F4E);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 62.4px; /* 130% */
    }

    .app-rep-act-on-claim {
        align-self: stretch;
        color: var(--high-contrast-typography-headers-lead, #005EA2);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 300;
        line-height: 34px; /* 150% */
    }

    .app-rep-sub-text {
        color: var(--disabled-typography-text, #1C1D1F);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 29.16px; /* 162% */
        text-decoration-style: solid;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
    }

    .h2-heading {
        align-self: stretch;
        color: var(--high-contrast-typography-headers-h2, #1C1D1F);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 36.4px; /* 130% */
    }

    .h3-heading {
        color: var(--high-contrast-typography-headers-h3, #1C1D1F);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "Public Sans";
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 31.2px; /* 130% */
    }

    .template-max-width {
        margin: 0px 16px;
    }

    .usa-breadcrumb {
        padding: 1rem 0rem;
        margin: 0px;
    }

    .usa-in-page-nav-container {
        /*flex-direction: column;*/
        padding-left: 0px;
    }

    .grid-row {
        gap: 16px;
    }
}