/* Large Screen - Design for a width of 1450px and above 
======================================================== */
/* Desktop Screen - Design for a width of 1449px to 992px 
======================================================== */
/* Tablet Landscape - Design for a width of 991px to 768px 
======================================================== */
@media only screen and (max-width: 991px) {
  .login-section .login-background {
    width: calc(100vw - 484px);
  }
  .login-section .login-form {
    width: 340px;
  }
}

/* Mobile Portrait - Design for a width of 767px and below 
======================================================== */
@media only screen and (max-width: 767px) {
  .login-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .login-section .login-background {
    width: 100%;
    padding: 0 40px;
    min-height: 280px;
  }
  .login-section .login-background .logo {
    padding: 72px 24px 24px 24px;
    width: 160px;
    height: 120px;
    margin-bottom: 72px;
  }
  .login-section .login-background .text h1 {
    font-size: 2em;
  }
  .login-section .login-background .text span.material-icons {
    font-size: 2em;
    top: -16px;
    right: -16px;
  }
  .login-section .login-form {
    width: 100%;
    margin: 32px 0 0 0;
    padding: 0 40px;
  }
  .login-section .login-form h2 {
    font-size: 1.5em;
  }
}

/* =========================== */
/*      Custom Breakpoints     */
/*# sourceMappingURL=media.css.map */