.opactidadCero{
  opacity: 0;
}

.loadingPage{
  animation: fadeCargarPagina 1s;
}
  
.carousel-inner > .carousel-item > img {
  height:500px;
  object-fit: cover;
}

/* Para aplicar este fondo: se debe agregar al padre Position-relative*/
/* Oscurece la imagen de los carousel, para que se noten mas las letras que estan encima */
.oscurecerImagen{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

/* Para las imagenes del carousel, hace un relleno, cortando lo de afuera de la imagen */
section > div > div > .img-fluid{
  height: 300px;
  object-fit: cover;
}

/* Convierte las lineas de los indicadores del carousel en puntos */
.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-left: 5px;
  margin-right: 5px;
}

/* Al posicionarse sobre alguno de los enlaces de contacto, se usa un fondo gris */
.fondoGrisHover:hover{
  background-color: #f8f9fa;
}

/* Color verde a letras al hacer hover sobre el row */
.fondoGrisHover:hover .hoverLinkVerde{
  color: #17a2b8 !important;
}

/* Hace color negro las letras de la seccion de contacto (se ponen azules por el tag 'a' de enlace) */
.fondoGrisHover > a > h5, .fondoGrisHover > a > p{
  color: #000000;
}

.fondoGrisHover > a > p{
  font-size: smaller;
}

/* Quita el Underline de los textos al posicionarse sobre ellos */
.fondoGrisHover > a{
  text-decoration: none;
}


/*Solo para tamaños de 767px o menos (momento al ocultarse links del navbar) */
@media (max-width: 767px){

    /* Menor altura estatica para las imagenes del carousel */
    .carousel-inner > .carousel-item > img {
        height:300px;
        object-fit: cover;
      }

      /* Correr a la izquierda el texto */
      .carousel-inner > .carousel-item .carousel-caption {
        left: 2%;
        width: 95%;
      }

      /* Ocultar texto del carousel al ser dispositivos pequenos */
      .carousel-inner > .carousel-item .carousel-caption p{
        /* display: none; */
      }
}

/*Solo para tamaños de 299px o menos (No se ajusta correctamente el carousel, entonces se quita)*/
@media (max-width: 299px){
    .carousel-inner{
      display: none;
    }
}

/*Solo para tamaños de 340px o menos (No se ajusta correctamente el carousel, entonces se oculta el boton)*/
@media (max-width: 340px){
  .btn{
    display: none;
  }
}

@keyframes fadeCargarPagina {
  from{
      opacity: 0;
  }
  to{
      opacity: 1;
  }
}