html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html, body, header, footer, section, nav, aside, article, figure, figcaption, td, div, p, ul, ol, li, dl, dt, dd, select, input, textarea, label, button, hr {
  color: #FFF; font:400 16px/24px 'Lato', sans-serif; margin:0; padding:0; list-style:none; -webkit-font-smoothing:antialiased; text-rendering:optimizelegibility; -moz-osx-font-smoothing:grayscale;
}
body { padding: 0; margin: 0; background-color: #6476b6; }

label, input[type="text"], input[type="password"] { display: block; width: 100%; }
input:focus, button:focus { outline: none; }
input[type="text"],
input[type="password"] {
  padding: 0 0 5px 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
label { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 700; text-transform: uppercase; margin-bottom: 5px; }

.error { padding: 10px; margin: 0 0 20px 0; background-color: #d01616; }

/* login */
section.login { width: 100%; height: 100vh; }
section.login > div { position: relative; float: left; height: 100%; }

section.login > div:first-child {
  width: 70%;
  text-align: center;
  background: url('/bundles/realtixsecurity/images/waves.png') top center no-repeat, linear-gradient(to bottom right, #332e65 0%, #6476b6 100%);
  background-size: 105% auto;
}
section.login > div:first-child .logo { position: absolute; top: calc(50% - 30px); left: -9999px; right: -9999px; width: 240px; height: 60px; margin: auto; }

section.login > div:last-child { width: 30%; background-color: #6476b6; }
section.login > div:last-child .form { position: absolute; top: calc(50% - 160px); left: -9999px; right: -9999px; width: 100%; max-width: 340px; margin: auto; }
section.login > div:last-child .form h2 { font-family: Lato, sans-serif; font-size: 40px; line-height: 46px; font-weight: 700; color: #FFF; margin: 0 0 40px 0; }
section.login > div:last-child .form div { margin-bottom: 35px; }
section.login > div:last-child .form div:last-child { margin-bottom: 0; }
section.login > div:last-child .form div:last-child label { float: left; width: auto; margin: 10px 0 0 0; }
section.login > div:last-child .form div:last-child label input[type="checkbox"] { margin-right: 10px; }
section.login > div:last-child button {
  float: right;
  padding: 15px 20px;
  color: #FFF;
  font-size: 12px;
  line-height: 14px;
  font-weight: 900;
  text-transform: uppercase;
  background-color: #554595;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
section.login > div:last-child button:before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-right: 10px;
  background: url('/bundles/realtixsecurity/images/arrow-right.png') top center no-repeat;
  vertical-align: middle;
}


@media screen and (max-width: 1240px) {
  section.login > div:first-child,
  section.login > div:last-child {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  section.login > div:first-child,
  section.login > div:last-child {
    float: none; width: 100%; height: 400px;
  }
}