.dmhp-preview {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    background: #000 !important;
}

/* The WordPress thumbnail is only the initial loading fallback. Once the video
   has been primed, its paused first frame becomes the permanent still. */
.dmhp-preview .dmhp-preview-image,
.dmhp-preview:hover .dmhp-preview-image,
.dmhp-preview .work-item:hover .dmhp-preview-image,
.dmhp-preview:hover img.dmhp-preview-image {
    position: relative;
    z-index: 0;
    opacity: 1 !important;
    visibility: visible !important;
    background: #000 !important;
    -webkit-transform: none !important;
    transform: none !important;
    transition: none !important;
}

.dmhp-preview .dmhp-preview-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #000 !important;
    -webkit-transform: none !important;
    transform: none !important;
    transition: none !important;
}

.dmhp-preview.dmhp-is-primed .dmhp-preview-video,
.dmhp-preview.dmhp-is-playing .dmhp-preview-video {
    opacity: 1 !important;
    visibility: visible !important;
}

.dmhp-preview.dmhp-is-primed .dmhp-preview-image,
.dmhp-preview.dmhp-is-primed:hover .dmhp-preview-image,
.dmhp-preview.dmhp-is-primed:hover img.dmhp-preview-image,
.dmhp-preview.dmhp-is-playing .dmhp-preview-image,
.dmhp-preview.dmhp-is-playing:hover .dmhp-preview-image {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Disable Salient's thumbnail zoom on all wrappers involved in the tile. */
.portfolio-items .col .dmhp-preview.work-item,
.portfolio-items .col .dmhp-preview.work-item:hover,
.portfolio-items .col .work-item.dmhp-preview,
.portfolio-items .col .work-item.dmhp-preview:hover,
.dmhp-preview,
.dmhp-preview:hover,
.dmhp-preview .hover-wrap,
.dmhp-preview:hover .hover-wrap,
.dmhp-preview .hover-wrap-inner,
.dmhp-preview:hover .hover-wrap-inner,
.dmhp-preview .img-with-aniamtion-wrap,
.dmhp-preview:hover .img-with-aniamtion-wrap,
.dmhp-preview .work-item,
.dmhp-preview:hover .work-item,
.dmhp-preview .work-item img,
.dmhp-preview .work-item:hover img,
.dmhp-preview:hover .work-item img,
.portfolio-items .col .work-item.style-3.dmhp-preview:hover img,
.portfolio-items .col .dmhp-preview .work-item.style-3:hover img,
.dmhp-preview img.dmhp-preview-image,
.dmhp-preview:hover img.dmhp-preview-image,
.dmhp-preview .dmhp-preview-video,
.dmhp-preview:hover .dmhp-preview-video {
    -webkit-transform: none !important;
    transform: none !important;
}

.dmhp-preview .work-info-bg,
.dmhp-preview:hover .work-info-bg {
    background-color: #000 !important;
}

/* Keep Salient's project title and overlay above the moving image. */
.dmhp-preview .work-info,
.dmhp-preview .work-item .work-info,
.dmhp-preview .portfolio-item .work-info,
.dmhp-preview .nectar-post-grid-item-bg-overlay,
.dmhp-preview .nectar-post-grid-item-content,
.dmhp-preview .vert-center,
.dmhp-preview .inner-wrap {
    position: relative;
    z-index: 3;
}

/* The hover container itself switches on immediately. Only the title content
   fades in, independently of video playback. */
.dmhp-preview .work-info,
.dmhp-preview .work-info-bg,
.dmhp-preview .portfolio-title {
    -webkit-transition: none !important;
    transition: none !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
    -webkit-animation: none !important;
    animation: none !important;
}

.dmhp-preview .work-info .vert-center,
.dmhp-preview .work-info .vert-center > *,
.dmhp-preview .portfolio-title > * {
    opacity: 0 !important;
    -webkit-transform: translate3d(0, 8px, 0) !important;
    transform: translate3d(0, 8px, 0) !important;
    -webkit-transition: opacity 240ms ease, -webkit-transform 240ms ease !important;
    transition: opacity 240ms ease, transform 240ms ease !important;
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
    -webkit-animation: none !important;
    animation: none !important;
}

/* Salient may attach hover to the tile, work item or parent column. Keep the
   title wrapper available immediately, but do not reveal the title itself from
   the CSS :hover state. JavaScript adds dmhp-title-visible only after an actual
   moving video frame has been painted. */
.dmhp-preview:hover .work-info,
.dmhp-preview .work-item:hover .work-info,
.portfolio-items .col:hover .dmhp-preview .work-info,
.portfolio-items .col:hover .work-item.dmhp-preview .work-info {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.dmhp-preview.dmhp-title-visible .work-info .vert-center,
.dmhp-preview.dmhp-title-visible .work-info .vert-center > *,
.dmhp-preview.dmhp-title-visible .portfolio-title > * {
    opacity: 1 !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

@media (hover: none), (pointer: coarse) {
    .dmhp-preview .dmhp-preview-video {
        display: none !important;
    }

    .dmhp-preview .dmhp-preview-image {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmhp-preview .dmhp-preview-video {
        display: none !important;
    }

    .dmhp-preview .dmhp-preview-image {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }

    .dmhp-preview .work-info .vert-center,
    .dmhp-preview .work-info .vert-center > *,
    .dmhp-preview .portfolio-title > * {
        transition: none !important;
        transform: none !important;
    }
}