.slider-container {
width: 100%;
min-height: 760px;
overflow: hidden;
position: relative;
}

.slide {
width: 100%;
height: 100%;
display: none;
position: absolute;
opacity: 0; /* Añade opacidad inicialmente */
transition: opacity 0.5s ease; /* Transición suave de la opacidad */
background-size: cover;
}

/* Estilos adicionales para las imágenes si lo deseas */
.slide {
background-size: cover;
}

#slide2 {
background-image: url('./assets/banner/banner-new-2.jpg');
}

#slide1 {
background-image: url('./assets/banner/img1.jpg');
}

#slide3 {
background-image: url('./assets/banner/banner_principal.jpg');
}

#slide4 {
background-image: url('./assets/banner/banner-new.jpg');
}
#slide5 {
background-image: url('./assets/banner/portada1.jpg');
}

/* Agrega más estilos según la cantidad de imágenes que tengas */


.calendario {
/*display: none; */
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 15px;
z-index: 1000;
margin-bottom: -373px;
width: 287px;
margin-left: -10px;
border-radius: 20px 20px 20px 20px;
min-height: 315px;
max-height: 315px;
color: #000000;
}

.calendario table {
width: 100%;
border-collapse: collapse;
}

.calendario th{
padding: 5px;
text-align: center;
cursor: pointer;}
.calendario td {
padding: 8px;
text-align: center;
cursor: pointer;
/*border: solid 1px;*/
border-radius: 18px;
}

.calendario th {
background-color: #f2f2f2;
}

.calendario td:hover {
background-color: #FF404F;
color:#FFFFFF;
}

.navegacion {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.calendario td.deshabilitado {
color: #ccc;
cursor: not-allowed;
}
.flecha {
cursor: pointer;
font-size: 15px;
border: solid 2px #FF5C01;
padding: 5px;
border-radius: 25px;
width: 33px;
text-align: center;
color: #FF5C01;
font-weight: 900;
}
.oculto {
display: none;
}
/* Agrega más estilos según la cantidad de imágenes que tengas */


/* Inicio de combo personalizado    */


.dropdown {
/*position: relative;*/
display: inline-block;
width: 200px;
}

.dropdown input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 15px;
z-index: 1000;
margin-top: 18px;
width: 287px;
margin-left: -28px;
border-radius: 20px 20px 20px 20px;
/*min-height: 315px;
max-height: 315px;*/
color: #000000;
}

.dropdown-content div {
padding: 10px;
cursor: pointer;
}

.dropdown-content div:hover {
background-color: #f1f1f1;
}






/* Fin de combo personalizado    */



@media (max-width: 768px) {
.cabecera_fijo {
width:100%;
top:0px;

}
.dropdown-content {width:100% !important;}
.travel-date-input{height:60px !important;}
.calendario{width:100%;}
.dropdown-content{width:100%;}
.movil{display:block !important;}
.pc{display:none !important;}
}
.movil{display:none;}
.slideshow-container {
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
/*bottom:-6px;*/
}

.mySlides {
display: none;
width: 100%;
}

.fade {
animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
from {opacity: .4}
to {opacity: 1}
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

.prev {
left: 0;
border-radius: 3px 0 0 3px;
}

.next {
right: 0;
border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

* {box-sizing:border-box}
/* slider ramiro container */
.slideshow-container {position: relative;margin: auto;}
.mySlides {display: none;}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
.text {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;width: 100%;text-align: center;}
.dot {cursor: pointer;height: 15px;width: 15px;margin: 0 2px; background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
.active, .dot:hover {background-color: #717171;}
.fade {animation-name: fade;animation-duration: 2s;}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}


input, select, textarea, form, button{outline:none};
#tbRutaviaje  option:disabled{ color:red!important; }

.cabecera_fijo{width: 100%;position: fixed;z-index: 100;top: 23px;    animation: stuckMoveDown .6s;}
@keyframes stuckMoveDown {
0% {
	transform: translateY(-100%)
}

to {
	transform: translateY(0)
}
}
input#tbFechaviaje {
  display: inline-block;
  position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}