/** login.scss  Login styling for the CMS Capabilities website and its subsites.  */
/** _colors.scss  */
@keyframes loading { 0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } }
@keyframes seesaw { 0% { transform: rotate(0); }
  30% { transform: rotate(15deg); }
  60% { transform: rotate(-12deg); }
  80% { transform: rotate(5deg); }
  0% { transform: rotate(0); } }
@keyframes blink { 0% { transform: scaleY(1); }
  50% { transform: scaleY(0); }
  100% { transform: scaleY(1); } }
@keyframes turn { 0% { transform: rotate(10deg); }
  100% { transform: rotate(0); } }
@keyframes mumble { 0% { transform: scale(1, 1); }
  25% { transform: scale(1.05, 0.92); }
  50% { transform: scale(1, 1); }
  75% { transform: scale(0.95, 1.08); } }
@keyframes kenburns { 0% { transform: translate(-50%, -50%) scale(1, 1); }
  50% { transform: translate(-50%, -50%) scale(1.15, 1.15); } }
/*
$pitch-grey: #333333;
$blue: #12B4E9;
$green: #88e68f;
$light-green: #00ff9d;
$dark-green: #0EE565;
*/
html, body { min-width: 320px; background: #333333; }

#wrapper { background: transparent; }

#page { position: relative; height: 100vh; overflow: hidden; }
#page > img { display: block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-height: 100%; min-width: 100%; max-width: none; max-height: none; opacity: 0; animation-name: kenburns; animation-duration: 30s; animation-timing-function: ease-in-out; animation-play-state: running; animation-iteration-count: infinite; animation-direction: alternate; }

#main { position: fixed; z-index: 2; top: 50%; left: 50%; width: 480px; max-width: 100%; min-width: 320px; margin: auto; transform: translate(-50%, -50%); padding: 40px 24px; background: rgba(0, 0, 0, 0.75); border-radius: 12px; }

#footer { position: fixed; bottom: 10px; font-size: 12px; color: #fff; max-width: 1024px; margin: auto; padding: 20px; }
#footer a { text-decoration: none; color: #fff; }

#content { color: white; }
#content p { margin: 0 0 15px; word-wrap: break-word; text-align: center; }
#content a { color: #1bb5eb; }
#content a:hover, #content a:focus { text-decoration: none; }
#content .page-title { font-size: 22px; text-align: center; margin-bottom: 30px; }
#content .page-title p { margin: 0; }
#content .login-form { color: #fff; }
#content .login-form label { display: none; }
#content .login-form input[type='text'], #content .login-form input[type='password'] { width: 100%; height: 44px; margin-bottom: 20px; padding: 0 10px; background: #fff; border: 0; }
#content .login-form .buttons input[type='submit'], #content .login-form .buttons a { display: block; width: 100%; padding: 0 10px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; text-decoration: none; color: #fff; border: 0; transition: background-color 0.15s; }
#content .login-form .buttons a { background: #12B4E9; }
#content .login-form .buttons a:hover, #content .login-form .buttons a:focus { background-color: #0f97c3; text-decoration: none; }
#content .login-form .buttons input[type='submit'] { background: #0EE565; }
#content .login-form .buttons input[type='submit']:hover, #content .login-form .buttons input[type='submit']:focus { background-color: #0cbf54; }
#content .login-form .field.forgot-password { clear: both; padding-top: 30px; text-align: center; }
#content .login-form .field.forgot-password a { color: #fff; text-decoration: none; }
#content .login-form .field.forgot-password a:hover, #content .login-form .field.forgot-password a:focus { text-decoration: underline; }
#content p.error, #content p.info { margin-bottom: 40px; padding: 10px 15px; color: #fff; }
#content p.error { background-color: firebrick; }
#content.info { background-color: forestgreen; }

.alert-bar-staging { z-index: 10; }

/*# sourceMappingURL=login.css.map */