@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/*@import url(https://fonts.googleapis.com/css?family=Lobster);*/

/*@keyframes g{0%{transform: translateX(0) }
25%{transform: translateX(300px) }
75%{transform: translateX(-300px) }
to{transform:translateX(0)}
}*/

@keyframes g{0%{transform: translateX(0) translateY(0) }
15%{transform: translateX(300px) translateY(-150px)}
30%{transform: translateX(300px) translateY(150px)}
70%{transform: translateX(-300px) translateY(-150px)}
85%{transform: translateX(-300px) translateY(150px)}
to{transform:translateX(0) translateY(0)}
}

@keyframes r{0%{transform: translateX(0) translateY(0) }
20%{transform: translateX(-300px) translateY(100px)}
40%{transform: translateX(-300px) translateY(-100px)}
60%{transform: translateX(300px) translateY(100px)}
80%{transform: translateX(300px) translateY(-100px)}
to{transform:translateX(0) translateY(0)}
}


body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
    margin: 0;
}

.header
{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.pageSection
{
    text-align: center;
    overflow: hidden;
    position: relative;
}

.section--login
{
    background: black;
}

.pageSection h3
{
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    font-size: 40px;
}

.pageSection img
{
    margin-top: 20px;
}

.section--login:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-repeat: no-repeat;
    /*background: radial-gradient(circle at center,rgba(0,0,0,0) 10%,rgba(217, 81, 0, .8) 40%,rgba(255,148,0, 1) 70%);*/
    background: radial-gradient(circle at center,rgba(0,0,0,0) 10%,rgba(0, 124, 156, .8) 40%,rgba(129,201,213, 1) 70%);
    /*background: radial-gradient(circle at center,rgba(255,185,0,.6) 10%,rgba(252,99,107,.8) 40%,rgba(255,109,146,0) 70%);*/
}

@media (min-width: 600px) {
    .pageSection h3 {
        width: 400px;
    }
    .section--login:before {
        animation: g 40s linear infinite;
    }

    /*.section--login:after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background-repeat: no-repeat;
        background: radial-gradient(circle at center,rgba(255,148,0,.4) 0,rgba(217,81,0,.2) 15%,rgba(255,255,255,0) 20%);
        animation: r 75s linear infinite;
    }*/
}

h1{
    font-family: "Open Sans";
    font-size: 50px;
    /*color: #5af;
    text-shadow: 0 0 50px #fff;*/
    color: #fff;
    text-shadow: 1px 4px 6px #eb9, 0 0 1px #000, 0 0 50px #fb7;
    margin-top: 20px;
    z-index: 1;
    position: relative;
}

/* Set width on the form input elements sin bvce they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.field-validation-error {
    color: #ff5900;
}

.validation-summary-errors {
    color: rgba(255, 120, 40, 1);
}

.input-validation-error {
    border: 2px solid rgba(255, 120, 40, 1);
    background-color: #fee;
}

input[type="checkbox"].input-validation-error {
    outline: 2px solid #f00;
}

.input-form {
    z-index: 1;
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    display: inline-block;
    text-align: left;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid #0ebae3;
    border-radius: 5px;
    box-shadow: 0 0 14px 7px rgba(0, 170, 255, 0.2), inset 0 0 4px 2px rgba(0, 170, 255, 0.4);
}

.input-form input[type="text"],
.input-form input[type="email"],
.input-form input[type="password"],
textarea
{
    border: solid 1px #579;
    background-color: rgba(2, 2, 2, 0.2);
    width: 300px;
    color: #BDF;    
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    -webkit-transition: border ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
          transition: border ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
}

.input-form input[type="text"]:focus,
.input-form input[type="email"]:focus,
.input-form input[type="password"]:focus
{
    outline: 0;
    -webkit-box-shadow: inset 0 4px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 4px 2px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    /*box-shadow: 0 0 2px 1px rgba(0, 170, 255, 0.2);*/
}

.input-form-heading
{
    /*background-color: rgba(255, 89, 0, 0.2);*/
    color: #fff;
    border: none;
    border-bottom: 1px solid rgba(255, 89, 0, 0.4);
}


.input-form-body {
    padding: 10px;
}



.input-form label {
    color: #fff;
    display: inline-block;
    width: 13ex;
}

.input-form-heading h2 {
    font-family: "Open Sans";
    margin: 0;
    padding: 10px;
    font-size: 28px;
}

.input-form-control:-moz-placeholder {
  color: #666;
}

.input-form-control::-moz-placeholder {
  color: #666;
}

.input-form-control:-ms-input-placeholder {
  color: #666;
}

.input-form-control::-webkit-input-placeholder {
  color: #666;
}

.input-form-group {
    margin-bottom: 15px;
}

.input-form .btn {
    background-color: rgba(0, 0, 0, 0);
    border: 2px solid rgba(255, 148, 0, 1);
    /*color: rgba(255, 148, 0, 1);*/
    color: #0ebae3;
    padding: 5px 10px;
    font-family: "Open Sans";
    font-weight: bold;
    font-size: 16px;
    -webkit-transition: box-shadow ease-in-out 0.1s;
    transition: box-shadow ease-in-out 0.1s;
    border-radius: 4px;
    text-decoration: none;
}

.input-form .btn:hover {
    box-shadow: 0 0 14px 7px rgba(255, 148, 0, 0.2),
        inset 0 0 4px 2px rgba(255, 148, 0, 0.4);
    text-shadow: 1px 1px 1px #000;
}

.input-form .btn:active
{
    outline: none;
    box-shadow: 0 0 14px 7px rgba(255, 148, 0, 0.4),
        inset 0 0 4px 2px rgba(255, 148, 0, 0.6);
    color: rgba(255, 192, 0, 1);
    padding: 6px 9px 4px 11px;
    text-shadow: 0 0 10px rgba(255, 192, 0, 1);
}

.align-right
{
    text-align: right;
}

a.help, a.help:visited
{
    text-decoration: none;
    color: #888;
    font-style: italic;
    font-size: 12px;
    margin: -10px 20px 20px 0; 
    display: block;
}

a.help:hover
{
    color: #ccc;
}

span
{
    color: #ccc;
}

.input-form a.btn {
    border: 2px solid #5af;
    color: #5af;
}

.input-form a.btn:hover {
    box-shadow: 0 0 14px 7px rgba(80, 160, 255, 0.2),
        inset 0 0 4px 2px rgba(80, 160, 255, 0.4);
}

.input-form a.btn:active
{
    outline: none;
    box-shadow: 0 0 14px 7px rgba(80, 160, 255, 0.4),
        inset 0 0 4px 2px rgba(80, 160, 255, 0.6);
    color: rgba(92, 192, 255, 1);
    padding: 6px 9px 4px 11px;
    text-shadow: 0 0 10px rgba(80, 160, 255, 1);
}