#mask {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9000;
	background-color:#8F8F8F;	
}
  
#boxes .window {
	display: block;
	position: absolute;
	left: 0;
	top: 0;	
	z-index: 9999;
	padding: 20px;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: #868D8E; 
	font-size: 15px;
	background-color: #FFFFFF;
}

.close {
	display: block; 
	text-align: right; 
} 

#boxes #solinforma {/* Mais informaçãoes*/
	display: none;
	position: fixed;
	float: left;
	width: 80%;
	height: auto;
	padding: 5%;
	left: 5%;
	top: 7%;
}

#boxes #agenda {/* agenda*/
	display: none;
	position: fixed;
	float: left;
	width: 80%;
	height: auto;
	padding: 5%;
	left: 5%;
	top: 7%;
}

@media only screen and (min-width: 585px) {
#boxes #solinforma {width: 70%;	padding: 2.5%; left: 12.5%;}
#boxes #agenda {width: 70%;	padding: 2.5%; left: 12.5%;}
}

@media only screen and (min-width: 768px) {
#boxes #solinforma {width: 60%;	left: 17.5%; top: 15%;}
#boxes #agenda {width: 60%;	left: 17.5%; top: 15%;}
}

@media only screen and (min-width: 1024px) {
#boxes #solinforma {width: 50%;	left: 22.5%;}
#boxes #agenda {width: 50%;	left: 22.5%;}
}

@media only screen and (min-width: 1280px) {
#boxes #solinforma {width: 30%;	left: 32.5%;}
#boxes #agenda {width: 30%;	left: 32.5%;}
}

@media only screen and (min-width: 1600px) {
#boxes #solinforma {width: 20%;	left: 37.5%;}
#boxes #agenda {width: 20%;	left: 37.5%;}
}