/* main.css */

.login-instruct {
        display: block;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;

        max-width: 900px;
        padding: 15px;

        text-align: center;

        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: 1%;
        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;

        margin-top: 8%;
}

.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){
        .help-section { 
                position: relative; 
                padding: 0px;
        }

}

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

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