.modal {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    z-index: 10;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

.modal-inner {
    max-width:60%;
    width:100%;
    padding:60px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#fff;
    border: 1px solid #333;
}

[data-modal-open],
[data-modal-close]{
  cursor: pointer;
}
p[data-modal-open],
span[data-modal-open]{
    color:#8a1469;
}
span[data-modal-close],
p[data-modal-close] {
  font-weight: bold;
  font-size: 95%;
  color:#8a1469;
}
.modal-close {
    width:36px;
    height:36px;
    padding-top:9px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:50%;
    border: 1.5px solid #f609b4;
    background:#000;
    font-family:Arial, Sans-Serif;
    font-size:18px;
    font-weight: normal;
    text-align:center;
    line-height:100%;
    color:#f609b4;
}
.modal-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:#f609b4;
    color: #000;
    text-decoration:none;
}