@keyframes chevron {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.showreel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    margin-top: -100px;

    @media screen and (max-width: 768px) {
        height: 50vh;
    }

    .showreel__video {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* min-width: 100%;
        position: fixed;
        top:0;
        z-index: -999; */

        &::-webkit-media-controls-panel {
            display: none !important;
            -webkit-appearance: none;
            opacity: 0;
            visibility: hidden;
        }

        &::-webkit-media-controls-play-button {
            display: none !important;
            -webkit-appearance: none;
            opacity: 0;
            visibility: hidden;
        }

        &::-webkit-media-controls-start-playback-button {
            display: none !important;
            -webkit-appearance: none;
            opacity: 0;
            visibility: hidden;
        }
    }

    &::before {
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        z-index: 50;
    }

    .showreel__chevron {
        position: fixed;
        left: 50%;
        width: 40px;
        height: 40px;
        z-index: 60;
        transform: translateX(-25%);
        animation: chevron 1.2s ease-in-out infinite alternate;
    }

    .showreel__chevron_hidden {
        display: none;
    }

}