.modal-box{ font-family: 'Poppins', sans-serif; } .modal-box .show-modal{ color: #fff; background-color: #ff6262; font-size: 18px; font-weight: 600; text-transform: capitalize; padding: 10px 15px; margin: 80px auto 0; border: none; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); outline: none; display: block; 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; } .modal-box .modal-dialog{ width: 350px; margin: 70px auto 0; } .modal.fade .modal-dialog{ transform: scale(0); transition: all 400ms cubic-bezier(.47,1.64,.41,.8); } .modal.in .modal-dialog{ transform: scale(1); } .modal-box .modal-dialog .modal-content{ color: #818080; background: linear-gradient(to top,#ff6262,#ff6262 75px,#fff 75px); text-align: center; border: none; border-radius: 15px; box-shadow: none; } .modal-box .modal-dialog .modal-content .modal-body{ padding: 60px 20px 25px!important; } .modal-box .modal-dialog .modal-content .modal-body .modal-icon{ color: #ff6262; font-size: 100px; line-height: 100px; margin: 0 0 25px; } .modal-box .modal-dialog .modal-content .modal-body .title{ color: #ff6262; font-size: 33px; font-weight: 600; text-transform: capitalize; margin: 0 0 15px; } .modal-box .modal-dialog .modal-content .modal-body .description{ font-size: 17px; margin: 0 0 70px; } .modal-box .modal-dialog .modal-content .modal-body .btn{ color: #fff; background: transparent; font-size: 17px; font-weight: 400; padding: 0; transition: all 0.3s ease 0s; } .modal-box .modal-dialog .modal-content .modal-body .btn:hover{ text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); } .modal-box .modal-dialog .modal-content .modal-body .btn:focus{ outline: none; } @media only screen and (max-width: 767px){ .modal-dialog{ width: 90% !important; } }