html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #CCFFFF;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: sans-serif;
	overflow: hidden;
}
main {
	display: block;
	width: 1920px;
	height: 1080px;
}
#pantalla {
	position: absolute;
	bottom: 0px;
	cursor: crosshair;
}
#oficina {
	display: block;
	width: 1920px;
	height: 1080px;
	position: absolute;
	background: transparent url('1920/oficina-promocion-economica.png') repeat-x 0 0;
}
#orientadora {
	display: block;
	position: absolute;
	bottom: 128px;
	left: 576px;
	width: 512px;
	height: 512px;
	background: transparent url('512/secretaria-tecleando.gif') no-repeat 0 0;
}
#persona {
	display: block;
	position: absolute;
	bottom: 140px;
	left: 1536px;
	width: 448px;
	height: 448px;
	background: transparent url('512/espai_andar.gif') no-repeat 0 0;
	background-size: 448px;
}
#pregunta {
	display: none;
	position: absolute;
	bottom: 640px;
	right: 976px;
	padding: 0.5em 1em;
	background-color: white;
	border: 2px solid #333;
	border-radius: 32px;
	font-size: 2em;	
}
.respuesta {
	display: none;
	position: absolute;
	bottom: 780px;
	left: 976px;
	padding: 0.5em 1em;
	background-color: white;
	color: #F33;
	border: 2px solid #F33;
	border-radius: 32px;
	font-size: 2em;	
}
#respuesta2 {
	bottom: 680px;
}
#respuesta3 {
	bottom: 580px;
}
.respuesta:hover {
	background-color: #F33;
	color: white;
	border-color: white;
	cursor: pointer;
}