@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
html,
body {
  height: 100%;
  background-color: #efefef;
  font-size: 16px;
  line-height: 24px;
  font-family: 'Roboto', sans-serif;
  font-weight: 300; }
  html h1,
  html h2,
  html h3,
  html h4,
  html h5,
  html h6,
  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; }

.wrapper {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-line-pack: start;
  align-content: flex-start; }

.flexchild {
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center; }
  .flexchild.pinbus {
    -ms-flex: 1;
    flex: 1;
    background-color: #09183f !important;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll; }
    /*.flexchild.pinbus .flexchild-wrapper {
      background-color: rgba(22, 153, 221, 0.5);
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      z-index: 4; }*/
  .flexchild.form-holder {
    background-color: #fff;
    z-index: 12; }
    .flexchild.form-holder .login-box {
      display: -ms-flexbox;
      display: flex;
      width: 300px;
      margin-left: 50px;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-item-align: start;
      align-self: flex-start; }
      .flexchild.form-holder .login-box .auth-box img {
        margin-bottom: 40px; }
      .flexchild.form-holder .login-box .auth-box h3 {
        font-size: 22px;
        font-weight: 400;
        margin: 0 0 30px 0;
        padding: 0;
        line-height: 1;
        color: #424242; }
      .flexchild.form-holder .login-box .auth-box p {
        font-size: 15px;
        line-height: 1;
        margin-bottom: 40px; }
        .flexchild.form-holder .login-box .auth-box p.text-center a {
          color: #555; }
      .flexchild.form-holder .login-box .auth-box .form-group label {
        color: #555;
        text-transform: uppercase;
        font-size: 12px;
        display: block;
        line-height: 1;
        font-weight: 500; }
      .flexchild.form-holder .login-box .auth-box .form-group .form-control {
        height: 38px;
        border-radius: 0;
        box-shadow: none;
        border-color: #e0e4ea; }
        .flexchild.form-holder .login-box .auth-box .form-group .form-control:focus {
          border-color: #63604d; }
      .flexchild.form-holder .login-box .auth-box .form-group .checkbox label,
      .flexchild.form-holder .login-box .auth-box .form-group .radio label {
        line-height: 20px; }
      .flexchild.form-holder .login-box .auth-box .form-group.has-error .form-control {
        border-color: #f04124; }
      .flexchild.form-holder .login-box .auth-box .form-group.has-error .help-block {
        display: block;
        font-size: 11px;
        font-weight: bold;
        line-height: 1;
        color: #f04124;
        text-transform: uppercase; }
      .flexchild.form-holder .login-box .auth-box .btn {
        border-radius: 0;
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: center;
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 500; }
        .flexchild.form-holder .login-box .auth-box .btn.btn-primary {
          margin-bottom: 20px;
          background-color: #f4e61f;
          border-color: #f4e61f;
          color: #555;
          font-weight: 600; }
          .flexchild.form-holder .login-box .auth-box .btn.btn-primary:focus {
            outline: 0; }

.copyright {
  padding: 10px 0;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 400;
  color: #999;
  line-height: 1;
  text-align: center; }
  .copyright small {
    font-size: 10px;
    display: block;
    color: #414575; }

@media (max-width: 767px) {
  .flexchild {
    width: 100%; }
    .flexchild.form-holder {
      width: 100%; }
      .flexchild.form-holder .login-box {
        margin: 0 auto; } }