﻿html, body {height:100%}
body {display:flex; flex-direction:column}
input[type="submit"] {width:100%; font-size:14px}
body .headerCell {flex:0 1 auto}
.contentOuterOuter {flex:1 0 auto}
.contentOuter.margin12 {margin:0}
.contentOuter {height:100%}
#loginFlexParent {display:flex; height:100%; background-image:url("../images/login-bg.jpg"); background-size:cover; background-repeat:no-repeat; background-position:right center}
#loginAside, #loginFormOuter {height:100%; padding:20px; box-sizing:border-box; display:flex; flex-direction:column}
#loginAside {padding:60px; align-items:center}
#loginFormOuter {flex:0; min-width:40%}
#loginAside>div:nth-child(1), #loginAside>div:nth-child(3), #loginFormOuter>div:nth-child(1), #loginFormOuter>div:nth-child(3) {flex:1}
#loginAside>div:nth-child(2), #loginFormOuter>div:nth-child(2) {flex:0 0 auto}
#loginFormOuter>div:nth-child(2) {align-self:start; width:80%; background-color:white; border-radius:15px; padding:25px}
#loginAside>.inner {width:50%}
#loginAside>.inner>.top {color:white; text-shadow: 0px 2px 8px #00000080}
#loginAside>.inner>.top h1 {font-size:40px; font-weight:500; line-height:44px}
#loginAside>.inner>.top h2 {font-size:24px; font-weight:450; margin:20px 0}
#loginAside>.inner>.bottom .learnMore {color:white; background-color:black; border-color:black; width:60%; justify-content:center}
#backLink {font-size:16px; text-decoration:none; padding-bottom:30px; font-weight:bold; display:none}
form div.row > label, label {font-weight:bold; font-size:16px; line-height:18px;}
form div.row > label {padding-top:15px; padding-bottom:8px;}
#rememberRow, input[type="submit"] {margin-top:15px; margin-bottom:8px}
#rememberRow label {position:relative; top:-2px;}
#invalidUserNamePasswordCombination {color:red; font-weight:bold; display:none}
.copyright {display:none}
#loginFormOuter .bottomLinks, #loginFormOuter .bottomLinks>a {margin-top:8px}
#loginFormOuter .bottomLinks>a {display:block; text-align:center}
#logInLink {display:none}

@media (max-width:800px)
{
    #loginFlexParent {flex-flow:column-reverse}
    #loginFormOuter {width:auto; padding:0}
    #loginFormOuter>div:nth-child(2) {border-radius:0; width:100%; box-sizing:border-box}
    #loginAside {width:auto}
    #loginAside>.inner {width:auto}
    #loginAside>.inner>.top h1 {font-size:24px; line-height:26.4px}
    #loginAside>.inner>.top h2 {font-size:18px; font-family: Rubik; line-height:20.8px}
}

h1 {font-size:32px; line-height:37px; font-weight:bold}
a, a:hover {color:#1876b5}
.divBox1, .divBox2 {padding:0; border-width:0; margin:0}
.divBox1 {color:black; background-color:transparent}