.modal {
    display: hidden; 
    position: fixed; 
    z-index: 1000; 
    left: 100%; 
    top: 0;
    width: 50%;
    overflow: hidden; 
    transition: left 0.3s ease;
    margin-top: 10em;
}

.modal.show {
    display: block; 
    left: 58%; /* Change this to control how far the modal slides in also in subsequent smaller/larger sizes*/
}

.modal-content {
    margin: 0; 
    border: none;
    height: 100%; 
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal {
        width: 100%;
        margin-top: 8em;
    }

    .modal.show {
        left: 0%;
    }
    
}

@media (max-width: 480px) {
    .modal.show {
        margin-top: 8em;
        left: .5%;
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .modal.show {
        display: block; 
        left: 62%;
    }    
}