p {
margin-top: 0;
}
.modal-container {
position: fixed;
background-color: #fff;
width: 70%;
max-width: 400px;
left: 50%;
padding: 20px;
border-radius: 5px;
-webkit-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
.modal:before {
content: "";
position: fixed;
display: none;
background-color: rgba(0,0,0,.8);
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.modal:target:before {
display: block;
}
.modal:target .modal-container {
top: 20%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
#modal-close {}