.modal-box{ font-family: 'Open Sans', sans-serif; } .modal-box .show-modal{ color: #345678; background-color: #fff; font-size: 18px; font-weight: 700; text-transform: capitalize; padding: 10px 15px; margin: 80px auto 0; border-radius: 20px 0; border: none; display: block; transition: all 0.3s ease 0s; } .modal-box .show-modal:hover{ color: #345678; border: none; box-shadow: 3px 3px rgba(255,255,255,0.5),0 0 10px rgba(0,0,0,0.4) inset; } .modal-box .show-modal:focus{ outline: none; } .modal-backdrop.in{ opacity: 0; } .modal-box .modal-dialog{ width: 400px; margin: 70px auto 0; } .modal-box .modal-dialog .modal-content{ color: #555; text-align: center; border: none; border-radius: 20px 0; box-shadow: 3px 3px rgba(255, 255, 255, 0.5); } .modal-box .modal-dialog .modal-content .modal-body{ padding: 45px 20px 15px !important; } .modal-box .modal-dialog .modal-content .modal-body .icon{ color: #345678; font-size: 80px; line-height: 80px; height: 90px; width: 88px; margin: 0 auto 30px; border: 4px solid #345678; box-shadow: 5px 5px rgba(52,86,120,0.2), 9px 9px rgba(52,86,120,0.1); } .modal-box .modal-dialog .modal-content .modal-body .title{ font-size: 22px; font-weight: 600; line-height: 30px; margin: 0 0 30px 0; } .modal-box .modal-dialog .modal-content .modal-body .btn{ color: #345678; background-color: transparent; font-size: 18px; font-weight: 600; text-transform: capitalize; width: 46%; padding: 12px 0; margin: 0 5px 10px; border: none; display: inline-block; border-radius: 20px 0; transition: all 0.3s ease 0s; } .modal-box .modal-dialog .modal-content .modal-body .btn.submit{ color: #fff; background-color: #345678; } .modal-box .modal-dialog .modal-content .modal-body .btn:hover, .modal-box .modal-dialog .modal-content .modal-body .btn:focus{ background-color: rgba(52,86,120,0.2); outline: none; } .modal-box .modal-dialog .modal-content .modal-body .btn.submit:hover, .modal-box .modal-dialog .modal-content .modal-body .btn.submit:focus{ background-color: #345678; box-shadow: 0 0 7px rgba(0, 0, 0, 0.6); } @media only screen and (max-width: 479px){ .modal-dialog{ width: 95% !important; } }