/**
 * Video content element css.
 *
 * This file provides the bare minimum of CSS
 * required for the element to work properly.
 */

.videocontent {
    position: relative;
    overflow: hidden;
}

.videocontent-overlay-link-lightbox {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.videocontent .videocontent-overlay,
.videocontent video,
.videocontent iframe,
.videocontent .videoOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.videocontent:not(.videocontent-lightbox) video,
.videocontent:not(.videocontent-lightbox) iframe {
    z-index: 1;
}

.videoOverlay {
    z-index: 11;
    pointer-events: none;
}

.videocontent-overlay {
    cursor: pointer;
}

.videocontent-overlay .videocontent-overlayImage {
    z-index: 10;
}

.videocontent-overlay .videocontent-play-button {
    z-index: 12;
}

.videocontent-overlay-lightbox {
    position: relative;
    display: inline-block;
}

.videocontent-play-button {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -16px 0 0 -16px;
}

.videocontent-overlayImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}