.boxxi{background-color:#000;position:relative;overflow:hidden}.boxxi--full{height:100%!important;width:100%!important;max-width:100%!important;position:absolute;top:0;left:0}.boxxi__video{display:block;object-fit:contain;height:100%;width:100%}.boxxi__controls{background-color:rgba(0,0,0,.25);width:100%;position:absolute;bottom:0}.boxxi:hover .boxxi__controls{transform:translateY(0);transition:transform .25s ease-in 0s}.boxxi__btn{color:#fff;background-color:transparent;border:0;font-family:inherit;font-size:12px;line-height:30px;text-transform:uppercase;display:inline-block;height:30px;padding:0 12px}.boxxi__btn:focus{background-color:rgba(15,222,189,.25);outline:none}.boxxi__btn>svg{fill:#fff;display:block;height:12px;width:15px;transition:fill .1s linear 0s}.boxxi__btn:hover>svg{fill:#0fdebd}.boxxi__progress{background-color:hsla(0,0%,100%,.25);height:5px;position:relative;transition:height 75ms linear 0s}.boxxi__progress-bar{background-color:#0fdebd;height:100%;position:absolute}.boxxi__progress:hover{height:10px}.boxxi__time{width:150px}.boxxi__range{height:30px;width:100px;margin:0 12px;position:relative;float:left}.boxxi__range-line{background-color:#fff;border-radius:5px;height:4px;width:50%;position:absolute;top:calc(50% - 2px);z-index:1}.boxxi__range-line:after{content:"";background-color:#fff;border-radius:50%;display:block;width:12px;height:12px;position:absolute;top:calc(50% - 6px);left:calc(100% - 6px);transition:background-color .1s linear}.boxxi__range:hover .boxxi__range-line:after{background-color:#0fdebd}.boxxi__range-full{background-color:hsla(0,0%,100%,.25);border-radius:5px;height:4px;width:100%;position:absolute;top:calc(50% - 2px)}.boxxi--left{float:left}.boxxi--right{float:right}