@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

   

body{
	font-size: 10px;
	font-family: 'Poppins', sans-serif;
	background-color: #f8f9fa;
}

.ui-menu-item-wrapper {
    font-size: 1rem;
    padding: 7px;
}

.contieneIndex{
	width: 100vw;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.derecha{
	width: 60%;
    height: 100%;
    background-color: white;
    padding: 20px 28px 23px 28px;
}

/*Inicia el formulario*/
#SelHotel{
		width: 100%;
		
}
.ContieneInput{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
}
.destinoViaje{
		width: 30%;
    margin-right: 5px;
}
.fechasViaje{
		width: 35%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 5px;
}
.fechas{
	width: 49.5%;
}
.pax{
		width: 18%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-right: 5px;

}
.contieneBtn{
	width: 14.6%;
}
.form-control, .form-select{
	font-size: 10px !important;
}
.contieneBtn>input{
		width: 99%;
		height: 100%;
		border-radius: 5px;
		border: solid .5px transparent;
		font-size: 0.8rem;
		font-weight: 600;
}
.form-select {
    --bs-form-select-bg-img: none;
}
.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
    height: calc(3rem + calc(var(--bs-border-width) * 2));
    min-height: calc(3rem + calc(var(--bs-border-width) * 2));
    line-height: 1;
}
.tarjetaBusqueda{
		width: 96%;
    margin: auto;
    -webkit-box-shadow: -7px 13px 12px -11px rgba(143, 139, 143, 1);
    -moz-box-shadow: -7px 13px 12px -11px rgba(143,139,143,1);
    box-shadow: -7px 13px 12px -11px rgba(143, 139, 143, 1);
    padding: 15px;
}
.tituloBusqueda{
	margin-bottom: 0;
	font-family: "Anton", sans-serif;
}
hr {
    margin: .5rem 0;
 }
 #botonHoteles:hover{
 		background-color: orange;
 		cursor: pointer;
 		color: white;
 }
 .personas{
 	width: 49%;
 }
 #contieneEdades{
 		margin-left: 59%;
    margin-top: 10px;
 }
 .edades{
 		width: 100%;
    display: flex;
    flex-wrap: wrap;
 }
 .edades>p{
 	margin-bottom: 0;
 	width: 100%;
 }

/*Termina el formulario*/

/*DatePicker*/
.ui-state-default{
		padding: .8em !important;	
}
#ui-datepicker-div{
		width: 18% !important;
    z-index: 99!important;
}
.ui-datepicker-title{
		font-size: .9rem;
}

/*Fin del datepicker*/

/* Promociones */
.HotelPromocion{
		 width: 96%;
     height: 400px;
     margin: auto;
     border-radius: 10px;
     background: #020024;
		 background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(18, 92, 112, 1) 63%, rgba(56, 135, 150, 1) 100%);
		 display: flex;
     flex-wrap: wrap;
     justify-content: center;
     overflow: hidden;
}
.fotoPromo{
			position: relative;
      width: 100%;
      height: 72%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
}
.fotoPromo>img{
			position: absolute;
    	height: 92%;
    	top: 7%;
    	opacity: .6;
    	border-radius: 12px;
}
.textos{
			position: absolute;
    	width: 100%;
    	color: white;
    	text-align: center;
    	height: 67%;
    	top: 54%;
}
.textos>h1{
			margin-bottom: 0;
			font-family: "Anton", sans-serif;
}
.textos>p{
			margin-bottom: 0;
    	font-size: 12px;
    	color: orange;
    	font-weight: 600;
}
.textoPromo{
			height: 28%;
      width: 100%;
      padding-top: 4%;
}
.textoPromo>p{
			margin-bottom: 0;
      font-size: 10px;
      text-align: center;
      color: white;
}
.textoPromo>h4{
			font-size: 1rem;
    	color: orange;
    	text-align: center;
    	margin-bottom: 0;
}
.h1Titulos{
			font-size: .96rem;
	    width: 93%;
	    margin: auto;
	    margin-bottom: 10px;
	    margin-top: 43px;
	    font-weight: 500;
}
.h1Titulos>span{
			font-size: 1.3rem;
			color:orange;
}
/*Fin de promociones*/
/*Call Action*/
	.CallAction{
		width: 96%;
    margin: auto;
	}
	.text-muted{
		color: orange !important;
	}
	.textoCallAction{
		  padding-top: 14%;
	}
	.textoCallAction>h5{
			margin-bottom: 0;
	}
	.card-text{
		font-size: 12px;
	}


/*CallAction*/

/*destinosDestacados*/
.condicionesServicio{
		font-size: 10px;
		margin: auto;
		width: 90%;
}
.destinosDestacados{
		width: 96%;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    padding-bottom: 20px;
    margin: auto;
    margin-top: 20px;
}
.tarjetas{
	  width: 250px;
    height: auto;
    border: solid .5px gray;
    border-radius: 5px;
    flex: 0 0 auto; /* Evita que las tarjetas se redimensionen */
    overflow: hidden;
}
.tarjetas>img{
		width: 100%;
}
.contieneFotoTexto{
	width: 100%;
	height: auto;
}
.contieneFotoTexto>h5{
		font-size: 1rem;
		font-family: "Anton", sans-serif;
}
.contieneFotoTexto>p{
		font-size: 10px;
		font-family: 'Poppins', sans-serif;
		font-weight: 300;
}
.textTarjeta{
		padding: 20px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.textTarjetaDos{
		padding: 20px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.textTarjeta>button{
		width: 99%;
    border-radius: 5px;
    border: solid .5px transparent;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 13px;
    color: black !important;
}
.textoGrupos{

}
.textoGrupos<h1{
		font-size: 1.3rem;
    font-family: "Anton", sans-serif;
    width: 90%;
    margin: auto;
}
/*FIN de destinosDestacados*/


/*hotelesPromocion*/
		.hotelesPromocion{
			width: 100%;
			padding: 3%;
		}
/*FINhotelesPromocion*/

/*Promo grupos*/
.promoGrupos{
		width: 100%;
    border: solid 1px lightgray;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;
}
.fotosGrupos{
		width: 40%;
		height: 100%;
}
.descripcionFotos{
		width: 50%;
		height: 100%;
}
.textoGrupos{
	width: 50%;
	height: 100%;
	padding: 4%;
}
.textoGrupos>h1{
	font-size: 1.1rem;
	font-family: "Anton", sans-serif;
}
/*Fin Promo Grupos*/








/* Estilos solo para celulares en modo vertical */
@media only screen and (max-width: 767px) and (orientation: portrait) { 
	body{
			background-color: white;
	}
	.triangulo{
			border-top: 7vw solid white;
	}
   .derecha {
	   		width: 100%;
	      padding: 5px;
	      padding-top: 25px;
   }
   #ui-datepicker-div{
				width: 84% !important;
		    
		}
	.ui-state-default {
    	padding: 1em !important;
	}
   .tarjetaBusqueda{
		   	width: 99%;
		   	margin: auto;
   }
   .ContieneInput {
		    flex-direction: column;
	 }
	 .destinoViaje{
	 			width: 100%;
	 			margin-bottom: 5px;
	 }
	 .fechasViaje{
	 			width: 70%;
	 			margin-bottom: 5px;
	 }
	 .pax{
	 			width: 60%;
	 			margin-bottom: 5px;
	 }
	 .contieneBtn{
	 			width: 60%;

	 }
	 .contieneBtn>input {
	 		padding: 20px;
	 		
	 }
	 .textoPromo{
	 		padding: 26px;
	 		padding-top: 0px;
	 }
	 .textos>h1{
	 		font-size: 1.5rem;
	 }
	 .textoPromo>p{
	 		font-size: 9px;
	 }
	 .fotoPromo>img {
	 		top: 0;
	 }
	 .promoVertical{
	 			flex-wrap: nowrap;
        flex-direction: column;
        height: auto;
	 }
	 .promocionalUno, .promocionalDos{
	 			width: 100%;
        height: 700px;
        margin-bottom: 10px;
        border-radius: 10px;
	 }
	 .textoCallAction {
    		padding-top: 6%;
		}

	.h1Titulos{
			font-weight: 700;
	}
	.promoGrupos {
			flex-direction: column;
	}
	.descripcionFotos, .textoGrupos{
			width: 100%;
			height: auto;
	}
	.textoGrupos{
			padding: 20px;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
		font-weight: 900;
    	font-size: .7rem !important;
	}

		


}



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	

}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	


 }