@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
html,body{
	height:auto;
	backgroundx:linear-gradient(45deg, #0F0, #36F, #969, #FF0);
	background-size: 150% 150%;
	animation: gradient 12s ease-in infinite;
	margin: 0 auto;
	font-family: "open sans", sans-serif;
	color: #333;
	background-colorx: #fff;
	padding: 0;
	margin: 0;
}

.centrar {
	text-align: center;

}

p {
	line-height: 25px;

}

a {
outline:none;
}

img  {
	vertical-align:bottom;
	border:none;
	max-width:100%;
	height:auto;

	}
	
	.general {
	margin: 0 auto;
	width: 100%;



}
.cabecera {
	width:100%;
	margin: 0 auto;
	height:101px;
	background-imagex:url(../im/cabecera.png);
	backgroundx: -moz-linear-gradient(left, #00eaff, #0078ff);
    backgroundx: -ms-linear-gradient(left, #00eaff, #0078ff);
    backgroundx: -webkit-linear-gradient(left, #00eaff, #0078ff);
    backgroundx: -o-linear-gradient(left, #00eaff, #0078ff);
	background-colorx:#000000;
	top:0px;






}
.logo {
	text-align:left;
	left:0px;
	position:relative;
	font-family: "open sans", sans-serif;
	top:20px;
	font-size: 48px;
	color: #333;
	padding:20px;
	text-decoration: none;
	text-shadowx: 1px 1px white, -1px -1px #09F;
	text-shadowx: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
	text-shadowx: 1px 1px #999;
	font-weight: 300;
	line-heightx: 25px;
	text-rendering: optimizeSpeed;
	font-style: italic;
}

h1 {
margin-bottom: 0; /* o el tamaño que quieres que exista entre h1 y el siguiente elemento */
	margin-bottomx: -3px; /* o el tamaño que quieres que exista entre h1 y el siguiente elemento */
	margin-top: 0; 
	font-weight: normal;
	font-style: normal;
	display:inline;
}
h2, h3, h4, h5, h6{
	margin-bottom: 5; /* o el tamaño que quieres que exista entre h1 y el siguiente elemento */
	margin-top: 5; 
	font-weight: normal;
	font-style: normal;
	color:#000;
}
.titulo{
	font-family: "Roboto", sans-serif;
	font-size: 60px;
	font-weight: 200;
	font-style: normal;
	text-decoration: none;
	color: #fff;
		line-heightt: 25px;


}
.block {
	display:block;
}

	.menucabecera {
	width: 100%;
	height:30px;
	background-color: #6699CC;
	topx:20px;
	floatt:left;
	margin-right:0px;
	text-align: center;
	display:none;

	


}
	.menu {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	height:20px;
	background-imagex:url(../im/menu.jpg);
	displayy:none;
	floatt:left;
	position:relative;

}

	.menu li {
	width:20%;
	list-style:none;
	margin: 0 auto;
	display: inline-block;


	}
	.menu li a{
	font-family: Lato, Verdana, Arial, Helvetica, sans-serif;
	font-size: 50px;
	font-weightx: bold;
	color: #6CF;
	text-decoration: none;
	position:relative;
	top:3px;
	}
	.contenido {
	width:100%;
	floatt:left;
	margin:0 auto;
	background-colorx:#0C0;
	background-imagex:url(../im/fondotrans.png);
	background-imagex:url(../im/fondo.jpg);
	background-repeat: repeat-x;
margin-topx:101px; /* para cabecera estatica */
positionx:relative;
	
}


.centrado {
	margin: 0 auto;
	width: 100%;
	max-width:1100px;
	min-width:200px;
	background-colorc:#9F9;
	height:101px;
	background-position: center top;
	background-repeat: no-repeat;
	background-image:url(../im/cabecera2.png);
	text-align: center;	
	
}
.centrado2 {
	margin: 0 auto;
	width: 100%;
	max-width:1004px;
	min-width:200px;
	padding-bottom:2%;
	padding-top:2%;

}
	.foto {
	width:100%;
	margin:0 auto;
	background-colorx:#EAE8E1;
	background-imagex:url(../im/fondo.jpg);
	backgroundx:url(im/animating.png) no-repeat center center;
	background-size: cover;
	floatt:left;
	heightx:200px;
filterr: opacity(80%);
z-index:3;
displayy:none;
}

.centradofoto {
	margin: 0 auto;
	width: 100%;
	max-width:960px; /* 960px -> -33% de 1920px */


}
.centradotxt {

	margin: 0 auto;
	max-width:960px;
	background-imagex:url(../im/fondotrans.png);
	padding-bottom:2%;
	float:none;



	
}
.centradotxt-p {

	margin: 0 auto;
	max-width:960px;
	background-imagex:url(../im/fondotrans.png);
	padding-bottom:2%;




	
}
.centradotxt-p2 {

	marginx: 0 auto;
	max-width:560px;
	background-imagex:url(../im/fondotrans.png);
	padding-bottom:%;
	background-color:#CCC;

}
.centradotxt-p3 {

	marginx: 0 auto;
	max-width:100%;
	background-imagex:url(../im/fondotrans.png);
	padding-bottom:%;
	background-color:#CCC;

}
.txt {
	margin: 0 auto;
	width: 100%;
	background-colorx:#fff;
	float:left;



}
.txt2 {
	margin: 0 auto;
	width: 100%;
	background-colorx:#fff;
	float:left;
	background-image:url(../im/collections.jpg);
	background-size:cover;

	height:500px;
}

.center {
	text-align:center;
}

	.col0 {
	width:100%;
	padding-left:0%;
	margin:0 auto;
	background-colorx:#06F;
	floatt:left;
justify-content: center;
    align-items: center;

}
	.col1 {
	width:23%;
	min-widthx:200px;
	float:right;
	background-color:#fff;
	padding-left:1%;
	padding-right:1%;
	background-imagex:url(../im/fondotrans.png);
	position: -webkit-sticky;  /* menu pegajoso scroll*/
    position: sticky;
    topx: -3500px;
	display:none;

}
	.col2 {
	width:100%;
	min-widthx:400px;
	float:left;
	background-colorx:#F5F4EB;
		background-imagex:url(../im/fondotrans.png);
	leftx: 1%;
	position:relative;
	padding-leftx:1%;
	padding-rightx:1%;


}
	.columna1 {
	width:100%;
	floatt:left;
	positionn:relative;
padding-bottomx:40px;
	display:grid;
	grid-template-areas:
	'der';
	grid-template-columns: 100%;
	grid-template-rows: auto;
	row-gap: 0px;
	column-gap: 0px;
justify-items: center;
  align-items: center;
  	background-colorx:#000;
}
.col1 .columna1 {
padding-top:12px;

}
.col2 .columna1 {
padding-top:40px;

}

.iz {
float:left;
	width:50%;
marginx: 1% 1% 1% 1%;
paddingx:4%;
background-colorx:rgb(0 0 0 / 50%);
position:relative;

}
.de {

	width:46%;
marginx: 1% 1% 1% 1%;
padding:2%;
background-colorx:rgb(0 0 0 / 10%);
float:left;
position:relative;

}
.iz2 {
float:left;
	width:48%;
margin: 1% 2% 1% 0%;
padding-leftx:2%;
background-colorx:rgb(0 0 0 / 50%);
position:relative;
background-colorx:#000;
}
.de2 {

	width:48%;
margin: 1% 1% 1% 1%;
padding-leftx:2%;
background-colorx:rgb(0 0 0 / 10%);
float:right;
position:relative;
background-color:#000;

}

.der {
	grid-area: "der";
	width:100%;
	position:relative;
	background-colorr:rgb(0 0 0 / 10%);
	box-shadowx: 0px 0px 10px #ccc;
	margin-bottomx:4%;
	background-colorx:#000;
	text-align: center;

}
.der-p {
	grid-area: "der";
	width:100%;
	position:relative;
	background-colorr:rgb(0 0 0 / 10%);
	box-shadowx: 0px 0px 10px #ccc;
	margin-bottom:4%;
	background-color:#efefef;
	text-align: center;
	padding:4%;

}
.botonx {

padding:20px 0px 20px 0px;



}
.boton {
	position:relative;
 width: fit-content;
box-shadow: 0px 0px 10px #ccc;
padding:20px;
color:#000;
  transition: ease-out 0.2s;
background-color:#fff;
text-decoration: none;
}

.boton:hover{
	width: fit-content;
	position:relative;
	box-shadow: 0px 0px 10px #ccc;
	padding:20px;
	background-color:#000;
	color:#FFF;
	transition: ease-in 0.2s;
	
}


	.pie {
	width:100%;
	padding-top:6px;
	padding-bottom:6px;
	margin:0 auto;
	background-color:#fff;
	text-align: center;
	clear:both;
  positionn: fixed;
  bottom: 0;


}


	@media only screen and (max-width: 876px) {
	.col1 {
	width:50%;
	min-width:300px;

	background-color:#CCC;
		margin: 0 auto !important;
		height:auto;
	float:none !important;
}
	.col2 {

width:98%;
	min-width:300px;
	left: 0%;
	position:relative;
	background-colorx:#0099CC;

}

.logos {
	
	text-align:left;
width:197px;
height:75px;
background-image:url(../im/logom.png);
background-size:197px 75px;

}
.logox {

	
	text-align:left;
	left:0px;
	position:relative;
	font-family: "Cormorant Garamond", sans-serif;
	top:38px;
	font-size: 60px;
	color: #000;
	padding:20px;
	text-decoration: none;
	text-shadowx: 1px 1px white, -1px -1px #09F;
	text-shadowx: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
	text-shadowx: 1px 1px #999;
	font-weight: 100;


}
.logo2 {
	text-align:left;
	left:35px;
	position:relative;
	font-family: "Lato", "Times New Roman", Times, serif;
	top:-10px;
	font-size: 25px;
	color: #fff;
	padding:0px;
	text-decoration: none;


}
.listadohotelestexto, .lishoteltextmarron{

	padding-left:8px;


}
.listadohotelesfoto, .lishotelfotomarron{
	padding-right:0px;


}
.listado{

	background-color:#000;
    width:100%;
	min-height:10px;


}
.masinfo{
	clear:left;
	background-color:#F00;
	float:none !important;
	bottom:0px;
}

.derr {
	float:none !important;
	position:relative;
	width:80%;
	margin: 0 auto;


}
.izqx {
	float:none !important;
	position:relative;
	widthx:80%;
margin: 0 auto;
}

	.columna1 {

	display:grid;
	grid-template-areas:
	'der';
	grid-template-columns: 50%;
	grid-template-rows: auto;
    justify-content:center;



}

.de {

width:100%;

float:none;
	

}
.iz {

	width:100%;

}
.de2 {

width:100%;
margin: 1% 0% 1% 4%;
padding-bottomx:4%;
margin-bottomx:10px;

}
.iz2 {

	width:100%;
	margin: 1% 4% 1% 0%;
padding-bottomx:4%;
margin-bottomx:10px;
floatt:none;
}
	}
/* ------------------------------------------------------------------------------
	 Portfolio
-------------------------------------------------------------------------------*/
#portfolio .portfolio-item {
	right: 0;
	marginx: 0 0 0px;
	paddingx: 0 0 0px 0px;
}
#portfolio .portfolio-item .portfolio-link {
	display: block;
	position: relative;
	margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .caption {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(58,54,54,.9);
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
	opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 20px;
	margin-top: -12px;
	text-align: center;
	font-size: 20px;
	color: #fff;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
	margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3 {
	margin: 0;
	color: #e9eaed;
	font-size: 17px;
	letter-spacing: 4px;
	text-transform: uppercase;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
	margin: 10px 0;
	color: #e9eaed;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
#portfolio * {
	z-index: 2;
}
.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}