@media screen and (min-width: 700px) and (max-width: 1024px) {
    #container {
        background: none;
        min-height: 100%;
    }
    .pgl {
        margin: 15% auto 0;
        padding: 50px 0 0;
        width: 96%;
    }
}
@media screen and (min-width: 450px) and (max-width: 700px) {
    #container {
        background: none;
        min-height: 100%;
    }
    .pgl {
        margin: 10% auto 0;
        padding: 10px 0 0;
        width: 96%;
    }
    footer {
        display: block;
        text-align: center;
        padding: 20px 0;
    }
    h3.jd3 {
        font-size: 50px;
    }
    #logiform {
        margin: 7px auto 1px;
    }
    #logiform nav {
        margin: 30px 0 0;
    }
}
@media screen and (min-width: 50px) and (max-width: 450px) {
    #container {
        background: none;
        min-height: 100%;
    }
    .pgl {
        margin: 23% auto 0;
        padding: 50px 0 0;
        width: 96%;
    }
    h3.jd3 {
        font-size: 35px;
    }
    h4.jd3 {
        font-size: 13px;
    }
    #logiform {
        margin: 7px auto 1px;
    }
    #logiform nav {
        margin: 30px 0 0;
    }
    #logiform nav a,
    #logiform nav input {
        margin: 5px 7px;
    }
}