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


/* ---------------------------------------- SECTION: Digital Ads ---------------------------------------- */

@media only screen and (max-width: 600px) {
    .digitalAdImg_Leaderboard{
        object-fit: contain;

        width: 320px; max-width: 320px;
        height: 50px;

    }
}

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

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


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

    /* ----- Header Types ----- */
    h1{
        font-size: 42px;
    }
    h2{
        font-size: 40px;
    }
    h3{
        font-size: 32px;
    }
    h4{
        font-size: 28px;
    }
    h5{
        font-size: 24px;
    }
    h6{
        font-size: 20px;
    }

    p{
        font-size: 14px;
    }
    

    /* ----- 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;
    }

    /* ----- Buttons ----- */
    .mobileBtnStyle1{
    font-size: 18px;
    text-wrap: nowrap;

    min-width: 0px;
    width: fit-content;
    min-width: 100px; max-width: 200px;


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

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


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



    
}


/* ---------------------------------------- SECTION: 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: 75px;
    }

    /* ----- Images ------ */
    .imageMain{
        width: 300px;
    }
    .imageLarge{
        width: 250px;
    }


    


    

}


/* ---------------------------------------- SECTION: Headers & Footers ---------------------------------------- */
@media only screen and (max-width: 600px) {
    .headerMedium{
        min-height: 70px; height: 70px; max-height: 70px;
    }
    .headerLogoBin1{
        align-items: center;
        object-fit: contain;
        min-width: 200px; max-width: 200px;
    }
    .accountOptions{
        width: fit-content; min-width: 100px;
    }
}

/* ---------------------------------------- SECTION: Features ---------------------------------------- */

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

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

    .pricingCard1{
        min-width: calc(190px - 4px); width: calc(190px - 4px);
        height: calc(400px - 4px);

        margin: 0 5px;
        padding: 0 5px;
    }


    /* ----- 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;

    }
    
}


/* ---------------------------------------- SECTION: Forms ---------------------------------------- */

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

    
    /* ----- Large Forms ----- */
    .client_LargeForm1{
        width: calc(100% - 20px);
        height: fit-content;

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


    .client_LargeForm1_FieldBin{

        width: calc(100% - 10px - 2px);
        height: fit-content;
    
        padding: 20px 5px;
        margin: 0;
        margin-bottom: 40px;
    
        border: 1px solid lightgray;
    }

    .client_LargeForm1_entryBin{
    
        width: 100%;
    
        margin: 10px 0;
        padding: 0;
    
    }

    .client_basicForm1{
        width: calc(100% - 40px);
        height: fit-content;
    
        margin: 10px auto;
        padding: 20px 20px;
    }






    /* ---------- Input styles ---------- */
    .client_form_input_style1{
        font-size: 24px;
        min-width: calc(100% - 20px - 2px); max-width: calc(100% - 20px - 2px);
        height: 30px;

        padding: 10px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
        border: 1px solid white;
        border-radius: 0;
        /* border-bottom: 2px solid var(--primary); */
        border-bottom: 2px solid black;
        /* border-radius: 5px; */
    
        transition: 0.2s ease-in-out;
    }

}



/* ---------------------------------------- SECTION: Modals ---------------------------------------- */

@media only screen and (max-width: 600px) {
    .cms_modalContentBinLarge1{
        width: calc(95% - 20px);
        height: fit-content;
        min-height: 60%;
        max-height: calc(90% - 40px);
    
        padding: 20px 10px;
        margin: auto;

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


    .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;
    }
}



/* ---------------------------------------- SECTION: Containers, Bins, and Heroes ---------------------------------------- */

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

    /* -------------------- CONTENT: Bins -------------------- */

    /* ----- Mykro Editor Preview Bin ----- */
    .previewBin{
        width: calc(100% - 8px);
    }

    .cms_modalPreviewBinContent{

        width: calc(98% - 20px);
        height: calc(90% - 100px);

        padding: 20px 10px;
    
    }

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

    .bodyTextBin{
        width: 95%;
    }


    /* ----- Heroes ----- */

    .cms_centeredHero{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    
        min-width: calc(90% - 40px); max-width: calc(90% - 40px);
        height: fit-content; min-height: 300px;
    
        margin: 60px 0;
        padding: 30px 20px;
    
        /* border: 1px solid red; */
    }

    .cms_horizontalHero{
        
        min-width: calc(90% - 40px); max-width: calc(90% - 40px); 
        height: fit-content; min-height: 250px;
    
        margin: 60px 0;
        padding: 20px 20px;
    
        /* border: 1px solid red; */
    }

}


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

@media only screen and (max-width: 600px) {
    .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; */
    }
}



/* ---------------------------------------- SECTION: Formatting ---------------------------------------- */

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

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

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

        width: 100%;
    }

    .mobile_alignItemsCenter{
        align-items: center;
    }

    .mobile_vertFitContent{
        height: fit-content;
    }

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

    .mobile_noMargin{
        margin: 0;
    }
    .mobile_noPadding{
        padding: 0;
    }
    .mobile_noPaddingHoriz{
        padding-left: 0;
        padding-right: 0;
    }
    .mobile_noPaddingVert{
        padding-top: 0;
        padding-bottom: 0;
    }

    .mobile_noShadow{
        box-shadow: none;
    }
    .mobile_noBorder{
        border: 1px solid rgba(0, 0, 0, 0);
    }

}


