._box_18zrh_1{border:1px solid;width:25px;height:25px;position:absolute}._circle_18zrh_8{border:1px solid;border-radius:50%;width:25px;height:25px;position:absolute}#filter-demo{background:#fff;background:var(--bg-absolute);max-width:500px;height:175px;margin:0 auto;position:relative}#filter-demo .box-container{width:calc(100% - 40px);height:100%;position:relative}#filter-demo .box{transition-property:left opacity;transition-duration:0s;transition-timing-function:linear}#filter-demo .box:first-child{background:#9acd32;top:8px;left:16px}#filter-demo .box:nth-child(2){background:maroon;top:41px;left:16px}#filter-demo .box:nth-child(3){background:orchid;top:74px;left:16px}#filter-demo .box:nth-child(4){background:orange;top:107px;left:16px}#filter-demo .box:nth-child(5){background:#008b8b;top:140px;left:16px}#filter-demo.activated .box{transition-duration:1s;left:100%}#filter-demo.activated .filtered{opacity:0}#map-demo{background:#fff;background:var(--bg-absolute);max-width:500px;height:175px;margin:0 auto;position:relative}#map-demo .box-container{width:calc(100% - 40px);height:100%;position:relative}#map-demo .box{filter:hue-rotate();transition-property:filter left transform;transition-duration:0s;transition-timing-function:linear;transform:scale(1)}#map-demo .box:first-child{background:#9acd32;top:8px;left:16px}#map-demo .box:nth-child(2){background:maroon;top:41px;left:16px}#map-demo .box:nth-child(3){background:orchid;top:74px;left:16px}#map-demo .box:nth-child(4){background:orange;top:107px;left:16px}#map-demo .box:nth-child(5){background:#008b8b;top:140px;left:16px}#map-demo.activated .box{filter:hue-rotate(90deg);transition-duration:1s;left:100%}#map-demo.activated .shrinked{filter:hue-rotate();transform:scale(.6)}@keyframes _zigzag-0_1awl4_1{0%{filter:hue-rotate();opacity:1;top:8px;left:16px}14.2857%{filter:hue-rotate(90deg);opacity:1;top:8px;left:100%}28.5714%{filter:hue-rotate(90deg);opacity:1;top:41px;left:16px}42.8571%{filter:hue-rotate(90deg);opacity:1;top:41px;left:100%}57.1429%{filter:hue-rotate(90deg);opacity:1;top:74px;left:16px}71.4286%{filter:hue-rotate(90deg);opacity:1;top:74px;left:100%}85.7143%{filter:hue-rotate(90deg);opacity:1;top:107px;left:16px}to{filter:hue-rotate(90deg);opacity:1;top:107px;left:100%}}@keyframes _zigzag-1_1awl4_1{0%{filter:hue-rotate();opacity:1;top:41px;left:16px}14.2857%{filter:hue-rotate();opacity:1;top:41px;left:16px}28.5714%{filter:hue-rotate();opacity:1;top:41px;left:16px}42.8571%{filter:hue-rotate(90deg);opacity:1;top:41px;left:100%}57.1429%{filter:hue-rotate(90deg);opacity:1;top:74px;left:16px}71.4286%{filter:hue-rotate(90deg);opacity:1;top:74px;left:100%}85.7143%{filter:hue-rotate(90deg);opacity:1;top:107px;left:16px}to{filter:hue-rotate(90deg);opacity:1;top:107px;left:100%}}@keyframes _zigzag-2_1awl4_1{0%{filter:hue-rotate();opacity:1;top:74px;left:16px}14.2857%{filter:hue-rotate();opacity:1;top:74px;left:16px}28.5714%{filter:hue-rotate();opacity:1;top:74px;left:16px}42.8571%{filter:hue-rotate();opacity:1;top:74px;left:16px}57.1429%{filter:hue-rotate();opacity:1;top:74px;left:16px}71.4286%{filter:hue-rotate(90deg);opacity:1;top:74px;left:100%}85.7143%{filter:hue-rotate(90deg);opacity:1;top:107px;left:16px}to{filter:hue-rotate(90deg);opacity:1;top:107px;left:100%}}@keyframes _zigzag-3_1awl4_1{0%{filter:hue-rotate();opacity:1;top:107px;left:16px}14.2857%{filter:hue-rotate();opacity:1;top:107px;left:16px}28.5714%{filter:hue-rotate();opacity:1;top:107px;left:16px}42.8571%{filter:hue-rotate();opacity:1;top:107px;left:16px}57.1429%{filter:hue-rotate();opacity:1;top:107px;left:16px}71.4286%{filter:hue-rotate();opacity:1;top:107px;left:16px}85.7143%{filter:hue-rotate();opacity:1;top:107px;left:16px}to{filter:hue-rotate(90deg);opacity:1;top:107px;left:100%}}._container_1awl4_205{background:#fff;background:var(--bg-absolute);max-width:500px;height:150px;margin:0 auto;position:relative}._innerContainer_1awl4_214{width:calc(100% - 40px);height:100%;position:relative}._innerContainer_1awl4_214>:first-child{background:#9acd32;top:8px;left:16px}._innerContainer_1awl4_214>:nth-child(2){background:maroon;top:41px;left:16px;transform:scale(.8)}._innerContainer_1awl4_214>:nth-child(3){background:orchid;top:74px;left:16px;transform:scale(.6)}._innerContainer_1awl4_214>:nth-child(4){background:orange;top:107px;left:16px;transform:scale(.4)}._innerContainer_1awl4_214._activated_1awl4_242>:first-child{animation:4s linear forwards _zigzag-0_1awl4_1}._innerContainer_1awl4_214._activated_1awl4_242>:nth-child(2){animation:4s linear forwards _zigzag-1_1awl4_1}._innerContainer_1awl4_214._activated_1awl4_242>:nth-child(3){animation:4s linear forwards _zigzag-2_1awl4_1}._innerContainer_1awl4_214._activated_1awl4_242>:nth-child(4){animation:4s linear forwards _zigzag-3_1awl4_1}