:root { --black: #000; --dark: #707070; --grey: #b5b5b5; --light: #d9d9d9; --white: #fff; --dark-blue: #000080; } *, *::before, *::after { box-sizing: border-box; } .player input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; background-color: transparent; } .player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background-color: transparent; border: 0; border-radius: 0; } .player input[type=range]::-moz-range-thumb { appearance: none; background-color: transparent; border: 0; border-radius: 0; } .player input[type=range]:focus { outline: none; } .player input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } .player button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } .player .button { color: var(--black); background-color: var(--grey); background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--black), var(--black)), linear-gradient(0deg, var(--black), var(--black)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--light), var(--light)), linear-gradient(0deg, var(--light), var(--light)); background-position: 100% 0, 0 100%, calc(100% - 2px) 2px, 2px calc(100% - 2px), 0 0, 0 0, 2px 2px, 2px 2px; background-size: 2px 100%, 100% 2px, 2px calc(100% - 2px), calc(100% - 2px) 2px, 2px 100%, 100% 2px, 2px calc(100% - 2px), calc(100% - 2px) 2px; } .player { position: absolute; transform: scale(0.8); font-family: "tahoma", sans-serif; font-size: 16px; top: 0px; left: 0px; line-height: 20px; image-rendering: pixelated; -moz-osx-font-smoothing: grayscale; font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; padding: 8px; z-index: 10; display: flex; flex-direction: column; background-color: var(--grey); background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--black), var(--black)), linear-gradient(0deg, var(--black), var(--black)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--light), var(--light)), linear-gradient(0deg, var(--light), var(--light)), linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--white), var(--white)); background-position: 100% 0, 0 100%, calc(100% - 2px) 2px, 2px calc(100% - 2px), 0 0, 0 0, 2px 2px, 2px 2px; background-size: 2px 100%, 100% 2px, 2px calc(100% - 2px), calc(100% - 2px) 2px, 2px 100%, 100% 2px, 2px calc(100% - 2px), calc(100% - 2px) 2px; } .player.catchvid { top: auto; left: auto; right: 0px; bottom: 0px; } .videoframe.davinaframe { position: absolute; top: 55dvh; left: 25dvw; border: 0px; margin: 0px; box-shadow: 0px; width: 590px; height: 500px; } .videoframe.cprframe { position: absolute; top: 230dvh; left: 0dvw; border: 0px; margin: 0px; box-shadow: 0px; width: 590px; height: 500px; } .videoframe.catchframe { position: absolute; top: 190dvh; right: 10dvw; border: 0px; margin: 0px; box-shadow: 0px; width: 590px; height: 500px; } .player .title { position: relative; background-color: var(--dark-blue); color: var(--white); font-family: "tahoma", sans-serif; margin: 0 0 4px; font-weight: normal; height: 32px; padding: 6px 42px 6px 4px; } .player .title .button { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; overflow: hidden; } .player .title .button span { display: block; overflow: hidden; width: 10px; height: 10px; color: rgba(0,0,0,0); background: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12V14H0V12H2V10H4V8H6V6H4V4H2V2H0V0H4V2H6V4H10V2H12V0H16V2H14V4H12V6H10V8H12V10H14V12H16V14H12V12H10V10H6V12H4Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat center; } .player .video-container { overflow: hidden; width: 572px; height: 374px; padding: 2px; margin: 0 0 8px; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)); background-position: 100% 0, 0 100%, 0 0, 0 0; background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px; } .player .video-container .cover, .player .video-container .noise, #video { position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); top: 2px; left: 2px; image-rendering: tahomaated; } .player.catchvid .video-container .cover { pointer-events: none; z-index: 4; background-color: var(--black); background-image: url(https://assets.wetlegband.com/img/vid.gif); background-repeat: no-repeat; background-position: center; background-size: cover; display: none; } .player.cprvid .video-container .cover { pointer-events: none; z-index: 4; background-color: var(--black); background-image: url(https://assets.wetlegband.com/img/cpr.gif); background-repeat: no-repeat; background-position: center; background-size: cover; display: none; } .player.davinavid .video-container .cover { pointer-events: none; z-index: 4; background-color: var(--black); background-image: url(https://assets.wetlegband.com/img/davina.gif); background-repeat: no-repeat; background-position: center; background-size: cover; display: none; } .player[data-status='unstarted'] .video-container .cover, .player[data-status='cued'] .video-container .cover { display: block; } .player .video-container .noise { pointer-events: none; z-index: 3; } .player .video-container .noise img { width: 800x; height: 800px; mix-blend-mode: color; opacity: .0225; } /* #video { min-width: 5680px; min-height: 4100px; scale: .1; position: absolute; } */ .player[data-status]:not([data-status='playing']) .video-container .noise .dynamic, .player[data-status='playing'] .video-container .noise .static { display: none; } .player[data-status='playing'] .video-container .noise .dynamic { display: block; } .player .progress-bar { width: calc(100% - 8px); height: 30px; translate: 4px 0; } .player .progress-bar input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 30px; cursor: pointer; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--white), var(--white)); background-position: 10px 6px, 10px 6px, calc(100% - 14px) 6px, 10px 18px; background-size: 2px 14px, calc(100% - 24px) 2px, 2px 14px, calc(100% - 24px) 2px; } .player .progress-bar input[type=range]::-moz-range-track { width: 100%; height: 30px; cursor: pointer; background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--white), var(--white)), linear-gradient(0deg, var(--white), var(--white)); background-position: 10px 6px, 10px 6px, calc(100% - 14px) 6px, 10px 18px; background-size: 2px 14px, calc(100% - 24px) 2px, 2px 14px, calc(100% - 24px) 2px; } .player[data-status='paused'] .progress-bar input[type=range]::-webkit-slider-runnable-track, .player[data-status='buffering'] .progress-bar input[type=range]::-webkit-slider-runnable-track, .player[data-status='playing'] .progress-bar input[type=range]::-webkit-slider-runnable-track { background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--white), var(--white)); background-position: 10px 6px, 10px 6px, 10px 6px; background-size: 2px 14px, calc(100% - 24px) 2px, calc(100% - 24px) 14px; } .player[data-status='paused'] .progress-bar input[type=range]::-moz-range-track, .player[data-status='buffering'] .progress-bar input[type=range]::-moz-range-track, .player[data-status='playing'] .progress-bar input[type=range]::-moz-range-track { background-repeat: no-repeat; background-image: linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--dark), var(--dark)), linear-gradient(0deg, var(--white), var(--white)); background-position: 10px 6px, 10px 6px, 10px 6px; background-size: 2px 14px, calc(100% - 24px) 2px, calc(100% - 24px) 14px; } .player .progress-bar input[type=range]::-webkit-slider-thumb { width: 26px; height: 30px; translate: 0 -2px; background-image: url("data:image/svg+xml,%3Csvg width='26' height='30' viewBox='0 0 26 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8H20V10H6V8Z' fill='white'/%3E%3Cpath d='M6 20H20V22H6V20Z' fill='white'/%3E%3Cpath d='M26 0H24V28H0V30H26V0Z' fill='black'/%3E%3Cpath d='M24 0H22V26H0V28H24V0Z' fill='%23707270'/%3E%3Cpath d='M0 0H22V2H2V26H0V0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 2V26H22V2H2ZM4 6H20V22H4V6Z' fill='%23B5B6B5'/%3E%3Cpath d='M4 6H20V8H6V22H4V6Z' fill='%23707270'/%3E%3Cpath d='M12 10V8H14V10H12Z' fill='black'/%3E%3Cpath d='M12 22V20H14V22H12Z' fill='black'/%3E%3C/svg%3E%0A"); } .player .progress-bar input[type=range]::-moz-range-thumb { width: 26px; height: 30px; translate: 0 -2px; background-image: url("data:image/svg+xml,%3Csvg width='26' height='30' viewBox='0 0 26 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8H20V10H6V8Z' fill='white'/%3E%3Cpath d='M6 20H20V22H6V20Z' fill='white'/%3E%3Cpath d='M26 0H24V28H0V30H26V0Z' fill='black'/%3E%3Cpath d='M24 0H22V26H0V28H24V0Z' fill='%23707270'/%3E%3Cpath d='M0 0H22V2H2V26H0V0Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 2V26H22V2H2ZM4 6H20V22H4V6Z' fill='%23B5B6B5'/%3E%3Cpath d='M4 6H20V8H6V22H4V6Z' fill='%23707270'/%3E%3Cpath d='M12 10V8H14V10H12Z' fill='black'/%3E%3Cpath d='M12 22V20H14V22H12Z' fill='black'/%3E%3C/svg%3E%0A"); } .player .controls { display: flex; flex-direction: row; justify-content: space-between; padding: 6px 4px 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='44' fill='none'%3E%3Cpath fill='%23707070' d='M42 28V14h-2v2h-2v2h-2v2h-2v2h2v2h2v2h2v2h2ZM32 28V14h-2v2h-2v2h-2v2h-2v2h2v2h2v2h2v2h2ZM22 28V14h-2v14h2ZM84 28V14h-2v2h-2v2h-2v2h-2v2h2v2h2v2h2v2h2ZM74 28V14h-2v2h-2v2h-2v2h-2v2h2v2h2v2h2v2h2ZM112 28V14h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2ZM122 28V14h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2ZM154 28V14h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2ZM164 28V14h2v2h2v2h2v2h2v2h-2v2h-2v2h-2v2h-2ZM174 28V14h2v14h-2ZM224 12v2h-2v2h-2v-2h-2v-2h2v-2h2v2h2ZM234 12v-2h-2v2h-6v2h6v2h2v-2h2v-2h-2ZM224 20v2h-2v2h-2v-2h-2v-2h2v-2h2v2h2ZM234 20v-2h-2v2h-6v2h6v2h2v-2h2v-2h-2ZM224 30v-2h-2v-2h-2v2h-2v2h2v2h2v-2h2ZM234 26v2h2v2h-2v2h-2v-2h-6v-2h6v-2h2Z'/%3E%3Cpath fill='%23fff' d='M0 4h4v40H0V4Z'/%3E%3Cpath fill='%23707070' d='M0 2h2v40H0V2Z'/%3E%3Cpath fill='%23fff' d='M196 4h4v40h-4V4Z'/%3E%3Cpath fill='%23707070' d='M196 2h2v40h-2V2Z'/%3E%3Cpath fill='%23fff' d='M260 4h4v40h-4V4Z'/%3E%3Cpath fill='%23707070' d='M260 2h2v40h-2V2Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 144px 6px; } .player .controls .buttons { display: flex; flex-direction: row; gap: 2px; } .player .controls .buttons button { cursor: pointer; display: block; width: 42px; height: 42px; overflow: hidden; } .player .controls .buttons button span { display: block; width: 100%; height: 100%; overflow: hidden; color: rgba(0,0,0,0); background-repeat: no-repeat; background-position: center; } .player[data-status='playing'] .controls .buttons .play, .player[data-status='paused'] .controls .buttons .pause { background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42 42H0V40H40V2H42V42Z' fill='white'/%3E%3Cpath d='M0 0H42V2H2V40H0V0Z' fill='%23707070'/%3E%3Cpath d='M2 2H4V4H2V2Z' fill='white'/%3E%3Cpath d='M2 6H4V8H2V6Z' fill='white'/%3E%3Cpath d='M2 10H4V12H2V10Z' fill='white'/%3E%3Cpath d='M2 14H4V16H2V14Z' fill='white'/%3E%3Cpath d='M2 18H4V20H2V18Z' fill='white'/%3E%3Cpath d='M2 22H4V24H2V22Z' fill='white'/%3E%3Cpath d='M2 26H4V28H2V26Z' fill='white'/%3E%3Cpath d='M2 30H4V32H2V30Z' fill='white'/%3E%3Cpath d='M2 34H4V36H2V34Z' fill='white'/%3E%3Cpath d='M2 38H4V40H2V38Z' fill='white'/%3E%3Cpath d='M18 2H20V4H18V2Z' fill='white'/%3E%3Cpath d='M18 6H20V8H18V6Z' fill='white'/%3E%3Cpath d='M18 10H20V12H18V10Z' fill='white'/%3E%3Cpath d='M18 14H20V16H18V14Z' fill='white'/%3E%3Cpath d='M18 18H20V20H18V18Z' fill='white'/%3E%3Cpath d='M18 22H20V24H18V22Z' fill='white'/%3E%3Cpath d='M18 26H20V28H18V26Z' fill='white'/%3E%3Cpath d='M18 30H20V32H18V30Z' fill='white'/%3E%3Cpath d='M18 34H20V36H18V34Z' fill='white'/%3E%3Cpath d='M18 38H20V40H18V38Z' fill='white'/%3E%3Cpath d='M16 4H18V6H16V4Z' fill='white'/%3E%3Cpath d='M16 8H18V10H16V8Z' fill='white'/%3E%3Cpath d='M16 12H18V14H16V12Z' fill='white'/%3E%3Cpath d='M16 16H18V18H16V16Z' fill='white'/%3E%3Cpath d='M16 20H18V22H16V20Z' fill='white'/%3E%3Cpath d='M16 24H18V26H16V24Z' fill='white'/%3E%3Cpath d='M16 28H18V30H16V28Z' fill='white'/%3E%3Cpath d='M16 32H18V34H16V32Z' fill='white'/%3E%3Cpath d='M16 36H18V38H16V36Z' fill='white'/%3E%3Cpath d='M6 2H8V4H6V2Z' fill='white'/%3E%3Cpath d='M6 6H8V8H6V6Z' fill='white'/%3E%3Cpath d='M6 10H8V12H6V10Z' fill='white'/%3E%3Cpath d='M6 14H8V16H6V14Z' fill='white'/%3E%3Cpath d='M6 18H8V20H6V18Z' fill='white'/%3E%3Cpath d='M6 22H8V24H6V22Z' fill='white'/%3E%3Cpath d='M6 26H8V28H6V26Z' fill='white'/%3E%3Cpath d='M6 30H8V32H6V30Z' fill='white'/%3E%3Cpath d='M6 34H8V36H6V34Z' fill='white'/%3E%3Cpath d='M6 38H8V40H6V38Z' fill='white'/%3E%3Cpath d='M4 4H6V6H4V4Z' fill='white'/%3E%3Cpath d='M4 8H6V10H4V8Z' fill='white'/%3E%3Cpath d='M4 12H6V14H4V12Z' fill='white'/%3E%3Cpath d='M4 16H6V18H4V16Z' fill='white'/%3E%3Cpath d='M4 20H6V22H4V20Z' fill='white'/%3E%3Cpath d='M4 24H6V26H4V24Z' fill='white'/%3E%3Cpath d='M4 28H6V30H4V28Z' fill='white'/%3E%3Cpath d='M4 32H6V34H4V32Z' fill='white'/%3E%3Cpath d='M4 36H6V38H4V36Z' fill='white'/%3E%3Cpath d='M22 2H24V4H22V2Z' fill='white'/%3E%3Cpath d='M22 6H24V8H22V6Z' fill='white'/%3E%3Cpath d='M22 10H24V12H22V10Z' fill='white'/%3E%3Cpath d='M22 14H24V16H22V14Z' fill='white'/%3E%3Cpath d='M22 18H24V20H22V18Z' fill='white'/%3E%3Cpath d='M22 22H24V24H22V22Z' fill='white'/%3E%3Cpath d='M22 26H24V28H22V26Z' fill='white'/%3E%3Cpath d='M22 30H24V32H22V30Z' fill='white'/%3E%3Cpath d='M22 34H24V36H22V34Z' fill='white'/%3E%3Cpath d='M22 38H24V40H22V38Z' fill='white'/%3E%3Cpath d='M20 4H22V6H20V4Z' fill='white'/%3E%3Cpath d='M20 8H22V10H20V8Z' fill='white'/%3E%3Cpath d='M20 12H22V14H20V12Z' fill='white'/%3E%3Cpath d='M20 16H22V18H20V16Z' fill='white'/%3E%3Cpath d='M20 20H22V22H20V20Z' fill='white'/%3E%3Cpath d='M20 24H22V26H20V24Z' fill='white'/%3E%3Cpath d='M20 28H22V30H20V28Z' fill='white'/%3E%3Cpath d='M20 32H22V34H20V32Z' fill='white'/%3E%3Cpath d='M20 36H22V38H20V36Z' fill='white'/%3E%3Cpath d='M10 2H12V4H10V2Z' fill='white'/%3E%3Cpath d='M10 6H12V8H10V6Z' fill='white'/%3E%3Cpath d='M10 10H12V12H10V10Z' fill='white'/%3E%3Cpath d='M10 14H12V16H10V14Z' fill='white'/%3E%3Cpath d='M10 18H12V20H10V18Z' fill='white'/%3E%3Cpath d='M10 22H12V24H10V22Z' fill='white'/%3E%3Cpath d='M10 26H12V28H10V26Z' fill='white'/%3E%3Cpath d='M10 30H12V32H10V30Z' fill='white'/%3E%3Cpath d='M10 34H12V36H10V34Z' fill='white'/%3E%3Cpath d='M10 38H12V40H10V38Z' fill='white'/%3E%3Cpath d='M8 4H10V6H8V4Z' fill='white'/%3E%3Cpath d='M8 8H10V10H8V8Z' fill='white'/%3E%3Cpath d='M8 12H10V14H8V12Z' fill='white'/%3E%3Cpath d='M8 16H10V18H8V16Z' fill='white'/%3E%3Cpath d='M8 20H10V22H8V20Z' fill='white'/%3E%3Cpath d='M8 24H10V26H8V24Z' fill='white'/%3E%3Cpath d='M8 28H10V30H8V28Z' fill='white'/%3E%3Cpath d='M8 32H10V34H8V32Z' fill='white'/%3E%3Cpath d='M8 36H10V38H8V36Z' fill='white'/%3E%3Cpath d='M26 2H28V4H26V2Z' fill='white'/%3E%3Cpath d='M26 6H28V8H26V6Z' fill='white'/%3E%3Cpath d='M26 10H28V12H26V10Z' fill='white'/%3E%3Cpath d='M26 14H28V16H26V14Z' fill='white'/%3E%3Cpath d='M26 18H28V20H26V18Z' fill='white'/%3E%3Cpath d='M26 22H28V24H26V22Z' fill='white'/%3E%3Cpath d='M26 26H28V28H26V26Z' fill='white'/%3E%3Cpath d='M26 30H28V32H26V30Z' fill='white'/%3E%3Cpath d='M26 34H28V36H26V34Z' fill='white'/%3E%3Cpath d='M26 38H28V40H26V38Z' fill='white'/%3E%3Cpath d='M24 4H26V6H24V4Z' fill='white'/%3E%3Cpath d='M24 8H26V10H24V8Z' fill='white'/%3E%3Cpath d='M24 12H26V14H24V12Z' fill='white'/%3E%3Cpath d='M24 16H26V18H24V16Z' fill='white'/%3E%3Cpath d='M24 20H26V22H24V20Z' fill='white'/%3E%3Cpath d='M24 24H26V26H24V24Z' fill='white'/%3E%3Cpath d='M24 28H26V30H24V28Z' fill='white'/%3E%3Cpath d='M24 32H26V34H24V32Z' fill='white'/%3E%3Cpath d='M24 36H26V38H24V36Z' fill='white'/%3E%3Cpath d='M34 2H36V4H34V2Z' fill='white'/%3E%3Cpath d='M34 6H36V8H34V6Z' fill='white'/%3E%3Cpath d='M34 10H36V12H34V10Z' fill='white'/%3E%3Cpath d='M34 14H36V16H34V14Z' fill='white'/%3E%3Cpath d='M34 18H36V20H34V18Z' fill='white'/%3E%3Cpath d='M34 22H36V24H34V22Z' fill='white'/%3E%3Cpath d='M34 26H36V28H34V26Z' fill='white'/%3E%3Cpath d='M34 30H36V32H34V30Z' fill='white'/%3E%3Cpath d='M34 34H36V36H34V34Z' fill='white'/%3E%3Cpath d='M34 38H36V40H34V38Z' fill='white'/%3E%3Cpath d='M32 4H34V6H32V4Z' fill='white'/%3E%3Cpath d='M32 8H34V10H32V8Z' fill='white'/%3E%3Cpath d='M32 12H34V14H32V12Z' fill='white'/%3E%3Cpath d='M32 16H34V18H32V16Z' fill='white'/%3E%3Cpath d='M32 20H34V22H32V20Z' fill='white'/%3E%3Cpath d='M32 24H34V26H32V24Z' fill='white'/%3E%3Cpath d='M32 28H34V30H32V28Z' fill='white'/%3E%3Cpath d='M32 32H34V34H32V32Z' fill='white'/%3E%3Cpath d='M32 36H34V38H32V36Z' fill='white'/%3E%3Cpath d='M14 2H16V4H14V2Z' fill='white'/%3E%3Cpath d='M14 6H16V8H14V6Z' fill='white'/%3E%3Cpath d='M14 10H16V12H14V10Z' fill='white'/%3E%3Cpath d='M14 14H16V16H14V14Z' fill='white'/%3E%3Cpath d='M14 18H16V20H14V18Z' fill='white'/%3E%3Cpath d='M14 22H16V24H14V22Z' fill='white'/%3E%3Cpath d='M14 26H16V28H14V26Z' fill='white'/%3E%3Cpath d='M14 30H16V32H14V30Z' fill='white'/%3E%3Cpath d='M14 34H16V36H14V34Z' fill='white'/%3E%3Cpath d='M14 38H16V40H14V38Z' fill='white'/%3E%3Cpath d='M12 4H14V6H12V4Z' fill='white'/%3E%3Cpath d='M12 8H14V10H12V8Z' fill='white'/%3E%3Cpath d='M12 12H14V14H12V12Z' fill='white'/%3E%3Cpath d='M12 16H14V18H12V16Z' fill='white'/%3E%3Cpath d='M12 20H14V22H12V20Z' fill='white'/%3E%3Cpath d='M12 24H14V26H12V24Z' fill='white'/%3E%3Cpath d='M12 28H14V30H12V28Z' fill='white'/%3E%3Cpath d='M12 32H14V34H12V32Z' fill='white'/%3E%3Cpath d='M12 36H14V38H12V36Z' fill='white'/%3E%3Cpath d='M30 2H32V4H30V2Z' fill='white'/%3E%3Cpath d='M30 6H32V8H30V6Z' fill='white'/%3E%3Cpath d='M30 10H32V12H30V10Z' fill='white'/%3E%3Cpath d='M30 14H32V16H30V14Z' fill='white'/%3E%3Cpath d='M30 18H32V20H30V18Z' fill='white'/%3E%3Cpath d='M30 22H32V24H30V22Z' fill='white'/%3E%3Cpath d='M30 26H32V28H30V26Z' fill='white'/%3E%3Cpath d='M30 30H32V32H30V30Z' fill='white'/%3E%3Cpath d='M30 34H32V36H30V34Z' fill='white'/%3E%3Cpath d='M30 38H32V40H30V38Z' fill='white'/%3E%3Cpath d='M28 4H30V6H28V4Z' fill='white'/%3E%3Cpath d='M28 8H30V10H28V8Z' fill='white'/%3E%3Cpath d='M28 12H30V14H28V12Z' fill='white'/%3E%3Cpath d='M28 16H30V18H28V16Z' fill='white'/%3E%3Cpath d='M28 20H30V22H28V20Z' fill='white'/%3E%3Cpath d='M28 24H30V26H28V24Z' fill='white'/%3E%3Cpath d='M28 28H30V30H28V28Z' fill='white'/%3E%3Cpath d='M28 32H30V34H28V32Z' fill='white'/%3E%3Cpath d='M28 36H30V38H28V36Z' fill='white'/%3E%3Cpath d='M38 2H40V4H38V2Z' fill='white'/%3E%3Cpath d='M38 6H40V8H38V6Z' fill='white'/%3E%3Cpath d='M38 10H40V12H38V10Z' fill='white'/%3E%3Cpath d='M38 14H40V16H38V14Z' fill='white'/%3E%3Cpath d='M38 18H40V20H38V18Z' fill='white'/%3E%3Cpath d='M38 22H40V24H38V22Z' fill='white'/%3E%3Cpath d='M38 26H40V28H38V26Z' fill='white'/%3E%3Cpath d='M38 30H40V32H38V30Z' fill='white'/%3E%3Cpath d='M38 34H40V36H38V34Z' fill='white'/%3E%3Cpath d='M38 38H40V40H38V38Z' fill='white'/%3E%3Cpath d='M36 4H38V6H36V4Z' fill='white'/%3E%3Cpath d='M36 8H38V10H36V8Z' fill='white'/%3E%3Cpath d='M36 12H38V14H36V12Z' fill='white'/%3E%3Cpath d='M36 16H38V18H36V16Z' fill='white'/%3E%3Cpath d='M36 20H38V22H36V20Z' fill='white'/%3E%3Cpath d='M36 24H38V26H36V24Z' fill='white'/%3E%3Cpath d='M36 28H38V30H36V28Z' fill='white'/%3E%3Cpath d='M36 32H38V34H36V32Z' fill='white'/%3E%3Cpath d='M36 36H38V38H36V36Z' fill='white'/%3E%3C/svg%3E%0A"); background-size: 42px 42px; background-repeat: no-repeat; } .player .controls .buttons .play span { background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 22H0V0H4V2H8V4H12V6H16V8H20V10H22V12H20V14H16V16H12V18H8V20H4V22Z' fill='%23000000'/%3E%3C/svg%3E%0A"); } .player .controls .buttons .pause span { background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0H0V18H6V0Z' fill='%23707070'/%3E%3Cpath d='M16 0H10V18H16V0Z' fill='%23707070'/%3E%3C/svg%3E%0A"); } .player[data-status='paused'] .controls .buttons .pause span, .player[data-status='playing'] .controls .buttons .pause span, .player[data-status='buffering'] .controls .buttons .pause span { background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0H0V18H6V0Z' fill='%23000000'/%3E%3Cpath d='M16 0H10V18H16V0Z' fill='%23000000'/%3E%3C/svg%3E%0A"); } .player .controls .buttons .stop span { background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='18' fill='%23707070'/%3E%3C/svg%3E%0A"); } .player[data-status='paused'] .controls .buttons .stop span, .player[data-status='playing'] .controls .buttons .stop span, .player[data-status='buffering'] .controls .buttons .stop span { background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='18' fill='%23000000'/%3E%3C/svg%3E%0A"); } .player .controls .sound { display: flex; flex-direction: row; justify-content: space-between; width: 148px; height: 42px; } .player .controls .sound .sound-button { display: block; width: 42px; height: 42px; background: url('data:image/gif;base64,R0lGODlhKgAqAKIGAAAAAICAAICAgMDcwP//AP///wAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuZjM1NGVmYzcwLCAyMDIzLzExLzA5LTEyOjA1OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjUuNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyQUE2Q0Y4Q0RBRkQxMUVFODZEMEE3QkQzRjc1MUQzMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyQUE2Q0Y4RERBRkQxMUVFODZEMEE3QkQzRjc1MUQzMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA5RjM2RjA5REFEMjExRUU4NkQwQTdCRDNGNzUxRDMzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA5RjM2RjBBREFEMjExRUU4NkQwQTdCRDNGNzUxRDMzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAABgAsAAAAACoAKgAAA8xoutz+MMpJq7046827/0AIfJc4klMQCELIopHKugLsqAQRDvxgNzgdoOf7GYIsFq9QeNmQyWWzhgoydwMm00myFrDaqUflzYG13A05kGOah1k0VaNiSttfUTiNqRfuBFd6chxBPHhvPCFbcxmGA4hCigCMhWwEgIJJApVql5l5m50aITICkSZ7jRilK6eBBW+LhB0mXmejG7aXglK5Hq2Jcb+1AEG4YjatorQwy0mqRgats3zKxgHVq0bUANY/3d/cItIQJuXo6errGQkAOw==') no-repeat center; color: rgba(0,0,0,0); cursor: pointer; } .player .controls .sound .sound-button.mute { background: url('data:image/gif;base64,R0lGODlhKgAqAKIHAAAAAICAAICAgMDcwNQ/AP//AP///wAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuZjM1NGVmYzcwLCAyMDIzLzExLzA5LTEyOjA1OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjUuNSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowOUYzNkYwN0RBRDIxMUVFODZEMEE3QkQzRjc1MUQzMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowOUYzNkYwOERBRDIxMUVFODZEMEE3QkQzRjc1MUQzMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA5RjM2RjA1REFEMjExRUU4NkQwQTdCRDNGNzUxRDMzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA5RjM2RjA2REFEMjExRUU4NkQwQTdCRDNGNzUxRDMzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAABwAsAAAAACoAKgAAA/94utz+MMpJq7046827/0AIfJc4kg2hrmwoCOjCzoQLfywTBEUR5riVjucDADkqx673eg0GBkNyMx0ym89o9bJVLAvRUFY6w3QP3zBgTDMTvDtitCcesF5nyTQuN9DXdit4bxV7AVFjPWosUS8KeSmEO4hQfmAGPyuNN5AMhj1PipYtAJuPhHqSRKGXPaSmB50yqqCVroJNsLKncLVzBXe5Bo6xqBFTITsvtyomUbrGEMgAygLMNSLPw5zRx4QmjJiA2oNuCuCa4mObu5GeK1915ALt7+8q8ePP5RlT09UvtNV74O8btQBNBAjs5mZLsgCZBqZyeDAiww40SBGLkXERhY0YEkyAnCBypMmTKFOiTAAAOw==') no-repeat center; } .player .controls .sound .sound-bar input[type=range] { width: 98px; height: 42px; } .player .controls .sound .sound-bar input[type=range]::-webkit-slider-runnable-track { width: 98px; height: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='98' height='30' viewBox='0 0 98 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96 28V2H98V30H0V28H96Z' fill='white'/%3E%3Cpath d='M98 0H94V2H86V4H80V6H72V8H66V10H60V12H52V14H46V16H38V18H32V20H24V22H18V24H12V26H4V28H2V30H4V28H12V26H18V24H24V22H32V20H38V18H46V16H52V14H60V12H66V10H72V8H80V6H86V4H94V2H98V0Z' fill='%23707070'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; } .player .controls .sound .sound-bar input[type=range]::-moz-range-track { width: 98px; height: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='98' height='30' viewBox='0 0 98 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96 28V2H98V30H0V28H96Z' fill='white'/%3E%3Cpath d='M98 0H94V2H86V4H80V6H72V8H66V10H60V12H52V14H46V16H38V18H32V20H24V22H18V24H12V26H4V28H2V30H4V28H12V26H18V24H24V22H32V20H38V18H46V16H52V14H60V12H66V10H72V8H80V6H86V4H94V2H98V0Z' fill='%23707070'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; } .player .controls .sound .sound-bar input[type=range]::-webkit-slider-thumb { width: 20px; height: 42px; translate: 0 -2px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='42' viewBox='0 0 20 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='42' fill='black'/%3E%3Crect width='18' height='40' fill='white'/%3E%3Crect x='2' y='2' width='16' height='38' fill='%23707070'/%3E%3Crect x='2' y='2' width='14' height='36' fill='%23B5B5B5'/%3E%3C/svg%3E%0A"); } .player .controls .sound .sound-bar input[type=range]::-moz-range-thumb { width: 20px; height: 42px; translate: 0 -2px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='42' viewBox='0 0 20 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='42' fill='black'/%3E%3Crect width='18' height='40' fill='white'/%3E%3Crect x='2' y='2' width='16' height='38' fill='%23707070'/%3E%3Crect x='2' y='2' width='14' height='36' fill='%23B5B5B5'/%3E%3C/svg%3E%0A"); } @media (max-width: 800px) { .videoframe.catchframe, .videoframe.cprframe, .videoframe.davinaframe { position: relative; bottom: auto; right: auto; transform: scale(0.8); width: 90vw; height: calc(50.6vw + 150px); top: -5dvh; left: -5dvw; } .player .video-container { width: calc(100dvw); height: calc(50.6vw + 30px); } .player .video-container .cover { } } @media (min-width: 800px) and (max-width: 1300px) { .videoframe.davinaframe { transform: scale(0.7); top: 55dvh } .videoframe.catchframe { transform: scale(0.7); right: 5dvw; } .videoframe.cprframe { transform: scale(0.7); } } @media (min-width: 800px) and (max-width: 1100px) { .videoframe.davinaframe { transform: scale(0.6); top: 50dvh; } .videoframe.catchframe { transform: scale(0.6); right: 5dvw; top: 220dvh; } .videoframe.cprframe { transform: scale(0.6); } #main .window.signup { transform: scale(0.7); margin-right: -3%; } } @media (min-width: 800px) and (max-width: 1000px) { .videoframe.davinaframe { transform: scale(0.5); top: 50dvh; } .videoframe.catchframe { transform: scale(0.5); right: 5dvw; } .videoframe.cprframe { transform: scale(0.5); } } /*