@charset "utf-8";
/* CSS Document */


* {padding: 0; margin: 0;}
a {outline: 0; text-decoration:none; color:#C40;}
a:hover{color:#620;}
a img {border-width:0;}


body{
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#6B4417;
	background: url("fotos/fondos/inicio.jpg") no-repeat center top fixed, #FADEC9;
}


header{
	background: linear-gradient(#FFF, #FF9200) ;
	box-shadow: 0 5px 10px #444;
	min-height: 101px;
	text-align: center;
}


#todo{
	position: relative;
	margin: 0 auto;
	width: 95%;
	max-width:1250px;

}


#barra{
	background: #562400;
	background: #562400 linear-gradient(to bottom, #562400,#813700);
	margin: 0 -2.5%;
	padding: 5px 3% 8px 3%;
}
#barra a{
	margin: 0 2%;
	white-space: nowrap;
	font-size: 0.9em
}
#barra a img{
	position: relative;
	top: 3px;
}

#idiomas{
	display: inline-block;
	margin: 0 50px 0 3px;
	white-space: nowrap;
}

#idiomas a img{
	position: relative;
	width: 22px;
	margin: 0 5% 0 0;
	top: 6px;
	transition: top 0.3s;
}
#idiomas a:hover img{
	top: -1px;
	transition: top 0.1s;
}
#logo{
	display:block;
	width: 100%;
	max-width: 296px;
	padding-top: 20px;
	text-align: center;
}
#logo img{
	width: 90%;
	max-width: 220px;
}

#menuhorizontal{
	clear: right;
	padding: 4px 0 10px 30px;
	text-align: right;
}
#menuhorizontal a{
	display:inline-block;
	margin: 3px 2px 0 2px;
	padding: 4px 6px;
	color:#666;
	text-transform: uppercase;
	font-size:14px;
	border: #999 1px solid;
	border-radius: 4px;
	background: #FFF;
}

#menuhorizontal a:hover{
	color:#FFF;
	border-color:#FB9120;
	background:#FB9120;
	transition: color 0.3s;
}

#central{
	background: rgba(255,255,255,0.8);
	border:#CCC 1px solid;
	padding: 20px 4% 30px 4%;
	height: auto !important;
	min-height: 300px;
	margin-bottom: 50px;
}
#lateral{
	float: left;
	margin: 20px 0;
	background: rgba(0,0,0,0.3)
}
#lateral #video{
	width: 98%;
	border:#FF9200 2px solid;
}
#lateral strong{
	display: block;
	padding: 10px 0;
	text-align: center;
	font-size: 19px;
	color: #FFF;
	text-transform: uppercase;
}
#lateral .widgetHotelsForm{
	padding: 20px 0 50px 0;
	color:#FFF;
	margin-left: 40px;
}

#botonesportada{
	padding: 30px 0;
}
#botonesportada a{
	display: inline-block;
	margin: 2px;
	padding: 10px;
	background: rgba(255,255,255,0.7);
	text-align: center;
	font-size: 13px;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
}
#botonesportada a:hover{
	color: #FFF;
	background:#FF9200;
	transition: background 0.4s;
}

#botonesportada a:hover img{
    transform: rotate(360deg);
	transition: transform 0.4s;
}

h1{
	color:#D16C08;
	font-size: 32px;
    font-weight: bold;
    line-height: 28px;
    text-shadow: 1px 1px 1px #ffffff;
    text-decoration: underline;
}

h2{
	text-decoration: underline;
	text-transform: uppercase;
	font-size: 16px;
	color:#D16C08;
	margin: 15px 2%;
}

#central p{
	padding: 6px 3%;
	font-size: 16px;
	line-height:140%;
	font-weight: bold;
	color:#554;
}

#central p strong{
	font-size:17px;
	color:#000;
}
.margen-corto{
	padding: 3px 50px !important;
}
.derecha{
	float:right;
	margin-left: 40px;
	width: 460px;
}

.galeria{
	padding: 20px 5%;
	text-align: center;
}
.galeria a img{
	padding: 1px;
	border: #FB9120 5px solid;
	margin: 10px;
}

.galeria a:hover img{
	border-color: #000;
	transition: border 0.5s;
}

.centrado{
	text-align: center;
	padding: 30px 0;
}

.youtube {
	display: block;
	position: relative;
    margin: 30px auto;
    max-width: 1000px;

    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    }
.youtube iframe, .youtube object, .youtube embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

li{
	margin: 1px 10%;
	list-style-type:square;
	font-size: 15px;
}
#direccion{
	display:block;
	position:relative;
	margin: 0 auto 25px auto;
	width: 90%;
	max-width: 500px;
	padding: 15px 2%;
	background:#FADEC9;
}

.btnenlace{
	display:block;
	position:relative;
	margin: 40px auto;
	background:#FFF;
	border:#666 1px solid;
	border-radius: 5px;
	padding: 10px;
	width: 90%;
	max-width: 550px;
	font-weight:bold;
	text-align:center;
	font-size: 16px;
	letter-spacing: 1px;
	color:#FB9120;
}

.btnenlace:hover{
	color: #FFF;
	background: #FB9120;
}

.btnofertas{
	display:block;
	float:right;
	margin: 10px 30px 20px 30px;
	background:#FF6835;
	border:#000 1px solid;
	padding: 15px;
	width: 180px;
	font-weight:bold;
	font-style:italic;
	text-align:center;
	box-shadow:#856941 1px 1px 1px;
	font-size: 16px;
	color:#FFF;
}
.btnofertas:hover{
	color:#FE0;
}
.letrapequena{
	padding: 5px 2% !important;
	font-size: 12px !important;	
}
.letrapequena span{
	transform: scale(1.4);
	display: inline-block;
}

#visita360{
	display: block;
	position: relative;
	margin:20px auto;
	width: 90%;
	height: 480px;
	box-shadow: #654 0 2px 3px;
}
	
footer{
	position:relative;
	clear:both;
	margin-top: 20px;
	padding: 5px 2%;
	background: #FFF;
	color:#000;
	font-size: 14px;
	line-height: 180%;
	box-shadow: 0 -5px 10px #444;
}

footer a{
	color:#D16C08;
}
footer a:hover{
	color:#000;
}

#cedroalto{
	float: right;
	padding: 0 5%;
	font-size: 14px;
}
#cedroalto img{
	display: block;
	margin-top: 6px;
	padding: 4px 10px;
	z-index: 10;
}
#cedroalto:hover img{
	background: #000;
	border-radius: 3px;
}


#cartasrondapass{
	text-align: center;
	padding: 20px 0;
}
#cartasrondapass h2{
	text-align: center;
	font-size: 36px;
	text-decoration: none;
	letter-spacing: 20px;
}
#cartasrondapass a{
	display: inline-block;
	text-align: center;
	padding: 20px 2%;
	font-weight: bold;
	font-size: 18px;
}
#cartasrondapass a img{
	display: block;
	position: relative;
	margin: 5px auto;
	padding: 1px;
	border:#ff9200 5px solid;
	transition: border 0.6s;
}
#cartasrondapass a:hover{
	transition: border 0.4s;
}
#cartasrondapass a:hover img{
	border-color: #000
}



.error{
	position:relative;
	margin: 40px auto;
	padding: 100px 5% 40px 5%;
	width: 80%;
	max-width: 500px;
	background:#FFF url("img/error.png") no-repeat center 20px;
	border:#FE8A00 5px solid;
	text-align: center;
}
.error strong{
	display:block;
	font-size: 15px;
	margin-bottom:15px;
}
.error a{
	display: inline-block;	
	background: #EABA92;
	padding: 5px 5%;
	width: 50%;
	max-width: 70px;
	color:#000;
	border-radius: 3px;
}
.error a:hover{background:#F88D1F;}

.galleria-container{
	margin: 20px auto;
	background:rgba(255,146,0,0.2);
}


@media screen and (max-width: 400px) {
	#borde{padding: 0;}
	#lateral{display: none;}
	.galeria{padding: 0;}
	.galeria a img{width: 96%; margin: 2% 0;}
}


@media screen and (min-width: 600px) {
	header{
		background: #FFF;
	}
	#barra{
		float: right;
		text-align: right;
		width: 55%;
		max-width: 580px;
		margin-right: 5%;
		padding-top: 5px;
		background: transparent;
	}
	#barra a{
		font-weight: bold;
	}
	#barra a:hover{
		color:#FEA;
	}
	
	#logo{
			float: left;
	}

	#idiomas a img{
		width: auto;
	}

	#lateral{
		width: 95%;
		max-width: 220px;
		padding: 2%;
	}	
	#btnpromociones, #btn360{
		position: relative;
		top: 15px;
		margin: 30px 10px;
	}

	#direccion{
		padding: 15px 5% 15px 100px;
		background:#FADEC9 url("img/direccion64.png") no-repeat 20px center;
	}
	h1{
			padding: 10px 0 10px 3%;
			text-align: left;
	}

	.galleria{
		padding: 0 10%;
	}

	.mitad{
		float: left;
		width: 40%;
		margin: 0 5% 15px 5%;
	}

	header > div, footer > div{
		position: relative;
		margin: 0 auto;
		width: 95%;
		max-width:1250px;
	}

}