/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 100000; /* Sit on top */
   padding: 0; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgba(80,80,80,0.4);
}

/* Modal Content */
.modal-content {
   border:5px solid #695129;
   border-radius: 10px;
   background-color: #ede8e3;
   margin: 0;
   padding: 40px 10px 20px 10px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   min-width: 150px;
   max-width: 90%
}

/* Modal title */
.modal-title {
   background-color: #7d6433;
   border-radius: 5px 5px 0 0;
   position: absolute;
   margin: 0 0 10px 0;
   padding: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 36px;
}

/* The Title Text */
.title-text {
   color: #ede8e3;
   line-height: 28px;
   position: absolute;
   left: 0;
   right: 0;
   padding: 3px 10px;
   text-align: left;
   top: 0/*-16px*/;
   width: 80%;
   height: 28px;
   text-decoration: none;
   font-weight: bold;
}
/* The Close Button */
.modal-close {
   color: #695129;
   line-height: 25px;
   position: absolute;
   right: 5px;
   text-align: center;
   top: 3px;
   width: 28px;
   text-decoration: none;
   font-weight: bold;
   border: 2px solid #695129;
   -webkit-border-radius: 14px;
   -moz-border-radius: 14px;
   border-radius: 14px;
}

.modal-close:hover,
.modal-close:focus {
   border:2px solid #ede8e3;
   color:#ede8e3; 
   cursor: pointer; 
}