.demo{ background: #edb290; } .modal-box{ font-family: 'Raleway', sans-serif; } .modal-box .show-modal{ color: #fff; background-color: #E18B56; font-size: 18px; font-weight: 600; text-transform: capitalize; padding: 10px 15px; margin: 80px auto 0; border-radius: 0 15px; border: none; outline: none; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); display: block; } .modal-box .show-modal:hover{ color:#fff; border: none; outline: none; text-decoration: none; } .modal-backdrop.in{ opacity: 0; } .modal-box .modal{ top: 70px !important; } .modal-box .modal-dialog{ width: 400px; margin: 30px auto 10px; } .modal-box .modal-dialog .modal-content{ border: none; border-top: 25px solid #E18B56; } .modal-box .modal-dialog .modal-content .close{ color: #1B1B1B; font-size: 25px; text-shadow: none; opacity: 1; position: absolute; right: 8px; top: -27px; z-index: 1; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .close:hover{ color: #1B1B1B; } .modal-box .modal-dialog .modal-content .modal-body{ background: #1B1B1B; padding: 20px 20px 30px !important; text-align: center; } .modal-box .modal-dialog .modal-content .modal-body .title{ color: #E18B56; font-family: 'Miniver', cursive; font-size: 45px; text-transform: capitalize; margin: 0 0 5px 0; } .modal-box .modal-dialog .modal-content .modal-body span{ color: #fff; font-size: 18px; font-weight: 300; text-transform: uppercase; display: block; } .modal-box .modal-dialog .modal-content .modal-body .sub-heading{ color: #fff; font-size: 42px; margin: 0 0 20px 0; } .modal-box .modal-dialog .modal-content .modal-body .form-control{ color: #E7E8EA; background: transparent; font-size: 16px; letter-spacing: 1px; height: 40px; padding: 2px 15px 2px 15px; border-radius: 2px; border: 1px solid #dbdbdb; display: inline-block; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .modal-body .form-control:focus{ box-shadow: none; border: 1px solid #dbdbdb; } .modal-box .modal-dialog .modal-content .modal-body .form-control::placeholder{ color: #999; font-size: 14px; } .modal-box .modal-dialog .modal-content .modal-body .subscribe{ color: #1B1B1B; background: #E18B56; font-size: 20px; font-weight: 500; text-transform: uppercase; width: 100%; padding: 5px 15px; border: 0 solid #222; display: block; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .modal-body .subscribe:hover{ background-color: #fff; text-shadow: 2px 2px #E18B56; } @media only screen and (max-width: 576px){ .modal-dialog{ width: 93% !important; } }