.button-secondary{grid-column-gap:.5rem;grid-row-gap:.5rem;border-radius:.625rem;background-color:#fff;box-shadow:0 0 0 1px #d1d6e5,0 2px 10px 0 #10182814;color:#0d0f2c;text-align:center;letter-spacing:-.004rem;white-space:nowrap;cursor:pointer;flex-wrap:nowrap;justify-content:center;align-items:center;padding:.75rem 1.125rem;font-size:1rem;font-weight:500;line-height:1.5rem;transition:all .2s;display:flex;position:relative}.button-secondary:hover{background-color:#ffebeb;box-shadow:0 0 0 1px #d1d6e5,0 6px 20px 0 #10182814}.button-secondary:focus{box-shadow:0 0 0 2px #8098f9,0 0 0 5px #e3ebff;}.icon-12{flex:none;justify-content:center;align-items:center;width:.75rem;height:.75rem;transition:transform .2s;display:flex}.video-button{z-index:3;border-radius:999rem;box-shadow:0 6px 20px 0 #10182814;white-space:nowrap;cursor:pointer;background-color:#fff6;border:1px solid #e9ecf666;align-items:center;padding:.375rem;font-weight:500;transition-property:background-color;transition-duration:.6s;display:flex;position:relative}.video-button.is-small{padding:.25rem}.video-button_inner{border-radius:999rem;background-color:#3e57da;box-shadow:0 0 0 1px #c6d7fe;color:#fff;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;transition:background-color .3s;display:flex}.video-button_inner.is-small{width:2rem;height:2rem}.video-button_inner.is-white{box-shadow:0 2px 10px 0 #101828140 0 0 1px #ffebeb;color:#0d0f2c;background-color:#fff}.video-button_inner.is-medium{width:auto;height:auto;padding:1rem}.video-button_label{overflow:hidden}.max-width-40rem{max-width:40rem}.max-width-40rem.is-centered{margin-left:auto;margin-right:auto}.html-video{object-fit:cover;width:100%;max-width:100%;margin-bottom:-.5rem;overflow:hidden}.html-video.lazy{margin-bottom:0}.sticky-test{position:sticky;top:0}.height-200vh{height:200vh}.label-regular { font-size:.75rem; line-height: 1.125rem; letter-spacing: 0; }.html-video-modal-container{z-index:99999;aspect-ratio:16/9;cursor:auto;justify-content:center;align-items:center;width:42.3529rem;margin:auto;position:absolute;inset:0%}.html-video-wrapper{z-index:9999;cursor:pointer;background-color:#2c374f80;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.demo-floating-container{z-index:100;display:flex;position:fixed;bottom:1.75rem;right:7rem}.demo-floating-video-wrapper{border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;transition-property:right,bottom,left,top;transition-duration:.5s,.5s,.5s,.5s;transition-timing-function:ease,ease,ease,ease;position:absolute;inset:0 calc(100% + .5rem) 0 -3.5rem;overflow:hidden}.demo-floating-button-container{opacity:0;cursor:pointer;visibility:hidden;justify-content:flex-start;align-items:center;width:3.5rem;height:3.5rem;padding-left:1rem;transition-property:opacity;transition-duration:.2s;transition-timing-function:ease;display:flex;position:absolute;top:0;left:0}.demo-floating-button-container.is-right{justify-content:flex-end;align-items:center;padding-right:1rem;left:auto;right:0}.demo-floating-icon-button{border:1px solid #ffebeb;border-radius:999rem;color:#0d0f2c;background-color:#fff6;justify-content:center;align-items:center;max-width:1.625rem;max-height:1.625rem;padding:.375rem;transition:max-width .3s,border-color .2s,background-color .2s;display:flex}.demo-floating-backdrop{background-color:#0d0f2c;opacity:0;pointer-events:none;transition:opacity .2s;position:fixed;inset:0}.demo-floating-video-fade{opacity:0;pointer-events:none;background-image:linear-gradient(#0000,#0d0f2cf2);transition:opacity .6s;position:absolute;inset:50% 0 0}.button-secondary.w-inline-block:hover { color: #243c83; background: #fff; } .demo-floating-icon-button .icon-12.w-embed .fa-circle-xmark { font-size: 12px; position: relative; top: -2px; left: 1px; }.demo-floating-icon-button .icon-12.w-embed .fa-volume-xmark, .demo-floating-icon-button .icon-12.w-embed .fa-volume-high { font-size: 14px; position: relative; top: -1px; left: 2px; } /*Collapsed state - avatar video crop*/ .demo-floating-container .html-video { transition: transform .5s ease; transform-origin: top; transform: scale(1); margin-top: -0.25rem; } /*Button to be above video container*/ .demo-floating-container .button, .demo-floating-container .button-secondary { z-index: 3 !important; } /*Display mute icon when video is muted*/ .demo-floating-video-wrapper[is-muted="true"] .demo-floating-button-container [mute-icon] { display: none; } /*Display unmute icon when video is unmuted*/ .demo-floating-video-wrapper[is-muted="false"] .demo-floating-button-container [unmute-icon] { display: none; } @media screen and (max-width: 767px) { /*Always show in designer*/ html.wf-design-mode [floating-bd-cta-component] { bottom: 0%; } /*Hide sticky bar by default*/ [floating-bd-cta-component] { bottom: -100%; transition: .5s ease-in-out; } /*Show sticky bar on class add*/ [floating-bd-cta-component].visible:not(.overlapping) { bottom: 0%; } [floating-bd-cta-component].overlapping { bottom: -100%; } /*Hide secondary button on mobile*/ .demo-floating-container .button-secondary { display: none !important; } /*Remove transition on mobile version*/ .demo-floating-container .html-video { transition: none; } .demo-floating-video-wrapper { transition: none !important; display: none; } /*Hide button when video is playing*/ .demo-floating-video-wrapper[is-muted="false"] [mute-control] { opacity: 0; } /*Mobile styling for mute button container, covers whole video*/ .demo-floating-button-container[mute-control] { visibility: visible; opacity: 1; height: 100%; width: 100%; padding: unset; align-items: start; } /*Mobile styling for mute button*/ .demo-floating-icon-button { max-height: 1rem; max-width: 1rem; margin-top: .25rem; margin-left: .25rem; } .demo-floating-icon-button .icon-12 { max-height: .5rem; max-width: .5rem; color: var(--grey-200); } .demo-floating-button-container[mute-control] [mute-label] { display: none; } } @media screen and (min-width: 768px) { /*Hide primary button on >tablet*/ .demo-floating-container .button { display: none !important; } /* Adjust intercom widget position */ .intercom-lightweight-app .intercom-lightweight-app-launcher, #intercom-facade-btn { bottom: 1.75rem !important; right: 1.25rem !important; width: 3rem !important; max-width: 3rem !important; height: 3rem !important; max-height: 3rem !important; } .intercom-lightweight-app-launcher-icon, #intercom-facade-btn > div:first-child > div:first-child { width: 3rem !important; height: 3rem !important; } /*Active state - avatar video position*/ .demo-floating-container.is-hover:not(.overlapping) .demo-floating-video-wrapper, .demo-floating-container.is-scroll:not(.overlapping) .demo-floating-video-wrapper { bottom: -1rem; left: -1rem; right: -1rem; top: -13rem; } /*Active state - avatar video crop*/ .demo-floating-container.is-hover:not(.overlapping) .html-video, .demo-floating-container.is-scroll:not(.overlapping) .html-video { transform: scale(1); margin-top: 0rem; } /*Active state - Display fade on video*/ .demo-floating-container.is-hover:not(.overlapping) .demo-floating-video-fade, .demo-floating-container.is-scroll:not(.overlapping) .demo-floating-video-fade { opacity: 1; } /*Show pointer cursor when hovering muted video*/ .demo-floating-video-wrapper[is-muted="true"] { cursor: pointer; border: 1px solid #ccc } /*Video control buttons transition delay*/ .demo-floating-container .demo-floating-button-container { transition-delay: .5s; } /*Active state - video control buttons*/ .demo-floating-container.is-hover:not(.overlapping) .demo-floating-button-container, .demo-floating-container.is-scroll:not(.overlapping) .demo-floating-button-container { visibility: visible; opacity: 1; } /*Remove max-width when button has text*/ .demo-floating-video-wrapper[is-muted="true"] .demo-floating-button-container:not(.is-right) .demo-floating-icon-button { max-width: 5rem; } /*Video button hover styling*/ .demo-floating-button-container:hover .demo-floating-icon-button { background-color: rgba(255, 255, 255, 0.8); } /*Trigger hover styling when hovering muted video wrapper*/ .demo-floating-video-wrapper[is-muted="true"]:hover .demo-floating-button-container[mute-control] .demo-floating-icon-button { background-color: rgba(255, 255, 255, 0.8); } /*Mute label default styles*/ .demo-floating-video-wrapper [mute-label] { display: grid; overflow: hidden; max-width: 5rem; transition: max-width .3s ease, padding .3s ease; } /*Display mute label when video is muted*/ .demo-floating-video-wrapper[is-muted="true"] [mute-label] { grid-template-columns: 1fr; padding-left: .25rem; } /*Hide mute label when video is unmuted*/ .demo-floating-video-wrapper[is-muted="false"] [mute-label] { grid-template-columns: 0fr; max-width: 0rem; } /*Button container*/ .demo-floating-container .button-secondary { min-width: 8.75rem; transition: min-width .5s ease } /*Fixes for button growing in open state*/ .demo-floating-container.is-hover:not(.overlapping) .button-secondary, .demo-floating-container.is-scroll:not(.overlapping) .button-secondary { min-width: 11.625rem; box-shadow: unset; } /*Show backdrop when user is hovering the widget*/ .demo-floating-container:hover .demo-floating-backdrop { opacity: .2; } }