/* Variables */
:root {
    --fr-play-button-width: 80px;
    --fr-play-button-padding: 24px;
    --fr-play-button-border-width: 6px;
}

/* Creates a full width div that will always be 16x9 ratio using padding */
.fr-responsive-16x9 {
    width: 100%;
    padding-top: calc(100% * (9/16));
    position: relative;
}

/* Make all internal elements resize to fill the responsive div */
.fr-responsive a,
.fr-responsive img,
.fr-responsive iframe {
    display: block;
    position: absolute !important;
    top:0 !important;
    left:0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Append a pure CSS play button to the thumbnail link */
.fr-responsive span.play-button {
    width: var(--fr-play-button-width);
    height: var(--fr-play-button-width);
    padding: var(--fr-play-button-padding);
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    border: var(--fr-play-button-border-width) solid #FFF;
    border-radius: 100%;   
    box-shadow: rgb(0, 0, 0, 0.4) 0px 8px 24px;
}
.fr-responsive span.play-button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-36%, -50%);
    width: calc(var(--fr-play-button-width) - (var(--fr-play-button-padding) * 2.2));
    height: calc(var(--fr-play-button-width) - (var(--fr-play-button-padding) * 2));
    border-style: solid;
    box-sizing: border-box;
    border-width: 
        calc((var(--fr-play-button-width) - (var(--fr-play-button-padding) * 2)) / 2) 
        0px 
        calc((var(--fr-play-button-width) - (var(--fr-play-button-padding) * 2)) / 2) 
        calc(var(--fr-play-button-width) - (var(--fr-play-button-padding) * 2.2));
    border-color: transparent transparent transparent #FFF ; 
    border-radius: 2px;
    
}