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

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

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

    /* -------------------- SECTION: 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_justifyContentSpaceEvenly{
        justify-content: space-evenly;
    }
    .smallScreen_alignItemsCenter{
        align-items: center;
    }



    /* -------------------- SECTION: Buttons -------------------- */

    /* ---------- Regular Button Styles ---------- */





    /* ---------- Selection Tabs ---------- */
    .selectionTab1{
        font-size: 14px;

        width: 150px;
        height: 40px;

        margin: 5px;
    }




}


/* ---------- Containers, Heroes, Bins ---------- */
@media only screen and (max-width: 1000px) {


    /* -------------------- SECTION: Containers -------------------- */

    /* ---------- Containers: Heroes ---------- */

    /* ----- Containers - Heroes: Centered Hero ----- */
    .hero_Centered{
        width: calc(96% - 40px); max-width: calc(900px - 40px); min-width: calc(550px - 40px);
        padding: 20px;
    }

    /* ----- Containers - Heroes: Horizontal Hero ----- */
    .hero_Horizontal{
        width: calc(95% - 80px); max-width: calc(900px - 80px); min-width: calc(550px - 80px);
        height: fit-content;
        min-height: 250px;

        margin: 20px 0;
        padding: 60px 40px;
    }
    .hero_Horizontal .imageBin{

        width: calc(50% - 20px); min-width: 200px;
    
        margin: 0 10px;
    
        /* border: 1px solid blue; */
    }
    .hero_Horizontal .contentBin{
        width: 50%; min-width: 200px; max-width: 700px;
    }



    /* -------------------- SECTION: Bins -------------------- */

    /* ---------- Bins: Text Bins ---------- */

    .bodyTextBin{
        width: calc(100% - 20px); max-width: 800px;
    }








    /* ----- Extra ----- */
    .mapBinSmall{
        width: 400px;
        height: 300px;
    }
}


/* ---------- Cards ---------- */
@media only screen and (max-width: 1000px) {
    .MykroAppCardLarge{
        display: flex;
        flex-direction: column;
        align-items: center;
        /* user-select: none; */
    
    
        width: 90%; max-width: 90%; min-width: 90%;
        height: fit-content; min-height: 500px;
    
        padding: 20px 10px;
        margin: 15px 0;
    
        /* background-color: whitesmoke; */
        border: 1px solid lightgray;
        border-radius: 5px;
        /* border: 4px solid green; */
    }

    .MykroAppCardLarge .expandableBin{
        padding: 0;
    }
    .MykroAppCardLarge .featuresBin {

        width: 100%;
        padding: 0;
    }
    .MykroAppCardLarge .featuresListBin{
        border-radius: 0;
    }

    .MykroAppCardLarge .featureTitle{
        text-align: left;
        font-size: 12px;
        line-height: 22px;
    
        height: calc(30px - 8px);
        width: calc(200px - 8px);
    
        padding: 4px;
    }
    .MykroAppCardLarge .featureDescription{
        text-align: center;
        font-size: 12px;
        line-height: 30px;
    
        height: 30px;
        width: calc(50% - 100px - 2px);
    }

}

/* ---------- Header, Footer, & Dropdown Menu ---------- */
@media only screen and (max-width: 1000px) {

    /* -------------------- Header -------------------- */

    .headerLarge{
        height: fit-content;
    }
    .headerContentBin{
        border-bottom: none;
    }





}


/* ---------- Cart ---------- */
@media only screen and (max-width: 1000px){
    .accountOptions{
        width: fit-content; min-width: fit-content; max-width: 200px;
    }




    #cart_list{
        width: 100%;
    }
    .cartListItem_Labels{
        width: 100%; max-width: 100%;
    }


    #cartAccountSection{
        flex-direction: column;
    }
    .cartAccountSectionBin{
        width: 100%; min-width: 100%;
        margin: 30px 0;
    }
}

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

    .basicForm1{
        width: calc(100% - 40px); min-width: calc(100% - 40px); max-width: calc(100% - 40px);

        padding: 20px;
    }
    .basicForm1_label{
        font-size: 14px;
        margin-bottom: 4px;
    }

    .basicForm3{
        width: calc(100% - 80px); max-width: calc(600px - 80px); min-width: 0px;
    }

    .paymentCheckoutContentBin{
        width: calc(90% - 40px); min-width: calc(90% - 40px); max-width: calc(600px - 40px);
    }


    .largeForm1{
        width: 600px;
    }



    .form_textinput_full1 {
        font-size: 12px;
        width: calc(100% - 10px);
        padding: 0 0 5px;
        margin: 0;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
    
        border: 1px solid transparent;
        border-bottom: 2px solid gray;
        border-radius: 2px;
    
        transition: 0.2s ease-in-out;
    }
    .form_textinput_full1:focus{
        outline: none;
        background-color: #fbfbfb;
        border: 1px solid transparent;
        border-bottom: 2px solid var(--secondary);
    }
}


