@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);

.modal {
  backdrop-filter: blur(15px);
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  bottom:0px;
  transition:all .3s ease-in-out;
  opacity:0;
  z-index:-1;
}
.modal:target {
  opacity:1;
  transition:all .3s ease-in-out;
  z-index:+9999;
}
.modal-content {
  position:fixed;
  top:50%;
  left:50%;
  height:100%;
  width:100%;
  background-color: #FFFFFFA6;
  border-radius:4px;
  transform:translate(-50%, -200%);
  transition:all .3s ease-out;
  perspective: 1000;
  outline:1px solid transparent;
  opacity:0;
  box-shadow: 12px;
}
.modal:target .modal-content {
  transform:translate(-50%, -50%);
  transition:all .4s;
  animation-timing-function: cubic-bezier(0,0,12,5);
  transition-delay:.4s;
  z-index:9999;
  opacity:1;
}
.modal-close {
  float:right;
  text-decoration:none;
  padding:22px 22px;
  color:#424242;
  font-weight:800;
  transition:all .1s ease-in-out;
  z-index:+1;
  background:rgba(0,0,0,0.1);
  text-align:center;
  border-radius:0 4px 0 0;
}
.modal-close:hover {
  color:#fff;
  background:rgba(0,0,0,0.5);
}
.modal-content h3 {
  padding:20px;
  display:block;
  text-align:center;
  border-bottom:1px solid #e0e0e0;
  text-transform:uppercase;
  background:rgba(2,162,239,1);
  color:#fff;
  border-radius:4px 4px 0 0;
}