.video-player-wrap {
    padding: 4rem 0;
    width: 100%;
    background-color: var(--medium-gray-bg);
}

.video-player-wrap .template-header h2,
.video-player-wrap .template-header p {
    text-align: center;
    color: var(--white);
}
.video-player-wrap .template-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.video-player-wrap .template-header p {
    font-size: 1.125rem;
}
@media (min-width: 992px) {
    .video-player-wrap .col-md-offset-1 {
        margin-left: 8.33333333%;
    }
}

.selected-video-wrap {
}
.video-transition {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 3.5rem;
}

.selected-video-wrap .video-player {
    width: 100%;
    overflow: hidden;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    right: 0;
}

@media screen and (max-width: 990px) {
    .selected-video-wrap .video-js {
        --video-padding: 3rem;
        margin-left: var(--video-padding);
        margin-right: var(--video-padding);
        width: calc(100% - (2 * var(--video-padding)));
    }
}
.video-js.vjs-16-9:not(.vjs-audio-only-mode) .video-js.vjs-16-9:not(.vjs-audio-only-mode) {
    padding-top: 0;
}


/** override videojs play button **/
.video-player-wrap .video-js .vjs-big-play-button {
    --button-size: 5.875rem;
    --button-position: calc(50% - (var(--button-size) / 2));
    border: none;
    background-color: transparent;
    width: var(--button-size);
    height: var(--button-size);
    top: var(--button-position);
    left: var(--button-position);
    margin: 0;
}
@media screen and (min-width: 991px) {
    .video-player-wrap .video-js .vjs-big-play-button {
        --button-size: 10.875rem;
    }
}

.video-player-wrap .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: '\f144';
    font: var(--fa-font-regular);
    font-size: var(--button-size);
    text-shadow: 1.03px 1.714px 27.36px rgba(0, 0, 0, 0.3);
}


.video-list-wrap {
    padding-left: 4rem;
    padding-right: 4rem;
}

/** Fix strange height issue */
.video-list.splide__list {
    height: auto;
}

.video-list .video-item {
    width: 237px;
}

.video-list .video-item .video-thumb-wrap {
    position: relative;
    margin-bottom: 1.25rem;
    transition: opacity .3s;
}
.video-list .video-item .video-thumb-wrap .video-thumb {
    max-width: 100%;
}
.video-list .video-item.selected .video-thumb {
    opacity: .5;
}
.video-list .video-item .video-thumb-wrap {
    position: relative;
    cursor: pointer;
}
.video-list .video-item .video-thumb-wrap:before {
    --size: 3.25rem;

    cursor: pointer;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-regular);
    content: '';
    /*content: '\f144';*/
    color: var(--white);
    position: absolute;
    font-size: var(--size);
    width: var(--size);
    height: var(--size);
    top: calc(50% - (var(--size) / 2));
    left: calc(50% - (var(--size) / 2));
    z-index: 1;
    transition: opacity .3s;
}
.video-list .video-item.selected .video-thumb-wrap:before {
    opacity: 0;
}


.video-item .video-header h2 {
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: .5rem;
}
.video-item .video-description,
.video-item .video-description p {
    color: var(--white);
    font-size: .825rem;
    line-height: 1.3;
}
@media screen and (min-width: 991px) {
    .video-item .video-header h2 {
        font-size: 1.125rem;
    }
    .video-item .video-description,
    .video-item .video-description p {
        font-size: 1rem;
        line-height: 1.3;
    }
}

.video-fade-enter-active,
.video-fade-leave-active {
    transition: opacity .5s
}
.video-fade-enter,
.video-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0
}

.splide__arrow {
    background-color: transparent!important;
}
.splide__arrow svg {
    width: 2rem;
    height: 2rem;
    fill: var(--white);
}
.splide__arrow span {
    display: none;
}

@media (min-width: 1200px) {
    .splide__arrow[disabled] {
        display: none;
    }
}