@media screen and (max-width: 576px) { /* Small devices (landscape phones, max 576px)*/
    .body-style {
        //background-color: grey; 
    }

    h1 { 
    font-size: 10pt !important; 
    }

    .NoDisp {
        display: none;
    }
    .page-background-class {
        background-repeat: no-repeat;
        background-size: cover;
        height: 200px;
        background-position: bottom;
    }

    .FrameNameLabel {
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
        vertical-align: middle;
        color: #135296;
    }

    .form-label {
        font-size: 10px;
        text-transform: uppercase;
    }

    .headerLabel {
        font-size: 15px;
        text-transform: uppercase;
        font-weight: bold;
    }
}


@media screen and (min-width: 577px) and (max-width: 768px) { 
    .body-style {
        //background-color: yellow; 
    }
    .index-image {
        width: stretch;
        max-height: 300px;
    }
    h1 { 
    font-size: 18pt !important; 
    }
}



@media screen and (min-width: 769px) and (max-width: 992px) { /* Large devices (desktops, 992px) */
    .body-style {
        //background-color: pink; 
    }
    .index-image {
        width: stretch;
        max-height: 400px;
    }
    h1 { 
    font-size: 24pt !important; 
    }
    .container {
        justify-content: flex-start;
        flex-direction: column;
    }

    .headerLabel {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: bold;
        vertical-align: middle;
    }

    .FrameNameLabel {
        font-size: 19px;
        text-transform: uppercase;
        font-weight: bold;
        vertical-align: middle;
        color: #135296;
    }

    .form-label {
        font-size: 12px;
        text-transform: uppercase;
    }
}


@media screen and (min-width: 993px) and (max-width: 1399px) { /* X-Large devices (large desktops, 1200px and up) */
    .body-style {
         //background-color: red; 
    }
    .index-image {
        width: stretch;
        max-height: 500px;
    }
    h1 { 
    font-size: 26pt !important; 
    }
    .container {
        display: flex-column;
        flex-direction: row;
        overflow-x: auto;
        justify-content: center;
        padding: 0px 3px 0px 3px;
        text-transform: uppercase;
    }

    .ModalWidth {
        max-width: 800px;
    }

    .pageTitleTop {
        font-size: 20px;
        font-style: italic;
        text-transform: uppercase;
        /*color:inherit;*/
    }

    .floatingLabel {
        font-size: small;
        font-style: italic;
        text-transform: uppercase;
        color: grey;
    }

    .myTextStyles {
        text-transform: uppercase;
    }

    .page-background-class {
        background-repeat: no-repeat;
        background-size: cover;
        height: 950px;
        background-position: top;
    }

    .headerLabel {
        font-size: 35px;
        text-transform: uppercase;
        font-weight: bold;
        vertical-align: middle;
    }

    .FrameNameLabel {
        font-size: 25px;
        text-transform: uppercase;
        font-weight: bold;
        vertical-align: middle;
        color: #135296;
    }

    .form-label {
        font-size: 12px;
        text-transform: uppercase;
    }
}

@media screen and (min-width: 1400px) { /* XX-Large devices (larger desktops, 1400px and up) */
    .body-style {
        //background-color: blue; /*try change to color*/

    }
    .index-image{
        width : stretch;
        max-height:600px;
    }

    h1 { 
    font-size: 35pt !important; 
    }
    .container {
        display: flex-column;
        flex-direction: row;
        overflow-x: auto;
        justify-content: center;
        padding: 0px 3px 0px 3px;
        text-transform: uppercase;
    }

    .ModalWidth {
        max-width: 800px;
    }

    .pageTitleTop {
        font-size: 20px;
        font-style: italic;
        text-transform: uppercase;
        /*color:inherit;*/
    }

    .floatingLabel {
        font-size: small;
        font-style: italic;
        text-transform: uppercase;
        color: grey;
    }

    .myTextStyles {
        text-transform: uppercase;
    }

    .page-background-class {
        background-repeat: no-repeat;
        background-size: cover;
        height: 950px;
        background-position: top;
    }
}