.l-fs-tpl__video-wrapper:not(.fc-content *) {
    position: relative;
    padding-top: 56.25%
}

.l-fs-tpl__video-wrapper:not(.fc-content *) .fr-video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.fc-content .l-fs-tpl__video-placeholder {
    display: none;
}


.l-fs-tpl .l-fs-tpl-youtube,
.l-fs-tpl .l-fs-tpl-single-video,
.l-fs-tpl .l-fs-tpl-video-playlist {
    width: 100%;
}

    .l-fs-tpl .l-fs-tpl-youtube .l-fs-tpl__video .fr-video,
    .l-fs-tpl .l-fs-tpl-single-video .l-fs-tpl__video .fr-video,
    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist-video .l-fs-tpl__video .fr-video {
        display: inline-block;
        width: 100%;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
    }


    .l-fs-tpl:not(.fc-content *) .l-fs-tpl-single-video .l-fs-tpl__video .fr-video,
    .l-fs-tpl:not(.fc-content *) .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist-video .l-fs-tpl__video .fr-video {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

.l-fs-tpl .l-fs-tpl-youtube .l-fs-tpl__video .fr-video iframe,
.l-fs-tpl .l-fs-tpl-single-video .l-fs-tpl__video video,
.l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist-video .l-fs-tpl__video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #bdbdbd;
    object-fit: none;
}

/******************************************
    Video playlist template specific layout
*******************************************/

.l-fs-tpl .l-fs-tpl-video-playlist {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        transition: right 0.4s;
        z-index: 3;
        background-color: rgba(0,0,0,0.9);
        overflow: auto;
    }

        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist.playlist-visible {
            right: 0;
            height: 100%;
            width: 100%;
        }

        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist .video-playlist-header {
            display: none;
            width: 100%;
            padding-bottom: 4px;
            box-shadow: inset 0px -1px 0px #d3d94d;
        }

        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: auto;
        }

            .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item {
                cursor: pointer;
                list-style: none;
                display: inline-block;
                width: 100%;
                margin-bottom: 0;
                padding: 10px 0;
            }

                .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item:first-child {
                    margin-top: 46px;
                }

                .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item > div {
                    float: left;
                    margin: 0 15px;
                }

                    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item > div .video-playlist-item-video__thumbnail {
                        background-color: #bdbdbd;
                        width: 129px;
                        height: 72px;
                    }

                        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item > div .video-playlist-item-video__thumbnail img {
                            width: 100%;
                            max-width: 100%;
                            max-height: 100%;
                            object-fit: none;
                        }

                        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item > div .video-playlist-item-video__thumbnail video {
                            width: 100%;
                            height: 100%;
                        }

                .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item.video-playlist-item-selected > div .video-playlist-item-video__thumbnail {
                    border: 2px solid #f0801a;
                }

                .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item p {
                    color: #ffffff;
                }

                .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item .video-playlist-item-video__title {
                    font-size: 12px;
                    line-height: 18px;
                    margin-bottom: 10px;
                    padding-right: 16px;
                }

                .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item .video-playlist-item-video__time {
                    margin-left: -3px;
                }

    /* Playlist button which shows on top right of the video */
    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .l-fs-video-js-playlist-button {
        position: absolute;
        background: transparent;
        top: 0;
        right: 0;
        padding: 10px;
        border: 0;
        color: #f0801a;
        outline: 0;
        z-index: 2;
    }

    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .vjs-fullscreen .l-fs-video-js-playlist-button {
        display: none;
    }

    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .l-fs-video-js-playlist-button i:before {
        font-style: normal;
        font-size: 22px;
        content: "\2261";
    }

    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .l-fs-video-js-playlist-button.playlist-button-active {
        position: fixed;
        z-index: 4;
    }

        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .l-fs-video-js-playlist-button.playlist-button-active i:before {
            font-size: 16px;
            content: "X";
        }

    /* Play next button */
    .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .l-fs-video-js-play-next-button {
        background: transparent;
        padding-right: 10px;
        padding-left: 0;
        border: 0;
        color: #f0801a;
        outline: 0;
    }

        .l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video .l-fs-video-js-play-next-button i:before {
            font-style: normal;
            font-size: 22px;
            content: ">";
        }

/*******************************************************************************
    VideoJs common style (applies for single video and video playlist templates)
********************************************************************************/

.l-fs-tpl .l-fs-tpl__video .l-fs-video-js {
    overflow: hidden;
    color: #f0801a;
}

    /* The entire video area will be shown a mouse pointer (hand) */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js:hover {
        cursor: pointer;
    }

    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js button:focus {
        outline: 0;
    }

    /* The "Big Play Button" is the play button that shows before the video plays */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js .vjs-big-play-button {
        background-color: #f0801a;
        color: #FFF;
        border: 0 solid;
        font-size: 18px;
        line-height: 40px;
        height: 40px;
        width: 40px;
        margin-left: -20px;
        margin-top: -20px;
        border-radius: 50%;
        left: 50%;
        top: 50%;
    }

    /* Shows the "Big Play Button" when video is paused */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js.vjs-paused .vjs-big-play-button,
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js.vjs-paused.vjs-has-started .vjs-big-play-button {
        display: block;
    }

    /* Text colour for the remaining time */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js .vjs-remaining-time.vjs-time-control {
        color: #fff;
    }

    /* Margin from the progress bar to the buttons */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js .vjs-progress-control .vjs-progress-holder {
        margin: 0;
    }

    /* Title overlay */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js .l-fs-video-js-title-overlay,
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js.vjs-has-started.vjs-paused .l-fs-video-js-title-overlay {
        visibility: visible;
        opacity: 1;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: left;
        padding: 20px;
        background: linear-gradient(to bottom, #757575, transparent);
        color: #fff;
    }

    /* Hides title overlay when video has been started */
    .l-fs-tpl .l-fs-tpl__video .l-fs-video-js.vjs-has-started .l-fs-video-js-title-overlay {
        visibility: hidden;
        opacity: 0;
        transition: visibility 2s, opacity 1s linear;
    }

/* Do not show overlay if it's empty' */
.l-fs-tpl .l-fs-tpl__video .l-fs-video-js-title-overlay:empty {
    display: none;
}

/* Duration overlay */
.l-fs-tpl .l-fs-tpl__video .l-fs-video-js .l-fs-video-js-duration-overlay {
    width: 70px;
    height: 25px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #333;
    padding: 4px 4px 5px 4px;
}

/* Hides duration overlay when video has been started */
.l-fs-tpl .l-fs-tpl__video .l-fs-video-js.vjs-has-started .l-fs-video-js-duration-overlay {
    display: none;
}

.l-fs-tpl__video-placeholder {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(253,242,234);
}

.l-fs-tpl__video-message-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.l-fs-tpl__video-message-wrapper p {
    font-size: 25px;
    line-height: 32px;
}

.l-fs-tpl__video .fr-element .l-fs-tpl__video-message {
    display: none;
}

.l-fs-tpl__video-not-found-icon:before {
    font-family: Arial, sans-serif;
    content: "×";
    color: #F0801A;
    font-size: 40px;
    font-style: normal;
    display: block;
    height: 40px;
    width: 40px;
    line-height: 32px;
    border: 4px solid #F0801A;
    margin: 0 auto 20px;
    background: #fff;
}

.l-fs-tpl .l-fs-tpl__video .l-fs-video-js .vjs-poster {
    background-color: #bdbdbd;
}

.l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-caption,
.l-fs-tpl .l-fs-tpl-single-video .l-fs-tpl__video-caption {
    text-align: right;
}

.l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item p.l-fs-tpl__video-caption {
    display: none;
    color: inherit;
}
.l-fs-tpl .l-fs-tpl-video-playlist .l-fs-tpl__video-playlist ul li.video-playlist-item p.l-fs-tpl__video-caption.fr-box.fr-ltr {
    display: block;
}