@charset "utf-8";
/* CSS Document */
.div_i, .div_i::before, .div_i::after,
.img_g,
span {
  transition: all 0.2s;
}

.img_g {
  height: auto;
  width: 100%;
  display: block;
}

.div_i {
  width: 33%;
  margin: 0 1px 1px 0;
  float: left;
  position: relative;
  overflow: hidden;
}
.div_i:hover .img_g {
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}
.div_i:hover span {
  opacity: 1;
}
.div_i::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.div_i:hover::before {
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
}
.div_i::after {
  content: "";
  border: 1px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35), 0 0px 4px rgba(0, 0, 0, 0.35) inset;
  height: 75px;
  width: 75px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
}
.div_i:hover::after {
  opacity: 1;
}

.div_i span {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
  font: bold 14px sans-serif;
}

@media screen and (min-width: 760px) {
  .div_i {
    width: calc(25% - 1px);
  }
}