.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 20%;
 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;
}

.modalDialog > div {
 width: 80%;
 position: relative;
 margin: 10% Auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background-color: #FFFFFF;
 background: linear-gradient(#FFFFFF, #f8f8f8);
 cursor: Default;
}

.close {
 background-color: #f8f8f8;
 color: #000;
 line-height: 25px;
 position: Absolute;
 left: -12px;
 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: #E7B404;
} 

/* Layout für Tablet-PCs: 481 bis 768px. Erbt Stile vom: Layout für Mobilgeräte. */
@media only screen and (min-width: 1000px) {
.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 50px;
 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;
}
	
	} 


/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
@media only screen and (min-width: 769px) {
	.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 50px;
 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;
}

	}