/* Generated by tools/hq.py for the About page's building: every picture,
   position, walk, lift ride and drive, in pixels, and the built roster.
   Do not edit by hand. */
.hq-bld-suburban .hq-car-0 { left: -276px; top: 392px; width: 186px; height: 124px; background-image: url(/assets/hq/suburban/car-0.png?v=b2839736); }
@keyframes hq-suburban-car-0 { 0% { left: -276px; top: 392px; animation-timing-function: steps(205, end); } 41.58%, 100% { left: 544px; top: 802px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-car-0 { animation: hq-suburban-car-0 17s 0s linear infinite; } }
.hq-bld-suburban .hq-car-1 { left: -274px; top: 408px; width: 184px; height: 108px; background-image: url(/assets/hq/suburban/car-1.png?v=46c18346); }
@keyframes hq-suburban-car-1 { 0% { left: -274px; top: 408px; animation-timing-function: steps(205, end); } 41.58%, 100% { left: 546px; top: 818px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-car-1 { animation: hq-suburban-car-1 17s -8.5s linear infinite; } }
.hq-bld-suburban .hq-car-2 { left: 514px; top: 836px; width: 92px; height: 58px; background-image: url(/assets/hq/suburban/car-2.png?v=c997fe97); }
@keyframes hq-suburban-car-2 { 0% { left: 514px; top: 836px; animation-timing-function: steps(205, end); } 47.13%, 100% { left: -306px; top: 426px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-car-2 { animation: hq-suburban-car-2 15s -3s linear infinite; } }
.hq-bld-suburban .hq-car-3 { left: 514px; top: 836px; width: 92px; height: 58px; background-image: url(/assets/hq/suburban/car-3.png?v=9f343370); }
@keyframes hq-suburban-car-3 { 0% { left: 514px; top: 836px; animation-timing-function: steps(205, end); } 47.13%, 100% { left: -306px; top: 426px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-car-3 { animation: hq-suburban-car-3 15s -10.5s linear infinite; } }
.hq-bld-suburban .hq-s-office-left { left: 188px; top: 206px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-office-left, .hq-bld-suburban .hq-b-office-left { left: 188px; top: 206px; }
@keyframes hq-suburban-p-office-left { 0.000% { left: 188px; top: 206px; opacity: 1; animation-timing-function: step-end; } 9.332% { left: 188px; top: 206px; opacity: 1; animation-timing-function: step-end; } 9.333% { left: 188px; top: 200px; opacity: 1; animation-timing-function: steps(3, end); } 9.500% { left: 176px; top: 206px; opacity: 1; animation-timing-function: steps(45, end); } 12.000% { left: 356px; top: 296px; opacity: 1; animation-timing-function: steps(4, end); } 12.222% { left: 340px; top: 304px; opacity: 1; animation-timing-function: steps(4, end); } 12.444% { left: 324px; top: 302px; opacity: 1; animation-timing-function: step-end; } 29.330% { left: 324px; top: 302px; opacity: 1; animation-timing-function: step-end; } 29.331% { left: 324px; top: 296px; opacity: 1; animation-timing-function: steps(4, end); } 29.553% { left: 340px; top: 304px; opacity: 1; animation-timing-function: steps(4, end); } 29.776% { left: 356px; top: 296px; opacity: 1; animation-timing-function: steps(45, end); } 32.276% { left: 176px; top: 206px; opacity: 1; animation-timing-function: steps(3, end); } 32.442% { left: 188px; top: 206px; opacity: 1; animation-timing-function: step-end; } 66.668% { left: 188px; top: 206px; opacity: 1; animation-timing-function: step-end; } 66.669% { left: 188px; top: 200px; opacity: 1; animation-timing-function: steps(3, end); } 66.836% { left: 176px; top: 206px; opacity: 1; animation-timing-function: steps(68, end); } 70.613% { left: 448px; top: 342px; opacity: 1; animation-timing-function: steps(4, end); } 70.836% { left: 464px; top: 340px; opacity: 1; animation-timing-function: step-end; } 85.335% { left: 464px; top: 340px; opacity: 1; animation-timing-function: step-end; } 85.336% { left: 464px; top: 334px; opacity: 1; animation-timing-function: steps(4, end); } 85.558% { left: 448px; top: 342px; opacity: 1; animation-timing-function: steps(68, end); } 89.336% { left: 176px; top: 206px; opacity: 1; animation-timing-function: steps(3, end); } 89.502% { left: 188px; top: 206px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 188px; top: 206px; opacity: 1; animation-timing-function: step-end; } 100% { left: 188px; top: 206px; opacity: 1; } }
@keyframes hq-suburban-q-office-left { 0.000% { left: 188px; top: 206px; animation-timing-function: step-end; } 9.332% { left: 188px; top: 206px; animation-timing-function: step-end; } 9.333% { left: 188px; top: 200px; animation-timing-function: steps(3, end); } 9.500% { left: 176px; top: 206px; animation-timing-function: steps(45, end); } 12.000% { left: 356px; top: 296px; animation-timing-function: steps(4, end); } 12.222% { left: 340px; top: 304px; animation-timing-function: steps(4, end); } 12.444% { left: 324px; top: 302px; animation-timing-function: step-end; } 29.330% { left: 324px; top: 302px; animation-timing-function: step-end; } 29.331% { left: 324px; top: 296px; animation-timing-function: steps(4, end); } 29.553% { left: 340px; top: 304px; animation-timing-function: steps(4, end); } 29.776% { left: 356px; top: 296px; animation-timing-function: steps(45, end); } 32.276% { left: 176px; top: 206px; animation-timing-function: steps(3, end); } 32.442% { left: 188px; top: 206px; animation-timing-function: step-end; } 66.668% { left: 188px; top: 206px; animation-timing-function: step-end; } 66.669% { left: 188px; top: 200px; animation-timing-function: steps(3, end); } 66.836% { left: 176px; top: 206px; animation-timing-function: steps(68, end); } 70.613% { left: 448px; top: 342px; animation-timing-function: steps(4, end); } 70.836% { left: 464px; top: 340px; animation-timing-function: step-end; } 85.335% { left: 464px; top: 340px; animation-timing-function: step-end; } 85.336% { left: 464px; top: 334px; animation-timing-function: steps(4, end); } 85.558% { left: 448px; top: 342px; animation-timing-function: steps(68, end); } 89.336% { left: 176px; top: 206px; animation-timing-function: steps(3, end); } 89.502% { left: 188px; top: 206px; animation-timing-function: step-end; } 99.999% { left: 188px; top: 206px; animation-timing-function: step-end; } 100% { left: 188px; top: 206px; } }
@keyframes hq-suburban-r-office-left { 0.000% { background-position-y: 0px; } 9.333% { background-position-y: -68px; } 9.500% { background-position-y: -136px; } 12.000% { background-position-y: -68px; } 12.222% { background-position-y: -204px; } 12.444% { background-position-y: -272px; } 29.331% { background-position-y: -136px; } 29.553% { background-position-y: -340px; } 29.776% { background-position-y: -204px; } 32.276% { background-position-y: -340px; } 32.442% { background-position-y: -408px; } 66.669% { background-position-y: -476px; } 66.836% { background-position-y: -544px; } 70.613% { background-position-y: -612px; } 70.836% { background-position-y: -680px; } 85.336% { background-position-y: -476px; } 85.558% { background-position-y: -748px; } 89.336% { background-position-y: -612px; } 89.502% { background-position-y: -408px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-office-left { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-office-left 150.0s infinite, hq-suburban-r-office-left 150.0s step-end infinite; } .hq-bld-suburban .hq-t-office-left { animation: hq-suburban-q-office-left 150.0s infinite; } }
.hq-bld-suburban .hq-s-office-left:hover ~ .hq-t-office-left { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-s-office-left { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-office-left:focus-visible ~ .hq-s-office-left { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
.hq-bld-suburban .hq-s-office-right { left: 248px; top: 236px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-office-right, .hq-bld-suburban .hq-b-office-right { left: 248px; top: 236px; }
@keyframes hq-suburban-p-office-right { 0.000% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 10.666% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 10.667% { left: 248px; top: 230px; opacity: 1; animation-timing-function: steps(3, end); } 10.833% { left: 236px; top: 236px; opacity: 1; animation-timing-function: steps(37, end); } 12.889% { left: 384px; top: 310px; opacity: 1; animation-timing-function: steps(4, end); } 13.111% { left: 368px; top: 318px; opacity: 1; animation-timing-function: steps(4, end); } 13.333% { left: 352px; top: 316px; opacity: 1; animation-timing-function: step-end; } 29.332% { left: 352px; top: 316px; opacity: 1; animation-timing-function: step-end; } 29.333% { left: 352px; top: 310px; opacity: 1; animation-timing-function: steps(4, end); } 29.556% { left: 368px; top: 318px; opacity: 1; animation-timing-function: steps(4, end); } 29.778% { left: 384px; top: 310px; opacity: 1; animation-timing-function: steps(37, end); } 31.833% { left: 236px; top: 236px; opacity: 1; animation-timing-function: steps(3, end); } 32.000% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 55.999% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 56.000% { left: 248px; top: 230px; opacity: 1; animation-timing-function: steps(3, end); } 56.167% { left: 236px; top: 236px; opacity: 1; animation-timing-function: steps(5, end); } 56.444% { left: 256px; top: 246px; opacity: 1; animation-timing-function: step-end; } 63.997% { left: 256px; top: 246px; opacity: 1; animation-timing-function: step-end; } 63.998% { left: 256px; top: 246px; opacity: 1; animation-timing-function: steps(30, end); } 65.664% { left: 136px; top: 186px; opacity: 1; animation-timing-function: steps(3, end); } 65.831% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 65.942% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 67.608% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 67.609% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 67.720% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 67.998% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(35, end); } 69.942% { left: 244px; top: 528px; opacity: 1; animation-timing-function: steps(5, end); } 70.220% { left: 264px; top: 518px; opacity: 1; animation-timing-function: steps(4, end); } 70.442% { left: 248px; top: 516px; opacity: 1; animation-timing-function: step-end; } 81.335% { left: 248px; top: 516px; opacity: 1; animation-timing-function: step-end; } 81.336% { left: 248px; top: 510px; opacity: 1; animation-timing-function: steps(4, end); } 81.558% { left: 264px; top: 518px; opacity: 1; animation-timing-function: steps(5, end); } 81.836% { left: 244px; top: 528px; opacity: 1; animation-timing-function: steps(35, end); } 83.780% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 84.058% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 84.169% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 85.835% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 85.836% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 85.947% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(3, end); } 86.113% { left: 136px; top: 186px; opacity: 1; animation-timing-function: steps(25, end); } 87.502% { left: 236px; top: 236px; opacity: 1; animation-timing-function: steps(3, end); } 87.669% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 248px; top: 236px; opacity: 1; animation-timing-function: step-end; } 100% { left: 248px; top: 236px; opacity: 1; } }
@keyframes hq-suburban-q-office-right { 0.000% { left: 248px; top: 236px; animation-timing-function: step-end; } 10.666% { left: 248px; top: 236px; animation-timing-function: step-end; } 10.667% { left: 248px; top: 230px; animation-timing-function: steps(3, end); } 10.833% { left: 236px; top: 236px; animation-timing-function: steps(37, end); } 12.889% { left: 384px; top: 310px; animation-timing-function: steps(4, end); } 13.111% { left: 368px; top: 318px; animation-timing-function: steps(4, end); } 13.333% { left: 352px; top: 316px; animation-timing-function: step-end; } 29.332% { left: 352px; top: 316px; animation-timing-function: step-end; } 29.333% { left: 352px; top: 310px; animation-timing-function: steps(4, end); } 29.556% { left: 368px; top: 318px; animation-timing-function: steps(4, end); } 29.778% { left: 384px; top: 310px; animation-timing-function: steps(37, end); } 31.833% { left: 236px; top: 236px; animation-timing-function: steps(3, end); } 32.000% { left: 248px; top: 236px; animation-timing-function: step-end; } 39.999% { left: 248px; top: 236px; animation-timing-function: step-end; } 40.000% { left: 248px; top: 236px; animation-timing-function: step-end; } 55.999% { left: 248px; top: 236px; animation-timing-function: step-end; } 56.000% { left: 248px; top: 230px; animation-timing-function: steps(3, end); } 56.167% { left: 236px; top: 236px; animation-timing-function: steps(5, end); } 56.444% { left: 256px; top: 246px; animation-timing-function: step-end; } 63.997% { left: 256px; top: 246px; animation-timing-function: step-end; } 63.998% { left: 256px; top: 246px; animation-timing-function: steps(30, end); } 65.664% { left: 136px; top: 186px; animation-timing-function: steps(3, end); } 65.831% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 65.942% { left: 116px; top: 188px; animation-timing-function: step-end; } 67.608% { left: 116px; top: 188px; animation-timing-function: step-end; } 67.609% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 67.720% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 67.998% { left: 104px; top: 458px; animation-timing-function: steps(35, end); } 69.942% { left: 244px; top: 528px; animation-timing-function: steps(5, end); } 70.220% { left: 264px; top: 518px; animation-timing-function: steps(4, end); } 70.442% { left: 248px; top: 516px; animation-timing-function: step-end; } 81.335% { left: 248px; top: 516px; animation-timing-function: step-end; } 81.336% { left: 248px; top: 510px; animation-timing-function: steps(4, end); } 81.558% { left: 264px; top: 518px; animation-timing-function: steps(5, end); } 81.836% { left: 244px; top: 528px; animation-timing-function: steps(35, end); } 83.780% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 84.058% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 84.169% { left: 116px; top: 444px; animation-timing-function: step-end; } 85.835% { left: 116px; top: 444px; animation-timing-function: step-end; } 85.836% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 85.947% { left: 124px; top: 192px; animation-timing-function: steps(3, end); } 86.113% { left: 136px; top: 186px; animation-timing-function: steps(25, end); } 87.502% { left: 236px; top: 236px; animation-timing-function: steps(3, end); } 87.669% { left: 248px; top: 236px; animation-timing-function: step-end; } 99.999% { left: 248px; top: 236px; animation-timing-function: step-end; } 100% { left: 248px; top: 236px; } }
@keyframes hq-suburban-r-office-right { 0.000% { background-position-y: 0px; } 10.667% { background-position-y: -68px; } 10.833% { background-position-y: -136px; } 12.889% { background-position-y: -68px; } 13.111% { background-position-y: -204px; } 13.333% { background-position-y: -272px; } 29.333% { background-position-y: -136px; } 29.556% { background-position-y: -340px; } 29.778% { background-position-y: -204px; } 31.833% { background-position-y: -340px; } 32.000% { background-position-y: -408px; } 40.000% { background-position-y: -476px; } 56.000% { background-position-y: -544px; } 56.167% { background-position-y: -612px; } 56.444% { background-position-y: -680px; } 63.998% { background-position-y: -748px; } 65.664% { background-position-y: -544px; } 65.831% { background-position-y: -748px; } 65.942% { background-position-y: -748px; } 67.609% { background-position-y: -612px; } 67.720% { background-position-y: -544px; } 67.998% { background-position-y: -612px; } 69.942% { background-position-y: -816px; } 70.220% { background-position-y: -748px; } 70.442% { background-position-y: -272px; } 81.336% { background-position-y: -612px; } 81.558% { background-position-y: -544px; } 81.836% { background-position-y: -748px; } 83.780% { background-position-y: -816px; } 84.058% { background-position-y: -748px; } 84.169% { background-position-y: -748px; } 85.836% { background-position-y: -612px; } 85.947% { background-position-y: -816px; } 86.113% { background-position-y: -612px; } 87.502% { background-position-y: -816px; } 87.669% { background-position-y: -408px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-office-right { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-office-right 150.0s infinite, hq-suburban-r-office-right 150.0s step-end infinite; } .hq-bld-suburban .hq-t-office-right { animation: hq-suburban-q-office-right 150.0s infinite; } }
.hq-bld-suburban .hq-s-office-right:hover ~ .hq-t-office-right { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-s-office-right { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-office-right:focus-visible ~ .hq-s-office-right { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-pic { background-position-y: -1360px; }
.hq-bld-suburban .hq-s-reception { left: 488px; top: 632px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-reception, .hq-bld-suburban .hq-b-reception { left: 488px; top: 632px; }
@keyframes hq-suburban-p-reception { 0.000% { left: 488px; top: 632px; opacity: 1; animation-timing-function: step-end; } 25.332% { left: 488px; top: 632px; opacity: 1; animation-timing-function: step-end; } 25.333% { left: 488px; top: 626px; opacity: 1; animation-timing-function: steps(4, end); } 25.556% { left: 504px; top: 634px; opacity: 1; animation-timing-function: steps(6, end); } 25.889% { left: 480px; top: 646px; opacity: 1; animation-timing-function: steps(83, end); } 30.500% { left: 148px; top: 480px; opacity: 1; animation-timing-function: steps(8, end); } 30.944% { left: 180px; top: 464px; opacity: 1; animation-timing-function: step-end; } 32.943% { left: 180px; top: 464px; opacity: 1; animation-timing-function: step-end; } 32.944% { left: 180px; top: 464px; opacity: 1; animation-timing-function: steps(8, end); } 33.389% { left: 148px; top: 480px; opacity: 1; animation-timing-function: steps(11, end); } 34.000% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 34.278% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 34.389% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 36.055% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 36.056% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 36.167% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 36.444% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(25, end); } 37.833% { left: 204px; top: 252px; opacity: 1; animation-timing-function: step-end; } 40.499% { left: 204px; top: 252px; opacity: 1; animation-timing-function: step-end; } 40.500% { left: 204px; top: 252px; opacity: 1; animation-timing-function: steps(25, end); } 41.889% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 42.167% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 42.278% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 43.943% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 43.944% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 44.056% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 44.333% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(94, end); } 49.556% { left: 480px; top: 646px; opacity: 1; animation-timing-function: steps(6, end); } 49.889% { left: 504px; top: 634px; opacity: 1; animation-timing-function: steps(4, end); } 50.111% { left: 488px; top: 632px; opacity: 1; animation-timing-function: step-end; } 69.330% { left: 488px; top: 632px; opacity: 1; animation-timing-function: step-end; } 69.331% { left: 488px; top: 626px; opacity: 1; animation-timing-function: steps(4, end); } 69.553% { left: 504px; top: 634px; opacity: 1; animation-timing-function: steps(6, end); } 69.887% { left: 480px; top: 646px; opacity: 1; animation-timing-function: steps(39, end); } 72.053% { left: 324px; top: 568px; opacity: 1; animation-timing-function: step-end; } 77.386% { left: 324px; top: 568px; opacity: 1; animation-timing-function: step-end; } 77.387% { left: 324px; top: 568px; opacity: 1; animation-timing-function: steps(39, end); } 79.553% { left: 480px; top: 646px; opacity: 1; animation-timing-function: steps(6, end); } 79.887% { left: 504px; top: 634px; opacity: 1; animation-timing-function: steps(4, end); } 80.109% { left: 488px; top: 632px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 488px; top: 632px; opacity: 1; animation-timing-function: step-end; } 100% { left: 488px; top: 632px; opacity: 1; } }
@keyframes hq-suburban-q-reception { 0.000% { left: 488px; top: 632px; animation-timing-function: step-end; } 25.332% { left: 488px; top: 632px; animation-timing-function: step-end; } 25.333% { left: 488px; top: 626px; animation-timing-function: steps(4, end); } 25.556% { left: 504px; top: 634px; animation-timing-function: steps(6, end); } 25.889% { left: 480px; top: 646px; animation-timing-function: steps(83, end); } 30.500% { left: 148px; top: 480px; animation-timing-function: steps(8, end); } 30.944% { left: 180px; top: 464px; animation-timing-function: step-end; } 32.943% { left: 180px; top: 464px; animation-timing-function: step-end; } 32.944% { left: 180px; top: 464px; animation-timing-function: steps(8, end); } 33.389% { left: 148px; top: 480px; animation-timing-function: steps(11, end); } 34.000% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 34.278% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 34.389% { left: 116px; top: 444px; animation-timing-function: step-end; } 36.055% { left: 116px; top: 444px; animation-timing-function: step-end; } 36.056% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 36.167% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 36.444% { left: 104px; top: 202px; animation-timing-function: steps(25, end); } 37.833% { left: 204px; top: 252px; animation-timing-function: step-end; } 40.499% { left: 204px; top: 252px; animation-timing-function: step-end; } 40.500% { left: 204px; top: 252px; animation-timing-function: steps(25, end); } 41.889% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 42.167% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 42.278% { left: 116px; top: 188px; animation-timing-function: step-end; } 43.943% { left: 116px; top: 188px; animation-timing-function: step-end; } 43.944% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 44.056% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 44.333% { left: 104px; top: 458px; animation-timing-function: steps(94, end); } 49.556% { left: 480px; top: 646px; animation-timing-function: steps(6, end); } 49.889% { left: 504px; top: 634px; animation-timing-function: steps(4, end); } 50.111% { left: 488px; top: 632px; animation-timing-function: step-end; } 69.330% { left: 488px; top: 632px; animation-timing-function: step-end; } 69.331% { left: 488px; top: 626px; animation-timing-function: steps(4, end); } 69.553% { left: 504px; top: 634px; animation-timing-function: steps(6, end); } 69.887% { left: 480px; top: 646px; animation-timing-function: steps(39, end); } 72.053% { left: 324px; top: 568px; animation-timing-function: step-end; } 77.386% { left: 324px; top: 568px; animation-timing-function: step-end; } 77.387% { left: 324px; top: 568px; animation-timing-function: steps(39, end); } 79.553% { left: 480px; top: 646px; animation-timing-function: steps(6, end); } 79.887% { left: 504px; top: 634px; animation-timing-function: steps(4, end); } 80.109% { left: 488px; top: 632px; animation-timing-function: step-end; } 99.999% { left: 488px; top: 632px; animation-timing-function: step-end; } 100% { left: 488px; top: 632px; } }
@keyframes hq-suburban-r-reception { 0.000% { background-position-y: 0px; } 25.333% { background-position-y: -68px; } 25.556% { background-position-y: -136px; } 25.889% { background-position-y: -204px; } 30.500% { background-position-y: -272px; } 30.944% { background-position-y: -340px; } 32.944% { background-position-y: -408px; } 33.389% { background-position-y: -476px; } 34.000% { background-position-y: -544px; } 34.278% { background-position-y: -476px; } 34.389% { background-position-y: -476px; } 36.056% { background-position-y: -612px; } 36.167% { background-position-y: -408px; } 36.444% { background-position-y: -612px; } 37.833% { background-position-y: -680px; } 40.500% { background-position-y: -204px; } 41.889% { background-position-y: -272px; } 42.167% { background-position-y: -204px; } 42.278% { background-position-y: -204px; } 43.944% { background-position-y: -68px; } 44.056% { background-position-y: -136px; } 44.333% { background-position-y: -68px; } 49.556% { background-position-y: -272px; } 49.889% { background-position-y: -204px; } 50.111% { background-position-y: 0px; } 69.331% { background-position-y: -748px; } 69.553% { background-position-y: -816px; } 69.887% { background-position-y: -884px; } 72.053% { background-position-y: -952px; } 77.387% { background-position-y: -748px; } 79.553% { background-position-y: -1020px; } 79.887% { background-position-y: -884px; } 80.109% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-reception { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-reception 150.0s infinite, hq-suburban-r-reception 150.0s step-end infinite; } .hq-bld-suburban .hq-t-reception { animation: hq-suburban-q-reception 150.0s infinite; } }
.hq-bld-suburban .hq-s-reception:hover ~ .hq-t-reception { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-s-reception { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-reception:focus-visible ~ .hq-s-reception { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-card .hq-card-pic { background-position-y: -1904px; }
@keyframes hq-suburban-cat-orange-p-reception { 0.000% { left: 470px; top: 664px; opacity: 1; animation-timing-function: step-end; } 25.332% { left: 470px; top: 664px; opacity: 1; animation-timing-function: step-end; } 25.333% { left: 470px; top: 664px; opacity: 1; animation-timing-function: steps(4, end); } 25.556% { left: 486px; top: 672px; opacity: 1; animation-timing-function: steps(6, end); } 25.889% { left: 462px; top: 684px; opacity: 1; animation-timing-function: steps(83, end); } 30.500% { left: 130px; top: 518px; opacity: 1; animation-timing-function: steps(8, end); } 30.944% { left: 162px; top: 502px; opacity: 1; animation-timing-function: step-end; } 32.943% { left: 162px; top: 502px; opacity: 1; animation-timing-function: step-end; } 32.944% { left: 162px; top: 502px; opacity: 1; animation-timing-function: steps(8, end); } 33.389% { left: 130px; top: 518px; opacity: 1; animation-timing-function: steps(11, end); } 34.000% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 34.278% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 34.389% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 36.055% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 36.056% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 36.167% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 36.444% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(25, end); } 37.833% { left: 186px; top: 290px; opacity: 1; animation-timing-function: step-end; } 40.499% { left: 186px; top: 290px; opacity: 1; animation-timing-function: step-end; } 40.500% { left: 186px; top: 290px; opacity: 1; animation-timing-function: steps(25, end); } 41.889% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 42.167% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 42.278% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 43.943% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 43.944% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 44.056% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 44.333% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(94, end); } 49.556% { left: 462px; top: 684px; opacity: 1; animation-timing-function: steps(6, end); } 49.889% { left: 486px; top: 672px; opacity: 1; animation-timing-function: steps(4, end); } 50.111% { left: 470px; top: 664px; opacity: 1; animation-timing-function: step-end; } 69.330% { left: 470px; top: 664px; opacity: 1; animation-timing-function: step-end; } 69.331% { left: 470px; top: 664px; opacity: 1; animation-timing-function: steps(4, end); } 69.553% { left: 486px; top: 672px; opacity: 1; animation-timing-function: steps(6, end); } 69.887% { left: 462px; top: 684px; opacity: 1; animation-timing-function: steps(39, end); } 72.053% { left: 306px; top: 606px; opacity: 1; animation-timing-function: step-end; } 77.386% { left: 306px; top: 606px; opacity: 1; animation-timing-function: step-end; } 77.387% { left: 306px; top: 606px; opacity: 1; animation-timing-function: steps(39, end); } 79.553% { left: 462px; top: 684px; opacity: 1; animation-timing-function: steps(6, end); } 79.887% { left: 486px; top: 672px; opacity: 1; animation-timing-function: steps(4, end); } 80.109% { left: 470px; top: 664px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 470px; top: 664px; opacity: 1; animation-timing-function: step-end; } 100% { left: 470px; top: 664px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-reception { 0.000% { background-position-y: -52px; } 25.333% { background-position-y: 0px; } 25.556% { background-position-y: -26px; } 25.889% { background-position-y: -26px; } 30.500% { background-position-y: 0px; } 30.944% { background-position-y: -52px; } 32.944% { background-position-y: -26px; } 33.389% { background-position-y: -26px; } 34.000% { background-position-y: 0px; } 34.278% { background-position-y: -26px; } 34.389% { background-position-y: -52px; } 36.056% { background-position-y: 0px; } 36.167% { background-position-y: -26px; } 36.444% { background-position-y: 0px; } 37.833% { background-position-y: -52px; } 40.500% { background-position-y: -26px; } 41.889% { background-position-y: 0px; } 42.167% { background-position-y: -26px; } 42.278% { background-position-y: -52px; } 43.944% { background-position-y: 0px; } 44.056% { background-position-y: -26px; } 44.333% { background-position-y: 0px; } 49.556% { background-position-y: 0px; } 49.889% { background-position-y: -26px; } 50.111% { background-position-y: -52px; } 69.331% { background-position-y: 0px; } 69.553% { background-position-y: -26px; } 69.887% { background-position-y: -26px; } 72.053% { background-position-y: -52px; } 77.387% { background-position-y: 0px; } 79.553% { background-position-y: 0px; } 79.887% { background-position-y: -26px; } 80.109% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-racks { left: 508px; top: 512px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-racks, .hq-bld-suburban .hq-b-racks { left: 508px; top: 512px; }
@keyframes hq-suburban-p-racks { 0.000% { left: 508px; top: 512px; opacity: 1; animation-timing-function: step-end; } 6.666% { left: 508px; top: 512px; opacity: 1; animation-timing-function: step-end; } 6.667% { left: 508px; top: 512px; opacity: 1; animation-timing-function: steps(5, end); } 6.944% { left: 488px; top: 522px; opacity: 1; animation-timing-function: steps(96, end); } 12.278% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 12.556% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 12.667% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 14.332% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 14.333% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 14.444% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 14.722% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(64, end); } 18.278% { left: 360px; top: 330px; opacity: 1; animation-timing-function: steps(1, end); } 18.333% { left: 364px; top: 328px; opacity: 1; animation-timing-function: step-end; } 29.332% { left: 364px; top: 328px; opacity: 1; animation-timing-function: step-end; } 29.333% { left: 364px; top: 328px; opacity: 1; animation-timing-function: steps(1, end); } 29.389% { left: 360px; top: 330px; opacity: 1; animation-timing-function: steps(64, end); } 32.944% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 33.222% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 33.333% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 34.999% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 35.000% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 35.111% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 35.389% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(96, end); } 40.722% { left: 488px; top: 522px; opacity: 1; animation-timing-function: steps(5, end); } 41.000% { left: 508px; top: 512px; opacity: 1; animation-timing-function: step-end; } 63.999% { left: 508px; top: 512px; opacity: 1; animation-timing-function: step-end; } 64.000% { left: 508px; top: 512px; opacity: 1; animation-timing-function: steps(5, end); } 64.278% { left: 488px; top: 522px; opacity: 1; animation-timing-function: steps(37, end); } 66.333% { left: 340px; top: 448px; opacity: 1; animation-timing-function: steps(1, end); } 66.389% { left: 344px; top: 446px; opacity: 1; animation-timing-function: step-end; } 70.388% { left: 344px; top: 446px; opacity: 1; animation-timing-function: step-end; } 70.389% { left: 344px; top: 446px; opacity: 1; animation-timing-function: steps(1, end); } 70.444% { left: 340px; top: 448px; opacity: 1; animation-timing-function: steps(37, end); } 72.500% { left: 488px; top: 522px; opacity: 1; animation-timing-function: steps(5, end); } 72.778% { left: 508px; top: 512px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 508px; top: 512px; opacity: 1; animation-timing-function: step-end; } 100% { left: 508px; top: 512px; opacity: 1; } }
@keyframes hq-suburban-q-racks { 0.000% { left: 508px; top: 512px; animation-timing-function: step-end; } 6.666% { left: 508px; top: 512px; animation-timing-function: step-end; } 6.667% { left: 508px; top: 512px; animation-timing-function: steps(5, end); } 6.944% { left: 488px; top: 522px; animation-timing-function: steps(96, end); } 12.278% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 12.556% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 12.667% { left: 116px; top: 316px; animation-timing-function: step-end; } 14.332% { left: 116px; top: 316px; animation-timing-function: step-end; } 14.333% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 14.444% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 14.722% { left: 104px; top: 202px; animation-timing-function: steps(64, end); } 18.278% { left: 360px; top: 330px; animation-timing-function: steps(1, end); } 18.333% { left: 364px; top: 328px; animation-timing-function: step-end; } 29.332% { left: 364px; top: 328px; animation-timing-function: step-end; } 29.333% { left: 364px; top: 328px; animation-timing-function: steps(1, end); } 29.389% { left: 360px; top: 330px; animation-timing-function: steps(64, end); } 32.944% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 33.222% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 33.333% { left: 116px; top: 188px; animation-timing-function: step-end; } 34.999% { left: 116px; top: 188px; animation-timing-function: step-end; } 35.000% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 35.111% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 35.389% { left: 104px; top: 330px; animation-timing-function: steps(96, end); } 40.722% { left: 488px; top: 522px; animation-timing-function: steps(5, end); } 41.000% { left: 508px; top: 512px; animation-timing-function: step-end; } 63.999% { left: 508px; top: 512px; animation-timing-function: step-end; } 64.000% { left: 508px; top: 512px; animation-timing-function: steps(5, end); } 64.278% { left: 488px; top: 522px; animation-timing-function: steps(37, end); } 66.333% { left: 340px; top: 448px; animation-timing-function: steps(1, end); } 66.389% { left: 344px; top: 446px; animation-timing-function: step-end; } 70.388% { left: 344px; top: 446px; animation-timing-function: step-end; } 70.389% { left: 344px; top: 446px; animation-timing-function: steps(1, end); } 70.444% { left: 340px; top: 448px; animation-timing-function: steps(37, end); } 72.500% { left: 488px; top: 522px; animation-timing-function: steps(5, end); } 72.778% { left: 508px; top: 512px; animation-timing-function: step-end; } 99.999% { left: 508px; top: 512px; animation-timing-function: step-end; } 100% { left: 508px; top: 512px; } }
@keyframes hq-suburban-r-racks { 0.000% { background-position-y: 0px; } 6.667% { background-position-y: -68px; } 6.944% { background-position-y: -136px; } 12.278% { background-position-y: -204px; } 12.556% { background-position-y: -136px; } 12.667% { background-position-y: -136px; } 14.333% { background-position-y: -272px; } 14.444% { background-position-y: -68px; } 14.722% { background-position-y: -272px; } 18.278% { background-position-y: -204px; } 18.333% { background-position-y: -340px; } 29.333% { background-position-y: -68px; } 29.389% { background-position-y: -136px; } 32.944% { background-position-y: -204px; } 33.222% { background-position-y: -136px; } 33.333% { background-position-y: -136px; } 35.000% { background-position-y: -272px; } 35.111% { background-position-y: -68px; } 35.389% { background-position-y: -272px; } 40.722% { background-position-y: -204px; } 41.000% { background-position-y: 0px; } 64.000% { background-position-y: -408px; } 64.278% { background-position-y: -476px; } 66.333% { background-position-y: -544px; } 66.389% { background-position-y: -612px; } 70.389% { background-position-y: -408px; } 70.444% { background-position-y: -680px; } 72.500% { background-position-y: -544px; } 72.778% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-racks { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-racks 150.0s infinite, hq-suburban-r-racks 150.0s step-end infinite; } .hq-bld-suburban .hq-t-racks { animation: hq-suburban-q-racks 150.0s infinite; } }
.hq-bld-suburban .hq-s-racks:hover ~ .hq-t-racks { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-s-racks { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-racks:focus-visible ~ .hq-s-racks { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-pic { background-position-y: -680px; }
@keyframes hq-suburban-cat-orange-p-racks { 0.000% { left: 490px; top: 550px; opacity: 1; animation-timing-function: step-end; } 6.666% { left: 490px; top: 550px; opacity: 1; animation-timing-function: step-end; } 6.667% { left: 490px; top: 550px; opacity: 1; animation-timing-function: steps(5, end); } 6.944% { left: 470px; top: 560px; opacity: 1; animation-timing-function: steps(96, end); } 12.278% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 12.556% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 12.667% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 14.332% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 14.333% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 14.444% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 14.722% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(64, end); } 18.278% { left: 342px; top: 368px; opacity: 1; animation-timing-function: steps(1, end); } 18.333% { left: 346px; top: 366px; opacity: 1; animation-timing-function: step-end; } 29.332% { left: 346px; top: 366px; opacity: 1; animation-timing-function: step-end; } 29.333% { left: 346px; top: 366px; opacity: 1; animation-timing-function: steps(1, end); } 29.389% { left: 342px; top: 368px; opacity: 1; animation-timing-function: steps(64, end); } 32.944% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 33.222% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 33.333% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 34.999% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 35.000% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 35.111% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 35.389% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(96, end); } 40.722% { left: 470px; top: 560px; opacity: 1; animation-timing-function: steps(5, end); } 41.000% { left: 490px; top: 550px; opacity: 1; animation-timing-function: step-end; } 63.999% { left: 490px; top: 550px; opacity: 1; animation-timing-function: step-end; } 64.000% { left: 490px; top: 550px; opacity: 1; animation-timing-function: steps(5, end); } 64.278% { left: 470px; top: 560px; opacity: 1; animation-timing-function: steps(37, end); } 66.333% { left: 322px; top: 486px; opacity: 1; animation-timing-function: steps(1, end); } 66.389% { left: 326px; top: 484px; opacity: 1; animation-timing-function: step-end; } 70.388% { left: 326px; top: 484px; opacity: 1; animation-timing-function: step-end; } 70.389% { left: 326px; top: 484px; opacity: 1; animation-timing-function: steps(1, end); } 70.444% { left: 322px; top: 486px; opacity: 1; animation-timing-function: steps(37, end); } 72.500% { left: 470px; top: 560px; opacity: 1; animation-timing-function: steps(5, end); } 72.778% { left: 490px; top: 550px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 490px; top: 550px; opacity: 1; animation-timing-function: step-end; } 100% { left: 490px; top: 550px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-racks { 0.000% { background-position-y: -52px; } 6.667% { background-position-y: -26px; } 6.944% { background-position-y: -26px; } 12.278% { background-position-y: 0px; } 12.556% { background-position-y: -26px; } 12.667% { background-position-y: -52px; } 14.333% { background-position-y: 0px; } 14.444% { background-position-y: -26px; } 14.722% { background-position-y: 0px; } 18.278% { background-position-y: 0px; } 18.333% { background-position-y: -52px; } 29.333% { background-position-y: -26px; } 29.389% { background-position-y: -26px; } 32.944% { background-position-y: 0px; } 33.222% { background-position-y: -26px; } 33.333% { background-position-y: -52px; } 35.000% { background-position-y: 0px; } 35.111% { background-position-y: -26px; } 35.389% { background-position-y: 0px; } 40.722% { background-position-y: 0px; } 41.000% { background-position-y: -52px; } 64.000% { background-position-y: -26px; } 64.278% { background-position-y: -26px; } 66.333% { background-position-y: 0px; } 66.389% { background-position-y: -52px; } 70.389% { background-position-y: -26px; } 70.444% { background-position-y: 0px; } 72.500% { background-position-y: 0px; } 72.778% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-music-desk { left: 356px; top: 438px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-music-desk, .hq-bld-suburban .hq-b-music-desk { left: 356px; top: 438px; }
@keyframes hq-suburban-p-music-desk { 0.000% { left: 356px; top: 438px; opacity: 1; animation-timing-function: step-end; } 66.666% { left: 356px; top: 438px; opacity: 1; animation-timing-function: step-end; } 66.667% { left: 356px; top: 432px; opacity: 1; animation-timing-function: steps(4, end); } 66.889% { left: 372px; top: 440px; opacity: 1; animation-timing-function: steps(6, end); } 67.222% { left: 348px; top: 452px; opacity: 1; animation-timing-function: steps(61, end); } 70.611% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 70.889% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 71.000% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 72.666% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 72.667% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 72.778% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 73.056% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(86, end); } 77.833% { left: 448px; top: 374px; opacity: 1; animation-timing-function: steps(12, end); } 78.500% { left: 496px; top: 356px; opacity: 1; animation-timing-function: step-end; } 85.332% { left: 496px; top: 356px; opacity: 1; animation-timing-function: step-end; } 85.333% { left: 496px; top: 350px; opacity: 1; animation-timing-function: steps(12, end); } 86.000% { left: 448px; top: 374px; opacity: 1; animation-timing-function: steps(86, end); } 90.778% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 91.056% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 91.167% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 92.832% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 92.833% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 92.944% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 93.222% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(61, end); } 96.611% { left: 348px; top: 452px; opacity: 1; animation-timing-function: steps(6, end); } 96.944% { left: 372px; top: 440px; opacity: 1; animation-timing-function: steps(4, end); } 97.167% { left: 356px; top: 438px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 356px; top: 438px; opacity: 1; animation-timing-function: step-end; } 100% { left: 356px; top: 438px; opacity: 1; } }
@keyframes hq-suburban-q-music-desk { 0.000% { left: 356px; top: 438px; animation-timing-function: step-end; } 66.666% { left: 356px; top: 438px; animation-timing-function: step-end; } 66.667% { left: 356px; top: 432px; animation-timing-function: steps(4, end); } 66.889% { left: 372px; top: 440px; animation-timing-function: steps(6, end); } 67.222% { left: 348px; top: 452px; animation-timing-function: steps(61, end); } 70.611% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 70.889% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 71.000% { left: 116px; top: 316px; animation-timing-function: step-end; } 72.666% { left: 116px; top: 316px; animation-timing-function: step-end; } 72.667% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 72.778% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 73.056% { left: 104px; top: 202px; animation-timing-function: steps(86, end); } 77.833% { left: 448px; top: 374px; animation-timing-function: steps(12, end); } 78.500% { left: 496px; top: 356px; animation-timing-function: step-end; } 85.332% { left: 496px; top: 356px; animation-timing-function: step-end; } 85.333% { left: 496px; top: 350px; animation-timing-function: steps(12, end); } 86.000% { left: 448px; top: 374px; animation-timing-function: steps(86, end); } 90.778% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 91.056% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 91.167% { left: 116px; top: 188px; animation-timing-function: step-end; } 92.832% { left: 116px; top: 188px; animation-timing-function: step-end; } 92.833% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 92.944% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 93.222% { left: 104px; top: 330px; animation-timing-function: steps(61, end); } 96.611% { left: 348px; top: 452px; animation-timing-function: steps(6, end); } 96.944% { left: 372px; top: 440px; animation-timing-function: steps(4, end); } 97.167% { left: 356px; top: 438px; animation-timing-function: step-end; } 99.999% { left: 356px; top: 438px; animation-timing-function: step-end; } 100% { left: 356px; top: 438px; } }
@keyframes hq-suburban-r-music-desk { 0.000% { background-position-y: 0px; } 66.667% { background-position-y: -68px; } 66.889% { background-position-y: -136px; } 67.222% { background-position-y: -204px; } 70.611% { background-position-y: -272px; } 70.889% { background-position-y: -204px; } 71.000% { background-position-y: -204px; } 72.667% { background-position-y: -68px; } 72.778% { background-position-y: -136px; } 73.056% { background-position-y: -68px; } 77.833% { background-position-y: -272px; } 78.500% { background-position-y: -340px; } 85.333% { background-position-y: -408px; } 86.000% { background-position-y: -476px; } 90.778% { background-position-y: -544px; } 91.056% { background-position-y: -476px; } 91.167% { background-position-y: -476px; } 92.833% { background-position-y: -612px; } 92.944% { background-position-y: -408px; } 93.222% { background-position-y: -612px; } 96.611% { background-position-y: -544px; } 96.944% { background-position-y: -476px; } 97.167% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-music-desk { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-music-desk 150.0s infinite, hq-suburban-r-music-desk 150.0s step-end infinite; } .hq-bld-suburban .hq-t-music-desk { animation: hq-suburban-q-music-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-music-desk:hover ~ .hq-t-music-desk { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-s-music-desk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-music-desk:focus-visible ~ .hq-s-music-desk { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
@keyframes hq-suburban-cat-orange-p-music-desk { 0.000% { left: 338px; top: 470px; opacity: 1; animation-timing-function: step-end; } 66.666% { left: 338px; top: 470px; opacity: 1; animation-timing-function: step-end; } 66.667% { left: 338px; top: 470px; opacity: 1; animation-timing-function: steps(4, end); } 66.889% { left: 354px; top: 478px; opacity: 1; animation-timing-function: steps(6, end); } 67.222% { left: 330px; top: 490px; opacity: 1; animation-timing-function: steps(61, end); } 70.611% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 70.889% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 71.000% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 72.666% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 72.667% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 72.778% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 73.056% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(86, end); } 77.833% { left: 430px; top: 412px; opacity: 1; animation-timing-function: steps(12, end); } 78.500% { left: 478px; top: 388px; opacity: 1; animation-timing-function: step-end; } 85.332% { left: 478px; top: 388px; opacity: 1; animation-timing-function: step-end; } 85.333% { left: 478px; top: 388px; opacity: 1; animation-timing-function: steps(12, end); } 86.000% { left: 430px; top: 412px; opacity: 1; animation-timing-function: steps(86, end); } 90.778% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 91.056% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 91.167% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 92.832% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 92.833% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 92.944% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 93.222% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(61, end); } 96.611% { left: 330px; top: 490px; opacity: 1; animation-timing-function: steps(6, end); } 96.944% { left: 354px; top: 478px; opacity: 1; animation-timing-function: steps(4, end); } 97.167% { left: 338px; top: 470px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 338px; top: 470px; opacity: 1; animation-timing-function: step-end; } 100% { left: 338px; top: 470px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-music-desk { 0.000% { background-position-y: -52px; } 66.667% { background-position-y: 0px; } 66.889% { background-position-y: -26px; } 67.222% { background-position-y: -26px; } 70.611% { background-position-y: 0px; } 70.889% { background-position-y: -26px; } 71.000% { background-position-y: -52px; } 72.667% { background-position-y: 0px; } 72.778% { background-position-y: -26px; } 73.056% { background-position-y: 0px; } 77.833% { background-position-y: 0px; } 78.500% { background-position-y: -52px; } 85.333% { background-position-y: -26px; } 86.000% { background-position-y: -26px; } 90.778% { background-position-y: 0px; } 91.056% { background-position-y: -26px; } 91.167% { background-position-y: -52px; } 92.833% { background-position-y: 0px; } 92.944% { background-position-y: -26px; } 93.222% { background-position-y: 0px; } 96.611% { background-position-y: 0px; } 96.944% { background-position-y: -26px; } 97.167% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-model-desk { left: 304px; top: 412px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-model-desk, .hq-bld-suburban .hq-b-model-desk { left: 304px; top: 412px; }
@keyframes hq-suburban-p-model-desk { 0.000% { left: 304px; top: 412px; opacity: 1; animation-timing-function: step-end; } 9.332% { left: 304px; top: 412px; opacity: 1; animation-timing-function: step-end; } 9.333% { left: 304px; top: 406px; opacity: 1; animation-timing-function: steps(4, end); } 9.556% { left: 320px; top: 414px; opacity: 1; animation-timing-function: steps(6, end); } 9.889% { left: 296px; top: 426px; opacity: 1; animation-timing-function: steps(48, end); } 12.556% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 12.833% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 12.944% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 14.610% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 14.611% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 14.722% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 15.000% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(48, end); } 17.667% { left: 296px; top: 298px; opacity: 1; animation-timing-function: steps(4, end); } 17.889% { left: 312px; top: 290px; opacity: 1; animation-timing-function: steps(4, end); } 18.111% { left: 296px; top: 288px; opacity: 1; animation-timing-function: step-end; } 29.330% { left: 296px; top: 288px; opacity: 1; animation-timing-function: step-end; } 29.331% { left: 296px; top: 282px; opacity: 1; animation-timing-function: steps(4, end); } 29.553% { left: 312px; top: 290px; opacity: 1; animation-timing-function: steps(4, end); } 29.776% { left: 296px; top: 298px; opacity: 1; animation-timing-function: steps(48, end); } 32.442% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 32.720% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 32.831% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 34.497% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 34.498% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 34.609% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 34.887% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(48, end); } 37.553% { left: 296px; top: 426px; opacity: 1; animation-timing-function: steps(6, end); } 37.887% { left: 320px; top: 414px; opacity: 1; animation-timing-function: steps(4, end); } 38.109% { left: 304px; top: 412px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 304px; top: 412px; opacity: 1; animation-timing-function: step-end; } 100% { left: 304px; top: 412px; opacity: 1; } }
@keyframes hq-suburban-q-model-desk { 0.000% { left: 304px; top: 412px; animation-timing-function: step-end; } 9.332% { left: 304px; top: 412px; animation-timing-function: step-end; } 9.333% { left: 304px; top: 406px; animation-timing-function: steps(4, end); } 9.556% { left: 320px; top: 414px; animation-timing-function: steps(6, end); } 9.889% { left: 296px; top: 426px; animation-timing-function: steps(48, end); } 12.556% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 12.833% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 12.944% { left: 116px; top: 316px; animation-timing-function: step-end; } 14.610% { left: 116px; top: 316px; animation-timing-function: step-end; } 14.611% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 14.722% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 15.000% { left: 104px; top: 202px; animation-timing-function: steps(48, end); } 17.667% { left: 296px; top: 298px; animation-timing-function: steps(4, end); } 17.889% { left: 312px; top: 290px; animation-timing-function: steps(4, end); } 18.111% { left: 296px; top: 288px; animation-timing-function: step-end; } 29.330% { left: 296px; top: 288px; animation-timing-function: step-end; } 29.331% { left: 296px; top: 282px; animation-timing-function: steps(4, end); } 29.553% { left: 312px; top: 290px; animation-timing-function: steps(4, end); } 29.776% { left: 296px; top: 298px; animation-timing-function: steps(48, end); } 32.442% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 32.720% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 32.831% { left: 116px; top: 188px; animation-timing-function: step-end; } 34.497% { left: 116px; top: 188px; animation-timing-function: step-end; } 34.498% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 34.609% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 34.887% { left: 104px; top: 330px; animation-timing-function: steps(48, end); } 37.553% { left: 296px; top: 426px; animation-timing-function: steps(6, end); } 37.887% { left: 320px; top: 414px; animation-timing-function: steps(4, end); } 38.109% { left: 304px; top: 412px; animation-timing-function: step-end; } 99.999% { left: 304px; top: 412px; animation-timing-function: step-end; } 100% { left: 304px; top: 412px; } }
@keyframes hq-suburban-r-model-desk { 0.000% { background-position-y: 0px; } 9.333% { background-position-y: -68px; } 9.556% { background-position-y: -136px; } 9.889% { background-position-y: -204px; } 12.556% { background-position-y: -272px; } 12.833% { background-position-y: -204px; } 12.944% { background-position-y: -204px; } 14.611% { background-position-y: -68px; } 14.722% { background-position-y: -136px; } 15.000% { background-position-y: -68px; } 17.667% { background-position-y: -272px; } 17.889% { background-position-y: -204px; } 18.111% { background-position-y: -340px; } 29.331% { background-position-y: -68px; } 29.553% { background-position-y: -136px; } 29.776% { background-position-y: -204px; } 32.442% { background-position-y: -272px; } 32.720% { background-position-y: -204px; } 32.831% { background-position-y: -204px; } 34.498% { background-position-y: -68px; } 34.609% { background-position-y: -136px; } 34.887% { background-position-y: -68px; } 37.553% { background-position-y: -272px; } 37.887% { background-position-y: -204px; } 38.109% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-model-desk { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-model-desk 150.0s infinite, hq-suburban-r-model-desk 150.0s step-end infinite; } .hq-bld-suburban .hq-t-model-desk { animation: hq-suburban-q-model-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-model-desk:hover ~ .hq-t-model-desk { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-s-model-desk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-model-desk:focus-visible ~ .hq-s-model-desk { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
@keyframes hq-suburban-cat-orange-p-model-desk { 0.000% { left: 286px; top: 444px; opacity: 1; animation-timing-function: step-end; } 9.332% { left: 286px; top: 444px; opacity: 1; animation-timing-function: step-end; } 9.333% { left: 286px; top: 444px; opacity: 1; animation-timing-function: steps(4, end); } 9.556% { left: 302px; top: 452px; opacity: 1; animation-timing-function: steps(6, end); } 9.889% { left: 278px; top: 464px; opacity: 1; animation-timing-function: steps(48, end); } 12.556% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 12.833% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 12.944% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 14.610% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 14.611% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 14.722% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 15.000% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(48, end); } 17.667% { left: 278px; top: 336px; opacity: 1; animation-timing-function: steps(4, end); } 17.889% { left: 294px; top: 328px; opacity: 1; animation-timing-function: steps(4, end); } 18.111% { left: 278px; top: 320px; opacity: 1; animation-timing-function: step-end; } 29.330% { left: 278px; top: 320px; opacity: 1; animation-timing-function: step-end; } 29.331% { left: 278px; top: 320px; opacity: 1; animation-timing-function: steps(4, end); } 29.553% { left: 294px; top: 328px; opacity: 1; animation-timing-function: steps(4, end); } 29.776% { left: 278px; top: 336px; opacity: 1; animation-timing-function: steps(48, end); } 32.442% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 32.720% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 32.831% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 34.497% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 34.498% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 34.609% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 34.887% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(48, end); } 37.553% { left: 278px; top: 464px; opacity: 1; animation-timing-function: steps(6, end); } 37.887% { left: 302px; top: 452px; opacity: 1; animation-timing-function: steps(4, end); } 38.109% { left: 286px; top: 444px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 286px; top: 444px; opacity: 1; animation-timing-function: step-end; } 100% { left: 286px; top: 444px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-model-desk { 0.000% { background-position-y: -52px; } 9.333% { background-position-y: 0px; } 9.556% { background-position-y: -26px; } 9.889% { background-position-y: -26px; } 12.556% { background-position-y: 0px; } 12.833% { background-position-y: -26px; } 12.944% { background-position-y: -52px; } 14.611% { background-position-y: 0px; } 14.722% { background-position-y: -26px; } 15.000% { background-position-y: 0px; } 17.667% { background-position-y: 0px; } 17.889% { background-position-y: -26px; } 18.111% { background-position-y: -52px; } 29.331% { background-position-y: 0px; } 29.553% { background-position-y: -26px; } 29.776% { background-position-y: -26px; } 32.442% { background-position-y: 0px; } 32.720% { background-position-y: -26px; } 32.831% { background-position-y: -52px; } 34.498% { background-position-y: 0px; } 34.609% { background-position-y: -26px; } 34.887% { background-position-y: 0px; } 37.553% { background-position-y: 0px; } 37.887% { background-position-y: -26px; } 38.109% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-first-desk { left: 156px; top: 338px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-first-desk, .hq-bld-suburban .hq-b-first-desk { left: 156px; top: 338px; }
@keyframes hq-suburban-p-first-desk { 0.000% { left: 156px; top: 338px; opacity: 1; animation-timing-function: step-end; } 31.999% { left: 156px; top: 338px; opacity: 1; animation-timing-function: step-end; } 32.000% { left: 156px; top: 332px; opacity: 1; animation-timing-function: steps(4, end); } 32.222% { left: 172px; top: 340px; opacity: 1; animation-timing-function: steps(6, end); } 32.556% { left: 148px; top: 352px; opacity: 1; animation-timing-function: steps(11, end); } 33.167% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 33.444% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 33.556% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 35.221% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 35.222% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 35.333% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 35.611% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(4, end); } 35.833% { left: 120px; top: 466px; opacity: 1; animation-timing-function: steps(8, end); } 36.278% { left: 152px; top: 450px; opacity: 1; animation-timing-function: step-end; } 38.277% { left: 152px; top: 450px; opacity: 1; animation-timing-function: step-end; } 38.278% { left: 152px; top: 450px; opacity: 1; animation-timing-function: steps(8, end); } 38.722% { left: 120px; top: 466px; opacity: 1; animation-timing-function: steps(30, end); } 40.389% { left: 240px; top: 526px; opacity: 1; animation-timing-function: step-end; } 61.335% { left: 240px; top: 526px; opacity: 1; animation-timing-function: step-end; } 61.336% { left: 240px; top: 526px; opacity: 1; animation-timing-function: steps(34, end); } 63.224% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 63.502% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 63.613% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 65.279% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 65.280% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 65.391% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 65.669% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(11, end); } 66.280% { left: 148px; top: 352px; opacity: 1; animation-timing-function: steps(6, end); } 66.613% { left: 172px; top: 340px; opacity: 1; animation-timing-function: steps(4, end); } 66.836% { left: 156px; top: 338px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 156px; top: 338px; opacity: 1; animation-timing-function: step-end; } 100% { left: 156px; top: 338px; opacity: 1; } }
@keyframes hq-suburban-q-first-desk { 0.000% { left: 156px; top: 338px; animation-timing-function: step-end; } 31.999% { left: 156px; top: 338px; animation-timing-function: step-end; } 32.000% { left: 156px; top: 332px; animation-timing-function: steps(4, end); } 32.222% { left: 172px; top: 340px; animation-timing-function: steps(6, end); } 32.556% { left: 148px; top: 352px; animation-timing-function: steps(11, end); } 33.167% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 33.444% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 33.556% { left: 116px; top: 316px; animation-timing-function: step-end; } 35.221% { left: 116px; top: 316px; animation-timing-function: step-end; } 35.222% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 35.333% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 35.611% { left: 104px; top: 458px; animation-timing-function: steps(4, end); } 35.833% { left: 120px; top: 466px; animation-timing-function: steps(8, end); } 36.278% { left: 152px; top: 450px; animation-timing-function: step-end; } 38.277% { left: 152px; top: 450px; animation-timing-function: step-end; } 38.278% { left: 152px; top: 450px; animation-timing-function: steps(8, end); } 38.722% { left: 120px; top: 466px; animation-timing-function: steps(30, end); } 40.389% { left: 240px; top: 526px; animation-timing-function: step-end; } 61.335% { left: 240px; top: 526px; animation-timing-function: step-end; } 61.336% { left: 240px; top: 526px; animation-timing-function: steps(34, end); } 63.224% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 63.502% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 63.613% { left: 116px; top: 444px; animation-timing-function: step-end; } 65.279% { left: 116px; top: 444px; animation-timing-function: step-end; } 65.280% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 65.391% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 65.669% { left: 104px; top: 330px; animation-timing-function: steps(11, end); } 66.280% { left: 148px; top: 352px; animation-timing-function: steps(6, end); } 66.613% { left: 172px; top: 340px; animation-timing-function: steps(4, end); } 66.836% { left: 156px; top: 338px; animation-timing-function: step-end; } 99.999% { left: 156px; top: 338px; animation-timing-function: step-end; } 100% { left: 156px; top: 338px; } }
@keyframes hq-suburban-r-first-desk { 0.000% { background-position-y: 0px; } 32.000% { background-position-y: -68px; } 32.222% { background-position-y: -136px; } 32.556% { background-position-y: -204px; } 33.167% { background-position-y: -272px; } 33.444% { background-position-y: -204px; } 33.556% { background-position-y: -204px; } 35.222% { background-position-y: -68px; } 35.333% { background-position-y: -136px; } 35.611% { background-position-y: -68px; } 35.833% { background-position-y: -272px; } 36.278% { background-position-y: -340px; } 38.278% { background-position-y: -408px; } 38.722% { background-position-y: -476px; } 40.389% { background-position-y: -544px; } 61.336% { background-position-y: -612px; } 63.224% { background-position-y: -680px; } 63.502% { background-position-y: -612px; } 63.613% { background-position-y: -612px; } 65.280% { background-position-y: -476px; } 65.391% { background-position-y: -408px; } 65.669% { background-position-y: -476px; } 66.280% { background-position-y: -680px; } 66.613% { background-position-y: -612px; } 66.836% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-first-desk { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-first-desk 150.0s infinite, hq-suburban-r-first-desk 150.0s step-end infinite; } .hq-bld-suburban .hq-t-first-desk { animation: hq-suburban-q-first-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-first-desk:hover ~ .hq-t-first-desk { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-s-first-desk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-first-desk:focus-visible ~ .hq-s-first-desk { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-pic { background-position-y: -1088px; }
@keyframes hq-suburban-cat-orange-p-first-desk { 0.000% { left: 138px; top: 370px; opacity: 1; animation-timing-function: step-end; } 31.999% { left: 138px; top: 370px; opacity: 1; animation-timing-function: step-end; } 32.000% { left: 138px; top: 370px; opacity: 1; animation-timing-function: steps(4, end); } 32.222% { left: 154px; top: 378px; opacity: 1; animation-timing-function: steps(6, end); } 32.556% { left: 130px; top: 390px; opacity: 1; animation-timing-function: steps(11, end); } 33.167% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 33.444% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 33.556% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 35.221% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 35.222% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 35.333% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 35.611% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(4, end); } 35.833% { left: 102px; top: 504px; opacity: 1; animation-timing-function: steps(8, end); } 36.278% { left: 134px; top: 488px; opacity: 1; animation-timing-function: step-end; } 38.277% { left: 134px; top: 488px; opacity: 1; animation-timing-function: step-end; } 38.278% { left: 134px; top: 488px; opacity: 1; animation-timing-function: steps(8, end); } 38.722% { left: 102px; top: 504px; opacity: 1; animation-timing-function: steps(30, end); } 40.389% { left: 222px; top: 564px; opacity: 1; animation-timing-function: step-end; } 61.335% { left: 222px; top: 564px; opacity: 1; animation-timing-function: step-end; } 61.336% { left: 222px; top: 564px; opacity: 1; animation-timing-function: steps(34, end); } 63.224% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 63.502% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 63.613% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 65.279% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 65.280% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 65.391% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 65.669% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(11, end); } 66.280% { left: 130px; top: 390px; opacity: 1; animation-timing-function: steps(6, end); } 66.613% { left: 154px; top: 378px; opacity: 1; animation-timing-function: steps(4, end); } 66.836% { left: 138px; top: 370px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 138px; top: 370px; opacity: 1; animation-timing-function: step-end; } 100% { left: 138px; top: 370px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-first-desk { 0.000% { background-position-y: -52px; } 32.000% { background-position-y: 0px; } 32.222% { background-position-y: -26px; } 32.556% { background-position-y: -26px; } 33.167% { background-position-y: 0px; } 33.444% { background-position-y: -26px; } 33.556% { background-position-y: -52px; } 35.222% { background-position-y: 0px; } 35.333% { background-position-y: -26px; } 35.611% { background-position-y: 0px; } 35.833% { background-position-y: 0px; } 36.278% { background-position-y: -52px; } 38.278% { background-position-y: -26px; } 38.722% { background-position-y: 0px; } 40.389% { background-position-y: -52px; } 61.336% { background-position-y: -26px; } 63.224% { background-position-y: 0px; } 63.502% { background-position-y: -26px; } 63.613% { background-position-y: -52px; } 65.280% { background-position-y: 0px; } 65.391% { background-position-y: -26px; } 65.669% { background-position-y: 0px; } 66.280% { background-position-y: 0px; } 66.613% { background-position-y: -26px; } 66.836% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-code-desk { left: 208px; top: 364px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-code-desk, .hq-bld-suburban .hq-b-code-desk { left: 208px; top: 364px; }
@keyframes hq-suburban-p-code-desk { 0.000% { left: 208px; top: 364px; opacity: 1; animation-timing-function: step-end; } 33.999% { left: 208px; top: 364px; opacity: 1; animation-timing-function: step-end; } 34.000% { left: 208px; top: 358px; opacity: 1; animation-timing-function: steps(4, end); } 34.222% { left: 224px; top: 366px; opacity: 1; animation-timing-function: steps(6, end); } 34.556% { left: 200px; top: 378px; opacity: 1; animation-timing-function: steps(24, end); } 35.889% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 36.167% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 36.278% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 37.943% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 37.944% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 38.056% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 38.333% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(9, end); } 38.833% { left: 140px; top: 476px; opacity: 1; animation-timing-function: steps(8, end); } 39.278% { left: 172px; top: 460px; opacity: 1; animation-timing-function: step-end; } 41.277% { left: 172px; top: 460px; opacity: 1; animation-timing-function: step-end; } 41.278% { left: 172px; top: 460px; opacity: 1; animation-timing-function: steps(8, end); } 41.722% { left: 140px; top: 476px; opacity: 1; animation-timing-function: steps(30, end); } 43.389% { left: 260px; top: 536px; opacity: 1; animation-timing-function: step-end; } 61.335% { left: 260px; top: 536px; opacity: 1; animation-timing-function: step-end; } 61.336% { left: 260px; top: 536px; opacity: 1; animation-timing-function: steps(39, end); } 63.502% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 63.780% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 63.891% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 65.557% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 65.558% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 65.669% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 65.947% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(24, end); } 67.280% { left: 200px; top: 378px; opacity: 1; animation-timing-function: steps(6, end); } 67.613% { left: 224px; top: 366px; opacity: 1; animation-timing-function: steps(4, end); } 67.836% { left: 208px; top: 364px; opacity: 1; animation-timing-function: step-end; } 80.001% { left: 208px; top: 364px; opacity: 1; animation-timing-function: step-end; } 80.002% { left: 208px; top: 358px; opacity: 1; animation-timing-function: steps(4, end); } 80.224% { left: 224px; top: 366px; opacity: 1; animation-timing-function: steps(6, end); } 80.558% { left: 200px; top: 378px; opacity: 1; animation-timing-function: steps(11, end); } 81.169% { left: 244px; top: 400px; opacity: 1; animation-timing-function: steps(1, end); } 81.224% { left: 248px; top: 398px; opacity: 1; animation-timing-function: step-end; } 85.223% { left: 248px; top: 398px; opacity: 1; animation-timing-function: step-end; } 85.224% { left: 248px; top: 398px; opacity: 1; animation-timing-function: steps(1, end); } 85.280% { left: 244px; top: 400px; opacity: 1; animation-timing-function: steps(11, end); } 85.891% { left: 200px; top: 378px; opacity: 1; animation-timing-function: steps(6, end); } 86.224% { left: 224px; top: 366px; opacity: 1; animation-timing-function: steps(4, end); } 86.447% { left: 208px; top: 364px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 208px; top: 364px; opacity: 1; animation-timing-function: step-end; } 100% { left: 208px; top: 364px; opacity: 1; } }
@keyframes hq-suburban-q-code-desk { 0.000% { left: 208px; top: 364px; animation-timing-function: step-end; } 33.999% { left: 208px; top: 364px; animation-timing-function: step-end; } 34.000% { left: 208px; top: 358px; animation-timing-function: steps(4, end); } 34.222% { left: 224px; top: 366px; animation-timing-function: steps(6, end); } 34.556% { left: 200px; top: 378px; animation-timing-function: steps(24, end); } 35.889% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 36.167% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 36.278% { left: 116px; top: 316px; animation-timing-function: step-end; } 37.943% { left: 116px; top: 316px; animation-timing-function: step-end; } 37.944% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 38.056% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 38.333% { left: 104px; top: 458px; animation-timing-function: steps(9, end); } 38.833% { left: 140px; top: 476px; animation-timing-function: steps(8, end); } 39.278% { left: 172px; top: 460px; animation-timing-function: step-end; } 41.277% { left: 172px; top: 460px; animation-timing-function: step-end; } 41.278% { left: 172px; top: 460px; animation-timing-function: steps(8, end); } 41.722% { left: 140px; top: 476px; animation-timing-function: steps(30, end); } 43.389% { left: 260px; top: 536px; animation-timing-function: step-end; } 61.335% { left: 260px; top: 536px; animation-timing-function: step-end; } 61.336% { left: 260px; top: 536px; animation-timing-function: steps(39, end); } 63.502% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 63.780% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 63.891% { left: 116px; top: 444px; animation-timing-function: step-end; } 65.557% { left: 116px; top: 444px; animation-timing-function: step-end; } 65.558% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 65.669% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 65.947% { left: 104px; top: 330px; animation-timing-function: steps(24, end); } 67.280% { left: 200px; top: 378px; animation-timing-function: steps(6, end); } 67.613% { left: 224px; top: 366px; animation-timing-function: steps(4, end); } 67.836% { left: 208px; top: 364px; animation-timing-function: step-end; } 80.001% { left: 208px; top: 364px; animation-timing-function: step-end; } 80.002% { left: 208px; top: 358px; animation-timing-function: steps(4, end); } 80.224% { left: 224px; top: 366px; animation-timing-function: steps(6, end); } 80.558% { left: 200px; top: 378px; animation-timing-function: steps(11, end); } 81.169% { left: 244px; top: 400px; animation-timing-function: steps(1, end); } 81.224% { left: 248px; top: 398px; animation-timing-function: step-end; } 85.223% { left: 248px; top: 398px; animation-timing-function: step-end; } 85.224% { left: 248px; top: 398px; animation-timing-function: steps(1, end); } 85.280% { left: 244px; top: 400px; animation-timing-function: steps(11, end); } 85.891% { left: 200px; top: 378px; animation-timing-function: steps(6, end); } 86.224% { left: 224px; top: 366px; animation-timing-function: steps(4, end); } 86.447% { left: 208px; top: 364px; animation-timing-function: step-end; } 99.999% { left: 208px; top: 364px; animation-timing-function: step-end; } 100% { left: 208px; top: 364px; } }
@keyframes hq-suburban-r-code-desk { 0.000% { background-position-y: 0px; } 34.000% { background-position-y: -68px; } 34.222% { background-position-y: -136px; } 34.556% { background-position-y: -204px; } 35.889% { background-position-y: -272px; } 36.167% { background-position-y: -204px; } 36.278% { background-position-y: -204px; } 37.944% { background-position-y: -68px; } 38.056% { background-position-y: -136px; } 38.333% { background-position-y: -68px; } 38.833% { background-position-y: -272px; } 39.278% { background-position-y: -340px; } 41.278% { background-position-y: -408px; } 41.722% { background-position-y: -476px; } 43.389% { background-position-y: -544px; } 61.336% { background-position-y: -612px; } 63.502% { background-position-y: -680px; } 63.780% { background-position-y: -612px; } 63.891% { background-position-y: -612px; } 65.558% { background-position-y: -476px; } 65.669% { background-position-y: -408px; } 65.947% { background-position-y: -476px; } 67.280% { background-position-y: -680px; } 67.613% { background-position-y: -612px; } 67.836% { background-position-y: 0px; } 80.002% { background-position-y: -748px; } 80.224% { background-position-y: -816px; } 80.558% { background-position-y: -748px; } 81.169% { background-position-y: -884px; } 81.224% { background-position-y: -952px; } 85.224% { background-position-y: -816px; } 85.280% { background-position-y: -1020px; } 85.891% { background-position-y: -884px; } 86.224% { background-position-y: -1020px; } 86.447% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-code-desk { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-code-desk 150.0s infinite, hq-suburban-r-code-desk 150.0s step-end infinite; } .hq-bld-suburban .hq-t-code-desk { animation: hq-suburban-q-code-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-code-desk:hover ~ .hq-t-code-desk { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-s-code-desk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-code-desk:focus-visible ~ .hq-s-code-desk { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
@keyframes hq-suburban-cat-orange-p-code-desk { 0.000% { left: 190px; top: 396px; opacity: 1; animation-timing-function: step-end; } 33.999% { left: 190px; top: 396px; opacity: 1; animation-timing-function: step-end; } 34.000% { left: 190px; top: 396px; opacity: 1; animation-timing-function: steps(4, end); } 34.222% { left: 206px; top: 404px; opacity: 1; animation-timing-function: steps(6, end); } 34.556% { left: 182px; top: 416px; opacity: 1; animation-timing-function: steps(24, end); } 35.889% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 36.167% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 36.278% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 37.943% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 37.944% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 38.056% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 38.333% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(9, end); } 38.833% { left: 122px; top: 514px; opacity: 1; animation-timing-function: steps(8, end); } 39.278% { left: 154px; top: 498px; opacity: 1; animation-timing-function: step-end; } 41.277% { left: 154px; top: 498px; opacity: 1; animation-timing-function: step-end; } 41.278% { left: 154px; top: 498px; opacity: 1; animation-timing-function: steps(8, end); } 41.722% { left: 122px; top: 514px; opacity: 1; animation-timing-function: steps(30, end); } 43.389% { left: 242px; top: 574px; opacity: 1; animation-timing-function: step-end; } 61.335% { left: 242px; top: 574px; opacity: 1; animation-timing-function: step-end; } 61.336% { left: 242px; top: 574px; opacity: 1; animation-timing-function: steps(39, end); } 63.502% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 63.780% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 63.891% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 65.557% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 65.558% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 65.669% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 65.947% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(24, end); } 67.280% { left: 182px; top: 416px; opacity: 1; animation-timing-function: steps(6, end); } 67.613% { left: 206px; top: 404px; opacity: 1; animation-timing-function: steps(4, end); } 67.836% { left: 190px; top: 396px; opacity: 1; animation-timing-function: step-end; } 80.001% { left: 190px; top: 396px; opacity: 1; animation-timing-function: step-end; } 80.002% { left: 190px; top: 396px; opacity: 1; animation-timing-function: steps(4, end); } 80.224% { left: 206px; top: 404px; opacity: 1; animation-timing-function: steps(6, end); } 80.558% { left: 182px; top: 416px; opacity: 1; animation-timing-function: steps(11, end); } 81.169% { left: 226px; top: 438px; opacity: 1; animation-timing-function: steps(1, end); } 81.224% { left: 230px; top: 436px; opacity: 1; animation-timing-function: step-end; } 85.223% { left: 230px; top: 436px; opacity: 1; animation-timing-function: step-end; } 85.224% { left: 230px; top: 436px; opacity: 1; animation-timing-function: steps(1, end); } 85.280% { left: 226px; top: 438px; opacity: 1; animation-timing-function: steps(11, end); } 85.891% { left: 182px; top: 416px; opacity: 1; animation-timing-function: steps(6, end); } 86.224% { left: 206px; top: 404px; opacity: 1; animation-timing-function: steps(4, end); } 86.447% { left: 190px; top: 396px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 190px; top: 396px; opacity: 1; animation-timing-function: step-end; } 100% { left: 190px; top: 396px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-code-desk { 0.000% { background-position-y: -52px; } 34.000% { background-position-y: 0px; } 34.222% { background-position-y: -26px; } 34.556% { background-position-y: -26px; } 35.889% { background-position-y: 0px; } 36.167% { background-position-y: -26px; } 36.278% { background-position-y: -52px; } 37.944% { background-position-y: 0px; } 38.056% { background-position-y: -26px; } 38.333% { background-position-y: 0px; } 38.833% { background-position-y: 0px; } 39.278% { background-position-y: -52px; } 41.278% { background-position-y: -26px; } 41.722% { background-position-y: 0px; } 43.389% { background-position-y: -52px; } 61.336% { background-position-y: -26px; } 63.502% { background-position-y: 0px; } 63.780% { background-position-y: -26px; } 63.891% { background-position-y: -52px; } 65.558% { background-position-y: 0px; } 65.669% { background-position-y: -26px; } 65.947% { background-position-y: 0px; } 67.280% { background-position-y: 0px; } 67.613% { background-position-y: -26px; } 67.836% { background-position-y: -52px; } 80.002% { background-position-y: 0px; } 80.224% { background-position-y: -26px; } 80.558% { background-position-y: 0px; } 81.169% { background-position-y: 0px; } 81.224% { background-position-y: -52px; } 85.224% { background-position-y: -26px; } 85.280% { background-position-y: -26px; } 85.891% { background-position-y: 0px; } 86.224% { background-position-y: -26px; } 86.447% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-phone-desk { left: 256px; top: 388px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-phone-desk, .hq-bld-suburban .hq-b-phone-desk { left: 256px; top: 388px; }
@keyframes hq-suburban-p-phone-desk { 0.000% { left: 256px; top: 388px; opacity: 1; animation-timing-function: step-end; } 17.332% { left: 256px; top: 388px; opacity: 1; animation-timing-function: step-end; } 17.333% { left: 256px; top: 382px; opacity: 1; animation-timing-function: steps(4, end); } 17.556% { left: 272px; top: 390px; opacity: 1; animation-timing-function: steps(6, end); } 17.889% { left: 248px; top: 402px; opacity: 1; animation-timing-function: steps(7, end); } 18.278% { left: 220px; top: 388px; opacity: 1; animation-timing-function: steps(1, end); } 18.333% { left: 216px; top: 390px; opacity: 1; animation-timing-function: step-end; } 21.666% { left: 216px; top: 390px; opacity: 1; animation-timing-function: step-end; } 21.667% { left: 216px; top: 390px; opacity: 1; animation-timing-function: steps(1, end); } 21.722% { left: 220px; top: 388px; opacity: 1; animation-timing-function: steps(7, end); } 22.111% { left: 248px; top: 402px; opacity: 1; animation-timing-function: steps(6, end); } 22.444% { left: 272px; top: 390px; opacity: 1; animation-timing-function: steps(4, end); } 22.667% { left: 256px; top: 388px; opacity: 1; animation-timing-function: step-end; } 35.999% { left: 256px; top: 388px; opacity: 1; animation-timing-function: step-end; } 36.000% { left: 256px; top: 382px; opacity: 1; animation-timing-function: steps(4, end); } 36.222% { left: 272px; top: 390px; opacity: 1; animation-timing-function: steps(6, end); } 36.556% { left: 248px; top: 402px; opacity: 1; animation-timing-function: steps(36, end); } 38.556% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 38.833% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 38.944% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 40.610% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 40.611% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 40.722% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 41.000% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(14, end); } 41.778% { left: 160px; top: 486px; opacity: 1; animation-timing-function: steps(8, end); } 42.222% { left: 192px; top: 470px; opacity: 1; animation-timing-function: step-end; } 44.221% { left: 192px; top: 470px; opacity: 1; animation-timing-function: step-end; } 44.222% { left: 192px; top: 470px; opacity: 1; animation-timing-function: steps(8, end); } 44.667% { left: 160px; top: 486px; opacity: 1; animation-timing-function: steps(29, end); } 46.278% { left: 276px; top: 544px; opacity: 1; animation-timing-function: steps(1, end); } 46.333% { left: 272px; top: 546px; opacity: 1; animation-timing-function: step-end; } 61.332% { left: 272px; top: 546px; opacity: 1; animation-timing-function: step-end; } 61.333% { left: 272px; top: 546px; opacity: 1; animation-timing-function: steps(1, end); } 61.389% { left: 276px; top: 544px; opacity: 1; animation-timing-function: steps(43, end); } 63.778% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 64.056% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 64.167% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 65.832% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 65.833% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 65.944% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 66.222% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(36, end); } 68.222% { left: 248px; top: 402px; opacity: 1; animation-timing-function: steps(6, end); } 68.556% { left: 272px; top: 390px; opacity: 1; animation-timing-function: steps(4, end); } 68.778% { left: 256px; top: 388px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 256px; top: 388px; opacity: 1; animation-timing-function: step-end; } 100% { left: 256px; top: 388px; opacity: 1; } }
@keyframes hq-suburban-q-phone-desk { 0.000% { left: 256px; top: 388px; animation-timing-function: step-end; } 17.332% { left: 256px; top: 388px; animation-timing-function: step-end; } 17.333% { left: 256px; top: 382px; animation-timing-function: steps(4, end); } 17.556% { left: 272px; top: 390px; animation-timing-function: steps(6, end); } 17.889% { left: 248px; top: 402px; animation-timing-function: steps(7, end); } 18.278% { left: 220px; top: 388px; animation-timing-function: steps(1, end); } 18.333% { left: 216px; top: 390px; animation-timing-function: step-end; } 21.666% { left: 216px; top: 390px; animation-timing-function: step-end; } 21.667% { left: 216px; top: 390px; animation-timing-function: steps(1, end); } 21.722% { left: 220px; top: 388px; animation-timing-function: steps(7, end); } 22.111% { left: 248px; top: 402px; animation-timing-function: steps(6, end); } 22.444% { left: 272px; top: 390px; animation-timing-function: steps(4, end); } 22.667% { left: 256px; top: 388px; animation-timing-function: step-end; } 35.999% { left: 256px; top: 388px; animation-timing-function: step-end; } 36.000% { left: 256px; top: 382px; animation-timing-function: steps(4, end); } 36.222% { left: 272px; top: 390px; animation-timing-function: steps(6, end); } 36.556% { left: 248px; top: 402px; animation-timing-function: steps(36, end); } 38.556% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 38.833% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 38.944% { left: 116px; top: 316px; animation-timing-function: step-end; } 40.610% { left: 116px; top: 316px; animation-timing-function: step-end; } 40.611% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 40.722% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 41.000% { left: 104px; top: 458px; animation-timing-function: steps(14, end); } 41.778% { left: 160px; top: 486px; animation-timing-function: steps(8, end); } 42.222% { left: 192px; top: 470px; animation-timing-function: step-end; } 44.221% { left: 192px; top: 470px; animation-timing-function: step-end; } 44.222% { left: 192px; top: 470px; animation-timing-function: steps(8, end); } 44.667% { left: 160px; top: 486px; animation-timing-function: steps(29, end); } 46.278% { left: 276px; top: 544px; animation-timing-function: steps(1, end); } 46.333% { left: 272px; top: 546px; animation-timing-function: step-end; } 61.332% { left: 272px; top: 546px; animation-timing-function: step-end; } 61.333% { left: 272px; top: 546px; animation-timing-function: steps(1, end); } 61.389% { left: 276px; top: 544px; animation-timing-function: steps(43, end); } 63.778% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 64.056% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 64.167% { left: 116px; top: 444px; animation-timing-function: step-end; } 65.832% { left: 116px; top: 444px; animation-timing-function: step-end; } 65.833% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 65.944% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 66.222% { left: 104px; top: 330px; animation-timing-function: steps(36, end); } 68.222% { left: 248px; top: 402px; animation-timing-function: steps(6, end); } 68.556% { left: 272px; top: 390px; animation-timing-function: steps(4, end); } 68.778% { left: 256px; top: 388px; animation-timing-function: step-end; } 99.999% { left: 256px; top: 388px; animation-timing-function: step-end; } 100% { left: 256px; top: 388px; } }
@keyframes hq-suburban-r-phone-desk { 0.000% { background-position-y: 0px; } 17.333% { background-position-y: -68px; } 17.556% { background-position-y: -136px; } 17.889% { background-position-y: -204px; } 18.278% { background-position-y: -136px; } 18.333% { background-position-y: -272px; } 21.667% { background-position-y: -340px; } 21.722% { background-position-y: -68px; } 22.111% { background-position-y: -340px; } 22.444% { background-position-y: -204px; } 22.667% { background-position-y: 0px; } 36.000% { background-position-y: -68px; } 36.222% { background-position-y: -136px; } 36.556% { background-position-y: -204px; } 38.556% { background-position-y: -340px; } 38.833% { background-position-y: -204px; } 38.944% { background-position-y: -204px; } 40.611% { background-position-y: -68px; } 40.722% { background-position-y: -136px; } 41.000% { background-position-y: -68px; } 41.778% { background-position-y: -340px; } 42.222% { background-position-y: -408px; } 44.222% { background-position-y: -476px; } 44.667% { background-position-y: -544px; } 46.278% { background-position-y: -476px; } 46.333% { background-position-y: -612px; } 61.333% { background-position-y: -680px; } 61.389% { background-position-y: -748px; } 63.778% { background-position-y: -680px; } 64.056% { background-position-y: -748px; } 64.167% { background-position-y: -748px; } 65.833% { background-position-y: -544px; } 65.944% { background-position-y: -476px; } 66.222% { background-position-y: -544px; } 68.222% { background-position-y: -680px; } 68.556% { background-position-y: -748px; } 68.778% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-phone-desk { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-phone-desk 150.0s infinite, hq-suburban-r-phone-desk 150.0s step-end infinite; } .hq-bld-suburban .hq-t-phone-desk { animation: hq-suburban-q-phone-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-phone-desk:hover ~ .hq-t-phone-desk { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-s-phone-desk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-phone-desk:focus-visible ~ .hq-s-phone-desk { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-pic { background-position-y: -544px; }
@keyframes hq-suburban-cat-orange-p-phone-desk { 0.000% { left: 238px; top: 420px; opacity: 1; animation-timing-function: step-end; } 17.332% { left: 238px; top: 420px; opacity: 1; animation-timing-function: step-end; } 17.333% { left: 238px; top: 420px; opacity: 1; animation-timing-function: steps(4, end); } 17.556% { left: 254px; top: 428px; opacity: 1; animation-timing-function: steps(6, end); } 17.889% { left: 230px; top: 440px; opacity: 1; animation-timing-function: steps(7, end); } 18.278% { left: 202px; top: 426px; opacity: 1; animation-timing-function: steps(1, end); } 18.333% { left: 198px; top: 428px; opacity: 1; animation-timing-function: step-end; } 21.666% { left: 198px; top: 428px; opacity: 1; animation-timing-function: step-end; } 21.667% { left: 198px; top: 428px; opacity: 1; animation-timing-function: steps(1, end); } 21.722% { left: 202px; top: 426px; opacity: 1; animation-timing-function: steps(7, end); } 22.111% { left: 230px; top: 440px; opacity: 1; animation-timing-function: steps(6, end); } 22.444% { left: 254px; top: 428px; opacity: 1; animation-timing-function: steps(4, end); } 22.667% { left: 238px; top: 420px; opacity: 1; animation-timing-function: step-end; } 35.999% { left: 238px; top: 420px; opacity: 1; animation-timing-function: step-end; } 36.000% { left: 238px; top: 420px; opacity: 1; animation-timing-function: steps(4, end); } 36.222% { left: 254px; top: 428px; opacity: 1; animation-timing-function: steps(6, end); } 36.556% { left: 230px; top: 440px; opacity: 1; animation-timing-function: steps(36, end); } 38.556% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 38.833% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 38.944% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 40.610% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 40.611% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 40.722% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 41.000% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(14, end); } 41.778% { left: 142px; top: 524px; opacity: 1; animation-timing-function: steps(8, end); } 42.222% { left: 174px; top: 508px; opacity: 1; animation-timing-function: step-end; } 44.221% { left: 174px; top: 508px; opacity: 1; animation-timing-function: step-end; } 44.222% { left: 174px; top: 508px; opacity: 1; animation-timing-function: steps(8, end); } 44.667% { left: 142px; top: 524px; opacity: 1; animation-timing-function: steps(29, end); } 46.278% { left: 258px; top: 582px; opacity: 1; animation-timing-function: steps(1, end); } 46.333% { left: 254px; top: 584px; opacity: 1; animation-timing-function: step-end; } 61.332% { left: 254px; top: 584px; opacity: 1; animation-timing-function: step-end; } 61.333% { left: 254px; top: 584px; opacity: 1; animation-timing-function: steps(1, end); } 61.389% { left: 258px; top: 582px; opacity: 1; animation-timing-function: steps(43, end); } 63.778% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 64.056% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 64.167% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 65.832% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 65.833% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 65.944% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 66.222% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(36, end); } 68.222% { left: 230px; top: 440px; opacity: 1; animation-timing-function: steps(6, end); } 68.556% { left: 254px; top: 428px; opacity: 1; animation-timing-function: steps(4, end); } 68.778% { left: 238px; top: 420px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 238px; top: 420px; opacity: 1; animation-timing-function: step-end; } 100% { left: 238px; top: 420px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-phone-desk { 0.000% { background-position-y: -52px; } 17.333% { background-position-y: 0px; } 17.556% { background-position-y: -26px; } 17.889% { background-position-y: -26px; } 18.278% { background-position-y: -26px; } 18.333% { background-position-y: -52px; } 21.667% { background-position-y: 0px; } 21.722% { background-position-y: 0px; } 22.111% { background-position-y: 0px; } 22.444% { background-position-y: -26px; } 22.667% { background-position-y: -52px; } 36.000% { background-position-y: 0px; } 36.222% { background-position-y: -26px; } 36.556% { background-position-y: -26px; } 38.556% { background-position-y: 0px; } 38.833% { background-position-y: -26px; } 38.944% { background-position-y: -52px; } 40.611% { background-position-y: 0px; } 40.722% { background-position-y: -26px; } 41.000% { background-position-y: 0px; } 41.778% { background-position-y: 0px; } 42.222% { background-position-y: -52px; } 44.222% { background-position-y: -26px; } 44.667% { background-position-y: 0px; } 46.278% { background-position-y: -26px; } 46.333% { background-position-y: -52px; } 61.333% { background-position-y: 0px; } 61.389% { background-position-y: -26px; } 63.778% { background-position-y: 0px; } 64.056% { background-position-y: -26px; } 64.167% { background-position-y: -52px; } 65.833% { background-position-y: 0px; } 65.944% { background-position-y: -26px; } 66.222% { background-position-y: 0px; } 68.222% { background-position-y: 0px; } 68.556% { background-position-y: -26px; } 68.778% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-test-station { left: 460px; top: 490px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-test-station, .hq-bld-suburban .hq-b-test-station { left: 460px; top: 490px; }
@keyframes hq-suburban-p-test-station { 0.000% { left: 460px; top: 490px; opacity: 1; animation-timing-function: step-end; } 37.332% { left: 460px; top: 490px; opacity: 1; animation-timing-function: step-end; } 37.333% { left: 460px; top: 484px; opacity: 1; animation-timing-function: steps(6, end); } 37.667% { left: 436px; top: 496px; opacity: 1; animation-timing-function: steps(83, end); } 42.278% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 42.556% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 42.667% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 44.332% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 44.333% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 44.444% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 44.722% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(19, end); } 45.778% { left: 180px; top: 496px; opacity: 1; animation-timing-function: steps(8, end); } 46.222% { left: 212px; top: 480px; opacity: 1; animation-timing-function: step-end; } 48.221% { left: 212px; top: 480px; opacity: 1; animation-timing-function: step-end; } 48.222% { left: 212px; top: 480px; opacity: 1; animation-timing-function: steps(8, end); } 48.667% { left: 180px; top: 496px; opacity: 1; animation-timing-function: steps(29, end); } 50.278% { left: 296px; top: 554px; opacity: 1; animation-timing-function: steps(1, end); } 50.333% { left: 292px; top: 556px; opacity: 1; animation-timing-function: step-end; } 61.332% { left: 292px; top: 556px; opacity: 1; animation-timing-function: step-end; } 61.333% { left: 292px; top: 556px; opacity: 1; animation-timing-function: steps(1, end); } 61.389% { left: 296px; top: 554px; opacity: 1; animation-timing-function: steps(48, end); } 64.056% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 64.333% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 64.444% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 66.110% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 66.111% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 66.222% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 66.500% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(83, end); } 71.111% { left: 436px; top: 496px; opacity: 1; animation-timing-function: steps(6, end); } 71.444% { left: 460px; top: 490px; opacity: 1; animation-timing-function: step-end; } 83.997% { left: 460px; top: 490px; opacity: 1; animation-timing-function: step-end; } 83.998% { left: 460px; top: 484px; opacity: 1; animation-timing-function: steps(6, end); } 84.331% { left: 436px; top: 496px; opacity: 1; animation-timing-function: steps(12, end); } 84.998% { left: 388px; top: 472px; opacity: 1; animation-timing-function: steps(1, end); } 85.053% { left: 392px; top: 470px; opacity: 1; animation-timing-function: step-end; } 89.052% { left: 392px; top: 470px; opacity: 1; animation-timing-function: step-end; } 89.053% { left: 392px; top: 470px; opacity: 1; animation-timing-function: steps(1, end); } 89.109% { left: 388px; top: 472px; opacity: 1; animation-timing-function: steps(12, end); } 89.776% { left: 436px; top: 496px; opacity: 1; animation-timing-function: steps(6, end); } 90.109% { left: 460px; top: 490px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 460px; top: 490px; opacity: 1; animation-timing-function: step-end; } 100% { left: 460px; top: 490px; opacity: 1; } }
@keyframes hq-suburban-q-test-station { 0.000% { left: 460px; top: 490px; animation-timing-function: step-end; } 37.332% { left: 460px; top: 490px; animation-timing-function: step-end; } 37.333% { left: 460px; top: 484px; animation-timing-function: steps(6, end); } 37.667% { left: 436px; top: 496px; animation-timing-function: steps(83, end); } 42.278% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 42.556% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 42.667% { left: 116px; top: 316px; animation-timing-function: step-end; } 44.332% { left: 116px; top: 316px; animation-timing-function: step-end; } 44.333% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 44.444% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 44.722% { left: 104px; top: 458px; animation-timing-function: steps(19, end); } 45.778% { left: 180px; top: 496px; animation-timing-function: steps(8, end); } 46.222% { left: 212px; top: 480px; animation-timing-function: step-end; } 48.221% { left: 212px; top: 480px; animation-timing-function: step-end; } 48.222% { left: 212px; top: 480px; animation-timing-function: steps(8, end); } 48.667% { left: 180px; top: 496px; animation-timing-function: steps(29, end); } 50.278% { left: 296px; top: 554px; animation-timing-function: steps(1, end); } 50.333% { left: 292px; top: 556px; animation-timing-function: step-end; } 61.332% { left: 292px; top: 556px; animation-timing-function: step-end; } 61.333% { left: 292px; top: 556px; animation-timing-function: steps(1, end); } 61.389% { left: 296px; top: 554px; animation-timing-function: steps(48, end); } 64.056% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 64.333% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 64.444% { left: 116px; top: 444px; animation-timing-function: step-end; } 66.110% { left: 116px; top: 444px; animation-timing-function: step-end; } 66.111% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 66.222% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 66.500% { left: 104px; top: 330px; animation-timing-function: steps(83, end); } 71.111% { left: 436px; top: 496px; animation-timing-function: steps(6, end); } 71.444% { left: 460px; top: 490px; animation-timing-function: step-end; } 83.997% { left: 460px; top: 490px; animation-timing-function: step-end; } 83.998% { left: 460px; top: 484px; animation-timing-function: steps(6, end); } 84.331% { left: 436px; top: 496px; animation-timing-function: steps(12, end); } 84.998% { left: 388px; top: 472px; animation-timing-function: steps(1, end); } 85.053% { left: 392px; top: 470px; animation-timing-function: step-end; } 89.052% { left: 392px; top: 470px; animation-timing-function: step-end; } 89.053% { left: 392px; top: 470px; animation-timing-function: steps(1, end); } 89.109% { left: 388px; top: 472px; animation-timing-function: steps(12, end); } 89.776% { left: 436px; top: 496px; animation-timing-function: steps(6, end); } 90.109% { left: 460px; top: 490px; animation-timing-function: step-end; } 99.999% { left: 460px; top: 490px; animation-timing-function: step-end; } 100% { left: 460px; top: 490px; } }
@keyframes hq-suburban-r-test-station { 0.000% { background-position-y: 0px; } 37.333% { background-position-y: -68px; } 37.667% { background-position-y: -136px; } 42.278% { background-position-y: -204px; } 42.556% { background-position-y: -136px; } 42.667% { background-position-y: -136px; } 44.333% { background-position-y: -272px; } 44.444% { background-position-y: -68px; } 44.722% { background-position-y: -272px; } 45.778% { background-position-y: -204px; } 46.222% { background-position-y: -340px; } 48.222% { background-position-y: -408px; } 48.667% { background-position-y: -476px; } 50.278% { background-position-y: -408px; } 50.333% { background-position-y: -544px; } 61.333% { background-position-y: -612px; } 61.389% { background-position-y: -680px; } 64.056% { background-position-y: -612px; } 64.333% { background-position-y: -680px; } 64.444% { background-position-y: -680px; } 66.111% { background-position-y: -476px; } 66.222% { background-position-y: -408px; } 66.500% { background-position-y: -476px; } 71.111% { background-position-y: -612px; } 71.444% { background-position-y: 0px; } 83.998% { background-position-y: -748px; } 84.331% { background-position-y: -816px; } 84.998% { background-position-y: -884px; } 85.053% { background-position-y: -952px; } 89.053% { background-position-y: -748px; } 89.109% { background-position-y: -1020px; } 89.776% { background-position-y: -884px; } 90.109% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-test-station { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-test-station 150.0s infinite, hq-suburban-r-test-station 150.0s step-end infinite; } .hq-bld-suburban .hq-t-test-station { animation: hq-suburban-q-test-station 150.0s infinite; } }
.hq-bld-suburban .hq-s-test-station:hover ~ .hq-t-test-station { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-s-test-station { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-test-station:focus-visible ~ .hq-s-test-station { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-pic { background-position-y: -1904px; }
@keyframes hq-suburban-cat-orange-p-test-station { 0.000% { left: 442px; top: 522px; opacity: 1; animation-timing-function: step-end; } 37.332% { left: 442px; top: 522px; opacity: 1; animation-timing-function: step-end; } 37.333% { left: 442px; top: 522px; opacity: 1; animation-timing-function: steps(6, end); } 37.667% { left: 418px; top: 534px; opacity: 1; animation-timing-function: steps(83, end); } 42.278% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 42.556% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 42.667% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 44.332% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 44.333% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 44.444% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 44.722% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(19, end); } 45.778% { left: 162px; top: 534px; opacity: 1; animation-timing-function: steps(8, end); } 46.222% { left: 194px; top: 518px; opacity: 1; animation-timing-function: step-end; } 48.221% { left: 194px; top: 518px; opacity: 1; animation-timing-function: step-end; } 48.222% { left: 194px; top: 518px; opacity: 1; animation-timing-function: steps(8, end); } 48.667% { left: 162px; top: 534px; opacity: 1; animation-timing-function: steps(29, end); } 50.278% { left: 278px; top: 592px; opacity: 1; animation-timing-function: steps(1, end); } 50.333% { left: 274px; top: 594px; opacity: 1; animation-timing-function: step-end; } 61.332% { left: 274px; top: 594px; opacity: 1; animation-timing-function: step-end; } 61.333% { left: 274px; top: 594px; opacity: 1; animation-timing-function: steps(1, end); } 61.389% { left: 278px; top: 592px; opacity: 1; animation-timing-function: steps(48, end); } 64.056% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 64.333% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 64.444% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 66.110% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 66.111% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 66.222% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 66.500% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(83, end); } 71.111% { left: 418px; top: 534px; opacity: 1; animation-timing-function: steps(6, end); } 71.444% { left: 442px; top: 522px; opacity: 1; animation-timing-function: step-end; } 83.997% { left: 442px; top: 522px; opacity: 1; animation-timing-function: step-end; } 83.998% { left: 442px; top: 522px; opacity: 1; animation-timing-function: steps(6, end); } 84.331% { left: 418px; top: 534px; opacity: 1; animation-timing-function: steps(12, end); } 84.998% { left: 370px; top: 510px; opacity: 1; animation-timing-function: steps(1, end); } 85.053% { left: 374px; top: 508px; opacity: 1; animation-timing-function: step-end; } 89.052% { left: 374px; top: 508px; opacity: 1; animation-timing-function: step-end; } 89.053% { left: 374px; top: 508px; opacity: 1; animation-timing-function: steps(1, end); } 89.109% { left: 370px; top: 510px; opacity: 1; animation-timing-function: steps(12, end); } 89.776% { left: 418px; top: 534px; opacity: 1; animation-timing-function: steps(6, end); } 90.109% { left: 442px; top: 522px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 442px; top: 522px; opacity: 1; animation-timing-function: step-end; } 100% { left: 442px; top: 522px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-test-station { 0.000% { background-position-y: -52px; } 37.333% { background-position-y: -26px; } 37.667% { background-position-y: -26px; } 42.278% { background-position-y: 0px; } 42.556% { background-position-y: -26px; } 42.667% { background-position-y: -52px; } 44.333% { background-position-y: 0px; } 44.444% { background-position-y: -26px; } 44.722% { background-position-y: 0px; } 45.778% { background-position-y: 0px; } 46.222% { background-position-y: -52px; } 48.222% { background-position-y: -26px; } 48.667% { background-position-y: 0px; } 50.278% { background-position-y: -26px; } 50.333% { background-position-y: -52px; } 61.333% { background-position-y: 0px; } 61.389% { background-position-y: -26px; } 64.056% { background-position-y: 0px; } 64.333% { background-position-y: -26px; } 64.444% { background-position-y: -52px; } 66.111% { background-position-y: 0px; } 66.222% { background-position-y: -26px; } 66.500% { background-position-y: 0px; } 71.111% { background-position-y: 0px; } 71.444% { background-position-y: -52px; } 83.998% { background-position-y: -26px; } 84.331% { background-position-y: -26px; } 84.998% { background-position-y: 0px; } 85.053% { background-position-y: -52px; } 89.053% { background-position-y: -26px; } 89.109% { background-position-y: 0px; } 89.776% { background-position-y: 0px; } 90.109% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-community-desk { left: 404px; top: 462px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-community-desk, .hq-bld-suburban .hq-b-community-desk { left: 404px; top: 462px; }
@keyframes hq-suburban-p-community-desk { 0.000% { left: 404px; top: 462px; opacity: 1; animation-timing-function: step-end; } 59.999% { left: 404px; top: 462px; opacity: 1; animation-timing-function: step-end; } 60.000% { left: 404px; top: 456px; opacity: 1; animation-timing-function: steps(4, end); } 60.222% { left: 420px; top: 464px; opacity: 1; animation-timing-function: steps(6, end); } 60.556% { left: 396px; top: 476px; opacity: 1; animation-timing-function: steps(73, end); } 64.611% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 64.889% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 65.000% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 66.666% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 66.667% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 66.778% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 67.056% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(8, end); } 67.500% { left: 136px; top: 474px; opacity: 1; animation-timing-function: steps(8, end); } 67.944% { left: 168px; top: 458px; opacity: 1; animation-timing-function: step-end; } 69.943% { left: 168px; top: 458px; opacity: 1; animation-timing-function: step-end; } 69.944% { left: 168px; top: 458px; opacity: 1; animation-timing-function: steps(8, end); } 70.389% { left: 136px; top: 474px; opacity: 1; animation-timing-function: steps(8, end); } 70.833% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 71.111% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 71.222% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 72.888% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 72.889% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 73.000% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 73.278% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(82, end); } 77.833% { left: 432px; top: 366px; opacity: 1; animation-timing-function: steps(2, end); } 77.944% { left: 440px; top: 362px; opacity: 1; animation-timing-function: step-end; } 85.330% { left: 440px; top: 362px; opacity: 1; animation-timing-function: step-end; } 85.331% { left: 440px; top: 362px; opacity: 1; animation-timing-function: steps(2, end); } 85.442% { left: 432px; top: 366px; opacity: 1; animation-timing-function: steps(82, end); } 89.998% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 90.276% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 90.387% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 92.052% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 92.053% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 92.164% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 92.442% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(73, end); } 96.498% { left: 396px; top: 476px; opacity: 1; animation-timing-function: steps(6, end); } 96.831% { left: 420px; top: 464px; opacity: 1; animation-timing-function: steps(4, end); } 97.053% { left: 404px; top: 462px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 404px; top: 462px; opacity: 1; animation-timing-function: step-end; } 100% { left: 404px; top: 462px; opacity: 1; } }
@keyframes hq-suburban-q-community-desk { 0.000% { left: 404px; top: 462px; animation-timing-function: step-end; } 59.999% { left: 404px; top: 462px; animation-timing-function: step-end; } 60.000% { left: 404px; top: 456px; animation-timing-function: steps(4, end); } 60.222% { left: 420px; top: 464px; animation-timing-function: steps(6, end); } 60.556% { left: 396px; top: 476px; animation-timing-function: steps(73, end); } 64.611% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 64.889% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 65.000% { left: 116px; top: 316px; animation-timing-function: step-end; } 66.666% { left: 116px; top: 316px; animation-timing-function: step-end; } 66.667% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 66.778% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 67.056% { left: 104px; top: 458px; animation-timing-function: steps(8, end); } 67.500% { left: 136px; top: 474px; animation-timing-function: steps(8, end); } 67.944% { left: 168px; top: 458px; animation-timing-function: step-end; } 69.943% { left: 168px; top: 458px; animation-timing-function: step-end; } 69.944% { left: 168px; top: 458px; animation-timing-function: steps(8, end); } 70.389% { left: 136px; top: 474px; animation-timing-function: steps(8, end); } 70.833% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 71.111% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 71.222% { left: 116px; top: 444px; animation-timing-function: step-end; } 72.888% { left: 116px; top: 444px; animation-timing-function: step-end; } 72.889% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 73.000% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 73.278% { left: 104px; top: 202px; animation-timing-function: steps(82, end); } 77.833% { left: 432px; top: 366px; animation-timing-function: steps(2, end); } 77.944% { left: 440px; top: 362px; animation-timing-function: step-end; } 85.330% { left: 440px; top: 362px; animation-timing-function: step-end; } 85.331% { left: 440px; top: 362px; animation-timing-function: steps(2, end); } 85.442% { left: 432px; top: 366px; animation-timing-function: steps(82, end); } 89.998% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 90.276% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 90.387% { left: 116px; top: 188px; animation-timing-function: step-end; } 92.052% { left: 116px; top: 188px; animation-timing-function: step-end; } 92.053% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 92.164% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 92.442% { left: 104px; top: 330px; animation-timing-function: steps(73, end); } 96.498% { left: 396px; top: 476px; animation-timing-function: steps(6, end); } 96.831% { left: 420px; top: 464px; animation-timing-function: steps(4, end); } 97.053% { left: 404px; top: 462px; animation-timing-function: step-end; } 99.999% { left: 404px; top: 462px; animation-timing-function: step-end; } 100% { left: 404px; top: 462px; } }
@keyframes hq-suburban-r-community-desk { 0.000% { background-position-y: 0px; } 60.000% { background-position-y: -68px; } 60.222% { background-position-y: -136px; } 60.556% { background-position-y: -204px; } 64.611% { background-position-y: -272px; } 64.889% { background-position-y: -204px; } 65.000% { background-position-y: -204px; } 66.667% { background-position-y: -68px; } 66.778% { background-position-y: -136px; } 67.056% { background-position-y: -68px; } 67.500% { background-position-y: -272px; } 67.944% { background-position-y: -340px; } 69.944% { background-position-y: -408px; } 70.389% { background-position-y: -476px; } 70.833% { background-position-y: -544px; } 71.111% { background-position-y: -476px; } 71.222% { background-position-y: -476px; } 72.889% { background-position-y: -612px; } 73.000% { background-position-y: -408px; } 73.278% { background-position-y: -612px; } 77.833% { background-position-y: -544px; } 77.944% { background-position-y: -680px; } 85.331% { background-position-y: -408px; } 85.442% { background-position-y: -476px; } 89.998% { background-position-y: -544px; } 90.276% { background-position-y: -476px; } 90.387% { background-position-y: -476px; } 92.053% { background-position-y: -612px; } 92.164% { background-position-y: -408px; } 92.442% { background-position-y: -612px; } 96.498% { background-position-y: -544px; } 96.831% { background-position-y: -476px; } 97.053% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-community-desk { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-community-desk 150.0s infinite, hq-suburban-r-community-desk 150.0s step-end infinite; } .hq-bld-suburban .hq-t-community-desk { animation: hq-suburban-q-community-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-community-desk:hover ~ .hq-t-community-desk { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-s-community-desk { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-community-desk:focus-visible ~ .hq-s-community-desk { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
@keyframes hq-suburban-cat-orange-p-community-desk { 0.000% { left: 386px; top: 494px; opacity: 1; animation-timing-function: step-end; } 59.999% { left: 386px; top: 494px; opacity: 1; animation-timing-function: step-end; } 60.000% { left: 386px; top: 494px; opacity: 1; animation-timing-function: steps(4, end); } 60.222% { left: 402px; top: 502px; opacity: 1; animation-timing-function: steps(6, end); } 60.556% { left: 378px; top: 514px; opacity: 1; animation-timing-function: steps(73, end); } 64.611% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 64.889% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 65.000% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 66.666% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 66.667% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 66.778% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 67.056% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(8, end); } 67.500% { left: 118px; top: 512px; opacity: 1; animation-timing-function: steps(8, end); } 67.944% { left: 150px; top: 496px; opacity: 1; animation-timing-function: step-end; } 69.943% { left: 150px; top: 496px; opacity: 1; animation-timing-function: step-end; } 69.944% { left: 150px; top: 496px; opacity: 1; animation-timing-function: steps(8, end); } 70.389% { left: 118px; top: 512px; opacity: 1; animation-timing-function: steps(8, end); } 70.833% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 71.111% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 71.222% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 72.888% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 72.889% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 73.000% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 73.278% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(82, end); } 77.833% { left: 414px; top: 404px; opacity: 1; animation-timing-function: steps(2, end); } 77.944% { left: 422px; top: 400px; opacity: 1; animation-timing-function: step-end; } 85.330% { left: 422px; top: 400px; opacity: 1; animation-timing-function: step-end; } 85.331% { left: 422px; top: 400px; opacity: 1; animation-timing-function: steps(2, end); } 85.442% { left: 414px; top: 404px; opacity: 1; animation-timing-function: steps(82, end); } 89.998% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 90.276% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 90.387% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 92.052% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 92.053% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 92.164% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 92.442% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(73, end); } 96.498% { left: 378px; top: 514px; opacity: 1; animation-timing-function: steps(6, end); } 96.831% { left: 402px; top: 502px; opacity: 1; animation-timing-function: steps(4, end); } 97.053% { left: 386px; top: 494px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 386px; top: 494px; opacity: 1; animation-timing-function: step-end; } 100% { left: 386px; top: 494px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-community-desk { 0.000% { background-position-y: -52px; } 60.000% { background-position-y: 0px; } 60.222% { background-position-y: -26px; } 60.556% { background-position-y: -26px; } 64.611% { background-position-y: 0px; } 64.889% { background-position-y: -26px; } 65.000% { background-position-y: -52px; } 66.667% { background-position-y: 0px; } 66.778% { background-position-y: -26px; } 67.056% { background-position-y: 0px; } 67.500% { background-position-y: 0px; } 67.944% { background-position-y: -52px; } 69.944% { background-position-y: -26px; } 70.389% { background-position-y: -26px; } 70.833% { background-position-y: 0px; } 71.111% { background-position-y: -26px; } 71.222% { background-position-y: -52px; } 72.889% { background-position-y: 0px; } 73.000% { background-position-y: -26px; } 73.278% { background-position-y: 0px; } 77.833% { background-position-y: 0px; } 77.944% { background-position-y: -52px; } 85.331% { background-position-y: -26px; } 85.442% { background-position-y: -26px; } 89.998% { background-position-y: 0px; } 90.276% { background-position-y: -26px; } 90.387% { background-position-y: -52px; } 92.053% { background-position-y: 0px; } 92.164% { background-position-y: -26px; } 92.442% { background-position-y: 0px; } 96.498% { background-position-y: 0px; } 96.831% { background-position-y: -26px; } 97.053% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-sofa-left { left: 368px; top: 548px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-sofa-left, .hq-bld-suburban .hq-b-sofa-left { left: 368px; top: 548px; }
@keyframes hq-suburban-p-sofa-left { 0.000% { left: 368px; top: 548px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 368px; top: 548px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 368px; top: 542px; opacity: 1; animation-timing-function: steps(4, end); } 40.222% { left: 384px; top: 550px; opacity: 1; animation-timing-function: steps(12, end); } 40.889% { left: 336px; top: 574px; opacity: 1; animation-timing-function: steps(16, end); } 41.778% { left: 272px; top: 542px; opacity: 1; animation-timing-function: steps(5, end); } 42.056% { left: 292px; top: 532px; opacity: 1; animation-timing-function: steps(4, end); } 42.278% { left: 276px; top: 530px; opacity: 1; animation-timing-function: step-end; } 61.330% { left: 276px; top: 530px; opacity: 1; animation-timing-function: step-end; } 61.331% { left: 276px; top: 524px; opacity: 1; animation-timing-function: steps(4, end); } 61.553% { left: 292px; top: 532px; opacity: 1; animation-timing-function: steps(5, end); } 61.831% { left: 272px; top: 542px; opacity: 1; animation-timing-function: steps(16, end); } 62.720% { left: 336px; top: 574px; opacity: 1; animation-timing-function: steps(12, end); } 63.387% { left: 384px; top: 550px; opacity: 1; animation-timing-function: steps(4, end); } 63.609% { left: 368px; top: 548px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 368px; top: 548px; opacity: 1; animation-timing-function: step-end; } 100% { left: 368px; top: 548px; opacity: 1; } }
@keyframes hq-suburban-q-sofa-left { 0.000% { left: 368px; top: 548px; animation-timing-function: step-end; } 39.999% { left: 368px; top: 548px; animation-timing-function: step-end; } 40.000% { left: 368px; top: 542px; animation-timing-function: steps(4, end); } 40.222% { left: 384px; top: 550px; animation-timing-function: steps(12, end); } 40.889% { left: 336px; top: 574px; animation-timing-function: steps(16, end); } 41.778% { left: 272px; top: 542px; animation-timing-function: steps(5, end); } 42.056% { left: 292px; top: 532px; animation-timing-function: steps(4, end); } 42.278% { left: 276px; top: 530px; animation-timing-function: step-end; } 61.330% { left: 276px; top: 530px; animation-timing-function: step-end; } 61.331% { left: 276px; top: 524px; animation-timing-function: steps(4, end); } 61.553% { left: 292px; top: 532px; animation-timing-function: steps(5, end); } 61.831% { left: 272px; top: 542px; animation-timing-function: steps(16, end); } 62.720% { left: 336px; top: 574px; animation-timing-function: steps(12, end); } 63.387% { left: 384px; top: 550px; animation-timing-function: steps(4, end); } 63.609% { left: 368px; top: 548px; animation-timing-function: step-end; } 99.999% { left: 368px; top: 548px; animation-timing-function: step-end; } 100% { left: 368px; top: 548px; } }
@keyframes hq-suburban-r-sofa-left { 0.000% { background-position-y: 0px; } 40.000% { background-position-y: -68px; } 40.222% { background-position-y: -136px; } 40.889% { background-position-y: -204px; } 41.778% { background-position-y: -272px; } 42.056% { background-position-y: -204px; } 42.278% { background-position-y: -340px; } 61.331% { background-position-y: -68px; } 61.553% { background-position-y: -136px; } 61.831% { background-position-y: -68px; } 62.720% { background-position-y: -272px; } 63.387% { background-position-y: -204px; } 63.609% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-sofa-left { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-sofa-left 150.0s infinite, hq-suburban-r-sofa-left 150.0s step-end infinite; } .hq-bld-suburban .hq-t-sofa-left { animation: hq-suburban-q-sofa-left 150.0s infinite; } }
.hq-bld-suburban .hq-s-sofa-left:hover ~ .hq-t-sofa-left { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-s-sofa-left { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-sofa-left:focus-visible ~ .hq-s-sofa-left { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
@keyframes hq-suburban-cat-orange-p-sofa-left { 0.000% { left: 350px; top: 580px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 350px; top: 580px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 350px; top: 580px; opacity: 1; animation-timing-function: steps(4, end); } 40.222% { left: 366px; top: 588px; opacity: 1; animation-timing-function: steps(12, end); } 40.889% { left: 318px; top: 612px; opacity: 1; animation-timing-function: steps(16, end); } 41.778% { left: 254px; top: 580px; opacity: 1; animation-timing-function: steps(5, end); } 42.056% { left: 274px; top: 570px; opacity: 1; animation-timing-function: steps(4, end); } 42.278% { left: 258px; top: 562px; opacity: 1; animation-timing-function: step-end; } 61.330% { left: 258px; top: 562px; opacity: 1; animation-timing-function: step-end; } 61.331% { left: 258px; top: 562px; opacity: 1; animation-timing-function: steps(4, end); } 61.553% { left: 274px; top: 570px; opacity: 1; animation-timing-function: steps(5, end); } 61.831% { left: 254px; top: 580px; opacity: 1; animation-timing-function: steps(16, end); } 62.720% { left: 318px; top: 612px; opacity: 1; animation-timing-function: steps(12, end); } 63.387% { left: 366px; top: 588px; opacity: 1; animation-timing-function: steps(4, end); } 63.609% { left: 350px; top: 580px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 350px; top: 580px; opacity: 1; animation-timing-function: step-end; } 100% { left: 350px; top: 580px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-sofa-left { 0.000% { background-position-y: -52px; } 40.000% { background-position-y: 0px; } 40.222% { background-position-y: -26px; } 40.889% { background-position-y: -26px; } 41.778% { background-position-y: 0px; } 42.056% { background-position-y: -26px; } 42.278% { background-position-y: -52px; } 61.331% { background-position-y: 0px; } 61.553% { background-position-y: -26px; } 61.831% { background-position-y: 0px; } 62.720% { background-position-y: 0px; } 63.387% { background-position-y: -26px; } 63.609% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-sofa-right { left: 404px; top: 566px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-sofa-right, .hq-bld-suburban .hq-b-sofa-right { left: 404px; top: 566px; }
@keyframes hq-suburban-p-sofa-right { 0.000% { left: 404px; top: 566px; opacity: 1; animation-timing-function: step-end; } 66.666% { left: 404px; top: 566px; opacity: 1; animation-timing-function: step-end; } 66.667% { left: 404px; top: 560px; opacity: 1; animation-timing-function: steps(5, end); } 66.944% { left: 384px; top: 550px; opacity: 1; animation-timing-function: steps(12, end); } 67.611% { left: 336px; top: 574px; opacity: 1; animation-timing-function: steps(45, end); } 70.111% { left: 156px; top: 484px; opacity: 1; animation-timing-function: steps(8, end); } 70.556% { left: 188px; top: 468px; opacity: 1; animation-timing-function: step-end; } 72.555% { left: 188px; top: 468px; opacity: 1; animation-timing-function: step-end; } 72.556% { left: 188px; top: 468px; opacity: 1; animation-timing-function: steps(8, end); } 73.000% { left: 156px; top: 484px; opacity: 1; animation-timing-function: steps(45, end); } 75.500% { left: 336px; top: 574px; opacity: 1; animation-timing-function: steps(12, end); } 76.167% { left: 384px; top: 550px; opacity: 1; animation-timing-function: steps(5, end); } 76.444% { left: 404px; top: 566px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 404px; top: 566px; opacity: 1; animation-timing-function: step-end; } 100% { left: 404px; top: 566px; opacity: 1; } }
@keyframes hq-suburban-q-sofa-right { 0.000% { left: 404px; top: 566px; animation-timing-function: step-end; } 66.666% { left: 404px; top: 566px; animation-timing-function: step-end; } 66.667% { left: 404px; top: 560px; animation-timing-function: steps(5, end); } 66.944% { left: 384px; top: 550px; animation-timing-function: steps(12, end); } 67.611% { left: 336px; top: 574px; animation-timing-function: steps(45, end); } 70.111% { left: 156px; top: 484px; animation-timing-function: steps(8, end); } 70.556% { left: 188px; top: 468px; animation-timing-function: step-end; } 72.555% { left: 188px; top: 468px; animation-timing-function: step-end; } 72.556% { left: 188px; top: 468px; animation-timing-function: steps(8, end); } 73.000% { left: 156px; top: 484px; animation-timing-function: steps(45, end); } 75.500% { left: 336px; top: 574px; animation-timing-function: steps(12, end); } 76.167% { left: 384px; top: 550px; animation-timing-function: steps(5, end); } 76.444% { left: 404px; top: 566px; animation-timing-function: step-end; } 99.999% { left: 404px; top: 566px; animation-timing-function: step-end; } 100% { left: 404px; top: 566px; } }
@keyframes hq-suburban-r-sofa-right { 0.000% { background-position-y: 0px; } 66.667% { background-position-y: -68px; } 66.944% { background-position-y: -136px; } 67.611% { background-position-y: -68px; } 70.111% { background-position-y: -204px; } 70.556% { background-position-y: -272px; } 72.556% { background-position-y: -340px; } 73.000% { background-position-y: -408px; } 75.500% { background-position-y: -476px; } 76.167% { background-position-y: -408px; } 76.444% { background-position-y: -544px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-sofa-right { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-sofa-right 150.0s infinite, hq-suburban-r-sofa-right 150.0s step-end infinite; } .hq-bld-suburban .hq-t-sofa-right { animation: hq-suburban-q-sofa-right 150.0s infinite; } }
.hq-bld-suburban .hq-s-sofa-right:hover ~ .hq-t-sofa-right { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-s-sofa-right { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-sofa-right:focus-visible ~ .hq-s-sofa-right { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-pic { background-position-y: -272px; }
@keyframes hq-suburban-cat-orange-p-sofa-right { 0.000% { left: 386px; top: 598px; opacity: 1; animation-timing-function: step-end; } 66.666% { left: 386px; top: 598px; opacity: 1; animation-timing-function: step-end; } 66.667% { left: 386px; top: 598px; opacity: 1; animation-timing-function: steps(5, end); } 66.944% { left: 366px; top: 588px; opacity: 1; animation-timing-function: steps(12, end); } 67.611% { left: 318px; top: 612px; opacity: 1; animation-timing-function: steps(45, end); } 70.111% { left: 138px; top: 522px; opacity: 1; animation-timing-function: steps(8, end); } 70.556% { left: 170px; top: 506px; opacity: 1; animation-timing-function: step-end; } 72.555% { left: 170px; top: 506px; opacity: 1; animation-timing-function: step-end; } 72.556% { left: 170px; top: 506px; opacity: 1; animation-timing-function: steps(8, end); } 73.000% { left: 138px; top: 522px; opacity: 1; animation-timing-function: steps(45, end); } 75.500% { left: 318px; top: 612px; opacity: 1; animation-timing-function: steps(12, end); } 76.167% { left: 366px; top: 588px; opacity: 1; animation-timing-function: steps(5, end); } 76.444% { left: 386px; top: 598px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 386px; top: 598px; opacity: 1; animation-timing-function: step-end; } 100% { left: 386px; top: 598px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-sofa-right { 0.000% { background-position-y: -52px; } 66.667% { background-position-y: -26px; } 66.944% { background-position-y: -26px; } 67.611% { background-position-y: -26px; } 70.111% { background-position-y: 0px; } 70.556% { background-position-y: -52px; } 72.556% { background-position-y: -26px; } 73.000% { background-position-y: 0px; } 75.500% { background-position-y: 0px; } 76.167% { background-position-y: 0px; } 76.444% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-wanderer { left: 148px; top: 348px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-wanderer, .hq-bld-suburban .hq-b-wanderer { left: 148px; top: 348px; }
@keyframes hq-suburban-p-wanderer { 0.000% { left: 148px; top: 348px; opacity: 1; animation-timing-function: step-end; } 13.332% { left: 148px; top: 348px; opacity: 1; animation-timing-function: step-end; } 13.333% { left: 148px; top: 348px; opacity: 1; animation-timing-function: steps(1, end); } 13.389% { left: 144px; top: 350px; opacity: 1; animation-timing-function: steps(13, end); } 14.111% { left: 196px; top: 376px; opacity: 1; animation-timing-function: steps(1, end); } 14.167% { left: 200px; top: 374px; opacity: 1; animation-timing-function: step-end; } 18.166% { left: 200px; top: 374px; opacity: 1; animation-timing-function: step-end; } 18.167% { left: 200px; top: 374px; opacity: 1; animation-timing-function: steps(1, end); } 18.222% { left: 196px; top: 376px; opacity: 1; animation-timing-function: steps(23, end); } 19.500% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 19.778% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 19.889% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 21.555% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 21.556% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 21.667% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 21.944% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(54, end); } 24.944% { left: 320px; top: 566px; opacity: 1; animation-timing-function: step-end; } 30.277% { left: 320px; top: 566px; opacity: 1; animation-timing-function: step-end; } 30.278% { left: 320px; top: 566px; opacity: 1; animation-timing-function: steps(26, end); } 31.722% { left: 216px; top: 514px; opacity: 1; animation-timing-function: steps(5, end); } 32.000% { left: 236px; top: 504px; opacity: 1; animation-timing-function: steps(4, end); } 32.222% { left: 220px; top: 502px; opacity: 1; animation-timing-function: step-end; } 61.335% { left: 220px; top: 502px; opacity: 1; animation-timing-function: step-end; } 61.336% { left: 220px; top: 496px; opacity: 1; animation-timing-function: steps(4, end); } 61.558% { left: 236px; top: 504px; opacity: 1; animation-timing-function: steps(5, end); } 61.836% { left: 216px; top: 514px; opacity: 1; animation-timing-function: steps(11, end); } 62.447% { left: 172px; top: 492px; opacity: 1; animation-timing-function: steps(8, end); } 62.891% { left: 204px; top: 476px; opacity: 1; animation-timing-function: step-end; } 64.890% { left: 204px; top: 476px; opacity: 1; animation-timing-function: step-end; } 64.891% { left: 204px; top: 476px; opacity: 1; animation-timing-function: steps(8, end); } 65.336% { left: 172px; top: 492px; opacity: 1; animation-timing-function: steps(17, end); } 66.280% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 66.558% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 66.669% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 68.335% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 68.336% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 68.447% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 68.724% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(74, end); } 72.836% { left: 400px; top: 350px; opacity: 1; animation-timing-function: steps(2, end); } 72.947% { left: 408px; top: 346px; opacity: 1; animation-timing-function: step-end; } 85.332% { left: 408px; top: 346px; opacity: 1; animation-timing-function: step-end; } 85.333% { left: 408px; top: 346px; opacity: 1; animation-timing-function: steps(2, end); } 85.444% { left: 400px; top: 350px; opacity: 1; animation-timing-function: steps(74, end); } 89.556% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 89.833% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 89.944% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 91.610% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 91.611% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 91.722% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 92.000% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(10, end); } 92.556% { left: 144px; top: 350px; opacity: 1; animation-timing-function: steps(1, end); } 92.611% { left: 148px; top: 348px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 148px; top: 348px; opacity: 1; animation-timing-function: step-end; } 100% { left: 148px; top: 348px; opacity: 1; } }
@keyframes hq-suburban-q-wanderer { 0.000% { left: 148px; top: 348px; animation-timing-function: step-end; } 13.332% { left: 148px; top: 348px; animation-timing-function: step-end; } 13.333% { left: 148px; top: 348px; animation-timing-function: steps(1, end); } 13.389% { left: 144px; top: 350px; animation-timing-function: steps(13, end); } 14.111% { left: 196px; top: 376px; animation-timing-function: steps(1, end); } 14.167% { left: 200px; top: 374px; animation-timing-function: step-end; } 18.166% { left: 200px; top: 374px; animation-timing-function: step-end; } 18.167% { left: 200px; top: 374px; animation-timing-function: steps(1, end); } 18.222% { left: 196px; top: 376px; animation-timing-function: steps(23, end); } 19.500% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 19.778% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 19.889% { left: 116px; top: 316px; animation-timing-function: step-end; } 21.555% { left: 116px; top: 316px; animation-timing-function: step-end; } 21.556% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 21.667% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 21.944% { left: 104px; top: 458px; animation-timing-function: steps(54, end); } 24.944% { left: 320px; top: 566px; animation-timing-function: step-end; } 30.277% { left: 320px; top: 566px; animation-timing-function: step-end; } 30.278% { left: 320px; top: 566px; animation-timing-function: steps(26, end); } 31.722% { left: 216px; top: 514px; animation-timing-function: steps(5, end); } 32.000% { left: 236px; top: 504px; animation-timing-function: steps(4, end); } 32.222% { left: 220px; top: 502px; animation-timing-function: step-end; } 61.335% { left: 220px; top: 502px; animation-timing-function: step-end; } 61.336% { left: 220px; top: 496px; animation-timing-function: steps(4, end); } 61.558% { left: 236px; top: 504px; animation-timing-function: steps(5, end); } 61.836% { left: 216px; top: 514px; animation-timing-function: steps(11, end); } 62.447% { left: 172px; top: 492px; animation-timing-function: steps(8, end); } 62.891% { left: 204px; top: 476px; animation-timing-function: step-end; } 64.890% { left: 204px; top: 476px; animation-timing-function: step-end; } 64.891% { left: 204px; top: 476px; animation-timing-function: steps(8, end); } 65.336% { left: 172px; top: 492px; animation-timing-function: steps(17, end); } 66.280% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 66.558% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 66.669% { left: 116px; top: 444px; animation-timing-function: step-end; } 68.335% { left: 116px; top: 444px; animation-timing-function: step-end; } 68.336% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 68.447% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 68.724% { left: 104px; top: 202px; animation-timing-function: steps(74, end); } 72.836% { left: 400px; top: 350px; animation-timing-function: steps(2, end); } 72.947% { left: 408px; top: 346px; animation-timing-function: step-end; } 85.332% { left: 408px; top: 346px; animation-timing-function: step-end; } 85.333% { left: 408px; top: 346px; animation-timing-function: steps(2, end); } 85.444% { left: 400px; top: 350px; animation-timing-function: steps(74, end); } 89.556% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 89.833% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 89.944% { left: 116px; top: 188px; animation-timing-function: step-end; } 91.610% { left: 116px; top: 188px; animation-timing-function: step-end; } 91.611% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 91.722% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 92.000% { left: 104px; top: 330px; animation-timing-function: steps(10, end); } 92.556% { left: 144px; top: 350px; animation-timing-function: steps(1, end); } 92.611% { left: 148px; top: 348px; animation-timing-function: step-end; } 99.999% { left: 148px; top: 348px; animation-timing-function: step-end; } 100% { left: 148px; top: 348px; } }
@keyframes hq-suburban-r-wanderer { 0.000% { background-position-y: 0px; } 13.333% { background-position-y: -68px; } 13.389% { background-position-y: -136px; } 14.111% { background-position-y: -204px; } 14.167% { background-position-y: -272px; } 18.167% { background-position-y: -68px; } 18.222% { background-position-y: -340px; } 19.500% { background-position-y: -204px; } 19.778% { background-position-y: -340px; } 19.889% { background-position-y: -340px; } 21.556% { background-position-y: -136px; } 21.667% { background-position-y: -68px; } 21.944% { background-position-y: -136px; } 24.944% { background-position-y: -408px; } 30.278% { background-position-y: -340px; } 31.722% { background-position-y: -204px; } 32.000% { background-position-y: -340px; } 32.222% { background-position-y: -476px; } 61.336% { background-position-y: -136px; } 61.558% { background-position-y: -68px; } 61.836% { background-position-y: -340px; } 62.447% { background-position-y: -204px; } 62.891% { background-position-y: -272px; } 64.891% { background-position-y: -544px; } 65.336% { background-position-y: -612px; } 66.280% { background-position-y: -680px; } 66.558% { background-position-y: -612px; } 66.669% { background-position-y: -612px; } 68.336% { background-position-y: -748px; } 68.447% { background-position-y: -544px; } 68.724% { background-position-y: -748px; } 72.836% { background-position-y: -680px; } 72.947% { background-position-y: -816px; } 85.333% { background-position-y: -544px; } 85.444% { background-position-y: -612px; } 89.556% { background-position-y: -680px; } 89.833% { background-position-y: -612px; } 89.944% { background-position-y: -612px; } 91.611% { background-position-y: -748px; } 91.722% { background-position-y: -544px; } 92.000% { background-position-y: -748px; } 92.556% { background-position-y: -680px; } 92.611% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-wanderer { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-wanderer 150.0s infinite, hq-suburban-r-wanderer 150.0s step-end infinite; } .hq-bld-suburban .hq-t-wanderer { animation: hq-suburban-q-wanderer 150.0s infinite; } }
.hq-bld-suburban .hq-s-wanderer:hover ~ .hq-t-wanderer { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-s-wanderer { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-wanderer:focus-visible ~ .hq-s-wanderer { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card .hq-card-pic { background-position-y: -816px; }
@keyframes hq-suburban-cat-orange-p-wanderer { 0.000% { left: 130px; top: 386px; opacity: 1; animation-timing-function: step-end; } 13.332% { left: 130px; top: 386px; opacity: 1; animation-timing-function: step-end; } 13.333% { left: 130px; top: 386px; opacity: 1; animation-timing-function: steps(1, end); } 13.389% { left: 126px; top: 388px; opacity: 1; animation-timing-function: steps(13, end); } 14.111% { left: 178px; top: 414px; opacity: 1; animation-timing-function: steps(1, end); } 14.167% { left: 182px; top: 412px; opacity: 1; animation-timing-function: step-end; } 18.166% { left: 182px; top: 412px; opacity: 1; animation-timing-function: step-end; } 18.167% { left: 182px; top: 412px; opacity: 1; animation-timing-function: steps(1, end); } 18.222% { left: 178px; top: 414px; opacity: 1; animation-timing-function: steps(23, end); } 19.500% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 19.778% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 19.889% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 21.555% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 21.556% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 21.667% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 21.944% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(54, end); } 24.944% { left: 302px; top: 604px; opacity: 1; animation-timing-function: step-end; } 30.277% { left: 302px; top: 604px; opacity: 1; animation-timing-function: step-end; } 30.278% { left: 302px; top: 604px; opacity: 1; animation-timing-function: steps(26, end); } 31.722% { left: 198px; top: 552px; opacity: 1; animation-timing-function: steps(5, end); } 32.000% { left: 218px; top: 542px; opacity: 1; animation-timing-function: steps(4, end); } 32.222% { left: 202px; top: 534px; opacity: 1; animation-timing-function: step-end; } 61.335% { left: 202px; top: 534px; opacity: 1; animation-timing-function: step-end; } 61.336% { left: 202px; top: 534px; opacity: 1; animation-timing-function: steps(4, end); } 61.558% { left: 218px; top: 542px; opacity: 1; animation-timing-function: steps(5, end); } 61.836% { left: 198px; top: 552px; opacity: 1; animation-timing-function: steps(11, end); } 62.447% { left: 154px; top: 530px; opacity: 1; animation-timing-function: steps(8, end); } 62.891% { left: 186px; top: 514px; opacity: 1; animation-timing-function: step-end; } 64.890% { left: 186px; top: 514px; opacity: 1; animation-timing-function: step-end; } 64.891% { left: 186px; top: 514px; opacity: 1; animation-timing-function: steps(8, end); } 65.336% { left: 154px; top: 530px; opacity: 1; animation-timing-function: steps(17, end); } 66.280% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 66.558% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 66.669% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 68.335% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 68.336% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 68.447% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 68.724% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(74, end); } 72.836% { left: 382px; top: 388px; opacity: 1; animation-timing-function: steps(2, end); } 72.947% { left: 390px; top: 384px; opacity: 1; animation-timing-function: step-end; } 85.332% { left: 390px; top: 384px; opacity: 1; animation-timing-function: step-end; } 85.333% { left: 390px; top: 384px; opacity: 1; animation-timing-function: steps(2, end); } 85.444% { left: 382px; top: 388px; opacity: 1; animation-timing-function: steps(74, end); } 89.556% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 89.833% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 89.944% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 91.610% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 91.611% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 91.722% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 92.000% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(10, end); } 92.556% { left: 126px; top: 388px; opacity: 1; animation-timing-function: steps(1, end); } 92.611% { left: 130px; top: 386px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 130px; top: 386px; opacity: 1; animation-timing-function: step-end; } 100% { left: 130px; top: 386px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-wanderer { 0.000% { background-position-y: -52px; } 13.333% { background-position-y: -26px; } 13.389% { background-position-y: 0px; } 14.111% { background-position-y: 0px; } 14.167% { background-position-y: -52px; } 18.167% { background-position-y: -26px; } 18.222% { background-position-y: -26px; } 19.500% { background-position-y: 0px; } 19.778% { background-position-y: -26px; } 19.889% { background-position-y: -52px; } 21.556% { background-position-y: 0px; } 21.667% { background-position-y: -26px; } 21.944% { background-position-y: 0px; } 24.944% { background-position-y: -52px; } 30.278% { background-position-y: -26px; } 31.722% { background-position-y: 0px; } 32.000% { background-position-y: -26px; } 32.222% { background-position-y: -52px; } 61.336% { background-position-y: 0px; } 61.558% { background-position-y: -26px; } 61.836% { background-position-y: -26px; } 62.447% { background-position-y: 0px; } 62.891% { background-position-y: -52px; } 64.891% { background-position-y: -26px; } 65.336% { background-position-y: -26px; } 66.280% { background-position-y: 0px; } 66.558% { background-position-y: -26px; } 66.669% { background-position-y: -52px; } 68.336% { background-position-y: 0px; } 68.447% { background-position-y: -26px; } 68.724% { background-position-y: 0px; } 72.836% { background-position-y: 0px; } 72.947% { background-position-y: -52px; } 85.333% { background-position-y: -26px; } 85.444% { background-position-y: -26px; } 89.556% { background-position-y: 0px; } 89.833% { background-position-y: -26px; } 89.944% { background-position-y: -52px; } 91.611% { background-position-y: 0px; } 91.722% { background-position-y: -26px; } 92.000% { background-position-y: 0px; } 92.556% { background-position-y: 0px; } 92.611% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-doodle-wall { left: 444px; top: 592px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-doodle-wall, .hq-bld-suburban .hq-b-doodle-wall { left: 444px; top: 592px; }
@keyframes hq-suburban-p-doodle-wall { 0.000% { left: 444px; top: 592px; opacity: 1; animation-timing-function: step-end; } 42.666% { left: 444px; top: 592px; opacity: 1; animation-timing-function: step-end; } 42.667% { left: 444px; top: 592px; opacity: 1; animation-timing-function: steps(9, end); } 43.167% { left: 408px; top: 610px; opacity: 1; animation-timing-function: steps(27, end); } 44.667% { left: 300px; top: 556px; opacity: 1; animation-timing-function: steps(5, end); } 44.944% { left: 320px; top: 546px; opacity: 1; animation-timing-function: steps(4, end); } 45.167% { left: 304px; top: 544px; opacity: 1; animation-timing-function: step-end; } 61.332% { left: 304px; top: 544px; opacity: 1; animation-timing-function: step-end; } 61.333% { left: 304px; top: 538px; opacity: 1; animation-timing-function: steps(4, end); } 61.556% { left: 320px; top: 546px; opacity: 1; animation-timing-function: steps(5, end); } 61.833% { left: 300px; top: 556px; opacity: 1; animation-timing-function: steps(27, end); } 63.333% { left: 408px; top: 610px; opacity: 1; animation-timing-function: steps(9, end); } 63.833% { left: 444px; top: 592px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 444px; top: 592px; opacity: 1; animation-timing-function: step-end; } 100% { left: 444px; top: 592px; opacity: 1; } }
@keyframes hq-suburban-q-doodle-wall { 0.000% { left: 444px; top: 592px; animation-timing-function: step-end; } 42.666% { left: 444px; top: 592px; animation-timing-function: step-end; } 42.667% { left: 444px; top: 592px; animation-timing-function: steps(9, end); } 43.167% { left: 408px; top: 610px; animation-timing-function: steps(27, end); } 44.667% { left: 300px; top: 556px; animation-timing-function: steps(5, end); } 44.944% { left: 320px; top: 546px; animation-timing-function: steps(4, end); } 45.167% { left: 304px; top: 544px; animation-timing-function: step-end; } 61.332% { left: 304px; top: 544px; animation-timing-function: step-end; } 61.333% { left: 304px; top: 538px; animation-timing-function: steps(4, end); } 61.556% { left: 320px; top: 546px; animation-timing-function: steps(5, end); } 61.833% { left: 300px; top: 556px; animation-timing-function: steps(27, end); } 63.333% { left: 408px; top: 610px; animation-timing-function: steps(9, end); } 63.833% { left: 444px; top: 592px; animation-timing-function: step-end; } 99.999% { left: 444px; top: 592px; animation-timing-function: step-end; } 100% { left: 444px; top: 592px; } }
@keyframes hq-suburban-r-doodle-wall { 0.000% { background-position-y: 0px; } 42.667% { background-position-y: -68px; } 43.167% { background-position-y: -136px; } 44.667% { background-position-y: -204px; } 44.944% { background-position-y: -136px; } 45.167% { background-position-y: -272px; } 61.333% { background-position-y: -340px; } 61.556% { background-position-y: -68px; } 61.833% { background-position-y: -340px; } 63.333% { background-position-y: -204px; } 63.833% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-doodle-wall { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-doodle-wall 150.0s infinite, hq-suburban-r-doodle-wall 150.0s step-end infinite; } .hq-bld-suburban .hq-t-doodle-wall { animation: hq-suburban-q-doodle-wall 150.0s infinite; } }
.hq-bld-suburban .hq-s-doodle-wall:hover ~ .hq-t-doodle-wall { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-s-doodle-wall { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:focus-visible ~ .hq-s-doodle-wall { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-pic { background-position-y: -136px; }
@keyframes hq-suburban-cat-orange-p-doodle-wall { 0.000% { left: 426px; top: 630px; opacity: 1; animation-timing-function: step-end; } 42.666% { left: 426px; top: 630px; opacity: 1; animation-timing-function: step-end; } 42.667% { left: 426px; top: 630px; opacity: 1; animation-timing-function: steps(9, end); } 43.167% { left: 390px; top: 648px; opacity: 1; animation-timing-function: steps(27, end); } 44.667% { left: 282px; top: 594px; opacity: 1; animation-timing-function: steps(5, end); } 44.944% { left: 302px; top: 584px; opacity: 1; animation-timing-function: steps(4, end); } 45.167% { left: 286px; top: 576px; opacity: 1; animation-timing-function: step-end; } 61.332% { left: 286px; top: 576px; opacity: 1; animation-timing-function: step-end; } 61.333% { left: 286px; top: 576px; opacity: 1; animation-timing-function: steps(4, end); } 61.556% { left: 302px; top: 584px; opacity: 1; animation-timing-function: steps(5, end); } 61.833% { left: 282px; top: 594px; opacity: 1; animation-timing-function: steps(27, end); } 63.333% { left: 390px; top: 648px; opacity: 1; animation-timing-function: steps(9, end); } 63.833% { left: 426px; top: 630px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 426px; top: 630px; opacity: 1; animation-timing-function: step-end; } 100% { left: 426px; top: 630px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-doodle-wall { 0.000% { background-position-y: -52px; } 42.667% { background-position-y: -26px; } 43.167% { background-position-y: -26px; } 44.667% { background-position-y: 0px; } 44.944% { background-position-y: -26px; } 45.167% { background-position-y: -52px; } 61.333% { background-position-y: 0px; } 61.556% { background-position-y: -26px; } 61.833% { background-position-y: 0px; } 63.333% { background-position-y: 0px; } 63.833% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-free-1 { left: 436px; top: 500px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-free-1, .hq-bld-suburban .hq-b-free-1 { left: 436px; top: 500px; }
@keyframes hq-suburban-p-free-1 { 0.000% { left: 436px; top: 500px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 436px; top: 500px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 436px; top: 500px; opacity: 1; animation-timing-function: steps(1, end); } 40.056% { left: 440px; top: 498px; opacity: 1; animation-timing-function: steps(33, end); } 41.889% { left: 308px; top: 432px; opacity: 1; animation-timing-function: step-end; } 60.001% { left: 308px; top: 432px; opacity: 1; animation-timing-function: step-end; } 60.002% { left: 308px; top: 432px; opacity: 1; animation-timing-function: steps(33, end); } 61.836% { left: 440px; top: 498px; opacity: 1; animation-timing-function: steps(1, end); } 61.891% { left: 436px; top: 500px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 436px; top: 500px; opacity: 1; animation-timing-function: step-end; } 100% { left: 436px; top: 500px; opacity: 1; } }
@keyframes hq-suburban-q-free-1 { 0.000% { left: 436px; top: 500px; animation-timing-function: step-end; } 39.999% { left: 436px; top: 500px; animation-timing-function: step-end; } 40.000% { left: 436px; top: 500px; animation-timing-function: steps(1, end); } 40.056% { left: 440px; top: 498px; animation-timing-function: steps(33, end); } 41.889% { left: 308px; top: 432px; animation-timing-function: step-end; } 60.001% { left: 308px; top: 432px; animation-timing-function: step-end; } 60.002% { left: 308px; top: 432px; animation-timing-function: steps(33, end); } 61.836% { left: 440px; top: 498px; animation-timing-function: steps(1, end); } 61.891% { left: 436px; top: 500px; animation-timing-function: step-end; } 99.999% { left: 436px; top: 500px; animation-timing-function: step-end; } 100% { left: 436px; top: 500px; } }
@keyframes hq-suburban-r-free-1 { 0.000% { background-position-y: 0px; } 40.000% { background-position-y: -68px; } 40.056% { background-position-y: -136px; } 41.889% { background-position-y: -204px; } 60.002% { background-position-y: -272px; } 61.836% { background-position-y: -340px; } 61.891% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-free-1 { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-free-1 150.0s infinite, hq-suburban-r-free-1 150.0s step-end infinite; } .hq-bld-suburban .hq-t-free-1 { animation: hq-suburban-q-free-1 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-1:hover ~ .hq-t-free-1 { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-free-1:checked ~ .hq-s-free-1 { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-free-1:focus-visible ~ .hq-s-free-1 { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-free-1:checked ~ .hq-card .hq-card-pic { background-position-y: 0px; }
@keyframes hq-suburban-cat-orange-p-free-1 { 0.000% { left: 418px; top: 538px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 418px; top: 538px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 418px; top: 538px; opacity: 1; animation-timing-function: steps(1, end); } 40.056% { left: 422px; top: 536px; opacity: 1; animation-timing-function: steps(33, end); } 41.889% { left: 290px; top: 470px; opacity: 1; animation-timing-function: step-end; } 60.001% { left: 290px; top: 470px; opacity: 1; animation-timing-function: step-end; } 60.002% { left: 290px; top: 470px; opacity: 1; animation-timing-function: steps(33, end); } 61.836% { left: 422px; top: 536px; opacity: 1; animation-timing-function: steps(1, end); } 61.891% { left: 418px; top: 538px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 418px; top: 538px; opacity: 1; animation-timing-function: step-end; } 100% { left: 418px; top: 538px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-free-1 { 0.000% { background-position-y: -52px; } 40.000% { background-position-y: 0px; } 40.056% { background-position-y: -26px; } 41.889% { background-position-y: -52px; } 60.002% { background-position-y: 0px; } 61.836% { background-position-y: -26px; } 61.891% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-free-2 { left: 168px; top: 362px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-free-2, .hq-bld-suburban .hq-b-free-2 { left: 168px; top: 362px; }
@keyframes hq-suburban-p-free-2 { 0.000% { left: 168px; top: 362px; opacity: 1; animation-timing-function: step-end; } 53.332% { left: 168px; top: 362px; opacity: 1; animation-timing-function: step-end; } 53.333% { left: 168px; top: 362px; opacity: 1; animation-timing-function: steps(16, end); } 54.222% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 54.500% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 54.611% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 56.277% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 56.278% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 56.389% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 56.667% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(41, end); } 58.944% { left: 268px; top: 284px; opacity: 1; animation-timing-function: steps(1, end); } 59.000% { left: 264px; top: 286px; opacity: 1; animation-timing-function: step-end; } 73.332% { left: 264px; top: 286px; opacity: 1; animation-timing-function: step-end; } 73.333% { left: 264px; top: 286px; opacity: 1; animation-timing-function: steps(1, end); } 73.389% { left: 268px; top: 284px; opacity: 1; animation-timing-function: steps(41, end); } 75.667% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 75.944% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 76.056% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 77.721% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 77.722% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 77.833% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 78.111% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(16, end); } 79.000% { left: 168px; top: 362px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 168px; top: 362px; opacity: 1; animation-timing-function: step-end; } 100% { left: 168px; top: 362px; opacity: 1; } }
@keyframes hq-suburban-q-free-2 { 0.000% { left: 168px; top: 362px; animation-timing-function: step-end; } 53.332% { left: 168px; top: 362px; animation-timing-function: step-end; } 53.333% { left: 168px; top: 362px; animation-timing-function: steps(16, end); } 54.222% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 54.500% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 54.611% { left: 116px; top: 316px; animation-timing-function: step-end; } 56.277% { left: 116px; top: 316px; animation-timing-function: step-end; } 56.278% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 56.389% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 56.667% { left: 104px; top: 202px; animation-timing-function: steps(41, end); } 58.944% { left: 268px; top: 284px; animation-timing-function: steps(1, end); } 59.000% { left: 264px; top: 286px; animation-timing-function: step-end; } 73.332% { left: 264px; top: 286px; animation-timing-function: step-end; } 73.333% { left: 264px; top: 286px; animation-timing-function: steps(1, end); } 73.389% { left: 268px; top: 284px; animation-timing-function: steps(41, end); } 75.667% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 75.944% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 76.056% { left: 116px; top: 188px; animation-timing-function: step-end; } 77.721% { left: 116px; top: 188px; animation-timing-function: step-end; } 77.722% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 77.833% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 78.111% { left: 104px; top: 330px; animation-timing-function: steps(16, end); } 79.000% { left: 168px; top: 362px; animation-timing-function: step-end; } 99.999% { left: 168px; top: 362px; animation-timing-function: step-end; } 100% { left: 168px; top: 362px; } }
@keyframes hq-suburban-r-free-2 { 0.000% { background-position-y: 0px; } 53.333% { background-position-y: -68px; } 54.222% { background-position-y: -136px; } 54.500% { background-position-y: -68px; } 54.611% { background-position-y: -68px; } 56.278% { background-position-y: -204px; } 56.389% { background-position-y: -272px; } 56.667% { background-position-y: -204px; } 58.944% { background-position-y: -272px; } 59.000% { background-position-y: -340px; } 73.333% { background-position-y: -136px; } 73.389% { background-position-y: -68px; } 75.667% { background-position-y: -136px; } 75.944% { background-position-y: -68px; } 76.056% { background-position-y: -68px; } 77.722% { background-position-y: -204px; } 77.833% { background-position-y: -272px; } 78.111% { background-position-y: -204px; } 79.000% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-free-2 { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-free-2 150.0s infinite, hq-suburban-r-free-2 150.0s step-end infinite; } .hq-bld-suburban .hq-t-free-2 { animation: hq-suburban-q-free-2 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-2:hover ~ .hq-t-free-2 { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-free-2:checked ~ .hq-s-free-2 { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-free-2:focus-visible ~ .hq-s-free-2 { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-free-2:checked ~ .hq-card .hq-card-pic { background-position-y: -408px; }
@keyframes hq-suburban-cat-orange-p-free-2 { 0.000% { left: 150px; top: 400px; opacity: 1; animation-timing-function: step-end; } 53.332% { left: 150px; top: 400px; opacity: 1; animation-timing-function: step-end; } 53.333% { left: 150px; top: 400px; opacity: 1; animation-timing-function: steps(16, end); } 54.222% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 54.500% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 54.611% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 56.277% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 56.278% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 56.389% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 56.667% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(41, end); } 58.944% { left: 250px; top: 322px; opacity: 1; animation-timing-function: steps(1, end); } 59.000% { left: 246px; top: 324px; opacity: 1; animation-timing-function: step-end; } 73.332% { left: 246px; top: 324px; opacity: 1; animation-timing-function: step-end; } 73.333% { left: 246px; top: 324px; opacity: 1; animation-timing-function: steps(1, end); } 73.389% { left: 250px; top: 322px; opacity: 1; animation-timing-function: steps(41, end); } 75.667% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 75.944% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 76.056% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 77.721% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 77.722% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 77.833% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 78.111% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(16, end); } 79.000% { left: 150px; top: 400px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 150px; top: 400px; opacity: 1; animation-timing-function: step-end; } 100% { left: 150px; top: 400px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-free-2 { 0.000% { background-position-y: -52px; } 53.333% { background-position-y: -26px; } 54.222% { background-position-y: 0px; } 54.500% { background-position-y: -26px; } 54.611% { background-position-y: -52px; } 56.278% { background-position-y: 0px; } 56.389% { background-position-y: -26px; } 56.667% { background-position-y: 0px; } 58.944% { background-position-y: -26px; } 59.000% { background-position-y: -52px; } 73.333% { background-position-y: 0px; } 73.389% { background-position-y: -26px; } 75.667% { background-position-y: 0px; } 75.944% { background-position-y: -26px; } 76.056% { background-position-y: -52px; } 77.722% { background-position-y: 0px; } 77.833% { background-position-y: -26px; } 78.111% { background-position-y: 0px; } 79.000% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-free-3 { left: 432px; top: 618px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-free-3, .hq-bld-suburban .hq-b-free-3 { left: 432px; top: 618px; }
@keyframes hq-suburban-p-free-3 { 0.000% { left: 432px; top: 618px; opacity: 1; animation-timing-function: step-end; } 33.332% { left: 432px; top: 618px; opacity: 1; animation-timing-function: step-end; } 33.333% { left: 432px; top: 618px; opacity: 1; animation-timing-function: steps(1, end); } 33.389% { left: 428px; top: 620px; opacity: 1; animation-timing-function: steps(81, end); } 37.889% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 38.167% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 38.278% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 39.943% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 39.944% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 40.056% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 40.333% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(53, end); } 43.278% { left: 316px; top: 308px; opacity: 1; animation-timing-function: steps(1, end); } 43.333% { left: 312px; top: 310px; opacity: 1; animation-timing-function: step-end; } 66.666% { left: 312px; top: 310px; opacity: 1; animation-timing-function: step-end; } 66.667% { left: 312px; top: 310px; opacity: 1; animation-timing-function: steps(1, end); } 66.722% { left: 316px; top: 308px; opacity: 1; animation-timing-function: steps(53, end); } 69.667% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 69.944% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 70.056% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 71.721% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 71.722% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 71.833% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 72.111% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(81, end); } 76.611% { left: 428px; top: 620px; opacity: 1; animation-timing-function: steps(1, end); } 76.667% { left: 432px; top: 618px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 432px; top: 618px; opacity: 1; animation-timing-function: step-end; } 100% { left: 432px; top: 618px; opacity: 1; } }
@keyframes hq-suburban-q-free-3 { 0.000% { left: 432px; top: 618px; animation-timing-function: step-end; } 33.332% { left: 432px; top: 618px; animation-timing-function: step-end; } 33.333% { left: 432px; top: 618px; animation-timing-function: steps(1, end); } 33.389% { left: 428px; top: 620px; animation-timing-function: steps(81, end); } 37.889% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 38.167% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 38.278% { left: 116px; top: 444px; animation-timing-function: step-end; } 39.943% { left: 116px; top: 444px; animation-timing-function: step-end; } 39.944% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 40.056% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 40.333% { left: 104px; top: 202px; animation-timing-function: steps(53, end); } 43.278% { left: 316px; top: 308px; animation-timing-function: steps(1, end); } 43.333% { left: 312px; top: 310px; animation-timing-function: step-end; } 66.666% { left: 312px; top: 310px; animation-timing-function: step-end; } 66.667% { left: 312px; top: 310px; animation-timing-function: steps(1, end); } 66.722% { left: 316px; top: 308px; animation-timing-function: steps(53, end); } 69.667% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 69.944% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 70.056% { left: 116px; top: 188px; animation-timing-function: step-end; } 71.721% { left: 116px; top: 188px; animation-timing-function: step-end; } 71.722% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 71.833% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 72.111% { left: 104px; top: 458px; animation-timing-function: steps(81, end); } 76.611% { left: 428px; top: 620px; animation-timing-function: steps(1, end); } 76.667% { left: 432px; top: 618px; animation-timing-function: step-end; } 99.999% { left: 432px; top: 618px; animation-timing-function: step-end; } 100% { left: 432px; top: 618px; } }
@keyframes hq-suburban-r-free-3 { 0.000% { background-position-y: 0px; } 33.333% { background-position-y: -68px; } 33.389% { background-position-y: -136px; } 37.889% { background-position-y: -204px; } 38.167% { background-position-y: -136px; } 38.278% { background-position-y: -136px; } 39.944% { background-position-y: -272px; } 40.056% { background-position-y: -68px; } 40.333% { background-position-y: -272px; } 43.278% { background-position-y: -68px; } 43.333% { background-position-y: -340px; } 66.667% { background-position-y: -204px; } 66.722% { background-position-y: -136px; } 69.667% { background-position-y: -204px; } 69.944% { background-position-y: -136px; } 70.056% { background-position-y: -136px; } 71.722% { background-position-y: -272px; } 71.833% { background-position-y: -68px; } 72.111% { background-position-y: -272px; } 76.611% { background-position-y: -204px; } 76.667% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-free-3 { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-free-3 150.0s infinite, hq-suburban-r-free-3 150.0s step-end infinite; } .hq-bld-suburban .hq-t-free-3 { animation: hq-suburban-q-free-3 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-3:hover ~ .hq-t-free-3 { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-free-3:checked ~ .hq-s-free-3 { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-free-3:focus-visible ~ .hq-s-free-3 { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-free-3:checked ~ .hq-card .hq-card-pic { background-position-y: 0px; }
@keyframes hq-suburban-cat-orange-p-free-3 { 0.000% { left: 414px; top: 656px; opacity: 1; animation-timing-function: step-end; } 33.332% { left: 414px; top: 656px; opacity: 1; animation-timing-function: step-end; } 33.333% { left: 414px; top: 656px; opacity: 1; animation-timing-function: steps(1, end); } 33.389% { left: 410px; top: 658px; opacity: 1; animation-timing-function: steps(81, end); } 37.889% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 38.167% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 38.278% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 39.943% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 39.944% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 40.056% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 40.333% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(53, end); } 43.278% { left: 298px; top: 346px; opacity: 1; animation-timing-function: steps(1, end); } 43.333% { left: 294px; top: 348px; opacity: 1; animation-timing-function: step-end; } 66.666% { left: 294px; top: 348px; opacity: 1; animation-timing-function: step-end; } 66.667% { left: 294px; top: 348px; opacity: 1; animation-timing-function: steps(1, end); } 66.722% { left: 298px; top: 346px; opacity: 1; animation-timing-function: steps(53, end); } 69.667% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 69.944% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 70.056% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 71.721% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 71.722% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 71.833% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 72.111% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(81, end); } 76.611% { left: 410px; top: 658px; opacity: 1; animation-timing-function: steps(1, end); } 76.667% { left: 414px; top: 656px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 414px; top: 656px; opacity: 1; animation-timing-function: step-end; } 100% { left: 414px; top: 656px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-free-3 { 0.000% { background-position-y: -52px; } 33.333% { background-position-y: -26px; } 33.389% { background-position-y: -26px; } 37.889% { background-position-y: 0px; } 38.167% { background-position-y: -26px; } 38.278% { background-position-y: -52px; } 39.944% { background-position-y: 0px; } 40.056% { background-position-y: -26px; } 40.333% { background-position-y: 0px; } 43.278% { background-position-y: -26px; } 43.333% { background-position-y: -52px; } 66.667% { background-position-y: 0px; } 66.722% { background-position-y: -26px; } 69.667% { background-position-y: 0px; } 69.944% { background-position-y: -26px; } 70.056% { background-position-y: -52px; } 71.722% { background-position-y: 0px; } 71.833% { background-position-y: -26px; } 72.111% { background-position-y: 0px; } 76.611% { background-position-y: 0px; } 76.667% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-free-4 { left: 492px; top: 372px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-free-4, .hq-bld-suburban .hq-b-free-4 { left: 492px; top: 372px; }
@keyframes hq-suburban-p-free-4 { 0.000% { left: 492px; top: 372px; opacity: 1; animation-timing-function: step-end; } 43.999% { left: 492px; top: 372px; opacity: 1; animation-timing-function: step-end; } 44.000% { left: 492px; top: 372px; opacity: 1; animation-timing-function: steps(6, end); } 44.333% { left: 468px; top: 384px; opacity: 1; animation-timing-function: steps(91, end); } 49.389% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 49.667% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 49.778% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 51.443% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 51.444% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 51.556% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 51.833% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(99, end); } 57.333% { left: 500px; top: 528px; opacity: 1; animation-timing-function: steps(1, end); } 57.389% { left: 504px; top: 526px; opacity: 1; animation-timing-function: step-end; } 64.001% { left: 504px; top: 526px; opacity: 1; animation-timing-function: step-end; } 64.002% { left: 504px; top: 526px; opacity: 1; animation-timing-function: steps(1, end); } 64.058% { left: 500px; top: 528px; opacity: 1; animation-timing-function: steps(99, end); } 69.558% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 69.836% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 69.947% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 71.612% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 71.613% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 71.724% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 72.002% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(91, end); } 77.058% { left: 468px; top: 384px; opacity: 1; animation-timing-function: steps(6, end); } 77.391% { left: 492px; top: 372px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 492px; top: 372px; opacity: 1; animation-timing-function: step-end; } 100% { left: 492px; top: 372px; opacity: 1; } }
@keyframes hq-suburban-q-free-4 { 0.000% { left: 492px; top: 372px; animation-timing-function: step-end; } 43.999% { left: 492px; top: 372px; animation-timing-function: step-end; } 44.000% { left: 492px; top: 372px; animation-timing-function: steps(6, end); } 44.333% { left: 468px; top: 384px; animation-timing-function: steps(91, end); } 49.389% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 49.667% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 49.778% { left: 116px; top: 188px; animation-timing-function: step-end; } 51.443% { left: 116px; top: 188px; animation-timing-function: step-end; } 51.444% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 51.556% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 51.833% { left: 104px; top: 330px; animation-timing-function: steps(99, end); } 57.333% { left: 500px; top: 528px; animation-timing-function: steps(1, end); } 57.389% { left: 504px; top: 526px; animation-timing-function: step-end; } 64.001% { left: 504px; top: 526px; animation-timing-function: step-end; } 64.002% { left: 504px; top: 526px; animation-timing-function: steps(1, end); } 64.058% { left: 500px; top: 528px; animation-timing-function: steps(99, end); } 69.558% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 69.836% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 69.947% { left: 116px; top: 316px; animation-timing-function: step-end; } 71.612% { left: 116px; top: 316px; animation-timing-function: step-end; } 71.613% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 71.724% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 72.002% { left: 104px; top: 202px; animation-timing-function: steps(91, end); } 77.058% { left: 468px; top: 384px; animation-timing-function: steps(6, end); } 77.391% { left: 492px; top: 372px; animation-timing-function: step-end; } 99.999% { left: 492px; top: 372px; animation-timing-function: step-end; } 100% { left: 492px; top: 372px; } }
@keyframes hq-suburban-r-free-4 { 0.000% { background-position-y: 0px; } 44.000% { background-position-y: -68px; } 44.333% { background-position-y: -136px; } 49.389% { background-position-y: -204px; } 49.667% { background-position-y: -136px; } 49.778% { background-position-y: -136px; } 51.444% { background-position-y: -272px; } 51.556% { background-position-y: -68px; } 51.833% { background-position-y: -272px; } 57.333% { background-position-y: -204px; } 57.389% { background-position-y: -340px; } 64.002% { background-position-y: -68px; } 64.058% { background-position-y: -136px; } 69.558% { background-position-y: -204px; } 69.836% { background-position-y: -136px; } 69.947% { background-position-y: -136px; } 71.613% { background-position-y: -272px; } 71.724% { background-position-y: -68px; } 72.002% { background-position-y: -272px; } 77.058% { background-position-y: -204px; } 77.391% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-free-4 { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-free-4 150.0s infinite, hq-suburban-r-free-4 150.0s step-end infinite; } .hq-bld-suburban .hq-t-free-4 { animation: hq-suburban-q-free-4 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-4:hover ~ .hq-t-free-4 { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-free-4:checked ~ .hq-s-free-4 { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-free-4:focus-visible ~ .hq-s-free-4 { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-free-4:checked ~ .hq-card .hq-card-pic { background-position-y: 0px; }
@keyframes hq-suburban-cat-orange-p-free-4 { 0.000% { left: 474px; top: 410px; opacity: 1; animation-timing-function: step-end; } 43.999% { left: 474px; top: 410px; opacity: 1; animation-timing-function: step-end; } 44.000% { left: 474px; top: 410px; opacity: 1; animation-timing-function: steps(6, end); } 44.333% { left: 450px; top: 422px; opacity: 1; animation-timing-function: steps(91, end); } 49.389% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 49.667% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 49.778% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 51.443% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 51.444% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 51.556% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 51.833% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(99, end); } 57.333% { left: 482px; top: 566px; opacity: 1; animation-timing-function: steps(1, end); } 57.389% { left: 486px; top: 564px; opacity: 1; animation-timing-function: step-end; } 64.001% { left: 486px; top: 564px; opacity: 1; animation-timing-function: step-end; } 64.002% { left: 486px; top: 564px; opacity: 1; animation-timing-function: steps(1, end); } 64.058% { left: 482px; top: 566px; opacity: 1; animation-timing-function: steps(99, end); } 69.558% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 69.836% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 69.947% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 71.612% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 71.613% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 71.724% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 72.002% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(91, end); } 77.058% { left: 450px; top: 422px; opacity: 1; animation-timing-function: steps(6, end); } 77.391% { left: 474px; top: 410px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 474px; top: 410px; opacity: 1; animation-timing-function: step-end; } 100% { left: 474px; top: 410px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-free-4 { 0.000% { background-position-y: -52px; } 44.000% { background-position-y: -26px; } 44.333% { background-position-y: -26px; } 49.389% { background-position-y: 0px; } 49.667% { background-position-y: -26px; } 49.778% { background-position-y: -52px; } 51.444% { background-position-y: 0px; } 51.556% { background-position-y: -26px; } 51.833% { background-position-y: 0px; } 57.333% { background-position-y: 0px; } 57.389% { background-position-y: -52px; } 64.002% { background-position-y: -26px; } 64.058% { background-position-y: -26px; } 69.558% { background-position-y: 0px; } 69.836% { background-position-y: -26px; } 69.947% { background-position-y: -52px; } 71.613% { background-position-y: 0px; } 71.724% { background-position-y: -26px; } 72.002% { background-position-y: 0px; } 77.058% { background-position-y: 0px; } 77.391% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-free-5 { left: 156px; top: 484px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-free-5, .hq-bld-suburban .hq-b-free-5 { left: 156px; top: 484px; }
@keyframes hq-suburban-p-free-5 { 0.000% { left: 156px; top: 484px; opacity: 1; animation-timing-function: step-end; } 26.666% { left: 156px; top: 484px; opacity: 1; animation-timing-function: step-end; } 26.667% { left: 156px; top: 484px; opacity: 1; animation-timing-function: steps(13, end); } 27.389% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 27.667% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 27.778% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 29.443% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 29.444% { left: 116px; top: 316px; opacity: 1; animation-timing-function: steps(2, end); } 29.556% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(5, end); } 29.833% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(76, end); } 34.056% { left: 408px; top: 482px; opacity: 1; animation-timing-function: steps(1, end); } 34.111% { left: 404px; top: 484px; opacity: 1; animation-timing-function: step-end; } 53.330% { left: 404px; top: 484px; opacity: 1; animation-timing-function: step-end; } 53.331% { left: 404px; top: 484px; opacity: 1; animation-timing-function: steps(1, end); } 53.387% { left: 408px; top: 482px; opacity: 1; animation-timing-function: steps(76, end); } 57.609% { left: 104px; top: 330px; opacity: 1; animation-timing-function: steps(5, end); } 57.887% { left: 124px; top: 320px; opacity: 1; animation-timing-function: steps(2, end); } 57.998% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 59.663% { left: 116px; top: 316px; opacity: 0; animation-timing-function: step-end; } 59.664% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 59.776% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 60.053% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(13, end); } 60.776% { left: 156px; top: 484px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 156px; top: 484px; opacity: 1; animation-timing-function: step-end; } 100% { left: 156px; top: 484px; opacity: 1; } }
@keyframes hq-suburban-q-free-5 { 0.000% { left: 156px; top: 484px; animation-timing-function: step-end; } 26.666% { left: 156px; top: 484px; animation-timing-function: step-end; } 26.667% { left: 156px; top: 484px; animation-timing-function: steps(13, end); } 27.389% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 27.667% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 27.778% { left: 116px; top: 444px; animation-timing-function: step-end; } 29.443% { left: 116px; top: 444px; animation-timing-function: step-end; } 29.444% { left: 116px; top: 316px; animation-timing-function: steps(2, end); } 29.556% { left: 124px; top: 320px; animation-timing-function: steps(5, end); } 29.833% { left: 104px; top: 330px; animation-timing-function: steps(76, end); } 34.056% { left: 408px; top: 482px; animation-timing-function: steps(1, end); } 34.111% { left: 404px; top: 484px; animation-timing-function: step-end; } 53.330% { left: 404px; top: 484px; animation-timing-function: step-end; } 53.331% { left: 404px; top: 484px; animation-timing-function: steps(1, end); } 53.387% { left: 408px; top: 482px; animation-timing-function: steps(76, end); } 57.609% { left: 104px; top: 330px; animation-timing-function: steps(5, end); } 57.887% { left: 124px; top: 320px; animation-timing-function: steps(2, end); } 57.998% { left: 116px; top: 316px; animation-timing-function: step-end; } 59.663% { left: 116px; top: 316px; animation-timing-function: step-end; } 59.664% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 59.776% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 60.053% { left: 104px; top: 458px; animation-timing-function: steps(13, end); } 60.776% { left: 156px; top: 484px; animation-timing-function: step-end; } 99.999% { left: 156px; top: 484px; animation-timing-function: step-end; } 100% { left: 156px; top: 484px; } }
@keyframes hq-suburban-r-free-5 { 0.000% { background-position-y: 0px; } 26.667% { background-position-y: -68px; } 27.389% { background-position-y: -136px; } 27.667% { background-position-y: -68px; } 27.778% { background-position-y: -68px; } 29.444% { background-position-y: -204px; } 29.556% { background-position-y: -272px; } 29.833% { background-position-y: -204px; } 34.056% { background-position-y: -272px; } 34.111% { background-position-y: -340px; } 53.331% { background-position-y: -136px; } 53.387% { background-position-y: -68px; } 57.609% { background-position-y: -136px; } 57.887% { background-position-y: -68px; } 57.998% { background-position-y: -68px; } 59.664% { background-position-y: -204px; } 59.776% { background-position-y: -272px; } 60.053% { background-position-y: -204px; } 60.776% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-free-5 { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-free-5 150.0s infinite, hq-suburban-r-free-5 150.0s step-end infinite; } .hq-bld-suburban .hq-t-free-5 { animation: hq-suburban-q-free-5 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-5:hover ~ .hq-t-free-5 { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-free-5:checked ~ .hq-s-free-5 { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-free-5:focus-visible ~ .hq-s-free-5 { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-free-5:checked ~ .hq-card .hq-card-pic { background-position-y: -680px; }
@keyframes hq-suburban-cat-orange-p-free-5 { 0.000% { left: 138px; top: 522px; opacity: 1; animation-timing-function: step-end; } 26.666% { left: 138px; top: 522px; opacity: 1; animation-timing-function: step-end; } 26.667% { left: 138px; top: 522px; opacity: 1; animation-timing-function: steps(13, end); } 27.389% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 27.667% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 27.778% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 29.443% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 29.444% { left: 98px; top: 354px; opacity: 1; animation-timing-function: steps(2, end); } 29.556% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(5, end); } 29.833% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(76, end); } 34.056% { left: 390px; top: 520px; opacity: 1; animation-timing-function: steps(1, end); } 34.111% { left: 386px; top: 522px; opacity: 1; animation-timing-function: step-end; } 53.330% { left: 386px; top: 522px; opacity: 1; animation-timing-function: step-end; } 53.331% { left: 386px; top: 522px; opacity: 1; animation-timing-function: steps(1, end); } 53.387% { left: 390px; top: 520px; opacity: 1; animation-timing-function: steps(76, end); } 57.609% { left: 86px; top: 368px; opacity: 1; animation-timing-function: steps(5, end); } 57.887% { left: 106px; top: 358px; opacity: 1; animation-timing-function: steps(2, end); } 57.998% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 59.663% { left: 98px; top: 354px; opacity: 0; animation-timing-function: step-end; } 59.664% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 59.776% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 60.053% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(13, end); } 60.776% { left: 138px; top: 522px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 138px; top: 522px; opacity: 1; animation-timing-function: step-end; } 100% { left: 138px; top: 522px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-free-5 { 0.000% { background-position-y: -52px; } 26.667% { background-position-y: -26px; } 27.389% { background-position-y: 0px; } 27.667% { background-position-y: -26px; } 27.778% { background-position-y: -52px; } 29.444% { background-position-y: 0px; } 29.556% { background-position-y: -26px; } 29.833% { background-position-y: 0px; } 34.056% { background-position-y: -26px; } 34.111% { background-position-y: -52px; } 53.331% { background-position-y: 0px; } 53.387% { background-position-y: -26px; } 57.609% { background-position-y: 0px; } 57.887% { background-position-y: -26px; } 57.998% { background-position-y: -52px; } 59.664% { background-position-y: 0px; } 59.776% { background-position-y: -26px; } 60.053% { background-position-y: 0px; } 60.776% { background-position-y: -52px; } }
.hq-bld-suburban .hq-s-free-6 { left: 268px; top: 272px; background-position-y: 0px; }
.hq-bld-suburban .hq-t-free-6, .hq-bld-suburban .hq-b-free-6 { left: 268px; top: 272px; }
@keyframes hq-suburban-p-free-6 { 0.000% { left: 268px; top: 272px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 268px; top: 272px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 268px; top: 272px; opacity: 1; animation-timing-function: steps(3, end); } 40.167% { left: 256px; top: 278px; opacity: 1; animation-timing-function: steps(38, end); } 42.278% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(5, end); } 42.556% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(2, end); } 42.667% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 44.332% { left: 116px; top: 188px; opacity: 0; animation-timing-function: step-end; } 44.333% { left: 116px; top: 444px; opacity: 1; animation-timing-function: steps(2, end); } 44.444% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(5, end); } 44.722% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(68, end); } 48.500% { left: 376px; top: 594px; opacity: 1; animation-timing-function: steps(1, end); } 48.556% { left: 372px; top: 596px; opacity: 1; animation-timing-function: step-end; } 66.668% { left: 372px; top: 596px; opacity: 1; animation-timing-function: step-end; } 66.669% { left: 372px; top: 596px; opacity: 1; animation-timing-function: steps(1, end); } 66.724% { left: 376px; top: 594px; opacity: 1; animation-timing-function: steps(68, end); } 70.502% { left: 104px; top: 458px; opacity: 1; animation-timing-function: steps(5, end); } 70.780% { left: 124px; top: 448px; opacity: 1; animation-timing-function: steps(2, end); } 70.891% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 72.557% { left: 116px; top: 444px; opacity: 0; animation-timing-function: step-end; } 72.558% { left: 116px; top: 188px; opacity: 1; animation-timing-function: steps(2, end); } 72.669% { left: 124px; top: 192px; opacity: 1; animation-timing-function: steps(5, end); } 72.947% { left: 104px; top: 202px; opacity: 1; animation-timing-function: steps(38, end); } 75.058% { left: 256px; top: 278px; opacity: 1; animation-timing-function: steps(3, end); } 75.224% { left: 268px; top: 272px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 268px; top: 272px; opacity: 1; animation-timing-function: step-end; } 100% { left: 268px; top: 272px; opacity: 1; } }
@keyframes hq-suburban-q-free-6 { 0.000% { left: 268px; top: 272px; animation-timing-function: step-end; } 39.999% { left: 268px; top: 272px; animation-timing-function: step-end; } 40.000% { left: 268px; top: 272px; animation-timing-function: steps(3, end); } 40.167% { left: 256px; top: 278px; animation-timing-function: steps(38, end); } 42.278% { left: 104px; top: 202px; animation-timing-function: steps(5, end); } 42.556% { left: 124px; top: 192px; animation-timing-function: steps(2, end); } 42.667% { left: 116px; top: 188px; animation-timing-function: step-end; } 44.332% { left: 116px; top: 188px; animation-timing-function: step-end; } 44.333% { left: 116px; top: 444px; animation-timing-function: steps(2, end); } 44.444% { left: 124px; top: 448px; animation-timing-function: steps(5, end); } 44.722% { left: 104px; top: 458px; animation-timing-function: steps(68, end); } 48.500% { left: 376px; top: 594px; animation-timing-function: steps(1, end); } 48.556% { left: 372px; top: 596px; animation-timing-function: step-end; } 66.668% { left: 372px; top: 596px; animation-timing-function: step-end; } 66.669% { left: 372px; top: 596px; animation-timing-function: steps(1, end); } 66.724% { left: 376px; top: 594px; animation-timing-function: steps(68, end); } 70.502% { left: 104px; top: 458px; animation-timing-function: steps(5, end); } 70.780% { left: 124px; top: 448px; animation-timing-function: steps(2, end); } 70.891% { left: 116px; top: 444px; animation-timing-function: step-end; } 72.557% { left: 116px; top: 444px; animation-timing-function: step-end; } 72.558% { left: 116px; top: 188px; animation-timing-function: steps(2, end); } 72.669% { left: 124px; top: 192px; animation-timing-function: steps(5, end); } 72.947% { left: 104px; top: 202px; animation-timing-function: steps(38, end); } 75.058% { left: 256px; top: 278px; animation-timing-function: steps(3, end); } 75.224% { left: 268px; top: 272px; animation-timing-function: step-end; } 99.999% { left: 268px; top: 272px; animation-timing-function: step-end; } 100% { left: 268px; top: 272px; } }
@keyframes hq-suburban-r-free-6 { 0.000% { background-position-y: 0px; } 40.000% { background-position-y: -68px; } 40.167% { background-position-y: -136px; } 42.278% { background-position-y: -204px; } 42.556% { background-position-y: -136px; } 42.667% { background-position-y: -136px; } 44.333% { background-position-y: -272px; } 44.444% { background-position-y: -68px; } 44.722% { background-position-y: -272px; } 48.500% { background-position-y: -68px; } 48.556% { background-position-y: -340px; } 66.669% { background-position-y: -204px; } 66.724% { background-position-y: -136px; } 70.502% { background-position-y: -204px; } 70.780% { background-position-y: -136px; } 70.891% { background-position-y: -136px; } 72.558% { background-position-y: -272px; } 72.669% { background-position-y: -68px; } 72.947% { background-position-y: -272px; } 75.058% { background-position-y: -204px; } 75.224% { background-position-y: 0px; } }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-s-free-6 { animation: hq-frames 2.24s steps(16) infinite, hq-suburban-p-free-6 150.0s infinite, hq-suburban-r-free-6 150.0s step-end infinite; } .hq-bld-suburban .hq-t-free-6 { animation: hq-suburban-q-free-6 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-6:hover ~ .hq-t-free-6 { opacity: 1; }
.hq-bld-suburban #hq-pick-suburban-free-6:checked ~ .hq-s-free-6 { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #1ed67c); }
.hq-bld-suburban #hq-pick-suburban-free-6:focus-visible ~ .hq-s-free-6 { outline: 2px solid #1ed67c; outline-offset: 2px; }
.hq-bld-suburban #hq-pick-suburban-free-6:checked ~ .hq-card .hq-card-pic { background-position-y: 0px; }
@keyframes hq-suburban-cat-orange-p-free-6 { 0.000% { left: 250px; top: 310px; opacity: 1; animation-timing-function: step-end; } 39.999% { left: 250px; top: 310px; opacity: 1; animation-timing-function: step-end; } 40.000% { left: 250px; top: 310px; opacity: 1; animation-timing-function: steps(3, end); } 40.167% { left: 238px; top: 316px; opacity: 1; animation-timing-function: steps(38, end); } 42.278% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(5, end); } 42.556% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(2, end); } 42.667% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 44.332% { left: 98px; top: 226px; opacity: 0; animation-timing-function: step-end; } 44.333% { left: 98px; top: 482px; opacity: 1; animation-timing-function: steps(2, end); } 44.444% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(5, end); } 44.722% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(68, end); } 48.500% { left: 358px; top: 632px; opacity: 1; animation-timing-function: steps(1, end); } 48.556% { left: 354px; top: 634px; opacity: 1; animation-timing-function: step-end; } 66.668% { left: 354px; top: 634px; opacity: 1; animation-timing-function: step-end; } 66.669% { left: 354px; top: 634px; opacity: 1; animation-timing-function: steps(1, end); } 66.724% { left: 358px; top: 632px; opacity: 1; animation-timing-function: steps(68, end); } 70.502% { left: 86px; top: 496px; opacity: 1; animation-timing-function: steps(5, end); } 70.780% { left: 106px; top: 486px; opacity: 1; animation-timing-function: steps(2, end); } 70.891% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 72.557% { left: 98px; top: 482px; opacity: 0; animation-timing-function: step-end; } 72.558% { left: 98px; top: 226px; opacity: 1; animation-timing-function: steps(2, end); } 72.669% { left: 106px; top: 230px; opacity: 1; animation-timing-function: steps(5, end); } 72.947% { left: 86px; top: 240px; opacity: 1; animation-timing-function: steps(38, end); } 75.058% { left: 238px; top: 316px; opacity: 1; animation-timing-function: steps(3, end); } 75.224% { left: 250px; top: 310px; opacity: 1; animation-timing-function: step-end; } 99.999% { left: 250px; top: 310px; opacity: 1; animation-timing-function: step-end; } 100% { left: 250px; top: 310px; opacity: 1; } }
@keyframes hq-suburban-cat-orange-r-free-6 { 0.000% { background-position-y: -52px; } 40.000% { background-position-y: -26px; } 40.167% { background-position-y: -26px; } 42.278% { background-position-y: 0px; } 42.556% { background-position-y: -26px; } 42.667% { background-position-y: -52px; } 44.333% { background-position-y: 0px; } 44.444% { background-position-y: -26px; } 44.722% { background-position-y: 0px; } 48.500% { background-position-y: -26px; } 48.556% { background-position-y: -52px; } 66.669% { background-position-y: 0px; } 66.724% { background-position-y: -26px; } 70.502% { background-position-y: 0px; } 70.780% { background-position-y: -26px; } 70.891% { background-position-y: -52px; } 72.558% { background-position-y: 0px; } 72.669% { background-position-y: -26px; } 72.947% { background-position-y: 0px; } 75.058% { background-position-y: 0px; } 75.224% { background-position-y: -52px; } }
@keyframes hq-suburban-cat-black-p { 0.000% { left: 426px; top: 370px; opacity: 1; animation-timing-function: step-end; } 32.559% { left: 426px; top: 370px; opacity: 1; animation-timing-function: step-end; } 32.560% { left: 426px; top: 370px; opacity: 1; animation-timing-function: steps(30, end); } 50.003% { left: 546px; top: 430px; opacity: 1; animation-timing-function: step-end; } 82.562% { left: 546px; top: 430px; opacity: 1; animation-timing-function: step-end; } 82.563% { left: 546px; top: 430px; opacity: 1; animation-timing-function: steps(30, end); } 100% { left: 426px; top: 370px; opacity: 1; } }
@keyframes hq-suburban-cat-black-r { 0.000% { background-position-y: -52px; } 32.560% { background-position-y: 0px; } 50.003% { background-position-y: -52px; } 82.563% { background-position-y: -26px; } }
.hq-bld-suburban .hq-cat-black { left: 426px; top: 370px; }
.hq-bld-suburban .hq-cat-black .hq-cat-sprite { background-position-y: -52px; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-cat-black { animation: hq-suburban-cat-black-p 24.57s infinite; } .hq-bld-suburban .hq-cat-black .hq-cat-sprite { animation: hq-cat-frames 2.24s steps(16) infinite, hq-suburban-cat-black-r 24.57s step-end infinite; } }
.hq-bld-suburban .hq-cat-orange .hq-cat-sprite { background-image: url(/assets/hq/suburban/cat-orange.png?v=55159aca); }
.hq-bld-suburban .hq-cat-black .hq-cat-sprite { background-image: url(/assets/hq/suburban/cat-black.png?v=d368917d); }
.hq-bld-suburban .hq-scene { background-image: url(/assets/hq/suburban/sky.png?v=0c1a6f03); }
.hq-bld-suburban .hq-cloud-1 { background-image: url(/assets/hq/suburban/cloud-1.png?v=08b10fe5); }
.hq-bld-suburban .hq-cloud-2 { background-image: url(/assets/hq/suburban/cloud-2.png?v=98e3572d); }
.hq-bld-suburban .hq-inside { background-image: url(/assets/hq/suburban/inside.png?v=182aae42); }
.hq-bld-suburban .hq-props { background-image: url(/assets/hq/suburban/props.png?v=bd60d931); }
.hq-bld-suburban .hq-outside { background-image: url(/assets/hq/suburban/outside.png?v=434cf95e); }
.hq-bld-suburban .hq-glow { background-image: url(/assets/hq/suburban/glow.png?v=eb0813bc); }
.hq-bld-suburban .hq-park { background-image: url(/assets/hq/suburban/park.png?v=cd185445); }
.hq-bld-suburban .hq-lamplight { background-image: url(/assets/hq/suburban/lamplight.png?v=2086c336); }
.hq-bld-suburban .hq-s-office-left { display: block; background-image: url(/assets/hq/suburban/p-office-left.png?v=e9ecca54); }
.hq-bld-suburban .hq-t-office-left::before { content: "Ty"; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-office-left.png?v=e9ecca54); }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-group::before { content: "Running TeamVanilla"; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-name::before { content: "Ty"; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-handle::before { content: "Tsy.VM"; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-role::before { content: "Owner"; }
.hq-bld-suburban #hq-pick-suburban-office-left:checked ~ .hq-card .hq-card-where::before { content: "Top floor, the office: the left desk"; }
.hq-bld-suburban .hq-b-office-left { display: none; }
.hq-bld-suburban .hq-s-office-right { display: block; background-image: url(/assets/hq/suburban/p-office-right.png?v=d062830a); }
.hq-bld-suburban .hq-t-office-right::before { content: "Lucian"; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-office-right.png?v=d062830a); }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-group::before { content: "Running TeamVanilla"; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-name::before { content: "Lucian"; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-handle::before { content: "HeyImLucian"; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-role::before { content: "Co-Owner"; }
.hq-bld-suburban #hq-pick-suburban-office-right:checked ~ .hq-card .hq-card-where::before { content: "Top floor, the office: the right desk"; }
.hq-bld-suburban .hq-b-office-right::before { content: "\002026"; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-office-right { animation: hq-say 21s -4s infinite, hq-suburban-q-office-right 150.0s infinite; } }
.hq-bld-suburban .hq-s-reception { display: block; background-image: url(/assets/hq/suburban/p-reception.png?v=33ce6656); }
.hq-bld-suburban .hq-t-reception::before { content: "Kassi"; }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-reception.png?v=33ce6656); }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-card .hq-card-group::before { content: "Running TeamVanilla"; }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-card .hq-card-name::before { content: "Kassi"; }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-card .hq-card-role::before { content: "Executive Assistant to Lucian and Ty"; }
.hq-bld-suburban #hq-pick-suburban-reception:checked ~ .hq-card .hq-card-where::before { content: "Ground floor: reception"; }
.hq-bld-suburban .hq-b-reception { display: none; }
.hq-bld-suburban .hq-s-racks { display: block; background-image: url(/assets/hq/suburban/p-racks.png?v=69c8563d); }
.hq-bld-suburban .hq-t-racks::before { content: "Jasun"; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-racks.png?v=69c8563d); }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-group::before { content: "Directors"; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-name::before { content: "Jasun"; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-handle::before { content: "Fuziion"; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-role::before { content: "Chief of Web Infrastructure Management"; }
.hq-bld-suburban #hq-pick-suburban-racks:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the server racks"; }
.hq-bld-suburban .hq-b-racks { display: none; }
.hq-bld-suburban .hq-s-music-desk { display: block; background-image: url(/assets/hq/suburban/p-music-desk.png?v=af7a195f); }
.hq-bld-suburban .hq-t-music-desk::before { content: "Jorr"; }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-music-desk.png?v=af7a195f); }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-card .hq-card-group::before { content: "Directors"; }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-card .hq-card-name::before { content: "Jorr"; }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-card .hq-card-role::before { content: "Music and Media Effects Director"; }
.hq-bld-suburban #hq-pick-suburban-music-desk:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the music desk"; }
.hq-bld-suburban .hq-b-music-desk::before { content: "\00266a"; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-music-desk { animation: hq-say 16s -1s infinite, hq-suburban-q-music-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-model-desk { display: block; background-image: url(/assets/hq/suburban/p-model-desk.png?v=4b00e49a); }
.hq-bld-suburban .hq-t-model-desk::before { content: "Shoreline"; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-model-desk.png?v=4b00e49a); }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-group::before { content: "Directors"; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-name::before { content: "Shoreline"; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-handle::before { content: "GorillaSquad"; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-role::before { content: "Director of Modeling and Objects"; }
.hq-bld-suburban #hq-pick-suburban-model-desk:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the modelling desk"; }
.hq-bld-suburban .hq-b-model-desk { display: none; }
.hq-bld-suburban .hq-s-first-desk { display: block; background-image: url(/assets/hq/suburban/p-first-desk.png?v=feb1c3fa); }
.hq-bld-suburban .hq-t-first-desk::before { content: "Ibrar"; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-first-desk.png?v=feb1c3fa); }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-group::before { content: "Development"; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-name::before { content: "Ibrar"; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-handle::before { content: "MagicIbrar"; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-role::before { content: "Developer"; }
.hq-bld-suburban #hq-pick-suburban-first-desk:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the first desk"; }
.hq-bld-suburban .hq-b-first-desk::before { content: "\002026"; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-first-desk { animation: hq-say 27s -9s infinite, hq-suburban-q-first-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-code-desk { display: block; background-image: url(/assets/hq/suburban/p-code-desk.png?v=44187929); }
.hq-bld-suburban .hq-t-code-desk::before { content: "Cipher"; }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-code-desk.png?v=44187929); }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-card .hq-card-group::before { content: "Development"; }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-card .hq-card-name::before { content: "Cipher"; }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-card .hq-card-role::before { content: "Developer"; }
.hq-bld-suburban #hq-pick-suburban-code-desk:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the desk with two screens"; }
.hq-bld-suburban .hq-b-code-desk::before { content: "\002026"; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-code-desk { animation: hq-say 22s -2s infinite, hq-suburban-q-code-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-phone-desk { display: block; background-image: url(/assets/hq/suburban/p-phone-desk.png?v=36de985c); }
.hq-bld-suburban .hq-t-phone-desk::before { content: "Sniff"; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-phone-desk.png?v=36de985c); }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-group::before { content: "Development"; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-name::before { content: "Sniff"; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-handle::before { content: "Sniffy"; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-role::before { content: "Android Developer"; }
.hq-bld-suburban #hq-pick-suburban-phone-desk:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the phone desk"; }
.hq-bld-suburban .hq-b-phone-desk { display: none; }
.hq-bld-suburban .hq-s-test-station { display: block; background-image: url(/assets/hq/suburban/p-test-station.png?v=e00a258a); }
.hq-bld-suburban .hq-t-test-station::before { content: "Nicho"; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-test-station.png?v=e00a258a); }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-group::before { content: "Quality and community"; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-name::before { content: "Nicho"; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-handle::before { content: "Niko"; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-role::before { content: "Quality Assurance Assistant"; }
.hq-bld-suburban #hq-pick-suburban-test-station:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the test station's beanbag"; }
.hq-bld-suburban .hq-b-test-station::before { content: "!"; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-test-station { animation: hq-say 29s -14s infinite, hq-suburban-q-test-station 150.0s infinite; } }
.hq-bld-suburban .hq-s-community-desk { display: block; background-image: url(/assets/hq/suburban/p-community-desk.png?v=0a379e1f); }
.hq-bld-suburban .hq-t-community-desk::before { content: "Toma"; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-community-desk.png?v=0a379e1f); }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-group::before { content: "Quality and community"; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-name::before { content: "Toma"; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-handle::before { content: "Darky"; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-role::before { content: "Quality Assurance Assistant and Community Outreach"; }
.hq-bld-suburban #hq-pick-suburban-community-desk:checked ~ .hq-card .hq-card-where::before { content: "Middle floor: the community desk"; }
.hq-bld-suburban .hq-b-community-desk::before { content: "\002665"; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-community-desk { animation: hq-say 25s -7s infinite, hq-suburban-q-community-desk 150.0s infinite; } }
.hq-bld-suburban .hq-s-sofa-left { display: block; background-image: url(/assets/hq/suburban/p-sofa-left.png?v=a68789cf); }
.hq-bld-suburban .hq-t-sofa-left::before { content: "Marko"; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-sofa-left.png?v=a68789cf); }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-group::before { content: "Emeritus staff"; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-name::before { content: "Marko"; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-handle::before { content: "d3Marko"; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-role::before { content: "Formerly Director of Media and Arts, Co-Owner and CFO"; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card .hq-card-where::before { content: "Ground floor: the sofa, left"; }
.hq-bld-suburban #hq-pick-suburban-sofa-left:checked ~ .hq-card { --card-accent: #c9184a; --card-on-accent: #ffffff; }
.hq-bld-suburban .hq-b-sofa-left { display: none; }
.hq-bld-suburban .hq-s-sofa-right { display: block; background-image: url(/assets/hq/suburban/p-sofa-right.png?v=e828482e); }
.hq-bld-suburban .hq-t-sofa-right::before { content: "Pointerboy"; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-sofa-right.png?v=e828482e); }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-group::before { content: "Emeritus staff"; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-name::before { content: "Pointerboy"; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-handle::before { content: "Lucas"; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-role::before { content: "Formerly Co-Owner, Executive Development Assistant and Systems Administrator"; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card .hq-card-where::before { content: "Ground floor: the sofa, right"; }
.hq-bld-suburban #hq-pick-suburban-sofa-right:checked ~ .hq-card { --card-accent: #c9184a; --card-on-accent: #ffffff; }
.hq-bld-suburban .hq-b-sofa-right { display: none; }
.hq-bld-suburban .hq-s-wanderer { display: block; background-image: url(/assets/hq/suburban/p-wanderer.png?v=cd2efb1c); }
.hq-bld-suburban .hq-t-wanderer::before { content: "Treyway"; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-wanderer.png?v=cd2efb1c); }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card .hq-card-group::before { content: "Emeritus staff"; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card .hq-card-name::before { content: "Treyway"; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card .hq-card-role::before { content: "Formerly Developer"; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card .hq-card-where::before { content: "Middle and ground floors, on the move"; }
.hq-bld-suburban #hq-pick-suburban-wanderer:checked ~ .hq-card { --card-accent: #c9184a; --card-on-accent: #ffffff; }
.hq-bld-suburban .hq-b-wanderer { display: none; }
.hq-bld-suburban .hq-s-doodle-wall { display: block; background-image: url(/assets/hq/suburban/p-doodle-wall.png?v=8ddb5c6b); }
.hq-bld-suburban .hq-t-doodle-wall::before { content: "Mohli"; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-pic { background-image: url(/assets/hq/suburban/p-doodle-wall.png?v=8ddb5c6b); }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-group::before { content: "Emeritus staff"; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-name::before { content: "Mohli"; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-handle::before { content: "Mohekeke"; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-role::before { content: "Founding member of TeamVanilla"; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card .hq-card-where::before { content: "Ground floor: the doodle wall"; }
.hq-bld-suburban #hq-pick-suburban-doodle-wall:checked ~ .hq-card { --card-accent: #c9184a; --card-on-accent: #ffffff; }
.hq-bld-suburban .hq-b-doodle-wall::before { content: "Me hoy minoy!"; }
.hq-bld-suburban .hq-b-doodle-wall { font-size: 14px; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-b-doodle-wall { animation: hq-say 48s -20s infinite, hq-suburban-q-doodle-wall 150.0s infinite; } }
.hq-bld-suburban .hq-s-free-1, .hq-bld-suburban .hq-t-free-1, .hq-bld-suburban .hq-b-free-1, .hq-bld-suburban .hq-pick-free-1 { display: none; }
.hq-bld-suburban .hq-s-free-2, .hq-bld-suburban .hq-t-free-2, .hq-bld-suburban .hq-b-free-2, .hq-bld-suburban .hq-pick-free-2 { display: none; }
.hq-bld-suburban .hq-s-free-3, .hq-bld-suburban .hq-t-free-3, .hq-bld-suburban .hq-b-free-3, .hq-bld-suburban .hq-pick-free-3 { display: none; }
.hq-bld-suburban .hq-s-free-4, .hq-bld-suburban .hq-t-free-4, .hq-bld-suburban .hq-b-free-4, .hq-bld-suburban .hq-pick-free-4 { display: none; }
.hq-bld-suburban .hq-s-free-5, .hq-bld-suburban .hq-t-free-5, .hq-bld-suburban .hq-b-free-5, .hq-bld-suburban .hq-pick-free-5 { display: none; }
.hq-bld-suburban .hq-s-free-6, .hq-bld-suburban .hq-t-free-6, .hq-bld-suburban .hq-b-free-6, .hq-bld-suburban .hq-pick-free-6 { display: none; }
.hq-bld-suburban .hq-cat-orange { left: 470px; top: 664px; }
.hq-bld-suburban .hq-cat-orange .hq-cat-sprite { background-position-y: -52px; }
@media (prefers-reduced-motion: no-preference) { .hq-bld-suburban .hq-cat-orange { animation: hq-suburban-cat-orange-p-reception 150.0s 0.8s infinite; } .hq-bld-suburban .hq-cat-orange .hq-cat-sprite { animation: hq-cat-frames 2.24s steps(16) infinite, hq-suburban-cat-orange-r-reception 150.0s 0.8s step-end infinite; } }
.hq-bld-suburban /* Seasons: the night's versions of the overlays a theme or a weather can turn on (tools/hqseason.py) */
.hq-scene { --hq-fol-blossom-shell: url(/assets/seasons/suburban/t/night/fol-blossom-shell.png?v=2c7a08f1); --hq-fol-blossom-fore: url(/assets/seasons/suburban/t/night/fol-blossom-fore.png?v=1ed15de5); --hq-fol-autumn-shell: url(/assets/seasons/suburban/t/night/fol-autumn-shell.png?v=ee41ebca); --hq-fol-autumn-fore: url(/assets/seasons/suburban/t/night/fol-autumn-fore.png?v=0765bd4c); --hq-fol-lush-shell: url(/assets/seasons/suburban/t/night/fol-lush-shell.png?v=480f874f); --hq-fol-lush-fore: url(/assets/seasons/suburban/t/night/fol-lush-fore.png?v=39b0afb6); --hq-fol-dead-shell: url(/assets/seasons/suburban/t/night/fol-dead-shell.png?v=80506fc0); --hq-fol-dead-fore: url(/assets/seasons/suburban/t/night/fol-dead-fore.png?v=8b4b5488); --hq-fol-autumn-red-shell: url(/assets/seasons/suburban/t/night/fol-autumn-red-shell.png?v=51d6963c); --hq-fol-autumn-red-fore: url(/assets/seasons/suburban/t/night/fol-autumn-red-fore.png?v=4f923c92); --hq-snow-back: url(/assets/seasons/suburban/t/night/snow-back.png?v=dbc047e9); --hq-snow-shell: url(/assets/seasons/suburban/t/night/snow-shell.png?v=a66d6529); --hq-snow-fore: url(/assets/seasons/suburban/t/night/snow-fore.png?v=1c6d09e5); --hq-decor-filter: brightness(.74); }