.item-container:hover .overlay-hover {
  opacity: 0.3;
  transition: opacity 0.35s;
}

.index-categories .background-shopping {
  background-image: url('../images/shopping.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.index-categories .background-restaurants {
  background-image: url('../images/restaurants.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.index-categories .background-home {
  background-image: url('../images/dc_mall.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.index-categories .background-travels {
  background-image: url('../images/travels.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.index-categories .background-educations {
  background-image: url('../images/educations.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.index-categories .item {
  position: relative;
  /* Altura minima consistente: los .background-* usan background-size:cover sin
     altura, por lo que a ciertos anchos/zoom colapsaban y los labels se
     superponian con la barra de EXPERIENCIAS. */
  min-height: 280px;
}

@media (max-width: 991px) {
  .index-categories .item {
    min-height: 220px;
  }
}

@media (max-width: 767px) {
  .index-categories .item {
    min-height: 170px;
  }
}

.item-container:hover .index-categories .item:before {
  transform: scale(1);
}

.item-container a:hover {
  text-decoration: none;
}

.index-categories .item:hover::before {
  transform: scale(1);
  opacity: 1;
}

.index-categories .item:hover::after {
  transform: scale(1);
  opacity: 1;
}

.index-categories .item:before {
  content: '';
  top: 15px;
  left: 15px;
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: scale(0, 1);
  transition: opacity 0.35s, transform 0.35s;
  opacity: 0;
  z-index: 1;
}

.index-categories .item:after {
  content: '';
  top: 15px;
  left: 15px;
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: scale(1, 0);
  transition: opacity 0.35s, transform 0.35s;
  opacity: 0;
  z-index: 1;
}

.index-categories .border-container {
  /*border: solid 1px #ffffff;*/
  position: relative;
  z-index: 1;
}

.index-categories .content {
  text-align: center;
  color: #ffffff;
}

.index-categories .button-section {
  padding-top: 20px;
  padding-bottom: 20px;
}

.index-categories .trend {
  text-align: center;
}

.trend a {
  background-color: #2a5e82;
  padding: 10px;
  color: #ffffff;
  font-family: 'gotham_htfbold';
  font-weight: normal;
  font-size: 14px;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.trend a:hover {
  color: #ffffff;
}

.overlay-hover {
  background: rgb(0, 74, 174);
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/*store*/
.custom-panel{
  display: flex;
  justify-content: center;
}
.required-input{
  border: 1px solid #dd4b39;
}

@media (max-width: 767px) {
  .index-categories .content img {
    width: 75px;
  }

  .index-categories .content h2 {
    font-size: 16px;
  }
}

@media (max-width: 576px) {

  .index-categories .content h2 {
    font-size: 16px;
    margin: 0;
  }
}

@media (max-width: 320px) {
  .index-categories .content img {
    width: 40px;
  }

  .index-categories .content h2 {
    font-size: 16px;
    margin: 0;
  }
}