.card-im {
    position: relative;
    width: 100%;
    max-width: 400px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-color: none;
  }
  
  .card-im:hover .overlay {
    opacity: 1;
  }
  .card-im:hover .image{
    filter: grayscale(0.78) brightness(0.2);
  }
  
  .icon {
    color: white;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .fa-user:hover {
    color: #eee;
  }

  .icono {
    color:#0DCAF0;
    font-size: 100px;
    text-align: center;
    margin-bottom:25px;
  }

  .bg-regalos{
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image:  linear-gradient(rgba(250, 238, 252, 0.5), rgba(248, 160, 229, 0.5)),url("../images/background13.jpg");

  /* Set a specific height */
  height: 800px;

  /* Position and center the image to scale nicely on all screens */
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  }

  /* Place text in the middle of the image */
.bg-regalos-text {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);

}
@media(max-width:425px){
  .bg-regalos-text {
    text-align: left;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
 
  }
}

.bg-fengs{
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image:  linear-gradient(rgba(250, 238, 252, 0.5), rgba(248, 160, 229, 0.5)),url("../images/background14.jpg");

/* Set a specific height */
height: 800px;

/* Position and center the image to scale nicely on all screens */
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

/* Place text in the middle of the image */
.bg-fengs-text {
text-align: left;
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);

}
@media(max-width:425px){
.bg-fengs-text {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);

}
}

@media (min-width: 768px){
.iconBackground {
    top: 70px;
    left: 50%;
}
}
.iconBackground {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #6592e6;
  margin-left: -9px;
}
@media (min-width: 992px){
.row-timeline {
    margin-left: -16px;
    margin-right: -16px;
}
}
.row-timeline {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.row-timeline:after {
  content: "";
  position: absolute;
  background-color: #6592e6;
  width: 2px;
}
@media (min-width: 768px){
.row-timeline:after {
    height: calc(100% - 20px);
    top: 90px;
    left: 50%;
}
}
.timeline-element {
  position: relative;
}
.timeline-date {
  text-align: center;
}
@media (max-width: 991px) and (min-width: 768px){
.timeline-text-wrapper {
  padding: 1rem;
}}

  /*SLIDE GALLERY DISE;O INTERIORES///////////////////////////////////////////////////////////////////////*/
  * {
  box-sizing: border-box;
}
.container-gal img {
    vertical-align: middle;
  }

/* Position the image container (needed to position the left and right arrows) */
.container-gal {
    position: relative;
  }
  
  /* Hide the images by default */
  .mySlides-gal {
    display: none;
  }
  
  /* Add a pointer when hovering over the thumbnail images */
  .cursor-gal {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev-gal,
  .next-gal {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: black;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next-gal {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev-gal:hover,
  .next-gal:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext-gal {
    color: #222;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* Container for image text */
  .caption-container-gal{
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
  }
  .row-gal{
    background-color: #222;
    border: #222 2px solid;
  }
  .row-gal:after {
    content: "";
    display: table;
    clear: both;
    
  }
  
  /* Six columns side by side */
  .column-gal {
    float: left;
    width: 16.66%;
  }
  
  /* Add a transparency effect for thumnbail images */
  .demo-gal {
    opacity: 0.6;
  }
  
  .active-gal,
  .demo-gal:hover {
    opacity: 1;
  }