/* =========================================================== */
/* 00. Widget - Elementor Image
/* =========================================================== */
.elementor-widget-dplf_image .dplf-image-wrapper {
  position: relative;
}

.dplf-image-wrapper .dplf-image-wrapper-inner{
  position: relative;
  overflow: hidden;
}

.dplf-image-wrapper .dplf-image-wrapper-inner a,
.dplf-image-wrapper .dplf-image-wrapper-inner img {
  position: relative;
}

.dplf-image-wrapper .dplf-image-wrapper-inner img {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.dplf-image-wrapper .dplf-image-title {
  margin: 30px 0 0 0;
  transition: color .3s ease-out;
}

.dplf-image-wrapper .dplf-image-title a{
  color: currentColor;
}

.dplf-image-wrapper .dplf-image-content {
  position: relative;
  z-index: 999;
  width: 100%;
}

/*Image Frame*/
.dplf-image-wrapper.dplf-image-frame .dplf-image-wrapper-inner {
    position: relative;
    overflow: visible;
    padding: 25px;
    border: 1px solid var(--dplf-color-light-border);
    transition: border-color .2s ease-out;
}

.dplf-image-wrapper.dplf-image-frame .dplf-image-wrapper-inner:after {
    display: block;
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    --dplf-image-border-color: var(--dplf-color-accent);
    background-repeat: no-repeat;
    background-size: calc(100% - 100%) 1px,1px calc(100% - 100%);
    background-position: 0 0,100% 100%,100% 100%,0 0;
    background-image: linear-gradient(98deg, var(--dplf-image-border-color), var(--dplf-image-border-color)), linear-gradient(0deg, var(--dplf-image-border-color), var(--dplf-image-border-color)), linear-gradient(0deg, var(--dplf-image-border-color), var(--dplf-image-border-color)), linear-gradient(0deg, var(--dplf-image-border-color), var(--dplf-image-border-color));
    transition: opacity .2s ease-out,background-size .82s cubic-bezier(.36,.03,.2,.91);
    pointer-events: none;
}

.dplf-image-wrapper.dplf-image-frame .dplf-image-wrapper-inner:hover:after {
    background-size: calc(100% - 0%) 1px,1px calc(100% - 0%)
}

/*Image Frame Offset*/
.dplf-image-wrapper.dplf-image-frame.dplf-image-frame-offset .dplf-image-wrapper-inner {
    padding: 0;
    border: 0;
}

.dplf-image-wrapper.dplf-image-frame.dplf-image-frame-offset .dplf-image-wrapper-inner:after {
    --dplf-image-border-color: var(--dplf-color-accent);
    background-image: linear-gradient(98deg, var(--dplf-image-border-color), var(--dplf-image-border-color)), linear-gradient(0deg, var(--dplf-image-border-color), var(--dplf-image-border-color)), linear-gradient(0deg, var(--dplf-image-border-color), var(--dplf-image-border-color)), linear-gradient(0deg, var(--dplf-image-border-color), var(--dplf-image-border-color));
    border: 1px solid var(--dplf-color-light-border);
    z-index: -1
}

.dplf-image-wrapper.dplf-image-frame.dplf-image-frame-offset .dplf-image-wrapper-inner:hover:after {
    background-size: calc(100% - 0%) 1px,1px calc(100% - 0%)
}

/*Image Frame Offset Right*/
.dplf-image-wrapper.dplf-image-frame.dplf-image-frame-offset.dplf-image-frame-offset--right .dplf-image-wrapper-inner:after {
    top: -22px;
    left: 22px;
}

/*Image Frame Offset Left*/
.dplf-image-wrapper.dplf-image-frame.dplf-image-frame-offset.dplf-image-frame-offset--left .dplf-image-wrapper-inner:after {
    top: -22px;
    left: -22px;
}