@font-face{ font-family:'openSans-regular'; src: url('../font/OpenSans-Regular.woff'); }

#protector{width:100%; overflow:hidden; }
#protector > img { 
	z-index:1;
	position:absolute;
	max-width:50%;
	max-height:70%;
	right:0px;
	bottom:0px;
}
#recomendamos { 
	z-index:2;
	width:75%;
	background: rgba(255,255,255, 0.2);
	padding: 20px;
	font-size: 18px;
	z-index:2;
	position:relative;
	float:left;
	margin-right:-10000px; /*to allow overlap*/
}

#direccion { font-size:20px; }
html{
	background-image: url(../img/beach-hd.jpg); 
	background-size: cover;
	max-height:100%;
	min-height:100% !important;
	overflow:hidden;
}
body{
	max-height:100%;
	font-family: openSans-regular;
}

#header{
	width: 100%;
	background:rgba(255,255,255, 0.5);
	overflow: hidden;
	font-size:13px;
	position:absolute;
	top:0px;
}
#header > img {
	max-width:45%;
	margin:5px 0px;
}
#result{
	text-align: center;
	color: white;
	text-shadow:-1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5), 1px 1px 0 rgba(0,0,0,0.5);
	letter-spacing: 2px;
	margin: 70px 50px 15px;
	font-size: 21px;
}

#title{ font-size: 18px; }

#slogan{
	float: right;
	text-align: right;
	margin: 10px;
	max-width:45%;
}
html, body {
  max-height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#protector { position:relative; }

@media screen and (max-width:1280px) {
	html { background-image: url(../img/beach.jpg);  }
}
@media screen and (max-width:460px) {
	#result {margin: 70px 30px 7px}
}
@media screen and (max-height:320px){
	#header > img { max-width:25%; }
	#result { margin: 60px 20px 5px; }
	#protector > img { max-height: 100%; }
}