#modal {
      
    height:90%;
    width:99%;
    top:5%;
    left:50%;
    margin-left:-50%;
    background-color:rgba(255,255,255,0.4);
    border-radius:7px;
    border:2px solid #000;
    position:fixed;
    display:none;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr 1fr;
    z-index:2;
      
}

#modal:hover {
    
    background-color:rgba(255,255,255,1.0);
    transition:.5s;
    -o-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    
}

#modal-close {
    
    font-size:32pt;
    font-weight:bold;
    text-align:center;
    background-color:rgba(255,255,255,0.6);
    height:50px;
    width:50px;
    border-radius:32px;
    grid-column-start:5;
    grid-column-end:5;
    grid-row-start:1;
    grid-row-end:2;
    
}

#modal-close:hover {
    
    cursor:pointer;
    
}

.displayModal {
    
    display:grid!important;
    
}

.modal-title {
    
    grid-column-start:1;
    grid-column-end:5;
    grid-row-start:1;
    grid-row-end:2;
    font-size:28pt;
    font-weight:bold;
    color:#000;
    padding:10px;
    
}

@media only screen and (min-width:768px) {
    
    #modal {
    
        width:90%;
        left:50%;
        margin-left:-45%;
    
    }
    
}