/**********************************************************/
/**** LOGIN ***********************************************/
/**********************************************************/
body.login {
    display:        flex;
    text-align:     center;
    min-height:     100vh;
    padding:        0;
    background:     #7dc5ed;
    background:     linear-gradient(to bottom right, #080038, #0085ff);
    justify-content: center;
    align-items:    center;
}

#login {
    display:        flex;
    flex-direction: column;
    width:          90%;
    max-width:      22em;
    text-align:     center;
    background:     #fff;
    box-shadow:     0 0 2em rgba(0,0,0,.3);
    border-radius:  .5em;
    overflow:       hidden;
}

#login.error {
    animation:      errorShake 250ms ease-in-out;
}

#login::before {
    content:        '';
    display:        block;
    width:          100%;
    padding-top:    50%;
    background:     #aaa url(../images/header_logo.jpg) no-repeat center;
    background-size: cover;
}

#login form {
    padding:        1em;
}

#login p.error {
    padding:        1em;
    text-align:     center;
    font-weight:    bold;
    color:          #FF4564;
    visibility:     hidden;
}

#login.error p.error {
    visibility:     visible;
}

#login input.text {
    width:          100%;
    margin-bottom:  .7em;
    padding:        1em;
    color:          #000;
    border:         .1em solid rgba(0,0,0,.2);
    background:     rgba(0,0,0,.05);
    border-radius:  2em;
}
#login input.text:hover {
    border-color:   rgba(0,0,0,.4);
}
#login input.text:focus,
#login input.text:active {
    color:          #000057;
    border-color:   #000057;
}

#login.error form input.text {
    color:          red;
    border-color:   red;

}

#login input[type='submit'] {
    width:          auto;
    color:          #fff;
    margin:         .5em 0;
    padding:        1em 3em;
    line-height:    1em;
    color:          #fff;
    background:     #000057;
    border-radius:  2em;
}


/******************** ANIMATIONS ********************/
@keyframes errorShake {
    0%    { transform: translate3d(1em,0,0); }
    25%   { transform: translate3d(-1em,0,0); }
    50%   { transform: translate3d(.7em,0,0); }
    70%   { transform: translate3d(-.4em,0,0); }
    90%   { transform: translate3d(-.2em,0,0); }
    100%  { transform: translate3d(0,0,0); }
}

@media (max-height:450px) and (orientation:portrait)
{
    #login::before {
        display:    none;
    }
}
@media (max-width:900px) and (orientation:landscape)
{
    #login {
        flex-direction: row;
        max-width:      70%;
        align-items:    center;
    }
    #login form {
        min-width:      60%;
    }
}

@media (horizontal-viewport-segments: 2) {
    body.login { padding-right:  env(viewport-segment-right 0 0) }
}
@media (vertical-viewport-segments: 2) {
    body.login { padding-bottom:  env(viewport-segment-bottom 0 0) }
}