#modalOverlay {
	width:100%;
	height:100%;
	z-index:90001; /* places the modal overlay between the main page and the modal dialog*/
	background-color:#000;
	opacity:0.5;
	position:fixed;
	top:0;
	left:0;
	display:none;
	margin:0;
	padding:0;
}

#modal {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	padding: 1em;
	border: thin #000 solid;
	background-color:#fff;
	z-index:900002; /* places the modal dialog on top of everything else */
	position:fixed;
	top:10%;
	left:25%;
	display:none;
    text-align: left;
}

#modal h1 {font-size: 1.5em; padding-right: 3em;}

.modalCloseButton {
    font-size: 2em;
    color: #2079ac;
	float:right;
	position:absolute;
	top:.2em;
	right:.2em;
    border: 0; outline: 0; background: none; cursor: pointer;
}
.modalCloseButton:before {
	content: '\e90b';
    font-family: "dabora-icons";
}
.modalCloseButton:hover, .modalCloseButton:active, .modalCloseButton:focus {color: #2231a8;}

.screen-reader-offscreen {
	position:absolute;
	left:-999999px;
	width:1px;
	height:1px;
	top:auto;
}


/* 1000 - Devices 1000px and less */

@media only screen and (max-width: 1000px) {

#modal {width: 90%; left: 5%; top: 10%;}

}

/* 768 - Devices 1000px and less */

@media only screen and (max-width: 768px) {

#modal {width: 100%; height: 100%; left: 0; top: 0; font-size: .8em; line-height: 1.1em; overflow: scroll;}

}