.hidden
{
    display: none;
}

.unclickable
{
    pointer-events: none;
}

.vc
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgb(0, 0, 0);
    visibility: inherit;
    opacity: 1;
    z-index: 999;
}

.playerContainer
{
    position: absolute;
    top: 50%;
    left: 50%; 
    overflow: hidden;
    height: 3000px;
    width: 100vw;
    min-width: 1800px;
    transform: translate(-50%, -50%);
    visibility: inherit;
    overflow: hidden;
}
    
.playerContainer iframe,
.playerContainer object,
.playerContainer embed 
{
    position: absolute;
    overflow: hidden;
    opacity: 1;
    top: 0px;
    height: 100%;
    width: 100%;
}

#ytControls
{
    position: absolute;
    width: 100%;
    display: inline-block;
    bottom: 20px;
    height: 25%;
    left: 0;
}

.ytControlButton
{
    position: absolute;
    cursor: pointer;
    border: 1px soldid black;
}

#ytPlayButton, #ytPauseButton
{
    left: 50%;
    top: -100%;
    width: 44px;
    height: 44px;
    transform: translateX(-50%);
    background-size: cover;
}

#ytPlayButton
{
    background-image: url(ico-play-big.png);
}

#ytPauseButton
{
    background-image: url(ico-pause-big.png);
}

#ytPlayButton:hover, #ytPauseButton:hover{
    opacity: .5;
}

#ytMuteButton
{
    left: 14%;
    width: 22px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 670px) {
    #ytMuteButton {
        left: 10%;
        top: 49%;
      }
}

    .soundLine
    {
        position: absolute; 
        bottom: 0px; 
        left: 0px; 
        width: 2px; 
        height: 16px; 
        background: rgb(225, 255, 255);
        transform-origin: 50% 100%;
    }

        #soundLine1
        {
            left: 0px;
        }

        #soundLine2
        {
            left: 4px;
        }

        #soundLine3
        {
            left: 8px;
        }

        #soundLine4
        {
            left: 12px;
        }

        #soundLine5
        {
            left: 16px;
        }

#ytCloseButton
{
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
}

.ytBarTray
{
    left: 17%;
    top: 51%;
    width: 70%;
    height: 6px;
    background-color: rgba(225, 255, 255, .3);
    transform: translateY(-50%);
}

.ytProgressBar
{
    position: relative;
    width: 0%;
    top: 0px;
    height: 6px;
    background-color: rgba(225, 255, 255, .7);
}

@media screen and (max-width: 850px) {
    .playerContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    height: 540px;
    width: 80vw;
    min-width: 300px;
    transform: translate(-50%, -50%);
    visibility: inherit;
    overflow: hidden;
    }
}