/* main.css */

#page_title
{
        display: block;
        max-width: 1500px;
        margin-top: 40px;
        margin-left:  auto;
        margin-right: auto;
        padding: 10px;

        font-weight: bold;
        font-size: 26px;
        text-align: center;
}

#login_instruct_section
{
        max-width: 320px;
        margin-top: 50px;
        margin-left:  auto;
        margin-right: auto;
        padding: 20px;

        background: #FFFFFF;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.help-section
{
        width: 360px;
        padding-top: 40px;
        margin: auto;
}

#help-text
{
        font-family: "Roboto", sans-serif;
        font-size: 10px;
        color: #888888;
        text-align: center;

        width: 100%;
        margin: auto;
}

.login-section
{
        display: block;
        margin: auto auto 100px;
        width: 360px;
        padding-top: 4%;
}

.form
{
        z-index: 1;
        background: #FFFFFF;
        max-width: 100%;
        margin: 0px;
        padding: 45px;
        text-align: center;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input 
{
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #f2f2f2;
        width: 100%;
        border-radius: 10px;
        border: 0;
        margin-bottom: 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
}

.form input[type=submit]
{
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #6CB33F;
        width: 100%;
        border-radius: 10px;
        border: 0;
        padding: 15px;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-appearance: none;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input[type=submit]:hover,
.form input[type=submit]:active { background: #568F32; }
.form input[type=submit]:active { box-shadow: none; }

@media screen and (max-width:959px){
        #banner       { width:100%; }
        img           { width:100%; }
        .help-section 
        { 
                position: relative; 
                padding: 0px;
        }

}

@media screen and (max-width:375px){
        .login-section { width: 100%;     }
        .help-section  { width: 100%;     }
        #page_title    { font-size: 25px; } 
}

@media screen and (max-width:320px){
        #banner        { width: 300px; }
        .login-section { min-width: 300px; }
        .help-section  { width: 300px; }
}