.modal-box{ font-family: 'Merienda One', cursive; } .modal-box .show-modal{ color: #fff; background-color: #FF3C5F; font-size: 18px; font-weight: 500; text-transform: capitalize; padding: 10px 15px; margin: 80px auto 0; border: none; outline: none; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); display: block; clip-path: polygon(50% 10%, 100% 0, 100% 100%, 50% 90%, 0 100%, 0 0); } .modal-box .show-modal:hover{ color: #fff; border: none; outline: none; text-decoration: none; text-shadow: 0 0 5px rgba(0,0,0,0.5); } .modal-box .show-modal:focus{ background-color: #FF3C5F; } .modal-backdrop.in{ opacity: 0; } .modal-box .modal{ top: 90px !important; } .modal-box .modal-dialog{ width: 400px; margin: 20px auto 0; } .modal-box .modal-dialog .modal-content{ text-align: center; border: none; box-shadow: none; clip-path: polygon(50% 5%, 100% 0, 100% 100%, 50% 95%, 0 100%, 0 0); } .modal-box .modal-dialog .modal-content .close{ color: #ff3838; font-size: 25px; text-shadow: none; line-height: 18px; opacity: 1; position: absolute; left: auto; right: 8px; top: 10px; z-index: 1; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .close span{ margin: -1px 0 0 0; display: block; } .modal-box .modal-dialog .modal-content .close:hover{ color: #333; } .modal-box .modal-dialog .modal-content .close:focus{ outline: none; } .modal-box .modal-dialog .modal-content .modal-body{ padding: 50px 20px 30px !important; } .modal-box .modal-dialog .modal-content .modal-body .icon{ color: #999; font-size: 80px; line-height: 80px; margin: 0 auto 20px; } .modal-box .modal-dialog .modal-content .modal-body .title{ color: #333; font-size: 30px; text-transform: capitalize; margin: 0 0 10px; } .modal-box .modal-dialog .modal-content .modal-body .description{ color: #999; font-size: 15px; line-height: 22px; margin: 0 20px 25px; } .modal-box .modal-dialog .modal-content .modal-body .subscribe{ color: #fff; background-color: #00a8ff ; font-size: 16px; font-weight: 500; text-transform: capitalize; padding: 10px 12px; margin: 0 10px 10px 0; border: none; display: inline-block; transition: all 0.3s; } .modal-box .modal-dialog .modal-content .modal-body .subscribe:hover{ background-color: #0984e3; box-shadow: 0 0 5px #333 inset; } .modal-box .modal-dialog .modal-content .modal-body .subscribe.submit{ background-color: #ff4d4d; margin-right: 0; } .modal-box .modal-dialog .modal-content .modal-body .subscribe.submit:hover{ background-color: #ff3838; box-shadow: 0 0 5px #333 inset; } @media only screen and (max-width: 576px){ .modal-dialog{ width: 93% !important; } } @media only screen and (max-width: 400px){ .modal-box .modal-dialog .modal-content .modal-body .subscribe{ margin-right: 0; } }