.modal-content { width: 100%;pointer-events: auto; background-color: #fff; background-clip: padding-box;
  border: 10px solid #c6c6c6;  border-radius: 0; outline: 0;padding: 10px;}
.modal-header {padding: 2px; border-bottom: 0px solid #e9ecef; font-family: "Avenir-Medium";}
.modal-body {padding: 0px 10px 10px 10px;}
.close {font-size: 2rem; font-weight: 700; line-height: 1; color: #000;opacity: .9;}
.modal-body p{ font-family: "Avenir-Medium"; color: #2b2523; font-size: 17px;  letter-spacing:0.20px;    margin: 15px 0; } 

 .message { text-align: center;font-family: 'Product Sans'; color: #666;} 
.message h2{ font-size: 26px; padding: 40px;}
.message a{ font-size: 16px; color: #666; border: 1px solid #ddd; border-radius: 4px; padding: 7px 15px; text-decoration: none;} 


/*----------------------------------------------------------*/  

.modal-dialog-slideout {min-height: 100%; margin: 0 0 0 auto ;background: #fff;}
.modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(100%,0);transform: translate(100%,0);}
.modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);flex-flow: column;}
.modal-dialog-slideout .modal-content{border: 0;}
@media (max-width: 576px){
.modal-dialog.modal-dialog-slideout {width: 80%}
}
@media (max-width: 425px){
.modal-dialog.modal-dialog-slideout {width: 100%}
}