/*========== media-queries.css ========== */


/* ========= portrait & landscape for smartphones media queries ======= */




/*  ===== smartphone landscape query ===== */

@media screen and (max-width:800px) and (max-height: 450px) {
    body {

    }
    #foot-nav img[height="40px"] {
        height: 0px;
        /*        border: 1px solid red;*/
    }
    #foot-nav {
        height: 12vh;
        /*        border: 1px solid yellow;*/
    }
    .foot-link label {
        position: relative;
        top: -2vh;

    }


}
 /*========== chat keyboard screen fix ==========*/

@media screen and (max-height: 450px){

    #header {

        display:none;
    }

    #chat-input {
        bottom: 12vh;

    }
    #landing-page {

        padding: 0px;
    }

    #chat-header{
        display: none;

    }

    #chat-output {
        top: 0px;
        height: 80vh;
    }
}

/* ======= smartphone portrait query ======*/

@media screen and (max-width:420px) and (max-height: 840px) { /* 740px */
    .foot-link label {

        font-size: 2vh;
    }

    .chat-input input, .chat-input button{

        font-size: 0.75em;
    }


}


/*Note: this is the standard iPad Fix. For Footer Icons in Landscape*/

@media screen and (min-width: 700px) and (min-height: 740px) {

    #foot-nav img[height="40px"] {
        height: 56px;

    }
    img.vert-al-ball {
        width: 200px;
    }
    .foot-link {
        font-size: 3vh;

    }
}


/* ======= w3-include-html sections styling ======== */

@media screen and (min-width: 320px) {
    .menu-head,
    .menu-item {
        min-width: 320px;
        width: 100vw;
    }
    #foot-nav {
        width: 100%;
    }
}

@media screen and (min-width: 480px) {
    .menu-head,
    .menu-item {
        width: 480px;
        margin: 0 auto;
    }
    #foot-nav {
        width: 480px;
        margin: 0 auto;
    }
}