/*Barra de navegación*/
.navbar{
    /*height: 60px !important;*/
    /*background-color:#0a7877 !important;*/
    background-color:black !important;
    margin-top: 0px;

    /*position: fixed !important; /*para fijar el menú de navegación*/
    position:sticky !important;  /*para fijar el menú arriba al hacer scroll*/
    top:0;/*para fijar el menú arriba al hacer scroll*/

    width: 100%;/*recuperamos la anchura maxima con "100vw" (vw=view width)*/
    opacity:0.9 !important;
    z-index:1000; /*para que se sobreponga sobre cualquier elemento (que esté por encima del HERO SECTION)*/
    /*color:orange !important;*//*no se puede cambiar de color. La estrategia es usar <span>*/
    box-shadow: 0px 0px 20px gray;/*sombra gris*/
    padding: 0px !important;
    
}

/*se puede cambiar el color y el tamaño de los enlaces del navbar*/
.nav-item a{
    color: #00ffff !important;
    font-size: 18px !important;
}

/*hover sobre los enlaces del navbar*/
.enlace:hover{
    color:white;
    border-bottom: 4px solid #61c0bf;
}


/*se puede modificar el borde del icono de la hamburguesa del menú. El icono es una imagen SVG. Quizas lo mejor sería usar font awesome para modificar el icono*/
.navbar-toggler{
    /*border: none !important;*/
    border-color:#00ffff !important;
    /*background-color:#637373 !important;*/
}
/* Cambia el color de las líneas del icono */
.navbar-toggler-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/*personalizamos el nombre*/
.navbar-brand{
    /*font-family: "oswald"; /*tipografía*/
    font-size: 18px !important; /*tamaño de fuente*/
    font-weight: 400; /*peso de la fuente*/ 
}

/*fondo base para todos los modulos*/
.fondo-base{
    /*filter: blur(5px);*/ /*difumina la imagen*/
    /*--webkit-filter: blur(5px);*/
    background-size: cover !important;
    background-position: center center !important;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity:0.5;
    /*background-image: url('../../assets/img/portada/theride-1.jpg');*/
    /*background-color: #d6dcde;*/
    background-color: white;
    background-image: radial-gradient(ellipse farthest-corner at 45px 30px , #fff 70%, rgba(0, 255, 0, 0) 0%, #00ffff 50%), url('../../assets/img/portada/theride-1.jpg');
    }

#area-de-trabajo{
    /*background-image: url('../../assets/img/portada/theride-1.jpg');*/
    background-color:rgba(255, 255, 255, 0.1);
    margin:3px auto;
    padding:70px 0px 20px 0px;
    /*opacity:0.8;*/
    filter: brightness(100%);/*para que se muestre colores originales a pesar del opacity de .general-background*/
    text-align:center;
    width:auto;
    /*display: flex;
    flex-wrap: wrap;*/
    color:black;

  }

/*carousel en toda la pantalla*/
.carousel{
    position:relative;
    width:100vw;
    height: 90vh;
}

#carousel-2 .carousel-item{
    transition: transform 3s ease !important;
}
.carousel-inner{
    width:100vw;
    height: 90vh;
}
.carousel-inner img{
    width:100vw;
    height: 100vh;
    object-fit:cover;
    object-position:40% 55%; /*para modificar la posición de la imagen (eje x, eje y)*/
    /*filter: brightness(100%);*/
    position: relative;
    z-index: 0;
}

.lamina-degrade-carousel::after { /*para poner una lámina en el carousel para degradé. Nota: hay que jugar con el z-index de los alementos anteriores y posteriores*/
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
    z-index: 1;
    pointer-events: none; /* Permite hacer clic en la imagen */
  }

/*fin carousel en toda la pantalla*/

/*para mostrar titulo animado de los tours en la portada*/
@keyframes slideInFromRight{
    0%{
        transform:translatey(100%);
        opacity:0
    }
    100%{
        transform:translatey(0);
        opacity:1
    }
}
.carousel-caption{
    animation:slideInFromRight 1s ease-in-out;
    animation-fill-mode: forwards;
    z-index: 2;
}
/*fin para mostrar titulo animado de los tours en la portada*/

/*par modificar la posición del carousel-caption*/
.carousel-caption{
    /*transform: translateY(-40%);/*centra verticalmente*/
    /*transform: translateX(65%);/*centra horizontalmente*/
    left: 4% !important; /*40%*/
    top:5% ;/*modifica verticalmente*/ /*68%*/
    width: 400px; /*300px*/
    text-align: left !important;
}
/*fin par modificar la posición del carousel-caption*/

.carousel-caption h3, .carousel-caption p {
   /* background-color:red;*/
    padding-left: 15px;
    margin-right:7%;
    padding-right:25px;
    text-align:center; 
}
.carousel-indicators button{
    border-radius: 50%;
    height: 15px !important;
    width:15px !important;
}

.titulo-tour-portada{
    /*background-color:black;*/
    color:white;
    /*background-image: linear-gradient(to right,#ffffff,#00ffff);*/
    /*opacity: 0.8 !important;*/
    padding:2px;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 4px 4px 8px rgba(0,255,255,0.3),-4px 4px 8px rgba(0,255,255,0.3),4px -4px 8px rgba(0,255,255,0.3),-4px -4px 8px rgba(0,255,255,0.3);
}
.texto-tour-portada{
    color:white !important;
    background-image: linear-gradient(to right,#000000,#000000);
    opacity: 0.6 !important;
}
.card{
    transition: all 0.3s; /*transición suave*/
}

.card:hover{
    transform: scale(1.09);/*se aumenta la escala*/
    box-shadow: 7px -7px 15px rgba(0,0,0,0.3);/*se pone sombra*/
}
.boton-ver-mas:hover{
    background-color: white !important;
    color:#00ffff !important
}
/*
.video-facebook{
    max-width: 100% !important;
    float: center;
    clear: both;
}
    */

/*para el icono de whatsapp*/
.boton-whatsapp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:80px;
	right:110px;
	/*background-color:#25d366;*/
	background-color:rgb(28, 199, 28);
	
	color:#FFF;
	border-radius:15px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px black;
  z-index:100;
}

.icono-whatsapp{
	margin-top:7px;
    font-size: 3rem;
}

@media (max-width:600px){ /*cambia la posición derecha cuando la ventana del navegador  es igual o menor a 768px*/
    .boton-whatsapp{
        right: 15px;
    }
}
/*Fin para el icono de whatsapp*/





/*galeria 3*/
:root {
    --container-padding: 1.5em;
    --container-width: 1260px;
  }
  
  * {
    &,
    &::before,
    &::after {
      box-sizing: border-box;
    }
  }
  
  body {
    margin: 0;
    font: 1em/160% sans-serif;
  }
  
  img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
  }
  
  .page-container {
    padding: var(--container-padding);
    max-width: var(--container-width);
    margin-right: auto;
    margin-left: auto;
  }
  
  /* Gallery layout */
  :root {
    --gallery-gap: 1.5em;
    --gallery-item-height: 250px;
  }
  
  .img-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallery-gap);
    &::after {
      content: "";
      flex-grow: 999;
      flex-shrink: 1;
      flex-basis: auto;
    }
  }
  
  .img-gallery__item {
    position: relative;
    flex: auto;
    overflow: hidden;
    height: var(--gallery-item-height);
    border-radius: var(--gallery-item-border-radius);
  
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  
  /* Gallery styles */
  :root {
    --gallery-item-border-radius: 0.4em;
    --gallery-caption-bg-color: hsl(0 0% 0% / 90%);
    --gallery-caption-text-color: white;
  }
  
  .img-gallery__item {
    figure {
      margin: 0;
      height: 100%;
    }
  
    figcaption {
      position: absolute;
      inset: auto auto 0 0;
  
      width: 100%;
      padding: 1rem;
  
      color: var(--gallery-caption-text-color);
      background-color: var(--gallery-caption-bg-color);
  
      transition: opacity 0.25s ease-in-out;
      opacity: 0;
    }
  
    &:hover {
      figcaption {
        opacity: 1;
      }
    }
  }
/*fin galeria 3*/




/*****Para el Spin de carga (está ubicado en el header)*****/

#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    /*background-color: rgba(255,255,255,0.7);*/
    background-color: rgba(255, 255, 255, 0.805);
    z-index:9999;
    display:none;
    color:green;
    text-align: center;
    padding-top:450px;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:80px;height:80px;
    border-style:solid;
    border-color:#000000;
    border-top-color:transparent;
    border-width: 5px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
/*****Fin Para el Spin de carga*****/

@media (max-width:768px){
    .carousel-inner{
        overflow: visible;
    }
    .carousel-item{
        width: 100%;
    }
    .card{
        margin:10px
    }
}