.modal-box{ font-family: 'Open Sans', sans-serif; } .modal-box .show-modal{ color: #222; background-color: #fff; font-size: 18px; font-weight: 600; text-transform: capitalize; padding: 10px 15px; margin: 80px auto 0; border: none; border-radius: 40px/20px; box-shadow: 0 0 15px rgba(0,0,0,0.3); outline: none; display: block; transition: all 0.3s ease; } .modal-box .show-modal:hover, .modal-box .show-modal:focus{ color: #222; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.3) inset; outline: none; } .modal-backdrop.in{ opacity: 0; } .modal-box .modal{ top: 30px !important; } .modal-box .modal-dialog{ width: 350px; margin: 30px auto 0; } .modal.fade .modal-dialog{ opacity: 0; transform: translate(0,-30%) scale(0.5); } .modal.fade.in .modal-dialog{ opacity: 1; transform: translate(0,0) scale(1); } .modal-box .modal-dialog .modal-content{ color: #333; background: #fff; text-align: center; border: none; border-radius: 10px; } .modal-box .modal-dialog .modal-content .close{ color: #222; font-size: 28px; line-height: 14px;; text-shadow: none; opacity: 1; position: absolute; left: auto; right: 8px; top: 15px; z-index: 1; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .close span{ margin: -2px 0 0 0; display: block; } .modal-box .modal-dialog .modal-content .close:hover{ color: #222; } .modal-box .modal-dialog .modal-content .close:focus{ outline: none; } .modal-box .modal-dialog .modal-content .modal-body{ padding: 40px 30px !important; } .modal-box .modal-dialog .modal-content .modal-body .title{ color: #222; font-size: 25px; text-transform: capitalize; margin: 0 0 25px 0; } .modal-box .modal-dialog .modal-content .modal-body .icon{ background: linear-gradient(-45deg,#055554,#40e0d0); font-size: 80px; line-height: 80px; width: 80px; margin: 0 auto 25px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .modal-box .modal-dialog .modal-content .modal-body .icon:before{ content: ""; background: #e63900; width: 20px; height: 20px; border: 3px solid #fff; border-radius: 50%; position: absolute; top: 5px; right: 12px; } .modal-box .modal-dialog .modal-content .modal-body .description{ color: #a0a0a0; font-size: 15px; margin: 0 0 25px; } .modal-box .modal-dialog .modal-content .modal-body .subscribe{ color: #fff; background: linear-gradient(135deg,#055554,#40e0d0); font-size: 18px; font-weight: 600; text-transform: capitalize; width: 80%; padding: 12px 5px; margin: 0 auto 20px; border: none; border-radius: 50px; box-shadow: 0 5px 0 #055554; transition: all 0.3s ease 0s; } .modal-box .modal-dialog .modal-content .modal-body .subscribe:hover{ box-shadow: 0 0 5px rgba(0,0,0,0.5); } .modal-box .modal-dialog .modal-content .modal-body .cancel{ font-size: 15px; font-weight: 500; text-transform: capitalize; display: block; } .modal-box .modal-dialog .modal-content .modal-body .cancel a{ color: #055554; transition: all 0.3s ease 0s; } .modal-box .modal-dialog .modal-content .modal-body .cancel a:hover{ color: #222; } @media only screen and (max-width: 576px){ .modal-dialog{ width: 93% !important; } }