.form-container{ background: linear-gradient(150deg,#1B394D 33%,#2D9DA7 34%,#2D9DA7 66%,#EC5F20 67%); font-family: 'Raleway', sans-serif; text-align: center; padding: 30px 20px 50px; } .form-container .title{ color: #fff; font-size: 23px; text-transform: capitalize; letter-spacing: 1px; margin: 0 0 60px; } .form-container .form-horizontal{ background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.4); } .form-horizontal .form-icon{ color: #fff; background-color: #1B394D; font-size: 75px; line-height: 92px; height: 90px; width: 90px; margin: -65px auto 10px; border-radius: 50%; } .form-horizontal .form-group{ margin: 0 0 10px; position: relative; } .form-horizontal .form-group:nth-child(3){ margin-bottom: 30px; } .form-horizontal .form-group .input-icon{ color: #e7e7e7; font-size: 23px; position: absolute; left: 0; top: 10px; } .form-horizontal .form-control{ color: #000; font-size: 16px; font-weight: 600; height: 50px; padding: 10px 10px 10px 40px; margin: 0 0 5px; border: none; border-bottom: 2px solid #e7e7e7; border-radius: 0px; box-shadow: none; } .form-horizontal .form-control:focus{ box-shadow: none; border-bottom-color: #EC5F20; } .form-horizontal .form-control::placeholder{ color: #000; font-size: 16px; font-weight: 600; } .form-horizontal .forgot{ font-size: 13px; font-weight: 600; text-align: right; display: block; } .form-horizontal .forgot a{ color: #777; transition: all 0.3s ease 0s; } .form-horizontal .forgot a:hover{ color: #777; text-decoration: underline; } .form-horizontal .signin{ color: #fff; background-color: #EC5F20; font-size: 17px; text-transform: capitalize; letter-spacing: 2px; width: 100%; padding: 12px; box-shadow: 0 0 10px rgba(0,0,0,0.3); transition: all 0.4s ease 0s; } .form-horizontal .signin:hover, .form-horizontal .signin:focus{ font-weight: 600; letter-spacing: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3) inset; }