.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; }   

.modal:after{ content:""; z-index: -2; position: fixed; left: 0; top: 0; width: 100%; height: 100%;  background-color: rgba(0,0,0,0.2);}

.modal-content { 

	background-color: #fefefe; padding: 50px 30px 36px; width: 600px; max-width: 90%; border-radius: 10px; position: relative; z-index: 9;

	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 

	box-shadow: 1px 1px 50px rgb(0 0 0 / 30%);

}

.modal-content:before { content: "×"; font-size: 30px; line-height: 1em; pointer-events: none; margin-bottom: 10px; position: absolute; top: 10px; right: 20px; }

.modal-content:hover:before { opacity: .7; }


.modal .modal-title{height: 38px; width: 100%; margin-left: -30px; margin-top: -50px;position: absolute;z-index: -2;}
.modal .close { position: absolute; width: 40px; height: 38px; top: 0; right: 0; z-index: -1; }

.buttons { text-align: right; padding-top: 20px; }

.modal button { width: 80px; line-height: 36px; border-radius: 6px; text-align: center; background-color: #fadb00; color: #000; cursor: pointer; }

.modal button:hover { opacity: .7; }

.modal > .shade{

	position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    z-index: -1;

}