@charset "utf-8";

.video-html5 { display: block; height: 100%; overflow: hidden; position: relative; width: 100%; }

.video-html5__image { inset: 0px; position: absolute; }

.video-html5__image img { height: 100%; object-fit: cover; width: 100%; }

.video-html5__image + .video-html5__video { visibility: hidden; }

.video-html5__video { height: 100%; object-fit: cover; position: relative; width: 100%; }

.video-html5__controls { align-items: center; bottom: 1rem; display: flex; flex-direction: row; gap: 0.5rem; justify-content: flex-start; position: absolute; right: 1rem; z-index: 2; }

.video-html5__controls .btn { --border-radius: 50%; background-color: var(--surface-reverse); border-radius: var(--border-radius); color: var(--text-reverse); }

.video-html5__icon { background-color: currentcolor; height: 1rem; mask-position: center center; mask-repeat: no-repeat; mask-size: contain; width: 1rem; }

.video-html5.is-paused .video-html5__image { z-index: 2; }

.video-html5.is-paused .video-html5__icon--play { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-2 14.5 6-4.5-6-4.5v9ZM4 12c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8Z' fill='currentColor'/%3E%3C/svg%3E"); }

.video-html5.is-playing .video-html5__image { display: none; }

.video-html5.is-playing .video-html5__video { visibility: visible; }

.video-html5.is-playing .video-html5__icon--play { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12Zm9 3c0 .55-.45 1-1 1s-1-.45-1-1V9c0-.55.45-1 1-1s1 .45 1 1v6Zm1 5c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Zm3-5c0 .55-.45 1-1 1s-1-.45-1-1V9c0-.55.45-1 1-1s1 .45 1 1v6Z' fill='currentColor'/%3E%3C/svg%3E"); }

.video-html5.is-muted .video-html5__icon--mute { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M333.1 34.8C344.6 40 352 51.4 352 64v384c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L163.8 352H96c-35.3 0-64-28.7-64-64v-64c0-35.3 28.7-64 64-64h67.8L298.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zm172 72.2c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C507.3 341.3 528 301.1 528 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5c21.5 17.6 35.4 44.4 35.4 74.5s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C425.1 284.4 432 271 432 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5z'/%3E%3C/svg%3E"); }

.video-html5.is-unmuted .video-html5__icon--mute { mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-105.7-82.9C556.7 352 576 306.3 576 256c0-60.1-27.7-113.8-70.9-149-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C507.3 170.7 528 210.9 528 256c0 39.1-15.6 74.5-40.9 100.5L449 326.6c19-17.5 31-42.7 31-70.6 0-30.1-13.9-56.9-35.4-74.5-10.3-8.4-25.4-6.8-33.8 3.5s-6.8 25.4 3.5 33.8C425.1 227.6 432 241 432 256s-6.9 28.4-17.7 37.3c-1.3 1-2.4 2.2-3.4 3.4L352 250.6V64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3l-100.9 89.7L38.8 5.1zM352 373.3l-269.1-212C53.8 167.4 32 193.1 32 224v64c0 35.3 28.7 64 64 64h67.8l134.9 119.9c9.4 8.4 22.9 10.4 34.4 5.3S352 460.6 352 448v-74.7z'/%3E%3C/svg%3E"); }

.video-html5__overlay { inset: 0px; position: absolute; z-index: 1; }

@media only screen and (min-width: 64em) {
  .video-html5__icon { height: 1.5rem; width: 1.5rem; }
}