@media only screen {
  .page-wrap {
    padding: 3.25rem 1rem; }
  #upgrade-container {
    border: 1px solid #dcdcdc;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 55px 22px 25px;
    text-align: center;
    width: 100%;
    max-width: 730px;
    margin: auto; }
    #upgrade-container hr {
      border-bottom: 1px solid #dcdcdc;
      margin: 2rem auto; }
    #upgrade-container p {
      font-size: 15px;
      color: #0f0f0f; }
    #upgrade-container .home-btn {
      font-size: 16px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.9);
      display: inline-block;
      text-align: center;
      line-height: 58px;
      padding: 0 1rem;
      background: #FFA900;
      min-width: 220px;
      border-radius: 6px;
      margin: 0.5rem;
      letter-spacing: 0.5px;
      transition: all,0.3s; }
      #upgrade-container .home-btn:hover, #upgrade-container .home-btn:focus, #upgrade-container .home-btn:active {
        background: #eea20e;
        color: #fff; }
      #upgrade-container .home-btn.blue-btn {
        background: #004d91; }
        #upgrade-container .home-btn.blue-btn:hover, #upgrade-container .home-btn.blue-btn:focus, #upgrade-container .home-btn.blue-btn:active {
          background: #0b5ea7;
          color: #fff; }
    #upgrade-container .full-img {
      width: 100%;
      max-width: 380px;
      margin: auto; }
    #upgrade-container .cta {
      margin: 40px 0 26px; }
    #upgrade-container .outro a {
      color: #0a5da6;
      transition: all,0.3s; }
      #upgrade-container .outro a:hover {
        text-decoration: underline; }
    #upgrade-container .logo {
      width: 60%;
      max-width: 224px;
      margin: 0 auto 0; }
    #upgrade-container h1 {
      font-weight: bold;
      font-size: 18px;
      color: #01579a;
      margin-top: 3px;
      font-family: "Roboto", sans-serif;
      margin-bottom: 1.5rem; }
    #upgrade-container .intro-link {
      color: #2871b0;
      transition: all,0.3s; }
      #upgrade-container .intro-link:hover {
        text-decoration: underline; }
    #upgrade-container .intro {
      max-width: 480px;
      margin: 0 auto 1.5rem;
      line-height: 1.5; }
    #upgrade-container h2 {
      font-weight: 900;
      font-size: 20px;
      color: #000000;
      font-family: "Roboto", sans-serif;
      margin-bottom: 1.625rem; }
    #upgrade-container h3 {
      font-weight: bold;
      font-size: 22px;
      color: #01579b;
      margin-bottom: 1rem; }
    #upgrade-container .upgrade-list {
      margin-left: auto;
      margin-right: auto;
      max-width: 500px;
      margin-bottom: 2.5rem; }
      #upgrade-container .upgrade-list li {
        margin-bottom: 0.75rem;
        text-align: left;
        position: relative;
        padding-left: 38px;
        line-height: 1.4;
        font-size: 16px; }
        #upgrade-container .upgrade-list li .icon-checkmark {
          position: absolute;
          top: 1px;
          left: 0;
          color: #edc146;
          font-size: 20px; }
  .hidden-submit {
    display: none; }
  #login-form {
    font-family: "Roboto", sans-serif; }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  #login-container {
    padding: 4rem 0; }
    #login-container .logo {
      width: 60%;
      max-width: 300px;
      margin: 0 auto 2rem; }
    #login-container .inner {
      border: 1px solid #ddd;
      border-radius: 6px;
      width: 100%;
      max-width: 400px;
      margin: auto;
      display: table;
      overflow: hidden; }
    #login-container .login-hdr {
      background: #f7f7f7;
      border-bottom: 1px solid #ddd;
      line-height: 48px;
      padding: 0 1rem;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 14px; }
    #login-container .input-container {
      border-bottom: 1px solid #ddd;
      position: relative; }
      #login-container .input-container:last-child {
        border: none; }
      #login-container .input-container i {
        position: absolute;
        top: 0;
        left: 1rem;
        line-height: 54px;
        color: #aaa; }
        #login-container .input-container i:before {
          color: #aaa; }
      #login-container .input-container input {
        border: none;
        box-shadow: none;
        padding-left: 2.875rem;
        font-size: 14px;
        margin: 0;
        line-height: 54px;
        height: 54px;
        font-family: "Roboto", sans-serif; }
    #login-container .login-error {
      background: #fbeaee;
      color: #ff0046;
      font-size: 14px;
      font-weight: 500;
      padding-left: 1rem;
      line-height: 40px;
      border-top: 1px solid #ddd; }
    #login-container .login-btn {
      width: 100%;
      max-width: 400px;
      margin: 1rem auto 0; }
      #login-container .login-btn a {
        background: #004d91;
        color: #fff;
        font-family: "Roboto", sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        width: 100%;
        border-radius: 6px;
        line-height: 52px;
        padding: 0;
        letter-spacing: 1px;
        transition: all, 0.3s; }
        #login-container .login-btn a:hover {
          background: #0068c4; }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0; }
  .copyright {
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    text-align: center;
    color: #888; } }

/* min-width 640px Medium screens */
@media only screen and (min-width: 640px) {
  #login-form {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center; }
  #login-container {
    min-width: 420px;
    position: relative;
    top: -4rem; }
  .copyright {
    font-size: 16px;
    padding: 1rem 0; } }

/* min-width 760px Medium screens */
@media only screen and (min-width: 760px) {
  #upgrade-container {
    padding: 55px 48px 25px;
    width: 730px; } }