.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 pointer-events: None;
 
}

.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}


	@media screen and (min-width: 100px) and (max-width: 500px) {
.modalDialog > div {
  width: 95%;
  margin: 10% Auto;

}
	}
	@media screen and (min-width: 501px) and (max-width:1280px) {
.modalDialog > div {
  width: 70%;
  margin: 5% Auto;

}
	}
	@media screen and (min-width: 1281px) {
.modalDialog > div {
  width: 50%;
  margin: 1% Auto;

}
	}
	
	.modalDialog > div {
 position: relative;
 padding: 5px 5px 5px 5px;
 border-radius: 10px;
 background-color: #FFFFFF;
 background: linear-gradient(#FFFFFF, #999999);
 cursor: Default;
}
	

.close {
 background-color: #ff0000;
 color: #FFFFFF;
 line-height: 25px;
 position: Absolute;
 right: 20px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000000;
}

.close:hover {
 background-color: #00D9FF;
}