* { padding:0; margin:0; }

.modal { width:100%; height:100%; background-color:rgba(0,0,0,0); position:fixed; left:0; top:0; z-index:-100; transition:400ms background-color, 400ms z-index; }
.modal-ativo { background-color:rgba(0,0,0,0.6) !important; z-index:5000; }

.modal-wrap { width:700px; padding:30px; background-color:#fff; border-radius:3px; z-index:-200; position:absolute; left:50%; margin-left:-380px; top:0; opacity:0; transition:400ms opacity, 400ms top; }
.modal-wrap-ativo { opacity:1; }

.modal-fechar { width:30px; height:30px; display:block; position:absolute; right:-10px; top:-10px; background-color:#D1090C; text-align:center; line-height:30px; border-radius:50%; color:#fff; transition:400ms color; }
.modal-fechar:hover { color:rgba(255,255,255,0.7); text-decoration:none; }