/* Mrittik Animated Image Box — standalone widget styles */

.pxl-image-box { max-width: 100%; }
.pxl-image-box .pxl-item--inner { max-width: 100%; }
.pxl-image-box .item--image { position: relative; line-height: 0; }
.pxl-image-box .item--image img,
.pxl-image-box .item--back img,
.pxl-image-box .item--front img { object-fit: cover; }

.pxl-image-box .image-back,
.pxl-image-box .map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pxl-image-box1 .pxl-item--inner { position: relative; }
.pxl-image-box1 .image--reveal {
  display: none !important;
}
.pxl-image-box1 .canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pxl-image-box1 .item--image img { opacity: 0; object-fit: cover; }

.pxl-image-box1.pxl-static-fallback .item--image img.image-front,
.pxl-image-box1.maib-static-fallback .item--image img,
.pxl-image-box3.pxl-static-fallback .item--front .item--image img.image-front,
.pxl-image-box3.pxl-static-fallback .item--back img,
.pxl-image-box3.maib-static-fallback .item--image img,
.pxl-image-box3.maib-static-fallback .image-front,
.pxl-image-box1.maib-static-fallback .image-front,
.pxl-image-box3.maib-static-fallback .image-front {
  opacity: 1 !important;
}
.pxl-image-box1.pxl-static-fallback .canvas,
.pxl-image-box1.maib-static-fallback .canvas,
.pxl-image-box3.pxl-static-fallback .canvas,
.pxl-image-box3.maib-static-fallback .canvas {
  display: none !important;
}
.pxl-image-box1.pxl-static-fallback .item--image img.image-back,
.pxl-image-box1.pxl-static-fallback .item--image img.map,
.pxl-image-box1.maib-static-fallback .item--image img.image-back,
.pxl-image-box1.maib-static-fallback .item--image img.map,
.pxl-image-box3.pxl-static-fallback .item--front .item--image img.image-back,
.pxl-image-box3.pxl-static-fallback .item--front .item--image img.map,
.pxl-image-box3.maib-static-fallback .item--front .item--image img.image-back,
.pxl-image-box3.maib-static-fallback .item--front .item--image img.map {
  display: none !important;
}
@media (max-width: 767px) {
  .pxl-image-box1 .canvas,
  .pxl-image-box3 .canvas {
    display: none !important;
  }
  .pxl-image-box1 .item--image img.image-front,
  .pxl-image-box3 .item--front .item--image img.image-front,
  .pxl-image-box3 .item--back img {
    opacity: 1 !important;
  }
  .pxl-image-box1 .item--image img.image-back,
  .pxl-image-box1 .item--image img.map,
  .pxl-image-box3 .item--front .item--image img.image-back,
  .pxl-image-box3 .item--front .item--image img.map {
    display: none !important;
  }
  .pxl-image-box1.wow,
  .pxl-image-box3.wow {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .pxl-image-box3 .item--front {
    position: relative;
    right: auto;
    bottom: auto;
    padding-left: 0;
    margin-top: 16px;
  }
  .pxl-image-box3 .item--back {
    padding-right: 0;
  }
}

.pxl-image-box2 .logo-dark { display: none; }
.pxl-image-box2 .pxl-item--inner {
  position: relative;
  width: 152px;
  height: 152px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 100%;
  background-color: #111111;
}
.pxl-image-box2 .item--text {
  position: absolute;
  inset: 0;
  transform-origin: center;
}
.pxl-image-box2 .item--text div {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 42%;
  font-size: 16px;
  font-weight: 500;
  line-height: 0;
  text-transform: uppercase;
  pointer-events: none;
  mix-blend-mode: difference;
  color: #ffffff;
  transform-origin: 50% 95%;
}
.pxl-image-box2 .item--image {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pxl-image-box3 .image--reveal {
  position: absolute;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  transition: all 500ms ease-in-out;
}
@media (max-width: 575px) {
  .pxl-image-box3 .image--reveal { display: none; }
}
.pxl-image-box3 .image--reveal.reveal-one { left: 23px; bottom: -107px; }
.pxl-image-box3 .image--reveal.reveal-two { right: 20px; top: 40px; }
.pxl-image-box3 .image--reveal svg { height: 285px; }
.pxl-image-box3 .image--reveal svg path { fill: #b2b2b2; }
.pxl-image-box3 .canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pxl-image-box3 .item--image img { opacity: 0; }
.pxl-image-box3 img { width: 100%; object-fit: cover; }
.pxl-image-box3 .item--front {
  position: absolute;
  right: 0;
  bottom: -121px;
  padding-left: 84px;
  z-index: 3;
  transition: all 500ms ease-in-out;
}
.pxl-image-box3 .item--back {
  position: relative;
  padding-right: 84px;
  z-index: 2;
  transition: all 500ms ease-in-out;
}
.pxl-image-box3 .pxl-item--inner { position: relative; transition: all 500ms ease-in-out; }
.pxl-image-box3 .pxl-item--inner:hover .image--reveal { opacity: 0; }
.pxl-image-box3 .pxl-item--inner:hover .image--reveal.reveal-one { transform: translate(20px, -121px); }
.pxl-image-box3 .pxl-item--inner:hover .image--reveal.reveal-two { transform: translateX(-20px); }
.pxl-image-box3 .pxl-item--inner:hover .item--front {
  opacity: 0;
  transform: translateY(-20px) scale(0.5);
}
.pxl-image-box3 .pxl-item--inner:hover .item--back { padding-right: 0; }

.dark-mode .pxl-image-box2 .logo-light { display: none; }
.dark-mode .pxl-image-box2 .logo-dark { display: block; }