:root {
    --plyr-color-main: #D9D9D9;
    --plyr-control-icon-size: 24rem;
    --plyr-control-spacing: 0;
    --plyr-control-padding: 0;
    --plyr-video-controls-background: transparent;
    --plyr-video-control-color: #D9D9D9;
    --plyr-video-control-color-hover: #D9D9D9;
    --plyr-video-control-background-hover: transparent;
    --plyr-menu-background: transparent;
    --plyr-menu-color: #D9D9D9;
    --plyr-menu-shadow: unset;
    --plyr-progress-loading-background: #D9D9D9;
    --plyr-video-progress-buffered-background: #D9D9D9;
    --plyr-audio-progress-buffered-background: #D9D9D9;
    --plyr-range-thumb-height: 10rem;
    --plyr-range-thumb-background: #D9D9D9;
    --plyr-range-thumb-shadow: unset;
    --plyr-range-track-height: 1rem;
    --plyr-range-fill-background: #D9D9D9;
    --plyr-video-range-thumb-active-shadow-color: unset;
}


.plyr {
    background-color: transparent;
}
.plyr__video-embed {
    border-radius: 32rem;
    transform: translateZ(0); /* for safari to show border-radius */
}
.plyr__video-embed iframe {
    box-sizing: border-box;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 20.7%;
    top: 49vh;
    height: 177.777778vh;
    width: 56.25vh;
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
    position: absolute;
    width: 77.4%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.plyr--video {
    overflow: visible;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    margin: auto 0;
    min-height: 100%;
    height: 100%;
}
.plyr__controls__item.plyr__control {
    position: absolute;
    left: 0;
    padding: 18rem;
    padding-bottom: 14rem;
}
.plyr__volume .plyr__control {
    position: absolute;
    right: 0;
    padding: 18rem;
    padding-bottom: 14rem;
    width: fit-content;
    min-width: unset;
    max-width: unset;
}
.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
    padding-bottom: 430%;
    transform: unset!important;
}
.plyr__progress input[type=range] {
    padding: 16rem 0;
    cursor: pointer;
}
.plyr--video .plyr__controls {
    bottom: 30rem;
}
.plyr--video.plyr--hide-controls .plyr__controls {
    bottom: 30rem;
}

@media screen and (max-width: 767px) {
    :root {
        --plyr-control-icon-size: 5vmin;
        --plyr-range-thumb-height: 2.4vmin;
    }
    .plyr--video {
        min-height: unset;
        height: unset;
        overflow: hidden;
    }
    .plyr__video-embed {
        max-height: unset;
        min-height: unset;
        border-radius: unset;
        transform: unset;
    }
    .plyr__video-embed iframe {
        width: 500rem;
        top: 27%;
        width: 132vmin;
    }
    .plyr--video .plyr__controls, .plyr--video.plyr--hide-controls .plyr__controls {
        bottom: 12.8vmin;
    }
    /* .plyr--video.plyr--hide-controls .plyr__controls {
        transform: unset;
    } */
    .plyr__controls__item.plyr__control {
        left: 8vmin;
        padding: 4vmin;
        padding-bottom: 3.2vmin;
        padding-left: 0;
    }
    .plyr__volume .plyr__control {
        right: 8vmin;
        padding: 4vmin;
        padding-bottom: 3.2vmin;
        padding-right: 0;
    }
    .plyr__controls .plyr__controls__item.plyr__progress__container {
        margin: 0 auto;
        left: 0;
        right: 0;
        width: 66vmin;
    }
    .plyr__progress input[type=range] {
        padding: 3.2vmin 0;
    }
}

#playerId1, #playerId2, #playerId3, #playerId4, #playerId5 {
    visibility: hidden;
    opacity: 0;
    transition: all 1000ms ease-out;
}

#playerId6 {
    visibility: visible;
    opacity: 1;
    transition: all 1000ms ease-out;
    pointer-events: none;
}


@media screen and (min-width: 768px) and (max-width: 1030px) and (max-height: 600px), screen and (min-width: 1030px) and (max-height: 860px) {
    :root {
        --plyr-control-icon-size: 2.4vh;
        --plyr-range-thumb-height: 1vh;
        --plyr-range-track-height: 0.1vh;
    }

    .plyr {
        min-width: unset;
    }

    .plyr__video-embed {
        border-radius: 3.2vh;
        max-height: 88.8vh;
        min-height: 56.4vh;
    }

    .plyr__controls__item.plyr__control {
        left: -8.7vh;
        padding: 1.8vh;
        padding-bottom: 1.4vh;
        left: 0;
    }

    .plyr__progress input[type=range] {
        padding: 1.6vh 0;
    }

    .plyr__volume .plyr__control {
        right: -8.7vh;
        padding: 1.8vh;
        padding-bottom: 1.4vh;
        right: 0;
    }

    .plyr--video .plyr__controls {
        bottom: 3vh;
    }
    .plyr--video.plyr--hide-controls .plyr__controls {
        bottom: 3vh;
    }
}