.login {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
    background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=1 );
    background-position: center;
}
.loginbox {
    background: #7abcff;
    background: -moz-linear-gradient(-45deg,  #7abcff 0%, #60abf8 44%, #4096ee 100%);
    background: -webkit-linear-gradient(-45deg,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
    background: linear-gradient(135deg,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=1 );
    padding: 15px;
    width: 100%;
    max-width: 400px;
    margin: 4% auto 0 auto;
    position: relative;
    border-radius: 10px;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 3px 0px rgba(0,0,0,0.2), inset 2px 2px 3px 0px rgba(0,0,0,0.2);

}

.loginheader { height: 120px; margin:auto;text-align: center;}
.loginform { margin-top: 20px; text-align: center;}
.loginbox h1 { font-size: 30px; letter-spacing: 1px; color: #555; font-weight: normal; padding-top: 10px; }
.loginbox .logo { display: block; color: #666; letter-spacing: 1px; font-size: 18px;}
.logo img { height:100px; }
.loginbox p { margin: 10px 0 0 0; }
.loginbox label { display: block; color: #666; letter-spacing: 1px; font-size: 18px; }

.loginbox input {
    padding: 12px 10px; background: white; color: darkgray;
    font-family: Arial, Helvetica, sans-serif; margin-top: 8px; font-size: 15px; border: 0; width: 340px;
    -moz-box-shadow: 0 2px 0 #444;
    -webkit-box-shadow: 0 2px 0 #444;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 3px 0px rgba(0,0,0,0.2), inset 2px 2px 3px 0px rgba(0,0,0,0.2);
    outline: none;
}

.loginbox button {
    background: rgb(180,227,145);
    background: -moz-linear-gradient(top,  rgba(180,227,145,1) 0%, rgba(97,196,25,1) 50%, rgba(180,227,145,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);
    background: linear-gradient(to bottom,  rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 );
    padding: 10px 20px; font-size: 18px; border: 0; letter-spacing: 1px; color: white; width: 40%;
    -moz-box-shadow: 1px 1px 3px #222;
    -webkit-box-shadow: 1px 1px 3px #222;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 3px 0px rgba(0,0,0,0.2), inset 2px 2px 3px 0px rgba(0,0,0,0.2);
    cursor: pointer;
}

.loginbox button.default { background: #999; color: #333; }
.loginbox button.hover { background: #ccc; color: #000; }
.loginbox button:active { background: #111; color: #fff; }
.loginerror { color: #990000; background: #fbe3e3; padding: 0 10px; overflow: hidden; display: none; }
.loginerror { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.loginerror p { margin: 10px 0; }

.radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.title { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; }

input[type="text"],input[type="password"] {
    padding: 12px 10px;
    background: white;
    color: darkgray;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 8px;
    font-size: 15px;
    border: 0;
    width: 95%;
    -moz-box-shadow: 0 2px 0 #444;
    -webkit-box-shadow: 0 2px 0 #444;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2), inset -2px -2px 3px 0px rgba(0,0,0,0.2), inset 2px 2px 3px 0px rgba(0,0,0,0.2);
    outline: none;"
}


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

    body { font-size: 11px; }
    button, input, select, textarea { font-size: 11px; }

    .loginbox { width: auto; margin: 10px; }
    .loginbox input { width: 80%; }
    .loginbox button { width: 80%; }
}