html, body, form { height: 100%; }
body { margin: 0; padding: 0; font-family: 'Open Sans'; font-weight: 300; background: url('/images/bg1.jpg?v=2') no-repeat center center fixed; background-size: cover; font-size: 16px; }

.snap { background-image: url(/images/bg-snap.jpg); }
.snap .logo img { max-width: 400px; }
.snap .form { background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.snap #loginForm .row { margin: 0 !important; height: 370px; }
.snap #loginForm .row > div { height: 100%; }
.snap .fgp { display: none; }

.bwa .logo img { max-width: 200px; }
.bwa .form { background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.bwa #loginForm .row { margin: 0 !important; height: 370px; }
.bwa #loginForm .row > div { height: 100%; }
.bwa .fgp { display: none; }

.container-splash { max-width: 900px; margin: 0 auto; }
.container-splash .logo { margin: 25% auto 90px; text-align: center; }
.container-splash .wrapper { margin: 50px; }
.container-splash .btn { border-radius: 1px; font-size: 16px; padding: 10px; font-weight: bold; }
.container-splash .btn-white { background: #fff; color: #000; }
.container-splash label, .container-splash .control-label { font-weight: 300; text-align: left !important; }
.container-splash h2, .container-splash p { margin-bottom: 20px; }
.container-splash .input-group-addon { background: #eee; color: #000; border-radius: 1px; }
.container-splash .form-control { border-radius: 1px !important; box-shadow: none; }

.snap .container-splash .bg-primary { background: linear-gradient(150deg, #e7be65, #b9881e); }
.snap .container-splash .btn-gold { background: #e7be65; color: #000; padding-left: 20px; padding-right: 20px; }
.snap .container-splash a, .container-splash a:hover { color: #e7be65; }

.bwa .container-splash .bg-primary { background: linear-gradient(150deg, rgb(0, 154, 214), #002a54); }
.bwa .container-splash .btn-gold { background: #002a54; color: #fff; padding-left: 20px; padding-right: 20px; }
.bwa .container-splash a, .container-splash a:hover { color: rgb(0, 154, 214); }

.container-splash .message { margin: 60px 0; position: relative; background-color: #fff; text-align: center; padding: 15px 0px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.container-splash .message .message-head { position: relative; margin-top: -30px; height: 80px; width: 80px; display: inline-block; float: left; overflow: hidden; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; background: #fff;  box-shadow: 0 0 10px rgba(0,0,0,.1); }
.container-splash .message .message-head img { object-fit: contain; width: 80%; height: 100%; }
.container-splash .message p { margin: 0; font-weight: bold; }

.login-form h4 { margin: 0 0 15px 0; }
.login-form hr { color: #fff; background: #fff; border: none; border-top: solid 1px #ccc; }
.login-form section { width: 400px; background: white; border-radius: 5px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.login-form section .form-horizontal { padding: 25px; }
.login-form input[type=text], input[type=password] { border: solid 1px #ccc; padding: 10px; background: white !important; width: 250px; border-radius: 3px; font-family: 'Open Sans'; outline: none; }
.login-form input[type=text]:focus, input[type=password]:focus { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.login-form input[type=submit] { width: 267px; font-family: 'Open Sans'; margin-top: 15px; font-weight: bold; background-color: #eeba60 }
.login-form .form-group { position: relative; }
.login-form .required { position: absolute; top: 25px; right: 7px; font-size: 16pt; font-weight: 800; }
.login-form .login { margin: 25px auto; width: 265px; }
.login-form label { font-size: 9pt; text-transform: uppercase; }
.login-form .control-label { display: block; margin: 10px 0 5px; }
.login-form .text-danger { color: rgb(255, 0, 0); font-weight: bold; }
.login-form .center { text-align: center; }
.login-form .btn { border: solid 1px rgba(0,0,0,0.15); background: #eee; border-radius: 3px; outline: none; padding: 10px; color: #555; }
.login-form .btn:active { box-shadow: inset 0 2px 6px rgba(0,0,0,0.15); }
.login-form .logo { text-align: center; }
.login-form .logo img { max-width: 200px; }

.loading { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(255,255,255,.7); z-index: 999; font-size: 26pt; color: #e7be65; display: none; }
.loading .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }

@media only screen and (max-width: 992px) { 
    
    .snap { background-attachment: fixed; }
    .snap #loginForm .row { height: auto; }
    .snap .col-register, .snap .col-login { padding: 1px; }
    .snap .col-login { order: 0; }
    .snap .col-register { order: 1; }

    .bwa { background-attachment: fixed; }
    .bwa #loginForm .row { height: auto; }
    .bwa .col-register, .snap .col-login { padding: 1px; }
    .bwa .col-login { order: 0; }
    .bwa .col-register { order: 1; }

    .form > .row { display: flex; flex-direction: column; }
}

@media only screen and (max-width: 440px) {
    
    section { width: auto; }

    .container-splash .logo { margin: 15% auto 30px; }
    .container-splash .wrapper { margin: 30px; }

    .container-splash .form-control, .container-splash .input-group { margin-bottom: 5px; }
    .container-splash .input-group .form-control { margin-bottom: 0; }

    .snap #loginForm .row > div { height: 100%; }
    .bwa #loginForm .row > div { height: 100%; }
    

}