.modal-box{ font-family: 'Poppins', sans-serif; } .modal-box .show-modal{ color: #fff; background-color: #14a085; font-size: 18px; font-weight: 600; text-transform: capitalize; padding: 10px 15px; margin: 50px auto 0; border: none; outline: none; display: block; border-radius: 0; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease 0s; } .modal-box .show-modal:hover, .modal-box .show-modal:focus{ color: #fff; outline: none; } .modal-backdrop.in{ opacity: 0.7; background-color: #000; } .modal-box .modal-dialog{ width: 350px; margin: 70px auto 0; } .modal.fade .modal-dialog{ transform: scale(0); } .modal.in .modal-dialog{ transform: scale(1); } .modal-box .modal-dialog .modal-content{ background: #fff; text-align: center; border-radius: 30px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .modal-box .modal-dialog .modal-content .modal-body{ padding: 35px 20px 15px !important; } .modal-box .modal-dialog .modal-content .modal-body .title{ color: #707070; font-size: 30px; line-height: 30px; font-weight: 600; text-transform: capitalize; margin: 0 0 25px; } .modal-box .modal-dialog .modal-content .modal-body .modal-icon{ color: #da6820; font-size: 100px; line-height: 100px; margin: 0 0 10px; } .modal-box .modal-dialog .modal-content .modal-body .description{ color: #b3b3b3; font-size: 22px; font-weight: 500; margin: 0 10px 20px; } .modal-box .modal-dialog .modal-content .modal-body .btn{ color: #fff; background: #14a085; font-size: 25px; font-weight: 400; text-transform: capitalize; padding: 5px 30px; margin: 0 auto 10px; border-radius: 15px; border: none; display: block; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .modal-body .btn:hover{ text-shadow: 3px 3px 3px rgba(0, 0, 0, .9); } .modal-box .modal-dialog .modal-content .modal-body .btn.cancel{ font-size: 18px; background-color: #707070; } .modal-box .modal-dialog .modal-content .modal-body .btn:focus { outline: none; } @media only screen and (max-width: 479px){ .modal-dialog{ width: 95% !important; } }