.modalDialog {
  position 					: fixed;
  font-family 				: Arial, Helvetica, sans-serif;
  top 						: 0;
  right 					: 0;
  bottom 					: 0;
  left 						: 0;
  background 				: transparent;
  z-index 					: 2;
  opacity 					: 0;
  -webkit-transition 		: opacity 1s ease-in;
  -moz-transition 			: opacity 1s ease-in;
  -ms-transition 			: opacity 1s ease-in;
  -o-transition 			: opacity 1s ease-in;
  transition 				: opacity 1s ease-in;
  pointer-events 			: none;
  min-width 				: 300px;
}

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

.modalDialog > div {
  margin 					: 3% 10% 10% 10%;
  position 					: relative;
  -webkit-border-radius		: 3px;
  -moz-border-radius		: 3px;
  -ms-border-radius			: 3px;
  -o-border-radius			: 3px;
  border-radius 			: 3px;
  -webkit-box-shadow		: 0px 0px 15px 1px #000;
  -moz-box-shadow			: 0px 0px 15px 1px #000;
  -ms-box-shadow			: 0px 0px 15px 1px #000;
  -o-box-shadow				: 0px 0px 15px 1px #000;
  box-shadow				: 0px 0px 15px 1px #000;
  background 				: white;
}

.modalDialog > div p {
  z-index 					: 4;
}

.fermeslide {
  background 				: #1812f8;
  color 					: orange;
  line-height 				: 23px;
  position 					: absolute;
  right 					: -10px;
  top 						: -10px;
  text-align 				: center;
  width 					: 24px;
  text-decoration 			: none;
  font-weight 				: bold;
  -webkit-border-radius 	: 12px;
  -moz-border-radius 		: 12px;
  -ms-border-radius 		: 12px;
  -o-border-radius 			: 12px;
  border-radius 			: 12px;
  -webkit-box-shadow 		: 1px 1px 3px #000;
  -moz-box-shadow 			: 1px 1px 3px #000;
  -ms-box-shadow 			: 1px 1px 3px #000;
  -o-box-shadow 			: 1px 1px 3px #000;
  box-shadow 				: 1px 1px 3px #000;
  z-index 					: 5;
}

.fermeslide:hover { background: #1812f8; color: red; }

@media all and (max-width:640px) {
  .modalDialog > div {padding-top:40px;}
}

@media all and (max-height:550px) {
  .modalDialog > div {max-height:450px;overflow-y:scroll;}
  .fermeslide {right:5px;top:5px;}
}

@media all and (max-height:500px) {
  .modalDialog > div {max-height:400px;}
}

@media all and (max-height:450px) {
  .modalDialog > div {max-height:350px;}
}

@media all and (max-height:400px) {
  .modalDialog > div {max-height:300px;}
}

@media all and (max-height:350px) {
  .modalDialog > div {max-height:250px;}
}

@media all and (max-height:300px) {
  .modalDialog > div {max-height:200px;}
}

@media all and (max-height:250px) {
  .modalDialog > div {max-height:150px;}
}

#close {display:none;}