.demo{ background-color: #FF5B61; } .form-horizontal{ background-color: #fff; font-family: 'Rubik', sans-serif; padding: 20px; box-shadow:0 0 10px #505050; border-radius: 5px; position: relative; } .form-horizontal .form-icon{ color: #FF5B61; font-size: 80px; text-align: center; line-height: 100px; text-shadow: 5px 5px 3px #0E7886; } .form-horizontal .heading{ color: #0E7886; margin: 0 0 5px 0; font-size: 30px; font-weight: 600; text-align: center; } .form-horizontal .sub-heading{ color: #0E7886; font-size: 18px; text-align: center; margin: 0 0 30px 0; display: block; } .form-horizontal .form-group{ border-radius: 0; margin: 0 auto 20px; position: relative; } .form-horizontal .form-group>i{ color: #0E7886; font-size: 23px; position: absolute; left: 8px; top: 7px; } .form-horizontal .form-control{ color: #0E7886; background-color: transparent; font-size: 16px; letter-spacing: 1px; height: 40px; padding: 0 15px 0 35px; box-shadow: none; border: none; border-bottom: 1px solid #0E7886; border-radius: 0; display: inline-block; transition:all 0.3s; } .form-control::placeholder{ color: #0E7886; font-size: 14px; } .form-horizontal .form-control:focus{ box-shadow: none; } .form-horizontal .btn{ color: #fff; background-color: #FF5B61; font-size: 18px; text-transform: uppercase; width: 100%; padding: 10px 15px; margin: 0 0 10px 0; border-radius: 2px; border: none; transition:all 0.3s; } .form-horizontal .btn:focus, .form-horizontal .btn:hover{ letter-spacing: 3px; text-shadow: 0 0 5px #0E7886; box-shadow: 0 0 0 5px #fff inset,0 0 5px #555; } .form-horizontal .forgot-pass{ color: #0E7886; font-size: 13px; margin: 0 0 10px; display: block; } .form-horizontal .forgot-pass:hover{ color: #222; } .form-horizontal .form-footer{ text-align: center; } .form-horizontal .form-footer span{ color: #0E7886; font-size: 13px; display: inline-block; } .form-horizontal .register{ color: #0E7886; font-size: 13px; font-weight: 600; display: inline-block; } .form-horizontal .register:hover{ color: #FF5B61; }