body { background: url(../imagenes/grey_background.jpg); background-size: cover; font-family: Montserrat; } @media only screen and (min-device-width: 480px) { body { background: url('../imagenes/grey_background.jpg') no-repeat fixed center center; } } .logo { width: 213px; height: 60px; margin: 30px auto; } .login-block { width: 320px; padding: 20px; background: #fff; border-radius: 5px; border-top: 5px solid #bdb035; margin: 0 auto; } .login-block h1 { text-align: center; color: #000; font-size: 18px; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; } .login-block input { width: 100%; height: 42px; box-sizing: border-box; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 20px; font-size: 14px; font-family: Montserrat; padding: 0 20px 0 50px; outline: none; } .login-block input#user { background: #fff url('../imagenes/login_username.png') 20px top no-repeat; background-size: 16px 80px; } .login-block input#user:focus { background: #fff url('../imagenes/login_username.png') 20px bottom no-repeat; background-size: 16px 80px; } .login-block input#password { background: #fff url('../imagenes/login_password.png') 20px top no-repeat; background-size: 16px 80px; } .login-block input#password:focus { background: #fff url('../imagenes/login_password.png') 20px bottom no-repeat; background-size: 16px 80px; } .login-block input:active, .login-block input:focus { border: 1px solid #bdb035; } .login-block #loginButon { width: 100%; height: 40px; background: #bdb035; box-sizing: border-box; border-radius: 5px; border: 1px solid #6d661c; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 14px; font-family: Montserrat; outline: none; cursor: pointer; } .login-block button:hover { background: #c7b935; border: 1px solid #6d661c; }