.video-controls{bottom:0;width:50%;left:50%;transform:translate(-50%,80%);border-radius:10px 10px 0 0;background:rgba(255,255,255,0.1);margin:auto;display:flex;flex-direction:column;justify-content:center;transition:all 250ms ease}.video-controls:hover{background:rgba(40,40,40,0.6);transform:translate(-50%,0%);width:80%}.video-controls-controls{width:100%;height:100%;opacity:0;margin:auto;display:flex;flex-direction:column;justify-content:center}.video-container:hover{opacity:1}.video-controls:hover .video-controls-controls{opacity:1}.video-top-controls{position:relative;display:flex;justify-content:space-between;align-items:center;padding:.5em .5em .25em .5em}.video-bottom-controls{position:relative;display:flex;justify-content:space-around;padding:.25em .5em .5em .5em}.video-button:focus{outline:0}.video-starttime,.video-endtime{display:flex;flex-basis:10%;flex-shrink:1;justify-content:center}.video-seekbar{display:flex;flex-basis:80%;height:6px;border-radius:5px;background:rgba(80,80,80,0.6)}.video-progressbar{height:100%;position:relative;left:0;width:0;display:inline-flex;border-radius:5px;background:rgba(255,255,255,0.6)}.video-progressbar::after{content:"";position:absolute;top:0;bottom:0;margin:auto;width:4px;height:4px;right:-4px;border-radius:500px;transition:all 250ms ease}.video-seekbar:hover{cursor:pointer}.video-seekbar:hover .video-progressbar::after{width:10px;height:10px;background:rgba(255,255,255,1)}.video-volume{display:inline-flex;justify-content:space-between;align-items:center;flex-basis:15%}.video-volume-seekbar-section{display:inline-flex;flex-direction:column;flex-basis:80%}.video-volume-text{display:inline-flex;justify-content:space-between}.video-volume-seekbar{position:relative;display:inline-flex;height:5px;border-radius:2px;background:rgba(255,255,255,0.6)}.video-volume-progressbar{position:relative;width:100%;height:100%;background:rgba(255,255,255,0.6);border-radius:2px}.video-volume-progressbar::after{content:"";position:absolute;top:0;bottom:0;margin:auto;width:4px;height:4px;right:-4px;border-radius:500px;transition:all 250ms ease}.video-volume-seekbar:hover{cursor:pointer}.video-volume-seekbar:hover .video-volume-progressbar::after{width:10px;height:10px;background:rgba(255,255,255,1)}.video-playback{display:inline-flex;flex-basis:50%;justify-content:space-evenly}.video-button,.video-fullscreen-icon{background:transparent;outline:0;border:none;color:rgba(255,255,255,0.6)}.video-button:hover,.video-fullscreen-icon:hover{cursor:pointer}.video-button:hover,.video-fullscreen-icon:hover .fa{color:rgba(255,255,255,1)}.video-play .fa-pause{display:none}.video-pause .fa-play{display:none}.video-fullscreen{display:inline-flex;justify-content:flex-end;flex-basis:15%}