.overlay {
    bottom:0;
    left:0;
    right:0;
    top:0;
    position:fixed;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index:1;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    width:60%;
    position:relative;
    margin:70px auto 70px 70px;
    padding:20px;
    border-radius:5px;
    background: #fff;
    transition: all 1s ease-in-out;
}
.popup .close {
    top:20px;
    position:absolute;
    font-size:30px;
    font-weight:bold;
    text-decoration:none;
    color:#333;
    right: 30px;
    transition: all 200ms;
    cursor: pointer;
}
.popup .close:hover {
    color:#06D85F;
}
.popup .content {
    max-height:30%;
    overflow:auto;
}
@media screen and (max-width: 700px) {
    .box{
        width: 70%;
      }
      .popup{
        width: 70%;
      }
}