.elementor-widget-the7-image-widget {
  width: 100%;
}
.the7-image-box-wrapper {
  display: flex;
  height: 100%;
  transition: all 0.3s ease;
}

[class*='elementor-widget-the7_image_box'] .elementor-image-div {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: var(--img-space);
  order: var(--img-order);
  max-width: 100%;
  //flex-grow: 1;
  width: ~"min(var(--box-width, var(--image-size)), 100%)";
  min-width: ~"min(var(--box-width, var(--image-size)), 100%)";
  transition: all 0.3s;
  transform: translateZ(0);
}
[class*='elementor-widget-the7-image-widget'] .the7-image-container {
  display: flex;
  flex-flow: column;
}
[class*='elementor-widget-the7-image-widget'] .the7-image-wrapper {
  display: inline-flex;
  width: 100%;
  aspect-ratio: var(--the7-img-ratio);
  overflow: hidden;
  transition: all var(--transition-overlay-duration, 0.3s) var(--transition-overlay-timing, ease);
}
[class*='elementor-widget-the7-image-widget'] .post-thumbnail-rollover {
  transform: translateZ(0);
}
.the7-overlay-content:before,
.post-thumbnail-rollover:before,
.post-thumbnail-rollover:after {
  [class*='elementor-widget-the7-image-widget'] & {
    transition: all var(--transition-overlay-duration, 0.3s) var(--transition-overlay-timing, ease);
    border-radius: inherit;
  }
}
[class*='elementor-widget-the7-image-widget'] .the7-overlay-container > .the7-overlay-content {
  border-radius: inherit;
  line-height: var(--the7-base-line-height);
}
//[class*='elementor-widget-the7-image-widget'] .post-thumbnail-rollover img,
[class*='elementor-widget-the7-image-widget'].exceeding-frame-yes .post-thumbnail-rollover:before,
[class*='elementor-widget-the7-image-widget'].exceeding-frame-yes .post-thumbnail-rollover:after,
[class*='elementor-widget-the7-image-widget'].transform-overlay-yes .the7-overlay-container > .the7-overlay-content {
  transform: perspective(var(--the7-transform-perspective, 0)) rotateZ(var(--the7-transform-rotateZ, 0)) rotateX(var(--the7-transform-rotateX, 0)) rotateY(var(--the7-transform-rotateY, 0)) translate(var(--the7-transform-translate, 0)) translateX(var(--the7-transform-translateX, 0)) translateY(var(--the7-transform-translateY, 0)) scaleX(calc(var(--the7-transform-flipX, 1) * var(--the7-transform-scaleX, var(--the7-transform-scale, 1)))) scaleY(calc(var(--the7-transform-flipY, 1) * var(--the7-transform-scaleY, var(--the7-transform-scale, 1)))) skewX(var(--the7-transform-skewX, 0)) skewY(var(--the7-transform-skewY, 0));
  transform-origin: var(--the7-transform-origin-y) var(--the7-transform-origin-x);
}
[class*='elementor-widget-the7-image-widget'] .the7-image-wrapper:not(:hover) img {
  transform: perspective(var(--the7-transform-perspective, 0)) rotateZ(var(--the7-transform-rotateZ, 0)) rotateX(var(--the7-transform-rotateX, 0)) rotateY(var(--the7-transform-rotateY, 0)) translate(var(--the7-transform-translate, 0)) translateX(var(--the7-transform-translateX, 0)) translateY(var(--the7-transform-translateY, 0)) scaleX(calc(var(--the7-transform-flipX, 1) * var(--the7-transform-scaleX, var(--the7-transform-scale, 1)))) scaleY(calc(var(--the7-transform-flipY, 1) * var(--the7-transform-scaleY, var(--the7-transform-scale, 1)))) skewX(var(--the7-transform-skewX, 0)) skewY(var(--the7-transform-skewY, 0));
}
[class*='elementor-widget-the7-image-widget'] .the7-image-wrapper:hover img.run-img-transitions {
  transform: perspective(var(--the7-transform-perspective, 0)) rotateZ(var(--the7-transform-rotateZ, 0)) rotateX(var(--the7-transform-rotateX, 0)) rotateY(var(--the7-transform-rotateY, 0)) translate(var(--the7-transform-translate, 0)) translateX(var(--the7-transform-translateX, 0)) translateY(var(--the7-transform-translateY, 0)) scaleX(calc(var(--the7-transform-flipX, 1) * var(--the7-transform-scaleX, var(--the7-transform-scale, 1)))) scaleY(calc(var(--the7-transform-flipY, 1) * var(--the7-transform-scaleY, var(--the7-transform-scale, 1)))) skewX(var(--the7-transform-skewX, 0)) skewY(var(--the7-transform-skewY, 0));
}
[class*='elementor-widget-the7-image-widget'] {
  @import "parts/img-transform";
}
[class*='elementor-widget-the7_image_box'] .box-content-wrapper {
  width: 100%;
}
[class*='elementor-widget-the7_image_box'] .the7-box-wrapper,
[class*='elementor-widget-the7_image_box'] .box-content-wrapper {
  display: flex;
  flex-flow: var(--flex-flow);
}

[class*='elementor-widget-the7_image_box'] .box-heading {
  transition: color 0.3s ease;
  & a {
    transition: color 0.3s ease;
  }
}
[class*='elementor-widget-the7_image_box'] .box-description  {
  transition: color 0.3s ease;
}
[class*='elementor-widget-the7_image_box'] .box-content {
  width: var(--content-width);
  display: flex;
  flex-flow: column wrap;
  flex-grow: 1;
  flex-wrap: unset;
  justify-content: center;
}

[class*='elementor-widget-the7_image_box'] .post-thumbnail-rollover:before,
[class*='elementor-widget-the7-image-widget'] .post-thumbnail-rollover:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 1;
  z-index: 1;
}

[class*='elementor-widget-the7_image_box'] .the7-hover-icon,
[class*='elementor-widget-the7-image-widget'] .the7-hover-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

[class*='elementor-widget-the7_image_box'] .post-thumbnail-rollover:after,
[class*='elementor-widget-the7-image-widget'] .post-thumbnail-rollover:after {
  transition: all 0.3s ease;
}

a:hover .post-thumbnail-rollover:before,
.post-thumbnail-rollover:hover:before {
  [class*='elementor-widget-the7_image_box'] &,
[class*='elementor-widget-the7-image-widget'] & {
    opacity: 0;
  }
}

a:hover .post-thumbnail-rollover:after,
.post-thumbnail-rollover:hover:after,
a.the7-box-wrapper:hover .the7-hover-icon,
.post-thumbnail-rollover:hover .the7-hover-icon {
  [class*='elementor-widget-the7_image_box'] &,
[class*='elementor-widget-the7-image-widget'] & {
    opacity: 1;
  }
}