/*main*/
		.video-html {position:relative;display:block;}
		.video-html .control{z-index:2; opacity:0;transition: 0.7s;display:flex;align-items:center;justify-content:center;position:absolute;width:100%;bottom:30px;}
		.video-html:hover .control {opacity:1;transition: 0.7s;}
        /*poster css*/
        .video-html video[poster]{height:100%;width:100%;}
	/*play*/
        .video-html .video-play{z-index:2;background:#2B3A62;border-radius:100%;overflow:hidden;display:block;width:70px;height:70px;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);cursor:pointer;}
        .video-html .video-play:before{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid white;content:"";position:absolute;top:50%;left:50%;right:0;width:0;height:0;transform:translate(-35%,-50%) rotate(90deg)}
        .video-html .video-play .video-preloader{display:block;width:70px;height:70px;border-radius:50%;position:relative;}
        .video-html .video-play .video-preloader::before{border:5px solid #FFF;width:70px;height:70px;content:"";position:absolute;border-radius:50%;}
        .video-html .video-play .video-preloader.active{animation:video-preloader-rotate 1s linear infinite;}
        .video-html .video-play .video-preloader.active::before{animation:video-preloader-line 3s linear infinite;}

        @keyframes video-preloader-rotate {100%{transform:rotate(360deg)}}
        @keyframes video-preloader-line {
            0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
            25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
            50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
            75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
            100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
        }
    /*play-pause*/
        .video-html .video-play-pause {cursor:pointer;width:11px;height:16px;margin:0 20px;background-repeat: no-repeat !important;background-size: cover !important;background-attachment: inherit !important;background-position: 50% 50% !important;}
        .video-html .video-play-pause.play {background:url(/upload/icon/video/play.svg);}
        .video-html .video-play-pause.pause {background:url(/upload/icon/video/pause.svg);}
    /*progress*/
        .video-html input[type='range'].video-progress {background:rgb(255 255 255 / 20%);margin:0 20px;overflow:hidden;width:auto;min-width:50%;margin:0;-webkit-appearance:none;height:3px;min-height:3px;border-radius:0px;padding:0px;}
        /*.video-html input[type='range']::-webkit-slider-runnable-track{height:10px;-webkit-appearance:none;color:red;margin-top:-1px}*/
        .video-html input[type='range'].video-progress::-webkit-slider-thumb{background:#fff;box-shadow:-9999px 0 0 9999px rgb(255 255 255 / 40%);width:5px;height:5px;-webkit-appearance:none;cursor:ew-resize;border: none;}
        .video-html input[type="range"].video-progress::-moz-range-progress{background:rgb(255 255 255 / 40%)}
        .video-html input[type="range"].video-progress::-moz-range-track{background:rgb(255 255 255 / 20%)}
        .video-html input[type="range"].video-progress::-ms-fill-lower{background:rgb(255 255 255 / 40%)}
        .video-html input[type="range"].video-progress::-ms-fill-upper{background:rgb(255 255 255 / 20%)}
    /*Sound*/
        .video-html .video-sound {cursor:pointer;width:21px;height:16px;margin:0 20px;background-repeat: no-repeat !important;background-size: cover !important;background-attachment: inherit !important;background-position: 50% 50% !important;}
        .video-html .video-sound.on {background:url(/upload/icon/video/sound-on.svg);}
        .video-html .video-sound.off {background:url(/upload/icon/video/sound-off.svg);}
    /*fullscreen*/
        .video-html .video-fullscreen {background:url(/upload/icon/video/fullscreen.svg);cursor:pointer;width:16px;height:16px;margin-right:20px;background-repeat: no-repeat !important;background-size: cover !important;background-attachment: inherit !important;background-position: 50% 50% !important;}
        .video-html.fullscreen .wrapper{z-index: 9999; width:80%;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}
        .video-html.fullscreen:before {content:'';position:fixed;height:100%;width:100%;top:0;left:0;background:#000;z-index:9999;}
        @media (max-width: 768px){ .video-html.fullscreen .wrapper {width:100%;} }

        /*Иконка закрыть*/
        .video-html.fullscreen .video-close-fullscreen{position:absolute;right:20px;top:20px;width:25px;height:25px;cursor:pointer;}
        .video-html.fullscreen .video-close-fullscreen:before{content:"";background:#fff;position:absolute;margin:auto;top:50%;left:0;right:0;width:2px;height:25px;transform:translate(0,-50%) rotate(135deg)}
        .video-html.fullscreen .video-close-fullscreen:after{content:"";background:#fff;position:absolute;margin:auto;top:50%;left:0;right:0;width:2px;height:25px;transform:translate(0,-50%) rotate(45deg)}