/*General	
-------------------------------------------- */

* {
	box-sizing: border-box;
	scrollbar-color: rgb(38, 17, 130) transparent; /*thumb and track color*/ 
	
  }
  
  *::-webkit-scrollbar {
	width: 0;
  }
  
  *::-webkit-scrollbar-track {
	width: 0;
	background: transparent;
  }
  
  *::-webkit-scrollbar-thumb {
	width: 0;
	background: transparent;
	border: none;
  }
  
  * {
	-ms-overflow-style: none;
  }

body {
	margin: 0;
	border: 0;
	padding: 0;
	margin-top: 50px;
	font-weight: 450;
	font-size: 15px;
	font-family: 'Helvetica', cursive;
	background-color: white;
}

#screen {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	margin: 0;
	border: 0;
	padding: 0;
}

.container {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	margin: 0 auto;
	padding-left: 5%;
	padding-right: 5%;
	max-width: 100%;	
	overflow: hidden;
}

h1 {
	margin: 0;
}

h2,h3,h4,h5 {
	color: black;
	text-transform: uppercase;
}

p,span {
	color: black;
}

img {
	max-width: 100%;
	vertical-align: middle;
}

.imgs-back {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	border: none;
	margin: 0;
	padding: 0;
}

a {
	font-weight: 600;
	text-decoration: none;
}

ul {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;

}

ol, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------- */

/* E-Class */

.none {
	list-style: none;
}

.margintop {
	margin-top: 10%;
}

.halfmargintop {
	margin-top: 5%;
}

.halfmarginbottom {
	margin-bottom: 5%;
}

.halfpaddigbottom {
	padding-bottom: 5%;
}

.paddingtop {
	padding-top: 10%;
}

/* ------------------------------------------------------ */

/* Nav */

nav {
	z-index: 999;
	width: 100%;
	height: 70px;
	position: fixed;
	float: left;
	top: 0;
	left: 0;
	right: 0;
	background-color: white; 
	margin-bottom: 0;
	overflow: hidden;
	padding-left: 5%;
	padding-right: 5%;
	display: flex;
	align-items: center;
	filter: drop-shadow(0px 0px 5px #0003);
}

	.nav-container {
		position: relative;
		float: left;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	/* Marca */

		.nav-marca {
			max-height: 100%;
			width: 20%;
			position: relative;
			float: left;	
			display: flex;
			align-items: center;
			padding: 3%; 	
		}

			.nav-marca img {
				width: auto;
				display: block;
				max-height: 100%;
			}

	/* Menú	 */

		.nav-menu {
			width: 100%;
			position: relative;
			height: 100%;
			bottom: 0;
			margin: 0;
			padding: 0;
		}

			.nav-manu > ul {
				position: relative;
				float: right;
				width: 100%;
				height: 100%;
				margin: 0;
				display: flex;
				align-items: center;
			}

			.nav-menu > ul > li {
				width: 15%;
				height: 100%;	
				font-family: 'Barlow Condensed', cursive;
				text-align: center;
				display: flex;
				align-items: center;
				position: relative;
				float: right;
				margin-right: 2%;
				margin-bottom: 0;
			}

			.nav-menu > ul > li > a {
				display: block;	
				width: 100%;
				height: 100%;
				text-transform: uppercase;
				font-size: 120%;
				color: rgba(127, 39, 123);
				padding-top: 10%;
				padding-bottom: 10%;
				transition: all 0s linear 0s;
				background-color: white;
			}
	
			.nav-menu > ul > li > a:hover {
				color:  white;
				background-color: rgba(127, 39, 123);
			}

/* ------------------------------------------------------ */

/* Header */		

head {
	position: relative;
	height: auto;
	width: 100%;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
}

.carousel {
	position: relative;
	width: 100%;
	margin-top: 70px;
	overflow: hidden;
}

.carousel ol {
	display: flex;
	padding: 0%;
	width: 1000%;
	animation: slide 20s infinite alternate ease-in-out;
	}

.carousel li {
	width: 100%;
	list-style: none;
	position: relative;
}

/* .carousel ol img {
	width: 100%;
} */


@keyframes slide {
	0% { margin-left: 0%; }
	10% { margin-left: 0%; }

	15% { margin-left: -100%; }
	20% { margin-left: -100%; }

	25% { margin-left: -200%; }
	30% { margin-left: -200%; }

	35% { margin-left: -300%; }
	40% { margin-left: -300%; }

	45% { margin-left: -400%; }
	50% { margin-left: -400%; }

	55% { margin-left: -500%; }
	60% { margin-left: -500%; }

	65% { margin-left: -600%; }
	70% { margin-left: -600%; }

	75% { margin-left: -700%; }
	80% { margin-left: -700%; }

	85% { margin-left: -800%; }
	90% { margin-left: -800%; }

	95% { margin-left: -900%; }
	100% { margin-left: -900%; }

}

.casita {
	z-index: 998;
	width: 20%;
	height: auto;
	position: absolute;
	/* position: fixed; */
	float: center;
	margin-top: 23%;
	margin-left: 5%;
}


 /* Frase pie de carousel  */

  .pie {
	height: auto;
	background-color: black;
	margin: none;
	border: none;
	text-align: center;
   }
		.pie > h3 {
			padding: 6px;
			font-size: 20px;
			font-family: 'Barlow Condensed', cursive;
			color: #ffd9f8;
			margin: 0;
		}

/* Cuerpo */
 /* ------------------------------------------------------------------------- */

.cajas-al50 {
	height: 380px;
}

.cajas-al50 > div {
	height: 100%;
	background-color: rgb(255, 255, 255);
	
}

	.cajas-al50 h4 {
		color: rgba(127, 39, 123);
		font-size: 100px;
		font-family: 'Barlow Condensed', cursive;
		padding-left: 5%;
		padding-right: 5%;
	}

	.cajas-al50 span {
		font-weight: 700;
	}

	.back {	
		width: 50%;
		position: relative;
		float: right;
		z-index: 30;
		padding-top: 2%;		
	}

		.back p {
			padding-top: 3%;
			padding-left: 5%;
			padding-right: 5%;
			font-size: 25px;
			font-family: 'Barlow Condensed', cursive;
		}

	.front {	
		width: 45%;
		z-index: 50;
		position: absolute;
		background-color: black;
	}

		.sr {
			margin-left: 45%;
		}

		/*.front:hover {
			z-index: 1;
			transition: transform 0.1s;
		} */

	.izq {
		text-align: left;
	}	

	.der {
		text-align: right;
	}	

/* Caracteristicas */
/* ----------------------------------------------------------------- */

.other {
	background-color: rgb(74, 20, 71);
	padding-top: 10%;
	padding-bottom: 10%;
}

.caract {
	width: 48%;
	position: relative;
	float: left;
	padding: 1%;
	border: 5px solid rgba(127, 39, 123);
}

.chu {
	margin-left: 4%;
}

.pad {
	text-align: center;
	font-family: 'Barlow Condensed', cursive;
}

	.pad h4 {
		color: rgba(127, 39, 123);
		font-size: 30px;
		padding-bottom: 4%;
	}

	.pad li {		
		margin-bottom: 5px;
		font-size: 23px;
		padding-top: 2%;
	}

/* Mascotas -------------------------------------------------------------------*/

.petf {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	background-color: rgba(127, 39, 123);
	border: 5px solid #cfb2cb;
	margin-top: 15%;
	
}	

	.petf div {
		/* margin-top: 2%; */
		/* margin-left: 20%; */
		padding-left: 18%;
		padding-right: 17%;
		display: flex;
		align-items: center;
	}

	.petf h5 {
		position: relative;
		float: left;
		color: white;
		margin: 2%;
		text-align: center;
		font-size: 500%;
		font-family: 'Barlow Condensed', cursive;
	}

	.patas {
		position: relative;
		float: left;
		width: 4%;
		margin: 3%;
	}

/* Imagenes	 */
/* ------------------------------------------------ */

.relleno {
	width: 100%;
	position: relative;
	float: left;	
}	

/* Habitaciones */
/* ------------------------------------ */

.habitaciones {
	width: 100%;
	position: relative;
	float: left;	
}

.names {
	height: auto;
	background-color: black;
	margin: none;
	border: none;
	text-align: center;
}
		.names > h5 {
			padding: 6px;
			font-size: 20px;
			font-family: 'Barlow Condensed', cursive;
			color: #ffd9f8;
			margin: 0;
		}

	.nomargin {
		height: 500px;
		margin: 0;
		padding: 0;	
	}

	/* Slider 1 Habitaciones */
	

	.carousel1 {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.carousel1 ol {
		display: flex;
		padding: 0%;
		width: 700%;
		animation: slide1 14s infinite alternate ease-in-out;
		}
	
	.carousel1 li {
		width: 100%;
		list-style: none;
		position: relative;
	}

	@keyframes slide1 {
		0% { margin-left: 0%; }
		14.3% { margin-left: 0%; }
	
		15% { margin-left: -100%; }
		28.6% { margin-left: -100%; }
	
		30% { margin-left: -200%; }
		42.9% { margin-left: -200%; }
	
		44% { margin-left: -300%; }
		57.2% { margin-left: -300%; }
	
		60% { margin-left: -400%; }
		71.5% { margin-left: -400%; }
	
		75% { margin-left: -500%; }
		85.8% { margin-left: -500%; }
	
		90% { margin-left: -600%; }
		100% { margin-left: -600%; }
	
	}


	/* Slider 2 Habitaciones */
	

	.carousel2 {
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.carousel2 ol {
		display: flex;
		padding: 0%;
		width: 400%;
		animation: slide2 8s infinite alternate ease-in-out;
		}
	
	.carousel2 li {
		width: 100%;
		list-style: none;
		position: relative;
	}

	@keyframes slide2 {
		0% { margin-left: 0%; }
		25% { margin-left: 0%; }
	
		30% { margin-left: -100%; }
		50% { margin-left: -100%; }
	
		55% { margin-left: -200%; }
		75% { margin-left: -200%; }
	
		80% { margin-left: -300%; }
		100% { margin-left: -300%; }
	
	}

	


/* Formulario */
/* ------------------------------------------------------ */

.detalles {
	border: 5px solid #cfb2cb;
	padding: 2%;
	height: 355px;	
}

.formulario {
	z-index: 900;
	position: absolute;
	width: 100%;
	padding-top: 2%;
	max-height: 300px;
}

.marginleft {
	margin-left: 32%;
}

.map {	
	width: 50%;
	position: relative;
	float: left;
	z-index: 30;		
}

/* Guespedes */
/* --------------------------------------------- */
.ancho {
	height: 20%;
}

.guespedes {
	width: 33%;
	padding-left: 7%;
	position: relative;
	float: left;
	z-index: 30;
}






/* Footer */
/* --------------------------------------------- */

footer {
	position: relative;
	float: left;
	width: 100%;
	height: 190px;
	background-color: black;
	padding-top: 2%;
	padding-bottom: 5%;
}

    .marginright {
		margin-right: 5%;
	}

	/* Nav - Footer */
/* --------------------------------------------- */

	.nav-footer {
		position: relative;
		float: left;
		width: 30%;
		height: 135px;
		font-family: 'Barlow Condensed', cursive;
	}

		.nav-footer ul {
			margin-top: 8%;
			width: 40%;
			height: 100%;
			margin-left: 30%;

		}

		.nav-footer li {
			margin-top: 1%;
		}

		.nav-footer a {
			color: #f1f0e9;
			display: block;	
			width: 100%;
			height: 100%;
			text-transform: uppercase;
			transition: all 0s linear 0s;
		}

		.nav-footer a:hover {
			color:  black;
			background-color: #f1f0e9;
		}

	/* Resdes - Footer */
/* --------------------------------------------- */

	.redes {
		position: relative;
		float: left;
		width: 30%;
		height: 135px;
		padding-left: 11%;
	}	

		.size {
			width: 30px;
			height: 30px;
			background-size: 30px;
		}

		.abajo {
			position: absolute;
			margin-top: 60px;
		}

		.redes li {			
			position: relative;
			float: left;
			margin: 10px;
		}

		.redes a {
			position: relative;
			float: left;
			margin: 10px;
		}

		.fb {
			background-image: url("../img/icons/fb1.png");		
		}

		.fb:hover {
			background-image: url("../img/icons/fb2.jpg");
		}

		.in {
			background-image: url("../img/icons/in1.png");
		}

		.in:hover {
			background-image: url("../img/icons/in2.jpg");
		}

		.gm {
			background-image: url("../img/icons/gm1.png");
		}

		.gm:hover {
			background-image: url("../img/icons/gm2.jpg");
		}

		.gp {
			background-image: url("../img/icons/gp1.png");
		}

		.gp:hover {
			background-image: url("../img/icons/gp2.jpg");
		}

/* Datos - Footer */
/* --------------------------------------------- */

	.datos {
		position: relative;
		float: left;
		width: 30%;
		text-align: center;
		margin-top: 1%;
		font-family: 'Barlow Condensed', cursive;
	}

		.datos h4 {		
			font-size: 150%;	
			color: #f1f0e9;
		}

		.datos li {			
			color: #f1f0e9;
		}

		.datos:hover h4 {
			color:  black;
			background-color: #f1f0e9;
		}

		.datos:hover li{
			color:  black;
			background-color: #f1f0e9;
		}

/* Copy  */
/* --------------- */

.copy {
	width: 100%;
	margin-top: 5%;
	text-align: center;
}		

	.copy h6 {	
		font-size: 70%;	
		color: gray;
	}