/* -------------------------------------------------- Mobile Devices (0 - 600px) -------------------------------------------------- */


/* --------------------> CONTENTS
/* ----------> Elements / objects
/* ----------> Formatting


/* ---------------------------------------- Pages ---------------------------------------- */


/* -------------------- Pages: HOME -------------------- */

@media only screen and (max-width: 600px) {
    #homepageMainContent{
        padding: 20px 0;
        min-height: fit-content;
    }
    #mainTitle{
        margin: 0;
    }
    #mainImage {
        width: 300px;
        margin: 0;
    }

    #product_container{
        padding: 0;
    }
}



/* ---------------------------------------- Elements / Objects ---------------------------------------- */


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

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

    /* ----- Mobile Dropdown Navigation ----- */
    #menu_listBin_mobile{
        flex-direction: column;
    }
    .dropDownMenu1_list{
        height: fit-content;
        width: calc(100% - 20px);

        padding: 0 10px;
        margin: 0;

    }
    .dropDownMenu1_listTitle{
        min-width: calc(100%);

        padding: 20px 0;
        margin: 0;
        border-bottom: 1px solid lightgray;

    }
    .dropDownMenu1_listTitle:hover{
        cursor: pointer;
        background-color: whitesmoke;
    }
    .dropDownMenu1_listItem{
        display: none;
        width: calc(100%);

        border-bottom: 1px solid lightgray;
    }
    .dropDownMenu1_listTag{
        display: inline-block;
        min-width: 100%;
    }


    /* .menu_listBin{
        justify-content: space-evenly;
    } */


}

/* ---------- Text, Buttons, and Formatting ---------- */
@media only screen and (max-width: 600px) {


    /* -------------------- Text -------------------- */

    /* ---------- Standard Headers ---------- */
    h1{
        font-size: 46px;
        line-height: 69px;
        font-weight: 400;
    }
    h2{
        font-size: 40px;
        line-height: 60px;
        font-weight: 400;

    }
    h3{
        font-size: 34px;
        line-height: 51px;
        font-weight: 500;

    }
    h4{
        font-size: 28px;
        line-height: 42px;
        font-weight: 450;

    }
    h5{
        font-size: 22px;
        line-height: 33px;
        font-weight: 500;
    }
    h6{
        font-size: 18px;
        line-height: 27px;
        font-weight: 500;
    }

    p{
        font-size: 12px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
    }

    /* ---------- Custom Text Sizes ---------- */
    .mobileTextSize6{
        font-size: 6px;
        line-height: 9px;
    }
    .mobileTextSize8{
        font-size: 8px;
        line-height: 12px;
    }
    .mobileTextSize10{
        font-size: 10px;
        line-height: 15px;
    }
    .mobileTextSize12{
        font-size: 12px;
        line-height: 18px;
    }
    .mobileTextSize14{
        font-size: 14px;
        line-height: 21px;
    }
    .mobileTextSize16{
        font-size: 16px;
        line-height: 24px;
    }
    .mobileTextSize18{
        font-size: 18px;
        line-height: 27px;
    }
    .mobileTextSize22{
        font-size: 22px;
        line-height: 33px;
    }
    .mobileTextSize28{
        font-size: 28px;
        line-height: 42px;
    }
    .mobileTextSize34{
        font-size: 34px;
        line-height: 51px;
        line-height: 64px;
    }
    .mobileTextSize38{
        font-size: 38px;
        line-height: 51px;
    }
    .mobileTextSize42{
        font-size: 42px;
        line-height: 62px;
    }
    .mobileTextSize48{
        font-size: 48px;
        line-height: 72px;
    }
    .mobileTextSize52{
        font-size: 52px;
        line-height: 78px;
    }


    .bodyText_Tiny{
        font-size: 6px;
    }
    .bodyText_VerySmall{
        font-size: 8px;
    }
    .bodyText_Small{
        font-size: 10px;
    }
    .bodyText_Regular{
        font-size: 12px;
    }
    .bodyText_Large{
        font-size: 14px;
    }


    /* -------------------- Buttons -------------------- */

    /* ---------- Standard Buttons ---------- */

    /* -------------------- Buttons: Styles -------------------- */
    /* .btnStyle1{
        flex-wrap: nowrap;
        text-align: center;
        text-decoration: none;

        width: calc(250px - 40px);
        height: fit-content;

        padding: 10px 20px;
        margin: 5px;

        border-radius: 5px;
    }
    .btnStyleFit{
        flex-wrap: nowrap;
        text-align: center;
        text-decoration: none;
        letter-spacing: 0.05em;

        width: fit-content;
        max-width: fit-content;

        padding: 10px 1.5em;
        margin: 5px;

        border-radius: 5px;
    }
    .btnStyleFull{
        flex-wrap: nowrap;
        text-align: center;
        text-decoration: none;
        letter-spacing: 0.05em;

        width: calc(100%);

        padding: 10px 1.5em;
        margin: 5px;

        border-radius: 5px;
    } */

    /* .btnMicro {
        font-size: 10px;
    }
    .btnTiny {
        font-size: 10px;
    }
    .btnVerySmall{
        font-size: 16px;
    }
    .btnSmall{
        font-size: 18px;
    }
    .btnMedium{
        font-size: 22px;
    }
    .btnLarge{
        font-size: 26px;
    }
    .btnVeryLarge{
        font-size: 32px;
    } */










    .pricingCardBtn1{
        font-size: 18px;
        text-wrap: nowrap;
    
        min-width: 0px;
        width: calc(100% - 40px - 4px);
    
    
        margin: 0px;
        padding: 10px 20px;
    }
    .mobileBtnStyleFull{
        font-size: 18px;
        text-wrap: nowrap;
    
        min-width: 0px;
        width: calc(100%);
    
    
        margin: 0px;
        padding: 10px 20px;
    }

    /* ---------- Selection Tabs ---------- */

    .selectionTab1{
        font-size: 14px;
        width: 100px;
        height: 50px;
        border-radius: 5px;
    }

    .basicTab1{
        font-size: 12px;

        width: calc(150px - 10px); max-width: calc(150px - 10px);

        padding: 5px;
    }



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

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

        width: 100%;
    }

    .mobile_alignItemsCenter{
        align-items: center;
    }
    .mobile_alignItemsStart{
        align-items: flex-start;
    }
    .mobile_justifyContentStart{
        justify-content: flex-start;
    }

    .mobile_vertFitContent{
        height: fit-content;
    }

    .mobileHide{
        display: none;
    }
    .mobileShow{
        display: flex;
    }
    .mobileShowBlock{
        display: block;
    }
    .mobileNoMinWidth{
        min-width: 0px;
    }
    .vertBinSmall{
        min-width: 0px;
        width: 90%;
        /* max-width: 300px; */
        /* border: 1px solid green; */
    }

    /* #hamburgerMenu:hover{
        background-color: white;
    } */

}

/* ---------- Images ---------- */
@media only screen and (max-width: 600px) {

    /* ----- Icons ------ */
    .iconVerySmall{
        max-width: 24px;
        max-height: 24px;
    }
    .iconSmall{
        max-width: 36px;
        max-height: 36px;
    }

    /* ----- Logos ------ */
    .logoSmall{
        max-height: 40px;
    }
    .logoMedium{
        max-height: 45px;
    }
    .logoLarge{
        max-height: 50px;
    }
    .logoExtraLarge{
        max-height: 60px;
    }

    /* ----- Images ------ */
    .imageMain{
        width: 300px;
    }
    .imageLarge{
        width: 250px;
    }
    .imageMain{
        width: 90%; min-width: 90%; max-width: 90%;
    }

    .imageFit{
        min-width: none; width: fit-content; max-width: 100%;
        height: 100%;
        justify-self: flex-start;

    }


    


    

}

/* ---------- Features ---------- */
@media only screen and (max-width: 600px) {

    /* ----- Pricing Cards ----- */

    .pricingCard1{
        min-width: calc(300px - 10px - 4px); width: calc(300px - 10px - 4px);
        /* height: calc(400px - 4px); */

        margin: 0 10px;
        padding: 0 5px;
    }
    .pricingCard1 .pricingCardDescription{
        height: 80px; min-height: 80px;
    }


    /* ----- Feature Cards ----- */
    .featureCardSmall1{
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
    
        min-width: 200px;
        height: 250px;
    
        padding: 20px 0;
        margin: 0 10px;
    
        background-color: white;
        border: 2px solid lightgray;

    }
    
}

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

    /* -------------------- Form styles -------------------- */
    .basicForm1{
        width: calc(100% - 20px); min-width: calc(100% - 20px); max-width: calc(100% - 20px);
        padding: 10px;
        margin: 5px;
    }
    .basicForm1_label{
        font-size: 12px;
        margin-bottom: 4px;
    }

    .basicForm3{
        width: fit-content; max-width: calc(100% - 40px); min-width: 0px;
        height: fit-content;

        margin: 0;
        padding: 20px;
    }
    .basicForm3 label{
        font-size: 14px;
    }




    .custom_textField {
        width: calc(100% - 20px);
        height: calc(100% - 20px);

        padding: 10px;
    }
        



    /* -------------------- Form input widget styles -------------------- */
    .form_input_style1{
        width: calc(100% - 20px - 2px);
    }
}

/* ---------- Modals ---------- */
@media only screen and (max-width: 600px) {
    .modalContentBinLarge1{
        width: calc(95% - 60px);
        height: fit-content;
        min-height: 60%;
        max-height: calc(90% - 40px);
    
        padding: 20px 30px;
        margin: auto;
    
    }

    .modalContentBinSmall1{
        display: flex; 
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    
        width: calc(80% - 60px);
        min-width: calc(300px - 60px);
        height: fit-content;
        min-height: 100px;
    
        padding: 20px 30px;
    }
}

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


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

    .subContainer{
        padding: 40px 0;
    }

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

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

    /* ----- Containers - Heroes: Horizontal Hero ----- */
    .hero_Horizontal{
        flex-direction: column;
        width: calc(95% - 40px); max-width: calc(95% - 40px); min-width: calc(95% - 40px);
        height: fit-content;
        min-height: 250px;

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

        width: calc(100% - 20px); min-width: calc(100% - 20px);
        height: fit-content; max-height: fit-content;
    
        margin: 0 10px;
    
        /* border: 1px solid blue; */
    }
    .hero_Horizontal .contentBin{
        width: 100%; min-width: 100%; max-width: 100%;
    }




    .mapBinSmall{
        display: inline-block;
        width: 250px;
        height: 200px;
    }


    .basicListBin .listItem{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: start;
    
        width: calc(100% - 10px);
    
        padding: 5px;
        margin: 0;
        margin-bottom: 10px;
    }

    .basicListBin .label {
        display: inline-block;
        text-align: right;
        width: 100px; min-width: 100px;
        margin-right: 10px;
    }

    .basicListBin .labelLarge{
        display: flex;
        width: 100px;
        margin-right: 10px;
    }
    .basicListBin .contentLarge{
        display: inline-block;
        width: calc(100% - 100px);
        text-align: left;
    }


    .listItemLargeHoriz{
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap;

        width: calc(100% - 10px);
        height: fit-content; min-width: 200px;

        padding: 5px;
        margin: 0;
        margin-bottom: 20px;

        border: 1px solid var(--primary);
        border-radius: 5px;

        transition: 0.2s ease-in-out;
    }

    .listItemLargeHoriz .sectionLarge{
        display: flex;

        justify-content: center;

        width: 100%;
        height: fit-content;

        padding: 0;
        margin: 10px 0;
    }
    .listItemLargeHoriz .sectionSmall{
        display: flex;

        justify-content: center;
        align-items: center;

        justify-content: center;

        width: 100%;
        height: fit-content;

        padding: 0;
        margin: 10px 0;
    }



}

/* ---------- Cards ---------- */
@media only screen and (max-width: 600px) {


    /* -------------------- SECTION: Mykro App Cards -------------------- */

    .MykroAppCardLarge .featureTitle{
        font-size: 10px;
        width: 150px;
    }
    .MykroAppCardLarge .featureDescription{
        font-size: 10px;
        width: calc(50% - 75px - 2px);
    }



    /* -------------------- SECTION: Simple / standard cards -------------------- */


    
    .cardMedium1{
        width: calc(300px - 40px);
        height: calc(240px - 20px);
    }

    .cardMedium1_Wide{
        width: calc(90% - 40px);
        min-height: calc(240px - 20px);
        height: fit-content;
    
        margin: 0;
        padding: 18px;
    
        color: black;
        border: 2px solid lightgray;
        background-color: white;
    
        /* transition: 0.8s ease-in-out; */
    }
}

/* ---------- Cart, payments, and checkout ---------- */
@media only screen and (max-width: 600px) {

    /* ---------- Checkout ---------- */



    #checkoutHero{

        width: calc(95% - 20px);

        padding: 20px 10px;
    }


    .paymentCheckoutContentBin{
        width: 100%; max-width: 400px; min-width: 0px;
    }




}

/* ---------- Formatting ---------- */
@media only screen and (max-width: 600px) {
    .noPadding{
        padding: 0;
    }
    .noMargin{
        margin: 0;
    }
    .lightMargin{
        margin: 5px;
    }

    .mobile_noPadding{
        padding: 0;
    }

}

