.reveal-modal-bg { 
position: fixed; 
height: 100%;
width: 100%;
background: rgba(0,0,0,0.5);
z-index: 2000;
display: none;
top: 0;
left: 0; 
}

.reveal-modal {
visibility: hidden;
top: 100px; 
left: 50%;
margin-left: -155px;
width: 270px;
padding: 20px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 2001;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-o-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
box-shadow: 0 0 10px rgba(0,0,0,.4);
}
	
.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
font-size: 14px;
font-size: 1.4rem;
position: absolute;
top: 20px;
right: 20px;
color: #1e1e1e;
color: rgba(167,167,167,0.5);
font-weight: bold;
font-family: 'WebSymbolsRegular';
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
} 
.reveal-modal .close-reveal-modal:hover {
color: #1e1e1e;
color: rgba(167,167,167,1);
}

.reveal-modal .row {
	min-width: 0;
}	

@media handheld, only screen and (device-width: 768px), (device-width: 800px) {
.reveal-modal-bg { position: absolute; }

.reveal-modal,
.reveal-modal.small,
.reveal-modal.medium,
.reveal-modal.large,
.reveal-modal.xlarge { width: 60%; top: 30%; left: 15%; margin-left: 0; padding: 5%; height: auto; }
}

@media handheld, only screen and (max-width: 767px) {
.reveal-modal-bg { position: absolute; }

.reveal-modal,
.reveal-modal.small,
.reveal-modal.medium,
.reveal-modal.large,
.reveal-modal.xlarge { width: 80%; top: 15%; left: 5%; margin-left: 0; padding: 5%; height: auto; margin-bottom: 10px; }
}