.modal {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                opacity: 0;
                visibility: hidden;
                transform: scale(1.1);
                transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
                z-index: 99999;
            }
            .modal-content {
                position: absolute;
                margin-top: 25%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 50%;
            }
            .close-button {
                float: right;
                width: 1.5rem;
                line-height: 1.5rem;
                text-align: center;
                cursor: pointer;
                border-radius: 0.25rem;
                background-color: lightgray;
            }
            /*            .close-button:hover {
                            background-color: darkgray;
                        }*/
            .show-modal {
                opacity: 1;
                visibility: visible;
                transform: scale(1.0);
                transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
            }

@media screen and (max-width: 530px) {
	.modal-content {
    		position: absolute;
    		margin-top: 80%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		width: 80%;
		height: 60%;
	}


}