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


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}




.arriba {

	margin-top: 0%;
	height: 15%;
	width: 100%;
	display: flex;
	background-image: url(../img/otono/otono_arriba.gif);
	/*imagen de hojas*/
	
	background-size: cover;
	




}

.maps {
	height: 100%;
	width: 25%;
	display: flex;

}

.maps p {

	color: black;
}

.telefono {
	margin-left: 5px;
	width: 20%;
	height: 100%;
	display: flex;

}

.whatarriba {
	margin-left: 5px;
	width: 15%;
	height: 100%;
	display: flex;
}



.correo {
	margin-left: 1%;
	height: 100%;
	width: 20%;
	display: flex;

}

.correo p {

	color: black;
}


.arriba img {
	display: groud;
	max-width: 200px;
	margin: 0px 15px;
	/*arriba, izquierda*/
	margin-top: 13px;
	margin-left: 25px;
	width: 20px;
	height: 20px;
}





.arriba p {
	font-weight: bold;
	/*texto en negrita*/
	margin-top: 15px;


}


.container {
	/*contenedor de logo y menu*/

	width: 100%;
	height: 25%;
	display: flex;
}

.hg {

	width: 140px;
	margin-left: 5px;
	margin-top: 25px;
	text-align: left;


}

.logo {

	width: 10%;


}


.logo img {
	float: left;
	width: 65px;
	height: 65px;
	margin-top: 8px;
	margin-left: 60px;

}


.menu {
	/*enlaces*/

	text-align: center;
	margin-left: 65px;
	width: 60%;
	padding: 15px;
	font-family: "Prince Valiant";
	font-size: 21px;


}

.menu li {


	margin-left: 17px;
	display: inline;
	list-style: none;
	z-index: 100;
	padding: 10px 10px;

}

.menu ul li:hover {
	opacity: 0.5;
	border-bottom-style: groove;



}



.habita {
	width: 100%;
	height: 25vh;
	background-image: url(../img/verano/costa.gif);
	background-size: cover;
	/*background-size: 100% 100%;*/
	background-repeat: no-repeat;

}

.habita h1 {
	font-family: cursive;
	font-size: 42px;
	color: white;
	position: absolute;
	text-align: center;
	left: 45%;
	top: 28%;
}



.container1 {
	width: 100%;
	height: 100%;
	display: inline-flex;


}


.container1 img {
	width: 100%;
	height: 100%;
	border-radius: 5px;

}

.lista {
	background-image: url(../img/fondo%20opacidad.jpg);
	background-repeat: no-repeat;
	width: 100%;
	height: 80vh;
	border-radius: 5px;

}

.lista h2 {
	text-align: center;
	margin-top: 15px;

}

.lista p {
	margin-top: 25px;
	text-align: center;
	font-family: martel;


}



.estandar {
	margin-top: 5px;
	display: flex;
	width: 100%;
	height: 100%;


}





.estandar img {
	width: 100%;
	height: 100%;
	border-radius: 5px;

}



.twin {
	margin-top: 5px;
	display: flex;
	width: 100%;
	height: 100%;

}



.twin img {
	width: 100%;
	height: 100%;
	border-radius: 5px;

}



.single {
	margin-top: 5px;
	display: flex;
	width: 100%;
	height: 100%;

}



.single img {
	width: 100%;
	height: 100%;
	border-radius: 5px;

}


.triple {

	margin-top: 5px;
	display: flex;
	width: 100%;
	height: 100%;

}



.triple img {
	width: 100%;
	height: 100%;
	border-radius: 5px;

}


/*comienzo de pie de pagina*/

footer.pie {

	background-image: url(../img/otono/otono_pie_media.gif);
	
	background-size:1366px 230px;
	border-style: groove double groove double;
	border-width: thin;
	border-color: #666;
	margin-top: 1px;
	display: flex;
	width: 100%;
	height: 25vh;
	font-weight: bold;

}



.logo_footer {
	width: 18%;
	display: flex;
	text-align: center;
}


.logo_footer h3 {
	margin-top: 30px;
	color: black;
}

.logo_footer h5 {

	color: black;
}


.logo_footer img {
	margin-left: 10px;

}

.rt {
	margin-left: 10px;
	width: 20%;
	height: 20%;


}

.rt p {
	/* parrafos reserva telefonica*/
	margin-top: 25px;
	margin-left: 10px;
	color:black;
	text-align: center;
	display: block;
	font-family: Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";
	font-size: 15px;

}


.ubica {
	margin-top: 6px;
	margin-left: 5px;
	width: 15%;
	height: 13vh;
	font-family: Martel, "Martel DemiBold", "Martel ExtraBold", "Martel Heavy", "Martel Light", "Martel UltraLight";

}



.ubica p {

    margin-top: 15px;
	margin-right: 5px;
	text-align: center;
	color: black;

}


.ubica img {
	margin-top: 5px;
	margin-left: 70px;
	border-radius: 15px;
	width: 25%;
	height: 58%;

}

a.maps:hover {
	opacity: 0.8;
	/*brilla al pasar por la img del enlace*/

}

.redes {
	margin-left: 10px;
	margin-top: 5px;
	width: 100%;
	height: 85%;


}

.redes img {
	width: 50px;
	height: 50px;
	margin-top: 30px;

}


.autor {
	width: 15%;
	height: 18vh;
	padding: 1px;
	top: 1px;
	display: flex;
	margin-left: 45px;

}

.autor img {
	margin-top: 25px;
	width: 60px;
	height: 60px;


}

.autor p {
	text-align: center;
	margin-top: 30px;
	color: black;

}

.what img {
	margin-top: 7px;
	margin-left: 55px;
	width: 60%;
	height: 60%;


}





/* comienzo de media queri*/


@media (max-width: 1080px) {

	html, body {

		width: 100%;
		overflow-x: hidden;

	}

	.arriba {
		background-image: url(../img/otono/hoja.png);
		background-size: 100% 100%;
		display: grid;
		justify-items: left;
		width: 100%;
		height: 28%;



	}

	.maps {
		height: 25%;
		width: 100%;

	}

	.maps p {
		color: black;
		font-size: 35px;
		margin-top: 50px;
	}

	.maps img {
		margin-left: 200px;
		width: 120px;
		height: 120px;
	}

	.telefono {
		height: 25%;
		width: 100%;

	}


	.telefono img {

		width: 110px;
		height: 110px;
		margin-left: 200px;
	}

	.telefono p {

		margin-top: 70px;
		font-size: 35px;

	}


	.whatarriba {
		width: 100%;
		height: 25%;

	}

	.whatarriba img {

		width: 120px;
		height: 120px;
		margin-left: 200px;
	}

	.whatarriba p {
		font-size: 35px;
		margin-top: 50px;
	}

	.correo {
		height: 25%;
		width: 100%;
		margin-top: 0px;

	}

	.correo img {

		width: 100px;
		height: 100px;
		margin-left: 135px;
		margin-top: 26px;
	}

	.correo p {
		color: black;
		font-size: 35px;
		margin-top: 80px;

	}

	.container {
		width: 100%;
		height: 14vh;
		margin-top: 0%;
		padding: 20px;


	}

	.logo img {
		top: 0%;
		width: 120px;
		height: 120px;
	}

	.hg {
		width: 25vw;
		margin-top: 0px;
		height: 10vh;

	}

	.hg H3 {
		font-size: 28px;
		margin-left: 80px;
		margin-top: 19px;
	}

	.hg H5 {
		font-size: 21px;
		margin-left: 80px;
	}

	.menu {
		display: grid;
		grid-template-columns: 100%;
		grid: gap 10px;
		width: 31vh;
		font-size: 53px;
		margin-left: 0%;

	}

	.habita {
		/*fondo*/

		width: 100%;
		height: 10vh;

	}

	.habita h1 {
		left: 35%;
         top: 910px;
		font-size: 75px;

	}

	.container1 {
		width: 100%;
		height: 36%;


	}

	.container1 img {
		/*img de habitacion */
		width: 100%;
		height: 100%;
	}

	.lista {
		width: 100%;
		height: 35vh;


	}

	.lista h2 {
		font-size: 30px;
		margin-top: 30px;
	}

	.lista p {
		margin-top: 75px;
		font-size: 27px;

	}

	.estandar {

		height: 36vh;

	}


	.estandar img {
		width: 61vw;
		height: 35vh;
	}



	.twin {

		height: 36vh;
	}

	.twin img {
		width: 61vw;

		height: 35vh;
	}

	.single {

		height: 36vh;
	}

	.single img {
		width: 61vw;
		height: 35vh;
	}

	.triple {

		height: 36vh;

	}

	.triple img {
		width: 61vw;
		height: 35vh;
	}


	/*formateo de footer a 1080*/

	footer.pie {
		background-image: url(../img/otono/otono_pie_media.gif);
		background-size: 100% 100%;
		display: inline-block;
		height: 60%;
		width: 100%;

	}

	.pie .logo_footer {
		width: 100%;
		height: 8vh;
		align-items: center;
		justify-content: center;

	}

	.logo_footer img {

		width: 110px;
		height: 110px;
		margin-left: 45px;

	}

	.logo_footer h3 {
		color: black;
		font-size: 30px;
		margin-top: 5px;
	}

	.logo_footer h5 {
		color: black;
		font-size: 25px;
		text-align: center;
	}

	.rt {

		display: grid;
		width: 100%;
		height: 8vh;
		margin-left: 0%;
		margin-top: 0px;
		align-items: center;
		text-align: center;
		justify-items: center;

	}

	.rt p {
		top: 10px;
		margin-left: 60px;
		font-size: 32px;
	}

	.ubica {

		align-items: center;
		justify-items: center;
		width: 100%;
		height: 8vh;
		margin-top: 0%;
		display: grid;
	}

	.ubica img {

		margin-left: 10px;
		width: 110px;
		height: 110px;
		margin-top: 3px;
	}

	.ubica p {

		width: 17vh;
		margin-left: 10px;
		font-size: 30px;
		margin-top: 10px;
	}

	.box .redes {

		width: 100%;
		height: 8vh;
		align-content: center;
		margin-left: 0%;
		margin-top: 0px;
		box-sizing: border-box;


	}


	.box .redes img {
		margin-left: 260px;
		justify-items: center;
		margin-top: 0px;
		height: 100px;
		width: 100px;
	}

	.autor {
		display: flex;
		margin-left: 0%;
		width: 100%;
		height: 8vh;
		margin-top: 0%;
		align-items: center;

	}

	.autor img {
		margin-left: 300px;
		width: 100px;
		height: 100px;


	}

	.autor p {
		width: 250px;
		height: 120px;
		font-size: 25px;
	}

	.pie .what {
		align-content: center;
		width: 100%;
		height: 8vh;

	}

	.pie .what img {
		margin-left: 440px;
		width: 130px;
		height: 130px;


	}






}