
/* ------------------------------ Heroes, Cards, and Features ------------------------------ */
.hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom: 3rem;
    height: fit-content;
    width: 40rem;
    /* border: 2px solid red; */
}
.hero2{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */

    height: fit-content;
    width: 100%; max-width: 1400px;

    margin: 0;
    /* border: 2px solid red; */
}
.hero2 img{
    max-width: 40%;
    /* max-height: 40rem; */
    object-fit:cover;
    margin: 0;
}
.hero3{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: 60rem;   
    height: 20rem;

    border: 2px solid lightgray;
    border-radius: 4px;
    background-color: whitesmoke;
    box-shadow: 5px 5px 5px -5px black;
}
.hero3 h1{
    color: var(--primary);
}
.hero3 h4{
    width: 50rem;
}

/* Standard hero bins */
.heroBinHoriz{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* justify-content: space-evenly; */
    margin: 0;

    width: 40%;
    max-width: 600px;
    /* border: 2px solid blue; */
}

/* ---------- Cards ---------- */
.cardSmall1{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 150px;

    margin: 1rem;
    padding: 10px;

    color: black;
    border: 2px solid lightgray;
    border-radius: 10px;
    box-shadow: 5px 5px 10px -5px black;
    background-color: white;

    transition: 0.8s ease-in-out;
}
.cardMedium1{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    height: 300px;

    margin: 0;
    padding: 18px;

    color: black;
    border: 2px solid lightgray;
    background-color: white;

    /* transition: 0.8s ease-in-out; */
}
.cardMedium1_Wide{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 890px;
    height: 300px;

    margin: 0;
    padding: 18px;

    color: black;
    border: 2px solid lightgray;
    background-color: white;

    /* transition: 0.8s ease-in-out; */
}


/* ------------------------------ MYRKO App Cards and Thumbnails ------------------------------ */
.MykroAppCardSmall{
    display: flex;
    /* align-items: center; */
    user-select: none;

    width: 250px;
    height: 90px;

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

    /* color: white; */
    color: black;
    background-color: white;
    /* background-color: var(--primary); */
    /* border: 4px solid var(--primary); */
    border: 2px solid lightgray;
    /* border-radius: 5px; */

    transition: 0.1s ease-in-out;

}
.MykroAppCardSmall:hover{
    cursor: pointer;
    background-color: var(--primary_lite);
}
.MykroAppCardSmall .icon {
    width: 75px;
    max-height: 75px;

    margin-right: 10px;
}
.MykroAppCardSmall .vertBin{
    height: 50px;
    width: fit-content;
    max-width: 135px;
    margin: 10px 0 0 10px;
}


.MykroAppCardMedium{
    display: flex;
    flex-direction: column;
    align-items: start;

    user-select: none;

    min-width: 250px; max-width: 250px;
    height: 250px;

    padding: 0;
    margin: 5px;

    /* background-color: whitesmoke; */
    border: 1px solid black;
    /* border-radius: 5px; */

    transition: 0.1s ease-in-out;

}
.MykroAppCardMedium .img{
    object-fit: cover;
    max-width: 250px;    
    max-height: 150px;
}
.MykroAppCardMedium:hover{
    cursor: default;
    height: 350px;
    background-color: whitesmoke;
}




.MykroAppCardLarge{
    display: flex;
    flex-direction: column;
    align-items: center;
    user-select: none;


    width: 80%; max-width: calc(1000px - 12px); min-width: calc(750px - 12px);
    height: fit-content; min-height: 500px;

    padding: 20px 5px;
    margin: 15px 0;

    /* background-color: whitesmoke; */
    border: 1px solid lightgray;
    border-radius: 5px;

}
/* .MykroAppCardLarge:hover{
    cursor: pointer;
    background-color: lightgray;
} */
/* .MykroAppCardLarge .icon {
    width: 75px;
    max-height: 75px;

    margin-right: 10px;
}
.MykroAppCardLarge .horizBin{
    justify-content: start;
    align-items: center;
    height: 100%;
}
.MykroAppCardLarge .vertBin{
    height: 50px;
    width: fit-content;
} */


.MykroAppThumbnail{
    display: inline-block;
    user-select: none;

    width: 100px;
    height: 100px;

    padding: 2px 5px;
    margin: 5px;

    /* background-color: var(--secondary_lite); */
    background-color: white;
    border: 4px solid var(--secondary_lite);
    border-radius: 5px;
    transition: 0.2s ease-in-out;
}
.MykroAppThumbnail:hover{
    cursor: pointer;
    background-color: var(--secondary_lite);
}
.thumbnailSelected{
    background-color: var(--secondary_lite);
    border: 1px solid var(--primary);
}

/* ------------------------------ Features and Pricing ------------------------------ */

/* ---------- Basic Feature Bin ---------- */
.cms_feature_bin_basic_1{

    display: flex;
    flex-direction: column;
    align-items: center;

    /* overflow-y: scroll; */

    width: calc(100% - 20px); max-width: calc(100% - 20px);
    height: fit-content; min-height: 250px;

    padding: 20px 10px;

    /* background-color: white; */
}
/* ----- Feature "Bucket" ----- */
.cms_feature_bin_basic_1_content{

    display: flex;

    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;

    width: calc(80% - 20px); max-width: calc(1400px - 20px); min-width: calc(800px - 20px);
    height: fit-content; min-height: 200px;

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

    /* overflow-y: scroll; */

    border-radius: 10px;
    /* background-color: white; */
    /* border: 1px solid red; */
}

/* ----- Basic Card ----- */
.cms_feature_card_BC{
    
    display: flex;
    flex-direction: column;

    width: calc(320px - 40px - 2px); min-width: calc(320px - 40px - 2px);
    height: calc(350px - 40px - 2px);

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

    border: 1px solid lightgray;
    border-radius: 5px;

    transition: 0.2s ease-in-out;

}
.cms_feature_card_title_bin_BC{
    /* display: flex; */
    /* align-items: center; */

    width: 100%;
    height: 60px;

    margin-bottom: 5px;

    /* border: 1px solid red; */
}
.cms_feature_card_body_BC{
    /* display: flex; */
    /* align-items: center; */

    width: 100%;
    height: 160px;

    /* border: 1px solid red; */
}
.cms_feature_card_btnBin_BC{
    justify-content: center;
    height: 80px;
}
.cms_feature_card_image_BC{
    object-fit: cover;
    height: inherit;

    max-height: 200px;
}
/* .cms_feature_card_BC:hover{
    cursor: pointer;

} */








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

    width: fit-content;
    height: fit-content;

    border: 1px dashed var(--primary);
}



.cms_featureBinObjAlign_L{
    justify-content: flex-start;
}
.cms_featureBinObjAlign_C{
    justify-content: safe center;
}
.cms_featureBinObjAlign_R{
    justify-content: flex-end;
}

.cms_featureBinOverflowX_WR{
    flex-wrap: wrap;
}
.cms_featureBinOverflowX_SC{
    overflow-x: scroll;
}



/* Horizontal scroll bin for cards */
.featureBin1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;

    overflow-x: scroll;

    width: 90%; max-width: 1400px;
    height: fit-content;
    min-height: 400px;


    padding: 20px 5px;

    /* background-color: white; */
    /* border: 1px solid gray; */
}


/* Feature cards */
.featureCardSmall1{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

    width: 250px; 
    height: 300px;

    padding: 20px 0;
    margin: 0 20px;

    background-color: white;
    /* background-color: var(--primary); */
    border: 2px solid lightgray;
    /* border-radius: 10px; */

    transition: 0.3s ease-in-out;
}
/* .featureCardSmall1:hover{
    height: 325px;
    min-width: 250px;
} */

/* Pricing cards */
.pricingCard1{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

    max-width: 350px; min-width: 350px;
    height: 700px;

    /* padding: 1rem; */
    margin: 0 5px;
    padding: 0 25px;

    background-color: white;
    /* background-color: var(--primary); */
    border: 2px solid white;
    /* border-radius: 10px; */

    transition: 0.1s ease-in-out;
}
.pricingCard1:hover{
    cursor: default;
    border: 2px solid var(--primary);
    background-color: whitesmoke;
    /* min-width: 405px; */
    /* height: 555px; */
}

.cardBannerFull{
    font-size: 20px;
    line-height: 38px;
    text-align: center;
    height: 40px;
    height: fit-content;
    width: calc(100%);

    padding: 4px 0;
    margin: 0;

    /* border: 1px solid red; */
}
.pricingCardDescription{
    min-height: 60px; max-height: 60px;

    /* border: 1px solid blue; */
}


/* App specific colors */







