#circleTLogo {
    background-color: #868686;
    background-image: url("../images/frblack.png");
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat;

    position: absolute;
    border-radius: 100px;
    transition: background-color 1s ease;
    height: 65px;
    width: 65px;
}

.reel {
    position: absolute; 
    left: 50%;
    top: 50%;
    height: 70vh;
    transform: translate(-50%, -50%);
    opacity: 100;
    border-radius: 100%;
    clip-path: circle(35vh at center);
}


.reel-circle-white {
    position: absolute;
    background-color: white;
    height: calc(70vh - 2px);
    width: calc(70vh - 2px);
    border-radius: 100%;
    background-image: url(../images/frgraphite.png);
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat; 
}

.reel-circle {
    position: relative;
    height: 70vh;
    width: 70vh;
    border-radius: 100%;
    overflow: hidden; /* Ukrywa części wideo wychodzące poza okrąg */
    background-color: white; /* Możesz dostosować kolor tła według potrzeb */
    mix-blend-mode: multiply;

    padding: 0;
    /* Opcjonalnie, jeśli chcesz dodać tło lub inne elementy */
    background-image: url(../images/frgraphite.png);
    background-size: 50%;
    background-position: center center;
    background-repeat: no-repeat; 
}

.reel-circle iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    transform: translate(-50%, -50%);
    border: none;
}

#reelVideo {
    opacity: 0;
    transition: opacity .4s ease;
}

#reelVideo.RellVisible {
    opacity: 1;
}

@media screen and (min-width:992px) {
    .reel-circle {
        position: relative;
        height: 70vh;
        width: 70vh;
    }
}

@media screen and (max-width:991px) {
    .reel-circle {
        position: relative;
        height: 40vh;
        width: 40vh;
    }

    .reel-circle-white {
        height: calc(40vh - 2px);
        width: calc(40vh - 2px);
    }
}