@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:300');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* CSS Document
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Bebas Neue';
   Color wall theme:
   dark turqueise #002F2F
   meddle turqueise #008080
   light turquese #00c0c0
*/
html{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Scrollbar Webkit */
html::-webkit-scrollbar { display: none }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 6px;
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
}
html::-webkit-scrollbar-thumb:hover { background: #eee; }

/* keyframes */
@keyframes x {
  0% { opacity: 0; margin-top: 33px; }
  100%{ opacity: 1; margin-top: 0; }
}
@keyframes sideNavAnimation{
	0%{ margin-left: 0vw; }
	100%{ margin-left: 100vw; }
}
@keyframes sideNavContentAnimation{
	0%{ opacity: 0; }
	70%{ opacity: 0; }
	100%{ opacity: 1; }
}
.SEO{ display: none; height: 0px; }

/* ===== Header ===== */
#header {
	position: fixed;
	top: -10vh;
	left: 0;
	right: 0;
	height: 10vh;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	transition: top 0.3s;
	z-index: 2;
	padding: 0 10vw;
	display: inline-flex;
	box-shadow: 1px 1px 121px 3px #ddd;
}
.logotype{
	display: inline-flex;
	height: 10vh;
	width: auto;
	margin: 0;
	padding: 0 13px;
}
.imgLogotype{
	width: 6vh;
	height: 6vh;
	border-radius: 8px;
	margin: 2vh 13px 2vh 0;
}
.nameLogotype{
	font-family: "Rubik";
	color: #002F2F;
	font-size: 33px;
	margin: auto 0;
}

/* ===== Top ===== */
#sideNav{ display: none; }
#top{ width: 100%; height: auto; }
.topHeader{
	margin: 0 10%;
	width: 80%;
	height: auto;
	display: block;
}
.topHeaderItem{
	width: auto;
	height: auto;
	display: inline-flex;
	padding: 8px;
	float: right;
	text-decoration: none;
	background-color: #fff;
	border-radius: 13px;
	margin: 1vh 3px;
	box-shadow: 1px 1px 5px 1px #ccc;
}
.topHeaderItem img{ width: 21px; height: 21px; margin: 5px; }
.topHeaderItem p{ margin: 5px; color: #333; }
.bottomHeader{
	margin: 0;
	width: 100%;
	height: auto;
	display: inline-flex;
}
.desktopMenu{
	width: auto;
	height: auto;
	position: relative;
	float: right;
	display: inline-flex;
	margin: auto 0 auto auto;
}
a.dropbtn{
	transform: scale(1,1);
	font-family: 'Rubik';
	letter-spacing: 1px;
	font-size: 17px;
	font-weight: 500;
	color: #002F2F;
	height:40px;
	margin: 5px 21px;
	padding: 5px 0px;
	text-decoration: none;
	width: auto;
}
.dropbtn{ display: inline-flex; }
.dropbtn p{ margin: auto; padding: auto; }
.dropbtn img{ width: 21px; height:21px; margin: auto 5px; padding: auto; }
.dropdown-content{
	text-align: left;
	display: none;
	position: absolute;
	height: auto;
	background-color: #fff;
	left: -8px;
	top: 3px;
	animation: 0.5s ease x;
	z-index: 1;
}
.dropdown-content a{
	margin: 13px;
	padding: 8px 3px 0px 3px;
	width: auto;
	height: 30px;
	text-align: left;
	text-decoration: none;
	color: #000;
	transition: .5s ease;
	animation: zoom 1s ease;
	border-bottom: 1px solid #fff;
	display: inline-flex;
}
.dropdown-content a:hover{
	background-color: #eee;
	border-bottom: 1px solid #008080;
}
.dropdown-content img{ width: 33px; height: 21px; margin: 0 5px; }
.dropdown-content p{ margin: 0 auto 20px auto; font-size: 17px; }
.dropbtn:hover + .dropdown-content { display: inline-grid; }
.dropdown-content:hover{ display: inline-grid }
#mobileMenu{ display: none; }

/* menu icons */
.menuIcons{ width: 80%; height: auto; margin: auto; display: inline-flex; }
.menuIconsBox{ width: auto; height: auto; display: inline-flex; }
a.menuIconsItem{
	width: auto;
	height: auto;
	margin: 0px 8px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-family: "Rubik";
	padding: 3px 13px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color: gold;
	background-color: #111;
	border-radius: 13px;
}
.menuIconsItem img{ width: 6vh; height: 6vh; }

/* ===== Index / Hero ===== */
.video-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	margin-top: -21vh;
	overflow: hidden;
	z-index: -3;
}
.video-container video {
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}
.video-container .overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	display: block;
}
#title{
	position: absolute;
	padding-top: 21vh;
	color: white;
	margin: 0 10%;
	font-size: 5em;
}

/* firstStage / carrusel */
.firstStage, .stage{
	width: 100vw;
	height: 100vh;
	background-color: white;
	display: block;
}
.titleSlider{
	margin: 0;
	padding: 21px 5% 0 5%;
	color: #333;
	font-size: 33px;
}
.carousel-container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.carousel-track {
	display: flex;
	scroll-snap-type: x mandatory;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	max-width: 90vw;
	margin: 0 5vw 5vh 5vw;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
	flex: 0 0 calc(100% / 3);
	scroll-snap-align: start;
	display: grid;
	position: relative;
	margin: 13px;
}
.carousel-item img{
	width: 100%;
	height: 50vh;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	margin: 0px;
}
.infoSlider{
	background: #111;
	height: 30vh;
	display: block;
	justify-content: right;
	align-items: right;
	margin: 0px;
	padding: 21px 0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.info{
	width: 95%;
	position: absolute;
	margin-top: -21vh;
	padding: 10px;
	display: block;
	background-image: linear-gradient(rgba(17,17,17,0),rgba(17,17,17,0.8),rgba(17,17,17,0.8),rgba(17,17,17,1.5));
}
.titleInfo{ color: white; font-size: 27px; }
.noPrice{
	color: white;
	font-size: 17px;
	text-decoration: line-through;
	margin: auto 21px auto 0;
}
.discount{
	margin: auto auto auto 3px;
	background-color: #333;
	color: turquoise;
	padding: 13px;
}
.textInfo{ color: gold; font-size: 24px; }
.btns{ width: 100%; display: flex; }
.buy{
	background-color: white;
	border-radius: 13px;
	color: #013535;
	margin: auto 21px auto auto;
	padding: 13px;
	font-weight: 900;
	text-decoration: none;
}
.know{
	margin: auto auto auto 21px;
	color: white;
	padding: 13px;
	text-decoration: none;
}
.carousel-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	color:#aaa;
	background-color: #ddd;
	width: 55px;
	height: 55px;
	font-size: 24px;
	cursor: pointer;
	border-radius: 8px;
	z-index: 1;
	font-family: "Nanum Gothic", sans-serif;
	font-weight: 900;
	font-style: normal;
	display: none;
	justify-content: center;
	align-items: center;
}
.carousel-button.prev { left: 0vw; }
.carousel-button.next { right: 0vw; }

/* ===== allTours ===== */
.allTours{
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 1;
	background-image: url("../img.jpg");
	background-size: 100% 120%;
}
.allTours .overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
}
#titleTours{
	position: relative;
	padding-top: 21vh;
	color: white;
	margin: 0 10%;
	font-size: 2.5em;
}
#text{
	position: relative;
	color: white;
	margin: 0 10%;
	font-size: 1.5em;
}
#btn{
	text-decoration: none;
	position: relative;
	color: #666;
	background-color: #ddd;
	box-shadow: 0 0 21px 3px #333;
	margin: 0 10%;
	font-size: 1.3em;
	padding: 21px;
	border-radius: 33px;
	font-family: 'Nanum Gothic', sans-serif;
	transition: all ease 1s;
}
#btn:hover{ color: #ddd; background-color: #666; }

/* ===== destinity ===== */
.destinity{
	background-color: #fff;
	width: 100%;
	height: auto;
	position: relative;
	margin-bottom: 133px;
}
.destinityInside{
	width: 80%;
	height:auto;
	margin: 5% 10%;
	background-image: url("../destinity.jpg");
	background-size: 100% 100%;
	border-radius: 21px;
}
.destinityInside h3{
	color: #fff;
	font-size: 27px;
	padding: 3px 21px;
	font-family: "Rubik";
	font-weight: 400;
	margin: 13px 0 5px 0;
}
.deslizante {
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin: 0;
}
ul {
	list-style-type: none;
	padding: 0;
	display: flex;
	transition: transform 0.3s ease;
	margin: 0 0 33px 0;
	height: auto;
}
li {
	padding: 20px;
	margin: 0 10px;
	background-color: rgba(0,0,0,0.21);
	border-radius: 21px;
	color: white;
	width: 266px;
}
.titleDeslizante{ font-size: 17px; font-family: "Rubik"; font-weight: 100; color: #fff; margin: 0px 3px 8px 3px; }
.subtitleDeslizante{ font-size: 13px; font-family: "Rubik"; font-weight: 100; color: #fff; margin: 0px 3px 8px 3px; }
.noPriceDeslizante{ font-size: 17px; font-weight: 400; color: #fff; margin: 13px 21px 0px 21px; text-decoration: line-through; }
.priceDeslizante{ font-size: 23px; font-family: "Rubik"; font-weight: 400; color: #fff; margin: 3px 21px 0px 21px; }
.nightDeslizante{ font-size: 13px; font-weight: 400; color: #fff; margin: 0px 21px 0px 21px; }
.btnSocios{
	font-size: 12px;
	font-family: "Rubik";
	background-color: #FFCE00;
	color: #000;
	outline: 0px solid #fff;
	border: 0px solid #fff;
	margin: 13px 21px 0px 21px;
	padding: 3px 5px;
	border-radius: 5px;
	cursor: pointer;
	display: inline-flex;
	transition: 1s ease;
	text-decoration: none;
}
.btnSocios:hover{ background-color: #F5A700; }
.btnSocios img{ width: 21px; height: 21px; margin: auto 3px; }
.btnReservar{
	background-color: #002f2f;
	color: #fff;
	outline: 0px solid #fff;
	border: 0px solid #fff;
	font-size: 21px;
	font-weight: 100;
	letter-spacing: 0.8px;
	margin: 13px 21px 0px 21px;
	padding: 8px 13px;
	border-radius: 21px;
	cursor: pointer;
	display: inline-flex;
	transition: 1s ease;
	text-decoration: none;
	font-family: "Rubik";
}
.slider { position: relative; width: 100%; overflow: hidden; margin: auto; }
.slides { display: flex; transition: transform 0.5s ease; }
.slides img { width: 100%; height: auto; border-radius: 13px; }
.slider button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(2, 2, 2, 0.7);
	border: none;
	cursor: pointer;
	color: #fff;
	width: 33px;
	height: 33px;
	border-radius: 21px;
}
.prev { left: 3px; }
.next { right: 3px; }

/* ===== socio ===== */
.socio{
	background-color: #fff;
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
}
.socioInside{
	width: 80%;
	height: 80%;
	margin: 5% 10%;
	background-image: url("../socio.jpg");
	background-size: 100% 100%;
	border-radius: 21px;
	position: relative;
	display: block;
}
.socioItem{
	display: grid;
	position: relative;
	background-color: white;
	margin: 10% auto auto 5%;
	width: 35%;
	height: 55%;
	background-size: 100% 100%;
	border-radius: 21px;
	place-items:center;
}
.socioItem h4{
	display: block;
	left: 0; top: 0;
	position: absolute;
	color: #008080;
	font-size: 33px;
	font-family: "Rubik";
	font-weight: 100;
	margin: 1% 3% 3% 3%;
}
.socioItem p{
	color: #333;
	font-size: 17px;
	font-weight: 600;
	margin: 8% 3% 0 3%;
	line-height: 1.5;
}
.socioItem a{
	text-decoration: none;
	background-color: #008080;
	color: #fff;
	border-radius: 21px;
	font-size: 19px;
	font-weight: 900;
	transition: 1s ease;
	padding: 13px;
}
.socioItem a:hover{ background-color: #002f2f; }

/* ===== recomendation ===== */
.recomendation{ width: 100%; height: 100%; padding: 1px 10%; }
.recomendation p{ font-family: "Rubik"; font-size: 33px; color: #333; font-weight: 100; }

/* ===== rooms ===== */
.rooms{ width: 100vw; height: 300px; display: grid; }
.roomsInside{ width: 80vw; height: 300px; margin: 0vh 10vw; }
#carrusel {
	display: grid;
	grid-auto-flow: column;
	gap: 10px;
	transition: 2s ease;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin: 0;
}
.item {
	background-color: #fff;
	border: 1px solid #aaa;
	border-radius: 13px;
	margin: 0px 0px;
	height: 300px;
	width: 250px;
	padding: 0px;
	box-sizing: border-box;
	display: block;
	text-decoration: none;
}
.item img{
	height: 150px;
	width: 248px;
	border-top-left-radius:13px;
	border-top-right-radius:13px;
}
.titleItem{ color: #333; font-size: 13px; font-weight: 600; margin: 8px 3% 0 3%; }
.subtitleItem{ color: #333; font-size: 17px; font-weight: 600; margin: 0px 3% 0 3%; }
.priceItem{ color: #008080; font-size: 17px; font-weight: 600; margin: 0 3% 0 3%; }
.nopriceItem{ color: #002f2f; font-size: 14px; font-weight: 100; margin: 0 3% 0 3%; text-decoration: line-through; }
#btnLeft{
	position: relative;
	top: -50%;
	transform: translateY(-50%);
	background-color: rgba(235, 235, 255, 0.7);
	border: none;
	cursor: pointer;
	color: #00c0c0;
	width: 33px;
	height: 33px;
	border-radius: 21px;
	font-family: "Rubik";
	left: -5%;
	transition: 0.31s ease;
}
#btnRight{
	position: relative;
	top: -50%;
	transform: translateY(-50%);
	background-color: rgba(235, 235, 215, 0.7);
	border: none;
	cursor: pointer;
	color: #00c0c0;
	width: 33px;
	height: 33px;
	border-radius: 21px;
	font-family: "Rubik";
	left: 99%;
	transition: 0.31s ease;
}

/* ===== products ===== */
.products{ width: 100vw; height: auto; display: grid; }
.productsInside{
	width: 80vw;
	height: auto;
	margin: 0vh 10vw;
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	gap: 0px;
}
.item1 {
	background-color: #fff;
	margin: 0px 0px;
	height: 300px;
	width: 250px;
	padding: 10px;
	display: block;
	text-decoration: none;
	flex: 3 3 calc(33% - 10px);
	box-sizing: border-box;
	text-align: center;
}
.item1 img{ height: 100%; width: 100%; border-radius: 13px; }
.item1 p{
	color: #fff;
	font-weight: 100;
	font-family: "Rubik";
	font-size: 27px;
	margin: -5% 1% auto 1%;
	z-index: 0;
	position: absolute;
	background-color: rgba(0,0,0,0.30);
	padding: 3px;
	border-radius: 13px;
}

/* ===== footer ===== */
.footer{
	width: 97vw;
	height: auto;
	background-color: #EDF4F4;
	margin: 1vh 1vw;
	border-radius: 13px;
}
.box_footer_son { margin-top: 13px; }
.box_footer_son a{ margin: 5px 0; color: blue; text-decoration: none; }
.title{ color: #000; font-family: "Rubik"; }
.box_footer_son img{ width: 233px; height: 233px; }
.box_footer_father{ display: inline-flex; width: 100%; height: auto; }
.box_footer_son{ display: inline-grid; width: 20%; margin: 2.5%; height: auto; }
.div-flex{ display: inline-flex; }
.flex{ display: inline-flex; }
.div-flex img{ width: 36px; height: 36px; margin: 1px; }
.div-flex a{ text-decoration: none; margin: 8px; }

/* ===== bottom ===== */
.bottom{
	border-top: 2px solid #D5E5E5;
	width: 80vw;
	height: auto;
	margin: 0 10vw;
	text-align: center;
	padding: 13px;
}

/* ===== cart ===== */
.cart{
	width: 100px;
	height: 100px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 10%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 13px;
	border-top-left-radius: 13px;
	text-align: center;
}
.count{
	font-size: 21px;
	font-weight: 900;
	margin-left: 45px;
	margin-top: 35px;
	position: absolute;
	color: goldenrod;
}
.cart img{ width: 55px; height: 55px; margin-top: 21%; }

/* ============================================================
   MOBILE  (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px){

#header {
	position: fixed;
	top: -10vh;
	left: 0; right: 0;
	height: 10vh;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	transition: top 0.3s;
	padding: 0 0vw;
	display: inline-flex;
}
#top{ width: 100%; height: auto; padding: 13px 0 0 0; border-bottom: 1px solid #eee; }
.topHeader{
	width: 100%;
	height: 10vh;
	margin: 0;
	border-bottom: 1px solid #eee;
	display: inline-flex;
	background-color: #fff;
	position: absolute;
	top: 0;
}
.topHeaderItem{ display: none; height: 0; }
.bottomHeader{ margin: 0; width: 100%; height: 100%; display: inline-flex; overflow-x: hidden; }
.desktopMenu{ display:none; }
#mobileMenu{
	display: flex;
	margin: auto 1% auto auto;
	padding: 0;
	text-decoration: none;
	position: absolute;
	right: 2vw;
	top: 1vh;
	width: 8vh;
	height: 8vh;
}
#menu{ border-radius: 5px; width: 100%; height: 100%; padding: 0; margin: 0; }

.menuIcons{
	width: 95%;
	height: auto;
	margin: auto;
	padding-top: 13px;
	margin-top: 6vh;
	padding-bottom: -5vh;
	overflow-x: scroll;
	display: inline-flex;
}
.menuIcons::-webkit-scrollbar { height:0px; }
.menuIcons::-webkit-scrollbar-track { background: transparent; }
.menuIcons::-webkit-scrollbar-thumb {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
	width: 0px;
}
.menuIcons::-webkit-scrollbar-thumb:hover { background: #eee; }
.menuIconsBox{ width: 100%; height: auto; }
a.menuIconsItem{
	width: 25%;
	height: auto;
	margin: 5px 8px;
	text-align: center;
	text-decoration: none;
	padding: 3px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color: #00c0c0;
	background-color: #eee;
	border-radius: 13px;
}
a.menuIconsItem p{ margin: 0px; padding: 0px; font-family: 'Lato', sans-serif; }
.menuIconsItem img{ width: 3vh; height: 3vh; margin: 5px 0 0 0; }

/* SIDENAV móvil */
#sideNav{
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	transition: 0.3s ease;
	background-color: #fff;
	margin-left: 100vw;
}
#sideNavContent{ width: 100%; height: 100%; background-color: transparent; }
.sideNavInside{ width: 100%; height: 100%; margin: 0; overflow: hidden; background-color: transparent; }
.sideNavTop{
	width: 100%;
	height: auto;
	background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
	backdrop-filter: blur(2px);
	overflow-y: hidden;
}
.sideNavTopBar{ width: auto; height: auto; margin: 8px; float: right; overflow-y: hidden; display: inline-flex; }
.sideNavTopBarBall{
	width: 33px; height: 33px; float: right;
	background-image: linear-gradient(0rad,#ccc,#eee);
	border-radius: 50%; margin: 5px;
}
.sideNavTopBarCloseBall{
	margin: 8px 5px 5px 5px;
	width: 33px; height: 33px; float: right;
	background-image: linear-gradient(45rad,#c90000,#d90000);
	border-radius: 5px; text-decoration: none; display: flex;
}
.sideNavTopBarCloseBall p{ margin: 1px auto auto auto; color: white; display: block; font-size: 1.5em; font-weight: 600; }
.sideNavBody{
	width: 200%;
	height: auto;
	background-color: transparent;
	display:inline-flex;
	border-top: 1px solid #ddd;
	overflow-y: hidden;
}
.sideNavimg{ width: 30vh; height:30vh; margin: 8px auto 0 auto; }
#sideNaveFirstMenu{ width: 100%; height:100vh; background-color: #eee; position: relative; overflow: hidden; }
.sideNavItem{ height: 60px; display: flex; text-decoration: none; overflow-y: hidden; margin: 5px 21px; padding: 0px; }
.sideNavItem img{ overflow-y: hidden; width: 5vh; height: 5vh; padding: 5px 5px; }
.sideNavItem p{
	margin-top: 8px; overflow-y: hidden; color: #666;
	padding: -1px 5px 0px 5px; font-weight: 700; font-size: 17px; font-family: 'Rubik', sans-serif;
}
.sideNavActualItem{
	width: 99%; height: 50px; display: inline-flex;
	margin: 3px 0px; padding: 5px; background-color: white;
	text-decoration: none; overflow-y: hidden; border-radius: 8px;
}
.sideNavActualItem img{ overflow-y: hidden; width: 33px; height: 33px; padding: 5px 5px; }
.sideNavActualItem p{
	margin-top: 8px; overflow-y: hidden; color: #333;
	padding: -1px 5px 0px 5px; font-weight: 700; font-size: 21px; font-family: 'Rubik', sans-serif;
}
.sideNavActualItem p:hover{ color: green; transition: ease 1s; }
.sideNavItem p:hover{ color: #999; transition: ease 1s; }

#sideNavSecondMenu{
	width: 100%; height:100vh; background-color: #fff;
	position: relative; left: 0%; transition: 0.15s ease; overflow: hidden;
}
#sideNavSecondMenuInsideOne,
#sideNavSecondMenuInsideTwo,
#sideNavSecondMenuInsideThree{
	width: 100%; height: auto; display: none; margin: 0px;
	text-decoration: none; overflow: hidden;
}
.sideNavSecondMenuItem{
	margin: 0; background-color: #eee; height: auto; width: 100%;
	padding: 3px; overflow-y: hidden; display: inline-flex;
	text-decoration: none; border-bottom: 1px #ddd solid;
}
.icon{ width: auto; height: auto; padding: 0; }
.icon img{ width: 33px; height: 33px; display: block; margin: auto; }
.sideNavSecondMenuItem img{ width: 33px; height: 33px; margin: 8px; }
.sideNavSecondMenuItem h4{ color: #777; margin: auto 13px; padding-left: 1px; font-weight: 700; font-size: 21px; }
.option{ color: #777; margin: auto 13px; padding-left: 1px; font-weight: 700; font-size: 21px; }
.sideNavSecondMenuActualItem{
	margin: auto 0; height: auto; width: 100%; padding:13px 8px;
	overflow-y: hidden; display: inline-flex; text-decoration: none;
	border-bottom: 1px #ddd solid;
}
.sideNavSecondMenuActualItem img{ width: 33px; height: 33px; margin: 8px; }
.sideNavSecondMenuActualItem h4{ color: #777; margin: auto 13px; padding-left: 1px; font-weight: 700; font-size: 21px; }

/* Language móvil */
.languaje{ width: 100vw; }
.dropbtn{ display: inline-flex; width: 100vw; }
.dropdown-content{
	text-align: left; display: none; position: absolute; height: auto;
	width: 75%; background-color: #fefefe; border-radius: 21px;
	left: 13px; top: 233px; animation: 0.5s ease x; z-index: 1;
}
.dropdown-content a{
	margin: 13px; padding: 8px 3px 0px 3px; width: auto; height: 30px;
	text-align: left; text-decoration: none; color: #000; transition: .5s ease;
	animation: zoom 1s ease; border-bottom: 1px solid #ddd; display: inline-flex;
}
.dropdown-content a:hover{ background-color: #eee; border-bottom: 1px solid #008080; }
.dropdown-content img{ width: 33px; height: 21px; margin: 0 5px; }
.dropdown-content p{ margin: auto 0px; font-size: 17px; }

#title{ position: absolute; padding-top: 21vh; color: white; margin: 0 10%; font-size: 3em; }

.index{
	width: 100%; height: 80vh;
	background-image: url("../indexM.jpg");
	background-size: cover; position: relative; padding: 0;
}

/* firstStage móvil */
.titleSlider{ margin: 0; padding: 21px 5% 0 5%; color: #333; font-size: 21px; }
.carousel-track{ max-width: 90vw; margin: 0 0vw 5vh 10vw; }
.carousel-item{ flex: 0 0 calc(100% / 1.2); }
.carousel-item img{ height: 40vh; }
.info{ width: 92%; }
.carousel-button{
	display: none; top: 30%;
	color:#fff; background-color: #008080;
	width: 5vh; height: 5vh;
}

/* allTours móvil */
#titleTours{ padding-top: 8vh; font-size: 1.7em; }
#text{ font-size: 1.3em; }
#btn{ font-size: 1.1em; }

/* destinity móvil */
.destinity{ margin-bottom: 0; }
.destinityInside{ width: 96%; margin: 5% 2%; }
.destinityInside h3{ font-size: 17px; }
li { width: auto; }

/* socio móvil */
.socioInside{ width: 96%; margin: 1% 2%; }
.socioItem{ width: 85%; }

/* recomendation móvil */
.recomendation{ padding: 3% 3% 0 3%; }
.recomendation p{ font-size: 23px; }

/* rooms móvil */
.rooms{ margin-bottom: 10vh; }
.roomsInside{ width: 96vw; margin: 0vh 2vw; }
.item img{ }
#btnLeft, #btnRight{ top: 5vh; left: 0; }

/* products móvil */
.productsInside{ width: 100vw; margin: 0; }
.item1 {
	height: 150px; width: 250px; padding: 0px;
	flex: 2 2 calc(50% - 10px);
}
.item1 img{ border-radius: 0; }
.item1 p{
	color: #008080; font-size: 17px;
	margin: -55px 0% auto 0%;
	position: relative;
	background-color: rgba(255,255,255,0.8);
	padding: 3px 0; width: 100%; border-radius: 0px;
}

/* footer móvil */
.footer{ width: 96vw; }
.box_footer_father{ display: inline-grid; width: 100%; padding: 1% 10%; }
.box_footer_son{ display: inline-grid; width: 100%; margin: 0%; }
.box_footer_son a{ margin: 8px; font-size: 18px; }

/* bottom móvil */
.bottom{ width: 85%; margin: 0 5%; }

/* cart móvil */
.cart{
	width: 80px; height: 80px; bottom: 0%;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 13px;
	border-top-right-radius: 0px;
}
.count{ margin-left: 35px; margin-top: 30px; }

} /* fin @media */

/* ============================================================
   MOTOR DE BÚSQUEDA (buscador)
   ============================================================ */
.container {
	max-width: 900px;
	margin: 25px auto;
	padding: 25px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0px 8px 25px rgba(0,0,0,0.1);
}
h1 { text-align: center; margin-bottom: 25px; color: #263238; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media(max-width: 1024px){ .form-grid { grid-template-columns: 1fr; } }
.field-box { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 15px; color: #455A64; font-weight: 600; }
input, .select-box {
	width: 90%;
	padding: 14px 16px;
	font-size: 15px;
	border-radius: 10px;
	border: 2px solid #CFD8DC;
	background: #FAFAFA;
	outline: none;
	transition: 0.2s;
}
input::placeholder { color: #9e9e9e; opacity: 1; }
input:focus, .select-box:focus { border-color: #1976D2; background: #fff; }
button {
	width: 100%;
	padding: 16px;
	background: #008080;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	border: none;
	border-radius: 33px;
	cursor: pointer;
	margin-top: 15px;
	transition: 0.2s;
}
button:hover { background: dodgerblue; }
.guests-box { position: relative; }
.select-box { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.dropdown {
	position: absolute;
	top: 70px; left: 0;
	width: 320px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.15);
	padding: 15px;
	display: none;
	z-index: 99;
}
.dropdown-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 600;
}
.counter-container { display: flex; align-items: center; gap: 8px; }
.counter-btn {
	width: 36px; height: 36px;
	background: #008080;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.counter-btn:hover { background: #006666; }
.counter-number { width: 32px; text-align: center; font-size: 17px; font-weight: 600; color: #263238; }