:root{--accent:#00c6f2;--main:#fff}.player-container{margin-bottom:-45px}.player{background:#000;height:0;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.player:fullscreen{padding-bottom:100vh}.player:-webkit-full-screen{padding-bottom:100vh}.player:-moz-full-screen{padding-bottom:100vh}.player:-ms-fullscreen{padding-bottom:100vh}.player video{height:auto;top:50%;transform:translateY(-50%)}.controls,.player video{position:absolute;width:100%}.controls{background:linear-gradient(180deg,rgba(37,37,37,0) 10%,rgba(37,37,37,.6) 80%);bottom:-80px;box-sizing:border-box;height:48px;padding:0;transition:all .2s ease-in 5s}.player:hover .controls{bottom:0;transition:all .2s ease-out}.time{bottom:100%;padding-bottom:3px;position:absolute;right:20px}.time-current{color:#fff}.close-video{font-size:20px;padding-top:10px;position:absolute;right:10px;z-index:200}.progress{background:rgba(60,60,60,.6);border-radius:6px;bottom:90%;height:7px;left:20px;margin:auto;position:absolute;transition:height .1s ease-in-out;width:calc(100% - 40px)}.progress:hover{height:10px}.progress-filled{background:var(--accent);border-radius:6px;height:100%;transition:all .1s;width:0}.controls-main{display:flex;height:100%;justify-content:space-between;margin:auto;width:calc(100% - 40px)}.controls-left,.controls-right{align-items:center;display:flex;flex:1;overflow:hidden}.controls-left{margin-left:10px}.controls-right{justify-content:flex-end;margin-right:10px}.volume{align-items:center;display:flex}.volume-btn{margin-right:10px}.volume-btn svg{height:18px;width:18px}.volume-btn #volume-high,.volume-btn #volume-off{opacity:0}.volume-btn.loud #volume-high,.volume-btn.muted #volume-off{opacity:1}.volume-btn.muted #volume-high,.volume-btn.muted #volume-low{opacity:0}.volume-slider{background:rgba(60,60,60,.6);border-radius:6px;height:7px;margin-top:3px;position:relative;width:80px}.volume-filled{background:var(--main);border-radius:6px;height:100%;transition:width .2s ease-in-out;width:100%}.play-btn:hover.play-btn:after,.play-btn:hover.play-btn:before,.volume-filled:hover{background:var(--accent)}.play-btn{height:24px;margin:auto;position:relative;transform:rotate(-90deg) scale(.8);transition:-webkit-clip-path .3s ease-in .1s,shape-inside .3s ease-in .1s,transform .8s cubic-bezier(.85,-.25,.25,1.425);width:24px}.play-btn.paused{transform:rotate(0deg)}.play-btn:after,.play-btn:before{background:#fff;content:"";height:100%;left:0;position:absolute;top:0;transition:inherit;width:100%}.play-btn:before{shape-inside:polygon(0 10%,100% 10%,100% 40%,0 40%);-webkit-clip-path:polygon(0 10%,100% 10%,100% 40%,0 40%)}.play-btn:after{shape-inside:polygon(0 60%,100% 60%,100% 90%,0 90%);-webkit-clip-path:polygon(0 60%,100% 60%,100% 90%,0 90%)}.play-btn.paused:before{shape-inside:polygon(0 0,100% 51%,100% 51%,0 51%);-webkit-clip-path:polygon(10% 0,90% 51%,90% 51%,10% 51%)}.play-btn.paused:after{shape-inside:polygon(10% 49.5%,80% 49.5%,90% 49.5%,10% 100%);-webkit-clip-path:polygon(10% 49.5%,80% 49.5%,90% 49.5%,10% 100%)}button:focus{outline:none}.speed{display:none}.speed-list{display:flex;list-style:none;margin:0 20px 0 0;padding:0;text-align:center}.speed-list li{color:var(--main);cursor:default;padding:5px}.speed-list li.active,.speed-list li:hover{color:var(--accent);font-weight:700}.fullscreen{display:flex;justify-content:center}@media only screen and (min-width:768px){.volume-btn{margin-right:10px}.volume-btn svg{height:unset;width:unset}.volume-slider{height:8px;margin-top:0}.play-btn{height:30px;width:30px}.speed{display:unset}.progress{bottom:100%;height:8px}.time{padding-bottom:14px;right:30px}.player-container{margin-bottom:unset}}