@media screen and (max-width: 980px) { #login .wrapper .right { padding: 30px; }
  #login .wrapper .right .text { padding-left: 20px; }
  #login .wrapper .right .text p { font-size: 20px; } }
@media screen and (max-width: 767px) { #login .wrapper .left { width: 60%; }
  #login .wrapper .left #loginForm { padding: 40px 20px; }
  #login .wrapper .right { width: 40%; flex-direction: column; align-items: center; text-align: center; }
  #login .wrapper .right .text { padding-left: 0; }
  #login .wrapper .right .btn { font-size: 15px; } }
@media screen and (max-width: 600px) { #login { padding: 110px 0 100px 0; }
  #login { height: auto; min-height: auto; }
  #login .wrapper { flex-direction: column; }
  #login .wrapper .left { position: relative; width: 80%; }
  #login .wrapper .left #loginForm { padding: 40px 40px 80px 40px; margin-bottom: 0; }
  #login .wrapper .left .forgotten { position: absolute; bottom: 30px; width: 100%; text-align: center; }
  #login .wrapper .right { width: 70%; border-radius: 0 0 20px 20px; }
  #login .wrapper .right .icon { display: none; } }
@media screen and (max-width: 480px) { #login .wrapper { padding: 0 10px; }
  #login .wrapper .left { width: 100%; }
  #login .wrapper .left #loginForm { padding: 25px 20px 50px 20px; }
  #login .wrapper .left .form-group { margin-bottom: 20px; }
  #login .wrapper .left .forgotten { bottom: 15px; }
  #login .wrapper .right { width: 90%; padding: 15px; }
  #login .wrapper .right .text p { font-size: 16px; }
  #login .wrapper .right .btn { padding: 0 20px; margin-top: 5px; } }