/* Model Box CSS  - pops up on coupons */
.modal { display: none; position: fixed; z-index: 2; padding-top: 80px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); }
.modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; }
#close-cross { color: #fff; float: right; font-size: 38px; font-weight: bold; position: absolute; top:4px; right:12px}
#close-btn{font-size: 16px; border: 1px solid black; float:right; color: #fff; padding:5px 10px; border-radius: 5px; cursor: pointer}
.close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer; }
.modal-header { padding: 2px 16px; background-color: #9F4A54; color: #fff; }
.modal-body { padding: 16px; }
.modal-body > h2{ text-align: center;}
.modal-footer { padding: 10px; background-color: #9F4A54; color: #fff; min-height: 52px;}

/* Responsive 
--------------------------------------------------------------------------------*/
@media screen and (max-width: 320px) {
  .modal-content { width:90%;} 
}
  
@media (min-width: 321px) and (max-width: 580px) { 
 .modal-content { width:90%;} 
}
@media (min-width: 481px) and (max-width: 580px) {  
   .modal-content { width:80%;} 
}
@media (min-width: 581px) and (max-width: 767px) {
   .modal-content { width:70%;} 
}
@media (min-width: 768px) and (max-width: 900px) {
  .modal-content { width:60%;} 
}
@media (min-width: 901px) and (max-width: 1200px) {
   .modal-content { width:50%;} 
}
@media screen and (min-width: 1201px) {
   .modal-content { width:50%;} 
}