/* -------------------------------------------------- Small Screens (601px - 1000 px) -------------------------------------------------- */

/* -------------------- Text, Buttons, and Formatting -------------------- */

@media only screen and (max-width: 1000px) {


    /* ---------- Text ---------- */
    h1{
        font-size: 52px;
    }
    h2{
        font-size: 46px;
    }
    h3{
        font-size: 38px;
    }
    h4{
        font-size: 30px;
    }
    h5{
        font-size: 24px;
    }
    h6{
        font-size: 22px;
    }

    p{
        font-size: 14px;
    }


    .text-tiny {
        font-size: .7em;
    }
    
    .text-small {
        font-size: .85em;
    }
    
    .text-big {
        font-size: 1.4em;
    }
    
    .text-huge {
        font-size: 1.8em;
        /* color: green; */
    }


    /* ---------- Formatting ---------- */

    .smallScreenHide{
        display: none;
    }
    .smallScreenShow{
        display: flex;
    }

    .smallScreen_convertBinToHoriz{
        display: flex;
        flex-direction: row;

        width: 100%;
    }

    .smallScreen_convertBinToVert{
        display: flex;
        flex-direction: column;

        width: 100%;
    }

    .smallScreen_fullWidth{
        width: 100%;
    }
    .smallScreen_90Width{
        width: 90%;
    }
    .smallScreen_80Width{
        width: 80%;
    }
    .smallScreen_70Width{
        width: 70%;
    }

    .smallScreen_justifyContentStart{
        justify-content: flex-start;
    }
    .smallScreen_justifyContentCenter{
        justify-content: center;
    }
    .smallScreen_alignItemsCenter{
        align-items: center;
    }


}


/* ---------- Containers, Bins, and Cards ---------- */
@media only screen and (max-width: 1000px) {
    .mapBinSmall{
        width: 400px;
        height: 300px;
    }

    /* -------------------- Main Containers & Heroes -------------------- */
    .cms_horizContainer{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50px 0;
    }

    /* ---------- Sub-element bins for main containers & heroes ---------- */

    /* ----- Feature Bins ----- */
    .cms_feature_bin_basic_1_content{
        min-width: calc(100% - 20px);
        max-width: calc(100% - 20px);

        padding: 40px 5px;
        margin: 10px 0;

        /* border: 1px solid red; */
        /* overflow-x: scroll; */
    }


    /* ----- Feature Cards ----- */
    .cms_feature_card_BC{
        width: calc(260px - 40px - 2px); min-width: calc(260px - 40px - 2px);
        height: calc(360px - 40px - 2px);

        /* margin: 10px 10px; */
    }
    .cms_feature_card_title_bin_BC{
        width: 100%;
        height: 40px;
    }
    .cms_feature_card_body_BC{
        width: 100%;
        height: 180px;
    }





    .cms_vertBinMedium{
        width: calc(95% - 20px); min-width: calc(95% - 20px); max-width: calc(95% - 20px);
    }

    .cms_horizontalHero{
        flex-wrap: wrap;
    }


    /* ----- Common Text and Object Bins ----- */
    .cms_subheaderBin{
        width: calc(95% - 10px);
        max-width: calc(95% - 10px);
    }



    .cms_vertContentBin1{ /* ----- Used for horizontal hero ----- */
        display: flex;
        flex-direction: column;
        
        min-width: calc(100% - 20px); max-width: calc(100% - 20px);
        height: fit-content;
    
        margin: 10px 0;
        padding: 10px;
        /* border: 1px solid green; */
    }
}



/* ---------- Forms ---------- */
@media only screen and (max-width: 1000px) {

    .client_LargeForm1{
        width: calc(100% - 80px);
        max-width: calc(1200px - 80px);
        height: fit-content;

        margin: 10px 0px;
        padding: 20px 40px;
    }

    .client_LargeForm1_FieldBin{
        display: flex;
        flex-direction: column;
    
        width: calc(100% - 40px - 2px);
        height: fit-content;
    
        padding: 20px;
        margin: 0;
        margin-bottom: 40px;
    
        border: 1px solid lightgray;
    }
}