*{margin: 0; padding:0;}

body{width: 100%; height: 100%; overflow: hidden; 
    background-color:  rgba(25, 25, 25, 1);}

.deselect ::selection {background: transparent;color: inherit;}
.deselect ::-moz-selection {background: transparent;color: inherit;}
.deselect {-ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}

/*########################################################################################################################*/

/* VIDEO INFO NEU */

.headline-font-style{
    font-weight: bold;
}

.en, .de{
    display: block;
}

.en, .sub-headline-font-style{
    margin-bottom: 10px;
}

.de{
    font-style: italic;
    opacity: 0.5;
}

.plain-text-font-style{
    display: inline-block;
    font-size: 12px;
}

/*########################################################################################################################*/

#video_wrapper{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    top: 5vw; left: 5vw;
    width: 60vw; height: auto;}

#video_wrapper.square{
    width: 45vw;
}

#video_wrapper.invisibleCursor{
    cursor: url(../images/icons/cursor_invisible.png), auto; }

@media only screen and (max-width:767px){#video_wrapper{width: 500px;}}
@media only screen and (max-width:667px){#video_wrapper{width: 400px;} #time{display: none;}}
@media only screen and (max-width:567px){#video_wrapper{width: 300px;}}

#video_wrapper::full-screen {width: 100%; height: 100%;}
::-moz-full-screen #video_wrapper {width: 100%;height: 100%;}
#video_wrapper::-moz-full-screen {width: 100%; height: 100%;}
#video_wrapper::-webkit-full-screen {width: 100%; height: 100%;}


#videoInfo{
    position: absolute;
    top: 5vw; left: 70vw; width: 25vw;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 80%;}

#scroll_container_inner{
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 17px;}

#scroll_text{
    padding-left: 13px;
    padding-bottom: 5vw;
    width: 100%;}

#videoInfoMobile{
    position: absolute;
    top: 5vw; left: 70vw;
    width: 25vw;
    display: none;}

#videoInfoMobile, #videoInfo{
    font-family: 'source_sans_proregular';
    letter-spacing: 1px;
    color: grey;}

#videoInfoMobile a, #videoInfo a{
    text-decoration: none;
    color: grey;}

#videoInfoMobile a:hover, #videoInfo a:hover{
    color: rgba(255, 255, 255, 0.9);}

#videoInfoMobile i, #videoInfo i{
    opacity: 0.5;}

.screenings{
    font-size: 12px;
    letter-spacing: 0.5;}

@media only screen and (max-width: 800px) {
    
    body{
        overflow-y: scroll;}

    #video_wrapper{
        top: 0; left: 0;
        width: 100%;
    }
    
    #videoInfo{
        display: none;}
    
    #videoInfoMobile{
        position: static;
        padding: 20px;
        width: 90%;
        display: block;
    }
}

@media only screen and (max-width:800px) and (orientation: landscape) {
    #video_wrapper{
        height: 100dvh; width: auto;
    }
    #video{
        height: 100%; width: auto;}
}